Ostatní

Premium

Frontend deploy checklist

Vyvíjíme aplikaci a když se už blížíme k deployu na produkci, tak začneme přemýšlet nad tím jestli máme vše na deploy připraveno. Často přitom zapomeneme na důležité prvky a všimneme si jich až je náš web na Google zaindexován s Lorem ipsum nebo chybějícím description.

Připravili jsme pro vás přehledný checklist, který můžete použít před deployem vaší aplikace. Sekce jsme rozdělili do logických celků a členové našeho nového Patreonu si mohou stáhnout krásné grafické .pdf s checkboxama k tisku zde.

Jednotlivé položky jsem označil podle důležitosti:

   - znamená, že tuto položku by stě měli mít v každém případě a je velmi důležitá pro funkčnost, SEO, přístupnost nebo výkon.
   - položka je vysoko doporučená ale v některých situacích je ji možné vynechat, mohou mít dopad na fuknčnost, SEO, přístupnost nebo výkon.
   - tyto položky byste také neměli vynechat, nemají však zásadný význam pro funkčnost, SEO, přístupnost nebo výkon.

Hlavička

Doctype: Doctype je nastavený na HTML a je umístěn hore na všech stránek. Více o doctype.

<!doctype html>

Charset: Máme správně nastavený charset (UTF-8). Více o charset.

<meta charset="utf-8">

Viewport: Máme deklarovaný viewport pro responzivní design. Více o viewport.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Title: Máme nastavený výstižný title na všech stránkach a ideálně pro každou stránku máme nastaven specifický title. Více o title.

<title>ForDevs.cz - Webový vývoj CZ SK</title>

Description: Máme napsaný meta description tag. Je unikátní a nemá více jak 150 znaků. Více o description.

<meta name="description" content="Blog o webovém vývoji, CZ/SK komunita front-endových a back-endových vývojářu a webových grafiků.">

Favicons: Máme nastavené favikonky a správně se zobrazují na všech zařízeních. Více o favicons.

<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">

Canonical: Máme nastaven canonical url, aby jsme se vyhli duplicitnému obsahu. Více o canonical.

<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">

Apple Web App Meta: Společně s favikonkami máme nastavené tagy pro Apple zařízení. Více o meta.

<!-- Apple Touch Icon (alespoň 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- To run the web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar Style -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Windows Tiles: V hlavičke máme meta tag pro windows tiles. Více o meta.

<meta name="msapplication-config" content="browserconfig.xml" />

browserconfig by měl vypadat minimálně takhle:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

HTML a best practices

Lang: v tagu HTML máme specifikovaný jazyk webu. Více o meta.

<html lang="cs">

HTML5 sémantické elementy: používame správné elementy (header, footer, main, aside, section…). Více o semantics.

<header>hlavička</header>
<main>hlavní obsah</main>
<aside>méně důležitý obsah</aside>
<footer>patička</footer>

Error stránky: Existuje design pro error stránky (404 a 5xx).

Validní HTML a CSS: vaše stránky jsou validní podle W3C, https://validator.w3.org.

Odkazy: na webe se nenacházejí odkazy, které směřují na 404 error stránku.

Noopener: v odkazech, ve kterých používame target="_blank", bychom měli mít rel="noopener", abychom zabránili webům v přístupu na web, na kterém je odkaz umístněn (ochrana proti škodlivým phishingovým útokům tzv. tabnabbing). Více o noopener.

Test s adblockem: otestovali jste jestli se stránky zobrazují správně i se zapnutým adblock pluginom.

Komentáře: do produkce by se neměli dostat vaše komentáře v kódu, budou zobrazeny ve zdrojovem kódu, což nemusí být žádoucí.

Fonty

Formát fontů: používate formáty WOFF, WOFF2 a TTF, jsou podpoporovány ve všech moderních prohlížečích. Více o webfonts.

Velikost fontů: velikost všech fontů by neměla překročit 200 KB (ideálně 100 KB).

Zobrazení: fonty se vykreslují správně ve všech prohlížečích.

Font display: fonty mají definovaný font display. Více o font-display.

@font-face {
	font-family: 'Source Sans Pro';
	src: url("/fonts/source-sans-pro-v14-400.woff2"),
	url("/fonts/source-sans-pro-v14-400.woff");
	font-weight: 400;
	font-display: fallback;
}

CSS

Responzivita: web je responzivní a správně se zobrazuje na desktopech, tabletech i mobilech.

Tisk: pokud se web/ časti webu tisknou, jsou správně nastavené styly pro tisk.

Reset CSS: CSS reset je používan a je aktuální. Modern CSS Reset

Inline styly: nemáme v kodě použité inline styly a když už je máme, tak máme na to dobrý důvod.

Nepoužívané styly: styly, které se nepoužívají máme odstraněny.

Minifikace: soubory stylů jsou minifikovány.

Non-blocking: soubory stylů nejsou blokující ve vykreslení stránky/ DOMu.

Zobrazení: styly se správně zobrazují na všech prohlížečích (Safari, Firefox, Chrome…) a operačních systémech (Windows, Android, iOS, MacOS…).

JavaScript

Inline JS: nemáme v kodě inline JavaScript.

Minifikace: javascript je minifikován.

Non-blocking: javascript není blokující.

No errors, no warnings: v developer konzole nejsou žádné errory ani warningy.

Knihovny: použité knihovny jsou aktualizované na nejnovější stable verzi.

Obrázky

Optimalizace: obrázky jsou optimalizovany na vykreslení, používa se formát .webp a obrázky jsou kompriované.

Alt atribút: obrázky mají definován alt atribút. Více alt atribútu.

Lazy loading: obrázky mají definován natívny lazy loading. Více o lazy loading.

<img src="image.jpg" alt="image alt" loading="lazy" />

Srcset/ picture: používate srcset/ picutre hlavně u velkých obrázků. Více o responsive images.

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Retina: obrázky jsou připravený na retina displeje.

Width/ height: obrázky mají definovaný width a height, aby prohlížeče znali při vykreslení jejich velikost.

Přístupnost

Článek je součástí premium systému, podívej se na výhody premium účtu. Vytvářme kvalitný vzdělávací obsah, vedeme lidi k jejich kariérním cilům a udržujeme je v dění novinek ve webovém světě. Díky premium systému podpoříš náš projekt získaš řadu výhod: