Latest Articles

Scroll-Locked Dialogs

By Chris Coyier on February 19, 2024

I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) […]

HTML TODO

Building a TODO App from Scratch — Step 2 — HTML

By Chris Coyier on February 15, 2024

OK it’s HTML time! I love HTML time. We’re laying down a foundation that makes everything feel very real. Is HTML jumping the gun? Nah. The reason that we can jump to HTML right away is that it is common to any other future choice we make. As I mentioned, we might just stay in […]

CSS iOS Scrolling

How to fix the invisible scrollbar issue in iOS browsers

By Šime Vidas on February 13, 2024

The page scrollbar in web browsers serves a useful function: The vertical position of the scrollbar thumb tells the user where they are in the page (their scroll position), while the size (height) of the scrollbar thumb tells them roughly how long the page is. Because scrollbars are useful, they should be clearly visible. On […]

Design TODO

Building a TODO App from Scratch — Step 1 — Planning & Design

By Chris Coyier on February 12, 2024

I find it fascinating how websites come to be. Especially websites with user interactivity and functionality, there are so many things to plan, build, and maintain, that it’s no wonder it easily makes for a whole career. Perhaps one of the most cliché introductory things to build on the web (or otherwise), is a to-do […]

3D AI SVG

Playing with Raster to SVG to 3D Tools

By Chris Coyier on February 9, 2024

I happen to have bookmarked a few new-to-me SVG tools that all seemed to fit together in interesting ways, so I thought I would have a play and share. Raster to SVG One type of these tools is Raster-to-SVG. That is, taking something like a photo and “vectorizing” it. I happen to have my multivitamin […]

Interop Web Standards

Comparing Interop 2024 Choices to the Popular Vote

By Chris Coyier on February 8, 2024

Here’s what made the list this year: A little while back I measured the “popular vote” on features based on positive GitHub emoji reactions on the threads. So! How well did what was actually chosen stack up to the popular vote? Let’s see. Interesting results I’d say! It’s kind of all over the map. By […]

Dialog HTML JavaScript

Basic Dialog Usage and Gotchas To Watch For

By Chris Coyier on February 5, 2024

The <dialog> element in HTML is tremendous. We’ve got support across the board now, so using it is a smart plan. Just with basic usage, you get a centered modal dialog experience that comes up when you call it, a dimmed background, focus trapped within it, closes with the ESC key, and focus returning where […]

The Beat

It’s worth noting that Automattic shipped a thing called Studio:

… a fast, free way to develop locally with WordPress. Share your local sites with clients or colleagues and keep your local development process smooth and simple.

It’s amazing to me that WordPress got to be as dominant as it is without any real answer to “how do I run it locally?” It’s non-trivial, as you need to run PHP, MySQL, and a web server, ideally in a way that mimics how your web host is doing it. I’ve been working with WordPress for a long time, and a lot of that time the answers to local dev environments have been some combination of expensive, janky, or complicated. Then tools like Local and Laravel Forge came along and made things better, but the more the merrier.

What is sheet music if not icons placed in particular vertical and horizontal positions? Stephen Band turned the system of sheet music into a CSS grid system where you control the placement of everything with classes and data-attributes that put notes and other music symbols exactly where they need to be. And because it’s SVG and em based, it’s entirely scalable. The whole thing is on GitHub and is usable via a <scribe-music> Web Component.

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

RSS

I was watching Kevin Powell and Adam Argyle rapidfire through 23 CSS features. They are all cool tricks, but one stood out to me. Even as an extreme CSS connoisseur I hadn’t seen it before. It’s a juicy one-liner (credit Temani Afif):

.overlay {
  border-image: fill 0 linear-gradient(#0003, #000);
}Code language: CSS (css)

This fills the entire element with a gradient overlay on top of any background. Gradient overlays are particularly useful when you’re trying to darken some of the image in order to lay text over it.

Icônes is an amazing icon resource site. There are tens of thousands of free-to-use icons which are easy to browse and find. I guess it’s like an alternate UI to Iconify, making it ultra-fast to get the icon in a format you want it in, like a quick download of SVG or PNG, copying to your clipboard in one of those formats, or as a basic component in many of the most popular frameworks.

Wanna write?

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

Latest Articles

Scroll-Locked Dialogs

Building a TODO App from Scratch — Step 2 — HTML

How to fix the invisible scrollbar issue in iOS browsers

Building a TODO App from Scratch — Step 1 — Planning & Design

Playing with Raster to SVG to 3D Tools

Comparing Interop 2024 Choices to the Popular Vote

Basic Dialog Usage and Gotchas To Watch For

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Scroll-Locked Dialogs

Building a TODO App from Scratch — Step 2 — HTML

How to fix the invisible scrollbar issue in iOS browsers

Building a TODO App from Scratch — Step 1 — Planning & Design

Playing with Raster to SVG to 3D Tools

Comparing Interop 2024 Choices to the Popular Vote

Basic Dialog Usage and Gotchas To Watch For

The Beat

Studio

Printing music with CSS Grid

Quick Trick: Using border-image to Apply and Overlay Gradient.

Icônes