The JavaScript blog.


APIs storage indexeddb

Query IndexedDB Like MongoDB

Posted on .

Kent Safranski sent in Indexed, a library that wraps around IndexedDB with a friendly MongoDB-inspired API.

You can insert objects like this:

  name: 'John Doe'
  email: 'jdoe@email.com'
}, function(err, data) {
  if (err) {
  } else {

And fetch them again with find:

  _id: 28972387982
}, function(err, data) {

You can even use MongoDB-style operators:

  someNumber: { $gt : 25 }
}, function(err, data) {

You'll probably like this if you work with databases in Node. It's actually part of a larger project called Riggr, a framework based around RequireJS, Knockout and jQuery. Although I think indexed.js is cool enough that it should be a separate module, rather than being bundled in with Riggr.

Kent wrote a detailed blog post about indexed.js here: Indexed: Query IndexedDB Like Mongo.


speech github storage chrome api

Speech Router, Botdylan, Google Cloud Storage

Posted on .

Speech Router

Speech Router (GitHub: lukasolson / speech-router, License: MIT) is a router that wraps around Chrome's Web Speech API. It's based around a constructor function that accepts a routes object:

new SpeechRouter({  
  routes: {
    'search google for *query': function(query) {
      window.open('https://google.com/search?q=' + query);

If you haven't seen the Web Speech API before, it's worth checking out. At least the results seem quite good with my accent and Chrome -- your mileage may vary!


Botdylan (GitHub: botdylan / botdylan, License: MIT) by Pau Ramon is a Hubot-inspired GitHub automation system:

We use GitHub heavily. There are some repetitive tasks that were taking away our time to hack on a better product. Since we are in the productivity space we decided to stop doing things manually and start to have a more productive environment to work with.

It can do things like add labels to issues based on events, integrate with a CI server, talk to chat rooms, and so on. It runs as a daemon, and can execute tasks periodically in the background.

Google Cloud Storage

Google Cloud Storage, sent in by Jonathan Simon, is a screencast that demonstrates a JavaScript application that talks to Google's Cloud Storage platform. The source code is here: storage-getting-started-javascript.

This demonstration covers getting started with Google Cloud Storage using JavaScript. See the process of setting up the sample application, running the sample and using it to try out Cloud Storage API commands like 'list buckets'.


jquery graphics plugins storage iOS encryption

jQuery Roundup: Instagram jQuery Plugin, jQuery.handleStorage, Morse.js

Posted on .

Instagram jQuery Plugin

Instagram jQuery plugin (GitHub: potomak / jquery-instagram) by
Giovanni Cappellotto uses the instagr.am API to
show a list of photos.

You'll need to provide a client ID to use it, but the Instagram API
explains how to do


jQuery.handleStorage (GPL) by Jason Gerfen provides a local storage database with AES support. Jason's example encrypts the data in a form:

$('#myForm').handleStorage({ storage:'cookie', aes:true });

This uses the Gibberish AES
library. It could be used without AES, however, and the plugin will use
local storage (if available), a session, or cookies.

A related commercial product is
1Password which includes a HTML/CSS/JavaScript viewer for encrypted passwords. The 1Password
application itself is for Windows, Mac OS, iOS or Android, but
interestingly their database files include a HTML viewer that can
decrypt saved passwords.

Update: Note that Jason has since replaced this project with secStore.js.


Ampersand by Nicholas Johnson is a small jQuery plugin for using Open Source
. This is a project to
provide high-quality single-character fonts.


Morse.js (GitHub: mattt / Morse.js, MIT License) by Mattt
Thompson transcribes morse code: \$('p').morseCode({ bpm:12


mobile storage data essays

The Future of Mobile Sync

Posted on .

This article is by [Alex Kessinger](http://alexkessinger.net). He works for Yahoo! as an FE, and is currently working on a book about [HTML5 Apps](http://alexkessinger.net/story/i-am-writing-book-real-one) for [Packt](http://www.packtpub.com/). You can also follow him on Twitter: [@voidfiles](http://twitter.com/voidfiles).

The mobile web apps community has been systematically knocking down the
barriers to building apps on web technologies. We have offline data
, offline application
, coming soon we
will have access to devices, and
files, but there is something missing: data sync.

As a web developer, I have always felt that mobile web apps are just
like small web pages. If you think about web apps like that, you can see
how many of our traditional FE methods can be used to build mobile apps.
Data sync is a relatively new requirement for web developers. Yes, we
have had server communication for a long time, in which we could
transfer data, but web pages going offline for long periods of time is

It also doesn't seem like we are going to get any guidance from the
standards bodies. In the Dive Into HTML5, Mark Pilgrim states:

"If your application creates data or saves state, it's up to you to store that data locally while you're offline and synchronize it with the remote server once you're back online. In other words, HTML5 can take your web application offline. What you do once you're there is up to you." (source)

While Pilgrim is not the W3C, he does have input, and was apart of the
process. What it means is that it's up to us the community to figure
this out. I am writing this for a couple of reasons. First, let's get
all the prior work into the open. It's possible somebody somewhere has
figured this out, or there might be a solution that has been overlooked.
Two, there are existing standards that might be used, we should take a
look. Finally, there are a couple of different sync scenarios, and they
might have different solutions we should take a look at a couple.

Libraries, and the greater Internet, might have the information we need,
but I figured that if I couldn't even find anything on the surface that
looked close to a solution then I should ask the community first, it
might save time. I was able to find a couple possible starting points.
These are specific to sync.

These seem to have a largish amount of people behind each project.
SyncML seems to be the most open, which I know is hard word to define,
but they are all lacking something. I know it's an incredibly
un-technical way of assessing an idea, but I don't see hackers using any
of the above I am open to be proven wrong though. I also found a 2 year

to a thing called AtomDB, which was going to be based on the AtomPub
spec, but it's 2 years old.

Are any of the above possible players in mobile web apps? I don't know,
I am partial to saying I don't think so. If there isn't anything out
there we should probably try and define some of the problems that will
need to be solved. I have two scenarios in mind.

The first scenario is like a text based sync. In this scenario the user
has lots of textual data, like a bunch of notes, something similar to
Simplenote. The user goes offline for a while. While offline they make changes to a note, and let's say they
have a shared note with a friend. This friend modifies the same note
while the user is offline. Now, we have two notes with changes that
aren't in sync. The user comes back online, and then what happens? That
is scenario one. I think this one could be handled by some kind of
versioning scheme like git, and svn merge code.

The second one is a buisnessy one. Let's say a traveling sales man is
out selling some widgets. He has a mobile order entry device. He has an
internal copy of the inventory data that stays closely in sync with the
central copy until he goes offline. When he enters his order he is
offline. While he is offline a co-worker in the central office takes a
phone order. They both need to see the rest of the inventory. When the
traveling salesmen comes back online there is now a conflict, but it
can't easily be merged -- there has to be a resolution of some kind.

Mayby both of these problems are incredibly unique to their respective
circumstances. Even if they are unique, there has to be repeatable
patterns that can be used. There must be a way to provide a framework to
handle sync, and either it exists out there, or someone needs to build

I would like to note that Couchio seems to be
trying to fix this problem with CouchDB. They might have more to say,
but they have an interesting model for how web apps could use CouchDB.
For example, on the Android platform CouchDB can run as a service in the
background. Your web app would be able to talk to the local CouchDB
server all the time. When you device is online CouchDB will handle the
data sync to an upstream database.

That would be awesome, but it's not a standard, and it's not everywhere.
Even if they figure out how to get it on to many different devices in
the future it still might take awhile, and I think we need something
sooner then that.

This is a call to action, do we have a problem, is their a solution
already, do we need to build something?


graphics storage

Lawnchair, 91 Icons, Charts

Posted on .

I like to keep Friday informal here on DailyJS, so here is my latest set
of loosely game-development-related links.


    .____                                 .__            .__         
    |    |   _____  __  _  ______   ____  |  |__ _____   |__|_______ 
    |    |   \__  \ \ \/ \/ /    \_/ ___\ |  |  \\__  \  |  |\_  __ \
    |    |___ / __ \_\     /   |  \  \___ |   Y  \/ __ \_|  | |  | \/
    |_______ (____  / \/\_/|___|  /\___  >|___|  (____  /|__| |__|   
            \/    \/ Lawnchair! \/     \/      \/     \/             

I keep mentioning HTML5 storage solutions in our "useful game-related
junk" posts because sophisticated games are much more palatable when
they take advantage of local storage.
Lawnchair is an interesting project -- it's like a very simple ORM library that relies on JSON.

It supports iteration and has several ways of iterating over


// Classic with terse shorthand syntax

// Iterate documents conditionally! 
// The first function is a conditional. The second is a callback to execute on records returned by the first
    function(r) {
        return r.name == brian;
    function(r) {

91 Icons

I really like these SVG icons by the Raphael author: 91
. Click an icon to see the path
string used to generate the vector.

Campaign Monitor's New Charts

Campaign Monitor have dropped Flash for charts and switched to a
JavaScript solution. What's cool about this is they've written up a blog
post explaining how they did it: Say goodbye to Flash with our all new

They've used the Highcarts library and
added touch support so devices like the iPad will work with events