Tag Archives: tips

Bracing for (Potential) Catastrophic Success — Amazon’s Cloudfront CDN

Most of the web applications we build are either used internally by our clients or have a steady stream of public user activity.   With our recent Redistricting the Nation launch we wanted to experiment with some optimizations to make our site more resilient to traffic spikes as well as to improve the user experience.

Our strategy is broken down into a few components:

This post covers the Cloudfront CDN.

Previously, we had experimented with Amazon’s Web Services stack to host applications, but we hadn’t experimented with their Cloudfront CDN product.   Pricing for the CDN is quite similar to Amazon S3 and allows organizations to build scalable applications without the upfront cost of most CDNs.  We decided to use the CDN to host some large Javascript assets as well as our image components.

Cloudfront is quite easy to setup.   We simply created an Amazon S3 bucket called s3.azavea.com and pointed a CNAME record for s3.azavea.com to the full bucket domain — s3.azavea.com.s3.amazonaws.com.    Then, we enabled a Cloudfront distribution for the s3.azavea.com bucket using the free tool Cloudberry.   Finally, we setup a CNAME record for cdn.azavea.com to the Cloudfront distribution domain d17ib0dlm1q8qa.cloudfront.net and we were rolling.

Since the CDN is heavily cached, it was easiest to use s3.azavea.com links during development to reduce the amount of file versioning that was necessary.   Once we were settled on our assets, we switched to cdn.azavea.com links and started using the CDN.

The speed of the CDN is quite astounding.  Splitting assets across another domain name also improves the browser’s ability to request more files at once improving the user experience.  We were quite pleased with how easily we could offload assets to Cloudfront and realize gains with limited time investment.

A few notes to keep in mind when you are working with a CDN for the first time:

  • Since there is no way to flush assets out of Cloudfront’s edge nodes, be sure to use file name versioning.   This was a bit alien to us, but is easy to incorporate once you think it through.   For instance, we decided not to set a far-future expiration header on our PDF assets as they are often directly linked to and we wanted to be able to update them regularly.
  • Speaking of PDFs, it seems that while Cloudfront supports byte-range requests for assets, it doesn’t assert the “Accept-Ranges: bytes” HTTP header. This makes our large PDFs fully download before Adobe displays them within the browser.  Unfortunately there is no way to add this header at the moment.
  • Cloudberry is great to add HTTP headers to S3 assets.   We decided that most of our assets would have a six month cache lifespan by asserting the “Cache-Control: max-age=15552000″ header.

Nesting Comments Using Ext.XTemplate

When considering a nested comment implementation, we really only have to deal with two types of comment: root comments and child or nest comments. Root comments are easy to describe. They are not a child of any other comment. They’re what you get when someone has a brilliant new insight, hits the “New Comment” button and dazzles us all. Nest comments, on the other hand, seem like they should be more complicated. If you’re allowing replies to comments, then a nest comment could have its own nests. Wouldn’t that make a comment both a nest and a root? Not in this post. For the purposes of this example: roots don’t have parents; everything else is a nest. Simple.

» Continue Reading

Ubiquity Firefox Plugin

I have been following the Ubiquity project from Mozilla Labs, and I gotta say, it’s pretty rad. If you are a Javascript Ninja or an aspiring one, Ubiquity can make your web surfing super slick.

I slapped together a browser command that I use to search our internal wiki in record time. Sample code included!

» Continue Reading

OpenLayers Map Centering and the International Date Line

I recently came across another piece of OpenLayers to be aware of when working with maps that wrap the International Date Line. I store the map extent throughout a user’s session so they can leave the map page, come back, and still see the same set of results as when they left. Unfortunately, the map was sometimes taking a stored location in the North Pacific and displaying Northern Africa instead! Obviously not what I want it to do…

» Continue Reading

Using Ext.js Fx.slideIn For Image Rotating

PhillyHistory.org’s homepage will be getting a face lift soon, and I’ve turned to Ext.js and their built-in effects library to do some image sliding. The first thing I learned from the documentation was that the Fx methods applied to anything that was could also be an Ext.Element. Neat!

» Continue Reading

IE8 Menu Control – Skip Navigation Link Bug

Skip navigation links are a good thing, even if your average user can’t see them. They can become a bad thing if your layout assumes that they’re not visible to sighted users of IE8. For some of my menus, (and I don’t know why one does and the others don’t) there’s this annoying space at the top. Using IE8′s marvelously upgraded debugger, I can see that it’s a skip link… with height and width of 0 pixels… that’s still showing up? How??

After much fruitless searching, I found a lonely little forum entry from last year that offers the following one-line fix:

SkipLineText=”"

Put that line in the menu tag declaration or the skin file and you’re golden… unless you can’t see. Then there’s unfortunately nothing for your screenreader to read. *sigh* Hopefully this little ‘feature’ gets an official patch soon.

Telling StreetView Where to Point

The Sajara team started working with Google’s Street View quite a while ago as part of our work for Muralfarm.org. During that implementation I realized that, while good intentions abound, the Street View wasn’t really showing our users what we intended them to be looking at. For Muralfarm.org, we wanted the Street View feature to offer a more contextual view of Philly’s murals than the images in the system. The problem was extremely few default Street View coordinates actually pointed at one of our murals!

Now take that situation and imagine how confusing things could get when PhillyHistory’s historic photos get a dose of Street View. Not only might Street View not be pointing at the right building or street corner, but the subject might not even exist anymore! The average user has no way to tell what connects the historic images to the presented Street View.

After a bit of digging, I found that we weren’t giving the Street View API quite enough information for the kind of detailed positioning we were after.  After giving the API a mural’s x/y coordinates, it was filling in the rest of its parameters with default values:

  • Pitch: 5
  • Yaw: 0
  • Zoom: 0

Anyone who’s worked with 3D camera positioning or flying might know what those values should be; I had to go look them up the first time.

If you think about holding a camera, there are three ways to move it to get it to point where you want it: pitch, yaw and roll. Pitch is a measure of tilting up-and-down motion and Street View uses +180 to -180 degrees for this value with 0 degrees being perfectly level. Yaw is your side-to-side movement value and Street View uses a full 360 degrees for this one. Both 0 degrees and 360 degrees are due north. Roll is the only directional indicator that doesn’t get used… after all, they were using a stationary camera on top of a vehicle; no roll available. The last value in the list above is zoom. I haven’t seen any panoramas with more than three zoom levels: 0, 1, and 2.

Building a tool to let administrative users change these values should be easy… and it was for the most part. Google’s Street View API reports changes in the positional values using some fairly obvious events: yawchanged, pitchchanged and zoomchanged. So catching those numbers and saving them was a piece of cake.

One challenge I ran into is some slightly overzealous reloading. I built our editing tool into an ExtJS TabContainer widget and each time a user leaves and returns to that particular tab (not having changed anything else in the meantime) any unsaved changes are lost. I can’t go saving Street View position values to our database every time someone switches tools, so I have to settle for some stern warning text about losing data.

A future challenge I face is part of the classic battle of the 900913 projection vs. PA State Plane South. I predict heavy use of a sound-proofed room, the Proj4js forums and lots of comfort food… or I’ll just use Azavea’s common libraries. ^_^

Deb, our resident archivist, has written about the impacts of Street View on PhillyHistory.org over in Azavea Atlas. You can also check out the Street View on Muralfarm.org and PhillyHistory.org. Let us know what you think!