keenrivals/bestmotherfucking.website

The Best Motherfucking Website

bestmotherfucking.website's Issues

line-height is better unitless

Unitful line-height (which includes percentages; isn't it nice when CSS makes sense?) has tricky behaviour with cascading, and is best avoided since unitless line-height Just Works. MDN has an example. This doesn't actually matter directly to such an awesome motherfucking website, which is too awesome to have complicated nesting and style interactions, but, in so far as it's the best motherfucking website on the goddamn interwebs, it'd be better if it was a showroom for relevant best practices.

Not working as it should

There's no fuck-yo-mother feature

The word "Design" needs to be in scare-quotes, or replaced with the word "aesthetics".

See title. When you use the word "design", it gives an impression that design is only about how the website looks. This is not the case, or at least it shouldn't be - so we should be making that clear by either denoting deliberate misuse via scare-quotes, or changing the word used to one that does mean no more than "what the website looks like on the design computer".

Yes, this is about as satirical as the website itself.

Its not motherfucking website for print

if i want print this site on A2 page format (because I can) i must use 2 sheet of paper
but if i add print css for disable max-width

@media print{body{max-width:none}} (only 34 chars!)

its only fucking 1 sheet

To many redirects when trying to get favicon.ico [chrome]

I can't see it well on my f*cking device!!!

When you pop open this hell of a page on Safari with dark mode on, the damn link colors are like a camouflaged ninja against the black backdrop. Eyes-strainingly unreadable, man.
Seriously, what the f*ck? A website ain't a damn Rorschach test. It's a communication tool, and guess what? The basic purpose of text on a site is to be visually consumed, not to give you a migraine. So don't screw it up with bad contrast.

Remove optional tags

I have no idea if this is a good idea.

But Google seems to think it is: https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Optional_Tags

What do you think?

HTTP/3

It’s also required for HTTP/2 support which allows browsers to fetch resources more efficiently.

Maybe mention, that it's (kind of) 'last gen'?

Don't fucking reinvent HTML elements in JS

#65 (comment)

https://drewdevault.com/2021/06/27/You-cant-capture-the-nuance.html (+ https://drewdevault.com/2021/10/17/Reliability.html)

kinda related dead-stale thing from me: https://github.com/jtagcat/middle-click-offenders

Note about feeds?

I like web feeds: RSS, Atom, json, XML. I wish all sites had them natively. I wish often there was no limit (20 latest, I understand that you don't want me downloading all articles) so I could pull all articles to my reader.

E

E

WoSign is terrible

Don't recommend them

Wiki on actual things you can do/read?

Caching. I have minimal idea on how it works.

Is a CSS file for only the things needed on each page or a common CSS file better? Does the CSS file get downloaded every time?

The "revised font stack" link is broken

http://www.awayback.com/revised-font-stack/

Here's a random but functioning archive.org link to it:

https://web.archive.org/web/20150303130927/http://www.awayback.com/revised-font-stack

Use www

https://www.yes-www.org/why-use-www/

Meme headers

bestmotherfucking.website should recommend and use some meme headers:

• Content-Security-Policy can ensure that your webpage only contains approved content, and doesn't have any webshit. Relevant to the HTTPS section is the upgrade-insecure-requests directive, or block-all-mixed-content.
• referrer-policy protects users' privacy when they click your links
• cache-control is already covered
• strict-transport-security as part of "You have no excuse for using HTTP".

There are others I'd recommend (x-content-type-options, cross-origin headers, and maybe permission-policy), but this isn't meant to be some comprehensive guide. Maybe link to another page that explains headers in more detail for those more inclined to learn more.

Fix dark mode link colors

The link colors in dark mode are the defaults from the browser, and not very good. This is my reminder to fix them. There's discussion on this in #54

HTTP/2 does not require HTTPS

Contrary to what the website mentions, only web browsers de facto require HTTPS in their HTTP/2 implementations, but HTTP/2 itself is unencrypted by default.

On the other hand, HTTP/3 does require encryption as TLS 1.3 was baked into the protocol itself.

Small Typo in "HTTPS" Section

There is a small typo in the following sentence:

HTTPS improves your search ranking so people are more likely find your ramblings on the Google.

should be:

HTTPS improves your search ranking so people are more likely to find your ramblings on the Google.

Stop using Apache

Seriously. It sucks.

Nginx is wildly faster and can handle literally dozens more connections (ESPECIALLY for pure static HTML), while also being way easier to configure.

https://help.dreamhost.com/hc/en-us/articles/215945987-Web-server-performance-comparison

Site unreachable: missing DNS records

The site's A/AAAA/CAA DNS records seem missing, so the host cannot be resolved. This website is currently unreachable.

Too much contrast

Even the 'contrast rebellion' you linked to uses #1b1b1b text color on their off-white #f0efd1 background. Yes contrast is important, but to much of it is just painful.

Link titles // archive your hreffed

From #65 1.

I say: What if the link rots? Context is gone.

Important side note: Encourage archiving all links you link to. archive.org, archive.today (archive.ph is the main domain atm)

Linking to doesmysiteneedhttps.com?

https://doesmysiteneedhttps.com probably has the same target audience.

Find a way to somehow magically link it?

Change background colors.

Currently the website is hard to read due to the choice of background color. #111 or #222 would be a better choice for it to not hurt by eyes.

Meta notification of yet an another website.

https://news.ycombinator.com/item?id=26740593 (I would say I agree with the top comment.)

https://perfectmotherfuckingwebsite.com

Additionally, I'd say contributing is better than forking… It's not better, if it doesn't include the previous points anyway.

Dark mode

I prefer light theme myself, but I guess it would be nice.

This could be automatically done by: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme (and prehaps add ◐ and ◑ as a manual override).

..or the dark mode fans probably use an add-on anyways. Feel free to just close this issue.

FF Reader mode tip

So I'm not sure on the language, but:

Ever fucking noticed in Firefox's URL bar?

This is the button for reader view. Click it, it fucks websites to be better.

(Ironically this website doesn't support it, because it's already good enough.) (no idea why)

Discussion: #000000 bgcolor

What about keeping background color black & color white? Does it break the simplicity?

I bought all of 19 inches of screen, why are you wasting two thirds of it?

Yes, I am protesting max-width here. It sucks.

I have a solution. It's here: optionalmargins.html. Click the big-ass margin. I know, it's genius.

I hope we can put the max-width debate to rest. My personal opinion is that users can resize their browser window if they want to, but I'm willing to compromise with the above solution.
In case this cannot be resolved peacefully, have my adblocker ready to filter all of them stinky max-width rules.

<section> does nothing, but not enough nothing

Right now, bestmotherfucking.website has a mixture of <section> and numbered heading elements for hierarchy. It could be using <section> elements within <section>, which is the utopian HTML5 dream. If <section> was really adding value, this would be preferable. But, browsers basically ignore <section> and HTML5 outlining: apparently there are silly interactions with screenreaders which mean that they're probably never actually going to be used by browsers; there are probably other web-compat issues freezing this non-behaviour in place now too.

Since proper use of numbered heading elements will unambiguously structure the document and hence don't lose any semantic value, even if it's error-prone and obviously clunky, I would suggest giving up the pretence that HTML5 outlines are coming and removing the no-op and not-everywhere-they-could-be <section> tags.

Your meme website is broken

Just letting you know that cloudflare throws Error 526: Invalid SSL certificate when navigating to your website.

Prevent overscroll by adding overflow-wrap

How about adding overflow-wrap: break-word; or overflow-wrap: anywhere; to the body selector. It would prevent overscroll by breaking long words and URLs—particularly on small screens.

Provide templates for the lazy asses.

Templates for the lazy asses.
Seriously, how hard is to make your website _a_ good motherfucking website? Don't delay, use these templates today:
 - Hugo
 - Jekyll
 - WP
 - 11ty
 - whatever you can think off

Getting people over the fence with 'So I have to redo my entire website? How do I apply this?' with click, click, click. As with everything, making it convenient gets people to actually incorporate/use the 'design' (piracy, security, privacy are quite examples).

Server Side Brotli Compression

Cloudflare's brotli compression isn't the maximum brotli compression level. Compressing the website server side at max Brotli level can reduce the transfer size by ~20%. (~3.3kb to ~2.6kb)

Proof of concept: https://joshuawest.ca/bestwebsite/index.html

"Why the fuck are you loading 600 extra bytes?"
:p
(Love the initiative and style of the site!)