Changes to pipwerks.com, part 2

In case you hadn’t heard, pipwerks.com was hacked last week. The entire database was erased. Bastages. Luckily, I had a recent backup.

While going through the pains of a new WordPress install (with new plugins, extra security, and imported posts/comments), I decided “why not throw a new layout in the mix, too?” I mean, if I’m going to make changes, I may as well do them all in one shot, eh?

I had been working on an HTML 5-based layout for some time, but had been reluctant to publish it because of HTML 5’s newness and uncertainty; where do I use ‘section’ versus ‘article’, etc.? Do I really want to let WordPress continue to abuse <ol> and <ul>, or does it make more sense to use <dl> in some cases?

The outcome of the argument is what you see today. I didn’t want to fight WordPress too much (esp. the plugins), so there are still a bunch of legacy <div>, <ul> and <ol> elements hanging around. I’m sure I’ve neglected a number of things, but for the most part I’m satisfied.

Here is a short list of fun stuff i implemented in this theme:

  • <dl> for comments (<dt> for author, <dd> for comment body). I feel this is more appropriate as it maintains a relationship between the comment author and the comment body. It also allows for interesting styling (though it makes threaded comments more difficult).
  • <nav> for page header
  • <section> to demarcate where the sidebars go, “related posts” lists, etc.
  • <article> to contain the post itself
  • <footer> to hold footer-ish stuff (though the definition of footer in HTML 5 is still a work in progress)
  • Widgets for sidebars and the footer, which make editing the template SO much easier!
  • Myriad Pro as the body font. Yes, many people won’t have it, and they’ll see Arial instead. But many of my readers probably have Adobe products, which include Myriad. So there you go. No @font-face required! 😛
  • Malarkey‘s Universal IE 6 CSS for the laggards who still use IE 6. No offense — we still have IE 6 at the office, too — but I simply am not interested in bending over backwards to support IE 6 anymore. Kthxbai, IE 6!
  • Alpha transparency in images to allow overlays (such as the cartoon head). Easy in every browser except IE 6 (see above)
  • CSS-based rounded corners in browsers that support them (Safari and Firefox at the moment)
  • The comments styling uses a CSS trick to create the triangle that gives the impression of a cartoon ‘talk’ bubble
  • Icons for external links via CSS3
  • Meyer’s CSS Reset
  • Gravatars
  • Sociable links
  • Related Posts displayed for each post
  • …and more!

I must say I really enjoyed working on this theme, though it took me way too long to get to this point. Please have a look around and let me know how you like the site (or, heaven forbid, you find any problems/errors). And of course, a big thank you to everyone who contributed to the CSS and plugins that I’m using! Your hard work makes my life easier and I appreciate it.

Changes to pipwerks.com

Just a quick note: I’m renovating this site to make better use of WordPress’ capabilities.

The current version of pipwerks.com is mostly traditional HTML with WordPress being used for the Journal entries; the new version of the site will be almost exclusively WordPress-powered.

Because of the move to WordPress, many of my static HTML files will be converted to WordPress ‘pages’; this means you may see some odd posts in my RSS feed from time to time. Feel free to ignore them.

Why WordPress? A number of reasons, including:

  • easy ‘themability’
  • enabling users to post comments on normal pages, not just blog entries (this will be especially useful for gathering feedback about my lab work with SCORM and Captivate)
  • statistics tracking
  • ease-of-updates for pages (browser-based editing means no more Dreamweaver and FTP)
  • WordPress’ extensibility via plugins and widgets
  • Search engine friendliness
  • Automated linking of content via tags and categories can help visitors find related content more easily

I’ll still be using plain HTML for code examples and demonstrations, but that’s about it.

I have a few tricks up my sleeve and hope to try them out soon. In the meantime, I’ll just mention that my new theme (which hasn’t been activated yet) is HTML 5-based and uses a bunch of CSS trickery. Geeky fun for all. 😉

Why so quiet lately?

If you’re a regular reader of this blog, you may have noticed that it has been very quiet lately. Rest assured there are a number of blog entries waiting in the wings — I’ve simply been too busy to write them. I promise I will get to them soon(ish). In the meantime, I invite you to join me on twitter.

Displaying code on WordPress entries using CODE and PRE tags

Once again, a journal entry is borne from frustration.

I write these journal entries using WordPress, which is a very easy-to-use blogging solution.

Since I sometimes write about code, I decided to install the Code Markup WordPress plugin. It works very well, and I am enjoying it a great deal (thanks, Bennett).

However, one problem I kept encountering was overflow… when a line of code was so long it would break my layout.

A quick bit of CSS fixes this in most browsers:


pre {
   overflow: auto;
}

But once again, our friend Internet Explorer 6 said “No! I don’t want to play that way!” Grrr…

It turns out that if your content area has any padding and is also using a fluid sizing method (in my case percentages), the code area will expand beyond the boundaries of your content DIV. Yes, the old box model issue.

Solution? Set a specific width for the pre block element, but only do it for IE… Firefox and other browsers don’t suffer from the box model problem.

The pre block element’s width can be set to a fixed width, but in my case that defeats the purpose of a fluid layout. Then again, if I stick with percentages but set the width to too high of a percentage (“too much” depends on how much padding you’re using), I’d still have issues. Setting a width of 100% will only work if the pre block element has no padding, which would be pretty ugly!

For my purposes, setting pre to 96% width with 1em of padding works out fairly well:


pre {
   margin: 1em 0;  /* left and right margins set to zero */
   padding: 1em;
   background: #FFF;
   border: 1px solid #CCC;
   overflow: auto;
}

/* for IE 6... using "star" hack */
* html pre {
   width: 95%;
}