In case you missed it last night, Skype for Windows Phone beta is here !

David Merzel's BLOG

In case you missed it last night, Skype for Windows Phone beta is here !

Check it out:

One of the things we know people want to do on their phone is Skype.

Today a beta of the much-anticipated Skype app for Windows Phone is availablle. This brings communication with Skype’s 200 million users to Windows Phone platform (Check it out HERE).

The Metro design in the new Skype app for Windows Phone makes Skype shine in a whole new way, delivering a clean and simple experience. Check out Video :

View original post

if star wars and vw had a baby

iOS Style Scroller For PhoneGap App

I have moved the files to GitHub at

I am going to show you the extensions I made to the spinningwheel script created by the developer of the popular iScroll script. The spinningwheel script by Matteo works great just out-of-the-box. It’s much better than mobiscroll. Spinningwheel allows you to add slots of custom data which means if you are about to use spinningwheel for a date picker then you have to write your own logic for handling the days/months logic and then there’s the leap year calculation for February. But working with spinningwheel was easy and interesting. Matteo’s code is always organized as you can see from the source of his iScroll and SwipeView scripts. It was just a matter of writing down what extensions I wanted to make to his script. So, I first started out by realizing that I wanted a wrapper around the spinningwheel; that’s where the second file in the attachments comes to use. Most importantly his scripts are always written in regular javascript and always has a destroy method (which is very useful when you want to manage memory). Writing in regular javascript means no external dependencies. Following the same guidelines I too made the extensions in regular javascript and also the new events you can subscribe to in the spinningwheel are written in regular javascript. Another advantage of using spinningwheel over mobiscroll is spinningwheel uses translate3d for the transitions which means it will look and work awesome on iOS devices and even on higher end Android devices (phones and tablets). Oh and another one again is that since spinningwheel is written in regular javascript it easy for you to make extensions to it based on your needs unlike mobiscroll which relies of jQuery selectors heavily which means if you are not using jQuery, good luck!

The ScrollWheel class I wrote allows you to use the SpinningWheel instance as a singleton object. You can create an instance of ScrollWheel and pass in parameters like ‘date’, ‘time’ or ‘custom’ (if you want to use custom slots). Most of you would want to use the date and time presets that I created. The custom presets allow you to simply bind a click listener to text input and show the spinning wheel without having to do any extra work.

As you will see in the ScrollWheel.custom file, I have set the cancel action to call the post callback (which you would have passed when an instance of ScrollWheel was created) immediately and a null value for the results. In your post callback be sure to add a check for the results array so you don’t accidentally update the existing value in the text box (if any) to null. You can see what I have done with my post callback in ScrollWheel_Init.

The HTML element that you need to have to actually show the spinningwheel is pretty simple. Just use something like this (or exactly):

<input id=”timePicker” type=”text” readonly=”readonly” onfocus=”preventFocus(this)” onclick=”showTimePicker(event,, this.value);”/>

or you can modify the showTimePicker function to take just the event object as a parameter and modify the click handler in the element to:

<input id=”timePicker” type=”text” readonly=”readonly” onfocus=”preventFocus(this)” onclick=”showTimePicker(event);”/>

Or you could alternatively ‘bind’ to the click event using jQuery or Zepto as well. I will not explain the logic of updateDates since it is pretty straight forward. In spinningwheel.js, you will find that I have added a new event handler that you can set via an instance of ScrollWheel (or directly via SpinningWheel) called scrollEndAction. This is what you need to set if you want to subscribe to the scrollEnd event and have a handler invoked every time the user stops scrolling a slot.

A snippet of the handleEvent function in spinninwheel where I added the invocation of the scrollEndAction

else if (e.type == ‘touchend’) {

if ( == ‘sw-cancel’ || == ‘sw-done’) {


} else if ( == ‘sw-frame’) {


//console.log(“calling scroll end action”);

setTimeout($.proxy(this.scrollEndAction(this.activeSlot), this), 100);

var self = this;

setTimeout(function () {self.scrollEndAction.apply(this, [self.activeSlot]);}, 100);



There are two new public functions I have added to the spinningwheel.js, called showSlotValuesAfter and hideSlotValuesAfter. These functions will allow you to pass the slot index (0 based), the last key of the json object that the slot holds as values, and the number of values you want to show/hide after that last key. The reason for these is to help with hiding the dates that don’t apply for a particular month and then showing them again when they are applicable. Look at updateDates to understand how this is done. I have also made sure that when you call on these functions the corresponding slot’s max scroll boundary is updated so that it doesn’t allow you to scroll over the ‘hidden’ values. Find out why I call them ‘hidden’ values. 

The good thing about the wrapper I have written is that it checks if an instance of a ScrollWheel is already open and if so it won’t allow you to open another one. This was the only problem with spinningwheel out-of-the-box. SpinningWheel is a global instance and you have to manage it. If you open too many instances at the same time you are likely to chew up memory from the browser and can see significant impact to the performance of the page and even states and values will be corrupted. This is why I wrote the wrapper to make sure that I take care of this.

There is no technical reason for me to name the wrapper as ScrollWheel so you can change the name of the class to whatever you like. Just remember to retain the names and the original license at the top of the files. Although I claim no responsibility for the stability of these extensions and no support for them, I do know that they work because I use them and you can ask me for help as long as you don’t blame me for anything after all you downloaded them, I did not force you to.

A word of caution about spinningwheel’s goal. It is to be used with webkit based browsers. It was created to be used with iOS and Android phones as they implement the WebKit framework and also it is original intended to be used with touch enabled WebKit platforms which means it will not work with desktop browsers (Chrome, Safari, or Opera) out-of-the-box but there’s good news, download the touché framework I blogged about last week and it should work like a charm. I may look into porting this for the WP7 but not yet. I’ll tackle that when I get there but if you do be sure to let me know. It’ll save me some time 🙂

Be sure to ask me if you don’t understand the sources. Just don’t be a duck about it. That’s it for now. Enjoy your new spinningwheel!

console.log Will Cost You Browser Ops

Writing log statements in your javascript code is a habitual practice for web developers. But if you do not comment them out you might be giving up performance for nothing. This is the single most simple tweak you can do to your code to speed up javascript execution. Remember to comment out those log statements before you push code to production. This is a bigger problem for mobile browsers because every browser operation is important with that limited processing power your app gets.

To see how leaving console.log statements in your code can affect performance. Look at this jsperf test I wrote.

Touch Events On A Desktop Browser

Sometimes you would want unify the events in your app and react to only kind of event hierarchy (either touch or mouse events), in such a case you will find yourself in a pickle when you realize that desktop browsers don’t support convenient touch events unlike mobile browsers. So what do you do then? The answer is an extremely small JS library called Touché. Drop this library into your web app and you are good to go. See the github page for more details on how to use it. If you have mobile centric javascript extensions that were intended to work with touch events, they will now work with desktop browsers as well when you use this library.

The page also has a live demo.

Support For Anti-Cache In Zepto’s Ajax Requests

If you have been using Zepto (the ultra light webkit target JS framework) you would have noticed that some of the elements which you have gotten used to with a JS framework, particularly with jQuery, are missing from Zepto.

Zepto’s github page quotes that it is not a goal for Zepto to give 100% match of jQuery. However, there are some important additions that I have made to it in the version that I have for our app. Here’s one,

// Add anti-cache in url if needed

if ( settings.cache === false ) {

var ts =, rquery = /\?/, rts = /([?&])_=[^&]*/,

// try replacing _= if it is there

ret = settings.url.replace( rts, “$1_=” + ts );

// if nothing was replaced, add timestamp to the end

settings.url = ret + ( ( ret === settings.url ) ? ( rquery.test( settings.url ) ? “&” : “?” ) + “_=” + ts : “” );

//console.log(“url: ” + settings.url);


Add this little snippet to the $.ajax function inside Zepto. To use anti-cache you have to send, you guessed it, “cache: false” as one of the properties in the ajax settings when you call on Zepto to make the async request. I have not reinvented this technique. I looked at the latest jQuery source and made modifications to it to make it work with Zepto. If there is a proven, simpler way to do it be sure let me know. I know that this just works so I used this.

What?! I can use HTML/Javascript/CSS for native mobile apps?

Well, not exactly. All you will be doing is writing a web app wrapped inside a webview that is “packaged” as a native app. As you may have read about the several articles online about using HTML/Javascript for mobile app development. Well, I am not going to talk about the different ways to do this. I am going to show you how we do it my company using PhoneGap. Before I start talking about PhoneGap I must let you know that the other worthy alternatives to native app development are Adobe Flex (supports iOS, Android, Blackberry), Titanium Appcelerator and then there is appMobi’s XDK which is a Chrome extension that allows you to develop an app right out of your browser; what a way to start developing an HTML5 app huh? Well, I have never tried it but it looks cool (and somewhat confusing) though.

The way PhoneGap works is it allows you to write an application using HTML5/JS/CSS3. The resources are then packaged as assets to a WebView based application. So, the app actually runs using a browser but the user wouldn’t or shouldn’t know the difference (if done right). The problem with using PhoneGap is that HTML5 spec is not completely stable yet and Android is one of the worst platforms for HTML5 development due its fragmented nature. There are over 900 “different kinds” of devices in the market that run Android OS in some form and factor which is exactly the problem because there is no standard spec whatsoever!! You have to account for the several different problems with these devices when writing an application using a spec that is first incomplete and second each browser has proprietary implementation of unfinished specs. So, there is always something that doesn’t work.

However, there are some annoying problems, for example, using an iframe in your app will screw with the native copy/paste functionality and the soft keyboard will stop responding to user input until it is closed and reopened. Another problem with Android phones is with the CSS3 transform3d which causes problems with the “native” android library and crashes the app when transform3d is used on a page containing input text box. So, after solving these problems you will see that you only need to know HTML and Javascript to develop a simple app. Granted you will need to write some PhoneGap plugins to solve some platform specific problems but they are all easy to do.

Then there is the infamous android transform3d bug with password boxes which appMobi’s jqMobi solved using the oldest trick in the book. A clever fix I should say. I will not reveal the fix here you should check out there source code and look at the passwordbox control to see what they have done. Once you do you would probably say “I knew that” well it did not occur to you, did it? Kudos to jqMobi for bringing that out!

Then there is the problem of using a javascript framework to do the dirty work for you. We were first using jQuery and that did not go well. Performance was poor. It was terrible. If I was not working for my company I would not even use the app past the installation, it was that bad. The thing about jQuery is it has a lot of backward compatibility for IE6 and other older browsers. When you know that you are only developing for Webkit why do you want to use a framework that has support for other browsers? When I realized this fact and took it upon myself to swap out the javascript framework with something much lighter and meant for Webkit I came across Zepto. Porting from jQuery to Zepto meant I had to look at what was missing. The good news about Zepto is that it has a jQuery style syntax and that means no ramp up time to learn yet another JS framework. However, since the goal for Zepto is to support only modern Webkit browsers, few things that jQuery used to offer are now lost conveniences but this is still not a problem. You can check the jQuery source and for the most part copy it over into your Zepto source and be done with it otherwise you might have to Zepto-ize (lame attempt for Zepto lingo, sorry!) it.

To help with porting I read this useful article. It even has a performance comparison at the end of the article. Choosing a javascript framework is absolutely optional. You only use one when you need to add extensions like a date picker that looks like iOS or if you want to use some really good javascript template engine…etc. You still have the option of writing good old regular javascript with document.getElementById, document.getElementByClassName(with HTML5)…you get the point.

Another great point to consider while developing for iOS and Android using HTML5 is making use of translate3d and using CSS3 media queries to make the icons, images look sharper on a retina display. Watch this video of how translate3d helps give your app that native feel to it. Hardware acceleration baby!

Opening Garage Door Using An Android Phone

If you haven’t seen videos of people using their iPhone or Android to open their garage, you are missing out on some excitement. The way it works is there is a bluetooth module which is a transceiver and the mobile device talks to it using SPP. Since iPhone and Android support bluetooth communication using this protocol, you will see videos on youtube with mostly these two devices. Sadly, WP7 doesn’t seem to support SPP as of now or at least to my knowledge it doesn’t seem to have an API for developers to use like the other two do. If any of you know otherwise please let me know.

I got the DaisyWorks bluetooth board and connected it to my garage door wall control switch to simulate the on/off pulse the door switch sends to the opener. I got open source app that DaisyWorks published on github and added some pretty nifty features to it like, Text-to-Speech and Voice Recognition. I have also added two useful features that my car has Coming Home, Leaving Home. Basically, I tell the app at what time I leave home for work and come back home from work and it switches the bluetooth on for an hour given that window and automatically switches it back off after that window to save the phone’s battery.

The good thing about Android phones are that they are actually built on an Open Accessory Development platform. You can read about it here. There are several online resources that can help you build what you need with little programming knowledge and some electrical knowledge as well. Most tutorials, articles do have explanation about the electrical part which is out of scope for this article though (not that I am good at it anyway).

So here’s a video of what I have done with mine. Be sure to leave comments about any questions you may have and thank you for reading this article! Also, look for updates to this application from me.