GrahamTheDevHave you ever wondered what the ultimate website looked like? Well I am afraid you are going to have to put up with a few swears if you want to find out! If foul language offends you, now would be a good time to press the back button!
Oh and as always, the anger and the swearing etc. is all in good fun and I do not mean any of it, you will soon see why it is appropriate!
OK have all the easily offended peeps gone? Good, let's do this fuckers!
People have been trying to create the perfect website for several years.
First there was motherfuckingwebsite.com, which taught people how the web was meant to work!
Then some people tried to improve it with bettermotherfuckingwebsite.com and perfectmotherfuckingwebsite.com.
The problem is, they all failed.
Once again, it is time to be a hero and fix everyone's crappy HTML.
ultimatemotherfuckingwebsite.com
Yup, I bought ultimatemotherfuckingwebsite.com and set to work fixing all of their shoddy work.
I won't repeat myself as I explain everything there, instead I will just let you check it out yourself:
Go on, go learn what a real website looks like, especially if you are using Gatsby or React to try and build a static site! (eeek, angry comments are coming!)
And yes I added the JavaScript tag just for you people who think Gatsby is fast or React is a good idea for a static site...yes I know I am baiting you, go on, leave a comment and let's have a discussion!
Is there a point?
Yes, the site is performant, accessible, uses security headers and follows best practices.
I mean, the whole page is 5.3kb when compressed and gzipped so it is bound to be fast! Some people can't even change the colour of a button in that amount of code!
The fact that the joke is that it is minimal is irrelevant, we could easily add a few images (and remember our alt attributes), add a menu, some more colour and make it into a proper website.
What it illustrates is proper use of HTML (so go check out the source), accessibility best practices and more.
Use at as a tool to learn, ask me questions. It may look simple but if you start poking around you will start seeing things like nonce- and aria-labelledby. Surely somebody will not know what they are all about?
Tools to test against.
- W3C Markup validation service (valid HTML)
- w3C CSS Validation service (valid CSS)
- Mozilla Observatory (security headers)
- web.dev/measure (performance, best practices, accessibility)
The site gets flying colours (although an annoying "issue with CSP" without any guidance is coming up so I don't get 100 on best practices on web.dev/measure - if someone can spot that could you let me know as it stops me scoring 100 (or above) on everything!).
Use these tools to learn how the web is meant to work, test your own site and fix errors that come up, then build awesome stuff on top of a firm grounding once you have learned how to build things the right way! And yes, I know I was taking a swipe at React and Gatsby but with a bit of work you can still have a high performance and highly accessible website, I am only poking fun!
Use it in times of need
Next time you see a bloated 12 MB, JavaScript rendered disaster of a site, just send them to https://ultimatemotherfuckingwebsite.com.
Or if someone has made a completely inaccessible website...send them there also!
Or if they have no idea what security headers are...you could probably send them somewhere else that explains it better, but they can still inspect the site to learn something!
Use it to slowly teach people that there are some basic things they need to learn, especially if they want the site to rank well in Google!
Above all, have fun with it, it is a fun learning tool!
What do you think?
So, did I win?
Did I build the ultimate motherfucking website (within the rules of the silly game!).
Can anyone actually beat me?
I will leave it to you to decide!
Oh, and if you like the silliness follow me on twitter, I need some followers 😥
Have a great week!
