View profile

Friday Front-End - Issue #314: Query Units and Layers and Web Vitals, oh my!

Friday Front-End - Issue #314: Query Units and Layers and Web Vitals, oh my!
By Scott Vandehey • Issue #314 • View online

Links
CSS Container Query Units
CSS viewport units work in a way that responds to the browser viewport size (width or/and height). That’s great, but we don’t always want to use a unit that is related to the viewport size. What if we want to query against a container width? That’s what query units are for.
ishadeed.com  •  Share
One last time: custom styling radio buttons and checkboxes
At this point, I’m seeing very few reasons to continue to recommend the visually-hidden technique to style radio buttons and checkboxes. With all modern browsers being able to handle the styling of these controls, the visually hidden technique has far too many extra gotchas, though manageable, to be aware of and account for.
www.scottohara.me  •  Share
A collection of common UX patterns optimized for Core Web Vitals. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. You can use the code in these examples to help ensure your projects stay on the right track.
web.dev  •  Share
When writing CSS, we developers have to carefully think about how we write and structure our code. Without any proper “plan of attack” the Cascade can suddenly work against us, and we might end up with pieces of code overwriting each other, selectors getting heavier and heavier, a few !important modifiers here and there, … — Uhoh! To regain control over the Cascade in those situations there’s a new CSS Language Feature coming to help us: Cascade Layers (CSS @layer).
www.bram.us  •  Share
Nowadays, creating complex shapes is an easy task using clip-path, but adding a border to the shapes is always a pain. There is no robust CSS solution and we always need to produce specific “hacky” code for each particular case. In this article, I will show you how to solve this problem using the CSS Paint API.
css-tricks.com  •  Share
Videos
Level Up: Introduction to TypeScript
In this one-off Level Up session, we’re exploring TypeScript, a popular programming language used for web development. Josh Goldberg, a Staff Frontend Developer at Codecademy, walks us through the basics of TypeScript. We discuss its relationship to JavaScript, how TypeScript is used in real production environments (like Codecademy itself!), how to get involved in the TypeScript community, and much more!
stackoverflow.blog  •  Share
Sponsor
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Did you enjoy this issue?
Scott Vandehey

Front-end development links tweeted daily, emailed weekly.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue