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

Codepen: Bygg, test og oppdag Front-End-kode

En utfordring med et innholdsstyringssystem er å teste og produsere skriptverktøy. Selv om det ikke er et krav for de fleste utgivere, liker jeg som teknologipublikasjon å dele arbeidsskript fra tid til annen for å hjelpe andre mennesker. Jeg har delt hvordan du bruker JavaScript for å sjekke passordets styrke, hvordan sjekk e-postadressesyntaks med Regular Expressions (regex), og sist lagt til dette kalkulator for å forutsi salgseffekten av online vurderinger. Jeg håper å legge til dusinvis av verktøy på nettstedet, men WordPress bidrar ikke akkurat til publisering som dette ... det er et innholdssystem, ikke et utviklingssystem.

Så jeg liker å bruke de små skriptene mine CodePen. CodePen er et pent organisert verktøy med et HTML-panel, et CSS-panel, et JavaScript-panel, konsoll og publisert av den resulterende koden. Hvert panel har informasjon når du holder musen over elementer slik at du forstår hva som er mulig, samt fargekoding av HTML, CSS og JS for å hjelpe deg med å redigere og skrive lettere.

CodePen er et sosialt utviklingsmiljø. I sitt hjerte lar den deg skrive kode i nettleseren, og se resultatene av den mens du bygger. En nyttig og frigjørende online kodeditor for utviklere av alle ferdigheter, og spesielt bemyndigende for folk som lærer å kode. CodePen fokuserer primært på front-end-språk som HTML, CSS, JavaScript og forhåndsbehandlingssyntakser som blir til disse tingene.

Om CodePen

Med CodePen klarte jeg å gjøre alt arbeidet som var nødvendig for å publiser kalkulatoren Jeg innebygde nettstedet. De fleste kreasjoner på CodePen er offentlige og åpen kildekode. De er levende ting som andre mennesker og samfunnet kan samhandle med, fra et enkelt hjerte, til å legge igjen en kommentar, til forking og endring for sine egne behov.

CodePen - kalkulator for å forutsi salgseffekten av online vurderinger

Med CodePen kan du endre visning hvis du vil at rutene skal være til venstre, høyre eller nederst mens du jobber ... eller vise HTML i en ny fane. Side-ved-side-visningen fungerer utrolig bra for å teste dine responsive innstillinger, siden du kan justere størrelsen på den synlige ruten.

Du kan organisere hvert av dine arbeidsskript i penner, kombinere dem i prosjekter (multi-file editor), eller til og med bygge ut samlinger. Det er i utgangspunktet et fungerende porteføljeside for front-end-kode der du kan følge andre forfattere, forkaste andre offentlig delte prosjekter til dine egne for å endre, og til og med lære å gjøre noen morsomme ting gjennom utfordringer.

Du kan lagre som en GitHub Gist, eksportere i zip-fil og til og med embed pennen i en artikkel som denne:

Se pennen
Forutsett salgseffekt av online anmeldelser
by Douglas Karr (@douglaskarr)
on CodePen.


En av begrensningene til penneditoren er det store volumet av kode. Du kjører kanskje aldri over dette problemet, da redaktøren skal ha det bra med hundrevis eller tusenvis av kodelinjer. Men når de begynner å slå 5,000 - 10,000 XNUMX eller flere kodelinjer, ser du redaktøren begynne å mislykkes. Du kan imidlertid legge til eksterne referanser til stilark eller JavaScript som er vert andre steder!

Jeg vil oppfordre deg til å registrere deg. Du abonnerer på deres ukentlige e-post og kan også legge til feeden i RSS-feeden din, slik at du kan se nylig publiserte penner. Og hvis du begynner å søke eller bla gjennom de offentlige pennene der, vil du finne noen utrolige prosjekter ... brukerne er ganske dyktige!

Følg Douglas Karr på Codepen

Den betalte versjonen, CodePen Pro, tilbyr massevis av tilleggsfunksjoner for forbedret funksjonalitet eller team - inkludert samarbeid, prosesser, aktiva hosting, private visninger og til og med distribuerte prosjekter med ditt eget domene eller underdomenet. Og selvfølgelig gir CodePen et flott lager med Github-integrasjon der hele teamet ditt kan jobbe. Hvis du bare vil teste ut noen enkle koder som jeg er, er CodePen et uvurderlig verktøy.

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.