Add custom poster frame to youtube video without the API.

The trick is adding the iframe in a comment. Javascript reads comment contents and saves iframe definition to a var. When user clicks on the image, javascript overwrites container innerHTML using the iframe defined in the comments.

This code is also valid in browsers not supporting window.postMessage (API uses postMessage).

SpainJS 2012 in a post

Finally a Javascript event in Spain. I was tempted to organize one with some friends, but in the middle of the process we knew about this idea from the organizers of previous Rails conferences and also an attempt at Teambox to organize one as well in Barcelona. We postponed the idea, and frankly, the results for this first event in Madrid have been excellent. Kudos to the team!


Workshops were cool. I could only attend the afternoon workshops, but they were really worth it. I was not asked for the registration ticket, which surprised me a lot since there were quite a lot of twits about only accepting registered users being allowed.

Dani Mata (@danimataonrails) talked about using Node.js, Express, Sequalize and Jade to create an API that would serve JSON. It was quite interesting, high level from the first moment, but given there was a bad wifi conection that made it slow to download all the dependencies and that I later had a mysql problem I was not able to finish the examples. Quite good anyway. Slides and code here:

Guillermo Gutiérrez (@ggalmazor) managed a refactoring Dojo. Being my first dojo I can only say it was fun, worth it and inspiring. I suppose dojos are better with a smaller groups (at least not all strangers), but it was real fun, so fun I even went for a stint. Gotta do more of these. PDF here:

For next year I would suggest the organization to force Camon to provide a better connection, during workshops wifi is more important than at the event talks. It was not on pair with the workshop contents. 


Registration process next day was a bit slow and chaotic. Separation between conference ticket and conference + dinner should have been made before the room entrance, there was place enough to separate those into two different spaces. Once inside we faced the problem of getting a decent wifi connection, more on that in the final words. 

Vicent Martí (@tanoku) from github talked about github’s robot, hubot, and how cool it is to perform all kinds of tasks, scripts, domotic integrations, laughing at your coworkers and many more. Not much code was shown (the comic style in slides was gorgeous) but when it was, it fitted well, explaning in few lines how every task is a module with a name, a regexp and a callback. Hubot is opensourced, so you should give it a try. The talk was fun and inspiring. Slides here:

Jeremy Ashkenas (@jashkenas) the creator of Backbone and CoffeeScript talked about the evolution of javascript (specifically, Harmony) and the benefits of using CoffeeScript. I’m not a big fan of compilers, but I have to agree that he knows how to lead a group with his speech, very dynamic, to the point. I liked the splats and soaks examples, and the fact that you can show the inner codefile using —tokens or —nodes options. Slides and code here:

Karolina Szczur (@karolinaszczur) from nodejitsu talked about simplicity in design, more specifically in CSS writing via frameworks. I don’t think I understood the point of the talk. She seems very good designer, but her presentation lacked focus. I know CSS, I use frameworks, I use compass. She talked about 3 frameworks, leaving many behind, she talked about CSS generators and then about Sass, which are quite incompatible from my point of view. Sorry, I don’t buy it.  Slides here:

Jakob Mattsson (@jakobmattsson) from Burt started with an unfortunate joke about Berlusconni and Francisco Franco. Really, out of place and not fun at all. Then he talked about something he really knows: writting a RESTful API with Node.js. The speech was nice, lots of tips, tricks and suggestions of other middleware like connect and code examples of how to use node, express, connect, mongoose together, in a lot of code slides too. I wrote down this sentence: “db schemaless is a lie”. Slides here:

Horia Dragomir (@hdragomir) from Wooga was the man of the day (shared honour with Vicent Martí). He gave a speech on how to create fast mobile UIs, with plenty of code examples, short and to the point, like using event bubbling, HTML5 APIs, touch events, viewport scaling, and so on. If that wasn’t enough, he is very enthousiastic and dynamic, making the after lunch hour very easy to handle. Top. Slides here:

Tomás Corral (@amischol) from Softonic was the poorest talk on friday and maybe the whole event. Language was by far the main struggle for him, since he knows his stuff, but English wasn’t helping. Subject was not very well chosen, either. Minimization of code is important but I don’t think it gives for more than a 10 minutes talk, and the examples were all about semicolons, using variables and concatenating strings. I would have preferred him to talk about javascript architecture, since he knows how to write that (he is the author of hydra.js). Slides here:

Christian Kvalheim (@christkv) from 10gen talked about a Pacman game clone written in Node.js. The presentation was fine, going from the evolution of the original game to the challenges he faced while cloning it for web and techniques used (Node.js, Akihabara, SoundJS, websockets and MongoDB), also what is in horizon with WebGL and so on.  He also demo’ed the game. I am not a big fan of gaming, but the inners were interesting. Slides here:

Friday night dinner and party was excellent. Sala Garibaldi was a wise choice, center of town unlike last year in Rails conference, held in Florida Park itself (far from anything else). As usual, dinner was standed, ala cocktail style, good for talking with anyone. And the Jamón guy was there again. Good. A bit expensive, but I assume you pay for the networking more than the food.


Ramón Corominas (@ramoncorominas) is a W3C’s WCAG WG member. He gave a talk on WAI-ARIA to create accessible sites. I personally don’t buy the subject, but he also gave terrible examples of javascript being used to connect WAI-ARIA to form inputs. Either he did so to show a (doubtfully) simpler code or he does not know how event managers and event bubbling work. A pity, since the other stuff seems interesting, these weighted too much for me. Slides and code:

Alex MacCaw (@maccman) from stripe and creator of spine.js gave an excellent talk on perceived speed and how to improve it for a better user experience, giving real world examples on how other sites or apps trick about it: twitter, facebook, instagram or a cool blog system named The three steps to improve perceived speed by using an async UI are: rendering on client (batch DOM updates), store state and data on client and only then communicate with server asyncronously. Also nice trick on the questions about unit testing UI and REST API separately. Slides here:

Keith Norman (@keithnorm) was very inspiring. He talked about the process started with his colleagues at Groupon to share code between Node.js and the browser. That is, writting javascript once and use it both on client and server sides. Showed us how they were using browserify to convert coffee/backbone code in server to allow node+express to run it. Very good, maybe the man of the day, but that one is tight, saturday talks were frankly top level, I might give it a draw with Nuria Ruiz, Alex MacCaw and Javier Arévalo. Slides here: and a demo

Nuria Ruiz (@pantojacoder) explained us the processes started at tuenti to improve performance through changing how they load javascript and templates. The thumbs up on the talk are not only the solutions they arrived to (which improved the speed of next tuenti version by an incredible 500%) but also the explainations on the process and how they discarded other options to finally chose YUI lazy loading with Handlebars templating. Oh, and keep it in a post it next to you: measure everything. I have the honor to have chatted with her about oceanography and research vessels, remembering old times when we (separately) were one month on board doing science stuff. Old times, go beat that! :-) Slides here:

Brian McKenna (@puffnfresh) presented Roy, a javascript compiler. Since I am not a big fan of compilers I took that time to do some networking, so I can not give my opinion on this one, other than my admiration goes for those who innovate, and that seems to be the case. Slides here:

Javier Arévalo (@TheJare) kicked youngsters arses. If you ever thought “viejunos” (older people) should go home and let 20yo do the job, think twice. This guy knows his stuff. He deeply went through the use of different strategies, HTML5 APIs, WebGL, audio, events, performance… Nice talk indeed, more than one and two attendees paid the tickets just to see him in action, and they were not defeated. Slides here:

Jonathan Azoff (@azoff) presented tacion, an app that pushes sync’ed content to an audience using websockets and a jQuery mobile presentation. Very cool idea. He went through some of the code. The nice part is being opensource and using which I did not know of yet. As a slightly negative side, it needs improving on the case scenario where the driver of the talk wants to let users run the content but up to a point protect certain pages. Powerpoint is dead. Slides here: 

Final words

Overall the event was very impressive, well organized, nice talks, nice people… I would probably force lightning talks to be more technical and less “this is my product, buy it”  but the event is good. Florida Park seems a good place for me, having lunch in the grass is a win. The worst part of the event was this (in my humble opinion): once there, we found out that people at home was following the event via streamming. This being a lack of respect to the attendees, it also swallowed some big chunk of the bandwith. I suggest next year organizers to register every talk in video and upload them online two weeks after the event, edited with sponsors’ logos, improved sound, and so on. Every one would win. Oh, and please choose another ISP, Movistar clearly is not up to the standards or they simply laughed at you, I hope you will not pay the bill. Thank you anyway for such a great event, one of the best I’ve attended, see you next year!