Lightnews — Scholar-powered news

Frontend Masters @frontendmasters.com · 1d

CSS Counters in Action

CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations.

CSS Counters in Action

CSS has counter variables (based on matching selectors) that you can output as formatted content or use in calculations.

frontendmasters.com

2

Frontend Masters @frontendmasters.com · 3d

Numbers That Fall (Scroll-Driven Animations & Sibling Index)

With view() style scroll-driven animations, it's helpful to think about how you want it to work then tweak the ranges toward that goal.

Numbers That Fall (Scroll-Driven Animations & Sibling Index)

With view() style scroll-driven animations, it's helpful to think about how you want it to work then tweak the ranges toward that goal.

frontendmasters.com

2

Frontend Masters @frontendmasters.com · 7d

A Progressive Enhancement Challenge

You want to hide an interactive element that you don't need anymore after JavaScript loads/runs. Can you do it without a "flash" or layout shift?

A Progressive Enhancement Challenge

You want to hide an interactive element that you don't need anymore after JavaScript loads/runs. Can you do it without a

frontendmasters.com

1 2

Frontend Masters @frontendmasters.com · 9d

Inset Shadows Directly on img Elements (Part 1)

Inset `box-shadow` doesn't work directly on . 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.

Inset Shadows Directly on img Elements (Part 1)

Inset `box-shadow` doesn't work directly on . 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

5 9

Frontend Masters @frontendmasters.com · 11d

How much do you really know about media queries?

There are a ton more @media queries than "width" and "prefers-reduced-motion". Let's have a long, along with use-cases.

How much do you really know about media queries?

There are a ton more @media queries than

frontendmasters.com

3

Frontend Masters @frontendmasters.com · 16d

The Coyier CSS Starter

A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn't.

The Coyier CSS Starter

A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn't.

frontendmasters.com

3 38

Reposted by Frontend Masters

Chris Coyier @chriscoyier.net · 19d

I thought about things that have happened in CSS in 2025 and what I think you should probably know.

Then I blogged it.

frontendmasters.com/blog/what-yo...

It's not *everything* — it's my own curated list.

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

2 15 78

Frontend Masters @frontendmasters.com · 21d

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.

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

1 10

Frontend Masters @frontendmasters.com · 23d

The Future of Coding Sale ends TODAY!
Save $100 on yearly membership + unlock:
✨ Personalized Paths
✨ AI & DevOps Learning
✨ Quizzes & Flashcards
✨ 250+ awesome courses + a fantastic roadmap for more

⏳ <24 hours left! Don't miss it

1 2

Reposted by Frontend Masters

Kevin Powell @kevinpowell.co · 24d

Just past 1000 videos on YouTube, and (very slowly) coming up on 1 million subscribers... AND as was pointed out to me by @nerdy.dev, I'm also approaching 100 million total views! 🤯

Lots of subs is a fun stat, but that's absolutely bonkers.

Your channel has had 98,078,083 views so far

7 1 82

Frontend Masters @frontendmasters.com · 24d

CSS offset and animation-composition for Rotating Menus

The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.

CSS offset and animation-composition for Rotating Menus

The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.

frontendmasters.com

1

Frontend Masters @frontendmasters.com · 25d

Replace Your Animated GIFs with SVGs

You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!

Replace Your Animated GIFs with SVGs

You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!

frontendmasters.com

2

Frontend Masters @frontendmasters.com · Sep 11

Choosing the Right Model in Cursor

Cursor has an "auto" mode, "but if you care about cost or predictability, it’s worth picking models manually." says Steve Kinney.

Choosing the Right Model in Cursor

Cursor has an

frontendmasters.com

Frontend Masters @frontendmasters.com · Sep 10

5 top tuts!

1) Promises frontendmasters.com/tutorials/fi...

2) Web Component frontendmasters.com/tutorials/fi...

3) gRPC frontendmasters.com/tutorials/me...

4) Handle Permissions like a Senior Dev frontendmasters.com/tutorials/we...

5) Debounce vs Throttle frontendmasters.com/tutorials/we...

Your First Web Component | Frontend Masters

Learn the fundamentals of Web Components and how to create your own from scratch using JavaScript. Define custom elements using HTML elements, attach shadow DOM, and encapsulate styles and logic for …

frontendmasters.com

Frontend Masters @frontendmasters.com · Sep 10

🚀 80+ tutorials are FREE during our Future of Coding Sale!
Learn from Kevin Powell, Web Dev Simplified, Melkey, and more.

⏱️ 15–30 min lessons.
Ends Thu, Sept 18.
👉 frontendmasters.com/tutorials/

1 1 4

Frontend Masters @frontendmasters.com · Sep 9

Getting Started with Cursor

Cursor is an AI-focused VS Code fork. Here's Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.

Getting Started with Cursor

Cursor is an AI-focused VS Code fork. Here's Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.

frontendmasters.com

Frontend Masters @frontendmasters.com · Sep 8

It’s here: The Future of Coding Sale 🛸

$100 off yearly Frontend Masters → 250+ courses, AI workshops, personalized learning paths, quizzes, & more

frontendmasters.com/sale/?utm_so...

3 4

Frontend Masters @frontendmasters.com · Aug 30

The `-path` of Least Resistance (Part 2)

This time we're looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.

The `-path` of Least Resistance (Part 2)

This time we're looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.

frontendmasters.com

1 3

Frontend Masters @frontendmasters.com · Aug 28

The `-path` of Least Resistance (Part 1)

A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.

The `-path` of Least Resistance (Part 1)

A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.

frontendmasters.com

1 2

Frontend Masters @frontendmasters.com · Aug 27

Opening a Details Element from the URL

If the #hash in the URL matches the ID of an element *inside* a element, it'll open. No other fancy code required.

Opening a Details Element from the URL

If the #hash in the URL matches the ID of an element *inside* a element, it'll open. No other fancy code required.

frontendmasters.com

1 3 9

Frontend Masters @frontendmasters.com · Aug 26

Very Early Playing with random() in CSS

(Only Safari Technical Preview!)

Awfully cool `random()` is coming in CSS. The design possibilities are quite cool.

Very Early Playing with random() in CSS

(Only Safari Technical Preview!) Awfully cool `random()` is coming in CSS. The design possibilities are quite cool.

frontendmasters.com

1 6

Frontend Masters @frontendmasters.com · Aug 25

1 12

Frontend Masters @frontendmasters.com · Aug 23

Quick Dark Mode Toggles

All the browsers DevTools have a way of emulating color modes. The are essentially faking the system preference at the application level. Here's where those controls are located and another nice tool.

Quick Dark Mode Toggles

All the browsers DevTools have a way of emulating color modes. The are essentially faking the system preference at the application level. Here's where those controls are located and another nice tool.

frontendmasters.com

3

Frontend Masters @frontendmasters.com · Aug 21

New Cloud Infrastructure Course! Startup to Scale with Erik Reinert

Learn containers, CI/CD, DB migrations, load balancing, Terraform, and more.

📦 Ship with confidence! frontendmasters.com/courses/clou...

Startup Phase to Scale Phase cloud infrastructure diagram

5

Frontend Masters @frontendmasters.com · Aug 21

Obsessing Over Smooth radial-gradient() Disc Edges

An underdog media query, resolution queries, comes to the rescue here in defining radial gradients that don't blur or get the jaggies.

Obsessing Over Smooth radial-gradient() Disc Edges

An underdog media query, resolution queries, comes to the rescue here in defining radial gradients that don't blur or get the jaggies.

frontendmasters.com

1 5