tag:blogger.com,1999:blog-90338430256420916162024-03-05T14:20:41.864-05:004th and GoalAvinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-9033843025642091616.post-72262302880810484062013-03-09T20:53:00.001-05:002013-03-09T20:54:41.970-05:00Opera Beta User Agent String (Android)<div dir="ltr" style="text-align: left;" trbidi="on">
I just downloaded the latest beta of Opera onto my Gingerbread phone and it's now running on Webkit. Of course, the first thing I did was look up it's user agent string. :-) Here it is:<br />
<br />
<i>Opera/9.80 (Android; Opera Mini/14.0.1025/28.4150; U; en) Presto/2.8.119 Version/11.10</i><br />
<i><br /></i>
My initial impression of the browser?? Not bad!! It scrolls a lot smoother than the default android browser and the UI feels very intuitive. It has an "Off-Road mode" that's supposedly saved me 98% data thus far. Not sure how it's measuring it, but it sounds good. I don't see any kind of developer options yet, but they're still in beta, so I'll cut them some slack.<br />
<i><br /></i>
<i><br /></i></div>
Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-30165545825574379042012-09-08T23:32:00.001-04:002012-09-08T23:32:44.029-04:00HTML5 support in current PC browsers<div dir="ltr" style="text-align: left;" trbidi="on">
Hi there.
<p>
I just wanted to post up some quick numbers on how well some of the non-mobile browsers I have on my mac (sorry IE!!) are keeping up-to-date with the (currently proposed) HTML5 recommendations so far. These numbers are the scores received on the website <a href="http://html5test.com" target="_blank">html5test.com</a>. All scores are out of a maximum score of 500. Here they are:
<ol>
<li>
Google Chrome 21: 346 + 9 bonus points.
</li>
<li>
Safari 6: 366 + 8 bonus points
</li>
<li>
Firefox 15: 346 + 9 bonus points
</li>
<li>
Opera 12: 385 + 9 bonus points
</li>
</ol>
Unsurprisingly, Opera leads the pack, with Chrome and Firefox in second. Overall, these numbers have increased quite dramatically over the last few months, which is quite encouraging to developers, designers and (I'm sure) business folks!! More to come in the following posts.....
</p>
Cheers.
<br />
</div>
Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-18415254638974259602011-12-09T23:55:00.001-05:002011-12-10T00:16:58.161-05:00Tip of the day - Compare syntax<div dir="ltr" style="text-align: left;" trbidi="on">
A good practice when checking against null, nil or any value (such as an integer) is to use the following syntax:<br />
<blockquote>
if(nil == object)
</blockquote>
This avoids the situation where, if one uses the single equals to (<b>=</b>) instead of the double equals to (<b>==</b>), a compiler error will be generated and no executable created. On the other hand, if the other (more commonly used) syntax such as the following is used, no compiler errors would be generated:
<blockquote>
if(object == nil)
</blockquote>
The above code would also run as expected. However, if I wrote
<blockquote>
if(object = nil)
</blockquote>
this would cause the object to be set to nil and could lead to mysterious behavior when the program runs. The code may not be as natural to read, but does help in avoiding the obvious pitfall.
<br /></div>Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-50001424604774570202010-10-02T15:53:00.014-04:002010-10-02T19:19:50.299-04:00jQuery, XML and XSLT (jqXSLT)Hey.<br /><br />jQuery has been a boon to JavaScript programmers and designers ever since it's introduction. With the official support of Microsoft with it's inclusion in MVC frameworks and the default application in VS 2010, it's here to stay!!.<br /><br />Anyway, while having an extremely "jQuery"-fied conversation with a buddy of mine, I decided to put together a simple jQuery extension that puts data into a DOM element given an XML and a XSL document. The documents could either be provided as URLs or as JS objects in code. The syntax is pretty simple:<br /><pre><br />//HTML snippet<br />< div id='content' >< /div><br /><br />//JS code<br />$(document).ready(function(){<br /> $('#content').xslt('XslDocument.xsl','XmlDocument.xml');<br />});<br /></pre><br />Simple enough? The extension itself if less than 3kb (lesser than 2kb minified). This example has been tested in the following browsers:<br /><ul><li>Firefox 3.6.10</li><li>Chrome 6.0.472.63</li><li>IE 9 beta (9.0.7930.16406)</li><li>Opera 10.62</li><li>Safari for Win (5.0.2)</li></ul>Here is the jqXSLT.js file I wrote as well as compressed versions of all required files. Run "test.html" from either of the compressed files to view the example. Note that the example does not work in Chrome when run as a local file. This is due to the security restriction (that's also labelled as a bug <a href="http://code.google.com/p/chromium/issues/detail?id=40787" target="_blank">here</a>) in Chrome that prevents reading local files using AJAX. There's a work-around suggested as well there, though I couldn't get it to work. Take a shot it it and let me know if it does work for you!!<br /><br /><a href="http://www.box.net/shared/6qir37pmss" target="_blank">jqXSLT.rar</a><br /><a href="http://www.box.net/shared/7hoz7yakl7" target="_blank">jqXSLT.zip</a><br /><a href="http://www.box.net/shared/uoqt7g75k7" target="_blank">jqXSLT.js</a><br /><a href="http://www.box.net/shared/vsximyih88" target="_blank">jqXSLT-min.js</a><br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com2tag:blogger.com,1999:blog-9033843025642091616.post-32662070747074841322010-06-02T12:48:00.002-04:002010-06-02T12:59:12.371-04:00My new Nokia Neuron and the S60 appHey.<br /><br />I just purchased a Nokia Neuron from Costco (for T-Mobile) for $120, along wih the unlimited internet data plan for just 10 bucks!! Yep! For some reason, the Neuron isn't considered a smart phone, although it has a lot of it's features. A few of them are listed below:<br /><ul><br /><li>Preloaded with Ovi maps, the free navigation software from Nokia</li><br /><li>The Ovi app, which gives one access to plenty of apps written specifically for the phone and platform (called S60)</li><br /><li>An accelerometer thats nice to view/type in portrait mode</li><br /></ul><br />One of the things it lacks is support for WiFi networks, but that's negated by the cheapest data plan around. It comes with a 2GB micro SD memory card (expandable to 32 gigs). Not much else is loaded on the phone, but it's easy to fill up the 2 gigs with all the apps from the Ovi store. Besides, there are plenty of websites around from where one can download free apps, music, themes etc. Just search for "S60 free applications" in Google and you can download and install any app. <br /><br />I'll post some pics and reviews of the phone soon. And yeah..have also submitted an app to the Ovi store that reads the RSS feed from this blog and displays it in a default application skin. Here's where I went to create it: <br /><a href="http://appwizard.ovi.com/web_nokia/signIn.jsp" target="_blank">Ovi app wizard beta</a><br /><br />Their developer program is currently closed but I'm hoping to get my hands dirty soon with writing some apps I'd like to see in the Ovi store.<br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-73401695636620123872010-03-30T00:03:00.004-04:002010-03-30T00:12:58.090-04:00HTML5 getElementsByClassNameHi.<br /><br />Here is one great addition to HTML5 I had nearly forgotten about. The function "getElementsByClassName" has been added to nearly every javascript framework in existance, and now it's part of the (upcoming) standard!! Wohoo!!! And here's the best news...it's already supported in all the latest browsers (except IE (8), of course!!). <br /><br />Here's a simple way to check if your browser supports it: <a href="javascript:alert('This browser supports getElementsByClassName: ' + !!document.getElementsByClassName)">Click here</a><br /><br />I've added the detection of this function to the detections files I've been blogging about. In addition, I've included a minified version of the file (using the <a href="http://refresh-sf.com/yui/" target="_blank">YUI compressor</a>).<br /><br />Here is the updated zip file: <a href="http://www.box.net/shared/mvtprqndct" target="_blank">Html5.zip</a><br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-17914628856239913092010-03-08T19:24:00.005-05:002010-03-08T19:48:03.003-05:00Simple worker example in HTML5Hi.<br /><br />I just added an example of workers to the HTML5 detection and examples code on which I talked about in my two previous posts. Workers are, undoubtedly, the most interesting feature of the HTML5 specs. A lot of the specifications derive from the work done by the Google gears team. Kudos for finally bringing multi-threaded applications to the web!!!<br /><br />Here's a statement on web workers in the current specifications:<br /><br /><span style="font-style:italic;">This specification defines an API that allows Web application authors to spawn background workers running scripts in parallel to their main page. This allows for thread-like operation with message-passing as the coordination mechanism.<br /></span><br />It also has the following statement:<br /><br /><span style="font-style:italic;">Workers are relatively heavy-weight, and are not intended to be used in large numbers. Generally, workers are expected to be long-loved, have a high start-up cost, and a high per-instance memory cost.<br /></span><br /><span style="font-weight:bold;">Example initialization: (in parent page)</span><br />var worker = new Worker("worker.js");<br />worker.onmessage = function(){}<br /><br />In worker.js:<br />postMessage(<string>);//used to send a message back to the "parent" thread. <br /><br />Currently, most browsers support just strings being passed as messages, although the developers working with the W3C are also trying to get it into the specifications to pass around generic objects. <br /><br />There are also some stipulations on what can be done within a worker thread:<ol><li>Workers have no access to the DOM</li><li>Workers do not have direct access to the 'parent' page.</li></ol>The first point above means that one cannot do any DOM manipulations within the worker thread. i.e. no access to document, window, document.body or any of the DOM elements.<br /><br />The second stipulation means that the worker thread can communicate with only it's parent thread, and cannot call any functions or use any variables on the "parent" page that initialized it. <br /><br />The demo I have put together works quite well in Chrome 4 and Safari 4. The demo works quite weirdly in FF 3.5, but only for the "terminate" call, where it seems to terminate the worker thread after a random period of time after I click the "Stop" button. However, that might be due to Firebug or any other extensions I may have installed. Do let me know in case you experience otherwise.<br /><br />Here is the zip file once more: <a href="http://www.box.net/shared/mvtprqndct" target="_blank">Html5.zip</a><br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-51136598870378468862010-03-06T22:41:00.000-05:002010-03-06T22:48:09.808-05:00Some more HTML5 tags and attributesI've been hooked on HTML5 since I last posted on this blog. I was watching a cool video on YouTube about HTML5 features that have been defined in the specifications but do not have full support in all browsers yet. Here it is:<br /><br /><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/xIxDJof7xxQ&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/xIxDJof7xxQ&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object><br/><br />I updated the detection code in the sample I had posted earlier to include some new attributes and tags. I also included a simple test page that can help one determine support for input types in the various browsers. Here is is again: <a href="http://www.box.net/shared/mvtprqndct" target="_blank">Html5.zip</a><br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-90293496225647465492010-02-28T23:56:00.000-05:002010-03-01T01:11:45.100-05:00HTML5 browser support<div>The emergence of the HTML5 specifications has gotten me all excited about the future of web pages and the possibility of web applications finally catching up with their desktop counterparts (in terms of speed and richness). For just getting my hands a little dirty with the "magical" HTML5 dust, I decided to quickly write up some sample code to detect some features I thought were important. Of course, I have skipped quite a few (I haven't read the complete specs yet).</div><div><br /></div><div>If you want to take a look at what I've coded up, click <a href="http://www.box.net/shared/mvtprqndct" target="_blank">here</a> to download the files. The Html5Detect object queries most properties as simple getter functions. </div><div><br /></div>The following table lists some of the HTML5 elements and properties supported in 4 of the latest browsers (Windows versions only tested here):<br /><br /><table><tbody><tr><th>Property</th><th>Chrome4</th><th>Opera10</th><th>Safari4</th><th>Firefox3.5</th></tr><tr><td>canvas</td><td>TRUE</td><td>TRUE</td><td>TRUE</td><td>TRUE</td></tr><tr><td>canvasText</td><td>TRUE</td><td>FALSE</td><td>TRUE</td><td>TRUE</td></tr><tr><td>video</td><td>TRUE</td><td>FALSE</td><td>TRUE</td><td>TRUE</td></tr><tr><td>h264 video</td><td>probably</td><td>FALSE</td><td>probably</td><td>FALSE</td></tr><tr><td>OGG video</td><td>probably</td><td>FALSE</td><td>FALSE</td><td>probably</td></tr><tr><td>localStorage</td><td>TRUE</td><td>FALSE</td><td>TRUE</td><td>TRUE</td></tr><tr><td>workers</td><td>TRUE</td><td>FALSE</td><td>TRUE</td><td>TRUE</td></tr><tr><td>applicationCache</td><td>FALSE</td><td>FALSE</td><td>TRUE</td><td>TRUE</td></tr><tr><td>geoLocation</td><td>FALSE</td><td>FALSE</td><td>TRUE</td><td>TRUE</td></tr><tr><td>placeholder</td><td>TRUE</td><td>FALSE</td><td>FALSE</td><td>FALSE</td></tr><tr><td>autofocus</td><td>TRUE</td><td>TRUE</td><td>TRUE</td><td>FALSE</td></tr><tr><td>microdata</td><td>FALSE</td><td>FALSE</td><td>FALSE</td><td>FALSE</td></tr><tr><td>inputTypes.search</td><td>TRUE</td><td>FALSE</td><td>TRUE</td><td>FALSE</td></tr><tr><td>inputTypes.number</td><td>TRUE</td><td>TRUE</td><td>TRUE</td><td>FALSE</td></tr><tr><td>inputTypes.range</td><td>TRUE</td><td>TRUE</td><td>TRUE</td><td>FALSE</td></tr><tr><td>inputTypes.color</td><td>TRUE</td><td>FALSE</td><td>FALSE</td><td>FALSE</td></tr><tr><td>inputTypes.tel</td><td>TRUE</td><td>FALSE</td><td>TRUE</td><td>FALSE</td></tr><tr><td>inputTypes.url</td><td>TRUE</td><td>TRUE</td><td>TRUE</td><td>FALSE</td></tr><tr><td>inputTypes.email</td><td>TRUE</td><td>TRUE</td><td>TRUE</td><td>FALSE</td></tr><tr><td>inputTypes.date</td><td>FALSE</td><td>TRUE</td><td>FALSE</td><td>FALSE</td></tr><tr><td>inputTypes.month</td><td>FALSE</td><td>TRUE</td><td>FALSE</td><td>FALSE</td></tr><tr><td>inputTypes.time</td><td>FALSE</td><td>TRUE</td><td>FALSE</td><td>FALSE</td></tr><tr><td>inputTypes.datetime</td><td>FALSE</td><td>TRUE</td><td>FALSE</td><td>FALSE</td></tr><tr><td>inputTypes.datetimeLocal</td><td>FALSE</td><td>TRUE</td><td>FALSE</td><td>FALSE</td></tr></tbody></table><br /><div>For all values of "probably", I haven't tried them out myself yet, but that's the value the detection returns. "probably" indicates that the browser is fairly confident that it can play this format. IE8 doesn't support any of the HTML5 elements I've tested for. </div><div><br /></div><div>Let me know if there are any other browsers you would like to see included in this list. For further reading, I'd recommend following the <a href="http://dev.w3.org/html5/spec/Overview.html" target="_blank">HTML5 specification</a> itself, as it is rapidly evolving.</div><div><br /></div><div>Cheers.</div>Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-60588397197564598972009-12-19T10:42:00.000-05:002009-12-19T11:42:51.667-05:00Detecting online/offline mode in javascriptHi.<br /><br />Here is an interesting property I came across when going through some articles on object detection. With all the fuss being created recently about being able to run applications in a browser in offline mode, here is a very simple property that has been added to today's latest desktop/laptop browsers to tell if the browser is set for online or offline browsing and can aid in supporting such features:<br /><br /><span style="font-weight:bold;">window.navigator.onLine</span><br /><br />This property returns true if running in online mode and false if running in offline mode. <br /><br />The browsers (I've tested on a Windows Vista Home Basic laptop) that currently support this property are:<br /><ul><br /><li>Firefox 3.5</li><br /><li>Internet Explorer 8</li><br /><li>Google Chrome 8</li><br /><li>Opera 10.10</li><br /><li>Safari 4.0.4</li><br /></ul><br /><br />Of course, check to make sure the browser supports this property before attempting to use it. Click <a href="javascript:alert(window.navigator.onLine)">here</a> to quickly tell if the browser you're using supports this property and, if so, what it's current mode is.<br /><br />Here's another useful method of detecting if a browser is actually connected to the internet or not using image loading:<br /><br /><code><br />< image src="some publicly accessible image" onload="alert('online')" onerror="alert('offline')" /><br /></code><br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-431401322405993802009-09-01T22:07:00.001-04:002009-09-01T22:23:18.218-04:00Speeding up javascript performanceHi.<br /><br />I came across the following video on YouTube by "googletechtalks" in which Nicholas Zakas, the principal front-end designer of Yahoo! homepage presents his finding on what kind of javascript code slows down performance in the various browsers. Kudos to Nicholas for this simple yet thought-provoking presentation. It was an eye-opener into a number of topics I never knew about and has made me think a lot more about any new JS code I write. Here it is:<br /><br /><center><object height="285" width="340"><param name="movie" value="http://www.youtube-nocookie.com/v/mHtdZgou0qU&hl=en&fs=1&color1=0x006699&color2=0x54abd6&border=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube-nocookie.com/v/mHtdZgou0qU&hl=en&fs=1&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="285" width="340"></embed></object></center><br /><br />In my view, the main takeaways from the presentation were:<br /><br />1. Use local variables in functions for storing out-of-scope variables (in case they are to be used more than once) due to <span style="font-weight: bold;">scope chains</span>. Do not use the "with" statement and cautiously use the "catch" phrase of the try-catch blocks. Use closures sparingly due to the same reasons.<br />2. Data access: Accessing from <span style="font-weight: bold;">object property</span> or <span style="font-weight: bold;">array item</span> is more expensive. (object prop being most expensive). So store in local variables before using.<br />3. <span style="font-weight: bold;">Decrease</span> number of iterations per loop plus the amount of work being done in each loop.<br />4. Beware of using <span style="font-weight: bold;">HTMLCollection</span> objects (such as those returned from getElementsByTagName) as accessing their properties are very expensive. Store properties in local variables (such as length) or move into a regular object or array before accessing them.<br />5. Use <span style="font-weight: bold;">document fragments</span> (using createDocumentFragment) to update a group of related DOM objects and then update the page to minimize reflows (redraw of pages). Also minimize style changes to prevent reflow.<br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-73240806809216710942009-06-11T17:18:00.000-04:002009-06-14T19:14:18.547-04:00JavaScript window event load orderHi.<br /><br />Here's an observation I ran across when wondering about the order of event execution when registering events on a page. Let's take a look at the following code first:<pre><code><br />< script type="text/javascript" ><br />/*window.onload = function(){<br /> sayOne();<br />};<br />window.onload = function(){<br /> sayTwo();<br />};*/<br />function sayOne(){<br /> alert(1);<br />}<br />function sayTwo(){<br /> alert(2);<br />}<br />function sayThree(){<br /> alert(3);<br />}<br />if(window.attachEvent){//specifically for IE and Opera<br /> window.attachEvent("onload",sayOne);<br /> window.attachEvent("onload",sayTwo);<br /> window.attachEvent("onload",sayThree);<br />}<br />else if(window.addEventListener){//all others<br /> window.addEventListener("load",sayOne,false);<br /> window.addEventListener("load",sayTwo,false);<br /> window.addEventListener("load",sayThree,false);<br />}<br />< /script><br /></code><br /></pre>If only the two commented lines at the top are uncommented (the ones using window.onload), then the "onload" event registered to "sayOne" gets overwritten by the second event handler registration to "sayTwo". Thus, only the "sayTwo" function gets executed, while the "sayOne" function will never be called.<br /><br />Now, using the W3C and Microsoft event registration mechanisms, all the registered event handlers are invoked, but their orders differ in the two primary browsers viz. Internet Explorer(IE) and Firefox (FF). In IE, they seem to get pushed onto some sort of stack and the event handlers are invoked in the reverse order of them being "attached" to the window. Thus, in IE, the order of function calls on the window being loaded is:<br /><ul><li>sayThree</li><li>sayTwo</li><li>sayOne</li></ul><br />However, in FF and all other browsers (tested this code in FF 3.0.11, IE7 & 8, Opera 9.64, Safari 4 (Public Beta) and Chrome 2.0.172), the functions are called in the order in which they are registered (as in a queue). All the browsers followed the expected event order execution except IE (no surprises there)!!! Also interesting is that Opera implements both "attachEVent" and "addEventListener". <br /><br />I guess this quirk is just a browser implementation decision by the companies, but I wonder what the W3C has to say about it?<br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com1tag:blogger.com,1999:blog-9033843025642091616.post-44976984123434557182009-01-26T01:15:00.000-05:002009-01-26T22:11:46.189-05:00Printing selected portions of a page with CSSHere's a quick trick to print selected sections of a page using some simple CSS and JavaScript. This post came about after my long fascination with how maps.google.com works to produce a page that has some control buttons on it, but when the "Print" button is clicked (that just contains a simple "window.print" statement), it is able to print out only sections of the page relevant to the data we have tried to obtain. Both maps.google.com and maps.yahoo.com offer the option to print the directions and provide a preview of what the page would look like before one prints it.<br /><br />Say, for example, I had the following page from which I wanted to print only sections of it out with my printer.<br /> <br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5p1AL0qOaWX8WnogwRgSpneNWZ0-62qUOhgUN_EvnJ-cUD2ucCqhUotZ9NNhyphenhyphenspx-IjzitgaLRLFZfECykJQp-h2nIw1001TCYAE_2TeGMh1R2clyGGbtlXz3ebNAgbX0BiJVTxBFSY/s1600-h/selected-print.jpg" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 253px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5p1AL0qOaWX8WnogwRgSpneNWZ0-62qUOhgUN_EvnJ-cUD2ucCqhUotZ9NNhyphenhyphenspx-IjzitgaLRLFZfECykJQp-h2nIw1001TCYAE_2TeGMh1R2clyGGbtlXz3ebNAgbX0BiJVTxBFSY/s320/selected-print.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5295493536117878290"></a><br />After reading a bit on the media attribute for CSS, I just put together a simple example to illustrate how it works. The code below displays some text and tables, some of which we want to print while the other sections we want to omit. Add the following CSS code to the head section of your page:<br /><pre><code><i><br />< style ><br />@media print {<br />.printMeNot {display:none; }<br />}<br />< /style ></i><br /></code></pre><br />Now, any sections of the page you do not want present in the printed page, wrap them in a span or a div with the class "printMeNot". That's it!!! No silly iframe methods or need to open another window with just content you want to print. This is how the print preview window would look like:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8LjweSnMJ7ofCCcOIQ4Vy07dnDD7DPd2gv0EOG53_fn2laEpgmWlhujEeIoxCjgB0vHTLUvjeKk5ZGX43aRqxU9smna29O6-LdFgxWp1rA0BWKKAYpCQXDB7u5DxL3mbtq4LNaonyoI/s1600-h/selected-print-preview.jpg" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 153px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8LjweSnMJ7ofCCcOIQ4Vy07dnDD7DPd2gv0EOG53_fn2laEpgmWlhujEeIoxCjgB0vHTLUvjeKk5ZGX43aRqxU9smna29O6-LdFgxWp1rA0BWKKAYpCQXDB7u5DxL3mbtq4LNaonyoI/s320/selected-print-preview.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5295494644552337106" /></a><br />The file used in the above example can be downloaded <a href="http://www.box.net/shared/f6kvu0ymzs" target="_blank">HERE</a>.<br />Browsers tested in: FF 3.0.5, IE8 Beta2, Opera 9.63, Safari 3.2.1 (for Windows) and Google Chrome 1.0.154.43.<br /><br/>Happy printing!!!Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com1tag:blogger.com,1999:blog-9033843025642091616.post-91384123984224300062008-09-20T17:20:00.000-04:002008-09-22T22:30:51.934-04:00Error page quirks in IE and ChromeHere's another quirk of Internet Explorer and Chrome, the documentation of which is tough to find anywhere. In implementing the 404 error page on Resin, I came across a weird situation where FF, Opera and Safari would display the error page correctly but IE and Chrome would display their own error pages. This led to quite some frustration, having checked and rechecked all of the application and resin settings over and over.<br /><br />It turned out that the only reason for this was that the size of the custom error page I had designed was lower than the threshold set by IE and Chrome for the 404 page. Basically, the error pages <span style="font-weight:bold;">must be greater than 512 bytes</span> to be viewable on all browsers. For IE, the settings of the error pages are stored in the registry at<br /><span style="font-style:italic;">HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\ErrorThresholds</span><br/>The following image shows the registry entries for the various error codes in RegEdit:<br/><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ymL3-cBelyfi2WbyvWBrcKJLc-mCxx0l7J5zPRclyLtQGJW22x1Y_gWrweAh_X7NugfDgJqV078vvKe_1j5z6ZFE1NGdO3obdiy8SfpbwhsVobD0cbLrPBgBCZC2yJU7nOHHdmF82Xs/s1600-h/Registry_IE_thresholds404.jpg" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ymL3-cBelyfi2WbyvWBrcKJLc-mCxx0l7J5zPRclyLtQGJW22x1Y_gWrweAh_X7NugfDgJqV078vvKe_1j5z6ZFE1NGdO3obdiy8SfpbwhsVobD0cbLrPBgBCZC2yJU7nOHHdmF82Xs/s320/Registry_IE_thresholds404.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5248231875627525826" /></a><br />The setting in Chrome (for 404) is tied into the source code and can't be modified just as easily. Check out the comment in <a href="http://src.chromium.org/viewvc/chrome/trunk/src/webkit/glue/webframeloaderclient_impl.cc?view=markup&pathrev=1359" target="_blank">this</a> source code of Chrome around line 259. <br /><code><br />// If it's a 404 page, we wait until we get 512 bytes of data before trying<br />// to load the document. This allows us to put up an alternate 404 page if<br />// there's short text.<br /></code><br />Surprising that Chrome had this setting as well, especially considering that Safari also uses the same WebKit HTML and CSS rendering engine and it doesn't exhibit this quirk.<br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-6410556188892603722008-09-17T04:38:00.000-04:002008-09-17T05:22:04.161-04:00Reading Chrome's bookmarks in javaGoogle recently released Chrome, a browser based on WebKit (the same one used by Safari). The user interface is quite pleasant and so is its functionality. A few improvements need to be made (for eg.: addition of plugins, RSS feed reader, autofill in textboxes) before it endears itself to techies and common users. Its V8 engine definitely appears to make JavaScript run a whole lot faster than other browsers (even better than Opera in my tests). This video explains a little more on its architecture and working:<br /><a href="http://www.youtube.com/watch?v=hWhMKalEicY" target="_blank">V8: an open source JavaScript engine</a><br /><br />Having worked on synchronizing various user settings and files from within the major browsers (namely IE, FF, Safari, Opera and Konqueror), it was only natural I started breaking down Chrome and its settings. The first thing I've looked into is finding a way to synchronize its bookmarks. As of this writing, Chrome currently is built for only Windows XP and Windows Vista, with versions for Mac and Linux expected sometime in the near future. Chrome uses SqlLite databases to save all of the settings and preferences. The following blog entry provided some great insights into how the bookmarks are stored in these files:<br /><a href="http://coolthingoftheday.blogspot.com/2008/09/chrome-notes-bookmarks-where-oh-where.html" target="_blank">Greg Duncan's blog</a><br /><br />Enriched with the information from the link above, I found writing a java program to extract the bookmarks really simple. With the inclusion of the SQLLite Java wrapper and the corresponding JDBC driver binary, reading from the tables turned out to be a snap. The program was compiled in Netbeans 6.1 with Java 1.6 on a Windows Vista Home Basic edition.<br /><br />You can download the entire netbeans project from the following link:<br /><a href="http://www.box.net/shared/2i1zbkz2yu" target="_blank">ChromeBookmarks.rar</a><br /><br />Please feel free to use this code in any way you would like. Just don't point my way if anything crashes ;-)<br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com3tag:blogger.com,1999:blog-9033843025642091616.post-8676621165418986392008-08-27T17:48:00.000-04:002008-09-11T00:31:00.707-04:00JavaScript DOM property listenersHere's a scenario.... Say we have an image on an HTML page that can be dragged and dropped anywhere within the browser window. Now, we need to perform some operations such as displaying the current location of the image as soon as the position of the image changes. The most common way of changing the position of an element in JavaScript is by modifying its style attribute's "top" and "left" properties. Now, we can detect such modifications in most current browsers by using functions available on the DOM elements. The syntax and working of these events is very different between the various browsers but suffice for most situations. <br /><br />Basically, IE supports the "onpropertychange" event on DOM elements while FF and Opera support the "DOMAttrModified" event. Here's some sample code that's been tested in IE7, FF2 and Opera 9.5, that illustrates how these events can be used. Safari has no equivalent event in its repertoire, so the code below doesn't work in it at the moment.<pre><code><br />function changeDivAttrs(){<br /> var div = $("testDiv");<br /> div.style.borderColor = "green";<br />}<br />function setWatches(){<br /> var div = $("testDiv");<br /> if(browser.IE)<br /> div.setAttribute("onpropertychange",handleChange);<br /> else<br /> div.addEventListener("DOMAttrModified",<br /> handleChange,false); <br />}<br />function handleChange(e){<br /> if(browser.IE) {<br /> //comment this line to view all attributes affected<br /> if(event.propertyName == "style.borderColor")<br /> showMessage(event.srcElement, <br /> event.srcElement.id, <br /> event.propertyName);<br /> }<br /> else //Firefox and Opera<br /> showMessage(e.target,e.target.id,e.attrName);<br />}<br />function showMessage(element,id,propertyName){<br /> alert(element + ":" + id + ":" + propertyName);<br />}<br />//HTML Section<br />< body onload="setWatches()" ><br /> < div id="testDiv"<br /> style="border-color:red;<br /> border-style:solid;<br /> border-width:2px" ><br /> Test DIV Container<br /> < /div ><br /> < input type="button" onclick="changeDivAttrs()" <br /> value="Change" /><br />< /body ><br /></code></pre>FF and Opera return the property name as just "style" while IE returns "style.borderColor" (kudos to the IE developers, for once!!!). Also, FF and Opera really watch for just changes i.e. the event is fired only when the previous value of the attribute is different from the new value. IE, on the other hand, fires every time the property is set or reset, even if the value hasn't really been modified. Additionally, comment the check in the function "handleChange" to see that the properties "borderTopColor","borderRightColor","borderBottomColor" and "borderLeftColor" are also getting affected. <br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-31244860904865450052008-08-26T14:11:00.000-04:002008-09-20T18:45:03.256-04:00Comet in ASP.NetComet, in general, is the technique of enabling server-side push instead of having client-side pull for refreshing information in the user's interface. The latter involves regular pinging of the server from the client to check for any changes that may have occurred on the server and send the corresponding information to update the user's UI accordingly. In applying Comet, one can notify the server-side changes to the client without the need of the constant pinging. Typical scenarios where Comet appears to have a relevant niche involve browser based chat applications, online collaboration and editing systems (such as GoogleDocs) and browser based web OSs.<br /><br />Comet ties client-side JavaScript tightly with the server-side by having a long-running HTTP connection through which the server can push updates to the client as and when they occur. One technique that has worked well for me has been opening having one connection open in a hidden iframe on the page that's long-running. Another connection that sends information from the client up to the server is also established whenever corresponding user interaction takes place. This second connection opens and closes just like a regular HTTP request and can be performed using AJAX. <br /><br />In an great example by Dave Ward at <a href="http://encosia.com/2007/10/03/easy-incremental-status-updates-for-long-requests/" target="_blank">Encosia</a>, he provides a very basic example of how the server can push data down to the client by using sleep states on the server. He performs a callback on the client by writing out pieces of JavaScript to the long-running connection, thus making it run within the iframe and, since its in the same domain, can call methods in the parent window to perform updates in the browser window. This and a number of other articles I read up elsewhere prompted me to try and use this technique in a real world application. The application I felt I could quickly demonstrate Comet was a chat application.<br /><br />The image below shows the chat application in operation in two different browsers on the same machine. The example was written in Visual Web Developer 2008 using the Microsoft Dot Net Framework 3.5. The code works in FF2 and Opera 9.5 so far. Not too many optimizations have been performed as the goal of this was to just demonstrate a way in which Comet could work without having to switch to any "dedicated Comet" servers. The same principles could be applied in Java too where the two connections could be established with two separate servlets to achieve the same results. In case anyone would like to view the source code for this, email me at avinpr@yahoo.com. <br /><br />Cheers.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9b2OtV0XHZQoktoqY-vfs0uScCni-lP8W39ZEH_4H08e2g7cTDocgQRNcFyGhjj8EOkAt1EQeyjEo4GQDJ4ZSygrKgPPETNvSWqNzEYuk9W7N5A2Q9g7dzf28BQEMM6L63hTKLt6gGxg/s1600-h/CometChat.jpg" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9b2OtV0XHZQoktoqY-vfs0uScCni-lP8W39ZEH_4H08e2g7cTDocgQRNcFyGhjj8EOkAt1EQeyjEo4GQDJ4ZSygrKgPPETNvSWqNzEYuk9W7N5A2Q9g7dzf28BQEMM6L63hTKLt6gGxg/s320/CometChat.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5238897475312772994" /></a>Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-47182306059674812652008-08-18T19:55:00.000-04:002008-08-18T20:19:59.361-04:00Namespacing in JavaScriptNamespacing, in general, allows one to provide a context for the content to be declared in one's code. It helps resolve same name ambiguities by having variables, functions and even objects residing in different namespaces. JavaScript, unlike Java, does not have the "namespace" keyword as part of its standard list.<br /><br />Now, there are different ways of defining namespaces in JS. The root namespace's name should be as unique as possible and should generally be having application scope, but there is no restriction present and can be named according to one's preferences. Before delving into more details, I think an example will give all a better idea on this. So, here goes:<br /><pre><code><br />var MyNameSpace = {};<br /><br />MyNameSpace.MyClass = function(str){<br /> this.name = str;<br /> this.alertClassName = function(){ alert(this.name); }<br />}<br /><br />//usage<br />with(MyNameSpace){<br /> var myObject = new MyClass("Class1");<br /> myObject.alertClassName();<br />}</code></pre><br />Here, an object called "MyNameSpace" is created in the global(window) scope of things. Now, one must ensure that only one root namespace exists. There are a variety of ways one can do so but I shall not delve into those methods at this time. <br /><br />The class declaration basically creates a property of the "MyNameSpace" object and hence declaration of any object created from this class must use the root namespace before an instance can be created. This also encapsulates the class("MyClass") and ties it to the root namespace and hence prevents name conflicts with any other included javascript classes or variables that may also have the same name "MyClass".<br /><br />There exists other ways in which namespaces can be declared but I feel the example above is easiest to understand and implement. In case you feel otherwise, I'd like to know why. <br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-8662766108709100372008-08-05T14:34:00.000-04:002008-09-20T18:47:06.696-04:00JavaScript String ReversalI was just surfing through some snippets when I came across some code for string reversal in JavaScript. Often people post code without having tested it themselves, which is just wrong!!! Here's a snippet I saw when going through one of these posts:<br /><pre><code>//NOTE: Non-functional JS code for string reversal<br />for (var i = 0; i < middle; i++) {<br /> var temp = thestring[i];<br /> thestring[i] = thestring[last-i];<br /> thestring[last-i] = temp;<br />}</code></pre>Now, one basic thing most people don't realize is that in JavaScript, individual characters of a string cannot be altered by using just the indexes. The above piece of code leaves the string unaltered not throwing any exceptions. The assignment to the individual characters is just ignored and "thestring" remains unchanged. Tested this in FF2, IE7 and Opera 9.51 and they all yielded the same result.<br /><br />Since string reversal is a very common operation, it could be added to the String prototype if it makes sense. The following snippet does the job quite well, using two very useful functions available to arrays, reverse and join.<br /><pre><code>/* Full credit to Shachi Bista<br /><a href="http://www.bytemycode.com/snippets/snippet/400" target="_blank">http://www.bytemycode.com/snippets/snippet/400</a> */<br />String.prototype.reverse = function(){<br /> splitext = this.split("");<br /> revertext = splitext.reverse();<br /> reversed = revertext.join("");<br /> return reversed;<br />}<br /></code></pre>Now I prefer to always explicitly declare variables before using them. In this case, "splitext" and "revertext" become global members and could affect other variables that have the same name. Thus, to keep it localized, always explicitly declare the variable within the functions unless you want it to be available everywhere. So here's my revised version of it:<br /><pre><code>String.prototype.reverse = function(){<br /> var splitext = this.split("");<br /> var revertext = splitext.reverse();<br /> return revertext.join("");<br />}<br /></code></pre>If you have a different approach or find a bug in my logic, do let me know.<br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-82002032525824548802008-08-04T20:27:00.000-04:002008-08-11T14:13:19.769-04:00JavaScript type checking and "isArray" functionNow javascript is a loosely typed language. What do I mean by that? It means just one "type" of variable exists in javascript represented by "var". Even declaring objects of your own type is done in the same manner. This is unlike Java or C++ in which the basic data types are declared as:<br /><code>int a = 10; string b = "hello world"; ...</code><br /><br />In JS, all variables (and even functions) can be referenced by using simple "var" declarations. For example, <code>var a = 10; var b = "hello world";...</code><br /><br />Now this causes a problem in checking the type of any object passed into a function. For example, when a function is expecting a string but the callee passes in an integer as a parameter, the function may falter. To do this, checking the type of the variable being passed in can help avoid unexpected errors and continue program execution even when an error occurs or using appropriate error handling capabilities (which I shall speak of on another post).<br /><br />One of the most common operations when dealing with JSON(JavaScript Object Notation) during AJAX communications is the need to check if the returned object is a single object or an array of similar objects. For doing this there are a variety approaches:<br /><code>function isArray(obj){<br /> return obj && (obj.constructor == Array);<br /> //return obj && (obj instanceof Array || typeof obj == "array"); //DOJO toolkit approach<br /> /* if(obj.constructor.toString().indexOf("Array") == -1)<br /> return false;<br /> else<br /> return true;*/<br /> /* if(!obj || typeof obj == "string")<br /> return false;<br /> return obj.length != null; */ //had to use this for Nokia S60 browsers since constructor wasn't recognized<br />}</code><br />I found the first solution very concise and works on most modern browsers. A useful piece of information is that the "===" (triple equals to) checks for type equality compared to the "==" which checks only the values, which can be used in various other situations.<br /><br />I'll leave this topic open to debate. There's no one perfect solution on every platform for this, primarily due to the differences in implementation in the various browsers.<br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0tag:blogger.com,1999:blog-9033843025642091616.post-53152020479599101512008-07-31T23:37:00.000-04:002008-08-04T21:28:08.951-04:00An IntroductionHi folks.<br /><br />I'm Avinash Prasad, a software engineer who's just starting to understand (I think) what software programming is all about. I've worked with a few technologies and programming languages but have never really mastered any. One reason I feel this is is because I never went back to examining what I had really done in any project. I wrote the code, made sure it worked, checked it in and then just forgot about it.<br /><br />This is an attempt at understanding the code I shall be writing from now on and sharing my experiences with you folks. I may tackle some areas which may be of your interest and some that you may have never worked with. I may talk about some intricate problems with browsers or just muse about the latest addition to the Java programming language. Through this, I hope to help those in need of any information I may have and be able to share what I may know and others don't with the programming community at large. Hopefully, it shall also help me improve on my programming skills, so I may, someday, call myself a "Programmer".<br /><br />Cheers.Avinashhttp://www.blogger.com/profile/01041284747805004115noreply@blogger.com0