CodePen: Byggt, testa, dela och upptäcka HTML, CSS och JavaScript

Codepen: Skapa, testa och upptäck Front-End-kod

En utmaning med ett innehållshanteringssystem är att testa och producera skriptverktyg. Även om det inte är ett krav för de flesta utgivare, gillar jag som teknologipublikation att dela arbetsskript då och då för att hjälpa andra människor. Jag har delat hur man använder JavaScript för att kontrollera lösenordsstyrka, hur kolla e-postadressens syntax med Regular Expressions (regex) och senast lagt till detta miniräknare för att förutsäga försäljningseffekten av online-recensioner. Jag hoppas kunna lägga till dussintals verktyg på webbplatsen men WordPress hjälper inte precis att publicera så här ... det är ett innehållssystem, inte ett utvecklingssystem.

Så för att få mina små manus att fungera tycker jag om att använda CodePen. CodePen är ett snyggt organiserat verktyg med en HTML-panel, en CSS-panel, en JavaScript-panel, konsol och en publicerad av den resulterande koden. Varje panel har information när du muspekar över element så att du förstår vad som är möjligt, samt färgkodning av din HTML, CSS och JS för att hjälpa dig redigera och skriva enklare.

CodePen är en social utvecklingsmiljö. Kärnan låter dig skriva kod i webbläsaren och se resultaten av den när du bygger. En användbar och befriande kodredigerare online för utvecklare av alla färdigheter, och särskilt bemyndigande för människor som lär sig att koda. CodePen fokuserar främst på front-end-språk som HTML, CSS, JavaScript och förbehandlingssyntaxer som förvandlas till dessa saker.

Om CodePen

Med CodePen kunde jag göra allt arbete som krävs för att publicera miniräknare Jag inbäddade i webbplatsen. De flesta skapelser på CodePen är offentliga och öppen källkod. De är levande saker som andra människor och samhället kan interagera med, från ett enkelt hjärta, till att lämna en kommentar till att gaffla och förändra för sina egna behov.

CodePen - kalkylator för att förutsäga försäljningseffekten av online-recensioner

Med CodePen kan du ändra din vy om du vill att rutorna ska vara till vänster, höger eller längst ner när du arbetar ... eller visa HTML i en ny flik. Sidovy-sidan-sidan fungerar otroligt bra för att testa dina responsiva inställningar eftersom du kan justera storleken på den synliga rutan.

Du kan ordna vart och ett av dina arbetsskript i pennor, kombinera dem i projekt (multifilredigerare) eller till och med bygga ut samlingar. Det är i grunden en fungerande portföljsida för front-end-kod där du kan följa andra författare, dela andra offentligt delade projekt i dina egna för att ändra och till och med lära dig hur man gör några roliga grejer genom utmaningar.

Du kan spara som en GitHub Gist, exportera i zip-fil och till och med embed pennan i en sådan artikel:

Se pennan
Förutsedd försäljningseffekt av onlinerecensioner
by Douglas Karr (@douglaskarr)
on CodePen.


En av begränsningarna för pennredigeraren är den stora kodvolymen. Du kanske aldrig stöter på det här problemet, eftersom redaktören borde ha det bra med hundratals eller till och med tusentals rader kod. Men när de börjar slå 5,000 10,000 - XNUMX XNUMX eller fler kodrader ser du att redaktören börjar misslyckas. Du kan dock lägga till externa referenser till formatmallar eller JavaScript som är värd någon annanstans!

Jag uppmuntrar dig att registrera dig. Du kommer att prenumerera på deras veckovisa e-post och kan också lägga till flödet i ditt RSS-flöde så att du kan se nyligen publicerade pennor. Och om du börjar söka eller bläddra i de offentliga pennorna där hittar du några otroliga projekt ... användarna är ganska begåvade!

Följ Douglas Karr på Codepen

Den betalda versionen, CodePen Pro, erbjuder massor av ytterligare funktioner för förbättrad funktionalitet eller team - inklusive samarbete, processer, värdtjänster för tillgångar, privata vyer och till och med distribuerade projekt med din egen domän eller underdomän. Och naturligtvis ger CodePen ett bra arkiv med Github-integration där hela teamet kan arbeta. Om du bara vill testa en enkel kod som jag är, är CodePen ett ovärderligt verktyg.

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.