How IE6 caused the Dark Decade of the Web

If each developer in the world gave me a penny for every time they were swearing at IE6 then I could possibly be the richest man on the planet. The money spent in web development worldwide just for fighting IE6 bugs could probably buy the Cure For Cancer. Dealing with IE6 was not fun by the slightest. And now, finally, this global generator of frustration is dying a death celebrated by the whole Web Community as well as its own creators. It is really the time to crack a bottle of champagne.

No doubt, we could have been saved from the Dark Decade of the Web. Netscape Navigator was once the best browser on the Web, holding nearly 80% of the market in 1996. It was a strong competitor for IE and competition drives innovation. Unfortunately Netscape couldn't keep up the pace and finally lost the Browser Wars. When the dust settled eventually, we found ourselves left with far from perfection IE6 and on the brink of the decade of frustration.

For nearly 10 years we couldn't do much other then learn how to compensate for IE6 bugs and its devilish quirks. We did care about IE6 not because we liked it. I don't know about you but I still hate it with passion. It gives me nightmares. We cared about IE6 because we cared about our users. What choice did they have after all? With no sensible alternatives at the time it became the most popular browser. The reference experience. The blocker of the Web innovation.

How many times, with pondering heart, were you launching IE6 to view your newest, inventive piece of work and asking yourself: "Will it work in IE?" How many times were you dreading this question so often thrown casually into a conversation by your customer: "That looks cool. Can we have a quick look at it in IE?"And it had to look good in IE. It had to look the same in every browser.

It was going on for so long as to became our second nature. Even after Firefox and then Chrome started gaining popularity and could deliver better experience at a lower price it had always to be the same. We were consciously downgrading the experience in more capable browsers in order to keep it "consistent". Now IE6 is good as dead but will we still carry on? Will we pick another "reference browser", the worst on the market (let me guess... IE7?) to bring our work down to its level?

I sincerely hope we know better than that now. If you had a CRT TV you probably wouldn't expect to watch HD programs on it. With browsers it is not that much different. IE7 is nothing like new Chrome. There is no reason to try and make our websites look and behave identical in both. The experience can downgrade and that is OK. As long as we define and deliver acceptable minimum the rest becomes pure fun. We don't have to worry about how it would look in IE7. We know it will be different. And that is OK.

Even though I am concerned I believe the black scenario is not very likely to happen. The Web becomes less and less desktop-centric. Many more other devices are being used for browsing the Web today and the numbers are growing. Mobile phones, tables, game consoles - they all have different resolutions and provide different experience. The game is no longer about minimum screen resolution. Responsive design becomes a necessity. We are slowly growing used to the fact that the same website can look differently when we switch to another device. From here it takes just a small step to accept that it can also differ depending on the browser we use.

I am sure that the challenges that are yet to be taken are going to be interesting. I imagine designers would be required to provide scalable designs, probably in several variations mitigating scaling stress points. Implementation of those designs would be relying more on scalable CSS3 effects rather than their graphics heavy counterparts. The focus of testing would shift to different resolutions and graceful downgrade of experience in less capable browsers. It's the whole new world.

Seems that the Web has just evolved, we have a lot to learn and even more fun ahead and IE6 is nearly dead. Isn't that exciting?

Jacek


PS.
I would like to thank two remarkable people who inspired me and opened my eyes. Paul Irish, the Lead Developer of Modernizr who gave a presentation on Developing HTML5 in cross-browser world and Ethan Marcotte who contributed to "An Event Apart" (Jan 2012) giving great presentation entitled "A Dao of flexibility".

Google Analytics code in external .js file

Google Analytics JavaScript code does not have to be inline. New, asynchronous GA tracker can be as well invoked from external JavaScript file with no - at least noticeable - impact on performance.

I have read on one of the forums that with putting GA code in an external file you lose the benefit of asynchronous architecture which is quite obviously bollocks. One of the main benefits mentioned on Google Analytics help page is that you can start tracking user events even before the tracking code loads and you still have that! The GA JavaScript still loads in the background and the page load time is as with inline Google Analytics code.
The best thing is that there is nothing special you have to do. Just get the JavaScript code generated in your Google Analytics account and instead of pasting it directly onto the page paste it into .js file and refer to that file from your page. More or less as follows.
On your page

<script src="file_containing_google_analytics.js" type="text/javascript"></script>

Inside the file_containig_google_analytics.js:

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Have fun!

iPhone 4.2 and Ubuntu 10.10 - mount problem with dbus

I can't believe it's been nearly half a year since my last post. Anyways. It so happened that I was stuck with a large video on my iPhone. I wanted to download it however my iTunes had different opinion and refused to deal with it. As I'm running Ubuntu 10.10 on my laptop I have decided to try my luck in there.

I have plugged my iPhone in and to my dismay my beloved Ubuntu threw ugly DBus error in my face saying iPhone could not be mounted. I should've taken a screenshot but hey, who wants to remember error messages? Nevertheless after some googling I have discovered that iOS 4.2 requires libimobiledevice1 package upgrade to version 1.0.4. Unfortunately official stable repos offer version 1.0.1 at the moment but it's nothing to worry about, though. Thanks to Paul McEnery you can benefit from your iPhone 4.2 connected successfully to your Ubuntu machine. Just add the PPA in command line:

sudo apt-add-repository ppa:pmcenery/ppa

next do the update:

sudo apt-get update

and then install/upgrade the library and other tools if necessary. Thanks for reading. I hope you found it helpful. Jacek

jQuery Event Showcase

Have you ever wondered in what order JavaScript events are fired? What are the event object properties? How events differ in different browsers? Good news - wonder no more, check it out yourself.

The jQuery Event Showcase records the events you cause with your actions and allows you to browse through them. Clear visual indication shows you which element fired each event. You can also see all the event object properties, and if a property is an object or a function - you can also see all the details of it and so on. Better still, at your command remains events filter which helps you focus on the event types you want to investigate.

A few screenshots:

List of events in the Events Log

Event details in the Events Log

Events Filter

Any feedback welcome.

Jacek

JavaScript: best code highlighter I have seen

I needed JavaScript code highlighter for my recent project and having a gut feeling that someone has done it already, I decided to do a search rather than develop it myself. Not so much as a surprise it turned out to be good feeling and soon enough I ended up testing a dozen of different highlighters. I had spent good couple of hours before I found the one. Sharing is caring so here we go.

That beauty is called hightlight.js. You won't be disappointed especially if you are using jQuery, although it's a standalone library. It was created by talented Russian programmer Ivan Sagalaev who claims to be Software Maniac. He put together very simple documentation page which contains everything you need to know. It took me literally 5 minutes to download it, unpack it and get it working. Why do I think highlight.js is the best JavaScript highlighter?

• supports 32 different types of syntax, including exotic ones like Lua, Lisp or Nginx
• is a standalone library but is very easy to use with mootools, jQuery, prototype or any other JS library
• can be used to highlight code injected to the DOM with JS (for some reason that didn't work for me with quite a few other libraries)
• allows user to choose which nodes should be processed and does not force parsing the whole document
• does not require being called upon document load event
• is quite simplistic and is not trying to do 1000 things except from the one that you need; instead it does one thing and does it well: highlights code

Damn it, now I'm tempted to use it on my own old blog pages with code examples. Respect, Ivan!

How to get SubVersioN on Mac OS X 10.6?

Even if you work on a project on your own it's worth having version control system in place. It helps to keep things tidy and gives you time machine possibilities for working with your code (I am not talking about the trademarked machine). I like SVN which is mature and seems to have it all. Let's have a look how to install that beast on our lovely Macs.

Download SVN for free

First good news - SVN comes with a nice Mac-like installer and is completely free and published under Apache Licence. You can download it from CollabNet website. It requires free registration which at first seems a bit dodgy but CollabNet is the company responsible for creating SVN and it's a good source.

Install SVN on Mac OS X 10.6

Once you have downloaded the package it's time to install it. The installer looks all pretty and takes no longer than just a few moments. It installs the whole svn bunch (server and client) in /opt/subversion directory. The only downside is that you don't get any fancy application like you do for MAMP to control it. After you've finished the installation it all happens in the command line... but cheer up, it's not that scary. You will get it up and running in no time.

Set up evironment

SVN gives you complete freedom of the location of your repositories. It goes like this. You create a directory wherever you wish and tell your svn server to feel at home in there. That directory is then your svn server root directory. Your SVN server will create your repositories in there.

Let's get started then. Since all the svn related programs are located in /opt/subversion/bin you have to specify the path every time you need to run them. It's not handy at all, we would prefer not to worry about where they are. That's not a biggy. Fire up your Terminal (it's that monitor icon in /Applications/Utilities) and edit the file .profile in your home directory. I, for one, like vim but it might be slightly depressing experience at first if you are not familiar with it. In that case use pico, it's really straighforward

$ pico .profile

and add the following line at the end of the file:

export PATH=/opt/subversion/bin:$PATH

The .profile file is read every time you create new shell, so next time you open your Terminal the change will be applied. Because we don't want to close the Terminal just yet only to reopen it let's cheat a tiny bit:

$ . .profile

Well done! Let's check if it works

$ svn
Type 'svn help' for usage.

If you got similar output you are ready to proceed.

Set up SVN repository

Now it's time to create root directory for the SVN server. You can name it whatever you like and create it even in your home directory if you wish. SVN is not fussy at all. Let's do that then and let's give it meaningful name "svnrepos".

$ mkdir svnrepos

And finally it's time to launch your SVN server. By the way it's not a typo, there is no 'r' at the end:

$ svnserve -d -r svnrepos

There are no repositories. All we have is just SVN server ready for action. Let's give him something to look after. If you want to create a test repository to play with it for a while, just do this:

$ svnadmin create svnrepos/test

Set up privileges

Congratulations! You have just created your repository. Good thing is you don't need to worry about having to do some magic tricks later on to get rid of the test repository whenever you feel like it. Simply delete the directory svnrepost/test and it's gone forever. For now though, it's accesible through the URL svn://localhost/test but you cannot do much with it unless you grant yourself the privileges.

SVN server keeps access control lists per repository, so you need to dive into config directory of your newly created repository and conquer! Sounds like a big job but it isn't. All it takes is adding one line in one file and removing one comment in another one. Go to svnserve/test/conf and edit the file passwd first. Here you will add your preferred username and password. It's easier when you choose your Mac username. For example, my Mac username is "jacek" and my password for the test repository is "test", so I added a line jacek = test.

Next edit the file svnserve.conf and remove comment from the line saying password-db = passwd.

Believe it or not, that's it! Now you can access your repository through your favourite SVN client and do whater SVN clients do. One thing you need to remember is to run

svnserve -d -r svnrepos

every time you start your Mac. Of course it's quite easy to make it happen automagically but that's for another story.

Thanks for reading. I hope you found this guide useful, it worked for you and made you a bit happier. Please don't think twice before you leave your comment.

Jacek

How to put CDATA into script tag in XSLT

You have an XSL template for the website you are working on and you would like to embed some JavaScript in the markup. You care so you would like to keep the XHTML output valid. Easy enough - all it takes is wrapping the actual JavaScript code with CDATA. To make it safe you would also add JS comments around CDATA and move on. But is it really that easy with XSL? Let's have a look.

XSL template for JavaScript

Here is the working solution which allows for safe embedding JavaScript on XHTML pages created with XSL templates.

Example 0

<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output
        method="xml"
        encoding="utf-8"
        doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
        indent="yes"
        cdata-section-elements=""
        omit-xml-declaration="yes" />
 
    <xsl:template name="javascript">
        <xsl:param name="code"/>
            <xsl:text disable-output-escaping="yes">
            &lt;script type="text/javascript"&gt;
            /* &lt;![CDATA[ */ </xsl:text>
            <xsl:value-of select="$code" disable-output-escaping="yes"/>
            <xsl:text disable-output-escaping="yes">
            /* ]]&gt; */
            &lt;/script&gt;
            </xsl:text>
    </xsl:template>
        
    <xsl:template match="/">
        <html>
            <body>
                <xsl:call-template name="javascript">
                    <xsl:with-param name="code">
                        <![CDATA[
                        if (1 > 2) {}
                        ]]>
                    </xsl:with-param>
                </xsl:call-template>
            </body>
        </html>
    </xsl:template>
</xsl:transform>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
            <script type="text/javascript">
            /* <![CDATA[ */ 
                        if (1 > 2) {}
 
            /* ]]> */
            </script>
            </body>
</html>
 

Can it be simpler?

Let's start off with the most intuitive approach - add CDATA inside script tag as you would in XHTML.

Example 1

<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output
  method="xml"
  encoding="utf-8"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  indent="yes"
  cdata-section-elements=""
  omit-xml-declaration="yes" />
 
 <xsl:template match="/">
  <html>
   <body>
    <script type="text/javascript">
    /* <![CDATA[ */
    if (1 < 2) {}
    /* ]]> */
    </script>
   </body>
  </html>
 </xsl:template>
</xsl:transform>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
    /*  */
    if (1 &lt; 2) {}
    /*  */
    </script>
  </body>
</html>
 

CDATA got stripped off and the < sign got replaced with &lt;. Of course! CDATA as an XML specific construct is interpreted in XSL as well. And that helps - try to remove CDATA from the following example and you will see an error. Good old < is the source of trouble here - without CDATA around, it makes XML invalid.

The interpreted CDATA should stay then but another CDATA is required in the output. xls:output has an option which allows to wrap content of certain tags with CDATA. However if you set it up to wrap up content of script tags with CDATA (the rest of the code like in example 1) you will not get what you need. Let's have a look.

Example 2

  cdata-section-elements="script"

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
<![CDATA[
    /*  */
    if (1 < 2) {}
    /*  */
    ]]>
    </script>
  </body>
</html>
 

Ok, now there is CDATA in the output but it is not safely commented out. And it does not seem possible to get it that way. And how about creating CDATA explicitly as a text? Maybe with disabled output escaping that would work? Let's see.

Example 3

<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output
  method="xml"
  encoding="utf-8"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  indent="yes"
  cdata-section-elements=""
  omit-xml-declaration="yes" />
 
 <xsl:template match="/">
  <html>
   <body>
    <script type="text/javascript">
     <xsl:text disable-output-escaping="yes">
      /* &lt;![CDATA[ */
     </xsl:text>
     <![CDATA[
      if (1 < 2) {}
     ]]>
     <xsl:text disable-output-escaping="yes">
      /* ]]&gt; */
     </xsl:text>
    </script>
   </body>
  </html>
 </xsl:template>
</xsl:transform>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
      /* <![CDATA[ */
 
      if (1 &lt; 2) {}
 
      /* ]]> */
     </script>
  </body>
</html>
 

That's definitely some progress, CDATA is in place. Now the &lt; in the JavaScript code should become < again. Why not to put the whole JavaScript code into another xsl:text tag with disable escaping? Well, that's why:

Example 4

    <script type="text/javascript">
     <xsl:text disable-output-escaping="yes">
      /* &lt;![CDATA[ */
     </xsl:text>
     <xsl:text disable-output-escaping="yes">
     <![CDATA[
      if (1 < 2) {}
     ]]>
     </xsl:text>
     <xsl:text disable-output-escaping="yes">
      /* ]]&gt; */
     </xsl:text>
    </script>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
      /* <![CDATA[ */
 
 
      if (1 &lt; 2) {}
 
 
      /* ]]> */
     </script>
  </body>
</html>
 

Is it a dead end or maybe xsl:text element is not the best choice after all? It has to be something with disable-output-escaping attribute. Another such an element is xsl:value-of. Assuming that the JavaScript code exists only in the template and not in the processed XML structure, value-of needs an xsl:variable to read value from.

Example 5

   <xsl:variable name="s1">
    <![CDATA[
     if (1 < 2) {}
    ]]>
    </xsl:variable>
   <script type="text/javascript">
     <xsl:text disable-output-escaping="yes">
      /* &lt;![CDATA[ */
     </xsl:text>
     <xsl:value-of select="$s1" disable-output-escaping="yes"/>
     <xsl:text disable-output-escaping="yes">
      /* ]]&gt; */
     </xsl:text>
    </script>

The above example will output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <script type="text/javascript">
      /* <![CDATA[ */
 
     if (1 < 2) {}
 
      /* ]]> */
     </script>
  </body>
</html>
 

And that worked! It is not very flexible solution, though. Defining variable for every JavaScript in the template seems to be acceptable only if necessary. Luckily xsl:value-of can also read value of a parameter passed to an xsl:template. That's how I got to the template you can find at the top of the page.

Thank you for reading. I hope you found it useful.

Update - 21.05.2010

At the beginning the template looked like this:

 <xsl:template name="javascript">
  <xsl:param name="code"/>
  <script type="text/javascript">
   <xsl:text disable-output-escaping="yes">
   /* &lt;![CDATA[ */ </xsl:text>
   <xsl:value-of select="$code" disable-output-escaping="yes"/>
   <xsl:text disable-output-escaping="yes">
   /* ]]&gt; */
   </xsl:text>
  </script>
 </xsl:template>

However it turned out that on some PHP installations XSLT adds CDATA inside <script> tag even if it's not specified in the <xsl:output>. Therefore <script> tag has to be generated as a text rather than being part of interpreted XML.

Jacek