Když test napíšete, spusťte ho a ujistěte se, že selže. To zní divně, ale je to klíčové. Pokud test projde hned napoprvé, nemáte jistotu, že opravdu testuje to, co chcete. Úmyslně změňte testovanou funkci a sledujte, že test začne padat. Pak změnu vraťte. Tento postup vám ukáže, že test má vypovídací hodnotu. Nakonec spusťte celou testovací sadu a sledujte, že je zelená. Pak se můžete pustit do dalšího testu. Postupně rozšiřujte pokrytí, ale nenechte se zmást čísly. Lepší je pět smysluplných testů než padesát, které jen opakují to samé.<br>
<br>
<br>
<br>
Dalším krokem je práce s box modelem. Každý prvek na stránce je obdélník, který má padding, border a margin. Padding je vnitřní okraj (mezera mezi obsahem a rámečkem), border je rámeček a margin je vnější okraj (mezera mezi prvky). Často se stává, že začátečníci zapomenou na reset okrajů, proto se prvky „lepí" k sobě nebo se liší v různých prohlížečích. Na začátek si pomozte univerzálním selektorem * a nastavte margin: 0; padding: 0; box-sizing: border-box; – tím získáte předvídatelnější chování.<br>
<br>
<br>
<br>
Nezapomeňte na podporu rozšíření a pluginů, které umožňují automatizovat kontrolu stylu nebo spouštění testů přímo v prostředí. Ideální je, když tyto nástroje lze nakonfigurovat pomocí souborů, které jsou součástí projektu. Tím se vyhnete situaci, kdy jeden člen týmu má zapnutou automatickou opravu formátování a jiný ne, což vede k neustálým konfliktům ve verzovacím systému. Ujistěte se, že IDE umožňuje nastavit takzvané akce při uložení, které jsou vynucené týmovou konfigurací.<br>
<br>
<br>
<br>
Základním krokem je správná komprese obrázků. Používejte moderní formáty jako WebP nebo AVIF, které mají výrazně menší objem než běžné JPEG či PNG. Pro fotografie zvolte kompresi s rozumným poměrem kvality a velikosti, u grafiky a ikon zase zvažte SVG. Nezapomínejte na atributy šířky a výšky, abyste předešli posunům rozložení při načítání. Pokud máte na stránce hodně fotek, zaveďte tzv. líné načítání, tedy načítání až ve chvíli, kdy se k obrázku uživatel posune.<br>
<br>
<br>
<br>
Pro asynchronní akce budete potřebovat simulovat store. Nejjednodušší je použít redux-mock-store, který vám umožní zachytit dispatchované akce. Vytvoříte mock store s inicializovaným stavem, zavoláte akci a poté zkontrolujete, jaké akce byly odeslány. Tento přístup funguje skvěle pro thunky, ale pozor na to, že mock store neprovádí reducery. Pokud potřebujete otestovat i změny stavu, musíte použít jiný přístup – buď vytvořit skutečný store s reducery, nebo použít kombinaci mock store a ručního volání reducerů.<br>
<br>
<br>
<br>
<strong>Na závěr si ověřte, jakým</strong> způsobem IDE spravuje připojení. Mělo by umožnit více paralelních spojení, ať už pro různé databáze, nebo pro testovací a produkční prostředí. Užitečná je také možnost ukládat připojení s hesly do šifrovaného trezoru, abyste je nemuseli zadávat pokaždé znovu. Tím se vyhnete časté chybě, kdy si uložíte heslo do nešifrovaného souboru. Pokud budete tyto aspekty testovat předem, vyhnete se tomu, že si pořídíte nástroj, který sice vypadá skvěle, ale v běžné práci vás bude spíše brzdit.<br>
<br>
<br>
<br>
Pomalé načítání stránek odrazuje návštěvníky a zhoršuje pozici ve vyhledávačích. Než začnete přidávat cache nebo komprimovat obrázky, zjistěte si, kde je skutečný problém. Otevřete si vývojářské nástroje prohlížeče, přejděte na záložku síť a podívejte se, které soubory se načítají nejdéle. Často to nejsou obrázky, ale zbytečné skripty třetích stran, které blokují vykreslení stránky. Nejprve odstraňte vše, co nepoužíváte, a teprve poté řešte optimalizaci.<br>
<br>
<br>
<br>
Nejdůležitější částí testu není samotný kód, ale to, co testujete. Zaměřte se na hraniční případy: co se stane, když funkce dostane nulu, záporné číslo, prázdný řetězec nebo null? Právě tam se nejčastěji skrývají chyby. Napište tři testy pro jednu funkci: jeden pro běžný vstup, jeden pro hraniční hodnotu a jeden pro neočekávaný vstup. Tím zajistíte, že váš kód nefunguje jen pro příklad z tutoriálu, ale i v reálném nasazení.<br>
<br>
<br>
<br>
Nastavení základů: typografie a barvy Prvním praktickým krokem je nastavení písma a barev. V CSS použijte selektor body a definujte vlastnost font-family – vždy uveďte několik náhradních fontů, aby se stránka správně zobrazila i na zařízeních bez konkrétního typu písma. Pro barvy používejte hexadecimální kódy (např. #333 pro tmavě šedou) nebo funkce rgb(). Dejte pozor na kontrast – text a pozadí musí být čitelné. Častou chybou začátečníků je používání příliš jasných barev nebo nedostatečného kontrastu, což odrazuje návštěvníky.<br>
<br>
<br>
<br>
Další pastí je spoléhání na pořadí testů. Testy by měly být na sobě nezávislé. Pokud jeden test mění globální stav a druhý na něj navazuje, při změně pořadí testy selžou. Udržujte testy izolované. Pište je tak, aby každý běžel samostatně a vždy začínal z čistého stavu. Pokud testujete práci s daty, vytvořte data přímo v testu, nepoužívejte sdílené proměnné.
