Heroku

Jako první jsem zvolil Heroku, kde musíte upravit a lehce nastavení v package.json, aby Heroku vědělo jakou verzi NodeJS a NPM má pro kompilaci použít.

package.json

...
"main" : "app.coffee",
"scripts": {
    "start": "NODE_ENV=production coffee app.coffee"
},
"engines": {
    "node": "0.8.x",
    "npm":  "1.2.x"
},
...

Nastavit environment properties na production

heroku config:set NODE_ENV=production

a nastavení portu na kterém to na Heroku běží (PORT).

app.set 'port', process.env.PORT or 5000
app.listen app.settings.port

Pro spuštění je potřeba nastavit Procfile, kde je co se má pouštět.

Procfile

web: coffee app.coffee

Kompletní dokumentaci najdete přímo na stránkách Heroku.

OpenShift

Pro zálohu jsem využil RedHat PaaS Openshift, kde musíte využít jejich vlastní nástroj na vytvoření základ aplikace.

V .openshift adresáři se nastaví všechno včetně kompilace různé verze NodeJS.

.openshift/action_hooks/pre_start_nodejs-0.6

export NODE_ENV=production
export PATH=$PATH:~/app-root/repo/node_modules/coffee-script/bin

Web běží za proxy a narozdíl od Heroku je potřeba nastavit kromě portu (OPENSHIFT_NODEJS_PORT) i interní IP adresu (OPENSHIFT_INTERNAL_IP).

  app.set 'port', process.env.OPENSHIFT_NODEJS_PORT || 8080;
  app.set 'ipaddress', process.env.OPENSHIFT_INTERNAL_IP

Musel upravit package.json, aby šel přímo pustit coffee-script, protože ho OpenShift ho zatím v době implementace nepodporoval.

...
"main" : "app.coffee",
  "scripts": {
    "start": "~/app-root/repo/node_modules/coffee-script/bin/coffee app.coffee"
},    
...

Další hostingy

Na webu najdete zajímavé srovnání z pohledu podpory WebSockets. V tomhle ohledu je problém hlavně v nejvíce používanému Heroku, kde je podpora velmi špatná.

Další hostingy jako jsou Nodejitsu, AWS Elastic Beanstalk, Modulus a AppFog jsou podobné a služby poskytují. Nejlepší podporu pro Websockety má Nodejitsu a Modulus, které jsou placené. Na Openshiftu jsem websockety nezkoušel podpora byt tam měla být.

Všechy moje zdrojáky jsou k dispoci na Githubu, Heroku na masteru a Openshift.

Our aim is to give tools and a community for women to understand technology and to build their ideas. We do this by providing a great experience on building things and by making technology more approachable.

Já jsem se celé akce zúčastnil jako jeden z organizátorů a také jsem trochu přispěl jako kouč. Osobně se mi nápad celé akce velmi líbí a jsem rád, že jsem se toho účastnil. Do Prahy celou akci přivedla Cristina Santamarina, která organizuje RailsGirls Berlin.

Celá organizace nebyla složitá a protože se mě dost lidí ptalo co a jak uvedu zde některá fakta jak příprava celé akce probíhala.

• 30.8.2012 - Cristina Santamarina poslal email do konference rubyonrails.cz, kde Karel Minařík a další se ozvali, že to podpoří a rádi se zúčastní.
• 11.10.2012 - Karel se mnou mluvil o RailsGirls na PragueJS, a tak jsem se rozhodl se zapojit do organizace
• 7.11.2012 - V rámci tradiční “První středy”, kdy se schází Ruby komunita ve Fraktal baru na Letné jsme získali první kouče.
• 17.11.2012 - Celý organizační tým (Cristina Santamarina, Eliška Hutníková a Ladislav Prskavec) se setkal s několika kouči na RuPy a doladily jsme detaily, které jsme řešili jen online
• 5.12.2012 - Na další první středě jsme získali další kouče
• 11.12.2012 - Po příjezdu Cristine do Prahy jsme měli koordinační oběd organizátorů, kde se řešili poslední detaily
• 14-15.12.2012 - první RailsGirls v Praze, v Locusu ve Slezské

Chci tady poděkovat všem co se akce zúčastnili.

Organizační tým:

Cristina Santamarina, Eliška Hutníková a Ladislav Prskavec

Koučové:

Karel Minařík, Ladislav Prskavec, Jana Dvořáková, Jiří Kubíček, Adam Kliment, Vojtěch Hýža, Jiří Kratochvíl, Zlatka Šubrová, Filip Zrůst, Patrik Jíra, Pavel Dušánek

Program

Pátek

• 18:00-19:00 - Install party, účastnicím jsme pomohli s instalací Ruby a RubyOnRails
• dorazilo 21 účastníků
• řešili jsme problém s nestabilním internetem

Sobota

• v sobotu nás překvapilo náledí ale přesto dorazilo 27 účastníků
• začalo se úvodem do programování od Karla Minaříka
• po přestávce na skvělé kafe od Virtualmaster si všichni zkoušeli základy Ruby pomocí TryRuby nebo IRB (Interactive Ruby Shell).
• po obědě jsme se vrhli na tutorial, Karel celý tutorial ukázal a potom jsme v jednotlivých týmech projeli tutorial podrobně znovu.
• kdo byl dříve hotov tak potom mohl tutorial vylepšovat, obarvovat apod.

RailsGirls v číslech

• 11 koučů
• 7 partnerů
• 52 přihlašených
• 21 dorazilo v pátek (install party)
• 27 dorazilo v sobotu (vlastní akce)
• 10 znalo HTML a CSS
• 4 měli nějaké základy programovaní

Napsali o nás

• Ruby, Ruby, Ruby!

Fotky

• Radek Slavičinský

Další RailsGirls

S ostatními co jsme se shodli, že pokračování bude. Dostali jsme pozitivní zpětnou vazbu ode všech kdo se účastnili a za to jsme rádi. Chtěli bychom mít lepší prostor, se spolehlivým internetem. Vylepšit rozdělení do skupin, přidat další věci kolem.

Oba představitelé pracuji pro startup Tilde.io, který společně založili, jehož hlavní náplní je dodávat kompletní řešení pro prostředí moderního webu.

Yehuda Katz je hlavní vývojář mnoha projektů, včetně Ruby on Rails, jQuery a Ember.js.

Tom Dale je Ember.js maintainer a dříve člen Sproutcore týmu. Je to bývalý zaměstnanec Apple, který pracoval na MobileMe a iCloud aplikacích. Takže o témata k diskuzi by neměla být vůbec nouze.

Začátek v 18h v prostorách Node5 v Praze. Přihlásit se můžete na srazy.info nebo na facebooku.

Více infomací na praguejs.cz.

Pátek 21.9.2012

V pátek jsem začal v Development Hall na přednášce Ano, Chefe! Karel Minařík, Vojtěch Hýža byli úžasní, ale nevím zda to bylo pochopitelné pro všechny, já mám s Chefem zkušenosti a tak jsem si to skvěle užil.

Po pauze kdy jsem si dal něco k obědu, těstoviny s masem nebyly špatné.

Byl jsem na několika přednáškách v bussiness hall, kterým jsem moc nerozumněl a moc mi to nedalo.

Další přednášku Mr. LAW and the Typos od Josefa Pospíšila jsem viděl už na Ruby srazu. Jak dělat agilně pokud jste na to sami. Tohle téma je trochu specifické. Důležitost testování a správně nastavené komunikace s klientem je klíčová. Pepa jel prezentaci z Ipadu a měl jí vytvořenou pomocí aplikace Haiku Deck.

Přednáška Jakuba Nešetřila Jak (ne)dělat API mi moc nového neřekla, protože Apiary.io už používám a toto téma se zajímám delší dobu. Každopádně developer co dělá api a nepoužívá Apiary.io by měl začít.

Poslední přednáška Bena Kamense o Khan Academy mě zaujala rozborem A/B testování za použití frameworku Abingo (např. implementace v Ruby, dále je v Pythonu a DotNet).

Kromě výzvy k překládání do češtiny bylo asi kolem testování, že nemůžete výsledkům vždy věřit. Na příkladu A/A testování je vidět, že pokud obě skupiny mají různé výsledky je něco špatně.

Večer byl raut, ten byl celkem zajímavý, potkal jsem se s mnoha lidmi. Je byl poněkud hladový.

Sobota 22.9.2012

V sobotu jsem začal na přednášce Nepoužívejte Git jako SVN! Vašek představil workflow Git-flow, Github flow a Medio workflow.

Trochu mi chybělo v přednášce detailní vysvětlení rebase.

Do not rebase commits that you have pushed to a public repository.

Vašek to moc stavěl jako rebase vs merge, ale z mých zkušeností to nikdy tak není. Je potřeba kombinovat přístupy oba tam, kde se mají kombinovat.

Takže rebase na privátních větvích, kde není sdílený kód s ostatními. Podle mě bylo by spíše zajímavé představit řešení jak to mají implementované na serveru. Zda používají forky nebo personální větve apod. A to netuším, zda by zajímalo většinu lidí, je to dost specifické pro lidi co do problematiky asi proniknou více.

Přednáška Tomáše Jukina na téma Ekosystém. Jak se tvoří weby! Tomáš představil Railsy a jejich systém. Tomáš je šoumen a zabavná přednáška přinesla i pěkné představení rails_admin a Ruby Scaffolding Toolboxu.

V rámci minibarcampu jsem byl na pokecu o Bitcoinech.

Další přednáška o Web Performance od Hooman Beheshti mi nepřinesla nic nového, bylo jen shrnuto co znám, ale kdo v této problematice není odborník jistě se dozvěděl mnohé.

Přednáška o Dartu nebyla špatná, ale spíš nudná. Nic nového a inovativního jsem se nedozvěděl.

Lukáš Linhart a jeho přednáška o Node.js byla jako obvykle kritická i zábavná.

Michal Bachman byl vynikající a jeho přednáška o Neo4j byla opravdu pěkně připravená a příklady názorné a zajímavé.

Těšil jsem se na přednášku o PHPUnit od Sebastiana Bergmanna. Podání bylo dost nudné až ke konci bylo něco zajímavého. Pro mě asi nejvíce zklamání od zahraničního hosta, který měl určitě co říct.

Na konec jsem zvolil přednášku od Ash Maurya o Lean Canvasu, ale nepřišla mi nějak zajímavá, celkem jsem viděl co jsem někde viděl na youtube.

Příští ročník má být mezinárodní a v angličtině. Pokud se to Vaškovy a jeho týmu podaří, vylepší drobnosti v organizaci, tak přednášející a třeba konečně budou mít nějaké nosné téma i celky přednášek, které zaujmou.

Osobně mám nejraději asi klasický Makefile pro jeho jednoduchost. Stačí do něj napsat příkazy co pustíte v shellu takže to víceméně může být cokoliv. Makefile má jednoduchou strukturu, obsahuje label a potom vlastní příkaz. Při zadání make se spustí label označený all.

all:
        make run
deploy:
        git push heroku master
run:
        coffee app.coffee
css:
        compass compile
logs:
        heroku addons:open loggly

Grunt.js je napsaný v node.js, instaluje se pomocí npm install grunt. Můžete si psát vlastní úkoly a pluginy, spoustu jich najdete hotových pomocí npm search grunt-.

V příkladu, který uvádím se používá pluginy compass, coffeelint a exec, nahrávají se pluginy pomocí loadNpmTasks('name'). Vlastní definované tasky můžete nahrát pomocí loadTasks('dir'). Nakonec po konfiguraci je potřeba zaregistrovat registerTask('default', 'watch').

module.exports = function(grunt) {
  // Load tasks
  grunt.loadNpmTasks('grunt-coffeelint');
  grunt.loadNpmTasks('grunt-compass');
  grunt.loadNpmTasks('grunt-exec');
  // Project configuration.
  grunt.initConfig({
    compass: {
      dev: {
        src: 'sass',
        dest: 'public/stylesheets',
        outputstyle: 'expanded',
        linecomments: true
      },
      prod: {
        src: 'sass',
        dest: 'public/stylesheets',
        outputstyle: 'compressed',
        linecomments: false,
        forcecompile: true
      }
    },
    coffee: {
      app: ['app.coffee','lib/*.coffee']
    },
    watch: { // for development run 'grunt watch'
      app: {
        files: ['app.coffee', 'lib/*.coffee'],
        tasks: ['coffee:app', 'coffeelint:dev']
      },
      compass: {
        files: ['sass/**/*.scss'],
        tasks: ['compass:dev']
      }
    },
    coffeelint: {
      one: {
        files: ['app.coffee','lib/*.coffee'],
        options: {
          indentation: {
            value: 2,
            level: "error"
          }
        }
      }
    },
    coffeelintOptions: {
      max_line_length: {
        value: 100,
        level: 'error'
      }
    },
    exec: {
      deploy: {
        command: 'git push heroku master',
        stdout: true,
        stderr: true
      },
      logs: {
        command: 'heroku addons:open loggly'
      },
      run: {
        command: 'coffee app.coffee',
        stdout: true,
        stderr: true
      }
    }
  });

  // Load local tasks.
  grunt.loadTasks('tasks');
  // Default task.
  grunt.registerTask('default', 'watch');
};

Grunt.js umí generovat nějaké konfigurace pomocí grunt init:template. Základní templates jsou: commonjs, gruntfile , gruntplugin, jquery, node. Například vytvořit node.js modul včetně testů uděláte pomocí:

grunt init:node

Vlastní grunt.js obsahuje některé základní tasky už v základním balíčku, které můžete velmi dobře použít.

• concat (spojování souborů)
• init (vytvoření předefinovaných konfigurací)
• lint (validace JSHint)
• min (UglifyJS)
• qunit
• server
• test
• watch

Grunt.js se dá dobře použít na vytvoření buildu, kde spojíte všechny javascriptové soubory. Provést minifikaci a kontrolu například pomocí JSHint. Jako ukázku uvádím grunt.js z NGX library.

module.exports = function(grunt) {
    // tasks
    grunt.loadTasks('build/tasks');
    grunt.loadNpmTasks('grunt-recess');

    // configuration
    grunt.initConfig({
        pkg: '<json:package.json>',
        meta: {
            banner: '/**\n' +
                ' * <%= pkg.description %>\n' +
                ' * @version v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
                ' * @link <%= pkg.homepage %>\n' +
                ' * @license MIT License, http://www.opensource.org/licenses/MIT\n' +
                ' */'
        },
        concat: {
            dist: {
                src: ['<banner:meta.banner>', 'src/ngx.js', 'src/**/*.js'],
                dest: 'dist/ngx.js'
            }
        },
        clean: {
            dist: ['dist/']
        },
        copy: {
            dist: {
                files: {
                    'dist/templates/ui': ['src/modules/ui/**/*.html'],
                    'dist/libs': ['libs/**']
                }
            }
        },
        min: {
            dist: {
                src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
                dest: 'dist/ngx.min.js'
            }
        },
        recess: {
            dist_css: {
                src: 'src/**/*.less',
                dest: 'dist/styles/ngx.css',
                options: {
                    compile: true
                }
            },
            dist_min: {
                src: '<config:recess.dist_css.dest>',
                dest: 'dist/styles/ngx.min.css',
                options: {
                    compress: true
                }
            }
        },
        lint: {
            files: ['grunt.js', 'src/ngx.js', 'src/lang/*.js', 'src/modules/**/*.js']
        },
        watch: {
            scripts: {
                files: ['grunt.js', 'src/*.js', 'src/**/*.js'],
                tasks: 'lint concat min'
            },
            styles: {
                files: ['src/**/*.less'],
                tasks: 'recess'
            },
            templates: {
                files: ['src/modules/**/*.html'],
                tasks: 'copy'
            }
        }
    });

    // default task
    grunt.registerTask('default', 'lint clean concat copy min recess');

};

Grunt.js využívá například Yeoman, na tyto úkoly. - kontrolu javascriptu pomocí JSHint - kompilace CoffeeScriptu a SASS souborů pro produkci - používá r.js ke kompilaci a optimalizaci - spojení a minifikaci skriptů a stylů - komprese obrázků pomocí OptiPNG pro PNG a JPEGtran-turbo pro JPEG. - spuštění unit testů proti headless WebKit browser (PhantomJS) - vytvoření Application Cache manifest via Confess.js

Použití je všestrané a pokryje to celé spektrum práce s aplikacemi v javascriptu.

Jednotlivé šablony v samostatných souborech

Šablony v angular-seed jsou rozděleny do samostatných souborů.

app/
    js/
        app.js
    partials/
        partial1.html
        partial2.html

v app.js se potom načítají samostatně

$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});

Důležité je AngularJS sice používa template cache, ale pro každý soubor si sáhne samostatně a udělá 2 requesty, což nemusí být optimální obzvláště pokud byste měli 20 šablon.

Tento způsob se hodí při vývoji, abyste měli šablony samostatně pro přehlednost.

Inline šablony

V manuálu najdete jak vkládat šablony, přímo do stránek pomocí script tagu.

<script type="text/ng-template" id="partial1.html">
<p>This is the partial for view 1.</p>
</script>

Ty se dají použít velmi dobře. Pokud je to menší kód, ale jinak je lepší mít v samostatných souborech. V kódu se na ně odkážete pomocí jména v id parametru.

$routeProvider.when('/view1', {templateUrl: 'partial1.html', controller: MyCtrl1});

Kombinace obou způsobů

Jak jsem to konzultoval s Vojtou Jínou z AngularJS teamu. Pro development je dobré použít jednotlivé šablony samostatně, ale pro nasazení je dobré spojit šablony do jednoho souboru, abyste ušetřili requesty.

Dá se použít například GruntJS script pro vložení samostaných šablon pro vývoj do inline šablon. Ukázkový script udělal Vojta Jína.

Další možnosti

K tomu článku mě přivedl tento tweet.

Nevíte někdo jak v #angularjs docílit toho abych měl jeden (externí) soubor se všema šablonama?

To by předpokládalo řešení, že budeme mít soubor s šablonami a zkusíme ho načíst a zpracovat. Musíte vytvořit falešnou template cache a tu použít, díky Vojtovy za implementaci.

Rozhodně to, ale není něco co byste měli používat i když to funguje.

Závěr

Držte se toho jak je to v AngularJS vymyšlené, zbastlit lze všechno, ale není to ideální a proto používejte samostatné šablony na vývoj a při deploymentu to dejte do stránky to je nejlepší způsob.

Rapsberry Pi jsem objednal u Farnellu v červnu a na konci července mi přišel dopis ve kterém bylo zařízení.

Co jsem potřeboval, aby to fungovalo

Měl jsem zařízení, ale co dál aby to fungovalo.

Potřebujete:

• zdroj (700mA, 5V s microUSB) - použil jsem nabíječku z iphone a dal jiný usb kabel
• SD kartu, kam dáte systém (použil jsem 4GB class 10)
• kabel na připojení monitoru, použil jsem HDMI
• klavesnici a myš (USB)

Ze stránek raspberry jsem si stáhnul Raspbian “wheezy” a pomocí dd jsme ho nahrál na sd kartu.

Node.js na Raspberry PI

Po rozběhnutí systému není problém nainstalovat cokoliv potřebujete. Spustil jsem ssh server na nainstaloval NodeJS.

sudo apt-get install nodejs npm

Není potom problém pustit aplikaci.

Polling jsme nastavili na 1x24h a máme git-update hook, který nám polling spustí po kommitu, kdy je potřeba. Ukázka git-update skriptu.

1
2

REPOSITORY_BASENAME=$(basename "$PWD") 
curl http://jenkins.firma.cz/jenkins/git/notifyCommit?url=ssh://git@git.firma.cz/$REPOSITORY_BASENAME

V poslední době nám performace jenkins serveru začala klesat a load serveru prudce stoupat. Začali jsme to řešit pomocí dalších volných strojů, které se k jenkins masteru připojovali jako slave node. Úspěšně jsme si vyzkoušeli na to použití pluginu swarm, který můžu doporučit. Vytvořili jsme RPM balík, který nainstalujeme na volný stroj a swarm se připojí k masteru a je plně nakonfigurovaný a k dispozici. Důležité je jen mít na slave nodes dost diskového prostoru, protože joby jsou dost často velké, obzvláště pokud jich máte velký počet.

Abych se vrátil k SCM pollingu. Naši systémaci udělali analýzu nejvytíženějších repository v Gitu. A data mám udávají čas spotřebovaný na provedení všech činností po dobu 14 dní. Na grafu je vidět přehled podle repository.

V dalším grafu je vidět potom rozložení podle zátěže jednotlivými klienty, jak stroji (převážně jenkins a slave nodes, uživatelé jsou v minoritě).

Poslední graf ukazuje počet přístupů do jednotlivých repository. Je potřeba podle toho upravit joby a jejich SCM polling.

Na hromadné změny SCM pollingu můžete úspěšně použít Configuration Slicing Plugin, který vám práci usnadní. U nějvíce vytížených repository doporučili použít notifikace pomocí git-update hooku, případně to můžete udělat všude.

Výsledná zátěž stroje potom výrazně klesla potom co jsme upravili nastavení jak je vidět z grafů muninu.

Další doporučení a tipy triky z praxe se dozvíte na mém školení Jenkins - jak na Continuous Integration v PHP a Javascriptu.

Po celkem dlouhém čekání a 12 RC verzí 1.0 je konečně venku finální verze na kterou od jara čekáme. Trochu jsem si říkal zda se nečeká na něco jiné například DoubleClick jako stěžení referenci pro AngularJS.

Na blogu Google Developers vyšel pěkný článek, který shrnuje hlavní věci, které mě na AngularJS baví, doporučuji přečíst každému.

Pokud se moje přednáška dostane na Webexpo 2012. Budu povídat jak to používáme AngularJS na Jobs.cz.

Jsme kromě DoubleClicku zatím jediná komeční aplikace v produkci, která je uvedena na stránkách builtwith.angularjs.org. Doufám, že pokud něco máte nebudete se bát poslat a rozšiřte řady těch co ukazují, že v AngularJS je radost pracovat a stojí to za to.

Pokud si chcete přijít o AngularJS popovídat určitě mě zastihnete a nejen mě na pravidelné akci Poslední čtvrtek, pravidelné setkání přátel Javascriptu.

Sledovat nás můžete na Facebooku nebo přes Srazy.

Přijděte si popovídat o integraci vašich aplikací v PHP a Javascriptu na moje školení v úterý 26.6. bit.ly/k-ci.

Pro tento termín jsem připravil aktualnizaci, kde kromě PHP je přidána continous integration pro Javascript.

Přednášku jsem o tom měl na poledním čtvrtku. Slidy jsou k dispozici http://slidesha.re/MtbUvD.

Pokud vám na školení o integraci něco chybí co by jste tam chtěli, neváhejte a oslovte mě emailem nebo v komentářích.

Před nedávnem jsem měl problém s dostupností sítě v nejmenovaném dopravním prostředku na trase Praha Liberec, potřeboval jsem maličkost z dokumentace PHP. Nebyl to problém, protože jsem pár dní předtím objevil nástroj Dash, který to elegantně řeší. Kromě dokumentace si v něm můžete uchovávat snippety, ale tam mi chybí integrace s gisty na githubu.

Můžete hned začít hledat, například php funkci ksort()

Dash automaticku umí pokud jste online najít příslušný výkaz na stackoverflow

nebo na google.com.

Jazyků se podporuje asi 80, ja mám docsety pro CSS, Ruby, PHP, NodeJS, Javascript, Rails, MySQL, Html. Například funkce count() v ruby.

Docsety podporované přímo od autorů: iOS, Mac, Man Pages and custom docsets. Included docsets: ActionScript, Android, C++, Cappuccino, Cocos2D, Cocos3D, Corona, CSS, Django, Groovy, HTML, Java, JavaFX, JavaScript, jQuery, Kobold2D, Lua, MySQL, Node.js, Perl, PHP, Python, Ruby, Ruby on Rails, Scala, Sparrow, SQLite, Unity 3D, WordPress, XSLT, XUL.

Nebo si můžete generovat vlastní docset.

Dne 4.5.2012 16-21h proběhl meetup přiznivců AngularJS v Hub Praha na Smíchově. Po New Yorku a Mountain View byla Praha doufám třetí na světě kde se něco takového konalo. Angular tým Misko Hevery, Igor Minar, Vojta Jína nám dělali podporu a to Vojta dokonce osobně v Praze. Přes hangout jsme pozdravili i zbytek týmu.

Pár fotek z mobilu z akce je k dispozici.

Celá akce byla postavená na dotazech a společné práci nad vlastními projekty nebo nad ukázkovou aplikací angular-phonecat. K dipozici byl bar s občerstvením a celá doba uběhla velmi rychle. S probíraných věcí mi asi nejvíce utkvěli informace o dirtycheckingu co nám Vojta vyložil.

Každopádně celá akce byla super a doufám, že ji zoopakujeme někdy brzo znovu a nemusíme se zaměřovat jen na AngularJS, ale na programování v Javascriptu obecně.

Napište do komentářů kam by jste chtěli, aby se meetupy ubírali.

2.5. Vojta Jina - Google Mountain View USA. Introduction to Angular. Vojta is a developer in Google actively developing a Javascript architecture Angular. eClubu

4.5. hacking party sponzored by Google - meetup

Díky všem za vyplnění a bude vás informovat, sledujte @abtris a @vojtajina na twitteru a dozvíte se vše.

CSS spirty představují způsob, jak snížit počet HTTP požadavků, které klient vyšle k získání prvků obsažených na stránce. Obrázky se sloučí do jednoho většího a umístí se na určených X,Y souřadnicích. Pak pomocí CSS atributu background-position můžeme nastavit vzniklý obrázek na pozadí různým elementům stránky a pomocí dalších CSS vlastností umístíme pozadí tak, aby požadovaný jednotlivý obrázek padl do viditelné oblasti elementu na stránce.

Poslouchal jsem podcast s Vaškem Vančurou, kde popisuje svoji práci s LESS a sprites pomocí software TexturePacker.

Zkoušel jsem Vaška přemluvit, aby něco napsal:

@vancura Me se to libilo, taky jsem si zavzpominal. Ale o tom jak pouzivas LESS a sprites nechces o tom neco napsat s nejakym prikladem?
@abtris Kdyby byl cas…

Ale nemá čas, tak jsem se rozhodl to udělat sám.

Zvolil jsem jednoduchou ukázku, stáhnul jsem sadu icon a potom jsem zvolit v Texturepackeru data format css a přidal jsem adresář s iconami. Program automaticky vytvoří pomocí publish sprite.png a sprite.css.

Výsledek můžete vidět zde:

a css kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

/* ----------------------------------------------------
   created with http://www.texturepacker.com 
   ----------------------------------------------------
   $TexturePacker:SmartUpdate:83a9321cb66d0d62791f1fdda5367522$
   ----------------------------------------------------

   usage: <span class="{-spritename-} sprite"></span>

   replace {-spritename-} with the sprite you like to use

*/

.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(sprite.png);}

.accepted_48 {width:48px; height:48px; background-position: -52px -752px}
.add_16 {width:16px; height:16px; background-position: -38px -1002px}
.add_48 {width:48px; height:48px; background-position: -52px -702px}
.app_48 {width:48px; height:48px; background-position: -52px -652px}
.arrow_down_48 {width:48px; height:48px; background-position: -52px -602px}
.arrow_down_green_48 {width:48px; height:48px; background-position: -52px -552px}
.arrow_left_48 {width:48px; height:48px; background-position: -2px -952px}
.arrow_left_green_48 {width:48px; height:48px; background-position: -2px -902px}
.arrow_right_48 {width:48px; height:48px; background-position: -2px -852px}
.arrow_right_green_48 {width:48px; height:48px; background-position: -2px -802px}
.arrow_up_48 {width:48px; height:48px; background-position: -2px -752px}
.arrow_up_green_48 {width:48px; height:48px; background-position: -2px -702px}
.beer_48 {width:48px; height:48px; background-position: -2px -652px}
.blinklist_48 {width:48px; height:48px; background-position: -2px -602px}
.blue_speech_bubble_48 {width:48px; height:48px; background-position: -2px -552px}
.book_48 {width:48px; height:48px; background-position: -452px -502px}
.box_48 {width:48px; height:48px; background-position: -402px -502px}
.box_download_48 {width:48px; height:48px; background-position: -352px -502px}
.box_upload_48 {width:48px; height:48px; background-position: -302px -502px}
.camera_48 {width:48px; height:48px; background-position: -252px -502px}
.camera_add_48 {width:48px; height:48px; background-position: -202px -502px}
.camera_delete_48 {width:48px; height:48px; background-position: -152px -502px}
.camera_noflash_48 {width:48px; height:48px; background-position: -102px -502px}
.camera_noflash_add_48 {width:48px; height:48px; background-position: -52px -502px}
.camera_noflash_delete_48 {width:48px; height:48px; background-position: -2px -502px}
.camera_noflash_warning_48 {width:48px; height:48px; background-position: -452px -452px}
.camera_warning_48 {width:48px; height:48px; background-position: -402px -452px}
.cancel_16 {width:16px; height:16px; background-position: -20px -1002px}
.cancel_48 {width:48px; height:48px; background-position: -352px -452px}
.cd_48 {width:48px; height:48px; background-position: -302px -452px}
.circle_blue {width:48px; height:48px; background-position: -252px -452px}
.circle_green {width:48px; height:48px; background-position: -202px -452px}
.circle_orange {width:48px; height:48px; background-position: -152px -452px}
.circle_red {width:48px; height:48px; background-position: -102px -452px}
.clock_48 {width:48px; height:48px; background-position: -52px -452px}
.coffee_48 {width:48px; height:48px; background-position: -2px -452px}
.coffee_mug {width:48px; height:48px; background-position: -452px -402px}
.comment_48 {width:48px; height:48px; background-position: -402px -402px}
.comment_add_48 {width:48px; height:48px; background-position: -352px -402px}
.comment_remove_48 {width:48px; height:48px; background-position: -302px -402px}
.comment_warning_48 {width:48px; height:48px; background-position: -252px -402px}
.computer_48 {width:48px; height:48px; background-position: -202px -402px}
.creditcard_american_express {width:48px; height:48px; background-position: -152px -402px}
.creditcard_cirrus {width:48px; height:48px; background-position: -102px -402px}
.creditcard_mastercard {width:48px; height:48px; background-position: -52px -402px}
.creditcard_paypal {width:48px; height:48px; background-position: -2px -402px}
.creditcard_solo {width:48px; height:48px; background-position: -452px -352px}
.creditcard_switch {width:48px; height:48px; background-position: -402px -352px}
.creditcard_visa {width:48px; height:48px; background-position: -352px -352px}
.cross_48 {width:48px; height:48px; background-position: -302px -352px}
.database_48 {width:48px; height:48px; background-position: -252px -352px}
.database_add_48 {width:48px; height:48px; background-position: -202px -352px}
.database_remove_48 {width:48px; height:48px; background-position: -152px -352px}
.database_warning_48 {width:48px; height:48px; background-position: -102px -352px}
.delicious_48 {width:48px; height:48px; background-position: -52px -352px}
.designfloat_48 {width:48px; height:48px; background-position: -2px -352px}
.digg_48 {width:48px; height:48px; background-position: -452px -302px}
.feedburner_48 {width:48px; height:48px; background-position: -402px -302px}
.flickr_48 {width:48px; height:48px; background-position: -352px -302px}
.floppy_disk_48 {width:48px; height:48px; background-position: -302px -302px}
.folder_48 {width:48px; height:48px; background-position: -252px -302px}
.folder_add_48 {width:48px; height:48px; background-position: -202px -302px}
.folder_delete_48 {width:48px; height:48px; background-position: -152px -302px}
.folder_warning_48 {width:48px; height:48px; background-position: -102px -302px}
.furl_48 {width:48px; height:48px; background-position: -52px -302px}
.globe_48 {width:48px; height:48px; background-position: -2px -302px}
.google_48 {width:48px; height:48px; background-position: -452px -252px}
.heart_48 {width:48px; height:48px; background-position: -402px -252px}
.home_48 {width:48px; height:48px; background-position: -352px -252px}
.image_48 {width:48px; height:48px; background-position: -302px -252px}
.image_add_48 {width:48px; height:48px; background-position: -252px -252px}
.image_delete_48 {width:48px; height:48px; background-position: -202px -252px}
.image_warning_48 {width:48px; height:48px; background-position: -152px -252px}
.lightbulb_48 {width:48px; height:48px; background-position: -102px -252px}
.lock_48 {width:48px; height:48px; background-position: -52px -252px}
.lock_open_48 {width:48px; height:48px; background-position: -2px -252px}
.mail_48 {width:48px; height:48px; background-position: -452px -202px}
.mail_add_48 {width:48px; height:48px; background-position: -402px -202px}
.mail_delete_48 {width:48px; height:48px; background-position: -352px -202px}
.mail_forward_48 {width:48px; height:48px; background-position: -302px -202px}
.mail_reply_48 {width:48px; height:48px; background-position: -252px -202px}
.mail_spam_48 {width:48px; height:48px; background-position: -202px -202px}
.mail_write_48 {width:48px; height:48px; background-position: -152px -202px}
.mixx_48 {width:48px; height:48px; background-position: -102px -202px}
.mouse_48 {width:48px; height:48px; background-position: -52px -202px}
.navigate_48 {width:48px; height:48px; background-position: -2px -202px}
.newspaper_48 {width:48px; height:48px; background-position: -452px -152px}
.paper&pencil_48 {width:48px; height:48px; background-position: -402px -152px}
.paper_48 {width:48px; height:48px; background-position: -352px -152px}
.paper_content_48 {width:48px; height:48px; background-position: -302px -152px}
.paper_content_chart_48 {width:48px; height:48px; background-position: -252px -152px}
.paper_content_pencil_48 {width:48px; height:48px; background-position: -202px -152px}
.pencil_48 {width:48px; height:48px; background-position: -152px -152px}
.pie_chart_48 {width:48px; height:48px; background-position: -102px -152px}
.printer_48 {width:48px; height:48px; background-position: -52px -152px}
.questionmark_48 {width:48px; height:48px; background-position: -2px -152px}
.reddit_48 {width:48px; height:48px; background-position: -452px -102px}
.refresh_48 {width:48px; height:48px; background-position: -402px -102px}
.rss_48 {width:45px; height:45px; background-position: -52px -802px}
.search_48 {width:48px; height:48px; background-position: -352px -102px}
.smile_grin_48 {width:48px; height:48px; background-position: -302px -102px}
.smile_sad_48 {width:48px; height:48px; background-position: -252px -102px}
.spanner_48 {width:48px; height:48px; background-position: -202px -102px}
.speech_bubble_48 {width:48px; height:48px; background-position: -152px -102px}
.star_48 {width:48px; height:48px; background-position: -102px -102px}
.star_half_48 {width:48px; height:48px; background-position: -52px -102px}
.star_off_48 {width:48px; height:48px; background-position: -2px -102px}
.sumbleupon_48 {width:48px; height:48px; background-position: -452px -52px}
.table_48 {width:48px; height:48px; background-position: -402px -52px}
.table_green_48 {width:48px; height:48px; background-position: -352px -52px}
.tabs_48 {width:48px; height:48px; background-position: -302px -52px}
.technorati_48 {width:48px; height:48px; background-position: -252px -52px}
.thumbs_down_48 {width:48px; height:48px; background-position: -202px -52px}
.thumbs_up_48 {width:48px; height:48px; background-position: -152px -52px}
.twitter_48 {width:48px; height:48px; background-position: -102px -52px}
.twitter_boxed_48 {width:48px; height:48px; background-position: -52px -52px}
.usb_48 {width:48px; height:48px; background-position: -2px -52px}
.user_48 {width:48px; height:48px; background-position: -452px -2px}
.user_add_48 {width:48px; height:48px; background-position: -402px -2px}
.user_delete_48 {width:48px; height:48px; background-position: -352px -2px}
.user_two_delete_48 {width:48px; height:48px; background-position: -302px -2px}
.user_warning_48 {width:48px; height:48px; background-position: -252px -2px}
.users_two_48 {width:48px; height:48px; background-position: -202px -2px}
.users_two_add_48 {width:48px; height:48px; background-position: -152px -2px}
.users_two_warning_48 {width:48px; height:48px; background-position: -102px -2px}
.warning_16 {width:16px; height:16px; background-position: -2px -1002px}
.warning_48 {width:48px; height:48px; background-position: -52px -2px}
.yahoo_48 {width:48px; height:48px; background-position: -2px -2px}

Shrnutí

Je to jen ukázka jak může tento program usnadnit práci, kterou jsem viděl obvykle dělat kodéry ve Photoshopu a pracně ručně nastavovat v CSS.

Letos jsem se poprvé dostal na Vsetínský Barcamp a spousta přednášek mi přišla zajímavá a z těch co jsem viděl mi nejlepší přišli Olga Biernátová - Jak se uvádí bestseller na český trh a Filip Doušek - Hejno bez ptáků: Od 1500 myšlenek k románu. Zaujala mě iniciativa proti hernám http://www.mapyhazardu.cz/, kde dělají v Brnění, o.s. užasnou práci.

Moje přednáška byla večer na střeše a sešla se nám malá skupina, kterou to zajímalo a hodně se diskutovalo a to mám na Barcampech rád.

Budou učebnice 
v budoucnosti jen elektronické?

Elektronické knihy procházejí změnami, všichni si pamatují čtení v palm pilotech a jak to změnil Kindle, když přišel s prvním velkým obchodem s knihami. Sám jsem si tehdy Kindle 2 koupil a na beletrii neznám nic lepšího. Ale řešil jsem problém, že mám manuály a další odborné knihy převážně v PDF a to se na tom Kindlu nedalo moc dobře číst. Potom přišel iPad a iBook od Apple, tam se dají dobře číst i PDF, ale jinak to je stejné jako u kindle s nevýhodou toho, že to není elektronický inkoust.

iBooks2

Dne 19.2.2012 ohlásil, že vymysleli jak dělat učebnice jinak a lépe. Pokud jste viděli ukázky z knihy Life Of Earth zjistíte, že knihy mohou být úžasně inteaktivní. Přidali podporu videa, fotogalerie, 3D obrázků, HTML5 widgetů a dalších věcí, které ty knihy oživí. Pro beletrii to moc význam nemá, ale jistě se najdou autoři, kteří to využijí. Pro učebnice a odborné knihy to je ovšem úžasné. Na konci každé kapitoli, můžete přidat Review, kde vyzkoušíte čtenáře zda pochopil obsah kapitoli a on získá zpětnou vazbu, která mu při pasivním čtení chybí. Do knih si můžete dělat poznámky a zvýrazňovat zajímavé pasáže což mnozí studenti rádi využijí.

iBooks Author

Kromě iBooks2 aplikace, ale největší přínos je v tom, že Apple vydal aplikaci v které si zdarma takovou knihu můžete vytvořit. Na Mac je tato aplikace prostě úžasná, zcela ve stylu nástrojů iWork a každý průměrný uživatel si lehce vytvoří co chce.

Já jsem si více hrál s HTML5 widgety, pomocí, kterých se dájí možnosti rozšiřovat a také jsem řešil jak sázet matematiku. Matematiku dostanete do iBooks Author podobně jako do iWork například pomocí MathType nebo LaTeXiT.

HTML5 widgety můžete vyrobit sami nebo pomocí nějakého nástroje:

• DashCode - součást Mac OS X
• Adobe Edge - v současné době betaverze
• Sencha Animator
• Tumult Hype

další zajímavé widgety můžete najít na internetu, například jsem našel na panoramatické prohlížení fotek.

Widgety mají omezení, nemohou přistupovat na disk a k internetu.

iBookstore

Pokud projedete celou výrobou knihy je potřeba ji dostat do iBookstore. Nejdříve se musíte zaregistrovat jako autor a potom si můžete stáhnout program iTunes Producer, pomocí, kterého můžete dílo uploadnout do iBookstore.

Jak je vidět na obrázku musíte vyplňit povinné údaje. Ve výběru jazyka není čeština k dispozici. Ale napište cze a kniha v češtině projde. Screenshoty ke knize udělejte přímo na iPadu, aby měli správné rozlišení a exportujte je jako JPG.

Po tom co nahrajete knihu pres iTunes producer a Apple ji schválí (cca 1 týden), můžete přes iTunes Connect sledovat statistiky jak se kniha stahuje po celém světě.

Jako asi první česká kniha ve formátu iBooks2 stažená více jak 15 kusů je vlastně bestseller jak říkala ve své přednášce Olga.

Závěr

Určitě chci doporučit pokud chcete knihu vydat sami, tohle je cesta. Sice je omezené na iBookstore a případně můžete v PDF si to vydat někde jinde, ale přidaná hodnota interaktivní učebnice určitě stojí za to. Pro beletrii bych asi volil stále osvěčenou metodu klasického formátu pro více zařízení, ale můžete to vylepšit i tam asi závisí na autorovy. Knihu můžete formátovat na výšku a na šířku a může vypadat pokaždé úplně jinak. Pokud budete mít typy na widgety, zkuste je uvést v komentářích. Mě napadlo, že by bylo dobré udělat widget na zdrojové kódy, kde by šlo prohlížet prsty, byla by zvýrazněná syntaxe atd.

Celý Barcamp ve Vsetíně byl skvělá akce a děkuji organizátorům za letošní ročník.

Video z přednášky

Ladislav Prskavec from Michal Berg on Vimeo.

Všechno ukazuji na praktických příkladech s pomocí Ubuntu a virtualizace (VirtualBox) a za použití nástroje Vagrant.

Osnova školení pro WebExpo Academy

• Automatizace buildu
• Instalace Jenkins
• Continuous Integration
• Continuous Inspection
  • API dokumentace
  • Softwarove metriky
  • Duplicitni kod
  • Coding standard
  • Agregace vysledku
• Automatizace automatizace
• Continuous Delivery

Informace o školení

Termín: pátek 16. 12. 2011 10:00 – 18:00

Cena 4 490,- Kč. V prosinci jen za 2 290,- Kč!

Kapacita: Zbývají 2 místa.

Objednávky: academy@webexpo.net, +420 775 477 457

Školení se konají v Praze v prostoru WebHub, adresa: Kafkova 16, Praha 6, dvě minuty pěšky od metra Dejvická.

Související články

• http://blog.prskavec.net/2009/12/php-codebrowser/
• http://blog.prskavec.net/2009/02/hudson-a-php/
• http://blog.prskavec.net/2009/04/phphudson/
• http://blog.prskavec.net/2009/03/pdepend-a-php-frameworky/
• http://blog.prskavec.net/2009/03/pdepend-a-php-frameworky-dodatek/
• http://blog.prskavec.net/2008/11/phpundercontrol-vs-xinc/
• http://blog.prskavec.net/2008/06/phing-svnlogtask/

Na videu je vidět průřez časovou osou jak čas běžel a jaké verzovací systémy nám postupně vznikali a vznikají.

Verzovací systémy jsou tu od roku 1972. Source Code Control System (SCCS) byl první verzovací systém, který položil základ všem verzovacím systémům až po dodnes. Dnes jsou nejznámější systémy: Subversion, Git a Mercurial. Ale každý měl nějaké předchůdce a vznikl protože ty předchozí nevyhovovali.

SCCS byl komerční a nahradil ho později Revision Control System (RCS), který byl open source náhradou za SCCS, na jeho základech byl v roce 1990 vytvořen Concurrent Versions System (CVS), který většina vývojářů už zná. Mezi jeho hlavní nevýhody jsem vždy považoval nemožnost přejmenování adresářů a správu jednotlivých souborů. Subversion v roce 2000 přišel s novinkou ve verzovaní celého stromu adresářů. Atomicita operací se rozšířila na celé adresáře ne jen na soubory jako v CVS. Subversion podporuje attributy, které se přidávání k souborů a s těmito metadaty dále pracuje.

SCCS ale kromě verzovacích systémů, které mají architekturu klient server byl také předchůdcem distribuovaných verzovacích systémů. První distribuovaný verzovací systém byl v roce 1996 Sun WorkShop TeamWare. Larry McVoy, který navrhl TeamWare vytvořil později BitKeeper, který se používal do roku 2005 pro vývoj jádra linuxu. V roce 2005 po sporu mezi společností BitKeeper a komunitou, přestali poskytovat zdarma BitKeeper a tak se Linus Torvalds rozhodl začít s vlastním verzovacím systémem Git. Na stejnou věc reagoval i Matt Mackall, když o měsíc později po Gitu uvedl Mercurial.

Verzovacích systémů je samozřejmě desítky, stále vznikají nové a spousta jich žije i když je asi dost lidí ani nezná. Nedají se vyzkoušet všechny. Osobně mám nejvíce zkušeností s tím čím jsem si prošel v práci a to je CVS, SVN a Git. Za ty roky co s nimi pracuji si myslím, že jsem si vždy polepšil a uvidíme co bude dál. Dnes považuji Git za naprosto dostačující k mé práci, jediné co bych mu vytknul je verze pro windows, kde často řeším problémy, které na linuxu ani neexistují.

Toto je častá otázka, kterou slyším. Spousta lidí používá sdílené adresáře pro práci s dokumenty. Přejmenovávají soubory a adresáře. Pokud znáte dokumenty typu Projekt-Final-Update!!.doc apod. tak víte o čem mluvím.

Každý programátor pracuje v jiné podadresáři?

Tak to trochu může lidem připadat, ale programátoři používají verzovací systém, který dokumentovou databází, která sleduje změny a pomůže v mnoha věcech.

Záloha a Obnova

Soubory, které ukládáme do verzovacího systému si nesou infomaci o času uložení a není problém skočit v čase co existuje repozitář kam chcete třeba co jste dělali 29.7.2009? Není problém.

Synchronizace

Pokud si verzujete například konfiguraci nastavení linuxu. Příklady najdete na githubu v repositářích nazvaných dotfiles. Tak si pomocí verzovacího systému lehce udržujete konfiguraci na všech počítačích, které používáte. Obdobně není problém to dělat s jakýmikoliv dokumenty.

Jednoduché Undo

Modifikujete soubor a nefunguje to a potřebujete vrátit změny zpět. Není problém obnovit poslední dobrou verzi. Maličkost.

Undo

Kdykoliv máte k dispozici undo, pokud například najdete chybu, kterou jste udělali před rokem není problém se vrátit zpět a podívat se jaké změny jste dělali a proč.

Sledování změn

Soubory jsem změněny, ale verzovací systém uchovává také zprávu, kde se často vysvětluje proč změna byla udělaná, dost často obsahuje například odkaz do bug trackeru apod. To jsou věci, které se často ze samotných souborů vyčíst nedají.

Sledování vlastníka

Každá změna je podepsaná a můžete kdykoliv zjistit, kdo který řádek modifikoval. To se hodí pokud potřebujete zjistit kdo změnu udělal.

Pískoviště (sandbox)

Výhoda verzovacích systémů je právě, že můžete pracovat na velkých změnách v izolované oblasti bez toho aby jste se báli, že ovlivníte celek.

Větve a merge

Větve slouží jako velké pískoviště, můžete mít desítky větví, které mohou po dlouhou dobu fungovat izolovaně a později pokud budete chtít spojíte (merge) je kam potřebujete.

Závěr

Sdílené adresáře jsou rychlé a jednoduché, ale rozhodně tyto vlastnosti verzovacích systémů jsou něco co je o dost lepší.

Verzovacích systémů jsou desítky, od SCCS (1972), přes CVS (1990), Subversion (2000) k distribuovaným jako je Darcs (2002), Git (2005) nebo Mercurial (2005). K nejnovějším přírůstkům patří Verocity (2011), které přidává například přímo podporu SCRUMu.

Volbu nechám na vás u mě od roku 2009 vítězí Git a ani za 2 roky se v tom nic nezměnilo.

Reportáž online:

Keynote

9:09 Sedíme na keynote a uvidíme co se chystá ….

Video na začátku a potom Filip pokračuje v Keynote.

9:19 Brad Abrams - Google Plus Platform Zatím se probíráme od roku 1990 do součastnosti naší minulostí a přesouváme se k mobile a cloud. Aktivace telefonů s Androidem mezi únorem 2010 (60k) až k 550k v červenci 2011. 300k aplikací v Android Marketu.

9:35 Petr Nálevka - Sleep as anDroid, ukázka aplikace. Budík - umí měřit spánkové cykly. Umí nahrávat spánkovou aktivitu i zvuky, chrápání apod. Statistiky o spaní a návyky. Captcha pro budík, aby jste to snad nezamáčkli. Celé snímání je přes akcelerometr. Aplikace se dá snadno rozšiřovat. 330k aktivních uživatelů a 60k prodaných kusů.

9:43 AdMob - 910 miliard reklam už bylo zobrazeno.

9:45 Chrome a HTML5, Chrome Webstore

9:51 Ilmari Heikkinen - WebGL demo, tree.js, flux slider transgallery, asteroids. Pěkné demo na Developers tools v Chrome, zvláště pretty print funkce pro javascript je hodně pěkná.

10:00 WebM Video, Web Audio Api, HTML5 s WebIntents, Native Client (C, CPP v sandboxu), JS a DOM. HTML5 aplikace lehce najdete přes Chrome Web Store a zítra HTML5 Hackathon zítra a jedou na Google IO.

10:05 Video, YouTube 3D - trailer na novou Dobu ledovou ve 3D

10:10 Mano Marks a Jarda Bengl - Google Maps První Google Maps Mashup - http://housingmaps.com. Google Fusion Tables - demo s populací evropy. WebGL v mapách, klikněte vlevo dole vyzkoušet něco nového a mapy se přepnou do WebGL. Úžasné celé vektorové mapy místo obrázků a 3D budovy v normálních mapách provázání s satelitní mapou (ukázky New York, Rome, Venice).

10:24 Cloud, webová verze Angry Birds používá (GWT, HTML5, Google Plus, App Engine). Mobilní hry často App Engine používání na backendu (např. TapZoo). App Engine pro Google Doodles (ukázka, záznamy za 2 dny nahráli uživatelé několik let záznamů.

Google Cloud Storage, Google Prediction API jdou do provozu z Labs.

Google Cloud SQL uvádějí jako novinku. Iein Valdez uvedl demo. Použije se JDBC driver pro Google Cloud SQL (GCSQL). Ukázka na App Engine byla v Javě a PHP.

10:40 Google Plus s Circles, Hangouts, Mobile. Novinky přidávájí stále a během 90 dnů od spuštění přidali přes 100 novinek. Teď mají kolem 40M uživatelů a 3,4 mld. fotek. Plugins (+1 button), anotace pro vaše výsledky hledání. APIs (RESTful, JSON, OAuth2) a knihovny pro všechny běžné jazyky (Google Apis Explorer.

10:50 Jonathan Beri - Hangouts demo, přijde mi to jako Google Wave v nové verzi zaměřené více na to co lidé chtějí. Více o Google platform na https://developers.google.com/+/.

Keynote končí.

Ilmari Heikkinen - Tohle nejsou weby, které hledáte: Moderní webové aplikace v HTML5

Definuje moderní webovou aplikaci jako desktop UI s cloud backendem (příklad DJBreakPoint aplikace).

MVC Frameworks (Sproutcore, BackboneJS, ExtJS 4). Css Frameworks (Less, Sass). Divné, že nezmínil AngularJS, který Google přímo podporuje a vyvíjí. Responsive layout pro notebooky, mobily a tablety.

• formfactorjs.com
• www.leviroutes.com (pushState, řeší MVC JS Frameworky)

Ukázka webkitdirectory a drag and drop pro práci se soubory v Chrome. Ukázka ukládání na filesystem. Application cache pro ukládání.

<html manifest='cache.appcache'>

• LawnChair - simple json storage
• x-webkit-speech attribute například pro input.
• desktop notifikace - webkitNotifications
• performance tips - http://bit.ly/rizNVE

Old browsers

• Chrome Frame
• HTML5 Boiler Plate
• Modernizr
• jQuery

Chrome Web store

• $5 poplatek za registraci
• možnost monetizace HTML5 aplikací
• AppMator umí udělat manifest file

Slidy http://bit.ly/nrjLs7.

Reportáž skončila.

Shodnocení GDD 2011

Později jsem se vrátil na GDD bohužel až na Ignite, ale ty rozhodně stály za to. Přišlo mi to jako skvělý závěr GDD2011 a co bych chtěl ocenit je i přes menší rozpočet spousta věcí zaujala. Ocenil bych více advanced přednášek, kde přednášející mi řekne něco co nevím, ale to je hodně individuální.

Jinak celkem dobrá organizace, trochu registrace vázla, když člověk přišel později. Celkově jsem potkal spoustu lidí, které vidím jen tady.

Za mě jediné přání do dalšího roku, líbil by se mi například Vojta Jína nebo někdo s týmu AngularJS a nějaký workshop s nimi ať na GDD nebo mimo.

Update 24.10.2011

K dispozici jsou všechny videa. Úžasné!

• má HTML5 template
• mobile friendly
• podpora pro Twitter, Google Plus One, Disqus Comments, Pinboard, Delicious, and Google Analytics
• jednoduchý deployment (rake deploy)
• zvýrazňování zdrojové kódu (Solarized)
• jednoduchá změna vzhledu pomocí Compass a Sass

a další pluginy, které jsou přesně co vývojář potřebuje. Pro mě jsou nejdůležitější

• Gist
• jsFiddle
• Include Code

Doufám, že pokud se vám líbí Jekyll tak Octopress je ještě trochu lepší a na stejném základě.