Home-theater-designers
Ang pagsisimula sa pag-unlad ng web ng JavaScript ay maaaring maging isang nakakainis na proseso, ngunit may mga tool doon na ginagawang mas madali.
CodePen.io ay isang in-browser coding na kapaligiran na dinisenyo para sa parehong pag-aaral sa code at upang mabilis na mga ideya ng prototype na may kaunting abala.
Sa artikulong ito, tinitingnan namin ang ilan sa mga tampok ng site at kung paano ka nila matutulungan na maging isang mas mahusay na programmer.
Ano ang CodePen?
Nagbibigay ang CodePen ng isang bagay na tinatawag na a panulat , na binubuo ng tatlong magkakaibang mga bintana para sa HTML, CSS, at JavaScript, kasama ang isang pane ng preview na nag-a-update nang real-time habang nagta-type ka.
Habang madalas itong ginagamit para sa mga developer ng web upang maipakita ang mga ideya para sa mga website, ito rin ay isang magandang lugar upang malaman ang mga pangunahing kaalaman sa pag-unlad ng web sa harap. Narito ang pinaka-kapansin-pansin na mga tampok na kailangan mong malaman kapag gumagamit ng CodePen.
1. Mga nagpapatuloy
Ang mga preprocessor ay binibigyang kahulugan o naipon ng mga wika na idinisenyo upang gawing simple ang pag-coding. Maaari silang magdagdag ng mga tampok sa isang wika para sa kaginhawaan, at gawing mas madaling basahin ang code. Sa pag-unlad ng web, isang kumbinasyon ng mga preprocessor para sa HTML, CSS, at JavaScript ang ginagamit upang lumikha ng malinis na code nang mabilis.
Kung natututo ka ng pagbuo ng web at nais na subukan ang iba't ibang mga preprocessor, pinapayagan ka ng CodePen na ilipat ang mga preprocessor nang mabilis, at tingnan ang code na pinagsasama-sama nito sa real time. Ang bawat isa sa tatlong mga pane sa CodePen app ay may dropdown na menu sa kanang itaas. Pumili Tingnan ang Compiled HTML / CSS / JS upang makita kung paano bibigyan ng kahulugan ang code.
Sa panulat na ito, lumikha kami ng isang simpleng site na ginagamit Haml at Sass upang mag-istilo ng ilang header text. Pumipili Tingnan ang Compiled ipinapakita ang karaniwang HTML at CSS. Sa halimbawang ito ang pagkakaiba ay minimal. Habang natututo ng isang bagong wika, gayunpaman, maaaring maging kapaki-pakinabang upang makita kung paano ang preprocessed na code ay mukhang isang beses na naipon.
2. Panlabas na Yaman
Sa tabi ng katutubong suporta para sa mga preprocessor, sinusuportahan ng CodePen ang mga panlabas na script. Ginagawa nitong perpektong lugar upang makakuha ng karanasan sa mga aklatan para sa iyong mga personal na proyekto, o upang magsipilyo sa mga tanyag na aklatan ng web app tulad ng React.
Upang magdagdag ng isang panlabas na library, buksan ang Mga setting pane sa iyong panulat, at magtungo sa tab na JavaScript. Mayroong dalawang paraan upang magdagdag ng mga mapagkukunan, alinman sa pamamagitan ng manu-manong pagdaragdag ng mapagkukunang URL, o sa pamamagitan ng paghahanap.
Ginamit namin ang tampok na ito sa aming artikulo na sumasaklaw web animasyon kasama ang mo.js , kasama ang preprocessing ng Babel.
Tingnan ang Panulat Halimbawa ng Mojs MUO ni Ian ( @Bardoctorus ) sa CodePen.
Oo, maaaring mai-embed ang mga panulat ng CodePen! Sige at mag-click sa preview pane sa itaas upang makita ang mga resulta ng tutorial ng Mo.js!
Ang ibang mga panulat ay maaaring mai-import tulad ng mga panlabas na aklatan. Nangangahulugan ito na maaari kang kumuha ng mga elemento mula sa dating nakasulat na mga panulat upang magamit tulad ng mga module sa iyong mga bagong panulat. Ang gumagamit ng CodePen na si Adam Simpleng Poll ang pen ay isang magandang halimbawa nito.
3. Mga Template
Kapag natututo ka ng mga bagong konsepto o sumusubok ng mga bagong ideya, madalas kang gumagamit ng mga katulad na sangkap at muling ibabalik ang parehong mga hakbang sa pagsisimula. Pinapayagan ng CodePen ang paglikha ng mga template pens na maaaring putulin ang pag-uulit, at hayaan kang diretso sa punto.
Upang lumikha ng isang template, magbukas ng bagong panulat, gawin ang iyong mga pagbabago, at piliin ang Template slider sa menu ng mga setting.
https://vimeo.com/221428690
Hanggang kamakailan lamang, ang mga libreng gumagamit ay makakagawa lamang ng tatlong mga template, ngunit ngayon lahat ng mga gumagamit ay maaaring magkaroon ng maraming mga template sa kanilang account ayon sa gusto nila. Perpekto para sa pagsisimula ng isang bagong ideya na may minimum na pagkaantala!
4. Pakikipagtulungan sa Fashion
Ang kakayahang makipagtulungan at magturo sa CodePen ay maaaring ang pinakamalaking asset. Mayroon nang isang kayamanan ng mahusay na mga tool sa pakikipagtulungan para sa mga programmer, ngunit ang diskarte ng CodePen ay simple at madaling maunawaan.
Ang mga gumagamit ng Pro ng CodePen ay maaaring lumikha ng isang bagong panulat, at buksan ito sa pakikipagtulungan sa ilalim ng Baguhin ang Tingin menu Binabago nito ang link ng panulat sa isang maibabahaging paanyaya na tumatanggap ng isang pag-scale ng bilang ng mga tao depende sa iyong plano sa CodePen Pro.
kung saan makahanap ng ibinebenta na mga tuta
Sa pagkakataong ito, nagsulat ako ng HTML habang na-update ng isang kaibigan ang CSS sa real-time, na may isang may label na cursor na kinilala kung saan sila nagtatrabaho.
Ang sinumang may link ay maaaring sumali at magamit ang in-browser chat function, hindi alintana kung sila ay isang pro gumagamit o kahit na mayroong isang CodePen account. Ang ibinigay na autosave ay naka-off lamang sa may-ari ng panulat ang makakapag-save ng anumang mga pagbabago, ginagawa itong isang ligtas na paraan upang buksan ang iyong code sa iba nang walang peligro.
Ang bukas na likas na katangian ng mode na ito ay kapaki-pakinabang para sa mga nagsisimula dahil maaari mong anyayahan ang halos sinuman sa iyong panulat upang gabayan ka sa isang mahirap na konsepto. Ito rin ay isang madaling gamiting mode upang malaman ang iyong paraan sa paligid dahil ito ay perpekto para sa pakikipanayam sa mga potensyal na empleyado, at mayroon na ginamit nang propesyonal sa ganitong paraan !
5. Mode ng Propesor
Pinapayagan ng mode na Propesor ang isang gumagamit ng Pro na mag-host ng isang silid kung saan maaari lamang nilang mai-edit ang code. Sa pagitan ng 10-100 mga gumagamit ay maaaring manuod at makipag-chat depende sa Pro plan ng host.
Pinapayagan ng mode na Propesor ang kakayahang umangkop sa pagitan ng pag-aaral sa silid aralan at pag-aaral ng distansya, o isang kumbinasyon ng dalawa. Ang paggamit ng mode na Propesor ay magbibigay-daan sa mga tao sa likuran ng klase na magkaroon ng parehong karanasan ng mga nasa harap, at magpakita ang guro ng mga bugkey na mag-a-update nang real time.
6. Mode ng Pagtatanghal
Ang mode ng pagtatanghal ay dinisenyo, hindi nakakagulat, na may ipinapakitang code sa isip. Nagpapakita ang app sa isang pinasimple na view, na idinisenyo upang gumana sa mga overhead projector. Ang CodePen ay na-optimize ang Presentation mode para magamit sa mas mababang bilis ng koneksyon sa internet at mahina na hardware.
Ang mga matalinong mambabasa ay maaaring napagtanto na ang libreng bersyon ng CodePen ay magbibigay ng tiyak na pagpapaandar na ito, kahit na ang Pro mode ay may ilang mga kapaki-pakinabang na tampok. Ang layout, laki ng font, at mga tema ay maaaring mabilis na mabago nang mabilis upang umangkop sa halos anumang setting, at ang pagpapakita ng link sa panulat ay magdadala ng isang laki ng jumbo na pinaikling URL na ginagawang mas madali ang pagbabahagi ng proyekto.
Ang mga maliliit na pagbabago na ito, kasama ang kakayahang sukatin ang window ng preview upang magkasya sa anumang ipinapakita mo, gawing perpekto ang mode ng pagtatanghal para sa parehong mga guro, at mga developer na nagpapakita ng mga ideya sa mga kasamahan. Ang presentasyon mode ay isang malinis na pagtingin din, at simpleng paraan upang maipakita ang code kung nakita mo ang iyong sarili na nakikipanayam para sa isang posisyon sa pagprograma.
7. Mga pattern
Ang paghahanap ng inspirasyon ay ginagawang mas madali sa mga koleksyon ng CodePen ng Mga pattern ng Disenyo .
Ang bawat kategorya ay isang koleksyon ng halimbawang code na ibinigay ng mga gumagamit ng CodePen para sa mga tiyak na gawain. Naghahanap ka ba ng isang paraan upang lumikha ng mga dynamic na pindutan para sa iyong site? Mga nagkakasunod na menu? Mayroong isang kayamanan ng mga kategorya upang magkasya halos anumang halimbawa.
Ang mga pattern na ito ay din isang mahusay na paraan upang malaman kung paano gumana ang mga interactive na pindutan, at ang iba't ibang mga paraan na maaaring gumana ang mga Dynamic na interface ng gumagamit.
8. Emmet
Emmet , na dating kilala bilang Zen Coding, ay malawak na itinuturing bilang ang pinakamalaking oras saver para sa pag-unlad ng HTML at CSS. Ang plugin ay tumatagal ng ilan sa mga code na nakita mo ang iyong sarili sa pagsulat ng maraming at convert ang mga ito sa simpleng mga shortcut.
Ang nakikita itong pagkilos ay mas mahusay kaysa sa ipaliwanag ito, kaya gawin ang karaniwang pag-set up para sa isang dokumento na HTML:
Ang pagdaragdag nito sa bawat dokumento ng HTML ay nabawasan sa dalawang pagkilos. Paggamit ng Emmet, uri ! at pindutin ang Tab susi Magic!
Ang Emmet ay aktibo bilang pamantayan sa CodePen at lalong kapaki-pakinabang kung sinusubukan mong malaman ang isang bagong konsepto sa JavaScript at kailangang lumikha ng sumusuporta sa HTML at CSS.
Bumuo Sa CodePen para sa isang Mas Mahusay na Karanasan
Ang CodePen ay isang mahusay na tool para sa mga web developer, at ang patlang ay patuloy na lumalaki. Ang JavaScript ay isang mahusay na wika upang malaman para sa hinaharap sa pag-unlad ng web.
kung paano magtakda ng isang gif bilang iyong background
Mayroong ilang magagaling na mga tutorial at kurso na magagamit para sa mga taong nais na magsimula sa JavaScript, at ang CodePen ay isang mahusay na kapaligiran upang subukan ang iyong mga bagong kasanayan.
Magbahagi Magbahagi Mag-tweet Email Ang 8 Pinakamahusay na Mga Website na Mag-download ng Mga Audiobook nang LibreAng Audiobooks ay isang mahusay na mapagkukunan ng libangan, at mas madaling matunaw. Narito ang walong pinakamahusay na website kung saan maaari mong i-download ang mga ito nang libre.
Basahin Susunod Mga Kaugnay na Paksa- Programming
- HTML
- Pag-unlad sa Web
- JavaScript
- CSS
Si Ian Buckley ay isang freelance journalist, musikero, tagapalabas at tagagawa ng video na naninirahan sa Berlin, Germany. Kapag hindi siya nagsusulat o nasa entablado, nakikipag-usap siya sa mga elektronikong DIY o code sa pag-asang maging isang baliw na siyentista.
Higit pa Mula kay Ian BuckleyMag-subscribe sa aming newsletter
Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe