ArtLung [Joe Crawford]

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.

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

Sublime.

Continuing my series on upgrading joecrawford.com 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.

From November 15th, 2009. Wow a lot has happened since then.

Big Big Sale!

Whole House Sale Sat-Sun 13-14 Nov 2009 [9am-4pm]

[REDACTED], Moorpark, CA

We are selling EVERYTHING in our house this week and this weekend. EVERYTHING MUST GO

EVERYTHING MUST GO FOR PENNIES ON THE DOLLAR OF THE ORIGINAL VALUE!

We have:
     refrigerator (viblis by whirlpool – $200)
     several desks
     tall bookcases (pine, unfinished, great condition)
     shelves
     treadmill
     kids games and toys! lots of fun stuff
     misc furniture
     mattresses – several one
     decorative items of many kinds
     clothes
          medium teen boy clothes
          women’s large and plus size
     christmas
           ornaments
          misc
     ps2 game system (ps2 slim, 2 controllers, 2 guitar hero guitars, many games)
     gamecube game system (2 controllers, many games)
     vhs machine
     older console tvs super cheap
     ladder
     kitchen table + chairs
     kitchen
          appliances
          dishes (lots of nice dishes)
          silverware
          cooking pots
     art supplies
          canvases
          paper
          pens, pencils
          paint LOTS OF PAINT
     craft supplies
          fabric
          beads
          miscellaneous
     frames – $1.00 a piece
     books galore!
          art
          fiction
          science fiction
          comics
          graphic novels
          religious
          computer programming
     musical instruments

If you have questions about what we have to offer and get a feel for items and prices feel free to call [REDACTED] or send an email via craigslist!

We did sell almost everything, but we still have a lot of stuff. 1% of a lot of stuff is still a lot of stuff, as it turns out.

Also, this ended up driving us to Virginia, where, unbeknownst to us, we ended up spending the last year of my Mom’s life with my Mom and Dad. These are the kind of serendipitous acts of Grace and what you might call divine intervention that have acted in our lives in the past few years. It’s quite a run.

Yesterday we spent the day with Tony, who’s in the midst of some staggering decisions. Rock on Tony!

Google Latitude has a record of the datapoints of where we were. Which is alternately cool and frightening and also cool.

I spent some time reworking a page I’ve had hidden, or at least deemphasized for about 5 years.

The page is the one I named Smorgasborg in 1988. It has been my “entertaining, silly and educational junk drawer” ever since then.

I remember a time when things on the web seemed to have shorter lives, and some of what’s there are things that I thought were cool and I felt should have permanent homes.

Some of it is stuff I made but I didn’t have a rational place to put. A macaroni salad recipe, for example does not belong in a resume or portfolio.

So I invite you, now, to visit the smorgasborg. New items include the Roman Numerals 0 to MMMMMMMMMM and IT OKAY, DON’T BE CRY.

Like I said: silly.

Lawrence Lessig interviews Jack Abramoff.

via John Lilly who notes: “Wow”

It’s been a banner week for development for me. Tonight I just learned about how to add a fancy banner to a WordPress plugin page, and lickity split I made one.

Check it out on the Open Graph Protocol Tools plugin page.

Here’s what it looks like in context:

How do I make one of those cool banners for my plugin page?
Start by creating an “assets” directory in the root of your SVN checkout. This will be on the same level as /tags and /trunk, for example.

Inside that assets directory, you can make a file named “banner-772x250.png” or “banner-772x250.jpg“. The image must be exactly 772 pixels wide and 250 pixels tall. No GIFs.

Previously.

Back in 2010 I mentioned presenting on ArtLung Rosetta. Well, the thing I wanted to do back then, I have finally done, and that’s add AJAX examples for all the libraries.

So, for example, here’s loading a chunk of HTML into a certain div from a link click in the different libraries:

dojo

	dojo.connect(dojo.byId('ajaxloadHtml'), 'onclick', function(e){
		dojo.xhrGet({
			url : "ajax/chunk.html",
			handleAs : "text",
			load : function(response, ioArgs) {
				dojo.byId('ajaxOutput').innerHTML = response;
				return;
			}
		});
		dojo.stopEvent(e);
	});

Ext Core

	Ext.get('ajaxloadHtml').on('click', function(e, target){
		var url = 'ajax/chunk.html';
		Ext.Ajax.request({
			url : url,
			method: 'GET',
			success: function ( result, request ) {
				Ext.get('ajaxOutput').dom.innerHTML = result.responseText;
			}
		});

	}, null, {preventDefault:true});

Glow

	glow.events.addListener('#ajaxloadHtml', 'click', function(){

		var url = 'ajax/chunk.html';
		var opts = {
			onLoad: function(data){
				glow.dom.get('#ajaxOutput').html(data.text());
			}
		};
		glow.net.get(url, opts);
		return false;
	});

jQuery

	$('#ajaxloadHtml').bind('click', function(){
		$.get('ajax/chunk.html',null, function(data){
			$('#ajaxOutput').html(data);
		});
		return false;
	});

MooTools

	$('ajaxloadHtml').addEvent('click', function(e){
		var url = 'ajax/chunk.html';
		$('ajaxOutput').load(url);
		e.stop();
	});

Prototype

	$('ajaxloadHtml').observe('click', function(evt){
		var url = 'ajax/chunk.html';
		new Ajax.Request(url, {
		  method: 'get',
		  onSuccess: function(transport) {
		  	$('ajaxOutput').update(transport.responseText);
		  }
		});
		Event.stop(evt);
	});

You can fork the project on GitHub if you are so inclined.

One thing I’ve really come to enjoy is the process of wireframing. Wireframing is low-fi design for a digital product. I do it for websites and apps. It’s a lot of fun. The tool I generally use is Balsamiq Mockups, which runs on Mac or Windows.

I’m doing some housekeeping, so here’s a wireframe from the Hello Lonesome website, from back in 2010.

It was a great way to come to quick agreement on what was actually to be built. In this case we built a WordPress theme to support this design and allow the Director/Writer/Producer of Hello Lonesome, Adam Reid, to manage the site himself. He also wanted to make sure the trailer was front and center, and that opening other content pages didn’t interfere with the trailer. That’s pretty much how it ended up, with a few minor exceptions in the case of much heavier pages.

William Holden is a soldier
and Nixon will not send him home
with every card game he gets older
so when on leave he needs to roam
don’t judge him by his desires
the puppet wires
are strong
oh

William Holden is a BART rider
bound for Hong Kong or Seoul
William Holden holds a token
and asks
“Does this plane flow to tokyo?”
in his nightmare she’s a vampire,
and an empire,
and a song oh
but when he wakes up
there ain’t no Suzy Wong
no
there ain’t no Suzy Wong

William Holden is a brush fire
and only ghosts will walk him home
and in his horror movie quagmire
the truth got stripped right to the bone
he never was much of a listener
he needs a prisoner
to go with his war
oh
so come along
on the search for Suzy Wong
there ain’t no Suzy Wong
no

Hans moved back to live in Hamburg
he bought a wife,
didn’t you know?
she does the unthinkable absurd
she nails him to a pedestal
in his nightmare free of feeling
he is kneeling
at her throne
and she holds a cold revolver,
a problem solver,
her chaperone
and you and know this is not right
but after midnight
your halo’s gone
one suitcase into the street hurled
and half of his world
is still Viet Cong
oh, don’t you sing along

there ain’t no Suzy Wong
no
there ain’t no Suzy Wong
no
there ain’t no Suzy Wong

from the new Making It. Buy it on Amazon MP3 or iTunes

The Chumby (Chumby Classic, Pearl Edition) is not really for work, but it should provide some entertainment for my co-workers. Which you may recall (unlikely, really) I won back in June 2008 at the L.A. Flash Users Group.

Yesterday I modified my site joecrawford.com.

I purchased the domain in 1999 thinking that it would be important to have a more “professional” domain than “artlung.” I go back and forth about the utility of that.

Back in 2011 sometime, I decided to remove most of the ways to contact me, and remove the self promotional aspects, and left a cryptic, and to my eye now ugly SVG file. It looked like this:

Before that, it looked like this, not really much better:

When I first bought the domain in 1999, I was attempting, poorly, for a k10k look. This didn’t last long.

Enough with the history lesson. When my Mom died I think I didn’t have a lot of stomach for self-promotion or trying to reach out to people. I was a mess. Still am, a bit, in some ways.

But I’m enjoying the craft of web development these days. I like to make websites. I like changing them. I like using the new and excellent tools we now have available. Twitter Bootstrap–I just call it Bootstrap–is an incredible tool that does a great deal with a very small filesize footprint. It does a rational CSS reset, provides a set of “magic classnames” that you can use to get a very quick and smart layout. I really like it so far. So here’s what joecrawford.com looks like now:

It’s very plain, and does not vary from the default Bootstrap colors. But it plants a flag about what I am doing and what I’m about. I’m not sure it does everything I want. I’m not sure about everything I need it to do. It doesn’t mention my current employer or link to my resume. But it mentions the networks I’m part of and how you might try to reach me.

So why don’t I colophon you a bit? I’m using HTML5, fairly plain CSS, Google Web Fonts (that one’s Michroma, which looks like the old Microgramma). I’m using the default .container class so it’s 960 pixels wide and centered. I’m also using Magpie RSS under the hood to pull in my last 20 public flickr photos (which also pulls in my Instagram photos) flickr’s API. That means it should update regularly as I do more photos with Instagram. That uses the .media-grid of Bootstrap. What else? I think that’s it.

Thanks for reading, all ten of you.

What is tumblr?