10 CodePen-temppua, joita et koskaan tiennyt tarvitsevasi

CodePen on nopea prototyyppien tappaja, johon kuuluu inspiroiva ja tukeva avustajien yhteisö. Siitä on tullut yksi alan suosikkeista web-suunnittelutyökalut tarjoamalla vaivatonta iteraatiota luovalle koodille, poistamalla uusien kehitysympäristöjen luomisen päänsäryt ja antamalla käyttäjille mahdollisuuden käsitellä lukemattomia käyttöliittymäkonsepteja hassuista ja naurettavista käytännön ja käyttöönottovalmiiksi.

kuinka pitää lyijykynää piirrettäessä

Tässä artikkelissa olemme koonneet 10 parasta vinkkiä, joilla saat enemmän hyötyä verkkoteollisuuden suosikkikoodauspelistä - nämä muuttavat CodePenin käyttöä ikuisesti. Jos tämä innostaa sinua tulemaan luovaksi, kannattaa ehkä myös tutustua yhteenvetoomme CSS-animaatioesimerkkejä , tai mielenkiintoisinta avoimen lähdekoodin projektit verkossa.



Haluatko tehdä asioista entistä vaivattomampia? Rakenna sivustosi helposti herneellä verkkosivujen rakentaja ja saat erittäin hyödyllisen sivujen ylläpito palvelu.



01. Tutki jotain uutta käyttämällä aiheita

Etsitkö projektiisi sopivia työkaluja ja vinkkejä? Älä katso enää

Etsitkö projektiisi sopivia työkaluja ja vinkkejä? Älä katso enää(Kuvan luotto: CodePen)

CodePen-aiheet ovat suhteellisen uusi yhteisölähtöinen ominaisuus, jota tarjotaan kaikentasoisille käyttäjille, ja ne ovat loistava tapa tutustua uusiin kehyksiin, käyttöliittymäkuvioihin tai JS-kirjastoihin. Kun avaat Aiheet-sivun, sinulle löytyy joukko vaihtoehtoja, jotka on suodatettu luokan ja jopa alaluokkien mukaan. Kun katselemme ajankohtaista luokkaa, esimerkiksi Vue.js, kohtaamme yleiskuvanäytön, jossa on useita vaihtoehtoja.



Tarvitsetko käynnistysmallin, joka auttaa rakentamaan kyseisen Vue-komponentin? Tässä on luettelo suosituista komponenteista ja upea Uusi kynä mallista -näppäin, joka auttaa meitä pääsemään alkuun. Haluatko nähdä joitain asiantuntevasti kuratoituja esimerkkejä kehyksestä toiminnassa? Suodata 'Esitetyt Vue-kynät' -kohtaan, niin sinut kohtaavat innoittavia teoksia sekä kehysmestareilta että aloittelijoilta. Selatessamme näitä aiheiden yleiskatsauksia meille tarjotaan jatkuvia linkkejä virallisille sivustoille, kehys- tai kirjastodokumentaatioita ja oppaita sekä projektin ydin GitHub-läsnäoloa.

02. Prototyyppi nopeammin mallien avulla

Jokainen kehittäjä on jossain vaiheessa todennäköisesti tuntenut todellista tuskaa, kun paikallisen kehitysympäristön luominen riippumatta pinosta; jopa kattilalevyn asennus voi vaatia paljon enemmän aikaa kuin haluaa investoida luoda ja testata jotain, kuten muutama lähetyspainikkeen prototyyppi. CodePen-palvelun avulla olet jo siellä - IDE on valmiina auttamaan sinua luovuttamaan luovaa mieltäsi helposti.

Mutta käyttämällä CodePenin malliominaisuutta on nyt entistäkin helpompaa kehittää juuri tarvittava työympäristö. Malli voi sisältää minkä tahansa määrän ennalta määritettyjä ulkoisia komentosarjoja (voit sisällyttää toisen kynän ulkoisena resurssina), sen avulla voit esiasettaa haluamasi HTML / CSS / JS-esiprosessorin (joka kääntyy siististi automaattisesti lennossa) ja jopa säilyttää kaikki olemassa olevat koodit, joita haluat säilyttää.



Nopea prototyyppien muodostus turboahdetaan soitetuilla kehitysympäristöillä

Nopea prototyyppien muodostus turboahdetaan soitetuilla kehitysympäristöillä(Kuvan luotto: CodePen / Adam Kuhn)

Kynän määrittäminen malliksi on melko helppoa - kun kynä on avattu, sekoita Asetukset-painike, napsauta kynän yksityiskohtiin ja sieltä näet siistin pienen kytkimen, joka tarjoaa mahdollisuuden tallentaa tavallisena kynänä tai Sapluuna.

Joten miten tämä eroaa olemassa olevan kynän haaroittamisesta? Kynän asettaminen malliksi antaa sinun valita tämä asetus heti, kun olet valinnut uuden kynän luomisen, eikä sinun tarvitse etsiä edellisistä kynistä haarautumaan ja muokata niitä, eikä sinun tarvitse tuoda kaikkia valitsemiasi skriptejä uudelleen perusteellisesti, eikä sinun tarvitse valita kaikkia syntaksivaihtoehtoja ja asetuksia, joita saatat haluta antaa tietylle konseptille. Lisäksi uuden kynän aloittaminen mallista käsittelee kynääsi kokonaan uutena luomuksena, kun taas haaroittaminen luo kynän, joka linkittää takaisin alkuperäiseen, jolla on erillinen historia eikä tyhjä lehtilista. Päivittäminen CodePen Pro -tilille tarjoaa uskomattoman arvokkaan joukon laajennettuja ominaisuuksia, mutta jopa ilmaiset käyttäjätilit mahdollistavat rajoittamattoman mallipohjan luomisen.

03. Aloita kokoelma

CodePen-kokoelmat tarjoavat erinomaisen tavan ryhmittää ja paikantaa käsitteitä

CodePen-kokoelmat tarjoavat erinomaisen tavan ryhmittää ja paikantaa käsitteitä(Kuvan luotto: CodePen / Adam Kuhn)

Jos nautit mahdollisuudesta etsiä resursseja CodePen-aiheiden avulla, mutta haluat, että voisit kuratoida omasi, etsit vastausta kokoelmiin. Kynän lisääminen kokoelmaan on yhtä helppoa kuin avata Kokoelmat-pudotusvalikko mistä tahansa Kynän muokkausnäkymästä, jossa voit määrittää kokoelman tai luoda uuden. Jälleen, se voi olla kenen tahansa kynä (ja jos olet Pro-käyttäjä, voit asettaa kokoelmasi yksityiseksi). Kokoelmien kauneus on kyky tarkastella kaikkia kokoelmiasi yhdessä paikassa vankoilla suodatin-, lajittelu- ja hakuvaihtoehdoilla - erinomainen tapa määritellä resursseja pinon tai kehyksen mukaan, pitää käynnissä oleva inspiraatioluettelo tai klusterikynät käyttöliittymäkäsitteiden mukaan. Kiinnostaako toisen käyttäjän julkinen kokoelma? Voit jopa tilata kokoelman RSS: n kautta pysyäksesi ajan tasalla päivityksistä.

04. Paranna tehokkuutta esiprosessoreilla

Tunnustetaan tosiasia, että useimmat meistä viettävät enemmän kuin tarpeeksi aikaa näyttöjen takana kuin todennäköisesti pitäisi. Monet meistä ovat niin hukkua käytännön uraan liittyvistä pyrkimyksistä, että on vaikea löytää aikaa rakentaa kirjasto hyödytöntä vaihtokytkimiä tai WebGL-sivusiirtymiä, ja vaikka CodePen riisuu tyypillisen asennusajan ja antaa meille mahdollisuuden päästä suoraan töihin, tehokkuus voi aina parantaa. Tässä ovat CodePenin alkuperäiset esiprosessorit käteviä.

Esimerkiksi: haluatko rakentaa muutaman sadan HTML-solun ruudukon, joiden tyylitunnisteet päivitetään satunnaisesti JavaScriptin kautta? Voisit jatkaa kopioimalla ja liittämällä div: n div: n jälkeen, varmasti. Ja tämän loppuun mennessä kaikissa editorin ikkunoissa on melkein mahdotonta navigoida.

Tässä HAML, Pug tai Jade loistavat: Valitse Kynän asetusikkunasta HTML-esiprosessori helposti, kirjoita yksinkertainen silmukka ja luo nämä elementit suunnilleen kahdella rivillä. Etkö ole varma, mistä aloittaa? Siellä on kynä: haulla HAML-silmukka CodePenissä saadaan hyvä määrä kattilakyniä, jotka antavat sinulle pinnallisen käsityksen sivuelementtien tehokkaasta luomisesta.

Esiprosessorit vievät konseptisi kentältä vielä nopeammin

Esiprosessorit vievät konseptisi kentältä vielä nopeammin(Kuvan luotto: CodePen / Adam Kuhn)

Kanssa CSS-esiprosessorit kuten LESS ja Sass, voimme rakentaa yhdistelmiä ja ennalta määriteltyjä toimintoja, jotka hyväksyvät useita argumentteja, mikä tekee niistä täydellisen lisäyksen CodePen-malleihisi ja antaa sinun kirjoittaa muuten monimutkaisia ​​tyylejä suhteellisen helposti. Ehkä rakennat käyttöliittymän elementtejä suurempaa projektia varten - voit nyt määrittää kaikki väri-, kirjasinlaji- ja välimuuttujat selkeillä ja ytimekkävillä nimityskäytännöillä. ja sisällyttämällä nämä uudelleen CodePen-malliin voit toistaa käytännössä nolla-asetuksella.

Nautitko CoffeeScriptin, TypeScriptin tai Babelin tehokkuudesta? CodePen voi myös kääntää valitsemasi JS-esiprosessorin natiivisti. Jos haluat milloin tahansa kurkistaa konepellin alle ja nähdä, miltä käännetty koodisi näyttää, voit valita valitsemastasi koodinmuokkausruudusta 'Näytä käännetty' saadaksesi tuntuman lopullisen tuloksen näyttämisestä - ja sinun pitäisi; silmukoiden ja edistyneiden toimintojen kanssa työskentely voi tehdä asennuksesta ja iteroinnista uskomattoman nopean, mutta voi myös johtaa hyvään määrään käyttämätöntä syntaksia. Jos aiot milloin tahansa käyttää näitä luomuksia tuotannossa, muista katsoa kaikki koodisi täysin koottuina ja tehdä suorituskyvyn kannalta välttämättömiä vähennyksiä tai muutoksia.

05. Tutustu CodePenin hienoimpaan uuteen ominaisuuteen: Projektit

Vaikka kirjoitat tuotantovalmiita koodeja, CodePen on saanut sinut takaisin

Vaikka kirjoitat tuotantovalmiita koodeja, CodePen on saanut sinut takaisin(Kuvan luotto: CodePen)

Vielä jonkin verran tuore ominaisuus, CodePen-projektit ovat eräänlainen laulamaton sankari - CodePenin alkuperäinen kolmen ruudun HTML / CSS / JS-asennus sallii jo mukautetut ulkoiset sisällysluettelot ja reaaliaikaisen esiprosessorin kokoamisen. Joten mikä tuo projektit erottumaan? Tavallisten muokkaussivujen lisäksi voit lisätä omia paikallisia tiedostojasi, mikä tarkoittaa, että voit jäsentää omat tiedostorakentesi samalla tavalla kuin paikallisessa ympäristössä, luoda monisivuisia sivustoja tai sovelluksia yksittäisessä, itsenäisessä ympäristössä ilman tarvetta esimerkiksi asettaa monimutkaisia ​​Gulp- tai Webpack-kokoonpanoja.

CodePen-projektit helpottavat olemassa olevien tiedostojen vetämistä ja pudottamista (varmista, että säilytät ne turvallisesti) pilvitallennus ), ja ylläpitää rakennettasi siististi tai antaa sinun tehdä muutoksia editorissa. Ja jos olet Pro-tason käyttäjä, se muuttuu hieman suloisemmaksi: Kun olet valmis käyttämään työtäsi, voit ottaa haluamasi ympäristön käyttöön yhdellä napsautuksella.

06. Kytke puhelin päälle

CodePen TV tarjoaa miellyttävän ohjauksen seisokkeihisi

CodePen TV tarjoaa miellyttävän ohjauksen seisokkeihisi(Kuvan luotto: CodePen)

Kaikkien CodePenin tarjoamien tehokkaiden ja käytännöllisten työkalujen joukossa on hassu häiriötekijä, joka tunnetaan nimellä CodePen TV. CodePen TV on yksinkertaisesti satunnaistettu otos kerätyistä kynistä, joka pyörii vähitellen näytönsäästäjän kaltaisella tavalla. Ehkä et välitä tarkastelemasta satunnaisia ​​kyniä ja haluat kuratoida oman kana-kanavien kanavan - voit myös käynnistää CodePen-TV-kanavan mihin tahansa CodePen-kokoelmaan (mukaan lukien muiden käyttäjien luomiin kokoelmiin). Ja jos olet Mac-käyttäjä, voit jopa käyttää CodePen TV: tä erillisenä OSX-natiivinäytönsäästäjänä!

07. Pidä kiinni yhteisöllisyydestä

Koodaavat yhteisöt ovat tunnettuja yksinoikeudesta, ja ne luovat todellisia kasvualustoja impostorin oireyhtymälle, joka voi tuntua läpäisemättömältä ja toivomattomalta jopa kaikkein kokeneimmille suunnittelijoille ja kehittäjille.

Tässä CodePen erottuu - ja miksi yhteisön aktiiviseksi jäseneksi tuleminen tarjoaa tällaisia ​​etuja. Näetkö kynän, joka herättää iloa? Muista tuo sydänpainike ja näytä toiselle käyttäjälle vähän rakkautta. Voit mennä eteenpäin ja napsauttaa sitä jopa kolme kertaa, jos todella, todella rakastat heidän tekemäänsä työtä.

kuinka piirtää naishahmo

Tuntuuko inspiraatiolta vai ajatteletko toisen käyttäjän kynän vaihtoehtoista ottamista? Yhdellä napsautuksella voit haarauttaa kynän ja antaa sitten oman luovuutesi kukoistaa tai jopa refraktoida sen mielesi mukaan.

Vaihtoehtoisesti, jos näet paremman lähestymistavan tai jos havaitset puutteen käyttäjän koodissa, harkitse kynän kommentoimista mahdollisilla rakentavilla ehdotuksilla. Vaikka suurin osa tällaisten sivustojen kommenttiosioista on tyypillisesti hallitsematonta negatiivisuuden tulipaloa, yhteisö tekee tyypillisesti erinomaista työtä itsehallinnoinnissa, rohkaisee positiivisuutta ja vahvistaa muita.

Yhteisö on CodePenin todellinen supervalta

15 tuuman macbook pro -kotelo
Yhteisö on CodePenin todellinen supervalta(Kuvan luotto: CodePen)

Ehkä paras tapa sukeltaa yhteisöön on liittyminen CodePenin Spectrum-chat - avoin foorumi työn jakamiseen, neuvojen pyytämiseen ja luovaan yhteistyöhön. Yksi esimerkki on Pass the Pen, CodePen-käyttäjän Kristopher van Santin käsite, jossa kynä luodaan ja toistetaan sitten käyttäjien, jotka haluavat osallistua.

CodePen tarjoaa myös viikoittaisia ​​haasteita pitämään sinut luovasti mukana. Et ehkä tunne, että työsi on ansaitsemisen arvoinen, mutta olet todennäköisesti väärässä. Mene CodePenin Spectrum-keskusteluun ja näytä mitä työskentelet riippumatta siitä kuinka suuri tai pieni. Yllätyt miellyttävästi, kuinka kannustava ja avulias keskimääräinen CodePen-käyttäjä on, ja luultavasti opit muutamia erilaisia ​​asioita matkan varrella.

08. Osallistu IRL: n tapaamiseen

Yhteisö, joka tekee CodePenistä keskeisen työkalun käyttöliittymäkehittäjille, on yhteisö. Mutta joskus on hyödyllistä viedä taitosi ruudulta - eikä ole parempaa tapaa kuin isännöidä tai osallistua CodePen-tapaamiseen. CodePen toimittaa sinulle ystävällisesti osallistujat, ja heidän sponsoriensa avulla he voivat jopa auttaa sinua korvaamaan ruoka ja juoma - sijainti ja päivämäärä ovat sinun tehtäväsi. Meetups tarjoaa erinomaisen mahdollisuuden yhdistää ohjelma, julkisesti pyytää strategioita tai konsepteja, suorittaa tiimihaaste tai vain paremmin tutustua siihen, mikä motivoi koodereitasi. Tai ehkä olet vain siellä ilmaiseksi pizzaa. Me annamme sinulle anteeksi.

09. Päivitä Pro-versioon

CodePenin maksuttoman toiminnallisuuden syvyys on todella varsin merkittävä, varsinkin kun otetaan huomioon tuhansien käyttäjien taakka, joka samanaikaisesti mukauttaa uskomattoman palvelinintensiivisiä luomuksia. Laatikosta on melko pyöristetty kokemus - vasta, kun olet ottanut pureman CodePen Prosta. Joten miksi tehdä hyppy? Vaikka siinä on monia hyödyllisiä laajennettuja ominaisuuksia, vain yksi ominaisuus tekee siitä kannattavan: kyky tallentaa kynät yksityisesti.

Muille kuin Pro-käyttäjille jokainen luotu kynä indeksoidaan julkisesti, mikä on usein hienoa. Mutta entä jos haluan täsmentää joitain käyttöliittymiä kukoistaa vielä käynnistettävässä asiakasprojektissa? Täällä kyky säästää yksityisesti tulee erittäin käteväksi - 'yksityinen' ei tarkoita piilotettua, voit silti jakaa suoria linkkejä kynääsi esimerkiksi sisäisen tiimisi kanssa. Mutta kynääsi ei muuten löydy. Ehkä tarvitset vain ympäristön uusien ideoiden testaamiseen, tai sinulla on vain vähän aikaa työskennellä luomuksen parissa ja aiot palata myöhemmin - tässä tietosuojavaihtoehdot tekevät eron.

Maistele Pro-ominaisuuksia ja et koskaan katso taaksepäin

Maistele Pro-ominaisuuksia ja et koskaan katso taaksepäin(Kuvan luotto: CodePen / Adam Kuhn)

Joten mitä muuta Pro-tili sisältää? Omaisuuden ylläpito! 2 Mt tiedostorajoituksessa CodePen isännöi kynän omaisuutta, joten kuvia tai komentosarjoja ei tarvitse ladata ulkoiseen isäntään, ja se antaa enemmän joustavuutta työskennellessäsi kehysten kanssa, joissa on tiukat ristikohdan määritykset.

Pro-tilit tarjoavat pääsyn Live View -ohjelmaan - käyttäjät voivat nähdä muokkauksensa ladattuna lennon aikana useissa ikkunoissa - Collab Mode - joka mahdollistaa parin live-ohjelmoinnin ja sisältää kätevän chat-vaihtoehdon - ja Professor Mode, joka lähettää koodipäivitykset reaaliajassa Penin suoran esikatselun rinnalla, ihanteellinen koodinopettajille tai konferenssipiirin masokisteille. CodePen Pro tarjoaa myös mahdollisuuden muokata omaa profiilisivua, mukaan lukien mukautetut CSS ja JS, ja valinnainen Pen-upotus sivun ylätunnisteena - koska heidän yleisönsä tunteminen tarkoittaa, että käyttöliittymän kehittäjät tietävät, että he mukauttavat, muokkaavat, mukauttavat.

10. Upota inspiraation kaivoon

Puuttuuko tuo luova kipinä? Dribbble on loistava paikka etsiä

Puuttuuko tuo luova kipinä? Dribbble on loistava paikka etsiä(Kuvan luotto: Dribbble)

Tuore kynä on kuin tyhjä kangas, mutta joskus luova lohko osuu, ja tämä kangas vie sinuun pitkän Nietzschean katseen. Tuntuu innoittamattomalta? Katso viimeisintä CodePen-haaste tai liittyä koodaavan haasteen ryhmään Codevember tai DailyUI . Ehkä mene eteenpäin Kikkau ja luo (tai ehkä animoi) kuva CSS: ssä - varmista vain, että annat kunniaa (maksullisten linkkien lisääminen kynän julkisiin tietoihin on suositeltava tapa.)

Nämä saattavat tuntua turhuuden harjoituksilta, ja meillä kaikilla on ollut etusija vapaa-ajan koodaamista vastaan, mutta CodePenissä (julkisesti) luovaan koodaukseen liittyy toinenkin vähän tunnustettu haittapuoli: potentiaaliset työnantajat ja rekrytoijat viettävät aikaa sivuston tutkimisessa ihmisille, jotka osoittavat luovaa kunnianhimoa. Rakensit asioita, joista olet erityisen ylpeä? Muista sisällyttää ne salkkuusi.

CodePen tekee upottamisesta helppoa, sillä siinä on useita näyttövaihtoehtoja, ja käyttämällä uutta esitäyttö upotusominaisuutta voit lisätä CodePen-editori-ikkunan renderoidulla koodilla suoraan portfoliosivustosi kooditietokannasta.

Tämä artikkeli julkaistiin alun perin luovan verkkosivujen lehdessä Nettisivujen suunnittelija . Osta numero 290 .

Lue lisää: