Here’s some cool stuff - Google’s Hosting some popular Javascript Ajax libraries like jQuery, prototype and the likes on their servers. You use this service to serve the supported libraries straight off Google. They also provide you with the option to load a particular version of the library so you won’t have to keep checking your code everytime a latest release is made.
Here’s how you would load jQuery version 1.2.3 using this API:
<script src="http://www.google.com/jsapi"></script><script>// Load jQuery
google.load("jquery", "1.2.3");
//Continue using jQuery</script>
The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’sgoogle.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:
Google works directly with the key stake holders for each library effort and accept the latest stable versions as they are released. Once we host a release of a given library, we are committed to hosting that release indefinitely.
PersistJS is a simple to use Javascript to store persistent data on the client Browser. This library supports multiple back-ends which are listed later. The following example will show you how easy it is to store and retrieve data using PersistJS.
To Store Data:
// create a new client-side persistent data store
var store = new Persist.Store('My Data Store');
// pretend data
var data = "pretend this is really long data that won't fit in a cookie";
// save data in store
store.set('saved_data', data);
To Retreive Data:
// get data back from store, and prompt user with it
store.get('saved_data', function(ok, val) {
if (ok)
alert('saved data = ' + val);
});
PersistJS addresses all of the issues above. It currently supports persistent client-side storage through the following backends:
How would you like to get an email with the javascript error and debug info about that error as soon as a visitor on your site encounters it? DamnIT provides you just that service:
DamnIT is a free service that emails you when a user encounters a JavaScript error in your webpages.
To get DamnIT installed for your site, just signup for an account and call a JS script - this works fine for IE and Firefox. If you want to install DamnIT on other browsers, you’ll need to place try…catch blocks. Learn more about DamnIT over at: http://damnit.jupiterit.com/home/learn
Here’s a cool image gallery script written in Javascript. It’s quite easy to integrate into your site. This is how the author describes ImageFlow:
ImageFlow is a picture gallery, which allows an intuitive image handling. The basic idea is to digitally animate the thumbing through a physical image stack. That intuitive handling is automatically caused by the metaphorical use of the well known process of thumbing through.
The script is compatible with the browsers on Windows, OSX and Linux:
IE 6.0+
Firefox 2.0.0.9+
Opera 6.0+
Safari 1.3.2+
Konqueror 3.5.7
The current version of ImageFlow’s features are listed below :
Here’s a blog which lists out 240 plugins for jQuery. The list of plugins there covers almost everything you’d need to do with Javascript. If you haven’t yet heard of jQuery, head over to jquery.com and check that out. Once you’ve jQueried, you’ll never want to return to regular Javascript !
Instead of eyeball tracking for usability professionals, here’s a way to track the mouse movements and click events of a user on a page.
The “movelogger” records the mouse movement a users does on a web site. Just before the user leaves the current page, the recorded data get posted back to the server using AJAX.
The cool thing is that you can “replay” these movements afterwards.
Here’s a cool extension for Firefox which gives you a quick look at the javascripts which are linked within the HTML page. No more hunting for JS includes in the HTML source !
“All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code. Previously if you wanted to view the source code of an external javascript/css you would have to manually look through the source code to find the url and then type that into your browser. ”
In the midst of all the wonderful AJAX libraries in the wild, many today still don’t understand the underlying technologies of AJAX that make it so powerful. In this article php|architect’s publisher Marco Tabini covers JSON, the magic format that makes serializing data between Javascript and other languages (often server-side) a breeze. Simplicity, velocity and power are the gifts of JSON.
Here’s a JavaScript function that serializes a JavaScript array into a form that PHP can later unserialize:
function js_array_to_php_array (a)
// This converts a javascript array to a string in PHP serialized format.
// This is useful for passing arrays to PHP. On the PHP side you can
// unserialize this string from a cookie or request variable. For example,
// assuming you used javascript to set a cookie called "php_array"
// to the value of a javascript array then you can restore the cookie
// from PHP like this:
// <?php
// session_start();
// $my_array = unserialize(urldecode(stripslashes($_COOKIE['php_array'])));
// print_r ($my_array);
// ?>
// This automatically converts both keys and values to strings.
// The return string is not URL escaped, so you must call the
// Javascript “escape()” function before you pass this string to PHP.
{
var a_php = “”;
var total = 0;
for (var key in a)
{
total;
a_php = a_php “s:”
String(key).length “:\”" String(key) “\”;s:”
String(a[key]).length “:\”" String(a[key]) “\”;”;
}
a_php = “a:” total “:{” a_php “}”;
return a_php;
}
Here’s a cool set of Javascript Widgets, unfortunately the library is not free, but a good place to see what Javascript can actually acomplish on the client side.
ActiveWidgets is a powerful javascript component library which makes web application development (especially AJAX-style apps) a lot easier and more productive. ActiveWidgets provides you with a set of common visual elements (like datagrid, tabs, tree, combo) sharing professional look-and-feel and simple programming model.
