Dec 07 2011

2nd place for Santa’s Media Queries!

Category: CSS,HTML5,JavaScript,Web Development — tuxie @ 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.

Oct 30 2011

CSS Media Queries

Category: CSS,HTML5,Web Development — tuxie @ 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:

Fueye

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.