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 plugin.

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 got into web technologies. Even if “occupying flash” doesn’t make any sense if you want people to uninstall it. If I had to guess, I would say that the people supporting Occupy flash never really delved into that technology and just are kind of pissed that most of the publicity on the web is in flash (which makes a pretty poor audience to go to war with anyway). Because knowing the technology, you would know that Adobe API’s for creating interactive experiences is specially awesome, and that AS3 is a really beautiful language.

It’s so slow

So why do you want to remove Flash from the web again? Oh yeah, slow, buggy software… Guess what, there are as much javascript developers than AS3 developers that don’t care about performance, and the consequences are as much important: crashing and slowing your computer.

So don’t tell me it slows the web. A more accurate saying would be that videos and animations slow the web. The more we have javascript, animations, canvas, videos, the more your page is going to crash, whatever the technology. If Flash never existed another technology would have slowed down your computer with videos and animations.

Adobe is iterating a zillion times faster than the W3C body. Adding cooler API’s to Flash every year. Forget it guys it’s not going away. And this bring us to the next subject.

Flash cannot be replaced by HTML5 (* not currently, not in the near future)

Now you could certainly use HTML5 and jQuery to do what Flash does? Bullshit. That’s a statement that I often see. What does jQuery has to do with HTML5 anyway? You are going to query canvas with jQuery?

What you can currently replace, is the same thing that you could replace 3 years ago when jQuery 1.0 came out: basic animations. So why all the fuss?

CSS3 is a mess cross browser, it’s non-existent on IE8 and less, and canvas API’s are so low level we currently have no idea if you will be able to achieve all the great stuff that you do with Flash with a decent framerate soon.

No, Occupy Flash is about supporting the open web

The what web? Who’s behind the open web? Google, Apple, Sun, etc. The same companies that love proprietary technologies. They love it so much that they could not decide one default video format for HTML5 pushing for their own. They love so much javascript that they created a competitor much like Actionscript, Dart. They love it so much that they put their companies’ needs before the needs of the many.

They also bring us absurd things like “aside” , aside what? How does it help semantic if I can’t understand from the get go what it does. Is that going to be remove? No, that would mean tons of back and forth with tons of people that are moving a ship bigger than the largest boat on earth and consequently can never turn on a dime. Once a direction is taken, going to the other side is slow and costly.

The open web is a great smoke screen if you ask me. It’s nice that we move forward, it’s nice that we got new tools (thanks god for border-radius and box-shadow) but it does not mean it’s the better tool for all situations.

It’s about using the technology that make sense for your client or product.

You want to create an interactive experience, bring emotions, nothing will beat Flash with great designers. You want to create a web application, well there is a ton of opened and closed framework to that end. You must choose technology depending what is better for your team.

About mobile..

In fact it seems we are steering more and more away from open technologies. Mobile is all about closed frameworks that are faster than the open web. Try an app with jQuery mobile, then try an native application, which is faster? Maybe we should kill all apps created with Phonegap, or maybe, it’s all about using the right technology at the right time.

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 unfortunately have less and less time for developing the plugin, after 3 years of maintaining it, my resteless captivation for form validation have greatly diminish, but don’t worry, I don’t plan to stop supporting it.

The validationEngine plugin still got strong support

Obviously the official plugin take much of the market. But there is something really satisfying of not having to play around to place the error prompts, and I know for a fact that’s why so much people are turning to my plugin.

This year approximately 50 000 peoples downloaded the plugin, overall it got downloaded 200 000 times since it was launched. Not bad!

Did my biggest Javascript project yet

This year we launched a new email editor at Cakemail, much like the one that campaign monitor and mailchimp got. We do not have the man power that those 2 companies got but I am really proud of what we did. For my part, it’s 2 months of javascript development + debugging with iframes and IE.

My last big JS project was for Workopolis. Unfortunately the time constraint was a bitch, I don’t think I can speak of this project yet, but in 1 year or 2 it will probably go offline and I will, I learned a lot from this.. . It was a 7 months project nightmare and I will probably be going to hell for the code in there.

Launching a project part time is more than hard, it’s near impossible for some people

I don’t want to say for people that got a life, because that’s an idiotic statement and people saying that probably just got no career ambitions (or do not take the steps to achieve those) and would not understand anyway why we do this.

But when you got a house (that needs renovating), a girlfriend, still got 1 or 2 friends, you need to chose between trying to start a company and doing other things. Fortunately I got a very understanding girlfriend and I am really near of launching something, but obviously I had to cut some stuff out.

Kind of funny how 4 years ago I was really not into coding and was just waiting 5 o’clock to go cardio training.

Don’t scale a project before it need to (specially if you are doing it part time)

I’m not in Y Combinator, and would probably never be accepted in there, and I also don’t push 60 hours of code each day. This mean that I need to cut corners somewhere. I cut unit tests, procedures, validation (to some extends), frameworks complexity and more..

In my first personal project I used Symfony 1.4. I wanted a framework that can scale team wise. That was probably the stupidest decision I did. For once Symfony 1.x is dead now, that does not help….but, you pay a price when you use code generators, big orms, big caching systems and etc. You don’t really understand the fuck is going on, and when you hit a framework bug, you just want to throw your computer on the wall, and since you don’t have much time, it is really slowing you down.

Now I stay near stuff I know best, the front-end stuff. I also use a really small footprint framework on the back-end that does not change often its api, CodeIgniter. I try to get frameworks out of my way as much as possible.

This way I got as much chances as possible to launch something the faster I can.

People don’t want to get involved in other people stuff

This year I started backbonefu.com. I have come to love backbone.js and was feeling that the web was missing helping guides for it. In my ideas of grander I thought this could be a big community website, but I hitted a wall, the same wall I got with this blog in the past. 2 years ago I redesigned this website to become more news oriented and tried to get people involved in it.

Thing is, people don’t want to be involved in others shit. They want to do their own shit (which is understandable). And so I am still the sole author on backbonefu . Still, I like the site and will continue to post about my trials and errors with the framework.

The conclusion

After more than 5 years as a professional, I am still a front-end developer. I do not lead a team and I am really not sure if I would be good at that. I still have fun at what I do but wonders what will happen to me and my “career” in 10-15 years (like every year ).

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 solutions work, but they are not really nice. In fact this problem can be solved a lot easier.

Use load() first

Yup. That’s it, when you create your image in javascript, before doing anything else use your load function and IE will behave like all the other browsers.

Sublime text 2, the new holy grail of editing

Okay, I know VIM is powerful (hello sys admins ) and Emacs got a weird following but here we got a game changer. It got the snippets power of textmate (all tm bundle works, mostly), the extensibility of VIM and the split view of E, all in a nice package, available on Windows, OSX and Linus. Meaning you will never have to fear coding on any platform. A part maybe from your web server.

Obviously I am excited, I moved my tm bundles and started playing around with it but it is too soon to tell if the relation will last. If you want some tips and tricks on using Sublime 2 I recommend having a look at this article on nettuts.

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 that you should, use simple objects for that.

What is the deal with “this”

jQuery always assigns the this value on the DOM element when you bind events, pretty useful, but not really good if we use objects and want to call other methods, that is why I pass the this value as a parameter in loadEvents().

Also since the anonymous function changes our scope we need to save the this value doing var _this = this; at the beginning of the method to use it later.

Using an object you will give you a much better code organization, as a bonus you see every events binded in the js file easily.

Give a context

If you are the kind that dump every js files at the beginning of each page, giving a context to your events can be a very good idea.

Personally I really like to use a parent element for that, for example, I know that everything that happens on the dashboard has a parent with the css class dashboard. So I would do something like this:

On this line: if(!$(“.dashboard”)[0]) return false; we check if the dashboard element exist, and if it does not, we do not load the events, It can save you a lot of overhead at practically no cost. Then we use delegate instead of bind, so if we want to convert this app to an ajaxy app, events would be automatically destroyed if we removed the dashboard element.

That’s it!

I just wanted to share my current code organization, hope it can give you ideas for your organization too!

Update

Following some commenters ideas, there is a couple of things we could do to improve this.

First, we can use !$dashboard.length instead of !$dashboard[0], little bit clearer.

Lets chain the delegate! Since we always use the same parent this is something we can do. Also, wrapping into an anonymous function is not the best idea in the world, 2 things have been proposed here.

We could use jQuery proxy like this $.proxy(this.selectedOption, this), or we could do something like $dashboard.delegate(“#myButton”,”click”, { dashboard: this }, this.selectedOption);.

So lets check our new formula:

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 back-end framework you will probably be completely lost. Then you start reading the doc, it seems good and gets you 80% there, but trying to start only with the doc will probably end in pain. Then you go to the todo app example, you understand a little bit more the concepts but there is still lot of WTF.

Then, you search for tutorials, the nettuts tutorial is particularly good. But personally I had problems with what is not really explained in those tutorials, I guess you could call that “edges cases”. Only the videos at peepscode (Did not want to do promotion, but credits where it is due) where successful at really showing me all the power of backbone and really helped me understand all the underlying concepts that come with that.

So anyway, what was the 2 problems I have been struggling with? Well for one when I was binding a collection to a method within my view, I would lose the this reference to my view in that method, and also, my events would not bind to my views and would just never fire.

Events Binding In The Views

In backbone, the views control all the events that are happening “in this part of html code” (in other words, your associated template). Which is really good for decoupling your code, and makes for a very good code structure. Events are handled automatically with jQuery delegates, thing is, the dom element that delegates all the events need to be outside the view, something I did not understand at first. It makes also no sense to me that I can’t delegate my events from within my view, what happen if the view is a popup? I don’t want to delegate to the document.

Fortunately something you can do after your view content is rendered is changing the this.el element to the view container and call this.delegateEvents(this.events) . That took care of the event binding problem.

Update from Josh comment:
If you assign ‘el’ directly to the view and remove it from render, the dom element that delegates all the events will be part of your view. Based on your example, do:

wedapp.view.TasksForm = Backbone.View.extend({
el: $(“.dialogForm”),
…You can then remove this.delegateEvents from render as well.

Example:

Weird Custom Events Behaviors

Backbone has a custom events system baked-in which makes it really simple to handle model states. This is really powerful since when you update a row in your database, for example, the html for that row would be automatically rendered back when you change the data. No DOM data tags non-sense.

Problems is, doing this.collection(‘reset’, handleCollection) changes the this handle to the collection! I was wondering why in handleCollection() I could not call any other method from my current view. Of course I logged this to see what was happening, but since backbone is very particular of what it returns I did not see that handleCollection was returning the collection instead of the view object.

What you need to do for retaking control of this, is to bind it to the view in the initialize method like this: _.bindAll(this,”handleCollection”) . Personally I don’t think it makes sense to handle it that way and it pains me to add this code, but here is no other way that I know of.

Update from Josh comment:
If you want to bind your collection to a callback event, do: this.collection.bind(‘reset’, this.handleCollection, this)

If you pass “this” as the third parameter, you won’t need to do your _.bindAll() in initialize for that method. I’m assuming here that handleCollection is a method in the view.

Hope it helps!

I am a bit disappointed that backbone.js is so hard to get started with. It introduces a lot of concept to front-end developers and do not have enough tools to guide you around.

I think tutorial videos through each sections would really help a lot the beginners understanding all the underlying concepts of backbone, I even thought about doing some myself but I’m too much inexperience with it to do that. In fact I think that a getting started guide like rails for zombies would be perfect, but hey, I know it is a lot of work

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 by using various tricks, and when I say tricks, sometimes it really means hacks, specially in older browsers like ie6. In my article about script loaders 1 year ago I gave them praised, and I definitely meant it, but currently I unfortunately just stopped using loaders.

What went wrong?

When I first tested labJS I was flabbergasted, it was loading my scripts 3 times faster on a average website. I was looking at optimizing the front-end speed of our framework at my last job (w.illi.am/ a web consulting/agency), and this was a strong contender at being implemented. And we did just that, we implemented labJS at the core of our CMS. It definitely took some fine tuning and we had some weird bugs at first with execution order and dom ready statements, but within a week or 2 everything was back to normal.

Then a new project came with an IE phase testing, to our horror IE8 was giving us wrong error lines, it did not understand what labJS was doing and could not find any script file loaded by labjs. Still we continued to use it. Then Firefox4 came along, our older labjs version was not compatible with it, this was a big problem for us, since w.illi.am/ does something like 50 websites a year, not centralized. We just could not afford to update labJS for each project. This was the end of script loading for us, we had to revert back to our old way, we could not take the chance that older version would not be compatible with future browsers.

** I also heard that some of them had problems with newer webkit releases, prompting another library update.

Is it really worth it to use a script loader?

Personally my response would be no, you introduce in your stack a very big point of failure, if this script fails, your entire app fails, furthermore you *generally* need to follow convention dictated by the library. RequireJS works best if you follow their module convention, and labJS has an api to make it easier to keep the execution order, but it really changes the way you would normally work.

I’m no more at w.illi.am/, but at Cakemail we are currently minifying everything we can into one big js file, like what javascriptMVC does, and loading it normally. It seems to me as the best approach, *some* scripts minifier have been stable for ages, so I know that my production application will not break because of it (it can happen of course, but it is really rare), and in development we just keep the gazillions of script tags for debugging.

That being said, I still think script loaders are a brilliant technology, and I have a lot of respect for their authors. I mean, if your looking for optimizing your page loading time to the maximum, script loaders are a no brainer, its probably your single best optimization beside doing the normal stuff, but it’s not a task to be taken lightly and you must be aware that there will be maintenance and setup cost.

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.

Setup

I’m not going to be talking about how to do the flip effect, there is already several posts about that. What I will show you is how to use it intelligently and make it fallback.

So, why this effect is not working on Firefox you might ask? Firefox had css3d since version 3.5 after all, well webkit implemented a new property, *currently a w3c draft* called backface-visibility. This nifty property allow you to hide the back face of an element. I guess you can imagine and this can come handy in a flip effect. This is something that IE9 and Firefox does not currently support.

Creating a version compatible with other browsers

For achieving this, we will need to use 2 absolute positioned elements, and show and hide them with display:none on the hover state, pretty easy in fact. The tricky part is that we also need to override this behavior on webkit based browsers(and maybe other browsers one day). For this, we will need to use a nice css feature called media queries.

Media queries

Yup, you can do conditionals statement in CSS. This is really handy if you want to implement edgy stuff on browser that supports it, and still give a nice level of support for older browsers (it’s, of course, useful for other very important things). For our little project we will use this media query.

So why use -webkit-min-device-pixel-ratio? Well because this property has been added at the same time that backface-visibility. So yes, this is a hack! But it works, I would like to have something cleaner but this will do for now, we will also need use something similar when firefox will implement backface-visibility.

So what our CSS code looks like?

Download

There we have it! As usual the code can be found on github.

Download the source code

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 enough to add it to my list of online plugin.

It’s also very useful for debugging big live applications that you have not written. In which case you want to know if some users hit javascript errors already.

Download the source code

Integration

Load the plugin just after the jQuery library

Your done.

Options

By default the plugin automatically fetch the domain and add it to the email subject, but you can overwrite it.
You can also define a from attribute, I would highly recommend that you change the from setting in the plugin file (jquery.onerror.js) if your going to use this plugin on multiple websites.

The Email

The email received will look like this:

A javascript error has been detected on www.position-absolute.com

Error: variable is not defined
Url: http://www.position-absolute.com/creation/onerror/
Line: 21
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0

Limitation

The plugin works on:
Firefox 3.6+
Chrome Latest
IE 7+

It does not work on Safari (but it will not break your application)