CodePen: boud, test, diele en ûntdekke HTML, CSS, en JavaScript

Codepen: Bouwen, testen en ûntdekke front-end-koade

Ien útdaging mei in systeem foar ynhâldbehear is testen en produsearjen fan skriptynstruminten. Hoewol dat foar de measte útjouwers gjin fereaske is, as in technologypublikaasje, fyn ik it leuk om sa no en dan wurkskripten te dielen om oare minsken te helpen. Ik haw dield hoe te brûken JavaScript om de sterkte fan it wachtwurd te kontrolearjen, hoe nei kontrolearje e-postadres syntaksis mei Regular Expressions (Regex), en dit koartlyn tafoege rekkenmasine om de ferkeapeffekt fan online resinsjes te foarsizzen, Ik hoopje tsientallen ark op 'e side ta te foegjen, mar WordPress is net krekt befoarderlik foar publisearjen lykas dit ... it is in ynhâldsysteem, net in ûntwikkelingssysteem.

Dat, om myn lytse skripts wurkje te litten genietsje ik derfan CodePen, CodePen is in kreas organisearre ark mei in HTML-paniel, in CSS-paniel, in JavaScript-paniel, konsole, en in publisearre fan 'e resultearjende koade. Elk paniel hat ynformaasje as jo eleminten mûsje, sadat jo begripe wat mooglik is, en ek kleurekodearring fan jo HTML, CSS en JS om jo makliker te bewurkjen en te skriuwen.

CodePen is in omjouwing foar sosjale ûntwikkeling, Yn syn hert kinne jo koade skriuwe yn 'e browser, en de resultaten dêrfan sjen as jo bouwe. In nuttige en befrijende online koade-bewurker foar ûntwikkelders fan elke feardigens, en bysûnder machtich foar minsken dy't leare te koade. CodePen rjochtet him foaral op front-end-talen lykas HTML, CSS, JavaScript, en foarferwurkjende syntaksis dy't yn dy dingen feroarje.

Oer CodePen

Mei CodePen koe ik al it nedige wurk dwaan publisearje de rekkenmasine Ik haw yn 'e side ynbêde. De measte kreaasjes op CodePen binne iepenbier en iepen boarne. Se binne libbene dingen wêrmei oare minsken en de mienskip ynteraksje kinne hawwe, fan in ienfâldige hert, oant it efterlitten fan in opmerking, oant foarke en feroarje foar har eigen behoeften.

CodePen - rekkenmasine foar it foarsizzen fan de ferkeapeffekt fan online beoardielingen

Mei CodePen kinne jo jo werjefte feroarje as jo wolle dat de ruten links, rjochts of ûnderoan stean as jo wurkje ... of de HTML yn in nij ljepblêd sjen. De side-oan-side werjefte wurket ongelooflijk goed om jo responsive ynstellings te testen, om't jo de grutte fan it sichtbere paniel kinne oanpasse.

Jo kinne elk fan jo wurkjende skripts yn pennen organisearje, kombinearje yn projekten (multibestân-bewurker), of sels kolleksjes opbouwe. It is yn prinsipe in wurkjende portfolio-side foar front-end-koade wêr't jo oare auteurs kinne folgje, oare iepenbier dielde projekten yn jo eigen kinne forkeare om te feroarjen, en sels leare hoe't jo wat leuke dingen kinne dwaan fia útdagings.

Jo kinne opslaan as GitHub Gist, eksportearje yn zip-bestân, en sels embed de pinne yn in artikel lykas dit:

Sjoch de pinne
Foarseine ferkeapynfloed fan online resinsjes
by Douglas Karr (@douglaskarr)
on CodePen.


Ien fan 'e beheiningen fan' e Pen-bewurker is it grutte folume fan koade. Jo kinne dit probleem noait rinne, om't de bewurker goed wêze moat mei hûnderten of sels tûzenen rigels koade. Mar as se begjinne mei it slaan fan 5,000 - 10,000 of mear rigels koade, sille jo sjen dat de bewurker begjint te mislearjen. Jo kinne lykwols eksterne referinsjes tafoegje oan stylblêden of JavaScript dy't earne oars hostet!

Ik soe jo oanmoedigje jo oan te melden. Jo wurde ynskreaun op har wyklikse e-post en kinne de feed ek tafoegje oan jo RSS-feed, sadat jo nij publisearre pennen kinne sjen. En as jo dêr begjinne te sykjen of trochsykje yn 'e iepenbiere pennen, sille jo inkele ûnbidige projekten fine ... de brûkers binne frij talint!

Folgje Douglas Karr op Codepen

De betelle ferzje, CodePen Pro, biedt in ton oanfoljende funksjes foar ferbettere funksjonaliteit as teams - ynklusyf gearwurking, prosessen, hosting fan aktiva, privee werjeften, en sels ynsette projekten mei jo eigen domein as subdomein. En, fansels, CodePen biedt in geweldige repository mei Github-yntegraasje wêr't jo heule team kin wurkje. As jo ​​gewoan in simpele koade wolle testen lykas ik bin, is CodePen in ûnskatbere wearde ark.

Wat tinksto?

Dizze side brûkt Akismet om spam te ferleegjen. Learje hoe't jo kommentaargegevens ferwurke wurde.