A Motherfucking Website | Hacker News Reader

A Motherfucking Website

motherfuckingwebsite.com

117 pointstzury72 comments

There are very very very few, about 1 in 10000, well executed Javascript frontends. Just stop using it for _fkin everything_.

I can't even file a damn claim with my insurance on StateFarm.com because some dev had to itch some javacraptasic urge.

just wait until statefarm deploys electron.

I think this site epitomizes what I don't like about the internet. There's no whimsy, no sense of artistry or creativity or mystery or playfulness. You have a canvas to do anything and you choose to do nothing.

It acknowledges that the problem space is difficult. Making something truly delightful is no small task — and it responds by giving up. The site is a (forceful) shrug.

Im with ya. The OP link is so painfully predictable and 1 dimensional. Its like people are unoriginal, which isn't so bad, but simultaneously dont possess the awareness to realize theyre unoriginal..... so to those who are not unoriginal its all so very tiresome. Oh wow you used swearing to make your point... I wonder how long it took for you to come up with that. I myself love the very much alive-and-dynamic interwebz. I love the creativity. I love the weird. I love javascript. I love the 9000 ways to do things because it always works out in the end and sorts itself out. There's ebbs and flows just like every other thing in life, where things evolve in phases

The main thing I like about the Internet is the exchange of information. Many sites make this awfully difficult or insane (download tens of megabytes to read a few dozen bytes).

There is absolutely the side of the internet you're talking about, regarding making things pretty, but it's secondary in my opinion.

Art and style is information. You (and I) just have a preference for factual information that can be transmitted via concise text and numbers and no bloat.

A picture is worth a thousand words, but so many pictures and "style" that adorn websites are completely unrelated to the purpose, design, content, or intent of the site. And I'm not referring to ads. A layout that makes things difficult to find or read or experience isn't contributing to the access or portrayal of information.

Youtube used to let you scroll through the list of related videos and read comments while keeping the video you were watching anchored. That's a regression in terms of usability and thus a regression in terms of "art and style".

> Art and style is information.

And bad art and bad style can prevent the spread of information. Remember Hippocrates: first do no harm.

Agreed! This website is akin to saying “this is fucking chicken and broccoli and eat it every single day because it’s food and nutrients and you don’t need anything else”. Well you know what, sometimes I like ramen or curry or a Twinkie or whatever.

From the satire section:

"I'm not actually saying your shitty site should look like this. What I'm saying is that all the problems we have with websites are ones we create ourselves. Websites aren't broken by default, they are functional, high-performing, and accessible."

I.e. the site is explicitly saying it's not trying to argue every site should actually taste like chicken and broccoli, rather it shouldn't lose so many of the good things a chicken and broccoli site already accomplishes out of the box in being different.

I've never really liked the delivery of that message but at the end of the day it's a good message and can't be boiled down to "make your site bland".

I'm not sure if you read it till the end but I thought this observation was pretty astute.

>Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.

> roncesvalles

Meta: is this for the town in Spain or the street in Toronto?

Yeah that's what I'm always feeling like I need out of my use of the internet, more whimsy. totally dude.

> I think this site epitomizes what I don't like about the internet. There's no whimsy, no sense of artistry or creativity or mystery or playfulness. You have a canvas to do anything and you choose to do nothing.

Sometimes nothing is the best thing to do, especially given all the examples that people have decided to do 'something' and it ends up much more than this site.

> There's no whimsy, no sense of artistry or creativity or mystery or playfulness. You have a canvas to do anything and you choose to do nothing.

This is all well and good but it should come after being able to load a page quickly that's accessible over a slow connection and isn't wasteful of metered connections.

Considering the phone heating, react driven mess that every other website has become, this sort of minimalism is its own style of whimsy/artistry.

the non-minimal google analytics part of the page:

    <!-- yes, I know...wanna fight about it? -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    ...

codegolfing in a text-only web page is next level irony

This is the standard Google analytics snippet. It's probably automatically minified, maybe code-golfed. In any case, the author of the page did not also write this snippet.

Good point, didn't know that. Figured it was a cheeky dev.

The funny part that people start to forget is that this version of snippet was introduced when original one (ga.js) was blocked by most of the world (back in the days when Firefox became browser number one and Adblock Plus was in use).

New snipped was designed to break Adblock Plus, which was unable to block inline scripts (and simple blocking analytics.js caused js failures in the same script block). So it was malicious dark pattern. Obviously eventually it was bypassed, which required fake replacements like https://github.com/gorhill/uBlock/blob/master/src/web_access...

You/he should see how my uBlock Origin, NoScript, and Privacy Badger liked this ;)

They are right. It is good. They call it satire, but still I think the stuff they mention is right; yes it should look like this and shouldn't need pictures and CSS and whatever else they add too much. Also, it works with "http:" and with "https:", so that is also good. Another benefit is that I do not have to override or disable the CSS to make it even partially good, because it does not have CSS. It works how it is, unlike most.

However:

- The <meta charset> command should not be needed, if the text is only ASCII anyways.

- The <meta name="viewport"> command should not be needed, if they use the simple HTML as this anyways (without CSS); the client should ought to set it automatically according to the user-defined window size.

- They even have a <script> command (with Google Analytics), which also should not be needed. They have a comment if you wanna fight about it. (I have scripts disabled.)

> yes it should look like this and shouldn't need pictures and CSS and whatever else it might need

Isn’t this entirely dependent on what the purpose of the website is? If i am visiting a website to learn about different types of flowers, for example, I sure hope there are some pictures of flowers on it.

Yes, if you are trying to view pictures of flowers, then you are right. They should not add the pictures merely for decorations, but if you want to view a document explaining flowers then it is helpful to include the pictures of the flowers being described. (Similar thing is valid for other kind of documents that might have pictures of whatever is being described, but many documents should not need as many pictures as they too often have.)

Why are things “merely for decorations” bad? A ton of what we do in the world is for aesthetic reasons, why shouldn’t that include web content? Things looking nice is an important thing for many people.

Wastes space on the screen (especially if you have to scroll the screen to read it, or if you want to print it out and you want to save paper and ink), might sometimes make it more difficult to understand (in case you do not know what is the significance of the picture), and can use up power and disk space, etc.

However, sometimes it might help if you can specify which ones are merely for decoration and what is what, that you can easily disable them and to avoid downloading them. (Even if a picture is meant to be a significant part of the document because it is what it is about, then you still might not want to download it right away although it would help to display a placeholder (e.g. a hyperlink) in that case.)

I used to be of the "and things on the web should all support http unless they really need https" crowd but corporations (ISPs, hotels, airports) driven by the ad sales industry really drove me to the "nah, we should really get everything on https" crowd.

Edit: Forgot <meta name="viewport" content="width=device-width, initial-scale=1">, you probably want this even without CSS. What the client ought to do and what the client does do are different stories and neither are guaranteed to be what you want in the end anyways.

> I used to be of the "and things on the web should all support http unless they really need https" crowd

Supporting unencrypted connections does not imply that the client is required to use them.

> What the client ought to do and what the client does do are different stories and neither are guaranteed to be what you want in the end anyways.

Yes, which is why the reader should configure how they intend it to be and the document author should not prevent it from working how the reader intended.

Supporting both is part of the problem unfortunately.

In principle I agree on how the user agent should behave, in practice leaving viewport as default doesn't necessarily match what the user wants or what the developer wants. E.g. user zoom settings are still applied after the viewport scale setting, just now in a consistent way across mobile devices.

https should be used just about everywhere. We should no longer be assuming that we live in a world where people won't fuck with you. If you don't have https then someone can change your website so hard... that you're basically allowing someone to use your credibility to speak to your visitors.

The social engineering potential is limited only by imagination.

Here's a few more that popped up after the original:

https://motherfuckingwebsite.com/ (original)

https://web.archive.org/web/20240629092320/http://bettermoth...

https://evenbettermotherfucking.website/

https://bestmotherfucking.website/

https://thebestmotherfucking.website/

https://perfectmotherfuckingwebsite.com/

The last one is quite perfect indeed, others are overdesigned and too specific in their styles that look dated now.

It isn't perfect; it is even worse (unless CSS is disabled; I often disable CSS due to the excessive and undesirable CSS in web pages (which sometimes makes it very slow, but even if it doesn't, it doesn't look very good)). The original is better.

> Shit’s finally lightweight and loads fast;

The original does it better. (If JavaScripts are enabled, then the <script> command might make it slower but you can omit that. Fortunately, this "perfect" one does omit the <script>, at least.)

> Finally fits on all your shitty screens;

Not very well. With a small window size, the font is too big and it doesn't fit. With a big window size, it wastes space. The original, without CSS, allows it to fit to the window size appropriately.

> Finally looks the same in all your shitty browsers;

It is better not to; it should look correct in all of the browsers but that does not mean that it should look the same. User preferences, considerations having to do with the display (e.g. mono vs colours), available fonts, accessibility, computer types, etc, can and should make it different, and the author of the document should not have to worry about most of this (as long as minimal accessibility tags are included where necessary; see below about the HTML lang attribute).

> Won’t bleach your fucking eyeballs at night if your browser thinks you like dark things;

The use of CSS means that it is necessary to make this consideration. Omitting CSS makes this unnecessary.

> The motherfucker’s still accessible to every asshole that visits your site;

Due to the redirection of "http:" to "https:", it isn't.

> Shit’s still legible and gets your fucking point across.

Let the reader decide what is "legible".

> I know you love marginalization, but you should take care of people. The HTML tag doesn’t include the lang attribute in your shitty webpage.

This is a valid point; there are benefits of specifying the language.

> Don’t let improper marks and quotes make their way onto websites because of dumb defaults in applications and CMSs.

The ASCII quotations marks are good enough for most purposes, and are also more portable. However, if you do not want to use them, OK; at least you added a <meta charset> command in this case (which is relevant for this one, so it is appropriate to be included; but the <meta charset> command is superfluous in the original).

> And did you let the browser choose the font? Don’t make me read such text with Times New Roman.

I hope you do let the browser choose the font, according to the font installed by the user. Don't make me read such text with needing to download additional fonts that I don't want.

> And as you’ll never be perfect, let others improve your shit or do what the fuck they want to.

OK.

>"Good design is as little design as possible." - some German

Actually german engineering have bad design that focuses on user convinence and/or aesthetics.

https://www.youtube.com/watch?v=qU7TJPZ2Tp4

Instead of having the camera just pointing outwards, there's an extra failure mode when the camera doesn't flip out. I seen a BMW with the reverse camera stuck, so it can not retract.

Bonus: https://youtu.be/CVDDtbiGDxA?t=148

I am making a personal webpage based on those examples. The problem is that I want to embed mathematical formulas, so it cannot be Javascript free; however, I think I am doing a good job minimizing dependencies. My goal is to put some educational and research materials directly on the web, like this: https://ykonstant1.github.io/power-draft.html

I think that my background is a little too yellow, though.

Great site!

If you want to improve its looks, you can just remove all the css styling.

Also, since you are using mathjax, it's better to use the dollar signs as in LaTeX, and not all these ugly tags with classes. As a rule of thumb, going from latex to html involves little more than replacing empty lines by <p>, \sections by <h2>, and \includegraphics by <img>.

The compilation to html is being done by pandoc, so I have no saying in how the tags are generated. I don't really know anything about web dev, so this is the best I can do :( I just write Latex and markdown and wrestle with pandoc to make an html out of those :D

I can just about, with surprising difficulty, select the text of those mathematical formulae; but if I copy them to the clipboard, I get only blank lines.

Are you sure pre-rendering images of the formulae wouldn't be just as effective?

Oh, I just don't know how to do that. I just use pandoc to convert latex to html, and I am not very familiar with the tool. I'll look into that, but if I pre-render, will the background color of the images match that of the website?

Fair enough :)

I was assuming giving the images a transparent background, but I don't know what pandoc supports.

Could you generate MathML server side to avoid JS?

Here's a list of most follow-ups: https://github.com/lyoshenka/awesome-motherfucking-website

My favourite is https://evenbettermotherfucking.website/ but I'm a sucker for actually nice and readable typography.

Quote in the end is by Dieter Rams

https://www.amazon.com/Dieter-Rams-Little-Design-Possible/dp... (link doesn't contain affiliate)

Something about the vulgarity and brashness of the tone of this site just strikes me as so mid 2010's. Can't say it's aged particularly well.

I appreciate the concept here, but I agree with your sentiment. It’s reminiscent of the crude as a personality type that was almost hipster popular.

It has Maddox vibes.

https://en.wikipedia.org/wiki/Maddox_(writer)

I dunno about you, but I was born in the 1980s and my dad cussed like a sailor, loved George Carlin, etc. I'd say that the language has a timeless quality.

I don't know if there is such thing as "tasteful" use of vulgarity but Carlin did a lot better job than this does at using vulgarity to emphasize parts of his standup. This website just uses it as the only adjective which completely diminishes its emphasis and weight.

Truly one of the greatest pieces of art on the internet.

I'd written my own variant on this theme (based on the original and the Better Motherfucking Website), which applies some but generally minimal styling (14 CSS rules) to achieve a balance of minimalism, legibility, and functionality:

<https://www.theregister.com/2018/07/12/broadcom_ca_technolog...>

(Let me know if you're having issues reading that, I myself get a message "Referred from Pen Edward Morbius's motherfucking website" viewing under Firefox.)

What most strikes me is that with ever so slightly more advanced browser defaults the Web could be ever so much more readable. What I'd like to see is a standard set of default page layouts ("article", "overview", "lighttable", "catalogue", "discussion", say) along with a few more primitive elements (notes, equations, interactive tables with some basic spreadsheet functionality,[1] and threaded discussions most principally) which could address a huge chunk of what's now highly-styled, and often unreadable, Web designs.

The one thing I find not entirely universally suitable from my design is that the off-white / off-black background/text are not ideal for e-ink devices, though the overall effect remains generally readable.

Gwern's own website (<https://gwern.net/>) strikes me as one of the absolute best highly-styled websites, and absolutely stands out amongst that class.

________________________________

Notes:

1. The ability to sort by specific columns, summarize quantitative columns by total and some univariate statistics (min, max, mean, median, mode, standard deviation), principally. Perhaps the ability to drive a graph based on selected columns as well.

Obligatory v2 http://bettermotherfuckingwebsite.com/

The original looks great on mobile, but for desktops the above improvements are quite sensible as a minimum.

How is it an improvement? It wastes tons of whitespace. The first one is far better.

It doesn't respect the body text size set in the browser. F-word that f-wording site.

I registered the domain modernfuckingwebsite.com a few years ago with the intent of building the evolution of this where you don't forego niceties because someone hates JavaScript.

I haven't built it yet because all the frontend frameworks suck still.

Maybe Astro? I don't know yet. I continue to renew the domain in hopes that something will come along.

Never launching the site because of being stuck in the interminable analysis paralysis of choosing a framework kind of says it all.

Not really analysis paralysis, just nothing that fits the goal of the site yet.

Alpine.js + htmx, livewire, hotwire, etc maybe. But none of the others really fit well.

It is worse. If I disable CSS then it is better. The defaults are not trash, but the desired fonts, colours, etc should be set up by the user so that the author does not need to know what size is appropriate for that user and for that user's computer and display (or if the user wishes to make a print out, etc).

This one completely misses the point? At this point, why doesn't it use a full fledged CSS framework?

Is this URL the most frequently dead'ed submission to HN?

https://news.ycombinator.com/from?site=motherfuckingwebsite....

The 2013 submission survived:

https://news.ycombinator.com/item?id=6791297

I would suspect it is at least partly because of a filter that triggers with the f word. Only if someone vouches for it, it has a chance. Or someone really hates that site. I think it is not deep enough to warrant so much emotion.

Flagged again!

Some people seem to really hate that site ..

I love it. It is everything I have ever wanted to say.

You can probably see that website on Lynx or Dillo and it will look the same.

Probably fine, except for lack of favicon. In old days Chrome added default favicon, now it is an empty place. When there are many tabs (so that only favicons are visible) your motherfuckingwebsite turns into an invisible tab.

> Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.

This is the TLDR message of the site. Generally, the more code you write, the worse web pages get.

See also: Brutalist Web Design. https://brutalist-web.design

Ok I want my motherfucking website to have pictures. Is that ok?

Are you allowed to say motherfucker on the internet?

No It just comes out as stars

How depressing that this was flagged. I would not have guessed that this website was so puritanical.

You're allowed to swear on the internet, you know.

Reply on news.ycombinator.com