Patrick

Last week I attended TPAC. Read this article to learn more about this conference and what people do there.

Why full window screenshots are way better than cropped ones, and how to take good screenshots to communicate effectively about your app

Learn how the Edge DevTools team collaborates with the Office Performance team, and others, to improve the performance of the complex web apps Microsoft builds, and to create better web performance tools for every web developer.

On the Edge team, we collaborated with Open Web Docs on a project to revamp the Progressive Web Apps documentation on MDN. Learn more about the new content we created, and about how cross-organization collaboration on web documentation leads to better docs for everyone.

I wrote about the top-15 DevTools tips that people read on devtoolstips.org

You may have not heard of OWD. But if you're a web developer and use MDN on a regular basis, they're one of the most important organizations behind it. Read on for more details about OWD and ways you can help!

Does your app or site need to store data on the client? Not sure what to use? Not sure how much you can store? For this article, I researched the various options and rules implemented in browsers for dealing with storage.

How CSS selectors can make your web app slower, how it only really matters if you actually measure the impact, and how Edge has a brand new tool to help you do just that!

The most common way that I hear people refer to Progressive Web App is, it's just a website with a manifest file and a service worker. In this article, let me propose another definition.

An in-depth look at how radial-gradients really work in CSS. With this article, you will finally understand what the syntax means and will be able to create great gradients without the guess work.

In this article, I give an update on the most impactful new features that are now available in DevTools, across Firefox, Chrome, Safari, and Edge.

What makes a web and a desktop app different? Do we really need to learn C++ to implement a real desktop app? How far can we go with just the web? Read more to find out!

What is it with the web that people find so awful that they keep inventing new frameworks every year?

Progressive Web Apps can now customize the app window and title bar area using the new Window Controls Overlay API, for a more familiar experience on desktop devices. Learn more on the Edge blog.

I ran a little Twitter survey to learn more about what the current blockers were when building PWAs. This article shows what the answers were.

How many browser DevTools panels do you commonly use in your day-to-day web development? One? Three? Probably not that many more. In this article, I go over some of the history behind why today's DevTools have so many panels, why it is becoming a problem, and what solutions exist.

I wrote this article as part of the #30DaysOfSWA (30 days of Static Web Apps) blog series. If you are using Azure Static Web Apps, read this to see how you could integrate your front-end debugging experience right into VS Code.

In this article, I go over some of the new Edge features that make it easier to manage your locally installed sites and apps, based on feedback we received from users.

The Array JavaScript built-in object comes with a lot of methods that make manipulating arrays easy. I often forget about them and end up writing code with complicated for loops that could have been done much simpler. So here are 4 methods available to Arrays in JavaScript that might come in handy.

DevTools can play a big role in users' adoption of new and existing web platform features. In this article, I argue that browser vendors should get together and align forces with efforts like Interop 2022 to bring a common set of tools across browsers that help adoption.

Styling <select> elements has been difficult for a long time, but there's good news on the horizon. Here is an overview of styling <select>, and an experimental element that promises to overcome the remaining limitations in the future.

Why breakpoints and console.logs are not always great ways to quickly find the root cause of a problem, and how more tracing could help.

A recap blog post about the #30DaysOfPWA blog series where I go over why this series is useful, who it's useful for, the list of articles, and who made it happen.

The Edge DevTools team is happy to announce our new GitHub repository which we welcome everybody to use to get in touch with us! Let's come and discuss about how we can make DevTools better for you all.

Styling <select> form elements is hard, and sometimes just impossible! Many libraries and design systems come with their own controls, which comes at the cost of complexity, and often fails at being accessible. Let's learn about a new form element: <selectmenu>, created by Microsoft, in collaboration with Google, and following the Open UI standardization effort, which will solves all of this!

I wrote about the main browser developer tools that are useful when debugging PWAs. This is part of the #30DaysOfPWA blog series, created as a multi-team effort from Microsoft Edge, Windows, and Developer Relations teams.

Discover the upcoming CSS Custom Highlight API. A new way to easily highlight custom ranges of text on a web page, in a performant way.

What's new in Chrome, Edge, Safari and Firefox DevTools? Our DevTools keep changing and new features keep appearing. In this blog post I break it down with the latest features across browsers.

A lot of things happened in Microsoft Edge for developers. I wrote about all of what's new across the web platform, devtools, pwa, and webview.

The new Detached Elements Tool in Microsoft Edge DevTools helps you find and fix DOM memory leaks in your web app. Learn how to use it in this article.

What can we do with just 30 pixels? With Progressive Web Apps blurring the lines between apps and websites, let me help you think outside the box with the new Window Controls Overlay feature.

I built a browser extension that lets you grab colors from anywhere on your screen. Learn more about the APIs it uses in this short article.

The EyeDropper API enables authors to use a browser-supplied eyedropper in the construction of custom color pickers.

Websites and apps can work with files in many different ways, from simple upload to full file system access. In this article, I go over each one of them with code samples.

We've updated our developer documentation with a completely new Progressive Web Apps section, including new details to help you get started with features like app shortcuts and titlebar customization.

`gap` may be one of the shortest CSS property names, but means different things in different layout contexts. In this blog post, I break those down.

Microsoft Edge 93 comes with DevTools improvements to help make the tools more approachable and personalized. Learn more about how to make the DevTools your own with this article.

Learn what’s new with developer tools in Firefox, Edge, Chrome and Safari. Discover new and powerful features that will help you be more comfortable and productive when testing and debugging across browsers.

I started a new open-source project, to collect tips and tricks for getting more productive with DevTools, whatever the browser you prefer using.

On my team, at the end of every release, we pause feature work and only work on bugs for a sprint. Last time we did this we worked on accessibility bugs. In this article, I go over a case study of one of those bug fixes, related to color contrast in DevTools.

I gave a short talk at BlinkOn 14 about flexbox and grid tooling in Chromium-based browser. Here is the recording.

I'm coming up to 1 year at Microsoft, here's a few words about how it started and how it's going.

DevTools has become very complex and to help with this we, at Microsoft, built a help mode that provides documentation while hovering over various areas of the user interface. In this article, I go over how we implented this in Edge DevTools.

New Flexbox tooling in Edge and Chrome about to hit a browser new you. Discover these 4 tricks that will make you a lot more productive with Flexbox.

Learn how to be even more productive when debugging/inspecting sites using the console in DevTools!

What happens when variables are undefined, fallback values, and DevTools features! Hopefully you'll learn a thing or two with this article.

A look back at some of the things I helped build while working on DevTools at Mozilla.

Learn why CSS properties can sometimes be completely valid but still not have any visual effect on the page, and how a recent feature in Firefox can help detect this.

CSS knows how to fragment certain types of layouts across multiple regions, in particular it knows how to break a Grid layout across several columns. This article takes a look at how to do this and why it can be useful.

Justify-content, align-items, ... If, like me, you can never remember which does what, and when to use them, this article should help understand the rules behind these properties.

I had fun tracing back the steps of the Firefox DevTools history, from its inception to today, full with lots of screenshots.

Thoughts about where Firefox DevTools is headed, what its current high-level strategy looks like.

An update about some of the new features in the latest Firefox DevTools release.

The king is dead, long live the king! Let's pay our respects to the tool that changed web development forever, and learn about it actually lives on within Firefox.

An article about how CSS and Web animations can now be inspected directly in DevTools.

Whitespace can seem like a pretty uninteresting topic at first, but how it gets handled by CSS on a web page is actually quite complex. And if you've ever been frustrated by a weird space between elements that you can't explain, this article might help you understand why once and for all.

How DevTools help us create content visually in the browser, and what more could they do?

Learn how to measure all sorts of things in Firefox DevTools.

This is the French translation of Manuel Rego's excellent Deep Dive into Grid layout placement.

All of the new features from Firefox DevTools.

Introducing a new CSS/Web animations tool in Firefox.

In this article, I argue that contributing code to Firefox DevTools can make you a better web developers. Did you know, DevTools is actually written with web technologies!

An introduction article to CSS Grid, thew new awesome layout mechanism for CSS.

An in-depth look at how linear-gradients really work in CSS. What the syntax is, what it means and how gradients behave under different conditions.

Margin, border, padding and content areas of inline elements behave differently than for block elements. What's more? Inline elements can break across multiple lines! In this article, you'll learn about some of the specificities of inline elements and how Firefox can help you inspect them more easily.

A look at what Chrome is doing in the tools for designer area.

A series of videos I created where I take a look at various interesting CSS demos and break them down using DevTools to learn what they're made of.

How Firefox attempts to bridge the gap for designer-type people by providing them with more visual and creative tools.