Nilalaman
- 01. Galugarin ang isang bagong bagay gamit ang Mga Paksa
- 02. Mas mabilis na prototype na may mga template
- 03. Magsimula ng isang koleksyon
- 04. Pagbutihin ang kahusayan sa mga preprocessor
- 05. Galugarin ang pinaka-cool na bagong tampok ng CodePen: Mga Proyekto
- 06. I-on ang telly
- 07. Yakapin ang diwa ng pamayanan
- 08. Dumalo sa isang meetup IRL
- 09. Mag-upgrade sa Pro
- 10. Isawsaw sa balon ng inspirasyon
Ang CodePen ay isang killer toolkit para sa mabilis na prototyping, na may isang nakasisigla at sumusuporta na komunidad ng mga nag-aambag. Ito ay naging isa sa mga paboritong tool sa disenyo ng web ng industriya sa pamamagitan ng pag-aalok ng walang abala na pag-ulit ng malikhaing code, tinanggal ang sakit ng ulo ng pagbuo ng mga sariwang kapaligiran sa pag-unlad, at pinapagana ang mga gumagamit na madaling talakayin ang mga napakaraming konsepto ng frontend na mula sa kakatwa at nakakatawa sa praktikal at paglawak. -siya na
Sa artikulong ito, pinagsama namin ang 10 nangungunang mga tip para makakuha ng higit pa mula sa paboritong palaruan sa pag-coding ng industriya ng web - mababago nito kung paano mo ginagamit ang CodePen magpakailanman. Kung pinasisigla ka nitong maging malikhain, baka gusto mo ring suriin ang aming pag-ikot ng mga halimbawa ng animasyon sa CSS, o ang pinaka-kapanapanabik na mga proyektong bukas na mapagkukunan sa web.
Nais mong gawing mas maraming problema ang mga bagay? Buuin ang iyong site gamit ang isang madaling tagabuo ng website, at makakuha ng isang napaka-kapaki-pakinabang na serbisyo sa web hosting.
01. Galugarin ang isang bagong bagay gamit ang Mga Paksa
Ang Mga Paksa sa CodePen ay isang bagong tampok na hinimok ng pamayanan na inaalok sa mga gumagamit ng lahat ng antas, at ang mga ito ay mahusay na paraan upang magtakda tungkol sa paggalugad ng mga bagong balangkas, Mga pattern ng UI o JS aklatan. Sa pagbubukas ng pahina ng Mga Paksa, matutugunan ka ng maraming mga pagpipilian, na-filter ayon sa kategorya at kahit na sa pamamagitan ng mga subcategory. Kapag tinitingnan ang isang kategorya ng paksa, halimbawa Vue.js, natutugunan kami ng isang pangkalahatang-ideya ng screen na may maraming mga pagpipilian.
Kailangan mo ng isang template ng starter upang matulungan na maitaguyod ang sangkap ng Vue? Narito ang isang listahan ng mga tanyag na bahagi, at isang pindutan na 'Bagong Panulat mula sa Template' upang matulungan kaming makapagsimula. Nais mo bang makita ang ilang dalubhasang na-curate na mga halimbawa ng balangkas sa pagkilos? Mag-filter pa sa 'Tampok na Mga Pens ng Vue' at natutugunan ka ng mga nakasisiglang gawa ng magkakaparehong mga framework master at novice.Habang nagba-browse sa mga pangkalahatang-ideya sa Paksa, inaalok kami ng paulit-ulit na mga link sa mga opisyal na site, balangkas o dokumentasyon at gabay ng library, at ang pangunahing pagkakaroon ng GitHub ng proyekto.
02. Mas mabilis na prototype na may mga template
Ang bawat developer sa ilang mga punto ay malamang na nakaramdam ng totoong sakit kapag nagse-set up ng isang lokal na kapaligiran sa pag-unlad, hindi mahalaga ang stack; kahit na ang isang pag-setup ng boilerplate ay maaaring mangailangan ng mas maraming oras kaysa sa isa ay naghahanap upang mamuhunan upang lumikha at subukan ang isang bagay tulad ng ilang isumite na mga prototype ng pindutan. Sa CodePen, nandiyan ka na - handa nang handa ang isang IDE para madali mong matapon ang mga nilalaman ng iyong malikhaing pag-iisip.
Ngunit sa pamamagitan ng paggamit ng tampok na template ng CodePen, mas madali na ngayon upang paikutin ang eksaktong kapaligiran na kailangan mo upang matapos ang trabaho. Ang isang template ay maaaring maglaman ng anumang bilang ng mga paunang natukoy na panlabas na script (maaari kang magsama ng isa pang panulat bilang isang panlabas na pag-aari), papayagan kang i-preset ang iyong ginustong preprocessor ng HTML / CSS / JS (na kung saan ay maayos na awtomatikong mag-compile on the fly), at mapapanatili pa anumang umiiral na code na nangangalaga sa iyo upang mapanatili.
Napakadali upang tukuyin ang isang Panulat bilang isang template - na binuksan ang iyong Panulat, i-mash ang pindutan ng Mga Setting, mag-click hanggang sa Mga Detalye ng Panulat, at mula doon makikita mo ang isang maayos na maliit na toggle na nag-aalok ng pagpipilian upang i-save bilang isang Regular Pen o isang Template.
Kaya paano ito naiiba mula sa forking isang mayroon nang Panulat? Ang pagtatakda ng isang Panulat bilang isang template ay magbibigay-daan sa iyo upang piliin agad ang pag-set up na ito sa pag-opt upang lumikha ng isang bagong Panulat, na hindi na kailangang maghanap sa pamamagitan ng iyong nakaraang mga panulat upang tinidor at baguhin ang mga ito, hindi na kailangang muling i-import ang lahat ng iyong mga script na pinili mula sa ground up, at hindi na kailangang muling piliin ang lahat ng mga pagpipilian sa syntax at setting na maaaring gusto mo para sa naibigay na konsepto. Bilang karagdagan, ang pagsisimula ng isang bagong Panulat mula sa isang template ay tinatrato ang iyong Panulat bilang isang ganap na bagong paglikha, samantalang ang forking ay lilikha ng isang panulat na nagli-link pabalik sa orihinal, na may isang natatanging kasaysayan sa halip na isang blangkong slate. Ang pag-upgrade sa isang CodePen Pro account ay nag-aalok sa iyo ng isang hindi kapani-paniwalang mahalagang hanay ng mga pinalawak na tampok, ngunit kahit na ang mga libreng account ng gumagamit ay papayagan para sa walang limitasyong pagbuo ng template.
03. Magsimula ng isang koleksyon
Kung nasisiyahan ka sa pagkakaroon ng kakayahang maghanap ng mga mapagkukunan gamit ang Mga Paksa ng CodePen ngunit nais mong mai-curate ang iyong sarili, ang Mga Koleksyon ang sagot na iyong hinahanap. Ang pagdaragdag ng Panulat sa isang koleksyon ay kasing simple ng pagpili ng drop-down na 'Mga Koleksyon' mula sa pagtingin sa pag-edit ng anumang Pen, kung saan maaari mong tukuyin ang isang Koleksyon o lumikha ng bago. Muli, maaari itong maging Panulat ng sinuman (at kung ikaw ay isang gumagamit ng Pro, maaari mong itakda ang iyong Koleksyon sa pribado). Ang kagandahan ng Mga Koleksyon ay ang kakayahang tingnan ang lahat ng iyong Mga Koleksyon sa isang lugar na may matapang na pagpipilian ng pag-filter, pag-uuri at paghahanap - isang mahusay na paraan upang tukuyin ang mga mapagkukunan sa pamamagitan ng stack o balangkas, panatilihin ang isang tumatakbo na listahan ng inspirasyon, o mga cluster Pens ng mga konsepto ng UI. Interesado sa pampublikong Koleksyon ng ibang gumagamit? Maaari ka ring mag-subscribe sa Koleksyon sa pamamagitan ng RSS upang manatili sa tuktok ng mga pag-update.
04. Pagbutihin ang kahusayan sa mga preprocessor
Harapin natin ito, karamihan sa atin ay gumugugol ng higit sa sapat na oras sa likod ng mga screen kaysa sa malamang na dapat nating gawin. Marami sa atin ang labis na nagaganyak sa mga praktikal na pagsisikap na nauugnay sa karera mahirap makahanap ng oras upang bumuo ng isang silid-aklatan ng mga walang silbi na switch ng toggle o mga paglipat ng pahina ng WebGL, at habang tinatanggal ng CodePen ang karaniwang oras ng pag-set up at pinapayagan kaming dumiretso sa trabaho, maaaring palaging mapabuti. Dito magagamit ang mga katutubong preprocessor ng CodePen.
Halimbawa: nais na bumuo ng isang grid ng ilang daang mga HTML cell, ang mga istilo ng bawat isa nang random na na-update sa pamamagitan ng JavaScript? Maaari kang pumunta tungkol sa pagkopya at pag-paste ng div pagkatapos ng div, sigurado. At sa pagtatapos nito ang lahat ng window ng editor ay halos imposibleng mag-navigate.
Narito kung saan lumiwanag ang HAML, Pug o Jade: mula sa window ng mga setting ng Pen, pumili ng isang preprocessor na HTML nang madali, sumulat ng isang simpleng loop, at bumuo ng mga elementong ito sa halos dalawang linya. Hindi sigurado kung saan magsisimula? Mayroong Panulat para doon: ang isang paghahanap ng 'HAML Loop' sa CodePen ay magbubunga ng isang mahusay na bilang ng mga boilerplate Pens na magbibigay sa iyo ng isang malalim na pag-unawa sa kung paano mahusay na mabuo ang iyong mga elemento ng pahina.
Sa mga preprocessor ng CSS tulad ng LESS at Sass, makakabuo kami ng mga mix at paunang natukoy na pag-andar na tumatanggap ng maraming mga argumento, ginagawa silang isang perpektong karagdagan sa iyong mga template ng CodePen at pinapayagan kang magsulat kung hindi man kumplikadong mga istilo na may gaanong kadalian. Marahil ay nagtatayo ka ng mga elemento ng UI para sa isang mas malaking proyekto - maaari mo na ngayong tukuyin ang lahat ng iyong mga kulay, typeface at variable ng spacing na may malinaw at maigsi na mga kombensyon sa pagpapangalan; at muling kasama ang mga ito sa isang template ng CodePen ay nagbibigay-daan sa iyo upang umulit na may halos zero na pag-setup.
Masisiyahan sa kahusayan ng CoffeeScript, TypeScript o Babel? Ang CodePen ay maaaring makabuo ng iyong JS preprocessor na pagpipilian din. Kung sa anumang oras kung nais mong sumilip sa ilalim ng hood at makita kung ano ang hitsura ng iyong pinagsamang code, maaari mo lamang piliin ang 'View Compiled' mula sa iyong pane sa pag-edit ng code upang mapagpasyahan kung ano ang magiging hitsura ng iyong huling output - at dapat mong; ang pagtatrabaho sa mga loop at advanced na pag-andar ay maaaring gumawa ng pag-set up at pag-ulit na hindi kapani-paniwalang mabilis, ngunit maaari ring mapukol ang pagdura ng isang mahusay na halaga ng hindi nagamit na syntax. Kung sa anumang oras nilalayon mong gamitin ang mga nilikha na ito sa paggawa, tiyaking tingnan ang lahat ng iyong code na kumpleto na naipon, at gumawa ng anumang mga pagbawas o pagsasaayos na kinakailangan para sa pagganap.
05. Galugarin ang pinaka-cool na bagong tampok ng CodePen: Mga Proyekto
Pa rin ng isang medyo sariwang tampok, ang Mga Proyekto ng CodePen ay isang uri ng isang hindi kilalang bayani - Ang orihinal na three-pane na HTML / CSS / JS na pag-set up ng CodePen ay pinapayagan na para sa pasadyang panlabas na kasama at pagsasama-sama ng real-time na preprocessor. Kaya't ano ang nakapagpapasikat sa Mga Proyekto? Bilang karagdagan sa karaniwang mga pahina sa pag-edit, nagagawa mong magdagdag ng iyong sariling mga lokal na file - nangangahulugang maaari mong i-laman ang iyong sariling mga istraktura ng file tulad ng gagawin mo sa isang lokal na kapaligiran, lumilikha ng mga site na maraming pahina o mga application sa isang solong, may sariling kapaligiran nang hindi na kailangang i-set up ang mga kumplikadong pagsasaayos ng Gulp o Webpack, halimbawa.
Ginagawang madali ng mga proyekto ng CodePen na i-drag at i-drop ang iyong mga mayroon nang mga file (siguraduhin na itatago mo ang mga ito nang ligtas sa cloud storage), at maayos na mapanatili ang iyong istraktura o papayagan kang gumawa ng mga pagbabago mula sa loob ng editor. At kung ikaw ay isang gumagamit ng antas ng Pro, medyo tumatamis ito: kapag handa ka nang i-deploy ang iyong trabaho, maaari mong i-deploy ang kapaligiran na iyong pinili sa isang solong pag-click.
06. I-on ang telly
Nakatago sa gitna ng lahat ng mga makapangyarihang, praktikal na tool na inaalok ng CodePen ay isang kakatwa pagkagambala na kilala bilang CodePen TV. Ang CodePen TV ay isang randomized sampling ng Picks Pens na unti-unting umiikot sa isang screen na tulad ng saver mode. Marahil ay wala kang pakialam na tumingin sa isang sapalarang seleksyon ng Mga Pens at nais na pangalagaan ang iyong sariling 'channel' ng Mga Pens na nagtatampok ng mga pusa - maaari mo ring ilunsad ang isang CodePen TV channel batay sa anumang Koleksyon ng CodePen (kabilang ang Mga Koleksyon na nilikha ng ibang mga gumagamit). At kung ikaw ay isang gumagamit ng Mac, maaari mo ring gamitin ang CodePen TV bilang isang standalone na OSX na katutubong screensaver!
07. Yakapin ang diwa ng pamayanan
Ang mga komunidad sa pag-coding ay kilalang-kilala sa pagiging eksklusibo, lumilikha ng tunay na lugar ng pag-aanak para sa impostor syndrome na maaaring makaramdam na hindi mapasok at hindi kanais-nais sa kahit na ang pinaka-bihasang mga tagadisenyo at developer.
Dito nakikilala ang CodePen - at kung bakit ang pagiging isang aktibong miyembro ng pamayanan ay nag-aalok ng mga ganitong benepisyo. Makita ang isang Panulat na nagpapalitaw ng kagalakan? Mash ang pindutan ng puso na iyon, at ipakita ang isa pang gumagamit ng kaunting pag-ibig. Maaari kang magpatuloy at i-click ito hanggang sa tatlong beses kung talagang mahal mo ang gawaing kanilang nagawa.
May inspirasyon sa pakiramdam, o marahil ay nag-iisip ng isang kahaliling pagkuha sa Panulat ng ibang gumagamit? Sa isang solong pag-click, maaari kang tinidor ng isang Panulat, at pagkatapos ay ibigay ang iyong sariling mga malikhaing pamumulaklak, o kahit na refactor ito ayon sa nakikita mong akma.
Bilang halili, kung nakakakita ka ng isang mas mahusay na diskarte, o nakakita ka ng pagkakamali sa code ng isang gumagamit, isaalang-alang na magbigay ng puna sa Panulat na may anumang nakabubuting mga mungkahi na mayroon ka. Habang ang karamihan sa mga seksyon ng komento sa mga site na tulad nito ay karaniwang isang hindi mapigil na sunud-sunuran na dumpster ng pagiging negatibo, ang pamayanan ay karaniwang gumagawa ng isang mahusay na trabaho ng self-policing, naghihikayat sa pagiging positibo, at nagpapatibay sa iba.
Marahil ang pinakamahusay na paraan upang sumisid sa pamayanan ay sa pamamagitan ng pagsali sa chat ng CodePen's Spectrum - isang bukas na forum para sa pagbabahagi ng trabaho, paghingi ng payo, at pakikipagtulungan ng malikhaing. Ang isang halimbawa ay Pass the Pen, isang konsepto mula sa gumagamit ng CodePen na si Kristopher van Sant, kung saan nilikha ang Panulat, at pagkatapos ay inulit ng mga gumagamit na nais na magbigay.
Nag-aalok din ang CodePen ng mga lingguhang senyas na hamon upang mapanatili kang malikhaing nakatuon. Maaaring hindi mo maramdaman na ang iyong trabaho ay karapat-dapat ibahagi, ngunit malamang na mali ka. Dumaan sa chat ng Spectrum ng CodePen at ipakita kung ano ang iyong pinagtatrabahuhan gaano man kalaki o maliit. Malugod kang magulat kung gaano ka-suporta at kapaki-pakinabang ang average na gumagamit ng CodePen, at marahil ay matutunan ang ilang iba't ibang mga bagay sa daan.
08. Dumalo sa isang meetup IRL
Sa core ng kung ano ang gumagawa ng CodePen isang mahalagang tool para sa mga developer ng frontend ay ang komunidad. Ngunit kung minsan kapaki-pakinabang na alisin ang iyong mga kasanayan sa offscreen - at walang mas mahusay na paraan kaysa sa pag-host o pagdalo sa isang pagkikita ng CodePen. Ang CodePen ay kaibig-ibig na magbibigay sa iyo ng swag para sa mga dumalo, at sa tulong ng kanilang mga sponsor, maaari ka rin nilang tulungan na ma-secure ang bayad para sa pagkain at inumin - nasa iyo ang lokasyon at petsa. Ang mga meetup ay nagbibigay ng isang mahusay na pagkakataon upang ipares ang programa, sa publiko manghingi ng mga diskarte o konsepto, kumpletuhin ang isang hamon sa koponan o mas mahusay na makilala kung ano ang nag-uudyok sa iyong mga kapwa coder. O baka nandiyan ka lang para sa libreng pizza. Pinatawad ka namin
09. Mag-upgrade sa Pro
Ang lalim ng pag-andar ng CodePen ay nag-aalok ng walang bayad ay talagang kapansin-pansin, partikular na isinasaalang-alang ang pasanin ng libu-libong mga gumagamit nang sabay-sabay sa pag-cobbling ng ilang hindi kapani-paniwalang mga nilikha ng server na masinsinang. Sa labas ng kahon, ito ay isang mahusay na bilugan na karanasan - iyon ay hanggang sa makagat mo mula sa CodePen Pro. Kaya't bakit tumalon? Habang nagdadala ito ng maraming kapaki-pakinabang na pinalawak na tampok, ang isang tampok na nag-iisa ay ginagawang sulit: ang kakayahang i-save ang Pens nang pribado.
Para sa mga gumagamit na hindi Pro, ang bawat Panulat na nilikha ay na-index sa publiko, na madalas ay mabuti lang. Ngunit paano kung nais kong mag-unod ng kaunting pag-unlad ng UI para sa isang proyekto na client na pa-ilulunsad? Dito nagmumula ang kakayahang makatipid nang pribado - 'pribado' ay hindi nakatago, maaari mo pa ring ibahagi ang mga direktang link sa iyong panulat sa iyong panloob na koponan, halimbawa. Ngunit ang iyong panulat ay hindi matuklasan. Marahil ay kailangan mo lamang ng isang kapaligiran upang subukan ang mga bagong konsepto, o mayroon kang limitadong oras upang magtrabaho sa isang paglikha at balak na bumalik sa paglaon - dito nagagawa ang pagkakaiba sa mga pagpipilian sa privacy.
Kaya ano pa ang isinasama ng isang Pro account? Pag-host ng Asset! Sa loob ng isang 2Mb bawat limitasyon sa file, magho-host ang CodePen ng mga assets ng iyong Pen, nangangahulugang hindi na kailangang mag-upload ng mga imahe o script sa isang panlabas na host, at pinapayagan ang higit na kakayahang umangkop kapag nagtatrabaho sa mga balangkas na may mahigpit na mga pagtutukoy na cross-origin.
Nag-aalok ang mga pro account ng pag-access sa Live View - pinapayagan ang mga gumagamit na makita ang kanilang mga pag-edit na na-reload nang on-the-fly sa maraming mga bintana - Collab Mode - na nagbibigay-daan para sa live na programa sa pares at nagsasama ng isang madaling gamiting opsyon sa chat - at Propesor na Mode, na magpapalabas ng iyong mga pag-update ng code sa tabi ng live na preview ng Pen sa real time, perpekto para sa mga nagtuturo ng code o mga masochist sa conference-circuit. Nag-aalok din ang CodePen Pro ng kakayahang i-edit ang iyong sariling pahina ng profile, kasama ang pasadyang CSS at JS, at isang opsyonal na Pen embed bilang header ng pahina - dahil ang pag-alam sa kanilang madla ay nangangahulugang pag-alam sa mga developer ng frontend na nagsusumite upang ipasadya, ipasadya, ipasadya.
10. Isawsaw sa balon ng inspirasyon
Ang isang sariwang Panulat ay tulad ng isang blangko na canvas, ngunit kung minsan ay tatamaan ang malikhaing bloke, at ang canvas na iyon ay tatagal ng isang mahabang tingin sa iyo ng Nietzschean. Pakiramdam na hindi hinihimok? Tingnan ang pinakabagong Hamon ng CodePen o sumali sa isang pangkat ng hamon sa pag-coding tulad ng Codevember o DailyUI. Siguro magtungo sa Dribbble at muling likhain (o baka buhayin) ang isang paglalarawan sa CSS - siguraduhing magbigay ng kredito kung saan nararapat (ang pagdaragdag ng mga backlink sa mga pampublikong detalye ng iyong Pen ay ang ginustong pamamaraan.)
Ito ay maaaring tulad ng ehersisyo sa kawalang-saysay, at lahat tayo ay naging pribado sa mga argumento laban sa pag-coding sa libreng oras ng isang tao, ngunit may isa pang hindi gaanong kinikilala na kabaligtaran sa (publiko) na malikhaing pag-coding sa CodePen: ang mga potensyal na tagapag-empleyo at recruiter ay talagang gumugugol ng oras sa paglilibot sa site para sa mga taong nagpapakita ng malikhaing ambisyon. Nagtayo ng ilang mga bagay na partikular mong ipinagmamalaki? Tiyaking isama ang mga ito sa iyong portfolio.
Ginagawang madali ng CodePen ang pag-embed, na may maraming mga pagpipilian sa pagpapakita, at paggamit ng kanilang bagong tampok na prefill embed, maaari kang magdagdag ng isang window ng editor ng CodePen na may nai-render na code nang direkta mula sa codebase ng iyong portfolio site.
Ang artikulong ito ay orihinal na na-publish sa magazine ng disenyo ng malikhaing web Taga-disenyo ng web.Bumili ng isyu 290.
