10 Tipy pro začátečníky
Codepen je super snadné a populární stránky pero dolů funkční combo kód front-end rovnou. Pokud nevíte, o čem je Codepen dříve nebo ne, je to v zásadě online zdrojový kód hřiště (Říkejme tomu OSCP ke zvuku nerdier) pro tři mušketýry front-end kódování; HTML, CSS a JavaScript.
Existují i jiné podobné OSCP jako JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen je určitě jeden z nejznámějších vývojářů na frontě. Bez dalších okolků, pojďme skočit přímo do některých základní a užitečné tipy pro použití Codepen.
1. Tlačítko Spustit
Pokud nejste fanouškem způsobu, jakým výstup vašeho kódu v Codepen udržuje osvěžující zatímco píšeš, můžeš odhlásit se z “Náhled automatické aktualizace” volba, a místo toho spusťte tlačítko Spustit. Když na něj kliknete, budete moci zobrazit a aktualizovat výstup kódu kdykoliv chcete.
To je také skvělá volba, pokud pracujete s kódem, jehož výstup prochází mnoha změnami rozvržení, a repaints pokaždé, když je aktualizován, což má za následek pomalost.
2. Zvýšení / snížení počtu
Zvýšení nebo snížení čísel v kódu v Codepen bez zadávání nových čísel. Jediné, co musíte udělat, je použít kombinaci kláves Ctrl / Cmd a Šipky nahoru a dolů.
3. Více kurzorů
Kurzory můžete umístit na více bodů ve zdrojovém kódu, pak zadejte nebo upravte ve všech těchto bodech ve stejnou dobu. Funguje to pouze v případě, že zadáváte stejné informace a snižujete potřebu vkládání kopií. Jednoduše podržte klávesu Ctrl / Cmd, když kliknete na tyto více bodů.
4. Různé barevné konzolové zprávy
Utěšit Objekt JavaScript má několik dalších metod kromě log () vám to umožní tisknout věci do webové konzoly.
Můžete použít info (), varovat() a chyba() metody pro informace, Varování a chyba. Webové konzoly obvykle tyto zprávy barevně zobrazují nebo vedle nich zobrazují příslušnou ikonu (například výstražnou značku výstražné zprávy). pro snazší rozpoznání.
Codepen má vlastní konzoli otevřete kliknutím na tlačítko Konzole v levém dolním rohu. Je ideální pro rychlou kontrolu konzolových zpráv bez nutnosti otevřít konzolu prohlížeče. Tato konzola rozlišuje různé typy zpráv konzoly s různými barvami pozadí.
5. Export
Jakmile je uložen, a pero (jediná entita Codepen) jako soubor ZIP se všemi jeho v HTML, CSS a JS kódu v souborech. K dispozici je také možnost uložit pero jako Github Gist (repozitář Git). Tlačítko Export najdete v pravém dolním rohu každého pera.
6. Najít a nahradit
Najít a nahradit - nezbytná operace pro lidi, kteří mají tendenci přejmenovat názvy proměnných každou chvíli. Klávesa Ctrl / Cmd + Shift + F je klíčovým kombo otevři “Najít a nahradit” dialog.
7. Emmet Tab Trigger
Víte o spouštěčích karet pro kódování Emmet? Emmet je produktivní nástroj pro vývojáře, který vám umožní typ kostry kód, který se později rozšíří. Chcete-li to provést v Codepen, stačí rychle napsat příslušnou zkratku do editoru, stiskněte klávesu Tab a celý kód se objeví najednou. K dispozici pouze pro HTML v Codepen.
8. Získání individuálních kódových souborů
Pokud použijete možnost Exportovat, jako je uvedeno výše, dostanete všechny tři soubory (HTML, CSS a JS) vašeho pera. Ale pokud máte zájem pouze jeden nebo dva z těchto souborů, a chcete si je stáhnout individuálně, je to také možnost v Codepen.
Po přihlášení do Codepen jděte do svého pera a klikněte na tlačítko Změnit zobrazení v pravém horním rohu. V dolní části rozevíracího seznamu se zobrazí přímé odkazy ke stažení pro jednotlivé soubory.
9. Zkontrolujte proměnné JavaScriptu
Konzola JavaScriptu Codepen se připojuje k JavaScriptu uloženému ve vašem peru a můžete jej také použít k rychlému otestování JavaScriptu. Tato funkce přichází zejména v kontroly proměnných JS, takhle nemusíte vkládat další konzolové nebo výstražné zprávy do původního kódu výhradně pro účely testování.
10. Otočte pero na šablonu
Pokud máte tendenci spouštět většinu vašich per s stejný kód, můžete použít šablonu uložit tyto opakující se kódy. Otočení pera do šablony, zaškrtněte volbu Šablona v nabídce Nastavení. Když později vytvoříte nové pero, můžete začněte s uloženou šablonou klepnutím na šipku dolů na pravé straně tlačítka Nové pero. Otevře se rozevírací seznam se všemi uloženými šablonami, ze kterých si můžete vybrat.
