Carview!

CARVIEW

MOTORHOMES

Select Language

HTTP/2 302 server: nginx date: Mon, 04 Aug 2025 04:59:03 GMT content-type: text/plain; charset=utf-8 content-length: 0 x-archive-redirect-reason: found capture at 20081216002255 location: https://web.archive.org/web/20081216002255/https://www.hackszine.com/blog/archive/web/ server-timing: captures_list;dur=0.473412, exclusion.robots;dur=0.018956, exclusion.robots.policy;dur=0.009013, esindex;dur=0.010064, cdx.remote;dur=54.965196, LoadShardBlock;dur=337.508047, PetaboxLoader3.datanode;dur=90.677112, PetaboxLoader3.resolve;dur=82.604660 x-app-server: wwwb-app213 x-ts: 302 x-tr: 422 server-timing: TR;dur=0,Tw;dur=0,Tc;dur=0 set-cookie: wb-p-SERVER=wwwb-app213; path=/ x-location: All x-rl: 0 x-na: 0 x-page-cache: MISS server-timing: MISS x-nid: DigitalOcean referrer-policy: no-referrer-when-downgrade permissions-policy: interest-cohort=() HTTP/2 200 server: nginx date: Mon, 04 Aug 2025 04:59:04 GMT content-type: text/html x-archive-orig-date: Tue, 16 Dec 2008 00:22:55 GMT x-archive-orig-server: Apache x-archive-orig-last-modified: Wed, 03 Dec 2008 00:00:52 GMT x-archive-orig-etag: "2898017-195e4-4935cc34" x-archive-orig-accept-ranges: bytes x-archive-orig-content-length: 103908 x-archive-orig-connection: close x-archive-guessed-content-type: text/html x-archive-guessed-charset: utf-8 memento-datetime: Tue, 16 Dec 2008 00:22:55 GMT link: ; rel="original", ; rel="timemap"; type="application/link-format", ; rel="timegate", ; rel="first memento"; datetime="Sun, 04 Feb 2007 09:02:00 GMT", ; rel="prev memento"; datetime="Thu, 18 Sep 2008 08:05:37 GMT", ; rel="memento"; datetime="Tue, 16 Dec 2008 00:22:55 GMT", ; rel="next memento"; datetime="Sat, 14 Feb 2009 12:46:49 GMT", ; rel="last memento"; datetime="Sat, 14 Feb 2009 12:46:49 GMT" content-security-policy: default-src 'self' 'unsafe-eval' 'unsafe-inline' data: blob: archive.org web.archive.org web-static.archive.org wayback-api.archive.org athena.archive.org analytics.archive.org pragma.archivelab.org wwwb-events.archive.org x-archive-src: 52_7_20081215162658_crawl108-c/52_7_20081216002148_crawl100.arc.gz server-timing: captures_list;dur=0.825614, exclusion.robots;dur=0.024088, exclusion.robots.policy;dur=0.012107, esindex;dur=0.017108, cdx.remote;dur=24.695497, LoadShardBlock;dur=144.200778, PetaboxLoader3.datanode;dur=141.413730, load_resource;dur=128.850585, PetaboxLoader3.resolve;dur=75.009445 x-app-server: wwwb-app213 x-ts: 200 x-tr: 466 server-timing: TR;dur=0,Tw;dur=0,Tc;dur=0 x-location: All x-rl: 0 x-na: 0 x-page-cache: MISS server-timing: MISS x-nid: DigitalOcean referrer-policy: no-referrer-when-downgrade permissions-policy: interest-cohort=() content-encoding: gzip Hackszine.com: Web Archives

Archive: Web

Page 1 of 6 1 2 3 4 5 6 >>

November 13, 2008

Embed high-res Youtube videos

Here's an example of a normal embedded Youtube video, borrowed from Patti Schiendelman's Gakken Mechamo Inchworm post.

Back in march, it was discovered that when you view a video directly on Youtube, you could add a "&fmt=18" to the URL to enable a higher quality, higher resolution stream which is encoded with the H.264 codec.

To make this work in an embedded video, however, you need a slightly different hack. After pasting the embed code into a blog post, adjust the two video URLs (one in a param tag and one as the src parameter in the embed tag) by adding "&ap=%2526fmt%3D18" to the end.

For example, the above video embed becomes:

And here's the result:

The still frame before the video is played is the exact same over-compressed image, but when a user clicks play, they will get a nice surprise. Instead of 320x240 video encoded with the Sorenson codec, the video will come in at a resolution of 480x360, encoded with the superior H.264 codec.

Embedding High Quality Youtube Videos [via Kottke]
View YouTube in high-res

November 12, 2008

Typeface.js - embedded HTML fonts sans Flash

It's always struck me that font embedding is a huge omission from the web standards toolkit. If you're not satisfied with Georgia and Verdana, you usually need to turn to images or Flash to get the typeface you want. Tools like sIFR have made this a lot more functional, allowing you to write standard HTML and have Flash dynamically replace content in the page, but using Flash just to display HTML text seems a little unsavory. Typeface.js changes all this, providing a standards-compliant way to deliver a rich type experience using HTML and Javascript with no proprietary technologies.

typeface.js uses browsers' vector drawing capabilites to draw text in HTML documents. For a good while, browsers have had support for vector drawing -- Firefox, Safari, and Opera support the <canvas> element (as well as SVG), and IE supports VML.

You declare the particular fonts to use with the font-family attribute, just as you would normally do in CSS. Then you add the "typeface-js" class to any HTML element that should be rendered by the typeface library. The actual embedded font is delivered to the page in the form of another javascript file, which contains the vector information for the particular font face.

The cool part is that any Truetype font can be easily converted to the javascript format using a perl utility that comes with the package (or a web form provided on the typeface.js site). Simply convert any fonts that your page requires and add them to your html using the script tag. The whole process is at least as convenient as building font swfs for use in sIFR, making it a worthy open source alternative.

Typeface.js - HTML/JS Font Embed Library

Previously:
HOWTO - Use rich fonts in your web design with sIFR

November 3, 2008

Top 5 election day mashups

Aside from the politics, opinions, and issues involved in this election, I've been really interested in how the current state of web technology, survey data, online conversation and public information would be merging together into web applications and utilities for the growing digital electorate.

From finding a voting location, to enabling countrywide real-time political conversation (by people, not pundits), to monitoring live election results, and even reporting quality of service measurements at poll stations, below are my favorite examples of the web working hard to improve the democratic process.

Where And How To Vote

Google is providing what is essentially a voting howto map that will help you with directions to your voting location as well as information about your state's election regulations. After you type in your address, you'll be shown the location of your voting precinct, as well as useful links to registration information for your state. Many states allow "day of" voter registration, so if you haven't already registered and you'd like to vote, it's worth checking out.

Map of 2008 Voting Locations and Instructions

Tweet Your Vote

It's simple. We voters are using Twitter and other texting tools to report on how the vote is really going during this election, and we're urging everyone to use the common word (or "hashtag" in Twitter lingo) of #votereport as they do so. If that happens, we'll all be able watch on maps and graphs how the election is going across the country.

To participate, you'll want to Tweet details on your voting experience, including your location, wait time, quality of experience, and any problems that you ran into. Useful hashtags include: #[zip code], #wait:[minutes], #good or #bad, and #machine or $reg (for machine or registration problems). For example:

#votereport things are #good in #55404 with #wait:30

This will let local volunteer monitors know that things are functioning well in the 55404 area code and that the wait time at the polls is only 30 minutes. More information is available at the Twitter Vote Report web site, and in the video above, including ways to report serious issues as well as reporting status by phone.

Twitter Vote Report

Monitor Poll and Survey Data

You can monitor trend estimates for the presidential, senate, and house elections on pollster.com. The map data provides a working estimate of the election outcomes by calculating regression trendlines based on available survey data.

In most cases, the numbers are not an "average" but rather regression based trendlines. The specific methodology depends on the number of polls available.

If we have at least 8 public polls, we fit a trend line to the dots represented by each poll using a "Loess" iterative locally weighted least squares regression.
If we have between 4 and 7 polls, we fit a linear regression trend line (a straight line) to best fit the points.
If we have 3 polls or fewer, we calculate a simple average of the available surveys.

Clicking on a state will give you more information about the poll data, as well as the computed trendline that forms the basis of the predicted outcome.

Pollster 2008 Election Polls

Tweet Your Opinions

Twitter is running a special Election 2008 filter that lets you track opinions and conversations about the presidential election through the lens of users' Tweets. Basically, any time you use the word Obama, McCain, Palin or Biden in a tweet, it will show up in the live monitor. The site uses AJAX requests to pull in successive batches of updates and display the messages in almost real-time. You can filter by a particular candidate, or just watch the whole passionate conversation roll by, assuming you can read fast enough.

Twitter Election 2008 Stream

View Live Election Results

Google is also providing live election results in a map gadget. As precincts begin sending in data, the map above should change to reflect the current reports. You can embed this in your own page by following the link below. The gadget allows you to customize the embed code to track either the presidential, house, or senate election.

2008 Election Results Gadget

Send Us Your Favorite Election Hack

Do you know of any voting mashup hacks or tools that I've missed? Please add them to the comments!

(Keep in mind that we want to hear about your favorite election tech, but please reserve any political discussion for a more appropriate site.)

November 1, 2008

CSSHttpRequest - cross browser AJAX without JSON

Because XMLHttpRequest only functions in a same-origin model, the main alternatives have been to either proxy the XML request server-side, or transfer javascript arrays via JSON (since cross-domain script calls are allowed). CSSHttpRequest is another method for performing cross-domain AJAX-style requests, but instead of running loading a remote Javascript file, CSS is used as the transport, and data is encoded inside of urls in @import statements.

A request is invoked using the CSSHttpRequest.get(url, callback) function:
    CSSHttpRequest.get(
        "https://www.nb.io/hacks/csshttprequest/hello-world/",
        function(response) { alert(response); }
    );
Data is encoded on the server into URI-encoded 2KB chunks and serialized into CSS @import rules with a modified about: URI scheme. The response is decoded and returned to the callback function as a string:
    @import url(about:chr:Hello%20World!);
CSSHttpRequest is open source under an Apache License (Version 2.0).

This is a pretty cool alternative—it seems to be a much safer way to do things than blindly executing javascript from servers not under your control. It's somewhat like what XMLHttpRequest could have offered if it weren't limited by the same-origin policy (though in a more roundabout way).

It still begs the question: why on earth is XMLHttpRequest limited by a same-origin policy, especially when it forces developers to adopt more dangerous methods for cross domain communication?

CSSHttpRequest

October 26, 2008

Start Chrome in incognito mode

Maybe you don't want a bunch of cached data hanging around after your browser session exits. Maybe you travel a lot with your laptop and don't want a bunch of private information on a machine that might be stolen. Maybe you do a lot of "birthday shopping."

Whatever the reason, if you prefer to use Chrome in incognito mode for most of your day to day browsing, Michael T. Bee sent us a convenient script that starts up Chrome in incognito mode automatically. Here it is in all it's glory:

//Chrome_Incognito.js - start new chrome incognito(sort of)

var liWait=175; //wait ms (double on older pc)

var oSh=new ActiveXObject("WScript.Shell");
oSh.Run("chrome.exe"); //start chrome
WScript.Sleep(liWait);
oSh.Sendkeys("^+N"); //start new incognito window
WScript.Sleep(liWait);
oSh.Sendkeys("%{Tab}"); //go previous(first) browser window
WScript.Sleep(liWait);
oSh.Sendkeys("%{F4}"); //close first browser window

Just drop this in notepad and save it as chrome_incognito.js on your desktop. When you double click it, it will launch Chrome, make an incognito window, and then close the first window. It does all this by sending artificial keypress events to the application through the Shell ActiveX object, a technique which might come in handy for scripting other standard Windows applications.

If you have an older or slower machine, you might need to adjust the liWait variable to give your machine time to launch Chrome before the application starts sending fake keypresses to it.

Going Incognito At Startup

September 4, 2008

Objective-J and Cappuccino released

Hackszine reader Math Campbell writes:

As promised when they released their demo application 280 Slides, 280 North, the startup that invented a whole new language (Objective-J) to run their Cocoa-like Javascript framework, Cappuccino on, has released both Objective-J and Cappuccino as open-source under the LGPL. They're also providing documentation, tutorials and forums to help you master this new and exciting way of writing web-apps.

This project came to my attention in June when 280 North released their web-based, Powerpoint-like presentation application, 280 Slides. The team has re-implemented a significant portion of the Cocoa API in Objective-J, so developers who are familiar with writing applications for Cocoa or GNUstep can easily port over their skill set, and possibly their applications, to the web.

Now I've got both iPhone and Cappuccino development giving me a reason to start kicking around a common development platform for web and mobile applications. Have any of you Hackszine readers started playing with Objective-J/Cappuccino? If so, what's been your experience so far?

Cappuccino: open source web application framework
Cappuccino tutorials

August 29, 2008

YouTube Comment Snob

Christopher Finke wrote a Firefox extension called YouTube Comment Snob that hides the 90% drivel which graces the comment area beneath your favorite videos. It's basically a YouTube spam filter that allows you to optionally weed out comments based on characteristics like excessive (or lack of) capitalization, profanity, over-punctuation and a high incidence of spelling errors.

I'd be so stoked if someone took this idea and applied to blog comments in general. Just a quick glance at Slashdot, Drupal, Digg, Blogger, and Moveable Type shows that you can probably target a majority of sites by filtering through block-level elements beneath DIVs that have an id or class containing "comment".

YouTube Comment Snob [via BoingBoing]

August 23, 2008

Pixlr: Flash photo editor

Pixlr is a simplified photo editor that runs right in your web browser. The interface is similar to Photoshop, though its tools are still a bit rudimentary. It's the pet project of Swedish web developer Ola Sevandersson, and is still fairly beta, but there are some things I really like about it. For one, the File->Open and File->Save menus show off how seamless file interaction on the web can actually be. The other cool thing is that the application has layer support, which is one of the basic requirements of any photo editor (but often not seen in online experiments). Missing are selection rotation and transformation, among other things, but hopefully this will continue to be developed into a substitute for the 99% of what most folks use desktop photo editors for.

Pixlr beta
One Man Photoshop: Pixlr is Slick

August 21, 2008

Chain.js - data binding for jQuery

Rizqi Ahmad, a high-school student in Germany, created a pretty useful data binding service for jQuery called Chain.js. It allows you to easily manipulate data driven content from javascript by directly manipulating the DOM, without resorting to templates or a lot of complicated code. You create the markup the way you want the data to display, give class names to DOM elements that should have their content substituted, and pass an associative array containing the variable data to the chain() method.

There is also support for managing lists of elements, allowing you to add and remove elements dynamically inside the defined markup. Rizqi also created the Interaction library that works on top of the data binding library to provide drag, drop, and sort support for lists.

Make sure to check out his demos. They show off some of the flexibility of the library and they're easy to tweak for your own needs.

Data Binding Solution for jQuery
Chain.js - Data Binding Service for jQuery
Interaction.js - drag/drop/sort support for Chain.js

August 20, 2008

Text-to-speech in PHP

It's been a while since I've played with the open source Festival TTS software, and I'm pretty impressed with the quality of the speech output. Some of the voices that are available sound so much better than the old diphone-based voices that evoke WOPR from War Games.

This got me thinking it'd be fun to integrate some of this functionality into a web application. A quick search and I discovered Tony Bhimani's Linux Text-To-Speech Tutorial which has a sample PHP application that uses the Festival text2wave utility and the lame mp3 encoder to produce mp3 files from user submitted text.

I mentioned that some of the voices are pretty outstanding. In particular, the "unit selection" voices, demonstrated on the Festival demo page, are able to synthesize a lot of sentences with few noticeable glitches. These voices sound so nice because they contain a much larger database of common sound units, only falling back on heavy processed output on less common utterances. There's a howto and discussion over on Ubuntu Forums that'll guide you through installing and using the more enhanced voices with Festival. With a decent voice file, Festival, and an adaptation of Tony's PHP text-to-speech demonstration, it wouldn't be too hard to add audio output to your blog or create a script that turns your RSS feeds into a podcast for the daily commute.

Have any of your own text-to-speech ideas or demos? Please share them in the comments!

Tony Bhimani - PHP Text-To-Speech Example
The Festival Speech Synthesis System
HOWTO: Make Festival TTS Use Better Voices

August 19, 2008

Cross-browser rounded vector corners

As a web developer, I've been patiently waiting for the designer community to finally decide that rounded corners and drop shadows are out of style. I've been waiting since about 1999 so, uh, you know, any day now guys. I'll just be waiting here in web developer hell trying to construct a cubic igloo.

There are a number of tricks for creating roundtangles, from nesting a bunch of divs with background images, to jQuery scripts that will dynamically build successive 1-pixel-thick divs to render the corners. Today, I came across another method which simulates the CSS 3 border-radius vector corner effect in most browsers, using a little bit of conditional HTML and a bunch of browser-specific CSS properties.

You'll have to check the source on the linked page below to see how it's done, but basically VML is used for IE support, and the -moz-border-radius and -webkit-border-radius properties are applied for Firefox and Safari users.

It wouldn't be a difficult task to simplify this a bit with jQuery and roll all of the necessary markup and css tweaks inside a single class target.

HTML/CSS Vector Corners

August 17, 2008

Olympic proxy - how to watch location restricted content

It sounds like I'm not the only one bummed out about the NBC/Microsoft/Silverlight version of the olympics. Hackszine reader No Dust writes:

How do you view the Olympics on the Internet? NBCOLYMPICS.COM only shows popular games in the U.S., and missed many good games. I went to other international web-sites in China and England (bbc). All their video-streaming have been blocked for the U.S. region.
I heard about Proxy server stuffs... if there anything we can do to by pass their "region" check on our IP address and browser info?

There are a number of sites that are distributing recorded or live olympics content online, but due to their licensing agreements, they only show content to a restricted location. The provider looks at your incoming IP address which can determine your country of origin and your permission to view the video they provide. To get around this restriction, you need to find a proxy server in an allowed location. Here's how to do it.

Choose A Site To Watch

China Central Television (CCTV) has a big list of rights holders, by country, that are officially licensed to broadcast olympic games content online. Go to the CCTV Olympic Games internet rights holders list, and select a URL that you want to view. Then, see which countries are associated with that URL. You'll have to find a proxy in one of these countries to view the content.

Try and find a licensed country that is likely to have a decent internet backbone and infrastructure. When you look for a proxy server, you'll have better luck finding one with a speedy connection. For instance, YouTube has an Olympics channel at https://www.youtube.com/beijing2008. To view anything at that URL, however, you need to be in one of the approved countries. There's a big list to choose from, but you might want to go with South Korea instead of Afghanistan.

Find A Proxy

There are a bunch of proxy servers around the world that allow anyone to use them, typically called open proxies. You'll need to search a bit to find one that is currently online, but there's a decent, regularly updated database of open proxies at xroxy.com that does a decent job.

If you're searching for South Korea, just select it from the country list, and you'll find a number of open proxy servers, along with their latency and uptime information. Try to find one with really low latency, but keep in mind that if it has a low reliability measure, it's less likely that it'll be online.

Scribble down the IP address and port number for a couple proxies in the list. You'll need that information to configure Firefox.

Configure Firefox To Use A Proxy

In Firefox, go to preferences->advanced->network->settings. There's a radio button that specifies whether to use a proxy or not. Choose "Manual proxy configuration".

Most of the proxies in the list would have said "Transparent" in the proxy type column and use port 8080. Assuming that's the case, you want to type the IP address you saved in the "HTTP Proxy" input field, and "8080" in it's associated "Port" field. If it was a SOCKS proxy, do similar, but in the "SOCKS Host" field, and make sure to select v4 or v5, as appropriate.

See If It Worked

Once you've saved you settings, you should be able to go to the view content that wasn't previously available to you. You'll notice that your connection is a bit slower, since everything is being funneled through a server in another country, but in most cases, this will work out. If you can't connect through the proxy, or if your connection is really slow, just try another proxy from the list.

When you're done watching, make sure to go back to your settings and turn off the proxy by choosing the "Direct connection to the internet" option. If you leave the proxy settings in place, your connection will be slow and everything you browse will be funneled through the proxy server - probably not what you want.

That's really all there is to it. Good luck!

July 28, 2008

Web application hotkeys with Javascript

It's unfortunate, but there are only a few sites that have done a good job of enhancing the user experience with hotkey support. In searching for the easiest way to do this in my own applications, I stumbled across the Hotkeys plugin for jQuery. In typical jQuery form it lets you do something moderately complicated, like capturing keyboard events, with a single line of Javascript code. You use the hotkeys.add method to bind a keyboard event to a callback function and the hotkeys.remove method to remove the handler.

Here's an example that will create an alert box when you press control-c:

$.hotkeys.add('Ctrl+c', function(){ alert('ctrl-c pressed');});

You remove the handler like this:

$.hotkeys.remove('Ctrl+c');

hotkeys.add can also has a 3 parameter evocation: hotkeys.add(key, options, handler). The options parameter is just an associative array which you can use to pass options such as the target DOM path or the type of key press event (keyup or keydown). The key parameter is a string representing the key combination. Instead of using scan codes, you send in the names of the key combination, such as "a", "Shift+b", "f9", or "pageup". It's really that easy.

Javascript jQuery Hotkeys Plugin
Using jQuery Hotkeys

July 5, 2008

Crawling AJAX

Traditionally, a web spider system is tasked with connecting to a server, pulling down the HTML document, scanning the document for anchor links to other HTTP URLs and repeating the same process on all of the discovered URLs. Each URL represents a different state of the traditional web site. In an AJAX application, much of the page content isn't contained in the HTML document, but is dynamically inserted by Javascript during page load. Furthermore, anchor links can trigger javascript events instead of pointing to other documents. The state of the application is defined by the series of Javascript events that were triggered after page load. The result is that the traditional spider is only able to see a small fraction of the site's content and is unable to index any of the application's state information.

So how do we go about fixing the problem?

Crawl AJAX Like A Human Would
To crawl AJAX, the spider needs to understand more about a page than just its HTML. It needs to be able to understand the structure of the document as well as the Javascript that manipulates it. To be able to investigate the deeper state of an application, the crawling process also needs to be able to recognize and execute events within the document to simulate the paths that might be taken by a real user.

Shreeraj Shah's paper, Crawling Ajax-driven Web 2.0 Applications, does a nice job of describing the "event-driven" approach to web crawling. It's about creating a smarter class of web crawling software which is able to retrieve, execute, and parse dynamic, Javascript-driven DOM content, much like a human would operate a full-featured web browser.

The "protocol-driven" approach does not work when the crawler comes across an Ajax embedded page. This is because all target resources are part of JavaScript code and are embedded in the DOM context. It is important to both understand and trigger this DOM-based activity. In the process, this has lead to another approach called "event-driven" crawling. It has following three key components
Javascript analysis and interpretation with linking to Ajax
DOM event handling and dispatching
Dynamic DOM content extraction

The Necessary Tools
The easiest way to implement an AJAX-enabled, event-driven crawler is to use a modern browser as the underlying platform. There are a couple of tools available, namely Watir and Crowbar, that will allow you to control Firefox or IE from code, allowing you to extract page data after it has processed any Javascript.

Watir is a library that enables browser automation using Ruby. It was originally built for IE, but it's been ported to both Firefox and Safari as well. The Watir API allows you to launch a browser process and then directly extract and click on anchor links from your Ruby application. This application alone makes me want to get more familiar with Ruby.

Crowbar is another interesting tool which uses a headless version of Firefox to render and parse web content. What's cool is that it provides a web server interface to the browser, so you can issue simple GET or POST requests from any language and then scrape the results as needed. This lets you interact with the browser from even simple command line scripts, using curl or wget.

Which tool you use depends on the needs of your crawler. Crowbar has the benefit of being language agnostic and simple to integrate into a traditional crawler design to extract page information that would only be present after a page has completed loading. Watir, on the other hand, gives you deeper, interactive access to the browser, allowing you to trigger subsequent Javascript events. The downside is that the logic behind a crawler that can dig deep into application state is quite a bit more complicated, and with Watir you are tied to Ruby which may or may not be your cup of tea.

Crowbar - server-side headless Firefox
Watir - browser remote control in Ruby
Crawling Ajax-driven Web 2.0 Applications (PDF)

July 2, 2008

Algorithm Ink and ContextFree.js - generative art with Javascript

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