10 CodePen-tricks, du aldrig vidste, du havde brug for

CodePen er et dræberværktøjssæt til hurtig prototyping med et inspirerende og støttende samfund af bidragydere. Det er blevet en af ​​branchens foretrukne værktøjer til webdesign ved at tilbyde problemfri iteration af kreativ kode, eliminere hovedpine ved at generere nye udviklingsmiljøer og gøre det muligt for brugere let at tackle utallige frontend-koncepter, der spænder fra det lunefulde og latterlige til det praktiske og implementeringsklare.

I denne artikel har vi samlet 10 top tip til at få mere ud af webbranchens foretrukne kodeplads - disse vil ændre, hvordan du bruger CodePen for evigt. Hvis dette inspirerer dig til at blive kreativ, kan du også tjekke vores oversigt over Eksempler på CSS-animation , eller det mest spændende open source-projekter på nettet.



Vil du gøre tingene endnu mere problemfri? Byg dit websted med en let peasy webstedsbygger , og få en super-hjælpsom webhosting service.



hvordan man laver lave poly 3d modeller

01. Udforsk noget nyt ved hjælp af emner

Søger du efter værktøjer og tip, der passer til dit projekt? Stop med at lede

Søger du efter værktøjer og tip, der passer til dit projekt? Stop med at lede(Billedkredit: CodePen)

CodePen-emner er en relativt ny community-driven funktion, der tilbydes brugere på alle niveauer, og de er en fantastisk måde at gå i gang med at udforske nye rammer, UI-mønstre eller JS-biblioteker. Når du åbner siden Emner, bliver du mødt med en række muligheder, filtreret efter kategori og endnu længere efter underkategorier. Når vi først har set en aktuel kategori, for eksempel Vue.js, mødes vi med en oversigtsskærm med flere muligheder.



Brug for en starterskabelon til at hjælpe med at opbygge den Vue-komponent? Her er en liste over populære komponenter og en smidig 'Ny pen fra skabelon'-knap, der hjælper os med at komme i gang. Vil du se nogle ekspertkurerede eksempler på rammen i aktion? Filtrer videre til 'Fremhævede Vue-kuglepenne', og du bliver mødt med inspirerende værker fra både rammestyrere og nybegyndere. Mens vi gennemser disse emneoversigter, tilbydes vi vedvarende links til officielle websteder, dokumentation og vejledninger til rammer eller biblioteker og projektets centrale GitHub-tilstedeværelse.

02. Prototype hurtigere med skabeloner

Enhver udvikler på et eller andet tidspunkt har sandsynligvis følt rigtig smerte, når etablering af et lokalt udviklingsmiljø , uanset stakken; selv en kedelpladekonfiguration kan kræve langt mere tid, end man ønsker at investere i for at oprette og teste noget som et par prototype-indsendeknapper. Med CodePen er du allerede der - en IDE står klar til dig til let at dumpe indholdet af dit kreative sind.

Men ved at bruge CodePens skabelonfunktion er det nu endnu nemmere at skrue op for det nøjagtige miljø, du har brug for for at få arbejdet gjort. En skabelon kan indeholde et hvilket som helst antal foruddefinerede eksterne scripts (du kan medtage en anden pen som et eksternt aktiv), giver dig mulighed for at forudindstille din foretrukne HTML / CSS / JS forprocessor (som pænt automatisk kompileres på farten) og vil endda bevare enhver eksisterende kode, som du holder af at bevare.



Hurtig prototyping bliver turboladet med opkaldte dev-miljøer

Hurtig prototyping bliver turboladet med opkaldte dev-miljøer(Billedkredit: CodePen / Adam Kuhn)

Det er ret simpelt at angive en pen som en skabelon - med din pen åben, bland den Indstillinger-knap, klik videre til pennedetaljer, og derfra vil du se en pæn lille skifte, der giver mulighed for at gemme som en almindelig pen eller en Skabelon.

Så hvordan adskiller dette sig fra at gafle en eksisterende pen? Indstilling af en pen som en skabelon giver dig mulighed for at vælge denne opsætning med det samme, når du vælger at oprette en ny pen uden behov for at søge gennem dine tidligere penne for at forkaste og ændre dem, ingen grund til at genimportere alle dine valgte scripts fra grundforbedret og ikke nødvendigt at genvælge alle de syntaksindstillinger og indstillinger, du måske foretrækker for det givne koncept. Derudover behandler din pen ved at starte en ny pen fra en skabelon som en helt ny skabelse, mens gaffel vil skabe en pen, der linker tilbage til originalen, med en tydelig historie snarere end en tom skifer. Opgradering til en CodePen Pro-konto giver dig et utroligt værdifuldt sæt udvidede funktioner, men selv de gratis brugerkonti giver mulighed for ubegrænset generering af skabeloner.

03. Start en samling

CodePen Collections tilbyder en fantastisk måde at gruppere og lokalisere koncepter på

CodePen Collections tilbyder en fantastisk måde at gruppere og lokalisere koncepter på(Billedkredit: CodePen / Adam Kuhn)

Hvis du kan lide at have mulighed for at søge ressourcer ved hjælp af CodePen-emner, men ønsker at du kan kurere dine egne, er samlinger det svar, du søger. Tilføjelse af en pen til en samling er så simpelt som at vælge rullemenuen 'Samlinger' fra enhver pen's redigeringsvisning, hvor du kan angive en samling eller oprette en ny. Igen kan det være alles pen (og hvis du er en Pro-bruger, kan du indstille din samling til privat). Skønheden ved samlinger er evnen til at se alle dine samlinger ét sted med robuste filter-, sorterings- og søgemuligheder - en fantastisk måde at definere ressourcer på stak eller ramme, holde en løbende liste over inspiration eller klyngepennen efter UI-koncepter. Er du interesseret i en anden brugers offentlige samling? Du kan endda abonnere på samlingen via RSS for at holde dig opdateret.

04. Forbedre effektiviteten med præprocessorer

Lad os indse det, de fleste af os bruger mere end nok tid bag skærme, end vi sandsynligvis burde. Mange af os er så overvældede af praktiske karriere-relaterede bestræbelser, at det er svært at finde tid til at opbygge et bibliotek med ubrugelige vippekontakter eller WebGL-sidetransitioner, og mens CodePen fjerner den typiske opsætningstid og giver os mulighed for at komme direkte på arbejde, kan effektivitet altid forbedres. Det er her CodePens oprindelige forprocessorer er nyttige.

For eksempel: Vil du oprette et gitter med et par hundrede HTML-celler, hvor hver enkelt stilattribut tilfældigt opdateres via JavaScript? Du kan gå rundt med at kopiere og indsætte div efter div, helt sikkert. Og i slutningen af ​​dette er alt editorvinduet næsten umuligt at navigere.

Her skinner HAML, Pug eller Jade: Fra penens indstillingsvindue skal du let vælge en HTML-forprocessor, skrive en simpel sløjfe og generere disse elementer i cirka to linjer. Er du ikke sikker på, hvor du skal komme i gang? Der er en pen til det: en søgning efter 'HAML Loop' hos CodePen giver et stort antal kedelplade-penne, der giver dig en kort forståelse af, hvordan du effektivt genererer dine sideelementer.

hvordan man inverterer farver i klipstudiemaling

Forprocessorer får dine koncepter endnu hurtigere fra jorden

Forprocessorer får dine koncepter endnu hurtigere fra jorden(Billedkredit: CodePen / Adam Kuhn)

Med CSS præprocessorer ligesom LESS og Sass kan vi oprette mixins og foruddefinerede funktioner, der accepterer en lang række argumenter, hvilket gør dem til en perfekt tilføjelse til dine CodePen-skabeloner og giver dig mulighed for at skrive ellers komplekse stilarter med relativ lethed. Måske bygger du UI-elementer ud til et større projekt - du kan nu definere alle dine farve-, skrifttype- og afstandsvariabler med klare og koncise navngivningskonventioner; og igen inkludere disse i en CodePen-skabelon giver dig mulighed for at gentage med næsten nul opsætning.

Nyd effektiviteten af ​​CoffeeScript, TypeScript eller Babel? CodePen kan også naturligt kompilere din valgte JS-forprocessor. Hvis du på et hvilket som helst tidspunkt vil kigge under emhætten og se, hvordan din kompilerede kode ser ud, kan du blot vælge 'Vis kompileret' fra din valgte kodedigeringsrude for at få en fornemmelse for, hvordan din endelige output vil se ud - og du burde; at arbejde med sløjfer og avancerede funktioner kan gøre opsætning og iteration utroligt hurtigt, men kan også ende med at spytte en god mængde ubrugt syntaks ud. Hvis du på et hvilket som helst tidspunkt har til hensigt at bruge disse kreationer i produktionen, skal du sørge for at se al din kode fuldt ud kompileret og foretage de reduktioner eller justeringer, der er nødvendige for ydeevnen.

05. Udforsk CodePens fedeste nye funktion: Projekter

Selvom du skriver produktionsklar kode, har CodePen din ryg

Selvom du skriver produktionsklar kode, har CodePen din ryg(Billedkredit: CodePen)

Stadig en noget frisk funktion, CodePen-projekter er en slags usunget helt - CodePens originale tre-rude HTML / CSS / JS-opsætning giver allerede mulighed for brugerdefineret ekstern inkludering og realtids preprocessor-kompilering. Så hvad får projekter til at skille sig ud? Ud over standardredigeringssiderne er du i stand til at tilføje dine egne lokale filer - hvilket betyder, at du kan udarbejde dine egne filstrukturer, som du ville gøre i et lokalt miljø, ved at oprette sider med flere sider eller applikationer i et enkelt, selvstændigt miljø uden f.eks. behov for at oprette komplicerede Gulp- eller Webpack-konfigurationer.

CodePen-projekter gør det let at trække og slippe dine eksisterende filer (sørg for at gemme dem sikkert ind Sky lagring ), og vedligeholder pænt din struktur eller giver dig mulighed for at foretage ændringer fra editoren. Og hvis du er bruger på Pro-niveau, bliver det lidt sødere: når du er klar til at implementere dit arbejde, kan du implementere det miljø, du vælger, med et enkelt klik.

06. Tænd for telefonien

CodePen TV tilbyder en dejlig omdirigering til din nedetid

CodePen TV tilbyder en dejlig omdirigering til din nedetid(Billedkredit: CodePen)

Skjult blandt alle de kraftfulde, praktiske værktøjer, der tilbydes af CodePen, er en lunefuld distraktion kendt som CodePen TV. CodePen TV er simpelthen en randomiseret prøveudtagning af plukkede kuglepenne, der gradvist roterer på en pauseskærmlignende måde. Måske er du ligeglad med at se på et tilfældigt udvalg af kuglepenne og ønsker at kurere din egen 'kanal' af kuglepenne med katte - du kan også starte en CodePen TV-kanal baseret på en hvilken som helst CodePen-samling (inklusive samlinger oprettet af andre brugere). Og hvis du er en Mac-bruger, kan du endda bruge CodePen TV som en selvstændig OSX-indbygget pauseskærm!

07. Omfavn samfundets ånd

Kodningssamfund er berygtede for eksklusivitet, hvilket skaber ægte ynglepladser for bedrageres syndrom, der kan føles uigennemtrængelig og ikke velkomne for selv de mest erfarne designere og udviklere.

Det er her CodePen skiller sig ud - og hvorfor det at give et aktivt medlem af samfundet tilbyder sådanne fordele. Ser du en pen, der gnister glæde? Mos den hjerteknap, og vis en anden bruger lidt kærlighed. Du kan gå videre og klikke på det op til tre gange, hvis du virkelig, virkelig elsker det arbejde, de har udført.

Føler du dig inspireret, eller tænker du måske på en alternativ tilgang til en anden brugers pen? Med et enkelt klik kan du forkæle en pen og derefter formidle dine egne kreative blomstrer eller endda omlægge den, som du finder det passende.

Alternativt, hvis du ser en bedre tilgang, eller hvis du finder en fejl i en brugers kode, kan du overveje at kommentere pennen med eventuelle konstruktive forslag, du har. Mens de fleste af kommentarsektionerne på websteder som disse typisk er en ukontrollabel affaldsbrand af negativitet, gør samfundet typisk et fremragende stykke arbejde med selvpolition, tilskyndelse til positivitet og styrkelse af andre.

Community er CodePens sande supermagt

Community er CodePens sande supermagt(Billedkredit: CodePen)

Måske er den bedste måde at dykke ned i samfundet ved at deltage CodePens spektrumchat - et åbent forum til deling af arbejde, rådgivning og kreativt samarbejde. Et eksempel er Pass the Pen, et koncept fra CodePen-bruger Kristopher van Sant, hvor en pen oprettes og derefter gentages af brugere, der gerne vil bidrage.

CodePen tilbyder også ugentlige udfordringer til at holde dig kreativt engageret. Du føler måske ikke, at dit arbejde er værd at dele, men du tager sandsynligvis fejl. Gå til CodePens spektrumchat og vis, hvad du arbejder på, uanset hvor stor eller lille. Du vil blive glædeligt overrasket over, hvor støttende og hjælpsom den gennemsnitlige CodePen-bruger er, og sandsynligvis lære et par forskellige ting undervejs.

08. Deltag i et møde IRL

Kernen i det, der gør CodePen til et vigtigt værktøj for frontend-udviklere, er samfundet. Men nogle gange er det nyttigt at fjerne dine færdigheder fra skærmen - og der er ingen bedre måde end at være vært eller deltage i et CodePen-møde. CodePen vil elskværdig forsyne dig med swag til deltagere, og ved hjælp af deres sponsorer kan de endda hjælpe dig med at sikre refusion for mad og drikke - placering og dato er op til dig. Meetups giver en glimrende mulighed for at parre program, offentligt anmode om strategier eller koncepter, gennemføre en teamudfordring eller bare bedre lære at vide, hvad der motiverer dine medkodere. Eller måske er du bare der for den gratis pizza. Vi tilgiver dig.

09. Opgrader til Pro

Dybden af ​​funktionalitet, CodePen tilbyder gratis, er virkelig ganske bemærkelsesværdig, især i betragtning af byrden for tusinder af brugere, der samtidig kobler sammen nogle utroligt serverintensive kreationer. Uden for boksen er det en temmelig afrundet oplevelse - det er indtil du har taget en bid fra CodePen Pro. Så hvorfor tage springet? Mens det har mange nyttige udvidede funktioner, gør en funktion alene det umagen værd: muligheden for at gemme kuglepenne privat.

hvordan man bruger bladguld

For ikke-Pro-brugere indekseres hver pen, der oprettes, offentligt, hvilket ofte er fint. Men hvad nu hvis jeg vil uddybe nogle UI-blomstrer til et endnu ikke lanceret klientprojekt? Det er her evnen til at gemme privat er meget praktisk - 'privat' betyder ikke skjult, du kan f.eks. Stadig dele direkte links til din pen med dit interne team. Men din pen er ellers uopdagelig. Måske har du bare brug for et miljø for at teste nye koncepter, eller du har begrænset tid til at arbejde på en oprettelse og har til hensigt at vende tilbage senere - det er her, fortrolighedsindstillinger gør forskellen.

Få en forsmag på funktionerne i Pro, og du vil aldrig se tilbage

Få en forsmag på funktionerne i Pro, og du vil aldrig se tilbage(Billedkredit: CodePen / Adam Kuhn)

Så hvad inkluderer en Pro-konto ellers? Asset hosting! Inden for en 2Mb pr. Filgrænse er CodePen vært for din Pen's aktiver, hvilket betyder, at der ikke er behov for at uploade billeder eller scripts til en ekstern vært, og giver mere fleksibilitet, når du arbejder med rammer med strenge kryds-origin-specifikationer.

Pro-konti giver adgang til Live View - giver brugerne mulighed for at se deres redigeringer genindlæst on-the-fly over flere vinduer - Collab Mode - som giver mulighed for live-par-programmering og inkluderer en praktisk chat-indstilling - og Professor Mode, som sender dine kodeopdateringer sammen med pennens live preview i realtid, ideel til kodeinstruktører eller masochister i konferencekredsløb. CodePen Pro giver også muligheden for at redigere din helt egen profilside, herunder tilpasset CSS og JS, og en valgfri penindlejring som sidehoved - fordi det at kende deres publikum betyder at kende frontendudviklere klager for at tilpasse, tilpasse, tilpasse.

10. Dyp ned i inspirationskilden

Mangler du den kreative gnist? Dribbble er et fantastisk sted at se

Mangler du den kreative gnist? Dribbble er et fantastisk sted at se(Billedkredit: Dribbble)

En frisk pen er som et tomt lærred, men nogle gange rammer kreativ blok, og lærredet tager et langt Nietzschean-blik ind i dig. Føler du dig uinspireret? Se på det seneste CodePen Challenge eller deltage i en kodende udfordringsgruppe som Kodevember eller DailyUI . Måske gå videre til Dribbble og genskab (eller måske animer) en illustration i CSS - bare sørg for at give kredit, hvor det er forfaldent (tilføjelse af backlinks til din pen offentlige oplysninger er den foretrukne metode.)

Disse kan virke som øvelser i nytteløshed, og vi har alle været fortrolige med argumenter mod kodning i ens fritid, men der er en anden lidt anerkendt opadrettelse af (offentligt) kreativ kodning på CodePen: potentielle arbejdsgivere og rekrutterere bruger faktisk tid på at gennemsøge webstedet for folk, der udviser kreativ ambition. Har du bygget nogle ting, du er særlig stolt af? Sørg for at medtage dem i din portefølje.

CodePen gør indlejring let med flere visningsmuligheder, og ved hjælp af deres nye forudindlejringsfunktion kan du tilføje et CodePen-editorvindue med gengivet kode direkte fra din porteføljes websteds codebase.

Denne artikel blev oprindeligt offentliggjort i kreativt webdesignmagasin Webdesigner . Køb nummer 290 .

Læs mere: