Latest Articles

Sharing a Variable Across HTML, CSS, and JavaScript

By Chris Coyier on January 8, 2025

Set a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to CSS.

Details Dialog HTML Import Maps Inputs View Transitions

Relatively New Things You Should Know about HTML Heading Into 2025

By Chris Coyier on January 6, 2025

Accordion details, toggle switches, styleable selects, responsive video, and more!

Container Queries CSS z-index

Containers & Context

By Chris Coyier on January 3, 2025

If you’ve applied `container` to an element, know that, for the next little while, that makes a new “formatting context” in Safari, and does not in Chrome or Firefox.

JavaScript Node Typography

TypeScript without Build Tools

By Chris Coyier on December 30, 2024

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.

Baseline Browser Support

Baseline Data Choices

By Chris Coyier on December 26, 2024

Why can’t we see if a feature is polyfillable or able to be progressively enhanced in the baseline data? There are reasons.

CSS Scroll-Driven Animations

Scroll-Driven & Fixed

By Chris Coyier on December 20, 2024

It’s quite fun to have an element react to another element scrolling in an unexpected way!

Data JavaScript Server Side Rendering TanStack

Introducing TanStack Start

By Adam Rackis on December 18, 2024

TanStack Start enhances the TanStack Router by adding a server layer that improves performance through server-side rendering (SSR) and isomorphic loaders.

Bluesky is enjoying a boon in popularity. The API access right now is nicely open, allowing people to create some interesting stuff around it. I like this idea from Matt Kane: a Web Component (<bluesky-comments>) that loads up all the replies to any particular post like a comment thread. Imagine there is a post for every blog post you publish (like we do), instead of writing your own comment system you could just say “leave a reply on Bluesky” and that could be the whole commenting system. I hope get gets proper filtering.

I’ve seen other websites for helping you generate cubic-bezier() values in CSS for animations and transitions, but Easing Wizard is the best. Importantly, it helps you with the newer linear() style timings as well, which are more powerful. All the different types, the presets, the customization options, the different styles of previews, the clean design… outstanding work from Matthias Martin.

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

RSS

When we published our advice on the simplest and best way to take some static local files and make a proper online website out of them, we recommended Netlify. That holds true. But there is some trepidation, as once in a while you’d hear a horror story about usage blowing up unexpectedly and a user being stuck with a big bill. This is a problem not isolated to Netlify, but happened there too. That’s a scary prospect for anyone, as unlikely as it may be. So I think it’s notable that Netlify announced a free plan which is free forever and just has usage limits hard baked into it rather than the pay-to-scale model on other plans. That makes it safe: you’ll never get an unexpected bill.

CSS can truncate text on a single line or on multiple lines, but it always does so from the end of the text. I’ve seen a (bad) trick reversing the text direction to trim text from the front instead, but never from the middle.

Christian Heilmann wrote a package to help with this. I agree it’s a better solution particularly for file names/paths as both the beginning and ending hold more important information than the middle.

Wanna write?

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

Latest Articles

Sharing a Variable Across HTML, CSS, and JavaScript

Relatively New Things You Should Know about HTML Heading Into 2025

Containers & Context

TypeScript without Build Tools

Baseline Data Choices

Scroll-Driven & Fixed

Introducing TanStack Start

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Sharing a Variable Across HTML, CSS, and JavaScript

Relatively New Things You Should Know about HTML Heading Into 2025

Containers & Context

TypeScript without Build Tools

Baseline Data Choices

Scroll-Driven & Fixed

Introducing TanStack Start

The Beat

Bluesky Comments on any Post

Easing Wizard

Netlify Free Plan

trimMiddle()