Slashdot HTML 4.01 and CSS

After 8 years of my nasty, crufty, hodge podged together HTML, last night we finally switched over to clean HTML 4.01 with a full complement of CSS. While there are a handful of bugs and some lesser used functionality isn't quite done yet, the transition has gone very smoothly. You can use our sourceforge project page to submit bugs and we'd really appreciate the feedback. Thanks to Tim Vroom for putting the HTML in place, Wes Moran for writing the HTML in the first place, and Pudge for writing the code to convert 900k users, 60k stories, and 13 million comments to comply. And for the brave, download the stylesheet and start experimenting with new themes and designs for Slashdot: some sort of official contest to re-design Slashdot is coming soon, so you can get a head start now.

Response to some reader notes in the forum:

• There are a handful of validation errors. Some will be fixed in the next day or so. Others are external HTML that is out of our hands. We may never toally validate with zero errors. yes we're comfortable with that.
• We're not going to XHTML for the same reasons as above- we control almost all of our HTML, but some of it (like the ads, and imports from other sites) just isn't ours to muck about with. We could go to XHTML, and someday we might, but today we're happy to just get to HTML 4.01 and CSS.
• Light Mode will be back in some form or another. The problem is that light mode served two purposes: Low Bandwidth, and Simplified Design. The later will probably be handled with a CSS theme (we have a handheld theme already). Low Bandwidth is a little trickier, but we will resolve that soon.
• All of our code is beta tested on www.slashcode.com and use.perl.org. Unfortunately there's always a few issues from those tiny tiny sites and the giant bohemoth that is Slashdot itself.

Kudos on a great upgrade!

[AKAImBatman (238306)]

I was wondering if there was going to be a story on this. I noticed the upgrade last night. Let me be the first (post? ha ha) to say, "Good job guys!" Yeah. it took you awhile. But better late than never, eh?

And for the brave, download the stylesheet and start experimenting with new themes and designs for Slashdot:

I was just going to ask if we could get a few more CSS styles like we saw in the Beta. Glad to see you're already on top of it. :-)

I did some testing with a FireFox version I *know* contains the infamous "Slashdot bug". (Not sure if it's corrected in recent versions since I normally use Mozilla or Safari.) As far as I can tell from testing, the bug is completely fixed. Considering the upgrades, one would expect this to be the case, but you can never be too sure.

Last but not least, the "Politics" and "Apple" sections look as nice as ever, but I'm afraid that the other sections look worse than ever. Can we turn off the colors for the other sites until better CSS sheets can be made? (Preferrably ones that don't hurt our eyes?) Yeah, the games section has the full treatment too, but I swear that the shades of purple it uses are causing me to go blind.

An alternative solution to turning off the CSS for the other sections is to provide the front page CSS as a style option on all the pages. That way we could simply shut off the crazy colors without pulling the whole "games.slashdot.org/article.pl -> slashdot.org/article.pl" trick.

Well, that's my 3.14159265 cents worth. Again, good job /team!

Re:Kudos on a great upgrade!

[mfh (56)]

I was wondering if there was going to be a story on this.

Me too... I blogged this earlier [www.phk.ca] today, and briefly (first impression) journal'd it too [slashdot.org], and would love to comment now on some more technical aspects of the page now that I've had time to examine it more thoroughly. Kudos to all involved on a very positive step in the right direction!

The CSS is really clean and impressive. I don't have a problem with it at all at this point, but CSS was never really my strong suit so you may want to get a second (thousand) opinion on that.

I have to admit, it's nice to see the page load faster, with fewer visual errors in Firefox. The links and text seems quite a bit nicer. Now I can modify the CSS of the site to make it look however I want on my own system too, so that is certainly a benefit.

I'm sure many will point out that there are lots of errors in the HTML.

You can see for yourself, here [uitest.com]. That part isn't that important, because once you begin the road to enlightenment, that zen of CSS [csszengarden.com], it's a journey that has no return.

I'm actually quite proud of Slashdot today, even though I merely post here.

I will be far more proud when the new moderation systems come online. Not sure how many of you submitted ideas and had discussions with CmdrTaco on that subject but I had a thread going with him for quite some time last year. Much of what was said was repetitive, geared towards filtering out what he already had considered or someone else had suggested, but he genuinely listened to some of the suggestions that were unique. I wonder what the timeline is on the moderation changes... Taco?

Re:Kudos on a great upgrade!

[Anonymous Coward]

Me too... I blogged this earlier today, and briefly (first impression) journal'd it too, and would love to comment now on some more technical aspects

Wow, what an exciting life you live.

Re:Kudos on a great upgrade!

[mattgarnsey (660568)]

Show some repect, coward! That's a 2-digit UID you're talking to!

Re:Kudos on a great upgrade!

[jaiyen (821972)]

But he bought it on ebay [slashdot.org]

MFH's Law

[mfh (56)]

What's more lame is parent saved a really old comment URL that I made, just so he could be petty and vindictive. That he saved that trivia in his puny mind, where the answer to tomorrow's lottery numbers could be stored instead -- that he wasted the time of every reader on Slashdot just to point out the trivia is confounding and inappropriate.

It's turning into a morph of Godwin's Law [wikipedia.org].

Because it's my law, I will call it MFH's Law:

The likelihood that someone will mention MFH(56)'s Slashdot account being purchased on Ebay approaches 100% as the moderation of MFH(56)'s comments increase.

Re:MFH's Law

[Bertie (87778)]

You might only have two digits, pal, but mine's palindromic. Therefore my dad could beat your dad in a fight.

(I'll now sit here and wait for UID #314159 to turn up and swing his dick about)

Re:Kudos on a great upgrade!

[SoloFlyer2 (872483)]

The First 20 Slashdot (85645) users:

CmdrTaco (1)

Hemos (2)
drendite (3)
CowboyNeal (4)
samzenpus (5)
jgoldsch (6)
CLorox (7)
Emmett Plant (8)
keith (9)
ximenes (10)
velkro (11)
RAD Kade 1 (12)
TechNoir (13)
Christopher Bibbs (14)
DeadBeef (15)
Tom Rothamel (16)
Rolf W. Rasmussen (17)
davidu (18)
steffenz (19)
Robogoatgruff (20)

and some other intersting user numbers :)

Bill Gates (156)

Microsoft (9967)
Windows (452268)

Linus Torvalds (128589)
Linux (40410)
Debian (27049)

Re:Kudos on a great upgrade!

[hawkstone (233083)]

You can look up by UID if you want:

http://slashdot.org/users.pl?uid=1 [slashdot.org]

Oh, and UID 0 is always the current user.

Re:Kudos on a great upgrade!

[garcia (6573)]

did some testing with a FireFox version I *know* contains the infamous "Slashdot bug". (Not sure if it's corrected in recent versions since I normally use Mozilla or Safari.)

Well they fixed it for Firefox but they added it in for IE (purposefully probably). I've seen it twice now.

Re:Kudos on a great upgrade!

[De Lemming (227104)]

the infamous "Slashdot bug". (Not sure if it's corrected in recent versions since I normally use Mozilla or Safari.)

It's fixed, but not in the 1.0 branch (1.0.7), only in the head. So the fix is included in the 1.5 Beta 1 (Deer Park) [mozilla.org].

Here's the Bugzilla entry (direct links from Slashdot don't work, so copy/paste): https://bugzilla.mozilla.org/show_bug.cgi?id=21752 7 [mozilla.org].

Re:Kudos on a great upgrade!

[muszek (882567)]

"Sorry, links to Bugzilla from Slashdot are disabled."

chickens

Re:Kudos on a great upgrade!

[waffle zero (322430)]

Site specific CSS is already in Firefox 1.5 Beta 1. To overide any page styles for slashdot you could place the following in your userContent.css file:

@-moz-document domain(slashdot.org)
{
/* CSS rules here apply to:
    Any page whose URL's host is slashdot.org or ends with .slashdot.org
  */
}

For more info see:
http://lists.w3.org/Archives/Public/www-style/2004 Aug/0135.html [w3.org]

Re:I disagree

[ki4iib (902605)]

+4 Funny for "Hahahahahaha :)"?!!! Hell, I can beat that. Check it:

"BWWWWWWWWWAAAAAAAHAHAHAHAHAHAHA!!"

oh and :D

Let me be the first to say ...

[YankeeInExile (577704)]

I for one, welcome our new Standards Compliant Overlords.

Re:Let me be the first to say ...

[suwain_2 (260792)]

Standards Compliant Overloads?

S.C.O.?

*shudders*

Re:Let me be the first to say ...

[Gleng (537516)]

Well, this year, Slashdot updates it's code, Debian Sarge is released, and Apple switches to x86.

If DNF comes out as well...

Let's just say that that would be the fourth horseman.

WC3 validator == very close

[jandrese (485)]

Although the Slashdot guys have blocked it again, there was a short time this morning where the validator could get through. It showed the main page as validating Ok for the most part, but some of the sidebars (especially the Freshmeat sidebar) as failing miserably. Just looking at the source doesn't give me a headache anymore though, which is a massive improvement.

Re: Just looking at the source

[MexicanMenace (673792)]

"Just looking at the source doesn't give me a headache anymore though, which is a massive improvement."

Yeah, all I see now is blonde, brunette, redhead.

Wait a minute, that's not /.!

Getting There...

[lukewarmfusion (726141)]

I'm glad to see the improvements. I was surprised to see a couple of the pages loading much faster and my text-size was slightly decreased from the previous version. Looking under the hood, I saw that the move was made. However, there are a few items I noticed (I'll submit to the SF page as appropriate)...

Validator says it's not correct Strict. There are 13 errors. Some areas still have FONT tags and whatnot, but I don't know if those are includes from external sites (and therefore out of /.'s hands).

<font size="3" color="#006666"><b>Search Freshmeat:</b></font><br>

Anyway, I'll be working on an alternate design right quick. I also expect to see a Firefox extension to load up a custom Slashdot stylesheet (and maybe a /. styles database site to find good ones).

Welcome to the 21st Century.

Well, I guess I have the best compliment

[OS24Ever (245667)]

At first glance, it doesn't look any different to me, so you must have done something right.

Except then I hit reply and the post a comment dialog looks a bit different but not bad.

Must have been quite the effort, congrats.

close... so close

[Thng (457255)]

http://validator.w3.org/check?uri=www.slashdot.org [w3.org]

summary: "This page is not Valid HTML 4.01 Strict!"

Sure, only 13 on the front page of /. (don't remember how much before) and they all seem relatively minor. Still, sure is better than what it was. Glad to see it. thng

Count on 'Em

[Doc Ruby (173196)]

Can we get some stats APIs? Like per-story counts of unique repliers (+/- ACs), broken down by point score, with metadata (date/time posted, categories, submitter ID, "author" ID). And links in the story, and comments (per point score)? How about some karma details?

I'd like to see a Slashdotter make an app that shows trends of posting results. And an app that draws networks between posters, destinations, categories, etc. Let's rub Slashdot's soft green underbelly!

Aha!

[GreatDrok (684119)]

So that's what is wrong with it. I have been looking at the page all day thinking there was something weird going on and now I know!

Styles - firefox

[hrbrmstr (324215)]

Most die-hard firefox users will know this, but since Taco threw down the gauntlet, those mere firefox mortals who wish to muck with the CSS and "win a prize!" can take a look at: Jesse Ruderman's page [squarefree.com] on using local style sheets (good links there) and there's always the style sheet chooser plus [geckozone.org] add on (yeah, the site's in French and I haven't tried that extension in a while since I use Safari mostly, but it should work).

Well Done.

[feargal (99776)]

After eight years, this news website has finally gotten around to using proper HTML.

So, will it be another eight years before this news website gets around to using some proper editors?

Impact on Bandwith?

[fons (190526)]

I would be very interested to know wheter this change has a big effect on the slashdot bandwith usage.

Could we also...

[TCM (130219)]

...get the following fixed? When you browse with a threshold that doesn't show all comments, the page numbers to click are completely broken. Sometimes, when I click on the 3rd or 4th page, I _still_ see the first post according to my threshold.

There is actually no way to view all comments in order. I usually resort to clicking a page way later, like the 6th or 7th until I see a comment other than the first. But then I don't know if I missed any.

The pages seem to count all comments regardless of score. The proper way is to count the posts _after_ the threshold is applied.

This has been bugging me _for ages_!

Holy Shit!

[Anitra (99093)]

Ever since the November 2003 article on A List Apart [alistapart.com], I've been wondering if this day would come. Almost two years later, it looks like it's finally here!

Having worked on smaller sites, I can imagine how difficult this change was. I took a quick peek at the code; it's so much cleaner now, and it loads so much faster! Congratulations, guys.

Re:POOPHEADS!

[AKAImBatman (238306)]

You mean like this site [slashcode.com] that has been acting as the beta site [slashdot.org] for Slashdot?

Re:Testing process

[AKAImBatman (238306)]

Why don't you guys have a formal testing process in place for slashcode?

They do. Beta code gets tested here [slashcode.com] before it's put on Slashdot. Now the upgrade process often generates quite a few 503s (since Slashdot is actually down during that time), but it's just a temporary problem.

If you're still getting 500s and 503s, try deleting all your cookies that point to "slashdot.org". Sometimes the upgrades have problems with old cookies.

Re:HTML 4.01?!

[dolphinling (720774)]

Because. [hixie.ch]

Re:HTML 4.01?!

[drew (2081)]

I've read this rant a few times now, and of all of his reasons, none are very compelling.

* <script> and <style> elements in XHTML sent as text/html have to be escaped using ridiculously complicated strings.
Or you could refer to external files which you should probably be doing anyways. Besides, it's 2005. Are there still browsers in use that don't recognize the script tag? I haven't run across one in at least five years. Even browseres that don't support JavaScript at least know to ignore the contents of this tag.

* A CSS stylesheet written for an HTML4 document is interpreted slightly differently in an XHTML context (e.g. the element is not magical in XHTML, tag names must be written in lowercase in XHTML). Thus documents change rendering when parsed as XHTML.
Well, the second case is easily solved by writing tag names in lower case anyway. Wow, that was tough. I can't remember ever seeing a non-contrived case where the first was an issue, and even then it could be trivially worked around.

* A DOM-based script written for an HTML4 document has subtly different semantics in an XHTML context...
This is probably his one valid point. I do agree with this one, but also feel that it could be worked around with a little thought if you had a valid reason to use XHTML. Mainly you just need to use .toUpperCase() or .toLowerCase() when checking tag names, and you have to be able to detect whether to use namesapace aware functions or not based on which mime type you are using. Also, for sites (like slashdot) that don't use much javascript, this is probably not really an issue.

* Scripts that use document.write() will not work in XHTML contexts.
Good! document.write() should have been put out to die years ago.

* Current UAs are, for text/html content, HTML4 user agents (at best) and certainly not XHTML user agents. Therefore if you send them XHTML you are sending them content in a language which is not native to them, and instead relying on their error handling. Since this is not defined in any specification, it may vary from one user agent to the other.
And this is different from sending your document as HTML 4 how?

* XHTML documents that use the "/>" notation, as in "<link />" have very different semantics when parsed as HTML4. So if there was to be a fully compliant HTML4 UA, it would be quite correct to show ">" characters all over the page.
Probably technically true, but I've never seen this "SHORTTAG minimisation" discussed anywhere else, and I can't recall ever having dealt with a UA that treats self closing tags in such a manner.

In short, there are issues to watch out for, but there are a lot of cases when XHTML may be preferable to HTML 4 (e.g. using an XML based content management system), and as the most popular web browser on the internet doesn't handle XHTML when served as application/xhtml+xml (and it has been announced that the next version will not either) and all remotely modern UA's will handle XHTML served as text/html, there are a lot of cases where it doesn't put make sense to put off adoption of XHTML for 2 years or more until the majority of browsers can handle it properly.

That said, HTML 4 is still a perfectly valid alternative, and for a site like Slashdot where there are no compelling reasons to go with XHTML, and a lot of valid reasons for not, I don't see why anybody should complain that the site was done as HTML4+CSS and not XHTML+CSS.

Re:HTML 4.01?!

[Lewisham (239493)]

This is a lot like the argument for why bothering to comment, or why bothering to make code easy to understand, or why bother to code a web page in a half-arsed way as long as IE renders it OK.

Because its the Right Thing To Do.

Sure, it works fine as is. That's great. But if you can code in XHTML, why not? There are no good reasons not to apart from the fact you are lazy (I don't buy any of the arguments from that .ch site). Good HTML will look almost exactly like XHTML, why not make that extra step?

XHTML enforces nice, clean code. None of the HTML fanboys can argue that. It can be parsed nicely in an XML parser, making it portable into all sorts of applications, from automagic web spiders making massive search engines, to little Java programs. HTML makes parsing more complicated, and the error handling an even bigger pain. Getting everyone to XHTML, especially technology flagwavers like /. should be easy.

No, you don't have to do XHTML. But you should.

Re:HTML 4.01?!

[Freexe (717562)]

I let someone else explain this one, but basically you should be using html 4.01 and not xhtml unless you really know what you are doing and have good reason to do so.
http://hixie.ch/advocacy/xhtml [hixie.ch]

Re:HTML 4.01?!

[m50d (797211)]

Because XHTML is harder to write, and browsers can render HTML fine anyway, so what's the point? Yes, XHTML makes a cleaner spec if you're starting from nothing, but HTML is a standard that browsers have to be able to render, so XHTML doesn't make things any easier for anyone.

Re:HTML 4.01?!

[Bogtha (906264)]

This topic was done to death last time. [slashdot.org]

Short summary: there are a few compatibility downsides and there's no real point because there's no benefit to using XHTML yet.

Re:HTML 4.01?!

[pudge (3605)]

We already forced HTML 4.01 strict compliance on comments six months ago. Almost no one noticed.

We already converted 13M comments to valid HTML 4.01 strict. A couple of months ago. No one noticed.

It would be relatively trivial to force XHTML 1.0 strict compliance. I'd flip a switch to force compliance on new content, then rerun the converter for old content. The code's been tested to work for both HTML 4.01 strict and XHTML 1.0 strict (since we allow only a relatively small subset of HTML tags and attributes, this isn't that hard for comments, or even stories, which allows a lot more variety in tags, but everything still fits in the intersection of the two, so it's just a matter of changing a very few number of things, that the code already knows about).

Re:Wrong date?!

[geoffspear (692508)]

I noticed that when I was asked to metamoderate this morning, I wasn't given the false promise I'd be more likely to receive mod points.

Better rending in Firefox and less dishonesty! What's not to like?

Re:Wrong date?!

[Anonymous Coward]

I didn't notice nothing differnt about slashdot this morning. It still looks the same. They haven't done anything like DHTML or menus at the top with drop down effect. They're also still using Perl instead of PHP. The shuold be moving to PHP since that's what all other sites are doing now. THey also havn't changed their icons in like forever. And the green Slashdot logo needs to go. There's also no background graphic to give the site a more polished magazine like feel. If they knew anything about design, they'd be following the lead of sites like Wired.com and Playboy.com. After all Slashdot is really just an online magazine at this point. You guys should also consider a print version of Slashdot. I think if you combine the look of Wired, Playboy and MacOS X you'd have a winning UI. You should also force user's browsers to open a new window devoid of any browser menus/widgets/buttons. That way you could then create a true UI for Slashdot and make it like a magazine application. A navigation bar at the top with Aqua-esque buttons would be grand. There should also be application sounds. Clicking on buttons should play different sounds. Like if you click on the link for apple.slashdot.org, you should hear the Mac startup sound. Or if you click on yro.slashdot.org, you should hear a gavel pounding on a desk. Or if you click on bsd.slashdot.org, you should hear a death rattle. There should also be a live Slashdot cam that shows us what you guys are up to at any time of the day. Kind of like Jennicam used to be, only like heavily censored so we don't see private stuff. Maybe the cameras could have moderation so that the highest modded images go on the front page in the upper left corner. Another thing. There is this program/standard file format called Flash. It can really spice up a site and make it feel more like an application. You could also embed some Java apps too, but Flash is the way of the future for all web sites. It's the tool most creatives prefer. So can anywone tell me what is actually different about Slashdot today than it has been since like the 1980s when it was called Usenet?

Re:Wrong date?!

[Seraph (9484)]

edit my ass.

Sorry. There's no substitute for diet and exercise.

Re:Stylesheet?

[ameoba (173803)]

http://images.slashdot.org/base.css [slashdot.org]
http://images.slashdot.org/comments.css [slashdot.org]
http://images.slashdot.org/ostgnavbar.css [slashdot.org]
http://images.slashdot.org/slashdot.css [slashdot.org]
http://images.slashdot.org/print.css [slashdot.org]
http://images.slashdot.org/handheld.css [slashdot.org]

Re:Stylesheet?

[josephgrossberg (67732)]

I also recommend that people start sharing their own user-defined stylesheets (like they've done with Gmail [persistent.info]), so this site no longer looks like crap.

Like a CSS Zen Slashdot.

Re:So that is why

[a.ameri (665846)]

NS 4 nearly has no support for CSS. That's why the "new slashdot" (heh, never thought I would see that phrase) looks crap in it.

Seriously, don't you think it's time to drop support for NS 4? I mean this is the slashdot crowd, that has been saying for the last 8 years that developers should comply with standards and don't tune web pages for a specific browser, and now that finaly it is compliant with the standard, you are complaining that it looks bad in an ancient browser? You know, slashdot now also looks completely crap on BeOS's netpositive. should I complain about that as well?

Re:So that is why

[nacturation (646836)]

... slashdot does not work with Netscape 4 when I try it today.

It sucks in Mosaic 1.0 as well.
 

Re:Ahem!

[jamie (78724)]

You're in Light Mode. Slashboxes don't appear in Light Mode for obvious reasons (and I believe that's a change from before). Go to Preferences: Homepage [slashdot.org] and uncheck Light, then save. That should do the trick.

Re:Thanks a bundle!

[jamie (78724)]

Light mode has questionable reasons for still existing after this change. We're probably going to obviate/replace/improve it in the coming months (pick your verb).

We obviously did not forget about it, as another commenter suggested. Tim and Wes put in quite some effort to make sure it was still supported in some form. But much of its reason for existence will (soon) be able to be accomplished by simply changing style sheets. You the user can do that with various hacks; on our side, as Rob mentioned in his writeup for this story, we hope to provide some mechanism for users to pick different style sheets sometime soon.

Light mode was a kind of a half-assed hack that tried to do "show me Slashdot a little cleaner," "reduce my bandwidth for my 56K modem," and "give me the bare necessities for my mobile device," and IMHO didn't do any of those very elegantly. And the implementation kinda sucked too, so we want to get rid of it for code cleanup reasons. We're going to do mobile support properly (eventually) and let style sheets do the cleaning up. The third justification was bandwidth, and webpage bandwidth is pretty irrelevant in 2005.

For now (at least), Light mode means no slashboxes, which makes sense to me (at least). If you want slashboxes, the workaround is to turn Light mode off. If you're in the ~1% of Slashdot readers who simply must have the Light-mode look and slashboxes too, I'm afraid you'll have to bear with us until we get the changes I described above implemented.

And now I just realized Rob said much the same thing in his updated "response to reader notes," so go read that [slashdot.org] :)

Re:Redundant UL and LI in menus

[Bitsy Boffin (110334)]

Err, except the way it is now is semantically correct - it's a list of links. Your way it's just a bunch of links all mooshed togethor with no semantics at all.

There is a lot of "div-itis" though, but I'm guessing that was to provide flexability for user defined stylesheets in the future, so can be forgiven i guess.

Re:Light version wishlist?

[CmdrTaco (1)]

This is exactly the plan. Historically "Light Mode" addressed 2 meanings of "Light"... (A) Low Bandwidth and (B) Simplified Design.

The plan right now is to have a few large chunks of the site drop in and out for a less bandwidth intensive version. Essentially we strip the site down to what must be here: Less menu items, less boxes on the right. Basically, "Title" "Advertisement" "Stories" "Some Menus And Links". VERY minimal. Get the page down to as few bytes as possible. This We'll probably have a stylesheet too, but mainly this page will just have far fewer bytes of stuff.

Design-wise we can create themes for modern handhelds. A generic theme is already available but it's a real quickee job. But now we can create thinned down look and feel customized for any individual handheld. Of course we don't really have any of these fancy devices ourselves, so hopefully readers will help by designing CSS that does just that.

Re:converting comments?

[pudge (3605)]

This was done awhile ago, and almost no one noticed.

Basically, we were allowing various things in comments for years that were not compliant with HTML 4.01 strict. Even moreso for stories. So about six months ago we fixed the code to force compliance with HTML 4.01 strict, and about two months ago converted old content accordingly.