Learn From Remix – CSS-Tricks

I’ve built websites that are used by millions of people all over the world. I have made more mistakes than I bother to count and I have had to deal with the consequences of these mistakes for years thereafter. Through all of this, my team and I have tried to find the best balance between user and developer experience. We have built tailor-made solutions and used libraries / tools all in an attempt to solve problems with our user experience and increase our own productivity. The fight is real.

Then Remix came around and reduced that fight a lot for me. I rebuilt my website with Remix and was blown away. Honestly, I felt I could create a great user experience and not be ashamed of the code it took to get me there. I love Remix so much that I eventually joined the team (i.e .: disclaimer). If you’ve not heard of Remix before, it’s a web framework for building great user experiences that “remixes” the web the way it’s worked since the ’90s with the amazing technology we have today. Here are some of the things I love most about it:

  • Hassle-free client-server code: I mean, there’s definitely a separation between what’s running on the client and what’s running on the server, and it’s clear, but it’s so easy to move between the two in the same file that I feel I can say “yes” to more product features ideas.
  • Progressive improvement: Remix allows me to do that #usePlatform better than anything else I’ve used. That means their use of web APIs the better I get at Remix, the better I get online. And because apps I build with Remix work without JavaScript, I get genuine progressive enhancement for poor network conditions where JavaScript takes a long time to load or does not load at all.
  • CSS – brings back the cascade: Because Remix allows me to easily control which of my CSS files are on the page at any given time, I do not have all the issues that triggered the JavaScript community to invent solutions like CSS-in-JS.
  • Embedded routing: This allows Remix to optimize the data requests it makes when the user navigates around the page (meaning it is faster and cheaper for users who pay for limited internet). It also allows me to handle errors related to the part of the app that fails without taking the whole page down in the process.
  • Simple mutations: Instead of a complicated JavaScript library for managing mutations, Remix just uses the platform <form />. And Remix manages your client cache so you do not have to worry about invalidating your cache at all. In fact, you do not think about this at all with Remix. It is managed for you and you just get a good declarative API.
  • Normalized platforms: We have many options for where we implement our apps. Remix normalizes these (just like jQuery for platforms). So whether you want to implement for serverless, cloudflare workers or a regular node app, it does not matter. Just type the same code and implement where you want.

There is a lot to love about Remix, but I will end it here.

I’m aware that not everyone can migrate their site to Remix, and that’s ok. Tagline for Remix is: Build better websites (sometimes with Remix). The one thing I think I would encourage you to do to make your website better is to learn about and from Remix and apply some of the ideas on your website. And if you able to migrate to Remix, so much the better. 😆

Remember we are all just trying to make the world a little bit better and my hope as I write this is that I have given you ideas on how to make your own corner of the world better. Good luck!


Leave a Reply

Your email address will not be published.