Issue #491

Links

Layered Text Headers

Being able to control the paint-order in CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability.

Support Logical Shorthands in CSS

The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years. Can we get them unstuck?

Case Study: Combining Cutting-Edge CSS Features Into a “Course Navigation” Component

Having been tasked with creating a UI component for navigating the content of an online course, Daniel found himself neck-deep in a pool of new CSS features that he wound up using on the project.

The bare minimum you need to enable View Transitions on your website

You can achieve a basic view transition with just a few lines of CSS and HTML meta tag. These changes are progressive enhancements, meaning they won’t break the user experience in browsers that don’t support the feature.

Using CSS Variables Correctly

In most cases, I'd now consider it code smell if a media query or CSS selector swaps one variable for another. Rather than swapping variables it's better to define one variable, set its initial value and change it with a selector or media query.

Videos

Responsive Bento Grid | CSS Tutorial | Frontend Mentor Challenge

Bento grids are all over the place these days, so when I saw the challenge by Frontend Mentor that recently came out that had a Bento grid on it, I said, you know what, this is a perfect opportunity to dive in and explore creating Bento grids.

Bonus Links

Bonus content this week! A surprising number of good opinion pieces caught my attention this week, and I decided they were worth sharing beyond the normal five links. Enjoy!

Is CSS-in-JS still a thing?

All most of use really need is colocation and scoped styles. There has been almost an entire decade of churn in this space, from Glamor (unmaintained) to Glamorous (deprecated), to styled-components (maintenance mode) and JSS(unmaintained) and styled-jsx (mostly dead) and Emotion, to Linaria, and onto the myriad projects we have now. By contrast, frameworks like Svelte and Vue seem to have solved this problem.

A lot of frontend teams are very convinced that rewriting their frontend will lead to the promised land. And I am the bearer of bad tidings. If you are building a product that you hope has longevity, your frontend framework is the least interesting technical decision for you to make. And all of the time you spend arguing about it is wasted energy. I will die on this hill.

You should know this before choosing Next.js

There is nothing wrong with a company profiting from an open-source software it created, especially when that helps fund the development of the project. But I think that can only work sustainably if the boundaries between the company and the open-source project are abundantly clear, with well-defined expectations between the maintainers, the hosting providers and the users about how and where each feature of the framework can be used. I want to explain why I don't think this transparency exists today.

Build It Yourself

It's time to have a new perspective: we should give kudos to engineers who write a small function themselves instead of hooking in a transitive web of crates. We should be suspicious of big crate graphs. Celebrated are the minimal dependencies, the humble function that just quietly does the job, the code that doesn't need to be touched for years because it was done right once.

Links

Videos

Bonus Links

Sponsor