First, do this:

1. Find Safari.app in your Applications folder
2. Right click
3. Click 'Show Package Contents' from the context menu

Then, find this (you'll probably want to save a copy of this in case you want to revert):

1. In the new Finder window, go to the Resources folder
2. Find Reader.html
3. Edit with whatever editor you're comfortable with.

Then, make some changes and save:

You might be asked for your admin password when you save. I set text-align to left because that's how I roll.

Before:

After:

Seriously though, if you don't know what you're doing… please don't even attempt.

Screenshot

An Early Screenshot (note to self: replace with updated screenshot)

It's all JavaScript, CSS3 and HTML5. The gauges are all built and controlled with a JavaScript library that I developed, and are rendered with CSS3. The only images are the footer bar texture and the logo¹ (I know, looking at that screenshot, it's hard to believe).

I built this for two reasons. The first being that I wanted a rotary gauge JavaScript library (for use in another unrelated project), and the second being that I wanted to demonstrate (mostly to myself) how feasible these WebKit apps really are.

Installation

When you go to the app's URL, you'll be given instructions on how to install it (it's as simple as bookmarking it to your homescreen). Then, when you launch it, it will download and cache all the assets², and each subsequent launch after that will check for updates if your device has network access.

How it works

Basically, the app calculates how fast you're going by getting the distance between your current position and your last position and dividing that by how long it took to get there. There are other things going on, like soft rejecting³ positions that would seem to indicate an acceleration of anything above 2g⁴.

This could be further optimized, of course, and when I do that, I can push those changes and everyone (with a network connection) will have access to the new version as soon as they launch.

Features

• A speedometer
• A bearing indicator (it tells you what direction you're heading)
• An analog clock

The clock was really just an exercise for myself. It's basically a rotary gauge with 3 custom indicators with their own values.

If you have an idea for what should be there instead of the analog clock (or any other feedback, really), feel free to let me know. I'm also on twitter.

Sidenote(s)

Debugging and testing this isn't easy. While iPhone can hit .local domains on a local network, I couldn't exactly do use a local network to test this app. I had to be in motion. I spent time while commuting to do my testing and debugging. I also needed full access to the internet to update the remote servers so the iPhone could access the app. I don't think I could have done this without tethering⁵.

I might have been able to create a WiFi network with my MacBook to get access to the .local domain, but even in that case, I'd have to configure my development environment to serve this app from my .local address, and that's also not ideal. Meh, I'll figure out the best solution eventually.

Forgive my rambling, I had to be up early this morning (like, so early it was still Saturday for another 30 minutes).

Many people, myself included¹, assumed that onmouseover was dead² with the arrival of touch based web browsers, and up until iPhone OS 3.2 that seemed to be the case. However, in my testing, I've found that the first tap on an element with an onmouseover "attribute" will trigger the onmouseover event, stop the click event from propagating to any children until a second tap after the onmouseover has fired.

Setting focus elsewhere (via tapping other onmouseover watching elements or form fields) will trigger the onmouseout event and, again, tapping on the element a second time while the onmouseover is active sends the click down to its child elements. You can see this in action with Twitter's "hovercards".

Sadly, adding those behaviors using jQuery doesn't seem to give it the same magic. Perhaps we'll see it in the next version of MobileSafari, and hopefully on iPhone as well. These are preliminary findings, of course, and in order to do more testing I'll require an iPad (with 3G, please).

Anyone?

It's actually a complete rewrite, with some changes, but I tried to remain fairly close to the aesthetic.

I've added a hook for "muting" tweets: In the rules tab, choose "Add a CSS class" for the action, and type in "mute" (sans quotes). This will take those tweets that match down to about 30% opacity.

Download Modern Bubbling for Kiwi!

I never seemed to outgrow it. Nearly everytime I've wanted it to do something, either someone else put something together or I've been able to extend it by writing my own commands or modifying an existing one.

One of the things I've done is bind the shortcut to save (cmd+s) to also validate my PHP or Ruby. Total time saver. If you're a web developer you're probably well aware of the save/switch/refresh/crash/switch/fix/save dance that one does between code editor and browser.

Recently, I decided to package it all up and throw in a couple other validators into it, and thusly the Validate on Save TextMate Bundle was born. This bundle will bind the save shortcut for you, and validate your PHP, Ruby, JavaScript, and CSS.

If you're running Compass (a framework to Sass's CSS abstraction)¹ this tool will try to compile your Sass files and return any errors it outputs.

If you install with Git using the instructions in the README, you'll have instant access to updates, just click the Bundles > Validate On Save > Update Bundle menu command.

There are a few other configuration options in there, like using Growl for notification or jumping directly to the line the validator found errors, but in both cases, the results were a bit iffy so you'll have to enabled those (by following the helpful instructions).

I showed an early version of this to my friend Jim Myhrberg, who refused to let me get away with distributing my messy code, so he did a ton of reorganization and cleanup that ultimately make this even easier for us to perhaps someday add more validators.

Click it if you want to see where Firefox thinks you are, drag it to your firefox bookmarks bar for quick access if you want.

Edit: Please note, while Firefox says that you'll be sharing your location with whatever site you're on whenever you click this bookmarklet, it's not true (at least in my case).

Edit 2: This also works with the iPhone, with better results as Webkit uses the phone's location frameworks, instead of Firefox's (I presume) IP based location.