Web typography has gotten larger because typography’s traditional fine-tuning is impossible at smaller point sizes. Increasing the size of type on screen re-introduces more traditional levels of typographic subtlety and produces more beautiful results.

At Bell Labs in 1962, John L. Kelly recreated the song “Bicycle Built for Two,” also know as Daisy Bell, using an IBM 704 computer. This might have been the first demonstration of digitally synthesized speech. (MP3)

Daisy, Daisy, give me your answer do.
I’m half crazy, all for the love of you.
It won’t be a stylish marriage.
I can’t afford a carriage.
But you’ll look sweet,
upon the seat,
of a bicycle built for two.

Listening to an MP3 of the event, the wonder of that accomplishment still comes through.

Arthur C. Clarke happened to witness that event and would go on to use the song for HAL9000’s death scene in 2001.

IBM is said to have sold only 123 model 704 computers between 1955 and 1960, though the machines were extremely expensive and often rented. A single computer might have cost as much as $24 million — in 1957 dollars.

FORTRAN and LISP, the foundations of most all modern computing languages, were first developed on these machines (FORTRAN was started on the IBM 701 but first compiled on the 704). The 704 was the first commercially available computer to feature floating point arithmetic, and magnetic core memory (initially containing 4k of 36-bit words, which I think works out to about 18 bytes of memory. An installed machine was said to have come with its own human field engineer. Here’s a scanned copy of the IBM 704 Manual of Operation.

First glimmer via Wikipedia by way of Defective Yeti.

At a weekend playdate for the girls, Jonathan showed me this movie:

It’s a ferrofluid sculpture by Sachiko Kodama, Yasushi Miyajima, Morpho Towers — Two Standing Spirals, higher quality clip at the link.

Another video, possibly showing a prototype and scale of the above fountain:

A ferrofluid is:

Ferrofluids are composed of nanoscale ferromagnetic particles suspended in a carrier fluid, usually an organic solvent or water. The ferromagnetic nano-particles are coated with a surfactant to prevent their agglomeration (due to van der Waals and magnetic forces).

In English, I think that means very small metal particles are coated with oil, then those oil-coated particles are suspended in another liquid. Sort of like a thin version of artists oil paint. A ferrofluid isn’t a liquid metal, it’s a liquid with lots of very tiny pieces of metal suspended in it. Sort of like a stable mixture of iron filings and oil. Ferrofluids do not retain any magnetism.

Ferrofluids can be made at home using water based or oil based recipes. It can also be purchased online (prices seem to run $12 to $25 per ounce).

Here’s someone playing around with ferrofluid at home using a bolt (instead of precision crafted metal spirals). The first 30 seconds are still images then it switches to video. Please jump around, the results are beautiful and fascinating, but it’s ultimately just 10 minutes of someone dripping liquid onto a bolt:

As beautiful as the spikey ferrofluid demonstrations are, this video shows patterns I would never have expected to see coming from magnetic fields:

The changing patterns looking like typographic ornaments or petroglyphs or cartoon drawings of bacteria. As pointed out in the YouTube comments, the pattern-transformation at 2:04 is especially crazy.

Most of the recipes online involve some scary chemicals.* However this video deserves linking not because it makes a ferrofluid from laser toner and motor oil, but because the guy has a spoon in his drill:

Yeah the music’s horrible. I’m surprised the magnets in the drill’s motor didn’t cause the stuff to shoot off the plate.

Someone needs to find a way to turn this into a sub-$40 desk toy. Way better than a lava lamp. If anyone’s interested in organizing production of something like that, I have sketches and ideas ready to go.

* Almost all chemicals scare me. I never had much chemistry in high school, don’t have anyone to ask and the margin of error seems to involve the range of explode->not-explode or horrible-disfiguring-chemical-burns->no-reaction. As someone who tends to learn by trial and error, chemistry is an area I actively steer my curiosity away from.

February 2011 Update: This post was originally published in 2007 and hasn’t aged well. For code snippet syntax coloring, I currently use Google’s Prettify script (prettify.js). The script is dynamically inserted by jQuery if there are code elements to style.

Recently I’ve been experimenting with two very different methods of syntax coloring source code in web pages. The first method uses a Dan Webb’s CodeHighlighter JavaScript library to convert appropriately tagged content into syntax colored code. It’s necessarily simple, but easily extensible. As an example, here are the CSS rules I’m using to style CodeHighlighter’s conversions:

code.html span.comment         { color: #999;}
code.html span.tag             { color: #07f;}
code.html span.string         { color: #080;}
code.html span.attribute     { color: #07f;}
code.html span.doctype         { color: #07f;}

code.css span.comment          {color: #999;}
code.css span.keywords         {color: #fd2;}
code.css span.selectors        {color: #0b0;}
code.css span.properties    {color: #66f;}
code.css span.units            {color: #33c;}
code.css span.urls            {color: #4a0;}

code.javascript span.comment     { color: #999; }
code.javascript span.brackets     { color: #07f; }
code.javascript span.string     { color: #4a0; }
code.javascript span.keywords     { color: #07f; }
code.javascript span.exp         { color: #808; }
code.javascript span.global     { color: #06e; }

The second method uses two more fantastic TextMate features, Create HTML From Selection and Create CSS from Current Theme. What these two commands do is translate exactly what I’m seeing in TextMate into very precise and valid XHTML with accompanying CSS rules. The main disadvantage of this is the weight of the code, the above 721 bytes of CSS converts to nearly 36k of HTML and CSS rules. It’s a seriously heavy pile of span tags, but the cost is immediately outweighed by 148 very specific reasons. And that’s just bundles, there are dozens of great themes too.

Aaron Quint also deservingly gushes over these two commands.

What these do is convert exactly what I’m seeing in TextMate into very precise and valid XHTML. Here’s the same CSS as above translated by TextMate:

code.html span.comment      { color: #999;}
code.html span.tag          { color: #07f;}
code.html span.string       { color: #080;}
code.html span.attribute    { color: #07f;}
code.html span.doctype      { color: #07f;}

code.css span.comment       { color: #999;}
code.css span.keywords      { color: #fd2;} 
code.css span.selectors     { color: #0b0;} 
code.css span.properties    { color: #66f;} 
code.css span.units         { color: #33c;} 
code.css span.urls          { color: #4a0;} 

code.javascript span.comment    { color: #999;}
code.javascript span.brackets   { color: #07f;}
code.javascript span.string     { color: #4a0;}
code.javascript span.keywords   { color: #07f;}
code.javascript span.exp        { color: #808;}
code.javascript span.global     { color: #06e;}

Just for the sake of comparison, below is a screenshot of how my code looks in TextMate. It’s not a perfect translation, but it’s a very good start:

One of the purported advantages of the JavaScript method is that the source code remains unchanged. That’s sort of true, but not really. The JavaScript functions work by inserting a bunch of spans, so by the time the user sees it the main difference between JavaScript converted code and pre-processed code from TextMate is the detail (and weight) of the TextMate result. Also, any HTML would need to have entities escaped which is another step and a further degradation of the original code.

The main advantage then becomes convenience. A simple block of code doesn’t need to be run through TextMate (on the off-chance I’m writing somewhere else), it can be entered directly and tagged for styling without breaking focus.

When did Flickr change from being a place to share photos of cats into a place to find really technically exceptional photography? Rarely is there anything particularly revolutionary; lots of beautiful sunsets, dappled afternoon light, long-exposures smoothing the movement of water, fast-exposures freezing the movement of water, macro shots of flowers and urban settings evocative of lonliness. Nice pictures. But these are often quite wonderful take collectively, sometimes stunning images reflecting remarkable skill and incredible moments of luck.

Reload this page a few times to see what I mean:
Flickr: Explore interesting photos

I’ve used a My.Yahoo! page as my default home page for about a decade. There’s nothing particularly special about it, just a few news feeds, weather and stocks. Yahoo! recently started a beta redesign of the My.Yahoo system, and in the process they broke the old one. None of the content on the old page is updating now.

The new design feels clunky, but then Google’s portal thingie feels slapdash. Take your pick. Getting used to this is going to take a while, if I don’t just go roll my own with MooTools…

Poking around the new pages with FireBug (hands down the greatest browser add-on and web development tool ever, really) I found some strange stuff in the My.Yahoo page. Can someone explain why this seemingly random 1.2mb image is being sent? Feivel? Huh? As far as I could tell, it’s not random, but the query string prevents caching. The only thing I can think of is some sort of  bandwidth test.

Whatever it was, before I could publish this the image stopped being sent. Good thing I saved a copy. I guess.

This thing should totally be on a geek shirt.

If the ^ ⎋ (control-escape) shortcut isn’t working to pop open the Bundle Items Menu in TextMate, try disabling Apple Remote Desktop in System Preferences->Sharing. Having keyboard access to that menu eliminates a ton of mousing.

Sometimes I need remote access on my machine, so disabling Apple Remote Desktop is not ideal. I couldn’t find any information about what ARD is doing with that shortcut, or why ARD would need any shortcuts on a client machine. The bindings could also be changed in TextMate, but I’ve always preferred to keep application defaults for those occasions when I’m using a different machine.