CodePen: Sisäänrakennettu, testattava, jaettava ja löydettävä HTML, CSS ja JavaScript
Yksi sisällönhallintajärjestelmän haasteista on ohjelmoitujen työkalujen testaus ja tuottaminen. Vaikka tämä ei ole vaatimus useimmille julkaisijoille, teknologiajulkaisuna tykkään jakaa satunnaisia työskriptejä muiden auttamiseksi. Olen kertonut, kuinka JavaScriptin avulla tarkistetaan salasanan vahvuus, kuinka tarkistetaan sähköpostiosoitteiden syntaksia säännöllisillä lausekkeilla (Regex), ja viimeksi lisäsin tämän laskimen ennustamaan online-arvostelujen vaikutusta myyntiin. Toivon lisääväni sivustolle kymmeniä työkaluja, mutta WordPress ei edistä tällaista julkaisemista… se on sisältöjärjestelmä, ei kehitysjärjestelmä.
Nautin siis CodePenin käyttämisestä saadakseni pienet skriptini toimimaan. CodePen on siististi järjestetty työkalu, jossa on HTML-paneeli, CSS-paneeli, JavaScript-paneeli, konsoli ja tuloksena olevan koodin julkaisu. Jokaisessa paneelissa on tiedot, kun siirrät hiiren elementtien päälle, jotta ymmärrät, mikä on mahdollista, sekä HTML-, CSS- ja JS-värikoodaus, joka helpottaa muokkaamista ja kirjoittamista.
CodePen on sosiaalinen kehitysympäristö. Ytimessä se antaa sinun kirjoittaa koodia selaimeen ja nähdä sen tulokset rakennettaessa. Hyödyllinen ja vapauttava online-koodieditori kaikkien taitojen kehittäjille ja erityisesti valtuuttava koodaamista oppiville ihmisille. CodePen keskittyy ensisijaisesti käyttöliittymän kieliin, kuten HTML, CSS, JavaScript ja esikäsittelysyntakseihin, jotka muuttuvat kyseisiksi asioiksi.
Tietoja CodePenistä
CodePenillä pystyin tekemään kaiken tarvittavan työn julkaise laskin Upotsin sivustoon. Useimmat CodePenin luomukset ovat julkisia ja avoimen lähdekoodin. Ne ovat eläviä olentoja, joiden kanssa muut ihmiset ja yhteisö voivat olla vuorovaikutuksessa yksinkertaisesta sydämestä kommentin jättämiseen, haarautumiseen ja vaihtamiseen omien tarpeidensa mukaan.
CodePenillä voit muuttaa näkymääsi, jos haluat, että ruudut ovat vasemmalla, oikealla tai alhaalla työskennellessäsi ... tai tarkastele HTML-koodia uudessa välilehdessä. Side-by-side-näkymä toimii uskomattoman hyvin reagoivien asetusten testaamiseksi, koska voit säätää katseltavan ruudun kokoa.
Voit järjestää työskriptit kyniksi, yhdistää ne projekteiksi (monitiedostoeditori) tai jopa rakentaa kokoelmia. Se on käyttöliittymäkoodin toimiva portfoliosivusto, jossa voit seurata muita tekijöitä, jakaa muita julkisesti jaettuja projekteja omaksi muokattavaksi ja jopa oppia tekemään hauskoja asioita haasteiden kautta.
Voit tallentaa sen GitHub Gistiksi ja viedä sen a vetoketju tiedosto ja jopa Upottaa kynä tällaisessa artikkelissa:
Katso kynä Online-arvostelujen ennakoitu myyntivaikutus by Douglas Karr (@martech_zone) päällä CodePen.
Yksi kynäeditorin rajoituksista on koodin valtava määrä. Et ehkä koskaan kohtaa tätä ongelmaa, koska editorin pitäisi pärjätä satojen tai tuhansien koodirivien kanssa. Mutta kun ne alkavat saavuttaa 5,000 10,000–XNUMX XNUMX tai enemmän koodiriviä, näet editorin alkavan epäonnistua. Voit kuitenkin lisätä ulkoisia viittauksia muualla isännöityihin tyylisivuihin tai JavaScriptiin!
Kannustan sinua ilmoittautumaan. Tilaat heidän viikoittaisen sähköpostinsa ja voit lisätä syötteen RSS-syötteeseen nähdäksesi äskettäin julkaistut kynät. Ja jos alat etsiä tai selata julkisia kyniä siellä, löydät uskomattomia projekteja… käyttäjät ovat varsin lahjakkaita!
seurata Douglas Karr sivustolla Codepen
Maksullinen CodePen Pro -versio tarjoaa runsaasti lisäominaisuuksia toiminnallisuuden tai ryhmien parantamiseen – mukaan lukien yhteistyö, prosessit, omaisuuden isännöinti, yksityiset näkymät ja jopa käyttöönotetut projektit verkkotunnuksessasi tai aliverkkotunnuksessasi. Ja tietysti CodePen tarjoaa erinomaisen arkiston Github-integraatiolla, jossa koko tiimisi voi työskennellä. Jos haluat testata yksinkertaista koodia kuten minä, CodePen on korvaamaton työkalu.