PageSpeed: Turbo ON for your sites - The Google I/O presentation from Ilya Grigorik

PageSpeed comes in two flavors : a Chrome extension, an Apache module and a NGINX module.

The first one provides you with a great analysis tool of your current sites. The second does almost all the optimization for you. It is pure voodoo. Google has done a tremendous job. Thanks a lot.

BASH Training Series #1 - History Manipulation

Some pretty useful reminders on Bash history manipulation from Shawn Biddle. Of course, il works perfectly with Zsh.

Project Tango: The future of augmented reality?

That sounds like a revolution in augmented reality.

Tutoriel NodeJS : NodeWebkit

Comme d'habitude, Grafikart nous apporte un tutoriel très bien fait. En moins de 30 minutes, il réalise une application compatible Windows, Mac et Linux.

Tout d'abord, parlons un peu de Node-Webkit. Node-Webkit est un peu l'Apache Cordova pour ordinateurs.

Grosso modo, on prend son application HTML5 et on l'intègre dans le conteneur natif. Plus précisément, le  conteneur natif exécute un navigateur un peu déshabillé (WebKit dans ce cas). Si le dialogue avec le natif se fait via le bridge.js pour Apache Cordova, Node-Webkit privilégie une interaction via NodeJS. De fait, il offre la possibilité d'accéder à la multitude de bibliothèque que cette VM fournit. C'est d'une efficacité absolument incroyable.

Ce framework étant disponible depuis 2012, il est sacrément stable et utilisable en production. Adobe, Twitter, Github, Intel l'utilisent pour certaines de leurs applications. Pour l'avoir utilisé, je vous le recommande sérieusement.

Famo.us announces 60 days to beta launch

Sounds like an incoming revolution.

Tutoriel : Git Workflow

Encore un excellent tutoriel par Grafikart en français sur Git et Github :

Meet Boris: PHP, too has its REPL

What? REPL? It stands for Read-Eval-Print-Loop. Basically, it is a form of a language interpreter that allows you to enter into a dedicated prompt, evals each commands that you pass in and prints out their results. Think of Bash, Zsh, SQlite, Redis, Coffee, NodeJS, iPython, ... You enter your commands, one at the time, and they prints out their results, one at the time. And then?

PHP on the CLI is only an interpreter. Thus, it is capable of evaluating commands and scripts. But, it can't let you pile up commands and spit out their results line by line. It has no REPL capabilities. And what?

REPL makes easy to check some aspect of a language. It lets you play with a language before coding your programs. Having this tool alongside prevents you from writing a ton of scriptlets just to check or enhance your development or improve your syntax.

Thankfully, here comes Boris. It is the REPL that PHP should have from its early days.

Installing it on OSX with Homebrew is easy as pie and is performed with these simple steps:

1. Start by installing some new recipes (or formulas):

   brew tap josegonzalez/homebrew-php

2. Then, install a local PHP interpreter. I prefer installing the 5.4 release as it matches the one provided with OSX but you can experiment with other if you plan on mimicking one of your servers in production:

   brew install php54

   
   Note: If you haven't done it before, Homebrew may warn you that a zlib dependencies is not met. In this case, follow his advice by running the following command and re-running the former one:

   brew tap homebrew/dupes

3. Now, you should have a local PHP available. It is time to add a decent package management for it, Composer:

   brew install josegonzalez/php/composer

4. And, now, let us invite Boris to the party:
   

   brew install boris

Use boris as any of your regular commands like any regular REPL in your Terminal or iTerm2 or whatever CLI you like.

Ini files are just gray... Color them all in vim

I've just found that whenever I edit a *.conf or a *.cnf file, they just appear without syntax highlighting though Vim has anything to do it properly... Except that it waits for a *.ini extension.
To add other extension to its syntax highlighting capability, just add the following line:

au BufReadPost *.conf,*.cnf set filetype=dosini

Don't sudo vim

Each time you attempt to perform a sudo vim, you end up into the configuration of root. Therefore, you loose some of your personal plugins that requires local commands. That, and a warning message.

There are different ways of achieving a proper  sudo vim (providing a new $HOME via -H or using your /etc/sudoers), but still, there are situations when you have forgotten to use sudo and you end up stuck with a file that you can't overwrite.

My preferred move is to completely avoid using sudo vim and simply hit the following command whenever I need a proper right upgrade:

:w !sudo tee %

Get Apache, MySQL, PHP and phpMyAdmin working on OSX 10.9 Mavericks

Just a re-post :)

http://coolestguidesontheplanet.com/get-apache-mysql-php-phpmyadmin-working-osx-10-9-mavericks/

And, I prefer the CLI over the PKG installation:

http://blog.joefallon.net/2013/10/install-mysql-on-mac-osx-using-homebrew/

Keep your Gulpfile manageable: the Gulp plugins you need to know

CoffeeScript as your Gulpfile

Though being less in the hype today, CoffeeScript shortens the need of writing boilerplate codes (as already detailed in this post A gulp of coffee: your gulpfile in coffeescript). All you need to do is to follow these simple steps:

1. Start by installing CoffeeScript globally:

   npm -g install coffee-script

2. Create a regular Gulpfile.js that bootstraps Gulp into using CoffeeScript:

   require('coffee-script/register');
   // This bootstraps your Gulp's main file
   require('./Gulpfile.coffee');

3. Now, you simply edit your Gulpfile.coffee and forget about most of the semicolon, accolades, parenthesis, ...

Load plugins, automatic loading of your plugins

Like MatchDep or grunt-load-tasks do it for NodeJS and Grunt, gulp-load-plugins leverages your package.json and automatically loads all the plugins in Gulp. Here are the steps to follow:

1. Start by creating a regular package.json for your project:

   npm init

2. Add locally all your required plugins and save their installation as a development dependency. Here is an example for gulp-clean:

   npm install --save-dev gulp-clean

3. At the very beginning of your Gulpfile.coffee, load Gulp and every plugins in two lines of code:

   gulp = require 'gulp'
   gp = do require 'gulp-load-plugins'  # Load all gulp plugins

4. Now all your plugins are loaded and accessible from the gp object. Their name matches the plugins name in camel case. Putting it more simply, for the plugin gulp-clean, you use it as gp.clean, for the plugin gulp-ruby-sass, you use is as gp.rubySass.

Plumber, avoid restarting Gulp when transpiling fails

When you start your watch and transpile tasks for the first time, it happens that syntax errors abruptly ends Gulp. It forces you to go the old way, fixing the bugs, re-launching Gulp, fixing the bugs, re-launching Gulp, ... tedious, to say the least.
gulp-plumber avoids the stream to end upon error. Thus, whenever you need a transpilation, you just add gulp-plumber to your pipes. Here is a simple example that shows up how to use it.

gulp.task 'css', ->
  gulp.src 'app/css/index.sass'
    .pipe gp.watch()
    .pipe gp.plumber()    # Add Plumber just before the transpilation
    .pipe gp.rubySass()
    .pipe gulp.dest 'www/css'

Installing is made easy thanks to the automatic loading of plugins as described in the previous paragraph:

npm install --save-dev gulp-plumber

Connect, start a livereload server, open your file and a create a static server in one plugin

This plugin gulp-connect is incredibly powerful: it combines a connect server with a tiny-lr one and it opens your transpiled files. Pure voodoo style. Here is short example of its basic usage:

path  = require 'path'
# Start a webserver for static files
gulp.task 'webserver', gp.connect.server
  root: path.join __dirname, 'www'
  port: 9000
  livereload: true
  open: browser: 'Google Chrome'

Just like before, the installation is easy as pie:

npm install --save-dev gulp-connect

Now, on each watch task requiring a livereload, just add a gp.connect.reload() call to their task.
Note : BrowserSync is also a very good alternative.

Autoprefixer, forget about vendor's prefixes

Wether you use pure CSS, Less, Stylus or Sass and its compagnon Compass, you have to take care of vendor prefixes depending on the public your website or hybrid app are targeting. Doing it manually is a pure madness. But using some libraries assistance may also ends up in a tedious work, piling up a bunch of libraries that you need to add or remove depending on public adoption of next generation of operating systems and browsers.
Autoprefixer does this automatically for you. It leverages the usage statistics Caniuse (by the way, an incredible and so useful website) and adds to your CSS just the prefix that it requires. A life time saver. Using it in Gulp is incredibly easy. Here is a simple example that takes Sass as its input and produces the CSS for 99% of browsers:

# Create CSS from SASS
gulp.task 'css', ->
  gulp.src 'app/css/index.sass'
    .pipe gp.watch()
    .pipe gp.plumber()
    .pipe gp.rubySass()
    .pipe gp.autoprefixer "> 1%"  # Set Autoprefixer for 99%
    .pipe gulp.dest 'www/css'

A complete sample

To complete this article, here is one of the Gulpfile.coffee that I've used on a production website (a very basic SPA):

gulp  = require 'gulp'
# Load all gulp plugins
gp    = do require 'gulp-load-plugins'
path  = require 'path'

# Start a webserver for static files
gulp.task 'webserver', gp.connect.server
  root: path.join __dirname, 'www'
  port: 9000
  livereload: true
  open: browser: 'Google Chrome'

# Create CSS from SASS
gulp.task 'css', ->
  gulp.src 'app/css/index.sass'
    .pipe gp.watch()
    .pipe gp.plumber()
    .pipe gp.rubySass()
    .pipe gp.autoprefixer "> 1%"
    .pipe gp.cssmin keepSpecialComments: 0
    .pipe gulp.dest 'www/css'
    .pipe gp.connect.reload()

# Create HTML from Jade
gulp.task 'html', ->
  gulp.src 'app/index.jade'
    .pipe gp.watch()
    .pipe gp.plumber()
    .pipe gp.jade()
    .pipe gulp.dest 'www'
    .pipe gp.connect.reload()

# Copy font files
gulp.task 'copy_fonts', ->
  gulp.src './bower_components/font-awesome/fonts/*'
    .pipe gulp.dest 'www/fonts'

# Copy vendor JS files, concatenate them and uglify them
gulp.task 'copy_js', ->
  gulp.src [
    'bower_components/better-dom/dist/better-dom.js'
    'bower_components/better-details-polyfill/dist/better-details-polyfill.js']
    .pipe gp.concat 'better-dom-and-plugin.js'
    .pipe gp.uglify()
    .pipe gulp.dest 'www/js'

# Copy vendor CSS files and minifies it
gulp.task 'copy_css', ->
  gulp.src [
    'bower_components/better-details-polyfill/dist/better-details-polyfill.css']
    .pipe gp.cssmin keepSpecialComments: 0
    .pipe gulp.dest 'www/css'

# Clean produced files
gulp.task 'clean', ->
  gulp.src ['www', 'tmp']
    .pipe gp.clean()

gulp.task 'default', [
  'copy_fonts', 'copy_js', 'copy_css'
  'css', 'html', 'webserver']

And here are the relevant part of its package.json:

{
  "name": "Blablabla",
  "version": "0.0.0",
  "description": "",
  "main": "Gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Me",
  "license": "MIT",
  "devDependencies": {
    "gulp-cssmin": "~0.1.0",
    "gulp-ruby-sass": "~0.3.0",
    "gulp-util": "~2.2.14",
    "gulp-autoprefixer": "0.0.6",
    "gulp": "~3.5.2",
    "gulp-jade": "~0.4.1",
    "gulp-watch": "~0.5.0",
    "gulp-sass": "~0.6.0",
    "gulp-plumber": "~0.5.6",
    "gulp-clean": "~0.2.4",
    "gulp-load-plugins": "~0.3.0",
    "gulp-concat": "~2.1.7",
    "gulp-uglify": "~0.2.1",
    "gulp-connect": "~0.3.1"
  }
}

Get CLI results in Vim

Still a nice trick. When you need to get the results from a command line into your documentation, you can use Vim's ability to run Bash / Zsh commands and read their outputs.

For instance, I want to list all the files contained into a directory:

:r ! ls -l my_dir

Another nice example, I want to show the directory tree of my project into my documentation :

:r ! tree -d

Note : On OSX, you can install tree with Homebrew easily:

brew install tree

Git & GitHub Foundations • Forks and Pull Requests

A simple and nice tutorial to refresh my memory when I contribute on Github.

Chien + Zen : Quelque chose a changé ?

Il semble qu'il y ait quelques changements sur le site de notre nouvel ami.

Les masques vont bientôt tomber !

A gulp of coffee: your gulpfile in coffeescript

Pros and cons

Gulp is  a new buildsystem for the web. It contrasts with Grunt by leveraging NodeJS's streams. Therefore, it writes no temporary file on your drive when you're performing multiple operations on your assets. Of course, it speeds up the build process, but it is not the only advantage. Thanks to the streams, when you write your tasks, it feels more like you are describing the required workflow. For me, it is much more natural.

The main drawback that I've found is its inability to directly use CoffeeScript as its main file. Streams and their piping abilities produce a ton of parenthesis obfuscating the semantic of your development with unnecessary grammar and syntax requirements.

Regaining access to CoffeeScript

Like Grunt, Gulp expect a main file named Gulpfile.js. We will use this file to bootstrap CoffeeScript and, thus, regain access to a more friendly language. Of course, the same trick could be applied to other languages such as Dart or TypeScript.

Gulpfile.js

// Note the new way of requesting CoffeeScript since 1.7.x
require('coffee-script/register');
// This bootstraps your Gulp's main file
require('./Gulpfile.coffee');

That's it.

Now, just an example that demonstrates the achieved advantage, and also, the new parenthesis free chaining of CoffeeScript 1.7. The following script transpiles Jade, minifies it, compresses your SVG, transpiles your Sass, autoprefix it and minifies it, copies the fonts used in your Sass files.

Gulpfile.coffee

# Load all required libraries.
gulp       = require 'gulp'
sass       = require 'gulp-ruby-sass'
prefix     = require 'gulp-autoprefixer'
cssmin     = require 'gulp-cssmin'
jade       = require 'gulp-jade'
minifyHTML = require 'gulp-minify-html'
svgmin     = require 'gulp-svgmin'

# Create your CSS from Sass, Autoprexif it to target 99%
#  of web browsers, minifies it.
gulp.task 'css', ->
  gulp.src 'app/css/index.sass'
    .pipe sass()
    .pipe prefix "> 1%"
    .pipe cssmin keepSpecialComments: 0
    .pipe gulp.dest 'www/css'

# Create you HTML from Jade, Adds an additional step of
#  minification for filters (like markdown) that are not
#  minified by Jade.
gulp.task 'html', ->
  gulp.src 'app/index.jade'
    .pipe jade()
    .pipe minifyHTML()
    .pipe gulp.dest 'www'

# Minify your SVG.
gulp.task 'svg', ->
  gulp.src 'app/img/*.svg'
    .pipe svgmin()
    .pipe gulp.dest 'www/img'

# Copy the fonts using streams.
gulp.task 'copy', ->
  gulp.src 'app/fonts/*'
    .pipe gulp.dest 'www/fonts'

# Default task call every tasks created so far.
gulp.task 'default', ['css', 'html', 'svg', 'copy']

QtDD13 - The Qt Path - Lars Knoll (+playlist)