Beansight

Beansight is now open source

Four years ago, I started working on Beansight with Cyril, Guillaume and Jean-Baptiste, a project that became a long adventure.

beansighthb

The website (that we host at www.beansight.com) and associated mobile apps allow users to create predictions and vote on other’s predictions. Computation is done to extract from all votes a percentage of probability for a given event.
The website features all mechanisms of a social website : registration, login, user profiles, followers / following, content creation, comments, moderation tools, administration dashboard, API, i18n.

Main page when logged into Beansight

Main page when logged into Beansight

All our code and design are now available under the open source Apache licence. That means anyone is free to use it to run a similar website or to build upon it. Get it from GitHub.

The technological architecture is quite regular: a server is generating web pages using a MVC framework, data is stored in a relational SQL database and user generated images are stored on the file system. Some simple client-side JavaScript is enriching these generated pages.

We built Beansight using the great Play! Framework. It turned out that Play! was a really great choice for our architecture and project. At that time, Play! was a Java web framework that got rid of the traditional Java web stack to focus on a simple MVC architecture, inspired by rails and other modern web frameworks, that prevails convention over configuration.
It was a real pleasure working with this language in a framework so well designed for websites like our.

Beansight Android application

Beansight Android application

Mobile application are native for iOS and Android and we used jQuery mobile for the mobile web version.
We decided to keep a very simple UI as part of our native mobile apps. We were one of the first apps to use ViewPager on Android for example.

We realised quite soon that we needed to build an API, mostly for these mobile apps. Our MVC architecture allowed us to easily create one. Ideally I think the main website should have use it (either client or server side). Anyway, our API code and website code were sharing a lot, thanks to our rich object oriented Models. You can find the API documentation in a GitHub wiki.

We used different hosts. We first started with PlayApps.net, the Platform As A Service offer from the builders of the Play! Framework. We never encountered any issue with it and were very satisfied to not bother about system administration. However, we had to move due to the service closing. Beansight was then running on Gandi Hosting. Here we had to take care about administring our server, which added some pain to the maintenance of Beansight.
Finally, in order to reduce the costs and make it easier to setup as part of the open source process, we made sure it is compatible with the Heroku PaaS hosting.
Today, Beansight can be easily run on any Linux server or pushed to Heroku with any MySQL database (beansight.com is now using clearDB for example).

I hope this code will be useful to somebody. I would be pleased to see you starting a new community from it, building something on top of it, or using it as part of another project.
While a few technical improvements could be done, I think it is still quite reliable, with a pretty well documented source code and good architecture.

Get all the code on GitHub:

Standard
Climb tracker

Indoor climbing tracker

I have been doing outdoor and indoor climbing for five years now. While I enjoy a lot rock climbing and multi-pitch outdoor routes, I also practice every week indoor climbing at my local climbing gym.

Tracking a new Climb

Tracking a new Climb on mobile

I use Foursquare everyday, RunKeeper when running or skiing, a diving computer when diving, but I have nothing to track my indoor climbs.
We were thinking about this with Pierre, a climber friend, and I started working on it as a side project. We imagine it very simple:

  • select a climbing gym
  • “check-in” on routes after each climb saying if it was lead or top-rope, leaving a comment. Of course, gyms and routes need to be user generated.

The value would be that you can track your progress and the app could give route suggestions. You could leave and get comments and tips on routes.

Climbing log on Chrome Desktop

Climbing log on Chrome Desktop

I had great feedback from the /r/climbing reddit community. Telling me if this kind of app would be useful, what people would use it for and pointing me to similar projects.

Technically, the prototype app is a client-side web application, based on Parse because I didn’t want to bother building once again a new dumb backend server that is just storage and user credentials. I like Parse’s phylosophy of being a “backend as a service”, they are right to think that a lot of web or mobile application are structured the same way and do not have a lot of server-side logic. Focusing on the front end was what interested me with this project, and Parse allowed me to prototype things fast and be sure that it is reliable for the future.
It is generated using Yeoman (so uses Bower as client-side library management tool and Grunt as build tool), it uses AngularJS and bootstrap 3.

I think I did the mistake to think that I could target mobile and desktop with the exact same responsive website, while this may not be false, I think I would better have focus only on the mobile application and build a dedicated mobile UI using a mobile web framework, such as ionic framework. This may be the next step.

It is available online at and still needs a nice name and logo.

Try it now

Standard
LeCamping

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.

Standard
Prioprepare

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.

Standard
Labyrinth

How to generate a maze?

We had with Anne a 5 hours train trip and took the time to think about how we would proceed if we had to generate a maze.

First, we had to think about our problem: there are plenty of types of mazes. We decided that we would only consider mazes on a cartesian grid (no circle or bended walls). It can be different to start with a fixed start and end or just to fix the start, we decided to only fix the starting point, and to consider that the end would be the point the farest from this starting point.

An example of generated maze.

An example of generated maze.

After quickly setting up the rendering using HTML canvas (it may have been smarter to use SVG by the way), I set up the data structure : matrices (double arrays) for holes, horizontal and vertical walls

Then we arrived to the interesting part: our algorithm. We decided to consider a growing strategy: We start with a filled black canvas, and “grow” tunnels starting from the start point.
We keep in memory a list of “tunnel ends”, which are the point we are currently continuing the tunnels from.
At each iteration, we determine, with some probabilities, for each “tunnel end”: if the tunnel should continue in only one direction, split in two or three (if possible), the direction the tunnel should to continue to.
If a tunnel end encounters a dead end, then we remove it from the list of tunnel ends to consider for the next iteration.
We may end up with no “tunnel end” left, in that case we pick a random point on the current maze that is next to a “black” square, and we start a new tunnel from this point. This last condition is here to make sure all the available space will be used.
For each “tunnel end”, we also keep in memory the distance from the starting point, and store this distance for all square of our maze. This allows us to select an end when the generation is done.

But what makes a maze interesting? As a human, a maze will be difficult if when you encounter an intersection, your brain cannot easily determine on which direction to go. For example if you clearly see that going left will end up in a dead end in a few blocks, then you will chose right.
To achieve this, we adjusted some parameters in order for the maze to generate long and not obvious branches. We had to set the probability to split to a low amount, and had to keep in memory the overall tunnel growing direction and to make it prevail when selecting a direction in order to prevent the tunnel to collapse on itself too often.

Screenshot of the maze generator app.

Screenshot of the maze generator app.

Because something is not done until it’s pushed and shipped, I took a few more hours to put the result online and in a Chrome Packaged application.

The application is very simple: it generate a maze of the size of the window. To control the difficulty (size) of the maze, just resize the window.
I may add in the future more interactions and printing features.

The code is separated in two files, a standalone maze generator and a maze renderer.

Try it now

Standard
Labyrinth

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.

Standard
Misc.

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.

Standard