Dec 07 2011

2nd place for Santa’s Media Queries!

Category: CSS,HTML5,JavaScript,Web Developmenttuxie @ 12:53

Santa's Media QueriesI’m happy to announce that my demo Santa’s Media Queries got the 2nd place on October’s Mozilla Dev Derby!! =)

(Read the announcement)

My first big surprise was to see the number of hits the demo was getting, never thought that it could attract so many people. At the time of this writing it has received 1744 views and 35 likes. Never expected that.

My second (and biggest) surprise was to find out that from all the excellent submissions (I mentioned some in a previous post) mine got to be in the top 3. It’s such an honor.

What makes it even more special is the people who chose it. Let’s take a look at the judges:

And the prize is a beautiful laptop messenger bag, something I’ve been checking out on ebay recently, but this one is *way* better than what I intended to buy =)

It’s perfect.

Dec 03 2011

Anatomy of a SPA. RubyConf Uruguay.

Category: JavaScript,Ruby,Uncategorizedtuxie @ 00:09

My present from the RubyConf Organization This is the prize I got for giving a talk at the RubyConf Uruguay, I totally loved it. It has my github nick in it =)

My talk was “Anatomy of a Single-Page Application: Client-side Model-View-Controller“. (Watch it. Spanish audio, slides in english.) For me was a total success, got a lot of great feedback, people approached me after the talk to ask questions and didn’t hear much of contrary opinions to what I said. I do know that how I said it wasn’t much fun for everyone.

I trolled a little. Not much, just enough, and (almost) always with proper justification. I trolled against jQuery, CoffeeScript and PHP. The problem was that I didn’t know there was a CoffeeScript talk right before mine. Duda Dorenelles talk about CoffeeScript, and as I watched his talk I was feeling bad for what I had on my slides.

Forget about CoffeeScript, be a man!” I think it’s the most controversial line of my talk, but it’s not groundless, and I explained it. I also talked to Duda and he totally understood, he even agreed with me. He is a super cool guy, I hope we can share a beer again sometime.

The organization of the event was excellent, besides some delay in the talks which is totally normal, everything went very smoothly, at least it seemed so. The night before the event they took the speakers to dinner, I didn’t expect that, was a very nice surprise. And as I mentioned before, I got this beautiful present after the talk which was very cool.

I was very anxious and nervous after the talk so I didn’t look at it very well, didn’t realize it had my nick on it. Later, when I was more calm I saw it and really loved it. I’m looking forward to being part of next year’s RubyConf Uruguay.

Nov 10 2011

RubyConf Uruguay 2011

Category: JavaScript,Ruby,Web Developmenttuxie @ 11:38

Next 11th and 12th November is this year’s RubyConf here in Montevideo. This time I’ll be giving a talk about how to apply the MVC pattern on the client-side.

About the event

I enjoyed last year’s conference but the truth is that I couldn’t get much from it. It was intended for people with previous Ruby knowledge and there was little left for the rest of us.

It looks like this year’s schedule covers a wider range of topics and levels. In their website they promoted it as an event to attract developers from different areas, specially Java.

The Java strategy

In my opinion going after Java (and it’s satellite enterprisey languages) developers is a good strategy. It would be hard to convince people from other languages with a solid web foundation like Python or PHP to move to Ruby where you can basically accomplish the same tasks, and what matters most is how well you know the language/framework.

However, web development with Java is hard and bloated. Tools like GWT are an approach to attract the hardcore OO programmers to do web. This is wrong, Java and JavaScript share 4 characters in their names, the C-like syntax and little more. They are based on completely different paradigms.

So I think that for Java developers looking to do web it would really make a difference to switch to another language like Python or Ruby.

About my talk

I’ll be talking about JavaScript. As I have never written a single line of Ruby this is one of the few topics I could propose and that they’d be interested in.

The title of the talk is “Anatomy of a SPA: Client-side MVC“. It’s an introduction to applying the pattern on JavaScript by the use of the Backbone.js library. I’ll starts by explaining the MVC pattern and when/why it’s important to apply it in your application, then I’ll shows what are the tools Backbone.js gives us for this. It will be more about concepts than actual code.

I have prepared many jokes, some flamewars and naked people. That’s a proven formula for success.

Oct 30 2011

CSS Media Queries

Category: CSS,HTML5,Web Developmenttuxie @ 21:45

October’s Mozilla Dev Derby was about CSS Media Queries.

According to the Mozilla Developer Network documentation:

CSS 3 enhances support for media-dependent style sheets by letting style sheets be more precisely labeled. A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

This means, basically, you can switch style sheets depending on different properties such as the size of the browser window. Is a simple yet powerful feature, but I think the biggest challenge is coming up with something creative using such an unsophisticated feature.

I submitted two demos:


This demo aims to show how properties can be manipulated based on the browser window size. This works by defining different stylesheets for each of the dimensions you want to take actions on. For the demo I created 14 stylesheets, a base one for every widow size and 13 others for 100px, 200px, 300px and so on until 1300px width.

As you resize the window you’ll see changes in the rotation, opacity, background, width and height of the elements.

This was my first approach to Media Queries, nothing complex but it was fun to spice it up a little with transitions.

Santa’s Media Queries

Using CSS Media Queries this demo detects the size of your browser window and removes members of the family. Marge and Homer are not as alone as they’d like to be.

My second demo was more a design challenge than a code challenge. Given an image of The Simpsons sitting in their famous couch I started removing them one by one with GIMP until only Homer, Marge and Santa’s little helper were left. Brian, a friend, recommended me to add something more, that’s how spiderpig got behind the couch. I was told that it looks like he eats the people =P

It got over 100 visits in just 24hs, I was impressed.

Some very good demos by other developers in no particular order:

Maybe Michal meant “in” instead of “is” in “Too many fish is the sea”. Check out michal.b‘s other demos, they are great.

I’m already thinking about what I’m going to do for next month’s Derby with canvas. Let’s see what I can come up with.