CodePen: HTML, CSS ja JavaScripti sisseehitatud, testitud, jagatud ja avastatud

Codepen: ehitage, testige ja avastage esiotsa kood

Sisuhaldussüsteemi üheks väljakutseks on skriptitud tööriistade testimine ja tootmine. Ehkki enamiku kirjastajate jaoks pole see nõutav, meeldib mulle kui tehnoloogiaväljaandele aeg-ajalt toimivaid skripte teiste inimeste abistamiseks jagada. Olen jaganud, kuidas kasutada JavaScripti parooli tugevuse kontrollimiseks, kuidas kontrollige e-posti aadressi süntaksit regulaaravaldistega (Regulaarne) ja lisas selle viimati kalkulaator veebiarvustuste müügi mõju prognoosimiseks. Loodan, et lisan saidile kümneid tööriistu, kuid WordPress ei aita just sellist avaldamist ... see on sisusüsteem, mitte arendussüsteem.

Nii et minu väikeste skriptide töötamiseks on mul hea meel kasutada CodePen. CodePen on korralikult organiseeritud tööriist, millel on HTML-paneel, CSS-paneel, JavaScripti paneel, konsool ja saadud kood avaldatud. Igal paneelil on teave elementide kohal hiirega hiirega kurssi viimiseks, et saaksite aru, mis on võimalik, samuti HTML-i, CSS-i ja JS-i värvikodeerimine, mis hõlbustab redigeerimist ja kirjutamist.

CodePen on sotsiaalse arengu keskkond. Oma südames võimaldab see teil brauserisse koodi kirjutada ja selle koostamise ajal tulemusi näha. Kasulik ja vabastav veebikoodiredaktor mis tahes oskuste arendajatele ja eriti võimekas kodeerimist õppivatele inimestele. CodePen keskendub peamiselt esiotsa keeltele, nagu HTML, CSS, JavaScript ja eeltöötluse süntaksid, mis neist asjadeks muutuvad.

Teave CodePeni kohta

CodePeniga sain teha kõik vajalikud tööd avaldage kalkulaator Ma kinnistasin saidi. Enamik CodePeni loomingut on avalikud ja avatud lähtekoodiga. Need on elusolendid, millega teised inimesed ja kogukond saavad suhelda, alates lihtsast südamest kuni kommentaari jätmiseni, oma vajaduste rahuldamise ja muutmiseni.

CodePen - veebiarvustuste müügimõju prognoosimiseks mõeldud kalkulaator

CodePeni abil saate oma vaate muuta, kui soovite, et paanid oleksid töötamise ajal vasakul, paremal või allosas ... või vaadake HTML-i uuel vahelehel. Külgvaade toimib teie reageerivate seadete testimiseks uskumatult hästi, kuna saate reguleerida vaadatava paani suurust.

Saate korraldada kõik töötavad skriptid pliiatsiteks, ühendada need projektideks (mitme faili redaktor) või isegi kogud üles ehitada. Põhimõtteliselt on see esiotsa koodi töötav portfellisait, kus saate jälgida teisi autoreid, sundida teisi avalikult jagatud projekte enda muutmiseks ja isegi väljakutseid pakkudes õppima lõbusat.

Saate salvestada GitHub Gistina, eksportida ZIP-failina ja isegi Embed pliiats sellises artiklis:

Vaadake pastakat
Veebiarvustuste prognoositav müügimõju
by Douglas Karr (@douglaskarr)
on CodePen.


Pliiatsiredaktori üks piirang on koodi suur maht. Te ei pruugi kunagi selle probleemiga kokku puutuda, kuna redaktor peaks sadade või isegi tuhandete koodiridadega korras olema. Kuid kui nad hakkavad lööma 5,000–10,000 XNUMX või rohkem koodirida, näete, et redaktor hakkab ebaõnnestuma. Küll aga saate lisada väliseid viiteid mujale hostitud stiililehtedele või JavaScripti!

Soovitaksin teil registreeruda. Teile tellitakse nende iganädalane e-post ja saate voo lisada ka oma RSS-voogu, et näeksite värskelt avaldatud pliiatseid. Ja kui hakkate seal avalikke pastakaid otsima või sirvima, leiate uskumatuid projekte ... kasutajad on üsna andekad!

järgima Douglas Karr Codepenis

Tasuline versioon CodePen Pro pakub funktsionaalsuse või meeskondade täiustamiseks hulgaliselt lisafunktsioone - sealhulgas koostööd, protsesse, varahaldust, privaatvõite ja isegi teie enda domeeni või alamdomeeniga juurutatud projekte. Muidugi pakub CodePen suurepärast Githubi integreerimisega hoidlat, kus kogu teie meeskond saab töötada. Kui soovite lihtsalt proovida mõnda lihtsat koodi nagu ma olen, on CodePen hindamatu tööriist.

Mis sa arvad?

Sellel saidil kasutatakse rämpsposti vähendamiseks Akismetit. Vaadake, kuidas teie andmeid töödeldakse.