8. Google gBall™

An Australian specific Google April Fool’s joke this explores their new fantasy product for Aussie Rules Football. Lets users track their stats by using the gBall™ with inbuilt GPS & Accelerometer.

7. Reddit’s new layout

A classic little “digg” at a competing site, reddit rebranded their website to a hilarious reddigg to match that of digg.com layout.

6. Internet reboot

The popular sitepoint website announced that due to several reason’s the internet will need to be rebooted to help increase stability and hopefully decrease spam.

5. IE 8.1

Smashing Magazine got breaking news of the soon to be released Internet Explorer 8.1 with fast improvements including support for Firefox extensions!

4. Microsoft requests a bailout package.

Troubling times ahead, Microsoft is requesting a rescue package of a cool $20 billion claiming they are too big to fail.

3. The Guardian switches from print to Twitter

UK’s The Guardian has decided to switch all its articles to appear exclusively on Twitter.

Consolidating its position at the cutting edge of new media technology, the Guardian today announces that it will become the first newspaper in the world to be published exclusively via Twitter, the sensationally popular social networking service that has transformed online communication.

2. Save IE6

A new campaign to save IE6 was launched arguing that IE6′s longevity is a clear sign everyone should still be using it.

1. Facial gestures

Opera announced a new feature for their browser that would enable people to navigate through websites via facial gestures.

But the real war this time is in the JavaScript engine which was ignited when Google came into the browsers wars with their Chrome release sporting the ridiculously fast V8 JavaScript engine, which blew any of the previous engines out of the water with its shear speed. Mozilla, Webkit and Opera are all playing catch up by releasing their own super fast JavaScript engines. This can only mean great things for the users, not only will the browser rival performance of a desktop app, in some cases will outperform it.

Chrome has just released a new beta of their browser sporting an even faster update to their javascript engine boasting a 25% increase in speed of JavaScript execution.
Enough with all the geeky crap what does this mean to your average user? Awesome tools that can be used natively in the browser with no extensions or plugins needed. Google has launched a new site showing the power of the JavaScript engine called Chrome Experiments. These showcases aren’t limited to the Chrome browser they do work in the latest stable releases of Safari, Opera & Firefox but their performance on some of the more intensive examples doesn’t match that of Chrome.

With new releases of browsers due to drop soon such as Safari 4, Opera 10 & Firefox 3.5 (all boasting extremely fast JavaScript engines and support for the latest and greatest in html 5 & CSS3) these sort of experiments can only become more viable in real world situations creating rich interactive websites using nothing more than html & JavaScript.

Google engineers are hard at work to constantly improve on their already fantastic work, with impending releases of Chrome for Mac OS X & Linux; its user base will only begin to rise creating a healthy competition between vendors which can only mean great things for consumers.

As a front-end developer there is considerable time involved in making some of IE6′s short comings work the way they do in more standard compliant browsers. But with a large user base still using IE6, and this is usually not their choice but is part of their internal legacy infrastructure. We don’t have solid ground to stop supporting IE6 all together. A client paying a large amount of money would expect their product to work regardless of what browser they use and usually they aren’t even aware what browser they are using. It would only fuel frustration to a user to have a big message appear stating they are using obsolete software.

Don’t kill it, degrade it

What is really needed is for front-end developers to gracefully degrade a website in IE6. A website is still very much functional but doesn’t have all the bells and whistles of a more modern browser. Let’s take a look at 5 things we can do that won’t ruin the experience for a user in IE6. For users of good browsers their experience will only be made more appealing through the techniques we are about to go through.

Rounded corners

This website utilises rounded corners on the link whoring box at the top of each post. It uses a mixture of CSS 3′s border-radius property, along with the propriety implementations of this property by mozilla & webkit.

.resources01
{
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}

Border radius is set to 6px for all corners, you can of course set all 4 corners to be different using the clockwise motion top, right, bottom and left. The -webkit & -moz is set so it will work in firefox and webkit based browsers such as safari.

Transparency using RGBA

Another example would be utilising the rgba property to accomplish transparency of an element, and as a fallback for non supporting browsers would be to use a solid colour. Why not use opacity you ask? The difference is that rgba will not cascade the opacity level set to the parent to its child elements as opacity currently does.

div {
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}

The example above would make all div elements black and if it supports rgba the black would become 70% transparent. Some of the earlier Firefox releases would read from the rgba property but not apply the transparency, the reason it is there twice is because browsers like IE will skip the rgba element as it doesn’t know what it is.

Custom fonts

Custom fonts without flash or javascript using @font-face. If the browser doesn’t support it it will utilise the base set browser font. This upcoming feature which is currently only supported in safari 3.1 & 4, Opera 10 alpha and the upcoming Firefox 3.5 is bound to get some solid use as there is no consequence with using it if the browser doesn’t support it.

If you’re looking at this sentence in a supporting browser it should be rendered out using a custom font.

@font-face
{
	font-family: Gesture; /* name the custom font for use on elements */
	src: url('Gesture.ttf');
}
 
h1
{
	font-family: Gesture; /* Applies custom font all h1's */
}

Multiple columns

If you have ever wanted to split paragraphs into multiple columns you can use the multi-column properties so a paragraph could mimic that of a newspaper layout with thin columns of text. This feature has been around for quite a while, it’s been in Firefox since version 1.5. Viewing this in a supporting browser will be split the text into 2 columns. Depending on the column-width and the room the paragraph has got to work with it will span more columns than 2, unless column-count is specified.

p
{
	column-width: 200px;
	column-gap: 16px;
	-moz-column-width: 200px;
	-moz-column-gap: 16px;
	-webkit-column-width: 200px;
	-webkit-column-gap: 16px;
}

Drop shadows

Setting up drop shadows to work fluidly has been a headache in any browser, IE6 makes it worse by not supporting 24bit transparency in png images. CSS 3 is to the rescue again with 2 great properties text-shadow & box-shadow. Text shadow was proposed in CSS 2 but the only browser to implement it was safari.

The following text will have a white shadow around it in supporting browsers.

p
{
	text-shadow: 3px 3px 3px #fff;
}

We can also set shadows to block elements with box-shadow, such as a div. This is much more useful than text-shadow property.

div
{
	box-shadow: 10px 10px 10px #fff;
	-webkit-box-shadow: 10px 10px 10px #fff;
}

And now to put it all together

It should be noted that these techniques, support may be sporadic between different browsers and if it’s a must for all browsers it may not be a viable option. But these are all safe to use as they are non destructive if the browser doesn’t support it.