You stop to count how many tools and parsers work on your codebase: TypeScript, esbuild, swc, babel, eslint, prettier, jest, webpack, rollup, terser. You are not sure if you missed any. You are not sure if you want to know. The level of pain is so high you forget about anything else.
We've come a long way, but we're not there yet.
Local storage tends to be the obvious place to persist data locally in a web application. We tend to grab straight for
localStorage, but it's not the only tool in our workbox. Another option is
sessionStorage. Let's review their similarities and differences, and determine when to use which.
I've been using Alpine often lately. Ryan has written a lot of good stuff on Alpine, but his reusable components post is what really got me kickstarted.
You should be careful to not abstract too early. If you are finding it difficult to manage your Alpine component from the
x-data attribute, this one is definitely for you.
The way this article builds up was very helpful: only use the level of abstraction you need:
- No abstractions
- Extract to a component function
- Mix in other data
To execute a piece of code when the viewport is a certain size, the first thing that comes to mind is adding a
resize event listener to the
window object. This is one way, but not always the best. Sometimes the lesser known
window.matchMedia API is a better fit.
Today, my colleague Freek asked for help embedding the webview of an email campaign in an iframe. He needed it in an iframe because embedding the HTML directly caused layout issues because the website's CSS clashed with it.
After setting up the iframe, we needed to find a way to dynamically resize it based on its contents to avoid double scrollbars on the page. While possible, it required some icky scripting.
I took a step back. The problem at hand was that the CSS needed to be scoped somehow. While iframes were the only solution for a long time, these days we have the shadow DOM.
I created the original Spatie guidelines site three years ago. Last month, we consolidated a few of our subsites to our main spatie.be site, including the guidelines.
If it sounds like I have a grudge against React, then I must confess that I really like its componentization model. It makes organizing code easier. I think JSX is great. Server rendering is also cool—even if that’s just how we say “send HTML over the network” these days.
Even with server-side rendering, React and other virtual DOM frameworks add loading time because they need to load more code and hydrate the page before it's interactive.
addEventListener callback performs about 40 times faster (!) than an event handled in a React component. React's overhead worth when you have a lot of complex state, not "simple state" like menu toggles.
Read the full article on CSS-Tricks.
Now that we've built a dropdown list, lets add some transitions to create open & close animations.
Every now and then I do a quick checkup of a project's npm dependencies. I like to keep them up to date by often doing small upgrades. It's a lot less painful than doing large upgrades once a year.
One annoying part of this process is ensuring every dependency is on the latest major version. For example, if a project requires
yarn upgrade won't upgrade it to
lint-staged@^9.0.0 (luckily of course, it's the behaviour I want during everyday development).
Today I learned about
yarn upgrade --latest, which will upgrade all dependencies to the highest available version, despite the version constraints in your
lint-staged@^8.0.0 would happily upgrade to
lint-staged@^9.0.0, even if it breaks semver boundaries.
On to our first component: a dropdown list. I'm going to walk through the implementation I landed on in a recent project. There are many ways to build dropdowns, and you might want to shape the API your way, so use this post as a source of inspiration.
In the previous posts, we've gone through our first few utility functions. We now have enough in our toolbox to move on to our first component. However, where do all these functions belong?
Lets get warmed up! Before we can get productive, we need two small helpers that we'll be using in most components we'll build from here on. I'm talking about
$$, which are wrappers around
In Selecting elements (part 1) we learned how to select elements from the DOM, and how to find elements inside other elements, both with our own
In part 2, we're going to review two DOM element instance methods: