A Year Worth of Side Projects

So, first, who am I? My name's Maël, and my work primilarly focus as a web developer. My training ground is new technologies, since I'm usually fast to understand why and how to use them. I love challenges, and prototyping things. I have to admit that I'm not so good at actually finishing them, but I work on it!

Each year, I start a few new side projects, usually to tackle something new, and most of the time to solve a problem that bugs me at the time. Some of them are now finished, and some are still in active development. But whatever their state is, I still want to make a tribute to all of them.

So get ready for a tour full of ES6 and emulation! And happy new year!

TL;DR Don't want to read the whole post ? Here is a summary with anchor links:

  • [#] Virtjs (ES6, Library, Emulation)
  • [#] OhUI! (ES6, Library, Terminal)
  • [#] Pokelib (Library, Emulation, Pokémon, Angular)
  • [#] Willikins (ES6, Node.js, Web Framework)
  • [#] Pxeger (Library)
  • [#] Fire Emblem Planificator (Gaming, Angular)
  • [#] Castel (C++, Programming Language)
  • [#] ??? (Web Application)

Virtjs (website)

ES6, Library, Emulation

Virtjs is definitely the bigger project from this year (and he is actually still in a very active development - Gameboy Color support has been added a few weeks ago). It's an emulator, yes, but not any emulator - it's an emulator library wrote in Javascript. See, multiple people have made javascript emulators in the past, but so far each one had been a regular side project, a showcase without any real application. Virtjs is new because its main goal is to be a portable library, that anyone can use in any of their side-projects.

Let's say you want to make a Twitch-Plays-Pokemon like. Well, with Virtjs it's only a few line of code away. Want to stream a running emulator? Same thing. Want to run multiple emulators in the same window? Well, if you find a use case that won't be a problem to Virtjs. Want to make stats about Gameboy games? That's SO easy. Really. You want to run your emulator server-side? Why not, it works headless with Node if you want it to.

The library currently supports Gameboy and Gameboy Color architectures, and there's plan to add a lot more. I'm actively looking for contributors - writing an emulator takes time, and I can't work on multiple ones at the same time. So if you ever wanted to learn about emulation, drop me a mail! Note that I'm also looking for users - the API has been updated to fit my use cases, but yours are important too :)

What I learned

  • JIT'ing code, and the nightmares that are self-modifying codes*
  • The gameboy doesn't have any real documentation**
  • The hardest part of any emulator is the corner cases
  • Designing reusable APIs
  • New ES6 features

* I failed my first try to achieve JIT'ing the Gameboy due to the architecture allowing self-modifying codes, but I'll try again later. I've recently understood how to do it, so the next round is promising!

** The official documentation can apparently be found on the net, but I haven't used it, to avoid legal issues (thanks Wine for their guidelines). I guess it wouldn't have helped a lot anyway, cf the next point.


ES6, Library, Terminal

Remember when I sayed that Virtjs was this year's biggest project? Well, it's partly because most of my other side-projects are linked somehow to it. OhUI!, for example, has been created to solve an issue that I had with Virtjs: I wanted to have a real-time debugger, kinda like you can have with Chrome. I tried multiple things (including sourcemapping) but, in the end, DOM operations were just too expensive, and I had to move to the terminal to get the best performances.

So, what is the best way to create a terminal application when you work with Node? Well, there's blessed, which does exactly that. So why not use it? I actually tried, but performances weren't good enough my real-time debugger, and the repaint were really noticeable (too many blinks).

And so I end up writing my own library solving these issues, and called it OhUI!, which us a french wordplay ("Oh oui!"). It's performant (at least, live update repaints aren't visually noticeable), has really nice features, and, best of all, a DOM-like interface. What does it mean? Well, that you almost don't have anything new to learn. If you want to give your elements an absolute positioning, you just throw it an absolute positioning and the "top" / "left" properties, otherwise they'll be put as in a browser, each one under the previous one.

Please note that it's not a 1-1 conversion, so you cannot port a web application to a CLI interface. It's really similar in the spirit, but not in the implementation itself.

What I learned

  • How browser rendering works
  • Relative size / positioning are a mess
  • Designings APIs
  • Using ES6

Pokelib (example)

Library, Emulation, Pokemon, Angular

Virtjs first showcase! The Pokelib is a small library which plugs itself onto a running Virtjs emulator. It then provides a nice javascript API to manipulate the memory state during the runtime. If you want to list the pokemon in your team, you just have to iterate an array-like object rather than check yourself the memory state. Easy enough, right? I think it could be especially useful to build rich game interfaces - maybe even write a next-gen wrapper using the data extracted from an 'old' Pokemon rom! I'd love so much seeing a project doing this.

To give you an example, the Pokelib example is using Angular to display the current team, while the game is running. Isn't that great?

(Note that the Pokelib is currently using an older version of Virt.js, before it moves to ES6. I still have to update it to the newest revision. Despite this, it's one of my projects with the most pull requests! 2!)

What I learned

  • Nothing; it was a showcase more than anything else!


ES6, Node.js, Web Framework

See what Django is to Python (or Symfony to PHP)? Well, Willikins wants to be kinda the same thing, but for Node, and especially ES6. I mean, thanks to this new language revision we finally got modules, why not use them?

So, with Willikins, you can:

  • Have multiple profiles, for each purpose you want to have (such as test/dev/prod)
  • Keep your code clean (a sweet file hierarchy is the way to heaven, so I'm told)
  • Write your custom commands (for example to load your fixtures)
  • Easily design a REST API (thanks to a builtin middleware)
  • Use ES6 now, without any setup (because Willikins bootstraps your application itself)

Willikins does not:

  • Rewrite the HTTP stack (it uses Express)
  • Rewrite the SQL stack (it uses Sequelize)
  • Rewrite the ES6 transpiler (it uses Traceur and Systemjs)

It's still a work in progress, and I'd love to get some feedback. If you're looking for a framework for a side project of yours, and like ES6, give it a try! If you're looking for something to put in production, well, feel free to use Willikins, but be ready to write some PR :)

For the reference, I'm using it for a project which should go into production soon, and it works really well!

(If someone has an idea to fix the SystemJS stack traces to use sourcemaps, that would be a great addition)

What I learned

  • I made a few pull requests to other OSS repos to fix bugs I had found when working on Willikins
  • Designing a framework (pretty different from a library)
  • How to use Sequelize
  • New ES6 features



A funny Node module. Pxeger ("Regexp" backward) computes the reverse of a regular-expression-like string. What I mean is that if you give it h[ao]{2}, it will give you an array with 'haa', 'hoo', 'hoa' and 'hao'.

It may be useful for mockuping application, or at least I made it with this use case in mind. For example, if you want to generate an email list, the following gives you plenty enough to work with:


(note that . doesn't mean the same as in a regex, since you probably don't want to expand it to "every possible character". The same reasoning means that *, + and {N,} aren't supported either, you have to use {N,N} or {,N} instead)

What I learned

  • Nothing; it was just for fun!

Fire Emblem Planificator

Gaming, Angular

Really small project, since I limited myself to 24 hours max (and ended up with far less). I wanted to pair up my characters for my third Fire Emblem Awakening playthrough (this game is great! You should try it if you have a 3DS, and / or like tactical RPG), but I hadn't been able to find a easy viewer for possible pairings (since every character cannot be paired to any other). So I made my own and shared it on Reddit, where it was pretty well received.

What I learned

  • Due to the way the pairings work, some thoughts were required with the data structures.
  • I liked working on the Angular perfs, especially to remove circular references.
  • Used a few pup / grep / sed combo to avoid typing all the data files myself :)


C++, Programming Language

Castel is a dynamic programming language, which kinda looks like what ES6 will be - I implemented Closure, firt-class citizen functions & classes, and a few other things. It's mainly a playground for better understanding the problematics around designing and implementing a language. I started it in 2012.

I mention Castel here for completeness, but I haven't actually worked on it a lot this year. I really wanted to do it, but I also wanted to showcase it to you guys. Since I know that installing and compiling something new might be a bit tedious, I wanted to compile it to Javascript myself (using emscripten), then run it in the browser.

I successfully compiled LLVM (which made me pretty happy!), but I had some issues with compiling Boost, and never actually managed to compile it (it may be better now. I hope someday we can see an "emscripted repository" of libraries).

So, my second idea was to run a x86 emulator with the Castel binary pre-installed. Unfortunately, it didn't go very well, since I had trouble to find working js emulators and / or documentations about how to actually create an image. Or the underlying system wasn't ready for LLVM.

And sooooo ... I decided to start my own emulator. But since even I know that starting an x86 emulator without previous experience with emulation would have been a bit crazy, I started with a Gameboy one. And thus was created Virtjs! :)

So, Castel is on hold, at least until Virtjs happens to match its goal : running a well-documented x86 system, ideally Linux. That shouldn't be before a few years, if I don't get help, but we've got time, right? :)


Web Application

I really work hard on this one, and I hope you'll like it as much as I like building it.

It's still to be announced ... see you later!

If you liked this article, let me know! My mail address should be available in my Github profile, but I can also be found on Twitter (@arcanis, mostly in French).

Scrooge McDuck

Il était une fois un petit garçon qui, chaque mois, attendait avec impatience la sortie de son Picsou Magazine. Il aimait bien Donald et sa clique : toujours drôle, avec parfois de subtiles leçons à tirer. Ce n'était pas du Baudelaire, mais c'était toujours rafraîchissant.

Et puis un jour, le petit garçon lût une histoire particulière. Elle était différente des autres à plusieurs égards. D'abord, le style de dessin n'était pas pareil : il y avait beaucoup de détails, et l'arrière-plan de l'histoire faisait à lui-seul une fractale d'histoires parallèles.

Mais surtout, le point qui différenciait cette histoire, c'était les personnages. Vous voyez, l'enfant avait toujours connu Donald comme un personnage rigolo, et Picsou comme un avare. C'était simple, c'était facile. Les petites boîtes.

Mais dans cette histoire, les personnages sortirent du livre. Soudain, ils avaient un passé, des motivations, des sentiments. Les colères de Donald n'étaient plus un simple "comportement par défaut", mais bien une réaction au déroulement de l'histoire. Picsou n'était pas seulement avare, et oscillait entre l'inquiétude, la confiance en soi, la curiosité et parfois une certaine tendresse. La plume de l'auteur leur donnait réellement vie.

Keno Don Rosa.

Tel est le nom de l'un des auteurs qui marqua cette période de mon enfance, et qui aujourd'hui encore éveille des sentiments particuliers. Il publia au fil des années des histoires devenues cultes de nos héros palmés. Il imagina la vie de Balthazar avant qu'il ne devienne Picsou. Il nous fit partager ses espoirs, ses désillusions, sa hargne.

Certains considèrent que Batman est le plus grand héros de l'univers des Comics. D'autres penchent pour Superman. Une partie révère Charles Xavier, et il en est pour rétorquer que les idéaux de Magneto n'étaient pas totalement dénués de sens.

Mon héro, c'est Balthazar. Il n'est pas le plus fort, pas le plus intelligent, pas le plus amical, et certainement pas celui qui a fait le moins d'erreurs dans sa vie. Mais il y a un point sur lequel il est toujours resté fidèle à lui-même : ses valeurs. Et quelles valeurs ! Don Rosa nous a montré ce que Picsou faisait passer avant tout. Pugnacité, curiosité, famille. Honnêteté. Dans les mains de Keno, l'argent n'était plus le but, mais le moyen.

Ce canard, par bien des aspects, est le plus humain des personnages que j'ai rencontré. J'ai relu ses histoires en long et en large il y a quelques années de cela, à la faveur d'un long voyage en train. J'eu le coeur serré en le voyant apprendre la mort de sa mère, puis de son père. L'inquiétude m'étreignit en le voyant devenir plus aigri à chaque nouvelle planche. La déception m'a fait stopper ma lecture lorsqu'il finit par détruire une tribu indigène par avidité, rompant avec ses idéaux. La joie m'a porté lorsqu'il prit conscience de ses erreurs et que, plutôt que de les nier, il en prit compte dans ses aventures suivantes.

Et que dire dans cette page finale de "A Letter From Home" ? Si je devais ne retenir qu'une unique chose de Scrooge McDuck, un unique souvenir, ce serait cette planche.

Picsou est un héro. Il représente le courage, la fierté, et les valeurs qui nous sont chères. Il n'est pas parfait, mais il retombe sur ses palmes, et continue d'avancer et de vivre. Et rien n'est trop dur pour lui.

Disney est libérée, délivrée

Je me suis fait ces derniers jours une bonne flopée de séances de cinéma. Outre l'avant première de The Hobbit 2 à laquelle je suis allé la semaine dernière avec des amis (un joli marathon de film qui s'est achevé à trois heures du matin \o/) et celle d'Albator à laquelle je fonce la semaine prochaine, j'ai également été voir La Reine des Neiges.

Non, je ne ressent même pas le besoin de me justifier, arrêtez de me regarder ainsi.

Donc, La Reine des Neiges (Frozen en anglais, Sneedronningen en danois - de rien). Pour ceux qui ne fréquentent pas beaucoup les salles obscures, il s'agit du dernier Disney en date, réalisé en images de synthèses et basé sur l'histoire du même nom de l'ami Andersen. Ah ah, non, je déconne, l'histoire n'a absolument rien à voir, en dépit de ce que l'on veut nous faire croire. Je pense qu'ils surfent juste sur le branding conte de fée, parce que l'histoire est totalement différente.

Breeef, ça ne part pas super, OK. Les trente premières minutes donnent envie de se lever, de hurler et de repartir écouter du Métal pour se calmer un peu. Ca dégouline de princesse Disney qui chante toutes les deux minutes (j'attend la version DVD pour chronométrer). C'est gniant-gniant, c'est rose, c'est mielleux ... bref, c'est très chiant.

Non, vraiment, c'est horrible. Et puis, soudain, milieu de film, et tu te retrouve soudain à chanter à tue-tête en agitant les mains dans tout les sens des fois que tu aurais subitement pris conscience de tes pouvoirs de X-Men. Parce que c'est beau. Vraiment beau. Quand la Reine se met à chanter, tu vois presque le chateau se former autour de toi. Grosses fécilitations à l'équipe de Disney pour avoir fait ça.

Dur de ne pas spoiler, mais les scénaristes ont aussi innové légèrement : tandis que la plupart des Disney "pour fille" (pas taper) de mon enfance avaient souvent une princesse qui tombe amoureuse d'un beau prince, là on a déjà DEUX princesses et UN prince. Et ... je vous jure, pas facile de ne pas spoiler. Mais mettons que le prince n'est pas classique (et avec La Belle et la Bête, on aurait pourtant pû penser avoir tout vu).

Donc voilà. C'est un Disney beau visuellement, avec une soundtrack pas dégueux, et un scénario qui, sans être ouf, fait figure de sang neuf. Après, il a les défauts de ses avantages : c'est un Disney. On voit qu'ils ont laissé ouvert une toute petite porte pour tenter de ne pas être purement manichéen, et c'est tout à leur honneur, mais ça reste ... well, un peu limité.

Et pour finir sur une note de gaieté, que vous ne devriez pas écouter avant d'être dans la salle de cinéma, à voir le film en 3D :

Weekly Side Project 1 : PEG.js editor

I think I will try to write more about my experiments. Hopefully my english won't hurt anyone ! :)

This time, I wanted to fool around by working on a parser using PEG.js. I knew it well, having used it on some other projects, but creating the grammar was still a pain : the only editor around here is the online one, and is not very user-friendly. Specifically, it does not have syntaxic coloration, does not save grammars, and can hang if you happen to write a bad grammar (which can happen unexpectedly while you are still typing).

To solve this issue, I've worked on an improved IDE which is now done. It uses Angular and CodeMirror for the frontend, and Express and SQLite for the backend. It's main features are :

  • Syntaxic highlighting on both PEG.js grammar files[1] and JSON output
  • Snippets can be easily saved (either ctrl+s or the big Save button) and shared (the page URL will automatically be updated after sucessful save)
  • The generated parsers will hopefully never hang. Try for example this grammar, your browser will detect the infinite loop and timeout the process (Web Workers).

I'm open to any suggestion and bug report, please feel free to post them on the project repository.

Some examples :

[1] Let's thanks Forbes Lindesay for doing the CodeMirror mode a few days before I start this project ! I have made a PEG.js Ace mode a bit before, but I wasn't really fond of Ace due to its undocumented way to add new modes without recompiling the whole thing, so I was really looking forward to using CodeMirror.

Il en faut peu pour être heureux

C'est en tout cas ce que disait ce vieil ours de Baloo ... franchement, s'il en faut vraiment peu pour être heureux, à quel niveau je dois être quand, après une journée de taff intéressant au sein d'une équipe cool, alors que je rentre d'un bar avec mes superbes cousines, je reçois ma cartouche de Pokémon Y juste après avoir commencé à planifier une surprise pour un ami, et que le lendemain verra une soirée de plus entouré de potes ?

Fuck yeah \o/

Canada Reloaded : Backport depuis mon Tumblr

J'ai fini de backporter tout les articles de mon ancien Tumblr vers ce site ! Vous pouvez donc retrouver tout les articles que j'ai écrit concernant mon périple au Canada :)

Les voici donc, du plus récent au plus vieux. Il doit en manquer deux dans cette liste (ceux avec des photos, en plus), je vous laisse les chercher vous même.

Par ailleurs, le blog dispose maintenant d'un flux atom.