10 Codepen Tips til begyndere
Codepen er et super nemt og populært sted at pen ned en fungerende front-end kode combo med det samme. Hvis du ikke ved, hvad Codepen er eller ikke har hørt om det før, er det stort set en online kildekode legeplads (lad os kalde det OSCP at lyde nerdier) for de tre musketeere af front-end-kodning; HTML, CSS og JavaScript.
Der er andre lignende OSCP'er derude som JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen er absolut en af de mest kendte blandt front-end-udviklere. Lad os springe lige ind i nogle uden yderligere ado grundlæggende og nyttige tips til brug af Codepen.
1. Kør knap
Hvis du ikke er fan af den måde, som udgangen af din kode i Codepen holder forfriskende mens du skriver, du kan afvige fra “Automatisk opdatering af forhåndsvisning” mulighed, og få en Run-knap i stedet. Når du klikker på det, kan du se og opdatere din kodes output når du vil.
Dette er også en god mulighed, hvis du arbejder med en kode, hvis output går gennem mange layoutændringer, og repaints hver gang den opdateres, hvilket resulterer i langsommelighed.
2. Antal stigning / nedskrivning
Forøg eller formindsk tallene i din kode i Codepen uden at indtaste de nye numre. Alt du skal gøre er at bruge nøglekombinationen Ctrl / Cmd og Op og Ned pile.
3. Flere markører
Du kan sætte cursorer på flere punkter i kildekoden, Skriv så eller rediger på alle disse punkter på samme tid. Dette virker kun, hvis du indtaster den samme information, og reducerer behovet for kopiering. Bare hold Ctrl / Cmd-tasten nede, mens du klikker på de flere punkter.
4. Forskellige farvede konsolmeddelelser
Det konsol JavaScript-objektet har et par flere metoder udover log () at tillade dig at udskrive ting i webkonsollen.
Du kan bruge info (), advare() og fejl() metoder til Information, advarsel og fejl. Typiske webkonsoller farve disse meddelelser typevis, eller vil vise et passende ikon ved siden af dem (som et advarselsskilt for advarselsmeddelelsen) for lettere genkendelse.
Codepen har sin egen konsol som du kan åbne ved at klikke på konsol knappen nederst i venstre hjørne. Det er ideelt til hurtig kontrol af konsolmeddelelser uden at skulle åbne browserens konsol. Denne konsol skelner mellem de forskellige typer af konsolmeddelelser med forskellige baggrundsfarver.
5. Eksport
En gang gemt, a pen (en enkelt Codepen-enhed) kan eksporteres som en ZIP-fil med alle dens i HTML, CSS og JS kode i filer. Der er også mulighed for at gemme penen som en Github kilde (et Git repository). Du kan finde knappen Eksporter i nederste højre hjørne af hver pen.
6. Find & erstat
Find & erstat - en vigtig operation for folk, der har en tendens til at omdøbe deres variable navne nu og da. Ctrl / Cmd + Shift + F er nøglekombinationen til Åbn “Find & erstat” dialogen.
7. Emmet Tab Trigger
Kender du til faneudløsere til Emmet-kodning? Emmet er et produktivitetsværktøj til front-end-udviklere, der giver dig mulighed for type skeletkode, der senere bliver forlænget. For at gøre dette i Codepen skal du blot skrive den korrekte forkortelse i editoren, trykke på Tab-tasten, og den komplette kode vises på én gang. Kun tilgængelig for HTML i Codepen.
8. Få individuelle kodefiler
Hvis du bruger alternativet Eksport som nævnt før, får du alle tre filer (HTML, CSS og JS) på din pen. Men hvis du er interesseret i kun en eller to af disse filer, og vil downloade dem individuelt, er der også mulighed for det i Codepen.
Når du er logget ind på Codepen, skal du gå til din pen og klikke på knappen Skift visning i øverste højre hjørne. Nederst i rullelisten vil du se direkte download links til de enkelte filer.
9. Undersøg JavaScript Variabler
Da Codepen's JavaScript-konsol forbinder til JavaScript, der er gemt i din pen, kan du også bruge det til hurtigt at teste dit JavaScript. Denne funktion er specielt praktisk inspicere JS variabler, som sådan du behøver ikke at indsætte ekstra konsol eller advarselsmeddelelser ind i den oprindelige kode udelukkende til testformål.
10. Drej pen til skabelon
Hvis du har tendens til at starte de fleste af dine penne med samme sæt kode, Du kan bruge en skabelon til gem den gentagne kode. At gøre en pen til skabelon, Marker indstillingen Skabelon under menuen Indstillinger. Når du senere opretter en ny pen, kan du Start med din gemte skabelon ved at klikke på pil ned i højre side af knappen Ny Pen. Det åbner en dropdown liste med alle dine gemte skabeloner at vælge imellem.
