10 Codepen tips for nybegynnere

Codepen er et super enkelt og populært sted å penn ned en fungerende front-end code combo med en gang. Hvis du ikke vet hva Codepen er eller ikke har hørt om det før, er det egentlig en online kildekode lekeplass (la oss kalle det OSCP å høres nerdier) for de tre musketerne for front-end-koding; HTML, CSS og Javascript.

Det finnes andre lignende OSCPer der ute som JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen er definitivt en av de mest kjente blant front-end-utviklere. Uten videre, la oss hoppe rett inn i noen grunnleggende og nyttige tips for å bruke Codepen.

1. Kjør-knapp

Hvis du ikke er en fan av måten utgangen av koden din i Codepen holder forfriskende samtidig som du skriver, kan du velge bort fra “Forhåndsvisning av automatisk oppdatering” alternativ, og få en Kjør-knapp i stedet. Når du klikker på det, kan du se og oppdatere kodens utgang når du vil.

Dette er også et flott alternativ hvis du jobber med en kode som er utdataene går gjennom mange layoutendringer, og repaints hver gang den oppdateres, noe som resulterer i langsomhet.

2. Antall økning / reduksjon

Øk eller reduser tallene i koden din i Codepen uten å skrive inn de nye tallene. Alt du trenger å gjøre er å bruke tastekombinasjonen av Ctrl / Cmd og Opp og Ned piler.

3. Flere markører

Du kan sette markører på flere punkter i kildekoden, Skriv så eller rediger på alle disse punktene samtidig. Dette virker bare hvis du skriver inn samme informasjon, og reduserer behovet for kopi-liming. Bare hold nede Ctrl / Cmd-tasten mens du klikker på de flere punktene.

4. Ulike fargede konsollmeldinger

De Console JavaScript-objektet har noen flere metoder i tillegg Logg() å tillate deg å skriv ut ting i webkonsollen.

Du kan bruke info (), varsle() og feil() metoder for informasjon, advarsel og feil. Vanligvis sprer webkonsollene disse meldingene typevis, eller vil vise et passende ikon ved siden av dem (som et advarselsskilt for advarselsmeldingen) for enklere gjenkjenning.

Codepen har sin egen konsoll som du kan åpne ved å klikke på konsollknappen nederst i venstre hjørne. Den er ideell for rask kontroll av konsollmeldinger uten å måtte åpne nettleserens konsoll. Denne konsollen skiller de ulike typer konsollmeldinger med forskjellige bakgrunnsfarger.

5. Eksport

Når du har lagret, a penn (en enkelt Codepen-enhet) kan eksporteres som en ZIP-fil med alt i HTML, CSS og JS kode i filer. Det er også et alternativ for å lagre pennen som en Github-kilde (et Git-depot). Du finner knappen Eksporter i nederste høyre hjørne av hver penn.

6. Finn og erstatt

Finn og erstatt - en viktig operasjon for folk som har en tendens til å endre navn på deres variabelnavn hver nå og da. Ctrl / Cmd + Shift + F er nøkkelkombinasjonen til åpne “Finn og erstatt” dialog.

7. Emmet Tab Trigger

Vet du om tabulatorene for Emmet-koding? Emmet er et produktiv verktøy for front-end utviklere som lar deg skriv skjelettkoden som senere blir utvidet. For å gjøre dette i Codepen, skriv så raskt inn riktig forkortelse i redigereren, trykk på Tab-tasten, og hele koden vises samtidig. Kun tilgjengelig for HTML i Codepen.

8. Få individuelle kodefiler

Hvis du bruker alternativet Eksporter som nevnt tidligere, vil du få alle tre filene (HTML, CSS og JS) på pennen din. Men hvis du er interessert i bare en eller to av disse filene, og vil laste dem ned individuelt, er det et alternativ for det også i Codepen.

Når du er logget på Codepen, gå til pennen din, og klikk på knappen Endre visning i øverste høyre hjørne. På bunnen av rullegardinlisten vil du se direkte nedlastingskoblinger for de enkelte filene.

9. Kontroller JavaScript-variabler

Når Codepen's JavaScript-konsoll kobles til JavaScript som er lagret i pennen, kan du også bruke det til å raskt teste JavaScript. Denne funksjonen er spesielt nyttig inspisere JS variabler, som denne måten du trenger ikke å sette inn ekstra konsoll eller varselmeldinger inn i den opprinnelige koden utelukkende for testformål.

10. Vri penn til mal

Hvis du pleier å starte de fleste pennene dine med samme sett med kode, du kan bruke en mal til lagre den gjentatte koden. Slik setter du en penn i mal, kryss av i malalternativet under Innstillinger-menyen. Når du senere lager en ny penn, kan du start med din lagrede mal ved å klikke på nedpilen i høyre side av knappen Ny penn. Det vil åpne en rullegardinliste med alle dine lagrede maler å velge mellom.