Slashdot Mirror


Retooling Slashdot with Web Standards

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

17 of 764 comments (clear)

  1. While you're at it by GoldMace · · Score: 5, Insightful

    Could you please make page 2 of comments actually be page 2 of the comments. I might be incredibly naive, but it seems something more like page 1.5. I don't know about the rest of you, but I always just read the odd numbered pages of comments, because like way too much stuff if repeated from the previous page on the even numbered ones.

  2. well by revmoo · · Score: 4, Insightful

    but perhaps this effort will be a catalyst for change...

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

    --
    I would expect such blatant racism on Fark, but on Slashdot? Mods please ban this asshole.
    1. Re:well by Xerithane · · Score: 4, Insightful

      The beauty of CSS is that it can look different just by linking to a different stylesheet. If you read the full article, you would note he did make an alternate layout. It was sort of a mix between games and the traditional green, and wasn't exactly pretty. I don't think the idea was for it to be pretty, just to be "different."

      --
      Dacels Jewelers can't be trusted.
    2. Re:well by shaitand · · Score: 4, Insightful

      Not by this guy, he did a great job recreating the existing site, but did you look at his alternative skin? Dear god no...

  3. Re:Not ANOTHER non-standard page... by The+Unabageler · · Score: 5, Insightful
    did you not read the article?

    the code was converted to XHTML 1.0 Transitional, and validated


    that's almost as standard as you can get.
    --
    perl -e '$_="\007/4`\cp%2,".chr(127);s/./"\"\\c$&\""/gees; print'
  4. Hallelujah! by EchoMirage · · Score: 5, Insightful

    This is long long long long long overdue. Just because HTML 3.2 "worked" didn't make it good, or right. A proper application of [X]HTML and CSS can be a huge bandwidth saver. It looks like Google also updated their design yesterday or today - no doubt to subtly cut down on the huge amounts of bandwidth they serve out. More importantly for Slashdot, however, is that writing their code in an open and updated fashion really opens up the market for the kinds of people that can access the site, and that's never a bad thing. So congratulations on starting this project, and I hope it gets underway soon!

    Now maybe I'll finally be able to change my .sig!

  5. The problem is the CVS by ericdano · · Score: 4, Insightful
    One of the problems is the constant twiddling that happens on the CVS of slash. If you run a slash site, which I do, and keep up to date, you need to usually update every template on the site. Little things change, etc, etc. It's a pain in the ass. And look at when the Slashcode site was updated. Like months ago.

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

    --
    It's either on the beat or off the beat, it's that easy.
    I moderate therefore I rule!
    --
  6. What about the graphic design by drpentode · · 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.

  7. Re:F5 by ergo98 · · Score: 5, Insightful

    This is the classic response to that comment (about wasteful whitespace), yet I don't buy it.

    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.

  8. Editor Queue enhancements? by Speare · · 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.

    • detect multiple/overlapping story submissions by their URLs, and make it easier for editors to find the earliest and to find the best (longest, most links, no broken links) examples of a breaking story
    • automatically give submitters a reason for their rejections: "rejected; another poster broke the story earlier and/or better."
    • capitalize stories according to title rules (not just every word)
    • fix or highlight the top fifty most common grammatical mistakes in submissions automatically (s/\bmore then\b/more than/g)
    • automatically mirror (and provide as separate link) a front-page snapshot of featured stories for the first hour of a story going public
    • searcher should be aware of common three-letter acronyms, and index them better
    • allow meta-moderation of "overrated" and "underrated"
    --
    [ .sig file not found ]
  9. Slashdot CSS Suggestions by scoobysnack · · 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.

    1. Re:Slashdot CSS Suggestions by Micah · · Score: 4, Insightful

      Speaking of div tag names, I noticed they had one called "advertisement". Man, wouldn't that make ad blockers easy! Just overlay a custom CSS file with something like:

      #advertisement { display: none; } :-)

  10. This article is intended to be read by humans by yerricde · · 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.

    --
    Will I retire or break 10K?
  11. What about PNGs? by Yosho · · Score: 5, Insightful

    Come on, Slashdot still hasn't converted its GIFs to PNGs. That alone would save a good amount of bandwidth, not to mention that Slashdot is supposedly pro-open source and all that.

    The only argument I've seen against them is for compatibility's sake -- honestly, I would be surprised if even as much as 1% of Slashdot's readership was using an image-based browser that did not support PNGs. There are probably plugins available for the ones that don't. So, why not?

    --
    Karma: Terrifying (mostly affected by atrocities you've committed)
  12. Re:Teeny Bug by ubernostrum · · Score: 4, 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 , which could be used in a variety of ways to make the text visible when it gets too large for the column.

  13. Re:Blech... by setmajer · · Score: 5, Insightful
    The designer hardcoded a fontface because CSS doesn't automatically resize columns like tables do.

    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

    Because CSS was designed by doofus eggheads and not experts in solving real world web design problems.

    Ian Hickson 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. Hakon Wium Lie edited CSS 1, 2 and 2.1 and has been working on Opera since 1999, earned an MS in Visual Studies from MIT and wrote his thesis on electronic display of newspapers. TantekCelik 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 discussion list and let them know.

    Which then forces me to do a bunch of work

    One line of CSS is 'a bunch of work'? I suppose you find tying your own shoes a pretty onerous task as well?

    or accept undesirable browser settings

    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?

    --

  14. Tidying posts by KjetilK · · Score: 4, Insightful
    Amen!

    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 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. Nevertheless, a good Perl implementation of Tidy is still lacking. There is a HTML::Tidy 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?

    --
    Employee of Inrupt, Project Release Manager and Community Manager for Solid