Bad at CSS

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

What can you do with a single CSS keyframe? A metric ton. 0:00 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=0s] - 50% keyframes are magic 0:49 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=49s] - Animation is easier than you think 2:17 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=137s] - Why at 50%? 6:51 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=411s] - Trick 1 Shake 12:00 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=720s] - Trick 2 Pulse 23:25 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=1405s] - Trick 3 Glitch 27:55 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=1675s] - Trick 4 Flip   32:45 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=1965s] - Trick 5 Fill   41:20 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=2480s] - Trick 6 Sheen   44:25 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=2665s] - Trick 7 Emphasize   46:50 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=2810s] - Trick 8 Censor   48:35 [https://www.youtube.com/watch?v=aLqScpKlzRo&t=2915s] - Trick 900 Tony Hawk     Links Bad at CSS - https://twitter.com/badatcss [https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbkllVk0tenBiM0tkYU1sV3drYjNOSHZEaVlZd3xBQ3Jtc0ttS3NfSFVtTmZIQjZYdzQ2eWwzazVMbDVuSUdIdVFjUjdFSnFBWVZUZV9wNDZiamZjMGJLekpyWHhGWkR4Z2R3RGhqd3ZtUzNybHNhRGdSU0VacWo4dktFb0pjMnpkZ2FVZjc5a1cybGdVQzRZTHdfVQ&q=https%3A%2F%2Ftwitter.com%2Fbadatcss&v=aLqScpKlzRo] Adam Twitter - https://twitter.com/argyleink [https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbTRnNV91WUwzVlBlTXh3QnU4Q05vQ1Jsc1cyQXxBQ3Jtc0trbVFiRWNTMkhRVlhiaXktVV81OE5kcWRZVzNVbjBRaHRWNldhb0lYVTA0c0czLXl2VEZEeHFuX29RMTI5bkFXWklPbGdCNEhIUGRlaFhON0U1cmE5REN2dFFTX19KeTZXN011RS1KdU81UTN2MklHZw&q=https%3A%2F%2Ftwitter.com%2Fargyleink&v=aLqScpKlzRo] David Twitter - https://twitter.com/_davideast [https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbTdUMkl2aFdkZEZHcEVDalA3UGJmZXB0c2xsZ3xBQ3Jtc0trMkEwVnJvbWtNbU1nX2gyZFBnWEFBTnBPSWZNVTBZSXFiWnRZODkyZy1GM0k1bl94Q2JKXzl6aWdEX1FyR2gwOGlrNzNfbm1udFlvNk1CZUhGVFNMZ3JmRW1JQXdoRXpOUWVJYU9qMUdBaWlzal9Gaw&q=https%3A%2F%2Ftwitter.com%2F_davideast&v=aLqScpKlzRo] Codepen Demo: https://codepen.io/davideast/pen/MWxvzjm [https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbE5ZTWlkRUZQU2hXLUJpNWxCVkJTbzIyMmE3UXxBQ3Jtc0tsSjdwUVZFeUUwQXJucjFsTTdJbXd2VlJZUjFsZmxDZklVdHVRTGxQaFA0WUlWbDM0SXFpcG9aQTlkdkJ1M1ZIbmlENHZYVDI1VDlUb2Y0anQyOGJSekc1eEdUQW02SW0wOHlpamdRbVFONHYyUlNycw&q=https%3A%2F%2Fcodepen.io%2Fdavideast%2Fpen%2FMWxvzjm&v=aLqScpKlzRo] Open Props: https://open-props.style [https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbXUyaVRMMmdtd2xEbWljOW1DVVE3a1A2bDdQUXxBQ3Jtc0tudi1TN2x1MVl0WWotaklZUzlfNjdsMzRKc3NlZUJ1bkxnVGlxR09UOUpueFg5QUxWSlAxTXh2WGNuTHk2NVRpWWpKWlZGMlRfZnBUWkdCXzY5U3F6cTlhb3A5TW1hRzdCbEtpTm45RDl6aGlqamlrbw&q=https%3A%2F%2Fopen-props.style%2F&v=aLqScpKlzRo]

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.

Dave Rupert knows his inputs and we got a lot to learn. Dave's great blog - https://daverupert.com/ [https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbWE2dkhjTk1ZMF94X3EwVEk5VGxXcDRXLVNod3xBQ3Jtc0tsbGpYOHBvM1VqRloweFRUdE4zRHlnb2pjSnpGSUJlT3B1TnF5UnZlSjROWlFtbktlOTBiYUlaQmhfakV6ZFNBMXVRSmlLMDRaUHg0UC1GMjJnS0Fzblp5T1BvQzZaUXJNc1ZoWlNEbFZmZXVob1g2QQ&q=https%3A%2F%2Fdaverupert.com%2F&v=azUEOy8_GHo] Dave on Twitter - https://twitter.com/davatron5000 [https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbXJLdGxuMmlCUlNnOGxKOVBwTjUxYlZEckVoZ3xBQ3Jtc0tsQUdrem1OQmxXMFJ0UXdfM3IxWWpYUTljZWJxQ1FnZHFNRWVOT0J0eGdjV1BTcElsaFF3NENaTVBaWjdydW9xUDRIaC1lLU12d3BQZmI4Z3Jra0EzX3FFMU9EMWtDaU5CYTF3S1FWUlFqU2VXTGVuZw&q=https%3A%2F%2Ftwitter.com%2Fdavatron5000&v=azUEOy8_GHo]

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

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

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.

The amazing Chris Coyier (founder of CSS-Tricks.com [http://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.

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

View Transitions are a brand new totally rad cutting edge feature in the browser. They allow you to specify animation states from one state to another a lot easier than ever before. But guess what? We're still bad at them. In this episode Adam explains how awesome View Transitions are by explaining the difficulties of the FLIP animation technique. Adam then discusses how he struggled, but finally succeeded, to build a morphing button with View Transitions. Oh and we also discuss how Adam isn't a TypeScript fan, but you'll have to listen to the end for that part. Links: Morphing Button - https://youtu.be/N2BKAKwGP6M View Transition Pseudos Visualized - https://codepen.io/bramus/full/xxQKvJP View Transitions like isotope.js - https://codepen.io/argyleink/pen/VwBKjwj Chapters: 0:00 We are bad at CSS 0:54 Why are we talking about View Transitions? 4:03 Adam sings MMMBop 4:24 What problem are View Transitions solving? 5:29 Adam's Mickey Mouse impression 5:44 Using FLIP to explain what View Transitions solve 6:27 Adam's amazing getBoundingClientRect() joke 6:45 Using FLIP to explain what View Transitions solve 9:00 Tweening was easier in Flash 10:45 View Transitions simplify the amount calculations needed to animate 12:54 David is plugged into the Matrix 13:40 MPA View Transitions require no work! (but need a flag) 14:20 We are going to see some of the most wild transitions 16:35 What is Adam bad at with View Transitions? 22:04 What is a functional pseudo selector and why is it so fun to say? 23:50 Adam continues to be bad at View Transitions 25:35 Adam gets to talk to browser engineers to tell him why he's bad 26:33 A rare case where height 100% did something 29:10 Adam gets even worse at View Transitions 30:00 Understanding view transition image pair and view transition group 35:29 David is bad at Sesame Street 37:55 An amazing visual of View Transition Groups and Pairs 39:52 Can you use other properties than transform and opacity? 40:27 Adam's leaves to go tend to his kids 42:00 We're finally wrapping up 45:33 Fun fact: Adam is not a TypeScript fan 47:12 View Transitions like isotope.js 49:32 Stay humble or CSS will humble you Video moments 23:10 - functional pseudo selector 30:00 Understanding view transition image pair and view transition group 34:00 Especially here 37:55 An amazing visual of View Transition Groups and Pairs 47:12 View Transitions like isotope.js