No Mod Required

Twice this morning I did massive, repetitive, string manipulations with JavaScript.

One took a list of files, turned it into an array and then looped through creating .htaccess entries.

The other took an HTML table output by Excel and turned it into a Definition List. I then used FireBug to copy the innerHTML of the body and pasted it into a new document, ready to be manipulated in the application I'm building (with JavaScript of course ) If you're curious, here's the code for that one:

<script type="text/javascript">
window.onload = function() {
    var trs = document.getElementsByTagName("TR");
    var newString ="<dl>";

    for (i=0;i<trs.length;i++){
        var tds=trs[i].getElementsByTagName("TD");
        newString +="<dt id='"+tds[1].innerHTML+"'>"+tds[4].innerHTML+"</dt>";
        newString +="<dd>"+tds[5].innerHTML+"</dd>";
    }
    newString +="</dl>"
    document.body.innerHTML=newString;
    }
</script>

Anyway, I've done this sort of thing before and I realized that I'm using JavaScript for the sort of administrative scripting that other people would use Perl or Python for.

No, there's nothing more to this post than that.

I just wanted to point it out since it struck me as interesting.

Does anyone else out there use JS for this sort of thing?

Or am I a complete weirdo?

Again, unless something crazy happens these will be the top ten for the year ranked by page views.

1. /art/graffiti_art/ My main graffiti page. 160,770 page views
2. /art/graffiti_art/black_book/index.php My black book index. 56,401 page views
3. /art/graffiti_art/black_book/react_black_book_1 A really nice black book page with two pen and ink statues for characters. Being me (graffiti + comics/pen and ink guy that I am) I'm really happy this is the top content page for the year as it combines my two artistic loves in a neat package. 25,746 page views
4. /art/graffiti_art/black_book/black_book_graffiti_react.php A black book page from the Dig era. I actually hate the page but it gets good google placement so I live with its ugliness. At least the tags are nice. 20,670 page views
5. /art/graffiti_art/canvases/react_graffiti_canvas_version.php A canvas I absolutely loved doing. 19,227 page views
6. /art.php My art index page. 18,967 page views
7. /art/black_and_white/index.php Black and white art index page. 18,510 page views
8. /art/graffiti_art/black_book/react_boston_graffiti_3.php Another fun black book page from the same series as the one at #3. 17,576 page views.
9. /art/graffiti_art/canvases/index.php My canvases index. 16,995 page views.
10. /art/graffiti_art/walls/index.php My walls index. 16,160 page views

Yeah, there's still a day to go. Thing is, unless something unforeseen gets Dugg these will be the top ten posts of the year ranked by page views:

1. 10 Great Hong Kong Martial Arts Movie Fights That I Found on YouTube. 13925 page views. A veritable internet sensation. 90% of the page views generated by this post occurred in the span of a week.
2. The joy of… JavaScript’s getElementsByTagName() 1962 page views
3. Cross Browser Opacity using CSS and Internet Explorer filters 1497 page views
4. Great Graffiti Crew Names 1477 page views
5. Graffiti Letter K My Digital Sketchbook Returns 1450 page views
6. Cross Browser PNG Transparency Part 2 1340 page views
7. I Hate Rachel Ray 1112 page views. A five minute rant post I knocked out at work. I did it so quickly I never even fact-checked the spelling of her name. Anyway, the post has a life of its own. There's a great slow motion flame war in the comments.
8. Graffiti Letter L More Alphabet 1090 page views
9. Graffiti Letter G Digital Letter Sketches Roll On 1057 page views
10. Rod Stewart’s Model Railroad Set Appears on Cover of Model Railroader- Fulfills Lifelong Ambition 993 page views

Thanks everybody!

Have a happy 2008!

The Netscape Browser is Dead.

Long Live the Netscape Browser.

I'd say it's a sad day, but the Netscape browser has been dead to me for a long, long time. Between the unbearable crappiness of the 4.* branch, the sale to AOHell and Internet Explorer clobbering them in the browser wars, I've long grown accustomed to a world without a Netscape branded browser (in any real sense.) And anyway, the heart of the project lives on in the form of the Mozilla project and the Firefox browser, so the loss of the Netscape brand doesn't mean all that much in the grand scheme of things. To be honest, with the way Firefox is growing it's like revenge of the Netscapes or something.

Still, Netscape was the web way back when, so seeing that part of Internet history go by the wayside is something to note. Even if it's a shriveled relic of what it once was.

I finally got around to compressing this site's JavaScript file last night. I used /packer/ because I know that it supports conditional compilation. I'm a fan of conditional compilation.

It was funny because there were a couple of lines missing semi-colons that I must have looked at a thousand times before last night and just never noticed that they were nekkid like that. JSLint helped me out a lot with making sure the file was ready for packing.

Anyway, between gzipping and compressing it my JS file screams out to the browser at a tidy 2.67 KB (down from an unadulterated 9.41 KB.) There are probably functions in some libraries larger than that…

Go small or go home!

But I was able to get this through it before it started speaking in tongues…

The scanner? Installing the drivers killed Norton. Not that I love Norton, but still…

Summary:

Amazon S3 is a great option for (among other things) image hosting, YSlow is a great little tool for uncovering performance related issues with a site and using Bucket Explorer allows a person to easily upload files to the S3 service while setting custom headers. Using the tool to set far future expires headers facilitates caching which improves site performance.

Preface

I started using Amazon Simple Storage Service (Amazon S3) for image hosting this week to help cut down on my bandwidth costs. S3 is a great service offered by Amazon Web Services that allows developers to store and serve data using Amazon's infrastructure for literally pennies per GB of storage and transfer.

Why have I begun the move? Well, as I hoped, I've had excellent growth in site traffic since I relaunched last year. Great stuff, except for the fact that my bandwidth usage has begun to strain the limits of my current hosting plan. I serve a lot of images* so I can eat through GB pretty quickly. I considered switching hosts, but after 8 years with FutureQuest, and literally nothing to complain about in all that time I've come to the conclusion that I really love my web host and I'm just not going to switch.**

So, with switching off the table, I had to figure out something else to do. If you want numbers- my October 2007 bandwidth usage was up 712% over my bandwidth usage in October of 2006.

That and I want to keep growing.

So… what's a man to do?

Amazon S3 to the rescue

That's where S3 comes in. I looked at S3 for a few weeks before signing up and I came up with the following conclusions- the infrastructure can't be beat, it scales to the moon, I love the fact that I'll pay for just what I use and for what I use the pricing is just fantastic.

I could move my images over to Amazon, see another 700% increase in bandwidth usage over the next year and still be making out with some savings. Check out these numbers:

Storage
$0.15 per GB-Month of storage used

Data Transfer
$0.10 per GB - all data transfer in
$0.18 per GB - first 10 TB / month data transfer out
$0.16 per GB - next 40 TB / month data transfer out
$0.13 per GB - data transfer out / month over 50 TB

Requests
$0.01 per 1,000 PUT or LIST requests
$0.01 per 10,000 GET and all other requests

Looking at those numbers and looking at the incredible tools out there already to make using S3 as simple as using a traditional FTP client to move files onto the web, it became pretty clear that S3 was the solution to my problem. So I signed up and went about the process of setting up one of my sub domains (media.drunkenfist.com) to point to Amazon so that the transition, for at least the files already served off of that domain, would be seamless.

As an aside- setting up a sub domain to point to Amazon is really pretty easy. All I had to do was create a bucket (an S3 organizational structure somewhat analogous to a typical folder) named media.drunkenfist.com and then set up (through my host) a CNAME record that pointed requests for media.drunkenfist.com over to that bucket on the Amazon servers.

Something like this:

media.drunkenfist.com CNAME media.drunkenfist.com.s3.amazonaws.com

As long as the bucket name matches the host name exactly, it's really dead easy.

Anyway, back to the narrative.

Once the domain was pointed in the right direction and the files were being served from Amazon's servers, I tested it, was happy with the results and gave myself a little pat on the back for a job well done.

I relaxed a little bit and my attention started to turn to my plan for moving the rest of my images (those not already served off of media) over to the new hosting server. I've got to take the rest of the migration slowly because I don't want to jeopardize my image search traffic. I've got to make sure any changes I make to popular images won't break Google's snapshot of my site.

All in all, it's a typical side-project for me. A little thinking, a little research, a little planning and then, some furious late-night execution across a few different disciplines.

Good times

And then came Christmas, where the one flaw in my original implementation poked its head out from the pages of High Performance Web Sites: Essential Knowledge for Front-End Engineers

Confessions of a YSlow junkie

Maybe "junkie" is too strong a phrase I am interested in site performance, however, and the YSlow plugin for Firebug is a great tool for analyzing issues with the way pages are constructed and the manner in which site components are served.

Anyway, I got the High Performance Web Sites book for Christmas and while I was flipping through it I was struck by rule #3. In short #3 says to use a far future expires header for images in order to facilitate caching. Since all the images I was hosting over at Amazon were interface images (like my sprite***,) getting them to cache correctly was important business.

Thing is? Unlike the images served by my main web host****, the images over at Amazon weren't getting served with any expires headers at all.

Bummer.

I had used the Amazon S3 Firefox Organizer(S3Fox) Firefox Add-on to move my files over to Amazon originally and while it integrates with my browser of choice and is dead easy to use, it doesn't allow a user to set the expires header for files it creates on the Amazon server.

Oops.

The Solution

Some furious Googling led me to Bucket Explorer a handy little app that allows one to set custom headers for files being uploaded to the Amazon servers. Before finding that I had visions of writing my own uploader in PHP. Part of me thought that would be fun. The other part just wanted a nice, handy solution written by someone else since I've already got a million little side projects going on and adding a new one didn't seem like the most efficient idea.

Anyway, to add custom headers using Bucket Explorer:

1. Fire up the program
2. Enter your access key and secret key
3. Navigate to the local folder in the left pane and the target bucket in the right pane
4. Select the image (or images) in the local folder
5. Right click and select "Upload with Custom Headers"
   
6. Click "Add" in the dialog that opens
   
7. And finally, enter your header information
   

   For more info on the expires header and the value to enter, check out the HTTP/1.1 Header Field Definitions provided by the w3c.

8. Hit OK a bunch of times, and that's that. You've got far future expires set up and your return/multiple page visitors will be all the better for it.

As you can see, that's really pretty straightforward.

The software costs $29.99, but there's a 30 day trial if you want to check it out in advance. I'll definitely be ponying up my hard earned dollars as Bucket Explorer does pretty much everything I need an interface to S3 to do and feels faster/more stable than some of the other options I've looked at.

As a note, if you're interested in any of the topics covered in this post, I've got another performance related post to drop over the next couple of days and I'll be updating the blog with the S3 stuff as often as I encounter anything interesting, so check in from time to time to see what's new.

*Both here and in leeched form across the breadth of the "social web." I decorate many myspace (and Hi5 and Friendster and YouTube, etc. etc. ) pages.

I love seeing 15-20 year old kids taking my stuff to decorate their pages, by the way. It's the most honest validation of my work I could ever imagine.

**Especially since moving my main site, the four subdomains (comics., media., styles., and mobile.,), two alternate domains (roblarsen.org and robreact.com) and one redirected domain (itsalljustcomics.com) seems like an incredible pain in the ass. We're talking DNS, code, databases, passwords, paths, blah, blah, blah. I just can't see myself doing it without some sort of mythically powerful inducement. Maybe if I could host my own box somewhere or something. Anything short of that and it's just a nightmare.

***It's not quite as nice as Ask's, but it's still pretty good, I think.

I love that Ask sprite, by the way. That's some great attention to detail on their part and the execution of it is a dramatic lesson in how to construct a great Sprite image for serving a single interface image.

**** My main server is running Apache, so I have the following in my root .htaccess to set expires headers for images:

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000

Here's one of the all-time classic trains to celebrate…

SEEN and PJAY light up the seasons with this killer "Happy Holidays" NYC Subway car

William Gibson - No Maps for These Territories

I've read pretty much everything William Gibson has ever published and I own signed copies of everything short of Neuromancer (some day), so…. yeah. I really enjoyed this movie. Your mileage will vary depending on how close to the above profile you are. If you're already a fan of Gibson, then this will be a fascinating 80-something minutes. If you're not familiar with him or are not a fan then this will be a complete snooze-fest as it's 80 minutes of some guy talking in the back of a car. Yes, there's a lot of interesting work done with the editing and the visuals, but the plain fact is this is an 80 minute interview with Gibson (along with cameos by Jack Womack and Bruce Sterling.)

By the way- anyone else in the mood for a new book by Jack Womack? I sure am.

Oh, and out of left field- I just saw this new Neal Stephenson site for the first time today. In case you're keeping score at home, he's working on a new novel and the Diamond Age adaptation for SciFi.

And there you have it.

At some point this past Wednesday drunkenfist.com generated its 1,500,000th page view for the year.

I just thought I'd mention it