Ahoj, jsem Jiří Satora
Webový vývojář, který se věnuje tvorbě webových stránek, webových aplikací a také webových her.
O mně
Velmi mě baví tvorba webových stránek a hlavně obecně webové programování. Obzvlášť mě baví programovat v JavaScriptu (dnes už v TypeScriptu), protože s jeho pomocí je na webu možné vytvořit snad cokoliv. V části projekty si můžete prohlédnout, co jsem zatím vytvořil.
S programováním jsem začal, protože jsem se chtěl naučit tvořit hry. Vyzkoušel jsem toho víc a věnoval jsem se například hernímu enginu Unity, modelování objektů v Blenderu, a spoustě dalším věcem. Postupem času jsem se ale postupně přesunul k tvorbě webových stránek a u toho jsem zůstal. Pokud dělám hry, tak již jen webové.
Kromě programování mě v poslední době začalo bavit také kreslení. Zatím v tom sice nejsem moc dobrý, ale myslím že se to lepší. Občas své kresby zveřejňuji na Pinterestu.
Oblíbené aktivity
Programování, hraní na PlayStationu, kreslení
Oblíbená hudba
Beartooth, Motionless in White, Anti-Flag
Oblíbené jídlo
Pizza, kebab
Moje dovednosti
HTML/CSS
Základem pro tvorbu webů je umět jazyky HTML a CSS. Myslím že tyto technologie ovládám celkem dobře. Vždy ale samozřejmě existuje prostor pro zlepšení.
Less
Jelikož nechci psát CSS styly jen do jednoho souboru, tak používám preprocesor Less. Navíc se mi díky tomu CSS styly snadněji píší a můj kód je přehlednější.
JavaScript
Jsem velký nadšenec do JavaScriptu. Líbí se mi, že s jeho pomocí můžu na webu vytvořit snad cokoliv a může to klidně být i něco složitějšího.
TypeScript
Od doby co jsem se naučil TypeScript, už se ke klasickému JavaScriptu asi nevrátím. Na složitější a větší projekty je daleko lepší použít TypeScript.
Java
Poslední dobou se věnuji studiu programovacího jazyka Java, což také dokládá můj poslední projekt "Servlety a JSP - Návod". Zatím jsem ale spíš začátečník.
React
Populární JavaScript knihovnu jménem React používat umím. Nemám s ní ale zatím příliš velké zkušenosti, protože jsem toho s její pomocí zatím moc nenaprogramoval.
Node.js
Backend jsem pro své aplikace zatím programoval jen v Node.js, kde jsem používal hlavně framework jménem Express. Sice mám v backend programování méně zkušeností než ve frontend programování, ale i tak si myslím, že v Node.js celkem programovat umím.
MySQL
Pro databáze používám MySQL. V NodeJS pro komunikaci s databází používám ORM nástroj jménem Sequelize. Dotazovací jazyk SQL mi ale také není cizí a umím jej.
Webpack
K sestavování webových aplikací používám Webpack. Protože je ale velmi konfigurovatelný, tak pro mě jeho nastavování občas není jednoduché a často při tom vyhledávám na internetu. Rozhodně nejsem na technologie tohoto typu žádný expert.
Three.js
Pomocí knihovny Three.js můžu na webu dělat různé věci týkající se 3D grafiky. Umožňuje mi to vytvořit si například vlastní prohlížeč 3D modelů nebo programovat 3D hry. O Three.js toho vím celkem dost a mám o této knihovně i web.
Git
Stejně jako většina vývojářů, tak i já používám verzovací systém jménem Git, abych se v případě potřeby mohl kdykoliv vrátit zpět.
Figma
Pro grafický návrh webových stránek používám Figmu. Rozhodně se ale nepovažuji za žádného designéra. Ne vždy se mi web povede navrhnout tak, aby vypadal dobře, a když něco navrhuji, tak často dlouho přemýšlím nad tím, jak něco udělat.
Projekty
V této části si můžete prohlédnout moje projekty. Můžete si zvolit, jestli chcete vidět jen to nejlepší nebo všechny mé projekty.
Servlety a JSP - Návod
Webové stránky s tutoriálem o Servletech a JSP. Tutoriál obsahuje spoustu ukázek kódu se zvýrazněnou syntaxí a navíc si uživatel může u většiny ukázek prohlédnout celou adresářovou strukturu projektu, ve kterém se ukázka kódu nachází.
Použité technologie: HTML, CSS, TypeScript, Webpack
String Striker
Webová rytmická hra využívající YouTube videí, ve které hráči hrají noty, které se posouvají po obrazovce. Jedná se o největší projekt, který jsem zatím vytvořil. Hra umožňuje hráčům ukládat si své nejlepší skóre v žebříčku, získávat achievementy, odemykat nové songy, přidávat si ostatní hráče do přátel, vytvářet vlastní songy pomocí editoru a spoustu dalších věcí.
Použité technologie: HTML, CSS, JS, Three.js, Node.js, MySQL, Redis, Webpack
Kuře na silnici
Jednoduchá webová hra, ve které uživatel hraje za kuře a snaží se přecházením přes silnice dostat co nejdál. Web umožňuje vytvořit si účet a uložit si své nejlepší skóre do globálního žebříčku.
Použité technologie: HTML, CSS, JS, Three.js, PHP, MySQL, Webpack
Three.js návod
Webové stránky s tutoriálem o JavaScript knihovně Three.js. Tutoriál obsahuje spoustu interaktivních ukázek, takže si uživatel může prohlédnout výsledek přímo na stránce, aniž by si sám něco programoval. Na webu se také nachází prohlížeč 3D modelů, ve kterém si uživatel může prohlédnout mé 3D modely, které jsem v minulosti vytvořil, a zdarma si je stáhnout.
Použité technologie: HTML, CSS, JS, Three.js, Webpack
Webpack tahák
Webové stránky, které představují tahák pro Webpack. Kromě toho se tam ale také nachází tutoriál, který uživateli pomůže Webpack začít používat.
Použité technologie: HTML, CSS, JS, Webpack
Testování v JS - Tahák
Jednoduchá webová stránka, která představuje tahák pro testování v JavaScriptu. Nachází se tam základní informace o psaní testů pomocí nástroje jménem Vitest.
Použité technologie: HTML, CSS
Díla na maturitu
Webová aplikace, která obsahuje materiály k přípravě na ústní maturitu z češtiny. Umožňuje uživatelům vybrat si materiál a začít jej číst nebo se podle něj nechat otestovat. Také tam mohou sami uživatelé vytvářet své vlastní materiály a sdílet je tak s ostatními uživateli webu.
Použité technologie: HTML, CSS, JS, React, Node.js, MySQL
React taháky
Jednoduchá webová stránka, která obsahuje ke stažení taháky v PDF souborech pro populární JavaScript knihovnu jménem React.
Použité technologie: HTML, CSS
Teorie grafického designu
Webové stránky s tutoriálem o teorii grafického designu. I když je to web o grafice, tak samotný web vypadá z grafického hlediska naprosto otřesně. Tento projekt se mi nepovedl.
Použité technologie: HTML, CSS, JS
Web Design Tahák
Webové stránky, které slouží jako tahák pro web design. Co se týče grafiky, tak jsou tam věci, které jsem mohl udělat lépe. Například u karet na hlavní stránce mohl být větší padding.
Použité technologie: HTML, CSS, JS
Návrhové vzory v JS
Webové stránky s přehledem návrhových vzorů v JavaScriptu. Jsou tam popsány všechny Gang of Four návrhové vzory + Object Pool. Myslím si ale, že tento web pravděpodobně nikdo kromě mě moc používat nebude. Namísto jasného vysvětlení se tam nacházejí spíš ukázky kódu, které spousta lidí nemusí vůbec pochopit.
Použité technologie: HTML, CSS, JS
Algoritmy a datové struktury v JS
Webové stránky s tutoriálem, který uživatele postupně seznamuje s různými algoritmy a datovými strukturami. Tutoriál obsahuje spoustu interaktivních ukázek, které uživateli umožňují vidět, jak se postupně provádí kód a vizuálně si prohlédnout, jak se pracuje s různými datovými strukturami.
Použité technologie: HTML, CSS, JS
Smartmenus tutoriál
Webové stránky s tutoriálem o JQuery pluginu jménem Smartmenus, který slouží pro tvorbu menu.
Použité technologie: HTML, CSS, JS
Funkce v JS
Jednoduchá webová stránka, která obsahuje téměř vše o funkcích v JavaScriptu.
Použité technologie: HTML, CSS
Slick tutoriál
Webové stránky s tutoriálem o JQuery pluginu jménem Slick, který slouží pro tvorbu sliderů.
Použité technologie: HTML, CSS, JS
Piš všemi deseti
Webová aplikace, pomocí které se uživatel může učit psát všemi deseti. Nachází se tam i možnost zaregistrovat se a uložit si tak svůj pokrok.
Použité technologie: HTML, CSS, JS, PHP
MySQL tahák
Webové stránky, na kterých se nachází tahák o databázi MySQL rozdělený na deset částí.
Použité technologie: HTML, CSS, JS
JS Promisy
Webové stránky, na kterých se nacházejí tři články o JavaScript promisech. Uživatel se tam může dozvědět co JavaScript promisy jsou, proč jsou užitečné a naučit se je používat.
Použité technologie: HTML, CSS, JS
Pole v JS
Webové stránky o polích v JavaScriptu. Uživatel si tam může přečíst základní informace o polích, dozvědět se co je to destrukturování, spread operátor, rest parametr a hlavně se tam nachází vysvětlení všech metod týkajích se polí.
Použité technologie: HTML, CSS, JS
Strukturování CSS kódu
Webové stránky, které se zaměřují na strukturování CSS kódu. Nachází se tam článek o metodikách pro organizaci CSS kódu, o tom jak dělit kód do složek a také si tam uživatel může přečíst o tom, jaký byl v době tvorby těchto webových stránek můj postup při tvorbě webu. To již ale není aktuální, protože v současnosti při vytváření webových stránek postupuji o dost lépe a jinak.
Použité technologie: HTML, CSS, JS
CSS Layouty
Webové stránky o tvorbě webových layoutů pomocí CSS. Uživatel si tam může přečíst o tom, jak se dříve používala pro tvorbu layoutů CSS vlastnost float a také se naučit používat modernější CSS technologie jménem Flexbox a CSS Grid. K tomu ale na internetu rozhodně existují lepší zdroje než tento web. Graficky vypadá také dost špatně.
Použité technologie: HTML, CSS
Ukázky kódu v HTML
Naprosto zbytečná webová aplikace, která slouží pro psaní ukázek kódu k jejich barevnému zobrazení na webových stránkách. Namísto této aplikace použijte raději knihovnu highlight.js. Nadpis a seznam výhod používání aplikace na hlavní stránce bych dnes nejraději smazal.
Použité technologie: HTML, CSS, JS
Less preprocesor návod
Webové stránky s tutoriálem o CSS preprocesoru jménem Less. Uživatel se tam může dozvědět co to CSS preprocesor je a naučit se Less používat.
Použité technologie: HTML, CSS, JS
Programování her v JavaScriptu
Webové stránky o programování her v JavaScriptu. Nachází se tam krátký tutoriál, pár ukázek her naprogramovaných v JavaScriptu a také interaktivní Canvas tahák, který se může hodit nejen při tvorbě her.
Použité technologie: HTML, CSS, JS, PHP
Texturování v Substance Painteru
Webové stránky s tutoriálem o texturování 3D objektů pomocí programu Substance Painter. Jedná se o první web, který jsem zveřejnil na internetu. Nejhorší je v jeho případě pravděpodobně responzivita, která funguje dobře jen na hlavní stránce.
Použité technologie: HTML, CSS
