html5 and nostuff

It’s hard not to think of nostuff.org and not think of blazing web standards.

So I had a go at updating the template for this here blog to make it all html5. Turns out this is quite simple.

It seems you can probably just replace your doctype with

<!DOCTYPE html>

and you’ve got yourself a html5 webpage.

The W3C validator proves it so. From there I added some of the new section elements such as header, footer, nav, aside and article. It seems that these can apply to the page (i.e. the page’s footer) or a section (the footer of a blog post, where it shows tags and date published  etc). I used various sources on the web, via Google, including a few articles, and sample sites.

So nostuff mostly validates as html5 and makes use of some of the elements above, though this doesn’t affect anything visually at the moment (I think, I really don’t have much of a clue as to what I’m doing).

I’ve created a gzip file of the theme here. You’re welcome to download and use it, though it’s not really designed to be shared (includes my analytics/adsense codes etc).

Zoho and WordPress themes

Zoho.com is very impressive. The Web based Apps are of very high quality, there are many of them, and all this is such a small space of time. It makes Google Docs look rather poor. They are free (for most things), and have a business model (such a rare thing these days!).

I had checked out the Word Processor before, but today looked at the other offerings, they even have a Customer Relationship Manager and Project Management tool, the former I have no real need for (I don’t have any customers or sell anything) but good to know these are here.

It was readwriteweb.com which reminded me of Zoho. A website I need to remember to read more often than I currently do. They have some great articles (I liked the look of tinychat), and focus on writing about the latest web apps, rather than the companies behind them like techcrunch.

An aside: When I have a spare five minutes in front of the laptop I’m finding myself going to specialist news sites (and blogs) like this more and more, instead of going to my RSS reader. Seeing a long line of blogs waiting for me to read just seems like hard work. Sometimes it is nicer to just go to a website you haven’t been to for a while and see what is there. Maybe RSS readers need to work on a way of turning the long list of feeds in to something more visual: cover view, or some sort of scrolling article headlines which you could pick from? </aside>

While reading readwriteweb.com I was impressed with the readability and appearance of their font. I used firebug (which I’m really starting to find useful) to discover it was just Ariel, with a particular size and line-height.

I decided to edit this blog’s theme to use the same style, but a tiny flaw at one stage meant I had no css formatting at all after refreshing the page in my browser. The problem was quickly fixed, but I was amazed how readable the old fashioned Times New Roman on white background was, and how pleasant to read the text with the distraction of widgets and menus running down the sides. I was almost motivated to use a minimal theme with all navigation links and menus at the top or bottom.

Instead I opted to convert this blog to use the Georgia serif font instead of the previous Sans Serif Verdana. So, again using Firebug, I played with font sizes and line-heights in ems, and a few other bits and pieces until I was happy with the new look. Which I am, and hope it is ok for you too (though those of you reading via your RSS readers probably couldn’t care less).

The theme is called Greening, and I noticed the link at the bottom of this page has stopped working. So I Googled for ‘Greening theme wordpress‘ and, ummm, the first hits were to this very blog. Most odd as the Theme was quite popular and was a pre-installed option on Dreamhost. Now the theme and its owner seem to have disappeared.

If the situation doesn’t change, I may think about making the theme (and my changes) available for download from nostuff.org, with due credit to the orginal author of course.

At least I don’t have to worry about a lot of blogs using the same theme as me for now.

WordPress themes and plugins

Of interest to those who use WordPress (and those who have an opinion on web design).

Had a few hours off this afternoon so have been playing around with WordPress a bit.

New plugins:

  • Google sitemap XML : does what it says, and easy to use
  • Theme Test Drive : allows you to preview other themes (on your site) without having to make the switch first. Good plugin, seems to work well, config settings are under the theme menu of WP.
  • Twitter for WordPress‘ : you guessed it, shows one (or more) twitter feeds either as a widget or by calling a function. Works well as a widget (and all config is carried out in the widget area).
  • OpenID for WordPress : allows those leaving comments, and myself as blog author to sign in via OpenID. While it’s been noted that OpenID does have usability issues, it still seems like a good option to have. I’m leaving this active, it does work, though can’t see it being used. You don’t it near the ‘comment’ box on a post, though it is there on the signin page (which people probably would never go to), once signed in to openid (which, if you are like me, requires trying to remember what your URL is) you are actually taken to the WP admin dashboard (which scared me to start with, anyone can do this on my blog!), but the dashboard itself doesn’t reveal anything important and all other areas are locked down. In theory the user could then set up a profile, though comeone this is nostuff, why would you want a profile here? So kudos for a good plugin, though can’t see it being used on this backwater of a blog.
  • links to the above can be found here.

Themes

The first browser I used was Netscape 1, possibly 2. By default it would display black text on a grey background. This was good, far easier to read than black on white.

Since then I’ve always had a thing against plain white backgrounds, and have avoided using them for my personal sites: from the mid/late 90s (but then didn’t we all have coloured backgrounds back then!), to static web pages today, and also this very blog.

The theme is Greening, I like it as the shades of green is quite unusual, and yet – for me – quite nice to read.

However, the font is quite small [update: I’ve increased the default font size in the theme] and I couldn’t help thinking that other themes seem to be easier to read.

I mentioned above that one of the plugins allows you to try out themes without full swapping to a new one. This allows me to do cool things like show you this blog post in three different themes, try these links:

The latter two are those I’ve come across that I like the look of. The test is I can read a large post without it being a strain. By coincidence they are both by Chris Pearson.

As you can see above, some of the new plugins I’ve installed work best as widgets. Widgets are blocks in the left/right menu (categories, pages, links, etc) you can add, and order as you wish, independent of theme. This ability to easily configure and customise you’re blog’s sidebar is a powerful feature. So I was keen to move to a theme which supports widgets, there are surprisingly few. To my shame, it was only by accident that it was just now I realised that Greening has supported widgets all along.

For the time being, I’ve increased the font size on my current theme, I think it looks better. Meanwhile I’m pondering moving to one of the themes above. Ironically for all my raving about widgets above, the one which looks better to me is Pressrow, the only one of the three that does not support widgets.

Would be interested in any one’s preferences regarding the three themes above?

Update Oct 2008: Have also added the ‘Subscribe to Comments‘ extension, allows those who comment to tick a box and have any further comments emailed to them.

WordPress tags etc

For a while I have been adding tags to my posts. Tags are good. People who tag things are good. I am Web 2.0.

Only thing is they seemed to be going in to the ether, that is to say, users (that is you) had no way to see them or browse them. I was suprised that there aren’t any real options in the WordPress admin website, and considering they were only introduced in version 2.3 I was suprised I didn’t find more information on the web as to how to make use of them. I had read that WP supports things like tag clounds out of the box, but couldn’t see how to make one for my blog.

I suspected part of the problem was that existing themes hadn’t been updated to make use of them (but it seemed the ‘Default’ theme lacked support for them as well, at least the version on Dreamhost seem to).

Anyways, I found a few things:

  • You can create special pages like Archives and Sitemap. I actually found this as a theme I was playing with (Copyblogger) had a link at the top of the page called Archives but it didn’t work. This page on Andy Sylvester’s blog explains how to fix this. You basically create a page (not a post) called ‘archives’ or ‘sitemap’ etc, and under ‘Page Template’ (near bottom of the composistion page) you can select templates such as ‘archives’ or ‘sitepmap’, these seem to be dependent on your theme. Finally save it blank. He mentions to set the ‘slug’, but I can’t couldn’t see an obvious way to do this with the new composistion interface in WP [update: while writing this very post i have just noticed you just have to click on the ‘Permalink’ underneath the Title].
  • I also found this page on Rich Gilchrest website (at the time of writing it wasn’t working and had to use the Google cache copy), which explains how to add code to existing templates. So I’ve added some code to index.php and archives.php for this theme (Greening) – which doesn’t have a ‘sitemap’ template, which others seem to.

This is the code I added to archives.php using the theme editor within the admin interface for WP. Note I added a line-height as the larger tags seemed to overlap tags on the lines above, though even with this, there seems to be problems clicking small tags that are directly above larger tags.

<h2>Tags</h2>
<div style="line-height:210%;">
<?php wp_tag_cloud('smallest=8&largest=36&'); ?>
</div>

And the code I added to index.php

<?php the_tags("Tags: "); ?><br />

So now I have a tag cloud and archives page here. And you should be able to see (and click on… you know you want to) tags at the bottom of this post.

Of course, as is the law, on finsishing this I find two pages on the wordpress site that for reasons unknown I was incapable of finding before.