SimplyWrite, a free web distraction writing tool based on IndexedDB

SimplyWrite is a free web distraction writing tool. It is based in the IndexedDB HTML5 so you need a browser compliant. Because the use of IndexedDB all the content is stored locally on your machine, no data is transferred or stored in a remote server.

There are many other solutions, like WriteRoomOmmWriter or FocusWritter, but SimplyWrite benefits from the fact it is a web tool clone.

You can download the source from github.

Please take a look and let me know your suggestions.

For the moment SimplyWrite has only been tested on Chromium 9 because the requirement of a IndexedDB browser implementarion.

Beyond the amazing announce

All right, SimplyWrite is awesome and this announce will change the world but… the truth is all these is because I need a target to work with IndexedDB.

HTML5 is out since a long time (almost a year is like 100 hundreds at internet) and it comes will lot of new features browser will implement in successive releases (at least I hope it).

Client-Side Storage

HTML5 comes with different solutions for client-side storage: WebStorage, Web SQL Database and IndexedDB.

At this moment one of the main issues is HTML5 is great specification but big and complex to implement by browsers. Because this you need to check if a desired feature is supported/implemented by the browser you are going to use.

As a summary, WebStorage is a key-value mechanism, WebSQLDatabase is, unfortunately, a not really good idea (because this it was abandoned), and finally IndexedDB can be understood as a perfect mix between WebStorage and WebSQLDatabase.

WebSQLDatabase, like Google Gears, was mainly though around SQLite, because this many HTML5 implementations were based too on SQLite, inheriting its limitations too. Mozilla never agree with WebDatabase standard and because this never implement it on their bowser. They prefer to work in the IndexedDB.

An important consideration is IndexedDB defines two “working modes”: asynchronous and synchronous, but at this moment only asynchronous seems to be supported.

Working with IndexedDB

Here are pieces of source code for the common action.

Getting reference to IndexedDB

To work with IndexedDB you need to get a reference. Currently there is no common way to achieve it. On Chromium you need to access to window.webkitIndexedDB while on Firefox you need to use window.mozIndexedDB.

Creating/Opening the database

Once you have access to IndexedDB reference the next step is create or open the database:

Every command is executed asynchronously and generates a request object where you can execute code on events ‘onsuccess’ or ‘onerror’.

Initializing the database for the first time

Using the request object returned by the previous command we execute next code on success:

IndexedDB databases can have different versions. You can use version to initialize the DB for the first time or to update the structure of the database. For example, you have a database with some structure in version 1.0 and want to update it creating a new object store up and increasing the version number to 2.0.

Adding, getting and removing content

At this point we have a database created with one object store, that uses ‘title’ as the key. Now we can add and get content to it.

Basically, we need to create a database transaction, specify the object store to use in the transaction and make the action like add, get or remove.

One important action is to iterate over all the elements in an object store. You can do that using a cursor:

Final words about SimplyWrite

SimplyWrite is written using HTML and JavaScript (of course) and I make use of a couple of other projects. I would like to note the use, in addition to jQuery and jQueryUI, two projects:


Related Posts:

1 Response

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">