Una de les moltes coses frustrants sobre el desenvolupament web és no tenir una manera fàcil de compartir els vostres projectes amb altres. En molts casos, haureu d’acollir el vostre projecte en un servidor web o enviar tots els fitxers corresponents a algú que vulgui veure què heu creat. Però, gràcies a una eina en línia neta anomenada CodePen, ja no haureu de preocupar-vos per res.
CodePen.io
CodePen és una eina gratuïta que us permetrà allotjar els vostres projectes en línia sense haver de pagar ni un centèric. Per començar, vés a CodePen.io i crea un compte gratuït.
Un cop fet això, podeu crear un “Bolígraf” fent clic al botó “Nou bolígraf” a l’extrem superior dret de la pantalla.
Després d'això, podreu afegir qualsevol codi HTML, CSS i JavaScript als quadres corresponents. Quan comenceu a afegir algun codi, podreu veure una vista prèvia en directe del que esteu creant. Podeu titular el vostre primer Bolígraf a la cantonada superior esquerra. Després de fer clic al primer "Guardar", només podreu compartir l'URL de la pàgina amb amics, familiars i companys de feina perquè puguin veure el que esteu treballant.
Així és com la ploma semblarà amb algun codi inclòs (cortesia d’un projecte de campament de codi lliure anomenat Tribut Page):
Quan creeu el vostre propi Bolígraf, voldreu passar per la configuració abans de començar. Quan feu clic al botó "Bolígraf nou", haureu de preparar una plantilla de Bolígraf perquè comenceu a introduir algun codi. A la cantonada superior dreta hi haurà un botó "Configuració". Feu clic a això (haureu de veure la pantalla següent).
Aquí podreu passar per les pestanyes HTML, CSS i JavaScript per afegir informació específica. A la pestanya HTML, podreu afegir informació meta, coses que haurien d’anar a la secció
pestanya, etc. A CSS, podreu afegir preprocessadors CSS com MENYS i Sass. No només això, sinó que podeu afegir-ho en CSS externs com Bootstrap i Foundation. A la pestanya JavaScript, podeu afegir un preprocessador de JavaScript com Babel o CoffeeScript. A més, podeu afegir en marcs externs de JavaScript com Angular, React, Lodash, D3, etc.
Finalment, CodePen us permetrà canviar la "Visualització" que esteu veient. La vista predeterminada és Editor de vista, que us permet introduir el codi i obtenir una petita vista prèvia a la consola següent. Però, també hi ha altres opcions, amb una particularment útil és la vista de "pàgina completa", on podreu veure un projecte com si estigués en directe en un lloc web. Hi ha un munt d’altres visualitzacions disponibles per canviar-ne la pena.
CodePen és una eina perfecta i només hem tocat la superfície de la seva utilitat. Val la pena dirigir-se a CodePen.io i utilitzar-lo per treballar en uns quants projectes i, si voleu ganes, compartiu-lo amb els vostres amics o companys de feina.
Què en penses de CodePen? Heu utilitzat alguna eina similar? Feu-nos-ho saber a l'apartat de comentaris a continuació!
