At the San Francisco WordCamp today I got to see Richard Stallman give his free software talk and then perform his crowd-pleasing St. IGNUcius bit. I don’t usually do this, but afterwards I stuck around so I could get my picture taken with him.

Source: iFixit.com: iPad Teardown

I found this photo to be unexpectedly beautiful. Without any context, it seems to be an art piece, a reaction against consumerism, the curtains pulled back on the Wizard of Oz. It’s none of the above intentionally, and yet the more I thought about it, the more I realized how nicely it encapsulates several themes in tension.

First is the irony that someone, somewhere (presumably on the other side of the world) painstakingly put together this piece of groundbreaking technology, only so that someone, somewhere on this side of the world could take it apart.

Second, for a device heralded as the second-coming of top-down/canned/mainstream media, to see its “unraveling” exhibited on a niche site that exists solely to take hardware apart and show you what’s inside, is something that’s hard to imagine without the decentralized, user-generated, distributed nature of the web.

Third, it’s amusing how the act of disassembling something powerful (almost magical), in a way emasculates it, knocking it from a pedestal its creator works so hard to preserve.

I’m not embarrassed to say that these are the vi commands that I’ve been getting by on forever. In the order that I learned them. Thus they are probably a fair representation of the bare minimum one needs to know to survive in the wild and woolly world of vi.

Anyway, I just learned three more at work this week.

That should hold me for what, another 10 years?

With the impending completion of the HTML5 spec, I thought I’d summarize the major differences between XHTML and HTML5 that affect me the most in my daily blogging and web development. Figured this might be useful to others.

Void elements (those that cannot contain text or other elements, and thus don’t require an end tag) don’t need to be closed with a nitpicky trailing slash (see: There are only 10 legal XHTML empty tags for more)

<br> is ok!
<img src="image.jpg" alt="image"> is ok!

Unquoted attribute-values are ok (if the value doesn’t contain spaces)

<input type=checkbox> is ok!

Empty attributes (those that don’t require a value) don’t need values

<input type=checkbox checked> is ok!

The acronym element is now obsolete, use abbr instead (which is conveniently 3 characters shorter)

<abbr title="hypertext markup language">HTML</abbr>

Viva HTML!

It’s hard for me to believe that in the not so distant past I worked as a web producer for O’Reilly’s now defunct Online Publishing Group. Basically I was a sort of HTML jockey, shuttling articles through their content management system while ensuring that they all had consistent markup.

Since the articles O’Reilly published online dealt predominantly with programming, the vast majority contained code snippets and samples. Thus one of my primary roles was to ensure that the embedded code displayed properly on the web. Our HTML “style guide” dictated that all code be wrapped in <pre><code></code></pre> tags. I remember at the time thinking it a bit redundant—I occasionally embed code on my blog, but for simplicity’s sake, I use <pre> alone.

I discovered today another value to the semantic use of HTML: machine translation. I was looking through my referrer logs, and noticed someone had translated one of my posts with code samples. And sure enough, Google translated everything within the <pre> tags, mangling the code. Gah!

This made me think all the way back to my O’Reilly days, and I wondered what Google would do if I also wrapped the code block in <code> tags. Sure enough, they respected the semantic “intent” of the <code> tag and left it untranslated—BUT they also stripped out the newlines, collapsing multiple lines of code to a single line. So if anyone from the Google Translate team is reading, consider this a bug report.

Before Google Translate

After Google Translate

Note: Apparently Google will also avoid translating tags with class="notranslate".

Stephanie’s brand new ThinkPad X100e arrived today, so I got to have some fun tonight and set up Ubuntu on it for her.

Installation via memory key

This was the first time I’d installed Ubuntu via memory key. Means I might not need my portable CD-ROM drive anymore…

1. Downloaded the latest Ubuntu AMD64 Desktop ISO using BitTorrent
2. Ran usb-creator to copy the ISO to my 2GB USB memory key (based on these instructions: Installation From USB Stick)
3. Got the “DBus error” like the instructions anticipated, so ran the following command to format my memory key:

   sudo mkfs -t vfat /dev/sdb1

4. Then I reran usb-creator
5. Plugged the memory key into the X100e, booted it up, and installed Ubuntu

Getting wireless to work

Of course, bane of Linux, wireless didn’t work out of the box. This tends to be expected with brand new hardware, and it took me a while to piece together the right steps to get it working.

1. Basically run exactly these commands (even sudo su):

   sudo apt-get install build-essential
   wget http://launchpadlibrarian.net/34090404/rtl8192se_linux_2.6.0010.1012.2009_64bit.tar.gz
   sudo tar -xvzf rtl8192se_linux_2.6.0010.1012.2009_64bit.tar.gz
   cd rtl8192se_linux_2.6.0010.1020.2009_64bit
   sudo su
   make
   make install

2. Then reboot and you have wireless

Note: If you run the Update Manager and it contains a new Linux kernel, you’ll need to rerun make install in ~/rtl8192se_linux_2.6.0010.1020.2009_64bit to reinstall the wireless drivers. So don’t get rid of the rtl8192se… directory. Hopefully this will cease to be a problem in the next release of Ubuntu.

Getting the TrackPoint scroll button to work

Apparently xorg.conf is a thing of the past, which kind of obsoletes my previous TrackPoint “scroll button” instructions. Oh well. This is how you do it now.

1. Install and run gpointing-device-settings

   sudo apt-get install gpointing-device-settings
   gpointing-device-settings

2. Select TPPS/2 IBM TrackPoint on the left
3. Check “Use wheel emulation”
4. Select button #2

Getting the headphone jack to work

I didn’t realize this was a problem at first, but thanks to all the comments, folks got to the bottom of the issue. This is what worked for me.

1. Edit /etc/modprobe.d/alsa-base.conf

   sudo gedit /etc/modprobe.d/alsa-base.conf

2. Add the following two lines at the end of the file:

   options snd-hda-intel model=lenovo-101e
   options snd-hda-intel position_fix=1 enable=yes

3. Restart the computer

Turns out jQuery has the handy has selector for just this case.

Here’s a simple example that sets the title attribute of every <a> tag that contains an <img> tag and then attaches Fancybox, a lightbox-esque, image-enlargement plugin:

$("a:has(img)").attr("title", "Click to enlarge").fancybox();

I liked this approach because it meant I didn’t have to remember to add a class (e.g. class="fancybox") to every <a> tag that linked to an image I wanted to enlarge. In fact, I didn’t have to do anything special at all. Brilliant!

And then I realized I had a problem. In a few instances on my blog, I used an image (like a Firefox or Ubuntu logo) to link to an external website. Even though a:has(img) was awesome in its expressive simplicity, it turned out to be a little overzealous in those instances.

What I really wanted was something slightly more specific: the ability to attach Fancybox to <a> tags that only linked to images. But how could I determine if I was linking to an image or not? How about by the file extension.

So I used the “attribute ends with” selector combined with the multiple selector to apply Fancybox to only those <a> tags that have href attributes that end with .jpg, .png, or .gif:

$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr("title", "Click to enlarge").fancybox();

This had the added bonus of enabling Fancybox on the occasional bit of text I’d used to link directly to an image.

What do you think, good idea or bad idea?

<?php

class SomeClass
{
  public function __call($name, $args)
  {
    if (isset($args[0])) {
      $this->$name = $args[0];
      return;
    }

    return $this->$name;
  }
}

Thus you can do:

$user->first_name("justin");

Or:

print $user->first_name();

Kind of reminds me of that song.

All things technology. Very popular here on Justinsomnia.

Some Popular Posts

• Ubuntu on a Lenovo ThinkPad X100e
• how to count unique records with sql
• Essential Database Naming Conventions (and Style)
• How to regularly backup Windows XP to Ubuntu, using rsync
• Random Image Plugin for WordPress