Oavsett om du är en nybörjarprogrammerare eller en expertutvecklare är kodlekplatser användbara när du delar och lär dig med andra.
En kodlekplats är en onlinetjänst där du kan skriva, kompilera (eller köra) och dela kod med andra. De ger dig också möjligheten att punga och leka med andras koder.
Om du lär dig webbutveckling och tränar dina HTML- eller CSS-färdigheter, skulle det vara användbart att använda en kodlekplats för att skapa enkla webbsidor online. Du kan också dra nytta av trendprojekt i dessa plattformar och ta dem som lärresurser.
Å andra sidan, om du är en professionell webbutvecklare och vill visa upp ditt arbete, är kodlekplatser det perfekta stället att göra det.
Det bästa är att de flesta kodlekplatser har en gratis nivå, och du kan bädda in kodresultat på din webbplats.
Låt oss recensera några av dem!
Innehållsförteckning
JSFiddle
JSFiddle är en kodlekplats där du kan testa HTML-, CSS- och Javascript-snuttar. Den kom från en proof-of-concept-app redan 2009 och är nu en av de största kodlekplatserna där ute.
Du kan skapa ett gratis konto, spara alla dina fioler och även punga ihop andras utdrag.
En annan imponerande sak med JSFiddle är samarbetssessionerna. Du kan skapa en ljudchattsession medan du kodar i fiolen.
Om du är en bloggare som vill bädda in resultatet av kodavsnitt och även deras källkod, skulle JSFiddle vara ett utmärkt alternativ att gå med.
Naturligtvis, vid skrivningstid, stöder denna kodlekplats inte andra populära programmeringsspråk som Python, Go eller PHP, så du kan inte förvänta dig att bygga en fullstack-app på den.
Funktioner
- Gratis att använda plattform
- Minimalistiskt gränssnitt
- Stöd för HTML, CSS och JS
- Dela vilken offentlig fiolbit som helst på plattformen
- Samarbeta med andra personer med hjälp av ljudchatt direkt på webbplatsen
- Bra dokumentation
Som med de flesta av dessa plattformar finns det en ”extra” plan som hjälper till att hålla dem igång. Om du litar på dem bör du överväga att säkerhetskopiera dem.
Codepen
Codepen är inte bara en kodlekplats utan en gemenskap av utvecklare som vill förbättra sina färdigheter och dela det bästa arbetet de kan.
Av @Yakudoo
Med över 6 miljoner användare är det en av de mest använda kodredigerarna online för frontend-utveckling. Om du börjar lära dig frontend är det idealiskt att hitta idéer och motivation för att fortsätta din inlärningsresa.
Hur är det med utvecklingsupplevelsen?
Jag kan berätta att Codepen har en användarvänlig redigerare med tre justerbara paneler för att koda i HTML, CSS och JS. Codepen inkluderar inbyggt stöd för Javascript och CSS-förprocessorer som Typescript och Sass. Dessutom, om du litar på ett npm-paket kan du installera det från inställningspanelen.
Funktioner
- Frivillig pro plan
- Lätt att använda kodredigerare
- Stor gemenskap
- De flesta codepens är öppen källkod
- Den idealiska platsen för att öva frontend-utveckling
CodeSandbox
Att prototypera en webbplats kan vara en svår uppgift om du inte har rätt inställning. Använder sig av CodeSandbox bör vara ett enkelt beslut när prioritet är att bygga webbplatser snabbt.
Som namnet antyder tillhandahåller CodeSandbox en sandlådemiljö för frontend-utveckling.
Från GitHub-integrationer och felsökningsverktyg till en anpassningsbar VS-kodliknande upplevelse, denna kodlekplats ger dig allt för att börja koda på några sekunder.
Om ditt huvudsakliga syfte är att samarbeta, är allt du behöver att dela din sandlådelänk, och du skulle vara redo att göra parprogrammering i realtid.
Till exempel kan du utforska en handplockad lista över bästa sandlådorna.
Jag kan få ont om tid med att lista alla egenskaper i CodeSandbox, så låt oss nämna dess mördande funktioner.
Funktioner
- GitHub integration
- Baserat på Monaco-redigeraren som driver den populära VScode-redigeraren
- Samarbete första plattform
- Distribuera till Vercel eller Netlify
- Felsökningsverktyg
- Klara att använda testramar
- npm-stöd
Sololearn
Den populära plattformen för kodning Sololearn har sin egen kod lekplats för webbutveckling.
För att vara ärlig är det inte en fullfjädrad IDE som de andra onlineredigerare vi har sett genom artikeln, men det erbjuder en distraktionsfri miljö där du kan skriva och köra kod.
Detta borde vara mer än tillräckligt om du precis har börjat med programmering.
En annan bra sak med Sololearn är den fantastiska communityn och stödet för flera programmeringsspråk – vilket är ganska bra om du vill leka med andra teknologier.
Funktioner
- Gratis att använda med ditt Sololearn-konto
- Enkel onlinekodredigerare
- Stor community för att dela din kod
- Stöd för flera språk
- Ett fantastiskt ekosystem med Sololearn-kurserna
Sammanfattningsvis är Sololearns kodlekplats inte batteriinkluderad, men den fungerar i vad den är tänkt att vara, och om du redan är en del av de miljontals soloeleverna bör du prova.
Codeply
Det bästa med Codeply är stöd för flera ramverk och bibliotek ur lådan och den responsiva designorienterade kodredigeraren.
Om du precis har börjat med ett nytt ramverk som React, Vue eller Angular, är Codeply ett bra ställe att börja på grund av en komplett uppsättning startmallar och en fantastisk community med över 40 000 utvecklare.
Funktioner
- Gratis att använda plattform
- Enkelt men okomplicerat dokumentation
- Engångsavgift pro plan
- Inkluderar över 50 bibliotek
- Testa din webbmuck i olika skärmupplösningar
Replit
Replit är möjligen den mest lämpliga online-IDE för alla utvecklare där ute. Den innehåller bokstavligen allt du behöver för att bygga, från en enkel hemsida till en komplex webbapp som använder vilket modernt JS-bibliotek som helst.
Med Replit kan du koda på över 50 språk, skriva appar synkront med dina kamrater, testa dina program, integrera med GitHub och få tillgång till en av de största utvecklargemenskaperna där ute.
Jag kan bokstavligen få slut på papper när jag nämner alla funktioner i Replit, så låt oss hoppa in i de viktigaste.
Funktioner
- Det kostnadsfria startpaketet eller 5$/månad hackerplan
- Flerspelarläge (live-parprogrammering)
- Stor gemenskap
- Många språk stöds
- Redaktörsanpassning
- Kör-knapp: Kör projektet med anpassningsbara åtgärder
- Hemlig förvaring
- Hosted kod
StackBlitz
Om du inte kan leva utan VS-kod, StackBlitz är det rätta alternativet för dig. Precis som CodeSandbox är den baserad på Monaco-redigeraren, som driver denna populära kodredigerare.
Logga bara in med ditt GitHub-konto, och voila! Du får tillgång till en bekant miljö.
Bortsett från upplevelsen av kodredigeraren är det en ganska solid lekplats. Du kan använda färdiga mallar för frontend-ramverk och bibliotek som React, Vue, Angular, Svelte och Ionic.
Men den huvudsakliga egenheten med detta verktyg är förmågan att leka med backend-ramverk som Node.js, Next.js och GraphQL.
Funktioner
- Gratis ”Cadet”-plan
- VS-kodupplevelse i din webbläsare. Det inkluderar Intellisense, projektsökning och mer.
- Fluid (riktigt flytande) kodningsupplevelse
- Offlinekodredigerare (Hej! kan vara användbart om du kopplar bort för en dag eller två)
- Hosted app-URL: enkel livedelning
Tekniskt fel
Sist men inte minst, Tekniskt fel är en samarbetande programmeringsmiljö som gör det enklare att skapa en webbapp.
Den har ett av de roligaste gränssnitten att koda i! Bara ta en titt:
Om du undrar, ja, den har ett mörkt läge.
Bortsett från det vackra gränssnittet används Glitch av miljoner på grund av dess användbarhet, live-parprogrammering och vänliga gemenskap.
Du kan skapa alla typer av fullstack-appar med inte bara HTML, CSS och JS, utan Node.js (Backend), React eller Elfte (som jag inte visste fanns innan jag gick in på Glitches-sidan).
Funktioner
- Gratis plan med möjlighet att uppgradera
- Utveckla fullstack-appar i din webbläsare
- Live parprogrammering
- Trevligt gränssnitt
- Startappar
- Remix (eller dela) andras offentliga appar
Slutsats
Nuförtiden kan du helt och hållet bygga vilken webbapp som helst med hjälp av en kodlekplats som de vi har sett ovan. Du behöver inte längre ladda ner tunga IDE:er på din dator, samtidigt som du kan bygga, felsöka, testa och distribuera utan att behöva avsluta din webbläsare.
Om du inte är helt säker på att gå över till användningen av dessa verktyg, varför inte kolla in de 10 bästa kodredigerarna (de du behöver installera på din maskin).