Do you use script loaders?

It’s funny I have the impression that script loaders keep coming back in the news, if we go back one year and a half ago we mostly only had labJS and requireJS, these guys want to load all your scripts asynch, but now we got new kids, notably yepnope, that allows you to load scripts based on feature detection and others.. headJS, controlJS, enhanceJS, jsDefer ouch…

Script loaders are responding to a weird problem, you would think that browsers do a good job at loading script since its been doing just that for more than 10 years, but in fact not really, it could be a lot better and this is where those technologies come in.

What they do is super charge the loading speed of your scripts…

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:…