CodePen: Bygget, test, del og opdag HTML, CSS og JavaScript

Codepen: Byg, test og opdag Front-End-kode

En udfordring med et indholdsstyringssystem er at teste og producere scripted værktøjer. Selvom det ikke er et krav for de fleste udgivere, kan jeg lide en teknologipublikation at dele arbejdsscript fra tid til anden for at hjælpe andre mennesker. Jeg har delt, hvordan man bruger JavaScript for at kontrollere styrken af ​​adgangskoden, hvordan tjek e-mail-adresse syntaks med Regular Expressions (Regex), og senest tilføjet dette lommeregner til at forudsige salgseffekten af ​​online anmeldelser. Jeg håber at tilføje snesevis af værktøjer på webstedet, men WordPress er ikke ligefrem befordrende for udgivelse som denne ... det er et indholdssystem, ikke et udviklingssystem.

Så for at få mine små scripts til at fungere, kan jeg godt lide at bruge CodePen. CodePen er et pænt organiseret værktøj med et HTML-panel, et CSS-panel, et JavaScript-panel, konsol og en offentliggjort af den resulterende kode. Hvert panel har information, når du holder musen over elementer, så du forstår, hvad der er muligt, samt farvekodning af din HTML, CSS og JS for at hjælpe dig med at redigere og skrive lettere.

CodePen er et socialt udviklingsmiljø. I sin kerne giver det dig mulighed for at skrive kode i browseren og se resultaterne af den, mens du bygger. En nyttig og befriende online kodeditor til udviklere af enhver færdighed, og især bemyndigende for folk, der lærer at kode. CodePen fokuserer primært på front-end-sprog som HTML, CSS, JavaScript og forbehandling af syntakser, der bliver til disse ting.

Om CodePen

Med CodePen var jeg i stand til at udføre alt det arbejde, der var nødvendigt for at offentliggør regnemaskinen Jeg indlejrede i siden. De fleste kreationer på CodePen er offentlige og open source. De er levende ting, som andre mennesker og samfundet kan interagere med, fra et simpelt hjerte, til at efterlade en kommentar, til at smide og ændre til deres egne behov.

CodePen - lommeregner til forudsigelse af salgseffekten af ​​online anmeldelser

Med CodePen kan du ændre din visning, hvis du vil have ruderne til venstre, højre eller nederst, mens du arbejder ... eller se HTML i en ny fane. Side-ved-side-visningen fungerer utroligt godt til at teste dine responsive indstillinger, da du kan justere størrelsen på den synlige rude.

Du kan organisere hvert af dine arbejdsscripts i kuglepenne, kombinere dem i projekter (multi-file editor) eller endda opbygge samlinger. Det er dybest set et fungerende porteføljeside til front-end-kode, hvor du kan følge andre forfattere, forkaste andre offentligt delte projekter til dine egne for at ændre og endda lære at gøre nogle sjove ting gennem udfordringer.

Du kan gemme som en GitHub Gist, eksportere i zip-fil og endda Integrer pennen i en artikel som denne:

Se pennen
Forudsagt salgseffekt af online anmeldelser
by Douglas Karr (@douglaskarr)
on CodePen.


En af begrænsningerne ved Pen-editoren er den store mængde kode. Du løber muligvis aldrig på tværs af dette problem, da editoren skal have det fint med hundreder eller endda tusinder af linjer med kode. Men når de begynder at ramme 5,000 - 10,000 eller flere linjer med kode, ser du redaktøren begynde at fejle. Du kan dog tilføje eksterne referencer til typografiark eller JavaScript hostet andetsteds!

Jeg vil opfordre dig til at tilmelde dig. Du abonnerer på deres ugentlige e-mail og kan også føje feedet til dit RSS-feed, så du kan se nyligt offentliggjorte penne. Og hvis du begynder at søge eller gennemse de offentlige penne der, finder du nogle utrolige projekter ... brugerne er ret talentfulde!

Følge Douglas Karr på Codepen

Den betalte version, CodePen Pro, tilbyder masser af ekstra funktioner til forbedret funktionalitet eller teams - inklusive samarbejde, processer, aktivhosting, private visninger og endda implementerede projekter med dit eget domæne eller underdomæne. Og selvfølgelig giver CodePen et godt lager med Github-integration, hvor hele dit team kan arbejde. Hvis du bare vil teste en simpel kode, som jeg er, er CodePen et uvurderligt værktøj.

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.