A deep dive into producing an interpolated “gradient” of colors from just two provided colors.
You can build your own TypeScript build process, and you might want to if you need true type checking and compatibility with a wider ecosystem of tools. But lots of tools, including now Node itself, just accept TypeScript as if it were JavaScript.
Why can’t we see if a feature is polyfillable or able to be progressively enhanced in the baseline data? There are reasons.
It’s quite fun to have an element react to another element scrolling in an unexpected way!
TanStack Start enhances the TanStack Router by adding a server layer that improves performance through server-side rendering (SSR) and isomorphic loaders.
“… props that match a property on the Custom Element instance will be assigned as properties, otherwise they will be assigned as attributes.”
If it can go in a Docker, Fly can host it, and they’ll help you with that. Adam Rackis takes a look at the platform and shows off all the things he likes about it.
How many ways are there to add an event (like a click) to an element? Andrea Giammarchi covers them.
<tag onclick />tag.onclick = listenertag.addEventListener('click', listener[, options])The first two are basically the same (hence the “2.5” in the title). I’d say the vast majority of event handling is through addEventListener, but the clearly listed advantages/disadvantages Andrea goes through are worth understanding. The declarative nature of the first option can be quite handy.
Sometimes giving a good name to something is what helps it sink into people’s minds. Daniel Karuna may have pulled that off here with “Colormaxxing“. The P3 color space is just bigger than the sRGB color space, and the extra colors tend to be in the more intense regions.
What if I told you that
#ff0000orrgb(255, 0, 0)is not actually the reddest red you can have in your browser?
A nice tool for generating mesh gradients from Erik D. Kennedy. You might call it a bit of a trend, but as Erik pointed out in a recent newsletter, they can be quite versatile because it’s just a nice background look that doesn’t demand anything in particular from the brand.
Mesh gradients can work across a huge variety of brands.
- Dark? Yes.
- Light? Yes.
- Grainy? Sure.
- Pensive? Absolutely.
- Delicate? Yup.
- Weatherworn and rugged? Totally.
Pretty interesting trickery here, encoding a secret message in an emoji that you automatically get when you copy/paste it from Paul Butler.
Most unicode characters do not have variations associated with them. Since unicode is an evolving standard and aims to be future-compatible, variation selectors are supposed to be preserved during transformations, even if their meaning is not known by the code handling them. So the codepoint
U+0067(“g”) followed byU+FE01(VS-2) renders as a lowercase “g”, exactly the same asU+0067alone. But if you copy and paste it, the variation selector will tag along with it.
So you slap on a bunch of “variations” to a character that doesn’t support them (the secret message) and then pluck them off if you happen to know they are there. Sneaky sneaky.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters Donates to open source projects. $363,806 contributed to date.