8 Caracteristici minunate CodePen pentru programare și dezvoltare web

Noțiuni de bază cu JavaScript de dezvoltare web poate fi un proces frustrant, dar există instrumente acolo, care fac mai ușor.

CodePen.io este un mediu de codare în browser conceput atât pentru a învăța să codificăm, cât și pentru a reproiectează rapid idei cu probleme.

În acest articol, ne uităm la unele dintre caracteristicile site-ului și cum vă pot ajuta să deveniți un programator mai bun.

Ce este CodePen?

CodePen oferă ceva numit a stilou, care cuprinde trei ferestre diferite pentru HTML, CSS și JavaScript, plus un panou de previzualizare care se actualizează în timp real pe măsură ce tastați.

Deși este frecvent utilizat pentru dezvoltatorii web pentru a prezenta idei pentru site-uri web, este, de asemenea, un loc minunat de a învăța elementele de bază ale dezvoltării de web-front. Iată cele mai importante caracteristici pe care trebuie să le cunoașteți atunci când utilizați CodePen.

1. Preprocesoare

Preprocesoarele sunt limbi interpretate sau compilate concepute pentru a simplifica codificarea. Ele pot adăuga caracteristici la o limbă pentru comoditate și pot face citirea mai ușor a codului. În dezvoltarea web, o combinație de preprocesoare pentru HTML, CSS și JavaScript este utilizată pentru a crea rapid un cod curat.

Dacă învățați dezvoltarea web și doriți să încercați diferite preprocesoare, CodePen vă permite să comutați preprocesoarele în zbor și să vedeți codul pe care îl compilează în timp real. Fiecare dintre cele trei panouri din aplicația CodePen are un meniu derulant în partea din dreapta sus. Selectați Vizualizați compilate HTML / CSS / JS pentru a vedea cum va fi interpretat codul.

În acest pix, am creat un simplu site folosind Haml și Sass pentru a schimba textul antetului. Selectarea Vizualizați compilația arată standardul HTML și CSS. În acest exemplu, diferența este minimă. În timp ce învățați o nouă limbă, poate fi util să vedeți cum arată codul preprocesat o dată compilat.

2. Resurse externe

Alături de suportul nativ pentru preprocesoare, CodePen suportă scripturi externe. Acest lucru îl face locul perfect pentru a obține experiență hands-on cu bibliotecile pentru proiectele dvs. personale sau pentru a pătrunde pe bibliotecile populare de aplicații web cum ar fi React 7 Best Free Tutorials pentru învățarea React și Efectuarea Aplicațiilor Web 7 cele mai bune Tutoriale gratuite pentru învățarea Reacționează și Efectuarea Aplicații Web Cursurile gratuite sunt rareori la fel de cuprinzătoare și de ajutor - dar am descoperit mai multe cursuri React care sunt excelente și vă vor face să începeți pe piciorul drept. Citeste mai mult .

Pentru a adăuga o bibliotecă externă, deschideți Setări și faceți clic pe fila JavaScript. Există două moduri de a adăuga resurse, fie prin adăugarea manuală a adresei URL a resursei, fie prin căutarea.

Am folosit această caracteristică în articolul nostru care acoperă animația web cu mo.js, împreună cu preprocesarea Babel.

A se vedea exemplul Pen Mojs MUO de Ian (@Bardoctorus) pe CodePen.

Da, stilourile CodePen pot fi încorporate! Mergeți mai departe și faceți clic pe panoul de previzualizare de mai sus pentru a vedea rezultatele tutorialului Mo.js!

Alte pixuri pot fi importate la fel ca bibliotecile externe. Acest lucru înseamnă că puteți lua elemente din pixuri scrise anterior pentru a utiliza ca module în stilouri noi. Utilizatorul CodePen Pen Simple Poll pen este un bun exemplu în acest sens.

3. Șabloane

Când învățați concepte noi sau testați idei noi, utilizați frecvent componente similare și reșetați aceleași pași pentru a începe. CodePen permite crearea de pixuri șablon care pot tăia repetarea și vă permit să ajungeți direct la acest punct.

Pentru a crea un șablon, deschideți un stilou nou, efectuați modificările și selectați Format glisor în meniul de setări.

Până de curând, utilizatorii gratis au putut face doar trei șabloane, dar acum toți utilizatorii pot avea la fel de multe șabloane în contul lor așa cum doresc. Perfect pentru a începe o nouă idee cu o întârziere minimă!

4. Modul de colaborare

Abilitatea de a colabora și de a preda cu CodePen poate fi cel mai mare avantaj. Există deja o mulțime de instrumente de colaborare excelente pentru programatori, dar abordarea CodePen este simplă și intuitivă.

Utilizatorii Pro de la CodePen pot crea un nou stilou și îl pot deschide la colaborare în cadrul Schimbă privirea meniul. Acest lucru schimbă link-ul pen-ului într-o invitație care permite accesul la un număr de persoane care depinde de planul CodePen Pro.

În acest caz, am scris HTML în timp ce un prieten a actualizat CSS în timp real, cu un cursor etichetat identificat unde lucrau.

Oricine are link-ul poate să se alăture și să utilizeze funcția de chat în browser, indiferent dacă este vorba de un utilizator pro sau chiar de un cont CodePen. Dacă salvarea automată este dezactivată, numai proprietarul pixului poate salva orice modificare, făcându-i o modalitate sigură de a vă deschide codul altora fără risc.

Natura deschisă a acestui mod este benefică pentru începători, deoarece puteți invita aproape oricine în stiloul dvs. pentru a vă ghida printr-un concept dificil. Este, de asemenea, un mod la îndemână pentru a vă cunoaște modul în care este perfect pentru intervievarea potențialilor angajați și a fost deja folosit profesional în acest mod!

5. Profesorul Mode

Modul Profesor permite unui utilizator Pro să găzduiască o cameră în care numai ei pot edita codul. Între 10 și 100 de utilizatori pot viziona și pot vorbi în funcție de planul Pro al gazdei.

Modul Profesor permite flexibilitatea între învățarea la clasă și învățarea la distanță sau o combinație a celor două. Folosirea modului Profesor va permite oamenilor din spatele clasei să aibă aceeași experiență cu cei din față și profesorul să prezinte bug-uri care se vor actualiza în timp real.

6. Modul de prezentare

Modul de prezentare este proiectat, fără îndoială, cu codul de prezentare în minte. Aplicația se afișează într-o vizualizare simplificată, concepută pentru a lucra cu proiectoare retrospective. CodePen a optimizat modul de prezentare pentru utilizarea pe conexiuni la internet de viteză redusă și hardware mai slab.

Cititorii sensibili s-ar fi putut deja să-și dea seama că versiunea gratuită a CodePen ar oferi exact această funcție, deși modulul Pro are câteva caracteristici utile. Aspectul, dimensiunea fontului și temele pot fi modificate rapid, pentru a se potrivi aproape oricăror setări, iar afișarea link-ului cu pixul aduce o adresă URL scurtă de dimensiuni reduse, făcând mai ușor împărțirea proiectului.

Aceste mici modificări, împreună cu posibilitatea de a scala fereastra de previzualizare pentru a se potrivi cu ceea ce vă prezentați, fac ca modul de prezentare să fie perfect atât pentru profesori, cât și pentru dezvoltatori care prezintă idei colegilor. Modul de prezentare este, de asemenea, o modalitate simplă de a prezenta codul dacă vă aflați în interviu pentru o poziție de programare. Cum să vă pregătiți pentru un program de interviu Cum să vă pregătiți pentru un interviu de programare Cel mai bun sfat pentru interviurile de programare. Orice interviu poate fi descurajator. Știți suficient pentru a trece? Soluțiile dvs. vor fi destul de bune? Și dacă te sufli? Aplicați aceste cinci sfaturi. Citeste mai mult .

7. Modele

Căutarea inspirației se face mult mai ușor cu colecțiile de modele de design ale CodePen.

Fiecare categorie este o colecție de exemple de cod furnizate de utilizatorii CodePen pentru sarcini specifice. Căutați o modalitate de a crea butoane dinamice pentru site-ul dvs.? Acordeon meniuri? Există o mulțime de categorii pentru a se potrivi aproape orice exemplu.

Aceste modele sunt, de asemenea, o modalitate excelentă de a învăța cum funcționează butoanele interactive și de modurile diferite în care pot funcționa interfețele dinamice ale utilizatorilor.

8. Emmet

Emmet, cunoscut anterior ca Zen Coding, este considerat cel mai mare economizor de timp pentru dezvoltarea HTML și CSS. Pluginul ia o parte din codul pe care-l găsiți scriind multe și le transformați în scurtături simple.

Văzându-l în acțiune este mai bine decât explicația, luați configurația obișnuită pentru un document HTML:

Adăugarea la fiecare document HTML a fost redusă la două acțiuni. Folosind Emmet, tastați ! și apăsați pe Tab cheie. Magie!

Emmet este activ ca standard pe CodePen și este util mai ales dacă încercați să învățați un nou concept în JavaScript și trebuie să creați rapid HTML și CSS de sprijin.

Dezvoltați cu CodePen o experiență mai bună

CodePen este un instrument excelent pentru dezvoltatorii web, iar domeniul este în continuă creștere. JavaScript este un limbaj minunat de învățat pentru un viitor în dezvoltarea web.

Există câteva tutoriale și cursuri excelente disponibile pentru persoanele care doresc să înceapă cu JavaScript Învață cu adevărat JavaScript cu 5 cursuri Udemy de top Învață cu adevărat JavaScript cu 5 cursuri Udemy de top JavaScript este limba de programare a web-ului. Dacă aveți un motiv să învățați JavaScript, aceste cinci cursuri excelente de la Udemy ar putea fi locul pentru a începe călătoria dvs. de codificare. Citiți mai multe, iar CodePen este un mediu excelent pentru a vă testa noile abilități.

Explorați mai multe despre: CSS, HTML, JavaScript, Dezvoltare Web.