Blog updates: futzing around

2007-11-19 / 15:49 / dave

Productive procrastination is my bread ‘n’ butter, so instead of redoing my WordPress themes, I made a few other changes.

ID’ing the body

Following a tip from What Beautiful HTML Code Looks Like, I added an id to each body. My static HTML and WordPress templates are generated with Cheetah, it was as simple as adding id="$page" to my header.tmpl.

But my site is simple enough I don’t have any page specific styling, so we’ll see if this change lasts.

Favicon

All the cool kids have favicons… Since mine is just text, I built a 128×128 version in The Gimp. Getting the colors to match my header was cake since Gimp supports HTML color codes, but it turned out the “d” was too light so I darkened it a bit.

I tried to be all fancy and use GIMP’s layers to export a multi-part .ico, but this didn’t seem to work in IE7. I also tried a single 16×16 .ico at 4b color depth and this seemed to cause problems. Eventually I used HTMLKit’s favicon generator on the 128×128 version. This produced a 16x16x8b image. I’m not sure if the multi-part ICO or the color depth was the problem, but the generated version looked better than my re-sized GIMP image, so I just went with that.

favicon

Ain’t it pretty?

If you want to read about favicons excessively, check out the wikipedia or the W3C’s guide to favicons.

Adding the x in xhtml

I figured I should check my changes against the Validator. My static pages validated (with a few glitches), but the blog didn’t. Mainly, it was because WordPress was serving xhtml while the rest of the site was HTML Transitional. Jacking from Sam Ruby–his markup is my go-to for learning how to do slick web-standard stuff techie stuff, such as inline svg–quickly gave me xhtml markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

The immediate effect was:

xHTML changes XEmacs HTML-Mode indentation

Yup, it made XEmacs‘s HTML mode think it needed an extra level of identation for the body element. SGML-Mode and XML-Mode didn’t solve the problem, in fact all XML-mode do was give me a bunch of extra output. Not bothersome enough to really debug, but in googling I found html-helper-mode which I plan on checking out.

UTF-8

Back to the validator: there were a few problems, the most serious was adding a content-type to the <head>:

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <!-- ... -->
  </head>

UTF-8 because that seems to be the character-set of choice. Also I was inspired by Tim Bray’s article. And now I can play around and throw strange symbols into my html. Borrowing Tim’s examples:

HTML: &#x0026; &#x416; &#x4E2D; &#x10346;
Output: & Ж 中 𐍆 (click through if they don’t render)

And if that’s not 丳, I don’t know what is. (Except I don’t know what that character actually means, someone let me know if it means “incredibly shitty” or something.)

Anyway:

Valid XHTML 1.1

Ting!

Alternate: Atom

Sam also had an alternate link to his Atom feed. I checked my feed and it was:

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	>

Horrors! RSS2! The default WordPress Atom feed didn’t validate, so I installed Benjamin Smedberg’s WordPress Atom 1.0 plugin. It took all of 30 seconds, most of that rsyncing to my host server.

The Atom doesn’t validate for the same reason the blog doesn’t: I haven’t been careful about what I’m putting in my posts.

Finally, I added the feed as an alternate link:

  <head>
    <link rel="alternate" type="application/atom+xml"
      title="ndanger.org: posts"
      href="http://ndanger.org/blog/feed/"/>
  </head>

If you prefer RSS2, you can still get it at http://ndanger.org/blog/wp-rss2.php

Ready to start on those templates

To act like I was making some progress, I stole Andy Rutledge’s “reset everything” CSS (well, re-stole. I already used it for the Pirate Bike Triathlon) and added it as an additional CSS file. This broke all the styling, so I commented it out of the HTML.

Next project? Actually make those templates, probably using blueprint to handle the grid. Expect another meandering post soon!

Programming / comments feed / You can leave a response, or trackback from your own site.