10 Savjeti za početnike

Codepen je super jednostavno i popularno mjesto za pero dolje radni front-end kod kombinirani odmah. Ako ne znate što je Codepen ili niste čuli za njega prije, u osnovi je igralište za online izvorni kod (nazovimo ga OSCP za zvuk nerdiera) za tri mušketira front-end kodiranja; HTML, CSS i JavaScript.

Postoje i drugi slični OSCP-i kao JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen je definitivno jedan od najpoznatijih među front-end programerima. Bez daljnjih smetnji, skočimo pravo u neke osnovni i korisni savjeti za korištenje Codepena.

1. Pokrenite gumb

Ako niste ljubitelj načina na koji izlazni kod u Codepen-u stalno osvježava dok pišete, možete isključite opciju “Pregled automatskog ažuriranja” opcija, i umjesto toga odaberite gumb Run. Kada ga kliknete, moći ćete vidjeti i ažurirati izlazni kod kad god to želite.

Ovo je također odlična opcija ako radite s kodom čiji izlaz prolazi kroz mnogo promjena izgleda, i ponavlja se svaki put kad se ažurira, što rezultira sporošću.

2. Povećanje / smanjenje broja

Povećajte ili smanjite brojeve u kodu u kodnom kodu bez upisivanja novih brojeva. Sve što trebate je koristiti kombinaciju tipki Ctrl / Cmd i Strelice gore i dolje.

3. Višestruki pokazivači

Možete staviti kursore na više točaka u izvornom kodu, zatim upišite ili uredite sve te točke u isto vrijeme. To radi samo ako unosite iste informacije i smanjujete potrebu za kopiranjem. Samo držite pritisnutu tipku Ctrl / Cmd dok klikate na više točaka.

4. Različite poruke konzole u boji

Konzola JavaScript objekt ima još nekoliko metoda osim log () da bi vam omogućio ispišite stvari na web-konzoli.

Možete upotrijebiti Informacije o (), upozoriti() i pogreška () metode za informacija, upozorenje i greška. Tipično, web-konzole obojavaju te poruke ili prikazuju odgovarajuću ikonu pored njih (kao znak upozorenja za poruku upozorenja) za lakše prepoznavanje.

Codepen ima vlastitu konzolu koje možete otvoriti klikom na gumb konzole u donjem lijevom kutu. Idealan je za brzu provjeru konzolnih poruka bez potrebe za otvaranjem konzole preglednika. Ova konzola razlikuje različite vrste poruka konzole s različitim bojama pozadine.

5. Izvoz

Nakon spremanja, a pero (jedna jedinica kodnog koda) može se izvesti kao ZIP datoteku sa svim svojim HTML, CSS i JS kodom u datotekama. Postoji i opcija spremanja olovke kao suština Githuba (Git repozitorij). Gumb Izvoz možete pronaći u donjem desnom kutu svake olovke.

6. Pronađite i zamijeni

Pronađi i zamijeni - bitna operacija za ljude koji imaju tendenciju da preimenuju imena varijabli tu i tamo. Ctrl / Cmd + Shift + F je kombinirani ključ otvori “Pronađi i zamijeni” dijaloški.

7. Emmet Tab Trigger

Znate li o okidačima kartica za Emmet kodiranje? Emmet je alat za produktivnost za razvojne programere koji vam omogućuju upišite kostur koji se kasnije proširuje. Da biste to učinili u Codepen, samo brzo upišite prikladnu kraticu u urednik, pritisnite tipku Tab, a cijeli kod se pojavljuje odjednom. Dostupno samo za HTML u Codepen.

8. Preuzmite pojedinačne datoteke koda

Ako koristite opciju Izvoz kao što je spomenuto prije, dobit ćete sve tri datoteke (HTML, CSS i JS) vaše olovke. Ali ako vas zanima samo jedan ili dva od tih datoteka, i želite ih preuzeti pojedinačno, postoji opcija za to u Codepen-u.

Nakon što se prijavite u Codepen, idite na olovku i kliknite gumb Promijeni prikaz u gornjem desnom kutu. Na dnu padajućeg popisa vidjet ćete izravne veze za preuzimanje pojedinačnih datoteka.

9. Pregledajte JavaScript varijable

Kako se Codepenova JavaScript konzola povezuje s JavaScriptom spremljenim u vašoj olovci, možete je koristiti i za brzo testiranje JavaScripta. Ta je značajka osobito prikladna uvid u JS varijable, kao što je ovaj način ne morate umetati dodatne konzole ili poruke upozorenja u izvorni kod isključivo u svrhu testiranja.

10. Okrenite olovku u predložak

Ako ste skloni pokrenuti većinu svoje olovke s isti skup koda, možete koristiti predložak za spremite one koji ponavljaju kod. Da biste olovku pretvorili u predložak, označite opciju Predložak u izborniku Postavke. Kada kasnije stvorite novu olovku, možete započnite s spremljenim predloškom klikom na strelicu prema dolje na desnoj strani gumba Novo olovke. Otvorit će se padajući popis s mogućnošću odabira svih spremljenih predložaka.