Speech to text in html5 is only supported by chrome, it works kinda. The idea was to have quick way to copy passages and make notes while reading. Visit the Journal Page of my Traveloggia responsive web version and try it out.
Using bootstrap rather than jquery mobile as on the Map Page

About the stack

jquery mobile

The project started as a responsive website implementation of my original silverlight project Traveloggia and windows phone app. Intended partly as a tutorial, working example of a jquery mobile SPA ( single page application ).

I used css3 media queries to hide and show panels based on the original layout, that wouldn’t fit on a small screen. I used jquery mobile ThemeRoller to incorporate the original color scheme.

asp.net MVC4 WebApi

I implemented REST web services using asp.net MVC4 WebApi, built on top of EntityFramework and MS SqlServer. I configured the services to return data in json format.

knockout

Fully brainwashed by my silverlight past I wouldn’t dream of building a data driven app without a view model and spoiled by the brilliance of Microsoft developer tools, I fully expect someone or something to automatically update my databound ui elements.
Fortunately there is knockout, the scripters INotifyPropertyChanged

CORS

In order to completely de-couple the services I hosted them in a separate domain as a working example of CORS ( cross origin resource sharing ) which is the newer than jsonp way to make an ajax request to another domain. The very latest version of the .net framework .net 4.5.1 allows config.EnableCors() after using Package Manager to install the dll. VS2013 required. The exact command from the PM console is: PM> Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.0.0 ( note there is a newer article by Mike Wasson, with instructions that don’t work ). Sadly my hosting provider was too sexist to upgrade the server to 4.5.1, but I was able to enable CORS anyway, by specifying custom headers in web config, which is, under the covers how it works.

html5 speech to text

html5 speech recognition can be implemented either declaritively using a html tag like so:
<input id=”speechDetector” type=”text” /> ( this editor is not letting me type x-webkit-speech )

or programmaticaly in javascript like so:
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;

The latter method is preferable because you can change the default and set continuous to true, so the detection continues after any pauses and results are appended. Some kind of feature support detection is mandatory because only webkit browsers support this feature of html5 at this time.

Knowing the results would need to be edited I incorporated what looks like the best (only) javascript wysiwyg editor,
WHAT YOU SEE IS HTML5 or wysihtml5

bootstrap

I wanted to compare bootstrap with jquery mobile and found the bootstrap responsive grid system and menu component useful, but the two frameworks are mutually exclusive, and bootstrap lacks a navigation system to simulate separate pages in a spa. So its not a spa any more.

html5 local storage

Faced with having to somehow share state between what was now two pages of html I turned to html5 local storage
I chose to cache the entire database graph. Html5 storage works only with strings so it was nescessary to use JSON.stingify to convert the associative json arrays. WARNING: ie throws errors when using JSON.parse to restore the arrays. Chrome did not.