Latest Articles

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 […]

CSS Icons SVG

Making your SVG icons CSS masks instead of inline HTML or backgrounds has some benefits

By Chris Coyier on February 2, 2024

I’m a fan of just chucking SVG icons right into the HTML where you need them: This has lots of benefits, like instant loading with no additional requests, and is 100% styleable, including all the internal parts (i.e. multicolor icons). But, putting your SVG icons in CSS can be advantageous too. This converter is handy. […]

CSS Scrolling

Heads Up on Custom Scrollbars. Chrome is Supporting the Standard Now, which Overrides The Old Pseudo Elements

By Chris Coyier on January 31, 2024

There was quite a long period of time (say 2011-2024) where if you wanted to style scrollbars in CSS, your best bet was using the pseudo elements ::-webkit-scrollbar and friends (there were about 7 of them). That got you custom scrollbars in Safari and Chrome and offshoots. Firefox never supported those. They were never really […]

Hover JavaScript

How To Build a Glowing Hover Effect that Follows the Pointer

By Chris Coyier on January 29, 2024

One of the Top Pens of 2023 was this Glowy Hover Effect by Ines. When I was taking a look at it, it finally clicked how it works. In a nutshell, there are two copies of the same HTML layered on top of one another. The top one has a fancy colors and such, but […]

I feel like I haven’t seen a really nice web design inspiration gallery in a while so Design Spells is really doing it for me.

Design details that feel like magic.

I think it’s the focus on websites. 😍

Google has this little widget called Baseline. Here’s a screenshot example:

The idea is for it to accompany a web platform feature so you can have a sense of what browsers support it. Web developers are rightfully skeptical of new web tech, wanting to know when they can actually use a feature, so this is helpful.

But there is crucial information missing here. Developers don’t decide to use a feature only based on browser support, but also:

Based on if that feature could be considered a progressive enhancement
Based on if that feature has a polyfill

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

RSS

Dave posts about this common web component learning blunder. The blunder is… not using a framework. I’m very guilty of this myself. I was just commenting about how the lifespan of web components could be wonderfully long if we keep them dependency free, which theoretically we can because they are a native part of the platform. But…

If you take anything from this post, please understand this: web components (most likely) weren’t designed for you. Not to dissuade you from using them, but they were purposefully designed to be a low-level bare metal primitive for library authors to build on; they were designed to be used with a library, a thin layer of abstraction butter on top.

You’re supposed to use them with a framework on top. As Dave lays out, they buy a lot and cost little.

Some things you just can’t undo in CSS.

<div style="display: none;">
  <div style="display: block;">
    Still hidden.
  </div>
</div>Code language: HTML, XML (xml)

But, perhaps unintuitively, that does work with visibility.

<div style="visibility: hidden;">
  <div style="visibility: visible;">
    Visible
  </div>
</div>Code language: HTML, XML (xml)

Ben Nadel makes the point that pointer-events is another one of those properties that allows you to “undo” what a parent has set. It’s like pointer-events just cascades down to descendent elements and you override it, but some properties you just can’t come back from, like display above or opacity.

Wanna write?

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

Latest Articles

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

Making your SVG icons CSS masks instead of inline HTML or backgrounds has some benefits

Heads Up on Custom Scrollbars. Chrome is Supporting the Standard Now, which Overrides The Old Pseudo Elements

How To Build a Glowing Hover Effect that Follows the Pointer

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

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

Making your SVG icons CSS masks instead of inline HTML or backgrounds has some benefits

Heads Up on Custom Scrollbars. Chrome is Supporting the Standard Now, which Overrides The Old Pseudo Elements

How To Build a Glowing Hover Effect that Follows the Pointer

The Beat

Design Spells

Deciding on Using a Browser Feature via Baseline

A common web component learning blunder

Nesting/Overriding Properties in CSS