Switch

Posts by: Dan K

24
Jun 2010
11:01 AM

Twitter Proof Your Site

Twitter's Fail Whale

As we all know, Twitter goes down very frequently. Twitter has released a useful tool to inform users about outages, planned or otherwise, but this is no help to the many websites that syndicate their Twitter feeds.

Too often the script that is pulling the Twitter feed triggers an error that can take down the entire page. One of the common culprits is the XML parser, such as DOMDocument. When Twitter goes down, all status feeds return the infamous “Fail Whale” HTML. This, of course, does not validate as XML and causes the parser to throw an error.

The best method to deal with this is to wrap all XML parsing in try/catch blocks and cache the Twitter feed. If Twitter goes down, you can display the cached copy of the feed.

This is good advice for anytime you find yourself syndicating a feed.

Tags: , ,

21
Jun 2010
06:28 PM

It’s time for @font-face

@font-face

Since the beginning of the web, designers have struggled to use fonts on their sites, but have been limited to using the fonts that come installed with users’ operating systems. This meant that web sites had to use Arial, Times New Roman, or one of a handful of other “web safe” fonts. Of course there are ways around this – including creating graphics using a font, employing Flash to render the font (sIFR), and using proprietary browser-specific font embedding techniques. None of these options are even near perfect.

In 1998, the W3C added the CSS selector @font-face, which allows sites to point the browser to a font file, to the spec for CSS2. It was dropped from CSS2.1, but returned in CSS3. Although it took some time, it is now supported by all current browsers. Recently at Google’s 2010 I/O conference, they announced a free and open font library called Google Font Directory. The significance of this announcement is that Google (arguably the most important company on the web) has thrown their support behind @font-face. It was’t until Google supported xmlHTTPRequest (aka AJAX) that it became widely adopted and I think that this will also be true of @font-face.

The next obstacle to overcome is the licensing of fonts. Although you can use almost any font with @font-face, most fonts do not come with licensing that allows this. This is also why the Google Font Directory is so useful. All of the fonts in their directory are licensed to be used on commercial sites. Another great resource, that Brandon shared with me, is Font Squirrel. They have 633 fonts and counting, all of which have free licenses. They also have some great tools to sample fonts and create your own @font-face kits. From now I hope to see more site’s using great fonts.

It’s time for @font-face!

Tags: , , ,

15
Apr 2010
10:51 AM

Cross Domain Scripting via Proxy

While working on the recently launched Desert Living Today, a constantly-refreshed tip sheet covering everything cool and newsworthy from around the Phoenix Valley, I ran into a problem.

The client wanted to include a widget that allowed users to sign up for their sister-site, Scoop Factory. Unfortunately the script that handles sign ups at Scoop Factory required POST requests. Using a post request from within DLT would have resulted in an awkward redirect and we didn’t want to send users from the page. Another option could have been using an iframe with the signup form inside, but the POST result would still be uncontrollable.

The perfect solution would be to use AJAX to send the POST request, but unfortunately sending ajax to another domain is forbidden because of the security vulnerability. Once HTML5 is here we will be allowed do this but I needed a solution today.

I found my solution in Ben Alman’s aptly named Simple PHP Proxy. All that is needed is an AJAX POST request to the proxy script passed the url of the external form via a GET variable. Simple.

Checkout the results at Desert Living Today 2/3 the way down the page. Put your email in the box and click “Sign Up” and your email is sent across the internet to Scoop Factory via the magic of Cross Domain Scripting.

Tags: , , , ,