The true cost of H&FJ’s web font platform

Chris Bowler from the Campaign Monitor team has written an interesting comparison between Typekit and Hoefler and Frere-Jones’ new cloud.typography web font service. If you’ve been sizing up clouds.typography, or didn’t know that H&FJ has (finally) launched their much anticipated web font platform, go read his post.


One thing that Chris didn’t touch on, but I think is relevant to the comparison, is that H&FJ’s annual subscription fees don’t actually give you access to their full range of fonts, just five font families:

Join Cloud.typography and get your first five webfont packages FREE

If you want access to more than five families then any additional fonts need to be purchased separately – currently H&FJ’s popular Gotham family costs $149 for a web font license, or $299 for a web and desktop license.

Continue reading


TweetPHP: Display tweets on your website using PHP

If you’ve ever wanted to display your latest Twitter tweets on a website, TweetPHP lets you do that using PHP. TweetPHP is a rewrite of my old Twitter RSS feed parser, which stopped working when Twitter phased out their v1 API.


  • Works with Twitter API v1.1
  • Tweets are cached to avoid exceeding Twitter’s API request rate limits
  • A fallback is provided in case the twitter feed fails to load
  • Retweets and @replies can be optionally ignored
  • A configuration parameter allows you to specify how many tweets are displayed
  • Dates can optionally be displayed in “Twitter style”, e.g. “12 minutes ago”
  • You can customize the HTML that wraps your tweets, tweet status and meta information


TweetPHP is available on Github


To interact with Twitter’s API you will need to create an API KEY, which you can create at: https://dev.twitter.com/apps

After creating your API Key you will need to take note of following values: “Consumer key”, “Consumer secret”, “Access token”, “Access token secret”

Those values can be passed as options to the class constructor, along with the Twitter screen name you wish to query:


$TweetPHP = new TweetPHP(array(
  'consumer_key'              => 'xxxxxxxxxxxxxxxxxxxxx',
  'consumer_secret'           => 'xxxxxxxxxxxxxxxxxxxxx',
  'access_token'              => 'xxxxxxxxxxxxxxxxxxxxx',
  'access_token_secret'       => 'xxxxxxxxxxxxxxxxxxxxx',
  'twitter_screen_name'       => 'yourusername'

Then you can display the results like so:

echo $TweetPHP->get_tweet_list();


See TweetPHP’s Github for documentation of all options.


Caching is employed because Twitter rate limits how many times their feeds can be accessed per hour.

When the user timeline is first loaded, the resultant HTML list is saved as a text file on your web server. The default location for this file is: cache/twitter.txt

You can change this file path by setting the cache_file option. For example, to set a path from your root public directory try:

$_SERVER['DOCUMENT_ROOT'] . '/path/to/my/cache/dir/filename.txt'


If you are experiencing problems using the plugin please set the debug option to true. This will set PHP’s error reporting level to E_ALL, and will also display a debugging report.

Here are a few tips to help you solve common configuration issues:

tmhOAuth response code: 0

If your debugging report shows the error “tmhOAuth response code: 0”, you can find out more about this error message in the tmhOAuth github README. Dario also offers this solution: “My server didn’t like the the two __DIR__ constants in the tmhOAuth.php file, hard-coded them and it all works now.”

unserialize error

If you receive the PHP warning “[function.unserialize]: Error at offset 0 of 49 bytes”, it might be the case that you have magic quotes enabled in your PHP configuration.


– Feed parsing uses Matt Harris’ tmhOAuth
– Hashtag/username parsing uses Mike Cochrane’s twitter-text-php


The demise of skeuomorphism

On Daring Fireball John Gruber proposes that the current enthusiasm for “flat” interface design can be explained by the introduction of retina displays. Gruber argues that high resolution screens are a natural fit for clean, typographic interfaces, whereas crude low resolution screens need skeuomorphism’s visual “parlor tricks” to disguise their inferior pixel density:

The trend away from skeuomorphic special effects in UI design is the beginning of the retina-resolution design era. Our designs no longer need to accommodate for crude pixels. Glossy/glassy surfaces, heavy-handed transparency, glaring drop shadows, embossed text, textured material surfaces […] work on sub-retina displays because sub-retina displays are so crude. On retina displays, as with high quality print output, these techniques are revealed for what they truly are: an assortment of parlor tricks that fool our eyes into thinking we see something that looks good on a display that is technically incapable of rendering graphic design that truly looks good.

If Gruber’s hypothesis is correct, then how can we explain the fact that highly skeuomorphic interfaces only started to appear en masse around 2008, when the iOS app store launched? UI designers have had to accomodate low resolution displays for decades, yet for the most part the dominant design styles have been “flat” rather than heavily textured or skeuomorphic. Even in recent years that has been the case, at least in the field of web design. The web design gallery siteInspire, launched in 2008, has showcased thousands of interfaces that are (mostly) devoid of decorative embellishments, which is a testament to the enduring popularity of minimalist design.

Continue reading


Comprehensive domain mapping for Big Cartel stores

When working with the Big Cartel ecommerce platform it is common to map a custom domain to your store. For example, you might like to use the domain mysite.com instead of your default Big Cartel subdomain mysite.bigcartel.com.

Big Cartel provide instructions for configuring domain mapping using a CNAME record, so that www.mysite.com becomes an alias for mysite.bigcartel.com. This works great except for one thing: if a customer omits the www prefix from your store’s URL they will get a big fat 404 error. This is because your CNAME record only matches the www subdomain.

Continue reading


Convincing users to abandon Internet Explorer is like whistling in the wind

Smashing Magazine recently published Dear Web User: Please Upgrade Your Browser, an article by Louis Lazaris encouraging regular Internet users to abandon Internet Explorer and upgrade to a modern web browser. After reading the piece, I tweeted that while I appreciate the sentiment, trying to convince stubborn IE users to upgrade is like whistling in the wind. By which I mean that those users are a) never going to read an article on Smashing Magazine and b) not going to upgrade their browser until they upgrade their computer. Hardly anyone chooses Internet Explorer as their web browser – they use it because it came pre-installed on their computer, and will continue using it for the lifespan of the computer. Any number of articles on Smashing Magazine won’t change that fact.

Continue reading


Trackpad Scroll Emulator jQuery plugin

When Rdio rolled out their redesigned application recently, I was intrigued by the app’s scrolling implementation. There are no conventional browser scrollbars in Rdio, and instead scrollbars appear on-demand when the user’s mouse enters a scrollable portion of the interface, or when the user performs a mousewheel or trackpad scroll. Rdio’s implementation mimics the experience of scrolling in OSX Lion using a trackpad pointing device, except that it works for any user, on any platform.

Inspired by Rdio’s scrollbars I have created a jQuery plugin that emulates Lion’s trackpad-style scrolling, regardless of the user’s pointing device, browser, or platform.

Continue reading


A jQuery plugin boilerplate

I created this boilerplate for a jQuery plugin I’m working on, and you can use it to kick start your own jQuery plugin development. The features of my boilerplate are:

  • Plugin can be customised using options
  • Setters/Getters for options
  • Private and public methods
  • Callback hooks
  • Plugin instances can be destroyed

Continue reading


Test your JavaScript skills with js-assessment

I recently discovered js-assessment, a “test-driven approach to assessing JavaScript skills” created by Rebecca Murphey. The js-assessment application contains a series of tests designed to assess a job candidate’s grasp of JavaScript, but it can also be used to gauge your own knowledge of the language. Think of it as a mini Project Euler for JavaScript.

The questions are divided into five topics covering different aspects of the language: arrays, objects and context, functions, asynchronous behavior and Backbone views. If, like me, you have a decent grasp of JavaScript, but wouldn’t feel confident writing “JavaScript programmer” on your curriculum vitae, then I think you’ll find the tests an enjoyable challenge. None of the questions are super difficult, though I confess to needing help from MDN to arrive at a few of the solutions. I definitely learned a thing or two about JavaScript along the way.

Continue reading


Don’t believe the hype

This week I came across a new JavaScript framework, called Meteor, which promises to simplify the process of developing web applications. It looks like an interesting project, run by some very smart and talented people, but something about the Meteor marketing pitch rubbed me the wrong way.

The Meteor website is full of claims about how amazingly easy the framework will make web developer’s lives. It will allow us to build “top-quality web apps in a fraction of the time.” Its demo applications require “no programming knowledge.” What “once took weeks, even with the best tools, now takes hours.” In fact, you can “build a complete application in a weekend.”

If building a world class web application was really something that could be done in a weekend, wouldn’t everyone and their dog be CEO of their own Internet startup? If the barrier to entry was as low as the Meteor team would have us believe, then business owners would have no need for developers at all – a few hours of training and they’d have all the skills required to build their own app or website.

Continue reading