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.

So that is why

[Misagon]

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

I tried it because of a gnarly bug in Opera, requesting pages from the wrong sites....

Testing process

[FortKnox]

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

Seriously, its like every Thursday morning its a big test to determine how many '503 Service Unavailable' we will get.

If this was done in a real web app environment, you'd guys wouldn't have your cushy jobs, ya know...

Having said that, I get a 500 error randomly on any post...

WC3 validator == very close

[jandrese]

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.

Getting There...

[lukewarmfusion]

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.

Count on 'Em

[Doc Ruby]

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!

Re:WC3 validator == very close

[justforaday]

Using Opera's validate option, it still fails as HTML 4.01 Strict. However, the number of errors are in the low double digits, which is an enormous improvement over the hundreds the old code would give.

Re:Kudos on a great upgrade!

[garcia]

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.

Impact on Bandwith?

[fons]

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

Not according to W3C html validity checker...

[MCraigW]

Not according to the W3C (world wide web consortium) validity checker http://validator.w3.org/check?uri=referer [w3.org]! It finds a number of errors on all the Slashdot pages I've checked. The CSS passes as valid though.

Since HTML 4.01 strict and XHTML 1.0 Transitional are so close, only minor differences really, you could easily make Slashdot XHTML 1.0 Transitional.

Re:Kudos on a great upgrade!

[goodEvans]

I have Firefox with the excellent Web Developer [mozilla.org] extension installed. This lets you edit and change CSS on the fly, amongst other things. Each of the sections (games, apple, IT etc) seem to have their own CSS overlay. Kill that, and the page reverts to standard green.

Re:Stylesheet?

[josephgrossberg]

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:Kudos on a great upgrade!

[sn0wflake]

Was it really a bug in Firefox that made /. render incorrectly? AFAIK /. didn't conform to the W3C HTML standard anyway and all other pages on the web rendered fine. Anyway, I'm very pleased to see the new code and maybe I'll even submit a CSS. Would have preferred XHTML though.

Holy Shit!

[Anitra]

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:Kudos on a great upgrade!

[Koiu Lpoi]

On my Pocket PC, slashdot looks orders of magnitude better (I never use the /palm one, I like my images!). However, in PIE it needs to be set to 1 column mode. But, I feel very glad that I can get a decent looking news aggregator on the go without having to scroll nastily.

Re:converting comments?

[pudge]

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.

Re:Light version wishlist?

[raygundan]

The great thing about light mode's compromise was that I could just leave it enabled and use it on both the desktop and the mobile device. Currently, I have the following options:

1. The whole shebang: all the functionality, all the bandwidth.
2. Light mode: no slashboxes, less bandwidth. It's not bad for mobile, but now that it's not full-functionality, I can't leave it enabled all the time.
3. /palm mode: only shows the top 5 comments. hardly even qualifies as slashdot! Not a useful thing unless you're on a *really* stripped-down device.

What I'm missing now (a fire-and-forget way to get full functionality on the desktop but lower bandwidth and all the comments on the phone) can be fixed one of several ways:

1. A way to set my preferences to be different for mobile and desktop browsers.
2. A full replacement for light mode, with all the site functionality
3. A more complete mobile mode with all the comments present.

Re:Impact on Bandwith?

[ChristTrekker]

I once tried cleaning up a site with lots of tables and inline formatting, converting it to CSS. Stripping the formatting down saved roughly 15-20% on that site the more pages were visited using the cached stylesheets. If you only visited the front page, the bandwidth usage was actually a bit higher. It all depends how much inline formatting you have, but I thought 15% was significant enough to make the effort for, especially if traffic (hence bandwidth expense) is high.

Sickening

[ArchAngel21x]

All the brown nosing commments are getting good marks while constructive criticism is shot down as flame bait. I agree that if you are going to put all that work on the backend of the web site (the code), you might as well improve the GUI too. While we are on the topic of improving the site, how about putting in a spell checker?

Re:Kudos on a great upgrade!

[Rei]

The page may look better in Mozilla, but it's god-awful in konqueror. I was wondering what on Earth slashdot did to make things look so horrible. The teal article header background now takes up over an entire page for the first article on the page (including in comments view). The input boxes are now way to spaced out - it looks like below (only worse):

-- Edit Comment ----

Name
Rei (Log Out)

URL
http://www.cursor.org/ [cursor.org]

Subject
Re:Kudos on a great upgrade

Comment
-blah
-blah
-blah
-blah
-blah
-blah
-blah
-blah
-blah
-blah
-blah
Use the Preview Button! Check those URLs!

* No Karma Bonus * Post Anonymously

Plain Old Text Preview Submit

Really, it's barely usable. It looks horrible.

Re:Kudos on a great upgrade!

[waffle zero]

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:Kudos on a great upgrade!

[jaiyen]

But he bought it on ebay [slashdot.org]

Re:HTML 4.01?!

[Anitra]

Did you even read what CmdrTaco wrote? They have a reason NOT to go to XHTML, at least for now. But he leaves the possibility open.

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...

There are several browsers (and other tools, like XML parsers) out there that will break if an XHTML format doesn't validate as perfect XML. Since Slashdot does not control all of the code they pull in (especially ads, but also comments - neither of which are guaranteed to be valid XHTML), they want to play it safe.

Redundant UL and LI in menus

[temojen]

If you want to clean up your code more, all the menu items are anchors wrapped in list items. this can be much cleaner styled as:

<style>
//should be in an attached stylesheet, not inline
div.menu span { display: block; background-color: green; }
div.menu a { display: block;}
</style>

<div class="menu" id="about">
<span>About</span>
<a href="/supporters.shtml">Supporters</a>
<a href="/code.shtml">Code</a>
<a href="/awards.shtml">Awards</a>
</div>

As compared to:

<div class="block">
<div class="title" id="links-about-title">
<h4>About</h4>
</div>
<div class="content" id="links-about-content">
<ul>
<li>
<a href="http://slashdot.org/supporters.shtml">Suppor ters</a>

</li>
<li>
<a href="http://slashdot.org/code.shtml">Code</a>
</li>
<li>
<a href="http://slashdot.org/awards.shtml">Awards</a>
</li>
</ul>

</div>
</div>

BTW, nice use of fieldset.

Re:Kudos on a great upgrade!

[SoloFlyer2]

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!

[generalpf]

Up for a case of beer or two? Come on, these guys left the crappy HTML languish for EIGHT YEARS before updating their site -- during which time they obviously don't even read their own site -- and you think they deserve a reward? They're getting paid to run this site!

I wish I could work two days every eight years and get a case of beer for doing MY JOB.

Re:Kudos on a great upgrade!

[ATinyMouse]

Interesting, it appears that UID 666 isn't owned by anyone, yet searches for 665 (patfu) and 667 (Naikrovek) work.

ATM

Re:Wrong date?!

[Blkdeath]

When are they going to open source the conservation principle defying karma algorithm? I have a couple hundred posts under my belt. Without a detailed statistical analysis I hit a +5 every 5 or 6 posts with many making +3 or +4. I regularly metamoderate...

You probably post too frequently or not frequently enough. Myself, I MM about 1-2 times/month when I'm bored. I read /. daily and post only occasionally, usually in a week I'll have a day where I'll post 4-5 comments then no more. I also have Excellent Karma and 95% positive MM score. I get mod points probably twice a month if not more.

This is mostly detailed in the FAQ, but basically they have a profile of their ideal moderator and apparently I'm it. :)