Just a brief note to mention that I uploaded my Django Fire Eagle authentication wrapper to Google Code.
It uses (and complements) my Fire Eagle API binding to wrap up the process of authorising your Django application with Fire Eagle into little more than pointing your users at a URL and setting them free.
Given that I’m sitting [or was, at the time of writing—Ed.] in a large, metal tube at about 35,000ft., and Ben is writing for his blog, I’ve been gripped by the desire to write for mine, too. Miracles, apparently, will never cease.
For the third year running, now, I’m on my way to Austin, Texas for SXSW.
The first year (2006), travelling with Fatty (whom I had met but once before), was an incredible experience. I got to make lots of new friends and, generally, learn a huge amount and have a brilliant time.
Fast-forward a year to 2007 and Fatty and I were joined by Ben, and I got to share a room with the inimitable Faruk. There were lots of complaints, from others, of the conference becoming too big for its own boots, of too many panels with too little content, and so forth; generally, there seemed to be an air of malaise about SXSW.
Socially, for me, it was bigger and better than my first year: I went to more parties, spent time with more people, and generally made more friends than in 2006. It was good.
I fully expect this year to continue that trend given that, at the airport this morning, Ben and I (alas, no Fatty this year) bumped into Stuart Colville before we had even checked in, Paul Duncan over breakfast, Cyril Doussin and Tristan Turpin (who, along with Stuart, are on the same flight as Ben and me) just after breakfast, and Gareth Rushgrove in the departures lounge.
All this, mark you, before we had even left Gatwick Airport.
Granted, this was aided in no small part by the magic of Twitter (and generally being better acquainted with more people in the web scene), but there was also a certain amount of serendipity thrown in for good measure, too.
Compared to the last two years, my aims have ever-so-slightly changed, too. Rather than, as last year, placing the focus on attending sessions and parties, my focus this year will simply be on “am I making the most of this time?”. I intend to be rather mercenary about this, in fact: last year and the year before, there were times when I stayed at a party for fear of not knowing anyone at another. That shan’t happen this year.
Further, I intend to be very much, to use an NLP phrase, “in the moment”. Also, in a change to normal programming, I shall be drinking alcohol (although hopefully not to the levels of excess seen at d.Construct 07).
The biggest change, though, is that I shall, finally, be attending SXSW music. The past two years, I’ve lusted after that extra week of partying and gigs (and envied Keith horribly when he’s stayed on); this year, I get to partake myself (along with Ben, Alex Lee, and Lindsey Mooney). Not only that but, thanks to contacts in Yahoo! Music UK, I may have wangled access to closed recording sessions for Yahoo! Music with Ben, Alex, and Lindsey.
I’m looking forward to it all more than you can possibly imagine.
So apparently I now write Python.
In a flustered, last-minute, push to get the Fire Eagle Python API binding ready to ship, I had to switch it to use HTTPS (and point to fireeagle.yahooapis.com, natch).
Given that I’m relatively new to Python, it took a moment to realise I had simply to switch from httplib.HTTPConnection to httplib.HTTPSConnection. This would have all been fine, save one issue: apparently, the otherwise wonderful MacPorts doesn’t appear to link OpenSSL in Python by default (which, naturally, is a requirement for HTTPS).
Without OpenSSL linked, trying to use HTTPSConnection (or, one would imagine, any SSL-related task) results in an error akin to AttributeError: 'module' object has no attribute 'ssl'.
To rectify this is, actually, very simple: run sudo port install py25-socket-ssl in the Terminal (assuming you’re using Python 2.5: other versions of Python will require different ports).
For those of you that haven’t seen it already, go look at Fire Eagle. Do it now.
Good, innit?
For those of you that don’t quite get it, the point is that it’s a central location-brokering service. You tell Fire Eagle where you are (or set your devices and web apps to tell it), and other applications can, if you allow them, use that data in fun and interesting ways (think auto-geo-tagging of photos on flickr, or mapping where your friends are, to name the most obvious).
Anyway: Fire Eagle really caught my attention and, thanks to my friendship with the lovely Mr. Coates, I got to play a little with its API before launch. Whilst it’s not quite finished yet (the methods to find users of your application within a given area, within, and to find recent location updates from your users, recent, are not there at the time of writing), the API and, indeed, website are decidedly lovely.
The website is friendly, playful, and takes all the hard edges off of the concept of using a web app whose sole purpose is to serve other applications and widgets. It has non-awful markup and CSS (although there are a few things I might quibble with in a code review). The URLs, though…
Oh, the URLs! Whoever came up with the idea of allowing http://fireeagle.com/my/location/is/Austin%20TX (or, indeed, any other location, but Austin, Texas is particularly apt for me right now) is an evil genius after my own heart.
The API has had as much care and attention as the web interface, though: no method is out of place, everything accepts what you’d expect. What’s more, it uses OAuth for authorising third-party applications to access user data (and Fire Eagle allows you to specify what level of granularity you want to allow per-application), so even that is positively simple given the existence of libraries to deal with OAuth for you.
If it all still seems like too much hard work to implement bindings for the API in your app, that’s been covered, too: there are bindings for Javascript, PHP, Ruby, Perl, and even one for Python written by yours truly.
I intend to spend a sizeable chunk of my time over the next few weeks playing with Fire Eagle, both updating my Python API binding and hacking around with various ideas I’ve had for fun, useful little apps using Fire Eagle data.
Now, where was I?
I’d been talking to John about her for quite a while before Peter finally introduced us. Dressed in close-fitting red, subtly accentuating her curves, she waited patiently outside.
As I approached she perked up, attentive to my presence, a youthful exuberance in her eyes. My hand lightly touching her side, she drew me closer. As I pushed all the right buttons, she progressed from a quiet whimper to an excited, throaty purr.
I still don’t know her name. Her number, though, is 368 of 500.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
This sentiment is just as true for markup, style, and behaviour on the web. The trick, though, is to find the optimal balance between the four.
When building a page, one should assume nothing: mark it up in the most minimal, sparse way possible whilst still maintaining a logical structure.
No classes. No ids. No divs or spans. Just pure, semantically rich HTML elements.
Next, divide the page into major logical divisions using divs with apt ids. Use classes to identify patterns used throughout the page (cf. Microformats). At this stage, one should be adding semantic context as minimally as possible.
Further, this context should be added at the highest level in the DOM that is appropriate, and no higher. For example, an ordered list of blog posts should not feature a class of post on each list item; rather, the list itself should have the class posts.
Remove redundancy in all aspects of the markup. Consider different choices of elements, even if they seem unfit for purpose.
If, at the end of this process, it seems like the document should be easy to style accordingly then there are probably too many styling hooks, in the form of non-semantic classes, ids and elements, in place already. Go back and think about everything once more. Make every element and attribute justify its existence.
By this point all functionality of the page, be it part of an application or straight prose, should be exposed and fully usable.
All of it.
If there’s a single piece of functionality that you feel you can’t provide in raw HTML, you’re doing it wrong.
This doesn’t mean the interaction has to be as rich as it might be, but it should be usable.
As with the markup, styling should be approached by using the most simple approaches possible to achieve the desired look.
The styling shouldn’t obfuscate any functionality: everything should still work as intended.
Avoid adding extra markup at all costs. If it seems that extra markup is necessary to aid styling, consider that the approach being used to acheive the style is the wrong one.
Finally, enhance the behaviour as necessary. As with styling, consider that the desire to add to the DOM (either before or during the life of a script) could be a sign that the solution is not the optimal one. Similarly, if styles must be added before any interaction occurs, separate them using some class high in the DOM tree.
If anything must be added, be they elements, ids, classes, or styles, add them at the latest possible instant and promptly remove them when unneeded. When applying behaviour use, as far as possible, already extant semantics for context.
Further, if the behaviour relies on styling to justify its existence, it may need rethinking.
Throughout all three, one should attempt to focus on the smallest area possible at a time. Break the document into its requisite parts, developing these in isolation from one another and the framework to bind them together.
Above all: if you’re not finding it hard, and agonising over it, you’re probably not doing it right.
Ben has publicly challenged himself to not waste his pre-work mornings by sleeping through multiple alarms.
Whilst I don’t intend to mimic his goal (I already get up at 6:30am thankyouver’much), I have a habit of not doing things (posting here, writing for Web Typography, exercising, and the list goes on) for similar reasons. I bemoan a lack of time, a fear of failure, a lack of knowledge… Anything, in fact, to excuse myself from doing things that might challenge me and require me to put effort into something.
So, to echo Ben’s sentiment:
This week, I’m taking the “don’t be so pathetic” method to not being shit at stuff.
It would appear that the SXSW08 panel picker is live. James, Norm! and I are hoping to run an Ask Us Anything session.
Vote for it, you know you want to!
There’s an accepted solution for channelled searching: offer a textbox input and a submit button, supported by a series of links to each channel of the search. The links will typically have JavaScript layered onto them (in theory, at least) to rewrite the form’s target, so that the user may refine their search before submitting it. This behaviour can be seen on Yahoo! US, Yahoo! UK and Ireland, MSN, and yes, even Google.
It must be the best solution, mustn’t it, if all these sites use similar techniques?
If we step back for a moment, to examine the user’s needs, we can see two objectives for the average searcher: find something and [perhaps] make it of this type.
The ’something’ for which the user is searching is, in their mind, the foremost concern. Everything else is secondary. When searching, a user’s first instinct will almost always be to enter their search terms (and why should it be otherwise?). Everything about a search interface is geared toward this: the keyword input has the most visual weight on the screen — on a typical search index page — and the most prominent position — either near dead-centre or in the head of the page, depending on the type of page.
The accepted solution, happily, cedes to this under all circumstances.
The second objective, then, is the type of results that will satisfy the search. The introduction of this second objective is where user behaviour will begin to deviate: depending on their priorities and personal inclinations, users’ execution of this may take place before, after, or even during the steps to meet the primary objective. Unlike the emphasis placed on the keyword input, the type of results to return should be — and, typically, are — de-emphasised where possible, but be present — and have their presence known — should the user require them (either to confirm their beliefs or to make a change).
But the accepted solution only pays lip-service to this more complex interaction: for any user without JavaScript, the only acknowledged paths for them to change the channel in which they are searching is to select it before they begin their search or, assuming that the search engine alters the links based on the latest query, directly after (and before they attempt to manipulate their search further).
By using JavaScript to bludgeon links into selecting from a choice of mutually exclusive channels, the user experience of what should be a simple search form is broken for many users when they attempt to interact with it in a way that seems natural to them. To compound this issue further, the use of links means that screen reader users may never be able to use this functionality, as links within the form will never be announced when they are entering their search terms.
The problem is that whomever has implemented these solutions (or their forebears) had the mindset of ‘HTML is static, JavaScript is dynamic’ — or simply didn’t care enough to question the accepted norm — and so overlooked what was staring them right in the face: HTML already has a perfectly good input device for selecting one and only one item from a collection:
The humble radio-button.
Given a little semantic markup and CSS (with a smattering of JavaScript to add extra styling hooks), it’s entirely possible to style a group of radio-buttons in a more visually apt way to indicate that it is filtering the search input, whilst offering a far more interactive experience to all users of the site, not just those with JavaScript.
So I did.
That’s what you can see in action on the new Yahoo!
As noted above, the main components of the form are a list of radio-buttons, a textbox, and a submit button. Of particular note is the way the radio-buttons are scripted and styled, and the structure of the radio-button labels relative to the form’s <legend>. Further, implementing the search this way requires that the server-side script be able to handle the new field being passed its way appropriately.
For all users, the core functionality of the radio-buttons is available, with these styled as an inline list for users with CSS enabled. The JavaScript, when enabled, will simply add a class to the root of the list, along with an extra <span> to allow styling of the labels in accordance with the design. When the radio-buttons receive focus the ’selected’ class is moved to the new selection. This activity takes place on focus, mark you, and not click: click events fire on the originating control which, when navigating with the keyboard, will mean the previously selected radio-button.
<legend> in its own life-timeIt was brought to my attention that a form’s <legend> will, by default, be announced before each and every form field by screen readers. To make this as unobtrusive as possible, each radio-button’s <label> is worded such that it makes the most possible sense when preceded by the legend text. In English, for example, the radio-buttons will be announced as ‘Search… the web’, ‘Search… for images’, and so forth (where ‘Search’ is the form’s <legend>).
The radio-buttons’ full text, though, would not make sense in a visual context: they should be presented as tabs titled ‘Web’, ‘Images’, and so on. To achieve this, the visually inappropriate portions of the <label> are wrapped in <span>s and positioned outside the browser’s viewport — along with the form’s legend and the radio-buttons themselves — such that they may still be accessed by screen readers and the like.
Furthermore, because the radio-buttons are still present in the content of the page, keyboard users may navigate the form fully through the keyboard (using arrow keys to move between items radio-buttons in a collection).
Once again, this can all be seen in action on the new Yahoo!
I can by no means take full responsibility for the successful implementation of this concept, though: I’d particularly like to thank Norm!, Mike Davies, Alex Lee (our designer), Tim Huegdon, and Ann McMeekin (of the RNIB) for all their help, advice, and patience (particularly when I got things working and made lots of excited noises at them), and this wouldn’t have ever been a reality on Yahoo! TV for Europe if it hadn’t been for the receptive, responsive attitude of the engineers working on Yahoo! Search for Europe.
Graceful degradation.
Innocuous little phrase, isn’t it?
If one takes a moment to consider it, however, the idea can be taken to it’s logical conclusion: ‘You (or your browser) are incapable of handling the full experience we want to present, so here’s a cut-down version.’
At its core, the mere concept of ‘graceful degradation’ belies a lack of respect for one’s users and, more critically, a fundamental misunderstanding of the medium in which we work.
The fundamental building block of the web is not JavaScript. Nor is it CSS. If your user experience relies on either of these, rather than features native to HTML, then that user experience is fundamentally flawed for use on the web.
The key is to design user interactions with naught but HTML’s base features in mind, later using CSS and JavaScript to enhance that experience (most likely streamlining it or making it more efficient). Done right, this enhancement can even be done in progressive levels, based on the availability of given features in the browser.
As a community, we coin phrases with nary a thought to deeper connotations these might have. Under scrutiny, the idea of ‘graceful degradation’ simply doesn’t align with user-centric design and development.
Progressive enhancement it is, then.
Steve Marshall (that’s me!), a 25 year old web developer, writes about technology, the web, and whatever else comes to mind.
You can find out about me or this site, or peruse the journal archives.
Show this page with baselines or with the grid.