Currently Firefox, Safari and Opera have reasonable support for the Canvas HTML element. With IE the only major remaining laggard, there are a lot of people starting to experiment with Javascript's new graphical capabilities. I mentioned John Resig's Processing.js library in May, and now Aza Raskin has released the ContextFree.js library, which brings another generative drawing language to web-standards software development.

Besides being pretty, why is ContextFree.js interesting? Because it shows the power of Open web technologies for making graphically-enabled, compelling interaction. The true power of the web revolves around anyone being able to dive in, see what someone else has done, and expand upon it. Canvas lowers the cost of entry to creating graphical mashups and other dynamic, graphical content. It also shows the progress the web has made: a year ago, this demo would not have been possible. Canvas wasn't ready, and Javascript interpreters weren't fast enough. Looking at the qualitative difference in speed from Firefox 2 to Firefox 3 indicates the amazing and substantial progress made towards speeding up Javascript since the last major browser release cycle.

ContextFree.js is a Javascript port of the Context Free open source generative art application by Chris Coyne. It basically defines an extremely simple grammar that is designed to generate rule-based artwork with very few lines of code.

Aza has also released the Algorithm Ink website, which uses ContextFree.js to create an open source art gallery. Using Algorithm Ink, you can load, tweak, and share generative art through a web interface. When you see something you like, you can view the source for the artwork and use it in your own creations. Very cool.

ContextFree.js & Algorithm Ink: Making Art with Javascript
ContextFree.js at Google Code
Algorithm Ink
The original Context Free by Chris Coyne
Drawing Graphics with Canvas
Processing.js - visualization library for Javascript

Add-Art is an ad blocking extension for Firefox, but it's a bit different from other ad blocking hacks. Instead of simply removing ads, leaving a score of empty holes in ad-laden sites, Add-Art replaces all those nasty skyscrapers and leaderboards with a selection of images from a contemporary artist. The image above, for instance, is a cropped banner from Add-Art's current show, Hotel Vue des Alpes by Monica Studer and Christoph van den Berg.

In addition to turning your browser into an art gallery, blocking ads might actually speed up your browsing experience a bit. The Add-Art images are distributed with the plugin and are loaded locally from your machine, so there's no download involved for any of the ad units. Just think of all those bytes you could be saving while viewing lovely mountain scenery instead of dancing mortgage dudes.

Add-Art Firefox Plugin
Hotel Vue des Alpes

A few days ago, this video appeared with Matthieu Deru and Simon Bergweiler showing off a hack that allows them to surf Google Earth using a Wii. Unfortunately, there weren't too many details about how it was accomplished and I couldn't track down any source for the C# application that talks to the bluetooth device.

What I did find was this other clip from almost a month ago (?!?) in which Daniel Schneider demonstrates using the Wii Balance Board to navigate the web in Firefox.

That's right. You can actually surf the web:

He's using the latest version of GlovePIE (v0.3) to accomplish this. As far as I can tell, it's still very alpha, and the WiiLi wiki claims it's buggy, but it does appear to work. Daniel has some pointers to how he's configured things, including the Greasemonkey script that allows you to surf without clicking.

For more information on coding GlovePIE scripts that use the Balance Board, peek at the documentation.rtf file that's packaged with the GlovePIE download. There's information around page 70 that describes how the board functions and how to pull the 4 sensor values from each of its feet.

Using GlovePIE and Firefox with the Nintendo Wii Balance Board
GlovePIE

John Resig, of jQuery fame, released a port of the Processing visualization language for Javascript. Seriously, John is on fire:

The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.

It works "fairly well" (in that it's able to handle anything that the processing.org web site throws at it) but I'm sure its total scope is limited (until a proper parser is involved). I felt bad about tackling this using regular expressions until I found out that the original Processing code base did it in the same manner (they now use a real parser, naturally).

The full 2D API is implemented, with the exclusion of some features here and there between browsers (Firefox 3 is pretty full featured). You can interact with the Processing API directly from standard Javascript. This lets you make use of these drawing features by simply instantiating a Processing object, and then calling its various drawing methods.

Another capability is to write code natively in the Processing language. This allows you to make use of extended language features such as method overloading and classic inheritance, though it looks like type information is pretty much ignored.

John has many of the demos from processing.org working. Most of them are going to peg your CPU, but this is some seriously cool stuff to see working in a first release.

Javascript just got a lot more interesting.

Processing.js
Processing: open source data visualization language

The trick is setting up a number of CSS rules that use "*=" substring selection on an element's properties. For instance, matching an IFRAME tag with the SRC parameter containing doubleclick would look like IFRAME[SRC*="doubleclick"] and matching an anchor tag with an HREF containing a url with "ads." in it would look like A:link[HREF*="ads."]. Giving the style "display: none ! important" to all of the possible combinations and adding the stylesheet to your browser's chrome effectively turns off the ad-serving web. The site below has a comprehensive CSS file that's been tailored to assassinate ads from most networks.

To be honest, I didn't realize that you could do this type of parameter matching and subselection in CSS, so it's worth looking at the CSS source for that alone. If you don't use it for this purpose, perhaps the technique will come in handy for something else you are working on.

Better Ad Blocking for Firefox, Mozilla, Camino, and Safari
Ad Blocking userContent.css

A friend of mine was commenting today on a common scenario that a lot of us run into. When you're actively working on a project, you often times have several tabs open in your browser solely related to that work: some API documentation, a couple versions of a site you are working on, a google spreadsheet, a project resource/status page, and things of that sort.

When you change gears to work on something else, you might have another entirely different set of pages that you keep open all the time. If you juggle several projects at the same time, it can be a nuisance (not to mention a waste of time) to constantly be closing and opening all those windows throughout the day.

This isn't new news, but Firefox and Safari both have a really convenient--and often overooked--feature built into their tabbed browsing and bookmarking functionality that makes managing groups of commonly viewed documents really simple.

In Safari, just create and fill a folder in your bookmarks menu for each group of sites. When you open the bookmarks menu, in your project subfolder there will be a link titled Open in Tabs. Clicking that will open the entire folder's bookmarks at once, each in a tab of the active window.

Firefox makes it even easier. Just set up your tabs the way you normally would, then click on Bookmarks->Bookmark All Tabs. Firefox will create a new folder in your bookmarks menu and automatically import all of your current tabs to the folder. When you open the bookmarks menu, in your project subfolder there will be a link titled Open All in Tabs. This works just as you would expect, conveniently loading all of the documents in the bookmark subfolder.

PeteSearch is an extension that mashes up Google (and Ask, Technorati, Live and Exalead) search pages to give you hot-keys, dead-link checking and split-screen preview.

Now I'm trying the IE port, and I've my own HOWTO with sample code and articles on that painful process!

Building a browser object for IE is a much more laborious process than making a Firefox extension. Welcome to COM DLL hell. Thankfully, Pete's done a nice job of documenting things while porting his app over, and it's this sort of first-hand experience that makes it bearable to start a project like this of your own.

Gina at Lifehacker posted a really nice rundown of what goes into making a Firefox extension:

The meat of a Firefox extension is simply Javascript - the not-very-mysterious stuff of bookmarklets and regular old web pages - and a markup language called XUL (pronounced "zool.") To build your own, you'll need some Javascript know-how, comfort editing XML files, and a healthy curiosity about bending your favorite web browser to your will.

Check it out, then make something awesome and tell us about it in the comments.

How to build a Firefox extension (Gina@Lifehacker)- Link
How to create Firefox extensions (Eric Hamiter) - Link
The Official Building an Extension Guide - Link

FireGPG is an awesome little plugin that adds GPG support to Firefox. You need the GPG package installed on your machine to start, and after activating the plugin, you'll have a new right-click menu that will let you sign, encrypt, decrypt and verify any selected text.

You can use this to add strong crypto functionaliy to any webmail system or forum that you use! Special support for GMail is already built-in, which provides encryption and signature buttons right alongside the normal send button.

Currently, there isn't a lot of documentation, but the author has set up a Wiki. If you want to help out, try the software for a while and pitch in with a page or two on the maual.

FireGPG: Use GPG Easily in Firefox - [via] Link

GPG (GNU Privacy Guard) for Linux, Mac, and Windows - Link

New Firefox Widgets and Install Instructions - [via] Link

Related:

• Tweak the Google with the CustomizeGoogle Firefox Extension
• Make your own gadget (google)

Real Costs is a Firefox plug-in that inserts emissions data into travel related e-commerce website. The first version adds CO2 emissions information to airfare websites such as Orbitz.com, United.com, Delta.com, etc. Following versions will work with car directions, car rental, and shipping websites. Think of it like the nutritional information labeling on the back of food... except for emissions.

The objective of the Real Costs is to increase awareness of the environmental impact of certain day to day choices in the life of the Internet user. By presenting this environmental impact information in the place where decisions are being made, it will hopefully create an impact on the viewer, encourage a sense of individual agency, and provide a set of alternatives and immediate actions. In the process the user/viewer might even be transformed from passive consumer to engaged citizen. Real Costs is project by Michael Mandiberg.

I can't imagine debugging a web app without these two essential tools, which transform Firefox into the Visual Studio of browsers. It'd be akin to writing a .NET application in Notepad.

Firefox as an IDE -Link.

Related:

• del.icio.us: making Firefox more del.icio.us - Link.
• del.icio.us bookmarks Firefox install - Link.

Ed note: In this guest post, veteran Hacks series author Paul Bausch takes on a challenge that's been on my todo list for a while, providing a solution that should be of immediate interest to all readers of this site and just might serve as a seed for future hacking around here.

I have a shelf full of O'Reilly Hacks books across a wide range of subjects. I contributed a couple in the Web Applications category, but I also have Hacks books about digital photography, hardware, scripting languages, gaming, and operating systems. The series has introduced me to a number of authors who are doing unusual things with technology in their particular area of expertise. I thought it would be interesting to follow each of these authors outside of the Hacks series by subscribing to their blogs, collectively. I figured it would be a good way to keep up with areas of technology that I'm not necessarily tuned into. I have a collection of blogs that I read to keep up with what's happening in Web Applications, but I don't have a sense of what's going on with gaming, for example.

So I went on a mission to gather the Hacks authors' blogs using the tools I know best: Web Applications. I started with an Amazon power query for books by O'Reilly with "Hacks" in the title via the Amazon API, and ended up with a list of 80 authors' full names. I plugged each name into Google by hand, adding the word "blog" (or if that didn't turn anything up, "hacks"). Then I visited the blog to make sure it was the Hacks author I was looking for, clicked the orange feed button in the Firefox address field to get the feed URL, and copied the URL to a text file. I ended up with a list of 40 feeds. (A 50% blogging rate among an arbitrary group isn't too shabby.)

I plugged the feeds into Google Reader, and renamed each feed the author's full name. Here's what the final list looks like (click for larger view):

Here's the list of feeds as OPML if you'd like to try it: Hacks Authors.

I've only been tuning into this list for a few days, but I'm already getting to know these authors in a new way. And I was right—I am finding out about developments in tech areas I don't normally tune into. I especially found Brian K. Jones's recent post about Fighting Specialization appropriate, something I wouldn't have seen otherwise.

Related:

• Google Hacks, 3E
• Amazon Hacks

If you use Firefox, check it out and post up your favorite extensions.

More:

• CustomizeGoogle: Improve Your Google Experience -- Firefox Extension - Link.


• Firefox Hacks @ the Maker store - Link.


• Google Hacks, 3E @ the Maker store - Link.

Ted Nelson coined the term Hypertext over 30 years ago, and articulated its principles, most of which have been ignored in the triumph of the Web. One of the principle elements of Nelson's vision that was left out of the web is the inherent bidirectionality of hyperlinks. This just means that a link from A to B should be visible, and traversable, from B to A as well. A simple idea, but suprisingly difficult to implement if you start with the sort of document-centric model that the WWW uses.

The problem is that bidirectional linking requires a certain level of cooperation between referencers and referencees. You can't force every publisher of every document to maintain a trackback-style referencing policy or system. Fortunately, however, you can expect that someone will be in the business of crawling and indexing the web, and the topic of references, as any fan of Pagerank will tell you, falls squarely into the search domain.

LinkBack is a Firefox/Greasemonkey plugin that queries Yahoo web services as your browse the web, displaying incoming links for the web pages that you visit. It's pretty much like using the "link:" qualifier in a Google search, except that it does this automatically for you for every page that you visit, showing the results in a semi-transparent floating div over the document you are viewing.

Of course, there are privacy issues with sending all your browsing information to Yahoo, and the results are only as good as the search engine is capable, but it's a step in the right direction, and for the most part, it works. -Link.

"For the release of Microsoft Vista, T-Mobile is offering 3 free months of their hotspot service. The catch is... You have to be running Windows Vista. (don't do it)

5. Save it, goto Tools > User Agent Switcher > Then click the newly added one. Browse over to http://hotspot.t-mobile.com/vista/ and you should be redirected to a trial sign-up page." - Link.

Already tired of the relatively new Snap "feature" that pops up an annoying little preview balloon over every hyperlink on certain web sites? Well, it turns out it's pretty easy to get rid of them, everywhere. Just click here to disable the feature using cookie technology (or, go to the Snap page that discusses deactivation and click the link from there).

Before discovering this little quick fix (thanks, Paul!), I'd noticed the Options menu available in each Snap window, which lets you "opt out" of the feature on a site-by-site basis, or across the board:

I, of course, killed them globally and only reactivated them for the screenshots in this post. My web browsing has been much more pleasant since.

Tired of typos in your URLs? URL Fixer is an extension for Firefox (and other Mozilla-based browsers, such as Flock) that fixes common mistakes in your address bar caused by careless keystrokes. For example, typing hackszine.con will redirect to hackszine.com. The current version:

will correct common misspellings of .com, .net, .org, .edu, .gov, and .mil, as well as the protocol (http:, https:). It will also correct errors in country code TLDS such as .com.XX, .net.XX, and .org.XX. By right-clicking on the address bar, you can set it to auto-correct your errors, or you can have it ask you before making any corrections.

Related:

• Firefox Hacks

For all lucky NetFlix users who see the "Watch Now" tab at NetFlix.com (indicating early access to the new Instant Watching feature) but are disappointed that the feature is IE only, Hacking NetFlix has uncovered a fix for watching NetFlix streaming movies within Firefox:

Install the IE Tab Add-on, and in the IE Tab options (Tools menu, IE Tab Options) add "http://www.netflix.com" to the sites filter.

Related:

• Breaking: Netflix Launches "Watch Now" Downloads (Hacking NetFlix)
• Demo: Netflix "Watch Now" Movie Downloads (Hacking NetFlix)
• NetFlix Offers Subscribers the Option of Instantly Watching Movies on their PCs (NetFlix Press Release)