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: <div role="group"> <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...
