Over the past 10 years or so, we’ve slowly but very surely transitioned to a state where frameworks are the norm, and I think it’s a problem. I concur. Use the frameworks and libraries that make sense for you to deliver the best UX possible. But also learn the web platform fro … | Continue reading
A blog post by Patrick Brosset: How we built the DevTools Tooltips | Continue reading
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)? If so, these tricks are for you! Maybe you’re not going to become a 10x engineer like I promised. I do promise, h … | Continue reading
The console panel in your favorite browser's DevTools can be a very powerful ally when troubleshooting problems in a web app. Log data, send requests, manipulate DOM elements, you name it, the console can do it all! There are so many ways to get interesting information out of the … | Continue reading
CSS variables (or custom properties, depending on how you prefer to call them) are really cool, and chances are, you're already using them in your projects. In this article, I'll talk about 3 things that I think a lot of people might now know about: what happens when a var() func … | Continue reading
Over the past 6,5 years, while working at Mozilla, I was involved in a lot of different projects related to Firefox DevTools. During that time, a lot happened, and so much of it was really amazing to be a part of. I had a lot of fun, met so many wonderful people who shared my pas … | Continue reading
A blog post by Patrick Brosset: When CSS doesn't do anything | Continue reading
In this short article, I am exploring the relationship between two CSS layout features: CSS Grid and CSS Multi-Columns. These two features can be used together in very interesting ways for building responsive web designs. Let’s start by reviewing what each of those features do. C … | Continue reading
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. As a result, aligning things in CSS today isn’t quite what it used to be. W … | Continue reading
A blog post by Patrick Brosset: A quick history of Firefox DevTools | Continue reading
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. Using standard web technologies only Browser devtools have historically always been part of browsers' user i … | Continue reading
A blog post by Patrick Brosset: DevTools: What you need to know | Continue reading
A blog post by Patrick Brosset: Firebug lives on in Firefox DevTools | Continue reading
A blog post by Patrick Brosset: Visualize animations easing in DevTools | Continue reading
As a web developer, you don’t often spend time thinking about white space, right? I mean, how often do they actually matter? Well, hopefully with this article, you’ll think of them more often, or at least will know when they do matter and know how to track them down! What is whit … | Continue reading
Today, browsers come with built-in tools that allow to inspect and debug existing web content. In this post, I’ll argue that these tools could also allow creating content and working on this content in more visual ways. Ways that offer alternatives to having to deal with code too … | Continue reading
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. Using the rulers The rulers tool is useful to have around at all times. It provides a way t … | Continue reading
This is the French translation of Manuel Rego’s (@regocas) post “Deep Dive into Grid Layout Placement”, published on February 1st, 2016. All images and code samples come from the original article, with the author’s permission. Translation: Patrick Brosset (@patrickbrosset). Ceci … | Continue reading
A blog post by Patrick Brosset: Revisiting the Firefox DevTools | Continue reading
CSS animations and transitions are awesome, but they’re also hard to get right. You want your animations to be sequenced a certain way, to last the right amount of time, and to progress at the right pace. That’s where tooling comes in. What if you could slow down, rewind, or paus … | Continue reading
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. In this article, I’ll go over some of the things that make the Firefox DevTools open source project special, and how th … | Continue reading
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. But before we dive into what this new CSS technique is all about and how to use it, let's quickly revi … | Continue reading
Want a nice gradient background on your site? background-image: linear-gradient(red, blue); BOOM, done! Ok, it’s a little boring. So if you want more, I recommend this css-tricks article and MDN page. Still here? Alright, let’s go and have a look at some of the details of how lin … | Continue reading
A blog post by Patrick Brosset: Understanding the CSS box model for inline elements | Continue reading
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! Indeed, it seems that the ChromeDevTools team is starting to invest in this area more and more. This is brilliant! An … | Continue reading
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. Multiple box-shadows and animated ::before and ::after pseudo-elements: ht … | Continue reading
Browser DevTools are pretty complex. There are reasons for this though, they're not just complex to annoy people. They contain within one tiny UI (often docked in the browser) various tools, often having very little in common with each other. All of these tools are needed, but ha … | Continue reading
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. The idea is to … | Continue reading
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! À lire absolument pour tous ceux qui ne comprennent pas pourquoi les marges disparaissent subit … | Continue reading
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. Cette application a été créée en PHP, est gratuite, et s'installe très facilemen … | Continue reading
Toujours voulu faire des photos macros? Jamais eu l'argent pour acheter l'objectif? Cette entrée blog donne une recette DIY (do it yourself) economo-pringlo-dangereuse-mais-bien-coolos pour arriver à de superbes resultats. L'idée est bien trouvée en tout cas! A voir! La photo ci- … | Continue reading