10 Codepen tips för nybörjare

Codepen är en super lätt och populär webbplats till penna ner en fungerande front-end kod combo direkt. Om du inte vet vad Codepen är eller inte har hört talas om tidigare, är det i princip en online källkod lekplats (låt oss kalla det OSCP att låta nerdier) för de tre musketerna av front-end-kodning; html, CSS och JavaScript.

Det finns andra liknande OSCP där ute som JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen är definitivt en av de mest kända bland front-end-utvecklare. Utan ytterligare ado, låt oss hoppa rätt in i några grundläggande och användbara tips för att använda Codepen.

1. Körknapp

Om du inte är en fan av hur koden i kodkoden fortsätter att uppdateras medan du skriver, du kan välja bort från “Förhandsgranskning av automatisk uppdatering” alternativ, och få en körknapp istället. När du klickar på det kan du se och uppdatera kodens utdata närhelst du vill.

Det här är också ett bra alternativ om du arbetar med en kod vars produktivitet går igenom många layoutändringar, och repaints varje gång det uppdateras, vilket resulterar i långsamhet.

2. Antal ökning / minskning

Öka eller minska siffrorna i din kod i Codepen utan att skriva in de nya numren. Allt du behöver göra är att använda tangentkombinationen av Ctrl / Cmd och Upp och ner pilar.

3. Flera markörer

Du kan sätta markörer på flera punkter i källkoden, skriv sedan eller redigera på alla dessa punkter på samma gång. Det här fungerar bara om du skriver in samma information och minskar behovet av kopiering. Håll bara ned Ctrl / Cmd-tangenten medan du klickar på de flera punkterna.

4. Olika färgade konsolmeddelanden

De Trösta JavaScript-objektet har några fler metoder Förutom logga() att tillåta dig att skriva ut saker i webbkonsolen.

Du kan använda info(), varna() och fel() metoder för information, varning och fel. Vanligtvis färgar webbkonsoler dessa meddelanden typvis, eller kommer att visa en lämplig ikon bredvid dem (som ett varningsskylt för varningsmeddelandet) för lättare erkännande.

Codepen har sin egen konsol som du kan öppna genom att klicka på konsolknappen längst ned till vänster. Den är idealisk för snabb kontroll av konsolmeddelanden utan att behöva öppna webbläsarens konsol. Denna konsol skiljer olika typer av konsolmeddelanden med olika bakgrundsfärger.

5. Export

En gång sparad, a penna (en enda Codepen-enhet) kan exporteras som en ZIP-fil med allt i HTML, CSS och JS-kod i filer. Det finns också ett alternativ att spara pennan som ett Github-boende (ett Git repository). Du hittar exportknappen längst ned till höger på varje penna.

6. Sök och ersätt

Hitta & Ersätt - en väsentlig operation för personer som brukar ändra namn på sina variabla namn då och då. Ctrl / Cmd + Shift + F är tangentkombinationen till öppna “Hitta & Ersätt” dialog.

7. Emmet Tab Trigger

Vet du om flikutlösare för Emmet-kodning? Emmet är ett produktivitetsverktyg för front-end-utvecklare som tillåter dig att skriv skelettkod som senare blir utökad. För att göra detta i Codepen skriver du bara rätt förkortning i redigeraren, trycker på Tab-knappen och hela koden visas samtidigt. Endast tillgänglig för HTML i kodpenna.

8. Hämta enskilda kodfiler

Om du använder alternativet Exportera som nämnts tidigare får du alla tre filerna (HTML, CSS och JS) på din penna. Men om du är intresserad av bara en eller två av dessa filer, och vill ladda ner dem individuellt, finns det ett alternativ för det också i Codepen.

När du är inloggad på Codepen, gå till din penna och klicka på knappen Ändra vy i det övre högra hörnet. Nedan i nedrullningslistan ser du direkta nedladdningslänkar för de enskilda filerna.

9. Kontrollera JavaScript-variabler

Eftersom kodpens JavaScript-konsol kopplas till JavaScript som sparats i din penna, kan du även använda det för att snabbt testa din JavaScript. Denna funktion kommer speciellt praktiskt in inspektera JS-variabler, som på så sätt du behöver inte infoga extra konsol eller varningsmeddelanden in i originalkoden enbart för teständamål.

10. Vänd penna till mall

Om du brukar starta de flesta av dina pennor med samma uppsättning kod, du kan använda en mall till spara den upprepade koden. Så här byter du en penna till mall, Markera alternativet Mall under menyn Inställningar. När du senare skapar en ny penna kan du Börja med din sparade mall genom att klicka på nedpilen i höger sida av knappen Ny Pen. Det öppnar en rullgardinslista med alla dina sparade mallar att välja mellan.