CodePen: Izgrađen, testiran, podijeljen i otkrio HTML, CSS i JavaScript

Codepen: izrada, testiranje i otkrivanje prednjeg koda

Jedan od izazova sa sustavom upravljanja sadržajem je testiranje i izrada skriptiranih alata. Iako to nije uvjet za većinu izdavača, kao tehnološka publikacija, s vremena na vrijeme volim dijeliti radne skripte kako bih pomogao drugim ljudima. Dijelio sam kako koristiti JavaScript za provjeru snage lozinke, kako da provjerite sintaksu adrese e-pošte pomoću regularnih izraza (Regularni izraz), a nedavno dodala ovo kalkulator za predviđanje utjecaja online pregleda na prodaju. Nadam se da ću dodati desetke alata na stranicu, ali WordPress nije baš pogodan za objavljivanje poput ovog ... to je sustav sadržaja, a ne razvojni sustav.

Dakle, da bi moje male skripte radile, uživam ih koristiti CodePen. CodePen je uredno organiziran alat s HTML pločom, CSS pločom, JavaScript pločom, konzolom i objavljenim rezultirajućim kodom. Svaka ploča ima informacije kada mišem prelazite preko elemenata kako biste razumjeli što je moguće, kao i kodiranje boja HTML-a, CSS-a i JS-a kako bi vam olakšali uređivanje i pisanje.

CodePen je okruženje za socijalni razvoj. U svojoj srži omogućuje vam da u preglednik napišete kôd i vidite rezultate dok gradite. Korisni i oslobađajući mrežni urednik koda za programere bilo koje vještine, a posebno osnaživanje za ljude koji uče kodirati. CodePen se prvenstveno fokusira na front-end jezike poput HTML-a, CSS-a, JavaScript-a i sintakse pretprocesiranja koje se pretvaraju u te stvari.

O CodePenu

S CodePenom uspio sam obaviti sav posao potreban objaviti kalkulator Ugradio sam u web mjesto. Većina kreacija na CodePenu su javni i otvoreni izvor. Oni su živa bića s kojima drugi ljudi i zajednica mogu komunicirati, od jednostavnog raspoloženja, preko ostavljanja komentara, do rašljaranja i mijenjanja za vlastite potrebe.

CodePen - kalkulator za predviđanje utjecaja prodaje recenzija na mreži

Pomoću CodePena možete promijeniti svoj prikaz ako želite da okna budu lijevo, desno ili odozdo dok radite ... ili pregledavati HTML na novoj kartici. Bočni prikaz nevjerojatno dobro funkcionira za testiranje vaših responzivnih postavki jer možete prilagoditi veličinu vidljivog okna.

Možete svaku svoju radnu skriptu organizirati u olovke, kombinirati u projekte (uređivač više datoteka) ili čak izraditi zbirke. To je u osnovi funkcionalna web stranica portfelja za front-end kôd na kojoj možete pratiti druge autore, forsirati druge javno podijeljene projekte da biste ih izmijenili, pa čak i naučiti kako raditi neke zabavne stvari kroz izazove.

Možete spremiti kao GitHub Gist, izvesti u zip datoteku, pa čak i Ugraditi olovka u ovakvom članku:

Vidi olovku
Predviđeni utjecaj prodaje na mrežne recenzije
by Douglas Karr (@douglaskarr)
on CodePen.


Jedno od ograničenja uređivača olovke je velika količina koda. Možda nikada nećete naići na ovaj problem, jer bi urednik trebao biti u redu sa stotinama ili čak tisućama redaka koda. Ali kad počnu udarati 5,000 - 10,000 XNUMX ili više redaka koda, vidjet ćete da uređivač počinje propadati. Međutim, možete dodati vanjske reference na tablice stilova ili JavaScript hostirane negdje drugdje!

Potaknuo bih vas da se prijavite. Bit ćete pretplaćeni na njihovu tjednu e-poštu, a feed možete dodati i na svoj RSS feed kako biste mogli vidjeti novoobjavljene olovke. A ako tamo počnete pretraživati ​​ili pregledavati javne olovke, pronaći ćete nevjerojatne projekte ... korisnici su prilično talentirani!

Pratite Nas Douglas Karr na Codepenu

Verzija CodePen Pro koja se plaća nudi mnoštvo dodatnih značajki za poboljšanu funkcionalnost ili timove - uključujući suradnju, procese, hosting sredstava, privatne poglede, pa čak i implementirane projekte s vlastitom domenom ili poddomenom. I, naravno, CodePen nudi izvrsno spremište s Github integracijom na kojem može raditi čitav vaš tim. Ako samo želite isprobati neki jednostavni kôd kakav sam ja, CodePen je neprocjenjiv alat.

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.