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 over again

@font-face suffers of the same illness that its predecessors, until the font file is loaded it will display your text with the fallback font family. When you know that 20px with an hand written font can be a lot smaller than 20px with Arial, this becomes a major problem, you don’t want to see an enormous text until your custom font is loaded.

Google WebFont Loader at the rescue

I will be showing how you can use the google font loader to avoid text flickering and have a good fallback font in case the font file is not loading. You get the best of all world, but it comes with a price of a light javascript hack.

Getting started

Using the basic google font ability is easy (but it is quite a bunch of lines of code), you just embed the font you want!

As you can see, in this example you just need to change this line google: { families: [ 'Tangerine', 'Cantarell' ] } for the font you want from the Google Font Directory (other fonts are also available like those from typekit.com). There is also quite a bunch of options you can use, have a look at the loader API for more information.

Now this script does one thing interesting, it adds a css class to your document html, it will add wf-loading until the font is loaded, wf-inactive if it can’t load the font, and wf-active when it’s successful. We can use this at our advantage. You can provide a valid CSS fallback that protect yourself from enormous and actually define your fallback font instead of being dependent of the same line-height and font-size.

An example

View demo

In this example we can see that we have a very good font-size fallback we use wf-active to set our custom font, and we just do our normal css flow as a fallback.

A flicker you say?

The text still flicker a bit at random times, specially in IE, this is because, wf-loading is added when the javascript file from Google is parsed in the document, and for some reasons (I guess it is a bug), even is we put async false, sometimes the wf-loading class is added to late.

The best way to avoid the flicker behavior is to add a class wf-loading to the html document in javascript ourself, you then add the rule visibility:hidden in css to it, and on .wf-inactive and .wf-active you simply add visibility:visible, the same css rules added in the last example. This way if the font can’t be loaded we will receive the wf-inactive and the text will be displayed.

With this solution your users with javascript disabled will still see your text with your normal fonts.

(This solution has been updated, Thanks to Paul Irish idea in the comments section)

View demo

That’s it

Hope it will help you guys get your custom fonts working as you want!

Loading script asynchronously

One thing you need to know is that your script tag block the rendering of your page. In fact, it blocks literally anything from happening, when you are downloading and executing one script, not one css file or one image is downloaded. So imagine you got 10 script files loaded in your head with around 300k in size, well the browser need to load them one by one (well in fact 6 at a time in FF and WebKit, and as many as 18 (or more) in IE8. In older browsers it will be one at a time. ), and execute them one by one, by that time there is a good chance your page would have already render the HTML and CSS.

The first and very easy thing you can do is loading them just before the body end.

That way, at the very least, the CSS and the html will be loaded before the javascript. One thing really cool about doing this is that the jQuery DOM ready statement becomes obsolete. Your html is already ready because you parsed it before any script tag. That being said, watch out for the global scope, I would still wrap my script in an anonymous self-executing function, like this:

Going one step further with labJS

With LABjs you can load your js files completely asynchronous. The difference with the previous example is that even if your scripts are at the bottom, they are still downloading one by one. With this tool, you can load your scripts simultaneously and specify an executing order. From my tests with dynatrace, the javascript load 3x more rapidly using LABjs, and my page is loading 15% faster (for about 15 js files) on IE8. An example:

Your loading speed gains comes with a cost of complexity. As I said earlier, it loads them async, so any of them could be executed before another. This is pretty bad if you use a library like jQuery, it needs to be executed first. You have 2 choices here, use .wait() at the end of each script that need to preserve the execution order, or use .setOptions({AlwaysPreserveOrder:true}) that will always preserve the order at a small cost of performance. So if you want to go all gun blazing use .wait(), if not, use AlwaysPreserveOrder (that’s what I do, the speed cost is really minimal). Some examples:

With .wait()

With AlwaysPreserveOrder

The full labJS solution

Okay we figured out our execution order, what about our inline scripts? Those scripts block will probably be executed before any js file has been downloaded. Well the solution to this is cool, but not simple. We will create a global variable that will contain all our inline coding. To do that the first thing to do is add a variable to the head.

Now in any part of your page, you could add an inline script block this way:

As you can see I use jquery in there, _loadingQueue.push will add this anonymous function to our loading queue, you can have as many inline scripts as you want.

In our labjs loading sequence, we need to do a bit of hacking to make this work.

As you can see I have a nice loop now. If the variable _loadingQueue exists, I get the _loadingQueue length and when all my scripts are loaded and executed ( $LoadDefer.wait). I execute all my stored functions. Pretty nice!

This is the full solution to load asynchronously your scripts, I think it will cover 99% of your needs. I added a demo below.

View demo

Combining and minifying your scripts

Something you might not notice in your local development is that file requests are time consuming. Imagine you have 10 js files in your page, if your browser spend 100ms on the network looking for each script, you lose a complete second just looking around the web for those files!

Enter minify

Minify is a nice php library that let you combine your css and js files on the fly and cache them on your server. With this library, you could get back this 1 second.

Minify is easy to install, you download it, put it at your address root, from there you can simple access minified files like this http//www.example.com/min/?f=js/jquery/jquery-1.4.2.min.js,js/jquery/jquery-sortable-1.7.1.custom.min.js. At my workplace, we use minify on pretty much every generic plugins and components that we are using in a given site. This is a good compromise, this way we have about 10 javascript files combined and we can still see errors online from our custom scripts. But you could simply combine all the files for maximum performance, at the cost of losing errors location.

You might get a bit lost in the config, the 2 really important configuration are $min_cachePath and $min_documentRoot. I had to work a bit to get minify working with the Zend framework.

Integrating it with labJS

Once minify works, adding it is not really complicated.

Small warning

I do not use minify to combine my css files, simple because it brakes my images path. If you always use absolute path you will have no problem, but remember that most of your jQuery plugins use relative paths in their css.

Conclusion

Optimizing is not free, it comes with adding a layer of complexity to your application, personally I created a small helper for Zend framework that incorporate everything I mentioned above. From one boolean variable I can decided if I want to minify and embed using labJS. This is really useful for debugging. Also if you are interested in optimizing your js I would strongly recommend you have a look at the api of both LABjs and minify for more options and more detailed instructions.

Some other technologies worth mentioning, YUI compressor as a replacement for the minify library, and requireJS as a replacement of LABjs. requireJS got a different approach, instead of focusing on loading asynch our files, it focus at loading only the files you need to execute a given script in the page.

Small clarification from James Burke : RequireJS also loads files asynchronously. As compared to LABjs, RequireJS encourages writing well-scoped modules, and using its built in optimization tool to combine and minify scripts.

Dynatrace

Dynatrace is really the tool for testing front-end performance on internet explorer, you get execution times from everything, cpu usage and much more. It is the most powerful tool I saw on any platform for front-end tracing. The best part? It’s completely free!

Validation in overflown div and lightbox with scrollable content is now supported

To get the supported mode you need to add this option when instancing your plugin:

(With overflown hidden parent)
View demo

The big change in this method is that normally the engine will append every error boxes to the body. In this case it will append every error boxes before the input validated. This add a bit of complexity, if you want the error box to behave correctly you need to wrap the input in a div being position relative, and exactly wrapping the input width and height. The easiest way to do that is by adding float:left, like in the example provided.

The default top right position is currently the only supported position. Please use this mode only in overflown div and scrollable boxes, it is slower and a bit less stable (I have been using the engine for 2 years, but only one 1 month with this method). Also, the scrolling will be applied to the overflown parent, not the document body.

Thats it! Hope you like it

You can download the validation engine on the API description page.

With these 2 plugins you will be able to create a map, add markers, links an information bubble to them, filter a list of addresses from CSS class elements and link them to the map.

Download the source code View demo

The Google Map jQuery Class

The first thing you will want to do is, of course, create a map. For that you will have to link all files and instantiate the class.

By now, you should have a map pointing on the US. Now we want to add markers and bubbles linked to them of course!

The title will be push into the information bubble, you could also put HTML tags in there. As for the address, there is a little bit of magic happening. You can’t send directly an address into the map and get a marker, you need to use what Google call, the geocoder, to get the longitude and latitude, and after that push them to the map. You could alternatively directly use the latitude and longitude following this pattern:

That’s it, each time you will call AddMarkers, the class remove all markers and you get a clean map to work with.

Download the source code View demo

The HTML List Filter Class

The class will filter a list of elements based on the CSS class’s each have and compare them to currently selected select options.
Let’s instantiate the class:

The class also exposes a custom event that fires when the list is filtered, that you can use this way :

If you want an one of your options to select everything, just put the value to “all”. In your list you want to add associate class on li tags that way:

In this case, the class “sort” the the class to sort the li, and it will compare selected options against california and water.

That’s it! It will now auto filter on the onchange event.

Download the source code View demo

At last

Of course you would need to link the 2 plugins together, this is done here, in the index.html:

Here you go, hope you enjoy it!

Tested on:
Firefox 3+
Internet Exploder 6+
Safari 4+

If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!

$.data, link data to DOM elements

I use $.data heavily in my web apps, see $.data as a persistent memory for the DOM (until you reload the page of course, not like localstorage). From the jQuery API:

The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can set several distinct values for a single element and retrieve them later

* Just to be clear, the data is not actually saved in the DOM per say, but in the jQuery internal $.cache, and this cache will match the DOM element you saved “in it”.

But how this could be useful? Let’s take a small example

You have these you want to get some properties of it, lets say width, height and its html content. Now you want to loop to get these properties for all those divs. Instead of manipulating the DOM 30 times x3 (for width, height, and html) each time you want to save those properties, you could add a json object glued to the DOM element on page load, and modify it when the DOM element is modified.

This way your loop will be MUCH faster. You only reach 1 json element instead of actually getting all the data one by one.

If you need data stored in the page, this is a nice alternative than just doing variables, and it can be quite powerful. For more information visit the jQuery API.

$.extend, extend any object

If you are not developing jQuery plugins, chances are you never heard of this little method. If you have developed plugins you probably have used it to extend your plugins options. But $.extend can be used for much more than that.

The power of $.extend comes from the fact that you can extend any object, you could in fact merge 2 singletons into one. But where could this be useful?

Let’s say you have 2 complex lists that need to merge into one, you could do $.extend(true, objectReceiver, objectMerged).
objectReceiver would effectively receive everything from objectMerged.

An Example

Result:

This technique is also really useful for configuration objects that need to be, well, configurable without always passing the complete object back. For more information visit the jQuery API.

Bonus!

Hope you found this article useful, for even more useful jQuery tricks I would suggest you have a look at the video below from Paul Irish, 10 Things I Learned from the jQuery Source

Volume 1: The Early Years

Chapter 2: And Then There Was JavaScript

Act III: Function the Ultimate

Episode IV: The Metamorphosis of Ajax

Part 5: The End of All Things

Vanthia

Vanthia is just a browser MMO based on Mootools and Python. The creator worked on it for years and it shows. The UI is great, the game itself looks great, it use canvas and various HTML5 apis. If you are trying to do an MMO javascript based games, I suggest you have a good look at it.

The video is a bit old, it changed quite a bit.

Aves game engine

Aves is a javascript game engine that got an isometric level editor. oh yes, it also got real time features.

Mozilla Hacks HTML5 image editor

This one is more of a technical demo, but anyway, can you ask more than drag and dropping files directly to your browser, saving them offline and synchronize them later? It really show what kind of user interaction we will be able to do with HTML5.

Jilion HTML5 video player

This HTML5 video player has nothing to envy to any flash video player.
http://jilion.com/sublime/video

Quake 2 engine to HTML5

When 3 googlers decide to port Quake 2 to your browser you can get surprising results. Oh and did I told you it got multiplayer using HTML5 web sockets? it also use localstorage, and html5 audio.

Hunting listeners in JS files can be quite tedious, this is where the AOP plugin can help you.

What is Aspect Oriented Programming? (AOP)

“In computing, aspect-oriented programming (AOP) is a programming paradigm which isolates secondary or supporting functions from the main program’s business logic. It aims to increase modularity by allowing the separation of cross-cutting concerns, forming a basis for aspect-oriented software development.”

A good AOP article

In javascript, using this technique, you can bind listeners to any function or object, which will be fired when the function is executed. With this information, you can know when a function is executed and what DOM element fired it.

The jQuery AOP plugin is very small and it allows to add advices (Before, After, After Throw, After Finally, Around and Introduction) to any global or instance object.

View demo

* Have your firebug or developer console open

How to use it

Using the plugin is pretty simple, first add the script to your head (you can download it here)

An example:

When a string is replaced you will have this log fired, pretty sweet.

Lets add a little twist to it

What if we want to test any function easily?

As you can see, you can now bind basically everything using this method. Want to know when your lightbox is fired? Or maybe when this particularly function is called? Pretty easy.

That would be how you use it. In this example I fire logs before loading my lightbox and before using the test() function.

That’s it

This is just a start, you could also log any DOM modification, this plugin can really give you a lot of debugging power.

Download the source code View demo

A namespace to rule them all

This is a small javascript framework that I use for starting my javascript/jQuery project. I think it could be most beneficial for those coming from libraries like jQuery. Dojo being quite expressive on how to work with it, and Mootools and Prototype being a bit more structured.

A small note, I used jQuery in the framework because of the AOP plugin (and because I mainly work with jQuery), you can erase any jQuery reference easily in less than 30 seconds .

What this framework aims to do:

• Easy to understand
• Modular
• Each module will heritage a set of tools and each module can be instantiate
• One namespace
• Can apply tests or unit test out side of the application itself.
• Use the jQuery aop plugin (aspect oriented programming) to add logs to internal functions

Download the source code

** I am not an expert in javascript design patterns, but that is what I have come to in light of my experience, I will certainly take constructive comments, and if you like it, please use and modify it as you want.

Schema

Download the full version in pdf

How it works

LABjs to load all your scripts
First thing first, in app.html you will see that JS files are loaded asynchronously from the bottom body tag with LABjs. This tools will make you js files load faster and your script will no longer block page resources download (images, etc). You can use .wait() to define load order if necessary. Have a look at the documentation. The major drawback from loading asynchronously is that you might have a situation where someone clicked on a button and the script associate with it might not be loaded.

Namespace
I try to use only one or 2 namespaces for all my applications or even websites. This is why in objectUtils.construct.js you will see that the global namespace is define by this line:

Each module will be declared using this object. So for example, a lightbox class would be declared this way : ApplicationNamespace.lightboxClass = function(){}

Modules

A typical module in your app should look likes this:

We have a pretty cool module here. Let’s get a bit into details here.

This is a private function that will not be available in the global scope. These method cannot also be tested externally, unless doing a small trick that I will talk later on.

This is our privileged function that can access private functions and can be accessed outside after we instantiate it by using, in this case : class.privilegedFunction

This will be called after we instanciate (var class = new namespace.Classname()) and automatically launch this init function. You should also note that this might happen before the DOM is ready, if you use jQuery you need the DOM ready wrapper here.

This is where we declare the prototype associate at our module and method shared by every instance of the module.You can have more informations on prototype in my other article.

This is where we get or create the utility module shared by every modules.

And finally we instantiate the module. There is probably a lot of modules that you might have to instantiate only one time.

Modules utilities object

The utility object is shared across every modules. the definition is done in objectUtils.construct.js.

This is notably important if you want to run some unit test or run some debug from outside your modules. One thing I really like to do,is using the jQuery AOP (Aspect oriented) plugin. This will allow you to bind debug methods to any functions in any modules, it also give you the DOM caller if it exist and it’s context. Here is an example:

As you can see the object is created even if live is false (in production you might want to enable and disable it often), normally this file should not be loaded when the project goes live.

Unit Tests

I really wanted to include QUnit as a part of my work flow, unfortunately, you can’t load QUnit dynamically for now. I really want my unit tests to be in a small lightbox and decide to load it in my app from a small variable state. I will probably create a really small unit test plugin in the near future, I think this is really important to test regressions.

That’s it, here it is

I am certainly not going to say this is a perfect solution, but that’s what I use for now, it will certainly evolve with time.

Download the source code View demo

Version 0.5 Online

If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!

One thing most javascript developers start to do at some point is use objects literal to structure their code. This is a start, but currently creating a front-end intensive web app, I started to wonder if I could do better.

My goal was:

• Easy to understand
• Modular
• Each module will inherit a set of tools and can be instantiated
• One namespace
• Can apply tests or unit test from outside of the application.
• Can use the aop plugin (aspect oriented programming) to add logs to internal functions

First, I would suggest you look at a couple of resources if you are not too familiar with javascript patterns.

• Alex Saxton on javascript and jQuery pattern
• Using Objects to Organize Your Code – Rebecca Murphey
• Javascript: The Good Parts (Chapter 5) (book) -Douglas Crockford
• Prototypal Inheritance in Javascript -Douglas Crockford
• The secrets of the Javascript Ninja -John Resig
• Pro Javascript design patterns – By Ross Harmes, Dustin Diaz

Some nice stackoverflow discussions:

• Are design patterns in JavaScript helpful? And what exactly are they?
• What Are Some Examples of Design Pattern Implementations Using JavaScript?
• What JavaScript patterns do you use most?

With this in mind, 3 patterns sticked more than the others, let’s check them all.

** I am not an expert at javascript patterns and inheritance but I think it was nice to share my findings, please feel free to discuss and correct this article in the comments if necessary.

Object Literals

Object literals are great. You get a pattern that is simple and easy to organize, everything is public, everything can be overwritten, so you don’t have to worry too much about having things you can’t access. Easy to follow and understand, even for new comers.

A typical object literal:

The “self executing” revealing module pattern

The module pattern is a little bit more complex than a simple object literal, that being said, it gives you more power over what you want to be private and public. Basically you hide all your module behind a closure, this closure makes everything in the function private. You then use return {} to make a reference to a function you want public.

Now I will not get in the private or not debate, but I will say that some people disagree with this pattern.

As you can see, you create a public reference to the private function. That was my main problem with it. You never really have access to the public function, you just use a bridge to fire it. It creates problems when you want to bind something to a public function, it will never fire if this function is fired internally. Also, You can’t modify this object.

The module pattern, prototype style

Ahh prototype, those damn prototypes. I found this pattern gave me more liberty, and at the same time, a way to really use my public functions and not just reference them. On the question, but what is a prototype? Let’s just put it this way without going into details:

In the example below, namespace.Classname.prototype will be referenced by every instance you create with “new namespace.Classname();”. So a prototype would normally exist 1 time, if you would create 2 instances, and add a new prototype method, both instances would see it. In brief, when you create a new instance, everything in “namespace.Classname = function() {” is cloned, everything in “namespace.Classname.prototype” is not cloned, and is shared with all instances.

Here what it looks like:

Now this is really not what Crockford would advocate, but still, I found this was the pattern that was suiting best my ‘global’ needs.

Hope this helps you in your quest of modular javascript . In part 2, I explain my javascript “framework”, this is really just my starting point for creating apps, or even just a website.