Proč se vyplatí znát nástroje prohlížeče při ladění JavaScriptu?

Většina vývojářů refaktoruje myší: označí blok, rozbalí kontextové menu, vybere příkaz, počká na náhled a potvrdí. U jednoho zásahu to nevadí. U stovky zásahů během odpoledne se z toho stane hlavní činnost dne. Vestavěné nástroje pro refaktoring přitom mají klávesové zkratky, jen o nich lidé nevědí, protože je vývojová prostředí necpou do popředí. První krok tedy není učit se nové příkazy, ale přestat sahat po myši u těch, které používáte pořád.

Agilní metodiky vznikly pro malé týmy, které sedí v jedné místnosti a mají přímý přístup k zadavateli. Jakmile ale do hry vstoupí externí dodavatel, pravidla se rozpadnou. Externí firma má vlastní priority, vlastní lidi na několika projektech a často i vlastní způsob práce. Pokud se na to nepřipravíte předem, skončíte s dvěma světy, které se navzájem míjejí. Klíčové je nastavit spolupráci tak, aby agilní principy fungovaly i přes hranice firem.

Častou chybou je ladění pouze v jednom prohlížeči. JavaScript se může chovat odlišně v různých enginech. Otestujte kód alespoň ve dvou prohlížečích. Dávejte pozor na asynchronní operace: breakpoint uvnitř callbacku se nemusí spustit, pokud se kód nevykoná. V takovém případě použijte záložku Network pro kontrolu požadavků nebo přidejte breakpoint do funkce, která se volá po dokončení operace.

Kostra, která drží pohromadě Základ dokumentu tvoří deklarace typu dokumentu, prvek html s jazykem, hlavička head a tělo body. Do hlavičky patří znaková sada, titulek stránky a odkazy na styly. Tělo obsahuje samotný obsah. V praxi se vyplatí držet se jednoho pravidla: každý prvek má svůj význam. Nadpis první úrovně je na stránce jen jednou a popisuje hlavní téma. Nižší úrovně se používají pro podtémata, ne pro zmenšení písma. Odstavec není řádek, ale myšlenka. Seznam použijte tam, kde jde o výčet, ne kvůli odsazení.

Než stránku zveřejníte, zkuste ji otevřít v jiném prohlížeči a zmenšit okno na šířku telefonu. Zkontrolujte, zda se nic nepřekrývá a zda se text dá číst bez vodorovného posouvání. Platí, že jednoduchá stránka, která se načte rychle a drží strukturu, obstojí lépe než přeplácaný kód. Kdo pochopí rozdíl mezi obsahem a vzhledem, tomu stačí základy k tomu, aby postavil funkční web a nemusel vše předělávat.

Volba vývojového prostředí pro Python vypadá jako marginálie, dokud nestrávíte celý den konfigurací rozšíření, která si navzájem kradou klávesové zkratky. IDE není jen okno s editorem. Rozhoduje o tom, jak rychle najdete chybu, jak snadno spustíte testy a jestli vůbec pochopíte, co se v kódu děje. Špatná volba se neprojeví hned první den, ale po měsíci zjistíte, že půlku času trávíte bojem s nástrojem místo řešením problému.

Každá webová stránka vzniká ze dvou jazyků, které se dělí o práci. HTML určuje, co na stránce je – nadpisy, odstavce, seznamy, odkazy, obrázky. CSS rozhoduje, jak to vypadá – barvy, mezery, písmo, rozložení. Kdo je zamění, dřív nebo později narazí. Do HTML se nemá psát, jak má být něco velké nebo červené, a do CSS nepatří texty ani struktura.

Základem je plán provádění. Většina databází umí zobrazit, jak dotaz poběží, než se skutečně spustí. Sledujte, zda plán obsahuje full scan, nebo vyhledávání v indexu, a jaký je odhadovaný počet zpracovaných řádků. Varovný signál je velký rozdíl mezi odhadem a skutečností – to znamená zastaralé statistiky nebo špatně napsanou podmínku. Statistiky aktualizujte pravidelně, jinak se i dobrý index mine účinkem.

Pro sledování hodnot použijte console.log(), console.warn() a console.error(). Místo prostého výpisu objektu zvolte console.table(), které zobrazí data přehledně v tabulce. Pokud potřebujete zjistit, kolikrát se funkce volá, použijte console.count(). Po dokončení ladění výpisy odstraňte – zapomenuté console.log() v produkci zbytečně zatěžují konzoli a mohou unikat citlivé údaje.

Rozhodnutí udělejte po týdnu skutečné práce, ne po hodině zkoušení. Vybrané prostředí používejte alespoň měsíc, než začnete hledat náhradu. Časté přeskakování mezi nástroji je nejjistější způsob, jak si nevytvořit svalovou paměť a ztrácet čas. A pokud zjistíte, že vám chybí funkce, kterou mělo předchozí IDE, zapište si ji a hledejte rozšíření dřív, než začnete znovu instalovat. Většina problémů se dá vyřešit konfigurací, ne změnou nástroje.

Typická chyba začátečníků je obalování všeho do prvku div. Ten sám o sobě nic neznamená. Nahradit se dá prvky jako header, nav, main, article, section nebo footer, které prohlížeči i vyhledávači řeknou, co která část znamená. Výsledkem je čitelnější kód a menší množství zbytečných obalů. Totéž platí pro tabulky: slouží k datům, ne k rozvržení stránky.