Ecrire un morceau de code d interface est rarement ralenti par le code. Ce qui coute du temps est la chaine de preparation avant d ouvrir: installer un environnement, cabler une chaine d outils, trouver ou heberger, et chaque pas repousse un peu plus l idee.

Trois panneaux et un apercu

CodePen deplace dans le navigateur le plus petit circuit ferme du travail d interface. On ouvre le site et un Pen est la: trois panneaux portent HTML, CSS et JavaScript, les changements paraissent aussitot dans l apercu, rien n est a installer, aucune ligne de commande a affronter, aucun fichier de reglage a demeler. Le site le dit simplement: rien a installer, pas de ligne de commande qui se dresse, pas de reglage qui se noue.

Un Pen tient plus que ces trois. Des fichiers et des dossiers peuvent s ajouter jusqu a ce qu une demo dispersee devienne la structure de tout un site, et ce qui demande preparation comme Sass ou TypeScript est pris en charge par un compilateur integre, si bien qu aucune chaine ne doit etre debout avant de commencer. Plutot que de partir de vide, on applique un morceau de la communaute ou un modele garde, et on peut meme le mettre par defaut pour que chaque nouveau Pen parte d un point connu.

Ou vit ce qu on ecrit

Le travail reste dans le compte. Un Pen public se tient sur la page personnelle, ou autres peuvent lire, garder et trouver par recherche; une idee a moitie formee se range d abord par les reglages de visibilite; et quand ils sont nombreux, des collections les ordonnent. Les formules payantes ajoutent le depot de ressources: images, styles, scripts et meme son ou video glisses dans un panneau sont televerses, et la plateforme rend une adresse avec HTTPS, cache et acces depuis autre origine que tout Pen peut appeler, ce qui epargne la recherche d un endroit pour les fichiers fixes.

La publication se reduit a un clic. Tout Pen devient une adresse joignable sans preparer de serveur ni toucher aux details des noms de domaine. Qui le voit reste aussi votre choix: tout public, cache, derriere un mot de passe, ou ferme pour soi seul.

Ou le gratuit finit et la formule commence

Le bord de la formule gratuite est net: les Pen publics sont sans limite, mais chacun tient au plus trois fichiers et son contenu est public des le depart. Les Pen caches, les collections cachees et le depot de ressources commencent avec une formule, et plus la formule est haute, plus le nombre de fichiers, la taille des ressources et le total du depot se detendent.

Payer a annee epargne sur le mois: Starter a quatre vingt seize dollars par an, Developer a cent quarante quatre, Super a trois cent douze. Le quota d interface monte aussi avec la formule, cent demandes par heure en gratuit contre trois mille en formule. Une serie de changements d interface et de parcours est arrivee en version 2.0, et le detail des capacites plus neuves se lit dans les notes officielles.

Quel genre de probleme il resout

Dans le travail d interface il y a toujours du code qui ne merite pas un projet local: verifier comment une mise en page se tient a une certaine largeur, reproduire un defaut de style signale par un autre, montrer une transition a un collegue, ou simplement noter un fragment qui servira encore. Toutes ces situations ont du code court et de vie courte, qui pourtant demande un resultat tout de suite et une adresse qu on peut envoyer.

Les points faibles du contenant sont aussi clairs: il regarde la couche du rendu et ne fait pas tourner un service complet derriere; un Pen gratuit tient trois fichiers, donc une demo un peu plus grande touche le plafond; et le contenu est public des le depart, ce qui compte tant que le travail n est pas fini. Le prendre pour une porte des verifications rapides et du partage, et laisser les projets qui demandent un entretien long dans un depot local, voila la division naturelle.

Un outil abaisse un seuil rarement en ajoutant des fonctions, mais en supprimant les pas qui viennent avant. Quand une adresse suffit pour ecrire du code, ce qui reste entre l idee et l ecran se reduit a taper.

Un conseil pratique: pour une verification ou une demo courte, ouvrir un nouveau Pen plutot que sortir un environnement local; pour envoyer a quelqu un, se servir de la publication et donner une adresse que l autre cote ouvre simplement; et pour un fragment qui contient des details internes, regler la visibilite avant d ecrire la premiere ligne.