Introducing the Courant Headers App

My second post in a week? Who would have bet on this? I’ll even make this a substantive post about my recent work on Courant, how exciting!

Last week, I committed to Courant for the first time in a long time. To the outside, it looked like Courant went a bit dormant over the summer. I won’t deny that we slowed down, but we (mostly Max) didn’t stop completely. Work continued on the Yale Daily News templates, which don’t show up in the public repository, and more important we did a lot of speccing, discussing and planning for the features we want to implement.

One of the major ones is mobile. Mobile Internet access is clearly becoming more and more important, and we want to provide full-featured support for mobile experiences with Courant. The old version of the Yale Daily News site had a mobile site and a special site for the iPhone based on iUI. A long time ago, I began the work necessary to port them to Courant. Recently, they came up again, and Max and I discussed the best way for us to implement them.

It is at this point that a critically important characteristic of Courant reared its head: our desire to be a platform. In all aspects, we’ve tried to create something flexible enough for all kinds of organizations to adapt and use. Max discussed this in theoretical terms in his post on registries, and we’ve put it into practice with the awesome get tag, search functionality, and more. And now we’re doing so with the new Headers app.

The Headers app allows sites to customize their display based on any HTTP header. HTTP headers are sent by the browser when it requests your page and include such things as user agent (type of browser – Firefox, IE, etc.), referrer (what page the browser is coming from, if any), and host (what domain the user is requesting). We allow you to vary your site based on any HTTP header, which allows for unlimited flexibility. Let me give you some examples.

  • Check the User Agent header to see if the browser is an iPhone and serve a special iPhone version of the site.
  • Check the Referrer header and see if the user came from Facebook and show them a special link to your Facebook app.
  • Check the Host header and show different templates for mobile.domain.com as opposed to your main domain.

Header rules provide many options for maximum flexibility. Let me give some examples:

  • Header rules can be limited to only take effect on certain domains. For example, the iPhone view can only show on iphone.domain.com, to allow users to see your full site at domain.com.
  • For each rule, you can define a list of template extensions to use. If the first one listed doesn’t exist, it will fall back through the rest of them and look for the first that does exist. For example, the iPhone header rule can check for a .iphone template. If none exists, it can use a .mobile template, and if that doesn’t exist, it can fall back to .html.
  • Finally, the header rule can set a context variable that can be checked in templates and used to show a special message. For example, a rule can check if a user came from Twitter and set a variable so templates can check {% if HEADER_VARS.from_twitter %} and show special content.

More details will be included in the forthcoming documentation.

The headers app is an important foundation layer for future work, including our mobile templates. Look for more commits in the future for headers and other parts of Courant!

Comments are closed.