Jednou z mnohých frustrujúcich vecí v oblasti vývoja webových aplikácií nie je jednoduchý spôsob, ako zdieľať svoje projekty s ostatnými. V mnohých prípadoch budete musieť svoj projekt hostiť na webovom serveri alebo poslať všetky príslušné súbory niekomu, kto chce vidieť, čo ste vytvorili. Ale vďaka úhľadnému online nástroju s názvom CodePen sa už s tým nemusíte starať.
CodePen.io
CodePen je bezplatný nástroj, ktorý vám umožní hosťovať vaše projekty online bez toho, aby ste museli platiť desetník. Ak chcete začať, prejdite na CodePen.io a vytvorte si bezplatný účet.
Keď to urobíte, môžete vytvoriť „pero“ kliknutím na tlačidlo „Nové pero“ v pravom hornom rohu obrazovky.
Potom budete môcť do príslušných polí pridať ľubovoľný kód HTML, CSS a JavaScript. Keď začnete pridávať nejaký kód, zobrazí sa živý náhľad toho, čo vytvárate. Svoje prvé pero môžete označiť v ľavom hornom rohu. Po kliknutí na svoje prvé „Uložiť“ budete môcť jednoducho zdieľať webovú adresu stránky s priateľmi, rodinou a spolupracovníkmi, aby videli, na čom pracujete.
Takto bude Vaše pero vyzerať s nejakým kódom v ňom (s láskavým dovolením projektu Free Code Camp s názvom Stránka Tribute):
Pri vytváraní vlastného pera budete chcieť prejsť cez Nastavenia skôr, ako začnete. Po kliknutí na tlačidlo „Nové pero“ by ste mali vidieť šablónu pera, ktorá je pripravená začať zadávať nejaký kód. V pravom hornom rohu bude tlačidlo „Nastavenia“. Kliknite na to (mali by ste vidieť nasledujúcu obrazovku).
Tu budete môcť prejsť cez karty HTML, CSS a JavaScript a pridať určité informácie. Na karte HTML budete môcť pridať meta informácie, veci, ktoré by mali ísť na webovú stránku
kartu atď. V časti CSS budete môcť pridať predprocesory CSS, ako napríklad LESS a Sass. Nielen to, ale môžete pridať aj externý CSS, ako je Bootstrap a Foundation. Na karte JavaScript môžete pridať predprocesora JavaScriptu, ako je Babel alebo CoffeeScript. Okrem toho môžete pridať externé rámce jazyka JavaScript, ako sú Angular, React, Lodash, D3 atď.
Nakoniec vám program CodePen umožní zmeniť zobrazenie, ktoré sledujete. Predvolené zobrazenie je Zobrazenie editora, ktoré vám umožní zadať váš kód a získať malý náhľad v konzole nižšie. Existujú však aj iné možnosti, s obzvlášť užitočným riešením, ktorým je zobrazenie „Celá stránka“, kde uvidíte projekt, akoby bol na webovej stránke zverejnený. Existuje niekoľko ďalších pohľadov, ktoré je možné prepnúť, je dobré si s nimi pohrať!
CodePen je skutočne úhľadný nástroj a dotýkali sme sa iba povrchu jeho užitočnosti. Stojí za to zamyslieť sa nad kódom CodePen.io a použiť ho na prácu na niekoľkých projektoch, a potom, ak sa cítite, zdieľať so svojimi priateľmi alebo spolupracovníkmi.
Čo si myslíte o CodePen? Použili ste podobný nástroj? Dajte nám vedieť v časti s komentármi nižšie!
