Latest Articles

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

CSS JavaScript SVG TODO View Transitions

Building a TODO App from Scratch — Step 4 — Styling & Interactive Choices

By Chris Coyier on February 28, 2024

I’m already a little over all the green. What was I thinking? I’m much more of a nice gray color palette kinda guy with some fun poppy colors. That’s what we need to get to here. When we left off, we just had wireframes going. It’s time to get some style on this thing! Custom […]

Courses JavaScript Podcast

Testing Your JavaScript Knowledge Course (and Podcast Interview with Lydia Hallie)

By Frontend Masters Staff on February 28, 2024

Quizzing has always been a highly requested feature, and we wanted it not just to be a test — but a course that combines challenging questions with in-depth, quality instruction. We released our first quiz-based course last year covering advanced web development topics and folks seem to really enjoy it. Today, we’re excited to release […]

The Beat

A very nice one page website from the Brooklyn-based studio Selman showcasing just how much web (and other) technology was rooted in innovation by women. Printable posters, too.

Good observation in Bytes:

… new CSS-in-JS libraries are popping up like it’s 2017 all over again.

Panda came out last summer, Meta open-sourced StyleX in December, Material UI released PigmentCSS last month, and Restyle just launched a few weeks ago.

It’s likely that server-side rendering screwed up the original “batch” of these tools. That, and, ya know, just using CSS is often workable.

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

RSS

I’m a big fan of View Transitions. Part of what they can do, animating elements across fresh page loads, is a uniquely powerful ability. The performance story, though, is a bit complicated. You might think because you don’t have to reach for a JavaScript framework with Single Page App abilities to do this, it could be a big performance win. That’s a fair take. But it’s also important to know that View Transitions Break Incremental Rendering, as Eric Portis notes.

Consider: how does the browser know which elements are supposed to render across those page loads? Well, it’ll need to fully render the 2nd page to know that, meaning it can’t incrementally render it for us, which means there is technically an increased delay which is not a good performance characteristic.

Good news though. What if the browser has already rendered that 2nd page? That could be the case with the Speculation Rules API we’ve started covering. I also might argue that a site with nice animations between pages might help with the perceived performance.

What happens with a CSS @keyframe animation like this when called?

@keyframes pulse {
  50% {
    scale: 1.5;
  }
}Code language: CSS (css)

There is only one “keyframe” there at 50%. So what happens at 0% through the animation? The scale property is… whatever it already was. And at 100%? Back to whatever it already was. Assuming the default scale of 1, it will grow the element then shrink back down again. So little code!

David East and Adam Argyle dig into this in the video Single CSS keyframe tricks are magic and have a great demo.

Wanna write?

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

Latest Articles

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

Building a TODO App from Scratch — Step 4 — Styling & Interactive Choices

Testing Your JavaScript Knowledge Course (and Podcast Interview with Lydia Hallie)

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

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

Building a TODO App from Scratch — Step 4 — Styling & Interactive Choices

Testing Your JavaScript Knowledge Course (and Podcast Interview with Lydia Hallie)

The Beat

No Web Without Women

CSS-in-JS Round 2

View Transitions Break Incremental Rendering

Single CSS Keyframe Tricks are Magic