10 Sfaturi Codepen pentru începători

Codepen este un site foarte ușor și popular la stilou în jos un combo combo de lucru front-end imediat. Dacă nu știți ce este Codepen sau nu ați auzit de el înainte, este practic un codul sursă online (să spunem asta OSCP pentru a suna nerdier) pentru cei trei muschetari de front-end de codificare; HTML, CSS și JavaScript.

Există și alte OSCP-uri similare, cum ar fi JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen este cu siguranta unul dintre cei mai cunoscuti dezvoltatori din front-end. Fără să mai vorbim, să mergem chiar în unele sfaturi de bază și utile pentru a folosi Codepen.

1. Rulați butonul

Dacă nu sunteți un fan al modului în care ieșirea codului dvs. din Codepen se menține răcoritoare in timp ce scrieți, puteți renunțați la “Actualizarea automată a informațiilor” opțiune, și obțineți în schimb un buton Run. Când faceți clic pe el, veți putea vedea și actualiza ieșirea codului ori de câte ori doriți.

Aceasta este, de asemenea, o opțiune excelentă dacă lucrați cu un cod de ieșire din care trece printr-o mulțime de modificări ale aspectului, și repeta de fiecare dată când este actualizat, ducând la încetinire.

2. Creșterea / degradarea numărului

Măriți sau micșorați numerele din codul dvs. în Codepen fără a introduce noi numere. Tot ce trebuie să faceți este să utilizați combinația de taste Ctrl / Cmd și Săgeți sus și jos.

3. Multiple Cursors

Puteți pune cursorii la multiple puncte din codul sursă, apoi tastați sau editați la toate acele puncte in acelasi timp. Acest lucru funcționează numai dacă introduceți aceleași informații și reduceți necesitatea copierii prin copiere. Țineți apăsată tasta Ctrl / Cmd în timp ce faceți clic pe acele puncte multiple.

4. Diferite mesaje de consolă colorată

Consolă Obiectul JavaScript are mai multe metode in afara de asta Buturuga() pentru a vă permite tipăriți lucrurile în consola web.

Puteți utiliza funcția info (), a avertiza() și eroare() metode pentru informație, avertizare și eroare. În mod obișnuit, consolele web color aceste mesaje în mod tipic sau vor afișa o pictogramă corespunzătoare lângă ele (ca semn de avertizare pentru mesajul de avertizare) pentru o recunoaștere mai ușoară.

Codepen are consola proprie pe care îl puteți deschide făcând clic pe butonul Consola din colțul din stânga jos. Este ideal pentru o verificare rapidă a mesajelor consolei fără a fi nevoie să deschideți consola browserului. Această consolă distinge diferitele tipuri de mesaje consola cu diferite culori de fundal.

5. Export

După salvare, a stilou (o singură entitate Codepen) poate fi exportată ca fișier ZIP cu toate codurile HTML, CSS și JS în fișiere. Există, de asemenea, o opțiune pentru a salva pixul ca un esență Github (un depozit Git). Puteți găsi butonul Export în colțul din dreapta jos al fiecărui pix.

6. Găsiți și înlocuiți

Găsiți și înlocuiți - o operațiune esențială pentru oameni care tind să își redenumească numele de variabile din când în când. Ctrl / Cmd + Shift + F este combinația de taste pentru deschide “Găsiți și înlocuiți” dialog.

7. Emmet Tab Trigger

Știți despre declanșatoarele pentru Emmet? Emmet este un instrument de productivitate pentru dezvoltatorii din front-end, care vă permite să faceți tip schelet de cod care mai târziu este extins. Pentru a face acest lucru în Codepen, tastați rapid abrevierea corespunzătoare în editor, apăsați tasta Tab și codul complet apare simultan. Disponibil numai pentru HTML în Codepen.

8. Obțineți fișiere cu cod individual

Dacă utilizați opțiunea de export așa cum a fost menționat mai sus, veți obține toate cele trei fișiere (HTML, CSS și JS) ale pixului. Dar dacă sunteți interesat doar unul sau două dintre aceste fișiere, și doriți să le descărcați individual, există o opțiune și pentru asta în Codepen.

După ce v-ați conectat la Codepen, mergeți la stiloul dvs. și faceți clic pe butonul Modificare afișare din colțul din dreapta sus. În partea de jos a listei derulante, veți vedea direct link-uri de descărcare pentru fișiere individuale.

9. Inspectați variabilele JavaScript

Deoarece consola JavaScript a lui Codepen se conectează la JavaScript salvat în stiloul dvs., îl puteți utiliza, de asemenea, pentru a vă testa rapid JavaScript. Această caracteristică vine în special la îndemână inspectarea variabilelor JS, așa cum ai și tu nu trebuie să introduceți mesaje suplimentare de consolă sau de avertizare în codul original numai în scopuri de testare.

10. Răsturnați stiloul

Dacă aveți tendința de a porni majoritatea stilourilor dvs. cu același set de cod, puteți utiliza un șablon pentru salvați codurile repetate. Pentru a transforma un stilou în șablon, bifați opțiunea Șablon din meniul Setări. Când creați mai târziu un stilou nou, puteți începeți cu șablonul salvat dând clic pe săgeata în jos din partea dreaptă a butonului Pen nou. Se va deschide o listă dropdown cu toate șabloanele salvate pentru a alege de la.