Frontend Masters
@frontendmasters.com
Master the Full Stack: Frontend to Backend → https://frontendmasters.com/?utm_source=bluesky&utm_medium=social_profile&utm_campaign=x_profile
Reposted by Frontend Masters
The quest to 1 million has been going slowly the past 2 years, but it looks like it'll finally happen!
February 12, 2026 at 1:23 PM
The quest to 1 million has been going slowly the past 2 years, but it looks like it'll finally happen!
“The CSS course I wish existed when I was learning.” @kevinpowell.co
Modern CSS Fundamentals is now live!
Box model, typography, Grid, Flexbox, responsive layouts, animations, forms, all grounded in understanding why CSS works the way it does.
frontendmasters.com/courses/css-...
Modern CSS Fundamentals is now live!
Box model, typography, Grid, Flexbox, responsive layouts, animations, forms, all grounded in understanding why CSS works the way it does.
frontendmasters.com/courses/css-...
Learn CSS & Responsive Design Fundamentals
Learn the essentials of typography, responsive grid layout, animations, and form styling. By the end, you'll have the foundation to dive into your next vanilla CSS codebase or use utility-first approa...
frontendmasters.com
February 11, 2026 at 4:23 PM
“The CSS course I wish existed when I was learning.” @kevinpowell.co
Modern CSS Fundamentals is now live!
Box model, typography, Grid, Flexbox, responsive layouts, animations, forms, all grounded in understanding why CSS works the way it does.
frontendmasters.com/courses/css-...
Modern CSS Fundamentals is now live!
Box model, typography, Grid, Flexbox, responsive layouts, animations, forms, all grounded in understanding why CSS works the way it does.
frontendmasters.com/courses/css-...
How to Create a CSS-only Elastic Text Effect
What can we say except BOINNNGGG BOINNGGGGGG.
What can we say except BOINNNGGG BOINNGGGGGG.
How to Create a CSS-only Elastic Text Effect
What can we say except BOINNNGGG BOINNGGGGGG.
frontendmasters.com
February 11, 2026 at 3:39 PM
How to Create a CSS-only Elastic Text Effect
What can we say except BOINNNGGG BOINNGGGGGG.
What can we say except BOINNNGGG BOINNGGGGGG.
Reposted by Frontend Masters
And if you're curious what it's like to make a workshop with @frontendmasters.com, I just put out part 1 in my behind the scenes vlog that I recorded while we made this one.
www.youtube.com/watch?v=N8DX...
www.youtube.com/watch?v=N8DX...
February 10, 2026 at 5:36 PM
And if you're curious what it's like to make a workshop with @frontendmasters.com, I just put out part 1 in my behind the scenes vlog that I recorded while we made this one.
www.youtube.com/watch?v=N8DX...
www.youtube.com/watch?v=N8DX...
Background Patterns with CSS `corner-radius`
You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.
You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.
Background Patterns with CSS `corner-radius`
You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.
frontendmasters.com
February 10, 2026 at 8:39 AM
Background Patterns with CSS `corner-radius`
You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.
You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.
Reposted by Frontend Masters
One thing you'd never know watching a @frontendmasters.com workshop or course is that they have an *amazing* view.
I'm putting the finishing touches on a behind the scenes of my experience making a workshop with them this past October... though this view might be the highlight 😅
I'm putting the finishing touches on a behind the scenes of my experience making a workshop with them this past October... though this view might be the highlight 😅
February 7, 2026 at 3:57 PM
One thing you'd never know watching a @frontendmasters.com workshop or course is that they have an *amazing* view.
I'm putting the finishing touches on a behind the scenes of my experience making a workshop with them this past October... though this view might be the highlight 😅
I'm putting the finishing touches on a behind the scenes of my experience making a workshop with them this past October... though this view might be the highlight 😅
The Browser Hates Surprises
To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.
To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.
The Browser Hates Surprises
To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.
frontendmasters.com
February 7, 2026 at 8:40 AM
The Browser Hates Surprises
To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.
To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.
An Over-The-Top Spoiler Design with the Details Element
details {
body:has(&[open]) {
/* so much power */
}
}
details {
body:has(&[open]) {
/* so much power */
}
}
An Over-The-Top Spoiler Design with the Details Element
details {
body:has(&[open]) {
/* so much power */
}
}
frontendmasters.com
February 5, 2026 at 8:39 AM
An Over-The-Top Spoiler Design with the Details Element
details {
body:has(&[open]) {
/* so much power */
}
}
details {
body:has(&[open]) {
/* so much power */
}
}
JavaScript: The Hard Parts v3 just dropped. 4.92 rating. Most loved course in our annual survey, year after year.
Will Sentance (founder of Codesmith, Oxford fellow) has the unique ability to build mental models for how JavaScript actually works
frontendmasters.com/courses/java...
Will Sentance (founder of Codesmith, Oxford fellow) has the unique ability to build mental models for how JavaScript actually works
frontendmasters.com/courses/java...
Closure, Async, and OOP: The Hard Parts of JavaScript
Build a rock-solid understanding of JavaScript paradigms that challenge even seasoned developers like closure, async code execution, prototypal inheritance, and OOP. Follow the thread of execution thr...
frontendmasters.com
February 4, 2026 at 5:43 PM
JavaScript: The Hard Parts v3 just dropped. 4.92 rating. Most loved course in our annual survey, year after year.
Will Sentance (founder of Codesmith, Oxford fellow) has the unique ability to build mental models for how JavaScript actually works
frontendmasters.com/courses/java...
Will Sentance (founder of Codesmith, Oxford fellow) has the unique ability to build mental models for how JavaScript actually works
frontendmasters.com/courses/java...
Performance-Optimized Video Embeds with Zero JavaScript
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
Performance-Optimized Video Embeds with Zero JavaScript
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
frontendmasters.com
February 3, 2026 at 8:39 AM
Performance-Optimized Video Embeds with Zero JavaScript
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
React’s ViewTransition Element
The Canary version of React has a special component for ViewTransitions. Does it help?
The Canary version of React has a special component for ViewTransitions. Does it help?
React’s ViewTransition Element
The Canary version of React has a special component for ViewTransitions. Does it help?
frontendmasters.com
January 31, 2026 at 8:39 AM
React’s ViewTransition Element
The Canary version of React has a special component for ViewTransitions. Does it help?
The Canary version of React has a special component for ViewTransitions. Does it help?
What Senior Engineers Need to Know About AI Coding Tools
> "The quality of the question directly relates to the quality of the answer," she says. "This shouldn't be surprising to us, right? This is the same thing with us as humans."
> "The quality of the question directly relates to the quality of the answer," she says. "This shouldn't be surprising to us, right? This is the same thing with us as humans."
What Senior Engineers Need to Know About AI Coding Tools
>
frontendmasters.com
January 29, 2026 at 3:39 PM
What Senior Engineers Need to Know About AI Coding Tools
> "The quality of the question directly relates to the quality of the answer," she says. "This shouldn't be surprising to us, right? This is the same thing with us as humans."
> "The quality of the question directly relates to the quality of the answer," she says. "This shouldn't be surprising to us, right? This is the same thing with us as humans."
What if you could build an AI agent that runs shell commands, searches the web, and asks your approval before doing anything risky?
That's what Scott Moss (Netflix) teaches in our new course.
👉 frontendmasters.com/courses/ai-a...
That's what Scott Moss (Netflix) teaches in our new course.
👉 frontendmasters.com/courses/ai-a...
AI Agents | LLMs, Tool Calling, and Human-in-the-Loop
Create a CLI agent with custom tool calling, evals, context window management, and a human-in-the-loop approval flow.
frontendmasters.com
January 28, 2026 at 4:24 PM
What if you could build an AI agent that runs shell commands, searches the web, and asks your approval before doing anything risky?
That's what Scott Moss (Netflix) teaches in our new course.
👉 frontendmasters.com/courses/ai-a...
That's what Scott Moss (Netflix) teaches in our new course.
👉 frontendmasters.com/courses/ai-a...
Single Flight Mutations in TanStack Start: Part 2
This post introduces a middleware approach that allows efficient data refetching. The middleware enables the attachment of query keys and server functions, enhancing scalability and flexibility.
This post introduces a middleware approach that allows efficient data refetching. The middleware enables the attachment of query keys and server functions, enhancing scalability and flexibility.
Single Flight Mutations in TanStack Start: Part 2
This post introduces a middleware approach that allows efficient data refetching. The middleware enables the attachment of query keys and server functions, enhancing scalability and flexibility.
frontendmasters.com
January 28, 2026 at 3:39 PM
Single Flight Mutations in TanStack Start: Part 2
This post introduces a middleware approach that allows efficient data refetching. The middleware enables the attachment of query keys and server functions, enhancing scalability and flexibility.
This post introduces a middleware approach that allows efficient data refetching. The middleware enables the attachment of query keys and server functions, enhancing scalability and flexibility.
Supporting Open Source in 2026: Why It Matters More Than Ever ($50,000)
> ... we need to be honest about what's happening: the infrastructure that powers modern software development is under financial strain, even as usage reaches all-time highs.
> ... we need to be honest about what's happening: the infrastructure that powers modern software development is under financial strain, even as usage reaches all-time highs.
Supporting Open Source in 2026: Why It Matters More Than Ever ($50,000)
> ... we need to be honest about what's happening: the infrastructure that powers modern software development is under financial strain, even as usage reaches all-time highs.
frontendmasters.com
January 27, 2026 at 8:39 AM
Supporting Open Source in 2026: Why It Matters More Than Ever ($50,000)
> ... we need to be honest about what's happening: the infrastructure that powers modern software development is under financial strain, even as usage reaches all-time highs.
> ... we need to be honest about what's happening: the infrastructure that powers modern software development is under financial strain, even as usage reaches all-time highs.
Single Flight Mutations in TanStack Start: Part 1
What if we could mutate data *and* get all the data back we need to properly update the UI in just one network round-trip?
What if we could mutate data *and* get all the data back we need to properly update the UI in just one network round-trip?
Single Flight Mutations in TanStack Start: Part 1
What if we could mutate data *and* get all the data back we need to properly update the UI in just one network round-trip?
frontendmasters.com
January 24, 2026 at 8:39 AM
Single Flight Mutations in TanStack Start: Part 1
What if we could mutate data *and* get all the data back we need to properly update the UI in just one network round-trip?
What if we could mutate data *and* get all the data back we need to properly update the UI in just one network round-trip?
View Transitions & Playing Video
Can you keep a video playing as a view transitions happens? Yes and no. Mostly yes.
Can you keep a video playing as a view transitions happens? Yes and no. Mostly yes.
View Transitions & Playing Video
Can you keep a video playing as a view transitions happens? Yes and no. Mostly yes.
frontendmasters.com
January 21, 2026 at 8:39 AM
View Transitions & Playing Video
Can you keep a video playing as a view transitions happens? Yes and no. Mostly yes.
Can you keep a video playing as a view transitions happens? Yes and no. Mostly yes.
The Missing Link for Web Components
If your project uses web components of your own making, you could be auto-generating a Custom Elements Manifest that can be ultra-helpful, like powering a VS Code language server.
If your project uses web components of your own making, you could be auto-generating a Custom Elements Manifest that can be ultra-helpful, like powering a VS Code language server.
The Missing Link for Web Components
If your project uses web components of your own making, you could be auto-generating a Custom Elements Manifest that can be ultra-helpful, like powering a VS Code language server.
frontendmasters.com
January 16, 2026 at 8:39 AM
The Missing Link for Web Components
If your project uses web components of your own making, you could be auto-generating a Custom Elements Manifest that can be ultra-helpful, like powering a VS Code language server.
If your project uses web components of your own making, you could be auto-generating a Custom Elements Manifest that can be ultra-helpful, like powering a VS Code language server.
Simulating Crop Marks
Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on the web too, just for kicks.
Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on the web too, just for kicks.
Simulating Crop Marks
Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on...
frontendmasters.com
January 14, 2026 at 8:39 AM
Simulating Crop Marks
Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on the web too, just for kicks.
Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on the web too, just for kicks.
Beyond the Mouse: Animating with Mobile Accelerometers
Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let's bring it to mobile and use the phone itself rather than a cursor.
Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let's bring it to mobile and use the phone itself rather than a cursor.
Beyond the Mouse: Animating with Mobile Accelerometers
Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let's bring it to mobile and use the phone itself rather than a cursor.
frontendmasters.com
January 9, 2026 at 3:39 PM
Beyond the Mouse: Animating with Mobile Accelerometers
Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let's bring it to mobile and use the phone itself rather than a cursor.
Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let's bring it to mobile and use the phone itself rather than a cursor.
Popover Context Menus with Anchor Positioning
A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn't get cut off.
A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn't get cut off.
Popover Context Menus with Anchor Positioning
A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn't get cut off.
frontendmasters.com
January 9, 2026 at 8:39 AM
Popover Context Menus with Anchor Positioning
A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn't get cut off.
A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn't get cut off.
Great code can’t save a poorly designed system.
Unclear requirements and hidden complexity compound until production breaks.
Jem Young (@jemyoung.com) Engineering Leader at Netflix, teaches how to design backend systems that scale by design!
👉 frontendmasters.com/courses/back...
Unclear requirements and hidden complexity compound until production breaks.
Jem Young (@jemyoung.com) Engineering Leader at Netflix, teaches how to design backend systems that scale by design!
👉 frontendmasters.com/courses/back...
Design Complex Backend Distributed Systems
Everything is a System! Grab your favorite diagramming tool and develop the system-thinking skills to solve complex distributed system design challenges related to scaling, data storage, reliability, ...
frontendmasters.com
January 7, 2026 at 5:05 PM
Great code can’t save a poorly designed system.
Unclear requirements and hidden complexity compound until production breaks.
Jem Young (@jemyoung.com) Engineering Leader at Netflix, teaches how to design backend systems that scale by design!
👉 frontendmasters.com/courses/back...
Unclear requirements and hidden complexity compound until production breaks.
Jem Young (@jemyoung.com) Engineering Leader at Netflix, teaches how to design backend systems that scale by design!
👉 frontendmasters.com/courses/back...
How to @scope CSS Now That It’s Baseline
There is a way to declare a scope on a specific selector, a specific selector *down to* another selector, or with no
There is a way to declare a scope on a specific selector, a specific selector *down to* another selector, or with no
How to @scope CSS Now That It’s Baseline
There is a way to declare a scope on a specific selector, a specific selector *down to* another selector, or with no
frontendmasters.com
January 6, 2026 at 8:39 AM
How to @scope CSS Now That It’s Baseline
There is a way to declare a scope on a specific selector, a specific selector *down to* another selector, or with no
There is a way to declare a scope on a specific selector, a specific selector *down to* another selector, or with no
!important and CSS Custom Properties
The `!important` part doesn't become part of the value, the whole declaration is treated as !important;
The `!important` part doesn't become part of the value, the whole declaration is treated as !important;
!important and CSS Custom Properties
The `!important` part doesn't become part of the value, the whole declaration is treated as !important;
frontendmasters.com
January 2, 2026 at 8:39 AM
!important and CSS Custom Properties
The `!important` part doesn't become part of the value, the whole declaration is treated as !important;
The `!important` part doesn't become part of the value, the whole declaration is treated as !important;
How I Write Custom Elements with lit-html
You can use a smaller part of Lit to build web web components that still take advantage of some of it's best features, particularly if you're cool with Light DOM.
You can use a smaller part of Lit to build web web components that still take advantage of some of it's best features, particularly if you're cool with Light DOM.
How I Write Custom Elements with lit-html
You can use a smaller part of Lit to build web web components that still take advantage of some of it's best features, particularly if you're cool with Light DOM.
frontendmasters.com
December 29, 2025 at 3:39 PM
How I Write Custom Elements with lit-html
You can use a smaller part of Lit to build web web components that still take advantage of some of it's best features, particularly if you're cool with Light DOM.
You can use a smaller part of Lit to build web web components that still take advantage of some of it's best features, particularly if you're cool with Light DOM.