"This website is even better than the last guy and the guy before him."

One of the reasons cited was Accessibility.

According to support.google.com,
"Alt text (text that describes an image) improves accessibility for people who can't see images on web pages, including users who use screen readers or have low-bandwidth connections."

"When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam."

Alt text is important, especially for accessibility. Here is a link to a video showing how critical alt text is for blind and visually-disabled visitors: https://www.youtube.com/watch?v=dEbl5jvLKGQ

Offending code's nearest containing div:
<div class="picture-left"><img src="static/e84d13374f0772372eaa86614800bd58.jpg" title="A nice and cute cat"><p class="caption">A cat, just to keep the context of the website.</p></div>

Mobile viewing is hampered by the justified text layout.

Personal Identification Number number is just wrong ;)

Using defer and async do not properly lazy load your CSS and JS as it's still technically render blocking.

Solution (ES6):

Add the following to just before the closing </body> tag

<script>
	for (const css of [
	  "css/main.css",
	]) {
	  const link = document.body.appendChild(document.createElement("link"));
	  link.rel = 'stylesheet';
	  link.href = css;
	}

	for (const js of [
	  "//piwik.vps.denv.it/piwik.js",
	  "js/jquery-2.2.4.min.js",
	  "js/main.fucking.js",
	]) {
	  const script = document.body.appendChild(document.createElement("script"));
	  script.async = false;
	  script.src = js;
	}
</script>

Recently most major browsers removed the green color from browsers addressbars
https://github.com/denysvitali/thebestmotherfuckingwebsite/blob/master/src/pug/index.pug#L45

So this text might need some rework.

Exactly what it says in the title.

Here's an image, just because GH allows it:

And yes, I'll consider it hilarious if you reuse it to credit me pointing it out (the image above comes in handy as a historical record of it - for reference, and to complete the joke).

Shit is even more legible than the fucking two previous versions
"Open Sans" which btw weighs 15.21kB
Links don't really need to keep that shitty blue
We don't need to break our eyes while looking at a motherfuckingwebsite
not everybody wants to read a fucking 2 inches letter

D-do you complain that your browser can't display text properly? (my can)

What should be done with such browser?

he will notice and maybe he will switch from the crap he uses to a much cooler browser

As you asked me to on the Reddit thread. (I'm /u/UniversallyUniqueID)

The default contrast option looks very washed out, especially if you compare it to better-mf-website and original-mf-website.

The colored text looks decent at default, though, and the red actually looks "burnt" at more contrast.

Thus, I'd like the default contrast to be as per "Add more contast", but the colored text to be kept as at default contrast.

Just run this https://realfavicongenerator.net/favicon_checker

Use this https://realfavicongenerator.net/ to generate favicons (go through settings).

I want to have this website on my phone's home screen with its official icon, I visit this website every morning when I wake up for inspiration. Unacceptable, motherfucker.

To make thebestmotherfucking website complete, you might need to sign your domain with a valid signature and enable HTTPS

Here is a complete report that gives a grade of 70% according to Internet.nl

https://internet.nl/site/thebestmotherfucking.website/2597463/#

As is even described on the Wikipedia page that the IPoAC links to, it's important to note that bandwidth is NOT a problem for this standard. In fact, it's trivial for an implementation of IPoAC to have bandwidth exceeding basically any home internet solution, with possibly hundreds of Gb/s. In fact, if we update the example from said Wikipedia article to use modern 1TB microSD cards (like SanDisk Extreme Pro 1TB) we will be close to 300Gb/s - and that's without even attempting to increase the number of SD cards, since microSDs are much smaller than standard SD cards and I'm fairly sure a homing pigeon would be able to carry more than 8.

Therefore as long as the loading of all resources is initiated at the same time, the IPoAC can easily provide the same delay for 50kB website and 500MB website.

I believe we should stop misleading people about the capabilities of IPoAC and acknowledge the superiority of this standard - and therefore, the suggestion that IPoAC users would have any problems with loading websites that load massive images or scripts should be removed or corrected to mention these facts.

Additionally, I'd suggest adding a paragraph about not using lazy loading, as that lazy method of "increasing website load times" actually hurts all IPoAC users in the world by massively increasing their delays and possibly causing them to wait hours longer for a simple website to load its images.

This is a pretty good website, but there are some things I can think of to improve it:

• Enable http/2
• Set a cache-control header
• Enable CORS (fairly debatable)
• Strip the 'server' header, which is a pointless advertisement
• Switch to Piwik for stats or just parse your log file (I'm willing to wager that many people that visit this website are using uBlock Origin or some other addon that blocks analytic scripts anyway)

I don't think you can remove 'server' without compiling nginx yourself, but the 'Caddy' web server can & will make your life easier anyway: https://caddyserver.com/

Hi! I love your motherfucking website and I noticed a little room for improvement:

You can set the dark mode automatically for macOS users who have enabled dark mode on their machines with prefers-color-scheme: dark media query as you can see in this blogpost

I could work on it if you decide to implement this feature and don't have time to do it by yourself.

You can save a whoooole kilobyte with the Brotli compression algorithm. It's supported on several browsers.

$ curl -s https://thebestmotherfucking.website > index.html
$ gzip -k -9 index.html
$ brotli index.html
$ ls -lh index.html index.html.gz index.html.br
-rw-r--r-- 1 nnn nnn  14K Nov  5 00:36 index.html
-rw-r--r-- 1 nnn nnn 4.2K Nov  5 00:36 index.html.br
-rw-r--r-- 1 nnn nnn 5.2K Nov  5 00:36 index.html.gz

To do it with Nginx, first install the Brotli extension (on Arch Linux for example, via pacman -S nginx-mod-brotli then adding this to your nginx.conf:

# Outside of any of the blocks. The paths may vary for your system.
# This one is used for on-the-fly compression (see "brotli on").
load_module /usr/lib/nginx/modules/ngx_http_brotli_filter_module.so;
# This one is used if you precompress your files (see "brotli_static on").
load_module /usr/lib/nginx/modules/ngx_http_brotli_static_module.so;

# Within your server block when using on-the-fly compression.
brotli on;
brotli_comp_level 11; # if you want the best compression

In the "Legal" section, there's a joke about reading disabilities and reading slowly. There are actually people who read slowly due to things like dyslexia. Incidently, some of those people might find it straining to read the string of single word sentences later in the joke, adding insult to injury. There are other possible jokes that can be made about how short the license is.

As pointed out by SanityInAnarchy in this comment, the current license (WTFPL) may have some legal problems and may not be considered valid in certains scenarios.

For these reasons, I'm going to switch back to the MIT license, unless someone has an argument against this decision.

I'll keep this issue open, in order to discuss with you guys on what do you think about this choice.

Cat image and caption should be contained in a <figure> element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

<figure><img src="img/cat.jpg" title="A nice and cute cat"><figcaption>A cat, just to keep the context of the website.</figcaption></figure>

Using Chrome Version 84.0.4147.105

These should probably be buttons, not divs

If i wanted links to look different, i would set up global CSS. Also, js is an abomination that should be used as a last resort.

The website fails the WCAG conformance level AAA. The anchor tags require a higher contrast even on the high-contrast mode.

Suggestion: #03F instead of #0051c9.

Website is Accessible. But not that much ;)

As per today's mail:

I just saw your motherfucking website which is really a nice way to show
how a website design can be very clean and simple.

I saw that you tried to reach perfection on the protocol side (HTTPS,
HTTP/2, Let's encrypt certificate...), but apparently there is room for
improvement

here is a few pointers:

https://internet.nl/domain/thebestmotherfucking.website/114718/ (49%)

in terms of certificate, the grade is quite good (although not perfect)
https://www.ssllabs.com/ssltest/analyze.html?d=thebestmotherfucking.website&hideResults=on (B)
https://tls.imirhil.fr/https/thebestmotherfucking.website (69/100)

I need to improve my SSL configuration, I'll adopt this which had a good rating in the overall (A+ IIRC)

Inverted mode doesn't work motherfucker.

Well, it's pretty self-explanatory.

If you click the inverted mode, the 'add more contrast' button's font stays black thus you don't see it anymore, yet it is still there.

Pretty motherfuckingly bad for this otherwise awesome website.

Currently it gets a "F" grade: scan results

Justifying text on the web is bad practice. Why? Here is a nice summary:
https://designforhackers.com/blog/justify-text-html-css/

Center align is also not recommended by W3C for WCAG 2.0:

Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create "rivers of white" running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create a text layout that is fully justified. https://www.w3.org/TR/WCAG20-TECHS/G169.html

Look at any major publication:
https://www.theguardian.com/international
https://www.bbc.com/news
https://www.washingtonpost.com
...basically, any sensibly designed website dealing with textual content.

Thank you.

#33

Reading this really made me want to open an issueonGithub.

Google Chrome provides an audit function, which runs a series of tests with recommendations
some are probably inefficient, while others are quite useful and easy to implement

on Google Chrome 65 (with new audit tests), here are the following results:

• Performance 91
• Progressive Web App 55
• Accessibility 82
• Best Practices 88
• SEO 78

I read about the "Cache Control" header in the website.

It includes a Cache-Control header, so you don't waste your precious bandwidth if you visit the website more than once

I got curious and checked the headers out with curl to see what they looked like, and found that there doesn't seem to be a cache control header anywhere. Here are the headers for https://thebestmotherfucking.website and https://pages.github.com for comparison.

% curl -I https://thebestmotherfucking.website
HTTP/2 200
server: nginx/1.15.1
date: Wed, 11 Jul 2018 01:31:35 GMT
content-type: text/html
content-length: 12499
last-modified: Wed, 27 Dec 2017 12:28:01 GMT
etag: "5a4391d1-30d3"
accept-ranges: bytes

% curl -I https://pages.github.com
HTTP/2 200
server: GitHub.com
content-type: text/html; charset=utf-8
last-modified: Mon, 02 Jul 2018 18:07:44 GMT
access-control-allow-origin: *
expires: Wed, 11 Jul 2018 00:26:18 GMT
cache-control: max-age=600
x-github-request-id: *REDACTED*
accept-ranges: bytes
date: Wed, 11 Jul 2018 01:31:38 GMT
via: 1.1 varnish
age: 0
x-served-by: cache-ewr18124-EWR
x-cache: MISS
x-cache-hits: 0
x-timer: S1531272698.232084,VS0,VE9
vary: Accept-Encoding
x-fastly-request-id: *REDACTED*
content-length: 14723

I also checked for a <meta http-equiv="Cache-Control" content="..."> tag and didn't find one.

Fixing this is probably a matter of revisiting the nginx configuration. Also see #5.

(P.S. I would recommend something like public, max-age=600, which is appropriate for a static website.)

Not all website users/or developers identify as “he” - the best motherfucking website should be a little more inclusive, and cater to a wider audience.

Recommend updating the text in the page with "they" - third person singular pronouns.

The best mother fucking website should be focused on privacy too by not making third-party requests like Google Fonts ;)

Hello @denysvitali
Thebestmotherfuckingwebsite shouldn't use a version of jQuery that doesn't receive patches anymore.

I suggest to update to the last one (v3.3.1 at time of writing), and then brag about it. Something like:

/* NO, really, NOBODY NEEDS TO INCLUDE A FUCKING FRAMEWORK TO MAKE A COOL WEBSITE. */
console.log('Don\'t worry, no jQuery was used in this website.');
console.log('But if it was, it would have been the last supported version. Security and maintenance are important!');
var $ = function(){this.fancyRainbow = function(){return this;};this.html = function(){return this;};return this;};

You know, being a good role model for developers 👍
If you like, I can make a PR by the end of the day.

While I agree that the default blue and violet look kinda horrible, the visibly visited links concept is still a good and useful idea.

As a suggestion, consider Maroon from this website: http://clrs.cc/ (#85144b)

Is thebestmotherfuckingwebsite webscale?

~minify main.fucking.js
~gzip assets

cheers!

Hard to read without my glasses on. Please consider 333 or darker for text.

#8

Seriously

It's not like the website is huge

it's not suitable for "thebestmotherfuckingwebsite"

1. Click "add more contrast".
2. Click "inverted mode".

Result: Black text on black background.