10 Nasveti za začetnike
Codepen je zelo enostavno in priljubljeno spletno mesto pero navzdol delujočo kombinirano kodo front-end takoj. Če ne veste, kaj je Codepen že že slišal, je to v bistvu spletno igrišče za izvorno kodo (pokličimo ga OSCP za zvok nerdierja) za tri mušketirje prednjega dela; HTML, CSS in JavaScript.
Obstajajo tudi drugi podobni OSCP-ji, kot so JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen je definitivno eden najbolj znanih med front-end razvijalci. Brez nadaljnjega odlašanja skočimo naravnost v nekatere osnovni in koristni nasveti za uporabo kodena.
1. Zaženite gumb
Če niste ljubitelj načina, kako se izhodna koda v Codepenu ohranja osvežujoča medtem lahko tipkate izklopite možnost “Samodejno posodobi predogled” možnost, in namesto tega dobite gumb Run. Ko jo kliknete, boste lahko videli in posodobili izhodne podatke svoje kode kadarkoli želite.
To je tudi odlična možnost, če delate s kodo, katere izhod gre skozi veliko sprememb postavitve, in ponazori vsakič, ko se posodobi, kar povzroči počasnost.
2. Povečanje / zmanjšanje števila
Povečajte ali zmanjšajte številke v kodi v kodni kodi brez vnašanja novih številk. Vse kar morate storiti je, da uporabite kombinacijo tipk Ctrl / Cmd in Puščice gor in dol.
3. Več kazalcev
Kazalce lahko postavite na več točk v izvorni kodi, nato vnesite ali uredite vse te točke ob istem času. To deluje samo, če vnašate iste informacije in zmanjšujete potrebo po kopiranju. Samo držite tipko Ctrl / Cmd, medtem ko klikate na več točk.
4. Sporočila različnih barvnih konzol
The Konzola Objekt JavaScript ima še nekaj metod poleg tega log () da bi vam dovolili natisnite stvari v spletni konzoli.
Uporabite lahko info (), warn () in napaka () metode za informacije, Opozorilo in napaka. Običajno spletne konzole obarvajo ta sporočila po vrstnem redu ali poleg njih prikažejo ustrezno ikono (kot opozorilni znak za opozorilno sporočilo). za lažje prepoznavanje.
Codepen ima svojo konzolo ki jih lahko odprete s klikom na gumb Konzola v spodnjem levem kotu. Idealen je za hitro preverjanje sporočil konzole ne da bi morali odpreti konzolo brskalnika. Ta konzola razlikuje različne vrste sporočil konzole z različnimi barvami ozadja.
5. Izvoz
Ko je shranjen, a pero (enota s kodnim kodom) lahko izvozite kot ZIP datoteka z vsemi svojimi v HTML, CSS in JS kodi v datotekah. Obstaja tudi možnost, da shranite pero kot Githubov bistvo (skladišče Git). Gumb Izvoz najdete v spodnjem desnem kotu vsakega peresa.
6. Poišči in zamenjaj
Poišči in zamenjaj - bistveno operacijo za ljudi, ki se nagibajo k preimenovanju imen spremenljivk vsakih zdaj. Ctrl / Cmd + Shift + F je kombinacija tipk z odprite “Poišči in zamenjaj” pogovorno okno.
7. Emmet Tab Trigger
Ali veste za sprožilce zavihkov za Emmet kodiranje? Emmet je orodje za produktivnost za razvijalce, ki vam omogočajo vnesite skeletno kodo, ki se kasneje razširi. Če želite to narediti v kodni kodi, preprosto vnesite ustrezno okrajšavo v urejevalnik, pritisnite tipko Tab in celotna koda se prikaže hkrati. Na voljo samo za HTML v Codepen.
8. Poiščite posamezne datoteke kode
Če uporabite možnost Izvoz, kot je omenjeno prej, boste dobili vse tri datoteke (HTML, CSS in JS) svojega peresa. Ampak, če vas zanima samo enega ali dveh teh datotek, in jih želite prenesti posamično, obstaja tudi možnost za to tudi v Codepnu.
Ko se prijavite v Codepen, pojdite na pero in kliknite gumb Spremeni pogled v zgornjem desnem kotu. Na dnu spustnega seznama boste videli neposredne povezave za prenos posameznih datotek.
9. Preglejte JavaScript spremenljivke
Ker se JavaScriptova konzola Codepna poveže s JavaScriptom, ki je shranjen v vašem peresu, ga lahko uporabite tudi za hitro testiranje JavaScripta. Ta funkcija je še posebej priročna pregledovanje spremenljivk JS, kot si ti ni treba vstaviti dodatne konzole ali opozorilnih sporočil v izvirno kodo izključno za namene testiranja.
10. Obrnite pisalo na predlogo
Če ste nagnjeni k začetku večino svojih pisal z enak nabor kode, lahko uporabite predlogo za shranite ponavljajočo se kodo. Če želite pero pretvoriti v predlogo, označite možnost Predloga v meniju Nastavitve. Ko kasneje ustvarite nov pero, lahko začnite z shranjeno predlogo s klikom na puščico navzdol na desni strani gumba New Pen. Odpre se spustni seznam z vsemi shranjenimi predlogami, med katerimi lahko izbirate.
