660: Teaching CSS, Conferences, and Masonry Updates
Episode
58 min
Read time
2 min
Topics
Remote Work, Design & UX, Psychology & Behavior
AI-Generated Summary
Key Takeaways
- ✓CSS Teaching Strategy: Start students with existing CMS content, style it as a clone of known designs, then customize. This approach teaches real-world constraints and arbitrary content handling rather than pixel-perfect mockups from scratch.
- ✓Item-Flow Properties: Apple proposes four new properties (item-direction, item-wrap, item-pack, item-slack) to unify Grid and Flexbox behavior. Item-pack collapse replaces grid-template-rows collapse for masonry layouts, eliminating the need for display masonry as a separate layout mode.
- ✓Conference Selection: Digital conferences work best when capped at three hours maximum attention span, allowing attendees to manage work obligations simultaneously. Physical conferences provide more value when you already know attendees, reducing networking pressure and increasing meaningful connections.
- ✓Dense Packing Control: Item-pack property enables Flexbox to gain dense packing capabilities previously only available in Grid. Item-slack sets tolerance thresholds (like one em) for column height differences, controlling how aggressively the layout engine fills available space.
What It Covers
Chris Coyier and Dave Rupert examine CSS teaching methods, conference attendance strategies, and Apple's new item-flow proposal that unifies CSS Grid and Flexbox properties to resolve the masonry layout debate between WebKit and Chrome.
Key Questions Answered
- •CSS Teaching Strategy: Start students with existing CMS content, style it as a clone of known designs, then customize. This approach teaches real-world constraints and arbitrary content handling rather than pixel-perfect mockups from scratch.
- •Item-Flow Properties: Apple proposes four new properties (item-direction, item-wrap, item-pack, item-slack) to unify Grid and Flexbox behavior. Item-pack collapse replaces grid-template-rows collapse for masonry layouts, eliminating the need for display masonry as a separate layout mode.
- •Conference Selection: Digital conferences work best when capped at three hours maximum attention span, allowing attendees to manage work obligations simultaneously. Physical conferences provide more value when you already know attendees, reducing networking pressure and increasing meaningful connections.
- •Dense Packing Control: Item-pack property enables Flexbox to gain dense packing capabilities previously only available in Grid. Item-slack sets tolerance thresholds (like one em) for column height differences, controlling how aggressively the layout engine fills available space.
Notable Moment
The hosts realize Apple's item-flow proposal solves the masonry debate by avoiding the word masonry entirely, using item-pack collapse instead. This sidesteps both Chrome's display masonry approach and WebKit's grid-template-rows collapse, creating a third unified path forward.
Episode Transcript
Hey there, Shopify Man. Actually, you're listening to another episode of the Shop Talk Show podcast all about print and web design and development. I'm Dave Rupert with. Hey, Chris. How are you doing, everybody? Well, we got a couple of questions that we can get in from people. I think actually, I think none of them are questions. I almost prefer it when they're not. I mean, questions are fine, but, like, when they come in, they're just like more of a statement, actually. Yeah. But we've asked you know, we've said, you know, if you have a topic, you'd like us to talk about the topic. But, yeah, the yeah. Certainly, the classic Q and A are real good at that. Yeah. Yeah. They're like, oh, I have something to say. It's okay. You know, this was many, many, many episodes ago, but not, you know, not a zillion, but some. We were talking about, like, what if we had the opportunity to teach CSS from scratch? It was probably, like, leaning into my inner my inner worry that, that's something I'd like to do at some point, but it's so saturated. You know? So many people have done, like, an intro to CSS course. And didn't we have Andy on, like, two episodes ago? He's got a brand new one. Hard to out do that one. Yeah. Right? Yeah. Totally. Front end masters is full of stuff. I mean, how many CSS courses are there? I've never gotten to do one. I still might someday because I really I I think I want to. But, anyway, pretty saturated, so I'd have to find my own spin on it. But John Jones here wrote in with lots of thoughts about it. Unfortunately, John, we read it all, but can't read it all in the air. It's a little too long, but he said it. Anyway, if I had to teach CSS from scratch, I would ask the students what their interests are, get them to write it down in some kind of existing CMS like thing that provides basic HTML structure, then work towards customizing the style of it first as a near clone of some existing design and then building from there. So I kinda like that idea. I kinda like, you know, make them think of a CMS too because I think that's a crucial part of things is like you don't you're not just styling you style something. So it's just already it has a bunch of constraints in it, and web design is all about constraints anyway. So do that, and that's what websites are all about anyway. And then style that. But, again, constraints, style it like something else, and then go from there. I just I I like that. I think that's a John Jones, that's a clever way of going about it. Yeah. Because a lot of the job isn't, like I can replicate a dribble or pixel perfect from scratch. …
Get the full transcript (10,717 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 55-minute episode.
Get Shop Talk Show summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Shop Talk Show
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
Sep 7 · 58 min
TED Radio Hour
Are the kids alright? Part 1
Aug 29
More from Shop Talk Show
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
Aug 31 · 60 min
Software Engineering Daily
The Death of Online Anonymity
Sep 1
More from Shop Talk Show
We summarize every new episode. Want them in your inbox?
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
729: After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly
728: BIMI, Good Favicon Practice, and CSS @Layer Exploration
727: Front-End Complexity, AI Co-Authorship, and New CSS Navigation Patterns
Similar Episodes
Related episodes from other podcasts
TED Radio Hour
Aug 29
Are the kids alright? Part 1
Software Engineering Daily
Sep 1
The Death of Online Anonymity
Everything Everywhere Daily
Aug 28
The Life of Helen Keller
Modern Wisdom
Aug 22
Ex-Gang Member: What Makes A Violent Man Change? - Johnny Chang - #1140
The Founders Podcast
Aug 9
#428 How Claude Shannon Worked
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
You're clearly into Shop Talk Show.
Every Monday, we deliver AI summaries of the latest episodes from Shop Talk Show and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime