Following Palm’s trails, Mozilla is pushing its own phone OS based on Web technologies. Not to end the same way, Mozilla is betting on openness by allowing anyone to build FirefoxOS phones and apps. The corporation has also decided to start with emerging markets, leaving the western markets to Android, iOS, Windows8 and others.

The device

Even if the Keon is meant to be used for development, I guess some people will want to use it as their main phone (even if they shouldn’t). For them, here is what the hardware feels like.

Costing approximatively 100€, the Keon is on par with similarly priced Android devices. The device is light and not too thick (approx. 12mm).

The body is made of a rubberized and soft plastic that feels pretty good. The device has one 3MP camera on the back, one micro USB port, one audio jack, one loudspeaker, a power button and a volume rocker.

Even if the color is rather unusual for a phone, the industrial design is pretty good for a cheap phone.

Now let’s see what’s inside.

The CPU is a 1GHz Qualcomm Snapdragon, the small internal storage (4GB) is dedicated to the system and cannot store media files. You will have to add a micro SD to take pictures, watch videos or listen to MP3 files. The device supports 3G, WiFi N, Bluetooth 2.1 EDR, has light and proximity sensors, a gyroscope and a GPS. Considering they are targeting emerging markets, the included FM radio is a smart addition. Consumers will be happy to be able to listen to music without having to consume their data plan or purchase tunes.

The screen is probably the most important part of the phone and is probably the most disappointing. The resolution (320×480) is standard for the price, but the quality of the display isn’t great. The most visible problem is color rendering. I don’t know how many colors the screen can display, but we can clearly see dithering and banding problems on gradients. Most people wouldn’t mind, but as a designer, it’s hard not to notice.

Overall, the Keon is what you can expect from a 100€ phone : a device with compromises to make it affordable. Can the OS bring more value to it?

The operating system

What’s included

At the very beginning, the OS was simply meant to launch a browser, with a name to show that: Boot2Gecko. Now, the OS has been rebranded to FirefoxOS and offers what’s expected from a smartphone OS:

There are no widget or live tiles. If you like to get information at a glance, you’re out of luck.

The visual design

The interface feels a bit dated and has some way to go to match what Android and iOS offer.

Icons are not always consistent and feel amateurish sometimes. Font rendering is OK and the standard font is a nice and modern sans serif. Animations can be found everywhere and are smooth most of the time.

Globally, the UI is responsive, except when the CPU is struggling with a computing intensive task obviously.

User experience

On the user experience side, FirefoxOS has borrowed many things from iOS and Android, and feels familiar if you’re coming from one of these worlds.

The lockscreen doesn’t do much. It displays the time and allows you to access the camera quickly or to unlock the phone. Both actions requires 2 gestures: a swipe to reveal the buttons, and a tap to activate the selected option. It’s more work than on the iPhone for instance.

The homescreen is similar to the iOS one. It can only be scrolled on one dimension, which is a good thing I think. Knowing where you are is easy, and you simply flick through the “cards” to browse.

There are 3 kinds of cards. The first one is a blank one that only displays the time. I’m not quite sure what its purpose is.
When you scroll to the right, you’ll get the second type of cards. These cards are shelves for app icons.
When you scroll to the left, you’ll get to a search engine, to find stuff in your phone or on the Web.
Just like iOS, you can long-tap icons to enter “reorganize” mode so that you can delete or move apps.

Firefox OS on the left, webOS on the right

After a few days of use, I also stumbled on a few bugs. I’m running Boot2Gecko 1.0.1.0-prerelease which is a developers preview, so it was to be expected. According to Mozilla, updates are coming and will fix those issues.

Comme de son côté, Free n’a visiblement pas l’intention d’agir, j’ai cherché des solutions.

Changer de fournisseur d’accès à Internet

Suggéré par @edasfr et @Voulf, cette solution est un peu radicale. Étant donné que le problème est uniquement entre Free et Google, il suffit de passez chez un autre fournisseur pour retrouver un confort de lecture acceptable. Je ne pense pas le faire dans l’immédiat, mais ce serait la vraie bonne solution.

Contourner les serveurs de cache de Youtube

function FindProxyForURL(url, host) {
    if (isInNet(host,"173.194.52.0","255.255.252.0") ) return "PROXY localhost:1";
    return "DIRECT";
}

Passer par un serveur proxy

ssh -D 8080 user@monserveur.amazonaws.com

Il faut ensuite indiquer au navigateur d’utiliser localhost sur le port 8080 comme un proxy SOCKS5.

Cette solution semble fonctionner, mais la bande passante semble un peu limitée. Avec mon serveur en Amérique du Nord, je peux télécharger à environ 2Mb, avec des hauts et des bas.
Les vidéos se chargent un peu mieux avec Amazon EC2, mais il y’a tout de même des coupures où le trafic tombe à zéro.
Ce proxy pourra sinon servir à consulter des contenus qui ne sont limités aux USA, comme Pandora ou Hulu. Et comme le serveur ne coûte rien quand il est éteint, on peut le lancer que lorsqu’on en a besoin.

OVH

Pour OVH, la démarche est très similaire à Amazon. On commande et on lance son serveur en quelques minutes. D’après mon test, les performances sont meilleures qu’avec Amazon, et j’arrive à lire des vidéos quasiment sans interruption, et même en HD 720p. OVH est donc la solution que je vais garder pour le moment. Reste à voir dans la durée si ça tiendra.

Si vous avez d’autres techniques, n’hésitez-pas à les poster dans les commentaires !

To build a small Airplay speaker, here is what you will need:

• 1 plastic box: 8€ from Muji
• 1 power adapter: 7€ from RS Components
• 1 Raspberry Pi: 32€ from RS Components
• 1 Edimax EW-7811un USB WiFi dongle: 10€ from Amazon
• 1 pair of USB powered speakers: 8€ from Pearl.fr
• 1 SD Card: 0€. You probably already have one.

Assembling

Extract the speaker drivers and the amplifier from the USB powered speakers. The amplifier happens to be a LM4863 and the drivers have a diameter of 5cm.

Cut two holes on the side with a 4.5cm with a hole saw (that goes on an electric drill). The hole must be a little smaller than the driver for them not to fall into the box.

Place the speaker drivers from the outside of the box, and glue the border from the inside of the box.

Solder the speakers to the amplifier.

Install the official Debian, install Shairport, configure the WiFi connection. Make sure that WiFi connection and the shairport software are launched at boot time.

Plug the amplifier to the Raspberry Pi with the audio jack and the USB plug.

Pack everything into the box.

Plug the power.

That’s all!

The sound is fairly loud (enough for a kitchen or a bathroom) but the amplifier suffers from some minor interference noise. To make it look cooler, I will probably wrap it in a felt sleeve and add a cork top. I might also add a 5V battery to make it autonomous, but it would increase the cost of the projet.

At the end, the device is cheap, stylish and sounds pretty good for the cost. Feel free to ask questions in the comments.

I’ve recently tried to setup a WiFi connection with the RaspberryPi and encountered some issues: the connection didn’t start automatically and it wasn’t stable. I’m using an Edimax EW-7811Un USB dongle, which is supposed to be supported out of the box with Raspian Wheezy (2012-12-16).

After researching the issue, I finally have a configuration that works reliably. Here are the steps I’ve followed.

Setting up the configuration

Edit the /etc/network/interfaces file to look like this:

auto lo

iface lo inet loopback
iface eth0 inet dhcp

#auto wlan0
allow-hotplug wlan0
iface wlan0 inet manual
wpa-roam /etc/wpa_supplicant/wpa_supplicant.conf
iface default inet dhcp

Then add your WiFi parameters to /etc/wpa_supplicant/wpa_supplicant.conf.
Here are my parameters to connect to my freebox (French ISP router).

network={
        ssid="YOURSSID"
        scan_ssid=1
        key_mgmt=WPA-PSK
        proto=WPA
        psk="YOURPASSWORD"
}

At this point, the you should be able to start the connection with this command:

sudo ifup wlan0

In some cases, you might need to do sudo ifup wlan0 first.

Connect automatically when booting

To make the connection work when the RaspberryPi boots, I have added a few lines to /etc/rc.local (source) :

echo "Starting WiFi..."
wpa_supplicant -B -i wlan0 -c /etc/wpa_supplicant.conf
sleep .5s
dhclient wlan0
echo "WiFi should be started"

exit 0

Keep the connection alive

To make sure that the connection stays up, I’ve done two things.

First, disable the power management of the WiFi dongle. Create a new /etc/modprobe.d/8192cu.conf file with this content (source):

options 8192cu rtw_power_mgnt=0 rtw_enusbss=0

Then, make the RaspberryPi ping the router every minute. Open your crontab:

$ crontab -e

and add this line at the end :

*/1 * * * * ping -c 1 192.168.0.254

Replace the IP address by the actual IP address of your router.

It took me some time to get it right, but now the Pi connection seems to work fine.

The cool thing is how it works: you take a screenshot of the game (iPhone4, iPhone5, iPad) and you upload it. What you get is a list of matching words. I might detail how it works later.

The app currently works fine on desktop browsers but is still buggy on Safari iOS. The code is on github : https://github.com/mauricesvay/CheaterPress

• be extensible, by using plugins to support more websites;
• save resources, by limiting the number of HTTP requests needed for image resolution. Some plugins make zero HTTP requests and guess the image URL right away.

ImageResolver.js currently supports 9gag, Imgur (widely used on Reddit), flickr (requires an API key) and Instagram. For regular webpages, it will try OpenGraph meta tags (popularized by Facebook) then fallback to HTML parsing.

Here are the slides of my presentation (in french):

Pour satisfaire ma curiosité, et peut-être la vôtre, j’ai décidé de représenter les mouvements des vélos dans Paris pendant 24 heures. Pour cela, je n’ai pas posé de GPS sur tous les vélos, mais j’ai simplement “emprunté” les infos fournies par le site http://www.velib.paris.fr pour les visualiser sur une carte. Encore une bonne occasion pour faire de la visualisation de données sur des moyens de transport.

Lancer l’application de visualisation

Qu’est-ce qu’on apprend ?

Les données que j’ai collectées concernaient le 31 juillet 2012, un beau mardi d’été.

• La nuit, pas trop de surprises, il y a peu de mouvements;
• À partir de 8h, les stations commencent à se clairsemer. Les Parisiens qui ne sont pas en vacances se rendent au boulot;
• Ce mouvement continue jusqu’à 10h environ;
• La journée, la plupart des vélos sont concentrés dans les arrondissements centraux et le sud de Paris;
• À partir de 18h jusqu’à 20h, les gens rentrent chez eux, permettant aux stations de l’est et du nord de refaire le plein.

J’ai également noté que les stations rive gauche ont toujours plus de vélos que les stations rive droite. Il faudrait vérifier les données pour voir si elles ont simplement plus de capacité ou si elles sont juste moins utilisées.

Comment ça marche ?

Sur le plan technique, l’outil de visualisation est assez simple. Réalisé en HTML5, il s’appuie sur les bibliothèques jQuery et ModestMaps. La (jolie) carte est signée Stamen Design et les données ont été sournoisement collectées par moi-même.

Tout ça ne me permet pas forcément de trouver plus facilement un vélo, mais au moins je sais où sont ces vélos, bordel !

Ce dimanche avait lieu le Music Hack Paris à la Cartonnerie. J’ai pu assister aux démonstrations des projets.

Quand on arrive à la Cartonnerie, on tombe d’abord sur une simple vitrine dépolie avec une petit écriteau “Music Hack Paris”. L’entrée où je retire mon badge est une pièce étroite. Mais dès qu’on passe cette étape, on arrive au milieu d’un lieu à la décoration faite de poutres et vieilles machines. Tout le monde s’active. Il ne reste plus qu’une heure aux participants pour finir leur projet.

L’objectif des hackers et des musiciens était d’innover autour de la création, de la consommation et de la découverte musicale. L’ambiance est décontractée et bruyante. Les percussions, la guitare et les sons synthétiques se mélangent avec le bruit des claviers d’ordinateurs.

Ce hackathon organisé par l’UNECO, le Google Cultural Institute et Joshfire avait pour cadre la Journée Internationale du Jazz. Et au final, une quinzaine d’équipes ont sacrifié leurs heures de sommeil pour présenter leur “hack” dimanche après-midi.

Un des projets qui a attiré mon attention est InstaTube. L’équipe est partie du constat suivant : beaucoup de gens écoutent la musique grâce aux diaporamas accompagnés de musique dont regorge YouTube. Ils ont donc créé un outil simple qui permet de générer un diaporama à partir d’un fichier MP3 et de quelques mots clés. L’application se charge de trouver des images et des vidéoclips, de remixer le tout en rythme et d’envoyer le tout sur YouTube. La démo a parfaitement fonctionné et le résultat est peut être plus convaincant que ce qu’on trouve d’habitude sur le site de partage de vidéos.

Les autres projets étaient aussi intéressants mais peut être moins aboutis. On a pu voir des instruments de musique à base Kinect, de la musique générée par capteurs de téléphones, des sculptures métalliques musicales, des pendules pilotant un arduino, un arduino faisant des percussions et des séquenceurs web collaboratifs en temps réel. Les élections du dimanche faisaient même partie de l’événement avec le hack de @sylvinus qui faisait chanter des tweets sur la Marseillaise, en Javascript. Bref, beaucoup d’imagination de la part des participants.

Pour mieux vous rendre de compte de ce qu’il s’est passé, j’ai monté rapidement une vidéo qui montre quelques-unes des démos qui ont été présentées.

Last week-end, I found my old RFID reader in a drawer. It’s a mir:ror, made by Violet, you know, the company that invented Wi-Fi rabbits. The device is a USB HID device and used to ship with a lousy app that could trigger a few predefined actions. But the company is kind of dead now and the driver is no longer available.

So, how hard would it be to write a driver that could do whatever I want? The thing is that I need it to work on OSX. And it would be great if programs could be written in JS, because it’s a language I’m comfortable with.

Being a lazy programmer, I first searched the Web for existing drivers. I found some software written in ruby and .Net. The first one expects the mir:ror to be available in /dev, which is not the case on my Mac (no idea why). The second one is for Windows obviously. Moreover, I don’t know any of these languages.

Out of luck, I wondered: is it possible to communicate with USB HID devices in NodeJS? Thirty seconds of googling later, I stumbled on this cool node extension: Node HID that does exactly what I’m looking for (you could also program keyboards, keypads, mice, etc.).

The next step was to code the driver. Hopefully, the protocol is simple and documented on this blog: http://blog.nomzit.com/2010/01/30/decoding-the-mirror-comms-protocol/.

Below is the code of the driver. It can read RFID tags, detect when the device is upside down, and disable the annoying lights and sound.

var HID = require('HID');

var devices = new HID.devices(7592, 4865);
var hid;
if (!devices.length) {
  console.log("No mir:ror found");
} else {
  hid = new HID.HID(devices[0].path);
  hid.write([03, 01]); //Disable sounds and lights
  hid.read(onRead);
}

function onRead(error, data) {
  var size;
  var id;

  //get 64 bytes
  if (data[0] != 0) {

    console.log("\n" + data.map(function (v) {return ('00' + v.toString(16)).slice(-2)}).join(','));

    switch (data[0]) {
    case 1:
      //Orientation change
      switch (data[1]) {
      case 4:
        console.log("-> mir:ror up");
        break;
      case 5:
        console.log("-> mir:ror down");
        break;
      }
      break;
    case 2:
      //RFID
      switch (data[1]) {
      case 1:
        console.log("-> RFID in");
        break;
      case 2:
        console.log("-> RFID out");
        break;
      }

      size = data[4];
      id = (data.splice(0)).splice(5, size);
      console.log(id.map(function (v) {return ('00' + v.toString(16)).slice(-2)}).join(','));
      break;
    }
  }
  hid.read(onRead);
}

Now that NodeJS can react to RFID tags, we can do all sorts of things, like switching between spaces on a Mac. Check out the video to see a demo.

Twitter Bootstrap extracted palette

Facebook extracted palette

My goal was to create a tool that would help me consolidate the palette of an ever growing CSS. To achieve this goal, I needed a tool that can:

The result is CSS Color Palette Extractor, a pure JS app that does what I need. You can try the demo and fork it on github.

On the technical side, the app uses the great CSS parser written by Daniel Glazman to extract color values. It also includes code from Andrew Brehaut for color management/conversion. My own code is a bit rough but does the job. There are a few known issues. I haven’t found how to make the parser work with media queries. If you’re doing responsive design, simply extract medium per medium. Also, my app cannot extract colors from gradient backgrounds.

It’s sometimes nice to step back from code and analyze what’s going on. I hope that CSS Color Palette Extractor will help you to do just that. If you want to use the code, feel free to fork it on github.