Check out JQLoader v.0.1.0

Managing multiple Javascript libraries sometimes can become a challenge. If you write a library and it requires to include other existing libraries, and those libraries also require additional files, it is obvious that assembling your project will require from you to build a mental map where you have track all the dependencies. Often times I noticed that Javascript projects tend to be monolithic. Entire AJAX applications are written in one single file or directly in the HTML page, compromising the portability and scalability of a project. It is, in my opinion, a natural response to a problem that developers may not want to deal with.

jql-logoAs an exercise I decided to write a jQuery plugin to help managing Javascript libraries and their dependencies. JQLoader It is a very light wight plugin with a small set of API that are specifically created to help you organize your projects and simplify the way you assemble your code. If you have face issues loading multiple Javascript files, JQLoader could be a great allied to help you manage files and their dependencies. In a nutshell, you can divide your application into multiple files and JQLoader will stitch them for you, allowing combining the files that your application really needs.

Click HERE to check out the JQLoader Plugin page.

Using Javascript to encode images as DataURL

The following code shows how to use the HTML 5 Canvas element to encode image as data-url schema. The motivation to write this utility function was being able to include other resources in the HTML file itself. If the images, CSS etc. are required, your application can save a few HTTP requests if the files are already inline.

Having images included in the HTML page as data-url comes with a price; the page will become illegible. The output string is long and difficult to read when you look at your code; I took a 8 K JPEG image and its equivalent as data-uri was 74 K, even when I compressed the text the size was still bigger that the original JPEG (57 K).

As you can see I am drawing the image on a Canvas element and getting the data-url by calling toDataURL() which return a base64 encoded string. The same results can be achieved using server side languages. When using Javascript only, you will only be able to process images hosted in the same domain where your script is, otherwise an ‘Security error code: 1000’ will be thrown by the toDataURL() method.

JavaScript Tester

Type your custom Javascript Code:

Here is the code:

Inserting SCRIPT tags at runtime

If you ever tried to create a script tag and add it to the DOM, you probably discover that it works fine in Mozilla browser, but not as well in IE.

For the SCRIPT tag IE doesn’t allow modifying the innerHTML value of your new HTMLElement. In one of the Microsoft page they explain how to insert a script after the pages was constructed (innerHTML Property).

This is what you will see in Microsoft’s Example:

Its’ a kind of tricky, but this approach does not work in Mozilla browsers. The DEFER value is need by IE and it doesn’t help Mozilla browsers. To make it compatible we have to avoid accessing elements directly. Getting a reference by the element ID will be a more compliant approach.

In a real world you may not want to insert a button to trigger the new script and you just some new code to be executed, so we can remove the ‘Click’ button and add our own code.

Custom Example:

The new SCRIPT tag can be inserted but the code does not execute in IE. Removing the button makes IE ignore the script. It seems like a visual element must be added for this to work. Instead of removing the button we can replace with an invisible element.

IE and Mozilla compatible:

This is a good example if we know ahead of time what the code that we want to execute. If we want to add dynamic values to our code we have to use a more generic approach:

Enhanced Version:

As you can see this approach will let us include a script that is in a different URL or create a string with any dynamic value.

If you ever wonder why the function returns the new script tag id, well, that why I wrote this post. I needed to dynamically add an script tag to listen to events in a windows media player object. To do that, I had to add a script tag that contains attributes such ‘FOR’ which points to the windows media player instance (object id) and ‘EVENT’ which refer to the player event you want to listen to. Well the script above works fine but the ‘EVENT’ attribute is ignored. A way to work around is adding the ‘EVENT’ attribute after the script tag was appended to the DOM. This is why convenient to have the script tag id.

Click HERE to test this functionality.