# Debbie Codes: Full content index > Complete catalog of published videos, blog posts, podcasts, and courses on debbie.codes, newest first. Blog entries link to both the HTML page and a clean markdown copy. WebMCP tools (when document.modelContext is available): list-videos, topic-brief, search-content, get-video, get-current-page. ## Videos - [What is WebMCP? Add tools to your site for AI agents](https://www.youtube.com/watch?v=AS6k-1uFp-0): Video · 2026-11-13 · WebMCP lets you expose your website as tools that AI agents can call, instead of clicking around the page. It's a draft API from the W3C Web Machine Learning Community Group, with work from Microsoft and Google, and the tools run in the browser on the page itself. In this video I explain what WebMCP is, show the tools I added on debbie.codes, and test them in the new Chrome DevTools WebMCP panel. You'll see the tool definitions in my open source repo (list-videos, topic-brief, search-content, get-video and get-current-page), the origin trial tag in the page head, and what happens when a tool call succeeds or comes back with an error. · tags: ai, mcp - [Build an offline AI study app with local models (Liquid AI LFM3-1.7B)](https://www.youtube.com/watch?v=OBerXXfCYVo): Video · 2026-11-11 · I run Liquid AI's LFM3-1.7B locally in a desktop browser with WebGPU and Transformers.js. No cloud API, no server, no API key, and it works offline once the model is downloaded. A minimal LFM3 chat, then Grading Buddy, a study app that answers from checked notes for a first Taekwon-Do grading. · tags: ai - [Grok Bot Explained: Your Bots Get a Cloud Computer, Browser & Email](https://www.youtube.com/watch?v=nn56fcN7-PU): Video · 2026-10-15 · A beginner’s tour of Grok Bot: what it is, how your account’s one shared cloud computer (browser, file manager, terminal) and one shared email address work for all your bots, plus routines and a live Luma events demo. · tags: ai, grok-bot - [Grok Bot Uploads My YouTube Videos For Me (Beginner Walkthrough)](https://www.youtube.com/watch?v=1g6boZousFI): Video · 2026-10-15 · By voice, I ask Grok Bot to find a video on my computer, copy it to the shared cloud computer, clean the audio, write the title, description and tags, and get thumbnails from my designer bot. It uploads the video as private until I approve. · tags: ai, grok-bot - [How I Use Grok Bot Voice Mode to Practise for Job Interviews](https://www.youtube.com/watch?v=Gg3lV7lPQoo): Video · 2026-10-15 · I build a prep doc from past work, then do a voice mode mock interview with coaching: lead with the result, say I not we, and cut the hedging. · tags: ai, grok-bot - [Building AI Agent Workflows With Skills and MCPs | Prepathon 2026](https://www.youtube.com/watch?v=YEnFOGUcWBY): Video · 2026-09-25 · Debbie O'Brien, Developer Educator, shows how to use AI agents, Skills, and MCPs (Model Context Protocol) to build development workflows that run without you. She walks through the pattern she runs on her own site, debbie.codes: one skill that hunts for bugs, another that reproduces and fixes them, always with screenshot proof before any code changes, and always with a human pressing merge. · tags: conference-talk, ai, mcp - [Agentic commerce with Grok Bot and PayPal](https://www.youtube.com/watch?v=hJzFv6izuYs): Video · 2026-09-09 · Debbie O'Brien shows Eddie Jaoude how an AI agent can shop from a photo, fill the cart, and walk itself to PayPal checkout. She has spent weeks handing pieces of her life to an agent—inbox, meeting notes, blog posts, and the food shop—and does a live Decathlon purchase where the agent drives checkout and Debbie approves. · tags: live-streams, ai, grok-bot, interviews - [I Created an AI Fitness Coach with Grok Bot](https://www.youtube.com/watch?v=WKXZuPD7X2s): Video · 2026-09-08 · I created a Grok Bot coach for gym, nutrition, and accountability after having twins. It sets goals with real constraints, builds workouts from photos of my home gym, tracks protein from food packaging, critiques workout videos, and adds follow-along videos to my YouTube playlist. · tags: ai, grok-bot - [Grok Bot does my shopping (while walking the twins)](https://www.youtube.com/watch?v=bd2KnjGJ6BM): Video · 2026-08-24 · Quick walk-through of how I did my full shop with Grok Bot from my phone, while out with the twins. · tags: ai, grok-bot - [Grok Bot Is Insane. Here's How to Use It in Tech.](https://www.youtube.com/watch?v=tg7asTfgG7E): Video · 2026-08-24 · Francesco Ciulla talks with Debbie O'Brien about using Grok Bot as a personal AI chief of staff for content, conferences, calendar, shopping, meetings, and everyday tasks. · tags: ai, grok-bot - [Job Hunt With a Bot? (Grok Bot Finds Roles for Me)](https://www.youtube.com/watch?v=f4ent80mR4w): Video · 2026-08-22 · I need to look for a job, so I made a Job Hunt bot on Grok Bot. It looked me up online, found roles, and can even do interview prep. · tags: ai, grok-bot - [I sent Grok Bot to buy my gluten-free beer](https://www.youtube.com/watch?v=6v9txfFIwtw): Video · 2026-08-16 · I ran out of gluten-free beer and asked my Grok Bot chief of staff to buy more. Amazon jumbo rolls from my phone, Alcampo wouldn't let me log in, a morning podcast, and a delivery slot I can keep adding to. · tags: ai, grok-bot - [Can Grok Bot Book My Flights? Let's Find Out](https://www.youtube.com/watch?v=xDNLKLg7Ib8): Video · 2026-08-13 · Can Grok Bot actually book flights? A real Palma to Dublin trip for two adults and two toddlers — what it handled, where Ryanair checkout got stuck, plus a content publishing recipe with blog, LinkedIn, X, and Dev.to bots. · tags: ai, grok-bot - [How to Get Started with Grok Bot](https://www.youtube.com/watch?v=kiDvQnoCveU): Video · 2026-08-11 · Grok Bot just dropped. I downloaded it on a Mac the same day and recorded myself setting it up. Not a feature list — what I actually clicked, what worked, and which bots I would create. · tags: ai, grok-bot - [Frontend Nation 2026: How I Used AI to Fix Our E2E Test Architecture by Debbie O'Brien](https://www.youtube.com/watch?v=HAoE8XncIWM): Video · 2026-06-11 · What happens when your E2E tests pass in CI but fail locally? In this Frontend Nation 2026 talk, Debbie O'Brien shares how she used AI to analyze 14,000 lines of Playwright test infrastructure, uncover hidden issues, and systematically improve the reliability of an end-to-end testing suite—including a reusable AI-driven workflow that implemented 33 targeted improvements. · tags: conference-talk, playwright, testing, ai - [Coffee and Open Source Conversation - Debbie O'Brien](https://www.youtube.com/watch?v=Lz32-p2JeUA): Video · 2026-05-19 · Debbie joins Isaac Levin on Coffee and Open Source to chat about her journey in frontend development, working in dev rel, her love for Vue.js and Nuxt.js, and her current focus on end-to-end testing with Playwright. · tags: interviews, playwright, testing, nuxt, vue, dev-rel - [The Agentic Developer: Orchestrating AI Workflows with MCPs](https://www.youtube.com/watch?v=PbC5m-4P4hU): Video · 2026-04-27 · The future of development isn't just AI-assisted, it's AI-orchestrated. In this talk from Vue Amsterdam, explore how to build powerful agentic workflows that transform how developers work — assigning tasks directly to AI agents, leveraging the Model Context Protocol (MCP) ecosystem to extend agent capabilities, and verifying agent work using tools like Playwright. · tags: ai, mcp, conference-talk, vue - [Playwright MCP: Master AI-Powered Debugging & Browser Automation](https://www.youtube.com/watch?v=3x6J5IEEp5E): Video · 2026-04-09 · In this session of TestMu Conference 2025, Debbie O'Brien explores how AI is transforming slow and unreliable testing workflows with smarter debugging, AI-powered test creation, and seamless browser automation using Playwright MCP. · tags: conference-talk, playwright, testing, ai, mcp - [Build Better AI Agent Skills With Skill Creator v2 from Anthropic](https://www.youtube.com/watch?v=WplS5lycPHM): Video · 2026-03-21 · A walkthrough of Anthropic's Skill Creator v2 showing how to review and improve real agent skills using sub-agents, evals, and benchmark comparisons for GitHub Copilot, Claude Code, and other coding agents. · tags: ai - [Este año puede haber despidos masivos por la IA - Debbie O'Brien, Developer IA](https://www.youtube.com/watch?v=L0ew62S4UZo): Video · 2026-03-12 · Interview with Debbie O'Brien, formerly Developer Advocate at Microsoft on the Playwright team, discussing AI coding, AI agents, and the impact of artificial intelligence on developer jobs and the future of programming. · tags: ai, interviews, playwright - [Build Websites, Games, and Teaching Resources With Google Gemini (No Coding Required)](https://www.youtube.com/watch?v=BUDAS6E4xyY): Video · 2026-03-09 · Did you know you can build a website in minutes using AI? In this video, Debbie shows how Google Gemini can generate complete websites and even simple games using nothing but a prompt — no coding skills required. · tags: ai - [What Are Skills? Build Your First AI Agent Skill in Minutes](https://www.youtube.com/watch?v=2REiUlciObk): Video · 2026-03-04 · Skills are the simplest way to teach your AI agent something new. In this beginner-friendly walkthrough, I'll break down exactly what a skill is, how it works, and we'll build one together from scratch in VS Code. · tags: ai - [I Got Laid Off From Block — My Second Layoff in Months | The Reality of Tech in 2026](https://www.youtube.com/watch?v=WxhqmxDW770): Video · 2026-02-27 · I was laid off from Block yesterday — just weeks into the job. This is my second layoff in a matter of months after Microsoft. In this video, I share exactly what happened, how I found out, what it feels like, and where I think the tech industry is headed. · tags: dev-rel - [Order Food Directly From Your AI Agent 🍽️ Goose + Neighborhood Extension and MCP Apps](https://www.youtube.com/watch?v=DG1HUFsekyc): Video · 2026-02-24 · Learn how to use the Neighborhood extension in Goose to discover nearby restaurants, browse interactive menus, and place a takeout order — all from a simple chat prompt. · tags: ai, mcp - [Agentic Testing and Browser Automation with Playwright CLI Skill Live Stream](https://www.youtube.com/watch?v=4pW1DrERvm0): Video · 2026-02-19 · Learn how to use Playwright CLI skills to automate browser actions with the goose OSS agent. This tutorial demonstrates building and using skills, including generating Playwright tests and browser interactions. Explore the dashboard for monitoring agent tasks and debugging with traces and video recordings. · tags: live-streams, playwright, ai, testing - [How to Use Playwright Skills for Agentic Testing](https://www.youtube.com/watch?v=_MpbmD_unnU): Video · 2026-02-13 · In this video, you'll learn how to set up Playwright Skills to enable an agent to browse the web, perform real user actions, and automatically generate Playwright tests from those interactions. · tags: playwright, ai, testing - [Supercharged Testing: AI-Powered Workflows with Playwright + MCP - Debbie O'Brien](https://www.youtube.com/watch?v=Numb52aJkJw): Video · 2026-02-11 · AI is changing how we build software and it's about to change how we test it. Learn how to supercharge your end-to-end testing strategy by combining Playwright's powerful test capabilities with the Playwright MCP Server to enable intelligent, AI-assisted workflows. Covers modern locators, resilient test patterns, parallelization, debugging features, and connecting the Playwright MCP Server to an LLM for automated test generation, coverage gap identification, and debugging failing tests. · tags: playwright, testing, ai, mcp, conference-talk - [I'm Back ❤️ Layoffs, AI, New Job & What's Next](https://www.youtube.com/watch?v=zaFJ2E70jUo): Video · 2026-02-08 · I'm back ❤️ After a few very quiet months, layoffs, big life changes, and a lot of reflection — I'm starting a brand new chapter at Block, diving deep into AI… and I wanted to share the journey with you. · tags: ai - [From Prompt to Context Engineering: Spark Your Ideas the Right Way](https://www.youtube.com/watch?v=-7o0S1V4lKg): Video · 2025-12-19 · This talk was recorded at the Lisbon Exhibition and Congress Centre in Lisbon, Portugal at the Azure Dev Summit. · tags: conference-talk, ai - [Goose AI Fixed My Broken Zsh Config (and Saved Me Hours)](https://www.youtube.com/watch?v=fk6S4yLxzYU): Video · 2025-12-15 · A first look at Goose, a local-first, open-source AI agent framework released by Block. Watch as Goose detects a syntax error in the .zshrc file, finds that two PATH exports were accidentally merged into one line, safely edits the config file, and explains exactly why the terminal wasn't picking up the changes. · tags: ai, mcp - [AIDD Day MCP Edition: Supercharged Testing: AI-Powered Workflows with Playwright + MCP](https://www.youtube.com/watch?v=Z_kJlltXIQA): Video · 2025-11-26 · AI is changing how we build software, and it's about to change how we test it. Learn how to supercharge your end-to-end testing strategy by combining Playwright's powerful test capabilities with the Playwright Test MCP (Model Context Protocol) Server through Playwright Agents to enable intelligent, AI-assisted testing workflows. · tags: conference-talk, playwright, ai, mcp, testing - [How I Vibe Code - Live session on improving my site design with Goose and Gemini 3](https://www.youtube.com/watch?v=nSsBYokJefw): Video · 2025-11-20 · This is such a fun session where I tested out Gemini 3 LLM along with Goose as my coding agent to improve my site design. Watch as I try to tell it what I want and my reaction at the matrix style hero it gave me. Very cool and impressive what it can do in such a short space of time. · tags: live-streams, ai - [Supercharged Testing: AI-Powered Workflows with Playwright + MCP](https://www.youtube.com/watch?v=CR4mBQFVWUU): Video · 2025-11-19 · AI is changing how we build software—and it's about to change how we test it. In this session, you'll learn how to supercharge your end-to-end testing strategy by combining Playwright's powerful test capabilities with the Playwright MCP Server to enable intelligent, AI-assisted workflows. · tags: conference-talk, playwright, ai, mcp, testing - [How I vibe code - Live session featuring Claude, Copilot, Goose and Playwright Healer](https://www.youtube.com/watch?v=bwqOE6ngdtg): Video · 2025-11-18 · In this live session i go though how I make changes to my website running multiple agents at the same time to modify and improve my website, heal tests along the way and check linting and accessibility. · tags: live-streams, ai, playwright - [Playwright MCP Servers Explained: Automation and Testing](https://www.youtube.com/watch?v=U5Hsa6s2EqE): Video · 2025-11-17 · Model Context Protocol (MCP) meets Playwright! In this video, we explore how MCP servers bridge the gap between AI and browser automation, enabling intelligent testing workflows. Learn how to set up Playwright MCP servers, understand their architecture, and see real-world examples of AI-powered testing in action. · tags: playwright, mcp, testing, ai - [Test Debugging with Playwright's Healer Agent — Walkthrough](https://www.youtube.com/watch?v=KEjFCe3Qg3Y): Video · 2025-11-13 · Watch as Playwright's new Healer agent automatically diagnoses and fixes failing tests! This walkthrough demonstrates how AI can intelligently analyze test failures, identify root causes, and suggest or even implement fixes. See the future of test maintenance in action. · tags: playwright, testing, ai - [Build your First AI Agent with n8n and Gemini](https://www.youtube.com/watch?v=x20mG6AigRg): Video · 2025-11-06 · Ready to build your first AI agent? This tutorial walks you through creating an intelligent automation agent using n8n's visual workflow builder and Google's Gemini AI. Learn how to combine no-code automation with powerful AI capabilities to create agents that can handle complex tasks. · tags: ai - [Using GitHub Copilot for Code Reviews on a Legacy Codebase](https://www.youtube.com/watch?v=85NM9EGnNx0): Video · 2025-10-27 · See how GitHub Copilot can transform code reviews on legacy codebases! This video demonstrates practical techniques for using AI to understand, analyze, and review older code. Learn how Copilot can help identify issues, suggest improvements, and make legacy code review more efficient and thorough. · tags: ai - [Playwright Live - Playwright Agents & Playwright MCP](https://www.youtube.com/watch?v=S4qzP07ZkOg): Video · 2025-10-09 · Playwright Live session on Playwright Agents with Debbie O'Brien and Ben Fellows—using the planner agent to generate test plans, the generator agent to create tests from those plans, and the healer agent to debug and fix failing tests. · tags: live-streams, playwright, testing, ai, mcp - [Playwright v1.56 - From MCP to Playwright Agents](https://www.youtube.com/watch?v=_AifxZGxwuk): Video · 2025-10-06 · This video demonstrates how Playwright Agents can automatically generate test plans, create Playwright tests based on those plans, and debug/fix failing tests using the Healer agent. It covers using the Planner agent to build test plans, the Generator agent to create real Playwright tests, and the Healer agent to debug and fix broken tests. The video walks through seeding tests with fixtures and setup files, providing a complete workflow for AI-powered end-to-end testing with Playwright. · tags: playwright, testing, ai, mcp - [AI-Driven Development Day 2025: AI Testing & Browser Automation with Playwright](https://www.youtube.com/watch?v=pGPWSILa0PM): Video · 2025-09-19 · Looking to supercharge your web automation game? In this talk, from AI-Driven Development Day 2025, Debbie O'Brien reveals how Playwright + the Model Context Protocol (MCP) lets AI agents do more than just test - they can now browse, interact, and automate the web intelligently. · tags: conference-talk, playwright, ai, mcp, testing - [Take Screenshots with Playwright MCP - Effortless Documentation Creation](https://www.youtube.com/watch?v=Jfi08dULAmw): Video · 2025-09-03 · Learn how to revolutionize your documentation workflow by automatically creating interactive screenshots using the Playwright MCP server! This tutorial shows you how to generate step-by-step visual guides with minimal effort. · tags: playwright, mcp, ai, testing - [Playwright Live - Playwright in VS Code](https://www.youtube.com/watch?v=8iZte7u4vlE): Video · 2025-08-29 · Playwright Live session with Debbie O'Brien and Simon Knott showing off Playwright in VS Code with the Playwright VS Code Extension—installation, configuration, running and debugging tests, locators, codegen, and more. · tags: live-streams, playwright, testing - [Playwright MCP + Chrome Extension Testing with Logged-In Profiles](https://www.youtube.com/watch?v=uE0r51pneSA): Video · 2025-08-21 · Before the Playwright MCP Browser Extension, using a logged-in state with the Playwright MCP server often meant giving your login credentials to the LLM. Now, with the extension, you can securely reuse your existing browser profile — no passwords required. The LLM can run tests against a session that's already authenticated. · tags: mcp, playwright, testing, ai - [Let's Learn MCP: TypeScript (Español)](https://www.youtube.com/watch?v=erqdtkd1GNg): Video · 2025-07-23 · Spanish-language beginner workshop on the Model Context Protocol (MCP), an innovative framework designed to standardize interactions between AI models and client applications. Featuring Debbie O'Brien and Miguel Angel Duran, walking through creating your first MCP server. · tags: mcp, typescript, live-streams, ai - [Let's Learn MCP JavaScript + TypeScript](https://www.youtube.com/watch?v=AKjW94vQZkc): Video · 2025-07-21 · Live stream session exploring MCP (Model Context Protocol) with JavaScript and TypeScript. Join the Visual Studio Code team as they demonstrate practical implementations and best practices for working with MCP. · tags: mcp, typescript, live-streams, ai - [New Playwright MCP Tool Evaluate JavaScript](https://www.youtube.com/watch?v=n0CFmm38o4Y): Video · 2025-07-17 · Learn about the new Playwright MCP tool for evaluating JavaScript in your testing workflows. Discover how this powerful integration enhances your testing capabilities by allowing direct JavaScript evaluation within your Playwright tests. · tags: playwright, mcp, testing, ai - [Manual Testing with Playwright MCP – No Code, Just Prompts!](https://www.youtube.com/watch?v=2vnttb-YZrA): Video · 2025-07-12 · Discover how to perform manual testing using Playwright MCP without writing any code, using simple prompts instead. This revolutionary approach makes testing accessible to everyone, regardless of their coding experience. · tags: playwright, mcp, testing, ai - [Automate Form Filling with a Prompt file and the Playwright MCP](https://www.youtube.com/watch?v=NSpCfRDS7vo): Video · 2025-07-10 · In this video, I'll show you how to use the Playwright MCP (Model Context Protocol) server to completely automate filling out a form — including uploading an image — just by writing a simple markdown prompt in VS Code. · tags: playwright, mcp, ai - [Supercharge Copilot with Custom Playwright Instructions in VS Code](https://www.youtube.com/watch?v=hYjXgdsk0mE): Video · 2025-07-09 · Learn how to give GitHub Copilot better context in your codebase by generating custom Playwright instructions and using VS Code's "Generate Instructions" feature for smarter, more context-aware suggestions. · tags: playwright, testing, ai - [Copilot Usage & Completion Settings in VS Code | Monitor Premium Requests + Snooze Next Edit](https://www.youtube.com/watch?v=9Ar-6qQzk8o): Video · 2025-07-08 · Learn how to configure Copilot usage and completion settings in VS Code, including monitoring premium requests and using the snooze next edit feature. Optimize your AI-powered development workflow for maximum efficiency. · tags: ai - [Install an MCP Server in VS Code. (Watch me install Playwright MCP)](https://www.youtube.com/watch?v=exsikHe20D8): Video · 2025-07-05 · A step-by-step guide to installing an MCP server in VS Code, specifically demonstrating the Playwright MCP installation process. Follow along as I walk through the complete setup and configuration. · tags: mcp, playwright, ai - [Exploring Playwright and MCP](https://www.youtube.com/watch?v=0CDGPWjajcE): Video · 2025-07-03 · From real-world advice on overcoming resistance to testing in teams to the exciting possibilities MCP brings for generating and scaling tests with natural language and AI, this conversation is packed with both practical tips and future-looking insights. · tags: playwright, testing, mcp, ai - [MCP Server Tutorial - Building Your First Model Context Protocol Server](https://www.youtube.com/watch?v=egVm_z1nnnQ): Video · 2025-07-03 · Learn how to build your first MCP (Model Context Protocol) server from scratch in this comprehensive tutorial. Perfect for developers looking to integrate AI applications with external data sources and tools. · tags: mcp, ai - [The Angular Show - Playwright Takes Center Stage](https://www.youtube.com/watch?v=tdmgXAUfWFo): Video · 2025-07-01 · insights on what makes Playwright different, the latest features transforming the testing landscape, and how AI is being integrated to make testing more intelligent and efficient. You can expect to learn why Playwright is becoming the go-to choice for modern web testing and how to leverage its powerful features in your projects. · tags: playwright, testing, mcp, ai - [Frontend Nation 2025: AI-Powered Debugging & Browser Automation with Playwright MCP](https://www.youtube.com/watch?v=rrrklkDzQ1M): Video · 2025-06-20 · Debbie O'Brien from Microsoft dives into how AI is changing the game for browser automation and testing. In this talk, you'll explore how Playwright is evolving with the help of AI; making debugging smarter, test creation faster, and browser interactions more adaptive through Playwright MCP (Model Context Provider). Whether you're writing tests or trying to make sense of flaky ones, Debbie shows how integrating AI into your workflow can help you work faster without losing control. Learn what's possible now and what's coming next in this powerful combination of testing and intelligence. · tags: conference-talk, playwright, testing, ai, mcp - [Vibe Coding - update a logo](https://www.youtube.com/watch?v=n3g8d9wA5vk): Video · 2025-06-20 · Vibe coding to update a logo on my site with the help of AI and GitHub Copilot. · tags: ai - [Assign an issue to GitHub Copilot](https://www.youtube.com/watch?v=2sch7u2-E8g): Video · 2025-06-19 · Use AI to complete issues for you by assigning issues to the GitHub Copilot coding agent. · tags: ai - [Agent Mode Generate Tests](https://www.youtube.com/watch?v=pwbgvbJP8KM): Video · 2025-06-09 · using agent mode to generate tests with Playwright and GitHub Copilot. · tags: mcp, ai, playwright, testing - [Agent Mode Complete this PR](https://www.youtube.com/watch?v=psdu0BVal6w): Video · 2025-06-03 · Getting agent mode to complete a PR with Playwright and GitHub Copilot. · tags: mcp, ai, playwright - [Advanced Playwright Debugging and Test Resilience](https://www.youtube.com/watch?v=zyOJfGtJ3Rw): Video · 2025-05-21 · Modern web applications demand robust testing and rapid debugging processes. In this session, we explore how to leverage Playwright's innovative Copy Prompt button to generate AI-assisted debugging insights and recommendations to fix your tests, reducing the time spent on debugging while increasing overall productivity. · tags: conference-talk, playwright, testing, ai - [Automation, Playwright, and the Future | Debbie O'Brien | #Qonfx2025](https://www.youtube.com/watch?v=9rrfvKBzMY0): Video · 2025-05-18 · In this QonfX 2025 fireside chat, Debbie O'Brien explores how AI is changing the landscape of test automation, the shifting role of programming, and what tools like Playwright might look like with deeper AI integration—plus role-specific advice for test leaders and engineers navigating this AI-led shift. · tags: conference-talk, playwright, testing, ai, interviews - [Playwright Live - Testing with AI using Playwright MCP (Model Context Protocol) + Live Demo](https://www.youtube.com/watch?v=CNzg1aPwrKI): Video · 2025-04-16 · Playwright Live session with Debbie O'Brien and Simon Knott diving into Playwright MCP (Model Context Protocol)—what MCP is, live demos of driving browsers with language models for testing, and how to start experimenting with it today. · tags: live-streams, playwright, testing, ai, mcp - [Advanced Playwright Techniques for flawless testing | Debbie O'Brien | #testflix2024](https://www.youtube.com/watch?v=W1tFtIA7rWA): Video · 2025-01-20 · In this TestFlix 2024 session, Debbie O'Brien dives into Advanced Playwright Techniques for Flawless Testing—covering efficient test setup, test annotations, API mocking, and other practical insights for enhancing test reliability. · tags: conference-talk, playwright, testing - [Advanced Playwright Techniques for Flawless Testing](https://www.youtube.com/watch?v=ybYK9jM0lco): Video · 2024-11-13 · This talk explores advanced Playwright techniques for achieving flawless testing. It was recorded at Copenhagen Developers Festival in Copenhagen, Denmark, covering best practices, effective locator strategies, and automation approaches. · tags: conference-talk, playwright, testing, typescript - [Advanced Playwright Techniques for Flawless Testing](https://www.youtube.com/watch?v=O0TeeSbQPWY): Video · 2024-08-25 · Here's another session on "Advanced Playwright Techniques for Flawless Testing" by 𝐃𝐞𝐛𝐛𝐢𝐞 𝐎'𝐁𝐫𝐢𝐞𝐧, Senior Program Manager, Microsoft. In this talk, she explores some advanced Playwright capabilities and uncovers a range of features that you may not know about, from project dependencies to box steps, API mocking, testing time, and more. · tags: conference-talk, playwright, testing - [E2E Testing using Playwright with Debbie O'Brien from Microsoft](https://www.youtube.com/watch?v=lcHaBZKuPdk): Video · 2024-07-10 · In this livestream Debbie O'Brien, Senior Technical PM at Microsoft, joins Eddie Jaoude to add Playwright to a Next.js project (Healthcheck), covering why automated testing early gives confidence that a project is stable. · tags: live-streams, playwright, testing - [Frontend Nation 2024: Debbie O'Brien - Testing with Playwright in an AI-Assisted Development World](https://www.youtube.com/watch?v=PJExSphHd-k): Video · 2024-06-06 · In her Frontend Nation talk, Debbie O'Brien explores the crucial role of testing with Playwright in the era of AI-assisted development—how Playwright can be your testing co-pilot with codegen, tracing, and cross-browser testing while embracing tools like GitHub Copilot. · tags: conference-talk, playwright, testing, ai - [A chat with Debbie O'Brien](https://www.youtube.com/watch?v=LGZHiAr2Wdo): Video · 2024-03-12 · For this episode of the BeJS Podcast/chat, Debbie O'Brien joins BeJS. Debbie is Senior Technical Program Manager at Microsoft, a Microsoft MVP in developer technologies, Google Developer Expert in web technologies, GitHub Star, and international speaker. · tags: interviews, live-streams - [Everyone Can Easily Write Tests - Debbie O'Brien, TestJS Summit 2023](https://www.youtube.com/watch?v=SR7KbeImRII): Video · 2023-12-18 · Let's take a look at how Playwright can help you get your end to end tests written with tools like Codegen that generate tests on user interaction. Explore UI mode for a better developer experience, then go further with Playwright's testing features. · tags: conference-talk, playwright, testing - [DEBBIE O'BRIEN - Playing your tests wright](https://www.youtube.com/watch?v=LrUxVstGM08): Video · 2023-11-07 · Debbie O'Brien presents Playing your tests wright at React Alicante 2023. · tags: conference-talk, playwright, testing, react - [End to End Testing with Playwright](https://www.youtube.com/watch?v=kqJSrSU9DPY): Video · 2023-10-06 · Lets’ take a look at how to test across iframes and different browser contexts by testing the user flow of the Stackblitz website, setting up a Vite project in Stackblitz, modifying the code and sharing it so others can open and interact with it. Let’s get testing. · tags: conference-talk, playwright, testing - [Aprende a crear Test de forma Facil](https://www.youtube.com/watch?v=x8wmQ-8oaMU): Video · 2023-09-17 · See how easy it is to create tests with Playwright especially using tools like Codegen and UI mode for a better developer experience. Talk is in Spanish. · tags: conference-talk, playwright, testing - [Test automation with Playwright](https://www.youtube.com/watch?v=1yaqKDHhktI): Video · 2023-07-19 · You know you need more end-to-end testing, but at what cost? In this Microsoft Build 2023 demo session, Debbie O'Brien and Max Schmitt show how Playwright can save developers time, increase productivity, and catch issues closer to code authoring — including integrating tests into CI/CD so regressions are caught before they impact you. · tags: conference-talk, playwright, testing - [e2e Testing with Playwright](https://www.youtube.com/watch?v=uB6bOQV18X0): Video · 2023-06-30 · GirlCode Coffee Break - our casual monthly get together. Let's chat about things in Tech that we care about, but address way too little. This week, we are joined by Debbie O'Brien (https://twitter.com/debs_obrien), to talk about End to End Testing and all things Playwright · tags: interviews, testing, playwright - [e2e testing with Playwright | OD111](https://www.youtube.com/watch?v=Wgp1a1XRq3I): Video · 2023-05-24 · Join Debbie O'Brien to catch up on all things new in Playwright — from the locators API to the Visual Studio Code extension, plus UI Mode with watch mode and time travel debugging. Recorded as Microsoft Build 2023 on-demand session OD111. · tags: conference-talk, playwright, testing - [Playing your Tests Wright](https://www.youtube.com/watch?v=yMSIsavrOR4): Video · 2023-05-19 · It’s time to play your tests wright. Let’s take a look at how to write good tests and cover some of the best practices for testing, choosing the right locators and more. Let’s make testing easy and fun by generating tests on user actions. Then lets explore some cool tips and tricks to help you write better tests. · tags: conference-talk, testing, playwright - [End to end testing with playwright](https://www.youtube.com/watch?v=sKUVyVd-nJg): Video · 2023-05-04 · Debbie shows Tim how to get started with Playwright and use some of the powerful tooling including UI mode and the VS Code extension and most importantly how to debug when tests fail. · tags: playwright, testing - [Playing your tests wright](https://www.youtube.com/watch?v=4K6YR5FbjM0): Video · 2023-05-04 · It's time to play your tests wright. Let's take a look at how to write good tests and cover some of the best practices for testing, choosing the right locators and more. Let's make testing easy and fun by generating tests on user actions. · tags: playwright, testing - [Playing your tests wright in VS Code](https://www.youtube.com/watch?v=ECkMUATC1aA): Video · 2023-05-01 · Get started with Playwright and VS Code using the VS Code extension. Create, run and debug your tests right in VS Code. · tags: playwright, testing - [Testing tools for developers](https://www.youtube.com/watch?v=b9slZ76u2Vs): Video · 2023-04-23 · Let's take a look at how to write good tests and cover some of the best practices for testing, choosing the right locators and more. Let's make testing easy and fun by generating tests on user actions. Then lets explore some cool tips and tricks to help you write better tests. · tags: playwright, testing - [Introduction to Playwright for e2e testing](https://www.youtube.com/watch?v=lCb9JoZFpHI): Video · 2023-04-05 · Easily generate tests with Playwright`s test generator, use Project dependencies to setup authentication before running your tests to ensure your tests are in a loggedin state. Run your tests across multiple browsers and visually see them run or check out the HTML report or trace of your test! · tags: live-streams, testing, playwright - [Let's test with Playwright](https://www.youtube.com/watch?v=vEwCyggZzhI): Video · 2023-04-05 · Playwright has released a UI mode for debugging and writing tests and it has sparked interest in the testing community. With Debbie, we are going to take a look into this new feature and see how it improves Playwright experience. · tags: playwright, testing - [Playing your Tests Wright](https://www.youtube.com/watch?v=n-ooHE-rNnw): Video · 2023-02-12 · It's time to play your tests wright. Let's take a look at how to write good tests and cover some of the best practices for testing, choosing the right locators and more. Let's make testing easy and fun by generating tests on user actions. Then lets explore some cool tips and tricks to help you write better tests. · tags: conference-talk, testing, playwright - [Component Testing with Playwright, Debbie O'Brien, ViteConf 2022](https://www.youtube.com/watch?v=ZF1W6FxWOiA): Video · 2023-02-03 · Let's make testing easy and fun. From installation to getting tests running on CI, generating and running tests without leaving your editor, and using Trace Viewer for component test debugging—Playwright helps you create better and more stable applications. · tags: conference-talk, playwright, testing - [Playwright with Debbie O'Brien (JS Party Live!)](https://www.youtube.com/watch?v=1I3lEiSlwvY): Video · 2022-11-21 · Amal Hussein and Nick Nisi welcome Debbie O'Brien to discuss all things Playwright on JS Party Live. · tags: live-streams, playwright, testing, interviews - [Testing Blazor Applications with Playwright](https://www.youtube.com/watch?v=VavFU2vLnT0): Video · 2022-11-09 · Let me introduce you to Playwright - Reliable end-to-end cross browser testing for modern web apps, by Microsoft and fully open source. Playwright's codegen generates tests for you so now you really have no excuses. It's time to play your tests wright · tags: conference-talk, testing, playwright - [Testing Web Applications with Playwright - Debbie O'Brien, TestJS Summit 2022](https://www.youtube.com/watch?v=kfGzzzx572A): Video · 2022-11-07 · Testing is hard and takes time — so how do we get more developers to do it? Debbie introduces Playwright for reliable end-to-end cross-browser testing, including Codegen, the VS Code extension, debugging, and CI. Talk from TestJS Summit 2022. · tags: conference-talk, playwright, testing - [Testing Web Applications with Playwright](https://www.youtube.com/watch?v=meiA4TPltoI): Video · 2022-10-19 · Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. · tags: conference-talk, testing, playwright - [Testing Web Applications with Playwright](https://www.youtube.com/watch?v=Vn__rlS36yc): Video · 2022-10-12 · Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. · tags: conference-talk, testing, playwright - [Testing Web Applications with Playwright](https://www.youtube.com/watch?v=Cjg545ew1q8): Video · 2022-10-07 · Let me introduce you to Playwright - Reliable end-to-end cross browser testing for modern web apps, by Microsoft and fully open source. Playwright’s codegen generates tests for you in JavaScript, TypeScript, Dot Net, Java or Python. Now you really have no excuses. It\’s time to play your tests wright. · tags: conference-talk, testing, playwright - [Testing Web Applications with Playwright](https://www.youtube.com/watch?v=xkSnDXjCEvU): Video · 2022-10-05 · Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. · tags: conference-talk, testing, playwright - [Testing Web Applications with Playwright](https://www.youtube.com/watch?v=kbTohfkZAMA): Video · 2022-09-28 · Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. · tags: conference-talk, testing, playwright - [Testing Web Applications with Playwright](https://www.youtube.com/watch?v=_1vQ4Wj9KtA): Video · 2022-09-20 · Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. · tags: conference-talk, testing, playwright - [Aprende Tests End to End con Playwright](https://www.youtube.com/watch?v=WlDkXteR8io): Video · 2022-09-13 · Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. · tags: conference-talk, testing, playwright - [Playwright cross browser automated testing](https://www.youtube.com/watch?v=jorsD4lInwA): Video · 2022-07-15 · Playwright enables reliable end-to-end testing for modern web apps. Let's walk though the docs and get started with Playwright in this live stream! · tags: live-streams, playwright, testing - [Testing Web Applications with Playwright and .NET](https://www.youtube.com/watch?v=MWaxxbOdIrw): Video · 2022-06-28 · Let me introduce you to Playwright - Reliable end-to-end cross browser testing for modern web apps, by Microsoft and fully open source. Playwright’s codegen generates tests for you in JavaScript, TypeScript, Dot Net, Java or Python. Now you really have no excuses. It\’s time to play your tests wright. · tags: conference-talk, testing, playwright - [Testing Web Applications with Playwright](https://www.youtube.com/watch?v=dxbh0bl4It8): Video · 2022-06-02 · Testing is hard, testing takes time to learn and to write, and time is money. As developers we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. · tags: conference-talk, testing, playwright - [It's all about components](https://www.youtube.com/watch?v=YWr5XnoDru4): Video · 2022-05-13 · When is it a good time to make a new component or reuse one that is already created? Making these decisions early on is key to great software architecture. If we think before we build, we can build amazing apps that will easily scale. · tags: conference-talk, architecture - [It's All About Components](https://www.youtube.com/watch?v=6mjDrGPF3P8): Video · 2022-03-31 · The frontend is a great place to be in these days and as apps get bigger and bigger, components get more difficult to maintain. But are we really building component driven? Do we really know how to take a design and break it down into components? How small do we go? How do we name things? When is it a good time to make a new component or reuse one that is already created? Making these decisions early on is key to great software architecture. If we think before we build, we can build amazing apps that will easily scale. · tags: conference-talk, architecture - [Handling Content on the Modern Web](https://www.youtube.com/watch?v=0hp-G107dT0): Video · 2022-03-24 · Virtual panel moderated by Kaya of Wordify with leading web personalities Tracy, Lee, Debbie and Kent as we take a dive into what content on the web looks like and how various products across developer tooling, hosting and content management are making leaps to create better, faster experiences for users on the web. · tags: interviews, jamstack - [Volar by Debbie O'Brien: Vue.js Nation 2022 Mighty Bites](https://www.youtube.com/watch?v=jiJwVqxlHAY): Video · 2022-02-08 · Debbie O'Brien shares why Volar is the recommended VS Code extension for Vue 3 development, including full support for script setup and understanding the relationship between it and the template. A short Mighty Bite from Vue.js Nation 2022. · tags: conference-talk, vue - [Learning React with the New React Docs](https://www.youtube.com/watch?v=-7odLW_hG7s): Video · 2021-12-08 · A look at my my journey to learning React, what I found difficult to grasp and how the new docs helped me and what my favourite parts of the new docs are. · tags: conference-talk, react, learning-to-code - [Component Driven Repo for a Component Driven World](https://www.youtube.com/watch?v=nQA48vH2CCc): Video · 2021-11-28 · We think in monorepos when we want to share components across many teams and apps. but let's face it, we all hate monorepos. As soon as we hear the word we just think legacy. But it doesn't have to be. But if we make our repos component driven, where we can easily share components across any repos or apps then everything changes. We really are moving towards a component driven world so lets start building in component driven repos. · tags: conference-talk, architecture - [Component Driven Repo for a Component Driven World](https://www.youtube.com/watch?v=Gb9o4VI8wLU): Video · 2021-11-18 · We think in monorepos when we want to share components across many teams and apps. but let's face it, we all hate monorepos. As soon as we hear the word we just think legacy. But it doesn't have to be. But if we make our repos component driven, where we can easily share components across any repos or apps then everything changes. We really are moving towards a component driven world so lets start building in component driven repos. · tags: conference-talk, architecture - [From Vue to React](https://www.youtube.com/watch?v=70b-gtHkOZ8): Video · 2021-11-12 · Transitioning from Vue to React. Debbie joins to talk all about it, her learning process, which features she likes more from which frameworks, and so much more! · tags: interviews, vue, react - [Composing Modern Applications with Bit](https://www.youtube.com/watch?v=Hzj26kS8GK8): Video · 2021-11-10 · Alex and Brittney sit down with Debbie O'Brien to talk about bit (bit.dev). We dive deep into how you can use bit to compose your application one bit at a time. · tags: interviews, architecture - [Taking Component Driven One Step Further](https://www.youtube.com/watch?v=Nrr-aw1mJY0): Video · 2021-10-25 · We think in monorepos when we want to share components across many teams and apps. but let’s face it, we all hate monorepos. As soon as we hear the word we just think legacy. But it doesn’t have to be. But if we make our repos component driven, where we can easily share components across any repos or apps then everything changes. We really are moving towards a component driven world so lets start building in component driven repos. · tags: conference-talk, architecture - [Component Driven Repo for Component Driven World](https://www.youtube.com/watch?v=nuDwgjkRNSI): Video · 2021-10-20 · We think in monorepos when we want to share components across many teams and apps. but let's face it, we all hate monorepos. As soon as we hear the word we just think legacy. But it doesn't have to be. But if we make our repos component driven, where we can easily share components across any repos or apps then everything changes. We really are moving towards a component driven world so lets start building in component driven repos. · tags: conference-talk, architecture - [Scaling Team Delivery using Standardisation](https://www.youtube.com/watch?v=R2Q0L9PDHtc): Video · 2021-10-14 · How can you scale fast, build fast and yet keep the same standards across all projects and teams? Let’s take a look at tooling as well as creating shareable configs and template generators for components so you can speed up your team’s delivery. · tags: conference-talk, architecture - [Nuxtify your Images](https://www.youtube.com/watch?v=IV890jKXe_s): Video · 2021-09-15 · There is a way to have better control as a developer on the image performance of your website. Debbie will walk you through the greatness of Nuxt Images and showcase all the benefits of using this plug-and-play image optimization module. · tags: conference-talk, nuxt, performance - [Component Driven Development with React and Bit](https://www.youtube.com/watch?v=SRK-8UEVleY): Video · 2021-09-08 · In this episode we'll learn how to build React components with Bit so that we can more easily scale our websites and apps! · tags: live-streams, architecture, react - [GitHub Stars Stories - are you the next GitHub Star?](https://www.youtube.com/watch?v=9UHDTz5PCkw): Video · 2021-07-31 · Recognize those who go above and beyond. Lift up the people who inspire and educate your communities with the GitHub Stars program · tags: interviews - [Nuxt Performances](https://www.youtube.com/watch?v=0Y-XdRyUb1U): Video · 2021-07-08 · Performance is super important for any app. Did you know all the cool things Nuxt does for you out of the box, to make sure your app is as performant as possible? Let’s take a look at them and dive into some more performance enhancements for your Nuxt app. · tags: conference-talk, nuxt, performance - [VueConf US 2021 | Nuxt Performance by Debbie O'Brien](https://www.youtube.com/watch?v=ZFQNYfTx4wM): Video · 2021-06-14 · Nuxt is performant out of the box, doing a lot for you automatically. Take a look at how webpack works for lazy loading and code splitting, and how Nuxt Image makes your images super performant. Talk from VueConf US 2021. · tags: conference-talk, nuxt, performance, vue - [Theming Components in React](https://www.youtube.com/watch?v=6WL9t63LjzM): Video · 2021-05-26 · Let's take a look at how to add a theme context to your React components so you can easily add theming. · tags: live-streams, react, architecture - [Building Components in Harmony](https://www.youtube.com/watch?v=mbURSw1fhoc): Video · 2021-05-19 · What if we thought about building components so that they are extendable, theme-able, and reusable across different code bases. If we could do that then we would be able to deliver applications at a much faster pace. We would be able to scale much easier. It's not easy but that is exactly why Bit Harmony was built. · tags: conference-talk, architecture - [Let's Build with Bit](https://www.youtube.com/watch?v=7afMBwj5fR4): Video · 2021-05-19 · What is Bit? Bit is a platform for building with components. You can use Bit to build UI components, hooks, middleware, server-less functions and all things JavaScript! In this session, learn how to build more scalable and reusable components. Let’s take a look at how we can get your components in the cloud complete with documentation, tests and compositions, so they can easily be shared and used in other applications. · tags: live-streams, architecture - [Breaking down your React app into components](https://www.youtube.com/watch?v=2jojhi5W4BM): Video · 2021-05-14 · Let's see if we can help Tim improve his application and think in components and perhaps get him to try out Bit · tags: live-streams, react, architecture - [Bit - A better way to build with modern components](https://www.youtube.com/watch?v=ItgsipIm9s0): Video · 2021-05-07 · Talk about the Bit platform, advantages of using Bit, frameworks supported, and how to get started. · tags: interviews, architecture - [CSS Animations with Julia](https://www.youtube.com/watch?v=4HfC9OirWVI): Video · 2021-05-07 · Let's learn how to animate with CSS and create a Beaver who moves its tail and eyebrows. · tags: live-streams, css - [What is a Developer Advocate](https://www.youtube.com/watch?v=WlpHiYQGG6k): Video · 2021-04-26 · If you ever wondered what developer advocates do, how their typical day looks like, or want to know how to get started with advocacy, this episode is for you! · tags: interviews, dev-rel - [Women in Tech Panel](https://www.youtube.com/watch?v=xytiKzxfzJ8): Video · 2021-03-09 · Very fun and interesting chat about all things tech related and how we have all just changed jobs, how long we stay in jobs, what we do when we consider moving jobs and so much more. · tags: interviews, nuxt - [DevRel Roundtable](https://www.youtube.com/watch?v=lSxU_q-8Rrc): Video · 2021-03-08 · Welcome to the second episode of the DevRel roundtable series where I invite developer relation people to a roundtable discussion to converse on whatever topics we feel are relevant. This episode features Debbie O'Brien and Lucie Haberer. · tags: interviews, dev-rel - [Nuxt Storyblok](https://www.youtube.com/watch?v=w4-9B_cKeu4): Video · 2021-03-05 · Come watch Samuel from Storyblok try to convince me that Storyblok is better than Nuxt Content. It's gonna be a fun one. · tags: live-streams, nuxt, cms - [Going Static in a Dynamic World with Hasura and Nuxt.js](https://www.youtube.com/watch?v=Spt4j_Xq79w): Video · 2021-03-02 · This talk covers how to use static sites with Hasura, from setting up your endpoint, adding the query to Nuxt.js to display your data with Apollo and GraphQL, how to setup a hook so that it triggers a deploy of your site on content change as static sites need to be redeployed on content change. · tags: conference-talk, nuxt, jamstack, hasura - [Nuxt Prismic](https://www.youtube.com/watch?v=xUwST2bAWw8): Video · 2021-03-02 · Let's build a Nuxt application with Prismic CMS. Lucie will teach me everything I need to know so I can easily build a Nuxt site with my content coming from Prismic. · tags: live-streams, nuxt - [Nuxt and Strapi](https://www.youtube.com/watch?v=Rj1qYm5zctE): Video · 2021-02-18 · Let's learn how to use Strapi, a headless CMS to get some food data onto our Nuxt app with a bit of GraphQL. · tags: live-streams, nuxt, cms - [Interview with Debbie O'Brien](https://www.youtube.com/watch?v=u7UzYB3PBD4): Video · 2021-02-13 · Spanish - About me and how I get into coding, my acting career and so many more questions with lots of fun answers. · tags: interviews, nuxt - [GitHub Stars with Debbie O'Brien](https://www.youtube.com/watch?v=UE64S_ExxY4): Video · 2021-01-15 · Interview on all things Nuxt and how my background including my story on how I got into Open Source and working at Nuxt · tags: interviews, nuxt - [Going Static in a Dynamic World with Hasura and Nuxt.js • Debbie O'Brien • GOTO 2020](https://www.youtube.com/watch?v=1j9DIX32GpY): Video · 2020-12-15 · This talk covers how to use static sites with Hasura — setting up your endpoint, querying data in Nuxt.js with Apollo and GraphQL, securing your API, and triggering redeploys on content change. Recorded at GOTOpia Europe 2020. · tags: conference-talk, nuxt, jamstack, hasura - [The Web Show - !Static Times with Debbie O'Brien](https://www.youtube.com/watch?v=NCID3OL02B0): Video · 2020-11-26 · Conversation on Nuxt and static times with a look back on previous jobs and how I got to where I am today. · tags: interviews, nuxt - [Going Static in a Dynamic World with Hasura and Nuxt.js](https://www.youtube.com/watch?v=fe3Y1_Na9K4): Video · 2020-11-06 · This talk covers how to use static sites with Hasura, from setting up your endpoint, adding the query to Nuxt.js to display your data with Apollo and GraphQL, how to setup a hook so that it triggers a deploy of your site on content change as static sites need to be redeployed on content change. · tags: conference-talk, nuxt, jamstack, hasura - [The CloudSkills Show - Intro to JavaScript Frameworks](https://www.youtube.com/watch?v=eRjqRhdWpCk): Video · 2020-11-05 · This episode is all about Javascript, and understanding some of the frameworks. In the show, we’ll get an introduction to Node.js - a runtime which allows developers to use Javacript on the server-side and in the cloud. · tags: interviews, nuxt - [Contentful and Nuxt](https://www.youtube.com/watch?v=MuKzaCoDB1E): Video · 2020-10-27 · Let's build a running app so we can connect our running data to Contentful and show it in our Nuxt app using GraphQL. · tags: live-streams, nuxt - [What's new in Nuxt](https://www.youtube.com/watch?v=cppypvbgUBs): Video · 2020-10-22 · Nuxt.js, the intuitive web framework, has had some killer features recently released. Debbie will take you through those new features and shed some light on what is to come in Nuxt.js · tags: conference-talk, nuxt - [How to Convince your boss and your team to use Tailwind](https://www.youtube.com/watch?v=D84pmKtQB3w): Video · 2020-10-14 · Once you start using Tailwind there is no going back but first you have convince your boss and your team that utility first CSS is the way to go. · tags: live-streams, nuxt, css - [Tips for Devs by Devs](https://www.youtube.com/watch?v=EiQ9ghz6pE0): Video · 2020-10-08 · Eddie reached out to other Developers and YouTubers and asked them for their top 3 tips they would give to coders. Here are their tips! · tags: interviews, learning-to-code - [NuxtJS introduction](https://www.youtube.com/watch?v=KrqzTw_OiDY): Video · 2020-09-29 · Teaching Eddie a few things about Nuxt and how Nuxt content works. Watch Eddies reaction to the live editing feature of Nuxt content. · tags: live-streams, nuxt - [Q and A Session on Nuxt](https://www.youtube.com/watch?v=hWtlp3nhicQ): Video · 2020-09-18 · Maria Lamardo interviews Debbie after her talk at Vue Global on all things Nuxt. · tags: interviews, nuxt - [Jam Stack Session](https://www.youtube.com/watch?v=oncKtrmHICQ): Video · 2020-09-13 · Debbie and Maya answer live questions on the Jamstack during the CityJS online Conference. · tags: interviews, nuxt - [Charla con Debbie O'Brien (Nuxt.js)](https://www.youtube.com/watch?v=VH_xtuBojmw): Video · 2020-08-26 · En esta charla, nos cuenta como re-ivento su carrera y termino trabajando en Nuxt, nos habla de su trabajo, consejos para empezar y contesta todas nuestras preguntas sobre el framework. Que es? Para que sirve? Cuando usarlo? Como llevarlo a produccion? · tags: interviews, nuxt - [Nuxt.js as a headless CMS](https://www.youtube.com/watch?v=ZUD9hWCmf9c): Video · 2020-08-20 · Global Vue Meetup featuring Debbie O'Brien & Maya Shavin · tags: conference-talk, nuxt - [GraphQL Fireside Chat - Vue](https://www.youtube.com/watch?v=pllsjSDVTwk): Video · 2020-08-04 · This event is part of a four part online series hosted with Hasura! Each week, we will focus on GraphQL + different a front-end framework. This week, join us for a lively round table discussion and Q&A about GraphQL and Vue! · tags: interviews, nuxt - [Vue.js Global conference interview](https://www.youtube.com/watch?v=IBKgryFpUDs): Video · 2020-07-27 · We discuss Nuxt/content and how Nuxt are working on a bunch of new features to make Nuxt even more flexible. After that we discuss how I experienced landing the job and how I learnt a lot from previous job hunting. · tags: interviews, nuxt - [NuxtJS Static Pages and Content API](https://www.youtube.com/watch?v=syD1Z55X8fQ): Video · 2020-06-30 · NuxtJS Static Pages and Content API is finally here! NuxtJS just released a brand new version full of awesome features for building static pages, working with content like Markdown files, and lots more. · tags: live-streams, nuxt, cms - [Going Static in a Dynamic World with Hasura and Nuxt.js](https://www.youtube.com/watch?v=nO6hz2ZdhoA): Video · 2020-06-25 · This talk covers how to use static sites with Hasura, from setting up your endpoint, adding the query to Nuxt.js to display your data with Apollo and GraphQL, how to setup a hook so that it triggers a deploy of your site on content change as static sites need to be redeployed on content change. · tags: conference-talk, nuxt, jamstack, hasura - [Full Static with Nuxt](https://www.youtube.com/watch?v=v-CjZRqBpMI): Video · 2020-06-16 · Static sites have many benefits from costs to performance and even reducing the carbon footprint. And with the new static module from Nuxt static is going to a whole new level. Static sites are the future and they can used for more than just blogs. · tags: conference-talk, nuxt, jamstack - [Static generated sites === great performance. What are you waiting for?](https://www.youtube.com/watch?v=O4K8moLOfSQ): Video · 2020-05-11 · Statically generated sites are the future. Seriously. With frameworks like Nuxt we can build really cool sites that look and feel like a single page application but are actually static generated. That means no need for a server but most importantly performance is amazing. Everything is generated at build time. · tags: conference-talk, nuxt, jamstack, performance - [An interview with Debbie O'Brien from NuxtJS](https://www.youtube.com/watch?v=aw4nl6hGjb0): Video · 2020-04-29 · We have a lovely and LONG conversation about my new job as Head of Learning at Nuxtjs, my ways of working and cultural differences. We flow from tender, insightful moments to jokes. · tags: interviews, nuxt - [Static generated sites === great performance. What are you waiting for?](https://www.youtube.com/watch?v=llxPRNZ8wrY): Video · 2020-04-09 · Statically generated sites are the future. Seriously. With frameworks like Nuxt we can build really cool sites that look and feel like a single page application but are actually static generated. That means no need for a server but most importantly performance is amazing. Everything is generated at build time. · tags: conference-talk, nuxt, jamstack, performance - [From Zero to Hero with several years of Anguish - Bursting through barriers](https://www.youtube.com/watch?v=CEXoGajxY60): Video · 2020-04-07 · Are you afraid to take the next step? Do you think you’re not good enough? Or wonder why you were hired in the first place? This is what we call Impostor Syndrome. Did you know some of the most famous, brilliant and amazing people suffer from it? In this talk I will share my experience and thoughts and hopefully help you take that step to become the developer you really want to become. · tags: conference-talk, imposter-syndrome - [Static generated sites === great performance. What are you waiting for?](https://www.youtube.com/watch?v=wTN6BPvs_6g&t=4530s): Video · 2020-03-26 · Statically generated sites are the future. Seriously. With frameworks like Nuxt we can build really cool sites that look and feel like a single page application but are actually static generated. That means no need for a server but most importantly performance is amazing. Everything is generated at build time. · tags: conference-talk, nuxt, jamstack, performance - [Full Static with Nuxt](https://www.youtube.com/watch?v=joc9j9e-D3s): Video · 2020-02-21 · Static sites have many benefits from costs to performance and even reducing the carbon footprint. And with the new static module from Nuxt static is going to a whole new level. Static sites are the future and they can used for more than just blogs. · tags: conference-talk, nuxt, jamstack - [From Zero to Hero with several years of Anguish - Bursting through barriers](https://www.youtube.com/watch?v=CZ3YODmwOcA): Video · 2020-01-14 · Are you afraid to take the next step? Do you think you’re not good enough? Or wonder why you were hired in the first place? This is what we call Impostor Syndrome. Did you know some of the most famous, brilliant and amazing people suffer from it? In this talk I will share my experience and thoughts and hopefully help you take that step to become the developer you really want to become. · tags: conference-talk, imposter-syndrome - [From Zero to Hero with several years of Anguish - Bursting through barriers](https://www.youtube.com/watch?v=LXkNSEjUokE): Video · 2019-11-12 · Are you afraid to take the next step? Do you think you’re not good enough? Or wonder why you were hired in the first place? This is what we call Impostor Syndrome. Did you know some of the most famous, brilliant and amazing people suffer from it? In this talk I will share my experience and thoughts and hopefully help you take that step to become the developer you really want to become. · tags: conference-talk, imposter-syndrome - [Leave your legacy code behind and go Nuxt](https://www.youtube.com/watch?v=FBEOIuDUZh4): Video · 2019-11-09 · It's almost 2020 and there is still so much legacy code around. We need to start migrating. We need to stop being afraid of the migration process. So let's just do it. Where do we start? how do we do it? I will show you how we did it. How we turned our company's vision to stop working with legacy and start working with Vue and Nuxt. · tags: conference-talk, nuxt, performance - [Why you should be vue-ing your performance](https://www.youtube.com/watch?v=jWqYuPZW9vU): Video · 2019-09-12 · Performance is so important for any application and really we all should be vueing it a little more. This lightening talk covers some tips to help you improve your performance of your Vue and Nuxt application. · tags: conference-talk, nuxt, vue, performance - [Leave your legacy code behind and go Nuxt](https://www.youtube.com/watch?v=EbEVTa7HLsg): Video · 2019-05-31 · It's almost 2020 and there is still so much legacy code around. We need to start migrating. We need to stop being afraid of the migration process. So let's just do it. Where do we start? how do we do it? I will show you how we did it. How we turned our company's vision to stop working with legacy and start working with Vue and Nuxt. · tags: conference-talk, nuxt, performance - [Getting started with nuxt.js + static sites](https://www.youtube.com/watch?v=17WrJ99pwXk): Video · 2019-04-12 · Did you know nuxt.js can pre render all your pages so you can easily create static sites using the Vue.js framework. That means you have a Single Page Application without the need of a server and with great SEO and that's just a few of the benefits of using nuxt.js. · tags: conference-talk, nuxt, jamstack - [How we made frontend development easy and fast by building a custom built framework](https://www.youtube.com/watch?v=0feCjLV69Z0): Video · 2018-11-12 · Building your own framework doesn't sound like the right thing to do but sometimes it is. In this talk I go over the problems we were facing and how we achieved a solution by creating our own framework. · tags: conference-talk, architecture - [How Studying Online With OpenClassrooms Landed Me The Job Of My Dreams](https://www.youtube.com/watch?v=Be3N_i4bC34): Video · 2017-12-21 · I was initially turned away for may roles because I didn't have the required training. So I signed up for OpenClassrooms, and eight months later I got a job as a Front-End Architect at Bluekiri. Here is my story. · tags: interviews, learning-to-code - [How To Overcome The Biggest Obstacle When Learning Web Development](https://www.youtube.com/watch?v=R8ZsDhf5Tis): Video · 2017-09-26 · While studying for a diploma in Front-End Web Development I get flown to Paris and interviewed about my experience learning to code online. · tags: interviews, learning-to-code ## Blog - [Build an Offline AI Study App with Local Models (Liquid AI LFM3-1.7B)](https://debbie.codes/blog/offline-ai-study-app-local-models-lfm3): Blog · 2026-11-13 · I ran Liquid AI's LFM3-1.7B in the browser with WebGPU and built Grading Buddy, an offline study app that answers only from notes I've checked. · tags: ai, webdev - [Build an Offline AI Study App with Local Models (Liquid AI LFM3-1.7B) (markdown)](https://debbie.codes/blog/offline-ai-study-app-local-models-lfm3.md): Markdown copy, 2026-11-13 - [Get your site agent-ready](https://debbie.codes/blog/get-your-site-agent-ready): Blog · 2026-11-13 · How to give AI agents a short map of your site, a full index, and clean markdown copies of your posts, and why that helps even if the big crawlers do not use the file yet. · tags: ai, agents, mcp, webdev - [Get your site agent-ready (markdown)](https://debbie.codes/blog/get-your-site-agent-ready.md): Markdown copy, 2026-11-13 - [One Tool Call Instead of Four Pages: Adding WebMCP to My Site](https://debbie.codes/blog/webmcp-on-my-site): Blog · 2026-11-13 · AI agents that open debbie.codes in a browser can now use tools on the page to find my videos, posts, podcasts and courses, instead of reading whole pages and guessing. · tags: ai, mcp, agents, grok-bot - [One Tool Call Instead of Four Pages: Adding WebMCP to My Site (markdown)](https://debbie.codes/blog/webmcp-on-my-site.md): Markdown copy, 2026-11-13 - [DevRel Didn't Die, Its Audience Changed](https://debbie.codes/blog/devrel-didnt-die-its-audience-changed): Blog · 2026-11-02 · Most evenings I put my agents to the test. I'm literally taking products I'm curious about and building something with them. This is how I learn and experiment with a new product. · tags: ai, agents, dev-rel, mcp - [DevRel Didn't Die, Its Audience Changed (markdown)](https://debbie.codes/blog/devrel-didnt-die-its-audience-changed.md): Markdown copy, 2026-11-02 - [My Hire Me Page Can Talk: How I Built and Tested a Voice Agent](https://debbie.codes/blog/hire-me-voice-agent-grok-bot): Blog · 2026-10-27 · My Hire me page can talk. Recruiters can ask it about my work by voice or text. Here's how I built it with my Grok Bot and ElevenLabs in one morning, and how I tested it. · tags: ai, agents, grok-bot, testing - [My Hire Me Page Can Talk: How I Built and Tested a Voice Agent (markdown)](https://debbie.codes/blog/hire-me-voice-agent-grok-bot.md): Markdown copy, 2026-10-27 - [Grok Bot Uploads My YouTube Videos For Me (Beginner Walkthrough)](https://debbie.codes/blog/grok-bot-uploads-my-youtube-videos): Blog · 2026-10-17 · Grok Bot can use your own computer too. I asked it by voice to find a video on my laptop, fix the audio and hand it to my other bots to get it ready for YouTube, with nothing going public until I say yes. · tags: ai, agents, grok-bot - [Grok Bot Uploads My YouTube Videos For Me (Beginner Walkthrough) (markdown)](https://debbie.codes/blog/grok-bot-uploads-my-youtube-videos.md): Markdown copy, 2026-10-17 - [Grok Bot Explained: Your Bots Get a Cloud Computer, Browser & Email](https://debbie.codes/blog/grok-bot-explained): Blog · 2026-10-14 · Your Grok Bot account comes with a cloud computer, browser and email that all your bots share. Here's what that looks like and why it changes how the bots work. · tags: ai, agents, grok-bot - [Grok Bot Explained: Your Bots Get a Cloud Computer, Browser & Email (markdown)](https://debbie.codes/blog/grok-bot-explained.md): Markdown copy, 2026-10-14 - [How Grok Bot turned 133 family photos into a 50th birthday video with zero editing](https://debbie.codes/blog/grok-bot-50th-birthday-photo-video): Blog · 2026-10-13 · How I made a photo video for my brother Ken's 50th birthday with my Grok Bots: scanned prints, photos from my Mac and family, music, pacing, and an intro and outro. · tags: ai, personal, grok-bot - [How Grok Bot turned 133 family photos into a 50th birthday video with zero editing (markdown)](https://debbie.codes/blog/grok-bot-50th-birthday-photo-video.md): Markdown copy, 2026-10-13 - [Talk to my bots through Alexa: building an Alexa skill for Grok Bot](https://debbie.codes/blog/talk-to-my-bots-through-alexa): Blog · 2026-10-13 · How I connected Alexa to my Grok Bot chief of staff with a small Cloudflare Worker, and learned the Amazon developer console by calling my engineer bot in Grok Bot and having it talk me through each screen. · tags: ai, personal, grok-bot - [Talk to my bots through Alexa: building an Alexa skill for Grok Bot (markdown)](https://debbie.codes/blog/talk-to-my-bots-through-alexa.md): Markdown copy, 2026-10-13 - [Back to the gym after three years](https://debbie.codes/blog/back-to-the-gym-after-three-years): Blog · 2026-09-25 · First gym session in three years after twins started school in Spain — celebrating the milestone and choosing me time again. · tags: personal - [Back to the gym after three years (markdown)](https://debbie.codes/blog/back-to-the-gym-after-three-years.md): Markdown copy, 2026-09-25 - [I Created an AI Fitness Coach with Grok Bot](https://debbie.codes/blog/i-created-an-ai-fitness-coach-with-grok-bot): Blog · 2026-09-08 · I created a Grok Bot coach for gym, nutrition, and accountability after having twins. Home gym photos, 130g protein, workout critiques, and a garage playlist on my iPad. · tags: ai, agents, grok-bot - [I Created an AI Fitness Coach with Grok Bot (markdown)](https://debbie.codes/blog/i-created-an-ai-fitness-coach-with-grok-bot.md): Markdown copy, 2026-09-08 - [Did you know Grok Bot can watch videos for you?](https://debbie.codes/blog/did-you-know-grok-bot-can-watch-videos): Blog · 2026-08-31 · I created a CoachBot for nutrition and training. It watched my workout video and told me my five kilo dumbbells were not enough. · tags: ai, agents, grok-bot - [Did you know Grok Bot can watch videos for you? (markdown)](https://debbie.codes/blog/did-you-know-grok-bot-can-watch-videos.md): Markdown copy, 2026-08-31 - [Grok Bot does my shopping (while walking the twins)](https://debbie.codes/blog/grok-bot-does-my-shopping): Blog · 2026-08-24 · Quick walk-through of how I did my full shop with Grok Bot from my phone, while out with the twins. · tags: ai, agents, grok-bot - [Grok Bot does my shopping (while walking the twins) (markdown)](https://debbie.codes/blog/grok-bot-does-my-shopping.md): Markdown copy, 2026-08-24 - [Job Hunt With a Bot?](https://debbie.codes/blog/job-hunt-with-a-bot): Blog · 2026-08-22 · I need to look for a job, so I made a Job Hunt bot on Grok Bot. It looked me up online, found roles, and can even do interview prep. · tags: ai, agents, grok-bot - [Job Hunt With a Bot? (markdown)](https://debbie.codes/blog/job-hunt-with-a-bot.md): Markdown copy, 2026-08-22 - [I Sent Grok Bot to Buy My Gluten-Free Beer](https://debbie.codes/blog/i-sent-grok-bot-to-buy-my-gluten-free-beer): Blog · 2026-08-16 · I ran out of gluten-free beer on a Sunday night and asked my Grok Bot chief of staff to buy more. Amazon rolls bought from my phone, an Alcampo login that would not click, a morning podcast, and a delivery slot I can keep adding to. · tags: ai, agents, grok-bot - [I Sent Grok Bot to Buy My Gluten-Free Beer (markdown)](https://debbie.codes/blog/i-sent-grok-bot-to-buy-my-gluten-free-beer.md): Markdown copy, 2026-08-16 - [How to Get Started with Grok Bot](https://debbie.codes/blog/how-to-get-started-with-grok-bot): Blog · 2026-08-14 · Grok Bot just dropped. I downloaded it on a Mac the same day and recorded myself setting it up. Not a feature list. What I actually clicked, what worked, and which bots I would create. · tags: ai, agents, grok-bot - [How to Get Started with Grok Bot (markdown)](https://debbie.codes/blog/how-to-get-started-with-grok-bot.md): Markdown copy, 2026-08-14 - [I Tested If Grok Bot Could Book My Flights](https://debbie.codes/blog/i-tested-if-grok-bot-could-book-my-flights): Blog · 2026-08-13 · I asked a Grok Bot to act as my travel agent and book flights. Close, but missing the last step. Here is the video of what worked and what didn't. · tags: ai, agents, grok-bot - [I Tested If Grok Bot Could Book My Flights (markdown)](https://debbie.codes/blog/i-tested-if-grok-bot-could-book-my-flights.md): Markdown copy, 2026-08-13 - [Grok Bot Just Dropped and I Had to Try It](https://debbie.codes/blog/grok-bot-just-dropped): Blog · 2026-08-11 · Grok Bot just dropped. A team of bots on your computer for LinkedIn, GitHub, email, and content publishing. Here is my raw first look. · tags: ai, agents, grok-bot - [Grok Bot Just Dropped and I Had to Try It (markdown)](https://debbie.codes/blog/grok-bot-just-dropped.md): Markdown copy, 2026-08-11 - [An Agent That Hunts Bugs in My App While I Sleep](https://debbie.codes/blog/an-agent-that-hunts-bugs-while-i-sleep): Blog · 2026-07-10 · Every hour, an agent opens our real app, clicks around like a tester, and files honest bug reports. A second agent fixes them. Here is how it works. · tags: ai, agents, testing, playwright - [An Agent That Hunts Bugs in My App While I Sleep (markdown)](https://debbie.codes/blog/an-agent-that-hunts-bugs-while-i-sleep.md): Markdown copy, 2026-07-10 - [How We Test an AI Product Without Burning Credit](https://debbie.codes/blog/testing-an-ai-product-without-burning-credit): Blog · 2026-07-10 · Every message in an AI product is a paid model call. Here is how we test the full chat flow end to end and spend nothing doing it. · tags: ai, testing, playwright - [How We Test an AI Product Without Burning Credit (markdown)](https://debbie.codes/blog/testing-an-ai-product-without-burning-credit.md): Markdown copy, 2026-07-10 - [How I Documented an Entire Product in 4 Days with an AI Agent](https://debbie.codes/blog/documenting-product-with-ai-agent): Blog · 2026-05-13 · How I used Goose, an open-source AI agent, to write 55 pages of documentation, capture 59 screenshots, and build three reusable skills in just four days. · tags: ai, webdev - [How I Documented an Entire Product in 4 Days with an AI Agent (markdown)](https://debbie.codes/blog/documenting-product-with-ai-agent.md): Markdown copy, 2026-05-13 - [How I Used AI to Fix Our E2E Test Architecture](https://debbie.codes/blog/how-i-used-ai-to-fix-our-e2e-test-architecture): Blog · 2026-04-29 · AI-led analysis of a 6% local pass rate — from tracer bullet planning to building an agent skill that transformed 38 spec files with measurable benchmarks. · tags: testing, playwright, ai - [How I Used AI to Fix Our E2E Test Architecture (markdown)](https://debbie.codes/blog/how-i-used-ai-to-fix-our-e2e-test-architecture.md): Markdown copy, 2026-04-29 - [Claude Code Commands and Shortcuts](https://debbie.codes/blog/claude-code-commands-and-shortcuts): Blog · 2026-03-31 · A guide to Claude Code's slash commands, keyboard shortcuts, and tips for a smoother workflow in the terminal. · tags: ai - [Claude Code Commands and Shortcuts (markdown)](https://debbie.codes/blog/claude-code-commands-and-shortcuts.md): Markdown copy, 2026-03-31 - [I Built an Agent Skill That Turns Rough READMEs Into Polished Docs](https://debbie.codes/blog/built-agent-skill-readme-wizard): Blog · 2026-03-24 · How I turned a single-file agent skill into a maintainable README workflow with scripts, references, and evals. · tags: ai, githubcopilot, webdev - [I Built an Agent Skill That Turns Rough READMEs Into Polished Docs (markdown)](https://debbie.codes/blog/built-agent-skill-readme-wizard.md): Markdown copy, 2026-03-24 - [I Used Skill Creator v2 to Improve One of My Agent Skills in VS Code](https://debbie.codes/blog/skill-creator-v2-agent-skills-vs-code): Blog · 2026-03-21 · I just published a video showing how I used Skill Creator v2 to improve an existing AI skill inside VS Code, and honestly, I was seriously surprised at how much this thing does. · tags: ai, githubcopilot, webdev - [I Used Skill Creator v2 to Improve One of My Agent Skills in VS Code (markdown)](https://debbie.codes/blog/skill-creator-v2-agent-skills-vs-code.md): Markdown copy, 2026-03-21 - [Build Websites, Games, and Teaching Resources With Google Gemini for Free (No Coding Required)](https://debbie.codes/blog/build-websites-games-and-teaching-resources-with-google-gemini): Blog · 2026-03-15 · Discover how Google Gemini's Canvas lets anyone build websites, games, and interactive teaching resources for free — no coding skills required. · tags: ai, webdev - [Build Websites, Games, and Teaching Resources With Google Gemini for Free (No Coding Required) (markdown)](https://debbie.codes/blog/build-websites-games-and-teaching-resources-with-google-gemini.md): Markdown copy, 2026-03-15 - [What Are Agent Skills? Beginners Guide](https://debbie.codes/blog/what-are-agent-skills-beginners-guide): Blog · 2026-03-04 · A beginner's guide to AI agent skills — what they are, how they work, and how to build your first skill in minutes. · tags: ai, webdev - [What Are Agent Skills? Beginners Guide (markdown)](https://debbie.codes/blog/what-are-agent-skills-beginners-guide.md): Markdown copy, 2026-03-04 - [From Prompt Files to Agent Skills: How I Unified My Content Automation](https://debbie.codes/blog/from-prompt-files-to-agent-skills): Blog · 2026-02-18 · How I migrated from three separate VS Code prompt files to a single portable agent skill that handles videos, podcasts, and blog posts — with browser verification and automatic PR creation built in. · tags: ai, mcp, playwright - [From Prompt Files to Agent Skills: How I Unified My Content Automation (markdown)](https://debbie.codes/blog/from-prompt-files-to-agent-skills.md): Markdown copy, 2026-02-18 - [I Needed an APP to Track My Learning Journey, AI built it in less than half an hour with a single prompt](https://debbie.codes/blog/app-to-track-my-learning-journey): Blog · 2026-01-17 · I have been trying to build a Learning Hub App for a good few months using various tools and have had many iterations back and forth on trying to get it to work and ended up going round in circles fixing one thing and breaking another. · tags: ai, mcp, playwright - [I Needed an APP to Track My Learning Journey, AI built it in less than half an hour with a single prompt (markdown)](https://debbie.codes/blog/app-to-track-my-learning-journey.md): Markdown copy, 2026-01-17 - [How I Use AI Agents + MCP to Fully Automate My Website's Content](https://debbie.codes/blog/ai-agents-mcp-automate-content): Blog · 2026-01-14 · How I use AI agents and MCP tools to automate publishing and updating podcasts, videos, and other content on my website. · tags: mcp, ai - [How I Use AI Agents + MCP to Fully Automate My Website's Content (markdown)](https://debbie.codes/blog/ai-agents-mcp-automate-content.md): Markdown copy, 2026-01-14 - [First Two Years of Raising Kids and Working Fulltime](https://debbie.codes/blog/first-two-years-raising-kids-working-fulltime): Blog · 2026-01-11 · I now have two year old twins yet I also work fulltime and manage to raise my kids with no daycare or family help. Many people ask me how I do it and sometimes I even wonder myself! In this post, I want to share my experiences, challenges, and strategies for balancing work and parenthood over the past two years. · tags: personal - [First Two Years of Raising Kids and Working Fulltime (markdown)](https://debbie.codes/blog/first-two-years-raising-kids-working-fulltime.md): Markdown copy, 2026-01-11 - [Debugging My Zsh Config With Goose (and Why Agentic AI Actually Helped)](https://debbie.codes/blog/debugging-my-zsh-config-with-goose-and-why-agentic-ai-actually-helped): Blog · 2025-12-15 · I've been playing around with a few things recently and wanted to share a real experience that genuinely surprised me. When Goose CLI wouldn't run, the agent investigated my .zshrc file and found a subtle syntax error that would have taken me much longer to debug manually. · tags: ai, webdev - [Debugging My Zsh Config With Goose (and Why Agentic AI Actually Helped) (markdown)](https://debbie.codes/blog/debugging-my-zsh-config-with-goose-and-why-agentic-ai-actually-helped.md): Markdown copy, 2025-12-15 - [Laid off from my dream job, what now?](https://debbie.codes/blog/laid-off-what-now): Blog · 2025-12-10 · It’s time to say goodbye. Unfortunately I have been the latest victim of layoffs due to reorgs in Microsoft Spain. I have taken some time to process but I won’t lie, It has been really hard to deal with. This wasn’t just a job. This was my dream. And my dream came true. But unfortunately all dreams must come to an end at some point. So what now? · tags: personal - [Laid off from my dream job, what now? (markdown)](https://debbie.codes/blog/laid-off-what-now.md): Markdown copy, 2025-12-10 - [How I vibe code: Improving my site design with Goose and Gemini 3](https://debbie.codes/blog/how-i-vibe-code-improving-my-site-design-with-goose-and-gemini-3): Blog · 2025-11-20 · Having fun with Google's Gemini 3 and Goose coding agent to redesign my home page, creating dynamic hero components that change on refresh. · tags: ai, webdev - [How I vibe code: Improving my site design with Goose and Gemini 3 (markdown)](https://debbie.codes/blog/how-i-vibe-code-improving-my-site-design-with-goose-and-gemini-3.md): Markdown copy, 2025-11-20 - [Playwright MCP Servers Explained Automation and Testing](https://debbie.codes/blog/playwright-mcp-servers-explained-automation-and-testing): Blog · 2025-11-17 · Did you know Playwright has two MCP servers? Learn about the Playwright MCP server for browser automation and the Playwright Test MCP server for testing, both designed to work with AI agents and GitHub Copilot. · tags: playwright, mcp, ai, testing - [Playwright MCP Servers Explained Automation and Testing (markdown)](https://debbie.codes/blog/playwright-mcp-servers-explained-automation-and-testing.md): Markdown copy, 2025-11-17 - [Fixing Failing Tests Automatically with Playwright's New Healer Agent](https://debbie.codes/blog/fixing-failing-tests-automatically-with-playwrights-new-healer-agent): Blog · 2025-11-13 · If you've ever returned to your test suite to find a sea of red, you're going to love this one. The Playwright Healer Agent is here — and it's changing how we think about test maintenance. · tags: playwright, ai, testing - [Fixing Failing Tests Automatically with Playwright's New Healer Agent (markdown)](https://debbie.codes/blog/fixing-failing-tests-automatically-with-playwrights-new-healer-agent.md): Markdown copy, 2025-11-13 - [I Built My Own AI Agent using n8n — And You Can Too](https://debbie.codes/blog/i-built-my-own-ai-agent-and-you-can-too): Blog · 2025-11-06 · I recently built my own AI agent. Not because I needed one, but because I wanted to see how far I could take the current tools available. It turned out to be surprisingly straightforward, extremely flexible, and genuinely useful. · tags: ai - [I Built My Own AI Agent using n8n — And You Can Too (markdown)](https://debbie.codes/blog/i-built-my-own-ai-agent-and-you-can-too.md): Markdown copy, 2025-11-06 - [Playwright Agents Planner, Generator, and Healer in Action](https://debbie.codes/blog/playwright-agents-planner-generator-and-healer-in-action): Blog · 2025-10-06 · Playwright has introduced a powerful new feature: Playwright Agents. These agents can generate test plans, create tests based on those plans, and even debug and fix failing tests automatically. · tags: playwright, testing, ai - [Playwright Agents Planner, Generator, and Healer in Action (markdown)](https://debbie.codes/blog/playwright-agents-planner-generator-and-healer-in-action.md): Markdown copy, 2025-10-06 - [Automate Your Screenshot Documentation with Playwright MCP](https://debbie.codes/blog/automate-your-screenshot-documentation-with-playwright-mcp): Blog · 2025-09-03 · Creating visual documentation has always been a time-consuming process. What if I told you there's a way to automate this entire workflow with a single prompt using Playwright MCP? · tags: playwright, mcp, ai - [Automate Your Screenshot Documentation with Playwright MCP (markdown)](https://debbie.codes/blog/automate-your-screenshot-documentation-with-playwright-mcp.md): Markdown copy, 2025-09-03 - [Testing in a Logged-In State with the Playwright MCP Browser Extension](https://debbie.codes/blog/testing-logged-in-state-playwright-mcp-browser-extension): Blog · 2025-08-21 · If you've ever needed to test an application that requires authentication, you know the pain of logging in every time or, worse, handing over your credentials to an LLM. With the new Playwright MCP Browser Extension for Chrome and Edge, that's no longer necessary. · tags: playwright, mcp, testing, ai - [Testing in a Logged-In State with the Playwright MCP Browser Extension (markdown)](https://debbie.codes/blog/testing-logged-in-state-playwright-mcp-browser-extension.md): Markdown copy, 2025-08-21 - [Install Playwright MCP Server in VS Code](https://debbie.codes/blog/install-playwright-mcp-server-in-vs-code): Blog · 2025-07-15 · Installing MCP(Model Context Protocol) servers in Visual Studio Code just got a major upgrade! Learn how to use the new MCP Servers section in the Extensions panel to easily browse, install, and manage MCP servers. · tags: playwright, mcp, ai, vs-code - [Install Playwright MCP Server in VS Code (markdown)](https://debbie.codes/blog/install-playwright-mcp-server-in-vs-code.md): Markdown copy, 2025-07-15 - [Automating Form Submissions with Playwright MCP and a Prompt file](https://debbie.codes/blog/automating-form-submissions-with-playwright-mcp-and-a-prompt-file): Blog · 2025-07-10 · Have you ever wished you could automate browser tasks — like filling out a form or uploading a file — without writing a full-blown test script? What if all you needed was a plain-text prompt written in natural language? Well now you can with Playwright's MCP server. · tags: playwright, mcp, ai - [Automating Form Submissions with Playwright MCP and a Prompt file (markdown)](https://debbie.codes/blog/automating-form-submissions-with-playwright-mcp-and-a-prompt-file.md): Markdown copy, 2025-07-10 - [Building Your First MCP Server: A Beginners Tutorial](https://debbie.codes/blog/building-your-first-mcp-server-a-beginners-tutorial): Blog · 2025-07-01 · Have you ever wanted your AI assistant to access real-time data? Model Context Protocol (MCP) servers make this possible, and they're surprisingly simple to build and use! Learn how to build an MCP server from scratch using TypeScript, connect it to a real weather API, and integrate it with VS Code and GitHub Copilot. · tags: mcp, webdev, ai, typescript - [Building Your First MCP Server: A Beginners Tutorial (markdown)](https://debbie.codes/blog/building-your-first-mcp-server-a-beginners-tutorial.md): Markdown copy, 2025-07-01 - [Vibe Coding with Copilot and Gemini 2.5 pro - Simplifying My Blog with AI-Assisted Refactoring](https://debbie.codes/blog/vibe-coding-with-copilot-and-gemini): Blog · 2025-06-20 · I have been wanting to share more content on my blog, but ironically, the process of publishing has been slowing me down. In a recent vibe coding session, I decided to remove images from the blog entirely and explore a content-first approach with AI assistance. · tags: webdev, ai, githubcopilot, vscode - [Vibe Coding with Copilot and Gemini 2.5 pro - Simplifying My Blog with AI-Assisted Refactoring (markdown)](https://debbie.codes/blog/vibe-coding-with-copilot-and-gemini.md): Markdown copy, 2025-06-20 - [Generate Playwright tests without code access using MCP and Copilot](https://debbie.codes/blog/generate-playwright-tests-without-code-access): Blog · 2025-06-18 · Discover how to use MCP (Model Context Protocol) and GitHub Copilot to generate Playwright tests without needing access to your application's source code, perfect for testing external sites or black-box testing scenarios. · tags: playwright, testing, mcp, ai - [Generate Playwright tests without code access using MCP and Copilot (markdown)](https://debbie.codes/blog/generate-playwright-tests-without-code-access.md): Markdown copy, 2025-06-18 - [Letting Playwright MCP explore your site and write your tests](https://debbie.codes/blog/letting-playwright-mcp-explore-your-site): Blog · 2025-06-18 · Learn how to use Playwright MCP (Model Context Protocol) to explore your website and automatically generate comprehensive tests, making web testing more efficient and thorough. · tags: playwright, testing, mcp, ai - [Letting Playwright MCP explore your site and write your tests (markdown)](https://debbie.codes/blog/letting-playwright-mcp-explore-your-site.md): Markdown copy, 2025-06-18 - [Setting Up the Official GitHub MCP Server, A simple Guide](https://debbie.codes/blog/github-mcp-server): Blog · 2025-04-16 · The GitHub MCP (Model Context Protocol) Server is a powerful tool that provides seamless integration with GitHub APIs, enabling advanced automation and interaction capabilities. This guide will walk you through how to set up and use the official GitHub MCP Server. · tags: mcp, ai - [Setting Up the Official GitHub MCP Server, A simple Guide (markdown)](https://debbie.codes/blog/github-mcp-server.md): Markdown copy, 2025-04-16 - [Taking my babies to a conference](https://debbie.codes/blog/brought-my-babies-to-a-conference): Blog · 2024-09-02 · But this time it was different. I brought my babies to the conference. I was really worried about doing this as what would people think? And the voices start going off in my head. But why should I care. Cause you know, I just do. · tags: personal - [Taking my babies to a conference (markdown)](https://debbie.codes/blog/brought-my-babies-to-a-conference.md): Markdown copy, 2024-09-02 - [Testing Staging and Production environments in Playwright](https://debbie.codes/blog/testing-staging-production-envs-playwright): Blog · 2024-08-02 · When working with third party API's it is better to mock the API call rather than hit the API especially when they are API's that you do not control. Mocking the API allows you to finish developing your component or app and write the tests and then when the API is ready you can just swap out the mock for the real API call. · tags: playwright, testing - [Testing Staging and Production environments in Playwright (markdown)](https://debbie.codes/blog/testing-staging-production-envs-playwright.md): Markdown copy, 2024-08-02 - [Delivering a Talk](https://debbie.codes/blog/delivering-a-talk): Blog · 2023-10-20 · How can we walk on that stage with more confidence, deliver a great talk and not only own the stage but also connect with the audience. It’s not easy, but like everything it does get easier with practice. Let’s go over a few ways you can improve your public speaking skills, either for the big stage or for remote talks, and let’s discuss what is holding you back from becoming an amazing tech speaker. · tags: personal, mentoring, motivation - [Delivering a Talk (markdown)](https://debbie.codes/blog/delivering-a-talk.md): Markdown copy, 2023-10-20 - [Getting Started with Python and Playwright](https://debbie.codes/blog/python-and-playwright): Blog · 2023-09-07 · For those new to Python here is a quick beginners guide on how to setup Python and Pytest and install Playwright. We then create an example test and run it in both headed and headless mode meaning with and without a browser window. · tags: playwright, testing - [Getting Started with Python and Playwright (markdown)](https://debbie.codes/blog/python-and-playwright.md): Markdown copy, 2023-09-07 - [Not One but Two](https://debbie.codes/blog/not-one-but-two): Blog · 2023-08-11 · On our 9th attempt at fertility treatment, we were super excited when the doctor called us 10 days after the transfer to tell us that we were pregnant. It had worked. I asked him if he was sure and he said "yes, very sure. But then when we had the first scan, we got a big surprise. · tags: personal - [Not One but Two (markdown)](https://debbie.codes/blog/not-one-but-two.md): Markdown copy, 2023-08-11 - [API Mocking for your Playwright tests](https://debbie.codes/blog/api-mocking-for-your-playwright-tests): Blog · 2023-07-04 · When working with third party API's it is better to mock the API call rather than hit the API especially when they are API's that you do not control. Mocking the API allows you to finish developing your component or app and write the tests and then when the API is ready you can just swap out the mock for the real API call. · tags: playwright, testing - [API Mocking for your Playwright tests (markdown)](https://debbie.codes/blog/api-mocking-for-your-playwright-tests.md): Markdown copy, 2023-07-04 - [Playwright's UI Mode - watch mode and time travel debugging](https://debbie.codes/blog/ui-mode-playwright): Blog · 2023-05-05 · Are you looking for a more efficient way to execute and debug your end to end tests? Look no further than Playwright's UI Mode. In this guide, we'll explore the features of Playwright's UI Mode and show you how to take advantage of them for your test automation needs. · tags: playwright, testing - [Playwright's UI Mode - watch mode and time travel debugging (markdown)](https://debbie.codes/blog/ui-mode-playwright.md): Markdown copy, 2023-05-05 - [A better global setup in Playwright reusing login with project dependencies](https://debbie.codes/blog/playwright-global-setup): Blog · 2023-03-15 · When you use global setup, you don't see a trace for the setup part of your tests and the setup doesn't appear in the HTML report. This can make debugging difficult. It's also not possible to use fixtures in global setup. In order to fix this issue, project dependencies were created. · tags: playwright, testing - [A better global setup in Playwright reusing login with project dependencies (markdown)](https://debbie.codes/blog/playwright-global-setup.md): Markdown copy, 2023-03-15 - [Setup a local dev server for your Playwright tests](https://debbie.codes/blog/playwright-local-dev-server): Blog · 2023-03-07 · Playwright comes with a webserver option in the config file which gives you the ability to launch a local dev server before running your tests. This is ideal for when writing your tests during development and when you don't have a staging or production url to test against. · tags: playwright, testing - [Setup a local dev server for your Playwright tests (markdown)](https://debbie.codes/blog/playwright-local-dev-server.md): Markdown copy, 2023-03-07 - [Testing Menus on Desktop and Mobile](https://debbie.codes/blog/testing-menus-desktop-mobile): Blog · 2023-03-01 · We can write a simple test to make sure that when a user clicks on an item in the menu it takes them to the correct page. To test my website I use Playwright which I already have installed. Let's take a look at how to test the menu on desktop and mobile. · tags: playwright, testing - [Testing Menus on Desktop and Mobile (markdown)](https://debbie.codes/blog/testing-menus-desktop-mobile.md): Markdown copy, 2023-03-01 - [2022 Recap - Achieving your dreams Debbie](https://debbie.codes/blog/2022-in-review): Blog · 2022-12-31 · And there it is, another year gone but when you look back at all you have achieved then really there is no more to say than; what a year. From Google interviews to being hired by Microsoft, speaking at conferences and traveling to so many conferences and lots of sport, 2022 was a great year. · tags: personal - [2022 Recap - Achieving your dreams Debbie (markdown)](https://debbie.codes/blog/2022-in-review.md): Markdown copy, 2022-12-31 - [How To Locate Elements in Playwright](https://debbie.codes/blog/locate-elements-playwright): Blog · 2022-12-01 · In order to write end to end tests we need to first find elements on the webpage and then perform user actions on them. For example, find a link and click on it. But before we dive into how to use the test generator, first let's understand what a link element is and what exactly locators are. · tags: playwright, testing - [How To Locate Elements in Playwright (markdown)](https://debbie.codes/blog/locate-elements-playwright.md): Markdown copy, 2022-12-01 - [How to locate elements in Playwright](https://debbie.codes/blog/how-to-locate-elements-in-playwright): Blog · 2022-11-30 · How can we locate a link click on it in our e2e tests. In this article we will learn how to locate elements in Playwright using the test generator to generate your tets based on user actions or pick a locator by clicking on an element · tags: testing, playwright - [How to locate elements in Playwright (markdown)](https://debbie.codes/blog/how-to-locate-elements-in-playwright.md): Markdown copy, 2022-11-30 - [Migrating from Nuxt 2 to Nuxt 3](https://debbie.codes/blog/migrating-nuxt2-nuxt3): Blog · 2022-11-27 · My personal website was built many years ago and had collected quite a large amount of code as I used my site to play around and experiment new features of Nuxt. It took me ages to finally decide to migrate cause lets face it, we all hate migrations. But I finally did it and I'm so glad I did. I'm going to share with you the steps I took to migrate my site from Nuxt 2 to Nuxt 3. · tags: nuxt - [Migrating from Nuxt 2 to Nuxt 3 (markdown)](https://debbie.codes/blog/migrating-nuxt2-nuxt3.md): Markdown copy, 2022-11-27 - [Challenging Yourself](https://debbie.codes/blog/challenging-yourself): Blog · 2022-09-11 · Cycle all around the island of Mallorca for a total of 235km with an expected cycling time of 9.5 hours at a speed of 25km per hour. Just the thoughts of that is scary enough. Was I able for it? Had I trained enough for it? Probably not. But I was determined to give it a go. · tags: personal, motivation - [Challenging Yourself (markdown)](https://debbie.codes/blog/challenging-yourself.md): Markdown copy, 2022-09-11 - [Testing a Sites Color Mode with Playwright](https://debbie.codes/blog/testing-color-mode): Blog · 2022-09-03 · My site has a color mode option to change from light theme to dark theme or sepia theme or use the system preference. So how can we write a test to make sure this all works? · tags: testing, playwright - [Testing a Sites Color Mode with Playwright (markdown)](https://debbie.codes/blog/testing-color-mode.md): Markdown copy, 2022-09-03 - [Interviewing with the Big Tech Companies](https://debbie.codes/blog/interviewing-with-the-big-tech-companies): Blog · 2022-05-19 · When a recruiter from Meta, from America, had called me, it just opened my eyes to the possibility that maybe just maybe I was actually good enough to work for the big tech companies. · tags: personal - [Interviewing with the Big Tech Companies (markdown)](https://debbie.codes/blog/interviewing-with-the-big-tech-companies.md): Markdown copy, 2022-05-19 - [Why Microsoft and How I achieved my Goal](https://debbie.codes/blog/why-microsoft): Blog · 2022-05-19 · I just really liked the idea that Microsoft were willing to send people out to help others, to help them build better software with their products and I said to the two Microsoft guys, "One day I will work for Microsoft". · tags: personal - [Why Microsoft and How I achieved my Goal (markdown)](https://debbie.codes/blog/why-microsoft.md): Markdown copy, 2022-05-19 - [Fixing Diversity in Tech](https://debbie.codes/blog/fixing-diversity-in-tech): Blog · 2022-05-15 · When you step back from the nationality, the color, the religion the sex etc you just get a bunch of people who become a great bunch of friends. This is tech. This is what tech should be like always, for everyone. · tags: personal - [Fixing Diversity in Tech (markdown)](https://debbie.codes/blog/fixing-diversity-in-tech.md): Markdown copy, 2022-05-15 - [The JavaScript Array.at() method](https://debbie.codes/blog/js-array-at-method): Blog · 2022-05-12 · Often we want to return a single item from an array. There are a few methods of doing this including the `at(index)` method which returns the item at a given index. · tags: javascript - [The JavaScript Array.at() method (markdown)](https://debbie.codes/blog/js-array-at-method.md): Markdown copy, 2022-05-12 - [The JavaScript Array.filter() method](https://debbie.codes/blog/js-array-filter-method): Blog · 2022-05-11 · The .filter() method in JavaScript creates a new array with all elements that pass the test implemented by the provided function. · tags: javascript - [The JavaScript Array.filter() method (markdown)](https://debbie.codes/blog/js-array-filter-method.md): Markdown copy, 2022-05-11 - [Finding the Right Work Life Balance](https://debbie.codes/blog/work-life-balance): Blog · 2022-05-10 · To many people it might look like I have it all worked out and to be honest I do think I have a pretty good work life balance. But it wasn't always that way. I am probably older than most people who will read this and therefore I have had more time to make mistakes and learn from them. · tags: personal - [Finding the Right Work Life Balance (markdown)](https://debbie.codes/blog/work-life-balance.md): Markdown copy, 2022-05-10 - [Finding courage and inspiration in the developer community](https://debbie.codes/blog/courage-inspiration-developer-community): Blog · 2022-05-09 · How do we empower women in tech and equip them with the skills to help them become true leaders? One way is learning from others' successes and failures. Web GDEs—Debbie O'Brien, Julia Miocene, and Glafira Zhur—discuss the value of one to one mentoring and the impact it has made on their own professional and personal development. · tags: mentoring - [Finding courage and inspiration in the developer community (markdown)](https://debbie.codes/blog/courage-inspiration-developer-community.md): Markdown copy, 2022-05-09 - [Minimizing SVGs](https://debbie.codes/blog/minimizing-svgs): Blog · 2022-05-09 · When working with SVG's sometimes we just put the svg into our code and think nothing more of it. But do we always need all that code that the SVG gives us? Perhaps not. SVGO is a tool that can take an SVG and compress it down to a smaller size ensuring your site is more performant. · tags: performance - [Minimizing SVGs (markdown)](https://debbie.codes/blog/minimizing-svgs.md): Markdown copy, 2022-05-09 - [Finding Motivation as a Developer](https://debbie.codes/blog/finding-motivation-as-a-developer): Blog · 2022-05-06 · Many people keep asking me where I get my motivation from, how do I find so much time and energy to do so much? I certainly don't have all the answers but I do think it is something you teach yourself. · tags: personal, motivation - [Finding Motivation as a Developer (markdown)](https://debbie.codes/blog/finding-motivation-as-a-developer.md): Markdown copy, 2022-05-06 - [Being an Imposter](https://debbie.codes/blog/being-an-imposter): Blog · 2022-03-27 · If you ever look at the home page of my site or the intro slide of my talks you will probably think I am the biggest show off in the world. However, really I am an imposter. I doubt my abilities and find it difficult to accept my accomplishments and wonder if I deserve them. · tags: personal, motivation - [Being an Imposter (markdown)](https://debbie.codes/blog/being-an-imposter.md): Markdown copy, 2022-03-27 - [Pagination in Nuxt Content](https://debbie.codes/blog/pagination-in-nuxt-content): Blog · 2022-03-26 · My blog was getting bigger and bigger and so time to add pagination. I am using Nuxt Content to manage my blog posts. So how do I add pagination to my blog? Let me show you how I did it. · tags: nuxt - [Pagination in Nuxt Content (markdown)](https://debbie.codes/blog/pagination-in-nuxt-content.md): Markdown copy, 2022-03-26 - [Debugging Tests in Playwright](https://debbie.codes/blog/debugging-tests-in-playwright): Blog · 2022-03-25 · Let's take a look at some of the ways you can debug your tests in Playwright should they fail. Playwright scripts work with existing debugging tools, like Node.js debuggers and browser developer tools. Playwright also introduces new debugging features for browser automation. · tags: testing, playwright - [Debugging Tests in Playwright (markdown)](https://debbie.codes/blog/debugging-tests-in-playwright.md): Markdown copy, 2022-03-25 - [Playwright Reports and Traces](https://debbie.codes/blog/reports-tracing-tests-in-playwright): Blog · 2022-03-25 · Playwright will serve up a HTML report on your local server so you can easily walk through the steps of your test. You can also open a trace file which gives you even more powerful options of viewing, reporting, interacting and even debugging your tests. · tags: testing, playwright - [Playwright Reports and Traces (markdown)](https://debbie.codes/blog/reports-tracing-tests-in-playwright.md): Markdown copy, 2022-03-25 - [Design Tokens and Theming](https://debbie.codes/blog/design-tokens-and-theming): Blog · 2022-03-24 · As frontend developers we are normally given a design from Figma or similar tools that we then need to turn into code. So where do we start? What are the first steps we should take when converting our design into code? · tags: react - [Design Tokens and Theming (markdown)](https://debbie.codes/blog/design-tokens-and-theming.md): Markdown copy, 2022-03-24 - [Getting Started with Playwright Testing](https://debbie.codes/blog/getting-started-with-playwright-testing): Blog · 2022-03-24 · How can we get more developers to write tests? We can create better tools that makes testing easier. Let's take a look at Playwright and it's amazing features including codegen which writes your tests for you. · tags: testing, playwright - [Getting Started with Playwright Testing (markdown)](https://debbie.codes/blog/getting-started-with-playwright-testing.md): Markdown copy, 2022-03-24 - [Testing iframes with Playwright](https://debbie.codes/blog/testing-iframes-with-playwright): Blog · 2022-03-24 · Have you ever had to test something in an iframe on your page with end to end testing? Even testing the play button of an embedded video used to be difficult but then along came Playwright. Let's take a look at how Playwright can help you test iframes. · tags: testing, playwright - [Testing iframes with Playwright (markdown)](https://debbie.codes/blog/testing-iframes-with-playwright.md): Markdown copy, 2022-03-24 - [Theming in React](https://debbie.codes/blog/theming-in-react): Blog · 2022-03-10 · Theming is a fascinating topic and a really important one these days as more and more people add light and dark mode to their sites and companies change the theme of their site or part of their site on specific dates to celebrate occasions such as christmas, pride week etc. · tags: react - [Theming in React (markdown)](https://debbie.codes/blog/theming-in-react.md): Markdown copy, 2022-03-10 - [Learning about Developer Advocates](https://debbie.codes/blog/learning-about-developer-advocates): Blog · 2022-02-06 · Being a Developer Advocate is by far the best job in the world, at least in my opinion and for me. It isn't for everyone and that's ok too. In this post I am going to share a bit about what I do as a Developer Advocate and what I love about it. · tags: personal, dev-rel - [Learning about Developer Advocates (markdown)](https://debbie.codes/blog/learning-about-developer-advocates.md): Markdown copy, 2022-02-06 - [Building a Cart Context Component](https://debbie.codes/blog/building-cart-context-component): Blog · 2022-02-02 · Creating a generic cart component that can add and remove a product from the cart using React Context. This component can then be used in any other component or app to create more specific cart components. · tags: react - [Building a Cart Context Component (markdown)](https://debbie.codes/blog/building-cart-context-component.md): Markdown copy, 2022-02-02 - [Building and Testing a Counter Component](https://debbie.codes/blog/building-and-testing-counter-component): Blog · 2022-01-12 · We want to build and test a counter component built with React and TypeScript. So where do we start? Which components do we need to build to create this component and what do we test? · tags: react, testing - [Building and Testing a Counter Component (markdown)](https://debbie.codes/blog/building-and-testing-counter-component.md): Markdown copy, 2022-01-12 - [TypeScript and Children](https://debbie.codes/blog/typescript-and-children): Blog · 2022-01-11 · What happens when we pass in children in React? Children is a special prop that allows us to pass in any type of element. It could be a number, a string, a boolean, an array of elements or even another component. So how can we check the types? · tags: typescript, react - [TypeScript and Children (markdown)](https://debbie.codes/blog/typescript-and-children.md): Markdown copy, 2022-01-11 - [Building and Testing a Select Component](https://debbie.codes/blog/building-and-testing-select-input): Blog · 2022-01-10 · Building a Select component with a Composition to see the component render in isolation as well as Tests using React Testing Library to test the select works on change and shows a new value. · tags: react, testing - [Building and Testing a Select Component (markdown)](https://debbie.codes/blog/building-and-testing-select-input.md): Markdown copy, 2022-01-10 - [Testing a Button Component](https://debbie.codes/blog/testing-button-component): Blog · 2022-01-07 · Testing a button component with React Testing Library. What to test and how to test your button component when building multiple compositions of the button. · tags: react, testing - [Testing a Button Component (markdown)](https://debbie.codes/blog/testing-button-component.md): Markdown copy, 2022-01-07 - [2021 - climbing higher and higher](https://debbie.codes/blog/2021-in-review): Blog · 2021-12-31 · A look back at yet again another amazing year even though times were hard. From lockdowns to in person conferences, to changing jobs and learning a new library, as well as mentoring, teaching workshops, doing lots of sport and so much more. · tags: personal - [2021 - climbing higher and higher (markdown)](https://debbie.codes/blog/2021-in-review.md): Markdown copy, 2021-12-31 - [Adding TailwindCSS to Bit](https://debbie.codes/blog/adding-tailwind-to-bit): Blog · 2021-12-30 · Adding TailwindCSS to your Bit components by adding it to the env that is used by your components. This way the the component compositions will show the TailwindCSS classes. · tags: react - [Adding TailwindCSS to Bit (markdown)](https://debbie.codes/blog/adding-tailwind-to-bit.md): Markdown copy, 2021-12-30 - [Building an ecommerce Product details component](https://debbie.codes/blog/building-an-ecommerce-product-page): Blog · 2021-12-23 · Where do you start when building a product page for an e-commerce store? How do you think about naming the components and how much to break down the components? What do you start building first and why? · tags: react - [Building an ecommerce Product details component (markdown)](https://debbie.codes/blog/building-an-ecommerce-product-page.md): Markdown copy, 2021-12-23 - [Understanding TypeScript](https://debbie.codes/blog/understanding-typescript): Blog · 2021-10-06 · TypeScript is a superset of JavaScript. Any types that are added are not part of the final bundle so really TypeScript is there to make your life easier as a developer. · tags: typescript, react - [Understanding TypeScript (markdown)](https://debbie.codes/blog/understanding-typescript.md): Markdown copy, 2021-10-06 - [Improve Performance with Nuxt Image](https://debbie.codes/blog/nuxt-image): Blog · 2021-09-16 · Showing the benefits of Nuxt image by analyzing the performance of my website before and after adding the Nuxt Image module. · tags: nuxt, performance - [Improve Performance with Nuxt Image (markdown)](https://debbie.codes/blog/nuxt-image.md): Markdown copy, 2021-09-16 - [Publish Multiple Components to NPM with no package.jsons to Maintain](https://debbie.codes/blog/publish-multiple-components-to-npm): Blog · 2021-08-11 · Sharing components across multiple projects or with other developers seems to be the most complicated thing, yet it really shouldn’t be. With package registries such as npm or GitHub packages surely we should easily be able to share our components by publishing them as packages. · tags: architecture - [Publish Multiple Components to NPM with no package.jsons to Maintain (markdown)](https://debbie.codes/blog/publish-multiple-components-to-npm.md): Markdown copy, 2021-08-11 - [Sharing React Components across Multiple Applications](https://debbie.codes/blog/sharing-react-components-across-multiple-applications): Blog · 2021-06-16 · We have almost all been in a situation where we need to share a component between one app and another. Often we just decide to copy and paste it because it really is the quickest option. And sometimes it’s even ok, especially when it comes to those smaller components. But what if you wanted to share a big and more complex component? · tags: react, architecture - [Sharing React Components across Multiple Applications (markdown)](https://debbie.codes/blog/sharing-react-components-across-multiple-applications.md): Markdown copy, 2021-06-16 - [VS Code Tips](https://debbie.codes/blog/vs-code-tips): Blog · 2021-05-13 · Tips, shortcuts and extensions to make working with VS Code easier so you can developer faster and let the tools do the job for you. · tags: vs-code - [VS Code Tips (markdown)](https://debbie.codes/blog/vs-code-tips.md): Markdown copy, 2021-05-13 - [Amazing Things are Going to Happen](https://debbie.codes/blog/amazing-things-are-going-to-happen): Blog · 2021-04-26 · Believing in yourself is hard, especially when for so long people have put you down or not believed in you. Getting those voices out of your head is not easy but I think I have finally done it and now I can finally grow and just be a star. · tags: personal, motivation - [Amazing Things are Going to Happen (markdown)](https://debbie.codes/blog/amazing-things-are-going-to-happen.md): Markdown copy, 2021-04-26 - [Discord as a Virtual Office](https://debbie.codes/blog/discord-virtual-office): Blog · 2021-04-03 · We use Discord as our virtual office at Bit and I have to tell you all about it as it really is a great way to work and collaborate with others especially when working in different time zones. · tags: personal - [Discord as a Virtual Office (markdown)](https://debbie.codes/blog/discord-virtual-office.md): Markdown copy, 2021-04-03 - [Learning React](https://debbie.codes/blog/learning-react): Blog · 2021-03-21 · Recently I started learning React for my new job. I basically went from being a coding ninja to being a coding newbie. But hey everything can be learnt so here is what I have learnt so far. · tags: react - [Learning React (markdown)](https://debbie.codes/blog/learning-react.md): Markdown copy, 2021-03-21 - [GitHub Star Shares Tips on Developer Advocacy, Coding Without a Degree, and Imposter Syndrome](https://debbie.codes/blog/ask-engineers-anything): Blog · 2021-03-10 · For February’s Ask Engineers Anything event (aka office hours for our engineer community), I invited GitHub Star and community favorite, Debbie O’Brien, to share her experience as a woman in tech who is making a huge difference in the ecosystem. · tags: dev-rel - [GitHub Star Shares Tips on Developer Advocacy, Coding Without a Degree, and Imposter Syndrome (markdown)](https://debbie.codes/blog/ask-engineers-anything.md): Markdown copy, 2021-03-10 - [Understanding Nuxt Middleware](https://debbie.codes/blog/nuxt-middleware): Blog · 2021-02-18 · Middleware lets you define custom functions that can be run before rendering either a page or a group of pages which we call layouts. · tags: nuxt - [Understanding Nuxt Middleware (markdown)](https://debbie.codes/blog/nuxt-middleware.md): Markdown copy, 2021-02-18 - [Customizing the Nuxt Loading Component](https://debbie.codes/blog/nuxt-loading): Blog · 2021-02-16 · We can customize the Loading for our Client Side applications as well as the loading Progress bar for our server rendered applications and we can even customize this to create our own. · tags: nuxt - [Customizing the Nuxt Loading Component (markdown)](https://debbie.codes/blog/nuxt-loading.md): Markdown copy, 2021-02-16 - [Deploying your Nuxt app to Netlify](https://debbie.codes/blog/nuxt-deploying-to-netlify): Blog · 2021-02-07 · If you are building a Nuxt static site and want to deploy it easily and for free then Netlify is a great choice. Let me show you how easy it is. · tags: nuxt - [Deploying your Nuxt app to Netlify (markdown)](https://debbie.codes/blog/nuxt-deploying-to-netlify.md): Markdown copy, 2021-02-07 - [Why Live Streams Scare me](https://debbie.codes/blog/why-livestreams-scare-me): Blog · 2021-02-05 · What its like to do a live stream, why it scares me and why I know the only way to get over fear is to keep doing it again and again. · tags: personal - [Why Live Streams Scare me (markdown)](https://debbie.codes/blog/why-livestreams-scare-me.md): Markdown copy, 2021-02-05 - [How Progressive Web Apps work](https://debbie.codes/blog/progressive-web-apps): Blog · 2021-02-04 · Progressive web apps will really help your performance and you can install them on your home screen or desktop and have that app like feel for your website. Let's have a look at how they work. · tags: nuxt, performance - [How Progressive Web Apps work (markdown)](https://debbie.codes/blog/progressive-web-apps.md): Markdown copy, 2021-02-04 - [Adding Vue Plugins to your Nuxt APP](https://debbie.codes/blog/nuxt-add-vue-plugins): Blog · 2021-02-02 · In Nuxt we can add Vue plugins to our application by creating a Nuxt plugin and then registering that plugin in the Nuxt Config file. · tags: nuxt - [Adding Vue Plugins to your Nuxt APP (markdown)](https://debbie.codes/blog/nuxt-add-vue-plugins.md): Markdown copy, 2021-02-02 - [Creating Video Courses](https://debbie.codes/blog/creating-video-courses): Blog · 2021-01-31 · Creating video courses can be very time consuming and for sure there is no one way to go about it. In this post I share what I have learnt and how I now find it easier to create courses. · tags: personal - [Creating Video Courses (markdown)](https://debbie.codes/blog/creating-video-courses.md): Markdown copy, 2021-01-31 - [Why I Love Nuxt](https://debbie.codes/blog/why-i-love-nuxt): Blog · 2021-01-30 · I have been using Nuxt in all of my recent tech jobs but why did I start using it? What problems did I have trying to convince the team and more important the clients. And why should you use Nuxt? · tags: nuxt, personal - [Why I Love Nuxt (markdown)](https://debbie.codes/blog/why-i-love-nuxt.md): Markdown copy, 2021-01-30 - [Lite YouTube Embeds](https://debbie.codes/blog/nuxt-lite-youtube-embeds): Blog · 2021-01-29 · If you are adding YouTube videos to your site you might notice that they can load quite slowly especially when loading iframes. However this is a better way. With this library your YouTube videos will load super fast and your site will be more performant because of it. · tags: nuxt, performance - [Lite YouTube Embeds (markdown)](https://debbie.codes/blog/nuxt-lite-youtube-embeds.md): Markdown copy, 2021-01-29 - [Adding analytics to your Nuxt site](https://debbie.codes/blog/nuxt-analytics): Blog · 2021-01-28 · When you build your own site sometimes it's important to add analytics to see what is doing well, what your audience is spending time and perhaps find ways of improving your site · tags: nuxt - [Adding analytics to your Nuxt site (markdown)](https://debbie.codes/blog/nuxt-analytics.md): Markdown copy, 2021-01-28 - [2020 - my most successful year (career wise)](https://debbie.codes/blog/2020-in-review): Blog · 2020-12-30 · A look back at what we could say has been an interesting year, challenging in many ways yet somehow has been my most successful year to date. · tags: personal - [2020 - my most successful year (career wise) (markdown)](https://debbie.codes/blog/2020-in-review.md): Markdown copy, 2020-12-30 - [Creating a Nuxt Module](https://debbie.codes/blog/creating-a-nuxt-module): Blog · 2020-11-27 · Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Nuxt modules can be incorporated into npm packages. This makes them easy to reuse across projects and to share with the community. · tags: nuxt - [Creating a Nuxt Module (markdown)](https://debbie.codes/blog/creating-a-nuxt-module.md): Markdown copy, 2020-11-27 - [How we use Nuxt at The NuxtJS Company](https://debbie.codes/blog/how-we-use-nuxt-at-the-nuxtjs-company): Blog · 2020-10-22 · The first commit for Nuxt.js on Github was made on October 26th, 2016. Since then the Nuxt.js framework has grown from 2 creators in 2016 to having 10 full-time employees at the NuxtJS company, as well as the amazing Nuxt community with maintainers, ambassadors and contributors. · tags: nuxt - [How we use Nuxt at The NuxtJS Company (markdown)](https://debbie.codes/blog/how-we-use-nuxt-at-the-nuxtjs-company.md): Markdown copy, 2020-10-22 - [Vue Directives](https://debbie.codes/blog/vue-directives): Blog · 2020-10-16 · Vue Directives are a great way of doing things like trimming your models or only showing something once. So many cool directives to make your life easier when coding in Vue. · tags: vue, nuxt - [Vue Directives (markdown)](https://debbie.codes/blog/vue-directives.md): Markdown copy, 2020-10-16 - [Formatting a date in JavaScript](https://debbie.codes/blog/date-formatting): Blog · 2020-10-09 · How to format a date in JavaScript without using any libraries so you easily display dates in your Vue or Nuxt application · tags: javascript - [Formatting a date in JavaScript (markdown)](https://debbie.codes/blog/date-formatting.md): Markdown copy, 2020-10-09 - [Advanced i18n in Nuxt using Interpolations](https://debbie.codes/blog/advanced-i18n-in-nuxt-using-interpolations): Blog · 2020-09-17 · That's where i18n interpolation comes into practice. With i18n, instead of using v-html we can instead use interpolation. How? i18n gives us an component that we can use on any of our pages or inside our components. · tags: nuxt, vue - [Advanced i18n in Nuxt using Interpolations (markdown)](https://debbie.codes/blog/advanced-i18n-in-nuxt-using-interpolations.md): Markdown copy, 2020-09-17 - [Being an Extrovert in a Virtual World](https://debbie.codes/blog/extrovert-in-virtual-world): Blog · 2020-09-12 · From being surrounded by amazing people to being locked up from the world. 2020 has been an interesting year and a very hard one for those who are extroverts and love being around people. · tags: personal - [Being an Extrovert in a Virtual World (markdown)](https://debbie.codes/blog/extrovert-in-virtual-world.md): Markdown copy, 2020-09-12 - [CityJSConf talks to…Debbie O’Brien](https://debbie.codes/blog/cityjs-conf): Blog · 2020-09-07 · “I guess you could say I love the buzz of the stage but also because my talks help people learn something new. Now the virtual world is not the same at all, but what can we do? I don’t dislike it — I would just prefer to see and talk to people. I am very much a people’s person.” · tags: personal - [CityJSConf talks to…Debbie O’Brien (markdown)](https://debbie.codes/blog/cityjs-conf.md): Markdown copy, 2020-09-07 - [Why static sites are back](https://debbie.codes/blog/why-static-sites-are-back): Blog · 2020-09-07 · When we first built websites many years ago they were very static. It was all we knew. Html with some CSS and a tiny bit of JavaScript. A typical website from 1996, SpaceJam which really shows how static sites are. · tags: jamstack - [Why static sites are back (markdown)](https://debbie.codes/blog/why-static-sites-are-back.md): Markdown copy, 2020-09-07 - [The JavaScript Array.Map() method](https://debbie.codes/blog/js-array-map-method): Blog · 2020-08-09 · The .map() method in JavaScript lets you loop over every element in an array and modify or add to it and then return a different element to take that elements place · tags: javascript - [The JavaScript Array.Map() method (markdown)](https://debbie.codes/blog/js-array-map-method.md): Markdown copy, 2020-08-09 - [Adding a cookie consent banner](https://debbie.codes/blog/nuxt-cookie-consent): Blog · 2020-07-29 · When in Europe and using cookies we need to show a cookie consent banner so our users are aware that we are using cookies on the site. · tags: nuxt - [Adding a cookie consent banner (markdown)](https://debbie.codes/blog/nuxt-cookie-consent.md): Markdown copy, 2020-07-29 - [Fetching graphQL queries](https://debbie.codes/blog/nuxt-fetching-graphql-queries): Blog · 2020-07-17 · How to fetch data from graphQL without having to use libraries such as apollo · tags: nuxt - [Fetching graphQL queries (markdown)](https://debbie.codes/blog/nuxt-fetching-graphql-queries.md): Markdown copy, 2020-07-17 - [Migrating to Nuxt content](https://debbie.codes/blog/nuxt-migrating-to-nuxt-content): Blog · 2020-07-17 · If you already have documentation set up and would like to migrate to Nuxt Content then this guide should help you make migrate easily and take advantage of what the docs theme gives you. · tags: nuxt - [Migrating to Nuxt content (markdown)](https://debbie.codes/blog/nuxt-migrating-to-nuxt-content.md): Markdown copy, 2020-07-17 - [Setting up cypress](https://debbie.codes/blog/cypress-setup): Blog · 2020-07-17 · Let's take a look at how you setup Cypress in your Nuxt.js project, setup a github action for continuous integration so that Netlify will run the tests every time your application is building. · tags: nuxt, testing - [Setting up cypress (markdown)](https://debbie.codes/blog/cypress-setup.md): Markdown copy, 2020-07-17 - [Using Apollo to Fetch Data](https://debbie.codes/blog/nuxt-using-apollo-to-fetch-data): Blog · 2020-07-17 · Using Apollo to Fetch Data from a GraphQL API · tags: nuxt - [Using Apollo to Fetch Data (markdown)](https://debbie.codes/blog/nuxt-using-apollo-to-fetch-data.md): Markdown copy, 2020-07-17 - [Create a Blog with Nuxt Content](https://debbie.codes/blog/create-a-blog-with-nuxt-content): Blog · 2020-07-02 · The content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it. · tags: nuxt - [Create a Blog with Nuxt Content (markdown)](https://debbie.codes/blog/create-a-blog-with-nuxt-content.md): Markdown copy, 2020-07-02 - [Adding a PWA in Nuxt.js](https://debbie.codes/blog/nuxt-adding-pwa): Blog · 2020-06-28 · Most people don't realise how easy it really is to add a PWA with Nuxt.js. Progressive Web Apps (PWA) deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. · tags: nuxt, performance - [Adding a PWA in Nuxt.js (markdown)](https://debbie.codes/blog/nuxt-adding-pwa.md): Markdown copy, 2020-06-28 - [Styling your active classes in Nuxt.js](https://debbie.codes/blog/nuxt-active-styles): Blog · 2020-06-28 · Nuxt.js, which uses `vue-router`, can easily tell what route you are on and therefore can add a class to that link when the user is on that page. By default this class is called `nuxt-link-active`. · tags: nuxt - [Styling your active classes in Nuxt.js (markdown)](https://debbie.codes/blog/nuxt-active-styles.md): Markdown copy, 2020-06-28 - [Auto Load Vuejs Components in Nuxt](https://debbie.codes/blog/autoload-vue-components-in-nuxt): Blog · 2020-06-17 · With Nuxt components you can auto import your components really easily and even comes with support for dynamic imports otherwise known as lazy loading. That means you can just add your component in the template without having to add it to the script tag. This makes development much faster. · tags: nuxt - [Auto Load Vuejs Components in Nuxt (markdown)](https://debbie.codes/blog/autoload-vue-components-in-nuxt.md): Markdown copy, 2020-06-17 - [Moving from @nuxtjs/dotenv to runtime config](https://debbie.codes/blog/moving-from-dontenv-to-runtime-config): Blog · 2020-06-15 · In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors. · tags: nuxt - [Moving from @nuxtjs/dotenv to runtime config (markdown)](https://debbie.codes/blog/moving-from-dontenv-to-runtime-config.md): Markdown copy, 2020-06-15 - [Going dark with Nuxt.js color mode](https://debbie.codes/blog/going-dark-nuxt-color-mode): Blog · 2020-05-19 · The @nuxtjs/color-mode module is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (eg sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance. · tags: nuxt - [Going dark with Nuxt.js color mode (markdown)](https://debbie.codes/blog/going-dark-nuxt-color-mode.md): Markdown copy, 2020-05-19 - [ignoring your files with Nuxt.js](https://debbie.codes/blog/nuxt-ignoring-files-nuxt): Blog · 2020-04-24 · In Nuxt.js there are 3 different ways to ignore files during the build phase. This is great for static site generation which means you can still generate your site with a broken page as it will be ignored. · tags: nuxt - [ignoring your files with Nuxt.js (markdown)](https://debbie.codes/blog/nuxt-ignoring-files-nuxt.md): Markdown copy, 2020-04-24 - [Creating an error page in Nuxt.js](https://debbie.codes/blog/nuxt-error-page): Blog · 2020-04-23 · An error page is the page you see when you arrive at a page that can't be found. These are typically called 404 pages. To create an error page all you need to do is create an `error.vue` file in your layouts folder. Layouts? · tags: nuxt - [Creating an error page in Nuxt.js (markdown)](https://debbie.codes/blog/nuxt-error-page.md): Markdown copy, 2020-04-23 - [Configure the Nuxt.js server to see your site on your mobile](https://debbie.codes/blog/nuxt-configure-server-to-see-site-on-mobile): Blog · 2020-04-21 · Sometimes you want to test out your site on your actual mobile device or tablet and not just in the dev tools. This is great when bug fixing or just to see how it looks in a real environment. · tags: nuxt - [Configure the Nuxt.js server to see your site on your mobile (markdown)](https://debbie.codes/blog/nuxt-configure-server-to-see-site-on-mobile.md): Markdown copy, 2020-04-21 - [Show a message when your user is offline with $nuxt.isOffline](https://debbie.codes/blog/nuxt-show-message-when-offline): Blog · 2020-04-20 · Did you know that `$nuxt.isOffline` can be used to show your users content based on if they are online or not. · tags: nuxt - [Show a message when your user is offline with $nuxt.isOffline (markdown)](https://debbie.codes/blog/nuxt-show-message-when-offline.md): Markdown copy, 2020-04-20 - [The Nuxt Loading Progress Bar](https://debbie.codes/blog/nuxt-loading-progress-bar): Blog · 2020-04-17 · Nuxt.js automatically gives you a loading progress bar component which is shown between routes. Did you know you can customise it, disable it or create your own component? · tags: nuxt - [The Nuxt Loading Progress Bar (markdown)](https://debbie.codes/blog/nuxt-loading-progress-bar.md): Markdown copy, 2020-04-17 - [Let's Analyze your webpack bundles with Nuxt](https://debbie.codes/blog/nuxt-analyze-webpack-bundles): Blog · 2020-04-16 · As we add so many third party libraries to our site sometimes we forget that perhaps they are going to have an impact on our performance or sometimes we just don't read the install instructions and install the whole library instead of only what we need. · tags: nuxt, performance - [Let's Analyze your webpack bundles with Nuxt (markdown)](https://debbie.codes/blog/nuxt-analyze-webpack-bundles.md): Markdown copy, 2020-04-16 - [Page and Layout Transitions in Nuxt.js](https://debbie.codes/blog/nuxt-page-and-layout-transitions): Blog · 2020-04-13 · With Nuxt.js it is really easy to add transitions between your pages. You can create transitions for all your pages or layouts and you can even have different transitions for specific pages. · tags: nuxt - [Page and Layout Transitions in Nuxt.js (markdown)](https://debbie.codes/blog/nuxt-page-and-layout-transitions.md): Markdown copy, 2020-04-13 - [Build a Counter, Dropdown and Accordion in Vue Components!](https://debbie.codes/blog/build-counter-dropdown-accordion): Blog · 2019-08-21 · Let’s dive into building some core main components that you might be tasked with when writing applications in Vue. Or, if you’re new to Vue, then these are definitely some great ways to get started understanding the more ‘common’ components that we might work with on a day-to-day basis. With that in mind, let’s get started right away with building a Counter, Dropdown and finally an Accordion with Vue! · tags: vue - [Build a Counter, Dropdown and Accordion in Vue Components! (markdown)](https://debbie.codes/blog/build-counter-dropdown-accordion.md): Markdown copy, 2019-08-21 - [Finding your way around the Vue UI](https://debbie.codes/blog/finding-your-way-around-the-vue-ui): Blog · 2019-06-25 · Vue CLI is the fastest way to get your Vue project off the ground and it also comes with a really cool graphical user interface that allows you to easily modify your project’s configuration, run linters, search for and install plugins, analyse your bundle with webpack and more. · tags: vue - [Finding your way around the Vue UI (markdown)](https://debbie.codes/blog/finding-your-way-around-the-vue-ui.md): Markdown copy, 2019-06-25 - [JavaScript Workshop with Kyle Simpson](https://debbie.codes/blog/javascript-workshop-with-kyle-simpson): Blog · 2018-10-15 · It has been a couple of months since Kyle, author of the “You Don’t Know JS” series, visited our trivago headquarters and gave us a wonderful JavaScript workshop. It was such an enjoyable week, being able to meet Kyle in person and walk through his thinking behind the materials. · tags: personal - [JavaScript Workshop with Kyle Simpson (markdown)](https://debbie.codes/blog/javascript-workshop-with-kyle-simpson.md): Markdown copy, 2018-10-15 - [How learning to code changed my life](https://debbie.codes/blog/how-learning-to-code-changed-my-life): Blog · 2018-05-14 · A year ago, I was in a very different place. I had come to the end of a very long journey and I just didn’t know what to do next. I didn’t really have the interest or the strength to continue and I believed that I didn’t have a purpose anymore. I was in a deep, dark hole and I didn’t know how to get out of it. · tags: personal - [How learning to code changed my life (markdown)](https://debbie.codes/blog/how-learning-to-code-changed-my-life.md): Markdown copy, 2018-05-14 - [Meet Debbie, It Took Her Only 8 Months to Become a Front-End Architect](https://debbie.codes/blog/meet-debbie-8-months-to-frontend-architect): Blog · 2017-12-27 · Each day we look forward to seeing our students around the world succeed as they grow and navigate within their chosen career path. We’re even more thrilled when our students become graduates and get a job in their dream role! · tags: personal - [Meet Debbie, It Took Her Only 8 Months to Become a Front-End Architect (markdown)](https://debbie.codes/blog/meet-debbie-8-months-to-frontend-architect.md): Markdown copy, 2017-12-27 - [What It’s Like To Work After Studying Online](https://debbie.codes/blog/whats-it-like-to-work-after-studying-online): Blog · 2017-11-30 · I was one of the first graduates from the Front-End Web Development course. I had played around with different online courses in coding before, but really found what I was looking for with OpenClassrooms. Fast forward 8 months, I had completed all projects and managed to get myself a job at Logitravel, a holiday booking site based in Palma, Mallorca. · tags: personal - [What It’s Like To Work After Studying Online (markdown)](https://debbie.codes/blog/whats-it-like-to-work-after-studying-online.md): Markdown copy, 2017-11-30 ## Podcasts - [From Automation to Delegation: Learning to Work with AI Agents](https://open.spotify.com/episode/1ziud0DI4bzKLsa3uClZZm): Podcast · 2026-11-11 · In this episode, Michael Dowden sits down with Debbie O'Brien to discuss how AI agents and automation apply to both daily personal tasks and software development, from shopping and scheduling to automated testing, bug hunting, and development workflows. They explore what it takes to make this kind of automation work: breaking down complex problems into smaller tasks, providing agents with the right context, verifying their output, managing cost, and gradually building trust. Rather than replacing developers, agents shift their role toward coordination, delegation, and review. The key challenge is no longer simply knowing how to use AI, but learning how to structure work so that multiple agents can reliably contribute to it. The conversation also considers the boundaries of delegation, from financial and security risks to unreliable information and poorly integrated services. The central message is: start small, experiment with low-risk tasks, learn what agents can and can't do, and increase their autonomy as they earn your trust. · tags: ai - [The Role of AI in Testing with Debbie O'Brien](https://www.dotnetrocks.com/details/2011): Podcast · 2026-07-16 · How has testing changed in the era of AI? Carl and Richard talk to Debbie O'Brien about using LLMs to help build and validate tests, drawing on her work at Zephyr Cloud. Debbie talks about using Playwright to validate application workflows and generate documentation. This leads to a discussion about documentation being more important than ever, since LLMs will actually read it! Maintaining quality is a challenge with LLM-generated code and tests, so there's always a role for a critical eye in the process. · tags: testing, playwright - [Coffee and Open Source Conversation - Debbie O'Brien](https://www.coffeeandopensource.com/guest/debbie-o-brien.html): Podcast · 2026-05-19 · Debbie joins Isaac Levin on Coffee and Open Source to chat about her journey in frontend development, working in dev rel, her love for Vue.js and Nuxt.js, and her current focus on end-to-end testing with Playwright. · tags: dev-rel, playwright, testing - [Future of Testing | Debbie O'Brien on Playwright, MCP, and AI-Driven Testing](https://www.youtube.com/watch?v=j2n58sSZheo): Podcast · 2026-01-19 · In this episode, I'm joined by Debbie O'Brien, long-time Playwright advocate and testing expert, to talk about the future of software testing, automation, and AI-driven workflows. Debbie recently transitioned out of the Playwright core team and now continues her work as a Playwright ambassador. We talk openly about what that change means, how she views the future of Playwright, and what's next for her personally and professionally. · tags: playwright, testing, mcp - [How to Test with Playwright - Debbie O'Brien](https://www.youtube.com/watch?v=2d4FtmO8Xas): Podcast · 2026-01-19 · In this episode of "How to Test This," we are joined by Debbie O'Brien, Global Community Lead and key contributor to the Playwright framework. Topics discussed include her journey from a front-end developer to a leader in the testing community, Playwright as a powerful tool for end-to-end testing, common mistakes teams make when using Playwright, the role of AI in testing and MCP, and practical advice for aspiring test automation engineers. · tags: playwright, testing, mcp - [Open Source, Cycling and What's Next with Debbie O'Brien](https://www.harper.fast/resources/open-source-cycling-and-what-s-next-with-debbie-o-brien): Podcast · 2026-01-02 · Join Debbie O'Brien on the Select * Podcast as she shares insights on open source, and developer experience, and family. · tags: dev-rel - [Playwright - with Debbie O'Brien](https://unhandledexceptionpodcast.com/posts/0083-playwright/): Podcast · 2025-12-27 · In this episode, Debbie O'Brien chats about Playwright - Microsoft's open-source end-to-end testing framework. Topics covered include Codegen, Trace Viewer, UI Mode, and AI features including the Playwright MCP Server which enables AI agents to automate browser interactions. · tags: testing, playwright, mcp - [La IA de Microsoft va a REVOLUCIONAR el desarrollo con Debbie O'Brien | MAB Podcast #19](https://www.youtube.com/watch?v=J3djzf5bMEs): Podcast · 2025-11-27 · En este episodio de Más Allá del BUG, Debbie O'Brien, Developer Advocate en Microsoft, speaker internacional y figura clave en la comunidad front-end y de testing, habla sobre Playwright—el framework creado por el equipo original de Puppeteer y Chrome DevTools—y cómo la IA está revolucionando el desarrollo y la automatización. · tags: playwright, testing - [Testing Made Easy: Debbie O'Brien Explains Playwright and its Game-Changing MCP Server](https://dotnetcore.show/season-8/testing-made-easy-debbie-obrien-explains-playwright-and-its-game-changing-mcp-server/): Podcast · 2025-09-15 · Debbie O'Brien discussed her experience with Playwright and its MCP Server. She highlighted the importance of keeping up with technology and not getting complacent, as new tools and features are constantly emerging. Debbie shared her own journey from being a JavaScript developer to becoming more comfortable working in .NET, citing AI's role in facilitating this transition. · tags: playwright, testing, mcp - [TestGuild Automation Podcast - Playwright Expert Interview](https://testguild.com/podcast/automation/a552-debbie/): Podcast · 2025-07-08 · Join Debbie O'Brien as she shares her expertise on Playwright testing, automation best practices, and the future of web application testing. Learn from real-world experiences and discover how to implement effective testing strategies in your development workflow. · tags: playwright, testing - [Angular Show - Playwright Takes Center Stage](https://podcasts.apple.com/us/podcast/s9-e14-playwright-takes-center-stage-debbie-obrien/id1501989276?i=1000716318022): Podcast · 2025-07-07 · Debbie O'Brien joins the podcast to discuss how Playwright is revolutionizing the testing landscape. From its cross-browser capabilities to its developer-friendly APIs, learn why Playwright is becoming the go-to choice for modern web application testing. · tags: playwright, testing - [Changing Testing using Playwright MCP with Debbie O'Brien](https://www.dotnetrocks.com/details/1954): Podcast · 2025-06-05 · What happens when AI comes to your web testing tool? While at Build, Carl and Richard talked to Debbie O'Brien about the latest features in Playwright, including Playwright MCP, the model control plane for Playwright capabilities. Debbie talks about using Playwright MCP to buy a table. Ask your LLM what tests should be written for your web page, and then ask it to write them. · tags: testing, playwright, mcp - [Playwright with Debbie O’Brien](https://webrush.io/episodes/episode-235-playwright-with-debbie-obrien): Podcast · 2023-05-25 · Debbie O’Brien talks with us about Playwright, writing tests with different languages, the Playwright VS Code extension, visual comparison testing, automating tests with Playwright, and migration tools to move to Playwright. · tags: playwright, testing - [Playwright with Debbie O’Brien and Max Schmitt](https://legacycoderocks.libsyn.com/playwright-with-debbie-obrien-and-max-schmitt): Podcast · 2023-05-23 · Microsoft invited the Legacy Code Rocks team to attend Microsoft Build Conference in the Seattle Convention Center. In this episode, we talk with Debbie O’Brien and Max Schmitt, both part of the Microsoft Playwright team.. · tags: playwright, testing - [Web Testing with Playwright](https://podcasters.spotify.com/pod/show/qa-therapy-podcast/episodes/S3-E19-Web-Testing-with-Playwright-e23scj3): Podcast · 2023-05-12 · Are you unsure of what framework to adopt for web testing? Tools such as Playwright, backed by Microsoft and a big community, are a great option. · tags: playwright, testing - [Your testing questions answered](https://podrocket.logrocket.com/mailbag-1): Podcast · 2023-02-28 · In our first-ever mailbag episode, testing experts Debbie O’Brien, Gleb Bahmutov, and Kent C. Dodds answer your questions about testing. · tags: playwright, testing - [Web Testing And Automations With Playwright](https://topenddevs.com/podcasts/views-on-vue/web-testing-and-automations-with-playwright-vue-206): Podcast · 2023-01-07 · Steve and Debbie talk about the Microsoft tool called “Playwright”. It is a framework for Web Testing and Automation. Moreover, they go into how the testing works, its useful features, and how it has more advantages than other testing solutions. · tags: playwright, testing - [e2e Testing with Playwright and the use of codegen](https://www.betabit.nl/en/betatalks-the-podcast/45-end-to-end-testing-with-playwright-and-the-use-of-codegen-with-debbie-obrien): Podcast · 2022-12-04 · What problems do Playwright and codegen solve? And what’s coming in the near future? Moreover, we elaborate on what Playwright exactly is; its best features and benefits, what it does differently, and how easily it integrates. · tags: playwright, testing - [All about Playwright](https://changelog.com/jsparty/253): Podcast · 2022-11-24 · deep-dive on Playwright, an automation library for cross-browser end-to-end testing. Along the way, we learn Playwright’s unique value proposition, cool features like auto-waiting & the trace viewer, how it compares to Cypress & a lot more. · tags: playwright, testing - [e2e Testing with Playwright](https://www.compressed.fm/episode/98): Podcast · 2022-10-24 · Debbie discusses the importance of end to end testing as well as her work at Microsoft. · tags: playwright, testing - [Testing Web Apps using Playwright](https://open.spotify.com/episode/35ofJFdyBhDlZQDE91iaq9): Podcast · 2022-10-13 · How do you test your web applications? Carl and Richard talk to Debbie O'Brien about Playwright, Microsoft's new open-source web application testing tool. Playwright lets you build tests in an array of languages, platforms, and browsers. Debbie talks about how you can build atomic tests that will survive new versions, and test independently of other features. And when tests fail, Playwright generates a PWA of the test run showing exactly where the test fails! · tags: playwright, testing - [Component testing with Playwright](https://podrocket.logrocket.com/playwright): Podcast · 2022-10-04 · Debbie O’Brien, Senior Technical Program Manager at Microsoft and advocate for Playwright, comes to talk about how Playwright provides end-to-end testing, component testing, and more! · tags: playwright, testing - [Transition from Nuxt to React](https://open.spotify.com/episode/2pQNVdLkGXL0f9QVHFlnpK?si=4b9c466d3b2a4fc3&nd=1): Podcast · 2022-04-01 · Debbie O’Brien is an expert as she advocates, gives talks on and helps with documentation on Nuxt. But she recently had to transition to the React world, which meant transitioning from being an expert in her field to a junior developer again. Stay tuned and learn how she navigated the change. · tags: nuxt, react - [Ant-man and the Wasp - w/ Debbie O'Brien](https://frontendheroes.transistor.fm/episodes/ant-man-and-the-wasp-w-debbie-obrien): Podcast · 2021-10-06 · We talk about starting out in the frontend, how to keep learning and growing, even while switching from one paradigm to another to another. We also talk a fair amount about the concepts behind Bit, getting an understanding of what problems it tries to solve and why. · tags: bit - [Tu Código me suena](https://anchor.fm/tu-codigo-me-suena/episodes/05---Pasamos-fro-en-la-Antrtida--mientras-tenemos-un-combate-de-taekwondo-y-vamos-en-bici-e153d1o): Podcast · 2021-09-16 · En este quinto episodio conoceremos a una persona que ha dado una charla en la Antartida, es dev advocate y dan 4 cinturón negro en taekwondo, además fue actriz y le encanta ir en bici. · tags: bit - [Developer Advocacy from Nuxt to React](https://enjoythevue.io/episodes/71/): Podcast · 2021-07-26 · Transitioning from being a developer to team leader to working as a developer advocate, Debbie shares her passionate take on KPIs as well as the lessons she learned from the book Surrounded by Idiots. We delve into the traits that make up a good developer advocate and discuss why there\’s a need for companies to introduce the role of junior developer advocate. Later Debbie shares some of the learning challenges you\’ll experience as a developer advocate and how she adapted to learning React under high-pressure circumstances. · tags: dev-rel - [Bit with Debbie O'Brien](https://fsjam.org/35): Podcast · 2021-07-12 · In this episode we discuss workflows to enable sharing components across large codebases, how to make reusable frontend code, and techniques for navigating digital work environments. · tags: nuxt, bit - [Developer Advocacy, Navigating Tech, & Frontend Dev#](https://rss.com/podcasts/harperdb-select-star/200839/): Podcast · 2021-05-08 · In SELECT* episode 6, Margo chats with Debbie O'Brien on her interesting journey into tech and across numerous roles, from leading a dev team into dev advocacy, and more! She shares a bit about her initial career shift and learning to code and what it's like to work at Bit. · tags: bit, dev-rel - [Managing Component Architecture](https://dev.to/modernweb/s08e07-modern-web-podcast-managing-component-architecture-with-debbie-o-brien): Podcast · 2021-03-24 · In this episode, Tracy Lee interviews Debbie about bit.dev, a new open source tool for helping developer share components. We learn how to use Bit to manage component architecture, think in components, and how this can help you a build more scalable, reusable codebase and work across teams. · tags: bit - [From Nuxt to React](https://topenddevs.com/podcasts/views-on-vue/vue-142-from-nuxt-to-react-catching-up-with-debbie-o-brien): Podcast · 2021-03-17 · Lindsay and Steve talk with Debbie about her new position, about what Bit is, and how they are bringing a new approach to component development. We also talk about how Debbie is having to learn React and ways we learn new frameworks and libraries. · tags: nuxt, react, bit - [Redefining JamStack](https://www.heavybit.com/library/podcasts/jamstack-radio/ep-74-redefining-jamstack-with-debbie-obrien-of-nuxtjs): Podcast · 2021-02-28 · In episode 74 of JAMstack Radio, Brian speaks with Debbie O’Brien of NuxtJS. They discuss the use cases of NuxtJS, tactics for engaging open source communities, and the importance of rewarding project maintainers. · tags: nuxt, jamstack - [Speaking to an Online Audience](https://podcasts.apple.com/us/podcast/2-debbie-obrien-speaking-to-an-online-audience/id1544906363?i=1000503628662): Podcast · 2021-01-01 · I caught up with Debbie last month to talk about bullying in the workplace, burnout, advancing your career, and tips for speaking to an online audience · tags: nuxt - [Whiskey Wednesday Mentorship](https://anchor.fm/whiskey-wednesday/episodes/Episode-10---Mentorship-eko1me): Podcast · 2020-10-07 · Finding a mentor when starting out as a beginner (and also after) is important and not always an easy task. In this episode, we will talk about everything you need to know when looking for a mentor, or becoming a mentor. · tags: mentoring - [Nuxtify Everything](https://topenddevs.com/podcasts/views-on-vue/vov-118-nuxtify-everything-with-debbie-o-brien): Podcast · 2020-09-20 · In this episode we discuss Nuxt becoming a company, the new component and content modules, and the static module. We also talk about enhancements to the Nuxt documentation, providing new ways to learn Nuxt and ways to integrate it with other technologies. · tags: nuxt - [CityJS Conference](https://podimo.com/en/shows/london-node-user-group-lnug-podcast/episode/b4e6f280-3e61-43f6-ab4c-2d7d082cce7d): Podcast · 2020-08-23 · A look at the upcoming online CityJS event, what to expect from an online conference and we get some insight from some of the speakers. · tags: nuxt - [NuxtJS and the JamStack](https://thatsmyjamstack.com/episodes/debbie-obrien/): Podcast · 2020-07-06 · Debbie O'Brien on NuxtJS, web frameworks, creating your own framework and more · tags: nuxt - [Desarrollo en NuxtJS](https://www.danielprimo.io/blog/desarrolla-nuxtjs-con-debbie-o-brien): Podcast · 2020-06-20 · Qué consiste mi labor profesional y como he crecido como desarrolladora a lo largo de los años (un proceso que cuento de forma muy divertida). · tags: nuxt - [Nuxt and Next Steps](https://enjoythevue.io/episodes/17/): Podcast · 2020-05-18 · Debbie tells us all about Nuxt. She even has an exciting announcement about a new release coming soon with Markdown in Nuxt that has the panel super excited! There is talk about WordPress Headless CMS and Wiziwig. · tags: nuxt - [Contributing to Open Source](https://topenddevs.com/podcasts/views-on-vue/vov-073-contributing-to-open-source-with-debbie-o-brien): Podcast · 2019-08-06 · Becoming a programmer and how I got into Vue and contributing to open source projects. The panel talks about contributing to open source and how to get started contributing. · tags: nuxt ## Courses - [Learn Agent Skills](https://github.com/debs-obrien/learn-agent-skills): Course · 2026-03-05 · A hands-on tutorial series for building agent skills. Reusable instructions that teach AI coding agents how to do specific tasks well. · tags: ai, skills, agents - [Let's Learn MCP JavaScript + TypeScript](https://www.youtube.com/watch?v=AKjW94vQZkc): Course · 2025-07-21 · Live session with the VS Code team on Model Context Protocol in JavaScript and TypeScript, plus the companion repo. · tags: mcp, ai, typescript - [Playwright Movies App](https://github.com/debs-obrien/playwright-movies-app): Course · 2025-01-09 · A movies app with Playwright tests. Clone it, break it, and learn end-to-end testing against a real UI. · tags: playwright, testing - [React for Beginners](https://www.youtube.com/playlist?list=PLtIMuymsF0jdUeZetvF9S9djZuNGIm3GM): Course · 2022-03-06 · Complete Beginners guide to building your first React Component using the new React Docs and doing the coding challenges. · tags: react - [Nuxt Series](https://www.youtube.com/playlist?list=PLtIMuymsF0jcsFDIAq6fGGU2kuOFrFPSm): Course · 2021-04-15 · Using create-nuxt-app to get started with Nuxt and many more videos showing off Nuxt and all its features. · tags: nuxt - [Get Started with Nuxt](https://explorers.netlify.com/learn/get-started-with-nuxt): Course · 2021-01-06 · Nuxt.js is a Vue framework for building static and server-side rendered sites. This mission will walk you through the essentials of building a Nuxt.js site from the ground up. · tags: nuxt - [Vue-Apollo GraphQL Fundamentals](https://vueschool.io/courses/vue-apollo-graphql-fundamentals): Course · 2020-11-15 · Learn how to consume and use GraphQL APIs in your Vue.js apps with Vue-Apollo. · tags: graphql, apollo, vue - [GraphQL Fundamentals](https://vueschool.io/courses/learn-graphql-fundamentals): Course · 2020-09-04 · GraphQL is a fantastic new API standard that provides a more efficient, powerful, and flexible alternative to REST. In this course, you'll learn the fundamentals of GraphQL. · tags: graphql - [Internationalization with vue-i18n](https://vueschool.io/courses/internationalization-with-vue-i18n): Course · 2019-09-20 · Master internationalization and learn how to create multilingual websites and vue.js applications with vue-i18n. · tags: vue, i18n - [Vue Router for Everyone](https://vueschool.io/courses/vue-router-for-everyone): Course · 2019-07-15 · Learn how to build powerful Single Page Applications in Vue with the Vue Router. · tags: vue, router