Home-theater-designers
Začetek spletnega razvoja JavaScript je lahko frustrirajoč proces, vendar obstajajo orodja, ki to olajšajo.
CodePen.io je okolje za kodiranje v brskalniku, zasnovano tako za učenje kodiranja kot za hitro prototipiranje idej z minimalnimi težavami.
V tem članku obravnavamo nekatere funkcije spletnega mesta in kako vam lahko pomagajo postati boljši programer.
Kaj je CodePen?
CodePen ponuja nekaj, kar se imenuje a pisalo , ki vsebuje tri različna okna za HTML, CSS in JavaScript ter podokno za predogled, ki se med tipkanjem posodablja v realnem času.
Čeprav se spletni razvijalci pogosto uporabljajo za predstavitev idej za spletna mesta, je tudi odličen kraj za spoznavanje osnov spletnega razvoja. Tu so najpomembnejše funkcije, ki jih morate poznati pri uporabi CodePen.
1. Predprocesorji
Predprocesorji so interpretirani ali prevedeni jeziki, namenjeni poenostavitvi kodiranja. Za udobje lahko jeziku dodajo funkcije in olajšajo branje kode. Pri spletnem razvoju se za hitro ustvarjanje čiste kode uporablja kombinacija predhodnikov za HTML, CSS in JavaScript.
Če se učite spletnega razvoja in želite preizkusiti različne predprocesorje, vam CodePen omogoča, da na hitro preklapljate predprocesorje in si v realnem času ogledate kodo, ki jo sestavi. Vsako od treh podoknov v aplikaciji CodePen ima spustni meni v zgornjem desnem kotu. Izberite Ogled prevedenega HTML/CSS/JS da vidim, kako se bo koda razlagala.
V tem peresniku smo z uporabo ustvarili preprosto spletno mesto Haml in Sass za oblikovanje besedila v glavi. Izbira Ogled sestavljen prikazuje standardne HTML in CSS. V tem primeru je razlika minimalna. Med učenjem novega jezika pa je lahko koristno videti, kako izgleda vnaprej obdelana koda, ko je prevedena.
2. Zunanji viri
Poleg izvorne podpore za predprocesorje CodePen podpira tudi zunanje skripte. Zaradi tega je idealen kraj za praktične izkušnje s knjižnicami za vaše osebne projekte ali za ogled priljubljenih knjižnic spletnih aplikacij, kot je React.
Če želite dodati zunanjo knjižnico, odprite Nastavitve podokno na peresniku in pojdite na zavihek JavaScript. Obstajata dva načina za dodajanje virov: ročno dodajanje URL -ja vira ali iskanje.
To funkcijo smo uporabili v našem članku spletna animacija z mo.js skupaj s predprocesiranjem Babel.
Glej pisalo Primer Mojs MUO avtor Ian ( @Bardoctorus ) na CodePenu.
Da, pisala CodePen lahko vdelate! Pojdite naprej in kliknite zgornje podokno za predogled, če si želite ogledati rezultate vadnice Mo.js!
Druga pisala je mogoče uvoziti podobno kot zunanje knjižnice. To pomeni, da lahko vzamete elemente iz predhodno napisanih peresnikov, da jih uporabite kot module v svojih novih pisalih. Uporabnik CodePen Adam's Preprosta anketa pero je dober primer tega.
3. Predloge
Ko se učite novih konceptov ali preizkušate nove zamisli, pogosto uporabljate podobne komponente in na začetku ponovite iste korake. CodePen omogoča ustvarjanje pisala za predloge, ki lahko izloči ponavljanje, in vam omogoča, da pridete neposredno do bistva.
Če želite ustvariti predlogo, odprite novo pero, vnesite spremembe in izberite datoteko Predloga drsnik v meniju z nastavitvami.
https://vimeo.com/221428690
Do nedavnega so lahko brezplačni uporabniki izdelali le tri predloge, zdaj pa imajo lahko vsi uporabniki v svojem računu toliko predlog, kot si želijo. Odlično za začetek nove ideje z minimalno zamudo!
4. Modno sodelovanje
Sposobnost sodelovanja in poučevanja s CodePenom je lahko njegovo največje bogastvo. Za programerje že obstaja veliko odličnih orodij za sodelovanje, vendar je pristop CodePena preprost in intuitiven.
Profesionalni uporabniki programa CodePen lahko ustvarijo novo pero in ga odprejo za sodelovanje pod Spremeni pogled meni. To spremeni povezavo peresa v vabilo za skupno rabo, ki sprejme obsežno število ljudi, odvisno od vašega načrta CodePen Pro.
kako igrati pokemone na ios 10
V tem primeru sem napisal HTML, medtem ko je prijatelj v realnem času posodobil CSS z označenim kazalcem, kjer so delali.
Vsakdo s povezavo se lahko pridruži in uporablja funkcijo klepeta v brskalniku, ne glede na to, ali je profesionalec ali ima celo račun CodePen. Če je samodejno shranjevanje izključeno, lahko le lastnik peresa shrani vse spremembe, zato je varen način, da svojo kodo odprete drugim brez tveganja.
Odprta narava tega načina je koristna za začetnike, saj lahko skoraj vsakogar povabite v pero, da vas vodi skozi težaven koncept. To je tudi priročen način, da se spoznate, saj je kot nalašč za razgovor z potencialnimi zaposlenimi, in je že na ta način profesionalno uporabljen !
5. Profesorski način
Način profesorja omogoča enemu uporabniku Pro, da gosti sobo, v kateri lahko samo oni urejajo kodo. Od 10 do 100 uporabnikov si lahko ogleda in klepeta, odvisno od načrta Pro gostitelja.
Način Profesor omogoča prilagodljivost med učenjem v razredu in učenjem na daljavo ali kombinacijo obeh. Uporaba načina profesorja bo ljudem na koncu razreda omogočila enake izkušnje kot sprednjim učiteljem, učitelj pa prikazal popravke napak, ki se bodo posodobili v realnem času.
6. Predstavitveni način
Predstavitveni način je nenavadno zasnovan z mislijo na predstavitev kode. Aplikacija se prikaže v poenostavljenem pogledu, zasnovanem za delo s grafoskopi. CodePen je optimiziral način predstavitve za uporabo pri nižjih hitrostih internetnih povezav in šibkejši strojni opremi.
Preudarni bralci so morda že spoznali, da bi brezplačna različica CodePen zagotovila ravno to funkcijo, čeprav ima način Pro nekaj uporabnih funkcij. Postavitev, velikost pisave in teme lahko hitro spreminjate tako, da ustrezajo skoraj vsaki nastavitvi, prikaz povezave do peresa pa prinaša skrajšani URL, ki olajša skupno rabo projekta.
Te majhne spremembe, poleg tega, da lahko okno za predogled prilagodijo vsem, kar pokažete, naredijo način predstavitve tako za učitelje kot razvijalce, ki kolegom predstavljajo ideje. Predstavitveni način je tudi čist in preprost način predstavitve kode, če se pogovarjate za programsko mesto.
7. Vzorci
Iskanje navdiha je z zbirkami CodePen veliko lažje Oblikovalni vzorci .
Vsaka kategorija je zbirka vzorčnih kod, ki jih uporabniki CodePen posredujejo za določena opravila. Iščete način za ustvarjanje dinamičnih gumbov za svojo spletno stran? Meniji za harmoniko? Obstaja veliko kategorij, ki ustrezajo skoraj vsakemu primeru.
Ti vzorci so tudi odličen način za spoznavanje delovanja interaktivnih gumbov in različnih načinov delovanja dinamičnih uporabniških vmesnikov.
8. Emmet
Emmet , prej znan kot Zen Coding, velja za največjega prihranka časa za razvoj HTML in CSS. Vtičnik vzame nekaj kode, ki se vam zdi, da jo veliko pišete, in jih pretvori v preproste bližnjice.
Bolje kot razlagati, da to vidite v akciji, zato vzemite običajno nastavitev za dokument HTML:
Dodajanje tega v vsak dokument HTML je bilo zmanjšano na dve dejanji. Z uporabo Emmeta vnesite ! in udaril po Zavihek ključ. Magija!
Emmet je standardno aktiven v CodePenu in je še posebej uporaben, če se poskušate naučiti novega koncepta v JavaScriptu in morate hitro ustvariti podporni HTML in CSS.
Razvijajte se s CodePenom za boljšo izkušnjo
CodePen je odlično orodje za spletne razvijalce in področje nenehno raste. JavaScript je odličen jezik za učenje v prihodnosti pri spletnem razvoju.
google play store on fire tablični računalnik
Za ljudi, ki želijo začeti uporabljati JavaScript, je na voljo nekaj odličnih vaj in tečajev, CodePen pa je odlično okolje za preizkušanje vaših novih znanj.
Deliti Deliti Cvrkutati E-naslov 8 najboljših spletnih mest za brezplačen prenos zvočnih knjigZvočne knjige so odličen vir zabave in jih je veliko lažje prebaviti. Tu je osem najboljših spletnih mest, kjer jih lahko brezplačno prenesete.
Preberite Naprej Sorodne teme- Programiranje
- HTML
- Spletni razvoj
- JavaScript
- CSS
Ian Buckley je samostojni novinar, glasbenik, izvajalec in video producent, ki živi v Berlinu v Nemčiji. Ko ne piše ali na odru, se ukvarja z elektroniko ali kodo DIY v upanju, da bo postal nor znanstvenik.
Več od Iana BuckleyjaNaročite se na naše novice
Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!
Kliknite tukaj, da se naročite