Applications Coding Design

Two more Firefox Dev Tools tips for inactive CSS and tracking changes you make

If you spend a fair amount of your time in your browser’s page inspector examining and tweaking CSS, then you’ll probably find these two sets of features in the Firefox Page Inspector to be really helpful.

Track changes you make

Firefox Developer Tools offers a great way to track CSS changes we make while testing CSS solutions for users. Here’s a terrific video that explains how to use this awesome tool:

You can also find information about this in the MDN documentation, here.

Identify and understand inactive CSS

I came across another useful feature of the Firefox Page Inspector. From Firefox 70 (launched in the last few days), you can now see not only which CSS code is inactive, but also why 😲. Here’s an example:

I haven’t encountered this in practice just yet, but I can already see the explanations to be enormously useful. The links in the pop-ups will take you to the excellent MDN web docs for more information.

You may also want to watch this video explanation too:

Both of these sets of features are really useful!

Applications Coding Design

The Chrome browser inspector has a very cool feature

I primarily use Firefox Developer Edition as my day to day browser. I use the excellent Firefox page inspector several times a day to troubleshoot issues for our customers, and write CSS for a variety of tweaks on sites that I use.

As much as I enjoy using the Firefox page inspector, I noticed a feature in the Chrome Dev Tools that I really like, and would love to see introduced to Firefox. It’s bit like a heads-up display that’s very helpful for seeing an element’s styles at a glance.

If I select an element in Firefox, I see fairly basic information about the element such as the element’s dimensions, and the type of element it is, like this:

Selecting an element in the Firefox page inspector

On the other hand, when I select the same element using the Chrome page inspector, I see more information about the element, like this:

Selecting an element with the Chrome page inspector

Chrome provides not only information about the image’s dimensions, and the type of element it is, but also other useful information such as the font color, style, and margins (in this case).

Even though I can see all the details of the element in each browser’s inspector panel, this extra information when I select an element is a really nice touch.

unsplash-logoFeatured image by Abby Anaday
Coding Design Education Tutorials

A CSS Grid refresher with Mozilla

I really like CSS Grid for layouts. My challenge is that I tend not to use it all that much in my day-to-day work (I provide a fair amount of CSS support, but it tends to be focused on narrower issues), so I don’t practice it all that much. Then, when I return to CSS Grid, I don’t remember any of the syntax beyond display: grid; 😜

Fortunately there are loads of resources online to learn CSS Grid. The latest is a video by Miriam Suzanne on the Mozilla Developer channel, titled “Build a Classic Layout FAST in CSS Grid” –

My favourite CSS Grid resources also include the MDN guide “CSS Grid Layout – CSS: Cascading Style Sheets“, and Wes Bos’ terrific CSS Grid YouTube series:

Coding Design Education Miscellany Photography Useful stuff

Opportunistic diversions for 2019-04-17

I watched a couple interesting videos that I enjoyed, and thought I’d share:

This Engadget video about the differences between DSLR and mirrorless cameras is terrific. Chris Schodt did a great job explaining both camera categories, and the advantages each type has. Well worth watching.

Leonardo Da Vinci was clearly a remarkable person, and this Vox Almanac video by Phil Edwards highlights just how perceptive Da Vinci was.

You can find a few more related links in Edwards’ post “How Leonardo da Vinci made a “satellite” map in 1502 – Vox“.

I work with CSS every day as part of my work at Automattic, and while I’ve encountered pseudo elements, I haven’t really understood them until I watched Kevin Powell‘s video.

This video is the first of a three part series, and just having watched this first episode, I feel like I already have a better understanding.

unsplash-logoFeatured image by Victoriano Izquierdo

I’m trying out a post format for sharing a few quick things that probably wouldn’t make for a decent length post. I like the idea of this sort of collection of interesting things, but it feels a little disjointed. Perhaps three short posts would work better. What do you think?