Manual for Singer 221K Featherweight

Ah the internet, what a wonderful thing. Here's the owner's manual for my mom's old Singer (photo on Flickr).

Search and Rescue - New York Times

Tim O'Reilley's response to the Google Print lawsuite.

Skidoo : Ruthsarian Layouts

3 columns, each of equal height regardless of the height of their contents, a header, a footer, and background colors of the columns not created using background images. Ingenious! The trick? Short version: the sidebar backgrounds are actually the borders of a wrapper. Clever negative margins pull everything together.

Essential for Serenity

With the movie finally making its public release this week it's time to do a little last-minute browncoat recruitment. Having seen the movie 9 months ago, Cybil and I are lending out the DVDs with a list of "must watch" episodes for those few friends who aren't properly prepared for the movie. Not that I think you need to watch the show to see the movie, but I'm in no position to judge, having watched and re-watched it many times.

So here is our attempt at a required viewing list:

Pilot: Serenity Part 1 & 2

A proper introduction. Once you've seen this, you're hooked.

Bushwhacked

Fear of Reavers: important for the movie.

Our Mrs. Reynolds

This one actually isn't that critical to the overarching story line, but it's the one that we always go, "oh, that quote is from this episode too?" while we're watching it.

Out of Gas

Great back-story. Plus it's got my favorite plot structure.

Ariel

River's story progresses, and the Tams vrs. Jayne conflict becomes very immediate.

Objects in Space

OK, so there's a new bounty hunter in the movie, but this episode's important because it cements the relationship between River and Serenity. And for other reasons, but no spoilers here, right?

There are a couple more that episodes that really wanted to squeeze their way up into the "must see", but we figured letting Our Mrs. Reynolds slide into the otherwise movie-centric list was enough.

Shindig

An exploration into Mal's off-beat sense of honor (*cough* chaotic-good), and his relationship with Inara.

Jaynestown

This episode has my favorite quote about a "special hell". Jayne's character grows a bit, and we see what life is really like under the Alliance.

What to you guys think? Are there any other episodes that are essential pre-movie watching, given that the movie is, to quote Joss, "Mal's story told through River's perspective," and is about the origin of the Reavers? Any that could be taken out?

CSS Maintainability

In response to Simon Wilson's post on CSS Maintainability…

My old partner in crime over here at work, in the ebusiness team where we build web applications, once posted a little something on this subject here @ mezzoblue where he suggests pulling out all the structural CSS that forms the layout of the page and placing it at the top of the document, using indentation to echo the nesting of the HTML.

In my own more recent work I have been doing something like this:

/* General Style - Tags */
body {...}
h1 {...}
p {...}

/* Layout - IDs */
#header {...}
#content {...}
#sidebar {...}
#footer {...}

/* Reusable Components - Classes */
table.columnarForm {...}
table.data {...}
label.error {...}

One item of note: we have found that as stylesheets become larger it is necessary to forsake the old practice of putting properties each on their own line, like this:

body {
   margin: 0;
   padding: 0;
   font: 86% Georgia, Times, serif;
}

and instead pulling them all onto one line so that it is possible to find a given rule, and see the structure of the CSS file at a glance, like this:

p { position: static; margin: 0 0 1em 0; color: #000; background-color: #fff; font-size: 1em; }

But in order to read these long lines of properties it is then necessary to put them in a consistent order. The order that I have been using is in de-bugging priority: position, layout, color, and typography (as shown above).

South West Shropshire Tourist Information

Bishop's Castle, Clun.

The Lawsuit vs. Google Print for Libraries

Publishers and authors forsake their place in the digital future by thwarting Google Print for Libraries. But that doesn't mean that, like the music labels, they won't spend the next few years blazing a noisy path of self-destruction.

Can anyone tell me what the hell the difference is between this (print.google.com) and Amazon's "Search Inside" is? I've used both on exactly the same book and got exactly the same results. Must be that Amazon's is opt-in, while Google's is opt-out. But who the hell doesn't opt-in for Amazon?

Regardless of the outcome of this lawsuite and others, as iTunes will destroy the existing music distributers, so will emerging technologies destroy the existing publishing industry, whether they like it or not. And frankly, I'll be glad to see them go.

CLEAN JOKES FOR SLIGHTLY TWISTED MINDS

joke collection that Mark put together.

Communicating error messages accessibly - Standards-schmandards

The error message system that I have implimented at work is close, but not all the way there. I left out the header, just went with the list, and haven't implimented any form of setting focus on the field (whether it be via javascript on an anchor or a label tag). The jaws user who commented suggested firing a javascript alert as well, but that's just so rude I'm not sure if the benefit to disabled users outways the harm to the user experience for everyone else. Also from the comments, here's some sample friendly error text:

We were unable to process your form. Some information was either missing or not understood.

Please check the following, and submit the form again:

• The Name field can not be empty. Please enter your name.
• The Age field can not be empty. Please enter your age in years.

Netflix Survey Reveals Hugh Jackman as Members' Choice to Become the Next James Bond

This could only be because the people surveyed don't know who Clive Owen is. Because if they'd seen him in a single movie they would know he fits the part. And Hugh Jackman clearly does not fit the role. At all. People are stupid.

MilkandCookies - Crazy Ping Pong Match

Two tournament players get more caught up in keeping the ball alive than actually winning.

Indeed. At some point it moves beyond competition and becomes just about the game.

JRX: real-time JavaScript RegExp evaluator - cuneytyilmaz.com

I've been using the jakarta demo applet, but this is fun in that it shows you the results. That and it's not a bloody java applet.

Styles were a bit tweaked first time I loaded it (specifically the text of the regexp being outside of the input box and uneditable), but it cleared up with a refresh

RSS Feed // ShaunInman.com

This is surely old news, but how excellent is the fine-grained customization of this feed?!

Typetester – Compare fonts for the screen

I am totally going to use this to help pick the type face for my re-design. Recommendation: copy some real text from your blog into the sample text. There's a big difference between looking at text and reading text. Concern: being a 3-column fixed-width layout set at 1024 pixels wide the line length is shorter than that used in the majority of websites. Line length has an integral relationship with leading (line height) and font size. Being able to control only 2 out of 3 of these variables is rather limiting*. In fact, the more I think about it the more I'm not sure that this tool will be helpful since the words-per-line count only becomes reasonable at <=11px, which is just too small for a broad audience. Ohwell, I think it will still be useful for my new site layout, as it is 4 columns wide in places, so the short line length does apply.

*yes, it's true that if you're desiging a fluid width layout you will never have control over the line length (aside from setting min/max width), but what you can do is anticipate a likely range of widths at typical screen resolutions and typical window widths. And to those running full screen at 1600*1200+, fucking grow up! If you run full screen in applications other than design/dev environments then you don't deserve that big monitor. Go on to Craigslist right now and trade it with someone who can't afford a bigger monitor, but would use one appropriately if they had one.

Personal Site Redesign

It's that time again. The last was two years ago. The final straw (aside from Josh, Jeff, Jon and Doug all working on their sites) was Josh's Flickr badge. I've just gotta have one of those. But for that I'd need a mult-column layout. And so a redesign began.

What my personal site has always lacked is a home page that highlights the depth of content. Sure there are a bunch of links is my nav, but they're all hidden in the "drop-up" menu. I've been doing some thinking, and I came up with a way to pull together multiple Blogger homepages into one page. I've made some progress in my understanding of how to build flexible multi-column pages. That all came together the other night, first on paper, then in HTML, and finally with this crazy multi-column layout.

Of course it looks completely insane with background colors ranging from #000 to #fff. The actual design will be fairly monochrome (thinking of borrowing the color scheme from this photo of a person hiking). It will be a big change from the current site's garishness. Also note: the H2s (Words, Play, Hyperlinks) are going to be image replaced with low-contrast decorative text.

Ok, that's all for now, I've got a number of other projects going.

Solution to the Liquid Layout Gutter Dilemma

Here's the problem: you've got a CSS layout, you are a "true believer" that websites should be flexible, but you're not sure how to get the padding into those columns—since width only counts the content, padding would make the layout more than 100% wide. (sometimes I'm not sure if the W3C got it right).

I've always thought there were just these two solutions:

1. Nest an extra "gutter" div and add your margins to that (which is what Dan does in Bulletproof Web Design). But then you're adding extra markup for presentational purposes (and doesn't that "nesting extra" just bring you back to the bad-old-days?)
2. Add margins to every single element within the column, which is what I've been doing until now. But it's really hard to anticipate every single potential element (trust me, I've tried).

After reading Dan's book and pondering this dilemma, that phrase "every single element" finally rang a bell; we have a selector that does exactly that! Here's the first part of the solution:

#sidebar * { margin: 1em 20px; }

That gives us 1em vertical margins (arbitrarily chosen) and 20px horizontal margins (those "gutters" that we're shooting for) on every paragraph, list, etc. within the container of id "sidebar". But we don't want the children of those elements to also have those margins (every link inside a paragraph, yuck!), so we add this rule:

#sidebar * * { margin: auto; }

which translates roughly into, "every element in the sidebar that's nested inside another element that's also in the sidebar, go figure out your own margins."

Here's the solution demo.

Listal - A social DVD, book, music and games collection manager

This here beta application puts my del.icio.us DVD List and this little database that I wrote for Cybil to keep track of all her books to shame. Once it's got reasonable import capability i may just have to move everything over.

Powazek: Just a Thought: Digging in the Dirt

positively refreshing to see something totally new in the realm of website design. only on a personal site could you get away with such delightfully burried navigation. the colors and textured details are spot on too.

Selenium

a javascript based test tool. not that we need it at work, QA here does a great job here, but i'll give this a whirl for my next side project, a book trade that may well have many more users than it has in the past. via jeff.

some code from josh that helps find elements that don't have id's:

xpath=//input[@value='Save Project Profile']

VisitBritain

totally getting one of those Great British Heritage Passes. it's gonna be one hell of a british countryside castle tour vacations!

VisitBritain : Britain's garden mazes

Planning our trip. Have the travel bug. Want to go now.

RailsPlayground.com Free Ruby On Rails Hosting

I was chatting with Josh the other day about our prototyping process at work, lamenting that forms and tables are more trouble than they're worth to prototype in photoshop and that I was thinking of just jumping straight to HTML on the next project*. He said, why stop there, let's just prototype in ruby on rails and build actual working forms for people to play with. This makes a lot of sense, to acknowledge that the first version is going to be a throwaway anyway, and just build something that is guaranteed to be tossed out (since the production version will be on webwork).

I've got a side project coming up, a book trade that's run prior to a conference in March, but I've already coded it before (in ColdFusion of all improbable languages), so I'm not all that excited about building it again. I'm more interested in front-end stuff, recoding the back-end of something in another language doesn't sound that thrilling. Unless it was to learn a whole new environment that could have practical work application. So I've signed up for my free account. Now I need to get a local dev environment setup on my laptop. Josh…

*I did jump straight to HTML on the project I'm working on now, but I'm finding that once the foundation is set I have to pull a screenshot into photoshop to adjust the colors and decorations (and it still has a little ways to go). But it does save a whole lot of time.

The Elements of Typographic Style Applied to the Web | Bloglines | Preview Feed

Google Alerts are really cool sometimes. Here is further evidence of this project that I caught wind of earlier. The staging address for the project appears to be http://webtype.clearleft.com/. The preview feed does not appear on the website, at least not linked from anywhere yet. The posts themselves have titles corrisponding to on of the appendixes in the book (which sits right here on my desk next to me) which summerizes each section of each chapter. I am curious to see how much of this project will be original content and how much will be a plug for the book. I am hoping for the former, and that Bringhurst himself might be involved. Regardless, it is clearly time to read the book again.

JavaScript Text Highlighting

Between the two, Google and MSN probably comprise about 80% of all search engine traffic, and that's being pessamistic. Basically, people either use the search engine that ships with their operating system, or they get a fucking clue and use Google. Anyway, the reason I point this out is that they both use the variable "q" in the query string, and this here text highlighting function is set up to read that variable.

Now if I were to add this feature to I site I'd be a little more subtle/devious about it. Instead of aweful yellow highlighting I'd do something like make the text bold, or maybe increase the contrast a little. My aim would be to make the visitor's keywords more obvious without screaming, "hey, look here, I know what you're searching for!"

css Zen Garden Archives

The Zen Garden archives have at long last been overhauled with kick-ass thumbnails! And the Category Index is very also thorough, with broad categories like Official and Conceptual, specific categories like Blue and Food, layout structure categories like 3 Column, and abstract categories like Sinester. It's so easy to browse now, I'm finding cool designs I've never seen. Check out Killer Style (using Firefox of course, don't bother if you're using Internet Explorer)

Negative Margins: the other way around

cool take on a 3 column floating layout. the next version of my personal site (in very early conceptual stages at the moment) is probably going to be 4 columns (blog, link log, mtg blog and a flickr). i've got a scheme for a way to combine multiple blogger main pages into one page, while retaining independent archives (and not using frames of course). testing out the scheme on some defunct side-project blogs.

Update: while tracking down the appropriate template tags to pull off seperate HTML for the main page than the archives i found a blogger help page on including multiple blogs in a single page. so it can be done, and exactly how i was plannig on doing it, just need to work out out maintaining seperate archives, and then of course there's the minor problem of the design and CSS for a 4 column layout.

Whatever: Being Poor

I've been asking, "why didn't they evacuate?" but this puts things into perspective. My mom was on welfare when we were kids so we ate government cheese and collected bottles for redemption to have an allowance, but reading these draws a distinction for me between just being poor and living in poverty. We always went to the dentist. The bottles brought in enough money to afford He-Man and Transformers toys. We didn't get food from the dump (though my dad's infamous porno magazine collection did come from the magazine recycling). There was always heat AND food (can't imagine how you'd live without either in Maine).

Use international date format (ISO) - Quality Web Tips

Hmmm, I might have used this on a recent project at work. Instead, given the company's heavy US bias I opted to use a different format with an abbreviation for the month to eliminate the ambiguity about which number stands for day and which for month. The format I chose was "6 Sep 2005" which at least has a logical progression from most specific to least specific, even if it is reversed from the ISO recommendation.

Data Tables and Cascading Style Sheets Gallery

The "zen garden" of CSS tables. Yup, some of us geeks mostly forms and tabular data all day, so we enjoy junk like this. Actually, a number of them are quite nice. One might hope that if this project were to stick around for even a little while longer the few really bloody aweful submissions might be removed. And if you're not reading this in a feed reader you know that I've a fairly high tolerance for garishness.

The US Open 2005 - TV Schedule

on USA and CBS. of course with analogue cable being shut down at the end of the year we don't get USA, so I'll have to catch the first showings on CBS. Then after next weekend we can drop cable TV.

ThinkGeek :: R/C Laser Tag Shocking Tanks

ok, these are doing so many things right. when there aren't animals around to chase and torment (dogs, cats, ducks) the next best thing that you can do with a remote controlled vehicle is race or fight other remote controlled vehicles. Usually this means slapping down fifty bucks for each one, but the price point is down around video game levels at fifty bucks for the pair. and while racing and crashing remoted controlled vehicles is fun, shooting at each other is even better, especially when an electric shock adds that missing physical response when you're not actually destroying the toys.