Happy Friday!
Here’s a few ASCII “font” headers when you really need to make sure people know things when looking at your code or README document.
As of March 12th 2023, Interaction to Next Paint (INP) replaces First Input Delay (FID) as a Core Web Vital metric. FID and INP are measuring the same situation in the browser: how clunky does it feel when a user interacts with an element on the page? The good news for the web—and its users—is […]
I was pairing with my co-worker last week. They had a super different debugging style than I do. I’m aware that I can do fancy things in DevTools, like set breakpoints and whatnot right from within DevTools and use well-placed debugger; statements to halt JavaScript execution and inspect things at that point. But I hardly […]
Front-end developers spend a significant amount of time working inside the browser’s DevTools. Likely just as much as they spend time writing code in the code editor. However, most developers barely scratch the surface of what DevTools can accomplish. I have been curating a collection of DevTools tips across major browsers. The following are some […]
Like anyone, I love a good “native-feeling” experience on the web. I’ve really enjoyed creating that vibe with the new View Transitions API. Luckily it’s is pretty clean to work with, both with the Astro framework, and out of the box! View Transition Options Transitioning UI between states has been something that developers have been […]
The World Wide Web Consortium (W3C) published a First Public Working Draft of CSS Anchor Positioning last year, so I thought I would give it a try. I already had a perfect candidate to try it on: a component on my other site, adedicated.dev, which showcase my services by linking different words together. To link […]
Have you ever been like, ughkgh, is it npm run dev or npm run start? Is it yarn testwatch or yarn test:watch? If you do it every time you open a project, I’d suggest setting up tasks. But I mean more for one-off or less frequently used scripts. I’m forever forgetting the exact scripts from […]
I’m a GUI guy when it comes to using Git. I like to click over to a native app and immediately see useful things. Like a list of files that were changed in the repo I’m actively working on, on the branch I’m actively working on. This feels efficient and productive to me. I can […]
Happy Friday!
Here’s a few ASCII “font” headers when you really need to make sure people know things when looking at your code or README document.
Joyee Cheung made some waves in Node land last month:
Since ESM was shipped in Node.js, for many years, it was possible to
import cjs
, but not possible torequire(esm)
. The frustration ofERR_REQUIRE_ESM
has bothered many and probably has been the primary source of wasted hours in the Node.js ecosystem. If package authors wanted to make sure that both CJS and ESM users can consume their package, they either had to continue shipping their modules as CJS, or ship both the CJS and ESM version
Apparently, it will go out in v22, which isn’t out yet but should be soon.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSOne of my recent moanings-and-groanings is the fact that seemingly no color-picker supports Display P3 colors. Display P3 allows you to use far more vivid colors then we’ve historically had access to in CSS, but now are totally supported in CSS through newer color functions like oklch()
. Not even the built-in color picker to macOS.
Well it’s time for me to quit my bitchin’ because I’ve just seen two. I only looked at Mac stuff because that’s what I use. Feel free to chime in with options on other operating systems.
XScope can do it — but XScope is $50 and I find it heavy handed for the work I do. System Color Picker is free and I find very nice in it’s simplicity (it’s just a UX improvement over the default). The workflow I want, and it delivers, is: pick color from screen, have color on clipboard in OKLCH (that’s it).
In 2020, Max Stoiber wrote the 🌶️ spicy Margin considered harmful. On one hand, it seems silly. The margin
property of CSS is just a way to push other elements away. It’s very common and doesn’t feel particularly problematic. On the other hand… maybe it is? At least at the design system component level, because those components don’t know the context in which they will be used. Max wrote:
Margin breaks component encapsulation. A well-built component should not affect anything outside itself.
Adam Argyle wrote slightly earlier that he predicted the usage of margin
to naturally decline:
Prediction: margins in stylesheets will decline as gap in stylesheets climb
Well it’s four years later now! Has any of this played out? Well it’s super hard to know. Anecdotally, it feels like gap
is much more heavily used and my own usage is certainly up. There is public data on usage of CSS features, and, amazingly, margin
usage does appear to be slowly going down.
Here's our page on guest writing. It's a win-win-win!