tag:blogger.com,1999:blog-76706171781325659492024-03-13T16:15:22.638+05:30dev.chetankjain.netchetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.comBlogger41125tag:blogger.com,1999:blog-7670617178132565949.post-12502986675596896672021-05-20T17:41:00.001+05:302021-05-20T17:41:04.747+05:30Python Python Python - Everywhere<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-DuDfRyfSr6k/YKZRxABiSlI/AAAAAAAAWWA/27RhwQFMpL0nGg0u6tHlyNzzIWtT5zbkgCLcBGAsYHQ/s792/Coursera%2B-%2BUniversity%2Bof%2BMichigan%2B-%2BPython%2Bfor%2BEverybody.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="612" data-original-width="792" height="494" src="https://1.bp.blogspot.com/-DuDfRyfSr6k/YKZRxABiSlI/AAAAAAAAWWA/27RhwQFMpL0nGg0u6tHlyNzzIWtT5zbkgCLcBGAsYHQ/w640-h494/Coursera%2B-%2BUniversity%2Bof%2BMichigan%2B-%2BPython%2Bfor%2BEverybody.jpg" width="640" /></a></div><br /> <p></p>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-69444000496354718622021-05-20T17:40:00.001+05:302021-05-20T17:40:19.783+05:30MATLAB DeepLearning Certificate<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-CVX9z7KJu2o/YKZRQWNNz5I/AAAAAAAAWV4/ZSOIVv6JGaYV349HM-jTR6PYNgZUyOm8ACLcBGAsYHQ/s841/MatLab%2BDeepLearning%2BOnRamp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="595" data-original-width="841" height="396" src="https://1.bp.blogspot.com/-CVX9z7KJu2o/YKZRQWNNz5I/AAAAAAAAWV4/ZSOIVv6JGaYV349HM-jTR6PYNgZUyOm8ACLcBGAsYHQ/w561-h396/MatLab%2BDeepLearning%2BOnRamp.jpg" width="561" /></a></div><br /> <p></p>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-40480895899348582062019-03-07T10:25:00.002+05:302020-11-12T11:34:22.494+05:30Review: Elon Musk by Ashlee Vance<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; min-height: 14.0px}
</style>
<br />
<div class="p1">
Elon Musk has been called eccentric, egomaniac and outright crazy by his detractors. </div>
<div class="p1">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://images-eu.ssl-images-amazon.com/images/I/5179mrE%2BWWL._SY445_QL70_.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="445" data-original-width="279" height="320" src="https://images-eu.ssl-images-amazon.com/images/I/5179mrE%2BWWL._SY445_QL70_.jpg" width="200" /></a></div>
</div>
<div class="p1">
That said, Ashlee Vance presents a well researched unbiased biography of Musk, after talking to people from all walks of his life, people from both the pro and anti Musk groups. My verdict -> it is an amazing book and very well narrated by Fred Sanders. Yes books these days mean ‘Audible’ to me as I go through my daily morning biking.</div>
<div class="p2">
<br /></div>
<div class="p1">
Musk had a very difficult childhood and came to the US with absolutely no wealth. But his ambition to change the world and his brilliant mind has made him a billionaire today. He has created ‘history changing’ companies like SpaceX, Tesla, SolarCity and many more. Probably history will look back at him and worship him as one of the top contributors to humanity and its survival. The real life iron man.</div>
<div class="p1">
<br /></div>
<div class="p1">
Musk has set out to correct humanity’s path - a path towards sustainable energy and clean earth, and to turn us to a multi planet species. We don’t want to end up like the dinos. He has single handedly done what the rest of the countries and century old companies thought and declared as impossible. He is shaping our future. Him giving away all of Tesla’s patents in 2014 so that everyone goes electric is proof of the man’s intentions.</div>
<div class="p2">
<br /></div>
<div class="p1">
The book is very inspiring and makes you introspect. It makes you to want to go out and do better - to the best of your abilities and beyond and to never give up…</div>
<div class="p2"><br /></div>
<div class="p2">
<br /></div>
<br /></div>
chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-88951560764924782442019-03-02T14:46:00.000+05:302019-03-02T14:46:22.747+05:30AI for Everyone<div dir="ltr" style="text-align: left;" trbidi="on">
Few days ago, Coursera launched the '<a href="https://www.coursera.org/learn/ai-for-everyone" target="_blank">AI for Everyone</a>' online non-technical course by <a href="https://www.deeplearning.ai/" target="_blank">deeplearning.ai</a> conducted by the famous <a href="https://en.wikipedia.org/wiki/Andrew_Ng" target="_blank">Andrew NG</a> himself.<br />
<br />
'AI for Everyone' gives a very good introduction to AI and you don't have to be a techie to understand this course. It is useful regardless of your background or your current job role. This is a course even CEOs and business leaders can take to get a quick insight of what AI can and can't do. It will provide pointers on how you can get your company and/or your career ready to ride the coming wave of AI. AI is already here and Andrew keeps repeating it is the next Electricity for us. The course provides practical steps and checklists to get you started with your first AI project.<br />
<br />
I enjoyed the learning.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-BDP0d0p6ykc/XHpJfldvf-I/AAAAAAAAVH8/NAfh9yW5s7k0LMkzXp15g8T9GY0miGWVACLcBGAs/s1600/Screenshot%2B2019-03-02%2Bat%2B10.21.51%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="974" data-original-width="1256" height="496" src="https://2.bp.blogspot.com/-BDP0d0p6ykc/XHpJfldvf-I/AAAAAAAAVH8/NAfh9yW5s7k0LMkzXp15g8T9GY0miGWVACLcBGAs/s640/Screenshot%2B2019-03-02%2Bat%2B10.21.51%2BAM.png" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br /></div>
chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-14320061575459992362019-02-25T00:44:00.000+05:302019-02-25T00:44:09.357+05:30MATLAB Onramp course<div dir="ltr" style="text-align: left;" trbidi="on">
I recently registered for the Machine Learning, Stanford University online course at Coursera - conducted by the famous Andrew Ng himself. An amazing experience I must say. He puts across the concepts so well that even your lack of advanced Math knowledge is not a barrier and you soon pick up the concepts quite well. The quizzes and assignments are real good.<br />
<br />
As part of this course you have to submit your ML algorithms in either Octave or Matlab and I chose the latter. Did a quick online self paced course on Matlab at Mathworks, which was quite interesting and lo and behold the completion certificate is seen below 😊<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-SChsEJEwCJo/XHLsuzf5FtI/AAAAAAAAVHs/V94uMCctc0UAv9GAj0rAeOBz3fGsEtPYwCLcBGAs/s1600/Screenshot%2B2019-02-25%2Bat%2B12.42.22%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1074" data-original-width="1512" height="282" src="https://2.bp.blogspot.com/-SChsEJEwCJo/XHLsuzf5FtI/AAAAAAAAVHs/V94uMCctc0UAv9GAj0rAeOBz3fGsEtPYwCLcBGAs/s400/Screenshot%2B2019-02-25%2Bat%2B12.42.22%2BAM.png" width="400" /></a></div>
<br /></div>
chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-56421876518074493622019-02-14T00:11:00.000+05:302019-02-18T10:26:11.476+05:30Sapiens, Homo Deus & 21 Lessons for the 21st Century<div dir="ltr" style="text-align: left;" trbidi="on">
Posting after a long long time and this is not a post on development.<br />
<br />
Just finished listening to these 3 mind blowing audio books @ Audible by Yuval Noah Harari <a href="https://www.ynharari.com/" target="_blank">https://www.ynharari.com/</a><br />
<br />
<ul style="text-align: left;">
<li>Sapiens</li>
<li>Homo Deus</li>
<li>21 Lessons for the 21st Century</li>
</ul>
<br />
Amazing the way he describes -- how we became the number one species on this planet and the unknown future that we are heading into.<br />
<br />
Some very interesting topics that I personally liked:<br />
<br />
1. How tech (AI, ML etc) are going to change and affect everything and everyone<br />
2. A world run by algorithms<br />
3. Humans now trying to evolve into "Gods" - Immortal, Omnipresent and Omniscient<br />
4. Billions of years of Organic evolution vs Human invented Inorganic rapid evolution<br />
<br />
Do read these books and they will seed many new ideas and thoughts in you.<br />
<br />
Next onto Elon Musk's biography...<br />
<br />
<br /></div>
chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-40274351016807744592013-01-30T10:41:00.001+05:302020-11-12T11:07:13.952+05:30Winners of the jQuery Mobile Cookbook giveaway<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<span face="Verdana, sans-serif">I had earlier announced that I would be giving away 2 copies of my book, jQuery Mobile Cookbook <a href="http://dev.chetankjain.net/2012/12/sweepstakes-giving-away-2-free-copies.html" target="_blank">here</a>. I wish to thank all the participants who sent in their entries from across the world. Thrilled by your response. </span></div>
<div>
<br />
<span face="Verdana, sans-serif">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:</span><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif" style="font-size: x-large;">Congratulations !!!</span><br />
<span face="Verdana, sans-serif" style="font-size: x-large;"><br /></span>
<span face="Verdana, sans-serif">Winner of the hard copy from India: </span><i style="background-color: white; color: #222222; font-family: Verdana, sans-serif;"><b>Vasudevan P</b></i><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif">Winner of the e-book from Spain: </span><span style="background-color: white; color: #222222;"><span face="Verdana, sans-serif"><i><b>Miguel Angel</b></i></span></span><br />
<br />
<br />
<span face="Verdana, sans-serif">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.</span><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif">Thanks again to all those who participated!</span><br />
<br />
<br />
<span face="Verdana, sans-serif">Link to the book: </span><a href="https://www.packtpub.com/product/jquery-mobile-cookbook/9781849517225" style="font-family: Verdana, sans-serif;">http://www.packtpub.com/jquery-mobile-cookbook/book</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Z7vvrFVzGTc/X6zJ7LAIOVI/AAAAAAAAWH0/RLaKziI2evYRyzcHZh7hKewvvshlFKqOQCLcBGAsYHQ/s1242/Screenshot%2B2020-11-12%2Bat%2B11.04.17%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1242" data-original-width="996" height="320" src="https://1.bp.blogspot.com/-Z7vvrFVzGTc/X6zJ7LAIOVI/AAAAAAAAWH0/RLaKziI2evYRyzcHZh7hKewvvshlFKqOQCLcBGAsYHQ/s320/Screenshot%2B2020-11-12%2Bat%2B11.04.17%2BAM.png" /></a></div></div>
<br />
<span face="Verdana, sans-serif"><br /></span><span face="Verdana, sans-serif">Extract from the publisher website:</span><br />
<span face="Verdana, sans-serif"><br /></span><span face="Verdana, sans-serif"><b>Overview:</b></span><br />
<br />
<ul style="background-color: white; border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 18px; list-style: none; margin: 0px; padding: 0px;">
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Create applications that use custom animations and use various techniques to improve application performance</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use and customize the various controls such as toolbars, buttons, and lists with custom icons, icon sprites, styles, and themes</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Write simple but powerful scripts to manipulate the various configurations and work with the events, methods, and utilities which are provided by the framework</li>
</ul>
<br />
<br />
<b><span face="Verdana, sans-serif">What you will learn from this book:</span></b><br />
<br />
<ul style="background-color: white; border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 18px; list-style: none; margin: 0px; padding: 0px;">
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Create single-page and multi-page applications that use custom CSS and JavaScript transitions; improve performance using Prefetch, DOM-Cache, and Application Cache</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use fixed and full screen toolbars, navbars, and buttons; customize them with your own icons, icon sprites, and styles</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use XML and JSON data in your application; format page content using layout grids, collapsibles, and nested accordions</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Build accessible forms; use form controls like flip switches, sliders, and select menus; validate and submit forms using Ajax</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use various types of lists such as Inset, Numbered, Nested, Read-only, and Split Button lists; manipulate lists using JavaScript</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use JavaScript to dynamically create and initialize controls, load and change pages, handle events; tweak and customize the framework configurations</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Explore HTML5 semantics and features such as Local Storage, Session Storage, History, 2D Canvas, 3D, Geolocation, Web Workers, Audio, and Video</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use custom fonts and backgrounds, upgrade themes, override existing themes; generate and share new themes using the Theme Roller tool</li>
</ul>
<br /></div>
</div>
chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-36200315957806514502012-12-08T12:41:00.001+05:302020-11-12T11:09:26.014+05:30Giving away 2 free copies of jQuery Mobile Cookbook<div dir="ltr" style="text-align: left;" trbidi="on">
<span face="Verdana, sans-serif">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 <b>jQuery Mobile Cookbook</b> just got published by Packt Publishers. The link is here: <a href="https://www.packtpub.com/product/jquery-mobile-cookbook/9781849517225">http://www.packtpub.com/jquery-mobile-cookbook/book</a></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-HedrVsVpSrE/X6zKcm-d96I/AAAAAAAAWH8/QeHak3tzHK4vrpeIm0dYF0bGnaZa71z1QCLcBGAsYHQ/s1242/Screenshot%2B2020-11-12%2Bat%2B11.04.17%2BAM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1242" data-original-width="996" height="320" src="https://1.bp.blogspot.com/-HedrVsVpSrE/X6zKcm-d96I/AAAAAAAAWH8/QeHak3tzHK4vrpeIm0dYF0bGnaZa71z1QCLcBGAsYHQ/s320/Screenshot%2B2020-11-12%2Bat%2B11.04.17%2BAM.png" /></a></div><br /><a href="http://www.packtpub.com/sites/default/files/7225OS_jQuery%20Mobile%20Cookbook.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://www.packtpub.com/sites/default/files/7225OS_jQuery%20Mobile%20Cookbook.jpg" width="258" /></a></div>
<br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif">Extract from the publisher website:</span><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif"><b>Overview:</b></span><br />
<br />
<ul style="background-color: white; border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 18px; list-style: none; margin: 0px; padding: 0px;">
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Create applications that use custom animations and use various techniques to improve application performance</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use and customize the various controls such as toolbars, buttons, and lists with custom icons, icon sprites, styles, and themes</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Write simple but powerful scripts to manipulate the various configurations and work with the events, methods, and utilities which are provided by the framework</li>
</ul>
<br />
<br />
<b><span face="Verdana, sans-serif">What you will learn from this book:</span></b><br />
<br />
<ul style="background-color: white; border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 18px; list-style: none; margin: 0px; padding: 0px;">
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Create single-page and multi-page applications that use custom CSS and JavaScript transitions; improve performance using Prefetch, DOM-Cache, and Application Cache</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use fixed and full screen toolbars, navbars, and buttons; customize them with your own icons, icon sprites, and styles</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use XML and JSON data in your application; format page content using layout grids, collapsibles, and nested accordions</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Build accessible forms; use form controls like flip switches, sliders, and select menus; validate and submit forms using Ajax</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use various types of lists such as Inset, Numbered, Nested, Read-only, and Split Button lists; manipulate lists using JavaScript</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use JavaScript to dynamically create and initialize controls, load and change pages, handle events; tweak and customize the framework configurations</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Explore HTML5 semantics and features such as Local Storage, Session Storage, History, 2D Canvas, 3D, Geolocation, Web Workers, Audio, and Video</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font: inherit; line-height: 1.5em; list-style-image: url(http://cdn2.cf.packtpub.com/sites/default/files/new-design-assets/orange-bullet.png); list-style-type: disc; margin: 0px 0px 0px 2em; padding: 0px;">Use custom fonts and backgrounds, upgrade themes, override existing themes; generate and share new themes using the Theme Roller tool</li>
</ul>
<br />
<br />
<span face="Verdana, sans-serif">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...</span><br />
<span face="Verdana, sans-serif"><br /></span>
<b><i><span face="Arial, Helvetica, sans-serif" style="font-size: large;">!!! Now comes the best part !!!</span></i></b><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif"><i>One lucky winner from anywhere in the world will get a free ebook copy. </i></span><br />
<span face="Verdana, sans-serif"><i>One lucky winner from anywhere in India will get a free printed copy.</i></span><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif">So rush now. Send me a direct email at <a href="mailto:chetankjain@gmail.com">chetankjain@gmail.com</a> with the below subject.</span><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif">Email Subject: </span><br />
<span style="font-family: Courier New, Courier, monospace;"><b>From <Country Name>, I want to read the jQuery Mobile Cookbook</b></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;">e.g. </span><br />
<span style="font-family: Courier New, Courier, monospace;"><b>From India, I want to read the jQuery Mobile Cookbook</b></span><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif">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.</span><br />
<span face="Verdana, sans-serif"><br /></span>
<span face="Verdana, sans-serif">Last day to participate and send in your email is GMT Midnight Sunday Dec 16, 2012.</span><br />
<br /></div>
chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com3tag:blogger.com,1999:blog-7670617178132565949.post-5334335718776964572012-05-17T09:06:00.002+05:302012-05-17T09:10:05.930+05:30Node.js: Notes on Install and Upgrade on Ubuntu<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="font-family: Verdana,sans-serif;">
To install Node.js, first install the below prerequisite and add the node.js repository.</div>
<pre style="color: blue; font-family: "Courier New",Courier,monospace;"><code># sudo apt-get install python-software-properties
# sudo apt-add-repository ppa:chris-lea/node.js </code></pre>
<pre style="font-family: Verdana,sans-serif;"><code></code>Now install Node.js and npm (the Node Packet Manager).</pre>
<pre style="color: blue; font-family: "Courier New",Courier,monospace;"><code># sudo apt-get update
# sudo apt-get install nodejs npm</code></pre>
<pre style="font-family: Verdana,sans-serif;"><code></code>Thats it. Your Node.js is ready. Test by running the below command.</pre>
<pre style="color: blue; font-family: "Courier New",Courier,monospace;"><code># node -v</code></pre>
<pre style="color: blue; font-family: Arial,Helvetica,sans-serif;"><i><code>v0.6.18</code></i></pre>
<pre style="font-family: "Courier New",Courier,monospace;"><code></code><span style="font-family: Verdana,sans-serif;">Node.js stable releases </span><code style="font-family: Verdana,sans-serif;"></code><span style="font-family: Verdana,sans-serif;">are done quite frequently. To upgrade run,</span></pre>
<div style="color: blue;">
<code># sudo apt-get update</code><br />
<code></code></div>
<pre style="font-family: Verdana,sans-serif;"><code style="color: blue;"># sudo apt-get upgrade nodejs npm </code><code> </code></pre>
<pre style="font-family: Verdana,sans-serif;"><code></code>You could also use the Ubuntu Update Manager to do the update.</pre>
<pre style="font-family: Verdana,sans-serif;"></pre>
<pre style="font-family: Verdana,sans-serif;"></pre>
<pre style="font-family: Verdana,sans-serif;">If you are the kind who prefers to directly build from the sources then,</pre>
<pre style="color: blue; font-family: Verdana,sans-serif;"><code># cd <directory></code>
<code># sudo wget http://nodejs.org/dist/v0.6.18/node-v0.6.18.tar.gz</code><code></code><code></code></pre>
<div style="color: blue;">
<code># sudo tar -zxf node-v0.6.18.tar.gz</code></div>
<div style="color: blue;">
<code># cd node-v0.6.18 </code></div>
<div style="color: blue;">
<code># sudo ./configure</code></div>
<div style="color: blue;">
<code># sudo make</code></div>
<div style="color: blue;">
<code># sudo make install</code></div>
<div style="color: blue;">
<code># node -v</code></div>
<pre style="color: blue; font-family: Arial,Helvetica,sans-serif;"><i><code>v0.6.18</code></i></pre>
<pre style="font-family: Verdana,sans-serif;"><code></code>The latest version was v0.6.18 at the time of writing this post.</pre>
<pre style="font-family: Verdana,sans-serif;"></pre>
<pre style="font-family: Verdana,sans-serif;">For other platforms, installation is simple. See the <a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager" target="_blank">Node.js installation web page</a>.</pre>
</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com2tag:blogger.com,1999:blog-7670617178132565949.post-65136698740012386482012-04-24T03:37:00.000+05:302012-04-24T03:37:33.811+05:30Ubuntu: Easy steps to install and use Notepad++ and IE on Ubuntu<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
The solution is to use Wine and boy does it taste good!<br />
<br />
First install wine<br />
<div style="color: blue; font-family: "Courier New",Courier,monospace;">
# sudo apt-get install wine</div>
<br />
Download the latest notepad++ installer from <a href="http://notepad-plus-plus.org/">http://notepad-plus-plus.org/</a> and launch it using wine.<br />
<br />
<div style="color: blue; font-family: "Courier New",Courier,monospace;">
# sudo wine <download folder>/npp.xxx.Installer.exe</div>
<br />
<br />
This will launch the Npp installer and you can complete the fairly simple installation. Thats it, you are done !<br />
<br />
Now you can just launch Npp and its a touchdown !<br />
<div style="color: blue; font-family: "Courier New",Courier,monospace;">
# cd ~/.wine/drive_c/Program Files/Notepad++</div>
<div style="color: blue; font-family: "Courier New",Courier,monospace;">
</div>
<span style="color: blue; font-family: "Courier New",Courier,monospace;"># ./notepad++.exe </span><br />
<br />
There is a version of IE available too <br />
<div style="color: blue; font-family: "Courier New",Courier,monospace;">
# cd ~/.wine/drive_c/Program Files/Internet Explorer </div>
<div style="color: blue; font-family: "Courier New",Courier,monospace;">
# ./iexplore.exe</div>
<br />
This IE scores pretty decent on <a href="http://www.html5test.com/">www.html5test.com</a>.<br />
<br />
Now how about try installing other Windows apps on Ubuntu and having more fun...<br />
<br /></div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com6tag:blogger.com,1999:blog-7670617178132565949.post-90809729542767757872012-04-10T23:43:00.001+05:302013-01-30T16:54:01.376+05:30Fixing Date, Time and Zone on RHEL 6 command line<div dir="ltr" style="text-align: left;" trbidi="on">
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:<br />
<br />
Check to see if your date and timezone settings are accurate:<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># date</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># cat /etc/sysconfig/clock</span><br />
<br />
The server I accessed had wrong settings for both the commands. Here are the steps I used to correct:<br />
<br />
Find out your timezone from the folder /usr/share/zoneinfo<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># ls /usr/share/zoneinfo</span><br />
<br />
Mine was pointing to America/EDT instead of <span style="color: #274e13; font-family: 'Courier New', Courier, monospace;"><b><i>Asia/Calcutta</i></b></span><br />
<br />
Update and save the /etc/sysconfig/clock file to<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># sudo vi /etc/sysconfig/clock</span><br />
<span style="color: #274e13; font-family: 'Courier New', Courier, monospace;"><i><b>ZONE="Asia/Calcutta"</b></i></span><br />
<span style="color: #274e13; font-family: 'Courier New', Courier, monospace;"><i><b>UTC=true</b></i></span><br />
<span style="color: #274e13; font-family: 'Courier New', Courier, monospace;"><i><b>ARC=false</b></i></span><br />
<br />
Remove the /etc/localtime<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># sudo rm /etc/localtime</span><br />
<br />
Create a new soft link to your time zone<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># cd /etc</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># ls -al localtime</span><br />
Now it should show the link to your time zone<br />
<br />
Set your hardware clock to UTC<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># sudo hwclock --systohc --utc</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># hwclock --show</span><br />
<br />
Update your time from a NTP server (Red Hat NTP server used here)<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># sudo ntpdate clock.redhat.com</span><br />
<span style="color: #274e13; font-family: 'Courier New', Courier, monospace;"><b><i>10 Apr 22:08:27 ntpdate[25695]: adjust time server 66.187.233.4 offset 0.004185 sec</i></b></span><br />
<br />
Finally verify the date now<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">#date --utc</span><br />
<span style="color: #274e13; font-family: 'Courier New', Courier, monospace;"><b><i>Tue Apr 10 16:39:56 UTC 2012</i></b></span><br />
<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">#date</span><br />
<span style="color: #274e13; font-family: 'Courier New', Courier, monospace;"><b><i>Tue Apr 10 22:09:58 IST 2012</i></b></span><br />
<br />
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: <a href="https://support.ntp.org/bin/view/Servers/StratumOneTimeServers">https://support.ntp.org/bin/view/Servers/StratumOneTimeServers</a></div>
chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com16tag:blogger.com,1999:blog-7670617178132565949.post-79014115982178135092012-03-26T16:06:00.004+05:302012-04-10T23:54:52.139+05:30CouchDB on RHEL6 (Red Hat Enterprise Linux)<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span style="font-family: Times, 'Times New Roman', serif;">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:</span><br />
<span style="font-family: Times, 'Times New Roman', serif;"><br /></span><br />
<b><span style="font-family: Times, 'Times New Roman', serif;">1. Get the Prerequisites</span></b><br />
<span style="font-family: Times, 'Times New Roman', serif;">First you will have to add the RPM Forge YUM Repository if not already available. Add the new repo:</span><br />
<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo vi /etc/yum.repos.d/rpmforge.repo</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># Name: RPMforge RPM Repository for Red Hat Enterprise 6 - dag</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># URL: http://rpmforge.net/</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"># (Put "x86_64" instead of "i386" if appropriate.)</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">[rpmforge]</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">name = Red Hat Enterprise $releasever - RPMforge.net - dag</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">baseurl = ftp://ftp.pbone.net/mirror/atrpms.net/el6-i386/atrpms/stable</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">enabled = 1</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">protect = 0</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">gpgcheck = 0</span><br />
<br />
<span style="font-family: Times, 'Times New Roman', serif;">Save the file and get the prerequisites:</span><br />
<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo yum clean all</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo yum groupinstall 'Development Tools' 'Development Libraries' 'GNOME Software Development'</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo yum install \</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"> cvs zip gcc-c++ glib2-devel gtk2-devel fontconfig-devel libnotify-devel \</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"> libIDL-devel alsa-lib-devel libXt-devel freetype-devel pkgconfig \</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"> dbus-glib-devel curl-devel autoconf213 xorg-x11-proto-devel libX11-devel \</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"> libXau-devel libXext-devel wireless-tools-devel glibc-static libstdc++-static \</span><br />
<span style="color: blue;"><span style="font-family: 'Courier New', Courier, monospace;"> yasm </span><span style="font-family: 'Courier New', Courier, monospace;">mesa-libGL-devel esound-libs esound-devel ccache mercurial glibc-devel \</span></span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"> ncurses-devel openssl-devel libicu-devel erlang js-devel libtool which make</span><br />
<br />
<span style="font-family: Times, 'Times New Roman', serif;">If Mercurial is not found, you can install a RPM package from RPMForge using the below commands</span><br />
<span style="font-family: Times, 'Times New Roman', serif;">(replace VERSION with your version/architecture):</span><br />
<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo wget http://packages.sw.be/mercurial/mercurial-VERSION.rpm</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo rpm -Uhv mercurial-VERSION.rpm</span><br />
<br />
<span style="font-family: Times, 'Times New Roman', serif;">If curl was not found, install from sources</span><br />
<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo wget http://curl.haxx.se/download/curl-7.20.1.tar.gz</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo tar -xzf curl-7.20.1.tar.gz</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">cd curl-7.20.1</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo ./configure --prefix=/usr/local</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo make</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo make test</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo make install</span><br />
<br />
<span style="font-family: Times, 'Times New Roman', serif;">If Erlang was not found, download, build and install Erlang:</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo wget http://erlang.org/download/otp_src_R14B03.tar.gz</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo tar zxvf otp_src_R14B03.tar.gz</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo cd otp_src_R14B03</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo ./configure && sudo make && sudo make install</span><br />
<br />
<span style="font-family: Times, 'Times New Roman', serif;">If js-dev (SpiderMonkey) was not found, build from the source files</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo mkdir mozilla</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo cd mozilla</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo wget http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo tar xzf js185-1.0.0.tar.gz</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">cd js/src</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo autoconf-2.13</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo ./configure</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo make</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo make install</span><br />
<br />
<b><span style="font-family: Times, 'Times New Roman', serif;">2. Install CouchDB</span></b><br />
<span style="font-family: Times, 'Times New Roman', serif;">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.</span><br />
<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo svn checkout http://svn.apache.org/repos/asf/couchdb/trunk couchdb</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">cd couchdb</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo ./bootstrap</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo ./configure --with-erlang=/usr/lib64/erlang/usr/include --with-js-lib=/usr/local/lib/ --with-js-include=/usr/local/include/js/</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo make</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo make install</span><br />
<br />
<b><span style="font-family: Times, 'Times New Roman', serif;">3. Configure CouchDB</span></b><br />
a. Edit config file to your need, change the port etc<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo vi /usr/local/etc/couchdb/local.ini</span><br />
<br />
b. Create user, modify ownership and permissions<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo groupadd -r couchdb</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo adduser -r -d /usr/local/var/lib/couchdb -M \</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"> -s /bin/bash -g couchdb couchdb</span><br />
<br />
c. fix permission<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo chown -R couchdb: /usr/local/var/lib/couchdb /usr/local/var/log/couchdb</span><br />
<br />
<b>4. Launch CouchDB</b><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo -u couchdb couchdb</span><br />
<br />
Or as daemon:<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo /usr/local/etc/rc.d/couchdb start</span><br />
<br />
Or at startup as a daemon:<br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo ln -s /usr/local/etc/rc.d/couchdb /etc/init.d/couchdb</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo chkconfig --add couchdb</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;">sudo chkconfig --level 345 couchdb on</span><br />
<br />
<b>5. Test Install:</b><br />
<br />
Now you should see something meaningful when you click<br />
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: blue;">http://127.0.0.1:5984/_utils/index.html</span> </span></div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com2tag:blogger.com,1999:blog-7670617178132565949.post-3839376273602661232012-02-18T15:43:00.002+05:302012-02-26T02:30:43.067+05:302 new Page Transitions in jQuery Mobile v1.1<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: -webkit-auto;">
<span style="text-align: left;">In my </span><a href="http://dev.chetankjain.net/2011/12/jquery-mobile-page-transitions-simple.html" style="text-align: left;" target="_blank">earlier post</a><span style="text-align: left;"> 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 </span><a href="http://jquerymobile.com/demos/1.0.1/docs/pages/page-transitions.html" style="text-align: left;" target="_blank">here</a><span style="text-align: left;">.</span></div>
<br />
But with jQuery Mobile v1.1, the <a href="http://jquerymobile.com/test/docs/pages/page-transitions.html" target="_blank">official documentation</a> 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.<br />
<br />
Also very exciting to see that two new transitions have been added, the <b>Turn </b>and the <b>Flow</b>. So now we have a total of 8 transitions that are available by default. Pretty cool.<br />
<br />
Of course the brave can extend the framework and try to create their own custom transitions using CSS3 and JS.<br />
<br /></div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-27341636894486453922012-02-16T21:26:00.000+05:302012-02-23T08:05:39.861+05:30TV apps using jQuery Mobile<div dir="ltr" style="text-align: left;" trbidi="on">
The idiot box finally graduates to an internet box!<br />
<br />
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.<br />
<br />
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.<br />
<br />
So now that I've made my point beyond all doubt, it is agreed that TV apps is the next big thing!<br />
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.<br />
<br />
The steps are detailed <a href="http://dev.opera.com/articles/view/opera-tv-emulator-getting-started/" target="_blank">here</a> and are very easy to follow. You have to get the <a href="http://www.virtualbox.org/wiki/Downloads" target="_blank">Virtual Box</a> and install it. Then get the <a href="http://www.opera.com/business/tv/emulator/" target="_blank">Opera TV Emulator</a>, 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.<br />
<br />
You can now directly start browsing. Now lets get bolder. How about our first TV app. Fairly simple I would say.<br />
<br />
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.<br />
<br />
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 <a href="http://www.jquerymobile.com/gbs" target="_blank">here</a>. No mention of any TV browsers. TV browsers need to be tested in detail with jQuery Mobile. But I find this totally exciting !<br />
<br />
<a href="http://www.html5test.com/results-tv.html">http://www.html5test.com/results-tv.html</a> 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.<br />
<br />
Finally, one conclusion from all this - it sure is high time I replace my old TV with an Internet TV. Suggestions ?</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com4tag:blogger.com,1999:blog-7670617178132565949.post-84561560994303203482012-02-09T13:05:00.000+05:302012-02-15T10:23:51.107+05:30It pays to blog<div dir="ltr" style="text-align: left;" trbidi="on">
"<b><i>See one, Make one, Teach one!</i></b>" - [video: <a href="http://cdn-smooth.ms-studiosmedia.com/events/W3C/Day2/Browsers_and_Standards.mp4" target="_blank">Charles McCathieNevile (Opera)</a>, see @00:19:00]<br />
<br />
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!<br />
<br />
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 <a href="http://dev.chetankjain.net/2011/12/jquery-mobile-prefetching-pages-demo.html" target="_blank">prefetching pages using jQuery Mobile</a>, had been <a href="https://twitter.com/chetankjain/status/148751220939563009" target="_blank">retweeted by @jquerymobile</a>. 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.<br />
<br />
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!<br />
<br />
<a href="http://www.facebook.com/govirocks" target="_blank">Govind</a> my friend urged me on, "Chetan, this is once in a life time opportunity. Just take it!"<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com8tag:blogger.com,1999:blog-7670617178132565949.post-16019487491246980092011-12-22T13:22:00.000+05:302012-03-05T20:27:20.129+05:30jQuery Mobile and Duplicated Page IDs<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Verdana, sans-serif;">In the <a href="http://dev.chetankjain.net/2011/12/html5-and-duplicated-element-ids.html" target="_blank">previous post</a>, 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.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">Now let us extend this test to the jQuery Mobile framework. You can launch the below multi-page code here.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="color: white; font-family: Verdana, sans-serif;"><b style="background-color: #999999;"> <a href="http://dl.dropbox.com/u/53242546/jqm-dup-ids.html" target="_blank">Launch</a> </b></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><!DOCTYPE html></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><html></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <head></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <title>jQuery Mobile Duplicate IDs</title></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <meta name="viewport" content="width=device-width, initial-scale=1"></span><br />
<div>
<div style="font-family: 'Courier New', Courier, monospace;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> </div>
<div style="font-family: 'Courier New', Courier, monospace;">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script></div>
</div>
<span style="font-family: 'Courier New', Courier, monospace;"> </head></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <body></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="page" id="p1"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#p2" data-role="button">duplicate page id</a></p></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="page" <u><b><span style="color: red;">id="p2"</span></b></u>></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <a data-role="button" data-rel="back" data-direction="reverse">1 1</a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <a href="#p1" data-role="button" data-rel="dialog">Open Dialog</a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="page" <u><span style="color: red;"><b>id="p2"</b></span></u>></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <a data-role="button" data-rel="back" data-direction="reverse"> 0 </a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </body></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></html></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">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.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">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.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">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. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><div data-role="page" id="p2" </span><u style="font-family: 'Courier New', Courier, monospace;"><span style="color: red;"><b>data-url="durl1"</b></span></u><span style="font-family: 'Courier New', Courier, monospace;">></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">......</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><div data-role="page" id="p3" </span>
<u style="font-family: 'Courier New', Courier, monospace;"><span style="color: red;"><b>data-url="durl1"</b></span></u> <span style="font-family: 'Courier New', Courier, monospace;">></span><br />
<br />
<span style="font-family: Verdana, sans-serif;">One final scenario, suppose if the page IDs are duplicated but each page has a different data-url specified. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><div data-role="page" <u><b><span style="color: red;">id="p2"</span></b></u> </span><span style="font-family: 'Courier New', Courier, monospace;">data-url="durl1"</span><span style="font-family: 'Courier New', Courier, monospace;">></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">......</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><div data-role="page" </span>
<u style="font-family: 'Courier New', Courier, monospace;"><b><span style="color: red;">id="p2"</span></b></u> <span style="font-family: 'Courier New', Courier, monospace;"> data-url="durl2"></span><br />
<br />
<span style="font-family: Verdana, sans-serif;">And now try to navigate to any page using the data-url. </span><br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><a href="#durl1" data-role="button">Open Page 1</a></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><a href="#durl2" data-role="button">Open Page 2</a></span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Bingo! Both links work just works fine.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">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.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">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.</span></div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com3tag:blogger.com,1999:blog-7670617178132565949.post-540967312851907612011-12-22T01:53:00.002+05:302012-02-21T20:57:21.415+05:30Using duplicate IDs in HTML<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Verdana, sans-serif;">Well today I'm being a bit controversial. Let us see what the <a href="http://www.w3.org/TR/html5/elements.html#concept-id" target="_blank">HTML5 spec</a> says about unique IDs in a HTML file.</span><br />
<div style="text-align: left;">
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="background-color: white; text-align: -webkit-auto;">The </span><code style="background-color: white; color: orangered; font-size: inherit; text-align: -webkit-auto;" title="attr-id"><a href="http://www.w3.org/TR/html5/elements.html#the-id-attribute" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial;">id</a></code><span style="background-color: white; text-align: -webkit-auto;"> attribute specifies its element's </span><dfn id="concept-id" style="background-color: white; font-style: normal; font-weight: bold; text-align: -webkit-auto;" title="concept-id">unique identifier (ID)</dfn><span style="background-color: white; text-align: -webkit-auto;">. The value must be unique amongst all the IDs in the element's </span><a href="http://www.w3.org/TR/html5/infrastructure.html#home-subtree" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; color: #660099; text-align: -webkit-auto;">home subtree</a><span style="background-color: white; text-align: -webkit-auto;"> and must contain at least one character. The value must not contain any </span><a href="http://www.w3.org/TR/html5/common-microsyntaxes.html#space-character" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; color: #660099; text-align: -webkit-auto;" title="space character">space characters</a><span style="background-color: white; text-align: -webkit-auto;">.</span></span></blockquote>
</div>
<div class="note" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; color: green; font-style: italic; margin-bottom: 1em; margin-top: 1em; padding-bottom: 0.5em; padding-left: 2em; padding-right: 2em; padding-top: 0.5em; text-align: -webkit-auto;">
<span style="font-family: 'Courier New', Courier, monospace;">An element's <a href="http://www.w3.org/TR/html5/elements.html#concept-id" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; color: #660099;" title="concept-id">unique identifier</a> 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.</span></div>
Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code,<br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<b><a href="http://dl.dropbox.com/u/53242546/dup-id.html" target="_blank"><span style="background-color: blue; color: white; font-family: Verdana, sans-serif;"><span id="goog_1822440228"></span>Launch<span id="goog_1822440229"></span></span></a></b><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<b><span style="font-family: Verdana, sans-serif;">dup.css</span></b><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;">#p2 {</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> background-color: yellow; </span><br />
<span style="font-family: 'Courier New', Courier, monospace;">}</span><span class="Apple-tab-span" style="font-family: Verdana, sans-serif; white-space: pre;"> </span><br />
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<b><span style="font-family: Verdana, sans-serif;">dup-id.html</span></b><br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;"><!DOCTYPE html></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><html></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <head></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <title>Duplicate ID Tester</title></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><link rel="stylesheet" href="dup.css" /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </head></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <body></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p><a href="#p1">1</a></p></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p><a href="#p2">2</a></p></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p><a href="#p2">3</a></p></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <div id="p1"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p>ID IS 1</p></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span></div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <span style="color: red;"><b><div <u>id="p2"</u>></b></span></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p>ID IS 2</p></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span></div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <b> <span style="color: red;"><div <u>id="p2"</u>></span></b></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p>ID IS 3</p></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span></div></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p>Now lets get ID 2 again using javascript</p></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><script></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>document.write(document.getElementById("p2").innerHTML);</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span></script></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </body></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"></html></span><br />
<br />
<span style="font-family: Verdana, sans-serif;">I've committed a big sin in this HTML code. Yes there are 2 div elements that use the same ID "<b>p2</b>". 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.</span><br />
<ul style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;"><b>Linking to a document fragment:</b> Reduce your browser size and click on link 2, it will navigate to the first div with the ID p2</span></li>
<li><span style="font-family: Verdana, sans-serif;"><b>Styling:</b> Both the divs with the ID p2 are styled</span></li>
<li><span style="font-family: Verdana, sans-serif;"><b>Targeting the element using JavaScript:</b> 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.</span></li>
</ul>
<span style="font-family: Verdana, sans-serif;">To summarize, linking and picking up the first element with matching ID is done and all matching elements are styled. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">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!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="color: red; font-family: Verdana, sans-serif;">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.</span></div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com9tag:blogger.com,1999:blog-7670617178132565949.post-17434806348226653012011-12-19T19:40:00.002+05:302012-02-21T20:34:40.183+05:30jQuery Mobile Page Caching demo<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Verdana, sans-serif;">In my </span><a href="http://dev.chetankjain.net/2011/12/jquery-mobile-prefetching-pages-demo.html" style="font-family: Verdana, sans-serif;" target="_blank">previous post</a><span style="font-family: Verdana, sans-serif;">, 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.</span><br />
<a href="http://dl.dropbox.com/u/53242546/mainpage.html" style="background-color: blue; color: white; font-family: Verdana, sans-serif; line-height: 18px; text-decoration: none;" target="_blank"><b><br class="Apple-interchange-newline" />Launch</b></a><span class="Apple-style-span" style="background-color: white; color: #222222; font-family: Verdana, sans-serif; line-height: 18px;"><span class="Apple-style-span" style="color: white;"> </span></span><span style="background-color: white; font-family: Verdana, sans-serif; line-height: 18px;">- The previous example with prefetch</span>
<br />
<span class="Apple-style-span" style="background-color: white; color: #222222; line-height: 18px;"><span class="Apple-style-span" style="color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></span><br />
<span style="color: #222222; font-family: Verdana, sans-serif;"><span style="line-height: 18px;">But, as also mentioned, it has certain limitations,</span></span><br />
<ul>
<li><span style="font-family: Verdana, sans-serif;">If there are more pages, more http requests are sent out and more bandwidth is required to prefetch</span></li>
<li><span style="font-family: Verdana, sans-serif;">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</span></li>
<li><span style="font-family: Verdana, sans-serif;">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.</span></li>
</ul>
<span style="color: #222222; font-family: Verdana, sans-serif; line-height: 18px;">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 </span><b style="color: #222222; font-family: Verdana, sans-serif; line-height: 18px;">data-dom-cache="true"</b><span style="color: #222222; font-family: Verdana, sans-serif; line-height: 18px;"> to the page </span><span style="color: #222222; font-family: Verdana, sans-serif; line-height: 18px;">div</span><span style="color: #222222; font-family: Verdana, sans-serif; line-height: 18px;"> container of the page that you want to cache. </span><br />
<span style="color: #222222; font-family: Verdana, sans-serif; line-height: 18px;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">You could also cache a specific page programmatically by using this call</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> pageContainerElement.page({ domCache: true });</span><br />
<div style="font-family: Verdana, sans-serif;">
<br class="Apple-interchange-newline" /></div>
<span style="color: #222222; font-family: Verdana, sans-serif; line-height: 18px;">If you want to cache all pages visited, </span><span style="font-family: Verdana, sans-serif;">you could turn on DOM caching using the below code (but keep an eye on the DOM size as it could grow very fast)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> $.mobile.page.prototype.options.domCache = true;</span></div>
<br />
<div>
<span style="font-family: Verdana, sans-serif;">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.</span><br />
<div>
<br /></div>
<span style="font-family: Verdana, sans-serif;">Let us visit the code...</span></div>
<div>
<br />
<a href="http://dl.dropbox.com/u/53242546/mainpage-domcache.html" style="background-color: blue; color: white; font-family: Verdana, sans-serif; line-height: 18px; text-decoration: none;" target="_blank"><b>Launch</b></a><span class="Apple-style-span" style="background-color: white; color: #222222; font-family: Verdana, sans-serif; line-height: 18px;"><span class="Apple-style-span" style="color: white;"> </span></span><span style="background-color: white; font-family: Verdana, sans-serif; line-height: 18px;">- Example with prefetch and DOM cache enabled</span><br />
<span style="color: #222222; font-family: Verdana, sans-serif;"><span style="line-height: 18px;"><br /></span></span><br />
<b><span style="font-family: Verdana, sans-serif;">mainpage-domcache.html</span></b><br />
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><!DOCTYPE html></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><html></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <head></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <title>Main Page</title></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <meta name="viewport" content="width=device-width, initial-scale=1"></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> </span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"><script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script></span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
</div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <!-- Use only if you want to cache all visited pages --></span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><i> <script></i></span><br />
<i style="font-family: 'Courier New', Courier, monospace;"> <u>$.mobile.page.prototype.options.domCache = true;</u></i><br />
<span style="font-family: 'Courier New', Courier, monospace;"><i> </script></i></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"> </head></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <body></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div id="page1" data-role="page"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="header"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <h1>Header of Main Page</h1></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <p><a href="secondpage-domcache.html" data-role="button" data-prefetch>Go to Page 2</a></p></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </body></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></html></span></div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<b><span style="font-family: Verdana, sans-serif;">secondpage-domcache.html (to cache single page)</span></b></div>
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><title>Second Page</title></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><div id="page2" data-role="page" <u><b>data-dom-cache="true"</b></u></span><span style="font-family: 'Courier New', Courier, monospace;">></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="header"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <h1>Header of Page 2</h1></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#" data-role="button" data-rel="back">Go Back</a></p></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></div></span></div>
</div>
<div>
<br class="Apple-interchange-newline" /></div>
<span style="font-family: Verdana, sans-serif;">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.</span><br />
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<span style="font-family: Verdana, sans-serif;">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 !</span></div>
</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com3tag:blogger.com,1999:blog-7670617178132565949.post-57518640552144313642011-12-19T18:28:00.002+05:302012-02-21T19:45:04.652+05:30jQuery Mobile Prefetching pages demo<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Verdana, sans-serif;">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. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><a href="http://dl.dropbox.com/u/53242546/mainpage-title.html" style="background-color: blue; color: white; line-height: 18px; text-decoration: none;" target="_blank"><b>Launch</b></a><span class="Apple-style-span" style="background-color: white; line-height: 18px;"><span class="Apple-style-span" style="color: white;"> </span>- Example without prefetch</span></span><br />
<span class="Apple-style-span" style="background-color: white; color: #222222; line-height: 18px;"><span class="Apple-style-span" style="color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></span><br />
<span class="Apple-style-span" style="background-color: white; color: #222222; line-height: 18px;"><span style="font-family: Verdana, sans-serif;">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 <a href="http://dev.chetankjain.net/2011/12/jquery-mobile-data-title-behavior-in.html" target="_blank">earlier post</a>.</span></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">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 <b>data-prefetch</b> 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.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">You could also prefetch a link programmatically by using this JavaScript call</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> $.mobile.loadPage( pageUrl );</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">The below code shows how data-prefetch works. You can launch it in a separate browser tab.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;"><a href="http://dl.dropbox.com/u/53242546/mainpage.html" style="background-color: blue; color: white; line-height: 18px; text-decoration: none;" target="_blank"><b>Launch</b></a><span class="Apple-style-span" style="background-color: white; color: #222222; line-height: 18px;"><span class="Apple-style-span" style="color: white;"> </span></span><span style="background-color: white; line-height: 18px;">- Example with prefetch</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="background-color: white; line-height: 18px;"><br /></span></span><br />
<div>
<b><span style="font-family: Verdana, sans-serif;">mainpage.html</span></b></div>
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><!DOCTYPE html></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><html></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <head></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <title>Main Page</title></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <meta name="viewport" content="width=device-width, initial-scale=1"></span></div>
<div>
<div style="font-family: 'Courier New', Courier, monospace;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> </div>
<div style="font-family: 'Courier New', Courier, monospace;">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script></div>
</div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </head></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <body></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div id="page1" data-role="page"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="header"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <h1>Header of Main Page</h1></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <p><a href="secondpage.html" data-role="button" <b><u>data-prefetch</u></b>>Go to Page 2</a></p></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </body></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></html></span></div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<b><span style="font-family: Verdana, sans-serif;">secondpage.html</span></b></div>
<div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><title>Second Page</title></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><div id="page2" data-role="page"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="header"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <h1>Header of Page 2</h1></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#" data-role="button" data-rel="back">Go Back</a></p></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div>
<span style="font-family: 'Courier New', Courier, monospace;"></div></span></div>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<span style="font-family: Verdana, sans-serif;">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.)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">Great isn't it. But few things you have to take care,</span><br />
<ul style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">If there are more pages, more http requests are sent out and more bandwidth is required to prefetch</span></li>
<li><span style="font-family: Verdana, sans-serif;">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</span></li>
<li><span style="font-family: Verdana, sans-serif;">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.</span></li>
</ul>
<div>
<span style="font-family: Verdana, sans-serif;">So use this judiciously to make your jQuery Mobile app navigation smoother to the user.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">In my <a href="http://dev.chetankjain.net/2011/12/jquery-mobile-page-caching-demo.html" target="_blank">next post</a> I will show how to cache a jQuery Mobile page in DOM and thus avoid the issue of multiple prefetch.</span></div>
</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-73579417346264511432011-12-18T21:18:00.001+05:302012-02-08T13:19:59.282+05:30jQuery Mobile Page Transitions with data-ajax=false<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">In my earlier post <a href="http://dev.chetankjain.net/2011/12/jquery-mobile-page-transitions-simple.html" target="_blank">here</a>, I outlined the various page transitions that are available in jQuery Mobile. </span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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:</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">When a page loaded is:</span><br />
<br />
<ol style="text-align: left;">
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">from an external domain</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">data-ajax="false" attribute is used</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">rel="external" is specified</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">target attribute is specified</span></li>
</ol>
<br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">This is also well </span><a href="http://jquerymobile.com/demos/1.0/docs/pages/page-links.html" style="font-family: Verdana, sans-serif;" target="_blank">documented</a><span class="Apple-style-span" style="font-family: Verdana, sans-serif;"> (with examples)</span><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">.</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Consider below code, you can click on the link below to launch it in a separate browser tab:</span><br />
<a href="http://dl.dropbox.com/u/53242546/false-ajax.html" target="_blank"><b><span class="Apple-style-span" style="background-color: blue; color: white; font-family: Verdana, sans-serif;">Launch</span></b></a><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><br /></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><!DOCTYPE html></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><html></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <head></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <title>jQuery Mobile Transitions Demo with data-ajax="false"</title></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <meta name="viewport" content="width=device-width, initial-scale=1"></span><br />
<div>
<div style="font-family: 'Courier New', Courier, monospace;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> </div>
<div style="font-family: 'Courier New', Courier, monospace;">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script></div>
</div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </head></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <body></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <div data-role="page" id="page1"></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span> <div data-role="content"></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#page2" data-transition="flip" data-role="button">data-transition="flip"</a></p></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#page2" data-transition="flip" data-role="button" data-ajax="false" data-theme="e">data-transition="flip" data-ajax="false"</a></p></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#page2" data-rel="dialog" data-role="button">data-rel="dialog"</a></p></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <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></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#page3" data-role="button">data-role="dialog"</a></p></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#page3" data-role="button" data-ajax="false" data-theme="e">data-role="dialog" data-ajax="false"</a></p></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <p><a href="#page3" data-role="button" data-rel="dialog">data-rel="dialog" data-role="dialog"</a></p></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <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></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <div data-role="page" id="page2"></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <a data-role="button" data-rel="back" data-direction="reverse">Back</a><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <div data-role="dialog" id="page3"></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <a data-role="button" data-rel="back" data-direction="reverse">Back</a><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </body></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"></html></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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,</span><br />
<br />
<ul style="text-align: left;">
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">DOM is not reloaded everytime since this is a multi-page template document</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Only the default slide transition works, even if you specify any other data-transition (2nd button)</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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)</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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)</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">If a Dialog is launched using data-role="dialog", setting the data-rel="dialog" might not be required (7th button)</span></li>
</ul>
<br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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 <a href="https://github.com/jquery/jquery-mobile/issues/3296" target="_blank">https://github.com/jquery/jquery-mobile/issues/3296</a>.</span><br />
<br /></div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-63186827771109861032011-12-16T10:29:00.000+05:302012-02-19T16:43:14.281+05:30Minimal required code in HTML5<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">I've encountered this question repeatedly of late.</span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<i><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">"What are the tags required at bare minimum for a html file?"</span></i></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: <a href="http://www.w3.org/TR/html4/struct/global.html">http://www.w3.org/TR/html4/struct/global.html</a>)</span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><HTML></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <HEAD></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <TITLE>A small HTML</TITLE></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </HEAD></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <BODY></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <P>Small HTML file!</P></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </BODY></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"></HTML></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Now lets look at how things stand today. Welcome HTML5!</span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><b><!DOCTYPE html></b></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><b>Smallest HTML file!</b></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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:</span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><!DOCTYPE html></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><html></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <head></head></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <body>Smallest </span><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">HTML </span><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">file!</body></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"></html></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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". </span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">There is one more thing that I wish to highlight. I see so many HTML5 pages still showing this code while using JavaScript,</span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><SCRIPT <span style="color: red;">type="text/javascript"</span> src="...."></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">This can simply be</span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><b><script src="...."></b></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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!</span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></div>
</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com19tag:blogger.com,1999:blog-7670617178132565949.post-25003742380752506012011-12-15T17:16:00.000+05:302012-02-20T15:36:42.476+05:30jQuery Mobile single-page vs multi-page template<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">[Updated 2012/02/09]</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">In my recent posts I mentioned about jQuery Mobile single-page and multi-page templates, so what exactly are the differences between them?</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><b>Single Page Template:</b></span><br />
<br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><a href="http://dl.dropbox.com/u/53242546/mainpage-title.html" style="background-color: blue; color: white;" target="_blank">Launch</a><span class="Apple-style-span" style="background-color: white;"><span class="Apple-style-span" style="color: white;"> </span>- example from previous post, notice the address shown as you navigate</span></span><br />
<ul style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">Lighter and cleaner. Each page is a separate html file and more modular. </span></li>
<li><span style="font-family: Verdana, sans-serif;">Better fallback if JavaScript is not supported. So works well on more platforms, you could even target <a href="http://jquerymobile.com/gbs/" target="_blank">grade C</a> browsers </span></li>
<li><span style="font-family: Verdana, sans-serif;">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.</span></li>
<li><span style="font-family: Verdana, sans-serif;">The DOM size is relatively smaller</span></li>
<li><span style="font-family: Verdana, sans-serif;">Optional to use the "page" data-role element in the code</span></li>
<li><span style="font-family: Verdana, sans-serif;">Can turn off Ajax Navigation between pages using data-ajax="false"</span></li>
<li><span style="font-family: Verdana, sans-serif;">Recommend to use the <title> tag for page titles</span></li>
<li><span style="font-family: Verdana, sans-serif;">The <title> tag always gets precedence during page loads</span></li>
<li><span style="font-family: Verdana, sans-serif;">Consumes more bandwidth as each page navigation generates a new request</span></li>
<li><span style="font-family: Verdana, sans-serif;">Navigating back to a previously loaded page will again generate a fresh request (with <a href="http://dev.chetankjain.net/2011/12/jquery-mobile-page-caching-demo.html" target="_blank">DOM caching</a> you can avoid reloading of the same pages multiple times)</span></li>
<li><span style="font-family: Verdana, sans-serif;">First load is faster, but every subsequent page has to be fetched</span></li>
<li><span style="font-family: Verdana, sans-serif;">Suitable for larger applications and situations where you want to target as many platforms as possible including platforms which lack JavaScript support</span></li>
</ul>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"></span><br />
<div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><b>Multi Page Template:</b></span><br />
<br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><a href="http://dl.dropbox.com/u/53242546/data-title.html" style="background-color: blue; color: white;" target="_blank">Launch</a><span class="Apple-style-span" style="background-color: white;"> - example from previous post, </span></span><span class="Apple-style-span" style="background-color: white; font-family: Verdana, sans-serif;">notice the address shown as you navigate</span><br />
<ul style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">Heavier. All the pages are in a single html file.</span><span style="font-family: Verdana, sans-serif;"></span></li>
<li><span style="font-family: Verdana, sans-serif;">Needs JavaScript support as Ajax Navigation is used</span></li>
<li><span style="font-family: Verdana, sans-serif;">Multiple page containers are present, and only the first one is shown when page loads</span></li>
<li><span style="font-family: Verdana, sans-serif;">Large applications with many pages will increase the DOM size</span></li>
<li><span style="font-family: Verdana, sans-serif;">The "page" data-role element is required</span></li>
<li><span style="font-family: Verdana, sans-serif;">Using data-ajax="false" for internal pages ignores the data-transition attribute, by default slide is used</span></li>
<li><span style="font-family: Verdana, sans-serif;">Recommend to use the data-title attribute for all page titles</span></li>
<li><span style="font-family: Verdana, sans-serif;">On first load, <title> tag is used and subsequent transitions data-title is used for page titles</span></li>
<li><span style="font-family: Verdana, sans-serif;">Since all pages are already loaded, no additional requests are generated for navigating between pages</span></li>
<li><span style="font-family: Verdana, sans-serif;">First load is slower as the file size is larger, but subsequent page navigation is fast</span></li>
<li><span style="font-family: Verdana, sans-serif;">Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support</span></li>
</ul>
</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com14tag:blogger.com,1999:blog-7670617178132565949.post-60064315120190113092011-12-15T15:33:00.001+05:302011-12-21T23:47:37.623+05:30jQuery Mobile Recommendations for Page Title<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Read them here: </span><br />
<a href="http://dev.chetankjain.net/2011/12/jquery-mobile-data-title-behavior-with.html" target="_blank"><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">jQuery Mobile data-title behavior with multi-page template</span></a><br />
<a href="http://dev.chetankjain.net/2011/12/jquery-mobile-data-title-behavior-in.html" target="_blank"><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">jQuery Mobile data-title behavior in single-page template</span></a><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">So we see that there are 3 options available to set the page title, </span><br />
<br />
<ol style="text-align: left;">
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">The <title> tag</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">The data-title attribute of the page container</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">The header text in the header container</span></li>
</ol>
<br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Now the question is which one to use? </span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">And here are my recommendations,</span><br />
<br />
<ol style="text-align: left;">
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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!</span></li>
</ol>
<br />
<div>
So what do you think?</div>
</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com0tag:blogger.com,1999:blog-7670617178132565949.post-18738539703480653372011-12-15T14:05:00.001+05:302012-02-08T13:27:41.734+05:30jQuery Mobile data-title behavior in single-page template<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><span class="Apple-style-span" style="font-size: small;">In my <a href="http://dev.chetankjain.net/2011/12/jquery-mobile-data-title-behavior-with.html" target="_blank">previous post</a>, I had visited the behavior of the jQuery Mobile library data-title attribute under different scenarios when using a multi-page template. </span><span class="Apple-style-span" style="font-size: small;">In this post, I will outline the behavior when using a single-page template.</span></span><br />
<div class="post-body entry-content" id="post-body-3673117259535639627">
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Consider the below single-page template code. Click here to launch the below code in a separate browser.</span></div>
<a href="http://dl.dropbox.com/u/53242546/mainpage-title.html" style="background-color: blue;" target="_blank"><span class="Apple-style-span" style="color: white; font-family: Verdana, sans-serif;">Launch</span></a><br />
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br /></span></div>
<div dir="ltr" trbidi="on">
<b><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">mainpage-title.html</span></b><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"></span><br />
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">
</span><br />
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><!DOCTYPE html></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><html></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <head></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> <title>Main Page</title></span></div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">
</span><br />
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <meta name="viewport" content="width=device-width, initial-scale=1"></span></div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">
<div dir="ltr" trbidi="on">
<div style="font-family: 'Times New Roman';">
<div style="font-family: 'Courier New', Courier, monospace;">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> </div>
<div style="font-family: 'Courier New', Courier, monospace;">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script></div>
</div>
</div>
<div dir="ltr" trbidi="on">
</head></div>
<div dir="ltr" trbidi="on">
<body></div>
<div dir="ltr" trbidi="on">
<div id="page1" data-role="page" data-title="Mainpage data-title"></div>
<div dir="ltr" trbidi="on">
<div data-role="header"></div>
<div dir="ltr" trbidi="on">
<h1>Header of Main Page</h1></div>
<div dir="ltr" trbidi="on">
</div></div>
<div dir="ltr" trbidi="on">
<div data-role="content"></div>
<div dir="ltr" trbidi="on">
<p><a href="secondpage-title.html" data-role="button">Go to Page 2</a></p></div>
<div dir="ltr" trbidi="on">
</div></div>
<div dir="ltr" trbidi="on">
</div></div>
<div dir="ltr" trbidi="on">
</body></div>
<div dir="ltr" trbidi="on">
</html></div>
<div>
<br /></div>
<b>secondpage-title.html</b></span></div>
<div dir="ltr" trbidi="on">
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><title>Second Page</title></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><div id="page2" data-role="page" data-title="Page 2 data-title"></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <div data-role="header"></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><h1>Header of Page 2</h1></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> <div data-role="content"></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p><a data-role="button" data-rel="back">Go Back</a></p></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"> </div></span></div>
<div dir="ltr" trbidi="on">
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"></div></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">
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:<br />
</span><br />
<ol>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">If the <title> tag is not present, you will get the address of the page shown as the title.</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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".</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">If <title> was missing in page 2, "Header of Page
2" is displayed, the text from the header.</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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".</span></li>
<li><span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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.</span></li>
</ol>
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">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).</span></div>
</div>
</div>chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com1tag:blogger.com,1999:blog-7670617178132565949.post-83010204495699120492011-12-14T00:55:00.001+05:302016-12-03T08:23:27.263+05:30jQuery Mobile page transitions simple demo<div dir="ltr" style="text-align: left;" trbidi="on">
jQuery Mobile has amazing Ajax page transitions available by default. This blog post gives a quick example to demonstrate the same.<br />
<br />
Click here to launch the below code in a separate browser. <br />
<a href="http://dl.dropbox.com/u/53242546/transitions.html" style="background-color: blue;" target="_blank"><span class="Apple-style-span" style="color: black;">Launch</span></a><br />
<br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"><!DOCTYPE html></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"><html></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <head></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <title>Transitions Demo</title></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <meta name="viewport" content="width=device-width, initial-scale=1"></span><br />
<div>
<div style="font-family: 'Courier New', Courier, monospace;">
<div style="font-family: "courier new", courier, monospace;">
<span style="font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;"><</span><span class="title" style="box-sizing: border-box; font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;">link</span><span style="font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;"> </span><span class="attribute" style="box-sizing: border-box; font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;">rel</span><span style="font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;">=</span><span class="value" style="box-sizing: border-box; font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;">"stylesheet"</span><span style="font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;"> </span></div>
<div style="font-family: "courier new", courier, monospace;">
<span class="attribute" style="box-sizing: border-box; font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;">href</span><span style="font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;">=</span><span class="value" style="box-sizing: border-box; font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;">"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"</span><span style="font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;"> /></span></div>
<span style="font-family: , "consolas" , monospace; font-size: 1em; white-space: pre;"> </span><span style="font-family: , "consolas" , monospace;"><span style="white-space: pre;"><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></span></span><br />
<span style="font-family: , "consolas" , monospace;"><span style="white-space: pre;"> </head></span></span></div>
<div style="font-family: 'Courier New', Courier, monospace;">
<span style="font-family: "courier new" , "courier" , monospace;"> <body></span></div>
</div>
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <div id="page1" data-role="page"></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <div data-role="header"></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <h1>Pick your transition</h1></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <div data-role="content"></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <p><a href="#page2" data-role="button" data-transition="slide">Slide</a></span><span style="font-family: "courier new" , "courier" , monospace;"></p></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;"><p></span><span style="font-family: "courier new" , "courier" , monospace;"><a href="#page2" data-role="button" data-transition="slideup">Slideup</a></span><span style="font-family: "courier new" , "courier" , monospace;"></p></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;"><p></span><span style="font-family: "courier new" , "courier" , monospace;"><a href="#page2" data-role="button" data-transition="slidedown">Slidedown</a></span><span style="font-family: "courier new" , "courier" , monospace;"></p></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;"><p></span><span style="font-family: "courier new" , "courier" , monospace;"><a href="#page2" data-role="button" data-transition="pop">Pop</a></span><span style="font-family: "courier new" , "courier" , monospace;"></p></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;"><p></span><span style="font-family: "courier new" , "courier" , monospace;"><a href="#page2" data-role="button" data-transition="fade">Fade</a></span><span style="font-family: "courier new" , "courier" , monospace;"></p></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;"><p></span><span style="font-family: "courier new" , "courier" , monospace;"><a href="#page2" data-role="button" data-transition="flip">Flip</a></p></span><br />
<span style="font-family: "courier new" , "courier" , monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <div id="page2" data-role="page"></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <div data-role="header"></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <h1>Reverse the transition now</h1></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> <div data-role="content"></span><br />
<span class="Apple-tab-span" style="font-family: "courier new" , "courier" , monospace; white-space: pre;"> </span><span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"><p><a href="#" data-role="button" data-rel="back" </span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;">data-direction="reverse">Reverse</a></p></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </div></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </div><span class="Apple-tab-span" style="white-space: pre;"> </span></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"> </body></span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace;"></html></span><br />
<br />
<br />
So there are 6 page transitions are available by default and the <b>data-transition</b> attribute specifies the same.<br />
<ol style="text-align: left;">
<li>Slide</li>
<li>Slideup</li>
<li>Slidedown</li>
<li>Pop (best for dialogs)</li>
<li>Fade</li>
<li>Flip</li>
</ol>
I've also included an option to reverse the most recent page transition and this is done using the <b>data-rel</b> and <b>data-direction</b> 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.<br />
<br />
Simple isn't it. Enjoy !!</div>
chetankjainhttp://www.blogger.com/profile/11438245297622591811noreply@blogger.com1