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

Codepen: Izrada, testiranje i otkrivanje prednjeg koda

Jedan od izazova sa sistemom za upravljanje 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 pomogla drugima. Podijelio sam kako se koristi JavaScript za provjeru snage lozinke, kako provjerite sintaksu adrese e-pošte pomoću regularnih izraza (Regex), i nedavno dodali ovo kalkulator za predviđanje utjecaja prodaje recenzija na mreži. Nadam se da ću dodati desetke alata na stranicu, ali WordPress nije baš pogodan za objavljivanje poput ovog ... to je sistem sadržaja, a ne razvojni sistem.

Dakle, kako bih pokrenuo svoje male skripte, uživam u korištenju CodePen. CodePen je uredno organiziran alat s HTML panelom, CSS panelom, JavaScript panelom, konzolom i objavljenim rezultirajućim kodom. Svaka ploča sadrži 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ćava vam da napišete kôd u pregledač i da vidite njegove rezultate dok gradite. Korisni i oslobađajući mrežni uređivač 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 sam uspio obaviti sav posao potreban objavite kalkulator Ugradio sam u web lokaciju. Većina kreacija na CodePenu su javni i otvoreni kod. 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 CodePen-a možete promijeniti pogled ako želite da okna budu lijeva, desna ili donja dok radite ... ili pregledati HTML na novoj kartici. Pogled uporedo djeluje nevjerovatno dobro kako bi testirao vaše prilagodljive postavke 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 stvarati zbirke. To je u osnovi funkcionalna web lokacija portfelja za front-end kôd na kojoj možete pratiti druge autore, forsirati druge javno podijeljene projekte kako biste ih mijenjali, 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 uređivač treba biti u redu sa stotinama ili čak hiljadama redaka koda. Ali kad počnu udarati 5,000 - 10,000 ili više linija koda, vidjet ćete da uređivač počinje propadati. Međutim, možete dodati vanjske reference na tabele stilova ili JavaScript hostirane negdje drugdje!

Preporučujem vam da se prijavite. Bit ćete pretplaćeni na njihov tjedni e-mail i možete dodati feed na svoj RSS feed tako da možete vidjeti novoobjavljene olovke. A ako tamo počnete pretraživati ​​ili pregledavati javne olovke, naći ćete nevjerojatne projekte ... korisnici su prilično nadareni!

slijediti Douglas Karr na Codepenu

Verzija koja se plaća, CodePen Pro, nudi mnoštvo dodatnih funkcija 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 sjajno spremište s Github integracijom na kojem može raditi cijeli vaš tim. Ako samo želite isprobati neki jednostavni kôd kakav sam i ja, CodePen je neprocjenjiv alat.

Šta ti misliš?

Ova stranica koristi Akismet kako bi smanjila neželjenu poštu. Saznajte kako se podaci vašeg komentara obrađuju.