Latest Articles

Keeping Pixely Images Pixely (and Performant!)

By Chris Coyier on September 23, 2024

With CSS’ `image-rendering: pixelated;` we can keep HTML images that have pixelated look anyway quite sharp looking, and possibly more performant to boot.

CSS SVG Typography

Gradient Text with a Drop Shadow

By Marc Grabanski on September 20, 2024

Gradient text is pretty easy to do these days with `background-clip: text;` — but it kills your ability to use `text-shadow`. SVG to the rescue.

:has()CSS CSS Combinators

Selecting Previous Siblings

By Chris Coyier on September 16, 2024

Selecting the *next* element in CSS can be done easily with the + combinator. Selecting the *previous* element used to be impossible, but now can be like :has(+ .el), and can be extended in either direction.

JavaScript Router TanStack TypeScript

Introducing TanStack Router

By Adam Rackis on September 13, 2024

TanStack Router is a comprehensive JavaScript framework for client-side applications, emphasizing type-safe routing and navigation. It includes nested layouts and efficient data loading.

clip-path CSS Range SVG

Split Effects with no Content Duplication

By Ana Tudor on September 11, 2024

The `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we’ll expand on some existing ideas, improving them by not requiring any content duplication.

Hydration JavaScript Next.js

What Does Hydration Mean?

By Chris Coyier on September 9, 2024

Hydration refers to JavaScript frameworks making server-side rendered HTML interactive.

A Complete Guide to Beginning with TypeScript

By Cody Lindley on September 6, 2024

“TypeScript has a steep learning curve, steeper than JavaScript itself. Understanding both of these at the same time can be overwhelming.”

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.

TODS: “an open source typography and opentype default stylesheet” from Richard Rutter.

I like the idea of slightly-opinionated stylesheets that do a bunch of things you might forget to do, or just as likely, don’t know you can do to begin with. There are loads of goodies in here including a slew of utility classes for specific OpenType features that are all useful in niche situations. I’ll another something that stuck out to me: font-weight: 1 1000;

Include full possible weight range to avoid unintended synthesis of variable fonts with a weight axis.

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

RSS

I thought the Bytes newsletter #326 did a good job of showing the different between a “normal” web component and a “declarative shadow DOM” web component. (Quick ports of the former and latter). Declarative shadow DOM is the web components story for “server-side rendering” (SSR). All the visual stuff needed to render the component is in the HTML, then JavaScript loads later and wires it all up. Literally the same as hydration. I’ve heard “where is the Next.js of web components?” and I tend to think declarative shadow DOM is one of the major primitives required to get there.

There are folks that think Safari is the worst current browser. Safari is the new IE, they say. You wouldn’t have to convince Alex Russell who regularly points to the fact that there isn’t browser choice on iOS, which is direct fuel for the app store, so keeping the web down is a business strategy. ios404.com points out 58 missing APIs on iOS WebKit. Roderick E.J.H. Gadellaa has itemized all the “Safari Showstoppers” by year, which is why Alex tends to call this a “rolling problem”. Nicolas Magand thinks Safari is going downhill just for regular usage, like watching YouTube. Matt Birchler has done a bit of science which directly combats the folk wisdom that Chrome is a battery hog. Chrome is actually more efficient than Safari, so this data says.

That paints a negative pictures of Safari, but it’s not terribly hard to picture a positive picture as well, pointing to years and years of accelerated releases, forging ahead on useful platform features. Seeing cross-document View Transitions get released so quickly after starting life as a Chrome-led project, for instance, to me is a great thing. I have doubts that there is an actual internal conspiracy at Apple to keep the web down, while at the same time wishing they’d loosen up the iOS browser choice restrictions and invest even more in Safari development.

Wanna write?

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

Latest Articles

Keeping Pixely Images Pixely (and Performant!)

Gradient Text with a Drop Shadow

Selecting Previous Siblings

Introducing TanStack Router

Split Effects with no Content Duplication

What Does Hydration Mean?

A Complete Guide to Beginning with TypeScript

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Keeping Pixely Images Pixely (and Performant!)

Gradient Text with a Drop Shadow

Selecting Previous Siblings

Introducing TanStack Router

Split Effects with no Content Duplication

What Does Hydration Mean?

A Complete Guide to Beginning with TypeScript

The Beat

New in ECMAScript 2024

TODS

Small Example of Declarative Shadow DOM

Safari ±