I was following up Lisa Ray, an established Bollywood actress, on her personal blog, she’d tagged as the Yellow Diary blog. The post that really got my attention was where she came out as saying that she had an incurable form of Multiple Myeloma cancer. I was hooked to the blog after that and wanted to know more of what going on in her life. Interestingly enough I ended up looking for answers on Twitter and there she was on Twitter as well. That whole day, I searched through the Twitter directory to search for who else is online and astonishingly enough almost every Bollywood star was up there (with an exception of a few).

Bollywood is finally grasping the mammoth dynamics of using Twitter

Relationship Dynamics

Once you end up on a Twitter page for a certain star, it’s just as easy to see who the star has on speed dial. Check whom the star is following and an even bigger picture of inner Bollywood relationship dynamics comes into play. Recently enough, many a journalist have ventured into these Twitter profiles and assembled presumptions of “who is related to who” purely following the followers.

Putting Twitter to good use

Actress Gul Panag wearing a t-shirt saying, "Have you been Gul'd yet?" and her Twitter profile address follows.

Actress Lara Dutta fell ill, director Mahesh Bhatt came out as quite a poetic personality and playback singer Shreya Ghoshal thinks the movie “Day After Tomorrow” is scary. These tweets might be personal but they aren’t worth the time for these Bollywood powerhouses. Half the world is following them, these stars still haven’t figured out how to bank on the benefits of using real-time social networking. However, there seems to be a few individual that seem to have grasped the true potential of Twitter.

One worth mentioning is actress Gul Panag. Recently, she was asked by the Wills Lifestyle India Fashion Week to be their tweeting brand ambassador, so to say. She was asked to tweet a minute-by-minute description of what happened in the fashion shows that she was then invited to and posted pictures from her mobile phone’s built-in camera. This personal approach to interactions with a worldwide audience and fashion enthusiasts not only brought the recent fashion events into a spotlight but also gave a boost to the actresses followers. Overnight she had amassed followers in the tens of thousands.

Find your favourite Bollywood star on Twitter

Here are some pointers to stars and banners that you might want to follow.

• Dino Morea
• Lisa Rani Ray
• Lara Dutta
• Emraan Hashmi
• Konkona Sen Sharma
• Shreya Ghoshal
• Yash Raj Films
• Mallika Sherawat
• Mahesh Bhatt
• Gul Panag
• Tarun Mansukhani
• Pooja Bhatt
• Priyanka Chopra
• Uday Chopra
• Karan Johar
• Mandira Bedi
• Imran Khan
• Anushka Manchanda
• Sonam Kapoor

Overall Performance Enhancements

Javacript Performance

Mozilla Firefox 3.6 is following the Google Chrome fundamentals of effectively speeding up the opening and closing of tabs, and the added performance boost for the underlying Javascript engine. In version 3.5, Firefox upgraded its Javascript rendering engine to a better version, called TraceMonkey. 3.6 sees the TraceMonkey engine speed up by yet another 15% with the Beta 1 installment. We employed the help of the SunSpider Javascript benchmark test to compare the TraceMonkey engine to the Javascripting capabilities of all modern browsers on the Windows platform. Here are the results.

Hints on isolated process and multiprocessing within tabs

Opening up new tabs, new windows and sidebars are considerably sped up. With version 3.5, the Firefox browser had hints of tabs running in a virtual parallel content process (multiprocessing) – you could drag a content tab out of it’s window and the tab appears as a separate window of its own. Although, the real thing (á la the Chrome-like isolated processes) is planned for the 3.7 release only expected in Spring 2010.

User Interface Goodies

Hiding the menu bar

There’s not much at offer when it comes to the overall user interface. You can finally hide the menu bar without adding any special add-ons to do so, giving you more estate for your web pages. Ironically though, there is a reason that Mozilla implemented this feature with this release. In all the upcoming releases (i.e., 3.7 and 4.0), you would find the menu bar hidden by default. The main reason for this is mainly to separate the menu bar from being run in a single process while handling multiple tabs to each tab having its very own menu and location/search bar.

Cross-Tab Browsing

Better cross-tab browsing options have been introduced. To enable the nifty features, you would need to go to the Firefox configuration page by typing about:config in the address bar and modify the following properties.

• browser.allTabs.previews: true
• browser.ctrlTab.previews: true

The above changes enable you to sift through small thumbnail previews of tabs when pressing the usual Ctrl+Tab (Cmd+Tab) combination. This way, you can easily jump between tabs without going through each one of them. Refer to the thumbnail below to see how it looks like.

Firefox Tab Previews

“Open link in a new tab” opens  tab next to the referring tab

Another quick UI enhancement that I noted was the default behaviour of a tab when it is opened using the “Open link in a new tab” option or Ctrl+Click (Cmd+Click). Instead of opening at the end of your opened tabs, the new tab (if clicked from a link on a page) would open right next to the tab of the referring page – somewhat like Internet Explorer 8 (minus the colour coded groups).

Orientation API

The most anticipated feature in the Firefox 3.6 release could quite possibly be the Mozilla Orientation API. Using this API, Firefox makes available the underlying machine’s orientation information to enable pages to know when the machine is moved or tilted. The API was originally designed to be used with mobile phones (as part of Fennec, Firefox’s version for mobile phones). But, if your machine has an accelerometer (which usually comes with IBM ThinkPad and MacBooks), you can literally title pages within your browser. Sadly, because I don’t have the luxury of owning a device with an accelerometer, I couldn’t test the feature yet. If you do not own an accelerometer, you might probably consider watching the demo video for the Orientation API.

Windows 7 enhancements

Version 3.6 hosts some surprises for Windows 7 users as it makes full use of the handy taskbar thumbnail previews (for all opened tabs) instead of just opened windows. A bit buggy at the moment, this feature was originally meant for Firefox 3.7 beta releases though. For Vista and 7 systems alike, Firefox uses more of the underlying rendering capabilities of Aero to boost performance and a better sleeker interface.

Odd things I noted

• There appears to be a “full-screen” button in the Customize Toolbars dialog. You can make web pages appear in fullscreen on any browser using the F11 key, but never would one have needed a button to do so.

CSS Enhancements

The new Mozilla Firefox 3.6 Beta 1 browser hosts some nifty new CSS3 features. Some of these features are as follows:

• Support for background gradients: -moz-linear-gradient and -moz-radial-gradient
• Support for background image sizing: -moz-background-size

SunSpider Javascript Benchmark shows Firefox as the fastest

Javascript performance has certainly been enhanced for this version. One of my favourite benchmark tests, when it comes to Javascript regression testing, is that of the SunSpider Javascript Benchmark Test as provided on the Webkit website. The Mozilla Firefox 3.6 Beta 1 scored considerably better than any of its predecessors and certainly faster than any other browser known to me. Following is a graphical representation of the comparison of tests conducted on Mozilla Firefox 3.6 Beta 1, Safari for Windows 4.0.3 and Internet Explorer 8 browsers.

Sun Spider Benchmark Test: IE8 (15,779.6ms), Safari (8253.4ms) and Firefox (2527.4ms)

In a recent interview with the Web Designer magazine, Amy Barzdukas, Microsoft’s general manager for Internet Explorer and Consumer Security said, “Our first competition is really our own past browser [Internet Explorer 6] … and of course, people’s perception of what IE is…” She later added, “Consumers aren’t that worried about [the] ACID3 test [.. but ...] about other pressing matters like security.”

The W3C standards are the actual problem

For a consumer-focused company like Microsoft, stepping up into an aggressive inclusion of web-standards support  is just not feasible enough. For one thing though, web standards aren’t always as clearly defined. Most of the web standards still clog the W3C think tanks as working drafts – which means they are not yet complete at all in any shape or form. Either, there’s a feature that a certain browser vendor isn’t happy with or it dissatisfies some other aspect of design for their rendering capabilities. Take for instance, the new HTML5 specification which asks for support for out-of-the-box video experience and native media support in all browsers. Even though the <video> tag has been clearly defined in the specification, vendors still aren’t sure what formats need to be supported by default – Theora or H.264. Indecision haunts these standards recommendations and adopters.

When the CSS2.1 specification was established in 1999 as a W3 working draft, no one anticipated it would take 10 years until 2009 for it to actually be released as recommended specification. And surprise, surprise – the only browser that does fully support the CSS2.1 specification is none other than IE itself. No other browser supports the complete recommended specification for CSS2.1 and still they are aggressively pursuing CSS3. In the end, a browser that takes this course just ends up with an often incomplete support for the same. In effect, Microsoft has adopted a new strategy that states only taking up specifications that are completed or are near completion. This would imply that not much effort is spent in pruning or trimming edges when those very specifications do change. In an interview with Tech Republic, Ian Hickson, the editor of the HTML5 working draft gave a deadline for the completion of the draft – it was much farther than any one ever expected – all the way in 2022.

Now, the question really is – should Microsoft really start implementing the whole standard straight away. We’ve recently discussed how HTML5 can already be used in today’s browsers with the inclusion of a few hacks. Why not use hacks to do the stuff until W3C shortens the deadline?

Lower-order versions with Internet Explorer

The latest version of Internet Explorer that I have installed here on my system is (as you’ve guessed) version 8. Before it was (you are right) version 7. Now, version 8 is a far cry from its predecessors, in that most of the rendering capabilities for the new version have been included in the design from scratch. Problem with the adoption of newer standards as they appear might also be Microsoft’s deployment strategies – whereby Microsoft delivers products with a higher-order version, like 7 or 8. What contenders do is to often release a few lower-order versions before releasing a final product. Mozilla already has released five lower-order versions for Firefox 3. As of today (28 October 2009), Mozilla would be releasing the Firefox 3.6 beta 1 for testing purposes and feedback.

If Internet Explorer comes up with lower-order version in between releases, there is a far greater chance that Internet Explorer would better equip itself with the growing trends present online today. Anyone for nightly builds? This might just help build a support community for the browser and deliver better features with every release.

CSS2.1 was seen as the epitome of content-design separation in the world of web design and development – the specification for which came into existence in 1999. It was only until 23 April 2009 that the standard was officially pronounced a candidate recommendation for the web. Now, for a standard to be accepted as a candidate recommendation, it needs to be fully supported by at least two browsers. Sadly, CSS2.1 is only fully supported by one browser – an unlikely Internet Explorer 8. Yet, did it stop anyone from using the specification in their designs? Almost all the web developers that I know of use CSS2.1. Now, since the first W3C working draft for HTML5 was issued on 23 Jan 2008, browser vendors and developers are keen on experimenting with the standard and its many features to stay on top of the game.

Why use HTML5 now?

Speculations point to the official release of the complete specification by the year 2022, but support for the same is aggressively under way amongst some of the major browsers in use. All web designers and developers that fail to grasp the importance of this standard could potentially lag at adoption when the technology does come into play earlier than expected. By the looks of it, the web paradigm would soon be using HTML5 in their designs sooner rather than later.

What is new in HTML5?

Consider HTML5 as a major upgrade to the HTML and XHTML specifications both. The W3C working group working on the XHTML2 specification dropped the specification in July 2009, lending all future XHTML work to the HTML5 specification. So, in a nutshell, HTML5 is actually HTML with XHTML-like specifications (only better). Rather than being just a simple upgrade of HTML, the new version introduces a whole set of new elements/tags and declarations – about 25 new tags and support for a wide range of media formats out-of-the-box.

It doesn’t just build up on syntax, but lays greater emphasis on the semantics of web documents. Following is a broad classification of elements/tags that are new in the HTML5 specification:

How do I prepare an HTML5 document?

We have already touched lightly on the subject – valid HTML5 can be implemented in today’s browsers. And, you certainly do not have to wait until 2022 for the specification to be supported fully. Just one line enables your document to speak HTML5. To summon the magical powers of HTML5 into your boring old HTML document, you just need to include the following document type declaration at the top of the page.

<!DOCTYPE html>

It’s just that simple – no annoying web URIs to remember,  and no useless and often vague declarations for a document type; rather, a clean and simple declaration syntax that one can never forget. But remember, the specification is still not that widely supported today – Internet Explorer and Opera might just give you a bit of trouble – otherwise, the declaration syntax is enough to tell your browser to enable HTML5 mode. We need to make sure we equip our pages with a basic structure that works across all current browsers though, including the two mentioned above. Here’s the simple skeletal structure that enables HTML5 onto all current browsers.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
    <title>HTML5 example</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
      header, footer, nav, article, section, aside, hgroup, menu, figure {
        display: block; }
    </style>
  </head>
  <body>
    <!-- The rest of the content comes here -->
  </body>
</html>

Block Elements

Gone are the days where web designers and developers alike used the <table> element to produce layouts on pages. Nowadays, almost every other website that you would encounter uses some level of semantics. These websites would have <div> elements placed all over a web document with their class attribute identifying its purpose, e.g., <div class="header">. There are some sections within most web pages that consistent however, much like a page’s header, content area, or the footer. These are made available as block elements in HTML5.

• header defines the section that dominates the top-most portion, or any other section of your web page. You are not limited to placing only one header – instead you can use as many headers throughout the body of your web page.
• footer defines the footer of your web page or any other section within the page. Just like the header, a footer is not limited to being placed once and can be used for various other block elements.
• nav defines a block that wraps common navigational elements of your page or section within.
• article defines a block in your web page where the actual content resides.
• section defines a generic division of content within other block elements. For instance, n article can have multiple sections, each serving a purpose.
• aside defines a block that hosts information related to but not directly relevant to the article section. This can be used as side-navigation bars for an article content, presumably hosting relevant links and resources for the text.

Figure 1.1: Block elements in HTML5

If we had tried to create a layout as the one above, using semantic HTML4.1, we would accomplish it using the following markup. Note however, that after a while, information on your page just seems to clutter up and take more space. Far too many <div> elements make your page more confusing and illegible.

<body>
  <div class="header">
    <div class="nav">
      <ul>
        <li>Nav1</li>
        <li>Nav2</li>
        <li>Nav3</li>
      </ul>
    </div>
  </div>
  <div class="article">
    <div class="section"></div>
    <div class="section"></div>
    <div class="aside"></div>
  </div>
  <div class="footer"></div>
</body>

But, the same can easily be accomplished using the HTML5 block elements. With each element serving a particular purpose and lesser usage of class notations, one can easily produce a readable and clear markup syntax for the same.

<body>
  <header>
    <nav>
      <ul>
        <li>Nav1</li>
        <li>Nav2</li>
        <li>Nav3</li>
      </ul>
    </nav>
  </header>
  <article>
    <section></section>
    <section></section>
    <aside></aside>
  </article>
  <footer></footer>
</body>

Inline Semantics

The elements that are included in this category are usually ones that require a better semantic syntax to them. For instance, if you have a word or phrase put within a <span> element just to highlight it, like so: Highlighted Text; it would be better enough to actually tell the browser it’s been marked.

• details defines a region of text content that can be expanded or collapsed on user interaction.
• figure defines a region within the body of the actual content that hosts images, illustrations, layout and table figures related to the subject of the content.
• time wraps around a text that defines a certain time-stamp and the datetime attribute for the same holds the machine-readable time.
• mark defines a region of text that needs highlighting.
• del replaces the <strike> and <s> elements and presents a text or phrase to be stroked through (or deleted).
• ins can then be used to put in the new text alongside deleted text: <del>old</del><ins>new</ins>.
• dialog defines a region of text that is represented as a spoken dialogue between two or more people.
• menu defines an element region that hosts options about a certain topic that read like a menu at a restaurant, e.g., specifications for a gadget, etc.
• output defines a region of text/content that can be deemed as an output to a script-based output.

Interactive Elements

HTML5 is packed with some incredible support for media on web pages including video and audio. Instead of using the vague <object> and <embed> tags, one can use the exact semantic markup to define regions with interactive content. In doing so, video and audio content becomes “a first-class citizen of the web”, as Arun Ranganathan would like to call it. You can use Javascript functions to manipulate video and audio content.

• video defines a video element that can be played on the web page.
• audio defines an audio element playable on the web page.
• source element defines a source for both video and audio elements.
• canvas defines a region, much like a <div> tags where one can use the Javascript drawing API to draw shapes and drawings.
• svg element encapsulates SVG markup to draw an image output.

User Interface Components

The new HTML5 specification defines new tags to encapsulate user interface components, including ratings meter and progress bars.

• meter defines elements that employs a unit of measurement for its content, e.g., the 5-star rating format used with YouTube videos.
• progress defines a progress bar that can be used to display progress of a certain operation.
• command defines a command button.
• keygen defines a field that holds automatically generated key in a web form.

Elements and tags discontinued in HTML5

Elements and tags that would most probably be discontinued in the latest version of HTML5 are as follows:

• font – Use CSS instead
• basefont – Use CSS instead
• u – Use CSS instead
• center – Use CSS instead
• frame and frameset – Use iframe instead
• acronym – Use abbr instead
• strike and s – Use CSS instead

HTML5 Resources off the web

Here are some websites that are related to HTML5 and might interest you even further.

• Yes, You Can Use HTML5 Today! – sitepoint.com
• Video for Everybody! – camendesign.com
• Semantics in HTML5 – alistapart.com
• HTML5 Validator – html5.validator.nu
• When Can I Use… – a.deveria.com
• Supported Features in HTML5 – molly.com

Post-Its, as I found out in my early college days, were a good way of keeping on top of things – but that wouldn’t have had helped me at all. Still, I jotted down the tiniest details of the task at hand on some Post-Its. Here are some of the tidy-up tasks I came up with, grouped by the device:

Computer

1. Group files according to type in all folders you come across and put them in appropriate locations.
   - Word documents and PDFs go to Documents, MP3 files go to the Music folder, etc.
2. Desktop and Download folders should be kept absolutely clean.
3. If you are a web developer like me, you need to clean up all your projects.
   - At a later date I might emphasize on how you can go about doing just that.
4. Search your hard drive for executable and zipped-up setup files and place them all in one folder.

External Hard Drive

1. What’s not needed on the computer’s hard drive or is too out-dated, goes on the hard drive.
2. Backed up data goes here.

Media Player

1. Tag, rate and modify descriptions for all music and video files on the media player.
2. Use folders to arrange music and video content.
   - A media player would pick music from various folder depths and present them as if from a single folder.

It was only when I sat down to think over the strategy I had so meticulously drafted, that I realised that there are far too many tools on my computer that could be used to do such tasks. iTunes or the Windows Media Player to arrange music, backup software for my external drive backups.