Updating content pages

As I think I said before, I am working on a redesign. In fact, I've been working on it for months, on and off, when the book permitted. Now that the book is ready I have more time to spend on it, and it's coming on nicely. (Oh, and before you ask, the frames will go. They've done their duty and I don't need them any more.)

Currently I'm going through all content pages and updating them; and since these updates go live the minute I finish them, I thought I'd give you an overview of what I'm doing.

One general remark: I'm updating the pages in the new design, which means that in the old design some aspects of the tweaked pages (especially the screenshots) seem out of place. I ask for a little patience: all these oddities will blend well with the new design, once it's in place.

JavaScript

Part of the redesign is a major restructuring of the JavaScript pages and navigation. The old navigation categories will be removed, and new ones installed that follow the book's scheme: Core, BOM, Events, DOM, CSS modification, Data retrieval. The unveiling of all this will have to wait for the official launch of the redesign—the new sitemap/main navigation is not compatible with the current one; it needs scripts that are only available in the new version.

In the past few weeks I've been going through all JavaScript pages to decide which ones will remain active and which ones will be archived. Most JavaScript pages date from 2002 and before, and the effects they describe (such as the scrolling layer) are—shall we say—not really up-to-date any more. It's high time to move a lot of pages, for instance the entire DHTML subcategory, to the archives.

In fact, now that I'm finished I see that of the 86 JavaScript pages that are currently active, 37 will be archived (43 %) because they're too old and the subject doesn't interest me any more. Only 49 will remain active; and it's these pages that I've tweaked in the past few weeks.

The tweaks consisted of making the pages valid XHTML 1.0 Transitional if possible, inserting references to the book where appropriate, and a quick content scan to rewrite a few sentences, remove references to Netscape 4, and more such minor edits.

In any case, all JavaScript pages that will remain active have been changed over the past three weeks or so, so if you encounter a page that was last changed more than three weeks ago, it's going to go to the archives when the redesign falls into place.

Usable Forms

The Usable Forms script is the only one to see a major update. Back in November I created a new version of the script that solves a few problems and ugly constructs in the old one. It's this version 2.0 that I use as one of the example script for the book. If you know and like the old script, study the new one. The page contains a table that highlights the changes.

CSS

The CSS pages are currently going through the same process. I'll archive a few (but only a few) of them; and I'm tweaking the other pages in the same way as the JavaScript ones.

These pages don't show up in the navigation frame because I don't update the old sitemap any more.

I added little scripts to the position, display, and overflow pages, so that you can now dynamically change these three declarations and see what happens.

Dynamic tests

In addition, Dave Hammond, who created the WebDevout tables, has had the excellent idea of not only testing advanced selectors like pre + p in a static environment, but also in a dynamic one. Take this example from the + selector page:

The paragraph is now italic, as it should be. Now we use a little DOM scripting to insert another paragraph after the <pre>:

Now the generated paragraph should become italic, as it's the next sibling of the <pre>, but the static paragraph should become roman, since it's not the next sibling of the <pre> any more.

However, Firefox and Safari have grave trouble here: they don't remove the italics of the static paragraph. This is in fact a general rule: these two browsers generally don't remove styles after a DOM update, while Explorer, Opera and iCab generally do (provided they support the selector, obviously).

What's next?

All in all this will keep me busy for a few more days. When all CSS pages have been edited or archived, I will turn to the high-level interaction of the redesign. I need a few new general pages, while some of the old general pages (such as the About page) need a few more tweaks. In addition I have to add a few finishing touches to the new design, such as an icon for visited links.

Comments

1 Posted by zanbowser on 21 August 2006 | Permalink

i'm sure that the redesign will be awesome, PPK. i'm definitely looking forward to reading your book (fiancée promised me a bunch of books from my wishlist for supporting her in finishing her teaching certification) since your site's been so informative and helpful for me.

if you need any testing support for the new design, i would be happy to help.

2 Posted by Mark McDonnell on 21 August 2006 | Permalink

I can't wait to see the new design! and I was highly disapointed when you informed everyone your book release was being delayed (I was wondering why it hadn't arrived at my office when I had been expecting it)

Do you have a rough estimate on when the design will be live as I'm excited to see it and the newly updated content and navigation etc etc.

Many thanks for such a great and informative website it has saved my life the past few years.

Kind regards,
Mark

3 Posted by Alex Lein on 21 August 2006 | Permalink

I really like the new dynamic CSS tests, such a great way to test true compatibility.

I'm looking forward to the new design. I'm also very interested how you will organize the content and navigation to be accessible and easy to use.

4 Posted by Thomas Kjørnes on 21 August 2006 | Permalink

Will you include information about IE7, if the final version comes out in due time?

5 Posted by Rasesh on 21 August 2006 | Permalink

Looking forward to the new design as well... if you need any testing done, i'll be glad to be of some help.

6 Posted by Lanza on 21 August 2006 | Permalink

Yehaaa ! Quirksmode.org without frames. I can't wait to see it.

7 Posted by Tino Zijdel on 21 August 2006 | Permalink

Getting rid of the frames will indeed be a huge improvement.
I however still wonder what your motivation is to choose for XHTML Transitional. You have obviously no actual need for the XML-serialization since you still send your documents with the text/html mimetype (so it isn't rendered as XHTML at all but as HTML and browsers actually need to apply error-correction for the mallformed syntax).
I can understand the choice for Transitional since this update is actual a transition from old markup to more modern markup, but in some way the combination XHTML and Transitional also is a bit odd because when you actual make a transition from old HTML to XHTML you might as well strive for Strict compliance (and benefit from the slightly improved CSS-compliance in IE7 as a bonus).

Because XHTML(1.x) is nothing more but the XML-serialization of HTML it doesn't really add anything in terms of semantics or strictness. If you don't need this serialization and/or just plan to keep sending your documents as HTML an HTML DTD would seem like a more logical choice.

8 Posted by AJ on 21 August 2006 | Permalink

hi Peter-Paul,

Big fan of the site, I'm in the habit of typing http://quirksmode.org instead of http://www.quirksmode.org, which doesn't actually work. Can you get your ISP to setup an A record for quirksmode.org?

Thanks!

9 Posted by Keuken on 22 August 2006 | Permalink

Really looking forward to see the new design and to be ones the site could use a new look ;)

10 Posted by Leo on 23 August 2006 | Permalink

I second AJ, quite often I end up Googling the site up since I forget what should I type...

11 Posted by Harmen Janssen on 24 August 2006 | Permalink

I can't wait to see the new design. I'm very curious to what you will come up with, especially if there are gonna be new Javascript features in it, since you're losing some functionality that relied on the use of frames.

12 Posted by Greg Jones on 24 August 2006 | Permalink

As a complete newbie, all I can say is 'damn.' Just when I've figured out how... I loved the idea of menu generation from a sitemap. How many times I've re-written my menu tree? sigh.

13 Posted by ppk on 24 August 2006 | Permalink

A few reactions:

- XHTML. The reason I use XHTML is that I want to keep the option open of importing my pages through an Ajax script. The redesigned site doesn't do that, but I might want to start importing pages in the future, and therefore they should be XML.

- Sitemap/main nav: In the redesigned site, the sitemap will continue to double as the main navigation.

- www: I'll take another stab at going through the odd workflow of my provider.

- IE 7 compatibility: most tables already include IE 7 information. The notable exceptions are the W3C DOM tables; they'll have to wait a little while longer.

14 Posted by Tino Zijdel on 24 August 2006 | Permalink

"but I might want to start importing pages in the future, and therefore they should be XML"

Not necessarily, only when for some reason you need to use the responseXML iso the responseText.

15 Posted by Greg Jones on 25 August 2006 | Permalink

"In the redesigned site, the sitemap will continue to double as the main navigation."
Great news - I've gone from js being - there be dragons! - to having some small understanding, all credit to you. Looking forward to the redesigned site.

16 Posted by Mone on 25 August 2006 | Permalink

If you need people to test i'm here, quirksmode helps me a lot and i will be happy to give some help back

17 Posted by Ivar on 28 August 2006 | Permalink

I have to concur with the others here, it will be interesting to see what the new design will look like, and what javascript magic you implement.