Patrick
Patrick Brosset's personal website| Patrick Brosset
Eric Meyer, figure du CSS, sur son site complexspiral reprend tous les détails techniques du comportement des marges en CSS. Sujet souvent obscur qui après cet article devient limpide!| Patrick Brosset
MyDBO est pour tous les développeurs PHP/MySQL qui en ont marre de faire et refaire les mêmes fonctions ajout/édition/liste/... sur leurs bases de données pour chaque nouveau site ou application web.| Patrick Brosset
Toujours voulu faire des photos macros? Jamais eu l'argent pour acheter l'objectif?| Patrick Brosset
I've recently had to create a generic text data file uploader in PHP (namely to import tab-delimited fields into a database). After experiencing a few problems related to memory issues, I came up with a solution that might be of interest to some people. Here it is.| Patrick Brosset
Browser DevTools are pretty complex. There are reasons for this though, they're not just complex to annoy people.| Patrick Brosset
I have recently started this series of videos with the idea of showing how various features of the FirefoxDevTools could be used to break-down and understand how seemingly complex CSS animations were done.| Patrick Brosset
I wrote a couple of weeks ago about how browser devtools should be thinking about addressing the needs of designers and it looks like that post was right on time!| Patrick Brosset
Read the full article at https://hacks.mozilla.org/2015/03/understanding-inline-box-model/| Patrick Brosset
Want a nice gradient background on your site?| Patrick Brosset
In this article we'll take a look at the wonderful world of the CSS Grid Layout, a relatively new W3C specification that has partially started to see the light in some browsers.| Patrick Brosset
If you’re a web developer and you’re interested in open source projects and you commonly use browser devtools in your activities then you might want to read on.| Patrick Brosset
CSS animations and transitions are awesome, but they’re also hard to get right.| Patrick Brosset
Read the full article at https://www.smashingmagazine.com/2015/12/revisiting-firefox-devtools/| Patrick Brosset
---| Patrick Brosset
There’s a few ways you can measure elements or distances between elements in Firefox DevTools. In this article, you’ll learn about them and hopefully discover some things which are useful.| Patrick Brosset
Today, browsers come with built-in tools that allow to inspect and debug existing web content.| Patrick Brosset
As a web developer, you don’t often spend time thinking about white space, right? I mean, how often do they actually matter?| Patrick Brosset
Read the full article at https://hacks.mozilla.org/2016/11/visualize-animations-easing-in-devtools/| Patrick Brosset
Read the full article at https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/| Patrick Brosset
Read the full article at https://hacks.mozilla.org/2017/01/devtools-what-you-need-to-know/| Patrick Brosset
Lately I've been thinking more about the future strategy for Firefox DevTools, and so I decided to write this article. Hopefully you find it inspirational, and motivating.| Patrick Brosset
Read the full article at https://medium.com/mozilla-tech/a-quick-history-of-firefox-devtools-620d3074b510| Patrick Brosset
Aligning things in CSS has been a common source of frustration, fun and even memes for a long time. However CSS evolves quickly and new specifications are written and implemented in browsers all the time.| Patrick Brosset
In this short article, I am exploring the relationship between two CSS layout features: CSS Grid and CSS Multi-Columns.| Patrick Brosset
Read the full article at https://blog.logrocket.com/when-css-doesnt-do-anything/| Patrick Brosset
Over the past 6,5 years, while working at Mozilla, I was involved in a lot of different projects related to Firefox DevTools.| Patrick Brosset
The console panel in your favorite browser's DevTools can be a very powerful ally when troubleshooting problems in a web app.| Patrick Brosset
Do you ever find yourself trying stuff out until they work? Did you make css-tricks’ guide to flexbox your default new-tab page (or even better, purchase the poster)?| Patrick Brosset
Read the full article at https://medium.com/web-on-the-edge/how-we-built-the-devtools-tooltips-4e9933abbd8a| Patrick Brosset
I'm almost coming up to a year at Microsoft, and I thought now would be a good time to look back and talk about it a little.| Patrick Brosset
Last year, a crew of engineers, designers and PMs got together across Microsoft and Google, and we worked together on adding tooling dedicated to CSS Grid and Flexbox.| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/| Patrick Brosset
I recently launched https://devtoolstips.org/ (and on twitter) and made it an open-source project that anyone is welcome to contribute to on the github repo.| Patrick Brosset
Read the full article at https://www.smashingmagazine.com/2021/09/devtools-cross-browser-edition/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2021/09/14/edge-devtools-93-personalization/| Patrick Brosset
Read the full article at https://css-tricks.com/minding-the-gap/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2021/10/19/pwa-summit-learn-progressive-web-apps-documentation/| Patrick Brosset
Websites usually don’t use files much. Files are usually a thing that desktop applications like working with. In fact, mobile devices also don’t usually use files, they prefer sharing data between apps directly, and putting everything in the cloud where things are just images, movies, songs, or messages with no information whatsoever as to how these are stored on the disk.| Patrick Brosset
Read the full article at https://developer.chrome.com/docs/capabilities/web-apis/eyedropper| Patrick Brosset
I recently wrote about the EyeDropper API, this great new little JavaScript API that allows users to pick colors from anywhere on their screens.| Patrick Brosset
Read the full article at https://alistapart.com/article/breaking-out-of-the-box/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2022/01/19/looking-back-at-microsoft-edge-for-developers-in-2021/| Patrick Brosset
Read the full article at https://www.smashingmagazine.com/2022/01/devtools-updates-2022/| Patrick Brosset
Read the full article at https://css-tricks.com/css-custom-highlight-api-early-loo/| Patrick Brosset
Read the full article at https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/dev-tools/03| Patrick Brosset
Read the full article at https://css-tricks.com/the-selectmenu-element/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2022/03/09/improving-devtools-together-announcing-the-new-edge-devtools-feedback-repository/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2022/04/14/30-days-of-pwa-fall-in-love-with-progressive-web-apps/| Patrick Brosset
The problem| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/| Patrick Brosset
As the MDN Web Developer Assessment (Web DNA) surveys showed, the number one frustration web developers have is due to incompatibilities of the web platform between browser. New features don't usually get implemented at the same time in all browsers, and existing features are not supported in exactly the same in all browsers. This makes it often really hard for developers to know exactly what is safe to use and whether they'll have an easy time using a particular feature across their target b...| Patrick Brosset
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 in much simpler ways.| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2022/05/18/find-and-manage-your-installed-apps-and-sites/| Patrick Brosset
Read the full article at https://www.azurestaticwebapps.dev/blog/devtools-msedge| Patrick Brosset
Read the full article at https://www.smashingmagazine.com/2022/05/whats-that-dev-tool/| Patrick Brosset
Progressive Web Apps (or PWA) is a topic I find myself quite interested in lately.| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2022/09/27/closing-pixel-gap-native-web-window-controls-overlay/| Patrick Brosset
Let me start with a caveat: I've not done actual professional web development for about 10 years I think. I used to work in companies where we'd do big fancy web apps for clients, and we'd have a backend and a frontend and some database or whatever, the whole thing. But ever since I started working in browser maker companies, even thought I use web technologies all the time, I'm using them very differently than most web devs out there.| Patrick Brosset
I've had a passion for the web ever since the end of the 90's and have been working with web technologies since. In fact, here is a photo of me surfing the web like a cool kid on Netscape 2 in 1996 😀.| Patrick Brosset
Read the full article at https://www.smashingmagazine.com/2022/10/devtools-updates-halloween-edition/| Patrick Brosset
Seven years ago, I taught myself all about CSS linear gradients and, ever since, I've been meaning to learn more about how radial gradients worked as well. It took me a long time to find an excuse to dig deeper into the logic behind it but I'm very thankful I did.| Patrick Brosset
The most common way that I hear people define Progressive Web App (PWA) is: "it's just a website with a manifest file and a service worker".| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/| Patrick Brosset
⚠️ MDN now has more up-to-date information on this ⚠️| Patrick Brosset
tl;dr: Open Web Docs is awesome. It's one of the biggest contributors to MDN Web Docs. If you use MDN on a regular basis, consider sponsoring OWD (💵) so they can continue doing the work that makes all of our web dev jobs easier. You can also easily donate via GitHub:| Patrick Brosset
Read the full article at https://www.smashingmagazine.com/2023/06/popular-devtools-tips/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2023/08/09/pwa-documentation-mdn-web-docs-open-web-docs/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2023/08/10/collaborating-office-performance-better-web-performance-tools/| Patrick Brosset
When you're documenting an application, reporting a bug about it, or just chatting about it with colleagues, it's common to have to share screenshots of the app. Please do everyone a favor and take full window screenshots when you do.| Patrick Brosset
Two weeks ago I attended the W3C TPAC conference. In this post, I'll go over my experience and learnings. Read on if you're interested in how the "sausage is made" when it comes to web features.| Patrick Brosset
A recent discussion on Mastodon reminded my of this age-old problem related to inspecting webpages in DevTools: things tend to move around or disapear when you stop interacting with the page to go and do stuff in DevTools!| Patrick Brosset
This week, I was working on a little demo page to learn more about CSS masking with SVG. The page is a puzzle game where each piece is a single DOM element, and is masked with an SVG mask, to give it the shape of a puzzle piece.| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2023/12/14/navigate-the-unexpected-using-copilot-in-edge-and-devtools/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2023/12/20/inside-the-all-new-edge-devtools-ui/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2024/02/01/microsoft-edge-and-interop-2024/| Patrick Brosset
I've recently started to learn more about the Performance API that's available in web browsers, and wanted to share some of my learnings. I'm far from being an expert, but I hope this post is a fun way to get into the world of performance metrics, and how you can use them to track the performance of your website.| Patrick Brosset
Problem statement| Patrick Brosset
As someone who works on web browsers, I take web development survey results very seriously. They're a way for us, browser makers, to understand what you, web developers, need from us. The pain points you feel, the features you use, the features you need, and a bit of a general trend of the web development ecosystem.| Patrick Brosset
Features of the web platform tend to move very slowly. It can take years for them to mature from an idea, to a prototype, to a specification, and to a final implementation in all the major browsers.| Patrick Brosset
CSS and device pixels| Patrick Brosset
Here's my quick summary of the State of JS 2023 results.| Patrick Brosset
AI, these days, is all about cloud services. You chat with a bot, you ask a voice assistant for something, etc. All of which happens to be powered by some AI model that's running on a server somewhere. But on-device AI is a thing too. It's just maybe less popular, less well-known. On-device AI refers to running AI models on the same device where the user is consuming the result of the model.| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2024/07/11/seamless-svg-copy-paste-on-the-web/| Patrick Brosset
tl;dr: the WebDX Community Group is working hard on cataloging the features of the web platform, and mapping them to their availability in browsers, which is making it possible to create a release note for the web platform. Check out our work in progress web platform release notes.| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2024/09/17/interop-2025-call-for-proposals/| Patrick Brosset
Last week, I attended my very first Smashing Conference event, and it was great! Here's my little write up about it.| Patrick Brosset
Sacha Greif's "State Of" surveys have become one of the most useful web development series of surveys. They started out of Sacha's need to learn more about the JavaScript ecosystem, but have now expanded to include more parts of the web platform.| Patrick Brosset
Reading large amounts of data in IndexedDB can be slow at times. In this article, let's look at a proposal from the Microsoft Edge team that improves the performance and ergonomics of reading IndexedDB data.| Patrick Brosset
Two and a half years ago, I wrote a short article titled 4 JavaScript Array methods you didn't know you needed, which describes how useful the Array.at, Array.flat, Array.some, Array.every methods are. Today, while looking at the results to the State of JS 2024 survey, I realized there were a few more methods worth highlighting.| Patrick Brosset
Here are my quick highlights from the State of JS 2024 survey results. There's much more data to be analyzed in the survey, but here are the things that stood out to me, from the perspective of someone working on a web browser engine:| Patrick Brosset
Read the full article at https://www.24joursdeweb.fr/2024/evolution-rapide-et-lente-le-paradoxe-de-la-plateforme-web| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2025/02/04/request-for-feedback-incoming-call-notifications-api/| Patrick Brosset
Read the full article at https://developer.chrome.com/blog/better-text-rendering-in-chromium-based-browsers-on-windows| Patrick Brosset
If you need to work with the system clipboard in your web app, either to read from or write to it, or both, then the Async Clipboard API is your friend. It makes it easy to read or write to the system clipboard, by using modern promise-based methods, and respecting the user's permissions.| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2025/02/13/microsoft-edge-and-interop-2025/| Patrick Brosset
Read the full article at https://www.w3.org/blog/2025/first-catalog-of-web-features-completed-by-the-webdx-community-group/| Patrick Brosset
Read the full article at https://blogs.windows.com/msedgedev/2025/03/19/minding-the-gaps-a-new-way-to-draw-separators-in-css/| Patrick Brosset
What if there was a way to make console logs in DevTools stand out more, be easier to find, and easier to filter? On the Edge team, we're proposing to use the console.context() API to add badges to log messages from different parts of your codebase, and to make it easier to filter them in the console.| Patrick Brosset
