My doodles have cycles: a week or two of realism, a couple weeks of abstract line art, a period of typography, etc. Lately, I’ve been doing bird sketches from memory in the margins. I’m not sure if it’s because I still have birds in the brain from Arizona (probably), if I just have birds in my head right now (definitely) or if I am just enjoying doing some realistic drawings of something that I have a fairly decent picture of in my mind’s eye. Regardless, it’s been fun to try to draw a reasonable likeness of some birds from memory in my notebook. Some samples are below. I just wish I had a better scanner for them (the details didn’t come out very well).

Others had some nice ideas – one of our tech guys did what looked like a system output (matrix font, syscode look and feel) but added his Facebook ID, softball batting average and other fun stuff. Our designers of course came up with some great designs, but a lot of people got into the act.

Me? Well, I went overboard of course and did FOUR different designs. I had 2 or 3 others I thought of but didn’t have the time to actually put together. Below are my four – the first is just an update of my previous one, updated to include my new position and the required ‘location number’. So, what do you think?

Yep, that was when I first learned how to program for the web, learning HTML 3 (soon after, HTML 4), and using advanced tools like HTMLDog, Microsoft Image Creator and Frontpage 3 – and liked it.  It was the salad days of web design – you were designing for competing browsers, which had different standards, and fighting to ensure that all of the newest technologies worked with those browsers and the web in general.  Of course, then it was newcomer Internet Explorer vs. giant Netscape, and the ‘new technologies’ were things like JavaScript 1.0, CGI scripts and that new .jpg format thing (ask Van about that one sometime).

What was Writer’s World?

Writer’s World was an attempt by my buddy Mike E. and I to take over the world of writing and writing help on the web.  It was a noble attempt – we put up articles, offered links to others, accepted short story and article submissions, and more.  We were ahead of our time – but also very much out of our minds.  It was a lot of work to run a website back then, particularly one that you offered a subscription to.  Taking payments was a very manual process and I think it probably cost us more to take them than we were charging (okay, maybe it just seemed that way).  And it was a LOT of work to write all of the articles we were coming up with on a monthly basis.  Sure, we got some help at the end, but we were trying to do it mostly ourselves on top of working real jobs that were bringing in the money.  So, it was a noble effort, as I said, but one that was struggling before I came back east.  After that, it was pretty much doomed – the internet was in no way the quick communicator it was then, and trying to send large files back and forth was a nightmare.

Admire that (lack of) Design

Look closely at this prime example of 1999 programming (especially using FrontPage – although I think it was increasing frustration with this site that started me hand-coding nearly everything). The elegant use of tables (AND borders), the exquisite combination of ridiculous font colors (with their associated <font> tags), and that wonderful use of images to create a multitude of banner-like calls-to-action throughout the site. Marvel at the overwhelming use of banners at the base of the page – one of the hallmarks of 1999 programming, including all of those awards for being such a cool site at the time — never mind that we were probably 1 of 1,307 sites on the web of more than one, long scrolling page.

But all was not bad design. There were some nice features on the site (which I hope to resurrect, if for nothing else but it’s amusement value) – we had some pretty nice biographies (Samuel Beckett here, Philip K. Dick and Edgar Allen Poe other months), and if you notice, you’ll see a link for an interview with Hard Sci-Fi master Greg Bear. We also had a feature – “Interview from the Grave” – which was our take of an interview from a long-dead author brought to the modern day. Okay, Richard Pryor we were not, but we thought it amusing at the time.

Still, I have fond memories of it – writing, editing, learning how to do HTML and work with the new image software (instead of pen, pencil and paper). Looking back, those tools were … well, they weren’t very good, as the backlash on Frontpage would later reveal. But it was an eye-opening experience, and one that started me on the long and winding path to where I am today.

Daily Links

• Simpsons Star Wars intro – pretty funny spoof
• 7 Wonders of the Modern World – Indexed.com – one of her better ones in a while. I’m going to go around talking about DF all the time…
• Police dash-cam of meteorite (video) – very cool video.
• Uproar over federal drilling leases next to national parks – Good ol’ Bush just can’t stop screwing the environment, can he?
• For Tasmanian Devils, Hope Against a Wily Cancer

a[href$='.E'] – finds all a elements that end with a particular string, such as .pdf or .swf
a[href^='http'] – finds all a elements that start with a particular string, in this case ‘http’ (internal links are relative, so they don’t include the full URI

The result looks something like this (links won’t work):

The CSS behind it was also pretty simple:

a[href$='.pdf'] { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(adobereader_icon.png) center right no-repeat;
	}

a[href$='.swf'] { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(adobe_flash_icon.png) center right no-repeat;
	}

a[href^='http'] { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(ext_link_icon.png) center right no-repeat;
	}

The problem came when I wanted to identify an external link that was also a PDF. I needed to come up with something that would identify both pieces in the URI and put in a combo icon. There is a precedent to do this using the same attribute selectors:
p[class*='blue green'] selects all links with a class of BOTH “blue” and “green”, but not if they only have one or the other.

But this wasn’t working with the href when I tried all of these (and many more):
a[href*='http pdf']
a[href*='http' 'pdf']
a[href*='http'+'pdf']

A solution

Finally, I stumbled upon a solution that uses the new :not selector. This selector allows you to select elements which – obviously – do not match the attribute/string selected. So, I came up with a pattern that basically says give all PDFs the PDF icon but NOT if the element also includes the http at the start of the URL. Together, the code looked like this:

a[href$='.pdf']:not([href^='http']) { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(images/icons/page_white_acrobat.png) center right no-repeat;
	}

a[href^='http'] { display:inline-block;
	padding-right:20px;
	line-height:18px;
	background:transparent url(images/icons/ext_link_icon.png) center right no-repeat;
	}

And the final result looked like this:

Success!

Caveats

One strange thing that I noticed is that this only works when the CSS is in a particular order (I’m assuming based on precedence). The :not attribute has to be at the top; the general PDF code at the bottom. When I had the order (top to bottom): External PDF > PDF > SWF > external link, it didn’t work. Once I changed it to External PDF > SWF > external link > PDF, it did. Kind of odd, but I’ll deal with it.

You can learn more from the video below, but basically if you’re on a web page, you can select text and then use CTRL+Spacebar to activate a command structure to analyze/manipulate the data you selected. Type “map” and it will map the selected address in Google maps. Select a term or phrase and type “wiki” to get a wikipedia entry, or “ask-search“/”google“/”msn-search” to search on that particular engine. Type “flickr” to search the term on Flickr. Even better, it starts to predict what you want to do.

But it does more than that – you can also run commands such as calculator (“calculate“), switch tabs (“tab“), create a TinyURL (“tinyurl“) and more. Check out the video below, and then go download the prototype. Unless you have IE, that is. Then you can just suck it.

Ubiquity for Firefox from Aza Raskin on Vimeo.

“Good or bad, there aren’t many books that I can use for my job that I go through quickly. There’s just something about a limit to my absorption of information from these books that makes me take my time to get through them. However, that was not a problem with this book. Chock full of good information, Wroblewski manages to make it a quick, easy and yet informative read that only took me 2 days cover-to-cover.”

You can see more on Luke’s website, to get a feel for the book.

I think working on the ZPC.com site made me realize how little design and coding had been doing – being rusty and struggling for ideas was a bit of an unpleasant surprise. Then going out into the blogosphere and learning a bunch of new developments that I hadn’t even heard about yet pushed it home further. I’m currently about 2,800 emails behind on the IxDA mailing list, and – at last count – 345 articles behind on my RSS feeds.

Shari will be away this weekend, and while I’m meeting up with my buddy Matt tonight for some beers and doing some early morning birding tomorrow, I think I’m going to do some work to get caught up on everything out there. Read my IxDA feeds, clear out the old posts on Netvibes and read the articles in my “To Read” folders. I could do with some IA/UX type stuff – and God knows that I need to get caught up on the happenings out in the world.

IA/UX Out in the World

• Reset.css: Great information on using a stylesheet to reset conflicting browser defaults
• Big Red Angry Text: Calling out deprecated code examples in noticeable ways – interesting perspective, kind of like the old ‘You sill use IE6, you suck’ messages of 2 years ago. Oh, and the site itself is full of good information.
• Authorjet: Rapid HTML Wireframing without Dreamweaver – cool idea that I’m going to play with this weekend.
• Opera leads the pack in HTML 5 support – Wired.com
• HTML 5 differences from HTML 4 – W3C – Looks great. Now can we actually get it as a real standard instead of a never-ending proposal?
• Design Coding Rap Video – just when you thought it was safe to back into Dreamweaver.

Rules

1. Pick up the nearest book.*
2. Open to page 123.
3. Find the fifth sentence.
4. Post the next three sentences.

“At the core of all screen (and print, of course) visual design is layout: where and how the features, controls, and content are placed. Layout provides the structure that these elements reside within. Layout provides hierarchy, letting users know what is important and what is less so – a control that is visible at all times is perceived as more important than one that is buried in a drop-down menu.”

Questions:

1. Do you know what book my quote comes from?
2. Do you want to play ?

Daily Links

• Batman: Dead End – Still one of the coolest fan films out there, there is now a sequel.
• I never thought I would agree with Glenn Beck.
• Barnacle Goose one step closer to being added to the NJ Species List after removal ‘Origin Uncertain’ designation.

* note: I actually had to pick up 3 books: the first didn’t have 5 sentences on page 123, and the second had an image on that page.

Still, there was a lot of good content, particularly at the beginning of the session. Topics about doing a content inventory, content maps and the like was informative and gave me more than a few things that I’m going to use when I get back to work on Monday. Stuff about creating content objects and attributes have more limited application to the type of sites I’ve been working on, although I figured out a few ways that I might be able to apply it in slightly different ways to our projects. But there was a lot of material to cover in a short span and we moved through a lot of it very quickly. Merholz was a good speaker, but the rapidity of the presentation seemed to leave some of the information in the dust. Because he was filling in, I can’t really blame him, but there were more than a few things I felt like I missed during the afternoon session. Of course, it could have been that I was simply a little brain dead – that seemed to be going around a bit this afternoon.

After the day ended, we had a last happy hour, this one a dessert theme. A chocolate fountain surrounded by fruit and cake greeted us at the doorway, as did tickets for two free drinks. Most people went for top-shelf drinks but I’m a beer man, so I went and had a few more Canadian beers, including a Sleeman’s Honey Lager, which wasn’t bad but not the best of the beers I’ve had during my stay. Then, I finished my night with a good workout and some sushi from a place called Tokyo Joe’s just around the corner from the hotel. I got more than a few funny looks as I walked into the place in a t-shirt and shorts, but I was comfortable although it was only about 45 degrees out.

Tomorrow, Greg and I are going to head out birding around the area – he’s going to take me to Reifel Bird Sanctuary, Iona Park and probably Stanley Park to see what we can find. The forecast isn’t looking particularly beautiful – it’s supposed to be cloudy and possibly rain – but hopefully we’ll get at least enough nice weather so that we can see some cool western birds.