CodePen: Built, Test, Share și Discover HTML, CSS și JavaScript

Codepen: Construiți, testați și descoperiți codul front-end

O provocare cu un sistem de gestionare a conținutului este testarea și producerea de instrumente script. Deși nu este o cerință pentru majoritatea editorilor, ca publicație tehnologică, îmi place să împărtășesc din când în când scripturi de lucru pentru a ajuta alți oameni. Am împărtășit cum să folosesc JavaScript pentru a verifica puterea parolei, cum să verificați sintaxa adresei de e-mail cu expresii regulate (regex), iar cel mai recent a adăugat acest lucru calculator pentru a prezice impactul vânzărilor recenziilor online. Sper să adaug zeci de instrumente pe site, dar WordPress nu este tocmai propice publicării de acest fel ... este un sistem de conținut, nu un sistem de dezvoltare.

Deci, pentru ca micile mele scripturi să funcționeze, îmi face plăcere să le folosesc CodePen. CodePen este un instrument bine organizat, cu un panou HTML, un panou CSS, un panou JavaScript, Consolă și o publicație a codului rezultat. Fiecare panou conține informații atunci când treceți mouse-ul peste elemente, astfel încât să înțelegeți ce este posibil, precum și codarea culorilor HTML, CSS și JS pentru a vă ajuta să editați și să scrieți mai ușor.

CodePen este un mediu de dezvoltare socială. În centrul său, vă permite să scrieți cod în browser și să vedeți rezultatele acestuia pe măsură ce creați. Un editor de cod online util și eliberator pentru dezvoltatorii de orice abilitate și, în special, pentru persoanele care învață să codeze. CodePen se concentrează în principal pe limbaje front-end cum ar fi HTML, CSS, JavaScript și sintaxele de preprocesare care se transformă în acele lucruri.

Despre CodePen

Cu CodePen, am reușit să fac toată munca necesară publica calculatorul M-am încorporat în site. Majoritatea creațiilor de pe CodePen sunt publice și open source. Sunt lucruri vii cu care alți oameni și comunitatea pot interacționa, de la o simplă inimă, la lăsarea unui comentariu, la furculiță și schimbare pentru propriile nevoi.

CodePen - calculator pentru prezicerea impactului vânzărilor recenziilor online

Cu CodePen, vă puteți schimba vizualizarea dacă doriți ca panourile să fie în stânga, în dreapta sau în partea de jos în timp ce lucrați ... sau să vizualizați codul HTML într-o filă nouă. Vizualizarea alăturată funcționează incredibil de bine pentru a testa setările de receptivitate, deoarece puteți regla dimensiunea panoului vizibil.

Puteți organiza fiecare dintre scripturile dvs. de lucru în pixuri, le puteți combina în proiecte (editor de fișiere multiple) sau chiar puteți crea colecții. Practic este un site de portofoliu funcțional pentru codul front-end, unde puteți urmări alți autori, puteți crea alte proiecte partajate public în propriile dvs. modificări și chiar puteți învăța cum să faceți lucruri distractive prin provocări.

Puteți salva ca GitHub Gist, exporta în fișier zip și chiar încastra stiloul într-un articol ca acesta:

Vezi stiloul
Impactul estimat al vânzărilor recenziilor online
by Douglas Karr (@douglaskarr)
on CodePen.


Una dintre limitările editorului Pen este volumul mare de cod. Este posibil să nu întâlniți niciodată această problemă, deoarece editorul ar trebui să fie în regulă cu sute sau chiar mii de linii de cod. Dar când încep să lovească 5,000 - 10,000 sau mai multe linii de cod, veți vedea că editorul începe să eșueze. Cu toate acestea, puteți adăuga referințe externe la foi de stil sau JavaScript găzduit în altă parte!

Te-aș încuraja să te înscrii. Veți fi abonați la e-mailul săptămânal al acestora și puteți adăuga, de asemenea, fluxul la fluxul RSS, astfel încât să puteți vedea stilourile recent publicate. Și, dacă începeți să căutați sau să navigați prin stilourile publice de acolo, veți găsi câteva proiecte incredibile ... utilizatorii sunt destul de talentați!

Urma Douglas Karr pe Codepen

Versiunea cu plată, CodePen Pro, oferă o mulțime de caracteristici suplimentare pentru funcționalități sau echipe îmbunătățite - inclusiv colaborare, procese, găzduire a activelor, vizualizări private și chiar proiecte implementate cu propriul domeniu sau subdomeniu. Și, bineînțeles, CodePen oferă un depozit excelent cu integrare Github, unde întreaga ta echipă poate lucra. Dacă doriți doar să testați un cod simplu așa cum sunt eu, CodePen este un instrument neprețuit.

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.