Slashdot Mirror
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.
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?
:-)
/team!
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
Javascript + Nintendo DSi = DSiCade
I for one, welcome our new Standards Compliant Overlords.
How does the Slashdot Effect happen given that no slashdotters ever RTFA?
April's Fool day again?
Grundgesetz * 23. Mai 1949 - 30. November 2007 - http://www.vorratsdatenspeicherung.de/
Why not XHTML?
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...
Good quote, too many chars. Seriously, the slashdot 120 char limit sucks!
nice one guys !
$ strings FTP.EXE | grep Copyright
@(#) Copyright (c) 1983 The Regents of the University of California.
Yes, and for those of us using "Light" slashdot version (it's in "Preferences" - white background etc, _much_ easier to read IMHO) now it looks like a buttload of shit. $(SUBJ). Will it be fixed?
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.
I read the internet for the articles.
You mean like this site that has been acting as the beta site for Slashdot?
Javascript + Nintendo DSi = DSiCade
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
Welcome to the 21st Century.
I would mod you up for that comment but...
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.
As a rock-in-roll Physicist once said, No matter where you go, there you are.
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
Time to get on the Duke Nukem watch...
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!
--
make install -not war
These are the ones I could find in the head:
http://images.slashdot.org/base.css
http://images.slashdot.org/comments.css
http://images.slashdot.org/ostgnavbar.css
http://images.slashdot.org/slashdot.css
http://images.slashdot.org/print.css
http://images.slashdot.org/handheld.css
Long signatures suck.
I think you mean Augean stables.
l
http://www.perseus.tufts.edu/Herakles/stables.htm
No but, yeah but, no but...
Wow, this looks NICE. You guys needed to go to CSS for a LONG time.
Now, how 'bout taking a cue from AvantSlash, and making http://slashdot.org/palm actually work nicely?
AvantSlash is horribly broken, now, due to your changes (although I knew it was coming, and so did they.) So, one of two things needs to happen: the guy behind AvantSlash needs to update it, or you guys need to make the Palm site work.
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!
"I have the attention span of a strobe lit goldfish, please get to the point quickly!"
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 on using local style sheets (good links there) and there's always the style sheet chooser plus 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).
Mind the gap...
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?
"A goldfish was his muse, eternally amused"
http://images.slashdot.org/base.css
http://images.slashdot.org/comments.css
http://images.slashdot.org/ostgnavbar.css
http://images.slashdot.org/slashdot.css
http://images.slashdot.org/print.css
http://images.slashdot.org/handheld.css
my sig's at the bottom of the page.
I would be very interested to know wheter this change has a big effect on the slashdot bandwith usage.
'Times New Roman' is so 27BC. It'd only take one line of css to get something with class. Like 'Comic Sans MS'. Everyone loves 'Comic Sans MS'.
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?
--
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.
...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_!
Of course it runs NetBSD. BTC: 1NT7QvbetmANwaMzhpVL6
If you've ever done serious web design then you know that going from a 5 year old plus table-based layout to a completely CSS-driven one is more like a Godzilla step.
More importantly, it makes things like what you are requesting relative bably steps.
Dissolve... Resolve... Evolve...
"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
W3C is perfectly stable, its taking issue with your non-quoted href attributes. Look at error # 12: "an attribute value must be a literal unless it contains only name characters."
As a general rule, quote all attributes, much more future-proof (XHTML requires all attributes be quoted), and much easier on the eyes when using a syntax-highlighting editor. FYI, I downloaded a snippet of your HTML, quoted the attributes, ran it back through the validator, and it validates (save for the lack of a doctype).
Hope this helps.
Now that pages take so much less time to render in browsers, Slashdot.org has reduced the overall computational load on the Web. So much less heat generated by browsing computers, so much less power consumed, foreign oil and coal burned. Of course, now we'll more swiftly move from the Front Page directly to Slashdotting some poor server unwittingly mentioned in the story. Maybe the smoke from burning servers will make up for our horde of cleaner-running Slashdotters.
--
make install -not war
I also recommend that people start sharing their own user-defined stylesheets (like they've done with Gmail), so this site no longer looks like crap.
Like a CSS Zen Slashdot.
Joe
http://www.joegrossberg.com
In safari and it seems firefox for macintosh weirdness abounds throughout the new slashdot layout. Things show up in sans-serif fonts at random, for example the contents of the "recent posts" box on user pages, or the "allowed html" beneath a post. Things have unexplained margins or indents; for example the "Subject" box when you submit seems to be over one space from the comment box. When showing comments, all the gray boxes have surprisingly large internal margins but everything else has no margins at all, all the comments are scrunched together. Font sizes seem to vary sometimes at random, for example the first three headlines on the front page are a totally different size from the ones beneath. The whole thing looks a bit hodgepodge.
Of course, web design is unpredictable and I'm sure it'll get sorted out eventually.
Irritable, left-wing and possibly humorous bumper stickers and t-shirts
It's both; News for Nerds _and_ Stuff that matters.(TM)
What a combo!
When in doubt, don't assume the bug is somebody else's fault unless you understand what's going on.
HTML, as you know, lets you omit the delimiting quotes for attribute values sometimes. For example, type=text is valid. However, just because you can omit them sometimes, it doesn't mean you can always omit them. Your page contains the following code:
The validator is saying that you have a closing </a> tag when you don't have an open <a> element. That is correct - you already closed the <a> element.
See, in order to provide us with the shortcut of not having to specify attribute names for some purposes (e.g. <input disabled>), HTML uses an SGML feature known as SHORTTAG NET. However, that's not the only shortcut it provides. It also lets you write <foo>bar</foo> as <foo/bar/.
Of course, I've only heard of one or possibly two browsers that have ever implemented this, so I'm not surprised that you haven't heard of it. In any case, one of the consequences of this shortcut is that you can't use slashes in attribute values unless you quote them - otherwise the parser has no way of knowing whether you are closing the tag or not. So when you write:
That has exactly the same meaning as this:
So, later on, when you try and close your <a> element, the validator rightly complains that there's no open <a> element to close.
If you actually find a real bug in the validator, then feel free to report it. If you had done this with the "bug" you are complaining about, then you would have found the answer to the problem a lot quicker.
It might be worth actually fixing this one, as I've seen some search engine bots trip over on similar things (XHTML-style empty meta elements in HTML documents, etc), so you might be preventing some search engine bots from indexing anything but the front page of your website.
Bogtha Bogtha Bogtha
Version 8.5
Build 7700
Platform Win32
System Windows XP
Mainframe/UNIX Bit Twiddler and long time Windows/Linux Hobbyist.
The Theorem Theorem: If If, Then Then.
I see it the other way around. I loaded it up, read articles, clicked the links, changed the filtering, etc, and it all worked just fine.
I think Misagon should have been more clear that he didn't like the way it looked instead of saying that it was broken, because it's clearly not broken. The plain HTML style for Netscape 4.x is very common these days, any Netscape 4 user should be used to it by now.
Bogtha Bogtha Bogtha
I was wondering why Slashdot looked all screwed under IE5.0 at school.
Some think the Internet is a bad thing. I just think that AOL is a bad thing.
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 and uncheck Light, then save. That should do the trick.
Validate Slashdot's Coral Cache! http://slashdot.org.nyud.net:8090/
:P )
t tp%3A%2F%2Fslashdot.org.nyud.net%3A8090%2F&charset =(detect+automatically)&doctype=Inline&ss=1
..." color="#006666"><b>Search Freshmeat:</b></font><br>
...gif?l,332" width="1" height="1" border="0" alt="">
...idth="1" height="1" border="0" alt="">
:D to keep the errors hidden. muahahahaha.
Anyway here's the Coral Cache of the W3C validating the Coral Cache of Slashdot! (can't get any longer than that
http://validator.w3.org.nyud.net:8090/check?uri=h
And here's the result:
1. Line 18, column 40: there is no attribute "LANGUAGE" .
<script type="text/javascript" language="javascript" src="http://a.as-us.falkag.
2. Line 303, column 25: there is no attribute "ALIGN" .
<div class="ad2" align="center"><!-- ad position 2 -->
3. Line 637, column 11: there is no attribute "SIZE"
<font size="3" color="#006666"><b>Search Freshmeat:</b></font><br>
4. Line 637, column 21: there is no attribute "COLOR" .
<font size="3" color="#006666"><b>Search Freshmeat:</b></font><br>
5. Line 637, column 30: element "FONT" undefined
<font size="3" color="#006666"><b>Search Freshmeat:</b></font><br>
6. Line 637, column 65: document type does not allow element "BR" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag .
7. Line 638, column 54: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag .
<input type="hidden" name="link" value="freshmeat.net">
8. Line 639, column 27: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag .
<input type="text" name="q">
9. Line 640, column 6: end tag for "FORM" which is not finished .
</form>
10. Line 641, column 9: there is no attribute "ALIGN" .
<p align="right"><a href="http://freshmeat.net/"><b>More Meat...</b></a>
11. Line 1339, column 78: there is no attribute "BORDER" .
12. Line 1339, column 88: document type does not allow element "IMG" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "ADDRESS" start-tag .
13. Line 1340, column 10: end tag for "NOSCRIPT" which is not finished .
</noscript>
(Hmmm weird, the next time i ran the validation it only gave me 12 errors). Anyway, that's all - considering slashdot used to have around 300 errors, this is quite an advancement. The first errors are probably a missing opening <form> tag.
A workaround (tho I don't know how effective) would be replacing the freshmeat data with an IFrame
There's one thing you easily conform to standards with, end your img and br tags properly.
/> />
Example 1: <img src="img.png"
Example 2: <br
but is this getting us any closer to the new Duke Nuk'em? Shouldn't you boys be working on that?
This
... slashdot does not work with Netscape 4 when I try it today.
It sucks in Mosaic 1.0 as well.
Want to improve your Karma? Instead of "Post Anonymously", try the "Post Humously" option.
Ever since the November 2003 article on A List Apart, 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.
Have you read the Moderation Guidelines Addendum?
Hahahahahaha :)
The thing is that Slashdot is now natively readable from within Lynx or Links (only with they put some kind of link on top of the page pointing to the content itself, having to go through 5 pages of menu before actually reaching the content is annoying)
"The way we can tell it's C# instead of Haskell is because it's nine lines instead of two." -- wadler
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.
Pants are still optional, but recommended for you.
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.
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:
/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.
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.
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.
But it does fail gracefully. Other than looking like crap, Slashdot is perfectly usable in Netscape 4.
bohemoth n: A bohemian behemoth.
I'm visualizing a 300-pound beatnik. ooo, that's nasty...OK, maybe that's a typical slashdot member...
Have you read my blog lately?
I hope too much doesn't change with light mode, as it is far more readable than before on my Sidek!ck II. Please keep in mind that this device (aka Danger HipTop2) has no support for javascript or style sheets. CCS will have zero effect on these devices. I didn't have to change any settings, as I already had "light" & "no icons" checked for my home page. I don't see a setting for "handhelds" as indicated in the submission.
- Posted via Danger HipTop2 / T-Mobile Sidek!ck II -
That's because your browser is using Times New Roman, Slashdot doesn't pick a font for article/comment text.
Which is easy to change:
Firefox: Tools > Options, select General(FF1.0)/Content(FF1.5b), Click on Fonts & Colors(FF1.0)/Advanced(FF1.5), and choose Sans Serif as the Proportional Font, You can also choose which Sans Serif font you want below
IE: Tools > Internet Options, General tab, Fonts button, Change the web page font to one of your liking.
Too many zeros, not enough ones
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:
As compared to:
BTW, nice use of fieldset.
No good at all. id is a unique id. Like name. What you want is exactly what class is for. You can have multiple class entries (including undefined ones) so your example would be
.mod_neg1 .Friend
<li class="comment Troll Insightful mod_4 Friend Friend_of_Foe" id="(comment #)">
Then your personal CSS file could have entries like so:
{
display:none;
}
{
font-weight: bold;
}
etc.
HitScan
It's turning into a morph of Godwin's Law.
Because it's my law, I will call it MFH's Law:
The dangers of knowledge trigger emotional distress in human beings.
+4 Funny for "Hahahahahaha :)"?!!! Hell, I can beat that. Check it:
:D
"BWWWWWWWWWAAAAAAAHAHAHAHAHAHAHA!!"
oh and
In a normal browser, that's fine and dandy. However, HTML itself (devoid of CSS) is read and used by other devices. For instance if I am browsing in Lynx, that list makes a huge difference in display and don't even get me started on voice readers and other things.
HTML is not there purely to be used as an anchor for style. It is there to explain what kinds of content a document contains. I mean, why use an h1 - h6 or a p or em or strong? You could simply create contextual style definitions for divs and spans which would, more or less, do everything that other tags do.
I mean really, if HTML was really just there for CSS all you'd need would be , , , , , , , and . You wouldn't even need since you could could just define inline divs.
I'm guessing you're probably used to sites looking like shit then, right?
Seriously, why?
I like my women like my coffee... pale and bitter.
"Now, I know that Slashcode is inherently badly written, but I've got to assume that it's still dynamically driven, making the actual amount of HTML across all of Slashdot tiny, actually."
Yet you still come here everyday to complain. You're like Stadtler and Waldorf all rolled into one.
Cue the Muppets theme tune...
Here's the bug:
Page Threshold = 50 posts
Story has 200 posts, 4 pages
First thread is 101 posts.
Slashdot will show the first thread on pages 1, 2, and 3.
Page 4 will show the last 50 posts
The other 49 and their posts and threads will be invisible unless you go into nested mode.
Whenever I hear the word 'Innovation', I reach for my pistol.
Please, please, please display years on your dates ... I can't believe this hasn't been fixed yet.