1. O čem bude tento blog

Ilustrační obrázek k článku: O čem bude tento blog
AI zvládne rutinu - ale ne kreativitu. Tento blog vám ukáže, jak vytvářet zcela nové programátorské konstrukce v PHP, JS a CSS. Originální řešení, která jste nikde neviděli. A o tom to bude.

Mnoho programátorů dnes řeší: Jaká je budoucnost našeho povolání? Když AI jako Copilot zvládne 80 % rutinního kódu, co nám zbývá? Odpověď je jednoduchá: kreativita. To, co AI neumí – a dlouho neuměla.

AI je mistrem rutiny – opakuje, kombinuje, optimalizuje známé vzory. Ale když narazí na problém bez předlohy, stojí na místě. A právě tady přicházíte na scénu vy. Chcete být žádaný a dobře placený? Stáhněte se z bojiště, kde AI vyhrává – a přesuňte se tam, kde vytváříte něco, co ještě neexistuje.

Knih o kreativitě (i v programování) najdete spoustu. Většina je ale velmi teoretická. Já věřím jinému přístupu: pokud chcete kreativní programování učit, musíte ho umět i předvést. Proto kromě teorie v tomto blogu najdete i desítky zcela nových, originálních, dosud nepublikovaných programátorských konstrukcí. A protože jsem hlavně fullstack vývojář, budou převážně z PHP, JS a CSS.

Lampička, převod z .OBJ
čisté CSS bez JS

Jakými kreativními příklady začít?

Začneme něčím, co vás okamžitě zaujme: 3D grafikou v čistém CSS. Ano, bez jediného řádku JavaScriptu. Proč? Protože všichni říkají, že to nejde. Prohlížeče nemají podporu pro .OBJ nebo .FBX – a tak se všichni vrhají po Three.js a podobných knihovnách. My půjdeme jinou cestou: převedeme 3D model přímo do CSS.

Na první pohled to zní jako úkol pro vývojáře prohlížečů. Ale ukážeme si, že to jde zvládnout bez zásahů do prohlížeče – pouhou konverzí 3D scény do CSS.

První cíl je jednoduchý: vytvořit převodník, který vygeneruje zobrazitelný soubor s 3D scénou, tak aby se dal vložit do stránky stejně snadno jako obrázek nebo video. A hlavně: scénu bude možné otáčet bez použití JavaScriptu. Takový HTML fragment půjde vložit třeba přes TinyMCE, poslat mailem, nebo publikovat jako běžný článek.

Zní to složitě – a taky je. Za více než 10 let existence CSS 3D nikdo nic podobného neudělal. A pokud CSS dobře znáte, hned vás napadne proč: jak v CSS umístit libovolný polygon do 3D prostoru? A jak v CSS uložit stav – například rotaci scény kolem osy, kterou pak zkombinujete s další rotací?

Tohle jsou otevřené problémy, na kterých se kreativita opravdu pozná.

Kostka - animace, možnost expanze
čisté CSS, bez JS

Pokusil se někdo o něco podobného?

Na GitHubu existuje malý scriptík obj-to-html, který převádí 3D objekty do HTML. Podporuje ale jen trojúhelníkové sítě. Navíc mám pocit, že sám autor svému projektu příliš nevěří.

Připraveni na kreativní programování?

Bude převod z *.OBJ do .CSS to jediné, čím se budeme v tomto blogu zabývat? Rozhodně ne. Ještě zajímavější přístupy si ukážeme v PHP a JS – jazycích, kterými toto CSS vygenerujeme.

Pokud vás tato výzva zaujala, přihlaste se k odběru a těšte se na další kapitoly. Krok za krokem vás provedu světem originálních řešení – až se z vás stane programátor, kterého AI nezastoupí. Protože vy neopakujete - vy vytváříte.

  Následující