53:I[641815,["/_next/static/immutable/chunks/0d0inunyp-zwq.js","/_next/static/immutable/chunks/16vw-h-i4usng.js","/_next/static/immutable/chunks/3dc8anz5--q1w.js","/_next/static/immutable/chunks/3czibijl5lj74.js","/_next/static/immutable/chunks/43xmj4ii3f9ne.js","/_next/static/immutable/chunks/14uk5wz9a2pxr.js","/_next/static/immutable/chunks/191kn3mqh_30e.js","/_next/static/immutable/chunks/2j3dw4s7z5wob.js","/_next/static/immutable/chunks/3txe0joif93zp.js","/_next/static/immutable/chunks/0tl29vg7ktqu8.js","/_next/static/immutable/chunks/1tv8if6b_vyoa.js","/_next/static/immutable/chunks/0g73nyptz7r-z.js","/_next/static/immutable/chunks/12ho6o211wtc3.js","/_next/static/immutable/chunks/0ood5ko3ez57v.js","/_next/static/immutable/chunks/1seu7rekbu_a9.js","/_next/static/immutable/chunks/2dny6htvs67m_.js","/_next/static/immutable/chunks/2p_phd0ha026t.js","/_next/static/immutable/chunks/1esrje34lwjxh.js","/_next/static/immutable/chunks/3gsmcj9uqqm8_.js","/_next/static/immutable/chunks/3yl3ljyzgye6h.js","/_next/static/immutable/chunks/0i_tam0d0e_lu.js","/_next/static/immutable/chunks/1ov-hirp-ibwv.js","/_next/static/immutable/chunks/43nsotkrbwkgc.js","/_next/static/immutable/chunks/11fwha0ikyv-6.js","/_next/static/immutable/chunks/3sr8of28bmf6k.js","/_next/static/immutable/chunks/1hd7qc82j2hgu.js","/_next/static/immutable/chunks/1tmwsmnqhoh_4.js","/_next/static/immutable/chunks/2fzvz9cmuhbjo.js","/_next/static/immutable/chunks/0t3q2l527cq1e.js","/_next/static/immutable/chunks/0ydq7gxsp_yg6.js","/_next/static/immutable/chunks/4377kvat7ayqf.js","/_next/static/immutable/chunks/05tnn4vqz7vom.js","/_next/static/immutable/chunks/18mkaf75b33z_.js","/_next/static/immutable/chunks/0ju8equvfxcxt.js"],"FlowEmailStage"] 54:T1788a,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Here’s what matters this month in front-end to full-stack."}

{"\n "}

{"Hi John,"}

{"\n"}

{"Welcome to "}{"Frontend to Fullstack Monthly #36"}{"! Here is your curated roundup of the most important news, releases, and learning resources from across the web for April, all chosen to be worth your time."}

{"Industry News"}

{"\n"}

{"March ended dramatically for JavaScript developers with "}{"the popular "}{"axios"}{" package being compromised"}{" — malicious versions were shipping a remote access trojan."}

{"\n"}

{"The Node.js community has been "}{"wrestling with AI-produced code contributions"}{", and a petition is now calling for a ban on AI-generated code in Node core."}

{"\n"}

{"Chrome is moving to a two-week stable release cycle"}{" starting in September. On the Safari side, "}{"Safari 26.4"}{" brings CSS Grid Lanes (formerly Masonry), anchor positioning refinements, and math function support in "}{""}{" elements."}

{"\n"}

{"TypeScript 6.0 has landed"}{", bridging toward the upcoming Go-powered version 7.0."}

{"\n"}

{"Popular SSG Eleventy "}{"rebranded as 'Build Awesome'"}{" under the Font Awesome umbrella, though "}{"the move hasn't been universally welcomed"}{" by the community."}

{"\n"}

{"After nine years of work, JavaScript now has a proper date/time system "}{"thanks to the Temporal API"}{"."}

{"\n"}

{"✨ "}{"Recent releases"}{": "}{"Vite 8.0"}{" (shipping with Rolldown), "}{"Astro 6.1"}{", "}{"Next.js 16.2"}{", "}{"Electron 41.0"}{", "}{"Solid 2.0 Beta"}{", "}{"Nuxt 4.4"}{", "}{"Expo SDK 55"}{", "}{"Storybook 10.3"}{", and "}{"AdonisJS v7"}{"."}

{"\n"}

{"Tutorials and Articles"}

{"\n"}

{"In a world of increasing agent-produced code, how do we actually understand what we're shipping? Addy Osmani has "}{"coined the term 'comprehension debt'"}{" to frame the problem."}

{"\n"}

{"Sophie Wang published "}{"a beautifully detailed breakdown of JPEG compression"}{", walking through how the format exploits the biases of human vision to achieve its results."}

{"\n"}

{"Patreon has been on "}{"a seven-year journey to migrate a million lines of JavaScript"}{" to TypeScript."}

{"\n"}

{"Pavel Laptev explores "}{"the 'great CSS expansion'"}{" — how modern CSS can now replace features we once relied on JavaScript for, and where the gaps remain."}

{"\n"}

{"Shubham Bose loaded a single New York Times article and found it triggered "}{"422"}{" network requests and 49 megabytes of data"}{". A sobering audit of what ad-tech does to the modern web."}

{"\n"}

{"James Garbutt identifies "}{"three pillars of JavaScript bloat"}{": needless ES3-era compat packages, micro-libraries with a single consumer, and ponyfills for APIs that shipped years ago."}

{"\n"}

{"New on Frontend Masters"}

{"\n"}

{"\n "}{"Enterprise UI Development: Microfrontends, Testing, & Code Quality"}{" with Steve Kinney"}
{"\n Architect large, successful frontend systems. From monoliths to microfrontends to monorepos, learn best practices for maintaining complex codebases while shipping high-quality software.\n "}
{"\n "}{"Permission Systems that Scale"}{" with Kyle Cook from WebDevSimplified"}
{"\n Build a production-ready permission system from the ground up. Migrate from Role-Based Access Control (RBAC) to a robust Attribute-Based Access Control (ABAC) system and gain the skills to architect secure, scalable applications.\n "}

{"\n"}

{"We have 20+ "}{"workshops"}{" scheduled through 2026 with engineers from Anthropic, Netflix, Spotify, Vercel, and more teaching live. April is our biggest month yet — headlined by a "}{"free Claude Code workshop"}{" taught by Lydia Hallie from the Anthropic team, plus full-day sessions on "}{"AI Engineering next Monday with Scott Moss"}{", Svelte 5, AWS, and GitHub Actions."}

{"\n"}

{"Blog Updates"}

{"\n"}

{"On the Frontend Masters blog, we're always drawn to posts about real-world work — and Rob Levin delivered exactly that with a series on rewriting his entire cross-framework component library with Lit. He started with "}{"a post mortem on the conversion process"}{". We then broke out "}{"Form-Associated Custom Elements"}{" into its own piece — there's just too much to say on that topic to fold into the first post. Then the first comment on "}{"that"}{" article sent Rob down a rabbit hole, resulting in a third post on "}{"delegatesFocus"}{" in the Shadow DOM"}{". Love seeing that kind of community embetterment."}

{"\n"}

{"Publishing publicly has its surprises too. A post on "}{"a tricky new CSS anchor positioning edge case"}{" landed in front of the right people — "}{"the CSS Working Group is now taking another look at it"}{". Ibrahim Bendebka dug into "}{"a specific flexbox layout where items retain their aspect ratios"}{", adding to "}{"over a decade of community thinking"}{" on the problem."}

{"\n"}

{"A few more things worth your time: browsers are starting to ship a "}{""}{" element, and it's "}{"more useful than you might expect"}{". There are "}{"real reasons to reach for Bun or Deno over Node"}{" depending on the job. AIM (Anchor Interpolated Morph) is a great pattern for "}{"animating elements between anchors — here's a clean image gallery example"}{". And if you're doing technical interviews, "}{"this piece"}{" is worth a read."}

{"Useful Projects"}

{"\n"}

{"Wasmer has introduced "}{"Edge.js"}{", an alpha runtime that runs Node apps inside a WebAssembly sandbox."}

{"\n"}

{"A new 2.0 version of "}{"CodePen"}{" is in private beta — a complete rewrite with a new file system, tabbed views, and more. Cassidy Williams "}{"took it for a spin on video"}{"."}

{"\n"}

{"Detail"}{" is a curated collection of small UX details that make a big difference, covering design, typography, motion, and accessibility."}

{"\n"}

{"BaseWatch"}{" tracks which Baseline web platform features have landed across browsers."}

{"\n"}

{"Defuddle"}{" extracts the main content of any web page as clean Markdown."}

{"\n"}

{"...and finally"}

{"\n"}

{"Keith Cirkel built a game that tests "}{"your 'Just Noticeable Difference'"}{" for color — 40 rounds of spotting increasingly subtle variations. Harder than you'd expect."}

{"\n"}

{"gh-space-shooter"}{" turns your GitHub contribution graph into a Space Invaders-style game and generates a GIF of your green squares."}

{"\n"}

{"Someone has recreated "}{"Flappy Bird using only HTML and CSS"}{" — no JavaScript at all."}

{"Have something we should feature next month? Reply and send it our way."}

{"\n"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO & UI Developer"}
{"\nFrontend Masters"}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"You received this email because you signed up for Frontend Masters and care about advancing your development skills. If you're no longer interested in updates, you can "}{"update your preferences"}{" or "}{"unsubscribe"}{"."}
{"\n"}
{"\n"}{"Your friends: "}{"Frontend Masters, 60 South 6th St, Minneapolis MN 55402"}

{"\n "}

{"\n "}{"\n "}{"\n "}55:T16f88,

Hi John,

Welcome to Frontend to Fullstack Monthly #36! Here is your curated roundup of the most important news, releases, and learning resources from across the web for April, all chosen to be worth your time.

Industry News

March ended dramatically for JavaScript developers with the popular axios package being compromised — malicious versions were shipping a remote access trojan.

The Node.js community has been wrestling with AI-produced code contributions, and a petition is now calling for a ban on AI-generated code in Node core.

Chrome is moving to a two-week stable release cycle starting in September. On the Safari side, Safari 26.4 brings CSS Grid Lanes (formerly Masonry), anchor positioning refinements, and math function support in <img> elements.

TypeScript 6.0 has landed, bridging toward the upcoming Go-powered version 7.0.

Popular SSG Eleventy rebranded as 'Build Awesome' under the Font Awesome umbrella, though the move hasn't been universally welcomed by the community.

After nine years of work, JavaScript now has a proper date/time system thanks to the Temporal API.

✨ Recent releases: Vite 8.0 (shipping with Rolldown), Astro 6.1, Next.js 16.2, Electron 41.0, Solid 2.0 Beta, Nuxt 4.4, Expo SDK 55, Storybook 10.3, and AdonisJS v7.

Tutorials and Articles

In a world of increasing agent-produced code, how do we actually understand what we're shipping? Addy Osmani has coined the term 'comprehension debt' to frame the problem.

Sophie Wang published a beautifully detailed breakdown of JPEG compression, walking through how the format exploits the biases of human vision to achieve its results.

Patreon has been on a seven-year journey to migrate a million lines of JavaScript to TypeScript.

Pavel Laptev explores the 'great CSS expansion' — how modern CSS can now replace features we once relied on JavaScript for, and where the gaps remain.

Shubham Bose loaded a single New York Times article and found it triggered 422 network requests and 49 megabytes of data. A sobering audit of what ad-tech does to the modern web.

James Garbutt identifies three pillars of JavaScript bloat: needless ES3-era compat packages, micro-libraries with a single consumer, and ponyfills for APIs that shipped years ago.

New on Frontend Masters

Enterprise UI Development: Microfrontends, Testing, & Code Quality with Steve Kinney
Architect large, successful frontend systems. From monoliths to microfrontends to monorepos, learn best practices for maintaining complex codebases while shipping high-quality software.
Permission Systems that Scale with Kyle Cook from WebDevSimplified
Build a production-ready permission system from the ground up. Migrate from Role-Based Access Control (RBAC) to a robust Attribute-Based Access Control (ABAC) system and gain the skills to architect secure, scalable applications.

We have 20+ workshops scheduled through 2026 with engineers from Anthropic, Netflix, Spotify, Vercel, and more teaching live. April is our biggest month yet — headlined by a free Claude Code workshop taught by Lydia Hallie from the Anthropic team, plus full-day sessions on AI Engineering next Monday with Scott Moss, Svelte 5, AWS, and GitHub Actions.

Blog Updates

On the Frontend Masters blog, we're always drawn to posts about real-world work — and Rob Levin delivered exactly that with a series on rewriting his entire cross-framework component library with Lit. He started with a post mortem on the conversion process. We then broke out Form-Associated Custom Elements into its own piece — there's just too much to say on that topic to fold into the first post. Then the first comment on that article sent Rob down a rabbit hole, resulting in a third post on delegatesFocus in the Shadow DOM. Love seeing that kind of community embetterment.

Publishing publicly has its surprises too. A post on a tricky new CSS anchor positioning edge case landed in front of the right people — the CSS Working Group is now taking another look at it. Ibrahim Bendebka dug into a specific flexbox layout where items retain their aspect ratios, adding to over a decade of community thinking on the problem.

A few more things worth your time: browsers are starting to ship a <geolocation> element, and it's more useful than you might expect. There are real reasons to reach for Bun or Deno over Node depending on the job. AIM (Anchor Interpolated Morph) is a great pattern for animating elements between anchors — here's a clean image gallery example. And if you're doing technical interviews, this piece is worth a read.

Useful Projects

Wasmer has introduced Edge.js, an alpha runtime that runs Node apps inside a WebAssembly sandbox.

A new 2.0 version of CodePen is in private beta — a complete rewrite with a new file system, tabbed views, and more. Cassidy Williams took it for a spin on video.

Detail is a curated collection of small UX details that make a big difference, covering design, typography, motion, and accessibility.

BaseWatch tracks which Baseline web platform features have landed across browsers.

Defuddle extracts the main content of any web page as clean Markdown.

...and finally

Keith Cirkel built a game that tests your 'Just Noticeable Difference' for color — 40 rounds of spotting increasingly subtle variations. Harder than you'd expect.

gh-space-shooter turns your GitHub contribution graph into a Space Invaders-style game and generates a GIF of your green squares.

Someone has recreated Flappy Bird using only HTML and CSS — no JavaScript at all.

Have something we should feature next month? Reply and send it our way.

--
Marc Grabanski
CEO & UI Developer
Frontend Masters

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

You received this email because you signed up for Frontend Masters and care about advancing your development skills. If you're no longer interested in updates, you can update your preferences or unsubscribe.

Your friends: Frontend Masters, 60 South 6th St, Minneapolis MN 55402

56:T35cd,{"\n "}{"\n "}{"\n "}{"\n "}{"\n "}{"\n"}{"\n"}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n \n "}

{"\n "}

{"\n\n "}

{"\n Get 30% off your first month when you upgrade! "}{"Start Learning →"}{"\n "}

{"\n\n "}

{"\n "}

{"Hi John,"}

{"\n "}

{"Most developers don't struggle with effort."}

{"\n "}

{"They struggle with "}{"what moves their career forward."}

{"\n "}

{"Frontend Masters members focus on skills that matter at senior levels:"}

{"\n "}

{"Architecture & system design"}
{"Performance & scalability"}
{"Advanced JavaScript & frameworks"}
{"AI-assisted development"}
{"Production-grade tooling"}

{"\n\n "}

{"This is the knowledge developers use to:"}

{"\n "}

{"→"}{" get promoted"}
{"→"}{" switch roles"}
{"→"}{" increase compensation"}
{"→"}{" lead projects"}

{"\n\n "}

{"If that's where you want to go, a Frontend Masters membership is built for that journey."}

{"\n "}

{"\n\n "}

{"\n "}

{"Invest in your growth — 30% off your first month"}

{"\n "}

{"\n "}{"Start Learning →"}{"\n "}

{"\n "}

{"\n\n "}

{"\n Let us know if you have any thoughts or questions by emailing us at"}
{"\n "}{"support@frontendmasters.com"}{" anytime\n "}

{"\n "}

{"\n\n "}

{"\n "}

{"\n "}{"Your friends:"}{" Frontend Masters, 60 South 6th St, Minneapolis MN 55402\n "}

{"\n "}

{"\n You received this email because you signed up for Frontend Masters. If you're no longer interested, you can \n "}{"unsubscribe"}{".\n "}

{"\n "}

{"\n\n "}

{"\n "}{"\n "}

{"\n"}{"\n"}57:T33c8,

Get 30% off your first month when you upgrade! Start Learning →

Hi John,

Most developers don't struggle with effort.

They struggle with what moves their career forward.

Frontend Masters members focus on skills that matter at senior levels:

Architecture & system design
Performance & scalability
Advanced JavaScript & frameworks
AI-assisted development
Production-grade tooling

This is the knowledge developers use to:

→ get promoted
→ switch roles
→ increase compensation
→ lead projects

If that's where you want to go, a Frontend Masters membership is built for that journey.

Invest in your growth — 30% off your first month

Start Learning →

Let us know if you have any thoughts or questions by emailing us at
support@frontendmasters.com anytime

Your friends: Frontend Masters, 60 South 6th St, Minneapolis MN 55402

You received this email because you signed up for Frontend Masters. If you're no longer interested, you can unsubscribe.

58:T9281,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Steve Kinney shares the frameworks he's used across Twilio, SendGrid, and Temporal."}

{"\n "}

{"Hi John,"}

{"\n"}

{"We just dropped a new course, and this one is for the engineers holding large frontend systems together. At some point, every frontend codebase becomes someone else’s problem. This course helps make sure it never becomes yours. 😁"}

{"\n"}

{"\nThe decisions you make around architecture, tooling, and team structure compound fast as your apps grow. Steve Kinney has navigated these trade-offs in large frontend systems at Twilio/SendGrid and Temporal, and in this course he gives you the frameworks to make the right calls before they become costly ones."}

{"Enterprise UI Dev: Microfrontends, Testing, & Code Quality"}

{"Architect large, successful frontend systems. From monoliths to microfrontends to monorepos, learn best practices for maintaining complex codebases while shipping high-quality software."}

{"\n \n "}

Steve Kinney teaching his new Enterprise UI dev course

{"What you'll walk away with:"}

{"\n"}

{"The best teams treat architecture as a series of trade-offs, starting simple and only reaching for complexity when they truly need it."}
{"Learn how microfrontends work in practice, using module federation and runtime composition to let teams ship independently."}
{"Tools like Turborepo rebuild only what changes, keeping CI/CD fast as your monorepo grows."}
{"Large TypeScript projects get slow fast. Project references and scoped configs help keep things manageable."}
{"Without automated checks, quality degrades quietly. ESLint rules, performance budgets, and monitoring catch problems before users do."}

{"Great teams don't just ship fast. They build systems that let everyone ship fast. "}{"https://frontendmasters.com/courses/enterprise-ui-dev-v2/"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO & UI Developer"}
{"\nFrontend Masters"}

{"\n"}

{"P.S. Today is also the live workshop on "}{"AI Engineering Fundamentals"}{" with Scott Moss from Netflix! Hope to see you in the stream."}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"\n "}{"\n "}{"\n "}59:T8af5,

Hi John,

We just dropped a new course, and this one is for the engineers holding large frontend systems together. At some point, every frontend codebase becomes someone else’s problem. This course helps make sure it never becomes yours. 😁

The decisions you make around architecture, tooling, and team structure compound fast as your apps grow. Steve Kinney has navigated these trade-offs in large frontend systems at Twilio/SendGrid and Temporal, and in this course he gives you the frameworks to make the right calls before they become costly ones.

Enterprise UI Dev: Microfrontends, Testing, & Code Quality

Architect large, successful frontend systems. From monoliths to microfrontends to monorepos, learn best practices for maintaining complex codebases while shipping high-quality software.

What you'll walk away with:

The best teams treat architecture as a series of trade-offs, starting simple and only reaching for complexity when they truly need it.
Learn how microfrontends work in practice, using module federation and runtime composition to let teams ship independently.
Tools like Turborepo rebuild only what changes, keeping CI/CD fast as your monorepo grows.
Large TypeScript projects get slow fast. Project references and scoped configs help keep things manageable.
Without automated checks, quality degrades quietly. ESLint rules, performance budgets, and monitoring catch problems before users do.

Great teams don't just ship fast. They build systems that let everyone ship fast. https://frontendmasters.com/courses/enterprise-ui-dev-v2/

--
Marc Grabanski
CEO & UI Developer
Frontend Masters

P.S. Today is also the live workshop on AI Engineering Fundamentals with Scott Moss from Netflix! Hope to see you in the stream.

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

5a:T324f,{"\n "}{"\n "}{"\n "}{"\n "}{"\n "}{"\n"}{"\n"}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n \n "}

{"\n "}

{"\n\n "}

{"\n Get 30% off your first month when you upgrade! "}{"Unlock Full Access →"}{"\n "}

{"\n\n "}

{"\n "}

{"Hey John,"}

{"\n "}

{"Your progress deserves to be visible. Every course you complete and every skill you build moves you forward—make sure it counts."}

{"\n "}

{"With Frontend Masters membership you get:"}

{"\n \n "}

{"A public developer profile"}

{"\n"}

{"Courses completed"}
{"Skills demonstrated"}
{"Learning streaks"}
{"Shareable proof of growth"}

{"\n\n "}

{"Plus "}{"completion certificates"}{" for every course you finish — professionally designed credentials that verify the skills you've built. Add them to LinkedIn, include them in performance reviews, or share them with your team to demonstrate your continued growth and expertise."}

{"\n "}

{"\n\n "}

{"\n "}

{"Go further with Frontend Masters — 30% off your first month"}

{"\n "}

{"\n "}{"Unlock Full Access →"}{"\n "}

{"\n "}

{"\n\n "}

{"\n Let us know if you have any thoughts or questions by emailing us at"}
{"\n "}{"support@frontendmasters.com"}{" anytime\n "}

{"\n "}

{"\n\n "}

{"\n "}

{"\n "}{"Your friends:"}{" Frontend Masters, 60 South 6th St, Minneapolis MN 55402\n "}

{"\n "}

{"\n You received this email because you signed up for Frontend Masters. If you're no longer interested, you can \n "}{"unsubscribe"}{".\n "}

{"\n "}

{"\n\n "}

{"\n "}{"\n "}

{"\n"}{"\n"}5b:T30b9,

Get 30% off your first month when you upgrade! Unlock Full Access →

Hey John,

Your progress deserves to be visible. Every course you complete and every skill you build moves you forward—make sure it counts.

With Frontend Masters membership you get:

A public developer profile

Courses completed
Skills demonstrated
Learning streaks
Shareable proof of growth

Plus completion certificates for every course you finish — professionally designed credentials that verify the skills you've built. Add them to LinkedIn, include them in performance reviews, or share them with your team to demonstrate your continued growth and expertise.

Go further with Frontend Masters — 30% off your first month

Unlock Full Access →

Let us know if you have any thoughts or questions by emailing us at
support@frontendmasters.com anytime

Your friends: Frontend Masters, 60 South 6th St, Minneapolis MN 55402

You received this email because you signed up for Frontend Masters. If you're no longer interested, you can unsubscribe.

5c:T32ab,{"\n "}{"\n "}{"\n "}{"\n "}{"\n "}{"\n"}{"\n"}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n \n "}

{"\n "}

{"\n\n "}

{"\n Get 30% off your first month when you upgrade! "}{"Upgrade Now →"}{"\n "}

{"\n\n "}

{"\n "}

{"Hey John,"}

{"\n "}

{"Just a quick reminder — your Frontend Masters upgrade discount expires soon."}

{"\n \n "}

{"If you've been planning to:"}

{"\n"}

{"go deeper than intro content"}
{"build advanced, job-ready skills"}
{"learn from industry experts"}
{"invest in your growth"}

{"\n\n "}

{"Now's the time to start."}

{"\n "}

{"Unlock full access to our entire course library, including advanced JavaScript, system design, performance, AI, and real-world engineering topics — all taught by leaders from companies like Netflix, Google, and Meta."}

{"\n "}

{"Start membership today and take advantage of your 30% off before it expires."}

{"\n "}

{"\n\n "}

{"\n "}

{"30% off your first month ends Sunday"}

{"\n "}

{"\n "}{"Upgrade Now →"}{"\n "}

{"\n "}

{"\n\n "}

{"\n Let us know if you have any thoughts or questions by emailing us at"}
{"\n "}{"support@frontendmasters.com"}{" anytime\n "}

{"\n "}

{"\n\n "}

{"\n "}

{"\n "}{"Your friends:"}{" Frontend Masters, 60 South 6th St, Minneapolis MN 55402\n "}

{"\n "}

{"\n You received this email because you signed up for Frontend Masters. If you're no longer interested, you can \n "}{"unsubscribe"}{".\n "}

{"\n "}

{"\n\n "}

{"\n "}{"\n "}

{"\n"}{"\n"}5d:T3110,

Get 30% off your first month when you upgrade! Upgrade Now →

Hey John,

Just a quick reminder — your Frontend Masters upgrade discount expires soon.

If you've been planning to:

go deeper than intro content
build advanced, job-ready skills
learn from industry experts
invest in your growth

Now's the time to start.

Unlock full access to our entire course library, including advanced JavaScript, system design, performance, AI, and real-world engineering topics — all taught by leaders from companies like Netflix, Google, and Meta.

Start membership today and take advantage of your 30% off before it expires.

30% off your first month ends Sunday

Upgrade Now →

Let us know if you have any thoughts or questions by emailing us at
support@frontendmasters.com anytime

Your friends: Frontend Masters, 60 South 6th St, Minneapolis MN 55402

You received this email because you signed up for Frontend Masters. If you're no longer interested, you can unsubscribe.

5e:T9276,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Evgenii Ray walks you through the hardest questions big tech throws at senior engineers."}

{"\n "}

{"Hi John,"}

{"\n"}

{"Big tech interviews are brutal, and the bar keeps climbing. Evgenii Ray knows exactly what it takes because he passes them for a living at one of the biggest names in the industry. Now he's here to get you ready for the hardest frontend interviews out there."}

{"Senior-Level Frontend Interview Prep"}

{"Prepare yourself for intensive frontend interviews at companies like Meta, Amazon, and Netflix! Work through complex JavaScript, TypeScript, and UI Component challenges while learning strategies for approaching onsite and take-home assignments. From writing a throttle algorithm to creating a basic Google Sheets application, this course helps junior, senior, and staff-level engineers land that dream job!"}

{"\n \n "}

Evgenni Ray teaching his new Senior Frontend Interview Prep course

{"What you'll walk away with:"}

{"\n"}

{"Get comfortable with the kinds of coding problems senior frontend engineers actually see in interviews."}
{"Learn to think out loud like a senior engineer, covering trade-offs, edge cases, and complexity."}
{"Rebuild core JavaScript mechanics from scratch, including debounce, throttle, promises, and deep cloning."}
{"Build real interactive components like tooltips, tables, and toasts with accessibility in mind."}
{"Tackle large system-style challenges, including a ChatGPT interface and a Google Sheets engine with formula support."}

{"Senior roles go to engineers who practiced the hard stuff: "}{"https://frontendmasters.com/courses/interviewing-frontend-v2/"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO & UI Developer"}
{"\nFrontend Masters"}

{"\n"}

{"P.S. Don't miss our free Claude Code Deep Dive workshop tomorrow with Lydia Hallie from Anthropic."}{" It's the first time we've opened a workshop like this to everyone, free to attend, and over 8,000 engineers have already RSVP'd. "}{"Grab your spot here."}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"\n "}{"\n "}{"\n "}5f:T8b06,

Hi John,

Big tech interviews are brutal, and the bar keeps climbing. Evgenii Ray knows exactly what it takes because he passes them for a living at one of the biggest names in the industry. Now he's here to get you ready for the hardest frontend interviews out there.

Senior-Level Frontend Interview Prep

Prepare yourself for intensive frontend interviews at companies like Meta, Amazon, and Netflix! Work through complex JavaScript, TypeScript, and UI Component challenges while learning strategies for approaching onsite and take-home assignments. From writing a throttle algorithm to creating a basic Google Sheets application, this course helps junior, senior, and staff-level engineers land that dream job!

What you'll walk away with:

Get comfortable with the kinds of coding problems senior frontend engineers actually see in interviews.
Learn to think out loud like a senior engineer, covering trade-offs, edge cases, and complexity.
Rebuild core JavaScript mechanics from scratch, including debounce, throttle, promises, and deep cloning.
Build real interactive components like tooltips, tables, and toasts with accessibility in mind.
Tackle large system-style challenges, including a ChatGPT interface and a Google Sheets engine with formula support.

Senior roles go to engineers who practiced the hard stuff: https://frontendmasters.com/courses/interviewing-frontend-v2/

--
Marc Grabanski
CEO & UI Developer
Frontend Masters

P.S. Don't miss our free Claude Code Deep Dive workshop tomorrow with Lydia Hallie from Anthropic. It's the first time we've opened a workshop like this to everyone, free to attend, and over 8,000 engineers have already RSVP'd. Grab your spot here.

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

60:T1742b,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Here’s what matters this month in front-end to full-stack."}

{"\n "}

{"Hi John,"}

{"\n"}

{"Welcome to "}{"Frontend to Fullstack Monthly #37"}{"! Here is your curated roundup of the most important news, releases, and learning resources from across the web for April, all chosen to be worth your time."}

{"Industry News"}

{"\n"}

{"The 'Mini Shai-Hulud' npm supply chain attack is still unfolding. On April 29, attackers "}{"published malicious versions of four SAP CAP packages and the widely used "}{"intercom-client"}{" SDK"}{", with the malware harvesting GitHub, npm, and cloud credentials. The new wrinkle: it injects "}{".claude/settings.json"}{" and "}{".vscode/tasks.json"}{" files so opening an infected repo in Claude Code or VS Code triggers execution. Rotate credentials if you ran "}{"npm install"}{" on April 29 or 30."}

{"\n\n"}

{"Claude Opus 4.7 shipped April 16 and is the strongest publicly available model for coding right now. "}{"Anthropic reports 87.6% on SWE-bench Verified, up from 80.8%"}{", with Cursor and Rakuten confirming the gains on real workloads. Pricing is unchanged at $5 / $25 per million tokens. One catch: agentic web research regressed, so GPT-5.4 Pro is still ahead there."}

{"\n\n"}

{"Starting in June, Google will "}{"penalize sites that 'hijack' the back button"}{" in search results. GitHub is also testing a "}{"new 'Stacked PRs' feature"}{" in private preview to break large changes into smaller dependent parts."}

{"\n\n"}

{"✨ Recent releases to be aware of: "}{"TypeScript 7.0 Beta"}{", "}{"pnpm 11"}{", "}{"Git 2.54"}{", "}{"Playwright 1.59.0"}{", "}{"Phaser 4.0"}{", "}{"Rspack 2.0"}{", and Google's "}{"ADK for Go hit 1.0"}{"."}

{"Tutorials and Articles"}

{"\n"}

{"Does the new, cross-browser "}{"sizes=\"auto\""}{" "}{"spell the end of messy "}{"srcset/sizes"}{" headaches"}{"?"}

{"\n"}

{"Neciu Dan runs through the relevant "}{"new additions in JavaScript"}{" (and what's coming next) in a useful ES2025 and ES2026 round-up."}

{"\n"}

{"Vedant Gandhi wanted to better understand how Docker containers work under the hood, so he set out to "}{"build a minimal one in Go"}{" from scratch."}

{"\n"}

{"Google's Addy Osmani has "}{"shared some pointers for AEO"}{", which stands for Agentic Engine Optimization."}

{"\n"}

{"Here's the behind-the-scenes story of "}{"rebuilding the frontend of MDN"}{"."}

{"\n"}

{"Kilian Valkhof shares "}{"a neat code-heavy primer"}{" on what we can do with the "}{"Intl"}{" API."}

{"\n"}

{"Harry Roberts "}{"clarifies how inheritance works when loading in font stacks"}{", and it might not work as you expect."}

{"\n"}

{"One developer took on a rather ambitious folly: "}{"installing every Firefox extension"}{". Turns out there's 84 thousand of them and some of them have rather weird behavior."}

{"New on Frontend Masters"}

{"\n"}

{"\n "}{"AI Engineering Fundamentals"}{" with Scott Moss from Netflix"}
{"\n Discover the discipline of AI Engineering and build better AI features that get more accurate over time. Establish rigorous eval harnesses to improve AI agents through context engineering, advanced tool use, RAG, and reliable production feedback loops.\n "}
{"\n "}{"Senior Level Frontend Interview Prep"}{" with Staff Engineer Evgenni Ray"}
{"\n Prepare for the rigorous frontend interviews Big Tech is known for. Work through complex JavaScript, TypeScript, and UI Component challenges while learning strategies that help junior, senior, and staff-level engineers land that dream job!\n "}
{"\n "}{"Enterprise UI Development: Microfrontends, Testing, & Code Quality"}{" with Steve Kinney"}
{"\n Architect large, successful frontend systems. From monoliths to microfrontends to monorepos, learn best practices for maintaining complex codebases while shipping high-quality software.\n "}

{"Conversations on AI"}

{"\n"}

{"We chatted with a couple FAANG engineers about AI and where they think software engineering is headed and posted them on YouTube:"}

{"\n"}

{"\n "}{"AI Engineering with Scott Moss (Netflix)"}{"\n "}
{"\n "}{"AI and the Future of Programming with Staff Engineer Evgenni Ray"}{"\n "}

{"Blog Updates"}

{"\n"}

{"Sure, you're using AI to code, but are you good at it? There is a lot to know. Our recent free workshop "}{"Claude Code Deep Dive"}{" is testament to that. Durgesh has some articles this month that demonstrate how being too loose with your AI usage can "}{"generate inaccessible code"}{" or "}{"insecure code"}{". But "}{"a good team lead should be able to align and guide AI usage"}{" well."}

{"\n"}

{"Adam Rackis has an upcoming course on TanStack, and he's augmenting it with how-to articles using it, like this two parter on "}{"building a blog with TanStack"}{". Rob Levin is back as well, this time focused on just "}{"how important Constructable Stylesheets are"}{" for a big design system using shadow DOM web components. And Ana shares the stuff she wishes she had known when first "}{"getting into SVG filters"}{"."}

{"\n"}

{"We started the month off with "}{"What To Know in JavaScript (2026 Edition)"}{", which is meant to be a look at the whole JS ecosystem and catch you up on where things are at, focusing mainly on what's new."}

{"\n"}

{"Amit Sheen had an absolute banger month. First with some bonafide trickery of "}{"cutting an element into puzzle pieces"}{". Then some ultra practical modern advice about how "}{"modern CSS has moved beyond page-level breakpoints"}{". Best for last: "}{"HTML-in-Canvas is… incredible"}{". If you haven't heard of this yet, brace yourself, it's pretty wild seeing canvas-style filters over top a perfectly functional web form."}

{"\n"}

{"The idea of "}{"using "}{"@container"}{" for scoping"}{" alone is rather appealing. Yes, we have "}{"@scope"}{" too, but that's tied to selectors. Giving an element a specific name to scope styles to feels right."}

{"Useful Projects"}

{"\n"}

{"Cloudflare recently launched a new tool that will "}{"scan your site and determine how 'agent-ready'"}{" it is."}

{"\n"}

{"Aube"}{" is another new Node.js package manager, but is notably from the creator of "}{"Mise"}{". It's a fast, security-focused drop-in replacement, and "}{"boasts being the fastest option"}{" right now."}

{"\n"}

{"HyperFrames is an open-source video rendering framework"}{" for creating videos from just HTML and JavaScript. It features a variety of blocks/components for common video effects and elements, and isn't tied to any specific framework."}

{"\n"}

{"watgo"}{" is a new Web Assembly toolkit for Go. It comes with a CLI and a Go API to parse WebAssembly Text, validate it, and encode it into WASM binaries."}

{"\n"}

{"µCSS is a lightweight and themeable CSS framework"}{". It includes default class-less styles in 20 different themes, a dark mode toggle, 36 pre-built components, and more."}

{"\n"}

{"delphitools is a "}{"charming collection of over 40 browser-based tools"}{". Think things like a palette generator, background remover, image converter, SVG optimizer, line-height calculator, Tailwind CSS shade generator, and more."}

{"\n"}

{"...and finally"}

{"\n"}

{"This is delightful"}{". Neal Agarwal's latest is "}{"Cursor Camp"}{", a live website where your mouse pointer hangs out around a campfire with everyone else's cursors in real time. No goal, no game, just cursors being cursors together. A pure social experiment, and weirdly soothing."}

{"Have something we should feature next month? Reply and send it our way."}

{"\n"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO & UI Developer"}
{"\nFrontend Masters"}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"\n "}{"\n "}{"\n "}61:T16aff,

Hi John,

Welcome to Frontend to Fullstack Monthly #37! Here is your curated roundup of the most important news, releases, and learning resources from across the web for April, all chosen to be worth your time.

Industry News

The 'Mini Shai-Hulud' npm supply chain attack is still unfolding. On April 29, attackers published malicious versions of four SAP CAP packages and the widely used intercom-client SDK, with the malware harvesting GitHub, npm, and cloud credentials. The new wrinkle: it injects .claude/settings.json and .vscode/tasks.json files so opening an infected repo in Claude Code or VS Code triggers execution. Rotate credentials if you ran npm install on April 29 or 30.

Claude Opus 4.7 shipped April 16 and is the strongest publicly available model for coding right now. Anthropic reports 87.6% on SWE-bench Verified, up from 80.8%, with Cursor and Rakuten confirming the gains on real workloads. Pricing is unchanged at $5 / $25 per million tokens. One catch: agentic web research regressed, so GPT-5.4 Pro is still ahead there.

Starting in June, Google will penalize sites that 'hijack' the back button in search results. GitHub is also testing a new 'Stacked PRs' feature in private preview to break large changes into smaller dependent parts.

✨ Recent releases to be aware of: TypeScript 7.0 Beta, pnpm 11, Git 2.54, Playwright 1.59.0, Phaser 4.0, Rspack 2.0, and Google's ADK for Go hit 1.0.

Tutorials and Articles

Does the new, cross-browser sizes="auto" spell the end of messy srcset/sizes headaches?

Neciu Dan runs through the relevant new additions in JavaScript (and what's coming next) in a useful ES2025 and ES2026 round-up.

Vedant Gandhi wanted to better understand how Docker containers work under the hood, so he set out to build a minimal one in Go from scratch.

Google's Addy Osmani has shared some pointers for AEO, which stands for Agentic Engine Optimization.

Here's the behind-the-scenes story of rebuilding the frontend of MDN.

Kilian Valkhof shares a neat code-heavy primer on what we can do with the Intl API.

Harry Roberts clarifies how inheritance works when loading in font stacks, and it might not work as you expect.

One developer took on a rather ambitious folly: installing every Firefox extension. Turns out there's 84 thousand of them and some of them have rather weird behavior.

New on Frontend Masters

AI Engineering Fundamentals with Scott Moss from Netflix
Discover the discipline of AI Engineering and build better AI features that get more accurate over time. Establish rigorous eval harnesses to improve AI agents through context engineering, advanced tool use, RAG, and reliable production feedback loops.
Senior Level Frontend Interview Prep with Staff Engineer Evgenni Ray
Prepare for the rigorous frontend interviews Big Tech is known for. Work through complex JavaScript, TypeScript, and UI Component challenges while learning strategies that help junior, senior, and staff-level engineers land that dream job!
Enterprise UI Development: Microfrontends, Testing, & Code Quality with Steve Kinney
Architect large, successful frontend systems. From monoliths to microfrontends to monorepos, learn best practices for maintaining complex codebases while shipping high-quality software.

Conversations on AI

We chatted with a couple FAANG engineers about AI and where they think software engineering is headed and posted them on YouTube:

Blog Updates

Sure, you're using AI to code, but are you good at it? There is a lot to know. Our recent free workshop Claude Code Deep Dive is testament to that. Durgesh has some articles this month that demonstrate how being too loose with your AI usage can generate inaccessible code or insecure code. But a good team lead should be able to align and guide AI usage well.

Adam Rackis has an upcoming course on TanStack, and he's augmenting it with how-to articles using it, like this two parter on building a blog with TanStack. Rob Levin is back as well, this time focused on just how important Constructable Stylesheets are for a big design system using shadow DOM web components. And Ana shares the stuff she wishes she had known when first getting into SVG filters.

We started the month off with What To Know in JavaScript (2026 Edition), which is meant to be a look at the whole JS ecosystem and catch you up on where things are at, focusing mainly on what's new.

Amit Sheen had an absolute banger month. First with some bonafide trickery of cutting an element into puzzle pieces. Then some ultra practical modern advice about how modern CSS has moved beyond page-level breakpoints. Best for last: HTML-in-Canvas is… incredible. If you haven't heard of this yet, brace yourself, it's pretty wild seeing canvas-style filters over top a perfectly functional web form.

The idea of using @container for scoping alone is rather appealing. Yes, we have @scope too, but that's tied to selectors. Giving an element a specific name to scope styles to feels right.

Useful Projects

Cloudflare recently launched a new tool that will scan your site and determine how 'agent-ready' it is.

Aube is another new Node.js package manager, but is notably from the creator of Mise. It's a fast, security-focused drop-in replacement, and boasts being the fastest option right now.

HyperFrames is an open-source video rendering framework for creating videos from just HTML and JavaScript. It features a variety of blocks/components for common video effects and elements, and isn't tied to any specific framework.

watgo is a new Web Assembly toolkit for Go. It comes with a CLI and a Go API to parse WebAssembly Text, validate it, and encode it into WASM binaries.

µCSS is a lightweight and themeable CSS framework. It includes default class-less styles in 20 different themes, a dark mode toggle, 36 pre-built components, and more.

delphitools is a charming collection of over 40 browser-based tools. Think things like a palette generator, background remover, image converter, SVG optimizer, line-height calculator, Tailwind CSS shade generator, and more.

...and finally

This is delightful. Neal Agarwal's latest is Cursor Camp, a live website where your mouse pointer hangs out around a campfire with everyone else's cursors in real time. No goal, no game, just cursors being cursors together. A pure social experiment, and weirdly soothing.

Have something we should feature next month? Reply and send it our way.

--
Marc Grabanski
CEO & UI Developer
Frontend Masters

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

62:T8a95,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Scott Moss (Netflix) on making AI features that actually work"}

{"\n "}

{"Hi John,"}

{"\n"}

{"Scott Moss, Senior Dev at Netflix, has been mentoring his teammates on getting AI into production. He says this new practice area, “AI Engineering,” isn’t just about adding agents to your apps, but about building reliable AI features that actually work for your customers. He turned everything he's learned into this new course!"}

{"AI Engineering Fundamentals"}

{"Build a real AI agent into a working app, then learn the discipline of making it reliable. You build an AI-assisted Excalidraw diagram app, so every technique gets tested against a real product."}

{"\n \n "}

Scott Moss teaching his new AI Engineering course

{"What you'll walk away with:"}

{"\n"}

{"Ship a real AI agent into a working app: streaming chat, client-side tools, live canvas integration on Cloudflare's edge."}
{"Set up an eval harness that catches regressions before users do, with golden datasets, code-based scorers, and Braintrust for observability."}
{"Get fluent in context engineering. The model only knows what you give it each turn, so you'll learn to write a tight system prompt, serialize canvas state with TOON, and pick few-shot examples that earn their tokens."}
{"Better tools: client-side CRUD operations the agent invokes like any user would, with web search and RAG for context that lives outside the app."}
{"Scott's improvement loop is the through-line of the whole course. Run evals, form one theory, change one thing, rerun. He calls it the actual discipline of AI engineering."}

{"Ramp up on AI with 40% off your month! "}{"https://frontendmasters.com/courses/ai-engineering/"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO, Frontend Masters"}

{"\n"}

{"P.S. We sat down with Scott for a fireside chat on AI and where software engineering is heading: https://youtu.be/MYLsBdifOUg"}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"\n "}{"\n "}{"\n "}63:T834a,

Hi John,

Scott Moss, Senior Dev at Netflix, has been mentoring his teammates on getting AI into production. He says this new practice area, “AI Engineering,” isn’t just about adding agents to your apps, but about building reliable AI features that actually work for your customers. He turned everything he's learned into this new course!

AI Engineering Fundamentals

Build a real AI agent into a working app, then learn the discipline of making it reliable. You build an AI-assisted Excalidraw diagram app, so every technique gets tested against a real product.

What you'll walk away with:

Ship a real AI agent into a working app: streaming chat, client-side tools, live canvas integration on Cloudflare's edge.
Set up an eval harness that catches regressions before users do, with golden datasets, code-based scorers, and Braintrust for observability.
Get fluent in context engineering. The model only knows what you give it each turn, so you'll learn to write a tight system prompt, serialize canvas state with TOON, and pick few-shot examples that earn their tokens.
Better tools: client-side CRUD operations the agent invokes like any user would, with web search and RAG for context that lives outside the app.
Scott's improvement loop is the through-line of the whole course. Run evals, form one theory, change one thing, rerun. He calls it the actual discipline of AI engineering.

Ramp up on AI with 40% off your month! https://frontendmasters.com/courses/ai-engineering/

--
Marc Grabanski
CEO, Frontend Masters

P.S. We sat down with Scott for a fireside chat on AI and where software engineering is heading: https://youtu.be/MYLsBdifOUg

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

64:T8a74,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Brian Holt (Microsoft) on matching the right database to the right problem"}

{"\n "}

{"Hi John,"}

{"\n"}

{"Most database confusion comes down to one question people don't ask: what are you actually optimizing for? Postgres and MongoDB handle thousands of small reads and writes per second. DuckDB and the columnar formats behind it scan billions of rows for one report. Vector databases find the hundred results that mean something similar to your query, even when no keyword matches. Three different jobs, three different shapes, and no amount of indexing will save you if you pick the wrong one."}

{"\n"}

{"\nBrian Holt works as PM for Postgres at Microsoft, and before that he shipped engineering work at NeonDB, LinkedIn, Reddit, Stripe, and Netflix. That kind of range means he's not loyal to any one tool, he's loyal to picking the right one. In this course, he hands you that same judgment."}

{"Complete Intro to Databases, v2"}

{"Get hands-on with very different databases and learn exactly when each one earns its place in your stack."}

{"\n \n "}

Brian Holt teaching his new complete intro to Databases course

{"What you'll walk away with:"}

{"\n"}

{"Run Postgres, MongoDB, Neo4j, Redis, and DuckDB with confidence"}
{"Write SQL queries that go beyond SELECT, including joins, subqueries, and indexes"}
{"Build vector search and RAG features using PG Vector and local LLMs"}
{"Model graph relationships in Neo4j with Cypher"}
{"Choose the right database for any workload you encounter"}

{"The thing that makes this course stick is Brian's refusal to pick favorites. He shows you what each database is genuinely good at, where it falls down, and how to think clearly about tradeoffs instead of chasing trends. By the end you're not just someone who knows databases, you're someone who knows which one to reach for! "}{"https://frontendmasters.com/courses/databases-v2/"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO, Frontend Masters"}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"\n "}{"\n "}{"\n "}65:T8334,

Hi John,

Most database confusion comes down to one question people don't ask: what are you actually optimizing for? Postgres and MongoDB handle thousands of small reads and writes per second. DuckDB and the columnar formats behind it scan billions of rows for one report. Vector databases find the hundred results that mean something similar to your query, even when no keyword matches. Three different jobs, three different shapes, and no amount of indexing will save you if you pick the wrong one.

Brian Holt works as PM for Postgres at Microsoft, and before that he shipped engineering work at NeonDB, LinkedIn, Reddit, Stripe, and Netflix. That kind of range means he's not loyal to any one tool, he's loyal to picking the right one. In this course, he hands you that same judgment.

Complete Intro to Databases, v2

Get hands-on with very different databases and learn exactly when each one earns its place in your stack.

What you'll walk away with:

Run Postgres, MongoDB, Neo4j, Redis, and DuckDB with confidence
Write SQL queries that go beyond SELECT, including joins, subqueries, and indexes
Build vector search and RAG features using PG Vector and local LLMs
Model graph relationships in Neo4j with Cypher
Choose the right database for any workload you encounter

The thing that makes this course stick is Brian's refusal to pick favorites. He shows you what each database is genuinely good at, where it falls down, and how to think clearly about tradeoffs instead of chasing trends. By the end you're not just someone who knows databases, you're someone who knows which one to reach for! https://frontendmasters.com/courses/databases-v2/

--
Marc Grabanski
CEO, Frontend Masters

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

66:Ta0c2,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Lydia Hallie (Anthropic) teaches the fundamentals. Yours to watch, no subscription required"}

{"\n "}

{"Hi John,"}

{"\n"}

{"We partnered with Anthropic to make our Claude Code course free for everyone. No subscription, no trial. Just dive in."}

{"\n"}

{"It's taught by Lydia Hallie, who's been a Frontend Masters instructor for years and now works on the Claude Code team at Anthropic. When she taught Claude Code live, it broke every platform record we have with over 10,000 people tuning in."}

{"\n \n "}

{"Lydia has a knack for visualizing how tools work under the hood, which is exactly the mental model you need to stop guessing with AI and start directing it."}

{"Claude Code"}

{"This course covers the fundamentals you actually need, from the agentic loop and model trade-offs to skills, hooks, subagents, and full agent teams that collaborate on complex work."}

{"\n \n "}

Lydia Hallie from Anthropic teaching her new Claude Code course

{"What you'll walk away with:"}

{"\n"}

{"Understand how the Claude Code harness and models actually work together"}
{"Configure CLAUDE.md, plan mode, and permissions for a smoother coding flow"}
{"Build custom skills that automate your repetitive, multi-step workflows"}
{"Wire up hooks to control execution at key points in the agentic lifecycle"}
{"Orchestrate subagents and agent teams for parallel, complex engineering tasks"}

{"Lydia's whole approach is about treating Claude Code as a real engineering partner you configure and direct, not a black box you hope works. By the end you'll have the mental model and the muscle memory to make it move at your pace."}

{"\n"}
{"“Awesome course! You can really learn a lot in a short amount of time, and the instructor really knows how to work well with Claude. Her teaching style is great!” ~Caroline Sabino"}
{"\n"}

{"\n"}

{"\n"}
{"“Nice introductory course to Claude and Claude Code.” ~Juan Taborda\n"}
{"\n"}

{"Learn Claude Code for free! 🧑‍💻 "}{"https://frontendmasters.com/courses/claude-code/"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO, Frontend Masters"}

{"\n"}

{"P.S. Did you know? We do have an full learning path to ramp up on AI here: "}{"https://frontendmasters.com/learn/ai/"}{" (note: the AI learning path requires a paid membership)"}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"\n "}{"\n "}{"\n "}67:T98de,

Hi John,

We partnered with Anthropic to make our Claude Code course free for everyone. No subscription, no trial. Just dive in.

It's taught by Lydia Hallie, who's been a Frontend Masters instructor for years and now works on the Claude Code team at Anthropic. When she taught Claude Code live, it broke every platform record we have with over 10,000 people tuning in.

Lydia has a knack for visualizing how tools work under the hood, which is exactly the mental model you need to stop guessing with AI and start directing it.

Claude Code

This course covers the fundamentals you actually need, from the agentic loop and model trade-offs to skills, hooks, subagents, and full agent teams that collaborate on complex work.

What you'll walk away with:

Understand how the Claude Code harness and models actually work together
Configure CLAUDE.md, plan mode, and permissions for a smoother coding flow
Build custom skills that automate your repetitive, multi-step workflows
Wire up hooks to control execution at key points in the agentic lifecycle
Orchestrate subagents and agent teams for parallel, complex engineering tasks

Lydia's whole approach is about treating Claude Code as a real engineering partner you configure and direct, not a black box you hope works. By the end you'll have the mental model and the muscle memory to make it move at your pace.

“Awesome course! You can really learn a lot in a short amount of time, and the instructor really knows how to work well with Claude. Her teaching style is great!” ~Caroline Sabino

“Nice introductory course to Claude and Claude Code.” ~Juan Taborda

Learn Claude Code for free! 🧑‍💻 https://frontendmasters.com/courses/claude-code/

--
Marc Grabanski
CEO, Frontend Masters

P.S. Did you know? We do have an full learning path to ramp up on AI here: https://frontendmasters.com/learn/ai/ (note: the AI learning path requires a paid membership)

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

68:T18b7a,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Here’s what matters this month in front-end to full-stack."}

{"\n "}

{"Hi John,"}

{"\n"}

{"Welcome to "}{"Frontend to Fullstack Monthly #38"}{"! But before we get into the roundup, a special treat: we partnered with Anthropic on a "}{"free Claude Code course"}{" with Lydia Hallie. Now, on to your curated roundup of the most important news, releases, and learning resources from across the web for May, all chosen to be worth your time."}

{"Industry News"}

{"\n\n"}

{"GitHub Copilot moved to usage-based billing on June 1."}{" Flat-rate plans are out, replaced by "}{"\"GitHub AI Credits\" at $0.01 each, charged per token"}{". Some Copilot Pro+ users reported burning through a big chunk of their monthly credits in hours. Agentic workflows are the culprit: bigger context, faster meter. Worth reviewing your team's usage before the next cycle."}

{"\n\n"}

{"NVIDIA unveiled Nemotron 3 Ultra at Computex 2026."}{" A "}{"550B-parameter open-weights model"}{" (55B active, MoE) that now tops the US open-weights rankings. Available today on Hugging Face, OpenRouter, and NVIDIA NIM, running 300+ tokens/sec. China's Kimi K2.6 still leads globally."}

{"\n\n"}

{"Google I/O leaned hard into \"the agentic web.\""}{" Here are the "}{"15 announcements that matter for developers"}{", including the "}{"proposed WebMCP standard"}{", automated DevTools debugging, the "}{"HTML-in-Canvas API"}{", and a new Baseline Checker tool."}

{"\n\n"}

{"Chrome previewed Declarative Partial Updates."}{" "}{"<"}{"template for"}{"> for JS-free templating"}{", plus "}{"setHTML()"}{" and "}{"streamHTML()"}{" for safely streaming HTML into the DOM out of order."}

{"\n\n"}

{"The Shai-Hulud worm struck again."}{" It "}{"pushed malicious TanStack versions to npm"}{" that "}{"spread to 170+ packages"}{". It's all sorted on TanStack's end now ("}{"postmortem here"}{"). In response, npm and pnpm both "}{"shipped staged publishing"}{", adding a mandatory review period before packages go live."}

{"\n\n"}

{"Two surveys to weigh in on."}{" The "}{"State of CSS 2026 survey is open"}{" and slimmer this year, focusing on the features that matter most. And the "}{"2026 State of Web Dev AI results"}{" are out now."}

{"\n\n"}

{"✨ "}{"Recent releases:"}{" "}{"WordPress 7.0"}{", "}{"Safari 26.5"}{", "}{"Firefox 151"}{", "}{"Node.js 26.2.0"}{", "}{"Deno 2.8"}{", "}{"Storybook 10.4"}{", "}{"Astro 6.3"}{", "}{"Bun 1.3.14"}{", "}{"pnpm 11.3"}{", "}{"Electron 42"}{", "}{"Tailwind CSS 4.3"}{"."}

{"\n"}

{"Tutorials and Articles"}

{"\n"}

{"The "}{"TC39 ShadowRealm proposal would let you run JavaScript in an isolated 'pseudo-realm' with its own globals and intrinsics"}{" — handy for third-party code or anything you want to keep away from your global scope. Mat Marquis walks through how it works and why it matters."}

{"\n"}

{"Ahmad Shadeed explores "}{"how the now well-supported CSS "}{"round()"}{" function can create predictable fluid sizing"}{", pairing with "}{"clamp()"}{" to produce cleaner type scales and more refined responsive layouts."}

{"\n"}

{"Nolan Lawson argues that LLMs aren't just for pumping out bad code quickly; they can help you "}{"write higher quality code more "}{"slowly"}{". A thoughtful counterpoint to the \"vibe coding\" narrative, from a prolific JavaScript developer."}

{"\n"}

{"Some eight years after picking up Tailwind, Julia Evans "}{"migrated two of her sites back to semantic HTML and vanilla CSS"}{" and shared what she learned about structuring CSS along the way."}

{"\n"}

{"Josh Comeau takes "}{"a nuanced look at CSS vs. JavaScript for animation performance"}{", walking through when each approach wins and the performance trade-offs involved."}

{"\n"}

{"New on Frontend Masters"}

{"\n"}

{"\n Free: "}{"Claude Code"}{" with Lydia Hallie (Anthropic)"}
{"\n Customize Claude Code for your codebase. Build reusable skills tailored to your processes and wire up hooks so Claude behaves consistently across the whole team. Generate and ship higher-quality code!\n "}
{"\n "}{"Playwright: Automated Testing & AI Workflows"}{" with Steve Kinney"}
{"\n Catch broken UIs before they ship with Playwright! Build rock-solid verification loops that provide feedback to agentic coding tools and give you the confidence that your code is production-ready.\n"}
{"\n "}{"Complete Intro to Databases, v2"}{" with Brian Holt"}
{"\n Get hands-on with relational, document, graph, key-value, and columnar databases. Gain foundational database skills, including schema design, query writing, performance optimization, and even AI-powered features with vector search and RAG. Confidently choose the right database for your next app!\n "}
{"\n "}{"AI Engineering Fundamentals"}{" with Scott Moss from Netflix"}
{"\n Discover the discipline of AI Engineering and build better AI features that get more accurate over time. Establish rigorous eval harnesses to improve AI agents through context engineering, advanced tool use, RAG, and reliable production feedback loops.\n "}

{"Blog Updates"}

{"\n"}

{"Will the AI revolution in coding give birth to new job titles? Scott thinks so, and \""}{"AI Engineer"}{"\" is one of them. It doesn't just mean \"a developer who uses AI\", either."}

{"\n"}

{"TanStack continues to gain popularity, and Adam keeps us informed. "}{"This time about TanStack Form"}{". True to form, it has a unique take on things. And speaking of JavaScript on the server, "}{"Durgesh gets deep into Node.js streaming"}{" and the sneaky problems that can come up."}

{"\n"}

{"It probably shouldn't surprise you at this point, but there is some spanking-new CSS that's worth a look. "}{"Jane takes a serious look at "}{"@function"}{" in CSS noting a "}{"ton"}{" of \"gotcha\" moments worth knowing about, and don't miss the back-and-forth "}{"with Tab"}{" in the comments. If you didn't know "}{":nth-child(2 of .class)"}{" was a thing, "}{"you probably should"}{". Setting a background as a "}{"conic-gradient()"}{" isn't super new, but thinking of it as "}{"a way to make a repeating dots background"}{" is rather novel. Anchor positioning is a new concept, and it all happens with CSS property/values like "}{"position-anchor"}{" and "}{"anchor-name"}{". But what if you want to establish and "}{"maintain those connections in HTML instead"}{"? We can now, thanks to an improved "}{"attr()"}{" function."}

{"\n"}

{"Focus styles are an important part of accessibility — never get rid of them. But it was fun to "}{"experiment with "}{"animating"}{" them"}{" from one position to another. Temani did a great job "}{"introducing the concept of infinite CSS animations"}{" and how to control them. Imagine a spinner that is infinitely spinning. That's not hard to do, but what if you want to increase the speed of it when you hover over it, "}{"gradually"}{". Much tricker! This kind of polish on a frontend is what makes you a master ;)"}

{"\n"}

{"Useful Projects"}

{"\n"}

{"Google announced a new set of \""}{"evergreen and expert-vetted"}{"\" AI skills dubbed "}{"Modern Web Guidance"}{". It works with various popular coding agents and claims to help with best practices and patterns across accessibility, layouts, performance, UX and more. The "}{"repo is here"}{", or you can give it a try via: "}{"npx modern-web-guidance@latest install"}{"."}

{"\n"}

{"Obs.js is a tiny inline script from Harry Roberts"}{" that reads browser signals (like latency, bandwidth, Data Saver, battery, CPU, and memory) and exposes them as CSS classes. Use them to serve smaller images on weak networks, skip animations on low battery, and adapt to real-world conditions without JavaScript overhead."}

{"\n"}

{"Anime.js 4.4"}{" — the decade-old \""}{"animate anything from JavaScript"}{"\" library continues to impress. This release adds a new "}{"scrambleText"}{" effect and an auto-grid layout mode for stagger grids. The docs remain genuinely top-tier."}

{"\n"}

{"NodeBook is a free online book by Ishtmeet Singh"}{" with eight in-depth chapters on Node internals — covering event loop internals, how V8 works, streams, module resolution, and async/await."}

{"\n\n"}

{"...and finally"}

{"\n"}

{"Tearable UI"}{" is a web experiment that lets you rip, tear, and shred any webpage with your mouse — complete with impressive real-time cloth physics."}

{"Have something we should feature next month? Reply and send it our way."}

{"\n"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO & UI Developer"}
{"\nFrontend Masters"}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"\n "}{"\n "}{"\n "}69:T181f0,

Hi John,

Welcome to Frontend to Fullstack Monthly #38! But before we get into the roundup, a special treat: we partnered with Anthropic on a free Claude Code course with Lydia Hallie. Now, on to your curated roundup of the most important news, releases, and learning resources from across the web for May, all chosen to be worth your time.

Industry News

GitHub Copilot moved to usage-based billing on June 1. Flat-rate plans are out, replaced by "GitHub AI Credits" at $0.01 each, charged per token. Some Copilot Pro+ users reported burning through a big chunk of their monthly credits in hours. Agentic workflows are the culprit: bigger context, faster meter. Worth reviewing your team's usage before the next cycle.

NVIDIA unveiled Nemotron 3 Ultra at Computex 2026. A 550B-parameter open-weights model (55B active, MoE) that now tops the US open-weights rankings. Available today on Hugging Face, OpenRouter, and NVIDIA NIM, running 300+ tokens/sec. China's Kimi K2.6 still leads globally.

Google I/O leaned hard into "the agentic web." Here are the 15 announcements that matter for developers, including the proposed WebMCP standard, automated DevTools debugging, the HTML-in-Canvas API, and a new Baseline Checker tool.

Chrome previewed Declarative Partial Updates. <template for> for JS-free templating, plus setHTML() and streamHTML() for safely streaming HTML into the DOM out of order.

The Shai-Hulud worm struck again. It pushed malicious TanStack versions to npm that spread to 170+ packages. It's all sorted on TanStack's end now (postmortem here). In response, npm and pnpm both shipped staged publishing, adding a mandatory review period before packages go live.

Two surveys to weigh in on. The State of CSS 2026 survey is open and slimmer this year, focusing on the features that matter most. And the 2026 State of Web Dev AI results are out now.

✨ Recent releases: WordPress 7.0, Safari 26.5, Firefox 151, Node.js 26.2.0, Deno 2.8, Storybook 10.4, Astro 6.3, Bun 1.3.14, pnpm 11.3, Electron 42, Tailwind CSS 4.3.

Tutorials and Articles

The TC39 ShadowRealm proposal would let you run JavaScript in an isolated 'pseudo-realm' with its own globals and intrinsics — handy for third-party code or anything you want to keep away from your global scope. Mat Marquis walks through how it works and why it matters.

Ahmad Shadeed explores how the now well-supported CSS round() function can create predictable fluid sizing, pairing with clamp() to produce cleaner type scales and more refined responsive layouts.

Nolan Lawson argues that LLMs aren't just for pumping out bad code quickly; they can help you write higher quality code more slowly. A thoughtful counterpoint to the "vibe coding" narrative, from a prolific JavaScript developer.

Some eight years after picking up Tailwind, Julia Evans migrated two of her sites back to semantic HTML and vanilla CSS and shared what she learned about structuring CSS along the way.

Josh Comeau takes a nuanced look at CSS vs. JavaScript for animation performance, walking through when each approach wins and the performance trade-offs involved.

New on Frontend Masters

Free: Claude Code with Lydia Hallie (Anthropic)
Customize Claude Code for your codebase. Build reusable skills tailored to your processes and wire up hooks so Claude behaves consistently across the whole team. Generate and ship higher-quality code!
Playwright: Automated Testing & AI Workflows with Steve Kinney
Catch broken UIs before they ship with Playwright! Build rock-solid verification loops that provide feedback to agentic coding tools and give you the confidence that your code is production-ready.
Complete Intro to Databases, v2 with Brian Holt
Get hands-on with relational, document, graph, key-value, and columnar databases. Gain foundational database skills, including schema design, query writing, performance optimization, and even AI-powered features with vector search and RAG. Confidently choose the right database for your next app!
AI Engineering Fundamentals with Scott Moss from Netflix
Discover the discipline of AI Engineering and build better AI features that get more accurate over time. Establish rigorous eval harnesses to improve AI agents through context engineering, advanced tool use, RAG, and reliable production feedback loops.

Blog Updates

Will the AI revolution in coding give birth to new job titles? Scott thinks so, and "AI Engineer" is one of them. It doesn't just mean "a developer who uses AI", either.

TanStack continues to gain popularity, and Adam keeps us informed. This time about TanStack Form. True to form, it has a unique take on things. And speaking of JavaScript on the server, Durgesh gets deep into Node.js streaming and the sneaky problems that can come up.

It probably shouldn't surprise you at this point, but there is some spanking-new CSS that's worth a look. Jane takes a serious look at @function in CSS noting a ton of "gotcha" moments worth knowing about, and don't miss the back-and-forth with Tab in the comments. If you didn't know :nth-child(2 of .class) was a thing, you probably should. Setting a background as a conic-gradient() isn't super new, but thinking of it as a way to make a repeating dots background is rather novel. Anchor positioning is a new concept, and it all happens with CSS property/values like position-anchor and anchor-name. But what if you want to establish and maintain those connections in HTML instead? We can now, thanks to an improved attr() function.

Focus styles are an important part of accessibility — never get rid of them. But it was fun to experiment with animating them from one position to another. Temani did a great job introducing the concept of infinite CSS animations and how to control them. Imagine a spinner that is infinitely spinning. That's not hard to do, but what if you want to increase the speed of it when you hover over it, gradually. Much tricker! This kind of polish on a frontend is what makes you a master ;)

Useful Projects

Google announced a new set of "evergreen and expert-vetted" AI skills dubbed Modern Web Guidance. It works with various popular coding agents and claims to help with best practices and patterns across accessibility, layouts, performance, UX and more. The repo is here, or you can give it a try via: npx modern-web-guidance@latest install.

Obs.js is a tiny inline script from Harry Roberts that reads browser signals (like latency, bandwidth, Data Saver, battery, CPU, and memory) and exposes them as CSS classes. Use them to serve smaller images on weak networks, skip animations on low battery, and adapt to real-world conditions without JavaScript overhead.

Anime.js 4.4 — the decade-old "animate anything from JavaScript" library continues to impress. This release adds a new scrambleText effect and an auto-grid layout mode for stagger grids. The docs remain genuinely top-tier.

NodeBook is a free online book by Ishtmeet Singh with eight in-depth chapters on Node internals — covering event loop internals, how V8 works, streams, module resolution, and async/await.

...and finally

Tearable UI is a web experiment that lets you rip, tear, and shred any webpage with your mouse — complete with impressive real-time cloth physics.

Have something we should feature next month? Reply and send it our way.

--
Marc Grabanski
CEO & UI Developer
Frontend Masters

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

6a:T8b07,{"\n "}{"\n "}{"\n "}

{"\n "}{"\n "}

{"\n "}

{"\n "}{"\n "}

{"\n "}{"\n "}{"\n "}{"\n "}

{"\n "}

{"Steve Kinney on using Playwright and tests to verify what your agents actually shipped."}

{"\n "}

{"Hi John,"}

{"\n"}

{"Playwright drives a real browser the way a user would: clicking, typing, waiting for things to load, then asserting the app did what it should. That makes it the perfect reality check for AI coding agents. An agent can claim a feature works, but a passing Playwright test is proof."}
{"\n"}

{"Playwright: Automated Testing & AI Workflows"}

{"In this course, Steve Kinney walks through building the infrastructure that keeps coding agents honest: end-to-end tests with Playwright, deterministic network mocking, visual regression checks, and agent loops that won't call something done before it actually is."}

{"\n \n "}

Steve Kinney teaching his new Playright course

{"What you'll walk away with:"}

{"\n"}

{"Write end-to-end Playwright tests that give agents real feedback to act on."}
{"Reuse authentication and browser state so your test suite runs fast and stays stable."}
{"Mock network requests with HAR files and route interception for repeatable results."}
{"Catch unexpected UI changes automatically with visual regression testing."}
{"Set up agent loops and git hooks that enforce quality before code hits the repo."}

{"Your real job was never typing code, it was architecting systems you can be confident in. This course hands you the tools to build that confidence into your agentic workflow from day one."}

{"\n"}

{"Learn Playwright → "}{"https://master.dev/courses/playwright/"}

{"--"}
{"\nMarc Grabanski"}
{"\nCEO, Master.Dev (Formerly Frontend Masters)"}

{"\n"}

{"P.S. If you noticed the new master.dev domain on the links... it's still the same Frontend Masters, but we're in progress of moving over. More on that soon!"}

{"\n"}

{"📲 Take Frontend Masters courses on your phone or tablet using our "}{"iOS"}{" and "}{"Android"}{" apps – you can even download our courses to learn offline:"}

{"\n "}

{"\n"}{"\n "} Frontend Masters iOS App

{"\n"}{"\n"}

{"\n "}

{"\n "}{"\n "} Frontend masters Android App

{"\n "}{"\n"}

{"\n "}

{"\n "}{"\n "}{"\n "}6b:T838b,

Hi John,

Playwright drives a real browser the way a user would: clicking, typing, waiting for things to load, then asserting the app did what it should. That makes it the perfect reality check for AI coding agents. An agent can claim a feature works, but a passing Playwright test is proof.

Playwright: Automated Testing & AI Workflows

In this course, Steve Kinney walks through building the infrastructure that keeps coding agents honest: end-to-end tests with Playwright, deterministic network mocking, visual regression checks, and agent loops that won't call something done before it actually is.

What you'll walk away with:

Write end-to-end Playwright tests that give agents real feedback to act on.
Reuse authentication and browser state so your test suite runs fast and stays stable.
Mock network requests with HAR files and route interception for repeatable results.
Catch unexpected UI changes automatically with visual regression testing.
Set up agent loops and git hooks that enforce quality before code hits the repo.

Your real job was never typing code, it was architecting systems you can be confident in. This course hands you the tools to build that confidence into your agentic workflow from day one.

Learn Playwright → https://master.dev/courses/playwright/

--
Marc Grabanski
CEO, Master.Dev (Formerly Frontend Masters)

P.S. If you noticed the new master.dev domain on the links... it's still the same Frontend Masters, but we're in progress of moving over. More on that soon!

📲 Take Frontend Masters courses on your phone or tablet using our iOS and Android apps – you can even download our courses to learn offline:

33:[null,["$","div",null,{"className":"w-full flex-1 overflow-y-auto overflow-x-hidden pt-1 pb-[30vh]","children":["$","$L53",null,{"emails":[{"key":"pt1_k97kkv6v1xqvadenks6zjszgrh8e4nsg","subject":"April #36: Axios Compromised, TypeScript 6.0 Lands & JavaScript Finally Gets Dates","previewText":"Here’s what matters this month in front-end to full-stack.","dayOffset":3.2,"categoryLabel":"Newsletter","jsx":"$54","html":"$55","width":832},{"key":"pt1_k97j4hyjbg41knrnae6zs7t8e18e5wm2","subject":"The fastest way to level up as a developer","previewText":"Get 30% off your first month when you upgrade! Start Learning → Hi John, Most developers don't struggle with effort. They struggle with…","dayOffset":5.1,"categoryLabel":"Newsletter","jsx":"$56","html":"$57","width":682},{"key":"pt1_k97nmct6x1sspg5wd7ng1g91dn8e50sw","subject":"Your frontend architecture is making decisions for you","previewText":"Steve Kinney shares the frameworks he's used across Twilio, SendGrid, and Temporal.","dayOffset":6.1,"categoryLabel":"Newsletter","jsx":"$58","html":"$59","width":832},{"key":"pt1_k97xhrq5v67ctm2y26jtkp8gpn8e56b0","subject":"Go further with Frontend Masters","previewText":"Get 30% off your first month when you upgrade! Unlock Full Access → Hey John, Your progress deserves to be visible. Every course you…","dayOffset":8.1,"categoryLabel":"Newsletter","jsx":"$5a","html":"$5b","width":682},{"key":"pt1_k97pc3yb24s8hpa93zv2kp6ch58e5cxk","subject":"Last chance: 30% off your first month 💸👋","previewText":"Get 30% off your first month when you upgrade! Upgrade Now → Hey John, Just a quick reminder — your Frontend Masters upgrade discount…","dayOffset":11.1,"categoryLabel":"Newsletter","jsx":"$5c","html":"$5d","width":682},{"key":"pt1_k97wm4q3r5p9k8b8txmdes41298e5dpq","subject":"Pass the frontend interview at Meta, Amazon, or Netflix","previewText":"Evgenii Ray walks you through the hardest questions big tech throws at senior engineers.","dayOffset":20.2,"categoryLabel":"Newsletter","jsx":"$5e","html":"$5f","width":832},{"key":"pt1_k97van56zsdejtexqb3xe8m0958e555n","subject":"May #37: npm Supply Chain Worm Returns, Claude Opus 4.7 Tops SWE-bench & TypeScript 7.0 Beta","previewText":"Here’s what matters this month in front-end to full-stack.","dayOffset":31.3,"categoryLabel":"Newsletter","jsx":"$60","html":"$61","width":832},{"key":"pt1_k97qttd7bxczrtpcqaxy534awx8e5sn3","subject":"AI Engineering is its own discipline now","previewText":"Scott Moss (Netflix) on making AI features that actually work","dayOffset":35.2,"categoryLabel":"Newsletter","jsx":"$62","html":"$63","width":832},{"key":"pt1_k97ps50fgt31379z05vk8v22658e5bhn","subject":"Postgres, Mongo, Redis, Neo4j, DuckDB. Know when to use each.","previewText":"Brian Holt (Microsoft) on matching the right database to the right problem","dayOffset":50.2,"categoryLabel":"Newsletter","jsx":"$64","html":"$65","width":832},{"key":"pt1_k97ngkz35mnmmt09s591r3cwa58e5tee","subject":"We made the Claude Code course free","previewText":"Lydia Hallie (Anthropic) teaches the fundamentals. Yours to watch, no subscription required","dayOffset":57.2,"categoryLabel":"Newsletter","jsx":"$66","html":"$67","width":832},{"key":"pt1_k97tbvgrne8080qx34fcy7zx4h8e4jha","subject":"June #38: GitHub Copilot Goes Pay-Per-Token, NVIDIA's 550B Open Model & Google's Agentic Web","previewText":"Here’s what matters this month in front-end to full-stack.","dayOffset":66.2,"categoryLabel":"Newsletter","jsx":"$68","html":"$69","width":832},{"key":"pt1_k97rgdmaggk2mnf2q20k9ch6en8e4a29","subject":"Keep your AI coding agents honest by testing them","previewText":"Steve Kinney on using Playwright and tests to verify what your agents actually shipped.","dayOffset":70.3,"categoryLabel":"Newsletter","jsx":"$6a","html":"$6b","width":832}],"brand":{"domain":"frontendmasters.com","name":"Frontendmasters"}}]}],"$L6c"]

Never let a signup go cold again.

April #36: Axios Compromised, TypeScript 6.0 Lands & JavaScript Finally Gets Dates

Never let a signup go cold again.

April #36: Axios Compromised, TypeScript 6.0 Lands & JavaScript Finally Gets Dates