CodePen ou Sublime Text ? Quand on parle de programmation web, les noms HTML, CSS et JavaScript viennent immédiatement à l’esprit. Il existe plusieurs façons de débuter. On peut même ouvrir un éditeur de texte et commencer à taper « html » . Cependant, pour voir le résultat de son code dans un éditeur de texte, il faut suivre une procédure assez fastidieuse pour constater les progrès.
Ces plateformes sont les principaux terrains de jeu des développeurs d'applications destinées aux utilisateurs . Pour en savoir plus sur les avantages et les inconvénients de ces programmes, nous les analyserons en détail dans cet article (du moins, tout ce que nous savons). Comme je le dis toujours, je suis certain que certains d'entre vous ont des connaissances plus approfondies sur le sujet. Si c'est le cas, n'hésitez pas à commenter et à nous signaler tout élément que nous aurions pu oublier. Nous serions ravis d'en discuter !
Aujourd'hui, nous allons analyser CodePen, JSBin, Plunkr, Sublime Text , CSSDeck, Dabblet et LiveWeave. Ce sont les outils les plus connus et les plus utilisés dans cet environnement. Il en existe bien sûr d'autres.
Pour celles et ceux qui ne savent pas ce que sont le front-end et le back-end, voici quelques explications. Le front-end, ou interface, est la partie visuelle que l'utilisateur voit sur le site web . Le back-end, quant à lui, est la partie contrôlée par l'administrateur du site. En programmation, lorsqu'on saisit du code via un outil qui affiche simultanément le résultat, on parle de front-end.
CodePen
Pour beaucoup, c'est l'outil le plus complet de tous ceux que nous avons évoqués. Utilisé comme plateforme web, il s'apparente davantage à une communauté pour présenter son travail – une sorte de YouTube pour programmeurs. On peut y découvrir les projets des programmeurs affiliés, les contacter si on est intéressé, consulter leurs profils, les suivre sur les réseaux sociaux et même s'abonner à leurs chaînes pour ne rien manquer de leurs projets à venir.
Présentation du contenu, du support et des raccourcis clavier
L'interface de CodePen est son atout majeur : en quelques clics, vous pouvez vous mettre au travail immédiatement. Elle présente des lignes clairement séparées pour HTML, CSS et JavaScript. Outre ces éléments visuels, vous pouvez parcourir le code pour suivre facilement votre progression et distinguer chaque langage. C'est particulièrement utile pour les programmeurs débutants.
Son interface web facilite la prise en main d'un logiciel que vous connaissez peu. Cela ne signifie pas forcément qu'il convienne à tous ; tout dépend de vos besoins. Mais il vous permet de mieux appréhender l'environnement avant d'installer un logiciel provenant d'une source inconnue sur votre ordinateur.
Si vous faites partie de ceux qui ont l'habitude d'utiliser cas totalement clavier lorsque vous travaillez, CodePen sera merveilleux pour vous. Besoin d'autres outils plugins pour pouvoir utiliser les raccourcis clavier pour remplir l'environnement. Cela rend le travail un peu plus inconfortable (bien que tout aussi efficace une fois installé). CP. intègre en standard un système qui vous fera remplir les mêmes lignes de code qui se répètent, comme dans une liste. Vous écrivez comment vous voulez que la liste apparaisse et cliquez sur Tabulation.
La version Pro permet également de nombreuses autres options pour un prix de 9,00 € pour le forfait de base à 29,25 € pour le forfait «Super». Pouvoir mettre à jour simultanément sur plusieurs appareils ce que nous faisons en un seul. Egalement un mode coopératif, un "mode enseignant", etc. Profitez si vous voulez ici.
JSBin
JSBin est un outil que l'on pourrait qualifier de simple d'utilisation . Dès que vous accédez à son site web, vous pouvez commencer à planifier votre prochain projet sans attendre. Et même si son interface initiale n'est pas des plus attrayantes, elle reste intuitive.
JSBin est simple, avec la structure de base créée en html pour ne pas perdre de temps, vous entrerez entre les différentes langues pour terminer le travail. Il y a d'abord HTML, puis CSS, Javascript et enfin votre travail visuellement. Et bien que cela semble plus difficile, vous aurez les mêmes types de raccourcis sans rien installer. Directement depuis le navigateur.
Cependant, j'ai trouvé plus difficile de visualiser correctement le code une fois masqué par les colonnes. Sur l'ordinateur portable, il faut faire défiler vers le haut ou vers le bas avec le pavé tactile , ce qui n'est pas très fluide.
Il ne comporte que deux versements, gratuits ou payants. C'est un peu plus cher que CodePen, même si si vous le payez annuellement, c'est plus rentable, si vous pouvez payer 120 €.
CSSDeck
L'espace de travail de CSSDeck est unique en son genre . Divisé en deux colonnes seulement, code et visuel, il utilise trois lignes en dessous pour séparer les différents types de langages. Son interface, inspirée des réseaux sociaux, et son espace de travail épuré aux couleurs plus claires en font un outil simple en apparence, ce qui n'est pas forcément un défaut.
Avec plus de soixante mille utilisateurs inscrits et plus de deux cent cinquante mille projets créés, trouver ce que vous cherchez ne sera pas difficile. La langue, comme toujours, pourrait constituer un obstacle pour ceux qui ne parlent pas anglais, mais ce réseau social privilégie le visuel, donc je ne pense pas que ce sera un problème majeur.
plunkr
Plunkr est l'outil le moins attrayant que j'aie vu jusqu'à présent . Son interface est surchargée de messages et manque d'images. Le contenu se charge lentement et n'est pas très utile au premier abord. De plus, le tri par date fait que n'importe quel programme, même le plus simple, peut apparaître en tête de liste. Pour trouver quelque chose de plus intéressant, il faut aller dans l'onglet « Les plus consultés ». À moins, bien sûr, que vous ne l'ayez déjà traduit avec Google.
Il convient également de mentionner que, d'après le site web, ils utilisent actuellement la version 1.0.0. Cela explique certains problèmes de conception, de présentation et les erreurs potentielles que vous pourriez rencontrer lors de votre navigation.
Autre avantage : si vous êtes à court d’idées , inutile de quitter Plunkr ni d’en ouvrir un autre onglet. Vous pouvez en effet parcourir d’autres projets directement depuis la barre latérale droite et les consulter instantanément. Ainsi, il est beaucoup plus facile de trouver rapidement des idées et de les appliquer immédiatement à votre projet.
touche
Dabblet est un outil simple : il suffit de se connecter et de créer un compte . Bien qu'il soit possible de s'inscrire et de créer un compte via GitHub, cette fonctionnalité n'est pas mise en avant sur le site web. Le projet Dabblet est présenté avec un fond dégradé jaune-rouge dans la section visuelle et un fond blanc dans la section code (comme c'est souvent le cas), mais vous pouvez modifier cela dans l'onglet CSS. Personnellement, je préfère conserver le fond blanc, car le dégradé n'apporte qu'un intérêt visuel mineur.
Lors de l'édition, vous pouvez facilement configurer les onglets affichés . Vous pouvez même alterner entre colonnes et lignes pour un confort de lecture optimal, selon l'utilisateur. La modification de la taille de la police, l'enregistrement anonyme sans inscription et la validation du code HTML sont d'autres fonctionnalités que Dabblet propose au premier coup d'œil. Bien que ce ne soit pas mon outil préféré, il mérite d'être pris en compte pour les futures versions, si elles sont mises à jour.
Ce que j'ai le moins apprécié, mais qui pourrait plaire aux programmeurs expérimentés, c'est l' absence d'une option permettant de saisir automatiquement du code HTML dans une balise . Autrement dit, il est impossible de saisir du code HTML, d'appuyer sur la touche Tabulation et de voir « html » et « /html » s'insérer automatiquement. D'autres applications proposent pourtant cette fonctionnalité.
LiveWeave
LiveWeave ressemble beaucoup à d'autres logiciels du même genre ; ses fonctionnalités sont identiques à celles des autres. Ce qui distingue ce projet, c'est son design : une palette de couleurs sombres, similaire à celle de CodePen, mais avec une mise en page carrée. La taille est ajustable . Il existe également un mode clair et un mode « hors ligne » où le code modifié n'est pas visible à l'écran tant que vous ne l'activez pas. Personnellement, je ne trouve pas cette fonctionnalité très utile ; en tant que designer, il est essentiel de voir ce que l'on modifie en temps réel, mais certains utilisateurs la trouveront sans doute pratique. Et bien qu'il soit possible de s'inscrire, comme toujours, l'expérience utilisateur n'est pas la priorité. Même sans inscription, vous pouvez enregistrer votre projet.
Sublime Text
Cet outil est totalement différent de tout ce que vous avez vu jusqu'à présent dans cette analyse . Sublime Text n'est pas une ressource web, mais une application. D'un côté, il est certainement plus pratique de l'avoir sur son ordinateur, surtout en cas de coupures ou de blocages internet dus à une utilisation intensive, et de perte de données possible. De l'autre côté, son interface est moins attrayante que celle des outils précédents. De plus, il ne dispose pas d'une communauté pour le partage de projets.
Ici, tout est à refaire . Vous devrez créer des tabulations pour placer les lignes de code et les renommer afin de les distinguer. Par exemple, si la première est du HTML, la seconde du CSS, ou inversement. Il n'y a pas de raccourcis : tout sera manuel, à l'exception des guillemets.
Conclusion
Tous ces programmes sont similaires, chaque entreprise y apportant sa touche personnelle, ce qui lui confère des avantages et des inconvénients. Chacun choisira celui qui lui semble le plus adapté à ses besoins. Je recommande CodePen ou CSSDeck pour leur interface intuitive et leurs fonctionnalités de réseautage social . Si vous préférez un autre programme, n'hésitez pas à laisser un commentaire pour expliquer votre choix ; cela sera certainement utile.