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

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