Vsebina
- 01. Raziščite nekaj novega s pomočjo teme
- 02. Hitrejši prototip s predlogami
- 03. Začnite zbiranje
- 04. Izboljšajte učinkovitost predprocesorjev
- 05. Raziščite najbolj novo funkcijo CodePen: Projekti
- 06. Vklopite televizor
- 07. Sprejmite duh skupnosti
- 08. Udeležite se srečanja IRL
- 09. Nadgradite na Pro
- 10. Potopite se v vodnjak navdiha
CodePen je ubijalski pripomoček za hitro izdelavo prototipov, z navdihujočo in podporno skupnostjo sodelavcev. Postalo je eno najljubših orodij za spletno oblikovanje, saj ponuja brez težav ponavljanje kreativne kode, odpravlja glavobole pri ustvarjanju svežih razvojnih okolij in omogoča uporabnikom, da se zlahka lotijo neštetih konceptov frontenda, od muhastih in smešnih do praktičnih in uvajanja. - že.
V tem članku smo zbrali 10 najboljših nasvetov, kako pridobiti več od priljubljenega igrišča za kodiranje v spletni industriji - ti bodo spremenili način uporabe CodePena za vedno. Če vas to navdihuje za ustvarjalnost, si boste morda želeli ogledati tudi naš seznam primerov animacije CSS ali najbolj razburljive odprtokodne projekte na spletu.
Bi radi stvari naredili še bolj brez težav? Zgradite svoje spletno mesto s preprostim graditeljem spletnih strani in pridobite super koristno storitev spletnega gostovanja.
01. Raziščite nekaj novega s pomočjo teme
Teme CodePen so razmeroma nova funkcija, ki jo vodi skupnost in je na voljo uporabnikom na vseh ravneh, in so odličen način za raziskovanje novih okvirov, vzorcev uporabniškega vmesnika ali knjižnic JS. Po odprtju strani Teme vas čaka vrsta možnosti, filtriranih po kategorijah in še podkategorijah. Ko si ogledamo aktualno kategorijo, na primer Vue.js, nas zasledi pregledni zaslon z več možnostmi.
Potrebujete začetno predlogo za pomoč pri izdelavi te komponente Vue? Tu je seznam priljubljenih komponent in čudovit gumb »Novo pero iz predloge«, ki nam pomaga pri začetku. Bi radi videli nekaj strokovno urejenih primerov okvira v akciji? Filtrirajte do možnosti »Featured Vue Pens« in že vas čakajo inspirativna dela mojstrov ogrodja in novincev.Med brskanjem po teh pregledih tem imamo na voljo trajne povezave do uradnih spletnih mest, dokumentacije in vodnikov okvira ali knjižnice ter temeljne prisotnosti projekta GitHub.
02. Hitrejši prototip s predlogami
Vsak razvijalec je v določenem trenutku verjetno čutil resnično bolečino pri vzpostavljanju lokalnega razvojnega okolja, ne glede na sklad; celo postavitev vzorčne plošče lahko zahteva veliko več časa, kot bi si želeli vložiti, da bi ustvarili in preizkusili nekaj podobnega kot nekaj prototipov gumbov za oddajo. S CodePenom ste že tam - IDE je pripravljen na vas, da lahko zlahka odstranite vsebino svojega ustvarjalnega uma.
Toda z uporabo predloge funkcije CodePen je zdaj še lažje zaviti točno tisto okolje, ki ga potrebujete za delo. Predloga lahko vsebuje poljubno število vnaprej določenih zunanjih skriptov (lahko vključite drugo pero kot zunanje sredstvo), omogočila vam bo prednastavitev želenega predprocesorja HTML / CSS / JS (ki bo lepo samodejno sestavljen sproti) in celo ohranila katero koli obstoječo kodo, ki jo želite ohraniti.
Preprosto je določiti pero kot predlogo - z odprtim peresom zmečkajte ta gumb Nastavitve, kliknite na Podrobnosti o peresu in od tam boste videli majhen preklopnik, ki ponuja možnost shranjevanja kot običajni peresnik ali Predloga.
Torej, kako se to razlikuje od vilice obstoječega pisala? Nastavitev pisala kot predloge vam bo omogočila, da to nastavitev izberete takoj, ko se odločite za ustvarjanje novega pisala, pri čemer vam ni treba iskati po prejšnjih pisalih, da jih razkrijete in spremenite, vam ni treba znova uvoziti vseh izbranih skriptov iz ozemljeno in vam ni treba znova izbrati vseh sintaksnih možnosti in nastavitev, ki bi vam bile všeč za dani koncept. Poleg tega zagon novega peresa iz predloge vaše pero obravnava kot popolnoma novo stvaritev, medtem ko bo forking ustvaril pero, ki se bo povezalo nazaj do izvirnika, z različno zgodovino in ne s praznim listom. Nadgradnja na račun CodePen Pro vam ponuja neverjetno dragocen nabor razširjenih funkcij, a tudi brezplačni uporabniški računi bodo omogočili neomejeno generiranje predlog.
03. Začnite zbiranje
Če imate radi možnost iskanja virov s pomočjo tem CodePen, vendar želite, da bi sami izbrali sami, so zbirke odgovor, ki ga iščete. Dodajanje peresa v zbirko je tako preprosto kot izbira spustnega menija »Zbirke« v poljubnem pogledu za urejanje peresa, kjer lahko določite zbirko ali ustvarite novo. Spet je lahko poljubno pero (in če ste uporabnik Pro, lahko svojo zbirko nastavite na zasebno). Lepota zbirk je v tem, da si lahko vse zbirke ogledate na enem mestu z zmogljivimi možnostmi filtriranja, razvrščanja in iskanja - odličen način za določanje virov glede na sklad ali ogrodje, vodenje tekočega seznama navdihov ali združevanje koncev pisala po uporabniškem vmesniku. Vas zanima javna zbirka drugega uporabnika? Na zbirko se lahko celo naročite prek RSS-ja, da ostanete na tekočem s posodobitvami.
04. Izboljšajte učinkovitost predprocesorjev
Priznajmo si, večina od nas preživi več kot dovolj časa za zasloni, kot bi verjetno morala. Mnogi od nas so tako preobremenjeni s praktičnimi prizadevanji, povezanimi s kariero, da je težko najti čas za izgradnjo knjižnice neuporabnih preklopnih stikal ali prehodov strani WebGL, medtem ko CodePen odstrani tipičen čas namestitve in nam omogoča, da začnemo delovati, učinkovitost pa lahko vedno izboljšati. Tu pridejo v poštev izvorni predprocesorji CodePen.
Na primer: želite zgraditi mrežo iz nekaj sto celic HTML, pri čemer se posamezni atributi sloga naključno posodobijo prek JavaScript-a? Seveda lahko kopirate in prilepite div za div. In do konca tega je po celotnem oknu urejevalnika skoraj nemogoče krmariti.
Tukaj svetijo HAML, Pug ali Jade: v oknu z nastavitvami pisala z lahkoto izberite predprocesor HTML, napišite preprosto zanko in ustvarite te elemente v približno dveh vrsticah. Ne veste, kje začeti? Za to obstaja pisalo: iskanje »HAML Loop« na CodePen-u prinese lepo število originalnih pisalov, ki vam dajo le površno razumevanje, kako učinkovito ustvariti elemente strani.
S predprocesorji CSS, kot sta LESS in Sass, lahko sestavimo kombinacije in vnaprej določene funkcije, ki sprejemajo številne argumente, zaradi česar so popoln dodatek k predlogam CodePen in vam omogočajo, da z lahkoto pišete sicer zapletene sloge. Morda gradite elemente uporabniškega vmesnika za večji projekt - zdaj lahko z jasnimi in jedrnatimi pravili poimenovanja določite vse spremenljivke barve, pisave in razmika; in ponovno vključitev teh v predlogo CodePen omogoča ponovitev s skoraj nič nastavitvijo.
Uživate v učinkovitosti CoffeeScript, TypeScript ali Babel? CodePen lahko izvirno prevede tudi vaš izbrani predprocesor JS. Če želite kadar koli pokukati pod pokrov in si ogledati, kako izgleda vaša prevedena koda, lahko v izbranem podoknu za urejanje kode preprosto izberete »Prikaži sestavljeno«, da dobite občutek, kako bo videti vaš končni rezultat - in bi morali; Delo z zankami in naprednimi funkcijami lahko izjemno hitro naredi namestitev in ponovitev, lahko pa tudi izpljune veliko količino neuporabljene skladnje. Če nameravate te kreacije kadar koli uporabiti v proizvodnji, si oglejte vso prevedeno kodo in izvedite kakršna koli zmanjšanja ali prilagoditve, potrebne za delovanje.
05. Raziščite najbolj novo funkcijo CodePen: Projekti
Še vedno nekoliko sveža lastnost, projekti CodePen so nekako neodprt junak - prvotna nastavitev HTML / CSS / JS CodePen s tremi podokni že omogoča zunanje vključitve po meri in sprotno sestavljanje predprocesorja. Torej, kaj Projekte izstopa? Poleg standardnih strani za urejanje lahko dodate svoje lokalne datoteke - kar pomeni, da lahko svoje strukture datotek izdelate tako kot v lokalnem okolju, tako da ustvarite večstranska spletna mesta ali aplikacije v edinstvenem, samostojnem okolju brez potrebe po nastavljanju zapletenih konfiguracij Gulp ali Webpack.
Projekti CodePen olajšajo povlečenje in spuščanje obstoječih datotek (poskrbite, da jih boste varno shranili v oblaku) in bodo lepo vzdrževali strukturo ali vam omogočili spremembe v urejevalniku. In če ste uporabnik nivoja Pro, postane nekoliko bolj sladek: ko ste pripravljeni na razporeditev svojega dela, lahko z enim klikom uvedete izbrano okolje.
06. Vklopite televizor
Med vsemi zmogljivimi, praktičnimi orodji, ki jih ponuja CodePen, je muhasta moteča dejavnost, znana kot CodePen TV. CodePen TV je preprosto naključno vzorčenje izbranih pisalov, ki se postopoma vrti na način ohranjevalnika zaslona. Morda vam ni vseeno, če si želite ogledati naključni izbor pisala in želite pripraviti svoj lastni „kanal“ pisala z mačkami - lahko tudi zaženete televizijski kanal CodePen, ki temelji na kateri koli zbirki CodePen (vključno z zbirkami, ki so jih ustvarili drugi uporabniki). Če uporabljate Mac, lahko celo uporabite CodePen TV kot samostojni ohranjevalnik zaslona OSX!
07. Sprejmite duh skupnosti
Šifrirne skupnosti so znane po ekskluzivnosti, saj ustvarjajo resnična gojišča sindroma samozvanca, ki se lahko počutijo nepregledne in neprijetne tudi za najbolj izkušene oblikovalce in razvijalce.
Tu izstopa CodePen - in zakaj postati aktiven član skupnosti ponuja takšne prednosti. Vidite pisalo, ki sproža veselje? Raztrgajte ta srčni gumb in pokažite drugemu uporabniku malo ljubezni. Lahko ga kliknete do trikrat, če vam je res všeč delo, ki so ga opravili.
Se počutite navdihnjeno ali morda razmišljate o nadomestnem prevzemu pisala drugega uporabnika? Z enim samim klikom lahko napolnite pisalo in nato dodate svoj kreativni razcvet ali ga celo predelate, kot se vam zdi primerno.
Če vidite boljši pristop ali ugotovite napako v uporabniški kodi, razmislite o komentarju pisala s kakršnimi koli konstruktivnimi predlogi, ki jih imate. Medtem ko je večina odsekov za komentarje na takšnih spletnih mestih običajno neobvladljiv negativni negativni smetnjak, skupnost praviloma odlično opravlja samokontrolo, spodbuja pozitivnost in podpira druge.
Morda je najboljši način, da se potopite v skupnost, pridružiti klepetu Spectrum CodePen - odprtemu forumu za izmenjavo dela, pridobivanje nasvetov in ustvarjalno sodelovanje. Eden od primerov je Pass the Pen, koncept uporabnika CodePen Kristopher van Sant, v katerem je pisalo ustvarjeno in nato uporabnikom, ki bi želeli prispevati, ponovljeno.
CodePen ponuja tudi tedenske pozive za izzive, s katerimi boste ustvarjalno angažirani. Morda se vam ne zdi, da je vaše delo vredno deliti, verjetno pa se motite. Odprite klepet Spectrum CodePen in pokažite, na čem delate, ne glede na to, kako velik ali majhen. Prijetno boste presenečeni, kako podporni in koristni je povprečni uporabnik CodePena, in verjetno se boste med tem naučili nekaj različnih stvari.
08. Udeležite se srečanja IRL
Jedro tega, zaradi česar je CodePen bistveno orodje za razvijalce, je skupnost. Včasih pa je koristno, če svoje veščine odnesete izven zaslona - in ni boljšega načina kot organizirati ali se udeležiti srečanja CodePen. CodePen vam bo prisrčno priskrbel oblogo za udeležence, s pomočjo njihovih sponzorjev pa vam lahko celo pomagajo zagotoviti povračilo za hrano in pijačo - lokacija in datum sta odvisna od vas. Sestanki ponujajo odlično priložnost za seznanitev programov, javno pridobivanje strategij ali konceptov, dokončanje timskega izziva ali samo za boljše spoznavanje, kaj motivira vaše kodiranje. Ali pa ste samo tam zaradi brezplačne pice. Mi vam odpuščamo.
09. Nadgradite na Pro
Poglobljena funkcionalnost, ki jo CodePen ponuja brezplačno, je res izjemna, še posebej glede na breme tisočev uporabnikov, ki hkrati hrepenijo po neverjetno strežniških stvaritvah. Izven škatle je to precej dobro zaokrožena izkušnja - to je, dokler niste ugriznili CodePen Pro. Zakaj torej skok? Čeprav ima veliko uporabnih razširjenih funkcij, se samo ena funkcija splača: možnost zasebnega shranjevanja pisala.
Za uporabnike, ki niso profesionalci, je vsako ustvarjeno pisalo javno indeksirano, kar je pogosto v redu. Kaj pa, če želim izbrskati nekaj uporabniškega vmesnika, ki se šele zažene za odjemalski projekt? Tu je možnost zasebnega shranjevanja zelo priročna - 'zasebno' še ne pomeni skrito, na primer še vedno lahko delite neposredne povezave do svojega peresa z notranjo ekipo. Toda vašega pisala sicer ni mogoče najti. Morda potrebujete samo okolje za preizkušanje novih konceptov ali pa imate omejen čas za delo pri ustvarjanju in se nameravate vrniti kasneje - tu pomembno vplivajo možnosti zasebnosti.
Kaj torej še vključuje račun Pro? Gostovanje premoženja! V omejitvi 2 MB na datoteko bo CodePen gostil sredstva vašega pisala, kar pomeni, da ni treba nalagati slik ali skriptov na zunanji gostitelj in omogoča večjo prilagodljivost pri delu z ogrodji s strogimi specifikacijami za navzkrižni izvor.
Pro računi ponujajo dostop do Live View - uporabnikom omogočajo, da se njihove spremembe sproti naložijo v več oknih - Collab Mode - ki omogoča programiranje v paru v živo in vključuje priročno možnost klepeta - in Professor Mode, ki bo predvajal posodobitve vaše kode poleg predogleda Pena v živo v realnem času, idealen za inštruktorje kode ali mazohiste konferenčnega kroga. CodePen Pro ponuja tudi možnost urejanja vaše lastne strani profila, vključno s CSS in JS po meri, in neobvezno vdelavo pisala kot glavo strani - ker poznavanje njihove ciljne skupine pomeni, da vedo, da razvijalci sočelnikov zahtevajo prilagajanje, prilagajanje, prilagajanje.
10. Potopite se v vodnjak navdiha
Sveže pero je kot prazno platno, toda včasih bo zadel kreativni blok in to platno bo v vas zavzelo dolg nietzscheanski pogled. Se počutite brez navdiha? Oglejte si najnovejši izziv CodePen ali se pridružite skupini za kodiranje, kot sta Codevember ali DailyUI. Morda se odpravite na Dribbble in znova ustvarite (ali morda animirajte) ilustracijo v CSS - samo poskrbite, da boste navedli, kje je treba (prednostna metoda je dodajanje povratnih povezav do javnih podatkov vašega Pen-a).
To se morda zdijo vaje v jalovosti in vsi smo bili seznanjeni z argumenti proti kodiranju v prostem času, vendar obstaja še ena malo prepoznavna prednost (javno) kreativnega kodiranja pri CodePen: potencialni delodajalci in zaposlovalci dejansko porabijo čas za brskanje po spletnem mestu za ljudi, ki izkazujejo ustvarjalne ambicije. Zgradili nekaj stvari, na katere ste še posebej ponosni? Ne pozabite jih vključiti v svoj portfelj.
CodePen olajša vdelavo z več možnostmi prikaza, z njihovo novo funkcijo za vdelavo pred polnjenjem pa lahko dodate okno urejevalnika CodePen z upodobljeno kodo neposredno iz kodne baze vašega spletnega mesta.
Ta članek je bil prvotno objavljen v reviji Creative Web Design Oblikovalec spletnih strani.Kupite številko 290.
