Authoring a css book and what is next

I neglected quite a bit my blog for some times now .. After 3 years of doing this I feel like I have less and less to say about web development. Well not that it happens to every blogs of course . I still have some stuff for you guys, but I feel my time doing one article a week is gone.

Confoo conference

This year I am trying to do a talk at the Confoo conference, basically it’s an introduction course at code organization with jQuery, called jQuery Spaghetti. It’s probably not for most of you guys and I know it has been done in other js conferences, but I feel like Confoo will have quite a bit of ‘hobby’ jQuery devs since it’s really a…

Creating a CSS3D hovering state with fallback for older browsers

HTML5 & CSS3 are a big sugar rush in the front-end community currently, you can see those nice CSS3 buttons popping everywhere around the web. For one project I am working on I wanted to use a nice 3d flip effect like this one.

Unfortunately that kind of effect is currently only achievable with Safari and Chrome, so to make this thing work I needed a normal hover behavior for other browsers, and that is what I wanted to show you how to do here.

.containerCard {
height:194px;
position:relative;
background:#fff;
width:144px;
}
.containerCard .element{
height:194px;
position:absolute;
top:0; left:0;
background:#fff;
width:144px;
} .containerCard .elementB{
display:none;
} .containerCard:hover .elementA {
display:none;
} .containerCard:hover .elementB{
display:block;
} @media screen and (-webkit-min-device-pixel-ratio:0) {
.containerCard .elementB{
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility:…

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.