This post is all about explaining some of the thought processes that went into the bookmarklet for jqLSAdmin, the jQuery Local Storage Admin. It’s my fervent hope that after you read this, you’ll doubt my sanity just slightly less. I can’t possibly hope to eradicate that doubt, but anything which reduces it can only be a good thing. Right?
So, this whole project got started (as I think I’ve noted before) by seeing a tweet from Steve Souders(@souders) (of Even Faster Web Sites fame (seriously, if you haven’t read it, go buy it (omg inception!))) asking if there was a bookmarklet out there for administering localStorage. I’d been wanting to write a bookmarklet for some time but just hadn’t gotten around to it. I had also been meaning to research localStorage for a while, ever since I started reading up on AmplifyJS. Realizing that if Mr. Souders hadn’t found a bookmarklet out there for this, there was a pretty good chance that there really wasn’t one. So, feeling motivated, I decided to plug this particular hole in the intarwebz with some of my code.
There were a number of online resources which I wandered through for the purposes of researching localStorage, and the ones that were ultimately the most helpful were here, here, and here.
I knew I needed to make some decisions from the very beginning. The first and the most obvious was that I was going to have to be doing a lot of DOM manipulation if I wanted to make it both viewable and editable. I also knew that I wanted to do a lot of ‘edit-in-place’. A next generation of this will probably take advantage of the ‘contenteditable’ property in HTML5, but I started off old-fashioned for this iteration. So, I decided that I’d do inline editing, replacing the content with input boxes when I needed to edit.
Additionally, I knew that since it was going to be a bookmarklet, that meant everything had to be inline. So, graphics weren’t going to be something I could include unless I did a base-64 thing, and I didn’t want to get into that. And why should I when there are lots of other ways to get what you want from text and HTML entities? So I made a couple of UI/UX decisions. To start with, I would need symbols for Edit, Save, and Delete. Delete was easy, as I can use a universally-recognized bid red X. To make it just a bit more ‘bold’ and spectacular, I decided to use the HTML entity for multiplication, ×.
Now, edit is another way of saying ‘change’ right? And another way of describing a change (particularly if you speak too much business language or do too much mathematics) is delta. And delta is a Greek letter. And there are HTML entities for all of the Greek letters. So, why not use Δ for that? Plus, since it kind of resembles an arrow, it will probably make sense that someone will click on it. Now the big challenge is, what to use for ‘Save’? Well, what’s the opposite of delta? Not finding any quick answers, I just decided to go visually, and use the visual inversion of the letter delta, the anadelta, or nabla, ∇.
With my iconography handled, I figured I would sketch out roughly what it would look like. As I’m presenting associated data (it’s all key/value pairs in localStorage), let’s use a