Easiest way to add speech recognition to your web site

In continuation with my last article on Chrome’s Web Speech APIs, I stumbled across a much easier way to add speech recognition to a web application or site. “annyang” is a JavaScript library to add voice commands to your site. It makes use of Web Speech APIs only but adds a nice thin layer to make it much more usable. Not to mention, it is super easy to get started.

A tiny JavaScript Speech Recognition library that lets your users control your site with voice commands.


annyang is developed by Tal Ater, same fella who reported how a bug in Chrome could be exploited to listen to users conversations even after user left the site. Incidentally, he discovered this while he was working on annyang itself.

annyang just adds 2 kb to your site, but it makes Web Speech APIs extremely usable. The basic premise here is that it allows developers to add voice commands and action to be taken when a user says those commands on his site/application. Simply include the annyang.js library and start adding commands. The sample below shows all the code you need to show “Hello World!” alert to the user who says “hello” on your site. Awesome, isn’t it?

[sourcecode language=”javascript”]
// Include annyang from a CDN service or from your own server.
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.4.0/annyang.min.js"></script>

// check if speech recognition is supported
if (annyang) {

// Define your commands
var commands = {

‘hello’: function() { alert(‘Hello World!!!’); }


// Use addCommands API to add commands to annyang

// Start listening. You call this right here or do it later on some event like button click


Apart from one-word commands as shown above, annyang supports more complex commands which allow commands with named variables, splats or optional words.

Named variable is a single word variable, which can be added anywhere in the command text. For e.g. ‘show :month articles’

[sourcecode language=”javascript”]
var commands = {

// saying ‘show December articles’ will call ‘showArticles’ function with ‘December’ as a parameter

‘show :month articles’: showArticles,


var showArticles = function(month) {
// Code to open articles for said ‘month’


A splat will capture anything after * and make it available to your function.

[sourcecode language=”javascript”]
var commands = {

// saying ‘search chrome bookmarks’ will call ‘performSearch’ function with ‘chrome bookmarks’ as parameter

‘search *term’: performSearch,


var performSearch = function(term) {
// Code to perform a search for the said ‘term’

You may also include optional words in your command. For e.g. a command ‘show (open) :month articles‘ will respond to both ‘show December articles‘ or ‘open December articles‘. Just include your optional words in brackets and you’re good to go.

The library will work with browsers that support SpeechRecognition (only Chrome as of now) and leave all other users unaffected.

Do checkout this nice video of a todo application built using Angular JS and annyang.

Quick Tip

If you are developing locally (over HTTP) and troubled by repeated permission asked by Chrome  to use the microphone, you should consider switching to HTTPS. Not only that HTTPS returns speech results faster, but also enhances user experience along with added security. For your testing purpose, it is easy to securely expose your localhost to the internet using awesome tools like ngrok.

Add Speech Recognition and Synthesis to your web apps with Web Speech API

Recently for a Hackathon event, I was toying with the idea to implement a Voice Assistant on the lines of Siri, Google Now or Cortana for one of our popular web applications. So the basic things needed were Speech Recognition and Speech Synthesis i.e. an engine to help with conversion of Speech To Text and Text To Speech.

I knew that Google Chrome introduced an HTML attribute called x-webkit-speech in 2011. The attribute would work with the input tag and will show up as shown below. It was deprecated soon due to the flexibility and control issues (along with the much widely reported security loophole which will allow eavesdropping website to abuse it by listening to users without consent or any indication) and replaced it with Web Speech APIs.

x-webkit-speech in action
Web Speech API

Web Speech API’s are easy to use and one can create wonderful interactive experiences with it.


On the flip side, it’s available as experimental implementation only on Chrome. But looking at the Chrome’s growing popularity, you won’t be out of place if you decide to offer it as an additional feature or user input for your web application or blog. Web Speech API offers Speech Recognition (Speech To Text or STT) interface as well as Speech Synthesis (Text To Speech or TTS) interface.

Web Speech APIs were obviously designed to eliminate drawbacks of an earlier approach by allowing complete control and flexibility via JavaScript. Apart from the permission to use the microphone which is handled by the browser (rightly so), the developer has 100% control and flexibility. Below is the slide from Google Developers presentation which highlights the features offered. I would recommend going through the complete presentation for details and explore more with the examples and downloads provided.

Slide from Google Developers Presentation
Slide from Google Developers Presentation

You may also download an easy to follow code lab from Google Developers and learn how to add it to your web application.

It is important to note that you will need access to a web server to host files to. The Web Speech API only works for files served via https:// or http:// and not file:///. You may host your web page with Google Drive or Dropbox for quick testing. Also, if you run it over SSL or https:// the permission will be persistent and user won’t have to grant/deny every-time. That is why it is advisable to host such applications over SSL for a better user experience. If you are wondering where exactly Chrome stores permission for this, you can use this quick URL chrome://settings/contentExceptions#media-stream to view/alter existing permissions.

Web Speech is not 100% accurate, although it worked reasonably well for me during my experiments with it. And it is only going to improve.

Quickest way to jump to desired Chrome Settings

There are various ways to go to a Chrome settings page. You can use the Chrome menu and select the Settings submenu. You may also type chrome://settings/ in the Chrome address bar or omnibox which will take you directly to the Chrome Settings page. However, we can do better. We can add chrome setting page URL to search engines and jump to desired setting rather quickly.

  • Type chrome://settings/searchEngines in the address bar.
  • Scroll down to “Other search engines” and add a new search engine.
  • Enter “Chrome Settings” as a name for your search engine or whatever you would like to call it, “set” as the keyword you’ll type for activating search (again your choice) and URL as chrome://settings/search#%s
  • That will be all!

Enter your keyword “set”, hit the TAB key and enter the keyword for the setting you are looking for. This will automatically open your chrome settings page, with only the matching setting options displayed and highlighted. This is especially useful if the option you are looking for is buried somewhere under advanced settings.

Quickest way to jump to Chrome Settings
Quickest way to jump to Chrome Settings
Chrome URLs

You may also use Chrome URLS to directly jump to some important settings. I have listed some of the most useful ones that you can directly type or bookmark. This will surely save you a few clicks right away.

URLs for Chrome Settings
URL Details
chrome://settings/ Go to Chrome Settings page directly.
chrome://settings/searchEngines Manage Chrome search engines to be used from omnibox.
chrome://settings/createProfile Add new user to Chrome.
chrome://settings/importData Import bookmarks, history and other data saved in other browsers.
chrome://settings/content Manage Chrome content settings.
chrome://settings/cookies Manage cookies and site data.
chrome://settings/clearBrowserData Clear your browsing data in Chrome.
chrome://settings/autofill Manage auto fill settings.
chrome://settings/autofillEditAddress Add new address to chrome auto fill.
chrome://settings/autofillEditCreditCard Add new credit card to chrome auto fill.
chrome://settings/fonts Manage font and related settings.
chrome://settings/languages Manage language and input settings.
chrome://settings/editDictionary Add/Remove words to chrome dictionary.
chrome://settings/syncSetup Manage advance sync settings for Chrome when you are logged in.

Dewey Bookmarks : The bookmarks manager for Chrome you have been waiting for

Few days back I wrote about how you can easily search your bookmarks from Chrome omnibox. But this approach is still limited by Chrome’s Bookmark Manager. In my quest to look for an even better solution, I found Dewey. Apart from clean and elegant interface, it provides some powerful search capabilities. This could be really useful when you deal with large number of bookmarks.

Dewey. Better Bookmarks for Google Chrome.

Launching Dewey

Before we dig deeper into Dewey, I need to state that it’s a Chrome App and NOT an Extension. The reason I stated this is that after installing the app, I kept wondering how to launch it. I didn’t see any launch button in the toolbar which is very common with Chrome extensions. Chrome no more shows Apps in the New Tab Page. Therefore, it was a bit puzzling to start with but there are a number of ways to launch it.

Once you launch it, it will load a neat and pleasant interface with a big search box and a page full of bookmark tiles. As you scroll, it will keep loading remaining bookmarks smoothly. You can sort your bookmarks by Date, Title and URL. I wish they add sort by usage frequency and make it default so that it can easily replace my New Tab Page.

Custom Tagging
Dewey - Bookmark Tile
Dewey – Bookmark Tile

The above picture shows the single tile for a bookmark as displayed by Dewey. As you can see, along with an icon and title, it displays folders under which the bookmark is stored. By default it converts all the folders into tags (the ones highlighted in yellow) for a bookmark. You also get an option to exclude/hide top-level folders (Bookmarks bar, Other bookmarks, etc.) as they do not make sense in most cases. You may also add custom tags if you want. All the tags will be stored and synced, so once created it will be available on all your machines if you’re signed into to Chrome.

Edit Bookmark

The edit icon which appears on mouse over, will allow you to edit bookmark title, url, add/remove tags or delete the bookmark altogether. Currently it does not allow you to modify the folder structure through this dialog.

Dewey - Edit Bookmark
Dewey – Edit Bookmark
Powerful Search

Coming back to search, you can start with a simple free text search. But if you need to dig, you have 3 options. You can search by tag, title or url. So if you chose to search by tag, e.g. tag:color, it will look for “color” only in tags and exclude all others. The same is true for search by title and url. Take a look at the demo below and you will understand exactly what I mean.

Dewey - Exclusion Search
Dewey – Exclusion Search
Open Source

It is an open source project and source code is available on GitHub if you want to take a look. You may also submit issues and feature requests there.


Great interface supported by keyboard navigation, ability to add custom tags which also sync across and exclusion search are the three important aspects which make this a great app. Highly recommended!

Search your Chrome bookmarks and history easily from omnibox

If you look at my previous posts, you will see that I am in love with Chrome omnibox and search engines. I keep exploring how these two can work together to do some routine things in a more productive manner. This useful tip will enable you to search your bookmarks and history easily from Chrome address bar itself.

By default when you start typing in the Chrome address bar, it does show your bookmarks as suggestions indicated by entries with a cbmicon. However, it only lists the top two or three bookmarks. Sometimes you need to dig deeper and perform a search in your Bookmarks Manager. Recently, I stumbled upon something really useful. You can easily configure your Chrome to search for your bookmarks directly from omnibox or address bar. In-fact, there is an extension which does that for you. Head over to the Chrome Web Store and install Bookmark Search. This extension basically performs steps mentioned below automatically and adds a new search engine entry for you.

However, if you do not want to burden your Chrome with extensions, you really do not need to. Alternatively, you can follow these simple steps:

  • Type chrome://settings/searchEngines in the address bar.
  • Alternatively, you may right click on the Chrome address bar and choose Edit Search Engine… from the menu options.
  • Either of the above steps will open the settings page for Search Engines in Chrome.
  • Scroll down to “Other search engines” and add a new search engine.
  • Enter “Chrome Bookmarks Search” as a name for your search engine or whatever you would like to call it, “bm” as the keyword you’ll type for activating search (again your choice) and URL as chrome://bookmarks/#q=%s
  • All set!

Enter your keyword “bm”, hit the TAB key and enter your search term. This will automatically open your chrome Bookmark Manager with the search result.

Easily Search Chrome Bookmarks from Omnibox
Easily Search Chrome Bookmarks from Omnibox

You can use this trick to easily search for your history as well. Just add another entry with following URL.

History & Bookmark Search Engines in Chrome
History & Bookmark Search Engines in Chrome

Best ways to visualize time zones in your browser

For my work, I get to be a part of one big virtual team. Naturally, I need to deal with different time zones and keep those at finger tips. Nowadays this is very common and I’m sure most of you fall into this category. As we started living more and more in browsers, we need good tools to take care of time zones. Today I am going to show you two web sites that do a great job in simplifying this time zone math.

1. Every Time Zone

Never wrap your brain with time zone math again.

Every Time Zone

Every Time Zone is my current favorite due to its slick design and simple interface. The site conveys a lot through colors. When you visit the site, it shows you one vertical line indicating your current time. You can click somewhere else on the timeline to see various zone timings for a given local time. Simple and beautiful. One small glitch is that there is no way to select a future date which some of you may find limiting while looking to schedule a meeting for a future date. A link to this page anchor on top right allows you to get a direct link to the current view and share it with others. Do check it out, I’m sure you will love it.

Every Time Zone
Every Time Zone
2. World Time Buddy

World Time Buddy and is a simple, elegant and perhaps the most comprehensive time converter and world clock. I have been using it actively for a while and it is part of my Chrome apps for a long time now. It is loaded with features, which amazingly do not add to the complexity. You can add, remove, sort and reorder locations. It detects your location by default, but you can mark any other location as home too. You may also rename locations if you are signed in and group locations by tabs, which is offered as a premium feature. You can use it as a full fledge scheduling tool as it allows export options to Outlook, Google Calendar etc. It also allows you to create an event page and share with others. Just like Every Time Zone, you may also share a link to your view with others. Country specific weekends highlighting and daylight savings warning (a week before the change) is really useful. It is really a complete tool for your scheduling needs.

They also offer a couple of useful widgets for clock and events, which you can embed in your web sites. World Time Buddy is also available as iOS and Android mobile app on App Store and Google Play Store.

World Time Buddy
World Time Buddy

Other than these two, there are several extensions available for Chrome and Firefox. FoxClocks is one popular extension for Firefox also available for Chrome now. It is very comprehensive and shows selected zone times in your browser’s status bar. Some low on memory Chromebook users do complain about memory consumed by this extension. In that case you may turn it on only when required using one click extensions manager for Chrome.

How do you take care of your time zones? Please let me know if I missed something which should be part of this small list.

An awesome tool called LMGTFY or Let Me Google That For You

LMGTFY is an abbreviation for Let Me Google That For You. A few years back some cool guys launched a service called lmgtfy.com with a thought.

LMGTFY is for all those people who find it more convenient to bother you with their question rather than google it for themselves.


The idea is simple but fun. If someone asks you a question and you want to answer in a fun way but also letting them know that they should have just Google it themselves. Head over to lmgtfy.com and type your search query and click on Google Search or I’m Feeling Lucky button. Instead of the results page you get a link with an option to copy, shorten or preview it. The preview will show you what exactly the people with whom you will share the link will see. It plays a short demo showing the query text typed into the search box automatically and button you chose to press during link creation is pressed. Next you are taken to actual Google search result page. Along with a basic Google search the service also supports other vertical searches like Image, Video, Maps and many more. They also launched support for Wikipedia last year.

Let Me Google That For You
Let Me Google That For You
Use LMGTFY to educate others

Since its launch, then, many people started using it for this very purpose. You find lmgtfy links on many discussion threads. Apart from this, I believe this awesome service can be used for educational purpose as well. The web is filled with many hacks about how to use Google search efficiently. However, most people still use it in its basic and simplest form, i.e. to type questions or keywords into the search box. Below are examples of my top 5 favorite Google search tips explained using lmgtfy.

Let me know what would you do with this service?

Easy alternative to broken Google search set timer feature

Last year, Google introduced a feature to set the timer using search box just by typing something like “set timer for 5 minutes”. I personally found it very useful and started using it. But after some days it stopped working. Since then its being ON and OFF. It works for me on google.co.in but it does not work for me on google.com. Anyway, while many are waiting for this to work again, you can use this simple alternative to get your clock ticking.

Set timer using Google Search
Set timer using Google Search
Easy alternative to broken Google search set timer feature

e.ggtimer.com is a simple and useful service for the timer. However, what makes it really useful is the fact that it allows you to set the timer through URL parameters. So, if you type a URL like http://e.ggtimer.com/5minutes will set the timer for 5 minutes. But we can do better.

Let us make this easier and more efficient by adding it as a search engine.

  • Type chrome://settings/searchEngines in Chrome address bar OR right click in Chrome address bar and select Edit search engines…
  • Scroll up to “Other search engines” and add a new search engine.
  • Enter To Set Timer For as the name of your search engine, timer as keyword (or any unique keyword of your choice) and URL as http://e.ggtimer.com/%s
  • Press ENTER and click Done.
Add e.ggtimer.com as search engine
Add e.ggtimer.com as search engine

Now, go to your Chrome address bar, enter your keyword “timer”, hit the TAB key and enter time value e.g. 5minutes or 20seconds or 1hour5minute30second. If you just enter a number say, 20, it will default to seconds. It also displays the timer count down on the tab title which makes it much more useful. Once the time is up, it beeps and pops up a message.

e.ggtimer.com search engine in action
e.ggtimer.com search engine in action

The service also offers some more fun and interesting timers. For e.g. instead of any time value, if you just use pomodoro, it will open a preset timer of 25 minutes with short breaks and long breaks as described in the Pomodoro Technique. Quite a useful timer if you follow this technique for your tasks. There are also fun presets like morning to get your blood pumping and brushteeth, a 2 minute timer for healthy teeth. If you are into fitness and follow tabata, there is a timer called tabata too.

You can make it work easily for Firefox by the techniques described in my earlier post.

Reduce memory consumption easily with chrome extension managers

We all know that Chrome is a great browser. This is exactly why many a times we expect more out of it. If the browser itself does not fulfill the need, we try to find extensions. It’s very easy to overload your Chrome with all these useful extensions. But eventually this takes a toll on your computer memory and things slow down. This is why we need to manage these extensions carefully.

The need for the extension manager is especially critical on Chromebooks, as one does not have loads of memory to play with.


Thankfully, this is very easy. If you are ready to spend next 15 minutes (5 minutes for reading this post + 10 minutes for a one-time setup), you would never have to worry about it again. Read on…

Adding another extension to manage extensions may sound counter productive, but it is not. Extensions Manager (aka Switcher) and SimpleExtManager are two little gems which really make this easy. Extensions Manager is my favorite of the two simply because I find it more usable (more on that later). But SimpleExtManager is definitely not far behind and you should definitely try both and see which one suits you the best.

Extensions Manager - Chrome
Extensions Manager – Chrome
One Click – Enable/Disable/Uninstall

Both these extensions offer basic essential capabilities very well. Both add an icon to Chrome toolbar which, when clicked, will display a list of all extensions, applications and themes you are using. Extensions Manager nicely categorizes these by different views or tabs like All, Extensions, Applications, Themes, Enabled, Disabled and Recent. SimpleExtManager shows a single vertical list with categories like Extensions, Applications and Themes as separators. You can enable, disable and uninstall individual extensions right from here just by one click. You can also go to the options page of a given extension if there is one.


Both Extensions Manager and SimpleExtManager also provide search/filter capabilities that is useful in case you deal with large number of extensions like me. Just type first few characters and it will start filtering the list immediately.


UNDO capability is provided only by Extensions Manager and it could be very useful if you unintentionally or accidentally click on something.


Another important feature which both these offer and where Extensions Manager scores for me is grouping. Simply start dragging individual extensions from the list and drop it on the flashing New Group tab on the top / title bar. Once your drop is complete, just double click on the tab to rename it. Groupings not only keep your extensions organized, but also allow you to turn ON or turn OFF entire group of extensions together. I organize my extension broadly as follows. I have one’s which I use all the time, so I call those Alltime. Another group is called Web Design which contains handy utilities like Eye Dropper, WhatFont, Resolution Test etc. that I use only when I’m working on my site. Similarly, I have groups called Blogging, Social and Utilities. I turn ON only the individual groups when I’m doing a particular task.

In order to toggle a group ON or OFF, just select the group you want to work with and select Switch ON or Switch Off button.

Additionally, it also shows a thin red line below group heading which is called Group Statistics Meter indicating the amount of active extensions in that group. It also shows the stats in a tool-tip for completeness.

If you want to remove the extension from the group or remove entire group, just drag and drop it outside the window. This will not remove the extension or all the extension in a group from the Chrome as expected. This is simple group manipulation.

For SimpleExtManager, you need to go to options pages in order to create, edit or delete groups.

SimpleExtManager - Chrome
SimpleExtManager – Chrome
Sync Configuration

Developer behind the Extensions Manager is said to be working on feature which will allow automatic syncing of configurations across devices. Currently it offers a way to export and import configurations to keep your Chrome on different devices in sync. SimpleExtManager does not offer any way to do this at this point of time.


SimpleExtManager seems to more actively developed (last updated in Dec 2013) as compared to Extensions Manager which was last updated 8 months back. According to this discussion in Oct 2013, as per the developer the maintenance will be restored soon.


The reason I prefer Extensions Manager over SimpleExtManager is due to the fact that it saves me number of clicks and scrolling. The UI/UX is much more powerful. SimpleExtManager is on the other hand may appeal to those who are looking for cleaner and simpler layout and don’t mind extra clicks and scrolling to get to the same functionality.

Extensity and One-Click Extensions Manager are the other options you may want to try out.

If you’re already using any of these or something else or planning to use soon, do drop me a line on which one you prefer and why.

Apply filters and advance search Google Drive easily from Chrome

Update: The following post is updated with respect to the recent changes in Google Drive search interface. Some of the tips mentioned in the original post are no longer available and some new things are now introduced.

This is a Pro Tip for the people who literally swim into Google Drive every day. Few days back I wrote about how to search Google Drive files easily from Chrome and Firefox. I also followed it up with how you can search your Gmail, Contacts and other popular Google services directly from Chrome. Before you read further I would recommend you to read at-least the first article.

If you find these two posts useful, you may find this one useful too. Consider a scenario that you want to search only the PDF files in your Drive OR you mostly deal only with Spreadsheets in your Drive and would like to always restrict your search to those files. Using Google Drive, you can do this using the advance search drop-down menu provided in the search box.

Old interface

Google Drive Advance Search - New Interface
Google Drive Advance Search – Old Interface

New interface

Google Drive Advance Search - New Interface
Google Drive Advance Search – New Interface

But you can also easily modify your Chrome custom search engine URL for Google Drive and do this directly from your Chrome omnibar. Say you want to restrict your search only to PDF files in your Drive. In that case, your search engine URL will be


Note that this is significantly different from the URL which we used for simple Google Drive search


You can add number of parameters and I have listed all the important ones below.

Filter based on document Type

Parameter Name: filter
Search for Value Updated Value
All documents documents
Drawings drawings app:”Google Drawings”
Images images type:image
PDF files pdf type:pdf
Presentations presentations type:presentation
Spreadsheets spreadsheets type:spreadsheet
Forms forms app:”Google Forms”
Text Documents textdocs type:document
Videos videos type:video
Tables tables app:”Google Fusion Tables”
Folders collections &containers=0 type:folder

Searching folders require additional parameters as indicated above.

Filter based on document Visibility

Filter based on document visibility is no longer available.

Parameter Name: visibility
Search for Value
Public 0
Anyone with the link 1
Private 4
Filter based on document Ownership
Parameter Name: mine
Search for Value Updated Value
Owned by me 0 owner:me
Not owned by me 1 -owner:me


There are other parameters one can add and you can explore the same by changing values in Google Drive advance search box drop down and looking at how it changes the URL in the address bar.

A new type of filter is introduced which allows you to filter based on app which could be used to open the file. You may select from the list of apps you have added to your drive.

Google Drive Search New App Based Filter

Based on the above information, say you want to search for all the Text Documents in your Drive which are publicly accessible and owned by you, your URL will be

https://drive.google.com/?#advanced-search?q=%s&filter=textdocs&visibility=0 &mine=0

You can add a number of different search engines with different keywords and URLs based on the above information and search quickly from the Chrome address bar itself.

Google Drive search engines with different filters
Google Drive search engines with different filters