CSS, live(), and application state

An idea I ended up thinking a lot about as a result of the application rewrite I just did was managing client-based application state with CSS classes. I’ve been making mental lists, trying to figure out how far you could take it and whether it would be useful. I was thinking there was probably some performance caveat or something, but then I read this post on the relative speed of live() and now I’m thinking maybe it’s something worth exploring more.

Using (what used to be) my application as an example, I can see a few possible states..

  • Edit mode for the object’s owner
  • Display mode for the object’s owner (so, surfacing links to access the edit mode)
  • Display mode for non-owners (no edit links)
  • Live mode (same as above, but possibly with more data about what the object is doing in whatever context it’s been published or released to)
  • Error mode (tracking needed corrections)
  • …?

You couldn’t use switching classes alone to manage those if there were roles certain information had to be hidden from – you’d have to take care of that on the server, obviously. And you’d have to check permissions on any type of update, but presumably you’d be doing that anyway.. For my application it would work fine, though. For certain pieces of the application, I implemented a pared-down version and it’s pretty successful.

What I actually tried was really simple. I just applied a CSS class to a container, causing pieces of the interface to be shown and hidden. Event handlers for those elements were attached with jQuery live(), so that as stuff gets added and removed, its event handlers are already (usually) set up and switching states merely reveals or hides the elements that trigger them.

Examples of WTF changing the “state”/container class actually does..

  • Show/hide edit buttons
  • Change an element’s event handler
  • Enable form elements
  • Change layout to reveal spaces where new elements can be added
  • Hide error messages
  • Disable iframes (I need them – don’t judge)
  • Determine whether areas that contain actions that aren’t automatically surfaced react to hovers
  • Reveal state-specific information

Especially with regard to changing event handlers, I’m assuming jQuery live() was designed with this use case in mind? What I mean is like:

$("div.editable a.editItem").live("click",function() {
$("div.error a.editItem").live("click",function() {
alert("Nice try. Fix whatever you screwed up, then we'll talk.");

I think this is just handy as hell, but every time I try to google information about how other people might be doing the same thing, I come up with nothing. So in the absence of any best practices or warnings, I’m still playing around with it on my own. I think it’s cool.


5 Responses to “CSS, live(), and application state”

  1. 1 slexaxton June 16, 2010 at 6:27 pm

    Hey, I think everything you said you were guessing you were right on is pretty right.

    If you need backup – just reference Paul Irish’s AntiPattern for Performance of the Week in Episode 12 of yayQuery ( http://vimeo.com/9153395 ). (Starts at 21:30)

    Here’s the related jsfiddle example as well: http://jsfiddle.net/75JWK/

    Yay for coming to similar smart conclusions.

  2. 2 garann June 16, 2010 at 8:12 pm

    Nice! I’ll take a look at it when I can get near some decent speakers. I knew there had to be information about this stuff out there somewhere..

  3. 3 garann June 17, 2010 at 2:18 am

    Aha! (Just watched it.) Very cool, glad I’m not crazy. 🙂

    On an semi-related note.. You guys have an excellent fucking podcast. After a fairly crappy day and then watching that, I’m totally cheered up AND my roommate, who knows nothing about jQuery and was only half paying attention, also thought it was hilarious.

  4. 4 slexaxton June 18, 2010 at 4:37 am

    Thanks for the kind words. My girlfriend’s parents watch it, and they like it, so that’s the gauge I use for entertainment value.

    Also, it’s nice seeing good JS devs in town outside of the small group we normally have, so thanks for coming out, again. I look forward to seeing your presentation. 🙂

    Let us know if you want us to talk about anything on yayQuery too, or call the partyline (maybe at one of your work pizza parties?)…

  5. 5 garann June 19, 2010 at 1:29 am

    Ha, that’s awesome! Well, unless your girlfriend’s parents are Javascript developers. Then it’s still awesome but, you know, less surprising.

    Don’t have anything to present or ask your partyline.. Maybe if I keep paying attention I’ll come up with something. 🙂

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

RSS Recent posts on the live version of this blog

  • An error has occurred; the feed is probably down. Try again later.

%d bloggers like this: