10 Codepeni näpunäited algajatele

Codepen on super lihtne ja populaarne sait pliiatsi alla töötava eesmise koodi kombinatsiooni kohe. Kui te ei tea, mida Codepen sellest varem kuulnud on, siis see on põhimõtteliselt online lähtekoodi mänguväljak (kutsume seda OSCP heli nerdierile) kolmele esikülje kodeerimise musketärile; HTML, CSS ja JavaScript.

Seal on ka teisi sarnaseid OSCP-sid nagu JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen on kindlasti üks tuntumaid front-end arendajate seas. Ilma edasiste juhudeta hüpata paremale põhilised ja kasulikud nõuanded Codepeni kasutamiseks.

1. Käivita nupp

Kui te ei ole fänn, kuidas teie koodi väljund Codepenis värskendab samal ajal saate kirjutada loobuda “Automaatne värskenduse eelvaade” valik, ja saada selle asemel nupp Run. Klõpsates saate näha ja uuendada oma koodi väljundit kui soovite.

See on ka suurepärane võimalus, kui töötate koodiga, mille väljund on läbib palju paigutuse muutusi, ja kordab iga kord, kui seda uuendatakse, mille tulemuseks on aeglus.

2. Numbrite juurdekasv / vähenemine

Suurendage või vähendage koodis Codepenis olevaid numbreid ilma uusi numbreid sisestamata. Kõik, mida pead tegema, on kasutada klahvikombinatsiooni Ctrl / Cmd ja Nooled üles ja alla.

3. Mitme kursoriga

Kursoreid saab panna aadressile lähtekoodi mitu punkti, seejärel tippige või redigeerige kõigis nendes punktides samal ajal. See toimib ainult siis, kui sisestate sama info ja vähendab vajadust kopeerimise kleepimiseks. Lihtsalt hoidke Ctrl / Cmd klahvi all, klõpsates nendel mitmepunktil.

4. Erinevad värvilised konsoolisõnumid

The Konsool JavaScript-objektil on veel mõned meetodid Pealegi log () lubada printige asju veebikonsoolis.

Võite kasutada info (), hoiatage () ja viga () meetodid teavet, hoiatus ja viga. Tavaliselt värvitavad veebikonsoolid neid sõnumeid tüüpiliselt või kuvavad nende kõrval asjakohase ikooni (nagu hoiatussõnumi hoiatussilt) lihtsamaks tunnustamiseks.

Codepenil on oma konsool mida saab avada, klõpsates vasakul nurgas asuvat konsooli nuppu. See on ideaalne konsoolisõnumite kiireks kontrollimiseks ilma brauseri konsooli avamata. See konsool eristab erinevat tüüpi konsoolisõnumeid erineva taustavärviga.

5. Eksport

Kui olete salvestanud, a pliiatsi (üks Codepeni üksus) saab eksportida ZIP-failina koos kõigi oma HTML-, CSS- ja JS-koodidega failides. Samuti on võimalik pliiats salvestada kui Githubi põhi (Git-hoidla). Nuppu Eksport leiate iga pliiatsi paremas alumises nurgas.

6. Otsi ja asenda

Otsi ja asenda - oluline toiming inimestele, kes kipuvad ümber muutma oma muutujaid. Ctrl / Cmd + Shift + F on võti kombinatsiooniks ava “Otsi ja asenda” dialoogi.

7. Emmet Tab Trigger

Kas te teate Emmeti kodeerimise tabeldusteguritest? Emmet on tootlikkuse tööriist esiplaanide arendajatele, mis võimaldab teil seda teha kirjuta skeleti kood, mida hiljem laiendatakse. Selleks, et seda teha Codepenis, tippige lihtsalt lühikirjeldus redaktorisse, vajutage klahvi Tab ja kogu kood ilmub korraga. Saadaval ainult HTML-i jaoks Codepenis.

8. Hankige individuaalsed koodifailid

Kui kasutate eelnevalt mainitud ekspordi suvandit, saate kõik oma pensüsteli kõik kolm faili (HTML, CSS ja JS). Aga kui olete huvitatud ainult üks või kaks neist failidest, ja tahan neid üksikult alla laadida, on see võimalus ka Codepenis.

Kui olete Codepeni sisse loginud, minge oma pliiatsile ja klõpsake üleval paremas nurgas nuppu Muuda vaadet. Rippmenüü allosas näete üksikute failide otsesed allalaadimise lingid.

9. Kontrollige JavaScripti muutujaid

Kuna Codepeni JavaScripti konsool ühendub teie pensüstelisse salvestatud JavaScripti, saate seda kasutada ka JavaScripti kiireks testimiseks. See funktsioon on eriti mugav JS muutujate kontrollimine, nii nagu sina ei pea lisakonsooli või hoiatussõnumeid sisestama algse koodi ainult testimise eesmärgil.

10. Pöörake pliiats malliks

Kui teil on kalduvus käivitada enamik oma pliiatsitest sama koodikomplekt, võite kasutada malli salvestage need korduvad koodid. Pliiatsite vormimiseks, märkige valik Mall menüüs Seaded. Kui saate hiljem uue pliiatsi luua, saate seda teha alustage salvestatud mallist klõpsates nupul Uus pliiats paremal pool alla-noolt. See avab rippmenüü, kus saab valida kõik salvestatud mallid.