1. O čem bude tento blog

Ilustrační obrázek k článku: O čem bude tento blog
Tento blog bude o tom, jak se stát kreativním programátorem. Kreativním programátorem myslím takového, který dokáže vytvořit zcela nové, nikde nepublikované programátorské algoritmy a konstrukce.

Dnes si mnoho programátorů klade otázku: Jaká je budoucnost programování v době, kdy AI (např. Copilot) přebírá většinu rutinních úloh? Budou programátoři za pár let vůbec potřeba? A jak se můžeme odlišit, když většinu kódu vygeneruje umělá inteligence?

Klíčové je pochopit, že AI zvládá hlavně rutinu – tedy úkoly podle naučených vzorů. Pokud chcete být žádaný (a dobře placený) vývojář, nemůžete postupovat stejně. AI totiž rutinu zvládá lépe než my. Odlišit se můžeme jen tím, co AI neumí. A to je kreativita.

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 u CSS, přesněji u jeho podmnožiny CSS 3D. Proč právě tady? Protože 3D scéna na stránce zaujme na první pohled. Jenže: dnešní prohlížeče nemají nativní podporu pro 3D formáty jako FBX, OBJ, 3MF nebo STL. A pokud je chceme zobrazit, musíme natahovat objemné JS knihovny. Já se pokusím tuto podporu doplnit čistě pomocí 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 téma zaujalo, přihlaste se k odběru a těšte se na další kapitoly. Krok za krokem budeme objevovat nové techniky a postupy, až se vám tento přístup stane vlastní a stanete se skutečně kreativním programátorem!

  Následující