Jedenbod.cz

Seznam.cz prohlížeč

Mon, 22 Dec 2014 10:37:38 +0100

Nejspíše vám neuniklo, že Seznam.cz oznámil vydání vlastního prohlížeče. Zajímavé je, že nejde o přebarvený Chrome/Firefox, ale o vlastní prohlížeč. Na české poměry poněkud nezvyklý projekt. Podíváme se, z jakého je těsta a co umí.

Seznam.cz prohlížeč po spuštění

Prohlížeč je dostupný jak pro desktop Windows/Mac, tak i pro Android a brzy i iOS. Zaměřím se na Mac verzi.

Jádro aplikace je postaveno na node-webkit - tudíž se jedná o vykreslovací jádro Blink - de facto shodné s aktuální verzí Google Chrome, což potvrzuje i HTML5 Test. Dobrou zprávou je, že uživatelům budou fungovat všechny moderní vychytávky.

Jak vůbec fungují node-webkit aplikace? Mají v zásadě 2 vrstvy:

Blink (webkit) jádro, díky kterému máte k dispozici všechny současné možnosti HTML5 (jako např. WebGL, WebSQL, WebRTC…) k vytvoření aplikace. Samozřejmostí je podpora všech JS frameworků. Pracujete s klasickým DOMem, jakoby se jednalo o normální webovou aplikaci.
Integrace s Node.js, které se může starat o nižší věci jako integrace se systémem (např. zápis do registrů) nebo práce se soubory aj.

Node-webkit aplikace se skládají z HTML a JS souborů, takže se můžeme podívat jak vypadá inicializační stránka init.html:

Zde jsou moduly, které slouží jako globální objekty pro celý proces (historie, nastavení, autoupdate prohlížeče atd.). Lze vidět, že se při startu načítá i několik modulů, které ještě nejsou v současné verzi (1.0.3) jako: synchronizace hesel, načítání favicon, registrace (?). Občas narazíte i na podivné kusy kódu jako:

Favicon.Find.prototype.$constructor = function(data){
        if(data.favicoUrl=="http://www.minorit.com/favicon.ico"){ // wat?
            this.error(data)
        }else{
            // ...
            // generování náhledu favicony
            // ...
        }
    };

Zajímavější kód najdeme na stránce nového (aplikačního) okna win.html. Zaprvé: Seznam prohlížeč nevyužívá UI z node-webkit (které vypadá zkrátka jako defaultní prohlížeč), ale místo toho implementuje celé uživatelské rozhraní pomocí AngularJS (s rozdílným CSS pro Windows a Mac, aby ovládací prvky odpovídaly platformě).

Jak vidíte, je to vcelku rozsáhlá aplikace. Nechal jsem zdrojové kódy projet nástrojem Plato pro analýzu JS kódu a výsledkem (po vynechání knihoven) je 12588 řádků s průměrem 143 řádků na soubor. Projevuje se, že aplikaci nejspíše psalo více týmů, které se neshodly, protože chybí jednotný styl zápisu. Používají se různé typy komentářů - většina funkcí je však úplně nekomentovaná. Občas se používají $constructory, občas ne. Občas se používá JAK, občas ne. Což se poté projevuje na JSLint chybách. Nejspíše se tlačilo na vydání k určitému datu.

Jak jsem říkal, celé UI je vybudováno přes AngularJS, takže máte přístup i k Developer toolbaru (ctrl+shift+j) můžete se podívat, jak vše funguje. Většina ovládacích prvků je řešena přes Angular direktivy, místo UI routeru se používají node-webkit okna.

Samotná okna stránek využívají node-webkit nw.gui.window - což je speciální iframe, který umí několik triků - jako fejkování window.top, ignorování X-FRAME-OPTIONS (takže lze do iframe načítat i stránky, které to obvykle nepovolují) nebo oddělení od node-webkit, aby stránka nemohla přebrat kontrolu nad celou aplikací. Což se hned po vydání úplně nepovedlo. Stačil tento kód:

nwDispatcher.requireNwGui().Window.get().eval(null, "alert(nwDispatcher.requireNwGui().Window.get().window.localStorage.favorites)");

https://twitter.com/jedenbod/status/544679528715804672

Seznam.cz dále vyzdvihuje bezpečnost prohlížeče - což dokazuje tím, že zakázal doplňky (nikdo snad adblock nečekal). Jenže tento prohlížeč je dle mého zatím jeden z nejnebezpečnějších, který si můžete nainstalovat. Část z jeho zranitelnosti vyplývá ze samotné platformy node-webkit. Tak například to, že jednotlivé záložky nejsou sandboxované, takže vám v systému běží jeden proces, ale jakmile ho sestřelíte, například tímto JS kódem na stránce, tak přijdete o všechny záložky.

var a = "a";
    while(1){
        a = a += "a";
    }

Například v Chrome, díky sandboxu vás pád jedné neohrozí a ostatní záložky bez problému fungují dále.

Chrome Sandbox

Ale tím největším nebezpečím, na které jsem v současné verzi Seznam.cz prohlížeče narazil, je neomezený přístup k uživatelským datům. Přes HTML5 API, má stránka přístup k webkameře, mikrofonu atd. Prohlížeč na to nijak neupozorní, ani uživatele nevyzve k potvrzení přístupu.

Takže zatímco ve všech ostatních prohlížečích JavaScript čeká, zdali dostane povolení k přístupu k webkameře, Seznam.cz prohlížeč ho automaticky stránce vydá, aniž by něco řekl. A pokud vás na to neupozorní něco jiného (software webkamery, dioda na stroji), tak to ani nezjistíte.

~~Takže stránka může na pozadí dělat screenshoty, zatímco si ji čtete. Což tato stránka dělá, pokud si ji čtete v Seznam.cz prohlížeči :)~~

Přístup k getUserMedia je podle všeho už opravený

Stejně snadno stránka vydá vaši pozici přes HTML5 geolocation API. Stažení prohlížeče je omezeno pouze na uživatele v České republice - otázkou je, jestli vycestování za hranice zablokuje automatické aktualizace, což by mohlo znamenat ještě další bezpečnostní riziko.

Webkit/Blink jádro samo o sobě uživatele chrání před různými typy útoků - ale implementace v node-webkit některé věci obchází pro snadnější vývoj desktop aplikací. Tak například můžete simulovat click pro jakýkoliv element. Třeba filepicker s display:none, což je věc, kterou vám žádný jiný prohlížeč nepovolí (z dobrých důvodů). Seznam prohlížeč poslušně otevře dialog pro výběr souborů, aniž by ho uživatel nějak inicializoval. A takovýchto změn je bohužel vcelku dost.

Verdikt: jedná se o nebezpečný, nedokončený produkt a jeho vydání je spíše hrozbou pro uživatele, než zárukou bezpečí a rychlosti. Jeho spásou můžou být rychlé a časté aktualizace, ale Seznam má co dohánět.

Úvod do SVG

Fri, 28 Nov 2014 13:09:18 +0100

Video mé prezentace na srazu Frontendisti.cz - Úvod do SVG.

Knihovny třetích stran v Angularu

Sat, 22 Nov 2014 20:31:34 +0100

Při stavění Click and Study s Digital Wizards jsem narazil na to, že moje Angular aplikace závisela na hned několika knihovnách 3. strany. Firebase, Facebook SDK, Keen.io, Recurly atd.

Žádná z nich není nutná pro start aplikace, takže nemá smysl je přidávat hned na začátku nebo je mít součástí build procesu. Angular takovou funkci defaultně nemá, takže si musíme vytvořit vlastní službu.

Minimální řešení

Vždycky rád začínám s minimálním řešením/mockem, abych vůbec věděl, jak ho budu používat.

Každou knihovnu budeme chtít načíst pouze jednou, což zajistíme tím, že budeme kontrolovat, jestli už je v okně zaregistrován její globální objekt, načež spustíme callback. Nevyužívám $document, protože neumí createElement a volání přes angular.element se mi moc nelíbil.

/**
     * Load JavaScript file, if his global name isn't registered already
     * @param  {string}   scriptUrl   URL to JS file
     * @param  {string}   nameToCheck Name that should be checked in global scope
     * @param  {Function} callback    Callback function on success
     */
    app.service("loadJS", function($window) {
    	return function(scriptUrl, nameToCheck, callback) {
    		if(typeof $window[nameToCheck] !== "undefined") {
    			return callback();
    		}

    		var script = document.createElement("script");
    		script.src = scriptUrl;
    		script.onload = callback;
    		document.head.appendChild(script);
    	};
    });

Použití je potom přímočaré:

loadJS("//cdn.firebase.com/js/client/1.0.21/firebase.js", "Firebase", loadNotifications);

Jenže, pro takovéto asynchronní operace se více hodí promise a Angular služba $q.

Řešení s $q

Předělání na promise je jednoduchá záležitost. Navíc získáme jednodušší error handling a možnost navazovat další větve s konstruktem .then(). Takže je například jednodušší načíst knihovnu, inicializovat a až potom použít.

/**
     * Load JavaScript file, if his global name isn't registered already
     * @param  {string}   scriptUrl   URL to JS file
     * @param  {string}   nameToCheck Name that should be checked in global scope
     * @return {promise}              Promise
     */
    app.service("loadJS", function($q, $window, $log) {
    	return function(scriptUrl, nameToCheck) {
    		var deferred = $q.defer();

    		if(typeof $window[nameToCheck] !== "undefined") {
    			deferred.resolve();
    		}

    		var script = document.createElement("script");
    		script.src = scriptUrl;
    		script.onload = function() {
    			deferred.resolve();
    		};
    		script.onerror = function(e) {
    			$log.warn("Failed to load script: " + e.target.attributes[0].value);
    			deferred.reject(e);
    		}
    		document.head.appendChild(script);

    		return deferred.promise;
    	};
    });

Což nám umožní knihovny volat takto:

loadJS("//cdn.firebase.com/js/client/1.0.21/firebase.js", "Firebase")
    	.then(setupFirebase)
    	.then(loadNotifications)
    	.catch(function(e) {
    		console.warn("Failed to load script: " + e.target.attributes[0].value);
    	});

Unit test

Jasmine test pro $q je také skoro přímočará záležitost. Stačí si jen dát pozor na to, že Angular dělá resolve při $rootScope.$apply(); a že zaregistrování onerror chyby potřebuje obalit vyhodnocení do setTimeout()

describe('loadJS service', function () {
        var $scope,
            loadJS,
            $window,
            handler,
            controller;

        beforeEach(function () {
            module('app');

            inject(function(_$q_, $rootScope, _$window_, $controller, _loadJS_) {
                handler = {
                    thenPromise: function() {},
                    catchPromise: function() {}
                };
                loadJS = _loadJS_;
                $window = _$window_;
                $scope = $rootScope.$new();
                controller = $controller('mainController', {
                    '$scope': $scope
                });
            });
        });

        it('Service loaded', function () {
            expect(loadJS).toBeDefined();
        });

        it("Reject promise", function(done) {
            spyOn(handler, "catchPromise");
            loadJS("xxx", "TEST") // this should throw onerror call
                .catch(handler.catchPromise);
            setTimeout(function() { // let's wait for deferred call, so code coverage is happy
                $scope.$root.$apply();
                expect(handler.catchPromise).toHaveBeenCalled();
                done();
            });
        });

        it("Resolve promise", function() {
            spyOn(handler, "thenPromise");
            $window.TEST = true;
            loadJS("http://example.com/script.js", "TEST")
                .then(handler.thenPromise);
            $scope.$root.$apply();
            expect(handler.thenPromise).toHaveBeenCalled();
        });
    });

Tento test také zajistí 100% code coverage v Istanbulu.

HTML5 video na responsivním webu

Sun, 05 Oct 2014 14:37:08 +0200

Záznam z mé prezentace na srazu Frontendisti.cz o <video> elementu.

Hacktivisté, hackeři a ti ostatní

Wed, 26 Dec 2012 14:07:36 +0100

Při úklidu jsem našel něco, co původně měl být základ mé bakalářky. Jedna z posledních částí. Možná se to někomu bude hodit - shrnuje hacktivismus, LulzSec apod.

Plný text s odkazy a obrázky na konci.

Hacktivismus není vždy o “hacku”. DDoS útok není hack jako takový. Jak se v roce 1998 vyjádřil člen cDc “Omega” při popisu NetStrike: použil termín “virtual sit-in”. Ale připojit se k DDoS útoku nevyžaduje téměř žádné technické znalosti. Což je na jednu stranu pozitivum pro organizátory DDoS, díky jednoduchým nástrojům jako LOIC se může zapojit co nejvíce lidí (což je pointa). Na druhou stranu nízký práh vede v digitálním světě k slacktivismu. Mám pocit, že slacktivismus bude velmi brzy důležitější termín, než samotný hacktivismus.
Když jsem na začátku psal o tom, že být digitálním aktivistou bude znamenat více, než psát protivládní blog a přispívat na uzavřené fórum - má tento jev i druhou stranu. Hacktivismus v dnešní podobě počítá s účastí širší digitální veřejnosti. Proto dochází ke zjednodušování témat a jejich převodu na lépe stravitelné a šiřitelné myšlenky. Heslovitost se stává hybatelem - myslím, že pro vývoj internetu blízké budoucnosti se musíme blíže podívat na to, jak fungují např. internetové memy a virální videa. Musíme více vnímat propojení politiky a marketingu.

Když se podíváme na výše zmíněné události, uvidíme, že kolem všech se vybudoval velmi jednoduchý étos a příběh o boji za pravdu (Wikileaks) spravedlnost (#occupy a protesty proti SOPA/PIPA) a svobodu (Arabské jaro). Jednoduché příběhy - avšak jen na pohled, protože všechny z nich přesahují internet. Stejně tak #occupy protesty stojí za změnu, avšak neví jakou.
Hacktivismus se snaží nostalgicky napodobovat hackerskou symboliku: LulzSec používali ve svých zprávách ASCII art. Často se také odkazovali k Anonymous. Dříve však Anonymous byla spíše myšlenka, společný a prázdný virtuální štít, který byl právě díky své prázdnotě tak stěží uchopitelný. Neexistovalo žádné „patřit do Anonymous“ - všichni byli Anonymous, jak říká heslo ‚WE are Anonymous‘. Dnes se o Anonymous hovoří jako o skupině. Někdo může patřit k #AntiSec, ale nepatřit k Anonymous.
K současnému hacktivismu dnes velmi často patří populistické slogany a jejich tupé opakování. A hlavní témata? Desítky let stará hesla o svobodě informací. Současný západní hacktivismus, ačkoliv prezentován jako mladý prvek na politické scéně (někde se tak daleko zatím nedostal), je neprogresivní plácání se v bezpečném rybníčku digitálních práv. Je to hraní na hrdiny a padouchy. Jeho autenticita pramení pouze z toho, že pochází z temně vypadajících krajin hackerství, které si pouze půjčuje. Je to de facto populární zábava. Slacktivistická hra na politiku.

Kyberválka ve veřejném prostoru (PDF)

Mobyklik - Sklik pro iPhone, iPad, Android i desktop

Tue, 28 Aug 2012 14:37:18 +0200

Mobyklik se naučil vypisovat reklamy a pracovat s dalšími systémy. Takže je nyní otevřený nejen iOS, ale i Androidu, Windows Phone, ale hlavně desktopům.

mobyklik.jedenbod.cz

Mobyklik - mobilní aplikace pro Sklik

Sun, 12 Aug 2012 12:21:48 +0200

Sklik.cz nemá mobilní verzi? Ani žádnou aplikaci?

To už není pravda:

mobyklik.jedenbod.cz

O aplikaci

Aplikace využívá Sklik API.
Zatím funguje pouze na iOS. Android musím nejdříve ještě otestovat (pokud mi chcete pomoc s testováním, ozvěte se)
Více na webu

In Google, no one can hear you scream

Tue, 15 May 2012 18:51:39 +0200

Google’s Chrome Browser Is Coming For iOS, Says Macquarie

[caption id=”attachment_1456” align=”aligncenter”] Google Chrome for iOS Beta[/caption]

Google zbožňuje webaplikace…

Noční můra

Wed, 09 May 2012 22:23:08 +0200

If my nightmare is a culture inhabited by posthumans who regard their bodies as fashion accessories rather than the ground of being, my dream is aversion of the posthuman that embraces the possibilities of information technologies without being seduced by fantasies of unlimited power and disembodied immortality, that recognizes and celebrates finitude as a condition of human being, and that understands human life is embedded in a material world of great complexity, one on which we depend for our continued survival. Hayles, N. Katherine (1999-02-15). How We Became Posthuman: Virtual Bodies in Cybernetics, Literature, and Informatics (Kindle Locations 283-287). University of Chicago Press - A. Kindle Edition.

Nějakou dobu jsem vymýšlel distribuovanou úložnou síť. Síť, která by respektovala naše zklamání hypertextem.

Zklamání

Hypertext je skvělý. Ať už myslíme odkaz encyklopedistů nebo Bushův memex. Ale jsme s ním v koncích. Zkracovače URL zde nebudou věčně. Odkazy přestanou fungovat. Nemluvě o informacích na uzavřených sítích, které vyhnijí dříve, než je bude někdo schopen zaindexovat. O problémech a nástinu řešení jsem se už zmínil v článku o sociálním webu.

Na jednu stranu se jedná o úžasnou příležitost pro kybertext - kulturní obsahy se odehrávají pouze v jednom momentu - fluxu. Nový text vzniká i samotným čtením, participace je otevřená, můžeme narazit na komunity, které se definitivně zbavily autora. Bezbřehá textualita - na internetu nic nekončítm. I Odysseus má konec. Umíráme na bezbřehou souvislost. Ničíme se na neustálém individuálním kopírování. Kopírujeme si osobnosti ((paranoia v sociálních sítích)).

Mamray

Představuji vám Mamray - absolutní platforma sdílení lidských dat. Decentralizovaná, bezpečná, neomylná. Služby jako Pinterest možná ukazují cestu - embedování informace. Kopírování nic neznamená. Je přečtení bráno za vytvoření kopie? Technicky ano, jakýkoliv _text _se někam nakopíruje. Alespoň do RAM. Každý přístup znamená kopii. Která sice zmizí, ale možná nemusí.

[caption id=”attachment_1422” align=”aligncenter” width=”570”] Everything is a copy of a copy of a copy.[/caption]

Proč Haylesová na začátku? Jestliže díky cloudu přestáváme být závislí na fyzickém stroji (( vždyť i Windows 8 bude v základní verzi obsahovat synchronizaci přes SkyDrive. Po přihlášení na jiném PC se vám přenesou soubory z cloudu. )) Dostáváme se zpět k terminálové technologii. Nezáleží nám na fyzické stránce našeho virtuálna. Je načase přestat být závislý na informacích. Přestat kopírovat kopírované. Nemít možnost remixovat. Zapomínat. Absolutní datový systém Mamray počítá s vytvořením lidského informačního fondu. Memetický genofond. Transcendentální systém pro cestování věděním a časem. Veškeré informace a zdroje jsou decentralizovaně a rozeseté po síti. Jedná se o nový informační věk.

Funkční

Informace neexistuje v miliónech nezávislých kopiích na nepropojených discích, ale v kopiích, které se samy dokážou množit. Informace se stává živelnou a dynamickou. Části jsou rozesety na koncových stanicích lidí, kteří album neslyšeli. Na nekonečných serverových polích. Konec debat o stahování - data, alespoň část lidského fondu by měl každý u sebe a v závislosti na jeho požadavcích by se měnil obsah cache. Šlo by o přidání obsahu do katalogu dohledatelnosti - ne do katalogu vlastněných souborů na disku.** Z remixové kultury se stává mutace.**

Nač se bavit v 21. století o autorech? Informace jsou předávány a přijímány bez autorů - předávají se v kontextech. V čase, médiu… pojďme se bavit o těchto vlastnostech. Mamray zvládá vše. Každá nová iterace se uloží do systému. Každá změna. Existuje někde, rozsekána, možná zapomenuta. Veškeré informace v Mamray jsou okamžitě přístupné všem, sdílené napříč sítí. Informace nezanikají, přesouvají se dál, mutují, jsou využívány. V době crowdsourcingu a decentralizovaných sociálních sítí se vracíme ke konceptu pay-as-you-go - nebo snad_ goes as you pay. _

Absolutní

Mamray nás rychle zbaví konceptu duševního vlastnictví. Díky sdílenému fondu obecného vědění nebudeme dálet potřeba kapitalismu - kapitalismus zemře sám, když někoho napadne, že stačí vytvořit něco beze jména. Něco neuchopitelného, nepojmenovatelného, nevyčíslitelného. To je Mamray. Když se bavíme o univerzální dostupnosti, nebavíme se o homogenitě informací.

Mrtvý mrak

Věříme v nadřazený server, kam předáme vše. Věříme v rozšiřování kapacit, neomezená data. Vrací se jasné vymezení mezi terminálem a serverem. Vracíme se k náboženskému uspořádání světa. Je načase přestat být závislý na informacích. V budoucnosti zapomeňte na singularitu. Zapomeňte na nesmrtelnost z ní plynoucí. Budeme se mnohem více bavit o kontrole.

Kontrola hladiny informací. 21. století ji patří.
Mamray je utopie i má noční můra. Obsah bez formy.

/b/ je ztracená umělecká komunita

Sat, 14 Apr 2012 16:55:53 +0200

Dlouhou dobu jsem přemýšlel, jak vás přesvědčit, že /b/ je umělecká komunita. Naštěstí to už někdo stihnul: What Relational Aesthetics Can Learn From 4Chan.

You do not talk about /b/

4chan sleduju asi od začátku roku 2009. Kromě toho, že to bylo jedno z nejvtipnějších míst na internetu, byla tam ona zvláštní elitářská nálada uzavřeného systému - memy, beroucí se odnikud, nepochopitelné mimo okruh zainteresovaných. Nelze dále rozlišit mezi autorem a divákem (kritikem).

Nebavíme se už pouze o zahození konceptu bílé krychle a přechodu k fluxu. Anonymní sémionauté si poradili se vším - Photoshopem budovali z japonské/masové/jakékoliv kultury svou vlastní. Nástrojem, který absolutně zničil hranici mezi virtuálním a reálným na masové úrovni, si stvořili novodobou strukturu bez struktury. Proměnlivá. Absolutně závislá na divácích, kteří si předávají kulturní materiál. To vše nefyzicky, se sdílenou pseudoidentitou skrytou za proxy - Anonymous.

4chan byl Černý čtverec na počátku digitálního věku. Raidy a operace byly happeningy - nádherně nekontrolované a zmatené. 4chan předvedl slabost současného konceptu hypertextu - bez uchovávání historie je přenos _memů, _ve významu kulturní jednotky, závislý na uživatelské participaci. Centrálním a společným úložištěm a lá Wikipedia (v případě memů snad KnowYourMeme) nelze zachytit okamžik. O ten v případě /b/ šlo - jednotlivé fragmenty ve formě zachycených screenshotů nemohou fungovat - jakou vypovídací hodnotu snad mají fotky z happeningů?

#

Troll thread

Uživatelé byli vycvičení v rozpoznávání trollů - připraveni kriticky posuzovat vlastní výtvory. Kontrolní mechanismus vzniklý ze samotné umělecké tvorby - viz. forced meme. Nebyl to pouhý hive mind, ale ukázka toho, jak budou muset přežívat další generace - budou těžit z ad hoc kulturního potenciálu. Budou muset vyžít z vlastního chápání dějin i současnosti. O to těžší pro ně bude rozhodovat o budoucnosti.

Podstatnou pravdou je, že historie /b/ částečně opisuje historii umění ((nebijte mě!)) v postmoderně ((ať už je to cokoliv)). Narazili na nudící se davy střední digitální třídy. Na opurtunisty. Zkrátka na kýč.

Nemohli konkurovat kýči - musí se rozhodnout jít cestou, která pro masy nebude zajímavá - naprostá primitivnost memů, jejich nesdíletelnost a další obranné prvky. Lze vůbec bránit kulturní informaci před šířením? Je to opak všeho, co nám mají přinést sociální média. Na jedné straně sociální kýč - na druhé pseudohumanističtí hacktivisté, kteří nehackují.

/b/ nám dalo pohled do budoucnosti morálního relativismu jako od Nietzscheho, sémionautů a kulturního dědictví přenášeného dobrovolníky. O ukázce přenosu kýče a balastu ani nemluvě.