8 Awesome CodePen funktioner för programmering och webbutveckling

Komma igång med JavaScript webbutveckling kan vara en frustrerande process, men det finns verktyg där ute som gör det enklare.

CodePen.io är en kodningsmiljö i webbläsare avsedd för både att lära sig att koda och snabbt prototyper idéer med minimal krångel.

I den här artikeln tittar vi på några av webbplatsens funktioner och hur de kan hjälpa dig att bli en bättre programmerare.

Vad är CodePen?

CodePen ger något som heter a penna, som består av tre olika fönster för HTML, CSS och JavaScript samt en förhandsgranskningspanel som uppdateras i realtid medan du skriver.

Medan det ofta används för webbutvecklare att presentera idéer för webbplatser, är det också ett bra ställe att lära sig grunderna i front-end webbutveckling. Här är de mest anmärkningsvärda funktionerna du behöver veta när du använder CodePen.

1. Förprocessorer

Preprocessorer tolkas eller sammanställs språk utformade för att förenkla kodningen. De kan lägga till funktioner på ett språk för enkelhets skyld, och göra kod lättare att läsa. I webbutveckling används en kombination av förprocessorer för HTML, CSS och JavaScript för att snabbt skapa ren kod.

Om du lär dig webbutveckling och vill prova olika preprocessorer, tillåter CodePen dig att byta preprocessorer i flyg och se koden som den sammanställer till i realtid. Var och en av de tre rutorna på CodePen-appen har en rullgardinsmeny högst upp till höger. Välj Visa kompilerad HTML / CSS / JS för att se hur koden tolkas.

I denna penna har vi skapat en enkel webbplats med HAML och sass att ställa in en del rubriktext. Väljer Visa kompilerade visar standard HTML och CSS. I detta exempel är skillnaden minimal. Medan du lär dig ett nytt språk kan det dock vara bra att se hur den förbehandlade koden ser ut en gång sammanställd.

2. Externa resurser

Utöver inbyggt stöd för förbehandlare stödjer CodePen externa skript. Detta gör den till den perfekta platsen för att få praktisk erfarenhet av bibliotek för dina personliga projekt eller att borsta upp på populära webbappbibliotek som React 7 Best Free Tutorials for Learning React och gör webbapplikationer 7 bästa gratis handledning för lärande React and Making Web Apps Gratis kurser är sällan lika omfattande och hjälpsamma - men vi har hittat flera React-kurser som är utmärkta och kommer att komma igång på rätt fot. Läs mer .

För att lägga till ett externt bibliotek, öppna inställningar rutan på din penna och gå till JavaScript-fliken. Det finns två sätt att lägga till resurser, antingen genom att lägga till resursadressen manuellt eller genom att söka.

Vi använde denna funktion i vår artikel om webbanimering med mo.js, tillsammans med Babel preprocessing.

Se Pen Mojs MUO exempel av Ian (@Bardoctorus) på CodePen.

Ja, CodePen-pennor kan vara inbäddade! Fortsätt och klicka på förhandsgranskningsrutan ovan för att se resultaten av Mo.js-handledningen!

Andra pennor kan importeras mycket som externa bibliotek. Det betyder att du kan ta element från tidigare skrivna pennor för att använda samma moduler i dina nya pennor. CodePen-användarens Adams enkla meningspenn är ett bra exempel på detta.

3. Mallar

När du lär dig nya koncept eller testa nya idéer använder du ofta liknande komponenter och återställer samma steg som börjar. CodePen tillåter skapandet av mallpennor som kan klippa upp repetitionen och låta dig komma rakt fram till punkten.

För att skapa en mall, öppna en ny penna, gör dina ändringar och välj Mall reglaget i inställningsmenyn.

Fram till nyligen kunde gratis användare bara skapa tre mallar, men nu kan alla användare ha så många mallar i sitt konto som de vill. Perfekt för att komma igång med en ny idé med minsta fördröjning!

4. Samarbetsläge

Möjligheten att samarbeta och undervisa med CodePen kan vara sin största tillgång. Det finns redan en uppsjö av bra samarbetsverktyg för programmerare, men CodePens tillvägagångssätt är enkelt och intuitivt.

Pro-användare av CodePen kan skapa en ny penna och öppna den för samarbete under Ändra vy meny. Detta ändrar pennens länk till en delbar inbjudan som tar emot ett antal personer, beroende på din CodePen Pro-plan.

I det här fallet skrev jag HTML medan en vän uppdaterade CSS i realtid, med en märkt markör identifierad där de arbetade.

Den som har länken kan gå med och använda funktionen i webbläsarchatt, oavsett om de är en pro-användare eller till och med har ett CodePen-konto. Under förutsättning att autosave är avstängd, kan ägaren av pennan spara några ändringar, vilket gör det till ett säkert sätt att öppna din kod för andra utan risk.

Den öppna naturen i det här läget är fördelaktigt för nybörjare, eftersom du kan bjuda in nästan alla i din penna för att vägleda dig genom ett svårt koncept. Det är också ett praktiskt sätt att känna till dig som det är perfekt för att intervjua potentiella medarbetare och har redan använts professionellt på detta sätt!

5. Professor Mode

Professorläget tillåter en Pro-användare att vara värd för ett rum där endast de kan redigera koden. Mellan 10-100 användare kan titta och chatta beroende på värdens Pro plan.

Professor-läget möjliggör flexibilitet mellan klassrumsinlärning och distansutbildning, eller en kombination av de två. Genom att använda professorns läge kan personer på baksidan av klassen ha samma erfarenhet av dem på framsidan och för läraren att visa buggfixar som uppdateras i realtid.

6. Presentation Mode

Presentationsläge är designat, överraskande, med presenterande kod i åtanke. Appen visas i en förenklad vy, utformad för att fungera med överheadprojektorer. CodePen har optimerat presentationsläge för användning på låghastighetsinternetanslutningar och svagare hårdvara.

Skarpa läsare kanske redan har insett att den fria versionen av CodePen skulle ge exakt denna funktion, även om Pro-läget har några användbara funktioner. Layout, teckensnittstorlek och teman kan snabbt ändras i flygning så att det passar nästan vilken inställning som helst, och visar länken till pennan ger en jumbostorlek förkortad URL som gör det lättare att dela projektet.

Dessa små förändringar, tillsammans med att kunna skala förhandsgranskningsfönstret för att passa vad du än visar, gör presentationsläget perfekt för både lärare och utvecklare som presenterar idéer till kollegor. Presentationsläge är också ett snyggt och enkelt sätt att presentera kod om du befinner dig som intervjuar för en programmeringsposition. Hur man förbereder sig för en programmeringsintervju Hur man förbereder sig för en programmeringsintervju Det bästa rådet för programmeringsintervjuer. Varje intervju kan vara skrämmande. Vet du nog att passera? Kommer dina lösningar att vara bra nog? Vad händer om du kväver? Applicera dessa fem tips. Läs mer .

7. Mönster

Att söka efter inspiration görs mycket enklare med CodePens samlingar av Design Patterns.

Varje kategori är en samling av exempelkod som tillhandahålls av CodePen-användare för specifika uppgifter. Letar du efter ett sätt att skapa dynamiska knappar för din webbplats? Accordioning menyer? Det finns en mängd olika kategorier som passar nästan alla exempel.

Dessa mönster är också ett bra sätt att lära dig hur interaktiva knappar fungerar, och på olika sätt kan dynamiska användargränssnitt fungera.

8. Emmet

Emmet, tidigare känt som Zen Coding, anses allmänt som den största tidsbespararen för HTML och CSS-utveckling. Pluggen tar lite av koden du tycker själv skriver mycket och konverterar dem till enkla genvägar.

Att se det i åtgärd är bättre än att förklara det, så ta den vanliga inställningen för ett HTML-dokument:

Lägga till detta i varje HTML-dokument har minskats till två åtgärder. Använd Emmet, skriv ! och slå på Flik nyckel. Magi!

Emmet är aktivt som standard på CodePen och är särskilt användbart om du försöker lära dig ett nytt koncept i JavaScript och behöver skapa den stödjande HTML och CSS snabbt.

Utveckla med CodePen för en bättre upplevelse

CodePen är ett utmärkt verktyg för webbutvecklare, och fältet växer ständigt. JavaScript är ett bra språk att lära sig för en framtid i webbutveckling.

Det finns några bra handledning och kurser tillgängliga för personer som vill komma igång med JavaScript. Lär dig verkligen JavaScript med 5 Top Udemy-kurser. Lär dig JavaScript med 5 Top Udemy-kurser. JavaScript är programmets språk på webben. Om du har en anledning att lära sig JavaScript, kan dessa fem utmärkta kurser från Udemy vara platsen för att börja din kodningsresa. Läs mer, och CodePen är en bra miljö för att testa dina nya färdigheter.

Utforska mer om: CSS, HTML, JavaScript, webbutveckling.