Home-theater-designers
Začíname s vývojom webu v jazyku JavaScript môže byť frustrujúce, ale existujú nástroje, ktoré to uľahčujú.
CodePen.io je prostredie kódovania v prehliadači navrhnuté tak, aby sa naučilo kódovať a rýchlo prototypovalo nápady s minimálnymi problémami.
V tomto článku sa pozrieme na niektoré funkcie stránok a na to, ako vám môžu pomôcť stať sa lepším programátorom.
Čo je to CodePen?
CodePen poskytuje niečo, čo sa nazýva a pero , ktorý obsahuje tri rôzne okná pre HTML, CSS a JavaScript, plus panel s ukážkou, ktorý sa počas písania aktualizuje v reálnom čase.
Aj keď sa weboví vývojári často používajú na predvádzanie nápadov na webové stránky, je to tiež skvelé miesto na zoznámenie sa so základmi webového vývoja front-end. Tu sú najpozoruhodnejšie funkcie, ktoré potrebujete vedieť pri používaní CodePen.
1. Predprocesory
Preprocesory sú interpretované alebo kompilované jazyky navrhnuté tak, aby zjednodušili kódovanie. Môžu do jazyka pohodlne pridať funkcie a uľahčiť čítanie kódu. Pri vývoji webových aplikácií sa na rýchle vytváranie čistého kódu používa kombinácia preprocesorov pre HTML, CSS a JavaScript.
Ak sa učíte vývoj webových aplikácií a chcete vyskúšať rôzne preprocesory, CodePen vám umožňuje priebežne prepínať preprocesory a v reálnom čase vidieť kód, ktorý kompiluje. Každá z troch tabiel v aplikácii CodePen má v pravom hornom rohu rozbaľovaciu ponuku. Vyberte Zobraziť kompilované HTML/CSS/JS aby ste videli, ako bude kód interpretovaný.
V tomto pere sme vytvorili jednoduchú stránku pomocou Haml a Sass upravte štýl textu hlavičky. Výber Zobraziť zostavené ukazuje štandardný HTML a CSS. V tomto prípade je rozdiel minimálny. Pri učení sa nového jazyka však môže byť užitočné zistiť, ako vyzerá predspracovaný kód po jeho kompilácii.
2. Externé zdroje
Okrem natívnej podpory preprocesorov podporuje CodePen aj externé skripty. Vďaka tomu je ideálnym miestom na získanie praktických skúseností s knižnicami pre vaše osobné projekty alebo na oprášenie obľúbených knižníc webových aplikácií, ako je React.
Ak chcete pridať externú knižnicu, otvorte súbor nastavenie na pere a prejdite na kartu JavaScript. Existujú dva spôsoby pridania zdrojov, buď manuálnym pridaním adresy URL zdroja, alebo vyhľadaním.
Túto funkciu sme použili v našom článku webová animácia s mo.js , spolu s predspracovaním Babel.
Pozri Pero Príklad Mojs MUO od Iana ( @Bardoctorus ) na CodePen.
Áno, perá CodePen je možné vložiť! Pokračujte a kliknutím na panel s ukážkou vyššie zobrazíte výsledky tutoriálu Mo.js!
Ostatné perá je možné importovať podobne ako externé knižnice. To znamená, že môžete vziať prvky z predtým napísaných pier a používať ich ako moduly vo svojich nových perách. Používateľ CodePen Adam's Jednoduchá anketa pero je toho dobrým príkladom.
3. Šablóny
Keď sa učíte nové koncepty alebo testujete nové nápady, často používate podobné súčasti a na začiatku preštudujte rovnaké kroky. CodePen umožňuje vytvorenie predlohových pier, ktoré môžu obmedziť opakovanie, a umožní vám prejsť priamo k veci.
Ak chcete vytvoriť šablónu, otvorte nové pero, vykonajte zmeny a vyberte ikonu Predloha posúvač v ponuke nastavení.
https://vimeo.com/221428690
Bezplatní používatelia mohli donedávna vytvárať iba tri šablóny, ale teraz môžu mať všetci používatelia vo svojom účte toľko šablón, koľko chcú. Ideálne na začatie nového nápadu s minimálnym oneskorením!
4. Módna spolupráca
Schopnosť spolupracovať a učiť sa s CodePenom môže byť jeho najväčšou devízou. Programátorov už existuje množstvo skvelých nástrojov na spoluprácu, ale prístup CodePen je jednoduchý a intuitívny.
Profesionálni používatelia CodePen si môžu vytvoriť nové pero a otvoriť ho spolupráci v rámci Zmeniť zobrazenie Ponuka. Toto zmení odkaz pera na zdieľateľnú pozvánku pre škálovateľný počet ľudí v závislosti od vášho plánu CodePen Pro.
tlačidlo domov na iPhone nefunguje
V tomto prípade som písal HTML, zatiaľ čo priateľ aktualizoval CSS v reálnom čase s označeným kurzorom určeným, kde pracujú.
Ktokoľvek s odkazom sa môže pripojiť a používať funkciu rozhovoru v prehliadači bez ohľadu na to, či je profesionálnym používateľom alebo má dokonca účet CodePen. Za predpokladu, že je automatické ukladanie vypnuté, všetky zmeny môže uložiť iba vlastník pera, čo z neho robí bezpečný spôsob, ako otvoriť kód iným bez rizika.
Otvorený charakter tohto režimu je prospešný pre začiatočníkov, pretože do svojho pera môžete pozvať takmer kohokoľvek, aby vás previedol náročným konceptom. Je to tiež užitočný režim, ako sa zorientovať, pretože je ideálny na pohovory s potenciálnymi zamestnancami a už je boli profesionálne použité týmto spôsobom !
5. Profesorský režim
Režim Professor umožňuje jednému používateľovi Pro hostovať miestnosť, v ktorej môžu kód upravovať iba oni. V závislosti od plánu Pro hostiteľa môže sledovať a chatovať 10 až 100 používateľov.
Režim profesor umožňuje flexibilitu medzi triednym vzdelávaním a dištančným vzdelávaním alebo ich kombináciu. Použitie profesorského režimu umožní ľuďom vzadu v triede mať rovnaké skúsenosti ako vpredu a učiteľovi bude zobrazovať opravy chýb, ktoré sa budú aktualizovať v reálnom čase.
6. Prezentačný režim
Prezentačný režim je prekvapivo navrhnutý s ohľadom na prezentáciu kódu. Aplikácia sa zobrazuje v zjednodušenom zobrazení a je navrhnutá tak, aby fungovala so spätnými projektormi. CodePen optimalizoval režim prezentácie na použitie pri nižšom internetovom pripojení a slabšom hardvéri.
Šikovní čitatelia si už možno uvedomili, že bezplatná verzia CodePen bude poskytovať presne túto funkciu, aj keď režim Pro má niekoľko užitočných funkcií. Rozloženie, veľkosť písma a motívy je možné rýchlo zmeniť za behu, aby vyhovovali takmer akémukoľvek nastaveniu, a zobrazením odkazu na pero sa zobrazí skrátená adresa URL veľkosti jumbo, ktorá zjednoduší zdieľanie projektu.
Tieto malé zmeny spolu so schopnosťou škálovať okno ukážky tak, aby zodpovedal všetkému, čo predvádzate, robia prezentačný režim ideálnym pre učiteľov aj vývojárov, ktorí prezentujú nápady kolegom. Prezentačný režim je tiež jednoducho vyzerajúcim a jednoduchým spôsobom, ako predvádzať kód, ak sa stretnete s pohovorom na pozícii programátora.
7. Vzory
Hľadanie inšpirácie je s kolekciami CodePen z Dizajnové vzory .
Každá kategória je zbierkou ukážkového kódu, ktorý poskytujú používatelia CodePen pre konkrétne úlohy. Hľadáte spôsob, ako vytvoriť dynamické tlačidlá pre svoj web? Akordeónové menu? Existuje množstvo kategórií, ktoré zodpovedajú takmer každému príkladu.
Tieto vzory sú tiež skvelým spôsobom, ako sa naučiť fungovať interaktívne tlačidlá a ako môžu fungovať rôzne dynamické používateľské rozhrania.
8. Emmet
Emmet , predtým známy ako Zen Coding, je všeobecne považovaný za najväčší šetrič času pri vývoji HTML a CSS. Doplnok prevezme časť kódu, o ktorom sa rozhodnete veľa písať, a prevedie ho na jednoduché skratky.
Vidieť to v akcii je lepšie ako to vysvetliť, urobte preto obvyklé nastavenie pre dokument HTML:
Pridanie tejto položky do každého dokumentu HTML bolo zredukované na dve akcie. Pomocou Emmet napíšte ! a zasiahnuť Tab kľúč. Mágia!
Emmet je štandardne aktívny v CodePen a je obzvlášť užitočný, ak sa pokúšate naučiť sa nový koncept v JavaScripte a potrebujete rýchlo vytvoriť podporujúce HTML a CSS.
Vyvíjajte s CodePen pre lepšie zážitky
CodePen je vynikajúci nástroj pre webových vývojárov a pole neustále rastie. JavaScript je skvelý jazyk, ktorý sa môžete naučiť pre budúcnosť vo vývoji webových aplikácií.
presuňte aplikáciu na koreň karty SD
Pre ľudí, ktorí chcú začať s JavaScriptom, je k dispozícii niekoľko skvelých návodov a kurzov a CodePen je skvelým prostredím na otestovanie vašich nových schopností.
zdieľam zdieľam Tweet E -mail 8 najlepších webových stránok na bezplatné stiahnutie zvukových kníhAudioknihy sú skvelým zdrojom zábavy a oveľa jednoduchšie stráviteľné. Tu je osem najlepších webových stránok, na ktorých si ich môžete zadarmo stiahnuť.
Čítajte ďalej Súvisiace témy- Programovanie
- HTML
- Vývoj webových aplikácií
- JavaScript
- CSS
Ian Buckley je nezávislý novinár, hudobník, performer a producent videa žijúci v Berlíne v Nemecku. Keď práve nepíše alebo je na pódiu, pohráva si s elektronikou alebo kódom pre domácich majstrov v nádeji, že sa stane šialeným vedcom.
Viac od Iana Buckleyhoprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber