Stories
Slash Boxes
Comments

News for nerds, stuff that matters

Slashdot Log In

Log In

Create Account  |  Retrieve Password

Retooling Slashdot with Web Standards

Posted by michael on Sat Nov 22, 2003 12:02 AM
from the two-cents dept.
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...
+ -
story
This discussion has been archived. No new comments can be posted.
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
 Full
 Abbreviated
 Hidden
More
Loading... please wait.
  • CTRL-R (Score:5, Funny)

    by mrpuffypants (444598) * <slashdot&tomservo,net> on Saturday November 22 2003, @12:06AM (#7534655)
    I'm all for it. If it makes /. load faster when I hit CTRL-R 10 times per half hour then I'd be very happy!

    On second thought, that could mean more time working. Scratch the idea.
      • Re:CTRL-R (Score:5, Funny)

        by krisp (59093) * on Saturday November 22 2003, @12:20AM (#7534742) Homepage
        though, if you read the article, you'd know that the design is exactly the same, except the old HTML 3.2 was replaced with standards-compliant CSS.

        Then again, this is slashdot, and we don't read articles.
        • Re:CTRL-R (Score:4, Funny)

          by the_other_one (178565) * on Saturday November 22 2003, @12:25AM (#7534767) Homepage
          What's an article?
          • Article (Score:5, Funny)

            by yerricde (125198) on Saturday November 22 2003, @12:41AM (#7534860) Homepage Journal

            Many languages have two articles, which correspond to English "an" and "the". Many of those languages have multiple forms, called "allomorphs," for each article, determined by context; in English, "an" becomes "a" before a consonant and "some" before a mass or plural noun. Russian has no articles, their function having been replaced by sticking nouns before the verb (to imply "the"-itude) or after the verb (to imply "a"-ness).

            Another meaning of "article" is any of the interesting pages linked to in the story at the top of a Slashdot article.pl page. In this case, Slashdot users would call this page [alistapart.com] "the article".

  • by Xerithane (13482) <xerithane@@@nerdfarm...org> on Saturday November 22 2003, @12:07AM (#7534664) Homepage Journal
    Hell just froze over.

    Brr.
  • by CSharpMinor (610476) on Saturday November 22 2003, @12:08AM (#7534665)
    They're actually proud of this? That they went so many years without complying to HTML standards? It is obvious that Slashdot was just planning to break the HTML standard to force everyone to use Slashdot's "integrated" browser, Mozilla.

    This isn't the first time this has happened. Remember when BBS's became popular, and Slashdot "integrated" one into their site to kill any competition? Or all the times that Slashdot has brought down "competing" sites by linking to them, thereby safeguarding their website monopoly?

    It's a shame that the DoJ let them off for this....
  • While you're at it (Score:5, Insightful)

    by GoldMace (315606) on Saturday November 22 2003, @12:08AM (#7534668)
    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.
      • by Anonymous Coward on Saturday November 22 2003, @01:18AM (#7535026)
        No,

        If page 1 has: thread A with 14 subcomments, thread B with 22 subcomments, and thread C which has 17 subcomments, but...

        there's only room (based on the max page length) to show A, B, and 13 of C's comments...

        Page 2 will start over with the first comment of thread C. So you get to reread the first 13 of C's comments.

        All hell breaks loose if thread C has more comments than can be shown in a single page...

        Each page wants to start at the top of thread C again.

        The problem is slash won't start page N in the middle of a comment thread. Any comment thread that was only partially displayed in the previous page is reshown in its entirety.

        very annoying.

      • by devphil (51341) on Saturday November 22 2003, @02:58AM (#7535258) Homepage


        is that the default comment view (i.e., when you don't have an account) is non-threaded, oldest first. Which is just stupid. People visiting are treated to pages of whatever the current first-post troll is these days.

        Switch the default to threaded, highest scores first, and then if a visitor wants a more chaotic view, they can deliberately ask for it.

  • well (Score:5, Insightful)

    by revmoo (652952) <slashdot@meeAUDENp.ws minus poet> on Saturday November 22 2003, @12:09AM (#7534674) Homepage Journal
    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...
  • by kurosawdust (654754) on Saturday November 22 2003, @12:10AM (#7534676)
    will this work for browsers for those with disabilities? I think its only fair, considering I clicked on slashdot Games article and am now freakin' blind.
  • by Amiga Lover (708890) on Saturday November 22 2003, @12:10AM (#7534685)
    The prototype is slowing already. You bastards! you slashdotted slashdot!
  • Hallelujah! (Score:5, Insightful)

    by EchoMirage (29419) on Saturday November 22 2003, @12:12AM (#7534695)
    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 [google.com] 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!
    • Re:Hallelujah! (Score:5, Interesting)

      by Zoop (59907) on Saturday November 22 2003, @01:18AM (#7535025)
      I like bandwidth savings but I am really curious: are any blind people (let's face it; we're not talking about "accessible" for paraplegics or the deaf) read Slashdot?

      And do you do it with a reader that doesn't interface directly with IE's rendering engine rather than reading the HTML directly?

      Despite running some very information-centric sites, I have yet to see a confirmed assistive technology surfing my site in the logs--yes, I know all about spoofing, which is why I ask...you'd think that some of them, given the Biblical proclamations about standards liberating the handicapped that come from ALA, would just be a HTML-slurpers that give a unique identifier to logs and simply break on IE-only sites.

      So, any of you out there? Is the site unusable on JAWS or some such? I want real blind people who use it every day rather than somebody who once listened to JAWS read it in a lab or academic setting.
      • Re:Hallelujah! (Score:5, Informative)

        by Anonymous Coward on Saturday November 22 2003, @11:09AM (#7536357)
        I'm a blind /. user and I use either JAWS interfacing with IE (yes, I know, windows sucks but Gnopernicus is not there yet) or command-line browsers such as lynx and links. For the most slashdot works alright, and I'd say CSS and XHTML only affect people using more semantic tools, like those who use Emacs to browse.
    • Tidying posts (Score:5, Insightful)

      by KjetilK (186133) <kjetilkNO@SPAMcomputas.com> on Saturday November 22 2003, @05:02AM (#7535452) Homepage Journal
      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 [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?

  • by anthony_dipierro (543308) on Saturday November 22 2003, @12:15AM (#7534710) Journal
    So I looked at final example [alistapart.com] and I was just about to complain about how messed up it was. The words in the boxes on the right were all scrunched against the left edge. There were these stupid little dots in front of the links. It was just plain ugly. Then I went to the real site and realized it had always been that way, I just haven't paid attention to it.
  • by Lank (19922) on Saturday November 22 2003, @12:16AM (#7534718)
    Daniel M. Frommelt is the University World Wide Web Coordinator at the University of Wisconsin - Platteville, an executive committee member of the Campus Web Council of Wisconsin, and a web standards advocate. Daniel spends his free time brewing beer.

    I like the guy already.
  • Teeny Bug (Score:5, Interesting)

    by Audity (600754) on Saturday November 22 2003, @12:17AM (#7534721)
    That's all well and good, but you don't want to break the old page. I read slashdot often with my "text zoom" on mozilla 1.0.1 at 120 or 150%.

    Right now slashdot looks normal at any text zoom setting, but the version proposed in the article hides parts of words when I turn up my zoom to 200%. I don't often read with text that large, but I've done it before, and I'm sure there's users out there who do it regularily.
    • Re:Teeny Bug (Score:5, Informative)

      by alphaseven (540122) on Saturday November 22 2003, @12:56AM (#7534939)
      Looking at the css file, it looks like the centre column is set at 96 pixels from the left, no matter how big the text in the left hand column is. So if the text in the left column is wider than 96 pixels it will bleed over the middle column.

      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.
      • Re:Teeny Bug (Score:5, Insightful)

        by ubernostrum (219442) on Saturday November 22 2003, @03:57AM (#7535357) Homepage

        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.

  • by ericdano (113424) on Saturday November 22 2003, @12:18AM (#7534731) Homepage
    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 [slashcode.com] 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.....

  • by drpentode (586437) on Saturday November 22 2003, @12:20AM (#7534741) Homepage

    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.

  • by PotatoHead (12771) <doug&opengeek,org> on Saturday November 22 2003, @12:26AM (#7534774) Homepage Journal
    is a bad idea. Personally, I like it. Reducing the necessary bandwidth to use the site is a good thing though for everyone involved. Why spend money you don't have to in a down economy.

    Things do look a bit dated, but maybe that is a good thing. The popularity of /. is not an issue so what's to prove by changing the look? Gain new users? Have more impact?

    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 /. would prove to be a mistake.

  • by cioxx (456323) on Saturday November 22 2003, @12:26AM (#7534775) Homepage
    There is a project called CSSZenGarden [csszengarden.com]. It's a collection of different stylesheets which modify the same content according to contributor's tastes and design abilities. There are few dozens of examples, and amongst them there is the Slashdot [csszengarden.com] interface, albeit not a perfect copy as shows in the article.

    You can view all the available CSS designs here [mezzoblue.com]. Same content, different stylesheet. Just shows off all the wonderful things that's possible with CSS standards-based page creation.

    "HTML is dead." - Friedrich Nietzsche
  • by Speare (84249) on Saturday November 22 2003, @12:37AM (#7534837) Homepage

    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"
  • by scoobysnack (144572) on Saturday November 22 2003, @12:43AM (#7534869) Homepage

    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.

  • What about PNGs? (Score:5, Insightful)

    by Yosho (135835) on Saturday November 22 2003, @12:52AM (#7534919) Homepage
    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?
  • by brrrrrrt (628665) on Saturday November 22 2003, @12:57AM (#7534943)
    If Slashdot is going to be recoded, I would like to ask for four features that are easy to implement, and that would be very nice to have.

    1. When you click on your username, you see all of your comments, and next to your comments, you see the number of replies to your comments.
    It would be really nice if this number would be clickable, so you could immediately read the replies to your comments. (It's quite complicated to get to the replies now, especially when you've put a high comment threshold in place)

    2. Can story submissions be placed (more logically & more conveniently) on people's slashdot-homepages, instead of on the page that you get when you click on "submit story"?

    3. It would be nice if you could see your own story submissions (not just the subject, but also the body & other details) when you click on them. Just to see them back.

    4. Could the default comment-submission mode be changed to "plain old text" instead of "html-formatted"?
    It is confusing that you have to write your own html in a text area on slashdot to get something as basic as newlines, where there is no other site that I can think of - not even a geeky one - that requires you to manually enter the BRs.
    It's just not useful, not intuitive and not nice this way.
  • by mikeswi (658619) * on Saturday November 22 2003, @01:00AM (#7534956) Homepage Journal
    14 gigs PER DAY savings ????

    I do ~90-100 gigs per MONTH and freak out at that.

    I will never bitch about my bandwidth use again.
    I will never bitch about my bandwidth use again.
    I will never bitch about my bandwidth use again.
    I will never bitch about my bandwidth use again.
    I will never bitch about my bandwidth use again.
    I will never bitch about my bandwidth use again.
  • Search Function (Score:4, Interesting)

    by General Sherman (614373) on Saturday November 22 2003, @01:00AM (#7534957) Journal
    While you're updating the (X)HTML to be compliant, why don't you make the search engine actually search? As it is now it's almost completely random as to what you get when you click "search", no matter what you put in the box. I've gotten completely different results just by hitting reload.
  • by metalhed77 (250273) <andrewvc.gmail@com> on Saturday November 22 2003, @01:02AM (#7534968) Homepage
    Ok, I like ALA, I'm a bit of standards guy even, my whole website is XHTML 1.0 strict. Unfortuanately slashdot has a table based layout, which, to put it simply, CSS cannot handle. I've spent days researching correct CSS tables in the past and it is an impossibility. The problem? Font overlapping. Try a text zoom to as little as 200% (yes, doubling the text size is not that extreme) and most CSS table based designs instantly break. Much like this one. My site works fine with it as everything is position ed such that font size only breaks at absurdly high magnification, but if it were any more complex I'd HAVE to use tables. 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. There needs to be a way to style tables in CSS without having to use a table tag. In short, CSS boxes are just that, boxes, they don't link together to correctly handle font sizes. The new slashdot is more broken than the current slashdot in a functional sense.
  • by kuzb (724081) on Saturday November 22 2003, @01:28AM (#7535051)

    If XHTML, there are some things to consider:

    It's important to note that using XHTML 1.1 requires you to send your documents as XML [w3.org]. This means the document should have an XML declaration above the doctype, and needs to be sent with an XML mime-type [w3.org], ideally application/xhtml+xml. This has a significant drawback; IE can't see it [w3.org].

    A fairly well established workaround is to use mod_rewrite and munge the mime-type of a document [w3.org] based on what a user agent sends in its Accept header (To date, Mozilla is the only browser to include application/xhtml+xml in its Accept header). However, some would argue that this too has drawbacks. Since only Mozilla understands application/xhtml+xml, your documents will be sent as text/html, and XHTML does not validate as HTML.

    The arguments around this issue have been summarized in the widely linked "Sending XHTML as text/html Considered Harmful [hixie.ch]"

  • by legLess (127550) on Saturday November 22 2003, @02:54AM (#7535248) Journal
    This is an elegantly-designed page, and a nice recode of the original.

    For the last several months I've been working on the same project from a slightly different perspective. We have a working Slash-based site, currently in live beta, at http://www.news4neighbors.net [news4neighbors.net].

    The site doesn't validate, but it's all structural XHTML with CSS for layout and style. This is much rougher than the beautiful markup presented here, but the difference is that nearly our entire site is running this template system. My work is based on the Openflows strict theme, released early this year at http://strict.openflows.org [openflows.org]. But not much of that theme is left, as their project and mine had very different goals. I've changed all of the 120-something templates, and much of the code that sends them data.

    The site needs a lot of work, no doubt. But we're developing it rapidly, and have made much progress.

    The biggest challenge is that Slash itself doesn't separate content from presentation from business logic. To change one set of tags you may have to rewrite a template, change a database variable, write some Perl, or a combination. This isn't a knock on Slash -- it's very powerful and I enjoy using it -- it's just that the presentation layer hasn't been their focus.

    The end-goal for this project, Slash-wise, is to have a fully XHTML/CSS compliant theme that people can easily use on their sites.

    If you want more information about it, send me email at randall -at- sonofhans.net

    [ FYI, I also posted this in the ALA discussion ].
    • by BJH (11355) on Saturday November 22 2003, @12:35AM (#7534821)
      IE's character code handling is heuristic if no character code is specified in the HTTP header or the HTML head block.
      It scans through the page and tries to match the character frequency against average character frequencies for various languages. If you're seeing Slashdot as Big5, then that means IE thought that the character frequency matched Big5 most closely.
      • by identity0 (77976) on Saturday November 22 2003, @03:41AM (#7535334) Journal
        If you're seeing Slashdot as Big5, then that means IE thought that the character frequency matched Big5 most closely.

        A sad testament to how bad Slashdot grammar is... Next time someone asks you how bad the writing is on Slashdot, you can tell them "It's so bad my browser thinks it's Chinese!"
    • Re:Sounds good (Score:4, Informative)

      by LFS.Morpheus (596173) on Saturday November 22 2003, @12:39AM (#7534853) Homepage
      Slashdot doesn't use "Times New Roman." It uses absolutely no font at all. This means that your browser renders it using its default proportional font. Proportional usually maps to one of "sans-serif" or "serif," and then you can change your default sans-serif or serif font.

      I'm not sure if this is settable in IE, but Mozilla, Safari, etc etc have these settings.

      Personally, I use serif, and then my serif font is Georgia. It looks great to me. But feel free to use sans-serif and Comic Sans if it suits you.
            • Re:Blech... (Score:5, Insightful)

              by setmajer (212722) on Saturday November 22 2003, @04:00AM (#7535363) Homepage
              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 [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.

              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?