CSS: The Tech Ajax Forgot

…. Wherein our protaganist awakes to the power of CSS …

CSS is as important to Ajax as Asynchrony and XMLHttpRequest. Which is to say, it’s very useful, even though it’s not essential. Due to an accident of the English language, JJG’s creative mind, and the propensity of certain terms to rise to buzzdom, it doesn’t explicitly feature in “A.J.A.X.”. However, the original Ajax article certainly spells out the importance of CSS matters – the first of 5 things “Ajax incorporates” is:

standards-based presentation using XHTML and CSS;

And in the FAQ below that:

Why did you feel the need to give this a name? A. I needed something shorter than “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” to use when discussing this approach with clients.

Myself, I missed the significance of CSS for a long time. I considered it mostly a useful engineering concept – to cut down on markup – and a way to make things prettier. As I’ve spent more time creating rich web apps, I’ve come to appreciate how powerful it is, and how important it is. Not just from a layout perspective, but as a key piece of an overall architecture. With CSS, you can change element visibilty, you can create transparent popups, you can load images faster (using backgroundPosition; see Sprite pattern). You can make Flickr-style annotation boxes without a single line of Javascript. You can also support graceful degradation, e.g. keeping an Ajax-related element hidden until the onload script makes it visible (although degrading gracefully for someone not using CSS is another problem altogether). So CSS goes well beyond appearance and even beyond keeping DRY.

Furthermore, scripting with CSS is the best thing since sliced sashimi! At first, I wondered what all the hype was about, but now, I have to say I’d find it hard to go back. I’m using Prototype with the $$ speedup patch and it seems to hold up fine from a performance perspective. It’s becoming a standard idiom to loop through each element, using the selector, when the document loads (to do some sort of initialisation).

As one example of selector coolness, here’s a library function to clear all input elements, also combining the pleasance of Prototype Rubyish iteration.

javascript

  1. function clearInputs(cssSelector) {
  2.   $$(cssSelector + " input").each(function(el) {
  3.      el.disabled = false;
  4.      if (el.type=="text") { ele.value = ""; }
  5.      if (el.type=="checkbox") { el.checked = false; }
  6.   });
  7.   $$(cssSelector + " textarea").each(function(el) { el.disabled = false; el.value = ""; } );
  8. }

If I want to clear all inputs under submitForm, I call clearInputs("#submitForm"). If I want to clear all inputs on the page, I call clearInputs("body"). If I want to clear all inputs inside advertising portlets, I call clearInputs(".portlets .advert"). Bruce Eckel once said (something like: “It’s syntactic sugar, and syntactic sugar is good.” He’s also spoken about how the average programmer codes X lines per day (canonically ten, but the number doesn’t matter). Any syntactic sugar that reduces lines, will probably let you achieve more. Not to say that the number of lines is really fixed, but there’s definitely going to be an impact if you’re writing a big block instead of a single line. So, yeah, CSS Selectors + Rubyish Iteration, via Prototype, is a big win if you value concise code.

To sum up, I’ve found CSS to be a highly valuable skill for modern web development, and for three reasons:

  1. The obvious reason that knowing CSS helps make your pages pretty, usable, accessible, etc.
  2. CSS manipulation is important for managing the interaction in rich web apps, including graceful degradation.
  3. CSS Selector Scripting is the new Dependency Injection!

Ajax Functionality and Usability Patterns – Podcast 3 of 4: Visual Effects

This is the third in the four-part series on Ajax functionality and usability patterns (Book: Part 4, pp 327-530). An audio discussion of visual effects is ideally short and sweet, so this podcast is but 13 minutes long.

This 13-minute podcast covers ten patterns of Ajax Architecture (Book: Chapter 16, pp 445-472):

Ajax Books Page

Via the APress mailing list, I just discovered no less than six new Ajax books are coming out, covering Ajax and .Net/ Ajax and Java (by Nate and Ryan, authors of Foundations of Ajax), etc. I was gonna post them here, but I thought I may as well add an Ajax Books page to the wiki, so here’s the list of Ajax Books … publishers/authors/fans are you listening? Please add any books I’ve missed out (there are plenty of those) and also feel free to link to Amazon and other stores.

The current version of http://ajaxpatterns.org/Books looks like this:

General Ajax and Introductory

Beginning JavaScript(tm) with DOM Scripting and Ajax: From Novice to Professional

  • By Christian Heilmann
  • APress

Ajax for Dummies

  • By Steve Holzner
  • Dummies

Ajax Hacks

  • By Bruce Perry
  • O’Reilly

Ajax Headrush

  • By Brett McLaughlin
  • O’Reilly

Ajax In Action

  • By David Crane, Eric Pascarello, Darren James
  • Manning

Foundations of Ajax

  • By Ryan Asleson and Nate Schutta
  • APress

Pragmatic Ajax

  • By Justin Gehtland, Ben Galbraith, Dion Almaer
  • Pragmatic Bookshelf

Professional Ajax

  • By Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett
  • Wrox

Design/Advanced

(Based on this website!) Ajax Design Patterns

  • By Michael Mahemoff
  • O’Reilly

Ajax Patterns and Best Practices

  • By Christian Gross
  • APress

Ajax-Related Technologies (Javascript etc)

Beginning XML with DOM and Ajax: From Novice to Professional

  • By Sas Jacobs
  • APress

Atlas/.Net

Foundations of Atlas: Rapid Ajax Development with ASP.NET 2.0

  • By Laurence Moroney
  • Apress

Pro Ajax and the .NET 2.0 Platform

  • By Daniel Woolston
  • APress

Java

Pro Ajax and Java(tm) Frameworks

  • By Ryan Asleson and Nate Schutta
  • APress

Practical Ajax Projects and Java(tm) Technology

  • By Frank Zammetti
  • APress

Ajax Functionality and Usability Patterns – Podcast 2 of 4: Ajax Page Architecture

This is the second in the four-part series on Ajax functionality and usability patterns (Book: Part 4, pp 327-530).

The guest for this week is Dave Johnson of Nitobi (the Ajax component developers formerly known as E-Business Applications), widget guru and author of the upcoming Enterprise Ajax book. Dave helps me walk through the patterns and offers plenty of great insights along the way. We mention Dave’s recent presentation a couple of times; here’s the PDF.

This 54-minute podcast covers ten patterns of Ajax Architecture (Book: Chapter 15, pp 389-444):

Ajax Functionality and Usability Patterns – Podcast 1 of 4: Widgets of the Web

And so, a new series begins, based on the Ajax functionality and usability patterns (Book: Part 4, pp 327-530). We’ve already looked at the technical details, now we’re looking at what Ajax can do for users and how to implement these features.

I’m asking guests to join me for most of the remaining Ajax Pattern podcasts. Seeing patterns from someone else’s perspsective will make the discussion richer and hopefully cover more questions you might have as you’re listening to the podcast. The guest for this week is Andre Charland of E-Business Applications, widget guru and author of the upcoming Enterprise Ajax book.

This 83-minute podcast covers nine patterns of Ajax widgets:

Ajax Programming Patterns – Podcast 4 of 4: Performance Optimisation Patterns

The fourth and final podcast in this series of Ajax Programming Patterns. As always, the patterns are online at AjaxPatterns.org and covered in the book too, now available at Amazon. This 33-minute podcast covers seven patterns of Performance Optimisation:

(Note that the last two are recent additions to the wiki and just stubs at this stage.)

Okay, here endeth the series. I will soon be starting up a new series on the next group of patterns (Part 5 in the book): Functionality and Usability Patterns. There will be a change in the format, one I hope you’ll enjoy!

Ajax Programming Patterns – Podcast 3 of 4: “DOM Population” and “Code Generation and Reuse” Patterns

The third podcast in this series of Ajax Programming Patterns. The 29-minute podcast covers five patterns. As with the previous podcast, there is reason for concern about the audio quality herein. Firstly, three patterns on DOM population – taking server response data and displaying it or storing it in the DOM:

The second group of patterns (representing a different chapter in the Ajax Design Patterns book) are a couple of generic Javascript patterns to make the code more maintainable and portable:

Ajax Programming Patterns – Podcast 2 of 4: Browser-Server Dialogue Patterns

Continuing from the previous podcast (cough 12 weeks ago), more programming patterns. Unfortunately, this recording (and the next one) went pear-shaped. Sorry. I do, however, recommend them to those of you who’ve been wondering what an Ajax talk would have sounded like in crackly 1930s recording technology, and one in which the speaker has a severe cold. FYI The level was too low and it didn’t correct very well…maybe one day, I’ll re-record, but for now I’d prefer to just get them out there as they have been sitting in the libsyn archive for many weeks.

The 40-minute podcast covers the following patterns:

  • Call Tracking Accommodate busy user behaviour by allocating a new XMLHttpRequest object for each request. See Richard Schwartz’s blog entry.Note: Pending some rewrite to take into account request-locking etc.
  • Periodic Refresh The browser refreshs volatile information by periodically polling the server.
  • Submission Throttling Instead of submitting upon each Javascript event, retain the data in a local buffer and upload it periodically.
  • Explicit Submission Instead of submitting upon each Javascript event, require the user to explicitly request it, e.g. submit upon clicking a button.
  • Distributed Events Keep objects synchronised with an event mechanism.
  • Cross-Domain Proxy Allow the browser to communicate with other domains by server-based mediation.

Click to download the Podcast. You can also subscribe to the
feed if you want future podcasts automatically downloaded - check out the
podcast FAQ at http://podca.st.

This podcast covers six patterns on Browser-Server Dialogue: Call Tracking, Periodic Refresh, Submission Throttling, Explicit Submission, Distributed Events,

Thanks for your feedback since last time. Good, bad, or ugly, it’s all welcome – in the comments for this podcast or [email protected]

Podcast: Ajax Patterns Announcements

Quick announcement podcast (5 minutes):

  • Ajax Patterns podcasts – programming patterns parts 2 and 3 – to be uploaded shortly
  • Book has been published
  • Recent AjaxPatterns.org updates

The Ajax Experience, May, 2006 (SF) Wrapup

Okay, for those watching my live blogging at Ajaxian, you know I’ve just been to San Francisco for the Ajax Experience. San Francisco is always a fine place to be for work or a conference, we’re fortunate it turned out to be such an important place for our industry. I’m back home in London now and now it’s time for a big braindump, where I’ll do everything in my power to forget as many people and events as possible. Wish me luck!

Me, Me, Me: Ajax Design Principles and Patterns Talk

I’ll get the plug out of the way, lest these links get buried in the rest of the text below. You can find the slides to my talk here:

Video and audio should be available at some point. (I’m sure that camera had a purpose.)

If you saw my talk (or you end up catching the audio/video), I’D BE REALLY GRATEFUL FOR ANY FEEDBACK – positive or negative (other than stop shouting at me from your blog) – as comments in this blog or to [email protected] Thanks!

The 90 minute talk covers:

  • How patterns help accelerate Ajax. You’ll still make mistakes, but they’re the ones workth making, not the ones others have already made.
  • Design principles for Ajax. I think people will perceive this as the dominant part of the talk.
  • Intro and overview of the patterns, including Walkthrough of the Ajax tutorial.
  • Ajax Patterns Smackdown. An overview of competing patterns that is at once fun and informative, sharp and objective, fast and comparative, real and subjective. We take a single goal – e.g. “What format do I use to download data” – and we walk through two patterns that achieve it. At the end, I ask the audience who’s using what, the results of which were interesting. I mostly stated them out loud for the sake of the recording, so I should be able to blog this informal poll when the audio’s out.

I got all WebTwo-y and used s5 for the first time. Admittedly, I know a lot more CSS than last time I tried it, which sure helped, but I have to say it worked out really well. Resizing (which you have to do at conferences due to the projector – downscaled to 1024×768) was seamless.

I also appeared on the second night panel, where we had a range of memorable questions. (Video and audio also pending.) There’s no live blog, and I won’t pretend to remember what others said, but here’s a couple of points I recall making.

Asked if Ajax means we’re on the dawn of a new era of enlightenment (or something like that), I explained that if we are, it will take more than Ajax. As it happens, I do believe we are at such an age (though I wasn’t going to go into it there), and I believe that Ajax is one brick in the wall. Can a UI technology cause such a profound change? It seems a bit cringeful, but one point I did make, where I do think Ajax is quite profound, is the ability to collaborate. As an application delivery platform (Douglas Crockford’s term), we can tell 50 people a URL and using technologies like Periodic Refresh (Polling) or HTTP Streaming (Comet), we can rely on most or all of them being able to collaborate together in real time. In contrast, these 50 people would end up fragmented in the desktop environment – they’d be using different OSs, different applications, and be subject to different security controls.

We were also asked the obligatory (at this conference) and very important question on accessibility. My response here was that we really need to reframe the question – people, in my view, are often overly negative about this. How about we take our new, poweful, abilities, and see how we can make things even better than we could in the past. I talked about customisation in my presentation – Ajax makes customisation a lot easier than in the past (compare NetVibes to Excite). Customisation is a seriously important aspect of accessibility. Ergo, in some areas at least, Ajax already gives us the ability to do better than before. (Thankfully I didn’t utter the word “Ergo”. Crikey, I rarely even write it.)

Thanks

The most important thing is to say thanks to Jay, Dion, Ben, Rochelle, Chris, Karsten, and everyone else involved in organising the conference and inviting me along. You guys pulled off a great conference where people were able to get a lot out of it, no matter how Ajaxperienced. Thanks also to all the speakers for educating me on Ajax and certain others for educating me on SF :-).

Meeting People

It was cool to meet so many Ajax people, almost all for the first time in the flesh. Fellow Ajaxians Dion and Ben, who work together so well in various talks and moderation sessions. It was also good to catch up with fellow Ajaxian Rob Sanheim, who I hope does a presentation next time on his Rails and PHP experiences.

Brent Ashley, resplendent in Ajax (football club) tracksuit and cap, with custom-made Javascript-style cleaning ad T-shirt, has a fantastic attitude to the whole movement and offered many insights into its evolution. Remember, this guy was doing remoting in the last century. You know the Java-inspired joke about “Must have 6 years Ajax experience”? Brent and I discussed how the existence of people like him (and probably others at the conference) kind of invalidates it :-). Brent deserves a special mention as he’s the guy who originally promoted Ajax Patterns to the initial Ajax Summit (which oddly enough wasn’t mentioned at the conference) and in his blog.

As just blogged, I briefly met the “father of Ajax”, Jesse James Garrett. His talk was probably interesting to many, but in my case I’ve heard various elements before, so less new info for me. (Indeed I’ve transcribed and blogged about a couple of podcasts he’s appeared on, so I know way too much about this story). One especially cool thing was how he very explicitly made the point, wich will probably be ignored by all the dogmatic pedants out there, that Ajax is not just XMLHttpRequest. These people really should be relying on community conventions to work out what a name means (language evolves BTW, and words can only mean whatever people collectively use them to mean). However, if they retentively insist on idolising the Ajax Guru, at least they might consider listening to what he says in talks like this. It reminds me of the scene in Fight Club where “Jack” (Ed Norton) admonishes the crew – “This guy has a name. His name is Robert Pawson”. The sentiment is lost on the crew, who simply want to be told what to do from their Fight Club Guru and start chanting “His name is Robert Pawson. His name is Robert Pawson.” My point? If you find it so difficult to think for yourself that you must have a Guru, at least follow what he says. (If I seem “emotionally committed” to this point, read the Wikipedia Discussion on Ajax, where you’ll discover any number of AjaxA.J.A.X. authorities who revel in equating the concept with “Here’s what we can do with XMLHttpRequest”.

I also met The Grandmother of Ajax. For real. I’m referring to Jesse James Garrett’s mum, who took a few pics of her son at the end (and presumably during the talk). The “Grandmother of Ajax” label comes from Brent Ashley, who uses colourful language to describe his own role, and that of Adam Bosworth, relative to JJG’s “father”.

I was looking forward to Bill Scott‘s talk on Yahoo’s usability patterns effort all along and he didn’t disappoint (My notes on Bill’s talk). He gave plenty of examples and I especially liked his screencasts. I learned a few things about Yahoo’s approach and also some interesting ways to present pattern material. Whereas I separated out principles from patterns, Bill explained a principle and outlined several related patterns. As Bill mentioned in his talk, he’s spearheading an effort to help people mashup the patterns. I’ve already demo’d a couple of examples of this, using only the AjaxPatterns: The AjaxPatterns Reader and the AjaxPatterns Portal Demo. Bill’s plan is for all of us (Yahoo, AjaxPatterns, and other collections) to expose pattern data as JSON (most likely, JSON-P), so people can combine them how they please. Writing some JS code, you’ll be able to say “Give me the HTML for the solution of Cross-Domain Proxy”.

Alex Russell and Stuart Halloway were two of the speakers I met, both of whom have extremely deep knowledge about this stuff and know how to convey it. In both cases, doing plenty of coding on the fly. I’m more pumped than ever to get into Dojo. I only wish, like others have said, they’d have more doco, as the lack thereof has killed many a worthy open-source project. Already, I think Prototype and Scriptaculous are kicking Dojo’s butt, in terms of developer numbers, and the documentation for them (esp Prototype) isn’t especially abundant anyway. Doco isn’t just important for developers, but also other library manufacturers. Mochikit, for example, takes advantage of Dojo’s packaging structure, and with the right doco in place targeting toolkit authors, the packaging structure has a great chance of becoming a de facto industry standard. This would be a good thing for everyone – the greatest benefit is faster downloads. (In his talk, Alex explained how the basic bootstrapping requires just 5kb of compressed Javascript, so any library could feasibly benefit from this approach, even Prototype/Scriptaculous!).

I met many others, including Andre Charland of E-Business, with whom I’ve communicated with several times via our blogs, and Rob Gonda of iChameleon. Andre was, AFAICT, the only person who attended both conferences I was at – The Ajax Experience and DCamp (another post about DCamp at some point).

I also met many other attendees who I won’t mention here. It was especially cool to meet people from one website which I used in some of the examples for AjaxPatterns. I distinctly remembered some of the things in their source code (trust me, it’s memorable), where it was cool to get the background on.

Some people I never got a chance to meet, hopefully next time. Eric Pascarello and Douglas Crockford, for instance.

And I promised I’d forget to mention lots of people too, so I’d better leave it here as I’d hate to disappoint.

Main Themes

Every conference has special, unplanned, themes.

Just about every session mentioned the importance of using libraries. I blogged earlier on that there are now 134 libraries and frameworks out there. A straw poll in the panel indicated many people are still rolling their own, so the message was a worthy one.

Every panel had the obligatory question on Ajax and accessibility. I already explained my own attitude above. Bill Scott mentioned that Yahoo! has a specialist looking at all their stuff from an accessibility point of view, and I think he also mentioned there’s a Flash specialist taking that into account as well.

With a keynote from Brendan Eich and a panel with himself and Laurel of IE present, browser and JS enhancements were a big part of Day 3. Seeing Brendan talk about what’s coming with JS 2.0, there’s something God-like going on. It’s like this guy’s defining your new powers, your new constraints, the laws of gravity that you’ll be spending every day living under when you develop web apps. That’s the nature of web development – you can play with back-end environments all you want, but at the end of the day, you’re bound to whatever the people at the front of the room decide to give you. And then you sit back and go “it was all a dream” as it suddenly occurs that you’re stuck supporting the current batch of browsers for the next few years, and who knows if IE and others will implement half of this stuff anyway. It was cool to see Stuart Halloway, Alex Russell, and Douglas Crockford up there on the panel with Brendan and Laurel – they provided a good counterpoint as champions for the developers and the tool makers.

Speaking of Douglas Crockford, a few people mentioned his JSONRequest spec, which I blogged a couple of months back on Ajaxian. This is gaining momentum – Brendan is bullish and mentioned that it’s trivial to implement – though Laurel (IE) didn’t say too much. Hey, even if it’s only in Firefox, we’re going to see some cool apps come out of it. The basic idea is a safe cross-domain caller (no cookie transfer).

I’d expected Comet to be a big buzzword at this conference, but it seems most people are still getting to grips with Ajax 1.0. I did, however, come across a new term for Comet/Streaming/Polling- “Reverse Ajax”, which I believe DWR uses among others. Do I like the term? No, because I don’t like the term Ajax to describe just remoting. But I think we’re going to be stuck with it.