Optimizing search functionality with large javascript arrays

Processing arrays can take quite a few bit of time, this is something that can directly impacts the loading speed of your page and depend of the computer and the browser your users use. When you think that a typical users can load your website with a netbook , or an iphone for that matter, speeding up search in large arrays can be a good way to optimize your code.

If you never studied in computer science, well like me, the first way you might think about searching in your arrays is to do a loop using the array length and compare each item with your query until you find what you need.

This means that if you are looking for all the items starting by…

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…

Optimizing javascript/jQuery loading time, a beginner’s guide

So you created that nice website or web application and would like to go a step further in optimizing the front-end loading time? With some great free tools you can easily optimize your javascript to load 2 or 3 times faster if you are willing to trade the regular way of embedding javascript file.

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…

Form Validation Engine 1.7 Online

It’s been a long time since I updated the validation engine. In this release the engine get a very small code overhaul, a fix to the inline ajax validation and also, and more importantly, a new feature makes its entrance:

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…

Create an interactive Google map widget with jQuery

Believe it or not, I rarely had to deal with the javascript Google map api, well until recently. Last week I had to create an interactive map with markers and info bubbles taken from html elements in an address list. What a better introduction to the Google map api. These jQuery class’s are certainly not the most powerful plugins out there, but I think it can be a solid foundation for you guys that want to go beyond the scope of the article.

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…

$.extend and $.data, more than just internal jQuery methods

Even if I have been doing jQuery for quite sometime, I always find new cool stuff that I never used before. There is a lot of secret gems in jQuery and I wanted to go a bit deeper with 2 of them, $.data and $.extend. I have been rapidly incorporating these 2 in my development, let see how these could be useful to you too.

$.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…

Crockford on JavaScript

Good morning everyone, having a slow day at work? take the time to listen to these videos, or just put them in background while you work!

“During the past three months, Yahoo!’s JavaScript architect Douglas Crockford delivered a series of public lectures on the JavaScript programming language at Yahoo!. YUI Theater recorded and transcribed each of the five lectures.”

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

Cool web projects that will energize you

Sometimes there are projects that are just way cooler than yours. In this spirit, I wanted to highlights some projects that just flabbergast me. I tried to put more down to earth projects than just “experimental stuff”.

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…

Using the jQuery AOP plugin to debug your javascript

Debugging javascript code is not always easy, you have your normal programming flow, but you also have a bunch of event listeners attached to DOM elements that do not really follow a specific pattern.

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…

A javascript module framework starter

This is the following article to part 1 on javascript patterns.

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…