Web

Self-hosted HTML5 Notepad App With Synchronization

#

Update: On February 12, 2012 I released an updated version of this app with new UI, support for Markdown syntax (incl. editor) and a few bug fixes. Please see the project page for more screenshots and downloads.

Ever since the days of Google Gears which enabled local storage and offline syncing for online applications such as Google Reader and Docs, I have always wished for a very simple and instantly accesible notepad application that I could host on my server and use also without an internet connection. A place where I could instantly write down an idea or paste a link or a quote from an article.

Google Docs and Evernote is great but they have way more features than I would normally use. WordPress is fine, but it takes several steps to get to the actual writing, and you must be connected to the internet to use it.

The Solution

Now that we have HTML5 with support for localStorage and offline apps in all of the modern browsers, it seems to be the perfect solution. All that is needed is a little PHP script that synchronizes the content of localStorage with the server. Here is how it looks:

HTML5 Notepad lists all notes

HTML5 Notepad version 2012

Version 0.1 of HTML5 Notepad with Sync

You have your files on the left and a very big plain text editor on the right.

How Does it Work

The app consists of the following:

  • One HTML file with enabled offline access (cache manifest).
  • jQuery for all the Javascript and AJAX magic.
  • One PHP file with HTTP authentication for syncing with the server.

The files are stored in browser’s localStorage as key/value pairs with unique timestamp IDs as key and JSON formated content as value. An index of all files and their version timestamps is kept and used for synchronization during which all the content of localStorage is sent to sync.php in a POST request. The server reads its own index file and determines which new or edited entries need to be stored and which returned to the browser. All entries are stored on the server as JSON strings in simple text files.

Demo, Download and Installation

Please visit the project page of the HTML5 Notepad App. There is also a sample Chrome app.

Regarding the ‘Like’ Button

#

You can like something and there is nothing you have to do about it. It is an effortless act and there are no explanations required or expected. And people actually don’t care for what you like. They are interested in what you care for, because caring isn’t pointless, it means you take a stand.

Web Infinity

#

Web has that enormous feeling of infinity — every word and though never lost or erased once it’s up there on the web. Incredible, isn’t it, that feeling of never loosing something you hold dear.

Twitter’s Success

#

Twitter’s success is people discovering the excitement of publishing.

The 140 character limit and the overall simplicity is exactly what attracts even those who didn’t think they had thoughts and ideas worth publishing. The rest of it is just a stripped down e-mail functionality.

OpenID SeatBelt plugin for Firefox

#

Using phpMyID with SeatBelt plugin for Firefox With OpenID SeatBelt plugin (developed by VeriSign) you can now manage your OpenID identities and delegations right inside Firefox. This plugin automatically fills-in OpenID input fields on websites and blogs that support OpenID authentication. It also enables fast identity provider (IdP) switching and protects against OpenID phishing attempts.

In one of the future posts I will explain how to add a SeatBelt configuration file to phpMyID single indentity provider software so that it can be used with your privately installed OpenID.