CodePen: HTML, CSS és JavaScript építése, tesztelése, megosztása és felfedezése

Codepen: Építsd, teszteld és fedezd fel a kezelőfelület kódját

A tartalomkezelő rendszer egyik kihívása a szkriptelt eszközök tesztelése és gyártása. Bár ez a legtöbb kiadó számára nem követelmény, technológiai kiadványként szeretem időnként megosztani a működő szkripteket, hogy segítsek más embereknek. Megosztottam, hogyan kell használni JavaScript a jelszó erősségének ellenőrzéséhez, hogyan kell ellenőrizze az e-mail cím szintaxisát a Reguláris kifejezésekkel (regex), és legutóbb ezt tette hozzá számológép az online vélemények értékesítési hatásának előrejelzéséhez. Remélem, hogy tucatnyi eszközt fogok felvenni a webhelyre, de a WordPress nem éppen kedvez az ilyen publikációknak ... ez egy tartalmi rendszer, nem pedig egy fejlesztési rendszer.

Szóval, hogy működjenek a kis szkriptjeim, szívesen használom CodePen. A CodePen egy szépen rendezett eszköz, amely HTML panelt, CSS panelt, JavaScript panelt, konzolt tartalmaz, és közzéteszi a kapott kódot. Minden panel rendelkezik információkkal, amikor az elemek fölé viszi az egeret, hogy megértse, mi lehetséges, valamint a HTML, CSS és JS színkódolásával, amely megkönnyíti a szerkesztést és az írást.

A CodePen egy társadalmi fejlesztési környezet. Alapjában véve lehetővé teszi, hogy kódot írjon a böngészőbe, és az építkezés során megnézze annak eredményeit. Hasznos és felszabadító online kódszerkesztő bármilyen készség fejlesztői számára, és különösen a kódolást megtanulók számára. A CodePen elsősorban olyan kezelőfelületek nyelvére összpontosít, mint a HTML, CSS, JavaScript és az ilyen dolgokká váló előfeldolgozó szintaxisok.

A CodePenről

A CodePen segítségével minden szükséges munkát elvégezhettem tegye közzé a számológépet Beágyazódtam az oldalba. A CodePen legtöbb alkotása nyilvános és nyílt forráskódú. Olyan élőlények, amelyekkel más emberek és a közösség kölcsönhatásba léphet, az egyszerű szívből, a megjegyzés elküldéséig, a saját igényeik szerinti elágazásig és változtatásig.

CodePen - számológép az online vélemények értékesítési hatásainak előrejelzéséhez

A CodePen segítségével megváltoztathatja a nézetet, ha azt szeretné, hogy munka közben az ablaktáblák balra, jobbra vagy alul legyenek, vagy új HTML lapot nézzen meg. Az oldalsó nézet hihetetlenül jól működik az érzékeny beállítások teszteléséhez, mivel beállíthatja a látható panel méretét.

Szervezheti mindegyik működő szkriptjét Tollakba, egyesítheti Projektekbe (több fájl szerkesztő), vagy akár gyűjteményeket is készíthet. Alapvetően egy működő portfólió a kezelői kód számára, ahol követheti a többi szerzőt, más nyilvánosan megosztott projekteket saját szerkesztésébe kényszeríthet, és még megtanulhatja, hogyan kell szórakoztató dolgokat csinálni a kihívásokon keresztül.

Menthet GitHub Gist néven, exportálhat zip fájlban, sőt Beágyaz a toll egy ilyen cikkben:

Lásd a tollat
Az online vélemények várható értékesítési hatása
by Douglas Karr (@douglaskarr)
on CodePen.


A Tollszerkesztő egyik korlátja a puszta kódmennyiség. Soha nem találkozhat ezzel a kérdéssel, mivel a szerkesztőnek rendben kell lennie több száz vagy akár több ezer sornyi kóddal. De amikor elkezdenek 5,000 - 10,000 XNUMX vagy annál több kódsort ütni, látni fogja, hogy a szerkesztő elkezdi bukni. Külső hivatkozásokat azonban hozzáadhat máshol tárolt stíluslapokhoz vagy JavaScript-ekhez!

Javasolnám, hogy iratkozzon fel. Feliratkozik a heti e-mailjükre, és felveheti a hírcsatornát RSS-hírcsatornájába, így láthatja az újonnan közzétett tollakat. És ha elkezdi keresni vagy böngészni a nyilvános tollakat, hihetetlen projekteket talál ... a felhasználók elég tehetségesek!

Kövesse Douglas Karr a Codepen-en

A fizetett verzió, a CodePen Pro rengeteg kiegészítő funkciót kínál a továbbfejlesztett funkcionalitás vagy csapatok számára - beleértve az együttműködést, a folyamatokat, az eszközök tárolását, a privát nézeteket, és még a saját domainjével vagy aldomainjével telepített projekteket is. És természetesen a CodePen egy nagyszerű tárhelyet kínál a Github integrációval, ahol az egész csapata dolgozhat. Ha csak egy egyszerű kódot szeretne kipróbálni, mint én, a CodePen felbecsülhetetlen eszköz.

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.