10 Codepen tippek kezdőknek

A Codepen egy szuper könnyű és népszerű hely toll le egy működő front-end kód kombinációt azonnal. Ha nem tudod, hogy a Codepen korábban hallott róla, akkor alapvetően egy online forráskód játszótér (hívjuk OSCP az elülső kódolás három muskétája számára; HTML, CSS és JavaScript.

Vannak más hasonló OSCP-k is, mint a JSFiddle, JS Bin, CSSDeck & Dabblet. A Codepen határozottan az egyik legismertebb a front-end fejlesztők között. További adó nélkül ugorjunk jobbra néhányba alapvető és hasznos tippek a Codepen használatához.

1. Futtassa a gombot

Ha nem vagy rajongója annak, hogy a Codepen kódjának kimenete folyamatosan frissül míg gépelhetsz elhagyni a “Automatikus frissítés előnézet” választási lehetőség, és kap egy Run gombot. Ha rákattint, megtekintheti és frissítheti a kód kimenetét bármikor.

Ez egy nagyszerű lehetőség, ha olyan kóddal dolgozik, amelynek kimenete sok elrendezési változáson megy keresztül, és minden alkalommal frissít, amikor a frissítés lassú.

2. Számnövekedés / csökkenés

Növelje vagy csökkentse a kódját a Codepenben az új számok beírása nélkül. Mindössze annyit kell tennie, hogy a Ctrl / Cmd kulcskombinációját használja és Fel és le nyilak.

3. Több kurzor

A kurzorokat a (z) több pont a forráskódban, majd írja be vagy szerkessze az összes pontot ugyanabban az időben. Ez csak akkor működik, ha ugyanazt az információt írja be, és csökkenti a másolás beillesztésének szükségességét. Csak tartsa lenyomva a Ctrl / Cmd billentyűt, miközben rákattint a több pontra.

4. Különböző színes konzolüzenetek

A Konzol A JavaScript objektum rendelkezik még néhány módszer kívül log () hogy lehetővé tegye nyomtassa ki a dolgokat a webkonzolban.

Használhatja a info (), figyelmeztet() és hiba() módszerek információ, Figyelem és hiba. Jellemzően a webkonzolok színesítik ezeket az üzeneteket, vagy egy megfelelő ikont jelennek meg mellette (mint egy figyelmeztető jel a figyelmeztető üzenethez) a könnyebb felismerés érdekében.

A Codepennek saját konzolja van a bal alsó sarokban található konzol gombra kattintva nyitható meg. Ideális a konzol üzenetek gyors ellenőrzéséhez a böngésző konzoljának megnyitása nélkül. Ez a konzol megkülönbözteti a különböző konzol típusú üzeneteket különböző háttérszínekkel.

5. Exportálás

Mentés után a toll (egyetlen Codepen entitás) exportálható ZIP fájlként az összes HTML, CSS és JS kódban a fájlokban. Lehetőség van a toll mentésére is mint Github gist (Git tároló). Az Export gomb az egyes tollak jobb alsó sarkában található.

6. Keresse meg és cserélje ki

Keresés és csere - lényeges művelet azoknak az embereknek, akik a változó neveiket mostanában átnevezik. A Ctrl / Cmd + Shift + F billentyűkombináció a nyissa meg a “Keresés és csere” párbeszéd.

7. Emmet Tab Trigger

Tudja-e az Emmet-kódolás tabulátorindítóit? Az Emmet termelékenység eszköze a front-end fejlesztőknek írja be a csontváz kódot, amelyet később meghosszabbítanak. Ehhez a Codepenben egyszerűen írja be a megfelelő rövidítést a szerkesztőbe, nyomja meg a Tab billentyűt, és a teljes kód egyszerre jelenik meg. Csak HTML esetén érhető el Codepenben.

8. Kapjon egyedi kódfájlokat

Ha a korábban említett exportálási opciót használja, a toll mindhárom fájlját (HTML, CSS és JS) kapja meg. De ha érdekel csak egy vagy két ilyen fájl, és egyénileg szeretné letölteni őket, de a Codepenben is van lehetőség.

Miután bejelentkezett a Codepen-be, menjen a tollához, és kattintson a jobb felső sarokban lévő Nézet módosítása gombra. A legördülő lista alján megjelenik a közvetlen letöltési hivatkozások az egyes fájlokhoz.

9. Ellenőrizze a JavaScript változókat

Mivel a Codepen JavaScript konzolja csatlakozik a tollal mentett JavaScript-hez, azt is használhatja a JavaScript gyors tesztelésére. Ez a funkció különösen hasznos a JS változók ellenőrzése, mint így nem kell extra konzolt vagy figyelmeztető üzenetet beszúrnia az eredeti kódba kizárólag tesztelési célokra.

10. Fordítsa a Pen-t a sablonba

Ha a tollak többségét a azonos kódkészlet, használhatsz egy sablont mentse az ismétlődő kódot. A toll sablonként való elforgatásához, jelölje be a Sablon opciót a Beállítások menüben. Ha később létrehoz egy új tollat, akkor kezdje el a mentett sablont az új toll gomb jobb oldalán található lefelé mutató nyílra kattintva. Megnyílik a legördülő lista a mentett sablonok közül.