CodePen: izveidots, pārbaudīts, koplietojams un atklāts HTML, CSS un JavaScript

Codepen: izveidojiet, pārbaudiet un atklājiet priekšgala kodu

Viens no satura pārvaldības sistēmas izaicinājumiem ir skriptu rīku testēšana un ražošana. Lai gan lielākajai daļai izdevēju tā nav prasība, man kā tehnoloģiju publikācijai man patīk laiku pa laikam kopīgot darba skriptus, lai palīdzētu citiem ļaudīm. Esmu dalījies, kā lietot JavaScript, lai pārbaudītu paroles izturību, kā pārbaudiet e-pasta adreses sintaksi, izmantojot regulārās izteiksmes (Regex), un nesen to pievienoja kalkulators, lai prognozētu tiešsaistes atsauksmju ietekmi uz pārdošanu. Es ceru vietnē pievienot desmitiem rīku, taču WordPress nav tieši piemērots šāda veida publicēšanai ... tā ir satura sistēma, nevis izstrādes sistēma.

Tātad, lai mani mazie skripti darbotos, man patīk to izmantot CodePen. CodePen ir glīti organizēts rīks ar HTML paneli, CSS paneli, JavaScript paneli, konsoli un iegūtā koda publicēšanu. Katrā panelī ir informācija, kad peles kursoru novietojat virs elementiem, lai saprastu, kas ir iespējams, kā arī HTML, CSS un JS krāsu kodēšana, lai palīdzētu jums vieglāk rediģēt un rakstīt.

CodePen ir sociālās attīstības vide. Tās būtība ļauj pārlūkprogrammā ierakstīt kodu un, veidojot to, redzēt tā rezultātus. Noderīgs un atbrīvojošs tiešsaistes kodu redaktors jebkuras prasmes izstrādātājiem un īpaši spēcīgs cilvēkiem, kuri mācās kodēt. CodePen galvenokārt koncentrējas uz priekšgala valodām, piemēram, HTML, CSS, JavaScript un pirmapstrādes sintaksēm, kas pārvēršas par šīm lietām.

Par CodePen

Izmantojot CodePen, es varēju paveikt visu nepieciešamo darbu publicēt kalkulatoru Es iegultu vietnē. Lielākā daļa CodePen darbu ir publiski un atvērti. Tās ir dzīvas būtnes, ar kurām var mijiedarboties citi cilvēki un sabiedrība, sākot ar vienkāršu sirdi, līdz komentāra atstāšanai, līdz pat savām vajadzībām.

CodePen - kalkulators tiešsaistes pārskatu ietekmes prognozēšanai

Izmantojot CodePen, varat mainīt savu skatu, ja vēlaties, lai strādājot rūtis būtu pa kreisi, pa labi vai apakšā ... vai arī HTML skatītu jaunā cilnē. Sānu skats darbojas neticami labi, lai pārbaudītu savus adaptīvos iestatījumus, jo jūs varat pielāgot skatāmās rūts izmēru.

Katru savu darba skriptu varat sakārtot pildspalvās, apvienot projektos (daudzfailu redaktors) vai pat veidot kolekcijas. Būtībā tā ir darbojoša portāla vietne priekšgala kodam, kurā varat sekot citiem autoriem, savākt citus publiski kopīgotus projektus, lai tos modificētu, un pat uzzināt, kā ar izaicinājumiem izdarīt dažas jautras lietas.

Jūs varat saglabāt kā GitHub Gist, eksportēt ZIP failā un pat iestiprināt pildspalva šādā rakstā:

Skatīt pildspalvu
Paredzētā tiešsaistes atsauksmju ietekme uz pārdošanu
by Douglas Karr (@douglaskarr)
on CodePen.


Viens no pildspalvas redaktora ierobežojumiem ir milzīgais koda apjoms. Jūs nekad nevarat saskarties ar šo problēmu, jo redaktoram vajadzētu būt labi ar simtiem vai pat tūkstošiem koda rindiņu. Bet, kad viņi sāks trāpīt no 5,000 līdz 10,000 XNUMX vai vairāk koda rindām, jūs redzēsit, ka redaktors sāk izgāzties. Tomēr jūs varat pievienot ārējas atsauces uz citur mitinātām stila lapām vai JavaScript!

Es aicinātu jūs reģistrēties. Jums tiks abonēts viņu iknedēļas e-pasts, un jūs arī varat pievienot plūsmu savai RSS plūsmai, lai jūs varētu redzēt nesen publicētās pildspalvas. Un, ja jūs sākat meklēt vai pārlūkot publiskās pildspalvas, jūs atradīsit dažus neticamus projektus ... lietotāji ir diezgan talantīgi!

sekot Douglas Karr uz Codepen

Apmaksātā versija CodePen Pro piedāvā daudz papildu funkciju, lai uzlabotu funkcionalitāti vai komandas - tostarp sadarbību, procesus, aktīvu mitināšanu, privātus skatus un pat izvietotus projektus ar savu domēnu vai apakšdomēnu. Protams, CodePen nodrošina lielisku repozitoriju ar Github integrāciju, kur var strādāt visa jūsu komanda. Ja jūs vienkārši vēlaties pārbaudīt kādu vienkāršu kodu, kāds esmu es, CodePen ir nenovērtējams rīks.

Ko jūs domājat?

Šī vietne izmanto Akismet, lai samazinātu surogātpastu. Uzziniet, kā tiek apstrādāts jūsu komentārs.