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

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

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

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

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 http://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!

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

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

1. Javascript analysis and interpretation with linking to Ajax
2. DOM event handling and dispatching
3. 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)

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

Ryan Sit sent in a link to Swurl, a Web 2.0 application/startup he's been working on that attempts to collect all of the artifacts of your digital life and assemble them into a sensible whole. You could call it an aggregation tool—which, deep down, it is—but it does a little more than other things I've seen. Namely, it does a really nice job of taking in a wide range of relationship oriented services and turning the their inherent lock-in inside-out.

You just do your normal stuff online, Digg stuff, Delicious stuff, favorite Youtube videos, Twitter, rent videos on Netflix, bookmark songs on Last.fm, post photos on Flickr, etc. And Swurl brings it all together in a really deep way. We also enhance data, adding trailers to movies you rent and Lyrics to songs you bookmark.

All of these services get pulled together into a blog format and discussion and commenting can take place around any item. I think the idea is to help centralize the conversation instead of having it scattered about your different networks. Depending how busy your various online activities are, this may help you or it may just add yet another place to track comments.

What I like most, and the real hack from a Web 2.0 startup perspective, is that they programmed this to encourage you to maintain friends and use features across a number of social networks and easily traverse the relationships and data in all of them from a single location. Flikr is good for storing photos. Del.icio.us is great for bookmarking. Facebook is awesome for tracking friends. Swurl aggregates the relationships from all of the networks you inform it about and it recognizes when those users are also Swurl members. This encourages network growth, but isn't so greedy that it forces you to work only inside the Swurl fence.

Swurl [via Ryan]

There's a neat article over at Ars Technica that takes a look at 280 North's 3-person development team, their recent release of a keynote-like web application called 280 Slides, and the framework that they constructed to make the application. Some time before 280 Slides was developed, the team created an Objective-C-like superset of the Javascript language called Objective-J which implements message passing and a Smalltalk-style syntax. Building on that, they re-implemented much of the Cocoa framework in Objective-J, allowing Cocoa-style applications to be developed that will run natively in the browser.

With Objective-J and Cappuccino, you don't create applications with a mixture of HTML, CSS and Javascript. Instead, apps are written entirely in Objective-J, following a development model that's similar to creating desktop applications for OS X. From the article:

"Cappuccino is a re-implementation of Cocoa in Objective-J, which means we reimplemented AppKit, Foundation, CoreGraphics, and parts of CoreAnimation," Boucher told us. With it, developers familiar with desktop GUI applications can create a rich, desktop-like web app with the same relative ease Cocoa programmers can create a rich desktop app. "Coming from a background of desktop programming, and Cocoa in particular, we realized how much harder building a web application was. So we wanted to try to make things just a little bit easier."

280 Slides stands on its own as a powerful web-based presentation tool. It's simplified when compared to its desktop cousins, but it does exactly what most people need in a presentation tool, and it can export to PPT for fine tuning and end-presentation use. The fact that its development inspired the creation of a new language as well as bringing a desktop application development framework to the web just blows my mind.

Objective-J will be released to the public soon as an open source project. On the one hand, I'm not sure if I'm comfortable moving away from the web development technologies I've grown accustomed to. On the other, it would be cool to work in a language that allows you to seamlessly port your applications between the desktop and the web.

If you have experience with both Cocoa and AJAX development, please share your thoughts in the comment area.

Cocoa on the web: 280 North, Objective-J, and Cappuccino [via Slashdot]
280 North Blog
280 Slides
Objective-J.org

There are so many WYSIWYG editors for html forms, it's about time someone put together a decent web version of the Vi editor. JSVI is written in Javascript and seems to be fairly cross-browser compatible. With a few tweaks to your code, you can now make any textarea behave exactly like Vi. How cool is that?

To use it, download the GPLed vi.js file from the link below, include it in your html document, and then add an onfocus="editor(this);" to any textarea that you want vi enabled. If your textarea contains any preset information, the text will be loaded into the editor when the field is clicked. Saving the file with :wq will exit the editor and store the changes back in the input field.

Somewhere there must be a unix blog or forum that will adopt this for their submission and comment fields. Shame on them if they don't. That is, unless they are waiting for the emacs version.

JSVI - VI in JavaScript (demo)
Download vi.js

To make it work, you just make a horizontally tile-able background image, and a horizontally tile-able alpha-transparent PNG for each foreground layer. These are each set as the background image of a separate div with the repeat-x attribute. The divs are absolutely positioned right on top of each other, and then a single line of jQuery code is used to set the animation speed for each layer.

It's a subtle and bandwidth friendly way to add a bit of visual polish to your site. Netherland is using this effect for his blog's masthead, and it looks pretty cool.

jQuery Parallax Scrolling (download)
jQuery
jQuery Easing library - you'll need this too

It's a creepy scenario, though, that a website operator can effectively bypass the browser's intended security model to invade your privacy by seeing if you've been visiting other sites. Hackszine reader Logical Extremes commented with a solution to this problem:

This is a common phishing vector. Rather than encouraging broader use, we should be educating and protecting against it. There is a Firefox add-on that explicitly blocks this.

Some hackers over at the Stanford Computer Science Department created SafeHistory, a Firefox plugin that protects against visited link tracking techniques. It works by only allowing the a:visited property to apply to off-site links that were previously visited from the current URL.

This seems to be a reasonable way to keep the functionality of visited links without leaking any additional information. I wonder how long it will be before this is adopted as a browser behavior standard.

Stanford SafeHistory
Protecting Browser State Using Same Origin Policy (PDF)

Previously:
Detect which sites a web user visits

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

Aza Raskin's SocialHistory Javascript library allows you to do something incredibly cool: detect which sites your web users have visited on a per-user basis. The javascript runtime isn't supposed to be privy to the information in a user's browser history, but there's an information backchannel common to all major browsers which allows you to effectively interrogate the browsing history and determine if a particular URL has been visited before.

It works by creating an anchor link to the site in question and applying a CSS style to the link, specifying a different display property for "a:visited". By reading the computed style back from the anchor element, you can then determine the property's value, and consequently if the user had visited the URL or not.

This could probably be used for a number of devious purposes, but Aza's concept for the SocialHistory library is actually really useful. By querying the default URLs that belong to all the major social network sites, you can figure out which sites a particular user visits and custom tailor any social badges that you display. If they use del.icio.us, you show a del.icio.us link. If they visit Digg, you show the Digg button. It's an awesome feature made possible by a pretty freaky security leak.

Now, it's not perfect. It requires that you query the exact URLs that a user may have visited. You can't figure out everywhere they've been, how frequently, or in what order, only whether a particular URL that you know about has been visited before. On the other hand, it's a pretty useful tool considering you aren't even supposed to be able to do this.

How to Detect the Social Sites Your Visitors Use
SocialHistory.js

This is really powerful for a few reasons:

• client-side, you can store way more data than allowed by traditional cookies
• none of the data is transferred explicitly to the server, minimizing bandwidth used for each page request
• allows you to talk between pages in different domains

Keep in mind that anything you store via this mechanism will be visible to any other site that a person visits, so this is best for storing non-sensitive data that you want to retain between page loads. This would be great for caching returned AJAX data that you would otherwise have to refetch and reprocess.

Session variables without cookies

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

When you look at the analytics javascript code you see that it combines several sets of data into an image request. This image request sends the right data to Google (not the javascript). When you know what url you should use for the image, you can call the image directly and send the same data. Of course you need to be able to request the image url and that isn't easy from another image, rss feed or pdf. This is why we request it "server side".

You can add the code to the PHP that drives a blog site, for instance, and generate page views when your RSS feed is hit. You can even write a very simple script to proxy images and downloads, which will let you track hit data for all files on your site, not just the html pages viewed by a javascript enabled browser.

Taken a step further, you could even use this on the client side, triggering analytics views from standalone Flash apps or even desktop applications.

The one thing you need to keep in mind is that server-side analytics requests will appear to come from your server, not the client's machine. So while you can track page views and download events this way, you'll loose a lot of the information about your user base. Because of this, it would probably make sense to use a separate tracking ID for the server side events.

Google Analytics Without Javascript

SafeHTML is a lightweight PHP user input sanitizer that does just that. Just run any input field through the SafeHTML filter and any javascript, object tags, or layout breaking tags will be stripped from the supplied text. It also does a reasonable job of correcting any gnarly, malformed code, which is also a common problem with user-contributed data.

Using it is easy. Just instantiate the SafeHTML object and call its parse method:

require_once('classes/safehtml.php');

$safehtml =& new SafeHTML();

if ( isset( $_POST["inputfield"] ) )
{
  $inputfield=$_POST["inputfield"];
  $cleaninput = $safehtml->parse($inputfield);
}


This will take the posted "inputfield" parameter, strip any baddies, XHTMLify what's left, and the result will be stored in the $cleaninput variable. It's a simple addition to your code, and a lot more straightforward than trying to roll your own.

My only beef with the package is that it's written with a default allow policy, stripping out tags that are in its deleteTags array, but essentially allowing anything else through. If you'd rather only let through tags that you specifically want to allow, I'd recommend adding an allowTags array and adjusting the _openHandler method, adding the following after the deleteTags check:

if ( ! in_array($name, $this->allowTags)) {
  return true;
}

You'll need to fill allowTags with everything you know to be safe and welcome, and you may miss a few that people will end up wanting to legitimately use, but this is easily corrected and the default deny policy is much safer in the long run.

SafeHTML - an anti-XSS HTML parser, written in PHP

What's killer is that Adobe's as3corelib addon library finally gives us some essential tools that have been sorely lacking, none the least of which is a client side JPEG encoder. With this, you can turn any drawable object like a sprite or a movieclip into a ByteArray holding the compressed JPEG data in just a few lines of code. It's as simple as this:

import com.adobe.images.JPGEncoder;

var clipbmp:BitmapData = new BitmapData (aclip.width, aclip.height);
clipbmp.draw(aclip);

var jpgEnc:JPGEncoder = new JPGEncoder(90);
var jpgbytes:ByteArray = jpgEnc.encode(clipbmp);


This turns the "aclip" sprite or movieclip into a rasterized, flattened, BitmapData object. The BitmapData is then run through the JPEG encoder with the quality setting of 90 and you're left with the raw JPEG-compressed image in a ByteArray object. The as3corelib also provides a PNG encoder, with which you can just use the static method PNGEncoder.encode(clipbmp).

This is perfect for saving a capture of user-generated artwork to the server. Just set the data member of a URLRequest object to the ByteArray and post it. For more detailed information on how to put all the pieces together, Henry Jones has a really thorough post of compressing JPEG data and pinging it off a server to force an image download.

Unfortunately, to trigger a JPEG download, you still need to post the image data up to a server script and have it echo it back to the browser. The difference now, though, is that you can do the compression on the client end, saving both server CPU time and the time to upload the image data. This means saving a large image is a few second process instead of taking a minute and a half.

Actionscript 3 Core Library (as3corelib)

I caught this self-referential tutorial on YouTube today which walks you through the basics of the YouTube API. It appears to be quite simple to develop Javascript or Flash applications that can control or interact with the YouTube player, or even completely reskin the interface.

What I didn't know until recently was that the API has provisions for allowing your application to upload videos and post comments. You can even authenticate users and allow them to interact with the YouTube backend through your private application. It looks like you can do just about everything programatically except remove the YouTube watermark on the video.

YouTube Developer's Guide
Developer API Blog

First I was thinking about doing some sort of regular expression search and replace throughout the site and database, but that reminded me of CSS3 selectors and their ability to do simple pattern matching. I've seen people apply a special style to outbound links this way, so after a few minutes of monkeying around with things, I now have a chunk of jQuery that will automatically track clicks on all outbound links.

Here it is, in a nutshell:

jQuery(function($){

   // Match all anchor tags in the "maincontent" div with
   // urls that begin with "http" but don't contain the
   // string "yourwebsite.com"
   $('#maincontent a[href^="http"]').not('a[href*="yourwebsite.com"]').click(function(){

     try {

     // Get the href url and toss out the "http://"
     var href = $(this).attr('href');
     if ( href.indexOf("://") > 0 ) {

       // Track the page in Google Analytics as
       // "/tracking/outbound/www.somesite.com/foo"
       var outbound = '/tracking/outbound/' + href.split("://",2)[1];
       pageTracker._trackPageview(outbound);

       }
     } catch( e ) {}
   }
}


With this running, all of my internal pages get tracked as usual, and any external links will appear as pageviews that look like "/tracking/outbound/www.somesite.com/foo".

If you link out to many different pages on several sites, keeping the full site url in the tracking code and building these deep paths is particularly useful. Google Analytics will allow you to drill down into the tree like it was normal content and quickly pull numbers on how many total outbound clicks you received (/tracking/outbound), how many went to www.somesite.com (/tracking/outbound/www.somesite.com), and how many people clicked out to a particular page on the site.

This saved me quite a bit of time and is immensely more flexible than any other outbound tracking method I've used. I hope this helps someone else. Drop me a line in the comments if this works out for you.

Update: it looks like I wasn't the first to do this. An article by Rebecca Murphey shows how to do something similar, while also adding the referring post title to the tracking code. Pretty cool stuff, I must say.

Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.

Let's start with a few tables:

<table class="users">
  <tr>
    <td class="id">1</td>
    <td class="first_name">amy</td>
    <td class="last_name">bobamy</td>
  </tr> 
  ...
</table>
<table class="photos">
  <tr>
    <td class="id">1</td>
    <td class="user_id">1</td>
    <td class="url">http://www.example.com/foo.png</td>
  </tr> 
</table>

Now we can express some queries:

$('.users')
  .where('.id:eq(1)')
  .select('*')

This is equivalent to SELECT * FROM users WHERE id = 1

$('.users')
  .where('.id:eq(1)')
  .select('.id, .name')

This is equivalent to SELECT id, name FROM users WHERE id = 1

How cool is that? Check out Nick's blog post for an example of text search and an inner join. The API in his jquery.db.js is quite straightforward and only about 50 lines of code. Adding a sort function shouldn't be too difficult.

I'm pretty much convinced now that jQuery is black magic.

Building a relational database using jQuery and <TABLE> tags
Download the jquery.db.js library

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

Next time you're trying to explain the importance of web standards in modern web design and development, just let this video do the talking for you.

The Poetic Prophet (AKA The SEO Rapper) is back with another marketing rap. This time he describes how web standards and proper design can affect the ranking and conversion of pages on your site.

I know this isn't the usual fare here, but I feel I'd be remiss in my duties if I didn't include it in our compendium of all things hack.

Many of the different methods work well, but after trying a number of them, I can say that the following method is the easiest to use and is compatable across all common versions of Firefox, Safari, and IE. Many of you are probably already using this method—it's not new—but for those of you who aren't, give it a try. It should save you a lot of headaches.

Cross Browser min-height

.foo {
min-height:100px;
height: auto !important;
height: 100px;
}

This works because all of the more recent browsers will understand and respect the min-height setting as well as the !important designation. So in the example above, the block will be given the min-height setting you specify, and the height:auto will take precendence over the height:100px, even though it appears earlier in the code. With content shorter than 100px, the min-height setting is observed, and with content that is longer, the block is sized to fit the content.

In the case of older versions of IE, neight the min-height parameter nor the !important designation are supported. Instead, the browser essentially sees a height:auto, immediately followed by a height:100px, and the latter takes precendence. Lucky for us, height parameter in older versions of IE function exactly like the min-height parameter. When content expands past the size of the element, it grows to accommodate it. When content is shorter, the specified height is respected.

I don't find myself using it as much, but this also works with min-width:

Cross Browser min-width

.bar {
min-width:100px;
width: auto !important;
width: 100px;
}

With Monday finally wrapping up, it's time to start thinking about next weekend. Why not spend it Twitter-enabling your house plants?

Botanicalls Twitter answers the question: What's up with your plant? It offers a connection to your leafy pal via online Twitter status updates that reach you anywhere in the world. When your plant needs water, it will post to let you know, and send its thanks when you show it love.

I've managed to make it through the winter with only two plant casualties so far. There isn't a whole lot I can do about the scarcity of light in Minneapolis, but with a little Arduino hacking I could at least remove watering issues from the equation.

Botanicalls Twitter - Link

Since the border-radius CSS parameter has been too slow in coming and rounded corners don't seem to be going out of style any time soon, everyone web developer I know has their own personal brand of CSS background-image and DIV gymnastics for creating smooth-cornered roundtangles. Besides the extra load time that's required to download all those corner images, it's just a lot of extra work. The general principle of unnecessary work is against my slacker sensibilities, which is why the Nifty Corners Cube javascript library caught my attention.

Nifty Corners uses Javascript to dynamically add rounded corners to HTML elements at runtime, without the use of images. You can choose a corner style and tell Nifty Corners what CSS id, class or element to apply it to. The javascript function will dynamically alter the specified elements, drawing 1px high DIV strips at the top and bottom of the element to give it the rounded corners. The effect can be used for everything from rounded content areas to tab-menus.

It won't solve every problem—rounded borders, in particular, are still a bit of a nuisance—but it'll make your work a lot easier for many design challenges and it's compatible with Firefox, Safari and IE 5.5-7.0.

Nifty Corners Cube - Link

If you're a web designer, here's a tool that's going to make your life a lot better. Seriously, in no time you'll be dropping shadows like Galileo dropped the orange.

Transparent GIFs only have a single bit of transparency—a pixel is either totally transparent, or it's completely opaque. 24 bit PNG images, on the other hand, have a bona fide alpha channel, allowing your images to have a full range of transparency. Problem is, they have poor browser support in IE.

The indexed PNG 8 format is similar to the GIF format, and I had always thought that it only allowed boolean transparency. It turns out the PNG 8 format is a little more clever. You still have a 256 color index palette like the GIF format, but the format allows for each index to have its own transparency level, and that level can be set at any amount of opacity!

Here's the real kicker. Even old versions of IE support the PNG 8 format to some degree. So on Firefox, Safari, and IE 7 you can have full alpha support without using any of the quirky IE specific PNG hacks. Older versions of IE will still display your alpha PNGs, but they will revert to a GIF-like all or nothing transparency. Any portion of the image which is semi-transparent will be forced to fully transparent.

To sum it up, the PNG8 alpha format gives you complete cross browser alpha transparency for all modern browsers, and it degrades gracefully for older versions of IE that some people may still be using. As an example, the image above is a semi-transparent PNG8. Most of you will see the blue gradient fade around the edge of the light bulb. Those of you with older versions of IE will see a hard edge around the bulb, similar to what you'd get with a GIF.

Correction: my example is a little goofed, as the blue in the image obtained a partial transparency during the quantization process. IE users will only see some of the bottom portion of the bulb, specifically colors that didn't match the transparent portion in the RGB space. For normal drop-shadow overlays, this does not usually pose a problem. Remember, though, that converting to PNG8 means bringing thousands of color and alpha values down to 256. If your solid colors get mapped to a partially transparent index, they will disappear in older versions of IE.

A coworker introduced me to this today and showed me how Fireworks has an export option for PNG 8 that enables this full-alpha mode. I hadn't been aware of it, because Photoshop has no such feature, only allowing GIF-like transparency for 8 bit PNGs. Unfortunately, I really hate hate have a hard time with Fireworks, and I don't want to purchase it.

A little searching, though, and I found pngnq, a command line tool that will quantize a PNG24 image into a 256 color PNG8 image with alpha transparency. Here's how you use it:

1. Export ("save for web" in Photoshop) your image in the RGBA PNG-24 format
2. At the command line, run "pngnq filename.png"
3. The image will be converted and the output named filename-nq8.png

To install pngnq, just grab the binary from the link below and copy the pngnq executable to somewhere in your path. In OS X, you can put it in /usr/local/bin and add that to your PATH variable (or just toss it it /usr/bin). The program requires the libpng library in order to run. This isn't pre-installed on a Mac for some reason, so you'll have to build it from source, use Fink, or use the installer at the site conveniently listed below.

pngnq - Link
libpng installer for OS X - Link

This is great. By adding the ie7.js script to your site code, you effectively force all older browser versions to function as IE7 does. Now that IE7 is out, there's a second script (you guessed it: ie8.js) that brings IE7 clients almost completely up to standards-spec.

If you're a web developer, you know how frustrating it can be to get things to display correctly in all browsers. Instead of resorting to trial-and-error methods and applying various random hacks to make things work, these javascript libraries have condensed all of the necessary hacks into a single library, so you can code normally and pretend they don't even exist. As MS releases product updates, you can get the latest javascript library and put it in place without too much worry about having to tweak your site to make it render properly in newer browser versions.

ie7-js: Make MSIE behave like a standards-compliant browser - Link