After a few months of sorting through my photographs — and a fair bit of editing — I have completed the slow migration from arcade.withoutnations.com to my account at Flickr. There are a few reasons I felt this was necessary:

1. Gallery is a wonderful, robust open-source platform for hosting and sharing photographs on a personal website. Unfortunately, the larger the database gets the slower it runs. The interface, while infinitely customizable, isn’t particularly user-friendly (an aside: the beta for 3.0 looks very promising, and I would encourage others to give it a try). Flickr exists to host and transfer tremendous amounts of data to users quickly.
2. The social networking aspects of Flickr are unparalleled and steadily growing. Flickr can be seamlessly woven into dozens of applications and services — and where a gap exists, an API sits ready.
3. The community at Flickr. As I connect with others and add contacts, I am committing myself to a community that encourages sharing and networking. Hosted here, I am only responsible to myself. Two years passed as I delayed uploading photos from my trips to Europe. With a firm deadline and the knowledge that people will be actively viewing new images, I pushed through and finally finished what I started.
4. A simple, transparent method for implementing Creative Commons licensing.

The first attempt at integration with this site will be via the Flickr Gallery plugin by Dan Coulter. There seems to be quite a few options out of the box, but it also looks to have excellent support for the Flickr API search method, which allows for a great deal of flexibility.

The existing albums at arcade will remain live indefinitely. I was less selective when posting photos to Gallery, so there may be value in the additional images that haven’t been migrated.

Pigeon from Mark Mitchell on Vimeo.

July-August 2009: Digg considers dropping IE6 support, YouTube begins phasing it out

15 January 2010: Microsoft admits the attacks on Google’s system by Chinese hackers permitted by a flaw in Internet Explorer

16 January 2010: The German government issues a strong recommendation for users to upgrade or switch browsers

18 January 2010: A government agency in France responsible for cyber security restates Germany’s assertion

1 March 2010: Google will begin phasing out IE6 support for Docs and Sites

end of year 2010: Google will begin phasing out IE6 support for GMail and GCal

Next, Dylan’s “Ballad of a Thin Man” from Highway 61 Revisited. What followed? The same, from Before the Flood. As I considered the odds of two repeating versions of two different songs, I’m hit with the live performance included on Bootleg Series Vol. 7.

Uninspired music library — highly intelligent algorithm — random chance?

Panasonic produced a line of road bicycles in the mid to late 1980s. The bike I used to commute to work over the last two years was, specifically, the Panasonic Sport 500. A cursory internet search will tell you that a 10 speed model was released in 1985, built on a steel frame with high tensile 1020 tubes and fork.

It was — it is — a great bike. I customized it quite a bit, but the fact remains that it had a strong frame, decent brakes and reliable tires. Ideal for the fifteen mile commute each day. It got me safely through a 45-mile bike tour (in unrelenting, ferocious rain). I was forced to leave it in storage in the states when I made the move to the UK (a bit too large to fit in the suitcase). I revisited it recently, this is a sort of homage.

For a recent project I had the task of applying one consistent button style to form inputs, anchor tags, and a handful of paragraph tags — with varying widths and background colors. Taking a cue from the brilliant work already posted on the Filament Group (which is derivative of the ALA sliding doors method and the work of Kevin Hale at Particletree), I developed a class that is applicable across a variety of elements. The examples given were generally applied to the button element; my project called for standard inputs with type ‘submit’. The class scope is left open to allow for easier application to non-form elements. A few instances:

<a href="#" class="input-btn-link"><span>Add to Favorites</span></a>
<a href="#" class="input-btn-link small"><span>Add to Favorites</span></a>
<input class="input-btn" type="submit" value="Add to Favorites" />
<input class="input-btn small" type="submit" value="Add to Favorites" />
<input class="input-btn medium" type="submit" value="Add to Favorites" />
<input class="input-btn large" type="submit" value="Add to Favorites" />
<p class="input-btn">Add to Favorites/p>

The complete class with options for different widths and background images. A rollover state stored within the background image and accessed through negative padding would be a simple addition (see the Filament Group post). The class works in Firefox 2+, Safari 3+, Google Chrome, and Internet Explorer 6/7/8.

Example images:

input-btn.png

input-btn-link.png

input-btn_small.png

CSS:

/*---------------------------------
input type=submit, <p> etc
---------------------------------*/
/* basic class */
.input-btn {
	margin: 0;
	padding: 0;
	float: right; /* either float or display: block */
	color: #FFF;
	font-size: 1em;
	border: none;
	cursor: pointer;
	overflow: visible;
	background: transparent url(input-btn.png) no-repeat 0 0;
	height: 25px;
	text-align: center;
	width: 265px;
	/* Firefox on the PC may need font-family redefined: */
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
input::-moz-focus-inner {
	border: none;
	}
input.input-btn:hover {text-decoration: underline;}

/* + different widths */
.input-btn.small {
	background: #FFF url(input-btn_small.png) no-repeat 0 0;
	width: 100px;
	}
.input-btn.medium {
	background: #FFF url(input-btn_medium.png) no-repeat 0 0;
	width: 150px;
	}
.input-btn.large {
	background: #FFF url(input-btn_large.png) no-repeat 0 0;
	width: 185px;
	}

The same style applied to an anchor tag, very flexible with width. Requires /span/ or similar.

/*---------------------------------
a: span
---------------------------------*/

a.input-btn-link {
	margin: 0;
	padding: 0 15px 0 0;
	display: block;
	text-align: center;
	width: 170px;
	background: transparent url(input-btn-link.png) no-repeat right -40px;
	text-decoration: none;
	}
a.input-btn-link span {
	display: block;
	margin: 0;
	padding: 5px 0 5px 12px;
	height: 15px;
	color: #FFF;
	background: transparent url(input-btn-link.png) no-repeat top left;
	font-size: 1em;
	line-height: 1.3em;
	white-space: nowrap;
	}
a.input-btn-link span:hover {text-decoration: underline;}

/* custom width */
a.input-btn-link.small {width: 100px;}
a.input-btn-link.large {width: 250px;}

Guy Fawkes Day from Mark Mitchell on Vimeo.