Moderní tvorba webových aplikací

O webu

Rady a nápady

Dobře míněné rady, nápady a tipy.

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

Jak používat git rebase

Proč a jak používat git rebase pro přehlednou historii v Gitu.

5 minut

Více Git větví vedle sebe

Jak spustit více větví jednoho repositáře vedle sebe.

3 minuty

Jak v praxi používat Git

Jak rychle a efektivně používat versovací systém Git.

9 minut

Proč nemůže vlastní externí font fungovat

Vysvětlení proč není možné na webu používat vlastní externí písmo, které funguje správně.

11 minut

Výpis náhodného textu

Jak na stránce náhodně vypsat obrázek, odkaz, reklamu, text nebo cokoliv jiného.

5 minut

13 důvodů, proč má web fungovat bez JavaScriptu i v roce 2025

JavaScript je sice klíčový pro moderní web, ale jeho selhání není výjimkou. Zde je 13 důvodů, proč by měl web fungovat i bez něj.

8 minut

Zvláštní znaky na české klávesnici v macOS

Jak v macOS na běžné české klávesnici pohodlně programovat a zapisovat všelijaké speciální znaky?

11 minut

Jak vybrat vhodnou doménu?

Doporučený postup výběru ideálního názvu domény pro nový web.

7 minut

Jak funguje TanStack Query

TanStack Query elegantně řeší práci s daty stahovanými přes API.

8 minut

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

10+ věcí, jak AI pomáhá při programování

AI dokáže výrazně zvýšit efektivitu programátora. Nevezme mu ale práci?

9 minut

Získání přístupu k API přes mobilní aplikaci

Jak přes mobilní aplikaci získat přístup k neveřejnému API různých webů.

3 minuty

Rozdělování Vite/Rollup buildu do chunků

Jak rozdělit build aplikace do souborů, aby byla co nejrychlejší.

7 minut

Storybook

Storybook je nástroj pro snadné generování přehledu UI komponent.

5 minut

Kopírování/klonování objektů v JS

Jak správně a úspěšně zkopírovat objekt v JavaScriptu.

6 minut

PhpStorm, nebo WebStorm?

Hodí se pro vývoj webu používat PhpStorm, nebo WebStorm? Jaké jsou rozdíly.

3 minuty

Jak funguje jecas.cz

Jak funguje zdejší frontend, backend a jak se to vše nahrává na server.

7 minut

Rozdíl mezi var a let v JS

Jaký je v JavaScriptu rozdíl mezi deklarováním proměnných přes var a let.

7 minut

Barva horní lišty v mobilním prohlížeči

Jak obarvit záhlaví mobilního prohlížeče, aby ladilo se stránkou.

3 minuty

Jak udělat <input> pro zadávání adresy webu

Jak vytvořit políčko pro URL webové stránky a správně ho validovat.

4 minuty

Vytisknutí stránky

Jak správně připravit webovou stránku pro pohodlné vytištění.

11 minut

Cache-Control: immutable – cache trvalých souborů

HTTP hlavičkou Cache-Control: immutable jde zamezit opětovanému kontrolování neměnných souborů a zrychlit tak načítání.

4 minuty

CSS Elements Queries

Jak zajistit různý vzhled elementů v závislosti na jejich rozměru.

4 minuty

Nula před desetinnou tečkou u čísla

Je lepší psát před desetinou tečnou u čísla 0.5 zbytečnou nulu, nebo ne?

3 minuty

Jak používat CSS stav :focus

Proč je důležité stylovat stav :focus. Jak toho automaticky docílit a jaké jsou s tím problémy.

12 minut

Lepší podtržení odkazu

Jak si vytvořit hezčí podtržení textu odkazu, než je výchozí.

4 minuty

Zjištění rozměrů stránky

Jak v JavaScriptu zjistit šířku a výšku rozlišení obrazovky, velikost dostupné plochy (tzv. viewport) nebo rozměry elementu.

5 minut

Zalamování dlouhých slov

Jak si poradit s dlouhými slovy, které by mohly narušit layout stránky.

5 minut

Poskakování stránky

Proč vadí poskakování stránky během načítání a jak se ho zbavit.

5 minut

Výkon animací s transition: all

Je lepší psát transition: all, nebo vyjmenovávat vlastnosti, které se mají animovat?

3 minuty

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

11 minut

Prodleva po tapnutí na mobilech

Co způsobuje 300 milisekundovou prodlevu po kliknutí na odkaz/tlačítko na dotykových zařízeních.

4 minuty

Parsování URL v JavaScriptu

Jak elegantně parsovat adresy webových stránek v JavaScriptu.

4 minuty

Nástroje pro kontrolu a analysování stránky

Užitečné nástroje pro analysování, kontrolování a prověřování webových stránek.

7 minut

Odrolování bez JavaScriptu

Jak odscrollovat na určitou část stránky bez JavaScriptu.

4 minuty

Co je to za font?

Jak určit, jak se jmenuje písmo na obrázku nebo webu.

5 minut

Systémová písma

Jak a proč používat lokální písma dostupné v operačních systémech.

4 minuty

Přidání přístupu do Google Analytics

Jak do Google Analytics přidat oprávnění třetí osobě, aby mohla prohlížet statistiky.

2 minuty

Stylování <select>u

Roletový seznam nabízí omezené možnosti v úpravách vzhledu. Které to jsou a jak je rozšířit?

6 minut

Vlastní styl bubliny title

Jaké jsou možnosti pro vlastní vzhled nápovědy, která se objevuje při vyplnění atributu title.

6 minut

Hromadné datové zmenšení obrázků

Chceme-li zrychlit načítání své stránky, datová optimalisace obrázků může pomoci.

6 minut

Indexování JavaScriptu

Jak se vyhledávače Google a Seznam vypořádají s obsahem v JavaScriptu. Dokáží takový obsah indexovat?

5 minut

Expressive CSS

Expressive CSS je postup psaní CSS, kde se jednotlivé styly přiřazují pomocí tříd v HTML.

6 minut

Nekonečné scrollování

Je lepší nekonečné rolování, klasické stránkování nebo tlačítko „Zobrazit další“?

12 minut

Wireframe

Co jsou to drátěné modely, proč je používat a jak je vytvářet.

6 minut

Jednostránkový web

Kdy vytvářet web o jediné stránce. Jaké jsou výhody a nevýhody.

9 minut

Výběr jazyku stránky

Jak vytvořit vícejazyčný web s ohledem na uživatele i vyhledávače.

12 minut

Načítání webu v <iframe>

Je rozumné blokovat načítání webu v <iframe>? Jaká jsou risika a výhody.

5 minut

Stylovat třídy, nebo elementy?

Je lepší stylovat přímo HTML elementy, nebo všechny styly přiřazovat třídami?

6 minut

Napovídání poskytovatele e-mailu

Jak usnadnit vyplňování e-mailové adresy automatickým napovídáním poskytovatele.

6 minut

Stránkování

Jak správně řešit stránkování na webové stránce.

13 minut

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

6 minut

Přesnější měření formulářů v Google Analytics

Jednoduchá cesta, jak spárovat zdroje odeslaných formulářů na webu s Google Analytics.

6 minut

Jednotné odsazení v CSS

Jak postupovat, aby napříč webem byly mezi elementy stejné rozestupy.

8 minut

Jak zjistit a opravit překlep

Jak zjišťovat, jestli uživatel neudělal překlep a sdělit mu, co chtěl napsat.

7 minut

Optimalisace pro AdBlock

Jak stránku optimalisovat, aby ji nerozbilo blokování reklam AdBlockem.

4 minuty

Kam umístit popisky formuláře

Jak umístit popisky formulářových prvků, aby bylo vyplňování formuláře co nejpohodlnější.

7 minut

Jak (ne)přenášet referer

Jak zablokovat přenášení informace o předchozí navštívené stránce.

8 minut

Musí být web validní?

Je nutné, aby byl HTML kód stránky validní? Vliv (ne)validního kódu na SEO.

7 minut

Serializace v PHP

Funkce serialize v PHP převádí datovou strukturu na řetězec uložitelný do souboru nebo database.

4 minuty

5minutový rychlokurs Bootstrapu

Jak za 5 minut vytvořit web pomocí CSS frameworku Bootstrap.

6 minut

Datum v patičce

Jaké datum uvádět v patičce a jak automaticky zajistit, aby bylo aktuální.

4 minuty

Proč hamburger menu nefunguje

Hamburger menu je oblíbený postup řešení responsivní navigace. Proč se mu vyhnout.

12 minut

Odkazy ze starých článků

Do starých článků je dobré doplňovat odkazy na související nový obsah.

8 minut

Uložení stavu před opuštěním stránky

Jakým způsobem uložit stav aplikace/formuláře před opuštěním stránky.

7 minut

Přepnout mobilní/desktopový web

Jak přepnout mezi desktopovým a mobilním webem. Má to vůbec smysl?

9 minut

Tlačítko na webu

Jaké HTML značky používat pro tlačítka na webových stránkách a aplikacích.

7 minut

Rychlé zlepšení SEO

Jak co nejrychleji upravit stránku, aby měla lepší výsledky ve vyhledávání.

9 minut

Mobilní web na subdoméně

Má smysl mít mobilní web na zvláštní adrese m.example.com?

13 minut

Jak zabránit zkopírování obsahu

Dá se kopírování textů, obrázků a zdrojových kódů z webu zabránit? Jak kopírování využít ve svůj prospěch.

10 minut

Změna stylů JavaScriptem

Jak JavaScriptem nastavovat CSS pro změnu vzhledu jednotlivých elementů.

4 minuty

Má web fungovat bez CSS?

Má cenu řešit zobrazení stránky bez stylů? Případy, kdy taková situace nastane.

6 minut

Jak najít neuzavřenou značku?

Neuzavřená HTML značka může způsobovat problémy. Jak ji najít?

3 minuty

Maskování a zobrazování hesla ve formuláři

Je lepší heslo ve formuláři zobrazovat, nebo ho maskovat pomocí hvězdiček?

13 minut

Má web fungovat bez JavaScriptu?

Při tvorbě webu je potřeba zvážit, jestli a jak má fungovat bez podpory JavaScriptu.

7 minut

Jak široký web udělat

Jakou zvolit optimální šířku webové stránky.

5 minut

Jak zabezpečit číslo objednávky v e-shopu

Jakým způsobem bezpečně sestavit číslo objednávky zboží v e-shopu.

5 minut

Nepotvrzení přečtení zprávy na Facebooku

Jak zabránit, aby se příchozí zpráva na Facebooku označila jako přečtená.

4 minuty

Připojení lokálního CSS/JS na ostrý server

Jak na ostrý server připojit pro vývoj a testování lokální styly nebo skripty.

10 minut

Proč (ne)používat mobile first

Mobile first je postup tvorby responsivního webu, kdy se začíná od nejmenších obrazovek (mobil) až po větší (desktop).

12 minut

Screenshot webu

Jak z webové stránky vytvořit obrázek (screenshot).

4 minuty

Sledování 404 chybových stránek

Jak zjistit adresy, které neexistují a končí chybovou stránkou 404 a co s nimi udělat.

7 minut

Mezera v PSČ

Jak a zda vůbec automaticky odsazovat uživatelem zadané znaky PSČ do formulářového políčka.

4 minuty

10 rad pro vytvoření nejlepší URL

Jakým způsobem volit tvar URL jednotlivých stránek s ohledem na použitelnost a SEO.

12 minut

Vložení videa z YouTube

Jak přidat na svou stránku video ze serveru YouTube s HTML 5 přehrávačem.

4 minuty

Odkaz na hlavní stranu

Má smysl umisťovat na web odkaz na hlavní stranu? Na jakém místě ho návštěvník očekává?

2 minuty

Datová velikost stránky

Jak by měla být stránka datově velká pro rozumně rychlé načítání.

6 minut

Jak sám sebe přidat do Twitter seznamu

Jak přidat svůj Twitter účet do vlastního seznamu (listu).

2 minuty

Upozornění před zavřením stránky

Javascriptová událost onbeforeunload umožňuje pozastavit uzavření/obnovení stránky.

3 minuty

Způsoby CSS resetování

Používat CSS reset, nebo ne? Jaká jsou pro a proti.

7 minut

Přestěhování Wordpressu na jiný server

Jak přenést web běžící na redakčním sytému Wordpressu na jiný server.

7 minut

Předchozí/další element v JavaScriptu

Získání následujícího nebo předchozího sourozence pomocí nextSibling a previousSibling.

3 minuty

CSS zbytečnosti

CSS konstrukce, které nejspíš píšete zbytečně.

7 minut

Vypnutí Emoji ve WordPressu

Jak ve WordPressu zakázat grafické symboly Emoji.

2 minuty

Psát margin: auto, nebo margin: 0 auto?

CSS konstrukce margin: auto se obvykle používá pro vodorovné centrování bloku.

2 minuty

Hlavička User-Agent

User-Agent je hlavička, kterou posílají prohlížeče jako svou identifikaci.

6 minut

Určení kódování BOMem

Co je to BOM a jak nastavuje kódování pro správné zobrazování českých znaků.

3 minuty

Posunutí obsahu v CSS

Jak posunout jakýkoliv element někam jinam.

5 minut

Komentáře na webu

Jak jednoduše provozovat komentáře pod články na svých stránkách.

9 minut

Emoji

Emoji jsou grafické symboly (obrázky), které je možné zapsat jako běžné znaky.

3 minuty

Proč nepoužívat <select>

Proč se snažit vyhnout používání rozbalovací nabídky <select> za každou cenu.

16 minut

Popisek formulářového pole

Jakým způsobem řešit popisky formulářových prvků.

6 minut

Hlasování v anketě pouze jednou

Jak umožnit návštěvníkům hlasovat v anketě pouze jednou.

4 minuty

BEM – způsob zápisu CSS

BEM (Block, Element, Modifier) je postup, kterým zapisovat CSS pravidla a pojmenovávat CSS třídy.

6 minut

Zakázání označování textu

Standardně jde na webu označovat text. Jak jeho výběru myší zabránit?

5 minut

Odřádkování v HTML a CSS

Jak v HTML, HTML atributu nebo CSS vložit nový řádek.

6 minut

Styl elementů podle jejich počtu

Jak pomocí CSS odlišně stylovat položky v závislosti na jejich počtu.

6 minut

Validace po zadávání znaků

Jak okamžitě reagovat na zadávání znaků do pole během psaní.

6 minut

Tolerance myši u vysouvacího menu

Při vytváření menu reagujícího na najetí myši (hover) je dobré tolerovat nepřesnou cestu myší.

6 minut

Single page application

Co je to SPA (single page application). Na jakém principu funguje.

4 minuty

Generování náhodných obrázků

Pro vývoj a testování webů se hodí znát způsoby, jak v okamžiku vložit do stránky ilustrační obrázek.

3 minuty

Dohledání a opravení rozbité adresy

Zejména automatické převaděče URL na HTML odkazy, ale i lidé dokáží pokazit tvar odkazu na webovou stránku.

5 minut

Přestěhování systému Joomla!

Jak zkopírovat web běžící na redakčním sytému Joomla! na jiný server.

3 minuty

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

11 minut

Fit-content

CSS vlastnost fit-content nastaví šířku podle obsahu.

3 minuty

Jazyk zdrojového kódu

Jakým jazykem programovat. Česky, nebo anglicky?

5 minut

Nápověda na webu

Jak vytvářet nápovědu na webových stránkách.

2 minuty

Popis obrázku

Jak na webové stránce přidat k obrázku popisek.

4 minuty

Bezstavové HTML

Jak vytvořit aplikaci, kde se nemění HTML kód.

4 minuty

Plocha odkazu

Proč a jak vytvářet klikací plochu kolem odkazu.

4 minuty

JS document.head

Přístup k hlavičce stránky v JavaScriptu je možný konstrukcí document.head.

2 minuty

Beacon API

Beacon API umožňuje asynchronně zaslat data na server při opuštění stránky.

4 minuty

Načítání CSS bez blokování vykreslování

Jak asynchronně načítat CSS, aby neblokovalo vykreslování stránky.

7 minut

Dopočítávání CSS hodnot

Jak funguje dopočítávání hodnot v kaskádových stylech.

5 minut

CSS barva currentColor

Klíčové slovo currentColor obsahuje aktuální barvu elementu.

4 minuty

Grafický editor v prohlížeči

Jaké jsou možnosti pro provádění úprav obrázků (zvýraznění, přidání popisků apod.) přímo v prohlížeči.

3 minuty

Identifikátor z písmen a čísel

Jak místo dlouhého číselného identifikátoru použít kratší kombinaci písmen a čísel.

4 minuty

HTML atribut scoped

HTML 5.1 přichází s možností validně používat element <style> i mimo část <head>.

3 minuty

JS vlastnost innerHTML

Jak funguje vlastnost innerHTML v JavaScriptu. Různé způsoby vypisování obsahu v JS.

6 minut

Margin, border a absolutní posicování

Jak se chová margin a border u absolutně posicovaných elementů.

4 minuty

Jak zakázat psaní do <input>u

V jakých případech a jak zamezit psaní do formulářového políčka.

6 minut

Nejnovější komentáře z Disqus

Jak vypsat nejnovější komentáře z diskusní platformy Disqus.

3 minuty

Video-záznam obrazovky do GIFu

Jak nahrát video obrazovky a uložit ho jako pohyblivý obrázek (GIF).

4 minuty

Výška závislá na šířce

Jak v CSS nastavit výšku v závislosti na procentuální i pevné šířce.

4 minuty

Živé ukázky

Proč používám vlastní nástroj na ukázky zdrojových kódů.

6 minut

20 největších chyb formulářů na webu

Jakým chybám se vyvarovat při tvorbě formulářů na webu.

13 minut

Rozdíl mezi == a ===

Rozdíl mezi porovnáváním hodnota pomocí == a ===.

3 minuty

Hodně souborů v jedné složce

Proč je problém ukládat do jedné složky velké množství souborů.

3 minuty

Odstranění obsahu HTML elementu

Jak v JavaScriptu odstranit všechny potomky v určitém HTML elementu.

1 minuta

Gamepad API

Jak webovou stránku ovládat gamepadem.

5 minut

PHP pole $_SERVER

Co užitečného obsahuje v PHP vestavěná proměnná $_SERVER.

3 minuty

WordPress spam registrace

Jak zabránit falešným spam registrací robotů ve WordPress.

2 minuty

Universální hover efekt pro různé barvy pozadí

Jak vytvořit universální :hover efekt pro různě barevná tlačítka.

6 minut

Převedení PHP do JavaScriptu

Jak převést PHP kód do JavaScriptu.

4 minuty

Přidání nové stránky do Google Analytics

Jak přidat nový web do měření návštěvností službou Google Analytics.

1 minuta

Vytváření modulů v JavaScriptu

Jak psát složitější věci v JavaScriptu. Obalit společné funkce do „modulů“.

5 minut

Adresa a mapa

Jak správně zadávat na webové stránce svou adresu a jako zajistit její zobrazení na mapě.

5 minut

Elementy documentElement a body v JavaScriptu

Co se skrývá pod document.body a document.documentElement. Jaká je podpora v prohlížečích.

2 minuty

HTML atribut placeholder

HTML atribut placeholder slouží k zadání ukázkové hodnoty do formulářového pole.

6 minut

Vlastní atributy v HTML

Jak je to s vytvářením a používáním atributů s vlastními názvy v HTML stránce.

4 minuty

Rychlé kliknutí a vyvolání události

Jak zajistit, aby ovládací prvky uživatelského rozhraní reagovaly správně i na rychlé kliknutí.

3 minuty

Převod CSS v HTML na externí styly

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

2 minuty

Seznam českých Google písem – making of

Postup, kterým jsou vybírána a určována písma s českou diakritikou z Google Fonts.

3 minuty

Česká písma z Google Fonts

Seznam fontů z Google Fonts, které obsahují znaky s diakritikou pro psaní českého textu.

30 minut

ASCII kreslení

Nástroj pro pohodlné ASCII kreslení ve zdrojovém kódu.

1 minuta

Detekce blokování reklam Adblockem

Jak detekovat, že si uživatel na stránce blokuje reklamy. Dá se „ad block“ obejít?

4 minuty

CSS ikony

Ikony bez obrázků v čistém CSS.

4 minuty

Offline webová stránka

Jak umožnit návštěvníkům stažení celé webové stránky pro prohlížení offline, umístění na CD apod.

3 minuty

Obrana proti spamu

Jak se na webu bránit spammerům z řad robotů i návštěvníků.

9 minut

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

2 minuty

HTML Imports

HTML importy umožňují připojit/vložit do stránky jiný HTML dokument.

4 minuty

Více obrázků na pozadí

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

5 minut

AJAX

Asynchronní načítání částí stránek a odesílání formulářů bez obnovení celé stránky.

9 minut

Změna URL bez obnovení stránky

Jak může JavaScript přes history.pushState změnit URL stránky bez znovunačtení.

6 minut

Označení kódu nebo textu po kliknutí

Jak označit text nebo zdrojový kód jedním kliknutím. Je to vůbec rozumné?

3 minuty

Bezpečnost webových stránek

Bezpečnostní risika na webových stránkách a jejich řešení a prevence.

11 minut

HTML značka <select>

Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.

3 minuty

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

5 minut

Nejpoužívanější CSS vlastnosti

Žebříček CSS vlastností dle jejich četnosti na webových stránkách.

7 minut

Používat id, nebo class?

Rozdíl mezi .třídou a #identifikátorem.

4 minuty

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

7 minut

Velký obrázek na pozadí stránky

Jak správně udělat obrázkové pozadí celé stránky, které se přizpůsobí velikosti okna.

5 minut

Pro jaké prohlížeče ladit svůj web

Jak určit, pro které prohlížeče webovou stránku optimalisovat.

5 minut

Jak na mobilní (responsivní) web

Jak a proč vytvářet mobilní versi webu – responsive web.

6 minut

Získání náhledu/obrázku webu

Jak lze automaticky získat obrázkový náhled webové stránky.

4 minuty

Zapnutý a vypnutý JavaScript

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

3 minuty

Řešení nepřehledných stromových diskusí

Je-li na webu stromová diskuse s hodně příspěvky, může být pro diskutující obtížné udržet přehled, co četli a co ne.

3 minuty

Obal <body>, nebo <div id=container>?

Ve standardním režimu lze značku <body> stylovat jako normální <div>. Má to cenu?

1 minuta

Vlastní jednoduchý WYSIWYG editor

Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.

3 minuty

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

3 minuty

Pročištění a opravení „prasáckého“ HTML

Jak z WYSIWYG editorů (jako třeba Word, starší TinyMCE/CKEditor) vytvořit rozumný a sémantický HTML kód.

5 minut

Česká lorem ipsum HTML šablona

Šablona s výplňovým textu z generátoru projevů.

5 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025