Découvrez la nouvelle partie « projet » de Codepen !

Aujourd'hui, le BlogDuWebdesign vous présente la dernière fonctionnalité ajoutée sur la plateforme Codepen : la gestion de projets complets.

Création, édition et publication de projets en ligne

Je pense que vous connaissez tous Codepen, une plateforme que je pourrais définir comme "dribbble mais pour les intégrateurs". Il y a quelques jours, la plateforme a ajouté une nouvelle corde à son arc avec la fonctionnalité "projet", qui permet de créer, comme son nom l'indique, des projets, mais aussi de les passer en production, et éventuellement d'y lier un domaine de votre choix (attention, cette fonctionnalité n'est pas disponible pour tous les plans Codepen).

Pour débuter avec cette nouvelle fonctionnalité, inscrivez-vous puis cliquez sur le nouveau bouton "projet" dans le menu "create".

Après un petit chargement, nous nous retrouvons avec une interface de projet vide nous proposant de choisir une des templates de projets pré-existante, ou pour une de vos propres templates que vous avez définie précédemment.

Notez qu'une fois votre choix fait, il est impossible de revenir en arrière sans supprimer votre projet et le recommencer, ce qui est assez dommage. Espérons qu'il sera possible dans le futur de créée des fichiers non pas vide mais correspondant à certaines templates que nous aurions définis.

Une fois votre projet charge, vous vous retrouvez avec une interface tres logique, avec un explorateur sur la gauche et vos fichiers ainsi que le visuel sur la droite.

La création du fichier se fait avec un simple clic droit, et la gestion des différents pre-processeurs et moteurs de templates est enfantine : créez simplement votre fichier avec la bonne extension, et Codepen se chargera seul de le reconnaitre et le compiler.

Enfin, noter l'existence de la même interface de proprietes que pour les pens, permettant de définir un titre, une description, la visibilité du projet, et quelques petites options relatives aux préprocesseurs.

Pour aller plus loin sur les points que je n'ai pas décrits (principalement le déploiement) je vous conseille d'aller jeter un oeil à la documentation de Codepen, qui est malheureusement assez sommaire mais tout de même mieux que rien.

Quelques points encore tres perfectibles

Malgré toutes ces louanges, il reste encore quelques points vraiment frustrants avec cet outil, comme par exemple la disposition des nouveaux contrôles. Je vais prendre comme exemple le bouton permettant de supprimer des projets, qui n'est pas du tout present dans l'admisistration des projets et est uniquement placé ici :

On pourra aussi regretter l'impossibilité de séparer l'écran d'édition en deux pour afficher par exemple le CSS et le HTML, alors que c'est quelque chose que la plateforme propose nativement pour les pens.

Enfin, je trouve vraiment regrettables qu'il soit impossible de créer des fichiers selon des templates définies, alors que cela est possible pour les pens et les projets.

Mon avis

Bon, je suis un grand fan de Codepen, et je dois avouer que cette fonctionnalité est une de celles que j'attendais avec le plus d'impatience. Bien sur, tout n'est pas parfait, mais il faut reconnaitre qu'ils ont vraiment bien travaillé et que l'utilisation de cette nouvelle fonction projets est vraiment agréable. 

De plus, il est important de noter que même les utilisateurs gratuits ont droit à cette fonctionnalité, bien que dans une version assez limitée mais tout à fait suffisante pour les petits besoins (un seul projet, limité à 10 fichiers maximum).