Browser Wars – the next generation

On Monday Steve and I attended an Opera Software University Seminar hosted here at the University of St Andrews, one of many stops on their world tour of educational institutions.

I found it an interesting and encouraging hour long presentation which looked at the Opera range of browsers (did you know that there are four main products: Desktop, Embedded, Mini and Mobile, which all use the same rendering engine?), Web Standards and a brief dive into HTML 5 and CSS 3.  I’ve blogged about it elsewhere if you want to read more.

On our way out of the PC classroom (it was hosted in the School of Computer Science) in exchange for a completed feedback slip we were given a FREE umbrella. I know! FREE!  We didn’t even have to download it from one of over 80 download locations.

Comparisons

However, the question I know you’re all asking: how does it compare with the St Andrews Web Team’s Mozilla Firefox umbrella, which was purchased from the Mozilla store a few months ago?

Mozilla Firefox umbrella next to the Opera umbrella

Mozilla Firefox umbrella next to the Opera umbrella

Size

As you can see from the image above the Opera brolly is considerably smaller than the more cumbersome Mozilla brolly.

That observation correlates with my experience of the two browsers, currently Firefox is hogging 236 MB of RAM, while Opera is displaying the same three pages using only 34 MB. This is clearly the Opera Mini of umbrellas.

Opened each fares as you would expect: the Mozilla browser is considerably larger offering protection for more than one user.  The Opera Mini umbrella is clearly designed for single tab user use.

Mozilla Firefox umbrella open

Mozilla Firefox umbrella open

Opera Mini umbrella open

Opera Mini umbrella open

Rendering

Opera has clearly taken HTML 5 and CSS 3 to heart with this umbrella as in particularly windy situations the brolly dynamically re-renders itself … mostly inside out.  Ironically, for such a stable browser their umbrella does have a tendency to ‘crash’ alot in bad weather.  I suspect, however, that the weather we threw at it just had the wrong !DOCTYPE.

The Firefox umbrella on the other hand does appear to bend and sway a little but resolutely and reliably continues to do its job.

User interface

Both umbrellas feel robust enough, although I have to say that I would feel more confident taking the Firefox brolly out in the winds whistle down the streets of St Andrews.

In fact, in tests the Firefox umbrella proved to be easier and quicker to use simply due to the sturdiness of the fastenings and other hardware.

It is said that the first umbrella was likely to be nothing more than some largely-waterproof fabric stretched over a wooden or wire frame, and both models follow this tradition in terms of construction.  However, again, the Firefox brolly feels more robust with the stretched fabric stitches into the end of the spokes; the Opera brolly relies on small metal ‘cups’ slotting over the end of the spokes, which are too easy to knock off.

Security

Clasps on Firefox and Opera umbrellas

Clasps on Firefox and Opera umbrellas

Security is no less important on an umbrella as it is on a browser, and both models’ security features are built to impress.

The Mozilla model uses the traditional ring on a piece of elastic which wraps snuggly around the shaft of the umbrella and afixes on a button, while the Opera model relies on a vecro fastening.

One particularly impressive security feature though was the clear plastic sheath that the Opera umbrella came in.  It keeps your umbrella safe and secure when not being used.

Open Source

As an open-source product you are welcome to take the code of Mozilla Firefox and redevelop it.  While the brolly is available to anyone within the Web Team we discourage any modifications to the overall structure, and as far as I’m aware there are currently no official add-ons for the brolly.

Opera is not an open-source product, which is reflected in our need to go directly to Opera to obtain it on request.  Although, as I understand it, 3rd parties such as Oxfam may be able to sign up to distribute copies.

Conclusion

Other than the fact that I clearly have too much time on my hands during the lunch hour, I’d say that the Firefox umbrella is probably the one you want if you need to stay dry (in all sorts of weather), although it is more cumbersome. Perhaps, a bit like Firefox Portable.

The Opera umbrella on the other hand is wonderfully compact, so you can take it anywhere you want … a bit like their Opera Mini and Mobile browsers.

Learning jQuery

Learning jQuery book cover

Did you get anything exciting and geeky for Christmas? I got a copy of Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques by Jonathan Chaffer and Karl Swedberg (Packt Publishing, 2007).

jQuery is an open-source JavaScript library that makes adding cross-browser compatible effects to your website really simple.

It’s written in such a way that it makes it really easy for web designers (rather than being aimed simply at experienced JavaScript code monkeys) to understand and write as most of its concepts are borrowed from the structure of HTML and CSS.

Example

Here’s a quick example: say you have a table of data to which you wish to apply a striping-effect to alternate rows. All odd rows you wish to display with a pale yellow background, all even rows with a pale blue background.

The traditional, coding-by-hand HTML method you’d manually have to add a class to each table row. If you were then to add a new row in the middle of the table you’d then have to again manually re-edit the code in each and every row.

You could, of course, write a PHP or JavaScript solution, but that would take quite a while, particularly if your 1337 g33k 5killz aren’t up-to-scratch or are in a hurry to get the job done.

jQuery offers the following solution:

  1. Download the jQuery library (about 14 KB compressed) and link it to your HTML document
  2. Write a new JavaScript file containing your striping code and link it to your HTML document
  3. Create new classes in your CSS file for styling the .odd and .even rows.

Here’s the jQuery code you’d need:

$(document).ready(function() {
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
});

Four lines of code is all it takes, and it’s almost self-explanatory too.

The code says:

  1. Wait until the DOM is ready then execute the code
  2. Then add class=”odd” to all odd table rows
  3. Add class=”even” to all even table rows

The book

The book is very easy to read, taking everything step-by-step and arranged in a very logical and easy to follow way.

Chapter 1 introduces the reader to jQuery

Chapter 2 covers selectors, the building-blocks of a jQuery function

Chapter 3 looks at events: when to start your jQuery code (e.g. on page load, when you click a link, etc.)

Chapter 4 examines Effects, e.g. fading in and out

Chapter 5 covers DOM manipulation: how to change your page on command

Chapter 6 promises to make your website buzzword-compliant with AJAX

The following chapters cover table manipulation, enhancing forms, shufflers and rotators, and extending the built-in functionality of jQuery with plug-ins.

You can see the book examples in action at http://book.learningjquery.com.

I can’t wait to get started and incorporate some of these techniques into my websites.

(Gareth J M Saunders)