Moderní tvorba webových aplikací

O webu

Jak používat git rebase

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

5 minut

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

Více Git větví vedle sebe

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

3 minuty

Sdílení stránky přes Web Share API

Web Share API nabízí možnost sdílet odkaz na stránku nebo soubor přes rozhraní prohlížeče/systému.

5 minut

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Jak v praxi používat Git

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

9 minut

Query string v URL

Řetězec dotazu je část URL za otazníkem obsahující nejrůznější parametry.

10 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 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

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

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

Zobrazování stránek v rámech s frame-ancestors

Pomocí CSP hlavičky frame-ancestors jde umožnit načtení stránky do <iframe>.

4 minuty

Stylování <input type=range>

Jak docílit vlastního vzhledu range „slideru“.

7 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

Parsování HTML v JavaScriptu

Jak v klientském i serverovém JS parsovat a upravovat HTML kód.

7 minut

V jakém programu upravovat obrázky

Jaký program zvolit pro rychlou úpravu obrázků.

2 minuty

Získání unikátní barvy pro text v JS

Jak pro libovolný řetězec spočítat unikátní barvu.

3 minuty

UX políčka pro datum narození

Jak usnadnit uživatelům zadávání data narození.

7 minut

JS podmínka v objektu

Jak v JavaScriptu zapsat podmínku uvnitř objektu.

2 minuty

Postman

Postman je software pro testování a volání API.

3 minuty

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

Build jednoduchého JS pro staré prohlížeče

Jak zajistit transformaci jednoduchého JavaScriptu i pro staré prohlížeče jako IE 11.

6 minut

Jak skrýt posuvník v <iframe>

Jak pomocí CSS skrýt scrollbar u stránky vložené přes <iframe>.

2 minuty

Náhled URL

Jak získat obrázkový náhled a další informace pro libovolnou URL.

3 minuty

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

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

7 minut

Video Playwright testu

Jak uložit video automatického testu.

2 minuty

HTML atribut download

HTML atribut download zlepšuje uživatelský dojem ze stahovaného souboru.

3 minuty

Tailwind CSS

CSS framework pro stylování webů přes utility třídy.

10 minut

Storybook

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

5 minut

Jak vytvořit tmavý režim / dark mode v CSS

Jak co nejlépe vytvořit pro web tmavý režim, aby automaticky respektoval nastavení uživatele.

15 minut

Odstranění nepoužívaných překladů ve Vue.js

Jak ve Vue.js automaticky udržovat překlady očištěné o nepoužívané klíče.

5 minut

Offline stránka v PWA přes ServiceWorker

Jak udělat web fungující offline. A splnit tak požadavky na PWA.

12 minut

Zúčastněte se online konference Frontendisti.cz

V sobotu 29. 5. 2021 od 10.00 do 16.30 bude česká online konference o webovém frontendu.

3 minuty

CSS pseudo třída :is()

Jak v CSS pseudo třída :is() dokáže z(ne)přehlednit styly.

4 minuty

CSS backdrop-filter

Vlastnost backdrop-filter dokáže uplatnit filtr pro pozadí elementu.

3 minuty

VisualViewport API

VisualViewport API umožňuje v JS lépe reagovat na velikost viewportu a jeho změny.

4 minuty

Vite – super rychlý dev server / build

Vite je nástroj pro neuvěřitelně rychlý dev server, hot reload a build JS/CSS.

8 minut

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

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

6 minut

Recense: Vzhůru do AMP

Má smysl používat AMP, nebo je to úplná blbost?

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

Jak funguje CSS position: sticky

CSS sticky posice umožňuje bez JS zafixovat element ke kraji okna při rolování.

7 minut

Barva podle odrolování na stránce

Jak pouze v CSS měnit pozadí elementu v závislosti na odscrollování na stránce.

3 minuty

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

CSS pravidla any-pointer a any-hover

CSS pravidla @media any-pointer a any-hover slouží k detekci přesnosti a typu ovládání.

7 minut

Box-shadow

Vlastnost box-shadow umí vytvořit CSS stín kolem elementu.

5 minut

Barva ukazatele caret-color

CSS vlastnost caret-color dokáže obarvit blikající ukazatel ve formulářových polích.

2 minuty

Zachování posice scrollování overflow-anchor

CSS vlastnost overflow-anchor umožňuje nastavit, jak si má prohlížeč pamatovat, kam bylo odscrollováno.

3 minuty

Zadávání kalendářního data

Pohodlné zadávání kalendářního data ve formulářích.

5 minut

Kulaté okraje v CSS

Jak vytvořit v CSS zaoblené okraje.

6 minut

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

3 minuty

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

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

Text-decoration

Vlastnost text-decoration slouží k „vyzdobení“ běžného textu.

9 minut

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

Zjištění FTP hesla v Total Commanderu

Jak zjistit z Total Commanderu uložená hesla k FTP.

3 minuty

Pořadí CSS vlastností

Jak správně řadit jednotlivé CSS vlastnosti v rámci jednoho bloku příslušícímu k selektoru.

9 minut

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

Přechod na Gulp 4

Jak přejít na Gulp 4. Co je potřeba změnit v gulpfile.js.

7 minut

Přepínání tříd v JS

Přepínání, přidávání a odebírání CSS tříd JavaScriptem.

6 minut

Maximální možný počet CSS selektorů

Jaké jsou v prohlížečích omezení pro velikost (složitost) CSS souborů.

3 minuty

Lepší podtržení odkazu

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

4 minuty

Z-index

K čemu je CSS vlastnost z-index a jak mít v jejím užívání systém.

7 minut

Zvláštní CSS pro IE

Jak odlišit Internet Explorer od ostatních prohlížečů a vytvořit zvláštní CSS jen pro IE.

9 minut

Recense: Vzhůru do (responzivního) webdesignu

Martin Michálek vydal další knihu o současné tvorbě webu, tentokrát kromě e-booku i na papíře. Jaká je?

3 minuty

Šířka rolovací lišty

Jaká je šířka posuvníku v různých prohlížečích.

3 minuty

CSS @font-face

Pomocí CSS pravidla @font-face jde na stránce používat různá webová písma.

15 minut

Media queries v JavaScriptu

Jak v JavaScriptu používat @media pravidla jako v CSS.

6 minut

CSS pravidlo @supports

Pravidlem @supports lze v CSS testovat dostupnost CSS vlastností.

3 minuty

Vlastní vzhled scrollbaru

Jaké jsou možnosti ve stylování vzhledu posuvníku.

6 minut

Navázání událostí v JavaScriptu

Jaké existují postupy pro navěšení JavaScriptové události na element. Výhody a nevýhody různých řešení.

5 minut

Expirace .com domény

Jak dlouho trvá expirace domény s koncovkou .com. Čím se liší od .cz domény.

3 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

HTML/CSS/JS identifikátor id

K čemu se hodí identifikátor, kdy ho používat a jaké znaky může obsahovat.

5 minut

Instalace Apache, PHP a MySQL za 30 vteřin

Jak si ve Windows spustit vlastní Apache, PHP a MySQL na svém PC za půl minuty.

7 minut

Zalamování dlouhých slov

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

5 minut

Rozpoznávání hlasu

Jak psát na web převodem hlasu na text pomocí speechRecognition.

6 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

Úprava náhledového obrázku webu na Seznamu

Vyhledávání na Seznamu zobrazuje vedle výsledků vyhledávání obrázkový náhled webu. Jak zobrazení náhledu stránky ve vyhledávači ovlivnit?

5 minut

Vytváření vlastních HTML značek

Je možné si kromě standardních HTML tagů vytvořit nějaké vlastní?

6 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

Vlastní hláška alert

Jak si v JavaScriptu vytvořit vlastní hlášky jako je výchozí alert.

4 minuty

HTML značka <input>

Všechny varianty značky <input>, možné atributy, vysvětlení a ukázky.

13 minut

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

6 minut

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

Pozvánka na Jobs Dev 2017

Jobs Dev 2017 je veletrh práce pro programátory, který se uskuteční 8. dubna na Fakultě architektury ČVUT v Dejvicích.

5 minut

Přihlašování pomocí PINu

Kdy a proč používat ve webových aplikacích přihlašování pomocí PIN kódu.

6 minut

MySQL přes PDO

PDO je PHP rozhraní pro pohodlnější práci s SQL databásí. Jaké přináší výhody a jak ho používat.

7 minut

SVG

SVG je grafický formát vhodný pro grafické prvky, které mají mít možnost měnit svou velikost.

28 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

CSS appearance

Systémový vzhled elementů pomocí CSS vlastnosti appearance.

3 minuty

CSS spinner

Točící se kolečko pro znázornění načítání v čistém CSS.

3 minuty

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

Recense: Vzhůru do CSS3‏

Jaký je ebook o CSS3 od Martina Michálka.

6 minut

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

CSS mixiny pomocí @apply

Pomocí pravidla @apply jde v CSS vytvářet vlastní mixiny.

2 minuty

Automatické zoomování inputů na iOS

Jak se vypořádat s automatickým přibližováním stránky u formulářových prvků na iPhonech.

5 minut

Automatická výška <textarea>

Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.

4 minuty

Blisk – testování responsivních webů

Blisk prohlížeč vypadá jako Chrome, ale má šikovné nástroje pro testování responsivních webů.

3 minuty

Rel=noopener

Atribut noopener dokáže zabránit manipulaci ze stránky otevřené do nového okna.

3 minuty

Jade

Jade je šablonovací systém převáděný do HTML.

4 minuty

CSS prefixy

Některé CSS vlastnosti se zapisují s prefixy. Proč tomu tak je a jak prefixy zapisovat.

5 minut

Co je to localForage?

K čemu slouží a jak se používá localForage úložiště.

2 minuty

Upload obrovských souborů v JS/PHP

Jak umožnit návštěvníkům nahrát soubory jako videa v řádech MB/GB s progress barem.

7 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

Markdown

Markdown slouží k formátování textu. Výhody a nevýhody, popis syntaxe.

9 minut

Jak na Facebook Instant Articles

Instant Articles je technologie pro rychlé zobrazování obsahu na Facebooku. Jak začít?

8 minut

Všechny CSS vlastnosti

Seznam (skoro) všech 207 CSS vlastností.

10 minut

Otevření 2 stránek jedním odkazem

Jak jedním odkazem otevřít dvě různé stránky.

3 minuty

Responsivní popisky tlačítek

Jak na různě velkých obrazovkách měnit popisky odkazů a tlačítek.

5 minut

Odkaz pro předvyplnění SMS

Jak dát na stránku odkaz, který na mobilech předvyplní číslo a text SMS.

5 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

Úprava textu stránky pomocí designMode

Jednoduchý bookmarklet pro okamžité přepsání libovolného textu na stránce.

1 minuta

Statistiky prohlížečů

Statistiky používání internetových prohlížečů na webových stránkách v České republice a ve světě.

4 minuty

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

Atributový case-insensitive selektor

Pomocí příznaku i jde zapsat atributový selektor nezávislý na velikosti písmen.

2 minuty

Zjištění barvy obrázku

Jak v JavaScriptu i PHP zjistit hlavní barvu obrázku.

4 minuty

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

Přichytávací rolování v CSS

CSS vlastnost scroll-snap dokáže řídit rolování, aby přeskakovalo mezi jednotlivými elementy.

6 minut

Ladění responsivních webů

Jak testovat zobrazení responsivního webu na mobilních zařízeních.

7 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

Zaokrouhlení času

Jak v PHP zaokrouhlit čas na celé pětiminuty, čtvrthodiny nebo půlhodiny.

2 minuty

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

AMP HTML ⚡

AMP HTML je způsob tvorby webu, při kterém je stránka dobře uzpůsobena rychlému načítání na mobilních zařízeních.

8 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

Responsivní logo stránky

Jak vytvořit logo, které se bude přizpůsobovat velikosti stránky.

7 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

Výpočet průměru a mediánu v PHP/JS

Jak v jazyce PHP nebo v JavaScriptu spočítat medián.

4 minuty

CSS zarovnání vertical-align

Vertikální zarovnání řádku nebo buňky tabulky.

5 minut

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

K čemu slouží CDN?

Má smysl používat pro připojení CSS a JS souborů CDN?

7 minut

Připojení JavaScriptu s async a defer

Různé způsoby připojení JavaScriptu na stránku, aby se nezdržovalo načítání stránky.

11 minut

HTML značky <div> a <span>

Div a span jsou neutrální HTML značky, které se používají k aplikování vzhledu pomocí CSS.

5 minut

HTML tabulky

Vytváření tabulek v HTML. Kompletní přehled všech tabulkových značek.

9 minut

Zprava doleva

HTML značky, HTML, atributy a CSS vlastnosti pro text psaný zprava doleva.

4 minuty

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

HTML značka <ruby>

HTML značka <ruby> slouží k označení výslovností symbolů východních asijských znaků.

2 minuty

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

7 minut

Přehrávání zvuků na webu

Jak na webové stránce přehrát zvukové upozornění nebo hudbu pomocí značky <audio>.

13 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

Parsování HTML v PHP

Jak v PHP parsovat HTML stránku a získat z ní potřebná data.

7 minut

Náhled odkazu při sdílení na sociálních sítích

Jak upravit stránku, aby se hezky zobrazovala při sdílení na Facebooku a Twitteru.

8 minut

Responsivní reklama na mobilech

Jak se vypořádat s reklamami při vytváření responsivního webu. Jde to vůbec?

10 minut

HTML 5 <video> vs. GIF

Jaké jsou výhody a nevýhody HTML5 videa oproti GIFu. Co kdy použít?

7 minut

Datum v patičce

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

4 minuty

JSON

JSON je universální formát pro ukládání dat. Jak ho používat?

8 minut

HTML <canvas>

Canvas je HTML značka pro kreslení v prohlížeči pomocí JavaScriptu.

6 minut

To nejlepší z roku 2015

Shrnutí roku 2015 na jecas.cz a výběr toho nejlepšího.

8 minut

Proč hamburger menu nefunguje

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

12 minut

Jak přidat sitemapu do Seznamu a Google

Mapu webu v souboru sitemap.xml je vhodné přidat do Googlu, Seznamu nebo Bingu. Jak na to?

8 minut

Odkazy ze starých článků

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

8 minut

Uvozovky v HTML, CSS, JS, PHP, SQL

Jak správně používat uvozovky v HTML, CSS, JavaScriptu, PHP a MySQL.

12 minut

Počet sdílení na Facebooku a Twitteru

Jak pomocí API získat ve JSONu počet sdílení stránky na Facebooku a Twitteru.

4 minuty

CSS výška height

Nastavování výšky v CSS a proč ho raději nepoužívat.

7 minut

CSS pravidlo @media

Pravidlo @media se používá k omezení platnosti CSS jen za určitých podmínek.

15 minut

Získání obsahu stránky přes oEmbed

Formát oEmbed slouží k pohodlnému získání obsahu stránky bez nutnosti jejího parsování.

6 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

Vliv redakčního systému na SEO

Může mít použitý redakční systém a jeho šablona vliv na umístění stránky ve vyhledávání?

10 minut

Font ikony

Ikony tvořené fontem. Proč je nepoužívat a čím je nahradit.

12 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

Reinstalace Windows 10

Jak přeinstalovat Windows 10 a zlepšit tak výkon PC. Detailní postup krok za krokem.

16 minut

Mobilní web na subdoméně

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

13 minut

Vliv rychlosti webu na SEO

Může rychlost webové stránky ovlivnit její umístění ve vyhledávání?

12 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

Ikona stránky favicon

Jak správně vytvořit ikonku stránky (favicon) pro desktop i mobily.

16 minut

Chrome Dev Summit 2015

Výběr zajímavostí z konference Chrome Dev Summit 2015.

16 minut

Responsivní hledací formulář

Jak vytvořit responsivní vyhledávací formulář, kde se políčko a tlačítko přizpůsobuje šířce.

6 minut

Ikona vedle odkazu

Jak přidat a zarovnat ikonku vedle odkazu, který má podtržení.

5 minut

Data URI

Data URI je způsob, jak obsah externího souboru zapsat přímo do HTML/CSS.

8 minut

Generování PDF

Vytváření PDF dokumentů v JavaScriptu a PHP.

4 minuty

Změna stylů JavaScriptem

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

4 minuty

Co je to polyfill?

Polyfillem se rozumí automatické alternativní řešení, které dokáže zajistit funkčnost něčeho nepodporovaného.

4 minuty

Má web fungovat bez CSS?

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

6 minut

Umístění kursoru v poli

Jak v JavaScriptu zjistit posici, na které je kursor v textovém poli.

3 minuty

50 nejlepších programů pro Windows

Jaké užitečné programy se hodí nainstalovat do Windows.

20 minut

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

7 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

Vlastní komponenty v Nette

Komponenty v Nette dokáží bránit opakování stejného kódu.

5 minut

Kdy začne stahování <img> obrázku

Kdy se začne stahovat obrázek připojený značkou <img>.

7 minut

Zkosení hrany v CSS

Jak vytvořit šikmou hranu (zkosení) CSS bloku.

5 minut

Aplikace ve Windows Phone

Jaké aplikace používám ve Windows Phone 10.

4 minuty

Stažení dynamického webu

Jak stáhnout celou webovou stránku a převést ji do statické HTML podoby.

5 minut

Vykonání JS načteného AJAXem

Jak provést JavaScript, který je ve stránce načítané AJAXem.

4 minuty

HTML kostra

Jak vypadá základní „kostra“ HTML stránky. Které HTML značky ji utváří.

16 minut

Vlastní Latte filtr

Jak si vytvořit vlastní filtr (helper) do Latte šablon v Nette Frameworku.

4 minuty

Odkaz přes celý box

Jak udělat, aby celý box s několika prvky byl klikací.

4 minuty

CSS !important

Klíčové slovo !important slouží k posílení a přebíjení CSS vlastností.

7 minut

Cookies

Kdy cookies (ne)používat a jak s nim pracovat v JavaScriptu a PHP.

10 minut

HTML rámy

Rámy v HTML umožňují zobrazit na jedné stránce obsah z více různých zdrojů.

11 minut

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

Zlepšení signálu Wi-Fi připojení

Jak zlepšit signál, rychlost a stabilitu Wi-Fi připojení.

5 minut

HTTP autorisace v .htaccess

Jak souborem .htaccess jednoduše omezit přístup na stránku heslem.

3 minuty

Vyšší tlačítko ve Firefoxu

Prohlížeč Firefox má zajímavou vlastnost u formulářových tlačítek. Dělá je vyšší než ostatní prohlížeče.

3 minuty

Jak proběhl přechod vaszrak.cz na HTTPS

Příklad konkrétního webu, který přešel z nezabezpečeného HTTP na HTTPS.

9 minut

Přechod na HTTPS

Jaké jsou výhody a nevýhody převedení webu na zabezpečené HTTPS. Proč web na HTTPS přesunout?

18 minut

CSS vlastnost position

CSS rozlišuje statickou, relativní, absolutní a fixní posici. K čemu je co dobré?

11 minut

Velikost písma podle šířky

Jak přizpůsobovat velikost písma aktuální šířce stránky.

5 minut

Atribut autocapitalize

HTML atribut autocapitalize slouží k nastavení automatického přepnutí na velká písmena u dotykových klávesnic.

6 minut

Nová stránka v JavaScriptu

Jak v JavaScriptu vytvořit novou HTML stránku.

4 minuty

Je uživatel online?

Jak zjistit, jestli je uživatel webové aplikace online nebo offline.

5 minut

Word-spacing

CSS vlastnost word-spacing upravuje velikost mezer mezi slovy.

5 minut

Jeden sloupec fixní, druhý proměnlivý

Jak vytvořit dvousloupcové rozvržení, kde je jeden sloupec s pevnou šířkou a druhý se přizpůsobuje šířce okna.

6 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

Převod sloupců na procenta

Jak převést fixní sloupcové rozložení na procenta, která se budou přizpůsobovat šířce okna.

3 minuty

Zalomení tlačítka na více řádků

Jak zabránit nechtěnému zalomení tlačítka na více řádků.

3 minuty

Automatické vybrání políčka po načtení

Jak a kdy přesunout kursor do textového pole automaticky po načtení stránky.

4 minuty

Odsazení prvního řádku text-indent

CSS vlastnost text-indent slouží k odsazení nebo předsazení prvního řádku.

4 minuty

Jak široký web udělat

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

5 minut

Letter-spacing

CSS vlastnost letter-spacing upravuje vzdálenost mezi písmeny.

3 minuty

WebExpo 2015

O víkendu proběhl již 8. ročník webové konference WebExpo. Co jsem se tam dozvěděl?

15 minut

Oddělovač položek v menu

Jakými způsoby v CSS lze realisovat oddělovač položek v menu.

6 minut

CSS selektor :empty

CSS selektor :empty zaměří element, ve kterém vůbec nic není.

2 minuty

Úložiště localStorage

Local Storage je úložiště v prohlížeči klienta přístupné JavaScriptem. K čemu se hodí?

9 minut

Zmenšení zkratek ve vyhledávání Seznamu

Vyhledávač Seznam.cz někdy převádí ve výsledcích hledání VELKÁ písmena na malá. Kdy a proč?

3 minuty

Preconnect – zrychlení stahování z více domén

Jak v prohlížečích zrychlit stahování souborů z jiné domény pomocí preconnect.

3 minuty

Upozornění v JS konsoli

Jak do JS konsole vložit výrazné varování o risicích vkládání cizího kódu.

4 minuty

Webový Outlook.com

Proč na e-maily používám webový Outlook.com.

6 minut

Doba čtení stránky

Jak zobrazit přibližnou dobu, kterou zabere čtení stránky.

6 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

Responsivní Facebook Like

Jak zajistit, aby se Facebook Like a Page box přizpůsobovaly šířce obrazovky.

7 minut

Drag & Drop upload obrázků

Všechny možnosti nahrávání obrázků ze schránky a pomocí drag & drop.

13 minut

Automatická výška <iframe> podle obsahu

Definitivní řešení automatického nastavování velikosti <iframe> podle výšky obsahu.

6 minut

HTML odkazy

Všechny informace a detaily o HTML odkazech, jejich atributech a stylování pomocí CSS.

20 minut

Horní a dolní index v HTML

Pro zapisování horních a dolních indexů slouží v HTML značky <sup> a <sub>.

6 minut

Mobilní MS Edge

V mobilních Windows 10 je internetový prohlížeč Microsoft Edge. Jaký je?

5 minut

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

Nastavení výšky responsivního obrázku

Jak zabránit poskakování responsivních obrázků během načítání stránky.

8 minut

Testování v MS Edge a IE

Jak testovat stránky v různých versích Internet Exploreru a Edge ve Windows, Mac OS nebo v Linuxu.

4 minuty

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

Značka <meta name=viewport>

K čemu používat <meta> tag name=viewport.

5 minut

HTML odstavec

HTML značka <p> slouží k uspořádávání textu do odstavců.

7 minut

Přečtení textu webu

Jak obsah webové stránky přečíst hlasem.

4 minuty

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

5 minut

Screenshot webu

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

4 minuty

Navštívený odkaz :visited

Pomocí CSS pseudo třídy :visited jde měnit některé styly navštíveného odkazu.

10 minut

Windows 10

Jaký je nový operační systém Windows 10. Srovnání s Windows 7.

11 minut

Microsoft Edge

Jaký je nový nástupce Internet Exploreru – Microsoft Edge.

21 minut

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

HTML seznamy

Přehled všech typů seznamů, které se v HTML používají.

11 minut

Adresa stránky nebo profilu na Facebooku

Jak, kde a proč si nastavit URL pro profil nebo stránku na Facebooku.

4 minuty

Google ignoruje obsah „404 stránky“

Jak se staví Google k obsahu chybové stránky s kódem 404/410.

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

Změna adresy JavaScriptem

JavaScript může měnit URL. Jak a v jakých případech toho využívat.

4 minuty

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

Globální HTML atributy

Obecné atributy jdou používat u všech HTML značek. Zde je jejich kompletní seznam.

18 minut

Převod milisekund

Převodník milisekund.

2 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

Výpis zdrojového kódu

Jak na HTML stránce vypisovat zdrojové kódy.

6 minut

Elipsa/ovál v CSS

Jak pomocí CSS nakresli ovál.

2 minuty

Citace v HTML

Jaké značky se v HTML používají pro označení citovaného textu.

8 minut

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

Office 2016

Microsoft uvolnil preview versi Office 2016. Jaká je a jak se liší od předchozí 2013?

4 minuty

Kontrola pravopisu v Sublime Text

Jak přidat českou kontrolu pravopisu do editoru Sublime Text.

4 minuty

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

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

3 minuty

Zvětšení obrázku

Jakými způsoby řešit zvětšení malého obrázku.

4 minuty

HTML definice termínu

HTML značka <dfn> slouží pro vyznačení slovního spojení termínu/výrazu.

4 minuty

Anketa: Pro jaké prohlížeče ladíte stránky?

Na základě čeho určujete prohlížeče, pro které webovou stránku ještě budete ladit?

1 minuta

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

Google Analytics: Přehled podle hodin

Jak v Google Analytics zobrazit podíl návštěv dle denní doby nebo dnů v týdnu.

2 minuty

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

Generování QR kódu

Co je to QR kód a jak ho okamžitě vytvořit pomocí jednoduchého online generátoru.

15 minut

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

ARIA atributy

HTML atributy aria-* slouží k sémantickému vyznačení informací pro postižené uživatele.

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

Text v obrázku

Jak vyřešit situaci, kdy má být textový obsah v obrázku z hlediska přístupnosti, použitelnosti a SEO.

6 minut

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

Kopírování do schránky

Jak s použitím JS zkopírovat uživateli nějaký text do schránky.

9 minut

Převod webu na responsivní design

Jak webovou stránku co nejlépe a nejjednodušeji převést do responsivní podoby.

20 minut

Before a after u <input>u

Funguje, nebo nefunguje použití :before a :after u <input>ů?

3 minuty

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

Will-change

CSS vlastnost will-change dá prohlížeči najevo, že se s elementem bude něco dělat.

5 minut

Maximální šířka pozadí

Jak obrázkovému pozadí nastavit maximální šířku. Tj. aby se přizpůsobovalo menší šířce okna.

2 minuty

Automatické vypnutí disku ve Windows

Windows automaticky vypíná pevný disk po 20 minutách nečinnosti. Jak vypínání zrušit?

2 minuty

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

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

5 minut

Plynulé rozbalení obsahu

Jak pomocí CSS animace a JavaScriptu plynule rozbalit původně skrytý obsah.

4 minuty

Pozadí jenom za písmeny

Jak vytvořit nadpis, který má pozadí jen za písmeny.

4 minuty

Automatické vyplňování formulářů

Pomocí atributu autocomplete jde usnadnit a zrychlit vyplňování formulářů.

4 minuty

Oprava chyb použitelnosti v mobilních zařízeních

Google informuje o chybách v použitelnosti u mobilních zařízeních. Jak je opravit?

6 minut

Nejbližší předek elementu – closest

JavaScriptovou metodou closest jde získat nejbližší nadřazený element vyhovující selektoru.

3 minuty

Image-rendering

CSS vlastnost image-rendering ovlivňuje způsob, kterým se v prohlížeči zvětšují/zmenšují obrázky.

5 minut

Jaký formát obrázku použít na webu

PNG, GIF, JPG? Který datový formát obrázku volit pro použití na webové stránce.

10 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

Hodnota zaškrtnutého radio <input>u

Jak v JavaScriptu zjistit hodnotu označeného radio políčka.

3 minuty

Validace po zadávání znaků

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

6 minut

Nadpisy na webu

Pro značení nadpisů stránek existují značky <h1>, <h2>, <h3>, <h4>, <h5> a <h6>.

12 minut

Měření blokování reklam v Google Analytics

Jak pomocí Google Analytics změřit návštěvníky, kteří blokují reklamy.

3 minuty

Části webu přes celou šířku

Jak jen některé části webu roztáhnout přes celou šířku.

3 minuty

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

Styl odrážkového seznamu

CSS vlastnost list-style upravuje vzhled seznamů <ul> a <ol>.

11 minut

HTML element <data>

HTML značka <data> slouží k označení strojově čitelných dat na webu.

2 minuty

Zobrazení náhodného čísla

Jak vygenerovat náhodné číslo z určitého rozsahu v JavaScriptu a PHP.

5 minut

Vložení ze schránky onpaste

JavaScriptová událost onpaste slouží k odchycení vložení obsahu ze schránky.

2 minuty

S-Rank

Co je to S-Rank? Jak ho zjistit, z čeho se počítá a jak ovlivňuje výsledky vyhledávání / SEO.

12 minut

HTML atribut hidden

HTML atribut hidden jde použít pro skrytí obsahu.

2 minuty

Zvětšení a zmenšení v CSS

Jak v CSS zoomovat (zvětšovat a zmenšovat) elementy.

5 minut

CSS vlastnost mask

Vlastnost mask dokáže vytvářet elementy s texturou nebo nepravidelnými tvary.

5 minut

Box-reflect

CSS vlastnost box-reflect umí vytvořit odraz celého boxu.

5 minut

Zvýraznění sloupců/řádků tabulky po najetí

Jak při najetí myší na tabulku zvýraznit příslušné sloupce a řádky.

5 minut

Atribut minlength

HTML atribut minlength stanovuje minimální počet znaků, který musí být v políčku.

2 minuty

HTML entity

Entity v HTML jsou zvláštní druh posloupnosti znaků sloužící k zápisu různých symbolů.

9 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

Směr rolování kolečkem

Jak podle směru otáčení kolečka myši měnit velikost obsahu.

5 minut

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

Atribut novalidate

HTML atribut novalidate zabrání výchozí HTML 5 validaci formulářů.

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

České skloňování

Jak v JS, PHP nebo CSS správně vytvořit skloňování slov pro české prostředí.

3 minuty

Maximální počet znaků

HTML atribut maxlength omezuje počet znaků ve formulářovém poli.

4 minuty

Fit-content

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

3 minuty

Aktivní element v JavaScriptu

Jak zjistit element, který vyvolal JS událost.

2 minuty

CSS filter

Jak vytvářet grafické filtry obrázků i jiných prvků na stránce.

7 minut

Režim celé obrazovky

Jak je možné stránku přepnout do fullscreenu (režimu celé obrazovky).

6 minut

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

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

5 minut

Font

CSS vlastnost font slouží k nastavení písma na stránce.

13 minut

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

JS akce po kliknutí na odkaz

Na co si dát pozor při obsluhování odkazu JavaScriptem.

4 minuty

Styl označeného textu

Pseudo-element ::selection umožňuje změnit styl kursorem označeného textu.

3 minuty

Bezstavové HTML

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

4 minuty

Drag & Drop v JavaScriptu

Jak vytvořit „drag & drop“ přesouvání prvků po stránce v JavaScriptu.

6 minut

Selektor :matches

CSS pseudotřída :matches slouží ke zjednodušení zápisu dlouhých výčtů selektorů.

3 minuty

Posun v poli přes okraje

Jak se z poslední položky pole dostat na první a obráceně.

3 minuty

Měření vyhledávání a akcí v Google Analytics

Jak v Google Analytics měřit vlastní akce jako kliknutí na tlačítko nebo dotazy do interního vyhledávání.

5 minut

Sublime Text – klávesové zkratky

Nejzajímavější klávesové zkratky v Sublime Text pro zrychlení práce.

7 minut

Expirace CZ domény

Jak probíhá expirace CZ domén. Kdy bude expirující doména volná?

4 minuty

Plynulá změna obrázků

Jak na stránce automaticky plynule měnit obrázky.

4 minuty

Zrychlení AJAXové aplikace o 100 ms

Jak u AJAXové aplikace snadno zrychlit odezvu na kliknutí o 100 milisekund.

5 minut

Průběh načítání AJAXu

Při odesílání dat AJAXem je dobré dát uživateli vědět, že se něco děje.

8 minut

Plocha odkazu

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

4 minuty

Seznam.cz prohlížeč

Seznam vytvořil vlastní webový prohlížeč. Jaký je?

6 minut

Zjištění vypnutých cookies

Jak zjistit, jestli má návštěvník zapnuté nebo vypnuté cookies.

5 minut

Oříznutí víceřádkového obsahu

Jak oříznout dlouhý text po stanoveném počtu řádek.

5 minut

JS document.head

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

2 minuty

Google zrychlil načítání na mobilech

Jak Google zrychlil načítání stránek z výsledků hledání o 150 milisekund.

2 minuty

Nová Google reCAPTCHA

Google vytvořil novou podobu nástroje chránícího před roboty reCAPTCHA.

5 minut

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

Font-feature-settings

S CSS vlastností font-feature-settings lze dosáhnout zajímavější typografie u OpenType písem.

6 minut

Samostatný Internet Explorer 11

Microsoft nabízí samostatný cloudový Internet Exploreru 11, který může běžet nezávisle na aktuálním IE v systému.

2 minuty

Prohlížeč Yandex

Co nabízí webový prohlížeč Yandex Browser.

4 minuty

Návštěvnost jen z určitých zemí v Google Analytics

Jak v Google Analytics filtrovat návštěvnost na základě země návštěvníka.

2 minuty

CSS barva currentColor

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

4 minuty

Text-align

CSS vlastnost text-align nastavuje zarovnání písma.

8 minut

Google a skrytý text

Obsah v záložkách a skrytý v „Zobrazit více“ nemusí být Googlem indexován nebo brán v potaz.

2 minuty

Border-image

CSS vlastnost border-image slouží k vytváření obrázkových rámečků.

8 minut

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

Přidání dalšího textového pole

Jak umožnit kopírování/přidávání dalších textových polí do formuláře.

5 minut

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

Vložení videa z Facebooku na web

Jak na vlastní stránku vložit video z Facebooku.

4 minuty

Chrome Dev Summit 2014

Výběr zajímavostí z Chrome Dev Summit.

4 minuty

Google označí stránky vhodné pro mobil

Ve výsledcích hledání na Google se objeví informace, že je stránka přizpůsobena pro mobilní zařízení.

2 minuty

Background-clip

CSS vlastností background-clip jde omezit místo, kde zobrazí obrázek na pozadí.

3 minuty

HTML atribut scoped

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

3 minuty

Kursor myši

Jak pomocí CSS měnit kursor myši nebo si vytvořit kursor vlastní.

9 minut

Jak funguje vykreslování stránky

Co prohlížeč dělá s webovou stránkou při vykreslování.

10 minut

Firefox Developer Edition

Vyšla speciální verse Firefoxu pro webové vývojáře. Kde ji stáhnout a co nového nabízí.

5 minut

Šachovnicový výpis položek

Jak vypsat položky sestávající ze dvou sloupců, aby se pořadí sloupců střídalo.

4 minuty

Škrtnutí značkou <s>

Značka <s> slouží k označení obsahu, který už je zastaralý nebo není relevantní.

4 minuty

Třísloupcový layout

Různé možnosti vytvoření rozvržení o 3 sloupcích s fixní i proměnnou šířkou.

7 minut

Responsivní design webu

Jak jednoduše a kvalitně vytvořit web, který se přizpůsobí všem velikostem cílových zařízení.

17 minut

Oříznutí CSS vlastností clip

CSS vlastnost clip slouží k oříznutí obsahu elementu.

2 minuty

CSS blend

CSS vlastnost background-blend-mode slouží ke smíchání barvy s obrázkem.

5 minut

JS vlastnost innerHTML

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

6 minut

Box-decoration-break

Vlastnost box-decoration-break upravuje chování stylu elementu při zalomení řádku.

4 minuty

Margin, border a absolutní posicování

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

4 minuty

HTML značka <output>

Značka <output> slouží k vypsání výsledku závislého na předchozí uživatelské akci.

5 minut

HTML značka <mark>

HTML značka <mark> slouží ke zvýraznění textu na stránce.

3 minuty

CSS pravidlo @document

CSS pravidlo @document umí omezit platnost CSS na určité URL.

3 minuty

Kontextová nabídka <menuitem>

HTML značka <menuitem> umožňuje vytvořit nativní kontextovnou nabídku.

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

First-letter

CSS selektor first-letter zaměří první písmeno v elementu.

4 minuty

Zjištění výsledného CSS v JavaScriptu

Jak v JavaScriptu zjistit výslednou hodnotu libovolné CSS vlastnosti určitého elementu.

2 minuty

40 nejpoužívanějších hesel

Jaká hesla často používají čeští uživatelé.

5 minut

Plynule se posouvající :hover efekt

Jak v CSS/JS vytvořit u navigace plynule přesouvaný hover efekt.

4 minuty

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

Odeslání příspěvku na stránku přes FB API

Jak v PHP odesílat příspěvky na Facebook stránku (Page) pomocí Facebook API.

5 minut

Zjištění směru rolování

Jak JavaScriptem zjistit, jakým směrem uživatel na stránce roluje.

2 minuty

Responsivní CSS mřížka

Jak vytvořit čistě v CSS mřížku, která se bude přizpůsobovat velikosti okna.

5 minut

HTML atribut lang

K čemu slouží a vyplatí se používat HTML atribut lang?

5 minut

HTML značka <time>

HTML element <time>. Jak a proč ho použít na stránce.

5 minut

HTML značka <dialog>

K čemu je dobrá HTML značka <dialog>.

6 minut

Tabindex

Atribut tabindex slouží k uspořádání položek pro procházení klávesnicí.

4 minuty

CSS flip a animace

Jak v CSS otočit obsah kolem svislé nebo vodorovné osy.

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

Text-shadow

CSS vlastnost text-shadow přidává textu stín.

6 minut

Výpis souborů ve složce

Jak v PHP vypsat a podle názvu či data seřadit obsah složky.

3 minuty

HTML značka <details>

K čemu slouží HTML značky <details> a <summary>.

3 minuty

Vytváření grafů v JavaScriptu

Snadná tvorba sloupcových, koláčových a dalších (i animovaných) grafů v JavaScriptu.

5 minut

Menu přes celou šířku

Jak vytvořit vodorovné menu s neznámým počtem položek přes celou šířku.

3 minuty

Plynulý přechod mezi stránkami

Jak vytvořit plynulý animovaný přechod mezi dvěma stránkami.

3 minuty

Živé ukázky

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

6 minut

Hover efekty s text-shadow

Zajímavé :hover efekty s využitím CSS vlastnosti text-shadow.

4 minuty

Hover efekty s box-shadow

Zajímavé :hover efekty s využitím CSS vlastnosti box-shadow.

4 minuty

Označení povinných položek

Jak elegantně ve formuláři označit povinné položky atributem required.

6 minut

Clickjacking na Facebooku

Jak funguje clickjacking na Facebooku a jak se proti němu bránit.

4 minuty

Dynamický update času „před X minutami“

Jak skriptem na stránce průběžně aktualisovat datum v podobě „zasláno před X minutami“.

4 minuty

Pluginy v Sublime Text

Už tak kvalitní editor lze instalací vhodných rozšířeních učinit ještě lepším. Jak a jaké pluginy nainstalovat?a href='/sublime-text'

5 minut

Tabulky v JavaScriptu

Jak pracovat s tabulkami v JS. Popis metod insertRow, insertCell, deleteRow a dalších.

4 minuty

Textarea

HTML značka <textarea> – jaká jsou její specifika.

6 minut

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

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

13 minut

JS tooltip

JavaScriptový popisek po najetí myší na ikonu nebo text.

4 minuty

Responsivní navigace

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

5 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

Využití XSS chyby

Jak je možné využít XSS díru na webové stránce a jak XSS „opravit“.

6 minut

Zjištění majitele domény

Jak PHP skriptem ověřit, zda je doména volná nebo kdo je její vlastník.

1 minuta

Seznam všech HTML značek

Abecední seznam všech 144 HTML značek.

7 minut

Flow

Vlastnosti flow-from a flow-into umožňují pohodlně přeskupovat obsah mezi elementy.

2 minuty

Propagační kód do Google AdWords

Jak získat zdarma propagační kód na 1000 Kč v Google Adwords.

2 minuty

HTML atribut media

HTML atribut media funguje u značky <a> podobně jako Media Queries v CSS.

2 minuty

Zápis průhledné barvy rgba()

Zadávání barev v CSS pomocí rgba() umožňuje vytvořit průhledné jednobarevné pozadí.

3 minuty

CSS display

CSS vlastnost display ovlivňuje způsob vykreslování HTML elementu.

8 minut

Atribut ping

HTML atribut ping umožňuje pingnout nějakou další stránku při prokliknutí odkazu.

2 minuty

Cacheování obsahu cizí stránky

Jak cacheovat výsledky obsahu staženého z cizí stránky.

2 minuty

Seznam TLD (Top level domén)

Seznam všech TLD – domén prvního řádu.

5 minut

Odstranění obsahu HTML elementu

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

1 minuta

Lokalisace podle IP

Jak na základě IP adresy lokalisovat návštěvníka webu.

2 minuty

Gamepad API

Jak webovou stránku ovládat gamepadem.

5 minut

JS událost oninput

JavaScriptová událost oninput zachytí práci s formulářovými políčky.

4 minuty

File_get_contents a timeout

Jak omezit maximální čas získávání obsahu stránky z URL.

3 minuty

FTP v Sublime Text

Jak se připojovat k FTP v editoru Sublime Text.

3 minuty

Skrývání a odkrývání s data-atributy

Zobrazování a skrývání obsahu elegantněji s využitím vlastních atributů.

2 minuty

Text-stroke

CSS vlastnost text-stroke vytváří okraj písmen podobně jako vlastnost border u boxů.

2 minuty

Záznamy z SQL za poslední hodinu, den, měsíc

Jak vybrat z SQL databáse záznamy za poslední minutu, hodinu, den, týden, měsíc atd.

3 minuty

CSS selektory :valid a :invalid

CSS selektory :valid a :invalid umí rozpoznat správně nebo špatně vyplněné formulářové políčko.

3 minuty

PHP pole $_SERVER

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

3 minuty

Inline-block a bílé znaky

Při zadávání šířky elementům s display: inline-block je nutné myslet na bílé znaky (whitespace).

3 minuty

Spuštění PHP v Sublime Text

Při programování v PHP se občas hodí testovat (spouštět) skript přímo v editoru.

2 minuty

WordPress spam registrace

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

2 minuty

Noreferrer

Řetězec rel=noreferrer umožňuje nastavit odkazu, že nemá posílat informace o předešlé navštívené stránce.

3 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řeklad stránky

Snadná lokalisace webu do různých jazyků.

3 minuty

CSS counter

Automatické číslování v CSS za pomocí counter-increment, counter-reset a counter.

4 minuty

CSS vlastnost content

CSS vlastnost content slouží k zapisování obsahu do stránky z kaskádových stylů.

3 minuty

Převedení PHP do JavaScriptu

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

4 minuty

Odsazení písmen a slov

Nastavení odsazení jednotlivých písmen (letter-spacing) a mezer mezi slovy (word-spacing).

2 minuty

Je stránka aktivní?

Zjišťování, jestli je stránka aktivní a zda návštěvník něco dělá.

1 minuta

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

Měření rychlosti SQL dotazu

Měření rychlosti provedení SQL dotazu.

3 minuty

Metody getElementByIdgetElementsByTagName

Vybírání elementů v JavaScriptu metodami getElementById, getElementsByTagName a getElementsByClassName.

5 minut

Automatické generování obsahu stránky

Automatické generování obsahu HTML stránky v JavaScriptu i PHP.

4 minuty

Znak dolaru v regulárním výrazu

Jak zapsat znak dolaru v regulárním výrazu v PHP.

2 minuty

Ikona přehrávání v <title>

Symbol přehrávání ▶ v titulku stránky jako je u videí na YouTube.

3 minuty

Gradienty v CSS

Jak vytvořit barevný přechod (gradient) přímo v CSS bez použití obrázku.

7 minut

Přístup k prvkům formuláře v JS

Jakými způsoby je možné získávat hodnoty prvků formuláře v JavaScriptu.

5 minut

BB kód v PHP

Formátování příspěvků pomocí BB code v PHP. Převod BB kódu do HTML.

7 minut

Ovládání webu klávesami v JavaScriptu

Odchytávání stisknutých kláves a vytváření klávesových zkratek v JavaScriptu.

5 minut

Confirm

Confirm je JavaScriptová hláška pro potvrzení akce. Jak ji používat nebo nahradit vlastním dialogovým oknem.

3 minuty

Otevírání nového okna

Možnosti, jak otevřít stránku do nového okna / nového tabu prohlížeče.

5 minut

Zamykání MySQL tabulek

K čemu slouží, kdy a proč používat zamykání tabulek příkazem LOCK TABLE.

7 minut

MySQL a transakce v PDO

K čemu slouží, jak a proč používat transakce při používání MySQL v PDO.

3 minuty

Position: fixed

Různé způsoby využití fixované posice v CSS.

2 minuty

CSS animace průběhu načítání

Jak využitím CSS transition a špetky JavaScriptu vytvořit animované znázornění průběhu načítání, jako je třeba na YouTube.

4 minuty

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

Scope v JavaScriptu

Co to je a k čemu slouží „scope“ při programování v JavaScriptu.

4 minuty

HTML atribut placeholder

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

6 minut

DOM (Document Object Model)

Co je to v prostředí HTML stránky DOM (Document Object Model) a jak se liší od zdrojového kódu.

5 minut

Margin v CSS

CSS vlastnost margin slouží k vytvoření odsazení kolem elementu, který má margin nastavený.

7 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

Emmet a časté zkratky

Nástroj Emmet usnadňuje a zrychluje psaní HTML/CSS kódu. Seznam často používaných zkratek.

2 minuty

Zobrazení avataru z Twitteru

Jak na svém webu zobrazit avatar uživatele z Twitteru, známe-li jeho jméno/přezdívku.

3 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

Box-sizing

CSS vlastnost box-sizing dokáže změnit vypočítávání rozměrů boxu.

2 minuty

Tutoriál na webu

Jak vyrobit jednoduchý tutoriál pro seznámení se s webovou aplikací.

7 minut

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

Animace čísel

Animování číselných dat pomocí JavaScriptu.

3 minuty

ASCII kreslení

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

1 minuta

Generátor CSS šipek

Generátor šipek/trojúhelníků přímo v CSS pomocí okrajů. Funkční i ve starých IE.

2 minuty

Rozbalování a sbalování obahu v CSS

Jak skrývat a odkrývat části stránky v čistém CSS bez jakéhokoliv JavaScriptu.

3 minuty

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

3 minuty

Detekce blokování reklam Adblockem

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

4 minuty

Responsivní obrázky

Co s obrázky na mobilních zařízeních?

5 minut

Změna location.hash bez posunu stránky

Jak změnit location.hash bez posunutí stránky.

2 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

Zvyšování hodnoty inputů

Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.

4 minuty

Odpočítávání času v HTML

Jak udělat na webu odpočítávání času. V JavaScriptu i v čistém CSS.

6 minut

Spojení CSS a JS souborů do jednoho

Zrychlit načítání webu pomůže sloučení CSS a JavaScriptu do jednoho souboru. Hotové řešení v PHP.

3 minuty

Proměnné v CSS – var()

Proměnné přímo v CSS přes funkci var().

3 minuty

Zavřít vše

Když se záložky v prohlížeči přemnoží, řešení je zavřít vše a osvobodit se.

4 minuty

CSS vlastnost all

Resetování CSS pravidel vlastností all.

2 minuty

Značka <button>

Tlačítko <button> v HTML, možné problémy v Internet Exploreru a jak je vyřešit.

4 minuty

Responsivní komentáře

Jak některé části stránky načítat jen při určité velikosti obrazovky.

3 minuty

Stylování formulářových políček a tlačítek

Které CSS vlastnosti si ohlídat při dosahování perfektního stylu vstupní políček a odesílacích tlačítek.

4 minuty

HTML značka <template>

HTML tag <template> slouží k připravení HTML kódu, který později zpracuje JavaScript.

3 minuty

CSS sprite

Spojení všech obrázků do jednoho (CSS sprite) zrychlí načítání webu. Hotový generátor v PHP.

8 minut

Plynulý přesun focusu

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

2 minuty

JavaScriptové události myši

Popis všech možných událostí, které lze v JavaScriptu vyvolat myší. Návod, jak je odchytávat a blokovat.

18 minut

Magnific Popup – zajímavý lightbox skript

Rozumně napsaný, universální a dobře použitelný lightbox skript.

3 minuty

Počet znaků a slov v textu

Jak spočítat délku (počet znaků), počet slov, řádků nebo odstavců v textu.

4 minuty

CSS pointer-events

Vlastnost pointer-events umožňuje zrušit reakci na události vyvolané myší.

2 minuty

HTML značka <meter>

Značka <meter> slouží k indikaci čísla.

4 minuty

Dvě domény na jednom Wedos hostingu

Jak u Wedosu na jednom hostingu provozovat další doménu zdarma.

3 minuty

Procházení značek v JavaScriptu

Jak cyklem procházet značky v JavaScriptu. Popis různých možností.

3 minuty

Výběr elementů querySelectorem

Metoda querySelector a querySelectorAll zjednodušuje výběr elementů v JavaScriptu.

3 minuty

CSS hyphens

Vlastnosti hyphens ovlivňuje rozdělování slov spojovníkem na konci řádku.

3 minuty

Šířka tabulátoru tab-size

Jak pomocí CSS změnit šířku tabulátoru ve zdrojovém kódu.

2 minuty

HTML Imports

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

4 minuty

Velikost Facebook coveru

Jaké má rozměry „Facebook cover“ a profilová fotka. Jak je profilový obrázek umístěn.

2 minuty

Responsivní tabulky

Co udělat s tabulkami, aby se rozumně zobrazovaly na mobilech/tabletech.

8 minut

Uvozovky v CSS

Vlastnost quotes umožňuje nadefinovat uvozovky, které se okolo značky objeví.

2 minuty

CSS resize

Možnost roztahovat element pomocí CSS vlastnosti resize.

4 minuty

Výběr barvy

Jak umožnit uživateli vybrat barvu z palety (pomocí JavaScriptu i bez JS).

5 minut

Více obrázků na pozadí

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

5 minut

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

5 minut

AJAX

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

9 minut

Vlastní kontextová nabídka

Jak po stisknutí pravého tlačítka myši zobrazit vlastní nabídku.

4 minuty

Zjištění souřadnic myši

Jak v JavaScriptu zjistit aktuální souřadnice myši (kursoru).

2 minuty

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

Našeptávání značkou <datalist>

Pro napovídání možností při vyplňování <input>u lze v HTML 5 použít značku <datalist>.

3 minuty

Směr přijetí/odjetí myši z elementu

Jak zjistit, kterým směrem myš opustila element nebo odkud na něj přijela?

3 minuty

Internet Explorer 11

Co zajímavého z pohledu tvůrce webů přináší Internet Explorer 11.

3 minuty

Více náhledů videa

Jak při najetí myší na náhled videa zobrazovat další náhledy.

5 minut

Změna vzhledu Google Mapy

Mapu od Googlu na vlastním webu je možné přestylovat do jiné podoby.

2 minuty

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

3 minuty

Fixní menu při rolování

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

3 minuty

Oříznutí dlouhého textu

Má-li se delší text vyjít do přesného místa, je třeba kousek textu uříznout.

5 minut

Bezpečnost webových stránek

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

11 minut

Horizontální navigace

Různé možnosti, jak vytvořit vodorovné menu s odkazy vedle sebe.

5 minut

Má návštěvnost vliv na SEO?

Má smysl z pohledu SEO (či jiného) se hnát za co nejvyšší návštěvností?

3 minuty

JavaScriptová simulace atributu ismap

HTML atribut ismap umí zjistit souřadnice při kliknutí na obrázek. Jak na to v JS?

1 minuta

Formuláře a CSS reset

Dopad * {margin: 0; padding: 0} na formulářové prvky.

2 minuty

Událost onclick na různých elementech

Test události onclick na různých elementech při vyvolání myší i klávesnicí.

4 minuty

Získání obsahu cizí stránky

Jak v PHP a JavaScriptu získat obsah z cizí webové stránky.

3 minuty

Označení interních a externích odkazů

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

5 minut

Rozmazání obsahu

Rozmazávání obsahu v různých prohlížečích.

4 minuty

Jednoduchá galerie v CSS

Galerie obrázků bez JavaScriptu pomocí CSS.

3 minuty

Automatické obnovení stránky při uložení

Nástroj LiveReload umí po uložení souboru v editoru automaticky obnovit tutéž stránku v prohlížeči.

2 minuty

HTML značka <select>

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

3 minuty

Semantic UI

Semantic UI je CSS framework. Co nabízí a jak funguje?

3 minuty

Vlastnost hasLayout

Co je zač CSS vlastnost hasLayout a k čemu ji využít.

3 minuty

Průhledný obsah v CSS

Pro zprůhlednění obsahu existují různé možnosti. Nejen CSS vlastnost opacity.

6 minut

Různé druhy HTML značek

Dělení HTML značek podle způsobu jejich otevírání a uzavírání.

7 minut

Obrázek jako odrážka

V CSS je možné přidat textu (seznamu) obrázkovou odrážku, jaké to má úskalí a risika?

3 minuty

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

8 minut

CSS 3 selektory ve starých IE

Doplnění podpory CSS 3 selektorů do starých prohlížečů pomocí JavaScriptu.

2 minuty

Obtékání v CSS

Detailní popis obtékání (float) a clearování v CSS, stavba stránky pomocí obtékání, vysvětlení možných risik a úskalí.

10 minut

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

Automatické zapamatování formulářů

Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?

4 minuty

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

Rotace obsahu

Napříč prohlížeči funkční řešení vytvoření svislého textu (otočeného o 90 stupňů).

4 minuty

HTML značka <progress>

Značka <progress> slouží k znázornění postupu. Co nabízí za možnosti?

3 minuty

Jednoduchý web v PHP

I web o pár stránkách je vhodné skládat automatisovaně. Jak na to v PHP?

5 minut

Skutečné rozměry obrázku

Jak může JavaScript zjistit skutečnou výšku a šířku obrázku.

2 minuty

Box model

Co je to a jaký box-model si vybrat. Jaké jsou výhody a nevýhody.

5 minut

Odkaz vypadající jako tlačítko

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

3 minuty

Sloupce stejně vysoké

Různé možnosti, jak zajistit automatické roztažení různě vysokých sloupců na stejnou výšku.

5 minut

Upload souborů bez obnovení stránky

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

3 minuty

PHP proxy skript na 50 řádků

Hotový PHP skript umožňující zobrazit web prostřednictvím jiné IP adresy.

5 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

Jak zakázat scrollování na stránce

Někdy se hodí zamezit uživateli v rolování, jaké existují možnosti?

3 minuty

Hotové řešení lazy-loadingu YouTube videí

Hotové řešení v JavaScriptu načítání videí z YouTube, až když jsou potřeba.

3 minuty

Živý náhled editovaného CSS

Jak docílit, aby se editované CSS v Sublime Text editoru v reálném čase aplikovalo v prohlížeči.

1 minuta

Kruhový obrázek

Různé možnosti vytvoření kruhového obrázku.

2 minuty

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

3 minuty

Flat UI framework

Flat UI nabízí hotové uživatelské rozhraní založené na Bootstrapu, má smysl jej používat?

2 minuty

Emmet – efektivnější psaní kódu

Nástroj Emmet nabízí výrazné zjednodušení při psaní HTML a CSS kódu.

6 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

Srovnávací test rychlosti prohlížečů

Je rychlejší Chrome 27, Firefox 22, Opera 15, nebo Internet Explorer 10?

1 minuta

Jak přidat stránku na Seznam a Google

Adresy, na kterých lze dát vyhledávačům vědět o svém novém webu.

3 minuty

Rozklikávací menu

JavaScriptové menu otvírající/zavírající se po kliknutí.

4 minuty

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

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

4 minuty

Testování webů napříč prohlížeči

Možnosti, jak otestovat webové stránky v různých versích různých prohlížečů. Desktopových i mobilních.

6 minut

Bezpečnost hesel

Postup, jak si vymyslet a zapamatovat dostatečně silné heslo.

1 minuta

Absolutně posicované pozadí

Jednoduché řešení vícebarevného pozadí absolutním posicováním.

2 minuty

Vyjížděcí menu v CSS

Jak vytvořit v čistém CSS vyskakovací menu.

3 minuty

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

11 minut

Zapnutý a vypnutý JavaScript

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

3 minuty

HTML značka <base>

K čemu využít a na co si dát pozor u HTML tagu <base>?

2 minuty

Lazy loading YouTube videí

Jak načítat embedované video z YouTube, až když je potřeba.

5 minut

Ř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

Stylování HTML tabulek

Jednoduché barvení a další stylování značky <table>.

6 minut

Odstranění vlastních návštěv v Google Analytics

Jak v Google Analytics vyloučit ze statistik svých webů vlastní návštěvy.

3 minuty

Černobílý styl obrázku

Jak v CSS zajistit černobílý styl běžného obrázku. Napříč prohlížeči stále panují rozdíly.

5 minut

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

Speciální znaky v atributu class

Co takhle psát názvy tříd v HTML a CSS hezky česky s diakritikou. Funguje to?

4 minuty

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

3 minuty

CSS framework Kraken

Kromě populárního CSS frameworku Bootstrap existují i další zajímavé. Kraken je jeden takový.

1 minuta

Pokročilé stylování checkboxu

Díky selektoru :checked lze v podporujících prohlížečích (Explorer 9 a novější) vytvářet zaškrtávací <input>y neotřelé podoby.

5 minut

Počítání v CSS pomocí calc()

Od Exploreru 9 a mimo starou Operu 12 lze přímo v CSS provádět jednoduché výpočty využitím calc().

3 minuty

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

10 důvodů proč používám Sublime Text

Sublime Text (zkráceně ST) je textový editor vhodný pro webdesign. Proč jej používat?

3 minuty

CSS funkce toggle()

Nefunguje zatím snad nikde, měla by sloužit k pohodlnému zadávání hodnot pro zanořené elementy stejného názvu.

2 minuty

„Programování“ v HTML a CSS

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

3 minuty

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

5 minut

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

Označení odkazu na kotvu, pokud je na ní odrolováno

U jednostránkových webů s fixní navigací (s odkazy na #kotvy) může být vhodné právě viditelnou (aktivní) položku zvýraznit.

4 minuty

20 důvodů proč používám Operu

Mých 20 důvodů, co mě drží u prohlížeče Opera.

6 minut

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

4 minuty

Tlačítka pro sdílení na sociálních sítích

Různé možnosti, jak mít na webu tlačítka pro sdílení na sociálních sítích.

6 minut

Odrolování na určitý HTML tag

Nestačí-li běžné odrolování na HTML #kotvu, přichází na řadu JavaScript.

3 minuty

Vlastní vzhled formulářů

Jak vytvořit originálně vypadající formulář, aniž by házel uživatelům klacky pod nohy?

5 minut

Jednoduché filtrování dat v čistém CSS

Při filtrování malého množství položek si lze od Internet Exploreru 9 vystačit jen s CSS.

3 minuty

Seznam všech CSS 3 selektorů

V CSS 3 je spousta selektorů, které s postupným mizením starších prohlížečů může dávat smysl znát.

22 minut

Nástroje pro vývojáře v prohlížečích

Pro testování a ladění webu existují (nebo je lze snadno doplnit) ve všech rozšířených prohlížečích vývojářské nástroje.

5 minut

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

3 minuty

Náhled odkazu na Twitteru

Jak u odkazu na Twitteru zobrazit jeho náhled?

2 minuty

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

3 minuty

JavaScriptový framework Zepto.js

Odlehčená JS knihovna nabízející základní funkce jQuery ve zmenšené podobě.

2 minuty

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

1 minuta

Atribut pattern pro formulářové prvky

Validace formulářů regulárními výrazy na straně klienta bez JavaScriptu.

1 minuta

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

3 minuty

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

6 minut

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

1 minuta

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

2 minuty

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

4 minuty

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

3 minuty

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

1 minuta

Podmíněné komentáře pro Internet Explorer

Jak rychle a snadno hackovat HTML a CSS v různých historických versích Internet Exploreru.

4 minuty

Zablokování některých kláves

Zablokování určitých kláves (šipek) pomocí JavaScriptu.

1 minuta

Česká lorem ipsum HTML šablona

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

5 minut

Souborový správce elFinder pro TinyMCE 4

Čtvrtá verse WYSIWYG editoru TinyMCE změnila API pro připojení správce souborů, co s tím?

2 minuty

Webdesign

Webů tvorba

1 minuta

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