Writing about frontend things late at night in my chair by the pool.
The Astro docs provide an example for passing server data to the client. That’s not quite as robust as what I wanted for my requirements, so here’s a slightly different approach: <!-- `account` is a variable defined in "front matter", i.e. Astro serv...
The biggest tech companies with the biggest websites are using Web Components and yet very few frontend engineers know how to build them and even fewer know when. I think it's because developers aren't sure where Web Components can fit in the crowded...
I don't know about you, but I spend most of my time dreaming about the new Temporal API. It's going to make working with dates so much better in so many ways. But for now we have Date and Intl and together they actually offer a lot of date and time f...
Problem http://localhost:3000 can’t call your remote API because of browser-enforced limitations involving CORS, cookie sharing, and HTTPS. Solution Set up local.yourdomain.com on your dev machine so your browser will successfully call your remote se...
Shadow DOM is often thought of as the one and only way to create scoped styles for a Web Component. It's not. Prefixed Tags Scope Styles Web Components, i.e. Custom Elements, require a prefixed tag. For example, a "foo" Custom Element would be define...
There is a class of JavaScript modules that should be recognized separately from the rest of the frontend ecosystem. They could be called “happy modules” because everything about them brings developer happiness. The criteria for a module to qualify a...
The CSS :has pseudo-class enables squeaky clean markup for group components, like a button group. Mdash recently shipped its button group using :has and the OCD within me ranks the markup 5 out of 5: <button ord="secondary" aria-...
In the past, using shadow DOM meant compromising good CSS maintenance. This is no longer true. First, a quick introduction to shadow DOM, then we'll learn the eight ways you can style it. Brief Shadow DOM Intro HTML becomes DOM. See this W3Schools in...
Sometimes you need to call a function a given number of times. There is no purpose-built function to do exactly this, but it can easily be done with Array: // Log "hi" five times Array.from({length: 5}, () => console.log('hi')); // Get two random d...
Did you know the Cache API is available outside of Service Worker? It is and that means your app doesn't need to be a PWA to benefit from this feature. Let's look at a quick intro of the API then some examples for inspiration. Cache API Intro The Cac...
This isn't clickbait. And I'm not going to ask you to pay for a React course. The truth is very few software engineers can actually reach this level of proficiency in React, so the process you're about to learn is, until today, treasured knowledge he...
Doing a programmatic route change using Vue Router is very straight forward: this.$router.push({name: 'home'}) // Triggers the 'home' route However, I couldn't find the "correct" way to pass arbitrary data to this route. My use case just didn't make...
Navigating through CORS and other web development tasks is tough when you don't have this terminology locked down, so I've summarized what's what. This URL will be used as our reference https://developer.apple.com/documentation/accelerate?language=ob...
CORS always seems to require more work than I remember, so I made this checklist. Hope it helps! Satisfying CORS requires browser-side and server-side config. First, browser-side requirements The following is required by the browser (not all clients ...
Websites, especially SaaS products, often integrate with tools like Glassbox, Adobe Analytics, and Cypress. These tools work by querying or binding elements in the DOM and capturing their changes. They are most often configured to use classes and/or ...
Couldn't find a modern vanilla example of how to update the current URL's query params non-destructively, so I wrote this for future reference: // Get current URL const url = new URL(window.location.href); // Update or remove a param colors.length ...
Does adding new features bother you when existing features have bugs? Me too. Managing software projects used to feel like I was a car salesman throwing in an unnecessary set of winter tires while neglecting a burned out headlight. It's not dishonest...
There's a common set of use cases that no designer I've worked with proactively designs for, but are nonetheless needed. I call them zero-1-2-1000-error. Most designers solve for 1, sometimes 2, then hand it off for development. These fundamental cas...
When building apps, I make a practical distinction between what I call UI Elements and Product Components, but what is meant by the word component or element? Even when the context narrows to UI "stuff", what exactly are we referring to? There doesn'...
The smaller the file, the faster the download. The faster the download, the sooner the browser can evaluate. The sooner evaluation finishes, the better the user experience. The following five techniques will help make your stylesheets smaller. The fi...