Bobylito

ParisJS 41 - a report

2014-11-27T00:00:00+00:00

Paris JS #41

Last night was the 41st session, and it was a very good one. Not only because I did my first talk but because the community was awesome as ever. This post is a small report of this edition.

The talks

As usual with ParisJS, the subjects were very diverse. Both backend and frontend had their share. Two were real life examples, one was an experiment.

The first talk (mine) was about ReactJS and Games. This is a report of an ongoing experiment using ReactJS to create a game. It started with an oriented introduction to ReactJS and the implementation of several gamedev patterns using ReactJS. You can find the slides on SpeakerDeck

The second talk was made by Jacopo Daeli and he introduced us to Node Webkit. He showed us the benefits of having a platform which brings together the backend and front end together in one programming space. With node-webkit, you can use html/css and friends to build a UI that will rely on robust API from Node to interact with the system.

Last but not least, Laurent Perrin made a presentation about ContentEditable. As they say in the movies, great powers means great responsability, the other word for trouble. And content editable is no exception. The intents of the API are great but some aspects were neglected so we end up pile of hacks when in need for a text editor in the browser. Hopefully, Laurent gave us his tricks in this talk. Slides are available on slides.com and the source code is on github.

Big thanks

This event wouldn’t have been possible without the sponsors, Thanks a lot!.

42, the school for hosting us
Mailjet and breaz.io for the dinner

See you there next time

If you are a JS dev in Paris, you should definitly come. Like people say there, it’s family, you are welcome :).

Using bind() in Javascript

2014-03-07T00:00:00+00:00

h2. Using bind() in Javascript This article is an attempt to give further explanations on *Function.prototype.bind*, first explaining which problems it solves and then showing how it could help design software. h3. Bind Bind is a function of the *Function* prototype which has the following signature : Function.prototype.bind( newThis, [arg1, arg2, ...]) Let's put aside the optionnal parameters for now. When this method is applied on a function it creates a new function on which the *this* object context is definitely set. Here is a small sample you can execute in your browser:

//in a web environment
function a() { console.log(this) }
a(); // prints out the window

var b = a.bind({ foo : "bar"});
b(); // prints out the object { foo : "bar"}

When the function a is called, it uses the default environment object which is *window*. *bind* call creates a new function and sets the *this* of the function to some random object here. b call prints out this object. As I stated earlier it has also this interesting side effect of setting *this* for good.

// We continue on the previous environment
a.call({baz : "bar"}); // prints out {baz : "bar"}
b.call({baz : "bar"}); // prints out {foo : "bar"}

*call* runs the function it is applied on with *this* set to the first parameter given to it. Given that a and b are basically the same functions, one could have expected to receives the same output. And this is not the case here. *Bind* is behind the scene changing the value of *this* dynamically before the function is actually called. There is a case I encountered in which I needed *bind*. But it wasn't obvious to me at the time. I wanted to be able to use *console.log* directly as a callback. But I couldn't because the browser was throwing some 'illegal invocation' exception.

console.log("toto"); //Prints french foo bar toto ;)

// Let's say we want to inspect some event objects in a programmatic way
// You could try this
document.body.addEventListener("click", console.log);
// but it won't work, throwing a dreadful 'illegal 
// invocation' Exception 

// Another approach  
document.body.addEventListener("click", function consoleLogProxy(){
  console.log(arguments);
});
// it doesn't report a correct line number

// The solution :
var log = console.log.bind(console)

document.body.addEventListener("click", log);

In the first attempt, an illegal invocation exception was throwned because *log* wasn't executed with the *console* context. The second example is a classic way to do the job. But in this particular case, it has a problem, the browser console won't report the correct line number. If this function is a util function of your framework in this fashion, the line number reported by the console will always be the one where the console.log is called. And this is not very very useful. h3. Beyond this *bind* takes a variable number of arguments. Each of these other arguments are set the same way *this* is set for the future calls on the newly created function.

var logHello = console.log.bind( console, "Hello");
logHello( "Peter" ); // output > "Hello" "Peter"

Although the first argument may solve some headaches related to *this*, the other arguments allow a whole bunch of software design tricks. One may use functions as a way to create high level behaviours and then use bind to fill in the gaps. This is the killer feature lying into bind. h3. Designing with functions The classical example for such design is addOne. Let's consider the function *add*, which takes two numbers and return the sum of it. *AddOne* is the function that takes one number and return the sum of this number and one. This is how it looks :

var add = function add(n, m){ return n+m; };
var addOne = add.bind(null, 1);

addOne(2) // 3

To be honest, this example always left me with the feeling it was useless. If you feel me, here is another one I believe is better. It is about making stuff, be it a tasty cake or a cool machine. Here is how it all start :

var makeLemonPie = function(){
  var ingredients = getIngredients();
  var lemonPie = lemonPieRecipe(ingredients);
  return lemonPie;
};

var makeRobots = function(){
  var parts = getParts();
  var robot = robotPlans(parts);
  return robot;
}

The first part of designing is to look for similarities. We have two functions that create stuff. First they fetch some ingredients and then use a recipe function to combine them and then return the resulting stuff. The common pattern can therefore be extracted into a more generic function :

var make = function( formula, getIngredients ){
  var ingredients = getIngredients();
  var product = formula(ingredients);
  return product;
}

And then it can used to create robots and lemon pies.

var aRobot = make(robotPlans, getParts);
var aLemonPie = make(lemonPieRecipe, getIngredients);

As long as we provide the recipe and some resource provider, everything works fine. But if we were to share this code with a third party, they would have to know about everything, the formula/recipes and the ingredients provider. Instead, we can use *bind* to provide a proper API.

// Maker module
var robotM = require("./robot.js");
var cakeM = require("./lie.js");

var make = function( formula, getIngredients ){
  var ingredients = getIngredients();
  var product = formula(ingredients);
  return product;
}

module.exports = {
  makeRobot    : make.bind(null, robotM.robotPlans, robotM.getParts),
  makeLemonPie : make.bind(null, cakeM.recipe, cakeM.getIngredients),
  abstractMake : make
};

The *make* function is a general one. It describes a process, something that is, by nature, abstract. It is a very high level vision of the making/baking process. It doesn't hold any assumptions on objects that will be built in the future. There are no constraints on which ingredients are required nor on the output. People call this form of specialization of functions currying or partial application. And as you can see, it is a poweful way to structure code in a functionnal style. h3. Bound callbacks I want to finish this post with a way to rewrite a very common pattern. When passing a callback function which is already, we may want some parameters to be already passed. The common practice is to define an anonymous function. But it gets a bit abstract. Let's consider the following function :

function a(n){ console.log( Data.now(), n ); }

This function prints the execution time and the value passed in the first argument. The date is not relevant for now. Let's take *setTimeout* as the callbacked API for the next example on how would be the common practice. It is not really a very _real life_ example but most of us are familiar with its use. Here it is :

a(0);
setTimeout( function(){
  a(5);
}, 5000);

The first call to a prints the time followed by 0. The second call, after about 5 seconds, prints the time (with 5 or more seconds more than the previous call), followed by 5. We had to create a new function just to be able to preset one value, this is a bit verbose. And in this kind of states we might be tempted to try shortcuts. Such as :

a(0);
setTimeout( a(5), 5000);

The problem here is that the second invocation is evaluated right away, not after 5 seconds. This is shown by the inside call to *Date.now()* that is logged to the console, not 5 seconds but milliseconds after. It is very much like we did this :

a(0);
a(5);

Hopefuly we have *bind* to help for doing correct and elegant code :

a(0);
setTimeout( a.bind(null, 5), 5000);

The code in this case is strictly equivalent to the first solution. But beware, you have to keep in mind that *bind* will create a new function which holds reference to parameters. This might lead to memory leak. h3. Conclusion Bind is powerful, elegant, leads to a whole new world of program design and solve some problem with callbacks. Use it, this is good!

XBox 360 controller on an android tablet

2013-02-23T00:00:00+00:00

h2. XBox 360 on Nexus 7 I was wondering if I could use a gamepad on my Nexus 7 android tablet since I played with a mouse on it. And it does work, out of the box. Even the android UI plays along. h3. Prerequisites You actually don't need much : * An android tablet (obviously) * A supported Gamepad (here a Xbox360 controller) * A USB-OTG cable (micro-usb to usb for me, see the picture below) !/images/usb-otg-adapter.png(Usb OTG adapter)! h3. How it works # Plug the USB-OTG cable in the tablet. # Plug the controller in the cable # Use it :) h3. Supported games (I know of) * Quell:reflect I'll try to update this list as I play new games. Have fun.

Binding worlds

2013-02-09T00:00:00+00:00

h2. Binding worlds using Scala/Play/Javascript Today's sample project is all about using existing bricks, adding glue and letting the magic happen. But be careful, I'm using cool stuff and wonderful pieces of tech but I don't intend to explain them by the menu. So ok, I have a project, it is wonderful and awesome and... Let's stop there and explain a bit further. It is a server which reads its *standard input* and streams that to a webpage *it is also serving*. The idea of this POC server is to bind command line tool and a web server, in order to do something like this :

$> tail -f apache_access_log | webPipe

This outputs the content of the Apache access log to the web through server sent events as the file log grows. By the way, the _webPipe_ command is an alias to the command that launches the server. !/images/webpipeinaction_mini.png(Webpipe)!:/images/webpipeinaction.png The code is in Scala and uses Play 2.1. It also contains just the right amount of javascript code (for the size of this project). The project code is "here":https://github.com/bobylito/webPipe (we'll go directly to the specific parts during the article). h3. The root of all things Reading the standard input of the application is straightforward, thanks to "scala.io":http://www.scala-lang.org/api/current/index.html#scala.io.package and especially "scala.io.Source":http://www.scala-lang.org/api/current/index.html#scala.io.Source, both included in the standard library.

val stdIn = scala.io.Source.stdin

Returns the standard input as a "scala.io.BufferedSource":http://www.scala-lang.org/api/current/index.html#scala.io.BufferedSource. We can then use its api to read line by line :

val lines = stdIn.getLines

This returns a brand new "scala.collection.Iterator[String]":http://www.scala-lang.org/api/current/index.html#scala.collection.Iterator . Now we can have some fun and start using the "Play Framework":http://www.playframework.org . h3. Enumerate the input The internals of Play2 don't play along with Iterators. They use other data structures for having non blocking, reactive processing. For more infos on this subject, I would recommend that you read "Mandubian's article":http://mandubian.com/2012/08/27/understanding-play2-iteratees-for-normal-humans (it is not mandatory to read it to understand the rest of this post though) Long story short, we introduced a new function to the Enumerator object that actually give the ability to take any _TraversableOnce_ (which represents any kinds of stuff you might want to iterate on) and transform it to an Enumerator, which is what Play understands. For example :

val enumLines = Enumerator.enumerate( lines ) // returns Enumerator[String]

To be real life compliant, we can actually want json data structure (makes life easier afterward) :

val enumLines = Enumerator.enumerate( lines.map( { l => 
  play.api.libs.json.Json.toJson(l) 
} ) )// returns Enumerator[JsonValue]

Actually this isn't quite enough to send stuff to many clients. In order to do that, we need to use _play.api.iteratee.Concurrent.broadcast_.

val (broadcast, _) = play.api.libs.Concurrent.broadcast(enumLines)

This gives us an enumerator we can use for streaming for any client (the underscore is an object used to control the broadcast itself, useless here). Check how it looks "in the app":https://github.com/bobylito/webPipe/blob/master/app/controllers/Application.scala#L12-18 h3. Feed me! With an Enumerator in our pocket, we are already half way through this example. Actually, now we want to serve it and it'll be quite fast. Be ready :

ok.feed(enumLines &> play.api.libs.EventSource).as("text/event-stream")

BAMM, the controller now returns the feed as EventSource!! Bravo! h3. Not your usual client The feed is feeding but we are not yet eating.

new EventSource("/log")
EventSource.addEventListener("message", function(){
 ... 
});

"Click here":https://github.com/bobylito/webPipe/blob/master/app/views/index.scala.html#L38-48 to see how it is used in the project. h3. Conclusion In less than 20 lines of actual code, this demonstrates we can push the command line to the web and use the play2 web framework as a command line tool. Hope you'll have fun playing with all these stuff. If you have any questions, "ping me on twitter":http://twitter.com/bobylito

Way of css, a demo.

2012-07-01T00:00:00+00:00

h2. Way of css, a 1k demo using CSS Yesterday took place the second edition of DemoJS, the web-only demoparty. Being part of the organizing team but not being a demoscener myself, I was really eager to do something for the demo contest. The problem is I failed in preparing a real demo before the demoparty so let's just say I didn't really have any hope of starting demos this year. Hopefully, I stood up all night (you know being part of the organization team etc) so I started hacking near by my friend "@phillipeAntoine":https://twitter.com/PhilippeAntoine, who was tinkering on his yet to be released canvas + css demo. After a while, his experiment really started to make me think of a few way to exploit css in demos and I started "this demo":http://bobylito.me/wayofcss which is a 1k demo. With this article, I want to share with you what I learned from this experiment. Really, do not try this at -home- +work+ or small kittens will die. All of this is for the purpose of science. h3. Markup generation HTML being very verbose even for small stuff, the solution is to generate it. That's why this demo uses some javascript. The recipe : # take a sentence # split it and get an array # for each element generate a dom element # and add it to the body In action :

"Hi DemoJS partiers and orga! Thx 4 being awesome! CSS 
rulez! 1k is not much and yet enough. \\o/".split(" ")
.map(function(e){
  a=d.createElement("p");
  a.innerHTML=e;
  d.body.appendChild(a);
})

h3. Delays for the win Having a bunch of dom element is not very useful, you might argue... But there is this one little feature that makes the animation possible using CSS : DELAYS. It gives to the css animation a pause after which it'll start. Because the index of the word in the array gives us its position in the sentence, we can then apply a proportionnal delay. This will keep the order and we can apply the same animation with this delay to make the animation.

a.style.webkitAnimation="a 2s "+(i++)+"s 1";

h3. The end The demo use the animationEnd event of each animation to figure out when the last word disapear.

a.addEventListener("webkitAnimationEnd",
  function(){if(!--i)z.className='s'})

h3. Micro page Markup in demos should be stripped Usually a really classic webpage would look like this :

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style><style>
  </head>
  <body></body>
  <script type="text/javascript"></script>
</html>

But really you can strip it, without being hurt, to something like this :

<style></style>
<body>
<script></script>

h3. ID as variable name In JS, you can use directly the id of a dom element like a variable. We can then do :

z.className='s'

for a dom element named with 'z' as its id instead of doing so :

document.getElementById("z").className='s'

h3. Final word The code is ugly, the demo is not very impressive but when looking back, it does contain some stuff which are quite fun to use and combine.

Github with multiple accounts

2011-10-18T00:00:00+00:00

h2. Using github with multiple accounts Nowadays having a github account is quite convenient (if not mandatory for some). It's a great way to show what your skills are to potential employers or future clients. The only problem is that when you finally got hired by this dream company who found you on Github, you realize that they use Github too. In that case you might wonder if it's a good idea to use your personnal account. I decided to open a new account for this purpose. And here is my personnal recipe (tutorial) on how to use both accounts on one computer. Disclaimer : I use MacOS X and Linux, and I don't have a clue how it could work for windows. h3. SSH Keys I'll assume here you already have keys and their public parts and they are both registered on your github accounts. Let's say, we have the following in our ~/.ssh folder :

config
id_rsa_alice
id_rsa_alice.pub
id_rsa_bob
id_rsa_bob.pub

Now let's edit the _config_ file. We are adding some url specific configuration :

Host alice.github.com
  Hostname github.com
  User git 
  IdentityFile ~/.ssh/id_rsa_alice
Host bob.github.com
  Hostname github.com
  User git
  IdentityFile ~/.ssh/id_rsa_bob

The lines above actually create an automatic redirection to the respective account on github when using either bob.github.com or alice.github.com. For example, when you want to clone a repository with the "Bob" account, instead of using:

git clone git@github.com:bob/bobsproject.git

You should use :

git clone git@bob.github.com:bob/bobsproject.git

The same way, when configuring an origin for an "Alice" project, it be should set up this way:

git remote add origin git@alice.github.com:alice/p1.git

But there is a trick (or a bug if you are a glass half empty person), and the person who will commit will be the one configure in the git configuration. h3. Configure git There are two ways for configuring git : either globally or project specific. And because we use two certificates, it has to be project specific. To configure Alice in a git project you have to type the following commands, go to the project folder and type :

$ git config user.name "Alice In Wonderland"
$ git config user.email "alice@wonderland.com"

For more information, check "the git book":http://book.git-scm.com/2_setup_and_initialization.html h3. That's it Well here you are, you have everything you need to know to use multiple github accounts. Please leave a comment, if you find any mistakes or you come up with a better solution. h3. Update from Legion comment on HackerNews In the .ssh/config file : it is not mandatory to use FQDN pattern for ssh names, this means we could have used aliceGH instead of alice.github.com The same way, we specify the user in the configuration so when configuring the origin of a git repository, we could simply use :

git clone bob.github.com:bob/bobsproject.git

or if we add the origin after :

git remote add origin alice.github.com:alice/p1.git

and last but not least the .git part is useless, and we can use :

git remote add origin alice.github.com:alice/p1