Latest Articles

Relative Color Syntax — Basic Use Cases

By Chris Coyier on August 12, 2024

Support for the relative color syntax in CSS is across the board now (go interop!), so here we look at some basic (and still very useful) use cases, like applying alpha to a color you have on hand.

Decorators JavaScript

Exploring the Possibilities of Native JavaScript Decorators

By Alex MacArthur on August 9, 2024

Native support for decorators is inevitable! It simplifies augmenting class methods, which can help with things like logging, memoization, debouncing, and dependency injection.

Svelte

Snippets in Svelte 5

By Adam Rackis on August 7, 2024

Out with slots, in with snippets.

Post Thumbnail for Figma Typography Variables

Color Design Figma Typography

Figma has support for variables, and they work with the various typography features you may want to set. For instance, you could create a variable called “Header Font” with a value of “Ideal Sans” and use it in many places.

Container Units CSS

What if you used Container Units for… everything?

By Chris Coyier on August 2, 2024

I said to myself I said what if I used container units for every single unit in a design? I was wondering, partially because I thought the answer might be well, everything will probably scale really nicely then. Container units, in case you haven’t heard of them, are unit (like px or rem, but more […]

Clipboard JavaScript

Reading from the Clipboard in JavaScript

By Raymond Camden on July 31, 2024

While it’s a bit more common to *write* to the clipboard, JavaScript can also read from it. Plain text is pretty simple, while multimedia content is a bit more complex.

DOM JavaScript

Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript

By Marc Grabanski on July 29, 2024

JavaScript Frameworks generally do a lot of DOM handling for you, but doing it yourself can be the most performant option, and there are quite a few best practices.

I love the Interop project. We’re a couple of years into it, and each year it worked just like it was supposed to: features are chosen, those features are implemented (or fixed up) across all browsers. Choosing the features is somewhat democratic, and submissions are open for 2025. Remember last year I measured the positive sentiment of the open issues and compared it to what was ultimately chosen. It wasn’t terribly correlated but we did get some “popular” stuff still. There are already quite a few submissions. I’ve got some favorites already but I need to think a bit more to pick my favorites.

We just looked at how “animate to auto” (e.g. transition from a fixed value to a keyword like auto, max-content, etc.) is “opt-in” in a sense. You have to use interpolate-size: allow-keywords; to make it work or use a function like calc-size(), neither of which you accidentally do. This is because research showed that it would break things just enough to be annoying and the web don’t play like that.

In the same vein, there has been work done on making a “styleable” <select> element (as in, CSS control over what it looks like when you open it, which has never really been possible). This is another thing that needs to be opt-in, lest break websites (imagine CSS applied to a select menu accidentally that will all the sudden start working and cause who knows what all chaos). At first, it was going to be a new element <selectmenu>, which is maybe OK but quite hard to progressive enhance toward. Now things are pointing toward this opt-in:

select,
::picker(select) {
  appearance: base-select;
}Code language: CSS (css)

Una has the whole story. The demos are compelling, and can even be animated.

Little boosts of front-end development news, information, and advice — right to your feed reader of choice.

RSS

I’m on Chrome 129 and this animate to auto stuff is working for me with no special flags, so color me pleased. Would love to see this go into Interop 2025, as submissions are open.

html {
  /* This allows auto to be interpolated to, 
  along with min-content, max-content, and fit-content.
  It cascades as needed. */
  interpolate-size: allow-keywords;
}
.el {
  inline-size: 80px;
  overflow-x: clip;
  transition: inline-size 0.35s ease;
  &:hover,
  &:focus-visible {
    /* Requires interpolate-size: allow-keywords; */
    inline-size: max-content;
    /* Works without, and allows for calc() stuff */
    inline-size: calc-size(max-content, size);
  }
}Code language: CSS (css)

I’m using inline-size and max-content there, but it could be height and auto or block-size and min-content or whatever. There are some nice demos in the post with practical stuff like arbitrary list items entering and leaving the page, and accordions opening and closing. I imagine menus will be a big use case as well.

An open letter with a bunch of big names attached to it asking Oracle to give up the copyright on “JavaScript”.

It is therefore time to take active steps in order to bring the JavaScript trademark into the public domain, where it belongs.

It’s kinda weird, and only for historical acquisition reasons that they have it all. I don’t think it’s really doing Oracle any favors to hold on to it.

We could all just start saying “ECMAScript” instead, since that’s what mean for the most part anyway, but that would be quite the lift.

Wanna write?

Here's our page on guest writing. It's a win-win-win!

Latest Articles

Relative Color Syntax — Basic Use Cases

Exploring the Possibilities of Native JavaScript Decorators

Snippets in Svelte 5

Figma Typography Variables

What if you used Container Units for… everything?

Reading from the Clipboard in JavaScript

Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Relative Color Syntax — Basic Use Cases

Exploring the Possibilities of Native JavaScript Decorators

Snippets in Svelte 5

Figma Typography Variables

What if you used Container Units for… everything?

Reading from the Clipboard in JavaScript

Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript

The Beat

Interop 2025

Opt-In Styleable Selects

Arrival of Animate to Auto

Oracle, it’s time to free JavaScript.