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!

Force directed node interface 2

0 Comments | This entry was posted on Feb 17 2009

Here’s an example of the force directed node interface that I’ve been talking about. It’s not complete. It’s just a working prototype. You still cannot load project details, but I’m waiting to add that if I decide I want to take this any further.

Since the dimensions of the interface have been reduced to fit in this blog post, things might be a bit small (try zooming in). You can also drag nodes around. Helpful when things get pushed off the screen. Nodes can be opened and closed by clicking on them.

Get Adobe Flash player

Free web based imaging software

1 Comment | This entry was posted on Feb 10 2009

Aviary has recently released another web-based application. Raven, which is still in beta (all of their applications are. that’s so web 2.0!), is a web-based vector editor. Their product suite consists of four applications at the moment:

  • Peacock – a visual laboratory
  • Raven – vector editor
  • Phoenix – image editor
  • Toucan – colors watches

Peacock is kinda cool. Image generation is done by patching together generators, effects, controllers and resources. Fun to play with, I must say. Pretty amazing use of Flash. Pretty cool to have this sort of development going out there…

The products, at the moment, are all free to play with. Go check ‘em out: http://aviary.com/

Rewriting the back-end, again…

0 Comments | This entry was posted on Feb 08 2009

I’ve decided to rewrite the back end for alien109.com again, taking advantage of OOP in PHP. Man, such a difference. Everything is so much easier to maintain and follow now. Plus, I’ve implemented more of an MVC pattern. Seemed like overkill for such a small site, but proved to be educational, if nothing else.

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

WordPress for iPhone

0 Comments | This entry was posted on Nov 23 2008

Just testing WordPress for iPhone…

CSSVista: Tweak CSS and see it in IE and Firefox at the same time

0 Comments | This entry was posted on Sep 21 2007

CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.

CSSVista is from the folks who gaves us Litmus

Double spaces, Jetpacks, and Kitchens of the Future

0 Comments | This entry was posted on Jul 03 2007

Just stop. Please.

It’s always been a slight pet peeve of mine. I understand that back in the days of mono-spaced fonts on typewriters it was necessary, and that some still have those old bad habits. But this, my friends, is the future. OK, we still don’t have jetpacks and kitchens of the future, but we do have variable width fonts that aren’t meant to have double spaces after periods (or full stops if you’re in other parts of the world).

I’m not one to cite style guides, but single spaces after punctuation is considered proper according to the MLA, APA, and the Chicago Manual of Style. So neener-neener.