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:

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.


Oct 27 2011

Algorithm vs. Heuristic

Category: Software Engineeringtuxie @ 09:47

According to Wikipedia:

Algorithm

In mathematics and computer science, an algorithm is an effective method expressed as a finite list of well-defined instructions for calculating a function. Algorithms are used for calculation, data processing, and automated reasoning. In simple words an algorithm is a step-by-step procedure for calculations.

Starting from an initial state and initial input (perhaps empty), the instructions describe a computation that, when executed, will proceed through a finite number of well-defined successive states, eventually producing “output” and terminating at a final ending state.

Heuristic

Heuristic refers to experience-based techniques for problem solving, learning, and discovery. Heuristic methods are used to speed up the process of finding a satisfactory solution, where an exhaustive search is impractical. Examples of this method include using a “rule of thumb”, an educated guess, an intuitive judgment, or common sense.

In more precise terms, heuristics are strategies using readily accessible, though loosely applicable, information to control problem solving in human beings and machines.

Both are ways of reaching from point A to point B, but the algorithm is predictable, that is, the steps are predefined and do not change. On the other hand the heuristic is a higher level technique that does not output a result, as the algorithm does, but instead guides you in finding the solution. The final result varies because the heuristic is only a guide on how to look, not on what to find.

From the book Code Complete: A Practical Handbook of Software Construction:

Here is an algorithm for driving to someone’s house: Take highway 167 south to Puyallup. Take the South Hill Mall exit and drive 4.5 miles up the hill. Turn right at the light by the grocery store, and then take the first left. Turn into the driveway of the large tan house on the left, at 714 North Cedar.

Here is a heuristic for getting to someone’s house: Find the last letter we mailed you. Drive to the town in the return address. When you get to town, ask someone where our house is. Everyone knows us—someone will be glad to help you. If you can’t find anyone, call us from a public phone, and we’ll come get you.

This kind of metaphors can be applied at many levels of software development, from architecture to GUI, relieving us from the need of knowing the internals of the system and therefore easing the understanding of the big picture.