Wednesday, April 25, 2012

New Essay: Caret Navigation in Web Applications

For those of you who don't follow me on Twitter, yesterday I announced a new essay: Caret Navigation in Web Applications. There I talk about some of the things that I worked hard to get right when implementing the UI for Google Tasks.

This essay may not be for JavaScript lightweights, though it didn't seem to gain much traction on Hacker News or on Reddit (which is particularly sad because Reddit readers were much of the reason that I took the time to write it in the first place). I suppose it would have been more popular if I had made it a lot shorter, but I believe it would have been much less useful if I did. That's just my style, I guess: Closure: The Definitive Guide was originally projected to be 250-300 pages and it ended up at 550.

I also wanted to take this opportunity to make some more comparisons about Google Tasks vs. Asana that weren't really appropriate for the essay:

  • It's annoying that Asana does not support real hierarchy. Asana has responded to this on Quora, but their response is really about making Asana's life easier, not yours. What I think is really interesting is that if they ever decide to reverse their decision, it will really screw with their keyboard shortcuts since they currently heavily leverage Tab as a modifier, but that may not work so well when users expect Tab to indent (and un-indent).
  • It's pretty subtle, but when you check something off of your list in Google Tasks, there is an animated strikethrough. I did this by creating a timing function that redraws the task with the </s> in an increasing position to achieve the effect. This turned out to be tricky to get right because you want the user to be able to see it (independent of task text length) without it feeling slow for long tasks. Since so many people seem to delight in crossing things off their list, this always seemed like a nice touch in Google Tasks. I don't find crossing things off my list in Asana as satisfying.
  • Maybe I haven't given it enough time yet, but I have a lot of trouble with Asana's equivalent of the details pane. The thing seems to slide over when I don't want it to, or I just want to navigate through my tasks and have the details pane update and it starts bouncing on me...I don't know. Am I alone? In Tasks, it's shift-enter to get in and shift-enter to get out. It's not as sexy since there's no animation, but it's fast, it works, and it doesn't get in my way.

Finally, some friends thought I should include a section in the essay about "what browser vendors can do to help" since clearly the browser does not have the right APIs to make things like Google Tasks easy to implement. As you may imagine, I was getting pretty tired of writing the essay, so I didn't include it, but this is still an important topic. At a minimum, an API to return the current (x, y) position of the cursor as well as one to place it at an (x, y) position would help, though even that is ambiguous since a cursor is generally a line, not a point. It would be interesting to see how other UI toolkits handle this.

Oh, and I should mention that if I were to reimplement Google Tasks again today, I would not implement it the way that I did, if I had enough resources. If you look at Google Docs, you will see that your cursor is not a real cursor, but a blinking <div>. That means that Docs is taking responsibility for turning all of your mouse and keyboard input into formatted text. It eliminates all of the funny stuff with contentEditable by basically rebuilding...well, everything related to text editing in the browser. If I had libraries like that to work with (that already have support for pushing changes down to multiple editors in real time), then I would leverage those instead. Of course, if you don't have code like that available, then that is a pretty serious investment to make. Engineering is all about picking the right tradeoffs!

Want to learn more the technologies used to build Google Tasks? Pick up a copy of my new book, Closure: The Definitive Guide (O'Reilly).


  1. Here's what I've been doing to improve my blog writing skills since I started blogging. My writing might not be brilliant yet but it's getting better and I enjoy the writing process more too. You can't get better than that.

  2. Theoretically, you can find an individual service which will be able to generate a PhD quality composition for you, while you sit back and wait - and, of course figure out how you're going to pay for it. Best Essay Help

  3. Another thing that I feel is very helpful is what I call "free writing." Free writing is just letting yourself go and writing anything that comes into your mind. grammarly cyber monday offers

  4. The Kaweco Student is a high-quality best essays vintage writing tool that will be popular in the future. This fountain pen commemorates Kaweco's beginnings in a modest shop near the University of Heidelberg in Germany in 1883. The pen is available in a variety of colors with chrome accents.

  5. If you want to avoid essay problems, buy a literature review from a specialized literature review writing service. The fact is that the literature review section is more complicated than it might seem. It should provide information about the key points of the discussion, backed up by reliable and trustworthy sources, point out how recent thoughts on specific issues have changed, how previous research confirms the new position, etc. It’s good that this can be helped

  6. Checked out the latest on Caret Navigation in Web Applications? It's like deciphering a new language, but once you get it, it's super cool. Funny enough, while trying to wrap my head around it, I wondered if it might be easier to just buy university coursework. But where's the fun in that? Always something new to learn!

  7. What a generous move! Offering Appendix B of your book for free online is a fantastic way to provide readers with a glimpse into your work. This not only fosters engagement but also showcases your commitment to sharing valuable content. I appreciate the opportunity to explore a part of your book freely. My search for "do my assignment" led me to the greatest assignment assistant. I truly enjoy the highly educational books and articles that this service offers.