Yksi monista turhauttavista asioista, jotka liittyvät web-kehitykseen, ei ole helppo tapa jakaa projektisi muiden kanssa. Monissa tapauksissa joudut isännöimään projektiasi verkkopalvelimella tai lähettämään kaikki vastaavat tiedostot henkilölle, joka haluaa nähdä mitä olet luonut. Mutta siistän CodePen-nimisen verkkotyökalun ansiosta sinun ei tarvitse enää huolehtia siitä.
CodePen.io
CodePen on ilmainen työkalu, jonka avulla voit isännöidä projektejasi verkossa joutumatta maksamaan senttiäkään. Aloita siirtymällä sivulle CodePen.io ja luomalla ilmainen tili.
Kun olet tehnyt sen, voit luoda ”kynän” napsauttamalla ”Uusi kynä” -painiketta näytön oikeassa yläkulmassa.
Sen jälkeen voit lisätä HTML-, CSS- ja JavaScript-koodit vastaaviin ruutuihin. Kun aloitat lisäämisen johonkin koodiin, saat nähdä reaaliaikaisen esikatselun luomasi tuotteista. Voit nimetä ensimmäisen kynäsi vasemmassa yläkulmassa. Kun olet napsauttanut ensimmäistä Tallenna-painiketta, voit jakaa sivun URL-osoitteen ystävien, perheen ja työtovereiden kanssa, jotta he voivat nähdä mitä työskentelet.
Näin kynäsi näyttää jollain koodilla siinä (ilmainen Tribute Page -niminen vapaa Code Camp -projekti):
Kun luot omaa kynääsi, sinun kannattaa käydä läpi asetukset ennen aloittamista. Kun napsautat ”Uusi kynä” -painiketta, sinun pitäisi nähdä kynämalli, joka on valmis aloittamaan jonkin koodin syöttämisen. Oikeassa yläkulmassa on “Asetukset” -painike. Napsauta sitä (sinun pitäisi nähdä alla oleva näyttö).
Täällä voit käydä läpi HTML-, CSS- ja JavaScript-välilehdet lisätäksesi tiettyjä tietoja. Voit lisätä HTML-välilehteen metatietoja, asioita, joiden pitäisi mennä
välilehti ja niin edelleen. Kohdassa CSS voit lisätä CSS-esikäsittelyohjelmia, kuten LESS ja Sass. Ei vain, mutta voit lisätä ulkoisen CSS: n, kuten Bootstrap ja Foundation. Voit lisätä JavaScript-välilehden JavaScript-esikäsittelyohjelmaan, kuten Babel tai CoffeeScript. Lisäksi voit lisätä ulkoisia JavaScript-kehyksiä, kuten Angular, React, Lodash, D3 ja niin edelleen.
Lopuksi CodePen antaa sinun muuttaa haluamasi "Näkymän". Oletusnäkymä on Editor-näkymä, jonka avulla voit kirjoittaa koodisi ja saada pienen esikatselun alla olevasta konsolista. Mutta on myös muita vaihtoehtoja, joista erityisen kätevä on ”Koko sivu” -näkymä, jossa voit nähdä projektin ikään kuin se olisi suorana verkkosivustolla. Vaihtoehtoisesti on käytettävissä kourallinen muita näkymiä, sen kanssa kannattaa pelata!
CodePen on todella siisti työkalu, ja olemme koskettaneet vain sen hyödyllisyyden pintaa. Kannattaa siirtyä CodePen.io-sivulle ja käyttää sitä työskentelemään muutamaan projektiin ja sitten, jos sinusta tuntuu, jaa se ystävien tai työtovereiden kanssa.
Mitä mieltä olet CodePenistä? Oletko käyttänyt samanlaista työkalua? Kerro meille alla olevassa kommenttiosassa!
