30 mars 2014

Scrum, quality focused

Lately, I had to explain the Scrum methodology used in software development. I created a little infography on this topic.

To ensure that no surprise arise at the beginning of the project, I secure it with an initial RUN-0 solely concentrated on architecture and infrastructure. This avoids multiple refactoring during the course of the project and the surprise of the product owner to have so few implemented feature at the early stage of the product.

Identically, the last RUN-final is secured so that no feature or request is taken into account. It's the project closing. Only bug fixing is allowed. This avoids any new feature that could risk the whole project delivery. This is one of the key to success and quality for Scrum projects. An other one is to take into account bug fixing during the RUN-N as high level priorities entries into the Sprint backlog.

11 mars 2014

SPDY: Shorten your page load time like no other

SPDY (say 'speedy') is a mature protocol from Google which supersets HTTP 1.1. It is available on NGINXApache2NodeJS and more.

For browsers capable of talking SPDY (Chrome, Opera, Firefox), this protocol provides:
  1. Prevention of the browsers to resend information like user-agent, browser properties. In a way, it creates a session state on a normally stateless protocol.
  2. Avoidance of the HTTP pipelining mechanisms and an ability to prioritize the sent assets to its clients.
  3. A push mechanism that can pre-fill the browsers cache just like it was doing some page prefetching. If you prefer to lower the outgoing bandwidth of your servers, there are server hints that informs the browsers of the prefetching they could if they wish it.
With a default Gzip extension in case your clients does not support this protocol, coupled with PageSpeed (see : PageSpeed: Turbo ON for your sites), SPDY will transform your users experience.

Guy Podjamy, CTO of Akamai, presents a nice introductory video on SPDY. A must watch.

9 mars 2014

Debugging CoffeeScript with ease

node-inspector 0.7 has landed. It opens up a simpler solution for debugging CoffeeScript without having to use the generated JS. This post from StrongLoop explains you how: Debugging CoffeeScript with the Node Inspector Debugger.

Integrate your responsive images in one line in your HTML: the Clowncar's cookbook


This is just a post from a cookbook that I've integrated into grunt-clowncar plugin a few month ago.

This technique for handling responsive images without polluting your HTML's code has been first mentioned by Estelle Weyl. It's like an abstract factory pattern for responsive image.

The goal is to create automagically an SVG file (the clowncar) which acts as a container. You just include the SVG file whenever you need responsive images. The SVG files contains all the necessary redirection to all the images and it loads only the appropriate ones.

Here is my original cookbook that I simply repost hereafter.

Preparing the circus

First thing first, we import the necessary tooling.
This cookbook has been created using OSX. But there's no hassle doing it with your operating system of choice.
With your favorite terminal, hop into an empty directory and create a package.json file for your project, if it's not already done.
npm init
We are using the following directory structure:
├── Gruntfile.coffee
├── dist
├── package.json
├── src
│   ├── img
│   │   └── photo001.jpg
│   └── index.jade
└── tmp

With :
  • Gruntfile.coffee: Our Grunt file in coffee.
  • dist: A directory for our generated web files.
  • tmp: A directory for temporary files (unminified stuff, for instance).
  • src: A directory containing all our source files that need treatment.
  • src/index.jade: The main jade file that generates our index.html file.
  • src/img: A directory containing all the image that we are about to clown.
Note that the folder strucure is easily adapted in the grunt file provided hereafter.

Now, we import our grunt plugins and a some other neat stuff:
npm install --save-dev grunt grunt-clowncar \
  grunt-contrib-jade grunt-svgmin grunt-contrib-clean \
  grunt-contrib-watch grunt-express grunt-contrib-copy \
  grunt-open matchdep

And, if you haven't done it already, install GraphicsMagick system wide. Here's the command on OSX for convenience:
brew install graphicsmagick

OK. Now, we can proceed with the 1st recipe.

Embedded SVG in HTML code

So, we start with our Grunt file Gruntfile.coffee which should look something like:
# Grunt tasks
module.exports = (grunt) ->
  # Load all plugings from our package.json files
  require('matchdep').filterDev('grunt-*').forEach grunt.loadNpmTasks
  # Project configuration
    # Here comes the fun part. Your image are going to be clowned!
    # Every image stored in 'src/img' produces an SVG file and all
    #  the resolution required by responsive image depending on the
    #  screens that you are targeting.
    # Hereafter, the sizes matches the ones from the default
    #  Twitter's Bootstrap CSS framework.
    # Feel free to adapt them to the screens that you are targeting.
    # All our produced stuff go in the 'tmp' dir as some additional
    #  and optimizing steps are required for our beloved mobile users.
      options: sizes: [1280, 992, 768, 400]
      all: files: [{
        expand: true
        cwd: 'src/img/'
        src: ['*.jpg']
        dest: 'tmp/'
        ext: '.svg'
    # Minify the produced SVG (our clown cars).
      options: datauri: 'base64'
      clowned: files: [{
        expand: true
        cwd: 'tmp/'
        src: ['*.svg']
        dest: 'tmp/minified/'
        ext: '.min.svg'
    # Copy our multi-resolution images (the clowns under the car)
    #  to our production dir 'dist'.
    copy: clowned:
      expand: true
      cwd: 'tmp/'
      src: ['*-*.jpg']
      dest: 'dist/'
    # Use jade to produce HTML.
    jade: compile:
        # Minify our produced HTML file automatically.
        pretty: false
      files: 'dist/index.html': ['src/index.jade']
    # Remove everything created so far.
    clean: [ 'dist', 'tmp' ]
    # Create a custom Express server on the fly.
    express: all: options:
      port: 9000
      hostname: ''
      bases: ['dist/']
      livereload: true
    # Open a browser when site is ready.
    open: all: path: 'http://localhost:<%= express.all.options.port %>'
    # Watch every changes in the 'src' dir and fire up the buuild task.
        # Note: Livereload is not set in this task as it's already provided
        #  by the express server (the grunt task).
        livereload: false
      all: files: 'src/**', tasks: ['build']
  # Build tasks.
  grunt.registerTask 'build', ['clowncar', 'svgmin', 'copy', 'jade']
  # Default task.
  grunt.registerTask 'default', [
      'clean', 'copy', 'build', 'express', 'open', 'watch'

Pfeww, that was long. But, we've provided you with a real world example with comments. Comments that should be worth reading.

Note that there's no need in minifying our produced image with grunt-contrib-imagemin. grunt-clowncar does it for you. It uses GraphicsMagick's 'convert & thumbnail' feature that does the job pretty well.

So, the produced SVG (the clown car) are in the tmp/minified dir. On the other hand, the responsive images (the clowns or the reduced JPEGs) are directly provided in dist, the production dir. Let's target these with a neat HTML file written in Jade:
- var pageTitle = 'Check the clowns'
    title= pageTitle
    h1= pageTitle
    include ../tmp/minified/photo001.min.svg

That's it! A oneliner for every included image.

Now, just hit the grunt command and watch your image being clowned:

Check the dev tools to see the image downloaded from the server while redimensioning your browser.

8 mars 2014

Modern HTML5 assembly line

Just a little infography that I've done for identifying tools and libraries used for developing modern HTML5 apps.