Latest Articles

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

By Temani Afif on August 21, 2024

We’ll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.

contain CSS

The CSS contain property

By Preethi Sam on August 19, 2024

CSS containment is used for optimization and opening styling possibilities by isolating elements from the rest of the page. Different contain values (size, paint, layout, etc.) provide various benefits and tradeoffs.

CSS iOS Typography

Letting iOS “Text Size” Setting Affect Font Size on the Web

By Chris Coyier on August 16, 2024

On iOS, there is a setting for Text Size. I’ll do a video here for the current version of iOS (17.5.1) to be clear: As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn’t effect websites. I think that’s largely true, but I just learned […]

JavaScript Reactivity Svelte

Fine-Grained Reactivity in Svelte 5

By Adam Rackis on August 14, 2024

Svelte is already quite lightweight and fast, but Svelte 5 still overs big improvements in fine-grained reactivity, meaning re-rendering as absolutely little as possible.

Color CSS Relative Color Syntax

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.

Are you using Sass as part of your build process? If you’re using Vite or webpack and importing SCSS files in lots of different components, be aware you should probably switch to sass-embedded instead of sass, as it can, as James Stuckey Weber wrote, “allows you to reuse a single instance of Sass for multiple compilations” instead of Sass spinning up and down for every single import.

Victor Ayomipo saw our post about using container units for everything. He was more optimistic than I that our result was good. My thinking is that there are plenty of things you straight up don’t want to use container units for. Victor did a similar exercise with (over?)-using min() and viewport units. Turns out there are lots of niceties, and I agree that min() is underused, but that you still can’t dogmatically say one particular sizing approach is always best. Personally, I’m rocking min() for container “width”, like .wrapper { inline-size: min(300px, 100dvw); on the regular now.

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

RSS

The ability to style a <select> menu has long been high on list of web designer’s want lists. The inside part anyway; the part that opens up when you activate it. The outside we’ve been able to style for a while.

Open UI did a bunch of research and even had a browser implementation of <selectmenu> to solve this for a while. But thankfully, we’re back at <select> with an “opt-in” via CSS, at least, that’s where things are pointed.

There is a great episode of OTMT where the get into it and Jake counts ten low-level platform features that enabled where we are now, and how that will accelerate allowing other stylable elements. (So cool.) There is an awfully weird bit in the form of <selectedoption> that needs feedback. Amelia points out it’s kinda like SVG <use> elements, but that doesn’t make it any less weird.

Paweł Grzybek has a succinct overview of the new things in JavaScript this year, including credit to the people involved.

I find it interesting to consider features in the recent light of the JS0/JSSugar proposal/drama. Looking at these features, which ones would be “real language” features (JS0) and which could be processed away (JSSugar)? I couldn’t tell you exactly, but it looks like some of each to me. Surely the same is true of more new and upcoming features.

I’ve been working with mostly JavaScript and Go the last few years and it’s so interesting to see the cultural differences between them. Most fast, pour that sugar, new is good! vs. Move slow, no sugar, change little.

Wanna write?

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

Latest Articles

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

The CSS contain property

Letting iOS “Text Size” Setting Affect Font Size on the Web

Fine-Grained Reactivity in Svelte 5

Relative Color Syntax — Basic Use Cases

Exploring the Possibilities of Native JavaScript Decorators

Snippets in Svelte 5

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

The CSS contain property

Letting iOS “Text Size” Setting Affect Font Size on the Web

Fine-Grained Reactivity in Svelte 5

Relative Color Syntax — Basic Use Cases

Exploring the Possibilities of Native JavaScript Decorators

Snippets in Svelte 5

The Beat

Speed up Sass

CSS min() All The Things

Styleable Selects Inch Forward

New in ECMAScript 2024