Archive: February, 2005

Speaking of cool JavaScript applications…

Dave Shea has redesigned his Bright Creative website and he’s using my slideshow script for his design portfolio. I’m glad to see that it scales up to having multiple slideshows on one page.

And now it’s time for me to eat humble pie. Google Maps, contrary to my expectations, is clearly being developed continuously. It is now working flawlessly in Safari.

Note, for example, this page of directions from the hotel where I’ll be staying during South by SouthWest to the venue where Kings of Leon will be playing that week.

Finally, I no longer have to use the tongue-twisting phrase XMLHttpRequest every time I want to talk about a web app that uses JavaScript to make calls to a web server. Jesse James Garrett has coined the term Ajax: Asynchronous JavaScript and XML.

I like it. It’s certainly a lot easier to say than ex emm ell aitch tee tee pee request. I also like the idea of a web technology that shares its name with a Greek warrior from the Trojan war (even if the name also conjures up images of cleaning products).

I’ve just introduced a bunch of Ajax enhancements over at The Session. If you go to any of the main site sections (the tunes section, for instance), there are tabs for the newest tunes, the newest comments and a search form. You can navigate through these lists with previous/next links as well as page numbers. I’ve used JavaScript to intercept these links and then conjure up the Ajax magic.

Here’s the source code. When one of those links is intercepted, the current content is deleted and replaced with a loading image. Then the XMLHttpRequest does all the work and gets the next set of results. Those then get inserted into the page.

There are couple of teeth-grinding moments where I have to fork the code but overall it’s pretty straightforward. The end result works quite nicely. It’s a snappy way of moving through multi-page lists without requiring a page refresh.

If you don’t have JavaScript enabled, everything continues to work with old-fashioned server-side magic. It works quite nicely in Lynx.

This Ajax is pretty powerful stuff. Web developers just need to realise that with great power, yada, yada, yada, responsibility.

That Richard Rutter is a jolly good egg. He found himself with a spare ticket for a Wedding Present concert and kindly offered it me.

The band were on top form and, courtesy of Richard, I had a thoroughly enjoyable time.

I’ll be going out again tonight but not for rock’n’roll. Instead, Jessica is taking me to the wonderful Seven Dials restaurant here in Brighton. Together, we will celebrate the anniversary of my birth.

I share my birthday with George Harrison and Pierre-Auguste Renoir (both dead) and I’m just one day too late to share it with Steve Jobs (not dead).

As for my age… well, let’s just say that I’m now more than a third of a century old.

Jason Kottke has given up his day job. He is now attempting to make a living from personal publishing.

I, for one, welcome our new A-list blogger overlords.

Seriously, I think this is very brave and very cool. He explains his reasons for doing this and I find myself nodding my head in total agreement:

“The real problem was the tension between my web design career and my self-publishing efforts; that friction was unbalancing everything else. One of them had to go, and so I decided to switch careers and pursue the editing/writing of this site as a full-time job.”

Other people make their living from their blogs. Scrivs and John Gruber spring to mind. But this is a bit different. Whereas Scrivs and John Gruber write very focused blogs about very specific topics, Jason isn’t interested in that:

“I’m interested in too many things to settle on design or programming or writing or a particular topic.”

Also, the advertising model has been rejected as the revenue stream:

“In my experience, the third wheel of advertising often works to unbalance the relationship in favor of either the author or the readers (usually in favor of the author). If ads were involved, I might feel the need to change what or how I write to appease advertisers. I might write to increase pageviews and earn more revenue.”

Instead, he introduces the idea of micropatrons. Basically, if you enjoy the content, you can contribute money to support the site. Or not. It’s entirely up to you.

Personally, I find this model very intriguing. Neal Stephenson has spoken of Beowulf authors and Dante authors. What Jason is proposing combines the best of both worlds: the artistic freedom of the Beowulf author combined with the patronage of the Dante author.

Most of all, I’m excited by the hints of a return to more 0sil8 style content. Without the limitations of a nine to five job, I’m pretty certain that the constraints of the blog format will have Jason chaffing at the bit in no time. Like Heather, I’m beginning to have a canary-in-the-coal-mine reaction to everything being in a blog format.

I wish Jason all the best with his endeavour. I try put myself in his shoes and I don’t think I’d enjoy the pressure of having to publish to earn a crust but I can certainly fantasise about running a site like The Session as a full-time job. In fact, I just recently introduced a PayPal donation option to that site. I’ll be happy if it can cover the hosting costs.

I admire what Jason is doing. I admire it a lot. I really like that advertising doesn’t even enter into the equation. I’m starting to feel some of the old-school excitement I used to get from sites like 0sil8 and The Fray: personal publishing for its own sake.

I have the sneaking suspicion that the begrudgers at MetaFilter don’t recall a time before blogs. They appear to be fixated on the quality of links provided at Kottke.org. Trapped in a prison of their own making, they are incapable of looking past the walls of blogs to see the possibilities dawning on the horizon of personal publishing.

Oh, mighty LazyWeb, I beseech thee. How about integrating Address Book with Skype so that I can dial telephone numbers without cutting and pasting?

Surely some AppleScript guru out there can help.

Anybody?

Anybody?

Bueller?

Anybody?

While you rocket surgeons are working on that, I’m off to have a fun filled weekend.

My good friend Diarmaid is coming over from Dublin. I intend to spend the weekend showing him the sights and sounds of Brighton. I haven’t got the sights figured out but the sounds are all taken care of: Salter Cane are opening for Giant Sand tomorrow night.

It just remains for me to leave you with a couple of quick links…

Superman is a dick.

Best. Cover version. Ever.

And in the words of Professor Farnsworth, “Good news, everyone!”.

London was the setting for another geekend get-together on Saturday.

It was great to see the familiar faces of Stuart, Dunstan and Patrick. There were also a couple of first-timers: Ian and Simon. Of course the Brighton gang, myself, Andy and Richard, were there as well. We haven’t missed one of these gatherings yet.

Unfortunately, the delegations from Oxford, Nottingham and Wales weren’t able to make it this time. They missed a most enjoyable day in the nation’s capital.

After convening for breakfast in Covent Garden, we traversed the bustling hub of Leicester Square, which was being decked out for the BAFTA ceremony, and made our way to the Apple Store on Regent Street. We were like kids in a toy store, one with refurb toys being sold at a discount. I exercised great willpower. I didn’t buy anything.

Having passed the temptation test, we converged on a nearby pub to engage in the core activity of these gatherings: chatting and drinking. The subject matter ranged widely but there was, of course, much discussion of web standards.

The talk continued at the nearby Busaba Eathai where we feasted on some rather nice Thai food. After that, people began to disperse one by one. There was time for one more pub stop and then I too caught a train home.

All in all, it was a most pleasurable day out in the big smoke. But there was also work to be done. We didn’t meet up just to shoot the breeze. We had an invasion to plan. The next time that our vectors converge will be in one month’s time at South by South West.

Look out, Austin. The Brit Pack is on its way.

About a week ago, I was having a chat with Andy about all things web related. It seems that Andy and I use the web in very different ways.

I work on the web. I also play on the web. When I want to be entertained, I turn to the web for entertainment. When I want to be informed of current events, I turn to the web for news. My RSS reader has groups with labels like culture, food, technology and news. I read blogs by fellow web designers but I also read blogs by musicians, mothers, waiters and prostitutes.

Andy, on the other hand, uses the web almost exclusively for work. If he wants news, he turns to newspapers, radio and television. His RSS reader has feeds related to web design. He reads blogs about web design and CSS.

This is reflected in what we write about. Andy writes about web design, CSS and accessibility. I write about web design, books, music, politics, what I had for lunch, what I did on my holidays and what’s the world coming to anyway…

My fellow web designers tell me they enjoy reading my posts on design and the DOM but they skip over all that other, irrelevant stuff. Meanwhile, my friends and family members tell me they enjoy reading my journal to catch up with what I’ve been doing but they skip over all that gobledegook about browsers and bugs.

Now, I like to think of myself as a renaissance man. Perhaps the term short-attention-span man would be more accurate. In any case, the thought of reading and writing about one single topic just doesn’t appeal to me. That’s why this journal will only ever be of limited appeal. How many people out there are simultaneously interested in CSS, JavaScript, Star Wars, Irish traditional music and life in Brighton?

Most of my fellow web designers are far more focussed in what they write. They investigate the minutiae of CSS and write articles on their findings. It brings them lots of well-deserved recognition within the web design community. They’d be the first to admit that it can be hard work to consistently come up with the goods.

That’s one of the reasons I’ve avoided going down that route with my journal. I don’t ever want it to become hard work. I like the fact that this journal is something separate from my work. I don’t think I’d enjoy feeling pressured to write.

For me, writing online has always been about pleasure. Sure, I write about work-related stuff too, but only because that too gives me pleasure.

I was inspired to start writing online because of people like Derek Powazek, Jeffrey Zeldman and Jason Kottke. They all happen to be very talented designers but that’s only part of their appeal. The thing that really struck me about these people was that they each had a distinct voice.

Voice is that certain something, that je ne sais quoi that makes something a pleasure to read. The subject matter and design is only half the story. It’s the voice that gives life to writing.

That’s my opinion. It’s an opinion that colours my approach to the web. I guess I’m quite language-centric whereas somebody like Andy is far more information-centric.

That’s okay. It’s a big web out there and there’s room for everyone. It’s important to recognise that.

I sometimes get frustrated when I read web design blogs that refer to “bloggers” or “the online community” when they actually mean “web design bloggers” and “the online web design community”. The same goes for political bloggers. They often talk as if there were no other kind.

I think it’s important to maintain a healthy sense of perspective. There is a vibrant and active community of web design blogs but there is an equally vibrant community of blogs about knitting.

Usually when web designers are looking for perspective, they are urged to get away from the computer, get outside and into the real world. I think it’s equally important for me as a web designer to stay at the computer but to explore the web beyond the sphere of design blogs.

Then again, I am in a fortunate position. As a freelancer working from home, the line between work and leisure is often quite blurred. I like it that way. Instead of spending hours at work followed by hours at leisure, I spent my entire time flitting between the two.

I’m sure it would be different if I worked at an office from nine ‘till five. In that situation, I imagine the last thing I’d want to do when I clocked off would be to sit in front of the computer some more.

So I count my blessings. I work and play on the web. I get pleasure from both. The work can be hard sometimes but it’s also very rewarding when I can add something to the collective goodness that is the world wide web.

The web rewards me in return. It constantly surprises me with new and unexpected treasures. I get to read what other people have chosen to put online. I discover voices that speak directly to me.

I love it.

Google Maps is in Beta. Normally, a Beta phase doesn’t last all that long. It’s a time to test, tweak and get things ship-shape before a final release.

At least that’s the theory. These days, Beta applications seem to be enjoy a sort of eternal youth. The Beta version of Google News was launched in September, 2002. It’s February, 2005 and Google News is still officially a Beta release.

I have a few issues with Google Maps. Don’t get me wrong: when it works, it’s a joy to use, a very seamless, intuitive experience. But it uses some kludgy JavaScript to get things done and it does not degrade gracefully. Normally if I have a problem with a Beta release, I don’t think much of it: I give the benefit of the doubt and assume that the application is still undergoing development. In this case, given Google’s fondness for the perpetual Beta label, I’m not so sure.

Somebody has already analysed the JavaScript and XML being used by Google Maps. The analysis closes with a statement that I disagree with completely. I’ve mentioned before that I truly hate the phrase “at the end of the day”. This one takes the biscuit:

“I also think it bears noting that Google is pulling out all the stops to build rich web apps, no matter how weirdly they have to hack the browser to make them go. And I strongly believe that this is a trend that is here to stay — XHTML Strict/CSS/etc be damned. At the end of the day, what really matters to users is compelling apps that let them get their work done quickly.”

To paraphrase George Santayana, those who cannot remember the browser wars are condemned to repeat them.

I’m jealous of Jessica.

She’s currently reading through Neal Stephenson’s superb Baroque Cycle series of books. When she finishes one book, she can start straight into the next one.

When I finished reading Quicksilver, I had to endure an agonising wait until The Confusion came out. When I finished that, I had to suffer through another interlibrum until The System Of The World was released.

Now that I’ve finished all three books, I don’t know quite what to do with myself. They are such superb exemplars of imagination and language that they make other books seem pedestrian and amateurish by comparison.

Right now, based on some favourable reports, I’m reading a new science fiction novel. It’s just not doing it for me.

I read through the popular Eats, Shoots and Leaves which should have been the perfect book for an anally-retentive stickler such as I. I even found myself mentally correcting the book, altering sentences that ended with prepositions. It was an entertaining read until the last chapter when the author makes the fatal error of stating, "the internet is…" followed by ludicrous generalisations about all writing on the web.

Some people clearly haven’t quite got their heads around the sheer scale of the internet. Imagine reading a handful of books and using that as a basis to claim, "all books are like this". If only that were true. If only all books were on par with the Baroque Cycle.

In lieu of more books, I’ll have to content myself for now with reading interviews with Neal Stephenson.

I’ve released my latest little DOM Scripting experiment into the wild here at adactio. It’s a simple little animation that responds to mouseovers in a list of links.

You can see it in action over in the portfolio section where I’ve made a little slideshow of archived sites. There’s another version on the "about this site" page. That one has both vertical and horizontal scrolling.

The implementation isn’t quite what I originally planned. I wanted to achieve the animation effect by sliding a background image around. This background image would be contained within a <div> that has a fixed size and the overflow property set to none.

That worked absolutely fine in every browser except one. Guess which one?

Yes; as usual, Internet Explorer caused much grinding of hair and pulling of teeth.

Microsoft’s web browser insisted on downloading the background image anew every time its position changed. I couldn’t see any way of getting around that problem so I went with a slightly different approach.

Instead of moving the background image of the <div>, I’ve placed an <img> tag inside the <div>. This seems like a less elegant solution to me but it appears to be working fine.

Here’s what happens: when the page loads, a function is triggered. This function checks to see if the page has a list with a specific ID. If it does, then a <div> element is created with the DOM. An <img> element is also created and placed within the <div>. The <div> is then inserted into the page, right before the link list.

Now, I loop through each link of the list and an "onmouseover" behaviour to each one. Mousing over each link will slide the <img> in the <div> into a new position. I also apply the same behaviour to "onfocus" so that people navigating without a mouse get the same effect.

To get a nice easing in and out effect on the animation, I recalled something from my childhood maths classes.

My teacher was trying to explain the concept of limits by talking about a frog trying to cross a pond. Every jump the frog makes is exactly half as long as the one before. With its first jump, the frog crosses half the pond. With its next jump, it covers half that distance. The question was, "when would the frog reach the other side of the pond?" The answer is never.

So what has this got to JavaScript? Well, I thought I’d apply everything I learned about frogs to my animation script. To move the image in the <div>, I first calculate how far it has to go. Then I divide this distance by a set amount (say, two, if we’re sticking with frog-like movement) and I move the image by this amount. Wash, rinse, repeat.

The difference between me and the frog is that, when I divide the distance yet to be traversed, I round up the figure. That way, the image actually reaches the other side of the pond… I mean, <div>.

As with any JavaScript animation, the movement varies from browser to browser and machine to machine. It moves pretty smoothly in Safari, slightly slower in Firefox and slower again in Internet Explorer.

See for yourself. It’s not exactly an earth-shattering addition to the canon of DOM scripts but I had good fun writing it.

Last year, the New York Times ran a story about the iPod’s shuffle feature. "Is it really random?", they wondered.

This week, Stephen Levy published an article in Newsweek about the iPod’s shuffle feature. "Is it really random?", he asks.

Newsweek; dear, dear Newsweek. Your anachronisms are quaintly endearing. Next week’s issue will no doubt have the full lowdown on that wacky "all your base are belong to us" thing.

Anyway, everyone knows that the iPod uses the almost completely random Cederholm-Fugazi algorithm to shuffle songs.

This is pretty cool: Panic Software, makers of fine mac apps, have opened up a little store called PanicGoods. It sports a very nifty drag’n’drop interface.

You can drag items to the shopping cart which is permanently situated at the bottom of the screen. Even cooler, you can drag items right back out again and watch them disappear in a dock-like puff of smoke.

But, and this is a big but, it doesn’t work at all if JavaScript isn’t enabled. This is a shame. With a little bit more work, a fall-back bit of server-side action could fix this shortcoming. Sure, it would require page refreshes (sullying the seamless nature of the shopping experience) but at least you’d still be able to buy stuff.

Still, there are some great ideas at work here. I’d like to see some of these ideas integrated with the more traditional shopping cart model to form a nifty JavaScript front-end that degrades gracefully.

When Apple released the G5 iMac, I professed my hope that we would soon see some third-party armatures:

"Any alternate stands would have to be finely engineered for balance but I wouldn’t be surprised if some enterprising hardware manufacturer comes out with an armature in the style of the G4 iMac."

A company called Bluebroc have gone one better. They’ve designed an entire sofa around the iMac. That might be a tad extravagant but check out the armature on that thing. It looks very flexible indeed. Maybe they’ll build a sofa-free version.

Meanwhile, the Mac mini, which has only been out for a few weeks, already has a raft of accessories available. Expect more to follow.

If you’re looking for third-party products made with real love and care, the adorable foofbags have the market cornered. Handmade cosies: they’re not just for iPods (or bluetooth dongles).