New Year But … er, a New Look

Yeah, yeah, happy arbitrary new year. What was wrong with having the new year begin on the first day of spring anyway? It makes a lot more sense than having it only a week after we celebrated the winter solstice by shoving presents under an evergreen tree (that, sigh, will soon be brown because we cut it down). Curmudgeonly impulses aside, I just wanted to note that the site is going to look a little different for a few days. It was time to update the PHP scripts that make the site go and it seemed best to use the latest offering from the WordPress folks themselves and then slowly hack the CSS back to something more of what the Logbook has looked like for the past year.

It’s not going completely back. I think the right sidebar is going to stick around, and so is my new friend L’hydre. I came across him on a crest having some connection to the town of Laudun, France, and I decided I kinda like the little guy. Hydras are apparently fairly rare in heraldry, and they represent the defeat of a significant enemy. For me, I like how friendly he looks. He’s an animal that would like to be able to fly (wings), clearly can make his way through the water (webbed feet), and has thoughts that go in too many directions (heads). Yup, I’m keeping him.

**UPDATE**: Okay, a new look. It was inevitable I suppose. I was looking for something that a more responsive design, in the sense that it would work well across a number of devices. I decided to give [Codium Extend][] a try. I’m fairly happy with it, except the “responsive” part of it makes for some pretty dense, and lengthy CSS. And I can’t quite get the gap between the posts and the sidebar to open up a bit more. That space feels too tight to me.

[Codium Extend]: http://wordpress.org/extend/themes/codium-extend

I would like it if the tweets that TwitTool is grabbing from Twitter account and placing into the logbook would be formatted more like asides. Since TwitTool can apply the tag of “tweet” to a post, there appears to be a way to get [tag-based formatting of posts][tag]. Thank you WordPress community.

[tag]: http://wordpress.org/support/topic/formatting-based-on-tag-slug

Better Blogging

Every once in a while the blogosphere likes to [talk to itself about blogging][1]. To my mind, it really comes down to this: **write what you want to read** and **don’t assume your reader, which isn’t you, knows what you are talking about**.

[1]: http://www.splatf.com/2011/12/better-blogging/

Logbook Revision

No doubt some readers have noticed that the design of the Logbook has changed periodically over the past year. Up until the release of WordPress 3 and its new post format functionality, I had been fairly content with the previous design for several years. Since switching to WP3 in winter of last year, I have struggled to find a design that suited my own sense of how I wanted the Logbook to function. I have finally decided that there is nothing for it but to come up with my own design, which I will be developing over the coming month, as a side project over the holidays. For now, I am using a modified version of the new default theme. It works. It has more code in it than I would like, in part to allow for customizability, but that customization comes in the form of child themes, which, to my mind, only means more code, and more CPU cycles unnecessarily consumed. *We live in an age of abundance*, some might say. My reply is that that abundance is better served finding cures for diseases, creating new kinds of wealth which can be more widely shared, and finding a way for us to get off this rock. If that sounds like a whole lot of idealism stuffed into a rather trivial project, well, that, I think, is my new attitude. Or, rather, it is the idealism of my youth which started me on this project, on this career, on this path, and which I set aside for fear of whatever it is that we fear as adults and that binds us so tightly that we become the walking dead.

Now that I have soared to such a rhetorical height I must also confess that my current plan for the design of this site is to make it look like something out of the forties or fifties, when paper, leather, wood, and steel were the stuff of offices. I have always been fond of mechanical typewriters, fountain pens — especially those made of cellulose, leather folios, wooden office furniture, and a life of thoughtful reading and writing. (Not of constant updates on Facebook or Twitter or whatever.) What I want to create is a space in which both the speed of electronic devices and the slowness of paper and wood can find a way to work together to produce a space, both imagined and real, within which I can do the kind of work that I want to do.

Towards the re-design, I am making note of two websites which walk you through the task of creating a WordPress [theme][1] from [scratch][2].

[1]: http://www.webhostingsearch.com/articles/create-your-own-wordpress-theme-tutorial.php
[2]: http://line25.com/tutorials/how-to-build-your-own-wordpress-theme

A Slight Change in Style

A slight change in style to the website over the weekend: I not only changed type faces, but I am now having them served using Google’s WebFont API:


@import url(http://fonts.googleapis.com/css?family=Tinos);
@import url(http://fonts.googleapis.com/css?family=Maiden+Orange);

I had been serving Yanone Kaffeesatz and Gentium Book from my own setup, but not only does Google save me bandwidth, but it also gives me more choices. (And switching type faces is as easy as changing one of the above lines and then changing the font names elsewhere in the style sheet. (For the body font, this is easy since it appears only once.)

And, finally, for good measure I also changed the active color of the site to the official RGB for loden green:


color: #6D7356;

A new header is coming. I just haven’t finalized the design yet. It is going to be a play on logbook:

A Handwritten Ship's Logbook

CSS Typography

A number of people have asked about the type faces I am using in the new layout. If everything goes well, then you are viewing this site using two open source, free-to-use type faces. One is Gentium, and the other is Yanone Kaffeesatz. Gentium is the serif face, Kaffeesatz the sans-serif. Both faces are available under the SIL Open Font License. SIL’s goals are noble, but they are also quite critical for building a knowledge distribution system that is beholden to no one entity. (I don’t have a horse in the current H.264 vs. WebM race, but the MPEG-LA would make everyone’s life a lot easier if they simply made that standard open and free.)

But how do you load these type faces? How do you get them to appear on your website? Well, it does take some work in CSS, and, in the case of my site running on WordPress, the creation of a directory within the WP theme that contains the fonts — note the use of a relative URL below:

@font-face {
font-family: "Gentium Basic";
src: local("Gentium Basic"), url("font/gentium.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-style: italic;
src: local("Gentium Basic Italic"), url("./font/gentium-italic.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-weight: bold;
src: local("Gentium Basic Bold"), url("./font/gentium-bold.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-style: italic;
font-weight: bold;
src: local("Gentium Basic Bold Italic"), url("./font/gentium-bold-italic.ttf");
}

@font-face {
font-family: "YanoneKaffeesatz";
font-weight: normal;
src: local("YanoneKaffeesatz"), url("font/YanoneKaffeesatz-Regular.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-style: thin;
src: local("YanoneKaffeesatz Thin"), url("./font/YanoneKaffeesatz-Thin.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-weight: bold;
src: local("YanoneKaffeesatz Bold"), url("./font/YanoneKaffeesatz-Bold.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-style: light;
font-weight: light;
src: local("YanoneKaffeesatz Light"), url("./font/YanoneKaffeesatz-Light.ttf");
}

As you can see from looking at the source (src) for each file, my server is currently carrying the load of delivering both the type face — unless a reader already has the type face installed on their computer. (And you do have at least Gentium installed, don’t you? Come on, it’s a beautiful type face and it’s open source.) This affects two things: my bandwidth usage with my hosting service and the speed with which readers view pages. I can fix this in a couple of ways:

  • I can make Gentium the first type face in the CSS for body contents and make Georgia the fall-over type face. What will happen is that fore viewers who don’t have Gentium installed, their browser won’t download it from my server but simply move onto Georgia. (I might just make my life easier and make Georgia the preferred face: that way I can make sure that I am seeing what everyone else is seeing.)
  • I can also shift the burden of delivering the Kaffeesatz type face from my own server to Google’s servers, because Kaffeesatz is one of the web fonts they have chosen to support. The code for that would look like this:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

Place that in the head of your HTML or PHP files and you are good to go. All you need to do is insert the font name in your CSS like so:

h1 { font-family: 'Yanone Kaffeesatz', arial, serif; }

It’s typographical magic without the bandwidth costs.

**UPDATE**: Sorry about the ugly formatting of the blocks of code. That was my fault: I put the wrong tags in. Also, Google offers a *lot* more options in web fonts: [check it out](http://code.google.com/webfonts).

Stop the (Design) Madness

I know, I know. As a few readers have wondered: when are the changes in appearance going to stop? Ever since I began the site overhaul I have been at a loss to determine how the site should look and function. The older design was meant to emphasize the “day book” nature of the site, something I want to keep, but I also want to make reading longer pieces easier, and the old design was a little cramped. The old design also didn’t use any of the newer WordPress functionality — heck, it didn’t use a lot of the old WordPress functionality.

In order to make the older site use as few computing resources as possible, I had stripped out much of the dynamic code, but that also meant I lost things like widgets, which make it easy to drop in such functionality as a Recent Posts block. I have also been looking forward to the new post format functionality coming out in WP 3.1. I’m running the beta right now, but I haven’t decided how I want to format visually the different kinds of posts — a visual tag with some changes in what is displayed is the usual way to do it, and that is probably how I will do it, but it also means I need to take my CSS skills up one level (at least).

Here is what I have been looking for in a theme:

  • Support of the new-ish loop.php functionality which makes coding various kind of “sub” pages easier
  • Support of post format
  • A smaller CSS — and one not requiring includes, which a lot of the grid-based styles depend upon
  • White space

This is the new design, by the way. It’s called Jotter and it’s based on Ghostwriter by Bruno Calvacante. Calvacante’s design was lovely, but I wanted something a bit more modern looking. Much of the CSS, for now, is his, but I have slowly been making changes under the hood. But, let me say, cheers to him for embracing the new HTML elements available in HTML5.