Add Winging It 34

content/blog/wingingit/winging-it-34.md

@@ -0,0 +1,57 @@
+---
+title: Inspecting Inspectors
+subtitle: What each browser’s dev tools do best
+episode: 34
+tags:
+  - CSS
+  - Grids
+author:
+  - stacy
+  - miriam
+date: 2026-07-23
+length: 53 min
+image:
+  src: winging-it/winging-it-34.jpg
+media:
+  - youtube: INqy_o-wxw0
+summary: |
+  Miriam and Stacy troubleshoot
+  an issue with the dev tools
+  available in each browser,
+  exploring the differences
+  and what each browser's tools do best.
+---
+
+{% callout 'note', false %}
+Check out our [Learn CSS Grid Playlist](https://www.youtube.com/playlist?list=PL4jAKUtAhpHkXeLvZNoGHokWd0bo__NYy)
+to learn more CSS.
+{% endcallout %}
+
+{% import "embed.macros.njk" as embed %}
+{% import "utility.macros.njk" as utility %}
+
+{{ embed.figure(
+  data=media
+) }}
+
+{{ utility.main_action(
+  'Subscribe to Channel »',
+  subscribe_url
+) }}
+
+## What We Cover:
+
+- Flexbox
+- Grid tools
+- Metadata, social cards, document outline, more
+- Custom properties
+- Animation inspection is available in all major browsers
+- Firefox is the clear winner for editing a `clip-path`
+- Fonts
+
+## Links:
+
+- [Custom properties and grid demo on oddbird.net](/)
+- [Variable fonts and animations demo on courses.oddbird.net](https://courses.oddbird.net/poetic-css/)
+- [Flexbox demo](https://codepen.io/miriamsuzanne/pen/YMJKbg)
+- [CSS Shapes demo](https://codepen.io/miriamsuzanne/pen/qBwZvPe?editors=1010)