Master.dev (Formerly Frontend Masters)

What should you put on a dynamic custom social media card image? There is technology to dynamically create custom social media cards (like this one!) — but what you put on it really depends.

Building an Isolated Preview for AI-Generated HTML An iframe with srcdoc feels like a safe place to render HTML a model wrote. It isn't. Three tests show how the preview can read your page, escape the frame, and phone home, and four layers of protection close each hole.

Structured Output with TanStack AI Part 2 of this intro to TanStack AI covers structured output: constraining the model's response to a Zod schema, then streaming that JSON in and rendering it while it's still incomplete.

Unlocking AI in Your Apps with TanStack AI TanStack AI is a strongly typed set of libraries for adding AI features to your apps. Part 1 of this intro covers basic setup and prompting, streaming responses, persisting threads to your database, and resuming a response after a mid-stream refresh.

SVG “Linked Parameters” Will Change How We Do Icon Systems Maybe we can get back to an img-based icon system?

Building a Fancy Scrollspy Using Modern CSS Scrollspy navigation used to mean IntersectionObserver and a pile of JavaScript. With scroll-target-group, :target-current, and a little anchor positioning, a plain list of anchor links can highlight the current section all on its own.

Tips and Tricks for Using TanStack Start with Cloudflare Durable Objects Some hot tips on using middleware for simplifying Durable Object creation and managing WebSocket connections.

5 Good Choices for HTML Containers Divs and spans are fine, but purposefully meaningless. Often the meaning actually matters, so let's look at some of those situations.

Testing an iframe’s postMessage Handler There are some real complexities using iframes and the postMessage API for communication between a widget and its parent. Security vulnerabilities like cross-origin scripting risks being one.

Transferring sibling-count() to a Parent Element You can tell a parent element how many children it has with... scroll-driven animations??

Fallbacks for CSS `progress()` The new CSS progress() function calculates a value between 0 and 1, representing its position within a defined range. While awaiting broader browser support, users can manually implement this using other methods.

You Don’t Know Bidi (And Neither Does ChatGPT) Text that is set in a left-to-right *and* right-to-left language, mid-sentence, is a thing. Getting it right means understanding it, because your LLM isn't going to know.

We have a fun workshop starting in 30 minutes! Build an incident-response agent that investigates a simulated service, takes action, waits for human approval, and resumes after failures. Join us on the stream! 👉 master.dev/workshops/ba...

Making the Most of Vercel’s AI SDK with Cloudflare Durable Objects Let's integrate Vercel's AI SDK with Cloudflare's Durable Objects to improve user experience in a fitness tracker application.

Randomly Place an Element Along Edge of Another Element We can animate an element along the border edge of another element to random positions... pretty easily? Might as well be a cute dog.

Running a local model in LM Studio? Here's how to use it from Pi. master.dev/courses/loca...

Introducing Solo A versatile tool for managing coding projects, integrating multiple terminals and AI agents within a single control panel.

Our 2026 Master.dev Developer Survey results are here! 52% senior developers. 72% building with Claude Code. Swipe for the full breakdown: 🌍 Top countries 😎 Popular courses 📊 Experience, level 🏆 Learning goals 🤖 How you're building with AI ⏭️ What's next

Dark Mode Very Much Matters To Me It's not just vibes, it's an accessibility thing.

Attend our live, interactive workshops taught by engineers shipping real software at Anthropic, OpenAI, Netflix, GitHub, and Spotify. Included with your membership. See the full schedule and RSVP: master.dev/workshops/?u...

Custom Glow Rings Inside of Elements A box-shadow is an obvious choice for an inner glow of an element to highlight it. But with some fancy masking, we can use any overlay style we want.

We just released a new Learning Assistant, built right into our player. It's built on our teachers' real-world expertise and is there to summarize the key points in a lesson, unblock yourself in the code, or get clarification in the language you prefer. Give it a try → master.dev?utm_source=b...

Extracting Grid Information Using CSS It's an interesting and potentially useful trick to have an element know where it is on a grid. That's tricky enough when the items are in one row/column, but what about when they span?

We've expanded our AI learning paths: 💻 Coding with AI: fundamentals + workflows with Codex, Claude Code & local models 🏗️ AI Engineering: build reliable, production-ready systems: agents, MCP, evals, orchestration master.dev/learn/?utm_s...

Comparing Values With CSS progress() The new CSS progress() function maps a given value to a range. Super useful for responsive layouts, responsive typography, and fun tricks.

It’s All About The Permissions Recovery Users who deny permissions can recover them by adjusting settings, although many may not realize this.

Building a Reliable PostgreSQL Queue: Concurrency, Crashes, Retries, and Scale We get into building a background task processor using PostgreSQL. It seems easy at first, but there are lots of pitfalls as a system like this scales.

Custom Scrollbar Component In 2026 Thanks to some very modern CSS, we can visually replicate the logic of scrollbars. Then make them actually functional.

React Now Rusted All The Way Out The transition to the Rust version of the React Compiler for the 1,036-file React Router codebase resulted in a significant speed increase, improving build times from 14.3 seconds to 0.81 seconds. The new compiler addresses previous limitations and e

Wrote about what's up in angle brackets land.

New Things You Should Know About HTML Here in Mid 2026 The foundational language of the web is getting plenty of love lately! While HTML moves a bit more slowly than its buddies, CSS and JavaScript, that tends to be a good thing. I'm not gonna do, like, in here. That's too basic for you. Tha

Having Fun with Vercel’s AI SDK and AI Gateway The why and how to get it installed and use it with different models, then actually build something. Plus a little Zod type safety for good measure.

Background Image Refraction in CSS "Liquid glass" design is helped along by offsetting/scaling the background as if you're looking through real glass. But that gets tricky with arbitrary CSS background positioning.

Learn Svelte and SvelteKit* from none less than @rich-harris.dev - @frontendmasters.com (now masters.dev) just released the brand new video course: master.dev/courses/svel... * don‘t be misled by the title / URL, the course is pretty much SvelteKit v3-based

Hover Proximity Using Modern CSS You can always easily style :hover, but what if you want the NEXT item to have styling too? Or, just a smidge harder, the PREVIOUS item. How about multiple in any direction?

🚨 Laravel Fundamentals is happening right now! Join Leah Thompson from the Laravel Team live now through 4:30pm CDT, building a fullstack app with React & Inertia.js. We'll cover routing, auth, background jobs, & will ship a real app by end of day. Still time to join: master.dev/workshops/la...

Introducing Sandcastle "Let's say you have 4 issues that can be implemented simultaneously..."

Laravel Fundamentals is next week! 🚀 Join Leah Thompson from the Laravel Team on Aug 25, 9:30am-4:30pm CDT, building a fullstack app with React & Inertia.js. Learn routing, auth, background jobs & more. Ship a real app by end of day. RSVP: master.dev/workshops/la...

⏰ Starting in 1 hour! Codex for Backend Engineers with Spencer Schneidenbach kicks off at 9:30am CDT today. APIs, data models, migrations, debugging, safe refactors: AI-native workflows for real production systems. 📺 Watch Now → master.dev/workshops/ad...

Getting Started With Local AI kicks off tomorrow, Aug 18 at 9:30am CDT! Learn to run AI models on your own hardware with LM Studio, guided by Web Dev Simplified. RSVP: master.dev/workshops/lo...

Starting soon! Agentic Frontend Development with OpenAI Codex Tue, Aug 11, 2026 | 9:30 AM to 4:30 PM CDT Join this hands on workshop on using Codex as a real frontend partner, from idea to polished UI. Taught by Katia Gil Guzman from OpenAI. There’s still time to join! master.dev/workshops/co...

"We have backups" doesn't mean what most teams think it means. Jem Young breaks down the exact mistake that turns a ransomware attack or cloud outage into a total data wipeout, and why most companies don't catch it until it's too late. From our Backend System Design course.

Free Codex workshop from the OpenAI team next week 🚀 Tue, Aug 11 | 9:30 AM–4:30 PM CDT Learn to use Codex as a true frontend partner: sketch to working UI, plus prompting, debugging, and iterating like a senior engineer. Taught by Katia Gil Guzman (OpenAI). RSVP: master.dev/workshops/co...

Starting Today: Build with AI Bootcamp 🤖 🥾 ⛺ Mon-Fri, July 20-24 | 9:30 AM to 4:30 PM CDT Join Brandon Middleton (Replit) and Brian Holt (Microsoft) for a FREE 5 day bootcamp. Go from zero experience to building and deploying projects with AI. RSVP: master.dev/workshops/vi...

RSVP for our free 5-day AI Building Bootcamp with @brmiddle and @holtbt. Zero coding background needed, just bring an idea. You'll walk away with a real deployed app and the fundamentals to keep building. Starts July 20th: master.dev/workshops/vi...

🚨 LIVE tomorrow at 9:30 AM CDT! Harness Engineering & Agent Orchestration with Scott Moss from Netflix. Agent harness → durable execution → sandboxing → memory → multi-agent orchestration → HITL. RSVP 👉 master.dev/workshops/ha...

Join us tomorrow at 9:30 AM CDT for a LIVE workshop with Rich Harris, the creator of Svelte! Spend a full day learning Svelte and SvelteKit straight from the source. RSVP 👉 master.dev/workshops/sv...

🚨 SVELTEKIT 3 WORKSHOP KLAXON 🚨 this thursday I'll be at @frontendmasters.com talking through all the new stuff. join us! you can also find it in the Events channel of svelte.dev/chat master.dev/workshops/sv...

Is your agent great for demos but not production ready? Join us on June 12th, as Scott Moss (senior engineer at Netflix) teaches you the infrastructure layer that fixes that: durable execution, sandboxing, multi-agent orchestration, HITL, and more! 👉 master.dev/workshops/ha...

Join us tomorrow LIVE at 9:30 AM CDT! Kubernetes from zero to EKS in two days. Local kind cluster → declarative manifests → autoscaling → GitOps with Argo CD. RSVP → master.dev/workshops/ku...