May 25, 2014 4 Comments
The new vimeo downloader is at:
Sulabh Bista's place on the Blogoshpere.
May 25, 2014 4 Comments
The new vimeo downloader is at:
October 17, 2012 3 Comments
Recently, I wrote a small google chrome extension to display loadshedding schedule. This extension was a two night hack so the term “design considerations” would sound overstretched. But still, there were some considerations that was taken into account while building it up. I tried to focus on few things while designing the extension. I will describe them here.
The extension can be found here at https://chrome.google.com/webstore/detail/nepal-load-shedding-sched/bjfehdeonijdobiohamaplfbdcfkgfgi
The source code is at: https://github.com/sul4bh/Nepal-Load-Shedding-Schedule-for-Google-Chrome
Minimize actions required for the user to view the schedule
So as soon as you click on the extension icon, the extension fetches XML stored in LocalStorage, converts it into required JSON and feed it to a Mustache template and render the data. While rendering, it also automatically switches to your loadshedding group. There is no option to set your group. Just click on the group tab and it is your default group. Next time you fire up the extension, it remembers your group and renders it. Also there is no option to update the loadshedding data. Every time the extension is fired, it asynchronously checks if a new data is available and fetches it, stores in the LocalStorage and trigger the re-render the process. Because this happens asynchronously, we can still be viewing the schedule and the update process would be running in the background. Also, the XML is only 4.1 KB (Google’s homepage logo is 6.84KB) so it is not a bandwidth costly process.
You can also select your location from the drop down at the top of the extension popup. Click on the location and the group tab automatically switches to the group associated with the location. This selection area is grayed out to avoid confusion that the group tab is linked backward to the location selection.
So, we have only 2 items to click and every other housekeeping task is done my the extension automatically. Don’t make user set options and interact heavily with the system. Remember, “The best interface is no interface”.
December 18, 2011 28 Comments
Google rolled out its “Let it snow” easter egg for this winter. Trying to recreate the same snow flakes falling effect, I wrote a jQuery based plugin to simulate snowfall similar to Google’s.
The demo of the plugin is available here. Please refer to the source of the page to see how to initiate the plugin.
It was a small and fun project to work on work: Simple mathematics, simple optimization concerns and the urge to replicate Google’s creation ;)
CSS3 based version of this plugin available at
Use it as: $(selector).snowFallTrans();
How to use
1. Include the plugin source in your page.
2. Invoke the plugin as
Have fun this winter season.
November 8, 2011 37 Comments
Want to develop a chrome plugin? Contact me at sul4bh[at]gmail.com
Get here: https://chrome.google.com/webstore/detail/vimeo-downloader/kollgaonbbmlligcibkbmgalbldfdhmg
My major browser has changed from Firefox to Google Chrome. Amongst many things I miss from Firefox is the addon(GM script) to download videos from Vimeo.
I searched the web for the replacement of this addon but found none. So I thought I should write one myself. Taking the above script as the starting point of my script, I wrote an extension that can download video from vimeo.
Here is how the script works:
Please find the extension at:
Here is how it looks:
October 20, 2011 Leave a comment
This small jQuery plugin was written to solve a small problem in one of our project. Thought I should share this.
We had a table and the data for the table was fetched with AJAX calls. The server would return us the data in JSON and this data would be populated in the table. We had to highlight the content of the data as per the “goodness value”. That means, if the data in certain field was ‘ok’ then we had to highlight it light orange and if it was ‘excellent’ we had to highlight it dark orange.
A rather simple way of doing this would be assigning a class for these cells that needs to be highlighted but because the data that was coming from the server was JSON and we could not attach such class in the JSON data, we had to follow another approach.
So we wrote this jQuery based plugin which would traverse through the table and highlight these data as required. It would only act on defined column number while highlighting the data. In above case the column number would be 2.
Also the highlight color can be changed while calling the plugin.
You can see the demo of this plugin here.
October 18, 2011 17 Comments
While working on an application that uses a Web Service API to fetch content to fill the UI, we thought of sparing our server from having to request for various resources to build up the UI. We used an approach where we would query the Web Service API using AJAX and construct UI on the fly. While trying to do so, we were faced with an issue called Cross-site HTTP requests limitation. That is to say, we cannot initiate HTTP requests within any js code from our domain at http://abc.com to fetch any resource from another domain say http://xyz.com. Browsers inforce this policy of same-origin to prevent various knows security issues.
This is a very common issue and there already are ready-made solutions to make such cross domain requests. But we thought of giving some time on this issue and figure out how such thing as cross domain communication actually work.
JSONP stands for JSON Padding. JSONP uses the ability of <script> tag to fetch script source from any location. This meaning, we can fetch data (json) as a component of the fetched script and then use it in our application. Let us look at this approach solution step by step:
abc.com -> our domain from where JSONP calls would be made,
xyz.com -> domain from where we need to fetch some useful data
http://xyz.com/api -> the URL that serves us that useful data
We have a page at domain abc.com as:
</pre> foo("useful JSON encode data"); <pre>
We see that this is a valid function call as the function foo() has already been defined. Also we have written the function in such a way that it does something useful for us with the <data> it gets.
Note that the serving URL should be JSONP compatible and hence support for handling the callback() function. Also note that this needs to new change to the existing technologies on the client or server end. (Unlike HTTP Access Control method which requires few additions on HTTP protocol)
Refer to the jQuery function called jQuery.getJSON() which provide easy JSONP capabilities.
HTTP Access Control is a would be standard for cross domain communicatio and needs modifications on both the server side and client side to work. It is basically an extension over HTTP. Covering all of its feature would be fairly complicated so we will demostrate only how it works and also present a simple HTTP dialogue with access control features available.
HTTP header dialogue between the client and server with http access control feature is shown below
GET /api HTTP/1.1 Host: abc.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive Referer: http://abc.com Origin: http://foo.example
HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT Server: Apache/2.0.61 Access-Control-Allow-Origin: * Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: application/xml
When a cross-domain request in initiated within the XMLHttpRequest object, the browser inserts the URL of the requesting domain in the Origin header and posts this header to the server. If the server allows cross domain communication it responds with a proper header (Access-Control-Allow-Origin: * meaning allow cross domain access to any origin) and upon receiving this header, the browser sends whatever data it receives from the server to the requesting XMLHttpRequest object. If the server does not respond with proper header or cross domain access is not allowed for the Origin domain then no data is fetched from the server.
If you want to explore more about HTTP Access Control go to the page at <http://arunranga.com/examples/access-control/>, and Firebug the HTTP request headers.
February 16, 2011 5 Comments
Bokeh is the Japanese word for “blur”. A bokeh in the picture denotes to its blur area. Here are few examples:
Here, the leaf focused on the foreground rendering the light sources (gap between the brances and leaves) blurred. Because the shot was taken with a small aperture lens ( f/2.8 ), we get a shallow Depth of Field (DoF) which means only the leaf will be in focus. Also notice the shape of the blur. (Somewhat octagon in shape)
The interesting thing about this shape is it can be changed as per our need. The blur shape of the photo is due to the octagon opening of the diaphragm of the lens. If we can override this opening with some shapes of our desire, we can get create the bokeh of that shape. Here is an example:
I shot this picture of Banepa lights by overriding the aperture of a lens with large diaphragm opening ( 50mm f/1.8 ). And how do we do this? We cannot open up the lens and replace the diaphragm with something that is heart shaped. Here is the idea:
And yes bokeh can be used to shoot videos and get amazing results:
and its making-of: