Before I go any further I have to make it clear that I am no PHP expert, in fact I hardly know any PHP - I’m learning but for now I’m just stubborn and persistent.

Here’s how I have tweaked the code. The form that the plugin generates is fine and validates. However, while I was testing how the missing field errors were displayed I noticed that they were piled up on top of the first form field. (please note I am using my own CSS to control the form elements not the CSS file that comes with dd-formmailer)

The source code for this was interesting:

1. <div class="ddfmwrap">
2. <div class="ddfmerrors">Errors!</div>
3. <div class="errorlist">Missing required field 'Email'<br />
4. Missing required field 'Subject'<br />
5. Missing required field 'Please confirm that you are not a spambot'<br />
6. Missing required field 'Message'</div><br />
7. <div style="clear:both;"><!-- --></div>
8. </div>

As you can see that despite being given the class of ‘errorlist’ the markup is not actually a list, just text in a <div> made into a list using line breaks. It also contains a <div> with some inline CSS. Whilst this code validates, it is not semantically correct. In addition the lack of any formatting elements such as <p> or <li> makes the typography hard to control and the culprit for the error list text stacking up on top of the label for the first field.

A much better (and semantic) way to present this would be:

1. <div class="ddfmwrap">
2. <h4 class="ddfmerrors">Errors!</h4>
3. <ul class="errorlist">
4. <li>Missing required field 'Subject'</li>
5. <li>Missing required field 'Please confirm that you are not a spambot'</li>
6. <li>Missing required field 'Message'</li>
7. </ul>
8. </div>

So I had a look around in the script for the formmailer (dd-formmailer.php) and found code that controls the error list:

1. if ($errors) {
2. $o .= '<div class="ddfmwrap"><div class="ddfmerrors">' . DDFM_ERRORMSG . '</div>';
3. $o .= '<div class="errorlist">';
4. foreach ($errors as $err) {
5. $o .= $err . '<br />';
6. }
7. $o .= '<div style="clear:both;"><!-- --></div></div>';

and changed it to:

1. if ($errors) {
2. $o .= '<div class="ddfmwrap"><h4 class="ddfmerrors">' . DDFM_ERRORMSG . '</h4>';
3. $o .= '<ul class="errorlist">';
4. foreach ($errors as $err) {
5. $o .= '<li>' . $err . '</li>';
6. }
7. $o .= '</ul></div>';

which gave me the following:

Much nicer! I also changed the DDFM_ERRORMSG form ‘Errors!’ to something a bit more friendly (to do this you need to go into the ‘lang’ folder of the ‘dd-formmailer’ plugin, select the file that coresponds to your language, open it up in a text editor and change define('DDFM_ERRORMSG', 'Errors!'); to anything you like e.g. define('DDFM_ERRORMSG', 'Whoops! There were some errors.');)

Now that I have a nice semantic list, I can make it a bit more funky using a little bit of CSS to give me:

Lovely!

Well. that’s it for my first tutorial. Hope it was helpful.

The first change is this little fellow - Huw, born in October last year and it is amazing how something so small can take up so much of your spare time.

The second change is the upcoming makeover for the site. It has been a while in the making but I have been taking time to get things just right.

The new site is built using Wordpress as the ‘back-end’, unlike the old site, which is/was a bit of a ‘Franken-site’ of static pages and a Worpress blog for the ‘notes’ section. It worked fine like that but was I pulling my recent posts into the static pages using an RSS parser which was not ideal. So, I have learned how to use Wordpress properly and the current release (2.3) is actually more flexible as a CMS than I thought. I think I’ll probably move to Expression Engine eventually as it offers more flexibility, but as I already had a Wordpress based blog I set myself the challenge of making it work for me.

The main change for the new site (and indeed the way I work in general) is how it is constructed. After reading the chapter by Mark Boulton in the book Web Standards Creativity and Richard Rutter’s 24 ways article I have become fascinated by typographic design and grid-based layouts. The new site is centered around a six column grid and a 21px vertical rhythm - I’ll write more about this in later posts.

So, look out for the new site and let me know what you think.

The problem has to do with the way that iTunes/Quicktime accesses the hard drive when doing multiple simultaneous read/writes to/from the array.  And, in hindsight, this is presumably why mp4/QuickTime files play OK from a non-RAID external hard drive. It would also explain why, about a month ago, I had a major system crash while trying to watch a QuickTime file - luckily I managed to restore Vista to a previously known good configuration! But it was touch and go for a while.

I think the problem is more to do with QuickTime rather than iTunes as music files seem to play perfectly well (although I guess the mini-freeze when trying to add album artwork to an mp3 may have something to do with the read/write to the RAID array?)

So who’s fault is it Apple, Intel or Microsoft?

“With universal search, we’re attempting to break down the walls that traditionally separated our various search properties and integrate the vast amounts of information available into one simple set of search results”

Also making an appearance is the new navigation bar at the top of all Google pages making it easier to access other Google services such as Gmail.

I’ve just been having a play with this - and on the whole it works really nicely. The main search results window still seems to be populated mainly by websites, but on searches for more popular subjects the odd image and video make it into the ‘blend’. However, if I you are searching specifically for an image you need to click on ‘images’ in the new navigation bar. The new contextual navigation links that appear above the main search window are also quite useful for helping to narrow down the search.

All in all I think the ‘blend’ of results in the main window could be a bit better, particularly for images, but as the official Google blog states:

“…these are just the beginning steps toward the universal search vision. Stay tuned!”

So what was the straw that broke the camel’s back? The humble q tag! I like to keep my code as semantic as it can possibly be - but it would seem that IE doesn’t want me to do that! I know it’s just one little letter ‘q’ , but it allows me to semantically add a short inline quote and provide meaningful additional information via the cite and lang attributes.

Most modern visual browsers (except IE!) will add the quotation marks automatically when q tags are used and these can be made language specific with the lang attribute. But that’s not very standards compliant I hear you cry. True, it does give this little HTML tag a degree of presentational skill, but personally I think this is far outweighed by the semantic value.

So what am I to do? I know you can use JavaScript to fix quotes in internet explorer. CSS wise, the :before and :after pseudo-elements would do the trick nicely, but are not supported by IE (see what I mean about frustrating)! In an A List Apart article entitled Long Live the Q Tag the author suggests adding the quotation marks outside of the q tag for the benefit of IE and then using the :before and :after pseudo-elements to take them away again in compliant browsers.

I know that using the JavaScript method combined with a conditional comment so that only IE 7 and below run the script is probably the best option, but JavaScript always seems a bit too much like pixie magic to me (probably because I don’t understand it). At least I know what is going on with the CSS method, although it is a bit of a backwards way of getting round the problem!

Perhaps I’ll just forget about IE, keep using the q tag as it is and wait for the quote element in XHTML2. What will I do in the meantime - Browse Happy!

Then wish no longer!

Microsoft Save as PDF or XPS is here and:

…allows you to export and save to the PDF and XPS formats in eight 2007 Microsoft Office programs. It also allows you to send as e-mail attachment in the PDF and XPS formats in a subset of these programs.

I’ve just tried it out and it seems to work (for me at least) a lot better than other free pdf writers that I have tried. A nice little add-on for those of us who can’t afford the Adobe pdf writer!