10 Codepen tipy pre začiatočníkov

Codepen je veľmi jednoduché a obľúbené miesto pero nadol funkčný kombinovaný front-end kód hneď. Ak neviete, čo Codepen je, alebo ste o tom ešte nepočuli, je to v podstate jeden online zdrojové kódové ihrisko (nazývame to OSCP na zvuk nerdyra) pre troch mušketerov front-end kódovania; HTML, CSS a JavaScript.

Existujú ďalšie podobné OSCP ako JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen je určite jedným z najznámejších vývojárov. Bez ďalšieho zbohatnutia poďme priamo do niektorých základné a užitočné rady pre použitie Codepen.

1. Spustite tlačidlo

Ak nie ste fanúšikom spôsobu, akým sa výstup kódu v Codepen udržiava osviežujúci zatiaľ čo píšete, môžete odhlásiť sa z funkcie “Náhľad automatickej aktualizácie” voľba, a namiesto toho zadajte tlačidlo Spustiť. Po kliknutí na ne budete môcť zobraziť a aktualizovať výstup kódu kedykoľvek budete chcieť.

To je tiež skvelá voľba, ak pracujete s kódom, ktorého výstup je prejde veľa zmien rozloženia, a prebudovať zakaždým, keď je aktualizovaný, čo má za následok pomalosť.

2. Zvýšenie / zmenšenie počtu

Zvýšte alebo znížte čísla vo vašom kóde v Codepen bez písania nových čísel. Jediné, čo musíte urobiť, je použiť kombináciu klávesov Ctrl / Cmd a Šípky hore a dole.

3. Viacnásobné kurzy

Môžete dať kurzory na viac bodov vo zdrojovom kóde, potom napíšte alebo upravte vo všetkých týchto bodoch v rovnakom čase. Toto funguje iba vtedy, keď zadávate rovnaké informácie a znižuje sa potreba kopírovania. Stačí stlačiť kláves Ctrl / Cmd pri kliknutí na tieto viaceré body.

4. Rôzne farebné konzoly správy

konzola Objekt JavaScript má niekoľko ďalších metód okrem log () aby vám umožnil tlačiť veci do webovej konzoly.

Môžete použiť Info(), varovať () a chyba() metódy pre informácie, výstraha a chyba. Typicky webové konzoly farbujú tieto správy typicky alebo zobrazia príslušnú ikonu vedľa nich (ako varovný znak pre varovnú správu) pre ľahšie rozpoznanie.

Codepen má vlastnú konzolu ktoré môžete otvoriť kliknutím na tlačidlo Konzola v ľavom dolnom rohu. Je ideálny pre rýchlu kontrolu konzolových správ bez nutnosti otvárať konzolu prehliadača. Táto konzola rozlišuje rôzne typy konzolových správ s rôznymi farbami pozadia.

5. Exportovať

Po uložení, a pero (jediný subjekt Codepen) ako súbor ZIP so všetkými jeho v HTML, CSS a JS kód v súboroch. Je tu tiež možnosť uložiť pero ako Github gist (úložisko Git). Tlačidlo Export nájdete v pravom dolnom rohu každého pera.

6. Nájsť a nahradiť

Vyhľadanie & Nahradenie - dôležitá operácia pre ľudí, ktorí majú tendenciu premenovať svoje názvy premenných každú chvíľu. Ctrl / Cmd + Shift + F je klávesová kombinácia otvor “Vyhľadanie & Nahradenie” dialóg.

7. Emmet Tab Trigger

Viete o spúšťačoch kariet pre kódovanie Emmet? Emmet je nástroj pre produktivitu pre vývojárov, ktorí vám umožňujú typ skeletového kódu, ktorý sa neskôr rozšíri. Ak to chcete urobiť v Codepen, jednoducho rýchlo zadajte príslušnú skratku do editora, stlačte kláves Tab a úplný kód sa zobrazí naraz. K dispozícii iba pre HTML v Codepen.

8. Získajte jednotlivé súbory kódov

Ak použijete možnosť exportu, ako už bolo uvedené, získate všetky tri súbory (HTML, CSS a JS) pera. Ale ak máte záujem iba jeden alebo dva z týchto súborov, a chcete si ich stiahnuť samostatne, je tu aj možnosť pre Codepen.

Po prihlásení do programu Codepen prejdite na pero a kliknite na tlačidlo Zmeniť zobrazenie v pravom hornom rohu. V spodnej časti rozbaľovacieho zoznamu uvidíte priame odkazy na preberanie jednotlivých súborov.

9. Skontrolujte premenné JavaScript

Keďže konzola JavaScript kódu Codepen sa pripája k Javu uloženému v perá, môžete ho tiež použiť na rýchle otestovanie jazyka JavaScript. Táto funkcia je mimoriadne užitočná kontrola premenných JS, ako to vy nemusíte vkladať ďalšie konzoly alebo výstražné správy do pôvodného kódu len na účely testovania.

10. Prepnite pero do šablóny

Ak máte tendenciu spustiť väčšinu pera s rovnaký súbor kódov, môžete použiť šablónu na uložte tieto opakujúce sa kódy. Premeniť pero na šablónu, začiarknite možnosť Šablóna v ponuke Nastavenia. Keď neskôr vytvoríte nové pero, môžete začnite s uloženou šablónou kliknutím na šípku nadol na pravej strane tlačidla Nový pero. Otvorí sa rozbaľovací zoznam so všetkými vašimi uloženými šablónami na výber.