Merge pull request #654 from oddbird/winging-it-7-8

Add Winging It 7 & 8

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

@@ -0,0 +1,59 @@
+---
+title: CSS Container Queries in Practice
+episode: 7
+tags:
+  - Container Queries
+  - CSS
+author:
+  - miriam
+  - stacy
+date: 2024-05-16
+length: 45 mins
+image:
+  src: winging-it/winging-it-7.jpg
+media:
+  - youtube: Ci2DLDQYup0&t=1714s
+summary: |
+  Miriam Suzanne and Stacy Kvernmo
+  talk about CSS Container Queries and the
+  unexpected things that happen
+  when you add containment.
+  Some elements completely collapse!
+  What's going on there?
+  We had questions and thought you might too.
+  So we talk through the issue
+  in our monthly live stream.
+---
+
+{% 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:
+
+- What are container queries and why you should use them
+- How container queries differ from media queries
+- Why some layouts collapse when you add containment
+- Size containment with `contain-intrinsic-size`
+- Why should we avoid adding containment on root
+- Why a container can't query itself
+- An opt-out strategy to remove containment
+
+## Links:
+
+- [Can We Query the Root Container?](https://www.oddbird.net/2023/07/05/contain-root/)
+- [Ahmad Shadeed's Interactive Guide to CSS Container Queries](https://ishadeed.com/article/css-container-query-guide/)
+- [Cascading Layouts Workshop](https://www.oddbird.net/workshops/cascading-layouts/)
+
+## Demos:
+
+- [Container Queries and Birds](https://codepen.io/stacy/pen/abrvZNL?editors=1100)
+- [Reduced Test Case](https://codepen.io/miriamsuzanne/pen/YzbyeEx)

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

@@ -0,0 +1,65 @@
+---
+title: CSS Anchor Positioning in Practice
+episode: 8
+sponsors: true
+tags:
+  - Anchor Positioning
+  - CSS
+  - Polyfill
+author:
+  - james
+  - miriam
+date: 2024-05-30
+length: 53 mins
+image:
+  src: winging-it/winging-it-8.jpg
+media:
+  - youtube: 76hIB2L_vs4&t=1s
+summary: |
+  What is Anchor Positioning?
+  Why is it exciting?
+  What can you use it for?
+  How does the polyfill work?
+  Join James Stuckey Weber and Miriam Suzanne
+  as they talk through these questions
+  and answer yours in our monthly live stream.
+---
+
+{% 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:
+
+- What is Anchor Positioning?
+- Sizing based on the anchor element
+- Anchoring Popovers to their trigger
+- Scoping an anchor
+- Setting up fallback positions when your element overflows
+- Fun demos of what is now possible
+
+## Links:
+
+- [Inset Area](https://anchor-tool.com/)
+- [Polyfill](https://github.com/oddbird/css-anchor-positioning)
+
+## Demos:
+
+- [Anchor Size CodePen 1](https://codepen.io/jamessw/pen/dyENqQz)
+- [Anchor Size CodePen 2](https://codepen.io/jamessw/pen/OJYWorB)
+- [Popover](https://codepen.io/jamessw/pen/MWdjjQj)
+- [Anchor Scope](https://codepen.io/jamessw/pen/dyEXKeP)
+- [Fallback options with `position-try`](https://codepen.io/jamessw/pen/abrZPQY)
+- [More fallbacks](https://codepen.io/jamessw/pen/OJYbjyE)
+- [Textarea box with direction](https://codepen.io/jamessw/pen/qBGNgdL)
+- [Side note](https://codepen.io/jamessw/pen/gOJMyjN)
+- [Anchor on slide thumb](https://codepen.io/jamessw/pen/KKLMJKm)
+- [Multiple anchors](https://codepen.io/jamessw/pen/ZENpWao)