#HTML5DevConf oct/2013

Last October, the #HTML5DevConf took place in Moscone Center, SF. Below you can find a bunch of slides belongs to the different conference's talks. As a mobile web developer (you can realize it because the header of this post is  horribly scaled), the talks that I found more interesting are the ones related to continuous integration using Grunt JS. 

Enjoy it!!
@sdemians

Keynote Day One
http://lazure2.wordpress.com/2013/10/05/intels-new-era-of-integrated-computing-look-inside-looking-ahead-by-renee-james-president/

Keynote Day Two
adobe.github.com

Large Scale JavaScript Application Architecture
@danpatricklynch
http://www.slideshare.net/pyramation/built-tolast

Image Layout Algorithms

@vjeux

https://speakerdeck.com/vjeux/image-layout-algorithms-html5-dev-conf

JavaScript Insights

@arobson y @ariyahidayat

https://speakerdeck.com/ariya/javascript-insights

http://ariya.ofilabs.com/2013/10/javascript-insights.html

Webapp to desktop-app with node-webkit

Dale Schouten
@OldGeeksGuide

Mastering the build process

@johnnyhalife

https://speakerdeck.com/johnnyhalife/mastering-the-build-process-number-htmldevconf-2013

https://github.com/johnnyhalife/html5devconf-2013/tree/master

Continuous Delivery 

@jsoverson

http://www.slideshare.net/JarrodOverson/continuous-delivery-for-the-web-platform

Form Validation

@tjvantoll

http://tjvantoll.com/speaking/slides/Constraint-Validation/San-Francisco/#/

New Rules For JS

@getify

https://speakerdeck.com/getify/new-rules-for-javascript

Leveling Up in Angularjs

@aliciatweet
http://alicial.github.io/leveling-up-angular-talk/#/
http://alicial.github.io/leveling-up-angular-talk/examples/directive.html

Finally! Layout in CSS
@alanstearns
http://adobe-webplatform.github.io/html5devconf-2013/FinallyCSSLayoutTalk/#/
http://html.adobe.com/webplatform/enable/

Future of AngularJS
Miško Hevery
https://docs.google.com/presentation/d/1h3JCS5lwntUBddMv47lmpYQs3JUYy2LsUSfcy6YnlDg/edit#slide=id.p

Web Components
@rob_dodson
http://robdodson.me/webcomponents-revolution/#/

JS in iOS

@LostOracle

http://slid.es/nickdesaulniers/jsos/

Building collaborative HTML5 apps

@jtparreira

http://www.slideshare.net/jtparreira/building-collaborative-html5-apps-using-a-backendasaservice-html5devconf-2013-sf

Tips & Tricks for Tablet Optimization

@cyberneticlove

http://brendajin.github.io/tablet-optimization-presentation/#/

Designing in CSS & Programming CSS

Terrence Ryan.

@tpryan

http://terrenceryan.com/thanks/

High performance HTML5 apps

@demianborba

https://speakerdeck.com/demianborba/creating-high-performance-mobile-apps-with-html5

Top 10 Performance Techniques for PhoneGap Applications

@ccoenraets

http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/

Unmasking the GPU Using Hardware Acceleration Correctly with CSS@divya

http://nimbu.in/html5devconf-oct/#/step-1

Streaming SVG animations on the web

@cconcolato

http://slideshare.net/cconcolato/streaming-of-svg-animations-on-the-web

Web based, mobile enterprise applications

@manishgarg

http://slideshare.net/manishgarg/web-based-mobile-enterprise-applications

Firefox OS, the Open Web & WebAPIs

@robertnyman

http://slideshare.net/robnyman/firefox-os-the-open-web-webapis-htmldevconf-san-francisco

From Developer To Entrepreneur

@tbiz

http://www.slideshare.net/biz/html5-devconf-oct-2013-d-bisgeier

Optimizing Memory for Smooth Infinite Scrolling

http://www.amar.co.in/hdc.pptx

Designing Coordinated Visualizations

@milr0c
http://bl.ocks.org/milroc/raw/7032589/#0

Web + Wow

http://slides.cjgammon.com/13-10-web-wow/

HTML5 Mobile Apps don't have to suck

@DaveArel

https://speakerdeck.com/davearel/html5-mobile-apps-dont-have-to-suck

Application building with D3

@jfire

http://jfire.io/presentations/graphical-web-2013/#/

W3Cs web content & creative constraints

@darcy

http://darcyclarke.me/dev/w3cs/

Intro to PhoneGap and PhoneGap Build

@ChrisGriffith

http://www.slideshare.net/chrisgriffith/intro-to-phone-gap-27549022

Browser Dance Party

@jsantell

https://github.com/jsantell/browser-dance-party-slides

Adventures in d3.js

@enjalot

http://enjalot.github.io/advd3/oct2013/

Backbone.rocks

Jeremy Lu
https://speakerdeck.com/coodoo/backbone-rocks-large-scale-single-page-app-done-right

Bootstrap vs Foundation
@jen4web
http://www.slideshare.net/mobile/jen4web/comparing-bootstrap-and-foundation-version-2

MongoDB
@conradIrwin
https://speakerdeck.com/conradirwin/mongodb-confessions-of-a-postgresql-lover

Distributed Application Architecture
http://ryanjarvinen.com/presentations/federated_html5/#/

Secure RESTful API Automation With JavaScript
@jcleblanc
http://www.slideshare.net/jcleblanc/secure-restful-api-automation-with-javascript?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer52672&utm_medium=twitter

Embedding complex SVGs
@lakenen
http://camupod.com/html5devconf2013/#/

Developing web graphics with WebGL
@auradeluxe
http://www.slideshare.net/auradeluxe/developing-web-graphics-with-web-gl

Augmented Reality Mobile Apps in JavaScript:
@georgemck
http://www.georgemckinney.com/armobile/index.html#/

Deploying an airbnb rendr app in Heroku

Welcome to the second post about Rendr. In the following steps we are gonna see how to setup a Rendr app to upload it to Heroku. So less talking and more doing:

1. In the root directory we have to create a file called Procfile. Inside this file we have to write the following line:

1:  web: node index.js  

2. Then we modify Gruntfile.js, also in the root directory. Inside this file, at the bottom, we have to add the highlighted line:

0:    ... 
1:   // Default task(s).  
2:    grunt.registerTask('default', ['compile']);  
3:    grunt.registerTask('heroku:', ['compile']);  
4:   };  

3.  Due to the fact that we can't compile assets, templates and styles in the Heroku server, we have to compile those files in our workstation (running sudo grunt ) and then add them to the Heroku commit.
4. Upload all the files to Heroku and wait the start-up process.
5. Listo ;)

PS: If the dyno didn't start run : heroku  ps:scale web=1

I hope you find it useful.

@sdemians

How to integrate a third party library with airbnb rendr library

Hi all, today we are gonna integrate a third party library (we are going to use swipe as an example) with airbnb's rendr.

1. Download the last version of swipe.js from https://github.com/bradbirdsall/Swipe
2. Locate the library inside /app/lib
3. Inside the swipe.js file you have to replace the declaration line (line 8) adding "module.exports":

   Original file:

1:  /*  
2:   * Swipe 2.0  
3:   *  
4:   * Brad Birdsall  
5:   * Copyright 2013, MIT License  
6:   *  
7:  */  
8:  function Swipe(container, options) {  
9:   "use strict";  

With our small modification:

1:  /*  
2:   * Swipe 2.0  
3:   *  
4:   * Brad Birdsall  
5:   * Copyright 2013, MIT License  
6:   *  
7:  */  
8:  module.exports = function Swipe(container, options) {  
9:   "use strict";  

4. In the view file that you want to use swipe, you have to import it using the require function:

1:  ...  
2:     if (typeof window != 'undefined') {  
3:      var Swipe = require('../../lib/swipe');   
4:     };  
5:  ...  

5. Drop the swipe.css file inside assets/stylesheets/vendor folder. In addition modify assets/stylesheets/index.styl in order to import swipe.css stylesheet.

6. Listo ;)


@sdemians
thanks to: @spikebrehm and @ignavaldi