I was happy to see someone finally referred to the motherfucking websites.

On the other hand, I was disappointed to see the unique one of those I think it is worth to follow the advice [1] was not cited.

For curiosity reasons, I found out about [1] on a well-known website [2] that definitely puts content in front of presentation, even though I like their website's design.

[1]: https://bestmotherfucking.website/

[2]: https://suckless.org/sucks/web/

Heh I knew there were many but I couldn't remember them all, and the search terms around these are, shall we say, a bit dangerous.

Of all of them, I think the one you linked is probably the best. It is still interesting to watch the progression.

I know whitespace is "wasted" file size for transport purposes, but god damn that HTML on Better and Best are unreadable without proper indentations.

The source is on GitHub, you're basically looking at "machine code" for the browser. But if you want to verify it's the same code, it isn't obfuscated, so just run a beautifier over it and compare. Best of both worlds.

> 7 fucking declarations. That's how much CSS it took to turn that grotesque pile of shit into this easy-to-read masterpiece.

Such drastic difference with basic adjustments, damn

I honestly prefer the original version without css. Plain browser styles have a kind of raw beauty that it's very hard to surpass.

In my mind "raw browser" look corresponds with "almost insane details coming" as the only sites still using that are often run by people who are WAY more concerned with the content they want to talk about than with the presentation.

Um, shouldn't all people be WAY more concerned with the content than the presentation? I don't want to read stream of consciousness with occasional lack of spaces and random case, but I'd really prefer to only read websites by people who give zero effs to presentation, and I had prior to this moment assumed everyone agreed, but that it was fun to do presentation, so people did. There are people who care about the presentation of what they are reading on even close to the same level of the content itself?!

If you care about your content, you should care about readability and navigability.

You would be astounded how many people care about the form and not the function. They live among us. They vote.

Totally agree. For me, the original is far easier to read than the "better" or "best" versions.

Initiate rant mode:

- The gray on gray is like a joke, except it's not. I get the theory and alleged benefits. I get that some do prefer it, especially for IDEs. I get that some are happy to see (or at least apply) it all over the web. It just does not seem to apply here. Man alive. Literally making it harder to differentiate the text.

- I don't mind adjusting the browser width to get the lines exactly the right length for my screen and reading preference. Actually, I far prefer it over all the other options. This is like a tragedy-of-the-commons or lowest-common-denominator or dumbing-down-on-the-false-premise-of-being-smart issue. Instead of utilizing what we have, and encouraging people to learn and become capable with the simple and flexible tools, it's one size fits all (or, you pick the size you think I want). Only it's not.

End of rant. Sheesh.

I would agree, with the exception of the text lines being too long.

I flipped over into reader mode and it's much improved, solely because of line length and dark mode.

Yes, the only reasonable css I'd concede is a max width in ch. But this should really be a browser standard to begin with.

You and me both. Perhaps we're relics of a bygone age where tech people cared more for function than form.

The older version is very difficult to read.

Too oversimplified ... no images (with captions), no other media (video, audio), no tables or grids, etc.

almost gasp like a book.

I have quite a few books with a pretty cover, pictures, charts, pullquotes, etc.

LaTeX predates HTML by a decade and supports pictures, charts, quotes and far more, and doesn't force me as an author to make finicky decisions about presentation. I just write the content, and then set the document class to whatever the publisher wants.

Who reads books with no tables, graphs, images, or maps? ;)

My immediate thought was The Machinist's Handbook or a similar publication for chemistry that is pretty much all tables.

Have you any idea how much work goes into typesetting a book?

Presented 'like a book'. Its a blog, not a 400 page novel.

That gray text is very bad for legibility, and so is the line spacing. 1.2 tops, and stick to black on white or very very light gray.

Wow, thanks for those links! No joke; the CSS on the better site is literally going to become my default CSS from now on.

If you want a bit more, but not the frameworks with thousands of unused classes, this might be helpful: https://www.cssbed.com/

> If you want a bit more, but not the frameworks with thousands of unused classes,

I can't speak for other frameworks but tailwind only compiles the classes you actually use at build.

It's a great example of how a little can do a lot.

The balance between design & function can be at odds when the mission of the page is not clear.

For consumption, these are awesome, your brain almost relaxes as it's easier than the usual onslaught.

It's also a great example of how even such a little can go wrong.

The CSS of the second website is wrong, as it uses 'color' without setting 'background-color'. Assuming anything about the default background color is not possible because it is user-configurable in most browsers.

At least http://motherfuckingwebsite.com remains readable when you change your color settings (the second one is completely unreadable on my browser).

Good point. If the background color changes that often, I'm assuming there's probably a good test out there for that and more.

The text was readable as designed on a white-background. CSS that considers accessibility or print friendly is always good to add.

> I'm assuming there's probably a good test out there for that and more.

Javascript test?

Yeah there's lots of a Javascript or css or html validators out there, and likely geared towards checking against a set of best practices.

If it was a javascript that checked for the elements you want to ensure is there that would be neat too, I just wouldn't want it to be just me :)

You want https://thebestmotherfucking.website

It’s ok, but it’s already a bit too much. :)

<style type="text/css"> ? what are we dinosaurs? You might as well leave out the closing <p> tags if you are going to be like that.

If the whole point of your website is to brag about code to accomplish reasonable formatting.... can we at least have code formatting? I think I have enough bandwidth to afford some line breaks.

Client side GA????

Not that I disagree per se, but if your job is to dress up CONTENT provided by others as a website or web app, there can also be the reverse problem:

An UI made of disintegrated, inconsistent and half-assed tries at writing CSS/JS. Not a rare problem in my experience.

Also happens to me when trying to write a "tiny web app for fun" where the CONTENT is interactive and created by myself.

Clicking on the first website, I can't even view it because it's asking for captcha.

So, to extend your comment: you do not need to worry about content if your website isn't even reachable. A GET request should never result in the client being bombarded with captchas. Unless you have a sure fire way to determine if said client is a human or an evil AI taking over the world (nobody does), just serve the damn page.

> Clicking on the first website, I can't even view it because it's asking for captcha.

It's definitely not, there is something else doing that to you. But it's not this website.

It's using some form of DDOS protection, not Cloudflare, but something. Access it via tor to see an example.

I’d never seen thebestmotherfucking.website! I appreciate the nuance it adds. I don’t have any nuance of my own to add right now but I do have to share my amusement at the empty list item under contributors. I figured there would be something in the source referencing someone (similar to how some folks on Twitter make special acknowledgments for people not on Twitter), but if this was that it’s a very Inside Baseball reference:

  <li><a href=""></a>
  </li>

Or it could be a joke about copypasta in hand-authored HTML. Or just actual copypasta. Who knows! But I enjoyed it.

prose.sh hits a sweet spot for me. Not just in the minimal-but-rich-enough presentation of blog posts[0], but also (off-topic for this thread I guess) the simple interface: just scp your markdown to prose.sh.

[0] example post from my blog https://mvexel.prose.sh/20230227-keeping-osm-database-uptoda...

You make it sound like an unequivocal truth; it isn't really so. I launched my own hobby website/blog only after I designed my content presentation. It helped me understand what I was writing. Of course I had the underlying drive to write something already, and was not coding up some CSS without a vision.

Everybody finds their writing juices differently. Push where it means you'll write more.

If you can't make it good, you make it pretty.

The second one is absolute shit on my 27" 5k display though. The first one is not.

Could you elaborate? The first one is uncomfortable to me if you have a large browser window, because the lines of text are so long and it’s hard to follow. The second one at least fixes that problem.

Point being you can resize the window to where it’s comfortable rather than have a narrow column forced upon you.

Oh, well I like to have multiple tabs open, so that doesn’t work for me.

oy, that last link made my eyes strain. astigmatism ftw!

personally I miss the vanilla html of the late 90s (unless advanced guis)

same went for emacs I stopped using themes

The default Emacs theme is not great, but the current best practice is to stop messing with themes and just use modus (vivendi or operandi depending on your light/dark preference), especially since they are now included as part of Emacs.

> current best practice is to stop messing with themes and just use modus

Bold statement. Those look mostly terrible to me.

what's missing from vanilla ? honest question

There's nothing missing per se, but the contrast is not always good, and the highlight face is distracting.

Yeah, I actually like the oldest of the three best. The one with 7 css declarations was annoying to me somehow and the third option was garbage. I miss websites that were about conveying information.

It's a social dynamic thing. Whenever there's too many people it becomes a mess with scams, business, fads, over-engineering, regulations...

Mailing lists are still good for that I guess.