Začněte u ovládacích prvků. Typický problém je tlačítko, které vypadá jako odkaz, nebo odkaz, který vypadá jako text. Uživatel si musí být jistý, že na prvek může kliknout. Používejte konzistentní vizuální styl pro všechny interaktivní elementy – změna barvy při najetí myší, zřetelný obrys nebo stín. A pozor na velikost: na dotykovém zařízení je minimální velikost cílové oblasti kolem 40 pixelů, ale spíše sáhněte po větších hodnotách. Malé tlačítko sice vypadá elegantně, ale uživatel ho netrefí a aplikaci opustí.
Prakticky doporučuji rozdělit testy do dvou vrstev podle rychlosti. Jednotkové testy spouštějte při každé změně kódu, měly by běžet pod deset sekund. Integrační testy zařaďte do samostatné fáze – ideálně při pushnutí do sdíleného repozitáře nebo v nočním běhu. Tím zajistíte, že vývojáři mají rychlou zpětnou vazbu při psaní kódu, ale zároveň se před nasazením ověří kritické scénáře. Důležité je, aby integrační testy byly deterministické – měly by běžet proti izolovanému prostředí, které je před každým během znovu vytvořeno.
Zkuste si osvojit jeden zvyk — při každé úpravě souboru se podívejte, jestli můžete něco zjednodušit. Nemusíte předělávat vše najednou, stačí jedna malá změna denně. Postupně se vám kód stane přirozeně čistším a ušetříte hodiny při ladění. Až příště narazíte na funkci, které nerozumíte po pěti sekundách čtení, víte, co dělat — přejmenujte ji, rozdělte ji nebo ji úplně smažte.
Základem je také pravidelná práce s větvemi. Nikdy nepracujte přímo na hlavní větvi, pokud to není nezbytné. Vytvořte si vlastní větev, pojmenujte ji výstižně (např. oprava-prihlasovani), a po dokončení ji slučte. Tím oddělíte rozepsanou práci od stabilní verze. Ale pozor: než začnete slučovat, vždy si stáhněte aktuální změny z hlavní větve. Pokud tak neučiníte, budete řešit konflikty, které by nemusely vzniknout.
Práce s poli a objekty skrývá další úskalí. Místo řetězení if a else použijte včasné ukončení — tzv. early return. Když funkce začne kontrolou neplatných vstupů a vrátí null nebo prázdnou hodnotu, hlavní logika zůstane na první úrovni odsazení. Vyhnete se tak pyramidám závorek, které se nedají číst. Také místo for cyklů zkuste map, filter a reduce. Tyto metody vyjadřují záměr — transformace, filtrování, agregace — a kód je pak kratší a přehlednější.
Při návrhu testů platí jednoduché pravidlo: nejdříve si odpovězte, co se může reálně rozbít. Pokud je riziko chyby v logice podmínek, použijte jednotkový test. Pokud je riziko v propojení s databází, souborovým systémem nebo cizí službou, integrační test je na místě. Typickou chybou je psát integrační test na všechno, co se dá, a pak trávit hodiny laděním prostředí. Druhým extrémem je jednotkové testy „nafukovat” tak, aby simulovaly vše, což vede k těžko udržovatelným mockům a testům, které neodrážejí realitu.
Jak se vyhnout nejčastějšímu začátečnickému průšvihu Tím průšvihem je spojení větví, které se liší v mnoha souborech. Častá chyba: vy a kolega editujete stejný soubor, každý v jiné větvi. Vy uděláte commit, on také. Pak zkusíte sloučit a Git hlásí konflikt. Nejdůležitější je nezmatkovat. Otevřete soubor, najdete značky s dvojitými šipkami, přečtete obě verze a rozhodnete, co ponechat. Nikdy neprovádějte commit s konfliktem – nejprve ho vyřešte. Po úpravě nezapomeňte soubor přidat a teprve poté commitnout.
Další pastí je špatný kontext this. Když předáváte funkci jako callback, může ztratit vazbu na objekt, ke kterému patří. Pak uvnitř funkce this odkazuje na něco jiného, než čekáte. Řešení je použít arrow funkce, které this dědí z okolí, nebo funkci explicitně navázat pomocí bind. Tento problém se snadno přehlédne, protože se neprojeví žádnou chybou, jen logika nefunguje podle očekávání.
Nakonec si osvojte zvyk testovat své vlastní rozhraní jako uživatel – ne jako vývojář. Vypněte vývojářské nástroje, zkuste aplikaci používat bez znalosti kódu. Klikněte na všechno, co vypadá klikatelně, a sledujte, co se stane. Najdete tak desítky drobností, které by vám jinak unikly. Až budete příště předávat práci, projděte si ji z pohledu někoho, kdo vidí aplikaci poprvé. Tohle je nejlevnější způsob, jak zlepšit kvalitu vašeho UI/UX – a výsledek ocení jak klienti, tak koncoví uživatelé.
Dalším častým zdrojem chyb je špatné načítání skriptů. Zkontrolujte v záložce Network, jestli se soubor JavaScriptu vůbec stáhl. Pokud tam svítí status 404 nebo 500, máte jasno. Ale pozor na pořadí skriptů. Pokud váš kód volá funkci, která ještě nebyla definovaná, dostanete chybu, že funkce neexistuje. Řešení je jednoduché – přesuňte skripty na konec těla dokumentu nebo použijte atribut defer. Tím zajistíte, že DOM bude připraven a všechny funkce už budou k dispozici.
