Baseline Grid on the Web

With cr2004.com I got to experiment with taking the print layout principle of baseline grid and applying it to the web.

What is Baseline Grid?

First off, here's an example grid using the CR design. The basic concept is that the baselines of your text line up across all of the columns. The baseline is the bottom of the letters, not including the tails that hang down from letters like "g" and "j". The grid is based on the line height of your text. So if your line height is say, 18 pixels, every line of text will land on a grid of horizontal lines 18 pixels apart. But if your text is not all the same size, say a header is set in a 27 pixel font, you have to increase the white space above the text until you fall down on the next grid line. This white space is the goal of baseline grid, not to create a rigidly geometric design, but to provide for a harmonious evenness of vertical motion.

How I did it

I began designing the site in Photoshop. I chose my font, Georgia, my font size, 13 pixels, and my line height, 18 pixels. Then I set up my grid of horizontal guidelines every 18 pixels, see the example to follow along. With two headers of different sizes for the two columns I had to push the smaller one down until it aligned with the baseline of the larger header which was sitting on the grid. I used margins, padding and design elements to push the header of the right hand column down. The rule for achieving baseline grid becomes this: whenever the text is made larger than the size that is intended to fit on the grid you have to increase the margin above the text until it falls down onto the next gridline. It is often necessary to also add an extra gridline worth of space below the larger text as well.

Having designed the page exactly as I wanted it in Photoshop, I then slapped it together with divs, header tags, lists and paragraphs, using CSS to put them where I wanted them. This was done cross-browser and with much pain caused by IE float and border bugs. Then I put background colors on the various elements and removed all their margins and padding. I took a screenshot of the page as it was and brought it into Photoshop. Then I measured exactly how many pixels the first header needed to be pushed down, made the change to the CSS, and took another screenshot. Working in Mozilla only I went back and forth tweaking CSS and measuring screenshots until I had everything lined up pixel perfect.

Then I pulled up the page in Internet Explorer. Everything was a little bit off. At this point I could have stopped and said good enough. The underlying goal of baseline grid, even whitespacing, had been accomplished. Everything was just off by a few pixels here and there. That is exactly what I decided to do for Mac browsers, but for Internet Explorer on the PC, used by everyone in my audience except for Cybil, I wanted it to be perfect. I created a CSS file that adjusted a few margins here and there and called it in using conditional comments. Again I took screenshots and measuring the differences between them and my original in Photoshop to find the adjustments.

Further examination shows that it may be Mozilla who is poorly handling the padding around text wrapped in a span within a header tag, but it's easier to just fix IE with a forward compatible proprietary hack.

So I guess that's it; my flawed and rather rudimentary guess and check system for applying baseline grid. It could be done in a more calculated manner, as Eric Meyer does in On CSS, and it really should be done using em's for font sizes and padding to increase accessibility. But determining that it can be done was my objective, and that has been accomplished.

CR : Spring Into Romance

I just launched the website for CR : Spring Into Romance, a volunteer run yearly conference for readers of romance novels. Exceedingly feminine color theme, yes, but I got to experiment with bringing a highly technical layout theory from the world of print design into a web page: baseline grid. Of course I have no print design background myself, so credit for the concept of taking it to the web goes entirely to Mr. Jon. An article explaining the theory of baseline grid, and my experience making it happen in XHTML + CSS is in the works.

Flash form? NO!

Speaking of hot, check out these form fields. There're certainly not for http://www.picment.com/articles/css/funwithforms/ any web app, but Søren discusses usability and other considerations in his article Fun with forms - customized input elements.

Popgrafix Hentai Art

I've never been a huge fan of pop art, but toss in a little bit of tasteful* hentai and it's actually very nice. I guess if pop art is distilling something down to it's simplest form then adding bright colors if the orignal is a soup can it's fairly lame, but if it is a naked women it's hot.

^* not to say I don't like the tenticle stuff, just wouldn't fit here.

Intuos2 - The Professional Tablet System

New item on the wish list. See how the drawing of the wizard's duel cards goes before I think about getting one. I've been in a creative mood lately.

Styling <abbr> in IE

These crazy romance readers have their own set of abbreviations which, while they are an almost necessary convenience for those who use them could be intimidating to someone new to the conference. But of course IE only supports the accronym tag, which they really aren't, so I tracked down this workaround. It would be ugly if you had to put in the extra span with a title by hand, but in steps javascript (not the DOM because IE is too gimpy) and we have a solution. I'll apply this solution to the yet un-launched CR2004 website, then maybe here, though the inline markup may be getting a little out of hand what with the typography enhancments and such.

Apache fix for CSS rollover flicker

I wonder if I can get Michelle (our server admin) to try out this fix? It would be nice to kill the problem at it's source rather than severely restrict my CSS just for fellow web developers who should be browsing using Moz anyway.

Minimizing Flickering CSS Background Images in IE6

First reaction: this is bullshit! Second reaction: I don't fucking care. Third reaction: Everybody and their mother uses IE, I don't have much of a choice but to try and fix it. Fourth reaction: the people that have changed their temporary internet settings so that this bug occurs are more technical than their mothers, so if they haven't changed their settings back to default they can just deal.

Implications of Column Width

The challenge has been set, can the web development community discuss design in an intelligent manner, voicing opinions but then reinforcing them with concrete details?

The whole fixed vs. fluid layout debate resurfaced a little while ago. I have my own opinion, that a fixed width web page is not a true web-native document but a holdover from print layout that hasn't been fully translated into the medium, but this is a rule that I will break (as with this site) when the content merits it. On page 163 in Elements of Typographic Style Robert Bringhurst brings up arguments for narrow column widths, as well as reasons to go a little wider:

If the text is meant to invite continuous reading, set it in columns that are clearly taller than wide.

Horizontal motion predominates in alphabetic writing, and for beginners, it predominates in reading. But vertical motion predominates in reading for those who have really acquired the skill. The tall column of type is a symbol of fluency, a sign that the typographer does not expect the reader to have to puzzle out the words.

The very long and very narrow columns of newspaper and magazines, however, have come to suggest disposable prose and quick, unthoughtful reading. A little more width not only gives the text more presence; it implies that it might be worth savoring, quoting and reading again.

What I take from this is that finding the right column width is a balancing act, weighted by the purpose and language of the content. Quick snippets of thought, such as the text in a blog, should use a narrower column to facilitate fast reading. Longer well thought out articles, like the ones at Design by Fire, could use a longer line to slow the reading to a more deliberate pace better suited to taking in the ideas presented. Either way it is essential to find the appropriate text size and leading to match the line length.

It's all well and good to pontificate these ideas at each other, but what can we actually do to foment change? I suggest that we press whoever is writing the copy for a project, whether they be staff writers, the marketing people, or a project manager actually doing some work for a change, to give us at least a first draft of the text for a website before we move past brainstorming for the first round of design work. The request should be sugar coated of course, "your message is the most important aspect of the site and we want the design to reflect it," whatever it takes to not have the content get shoehorned in at the last minute as it so often is.

Except for a change in the contest rules forcing a total re-write I almost succeeded in using the following rapid web standards based development process on what I've nicknamed the "big yellow sofa website". The copy was provided first, then I wrote the HTML and filled in all the pages. The plan at that point was to design the site in Photoshop and add that design with CSS as soon as I received the poster from the print marketing. Unfortunately, on the same day I finally got the poster they scrapped the copy, so it was business as usual.

Next up: Baseline Grid. Can pixel perfect vertical motion be achieved in HTML and CSS? And to up the ante even more, can pixel perfect baseline grid be achieved within a horizontally flexible layout?

IE Escaping Floats Bug

Items floated within a container that has a border escape that border and run amuck. On a roll here, think I can hit them all?

Peek-a-boo IE6 Bug

"A liquid box has a float inside, and content that appears along side that float." - just hit this one with the CR site. Luckily assiging the box a line-height fixes it, and since I'm shooting for a baseline grid with this design I will definitely be doing that.

Design by Fire: Design Matters

"Good design is always about usability. If something is not usable, it is also not well-designed. Good design is always about legibility. If it can't be read, it is not good design." Not that Design by Fire is necessarily the best example of this, in my oppinion the line length is too long for the font size, but he has a number of excellent points. If people like Jakob Nielson would read books like the Elements of Typography and speak to designers in their own language the web would be a better place.

Yahoo Keyword Density Analysis Comparison to Google

Bold? Why dear god why would the text that you have made bold be more important than say your H fucking 2's? And please don't tell me they're counting <b> tags. If that's the case then I'm going back through advancingbiosurgery.com and wrapping bold tags around the keywords then setting them to font-weight: normal;

CR : Spring Into Romance (mockup)

One girlie site (60K gif) coming right up. There may be cheating involving image tags to pull off the H2, but here goes nothin'.

Justly Married

Between the radio station that I've been listening to, to which I actually pledged last weekend, and the influence of the guys at work who actually follow politics, I am sensing a downward trend towards my actually giving a shit about anything outside of my life and my small social circle. Now I'm even thinking of buying one of these Justly Married: San Francisco February 2004 posters. The cause is right and the photo is excellent. But man, life is so much easier if I just focus on my own little world filled with my own little projects.

Photoshop 7 Shortcuts Tutorial

For all those key commands that aren't necessarily in the menus.

Translated version of http://www.enigmyster.com/pa.php

Google translation of a French riddle/puzzle(?) site's accessibility statement. I don't know which is more fun, reading the garbled translation of the accessibility features and browser support, or trying to read the French.

Webmonkey, RIP: 1996 - 2004

Webmonkey was where I got my start learning this stuff. My question now is who will step in to their role of teaching this stuff from scratch? Hopefully not just their archives, they are getting stale. HTML Dog covers XHTML and CSS from the ground up, though not necessarily in the same order an over-hasty beginner wants to learn to design a web page. Who is teaching DOM Scripting to beginners? I'm ignoring of course all the stuff that lies outside of my specialty, which is most things really.

Wizard's Duel Turn Sequence

Here is an overview of the turn sequence as I envision it. There is much playtesting yet to be done. I'll skip all the setup stuff, drawing starting hands, placing pieces on the board, all that garbage. Just know that players take turns, but there isn't very much difference between what you can do on your turn and what you can do during the other player's turn. Most of these things will become clear as you follow along, or in later posts. Everything will eventually be clearly stated in the rules which will be replacing the current contents of wizardsduel.com.

1. Transform
2. Draw
3. Movement: Sprint
4. Movement: Endurance

Transform The player whose turn it is plays an animal card from their hand, replacing the one in play.

Draw If that was the last card in that player's hand, a new hand of 6 cards is drawn.

Movement: Sprint Players alternate moving one space at a time until they have moved their entire sprinting distance which is the top number on the animal card that they have in play. If one player runs out before the other they remain stationary while the other player completes his/her turn.

Movement: Endurance The endurance phase of movement follows exactly the same rules as the sprinting phase, except that the bottom number on each player's animal card is used.

Alternative Transform Both players choose an animal card and place it face down on the table. After both players have chosen one the cards are turned over and replace the current animal.

Alternative Movement Each player secretly chooses a cardinal direction and then they are both revealed. Movement is resolved simultaniously, I don't know exactly how attacking will work with this style of movement.

To follow in a later post are the rules concerning legal moves on the board, the rules for attacking, how the game is won, and I'm still considering a set of "cheating" creatures and when they could be brought into play.

Remedial JavaScript

The shoulders upon which we stand. Here are a few of the function names:

• isUndefined(a)
• entityify()
• pop()
• push(a...)
• shift()

Miss Kitty's Parlour

Nice to see that Miss Kitty's is available at work.

Nader

What's with Nader running for president? I thought Evil was supposed to turn in upon itself!?

This has been my first political post and hopefully my last. I'd much rather occasionally comment on actual issues, politics itself is just lame.

Wizard's Duel Game Board

3-Tier Board Here is the Wizard's Duel board. It is made of three tiers, water land and sky. The sky tier has the tip of a mountain in the far corner for land animals to climb up. The land tier has forests and the base of the mountain, as well a river, a pond, and the shallow water of a bay. Land and water animals can meet and do battle along the shores of the bodies of water. The water tier has the deep water of the bay (squares with no gray), to which the largest of water animals are restricted. It also has the beginning of the river before it gets too shallow, and an underground river flowing down from the pond.

I have considered a more abstract version, with solid colors representing the elements for each level, but I think this one provides more interesting transitions between elements.

mozdev.org - googlebar: feedback

Note to self to figure out how to do this. "This", in case that obscenely long page doesn't load, being to add imdb.com and maybe acronymfinder.com searches to mozilla's google toolbar.

Things that are the new black

Since this link is just to a page with a bunch of links on the theme of "the new black" I might as well link to some of the highlights:

• "The threat level remains at gray."
• Horror flicks - Why blood is the new black
• "I know anal sex is the new black, because my bloody mother just rang to talk about it."
• Minimalism is the new black, which is all well and good for corporate design, but I'd really like to see more texture, color, and just more life in people's personal work. I guess a lot of that has to do with not separating the professional portfolio from the personal site forcing the look and feel of one's weblog to sell itself to potential clients / employers.
• Duct tape accessories are the new black. I met my best friend from middle school when he was visiting Hampshire for an ultimate frisbee tournament. He had made his wallet out of duct tape. Not some elongated pouch folded in half, but a fully articulated functional wallet. I had made my wallet (that I still use) out of leather.
• Pirates are the new black. This one's for Cybil.
• Outsourcing is the New Black Fuck this. I really hope that the law goes into effect taxing the import of intellectual property making it more expensive to send all your code work to India. Quality of product is the most important thing to me, so I believe that if there is enough work to merit it the best thing for a company to do is to have an in house team that really understands the needs of the company and is held fucking accountable if they do shit work. Of course if your in house team is your secretary using frontpage then by all means outsource away. I guess the bottom line is quality, and there is just an awful lot of shit work being done and a lot of it is outsourced without the vendor being held accountable for their inaptitude. That's what gets me all riled up.

Helping Your Visitors: a State of Mind: A List Apart

Note to self: TBR

Digital Web Magazine - Keep It Simple: Accessibility and usability

Note to self: TBR

Game Strategy : Anticipation vs. Reaction

Is the game at it's core more like rock paper scissors or, for lack of a better analogy, air hockey? Is the strategy based on anticipating the opponent's next move or reacting quickly and intelligently to counter the previous play? Wizard's Duel may wind up having elements of each. Here are two places where the game design could go one way or the other: shapeshifting and movement.

Shapeshifting could be done simultaneously. Each player secretly chooses an animal and then they are both revealed at the same time, like rock paper scissors. This was my original notion of how it would work. My second thought was that players could alternate shapeshifting so that each turn one player becomes an animal intended to defeat the opponent's current form, and then the next turn must survive in that form after the opponent transforms into a new animal. In case that was confusing here is an example. You are a wolf chasing me. I am a deer running away. When it is my turn I change into a bear, turn around, and attack you. When it is your turn again you change into a bird and fly away. I think this may be closer to the intent of the game, as per Sword in the Stone.

There are two different ways that movement could work. Before I explain them let me mention how I do not want movement to happen. I don't want players to take turns moving several spaces at a time, it's too clumsy and artificial. The whole "my turn, your turn" isn't fluid enough. Jon had the idea that each player could choose the direction that they wanted to move secretly and then simultaneously reveal and see what happened, à la rock/paper/scissors. I have this idea about near-simultaneous movement, taking turns moving one space at a time chasing eachother until one animal outpaces the other. Either way I will probably separate it into sprinting and endurance movement phases. More details on that later.

I'm leaning towards reaction oriented on both counts, I think it better matches the flavor of the chase/transform/counter-attack duel between Merlin (The Powerful Wizard) and Mad Madam Mim.

Next up:

1. photograph of the board (going with strictly non-digital game production)
2. card layout (animal stats)
3. turn sequence, movement, & the environment
4. attacking
5. card drawing
6. winning
7. cheating

FYI - WizardsDuel.com is forwarding correctly again.

Another aside: Memorable Quotes from Sword in the Stone. Damn I gotta watch that movie again. That and the animated Robin Hood of the same era. I think Cybil's got those DVDs on back order for me but she won't say, it's a surprise.

Seven Illustrated Principles of Highly Informative Color

Visibone card style, very cool.

News about Ender's Game: The Movie

The only danger here is expectations being too high. X-Men men had an awesome script. Well rounded characters and action all focused around the story. Since Card already wrote a first draft the writers will know what is most important to the story. It could be a phenomenal movie.

Wizard's Duel — A New Beginning

Before there was web design there was game design. Traditional board games mostly, I've never really gotten into digital games. Putting together the pieces for Stratego the other night (anybody play?) I was inspired to work on a game idea that has been brewing for some time. Wizards Duel (http://www.wizardsduel.com/) is currently a rather clunky DHTML game. I have in mind a game built on the same premise, using Disney's Sword in the Stone as inspiration, but on a 3-tier playing board.

The idea for the game originated years ago in a game of D&D. I was DM, and my friend Isaac was playing a wizard who was undergoing your standard three test right of passage into some guild or something, I don't really remember. For one of the tests, a duel against an older wizard, I had prepared a list of animals and their basic stats before hand. Using a loose interpretation the D&D combat system we fought, changing form from predator to prey, diving into a lake and becoming fish, then leaping out and transforming into birds. It came off smoothly because we had a narrator. What I need to do is come up with a set of rules for the game that allows for the same dynamic movement and multiple levels of strategy, in the shapeshifting and in how you decide to maneuver as that animal.

I have no aspirations of actually selling this one, so I will develop it in a more open source manner than I did Dragon Duel. It would be great to get other people in on the ground level developing it, so I will publish my thoughts about the game as it progresses. Once I have something tangible then I'll see about getting some of the guys to play it as an intermission maybe during one of their console gaming get togethers.

Return, Move On

Ted has returned. Tim is moving on. By my calculations that put us one Talky over and one J.L. under the optimum team at work. Oh, and M.B. could probably take the place of Edgesoft on those little outsourced projects they so love to screw up.

THE MEATRIX

Between the problems this Flash animations points out and mad cow disease, wouldn't it be nice to be able to afford organically grown dead animal flesh?

Stylish Scripting : Line endings in Javascript

Regular expressions. JavaScript functions. Browser quirks. What more could you ask for from a blog post?

Albino Catfish

I saw this sticker on someone's car. How fucking cool is that logo?

Minor Typography Update, New Archives

I've increased the leading around my headers. Between that and indenting rather than leading my paragraphs, I think I've come a ways towards solving the problems I was talking about in my rant about how my titles aren't working: Pre-meditated Sheep Thievery Using text-transform: lowercase;. Almost time for a new title treatment.

Since I've created the Link Log to pull out the posts that are just links and started focusing on writing better content (ok, ok, a higher volume of original content) I've been poking back through old posts a bit more. I've also been making more style changes and so find myself going back to see what's broken. The daily archives are certainly more useful if you've got a permanent link, and that shouldn't be too hard to find with the search form I just added if Google ever gets around to crawling my freakin' site again, but for the two aforementioned tasks an archive that lists post titles really is helpful, so I've started to make Archives by Title. So far I've caught up on the 2004 entries. Before that not many of them even have titles, so I've got some work to do. Thankfully I've found music that I can actually work to, classical 91.5 fm KUSC - Live Streaming Audio.

Milton's Typography Interest

Typography Here we have Milton expressing his newfound interest in typography, in much the same manner as he did The Lord of the Rings (please excuse the tattered old template).

Wish List

I've added a new page to my site, a wish list. It will live in the Links menu above. It's basically my Amazon wish list, but with a lot more time and effort put into it. I like to want stuff. It helps keeps me motivated.

Note to Self: no span tags allowed in the post's title you fool, they kill your entry collapsing. Really should replace those spans with divs, you know they're only allowed inline.

Chapters 2 & 4

More wisdom gained from The Elements of Typographic Style and the attempted application thereof:

1. Set opening paragraphs flush left. (p. 39) This was easy enough, but given current CSS selector capability I have opted for <p class="first"> on each paragraph following a header or block quotation.
2. In continuous text, mark all paragraphs after the first with an indent of at least one en. (p. 39) Actually, this improvement should call better attention to my aforementioned weak headers by making their leading visually distinct.
3. Add extra lead before and after block quotations. (p. 40) Given my short line length I have decided that the italics and this extra lead are more than enough to signify a block quotation, so I have removed their indentation. In-line citations are simply italic.
4. Avoid overpunctuating lists.(p. 71) This rule is not possible given the limited control that CSS has over lists. I have made an attempt at quality typography, hanging the numbers in the margin, but am unable to remove the periods.

So there you have it. And to give examples of each point in this post I offer you a quotation from page 19 of the same book:

In a badly designed book, the letters mill and stand like starving horses in a field. In a book designed by rote, they sit like stale bread and mutton on the page. In a well-made book, no matter how many thousands of lines and pages, the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles.

The next challenge on my plate is CSS side notes.

Go Doug!

Conditional Comments

An alert reader pointed out that conditional comments don't work correctly when you have multiple Explorers installed on one computer.

I took this opportunity to declare the use of conditional comments safe. I wrote a new page about them and I implemented one in the top frame of my site, which has long suffered from an Explorer Windows-only CSS bug.

Jon and I have reached the same conclusions, but it's nice to see someone with more authority in the field like PPK post it.

License Plate Spotted

Saw this license plate during my late drive home: 72 DPI

Now if only I knew how to say "dots per inch" in Dutch, or French might even have worked. Perhaps they have a completely different term for it in Belgium since they were one of the first three countries to adopt the metric system in 1820 along with the Netherlands and Luxembourg. But then again I did give them the dimensions in centimeters, and they ignored those as well. At least they got the color mode correct, even if the logo design sucked and the kerning was crap. I'm going to very quickly become a typography snob. It will be fun having more tools available with which to put down other's work.

Typography Time

I have been slowly digesting The Elements of Typographic Style by Robert Bringhurst with a spiral notebook in hand writing down quotes and noting pages that cover topics I will reference as I work. Every time I pick up the book I re-read my notes, hopefully it's sinking in.

The latest addition to my knowledge of typography are Text Figures. The basic history behind it is "when arabic numerals joined the roman alphabet, they were given both lower and uppercase forms." (p. 46) Most numbers you see are all uppercase, which is fine for data tables, but numbers that appear within a sentence are better set in lowercase. The only web font that I know of that uses text figures is Georgia. Here's an example: today is Friday August 13, 2004 and the time is 4:23 pm. The XHTML is somewhat cumbersome, but such is the nature of typography on the web.

<span class="textfigure">4:23</span> <span class="smallcaps">pm</span>

Many thanks to Cybil's mom, she got me this book for Christmas. It is the fourth update of the second edition, currently unavailable even through Amazon, except for a single used copy selling for $53, that's $23 more than the cover price!

Room Service

It's rare that you see an animated gif done well. It takes a subtle touch and anyone with enough skill usually moves on to Flash. Here however we have just enough movement to make things extra interesting, but it is still possible to read the text without being completely distracted. Warning: not blocked by WebSense, but it should be!

Current Time in Belgium

The current time in Belgium is 11:37 pm, almost Saturday the lucky bastards. What this means is that they won't see the staging version of their website that I've coded until Monday, but when I get in at 7:00 am it will be 4:00 pm where they are so they will have had almost an entire work day to stew over the fact that I used a better version of their logo than the one that they provided.

Brian Tarsis, B&D, SM and Spanking Illustrator

This bondage artist has a link at the bottom of his gallery page to a fan's Memorial Gallery. They wrote him an epitaph and everything!

Scooter Software

The latest version of Beyond Compare supports UTF-8! Now I just need to get an editor that supports it as well as UltraEdit does, because that piece of software annoys me to no end. Jon says slickedit does the trick, don't think I want to pay for it just for work though.

Back to the Green and Orange

jfred has brought back my favorite of his color schemes, the green and orange inspired by sub:lime. Re-inspired this time by the Fox Fire logo? Anyway, it was nice to see the return of some non-corporate colors to one of my daily haunts (I get my daily Comics fix via his links page).

Not a Sexist Elitist Snob

I am an elitist snob. At various times in my life I have considered improving this, but it always comes down to my being better off just having a few good friends. My friends / co-workers are also to various degrees elitist snobs. This is fine. But what I must refute is the notion that we are sexist. Politically incorrect yes, but discriminating based on hardware, no.

There are those who make it within the "inner circle" at work and those who don't. This is never formally declared but can be ascertained from the tone of harassment. We harass everyone, sometimes it's just a little more serious. Let me examine the incompetencies of those shunned, first the girls then the boys to see if we are indeed being sexist.

First up, barely overlapping my time here, is A.P.. She was a spoiled rich hippy brat who used company time, resources, and even materials from our application to publish her book. Next is K.O.. She would constantly set herself up for failure. We all make mistakes all the time, it comes down to how you handle it. Lastly, Talkie. Nothing more need be said of her. That is three, on to the boys.

R.S. or just B. is grossly incompetent. His latest royally unrestrained fuckup could cost between 5 and 30K. So if I get laid off for a few months... Jumping ahead of myself, let's go back to Lazy Jack. Trying to stay more anonymous, but the Maynard Moose reference couldn't be helped. Then there was grumpy old J.A.. Good intentions but unproductivly confrontational, and in the end simply unproductive. Now we have T.H., who barely even comes in to work anymore and has been pawning off his job responsibilities. There have also been a number of short term contractors, C. was a fool, and I strongly suspect that G. was a pathological liar.

More boys than girls, but that's true of this field. Still, I place the girls batting around 500 (we still have 3 in an inner circle of about 9). 50%'s not bad considering that we are elitist snobs.

Pre-meditated Sheep Thievery Using text-transform: lowercase;

Frederick Goudy once said,

"Anyone who would letterspace black letter would steal sheep."

the quote is also commonly changed to,

"Anyone who would letterspace lower case would steal sheep."

Here on this site I am guilty of the later. I have been meaning for some time to address it.

First, why would I do such a thing? I enjoy organic design with a modern touch. Thus I began this site's design with an arch of bones, which lead naturally to using a heavily serifed font such as courier for the paragraph text. This heavy font combined with very tight letterspacing is necessary to balance the bright colors and exotic design. I am sick of all these personal sites trying to look all slick and corporate with gray and blue, so I went to the opposite side of the color wheel. But I like a bit of post-modern typography in there to keep things lively, so widely spaced headers seemed the obvious choice, if a bit of a cliché.

Then the problem of scannability came up. There is a reason that headers are large and bold by default: they are more important than the rest of the text. One should be able to scroll and scan the headers looking for a previous entry. I concocted the overly technical solution to the scannability problem of using the DOM to collapse recent entries, and change them to look like regular links which are properly styled to stand out from the rest of the text. This was an interesting technical exercise and I am reasonably happy with the result, but it will probably not survive the next re-design.

Here is where one of my new favorite CSS properties comes in.

By using text-transform: lowercase; to achieve the post-modern look of my headers while using traditional title case when entering the copy into my blogging tool I am ensuring the forwards compatibility of my content. In the next design of this site my headers will more than likely be properly emphasized, and my text is ready for that day.

You might also notice that my recent entry links appear in their natural title case, enhancing their legibility. Isn't it great how CSS lets you totally obsess about the details?

Mozilla Fire Fox

I'm still waiting until Mozilla Browser 1.0 to send out CDs to the family. I want them to have a nice clean install and not have to upgrade. My upgrade is not going so smoothly, though I did just get my Tabbrowser Extension to work, time to try the Google toolbar again.

TRU Project Flash

Love these little interactive Flash moments in porn. Can't say as I'm a fan of the D cup (seen it before elsewhere too) but the little bikini bottom flash and uncrossing legs are lovely.

Porn Posters

More vintage porn posters. Champagne Orgy is just so clasy, I love it.

Porn for the blind.

Flash 5. Think lesbian porn + image map + screen reader.

Jennifer Steele: The XXX Pyromaniac

You simply have to love the animated gif flames. Yes, this is a link to a porn star's website.

Curious Nature ? wallpapers

Note to self to watch this space.

Work Filter

The good news: I still have a "work filter" in place (a post on my filter theory is about due). That is, there are things that I will think and maybe even begin to say, but will stop myself from saying because I am at work. The bad news: my blog filter is far more lenient, and you are reading this. It is recommended that you stop now and head on over to my link log or something, it's safe and geeky there.

At work today an article was discussed about an older women who posed as a boy and had an affair with a teenage girl. There was a lawsuit when the girl found out. My comment was, "interesting strategy." I refrained from elaborating. The older women's strategy must have been, until she got caught, to simply not whip it out, because she would not have had the expected it to whip. In that way she may have carried on for some time with necking, heavy petting, and maybe even some munchy munchy without getting caught. The girl, having not experienced a teenage boys fumbling before, didn't know enough to be suspicious. My unspoken thought was that a male in his 20s or 30s, with the desire to suck some teenage puss, might masquerade as an older women and get in the pants of a bi-curious young women.

In typing the above I am reminded of a case I read about a couple years ago where this guy was being sent to jail for having written of illegal acts in his personal diary. Not nearly so public a place as this. Then again, it was his parole officer who found the diary, and you guessed it, he was out on good behavior from a sex crime conviction. But still, freedom of speech is freedom of speech. We can't truly say that we support freedom of opinion until we accept that others might voice an opinion drastically different from our own, and that is ok. Yes, I'm paraphrasing the West Wing. I prefer a fantasy version of US government where the president is a Nobel prize winning economist to the polar opposite that is our reality.

// hicksdesign :: branding firefox

If you're looking for someone to blame for Mozilla's shifty attempts at branding this guy isn't directly responsible for the new firefox logo, but he names names. He's part of the branding team, which as far as I can tell is made up of various web developers / designers and no marketing people, though I'm not surprised that marketing people aren't being invited to this volunteer effort.

EditCSS Mozilla Extension

This could be the next big thing for front-end developers after right-click "View Selection Source." Have to see how well it really works.

Mozilla Firefox - The Browser, Reloaded

Lame name change. Can't we get to Mozilla Browser already? That cinched it, I'm waiting until 1.0 to send out CDs.

Version 2 : Yet Another Redesign Contest

From Paul Scrivens, another in a long string of redesign contests that people have been coming out with to keep the unemployed occupied. The only reason I'm pointing out this one is that, even the the dude is a megalomaniac, the site up for a redesign is a worthy cause (i.e. not his own, unlike some contests I've seen). The site is Project Gutenberg, which I recognized from one of jfred's daily links: pgdp.

Mitre Box

I've added a new tool to my overflowing mess of a toolbox, a piece of shit plastic mitre box and equally crappy saw. The quality of my tools varies drastically based on its origin. Everything that I have purchased from a hardware store while living in an apartment is awful. I buy it to get a job done, and then hopefully not take up too much space in the closet before the next project. The good tools are either gifts, or I've picked them up at yard sales.

— What's this honey? asks the yuppie wife.

— Must have been one of your dad's tools, says the yuppie husband.

— Think we could get a dollar for it?

— Might as well try.

It's conversations like those that yield the really good tools. You know, the ones made of metal and wood rather than plastic and rubber-like-substances.

Link Log

I've started up a Link Log to keep the original content (such as it is) separated from the same old "hey, look at this website that somebody just showed me" that every other blog within a given subject points out. I have found that this is the difference between blogs that I continue to follow and those I scratch from my links page. If you're just an echo I'd rather read the original source.

So I've added a link with an arrow up and to the right here, since it is a parallel page, and the Links button on the navigation now has a drop-up menu. This change hasn't made it to all the pages on the site yet, but I'm maintaining static content by hand so gimme a break.

I Love Death

An excellent inaugural link, reminiscent of stick figure death theatre, this short film is a cyclical story about the life and deaths of a working class man. Since it is set to music it will take a long time to download even on a fast connection, but it's worth it. Props: Jon.

Hiking Poles

I should have gotten hiking poles a long time ago. They feel perfectly natural for me, but then again I grew up using cross-country ski poles (the last half-mile down to my dad's house isn't plowed in the winter, so skis or snowshoes are necessary). I've never liked hiking downhill, hard on the joints, but with the added balance of an extra 2 legs I can hike down more aggressively, under power rather than braking. Overall I probably expend more energy hiking with arms as well as legs, but that's a good thing since part of the reason I'm hiking is for exercise since I don't believe in working out.

Why technical writers should love Microsoft's Inductive User Interface

Back-dating this one to the day we talked about it at work. It's actually just commentary on an MS study and test case, but is better written. I have this theory that processes split into single task steps could actually be made faster for advanced as well as new users by providing proper key commands. Each step would be clearly explained, you would never lose your place, and at the end you'd just hit Enter. Ideally data could be entered entirely with the keyboard, or entirely with the mouse (in the case of existing previous entries similar to the current one).

Movie Review — Eulogy

Genre

Eulogy is a Dark Comedy

Premise

Elderly father of extended disfunctional family dies. Granddaughter must deliver eulogy.

People

Rip Torn is the dead dad. Ray Romano is actually good as father of hell-raising twin boys. Dude who does Moe's voice on the Simpsons as washed up child star & closet pot head. There's also a suicidal widow, lesbian daughter, oh, and I almost forgot the protagonist granddaughter.

Memorable Moment

The deviant twins request to intern with their aunt's lesbian lover. She grants them the privilege of massaging a foot.

If you liked...

The Royal Tenenbaums, you will like this movie. It's darker, has many more lesbians, and is equally hilarious.

Bottom Line.

What makes this movie so good is the interaction between the family: the teenage fascination with lesbians shared by the father and his twin boys, the unrestrained cat fights between adult sisters. If you're a fan of dark comedies go see this movie when it comes out, if you don't like dark comedies then go die and rot in a hole.

Rainbow Detour

I took a detour through the park on the way home last night. There was a brilliant full-arch rainbow so bright the tips were yellow, with a faint double about each end. A flight of geese was flying in formation over the pond below.

It is important to pause and appreciate the rare moment of natural beauty when one lives in a place as butt-ugly as Southern California.

Thanks Dad!

A proper Devine christmas extends into February. So even though my dad sent me the gift certificate on christmas eve, I dutifully lost it and have only now had it re-sent. Here is my second little post-groundhog pre-taxes christmas:

JavaScript: The Definitive Guide

Old edition we're using at work was for 4.0 browsers, this 4th edition covers the current generation.

Stratego

Never been one for strategy games any more complex than checkers, but they used to play this one at Flying Moose and I've always been fascinated so when Cybil said she's played it, on the list it went.

The Annotated Chronicles

Because my old copy's pretty ratty. Yes, I read trashy fantasy novels as well as romance novels. Growing up I read books instead of watching TV, but that didn't mean I read "good" books.

Maximum Accessibility: Making Your Web Site More Usable for Everyone

There aren't that many books written about my field (front end development), so might as well read them all. It's the details that matter in my job, so I look for books like this to pick up more tidbits.

Web Design on a Shoestring

I'm cheap. Super cheap. Some might call me frugal, but they're just being polite.

Lower tech? -or- Assumptions

Something we struggle with all the time at work is creating simpler solutions. We are often thinking about production release 4.5 when we should be prototyping version 0.1 beta. If a problem can be solved using a lower tech solution do it. If more complexity becomes necessary it will evolve, don't push it.

As Jfred will tell you after his ever so productive day at work, it is important to periodically test one's working assumptions while solving a problem. One of my assumptions was that my blogger archives should be monthly. Given the set of data (going into my 4th year of posts) this seems like the appropriate frequency, but that is discounting the fact that monthly archives are fucking useless. You can never find anything in them. I always end up using google's "search this site," and so...

The final solution to my collapsing of recent posts problem will be, I hope, to simply collapse the posts and leave the anchor events alone. The links will take you to the archive of that post. My reason against this had previously been that a monthly archive is a very large page to load. I will solve that be changing the archives to Weekly or even Daily. The main archive page will then be obscenely long, but that doesn't matter because it's useless anyway. I will put one of those google "search this site" forms at the top and hope people figure it out. I will still have to alter the JavaScript to not collapse the archive pages, and that should do it.

Dreamhost

On a slightly related note (getting at the reason I'm doing this fenageling on the front end) I'm considering switching from pair to dreamhost. Actually I've been thinking of switching for like 4 years, but now dreamhost has a plan with PHP for $10, which is only $4 more than my current plan.

Now that Blogger has Atom, an XML syndication feed, I could use Blogger as a publishing tool while completely re-working the way it is displayed.

Broken Back, Button That Is

With the collapsing of recent entries on the front end there are a few bugs. Once expanded, a post's permanent link continues to return false in Firebird. Faulty editing of the onclick event, don't have a fix yet. If you open up IE and succeed in following one of those links you'll see that the archives are collapsed as well, leaving you at the bottom of the page with no idea which post you were trying to look at.

Now Jon points out another problem I've introduced. Open up a recent entry and follow an external link. When you use the browser's back button to return to the page you'll find that the entry you were reading has collapsed. It is effectively failing to "save state" by collapsing entries every time the page loads.

There are two options that I'm considering. One is to have the expand links anchor you down to themselves, effectively passing the post to be opened through the URL like this: divineblog.html#0123456789. This would require some JavaScript scrolling to avoid disorientation after the page loads, collapses, and the entry clicked expands, but will likely be necessary to solve the archives bug mentioned above.

The other option that I'm looking at is not to trigger the collapsing on body.onload(), but instead to put the function at the bottom of the page, above the </body>. That way the page would remain in whatever state you left it in the browser's history and not re-collapse when you go back to it. This is in theory of course, time to test it out.

Thought regarding archives problem: don't collapse the archives.

Update: failure. JavaScript in the page executes every time page loads. Duh.

A more clever idea just in from Mr. Plummer. Check the window.history to see if you are coming back to the page, having already been to history.next. My Definitative Guide is blathering on about UniversalBrowserRead, but it was written for 4.0 browsers. We shall see.

Definitive Guide blathers true. Looks like it's about time to get JavaScript: The Definitive Guide 4th Edition. The 3rd edition was for 4.0 browsers, the 4th covers IE and NS 6, and Mozilla. Might have to take a look at it in the store to see if it thinks in terms of DOM scripting.