Using the jQuery Validation Engine with modal & dialog plugins

This is a question I often get asked by email, and I think there is enough requests to warrant a small blog post.

All about the DOM

The validationEngine expect your form to be present on the page when you initialize the plugin, and this is where modal plugins fall short. If your using those plugins you generally want to load a new piece of html into your document using AJAX.

In that case you need to initialize the validationEngine after you loaded your modal content. Generally modal plugins have an api that let you do this. Let’s take 2 example, Colorbox and jQuey ui.

Colorbox :

jQuery UI :

That should give you a pretty good idea of what you need to do whatever the…

It’s never been about the open web

Warning! warning! rant ahead! I wrote this a week or two weeks ago, not being sure if I should publish it, finally decided to go for it.

The open web grinds my gear, there I said it! It seems a lot of developers wave their flags at every technology that are not open like the open web was the only solution viable. There is some sort of movement about the power of the open web and more specifically HTML5, and these days HTML5 is about pretty much anything that was added to the web stack for 2 years.

Even non developers heard of HTML5. Hell, even the web agency secretary knows the buzz word.

People supporting the Occupy Flash movement don’t get it

It seems the Occupy movement even…

Another year is ending..

Each year I highlight what has been happening in my small dev life and another year is coming to an end, so here we go.

1. Github (and git) changed everything

At the beginning of the year I moved the jQuery validationEngine plugin to github and started to learn git. First thing first, I love git. It is so refreshing to use it after 2 years of wanting to kill svn. Thanks to Github I also learned more commands than i knew with svn.

Github also supercharged the validationEngine plugin development. I have got a lot of contributions and can’t thank you enough guys for submitting pull requests. Special mention to @orefalo that really took the early development of 2.0 in his hand and made the code more professionnal.

I…

Working with jQuery load() function on images in Internet Explorer 8 and below

One big problem with using load() on images is that it just does not work at all on ie. Now there is a lot of solutions proposed to counter this problem, however most of them are irritating.

Why IE handle load() this way

Simple, IE already cached your image, so it does not need to load it back The 2 most know solution to this are one, adding a random string at the end of the image url, like this:

The other solution is to check the height property since if it’s not zero, the image is already loaded:

Well these 2…

Text editors again

I found my new house, really. I have been using e-text-editor on windows and Textmate on OSX for nearly 3 years and never really saw any contender to them. I tried aptana 3, too slow, no textmate bundle, buggy jquery snippets, in the end I still went back. My 2 favorites both support tm bundles, there fast, E had split view and some nice features like command lines via cygwin.. But where is my textmate 2? Nobody knows, I heard the author went to work on the Espresso editor, it did not impress me, but fortunately now Sublime 2 is here to take the place of Textmate 2.

Sublime text 2, the new holy grail of editing

Okay, I know VIM is powerful (hello sys admins )…

Organizing events with jQuery

Following the launch of BackboneFU I wanted to take the time to talk about my current setup when I am not using an MVC framework on the front-end. This will be also part of my presentation at Confoo 2011 (if I’m chosen).

The problem with handling events with jQuery is probably that jQuery itself makes it really easy to make spaghetti code, so only reading the jQuery documentation you are bound to hit a wall at some point. I’m always amazed at junior javascript developers’ code and how they always mess things up if they use jQuery.

Prob #1 Anonymous functions

When you look at the jQuery documentation for events, you would see something like this explaining bind:

It’s not because you can use anonymous function to do everything…

Two headaches explained when you’re getting started with backbone.js

Recently I decided to dive into backbone.js. I tried to write a small project with it but I found it was hard to get into and abandoned. After seeing a presentation of it at JS-Montreal, I finally decided to give it another try and started porting a project I was working on to it.

Personally I find that backbone.js is a weird beast. It’s called an MVC framework, but there is no controller, the events system is completely different from your default PHP/Ruby MVC style and there is a notion of collections. Basically Backbone is a MRVT(Model Route Views Template), scratch that, it’s in fact a MCRVT(Model Collection Route View Template)

So if you are a front-end developer with some MVC knowledge because you are sometimes dealing with a…

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…

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

Handling javascript errors on production websites

Handling javascript errors as always been sort of a problem for me. Testing every combination possible in a big application is hard, and there is always a chance you will miss something.

Of course, we should always strive to make an application as bug free as possible, but users seems to always find a way to break it. You can always expect them to do something you never have think of, and this is one of the reason I created this plugin.

When a javascript error is detected, this plugin will do an ajax request to your server and then sends an email, of course you could also log it in a database. It’s certainly not a revolutionary idea, but still, I was finding the idea cool…