/dev/null

gZip your JavaScript

Most browsers these days (with the exception of Safari, I think?) will accept gzip encoded content. This means you can drastically reduce the size of all those bloated javascript libraries you might be using on your web site.

So how do you serve gzipped js files?

There a few methods out there. I chose the one below since it was fast, easy and I’m hella freakin’ lazy.

The first step is to gzip all of the javascript files that you might be serving up. The fastest way I found was to just telnet into the server, and execute the following bash command:

gzip -cr <javascript directory>

Of course you’ll need to replace <javascript directory> with the correct directory that your javascript files are located in. The -c option tells gzip to keep the originals. This is important so that you can still serve non gzipped versions to browsers that don’t handle gzip! The -r option tells it to recurse through the directory. Now you should have a directory full of javascript files and their gzipped counterparts.

init.js
init.js.gz
jquery-ui.js
jquery-ui.js.gz
jquery.easing.js
jquery.easing.js.gz
jquery.history.js
jquery.history.js.gz
jquery.js
jquery.js.gz
swfobject.js
swfobject.js.gz

Yay. How exiciting, no?

The next step is to modify .htaccess to do some URL rewriting.

AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

Essentially your telling the web server to server up gzip files, if the browser accepts them and the user is not on Safari and if there is a compressed version of the file available.

That’s really about it.

Here’s the difference in file sizes:

Pretty significant size difference!

IE and responseXML issues

After working on a small AJAX library, I decided to test it in IE. Everything worked great, except when requesting XML. The responseXML property of the XHR was null. I’ve had this issue in the past where the server isn’t returning the appropriate Content-Type (text/xml). But that wasn’t the issue this time. I checked my resin config and everything was correct.

So, I uploaded to a remote server and tried again. Blammo. Chit just worked the way it was supposed to. This left me scratching my head however.

I installed Charles (www.charlesproxy.com), which is a great debugging HTTP proxy/monitor, to see what was going on. Everything worked as it should in FireFox, but still no dice in IE.

Then I noticed that traffic wasn’t being captured for Localhost when using IE. After a bit of stumbling around the net I found that if you add a period right after localhost, Charles will capture the traffic.

http://localhost:8080/ajaxTest.html

becomes:

http://localhost.:8080/ajaxTest.html

When I reloaded the page, I got a very nice surprise. Not only did Charles capture the traffic, but the XHR returned with a proper responseXML property!

I’m no network engineer, so I’m not even going to try and guess as to WTF. But, I’m happy it works as expected and thought I’d post about it in case someone else ever runs into this issue.

Site updates!

So I’ve finally updated my web site.
www.alien109.com

• Ported all of the javascript over to jQuery and ditched those ancient JavaScript libraries I’d written years ago
• Implemented some keyword searching on projects so you can see projects based on languages or technologies.
• Reworked the backend so that everything was a little more search engine friendly (url rewritting for prettier urls and hidden javascript calls)
• Added a bunch of new (and old) work into the mix.

Creating a search engine friendly ajax app is a pain in the butt, if it’s an after thought

Accordion 2.0

Kevin Miller has updated his accordion control. The new version includes:

• Open/Close functionality added (Click on an active accordion)
• Nested Vertical Accordions
• Accordions will dynamically resize on content added REAL TIME!

One of the better accordion widgets out there I must say.

Check it out!

RegexPal – JavaScript Regular Expressions Tester

RegexPal is a great little utility for testing JavaScript regular expressions. It’s fast and quite helpful to those learning regular expressions.

Some note features include:

• Real-time regex syntax highlighting with backwards and forwards context awareness.
• Lightning-fast match highlighting with alternating styles.
• Inverted matches (match any text not matched by the regex).

Visit RegexPal here : http://regexpal.com/

Development, JavaScript

dsHistory – Back button management with JavaScript

dsHistory internally works somewhat similar to the other history solutions that exist, but it is implemented more like dojo’s bind than anything else. It requires no supporting libraries, it checks in at just over 7kb when compressed, and it is easy to use. The history is thought of as a series of events that have functions attached to them, and the bookmarkable window hash data is designed to be controlled independently from the events (if it is even utilized at all, which I’ve found isn’t desired at times).

See dsHistory in action
Read the full article

@tomic XML-RPC JavaScript Client

Jon Brisbin has created an XML-RPC JavaScript client called @tomic:

The @tomic XML-RPC client requires ExtJS 1.1, but has no other external requirements. It’s designed to be easy-to-use, flexible, and robust enough for anything you might throw at it. Since this is an initial release, I’m putting it out as a beta (under the GPL).

Ext.onReady( function()
{
    var xmlrpc = new Atomic.util.XMLRPC( {
        url: "xmlrpc.php",
        method: "blogger.getUsersBlogs"
    } );
    // Add parameters to the RPC call
    xmlrpc.addParameter( "0123456789ABCDEF" );
    xmlrpc.addParameter( "MyUsername" );
    xmlrpc.addParameter( "mypassword" );

    // Subscribe to events
    xmlrpc.addListener( "success", function( xhr, xml ) {
        // Handle the response from the XML-RPC service, which is in the 'xml' object
        console.log( xml );
    } );
    xmlrpc.addListener( "fault", function( xhr, fault ) {
        // Handle any faults issued by the XML-RPC server
        Ext.MessageBox.alert( "XML-RPC fault #" + fault.code, fault.message );
    } );

    // make the call
    xmlrpc.call( {
        method: "blogger.getUsersBlogs",
        params: [
             "0123456789ABCDEF",
             "MyUsername",
             "mypassword"
        ]
    } );
}

Ajax Plug-ins for Wordpress

Pete Cashmore has posted a list of 30+ Ajax plugins for Wordpress that he considers good.

Here’s a sample:

• AjaxWP – Adds AJAX to all aspects of your WordPress site speeding up the load times.
• Alexa Rank – Display your Alexa rank with pride.
• Ajax Comment Preview – Allows readers to preview their comment before submitting.
• asTunes – Retrieves data from your Audioscrobbler/last.fm profile and posts it as a list on your blog.
• Codebox – Side scrolling box for displaying code snippets.
• Crossroads – Adds thumbnails and comments from your Flickr account.
• FireStats – Full featured statistics including referrers and popular pages.
• Google PageRank – Allows you to display your Google Page rank on your blog.
• Hardened-Trackback – Generates a single use trackback to help fight trackback spam.
• imgViewJX – Refreshes an image on your main page from a selected directory.
• Live Spell Checker – Adds a spell checker to the admin area to check your posts with.
• Plug ‘n’ Play Google Map – Adds any post you make with longitude and latitude to a Google Map on a separate page. Very useful for blogs writing restaurant reviews or about events.
• Wordpress Mailing List – Have a mailing list? Let readers subscribe and unsubscribe simply from the front page of your site.
• WP e-Commerce – Adds a shopping cart to your WordPress powered site.
• WP-Polls – Adds fully customizable polls for your readers to take.
• WP-Post Ratings – Allows readers to rate your posts.
• Zorpia That’s Hot Box – Allows visitors to send posts they like Zorpia.com and vote on their favorite articles.

Uniform Event Model: Making IE think W3C

Tavs Dokkedahl has written a small script that makes IE conform to the W3C DOM3 Event recommendation (at least the part that FF supports).

The Uniform Event Model adds support for the capture, atTarget and bubbling phases and provide most of the EventListener interface including among others the addEventListener, removeEventListener, createEvent, initEvent and dispactEvent methods. All handlers are passed an event object with almost complete information according to standards. See the list of features for detailed information on event flow, methods and properties.

(from ajaxian)

Robot Replay: Watch your users via Ajax

Ever wonder how exactly your users are interacting with your site? Robot Replay is a Rails application what allows you to record user events as they interact with your site and then play them back later.

Just include some JavaScript in your site and events are compiled and set back to the server. Once the user is done with their session, you can play it back right in your own browser.

Watch an example of mouse gestures and forms.

Bringing the Browser to the Server

Bringing JavaScript server side raises some interesting possibilities for automated testing, screen scraping and Web application development. Check it out.

Protoload: Ajax Loading

Andreas Kalsch has written a simple library, Protoload, that handles the Ajax loading events that are common place as a way to show users that something is happening on the server, in a particular location.

RSS to JSON Convertor

Very cool little script for converting an RSS (or Atom) feed into a valid JSON object. Check it out here

Dojo 0.9 released

Although still in beta, the Dojo Foundation has released v0.9.

http://dojotoolkit.org/2007/07/03/dojo-0-9-lands-softly

Noteworthy improvements:

Speed : Redundant, excessive and backwards-compatible code stripped.

Accessibility: Dijit, the widget system, adds more support for accessibility from keyboards, accommodation for screen readers, and high-contrast mode.

Theming: Digit is totally customizable. Per-page, per-node and per-widget level support is all CSS-based. See some examples .

Script.aculo.us Effect.Tooltip

A pretty nice tooltip built on Script.aculo.us.
http://www.illustate.com/playground/scriptaculous/tooltip/

Example:
new Effect.Tooltip(element, content, {title : 'title', className: 'class', offset: {x:0, y:0}});

htsh: http shell

htsh is an http shell written with php and the jQuery javascript library. Very cool… Check out the demo

Firebug for iPhone

Firebug, one of the greatest extensions for Firefox ever (IMO), has been released for iPhone. Runs as a proxy so all of your debug messages can be sent to a slightly larger screen =). Read more here.

jQuery 1.1.3 Released

jQuery 1.1.3 has been released. It’s small, and faster than ever – 800+% faster!

1.1.3 Features:

1. New Selectors (unicode, escape, inequality)
2. Animation Improvements : Faster and smoother.
3. New events system
4. New effects system with test suite