Les environnements de codage locaux sont excellents, mais il arrive souvent que je ne veuille pas ouvrir Espresso et passer quelques minutes à configurer le code alors que tout ce que je veux, c’est de tester une idée ou de travailler sur un bogue. En outre, les options de partage pour la plupart des applications de codage locales sont limitées et nécessitent généralement l'intégration d'une application externe telle que Dropbox.
Les terrains de jeu en ligne ou les bacs à sable tels que jsFiddle résolvent ce problème en vous fournissant un environnement de codage instantanément prêt pour que vous puissiez commencer à expérimenter dès le chargement de la page. Ces outils vous permettent de combiner CSS, HTML et souvent même JavaScript pour créer et partager des exemples de codage. Je suis complètement accro à ces choses et j'ai testé de manière approfondie tous ceux sur lesquels je peux mettre la main. Aujourd'hui, je vais passer en revue mes cinq favoris et expliquer non seulement pourquoi ce qui me plaît dans chaque option, mais aussi les points faibles.
CSSDesk
Je vais commencer par CSSDesk car c'est l'un des plus anciens de cette liste. Il existe depuis des années en tant que petit outil discret et obscur extrêmement utile pour jouer avec le code Web de base. CSSDesk est un outil très simple qui se concentre uniquement sur HTML et CSS.
Ce que j'aime à propos de CSSDesk
Il y a beaucoup de choses que j'aime tout particulièrement à propos de CSS Desk. Il y a trois sections principales: HTML, CSS et aperçu en direct, dont la taille peut être facilement modifiée avec un clic et un glisser-déplacer. J'aime le fait que vous puissiez facilement voir tout ce dont vous avez besoin en une seule vue. Il n'y a aucun effort ou configuration ici, chargez simplement la page et commencez à créer.
Il y a aussi la coloration syntaxique de base, comme tous les autres outils de cette liste. Cependant, une caractéristique assez unique que vous ne voyez pas souvent dans ces types d’outils est le numéro de ligne. C'est un ajout simple, mais j'ai tendance à aimer les numéros de ligne, donc j'apprécie vraiment l'inclusion.
Les fonctionnalités de la barre d’outils sont également très chouettes, offrant des options que vous ne trouvez simplement pas d’autres endroits. En plus de la fonctionnalité de partage standard, vous avez également la possibilité de télécharger ce que vous venez de créer. De plus, il existe un ensemble de textures d'arrière-plan de mosaïque par défaut qui sont appliquées si vous ne les remplacez pas manuellement. Celles-ci sont amusantes si vous créez simplement un bouton ou un widget et que vous voulez autre chose que le simple fond blanc.
Ce que je n'aime pas à propos de CSSDesk
Honnêtement, il n'y a pas grand chose à ne pas aimer à propos de celui-ci. Bien sûr, c'est simple et ne contient pas certaines des fonctionnalités fantaisistes des autres options, mais c'est aussi ce qui le rend génial. Je n’utilise presque plus celui-ci maintenant, mais chaque fois que je le fais, c’est tellement bien que je pense que je devrais passer plus souvent.
Le plus gros inconvénient pour les codeurs hardcore est le manque de prise en charge de JavaScript. S'il s'agit d'une solution spéciale pour vous, essayez de vérifier l'une des autres options.
JS Bin
JS Bin est un autre endroit populaire pour bricoler votre code. La conception de cette application est assez minime et vous permet vraiment de vous concentrer sur le code. Par défaut, la page affiche uniquement les volets d'aperçu HTML et en direct, mais vous pouvez également y ajouter facilement du JavaScript.
Ce que j'aime chez JS Bin
Il y a quelques fonctionnalités intéressantes sur JS Bin. La première chose que j'ai appréciée est le fait que rafraîchir la page ne tue pas votre travail. L'aperçu est mis à jour automatiquement, mais dans les rares cas où vous avez besoin d'une actualisation manuelle, il est agréable que votre premier instinct (Commande-R) n'entraîne pas la perte accidentelle d'une heure de bricolage.
Comme avec CSSDesk, vous enregistrez, partagez et téléchargez votre travail. La mise en œuvre de JavaScript est évidemment l’endroit le plus propice à l’avenir. Vous pouvez évidemment entrer votre propre JS mais, en prime, vous pouvez choisir d'inclure des bibliothèques populaires telles que jQuery.
Une autre fonctionnalité intéressante est la possibilité de contrôler les volets que vous voyez en manipulant l'URL. Par exemple, http: //jsbin.com/#javascript,html,live? vous obtiendrez tous les trois volets alors que? http: //jsbin.com/#html,live? Je vais juste vous chercher deux.
Ce que je n'aime pas à propos de JS Bin
Pour être honnête, JS Bin est mon option la moins préférée sur cette liste. C'est pas mal, mais ça manque définitivement du charme des autres. Une chose qui me tient toujours à l’esprit, c’est qu’il n’ya pas d’endroit dédié au CSS, ce qui vous oblige à l’intégrer à votre code HTML. Cela fonctionne très bien, mais ce n'est pas aussi bien que la séparation intentionnelle vue dans les autres options.
jsFiddle
jsFiddle a complètement décollé au cours des derniers mois à un an et est probablement l'option la plus populaire sur cette liste pour le moment. Et pour cause, c'est une application incroyable. Regardons les choses en face, une fois que vous aurez découvert jsFiddle, vous ne pourrez plus jamais vous tourner vers les autres options.
Ce que j'aime chez jsFiddle
Il y a une tonne de bonnes choses à couvrir dans ma liste de raisons pour lesquelles vous devriez utiliser jsFiddle. Le premier est la mise en page. Il y a quatre panneaux (HTML, CSS, JavaScript et aperçu) afin que vous puissiez voir tout ce dont vous avez besoin à la fois et redimensionner chaque zone à la volée. Le système de mise en page est ici très flexible et amusant.
Pendant que nous discutons des panneaux, vous pouvez personnaliser les panneaux CSS et JavaScript pour qu'ils utilisent vos outils tiers préférés. Vous trouverez un support pour la syntaxe Sass SCSS et CoffeeScript.
jsFiddle vous permet de créer un identifiant et d'afficher un tableau de bord de votre travail enregistré. Une fois que vous avez enregistré un violon, il existe une multitude d’options de menu et d’outils. Mes favoris sont la possibilité de créer rapidement une fourchette et l’option de ranger automatiquement la structure de votre code.
En plus des options de personnalisation des panneaux, la barre latérale contient également de nombreuses autres fonctionnalités intéressantes. Par exemple, vous pouvez ajouter rapidement les principales bibliothèques que vous souhaitez inclure (jQuery, MooTools, etc.) et vos propres ressources JavaScript / CSS.
Une dernière option incroyable de jsFiddle que je viens de découvrir l’autre jour: vous pouvez intégrer des violons dans une page Web. Cette option se trouve dans le menu de partage et constitue une excellente alternative aux autres services d'intégration de code.
Ce que je n'aime pas à propos de jsFiddle
Mon principal problème avec jsFiddle est l’absence d’option de mise à jour automatique pour l’aperçu. Une fois que vous avez utilisé toutes les autres options de cette liste et expérimenté les joies de la mise à jour automatique, il est difficile d’accepter des mises à jour manuelles toutes les quelques secondes avec jsFiddle.
En ce qui concerne les autres fonctionnalités, c’est la meilleure de la liste, mais cette contrariété me conduit souvent ailleurs si je veux simplement faire un test rapide. Les raccourcis clavier aident, mais ils ne sont toujours pas aussi agréables qu’un mécanisme automatique.
Dabblet
Dabblet est un gamin relativement nouveau dans ce genre. Comme CSSDesk, il se concentre uniquement sur HTML et CSS sans JavaScript. Cependant, ne le comptez pas car cela apporte une innovation sérieuse à la table que vous ne trouverez dans aucun autre éditeur.
Ce que j'aime chez Dabblet
Par défaut, Dabblet est divisé en trois onglets: CSS et Résultat, HTML et Résultat et Résultat. Cela procure souplesse et concentration tout en vous permettant de garder un œil sur le résultat.
Vous pouvez changer les choses avec les commandes ci-dessous. La scission peut être verticale, horizontale ou complètement éliminée. Il y a aussi un intéressant? Derrière le code? mode où votre résultat est simplement le fond de la zone de codage. Notez qu'il y a aussi un message sur l'utilisation de sans préfixe. J'utilise Dabblet tout le temps et je ne l'ai jamais remarqué jusqu'à maintenant! Cela signifie que vous n'avez pas à utiliser des préfixes de fournisseurs loufoques et que vous pouvez coder les valeurs par défaut simples, le code JavaScript masqué garantira que votre navigateur l'interprète correctement.
Dabblet propose également d’excellentes options d’enregistrement, telles que «Enregistrer anonymement». Il contient également des liens vers votre compte GitHub, ce qui plaira aux nerds qui aimeront.
Ma fonctionnalité Dabblet préférée est l'intégration de l'effet de survol super lisse dans le CSS. Ils sont plus faciles à montrer que décrire. Voici deux exemples:
Comme vous pouvez le constater, survoler certaines parties de CSS amène ces petites info-bulles qui sont vraiment géniales. Vous pouvez obtenir des aperçus des polices, des couleurs, des tailles et même des images.
Ce que je n'aime pas chez Dabblet
Dabblet est un peu bizarre d'un point de vue visuel, que vous l'aimiez ou que vous le détestiez. Personnellement, j’aime vraiment l’utiliser, mais j’espère vraiment avoir plus de contrôle sur la taille du panneau. Avoir un partage automatique 50/50 est une bonne chose, mais je devrais être capable de le régler manuellement comme je le souhaite.
Autant que je sache, il n’existe aucun moyen de visualiser simultanément votre code HTML et votre code CSS, ce qui est un peu gênant si vous êtes habitué à des options telles que jsFiddle, qui vous permettent de tout surveiller en même temps.
Tinkerbin
Tinkerbin est l'alternative la plus proche de jsFiddle que j'ai trouvée. Bien qu'il ne possède pas toutes les fonctionnalités sophistiquées de jsFiddle, il possède quelques astuces qui sont vraiment sympas.
Ce que j'aime chez Tinkerbin
La disposition du panneau par défaut sur Tinkerbin est probablement mon préféré sur toute cette liste. C'est une disposition très logique qui place le code à gauche et un très bon aperçu de mise à jour automatique à droite. Les sections HTML, CSS et JavaScript sont toutes empilées les unes sur les autres, avec des onglets facultatifs qui vous permettent de vous concentrer sur un seul d'entre eux.
En outre, Tinkerbin prend en charge encore plus d'options de syntaxe alternative que jsFiddle. Vous pouvez choisir HTML ou HAML; CSS, SCSS (avec Compass), l'ancienne syntaxe SASS ou LESS; et JavaScript ou CoffeeScript. Inutile de dire que si vous creusez des pré-processeurs, cette option vous convient.
Tinkerbin est la seule option qui vous permet d’échanger votre aperçu pour un affichage complet et agréable. Afficher la source? la fenêtre.
Ce que je n'aime pas chez Tinkerbin
Encore plus que Dabblet, la disposition de la fée Clochette est complètement rigide. Bien sûr, la configuration par défaut me convient le mieux, mais parfois, je souhaite élargir cet aperçu et je n’ai tout simplement pas l’option ici.
De plus, les options de sauvegarde ne sont pas les meilleures. Il n'y a pas de configuration de compte, de tableau de bord, d'intégration GitHub, etc. Vous sauvegardez simplement vos expériences dans une URL raccourcie.
Conclusion
A présent, je suis sûr que vous pouvez voir les avantages d'avoir quelques-uns de ces sites dans vos favoris. Je vous encourage à expérimenter le plus souvent possible avec de nouvelles idées pour rester en forme et ces services constituent un moyen formidable de le faire.
J'espère que cet avis a été utile pour jeter un regard utile sur les détails de chacune de ces solutions. Vous devez maintenant savoir non seulement ce qui rend chaque option unique, mais également en quoi chacune d’elles est insuffisante. Cela vous aidera à prendre une décision éclairée sur laquelle vous allez principalement vous concentrer.
Personnellement, je échange régulièrement avec chacun d’entre eux, mais récemment, j’ai passé du temps avec jsFiddle, Dabblet et Tinkerbin. Lequel de ceux-ci est votre préféré et pourquoi?