Retooling Slashdot with Web Standards 764
Joe Clark writes "Nearly a year after an interview with this correspondent highlighted a few problems with Slashdot's HTML, Daniel M. Frommelt and his posse have recoded a prototype of Slashdot that uses valid, semantic HTML and stylesheets. Frommelt projects four-figure bandwidth savings in the candidate redesign, were it adopted, not to mention better appearance in a wide range of browsers and improved accessibility. Next he needs volunteers to retool the Slashdot engine. And yes, he did it all with CmdrTaco's blessing." Slashdot has kept its HTML 3.2 design for a long time ("because it works"), but perhaps this effort will be a catalyst for change...
While you're at it (Score:5, Insightful)
well (Score:5, Insightful)
How about a new look altogether?
I had a look at the new site, and while it does fix many problems and should certainly be used to replace the existing setup, why not go a little farther and retool the look of the site as well?
The look of slashdot has barely changed since the late 90's, and while the look certainly brings part of it's character, it's beginning to look dated. Perhaps it can be redesigned with a more effecient and cohesive interface while still retaining some of it's previous character?
Or is it just a pipe-dream...
Re:Not ANOTHER non-standard page... (Score:5, Insightful)
that's almost as standard as you can get.
Hallelujah! (Score:5, Insightful)
Now maybe I'll finally be able to change my
Agent sensing (Score:3, Insightful)
When the time comes, please add some code to switch to a light design when browsing with a PDA. I know right now you can select light mode, but it affects all browsers used from an account which isn't at all what I want...
Re:well (Score:5, Insightful)
Custom Colors (Score:2, Insightful)
The problem is the CVS (Score:5, Insightful)
It would be GREAT to see them finally, 3 or 4 years later, dump the old theme and streamline it with CSS and stuff. Is it going to happen anytime soon. Probably not.....
Re:well (Score:5, Insightful)
What about the graphic design (Score:4, Insightful)
Now that you've made slashdot standards compliant, why not make it look good? CSS has powerful leading, word spacing and font tools (all of them with relative measurements to look good across most browsers). If a browser doesn't like a text attribute, it won't display it, so you won't have to worry about the same unpredictability as you would with layers and div boxes. The one thing that sucks the most on slashdot is its typesetting. Type is the one thing web designers forget about, but doing it right drastically improves the appearance and readability of a site.
Re:CTRL-R (Score:1, Insightful)
Re: Changing the look (Score:4, Insightful)
Things do look a bit dated, but maybe that is a good thing. The popularity of
Anyone that matters knows the site already. The content is the reason they return, not the pretty icons. Getting more impact through a more compelling rendering might matter to a few folks, but will the expense be worth it?
Maybe this is the wrong comparison... Take an established publication like the Times or WSJ. Do they make big changes often? No. The formula works and is a big part of their identity.
I think they keep things the way they are because they know change works against the needs of their readers; namely, access to relevant content easily.
Unless I am missing something, major changes to
Re:F5 (Score:5, Insightful)
a) Totally guessing, but about 99.9999% of the pages served up are interpreted by "no one" other than the browser. It's more "readable" by the browser minus the whitespace.
b) Most pages, like this, is "mechanically generated" - What you see in the final results was rendered: It isn't the "source-code". As such there is absolutely no code maintenance issues.
What you're left with is the prospect that maybe one out of every million page hits is going to a Slashdot developer who's debugging that the rendered properly, though if it's XHTML transitional then a XML editor would be a great choice and would again make it irrelevant if it's clogged full of waste whitespace.
Editor Queue enhancements? (Score:5, Insightful)
Not a flame.
If you're thinking of retooling the slash engine itself, I hope you consider some of the oft-complained areas for the most improvement. Things get mixed up in any random-access submission "queue" engine, but slash seems to suffer from these things often. Even editors have grumbled about not seeing other editors' status on various stories.
Re:Agent sensing - That's the point (Score:2, Insightful)
Slashdot CSS Suggestions (Score:5, Insightful)
Good article, just a couple of suggestions...
In general, it's usually better to avoid giving layout-suggestive names to your div tags. In the example, the author calls the Login/Sections/Help div leftcolumn. It would probably be better to name it something that is more suggestive of it's content rather than it's location - this way, if in the future a new skin was added that moved the content to the right-side, or even bottom of the page, the div name wouldn't contradict it's location.
Another suggestion would be to disable all images in the print.css file. The author already went ahead and disabled the advertisement, the left and right columns, but he left those pesky story icons. I know that when I print an article, usually all I care about is the text. It's a simple way to make a page a little more printer friendly.
My last suggestion would be to move the content div tag, up near the top of the page. This way, as your browser downloads the information from the server, it will download the story information (important) before downloading the left/righthand content panes (unimportant). If someone stops loading their browser before the page download has been completed, at least the browser can attempt to render the story data. And with css, the layout will be preserved.
This article is intended to be read by humans (Score:5, Insightful)
how about eliminating all of the completely wasteful, bandwidth and processor consuming, whitespace?
As you point out, XML, CSS, and ECMAScript, unlike Python, are not very sensitive to whitespace. Slashdot can mitigate whitespace's contribution to bandwidth in two ways: 1. mod_gzip (which Slashdot already uses), and 2. caching proxies that strip excess whitespace. But this article itself is intended to be read by developers, and clarity counts.
Comment removed (Score:5, Insightful)
Re: Changing the look (Score:3, Insightful)
Re:Just another example of the Slashdot monopoly.. (Score:4, Insightful)
However, someone sufficiently motivated can rip it out and slap in something new. Sometimes people end up rewriting amazing portions of software when it's big enough. I'm not sure slashdot really does enough to warrant that kind of manhandling, it might be better to start entirely over.
But then, I've never looked into slashcode, because while slashdot is a fine site, I would never want to run it. I'll learn a lot more if I write my own code, and I don't have lofty goals for my website.
ahem. ahem. (Score:1, Insightful)
I'm being facetious of course -- Tables are only better because they have certain features that weren't included in CSS for whatever reason.
Re:F5 (Score:3, Insightful)
Whitespace isn't going to be your biggest bandwidth waster. So why not leave human readable.
actually wasting time (albeit a tiny amount, but nonetheless) parsing through it.
Why don't you measure it and compare it to other optimizations before you recommend that people spend their time changing it? "Premature optimization is the root of all evil", or something like that?
Re:Slashdot CSS Suggestions (Score:5, Insightful)
#advertisement { display: none; }
Re:Teeny Bug (Score:5, Insightful)
I'm not really up on my css, but I would guess a solution would be to have the centre column floating next to the left column, or to define the distance from the left hand side in em units instead of pixels.
Or the CSS property overflow [w3.org], which could be used in a variety of ways to make the text visible when it gets too large for the column.
Re:Blech... (Score:5, Insightful)
Er, 'fontface'? WTF is a 'fontface'?
As for CSS resizing automagically, resize in relation to what, pray tell? A box with width: 30%; resizes in relation to the viewport, a box with width: 15em; resizes in relation to font size, as of CSS 2.1 a box with float: left or float: right and no width resizes in relation to content (most browsers--including IE/Win--do this anyway) and table-layout will get you table-style layout with whatever tags you like. MS just didn't feel the need to support it in IE 5/Win or IE/Mac so people don't use it much. That's Microsoft's fault, not the W3C's
Ian Hickson [hixie.ch] edited the CSS2.1 spec, and he's been 'solving real world web design problems' since at least 1998 when I worked with him at the Web Stanards Project [webstandards.org]. Hakon Wium Lie [w3.org] edited CSS 1, 2 and 2.1 and has been working on Opera [opera.com] since 1999, earned an MS in Visual Studies from MIT and wrote his thesis on electronic display of newspapers. TantekCelik [tantek.com] is responsible for the widely-lauded Tasman rendering engine used in IE 5.x/Mac. These people do use this stuff in the real world, and if you don't like the directions they're taking your'e free to join the www-style [w3.org] discussion list and let them know.
One line of CSS is 'a bunch of work'? I suppose you find tying your own shoes a pretty onerous task as well?
Let me get this straight: you're hacked because the site doesn't use your settings for font size and face, but setting your browser to override the site's settings with your choices is 'undesirable'? Huh?
Re:ALA is ok but CSS is broken (Score:4, Insightful)
I don't know if this si a browser issue, or a problem with the CSS spec, but text overflow is a serious issue, one which breaks nearly every CSS page with complex layout in existance.
Yeah, you'd think somebody would come up with an " overflow [w3.org]" property and put it in the CSS spec to fix that, wouldn't you?
Snarky comments aside, most problems with layouts being broken by text magnification can be fixed with careful design. Yeah, it takes some work, but generally no more than what you'd put in nesting 800 tables...
Tidying posts (Score:5, Insightful)
I hope they implement ASAP.
But there is another challenge, and that's the posts people write. Anybody care about their code? For example, quoting, to do it properly, one should write: <blockquote><p>blah, blah</p></blockquote>. That's an awful lot of typing.
A page is not going to validate unless the posts are correct.
The way I have planned to do this on one of my sites, is to make sure that every time somebody clicks "Preview" or "Submit", the post is handled to Tidy [sourceforge.net] for sanity checks and conversion. By using preview, you can correct you're code, but you can never submit something that isn't well-formed.
I'm using Perl too, not Slashcode, but AxKit [axkit.org]. Nevertheless, a good Perl implementation of Tidy is still lacking. There is a HTML::Tidy [sourceforge.net] project page on Sourceforge, but it hasn't really gotten off the ground.
Does anybody else want to work on this, or do you have other ideas for cleaning up posts?
Re:While you're at it (Score:2, Insightful)
Its not...using nested mode, go to any article with 400 or more posts, the 2nd page will be almost identical to the first except for the last 1/4 or so, and that last 1/4 will be on page 3.
I had assumed that nested mode didn't work well with whatever code calculates the offset from the limit on each page.
Re:F5 (Score:2, Insightful)
True enough, but you don't always have to take on the biggest foe first - whitespace is one of those things that was actually intentionally added (it was more work to cleanly whitespace), so it would actually be less work to have skipped it.
Why don't you measure it and compare it to other optimizations before you recommend that people spend their time changing it?
Slashdot serves up millions of pages a day. One useless tab is several MB of Slashdot's bandwidth for absolutely no, or little, gain. I don't need to measure it (and, quite simply, I don't care enough too, though if someone wants to they can grab the tidy utility from the W3C, which strips out whitespace) to see that there is considerable waste in there. In the grand scheme of things it really isn't that much of a hit, but given that it was work to add it...
Handheld-friendly (Score:3, Insightful)
Re:F5 (Score:2, Insightful)
During development, people have to look at the generated HTML. To preserve their sanity, they use whitespace. Removing whitespace would be extra work (and it would end up being put back in by the next fellow who had to work on that code).
Re:Current /. is rubbish on a phone (Score:3, Insightful)
Re:ALA is ok but CSS is broken (Score:3, Insightful)
In most cases, one can replace tables with division tags, which work much better in general. The only caveat is that IE tends to break CSS based DIV tags if you use the wrong type of positioning. To be specific, if you use position: fixed; IE will NOT position this correctly, and really has trouble with multiple elements being fixed position. Mozilla actually fixes this position relative to your screen, not the rest of the page, allowing things like floating menu bars without crazy javascript solutions.
It would be possible, (not necessarily convenient or easy) to migrate to a non-table based layout that would LOOK just about identical for most people, and solve the problems you mention.
Re:Tidying posts (Score:3, Insightful)
A page is not going to validate unless the posts are correct.
The balance problem is trivally corrected by actually parsing the HTML in the post, then inserting the proper closing tags at the end. No, the page will still not validate -- but no one is asking for slash pages+posts to validate, merely asking that the templates themselves manage to validate.
Demanding people submit validated HTML is simply going to chase a lot of people away from posting at all. A blog's job is not to make posting difficult.
PHP and Smarty (Score:3, Insightful)
In development the filters are disabled, when it goes to production they strip white space and single line comments.
Combine that with Smarty caching and phpa and you get dynamic PHP pages that perform like static ones.
Re:Editor Queue enhancements? (Score:3, Insightful)
> allow meta-moderation of "overrated" and "underrated"
*rrated is abused far too often in my opinion.
Here [slashdot.org]'s an explanation from another
Also, it should not be possible to moderate *rrated on a post with no previous moderation. This would prevent troll moderators from immediately lower the score of a post from 1 to 0 or -1 and thereby putting it below the threshold used by most readers without being caught in M2.
Alternatively, we could rethink the whole M2 system, here [slashdot.org] are some ideas.
Re:Tidying posts (Score:3, Insightful)
Yes, that's true! But it is not simply the balance problem I'm addressing. People may for example use the BLOCKQUOTE element, but don't realize that it should be a P element within it. There are quite a lot of small things like that.
I do... :-)
The point is, tidy should be able to do that job easily, unless I've misunderstood something. Except in rather rare cases, tidy will ensure that the XHTML is well-formed, rewrite the stuff that doesn't, that it does not contain elements that are not in the spec, and that should be sufficient to ensure that the whole document validates, given that the template is good.
This is a very important point. Indeed, if this is the result, it would be wrong. However, I'm quite sure this would not be the result, Tidy would be transparent to the user and a help.