Its verbose, hard and slow to change, hard for end users to customise, works terribly in any other context than a desktop browser, plays terribly with all other web tooling.
PG has his priorities (and limited time). I remember him stating in another thread that any time he spends improving this site were on trying to improve its content, not other relatively meaningless problems like its formatting.
In the same circumstances I completely agree with his decision, but lets not pretend as font end code goes this is nothing else than a showcase of bad practices.
"Its verbose, hard and slow to change, hard for end users to customise, works terribly in any other context than a desktop browser, plays terribly with all other web tooling."
[citation needed] x 4.
This is a recitation of the propaganda, yes. However, propaganda is not a logical argument. What about "<center>" is verbose? Do you have a CSS solution that is actually shorter than "<center></center>", while also being good CSS (and not just using 1 character class names)? Do end users really have a problem customizing the center tag? How so? CSS and XPath do not particularly have a problem with it. I use this site on my 3DS sometimes and it seems to work reasonably well. What "web tooling" matters, and how does it interact with Arc so horribly?
During the old CSS wars I sort of understood the argument for deprecating it, but with the way browser engines have been going, there's really no reason to pretend there's any reason to get rid of the element, because it's just one line in a definition file somewhere that specifies it as a block element with a certain default style.
HTML is presentation and CSS is the design and one does not mix the two on a properly designed site. If they are independent, it become possible to change the look of the site, independent of the data presented.
Yes, that means you use tables, for tabular data, but forums are not tabular data. They are more akin to lists, which have their own rules.
Yes, that's the propaganda. I don't think reality has worked out that way. At least, I've never seen a site get overhauled via CSS alone on anything other than demo sites designed for that explicit purpose. Since CSS now lets you override anything and turn tables into lists and lists into tables, it hardly matters any more, and the entire concept of "semantic" is just a sick joke unless the word "context" shows up somewhere, which it never seems to in these conversations, and in particular, hasn't got much place here either.
Well, in order to help me (and no doubt others) to learn further, would you be able to produce what you consider as good html that produces a page that looks effectively the same? I'm specifically asking not for a redesign, I'm looking to be able to compare "good code" against "bad code" to produce this layout.
I think that would be really useful - thanks.
In particular, I don't understand:
* It's verbose,
I'd love to see how "modern" practices make it less verbose
* hard and slow to change,
Until I can see something you claim to be easy to change I can't assess this.
* hard for end users to customise,
How are end users going to customise it? It's a web page.
* works terribly in any other context than a desktop browser,
Actually it renders well on every browser I use, whereas most "modern" pages screwup royally on some of my browsers. That's one of the things I really don't understand. For reasons I won't go into, I use some really old browsers on some limited platforms. Frequently pages that are held up as examples of good design or good implementation render really badly, if at all. HN is one of the few sites I can browser on all my platforms, so I'd really like to see what you think would be better.
* plays terribly with all other web tooling.
I guess this is where my complete ignorance of modern web programming comes in, because I have no idea what this means.
I appreciate your response, and look forward to learning more. I've wanted for some time to learn more about modern web programming, and despite several attempts I feel that it's just a foreign land. It would be great to get a real insight.
> How are end users going to customise it? It's a web page.
User-agent stylesheets, which play much nicer with CSS than HTML (<center> tags are evil.)
> Actually it renders well on every browser I use, whereas most "modern" pages screwup royally on some of my browsers. That's one of the things I really don't understand. For reasons I won't go into, I use some really old browsers on some limited platforms. Frequently pages that are held up as examples of good design or good implementation render really badly, if at all. HN is one of the few sites I can browser on all my platforms, so I'd really like to see what you think would be better.
HN renders the exact same on all three of the platforms I use -- Windows 7, iPad, and iPhone. This is not an inherently good thing, and it makes browsing a pain.
I'm not the parent, but I do web development - here's how I understand it:
> hard for end users to customise
I think, he means that a css-based ("modern") solution would allow end-users to just swap the css (a feature most web-browsers have as a built-in) to change the site's appearance - whereas you cannot change the way a <table> looks, for example. That is, you can't easily make <table> columns appear below each other, for example.
> works terribly in any other context than a desktop browser
The parent probably means modern non-desktop web browsers, i.e. ones with javascript and media-query support. Using media queries would allow automatically changing the site's appearance to something more usable for small-screen devices (for example) - by using bigger buttons/links/up-vote-triangles or something like that.
The problems you mentioned are orthogonal to that - mostly caused by devs that only target js-enabled modern browsers. That's bad, of course, but it's not part of "modern web development" per se - it's just bad web development.
> plays terribly with all other web tooling
If you use "modern" web-dev methods (that is, styling only per css), other (web-)services that display your site in different contexts (think google reader or desktop mail readers or something like that) can swap or remove the css and get the content (including semantics like "headline", "list" and so on) without the styling ("these are table columns", "this is centered"). In theory, at least.
I don't understand the rest of the points either, to be honest. <center> and <table> are very compact, compared to equivalent HTML/CSS solutions - that's part of the reason why people keep using them.
http://www.icombinator.net/#_home is a reasonably decent example, its very obvious from reading the source that it is easier to read and understand (I am not even sure I can remember what vspace="" does). Instead of duplicating inline styles for every element you use minimal markup and use CSS to style the page. There are a few advantages to this: CSS caches, dynamically generated html with inline styles do not, its easier to edit, click inspect on the page and change some of the css, the whole page changes, you dont need a change + reload cycle.
Lots of people apply custom stylesheets because the default one has a lot of flaws, or sometimes they just want to. See http://userstyles.org/
The fact that this website works terribly on mobile is unarguable.
Web tooling means the browsers inspectors tools, the css overrides plugins, there are millions of plugins / enhancement tools and most of them can only work given a reasonable set of html and css to work with.
For a simple site like HN you won't see much benefit in rewriting it. Complex, heavily-styled websites are where HTML4/5 shine.
The biggest benefit is simply separation of duties (context - html, format - css, function - js). It looks nasty as hell and is a pain to deal with when html, tag formatting attributes, css, and javascript functions are all combined in single tags, systemically throughout the entire site. Separating them all both reduces code reuse and makes the whole thing much more readable.
Also, implementing something like CSS Media Queries would be 'interesting' without separation of concerns.
> Well, in order to help me (and no doubt others) to learn further, would you be able to produce what you consider as good html that produces a page that looks effectively the same?
I've actually considered writing a sort of "proxy" website for HN that just rewrites the HTML to work better on a phone, just for my own use. If I ever get around to it, I'll let you know :)
Comments
Its verbose, hard and slow to change, hard for end users to customise, works terribly in any other context than a desktop browser, plays terribly with all other web tooling.
PG has his priorities (and limited time). I remember him stating in another thread that any time he spends improving this site were on trying to improve its content, not other relatively meaningless problems like its formatting.
In the same circumstances I completely agree with his decision, but lets not pretend as font end code goes this is nothing else than a showcase of bad practices.
"Its verbose, hard and slow to change, hard for end users to customise, works terribly in any other context than a desktop browser, plays terribly with all other web tooling."
[citation needed] x 4.
This is a recitation of the propaganda, yes. However, propaganda is not a logical argument. What about "<center>" is verbose? Do you have a CSS solution that is actually shorter than "<center></center>", while also being good CSS (and not just using 1 character class names)? Do end users really have a problem customizing the center tag? How so? CSS and XPath do not particularly have a problem with it. I use this site on my 3DS sometimes and it seems to work reasonably well. What "web tooling" matters, and how does it interact with Arc so horribly?
During the old CSS wars I sort of understood the argument for deprecating it, but with the way browser engines have been going, there's really no reason to pretend there's any reason to get rid of the element, because it's just one line in a definition file somewhere that specifies it as a block element with a certain default style.
HTML is presentation and CSS is the design and one does not mix the two on a properly designed site. If they are independent, it become possible to change the look of the site, independent of the data presented.
Yes, that means you use tables, for tabular data, but forums are not tabular data. They are more akin to lists, which have their own rules.
Yes, that's the propaganda. I don't think reality has worked out that way. At least, I've never seen a site get overhauled via CSS alone on anything other than demo sites designed for that explicit purpose. Since CSS now lets you override anything and turn tables into lists and lists into tables, it hardly matters any more, and the entire concept of "semantic" is just a sick joke unless the word "context" shows up somewhere, which it never seems to in these conversations, and in particular, hasn't got much place here either.
I hate to bring that site up, but 4chan's recent overhaul was a move to HTML5 and CSS from table-based design for that very reason.
HN Discussion on it: http://news.ycombinator.com/item?id=3902976
.a, .bunch, .of, .selectors, .youd, .use, .anyhow { text-align: center; }
one time, in one place, in the CSS is a lot terser than:
<center></center>
repeated 20x per page.
Well, in order to help me (and no doubt others) to learn further, would you be able to produce what you consider as good html that produces a page that looks effectively the same? I'm specifically asking not for a redesign, I'm looking to be able to compare "good code" against "bad code" to produce this layout.
I think that would be really useful - thanks.
In particular, I don't understand:
I'd love to see how "modern" practices make it less verbose Until I can see something you claim to be easy to change I can't assess this. How are end users going to customise it? It's a web page. Actually it renders well on every browser I use, whereas most "modern" pages screwup royally on some of my browsers. That's one of the things I really don't understand. For reasons I won't go into, I use some really old browsers on some limited platforms. Frequently pages that are held up as examples of good design or good implementation render really badly, if at all. HN is one of the few sites I can browser on all my platforms, so I'd really like to see what you think would be better. I guess this is where my complete ignorance of modern web programming comes in, because I have no idea what this means.I appreciate your response, and look forward to learning more. I've wanted for some time to learn more about modern web programming, and despite several attempts I feel that it's just a foreign land. It would be great to get a real insight.
Thanks.
> How are end users going to customise it? It's a web page.
User-agent stylesheets, which play much nicer with CSS than HTML (<center> tags are evil.)
> Actually it renders well on every browser I use, whereas most "modern" pages screwup royally on some of my browsers. That's one of the things I really don't understand. For reasons I won't go into, I use some really old browsers on some limited platforms. Frequently pages that are held up as examples of good design or good implementation render really badly, if at all. HN is one of the few sites I can browser on all my platforms, so I'd really like to see what you think would be better.
HN renders the exact same on all three of the platforms I use -- Windows 7, iPad, and iPhone. This is not an inherently good thing, and it makes browsing a pain.
I'm not the parent, but I do web development - here's how I understand it:
> hard for end users to customise
I think, he means that a css-based ("modern") solution would allow end-users to just swap the css (a feature most web-browsers have as a built-in) to change the site's appearance - whereas you cannot change the way a <table> looks, for example. That is, you can't easily make <table> columns appear below each other, for example.
> works terribly in any other context than a desktop browser
The parent probably means modern non-desktop web browsers, i.e. ones with javascript and media-query support. Using media queries would allow automatically changing the site's appearance to something more usable for small-screen devices (for example) - by using bigger buttons/links/up-vote-triangles or something like that.
The problems you mentioned are orthogonal to that - mostly caused by devs that only target js-enabled modern browsers. That's bad, of course, but it's not part of "modern web development" per se - it's just bad web development.
> plays terribly with all other web tooling
If you use "modern" web-dev methods (that is, styling only per css), other (web-)services that display your site in different contexts (think google reader or desktop mail readers or something like that) can swap or remove the css and get the content (including semantics like "headline", "list" and so on) without the styling ("these are table columns", "this is centered"). In theory, at least.
I don't understand the rest of the points either, to be honest. <center> and <table> are very compact, compared to equivalent HTML/CSS solutions - that's part of the reason why people keep using them.
http://www.icombinator.net/#_home is a reasonably decent example, its very obvious from reading the source that it is easier to read and understand (I am not even sure I can remember what vspace="" does). Instead of duplicating inline styles for every element you use minimal markup and use CSS to style the page. There are a few advantages to this: CSS caches, dynamically generated html with inline styles do not, its easier to edit, click inspect on the page and change some of the css, the whole page changes, you dont need a change + reload cycle.
Lots of people apply custom stylesheets because the default one has a lot of flaws, or sometimes they just want to. See http://userstyles.org/
The fact that this website works terribly on mobile is unarguable.
Web tooling means the browsers inspectors tools, the css overrides plugins, there are millions of plugins / enhancement tools and most of them can only work given a reasonable set of html and css to work with.
Probably worth mentioning that the icombinator home page is a 6KB download vs a 25KB one for ycombinator.
For a simple site like HN you won't see much benefit in rewriting it. Complex, heavily-styled websites are where HTML4/5 shine.
The biggest benefit is simply separation of duties (context - html, format - css, function - js). It looks nasty as hell and is a pain to deal with when html, tag formatting attributes, css, and javascript functions are all combined in single tags, systemically throughout the entire site. Separating them all both reduces code reuse and makes the whole thing much more readable.
Also, implementing something like CSS Media Queries would be 'interesting' without separation of concerns.
> Well, in order to help me (and no doubt others) to learn further, would you be able to produce what you consider as good html that produces a page that looks effectively the same?
I've actually considered writing a sort of "proxy" website for HN that just rewrites the HTML to work better on a phone, just for my own use. If I ever get around to it, I'll let you know :)