Frontend Masters

Infinite Marquee Animation using Modern CSS A row of logos that animate forever perfectly and don't have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!

Infinite Marquee Animation using Modern CSS

A row of logos that animate forever perfectly and don't have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!

Should we NEVER use non-logical properties? Best bet: just always use them. More nuanced take: there is a few situations where using the physical property is still releavant.

Should we NEVER use non-logical properties?

Best bet: just always use them.

More nuanced take: there is a few situations where using the physical property is still releavant.

Liquid Glass on the Web It's a complicated look! There may or may not be blurring, light refracts in tricky ways, the highlights are quite bright, and you've got to be very careful about text contrast accessibility.

Liquid Glass on the Web

It's a complicated look! There may or may not be blurring, light refracts in tricky ways, the highlights are quite bright, and you've got to be very careful about text contrast accessibility.

The Figcaption Problem When an image isn't

The Figcaption Problem

When an image isn't "full width", but you want that caption underneath to wrap at the end of the image.

Introducing Zustand (State Management) Zustand is a minimal, but fun and effective state management library which just may improve your render performance.

Introducing Zustand (State Management)

Zustand is a minimal, but fun and effective state management library which just may improve your render performance.

Adaptive Alerts (a CSS scroll-state Use Case) A single button, but it has two different behaviors in JavaScript depending on how far you’ve scrolled in an element (as determined by CSS!)

Adaptive Alerts (a CSS scroll-state Use Case)

A single button, but it has two different behaviors in JavaScript depending on how far you’ve scrolled in an element (as determined by CSS!)

Stacked Transforms A look at what happens when you add a whole list of transforms to an element, and how that interacts with `animation-composition`.

Stacked Transforms

A look at what happens when you add a whole list of transforms to an element, and how that interacts with `animation-composition`.

Simplify State in React and Next.js | Learn State Management on Frontend Masters Solve challenging state management problems and build applications that reliable scale with your team. Recognize anti-patterns and learn complex state optimizations with data normalization, form data,...

🔥 Build apps that don’t break as they grow

@davidkpiano.bsky.social's new course teaches real patterns for managing complexity in React & Next.js:

🔄 Replace useEffect clutter
🧱 Normalize state
⚡ Use event-driven design

State Management at Scale → frontendmasters.com/courses/reac...

Deploy a Site with a Build Process & a Custom Domain Name The last part of this series is taking our site that we've got in GitHub and addng an Astro build process to it, then mapping a domain we own to the Netlify-hosted site.

Deploy a Site with a Build Process & a Custom Domain Name

The last part of this series is taking our site that we've got in GitHub and addng an Astro build process to it, then mapping a domain we own to the Netlify-hosted site.

View Transition List Reordering (with a Kick Flip) It's pretty straightforward to animate list items into new positions, but there is a few tricks when the specific one you've chosen to move needs a *different* transition.

View Transition List Reordering (with a Kick Flip)

It's pretty straightforward to animate list items into new positions, but there is a few tricks when the specific one you've chosen to move needs a *different* transition.

Satisfies in TypeScript The `satisfies` keyword allows you to assert that a certain value

Satisfies in TypeScript

The `satisfies` keyword allows you to assert that a certain value "satisfies" a given type, while preventing a wider type from being inferred.

Custom Select (that comes up from the bottom on mobile) You've got A LOT of control over the design of select menus now, and it can be done as a progressive enhancement.

Custom Select (that comes up from the bottom on mobile)

You've got A LOT of control over the design of select menus now, and it can be done as a progressive enhancement.

YouTube video by Frontend Masters Getting Started with CSS, v2 with Jen Kramer | Preview

My new @frontendmasters.com course "Getting Started with CSS v2," creates a single-page portfolio website with light and dark themes. Color themes are completely controlled through CSS via light-dark(), :has() selectors, and a switch.

Course: frontendmasters.com/courses/gett...

New courses list page on Frontend Masters

🚨 New courses list just dropped:
✅ Compact grid
✅ Hover for ratings & reviews
✅ Filter by topic & tech
frontendmasters.com/courses/
Check it out and tell us what you think!

Step Gradients with a Given Number of Steps A deep dive into producing an interpolated

Step Gradients with a Given Number of Steps

A deep dive into producing an interpolated "gradient" of colors from just two provided colors.

Step Gradients with a Given Number of Steps A deep dive into producing an interpolated

I wrote a new article for @frontendmasters.com: Step Gradients with a Given Number of Steps!

Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution frontendmasters.com/blog/step-gr...

Enjoy!

#CSS #SVG #filter

Quantity Query Carousel :has() makes quantities queries both easier and more powerful. We can alter how a grid is laid out and where the children go. Or, we can just blast it into a carousel.

Quantity Query Carousel

:has() makes quantities queries both easier and more powerful. We can alter how a grid is laid out and where the children go. Or, we can just blast it into a carousel.

✨ New article: Understanding CSS corner-shape and the Power of the Superellipse!

A deep dive into the new property, and a little dig into the math behind it, with lots of cool examples, but they only work on Chrome 139+.

🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/underst...

Understanding CSS corner-shape and the Power of the Superellipse The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.

Understanding CSS corner-shape and the Power of the Superellipse

The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.

Drawing CSS Shapes using corner-shape After you've got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.

Drawing CSS Shapes using corner-shape

After you've got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.

Scope in CSS We've got @scope in CSS now, and it's got it's uses. But the concept of scope in CSS is a wider idea.

Scope in CSS

We've got @scope in CSS now, and it's got it's uses. But the concept of scope in CSS is a wider idea.

hey Maciej, how are you doing? Last time We spoke you were job hunting Maciej K: I got a Spring job thanks to that Spring workshop! lullia S: Great! David C: wow! I am going to watch it then!

Coming soon. A Spring Boot course that gets you hired! @starbuxman.joshlong.com

Wow the content on @frontendmasters.com is really fantastic, speakers are engaging and the content quality is amazing.

What would be really cool is if I could define my own custom learning paths and add courses to it to keep track. Is this a feature that already exists and I'm missing it?

We're working on this very feature! For now, you can bookmark the courses you wish to take and then sort them in the order you would like to take them.

I have a new article out.

It's about a better technique to create grainy gradients, without the big problem that layering a noise layer brings: altering the original gradient palette (to a greater or lesser extent, depending on the approach used).

#CSS #SVG #filter

Grainy Gradients This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.

Grainy Gradients

This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.

1fr 1fr vs auto auto vs 50% 50% There are several different ways to do equal width columns. But some are, uh, more equal than others.

1fr 1fr vs auto auto vs 50% 50%

There are several different ways to do equal width columns. But some are, uh, more equal than others.

Scroll-Driven Letter Grid scroll-timelines go from 0 to 100. Many variable fonts axis have similar ranges, like 100 to 900. Surely that's begging for interplay.

Scroll-Driven Letter Grid

scroll-timelines go from 0 to 100. Many variable fonts axis have similar ranges, like 100 to 900. Surely that's begging for interplay.

firstChild can be white space Just a tiny gotcha.

firstChild can be white space

Just a tiny gotcha.

Max Firtman teaching the course demoing the app he builds during the course: ReelingIt, a movie DB app.

🟡 NEW COURSE OUT!

Build a high-performance full-stack app from scratch — no frameworks.
Vanilla JavaScript frontend + rock-solid Go backend with a JSON API.

Now on @frontendmasters.com

Get 10% OFF First month at firt.dev/vanillajs-go/