There’s nobody alive today who doesn’t remember when President Roosevelt fought his first “teddy” bear, ushering in an era of militant bar-bear-ism. The year was 1902, or maybe another year, but the story remains the same — unknown, thanks to the recording technology of the age.

When good old TR put that grizzly in a footlock, scriveners the world over were telegraphing the whole shebang in a curious shorthand that remains undecipherable to this day. Each bob and weave — including the infamous part where the wretched bear seized TR’s hat and performed a mocking dance — are inaccessible in their entirety to current and future generations.

In memoriam of the brave souls who lost large portions of their lives trying to discern a single letter from that chicken-scratch, I dedicate the following code to the eternal quest for clarity:

div.note-container {
position: relative;
width: 90%;
margin: auto;
}
div.note {
color: #000;
background-color: #eee;
height: 20em;
border: 1px dashed #555;
border-left: 5px solid #555;
padding-left: 1em;
white-space: pre;
font-family: monospace;
overflow: auto;
}
div.note:before,
div.note:after {
display: block;
position: absolute;
top: 0;
left: 5px;
height: 20em;
width: 7px;
border-left: 7px dashed #555;
content: "";
}
div.note:before {
left: -7px;
}

“Nifty Notes”, as I’ve come to call this snippet of goodness, lets you insert little text notes into your blog posts, styled the same way the above box is. After sticking the above code into the CSS section of your blog template, use the following code in posts to achieve notes formatted the way Teddy Roosevelt would have wanted:

<div class="note-container"><div class="note">
Here’s some text.
Watch how spaces are respected.
The nice effect on the left is made possible
by viewers like you.
</div></div>

If you have questions, or would like to express either your love of Teddy Roosevelt or your hatred of bears, please leave a comment.

For the last few days, I’ve been playing around with the canvas element, teaching myself how to draw primitive shapes on the fly. As a result of this gut-wrenchingly worthwhile endeavor, I now have a pretty swell little demo up and running.


Play Tracer

I’ll admit that it’s not a finished product; features I can’t think of are unimplemented; the resolution is that of an 8-bit gaming console; physically shaking your computer does nothing to remove the image. And, like the buttons and levers at every nuclear plant built since 1957, the controls are painted on.

Still, there are many keyboard commands that allow gameplay to be not only enjoyable, but super-enjoyable.

Arrow keys

Move cursor.

Space

Clear image.

Shift

Toggle cursor blinking.

X

Export current image.

1-9

Change size of cursor (default is 2).

Have at it! Even on the Wii — that’s right, I’ve got it working with the Wii remote’s d-pad. Don’t forget to tell me exactly what you think of it, because I base all my design decisions on misinterpretations of user feedback.

“You can use any numbers to prove anything,” my first grade teacher told me over coffee. She gave all the first graders hot coffee every day before art. She hated the art teacher.

She also hated being woken up at three in the morning by someone in another time zone.

I can empathize with that, having recently needed to conduct several conversations with people all over the world. As an avid user of the Opera web browser (and drinker of Diet Pepsi) I immediately set out to find a widget to quickly learn the time differential between myself and my new friends (friends who are better than you because they’re NEWER).

The widget I found had more holes than the Holy See (which I assume is full of holes because of the name), so I set to work rewriting it and making it into something I wanted to use. I tried contacting the original author about my changes, but he seems to have vanished from existence over two years ago.

Behold the fruits of my labor: World+Clock!



It’s been about a week since it was approved and put up for download. I’ve taken the download numbers so far and crunched them against the average downloads for the original widget to come up with this graph (which you know is accurate because it’s a graph):



The two widgets will have equal numbers of total downloads in about six years, at the 250,000 mark — of course, it will probably happen much sooner, as the numbers of the original widget will likely plummet (due to the Diet Pepsi-like effect of a superior product) and the amount of Opera users increases.

Betting is now open on when the intersection point will occur. Remember, the house always wins and you change the outcome by participating.

Over a year ago, the Webkit project introduced a fantastic new kind of Internet technology — the ability to create color gradients via CSS. This solves an age-old deficiency in the language which confined web developers and designers to either solid colors or images.

Today, that ability had taken root in the mighty rendering engine that powers Firefox.

There are some major differences between the implementations, which this article will now explain:

(1) Placement of Type

Webkit includes the type of gradient as an argument of a gradient function; Gecko (Mozilla Firefox) includes this definition in the property name. Hence, to declare a radial gradient:

background: -moz-radial-gradient(…);
background: -webkit-gradient(radial, …);

The Webkit implementation would probably be much more practical if there were many types of gradients. Currently, there are only linear and radial supported. One could argue that because the rest of the syntax is identical for both linear and radials, the type is interchangeable and two separate properties are unneeded for what is essentially the same function.

That argument will certainly come up when this feature is standardized.

EDIT: I forgot that radials require an additional radii argument. The two functions then have different parameters, and are NOT essentially the same.

(2) Units of Measurement

Webkit supports only positioning keywords, percentages, and unitless numbers (<number>) that end up interpreted as pixels (<point>). Gecko, instead of supporting unitless numbers, mandates actual units of measurement (<length>):

background: -moz-linear-gradient(0 0, 50px 50px, …);
background: -webkit-gradient(linear, 0 0, 50 50, …);

I really hope the Mozilla syntax is adopted here, it would be a great boon to liquid layout. The Webkit implementation’s lack of relative units is something I see as a flaw. The same discrepancy exists in the Mozilla and Webkit implementations of 2D Transforms.

(3) Repeating Background

This one’s a doozy. By default, Gecko treats gradients just like it would any other background image, and repeats them. This turns radials into spirals and linears into pinstripes. Webkit will not repeat gradients at all:

Webkit (Google Chrome 2.0.172.37)


Gecko (Build 20090801124215)


I generated these images using a modified version of a Webkit test case. You can force Gecko to render gradients in the same way as Webkit by declaring the background as non-repeating:

background: -moz-linear-gradient(…) no-repeat;
background: -webkit-gradient(linear, …);

When you consider that the next version of Firefox, and the current version of Webkit, already have support for multiple backgrounds and background-sizing (-moz-background-size and -webkit-background-size respectively), some amazing designs are becoming possible.

Let’s hope the standards catch up.

By default, Blogger’s comment form allows you to enter plain text, with a scant few HTML tags to help format your text. What is this, 2007? In this day and age, I expect to find a rich text field complete with toolbar and modal dialogs. In fact, on Google’s Product Ideas forum, one popular request regarding comments was essentially this.

It should be incredibly easy for those propeller-headed Google-opers to build such a feature into Blogger — I know, because I did it three months ago:

How can you get this marvel in your browser, you ask? Install this script after installing the Greasemonkey extension for Firefox. This script also works fine in Opera if placed in your Userscripts folder, and Userscripts is enabled. I haven’t tested it in Chrome, which allegedly can run Greasemonkey scripts.

I don’t intend to use Chrome until it supports [Arbitrary Feature], which is only available as a Firefox extension. This is a deal breaker for me.

How many times have you dropped unceremoniously to your knees and prayed sobbingly to a long-forgotten Babylonian deity for a Javascript solution that let you showcase your affection for triangles?

Raise your hand proudly. It’s no secret that the triangle is the best shape of them all; why else would they be so prominently displayed in our bridges, roofs and continents? The triangle has always been seen as a symbol of high status and power.

Now you too can ride the triangle’s prestigious coattails like aristocrats of old! With the Triangle-Tipped Tree List, you can build fantastic collapsible menus like this:

Main Triangle 1

Item 1

Item 2

Item 3

Main Triangle 2

Sub-Triangle 1

Woefully Buried Triangle

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Initially Collapsed Sub-Triangle 2

Item 1

Item 2

Item 3

Initially Collapsed Sub-Triangle 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Main Triangle 3

Item 1

Item 2

Item 3

All of our triangles are imported from Egypt, where they are handpicked by our crack team of classical geometrists and stored in aerated warehouses until isosceles. Each tree list comes in a vintage 1985 chia chamberpot with a trilint nutripack to facilitate unschooled growth. And you have our solemn vow that if any of your triangles contain less than 180° we will happily replace them at no cost to you.

DANGER: Do not stand under collapsible lists or inject triangles into eyeballs. Prolonged usage can cause Ray Ramanoism and heart-hair. Roboshrub Inc. is not responsible for inflamed leaf nodes. For best results, periodically consult your dendrogeometrist.

So I’m ramrodding the new Internet Explorer 8 beta yesterday, reading through a white paper or dozen, and all of a sudden I hit a brick wall.

During MIX 07, Internet Explorer platform architect Chris Wilson asked a developer why he would want data URL support in Internet Explorer. The answer given was “bullets and backgrounds.” And if Microsoft doesn’t change the way IE8 handles data URLs, that’s all data URLs will be good for!

Microsoft has chosen to make data URLs unnavigable and (from what I can tell) restricted to non-HTML data only, destroying the versatility of this technology. I can’t, for example, use a data URI to construct a complex web page on the fly (mostly because IE8 also imposes a 2 kilobyte URL limit). Likewise, I can’t paste the data URI of an image into the address bar and display it. The only reason given for these draconian restrictions is some illusive security threat that no other browser vendor can see.

Also, anything that could conceivably be done with data URIs could also be done with the barely-restricted Javascript URI.

The truly infuriating thing, though, is the size restriction placed on data URLs: the maximum is 32 kilobytes. Take this test case I wrote, for example:Both the image and background render perfectly in browsers that aren’t Internet Explorer, but only the smaller background image will render in IE8. This excruciatingly low limit serves no purpose other than to prevent the embedding of images larger than 32 kilobytes, and create a disconnect between data URI-capable browsers. I hope Microsoft will rethink its implementation of data URIs before IE8 goes gold, because this is just ridiculous.