Jak se díky tvorbě obrázků CSS stal lepší vývojář

Pouze větrný mlýn CSS

Celý život jsem chtěl být umělec jakéhokoli druhu. Chtěl jsem být autor, básník, malíř, fotograf a později vývojář. Pro mě bylo být vývojářem vždy o kreativitě, o aktu o vytvoření něčeho, co tam předtím nebylo. Jako frontendový vývojář rád vytvářím něco krásného, ​​co lidem dává vizuální radost a nabízí skvělý uživatelský zážitek. A díky tomu, že jsem se stal programátorem, dostal jsem nástroj, který bych mohl zneužít, abych se stal opět umělcem: CSS.

V poslední době se stále více lidí začalo věnovat tvorbě grafiky ze základních tvarů, které nám CSS dává. Všechno to začalo na codepenu. Moje první chuť CSS umění jsem dostala prostřednictvím CSS Quests a nedávno výzvou #dailycssimages. Obě výzvy nabízejí narážky na to, co můžete vytvořit pomocí CSS, nejsou povoleny žádné obrázky. Je to úžasný způsob, jak přimět lidi k této skvělé nové umělecké formě.

Moje vůbec první umění CSS

Proč?

Přestal jsem počítat, kolikrát se mě lidé ptali, proč bych ztrácel čas kódováním rakety s pouhým CSS, když by bylo mnohem jednodušší vytvořit SVG v Illustratoru a animovat ho pomocí JavaScriptu.

Odpověď je docela jednoduchá: Protože můžu. Je to výzva. Je to hra. Je to umělecká forma. Proč lidé „plýtvají časem“ kreslením realistických portrétů tužkami, když můžete stejně snadno pořídit fotografii? Proč ztrácíme čas na výukové nástroje, když umíme dělat hudbu pomocí počítače? Protože můžeme. Protože nám to dává radost. Protože se učíme.

Zde je několik věcí, které jsem se naučil, když jsem začal vytvářet umění CSS:

1. Více CSS

Když jsem vytvořil svůj první kodepen, abych přestavěl něco, co jsem našel na driblování s obyčejným CSS, nevěděl jsem nic o skejtování a všech zábavných věcech, které byste mohli dělat s transformacemi, když jsem právě začal můj start jako juniorský vývojář. Nikdy předtím jsem nenapsal kód na pozadí přechodu. Tak pečlivě jsem se naučil. Později přišly animace, pseudotřídy, transformace původu, vložené stíny krabic a všichni jejich přátelé.

Můj repertoár vlastností CSS se nyní ztrojnásobil na to, co jsem věděl dříve, což mi dalo přezdívku CSSWizardress :)

2. Stávat se rychleji

Když se vám něco líbí, děláte to častěji. Když to uděláte častěji, získáte lepší výsledky. Jakmile jste v tom dobří, zrychlíte se.

Vytváření umění CSS vás očividně naučí hodně CSS, takže samozřejmě čím více kódu kódujete, tím lépe dostanete. I když pravděpodobně nebudete muset kódovat sendvič s pouhým použitím CSS (i když, proč byste to nechtěli dělat?), Pravděpodobně jste si vybrali spoustu zkratek a úhledných triků, abyste dosáhli toho, co jste chci, ať už je to popisek, pěkné tlačítko, nebo skvělý efekt vznášení se na prvek uživatelského rozhraní ve velmi krátkém čase, což zase zaujme nadřízené nebo klienty.

3. Napište méně kódu

Jednou z výzev při vytváření CSS pouze s kódem je nepoužívat příliš mnoho značkových prvků. Lidé vytvářejí celou grafiku z jednoho div. Stává se uměleckou formou sebe sama. A i když méně kódů není vždy ve výrobě lepší, pomáhá hodně vědět, že můžete dělat skvělé věci, aniž byste zaplňovali své značky pomocí pseudo tříd nebo přechodů.

4. Komunita je klíčová

Stejně jako u mnoha věcí, sdílení toho, co jste vytvořili, je skličující věc a bylo to stejné pro mě, když jsem začal dělat grafiku z kódu. Na začátku jsem se o tom docela styděl, ale hodně mé práce se objevilo na Codepenu a v zpravodaji CSS Animation. Zpětná vazba, kterou jsem dostal, byla skvělá a díky ní jsem si jako tvůrce a vývojář jistější. Rád bych si myslel, že publikováním mých malých výtvorů budou ostatní lidé inspirováni k tvorbě vlastního umění ve svém vlastním jedinečném stylu. Když se podíváte na kód jiných národů a povídáte si s nimi, naučíte vás hodně o tom, jak dělat věci, a já jsem se zlepšil sledováním práce jiných lidí. Nedávno jsem byl pozván, abych živě vystupoval na pódiu na Lemmingsově akci, která byla děsivá a zároveň hodně legrace.

Jsem nadšený z toho, kam to vše povede, a těším se, až uvidím všechny skvělé práce, které lidé budou dělat s tímto úžasným nástrojem. Tak to zkuste, pokud jste tak již neučinili. Možná to bude zábava, možná se něco naučíte. Důležité je vytvořit.

Animovaná raketa CSS

Užitečné odkazy

  • Codepen - skvělý online editor / galerie pro vaši práci
  • Daily CSS Images Challenge - e-mailová výzva, která vám pomůže přijít s nápady
  • CSS Quests - v současné době se nic neděje, ale doufám, že se to vrátí
  • Sasha Tran na Youtube - Sasha vytváří CSS obrázky a sdílí její proces