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…

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…

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…

Javascript patterns headache, the path to modular applications (part 1)

With libraries like jQuery, manipulating the DOM, ajax calls, animating has become really trivial. The problem is, it also becomes easy to have a mess of DOM ready statements without any comments or structure.

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…

In video: John Resig on Advanced Javascript to Improve your Web App

In February 2010 John Resig, the creator and lead developer of the jQuery JavaScript library, spoke at the annual Future of Web Apps Miami conference. During this 25 minute talk John outlines many of the new features and ideas behind jQuery 1.4.

Source from ThinkVitamin.

In video: Optimizing your javascript!

If you are in a company that build corporate websites, chances are you probably never had to optimize your javascript. Websites in general have 3 or 4 ‘widget’ that in the end do not really slow down the page load.

But when you start doing web applications, you start to feel the load you impose to your browser at every page. This is where optimizing your javascript becomes crucial.