Pár poznámek k frontendu a drobnostem, které bylo potřeba vylepšit, jsem našel. 

Frontend

Drobné úpravy v kódu jsem dělal průběžně celý rok. Hlavní funkce byla nejspíš pro Google Aggregate Rating. SEO mi to maličko zlepšilo, nicméně tyhle věci stejně nemají velký význam, pokud nemáte placenou reklamní kampaň. Ale aspoň jsem se zase něčemu přiučil. 

Mám tu i poznámku, že proběhl "maličký redesign", ale to už si vůbec nevzpomenu, co jsem upravoval. A nějaké úpravy v modulech pro statistiky. 

Obsahy

Všechny seriálové přehledy dostaly aktualizaci v podobě seznamu žánrů a dostupností, kde můžete daný seriál vidět. Vím, velký smysl pro starší texty to už nemá, ale chtěl jsem to všechno hezky sjednotit. A tak jsem to vzal komplet i s obrázky. 

Backend

No a tady bylo práce jak na kostele. Administrace už byla opravdu hodně zastaralá. 

Našel jsem funkční kopii systému z roku 2021, takže pro zajímavost přikládám screenshoty. No to pozadí je hrozné, to jsem ze stylů myslím ještě ten rok vymlátil. 

Původní plán byl jednoduchý: responzivita. Ale když jsem začal podrobněji studovat 14 let staré zdrojáky, naznal jsem, že bude lepší  to celé zlikvidovat a začít znovu. Možná 25 % jsem zachoval. 

Logiku jsem také zachoval. Modulové menu vlevo, výpisovou tabulku a editační formulář se záložkami. Celkem 2 hlavní šablony, které zvládnou pokrýt všechny moduly. Nově jsem přidal i dashboard, ale ten vám screenshotovat nebudu, abych hned nevykecal, co všechno systém umí. 

Změna nebyla malá a já už se aspoň nemusím stydět to někomu ukázat. 

Co bude

Hotové texty mám přesně tři, a tak se můžete těšit na jeden článek nudný, jeden generický a jeden zajímavý. Co jsem dnes udělal pro svůj web je seriál nudný, který stejně nikoho nezajímá, ale já ho píšu hlavně pro sebe. Abych měl přehled, co se kdy na webu dělo, jak jsem doháněl aktuální trendy a jak jsem aktualizoval technologie (řečeno s trochou nadsázky). 

V dalším ze svých pokusů o návrat k původní tematice blogu (tvorba webových stránek) jsem dokončil krátký textík o stylování a typografii. Snad někomu pomůže. Poslední článek se opět bude věnovat seriálům, tentokrát britským komediím. 

Co třeba nebude

Velký návrat k původnímu tématu nebude. Měl jsem v plánu napsat kompletní návod na pokročilou cookie lištu v HTML, CSS a JavaScriptu, jenže to je taková hromada kódu, že se k tomu asi nikdy nedonutím. Pár dalších takových textů načrtnutých jen v podobě nadpisu jsem raději hned smazal. Psaní takových článků je časově náročné, nemluvě o nutnosti kód vždy podpořit funkční aplikací. A na to zase není vůle.

Co by mohlo být

Právě seriálové a filmové přehledy se píšou hrozně snadno. Nejnáročnější je vždy najít vhodný anotační obrázek pro každý titul. Jeden dva odstavce, odkazy a máme hotovo. A pár takové článků sem do konce roku ještě naskočí. Když jsem kontroloval kategorii seriálů, zjistil jsem, že mi úplně chybí přehled novinek za rok 2023. Něco jsem vám už doporučoval, ale těch zajímavých titulů bylo samozřejmě víc. A to už pomalu končí další rok. 

Ani filmové přehledy chybět nebudou, na Vánoce vám opět doporučím nějaká hrozná pekla. Zatím nevím, jestli to budou klasická monster béčka nebo něco mnohem horšího... Ještě uvidím. 

Protože jsem sám kodér, správa vlastního webu pro mě znamená i pravidelnou údržbu systému. Celý redakční systém je můj výtvor a čas od času je potřeba šáhnout i do kódu. Grafik sice nejsem, ale jako web developer cítím potřebu si design také tvořit sám. Píšu, kóduji a občas i kreslím, protože každou zkušenost s vlastním systémem můžu přenést do oboru, kterým se živím. 

Ale zpět k hlavnímu tématu článku. "Dnes" opět neznamená nedávnou minulost, ale zhruba 2 roky od poslední změny grafiky. Úprav bylo hodně, zveřejněny jsou už další, a tak je nejvyšší čas na nový článek.  

1. Design

Web jsem začal trošičku zmenšovat, protože původní návrh počítal se vskutku obřími prvky. Písmo je menší, odsazení jsou menší, všechno se decentně zmenšilo. Absenci nové favicony a Facebook obrázku jsem také napravil, abych jako poslední úpravu mohl vyměnit font. Nebo spíš vrátil zpět Muktu, která byla při pixelovém zmenšení zase pěkná. 

2. Programování

Malé designové úpravy jsem provedl i v administraci, aby se mi pohodlněji používala. Ale to není to hlavní. Backend prošel i velkými kódovými úpravami, aby architektura systému dávala trochu větší smysl. Frontend to samé. Ale to jsou změny, kterých si jako návštěvník nevšimnete, a tak s nimi nechci zabírat zbytečně moc odstavců. 

3. Zlá cookie lišta

Čeho si ale určitě všimnete, je nová cookie lišta. Konečně kompletní a konečně se chová tak, jak by se cookie lišta podle nového nařízení měla. Málem jsem u toho porodil koťata, takže přemýšlím nad dalším článkem z oboru, který by pomohl ostatním kodérům vyřešit stejný problém. 

4. Články

K velké aktualizaci došlo i na poli článků. Anotační obrázky jsem zpětně doplnil až na úplný začátek, ať je všechno stejné a pěkné. Tím bych znovu rád doporučil databázi pexels.com, která sice není největší, ale je zadarmo. Pro jakékoli použití. Spolu s obrázky jsem se také pustil do celkového zkrácení anotací. Zpětně vůbec nechápu, který internetový démon mi šeptal do ucha, že ty anotace musí být tak odporně dlouhé. 

5. Viditelné úpravy frontendu

Na závěr se ještě vrátím ke kódování, protože některé utilitky jsou přímo viditelné i pro návštěvníka. První z nich je lazy load. Napsal jsem si ho sám, jednoduše, tak jak potřebuji. Download + copy + paste řešení jsou dobrá, když člověk potřebuje komplexní knihovnu, ale pro takové maličkosti se vždy lepší se spolehnout na vlastní kód.

Druhá úprava, kterou jsem na webu provedl, jsou náhledové boxíky na vlastní články. Ty si můžete znovu prohlédnout v posledním odstavci. (Pouze pro notebookové a vyšší rozlišení). 

Samotný obsluha ajax requestu je úplně triviální, všechno ostatní zkontroluje JavaScript. Tedy jestli odkaz vede na článek nebo ne. Ideální by samozřejmě bylo vše kontrolovat na straně backendu a přidávat například parametr rel="post". Ale to se mi zoufale programovat nechce, a tak stále ukládám odkazy na hulváta přes absolutní url. Nahrazuji pouze doménové jméno, a to kvůli migraci localhost > testovací doména > ostrý provoz. A protože pouze články u mě mají jediný segment url, JavaScript to zkontroluje velice snadno. 

Když vytváříte texty, je dobré vždy odkazovat na svoje starší články. Na předchozí díl seriálu nebo na článek z úplně jiné kategorie, jen kvůli výskytu klíčového slova. Sharknado. Můžete odkázat i na článek tematicky související, protože lidé často neklikají na výpis podobných záznamů pod textem. 

Když se totiž zakloním na židli, mám oči zhruba metr dvacet od monitorů a už to prostě nepřečtu. A pohodlné čtení vlastních textů bylo potřeba vyřešit. Nemluvě o tom, že poslední malá změna grafiky (hlavička) web posunula spíš do minulosti, než směrem k aktuálním trendům. 

Teď si zpětně říkám, jestli to není velké až moc, že na stránku se těch informací příliš nevleze. Ale uvidíme. CSS jsem si nachystal tak, abych mohl změnit pár chytrých proměnných a celý web se smrsknul. Také jsem si nachystal alternativní header, takže je možné, že grafiku v blízké budoucnosti ještě malinko změním. Vlastně se jedná o mobilní verzi headeru, akorát zobrazenou už od začátku. 

Dalším cílem bylo smazání zbytečných nesmyslů napříč šablonami. Když se podívám na některý ze starších designů, je mi trochu smutno ze všech těch hrozných meta dat, které jsem tam za každou cenu musel nacpat... Všimněte si, kolik bordelu pod článkem je: 

Zbytečnosti jsem s každým dalším designem trochu promazal a poslední změna nebyla výjimkou. Zůstaly jen nezbytně nutné informace, a to je datum, kategorie a tagy. A počet komentů zobrazuji jen v případě, že je vyšší jak nula. Podobné změny proběhly i v detailu, kde zařvaly hlavně ty sociální sdílítka. Míru jejich prokliků jsem si už delší dobu logoval a hodnoty mluvily jasně: je to k ničemu. 

Úklid kódu samozřejmě proběhl také, ale ten není potřeba probírat příliš detailně. Hlavně jsem smazal všechny ty zbytečné atributy u odkazů, jako rel="bookmark" a podobné. Je to k ničemu - a i kdyby nebylo, tak mě to nezajímá.

Styl diskuse jsem zatím neměnil, ten byl předělávaný poměrně nedávno. 

Další krok ke kompletní ajaxové obsluze

Tvrzení z předchozího článku, že všecičko už je ajaxem, bylo asi trochu přehnané. Ale já pokročil dál a v tuto chvíli zůstává už jen posledních pár vlaštovek. Například logika kompletní diskuse, viditelná například v knize návštěv. Ta by potřebovala předělat úplně, a tak jsem tam nechtěl násilím lepit nějakou obsluhu. 

Klikací logo je cílený hard refresh: tam ho potřebuji a chci. 

Moderní stránkování: není

Tlačítko "Načíst další" vedle odkazů na stránku 1 až N mám nachystané a funkční, ale rozhodl jsem se ho nakonec vynechat. Dokonce mám v systému i možnost zobrazení článků například od dvacátého po šedesátý, ale veškerá tato cool funkcionalita umřela na JavaScriptu. Důvod je prostý: prohlížeč neumí udržet pozici scrollu při procházení historie. Tedy v případě, že cílová stránka je delší, než vstupní. Přes history.pushState se mi pozice scrollu uložit nepovedla, a tak mě napadlo ještě ukládání pozice do cookiny unikátně pro každou URL. A v tu chvíli jsem si řekl ne, tohle prostě ne. 

Pravý sloupec

Sidebar je další sekce, kterou s každou další úpravou promazávám. Jako první jsem odpálil text "O mně". Netřeba. Další zrušený blok jsou archívy podle měsíce a roku. Seriózně, proč tohle vlastně na každém blogu je? Vím, proč jsem to chtěl já: přece abych hned viděl, jak často neplním svůj plán tří článků měsíčně :) V tuto chvíli se archívy zobrazí jen tehdy, když jsem lognutý v administraci. Takže uživatele neobtěžují a já vidím, co potřebuji.

On jenom ten SQL dotaz je za trest. Trvá pomalu stejně dlouho, jako celý zbytek webu a vytáhne pár odkazů, na které stejně klikám jenom já. Takže až vymyslím, kam si toto filtrování přidám do administrace, archívy poletí nadobro.

Pro zajímavost:

SELECT 
	DISTINCT DATE_FORMAT(p.`timestamp`, '%Y-%m') AS `date`, 
	COUNT(p2.id) AS post_count
FROM `%prefix%_posts` p 
	LEFT JOIN `%prefix%_posts_categories` c ON c.id = p.category_id AND c.active = '1' 
	LEFT JOIN `%prefix%_posts` p2 ON DATE_FORMAT(p2.`timestamp`, '%Y-%m') = DATE_FORMAT(p.`timestamp`, '%Y-%m') AND p2.active = '1'
	INNER JOIN `%prefix%_posts_categories` c2 ON c2.id = p2.category_id AND c2.active = '1' 
WHERE p.`active` = '1'
GROUP BY p.id
ORDER BY p.`timestamp` ASC

Je to fakt zlo. Ale abych se vrátil k designu, na ukázce vidíte, že i zobrazení zdrojáku je v novém kabátě. Písmo je "Source Code Pro" a najdete ho na Google Fonts. Nabízí i řezy 500 a 600, takže ty přehnaně tlusté boldy nemusíte řešit.

Typografie

Tím jsem nakousnul fonty, a tak můžeme přejít k nim. Jak jsem uváděl hned na začátku, cílem bylo komplexní zvětšení webu. Font Mukta, který jsem měl na webu před tím, byl ještě o pixel menší, než jiná písma ve stejné velikosti. Takže původní Mukta 15 odpovídala zhruba Arialu 14.

Písmo jsem vybíral opravdu dlouho. Nakonec mě to přestalo bavit a vsadil jsem na jistotou, kterou je obyčejné Roboto. Marcellus, jakožto nadpisový font, vypadal i ve větších rozměrech pořád hezky, takže nebyl důvod ho měnit. 

Původní návrh počítal s devatenáctkou písmem, ale po prvních úpravách jsem ho shodil na 17 pixelů. Podle mě tak akorát. Výška řádku je nyní 1.65.

To by bylo tak asi vše, co jsem chtěl k redesignu napsat, a teď už se jen uvidí. Uvidí, jestli se grafika líbí klientovi, kterým jsem si v tuto chvíli sám. 

Na závěr si ještě připomeneme, jak to tu vypadalo před tím: 

1. Všechno, všecičko je Ajaxem... Téměř.

Tedy úplně všechno ne, například detail článku jsem vynechal. Tam se děje už poměrně dost operací a zatím to pro mě bylo víc trápení, než užitku. Ale to hlavní, tedy 3 typy kategorizace a stránkování už je Ajaxem. Loadovací kolečko ale zobrazuji jenom u stránkování, protože jinak by bylo už moc otravné. Stejně tak komentáře: validace, vkládání i zobrazení je nyní řešeno dynamicky. Opět s jednou malou výjimkou, a tou je přepis stránkování v knize návštěv a jiných hojně komentovaných článcích. To se mi fakt už nechtělo. A když se nad tím zamyslím, všechny Facebooky a podobné mory dnešní doby se chovají úplně stejně: co vložím, to vidím, až na refresh se přepočítá limit aktuálních záznamů. 

2. Revize starých textů

I když jsem za posledních 10 let příliš neskriptoval, jen samotným sledováním monstrózního redakčního systému (kde mám občas pocit, že už nabyl vlastního vědomí), jsem se mnohému přiučil. A skrz pár nových zkušeností jsem zrevidoval některé starší články, a to nejen na téma PHP, ale i ty klasické kodérské. A na další se chystám.

Zde jsou některé z nich:

CSS layout, aneb web bez tabulek - tutoriál

Vlastně jsem jenom změnil xHTML za HTML 4.01. XHTML jakožto dávno mrtvý vývojový stupeň už je minulostí, takže proč ho někam cpát. Článek jako takový jsem neměnil, protože je to i hořká vzpomínka na Internet Explorer 6 a spoustu nepříjemných situací, které kvůli němu člověk musel řešit. Sveřepé IDčkování každého divu už se také dlouho nepraktikuje, takže jsem raději změnil ID za classy.
Celý článek

PHP od začátku: dynamické skládání stránek funkcí include

Includovací návod jako takový je stále funkční a jednoduchá webová stránka lze s jeho pomocí vytvořit. Docílení unikátního titulku ovšem nebylo ideální, a tak jsem tuto část článku změnil. Smazal jsem ale druhý díl. Tam už byly konstrukce zbytečně velkolepé. Hlavně to není cesta, kterou se chce začínající programátor ubírat. Je lepší se seznámit z databází hned na začátku, než vymýšlet šílenosti, jak docílit stránek bez ní. 
Celý článek

Chytré funkce pro JavaScript

Jeden článek, jedna funkce. Nebo víc funkcí. Proč takhle jednoduché články nepíšu častěji? Zrevidovat ale potřebovaly, a tak můžete využít upravenou práci s GETem či setCookie včetně všech potřebných atributů. 
Celý článek

Stránkování v PHP

I stránkovací knihovna prošla rozsáhlou revizí, článek stále najdete ve výpisu na úvodní stránce. 
Celý článek

mod_rewrite

Do posledního souhrnného článku k mod_rewrite jsem přidal zápis pro přesměrování z HTTP na HTTPS.
Celý článek

3. Úprava kategorizace

Jak hlavních kategorií, tak tagů. Přidal jsem funkci zařazení článku do více kategorií, kterou jsem zatím vůbec nepotřeboval. Ne, že bych ji najednou musel mít, ale chtěl jsem vymyslet logiku, která by byla pro systém nejvhodnější. Tak proč se na to nepodívat blíž, protože tohle zrovna může být funkce, kterou by mohl využít i někdo další.

Kategorie

Článek má u sebe stále sloupec 'category_id', kde je přiřazené jeho hlavní umístění. ID kategorie zařídí, abych vytáhl pouze články za aktivní kategorie filtrované dle aktuálního jazyka. (Ano, umím více jazyků, byť tuto funkci také nevyužiji.) Články už podle 'lang_id' nerozlišuji, protože každý článek je vázaný na svou kategorii, nemůže být bezprizorní. 

Aby článek mohl mít kategorií vícero, přidal jsem vazební tabulku, kde jednoduše uložit 'article_id' a 'category_id'. Tady už žádná filtrace dle jazyka či kontrola sloupce 'active' neprobíhá, protože podmínka je využita pouze v detailu kategorie, kde už mám objekt vytažený a vím, že 'lang_id' sedí. Stejně tak mě nezajímá zanoření v rámci stromu. K tomu slouží základní struktura, a to z logického hlediska. 

Seznam kategorií pod každým článkem

SQL dotazy v cyklu jsou zlo, a tak si vytáhnu ID už načtených článků do pole. Pak pošlu jediný SQL dotaz na vazební tabulku s podmínkou WHERE `id` IN (). A v dalším rychlém cyklu rozřadím. Vlastně stejným způsobem, jako řeším tagy, připojené taktéž přes externí tabulku.  

Tagy

Tagy také dostaly možnost kategorizace, byť sdílené s články. Tohle vlastně na frontendu nikdy nebude vidět, nicméně to slouží pro mě, abych je mohl v administraci filtrovat. Každý tag se totiž tematicky vztahuje k některé z hlavních kategorií, a já si v tom už prostě musel udělat pořádek. Tagů to bylo víc než 100 a začaly se mi duplikovat. Takže jich pár vylítlo komínem, a já doufám, že má sekundární kategorizace (k čemuž vlastně tagy slouží) je zase o něco logičtější. 

3. SSL certifikát, PHP7

Napsal jsem na podporu a poprosil je po převod na PHP7. Systém už byl na localhostu odladěný tak, aby fungoval jak na pětce, tak na sedmičce bez chyb, a tak nebyl sebemenší problém. 

Také jsem si konečně pořídil zámeček před url adresu. I když SSL certifikát považuji spíš za módní záležitost... Žádné přihlašování tu nemám, ke komentům vás nikdo nenutí, takže jediná potřebná věc je vstup do vlastní administrace. A tam lezu jen z Faradayovy klece, co mám ve sklepě.

Pandemická izolace mi dala prostor nejen k systémovým úpravám, ale konečně i k pořádnému psaní. Texty přibývaly, spousta je hotová úplně, jiné jsou zatím jen naplánované. Ale při frekvenci 3 články do měsíce (což tu nikdy nebylo), mám naplánováno až do konce října. 

Takové plánovaní je dobré, protože pak se nestane, že bych vynechával. A minulosti jsem často vynechával. Nevýhodou je, že když náhodou dostanu nápad na nový článek, celé plánování se rozsype, jako domeček z karet. Ale třeba ne. Uvidíme. Co vše bylo naplánováno a co můžete očekávat, to se dozvíte v dnešním rychlém článku. A to možná i chcete. 

Z oboru

Pomalu se snažím vracet k původnímu zaměření blogu, což byly články na téma HTML / CSS / PHP / JS. Zatím se daří tak středně. Ajaxové stránkování se dočká jednoho až dvou pokračování, revizi dostala i moje stránkovací knihovna, která s tím přímo souvisí. Podívám se také na stromovou strukturu či jednoduché stylování formulářů. 

Seriály

Další 2 seznamy zajímavých seriálů jsou téměř hotovy, tentokrát sci-fi, mysteriózní, ale i nějaké superhrdinské. O klasickém soupisu podzimních premiér ještě přemýšlím; zrovna tato část mých pravidelných přehledů asi není úplně atraktivní. Ale do Mikroblogu to jde napsat vždycky.

Filmy

Dojmy k jednotlivým filmům se mi stále moc psát nechce, a tak se můžete těšit na klasický seznam vícero snímků pod jedním článkem. Béčka jsem zatím stále nevyčerpal, "těšit" se můžete na filmy katastrofické. A možná mezitím nasbírám další seznam monster... Protože jak jsem se chvástal, že jsem všechno viděl, pomalu se mi začaly scházet další kousky. Dvoji žraloci a jedni dinosauři zatím na vlastní článek nejsou, ale kdo ví, co bude. A možná budou i nějaké ne-béčkové filmy. 

MTG

Decklisty nesmí chybět, jsou tu nachystané 3 články k Magicování v loňském roce. Pioneer tam ale nebude, protože ten jsem kvůli času skrz Leviathan Commander ani pořádně nezkusil. I toho Commandera jsem hrát přestal, ale proč k tomu něco málo nenapsat, když podklady mám. Alespoň z pohledu nováčka na formátu. 

Hudba

Můžete čekat nějaký ten metálek, ať už známý více, či méně. Možná vás nějaké mnou doporučené kapely také zaujmou. Například tato. Ale víc až v připravovaném článku. 

A ještě pár náhodných článků k tématům jiným, ale úplně všechno zase prozrazovat nemusím. A pokud by vás zajímalo, odkaď beru všechny to cool obrázky, jako například výše zobrazený, mrkněte na www.pexels.com. Výběr sice není příliš velký, ale vše je zdarma, a to pro osobní i komerční využití. 

1. Programování

Ve volných chvílích jsem se pustil do programových úprav systému. Architekturu, jak ji mám navrženou, jsem nechal, ale spousta knihoven potřebovala aktualizaci, stejně tak celý frontend (kontrolery, nikoli šablony). Právě úprava knihoven je jedná z věcí, ze které může mít prospěch i čtenář, protože je můžu nasdílet. 

Výstup do šablon také dostal pár nových funkcí, i když změn bylo minimum oproti třídám. Vrátil jsem do komentářů strukturovanou diskusi. Teda ne, že by se tu kecalo od rána do večera, ale minimálně kvůli přehlednosti vlastních reakcí je to fajn. Stránkování článků už je nyní Ajaxem. Tohle zase tak důležité nebylo, ale chtěl jsem si zkusit, kolik mi zabere času taková věcička na vlastním systému. No základní funkcionalita necelou hodinku, další hodinu pak ladění drobností. Nebylo to náročné, a co víc, mám díky tomu podklady na další článek. 

2. Design

Tak jsem koukal, že už je to 5 let, co mám na webu aktuální design. Mně to sice připadne jak včera, ale 5 let je dost, takže byl nejvyšší čas na nějaké změny. Tak jsem se do nich pustil. Komentáře jsem přestyloval úplně, stejně jako sidebar. Takhle nebo taky takhle to vypadalo před tím. Na screenshotu je vidět i změna souvisejících článků, kterou už jsem měl na seznamu poměrně dlouho - prostě aby to vypadalo míň jako reklama. No a hlavička také dostala obrázek.  

3. Články

Nějaké články jsem odeslal do věčných lovišť, do jiných starších jsem přidal informaci, že takhle už se dnes neprogramuje. PHP návody zastarávají, stejně jako vše ostatní, takže to bylo třeba. Ale hlavně - co je nejdůležitější - po třech letech jsem konečně napsal článek z oboru. A další jsou na cestě. Úpravy, kterými blog v poslední době prošel, mě přiměly zase něco málo nastudovat i naprogramovat, takže mám nové podklady, které budu postupně publikovat. Například zmíněné Ajaxové stránkování. 

4. JavaScript

Další oblast změn souvisí jak s kódováním, tak s obsahem. Konečně jsem našel funkci, která správně počítá přesně to, co potřebuji: isInViewport. Co asi dělá, je jasné už z názvu, takže jen doplním, že potřebuje jQuery. Toleranci shora či zespoda tam zatím nemám, ale pro účely jako je loading YouTube videa až během čtení článku je to naprosto dostačující. 

(function($){

	$.fn.isInViewport = function(){
		var elementTop = $(this).offset().top;
		var elementBottom = elementTop + $(this).outerHeight();
		var viewportTop = $(window).scrollTop();
		var viewportBottom = viewportTop + $(window).height();
		return (elementBottom > viewportTop && elementTop < viewportBottom);
	};
	
}(jQuery));

A jak si můžete na ukázce všimnout, zase tu mám syntax highlighter. (Byť zrovna tady není příliš výrazný.) To byl docela porod, protože stará knihovna nefungovala s novou jQuery. A tak jsem googlil. A googlil. A stejně nic nevygooglil. Nejkomplexnější knihovna, kterou jsem našel (google code prettify) se ukázala jako úplně tragická, protože prostě nezvládla zvýraznit kód, jak měla. Třeba zvýrazní první HTML atribut, ale na druhý už se vykašle... Tak jsem hrábl do staré knihovny chili.js, něco promazal, něco přidal, a už to frčí, jak má. Možná se o ni podělím v nějakém budoucím článku. 

5. Cookie lišta

Jak jste si nejspíš všimli, už i tady vás otravuje cookie lišta. Za to se omlouvám, nicméně já si potřebuji ověřit, jestli je pravda, co se říká. Že Google penalizuje (shazuje pozice) webům, které tuhle věc nemají. Ukáže až čas. Za tímto účelem jsem opět trochu hledal, abych si uložil dva články, které o cookie liště aspoň trochu smysluplně hovoří: najdete je na webu podnikatel.cz a samozřejmě na Lupě.

Ve zkratce? Je to úplně jedno, jestli nějakou lištu máte. I já ji nasadil až s velkým zpožděním. Ale v případě, že využíváte vícero služeb od Googlu, raděj si ji tam flákněte. U mě to v případe Analytics a GWTools nevadilo, ale opak zase doporučovat nechci. A pokud byste chtěli nějakou inspiraci, například ČSOB má hezky vyřešenou jak lištu, tak detail stránku. 

Ono je to celé vlastně trochu paradox. K čemu potřebuji cookiny na malém webu? (Zdůrazňuji: malém.) Na analýzu návštěvnosti, na nic jiného. Abych ji mohl provádět, musím mít souhlas s ukládáním cookies. Sešny? No tak oželím ukládání kravin a sešny neřeším až do chvíle, než potřebuji logování uživatelů. A když jsem jednou napsal na diskusi.jakpsatweb, že je to kryptofašistické, okamžitě mi můj příspěvek smazali bez uvedení jakéhokoli důvodu, proč se mýlím. Ale já si za svým názorem stále stojím. Je to kryptofašistické. 

Není nutné každý měsíc předělávat web, ale je potřeba ho udržovat při životě i jinak, než jen novými texty. A proto přidávám další seznam bodů, co se změnilo. Některé nejsou ani tak pro návštěvníka, jako pro mě, jiné zase slouží k pohodlnějšímu brouzdání po stánkách. Co jsem "dnes", udělal pro svůj web, si můžete přečíst v dnešním článku.

1. Přepsání JavaScriptu v administraci

Hned první změny pro koncového návštěvníka určeny nejsou. Aby se mi lépe pracovalo v administraci, chtěl jsem změnit logiku nasazení textového editoru. A když jsem se tak vrtal v kódu, bylo mi trochu smutno i trochu blivno z 10 let starých řešení, které byly na frontendové části administrace použité.

Ve své době to nebylo nijak hrozné, ale dnes? Já tam neměl nasazený žádný JS framework, všechno se psalo od nuly za pomocí nativních metod... Že je administrace řešená "po staru", to mě ani tolik netrápí, ale ty kvanta kódu, které tam byly úplně zbytečné, musely jít pryč. Asi 50kB kódu jsem zredukoval na 10. Ale bylo to hezké okno do minulosti. Řešení stále není supermoderní, ale už něj půjde vycházet do budoucna.

2. Modul redirektů

Druhá velká úprava mi přidala nový modul, který se stará o přesměrování starých URL adres na nové. Některé systémy, jako například Drupal, takovýto modul mají dostupný, tak proč bych ho neměl mít i já. Kdykoli přepíšu URL objektu a nechci přijít o pozici v Googlu, stačí mi zadat novou položku a nemusím lézt do .htaccessu.

O přesměrování jsem chtěl napsat vlastní článek, jenže jsou tu nějaká ale. Je to fakt dávno, co jsem něco pořádně programoval. Až tak dávno, že si nejsem jistý, zdali se můžu podělit o nějaká svá řešení. Tak, abych nepublikoval nějaké zlozvyky či zastaralé postupy. Zatím se tedy o funkci jenom zmíním, samostatný článek možná nachystám někdy v budoucnu.

3. Typografie

A konečně se můžeme podívat na změnu, která je vidět na první pohled. Překopal jsem typografii celého webu, jak rodiny, tak velikosti i řezy písma. Předchozí font totiž obsahoval jednu zásadní chybu: nefungovalo v něm Ť a Ď. Nejdřív jsem si toho vůbec nevšiml, pak jsem to chvíli ignoroval. Ale protože nefunkční písmenka vypadala jako pravopisné chyby, měl jsem změnu typografie na TO DO listu už dlouho.

Hledání nových písem bylo náročné, Google fonty jsem procházel fakt dlouho. Zaujal mě jeden font laděný do čínského stylu, jenže ono to zase neumělo latin-2. Chvíli jsem dokonce uvažoval, že ho i přesto použiju, ale to by zase bylo z bláta do louže... Ono je to těžké, když hledáte patkové písmo, co vypadá jako bezpatkové.

A tak jsem hledal dál, než jsem našel font Marcellus, který byl vyhovující a ještě i podobný tomu prvnímu. Marcella uvidíte v nadpisech. Pro zbylé texty jsem pak vybral font Mukta, který patří do rodiny "vypadám jako Roboto", což je poměrně populární font. A jako třetí písmo na zdůraznění h2 a h3 nadpisů uvnitř článku jsem nasadil Catamaran, který se od Mukty příliš neliší, ale ve větším provedení vypadá líp. A na závěr jsem si předělal logo i faviconu, aby vše sedělo Marcellem v hlavních nadpisech.

4. Další zjednodušení elementů na stránce

Možná jste si všimli, možná jste si nevšimli, že v poslední době mi občas skákaly do URL roztodivné hashe. Tyto hashe sloužily jako vlastní analytický modul, který jednoduše počítal prokliky na stránce. Já vím, existují stokrát lepší nástroje, jenže já to chtěl co nejjednodušší a hlavně viditelné z vlastní administrace. PHP třída má 3 kilobajty, takže je to fakt úplně simple.

Svůj účel modul splnil, díky němu vím, na které prvky lidé vůbec neklikají. A tak jsem se mohl pustit do jejich úklidu. Zařval carousel v pravém sloupci, z upoutávky na Mikroblog se stal jediný box s posledním článkem. Archívy jsem nakonec ponechal, protože do těch často chodím sám - abych viděl, co v jakém měsíci přibylo. A hlavně je to takový blogový standard, mít někde dostupné archívy dle data.

5. Fulltextové vyhledávání

Malou změnou prošel i algoritmus vyhledávání, kde mám jako sekundární klíč právě datum. Například když hledám CSS hacky, jako první chci vidět právě ten poslední článek, protože ty předchozí už nemusí být aktuální. (Primárním klíčem budiž stále výskyt fráze v nadpisu, anotaci a textu, tam se nic neměnilo.) I když věřím, že i to už bude trochu zastaralý způsob, ale studiu fulltextového vyhledávání se zatím nemám potřebu věnovat.

Relevance podle data je věc, která mi hrozně chybí na Googlu. Chci použít například Facebook API a hledám, jak z FB vytáhnout potřebná data. Zajímá mě 4 roky starý článek, nebo ten z letoška?

6. Další drobnosti pro mě i návštěvníka

Za zmínku stojí ještě poslední dvě maličkosti. Podobných úprav bylo nesčetně, ale není potřeba sem vypisovat každou jednu. Konečně jsem rozdělil kategorii filmů a seriálů na dvě podkategorie. S tím souvisela i malá revize štítků, které mi slouží jako taková sekundární kategorizace. Když už mám několik dílů stejného článku, tak ať je dohledatelný pod jedním tagem. Druhá úprava je opět drobné počítání návštěv, a to přečtení článku už do konce. Klasické hity, tedy návštěva URL adresy příliš relevantní nejsou, takže započítávám plus 1 až při zascrollování na určitou úroveň textu. Trocha počítání se s výškou okna, scrollTop a je hotovo.

1. Mapa stránek

Sitemapa je stále důležitou součástí každého webu, mnohdy ale podle toho nevypadá. Když jsem koukal, kde bych se mohl inspirovat, moc jsem toho nenašel... Bohužel, spousta webů tuhle sekci dost fláká. Dlouho jsem měl v hlavě takovou myšlenku, jak mapu stránek realizovat: ne jenom jako tupý seznam kategorií následovaný tupým seznamem článků, ale jako něco, co může skutečně být nápomocné.

A vy se nyní můžete inspirovat ode mě. Celá sitemapa je tvořena seznamem kategorií, pod každou z nich jsou hned vypsané články, které do ní patří. S datem v závorce kvůli aktuálnosti a také kvůli rozlišení, co je kategorie a co článek. Celý seznam je samozřejmě rozkopírovaný na 404 chybovku.

Dále jsem hledal informace k výpisu tagů v sitemapě. Pročetl jsem několik diskusních vláken a všechna se shodla na jednom: tagy / štítky do sitemapy nepatří.

Mapa stránek

2. Hamburger menu

Změna menu je v dnešním seznamu ovšem důležitější, protože vám nyní mohu představit chytrou knihovnu, která vyřeší pěkné animace za vás. Já si také jednu vybral, vykuchal a vložil do vlastního kódu. A musím říct, že se to poměrně snadno edituje. Barvy máte hned, změna rozměru byla sice malinko složitější, ale pořád rozumně zvládnutelná. Tuto animaci se mi úspěšně povedlo nasadit i na web stylovaný bez jediné absolutní jednotky, tudíž s knihovnou se opravdu příjemně pracuje.

CSS animated hamburger menu

3. Referer modul

A nyní k backendu. V rámci jednoduchých statistik ve vlastním systému si ukládám přístupy. Dlouhodobý problém byl v tom, že modul ukládal i requesty robotů: jak těch hodných, tak těch zlých. Existuje totiž spousta spambotů, kteří vlastně nic moc nedělají, jen ukládají referera do podobných statistik, jako byla ta moje. A samozřejmě kýbl robotů, kteří hledají bezpečnostní chyby.

Blacklist není řešení, protože nikdy nepokryje všechno. A jak jednoduše zjistit, jestli se jedná o robota nebo ne? JavaScriptem přeci. Nejsnazší řešení je proto ukládat statistiky Ajaxem, až po načtení celé stránky. Sice se to občas nestihne uložit, ale pořád lepší než si zapatlat tabulku bordelem.. A furt ji promazávat. Řešení to sice není nejlepší, ale v poměru cena / výkon je velice dobré.

4. Skrytí URL administrace

Další update, který jsem měl mít hotový už dávno, bylo skrytí URL administrace. Tedy schovat ji pořádně. Také jste si někdy všimli, že máte ve statistikách divné URL ze známých webů? Ano, někdo klikl na váš odkaz z administrace. Vy pak vidíte adresu přihlašovacího formuláře, který by sice měl být bezchybně zabezpečený... Ale chápete, že ano.

Stačí si do rootu webu nahrát skript, který provede přesměrování pod parametrem. Nic víc. Spousta systémů tohle řeší i na frontendu, ovšem v backendu by tahle funkce měla být bez dalších otázek. A já konečně tento drobný nedostatek napravil.

Žádná věda.

if (!empty($_GET['url'])) {
	$redirect_url = (string)$_GET['url'];
	$redirect_url = str_replace('&','&',$redirect_url); // pro jistotu
	if (strpos($redirect_url,'http') === 0) {
		header('Location: '.$redirect_url);
		echo '<meta http-equiv="refresh" content="1;url='.$redirect_url.'" />';
	}
}

5. Bannery vpravo a malý update designu

Drobnou změnu designu odnesly hlavně bannery v pravém sloupci. Měření ukázalo, že návštěvníci automaticky ignorují cokoli, co jen vzdáleně připomíná reklamu. I když jde jenom o interní odkazy. V tuto chvíli jsem si dopsal měření prokliků sharovacích tlačítek - seriózně, používá to někdo? Já sám to nepoužívám. Proč to ale každý web automaticky cpe úplně všude? Proč jdu s davem? :-)

V rámci aktualizace designu jsem akorát změnil písmo a celkově si srovnal typografii. Těžko říct, jestli je lepší nebo horší, ale je jiná. A to byl účel.

6. Google HTML suggestions

Nástroj "Vylepšení kódu HTML" v rámci Google Webmaster Tools je chytrá utilitka, která vám poradí s obsahem stránek. Řeší meta description či chybějící titulky. I já díky tomu pár nedostatků odhalil. Tak se nezapomeňte po dlouhé době zase podívat do Google Webmaster Tools.

Google HTML suggestions

V jednom z letošních článků jsem vám představil PHP třídu na detekci zařízení. K té se na chvíli vrátím, abych vám mohl popsat některé konkrétní příklady, které využijete v každodenním životě. Drobné ladění kódu také proběhlo, převážně pro telefon a tablet. I když jsem posledních pár měsíců nové články nepřidával, o stránky jsem se snažil starat alespoň minimálně.

1. PHP třída na detekci zařízení: praxe

Pokud jste již v oboru zkušení, jistě vás napadne spousta příkladů. Já bych ale rád pohovořil o drobných úpravách, které jsou aplikovatelné i pro tak triviální web, jako je ten můj. Začneme obrázky. Co jsem nahradil maličké náhledy za obrázky na 100% šířky, byla potřeba řešit i rychlost jejich načítání. Na telefonu je chci ponechat, protože jsou pěkné, ale stejně tak chci dosáhnout nějaké rozumné rychlosti zobrazení. A tak podle zařízení vygeneruji jinou velikost miniatury, což pro normální počítač se zúženým oknem prohlížeče řešit nemusím.

Druhým bodem byla celková délka obsahu. Homepage i kategorie jsou při počtu deseti záznamů na stránku zbytečné dlouhé, takže na telefonu můžu stránkovat po nižším počtu. Tím se samozřejmě celé renderování stránky nepatrně zrychlí. A čím složitější databázová struktura, tím víc ušetřených milisekund. Nabízí se samozřejmě otázka, jestli by nebylo vhodné změnit celou logiku a přidat dopisování bloků ajaxem. Toto řešení ale nechci úmyslně - nejsem Facebook.

Třetí stěžejní bod jsou JavaScriptové události. Například YouTube videa, o kterých jsem také napsal několik článků, mohu nahrazovat za náhledový obrázek pouze na dotykových zařízeních, nikoli na klasickém počítači. Tohle ale není ten případ :-) Stačí se ale podívat na fixní menu při scrollu: něco takového na tabletu či telefonu v žádném případě nechci. Identifikátor zařízení mám vytištěný přímo na body, a tak mohu v JavaScriptu snadno zjistit, jaký typ přístroje návštěvník zrovna používá.

Vidíte, není to nic složitého. Stačí pár jednoduchých úprav a web je hned mnohem přístupnější.

2. Stylové úpravy

Tady pořád nějak zápasím s tou animací menu. Už ji měním asi po třetí a stále si nejsem jistý, jak se mi to líbí nejvíc. Stejně tak se změnila animace úvodních obrázků. Poslední trendy doporučují zvýrazňovat aktivní prvky, v případě obrázků nějakým tím zoomem. Často se využívá efekt zvětšení, který ale ze zkušenosti nedoporučuji. Dochází k deformaci a drobnému kousání například ve Firefoxu. Pokud ale využijeme efekt opačný, drobně máznutý obrázek se doostří a výsledný efekt je mnohem sympatičtější.

Důležité hlavně je, aby se web líbil vám samotným. Rozhodně nedoporučuji stránky zahltit efekty, jen aby tam "něco" bylo.

3. Úprava antispamu

Spamy na vlastním webu jsou trochu ostuda, zvlášť když jsem na dané téma psal tutoriál. Bohužel, v poslední době jich bohužel pár bylo. No žádná tragédie, dohromady to bylo asi 10 spamů za necelý měsíc. Jenže na mé poměry je to víc, než jsem ochotný akceptovat.

Nedávno jsem totiž částečně odstranil jednu úroveň antispamu. To pole s kontrolní otázkou sice stále fyzicky existuje, ale se zpožděním se samo vyplní a skryje, aby měli čtenáři větší pohodlí při psaní komentářů. Na roboty by to mělo stačit, ale na lidský spam už tolik ne. A já mám podezření, že tohle opravdu píšou reální lidé. V tuto chvíli jsem akorát přidal pár dalších kontrol, které nejsou okem pozorovatelné. A jestli se mé obavy naplní, kontrolní otázku vrátím a jen mě to utvrdí v dávno zjištěném poznatku.

Nejlepší antispam je samotná čeština.

4. Modul poznámky

Pro koncové čtenáře nic, s čím by přišli do styku. Pro správce stránek ovšem nutná utilita. Dostanete nápad, co upravit, ale zrovna není čas. Přistane k vám odkaz na článek, který chcete nastudovat, ale zrovna musíte odejít. A tak lepší, než si tyto nápady psát na papír, posílat mailem, či zakládat hromady nepublikovaných článků, je vytvořit si jednoduchý modul. Nějaké místo, kam si můžete v klidu značit své myšlenky.

5. Návod na optimalizaci přímo od Googlu

Nástroj PageSpeed Insights od Googlu jsem ještě donedávna neznal. Odkaz se ke mně dostal od jednoho z těch klientů, co se snaží vypadat strašně zasvěceně: vyžadují nesmyslné optimalizace, i když vůbec nechápou souvislosti, proč jsou některé věci řešeny tak či onak.

Tím jsem dostal prostor ke zběžnému studiu a získání nových zkušeností, čemuž jsem se mohl nadále věnovat i ve volném čase. Tentokrát musím říct, že jsem klientovi trochu křivdil; výjimečně to dávalo smysl. Vlastní rozbor nástroje by vydal na několik článků, takže bych to dnes odbyl pouhým odkazem. Primárně se jedná o soubor rad, jak stránky zrychlit na telefonu, jak návštěvníkům zpříjemnit zážitek z vlastních stránek.

Google PageSpeed Insights

Jenom by mě zajímalo, jak mám nastavit platnost cache pro soubory, které nejsou na mém serveru... Googlu očividně vadí, že má špatné hodnoty u vlastních souborů :-)

6. Nová témata článků

Ještě před odmlkou jsem si poznamenal několik myšlenek, které bych rád rozvedl. Rubriku k tomu určenou jsem nazval "Střípky z internetů". Podklady pro druhý díl jsem nasbíral, ale článek už nedokončil. A tak se zkusím polepšit a všechny resty dohnat. Že dojde na starší informace, asi nevadí, stejně ta témata dřív nebo později někdo zase otevře.