Speed boost your Android emulator

By default, the Android Emulator is software based. Firing it up takes around ~1min and it consumes a lot of CPU power and battery life, which is a pain when you are using a laptop.

Along with your installation of your Android SDK Manager, there is an extra option which allows you to install HAXM, the Hardware Accelerated Execution Manager from Intel. You find it just here :

However, once downloaded, this tool is not installed automatically. You have to execute it. Open a terminal and hit the following command :

open /usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM.dmg

But wait, if you are on a OSX Mavericks or on Windows 8, don't start your Android emulator too quickly. The Android SDK provides an old release that would make your Mac or PC to hang (yerk). Fortunately, Intel provides a fix available in the Developer Zone.

OK, now, we are ready to speed up the Android Emulator.

Go back to your Android SDK Manager and in Tools > Manage AVDs , create a fresh Android Virtual Devices. In the creation pane, check the option Use Host GPU.

The speed boost is amazing: starting the Android Emulator takes now around ~30s. But it's not the only interesting side effect. Now, all your emulated apps go faster and it takes less, I mean really less, power on your host.

Just a couple of caveats though. Using the Android Emulator doesn't prevent you from testing your apps on real devices. As a matter of fact, the Intel Android Emulator uses your Intel processor (better being said than being sorry...). Therefore, your native code and by native I mean the real native code (the one being written in C or C++, not the Java code, which is called native but is more a Just in time interpretation of Java bytecode) may have quirks on MIPS processors that you just can't see on Intel's ones.

Screen capture as PNG on OSX

By default, OSX captures screenshots in the Finder as TIFF. You can customize this behavior so that the screenshots are saved as PNG. Open up your terminal and hit the following command:

defaults write com.apple.screencapture type -string "png"

Other options are allowed: BMP, GIF, JPG, PDF, TIFF.

An other nice move is to place your screenshots directly on your desktop:

defaults write com.apple.screencapture location -string "$HOME/Desktop"

And if you want to remove the shadow from the captured windows, just use the following stance:

defaults write com.apple.screencapture disable-shadow -bool true

Now, to take advantage of screen capture in your Finder, you can use the following key combinations:

• ⌘+⇧+3: Capture the whole screen.
• ⌘+⇧+4: Capture a selection of screen, end the selection via ␣ (the SPACE bar key).

As a nice tip, you can alter the saving behavior with ⌃ (the ctrl key) so that all your screenshots ends up in your clipboard instead of your Desktop.

Automated splascreens for mobile and tablet applications

When creating mobile or tablet applications, your assets take time to load. Wether you prefer native or hybrid development, you end up customizing splashcreens for each of the screen resolutions, layout modes (portrait or landscape). This work is a bit cumbersome and no responsive technics exist in this field.

I have come up with a nice solution that takes a single PNG file as input. This file must be designed with every constraints in mind. Therefore, I also provide a canevas that helps out its creation:

Once done, using Grunt and my plugin grunt-phonegapsplash, creating all your required splashscreens is a matter of a single command line.

Here is the basic workflow that it automatically handles for you :

The canevas and the source file are available on Github. The plugin is easily installed via npm.

Créer des icônes d'applications pour tablettes et mobiles à partir d'un SVG

A chaque fois que vous ciblez un nouvel OS pour applications mobiles et tablettes, il est nécessaire de produire plusieurs types d'icônes. Pour alléger ce travail fastidieux, j'ai publié un plugin pour Grunt.

Un petit graphique vaut mieux qu'un long discours :

Ce plugin s'appelle grunt-svg2storeicons. Son code source est disponible sur Github et disponible sous la forme d'un module npm.

Ma configuration personnelle de Vim, Git, Zsh et Tmux

J'ai publié mes doftfiles sur GitHub. On y retrouve ma configuration personnelle sur OSX pour mes outils quotidiens :

• Vim
• Git
• Zsh
• Tmux

Note : Mes fichiers de configuration sont très orientés développements C++, HTML5 & Python. Ces langages étant l'essentiel de mon utilisation personnelle.

Remplacer Word par HTML5

Je ne suis pas un adepte des outils de bureautique. Dès que l'on passe d'un OS à l'autre, les résultats sont catastrophiques : le formatage est systématiquement mis à mal. S'il existex des solutions déjà éprouvées tels LaTeX, leurs formats est un nouvel apprentissage ralentissant la création.

Ma solution est de passer par HTML5. En effet, depuis CSS 2.1, il est possible d'appliquer des propriétés pour les sauts de pages à l'impression (page-break-after, page-break-inside, ...). Avec CSS 3, les media queries permettent de sélectionner les propriétés qui seront utilisées en fonction du média de rendu (screen et print, dans notre cas). Un seul document, une mise en page adaptée en fonction du rendu. Cela rappelle sérieusement le RWD, non ?

Mais voilà, après, il faut produire son fichier de sortie. Un PDF généralement. Comment faire rentrer cela dans une chaîne de production automatisée pour éviter les multiples combinaisons de touches et d'ajustements spécifiques ?

Ma solution préférée est d'utiliser PhantomJS.

Pour ceux, qui ne le connaisse pas, c'est un navigateur sans fenêtre de rendu. Quoi, mais ça ne sert à rien ? Et bien si, vous avez bien lu. Un navigateur sans fenêtre de rendu. On l'utilise pour tester les développements web ou hybrides en y injectant ses tests sous la forme de directives en JS. On peut alors vérifier si les éléments ont été rendus proprement, en combien de temps, et on peut faire des sorties sous plusieurs formats pour vérifier les régressions d'une version à l'autre. Les sorties sont du type PNG, JPEG, ... et PDF !

Et oui, c'est là que ça devient intéressant. Toute page web peut être rendue sous la forme d'un PDF via une simple ligne de commande :

phantomjs rasterize.js dist/index.html mon_impression.pdf A4

• rasterize.js est le petit script injecté permettant l'impression, disponible ici avec quelques explications supplémentaires.
• dist/index.html est votre page à imprimer.
• mon_impression.pdf est le fichier PDF qui sera créé.
• A4 est le format sélectionné et vous pouvez en changer comme bon vous semble.

Et voilà. Une petite intégration avec votre gestionnaire de tâches préférés, Grunt pour ma part, et vos fichiers sont créés à la volée dès que vous changez une virgule ou une couleur de fond.

Un livre de chevet sur le métier WPO (Web Performance Optimization)

Pour tout architecte se respectant, quelques livres viennent marquer votre vie. "High Performance Browser Networking" fait parti de cette catégorie.

Orienté Web, il est aussi utile à toute personne désirant améliorer son infrastructure, comprendre les mécanismes et implications des protocoles utilisés. Il est notamment particulièrement intéressant pour les applications mobiles, natives comme hybrides. Il reste très didactique et comme j'ai l'habitude de le dire, il se lit comme un roman de plage. Bref, un 'must have' de la part d'Ilya Grigorik.

PS : Je vous recommande la lecture de son site ainsi que ses vidéos disponibles sur YouTube.

Occuper inutilement votre bande passante pour tester vos équipements

Un de mes responsables de tests favoris me demandait comment réaliser une occupation de bande passante pour ses tests CPL et IAD (des box aussi appelées Gateways). Il travaille essentiellement sur Windows.

Ma solution est assez simple et peut vous être utile. Il suffit d'installer wget et de déposer sur l'IAD un fichier bien volumineux. La plupart des IAD du marché sont équipées d'un DMS : un serveur de médias de type UPnP A/V & DLNA. Ces petites bêtes sont alors visibles tels de simple serveur HTTP.

Il faut alors repérer l'URL du fichier déposer. Je vous conseille l'excellente suite d'outils UPnP Tools pour y arriver. Vous avez l'adresse ! Alors, rendez-vous à la dernière étape, elle consiste à utiliser un fichier BATCH (old school mais très simple) de façon à requérir le fameux fichier indéfiniment. C'est sur cette requête que vous appliquer l'occupation souhaitée de bande passante.

Voici le petit script bandwidth_alloc.bat :

:start
wget -r --limit-rate=30k http//url_sur_l_iad/grosfichier.mkv -o wgetlog
goto start

Dans ce script, la limitation est placée à 30ko.

Faciliter l'intégration d'images responsives avec Grunt

Dernièrement, j'ai eu l'occasion de travailler avec Shiawuen sur une technique appelée Clowncar. Cette technique permet une intégration simple de vos images en mode responsive  : en fonction du périphérique (ordinateur, tablette ou modèle de smartphone), seul l'image dans sa résolution la plus appropriée est chargée. Cette technique est basée sur les articles d'Estelle Weyl.

En quoi consiste cette technique et ce plugin Grunt ?

Et bien, c'est assez futé et simple. Vous centralisez toutes vos photos (ou image pour votre site) dans un unique répertoire. Grunt et le plugin Grunt-Clowncar vont automatiquement créer un fichier SVG par photo (le 'car') et des miniatures (les 'clowns') de ces photos pour chaque résolution des périphériques visés.

Dans chaque SVG se trouve des directives de type media query permettant de pointer vers les miniatures en fonction des périphériques.

Au global, vous insérer les fichiers SVG tels de simples images dans votre page web. Automatiquement, le navigateur de votre périphérique ira chercher la miniature correspondante de la photo : la miniature est la plus appropriée à votre résolution. Nous sommes bien dans le cas d'images responsives mais en ne faisant qu'une petite ligne de code. Simple et efficace.

J'ai fait un petit 'livre de cuisine' (un cookbook) dispo ici : https://github.com/shiawuen/grunt-clowncar#cookbook.