Abhijeet Pitumbur

<li>

Is entirely

<a href="https://github.com/resir014/thebestmotherfuckingwebsite.co">open source</a>

</li>

</ul>

<p>

<small>

Okay, listen up here. HTML5 adoption in browsers has reached the tipping point. Unless you 're one of those weirdos still using Windows fucking XP, then every shitty browser there is ― Edge, Safari, even Internet fucking Explorer ― has implemented the

. No fucking excuses.

</small>

</p>

</div>

<span>

</span>

<span>Rucksack Magazine</span>

</a>

</div>

<h2>MODERN JAVASCRIPT WITHOUT THE HEADACHE.</h2>

<p>The JavaScript ecosystem is exploding like uncontained diarrhea, and in the middle of that, the overall page size on the Web also increased. So you might think that websites will load slower than ever, shit will break, and we 're inching one step closer to the heat death of the universe.</p>

<p>

<strong>Wrong, motherfucker</strong>

</p>

<p>

Look at how fast this shit loads. It 's faster than you can even take a shit. This website is rendered with

<a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby.js</a>

, a fawesome static-site generator powered by React which shits out pre-rendered static pages with extra optimization built in.

</p>

<p>

Even better than that, despite all of this newfangled ECMABabelFlowReasonTypeScript magic, you <em>can</em>

still make things less suck. Strap yourselves in, folks.

</p>

</div>

<span>

</span>

<span>Ryan Searle</span>

</a>

</div>

<h2>PERFORMANCE WITHOUT THE UNNECESSARY DIET.</h2>

<p>Think your website is fat? Been thinking to take your website on an unnecessary diet?

Stop the fuck right there. Your motherfucking website looks fine as it is, don 't let anybody fucking tell you otherwise.</p>

<p>

But "page bloat ", you say? Sure, back in ye olde Web 2.0 days, this was a problem. But the thing is, on the modern web, page bloat has become much less of a fucking issue than whether or not we should put in pineapple on a fucking pizza

<sup>

</sup>

</p>

<p>

Especially when newfangled tools and techniques that makes it easier to optimize for that sweet, sweet Lighthouse score, that sweet, sweet first meaningful paint (FMP) time. Here 's the key to all of these black magic:

<strong>progressive enhancement</strong>

</p>

<p>

<small>

Well hey, I don 't care whatever the fuck you do to your pizza, I 'm not your mom. So if it tastes good for you, then... why the hell not?

</small>

</p>

</div>

<p>

Even when you got a shitload of scripts and fonts, you can wrap all the critical ones inside a <code><link rel="preload "></code>

tag. Thanks to

, it will load all of them in parallel. Anything else, like below-the-fold images and scripts for other pages, can be pre-cached or lazyloaded.

</p>

<p>

If your site has got a bunch of CSS shoved into it,

<strong>only load what 's critical for the page</strong>

, and inline them for good measure. If your CSS load blocks the rendering of your page, fuck you.

</p>

<p>

And should you ever get lost, the experts have been there and done that. Google has their own

method, and the Smashing Magazine has their own

<a href="https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/" target="_blank" rel="noopener noreferrer">performance checklist</a>

, both of which are worth checking out.

</p>

</div>

<h2>GOOD DESIGN WITHOUT THE TORTURE.</h2>

<p>I 'm gonna level with you. I 'm suffering from a rare health condition known as "CSS-itis ". It prevents me from doing productive shit with, and even touching a single line of CSS, if I could help it. I never thought I would see the light of day.</p>

<p>

Here 's a solution: CSS-in-JS. I know it sounds counterintuitive, but hear me out. Designing through CSS is already a pain in the ass, especially with globally-scoped classes that will be happy to fuck you over when your CSS gets large. Thank fuck for

<a href="https://github.com/css-modules/css-modules" target="_blank" rel="noopener noreferrer">CSS Modules</a>

, which takes your existing CSS and solves all of the scoping issues through some JS magic. There 's also a lot of other options, like

<a href="https://github.com/styled-components/styled-components" target="_blank" rel="noopener noreferrer">Styled Components</a>

<a href="https://emotion.sh/" target="_blank" rel="noopener noreferrer">Emotion</a>

<a href="https://github.com/paypal/glamorous" target="_blank" rel="noopener noreferrer">glamorous</a>

, etc.

</p>

<p>So here you go, all the goodness of CSS-in-JS, rolled into this very page. Beautiful typography. And alignment. Also, light-coloured backgrounds are for losers. I like it dark. It 's edgy as fuck. Plus, it doesn 't hurt your fucking eyes when you 're looking at this beauty for 16 hours straight.</p>

</div>

<span>

</span>

<span>Alex Holyoake</span>

</a>

</div>

<h1>

AND YES, THIS WHOLE THING IS <em>STILL</em>

SATIRE, YOU DIPSHIT.

</h1>

<p>

I 'm gonna end this motherfucking rant with some positivity. My point is, yes, it 's true that the

<a href="https://www.wired.com/2016/04/average-webpage-now-size-original-doom/" target="_blank" rel="noopener noreferrer">average webpage is now the size of the original DOOM</a>

. Sure, websites are getting more and more bloated. But all of these matter less than what they used to be. In fact, the developers of No Man 's Sky tried to make their procedurally-generated game as small as they can. Look how well that turned out.

</p>

<p>This whole increase in size is natural, but also, recent innovation in web development has made it easier to make your codebase less shit. When one door closes, another one opens wide. What matters is how can you optimize for that sweet, sweet Lighthouse score, that sweet, sweet first meaningful paint (FMP) time. Be it by code splitting, preloading your essentials, lazyloading your shit, or whatever kind of black magic you came up with. I don 't care, it 's your app. I don 't make the rules.</p>

<p>

And sure, the JavaScript platform is exploding like diarrhea, and we 've seen a lot of shitty apps written in JavaScript as of late. But just like many other

<a href="https://secure.php.net/" target="_blank" rel="noopener noreferrer">shitty languages</a>

, <strong>the language itself is hardly an issue</strong>

. Any

<a href="https://en.wikipedia.org/wiki/Lennart_Poettering" target="_blank" rel="noopener noreferrer">bad developer</a>

can take any platform/ecosystem and shit on it. But amongst the dark alleyways filled with piles of shit, there 's still a majority of people trying their hardest to make things better for everyone.

</p>

<p>"Hey you know the best way to write apps? The way that ends up with an app."</p>

<cite>

—

<a href="https://twitter.com/ken_wheeler/status/1022443093679845377" target="_blank" rel="noopener noreferrer">Ken Fucking Wheeler</a>

</cite>

</blockquote>

<p>

Anyways, this website is made by

, and the domain name is generously donated by

. It 's entirely open-source and available on

<a href="https://github.com/resir014/thebestmotherfuckingwebsite.co" target="_blank" rel="noopener noreferrer">GitHub</a>

</p>

</div>

<p>

<small>

Inspired by

<a href="http://motherfuckingwebsite.com/" target="_blank" rel="noopener noreferrer">these</a>

<a href="http://bettermotherfuckingwebsite.com/" target="_blank" rel="noopener noreferrer">motherfucking</a>

<a href="http://evenbettermotherfucking.website/" target="_blank" rel="noopener noreferrer">websites</a>

</small>

</p>

<p>

<small>

Images from

<a href="https://unsplash.com/" target="_blank" rel="noopener noreferrer">Unsplash</a>

. Built with

<a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a>

</small>

</p>

</div>

</footer>

</main>

</div>

if (true) {

(function(i, s, o, g, r, a, m) {

i['GoogleAnalyticsObject'] = r;

i[r] = i[r] || function() {

(i[r].q = i[r].q || []).push(arguments)

}

i[r].l = 1 * new Date();

a = s.createElement(o),

m = s.getElementsByTagName(o)[0];

a.async = 1;

a.src = g;

m.parentNode.insertBefore(a, m)

}

)(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

}

if (typeof ga === "function") {

ga('create', 'UA-11448343-6', 'auto', {});

}

</script>

/*<![CDATA[*/

window.page = {

"componentChunkName": "component---src-pages-index-tsx",

"jsonName": "index",

"path": "/"

};

window.dataPath = "140/path---index-6a9-0SUcWyAf8ecbYDsMhQkEfPzV8";

/*]]>*/

</script>

/*<![CDATA[*/

window.___chunkMapping = {

"app": ["/app-ac1f236cf2dbc62ca34a.js"],

"component---src-pages-404-tsx": ["/component---src-pages-404-tsx-e486d651cb85b6f6563e.js"],

"component---src-pages-index-tsx": ["/component---src-pages-index-tsx-99f6fea4dfa1edd9305a.js"],

"pages-manifest": ["/pages-manifest-4b590688b4790c78c7eb.js"]

};

/*]]>*/

</script>

</body>

</html>

Abhijeet Pitumbur

Report Page