Tänk om det fanns en plattform där du kunde redigera kod, testa ett bibliotek, ett ramverk eller en komponent och se förändringarna hända precis framför dina ögon? Och tänk om du kunde dela dina experiment med andra utvecklare eller kopiera från dem för att förbättra dina kodningskunskaper, felsöka ditt arbete snabbt och hitta inspiration?
Jag försökte ett verktyg som gör mjukvaruutvecklarens liv mycket enklare: KodPen, självbeskriven som ”a social utvecklingsmiljö för front-end designers och utvecklare ”.
Denna artikel kommer att förklara Vad är CodePen, vad du kan göra med det och hur, och varför det kan vara ett mycket användbart verktyg för att påskynda din front-end-utveckling.
CodePen är en utvecklingsplattform där vem som helst kan redigera front-end-språk som HTML, CSS och JavaScript från sin webbläsare utan att ladda ner någon programvara.
Det bästa är att resultaten kan ses i realtid, vilket möjliggör snabbare felsökning. Utvecklare och designers kan också skapa och dela kodavsnitt (så kallade pennor) med resten av världen.
Tack vare det stora samhället som CodePen har byggt finns det tusentals användare skapar och delar Deras idéer om Front-end-komponenter, animationer och till och med nästan färdiga layouter av webbsidor. Om du har några egna idéer som kan vara användbara för andra front-end-proffs, det här är det perfekta stället att dela dem. Allt du behöver är att se till att din kod är fri från upphovsrätt.
Om du inte är intresserad av att använda andras kod kan du alltid använda CodePens online kodredigerare för att skapa stilen för dina projektkomponenter. På så sätt kan du se till att din inte påverkas av kod som är avsedd att utforma andra komponenter. Du kan tänka på det som en tom duk.
Jag rekommenderar att du skapar en penna för varje komponent eftersom du kommer att arbeta med mindre kod varje gång. På så sätt förhindrar du misstag (som att ändra kod för en komponent som förstör en annan) och bara inser det i slutändan.
CodePens webbläsarbaserade redigerare är ett bra verktyg för att testa och köra ett nytt ramverk eller bibliotek. Du behöver inte skapa en ny miljö varje gång du vill se om dina ändringar fungerar. Redigeringsvyn visar samtidigt tre redigeringsområden och förhandsgranskningen, uppdatera de slutliga resultaten varje gång något ändras.
Nu när du vet vad CodePen används för låt oss utforska hur det fungerar. Plattformen är mycket användarvänlig och innehåller många funktioner. Vissa kan till och med gå obemärkt, även om du redan har använt det flera gånger.
Rätt på huvudsidan får du en glimt av vad du kan söka: specifika pennor, människor, projekt eller samlingar. Du kan också kolla CodePen-förslag (det är ett bra alternativ att se andras kod och lära dig några knep), eller så kan du trycka på sökfältet för att leta efter något mer specifikt. Om du är snabb att skriva och trycka på enter kommer du förmodligen inte att märka det Du kan utforska ämnen! De är organiserade i tre olika kategorier:
Varje ämne har en sida där du kan utforska pennor, mallar och resurser. Listan över ämnen är stängd, men du kan fylla i ett formulär och be om ett specifikt.
Om du tittar på exemplen ser du en skärmdump av pennan för att snabbt förhandsgranska slutresultatet och fundera över om det är något värt ditt intresse.
Sedan kan du antingen klicka direkt på pennan och öppna Redaktörsvy (där du kan spela med koden) eller klicka på expansionspilarna i det övre högra hörnet, för att öppna Detaljerad vy. Denna vy låter dig kommentera pennan, gilla och följa författaren, se och interagera med det, som den här pennan där du kan spela xylofon.
Du kan också fästa den för att se den eller använda den senare. På navigeringsfältet inuti Din sektionen, dessa pennor kommer att visas i gruppen med fastsatta objekt.
Den Kodredigerare är min favoritdel av CodePen. Med det här verktyget kan du se HTML-redigerare, den CSS-redigerare, och Javascript-redigerare samtidigt med förhandsgranskningen, det uppdateras automatiskt när du ändrar koden.
Det finns inget behov av att byta mellan fil- och webbläsarflikar, vilket gör kodningsprocessen snabbare. Dessutom, om du inte behöver någon av dessa avsnitt, kan du dölja den genom att justera storleken.
Du kan alltid anpassa layouten på din penna. Standardvyn har tre kodavsnitt ovanpå och förhandsgranska längst ner. Men om du behöver mer höjd i förhandsgranskningen, som en mobilversion av en webbapp, kan du ändra layouten under Ändra vy menyn och justera kodsektionerna vertikalt.
Som jag nämnde tidigare, CodePen låter dig arbeta med mer än bara ren HTML, CSS och Javascript. Om du vill inkludera andra ramverk, bibliotek eller preprocessor går du till Inställningar. Du hittar en flik för var och en av kodsektionerna, med alternativ till ändra förprocessorn och inkludera externa källor, som formatmallar eller skript.
Om du av någon slump är mer bekant med Haml än ren HTML, välj Haml på den första rullgardinsmenyn. Om du vill använda Bootstrap på din penna, gå till de externa stilmallarna i CSS-avsnittet, skriv ”Bootstrap”, välj det alternativ du vill använda och inkludera så många källor som du behöver! Det är verkligen väldigt enkelt att sätta upp en penna.
På inställningarna kan du också:
Dessutom har du fortfarande tillgång till andra funktioner i kodredigeraren, inklusive tillgångar för proffsanvändare, en felsökningskonsol, och fullständig lista över projektexportalternativ.
En av de mest intressanta och obemärkta knapparna på kodredigeraren är ”nycklar”. Här hittar du komplett lista med genvägar finns på CodePen, inklusive Komplettera automatiskt En funktion som du, precis som jag, troligen inte trodde fanns.
Om du är en KodPen Pro användare, att lägga till en bild är en trestegsprocess:
Om du, precis som jag, använder gratis version av CodePen, du måste vara värd för ditt foto någonstans online för att ha en länk redo att användas. Några av de tillgängliga alternativen är Imgur , IMGb men det finns många andra webbplatser som erbjuder gratis hosting för dina foton. Ladda upp bilden du vill använda och kopiera länken. Nu kan du placera den som en img src, bakgrundsbild, etc.
Det enklaste sättet att ladda ner din penna är kopiera och klistra in Koden i ditt projekt Det är vad jag brukar göra. Ändå kan du export pennan som en zip-fil eller som en Github-kärnan.
”Exportera” är den andra knappen som räknas från höger på sidfoten (om du inte kan se den, spara pennan först). Klicka på den och välj ditt favoritalternativ.
Om du frågar ”Kan jag använda React på CodePen?”, svaret är ”Ja!”. Om du använder något annat JavaScript-bibliotek kommer svaret också att vara ja i nästan 100% av fallen.
För att använda React på CodePen måste du komma åt inställningar för din penna och välj fliken JS. Om du öppnar den och tittar på alternativen i den första rullgardinsmenyn ser du inte React, bara de lättillgängliga preprocessorerna.
Så här lägger du till React i Codepen du måste välja kombinationsrutan på ”Lägg till externa skript/pennor” och skriv ”React” för att visa alla tillgängliga alternativ. Välj de du behöver, och du är redo att koda!
På CodePen är det också möjligt att använda Flutter och Vue, men du kommer inte att kunna välja dem precis som du gjorde med React. Kom ihåg ämnen När jag förklarade hur man söker på CodePen? Det är bara genom dem som du kan komma åt Vue och Flutter personliga redaktörer.
Gå till sidan ”Utforska ämnen”, välj det du vill ha, och i det övre högra hörnet hittar du ”Öppna redigeraren” knapp. Du har bara två avsnitt om dessa redigerare: en för kod och den andra för förhandsgranskning.
Oroa dig inte om du använder SCSS istället för CSS, men ditt projekt stöder bara vanlig CSS. Du har möjlighet att omvandla det med bara ett klick.
På pilen i det övre högra hörnet av din valda kodsektion har du möjlighet att ”Visa sammanställd...”. Allt du behöver göra är att klicka på det, och det är klart.
Var inte rädd för att göra det; du kan ändra det tillbaka. När du laddar ner koden ser du också en mapp med den sammanställda versionen inuti.
CodePen är utmärkt för att redigera kod och se resultaten i realtid, medan det låter dig lära dig kod effektivt. Om du startar ett nytt front-end utvecklingsprojekt, här är de främsta anledningarna till varför du bör använda CodePen.
Vad mer behöver jag säga? Du kan göra allt som jag nämnde ovan utan att behöva betala något. Om du vill kan du Gå till Pro och betala en månadsabonnemang för att få tillgång till ytterligare funktioner som privata pennor, personliga skärmdumpar, tillgångar och fler visningslayouter.
Jag har ett gratis konto, och jag behövde inte dessa extra funktioner hittills.
Om du inte vill skapa ett konto behöver du inte göra det. Du kan fortfarande söka och använda kodredigeraren. Emellertid du kommer inte att kunna spara dina pennor för att besöka dem senare. Så om du bara vill testa ett par saker kan du göra det utan ett konto.
En av de främsta fördelarna med CodePen är förmågan att Se allt på en skärm. Att inte behöva skumma igenom webbläsarflikar eller filflikar gör min kodning snabbare och enklare. Dessutom ger det en förhandsvisning i realtid, vilket minskar tiden för att ladda om sidor varje gång vi behöver se resultatet av kodändringarna.
CodePen är ett kodredigeringsverktyg där vi kan använda färdiga preprocessorer, bibliotek och ramverk, vilket gör vårt liv enklare. Vi kan göra det med bara några klick och sätta upp en penna på vilket språk vi vill använda. Hur bra är det här?
Om du behöver hitta exempel på något tidigare gjort kommer du förmodligen att hitta dem! Animationer, element, hela sidor, you name it. CodePen har det!
CodePen var en enorm hjälp för mitt avhandlingsprojekt, där jag var tvungen att skapa en helt ny front-end för ett befintligt projekt. Jag använder det varje gång jag vill lära mig något nytt som React och Animations eller testa ett bibliotek/ramverk/komponent isolerat.
När jag använder CodePen är jag inte orolig för befintlig kod. Det ger mig friheten att skapa UI-komponenter ta det lugnt och tillämpa dem på projektets kod, riskfritt.
Som en mjukvaruutvecklare på Imaginärt moln, Jag känner att detta är ett av de verktyg som verkligen kan påskynda din utveckling som kodare. Prova det!
Webbutvecklare med en speciell kärlek till front-end. Mamma till katter. Jag försöker hjälpa till att rädda planeten på min fritid genom att dela miljövänliga alternativ.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
