This is a very good read for developers already working with javascript. I’m sure you will find things in there that are new to you.

The whole doc is open source and hosted on GitHub built with Node.js using jade template.

After looking at many options, we decided to write our own quick and dirty lazy script loader which will fit our need.

The key features we want from it are:

• Dynamically creating a script tag to load any scripts we want
• Handle callbacks
• Handle duplicate script load
• Small in size and simple api
• Framework independent

Usage Example:

ScriptLoader.load('demo.js', function() {
    alert('Demo script loaded Loaded');
});

Code:

//namespace
var ScriptLoader = {}; 

//scripts object storing the state and callbacks of scripts
ScriptLoader.scripts = {}; 

//Handle multiple script callbacks to one single script
ScriptLoader.onScriptLoad = function(url) {
	var script = this.scripts[url];
	script.loaded = true;
	for (var i = 0, len = script.callbacks.length; i < len; i++)
	{
		var callback = script.callbacks[i];
		if (typeof callback != 'undefined') callback();
	}
};

//Main loader function
ScriptLoader.load = function(url, callback) {

	//Check if script has already been added to the loader
	if (this.scripts[url] != undefined)
	{
		if (this.scripts[url].loaded) //File loaded
		{
			//Run callback straight away
			if (typeof callback != 'undefined') callback();
		}
		else //Still loading
		{
			//Add callback to list for running later
			this.scripts[url].callbacks.push(callback);
		}

		//Script already requested so exit here
		return;
	}

	//Create tracker for this script to monitor status and build a list of callbacks
	this.scripts[url] = {loaded: false, callbacks: [callback]};

	//Add script element to DOM and add onload handlers for callbacks
	var script = document.createElement("script")
	script.type = "text/javascript";

	if (script.readyState) //IE
	{
		script.onreadystatechange = function()
		{
            if (script.readyState == "loaded" ||
                    script.readyState == "complete")
			{
                script.onreadystatechange = null;

				ScriptLoader.onScriptLoad(url);
			}
        };
    }
   else //Other browsers
   {
	    script.onload = function(event)
	    {
			ScriptLoader.onScriptLoad(url);
	   };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
};

This is by no mean to be ground breaking or prefect but it is working prefect for us on most popular browsers. There are many awesome fully featured script loading library out there. RequireJS is definitely one worth looking.

I also have to thanks Charles Davison co-author of the code and Bob Matsuoka as he gave us a good starting point for this script in his A Technique For Lazy Script Loading article from Ajaxian

Using Google Trend for website, I added 5 popular javascript framework website and the above chart is the result.

Is jquery.com just that much more appealing than the other framework sites or the actual framework is just that much more popular?

One of the most used and helpful feature of any Javascript framework is probably their selector function. It allows us to search and filter elements using CSS like selector syntax. This means it takes out the tedious part in DOM scripting and enables developers to write less and more reliable code. As a result, we all expect to see some sort of selector engine in all javascript framework.

However, there are still rooms for improvement and reasons to have standalone selector engines that are not part of any framework. Since selecting elements are the most common operational you would do, any improvement would increase the overall performance of your script.

Looking at recent development, there are definitely people believing the need for standalone selector. Here are 4 robust and small standalone Selector engines you can check out.

Sly

This is the new comer of selector engine which launched last week and does look very strong. It support CSS3 selector standard, small and fast. Their test shows that it is faster than most of the framework based selector out there.
Source

Sizzle

Sizzle is created by the creator of jQuery – John Resig. Again this is a very small, robust library. The idea is to have a javascript selector engine that could be dropped into other framework / library. So instead of reinventing the wheel by frameworks writing their own selector engine, Sizzle is here to solve the problem once and for all. John is trying to get other framework to use Sizzle and of course the latest jQuery 1.3 is already using Sizzle as their selector engine. The code has definitely matured since release last year and is definitely interesting to see if others start integrating it.
Source

Peppy

Again all the standard CSS3 selector support, small file size plus from their test page, it does seems to be faster than Sizzle. (but I think it was testing against early version of Sizzle)
Source

Selector.js from llamalab

Another new selector engine released this year that implements CSS3 selector standard and is looking pretty strong in performance too.
Source

With the advance in computer graphics, the way we visualize data have changed drastically in the last 20 years. Visualization Software are developed to take advantage of the graphical power of local computers. But now everything is changing with the Internet. We are consuming a large amount of data online and the desire and expectation to visualizing those data is increasing too. So we need to look at solutions to visualize data for the web.

There are already server side tools or libraries that generate complex graphics. But I think that is not always the best solution. A lot of the visuals could be done on the client side with the browser. It is quite logical to send just the data and let the browser handle the rendering and interaction.

Of course there are a number of client side technology you could use including Flash, Sliverlight, or even Java Applet. But here I want to show you some amazing open source tools built with pure Javascript. With most of the browsers improving their Javascript engines, Javascript is really becoming quite powerful and people are doing a lot of cool stuffs with it and here are some of them:

1. JavaScript Information Visualization Toolkit (JIT)

The JIT comes with 4 tools based on some advanced information visualization techniques.

• RGraph – a radial layout of trees with advanced animations
• Treemaps – displaying large hierarchical structures on a constrained space
• Hyperbolic Trees – a focus+context information visualization technique used to display large amount of inter-related data
• Spacetree – expand nodes that are “context-related” in a common tree layout

Visit http://blog.thejit.org/javascript-information-visualization-toolkit-jit/ for more information and example.

2. MIT Simile Web Widgets

The Simile Project from MIT is focused on developing robust, open source tools that empower users to access, manage, visualize and reuse digital assets. The web widgets contains a toolbox of several Web widgets and APIs to do just that. Just to highlight 2 of them:

• Timeplot – plotting time series and overlay time-based events over them.
• Timeline - visualizing time-based events. It is like Google Maps for time-based information.

Visit http://code.google.com/p/simile-widgets/ for more information and example.

3. MooWheel

MooWheel provide a unique and elegant way to visualize data using Javascript and the <canvas> object. You can use it to display connections between many different objects, be them people, places, things, or otherwise.

Visit http://www.unwieldy.net/projects/moowheel/ for more information and example.

4. JSViz

JSViz makes it easy to create dynamic 2D views of information including network graphs, navigation, and other dynamic layouts. Here are two example:

• Music Recommendations ( link )
  
• Force Directed Graph ( link )
  

Visit http://code.google.com/p/jsviz/ for more information and example.

5. Chronoscope

Chronoscope is a smart, sophisticated and powerful visualizing tool. It is well tested on a large data points and provide an intuitive way to explore, annotate the data. There are four ways for you to use it:

• Widget - allow you to drop a chart into any web page.
• Microformats - understand data in your web page’s HTML <table> data and they’re an easy way to add annotations and highlights to charts.
• Javascript API - use javascript to modify your chart in place.
• GWT API – integration with your Google Web Toolkit application.

Visit http://timepedia.org/chronoscope/ for more information and example.

6. Processing.js

It is a port of Processing visualization language to JavaScript, using the Canvas element. So now you can use most of 2d Processing API. This includes all sorts of different methods:

• Shapes drawing
• Canvas manipulation
• Pixel utilities
• Image drawing
• Math functions
• Keyboard and mouse access
• Objects (point, arrays, random number generators)
• Color manipulation
• Font selection and text drawing
• Buffers

Visit http://ejohn.org/blog/processingjs/ for more information and example.

If you actually get to this far, then I guess you might already played some of the demos. As you can see, some of them are quite experimental and the performance are not great. But I am sure in a year’s time the browser will be come more powerful and we will see a lot more Javascript based visualizing tools being deployed on the web.

Everyone who programmed in Javascript will know that one of the most common way to debug across browsers is the alert() function. Although, you can use tools like Firebug and their console api to output. It doesn’t work on IE or Safari. So a pure Javascript based solution would be great.

Blackbird is one of the latest script that does just that. It offers:

a dead-simple way to log messages in JavaScript and an attractive console to view and filter them. You might never use alert() again.

All you need to do is include the Blackbird script and style. Then you can start logging messages using their APIs including different message types and profiling as shown below:

log.debug( message )

Add a debug message to Blackbird

message: the string content of the debug message

log.info( message )

Add an info message to Blackbird

message: the string content of the info message

log.warn( message )

Add a warning message to Blackbird

message: the string content of the warn message

log.error( message )

Add an error message to Blackbird

message: the string content of the warn message

log.profile( label )

Start/end a time profiler for Blackbird. If a profiler named string does not exist, create a new profiler. Otherwise, stop the profiler string and display the time elapsed (in ms).

Blackbird

Traditionally we generate charts on the server-side but that means it will take up more bandwidth by the image all the way across the internet. Ideally we would just send the data to the browser and it will render the chart. With the advance in javascript and browser support, we have many powerful chart components out there based on Javascript. Now with the help of javascript frameworks, we can create charts in just a few lines of code.

Here we present you with 3 top jQuery plugins for plotting charts.

fgCharting

fgCharting is a simple plugin that provide you with 7 types of graphs such as line, bar, pie, filled lines. However, the special concept for this plugins is that it is accessible. It can read data from HTML table on the page and render them.

Website: Accessible_Charts_using_Canvas_and_jQuery

Download: fgCharting.jQuery.js

Flot

Flot is a very powerful plotting library allowing you to create attractive and interactive graphical plots of arbitrary datasets on the fly. It has advance feature like zooming and highlighting but still easy to use.

Website: Flot

Download: flot-0.4.zip

Sparklines

Sparkine allow you to generate small inline charts using data supplied either inline HTML or via javascript. It provide 6 types of charts such as line, bar, tristate, discrete, bullet or pie.

Website: jQuery Sparkine

Download: jquery.sparkline.js

When it comes to cross browsers vector graphics, there have always been debate about whether to use SVG/VML or Canvas/VML. Even if you made the decision, you still need to know how to implement them.

Now Raphaël is aiming to simplify development with vector graphics across browsers. It provides us with a simple adapter to work with vector graphics using SVG/VML.

Below is an example of the basic:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

If you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël – javascript library

If you think about it, a link that opens up a new window is one of the most simple thing you can do with javascript & HTML. There is no reason for it to be ugly.

This is the old fashion and totally wrong way of doing it:

<a href="javascript:window.open(http://www.popup.com/);">Popup link</a>

Why? The a tag is not linking to a link but instead it is running some javscript. That means the whole meaning of the link is gone.

Here is what an accessible and clean link looks like:

<a href="http://www.popup.com" rel="pop-up">Open a Popup</a>

In this version, there is no inline javascript which is always a good pratice to separate HTML and javascript. It keeps everything simple and clean. The addition of the rel attribute is used to describe the relationship between the current page and the href destination of the anchor.

Now we have this beautiful HTML link. It is time to do some magic with javascript and jQuery.

( function popup() {
	$( document ).ready( function() {
		$("a[rel='pop-up']").click(function () {
      		    var features = "height=700,width=800,scrollTo,resizable=1,scrollbars=1,location=0";
      		    newwindow=window.open(this.href, 'Popup', features);
      		    return false;
 		});
	} );
}() );

This is a very simple javascript using jQuery. Basically, the code is looking for all the links with the rel attribute and assign a onclick event to open the pop-up window. Of course, there are different ways to abstract the above code to make it more flexible. But the idea is to have beautiful pop-up link and have the javascript to do the work later.

I have recently came across this interesting and useful Javascript tool called JSLint. You feed in your javascript code and JSLint will scan through and looks for problems in your code.

You might ask what is the different between this and debugging using Firebug? Well, although it is only a syntax checker and validator, it is much more stricter and follows proper Code Conventions. In other word, it will tell you errors you normally won’t get.

As you know, Javascript sometimes allows code to be implemented in a sloppy way which could be very troublesome for large complex projects. So I have been using this tool as a reference point to tighten up my javascript code.

So go and paste your code at JSLint and see how your code is doing. But I must warning you, it might hurt your feeling!

Source: JSLint

Although Firebug is already packed with features, there are always rooms for extras. Since the creation of Firebug, plugins are being developed to extend the power of Firebug even further. Here is a list of useful plugins for Firebug.

Jiffy

Jiffy provides a very detail and visual view of the Javascript time measurements captured by Jiffy-Web. It allows you to get information of AJAX requests and other Javascript functions.

YSlow

YSlow developed by Yahoo! is probably one of most famous Firebug extension out there. It analyzes web page performance and tells you why performance is slow. It gives you information on all the requests, load time, sizes and even give you tips to improve your site speed.

FireCookie

Instead of using other Firefox extensions to view cookies. This Firebug plugin allows developers like you to keep using the firebug interface to debug with cookies. FireCookie gives you the ability to view and manage cookies. It also has a console where you can see when cookies are created, changed or deleted.

FirePHP

For those PHP developers out there, FirePHP is enable you to print to the Firebug Console using simple PHP function call. The main benifit is that all the debugging data are hidden from normal user and you can review in a nicely format within Firebug console.

Updates:

So still want more plugins? You can always build your own. Jan Odvarko of Software is hard has a series of tutorial on creating a Firebug plugin.

Ernest Delgado has experimented with Canvas to create a Photo Collages User Interface similar to the Microsoft surface. You can freely drag-n-drop, rotate, resize images and even output it to image file.

You can find try out the demo to see how good it is. Ernest also explained about how it is implemented and the problems he faced in the article. There are also example of it integrated with Flickr and Picasa which is very interesting.

You can download the source code and experiment with yourself.

Although Google have added a Feed Control wizard to add feed to any website without writing any code, some of you might still want to a flexible and clean method to integrate Feeds. M. Alsup at Malsup.com has created a simple and unobtrusive jQuery plugin using the Google AJAX Feed API. It is a very simple and straightforward plugin that makes integrating feeds to jQuery sites even easier.

You can download and see a demo here

For example:

• file_get_contents – download the contents of a file on your site using AJAX and load it into a string
• str_replace – search and replace strings, regular expressions, or arrays.
• md5 – Calculate the md5 hash of a string

For those of you writing a lot of PHP, this will make your life easier when you write Javascript. All you need to do is include php.js and you can use all the those ported PHP functions in Javascript.

Although, it still cannot replace a desktop application with lack of advance features like charts, styling or effects. It does provide you with interesting ability to integrate with other web services like publishing to Slideshare, or add media from YouTube and Flickr.

The very interesting thing about this application is that it is built by a Javascript Framework called Cappuccino which is a port of the Apple Cocoa framework. In the process, they made Javascript Objective and calling it Objective-J that they will open source soon. This means developers on the Apple platforms using Objective-C could use this to build web apps a lot easier and at the same time, introducing more people to Cocoa and Objective-C.

Sources:

280 Slides: Like Apple Keynote, But Online [via Techcrunch]

An interview with 280 North on Objective-J and Cappuccino [via Ajaxian]

NitobiBug is a Javascript debugging script that once embedded, it can be used as a object logger and inspection tool. The main selling point of NitobiBug is that it is a light weight script you include in the page. This means it runs across different browsers without the need to install any plugins or extension.

Although the interface and features are not as powerful or rich as Firebug, this is still a handy tool to use when trying to debug on multiple browsers.

You can see a demo here and download it here

NitobiBug

What’s Next in jQuery and JavaScript? from John Resig on Vimeo.

JQuery is famous for making Javascript easy to write with minimal code and is definitely on the rise. So I did a little research to find some example of big sites that adopted jQuery.

Here is what I found:

Social Sites

• Digg
• Technorati
• Jaiku
• Dzone
• WebJam

Main Stream Media Site

• BBC
• BusinessWeek
• CBS News
• Newsweek
• NBC

Other popular sites

• Feedburner
• eMusic
• Joost
• WordPress ( back-end )

Although this is only a small list but one thing is certain – jQuery works on big sites and big sites are starting to adopt it.

1. Facebox

This is definitely simple to use, small in size and stylish in design.

2. SimpleModal

Another simple and small Modal Box.

3. ThickBox

Probably the more old school of three but ThickBox definitely does the job well. It has been around for quite sometime now and even the new WordPress Back-end uses it!

In this video, John Resig the creator of JQuery is giving a talk about all the techniques used to build a robust, reusable, cross-platform JavaScript Library. He also interestingly talked about how to use functional programming to create contained, concise, code.

]]> http://www.84bytes.com/2008/05/30/how-to-build-a-prefect-javascript-library/feed/ 3