Have 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!
Top comments (40)
Can you change the title to appropriate words ?
😭
I can’t actually tell (for once) if this one needed the
</sarcasm>tag adding.I think I know but just in case you are serious what do you suggest?
Yes I'm very serious
Ok do you have a suggestion then?
I think replacing the bad word with ***
But I'm very sad that you bought a whole website with that word in the URL !!
😭
Happy to do that in the title, obvious the article won't change though!
It's my Idea to replace the bad word. So if you like to replace it - replace. Choice is yours @inhuofficial . I love all the posts that you made instead for this post. So, the next time don't post bad words.
Oh and the website with that in the URL is kind of unavoidable with the whole point on this.
I did put a disclaimer that if you don't like swear words that you shouldn't read the article. Sadly I cannot do much more than that I am afraid!
That's why I didn't read it
I do occasionally use swear words (not as often as in this article), so I will make sure it is prominent within the article introduction for you so you don't read something that might upset you unintentionally.
I won't change my use of swear words, but I hope that doesn't mean you don't stop enjoying my articles. Any of my serious articles do not tend to have any offensive words so you should be OK there.
Thanks for letting me know, as I said I will make sure that within the first two paragraphs of articles (before any swear words) I explain it even more clearly. I have changed the title as best I can, I hope that is better for you (I did have one * in the title in case you missed it, improved it to 3 *.)
I am enjoying your articles as much silliness is there : ) So, don't stop writing articles
Oh don't worry, even if I upset a few people I won't stop writing. I do, however, try to make my articles as inclusive as possible within my personality.
One thing I have learned is you will always offend someone if you want to write anything reasonably exciting, but that doesn't mean I can't protect people from exposure to stuff unintentionally (such as in the title).
Perhaps I will write an article on this as a suggestion for DEV to include a toggle that is "Not Safe For Work" (which is essentially nudity, swearing etc.) so that if articles like this do offend you you do not have to see them in the feed.
That seems better, I can still write what I want to but I can also flag it as "may be offensive" so that you don't have to see it in the first place? What do you think?
It's OK to write posts like this. So if there are any inappropriate content put a notice in top of the post. That's all I need.
: )
The whole series of sites is a thing a beauty and I think your contribution definitely marks you the new reigning champion!
I must praise your thematic use of WTFPL license, gave me a good chuckle. However, at the same time, I have to curse you for perpetuating the existence of that license-imitating pile of excrement.
To quote the WTFPL:
Emphasis mine to highlight the problem with the WTFPL -- it's permissions only apply to the license itself, not to the external content that it is supposedly the license of. The WTFPL is funny as a joke, but like most jokes the humor vanishes as soon as someone takes it seriously, especially when it doesn't do the one thing people think it does, ie give people permission to do WTF ever they want with the related content.
Everyone that creates content on the internet should care about licenses, but if you really don't want to mess with it, then simply don't mess with it. Leave your content unlicensed
all rights reservedand let fair use cover whatever legitimate need people have to copy and share the info.If you don't want to think about licensing and just want to give your content to the world, as it were, then slap a simple public domain equivalent CC0 license on it. This is the same as the USA practice of dedicating something to the public domain, except it also attempts to extend the practice to areas of the world that don't recognize the public domain.
Either of those or any other real license is preferable to the nonsense that is the WTFPL. Again, no knock on your use of it as a joke, just wanted to rant a bit in case a new person out there might have been tempted to treat it as a real license. /rant
To be brutally honest, although I knew it was a joke license I did not know that it would actually be problematic in the real world (first time using it after seeing it a few times and it making me chuckle!)
Super interesting, I should perhaps add a line at the bottom with a proper license! Thanks for the top tip, it highlights that my licensing knowledge is lacking!
If you are looking for then the only one license that doesn’t have issues is 0BSD:
Just use the one the same license to avoid fragmentation and confusing.
It is a tough one (being serious) as I would love to make it a PWA but I just think if I did that I have missed the original point of the first site which is "shit don't have to be fucking complicated, do things properly and stop adding stuff you don't need".
I think it is too far to make it a PWA within the spirit of the posts...but maybe a new challenger will emerge (hint!). 🤣
I'd just point out that the image associated with this post which uses strong language appears in the feed list when your post makes it to the top. Perhaps blur out the profanity in the image?
Thanks for the heads up Mike, I have blanked the swearing out in the article cover. No idea how I didn't put two and two together on that with the home / other feeds.
Apologies to everyone, that was a massive oversight!
Easily done. Great article :)
Crap I completely forgot that. I will swap it out when I get home.
Oh, I could definitely beat you.
As for the CSP stuff, it's not required as your site is basically static, but you could use
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">or something similar.There is an inline style tag, that won’t work!
Love to see what you can do so....bring it on! 😜🤣
In their defense - Safari is ensuring a less than perfect experience with regards to service worker.
Goodbye Offline Page
PR: Remove service worker #12974
As I said, but I will say it again, if you do spot an error in the website then please do let me know, I don't want to be preaching about how wonderful the site is if I have f*cked it up somewhere.
Now please do excuse me, I need to go wash my mouth out with soap and water after all that swearing! 🤣
Long links and text break on mobile you too are just a mere mortal just like all of us 😂😆
Think I have fixed that, I had pumped the default font size up to 1.25rem (20px), which is excessive on a phone, taken it back to 1.2rem (19.2px) and adjusted the h1 size, should hopefully now be fine, could you let me know!?
Congrats! You made the perfect site
After all the years responsiveness still gets everyone atleast once (:-p)
haha, so true on responsiveness. I am sure there are other blunders I have made on the site too! At least you caught that one for me nice and early! Thanks!
Ah can I ask what phone / at what resolution. I will go do 1000 pull ups as penance and then see about a fix!
Hehe I think I will add a JS version just for you!
If I do I will do it properly so it has an “add to home page” button. Already done most of the icon and manifest requirements for that anyway so might as well!
I am aware it is not a PWA 😥, but I think at that point I have taken it too far from the original as JS has to be involved.
In fairness though the only time that would matter would be in completely zero signal area, it is that tiny it will work on H+ / EDGE connections!
I would also add a dark theme switcher if we could use JS (as the CSS only ones require you to put the checkbox outside of the sectional HTML and therefore aren't valid HTML anymore 😥) as it isn't ideal that you can't change the theme yourself.
I could add a sub-page with the PWA goodness and a few other things that JS would afford maybe? "ultimatemotherfuckingwebsiteforpeoplewhoarentscaredofjavascript.com" is also available 😉🤣
I was trying to stay within the original idea though so I am not sure where I draw the line!
I was going to mention that