RSS

gZip your JavaScript

0 Comments | This entry was posted on Mar 17 2009

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:

File Size Size (gZip)
init.js 7628 1992
jquery-ui.js 127787 50756
jquery.easing.js 8097 2003
jquery.history.js 5079 1771
jquery.js 31033 15666
swfobject.js 6722 2233

Pretty significant size difference!

IE and responseXML issues

0 Comments | This entry was posted on Mar 13 2009

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!

0 Comments | This entry was posted on Feb 04 2009

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

0 Comments | This entry was posted on Sep 21 2007

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

0 Comments | This entry was posted on Aug 10 2007

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).

dsHistory – Back button management with JavaScript

0 Comments | This entry was posted on Aug 01 2007

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

0 Comments | This entry was posted on Aug 01 2007

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

0 Comments | This entry was posted on Jul 24 2007

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

0 Comments | This entry was posted on Jul 24 2007

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

0 Comments | This entry was posted on Jul 19 2007

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

0 Comments | This entry was posted on Jul 10 2007

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

Protoload: Ajax Loading

0 Comments | This entry was posted on Jul 10 2007

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

0 Comments | This entry was posted on Jul 05 2007

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

Dojo 0.9 released

0 Comments | This entry was posted on Jul 04 2007

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

0 Comments | This entry was posted on Jul 03 2007

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

0 Comments | This entry was posted on Jul 02 2007

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

Firebug for iPhone

0 Comments | This entry was posted on Jul 02 2007

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

0 Comments | This entry was posted on Jul 02 2007

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