Vyvíjíme IHNED(.cz)2013-11-12T08:54:27-08:00http://economia.github.io/Martin Malýmartin.maly@economia.czZápisky z fronty: Volby, část softwarová2013-11-12T00:00:00-08:00http://economia.github.io/zapisky-z-fronty-ii<p>Kvůli volbám jsme si naprogramovali řadu užitečných utilit. Spousta se jich zase čtyři roky nebude hodit, ale pár kousků je přeci jen univerzálnějších. Nyní konečně bylo trochu času projít repozitáře, dopsat readme a dát je k dispozici světu (nadpisy vedou na příslušné repozitáře).</p>
<h2 id="volebn-modulyhttpsgithubcomeconomiavolebni-moduly"><a href="https://github.com/economia/volebni-moduly">Volební moduly</a></h2>
<p>Kolekce skriptů pro stažení volebních výsledků ze serveru <a href="http://volby.cz/opendata/opendata.htm">ČSÚ</a>, výpočet rozdělení mandátů stranám a rozdělení stranických mandátů kandidátům (včetně preferenčních hlasů). Jako bonus také indikuje nejslabší mandát - takový, který může strana nejsnáze ztratit. To je vždy poslední mandát v každém kraji - kandidát jej může ztratit pokud ho překoná další v pořadí ze stejného kraje, pokud o mandát přijde celý kraj (při přepočítání rozdělení) nebo když nějaká strana nově překoná 5% kvórum.</p>
<h2 id="vizualizace-vsledkhttpsgithubcomeconomiavolby-2013"><a href="https://github.com/economia/volby-2013">Vizualizace výsledků</a></h2>
<p>Generátor SVG, který byl podkladem pro naše <a href="http://data.blog.ihned.cz/c1-61086960-jak-se-zmenila-politicka-mapa-republiky-vysledky-snemovnich-voleb-v-kazde-obci-od-roku-1996-do-vcerejska">volební mapy</a>. Pokud vás zajímá, jestli někde volili Pravý Blok nebo kde Okamura porazil Babiše, určitě se mrkněte.</p>
<p>Kromě vizualizace vás ještě může zaujmout složka data. Jsou v ní v jednotném formátu výsledky všech parlamentních voleb od roku 1996 (pro popis formátu viz readme repozitáře) a TopoJSON obcí ČR s jejich ID dle <a href="http://www.czso.cz/csu/klasifik.nsf/i/ii_struktura_uzemi_ceske_republiky">Struktury území ČSÚ</a> v různých úrovních zjednodušení.</p>
<h2 id="svg-mapperhttpsgithubcomeconomiasvg-mapper"><a href="https://github.com/economia/svg-mapper">SVG Mapper</a></h2>
<p>Převodník SVG obrázku na mapové podklady použitelné jako vrstva v Leafletu nebo Google Maps. Díky němu jsme převedli vizualizaci výsledků (což bylo 9MB velké SVG, jehož vykreslení trvá i na výkonném PC 5-10 vteřin) na stovky mapových dlaždic různé úrovně přiblížení, které jdou zobrazit za pár stovek milisekund a kilobajtů. Protože nám přišel jako užitečný pro komunitu i za hranicemi naší republiky, je k němu zpracován poměrně podrobný manuál v angličtině.</p>
<h2 id="package--responsehttpsgistgithubcomveproza7433985"><a href="https://gist.github.com/veproza/7433985">Package & Response</a></h2>
<p><a href="/zapisky-z-fronty">Minule jsem psal</a> o zátěži, kterou naše servery ustály. Kromě extrémně rychlé architektury Node na tom nesla svůj podíl naše in-memory cache, Package. Využili jsme specifika zpravodajského webu, totiž že drtivá většina požadovaného obsahu (daleko přes 99%) je představuje pouze pár kilobajtů dat a tak jsme si tato data vždy připravili, gzipovali a až do jejich invalidace je servírovali všem, kdo si o ně řekli. Jak vypadala naše již druhá implementace této metody (první byla u Hatecloudu) se můžete podívat v <a href="https://gist.github.com/veproza/7433985">Gistu</a>. Zároveň tam najdete i třídu zastřešující pár convenience metod pro HTTP request, se kterou Package spolupracuje.</p>
<p><em>Marcel Šulek</em></p>
Zápisky z fronty: Volby, část serverová2013-10-31T00:00:00-07:00http://economia.github.io/zapisky-z-fronty<h2 id="s-linuxem-na-azure">S Linuxem na Azure</h2>
<p>V duchu moderních cloud řešení jsme zvolili Microsoftí Azure a nakonec jsme skončili se sestavou dvou small a dvou medium instancí (small - 1 jádro kolem 1,5 GHz, 1,7 GB RAM, medium - 2 jádra, 3,5 GB RAM). První small instance stahovala data z ČSÚ, přepočítávala je do <a href="/volebni-api/">našeho formátu</a>, ukládala do Redisu a generovala vizualizaci sečtených obcí. Ostatní stroje fungovaly jako frontendy - small hlavně pro mobilní uživatele na <a href="http://m.ihned.cz/">m.ihned.cz</a>, oba medium pro velký <a href="http://ihned.cz">ihned.cz</a>. Frontendy měly vždy svůj vlastní Redis, připojený jako slave k centrálnímu masteru. Takto jsme efektivně rozložili zátěž a podle potřeby mohli bezproblémově horizontálně škálovat.</p>
<p>Původní plán byl, že využijeme možnost servery sdružovat do jednoho <em>Azure Cloud Service</em>. Pak by se všechny servery umístily do jednoho subnetu vnitřní sítě a za jednu veřejnou, load-balanced IP. Tím pádem by veškerá autorizace k databázi spočívala v jednorázovém nastavení správné masky ve firewallu a díky Azure loadbalancingu by naše škálování bylo pro vnější uživatele zcela transparentní. A to vše na pár kliknutí v Azure Portalu. Jak říkají Angličani: <em>“too good to be true”</em>.</p>
<h2 id="srka-s-realitou">Srážka s realitou</h2>
<p>Bohužel nám během příprav nezbyl čas balancer skutečně otestovat, a tak se až během ostrého provozu ukázalo, že se příliš nesnaží různá spojení jednoho klienta předávat stejnému serveru, ale rozděluje je spíše na principu round-robin. S tím se ale vůbec nepohodl <a href="http://socket.io">Socket.io</a> (resp. jeho nenastavená verze - právě pro toto použití Socket nabízí synchronizaci přes Redis…) a realtime spojení padala jak státník s virózou.</p>
<p>Někde kolem této chvíle nastala v našem řídícím centru panika, protože se zrovna začalo sčítat a naše připravené škálování se právě stalo nepoužitelným. A vzhledem k tomu, že připravený frontend byl za stejnou veřejnou IP, ani neexistovala cesta, jak ho rychle dostat na internet, byť mimo loadbalancing (leda na jiném portu než 80, ale to bysme zase mohli narazit na restriktivní firewally na počítačích klientů). A na vytvoření ready-to-deploy images taky do té doby nebyl čas. Při pokusu o rychlé vytvoření image z nyní stejně nepoužitelného frontendu jsme ještě narazili na další novou informaci, a sice že Azure vyžaduje před jeho vytvořením proběhnutí jakési utilitky, jejíž <a href="http://www.windowsazure.com/en-us/manage/linux/how-to-guides/linux-agent-guide/">manuál</a> je na osm stran a na jeho čtení fakt nebyl čas. Až v neděli jsem se dozvěděl, že konkrétní příkaz je na jeden řádek a celá procedura vlastně není až tak nutná.</p>
<p>Padlo tedy rozhodnutí vytvořit další server ručně. Naštěstí toto mají Redmondští zvládnuto dobře a nainstalování Node, Redisu a jejich zběžnou konfiguraci již mám vcelku slušně zažranou v “muscle memory”. Pak ještě drobné zdržení s úpravou firewallu na nový stroj z nového Cloud Service (a tím jiného IP range) a po asi čtvrthodině máme server připravený. Mezitím se chudák small instance, určená původně pouze pro mobily, zmítala pod náporem tisíců requestů za vteřinu. I přes to timeoutnula pouze párkrát, díky síťové propustnosti Azure a rychlosti Node. Balancujeme jak za krále Klacka pomocí javascriptového střídání zdrojových URL, ale funguje to. Po dalších pár minutách jsme spustili poslední, čtvrtý frontend, který zátěž definitivně srazil pod 25% CPU, od asi pětiny sečtených hlasů tedy již čtenáři viděli výsledky zcela bez komplikací. A konec dobrý, všechno dobré!</p>
<h2 id="resum">Resumé</h2>
<p>Jak bych tedy shrnul řešení? Mít tak půlden vývoje navíc, kdy bychom otestovali, jak funguje loadbalancing se Socket.io a připravili si image systému, pak by vše proběhlo tak, jak jsme si to plánovali. Takhle jsme sice měli pár infarktových momentů, servery (jak Azure tak Node) nás ale podržely a ve výsledku jsme byli schopni s minimálními náklady obsloužit téměř všechny požadavky. Což, pro představu, bylo za to jedno sčítací odpoledne něco přes 300GB.</p>
<p><em>Marcel Šulek</em></p>
Volební API2013-10-14T00:00:00-07:00http://economia.github.io/volebni-api<p>Od začátku oddělení redakčního vývoje se snažíme vše, co vyprodukujeme, taky <a href="https://github.com/economia">zveřejňovat</a> pod otevřenou licencí. S blížícími se volbami programujeme kalkulačku průběžných výsledků, která vychází z dat zveřejňovaných ČSÚ na volby.cz. I tu najdete mezi našimi projekty - viz <a href="https://github.com/economia/volebni-moduly">Volební moduly</a>. Abyste ji však nemuseli zprovozňovat sami, spustíme před volbami veřejné API s již spočítanými výsledky. Konkrétní datum spuštění a finální endpointy včas oznámíme na <a href="https://twitter.com/vyvojIHNED">našem twitteru</a>, zatím pro vás máme specifikaci a ukázkové výstupy na základě dat z voleb 2010.</p>
<p>AKTUALIZOVÁNO:</p>
<p>API nabízí tři datasety - <a href="http://economia-node2.cloudapp.net/api/parties">parties</a>, <a href="http://economia-node2.cloudapp.net/api/candidates">candidates</a> a <a href="http://economia-node2.cloudapp.net/api/country">country</a>. Obsahují seznam stran a jejich výsledků, seznam již zvolených kandidátů a průběžné výsledky sčítání. Viz <a href="http://datasklad.ihned.cz/volebni-api/">popis</a>.</p>
<p>Co použitím našeho API získáte nad strojově čitelnými daty z Volby.cz? Především to je průběžný výpočet složení sněmovny včetně preferenčních hlasů, které ČSÚ zveřejní až po sečtení všech výsledků. Také máme k dispozici “mediální” server ČSÚ, který je oddělený od veřejného, takže i pokud volby.cz “spadnou”, naše API bude fungovat dál.</p>
<p>Výstup je ve formátu JSON. Počet požadavků na API nemá předem daná omezení, pokud nejste významný internetový portál, tak váš provoz naše technika ustojí. Budeme však monitorovat IP a HTTP referer, vyhrazujeme si právo v případě potřeby váš přístup omezit. Naše data také můžete předávat pomocí vlastní proxy, v takovém případě by neměl vůbec nastat problém, zvlášť pokud využijete HTTP If-Modified-Since, který budeme aktivně sledovat a odpovídat HTTP 304 Not Modified. V takovém případě nemáme problém ani s pollingem 1 request za sekundu. </p>
Další open source2013-10-02T00:00:00-07:00http://economia.github.io/dalsi-open-source<p>Na našem <a href="https://github.com/economia">účtu na GitHubu</a> přibylo opět pár kousků, které už vyšly na webu, a proto je, v souladu s <a href="/par-svesticek-ze-zahradky">naší politikou</a> pouštíme ven.</p>
<p>Kromě vizualizací k článkům (<a href="https://github.com/economia/top-100-aukci">Top 100 aukcí</a>, <a href="https://github.com/economia/vyroci-krize">výročí ekonomické krize</a> nebo <a href="https://github.com/economia/volebni-pruzkumy">volební průzkumy</a>) je to tentokrát i jeden interní nástroj.</p>
<p><a href="https://github.com/economia/svg-mapper">SVG mapper</a> je nástroj, který nám umožňuje vzít zdrojové SVG a vytvořit z něj mapové dlaždice (tiles), které pak lze použít např. s knihovnou Leaflet. Mapper je ve funkční betaverzi. Není k němu uživatelská dokumentace. Zdrojový kód je k dispozici pro zájemce pod volnou licencí MIT.</p>
Vyznačte obsah pro tweet pomocí x-tweetable2013-09-03T00:00:00-07:00http://economia.github.io/vyznacte-obsah-pro-tweet<p>Sdílecí tlačítka pro nejrůznější sítě jsou už téměř standardní součástí redakčních systémů. Jenže tohle řešení má slabé místo, a tím je fakt, že nemůžete jednoduše ovlivnit, co budou lidi sdílet. Většinou je jako obsah ke sdílení použit titulek článku, a to dost často nebývá to pravé ořechové.</p>
<p>Naše řešení bylo inspirováno článkem <a href="http://www.niemanlab.org/2013/08/if-you-use-wordpress-you-too-can-have-tweetable-sentences-like-in-that-new-york-times-snl-story/">If you use WordPress, you too can have tweetable sentences like in that New York Times SNL story</a>. S troškou JavaScriptu a jQuery jsme si napsali <x-tweetable title="Jednoduchý kód, kterým můžete ovlivnit, co budou vaši čtenáři sdílet na Twitter.">plugin, který promění vyznačenou část textu na "sdílecí tlačítko" pro Twitter</x-tweetable>. Princip je prostý: V textu si pomocí <a href="http://www.w3.org/TR/2013/WD-custom-elements-20130514/">custom elementu</a> <x-tweetable> vyznačíme pasáž, která se stane obsahem tweetu pro sdílení. Krátký skript pak z něj udělá tweetovací text.</p>
<p>Samozřejmě, takové řešení bude fungovat pouze v prohlížečích, které se u neznámého elementu nerozsypou. Pokud je pro vás důležité zachovat kompatibilitu a nezavádět nové tagy, můžete pro stejnou funkci využít třeba span s určitou třídou, nebo zneužít existující, ale téměř nepoužívaný tag, například <ins>. (Není to systémové řešení, ale někdy jsou v řetězci vytváření obsahu komponenty, které nemáte pod kontrolou, a které vám nemilosrdně vyhážou vše, co se jim zdá podezřelé, od custom elementů po třídy, a pak se lze k takové oklice uchýlit.)</p>
<p>Fungování pluginu vidíte na téhle stránce o kousek výše. Řešení spočívá v nahrazení obsahu elementu <x-tweetable> odkazem, který otevře “tweetovací okno”. Patřičné <a href="http://jsbin.com/UCumEZe/2/edit?html,css,js,output">kódy jsou k dispozici na JSBinu</a>.</p>
<p>Někdy nenajdete vhodnou pasáž přímo, proto můžete do x-tweetable doplnit atribut title, jehož obsah bude použit jako “tweetovací citace”.</p>
Blog snadno a rychle s Jekyllem, GitHubem a na Windows2013-08-30T00:00:00-07:00http://economia.github.io/blog-snadno-a-rychle-s-jekyllem-github<p>GitHub je opravdová sociální síť pro vývojáře. Bez GitHubu by Git byl jen verzovací systém s úchylným workflow a sadistickými volbami příkazové řádky. S GitHubem dává celé tohle snažení smysl. GitHub nabízí nejen možnost uložit si zdrojáky, navzájem je sdílet, vylepšovat a komunikovat spolu, ale pomáhá i s automatizací práce, no a v neposlední řadě i s propagací pomocí <a href="http://pages.github.com/">GitHub Pages</a>.</p>
<p>Není to nová služba, podobná možnost existovala (a snad stále ještě existuje) přímo na GitHubu, pomocí speciálně pojmenované branche, do které lze ukládat HTML soubory, ale <a href="http://pages.github.com/">GitHub Pages</a> jsou o něco jednodušší, nevážou se na konkrétní repozitář, ale samy jsou repozitářem.</p>
<p>Když jsme se rozhodli pro blog, zkoušeli jsme různé hostované platformy. Starat se o vlastní WordPress bylo pro nás lehce “overkill”, však naše potřeba je uspokojená tím, že jednou za čas napíšeme článek. Nic víc. Hostovaný WordPress či Blogger jsou sice mocné nástroje, ale pořád je tam spousta práce s nastavením a pro nás platí, že “čím jednodušší, tím lepší”. </p>
<p>Vrátili jsme se tedy na úplné počátky blogování a <x-tweetable title="Jak použít k blogování Jekyll, Github Pages a Disqus?">rozhodli se využít nějaký offline generátor stránek</x-tweetable>, jako býval třeba <a href="http://www.elka.cz/easyblog/">EasyBlog</a>, jen holt v modernějším provedení. O diskuse, které jsou hlavní důvod, proč by měl blog mít nějaký serverový background, se díky <a href="http://disqus.com/">Disqusu</a> není potřeba starat. Takže nějaký generátor, který vezme z jedné strany články, z druhé šablonu, a vyplivne hotové stránky. Ty pak nahrajeme na <a href="http://pages.github.com/">GitHub Pages</a>, a máme hotovo.</p>
<p>Existuje několik podobných generátorů. Začal s tím <a href="http://jekyllrb.com/">Jekyll</a>, a podle jeho vzoru vzniklo několik klonů v různých jazycích. Hledali jsme, který použít, a nakonec padla volba na ten první jmenovaný. Hodně tomu napomohla i nepatrná zmínka na GitHubu, že GitHub Pages <a href="https://help.github.com/articles/using-jekyll-with-pages">podporují nativně Jekyll</a>.</p>
<p>Instalace Jekyllu nebyla úplně bezproblémová. Totiž Jekyll používá Ruby. Instalace Ruby na Windows je zatím stále trošku nepřívětivá, takže pokud se může něco pokazit a zahlásit podivnou chybu, stane se tak. Naštěstí jsme objevili <a href="http://www.madhur.co.in/blog/2013/07/20/buildportablejekyll.html">instantní řešení</a> - totiž Jekyll se vším potřebným, takříkajíc v “portable verzi”.</p>
<p>Ani to nebylo úplně perfektní. Objevily se například <a href="http://joseoncode.com/2011/11/27/solving-utf-problem-with-jekyll-on-windows/">problémy s UTF-8</a> nebo s použitými moduly. Nakonec jsme to vyřešili pomocí nastavení, které skousne jak lokální instalace, tak GitHub Pages (problémy dělaly hlavně pluginy pro zpracování Markdownu). Viz náš <a href="https://github.com/economia/economia.github.io/blob/master/_config.yml">_config.yml</a>:</p>
<div class="highlight"><pre><code class="yaml"><span class="l-Scalar-Plain">markdown</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">kramdown</span>
<span class="l-Scalar-Plain">pygments</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">true</span>
<span class="l-Scalar-Plain">permalink</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">/:title</span>
<span class="l-Scalar-Plain">exclude</span><span class="p-Indicator">:</span>
<span class="p-Indicator">-</span> <span class="l-Scalar-Plain">rakefile</span>
<span class="p-Indicator">-</span> <span class="l-Scalar-Plain">build.bat</span>
</code></pre></div>
<p>Používáme engine Kramdown, které funguje jak pro “portable Jekyll”, tak na Pages. O zvýraznění zdrojového kódu se stará <a href="http://pygments.org/languages/">Pygments</a> Vyňaté soubory jsou rakefile (který řeší patch pro UTF-8) a build.bat:</p>
<div class="highlight"><pre><code class="bat"><span class="k">call</span> ..\setpath.cmd
rake build
</code></pre></div>
<p>Rakefile:</p>
<div class="highlight"><pre><code class="ruby"><span class="n">task</span> <span class="ss">:build</span> <span class="k">do</span>
<span class="nb">puts</span> <span class="s1">'* Changing the codepage'</span>
<span class="sb">`chcp 65001`</span>
<span class="nb">puts</span> <span class="s1">'* Running Jekyll'</span>
<span class="sb">`jekyll build`</span>
<span class="k">end</span>
</code></pre></div>
<p>Build.bat používáme pro zkušební sestavení blogu ve chvíli, kdy si nejsme jisti tím, jak bude výsledek vypadat. Bat se postará o správné nastavení proměnných (setpath.cmd je součástí distribuce “portable Jekyllu”) a spustí rakefile. Ten nastaví správnou kódovou stránku a provede “jekyll build”.</p>
<p>Pokud chceme napsat nový článek, tak do adresáře _posts napíšeme nový soubor v syntaxi <a href="http://daringfireball.net/projects/markdown/">Markdown</a>, pojmenovaný dle Jekyllovské konvence datem vydání a webovou adresou, kterou bude soubor mít. Do něj zapíšeme metainformace (titulek, perex, rubriku) a samotný text.</p>
<p>Publikování pak proběhne pomocí trojice git add / git commit / git push. O vlastní vykreslení se postarají <a href="http://pages.github.com/">GitHub Pages</a>.</p>
<p>Obrázky stačí umístit do adresáře a odkázat na ně - když je nezapomenete zahrnout do commitu, tak se zkopírují jak jsou na výsledné stránky.</p>
<p>Je to trošku jiný přístup než s hostovaným blogovacím nástrojem, je to zhruba o úroveň níž, ale na náš záměr je to dostatečné. Navíc práce s Gitem je naším denním chlebem. Navíc, proč to nepřiznat, je to i <em>geekovina</em>. Ale je to především jednoduché, rychlé a “developers-friendly”.</p>
Pár švestiček ze zahrádky2013-08-27T00:00:00-07:00http://economia.github.io/par-svesticek-ze-zahradky<p>Naši dataři (pardon, správně to je <a href="http://ihned.cz/data/">Datablog</a> portálu <a href="http://ihned.cz/">IHNED.cz</a>) zastávají postoj: <em>Získáváme veřejně dostupná data, snažíme se, aby data byla otevřená, šťouráme do státu, aby je zveřejnil, takže je logické, že my je zveřejníme taky i se skripty.</em></p>
<p>Proto jsme se dohodli, že <x-tweetable title="Všechno, co na IHNED vzniká v rámci datové žurnalistiky, vydávají pod otevřenou licencí." data-hash="opensource">všechno, na čem nestojí náš "core business", vydáme pod nějakou otevřenou licencí</x-tweetable>. Jako nejvhodnější pro účely datové žurnalistiky se ukazuje licence <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cz/">CC BY-NC-SA 3.0 CZ</a>, tedy vždy uveďte autora, nevyužívejte dílo ani přidružená data komerčně a zachovejte licenci.</p>
<p>My z vývoje redakčních technologií občas přispějeme nějakou vizualizací v JavaScriptu (nebo LiveScriptu) nad daty, co připravila redakce. V takovém případě použijeme <a href="http://cs.wikipedia.org/wiki/Licence_MIT">licenci MIT</a>. </p>
<p>Společné pravidlo je: kódy otvíráme až poté, co příslušný článek vyjde na webu. Kódy nijak před otevřením nečistíme (nezlobte se, na to opravdu nemáme čas ani lidi). Pokud se vám tedy bude zdát, že vy byste to napsali líp, čistěji a <em>nezpraseně</em>, máte pravdu. :)</p>
<p>A co tedy nabízíme na <a href="https://github.com/economia">našem GitHubu</a>?</p>
<ul>
<li>Mapa znečištění - <a href="https://github.com/economia/mapa-znecisteni">zdroják</a>, články <a href="http://zpravy.ihned.cz/cesko/c1-60252090-znecisteni-ovzdusi-zdravi-deti">Benzoapyren je skrytou hrozbou pro děti. Podívejte se na mapu, kde všude na ně číhá</a>, <a href="http://vyhledavani.ihned.cz/109-60233000-on-ovzdu%9A%ED-00000S_d-dc">Ovzduší v Česku. Podívejte se, jak se změnil vzduch ve vašem okolí</a>, <a href="http://zpravy.ihned.cz/cesko/c1-60246650-znecisteni-ovzdusi-cesko-mapa">Mapa: Jak špatné ovzduší ovlivňuje zdraví. Jsme jako rozvojová země, říká odborník</a></li>
<li>Programová prohlášení - <a href="https://github.com/economia/programova-prohlaseni">zdroják</a>, článek <a href="http://data.blog.ihned.cz/c1-60386640-kdo-vic-mluvil-porovnejte-si-programova-prohlaseni-vsech-vlad-od-roku-1918">Kdo víc mluvil? Porovnejte si programová prohlášení všech vlád od roku 1918</a>.</li>
<li>Hospitalizace v ČR - <a href="https://github.com/economia/hospitalizace">zdroják</a>, článek <a href="http://data.blog.ihned.cz/c1-60430580-cechy-nejvic-trapi-srdecni-onemocneni-proc-jsou-v-nemocnicich-vasi-vrstevnici">Proč pobývají v nemocnicích vaši vrstevníci</a></li>
<li>Kriminalita v ČR - <a href="https://github.com/economia/kriminalita-v-cesku">zdroják</a>, články <a href="http://data.blog.ihned.cz/c1-60335790-zizkovu-a-libni-zdaleka-se-vyhni-kde-se-v-praze-nejvic-krade-znasilnuje-a-loupi">Žižkovu a Libni zdaleka se vyhni? Kde se v Praze nejvíc krade, znásilňuje a loupí</a>, <a href="http://data.blog.ihned.cz/c1-60416250-zlocin-v-brne-vice-kradezi-a-vloupani-mene-nasili">Zločin v Brně: Více krádeží a vloupání, méně násilí</a></li>
<li>Proklepni si svého poslance - <a href="https://github.com/economia/proklepni-si-sveho-poslance">zdroják</a>, článek <a href="http://data.blog.ihned.cz/c1-60478660-jak-aktivni-byl-vas-poslanec">Jak aktivní byl váš poslanec</a></li>
<li>Data z ČSFD a IMDB - <a href="https://github.com/economia/csfd">zdroják</a>, články <a href="http://data.blog.ihned.cz/c1-60473570-hodnoceni-reziseru-jak-je-vidi-cesi-a-jak-zbytek-sveta">Hodnocení režisérů</a>, <a href="http://data.blog.ihned.cz/c1-60456300-zeme-a-filmove-zanry-podivejte-se-kdy-a-kde-se-tocily-westerny-sci-fi-nebo-horory">Země a filmové žánry</a>, <a href="http://data.blog.ihned.cz/c1-60435830-cesky-filmovy-vkus-milujeme-dokumenty-a-skandinavii-nebavi-nas-psychologie-a-vychodni-blok">Český filmový vkus</a></li>
<li>Mapa moci - <a href="https://github.com/economia/mapa-moci-vizualizace">zdroják</a> a web <a href="http://ihned.cz/mapamoci">Mapa moci</a></li>
</ul>
<p>To je od nás pro tuto chvíli vše. Zajímal by vás zdroják něčeho, co jste viděli na IHNEDu? Dejte vědět! Pokud to půjde, uvolníme zdrojová data.</p>
České fonty2013-08-26T00:00:00-07:00http://economia.github.io/ceske-fonty<p>S písmem na webu to není tak úplně jednoduché. Sice technologie pokročila natolik, že technicky to není žádný velký problém, přesto zůstávají dva faktory, které je třeba vzít v úvahu.</p>
<p>Zaprvé: Fonty jsou autorské dílo, a pokud je chcete použít na svém webu, musí vám to licence dovolovat. Naštěstí existují knihovny fontů, které obsahují “licenčně čistá” písma.</p>
<p>Druhý problém je, že když najdete takové písmo, tak se dost často stane, že nemá pokryté české znaky. Proto pokud to jde, zkuste si v knihovně vypsat <a href="http://cs.wikipedia.org/wiki/Pangram">“příšerně žluťoučkého koně”</a>. Pokud knihovna nabízí “jazykové mutace”, hledejte češtinu nebo “Latin Extended”.</p>
<p>Pokud budete hledat, ušetříme vám práci - prošli jsme Google Fonts a vybrali <a href="http://bit.ly/17Y1OLV">kolekci písem s českými znaky</a>. (Vlevo si klikněte na Show collection only.)</p>
<p>Pro inspiraci můžete jít i na <a href="https://edgewebfonts.adobe.com/fonts">Edge Web Fonts</a> nebo <a href="http://www.fontsquirrel.com/">Font Squirrel</a>.</p>
Console v IE82013-08-13T00:00:00-07:00http://economia.github.io/console-v-ie8<p>Znáte to - po zuřivém ladění vám zůstane někde v kódu zapomenutý ladicí výpis, známé <em>console.log</em>. Nojo, však to není nic proti ničemu, komu by to vadilo… Jenže pak vás zavolá uživatel, že mu to vůbec nefunguje!</p>
<p>Přijdete, koukáte - a vidíte: Má IE8. Hmmm, nějaký problém s kompatibilitou. Spustíte tedy konzoli, načtete znovu - a vida, už to jede! Tak to vidíte, asi se něco špatně načetlo, zmáčkněte F5!</p>
<p>Jenže pak se to stane i dalšímu, a dalšímu, a vás přestane bavit chodit od čerta k ďáblu a spouštět konzole, a začnete přemýšlet, čím to asi může být. “Špatným načtením” to není. Zmizí to, když spustíte konzoli. Aha. AHA! <x-tweetable title="Podivuhodnou chybu může někdy způsobit zapomenutý console.log()">On totiž IE8 nemá objekt *console*, dokud tu konzoli neotevřete!</x-tweetable></p>
<p>Pomoc je snadná - vyházejte všechny console.log, na produkčním webu nemají co dělat.</p>
<p>A ti líní použijí tenhle <a href="https://github.com/h5bp/html5-boilerplate/blob/master/js/plugins.js">kousek z HTML5Boilerplate</a>:</p>
<div class="highlight"><pre><code class="javascript"><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">method</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">noop</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">methods</span> <span class="o">=</span> <span class="p">[</span>
<span class="s1">'assert'</span><span class="p">,</span> <span class="s1">'clear'</span><span class="p">,</span> <span class="s1">'count'</span><span class="p">,</span> <span class="s1">'debug'</span><span class="p">,</span> <span class="s1">'dir'</span><span class="p">,</span> <span class="s1">'dirxml'</span><span class="p">,</span> <span class="s1">'error'</span><span class="p">,</span>
<span class="s1">'exception'</span><span class="p">,</span> <span class="s1">'group'</span><span class="p">,</span> <span class="s1">'groupCollapsed'</span><span class="p">,</span> <span class="s1">'groupEnd'</span><span class="p">,</span> <span class="s1">'info'</span><span class="p">,</span> <span class="s1">'log'</span><span class="p">,</span>
<span class="s1">'markTimeline'</span><span class="p">,</span> <span class="s1">'profile'</span><span class="p">,</span> <span class="s1">'profileEnd'</span><span class="p">,</span> <span class="s1">'table'</span><span class="p">,</span> <span class="s1">'time'</span><span class="p">,</span> <span class="s1">'timeEnd'</span><span class="p">,</span>
<span class="s1">'timeStamp'</span><span class="p">,</span> <span class="s1">'trace'</span><span class="p">,</span> <span class="s1">'warn'</span>
<span class="p">];</span>
<span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="nx">methods</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">console</span> <span class="o">=</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">console</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">console</span> <span class="o">||</span> <span class="p">{});</span>
<span class="k">while</span> <span class="p">(</span><span class="nx">length</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">method</span> <span class="o">=</span> <span class="nx">methods</span><span class="p">[</span><span class="nx">length</span><span class="p">];</span>
<span class="c1">// Only stub undefined methods.</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">console</span><span class="p">[</span><span class="nx">method</span><span class="p">])</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">[</span><span class="nx">method</span><span class="p">]</span> <span class="o">=</span> <span class="nx">noop</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}());</span>
</code></pre></div>
Tuníme Sublime Text 22013-08-12T00:00:00-07:00http://economia.github.io/tunime-sublime<p><a href="http://www.sublimetext.com/">Sublime Text 2</a> je, věřte nebo ne, opravdu nejlepší textový editor pro vývojáře a kodéry. Rychlý, lehký a snadno upravitelný pomocí obří sady pluginů. Pokud jste zvyklí pracovat s IDE (Borland Pascal… ehm… tedy… Visual Studio, NetBeans, Eclipse, WebStorm, …), bude vám Sublime připadat strohý, ale ten, kdo si až dosud vystačil s (výborným) PSPadem, může shledat Sublime zajímavým.</p>
<p>Po instalaci je potřeba nainstalovat jako úplně první věc <a href="https://sublime.wbond.net/installation#st2">Package Manager</a>. Ten pak řídí stahování a instalaci dalších pluginů. Stačí stisknout Ctrl+Shift+P, napsat “Install packages”, a pak už jen vybírat. <x-tweetable title="Pár tipů na pluginy pro Sublime Text 2">Co jsme si nainstalovali my?</x-tweetable></p>
<h2 id="theme---nil">Theme - Nil</h2>
<p>Barevné schéma ve světlé i tmavé mutaci</p>
<h2 id="alignment">Alignment</h2>
<p>Dokáže zarovnat víc řádků pod sebou nejen podle prvního znaku, ale třeba tak, aby byly zarovnané znaky “=”</p>
<h2 id="all-autocomplete">All Autocomplete</h2>
<p>Automatické doplňování textu ze všech otevřených souborů</p>
<h2 id="clipboard-history">Clipboard History</h2>
<p>Pokud někdy kopírujete text, tak vám tenhle plugin ušetří mnohé hledání a “odkopírovávání” obsahu.</p>
<h2 id="dataconverter">DataConverter</h2>
<p>Pomůže s převodem CSV souborů do různých jiných formátů</p>
<h1 id="docblockr">DocBlockr</h1>
<p>Usnadňuje psaní dokumentace v syntaxi PHPDoc, JSDoc apod. Hodí se, když pak pracujete třeba s <a href="http://daux.io/">Daux.io</a></p>
<h2 id="emmet">Emmet</h2>
<p>Dříve ZenCoding. Urychlí psaní HTML a CSS</p>
<h2 id="encodinghelper">EncodingHelper</h2>
<p>Může se to zdát absurdní, ale i v roce 2013 stále existují weby, které nepoužívají kódování UTF-8. Třeba ten náš. Snažíme se používat UTF kde to jde, ale někdy musíme sáhnout i do oblastí, kde je stále Windows-1250. A pak potřebujeme EncodingHelper.</p>
<h2 id="expand-selection-to-quotes">Expand Selection to Quotes</h2>
<p>Pomůže vybrat text v uvozovkách</p>
<h2 id="git">Git</h2>
<p>Snazší integrace s Gitem. Marcel doporučuje následující nastavení:
{ “keys”: [“ctrl+’”, “ctrl+c”], “command”: “git_commit”},
{ “keys”: [“ctrl+’”, “ctrl+a”], “command”: “git_add_choice”},
{ “keys”: [“ctrl+’”, “ctrl+p”], “command”: “git_push”},
{ “keys”: [“ctrl+’”, “ctrl+q”], “command”: “git_quick_commit”},</p>
<h2 id="gitgutter">GitGutter</h2>
<p>Ukazuje v postranním proužku provedené změny proti poslednímu commitu</p>
<h2 id="livereload">LiveReload</h2>
<p>Soubor uložíte - a automaticky se v prohlížeči obnoví.</p>
<h2 id="origami">Origami</h2>
<p>Pomáhá s prací ve více panelech</p>
<h2 id="pretty-json">Pretty JSON</h2>
<p>Pokud pracujete, jako my, často s formátem JSON, oceníte formátování přes Ctrl+Alt+J</p>
<h2 id="sftp">SFTP</h2>
<p>Automaticky kopíruje změněné soubory na server přes (S)FTP/SCP</p>
<h2 id="sublimecodeintel">SublimeCodeIntel</h2>
<p>Inteligentní doplňování kódů</p>
<h2 id="sublimeonsavebuild">SublimeOnSaveBuild</h2>
<p>Při uložení provede build (u nás nejčastěji minifikaci skriptů a jejich překlad z LiveScriptu do JS)</p>
<h2 id="yui-compressor">YUI compressor</h2>
<p>Nejjednodušší způsob, jak minifikovat skripty a styly.</p>
Nervy v přímém přenosu2013-08-09T00:00:00-07:00http://economia.github.io/nervy-v-primem-prenosu<p>Ukazatel aktuálního stavu hlasování byl momentální nápad našeho šéfeditora. Hlavní vtip byl v tom, že měl ukazovat výsledek v reálném čase, bez nutnosti obnovovat stránku. Slíbili jsme, že se podíváme, co můžeme udělat…</p>
<p>Bylo jasné, že s AJAXem nevystačíme a že bude potřeba použít nějaké websockety či podobnou technologii. Použili jsme knihovnu <a href="http://socket.io/">Socket.io</a>, která dokáže jako fallback k websocketům použít jiné metody, třeba comet nebo přinejhorším AJAXový heartbeat. Navíc nabízí velmi jednoduché rozhraní pro příjem zpráv, jejich vysílání i “broadcast”, tedy vyslání všem naslouchajícím.</p>
<p><img src="/images/rusnok.jpg" alt="Měřák" /></p>
<p>Bylo tedy jasné, že na serveru poběží Node.js, který pomocí <a href="http://socket.io/">Socket.io</a> obslouží připojené čtenáře a bude jim posílat data o aktuálním stavu hlasování. Na klientu bude vizualizace, která se připojí k Node serveru a zobrazí ukazatel. Rozhraní bylo poměrně jednoduché - natáčení ručičky pomocí CSS transformací, jednoduchá logika, která zajišťovala chvění ručičky, a vlastní mechanismus, zajišťující připojení na server.</p>
<p>Aby měl server co vysílat čtenářům, musel ho někdo krmit daty - k tomu sloužila jednoduchá HTML stránka se seznamem poslanců a tlačítky PRO - PROTI - ZDRŽEL SE - CHYBÍ. Tahle stránka se připojovala taky na server a posílala data o stavu hlasování; server pak jen zajistil vysílání (“broadcasting”).</p>
<p>A co se stane v případě, že se člověk, který kliká na tlačítko, uklikne? Když přeslechne, jak poslanec hlasoval? Co se stane, když spadne server? Druhý pokus nemáme. Na celou akci máme pár minut, a pak bude po všem. Takže jsme určili dva “plniče”, kteří seděli u stránky se seznamem poslanců. Jejich seznamy byly synchronizované (zase přes websocketí server). Logicky jsme použili i dva servery - “plnící” stránky posílaly svoje zprávy na oba servery, klienti se náhodně připojili na jeden ze dvou serverů. Pokud se spojení zaseklo, klient zkusil automaticky po nějakém čase druhý server.</p>
<p>Nejprve jsme spustili (v pondělí odpoledne) jeden server a na chvíli na domovskou stránku nasadili kód, který otestoval spojení. Vše fungovalo bez problémů. Ze serveru jsme vytvořili image a připravili se, že jej naklonujeme. Mezitím probíhalo ladění designu měřidla.</p>
<p>V úterý jsme otestovali plnění dat a jejich následnou vizualizaci v podobě “kostiček”. Stál jsem v newsroomu, četl seznam poslanců a říkal jsem “Pro návrh - proti návrhu” stále dokola.</p>
<p>V úterý v podvečer jsme měli hotový design a spustili jsme druhý server ze stejné šablony.</p>
<p>Ve středu ráno jsme zjistili, že server stále ještě startuje. Nahlásili jsme problém na hotline, a tam zjistili, že se image nevytvořila správně. Nainstalovali jsme tedy druhý server “na zelené louce”, nastavili potřebný software, nahráli skripty a sledovali přenos ze sněmovny. </p>
<p>Když bylo jasné, že se hlasovat během dopoledne nebude, zkusili jsme celý systém ještě jednou. Znovu jsem stál, četl jména poslanců, říkal za každým “Pro návrh” a “Proti návrhu” a všichni okolo sledovali, jestli se ručička hýbe i na mobilech, tabletech a jiných prohlížečích. Pokus dopadl velmi dobře, od stisknutí hlasovacího tlačítka do započítání hlasu uplynuly řádově desetiny sekundy.</p>
<p>A pak jsme čekali. A čekali. A čekali. Připravení na okamžik, až se “přistoupí k hlasování”. V ten okamžik jsme nahodili měřidlo na titulní stránku a první klienti se začali připojovat.</p>
<p>Ukazatel počtu připojených klientů uspokojivě rostl, ale lehce podezřelé bylo, že rostl nerovnoměrně - zhruba v poměru 2:5. Když na serveru 1 bylo 400 lidí, na serveru 2 jich bylo 1000. A pak se server 2 zhroutil. Newsroomem obcházelo strašidlo infarktu: <em>Proč, proč, co se děje?</em> U mnohých klientů se ručička zastavila. Každá sekunda trvala celou věčnost. Automatika po deseti sekundách začala přepojovat uživatele na první server, takže se postupně ukazatele zase rozjely, ale server 2 stále ležel. Příčina? Zapomenutý <em>ulimit</em>, který způsobil zahlcení systémových zdrojů. Na serveru 1 byl nastavený, bohužel neproběhlo klonování a při ruční instalaci serveru 2 jsme na to zapomněli jako na smrt. </p>
<p>Po odhalení příčiny jsme server okamžitě nahodili a hlasování dojelo už bez problémů. Po odhlasování jsme vzali data (pole s 200 hodnotami), spojili je se jmény poslanců, které připravila redakce, a vydali “kostičky”.</p>
<p><img src="/images/rusnokostky.jpg" alt="Kostičky" /></p>
<p>Ve špičce jsme měli připojeno 1600 uživatelů najednou. Nakonec to, díky politickým zákulisním hrám, nebyla tak jednoznačná záležitost, jak jsme si představovali, takže sledování ručičky bylo docela dramatické. Systém zvládl i výpadek jednoho serveru, což je dobrá zpráva. (Ano, víme, byla to školácká chyba, ale komu se nikdy taková nestala, ať první hodí monitorem!) Pro příště víme, že to zvládneme, a taky že nesmíme zapomenout na ulimit!</p>
<p>Pro zájemce <a href="/dl/rusnometr.zip">zdroják ke stažení</a></p>
Co dělají redakční vývojáři2013-08-07T00:00:00-07:00http://economia.github.io/co-delaji-redakcni-vyvojari<p><a href="http://ihned.cz" title="Zpravodajský server Hospodářských novin">IHNED.cz</a> má několik vývojářských týmů. Jeden se stará o přípravu šablon a integraci s redakčním systémem. Pod jejich kompetenci spadá například vývoj
e-shopu či redesign celých webů. Druhý tým se stará o mobilní aplikaci a iOS verzi. My jsme tým redakčních vývojářů a naším úkolem je být k ruce redakci a vyvíjet
věci podle aktuální potřeby, jejichž vývoj by byl “standardním způsobem” pomalý. A v novinách platí - buď je to rychle, nebo vůbec. Krom toho se vydáváme za hranice běžného fungování redakčních systémů a každodenní kodérskou rutinu.</p>
<p>Náš tým je nový, vznikl před necelými dvěma měsíci, a jedna z prvních věcí, na které jsme dělali, byla <a href="http://data.blog.ihned.cz/c1-60046610-animace-jak-velka-voda-postupovala-ceskymi-rekami">povodňová mapa</a>. To je typická “datažurnalistická” věc, která se skládá ze dvou částí - nejprve je třeba sehnat surová data, ideálně strojově, pak je zpracovat a vytvořit nástroj pro jejich zobrazení. Pro zobrazování podobných mapových vizualizací používáme knihovnu <a href="http://leafletjs.com/">Leaflet</a>. Frontend je napsaný v JavaScriptu a HTML. Stahování a zpracování dat jsme zařídili jednoduchým skriptem, napráskaným <em>ad hoc</em> v PHP.</p>
<p>Jen co přes nás přešly povodně, přišlo zatýkání na Úřadu vlády. (Kuriozita je, že v ten samý den jsme si pozvali <a href="http://karmi.cz/">Karla Minaříka</a>, aby nás proškolil v používání Gitu. Bohužel jsme v půlce školení museli začít řešit aktuální situaci.) Během několika hodin vznikly dlaždice, které vidíte na titulní straně <a href="http://ihned.cz" title="Zpravodajský server Hospodářských novin">IHNED.cz</a> vpravo vedle <em>otvíráku</em>. K nim jsme si napsali i editor, který umožňoval redaktorům měnit obsah podle toho, jak se vyvíjela situace. Vzhledem k tomu, že náš redakční systém není zrovna pružný, tak jsme zvolili současný způsob, tj. nezávislý IFRAME.</p>
<p>Během krize měly dlaždice víc pater, pak se snížily, ale jako formát zůstaly. V těchto dnech pracujeme na jejich redesignu a rozšíření pro více typů informací, protože se ukázalo, i z ohlasů čtenářů, že jde o oblíbený formát. Zejména videokomentáře si čtenáři pochvalují a volali po zpřístupnění <a href="http://dialog.ihned.cz/videokomentare/">archivu</a>.</p>
<p>Při krizi jsme dělali i <a href="http://data.blog.ihned.cz/c1-60105930-kdo-co-a-s-kym-sit-vztahu-ktera-ukoncila-politickou-drahu-petra-necase">mapu vztahů</a>. Vizualizace zajišťuje knihovna <a href="http://d3js.org/">D3</a> a data jsou uložena v tabulce v Google Docs. Původně jsme pro čtení dat z těchto tabulek používali JS knihovnu, ale časem se ukázalo, že se jedná o velmi pohodlný způsob publikace dat, tak jsme napsali nejprve vlastní proxy, která se proměnila v komplexní službu, jež nám umožňuje načíst data z tabulek v GDocs a transformovat je na nějaký použitelný formát (JSON, JSONP). Dnes vyšla <a href="http://zpravy.ihned.cz/politika/c1-60386340-grafika-hlasy-proti-rusnokovi">“stojednička”</a> - vizualizace je jednoduchá a využívá opět zdrojové tabulky v Google Docs, podobně jako další tabulky v článcích. Z týchž tabulek čerpají informace i další naše vizualizace - třeba <a href="http://ihned.cz/zemanovavlada">Zemanova vláda</a> nebo <a href="http://ihned.cz/mapamoci">Mapa moci</a>.</p>
<p>Asi největší práci dalo zpracování <a href="http://ihned.cz/mhd">dojezdové mapy MHD</a>. Samotný zobrazovací engine není příliš složitý; problém byl s množstvím dat. V Praze je okolo 3000 zastávek MHD. My jsme měli k dispozici jízdní řády pro jednotlivé zastávky - tedy to, co vidíte na zastávce vylepené ve vitrínce. Z těchto údajů jsme museli propočítat, jak dlouho vám bude trvat cesta z jedné každé stanice do všech ostatních. A to všechno několikrát - pro špičku, pro prázdniny, pro provoz mimo špičku. Totéž pro loňský rok. Kolega Marcel odhaduje, že se jednalo o víc než 3 miliony výpočtů. Tohle počítat na lokálních počítačích je vyložený nesmysl, který by i na našich výkonných strojích trval několik měsíců, takže jsme využili sílu cloudu a nasadili paralelní výpočet na stovce virtuálních počítačů u Amazonu.</p>
<p>Pro <a href="http://data.blog.ihned.cz/c1-60335790-zizkovu-a-libni-zdaleka-se-vyhni-kde-se-v-praze-nejvic-krade-znasilnuje-a-loupi">mapu kriminality</a> jsme zase potřebovali zjistit souřadnice policejních okrsků. Policie ČR nám sice poskytla data o tom, které adresy patří pod kterou služebnu, ale geografické zaměření bylo na nás. Z ČÚZK jsme získali informace o všech zaměřených adresních místech v ČR, kterými jsme nakrmili databázi, a pak jsme pro všechny policejní okrsky zjišťovali, jaké domy pod něj spadají a jaké mají souřadnice. O týden později jsme si to zopakovali i pro Brno, kde jsme měli situaci veselejší o to, že některé ulice nejsou ani zaměřené. U jiných jsou hranice okrsků popsány stylem: “Ulice Vondráčkova, čísla 1, 3, 7 a 11”, “Ulice Veverkova kromě čísel 5, 7 a 9” nebo “Ulice Kosmonautů, pouze sudá čísla”.</p>
<p>Právě teď čekáme na zahájení hlasování v PSP ČR o důvěře Rusnokově vládě. V tomto hlasování máme pokusné želízko v ohni - live ukazatel aktuálního stavu. Navenek je poměrně nenápadný, uvnitř jej ale pohání <a href="http://socket.io/">Socket.io</a>, který dokáže v reálném čase komunikovat se skriptem ve vašem prohlížeči. Výsledek uvidíte na titulní stránce <a href="http://ihned.cz" title="Zpravodajský server Hospodářských novin">IHNED.cz</a> po dobu hlasování.</p>
<p>To jsou tedy věci, které připravil a zveřejnil náš tým - tým redakčních vývojářů IHNEDu. <em>Stay tuned</em>, budeme se těšit.</p>
Vývojářský blog?2013-07-26T00:00:00-07:00http://economia.github.io/prvni-prispevek<p>Tak určitě, není to žádná převratná myšlenka, vždyť jich je dvanáct do tuctu.
Proč tedy další? A kdo vůbec jsme?</p>
<p>Jsme lidi, co připravují v Economii nejrůznější speciály a redakční nástroje pro <a href="http://ihned.cz" title="Zpravodajský server Hospodářských novin">IHNED.cz</a>. Ne, naší starostí
není redakční systém, my se nestaráne ani o sociální sítě ani o moderaci komentářů. Naši práci uvidíte především na
nestandardních “pikoškách”, jako je třeba <a href="http://ihned.cz/mapamoci">Mapa moci</a> nebo <a href="http://ihned.cz/zemanovavlada">Zemanova vláda</a>.</p>
<p>Naše práce je specifická tím, že děláme “rychloobrátkové zboží”. Nemáme na každou věc týdny času. Většina vizualizací vzniká v řádu několika málo dnů, kdy je potřeba všechno připravit, napsat a publikovat. Výsledek musí být funkční a pochopitelný, ale nemusí být naprosto perfektní, stačí <em>good enough</em>. Primárním cílem naší práce je <em>exekuce</em> - tedy dotáhnout věc do konce a publikovat ji. Na druhou stranu nás nemusí pálit dlouhodobé rozvíjení jedné služby…</p>
<p>Takový styl práce má svoje specifika. Věci musí být jednoduché, rychle napsané, i za cenu hacků, ale na druhou stranu musí být znovupoužitelné, takže pokud možno univerzální. Když máme možnost něco “napráskat” rychle v nějaké knihovně, tak to uděláme, i když to nebude stoprocentní - ale pokud si máme vybrat mezi vypiplaným řešením, které budeme psát dva týdny, a funkčním řešením, co máme za dva dny venku, bereme vždy to druhé.</p>
<p>Při práci používáme především JavaScript a jeho knihovny. <a href="http://jquery.com/">jQuery</a>, <a href="http://d3js.org/">D3</a>, <a href="http://leafletjs.com/">Leaflet</a>, to je náš denní chleba. K tomu třeba <a href="http://twitter.github.io/bootstrap/">Twitter Bootstrap</a>. Sledujeme samozřejmě novinky v oboru - poslední věc, na kterou jsme se koukali, je <a href="http://bower.io/">Bower</a>. Místo JavaScriptu někteří používají <a href="http://livescript.net/">LiveScript</a>, čisté CSS nahrazují <a href="http://learnboost.github.io/stylus/">Stylusem</a>… Testujeme v <a href="http://qunitjs.com/">qUnit</a> a používáme <a href="http://livereload.com/">Live Reload</a>. Verzujeme Gitem a používáme k tomu GitHub a BitBucket.</p>
<p>Na serverech používáme taky různé technologie. Něco v Pythonu, něco v PHP, kolegové “dataři” mají na své experimenty v jazyce R spuštěný Shiny server… Před tím vším jsou předsazené proxy na nginx. Databáze je jednak klasická MySQL, ale na některé věci se nám víc hodí <a href="">Redis</a> nebo <a href="http://www.neo4j.org/">neo4j</a>.</p>
<p>Většina z nás píše v <a href="sublimetext.com">Sublime Text 2</a>, který jsme si <em>vytunili</em> pár pluginy, což by mohlo být téma na příští zápisek.</p>
<p>O čem tady budeme psát? O věcech, na které jsme přišli při práci, o zajímavých technologiích, které jsme objevili, o nápadech, co šly okolo, a v neposlední řadě o našich vlastních knihovnách, které nám vzniknou pod rukama a které dáme ven k použití (pod nějakou BSD-like licencí, nebojte se GPL).</p>
<x-tweetable title="Vývojáři z redakce IHNED.cz mají vlastní blog">Doufám, že to bude i pro vás zajímavé čtení.</x-tweetable>