Développement FrontEnd: CodePen ou Sublime Text?

CodePen ou texte sublime?

CodePen ou Sublime Text? Si nous parlons de programmation Web, le nom de HTML, CSS et JavaScript nous vient tout de suite. Il y a plusieurs façons d'y arriver. Même, si nous ouvrons un bloc-notes, nous pouvons nous mettre au travail en écrivant "html". Il est vrai que pour voir le résultat de ce que vous programmez à partir d'un pad, vous aurez besoin d'une procédure laborieuse pour constater les progrès.

Ces sites sont les principaux terrains de jeux pour les développeurs d'applications pour les utilisateurs du jour. Pour en savoir plus sur les avantages et les inconvénients de ces programmes, nous allons les analyser en profondeur dans cet article (du moins, tout ce que nous savons). Comme je le dis toujours, certains d'entre vous ici connaissent sûrement mieux le sujet. Si c'est le cas, commentez tout ce qui nous échappe ici. Nous serons heureux de discuter!

Aujourd'hui nous allons analyser CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet et LiveWeave. Quels sont les outils les plus connus et les plus utilisés dans cet environnement. Il y en a plus, bien sûr.

Mais pour tous ceux qui ne savent pas ce qu'est le FrontEnd ou le BackEnd, expliquons un peu. Le Front-End ou l'interface est la partie visuelle que l'utilisateur de navigation pourra voir sur le Web. Le BackEnd sera la partie que l'administrateur du site contrôle. En programmation, si vous entrez du code via un outil qui affiche le résultat simultanément, cela sera appelé front-end.

CodePen

Pour beaucoup, l'outil le plus complet de tout ce dont nous parlons. Utilisé comme un outil Web qui est la chose la plus proche d'une communauté pour montrer votre travail. Une sorte de Youtube du programmeur. En cela, vous pourrez voir le travail des programmeurs affiliés au web et les contacter au cas où vous auriez un intérêt, voir leur profil, les suivre sur les réseaux et même vous abonner à leur chaîne pour voir tous leurs futurs projets.

Présentation du contenu, du support et des raccourcis clavier

La présentation CodePen est la plus intéressanteParce qu'en quelques clics, vous pouvez suivre le processus tout de suite. Avec des lignes très bien séparées de html, css et javascript. En plus de la partie visuelle, que vous pouvez alterner de haut en bas pour voir clairement votre progression. Ainsi aidant à bien différencier chaque langue. Quelque chose qui est pratique pour les nouveaux programmeurs.

Votre support Web, le rend plus supportable lorsque vous souhaitez commencer à utiliser quelque chose que nous ne connaissons pas vraiment très bien. Cela ne veut pas dire que c'est mieux pour un, cela dépend des besoins que nous avons. Mais oui, pour connaître un peu mieux l'environnement avant de s'engager à installer quoi que ce soit sur l'ordinateur d'origine "inconnue".

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 nous pourrions qualifier de direct. Puisqu'une fois que vous accédez à son domaine Web, il sera prêt à commencer à rédiger votre prochain projet, sans délai. Et bien que sa première mise en scène ne soit pas très attractive, elle est confortable.

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 inconfortable d'afficher le code correctement, une fois qu'il est masqué en raison des colonnes suivantes. Depuis, avec l'ordinateur portable, vous devez abandonner ou baisser avec le trackpad et ce 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

CSSDeck

L'environnement de travail de CSSDeck est différent de celui vu ci-dessus. Divisé en deux colonnes uniquement, visual-code, CSSDeck fonctionne avec 3 lignes vers le bas avec lesquelles il divise les différents types de langage. Avec une présentation sous forme de réseau social et un environnement de travail plus propre en couleur claire. Cela semble être un outil simple. Bien que parfois cela ne signifie pas que c'est négatif.

Avec plus de soixante mille utilisateurs enregistrés et plus de deux cent cinquante mille projets créés, rechercher et trouver ce que vous voulez ne sera pas difficile. La langue comme toujours, si cela peut être un inconvénient pour ceux qui ne connaissent pas l'anglais, mais dans ce réseau social L'image est très importante, donc je ne pense pas que ce soit un grand défi.

plunkr

plunkr c'est l'outil le moins attrayant que j'ai rencontré jusqu'à présent. La présentation est agglutinée en messages et manque d'images. Le chargement du contenu est lent et pas très utile à première vue. De plus, le classement par date permet à tout horaire, aussi simple soit-il, d'être en première position. Pour voir quelque chose de plus intéressant, vous devriez aller dans l'onglet qui dit: «Les plus regardé«. Autrement dit, si vous ne l'avez pas encore traduit avec Google.

Dites aussi que selon le web, ils sont en version 1.0.0. Cela explique donc un peu le design, la présentation et les éventuelles erreurs que l'on trouve lors de la navigation sur le web.

Comme avantage, si vous êtes à court d'idées, vous n'aurez pas à quitter ou ouvrir un autre onglet dans Plunkr, car directement à partir de la barre latérale droite, vous pouvez parcourir d'autres projets et les afficher instantanément. Cela vous permettra de collecter plus facilement des idées rapides et de les appliquer à votre projet en même temps.

touche

touche c'est un outil simple, vous entrez et créez. Bien que vous puissiez vous inscrire et avoir votre nom d'utilisateur via GitHub, ce n'est pas quelque chose qui se démarque beaucoup sur le Web. Avec un arrière-plan dans un dégradé jaune à rouge, dans la partie visuelle et un arrière-plan blanc dans la partie code (comme d'habitude), le projet Dabblet est présenté, bien que vous puissiez le modifier à partir de l'onglet CSS. Pour moi, il vaut mieux l'avoir vierge, puisque ce dégradé tout ce que cela donne est un peu vie a

Lorsque vous modifiez, vous pouvez configurer les onglets que vous voyez facilement. Même si vous souhaitez basculer vers des colonnes ou des lignes pour une visualisation confortable en fonction de la personne qui édite. Changer la taille de la police, enregistrer comme anonyme sans enregistrer ou valider le code HTML sont d'autres possibilités que Dabblet offre à première vue. Bien que ce ne soit pas la première option que je choisirais, il se peut que ce soit à prendre en compte dans les futures versions si elles sont mises à jour.

Une des choses que j'ai le moins aimé, mais que les grands programmeurs peuvent aimer, c'est que vous n'avez pas la possibilité de tabuler une étiquette et de la faire écrire elle-même. Autrement dit, mettez HTML et cliquez sur l'onglet et écrivez automatiquement "html" et "/ html". Quelque chose que dans les autres applications si c'est fait.

LiveWeave

tissage vivant

LiveWeave Il est très similaire aux autres, il n'a rien que les autres ne puissent offrir en termes d'utilité. Ce que nous soulignons à propos de ce projet est son design, une couleur sombre similaire à CodePen mais avec une distribution carrée. Pouvoir changer la taille goûter. Il y a aussi le mode clair et le «déconnecté« où le code que vous modifiez ne sera pas reflété dans le visuel, jusqu'à ce que vous l'activiez. Ce n'est pas une fonctionnalité que je trouve très utile, en tant que concepteur, il est important de toujours voir ce que vous éditez en temps réel, mais quelqu'un la trouvera certainement utile. Et bien que, comme toujours, vous puissiez vous inscrire, l'utilisateur n'a pas de rôle de premier plan. Depuis, même si vous ne vous inscrivez pas, vous pouvez sauvegarder votre projet.

Sublime Text

Cet outil c'est totalement différent de ce que vous avez vu jusqu'à présent dans l'analyse. Sublime Text n'est pas une ressource Web, mais une application. D'une part, il sera certainement plus utile de l'avoir sur le bureau. Surtout en raison d'éventuels crashs ou gels d'Internet dus à un excès et à une éventuelle perte de travail. En revanche, ce n'est pas un outil aussi visuel que les précédents. En plus de ne pas avoir la possibilité d'une communauté de partager des projets.

Ici tout est à partir de zéro. Vous devez créer des onglets pour placer les lignes de code et les renommer pour savoir lequel est. Si le premier est HTML, le second CSS .. ou vice versa. Il n'a pas non plus de raccourcis pour ce que ce sera entièrement manuel, sauf pour les citations.

Conclusion

Tous les programmes sont similaires avec certaines touches personnelles de chaque entreprise qui conduisent à avoir des avantages et des inconvénients. Chacun choisira celui qui lui convient le mieux, ma recommandation est d'utiliser CodePen ou CSSDeck pour l'environnement et le réseau social qu'il gère. Mais, si vous en avez aimé un autre plus, laissez un commentaire et expliquez vos raisons, ils vous seront sûrement utiles.


Soyez le premier à commenter

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.