Mozilla Demoparty

The demoscene spirit is alive and kicking, and has now arrived to the browser, thanks to this Demoparty by Mozilla.

It's the perfect opportunity to show the world what you can do in several categories, from graphics to CSS to audio. But as you can see by the examples in the category section - you'll really need to impress the judges!
(Personally, I can't stop visiting this flying through the clouds demo.)

CSS3 Generator

If you want to start using CSS3 but have no idea where to start, this CSS3 generator might be the ideal starting point.

You just need to select whatever you're interested in, from font selection to round corners, to transitions and gradients, or anything else - and immediately see the results, together with CSS code you can simply paste to your own web site. Mastering CSS3 has never been easier.

Zwibbler - Drawing on HTML5

Need a site where you can draw at will without any Flash plugin requirements? Check out this Zwibbler which uses nothing but HTML5 and Javascript.

Only the text rendering is done server side, but everything else is done in your browser using javascript. You can find more about it here, including how the mouse management was done using the concept of abstracted Mouse Behaviours.

Defintely worth a read and trying it out.

HTML5 e CSS3 Readiness

Curious about what browsers support what HTML5 and CSS3 features?

All you need to do is visit this useful html5readiness page.

In a single page, at a single glance, you can find which browsers support which features, allowing you to better plan for you site specifications and cross browser compatibility.

Google Chart Tools

It's not the first time I've talked about Google Chart Tools, but I think it's never too late to remind you of all the existing tools out there that can save you valuable time.

If you can't stand graphics... Google has the solution to ease your tasks with theis Graphic Tools and Visualization API.

Besides the regular static charts you can now even have animated and interactive charts (all done via javscript of course.)

Go check it out, there are lots and lots of chart styles: line, bars, pie, maps, and many other complex ones I hope I will never need!

Butns - Easy Multi-site Linking

Ever had the need to link to multiple sites from a single link?

Than, how about doing something like this: automobiles (hover the mouse pointer over the link.)

It might look complicated, but it's actually quite easy to achieve using Butns.
Just enter the text, select its styling, select which sites to include, and you get a snippit of HTML code you can insert into any webpage. It's just that easy.

HTML 5 - a Video Introduction

Still haven't had the time to get onboard the new HTML5 bandwagon? Worry not; here's a nice intro video that will show you some of its new (and amazing) features, with nice examples to get you started:

• Web vector graphics with the Canvas tag and Scalable Vector Graphics (SVG)
• The Geolocation API
• HTML 5 Video
• The HTML 5 Database and Application Cache
• Web workers

Introduction to HTML 5 from Brad Neuberg on Vimeo.

Google Browser Size

Here's one more tool every web designer will want to keep in his bookmark collection: Google's Browser Size.

This web tools allows you to quickly figure out which parts of your site are immediately visible to your visitors, and which parts require scrolliing. Best of all, there's no download involved: it's all web based. :)

Google Web Elements

Sometimes, you don't even realize how easy it is to integrate data into our own websites.

Google Web Elements is a set of easy to use modules you can add to your site for extra usefulness.

Upcoming calendar events, conversation, custom searches, maps, news, presentations, spreadsheets, YouTube News... all just a few clicks away.

Debugging Javascript with Firebug in Firefox

Sometimes I can't believe how much time people waste just because they don't use the right tools - often because they've never heard about it, or because they don't know how to use it properly.

Just a few days ago, for the millionth time, a friend of mine was bugging me regarding a javascript bug. Instead of fixing the problem for him, I decided to teach him how to fish*.

As any web developer probably knows, there are a couple of indispensable tools for Firefox: Firebug and Web Developer.

With these tools, debugging javascript or any other "Web" stuff becomes a lot simpler.
Just see for yourself how debugging javascript is using Firebug:

[A Guide to Javascript Debugging using Firebug for Firefox]

These 10 or 15 minute tutorial may very well end up saving you countless hours/days of debugging. Learn to use the tools you have at your disposal.

*Reference to a popular chinese saying: give a starving man a fish, and you'll feed him for one day; teach him to fish and he'll never starve again.
(or something like that)