Episode 81: Advanced CSS 101 with Josh Comeau
Nov 15, 2021•1 hr 12 min•Transcript available on Metacast Episode description
The focus of today's show is the divisive topic of CSS. There are many different opinions on the strengths, weaknesses, and value of CSS, and to explore this in some detail, we are lucky enough to have Josh Comeau join us on our extended panel! One of the strongest messages that comes through from our discussion is the amount of time and effort that CSS requires you to invest, to reap its benefits. And while not every developer will agree to this exchange, it is hard to argue that certain parts of CSS can make this a worthwhile endeavor. We talk about the ever-increasing complexity of CSS and how this has occurred over time as the language has been added to. We also get into our favorite parts and features, looking at variables, current color, and a whole lot more. So, to hear it all from our team and our great guest, Josh Comeau, be sure to listen in with us today, on Enjoy the Vue!
Key Points From This Episode:
Opening remarks about CSS and thoughts on overcoming its challenges.
How continually adding to the CSS language has increased its complexity over time.
Weighing the best and worst additions to CSS: exciting features and things that have not worked so well.
The original intentions for CSS and its place among other tools for web development.
The difficulties with improving your CSS skills and the issue of the lack of error messages.
Favorite CSS properties: current color, variables, tricks, and more!
The infinite possibilities of tooltips.
Tackling the issues of absolute positioning through spending time with them.
Comparing the different web browsers and the most frustrating bugs.
Questions of specificity and the hidden mechanisms around sufficient information.
Top recommendations for getting better at CSS and Josh's helpful course!
The availability of great tools and finding the ones that work for you.
This week's pics: the new MacBook Pro, Remarkable Tablet, Sweet Home, and more!
Tweetables:
“I started trying to really understand CSS. I really, really enjoy the language now. It's become probably my favorite part of doing web development.” — @JoshWComeau (https://twitter.com/JoshWComeau) [0:05:55]
“I do think that right now is an incredibly exciting time to be a CSS person because so many amazing things are right on the horizon." — @JoshWComeau (https://twitter.com/JoshWComeau) [0:11:30]
“That's what leads to that feeling that CSS is unpredictable and inconsistent. It's not. It's just that if you only have one of the puzzle pieces, of course, it's not going to seem consistent.” — @JoshWComeau (https://twitter.com/JoshWComeau) [0:40:29]
Links Mentioned in Today’s Episode:
Table Caption (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption)
Rachel Andrew (https://rachelandrew.co.uk)
Firefox Developer Tools (https://developer.mozilla.org/en-US/docs/Tools)
Improve SMIL "Parsing timing specifiers" instructions #722 (https://github.com/w3c/svgwg/issues/722), Oscar Spencer (W3)
CSS SpeciFISHity (https://specifishity.com), Estelle Weyl
Stacking Contexts (https://www.joshwcomeau.com/css/stacking-contexts), Josh Comeau
CSS Stacking Context inspector (https://chrome.google.com/webstore/detail/css-stacking-context-insp/apjeljpachdcjkgnamgppgfkmddadcki), Andrea Dragotta (Chrome Extension)
Debug your website in 3D (https://youtu.be/BZAH8ZXhHZA), Edge Dev Team
Learn CSS (https://web.dev/learn/css), Google
Glamorous (https://kentcdodds.com/blog/introducing-glamorous), Kent C. Dodds
G733 Lightspeed Wireless RGB Gaming Headset (https://www.logitechg.com/en-us/products/gaming-audio/g733-rgb-wireless-headset.981-000942.html), Logitech
Astrolokeys (https://astrolokeys.com), Amy Wibowo and Cassidy Williams
3.5mm EarPods (https://www.apple.com/shop/product/MNHF2AM/A/earpods-with-35-mm-headphone-plug), Apple
Twitter: joshwcomeau (http://twitter.com/joshwcomeau)
Blog: joshwcomeau.com (http://joshwcomeau.com)
The Long Way to a Small, Angry Planet (https://bookshop.org/books/the-long-way-to-a-small-angry-planet/9780062444134), Becky Chambers
Champion Sports Lacrosse Balls (https://www.amazon.com/dp/B000KA4OE8)
Golden Girls Quotes API (https://github.com/ashleemboyer/the-golden-girls-quotes-api)
ReMarkable Tablet (https://remarkable.com/)
CSS for JavaScript Developers (https://courses.joshwcomeau.com/css-for-js), Josh Comeau
Comic Parchment (https://laughingsquid.com/comic-papyrus), Ben Harman
Buy font (https://crmrkt.com/yoMDE6) (referral link)
Play It as It Lays (https://bookshop.org/books/play-it-as-it-lays/9780374529949), Joan Didion
Sweet Home (https://www.netflix.com/watch/81061734), Netflix Special Guests: Jenell Pizarro and Josh Comeau.
