Technická ukázka

Pod kapotou ptacekdenis.cz

Tenhle web je moje technická ukázka. Nepopisuji tu seznam technologií, ale co je uvnitř, proč to tak je a co z toho máte vy. Každá položka vychází z toho, jak web skutečně funguje.

Stručně, bez technického jazyka

Stránky jsou hotové předem, proto se načítají rychle a provoz je jednoduchý.
Formulář údaje ověří a uloží dřív, než odejde e-mail, takže se zpráva neztratí.
Měření návštěvnosti se zapne jen po vašem souhlasu a web funguje stejně, i když ho odmítnete.
Web jde ovládat klávesnicí a respektuje nastavení omezení animací.

Pokud vás zajímají podrobnosti, jsou níže rozdělené do vrstev.

Změřte si to sami

Čísla výkonu se mění a nejsou vždy stejná. Proto je tu neuvádím. Nezávislé měření od Googlu si spustíte jedním kliknutím, a audit webu zdarma můžete pustit i na jakýkoli jiný web.

Změřit tento web v PageSpeed Insights Otestovat jiný web zdarma

Otevře se v novém okně.

Sedm vrstev tohoto webu

Zážitek

To, co vidí a ovládá návštěvník.

Mobil jako první

Rozložení vzniká nejdřív pro úzký displej a teprve potom se rozšiřuje na větší.

Proč: Velká část návštěvníků přichází z telefonu.
Kdy se to hodí: Vždy u firemního webu.
Co z toho máte: Web je čitelný a ovladatelný tam, kde ho lidé skutečně otevírají.

Přístupnost jako součást návrhu

Ovládání klávesnicí, viditelné zaostření, odkaz „Přeskočit na obsah“ a respektování nastavení omezení animací.

Proč: Web má jít použít i bez myši a lidem, kterým pohyb na stránce vadí.
Kdy se to hodí: Vždy.
Co z toho máte: Širší okruh návštěvníků a méně překážek mezi nimi a kontaktem.

Vlastní písma bez cizích serverů

Písma jsou součástí webu a nenačítají se z cizí domény.

Proč: Méně požadavků a méně třetích stran.
Kdy se to hodí: Vždy.
Co z toho máte: Stabilní vzhled a rychlejší start stránky.

Aplikace

Z čeho se web skládá.

Next.js, React a TypeScript

Stránky se skládají z opakovaně použitelných komponent v kódu s kontrolou typů.

Proč: Stejná součást vypadá a chová se všude stejně a část chyb se zachytí dřív, než je uvidí návštěvník.
Kdy se to hodí: Když web poroste o další stránky a funkce.
Co z toho máte: Snazší rozvoj a méně překvapení při úpravách.

Statický export

Web se předem vygeneruje do hotových souborů HTML.

Proč: Návštěvníkovi se nic nepočítá při každém otevření stránky.
Kdy se to hodí: U firemní prezentace, kde se obsah nemění každou minutu.
Co z toho máte: Rychlé načtení a jednodušší provoz. Pokud má obsah upravovat tým sám, řeší se to zvlášť (redakční systém).

Data

Co se ukládá a jak je to chráněné.

Databáze PostgreSQL

Poptávky z formuláře a výsledky auditů se ukládají do databáze.

Proč: Údaje se neztratí, když selže odeslání e-mailu.
Kdy se to hodí: Kdykoli mají být údaje dál zpracovávané.
Co z toho máte: Poptávka přežije i výpadek e-mailu.

Výsledek auditu přes tajný odkaz

Výsledek je dostupný jen přes dlouhý náhodný odkaz. V databázi je uložený pouze jeho otisk, ne odkaz samotný.

Proč: Výsledek má vidět ten, kdo audit spustil.
Kdy se to hodí: U jakéhokoli nástroje, který zobrazuje cizí údaje bez přihlášení.
Co z toho máte: Soukromí bez účtů a hesel.

Integrace

S čím web mluví.

Samostatné API

Formuláře a audit komunikují s oddělenou serverovou částí napsanou v Symfony. Server ověřuje údaje, hlídá počet požadavků a odfiltruje roboty skrytým polem.

Proč: Web zůstává statický a rychlý, dynamické věci řeší samostatná vrstva.
Kdy se to hodí: Když web potřebuje ukládat data nebo spouštět procesy.
Co z toho máte: Rychlý web a zároveň skutečná funkčnost bez ručního zpracování.

Google PageSpeed Insights

K technické kontrole přidává audit měření rychlosti od Googlu, pokud je služba dostupná.

Proč: Rychlost je pro návštěvníka vidět víc než kterákoli jiná vlastnost webu.
Kdy se to hodí: Při každé kontrole nebo redesignu webu.
Co z toho máte: Rychlost se měří stejným nástrojem, který používá odborná veřejnost.

Měření návštěvnosti až po souhlasu

Google Analytics se zapne teprve po vašem souhlasu. Když ho odvoláte, soubory cookies se smažou.

Proč: Návštěvník rozhoduje o tom, zda je sledován.
Kdy se to hodí: Vždy, když web měří návštěvnost.
Co z toho máte: Žádné sledování bez souhlasu a přehled o tom, co na webu funguje, u těch, kdo souhlasí.

Provoz

Kde to běží.

Statický web a oddělené API

Web běží jako statické soubory na hostingu WEDOS, serverová část na vlastní subdoméně.

Proč: Statická část nezávisí na běhu aplikace.
Kdy se to hodí: Když se prezentace má načítat rychle a provoz má být jednoduchý.
Co z toho máte: Méně součástí, které se mohou pokazit při běžném prohlížení webu.

Fronta úloh a kontejnery

Audit běží na pozadí ve frontě (Symfony Messenger a Redis) a serverová část je zabalená v kontejneru Dockeru.

Proč: Dlouhá práce nezdržuje návštěvníka a prostředí je opakovatelné.
Kdy se to hodí: Při práci, která trvá déle než pár sekund.
Co z toho máte: Stránka s výsledkem se aktualizuje sama a nemusíte čekat na odpověď serveru.

Kvalita

Jak se hlídá, že to funguje.

Testy a automatické kontroly

Testy webu a serverové části, kontrola stylu kódu a kontrola typů. Část z nich běží automaticky v GitLab CI.

Proč: Chyba se zachytí při změně, ne až u návštěvníka.
Kdy se to hodí: Vždy, když se web dál vyvíjí.
Co z toho máte: Odvaha ke změnám bez strachu, že se rozbije něco jiného.

Kontrola exportu před nasazením

Skript projde každou stránku a ověří title, popis, canonical, jednu hlavní H1, pořadí nadpisů, odkazy, sitemap a robots.

Proč: Chyby, které poškozují vyhledávání, se hledají před zveřejněním.
Kdy se to hodí: U každého nasazení.
Co z toho máte: Technické SEO je ověřené, ne jen slíbené.

Dodání

Jak se změna dostane na web.

Verzování a předvídatelné nasazení

Změny jsou verzované v Gitu. Nasazení je postup krok za krokem: sestavení, ověření, balíček a nahrání na hosting.

Proč: Je vidět, co se kdy změnilo, a nasazení nestojí na něčí paměti.
Kdy se to hodí: U každého projektu, který se bude rozvíjet.
Co z toho máte: Změny jdou dohledat a v případě potřeby vrátit.

Co tato stránka netvrdí

Není to klientská reference, jen ukázka práce na vlastním webu.
Neříká nic o webech klientů ani o jejich výsledcích.
Neuvádí čísla výkonu. Ta se mění a patří k nezávislému měření výše.
Statický web není vhodný na všechno. Co se hodí vám, rozhoduje vaše situace, ne tahle ukázka.

Služby

Pro vývojové týmy. Pokud hledáte externího vývojáře, je tato stránka technickým podkladem. Technologie výše používám i pro vlastní klienty. Externí spolupráce na vývoji

Co by tohle znamenalo pro váš projekt?

Popište mi situaci. Řeknu vám, co z toho dává smysl pro vaši firmu a co ne. Nic vás nezavazuje.

Probrat projekt

Nebo rovnou napište na info@ptacekdenis.cz či zavolejte na +420 737 096 176. Odpovídám osobně.