Avez-vous déjà souhaité qu'il y ait une application Web ou une extension qui vous permette de créer et de partager des prototypes d'interface utilisateur à la volée ?
Nous faisons tous! Nous avons tous des idées sur la façon dont nous voulons que nos sites ou nos applications se présentent.
Donc, vous avez trouvé un très bon design et vous ne vous souvenez pas exactement comment vous l'avez fait ?
Maintenant, vous devez trouver un moyen de le partager. Cela peut prendre des jours, voire des semaines, si vous essayez de partager une conception assez complexe.
Il n'y a aucune raison d'attendre pour réaliser vos prototypes d'applications Web. Créez-les maintenant avec Dabblet.
Faites glisser et déposez des éléments, stylisez-les et enregistrez-les. Envoyez-le à un designer pour révision ou copiez-le simplement dans une présentation. Les possibilités sont infinies.
Qu'est-ce que Dabblet ?
En utilisant touche, vous pouvez expérimenter de petits extraits de code CSS et HTML en temps réel.
Vous n'aurez pas besoin de préfixes dans votre code CSS lorsque vous l'utiliserez. Les points essentiels de GitHub vous permettent de stocker votre contenu, de le publier sur d'autres sites et de le partager avec d'autres.
C'est un excellent moyen de partager des extraits de code avec d'autres développeurs et d'obtenir des commentaires.
Comment ça marche?
Dès que le code est tapé, la sortie visuelle est instantanément visible par-dessus. JavaScript est la seule exception, étant donné qu'il serait irritant de l'exécuter à chaque frappe et pourrait même rendre le navigateur inutilisable dans certaines situations.
L'utilisation de l'option "Exécuter JS" dans l'onglet JavaScript ou du raccourci clavier (Ctrl + Entrée ou Cmd + Entrée) exécutera JavaScript lors de l'exécution d'un Dabblet. Le menu des options vous permet de modifier ce style.
En tant que développeur, vous pouvez basculer entre le codage dans ces trois langages simultanément ou voir le produit fini.
Fonctionnalités:
Voici les fonctionnalités de Dabblet que vous devez connaître :
Édition CSS rapide : Vous pouvez rapidement ajouter, modifier et supprimer des propriétés CSS. Les modifications seront reflétées sur la page en temps réel.
Mise en évidence de la syntaxe: La syntaxe du code CSS et HTML est mise en évidence, ce qui le rend facile à lire et à comprendre. Le code sera également validé au fur et à mesure de votre saisie. Vous pouvez également choisir de masquer la zone de code si vous préférez.
Saisie automatique: Dabblet propose une saisie semi-automatique pour les propriétés et les valeurs CSS. Cela peut être très utile lorsque vous créez ou modifiez des feuilles de style.
Feuilles de style CSS prédéfinies : Vous pouvez accéder à des feuilles de style CSS prédéfinies à partir de sites Web populaires. Ceux-ci peuvent être utilisés pour ajouter rapidement et facilement des styles à votre propre site Web.
Assistance essentielle : Dabblet prend en charge GitHub Gists, vous permettant de stocker et de partager facilement vos extraits de code avec d'autres.
Live Preview: Vous pouvez voir les résultats de vos modifications de code en temps réel sans recharger la page. Par exemple, si vous changez la couleur d'un texte, vous verrez le changement reflété sur le texte au fur et à mesure que vous tapez.
Raccourcis clavier: Dabblet propose des raccourcis clavier pour les tâches courantes, telles que l'ajout d'une nouvelle règle de style ou des commentaires.
Modes d'affichage multiples : Dabblet propose plusieurs modes d'affichage, ce qui vous permet de voir le code et les résultats côte à côte ou au-dessus et au-dessous l'un de l'autre.
Avantages
- CSS rapide
- Même si vous êtes connecté, vous pouvez toujours enregistrer en mode incognito.
- Aperçus de valeurs CSS en ligne pour divers paramètres tels que les angles, les couleurs, la durée, etc.
- Tout est XHR-ed, donc la page ne se rafraîchit jamais, même lorsque vous enregistrez.
- Raccourcis clavier à profusion.
- Tout le code est auto-formaté (sauf pour le démarquage).
- Documentation solide dès le départ.
Inconvénients
- L'interface est un peu écrasante au début, mais on s'y habitue.
- Pas (encore) de fonctionnalités de gestion au niveau du projet.
Intégrations Dabblet
Toute plate-forme doit s'intégrer à d'autres services, et Dabblet ne fait pas exception. Voici quelques-unes des intégrations proposées par Dabblet :
Google Analytics
Vous pouvez facilement ajouter votre code de suivi Google Analytics aux pages Dabblet. Cela vous permettra de suivre les pages vues et d'autres statistiques pour votre Dabblet.
Ubuntu
Dabblet peut être utilisé pour créer des thèmes Ubuntu. Vous pouvez créer un nouveau Dabblet, ajouter du code CSS et HTML et prévisualiser le thème dans un navigateur Web.
DigitalOcean
Une société d'hébergement cloud unique en son genre fournit des services de cloud computing aux entreprises, leur permettant de développer leurs opérations plus efficacement.
Qu'est-ce que Dabblet en fait ?
Vous pouvez maintenant créer, gérer et déployer vos Dabblets sur Espaces DigitalOcean.
Cela vous permet de conserver tous vos extraits de code au même endroit et de les partager facilement avec d'autres.
Alternatives aux Dabblets
Les alternatives sont toujours présentes, et dans le même ordre d'idées, en voici quelques-unes à méditer en ce qui concerne Dabblet :
Pastebin.com
Les programmeurs utilisent généralement le site Web pour enregistrer le code source ou des fragments de données de configuration. Cependant, n'importe qui peut mettre n'importe quel texte dans l'espace prévu.
Corbeille JS
JS Bin est un outil de test gratuit pour JavaScript. Le résultat peut être partagé via une URL courte une fois que Javascript a été saisi dans un volet et HTML dans l'autre. Utilisez un menu qui vous permet de choisir parmi certaines des bibliothèques JS les plus couramment utilisées.
CssDeckComment
Cet outil est idéal pour créer et échanger des cas de test avec d'autres personnes qui peuvent vous aider dans vos efforts de codage. Avec diverses options, vous pouvez même collaborer sur des projets instantanément avec d'autres programmeurs.
Plunker
Plunker est une plate-forme numérique où les développeurs Web peuvent réfléchir, collaborer et partager leurs réflexions.
Par exemple, vous pouvez commencer par un "Hello, world!" programmez dans n'importe quelle langue et ajoutez des extraits de code, des démarques et des captures d'écran pour créer une expérience d'apprentissage riche.
Mot de la fin
En conclusion, Dabblet est un outil utile pour les développeurs Web, en particulier ceux qui recherchent des moyens de rapidement et facilement tester leur code.
Avec ses diverses fonctionnalités et intégrations, il est difficile de ne pas trouver une utilisation pour cette plateforme.
Essayez-le aujourd'hui !
Soyez sympa! Laissez un commentaire