CodePen: Sisäänrakennettu, testattava, jaettava ja löydettävä HTML, CSS ja JavaScript

Codepen: Rakenna, testaa ja löydä etupään koodi

Yksi haaste sisällönhallintajärjestelmällä on komentosarjatyökalujen testaaminen ja tuottaminen. Vaikka tämä ei ole vaatimus useimmille kustantajille, teknologiajulkaisuna haluan jakaa ajoittain toimivia komentosarjoja auttaakseni muita ihmisiä. Olen jakanut kuinka käyttää JavaScript tarkistaa salasanan vahvuuden, miten tarkista sähköpostiosoitteen syntaksit säännöllisten lausekkeiden avulla (regex), ja lisäsi viimeksi tämän laskin online-arvostelujen myynnin vaikutusten ennustamiseksi. Toivon voivani lisätä kymmeniä työkaluja sivustoon, mutta WordPress ei edistä juuri tällaista julkaisemista ... se on sisältöjärjestelmä, ei kehitysjärjestelmä.

Joten saadakseni pienet komentosarjat toimimaan nautin CodePen. CodePen on siististi järjestetty työkalu, jossa on HTML-paneeli, CSS-paneeli, JavaScript-paneeli, konsoli ja julkaistu tuloksena oleva koodi. Jokaisella paneelilla on tietoa hiirellä hiirellä elementtien kohdalla, jotta ymmärrät, mikä on mahdollista, sekä HTML-, CSS- ja JS-tiedostojen värikoodauksen muokkaamisen ja kirjoittamisen helpottamiseksi.

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 Upotin 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ämenkäsittelystä kommentin jättämiseen, haarautumiseen ja omien tarpeidensa muuttamiseen.

CodePen - laskin online-arvostelujen myynnin vaikutusten ennustamiseen

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ää jokaisen työstämäsi skriptin kyniksi, yhdistää ne Projekteiksi (monitiedostojen muokkausohjelma) tai jopa rakentaa kokoelmia. Se on pohjimmiltaan toimiva etupään koodisalkku, jossa voit seurata muita kirjoittajia, haastaa muut julkisesti jaetut projektit omiksi muokata ja jopa oppia tekemään hauskoja asioita haasteiden kautta.

Voit tallentaa GitHub Gistinä, viedä zip-tiedostona ja jopa Upottaa kynä tällaisessa artikkelissa:

Katso kynä
Online-arvostelujen ennakoitu myyntivaikutus
by Douglas Karr (@helsinki)
on CodePen.


Yksi kynäeditorin rajoituksista on pelkkä koodin määrä. Et voi koskaan törmätä tähän ongelmaan, koska editorin pitäisi olla kunnossa satojen tai jopa tuhansien koodirivien kanssa. Mutta kun he alkavat lyödä 5,000 - 10,000 tai enemmän koodiriviä, näet, että editori alkaa epäonnistua. Voit kuitenkin lisätä ulkoisia viitteitä tyylitaulukoihin tai muualla isännöityyn JavaScriptiin!

Kehotan teitä rekisteröitymään. Tilaat heidän viikoittaisen sähköpostinsa ja voit myös lisätä syötteen RSS-syötteeseesi, jotta näet äskettäin julkaistut kynät. Ja jos aloitat hakemisen tai selaamisen siellä olevista julkisista kynistä, löydät uskomattomia projekteja ... käyttäjät ovat melko lahjakkaita!

seurata Douglas Karr sivustolla Codepen

Maksullinen versio, CodePen Pro, tarjoaa runsaasti lisäominaisuuksia toimintojen tai tiimien parantamiseksi - mukaan lukien yhteistyö, prosessit, resurssien isännöinti, yksityiset näkymät ja jopa käyttöönotetut projektit omalla verkkotunnuksellasi tai aliverkkotunnuksellasi. Ja tietysti CodePen tarjoaa upean Github-integraation arkiston, jossa koko tiimisi voi työskennellä. Jos haluat vain testata yksinkertaista koodia sellaisena kuin minä olen, CodePen on korvaamaton työkalu.

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.