Search Youtube in Real Time with your Voice

I was working on something interesting since last two weeks and have developed an application that search youtube in real time (meaning search as you type). It was fun, understanding how the different it feel watching youtube through new way and search data real fast. All fun started with a hack, I was doing with jquery to tweak a salesforce application, which triggered idea of real time search with video server and youtube is one single place to look for. 

After developing first prototype, I added voice search to it. It was relatively easy to add voice search to search box using webkit (only supported in latest browser). After finishing the whole application, it turns out to be real fun, specially understanding the UX this application leverages.

End of the day, it feel like as an end-user, you just say to youtube and youtube plays the video for you. The application is not completed yet and is in beta phase. I understand that my designing sense is not the best, but have a working application ready in a night hack was more than awesome feel

The code is not shared here as the application is early design phase, but I have made a quick video randomly last night, demonstrating the application 


Gapminder - Integrate animated Graph and new User Experience in Visualforce

I am always a big time fan of data visionary Mr.Hans Rosling, a great statistician who have been presenting for years in TED Conferences. I came across and meet him last time in TED Conference in Austin, TX. After watching this video in the conference, I was deeply fascinated on how data can be presented in story telling way. 

His demonstration of GAPMINDER, the stats software, that he designed, had triggered a thought in me, to somehow plug this  application with and then present the business data on top of it. I always wanted to see the experience this application can leverage to business as story. My only issue was, that the, GAPMINDER was paid software and wasn't easily available through API

Google solved my problem, they bought GAPMINDER and google made this frame available through their Google Visualization API, which was my piece of cake I was looking for.

I today plugged and played with API and nailed in no time. Check out this demo video of Google Visualization Motion Chart that I designed with Salesforce. In the graph below, I have plugged in data from the backend using Visualforce remoting and pulled Opportunity and Probability and populated the graph for couple of records. This video demonstrate how the probability on Account changes with time as a storytelling, though, I am not a good storyteller but when you populate this graph  with a good and healthy data, then you will realize that,  the graph just sings.

*Note - I am now using Visualforce Objects and Removed controller after publication of this post and have edited this post. Now we no more need Apex controller for all this magic to happen.

So here is the Google Animated Charts purely with Visualforce Objects and works with Spring 14 release (require no object remoting and apex code )

Notice two code snippets, one shown in the video, I used javascript remoting and while after recording I improved the code and make it work in Visualforce Remote Objects 

If my voice doesn't sound clear or may go wacky, then my apologies, my mic is little jacked up as well :-)

After recording this video, I modified code and pushed it to github, you can pull both the code from repository, one with Visualforce Remote Objects and other Javascript Remoting, if you are not aware of the Visual Remote Objects then check here

Fork Github Repo at here

Google Motion Chart - with Visualforce Remote Objects (No Apex required, just copy paste to run)

Google Motion Chart - Page with JavaScript Remoting (as shown in video above)

Admin it | Google Chrome Extension to Launch Salesforce 1 Admin

Couple of days before I developed 'Launch It' extension for Salesforce 1 application, in similar fashion I designed another extension but this time for Salesforce 1 Admin application for browser. This works in exact same fashion and own same behavior the only difference in this application is, this app points to Admin app.

For those you, who do not know, how to launch Salesforce 1 Admin application from browser, here is how you can do it, just append /one/ to your current instance

So for example - if you current org url is then change it will launch admin application for Salesforce 1

You can download the 'Admin it' extension here and watch this video below to see extension in action


JSForce | JavaScript Library of Salesforce API

I came across a neat and relatively well documented jscript library for Salesforce that works with Salesforce API. This library work on both web-browser and Node.js.

Uniqueness of JSforce :

This javascript library is designed to support both server side and client side apps, meaning this will save time rewriting same logic with multiple libraries. Good side of this library is that JSForce supports

  • REST API (SOQLSOSLCRUDdescribe, etc.)
  • Apex REST
  • Analytics API
  • Bulk API
  • Chatter API
  • Metadata API
  • Streaming API
  • Tooling API

JSForce on Visualforce Page using Angular.JS and BootStrap

I designed a page, and that uses bootstrap and Angular.js CDN to make the page responsive and Angular to add powerful functionality, thanks to Taiki for sharing similar post

How to get started : 

The JSForce is very handy and self explanatory and best part is that there are tons of examples provided by developer and you can jump in directly to their github page to see them here.
To get started copy-paste this code but to move forward you will require static resource

Download - JSForce here or download minified version that I created here

Now disable developer mode, you can use 'Toggle It' extension I wrote to disable developer mode then open console and see the log and you fill find the records showing up as shown in picture

Using Angular.js and Bootstrap with JSForce 

Lets make our page more powerful and featureful. I have here added CDN source of Angular.js Javascript and Bootstrap3 on a new visualforce page that has search functionality and classes to beautifully represent the data we just pulled in a HTML table and also lets  make them responsive as well. See the page below after changes (you can copy-paste) code to run. 

To achieve the functionality I designed a method here in javascript that populate the $scope as shown in snippet up here

Now we populate the table content by looping through repeter 'ng-loop'. Here is the source code for full page - copy-paste in your organization to have a look. I am coming up with some of my experiments with Streaming API and Analytics and Chatter with JSForce sooner

Taking Page to Salesforce 1 

I took this page to Salesforce 1 as we had responsive design up here and search method and this turn out to be beautiful.

The only limitation as API call count, each page refresh or data pull using script will count against the API call. See the in action video here

Launch It | Google Chrome Extension to launch Salesforce 1 in one click

Couple of days before, I launched 'Toogle It - a chrome extension to toggle salesforce developer mode ON/OFF'. Since past few weeks I have been doing experiments with Salesforce 1 and have been testing my application using both the browser chrome and my phone. 

You may be knowing that Salesforce1 app can either be launched on your phone or in your web browser when logged just by appending one/ to your existing instance.

Example if na5 is your instance the url would be

I thought of designing a quick and easy Salesforce extension that let you toggle between Salesforce and Salesforce 1 App with one click without worrying about the instance. The extension recognize your current tab and instance and open up application for you and let you toggle back and forth,

I would love get your review, bug and suggestions for improvements 

See the video below to see application in action.

Download the chrome extension here - Launch It - Salesforce 1 Launcher