Javascriptaření: ukažte mi, označte mě, opravte mě

Javascriptaření tentokrát přináší drobné knihovny pro jednodušší vytváření animací, zpracování URL či vylepšení AJAXu. Kromě toho si ukážeme nástroj na kontrolu pravopisu, zajímavé použití canvasu pro práci s obrázky anebo propracovaný nástroj pro vytváření prezentací na vývojářské konference.

Seriál: Javascriptaření (9 dílů)

  1. Javascriptaření: hrajte si s funkcemi! 31.1.2011
  2. ECMAScript Strict mode ve Firefoxu 4 8.2.2011
  3. Javascriptaření: nejen jQuery živ je JavaScriptař 8.3.2011
  4. Javascriptaření: fyzika, grafika a společenská konverzace 23.3.2011
  5. JavaScriptaření: drátujeme, překládáme, spojujeme 31.3.2011
  6. Javascriptaření: ukažte mi, označte mě, opravte mě 13.4.2011
  7. Kontrola JavaScriptu s JSLint a JSHint 14.7.2011
  8. Základní vzory pro vytváření jmenných prostorů v JavaScriptu 10.10.2011
  9. Javascriptaření: překladače, pakovače 9.11.2011

Kapi

Kapi (zdrojové kódy) je keyframing API pro HTML5. K čemu takový nástroj slouží?

Pokud jste někdy dělali animace v JavaScriptu, narazili jste pravděpodobně na problém s přesným časováním jednotlivých kroků. Klasický způsob, používající setTimeout, je nejen nepřesný, ale i nepružný. Mnohem lepší by bylo mít definované „klíčové snímky“ (keyframes) v animaci, tedy stav zobrazované animace (resp. jejích prvků, „actors“) v určitých významných okamžicích, a nadefinované přechody mezi nimi.

Výhodou takového přístupu je například možnost „převíjet“ animaci dopředu a dozadu.

Kapi nabízí právě takovou „časovací kostru“. Zpracuje pro vás přechody a stavy v klíčových okamžicích animace a umožní její jednoduché přehrávání.

Route Map

Ne, nejedná se o navigaci ani o mapový software. Tento poněkud matoucí název označuje knihovnu pro mapování cest v URL – tedy pro činnost, kterou se v MVC a příbuzných modelech webových aplikací překládá požadované URL na potřebné parametry.

RouteMap (dokumentace) nabízí zpracování URL v JavaScriptu (můžete jej použít na serveru i v klientu) způsobem, který vám bude možná povědomý:

RouteMap.add({route: '/users/:id', method: 'users.get'});

RouteMap parsuje zadanou URL podle vytvořených pravidel, a pokud nalezne shodu, zavolá určenou metodu, které předá sadu parametrů. Syntaxe je podobná obdobným nástrojům v jiných jazycích a frameworcích.

RouteMap umožňuje zpracovat i cesty, zadávané pomocí tzv. hashbangu.

jQuery/PJAX

A ještě jednou z podobného soudku: pokud načítáte obsah stránky pomocí AJAXu a vadí vám, že se musíte starat o historii prohlížeče (popřípadě se o ni nestaráte vůbec), zkuste jednoduchý nástroj pro jQuery s názvem PJAX. Význam zkratky je jednoduchý: „PushState & AJAX“.

Pomocí PJAXu snadno proměníte své odkazy v rámci webu na AJAXová volání, která změní pouze obsah „kontejneru“, a zároveň máte aktuální historii prohlížeče, takže tlačítko „ZPĚT“ funguje tak, jak uživatel očekává.

Sám autor o PJAXu říká: „Jenom o něco zlepší prožitek při práci s prohlížečem, nic víc!

Typo.js

Kontrola pravopisu je pro některé uživatele poměrně klíčovou funkcí; nemají-li ji, jsou schopni text prohnat Wordem jen proto, aby jim zkontroloval pravopis. Knihovna Typo.js právě takovou kontrolu pravopisu přímo v prohlížeči nabízí.

Sám autor v článku, ve kterém tuto knihovnu představil, poněkud ironicky dodává: „… strávil jsem spoustu času vytvářením něčeho, co nakonec bude zbytečné, až pro to Chrome nabídne rozšíření s API“.

Pro nás by mohlo být Typo.js zajímavé tím, že používá slovníky kompatibilní s Hunspell – tedy stejné jako používá např. OpenOffice nebo Firefox. Použití Typo.js je přímočaré a uživatelům, co nemají v prohlížeči kontrolu pravopisu, a přesto o ni stojí, by mohlo ušetřit trochu nervů.

Watermark.js

Canvas umožňuje kreslit libovolnou bitmapovou grafiku do stránky a neomezovat se pouze na obrázky. Pomocí manipulací přímo s bitmapou můžete vytvářet zajímavé efekty takříkajíc „in situ“, přímo v prohlížeči.

Patrick Wied před časem popisoval, jak lze vytvořit pomocí Canvasu poloprůhledný obrázek (načíst obrázek do canvasu, projít pixel po pixelu, nastavit požadovanou průhlednost, a výsledek získat jako dataURL). Tento princip nyní zobecnil a použil v knihovně Watermark.js.

Knihovna vykresluje, jak už název napovídá, do obrázků „vodoznaky“, a to přímo v prohlížeči. Jako ochranu před zcizením obrázků ji tedy nelze použít, ale poslouží v případě, kdy vám postačí přidání informace až v prohlížeči. A tou informací nemusí být jen textový vodoznak, ale například i QR kód.

Closure Node stack

ClosureStac­kNodeJS stačí pravděpodobně už název k tomu, aby si každý, kdo sleduje dění v JS světě, dokázal udělat obrázek, oč běží. Jde vlastně o „šablonu projektu“ pro Node.js, založenou na frameworku Express, jazyku Coffeescript, dokumentačním nástroji JSDoc a překladači Closure Compiler. Použití této „šablony“ vám může ušetřit spoustu úvodních kroků a posunout vás přímo k psaní vlastní aplikace.

Showoff

Scott Chacon (mj. autor knihy Pro GIT) potřeboval pro své přednášky a prezentace vhodný nástroj, a <ironie>z nějakého důvodu si nechtěl vybrat PowerPoint</i­ronie>. Chtěl totiž prezentační nástroj, co budou vývojáři milovat.

Seznam Scottových požadavků na prezentační nástroj je sám o sobě inspirující počtení – Scott požaduje kromě zobrazování textu a obrázků a jednoduchých přechodů například i syntax highlight pro kód, live vykonávání JS či Ruby skriptů se zobrazením výsledků, „předstartovní“ slideshow (aby se diváci před začátkem nenudili) nebo možnost kdykoli vyvolat menu se sekcemi / slajdy a pohybovat se v něm. Jako funkce „navíc“ by ocenil časovač (který by zobrazoval uplynulý a zbývající čas), možnost zobrazit si synchronizovaně poznámky v jiném prohlížeči (např. v iPhone), live zobrazování otázek a komentářů z publika (pomocí Twitteru) či možnost nabídnout divákům slajdy či další materiály ke stažení.

Výsledkem jeho zamyšlení je Showoff – prezentační nástroj, napsaný v Ruby, který používá prohlížeč jako zobrazovací zařízení. Slideshow má formát adresáře, v němž jsou uložené jednotlivé slajdy, zapsané ve formátu Markdown, a metainformace k nim. Showoff ovládáte z příkazové řádky – např. pomocí „showoff serve“ spustíte lokální HTTP server k prezentaci, „showoff static“ vygeneruje statickou podobu slajdů a „showoff heroku“ vytvoří potřebné soubory a provede push na Heroku.

(Na stránce projektu naleznete i vysvětlení, proč nepoužil S5, Slidy či Slidedown – zjednodušeně řečeno proto, že požadoval „od každého něco“, a polovinu funkcí zase nepotřebuje.)

Emscripten ve verzi 1.0

Pamatujete na kuriozitku jménem Emscripten z jednoho z předchozích Javascriptaření? Tento nástroj, který slouží k převodu instrukcí pro virtuální stroj LLVM do JavaScriptu, dospěl do verze 1.0 a autor o něm prohlašuje, že je „poměrně dobrý“. Jako ilustraci přikládá renderování PDF, které je napsané v C/C++ pomocí nástrojů Poppler a Freetype, přeložené do LLVM bajtkódu a z něj pomocí Emscriptenu převedené do JavaScriptu. Výsledek má 12MB, což je slušný balík dat.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 1

Přehled komentářů

dingo
Zdroj: https://www.zdrojak.cz/?p=3475