CodePen: Ndërtuar, Testuar, Ndani dhe Zbuloni HTML, CSS dhe JavaScript

Kodifikimi: Ndërtoni, Testoni dhe Zbuloni Kodin Front-End

Një sfidë me një sistem të menaxhimit të përmbajtjes është testimi dhe prodhimi i mjeteve të shkruara. Ndërsa kjo nuk është një kërkesë për shumicën e botuesve, si një botim teknologjik, më pëlqen të ndaj skripte pune herë pas here për të ndihmuar njerëzit e tjerë. Unë kam ndarë mënyrën e përdorimit JavaScript për të kontrolluar fuqinë e fjalëkalimit, si të kontrolloni sintaksën e adresës së emailit me Shprehjet e Rregullta (Regex), dhe së fundmi e shtoi këtë llogaritësi për të parashikuar ndikimin në shitje të rishikimeve në internet. Shpresoj të shtoj dhjetëra mjete në sit, por WordPress nuk është i përshtatshëm për botime si ky ... është një sistem përmbajtjeje, jo një sistem zhvillimi.

Kështu që, për t'i përdorur skenaret e mia të vogla më pëlqen të përdor CodePen. CodePen është një mjet i organizuar mjeshtërisht me një panel HTML, një panel CSS, një panel JavaScript, Console dhe një të botuar të kodit që rezulton. Secili panel ka informacion kur vendosni mbi elemente në mënyrë që të kuptoni se çfarë është e mundur, si dhe kodimin e ngjyrave të HTML, CSS dhe JS tuaj për t'ju ndihmuar të redaktoni dhe shkruani më lehtë.

CodePen është një mjedis i zhvillimit shoqëror. Në zemër të saj, kjo ju lejon të shkruani kod në shfletuesin dhe të shihni rezultatet e tij ndërsa ndërtoni. Një redaktues i kodit online i dobishëm dhe çlirues për zhvilluesit e çdo aftësie, dhe veçanërisht fuqizues për njerëzit që mësojnë të kodojnë. CodePen përqendrohet kryesisht në gjuhët e përparme si HTML, CSS, JavaScript dhe sintaksat e parapërpunimit që kthehen në ato gjëra.

Rreth CodePen

Me CodePen, unë isha në gjendje të bëja të gjithë punën e nevojshme për të publikoni llogaritësin Unë jam ngulitur në sit. Shumica e krijimeve në CodePen janë publike dhe me burim të hapur. Ato janë qenie të gjalla me të cilat njerëzit e tjerë dhe komuniteti mund të bashkëveprojnë, nga një zemër e thjeshtë, te lënia e një komenti, te pirunia dhe ndryshimi për nevojat e tyre.

CodePen - kalkulatriçe për parashikimin e ndikimit në shitje të rishikimeve në internet

Me CodePen, ju mund të ndryshoni pamjen tuaj nëse dëshironi që xhamat të jenë në të majtë, të djathtë ose në pjesën e poshtme ndërsa punoni… ose të shihni HTML në një skedë të re. Pamja krah për krah funksionon shumë mirë për të testuar cilësimet tuaja të përgjegjshme pasi mund të rregulloni madhësinë e panelit të shikueshëm.

Ju mund të organizoni secilin nga skenarët tuaj të punës në Pena, t'i kombinoni ato në Projekte (redaktues me shumë skedarë), ose madje të ndërtoni koleksione. Në thelb është një faqe pune e portofolit për kodin front-end ku mund të ndiqni autorë të tjerë, të grumbulloni projekte të tjera të ndara publikisht në tuajat për t'i modifikuar dhe madje të mësoni se si të bëni gjëra argëtuese përmes sfidave.

Ju mund të kurseni si GitHub Gist, të eksportoni në skedar zip, madje edhe mbjell stilolapsi në një artikull si ky:

Shihni Penë
Ndikimi i parashikuar i shitjeve të rishikimeve në internet
by Douglas Karr (@douglaskarr)
on CodePen.


Një nga kufizimet e redaktorit Pen është vëllimi i madh i kodit. Ju kurrë nuk mund ta shihni këtë çështje, pasi redaktori duhet të jetë mirë me qindra apo edhe mijëra rreshta të kodit. Por kur ata fillojnë të godasin 5,000 - 10,000 ose më shumë rreshta të kodit, do të shihni se redaktori fillon të dështojë. Sidoqoftë, mund të shtoni referenca të jashtme në fletët e stileve ose JavaScript të pritura diku tjetër!

Unë do t'ju inkurajoja të regjistroheni. Ju do të regjistroheni në emailin e tyre javor dhe gjithashtu mund të shtoni burimin në RSS tuaj, në mënyrë që të shihni stilolapsat e botuara rishtas. Dhe, nëse filloni të kërkoni ose shfletoni stilolapsat publike atje, do të gjeni disa projekte të pabesueshme ... përdoruesit janë mjaft të talentuar!

ndjek Douglas Karr në Kodepen

Versioni i paguar, CodePen Pro, ofron një mori karakteristikash shtesë për funksionalitetin ose ekipet e përmirësuara - duke përfshirë bashkëpunimin, proceset, pritjen e aseteve, pamjet private, madje edhe projekte të vendosura me domenin ose nën-domenin tuaj. Dhe, sigurisht, CodePen ofron një depo të shkëlqyeshme me integrimin e Github, ku mund të punojë i gjithë ekipi juaj. Nëse thjesht dëshironi të provoni një kod të thjeshtë siç jam unë, CodePen është një mjet i paçmuar.

Çfarë mendoni ju?

Kjo faqe përdor Akismet për të reduktuar spamin. Mësoni se si përpunohet komenti juaj.