Don’t get me wrong, I really do love sIFR, I still remember the first time I heard about it, all the possibilities this gave us and how “easy” it was to setup.

But over the time I found it being a pain to setup, open flash, embed the missing characters (I work primarly in french, so I need all those accents). Then setup the sIFR in your page, making sure the text wrap properly. And I won’t talk about the flicker that happen once the page is loaded and the fonts are replaced with sIFR.

Well today I came across what might kill sIFR soon (for me at least), it’s called Facelift Image Replacement (or FLIR, pronounced fleer), it’s purpose is exactly the same as sIFR, except this technology rely on php and javascript to work his magic.

What makes it better than sIFR? Well it’s a lot easier to setup, I had some problems at first, but they were related to the server not parsing json properly. All you have to do is copy your font in the font folder, add it in the font library and use it in your CSS the same way you would define any other fonts. Here an example of how you define the font properties:
h1 {
font-family: dido,Arial,Helvetica,sans-serif;
font-size:20px;
width: 200px;
line-height: 15px;
}

There are some problems tho, and that’s why I won’t use it on big scale projects for now. First, line-height doesn’t seem to work with all the fonts, why? I have no idea. Second, some fonts renders werdly, parts are being cut off for no apparent reasons.

Until those are fixed I won’t use on big projects, unless I’m sure I won’t need to play with the line-height and my font show up properly.

Ever used it?

Here’s another jQuery plugin to add to my “pretty” scripts library.

This is customize you checkboxes/radio buttons. Why use this one instead of another? Because this one keep the default browser behaviors. IE: You press spacebar while the label is highlighted, the checkbox gets checked. It’s something that was missing in the other jQuery plugin I found.

Head over here to the script page

Not every web developer wants to have pixel perfect designs. But for some, it’s very important to respect the designs they got from the designer. Personally, I find it very important to render the designs properly, it’s a matter of doing your job well or not.

I’ll give you my hints on how to achieve pixel perfect templates and tools to get there.

A small technique I developed, is that I simply put a div with a jpeg of the design I got from the designer over my template, fading it a bit so I can see my template underneath. This way I’m sure that everything will be where it should be. I also add a bit of javascript so when I click on it, it closes so I can still access GUI things such as links or inputs. I really love this technique because this way I can be sure the designs will be perfect on every browsers since it’s CSS/JavaScript based.

Last week I also came accros a Firefox plugin named Pixel Perfect. It basically does the same thing as I described above, only in a pretty Firefox plugin. Main drawback? Not cross browser, but it’s still worth it as it is so easy to setup.

I plan on releasing a JavaScript alternative to this plugin to make it cross browser, stay tuned !

Have your own tips? Share them!

In a previous blog post I talked about the release of processing.js and how it could change how we see/use Flash. Upon experimentation and research, I looked at the canvas element and all the possibilities it offers. And…it’s sick!

First of all the canvas element is a part of the HTML5 specification and it allows for dynamic scriptable rendering of bitmap images. I won’t go much into details as of how to use it, since all I did with it is a lame paint clone. Instead i’ll provide links to example so you can see how you can use it.

Please note that all those demos work best with Firefox 3 or the latest version of Safari, since their JavaScript processing is much, much faster than what it used to be.

So here are the examples:

• 3d Counter Strike like game
• Hairy div
• Interactive 3d models
• 3d racing “game”
• My lame paint clone

It’s really worth it to take a look at that element and follow closely what will happen in the future as more and more browsers will support it.

P.S: I told you my paint clone was lame…

Today is the day! Download your copy of the new Firefox 3.0 and help Mozilla break the record of the most download in one day.

This page gives you the current number of downloads. It’s quite impressive when you see that it gets downloaded more than 13 000 times a minute.

The Firefox team did a great job, not only  with the browser, but also with all the buzz they created around the launch of FF3. I can’t wait to see the next browser usage statistics, I’m pretty sure this move will help them.

So go ahead, download your copy and break the record!