Rady a nápady

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

Všechny články z kategorie

Tisk stránky

Vytisknutí stránky

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

Immutable cacheování trvalých souborů

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í.

CSS Elements Queries

CSS Elements Queries

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

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

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?

Proč a jak používat :focus stav

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.

Lepší podtržení odkazu

Lepší podtržení odkazu

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

Změna barvy lišty v mobilních prohlížečích

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

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

Zjištění rozlišení v JS

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.

Zalamování slov

Zalamování dlouhých slov

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

Poskakování stránky

Poskakování stránky

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

Rychlost a náročnost transition: all

Výkon animací s transition: all

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

Centrování v CSS

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.

Prodleva při kliknutí na mobilu

Prodleva po tapnutí na mobilech

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

Parsování URL v JavaScriptu

Parsování URL v JavaScriptu

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

Analysování a kontrola stránky

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.

Odrolování bez JavaScriptu

Odrolování bez JavaScriptu

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

Jak zjistit název fontu

Co je to za font?

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

Systémová písma

Systémová písma

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

Udělení přístupu do Google Analytics

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.

Stylování <select>u

Stylování <select>u

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

Stylování atributu title

Vlastní styl bubliny title

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

Automatická datová optimalisace obrázků

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

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

Indexování JavaScriptu

Indexování JavaScriptu

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

Expressive CSS

Expressive CSS

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

Nekonečné rolování

Nekonečné scrollování

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

Wireframe

Wireframe

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

Jednostránkový web

Jednostránkový web

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

Výběr jazyku stránky

Výběr jazyku stránky

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

Načítání webu v IFRAME

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

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

Stylovat třídy, nebo elementy?

Stylovat třídy, nebo elementy?

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

Napovídání e-mailu

Napovídání poskytovatele e-mailu

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

Stránkování

Stránkování

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

Doctype

HTML značka <!doctype>

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

Přesnější měření  konversí v Google Analytics

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

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

Jednotné odsazení v CSS

Jednotné odsazení v CSS

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

Zjišťování a oprava překlepů

Jak zjistit a opravit překlep

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

Optimalisace pro AdBlock

Optimalisace pro AdBlock

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

Kam umístit popisky formuláře

Kam umístit popisky formuláře

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

Jak (ne)přenášet referer

Jak (ne)přenášet referer

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

Základy CSS

Základy CSS

K čemu je CSS dobré a jak ho rychle začít používat.

Musí být web validní?

Musí být web validní?

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

Serializace v PHP

Serializace v PHP

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

5minutový rychlokurs Bootstrapu

5minutový rychlokurs Bootstrapu

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

Datum v patičce

Datum v patičce

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

Proč nepoužívat hamburger menu

Proč hamburger menu nefunguje

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

Odkazy ze starých článků

Odkazy ze starých článků

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

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

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.

Přepnout na mobilní/desktopový web

Přepnout mobilní/desktopový web

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

Tlačítko na webu

Tlačítko na webu

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

8 rad, jak rychle zlepšit SEO

Rychlé zlepšení SEO

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

Mobilní web na subdoméně

Mobilní web na subdoméně

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

Jak zabránit kopírování

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.

Změna stylů JavaScriptem

Změna stylů JavaScriptem

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

Má web fungovat bez CSS?

Má web fungovat bez CSS?

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

Jak najít neukončenou značku?

Jak najít neuzavřenou značku?

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

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

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

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

Má web fungovat bez JavaScriptu?

Má web fungovat bez JavaScriptu?

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

Jak zvolit šířku stránky

Jak široký web udělat

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

Zabezpečení čísla objednávky

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

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

(Ne)potvrzení přečtení zprávy na Facebooku

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á.

Úprava CSS/JS na ostrém serveru

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.

Proč (ne)použít Mobile First

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).

Jak udělat screenshot webu

Screenshot webu

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

Sledování chyb 404

Sledování 404 chybových stránek

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

Mezera v PSČ

Mezera v PSČ

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

10 rad, jak vytvořit ideální URL

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.

Jak vložit YouTube video

Vložení videa z YouTube

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

Jak se přidat do vlastního Twitter listu

Jak sám sebe přidat do Twitter seznamu

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

Datová velikost stránky

Datová velikost stránky

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

Upozornění před opuštěním stránky

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

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

CSS resetování

Způsoby CSS resetování

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

Přesun Wordpressu

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.

Předchozí/další element v JavaScriptu

Předchozí/další element v JavaScriptu

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

CSS zbytečnosti

CSS zbytečnosti

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

Vypnutí Emoji ve WordPressu

Vypnutí Emoji ve WordPressu

Jak ve WordPressu zakázat grafické symboly Emoji.

Margin: auto

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

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

Hlavička User-Agent

Hlavička User-Agent

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

Nastavení kódování BOMem

Určení kódování BOMem

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

Posun obsahu v CSS

Posunutí obsahu v CSS

Jak posunout jakýkoliv element někam jinam.

Jak přidat komentáře na web

Komentáře na webu

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

✌ Emoji

Emoji

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

Proč nepoužívat selectbox

Proč nepoužívat <select>

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

Popis formulářového políčka

Popisek formulářového pole

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

Hlasování v anketě pouze jednou

Hlasování v anketě pouze jednou

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

BEM: způsob zápisu CSS

BEM – způsob zápisu CSS

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

Jak zakázat označování textu

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

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

Nový řádek v HTML a CSS

Odřádkování v HTML a CSS

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

Selektor elementů podle jejich počtu

Styl elementů podle jejich počtu

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

Okamžitá validace po zadání znaku

Validace po zadávání znaků

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

Tolerance myši u vyskakovacího menu

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ší.

Single page aplikace

Single page application

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

Generátor náhodných obrázků

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.

Oprava překlepů v URL

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.

Přesun CMS Joomla!

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

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

Chyby při programování

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?

Fit-content

Fit-content

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

V jakém jazyce programovat?

Jazyk zdrojového kódu

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

Jak řešit nápovědu na webu

Nápověda na webu

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

Popis obrázku

Popis obrázku

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

Bezstavové HTML

Bezstavové HTML

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

Plocha odkazu

Plocha odkazu

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

Poskakování kvůli scrollbaru

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

Jak zabránit, aby centrovaný obsah stránky měli posici v závislosti na posuvníku.

JS document.head

JS document.head

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

Beacon API

Beacon API

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

Asynchronní načítání CSS

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

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

Dopočítávání CSS hodnot

Dopočítávání CSS hodnot

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

CSS barva currentColor

CSS barva currentColor

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

Grafický editor v prohlížeči

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.

Identifikátor z písmen a čísel

Identifikátor z písmen a čísel

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

HTML atribut scoped

HTML atribut scoped

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

InnerHTML

JS vlastnost innerHTML

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

Margin, border a absolutní posicování

Margin, border a absolutní posicování

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

Zablokování psaní do <input>u

Jak zakázat psaní do <input>u

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

Disqus a poslední komentáře

Nejnovější komentáře z Disqus

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

Záznam obrazovky do GIFu

Video-záznam obrazovky do GIFu

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

Výška podle šířky v CSS

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

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

Živé ukázky

Živé ukázky

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

Výpis náhodného obsahu

Výpis náhodného textu

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

20 nejhorších chyb HTML formulářů

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

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

Porovnávání == a ===

Rozdíl mezi == a ===

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

Hodně souborů ve složce

Hodně souborů v jedné složce

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

Odstranění všech potomků HTML elementu

Odstranění obsahu HTML elementu

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

Gamepad API

Gamepad API

Jak webovou stránku ovládat gamepadem.

PHP $_SERVER

PHP pole $_SERVER

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

WordPress spam registrace

WordPress spam registrace

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

Universální hover efekt

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

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

Převod PHP na JavaScript

Převedení PHP do JavaScriptu

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

Přidání nového webu do Google Analytics

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.

Moduly v JavaScriptu

Vytváření modulů v JavaScriptu

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

Adresa a mapa

Adresa a mapa

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

Body a documentElement v JS

Elementy documentElement a body v JavaScriptu

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

Placeholder

HTML atribut placeholder

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

Vlastní HTML atributy

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.

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

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

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

Převod inline CSS na externí

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.

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

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.

Česká písma (250 fontů)

Česká písma z Google Fonts

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

ASCII kreslení

ASCII kreslení

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

Detekce Adblocku

Detekce blokování reklam Adblockem

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

CSS ikony

CSS ikony

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

Offline webová stránka

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.

Ochrana proti spamu

Obrana proti spamu

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

Plynulý přesun focusu

Plynulý přesun focusu

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

HTML Imports

HTML Imports

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

Vícenásobné CSS pozadí

Více obrázků na pozadí

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

AJAX

AJAX

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

Změna URL a AJAX

Změna URL bez obnovení stránky

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

Označení textu kliknutím

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é?

8 rad jak vybrat doménu

Jak vybrat vhodnou doménu?

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

Bezpečnostní risika webu

Bezpečnost webových stránek

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

Rozbalovací nabídka <select>

HTML značka <select>

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

Zobrazení popisku při najetí myší

Popisek po najetí myší

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

Četnost CSS vlastností

Nejpoužívanější CSS vlastnosti

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

ID, nebo CLASS?

Používat id, nebo class?

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

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

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

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

Fotografie na pozadí

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.

Pro které prohlížeče optimalisovat

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

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

Responsivní web

Jak na mobilní (responsivní) web

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

Jak získat náhled webu?

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

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

Detekce zapnutého JavaScriptu

Zapnutý a vypnutý JavaScript

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

Zpřehlednění stromových diskusí

Ř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.

Značka <body> jako obal stránky

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

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

Jak vytvořit WYSIWYG editor

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.

Skloňování v CSS

„Programování“ v HTML a CSS

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

Pročištění HTML kódu

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.