HTML & CSS
Vytvoření posuvníku — HTML struktura a CSS
Jak postavit solid HTML strukturu pro srovnávací posuvník a stylizovat ji moderním CSS. Flexbox, CSS variables, a responsive design v praxi.
Čtěte článek
Jakub Novotný
Senior Frontend Developer a UX Designer
Posuvník Vizuální s.r.o.
Specialista na interaktivní srovnávací posuvníky, before-after efekty a optimalizaci dotyku pro moderní web
14
let v oboru
Frontend vývoj a interaktivní komponenty
200+
projektů realizováno
E-commerce, design studia, renovační portály
47
článků publikováno
Tech magazíny, blog, dokumentace
8
open-source knihoven
Touch-optimalizované UI komponenty
Specializace
Čím se zabývám
Poslední léta se zaměřuji na komponenty, které spojují krásný design s plynulým výkonem
Srovnávací posuvníky
Before-after komponenty pro portfolia renovačů a design showcase. Přetahovací dělicí čáry s intuitivními gripy a šipkami.
Optimalizace dotyku
Mobilní a tabletová rozhraní, která skutečně fungují. Touch events, gesty, bez zbytečné latence na jakémkoli zařízení.
Frontend komponenty
Moderní HTML5, CSS Grid a Flexbox, JavaScript bez závislostí. Komponenty, které se efektivně načítají a hladce animují.
Performance optimalizace
Minimalizace repaints, optimální rendering pipeline, efektivní event handling. Stránky, které běží na 60 FPS.
Accessibility
WCAG AA compliance, ARIA atributy, klávesnicová navigace. Komponenty dostupné všem bez ohledu na jejich schopnosti.
UX/UI design
Intuitivní rozhraní bez instrukcí. Uživatelé instinktivně vědí, jak komponenty používat. Krása setkává s funkcionalitou.
O mně
Cesta do webového vývoje
Začátky s HTML5 a Canvas
Do světa webového vývoje jsem se dostal během vysokoškolských let, když jsem experimentoval s prvními HTML5 canvas prvky a interaktivními efekty. Bylo to na přelomu dekád, kdy se webové technologie teprve rodily. Fascinoval mě contrasting to reality — viděl jsem budoucnost interaktivního webu ještě dřív, než ji ostatní.
Studium a první projekty
Absolvoval jsem obor Webové technologie na Fakultě informatiky Masarykovy univerzity v Brně, kde jsem se zaměřoval na performance optimalizaci a dotyková rozhraní. Bylo to v době, kdy mobily začínaly dominovat internetu a všichni si uvědomovali, že desktop-first přístup už nestačí. Po studiu jsem pracoval postupně ve větších agenturách v Praze — začínal jsem na malých projektech, postupně se dostávám k vedení týmů.
Specialista na srovnávací komponenty
Během své 14leté kariéry jsem se stal expertem na vytváření hladkých, dotykově optimalizovaných komponent — zejména na srovnávacích posuvnících. Teď je aplikuji v reálných projektech pro renovační firmy a architektonické kanceláře. Není to náhoda. Posuvníky jsou fascinující problém — zvučí jednoduše, ale skrývají spoustu detailů. Jak přesně zpracovat touch events? Jak zajistit hladkou animaci bez jitter efektu? Jak zajistit, aby to fungovalo na iPhone 7 i na nejnovějším Androidu? To jsou otázky, které řeším každý den.
Vedení v Posuvník Vizuální s.r.o.
V Posuvník Vizuální s.r.o. vedu vývoj nové generace before-after komponent, které kombinují nejnovější CSS a JavaScript techniky s důrazem na accessibility a performance. Není to jen job — je to vášeň. Věřím, že dobrý design není jen o estetice, ale především o tom, aby uživatelé instinktivně věděli, jak se s rozhraním pracuje, bez nutnosti jakýchkoli instrukcí. Když vidím, jak se návštěvník portfolia posunuje levou a pravou rukou přes před a po fotky, aby viděl transformaci — v tom okamžiku víme, že jsme vytvořili něco správného.
Publikování a open-source
Svou práci sdílím skrz články v českých tech magazínech a jsem autorem několika open-source knihoven zaměřených na touch-optimalizované UI prvky. Věřím, že znalosti by neměly zůstávat zavřené v jedné kanceláři. Když si někdo vezme můj kód a vytvoří s ním něco úžasného — to je pro mě největší odměna.
Dovednosti
Technologie a postupy
Co opravdu ovládám a používám každý den
Články
Nejnovější publikace
Články, kde dělím své znalosti o posuvnících a interaktivních komponentách
JavaScript
JavaScript pro interaktivní posuvník — Funkcionalita tažení
Vanilla JavaScript bez závislostí. Touch events, mouse events, a jak zpracovat tažení dělicí čáry bez latence a jitter efektů.
Čtěte článek
Optimalizace
Optimalizace pro dotyk — Mobil a tablet
Jak vytvořit posuvník, který pracuje plynule na všech dotykových zařízeních. Velikost hitboxu, debounce, throttle a další techniky.
Čtěte článek
Portfolio
Posuvník v portfoliu — Ukázky renovací a designu
Praktické příklady, jak aplikovat before-after posuvníky na skutečné portfolia renovačů, architektů a design studií. Case studies a best practices.
Čtěte článekChcete se více dozvědět o srovnávacích posuvnících a before-after komponentách?
Jít na kategorie článkyMějte se mnou kontakt
Máte dotaz ohledně interaktivních komponent, before-after posuvníků, nebo chcete spolupracovat? Jsem připraven pomoci.
Napsat zprávuNebo navštivte hlavní stránku Posuvník Vizuální s.r.o.