Home-theater-designers
Noțiuni de bază cu dezvoltarea web JavaScript poate fi un proces frustrant, dar există instrumente care le facilitează.
CodePen.io este un mediu de codare în browser conceput atât pentru învățarea codării, cât și pentru prototiparea rapidă a ideilor cu probleme minime.
În acest articol, ne uităm la unele dintre caracteristicile site-ului și la modul în care acestea vă pot ajuta să deveniți un programator mai bun.
Ce este CodePen?
CodePen oferă ceva numit a pix , 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 folosit frecvent pentru dezvoltatorii web pentru a prezenta idei pentru site-uri web, este, de asemenea, un loc minunat pentru a învăța elementele de bază ale dezvoltării web front-end. Iată cele mai notabile caracteristici pe care trebuie să le cunoașteți atunci când utilizați CodePen.
1. Preprocesoare
Preprocesatoarele sunt limbaje interpretate sau compilate concepute pentru a simplifica codarea. Ele pot adăuga caracteristici într-o limbă pentru confort și pot face codul mai ușor de citit. În dezvoltarea web, o combinație de preprocesoare pentru HTML, CSS și JavaScript sunt folosite pentru a crea rapid cod curat.
Dacă învățați dezvoltarea web și doriți să încercați diferite preprocesoare, CodePen vă permite să comutați preprocesoarele din mers ș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 dreapta sus. Selectați Vizualizați HTML / CSS / JS compilat pentru a vedea cum va fi interpretat codul.
În acest stilou, am creat un site simplu folosind Haml și Sass pentru a stiliza un text de antet. Selectarea Vizualizare compilată afișează HTML și CSS standard. În acest exemplu, diferența este minimă. Cu toate acestea, în timp ce învățați o limbă nouă, poate fi util să vedeți cum arată codul preprocesat odată compilat.
2. Resurse externe
Alături de suportul nativ pentru preprocesoare, CodePen acceptă scripturi externe. Acest lucru îl face locul perfect pentru a obține experiență practică cu bibliotecile pentru proiectele dvs. personale sau pentru a explora biblioteci populare de aplicații web, cum ar fi React.
Pentru a adăuga o bibliotecă externă, deschideți fișierul Setări panoul de pe stiloul dvs. și accesați fila JavaScript. Există două moduri de a adăuga resurse, fie prin adăugarea manuală a URL-ului resursei, fie prin căutare.
Am folosit această caracteristică în articolul nostru animație web cu mo.js , împreună cu preprocesarea Babel.
Vezi stiloul Exemplu Mojs MUO de Ian ( @Bardoctorus ) pe CodePen.
Da, stilourile CodePen pot fi încorporate! Continuați ș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. Aceasta înseamnă că puteți prelua elemente din stilouri scrise anterior pentru a le folosi ca module în noile stilouri. Utilizatorul CodePen al lui Adam Sondaj simplu stiloul este un bun exemplu în acest sens.
3. Șabloane
Când înveți concepte noi sau testezi idei noi, folosești frecvent componente similare și reșapezi aceiași pași pentru a începe. CodePen permite crearea stilourilor care pot reduce repetarea și vă permit să ajungeți direct la subiect.
Pentru a crea un șablon, deschideți un stilou nou, efectuați modificările și selectați Șablon glisor în meniul de setări.
https://vimeo.com/221428690
Până de curând, utilizatorii gratuiți puteau realiza doar trei șabloane, dar acum toți utilizatorii pot avea în cont câte șabloane doresc. Perfect pentru a începe o idee nouă cu întârzierea minimă!
4. Colaborarea la modă
Abilitatea de a colabora și de a preda cu CodePen poate fi cel mai mare atu. Există deja o mulțime de instrumente excelente de colaborare pentru programatori, dar abordarea CodePen este simplă și intuitivă.
Utilizatorii profesioniști ai CodePen pot crea un stilou nou și îl pot deschide pentru colaborare în cadrul Schimbă privirea meniul. Aceasta schimbă legătura stiloului într-o invitație care poate fi partajată, găzduind un număr de persoane în funcție de planul dvs. CodePen Pro.
cum se schimbă pictograma aplicației Windows 10
În acest caz, am scris HTML în timp ce un prieten actualiza CSS în timp real, cu un cursor etichetat identificat unde lucrează.
Oricine are linkul se poate alătura și utiliza funcția de chat în browser, indiferent dacă este un utilizator profesionist sau chiar are un cont CodePen. Cu condiția ca salvarea automată să fie dezactivată, numai proprietarul stiloului poate salva orice modificări, făcându-l o modalitate sigură de a vă deschide codul către alte persoane fără riscuri.
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-ți cunoaște calea, deoarece este perfect pentru intervievarea potențialilor angajați și are deja a fost folosit profesional în acest mod !
5. Modul profesor
Modul profesor permite unui utilizator Pro să găzduiască o cameră în care numai ei pot edita codul. Între 10-100 de utilizatori pot viziona și chat î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ă. Utilizarea modului Profesor le va permite oamenilor din spatele clasei să aibă aceeași experiență a celor din față, iar profesorului să le arate corecții de erori care se vor actualiza în timp real.
6. Mod de prezentare
Modul de prezentare este conceput, în mod surprinzător, având în vedere codul de prezentare. Aplicația se afișează într-o vizualizare simplificată, concepută pentru a funcționa cu proiectoare aeriene. CodePen a optimizat modul de prezentare pentru utilizarea pe conexiuni de internet cu viteză mai mică și hardware mai slab.
Este posibil ca cititorii inteligenți să fi realizat deja că versiunea gratuită a CodePen ar oferi exact această funcție, deși modul Pro are câteva caracteristici utile. Aspectul, dimensiunea fontului și temele pot fi schimbate rapid din mers pentru a se potrivi cu aproape orice setare, iar afișarea linkului către stilou afișează o adresă URL scurtată de dimensiuni jumbo, facilitând partajarea proiectului.
Aceste mici modificări, împreună cu posibilitatea de a scări fereastra de previzualizare pentru a se potrivi cu orice arătați, fac modul de prezentare perfect atât pentru profesori, cât și pentru dezvoltatori care prezintă idei colegilor. Modul de prezentare este, de asemenea, o modalitate simplă și simplă de a prezenta codul dacă vă aflați în interviu pentru o poziție de programare.
7. Modele
Căutarea inspirației este mult mai ușoară cu colecțiile CodePen de Modele de design .
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.? Meniuri de acordeonare? Există o mulțime de categorii care se potrivesc cu aproape orice exemplu.
Aceste modele sunt, de asemenea, o modalitate excelentă de a învăța cum funcționează butoanele interactive și diferitele moduri în care interfețele utilizator dinamice pot funcționa.
8. Emmet
Emmet , cunoscut anterior sub numele de Zen Coding, este considerat pe scară largă drept cel mai mare economisitor de timp pentru dezvoltarea HTML și CSS. Pluginul preia o parte din codul pe care îl găsiți scriind foarte mult și le transformă în comenzi rapide simple.
Este mai bine să-l vedeți în acțiune decât să-l explicați, deci luați configurarea obișnuită pentru un document HTML:
Adăugarea acestuia la fiecare document HTML a fost redusă la două acțiuni. Folosind Emmet, tastați ! și a lovit 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 susținere.
Dezvoltați-vă cu CodePen pentru o experiență mai bună
CodePen este un instrument excelent pentru dezvoltatorii web, iar domeniul este în continuă creștere. JavaScript este un limbaj excelent de învățat pentru un viitor în dezvoltarea web.
aplicația de mesaje nu funcționează pe Mac
Există câteva tutoriale și cursuri grozave disponibile pentru persoanele care doresc să înceapă cu JavaScript, iar CodePen este un mediu excelent pentru a vă testa noile abilități.
Acțiune Acțiune Tweet E-mail Cele mai bune 8 site-uri web pentru a descărca cărți audio gratuitCărțile audio sunt o sursă excelentă de divertisment și mult mai ușor de digerat. Iată cele mai bune opt site-uri web de unde le puteți descărca gratuit.
Citiți în continuare Subiecte asemănătoare- Programare
- HTML
- Dezvoltare web
- JavaScript
- CSS
Ian Buckley este un jurnalist independent, muzician, interpret și producător video care locuiește în Berlin, Germania. Când nu scrie sau pe scenă, se ocupă de electronice sau coduri DIY în speranța de a deveni un om de știință nebun.
Mai multe de la Ian BuckleyAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona