Home-theater-designers
Početak razvoja web stranice JavaScript može biti frustrirajući proces, ali postoje alati koji to olakšavaju.
CodePen.io je okruženje za kodiranje u pregledniku dizajnirano za učenje kodiranja i brzo prototipiranje ideja uz minimalne muke.
U ovom članku razmatramo neke značajke web stranice i kako vam mogu pomoći da postanete bolji programer.
Što je CodePen?
CodePen nudi nešto što se naziva a olovka , koji se sastoji od tri različita prozora za HTML, CSS i JavaScript, plus okno za pregled koje se ažurira u stvarnom vremenu dok tipkate.
Iako se web programeri često koriste za izlaganje ideja za web stranice, također su izvrsno mjesto za učenje osnova front-end web razvoja. Evo najznačajnijih značajki koje morate znati prilikom korištenja CodePen -a.
1. Predprocesori
Predprocesori su interpretirani ili kompilirani jezici dizajnirani za pojednostavljivanje kodiranja. Mogu dodati jezične značajke radi praktičnosti i olakšati čitanje koda. U web razvoju, kombinacija pretprocesora za HTML, CSS i JavaScript koristi se za brzo stvaranje čistog koda.
Ako učite web razvoj i želite isprobati različite predprocesore, CodePen vam omogućuje da preusmjeravate predprocesore u hodu i vidite kôd u koji se sastavlja u stvarnom vremenu. Svako od tri okna aplikacije CodePen ima padajući izbornik u gornjem desnom kutu. Odaberi Pogledajte sastavljeni HTML/CSS/JS vidjeti kako će se kôd tumačiti.
U ovom smo olovku stvorili jednostavno web mjesto pomoću Haml i Sas za stiliziranje teksta zaglavlja. Odabir Prikaz sastavljen prikazuje standardne HTML i CSS. U ovom primjeru razlika je minimalna. Međutim, tijekom učenja novog jezika može biti korisno vidjeti kako izgleda prethodno obrađeni kod nakon sastavljanja.
2. Vanjski izvori
Uz izvornu podršku za predprocesore, CodePen podržava i vanjske skripte. To ga čini savršenim mjestom za stjecanje praktičnog iskustva s knjižnicama za vaše osobne projekte ili za nadopunjavanje popularnih knjižnica web aplikacija poput React.
Da biste dodali vanjsku biblioteku, otvorite Postavke oknu na olovci i prijeđite na karticu JavaScript. Postoje dva načina za dodavanje resursa, bilo ručnim dodavanjem URL -a resursa, bilo pretraživanjem.
Ovu smo značajku koristili u našem članku koji pokriva web animacija s mo.js , zajedno s Babelovom prethodnom obradom.
Pogledajte olovku Primjer Mojs MUO od Iana ( @Bardoctorus ) na CodePenu.
Da, olovke CodePen mogu se ugraditi! Samo naprijed i kliknite gornje okno za pregled da biste vidjeli rezultate Mo.js vodiča!
Ostale olovke mogu se uvesti poput vanjskih knjižnica. To znači da možete uzeti elemente iz prethodno napisanih olovaka za upotrebu poput modula u novim olovkama. CodePen korisnik Adamov Jednostavna anketa olovka je dobar primjer za to.
3. Predlošci
Kad učite nove koncepte ili isprobavate nove ideje, često koristite slične komponente i ponavljate iste korake za početak. CodePen omogućuje stvaranje predložaka olovaka koji mogu prekinuti ponavljanje i dopustiti vam da prijeđete na stvar.
Da biste stvorili predložak, otvorite novu olovku, unesite izmjene i odaberite Predložak klizač u izborniku postavki.
https://vimeo.com/221428690
Do nedavno su besplatni korisnici mogli napraviti samo tri predloška, ali sada svi korisnici mogu imati koliko god predložaka žele na svom računu. Savršeno za početak nove ideje s minimalnim odlaganjem!
4. Modna suradnja
Sposobnost suradnje i podučavanja s CodePenom može biti njegovo najveće bogatstvo. Već postoji mnoštvo izvrsnih alata za suradnju programera, ali CodePen pristup je jednostavan i intuitivan.
Profesionalni korisnici CodePena mogu stvoriti novu olovku i otvoriti je za suradnju pod Promijeni pogled Jelovnik. Ovo mijenja vezu olovke u pozivnicu za dijeljenje koja prima veliki broj ljudi ovisno o vašem planu CodePen Pro.
zašto moj telefon kaže da ovaj pribor možda nije podržan
U ovom sam slučaju napisao HTML dok je prijatelj ažurirao CSS u stvarnom vremenu, s označenim kursorom identificiranim gdje rade.
Svatko s vezom može se pridružiti i koristiti funkciju chata u pregledniku, bez obzira radi li se o profesionalnom korisniku ili čak ima CodePen račun. Pod uvjetom da je automatsko spremanje isključeno, samo vlasnik olovke može spremiti sve promjene, što ga čini sigurnim načinom otvaranja koda drugima bez rizika.
Otvorena priroda ovog načina rada korisna je za početnike jer možete pozvati gotovo svakoga u olovku da vas vodi kroz težak koncept. Također je zgodan način da se snađete jer je savršen za intervjue s potencijalnim zaposlenicima, a već je to učinio na ovaj način se profesionalno koristi !
5. Profesorski način
Profesor način rada omogućuje jednom Pro korisniku da ugosti prostoriju u kojoj samo oni mogu uređivati kôd. Ovisno o Pro planu domaćina, između 10-100 korisnika može gledati i razgovarati.
Način Profesor omogućuje fleksibilnost između učenja u učionici i učenja na daljinu, ili kombinaciju ova dva načina. Korištenje načina rada Profesor omogućit će ljudima na kraju razreda da imaju isto iskustvo kao oni naprijed, a učitelj će prikazati ispravke programskih pogrešaka koji će se ažurirati u stvarnom vremenu.
6. Način prezentacije
Način prezentacije osmišljen je, što ne čudi, s prezentiranjem koda na umu. Aplikacija se prikazuje u pojednostavljenom prikazu, dizajniranom za rad s grafoskopima. CodePen je optimizirao način prezentacije za upotrebu na nižim brzinama internetskih veza i slabijem hardveru.
Oštroumni čitatelji možda su već shvatili da će besplatna verzija CodePena pružiti upravo ovu funkciju, iako Pro način ima nekoliko korisnih značajki. Raspored, veličina fonta i teme mogu se brzo mijenjati u hodu kako bi odgovarali gotovo svim postavkama, a pokazivanje veze do olovke donosi skraćeni URL veličine koji olakšava dijeljenje projekta.
Ove male promjene, zajedno s mogućnošću prilagodbe prozora pregleda kako bi odgovarale svemu što pokazujete, čine način prezentacije savršenim i za učitelje i za programere koji kolegama prezentiraju ideje. Način prezentacije također je čist i jednostavan način predstavljanja koda ako se nađete na razgovoru za programsko mjesto.
7. Uzorci
Potraga za inspiracijom znatno je olakšana zbirkama CodePen -a Uzorci dizajna .
Svaka kategorija je zbirka primjera koda koji su korisnici CodePena dali za određene zadatke. Tražite način za stvaranje dinamičkih gumba za svoju web lokaciju? Jelovnici za harmoniku? Postoji mnogo kategorija koje odgovaraju gotovo svakom primjeru.
Ovi su uzorci također odličan način da naučite kako funkcioniraju interaktivni gumbi i različiti načini funkcioniranja dinamičkih korisničkih sučelja.
8. Emmet
Mrav , ranije poznat kao Zen Coding, naširoko se smatra najvećom uštedom vremena za razvoj HTML -a i CSS -a. Dodatak uzima dio koda za koji smatrate da ga puno pišete i pretvara ga u jednostavne prečace.
Bolje je vidjeti to na djelu nego objasniti, pa uzmite uobičajene postavke za HTML dokument:
Dodavanje ovoga u svaki HTML dokument svedeno je na dvije radnje. Pomoću Emmeta upišite ! i pogodio Tab ključ. Magija!
Emmet je aktivan kao standard na CodePenu i posebno je koristan ako pokušavate naučiti novi koncept u JavaScriptu i trebate brzo stvoriti podržavajući HTML i CSS.
Razvijajte se pomoću CodePena za bolje iskustvo
CodePen je izvrstan alat za web programere, a polje se neprestano povećava. JavaScript je izvrstan jezik za učenje u budućnosti u razvoju weba.
prijenosno računalo povezano na WiFi, ali nema pristup internetu Windows 10
Postoje neki izvrsni vodiči i tečajevi dostupni za ljude koji žele započeti s JavaScriptom, a CodePen je izvrsno okruženje za testiranje vaših novih vještina.
Udio Udio Cvrkut E -pošta 8 najboljih web stranica za besplatno preuzimanje audioknjigaZvučne knjige izvrstan su izvor zabave i mnogo ih je lakše probaviti. Evo osam najboljih web stranica na kojima ih možete besplatno preuzeti.
Pročitajte Dalje Povezane teme- Programiranje
- HTML
- Web razvoj
- JavaScript
- CSS
Ian Buckley je slobodni novinar, glazbenik, izvođač i video producent koji živi u Berlinu, Njemačka. Kad ne piše ili je na pozornici, petlja s DIY elektronikom ili kodom u nadi da će postati ludi znanstvenik.
Više od Iana BuckleyjaPretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu