Skip to main content
CSS is fun and cool and I like it.
Link

Make Your Own Dev Tool

Article

Comparing Browsers for Responsive Design

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing CSS and making sure it’s working across all the viewports in a single glance.

They are all very similar. For example, they do “event mirroring” meaning if you scroll in one window or device, then all the others do too, along with clicks, typing, etc. You can also zoom in … Read article “Comparing Browsers for Responsive Design”

Link

What’s New In DevTools (Chrome 86)

Article

Computed Values: More Than Meets the Eye

Browser DevTools are indispensable for us front end developers. In this article, we’ll take a look at the Computed tab, a small corner of the DevTools panel that shows us big things, like how relative CSS values are resolved. We’ll also see how inheritance fits into the browser’s style computation process.… Read article “Computed Values: More Than Meets the Eye”

Article

A Look at What’s New in Chrome DevTools in 2020

I’m excited to share some of the newer features in Chrome DevTools with you. There’s a brief introduction below, and then we’ll cover many of the new DevTools features. We’ll also look at what’s happening in some other browsers. I keep up with this stuff, as I create Dev Tips, the largest collection of DevTools tips you’ll find online! … Read article “A Look at What’s New in Chrome DevTools in 2020”

Article

New in Chrome: CSS Overview

Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries.… Read article “New in Chrome: CSS Overview”

Link

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

Video

#174: Using Local Overrides in DevTools

There is a feature of Chrome DevTools that lets you:

  1. See the code of any given resource the current web page is using (like CSS and JavaScript).
  2. “Pretty Print” it (format it for readability)
  3. Save it to disk
  4. Use that saved version to override the live version, even on page refresh.

That last one is pretty awesome. If you’re debugging a problem that only seems to happen on the live website, it gives you a debugging tool that will allow … Read article “#174: Using Local Overrides in DevTools”

Article

Using DevTools to Improve the UX Design to Development Process

I’d like to tell you how I see code and design intersect and support one another. Specifically, I want to cover how designers can use code in their everyday work. I suggest this not because it’s a required skill, but because even a baseline understanding of coding can make designs better and the hand-off from design to development smoother.

As a UX Designer, I am always looking for good ways to both explore my UX design problems and communicate the … Read article “Using DevTools to Improve the UX Design to Development Process”

Link

Firefox DevTools WebConsole 2018 retrospective