8 funkcií CodePen, o ktorých ste nevedeli

CodePen a vývoj frontendu sa stali vzájomnými synonymami. Ako skorý používateľ a skorý zamestnávateľ v CodePen som mal tú výhodu, že som sa s platformou učil a rástol, od online editora a webového ihriska k živej komunite testovania a predvádzania HTML , CSS a JavaScript úryvky kódu - ktoré sa môžu rozšíriť iba pridaním kódu Projekty CodePen .

CodePen je ako švajčiarsky nôž pre vývojárov frontendu, ponúka inšpiráciu, čisté prostredie na experimentovanie a ďalšie. Každý má iný prístup k vývoju a existuje niekoľko kľúčových funkcií CodePen, ktoré niekedy zostanú nepovšimnuté a mohli by byť použité na výkrik. Tu je osem funkcií, ktoré ste možno prehliadli:

01. Predspracovatelia

CodePen je možné použiť v kombinácii s množstvom preprocesorov CSS



CodePen je možné použiť v kombinácii s množstvom preprocesorov CSS

CodePen je skvelým miestom na izolovanú tvorbu malých komponentov bez nutnosti nastavovania vývojového prostredia. Môžete navrhnúť a experimentovať s malým kúskom, a keď budete spokojní, prineste ho do svojej väčšej aplikácie.

Čo nemusí byť hneď zrejmé, je to, že aby bol izolovaný vývoj všetkým oveľa ľahší a rýchlejší, CodePen vám poskytuje okamžitý prístup k mnohým skvelým preprocesorom. Pri vytváraní a úpravách pier môžete použiť štyri rôzne preprocesory HTML: Markdown, HAML, Slim a Jade. Môžu byť užitočné pri písaní stručnejšieho kódu; alebo možno pracujete na projektoch v týchto jazykoch a chcete, aby boli vaše príklady konzistentné.

Používatelia majú tiež prístup k preprocesorom JavaScriptu (CoffeeScript, LiveScript, TypeScript a Babel) a tiež k preprocesorom CSS (Less, Sass a SCSS, Stylus a novší PostCSS). Môžu byť neoceniteľným pomocníkom pri rýchlom rozbehu, ale sú tiež skvelým zdrojom, ak sa chcete naučiť nový jazyk. Možnosť „Zobraziť kompilované“ vám umožňuje písať s predprocesorom a potom vidieť, ako sa prekladá, akonáhle je predspracovaný.

02. Vkladanie funkcií

Pokiaľ ide o zahrnutie kódu do vašich blogových príspevkov, článkov a prezentácií, vloženia CodePen sú neuveriteľne všestranné a majú niekoľko špeciálnych funkcií.

Všetky vloženia majú tému, ktorá riadi štýl hlavičky CodePen, kariet a ďalších podrobností. Existujú dve vstavané témy: svetlá a tmavá. Každý člen CodePen dostane tiež prispôsobiteľnú osobnú tému, ktorú môžete upraviť tak, aby zodpovedala téme vášho blogu alebo vašej srdcovej túžbe. Špeciálne tu je, že ak zmeníte svoju tému, CodePen spätne aktualizuje všetky vaše predchádzajúce vloženia. Nie je teda potrebné sa vracať a upravovať každý príspevok osobitne.

Ak ste členom Pro, môžete odomknúť niekoľko ďalších funkcií vo svete vkladania. Po prvé, máte neobmedzené témy, takže si môžete zvoliť niečo špeciálne pre svoj blog, niečo iné pre vaše snímky a niečo iné zase pre jednorazové príspevky. Môžete tiež pridať svoje vlastné vlastné CSS do celého vloženia a zmeniť tak štýly textu, písma a doslova čokoľvek iné.

Po druhé, používatelia Pro môžu svoje vloženia upravovať. Na každej konferencii, na ktorú smerujete (alebo sledujete online), sa vám v prezentáciách nakoniec zobrazí niekoľko vložených pier. Sú skvelým spôsobom, ako predviesť svoj kód, ako aj výsledné značky a štýly. Niečím sa môžete pochváliť a zároveň nechať vyladiť a vyladiť kód. Upraviteľné vloženia sú skvelé aj pre interaktívne blogové príspevky a výukové programy - autor môže na stránku vložiť pero a návštevníci budú môcť upravovať a skúmať kód a vidieť, ako sa ich zmeny prejavia v reálnom čase.

Nakoniec, ak sa chystáte skutočne na úplné prispôsobenie, má iframe CodePen vlastné rozhranie PostMessage API, ktoré môžete použiť na dynamickú zmenu kariet. Najskôr získame inštanciu iframe a pošleme jej karty, ktoré sa majú zobraziť:

var embedIFrame = document.querySelector('.codepen-embed-iframe'); embedIframe.contentWindow.postMessage({ activeTabs: 'css, result' }, '*');

Vyššie uvedená správa nastaví aktívne karty na vložení na rozdelené zobrazenie, ktoré spolu s výsledkom bude obsahovať CSS.

Táto funkcia v kombinácii s prispôsobenou témou vám umožňuje vytvoriť si vlastné rozhranie a rozloženie, pomocou ktorého môžu ostatní komunikovať s vašim perom. V tento živý príklad „Pero cykluje cez svoj kód, aby zobrazovalo jednotlivé karty v priebehu času.

03. Živé zobrazenie a živá synchronizácia

Živé zobrazenie je celostránkové zobrazenie pera, ktoré sa aktualizuje v reálnom čase pri úprave kódu. Je to ako ukážka v editore, až na to, že túto adresu URL je možné otvoriť v inom okne alebo na inej karte, v inom prehliadači alebo dokonca na úplne inom počítači alebo zariadení.

To napríklad znamená, že pomocou živého náhľadu môžete testovať kód naraz vo Firefoxe, Safari, Chrome a na telefóne. Počet rôznych prehľadávačov, ktoré môžete použiť, nie je nijako obmedzený.

Ako ďalšia výhoda sa udalosti synchronizujú aj v týchto zobrazeniach, takže pri posúvaní na jednej obrazovke sa všetky posúvajú spolu s vami. Keď na jednom z nich kliknete na začiarkavacie políčko, bude začiarknuté na všetkých obrazovkách. Testovanie medzi zariadeniami a rôznymi prehliadačmi je skutočne hračkou. A aby to bolo ešte jednoduchšie, CodePen ponúka aj funkciu, ktorá vám umožní odoslať si text na aktuálnu zverejnenú adresu URL, takže skutočne neexistuje žiadna výhovorka, aby ste sa podrobili testovaniu.

04. Knižnica vzorov

Tento zdroj zhromažďuje perá tak, aby vyhovovali celej škále potrieb a požiadaviek - ak hľadáte inšpiráciu, choďte sem

Tento zdroj zhromažďuje perá tak, aby vyhovovali celej škále potrieb a požiadaviek - ak hľadáte inšpiráciu, choďte sem

Ako sa CodePen rozrastal, mohli sme vidieť toľko pier a zbierok vytvorených svetom. Keď už prichádzate toľko kódu, je ťažké nevidieť vzniknúť niekoľko vzorcov, ako aj ľudí, ktorí podobné problémy riešia rôznymi kreatívnymi spôsobmi. Takže ak máte náladu na malú inšpiráciu alebo potrebujete nejaké nápady na zahájenie nového projektu, Knižnica vzorov CodePen je miesto, kam by ste mali smerovať.

Knižnica vzorov je neuveriteľný zdroj plný stoviek pier, ktoré sú zoradené podľa konkrétnych potrieb. Chcete na svoj web pridať systém hodnotenia? K tomu existuje zbierka vzorov. Skúmate rôzne vzory strúhanky? Na to existuje zbierka. Príspevky do knižnice sú prístupné verejnosti, takže ak ste urobili niečo zábavné alebo vhodné, budete za všetko.

V podobnom duchu existujú aj niektoré vynikajúce perá vyrobené používateľom, ktoré slúžia ako živá ukážka určitej funkcie jazyka JavaScript alebo CSS. Považujem tieto neuveriteľne poučné a užitočné ako zdroje:

  • Ihrisko Flexbox : Toto detské ihrisko Pen od Gabi Siquès interaktívne demonštruje, ako sa chová každá vlastnosť Flexboxu, vďaka čomu je ľahké nájsť konkrétne vlastnosti, ktoré hľadáte.
  • Uľahčenie detského ihriska : Toto pero od Craiga Roblewského vám umožňuje upravovať a upravovať zmiernenia GreenSock v reálnom čase, takže tieto interakcie budú jemné
  • Nakladače a spriadače : Táto kolekcia podporuje viac ako 500 jedinečných nakladačov a rotujúcich strojov. Ak ste niekedy v rutine, bude to jediný kontaktný bod, ktorý vás z toho môže dostať.

05. Perá ako zdroje

Aj keď bol program CodePen pôvodne navrhnutý tak, aby zobrazoval menšie a izolovanejšie ukážky kódu, bolo zrejmé, že niektorí používatelia požadujú trochu viac štruktúry a zahmlievania. Riešením bolo umožniť používať perá ako zdroje pre iné perá.

V jeho najzákladnejšej podobe sa to deje tak, že sa odhalí nespracovaný kompilovaný JavaScript a CSS z každého pera. Týmto spôsobom môžete s jednotlivými komponentmi vybudovať skutočne veľkú štruktúru projektu. Môžete to urobiť pre ľubovoľné pero: takže pre codepen.io/team/codepen/pen/EVdVpQ pridali by ste príponu .js zobraziť JavaScript, alebo .css zobraziť CSS.

Môžete prepojiť CSS alebo JavaScript z jedného pera a použiť ho v inom na vytvorenie „závislosti“ vo voľnejšom zmysle slova. Ak však používate preprocesor, je možné vytvoriť „skutočnú“ závislosť. Takže ak definujete množinu premenných a kombinácií pre jedno pero a prepojíte ich s iným perom ako externý zdroj, budete môcť použiť tie isté premenné a kombinácie v druhom peru, kde by inak zlyhali alebo zlyhali.

06. CodePen TV

Program CodePen TV poskytuje prezentáciu náhodných animovaných pier - len sa pohodlne usaďte a užívajte si

Program CodePen TV poskytuje prezentáciu náhodných animovaných pier - len sa pohodlne usaďte a užívajte si

Narodený v náhodný hackerský deň v roku 2015, CodePen TV ukážky zbierok Pen v nekonečnej slučke na celej obrazovke. Ak sa teda zúčastňujete konferencie, bol by to skvelý spôsob, ako predviesť, čo ľudia robia na veľkej obrazovke v pozadí.

Je tu tiež niečo málo Šetrič obrazovky pre Mac pomocou ktorého môžete zobraziť všetky svoje obľúbené perá na pohotovostných obrazovkách. Toto funguje naozaj dobre s vizuálnymi CSS a Canvas Pens.

07. Prefill API

Pomocou rozhrania Prefill API môžete vo svojej dokumentácii ponúkať odkazy a ukážky bez toho, aby ste museli niečo kódovať

Pomocou rozhrania Prefill API môžete vo svojej dokumentácii ponúkať odkazy a ukážky bez toho, aby ste museli niečo kódovať

Jednou z najvýkonnejších a najužitočnejších funkcií aplikácie CodePen je rozhranie Prefill API, ktoré vám umožňuje pridávať odkazy a ukážky do dokumentácie a ukážkových stránok bez toho, aby ste museli v aplikácii CodePen niečo skutočne kódovať. Táto funkcia viedla k tomu, že sa CodePen stal veľkou súčasťou Mozilla Developer Network a tiež množstvom ďalších skvelých zdrojov.

Funguje to tak, že sa na určenú adresu URL odovzdajú konkrétne parametre. Predplnené pero kódom a možnosťami, ktoré vyberiete, môžete POST do codepen.io/pen/define/ s dátami, kde hodnota dát je JSON obsahujúca všetky vopred vyplnené bity. Napríklad tu je jednoduchý Hello World:

Po odoslaní tohto formulára sa dostanete do editora CodePen s vyplneným nadpisom a HTML pera podľa definovaných údajov.

Tu to tiež nekončí. Z tohto rozhrania API môžete definovať takmer všetky nastavenia pera, aby ste ponúkli kompletné vlastné editory vrátane preprocesorov. Môžete si prečítať viac o API Prefill tu .

08. Šablóny CodePen

Pri ukladaní pera máte tiež možnosť uložiť si ho ako šablónu. Funkcia šablóny vám umožňuje vytvoriť a uložiť predvolenú sadu kódu a nastavenia pre perá, ako je napríklad opakovane použiteľná štartovacia súprava.

Možno radi používate Markdown a Sass a máte k dispozícii jQuery - na to by ste si mohli pripraviť šablónu. Alebo niekedy môžete použiť Jade, Sass a responzívny metaznačku v. Aj na to by ste si mohli pripraviť šablónu. Šablóny však nie sú iba nastaveniami, ale aj skutočným kódom v editoroch HTML, CSS a JavaScript. Všetko, čo napíšete do panelov editora, bude zahrnuté v šablóne.

Sú neuveriteľne užitočné, keď pracujete s firemnou knižnicou alebo nastavením JavaScriptu a chcete rýchlo spustiť projekt. Tieto šablóny sa čoraz viac používajú aj v konkrétnych nastaveniach knižníc: pripraviť, pripraviť a vyraziť na cestu jednoduchým kliknutím, skutočne, ušetrí veľa času, keď budete mať pripravené reakciu, reakčnú doménu a základné lešenie pre komponenty.

Tento článok sa pôvodne objavil v čísle 283 sieťový časopis , časopis pre profesionálnych webových dizajnérov a vývojárov - ponúka najnovšie nové trendy, technológie a techniky. Prihláste sa na odber tu .

Súvisiace články: