CodePen: Gitukod, Gisulayan, Pagpakigbahin ug Pagkaplag HTML, CSS, ug JavaScript

Codepen: Paghimo, Pagsulay, ug Pagpangita sa Front-End Code

Ang usa ka hagit sa usa ka sistema sa pagdumala sa sulud mao ang pagsulay ug paghimo mga gamit sa script. Samtang dili kana kinahanglanon alang sa kadaghanan sa mga magpapatik, ingon usa ka publikasyon sa teknolohiya, gusto nako ang pagpaambit sa mga nagtrabaho nga script matag karon ug unya aron matabangan ang ubang mga tawo. Gipaambit nako kung unsaon paggamit Ang JavaScript aron masusi ang kusog sa password, kung unsaon susihon ang email syntax sa email sa mga Regular Expression (Regex), ug labing karon gidugang kini calculator aron matagna ang epekto sa pagpamaligya sa mga pagribyu sa online. Gihangyo ko nga makadugang daghang mga gamit sa site apan ang WordPress dili eksakto nga makatabang sa pagmantala nga ingon niini… kini usa ka sistema sa sulud, dili usa ka sistema sa pag-uswag.

Mao nga, aron magamit ang akong gagmay nga mga script gusto nako gamiton CodePen. Ang CodePen usa ka maayong pagkahan-ay nga galamiton nga adunay usa ka HTML panel, usa ka CSS panel, usa ka JavaScript panel, Console, ug usa nga gipatik sa sangputanan nga code. Ang matag panel adunay kasayuran kung imong i-mouse ang mga elemento aron mahibal-an nimo kung unsa ang mahimo, maingon man ang color-coding sa imong HTML, CSS, ug JS aron matabangan ka nga ma-edit ug masulat ang dali.

Ang CodePen usa ka palibot sa pagpalambo sa sosyal. Sa kinapusoran niini, gitugotan ka nga magsulat code sa browser, ug makita ang mga sangputanan niini sa imong pagtukod. Usa ka mapuslanon ug makagawas nga editor sa online code alang sa mga taghimo bisan unsang kahanas, ug labi na ang paghatag gahum sa mga tawo nga nakakat-on sa pag-code. Panguna nga nagpunting ang CodePen sa mga sinultian nga panguna sa katapusan sama sa HTML, CSS, JavaScript, ug preprocessing syntaxes nga mahimo’g kana nga mga butang.

Bahin sa CodePen

Sa CodePen, nakaya nako nga buhaton ang tanan nga buluhaton nga kinahanglan nako ipatik ang calculator Gisulud ko sa site. Kadaghanan sa mga namugna sa CodePen publiko ug bukas nga gigikanan. Kini sila mga buhing butang nga mahimo’g makigsulti ang ubang mga tawo ug ang komunidad, gikan sa usa ka yano nga kasingkasing, sa pagbiya sa usa ka komento, sa forking ug pagbag-o alang sa ilang kaugalingon nga mga panginahanglan.

CodePen - calculator alang sa pagtagna sa epekto sa pamaligya sa mga pagsusi sa online

Sa CodePen, mahimo nimo mabag-o ang imong panan-aw kung gusto nimo ang mga pane naa sa wala, tuo, o ilawom samtang nagtrabaho ka… o tan-awa ang HTML sa usa ka bag-ong tab. Ang panan-aw sa kilid molihok nga maayo kaayo aron masulayan ang imong tubag nga mga setting tungod kay mahimo nimo nga ayohon ang gidak-on sa makita nga pane.

Mahimo nimo nga ayuhon ang matag usa sa imong nagtrabaho nga mga script sa mga Pens, iusa kini sa mga Proyekto (multi-file editor), o bisan ang paghimo og mga koleksyon. Kasagaran kini usa ka nagtrabaho nga site sa portfolio alang sa front-end code diin mahimo nimo sundon ang uban pang mga tagsulat, tinidor nga uban pang mga proyekto nga gipaambit sa publiko sa imong kaugalingon aron mausab, ug mahibal-an pa kung giunsa ang paghimo sa pipila ka mga makalingaw nga butang pinaagi sa mga hagit.

Mahimo ka makatipig ingon usa ka GitHub Gist, mag-export sa zip file, ug parehas pag-embed ang pen sa usa ka artikulo nga sama niini:

Tan-awa ang Pen
Gitagna nga Epekto sa Pagbaligya Sa Mga Review sa Online
by Douglas Karr (@douglaskarr)
on CodePen.


Usa sa mga limitasyon sa editor sa Pen mao ang kadaghan sa code. Mahimong dili ka gyud makatabok sa kini nga isyu, tungod kay ang editor kinahanglan maayo ra sa gatusan o bisan libo-libo nga mga linya sa code. Apan kung nagsugod na sila sa pag-igo sa 5,000 - 10,000 o daghan pang mga linya sa code, makita nimo nga nagsugod ang pagkapakyas sa editor. Bisan pa, mahimo ka makadugang mga pagsusi sa gawas sa mga styleheet o JavaScript nga gi-host sa ubang lugar!

Giawhag ko ikaw nga magpalista. Mag-subscribe ka sa ilang senemanang email ug mahimo usab nga idugang ang feed sa imong RSS feed aron makita nimo ang bag-ong na-publish nga mga pen. Ug, kung magsugod ka sa pagpangita o pag-browse sa mga publiko nga bolpen didto, makit-an nimo ang pipila nga dili katuohan nga mga proyekto… ang mga mogamit adunay talento!

Sunda Douglas Karr sa Codepen

Ang bayad nga bersyon, CodePen Pro, nagtanyag usa ka toneladang dugang nga mga bahin alang sa gipaayo nga pag-andar o mga koponan - lakip ang kolaborasyon, proseso, pag-host sa asset, pribado nga pagtan-aw, ug bisan ang pag-deploy sa mga proyekto gamit ang imong kaugalingon nga domain o subdomain. Ug, siyempre, ang CodePen naghatag usa ka maayo nga tipiganan nga adunay panagsama sa Github diin ang imong tibuuk nga tem mahimong magtrabaho. Kung gusto mo lang nga sulayan ang pipila ka yano nga code sama kanako, ang CodePen usa ka bililhon nga galamiton.

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.