This web site

Amazon S3 as a CDN

[July 2009] Moving images and PDF files from my own server to a content delivery network (CDN) has the potential to speed up page loading since their huge number of distributed servers should deliver content more quickly than mine and if there is a huge surge in traffic, my server can concentrate on processing the PHP pages. Since I also intend to later set the "expires"" to none, I've also renamed every file to carry the date it was modified so that if a new version is uploaded, it will have a new URL

This is most of what you need to know about S3:

In particular, the S3Fox add-on makes it relatively painless as it creates “keys” that look like a file path and name even though S3 essentially gives you one big “bucket” and everything gets tossed in there.

One trap I fell into is that if you click the S3Fox in the browser status bar, you do not get the same view as selecting it from the Tools menu. Once you get that sorted out, moving files functions much like an FTP client.

I read another article, How to Setup Amazon S3 with CloudFront as a Content Delivery Network, that used CloudFront as well but I’m not clear on why I would want that, especially as it appears you get charged separately for the traffic through there. I didn't need it though.

Note that if you are running YSlow in Firebug, it does not know that sweetandsour.org.s3.amazonaws.com is a CDN so it unfairly assigns an “F” grade.

I struggled with S3Fox to set headers and eventually gave up. I never could figure out the syntax it wanted and couldn't find any on the internet. Instead, I found Cloudberry Explorer and have now set an Expires header for the end of the year.

One limitation of S3 is that it isn't a web server able to negotiate with the user agent on whether to send compressed files. I moved the CSS and JS back to my server where I can run mod_deflate.

Site redesign

[Octoberber 2008] I've thought for years that the site looked really crude and I've finally done something about it. Here are the main features and changes:

  • New navigation based on the Phatfusion "Image Menu" but extended so it will handle 2nd and 3rd level menu items. In fact, I had to make some changes to even get the top-level menu to work as Mootools 1.2 has been released since the menu was written and there were some Javascript errors.
  • In fact, I suggest that my version of the "image menu" is better than the original since I've used the Gilder/Levin image replacement method which means it is still usable even if images are turned off. Try that on Phatfusion.net.
  • Since I didn't take all the photos used in the "image menu", I needed to contact the copyright holders and ask for their permission where necessary. I used A Savvy Approach to Copyright Messaging so that if anyone tries to download the graphic from the menu above, they will see this: Example of displaying copyright unobtrusively
  • New popup image holder. The "image menu" requires Mootools and that created a conflict with the old DHTML window that photos were loaded into when the thumbnail was clicked. I was delighted that I replaced the old dhtmlWindow.js file of 987 lines with perhaps one-third of that, now in common.js.
  • Rather than attempt to explain it, you will want to do a View > Source on this page to see one particular feature.
  • One of the few (only?) slightly worthwhile things I've done in my life is to learn about the Israeli-Palestinian conflict and write to some public figures begging that the Palestinian grievances be addressed so that there can be a lasting peace in the Middle East. I pulled this out into a new section "Time for Justice". I encourage you to get informed and get involved.
  • Since they are everywhere else on the internet, I felt compelled to throw in some rounded corners. Since Firefox and Safari support them, there are some lines in the stylesheet but for IE, some <span> tags are inserted by Javascript and they have background images. Yes, that means that no JS and no rounded corners. As the philosopher Jagger has noted, "You can't always get what you want".
  • Since it is offered for free, I thought I'd try Google AJAX Search. However, I set it up to show the results on the original page, similar to how Mootools have done it in their documentation section.
  • The "countdown" site introduction animation and highlight of my Java programming has been retired. It seemed such a good idea in 1999. However, if you are desperate to see it, this should satisfy: Countdown. The other thing I did in Java was minesweeper.

I wrote the following in about 2003. Some of it may still be true.

This latest revision to the site uses XHTML/Transitional and CSS to achieve a clearly-structured document and layout without tables so that content is separated from presentation. I'll shortly be finalizing the code so it will pass the W3's validator and move towards Section 508 compliance which ensures accessibility to those with disabilities (such as blind people using screen readers). The benefits of making the site "standards-compliant" are faster-loading pages, easier maintenance and availability to users with a variety of browsers.

Peter at work ~2002

As you can see from the first entries in the "What’s new" section, this web site was started in 1999 on Homestead.com using their WYSIWYG editor. Although it was simple to use, it produced static HTML files that were bulky and nearly incomprehensible to a human reader. The site became very difficult to maintain since any change to the menu had to be replicated on every page. Homestead.com realized they couldn't make money if they didn't charge for the service so when they introduced substantial fees, the site was moved to GeoCities.com. This forced me to rewrite and simplify the pages but they were still static and maintenance was problematic.

I had always wanted to rebuild the site with dynamic pages so the next stage implemented in 2003 was to rebuild the site using "LAMP" which stands for Linux (operating system)/PHP (scripting language)/Apache (web server)/mySQL (database). All are effectively free. In fact, my computer is set up with both Windows and Linux partitions with a shared data partition in VFAT format so I can test with Internet Explorer and Opera and Firefox browsers under Windows as well as Konqueror and Firefox under Linux.

The site also uses the "fusebox" methodology, a system originally invented in the ColdFusion world. All page requests end up at an "index" file which is a series of case statements and the "fuse action" determines which files are then included to form the completed page. While the mechanics are not important, what is important is that it forces a modular approach where pages are broken down and hopefully the pieces are reusable elsewhere.

I had a problem early on with scanned postcards. Moire patterns occur when scanning printed photographs at insufficiently high resolution.

To enforce a consistant look, there are two types of display pages. All the pages which show the menu use "dsp_outline.php" which sets up a the overall page framework and includes the photo at the top-left, the headings, the menu and the "content page". The "content page" is specified in the index page for that directory, while the colors are specified in an "app_locals" file which is also directory-specific. Each "app_locals" file includes "app_globals" that sets a few variables that affect the entire site such as database log in details.

Photographs are placed using the database which holds the name, caption, folder and any linked image for every photograph. The file act_setThumbnailFunction.php defines a function called once for each thumbnail that writes out the HTML for the floating DIV, the image, link URL and caption. If necessary, the link URL can be overridden. The large image is shown using dsp_photoAndCaption.php which makes a call to the database to find the caption and places the caption to the side or below the image depending on its size.

Photo
Drag to resize window