Introduction to the Google WebFont Loader

You remember the “old days” when you were cursing at sIFR because it would not give you the font-size you wanted, did text flickering on page load or was just not working at all on IE? Well those days are all gone, the introduction of Cufon sometime ago solved most of the sIFR issues, but one of the big downside was that you could not select the text anymore.

Now with @font-face we finally got a native way of using custom fonts in our websites. Unfortunately this is not as easy as it should be. This is probably why Google launched recently the Google WebFont Loader and the Google font directory. Two easy way of using @font-face without any trouble, well, less trouble.

The text flickering problem all…

CSS3 transform is coming in a browser near you (even in IE)

There has been some cool developments lately on the use of CSS3 transform properties. First we have Dojo has announced that the next version of dojo.fx will support CSS3 transform. You can see the demo here.

Another nice project, cssSandpaper is a js animation framework making the use of CSS3 transform easy.

Check it out, those two are well worth the read.

Microsoft to Double Down on HTML5 With Internet Explorer 9? Really?

I was pretty surprised to read this week an article on Webmonkey that was saying that Microsoft would certainly double down in IE9 on HTML5 and CSS3. I suggest you read it yourself, but basically it was saying that Microsoft would go on the offensive at the upcoming MIX2010 presenting IE9.

Silverlight…

I do not see Microsoft go on the offensive, I am pretty sure in fact that it will not implement any ‘Multimedia’ feature like Audio, Video and Canvas any time soon, and certainly not before it is kind of obligated because Youtube, for example, switched to html5. Why? Silverlight… This technology is a competitor to all these technologies. If you are not really into extranet and intranet development, you might not even know what Silverlight is, well…

The mobile webkit fixed position problem

If there is one thing you will be missing while developing your mobile web application for Webkit, it is the CSS fixed position. You cannot effectively fix an element on the iPhone, and mobile device are no powerhouse to emulate it with javascript. The problem is simple, yet there is no perfect solution to it.

On a mobile device you scroll a window, not the site

When you scroll on a mobile device, you are not really scrolling the site, in fact if you zoom out completely you will see the entire page, you are only scrolling your “window” around the site. When you understand this, your fixed footer dream really shatter, unless you are willing to use complex methods..

iScroll

And there start your quest, on your…

Zen HTML and CSS coding, and how to install it on Windows with E Text-Editor

Zen coding is one of the new cool kid presently, if you haven’t heard of it I would suggest your read this article from smashing magazine or look at this video presentation.

Basically it enables you to create HTML from CSS snippet. It might not sound powerful at first, but when you start playing with, some wonderful things happen in your head (with no drugs). Let’s look at a simple example, let’s say you want a header with an id and a class followed by a list element. Here what you would do with zen:

You do Apple-E (CTRL-E in win) and you get:

There is much more about Zen, but this is…

9 resources to create better HTML forms

Forms are a pretty boring piece of the Internet, it’s not fun to create and it’s not fun to interact with. Yet this is mostly our only way to communicate. We should strive to make better forms and make them as painless as possible to complete. Here are some resources worth looking to make better forms in every way possible.

Keep it simple

Look at the Twitter registration, it does not ask for the password twice and there is only 6 fields. If you must have more fields then please let them register and ask for it in their profile. Less fields there are, more potential subscribers you get (avoid long form and duplicate if you can). Also please keep them focus on finishing you form, no…

CSS abstraction Series: Introduction to xCSS

I recently did an introduction to Less CSS following my read of why abstraction matters, in this article I was demonstrating how Less could be useful to your front-end development team, but the big disadvantage was that you had to install ruby on your development computers in order to use it.

Installing ruby in some case can be out of the question, however, using a non intrusive php framework works quite better, and this is what xCSS seems to aim for.

And it works pretty well

Installing xCSS is pretty easy, it took me 5 minute to follow the instruction the first time, and the other times were a breeze.

The idea is simple, you put a folder named xcss on top of your css folder. You also add a…

Apple patents CSS transform and animation

In a frightening move, Apple decided to patent their CSS transform and animation properties. Unfortunately this was not part of the CSS3 specifications and they have all the rights to do so. Now we will have to wait and see what are Apple intentions with this patent. Other browser vendors could decided to not implement those specifications in case Apple turns all gun blazing, which would be a shame.

While I still think most of what you can do with this should be Javascript bound, I see applications where it could be really useful, notably with :hover.

You can see the patent yourself here.

Introduction to Less CSS abstraction on Windows

Following my last post about CSS abstraction with PHP, Chris Eppstein proposed I have a look at Less CSS. Truth be told I had already looked into it. But the big ruby icon turned me down, I do not use Ruby on rail. Turns out you do not need to install Ruby on your server. In fact Less can be use on your computer with no problem.

The Less basic principle is simple, you have a .less file that compiles every time you save in a .css file. Which means that any project can use Less as the output is always CSS.

Installation

Less installation on Windows is easy. You get the one click installer for Ruby here. After the quick install you open a command prompt and…

Best front-end workflow within a production team

Optimizing front-end teams’ workflow is hard, there is always something that comes in the way, but it is important to at least try to optimize the front-end work. It could save your team considerable time over a project. Front-enders could work more efficiently together and within the production team.

Let’s take a look at front-enders’ typical relationship within a production team: (take it lightly)

First, you got designers that, generally, do not really like front-end developers because they do not render exactly there graphic design, and you got front-enders that “hate” designers because they are doing complicated design, costing too much money and time to render to HTML.

Back-end developers also have a general tendency to be a bit careless with HTML, which, not visible at first…