Share
Când am scris despre JSBin înapoi, a provocat cu siguranță o mulțime de conversații și dezbateri despre ce editor de fragmente online de cod a fost cel mai bun. Au fost aruncate câteva alternative, în special CodePen.
Cu atât de mulți cititori simțindu-se atât de pasionați și angajați față de alegerile lor specifice, am vrut să fac o scriere care a subliniat o parte din răcoarea CodePen. Voi spune că acest lucru nu este un articol comparativ, în primul rând pentru că într-adevăr urăsc să fac acele tipuri de articole. Fiecare dintre aceste unelte este unic și oferă o valoare proprie pe care o găsesc în cele mai multe cazuri.
Există o anumită asemănare între instrumente, atât în interfața cu utilizatorul, cât și în funcționalitate. Dacă ne uităm la ambele instrumente, veți vedea că UI multi-panou este destul de comună și pentru un motiv bun; este foarte intuitiv.
JSBin:
CodePen:
Abordarea multi-panou face incredibil de ușor să vizualizați toate fațetele codului exemplu, permițându-vă să actualizați rapid marcajul sau JavaScript și obțineți rezultate imediate. Iată în general aceste instrumente; prototiparea rapidă și testarea fragmentelor de cod.
În plus față de similaritățile UI, ambii editori permit utilizatorilor:
Din punctul meu de vedere, toate acestea sunt caracteristici critice pentru orice instrument de cod de bin, permițând unui utilizator să nu numai prototipul codului front-end folosind activele pe care le folosesc în mod obișnuit, ci și să le permită să le partajeze pe majoritatea mediilor folosite de dezvoltatori. Ca scriitor tehnic, abilitatea de a încorpora un fragment live este incredibil de importantă, deoarece furnizează feedback în timp real pentru a demosta codul pe care îl creez, consolidând conceptele pe care le scriu, oferind în același timp feedback real și cod cititorului.
În unele cazuri, paritatea caracteristicilor se reduce la costuri, dacă aceste caracteristici sunt disponibile sau nu. De exemplu, dacă doriți funcții de colaborare, JSBin oferă gratuit, în timp ce este o caracteristică disponibilă numai pentru oferta de nivel Pro de la CodePen. Și pentru a fi clar (și am spus acest lucru înainte), cred că este perfect bine să perceapă taxe pentru caracteristici grozave. Deci, dacă funcția este gratuită sau bazată pe abonament, este irelevantă în opinia mea, atât timp cât aduce utilizatorilor o valoare.
Dintre toate instrumentele de coduri pe care le-am folosit, pot să spun cu siguranță că CodePen este de departe cel mai estetic plăcut și destul de sincer, are sens. Modelul front-end al lui CodePen a fost construit de dezvoltatorul extrem de talentat, Chris Coyier, care are un ochi uimitor pentru designul interfeței cu utilizatorul. Și cu siguranță arată în aspectul lustruit și simț al instrumentului.
O mulțime de gândire a fost pus în furnizarea de acces ușor la multitudinea de caracteristici importante, asigurând în același timp că editorul nu este aglomerat și caracteristicile nu sunt intruzive. Acest lucru este important din moment ce realitatea din Viewport, în acest tip de UI, este strânsă. Încercarea de a echilibra totul, oferă o experiență decentă de codificare în mai multe limbi, oferind în același timp rezultate imediate; Este într-adevăr dificil și îi forțează pe unii să gândească în ceea ce privește aspectul.
Acest lucru este evident în utilizarea icoanelor bine plasate în anteturile fiecărui panou de script.
Folosind o pictogramă de interfață utilizată frecvent pentru setări (o unitate), puteți vedea cum echipa CodePen a consolidat frumos câteva funcții importante, complementare care sporesc experiența de prototip. Aceasta este ceea ce vreau sa spun ca UI nu este intruziva: oferind comenzi rapide intuitive pentru caracteristici suplimentare. Dar este mai mult decât aruncarea de caracteristici suplimentare. Acestea sunt instrumente din lumea reală pe care dezvoltatorii web le folosesc în fiecare zi și sunt importante pentru a obține un sentiment legitim dacă prototipul lor va funcționa sau nu.
Caracteristici cum ar fi "Detalii"să demonstreze că CodePen se concentrează pe oferirea nu numai a unei experiențe solide de editare, ci a unui unghi social puternic care permite utilizatorilor să obțină o mai bună vizibilitate în utilitatea fragmentelor de cod pe care le distribuie:
Acum, în timp ce ambele instrumente oferă caracteristici complementare extinse, în opinia mea, CodePen demonstrează o înclinație clară spre oferirea unor instrumente mai bune pentru designeri, datorită suportului său bogat pentru Sass, LESS și Stylus, inclusiv add-on-uri cum ar fi Compass, Bourbon și Nib.
Dar, în timp ce strălucește în CSS și markup-ul, CodePen nu oferă la fel de mult ca JSBin atunci când vine vorba de suportul bibliotecii JavaScript. Nu trebuie să spunem că nu include mulți actori importanți, dar cu multitudinea de noi biblioteci și cadre utilizate astăzi, există o diferență clară în ceea ce privește suportul încorporat:
CodePen:
JSBin:
Este clar din aceste capturi de ecran (care sunt numai capturi parțiale) că lățimea suportului de bază JavaScript este mult mai extinsă decât CodePen atât în cifre, cât și în versiunile acceptate. CodePen nu oferă posibilitatea de a include o resursă JavaScript externă în fragmentul dvs. de cod, dar comoditatea de a putea face clic pe o meniuri și alege dintr-o serie de cadre JS este destul de utilă.
Există o singură trăsătură, totuși, este un aspect total pentru mine și asta e:
Asta e corect. CodePen include integrarea cu unul dintre instrumentele mele preferate de testare a browserului, BrowserStack.com. Am scris despre serviciu înainte și îl iubesc absolut pentru simplitatea sa de a testa și a lărgi acoperirea browser-ului, așa că văd CodePen oferind integrarea cu acesta este un mare plus. Dar este mai mult decât un buton care face minunat. Drop-ul de lângă acesta vă permite să decideți ce browser doriți să vizați:
... care vă direcționează apoi la BrowserStack cu aceleași informații:
În ceea ce privește confortul, aceasta este o victorie clară pentru dezvoltatori. Este important să rețineți că veți fi redirecționat (ă) de la CodePen când faceți clic pe butonul BrowserStack și va trebui să aveți un cont BrowserStack pentru al utiliza.
CodePen vine într-o ediție gratuită și mai bogată în caracteristici Pro versiune. Acestea includ funcții pentru previzualizarea în timp real a codului pe mai multe dispozitive, colaborarea cu alți dezvoltatori, tematica stilourilor încorporate și modul Profesor intuitiv, care este foarte util pentru cursurile și cursurile online.
Dintre caracteristicile Pro disponibile, cele două pe care le consider cele mai utile sunt Vizualizare live și Găzduirea de active acesta din urmă permițând dezvoltatorilor să încarce active, cum ar fi imagini și fișiere script, care pot fi utilizate direct în stiloul de scriere.
S-ar putea să vă întrebați de ce acest lucru este util? Ei bine, alternativa este să găsiți o opțiune de găzduire externă, cum ar fi un CDN sau propriul server. Fiind capabil să încarce direct propriul fișier JavaScript personalizat, imaginile sau foile de stil rezolvă această problemă și fac aceste resurse disponibile pentru a fi folosite în stilouri. Odată încărcat, este o chestiune simplă de a face clic pe acel material, prin apăsarea acestuia în codul dvs.:
Numai acest lucru merită 9 dolari pe lună pentru a utiliza serviciul și se pare unic pentru CodePen.
Motivul pentru care îmi place foarte mult Vizualizare live caracteristică este faptul că testarea în diferiți factori de formă este incredibil de importantă în zilele noastre. Acest lucru se face trimiterea link-ului penului la dispozitivul cu care doriți să testați. Acest lucru se poate face prin tastarea directă a acestuia în bara de adrese URL a browserului mobil sau utilizând dialogul de distribuire al parolei CodePen pentru a trimite un mesaj text pe un dispozitiv mobil:
Când stiloul este actualizat pe calculatorul dvs., acesta reflectă aproape instantaneu modificările din orice număr de dispozitive.
CodePen este un instrument excelent. Este foarte lustruit și bogat în caracteristici, cu un suport fantastic pentru markup și CSS tooling. Faptul că unele caracteristici sunt bazate exclusiv pe abonament, nu mă fază puțin, deoarece nu mă deranjează să susțin software-ul bun. Voi spune că unele caracteristici par a fi o parte componentă a serviciului, creând în special pixuri private și previzualizare live, mai ales când alte servicii oferă deja gratuit.
În opinia mea, după ce am folosit atât JSBin, cât și CodePen, este clar că aceștia împărtășesc capabilități foarte asemănătoare, iar alegerea serviciului pe care îl folosiți va ajunge în cele din urmă la preferințele personale. Unele pot dori interfața profesională a CodePen, în timp ce altele ar putea aprecia amploarea extensiei suportului JavaScript JavaScript în JSBin. S-ar putea doar fierbinte în jos pentru a utiliza ambele pentru a îndeplini diferite sarcini, dar pot spune CodePen este cu siguranță un serviciu de utilitate pentru a leverage și voi fi adăugarea-l la instrumentele mele de comerț.
Accentsconagua