We Need Better Design Tools. Mattias Ott Tells Us Why. Bad At CSS podcast

54:48

Do backend developers like CSS? Usually not. But that really doesn't matter because you don't have to like everything. So to get into the mind of what a backend developer thinks about CSS and how it affects their daily life, we brought on Lane Wagner, a true bonafide backend developer. Links https://www.youtube.com/@backendbanterfm/ https://boot.dev https://x.com/wagslane https://x.com/badatcss https://x.com/argyleink https://x.com/_davideast…

1
We need better design tools. Mattias Ott tells us why. 1:06:38

for 29 weeks siden1:06:38

1:06:38

1
Eric Meyer and Estelle Weyl wrote 1000+ pages of CSS... we had questions 1:17:19

for 31 weeks siden1:17:19

1:17:19

CSS: The Definitive Guide is exactly 1126 pages, written by Eric Meyer and Estelle Weyl. As they both said, "We read the CSS spec so you didn't have to." We ask them a ton of CSS questions and they gave us a ton of CSS answers.

1
14 CSS talks covered in 1 hour — CSS Day recap 1:06:04

for 33 weeks siden1:06:04

1:06:04

Apologies for the audio only upload. There were issues with getting the video feed published but check out YouTube for the video. CSS Day put on 14 different talks about some pretty interesting topics in CSS. It ended up being almost 12 hours of amazing CSS content and we’re going to give you an overview of each talk in just an hour. We’re going to talk about how design tools are falling behind with CSS, which I’m starting to really believe more and more every day. We’ll cover How Tailwind CSS isn’t at all like inline styles and this talk was brave. Then there’s incredible font features in CSS, like seriously these ones are unreal. And also the magic of Anchor Positioning... to be honest I still barely know this one is. And so many other great topics so, let us be your guide. Links CSS Day - https://cssday.nl/2024 CSS Day Playlist - https://www.youtube.com/playlist?list=PLjnstNlepBvO0-I7iwqpkOY_fwAop6Pl- Bad at CSS - https://x.com/badatcss Adam Twitter - https://x.com/argyleink David Twitter - https://x.com/_davideast…

1
You might be wasting your time. Time wasters disguised as time savers. 1:01:59

for 40 weeks siden1:01:59

1:01:59

There are so many things we spend time on thinking they’ll save us more in the long run but really, do they? Today on Bad at CSS we’re going to dive into a list of things we think are Time Wasters disguised as Time Savers. 0:00 - Is the juice worth the squeeze? 0:50 - Tests 6:07 - CI/CD* 13:37 - Build systems 16:02 - Rewrites 22:42 - Note taking apps 31:27 - Courses 38:37 - A tangent on Objective-C and fixing squiggles 41:37 - More CI/CD problems 44:07 - Append Only 46:07 - Color and Dark Mode 56:28 - Designing with constraint 60:00 - Not engagement farming… tell us your time wasters Links Bad at CSS — https://x.com/badatcss Adam Argyle — https://x.com/argyleink David East — https://x.com/_davideast…

1
Single keyframe tricks are magic 52:01

for 43 weeks siden52:01

52:01

What can you do with a single CSS keyframe? A metric ton. 0:00 - 50% keyframes are magic 0:49 - Animation is easier than you think 2:17 - Why at 50%? 6:51 - Trick 1 Shake 12:00 - Trick 2 Pulse 23:25 - Trick 3 Glitch 27:55 - Trick 4 Flip 32:45 - Trick 5 Fill 41:20 - Trick 6 Sheen 44:25 - Trick 7 Emphasize 46:50 - Trick 8 Censor 48:35 - Trick 900 Tony Hawk Links Bad at CSS - https://twitter.com/badatcss Adam Twitter - https://twitter.com/argyleink David Twitter - https://twitter.com/_davideast Codepen Demo: https://codepen.io/davideast/pen/MWxvzjm Open Props: https://open-props.style…

1
Container Queries: Everything you need to know 45:43

for 44 weeks siden45:43

45:43

Container Queries are one of those CSS features everyone is so hyped about and with good reason. They give us a modern way to build and scope responsive components based on the size of the parent element rather than the browser view port. But, I’m not gonna lie. There’s a lot to this new feature.

1
Styling better custom inputs with Dave Rupert 1:02:56

for 1 year siden1:02:56

1:02:56

Dave Rupert knows his inputs and we got a lot to learn. Dave's great blog - https://daverupert.com/ Dave on Twitter - https://twitter.com/davatron5000

1
2024 CSS Resolutions 53:21

for 1 year siden53:21

53:21

CSS is Hard. Each and every year. So what are the things that we should improve on in 2024?

1
What CSS is Jason Lengstorf bad at? 1:04:11

for 1 year siden1:04:11

1:04:11

We promise that after this episode you'll never forget the three parameters of the clamp() function ever again.

1
TypeScript fan vs. a skeptic 50:34

for 2 years siden50:34

50:34

We promise. This episode is actually about CSS... I mean we get to it eventually. But what happens when you get a TypeScript fan (David) and a TypeScript skeptic (Adam) in a discussion? Well, a lot of spicy things are said. NOTE: We swear we recorded this before the whole DHH Turbo TypeScript fiasco.…

1
Chris Coyier and the things he's bad at 53:55

for 2 years siden53:55

53:55

The amazing Chris Coyier (founder of CSS-Tricks.com and CodePen.io) sat down with us to tell us all the things in CSS that he's bad at. He even brought us a list.

1
Is Figma bad at CSS? 34:39

for 2 years siden34:39

34:39

Figma has a brand new feature called Dev Mode! Adam was at Figma's big conference Config and he came here to teach us everything he knows about what Dev Mode has to offer. We also discuss why design handoffs are so difficult and tricks we've learned along the way. Chapters: 0:00 - Is Figma bad at CSS too? 0:29 - We are bad at design handoffs. 1:46 - Adam was at Figma Config 2:59 - A designer and developer story 5:34 - The difficulties from a design to CSS 7:45 - “Micro-decisions” in design 9:54 - Handoffs were the inspiration for Visbug 10:42 - It’s hard to get consistently get the design correct 12:44 - What is DevMode? 13:40 - 30% of Figma users are developers. 15:10 - How DevMode works 18:48 - Figma can be the “source of truth” for Components 20:39 - Visually coding in Figma 21:53 - Designers can mark things “ready for dev” 21:59 - Generates a changelog 21:30 - A copy SVG button! 23:24 - DevMode still needs some work with layouts 25:23 - There’s a Box Model in Figma! 27:00 - A tangent on :has() 28:20 - display: contents is a hidden gem 30:02 - A recap of DevMode features…

1
The View Transition API is amazing... but we're bad at it 51:06

for 2 years siden51:06