Rady a nápady – tipy pro tvorbu webu

Vibe Kanban je open-source nástroj pro řízení více AI kódovacích agentů paralelně. Kanban board, isolované git worktrees a code review na jednom místě.

Jak udělat redesign webu za jeden den. Stačí AI nástroj, Git a Vercel.

Jak vypadá programování ve virtuální realitě? Přehled nástrojů, výhod a omezení práce s kódem ve VR headsetech místo klasického monitoru.

Claude Opus 4.6 je nejnovější AI model od Anthropic s 1M kontextovým oknem, agent teams a adaptivním myšlením. Co přináší nového?

Effect nabízí typově bezpečné zpracování chyb a čitelnější práci s asynchronním kódem.

Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.

Clawdbot je open-source AI agent, který běží lokálně a komunikuje přes WhatsApp, Telegram, Discord nebo iMessage. Jak funguje?

Jak implementovat okamžitou reakci na uživatelské akce s optimistickým mazáním. UI vzor pro rychlejší aplikace.

Agent Skills je specifikace pro definování schopností AI agentů. Jak funguje?

Jak zobrazit náhled článku z pull requestu bez čekání na build a deploy.

Kdy (ne)použít metodu reduce v JavaScriptu. Praktické příklady a srovnání s alternativami.

Co je to egress traffic, jak funguje v cloudu, proč za něj (ne)platíte a jak optimalisovat náklady.

Stručný úvod do AI, jak funguje a kde všude se s ní dnes setkáme.

Kompletní průvodce e-mailovou autentisací: SPF, DKIM, DMARC a BIMI. Naučte se chránit svou doménu před spoofingem a zlepšit doručitelnost e-mailů.

Jak funguje zanořování značek jako <p> nebo <button> v HTML parseru versus DOM metodách.

JSON for Linking Data je strojově čitelný formát pro publikování obsahu.

Jak převádět obrázky, textové formáty v prohlížeči pomocí JavaScriptu – bez odesílání dat na server.

Postupné vylepšování je postup tvorby webu, kdy se začíná nejprve s podporou nejprimitivnějších zařízení.

Jak používat pravidlo dvou pro efektivní psaní dobrého kódu

Jak vytvořit obsahový web s dynamickým načítání obsahu bez obnovení celé stránky.

Proč by textové soubory měly končit prázdným řádkem.

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Jak ve WordPressu zakázat grafické symboly Emoji.

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

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

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

Jak posunout jakýkoliv element někam jinam.

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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?

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

Jak webovou stránku ovládat gamepadem.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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