Embracing the Platform

We find ourselves in an era of frameworks, reusable components from gorgeous libraries, and NPM packages for every little obstacle — and I'm struggling to see the benefits of it all.

Recently I stumbled upon on this talk by Adrian Roselli (Youtube) where he, to summarize, spends forty minutes telling us developers to embrace the web platform. HTML has a lot to offer in itself, without placing a gigaton of JS-frameworks on top of it.

This got me thinking. I've always been afraid of Javascript. It's messy, it's prone to fail (at least if I write it) and it's not as forgiving as HTML and CSS. I wish I understood it more, but for someone like me who loves the simplicity of a semantic HTML document and the joy of a great, maintainable CSS class, it's nice to see that the smartest people out there are embracing the nativity of the web platform, and advocating against adding unnecessary complexity.

Heydon's the best

Last year, Heydon Pickering, an advocate for accessibility (among other things), held the perfect talk/rant about CSS scoping (Youtube). The main point of his talk was that JS frameworks brags about their ability to scope CSS so that the styling for one component doesn't interfere with the styles of another component. All these frameworks are trying to "fix" CSS, but it's actually good enough on its own.

I attended that conference (CSSDay) and the general vibe from the speakers and audience members was that we need to go back, back to thinking about how the browsers consume our code and how they present the results.

Accessibility advocates are screaming for us developers and designers to simplify things. Write code in a way so that screen readers and assistive technology can consume it. Write semantic HTML and don't mess it up through complex styling or fancy effects.

I agree. We have to go back.

I think we overcomplicate things. Frameworks like NextJS, React or Svelte, tools like Tailwind or Styled Components, component libraries like MUI or DaisyUI, are all created to speed up our workflows, but I'm starting to get a feeling that they're trying to crack a nut with a sledgehammer.

Aren't most websites (and I'm talking about websites, not complex SaaS apps) just a bunch of documents on a server, presented to the users with the click of a button, or a tap of a thumb?

That’s why I love tools like Fractal, Pattern Lab or Eleventy. They use simple templating languages that empowers HTML — not trying to reinvent it. You write your HTML, CSS and add some interactivity with simple Javascript. No JSX, Typescript, state managements or CSS-in-JS…

A modern horror story

At work, I was recently assigned to fix a padding issue on a simple website, and the project was littered with dependencies. It was using NextJS with some combination of custom components and MUI components smashed together. It used Styled Components to add styling to components, while it also contained a folder full of SCSS-files for the styles that didn't fit anywhere within the Style Components. Not to mention some inline styles here and there written directly written in the JSX-files.

I mean, there has to be a better way. Sheesh...

Embrace the web platform.