Linode – Our cloud of choice and the home of Changelog.com. Deploy a fast, efficient, native SSD cloud server for only $5/month. Get 4 months free using the code
changelog2020. To learn more and get started head to linode.com/changelog.
Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com.
Click here to listen along while you enjoy the transcript. 🎧
Welcome back, everyone. This is Jerod. I’m your friend, and I’m joined by two of my friends. Nick Nisi is here… What’s up, Nick?
And we have Divya here… What’s up, Divya?
Well, today we have a very special show… We always say we have a special show, but this time we actually mean it, because we have a mystery guest, and we’ll be hearing from that guest shortly. But first, we’re gonna turn to the news… There’s been a lot going on, especially in TypeScript world.
So now I’ll turn it over to Nick to talk for the next 30 minutes. [laughter] You’re on it, Nick. TypeScript. What’s up?
Not too much, actually… Just TypeScript 4.0 being released, which is pretty big news. But TypeScript doesn’t really follow semantic versioning, so TypeScript 4 is just the version that comes after 3.9… So there’s not crazy big features in it.
So it’s not a big release, it just looks like another release. [laughter]
What’s a tuple, and how do you say it?
Good question. I don’t know the answer to the second part of that… [laughter]
Pick your poison.
How do YOU say it?
I don’t know, I’m asking you. I think I say it tuple [topple]. I’ve also said it tuple [toople], so I’m on the fence…
I’ve always said tuple [topple]
Is it tuple [topple]?
I don’t think I’ve ever heard tuple [toople]…
I think I heard tuple [toople] first.
It’s like tupperware. Tuple [topple]
Well, tupperware has two p’s.
[04:00] Hm… Argumentation. Anyway, it doesn’t matter… It just matters on podcasts because we have to say it out loud, and most of us just type it and never have to think about it again. But forgetting how you say tuple, what is a tuple? Nick?
So the way that I think of tuples is that they’re like a fixed-length array. You can use that as like a return type, and then you’re technically returning two things, just wrapped in an array… Or more; two or more things. You know, it’s two-ple…
See? Now you’re making arguments for tuple [toople]… [laughter] Although that would be misleading, because you can have more than two elements in a tuple, right?
It’s true, yeah.
That’s why it’s a tuple [topple].
You can return those, and then with destructuring, array destructuring, you can just act like you did actually just return two things. So the actual developer experience of working with them is much better.
Okay. So what’s variadic mean? Or you already explained that and I was over here, trying to figure out how to say tuple…?
I did not explain that.
I’ve probably missed it, too…
No, not at all. I’m trying to remember what variadic means. I don’t remember from a computer sciency background standpoint…
…how to explain all this, so I’m very much in fear of explaining them incorrectly.
In mathematics and in computer programming, a variadic function is a function of indefinite arity.
I just said that off the top of my head, I did not read it off Wikipedia…
My assumption with variadic is like “Is it varied? Like variables? Like varied variables?”
Yeah, it’s about argument length. How many parameters a function takes. So if there’s two arguments you can pass in, then the arity is two. What variadic means according to Wikipedia is indefinite arity, meaning it might take one, it might take two, it might take three… So that’s the idea with varying - it’s varying-length arguments.
Yeah. So with variadic tuple types, you can specify that without having to specify all of the possible combinations of that… Because as you said, it’s indefinite, so you can’t really do that.
I wanna say that I was listening to a Changelog podcast where they were talking about function overloading, and specifically only going out to eight arguments, because that’s probably as far as out as you’re gonna go… And then anything after that, the types are actually incorrect. But with this, the types will be correct indefinitely, because you can define and use the spread operator within your tuple type, and tell it that “This is going to be so many of this, and then so many of this”, and concatenate them together to give you the full tuple type.
So then the idea would be you don’t have to determine all the arguments that it takes. Because I think in TypeScript - isn’t there a way in which you define a function, and then you sort of overload it as like “It does this, and then you can do this…” So with this particular feature then it means you don’t have to do that anymore? …it just allows you to write a function without having to overload it (I guess is the word) with all the possible combinations?
Yeah. One example that they give is you’ve always been able to use a rest parameter in there, to say “This type is going to be an array that has a number and then a string, and then however many strings after that, or booleans after that”, or something. And the big difference here is that you can use those rest operators anywhere in there. So you can say that you’re gonna have so many strings, and then so many numbers, and then follow it by like a boolean. That way you have a variadic length of how many arguments you can actually pass in there, or return from there, or whatever, to match that type, and it’s not going to be limited by just overloading to hopefully take care of every possible use case that you would have in your app.
What else is new?
[08:01] Another cool thing with tuples is they can be labeled as well. So before, in TypeScript 3.9 and before, if you were going to say “This function is going to return you this tuple type”, and it would be a string, followed by a string, followed by a string, and as you’re looking at that in your autocomplete in your editor, you’re just like “Well, what does that mean?” I’m getting three strings back, but now I have to go research what that actually means.” Well, you can now label those types; you can say it’s string:foo, and string:name, and string:lastname, and then your editor will help you determine what those are… So it’ll just help with autocomplete and overall understanding of the data that you’re working with.
So the label represents the kind of string or the kind of data that you are expecting that string to contain? Like, this is name? It’s a string, but it’s a name.
And it’s really for tooling purposes.
I think I had that backwards. It’s not string: whatever the name is, or the label; it’s the label, colon string. Just like you would do with any other type in TypeScript.
Okay. So that’s like a lot of other typed languages which allows you to do that. So you do like parameter and then type, and then parameter and then type, kind of thing…
What else is new?
The third big thing in there is probably the short-circuit assignment. So we have that with several different logical operators, like plus and minus, where you can just say A plus-equals B and that will set the value of A to be whatever A was, plus B, and give that as the new value. So that’s existed for like plus, minus, multiplication, division, exponents, things like that. Now it works with the And, Or, and… I’m forgetting the name of the two question marks. What is the two question marks?
Double pipe? Oh, two question marks…
Nullish coalescing, yeah. So it works with those.
Very nice, Divya.
I know all the facts. [laughter]
This just feels like an all-out war…
You coalesced that knowledge…
It feels like an all-out war on ternary operators. I don’t like ternaries a lot, and people set crazy ESLint rules to say “Don’t use ternaries” or “Don’t use too many nested ternaries here.” And what are you doing, a lot of times? …you’re checking to see if A exists, and if it does, then do something with it. Otherwise, here’s B. And this is just a way to condense that down. So now I can sneak in more secret ternaries and get those in.
I’m for it. See, I’m anti-ternary, but I’m pro secret ternary, so… [laughter] What else is new?
Are you just gonna go down the feature lists? Tell us everything on there, so I don’t have to read the doc… [laughter]
Nick reads the docs. It can be a whole segment.
Yes! It could be a whole segment, where you read the docs you… so you know you’re not gonna read it…
That’d be pretty cool.
There has to be an audio version of docs, right?
There should be… I think we’re just the team for the job.
As you can see, there’s not a ton of big things in TypeScript 4. There are a lot of other small things, like editor improvements, refactoring improvements that’ll happen within VS Code, and presumably other editors… But one thing that I’m really excited about, for some reason, is this deprecated label that you can put in comments. So you can just, say, in a comment, put “@deprecated”. And then in VS Code specifically - and probably other editors - when you try and use that method from then on, it will let yo use it, but it will have it squiggled out, so that you can visually see right in your editor you’re using a deprecated method.
That’s so cool!
[11:45] Yeah. That always seemed like one of the main things that I would want decorators for… In my very limited thinking about decorators, it’s like “Oh, I wanna be able to decorate this method as being this way”, but that always generated a runtime result, like a console log that said “Oh, you’re using this method. Maybe you should use this method instead”, whereas this is at edit time, in your editor. This is squiggled out because you shouldn’t be using this anymore.
That begs the existential question, “Why would you write a method that you don’t want anybody to use, Nick?”
Well, because you want to improve it with a better method, right?
[laughs] I prefer all my methods to be useful, but to each their own. [laughter]
You wanna give people a very safe upgrade path… So this can just gently warn them, “Oh, all of your code is squiggled out, and it’ll be like that for maybe the next year, and then after that, then it’s gonna break. But we warned you, and we put it in the editor…”
“We warned you… Put your to-do comment here and then ignore it until everything breaks later…”
I like that as an upgrade path. It’s really smooth…
Yeah, that’s cool.
…because oftentimes you just don’t know that it’s gonna be deprecated unless you read the docs and then it tells you it will be deprecated… And within the code there’s no way to tell, to make that connection. So this is really nice.
And as you’ve already stated, nobody reads the docs, so…
…throw ’em a bone. What else is new? is that the end of our list?
I think so. Those are the main things. There are some things where it will automatically – like I said with the editor, it can automatically put in the conditional… Man, I can’t think of the term for these new things. What’s the question mark dot (?.)?
Come on, Divya…
I don’t actually know that one…
Conditional. It’s just a conditional operator, right?
Incorrect. No, I don’t know…
[laughs] You don’t know the answer, too?
I’m pulling out my JS Danger soundboard, so when you guys figure it out, I will give you correct answers.
This is slowly turning into an episode… Yeah, I don’t know.
In TypeScript-related news there is a cool new project from the Airbnb team called ts-migrate, which as the name implies, is here to help you migrate your large codebase to TypeScript. They have been using this inside Airbnb to migrate a very large project with this tooling. Pretty cool stuff, right? Did you guys look at this?
I did. It looks really cool.
Insightful analysis from Nick. Divya, what do you have? [laughter]
Wait, so how does it work? What’s the process in which it would work?
It’s unclear to me if this is like you run these step-by-step, or all at once, or how that works… But that does seem like the – they’re utilizing code mods to do that, which is really cool. Code mods are so cool.
They are. I’ve not used them a lot, and I just wish I do more, because they’re really useful.
Yeah. Have you written any?
I’ll link that in the show notes. it’s a really good talk.
[16:12] Yeah, they’re really cool. Once you get your head around the AST, then it opens up so many possibilities for things that you can do… But that could be a tough thing to do.
Yeah, I think it’s also understanding the AST itself, and oftentimes – I understand ASTs, but every time I use the AST Explorer, which is the tool that people use, it’s so confusing. I don’t know how it works, and it’s really frustrating. So if anyone has any tips on how to use that, that would be swell.
And then the AST that actually gets generated is dependent upon the tool that you’re using to analyze it too, so…
…TypeScript might be doing it one way, and Acorn, or Esprima - all of these different parsers might do it in different ways. And then figuring out how to actually traverse that code, and look through it and then make changes to it and then output it - it’s all kind of crazy. But there’s so many cool tools out there that will not only allow you to introspect your code like this, but it will then allow you to make changes and output the code… And there’s so much to that part there that it’s crazy… But you could just take the code and output it, and that might not be good enough, because you might have changed all of your tabs to spaces, or your single quotes to double quotes, or things like that… So you actually have to have a tool that is trying to match the style that it was originally, so that you’re not making too many crazy changes. It’s a fun problem.
Yeah. And then it makes you wonder, “Oh, should I just have done this by hand, faster?” [laughs]
Well, the Airbnb engineers did not wanna do it by hand. They have over six million lines…
Well, it’s a large project…
Yeah. At this time they’ve done 86% of their six-million-line frontend monorepo… They’ve converted it using ts-migrate, and they’re on track for 95% by the end of the year. So we are reaching out to this team; we’d like to do an interview with them and talk about all the nitty-gritty details, but that’s it for now. We do have some real-time follow-up from Nathan in the chat. Hook it up, Nick… The question mark dot (?.) operator is optional chaining.
So that’s what that’s called, so thank you, Nathan for getting that. You do get 500 points, congratulations.
In other news, which should be more fun news and maybe not quite as useful news…
I’m not really sure how you do a “404 Not Found”-themed video game… But Divya, you’ve been working on some video games, so do you have any ideas? What would be a good game you could make?
I think that – this is top of mind, because I’ve seen a couple of games come out related to… For example, Microsoft Edge created that surf game recently; I don’t know if you saw it.
I did not.
[20:11] It was inspired by the Dino game that’s on Chrome, when you essentially are not connected to the internet - you can play that Dino game.
Oh, that dinosaur, yeah.
Yeah. And when you’re on Edge, there’s a game that’s called like a surf game, which is essentially you’re surfing, because it’s surfing the web…
Ahh, I get it…
Yeah. But you’re like a little surfer person, and you’re just like surfing as you’re offline… Which I thought was really cool. That makes me think of like – it’s sort of related, because it’s not really 404, because you’re completely offline… [laughter] But that’s one of the really fun ways in which you are – for instance, the thing that comes to mind is like, when you encounter a 404, instead of just having a 404, it’s like “Here’s a game you can play. We don’t have a page, but play this game that’s really fun…” Which I think is cool, because it kind of takes that – it’s surprising, it’s unexpected; they expect (I guess) a negative feeling, because they didn’t get what they wanted, but they got something else, in a way, which I think is kind of an interesting way of introducing a game… Because often in the gaming industry that’s not how – people seek it out; you don’t just encounter a game.
Yeah, I kind of took it as something that you might put on a 404 page, in a similar way to the Chrome dinosaur when you’re offline, or what GitHub does on their 404 page, which is the moving background with the octocat falling, or something…
It made me think of Where’s Waldo, because like “What’s games where you can’t find something?” Where’s Waldo.
Oh, I like that.
You know, you’re trying to find him, and you can’t find him anywhere. It might be hard to squeeze that in a 13k because it’s so visual, but I’m sure you could find some sort of way of procedurally generating non-Waldo characters, and then maybe have one Waldo in…
Actually, you could figure it out. There’s this Netflix show I’ve been watching called High Score, which is essentially about–
Yess!! Are you watching that, too?
It’s so good!
Ahh, the nostalgia…
Did you see?! There was one of the games where he was like “I was creating this game…” I forget what the game was called. And he goes like “I needed combatants in it”, and then he couldn’t figure it out, because the memory of that cartridge was so small and he used up so much of it… And he’s like “Oh, there was one way I could squeeze more memory out, by XORing the bits! [laughter]
Yeah… Those guys are so leet, you’re like “Oh, my goodness…”
So I think anything is possible, really. I mean, if those guys were able to create very interactive and compelling games with way less space than we have now…
Right. Meanwhile, Slack is using 16 GB of RAM, and just enjoying every last bit of memory… No offense, Slack, but you had it coming…
Yeah. It’s Electron.
It takes up a lot of space.
So if you are into games and you wanna make a game, you can make a tiny little game, squeeze it into 13k. There’s some pretty cool prizes. They have 20+ different licenses, plans, accounts etc, all those kind of things. You can win a Magic Leap One. Pretty cool stuff, so check it out. We’ll link it up in the show notes. And if you don’t wanna make a game, at least you can wait till September - I believe it’s the 13th - and just go play all the awesome ones that other folks come up with. That’s usually what I do. I spend about 20 minutes just working around and being amazed by what people create, and I create nothing myself.
That’s really cool. I think one famous thing that came out of something similar to that was there was a – I could be getting this wrong, but I could have swore that there was a Java 4K, because you can’t do anything in Java in 1K. And Minecraft came out of that. Isn’t that true?
Did it really?!
I think so.
I hope that’s canonical, because it’s not worth spreading rumors… But that’d be awesome! It came out of Java 4k? And if not, we’re just fake news over here. You guys can fact-check that in the chat room. Nick, you can look it up as I move on, and we’ll get a real-time follow-up - did Minecraft come out of a Java 4k competition?
It said Minecraft 4k was an edition of Minecraft, developed for Java 4k.
Uuh… A slight shift in history. So there was a Minecraft version of–
It was a version, yeah.
…inspired by Minecraft, but not the place that Minecraft was invented. Okay.
So Divya, you get success, and Nick you get a wrong sound, because that was incorrect. In other news, we have a brand new - I don’t know if it’s brand new, but new to me - opinionated static site generator for Svelte. So if there’s any Svelte fans in the audience, you can now check out Elder.js, which is exactly what I described - an opinionated static site generator and a web framework for Svelte, but it’s built with SEO in mind. I’ll link that up in the chat, and in the show notes as well.
It’s just cool to see more projects rallying around and building out an ecosystem around the shiny, new framework in the world of Svelte. Has anybody checked out Elder, or have a plan to?
I don’t use a lot of Svelte. I’m just curious about the naming… I guess anything is named oddly… Like, why is Eleventy called Eleventy? Who knows…?
Their mascot is an old man with his finger pointing to the sky… Kind of like “old man yells at cloud”, but he’s happier than that… So maybe it’s just like “Old people know how to do SEO”? I don’t know. I don’t know why you would call it Elder.
I always assumed that all the names of frameworks are picked based on the mascot… At least I know that was the case for Pug. They picked Pug because they were like “We like pugs, and we wanted a pug mascot, so… Pug it is!” And it was called something else before that, and I cannot remember…
Jade, that’s right! Yeah, and they renamed it, I don’t know why. I think they wanted a more compelling animal mascot, or something like that.
So things that Elder provides for you - build hooks and a highly-optimized build process, and it’ll span all your CPU cores. So while Slack is using all your memory, Elder will use all your processors, and build it as fast as possible. It’s built for large sites, and the SEO of sites of ten to a hundred thousand plus pages. It uses Svelte everywhere, including your SSR templates… And as well as partial hydration. So check it out. If Svelte is something you’re interested in and you enjoy static sites/JAMstack things, maybe Elder will get you started.
This is like hybrid. This is static site generation with server-side rendering. So they prerender and then they hydrate from the server.
Yup. So I said JAMstacky, or JAMstackish, because it’s not pure…
Yeah. Because I think JAMstack is more prerendered. I guess that it’s like – yeah, it’s an evolving term, I guess, but…
It’s a hybrid, yeah.
It’s a hybrid.
So these cheat sheets are out there on his website, Elijahmanor.com. We’ll provide them in the show notes for those who want to bookmark or print off. They’re pretty well done.
…but it’s a good cheat sheet for that.
Alright, there is your news. We’ll be right back with a special mystery guest.
Wow. Well, thanks so much for joining us. Horse JS, everybody. Horse JS is here… A little birdy actually told me that you’re a big fan of JS Party.
Hah! We ask ourselves that same thing every day… But I’m curious, what’s your favorite episode so far?
I think so… Didn’t we? Yep/Nope? Oh, wait… No, we kept the name. No, wait - did we?
I think we kept it.
I think we kept it, yeah.
It was inconclusive, so we just left it alone.
It was inconclusive, yeah. We couldn’t come to a conclusion.
So we went with TypeScript then.
That was one thing we all unanimously decided not to do… [laughter]
I mean, I think that was the first thing we decided. It was the first point that came up, and we were like “No. Dismissed.”
I’m glad to hear you liked that episode, Horse JS.
Horse JS, your voice keeps changing on us… What’s going on?
Well, it’s kind of hard to listen to, honestly…
But anyway… What are you doing? What have you been up to?
A Rust stan account? I hadn’t heard anything about Rust. What got you interested in Rust, Horse JS?
What should they learn…?
Wow, that sucks. So did you learn anything from that?
Everyone knows that. Tell us something though we don’t know.
Oh, really? How about MobX? I heard that’s pretty good.
I have to know… What’s your reaction to all this TypeScript type?
No, he said TypeScript, Horse JS.
I guess that’s your Reac-tion to TypeScript?
That’s your view.
There you go. Well, I guess that’s a few frontend things/takes. What about the server side? Do you have anything to say about server-side JS?
Oh, really?! Why? [laughs]
So, first you say it’s the most exciting thing about Deno, then you say it’s gonna be dead in two years… You’re kind of contradicting yourself quite a bit here, Horse JS.
Wow, you seem so negative. There’s so much hate in your heart. Why?
Okay, that’s a start, I guess… You like Array reduce( ), very good. Anything else you can tell us that’s good?
There’s a lot of funny people. Maybe not right on this show, but… [laughter] There’s a lot of funny people. You’re kind of full of yourself though, aren’t you?
Wow… [laughter] Okay, Horse JS, I think you can air your grievances on TikTok. Maybe it’s time for a new platform. Any final words before we let you go?
Well, you heard it here first - Horse JS speaks, and they say “Immutability is sometimes.” I guess thanks for joining us, and we’ll talk to you again next time, Horse JS.
He didn’t say bye. He just mic-dropped and left. It’s so rude. Unacceptable. We’re all friends here.
That’s not even a sentence. [laughter]
There was a project that I’ve found recently… It’s a project called Metatyping, and he essentially wrote functions and algorithms in TypeScript. So he’s just using various TypeScript hacks. Which is insane.
I was looking at that. That is amazing.
I don’t feel like this would help you learn TypeScript. I mean, it really would, but…
I think it really would. I honestly think it does. It’s a bit intense, but…
Our transcripts are open source on GitHub. Improvements are welcome. 💚