7 nejčastějších chyb kódera, neděláte je také?

Úvod

Velmi rád pomáhám začátečníkům i pokročilým ve webovém vývoji. Zamyslel jsem se nad tím, s čím se začátečníci potýkají nejčastěji a co by jim mohlo pomoct se posunout dál. Určitě si nekladu za cíl vystihnout v tomto článku všechny neduhy, zaměřil jsem se však na následujích 7 bodů, které ze své praxe vnímám jako podstatné a zároveň se hojně vyskytují.

Vložení celé knihovny do projektu jen kvůli jedné funkci

Mnoho začátečníků si oblíbí nejrůznější knihovny, mezi jednu z nejznámější patří například Bootstrap či Bluma. Tyto oblíbené knihovny pak používají všude, bez rozmyslu, zda se do projektu hodí. Takovým příkladem by mohlo být použití komplet celé Bootstrap knihovny jen kvůli Grid systému (řádky a sloupce). Dalším příkladem by mohlo být použití jQuery knihovny jen kvůli selektování elementů v html, přitom to lze dělat jednoduše v čistém JS.

Moc malá klikací oblast

Nováčkům se stává, že když vytváří nový interaktivní prvek tak zapomenou na dostatečnou oblast pro interakci ať už klikání či tapování prstem. Zářným příkladem může být kupříkladu výroba šipky (tzv. chevron), která je tvořena dvěma linkama otočenými proti sobě o pár stupňů. Tato šipka lze vyrobit za použití pouze html a css. Když se následně přidá interakce přimo na samotnou šipku, tak je klikací oblast velmi malá a návštěvník tak může mít problém se do prvku trefit.

Nekonzistentní hover

Tento problém se stává, když kóder nemá navržený hover (hover je stav prvku po najetí myši) od grafika a musí improvizovat. Kóder při své práci tvoří prvek po prvku, každý z prvků může tvořit různě dlouhou dobu a tak občas může zvláště nováček ztratit celkový obraz výsledku práce, či nějaký feeling uživatele používající webovou stránku. Často se stává, že kóder určí prvkům takový hover, který se mu líbí, ale v celkovém znění to může být velmi nesourodé a nekonzistentní. Ukázkovým příkladem mohou být dvě tlačítka, zatímco jedno z nich mění barvu pozadí, druhé reaguje pomocí zvětšení (scale).

Chybějící Alt u obrázků

Tag obrázku <img> je jedna z prvních věcí se kterými se člověk setká, pokud se rozhodne učit HTML. Tag obrázku obsahuje atributy jako cestu na obrázek src="", popis obrázku po najetí myší title="", alternativní popis pokud se obrázek nemůže zobrazit alt="", šířku width="", výšku height="" a pár dalších… Pouze však jeden z atributů obrázku je podle specifikace povinný, věděli byste který?

Je to alt atribut, tedy alternativní popis, kus textu, který se zobrazí jako alternativa, pokud se obrázek nemůže zobrazit v prohlížeči (například špatná cesta, nepodporovaný formát atd…).

Abychom si zdůvodnili proč je alt atribut tak důležitý:

• Poskytuje alternativní text pro uživatele se zrakovým postižením.
• Pomáhá vyhledávačům lépe porozumět obsahu obrázku.
• Zobrazuje se, pokud se obrázek nezdaří načíst.
• Slouží jako náhrada pro zpomalené načítání na mobilních zařízeních.

Relativní vs Absolutní odkazy

Byť se to z pozice zkušenějšího vývojáře může zdát jako banalita, začínající kódeři mohou mít problém s vnímáním kontextu pomocí odkazováním v adresářové struktuře. Nejprve si pojďme ukázat jak vypadá absolutní a jak relativní odkaz:

<a href="/index.html">Absolutní odkaz začíná lomítkem</a>
<a href="index.html">Relativní odkaz nezačíná lomítkam</a>

Absolutní odkaz - odkazuje přímo z rootu domény, kdekoliv ho na webu použijeme, bude odkazovat na stejné místo. Kupříkladu pokud na stránce example.com/contact/ použiji odkaz

<a href="/products.html">Produkty</a>

Bude mi odkazovat na https://example.com/products.html, jednoduše se vše za doménou nahradí mým odkazem (/products.html)

Relativní odkaz - odkazuje relativně ku místu, kde se nacházím. Pokud tedy mírně upravím předchozí příklad a na stránce example.com/contact/ */ použiji odkaz

<a href="products.html">Produkty (špatný odkaz)</a>

Bude mi odkazovat na https://example.com/contact/products.html což jsem nechtěl, produkty se nachází na stránce https://example.com/products.html. Relativní odkazy tedy fungují tak, že si vezmou cestu (složku) kde se nacházím - v našem případě /contact/ */ a na konec cesty vloží naši relativní cestu, tedy products.html a výsledek jsem viděli výše.

Toto chování je potřeba si uvědomit a psát odkazy správně. K hořkému zjištění často dochází, když píšeme odkazy relativně a pak obsah vložíme do nějaké pod-složky, kde relativní odkazy přestanou fungovat, protože se jim změnil kontext, všechny zdroje mají o složku výše.

Nepojmenované konstanty (Magic numbers)

S problémem nepojmenovaných konstant, či anglicky magic numbers se můžeme setkat snad v každém programovacím jazyku, dokonce i v CSS. Poznáme to tak, že narazíme na číslo, které nemá zřejmé opodstatnění, proč je takové jaké je. Zhoršuje nám čitelnost kódu, jsou těžko udržovatelné a mohou vést k budoucím chybám v aplikaci.

Příkladem takového kódu může být následující podmínka v javascriptu:

function isSmallScreen() {
  if (window.innerWidth > 640) {
  // Co znamená číslo 640? Kde se vzalo?
    return true
  } else {
    return false
  }
}

V ukázce vidíme použité číslo 640, které je napsané natvrdo, nevychází z žádné konstanty, či konfigurace. Takto napsaný kód bývá známkou malé úspory času na úkor velmi zhoršené přehlednosti.

// Soubor config.js
export {
    Screen: {

    // …
    sm: 640,
    // …

}

// Soubor script.js
function isSmallScreen() {
  if (window.innerWidth > Screen.sm) {
    return true
  } else {
    return false
  }
}

Obdobně bychom neměli používat magická čísla ani v CSS. Pojďme si to ukázat na následujícím příkladu:

.cta-box {
    width: 100%;
    background: #424242;
    margin-top: 273px;
    margin-bottom: 266px;
    padding: 12px;
}

Barvy bychom měli mít definované ideálně když začínáme projekt kódovat a následně používat barvy z palety, tedy barva musí do proměnné. margin-top a margin-bottom jsou problematické, protože jsou to pravděpodobně nějak naštelované čísla a bylo by dobré je alespoň zaokrouhlit, ideálně si stanovit nějaké spacing proměnné pro jednotlivé bloky projektu.

Pojďme se podívat jak by opravený kód mohl vypadat, aby byl více čitelný a systématický:

:root {
    /* Definice barev */
    --bg-secondary: #424242;
    /* … */
    /* Odsazení sekcí */
    --section-spacing-lg: 17rem; /* 272 pixelů */
    /* Globální odsazení */
    --gutter: 12px;
}

/* ... */

.cta-box {
    width: 100%;
    background:var(--bg-secondary);
    margin-top: var(--section-spacing-lg);
    margin-bottom: var(--section-spacing-lg);
    padding:var(--gutter);
}

Jak si můžeme všimnout, definovali jsme si proměnné pro barvu, odsazení sekcí a globální odsazení. Všechny tyto hodnoty jsou nyní definované na jednom místě a můžeme je snadno měnit.

Takto napsaný kód je popisný, srozumitelný a snadno udržovatelný.

!important

V css existuje pravidlo !important, které dává větší prioritu css stylům, na které je aplikováno. Avšak záčátečníci mají tendence řešit tímto způsobem řešit část svých problémů. Nadužívání pravidla !important pak má za následek velmi zhoršenou orientaci a navíc !important pravidlo lze přebít pouze !important pravidlem a tím pádem když potřebujeme takové pravidla přetížit/přebít tak se nám !important replikují dál.

Pojďme si to názorně ukázat na příkladu:

<section>
  <a href="#" class="button">Button</a>
</section>

/* Definovali jsme si barvu pozadí tlačítka */
section .button {
    background: red;
}

/* … */

/* Někde dál chceme změnit barvu tlačítka */
/* Ale nedaří se nám, protože pravidlo výše má větší specificitu */
/* Proto použijeme !important */
.button {
    background: blue !important;
}

Rozeberme si situaci - kóder nejprve zadefinoval tlačítko a dále v CSS chtěl tlačítko v sekci změnit. Avšak horní zápis má vyšší specificitu elementu a tudíš má vyšší prioritu, tak se kóder rozhodl problém řešit pomocí !important, říct tak, že spodní pravidlo má vyšší prioritu. Tímto způsobem si ale zadělal na budoucí problém, protože teď už barvu pozadí tlačítka bez použití dalšího !important nezmění.

A jak teda přepisovat CSS styly správně?

Musíme buď snížit specificitu přepisovaného pravidla a nebo zvýšit specificitu pravidla nově vytvořeného, například tedy takto:

/* Definovali jsme si barvu pozadí tlačítka  */
/* stejným způsobem jako v prvním příkladu */
section .button {
    background: red;
}

/* … */

/* Zde ale zvýšíme specificitu */
/* a nemusíme tak použít !important */
section .button {
    background: blue;
}

Rada pro tuto problematiku je vyhýbat se !important pravidlu, leč existují ojedinělé případy, kdy se tomu nevyhneme. (Například v některých případech při práci s knihovnami třetích stran, do kterých nemůžeme sáhnout)

Závěr

Určitě by se našlo spoustu dalších věcí, na které je dobré si dát pozor, ty které jsem v článku zmínil považuji za základní a měl by je znát každý frontenďák. Je skvělé, že jste dočetli až sem a budu velmi rád, když budete článek sdílet mezi své frontenďáky ať už ve firmě či kamarády, třeba bude i pro ně, něco z výše uvedeného zajímavé :)

Užitečné odkazy

• Kalkulačka specificity v CSS
• Problém magických čísel na Wiki
• Článek o spolupráci s grafikem