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 előállítá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 használatával 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 egymás melletti nézet hihetetlenül jól működik az adaptív beállítások teszteléséhez, mivel beállíthatja a látható panel méretét.

Szervezheti egyes működő szkriptjeit 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ások révén.

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-mailre, é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 további 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őt a saját domainjével vagy aldomainjével is telepített projekteket. És természetesen a CodePen remek adattárat 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.