Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
TypeScript fan vs. a skeptic
1.4k Plays1 year ago
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.
Recommended
Transcript
00:00:01
Speaker
Okay.
Introduction to 'Bad at CSS'
00:00:02
Speaker
Hello everybody. Welcome to the bad at CSS podcast. I am totally not throwing off because it always freezes when I hit the record button.
TypeScript and CSS: An Unlikely Pair?
00:00:10
Speaker
Uh, today we have a very good topic that in some ways is not really about CSS, but in some ways is. And today Adam and myself are going to be talking about TypeScript and where we're bad at TypeScript, but also maybe a little bit about types in CSS. So Adam lead us off.
Adam vs. Host: TypeScript Preferences
00:00:32
Speaker
Oh, actually, before Adam leads us, I do want to say, Adam, do you like TypeScript? No.
00:00:41
Speaker
I like TypeScript for the record. Maybe it's just a personal experience I've had, but I do. I love TypeScript. In 2012, when TypeScript came out, I worked at a company that was very anti-JavaScript. We wrote everything in C-sharp and had to beg to write any JavaScript at all.
00:01:03
Speaker
And I went to my boss and showed him TypeScript. And I told him, this is C-sharp in the browser. And at first he didn't believe me, but then when I showed him that Anders Halsberg wrote it, who wrote C-sharp, I was like, see? And he was like, oh, and so we, no joke, in 2012, literally showed him the announcement post. My boss was like, if you want to write it in this, that's okay. So I was able to write
00:01:30
Speaker
production JavaScript or TypeScript in like 2012. So I've been writing, so I can apply to all those jobs. That's like must need, you know, more than 10 years experience in TypeScript. I'm like, technically I have that, but while I have that, I'm still bad at it. So let's, so Oh, that's funny. Yeah. Dotnet was ahead of its time, huh? Same with action script three. Same with angular two. Everyone was like, Oh, it
00:01:58
Speaker
Oh, how dare? Oh no. Uh, see dot net. I hate it. And then at the end of the day, we're like, you've now, now that we're doing server side type driven, I'm like, Oh, how the pendulum swings.
The Irony of TypeScript in Front-end Development
00:02:12
Speaker
I'm mostly amused at like, how funny it is that in the front end world, we're all like desperate for types in so much that we've, we only have them during development. They don't even deploy.
00:02:24
Speaker
It's just a thing we do for ourselves in our little sandbox. Meanwhile, the native apps are over there going, we wish we didn't have to type. Let's make new languages where we get to act like we're JavaScript. And I'm like, see, that's the right thing to do. Make a language that's for the human, not where the human has to bend its mind in multiple ways to appease the machine. The machine should learn from what we're, you know, like an advanced language isn't one like Rust where I have to be very contractual
00:02:53
Speaker
and very explicit there's no ambiguity oh ambiguity oh dude i'm like that's what computers are good for it'll solve it on the fly we've been evolving as a programming language forever and i feel like typescript is kind of a de-evolution it is fine it's in my i mean my site's written in it gradient dot style is written in it but it is a step backwards it is
00:03:15
Speaker
It's superfluous. If you want to do types, then choose a real typed
TypeScript for Library Authors: A Boon or Bane?
00:03:20
Speaker
language. Like, why are you choosing this one that's just partial? I don't get it. So anyway, when I write TypeScript, I'll type with the best y'all. I come from a typed language background and I couldn't wait to escape it.
00:03:32
Speaker
And then here I am now in TypeScript and I light type. I'm like, if I get to choose my preference here, like my personal site is light typed. I'm not gonna spend eight hours typing my system that produces zero user value. I'm not gonna do that. I'm gonna lightly type things. And anyway, so there's a, I dropped a few bombs on you. I see you. That was spicy, man. That was like a five pepper take. Like, oh my gosh, this is a ghost pepper take.
00:04:04
Speaker
So actually, let me try to get your point of view here. So you like TypeScript in the sense that TypeScript, let's face it, does give us better developer experience in terms of tooling. Knowing this.this.this is very nice, or the contract of that. But I think what you're saying is you will use TypeScript, but really in the form where you're trying to get type inference from things, rather than creating your own world of types.
00:04:26
Speaker
Wow, I'm like recovering from that.
00:04:32
Speaker
Like you don't really want to say like, Oh, I have a type of user and a type of this and a type of that. And then it's all up to you to keep these contracts and everything in these interfaces in place. And then when things change, yes, it's a lot of work. It's like, it's like updating tests. It's like updating all this stuff. It's, you know, it's not fun. And is that kind of where you're at? Like you'll use type inference. That's okay. But you don't want to actually generate and handwrite any types.
TypeScript's Runtime Irony and CSS Comparison
00:04:59
Speaker
I mean, I just, it's a slippery slope. Okay. I spent, I spent numerous times where it's like, Oh man, that was a couple of days in an angular to app or something. Just like a very tight, a system where I highly was into types, which is very satisfying by the way. So I totally get it. Everyone out there that's like, well, yeah, but I just, I hardened my system and I, yes, you did. And then it disappeared when you deployed your system. But you know, we'll talk about that later.
00:05:23
Speaker
Actually, we can talk about that right now because I have a story that I think that is great for this podcast. I'm like, oh, I have one cool thing to contribute here. So an issue you have with TypeScript as well is that you don't like also the fact that types, they're dev time types. So they erase at runtime and then therefore no longer do you have access to this. So that's something that you dislike.
00:05:50
Speaker
It's kind of just, it's to me, it's something to mock it about. It's kind of silly. Every other person in this world that writes in a typed language, deploys the typed language. TypeScript is the only one where we're like, I acted like it was TypeScript and then I deployed something else. It's like you build an airplane that's
00:06:06
Speaker
in this whole typed system, but then when you actually put the airplane on your client's ground, it has none of the hundreds of hours of time you spent in type safety. You just kind of wing it at that point. You're like, no, TypeScript will deploy something safe for me, right? And you're just, I don't know.
00:06:23
Speaker
we just kind of wish and hope. It's just kind of ironic that all these historical type languages got poo pooed on and then here we are investing in the one that's a fake type system. It's probably the biggest poser, holy crap dude, here's
00:06:39
Speaker
TypeScript is a... Can we publish this? I don't know if I can publish this. I mean, it's fun. It's very customizable, but it is kind of a typed language poser because you don't ship that. And if you do, it still gets compiled away. So it's just this vapor types. Like why not go work in Kotlin? Why not go work in Rust? Rust is a phenomenal language. If you like TypeScript, stop writing TypeScript, go write Rust. That's where I stand right now.
00:07:10
Speaker
I'd be quiet there because I wanted you to have that sound bite. But so what have I told you though, Adam, leading into my story here that there, maybe there was an initiative in the beginning of TypeScript.
00:07:23
Speaker
to actually have some types around runtime. What did you, what have you thought about that? What if I could tell you a story about
Early TypeScript: Runtime Types Experiment
00:07:30
Speaker
that? Well, I mean, we can look at the spec, right? Yes. They've got it specced out. They've got types in comments, which will deploy type safety at runtime, at least in a, in a small amount through the comment system. I mean, I mean back in like 2015. It's like they wanted to ship TypeScript in the browser. Tell me more, dude. I'm intrigued. Yeah.
00:07:50
Speaker
So back in 2015 was, uh, right about, yeah. So in 2014, I joined Google from Firebase, like startup to Google Firebase, whatever, uh, that transition process was. And one of the things that I did is I straight, you know, when you joined Google, uh, as you know, cause you, I know you did it as well. Cause how I met you, you kind of nerd out and you want to like meet teams and people and just everything. So I totally did that with the Angular team. Big, big fan.
00:08:19
Speaker
And so I met with them, had lunch with a bunch of people, and then they basically were like, hi, would you like to 20% on the team? And so I was like, yes, absolutely. And so that's for those who don't know 20% of your time at Google, you can spend on another project. Sort of the joke though is, is that a 20% really just means 120%.
00:08:38
Speaker
It does these days. And if you really like it, it's a 200%. And that was kind of my thing with Angular. I very much 200%. But I really enjoyed it. I really did. I had no regrets. And I did. I worked a ton, but I was having a lot of fun. And so one of the things I got to do was start out building the very first version of Angular.io. And we needed, at the time, we were using a language called atScript, which was
00:09:07
Speaker
basically built by the Angular team to have decorators and types and everything. And at the time, everyone was like, this is a competition between at-script and typescript. But Mishko Hevery, who was one of the people building at-script at the time, basically wanted to use typescript but couldn't because Google was like, hey, typescript's not a blessed language. Today typescript is a blessed language. And I have a whole other story about that. It is. Oh, yeah. I was one of the...
00:09:34
Speaker
I was one of the first people at Google to be on a blessed TypeScript project that went to production and stuff. Wow. I have so many TypeScript for someone. I'm not that good at TypeScript for someone who's I'm like, I have a couple of TypeScript history parts.
00:09:49
Speaker
But so then we went out to Microsoft one day to meet with the TypeScript team because while Mishko was building Apps Script, people were like, oh, he was like, can I use TypeScript? And they were like, no. He's like, well, I'm going to build my own language. And they were like, oh, OK, don't do that. And so he kind of pitched them TypeScript. And they were like, OK, start exploring it. So we went and met with the Microsoft team up in Redmond.
00:10:16
Speaker
I had been working on writing all the samples in at script at first, so I was going to meet with them to worry about all the samples in TypeScript. I got to meet with Anders Halsberg. That was like a really cool moment. Amazingly kind person. I was like, I love, I love Turbo Pascal and C sharp and I love your work. Thank you. And he was like, oh, no, he was quoted.
00:10:37
Speaker
But I watched him and Misko discuss having, so one of the features of ad script was it had runtime type assertions. So the types did not go away, but only during like development time, not a production time. The types still went away at production. So this was like console assertions.
00:10:54
Speaker
basically. And so if something like your data coming over the server didn't match the type at runtime, it would warn and tell you or break even and tell you like, Hey, you expected this to have type of message, but it was strange, but instead of the number 10,
CSS: The Elegant Type Handler
00:11:08
Speaker
you must adjust yourself.
00:11:10
Speaker
Exactly. Which was cool in some ways. And so they had a big discussion about how to bring that to TypeScript. And, uh, I'm too smart to, I'm sorry, I'm not too smart. I'm not smart enough to really dive into the reasons why it didn't happen, but it didn't. They decided to drop that from, from at script. So died with that script. And, uh, and yeah, so that, that was sort of the deal. So it was a discussion.
00:11:35
Speaker
I do want to share that TypeScript as a library author makes a lot of sense. You get to sort of like, and then also do not trust your type system more than you think you need to write tests. That's another thing I have an issue with TypeScript is it creates a false sense of confidence in your code.
00:11:58
Speaker
There's just so many examples where things are very well typed and they don't do what you want. Very well typed and break. And it's just like the list goes on. So I just wanted to say that if you're writing a library or if you're on the backend and you want to write in TypeScript, I think those are really good locations. It's mostly the front end that I have most of my issues with TypeScript. I think we're overdoing it. We're, we're creating a really high barrier to entry, even though you think that like,
00:12:24
Speaker
You know command space or control space gives some new beginner a pathway forward it doesn't it creates confines they start to think that their entire world only lives off of the auto completion which is a bad this is how i. Basically came up in programming was in typed languages living by command space and whatever the editor suggested to me and it was terrible.
00:12:47
Speaker
Well, my recommendation, if you want to get good, if you want to have a healthy relationship with TypeScript is never get that good at TypeScript because then you will never be overly confident in your type system and your abilities. And you can just say like, Hey, this is helping me.
00:13:06
Speaker
but I don't quite trust it. So I know I need to write that test. So I know I need to do more than because that's how I feel with TypeScript. I know enough, but I always look at my types and I kind of look at it as like my layouts and CSS is I'm like, it's there. But, but like a stiff wind will, will blow it down.
00:13:25
Speaker
This is my favorite part of the podcast for everyone, by the way, is when our children just decide that it's not happening. For me, I have this light in front of me, and then there's these two double doors. So if my children decide to come in, it's going to be a disaster because this light is just going to fall right on my face. So maybe that is like the podcast content we need. It's just a straight fall.
00:13:56
Speaker
Do, do, do, do. Where's the thingy I need? I'm like, over there. I'll see you later.
00:14:04
Speaker
Hashtag parenting. Where are my shoes? Nice filler. Yeah. I had a coworker who once said, uh, half or 90% of parenting is just getting your kids to put their shoes on. And I think that might be right. Nice. I like another one, which is how, how much did it hurt them? How long were their hands over the place where they got hit? You know, it's just like, Ooh, ow, that hurt a little bit. Or is it like,
00:14:33
Speaker
Oh yeah, if their hand is there for a long time, you're like, ooh, it's bad.
00:14:36
Speaker
Or it's the silence. It's the silent breathing before the scream too. And they're like, Oh yeah. Well, there's like no sound coming out. You're like, dude, they're winding up. They're winding up big. Uh, this is going to be bad. Okay. Back to types. I mean, types are just fun. We could talk about a lot of types, but CSS is typed. Hopefully people listening to that know this by now or listened to me talk about that enough. And what's so fun about CSS is typing is that it's.
00:15:03
Speaker
It's a, it's like a strong type language that's super chill. You know, it's so chill. It'll never stop. You can't kill it. You know, like it's so many, it's so funny. All these TypeScripts, people are like TypeScript is so good, so strong. And I'm like, Oh yeah, watch this misplaced comma crash the entire agent. And then CSS is like, Oh, did you forget something?
00:15:27
Speaker
All right, I'm going to move on and I'm going to keep parsing and keep reading and it just don't stop. It's like a Pac-Man that just you can't, you can't crush it. It's really hard. And then everything it consumes is typed. It's like, Oh, what did I just eat? It's like, and so it has this built in type safety without the requirement of me being explicit about every little type. Imagine, I mean, actually you could do this if you wanted to, but you know, like a styling system that was as typed as TypeScript.
00:15:56
Speaker
It would be exhausting. It'd be so exhausting. I mean, it's like when you actually look at a lot of these design systems in JavaScript, and then they type the design system in JavaScript. That's exhausting. And then it also gets weird later when you've got mixed types, like a box shadow. Box shadow mixes lengths and colors together. Ooh, that. What's that type? Well, it's like CSS is like, well, that's its type. Its type is this mixed type. And we know how to parse that. It's types made out of other types. And anyway, I just loved it.
00:16:25
Speaker
has all the safety without the stopping, without the baggage, without the mental weight on the user, on the author. It's seamless. I never have to deal with the type system. All I do is benefit from it. And that's one of the things I also don't like about TypeScript is I spend a lot of time making TypeScript happy. My functions grow in complexity and lines of code to make TypeScript happy. And I'm like, this thing is in my face. It's not the wind beneath my wings.
00:16:56
Speaker
You know, it's my face. I love TypeScript, but whenever I have to overload a function, I, yeah, I get a little sad. Like how many, how many little minions do people want behind them while they code yelling at them?
00:17:14
Speaker
You're like, I've only typed a couple characters. And you got your linters like, oh, yeah, watch out. And then TypeScript's like, oh, you can't do that. And then you're like, I'm not even done thinking out what I'm going to do, let alone harden the thing that I made. Can you just wait till I have something partially working and then show up, Mr. All five different things people put in their editors to mess with the code they're typing? I'm like.
00:17:35
Speaker
Well, you know, the flip side of that though, I will say, I guess I have to take a TypeScript defender on now. I can take the other side too. It's kind of fun. Yeah. Is that the amount of times that TypeScript is like, Hey, Hey, Hey, Hey, Whoa, Whoa, Whoa. What are you doing there with that line? That's just not going to work. Like, and I'm like, they're like, type whatever is wrong here. You're, and I'm like, and a lot of times too many times I'm like, TypeScript you tripping like,
00:18:00
Speaker
I know what I'm doing here. Okay. And I'm going to cast you to any because, or TS ignore because I'm tired of you. All right. And then, like 15 seconds later when I run the test or like just do any debugging, it's like, like, this is wrong because this type was wrong. And then when I uncomment that line, I'm like, Oh yeah, that's right. It didn't.
00:18:22
Speaker
TypeScript was a little like told yourself, you know, like when you have that little, cause it's good, like as much as you may philosophy philosophically not agree with it, it is a very, very smart system. And so a lot of times it does things better than us humans does. And it does, it kind of warns you. It's kind of like, Hey.
00:18:42
Speaker
Hey, this is going to be bad. You're there's no, this on there or there's no, there's no, this type on there or like you're trying, you think it's that kind of user, but you actually extended this other user and it's missing those properties.
TypeScript's Developer Experience Benefits
00:18:52
Speaker
So you're going to have a bad time and you're like, I know how to have a good time type script. Okay. No, you don't. No, you don't. So that's what I mean. Light, light typing is cool. Like you can get like those, those catches, those earlier catches can save you, but. And yeah, I can definitely take the side of types. It's very easy to.
00:19:12
Speaker
to share those, but I think it's harder to share this side where it's like the, you step back and you kind of evaluate it for what it is and not for what everyone says it is online. You're like taking your own personal perspective on the thing and not trusting other people. Anyway, I look at how much time I've spent giving TypeScript stuff and then how much time it's saved me from things. And this, the relationship is out of whack.
00:19:38
Speaker
Like I said, like some days I'll spend an entire day hardening the types in my system. And then I'm like, do you know how many little editor moments it would take to add up to a day?
00:19:49
Speaker
of savings, let alone two or three days. That's why it's good for library authors in a lot of ways. It is, in my opinion, the only choice. If you're building a JavaScript library, it's got to be in TypeScript. It's got to be in TypeScript. Yeah, nothing's mandatory. It's not like there's a legal law for TypeScript, but maybe there should be. No, I'm just kidding.
00:20:12
Speaker
You should, you should write your libraries in TypeScript because not only is that good for you, but you're also creating a contract for the people who are consuming your library, even if they're consuming it in JavaScript. And so that to me is where the, you know, that's where it makes complete sense is that you get, you know, whether, whatever editor you're using, it's going to give you, there's all TypeScript support now, even within JavaScript.
00:20:36
Speaker
Yeah, there's another fun thing to make fun of TypeScript. And then I want to bring it back to CSS too. I want to talk about app property. Is this the CSS market? Yes, we talked about app property because I'm one of those people with that property, like you and Chris were talking about it the other week. And in the end, I was like, yeah, app property, it's that thing with the at in the property. Ah, yes. Brilliant. I feel like that's what most people are like with that property. So I'm very comfortable taking that role when we get to that section. Oh, nice. Okay, cool. I'll recap that.
00:21:06
Speaker
I don't know if I remember the TypeScript thing I was going to make fun of it for. What was the topic right before this? Dang it. That's how I defend TypeScript is by distracting you. Oh, what was it? It's. And your child, your child must like TypeScript too, because they are keeping you from discussing it. This is great.
00:21:30
Speaker
I just make particularly good podcast content or maybe it does. If you are, you know, at this section, you should please let us know in the comments. Do you like the child's interruptions? Do you like seeing Adam's backdrop of the, all the sweet guitars? I think that one to the left, at least my left is the, uh, banjo lately. And, uh, I don't know. We'll have to ask him what that was. The outdoor guitar. That's the outdoor guitar. Okay. Camping all weather guitar.
00:21:59
Speaker
My kid's like, I have zero friends in Minecraft. I'm trying to join my brother. And I'm like, tough. I'll see you in 10 minutes or so. I know. I love it when they say things that like, you remember being a kid when that was like the biggest deal. You're like, what do you mean? That's not a big deal. I have zero friends in Minecraft, dad. Yeah.
00:22:25
Speaker
Yeah, I don't know. You don't like TypeScript. I understand it. I don't even want to say. I just think we're projecting it in a space that it just doesn't quite belong. And we're also not reflecting very well like the other parts of the industry of coding. People trying to get away from types, realizing that types weren't saving them. And so that's why they made Kotlin. That's why they made Swift. It's so weird to me that we don't
00:22:49
Speaker
and then look at ActionScript. As soon as ActionScript went ActionScript 3, it pushed out a ton of people, so it became less accessible, and it kind of started to downfall. It was this type language. It was supposed to bring speed, and also, and they even shipped the types. Actually, did they? Did ActionScript 3 ship the types? Or was it a developer type? Ooh, I should go check that out. Yeah. Anyway, that's just part of the deal. So, actually, let me tee you up for a CSS transition here.
00:23:18
Speaker
So you say CSS types, and I know this is something that has been worked on, but a lot of times when I'm in JavaScript, when I'm trying to access CSS, the only type that I usually deal with is type of string. So if I'm like, uh, how many pixels is that? It's string pixels. How many, how much padding does that have? It's got string padding. And so those are numbers. Those are numeric values inside of CSS. I can use a calc function or a min function or tons of awesome, a clamp function. We, we should have a CSS episode about like called name that function. Like this function.
00:23:48
Speaker
Like pop quiz, but uh, I can do all these lady in the clamp. That's, it sounds like a good episode lady. It's got the noodles, like, I don't know. Well, that's a good scroll driven animation. As you scroll down the page, two dogs go across the noodle and then kiss. Oh, that sounds good stuff.
00:24:06
Speaker
But yeah, so how is it you talk about this beautiful type system that CSS has, but when I access through JavaScript, the majority of the time it's string. So you got to try the new API. There's one called typed OM, the typed object model. This is the CSS OM. So just like the DOM, we have the DOM, we have the CSS OM and there's a typed OM and you can ask it for values and it will bring them back to split out into an object. It says, here's the.
00:24:33
Speaker
number, and then it's a type of number. And then it will give you the unit type separately. So if you want it to be 10 pixels, you have to reassemble it or ask it for the computed value, which is kind of what you're what you've been doing.
Enhancing CSS with Typed Object Model
00:24:46
Speaker
So there are certainly ways to ask for values from JavaScript and get the typed representation at CSS. I will share a warning though, this API is so seldom used and also not defined perfectly for all the different parts of CSS, like color, for example, is a very difficult one. Yes. That you might find an insufficient typed amount of information from JavaScript sometimes, but anyway, it's still there and it's in the platform and hopefully it continues to evolve.
00:25:16
Speaker
Okay, well, continuing on then, explain to me app property, what it is, why we need it, and why I should use it. Awesome. Okay, so app property is a formal way to define a custom property. So a custom property can be willy-nilly anything it needs to be. And it's kind of a super part. You could put JavaScript in a CSS custom property, access the value of that custom property from JavaScript, and execute it.
00:25:40
Speaker
And then all of a sudden CSS is storing things. Do you remember that database example? Someone was doing database queries through CSS anyway. That's beautiful. I loved it. That's pretty cool. Love it. Yeah. So app property allows you to define a custom property, specify the type and an initial value and whether or not it inherits. So it's kind of like this ability to make a secure
00:26:02
Speaker
So let's say I make a custom property and I say it's a length, so it only accepts lengths, or maybe I specify it only accepts length percentages. So it can be 50% or 50 pixels. That's a type in CSS. You got to know your types in CSS in order to create an app property because it's required that you pass it in there. And once you specify this type and you try to reassign that to something that's not of that type, it won't assign.
00:26:27
Speaker
And that's super power number one. So like, if you do that in a regular custom properties, you can be like regular custom property, 50 pixels. And then later you're like, yeah, now you're a 50%. So it's a lot like a very, like a var. Whereas kind of like type any is like a var or it's just like, yeah, anything kind of goes inside this. It's a, it's a box for values and it can be anything. And what you're saying app property is kind of when you start to move away from an any type to a specific type, like length, like you just said.
00:26:57
Speaker
Yep. And that becomes really critical. Let's say a box shadow is a good example. Let's say it's made of a few custom properties, a color and some links. And if you weren't using that property, someone could accidentally have a typo in the color or a typo in the length and it would break the entire box shadow. Yeah. But if you have custom properties with app property that define the types and you make an accidental typo or you try to assign a length to a color or something like that, the box shadow wouldn't break.
00:27:26
Speaker
Because it wouldn't use that value. It would just resume back to its initial value or its last known good value. And so you get this type safety inside of CSS with your custom properties so that you have this confidence that you won't be deploying broken UIs. It's pretty cool. So what kind of types can I use? You said length. What are some other good ones? Yeah, color, length percentage, integer. Yeah.
00:27:54
Speaker
You can make your own names so you can have like a kind of like, I dense, I load identifiers that are your own. Okay. What else is in there? I think just regular percentage. Okay. That makes sense. I can't remember anyway, but yeah, there's like six or seven or something like that. We're pretty core.
00:28:14
Speaker
They're kind of like proteins to doing like more, you know, it's like over, I imagine that's a property is sort of like a format where it's like, Hey, we want to be able to make these parts of CSS, especially with custom properties make more sense, like have their own types, so to speak. And so this is the syntax that we're providing for you to create that specification. And over time they can add different types of types for you to type.
00:28:41
Speaker
And then that way, if they want for some reason in the future, I'm always trying really hard not to be proud of myself for that sentence. If you wanted to add something, you said color, what's one you could do? If you wanted some specific, I don't know, what is it? Actually, oh, this is a good one. I can put it on you. That's what I like to do. What is a good type that you think CSS should have? Ooh, a type that's missing.
00:29:10
Speaker
Interesting. I don't know. Oh, a function is a good one that comes to mind like min max clamp. Yeah. Um, you could, you could say this only accepts a function. That would be very useful because that is, cause it's true. Like
00:29:29
Speaker
If you think about a property in CSS, it is very much typed like it, the, you know, it takes in a number, like it takes in a string, it takes an, or even so it takes in a size value or something like that as very different. Uh, and when you think about colors, Oh my gosh, you have color, you have color representations like hexadecimal, but you also have color functions such as RGB, HSB, HSL, like all that type of stuff. So being very, and if you kind of.
00:29:58
Speaker
move that same understanding of an color function to a TypeScript function. If there was a TypeScript function named HSL, you would say, well, the first value is the hue, which is a number. And then... Could also be a percentage. Could also be an angle.
00:30:15
Speaker
I was going to say the saturation or you'd have to overload it. And then, but if we go with like the basic usage of ASL, it's going to be like one 50 or something like that, a number. And then if you go to now saturation, that's a percentage that is not just a number. Cause if you type in one 50 again, it's not going to work. Uh, at least not expectedly. And then the same thing with lightness. That's also a percentage. It's a number, but it's a percentage, which is very important.
00:30:41
Speaker
to cuz that when i was first using hsl i want i would always forget that the last two were percentages cuz i start with a number like an integer uh and then the rest would be that too and i'd be like why isn't this working since this is done okay so this leads into why i've asked so many times why editors no one's created a typed
00:30:59
Speaker
autocomplete for CSS because the HSL function is a typed function. It's typed in the spec. What it expects is known, which means you could type HSL open parenthesis, and you could get all the same TypeScript type of information, but in your CSS, they could easily know, and then you could underscore squiggly it. It'd be like, oh, you put an integer here and you actually need to, this needs to be a percentage or something like that.
00:31:22
Speaker
Um, we could have those things and then you'll like types or you like types. So maybe, maybe that'll make you like TypeScript. Do you think that's possible? But if like, what if we had, you know, like, what if that, what's something TypeScript wanted to do? If they were like, you know what, we're going to build TypeScript for CSS.
00:31:40
Speaker
Well, I mean, I've kind of lightly proposed it as just just to be silly, though, because people want typing so bad, they think it's so powerful to them, their workflow that I'm like, well, then go do it to CSS to you get all the same, which is kind of what stitches is.
00:31:55
Speaker
Oh, yeah. This is a, uh, a JavaScript defined styling system that everything's decently typed enough that it can feel like TypeScript. You get the type of head and stuff like that. It's not quite as typed as the CSS object model, but yeah, it's there. So what you're saying is, is that CSS is a language that like, let's be real here. Like, you know, this is, this is a podcast. We keep it real, like my time of the day. I'm so real right now. Anyway, whatever. It's a, it's a Firebase app, but
00:32:26
Speaker
One thing that I think is interesting is that CSS doesn't get all the respect that it deserves. And even if someone respects it, they may not enjoy it, you know, to each their own.
00:32:39
Speaker
But do you think if that CSS had types in the same, it has types, but if it had type, uh, tooling support in the same way that JavaScript now does with TypeScript, which let's be real, this has been like a 10 plus year endeavor to get it to the point where it is today. Uh, so I guess we have to start now, but if we had that in CSS, you think that it would, would it get better respect? Would it get better? Like adoration? Would you think people would be like,
00:33:05
Speaker
Oh, I wrote HSL and it's like, I can see the documentation up there and the values and it's giving me hints and stuff like that. And it feels more solid. Do you think that would get people on board or do you think it would still be like, Oh, what is this thing? No, they would not. It would not magically get the respect. No, that'd be lovely. But I think it comes down to more like what people are interested in, what they think they think they do.
00:33:34
Speaker
the concept of design and language. People go to school and they don't learn the verbiage for design. They learn the verbiage of, and so that's why CSS is kind of frustrating. So many concepts in CSS are hybrid computer science design. And so they don't know the design side. And so they just go, it's dumb. I don't get it. I don't know, like naming. They're like, I don't, I don't know how to, I'm happy naming. Okay. This is the spicy tweet I made a couple of weeks ago. It was like, we're happy naming our JavaScript functions and our variables. And we do it all day in a file.
00:34:05
Speaker
but no way do I have to name a CSS class. It's where I draw the line. I will name my database and all of my columns and rows and everything, but not a CSS class. This is so funny to me. I'm like, why are the 99 other things you named today not annoying? And then you're like, this one. I'm like, okay.
00:34:33
Speaker
So no, I don't think types would magically fix the way that people avoid designing stuff in their code. They just, they're just like, they just repel it because they don't want to, I don't know. I just don't think they want that badge on their computer science resume for some reason. They think it makes them less hardcore. And I'm like, all right, whatever.
00:34:54
Speaker
your job is going to get taken before mind by AI. So I'll just be over here. It's true. AI has not really gotten CSS right yet. So the chaos that CSS has to live in the context that we have to mentally think about is way more than just a server. It's way more than just the TypeScript
00:35:12
Speaker
Analyzer and compiler and stuff like that. We have to appease four different browsers, six different screen readers, people during the night and the day with different types of require the matrix that we have to fulfill. It was also part of I think why people don't like CSS. It's so much harder to be done.
00:35:29
Speaker
And they like being done. So there's this bit of, so we should have a whole episode called, like, why don't people like CSS? I would love to do that. And one of my theories of why people don't like CSS is that CSS is the language that connects web design with web development. So even if you build something that's functionally good in CSS, if it doesn't look great, if it doesn't like pop,
00:35:54
Speaker
You feel it and it sucks. And so you're like, like I built that layout, but it's all in hashtag F zero zero, you know, or it's in just, I don't know color theory. I don't know. I don't even just know how to pick good colors. I don't know how to pick good fonts. I don't know all that type of stuff. And so I, what I think is, and as
CSS's Subjective Design Challenge
00:36:11
Speaker
humans, we very much good designs, you know, break the grid. They do things that are a bit unorthodox, but in a very natural way. And it's one of those things where it's like, you can't,
00:36:23
Speaker
define what a good design is, but you can point it out when you see it. And I think doing things in a very formulaic way will get you far in design and the points are clean, minimal, good. But in terms of elevated design, it has to make controversial decisions. It has to have a unique perspective of doing something that is more than what a computer can do or it could think of, in my opinion.
00:36:51
Speaker
Yeah, it's just more subjective, which is frustrating in comparison to just making node happy, right? If you're making a server, it's easy to make the one consumer of your code happy. And it's a lot harder when you have people and multiple browsers and accessibility screen readers and all these different content.
00:37:11
Speaker
way more hard, which is fine. I do want to end really quick, though, that CSS is working on functions. And I was helping to find them. And I was like, everybody loves TypeScript so much. So I made a CSS proposal, it's called at fun, so you can define a function, right? Have fun. I like it. Okay. Great lead in. Yeah, it's a great lead in.
00:37:30
Speaker
And then the way that you pass parameters is just like TypeScript. So you've got like an open up parentheses. Inside of there, you've got curly brackets that de-structure them and allow you to define a default value or whatever. And then you put a comma, another object that represents all the types for those parameters as they come in. And then you can do your work inside of the function curly brackets there. It looks a lot like TypeScript and it would be in CSS, so it would just be kind of fun. So that was
00:37:57
Speaker
It could be kind of nice having people coming from TypeScript going to CSS and be like, oh, this function is just like how I wrote it over here in Dino. That's fun.
00:38:05
Speaker
Well, I guess to recap today's episode, this was not the episode we thought we'd have, but it's the episode we
Balancing Types and Creative Coding Freedom
00:38:12
Speaker
got. Uh, and I, you know, I like it. We, we started out with a TypeScript. Adam doesn't like TypeScript. We've had this discussion for years. Uh, I keep using it. It's like I'm eating my greens and I don't like them. I'm like, ugh, broccoli's gross, but I totally built my side on Dino. The people who do this are not smart at all.
00:38:34
Speaker
I can't stand them. But TypeScript, though, has the types are good. You just aren't a big fan of being inundated and overwhelmed with types and being restricted by types. I want a computer to do the computer stuff, which types are very good for it. And they're lightly good for me. Like I want to be as human as possible as a coder, not as robotic as as possible. And I think a lot of
00:39:03
Speaker
people, the more advanced and the faster the application that they write and the more intense, the more low level they get, the further they get from the human side of all of this. And the more they get into their appeasing, the bare metal of the thing. They're like, oh, I know how it works. I know how the brain of this machine works. I'm just going to do this slight little thing to do it. And I'm like, that's not as approachable and accessible or futuristic as me
00:39:27
Speaker
kind of like AI, I guess, is just me being able to articulate to it in a very natural way and have it work out all the details. The more advanced we get shouldn't be me devolving my brain to be more like a computer. It should be the computer getting far more advanced to understand my intent and translate that into code. I mean, that's what I think we're, that's what we really want. And so I just feel like some of this is like a step backwards for
00:39:50
Speaker
Because we were looking for a challenge. We were like, oh, we made a whole bunch of apps. We wanted to be harder. Let's make it harder. So let me see if I can. I think I have the right characterization then of your stance on TypeScript. Correct me where I'm wrong here. Is that you think types are good, but the responsibility of a system, of the computer, and they are to be served to you as help. Like, hey, this is kind of how this thing looks, shapes, and feels.
00:40:17
Speaker
But when it becomes the human's responsibility to start instructing their own types so the computer can understand them, that's when things fall apart. Like we should be handed types. We should be the types of responsibility for a computer, not for human minds. And TypeScript is something that makes types way more of the responsibility of a human mind. And it's something where your system has to adhere to something you think a computer should really be doing.
00:40:41
Speaker
Yeah, this is why you won't see me writing Rust. I'll study Rust, I'll look at Rust, and I'll be like, oh wow, this is like hard mode TypeScript. That's why I'm not interested in that at all. You know, like why would I want to spend two hours writing one function, making sure that it's not ambiguous for this weird little Rust compiler when I could just write the function in like 30 seconds in JavaScript. That's the same thing.
00:41:06
Speaker
but maybe it's not as fast, I guess, because I didn't explicitly type out everything for the computer. So it's like, those languages seem dumber. They're more powerful for the sake of me explaining more versus me having to write very little and getting, so anyway, this is, that's what I mean. I'm like, if we're gonna advance in this, I feel like some of these things aren't advancements. They're advancements in performance for the trade-off of writeability, approachability,
00:41:35
Speaker
You know, these things are not easier. They, I mean, they might be less ambiguous, but that does not make them easier. Um, a lot of people say that about it. It's like, but, but the ambiguity, I'm like, yeah, but the amount of things you had to spell out around this thing is it's too much. I know what you mean. There, there are types, I get pull requests for a bunch of libraries I have written in TypeScript and people are like, excuse me, the type projection of this is not correct. It needs to be T or K to projective R where this is to that and reflected to this. And I'm like,
00:42:06
Speaker
Well, I'm going to accept this because it didn't care. And they seem a lot smarter than me. So I'm like, right, of course. That's what I meant to do. And there are times where I'm writing TypeScript, too, where I know the code works in a pure JavaScript runtime format. But I have to spend my time convincing
00:42:30
Speaker
you know, TypeScript. It's like being a kid and telling your parents like, I'm going to go out tonight with my friends and we're going to go to the basketball game. And they're like, define friends. Yes. Define friends. What are your friends? Who are your friends? They're like three friends. It's, it's Molly, Susan and Bob. And they're like, who's, who's boss father? These are
00:42:51
Speaker
And you're like, all I wanted to do is go out with my friends and now I'm writing a contract. You were going to go to the basketball game and come home. You were going to be correct, but they did not believe you. So you had to define everything about your night and all the types, the contract and everything. But if you wouldn't have done that at runtime, you just would have done it. You would have gone in the car, gone to the basketball game and came back.
00:43:14
Speaker
I'm telling you, we need a Portlandia for tech that like we act this out. Like I want to show a night to two different people go out for the night. One is JavaScript. The other is TypeScript. And I want us to see their nights, you know, just like, what's it like living this life?
00:43:30
Speaker
Oh man, I could talk about the subject so much. I love the freeway. I love getting on the freeway because I'm like, this is an untyped working system. It's super chaotic. Can you believe it? It's like people would look at this and be like, it would never work yet. There it is. Wildly successful. Imagine if it was a typed system. Do you think the typed highway would somehow be better where it was all formal and contractual or would it be way slower in a weird way? Anyway, I just like these things. These are fun to think about.
00:43:57
Speaker
You know, I, I'll do the recap so we can get out. We, we, we, you know, behind the scenes, logistical information. We were like 30 minutes today. It's going to happen. And then now we, I was like, you know, the TypeScript episode, surely that will go 30 minutes. I'm glad though. This is the, the, the, you, you did give me a little bit of a, like, uh,
00:44:18
Speaker
perspective shift with the whole parental, like I gave my own analogy that defeated some of my own points here. Uh, cause here at the bed at CSS podcast, we have an open mind. It's true. Yeah. But so you don't like types. Oh, any so you like types, not a big fan of being inundated swimming and having your life dictated by types. They're helpful, but they shouldn't restrain everything you do.
00:44:42
Speaker
However, it doesn't mean types are a bad thing because in CSS we have types. When we write properties, they expect certain values, certain types, so to speak. And we can access those things in JavaScript with the typed OM, which is kind of like the DOM, but you get the actual values back through an object format.
00:45:05
Speaker
I imagine I will overlay this with like actual good video of what this does because in my head, I've only slightly used this before, but we get values back with actual types and better information. And then on top of that TypeScript itself, TypeScript CSS itself has the app property.
00:45:24
Speaker
property, which if we imagine it's a, which is a formal way of dictating what is the value, what is the type of a custom property? Cause with VAR, I can say this is a grab bag of things. It's a type any, but with a property, I'm like, whoa, hold on. Now we're going to be very specific to as, as this works, because there's lots of benefits of that. You have the expectation of what it's going to be, the definition, the contract of it. And then also there's some type safeness in the sense that we can have fallbacks and do smarter things. If they, if the values are botched.
00:45:53
Speaker
Correct. Am I, did I get that right? Yeah, it's awesome. Okay. I want to recap one thing, which is I have a YouTube show that I did like two or three years ago. It was called CSS and JS and it was CSS, not in, but and with like an end and I show how I recreate really basic CSS with JavaScript in a functional programming way.
00:46:11
Speaker
So it's like, oh, you do .button, and then you have a bunch of styles. I'm like, let's do that in JavaScript. And so I have to go find everything on the page, filter it by the button class elements, loop over each of them, extend their style object, and apply a series of styles to them. And then we go through, and there's like five episodes. It gets really quick, or it gets really deep. And some of them do like map, filter, reduce, like craziness. But I have a challenge to the listeners here. If you like TypeScript and you're interested
00:46:40
Speaker
And what I just described, I would like to see a TypeScript version of that, re-implement basic CSS stuff in TypeScript, typed so that you only accept values of a certain type that properties that you style have an accepted set of types that they accept, and do the looping and do the sort of walking the tree and applying styles to the matches.
00:47:02
Speaker
by hand. And I think you'll realize just how much CSS is doing for you. That's just like every programming language you have. It's just so ridiculously refined and minimal. It's awesome. You get the query language with the ability to mutate and loop all within this succinct syntax. And I think it helps people realize what CSS is actually doing for them because it can be kind of easy to throw to the wayside. But anyway,
00:47:32
Speaker
I mean, that's like, you know, like, I guess we'll never in this episode, but I do there, there's so many, so I've spent like my whole life, uh, life boss, 10 years of my life, uh, more than that working in databases, uh, did my degree in, uh, databases. So I spent my whole life doing like, stop saying whole life. It really has not been, I was a child once.
00:47:53
Speaker
But I spent a long time studying SQL databases, working in SQL databases, and then I worked in NoSQL databases, which was literally day one of working at Firebase. I was like, oh, what? OK, this is different. But one of the things I've found working very much on both sides of the very different perspectives of that technology is that you'll have people, I'll show an example of doing something in NoSQL, especially writing some sort of query or something like that. And they'll be like, wow, that's a whole lot of work.
00:48:21
Speaker
comparatively what I would have written with the SQL query. And then I say, well, you know what you're forgetting is what did it take for you to structure that data? Like what query, what DML operation did you have to write to actually create your table to update that? Oh, did you have to add a column? Is it non-nullable? How did you predict the future?
00:48:39
Speaker
Yeah. Right. And don't be wrong, there are strengths to that. It's not bashing that, like, no, SQL is better. No, they are both great technologies with different purposes. But to say, in SQL, that's easier. That's true. But what did you do to make it easier? The difficulty that it took to make that line, we can't forget that that exists. We can't compare what we think is apples to apples when it's not. It's very much apples to oranges. And it's like, you spent so much time doing this one thing. And that's great.
00:49:08
Speaker
but we have to remember that exists. And yes, in NoSQL, there's like, hey, I may have been able to structure my data easily, but now I might have to write a more complicated query or may I have to join data from sources that, you know, there's just so many different ways of reasoning about it. And I think the same thing you can say with JavaScript and with that example, where people are like, oh my gosh, why would I have to do this whole thing with the cascade? This is also complicated. And you're like, fine, go do it in JavaScript then.
00:49:33
Speaker
And then now remember how difficult that is. Yes, you may like the syntax more, but let's look at lines of code. Let's look at complexity. To end the podcast with quoting Rich Hickey, simple and familiar are two different things. Nice. I like how you kind of wrote it down and whispered the quote. That's good. I didn't mean to. Got to bring it down.
00:50:00
Speaker
Everybody, thank you for joining us on the Bad at CSS podcast and, uh, let us know we're, we're actually a real podcast. Now we published, uh, if you're listening to this, you, you've, you've seen it, but we're way ahead of ourselves.
00:50:14
Speaker
for the times where we won't be. So let us know the kind of things you want to hear because we would love to hear that and discuss them. And, uh, yes, this is your safe place to be bad at CSS and we'll see you at types and we are bad. Oh, that is for sure. So we will see you all on the next one. Peace. Smell you later.