Latest Articles

What’s Going On in Dark Theme / Light Theme Land

By Chris Coyier on April 18, 2024

There has been a fresh round of enthusiasm and writing around light mode / dark mode support for the web lately. I think it’s driven partially by the new light-dark() function in CSS (CSS Color Module Level 5 spec) that makes it easier to declare values that change depending on the mode. Here’s the basic […]

aspect-ratio CSS

Things That Can Break aspect-ratio in CSS

By Chris Coyier on April 16, 2024

CSS has an aspect-ratio property, which has had full support since around 2021. It can be a very satisfying property to use, because it can help match how your brain 🧠 works or what the desired design outcome does better than forcing dimensions does. “I need a square here” or “I need to match the […]

Markdown

Document Collaboration (with Comments!)

By Chris Coyier on April 15, 2024

There are a million document editing apps on the web. There are so many potential features that they can find customers depending on the perfect set of those features. Markdown supported? Markdown focused, or can you do more elaborate formatting? Collaborative? Realtime collaborative? Does it track history? What formats can it export it? Integrations? There […]

:has()CSS Template

A CSS-Powered Add/Remove Tags UI

By Preethi Sam on April 11, 2024

Checkboxes and labels used to have to be right next to each other to be a potent UI duo. You could do trickery like this: But now, thanks to :has() in CSS, we’re not beholden to that structure anymore. We can :has() it all, as it is said. Now that these HTML elements have some autonomy, without losing their connection […]

Core Web Vitals Performance

Understanding Interaction to Next Paint (INP)

By Mat Marquis on April 9, 2024

As of March 12th 2023, Interaction to Next Paint (INP) replaces First Input Delay (FID) as a Core Web Vital metric. FID and INP are measuring the same situation in the browser: how clunky does it feel when a user interacts with an element on the page? The good news for the web—and its users—is […]

DevTools Node

Node.js Debugging in Chrome DevTools

By Chris Coyier on April 8, 2024

I was pairing with my co-worker last week. They had a super different debugging style than I do. I’m aware that I can do fancy things in DevTools, like set breakpoints and whatnot right from within DevTools and use well-placed debugger; statements to halt JavaScript execution and inspect things at that point. But I hardly […]

DevTools

DevTools Tips & Tricks

By Pankaj Parashar on April 5, 2024

Front-end developers spend a significant amount of time working inside the browser’s DevTools. Likely just as much as they spend time writing code in the code editor. However, most developers barely scratch the surface of what DevTools can accomplish. I have been curating a collection of DevTools tips across major browsers. The following are some […]

The Beat

First I read Nikhil Suresh’s angry rant about AI, then I read Frank M Taylor’s angry rant about front-end development. I agree and disagree with different points in each, like any good rant. Something that struck me is that, well, I don’t think either of them are actually particularly angry, it’s actually a schtick. I also watched Dan Olson’s I Don’t Know James Rolfe recently (aka “Angry Video Game Nerd”). I liked Dave Rupert’s take that “nerdrage” has turned into a genre of content. This genre has made it’s way all the way to technology writing. Heck, I do it myself sometimes, but I also agree with Chris Enns in that I wish we all generally wrote more about things we like.

Ryan Seddon makes clear the potential performance problem with cross-page View Transitions:

… on a slow or spotty network, the transition may appear as if the screen is freezing, as the browser waits for the page to load before it can transition smoothly between the two screens—this is not ideal.

But also that our new friend the Speculation Rules API is a potential remedy:

Combining these two helps mitigate the original tradeoff of the “pause” between navigations while the browser loads the next document. With speculative prerender, it can render the page before the user clicks, making the transition near-instant.

Both these APIs are Chrome’n’friends only, so I guess it’s a you-break-it you-fix-it deal. They are also both progressive enhancements so no grave harm in using them now, unless you consider potentially unused pre-renders too wasteful.

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

RSS

I enjoyed Hugo Landau’s praise of PHP in The Demise of the Mildly Dynamic Website:

PHP has the world’s simplest deployment model for web applications: copy some files to a directory. This deployment model is so simple, and so intuitively understandable, that almost anyone capable of using an FTP client could deploy a PHP application.

Because PHP originated as a templating language, the initial behaviour of a PHP file is simply to print its contents. This means, in turn, that you can just “dip in and out” of PHP as you need it. Compare this in turn with even the simplest Perl or Python CGI script. For the latter, you’re writing a program which outputs HTML; with PHP, you’re writing HTML with some occasionally interwoven code. If a particular page doesn’t need to do anything dynamic, it needn’t contain any code at all.

PHP scripts don’t consume any resources (persistent processes, etc.) when they’re not being used.

And PHP is a heck of a lot better today than it was back in those “Rise of PHP” years. You could do a lot worse than building in Laravel.

CSS has linear, radial, and conic gradients, that can all do interesting and complex things… but not quite this, at least not on their own:

Example from Josh Tumath who is interested in getting a better syntax for them in CSS.

That’s what we’ve been calling a Mesh Gradient. There are all sorts of ways to pull it off, like using multiple backgrounds with radial gradients placed at different locations, or placing shapes and using the blur() filter.

Here’s a gallery of them, the thumbnails of which have nice hover effects, and many of which have slow classy animations.

Wanna write?

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

Latest Articles

What’s Going On in Dark Theme / Light Theme Land

Things That Can Break aspect-ratio in CSS

Document Collaboration (with Comments!)

A CSS-Powered Add/Remove Tags UI

Understanding Interaction to Next Paint (INP)

Node.js Debugging in Chrome DevTools

DevTools Tips & Tricks

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

What’s Going On in Dark Theme / Light Theme Land

Things That Can Break aspect-ratio in CSS

Document Collaboration (with Comments!)

A CSS-Powered Add/Remove Tags UI

Understanding Interaction to Next Paint (INP)

Node.js Debugging in Chrome DevTools

DevTools Tips & Tricks

The Beat

Nerdrage

View transitions + speculative rules

The Demise of the Mildly Dynamic Website

Mesh Gradients