Když stavíte responzivní layout, často stojíte před volbou: Grid nebo Flexbox. Mnoho vývojářů se jedné technologie drží jako klíšťata, ale tím si komplikují život. CSS Grid je výkonný pro celkové rozvržení stránky – umí pracovat s řádky i sloupci zároveň. Flexbox je zase ideální pro distribuci prvků v jedné ose – horizontálně nebo vertikálně. Pokud je použijete tam, kam patří, získáte kód, který se snadno udržuje a který se přizpůsobí prakticky jakékoli šířce obrazovky.

Základní kostra dokumentu vypadá byt v panelákuždy stejně: doctype, html, head a body. Do head patří meta informace a titulek, do body pak veškerý viditelný obsah. Pro začátek si vystačíte s pěti značkami: h1 pro nadpis, p pro odstavec, dokončení interiéru a pro odkaz, img pro obrázek a div pro oddělení bloků. Už s nimi vytvoříte smysluplnou stránku. Jakmile ji uložíte a otevřete v prohlížeči, uvidíte první výsledek. Tento okamžik je důležitý: nečekejte dokonalost, ale zkuste si s kódem hrát.

Další pastí je ignorování automatického chování obou technologií. Grid umí vytvořit responzivní mřížku bez jediného media dotazu, pokud použijete jednotky jako minmax() a auto-fit. Například: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Tím docílíte toho, že se počet sloupců přizpůsobí šířce okna, a vy nemusíte psát breakpointy pro každou velikost. Flexbox zase bez problémů zvládne zarovnání s gap – mezery mezi prvky nastavíte jednou vlastností a nemusíte řešit marginy u posledního prvku. Když tyto vlastnosti neznáte, píšete zbytečně více kódu, než je nutné.

Testovací pyramida je jedním z nejstarších a nejspolehlivějších modelů pro strukturování automatizovaných testů. Přesto ji mnoho týmů interpretuje chybně – výsledkem je obrovská sada end-to-end testů, která běží desítky minut a každá změna kódu vyvolá lavinu oprav. Aby pyramida fungovala, musíte ji postavit na opačném konci než je obvyklé: co nejvíce testů má být malých, rychlých a izolovaných, a jen minimum jich má ověřovat kompletní tok aplikací.

Jak vypadá zdravá testovací pyramida? Zdravá pyramida má tři vrstvy. Na základně stojí jednotkové testy, které testují jednu funkci, třídu nebo metodu bez závislosti na databázi, službách nebo uživatelském rozhraní. Tyto testy by měly tvořit 70–80 % celého souboru. Uprostřed jsou integrační testy, které ověřují spolupráci dvou a více modulů – typicky testování repozitáře s databází nebo komunikaci s externím API. Na vrcholu je jen 5–10 % end-to-end testů, které prochází celou aplikací přes uživatelské rozhraní.

Automatizace testů a nasazování není luxus, ale nutnost, jakmile projekt překročí velikost jednoduchého skriptu. GitHub Actions nabízí robustní prostředí přímo v repozitáři, které zvládne sestavit aplikaci, spustit testy i nasadit na produkci. Klíčové je pochopit, že celý pipeline se definuje jako YAML soubor více tipů ve složce .github/workflows. Nemusíte tak opouštet prostředí GitHubu a vše máte pod kontrolou verzováním.

Při tvorbě rozvržení se vyhněte tabulkovému layoutu, který je dnes považován za zastaralý a nepřístupný. Místo toho používejte flexbox nebo CSS grid. Flexbox je skvělý pro řazení prvků do řádků nebo sloupců, grid zvládá obě osy najednou. Základní flexbox zapíšete na rodičovský prvek: display: flex; a pak už jen určujete chování dětí. U gridu stačí display: If you are you looking for more in regards to NáBytek Na MíRu have a look at the page. grid; a definovat sloupce přes grid-template-columns. Naučit se tyto dva modely vám ušetří hodiny hledání hacků na zarovnání.

Proč se vyhnout pěti častým chybám na začátku Jednou z nejčastějších chyb je zapomínání na uzavírací značky. Pokud zapíšete p bez koncového /p, prohlížeč to sice často opraví, ale může to rozbít rozložení dalších prvků. Pozor také na vnořování – značky musí být správně zasazené do sebe, jinak se stránka chová nepředvídatelně. Další pastí je používání mezer a diakritiky v názvech souborů a odkazů. Místo „můj web.html" použijte „muj-web.html", jinak se adresy chovají nespolehlivě. A poslední častý problém: psaní stylů přímo do HTML. I když to na začátku ušetří čas, oddělte CSS do samostatného souboru. Udržíte si přehled a usnadníte si pozdější úpravy.

Základní pravidlo zní: Grid pro makro, Flexbox pro mikro. Konkrétně – hlavní strukturu stránky (hlavičku, obsah, patičku, postranní panel) si rozdělte pomocí Gridu. Uvnitř jednotlivých bloků pak sáhněte po Flexboxu, když potřebujete zarovnat tlačítka, ikony nebo text do řádku. Tento přístup vám ušetří spoustu záporných marginů a hacků, které byste jinak psali, abyste něco „tlačili" na správné místo. Například při vytváření kartičky produktu: Grid rozloží celý seznam karet do mřížky, Flexbox uvnitř karty zajistí, že tlačítko bude vždy dole, i když se obsah různě mění.