DEV Community

Cover image for Using React or Gatsby? Let me show you the error of your ways 😱🍿! Introducing the ultimate motherf***ing website !
InHuOfficial
InHuOfficial

Posted on • Updated on

Using React or Gatsby? Let me show you the error of your ways 😱🍿! Introducing the ultimate motherf***ing website !

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:

https://ultimatemotherfuckingwebsite.com

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.

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!

Discussion (43)

Collapse
posandu profile image
Posandu πŸš€

Can you change the title to appropriate words ?

😭

Collapse
inhuofficial profile image
InHuOfficial Author

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?

Collapse
posandu profile image
Posandu πŸš€

Yes I'm very serious

Thread Thread
inhuofficial profile image
InHuOfficial Author

Ok do you have a suggestion then?

Thread Thread
posandu profile image
Posandu πŸš€

I think replacing the bad word with ***

Thread Thread
posandu profile image
Posandu πŸš€

But I'm very sad that you bought a whole website with that word in the URL !!

😭

Thread Thread
inhuofficial profile image
InHuOfficial Author

Happy to do that in the title, obvious the article won't change though!

Thread Thread
posandu profile image
Posandu πŸš€

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.

Thread Thread
inhuofficial profile image
InHuOfficial Author

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!

Thread Thread
posandu profile image
Posandu πŸš€

That's why I didn't read it

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited on

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 *.)

Thread Thread
posandu profile image
Posandu πŸš€

I am enjoying your articles as much silliness is there : ) So, don't stop writing articles

Thread Thread
inhuofficial profile image
InHuOfficial Author

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?

Thread Thread
posandu profile image
Posandu πŸš€

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.

: )

Thread Thread
posandu profile image
Posandu πŸš€

image

Collapse
jfbrennan profile image
Jordan Brennan • Edited on

FAIL. Doesn't work offline. SW has had full support for like 3 years, you do know Jake Archibald went to all that work just so your piece of crap website can suck offline as much as it does online, don't you??!!!?

1 loc you lazy tools!

self.addEventListener('install', e => e.waitUntil(caches.open('1').then(c => c.addAll(['/']))))
Enter fullscreen mode Exit fullscreen mode

πŸ˜‡

Collapse
peerreynders profile image
peerreynders

In their defense - Safari is ensuring a less than perfect experience with regards to service worker.

Goodbye Offline Page
PR: Remove service worker #12974

Collapse
jfbrennan profile image
Jordan Brennan

?

Thread Thread
peerreynders profile image
peerreynders

People trying to implement service workers "simply" tend to run into problems in the long run - i.e. things aren't always that simple.

Collapse
inhuofficial profile image
InHuOfficial Author

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!

Collapse
jfbrennan profile image
Jordan Brennan

Don't fear the JS - it's the "ultimate" website isn't it?!?!

Thread Thread
inhuofficial profile image
InHuOfficial Author

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!). 🀣

Thread Thread
jfbrennan profile image
Jordan Brennan • Edited on

Haha now you're trying to justify ignoring it! Seriously though, caching a page doesn't have to be thought of as a full-on PWA. 1 line of js to effectively "turn on" offline mode is pretty awesome - even in the spirit of these websites.

The web platform is the best platform! Long live websites!

Thread Thread
inhuofficial profile image
InHuOfficial Author

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!

Collapse
siddharthshyniben profile image
Siddharth

I was going to mention that

Collapse
jayjeckel profile image
Jay Jeckel

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:

Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.

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 reserved and 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

Collapse
inhuofficial profile image
InHuOfficial Author

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!

Collapse
inhuofficial profile image
InHuOfficial Author

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! 🀣

Collapse
ajitsinghkaler profile image
Ajit Singh

Long links and text break on mobile you too are just a mere mortal just like all of us πŸ˜‚πŸ˜†

Collapse
inhuofficial profile image
InHuOfficial Author • Edited on

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!?

Thread Thread
ajitsinghkaler profile image
Ajit Singh

Congrats! You made the perfect site

After all the years responsiveness still gets everyone atleast once (:-p)

Thread Thread
inhuofficial profile image
InHuOfficial Author

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!

Collapse
inhuofficial profile image
InHuOfficial Author

Ah can I ask what phone / at what resolution. I will go do 1000 pull ups as penance and then see about a fix!

Collapse
siddharthshyniben profile image
Siddharth

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.

Collapse
inhuofficial profile image
InHuOfficial Author

There is an inline style tag, that won’t work!

Love to see what you can do so....bring it on! 😜🀣

Collapse
miketalbot profile image
Mike Talbot

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?

Collapse
inhuofficial profile image
InHuOfficial Author

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!

Collapse
miketalbot profile image
Mike Talbot

Easily done. Great article :)

Collapse
inhuofficial profile image
InHuOfficial Author

Crap I completely forgot that. I will swap it out when I get home.

Collapse
quyctd profile image
Quy Dinh Cong

I'm happy because I'm reading this article, keep it up

Collapse
inhuofficial profile image
InHuOfficial Author

If it made you smile then it did it's job! πŸ˜‚ Thanks a lot!

Collapse
tubrogoth profile image
Turbo Goth

Am I the only one who finds these things on obnoxious? Accessibility shaming is lame.

Collapse
inhuofficial profile image
InHuOfficial Author • Edited on

"Lame" might not have been the best choice of words 🀣

Seriously though, happy to have a chat about it, I am not normally militant about accessibility (the format of the "motherfucking" websites lent itself to calling people out as that was the essence of the other sites.)

I will always prod people and point out accessibility errors, I even get "summoned" to do it on DEV as a bit of fun! But if you don't know about how to do something in an accessible way that is fair enough, it is my job to try and show people how to do things properly. However, if you do know and don't bother then that is different.

But is it the calling out you object to (fair enough), or the fact that accessibility is an important skill that most developers do not possess or want to engage with and the fact I "hit back" at that?