LeCamping Mafia

It has been a 3 years since I took part to the first season of the startup accelerator LeCamping in Paris. The application for the 6th season is starting this week. This creates a large network of “alumni” and a large number of startup created, between us, we call it the Camping Mafia.

Some months ago, we decided to build an alumni website. First goal was to create a summary listing of all the startups, inspired from YC list.

Romain Cochet had initiated a fully working Symfony based website. But I was thinking we could have a simpler solution that would encourage collaboration and not rely on a server-side database and hosting.

Based on the design work from Adrien Dupuy, I created a very simple AngularJS client-side application. This allowed us to easily add new features such as filtering and search.

LeCamping Mafia

The source code is available on GitHub and the website is entirely hosted on GitHub pages. Startups data is stored in a JSON file, which encourage edition and update from anyone through Pull Requests.

Go take a look at lecampingmafia.com.


Priority for everyone

Here is a small but powerful idea I recently helped to concretise: Priority for everyone

Priority statement can be as simple as hashing your document and storing it in a bank transfer.

As an inventor, author, artist, scientist or other creator, you may fear that distributing your work creates a risk that others replace or deny your authorship. Here is a simple solution to this problem:

Compute a hash of a document and store it in a bank transaction.

Compute a hash of a document and store it in a bank transaction.

Compute a cryptographic fingerprint from a document and copy it to the text fields of a bank transfer. With such a fingerprint (hash value) stored at a bank there is evidence of the existence of the content of a document at a certain point in time. This can be used to e.g. support a proof of priority.


I helped the inventor of this idea, Ralf, by setting up a simple landing page explaining the idea, by implementing an online version and by broadcasting the message in some online communities.

You can visit the landing page at this address. We tried to be as simpel as possible while still explaining how and why it works.

I created an online application that is performing a hash computation of a document and outputs the results ready to be copied in a bank statement. It is available online and as an offline Chrome app. It was my first Chrome packaged app, it is very pleasant to create simple desktop applications using web technologies and to be able to distribute it so easily.

We had great feedback from Reddit’s /r/legal and /r/crypto communities. But the most interesting discussions came from HackerNews.
The main feedback was regarding the Bitcoin cryptocurrency: Instead of storing the hash in a bank statement, the Bitcoin blockchain could be used. We thus wanted to keep things as simple and trustable as possible to understand for the end user. A bank statement goes more into this direction.

I hope this idea can spread and be useful to you or people you know.


Colourful intermediate results

While killing time in the train, we worked with Anne on a small maze generation algorithm. But what started to be a way to visualise the results, turned into a result in itself (run it yourself here, be patient):

Screen Shot 2014-03-16 at 22.56.59

It all started with a way to visualise the distance of each square in a maze. From start to end, it uses the entire color hue.

Decreasing the wall size was very pleasant visually.

Screen Shot 2014-03-17 at 00.01.09

Visualising the progress of the construction is also very nice, like a growing organism.

Screen Shot 2014-03-17 at 00.29.25

Forgetting about the initial goal, here is a very nice colourful render.

Playing with colours, adding depth

Playing with a colour palette, adding depth by changing the color luminosity

Technically, the rendering is done using HTML canvas. I will detail the maze generation algorithm itself in a future post.

This led me to notice that using the HSL notation when drawing on a canvas was 3 times slower than using other color notation. (I created this JSperf). I filled a bug report on the Chromium bug tracker, let’s hope it will be addressed in the future.

The colourful visualisation is published online, you can run it here.


MRI proton spin: 3D animated mathematical curve in the browser using MathBox.js

My partner is defending her thesis today and she needed some help to produce visuals for the presentation. The goal was to illustrate the relaxation of the spin of a proton that received a radio-frequential impulsion in a constant magnetic field, which is the principle at the root of Magnetic Resonance Imagery.

The visualisation needed to be animated and in 3D. I thought it would be a good use case for MathBox.js, a JavaScript library built on top of three.js, which is built on top of WebGL and developed by Steven Wittens.

This library is designed for mathematical visualisations. You focus on curve expressions and not on geometrical primitives, the engine is then evaluating and interpolating them on every frame to draw them. It works in 2D, 3D space and is not restricted to cartesian space.

I created a 3 step animation. MathBox allows you to write an animation script: you define for each step what is added, removed or animated.

You can load it in your browser at this address.
Or simply watch this youtube video:

I am also glad to use this animation to illustrate the Wikipedia article about MRI and MRN.

Using chrome as my code editor
I wanted to experiment with something that I think will happen more and more in the future: This short project was entirely developed inside the browser.

Code in Chrome dev tools

I had to create the local git repository and its submodules, but then I did not use an other editor than the “Source” tab of Chrome’s Dev Tools. This is possible thanks to Chrome’s “Workspaces” that allow it to map the current page source to a specific folder of your computer. It is then possible to edit and save the resources that are usually read-only. This workflow is more streamlined, than the regular workflow of debugging in the Dev Tools, then going back to the editor, find the line to change, save, go back to Chrome and reload. Here, you do not leave the browser’s window and can edit and save the JavaScript file at the same time of debugging.

Of course, this is a different approach than using an online IDE such as cloud9 IDE, that I also appreciate, but both are interesting and we should definitely keep an eye on these new workflows.


My Portfolio written with AngularJS

I’ve been working with Backbone.JS for the past two years as front-end JavaScript framework for desktop and mobile web apps. I wanted to try a more structured framework. While I read a lot about Web components, that are for me the future of web programming, I had issues using them in a very simple use case. The Polymer project (based on them) looks interesting, but is still in very early stage. That is how I selected the AngularJS framework.

portfolio made with AngularJS

A refactoring of my simple portfolio at http://steren.fr was a perfect candidate as a simple project to learn this framework. You can check the code on github.

I started with Angular’s great getting started tutorial and was then able to start working using the official Documentation and the rest of the interweb.

The app is very simple :

  • It contains two Views (described in partials), that are using the same Controller
  • The data comes from a JSON file and accessible from a Service.
  • I had to write a custom Filter to filter works based the checked checkboxes.

What is interesting is that I didn’t needed to code any data-binding or manual refresh, Angular is handling this for me since everything is properly wired. For example: clicking on  the sort radio-button changes the ‘sort’ variable that are linked to the works filters.

Read and fork the portfolio code on github.


Poker tournament tracker

My parents are regularly playing poker with friends. They keep track of every game in a spreadsheet but had issues determining the overall winners and see who has the best score across games. They were either doing it by hand or using ugly Excel macros that nobody could understand.

poker tournament

I quickly helped them and wrote a Google Spreadsheet custom function that does the job. They now just have to fill in the position of every participant for each game, the final scores and stats are automatically generated.

Get the code on this gist. To use it, you have to copy paste it in a new script linked to your spreadsheet.

I’ve been more and more using Google app scripts for personal or professional projects. I like the fact that they selected JavaScript as scripting language and that a lot of Google products have a script API. Very often, it avoids you creating a full web app for a simple task.



This Friday, I joined CédricMarc and the guys from Little Workshop for a quick coding session.
It all started when I noticed a very nice project: SculptGL by Stéphane Ginier. Stéphane created a great 3D scuplting tool that implements some very nice adaptive subdivision and decimation.
Final version of Sculptfab

Final version of Sculptfab

We decided to refine the UI and to add the ability to directly upload to Sketchfab without leaving the tool.
On my part, I created the foundation of a small script that, when inserted, would help an application creator to upload model data to Sketchfab. it displays a model window asking for Sketchfab API key and basic information.
Then, an archive containing the model data is created on the client using JSzip after the model has been transformed to the .obj file format. Screenshot of the current canvas is taken from the client too. and both are submitted to the Sketchfab API.

Try Sculptfab online at http://labs.sketchfab.com/sculptfab/