Developer

Winners of the jQuery Mobile Cookbook giveaway

2013-01-30T10:41:00.000+05:30

I had earlier announced that I would be giving away 2 copies of my book, jQuery Mobile Cookbook here. I wish to thank all the participants who sent in their entries from across the world. Thrilled by your response.

Due to unavoidable circumstances, there was a delay in me procuring the books and so I was not able to announce the winners sooner. But now here they are:

Congratulations !!!

Winner of the hard copy from India: Vasudevan P

Winner of the e-book from Spain: Miguel Angel

The two winners were randomly chosen by me without any bias and have been informed by direct email. They will be receiving their copies soon. The decision is final and not subject to review or contest.

Thanks again to all those who participated!

Link to the book: http://www.packtpub.com/jquery-mobile-cookbook/book

Extract from the publisher website:

Overview:

Create applications that use custom animations and use various techniques to improve application performance
Use and customize the various controls such as toolbars, buttons, and lists with custom icons, icon sprites, styles, and themes
Write simple but powerful scripts to manipulate the various configurations and work with the events, methods, and utilities which are provided by the framework

What you will learn from this book:

Create single-page and multi-page applications that use custom CSS and JavaScript transitions; improve performance using Prefetch, DOM-Cache, and Application Cache
Use fixed and full screen toolbars, navbars, and buttons; customize them with your own icons, icon sprites, and styles
Use XML and JSON data in your application; format page content using layout grids, collapsibles, and nested accordions
Build accessible forms; use form controls like flip switches, sliders, and select menus; validate and submit forms using Ajax
Use various types of lists such as Inset, Numbered, Nested, Read-only, and Split Button lists; manipulate lists using JavaScript
Use JavaScript to dynamically create and initialize controls, load and change pages, handle events; tweak and customize the framework configurations
Explore HTML5 semantics and features such as Local Storage, Session Storage, History, 2D Canvas, 3D, Geolocation, Web Workers, Audio, and Video
Use custom fonts and backgrounds, upgrade themes, override existing themes; generate and share new themes using the Theme Roller tool

Giving away 2 free copies of jQuery Mobile Cookbook

2012-12-08T12:41:00.000+05:30

I wish to thank all my friends, readers and well wishers. Your constant encouragement and support helped me complete my very first published book. I'm now very glad to announce that my book jQuery Mobile Cookbook just got published by Packt Publishers. The link is here: http://www.packtpub.com/jquery-mobile-cookbook/book

Extract from the publisher website:

Overview:

Create applications that use custom animations and use various techniques to improve application performance
Use and customize the various controls such as toolbars, buttons, and lists with custom icons, icon sprites, styles, and themes
Write simple but powerful scripts to manipulate the various configurations and work with the events, methods, and utilities which are provided by the framework

What you will learn from this book:

Create single-page and multi-page applications that use custom CSS and JavaScript transitions; improve performance using Prefetch, DOM-Cache, and Application Cache
Use fixed and full screen toolbars, navbars, and buttons; customize them with your own icons, icon sprites, and styles
Use XML and JSON data in your application; format page content using layout grids, collapsibles, and nested accordions
Build accessible forms; use form controls like flip switches, sliders, and select menus; validate and submit forms using Ajax
Use various types of lists such as Inset, Numbered, Nested, Read-only, and Split Button lists; manipulate lists using JavaScript
Use JavaScript to dynamically create and initialize controls, load and change pages, handle events; tweak and customize the framework configurations
Explore HTML5 semantics and features such as Local Storage, Session Storage, History, 2D Canvas, 3D, Geolocation, Web Workers, Audio, and Video
Use custom fonts and backgrounds, upgrade themes, override existing themes; generate and share new themes using the Theme Roller tool

You can purchase the book directly from the Packt website (link above). The book is also available on all popular stores and also online at Amazon, Safari Books Online, Barnes and Nobles, Flipkart, BookAdda to mention a few...

!!! Now comes the best part !!!

One lucky winner from anywhere in the world will get a free ebook copy.
One lucky winner from anywhere in India will get a free printed copy.

So rush now. Send me a direct email at chetankjain@gmail.com with the below subject.

Email Subject:
From <Country Name>, I want to read the jQuery Mobile Cookbook

e.g.
From India, I want to read the jQuery Mobile Cookbook

The two winners will be randomly chosen by me without any bias and announced on this site and by direct email, within 1 week after the last date of submission of the entries. The winners will be decided at my sole discretion. The decision will be final and not subject to review or contest.

Last day to participate and send in your email is GMT Midnight Sunday Dec 16, 2012.

Node.js: Notes on Install and Upgrade on Ubuntu

2012-05-17T09:06:00.002+05:30

To install Node.js, first install the below prerequisite and add the node.js repository.

# sudo apt-get install python-software-properties
# sudo apt-add-repository ppa:chris-lea/node.js

Now install Node.js and npm (the Node Packet Manager).

# sudo apt-get update
# sudo apt-get install nodejs npm

Thats it. Your Node.js is ready. Test by running the below command.

# node -v

v0.6.18

Node.js stable releases are done quite frequently. To upgrade run,

# sudo apt-get update

# sudo apt-get upgrade nodejs npm

You could also use the Ubuntu Update Manager to do the update.

If you are the kind who prefers to directly build from the sources then,

# cd <directory>
# sudo wget http://nodejs.org/dist/v0.6.18/node-v0.6.18.tar.gz

# sudo tar -zxf node-v0.6.18.tar.gz

# cd node-v0.6.18

# sudo ./configure

# sudo make

# sudo make install

# node -v

v0.6.18

The latest version was v0.6.18 at the time of writing this post.

For other platforms, installation is simple. See the Node.js installation web page.

Ubuntu: Easy steps to install and use Notepad++ and IE on Ubuntu

2012-04-24T03:37:00.000+05:30

I like using Notepad++, but it is a windows program and is not available for Linux. There are some jQuery Mobile apps that I need to test on IE. I need a Windows platform. But my primary laptop has Ubuntu.

The solution is to use Wine and boy does it taste good!

First install wine

# sudo apt-get install wine

Download the latest notepad++ installer from http://notepad-plus-plus.org/ and launch it using wine.

# sudo wine <download folder>/npp.xxx.Installer.exe

This will launch the Npp installer and you can complete the fairly simple installation. Thats it, you are done !

Now you can just launch Npp and its a touchdown !

# cd ~/.wine/drive_c/Program Files/Notepad++

# ./notepad++.exe

There is a version of IE available too

# cd ~/.wine/drive_c/Program Files/Internet Explorer 

# ./iexplore.exe

This IE scores pretty decent on www.html5test.com.

Now how about try installing other Windows apps on Ubuntu and having more fun...

Fixing Date, Time and Zone on RHEL 6 command line

2012-04-10T23:43:00.001+05:30

Had to fix all time related issues on a remote RHEL 6 server which runs without any windowing system. Plain ol' command line. Documenting steps here for future reference:

Check to see if your date and timezone settings are accurate:
# date
# cat /etc/sysconfig/clock

The server I accessed had wrong settings for both the commands. Here are the steps I used to correct:

Find out your timezone from the folder /usr/share/zoneinfo
# ls /usr/share/zoneinfo

Mine was pointing to America/EDT instead of Asia/Calcutta

Update and save the /etc/sysconfig/clock file to
# sudo vi /etc/sysconfig/clock
ZONE="Asia/Calcutta"
UTC=true
ARC=false

Remove the /etc/localtime
# sudo rm /etc/localtime

Create a new soft link to your time zone
# cd /etc
# sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime
# ls -al localtime
Now it should show the link to your time zone

Set your hardware clock to UTC
# sudo hwclock --systohc --utc
# hwclock --show

Update your time from a NTP server (Red Hat NTP server used here)
# sudo ntpdate clock.redhat.com
10 Apr 22:08:27 ntpdate[25695]: adjust time server 66.187.233.4 offset 0.004185 sec

Finally verify the date now
#date --utc
Tue Apr 10 16:39:56 UTC 2012

#date
Tue Apr 10 22:09:58 IST 2012

Add the above ntpdate command in your server startup script or in a cron job to automatically set the system time. The list of ntp servers can be found here: https://support.ntp.org/bin/view/Servers/StratumOneTimeServers

CouchDB on RHEL6 (Red Hat Enterprise Linux)

2012-03-26T16:06:00.004+05:30

Had to install a Couch DB instance on a fresh Red Hat Enterprise 6 Linux Box and it required some time before I got the whole thing up. Better have it documented here for future reference:

1. Get the Prerequisites
First you will have to add the RPM Forge YUM Repository if not already available. Add the new repo:

sudo vi /etc/yum.repos.d/rpmforge.repo

# Name: RPMforge RPM Repository for Red Hat Enterprise 6 - dag
# URL: http://rpmforge.net/
# (Put "x86_64" instead of "i386" if appropriate.)
[rpmforge]
name = Red Hat Enterprise $releasever - RPMforge.net - dag
baseurl = ftp://ftp.pbone.net/mirror/atrpms.net/el6-i386/atrpms/stable
enabled = 1
protect = 0
gpgcheck = 0

Save the file and get the prerequisites:

sudo yum clean all
sudo yum groupinstall 'Development Tools' 'Development Libraries' 'GNOME Software Development'
sudo yum install \
cvs zip gcc-c++ glib2-devel gtk2-devel fontconfig-devel libnotify-devel \
libIDL-devel alsa-lib-devel libXt-devel freetype-devel pkgconfig \
dbus-glib-devel curl-devel autoconf213 xorg-x11-proto-devel libX11-devel \
libXau-devel libXext-devel wireless-tools-devel glibc-static libstdc++-static \
yasm mesa-libGL-devel esound-libs esound-devel ccache mercurial glibc-devel \
ncurses-devel openssl-devel libicu-devel erlang js-devel libtool which make

If Mercurial is not found, you can install a RPM package from RPMForge using the below commands
(replace VERSION with your version/architecture):

sudo wget http://packages.sw.be/mercurial/mercurial-VERSION.rpm
sudo rpm -Uhv mercurial-VERSION.rpm

If curl was not found, install from sources

sudo wget http://curl.haxx.se/download/curl-7.20.1.tar.gz
sudo tar -xzf curl-7.20.1.tar.gz
cd curl-7.20.1
sudo ./configure --prefix=/usr/local
sudo make
sudo make test
sudo make install

If Erlang was not found, download, build and install Erlang:
sudo wget http://erlang.org/download/otp_src_R14B03.tar.gz
sudo tar zxvf otp_src_R14B03.tar.gz
sudo cd otp_src_R14B03
sudo ./configure && sudo make && sudo make install

If js-dev (SpiderMonkey) was not found, build from the source files
sudo mkdir mozilla
sudo cd mozilla
sudo wget http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz
sudo tar xzf js185-1.0.0.tar.gz
cd js/src
sudo autoconf-2.13
sudo ./configure
sudo make
sudo make install

2. Install CouchDB
Now you are ready to install CouchDB from sources. The configure line below is for 64-bit, adjust for your arch (or leave out --with-erlang if configure can find out for itself). You can use a release tarball instead of a checkout, in that case skip right to the ./confgure line.

sudo svn checkout http://svn.apache.org/repos/asf/couchdb/trunk couchdb
cd couchdb
sudo ./bootstrap
sudo ./configure --with-erlang=/usr/lib64/erlang/usr/include --with-js-lib=/usr/local/lib/ --with-js-include=/usr/local/include/js/
sudo make
sudo make install

3. Configure CouchDB
a. Edit config file to your need, change the port etc
sudo vi /usr/local/etc/couchdb/local.ini

b. Create user, modify ownership and permissions
sudo groupadd -r couchdb
sudo adduser -r -d /usr/local/var/lib/couchdb -M \
-s /bin/bash -g couchdb couchdb

c. fix permission
sudo chown -R couchdb: /usr/local/var/lib/couchdb /usr/local/var/log/couchdb

4. Launch CouchDB

sudo -u couchdb couchdb

Or as daemon:
sudo /usr/local/etc/rc.d/couchdb start

Or at startup as a daemon:
sudo ln -s /usr/local/etc/rc.d/couchdb /etc/init.d/couchdb
sudo chkconfig --add couchdb
sudo chkconfig --level 345 couchdb on

5. Test Install:

Now you should see something meaningful when you click
http://127.0.0.1:5984/_utils/index.html

2 new Page Transitions in jQuery Mobile v1.1

2012-02-18T15:43:00.002+05:30

In my earlier post I had written a simple demo to show the various transitions that are available with jQuery Mobile. The official documentation v1.0.1 for page transitions is available here.

But with jQuery Mobile v1.1, the official documentation has been updated and is much better compared to the older version. You will also see the page looks much simpler and showcases how the transitions would look for pages and also dialogs. Just click on the buttons and you can see the live demo. Excellent work on updating the documentation.

Also very exciting to see that two new transitions have been added, the Turn and the Flow. So now we have a total of 8 transitions that are available by default. Pretty cool.

Of course the brave can extend the framework and try to create their own custom transitions using CSS3 and JS.

TV apps using jQuery Mobile

2012-02-16T21:26:00.000+05:30

The idiot box finally graduates to an internet box!

Internet on TV is catching on quite fast. I've been reading reports that predict a billion(s) dollar market that will open up for TV apps. Ah the hype .. these things are always in billions. But anyways, considering the number of people who have a TV and the number who watch it (almost everyone?), I guess this could be quite realistic.

Many advantages I guess, lesser strain on the eyes, no burnt laps and no lost fertility with laptops on top of laps. I'm online 100% of the time. Definitely I stand to gain. My 6 year old kid too. I'd rather have him play Angry birds and all those HD games on TV compared to him holding my super heated mobile and straining his eyes watching the small screen.

So now that I've made my point beyond all doubt, it is agreed that TV apps is the next big thing!
So where do I start? I do not have an Internet TV yet! Not to despair, one could install the recently launched Opera TV Emulator and have the next best thing.

The steps are detailed here and are very easy to follow. You have to get the Virtual Box and install it. Then get the Opera TV Emulator, unzip it and you are ready to go. On launching the emulator virtual machine, the Opera TV browser comes up and you will also be given a link to install the H.264 codec, this is to play the MP4 videos.

You can now directly start browsing. Now lets get bolder. How about our first TV app. Fairly simple I would say.

Just point the TV browser to your jQuery Mobile app and bingo! It just works. Isn't that amazing! You code once in jQuery Mobile and the code runs on a wide variety of mobile devices, tablets, desktops and now even on TV! This is true cross platform development. There are other emulators, but from first looks, I feel Opera TV emulator is the simplest to install and use.

Though not officially supported by jQuery Mobile, my few basic apps seemed to work fine. I even tried audio and video and they work fine. The full list of current jQuery Mobile supported browsers is available here. No mention of any TV browsers. TV browsers need to be tested in detail with jQuery Mobile. But I find this totally exciting !

http://www.html5test.com/results-tv.html lists the current state of affairs in the TV browser world when it comes to HTML5 support. It sure is promising. The coming days will see these scores improve and probably match or exceed the desktop browser scores. Who wants those old computers anyways. Its the era of the mobiles and the tablets. When I pointed the Opera TV browser to html5test.com, the score was 330+6 bonus points. This score is among the top 3 after Chrome and Firefox.

Finally, one conclusion from all this - it sure is high time I replace my old TV with an Internet TV. Suggestions ?

It pays to blog

2012-02-09T13:05:00.000+05:30

"See one, Make one, Teach one!" - [video: Charles McCathieNevile (Opera), see @00:19:00]

Working on a pet project, I stumbled upon jQuery Mobile a few months ago and have been hooked on to it since then. There were quite a few things that I learnt and few more things that I discovered. I started to blog a few posts on the topic and boy does it pay to blog!

One morning I log on to my blog and find that the traffic had jumped by a few hundred page views within a single night. I used to have just a handful of daily visits earlier. Initial thought was that some bot had tried to wreck havoc on my blog. Eventually I found the true reason. My post on prefetching pages using jQuery Mobile, had been retweeted by @jquerymobile. Traffic hasn't looked down since. Even today the number of pageviews on a daily basis, is tenfold more than the earlier days. Its been two months now.

Within a week of this, I got an email by a leading international publisher asking if I were interested to write a book on jQuery Mobile. I almost fell off my seat. Mostly a new version of the famous Nigerian scam mail. I was skeptical. But a quick cross check proved otherwise. This was for real!

Govind my friend urged me on, "Chetan, this is once in a life time opportunity. Just take it!"

I had to submit a proposal over the new year weekend. One of these days I'll make it up to my wife and kid for me sitting with my laptop all through the new year's eve. Couldn't have done it without their support and understanding.

The proposal got reviewed and also got selected over two other proposals. I eventually signed the contract last month. The book will take a few months to roll out. I expect it to be available by Q4 of 2012 (if all things go well). This will be an interesting experience and I am quite excited about the same.

This also means that I have a few contractual obligations with my publisher and have to pick and choose what I blog about going forward. But there are enough topics in jQueryMobile and the HTML5 world in general and I will surely be posting more frequently now.

jQuery Mobile and Duplicated Page IDs

2011-12-22T13:22:00.000+05:30

In the previous post, I touched upon how browsers safely handle duplicate IDs in a html file. Things seem to work fine for the three main uses of element IDs, i.e. linking to fragments, styling and referencing the element in javascript. The first element with matching ID is picked up and styling is done for all matches.

Now let us extend this test to the jQuery Mobile framework. You can launch the below multi-page code here.

Launch

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Duplicate IDs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>
<body>
<div data-role="page" id="p1">
<div data-role="content">
<p><a href="#p2" data-role="button">duplicate page id</a></p>
</div>
</div>
<div data-role="page" id="p2">
<div data-role="content">
<a data-role="button" data-rel="back" data-direction="reverse">1 1</a>
<a href="#p1" data-role="button" data-rel="dialog">Open Dialog</a>
</div>
</div>
<div data-role="page" id="p2">
<div data-role="content">
<a data-role="button" data-rel="back" data-direction="reverse"> 0 </a>
</div>
</div>
</body>
</html>

On load, when you click on the button, ajax is used to navigate to the page with ID p2, but here there are two IDs that match. The framework is not expecting this, and correctly so. Things go haywire. You have the resulting page rendered with seemingly garbled text, Actually both pages are rendered, but in a weird way. You will see the first button from both the pages, at the same location, merging the texts "1 1" and " 0 " to show "101". Then there is the second button which gets hidden, but its text "Dialog" is shown.

It gets interesting when you click on the button "101" now shown, as you can see from the code, it should take you back to the page ID p1. But here, two pages were rendered, and the first occurring page div slides out and for a brief instant you can see the second page container, which also slides out.

If you use the browser code inspector, you will see the data-url attribute being automatically added to all page divs. Since no data-url was specified here, the page ID is copied as is. In this case, both data-urls are the same. You can try the above example with different page IDs but having the same data-url and the resultant output is the same.

<div data-role="page" id="p2" data-url="durl1">
......
<div data-role="page" id="p3" data-url="durl1" >

One final scenario, suppose if the page IDs are duplicated but each page has a different data-url specified.

<div data-role="page" id="p2" data-url="durl1">
......
<div data-role="page" id="p2" data-url="durl2">

And now try to navigate to any page using the data-url.

<a href="#durl1" data-role="button">Open Page 1</a>
<a href="#durl2" data-role="button">Open Page 2</a>

Bingo! Both links work just works fine.

So jQuery Mobile primarily uses data-url for page navigation and as long as they are unique, navigation works just fine. And it was a purely accidental discovery that having duplicate data-urls messes up the rendered content.

Now is this a valid bug? I feel the framework should gracefully handle this and render only the first instance of matching data-url. The behavior would then be consistent with how various browser engines handle duplicate IDs (from my previous post). But again is this an overkill? Should the framework focus on adding more features that work correctly on multiple devices/platforms/browsers or fix such scenarios. That is a call that the jQuery Mobile developer community has to take.

Using duplicate IDs in HTML

2011-12-22T01:53:00.002+05:30

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file.

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code,

Launch

dup.css

#p2 {
background-color: yellow;
}

dup-id.html

<!DOCTYPE html>
<html>
<head>
<title>Duplicate ID Tester</title>
<link rel="stylesheet" href="dup.css" />
</head>
<body>
<p><a href="#p1">1</a></p>
<p><a href="#p2">2</a></p>
<p><a href="#p2">3</a></p>
<div id="p1">
<p>ID IS 1</p>
</div>
<div id="p2">
<p>ID IS 2</p>
</div>
<div id="p2">
<p>ID IS 3</p>
</div>
<p>Now lets get ID 2 again using javascript</p>
<script>
document.write(document.getElementById("p2").innerHTML);
</script>
</body>
</html>

I've committed a big sin in this HTML code. Yes there are 2 div elements that use the same ID "p2". What should happen when you render this page now? I have tried this code on the famous five (Chrome, Firefox, IE, Safari and Opera) and also on the Android, Opera Mobile and Firefox Mobile browsers, and they all behave exactly the same way. You will actually see that the three major criteria mentioned in the HTML5 spec, seem to work just fine.

Linking to a document fragment: Reduce your browser size and click on link 2, it will navigate to the first div with the ID p2
Styling: Both the divs with the ID p2 are styled
Targeting the element using JavaScript: You will see that the text (ID IS 2) of the first div with ID p2 is printed using javascript at the end of the html doc.

To summarize, linking and picking up the first element with matching ID is done and all matching elements are styled.

But the question is, why do browsers behave this well in spite of the spec mandating the ID to be unique? The answer is that browsers have come away from the strict mode and are more relaxed in the way they handle bad code (even more so now with HTML5). They are quite developer friendly and try to render as much as possible and fail gracefully where possible. Yes, that is the way to go!

But still a word of caution, it is not recommended to use duplicate IDs as it is against the spec and the browsers could change their implementation anytime. A hundred different things could go wrong in your code and you will spend hours figuring out what the issue is.

jQuery Mobile Page Caching demo

2011-12-19T19:40:00.002+05:30

In my previous post, I outlined how to prefetch links to make jQuery mobile app load your pages faster. The ui-loader spinning animation was not shown as you navigate from one page to another.

Launch - The previous example with prefetch

But, as also mentioned, it has certain limitations,

If there are more pages, more http requests are sent out and more bandwidth is required to prefetch
If a page hasn't been fully prefetched, the ui-loader spinner animation comes up till the page is fully loaded. Try to click fast and you will see
Once you visit a prefetched page, navigating away from the page will remove the page from DOM. So this is not same as caching the page. The next visit to the page will again need the page to be fetched.

So the obvious solution seems to be to cache the frequently visited pages in the DOM. This way, every link doesn't have to be prefetched on every visit to the page. This is easily done in jQuery Mobile by adding the attribute data-dom-cache="true" to the page div container of the page that you want to cache.

You could also cache a specific page programmatically by using this call

pageContainerElement.page({ domCache: true });

If you want to cache all pages visited, you could turn on DOM caching using the below code (but keep an eye on the DOM size as it could grow very fast)

$.mobile.page.prototype.options.domCache = true;

You can now observe how caching works with the code inspector open (CTRL+SHIFT+I) in your browser. As you navigate, the visited page is not removed from the DOM and after the first visit, it remains put! You will remember in the previous post, the page div used to get added to the DOM and then removed on every page visit.

Let us visit the code...

Launch - Example with prefetch and DOM cache enabled

mainpage-domcache.html

<!DOCTYPE html>

<html>

<head>

<script>
$.mobile.page.prototype.options.domCache = true;
</script>

</head>

<body>

<h1>Header of Main Page</h1>

</div>

</div>

</body>

</html>

secondpage-domcache.html (to cache single page)

<title>Second Page</title>

<h1>Header of Page 2</h1>

</div>

</div>

Here you will see that the spinning loader doesn't show up. The page is already there in the DOM after the first visit! You can click the links fast and see it still works fine. You can exclude the script to cache everything and try this code with multiple pages and see how caching works.

Just as in real life, there is a flip side to everything positive. Here, you have to be careful how big your DOM grows, as pages keep adding to it. You have to code for the clean up of older pages or pages you no longer need in cache. Mobile devices have limited memory and a bloating DOM could cause misery. So take care !

jQuery Mobile Prefetching pages demo

2011-12-19T18:28:00.002+05:30

Using a single-page template for your mobile app makes your app faster and lighter. But you have to fetch each page during navigation and you end up seeing the ui-loader spinning icon animation every time. It can get to your nerves.

Launch - Example without prefetch

The above example, from my previous post shows how the spinning icon comes up each time you navigate from the main page to page 2. I will not list the code here as its already listed in an earlier post.

In a multi-page template whereas, the entire set of pages are already loaded into the DOM and the navigation is much faster. A similar behavior can be obtained in a single-page application by prefetching pages. This is done by just adding the attribute data-prefetch to all the links that you want to prefetch. As soon as the page loads, it starts fetching these links and loads it into the DOM. You can observe this behavior with the code inspector open (CTRL+SHIFT+I) in your browser. Now navigating to one of these links happens immediately and the spinning loader is no longer shown.

You could also prefetch a link programmatically by using this JavaScript call
$.mobile.loadPage( pageUrl );

The below code shows how data-prefetch works. You can launch it in a separate browser tab.

Launch - Example with prefetch

mainpage.html

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>

<h1>Header of Main Page</h1>

</div>

</div>

</body>

</html>

secondpage.html

<title>Second Page</title>

<h1>Header of Page 2</h1>

</div>

</div>

Here you will see that the spinning loader doesn't show up. (Of course you can click very fast and try to load before the prefetch occurs, the loader shows up only then.)

Great isn't it. But few things you have to take care,

If there are more pages, more http requests are sent out and more bandwidth is required to prefetch
If a page hasn't been fully prefetched, the ui-loader spinner comes up and the page is shown only after the page is completely fetched
This is not same as the browser cache. Once you navigate to a prefetched page, and then navigate to another page, the prefetched page is removed from the DOM.

So use this judiciously to make your jQuery Mobile app navigation smoother to the user.

In my next post I will show how to cache a jQuery Mobile page in DOM and thus avoid the issue of multiple prefetch.

jQuery Mobile Page Transitions with data-ajax=false

2011-12-18T21:18:00.001+05:30

In my earlier post here, I outlined the various page transitions that are available in jQuery Mobile.

In single-page template documents, jQM uses Ajax to smoothly transition between pages and when not possible, the framework does a simple HTTP request to pull in the page. Situations where Ajax transitions are not used are:

When a page loaded is:

from an external domain
data-ajax="false" attribute is used
rel="external" is specified
target attribute is specified

This is also well documented (with examples).

In multi-page template documents, jQM needs Ajax to transition between the multiple page containers. Now lets play with this a bit. Let us try to override this with the data-ajax attribute and see what happens.

Consider below code, you can click on the link below to launch it in a separate browser tab:
Launch

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Transitions Demo with data-ajax="false"</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<p><a href="#page2" data-transition="flip" data-role="button">data-transition="flip"</a></p>
<p><a href="#page2" data-transition="flip" data-role="button" data-ajax="false" data-theme="e">data-transition="flip" data-ajax="false"</a></p>
<p><a href="#page2" data-rel="dialog" data-role="button">data-rel="dialog"</a></p>
<p><a href="#page2" data-rel="dialog" data-role="button" data-transition="pop" data-ajax="false" data-theme="e">data-rel="dialog" data-ajax="false"</a></p>
<p><a href="#page3" data-role="button">data-role="dialog"</a></p>
<p><a href="#page3" data-role="button" data-ajax="false" data-theme="e">data-role="dialog" data-ajax="false"</a></p>
<p><a href="#page3" data-role="button" data-rel="dialog">data-rel="dialog" data-role="dialog"</a></p>
<p><a href="#page3" data-role="button" data-rel="dialog" data-ajax="false" data-theme="e">data-rel="dialog" data-role="dialog" data-ajax="false"</a></p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<a data-role="button" data-rel="back" data-direction="reverse">Back</a>
</div>
</div>
<div data-role="dialog" id="page3">
<div data-role="content">
<a data-role="button" data-rel="back" data-direction="reverse">Back</a>
</div>
</div>
</body>
</html>

When you launch the above code in a browser, you will note one link works properly followed by another link that doesn't. These links are invoked with data-ajax="false" and highlighted here with a yellow theme. You can also open the code inspector (by CTRL+SHIFT+I) and observe how the DOM behaves as you try out the various scenarios.

The entire behavior of transitions in a multi-page template document with data-ajax="false" is not documented at present (see documentation link given earlier). From the above code you will note the following behavior when data-ajax="false" is specified,

DOM is not reloaded everytime since this is a multi-page template document
Only the default slide transition works, even if you specify any other data-transition (2nd button)
If a Dialog is launched by data-rel="dialog", again only slide transition works (not the default pop), even if you specify data-transition="pop" (4th button)
If a Dialog is launched using data-role="dialog", then the transition used is "pop" and any value set in the data-transition attribute is ignored (6th button)
If a Dialog is launched using data-role="dialog", setting the data-rel="dialog" might not be required (7th button)

It is not yet clear if the above behavior is as expected and implemented so, and if only the documentation of jQM needs to be updated. Or maybe JQM should ignore data-ajax="false" in a multi-page template scenario. I have now logged a bug against jQuery Mobile and await feedback on the same https://github.com/jquery/jquery-mobile/issues/3296.

Minimal required code in HTML5

2011-12-16T10:29:00.000+05:30

I've encountered this question repeatedly of late.

"What are the tags required at bare minimum for a html file?"

Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE>A small HTML</TITLE>

</HEAD>

<BODY>

<P>Small HTML file!</P>

</BODY>

</HTML>

Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. This can be done by pressing CTRL+SHIFT+I in both the browsers. You will see the html code rendered by the browser now shown in the inspector. The code matches with the above code.

Now lets look at how things stand today. Welcome HTML5!

<!DOCTYPE html>

Smallest HTML file!

Type the above code in notepad and save it as new.html. Yes just two lines, actually the first line is recommended for HTML5, but for basic stuff even that is not necessary. You can even skip that line for this particular exercise. Now save and open the file in your browser. Voila, the text is there, now open the code inspector. You will see the missing tags have been automatically added by the browser. This is what the code inspector should show:

<!DOCTYPE html>

<html>

<body>Smallest HTML file!</body>

</html>

Great isn't it. Things have been vastly simplified and made easier for the developer. DOCTYPE's earlier used to cause allergic reactions in me. Now it requires just one word "html".

There is one more thing that I wish to highlight. I see so many HTML5 pages still showing this code while using JavaScript,

This can simply be

<script src="....">

There is no need to specify the type attribute. JavaScript is the default. And yes please use small case where possible. Easier on the eyes and the brain!

There are many more wonderful simplifications done in the HTML5 semantics. And there are entire chapters dedicated to this topic in various HTML5 books. But somehow, I keep encountering the above quite often off late and so the post.

jQuery Mobile single-page vs multi-page template

2011-12-15T17:16:00.000+05:30

[Updated 2012/02/09]
In my recent posts I mentioned about jQuery Mobile single-page and multi-page templates, so what exactly are the differences between them?

Single Page Template:

Launch - example from previous post, notice the address shown as you navigate

Lighter and cleaner. Each page is a separate html file and more modular.
Better fallback if JavaScript is not supported. So works well on more platforms, you could even target grade C browsers
On first load, the start page is loaded into the DOM. An internal reference is always held to this. Any new page loaded is added to the DOM. Any previously shown page is removed from the DOM. The start page is always in the DOM.
The DOM size is relatively smaller
Optional to use the "page" data-role element in the code
Can turn off Ajax Navigation between pages using data-ajax="false"
Recommend to use the <title> tag for page titles
The <title> tag always gets precedence during page loads
Consumes more bandwidth as each page navigation generates a new request
Navigating back to a previously loaded page will again generate a fresh request (with DOM caching you can avoid reloading of the same pages multiple times)
First load is faster, but every subsequent page has to be fetched
Suitable for larger applications and situations where you want to target as many platforms as possible including platforms which lack JavaScript support

Multi Page Template:

Launch - example from previous post, notice the address shown as you navigate

Heavier. All the pages are in a single html file.
Needs JavaScript support as Ajax Navigation is used
Multiple page containers are present, and only the first one is shown when page loads
Large applications with many pages will increase the DOM size
The "page" data-role element is required
Using data-ajax="false" for internal pages ignores the data-transition attribute, by default slide is used
Recommend to use the data-title attribute for all page titles
On first load, <title> tag is used and subsequent transitions data-title is used for page titles
Since all pages are already loaded, no additional requests are generated for navigating between pages
First load is slower as the file size is larger, but subsequent page navigation is fast
Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support

jQuery Mobile Recommendations for Page Title

2011-12-15T15:33:00.001+05:30

In my previous two posts, I outlined how page titles are picked up in jQuery Mobile in a single-page and in a multi-page template scenario.

Read them here:
jQuery Mobile data-title behavior with multi-page template
jQuery Mobile data-title behavior in single-page template

Though its a very trivial thing, it is important that the right titles are shown on your pages as you navigate through your mobile HTML5 app.

So we see that there are 3 options available to set the page title,

The <title> tag
The data-title attribute of the page container
The header text in the header container

Now the question is which one to use?
And here are my recommendations,

For the landing page for any app, use the <title> tag, that always is the primary one to use. The document.title gets populated first and use the same.
For multi-page template, use data-title for every page container, including the first container in the document. After first load, every subsequent Ajax transition uses this attribute.
For single-page template, do not use the data-title attribute, every individual html page will have its own <title> tag and let that take precedence by default. Lack of JavaScript support, or not using Ajax transitions (via data-ajax="false"), will still show the correct title from the <title> tag.
The header container (data-role="header") text should better be used for the page header and not the title. No point in having the same title and header, its plain non-intuitive!

So what do you think?

jQuery Mobile data-title behavior in single-page template

2011-12-15T14:05:00.001+05:30

In my previous post, I had visited the behavior of the jQuery Mobile library data-title attribute under different scenarios when using a multi-page template. In this post, I will outline the behavior when using a single-page template.

Consider the below single-page template code. Click here to launch the below code in a separate browser.

Launch

mainpage-title.html

<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>

<h1>Header of Main Page</h1>

</div>

</div>

</body>

</html>

secondpage-title.html

<title>Second Page</title>

<h1>Header of Page 2</h1>

</div>

</div>

This is a working example. Play with it to see how the page transitions occur. Now lets go through the similar scenarios as in previous article:

When you first load this html, main page is displayed, you will first see the title as "Main Page". The <title> tag (document.title) always gets precedence.
If the <title> tag is not present, you will get the address of the page shown as the title.
Now click on the "Go to Page 2" button, you will slide into page 2 and the title is shown as "Page 2 data-title", you will see this is a minimal html file. HTML5 makes semantics much more simpler. Browser knows what to do. Again here, since Ajax transition was used, the data-title is picked up and not the document.title which was "Second Page".
From page 2, click on the "Go Back" button, now main page will open and the title is shown as "Main Page", itself and not the data-title text. This is different from multi-page template behavior. Now why did that happen? The reason here is, when Main page was first loaded, document.title gets populated, which gets precedence and is used. Now every visit to this page uses the same document.title value instead of what is there in data-title attribute. But since page 2 (newly loaded) was via Ajax, the data-title gets picked up first and not the <title> tag. This is the way it is implemented.
Now in the code, remove the data-title attribute for page 2, navigate to page 2, you will see the title shown as "Second Page", now the <title> is picked up.
If <title> was missing in page 2, "Header of Page 2" is displayed, the text from the header.
Now in the code, remove the data-title attribute for main page, navigate to main page from page 2, you will see the title again being shown from the data-title tag this time. So the title is shown as "Mainpage data-title".
Now in the code, remove the entire "header" div from page 2, and also remove the data-title from page 2, now if you navigate into page 2 from the main page, then the current title of main page is used.

So when you compare the behavior of page titles from single-page to multi-page templates, the order of precedence is different while picking the title of page 2 from the <title> tag (as outlined in point 4 above).

jQuery Mobile page transitions simple demo

2011-12-14T00:55:00.001+05:30

jQuery Mobile has amazing Ajax page transitions available by default. This blog post gives a quick example to demonstrate the same.

Click here to launch the below code in a separate browser.
Launch

<!DOCTYPE html>
<html>
<head>
<title>Transitions Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>Pick your transition</h1>
</div>
<div data-role="content">
<p><a href="#page2" data-role="button" data-transition="slide">Slide</a></p>
  <p><a href="#page2" data-role="button" data-transition="slideup">Slideup</a></p>
  <p><a href="#page2" data-role="button" data-transition="slidedown">Slidedown</a></p>
  <p><a href="#page2" data-role="button" data-transition="pop">Pop</a></p>
  <p><a href="#page2" data-role="button" data-transition="fade">Fade</a></p>
  <p><a href="#page2" data-role="button" data-transition="flip">Flip</a></p>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
<h1>Reverse the transition now</h1>
</div>
<div data-role="content">
<p><a href="#" data-role="button" data-rel="back"
data-direction="reverse">Reverse</a></p>
</div>
</div>
</body>
</html>

So there are 6 page transitions are available by default and the data-transition attribute specifies the same.

Slide
Slideup
Slidedown
Pop (best for dialogs)
Fade
Flip

I've also included an option to reverse the most recent page transition and this is done using the data-rel and data-direction attribute as shown. As shown in the docs, adding a data-rel="dialog" attribute to the anchor link will open the page as a dialog.

Simple isn't it. Enjoy !!

jQuery Mobile data-title behavior with multi-page template

2011-12-13T16:18:00.001+05:30

The jQuery Mobile library comes with wonderful Ajax page transition capabilities. But you have to keep a look on the Page title as you navigate between the various pages and I have tried to document the behavior under different scenarios in this blog.

Consider the below code, click the below link to launch the code in a separate window.
Launch

<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>
<body>
<div id="page1" data-role="page" data-title="page 1 data-title">
<div data-role="header">
<h1>H1 Header of Page 1</h1>
</div>
<div data-role="content">
<p><a href="#page2" data-role="button">Go to page 2</a></p>
<p><a href="#dialog" data-role="button" data-ajax="false">Open Dialog</a></p>
</div>
</div>
<div id="page2" data-role="page" data-title="page 2 data-title">
<div data-role="header">
<h1>H1 Header of Page 2</h1>
</div>
<div data-role="content">
<p><a href="#page1" data-role="button">Go to page 1</a></p>
</div>
</div>
<div id="dialog" data-role="dialog" data-title="dialog data-title">
<div data-role="header">
<h1>H1 Header of Dialog</h1>
</div>
<div data-role="content">
<p><a href="#" data-rel="back" data-role="button">Back</a></p>
</div>
</div>
</body>
</html>

This is a working example. Play with it to see how the page transitions occur. Now lets go through the various scenarios:

When you first load this html, page 1 is displayed, you will first see the title as "Main Page". The <title> tag (document.title) always gets precedence.
If the <title> tag is not present, you will get the address of the page shown as the title.
Now click on the "Go to page 2" button, you will slide into page 2 and the title is shown as "page 2 data-title", ah so the data-title attribute is now working. So whenever an Ajax transition is used, the data-title is picked.
From page 2, click on the "Go to page 1" button, now page 1 will open and the title is shown as "page 1 data-title", ignoring the <title> tag even if it is present or not. Again Ajax transition. But not always !!!
Now in the code, remove the data-title attribute for page 2, navigate to page 2, you will see the title shown as "H1 Header of Page 2". So if the data-title attribute is missing, the text from the header is picked up.
Now in the code, remove the data-title attribute for page 1, navigate to page 1 from page 2, you will see the title again being shown from the <title> tag, if the <title> tag was not present, then the title is shown as "H1 Header of Page 1".
Now in the code, remove the entire "header" div from page 2, and also remove the data-title from page 2, now if you navigate into page 2 from page 1, if page 1 had <title> then that text is shown as the page 2 title, if page 1 didn't have the <title> tag, then the current title of page 1 is carried to page 2.

One could add a data-role="dialog" and view the same sort of behavior with dialogs. Dialogs also support data-title attribute. As per jQuery Mobile docs, even the headers (data-role="header") support the data-title attribute, but for some reason I just couldn't get it to work.

I feel point 6 above and the non working header data-title attributes are bugs in jQuery Mobile 1.0. Have to cross check further and log the same against jQuery Mobile.

5:30pm Updated:
For point 6 above: It is working as expected and not a bug. The internal implementation of jQuery mobile is that, the multiple pages are loaded and stacked, when a specific page link is clicked, jQuery Mobile gets that specific internal page and transition it into view. Here, page 1 was already available with document.title set to Main Page, so the same was shown in spite of Ajax navigation. If the <title> tag was not present, then the header text is used.

I have now logged a bug against jQuery Mobile for the data-title attribute under the Header: https://github.com/jquery/jquery-mobile/issues/3259

Read the next part of this post on how these scenarios play out in a single-page template.

autofocus to multiple controls in HTML5

2011-10-31T15:06:00.002+05:30

The HTML5 spec says:

There must not be more than one element in the document with the autofocus attribute specified.

Excellent, so what happens if you set multiple elements with the autofocus attribute? And in various browsers? Results below ...

Autofocus not supported:

IE9

First Element gets the focus:

IE 10 preview, FF

The last element gets the focus:

Chrome, Opera, Safari

Though its up to the User Agents to implement the behavior, I prefer the Webkit implementation of this feature compared to that of Mozilla and Trident.

Why?

HTML5 says that browsers should gracefully degrade. They should try to render whatever possible. Not being strict that is. So if a browser stops with the first autofocus, one will never know if there were more than one autofocus elements in the document. But, if the browser renders and sets every autofocus as it parses the document, thus stopping at the last autofocus, the developer will immediately know something is amiss and correct/remove the unwanted autofocus. An added advantage one can thus get with webkit.

Patent for a single shared profile service

2011-07-24T23:03:00.001+05:30

I have faced this problem multiple times. And its damn frustrating. Yes, I'm talking about the ten different places my profile is or was on the web. Google, Google apps account, LinkedIn, Twitter, FB and heaven knows where else. Any change in status or the way I want my profile to be worded, I have to remember and go and update all these places. Its a pain in all the wrong places. Trust me.

Then I thought, someone must be providing such a shared profile service. You update your profile just one place and then push it to all these various social networks and web sites. I searched. Found nothing. I searched hard, asked my friends about this. Nothing! Zilch!! There were a few websites, that were almost there, but not exactly what I wanted. Gravatar has this for one's avatar. So why not something for profiles? Nopes.

Then I had an enlightenment! Why not build this service and provide to the users on the web. I had an even better idea, why not patent it. Provide such a wonderful service that I attract users in thousands and maybe sell my startup. Dreams!! Day dreams!! You usually wake up soon :P

I searched for a few hours, I finally found that there is already patent number 7840690 taken out for this idea. Way back in 2008, by the Go Daddy Inc group. Exactly the same stuff :(

Damn! Double Damn!

Well if the US is taken, there are other countries. Why, India doesn't even recognize the concept of a software patent, the concept was squashed way back in 2005! Or maybe the whole concept of patent is not in the spirit of open source. Open Source is good isn't it?

So finally, is someone out there who is already building this service? Can they please publish it at the earliest? Anyways, me -- I'm now waiting for the next great idea.

Developing for Android: HTML5 and Qt

2011-07-17T09:11:00.001+05:30

Recently read a post by my friend and ex-collegue Sai Geetha on her very famous Android blog. I am now reading her blog to start learning a bit about Android development. In her most recent post, she has listed 4 ways for developing in Android.

1. Using the Software Development Kit (SDK) with Java
2. Native Development Kit using C / C ++.
3. RenderScript using C99 - used to write faster graphics code like the Google Books page turn animation etc.
4. Android Scripting Layer using Python etc.

Just thought I'll extend the above further and add a couple of thoughts to this list...

The trend now and what is gaining a lot of traction is developing cross platform apps. So you develop once and can deploy it on multiple platforms. Java showed this promise earlier, but is slowly making way for the newer and greater things out there. One should see how the recently released Java7 will perform. And Java is still the greatest thing for Android development today. Java is also the recommended way of development for S40, the most popular set of Nokia devices. But is the spectrum changing?

Extending point 2 listed by Sai Geetha above, I would also like to draw the reader's attention to the Qt framework developed by Nokia (which acquired Trolltech). Qt is a very easy to use cross platform development framework on C++. You basically write your apps once and can compile it to multiple platforms. Already well supported on desktops (Windows, Linux, Mac), mobiles (Symbian, MeeGo) and embedded Linux platforms.

Now the Qt community has also come up with Necessitas, the Android port of Qt. One just needs to Google on this topic and you'll see quite a bit already out there, and many great demos too. So imagine, you develop your apps with Qt and can target both Android and Symbian/MeeGo devices at the same time. Thats a huge number!

But Qt is not being supported on Nokia's new primary platform, the Windows phone. Would the community take this up too? Who can stop the community?

Extending her point 4 above, Nokia has has introduced Qt Quick (QML), a scripting layer on top of the Qt framework. Quick brings in very fluid and eye catching UX to Qt apps. Most of the logic would be written using JavaScript. Very rarely would developers have to tweak the underlying C++ components. At least that is the goal. So how well QML does on top of Android is something to look forward too.

In addition to the 4 ways listed above, there is a 5th way, which I think will supercede all the other ways eventually (at least for most of the use cases), and that is developing apps using HTML5, CSS and JS. So you write code once and thats it, it will work everywhere and no recompilation required too. HTML5 widgets are catching on very fast, and its no longer just restricted for web development! So with HTML5, its no plugins, no additional layers, but just pure JavaScript. One would revert to native code rarely, where absolutely no support is available with HTML5. This "not supported" list is shrinking by the day. Today people are writing very fast web servers like Node.js using JS, and one can only wait for how the whole thing will play out. I for one, am betting big time on this 5th horse.

It was Steve Jobs who set the ball rolling with his no Flash support in his famous open letter. Soon everyone was on board. Now with the recently announced Windows 8 platform, Microsoft too has jumped on the HTML5 bandwagon. HTML5 would be their primary development platform (with of course "backward compatibility" with Silverlight, .Net etc etc frameworks) :D I just love Adobe, they are totally into authoring tools and not married to anything, including flash. I'm seeing a lot of HTML5 authoring capabilities in their upcoming tools.

HTML5 still has a long way to go, many quirks to be sorted out. But to conclude, you would need to write code once with HTML5 technologies and you can target all desktop and all mobile platforms out there. Great! Just great!

So what do you think? Do you know of more ways doing Android development? Most importantly, have you started looking at HTML5 technologies?

Pageviews: FF vs Chrome vs IE

2011-07-15T08:53:00.001+05:30

http://blog.chetankjain.net is a new blog and so the page visits are gradually picking up. Recently crossed a 1000 page views and Google stats throws up a nice picture on how the platform and browser split amongst the audience is.

Overall the ratio generally follows the current market trends. I've been following the trend regularly on my site and not surprising to see how Chrome is raising almost every week.

Solutions: Object Oriented JavaScript: 3. Functions

2011-07-01T10:17:00.002+05:30

Previous: Chapter 2: Primitives

Chapter 3: Functions

1. Write a function that converts a hexadecimal color, for example blue "#0000FF", into its RGB representation "rgb(0,0,255)". Name your function getRGB() and this it with this code:

  var a = getRGB("#00FF00");

  a;       

  rgb(0,255,0)

  //Simple logic for getRgb()  

  var getRGB = function f(hexColor) {

    var result = "rgb(";   

    result += parseInt("0x"+hexColor[1]+hexColor[2]) + ", ";

    result += parseInt("0x"+hexColor[3]+hexColor[4]) + ", ";

    result += parseInt("0x"+hexColor[5]+hexColor[6]) + ")";

    return result;

}

  >> getRGB("#0000FF");

  "rgb(0, 0, 255)"

  >> getRGB("#00FF00");

  "rgb(0, 255, 0)"

2. What does each of these lines print in the console?

    >> parseInt(1e1)

    10    //1e1 is evaluated first

    >> parseInt('1e1')

1

    >> parseFloat('1e1')

    10    //parseFloat evaluates exponential in string

    >> isFinitie(0/10)

    true

    >> isFinite(20/0)

    false

    >> isNaN(parseInt(NaN));

    true

3. What does the following code alert()?

  >> var a = 1;

  function f() {

    var a = 2;

    function n() {

      alert(a);

}

    n();

}

  f();

// It alerts 2. alert(a) has first access to the local variable a in f() which is defined as 2.

4. All these examples alert "Boo!". Can you explain why?

4.1  var f = alert; 

     eval('f("Boo!")');

f is assigned the function alert and eval executes the script in string by passing 'Boo!' as parameter.

4.2  var e;

     var f = alert;

     eval('e=f')('Boo!");

f is assigned the function alert and eval further assigns alert to e and executes the script in string by passing 'Boo!' as parameter.

4.3  (

       function() {

         return alert;

}

     )() ('Boo!');

function() is a self invoking anonymous function that returns the method alert which is executed immediately by passing 'Boo!' as parameter.

Next: 4. Objects coming soon ...