Latest Articles

Teams

It’s a Win-Win: You & Your Team Learn and Your Company Benefits. Now Let’s Convince Your Boss.

By Frontend Masters Staff on March 12, 2024

A Frontend Masters personal account is $390/year. It’s an investment. It can be an investment in yourself if you’re looking for work, but if you’re already working, it can be an investment from that company that is good for everyone. A smart company with teams of developers should take advantage of buying a team account, […]

Streaming HTML

By Chris Coyier on March 11, 2024

I admit I went pretty far in my web development career without understanding that Streamed HTML is a thing. And while I’m admitting things, I’m still not 100% sure when it’s an ideal solution and how best to take advantage of it. But knowing is half the battle sometimes, so let me get into some […]

HTML JavaScript TODO

Building a TODO App from Scratch — Step 5 — Extra Functionality

By Chris Coyier on March 8, 2024

We left off in a decent place, but there was some missing functionality that we wanted all along. Editing To-Dos The interaction we decided on for editing is to double-click the todo. This will turn the to-do, in place, into an editable input. Then you hit enter (e.g. submit) or leave the input (e.g. blur) […]

Checkbox HTML Switch

Safari Gets a Toggle Switch Input

By Dave Rupert on March 6, 2024

Safari 17.4 dropped an interesting an unexpected feature, a native UI toggle switch control! It’s so new it’s not even in the HTML spec yet. While that might be a blocker for your project, you can use it today as a progressive enhancement on top of the standard checkbox input.

Anchor CSS Dialog Popover

Menus, toasts and more with the Popover API, the dialog element, invokers, anchor positioning and @starting-style

By Ollie Williams on March 4, 2024

Dropdowns, menus, tooltips, comboboxes, toasts — the popover attribute will make building a large variety of UI components easier. The popover attribute can be used on any HTML element, so you have the flexibility to choose whichever element is most appropriate semantically for each particular use case. Unlike a dialog, a popover is always non-modal […]

HTML Performance

Capo.js: A five minute web performance boost

By Dave Rupert on March 1, 2024

You want a quick web performance win at work that’s sure to get you a promotion? Want it to only take five minutes? Then I got you. Capo.js is a tool to get your <head> in order. It’s based on some research by Harry Roberts that shows how something seemingly insignificant as the elements in […]

CSS SCSS Shapes

Creating Flower Shapes using CSS Mask & Trigonometric Functions

By Temani Afif on February 29, 2024

Creating unusual shapes is always a fun exercise and a good way to practice your CSS skills. One might argue that SVG is better for this job, but nowadays we have a lot of new CSS tricks that allow us to create shapes with a clean and optimized code. Through this two-article series, we will […]

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

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.

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

RSS

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.

If you want to use multi-page view transitions, this used to be a prerequisite:

<meta name="view-transition" content="same-origin">Code language: HTML, XML (xml)

That’s dead. Now you do this:

@view-transition {
  navigation: auto;
}Code language: CSS (css)

Thanks to Bramus for the PSA and update article.

Wanna write?

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

Latest Articles

It’s a Win-Win: You & Your Team Learn and Your Company Benefits. Now Let’s Convince Your Boss.

Streaming HTML

Building a TODO App from Scratch — Step 5 — Extra Functionality

Safari Gets a Toggle Switch Input

Menus, toasts and more with the Popover API, the dialog element, invokers, anchor positioning and @starting-style

Capo.js: A five minute web performance boost

Creating Flower Shapes using CSS Mask & Trigonometric Functions

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

It’s a Win-Win: You & Your Team Learn and Your Company Benefits. Now Let’s Convince Your Boss.

Streaming HTML

Building a TODO App from Scratch — Step 5 — Extra Functionality

Safari Gets a Toggle Switch Input

Menus, toasts and more with the Popover API, the dialog element, invokers, anchor positioning and @starting-style

Capo.js: A five minute web performance boost

Creating Flower Shapes using CSS Mask & Trigonometric Functions

The Beat

Deciding on Using a Browser Feature via Baseline

A common web component learning blunder

Nesting/Overriding Properties in CSS

New Code Requirement for Multi Page View Transitions