WordPress upgrade: filling in the missing pieces

Missing piece

Well, where to start?

I’ve been meaning to blog about life for ages but since Reuben and Joshua were born in November 2008 other things took more of a priority.  Things like attending to twin boys, eating, getting enough sleep, and generally trying to muddle through the days.  I’ll likely write more about that in the future.

Simplifying life

Over the last few months I’ve been working at simplifying life as much as possible, and being a good Getting Things Done / Take Back Your Life disciple and disengaging from projects and tasks that I knew I wouldn’t/couldn’t complete or which were no longer priorities.  It’s felt good.

That’s given me more of a focus on the things that I do want to do.  Sorting out my web server was one of those things.

Server upgrade

I suspect that I would have blogged more about it at the time (and I now wish that I had) but I made a promise to myself that I wouldn’t blog again until I’d upgraded my server.  Of course, that took a good few months longer than I had anticipated (doesn’t everything these days?).

In February I moved from Webfusion to Heart Internet, after an abortive attempt to simply upgrade to a better hosting package at Webfusion.  The killer feature that was missing from the Webfusion package was subdomains; I didn’t want to lose my www.garethjmsaunders.co.uk URL that I’d just had printed onto a custom-made laptop skin.

So far my experience of Heart Internet has been excellent.

Upgrade WordPress

The most pressing reason for moving to a better server was to enable me to upgrade WordPress, the software that manages my blog.  My old host had a bunch of really out-of-date features (MySQL 3.2 and PHP4) which just wasn’t enough to run the latest versions of WordPress.  What a relief to be able to upgrade from WordPress version 2.0.11 to the latest version 2.9.

And wow! there have been quite a few changes to WordPress in the interim: the addition of widgets and tags, as well as critical changes to the main API, a much nicer UI, etc.  So many changes in fact that my old theme broke.  So that had to be fixed.

The upgrade was pretty pain-free thanks to WordPress’s infamous 5-minute install and upgrade script.  (I tested it out first, of course, on my localhost machine using XAMPP.)  The only thing that I missed was matching the database character set encoding.  It was set to ISO-8859-1 (Latin-1) rather than UTF-8 (Unicode) so there are still a few odd character combinations on the blog that I need to track down.

Batch categories

WordPress now has tags.  Back it the day it only supported categories so I, like many other WordPress users, created tens of categories to organise what I was writing about.  I had 88 categories.

I found a tremendous plugin called Batch Categories which let me quickly (by which I mean over the course of two days, rather than weeks if I had to edit each post individually) move groups of posts from one category to another, and also add tags to groups of posts.

So I took the easy route of replacing most of the categories I had with tags and rationalising my categories down to nine:

  1. Books
  2. Computer
  3. Family
  4. General
  5. God Project
  6. Mah Jong
  7. Music
  8. Psion
  9. Web

Next …

I’m really keen to redesign my blog theme but I’m going to hang off on that for the time being.  I’ve got a couple of other things that I want to complete first.

CSS framework

The first thing is to complete work on what started as a plugin for the Blueprint CSS framework and which is now turning out to be a combination of different parts of my favourite CSS frameworks.

Website redesign

Once that’s done I’m going to work on a complete reworking of my main website www.garethjmsaunders.co.uk.  The last time I did any serious work on it was, I think, probably around 2003.  The code has a very serious dose of ‘classitis‘.

One of my biggest drivers is the number of emails and telephone calls that I still get for information about and software for the Psion range of PDAs.  I want to create some space for myself by putting a lot more of that information on my site, in a way that it can be found more easily.

Fixing Blueprint CSS 0.7.1

Blueprint CSS

Note: Updated Tuesday 24 March 2009 @ 10:00

Blueprint CSS is a CSS framework. The latest version is v.0.8 but a lot of people are still using version 0.7.1, even though there are a number of irregularities in it.

So, this evening I’ve been sifting through the Blueprint CSS version 0.7.1 code and making a few corrections. The bulk of irregularities can be found in the source code (within the /blueprint/src/ folder) and not in the release code (/blueprint/screen.css) but these source files can be very useful so should really be fixed. There is also one error in the ie.css file in both the source and release code.

There may well be other edits, corrections or enhancements that could be made, but these are the obvious ones that I’ve spotted. Note that all line numbers refer to the original, unedited code’s line numbers, i.e. the code in version 0.7.1.

Copy everything

Rather than making changes to the original code, I created a copy of the Blueprint CSS 0.7.1 folder and imaginatively called it Blueprint CSS 0.7.2.

Edit #1: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .pull-6 to .pull-24 are missing from grid.css.

The solution: Replace the following lines of code:

.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }

.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-5 {
  float:left;
  position:relative;
}

with this code:

.pull-1 {margin-left:-40px;}
.pull-2 {margin-left:-80px;}
.pull-3 {margin-left:-120px;}
.pull-4 {margin-left:-160px;}
.pull-5 {margin-left:-200px;}
.pull-6 {margin-left:-240px;}
.pull-7 {margin-left:-280px;}
.pull-8 {margin-left:-320px;}
.pull-9 {margin-left:-360px;}
.pull-10 {margin-left:-400px;}
.pull-11 {margin-left:-440px;}
.pull-12 {margin-left:-480px;}
.pull-13 {margin-left:-520px;}
.pull-14 {margin-left:-560px;}
.pull-15 {margin-left:-600px;}
.pull-16 {margin-left:-640px;}
.pull-17 {margin-left:-680px;}
.pull-18 {margin-left:-720px;}
.pull-19 {margin-left:-760px;}
.pull-20 {margin-left:-800px;}
.pull-21 {margin-left:-840px;}
.pull-22 {margin-left:-880px;}
.pull-23 {margin-left:-920px;}
.pull-24 {margin-left:-960px;}

.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-6,
.pull-7, .pull-8, .pull-9,
.pull-10, .pull-11, .pull-12,
.pull-13, .pull-14, .pull-15,
.pull-16, .pull-17, .pull-18,
.pull-19, .pull-20, .pull-21,
.pull-22, .pull-23, .pull-24 {
  float:left;
  position:relative;
 }

Edit #2: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .push-6 to .push-24 are missing from grid.css.

The solution: Replace the following lines of code:

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }

.push-0, .push-1, .push-2,
.push-3, .push-4, .push-5 {
  float: right;
    position:relative;
}

with this code:

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 {margin:0 -240px 1.5em 240px;}
.push-7 {margin:0 -280px 1.5em 280px;}
.push-8 {margin:0 -320px 1.5em 320px;}
.push-9 {margin:0 -360px 1.5em 360px;}
.push-10 {margin:0 -400px 1.5em 400px;}
.push-11 {margin:0 -440px 1.5em 440px;}
.push-12 {margin:0 -480px 1.5em 480px;}
.push-13 {margin:0 -520px 1.5em 520px;}
.push-14 {margin:0 -560px 1.5em 560px;}
.push-15 {margin:0 -600px 1.5em 600px;}
.push-16 {margin:0 -640px 1.5em 640px;}
.push-17 {margin:0 -680px 1.5em 680px;}
.push-18 {margin:0 -720px 1.5em 720px;}
.push-19 {margin:0 -760px 1.5em 760px;}
.push-20 {margin:0 -800px 1.5em 800px;}
.push-21 {margin:0 -840px 1.5em 840px;}
.push-22 {margin:0 -880px 1.5em 880px;}
.push-23 {margin:0 -920px 1.5em 920px;}
.push-24 {margin:0 -960px 1.5em 960px;}

.push-1, .push-2, .push-3,
.push-4, .push-5, .push-6,
.push-7, .push-8, .push-9,
.push-10, .push-11, .push-12,
.push-13, .push-14, .push-15,
.push-16, .push-17, .push-18,
.push-19, .push-20, .push-21,
.push-22, .push-23, .push-24 {
  float:right;
  position:relative;
}

Edit #3: /blueprint/src/typography.css

The problem: the .left class has been omitted, which can cause unexpected results.

The solution: Replace the following lines of code:

p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

with this code:

p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

Edit #4: /blueprint/screen.css

The problem: As above, the .left class has been omitted, which can cause unexpected results. Do exactly the same in the release code, i.e.

The solution: Replace the following lines of code:

p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

with this code:

p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

Edit #5: /blueprint/src/typography.css

The problem: the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line. (Thanks to Steve Yorkstone for spotting this one.)

The solution: Replace the following lines of code:

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; }

with this code:

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em;}

Edit #6: /blueprint/screen.css

The problem: As above, the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line.

The solution: Replace the following lines of code:

h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}

with this code:

h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}

Edit #7: /blueprint/src/ie.css

The problem: Legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column.

The solution: Replace the following lines of code:

* html .column { overflow-x: hidden; }

with this code:

* html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4,
* html div.span-5, * html div.span-6,
* html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10,
* html div.span-11, * html div.span-12,
* html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16,
* html div.span-17, * html div.span-18,
* html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22,
* html div.span-23, * html div.span-24 {
  overflow-x:hidden;
}

Edit #8: /blueprint/ie.css

The problem: As above, legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column. Do exactly the same with the release code, i.e.:

The solution: Replace the following lines of code:

* html .column { overflow-x: hidden; }

with this code:

* html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4,
* html div.span-5, * html div.span-6,
* html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10,
* html div.span-11, * html div.span-12,
* html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16,
* html div.span-17, * html div.span-18,
* html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22,
* html div.span-23, * html div.span-24 {
  overflow-x:hidden;
}

Changelog

The last thing I do is update the changelog file to record the edits made, and change the version number in screen.css to 0.7.2 so that I know that this is my updated version.

I hope that helps someone.

Updates to version 0.8

I’ll blog later about things I’ve spotted need fixing in version 0.8.

Blueprint CSS framework v.0.8 cheatsheet

Blueprint CSS cheatsheet

I’ve updated my cheatsheet for the Blueprint CSS framework (version 0.7.1) as well as create a new one for the latest version of the Blueprint CSS framework (version 0.8). They can both be downloaded from Scribd.com:

WeBuilder 2008 vs Dreamweaver CS4

Adobe Dreamweaver CS4 and WeBuilder 2008

I have two website editors of choice:

For years I heard that Dreamweaver was the Web editor of choice for the serious Web developer. At the time I wasn’t a serious Web developer, I was a lowly curate and couldn’t afford a copy (I made do with trial versions) so I had to find another solution.

From 1st Page 2000 to WeBuilder

For about five years I used Evrsoft 1st Page 2000. For a free text editor it did everything that I wanted and more — it was certainly a good step up from Notepad — but as the Web developed I grew increasingly frustrated by its lack of support for the latest standards (XHTML anyone? CSS 2.0, etc.). The application was really feeling dated.

But I hung on in the hope that a new, promised version would be the solution I was needing. Month turned to year, nothing appeared and I faithfully struggled on. “Better the Web editor you know …” and all that.

The day that I installed the first public beta on their new version, First Page 2006, was the day that I finally gave up on Evrsoft and moved to WeBuilder. I haven’t looked back.

WeBuilder

That’s when I discovered Blumentals WeBuilder 2005 (version 6.3). Not only was it similar in layout to 1st Page 2000 it far surpassed it in terms of both Web standards and application features.

I’ve now used WeBuilder (which I presume is pronounced “web builder”, although in the office we called it “we builder”) ever since, upgrading through versions 7 (2006), 8 (2007) and now 9 (2008). And it just gets better and better with each new release. There is a very active community forum and its developers really do listen to requests for new features. I’ve had one of my requests included (to do with how the file explorer displays files), and I put my voice to calls for Subversion integration, which appeared a version or two ago.

Matching and missing HTML tag highlighting

One of my favourite features in WeBuilder is the code highlighting:

Code highlighting in WeBuilder 2008

As you can see from the screenshot above, if you click within a tag it highlights the tag in green and shows the corresponding end tag. It also highlights broken tags – you can see immediately that there’s a problem with the anchor tag (<a>).

It’s a really impressive feature that makes navigating code very easy, particularly when you have quite a few nested DIV tags.

Meanwhile in Dreamweaver

Looking at the same code in Dreamweaver CS4, when I click on the list-item tag (<li>) nothing happens within the code window; there is no code highlighting.

Dreamweaver screenshot of code

Instead, the corresponding list-item tag in the code navigator bar at the bottom of the window subtly highlights. Clicking on that tiny navigation item then highlights the code in the code window but it’s nowhere near as intuitive, doesn’t give as much immediate feedback to the coder and involves having to move the mouse to the bottom of the code window which is fiddly.

File associations

Another area where I think WeBuilder outshines the mighty Dreamweaver is in the area of file associations.

When I first installed both applications they each asked me which file types I’d like to associate with that program, e.g. .css, .js, .php, .xml, etc. I made my selection and the application negotiated a deal with Windows, so that I could simply double-click a CSS file, for example, and as if by magic the Web-developer-application-of-choice appeared.

But what if you change your mind? What if you now want to associate PHP files with WeBuilder instead of Dreamweaver, so that when you double-click a CSS file it opens in WeBuilder rather than Adobe’s offering?

In WeBuilder …

In WeBuilder it’s quite simple. Go to Options > Preferences, click on Files then select Associations:

File associations dialog in WeBuilder 2008

In Dreamweaver CS4 …

In Dreamweaver … I’ve still to find out how to do it. I’ve read through two Dreamweaver CS4 books, searched Google down to about results page 10 and I don’t think you can. I think you have to do it manually via Windows Explorer: Tools > Folder Options > click on the File Types tab.

I can’t understand why. Unless, of course, Adobe reason: why would anyone want to use anything other than Dreamweaver?!

Question: does anyone know how to do this from within Dreamweaver, or how to get DW to run the initial file association dialog again?

Project management

Where I think Dreamweaver CS4 completely outshines WeBuilder is in the area of project management. In WeBuilder you can define projects, which is a really useful feature, but it doesn’t manage them to the same extent that Dreamweaver does.

Dreamweaver scans your site code and builds a cache. It knows what’s linked to what, so if you rename a file, for example, it will offer to update links to that file throughout your site. And if you site has 600+ pages, as one of mine does, you’ll realise what a time-saver that is. For that feature alone it’s worth the money!

I remember back in the days of 1st Page 2000 spending two weeks going through a site simply correctly links to files that I’d moved because I’d not planned the site in full before coding.

Extensions

The other advantage that Dreamweaver has over WeBuilder is its support for community-created extensions, which add extra functionality to the application.

Want to add microformats, Google maps, PayPal or Skype buttons, YouTube videos — just download and install the extension.

WebAssist

WebAssist create a number of amazingly good extensions. Some are free, the best ones cost, but are very reasonable considering what they do and the time and potential frustration that they avert.

I thoroughly recommend Eric Meyer’s CSS Sculptor extension and the related CSS Menu Writer extension, and I like the look of the new Jeffrey Zeldman’s Web Standards Advisor extension.

Conclusion

So, is Dreamweaver better than WeBuilder? In some ways, yes … but there are some features in WeBuilder that I struggle without now (particularly, especially the code highlighting). I can see me using a combination of them both for a few years to come.

That all said … I do fancy checking out WestCiv Style Master assuming that it supports CSS 2.1. I suppose it’s too much to expect it to handle elements of CSS 3, given that the latest version was released in 2006.

Smarter web design article in .net magazine

Smarter and faster web design

The current edition of .net magazine (October 2008, issue 181) has an interesting feature article entitled “Smarter and faster web design”.

Magazine writer Craig Grannell promises “you don’t need to work harder, or for longer hours, to get better results. You just need to work smarter!” A sucker for productivity tips here’s my take on what he has to say:

1. Get away from the computer

This is one my favourites, and one that I use all the time. Well, not all the time, otherwise you’d never find me at my desk!

Lateral‘s Simon Crab offers this thought:

“… today’s web designers have a subconscious belief that the computer will provide an answer as long as they sit in front of it for long enough”

Instead of sitting staring at your design software of choice (Photoshop, Paint Shop Pro Photo, Publisher, Illustrator, Visio, etc.) he suggests going out and get a different perspective on the world. Go to exhibitions, browse magazines at the newsagent, walk around and look around you.

I can’t remember where I first learned this, but it’s been really helpful advice. Get inspiration from other non-Web environments. I’m forever ripping out pages from magazines, scanning them or simply gluing them into a scrapbook. I’ve found inspiration in books, magazines, TV, architecture, fashion, nature … step away from the computer!

2. Explain the idea to a non-techie

I don’t know how many times Jane has patiently sat and listened to me wittering on about some design idea, and then pondered carefully as I finish with the killer question “Does that make sense?”

Crab notes:

“A foolproof test is verbally explaining an idea to a non-designer. If you can’t succinctly explain a concept and get across how it will look and feel, it’s probably not a great idea.”

3. Paper and a pen

This was a tip that struck a chord with me: use simpler tools. Don’t rely on massive, expensive software applications. Get back to basics.

I have a home-made pad of A5 paper next to me on my desks, both at work and at home. Any scrap A4 paper that would otherwise go into the recycling box gets ripped in two and bound together with a foldback clip.

The next bit of advice is from usability guru Jakob Nielsen:

The most important tools for a smart designer are a pen and plenty of paper. This is all you need to do user testing — no fancy lab required. Just sit next to a customer as they attempt to use your website.

Mock things up on paper first. Show it around. Get the big things right first, before you waste time writing code that might never be used.

And for those who say “I can’t draw” advice from GapingVoid:

They’re only crayons. You didn’t fear them in kindergarten, why fear them now?

4. Simpler software

37signals founder Jason Fried:

[Our software products] do a few things really well and get out of people’s way. And when products do a few things really well, they’re more pleasant to work with, and easier to learn and understand.

Find software that does this for you. A few of my favourites:

I use these applications again and again for specific tasks because they’re quick, simple to use and reliable. I’ve got other, bigger applications that will do these tasks but these do it for me quickly.

5. Getting Things Done

Interesting advice from Khoi Vinh from NYTimes.com about GTD:

Unless you really feel GTD is perfect for you, don’t bother. It’s over-rated and just about the (admittedly satisfying) pleasure of organising a system for getting things done, rather than actually getting things done.

I can see that, but I would also say: don’t reject it simply because it doesn’t work for other people. Give it a go, and adopt the things that do work for you, such as a zero-inbox policy.

I was impressed with Andy Budd’s approach to email. He answers emails that take under five minutes, deletes the junk and then files the rest in folders with titles such as:

  • Action
  • Hold
  • Respond
  • Waiting

I’ve been inspired to try something similar.

6. Reuse code

Re-use tried and tested modules of code, for example:

  • Frameworks for CSS, PHP, JavaScript
  • Base it on the default WordPress code (clean, valid and well-structured code)
  • Create your own library of code (many code editors allow you to store these as snippets)

I loved Edward Barrow’s reason for using prebuilt libraries:

He likens using a prebuilt library to “getting an expert programmer to work on your project for free”.

Whenever I do something new I now ask myself whether this is something that I’m likely to need again. If it is I’ll store it as a snippet in WeBuilder 2008, my main code editor.

I categorize everything and have folders and subfolders in my code library arranged like this (I’ve expanded the HTML folder):

  • Apache
  • CSS
  • htaccess
  • HTML
    • !DOCTYPE
    • Basic Tags
    • Elements
    • Forms
    • IE Conditionals
    • Meta
  • JavaScript
  • jQuery
  • Lorum Ipsum
  • Microformats
  • PHP

I’ve got all sorts of goodies in here, that I don’t have to go searching for because I know they are there at my fingertips.

7. Source control

Before I discovered Subversion I used to create my own version control system. But I ended up with umpteen files and folders along the lines of:

[backup-070620]
[backup-070621]
index2.html
index3-test.html

It got ugly, and if I made a mistake or needed to roll back to a previous version I couldn’t very easily do it. I then discovered FileHamster but I couldn’t quite get the hang of it. I found it a little too intrusive.

I was then introduced to Subversion, and discovering that you don’t need to incorporate it into Apache server I installed the Subversion server onto my PC at home and it’s been great! I use the TortoiseSVN client.

Quoting once again from the article in .net:

“In fact, the simplest and smartest investment you can make for any project is to use some sort of version control system,” says Aral Balkan, web developer and conference organiser.

What are your tips?

What are the tools, tips that you find most useful, that make you most productive?