Together with  Userfront

#​565 — October 26, 2022 | Read on the web

Image via: Evil Martians

OKLCH in CSS — The new CSS Color Module 4 adds many fresh ways to declare color in CSS, including the experimental oklch() — this post dives into why it’s the most interesting, how it works, and why you may want to adopt it over RGB and HSL someday. (Support is limited right now.)

Andry Sitnik & Travis Turner

Let's Talk About Web Components — Brad looks at how web components can help deliver design system component libraries and their compatibility with JS libraries and frameworks. Noting that “web components are part of the web”. That they are good for the web, and that “we should be rooting for them”.

Brad Frost

React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

Why We Need CSS Speech — The CSS Speech Module (currently a candidate recommendation) is a set of CSS properties intended to let authors design the aural presentation of content. Léonie notes how currently the spec is too big, and needs slimming down so it can move forward.

Léonie Watson

⚡️ IN BRIEF

📙 Tutorials, Articles & Opinion

WebKit Features in Safari 16.1 — Safari 16 is now available on both macOS Ventura and iPadOS 16. This post digs into the new features this version brings, including Web Push notifications, passkeys, support for animated AVIF images, scroll to text fragment (that's the ability to specify a text snippet in the URL fragment), and plenty of nice CSS fixes.

Jen Simmons (WebKit)

Building a Better Web - A Faster YouTube on the Web — Here’s a case study looking over the changes the YouTube Web team has made to improve performance and increase Core Web Vitals pass rates at the video giant.

Addy Osmani & Sriram Krishnan (Google)

CSS Animated Grid Layouts — Chrome 107 joins other browsers in now supporting interpolation of grid-template-columns and grid-template-rows. As explained here, this allows for smooth transitions between states (instead of snapping at the halfway point of an animation).

Bramus

Futuristic CSS — Takes a look at some far-fetched and futuristic CSS features that might one day make their way to the browser.

Sacha Greif

Highly Customizable Background Gradients — How to create a complex but highly customizable background gradients that can be modified easily using CSS custom properties.

Scott Vandehey

Do You Really Understand CSS radial-gradients? — A fairly comprehensive dive into how radial gradients function, with plenty of detail that will no doubt help you improve your understanding of them too.

Patrick Brosset

Speaking up For Sass — In this post from last year the author concedes that although it may not be the ‘coolest’ thing right now, Sass/SCSS is still an invaluable part of web development. (This post has resurfaced again recently due to this Hacker News thread.)

Bryce Wray

Twitter Reminds Us About Alt Text, But How Good Are We At It? — Humble observations on how people describe photos, artworks, and memes.

Slava Shestopalov

Shortcut Brings Product and Engineering Together. Try It for Free

Shortcut (formerly Clubhouse.io) sponsor

What is Cross-Origin Resource Sharing (CORS)?
Jakub Pomykała

How to Use storage in Web Extensions
David Walsh

Is There Too Much CSS Now?
Sacha Greif

🔧 Code, Tools & Resources

a17t: A Tailwind CSS Plugin to Build UIs with Atomic Components — This works as a kind of step up from Tailwind. You don’t have to build from nothing, but the components aren’t too opinionated, providing a fairly neutral design language to work with.

Miles McCain

DevTools-X: A Cross-Platform Collection of Offline-First Developer Utilities — A collection of tools similar to those native to Mac/Windows. Includes utilities for color, images, JSON, Regex, SQL, and even a live React playground.

fosslife

Matrix: A Web Implementation of the 'Raining Green Code' from the Matrix MoviesSee it in action here. This has been around for a while but it recently was mentioned in Vice Motherboard, and commented on by one of the creators of the film franchise.

Rezmason

Send Email, Push and SMS with Smart Routing, with Just 8 Lines of Code — Send notifications from right within your application using the Courier API. One call, that's all, and send any template to any channel.

Courier.com sponsor

Satori: Convert HTML and CSS to SVG — A new ‘enlightened’ library from Vercel. Supports the JSX syntax.

Vercel

98.css: CSS for Building Faithful Recreations of Windows 98 — We last linked this three years ago, but it’s doing the rounds again. If for any reason you need your site’s interface to look like Windows first did 24 years ago.. 😆

Jordan Scales

🧑‍💻 JOBS

Software Engineer — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers.
Stickermule

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired

Software Engineer (Security) — Join our "kick ass" team. Our software team operates from 17 countries and we're looking for more exceptional engineers to join our Security team.
Sticker Mule

Ipx.