August 2nd, 2021 × #javascript#webdev#frameworks
Hasty Treat - Git the Latest - New Things In Tech - CoPilot, Petite Vue, Stackblitz, Web3 + More!
Wes and Scott discuss the latest and greatest in web development including GitHub Copilot, Next.js 11, Astro, Notion API, Petite Vue, Stackblitz, Solid JS 1.0, Stately, and Web3.
- Hot code push for latest web dev stuff
- GitHub Copilot AI for code autocompletion
- Next.js 11 new performance updates
- Astro for shipping less JavaScript
- Notion API now in beta
- Petite Vue for sprinkling interactivity
- Stackblitz for node in the browser
- Solid JS 1.0 released
- Stately for state machine visualization
- Web3 JavaScript API overview
Transcript
Announcer
Monday. Monday. Monday.
Announcer
Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toro Loco, Tolinski.
Scott Tolinski
Welcome to syntax.
Scott Tolinski
In this Monday, hasty treat. We're gonna be getting latest stuff. This is gonna be a hot code push is what I wanted to call it. Wes wanted to call it get the latest, and I think that's what we're going with.
Wes Bos
Hot code push
Hot code push for latest web dev stuff
Scott Tolinski
was cool, but it, like, it it didn't make sense what that was. It's a little too much. For those who don't know, hot code push was like a an a name for a hot module reloading at some point. And people were just like, this name's a little weird. Actually don't know the history there. But either way, what we're gonna be doing in this episode, which is potentially going to be a reoccurring segment, is we're gonna get you the latest stuff Of all the new stuff that's coming out, the hot new tech, this is August for 2021.
Scott Tolinski
This is some new stuff that's come out over the past couple of months. Since this is the 1st episode that we've ever Done like this as a hasty, we're probably gonna be get covering some stuff that came out, you know, a couple months ago or a month ago just to cover our bases on that stuff. But if you enjoy this format, let us know, and we will, bring in these more to you more frequently. The idea here is that We just talked briefly and introduced you to some new and exciting things that have come out that we're excited about or interested in. My name is Scott Tolinski. I'm a developer from Denver, Prado, and with me as always is Wes Bos.
Wes Bos
Hey, everybody. I'm excited. There's some really neat stuff here, and often we get asked the question, Why didn't you talk about x, y, or z? And the answer usually is we either have, and you didn't listen to the episode, or we just don't have Entire episode to dedicate to something like that even though it's it's kinda nice to chat about it for 5 minutes. So that's what we're gonna do today. We got some really cool stuff.
Scott Tolinski
Cool. Before we kick it off, let's get into some of our sponsors. We have FreshBooks and Sentry. Wes, you wanna kick it off with FreshBooks? I wanna talk about Sentry.
Wes Bos
FreshBooks is cloud accounting software where you can log all your invoices. You can send them to your clients. You can send automatic Late payment reminders, you can hook it up with your bank and import all of your expenses automatically.
Wes Bos
You can Track all of your time. If you are a freelancer, small business, anybody who's accepting money from a client and you need to get your books in order, use FreshBooks at freshbooks.com Forward slash syntax for a 30 day unrestricted free trial. No credit card required. Make sure you use syntax in the how did you hear about us section. Thank you, FreshBooks, for sponsoring.
Scott Tolinski
Sick. And this episode is also sponsored by Century at century.i0.
GitHub Copilot AI for code autocompletion
Scott Tolinski
Now Sentry is the perfect place to not only track all of your errors and exceptions, but keep a long running tally about the performance of your website And be able to be delivered to you where you get a listing of all of the routes on your site and how slow or fast they are based on how many people have used them. You even get, like, a user misery score, which is like, okay. A 100 people have visited this page and 90 people of this had a slow experience. This page, Pretty dang miserable. You better, you better get to work on this page. There is something going on here. You're shipping too much JavaScript.
Scott Tolinski
Sign up today. Take advantage of all those performance tracking tools as well as all of their errors and exception handling tools that they're known for, all of that great stuff and more using the coupon code at Tasty treat, all lowercase, all one word, and you will get 2 months for free. Alright. Let's get the latest Stuff. We're gonna be starting off with the number one thing that's going to steal your job. Mister steal your job, it's GitHub Copilot.
Scott Tolinski
Now GitHub Copilot is basically AI powered auto completion is the way I like to think about it. And it did cause a bit of a tizzy when it was released For a number of reasons, but basically, what this thing does is it uses open source code that's on GitHub to learn about how code should be. And when you write your code, it gives you more advanced auto completion and then sometimes can really do a whole ton of stuff. Now for For those of you who don't know, I'm a GitHub star. Okay? So I got early preview of this thing, and I've been using it for, a little while here, maybe about a month. And It's very funny. When I was recording my last tutorial series, I had to be careful to shut it off because I didn't want anybody to see it. I wasn't allowed to show it off, but it has Done several things. It it has impressed me very, very much. Sometimes I was writing some like, almost like a switch statement in in Svelte. It's not as Is it just an if else? But, like, I'm running like a show this view, show this view, show this view kind of thing. And it correctly predicted every single one of the if statements By basis of my TypeScript stuff. And, like, I wrote 1 if this, and then I started to type else this. And it was like, oh, you're trying to do an if else for everything in this Specific, you know, string union type, and it just filled it all out for me. And you know what? That was pretty dang impressive.
Scott Tolinski
But some people are a little concerned that this thing is going to be so impressive that it will steal your job, and I gotta I gotta say no. It's it is basically like autocomplete. You still need a Programmer's hand to understand and craft this stuff. And for the most part, it's not even perfect. So you gotta know what you're doing to use this in the 1st place. It's not gonna steal your job, but it is really cool. There are some some pretty significant ethical concerns of, somebody described it Using other people's code is being like code laundering, and that is kinda iffy to me as well. I don't know how I feel about that just yet.
Wes Bos
Wes, thoughts on Copilot. Yeah. First of all, I'm not, popular enough to get access to it yet. So somebody at GitHub, please hook me up. So I haven't tried it yet, but I have tried a couple of the other AI ones in the past, and it it is nice. It's kinda like spell check on your phone When you correct something or, it goes to the wider you you type a word that is, like, a trademarked or copyright. If you type iPad or something, it will autocorrect The the correct spelling.
Wes Bos
Generally, spelling and search, those things have gotten significantly better because of AI, And that the next natural step is the auto completion in your actual code editor, so I'm really excited about that. I'm excited for, like, smart Auto completion to come because, like, the other day, I was typing something, and it was suggesting me opera CSS prefixes.
Wes Bos
And I was like, what the hell is going on where, like, a 9 year old, the browser hasn't even been a browser with dash o prefixes in, like, 9 years.
Wes Bos
Why is it still a thing? And I was thinking, like, alright. How do I take this out? And I was like, that's not the way to fix all of this stuff. You don't have to, like, continually be tweaking the The auto completion, it should be smart about it based on your existing code, open source code, all that stuff. So I'm I'm pretty excited about this.
Wes Bos
It's just another helping hand in building your building your applications.
Wes Bos
Yeah. It's like it's like your little robot Friend that makes it so you don't have to type as much. I'm in. Next thing we have here is Next. Js eleven got announced a couple weeks ago, and probably by the time you're listening to this, about a month and a half ago. A whole bunch of performance updates, some stuff to NextScript, which for loading third party scripts, that's always been a pain point of mine is how do you load third party scripts into a React application to make it easier with that. Some updates to Next Image brings it closer to what Gatsby offers up, which is really exciting to me. Plus, like, next image also allows you to use remote images, which is something Gatsby doesn't do. Love that.
Wes Bos
Create React app migration, not a big one for me, but that's helpful for a lot of people. Webpack 5, again, not a big Big deal to me because I just use whatever Next uses, and then they announced this thing called, Next. Js live, which we We talked about on a couple past episodes as well. I won't go too much into that. Yep. I think Next, continues to be the, the way to use React if you want server side Rendering,
Scott Tolinski
Next. Js 11, continues their excellence.
Next.js 11 new performance updates
Scott Tolinski
Next up is Astro at astro dot build. Now this is a really interesting tool that It was funny when it came out, people were kind of like another new thing. And, like, I don't I don't share that mentality. I I love new things. I think new things are pushing us forward. But Astro seems really super neat. Basically, it allows you to ship less JavaScript using, all of the frameworks you know and love, whether that is reactive use, felt, any of that stuff, and you can just use them. And what it does is it does more on the server side and ships less to the client side. And, you know, we often talk about these Islands of interactivity, and they say that directly. A quote from their website.
Scott Tolinski
If most sites only have islands or end of interactivity, Shouldn't our tools optimize for that? And so Astro's whole deal is basically taking your site that you're writing in JavaScript right now and saying, hey. Do you really need all this stuff? It's It's bad Santa be or the guy from bad Santa being you know, do you really do all this stuff? Wes, do you ever see bad Santa?
Astro for shipping less JavaScript
Wes Bos
I think so. Yes. It's fantastic, really.
Scott Tolinski
But, you you know, it's the same idea. Like, do you really need all this JavaScript? I don't know. I don't think so. And so Astro is just one more step Forward in that direction. Not to mention, you can use any any front end framework of your choosing.
Scott Tolinski
So hey. I haven't given it a try yet. It's from the the folks at Snowpack, and, you know, that means that I'm in. I gotta try it, but I haven't yet. So maybe I'll, maybe once I get settled in my new office, I'm gonna start doing some live streams where I can try out some new stuff. Maybe I'll, maybe I'll do some master live streams and give it a whirl. Next up is the Notion API.
Notion API now in beta
Wes Bos
Finally, Scott talked about using a third party API for his website probably over a year ago, but now Notion has a 1st party API in, in beta testing. You can grab your database. You can query stuff. You can list stuff. And Given how flexible Notion is and how the speed like, a lot of, like, my complaints about Notion were both the API and it was getting slow, Those things are slowly starting to go away, which is exciting because of how flexible a tool Notion is.
Wes Bos
And now out the other end, you can also use the API. So I'm pretty excited about that mix. I was excited to see what Developers use this for because Notion is almost like both like a database and a CMS that you could use for very simple projects or even even a blog.
Scott Tolinski
Yeah. You know, we use Notion for a lot of internal documents. But, like, even, like, the, We have, like, our our level up tutorials creator, not our form, but, like, our level up to our tutorials creator thing that says, hey. If you're creating a course for level of tutorials, here's your guide. Right? That's a notion right now. But wouldn't that be really cool if we could just say, let's just grab that information straight up from Notion via the API and just throw it on the website.
Scott Tolinski
And that would be really easy to keep that up to date. So I'm gonna give this a a rip. I haven't it looks like it it does everything you'd want. Gets a database, queries a database, pages, blocks users.
Scott Tolinski
So, I haven't tried it yet, but I'm excited too. Now this is another new one. It's called the Petite View or as West thought I was gonna that name because, apparently, my pronunciation isn't very good on things.
Petite Vue for sprinkling interactivity
Scott Tolinski
But petite view is this kinda new thing that just Both of us.
Scott Tolinski
Yes. Both of us. That really just started popping up here. And you know what? I hadn't really looked into too much of this before the, the show started recording. And really what it says, it's an alternative distribution of a view as in Vue. Js, the front end framework optimized for progressive enhancement.
Scott Tolinski
It provides the same template syntax and reactivity mental model and with standard view. However, it is Specifically optimized for sprinkling in small amounts of interacting in existing HTML page rendered by a server framework.
Scott Tolinski
So I don't know if you're noticing a theme here, but people are really starting to say less JavaScript, please. And I think these, these toolmakers are really starting to come Come with their next generation of stuff that ships less JavaScript. So, you know, this is pretty neat. I I saw their example showed, just some straight up HTML and including petite view as just a script on the page. So there was no build steps whatsoever, and they were still using the view Like, attribute tags inside of their HTML syntax for interactivity.
Scott Tolinski
Let me tell you. That seems pretty neat. I mean, we're all All caught up in our our building steps right now, but, like, hey, that could be really a a cool idea if you just wanna get going on some stuff. You know, I I think about this. I have an an iPad Pro. It would be really neat to to fire this up in in just some sort of small environment on that without needing to worry about configuring up a build step or anything. You're just Tweaking some JavaScript and some HTML.
Wes Bos
Yes. It's really exciting for people who have server side rendered applications or people who wanna stick to server side Rendered applications, and you still want interactivity added to it. So you can still render out in your PHP app or in your J templates.
Wes Bos
Just the syntax. This is kinda similar how to we used to do Angular where you would just start writing the Angular Templates inside of your server side rendered, except that you don't need, like, a a root for this. You can literally put it anywhere on the page, And you can start sprinkling it on. The big one right now for this type of thing is Alpine JS, which is kind of the same idea. It's like, I just wanna add interactivity to a few spots on the website, so that's that's pretty cool that they they rolled this out, especially people who have existing View components or pieces that are needed. Totally.
Wes Bos
Next 1 we have here is Stackblitz.
Wes Bos
I saw this pop up a whole bunch of times. They actually even emailed us to ask to come on the show. So let us know if you want that kind of show to happen. If you work at Stackblitz, please don't make your people spam us. We will find that out, but this seems so cool.
Stackblitz for node in the browser
Wes Bos
Node in the browser. They launched it at Google IO, and it's part of Chrome. And it seems to be, like, next generation IDE, meaning that You can run all of your code including a back end in the browser, and this is not like a code sandbox or something like that where it's running on a Remote server, and you're streaming those changes in is literally just running in the browser. So I would kinda like to have them on the show just to ask, How did you do that?
Scott Tolinski
How did you do that? First question, how do you do that?
Wes Bos
It's pretty cool. So I am excited about the I think that this is eventually where tools like CodePen and CodeSandbox And Glitch will go as well as I'm very curious to see if Versus Code will will go this root as well because it's, like, 1 step closer to iPad coding or, like, very lightweight coding in the browser.
Scott Tolinski
Totally. Totally. Totally. Totally. Next up on our list is Solid JS, which isn't exactly new as a thing, but it did just hit version 1, which is a big thing to celebrate.
Scott Tolinski
Solid JS is a declarative JavaScript library for creating user interfaces. It does not use a virtual DOM.
Solid JS 1.0 released
Scott Tolinski
Instead, it helps to compile templates down into real DOM nodes and wrap into fine grained reactions.
Scott Tolinski
So if you listen to that and you've ever used Svelte, that sounds a lot like Svelte. Now what this looks like in syntax wise is it looks like React.
Scott Tolinski
So the way I see this is it's kind of like if you want the the compile away framework of Svelte, but you like the syntax of React more than the syntax of Svelte, then check out Solid JS. I have not used this yet, but I've been keeping an eye on it for a while here. And, Ryan, the creator of it, I I follow him on Twitter, and he's he's always sharing really cool things about this. This this is one of those frameworks that I like because the API isn't too crazy. It's not something that you've never seen before or or something totally new that you have to learn.
Scott Tolinski
In the same regards, you get a lot of these modern benefits, the things that people are seeing by using Svelte and really enjoying from that. So, check it out. Next one is the folks behind X State have formed a company called Stately,
Stately for state machine visualization
Wes Bos
and it looks like they are making an app to Remember when we had David on the the podcast, and we're like, do you have this visual edit or this visualization of your your state machine? But, like, where's the app? Or you can just drag and drop and add stuff, and it looks like that's what they are building. I'm very curious about this. I also wonder if This will be a front end for drag and drops.
Wes Bos
I have no idea. But I bet that this Thing that they're building will both be, like, a state machine, but it'll also be a UI for building sort of GUI logic, which is a hard part of The no code movement right now, and that's usually where a lot of that no code stuff starts to break down. Mhmm. But if they can solve that piece of the The the puzzle of making application logic visual,
Scott Tolinski
that would be pretty neat. So I'm Yeah. Looking forward to seeing what they roll out. Totally when especially when you consider, like, the people's biggest complaint about something like x state would be that it it's verbose to write. You know, the code itself is complex to write. But me, personally, when I look at the x state, I think the the biggest use case for it is when you see those diagrams and you say, oh, those diagrams, That's really easy to understand. It's much more easy to parse than the code itself that creates it. So, yeah, I think it's a fantastic thing, and I'm excited for that. The next one that we got here is Web 3. Now, no, Wes, I don't know anything about what this web 3 thing is here, so I'm gonna get out of line here. We did back and forth here, but you're gonna have to tell me web 3 because I don't know what this thing is. This is something we've had people,
Wes Bos
request a couple times for shows on.
Web3 JavaScript API overview
Wes Bos
And emails about it. People want me to make a course about it. And it's at that point, you know, how I I say, like, wait till you hear about something 15 times. I think this is probably the 15th time that I heard people, and it's basically, I'm not gonna do a super good job at explaining it. And I think that we should Probably have something someone on the show to talk about it, but it's an Ethereum JavaScript API. So you can build apps on the blockchain Using this API, and it's Ethereum backed. I'm not a a huge crypto head, but I have been paying attention to a lot of the Ethereum Apps. Not just like not just the currency and speculating on if it's gonna skyrocket, but a lot of the applications that use Ethereum as Their way to pay for things and and a proof of whatever, and that's what that list looks like. And there's a lot of people who are, like, all in, And this is why they've learned JavaScript in the 1st place, and this is all they're doing. And, generally, the, like, Crypto bros give me a bit of a bad taste in my mouth. And Yeah. Like, I I posted a screenshot the other day, and someone's like, hey. That's Binance.
Wes Bos
And I was like, oh, yeah. They're like, are you getting into crypto? And I was like, well, I have been. I just don't talk about it because the people In crypto are so insufferable. It's the worst. So we need we need to find somebody that is not like a crypto bro and is talking about like, Has tweets every 3 minutes about investing and, like, literally somebody who's like, yeah. This is a really cool piece of tech. We should say the whole benefit to web 3 is that like, the whole idea was that web 2 point o, we're on servers. We're on Twitter. We're on somewhere where all those things can be taken down, and they are at the whim of the person running it or the government of that country or your ISP.
Wes Bos
And with blockchain based applications, they are just out there, which has its own troubles, Which is, like, because bad stuff can happen, and it can't be taken down. And,
Scott Tolinski
there's a lot, but then there's a lot of upsides to that as well. So Yeah. And and don't don't get on us either way. If if you hate crypto, you love crypto, I I think we're probably both pretty neutral on it all things considered. You know? There's so much information out there, about it. So, you know, I think there needs to be, like, a top 10 list of the most insufferable communities Line. You got crypto. You got Tesla drivers.
Scott Tolinski
What else? We can get we can go on and on. CrossFit. CrossFit. Yeah. Let's burn some more bridges while we're at it. Who else? Yeah. Who else? Who else? Who will step up to get skewered?
Wes Bos
Yeah. And It's usually because these people are so passionate about something that most people don't understand it, And they are so far the other way and passionate about it that they come off as being obnoxious about it. A lot of people don't mean to be, but They definitely are. Yeah. So I I've been watching it watching the space and sort of I haven't built anything myself. Haven't haven't got into it, but I just keep hearing about it over and over again, so I think it's time that especially since this is written in JavaScript.
Wes Bos
Maybe it's time or like, I'm also thinking, like, People have been asking for a course on this all the time because there is a certain subset of people that don't necessarily care about websites, But they care about crypto, and if that's the language that you can write this stuff in,
Scott Tolinski
that's pretty sweet. I'm interested in learning about it And seeing, you know, what what what's up there, but I'm I don't know anything right now. So, yeah, it might be interesting to at least have somebody. If you're planning on, Like, pitching us something, though, like and you have some financial gain or or whatever. Don't even bother because I don't think we're interested in that. Yeah. That's the problem with all this crypto stuff is I I get emails all the time from these people, but it's clear that they have
Wes Bos
Some sort of financial gain, and they're just trying to pitch their book or their service Or, like, there's something behind what they're doing, and they're just trying to get on every single podcast in the world. So it's it's hard to, like, Get into that that area. Totally.
Scott Tolinski
So that was the very first inaugural. Get the latest. If you like this Format. You wanna hear about more new stuff that comes out all the time. We can do this, frequently, once a month, once every month. Who knows? As long as, As long as it's interesting or exciting for you to hear about these cool new things and are interested in hearing all the new tech. You know, some sometimes I think this kind of stuff can give people A little bit of a fatigue or, you know, anxiety about, you know, needing to learn all this stuff. By all means, you don't need to learn any of this stuff. But this is just a heads up that these new things are out there and exist. And if something like this any of these things sound interesting to you, go ahead and and dive a little bit deeper. Who knows? It could be that thread that pulls you into a whole new world of learning something. So As always, I think that's all I got. You got anything else? That's it. Thanks for tuning in, and we'll catch you on Wednesday.
Wes Bos
Peace.
Scott Tolinski
Head on over to syntax.fm for a full archive of all of our shows, and don't forget to Drive in your podcast player or drop a review if you like this show.