Share
Lorsque j’ai écrit à propos de JSBin il ya un certain temps, cela a certainement suscité beaucoup de discussions et de débats sur le choix de l’éditeur de fragments de code en ligne qui était le meilleur. Quelques alternatives ont été jetées, notamment CodePen.
Avec autant de lecteurs passionnés et engagés dans leurs choix spécifiques, je souhaitais écrire un article qui souligne la fraîcheur de CodePen. Je dirai que ce n'est pas un article de comparaison, principalement parce que je déteste vraiment faire ce genre d'articles. Chacun de ces outils est unique et offre sa propre valeur qui, selon moi, se résume à la préférence de l'utilisateur, dans de nombreux cas..
Il y a certainement des similitudes entre les outils, à la fois en termes d'interface utilisateur et de fonctionnalité. Si nous examinons les deux outils, vous constaterez que l’interface utilisateur à volets multiples est assez commune et pour une bonne raison; c'est très intuitif.
JSBin:
CodePen:
L'approche à volets multiples facilite la visualisation de toutes les facettes de votre exemple de code, ce qui vous permet de mettre à jour rapidement le balisage ou JavaScript et d'obtenir des résultats immédiats. Et c’est à quoi servent généralement ces outils; prototypage rapide et test des extraits de code.
Outre les similitudes d'interface utilisateur, les deux éditeurs permettent aux utilisateurs de:
De mon point de vue, toutes les fonctionnalités de n'importe quel outil de corbeille de code constituent des fonctionnalités essentielles. Elles permettent non seulement de créer un prototype de code frontal utilisant les ressources qu'ils utilisent couramment, mais également de le partager sur la plupart des supports utilisés par les développeurs. En tant que rédacteur technique, la possibilité d'intégrer un extrait de code en direct est extrêmement importante, car elle fournit des informations en temps réel pour démontrer le code que je crée, renforçant ainsi les concepts sur lesquels j'écris, ainsi que des informations et du code réels pour le lecteur..
Dans certains cas, la parité des fonctionnalités se résume à un coût, à savoir si ces fonctionnalités sont disponibles ou non. Par exemple, si vous souhaitez des fonctionnalités de collaboration, JSBin propose cette offre gratuitement, alors que cette fonctionnalité est uniquement disponible pour l'offre de niveau CodePen. Et pour être clair (et je l'ai déjà dit), je pense qu'il est parfaitement correct de facturer de superbes fonctionnalités. Donc, que la fonctionnalité soit gratuite ou basée sur un abonnement est sans importance à mon avis, tant qu'elle apporte de la valeur à l'utilisateur.
De tous les outils de corbeille que j'ai utilisés, je peux certainement dire que CodePen est de loin le plus esthétique et, honnêtement, c'est logique. La conception frontale de CodePen a été conçue par le développeur extrêmement talentueux, Chris Coyier, qui a un œil extraordinaire pour la conception d'interface utilisateur. Et cela se voit certainement dans l'aspect raffiné de l'outil.
Nous avons beaucoup réfléchi pour fournir un accès facile à la multitude de fonctionnalités importantes tout en veillant à ce que l'éditeur ne soit pas encombré et que les fonctionnalités ne soient pas intrusives. Ceci est important car l’immobilier de visualisation, dans ce type d’interface utilisateur, est restreint. Essayer de tout équilibrer, de fournir une expérience de codage décente dans plusieurs langues, tout en fournissant des résultats immédiats; C'est délicat et oblige à réfléchir en termes de mise en page.
Ceci est clairement évident dans l'utilisation d'icônes bien placées dans les en-têtes de chaque volet de script..
En exploitant une icône d'interface utilisateur couramment utilisée pour les paramètres (un engrenage), vous pouvez voir comment l'équipe CodePen a bien consolidé un certain nombre de fonctionnalités complémentaires importantes qui améliorent l'expérience de prototypage. C’est ce que je veux dire par l’interface utilisateur qui n’est pas intrusive: offre des raccourcis intuitifs vers des fonctionnalités supplémentaires. Mais il ne suffit pas d'ajouter des fonctionnalités supplémentaires. Ce sont des outils du monde réel que les développeurs Web utilisent quotidiennement et qui sont importants pour obtenir une idée légitime de savoir si leur prototype fonctionnera ou non..
Des fonctionnalités telles que le "Détails"view démontre la volonté de CodePen de fournir non seulement une expérience de montage solide, mais également un angle social fort permettant aux utilisateurs d’obtenir une meilleure visibilité de l’utilité des extraits de code qu’ils partagent:
À présent, bien que les deux outils offrent des fonctionnalités complémentaires étendues, CodePen montre clairement son objectif de fournir de meilleurs outils aux concepteurs via son support riche pour Sass, LESS et Stylus, avec des add-ons tels que Compass, Bourbon et Nib..
Mais bien qu'il brille dans les CSS et les balises, CodePen n'offre pas autant que JSBin en ce qui concerne la prise en charge des bibliothèques JavaScript. Cela ne veut pas dire qu'il n'inclut pas beaucoup d'acteurs majeurs, mais avec la pléthore de nouvelles bibliothèques et de nouveaux frameworks utilisés aujourd'hui, il existe une nette différence en termes de support intégré:
CodePen:
JSBin:
Il ressort clairement de ces captures d'écran (qui ne sont que des captures partielles) que l'étendue de la prise en charge de l'infrastructure JavaScript est bien plus étendue que CodePen, tant en nombre qu'en versions prises en charge. CodePen offre la possibilité d'inclure une ressource JavaScript externe dans votre extrait de code, mais il est très pratique de pouvoir cliquer sur une liste déroulante et de choisir parmi un ensemble de frameworks JS..
Il y a une caractéristique, cependant, qui me distingue totalement:
C'est vrai. CodePen comprend l'intégration avec l'un de mes outils de test de navigateur préférés, BrowserStack.com. J'ai déjà écrit sur le service et je l'adore pour sa simplicité de test et l'étendue de la couverture du navigateur. Voir donc l'intégration de CodePen avec celui-ci est un avantage considérable. Mais c'est plus qu'un bouton qui le rend génial. C'est la liste déroulante à côté de celle-ci qui vous permet de choisir le navigateur que vous souhaitez cibler:
… Qui vous dirige ensuite vers BrowserStack avec les mêmes informations:
En termes de commodité, c'est une victoire définitive pour les développeurs. Il est important de noter que vous serez redirigé hors de CodePen lorsque vous cliquez sur le bouton BrowserStack et que vous aurez besoin d'un compte BrowserStack pour pouvoir l'utiliser..
CodePen vient dans une édition gratuite et une plus riche en fonctionnalités Pro version. Cela inclut des fonctionnalités pour la prévisualisation en direct du code sur plusieurs appareils, la collaboration avec d'autres développeurs, la thématisation des stylos de code intégrés et l'intuitif "Mode professeur" très utile pour la formation et les cours en ligne..
Parmi les fonctionnalités Pro disponibles, les deux que je trouve les plus utiles sont les suivantes: Vue en direct et Hébergement de biens ce dernier permettant aux développeurs de télécharger des actifs tels que des images et des fichiers de script pouvant être utilisés directement dans le stylo de code.
Vous vous demandez peut-être pourquoi cela est utile? L’alternative consiste à trouver une option d’hébergement externe, comme un CDN ou votre propre serveur. Le fait de pouvoir directement télécharger votre propre fichier JavaScript personnalisé, vos images ou votre feuille de style résout ce problème et rend ces ressources facilement disponibles pour une utilisation dans vos stylos de code. Une fois téléchargé, il suffit de cliquer sur l'actif, de saisir son URL et de le déposer dans votre code:
Cela seul mérite les 9 dollars par mois pour utiliser le service et cela semble unique à CodePen.
La raison pour laquelle j'aime vraiment le Vue en direct Cette fonctionnalité est due au fait que les tests sur différents facteurs de forme sont extrêmement importants de nos jours. Cela se fait en envoyant le lien du stylo à l'appareil avec lequel vous voulez tester. Pour ce faire, saisissez-le directement dans la barre d'URL du navigateur mobile ou utilisez la boîte de dialogue de partage de CodePen pour envoyer un message texte à un appareil mobile:
Lorsque le stylet est mis à jour sur votre ordinateur, il reflète presque instantanément les modifications sur un nombre quelconque de périphériques..
CodePen est un excellent outil. Il est très poli et riche en fonctionnalités avec un support fantastique pour le balisage et les outils CSS. Le fait que certaines fonctionnalités ne reposent que sur un abonnement ne me met pas un peu en phase puisque je ne crains pas de prendre en charge un bon logiciel. Je dirai que certaines fonctionnalités semblent devoir faire partie du service standard, notamment la création de stylos privés et de prévisualisations en direct, en particulier lorsque d'autres services proposent déjà cela gratuitement..
À mon avis, après avoir utilisé à la fois JSBin et CodePen, il est clair qu'ils partagent des capacités très similaires et que le choix du service à utiliser dépendra finalement des préférences personnelles. Certains utilisateurs aimeront l'interface utilisateur professionnelle de CodePen, tandis que d'autres apprécieront l'étendue du support de la structure JavaScript dans JSBin. Cela peut se résumer à utiliser les deux pour accomplir différentes tâches, mais je peux dire que CodePen est certainement un service qui vaut la peine d’être exploité et que je l’ajouterai à mes outils professionnels..
Accentsconagua