Recenze jQuery bez předchozích znalostí. I vy můžete efektně vyhodit peníze z okna!

Nedávno jsem se rozhodl od píky začít studovat JS knihovnu jQuery, kterou jsem zatím jen sporadicky používal. Koupil jsem si proto v dobré víře knihu jQuery bez předchozích znalostí.

Kdo však mohl tušit, že kniha není určena pro čtenáře bez předchozích znalostí, ale je bez předchozích znalostí napsána?

13.3.2012
Zajímavé události se staly pár dní po vydání mého dosti kritického článku. Přestože s mým blogem za celou dobu jeho existence neměl nikdo problém, náhle se mě pokusil někdo cracknout (většina z vás zná pod termínem hacknout). Web je postarší a tak měl menší skulinku, kterou jsem během chvilky odstranil a kvantum spamu během pár sekund vymazal...po pečlivé záloze.

Nyní ale ta "vtipná" věc. Útok pocházel ze Slovensa, z Bratislavy. Autor Marián Margorín mnou kritizované knihy pochází překvapivě ... ze Slovenska a dle zadní strany knihy pracuje překvapivě ... v Bratislavě. Pokud přihlédnu k faktu, že většina z toho malého množství čtenářů, je česká a programově neznalá, svést tento sled událostí na náhodu, by bylo hodně odvážné.
Na nikoho jsem však nechtěl ukazovat prstem, tak jsem redakci CPress poprosil o kontakt na autora, abych mu mohl sdělit, že takové dětinské chování nemám rád a pokud mi chce něco říct, ať to udělá mailem, telefonem nebo se semnou klidně sejde, namísto urputné snahy dokázat, kdo dočůrá dál.
CPress mi však jen sdělil, že mu předají mou adresu a že se mi ozve, pokud bude chtít.

Suma sumárum, dva týdny čekání uběhly, nikdo se neozval, což mě po předchozích zkušenostech nepřekvapilo.
Kdo ví, možná to vše byla jedna neuvěřitelná náhoda. A nebo jste si pravděpodobně obrázek již udělali sami, jak se dnes lidé mohou stavět ke kritice.

Již řadu let se živím tvorbou webových stránek. Tento obor se vyznačuje dvěmi zásadními věcmi.

• Jak si bohužel myslí řada zákazníků, opravdu nejde jen o jednoduché HTML, které se naučíte během dne a řada studentů se tak pyšní tím, že umí dělat webové stránky.
• Je to jedno z nejdynamičtějších pracovních odvětví. Musíte se neustále (tím myslím doslova - neustále, každý den) učit nové věci, technologie, postupy, zůstávat v obraze atd., pokud nechcete být na druhé koleji.

Tyto dvě věci znamenají, že se stále něco učíte a v pracovně, doma či v zaměstnání se vám válí tuny knížek, které každým rokem přibývají. (nemluvě o seminářích, kurzech, řešení na internetových diskusích atd.)

Na jednu stranu je člověk rád, že jeho práce není stereotypní, na druhou při takovém tlaku vyžaduje profesionální přístup od služeb a věcí, které si platí k efektivní výuce.
Dnes nebudu psát o kurzech ani o internetových diskuzích, ale o knihách/knize. Za tu dobu jsem jich přečetl řadu a byly o lecčems. V drtivé většině příkladů byly opravdu dobře napsané a člověka učí konzistentněji než nahodilé tutoriály na internetu, nehledě na obecně příjemnější práci s fyzickou knihou. Ani větší zkušenost autorů v podávání informací a odfiltrování chyb editory není k zahození.
Občas se ale najde kousek, nad kterým člověku zůstává rozum stát.

Jak sami podle nadpisu můžete hádat, kniha jQuery bez předchozích znalostí je přesně takovým příkladem. Můžete také získat dojem, že je kniha pro všechny, kdo nemají s jQuery znalosti. Spíše bych to ale upravil na něco jako

„Napsal jsem knihu o jQuery bez předchozích znalostí"

Tak špatné to opravdu je.

No jo, kritizovat umí každý. Mnohdy jde jen o špatné rozpoložení čtenáře nebo dokonce jeho nepochopení. Obojí může být klidně i můj případ. Jenže já se místo kafrání u piva rozhodl pro konstruktivní kritiku a po určité době jsem si začal zapisovat veškeré věci, co mě na knize iritovaly do takové míry, že jsem knihu shledal ne nepřinášející nic dobrého, ale rovnou škodlivou, protože vás učí špatné věci špatným způsobem a je plno polopravd a lží. Stalo se tak něco, co jsem s knihou ještě nikdy neudělal. Byl jsem nucen ji v třetině přestat číst, protože kniha místo sebehoršího přínosu vás pouze degraduje a zdržuje od efektivního vzdělávání.

Proč tomu tak je, se můžete dočíst v článku. Berte prosím na vědomí, že vše je popisováno z pohledu naprostého začátečníka v jazyce jQuery. Jsem tedy cílová skupina knihy a od toho se odvíjí i moje námitky. Na druhé straně by mě zajímalo, kdyby se na knihu podíval opravdový profesionál - zřejmě by se děly horší věci.

Fyzické zpracování

Hned z kraje, než se dostanete k samotnému obsahu, vás trkne do očí její forma. Knihu musel tisknout někdo bez jakýchkoliv zkušeností. Každou vnější část knihy totiž "zdobí" název kapitoly a velká nevyužitá mezera. Od kraje stránky je tedy značný kus, než začne text. Přitom pro napsání kapitoly dolů nebo nahoru je tu bohatě místa. Řeknete si „tak co, aspoň je to vzdušnější". Souhlasil bych. Jenže ona velká mezera na vnějším okraji asi musela být kompenzována a tak pěkně zkrátili mezeru od vnitřního okraje. Mnozí už asi tuší. Zatímco u vnějšího okraje můžete být vzdáleni i půl milimetru a můžete číst text, který je stále skvěle čitelný (maximálně to nebude tak úhledné), tak u vnitřního okraje, kde je záhyb knížky, potřebujete cca 2-3 cm a více dle tloušťky knihy a dle toho, jak se jednotlivé stránky ohýbají otáčením.

Já si prostě nedokáži vysvětlit, jak CPress mohl vytisknout knihu, kde si div nevykroutíte oči koukáním do škvíry v záhybu knížky a nezlámete prsty mačkáním ve snaze záhyb vyrovnat. Stejně skončíte tím, že musíte knížku různě natáčet, abyste viděli, co je v záhybu. Zapomeňte na to, že si knížku položíte na stůl a budete z ní něco číst a zároveň testovat a připravte se na neustálé natáčení, držení, otvírání...

Každá kniha by měla mít vnitřní okraj větší jak vnější, nebo klidně stejně, ale vnitřní alespoň tak velký, aby se to dalo číst. jQuery bez předchozích znalostí ale ne. Tam je paradoxně vnitřní okraj malinký a aby vás naštvali, tak vnější udělají zbytečně velký. Přesvědčit se můžete vyfocenými obrázky. Z bílého prstu můžete vidět, jak se snažím co nejvíce tlačit knihu od sebe, ale stejně to nemá valný smysl. I z úhlu 180 stupňů text zajíždí až kamsi do temna. Všimnout si můžete i hezké vlastnosti, kdy se autor nezdráhá skoro přes polovinu stránky vytisknout prázdnotou zející okno prohlížeče.

Obecné neřesti knihy

Pokud se přesuneme k samotnému obsahu, z knihy hodně cítím, jak autor nesystematicky vysvětluje různé variace toho samého, které čtenáři nepřinášejí žádnou informační hodnotu, ale opravdu podstatné věci nutné pro pochopení se prostě mnohdy nedozvíme.

Než začnu popisovat konkrétní obsahové krpy této knihy, je potřeba zdůraznit, že obecně celým textem prostupuje ještě jeden nešvar, když autor popisuje nějakou problematiku.

Řekněme, že daná problematika má 10 rovnocenných témat a pro její osvětlení čtenáři by měli být všechny minimálně jmenovány a některé třeba i popsány. Autor ale často vytrhne jen jednu a řekne

„problematika má takový závěr, protože tady toto mnou vytrhlé téma říká toto a toto".

Čtenář nemá možnost se ani dozvědět o tom, že jsou nějaké další aspekty pro rozhodování, natož že takový závěr probírané problematiky je mnohdy scestný nebo nesprávný, přinejlepším správný jen pro určitý okruh lidí.

Pokud se v oboru člověk alespoň trošku pohybuje, hned toto prokoukne a knihu to strašným způsobem sráží a zabíjí jakýkoli pokus o snahy knihy dávat čtenáři nějaký nadhled do dané problematiky. Pokaždé, když něco čtete, říkáte si „a opravdu je toto jediná možnost? Nezapomněl mi autor něco říct? Neměl bych si něco dohledat na internetu?" A to se zde nebavím o tom, že nějaký zápis jde zapsat jiným způsobem, ale o zásadních milnících ve výuce jazyka. Toto jsou věci, proč si knihy kupujeme - aby nám daly ucelený pohled na věc. Pokud toto kniha okatě nedělá a naopak zatajuje, je už v tuto chvíli značně handicapovaná.

Jako příklad na straně 38 je seznam vlastností, proč používat CDN uložiště (google, web vývojářů,...) pro naši knihovnu. Toto je typický příklad, proč je kniha v tomto ohledu špatná. Vše, co totiž píše, je neúplná pravda nebo dokonce nepravda. Níže je seznam bodů, které autor uvádí, a moje reakce.

Používáním zdroje CDN nezatěžujeme náš hosting a tím samozřejmě zvyšujeme náš výkon.

Bavit se tu o výkonu je docela zavádějící, protože knihovna se načte jen jednou a poté se dlouho bere z cache. Oproti opravdové optimalizaci výkonu aplikace (aplikační jazyk + databáze + samotný návrh) je rozdíl mezi umístěním knihovny k nám nebo na CDN zanedbatelný. Ono obecně tvrdit, že ulehčíme výkonu, je docela scestné, protože ulehčujeme spíše trafficu. Samotný upload knihovny klientovy není pro server nic výkonově náorčného, narozdíl od jiných věcí, které se na serveru dějí. Tento argument má pro mě asi stejnou váhu jako tvrdit, že používat <br> místo <br />je lepší, protože obsahuje méně znaků, nezatěžujeme tím hosting a tím samozřejmě zvyšujeme náš výkon :).

Při použití zdroje CDN získáme soubory rychleji, než z vlastního hostingu, což neodmyslitelně zrychluje naši aplikaci

Líbí se mi jak skálopevné výrazy jako „samozřejmě" a „neodmyslitelně" autor používá ve větách, které jsou pravým opakem. Pokud pominu, že to de facto říká velice podobně to, co bod jedna, tak tady už musím konkrétně nesouhlasit - tvrzení, že CDN je rychlejší než náš hosting, je lživé! Samozřejmě to platit může, ale stejně tak to platit nemusí. Nehledě na další aspekty jako možná nedostupnost CDN atd.

Je pravděpodobnější, že soubor knihovny jQuery je už uložený v mezipaměti webového prohlížeče

Ano, to je bez výhrady pravda. Jak tuto větu má ale pochopit člověk, co neví, o co jde? Při přečtení tohoto bodu musí být začátečník uplně zmaten a říkat si "a kde by se to tam jako vzalo?". Proč tam není napsaná jednoduchá věta o tom, že když přijdeme na jiný web, který už načítá danou knihovnu, tak ta se nám nacachuje a použije i na jiném webu, který používá stejnou url pro knihovnu? Toto jsou prostě věci, které dělí knihy na dobré a špatné. Autor se nedokáže vžít do situace začátečníka.

K dispozici máme vždy aktuální verzi knihovny jQuery

Toto je prostá lež. Pravdou je, že MŮŽEME mít vždy aktuální verzi, pokud dáme odkaz na soubor, který vždy obsahuje aktuální verzi. To vím já, to ví zřejmě i autor, ale jelikož v knize stejně využívá odkaz na pevné číslo verze, které se neaktualizuje, tak čtenář to nemá šanci vědět a bude si snad dokonce myslet, že verze knihovny 1.6.1 mu bude automaticky aktualizována, nebo si bude klepat na čelo, jak je to možné.
A to ani nemluvím o problematice, že je lepší naopak využívat pevně danou verzi knihovny, na které web otestujeme. O tom autor samozřejmě také nemluví.

Tímhle stylem je ale bohužel napsaná celá kniha. Narážíte tu na polopravdy a nepravdy a váš obrázek o dané problematice je čím dál více zkreslenější.

Mám pro to dvě vysvětlení vysvětlení

• Autor problematice opravdu nerozumí, nebo rozhodně není odborník na slovo vzatý, což je věc, kterou automaticky očekávám, když platím za odbornou publikaci.
• Kniha byla napsána velice rychle, aby dokázala nasytit trh, a tím vznikly takové hlouposti

Nedivil bych se ani kombinaci obojího. Tak jako tak jde vidět, že nefungovala žádná korekce, ať už měla probíhat na kterémkoliv místě procesu vydání knihy.

Konkrétní kritika

Následující obsah budu označovat čísly, které znamenají stranu, na které se nacházejí. Pokud to bude vhodné, doplním i vzorový kousek kódu z knihy. Na začátek ale ještě zmíním 3 věci, které se vyskytují napříč celou knihou.

• Autor zadává cestu ke knihovně v realtivním tvaru "js/jquery.js", která je pro drtivou většinu dnešních webů s „hezkými URL adresami" nepoužitelný.
• Autor vás nutí používat u každého skriptu zjišťování načtení DOM modelu pomocí $(document).ready(function(){}). Buď opravdu neví, že toto není jediná (a určitě ne nejlepší) možnost, nebo záměrně vynechává velice důležitou část, jak psát skripty a de facto tak nutí uživatele psát dokola něco, co není třeba. Na straně 52 vám doslova říká, že to dělat MUSÍTE! Jak to, že já, jako začátečník, toho mohu vědět více? Například kniha jQuery - kuchařka programátora, toto probírá hned na svém začátku velice hezky, takže člověk ví co a proč. A rozhodně nemůže autor použít argument, že nechce zabíhat do detailů. Do detailů nezabíhá výše zmíněná kuchařka, protože třeba nemluví o dynamickém načítání kódů například pomocí knihovny head.js. Nevysvětlení tak důležité základní věci už od základu dělá špatného "programátora" nebo spíš "kodéra".
• Autor v knize stále střídá uvozovky " a apostrofy '. Znovu tak vyvstává otázka - je autor opravdu profesionál se zásadami? Existovala nějaká korekce?
• Pokud vás napadne se utěšovat, že chyby jsou mnohdy relativně řídké na počty stran, vemte v úvahu následujicí
  • měli by tam vůbec nějaké být?
  • nepsal jsem vše co jsem našel
  • zkušenější by toho našel mnohem více
  • ty mezistrany jsou vyplněny řádnou vatou - kniha nese až překvapivě málo "informací na stránku"

12 - Předhazování Notepad ++ jako jediného možného editoru. Žádná zmínka o tom, že existuje i něco dalšího, jen upozornění, že toto opravdu budeme potřebovat. Nebudeme. Dnes má člověk výběr opravdu velký.

21-22 - Cílem bylo ukázat, že určitý způsob napsání animace v javascriptu je složitější než stejná funkčnost v jQuery. Jasné. Poté následuje informace, že funkčnost animace je úplně stejná. Ok, rozumím, věřím. A co udělá autor? 

• Pokouší se naivně nakreslit animaci jako statický obrázek :)
• Ten obrázek do knížky vytiskne 2x!, aby vám, hloupým čtenářům, opravdu dokázal, že ty příklady JSOU PROSTĚ STEJNÉ :)

Hned, jak se člověk přestane smát, už mu v hlavě vzniká škodolibý nápad, jak udělat jednoduchou animaci, která „při vytisknutí" bude vypadat úplně stejně, ale chovat se bude úplně jinak...

25 - Máme možnost vidět názornou ukázku toho, co jQuery dokáže a jak hezky dokáže rozanimovat robota. Jenže v knize je samozřejmě jen statický obrázek a pokud chcete vidět živý náhled? Začnete vymýšlet fráze, které dáte do Googlu, protože kniha vám žádný odkaz nedá.

33-34 - Autor chce ukázat srovnání s jinými knihovnami, ale jen u jedné ukáže ukázku kódu a porovná, jen u další vypíše seznam toho, co umí (který sám osobně je dosti tristní), a vy tak tedy zase máte před očima jen hromádku nekonzistentních poloinformací, které se nedají ani označit za „ukázku" natož porovnání, které se budete must najít na internetu.

46 - Stejně jako na této, tak i na mnoho dalších stranách uvidíte screenshot prohlížeče. Neptejte se, proč třetinu strany zabírá bílé místo. Ani já to nevím. Možná kvůli šetření našich lesů.

49 - ale i další strany (zvykněte si, že autor často skáče sem a tam) vysvětlují základní (dle něj) funkci $(document).ready(function(){}). Začátečník jako já se vždy zajímal, proč je ve fci ready() znovu napsáno function(){nějaký kód}. Pokud si myslíte, že dokáže autor vysvětlit tak kratinký a dle něj základní kus kódu, máte bohužel smůlu. Přestože zápis s anonymní funkcí se vyskytuje téměř v každém kódu, vy se nikdy nedozvíte, proč tomu tak je. A tak na místech, kde vás jiné knihy naučí jazyk chápat, rozumět a využívat ho, tady si připadáte jak opisovač kódu. Hloupá opice.

50 - Na této ale i řadě dalších stran jsou obrázky... importované z roku 1976. Mně to sice nevadí, ale přijde mi extrémně úsměvné, že v 21. století může někdo do knihy vytisknout neuvěřitelně rozpixelované obrázky, které měly původní rozlišení asi 10x5 px :)

52-53 - Autor jednou hovoří o funkci "prepend()" a podruhé o funkci "preprend()". Co je správně, si musíte zjistit sami.

62 - $('tr:even') prý vybere všechny sudé řádky a $('tr:odd') všechny liché. TO JE LEŽ. Přestože anglické názvy k tomu evokují, jQuery počítá počet od nuly, kdežto jiné metody využívající CSS počítají od jedné.  Ve výsledku pak tedy tr:even zobrazuje liché řádky. To je problematika, kterou autor vůbec nerozebírá, pouze píše o tom, že se :eq počítá od nuly a člověk, který se toto učí, se učí úplné bludy a navíc nezná řešení, pokud nekoukne do anglické dokumentace....což asi nechce, proto si koupil tuto českou knihu. Na tento problém jsem přišel, když autor na další straně používá příklad nth:child, který samozřejmě vysvětluje úplně nešťastně, takže člověk vlastně neví, jak to má fungovat. Vůbec se nedozví, že tam může dát čísla nebo dokonce výraz jako 3n nebo 3n+1, které jsou vysoce užitečné. Ale mě hlavně napadlo, proč najednou ukazuje, jak vybrat sudé řádky, když to o stránku dříve dělal jinak? Nebo proč to alespoň nějak nekomentuje? Čili znovu věci, co v kvalitní knize najdete. A to mě dovedlo k hledání o tom, jak vlastně :even a :odd funguje a jaký je rozdíl mezi nth:child() s různými parametry.

OPRAVDU JÁ ZAČÁTEČNÍK MÁM V TOMTO OHLEDU VĚDĚT VÍCE JAK AUTOR???

Jako perličku na stejné straně - autor pomocí tr:gt(2) vybírá všechny řádky s indexem větším jak 2, které poté zneviditelní. Jednoduché jak facka, už když se podíváte na ten jeden řádek kódu v knize. Jak to ale okomentuje autor? Podle autora vyberete první tří řádky (index 0,1,2) a následující zbytek zneviditelníte. Toto přece každého neznalého musí zmást. Začne se ptát - a kde je ten kousek kódu, co vybírá první tři? ŽÁDNÝ TAM NENÍ! A kde je ten kousek kódu, který pozná ten "zbytek", který pak zneviditelní. ŽÁDNÝ TAM NENÍ! Nebojte se, není vaše chyba, že ho tam nevidíte. Autor prostě popisuje něco jiného, než ve skutečnosti napsal v kódu.

64 - Další ukázka, kdy autor nedává do souvislosti věci, které člověka napadnou. Značně nesystematicky tam ukazuje různé vlastní selektory knihovny. Například input:checkbox. Řeknete si super. Ale toto přeci můžu udělat pomocí input[type=checkbox]. Co mám tedy použít? Je to jen jiná forma zápisu a funkčnost se neliší? Nebo jedno má jinou implementaci a mám raději používat jedno? Pokud ano, které? To se prostě nedovíte. Takovou základní věc, která by člověku udělala jasno, se nedozvíte. Dle pana Margorína holt pište, jak vám diktuje, a na nic se neptejte.
V posledním příkladu má ukázku $('div:not(f)') s popiskem "vybere všechny elementy div, které neodpovídají selektoru f". Možná jsem jen hloupý. Možná je to jen nějaký zástupný znak, jako v matematice písmeno „x". Možná se to tak běžně používá? Já to nevím, autor mi to neřekl. Možná „f" je přímo součást jQuery a něco dělá. Možná jsem naivně doufal, že mě to ta kniha naučí. Proč tam nepoužil rovnou nějaký příklad, jako všude jinde v knize? Proč to tady zrovna dělá jinak? Co je to ten selektor "f", to se bohužel nikdy nedozvíte. Určitě ne z dané knihy. Proč autor používá věci, které nevysvětlil a pokud je použije, proč neřekne, že se k nim třeba dostaneme později? Co si má člověk myslet?

66 - Autor ukazuje jednoduchý příklad, jak načíst hodnotu z inputu. Použije pro to kód

var test = $('input:text').val()

Udělat v tak malém kódu 2 obrovské nedomyšlenosti, to snad musí být úmysl. Tak zaprvé - autor použil čistý javascript, přestože byl čtenář na začátku knihy ujišťován, že ho nebude potřebovat. Kdo někdy viděl javascript ví, že je to jen klasické přidání obsahu do proměnné, ale autor TO NEŘEKNE, takže začátečník si může myslet že je to přímo implementace jQuery nebo v horším případě nebude vědět, co to dělá, protože ho mást slovo "var".

Za druhé - autor jako selektor použil input:text. Co když ale inputů bude více? Jak se tedy zachová val()? Nebude to fungovat? Automaticky se z proměnné stane pole? Nebo se vezme jen poslední či první? Tyto otázky mě běželi hlavou. Ne že vám to autor neřekne, ho ani nenapadne, že něco takového může nastat :( Smutné. Vy se tak jen utvrzujete v tom, jak děravé informace vstřebáváte. Pokud by mi někdo chtěl oponovat, že to je prostě jen příklad, který nemá vystihovat realitu - jen chvíli počkejte, uvidíte :)

68 - Autor zapomněl, že píše knihu o jQuery a zanáší na celou stránku naprosto zbytečný miniseriálek o CSS. Že bych člověka s jeho úrovní CSS nikdy nezaměstnal, o tom se dovíte později.

69 - na této straně mě začíná pomalu iritovat, jak autor u každého bodu opakuje, jak je všechno snadné. Je to úsměvné, když si představíte, že na každé druhé stránce musíte něco dohledávat, protože to autor píše špatně nebo nedostatečně. Asi máme rozdílné hodnoty o tom, co je a není snadné. Ano, jQuery je poměrně snadné, ale s touto knihou se stává 3x těžší.

71-72 - jedna z dalších lživých informací, která vás prostě špatně učí. Autor v předchozí ukázce ukazoval nepoužitelnou pasivní kontrolu inputu, zda v něm něco není. Stane se tak jen po načtení dokumentu a ne při změně, což je celkem na nic. Naštěstí na to autor upozorňuje.

Dále čtenáře učí špatným návykům, když vybírá elementy podle ID (tedy jeden jediný na stránce) a místo krásně jednoduchého $("#nejakeid") používá $("input:text #nejakeid"). Musíte tak psát zbytečný kus kódu, což nemá jediný rozumný důvod, protože pokud nějaký HTML prvek označíme jedinečným ID, musí být na stránce pouze jednou. To jakkoliv vylučuje potřebu v jQuery konkretizovat selektování prvku pomocí input:text. Kdo ví, možná autor píše HTML tak, že má na stránce více prvků se stejným ID a tak potřebuje takové berličky. Hlavně, že je vše tak jednoduché, že? :)

Fatální chyba je ale až na straně 72, kde autor nabízí alternativu, jak nemusíme kontrolovat všechny prvky po jednom, ale hromadně. Použije pro to kód

if($("input:text").val() == "") { $("input:text").css("border", "1px solid #FF0000") }

Toto samozřejmě vůbec nefunguje! Člověk na to přijde hned, jak si to otestuje (mnozí to prohlédnou už z tohoto kódu), že se to chová velice divně a že místo toho, aby to označilo prázdné inputy, tak to označí buď všechny, nebo žádný. Tady se totiž autor dostal do vlastní pasti ze strany 66, kterou jsem popisoval. Bohužel to ukazuje, že autor opravdu neví, co se stane, když zjišťuje val() na selektoru, který vybral více prvků. Když si pak zjistíte, co opravdu dělá val() na více vybraných prvcích, jen kroutíte hlavou, jak moc autor byl naivní, když čekal, že daný kód bude dělat něco byť vzdáleně podobného kontrole prázdných inputů.

Jak je možné, že autor nezná tak základní věc? Jak je možné, že si neotestoval svůj příklad, aby viděl, že nefunguje? Jak je možné, že toto neodhalila nějaká kontrola?

73 - Další vodítko o autorově "praxi". V hlavičce používá XHTML, avšak pro nový řádek používá <br>, tedy značku pro HTML, ne XHTML. Já vím, prkotina...kterou dělají lidé bez zásad. Také mě docela překvapuje přidávání značky <br> mezi položkami seznamu <li>. To tam přeci nemá co dělat, takové mezery se řeší ve stylech. Můžete namítnout, že to je kvůli zjednodušení, aby nemusel psát styly...není to pravda, styly píše hned na straně 75 k tomuto příkladu.

76 - opět špatně fungující ukázka kódu. Autor se snaží přidávat jedinečné styly pro různé druhy odkazů. Standardní odkaz na pdf a odkaz na mail. Činí tak pomocí

$("a[href$=.pdf]").add_Class("pdf_icon");
$("a[href^=mailto:]").add_Class("mail_icon");
$("a[href^=http]").add_Class("standart");

První dva řádky jsou v pořádku. Jakmile ale aplikujete třetí, klidně vám může vynegovat první pravidlo odkazu na pdf. Nikdo vám přeci nezaručuje, že daný odkaz nebude začínat na http. Čili v tomto případě to fungovat nebude. Autor tu krásně mohl ukázat hned dva příklady. V prvním by přehodil pořadí a třídu „standart" by dal na první místo, čímž by deklarace pdf přepsaly dřívější standart a vše by fungovalo jak má. Nebo mohl použít :not(), které ukazoval v knížce předtím. Ale to bychom po autorovi chtěli asi hodně.

80 - Až na této straně vysvětluje autor, jak to vlastně je s tím :odd a :even. Žádná zmínka o předchozím špatném příkladu ze strany 62. Takový postup je přeci naprosto neakceptovatelný. To je, jak kdyby vám na základní škole v páté třídě řekli, že hlavním městem ČR je Brno. Za dva roky vám ale řeknou, že hlavním městem je Praha. Proč jste nám tedy říkali před dvěma lety něco jiného, proč to neopravíte nebo alespoň neřeknete, že se stala chyba? TICHO, PLATÍCÍ ZÁKAZNÍKU! Samozřejmě si dělám legraci. Tady je situace ztížena tím, že se nemůžete s autorem při čtení knihy jednoduše zkonfrontovat a řešit s ním problematiku. I kdybyste to udělat mohli, stejně byste se jen dozvěděli, že prostě udělal chybu. Nic složitého za tím není.

86 - Při popisu jednoho jednouchého kódu autor konečně zmínil pojem "anonymní funkce", tedy naráží na základní informační nedostatek ze strany 49. Už jsem si myslel, že tedy osvětlí přítomnost anonymní funkce, něco pro běžného uživatele nedávající smysl. Nestalo se tak bohužel. Nic vysvětleno stále není. Pochybuji, že to autor kdy vysvětlí. Hlavně že se tu neustále dovídáme, jak "funguje" CSS.

86 - Autor zde znovu míjí tématiku použití $(document).ready() pro detekci načtení dokumentu. Bohužel stále dělá, jak kdyby to byla jediná existující možnost. Nedozvíme se nic o dalších, ani o jejich porovnání. Holt jste nuceni tento kód psát stále dokola tam, kde už potřeba třeba vůbec není.

87 - Autorovi se krásně nabídla možnost napsat $(this) místo $("#nejaky_identifikator_nebo_jakkoliv_dlouha_definice_ktera_se_muze_i_nekolikrat_opakovat"). :) Vím, zveličuji, ale proč autor neukáže věc, která vám usnadní psaní v každém druhém kódu a kterou já jako naprostý začátečník znám už odjinud?

Pak mě na této stránce docela pobavila jedna věc. Něco podobného už bylo na začátku knihy. Autor považuje čtenáře asi za docela velké hlupáky bez jakékoliv představivosti, když příklad "klikem změníme čtvereček na červený" demonstruje na obrázku :) .... Černobílém ;-) Myslím, že k tomu není co dodávat. Však se koukněte na obrázek...mrazivě absurdní smysl pro humor.

88-91

Tyto stránky se pro mě vryjí do historie této knihy, protože to jsou poslední stránky, které jsem přečetl. Je na nich zobrazen jeden příklad, po kterém jsem nad knihou zlomil hůl a definitivně si uvědomil, že nic horšího jsem nečetl a že na mě má kniha mnohem více negativních důsledků než těch pozitivních, které šly spočítat na prstech jedné ruky dlouholetého pyromana.
Ten příklad vám tu nyní se vším všudy předvedu, abyste si udělali představu, s čím máte tu čest, pokud věnujete svůj drahocenný čas a peníze k tomu, aby vás tahle kniha vzdělala.

Nejdříve bych měl asi vysvětlit, k čemu příklad slouží, než si ho začneme vysvětlovat. Použiji slova autora:

„Vytvoříme blok, který se bude posouvat, zatímco uživatel se bude posouvat po stránce."

Dále je důležité zmínit poslední větu k tomuto příkladu, kdy autor shrnuje úspěch funkčnosti svého příkladu. Píše:

„Díky tomu se náš blok neustále posouvá při posouvání stránky, a tak ho máme stále na očích."

Díky těmto dvěma větám o povaze příkladu šlo tedy autorovi o to mít blok stále na očích a chce toho docílit tím, že bude sledovat samotné posouvání stránky.

Drtivá většina z vás se základy CSS nyní vyhrkne position: fixed. Je to tak. Celé divadlo, které autor předvádí, jde vyřešit těmito dvěma slovy, plus informace o souřadnicích. Pokud by tu byla zmínka o tom, že autor nedokáže vymyslet lepší reálný příklad a toto je pouze demonstrativní (mimochodem demonstrativně by to šlo ukázat 10x lépe), tak to beru. Místo toho autor dělá funkčně naprosto obludnou věc, kdy si zjišťuje velikost okna, sleduje pohyb scrollování, to potom analyzuje a dle toho nastavuje parametry bloku a předhazuje nám to jako hotový příklad hodný praxe. A k tomuto všemu se podržte, protože už takto absurdní myšlenka je podtrhnuta neuvěřitelným množstvím nelogických chyb ve zpracování. Však sami uvidíte.

Takže když o shrnu - autor vás učí příklad, který nefunguje, jak má (jak uvidíte), jde udělat mnohonásobně jednodušeji a to vše s ohromným množstvím chyb a nelogičností v kódu. Tam je téměř doslova vše špatně. Pokud se něco tak hrozného může objevit v knize, je to důvod k reklamaci, pokud vůbec existuje něco jako reklamace knihy. Je to, jakoby jste si koupili auto, co má místo volantu pádlo, co při zatočení doleva zatáčí doprava a v manuálu je napsáno, že by auto mělo po zatočení vyletět vzhůru :)

Začíná příběh o tom, kterak Ondřej nejhorší příklad v historii odborných knih četl a byl jím naprosto zdrcen, že neměl sil více, na dočtení zbytku.

Nejdříve vám sem hodím celý kód. HTML, CSS i jQuery. Názvy některých elementů byly upraveny tak, aby seděly s obsahem v knize, protože, jak už jsem říkal, autor v tom má guláš a něco jiného má v příkladech a něco jiného v knize.

HTML kód

<div id="hlavni">
    <div id="top"><h1>Události - plovoucí box</h1></div>
    <div id="blok"></div>      <div id="obsah">
        <h1>Obsah stránky</h1>
    </div>
</div>

Css kód

#hlavni{
    width: 850px;
    margin: 0 auto;
} 

#top{
    border: 1px solid #c3c3c3;
    margin: 5px;
    height: 50px;
}

#obsah{
    border: 1px solid #c3c3c3;
    margin: 5px;
    height: 1500px;
}

#blok{
    width: 150px;
    height: 150px;
    float: right;
    border: 1px solid #000000;
    position: absolute;
    margin-left: 80%;
    top: 50px;
    z-index: 1;
}

jQuery kód

$(document).ready(function($) {
    var body = parseInt($('#obsah').offset().top);

    $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        $('#box').html("rolování : " + scroll);
        if ( scroll > body ) {
            $('#box').stop().css({
                position: 'fixed',
                left: 407,
                top: 20
            });
        } else if ( scroll < body) {
            $('#box').css({
                left: 407,
                top: 50,
            });
        }
    });
});

HTML a CSS rozbor

Rozum zůstává stát už na straně 88-89. Pokud se chcete cítit jako Alenka v říši divů, doporučuji "poutavý výklad CSS kódu". Nikdy bych nevěřil, že se někdo pokusí psát popis k CSS kódu - věc, která je sama o sobě 100% vypovídající. Navíc v knize o jQuery. Navíc s kódem, který na 16 řádcích x krát ukáže, že v něm autor nemá vůbec praxi. Pokud se můžu poplácat po ramenech, považuji se spíše za programátora (pokud na chvíli přehlušíme opravdové programátory a budeme se utěšovat tím, že PHP je programovací jazyk a já jsem programátor), ale už mám za sebou nějakých pár desítek odstylovaných webů a to, co autor ukázal na tak pidikrátkém kódu, jasně svědčí o tom, že nezná základy CSS ani HTML. Občas mi připadalo, že se autor snaží do kódu nacpat co nejvíce WTF momentů. To jediné se mu očividně povedlo.

Na stránce jsou dva H1 nadpisy, což sice není vyloženě chyba, protože existují velice řídké případy, kdy se dá více H1 nadpisů obhájit, ale jedná se většinou o docela obsáhlé stránky. Ale mít 2x H1 na 7 řádcích HTML je neodůvodnitelná prasárna.

První nadpis H1 na stránce je obalen speciálním divem, který následně styluje. Proč? Proč nestyluje H1? H bloky jsou už standardně blokovými elementy. Ani druhý H1 nebude dělat problém. Může se vymazat nebo u CSS toho prvního nadefinovat třeba H1:first-child. Navíc vzhled toho, co autor zapsal, bude vypadat úplně strašně. Stylovat přímo H1 pomocí paddingu by bylo mnohem elegantnější. Autor sice na začátku říká, že nevytváří propracovanou grafickou stránku (s tím souhlasím), ale to přece není důvod psát prasácky a neudělat stránku "nehnusnou" za použití stejného nebo menšího počtu stylů. Alibismus.

CSS definice mají jiné pořadí, než v jakém jsou na stránce. Což samozřejmě není chyba, ale pokud mám na stránce 4 bloky, tak snad...

U posledního bloku mi autor doslova vyrazil dech. Ví autor o základech pozicování bloků? Ví, co znamená absolutní, realtivní, fixní a statické pozicování? Ví, co je to obtékání? Zdá se, že ne, jinak by nemohl zapsat position: absolute a float: right do specifikace jednoho bloku. Toto jsou dvě naprosto mezi sebou se vylučující pravidla. Přes position: absolute vyjmete blok z dokumentu tak, že vůbec neovlivňuje okolní dění. Jakoby v dokumentu nikdy nebyl, jen se přišpendlí na vámi danou pozici ve stránce nehledě na to, co je pod ním nebo nad ním.
Naopak float vychází z defaultního position: static; a zarovná se doprava nebo do leva a přímo daný obsah ovlivňuje tím, že je obtékán. Napsat tyto dvě věci dohromady je, jakoby češtinář napsal "ritýř". 
V tomto případě samozřejmě absolutní pozicování přebije float a float je tak úplně bezvýznamný. Nedělá na bloku žádný efekt. Blok s position: absolute a float: right se v žádném případě nebude zarovnávat doprava, ani ho nebude nic obtékat. Můžete si to klidně zkusit, ale vy to přinejmenším víte jako všichni, kdo s CSS někdy dělali.

Autor samozřejmě tušil, že něco nehraje, a že jeho float: right nefunguje, a tak se snažil nějak ten blok doprava nacpat. Místo elegantního right: 20% tam roubuje margin-left: 80% což znovu svědčí o neznalosti toho, co se používá k pozicování absolutních prvků. Však on autor ví, že to existuje, protože použil top: 50px, ale zřejmě v tom má takový chaos, že motá jabka s hruškami.

Závěrečná perlička v podobě z-index: 1 už jen dovršuje CSS dílo zkázy. Z-index slouží ve speciálních případech, kdy máte na stránce více prvků s nastaveným pozicováním jiným než static (absolute, fixed, relative) a ještě se navíc shodou okolností překrývají a ještě navíc jinak, než byste chtěli (viz pořadí prvků na stránce). V tom případě můžete říct, že tenhle prvek bude nad tím druhým. 
V tomto příkladu to samozřejmě nemá vůbec žádný smysl a žádný efekt a nikdo, kdo tomu rozumí, by to tam nikdy nedal.

Je špatně, že se stále divím, jak může být tolik závažných chyb v tak kratičkém kódu v knize, za kterou vy si platíte? Bohužel daný příklad pokračuje ještě s částí o jQuery.

jQuery rozbor

Zajímavostí je, že po těch všech blbůstkách a jednoduchostí na vás vyskočí o dva řády složitější věc. Z ničeho nic. A jak je autorovým "dobrým" zvykem, řadu z nich zase vůbec nevysvětlí.

Hned z kraje použije místo klasického $(document).ready(function(){}); kód $(document).ready(function($){}). Co to má znamenat? Je to překlep, chyba? Má tam ten znak "$" nějaký smysl? Je to snad nějaký argument funkce? A co znamená? Nikdo nic zase nevysvětlí.

Na dalším řádku je použita funkce parseInt(). Její vnitřek je dále vysvětlen, samotná funkce však nikoliv. Sami si vygooglujte, co to znamená, přestože dle slibů autora JavaScript nebudete potřebovat.

O dva řádky níže autor vypisuje pomocí html() text "posunutí" včetně pozice bloku. Vtipné na tom je, že jak v příkladu, který si můžete stáhnout, tak na obrázku je úplně jiný text :). Je tam "rolování". Samozřejmě je to "drobnost" (po sté). Každý ví, co to znamená, ale jde jasně vidět, že to je jeden velký bordel a něco úplně jiného je v ukázce a v knize. V ukázkách jsou dokonce i jiné názvy elementů, jiný obsah CSS a podobně, takže zapomeňte na to, že příklady v elektronické podobě můžete nějak efektně používat zároveň s knihou.

Screen v knize je udělán tak hloupě, že vůbec nevíte, v jaké pozice je blok, o kterém ta část kapitoly je. Říkáte si

"Šak Ondro, vykašli se na obrázek, podívej se na živej příklad."

Však já se dívám, dokonce si je i sám dělám. Jenže to se pak dovíte strašnou věc - ten příklad vůbec nefunguje, jak má! Je to rozbitý kus podivného pokusu, který dělá úplné hlouposti. Říkáte si, že tam asi má někde překlep, tak si to přepíšete k sobě, abyste to lépe pochopili a vážně - pochopíte. Ale on tam nemá překlep, on to má úplně nesmyslně namyšlené.

Pointa autorova příkladu totiž vůbec není (jak jsem v začátku popisoval) složitě počítat pozice prvků na stránce vzhledem k rolování a odsunu bloku od topu stránky. Ano, to je samozřejmě prasácké a zbytečné, protože tu máme position: fixed u CSS, která to vyřeší za nás, nehledě na uživatelově rolování, ale aspoň by to ukazovalo nějaké možnosti jQuery, byť tím nejhorším způsobem. NE. Bohužel ani toto příklad nedělá. Ten příklad totiž zachovává absurdnost v hlídání pozice dle rolování a jediné, co z toho vyvodí, je nastavení css hodnot (a teď se podržte) na position: fixed, o kterém jsme mluvili na začátku. Čili to, co autor mohl nastavit už na začátku bez jakéhokoliv jQuery a my to věděli, udělal bez jediného důvodu až nyní, v závislosti na pozici uživatele na stránce. A to tak špatným způsobem, že jakmile zarolujete na určitou pozici, náš blok získá position: fixed a už ho bude mít napořád, ať hejbete rollovátkem jakkoliv.

Co z toho plyne? Samozřejmě že blok se chová jak splašená koza a vůbec ne dle našich představ a už vůbec neoplývá chováním, které by se jakkoliv přibližovalo něčemu, co chceme mít na reálném webu.

Pokud bych měl chování zjednodušeně popsat, jak absurdně a nepoužitelně se to chová, bude to asi následovně

• V základním stavu má blok svou absolutní pozici.
• V momentě, kdy pohnete myší, se aktivuje jQuery kód a blok vám skočí horizontálně i vertikálně na úplně jinou pozici. Úžasné. Toto každý uživatel miluje.
• Jelikož je ale naše hodnota scroll menší, než hodnota body, jquery předává pouze css hodnoty left: 407 a top: 50 (jestli se ptáte, proč tam nejsou pixely, určitě se neptejte autora, protože ten zapomněl napsat, jaké jsou rozdíly při zápisu do CSS kódu a do jQuey kódu). 
• Prvek si ale stále drží positon: absolute, takže nastane ta šílená situace, že když rolujete dolů, blok je pořád nahoře až vám úplně zmizí z očí ;-) geniální chování pro „chceme mít stále na očích", jak psal autor v zadání.
• Jakmile začne platit podmínka scroll > body, změní se nám position na fixed stejně jako vertikální pozice a blok z neznáma poskočí na obrazovku. Magické :). Pokud budete nyní rolovat jen dolů, prvek bude stále ve stejné pozici. Hurá, docílili jsme něčeho, co jsme mohli udělat v CSS.
• Jakmile ale znovu zarolujete nahoru, aplikuje se znovu druhá část podmínky. Jelikož se ale nyní nemění position (nyní z našeho fixed), uplatní se pouze top a left souřadnice. Proč znovu definujeme left, která je stále stejné, na to se mě neptejte. Už nemám sílu odůvodňovat autorovy myšlenkové pochody. Co se tedy změní, je parametr top, který je větší. Jakmile tedy budete rolováním protínat hranici scroll > body, bude blok skákat z top: 20 na top: 50. Znovu ideální chování pro uživatele.

Jak sami můžete vidět, celý kód se chová jako zmatená hromádka čehosi, co nesystematicky mění svoje stavy, ke kterým už se nejde vrátit, to celé za doprovodu absence pointy a reálného využití.

Mám před sebou příklad, který nedělá to, co autor zamýšlel, a to, co dělá, dělá špatně a ještě k tomu hrozně napsaným způsobem. Nezlobte se na mě, ale toto nemohl napsat profesionál. Navíc když si představím, jak to mohl být krásný příklad. Mohli jsme demonstrovat blok, který se hýbe zprava doleva dle toho jak rolujeme myší a za pohybu by navíc měnil barvu. Vymyslet se toho dá spousta a autor udělá toto. Škoda slov.

Dále použitá funkce stop() ve vysvětlení také vůbec není, takže nevíte, k čemu je. Pokud si ji najdete v manuálu, stejně nechápete důvod, proč je v kódu. Logicky tam vůbec nedává smysl a ouha, když ji vymažete, vše "funguje" směle dál.

Závěr

Tenhle příklad pro mě byl naprostou poslední kapkou. TENTO PŘÍKLAD JE TAK ABSURDNÍ A VE VŠECH SMĚRECH ŠPATNÝ, že je drzost něčím takovým naplnit knihu a chtít za ni peníze. Přestože jsem tímhle stylem chtěl popsat celou knihu, představa, že bych měl projít dalších 150 stran takového obludária, věnovat svůj čas opravováním někoho, kdo za mé peníze měl vzdělávat mně, je naprosto tristní. To nemluvím o tom, jakou nehmatatelnou újmu si nesete ve špatných návycích, které vás ta kniha učí.

Nemám sebemenší pochybnosti o tom, že dalších 150 stran bude stejně hrozných jako těchto 90. Popravdě budou ještě horší, protože se tam probírá zřejmě komplikovanější látka, kde autor pravděpodobně naseká mnohem více a mnohem závažnější chyby.

Na závěr bych chtěl říct, že neznám autora knížky, neznám ho osobně, ani neznám jeho práci. Klidně to může být profesionál a jeho aplikace, potažmo kód v jQuery, je na špičkové úrovni. Z jeho knížky to tak bohužel nevypadá. Ač jsem se do něj častokrát kousavě navážel, nemyslím to nijak ve zlém. Prostě už se tak hloupě vyjadřuji, když se mi něco nelíbí. V žádném případě se s ním v ohledu jQuery nemůžu nijak porovnávat, protože před přečtením této knihy jsem byl naprostý začátečník, co přečetl pár stránek z „jQuery Kuchařka programátora" a z nouze viděl pár stránek manuálu.

Kniha ve mně však budí nemilý dojem, že autor opravdu s jQuery neumí tak, jak by se na autora publikace slušelo, neboť neuvěřitelně zkombinoval svůj neum podávat látku s velikou dávkou nepozornosti a dovolenou korektora.

Na vydavatelství CPress jsem poslal mail, kde jim dávám odkaz na tento článek a píši malé zamyšlení nad tím, jak by se zachovali v restauraci, kde si zakoupí jídlo v dobré víře, že se kvalitně nají. Jídlo jim přinesou, oni ochutnají pár soust, zdá se jim divné, ale nechtějí urazit tak ochutnají i přílohu a zeleninu, čili prostě určitý kousek zkonzumují. Tento kousek je sice možná lehce zasytil (jako mě možná něco málo kniha naučila), ale nechutná jim a hlavně se jim z něj dělá špatně a už více jíst nechtějí. Jak by se měla zachovat restaurace? Měla by restaurace umožnit neplatit za jídlo (vrátit peníze za knihu) nebo udělat nové jídlo?

Já po CPressu určitě nechci jiné jídlo v podobě nové knihy :), a ve svém důsledku nepožaduji ani vrácení peněz, i když bych se takové nabídce od CPressu asi nebránil a knihu s radostí poslal zpět. Na druhou stranu tu knihu dočítat nebudu a sám ji nikomu vnucovat také nebudu se slovy „no nekup to, když je to tak hrozný". Asi to tedy vypadá, že mi tu v naprosto neporušeném stavu bude ležet a strašit do chvíle, než si nepřečtu jQuery Kuchařka programátora od nakladatelství O'Reilly, která doufám bude mnohem lepších kvalit. Začátek na to rozhodně vypadal.

Tím nedělám tomuto nakladatelství reklamu. Drtivá většina mých knih je z CPressu, jsou skvělé a koupil jsem je za dobré ceny. Jsem rád za CPress a jeho práci. Tohle byl ale krok vedle. Doufám, že tohle není kritika jako kdejaký jiný výkřik do tmy a třeba CPressu zabliká výstražné světýlko a něco se stavem knihy udělá. I když mně osobně už to asi bude jedno. 

Také budu rád za jakékoliv reakce, včetně těch, co vyvrátí některou mou kritiku.

Komentáře

Doporučeno

Kategorie