A while back I found a nice snippet of code that allows you to turn your browser into a quick note taking tool. Just create a bookmark with the following code and you can quickly open a new tab and start typing.
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:Helvetica;line-height:1.4;max-width:160rem;margin:0 auto;padding:3rem;">
On occasion, when our Scrum leader was on vacation, I would end up running the morning stand up meetings. I wanted to take notes but didn’t want to bother writing out the state of 10 coworkers status, so I used my browser notes to type down quick reminders of what everyone was doing. (Ticket numbers, requests for help, blocking issues, etc.) That way in the rare occasion when the boss would ask for an update or I would need a reminder to get something done for someone, the information would be there–unless I accidentally refreshed my browser, or restarted the browser or rebooted the machine…
I’ve been wanting to experiment with client-side storage technique and decided to solve my note taking problem with IndexedDB. My first attempt at getting sticky data on the browser was using Web SQL, before I realized that it wasn’t a universally adopted browser feature. I won’t go into explaining IndexedDB as there are many good tutorials out there. This being the one I used. Here were the requirements for my little project:
- Must be only one file and require no web server
- Has to keep track of one days worth of notes
- Must be able to update only one entry
- Allow me to never take my hands off the key board while updating
The DB structure is simple, there is one object store called
attendee and a cursor,
order, to maintain the position of each entry after the browser is refreshed. There is one key-binding that works based on where you are in the list. If you are at the bottom and press enter it will create a new entry but if you are not on the last line of text it will jump to the next entry and highlight the value/status. If you add the Shift as a modifier it will go in the reverse direction. Check out this gif example.
If you’re paying close attention you can see the browser being refreshed and the data not going anywhere. Also, the order is maintained. Before I added the
cursor and the
order column, it would order in some alphabetic way. You can check out the code on my gist. You’ll notice it’s not feature complete. It would be nice if there were a way to delete or reorder entries.