- 13
- 24 627
Bad at CSS
United States
เข้าร่วมเมื่อ 17 ก.ค. 2023
we need better design tools. this web expert tells us why
Web design tools are great but they still fall short of all the incredible intrinsic based features of CSS. While there are features like auto-layout in Figma, they still fall so short of all the content driven features of The Web. Why is it that we still try to paint pretty pictures in a design tool and act like the web works that way? We can't control every details of what happens when our website is loaded on different devices over different networks and across different user preferences. Mattias Ott joins the show to discuss why design tools have fallen behind CSS and the mindset and skills we need to progress in our web designs.
Links
Mattias Ott - matthiasott.com/
Bad at CSS - x.com/badatcss
Adam Twitter - x.com/argyleink
David Twitter - x.com/_davideast
0:00 Extrinsic control v. Intrinsic adaptability
1:46 Who is Mattias Ott?
3:10 What is Mattias bad at?
7:00 Being slapped with creativity
8:00 Codepen 2?!
8:53 What is the Indie Web?
11:21 Comparing the Indie Web to Social Networks
12:47 Implementing the latest tech on your personal site
13:51 Creating color palettes from trigonometry
23:29 The Holy Grail Layout
26:40 Intrinsic vs. Extrinsic sizing
33:50 CSS means giving up control
37:30 Control doesn't fit with the grain of the web
42:00 A case for using the system select element
44:00 The web is successful because it's weird
48:04 Art movements and web design
51:10 Container Queries and fallbacks
52:31 Weird "final" thing
54:21 Installers vs Crafters
58:53 Do you have a preferred design tool?
1:02:41 Building a CSS focused design tool
Links
Mattias Ott - matthiasott.com/
Bad at CSS - x.com/badatcss
Adam Twitter - x.com/argyleink
David Twitter - x.com/_davideast
0:00 Extrinsic control v. Intrinsic adaptability
1:46 Who is Mattias Ott?
3:10 What is Mattias bad at?
7:00 Being slapped with creativity
8:00 Codepen 2?!
8:53 What is the Indie Web?
11:21 Comparing the Indie Web to Social Networks
12:47 Implementing the latest tech on your personal site
13:51 Creating color palettes from trigonometry
23:29 The Holy Grail Layout
26:40 Intrinsic vs. Extrinsic sizing
33:50 CSS means giving up control
37:30 Control doesn't fit with the grain of the web
42:00 A case for using the system select element
44:00 The web is successful because it's weird
48:04 Art movements and web design
51:10 Container Queries and fallbacks
52:31 Weird "final" thing
54:21 Installers vs Crafters
58:53 Do you have a preferred design tool?
1:02:41 Building a CSS focused design tool
มุมมอง: 849
วีดีโอ
someone wrote 1000+ pages of CSS... we had questions
มุมมอง 9K2 หลายเดือนก่อน
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. Links CSS: The Definitive Guide: www.amazon.com/CSS-Definitive-Guide-Layout-Presentation-dp-1098117611/dp/1098117611/ref=dp_ob_title_bk Meyer Web - meyerweb.com/eric/ Op...
14 css talks covered in 1 hour - CSS Day recap
มุมมอง 8893 หลายเดือนก่อน
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 sty...
You might be wasting your time...
มุมมอง 9944 หลายเดือนก่อน
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 Objecti...
Single CSS keyframe tricks are magic
มุมมอง 8K5 หลายเดือนก่อน
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 - badatcss ...
CSS Container Queries: Everything you need to know
มุมมอง 1K5 หลายเดือนก่อน
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.
Styling better custom inputs with Dave Rupert
มุมมอง 8718 หลายเดือนก่อน
Dave Rupert knows his inputs and we got a lot to learn. Dave's great blog - daverupert.com/ Dave on Twitter - davatron5000 00:30 Intro 00:35 Styling Custom Inputs 08:38 Selector Grouping Issues 10:51 Attribute Function Potential 13:53 Proxy Slider Strategy 19:29 Accent Color & Form Styling 27:11 Text Area Sizing 30:48 Content Visibility 39:47 Content Visibility Use Case 48:46 Relati...
2024 CSS Resolutions
มุมมอง 5818 หลายเดือนก่อน
CSS is Hard. Each and every year. So what are the things that we should improve on in 2024? 00:40 New Year, New CSS Resolutions A Look at Our Goals for 2024 03:30 Finishing Open Props v2 and Modernizing Doc Sites 05:00 Finally Embracing Subgrid for Powerful Layouts 10:20 Exploring Tailwind, Style-X, and Panda CSS 14:30 Adding Delightful Interactive Animations with CSS 17:30 Building a Like Butt...
What CSS Is Jason Lengstorf bad at?
มุมมอง 648ปีที่แล้ว
This podcast was an amazing fix of fun and chaos. Jason Lengstorf, Adam Arygle, and David East discuss CSS, the mystery of container queries, and the struggles of work posture, all while taking playful jabs at each other. 00:00 Introduction 01:24 CSS Basics 03:43 Advanced CSS 08:09 Web Framework Churn 18:58 CSS Methodologies 28:21 Accessibility 37:20 Language Learning 45:40 Astro 56:28 Dependen...
TypeScript fan vs. a skeptic
มุมมอง 405ปีที่แล้ว
Chapters: 0:00 - Naming hot take 0:50 - We’re talking about TypeScript 1:30 - Adam does not like TypeScript but David does 4:00 - SPICY ADAM TAKES 5:00 - Adam feels that types become a slippery slope 7:00 - MORE SPICY ADAM TAKES 8:10 - David’s story of how Angular chose TypeScript 12:20 - Adam admits TypeScript makes sense for libraries and backend 13:45 - David recommends to never get good at ...
What CSS is Chris Coyier bad at?
มุมมอง 682ปีที่แล้ว
Chapters: 0:00 - No tricks 0:40 - Say hello to Chris Coyier 1:14 - Chris wrote a list of things he’s bad at but ran out of paper 1:40 - 3D is really hard 5:00 - Mathmatical values vs. taste 6:28 - There are no bad decisions, just decisions 8:00 - Nicer looking code vs. working code 10:10 - Feeling old 11:40 - The UI is the extra mile 12:18 - White space waste makes things rich and lavish 14:28 ...
Is Figma's Dev Mode bad at CSS?
มุมมอง 185ปีที่แล้ว
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 an...
The View Transition API is amazing... but we're bad at it
มุมมอง 885ปีที่แล้ว
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 final...
How is it possible you only got 475 views at time of writing here? My second time on this one already, Spotify first, rewatched now. Was indeed a great talk at CSS day! CSS podcast, this here, all great work.
Keep em coming guys! Love your content :)
Thanks Adam and David fro doing this podcast consistency, it's getting real. Since last year, CSS become real modern and after writing css for many I still feel I know nothing 😂. The definitive guide is what I need to be comfortable again at css.
Brilliant! Cant wait to see Matthias again, after his superb talk at CSS Day 👏🏻. Also thank you so much for all the work you do on this channel. Much appreciated.
but 90% browser support? Shouldnt it be atleat 95% before using them?
is the 1000 pages answer the golden question of how to center a div tho
15:00 That was funny to see. After most of the "new gen" web devs praising Chrome for being the best piece of software ever made, one of the titans of web dev calling it a "Google Meet's Runner"
That fart story segment had me in stitches so fckn random😭😭😭😭😂😂💨💨
Very interesting and entertaining interview... That's what you can call a complete book, unfortunately we don't always have the time to read such extensive books and put their content into practice. Like many people, I end up leaning towards video tutorials... I'm a guitarist and watching the video I was curious about the Strat behind you, could you tell me what brand and model it is? Greetings!
can you make a talk with Josh W Comeau? Cos his Css course and React course so much popular
on it.
I swear your humor will only someone understand that uses css lol my husband didn't find any joke funny😂
Audio is only playing on the left side
left side is strong side
It would help if you guys had a screen with code up that you could collaborate on while doing this. Helps to avoid difficulty in communication when trying to explain to each other what you're thinking of -- the code example youve written in your head.
you're not wrong. we're learning a lot about how we want to these episodes so early on. stick with us and it's gonna get a lot better.
lmao, what's truly nerdy is having a custom elisp function for searching different docs and search engines that I can call directly from emacs.
Read that, front to back, in 2006. Even print CSS, LOL. This book alongside Web Standard Solutions was gold.
your audio mix is scuffed, test with headphones, fix and repupload before it's too late
eh, it's just the intro bit... it gets much better later
yes. so. apparently you can be a big n00b and select "Play stereo audio as mono" on your mac settings and it fixes it only for you. once you do that you can spend hours wondering what the hell is going on. pro tip.
@badcss I didn't have a problem at all
@@badcss or you can be a BIG noob to not know to actually test if what he said is true before calling him a noob. the problem exists. NooB
why is ur voice left sided
😭I swore I fixed this but I'm a n00b at this new audio interface I got
we are left brained so
<wis-dom> would make a good custom element to output a key piece of info from a random web spec
Eminem & Cardy B rap about CSS 😂😎
Nice! I didn't even know CSS Day existed, now I have a bunch of cool talks to watch. The font-face things sound like a dream come true...
I just discovered your channel through the Back-End Banter podcast. As someone new to CSS, I feel lucky and grateful to have found your content. I hope more people discover your channel and show it the love it deserves!
seriously thank you so much for the kind words <3
- Your typescript it tight. Your backend work is tight. Your frontend chops are tight and your design chops are tight YOU ARE JUST AN ANIMAL!!! - I appreciate that. 🤣🤣🤣
Wait... 853 subscribers? Is this channel a clone? can't be this is the real deal and still hasn't exploded
"you should have more subs" is the best compliment you can get ❤️
This format is great, I watch an hour of great insights and I save a couple of hours on talks I'm probably not interested while I get some fair hype for some I could miss. Thanks for sharing.
Super glad to hear this. I love the idea of consuming a ton of CSS content and pointing everyone in the right directions to learn more. We'll have more like this soon.
Ordinal number is the word you’re looking for. As opposed to cardinal number which represents number of elements.
wait, 763 subs? lemme make it 764
not all heroes wear capes 🙏
Love the energy 👍🏾 enjoyed the chat and learned a trick or two. Top stuff 👍🏾
The color variables section really hits home for me... I've recently built a big React Component Library for our department and also chose to prefix everything e.g. --color-text-primary, --color-text-label etc. etc.. and there is still just so much. Wish I could force our designer to limit himself with the color options 😔 Same project, other time waster thing - I keep finding myself trying to preemptively engineer ways for other devs to tweak each component when its being used, but half the time these things are either permanently unused across all projects or simply miss the mark as I fail to predict the "real tweak" that's coming down the requirements line later. Hard agree on the tab-count limit thing! I am a serial tab killer :)
We moved from "red" "green" "magenta" (and derivatives of those with marketing names) to use semantic wording for common surfaces and areas, like `accent`, `action-bg`, `muted`, `destructive`, `panel-border` etc. with various states depending on their use caes. These are limited to a small set of neutral colors and very few accent colors (primarily branding). But we also allow going outside the box without having to define semantic colors before they are used in more than a few places. Of course with the new CSS4 color property this will be a lot easier to create more depth from base colors, but this has worked well for us. As for allowing tweaking components, what have worked for us is a combination of compound components and always pass props through, merging custom classes and attributes. This way anyone can use a component and change it to their desired, without being constrained on a preset layout and avoids the cuts of a thousand props. You can see examples of these in UI libraries like Radix, React Aria, etc. which are also great as a base to build your own library on top as they are completely unstyled by primarily using ARIA attributes or data attributes for styling states.
I believe "Indextual" === "ordinal". I like your word better...
Didn't actually get the difference between specifying desired state at "50%" instead of "to" (with "alternate" and half of duration)
there is none. pick one and stick with it in a project. i like 50% but thats me
using `will-change` property can help us to re paint better
Today I thought the same about the sibling thing because nth-child have value but we can't get it.
cool hack! :)
+1 on the "dumb/thin" container node just for setting name/type. Ive been shipping production container queries for a while now and this saves the headache of remembering which properties are/aren't off limits to change because you set them on the root container. Everything is fair game.
It takes a bit of thinking upfront but it saves so much time in the long run. Thanks for giving us a listen 🙏
Great content! You need more subscribers!
I'm so excited for color-contrast 👏 here's to hoping it moves forward!
I felt this episode. Another fun quirk I encountered with range inputs is that they scroll the page on touch as soon as you use custom styles for them
I'm onboard with David. GUI Challenges were flawless execution. I had nothing to contribute to that conversation. After years of watching Adam's content, I know the humility is real but as an audience, we're usually not even gonna try to improve something made by a Googler.
So glad y'all are bringing this back! I've learned a whole lot from the episodes so far!
Amazing conversation! I absolutely love CSS and funnily enough I love Tailwind because it lets me write the CSS I want in a way that can survive all the curved balls of life, marketing department, performance etc. I know many people use Tailwind to "avoid learning CSS" - but I see Taliwind as a tool to write CSS - I use mini classes but I know exactly what CSS I am composing with it, instead of writing it by hand. And Tailwind is an excellent tool to teach CSS, thanks to the Intellisense hover info. I still get told to "just learn CSS" every week, but oh well 🤣
Damn that Argyle intro was FIRE
Magic Move is Keynote :P
Thank you for this, I needed it. Adams take are like oxygen to me 🤗
This was so funny! 😂 Thank you, I enjoyed it very much!
Appreciate the container query confession. I'm not alone!
That intro, wow!
Great episode. Loved hearing pro CSS Modules discussion and 55:30 Totally 100% agree with Jason here. Back in the day, CanJS was easily my favorite framework. Cool ideas, great code structure, fun to use... then they released like 3 major versions in a short span of time and, totally predictably, fractured and killed almost all the small brand loyalty it had. Such a bummer because CanJS is awesome.
Adam's argument at 38:29 was so well said, completely accurate, and absolutely hilariously perfectly delivered 👏😂
I'm bad at css I need help 😅😅
This is so great! We need more humble content like this! Thank you so much for making this!