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.

I just deleted most of my bookmarks.

I’ve been meaning to do that for a while, mostly because I barely ever use 99% of them, but they’re also something people notice when using someone else’s computer. I didn’t have anything embarrassing , but there were a lot of really dated links and general clutter. Most of the time I just hit Google first anyway.

Some notables:

• News folder containing 62 bookmarks to various newspapers and tv news stations. Totally obsoleted by the rise of blogs and RSS.
• All sorts of little JavaScript bookmarklet scraps with various incredibly descriptive names like “js”, “yt”, “break google”, “test”, “script inject”, etc.
• A link to a wonderful Ruby tutorial I read several years ago, now a book.
• Instructions for applying gzip compression to all pages of a site with php and htaccess. Used once last summer, reduced Ben’s bandwidth usage by 80%.
• A link to Everything2, which was a lot of fun in the pre-Wikipedia 90s but I hadn’t visited since sometime in early 2001.
• Links (several defunct) to indexes of Logical Fallacies, from back when I wasted time arguing on the Internet.
• I’m keeping the blogs folder for now. I would really like to go through that and see what I used to read, who I remember and what I now find appalling. There’s 61 blogs in there, I’m really only checking a small handful these days and generally just type their urls directly.

Update: it took a few days to get used to where the stuff I kept was. This stuff had been there so long that I was just clicking the middle of the bookmark bar out of habit, a week later it’s still throwing me off to have different words up there.

So apparently the NYC Department of Health has shut down Blue 9 Burger. Too bad, they’d only just turned that place around.

I used to like the burger there as a late-night option, a sort of California ex-pat drive-thru reminiscence. However I stopped going a few years ago. Declining food quality wasn’t the main reason, it was an insultingly stupid staff. The miscreants they had working there were just horrible, I decided that any place willing to hire morons like that wasn’t getting my money and deserved to go out of business.

This January, for some reason (coincidentally the four year anniversary of my first visit), I decided to give them another try. Amazingly, they’d fired everyone and hired a completely new crew with a decent work-ethic. The quality of the food was as good or better than when they first opened.

The place was never especially clean, but I’ve seen far worse and gotten sick at far better. More amazing though, that the Dept of Health has all this information online now. Bloomberg’s New York is all about transparency.

Found via East Village Idiot.

Update: Blue 9 was back open after about a week. The burger I had the other night was again better than they’ve made in several years. No discernible differences I saw in the kitchen or anywhere else except the new juicer they got from this omega vrt350 review.

A great quote I recently stumbled across but I need to keep reminding myself of:

“Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.”

—Brian Kernighan

Another fantastic quote attributed to Mr. Kernighan that applies to making most anything:

“Controlling complexity is the essence of computer programming.”

Many other useful insights here: Basics of the Unix Philosophy Scroll down to the rules and extend these beyond just Unix or programming.

Since this was all rooted in Unix, here’s a document I wish I’d read before first wading into the OS X terminal way back when: Learn UNIX in 10 minutes.