ArtLung [Joe Crawford]

Web developer & user interface engineer
Tinkering with the web since 1996

email: · twitter: @artlung · (photo from instagram)
San Diego, California, USA

February, 2012: 56 posts.

Responsive with Twitter Bootstrap 2.0

Continuing my series on upgrading using Bootstrap. Bootstrap 2.0 was just released, and it has some default “responsive” features. What’s “responsive” about it? Stanford has a good definition.

Responsive web design
A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices.

Check it out in this animated GIF, or by visiting the site in a current browser and resizing the main window.

Basically by including bootstrap.min.css and bootstrap.min.responsive.css, and adding a few @media queries in my CSS, and a meta tag like: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> I get a responsive layout nearly for free from Bootstrap with their upgrade to version 2.0.

David Letterman Holding Records

David Letterman Holding Records is a tumblr (read: blog) about David Letterman holding recods.


from Instagram via InstalooterToWordPress

Morning over Poway, I think

from Instagram via InstalooterToWordPress

Maneko Neki playing Go

Firefox Tilt

This is a screenshot of a somewhat useful, great looking web development tool. It’s called Tilt and it’s an add-on for Firefox. What it does is visualize the various elements, or tags on an HTML page in a 3-D space. You can interact with it and click to see what HTML and CSS makes each component. I find it useful sometimes to help me understand what’s why on the page.

It’s overkill, but it’s very pretty.

from Instagram via InstalooterToWordPress

Xanadu !

from Instagram via InstalooterToWordPress

Non Fiction 900


In 2010, I turned 40.

I look in the mirror at the side of my head sometimes.

I see enough silver that I’m reminded of Reed Richards.

In 2010 I got an e-card that made me laugh enough I kept it around. I was scarcely blogging then though. So, here it is now.

It cracks me up. Thanks Susan.

Cleaning up hard drives. Revamping websites. Settling old issues. Making progress on a number of fronts.

For the first time in a long time I’m feeling like there’s forward progress. There’s difficulty too. There’s real stress sometimes. But there’s joy too.

So, like, that’s cool, right? Regardless, I think it is. I’m 40+, so I can make a determination about cool.

This is the 3,586th post on this blog. This is my 12th year of blogging. This is my 16th year of having a personal website. This is the 9th year of my marriage. This is the tail end of my 41st year of life. I’m expecting all these numbers to continue incrementing. I’m anticipating continuous quality improvement. I act willfully to push all this forward.

That’s it. Thanks for reading.

from Instagram via InstalooterToWordPress


Pottery, Craft and Suitability of Purpose

Via Joe Bennion, a potter who lives in Utah comes a video on YouTube. It’s a short (24 minute) film about Mike Dodd, a potter from Surrey in the UK.

You can see Mike’s handiwork on, here. On some of the individual pieces, like this one, a short video with Dodd speaking about the pot is included.

In the short both these videos, there’s an attention paid to the utility and appropriateness. And also, a secondary importance placed on symbols placed on the pieces.

Pottery is a very pure form of design, and one of the oldest human crafts. There are pottery artifacts from around twenty-five thousand years BCE according to Wikipedia. The potter’s wheel, a technology seen in the first video, is one with us since sometime between 6,000 and 4,000 BCE in Mesopotamia.

It is inspiring to see people with a love of craft work, and speak about the meaning of their work. Lately I’ve been paying closer attention to my own craft. I have a notion about my work being a vocation as opposed to simply a job. The distinction provides me with meaning–not that I am my work, but that my life is informed by a devotion to craft. I have a renewed enthusiasm for revisiting websites I’ve not thought about in a long time. I am updating them, improving them, and adding to them. I am taking time to examine my own humble craft and pushing toward a higher level of quality in my work. I examine the suitability of purpose of these websites and web applications. Do they do what they are meant to? Do they do them well? Can they be improved?

Oh, it’s Getter Poseidon!

In 1982 I drew this:

Robot Fighter, 1982

I’ve been thinking a lot about the various Jumbo Machinder I was exposed to in the Philippines. And one, with a stout body and a jetpack keeps coming back to my mind. I believe when I was 9 years old I had a vinyl toy. It’s bothered me that I never saw it again, and anytime I’d look at sites with a lot of giant robots on them I never saw him.

I always thought this robot from this was an original creation of mine. As it turns out, it’s not, really. as a matter of a fact, it appears to be a pretty close rendering of Getter Poseidon, who looks like this:

Robots with that basic format, with a head shaped like a “rolo” candy, a stocky torso, a jetpack, and tubular arms and joints is something I used to doodle a lot.

And now I know it’s Getter Poseidon. This is more interesting to me than it is to you. Ha.

Richard Gate (and jQuery)

Richard Gate is my brother-in-law. I’ve mentioned him once before.

I put together a website for him in February 2007. I think it’s a great little site that does precisely what it needs to. It introduces you to an artist’s work. I worked with him this week to provide something interesting on the main page. It’s a view of a large group of his paintings that display as you move your mouse over the browser window, or, in the case of mobile, as you move your finger over the display.

Technical Detail, for Programmers only

When I first built this site, I used PrototypeJS and Scriptaculous. In fact, it was one of my first usages of that library, and I was amazed and impressed with how it allowed me to do what at the time I called simply “DHTML” so easily. Still, the syntax was pretty ugly, and I had a large number of inline event handlers in the code. It was not a lot of fun to make changes to it because of that.

In 2010, I converted the site over to using jQuery instead, and that change has been great. The underlying HTML is now cleaner, and the attendant JavaScript is easier to read and maintain. And, when Rick wants to add something new, like a dazzling bit of animation on the main page, I can do it in just a few lines of code.

I invite you to visit and enjoy his work.

Prop 8 Decision

Yesterday Proposition 8 overturned. The complete ruling of the US 9th Circuit Court of Appeals is available as a PDF: KRISTIN PERRY V. EDMUND G. BROWN, Jr..

Any judicial decision quoting Groucho Marx, William Shakespeare, Abraham Lincoln, and Frank Sinatra is fine by me. It’s not too dry. I was a bit surprised that I can’t seem to copy and paste from it, which was a bit frustrating.

Historically I’ve been interested in this issue for a variety of reasons. Here’s some prior posts:

And I recently saw this graphic bouncing around on Facebook and tumblr, and I added it to the smorgasborg: Traditional Marriage Infographic.

I also found this analysis interesting: Proposition 8 Unconstitutional, 9th Circuit Rules: An Analysis by Ari Ezra Waldman.

Not the last we’ll hear about this topic. This feels like something that will go to the Supreme Court. We’ll see.

from Instagram via InstalooterToWordPress

Like a Bob Ross Boss

New drawing, in progress

Giant fighting robot, take 1.

First fighting giant robot I've drawn in years. In progress.

One of the things I learned on the Alice Street drawings was about the awesomeness of working non-photo blue, and then ink. Using blue as the base when I know I’m going to ink later saves me from sweating the pencils too much. It also will allow me to scan this guy and then color him down the line.

My robot anatomy and perspective are off, but it’s working for me.

Those of you paying attention may notice this guy is a Getter Poseidon derivative.

from Instagram via InstalooterToWordPress

Blustery day

C-SPAN, Joys Of

One of the things I miss most about cable television is C-SPAN. The opportunity to be exposed to thinkers, pundits, books is really incredible. Sure, a lot of dross shows up there. I always enjoyed finding an engaging intellect there. Some time ago C-SPAN started to put more archival video up: C-Span Video Library. Here’s a representative video: After Words with Thomas PM Barnett Oct 20, 2005. You can search by person. Here are videos of some of my favorite thinkers:

from Instagram via InstalooterToWordPress

Margie and coffee.

from Instagram via InstalooterToWordPress

Mickele & breakfast

from Instagram via InstalooterToWordPress

Leah at breakfast

from Instagram via InstalooterToWordPress

Me, self shot

from Instagram via InstalooterToWordPress

Matt with the bar behind.

Flash, 1997

Speaking of reclamation projects. Well, were we? Another blast from the past is in here at where you can see my Flash work from 1997. There’s even an .spl file! (.spl was the extension for FutureSplash files. .swf was the new .spl file).

UXCampDC 2011 and memory.

In January of 2011, more than a year ago now, I attended UXCampDC at the German Cultural Center, just a mile from The White House.

Me and my family were still pretty raw from my Mom’s death in October, but it was great to get out and do something.

My sister drove me to the Metro from her home in Falls Church. Remembering it now, it was as a dream. A light dusting of snow fell that morning. I got coffee at the Starbucks before the event.

I learned a lot, despite the dreaminess.

UX stands for “User Experience.” It reminds me of “QA,” another discipline in tech that is just two letters. It reminds of of QA because UX, like QA, is something that anyone building a product has to account for. You have to have “quality assuring” if you’re making a product. Likewise, any product has “user experience.” But too often, it’s an afterthought or a never-thought-of.

I met some great people, and attended some great presentations, but in the end what defines that period is the daze I was in. The grief, the confusion. Trying to be there for my Dad, trying to figure out what was next. Leah and I would decide to move back to California the next month.

Some of these I collected at the time, some I found just now.

from Instagram via InstalooterToWordPress

The Fountain

from Instagram via InstalooterToWordPress

Faux stone, damp.

Watch this: about code, creativity, creation, and principle.

Astonishing, mindblowing, and suspiciously self-evident once you see it. Brilliant.

Bret Victor – Inventing on Principle from CUSEC on Vimeo.

Follow Jeff Victor on Twitter.

from Instagram via InstalooterToWordPress

10 foot tall bear.

from Instagram via InstalooterToWordPress

Movie Bison

from Instagram via InstalooterToWordPress

Utah red.

from Instagram via InstalooterToWordPress

Thoughtful, handsome Craig.

Eleven Years And Counting

Yesterday marked eleven years I’ve been blogging here on

I’m so stunned I’m not sure what to say about it.

But, I thank you for reading, for commenting, for linking over the years. Here’s to many more years of this!

from Instagram via InstalooterToWordPress

Starting home.

from Instagram via InstalooterToWordPress

Watch the screen and listen

from Instagram via InstalooterToWordPress


from Instagram via InstalooterToWordPress

Santa Fe

from Instagram via InstalooterToWordPress

Coffee with Chris

This weekend

Father & Son Light Sabers at Sunset

Spending it with my Godson Zac, his dad my brilliant friend Chris, and Chris’ daughter Diana. There may be drawing and development.

Think of it as a family BarCamp.

Zac asked me which Star Wars character is my favorite, and I replied with this drawing, though he Zac did say the colors of the bandolier look wrong. Blue and purple should be silver and black. Valid criticism.

Zac’s a year older than I was when I did the drawing.

from Instagram via InstalooterToWordPress

@leahpeah and Diana

The Weekend in Photos

Joe & Chris at the Syd Mead "Progressions" Exhibit.

Coffee with Chris

Father & Son Light Sabers at Sunset

Oh look another robot drawing!

Why yes, I am hanging with an 8 year old, why do you ask?

Balls! (one on the right was a present TO ME)

@leahpeah and Diana

Quote of the Day

From Jesse Thorn’s Make Your Thing: 12 Point Program for Absolutely, Positively 1000% No-Fail Guaranteed Success:

You can’t afford to be too precious about your work. Caring is important, but preciousness is the opposite of making stuff. There is no room on the internet for Special Snowflakes who want to procrastinate all day and then drink themselves to sleep and dream about their unwritten novel.

←January 2012March 2012→