~frontendfocus | Issue 627 - 12 modern CSS one-line upgrades (17)

12 Modern CSS One-Line Upgrades — Here’s a dozen CSS properties that are well worth knowing — these one-line upgrades will help reduce technical debt, remove unnecessary lines of JavaScript, and score some easy wins for user experience, too. Think things like object-fit, scroll-margin, accent-color, etc.

[Guide] Debugging Your Next.js App With Sentry — Get all the basics to monitoring and debugging your Next.js app with Sentry in this 7-part video series. You’ll learn how to instrument your app with Sentry, how to identify a few specific issues, and follow errors from the client to the server.

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() — Shows us how, with just CSS, we can add scroll animations that toggle shadows on navbars, reveal images, add so-called 'scrolly-telling', link up carousel elements, and more.

AI for Web Devs — Austin has just published the last post in this eight part series on using AI in web development, covering prompt engineerings, security, deployment, and more.

▶  Modern CSS, The State of the Web, Safari's Progress, and More — Jen Simmons, of the WebKit team, was a guest on Kevin Powell’s channel to talk about all things CSS, web standards, font-size-adjust, margin-trim, text-box-trim, text-box-edge, and of course, Safari.

Learn the :has() Selector by Example — Five practical examples of how to use this selector. There’s a video running through things too if you’d rather that.

Better Form UX with the field-sizing Property — A look at how the field-sizing CSS property could improve web form user experience.

Design Better Pagination — Andrew shares some pagination UI best practices along with some considerations for more complex needs. Lots of visuals here to help things along.

✨ sparkly-text: A Small Web Component for Making Text Sparkle — A cute effect that uses animated SVG under the hood. You can see a few examples in this post.

Design Systems Database: A Database of Best-in-Class Design Systems, Organized and Sorted by Components and Directories — Useful for studying the public design systems of well-known technical teams (Adobe, GitHub, MailChimp, Shopify, etc.), divided into systems, directories, components, and blueprints. Handy stuff.

SVG Filter Maker: A GUI To Interactively Build SVG Filters — Not to be confused with CSS filters, this is for building the much more complex SVG filters using the <filter> element and one or more of the many filter primitives.

Wooden Toggles — I’m sharing this HTML and CSS CodePen demo just for the skeuomorphic memories it evokes of the texture, depth and ‘rich Corinthian leather’ found in the early days of iOS.

Typeculator: A Different Approach to Generating Type Scales — Based on something called the “Golden Thread” technique, which helps overcome problems like fractional values, challenges with multiple typefaces, etc.

worker-timers: setInterval/setTimeout But for Unfocused Windows — When a tab loses focus, any timers used within can be throttled. One solution is to use a Web Worker instead.

CSS 3D Clouds — This striking demo (from a decade ago) has been doing the rounds this week — it set out to create 3D-like clouds using CSS, transforms, and a touch of JavaScript. The approach to create such a thing now might be a little different, but this result remains good. You can make fluffy clouds, stormy ones, or even go with an...