Home-theater-designers
Att komma igång med JavaScript -webbutveckling kan vara en frustrerande process, men det finns verktyg som gör det enklare.
CodePen.io är en kodningsmiljö i webbläsaren utformad för både att lära sig att koda och för att snabbt prototypera 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 tillhandahåller något som kallas a penna , som består av tre olika fönster för HTML, CSS och JavaScript, plus en förhandsgranskningsruta som uppdateras i realtid medan du skriver.
Även om det ofta används för webbutvecklare att visa upp 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
Förprocessorer tolkas eller sammanställs språk för att förenkla kodning. De kan lägga till funktioner på ett språk för enkelhets skull och göra koden lättare att läsa. I webbutveckling används en kombination av förbehandlare för HTML, CSS och JavaScript för att snabbt skapa ren kod.
Om du lär dig webbutveckling och vill testa olika förbehandlare kan du med CodePen byta förbehandlare direkt och se koden som den sammanställer till i realtid. Var och en av de tre rutorna i CodePen -appen har en rullgardinsmeny längst upp till höger. Välj Visa kompilerad HTML/CSS/JS för att se hur koden kommer att tolkas.
I denna penna har vi skapat en enkel webbplats med Haml och Sass för att styla lite rubriktext. Väljer Se sammanställd visar standard HTML och CSS. I detta exempel är skillnaden minimal. När du lär dig ett nytt språk kan det dock vara användbart att se hur den förbehandlade koden ser ut när den väl har sammanställts.
2. Externa resurser
Förutom inbyggt stöd för förbehandlare stöder CodePen externa skript. Detta gör det till den perfekta platsen att få praktisk erfarenhet av bibliotek för dina personliga projekt, eller att borsta upp populära webbappbibliotek som React.
Om du vill lägga till ett externt bibliotek öppnar du inställningar i pennan och gå till fliken JavaScript. Det finns två sätt att lägga till resurser, antingen genom att lägga till resursens URL manuellt eller genom att söka.
Vi använde denna funktion i vår artikel som täcker webbanimation med mo.js , tillsammans med Babel -förbehandling.
Se pennan Mojs MUO -exempel av Ian ( @Bardoctorus ) på CodePen.
Ja, CodePen -pennor kan bäddas in! Fortsätt och klicka på förhandsgranskningsfönstret ovan för att se resultaten av Mo.js -självstudien!
Andra pennor kan importeras ungefär som externa bibliotek. Det betyder att du kan ta element från tidigare skrivna pennor för att använda liknande moduler i dina nya pennor. CodePen -användare Adams Enkel omröstning penna är ett bra exempel på detta.
3. Mallar
När du lär dig nya koncept eller testar nya idéer använder du ofta liknande komponenter och gör om samma steg för att komma igång. CodePen gör det möjligt att skapa mallpennor som kan klippa ut upprepningen och låta dig komma direkt till sak.
Om du vill skapa en mall öppnar du en ny penna, gör dina ändringar och väljer Mall skjutreglaget i inställningsmenyn.
https://vimeo.com/221428690
Fram till nyligen kunde gratisanvändare bara göra tre mallar, men nu kan alla användare ha så många mallar på sitt konto som de vill. Perfekt för att komma igång med en ny idé med minsta fördröjning!
4. Modesamarbete
Möjligheten att samarbeta och undervisa med CodePen kan vara den största tillgången. Det finns redan en mängd fantastiska 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 pennans länk till en delbar inbjudan som rymmer ett skalande antal personer beroende på din CodePen Pro -plan.
windows stoppkod oväntat butiksundantag
I det här fallet skrev jag HTML medan en vän uppdaterade CSS i realtid, med en märkt markör som identifierade var de arbetade.
Alla med länken kan gå med och använda chattfunktionen i webbläsaren, oavsett om de är proffsanvändare eller ens har ett CodePen-konto. Förutsatt att autosparing är avstängd kan bara pennens ägare spara eventuella ändringar, vilket gör det till ett säkert sätt att öppna din kod för andra utan risk.
Det här modets öppna karaktär är fördelaktigt för nybörjare eftersom du kan bjuda in nästan vem som helst i din penna för att vägleda dig genom ett svårt koncept. Det är också ett praktiskt läge att lära känna dig, eftersom det är perfekt för att intervjua potentiella medarbetare, och har redan gjort det använts professionellt på detta sätt !
5. Professor Mode
Professor -läget tillåter en Pro -användare att vara värd för ett rum där bara 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 professor -läget kan personer i baksidan av klassen uppleva samma erfarenheter som de längst fram, och för läraren att visa buggfixar som uppdateras i realtid.
6. Presentationsläge
Presentationsläget är, överraskande, utformat med presentkod i åtanke. Appen visas i en förenklad vy, utformad för att fungera med overheadprojektorer. CodePen har optimerat presentationsläge för användning på internetanslutningar med lägre hastighet och svagare hårdvara.
Kloka läsare kanske redan har insett att den kostnadsfria versionen av CodePen skulle ge just denna funktion, även om Pro -läget har några användbara funktioner. Layout, teckenstorlek och teman kan snabbt ändras för att passa nästan alla inställningar, och genom att visa länken till pennan får du en förkortad URL i jumbo-storlek som gör det lättare att dela projektet.
Dessa små förändringar, tillsammans med att kunna skala förhandsgranskningsfönstret så att det passar vad du visar upp, gör presentationsläget perfekt för både lärare och utvecklare som presenterar idéer för kollegor. Presentationsläget är också ett snyggt och enkelt sätt att presentera kod om du befinner dig intervjuad för en programmeringsposition.
7. Mönster
Att söka efter inspiration görs mycket enklare med CodePens samlingar av Design mönster .
Varje kategori är en samling exempelkoder 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? Dragspel -menyer? Det finns en mängd kategorier som passar nästan alla exempel.
Dessa mönster är också ett bra sätt att lära sig hur interaktiva knappar fungerar, och de olika sätt som dynamiska användargränssnitt kan fungera.
8. Emmet
Emmet , tidigare känd som Zen Coding, anses allmänt vara den största tidsbespararen för HTML- och CSS -utveckling. Insticksprogrammet tar en del av koden som du själv skriver mycket och konverterar dem till enkla genvägar.
Att se det i handling är bättre än att förklara det, så ta den vanliga inställningen för ett HTML -dokument:
Att lägga till detta i varje HTML -dokument har reducerats till två åtgärder. Skriv Emmet med Emmet ! 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 snabbt behöver skapa HTML -stöd och CSS.
Utveckla med CodePen för en bättre upplevelse
CodePen är ett utmärkt verktyg för webbutvecklare, och fältet växer kontinuerligt. JavaScript är ett bra språk att lära sig för en framtid inom webbutveckling.
kan inte klicka på något i aktivitetsfältet windows 10
Det finns några bra handledning och kurser tillgängliga för personer som vill komma igång med JavaScript, och CodePen är en bra miljö för att testa dina nya färdigheter.
Dela med sig Dela med sig Tweet E-post De 8 bästa webbplatserna för att ladda ner ljudböcker gratisLjudböcker är en stor underhållningskälla och mycket lättare att smälta. Här är de åtta bästa webbplatserna där du kan ladda ner dem gratis.
Läs Nästa Relaterade ämnen- Programmering
- HTML
- Webbutveckling
- JavaScript
- CSS
Ian Buckley är frilansjournalist, musiker, artist och videoproducent som bor i Berlin, Tyskland. När han inte skriver eller på scenen, pysslar han med DIY -elektronik eller kod i hopp om att bli en galet forskare.
Mer från Ian BuckleyPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera