I am in the middle of looking for a new job. This creates a need for me to keep a fairly decent log of emails and phone calls, to keep track of the dozens of responses I sent based on ads on (mainly) Monster and the handful of leads that actually go somewhere. It occured to me that each lead can be seen as a convenient data entity, with the more or less standard format for a blog (some static text, plus short, dated sections in reverse chronological order, categorised to 2 or 3 levels deep) being a useful way of expressing the relevant data.

The data is laid out as follows, using the same style sheet as the main site, with the 'base' URL being a non-disclosed subdirectory of this Blog. It is non-disclsed, because it could be unfortunate if some of the information recorded fell into the wrong hands. (such as those of any of the people currently considering to hire me). At the same time, I am lucky to have access to the services of an employment coach, who needs to be kept in the loop in a convenient way. In fact, the mechanism I have devised may mean a wholly novel way of communicating between him and his clients.

That said, most of his clients will not have the skills and/or technology that allow me to do this in a particularly easy way: shell access to a blogging site, a blogging site set up with fine-tuned data structure and style and a preference for using vi as a word processor.

As said, a lead is considered to be the fundamental data unit. There are a number of things that are related to the lead, which can be considered static: they do not change over the natural course of the lead. Then there are communications of various nature, such as emails, phone calls and meetings.

The categorisation is in two levels: 'status' and 'company', the latter being the company that would become my employer should this lead follow through completely. When leads change status, I just move the entire directory for a company (containing the full data set) from the 'status' directory it is in now to the most appropriate other one. This invalidates the use of permanent links based on categories, but for this purpose, that does not matter too much.

The alternative (given a pretty unintelligent directory-to-website categorisation scheme) would be to keep the company names as the top level category, with some sort of status indication as a static data element. However, this would make it impossible (within the limits of the tools I use right now) to get an easy overview of 'all the leads that are, for example, currently 'In Progress'.

Per 'lead' page, the top section is reserved for static data. This includes contact information for all people and organisations involved, the job specification, relevant meta-data (such as the reference number for the vacancy such as the agent in question uses) and any other notes or todos.

I have created a style for a 'data' section, with a 'contacts' subsection that lists pure data elements in a compact form, which is floated to the left, so that it does not eat up vertical screen space.

The other big static element is the job spec. I had it as normal text, but it would easily take up more than a screenful, which means the top of the page is wasted. To get around this, I moved the text to the sidebar, which runs down the right of the place, past half a dozen posts. I found that for reading or browsing (parts of) the job spec, this format is no problem at all, whereas it puts the first place for a post quite far towards the top of the page.

The posts (stories, entries, take your pick of terminology) are mostly a record of a communication, such as an email or a phone conversation. Emails are pasted in almost verbatim, with adjustments to cut of repeats of previous messages and excessive headers and footers. In some cases, I have removed social niceties as well, unless they actually represent a bit of data worth recording and preserving. Date of the post is obviously the one on the email.

The title of such a post consists of a marker '[e]' and the email subject. The first paragraph denotes who it was to or from, with myself the unmentioned other party. By putting the email body text in a specially styled blockquote section, I can add comments about the communication to the same post. This takes away the need to also include the emails I sent about leads to my employment coach.

Phone calls are denoted by a capital P with either a right or left arrow, for outgoing or incoming phone calls, respectively, with the rest of the title being the other party.

The last communication type I have identified is a meeting. These have an '[m]' marker at the beginning, with the other parties named in the title. Thus, '[m] John Doe' can be read as 'meeting with John Doe'. I tend to use the date/time to plan as well as report: a meeting with only a one line agenda summary (the first paragraph) is a planned meeting and will have a date in the (near) future. Past meetings will have more comments added.

The problem with headings flowing downstream when they get too wide for the containing box turned out to be unsolvable in the way I envisaged. In fact, the specification actually explains why it happened:

Here are the precise rules that govern the behavior of floats:

...

7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

(CSS2 specification, section 9.5.1)

In other words: as long as the heading is not the outer left element, its width can not extend beyond the space left over by the float for the right sidebar. I actually tried making the heading the far left element, but aside from aesthetic issues (the date stamp still needs to go somewhere and I really like the way it is set up now) that didn't work either. In itself, that problem might have to do with the fact that we are inside a nested DIV, which is floated itself, but I haven't pursued that strategy any further.

Instead, I have removed all unnecessary float and clear tags and just set a max-width of a percentage of the window width. In doing this, I had to change the width of the sidebar to a percentage as well, but that was overdue anyway.

I am quite happy with the new design, but at large font sizes, small window sizes or a mild combination of both, the posting headings seem to have a tendency to float downstream. The primary problem seems to be that they do not wrap. Actually, they do, but when they do, they also try to take as much space as possible and thus end up below the timestamp block preceding it, instead of floating around it.

The next thing I will try as a solution for this is to create another level of divs, which will break down the already defined DIV.post into smaller bits, i.e. DIV.post DIV.heading and DIV.post DIV.content. The heading will be set to float left as a whole. Within it, the timestamp might need its own DIV, but will in any case be floated left.

That is for tomorrow—I promised my wife that I would put an end to pulling very late nights and I am already 10 minutes past the agreed shutdown time.

Whole days of work have now gone into researching, learning, collecting bookmarks and a lot of fiddling with CSS. It is a learning high such as I have not had for a while. The symptoms are dead obvious: I have been sitting behind my screen for just about every available minute for the last three days. The amount of available minutes was drastically increased by me sleeping only the bare minimum of 5 or 6 hours a night. I feel a cold coming on, I have a mild headache and I am running out of coffee at an alarming rate. And I utterly do not care, for the dual rewards of learning stuff that is actually marketable and creating a site design that is orders of magnitude better than anything I have done before make it all worthwhile.

The highlights:

• Introduction of detailed tree of DIVs.
• Cleaned up style sheet to take advantage of the clean structure.
• A fairly novel way of displaying the date stamp for a post: broken up in sets of 2 digits, arranged in a stack of 5.
• Adjusted colors to be subtle, yet distinctive.
• Header section with advanced floating arrangement. (try changing the font and/or window size)
• Site still looks crap in IE, but it sort of looks similar, rather than nothing like the intention.

I spent until way late last night updating the style sheet for this site. The previous one had a top navigation bar that would stay in one place, in a frame-like way. It worked, provided a standards-compliant browser was used. The problem, however, is that simple scrolling up and down would make my CPU rev up to 100%, which is probably caused by the browser having to overlay layers with different z-index values and having to redraw the screen for large sections very often. It might also have something to do with the fact that I have smooth scrolling enabled. Weighing the value of the two features (cool tricks on site vs smooth scrolling experience), decided against the tricks.

While cleaning up the remainder, I sought inspiration on this site. I ended up taking more than just the column layout, but also colour and fonts. There will be more tweaking later.

I have been playing around with this CSS stuff for hours now and decided that the way to go for me is to have a nav bar on top, to be filled with smallish buttons. This nav bar will stay in place, while the rest of the page will scroll. Then a link well on the right hand side, which may very well grow beyond one page length, so it needs to be able to scroll as well. Main content is kept in the content well on the left, with a column width that is roughly twothirds of the page. (but not quite).

If you would like to see of use this layout and the associated CSS, be my guest. See if I care. Don't ask me to support it, though.

I finally figured out how to make a section on a page stay where it is, regardless of scrolling. It took me hours of reading through designer pages, getting sidetracked in dozens of very interesting issues, before I decided on mild theft.

The Thunderbird help page has this nifty menu on the left, which can be locked. I do not need the on/off switch; I just wanted to find out how it worked. There is a message in the CSS file warning to not steal the code. I like to think that finding out which of the three possible options for position is the one to use is not quite the same as stealing the whole thing, but in recognition of my inspiration I would like to thank David Tenser.

The trick is to do this in CSS:

#topnav { position: fixed }

and then this in HTML:

<div id="leftnav"> [your stuff here] </div>

I happened to have written not just a ton of documentation for my current employer, but I also did a stylesheet for it. For lack of a quicker alternative, this at least looks somewhat decent.