Lightnews — Scholar-powered news

Friday Front-End @fridayfrontend.com · 1d

Today's lunch video is "The BEST way to work with #CSS shape-outside" - "Wrapping text around a shape makes a layout more interesting, but editing the points of a complex polygon is tedious. Firefox has a great tool for this, making the process fun and easy!" www.youtube.com/watch?v=hKiL...

The BEST way to work with CSS shape-outside

Wrapping text around a shape can make a layout more interesting, but editing all the points of a complex polygon can be tedious. Firefox has a great dev tool for this making the process fun and easy!

www.youtube.com

1 4

Friday Front-End @fridayfrontend.com · 1d

Inset Shadows Directly on img Elements: "Inset `box-shadow` doesn't work directly on image elements. There are work-arounds, but this #SVG filter can do it directly. Don't run! There is powerful stuff to learn here through interactive demos." frontendmasters.com/blog/inset-s...

Inset Shadows Directly on img Elements (Part 1)

Inset `box-shadow` doesn't work directly on image elements. There are work-arounds, but this SVG filter can do it directly. Don't run! There is powerful stuff to learn here through interactive demos.

frontendmasters.com

Friday Front-End @fridayfrontend.com · 2d

A Few Fun #CSS Nesting Tips & Tricks: "There are some handy things that you can do with nesting, espcially when you start moving the `&` placeholder around!" html-css-tip-of-the-week.netlify.app/tip/nesting-...

1 2

Friday Front-End @fridayfrontend.com · 3d

Touring New #CSS Features in Safari 26: "Browsers release new versions all the time, where they sprinkle in a couple or few new features. Safari 26 is different, though, introducing 75 new features, 3 deprecations, and 171 other improvements." css-tricks.com/touring-new-...

Touring New CSS Features in Safari 26 | CSS-Tricks

Safari 26 adds:75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about.

css-tricks.com

1

Friday Front-End @fridayfrontend.com · 4d

Styling Siblings With #CSS Has Never Been Easier: "Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects." utilitybend.com/blog/styling...

Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index | utilitybend

Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects.

utilitybend.com

2 4

Friday Front-End @fridayfrontend.com · 5d

How much do you really know about #CSS media queries? "It’s not that I thought media queries were only for responsive design, but out of sight, out of mind, right? I’ve come to the conclusion that many of them definitely deserve more attention." frontendmasters.com/blog/learn-m...

How much do you really know about media queries?

There are a ton more @media queries than

frontendmasters.com

2

Friday Front-End @fridayfrontend.com · 8d

Today's lunch video is "Navigating the World of Web Accessibility with Sara Soueidan" - "Sara is a renowned expert in web accessibility. Our conversation was a deep dive into the nuances of making the web more inclusive and accessible for everyone." #a11y www.youtube.com/watch?v=ndGK...

Navigating the World of Web Accessibility with Sara Soueidan

I recently had the pleasure of chatting with Sara Soueidan, a renowned expert in web accessibility. Our conversation was a deep dive into the nuances of making the web more inclusive and accessible…

www.youtube.com

Friday Front-End @fridayfrontend.com · 8d

The Big Gotcha With @starting-style: "#CSS has been on fire lately, with tons of great new features. @starting-style allows us to use transitions for enter animations, something previously reserved for keyframe animations. But is the juice worth the squeeze?"

The Big Gotcha With @starting-style • Josh W. Comeau

CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS…

www.joshwcomeau.com

1 2

Friday Front-End @fridayfrontend.com · 9d

Preventing jank on focused overflow-causing elements: "Hope this gives you the push you might need to use overflow: clip a little more frequently. It’s been widely available for over 5 years now, so it’s pretty safe to use!" #CSS chriskirknielsen.com/blog/prevent...

Preventing jank on focused overflow-causing elements | chriskirknielsen

Making sure the focused element doesn’t trigger janky scroll.

chriskirknielsen.com

1

Friday Front-End @fridayfrontend.com · 10d

Ambient Animations In Web Design: "Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground — subtle, slow-moving details that add atmosphere without stealing the show." #CSS www.smashingmagazine.com/2025/09/ambi...

Ambient Animations In Web Design: Principles And Implementation (Part 1) — Smashing Magazine

Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground — subtle, slow-moving details that add atmosphere without…

www.smashingmagazine.com

Friday Front-End @fridayfrontend.com · 11d

The Best #CSS Unit Might Be a Combination: "We don’t have to choose between px and rem for spacing, now that comparison functions are well supported in CSS." www.oddbird.net/2025/09/23/t...

The Best CSS Unit Might Be a Combination

We don't have to choose between px and rem for spacing

www.oddbird.net

2

Friday Front-End @fridayfrontend.com · 12d

What You Need to Know about Modern #CSS (2025 Edition): "If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples." frontendmasters.com/blog/what-yo...

What You Need to Know about Modern CSS (2025 Edition)

If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.

frontendmasters.com

Friday Front-End @fridayfrontend.com · 15d

Today's lunch video is "Common #CSS Layout misconceptions" - "There are a lot of CSS misconceptions out there in general, and today I’m tackling two of the biggest layout-related ones: How `flex: 1` works, and the idea that Flexbox is inherently simpler than Grid." www.youtube.com/watch?v=Drtu...

Common CSS Layout misconceptions

👉 I’m hosting a free CSS Grid Workshop in my Discord on Friday, September 19th: https://discord.gg/Ww9VVyQbQY?event=1413592833742602321 There are a lot of CSS misconceptions out there in general,…

www.youtube.com

Friday Front-End @fridayfrontend.com · 15d

CSS to speech: alternative text for #CSS-generated content: "This is a 101 post on when and how to use the slash content property syntax in CSS to provide alt text for CSS-generated content, and why it is important." #a11y www.sarasoueidan.com/blog/alt-tex...

CSS to speech: alternative text for CSS-generated content

— The personal website of Sara Soueidan, inclusive Web UI engineer

www.sarasoueidan.com

1 2

Friday Front-End @fridayfrontend.com · 16d

Taking a shot at the double focus ring problem using modern #CSS: "A double focus ring is really useful in general but especially so with complex, themed systems. Eric Bailey shows us how to develop a really smart system, using modern CSS." piccalil.li/blog/taking-...

Taking a shot at the double focus ring problem using modern CSS

A double focus ring is really useful in general but especially so with complex, themed systems. Eric Bailey shows us how to develop a really smart system, using modern CSS.

piccalil.li

3

Friday Front-End @fridayfrontend.com · 17d

Start using #CSS Scroll-driven animations today! "To celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them." cydstumpel.nl/start-using-...

Start using Scroll-driven animations today! | Blog Cyd Stumpel

To celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them. Link to: The anatomy of a scroll driven animation We don’t need…

cydstumpel.nl

2 3

Friday Front-End @fridayfrontend.com · 18d

Subgrid: how to line up elements to your heart’s content: "Subgrid been supported by the major browsers for a while now, but recent survey results showed that it was still confusing to people, so we thought we’d show an easy way to understand what’s happening." #CSS webkit.org/blog/17339/s...

Subgrid: how to line up elements to your heart’s content

When Grid became widely available across browsers in 2017, it was an absolute game changer.

webkit.org

2 6

Friday Front-End @fridayfrontend.com · 19d

CSS-only floating focus with anchor positioning: "With just those few lines of #CSS, we have a floating focus indicator that follows the keyboard focus around the page." polypane.app/blog/css-onl...

CSS-only floating focus with anchor positioning | Polypane

The Track focus debug tool in Polypane shows a floating outline that follows the keyboard focus around the page. This makes it easier to keep track of where the…

polypane.app

1 1

Friday Front-End @fridayfrontend.com · 22d

Today's lunch video is "Built-in accessibility: blessing or curse?" - "In this talk, we’ll look at how 'built-in' can be effective and how it can help you to remove barriers at scale." #a11y www.youtube.com/watch?v=GvYz...

Built-in accessibility: blessing or curse? - Hidde de Vries | JSHeroes 2025

“We’ll build in accessibility”, they say. But what does “built-in” mean in practice? Whether it’s in standards, browser functionality, web platform features or design system components… the reality…

www.youtube.com

1 2

Friday Front-End @fridayfrontend.com · 22d

Un-Sass'ing My CSS: Compiling Multiple #CSS Files into One: "Discover how to transition from Sass to modern CSS, exploring ways we can import multiple CSS files into one sole CSS file." www.alwaystwisted.com/articles/UnS...

Un-Sass'ing My CSS: Compiling Multiple CSS Files into One Always Twisted

Discover how to transition from Sass to modern CSS, exploring ways we can import multiple CSS files into one sole CSS file

www.alwaystwisted.com

1 2

Friday Front-End @fridayfrontend.com · 23d

Integrating #CSS Cascade Layers To An Existing Project: "In practice, it’s about refactoring existing CSS to use cascade layers without breaking anything." www.smashingmagazine.com/2025/09/inte...

Integrating CSS Cascade Layers To An Existing Project — Smashing Magazine

The idea behind this is to share a full, unfiltered look at integrating CSS Cascade Layers into an existing legacy codebase. In practice, it’s about refactoring existing CSS to use cascade layers…

www.smashingmagazine.com

2

Friday Front-End @fridayfrontend.com · 24d

Color Shifting in #CSS: "A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. It turns out, browsers have a surprisingly big limitation when it comes to color processing!" www.joshwcomeau.com/animation/co...

Color Shifting in CSS • Josh W. Comeau

A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it…

www.joshwcomeau.com

1 1

Friday Front-End @fridayfrontend.com · 25d

Follow-the-leader pattern with #CSS anchor positioning: "Learn how to create a dynamically re-anchored pointer element. The technique is pretty neat too. It involves creating a single 'follower' element and dynamically updating it’s anchor on an event or state change." una.im/follow-the-a...

una.im | Follow-the-leader pattern with CSS anchor positioning

Learn how to create a dynamically re-anchored pointer element.

una.im

1 1

Friday Front-End @fridayfrontend.com · 26d

Liquid Glass in the Browser: Refraction with #CSS and #SVG: "Explore how to recreate Apple's stunning Liquid Glass effect using CSS, SVG Displacement Maps, and refraction calculations." kube.io/blog/liquid-...

Liquid Glass in the Browser: Refraction with CSS and SVG — kube.io

Explore how to recreate Apple's stunning Liquid Glass effect using CSS, SVG Displacement Maps, and refraction calculations.

kube.io

2 4

Friday Front-End @fridayfrontend.com · 27d

Today's lunch video is "Why I use gradients with one color" - "It might seem strange to have a gradient with only one color, but there are a few reasons you might want one!" #CSS www.youtube.com/shorts/NVxjp...

Why I use gradients with one color

It might seem strange to have a gradient with only one color, but there are a few reasons you might want one! #css

www.youtube.com

1 3