Michal Ciesla

noisee je výstupem mé bakalářské práce na Unicorn University, která se zabývá procedurálně generovanými gradientními šumy (jako např. Perlin Noise). Jedná se o interaktivní grafický nástroj, který uživatelům umožňuje vizualizovat a vyzkoušet různá využití gradientních šumů.

Třetí verzi webu Tanečního studia jsem chtěl využít k celkové modernizaci jak vizuální identity, tak celé architektury aplikace.

Nový grafický design by měl celou vizuální identitu posunout na modernější styl a zjednodušit ji, jelikož ta předchozí byla problematická při tisk na např. propagační materiály.

Nová architektura odděluje front-end a back-end; front-end je vytvořen s pomocí Gatsby a komunikuje s API na PHP Slim back-endu pomocí GraphQL. Toto oddělení mne nutí dodržovat správné způsoby návrhu API a zároveň poskytuje sílu frameworku React a balíčků ekosystému NPM.

Nově oproti druhé verzi poskytuje šifrování osobních údajů, robustní architekturu a cache vybraných požadavků, což dohromady zlepšuje bezpečnost i výkon webvé aplikace.

Velmi upřímně se nemohu dočkat, až budu mít připravený backend a budu moci začít vytvářet první betaverze třetí iterace webu Tanečního studia. To však kvůli ohromnému rozsahu datové vrstvy bude ještě nejakou chvíli trvat.

Jak je všem známo, v roce 2020 byl svět zasažen pandemií nemoci COVID-19. Kvůli této pandemii přešla má vysoká škola na plně distanční výuku a po uvolnění lockdownu jsem tedy měl výrazně více času pracovat. Ve společnosti HSC Computers, kde jsem před lockdownem pracoval jednou týdně, jsem tedy mohl pracovat několik dní v týdnu.

Tou dobou velké množství zákazníků nakupovalo nové počítače ve velkém množství a každy z nových počítačů musel být předinstalován a vybaven programy dle potřeb zákazníka. Jako programátor jsem si přirozeně chtěl co nejvíce zjednodušit práci a automatizovat maximum tohoto procesu. Zřizovací balíčky, které jsou pro toto ve Windows určené, nebyly příliš spolehlivé a některé aplikace se pomocí nich nainstalovat nedaly. Vytvořil jsem tedy v .NET Core konzolovou aplikaci, která z JSON konfigurace vytvořila PowerShell skript vykonávající chtěné operace a společně s instalátory programů jej zabalila do spustitelného balíčku.

Velkým pokrokem bylo, když jsem objevil službu Chocolatey, která poskytuje nástroj příkazové řádky pro instalaci aplikací z jejich obsáhlého registru – je v podstatě obdobou linuxových správců balíčků Aptiutude nebo Yum, ale pro Windows. Tyto instalace hlavně zpravidla nevyžadují žádný zásah uživatele, což extrémně zrychluje instalaci. Chocolatey jsem si natolik oblíbil, že jej používám běžně i na jednorázové instalace - i instalace Chocolatey je velmi jednoduchá a poté nemusím vyhledávat instalátory aplikací ať na svých flash discích, tak na Internetu.

Výsledek také nebyl úplně spolehlvý, ale po pár měsících ladění jsem program dostal do stavu, kdy bylo velmi rychlé a jednoduché při přijetí zásilky počítačů vytvořit instalátor pro daného zákazníka a paralelně předinstalovávat několik počítačů pouze s minimálním zásahem z mé strany. Navíc se JSON konfigurace ukázaly jako dobrý doplněk dokumentace, jelikož obsahovaly softwarovou výbavu, uživatelské účty, připojení do domény a další informace.

Nepochybně jedněmi z organizací nejvíce postižených pandemií COVID-19 byly školy, obzvláště základní školy. Přechod na distanční výuku byl náročný pro žáky i učitele.

Jednoho dne mne kontaktoval můj bývalý učitel ze společnosti Learniga a požádal mne, zda bych byl schopný vytvořit aplikaci, která by usnadnila obnovování hesel uživatelů ve službě Office 365. Po prozkoumání dokumentace Microsoft Graph API Beta a domluvě detailů jsem se pustil do vývoje aplikace nazvané R3set.

Velmi rád pracuji s frameworkem Universal Windows Platform, jelikož nabízí vzhled nativní pro Windows 10 a navíc jsou aplikace distribuovány přes Microsoft Store, což velmi zjednodušuje balíčkovádí aplikací a jejich dodání uživatelům. Microsoft Graph API též poskytuje knihovnu pro .NET, což komunikaci s ní značně ulehčilo.

Správcům se po přihlášení do aplikace zobrazí seznam žáků seskupených podle třídy a během pouhých dvou kliknutí je možné změnit heslo uživatele, což je ohromné zrychlení oproti běžnému způsobu přihlášení do Centra pro správu Office 365, přepnutí na modul uživatelů, nalezení uživatele v dlouhém seznamu a vyplněním formuláře pro změnu hesla.

V prosinci 2020 se aplikace R3set stala mou první zakázkovou aplikací, která spatřila světlo světa, a je nabízena společností Learniga.

Jeden detail o mě: Naprosto neumím zpívat. Ale zpívám velmi rád.

Jedna funkcionalita, která mi ale v Musixmatch chybí, je způsob, jak dobře znázornit více hlasů zpívajících najednou. Jednoho dlouhého večera mě napadlo si vytovřit vlastní aplikaci s texty písní, ovšem specializovanou na písně, kde zpívá více hlasů nebo zpěváků. Věděl jsem, že nebudu mít kapacitu na časovou synchronizaci, ale věřil jsem, že bouchat do mezerníku nebude pro (případné) uživatele problém.

Ve stejnou dobu jsem také objevil front-endový framework Gatsby, který z React komponent vytváří statické webové stránky. To mi přišlo jako zábavný kousek a navíc jsem zjistil, že je Gatsby skvělý ve vytváření stránek z pouze datových souborů (jako JSON) a šablony.

Tedy jsem vyrobil nový Gatsby projekt zvaný Singagon a naprogramoval funkcionality, které z JSON souborů obsahující texty písní vytovří karaoke text, který navíc rozlišuje jednotlivé hlasy.

Tou dobou jsem také hodně přemýšlel nad algoritmem Perlin Noise, o kterém jsem později psal bakalářskou práci, a spolu s ním grafickou knihovnou p5.js. Do pozadí karaoke jsem s jejich pomocí tedy vytvořil dle mého názoru zajímavý vizuální efekt.

Kvůli bakalářkské práci a následně projektům s vyšší prioritou jsem Singagon musel odložit, ale velice se těším, až se k němu jednoho dne vrátím a dotáhnu jej do konce.

Uhhh...cože?

Gramatický nácek, v angličtině Grammar Nazi, je pojem internetové populární kultury označující člověka, který dbá na dodržování pravopisu a upozorňuje ostatní na jejich chyby, a to ať už přátleksým, tak agresivním způsobem.

Už je to tak, agresivně hlídám dodržování pravopisu a nejsem schopný nepřehlédnout bezcitné urážky jazyka českého. A v jednu dobu jsem na takové případy měl opravdu štěstí, rozhodl jsem se tedy je archivivat do Sbírky gramatického nácka. S její pomocí jsem si také chtěl vyzkoušet napsat textový editor s podporou Markdown syntaxe, přihlašování pomocí Twitter OAuth, zajímavé CSS a způsob hodnocení příspěvků podobný Redditu.

Měl jsem ze svého výplodu radost, ta ale s přibývajícími starostmi čerstvého studenta vysoké školy rychle opadla a s pozdějšími změnami na pozadí webu jsem úspěšně rozbil přihlašování. Tím jsem oficiálně tento projekt opustil, nechal jsem jej však přístupný a můžete na něm najít pětici češtinářských prohřešků, na které tehdy jsem narazil. Doufám, že Vás alespoň některý z nich pobaví!

Na střední škole jsem díky Studentskému trenérskému centru Microsoft často a aktivně komunikoval s vedením školy, což jednoho dne, pár týdnů před prvním dnem otevřených dveří v daném roce, vedlo k nápadu zapisovat účastníky, aby mohla být jednoduše analyzována účast a případně účastníky později kontaktovat.

Vytvořil jsem tedy miniaturní webovou aplikaci, do které mohli zapisovatelé rychle zadávat účastníky. Aplikace byla naprogramována v PHP a kromě zadávání účastníků uměla i exportovat data do sešitu Excelu a zobrazovat graf účasti, který mohl být promítán.

Aplikaci jsem vymyslel i na mé poměry (nejsem grafik) dosti zajímavý design, kterým jsem dále sjednotil větší část celého dne otevřených dveří – například příspěvek na webových stránkách školy nebo informační cedule vyvěšené ve škole.

Druhou verzi webu Tanečního studia jsem plánoval udělat bezpečnější, přehlednější a rozsáhlejší. Celý web jsem začal psát od nuly, a to podle návrhového vzoru MVC - ten zajistil přehlednost, tedy alespoň ze začátku.

Při prvním vydání jsem všech tří cílů dosáhl: neukládal jsem hesla v plaintextu a používal jsem komunikaci s databází zabezpečenou proti injection útokům, zmíněný návrhový vzor MVC přinesl potřebnou přehlednost do zdrojového kódu a rozsah povýšil tento projekt z hodnosti webových stránek na hodnost webové aplikace.

Přihlášky, události, novinky, generovaný rozvrh hodin, řada konfigurovatelných bloků webu, vlastní rezervační systém, administrační systém a interní subaplikace pro uchovávání, přehrávání a sdílení hudebních mixů – no zabralo mi to kolem půl roku na začátku a od té doby přibyla řada dalších funkcí, sem nějaké oprava, tam nějaký edge case. Tato webová aplikace je bez pochyby to největší, co jsem do té doby vytvořil a tento status si držela až do roku 2021, kdy jsem v zaměstnání pracoval na proprietárním CMS.

Samozřejmě jsem v průběhu let objevil řadu nepříliš ideálních vlastností, tentokrát z hlediska výkonu, navíc jsem začal objevovat právní regulace spojené s uchováváním osobních dat a prezentování materiálů pod autorskými právy, musel jsem tedy začít přemýšlet nad další verzí, která to napraví.

Úvod do programování pro mě na střední škole nebyl příliš náročný, jelikož jsem se kvůli Minecraftu již o dva roky dříve začal učit programovat v Javě. V hodinách jsem ale neměl příliš co dělat, protože jsem měl práci hotovou velmi rychle. Ve druhém ročníku jsem tedy začal pracovat na hře inspirované flashovkou Farmář, kterou jsem hrával na základní škole. Protože jsem ale nic lepšího v C# neuměl, celou hru jsem naprogramoval s konzolovým grafickým rozhraním.

Vyloženě jsem se bavil možnostmi menu, které se dalo ovládat pomocí šipek, ne čísel, jak jsme to dělávali ve škole. Navrhoval jsem textury z Unicode znaků, dával náhodné ceny prodávaným plodinám i nakupovaným semínkům, hrál jsem si s měsíčními fázemi a sám jsem si vymyslel serializaci herních dat, která se dala ukládat, přenášet a načítat.

Co mne dodnes udivuje je, že jsem celý tenhle nesmyls vytvořil bez nejmenší představy o tom, co je to objektově orientované programování - celá hra je naprogramována procedurálně. Párkrát jsem se pokoušel naprogramovat obdobnou hru znovu a lépe, ale nikdy jsem se nedostal přes hlavní menu.

V té době jsem byl v Tanečním studiu již pátým rokem a jako člověk znalý informačních technologií jsem byl pověřen správou webových stránek, které tehdy běžely na jedné z šablon na Webnode. Všechno to začalo tím, že jsem tuto šablonu upravoval tak, aby její barevné schéma odpovídalo barvám vizuální identity Tanečního studia. To nebyl příliš problém - CSS jsem tehdy relativně obstojně ovládal již zhruba dva roky.

Při procházení obsahu jsem ale narazil na něco, co od té doby neodpustím WYSIWYG editorům: dávají uživatelům příliš mnoho svobody. Nadpisy jaksi měly čtyři různé odstíny červené (bez jakéhokoliv systému) na stránkách v kombinaci zelené a fialové barvy. Tehdy jsem si dal za cíl vytvořit celé nové webové stránky, které budou chytřejší než ty stávající a zároveň neumožní takováto zvěrstva.

S psaním a hostováním dynamických webových stránek jsem neměl absolutně žádnou zkušenost, vydal jsem se tedy na průzkum a zjistil jsem, že nejlevnější možností je napsat webové stránky v PHP a hostovat je na některém z cenově velmi dostupných PHP/MySQL webhostingů. Prázdniny 2015 jsem tedy strávil učením se PHP a tvorbou první verze nových webových stránek Tanečního studia Kamily Hlaváčikové.

Přesně jak jsem chtěl, tyto stránky nedávaly možnost upravovat obsah společně se stylem; administrace obsahu byla spíše administrací vlastností objektů a veškeré stylování bylo předpřipravené. Zde jsem také objevil knihovnu komponent Material Design Lite, která pomohla výrazně zrychlit vývoj front-endu a naučila mne základy responsivního designu webových stránek.

Přestože jsem na tento projekt byl pyšný, velmi rychle jsem začal náhodně narážet na informace, že velkou řadu operací na back-endu dělám špatně – hesla uchovávaná bez šifrování, zranitelnost vůči SQL-injection útokům, nepřehledná struktura kódu – to vše vedlo k tomu, že zhruba půl roku po nasazení tohoto webu do provozu jsem začal pracovat na druhé verzi.