The Mozilla Evangelism team is looking for the best Web demos we can find. We’re putting together a collection of these to show what today’s Web is truly capable of — from offline Web application support through text animation using canvas and more. If you have or know of a demo that really shines as an example of modern Web capabilities, please leave a comment and a link. Thanks!

Update: Bonus points for demos that show off the new content-related features of Firefox 3.

Interesting article from BusinessWeek about the “return” (not sure where it went) of Flash and the growing popularity of Web games: Flash is Back.

Who is Mozilla? You are Mozilla.

Every once in a while I stumble across some random bit of a web application that honestly causes me “surprise and delight”. Today was one of those days, and the thing in question is the shopping cart at the Panic.com Apparel store.

The concept is basic, simple, and brilliant — create a shelf at the bottom of the page to which the user can simply drag the items she wants. If she makes a mistake, simply drag the items off. When finished, there’s a nice obvious “Check out” button. It works extremely well, and they’ve gone so far as to add size bubbles to the items in your cart so it’s easy to check that you’ve selected the correct sizes. Very nicely done.

Here are some screenshots. First is the clear shelf:

This is dragging an item on to the shelf (you can’t see it, but my mouse pointer was over the little transparent t-shirt):

The last is dragging an item off the shelf — instead of just disappearing, it actually vanishes in a poof of smoke (exactly like the OSX dock, if you were wondering). Again, my mouse pointer was in the middle of the little poof of smoke there but my screencap cleared it:

Anyhow, kudos to the panic.com designers. I really like your shopping cart.

Lookin’ for a snazzy new icon for linking your web feeds? Look no further than FeedIcons.com. This industrious soul has taken the time to generate a whole raft of variants on the ubiquitous orange feed icon (size and background colour changes, primarily). Nice stuff.

Update: Note! I believe this icon was originally done by Stephen Horlander (according to the one person I asked who seemed to know). Can anyone verify this? Whoever designed it should get some public props for being awesome.

Update2: Steven Garrity has helpfully pointed to a weblog post by Kevin Gerich that discusses the origins of this icon.

Check out Rafael Robayna’s Canvas Painter page. Requires Firefox 1.5, of course. For more information about Canvas and how to use it, hit the Canvas category over at the Mozilla Developer Center.

Building on yesterday’s list, I’ve found (through reader recommendations) six more web developer extensions that have been updated for Firefox 1.5. The caveat, however, is that I’ve only personally tested one of them (ColorZilla). Descriptions below are taken more-or-less directly from the extensions’ pages.

ColorZilla
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

Console²
Console² lets you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars) and some accessibility improvements.

IETab
This extension embeds Internet Explorer in tabs of Mozilla/Firefox, letting you see how a page is displayed in IE with a single click.

LiveHTTPHeaders
This extension makes information about HTTP headers available in three ways: by adding a “Headers” tab in the “View Page Info” dialog; by adding an item to the “Tools > Web Development” menu that displays HTTP headers in real time; and by allowing you to request headers and “replay” a URL (beta functionality).

User Agent Switcher
Adds a menu and a toolbar button to switch the user agent of the browser.

Quick Locale Switcher
Quickly change and apply a different general.useragent.locale preference from the tools menu.

Someone asked about this in the comments on my previous post, so I thought I’d drop the link here. There is a version of Venkman that (apparently) works with Firefox 1.5. You can find it here. Caveat: I haven’t tested this myself, but other folks have said it works.

Update: mispaste on that URL. Should work now.

I recently tested all of the following extensions on Firefox 1.5rc3 and OS X. Your mileage may vary.

Web Developer extension
This extension has long been a mainstay for web developers, and I’m extremely happy that it’s being actively updated to work with the latest Firefox releases. When installed, the Web Developer extension adds a toolbar that gives you quick and easy access to a huge number of useful utilities, ranging from viewing and editing CSS through one-click CSS, HTML, and Section 508 validation. It is absolutely indespensible for serious web development work.

View Source With
The ViewSourceWith extension allows you to specify any external application with which to view the source of a web page. If you’re not a fan of the standard View Source system in Firefox, this extension gives you the freedom to use the application of your choice.

Measure It
If you’ve ever needed to know exactly how many pixels it is from point A to point B on a web page, Measure It is here to save the day. This little extension allows you to “pull” a ruler from any point to any other point within the browser window to get precise pixel measurements for height and width. It’s turned on and off with a simple click in the bottom left-hand corner of the browser. Very handy for those pixel-perfect layouts.

View Rendered Source Chart
This is easily one of my favourite new-to-me extension discoveries. View Rendered Source Chart creates a beautifully formatted and shaded rendering of your page source (including dynamically-generated source, static source, and JavaScript output) that clearly and cleanly displays the nested elements. I’d say this is a must-have extension for developing today’s complex page structures.

Link Checker
Fast, simple, visual link checker. This is an absolute godsend of an extension for maintaining web pages and fending off the nefarious demons of link-rot.

UrlParams
Essential for testing and debugging form submissions or other URLs that contain a number of name-value pairs, this extension stays continually updated while you surf. In a nicely designed and compact sidebar, the extension displays the bare URL (without parameters), the referring URL, GET and POST values, the ability to add more name/value pairs to a set, and the option to submit or resubmit (in current window or new tab) the URL values.

Screen Grab
Requiring Java (JVM), you can take full “screen shots” of entire web pages with this extension. Unlike normal screen shots that only capture what’s displayed within the confines of the browser window, Screen Grab will capture an image of the whole page from top to bottom.

EditCSS
While still imperfect, EditCSS is a quick and easy way to view and play with the CSS files for many pages. The CSS file is loaded into an editable area in the sidebar, and the main window is dynamically updated to instantly show the results of your changes and additions. This is a handy extension for CSS debugging and experimentation.

View Cookies
Adding a new tab in the “Page Info” dialog (accessible on any page via the right-click context menu), View Cookies displays all of the cookies and cookie values associated with a page. This is an obvious boon for tracking and debugging cookies during development.

There are many other incredibly useful web developer extensions out there, but not all are updated to work with the latest releases of Firefox at this point. I’ll update my list and do another post like this after Firefox 1.5 is released. If you know of other web developer extensions that are updated for Firefox 1.5, leave a comment here.

I’ve stumbled across the site a few times in the past, but I just checked it again and was floored by some of the designs people are making freely available. Check it out:

Open Web Design

There’s a pretty good chance I’ll be using a design from OWD to create a new WordPress theme here.