Potluck × TypeScript's Longevity × Canvas-Rendered Apps × Learning Rust × Executing Untrusted JS Code

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos.

Welcome to Syntax. Today, we have a potluck for you. We're gonna be talking about all kinds of stuff, including TypeScript's Future viability Flutter parody with the Dom Tailscale, which is a pretty cool app for securing remote access.

Rid. Some WordPress stuff. SVGs has icons, which is a painful thing Scott and I just went through, so glad somebody asked that rid. Web component libraries. What should I build with Rust and a couple of database recommendations for storing AI vector output? So quite a rid few good items here. My name is Wes Bos. I'm a developer from Canada. With me as always is Scott Talinski. How you doing, Scott? Rid Hey. I've I've

been doing better, but hey. I'm here, and I'm ready. I I got this Vicious stomach bug that has been going around. But one of the the public schools had to close entirely because of how many kids had it. So, rid it was it felt inevitable.

I finally got it. I was the last one in the family to get it, and, yeah. But I'm here today, so that's all that matters. How how are you doing, Wes? That's good. Yeah. We rid Almost had to to cancel it. I'm doing pretty good. I'm excited to talk about

all these items today that by the way, this is the first Potluck we're doing since we launched the new website and we like, I don't know if it was the increase in traffic, but we got lots of really good questions. So rid Appreciate everybody. Please keep them coming. Go to syntax. Fm. There's a button that says what does it say? It doesn't say ask a It says Pollock Q's. That was actually one of my the hardest things when I was signing the NAV. I was like, all of the episodes say click the button in the top right hand corner that says ask a Paula Queue.

So I was like, I can't take that away.

So I ended up, but I wanted it to be shorter so it could be an item in the NAV. So I ended Going with Paula Hughes.

Yeah. I think our listeners are smart enough to find that. I think they are too. It is before you had done that little bit of a redesign of I had it as its own kind of stand alone button, but I do like that as part of the main navigation. So thank you for that. Mhmm. I think we'll eventually have to have, like, the multi tiered NAV.

But I think, right now we've got only 4 items in the nav.

Yeah. Well, hey, speaking of the new website, rid. You know, I gotta say, one thing that has been critical for us with the new website has been [email protected].

This podcast is brought to you by Sentry, But they do more than just, you know, let us create this podcast. Honestly, this tool has been unbelievably helpful for finding errors, bugs. But not only that, more recently I took a deep dive into performance and I found the slowest queries on the site. I found out why they were slow, and I squashed them. I made them Yeah. So incredibly fast compared to how slow they were before. And not only that, We added a bunch of caching. We added a bunch of stale wall revalidate, and we turned our perf scores from meh and bad to Good. So Like, meh is actually the product says meh. The product says meh. If you're in, like, the If you're in the 89 to, like, 6 or 70 range, it's meh. Yeah. As in, yeah, they're fine, but they're not great.

And then green is anything above 90.

And then once you you know, luckily, we we had some reds in here, Wes, and now we have no more reds whatsoever. No more rid. Only meh and above. And, honestly, those mehs are gonna be green in no time too. So, thank you rid century for all of the amazing tools because, seriously,

man, this stuff made my life a lot easier to figure out what what needed my attention and what didn't. It's funny because I could I could tell like I didn't look at the stats or anything like that. But once you deploy those changes, I could tell the website was faster.

Rid. And with performance, it's not often like that. It's often like, oh, yeah, let's look at the stats. And, yeah, we shave 50 milliseconds here, but I could feel it in the site that this was so much faster, so it's pretty cool. We're going to do a whole episode on.

I think Scott probably did 4 or 5 different things to make the website faster. So we'll go through each of those and say how you found out it was slow and how you solved of it. Yeah. I even have more in the in the pipeline too. I've added some some data caching stuff that's gonna be gonna gonna shoot Those socks right off. They're gonna fly off less. So What? Yeah. Alright. Question from All Things Must Come TO an End. Will TypeScript ever go away. I know not in the next couple of years, for sure, but beyond that, could it ever die out like Flow did? My concern is any TypeScript specific knowledge would go out the window. When that happens, will TypeScript go away? Absolutely.

Everything will go away in web development, especially in web development.

Should you sweat that? No. I think TypeScript is going to be here for quite a while. I guarantee you in a couple years, we're going to start seeing Why we ditched TypeScript or like we're already starting to see that pushback. We see it. We're seeing it with GraphQL right now with every single technology.

Should that stop you from adopting it and learning this type of thing? Absolutely not. Like the the fact that Flow Flow was the sort of competitor to TypeScript. It was from Facebook.

And the fact that that went away is not a big deal because you still are typing. You still have types In your entire codebase, you're still typing your codebase. How you do it is a little bit different from thing to thing to thing. And we maybe fingers crossed we will see The types of comment proposal be put into JavaScript and will move from using JavaScript to standardized JavaScript types.

But almost all of that will translate. Like, there's a great post on the Stripe blog. Stripe rid When everybody went home on Friday as Flow developers, and they showed up Monday as TypeScript developers. They converted their entire code base From Flow to TypeScript in I think the prep was was much bigger than that. But the fact that the people who did it Basically froze the codebase on Friday, moved the whole thing to TypeScript and came back or sorry, moved from Flow to TypeScript and came back on Monday. We'll put a link in the show notes for that is unbelievable. So with almost everything, will react go away? Yes, Will Svelte go away? Probably at some point, But don't sweat it because you're learning fundamental building blocks of building software here. And what you know will translate aside from your rid Weird obtuse knowledge of edge cases and hacks.

Yeah. And you gotta say, like, Flow never had anywhere near the market share of usage that TypeScript had.

So to me, that's not a big conversation. Honestly, the the people using Flow, rid. It was never that huge. And back when we were sitting and talking, right, you can go back and listen to some older episodes of Syntax, and we said, I'm sitting this one out until we know which one has 1. And then it will be obvious which one has 1, whether it's reason, whether it's flow, whether it's TypeScript.

And sure enough, it became obvious enough that TypeScript won. And now we've been on the TypeScript train for long enough. I I've heard anybody talking about Flow for a little while. And in Flow, just like some of the other Facebook libraries and initiatives of is, like, really just never took hold. So, Yeah. I don't I don't think you have to worry about the same thing happening to Flow that happened to TypeScript.

What I think, Like you mentioned, the ideal You you got them backwards, but, yeah, I think people get Oh, I got them backwards. Yeah. I I think the ideal Situation is that TypeScript is added to JavaScript in the types as comments proposal, then we can all stop worrying about this compilation step that people rid. Whine and complain about, and we can actually have type safe code with JavaScript.

Alright. Next question from Tom. Tom says, What is your opinion on entirely Canvas rendered web apps such as those built with Flutter? Can they achieve full parity with the DOM, Especially with regards to accessibility and performance.

I've never worked with that sort of framework, but I found it very Fascinating how they replicate functionality in a way that's less dependent on the platform.

Now I've linked to a blog post, Alright. I guess it's a landing page from Flutter about multiplatform web apps, and this is the true promise of write once, deploy everywhere.

Now I have seen this type of thing work in action, Canvas based rendered apps, and they are very fast. And occasionally, they are very good. However, when you leave the DOM and you go entirely into Canada's, you are stepping into a world Where everything kind of has to be recreated, in an entirely new way, and that to me is very scary.

Now can these types of things succeed? I think so.

Depends though. Are you a really good Flutter developer? Hey. If you're a good Flutter developer, Probably worth checking this out. You'll probably be very efficient at creating web apps using Flutter.

Are you a good web developer? Yeah. I don't know if there's any they're there for you to need to jump ship and to start making apps with Flutter to use Canvas for that.

So do I think they can succeed? I think they can succeed, and, honestly, I think they could be really performant. I think that could be A really nice thing. But, again, once you step out of that that world of the browser, you're stepping out of all of the lovely things that the browser gives you in Terms of accessibility, in terms of baked in, perf sort of things or just general browser features, Even Yeah. Font rendering becomes a whole different world in a a Canvas situation. So just know that it is not like It's potentially a a very scary place to be, but I do think it's an interesting idea. Rid not one that I'm personally gonna be diving into, but I do think it's fascinating. So we'll link it up. You can go to gallery.flutter.dev

to see an example, and it's rid. It's it's wild. The entire page is a canvas element, and immediately read. Can't select text on the page, you know, and so they have to reimplement text selection.

They have to reimplement inputs. So now I'm thinking, okay, do those inputs work with 1 password? Yeah. And all the built in Ios stuff? Probably there's so many, you know, things. And like there's so many little things where you essentially opt out of all of the things, and you have to build it yourself.

And that's probably great for Apps that go all in and have a massive engineering team and totally buy in. And you'll probably see some conference talk by some massive company being like we rebuilt our TV, 3 Ios apps and like 18 Android apps and our desktop experience in one code base. And it's awesome. And they have somebody who's working on a massive component library.

You'll probably see that. But rid I don't think that the it's it's worth giving up all of the web, all of the platform specific features, Every single little npm install library that you want to be able to use with this type of stuff.

Yeah. I'll play it. Like like, where's scroll snap? You know? There's Yeah. Do they have both of those APIs? No.

Well, here's where's all the browser APIs for that type of thing? Rid. Yeah. I honestly I don't think that it's it's worth it to most devs, but there certainly will be use cases where this makes a lot of sense. Do you remember when we were at

I think it might have been Reactathon.

Ken Wheeler gave a talk Yeah. About how to make your I think let me see if I can find this talk. It might be how to make your React app performant.

Might be. That's what it is. Let me let me I'll see if I can find the the exact talk. Either way, he did, like, a whole working on reimplementing

CSS into

Canvas. Right? Well, he had done this whole thing, and it was, like, about React. And then at the end of it, he revealed that it was, like, a Canvas element. So the whole thing was being Yeah. So you were writing normal React code, but it was just being rendered into a canvas.

Wild stuff. There's there's a whole there's a library out there, HTML to canvas. Yeah.

And I use it to do the overlays on my TikToks. Yeah. So I just basically designed the whole thing with HTML, CSS and JavaScript.

And then you send it to HTML to canvas and it has to reimplement line height and word wrapping and fonts and letter spacing and rid. CH units and, like, has to reimplement Everything. Everything. And it can use it can use some of it, like it can use the browser calculated values yourself. You don't even get that with that type of stuff, and it's not perfect. The HTML to canvas, I have to like I had to fuss with it a little bit and Overdue some value so that it looked like like what I wanted.

But man, I do not envy the type of person That's like a whole another level of person.

Someone that says, you know what I wanna do? Reimplement the entire

rid Paging API. Everything. Just for, FPS. Yeah.

Crazy. Alright. Next one we got here from rid. Mike Laurel, this is more of a cool note. We like your cool notes. So sometimes we just include these because I think it's interesting to talk about. I thought this might be great for a Pollak episode, But it could easily be an entire show on VPN and security.

This is absolutely the greatest service I've seen in a while. TaleScale.com.

I ran across this because like both of you, I also have a Synology NAS. Normally I use quickconnect. To to remote in. So if you have a Synology NAS and you want to log into it And you don't want to deal with the like setup of VPN and port forwarding and all that.

Synology has this thing that's similar to like a local tunnel or what's the other one?

Engrok.

Engrok, something like that. Or basically it would just like.

Rid. Make the network stuff work via an external domain name. But when it's asleep, I have issues. In any case, opening ports is scary, even with rid. Absolutely. Opening ports on your home router is never ideal.

Enter Tailscale. One feature I love to have about Tailscale service running on all my machines. That way I can easily use the default macOS screen sharing or a VNC on mobile to safely log in. No messing around with the router. Safe and amazing. Also, their free tier is so glorious. So what this allows you to do is you run Tailscale on your box. So on your laptop, on your on your NAS or something like that.

And you can VPN into it.

And I'm assuming like it does like visual screen sharing as well, so you can click around and touch on specific things. I've heard a lot of people really like having this running on their on their machines so they can get remote access to each of their machines.

Rid. You don't have to fuss with any of the

port forwarding or opening up stuff to the public. So Yeah. That'll that'll make me nervous. So having a service to do any of that stuff for you

would make me Yeah. Yeah, interested. Because you can, Especially when you're like trying to fix something on your Synology and the answer is just like, oh, just open up a bunch of ports like, yeah, No, you shouldn't be doing that unless you know how that works.

So having a service to do it or whatnot is Pretty nice. You know what also is really nice is Cloudflare has a tunneling product as well.

So if you've used Ngrok or Local Tunnel or any of these in the past, you can use Cloudflare.

You can also install it on your NAS, and And you can use that to remotely access it with a with a login. They use Cloudflare's login product as well.

0 trust. That's what it's called. 0 trust. Okay.

Next question here from Benny's mom. So I've been in tech for about 5 years. I'm active on tech Twitter, Blue Sky, Hacker News, etcetera, I don't know what Bandcamp is. Everyone seems to know, and I'm too embarrassed to ask Not just what it is, but what its cultural significance to the tech world. Let me tell you about Bandcamp. I released All of my albums on Bandcamp. I people might not know this, but I released, several albums when I was trying to make it as a musician.

And, it has been around since a man, I wanna say since, like Long time. Yeah.

2008 20 years? 8.

Yeah. Maybe even something like that. And the reason why Bandcamp was significant is because for a very long time, if you wanted to sell your music online, You had to do so through a distributor.

There's all sorts of different distributors, that would then get you into Itunes and Real media or any place that you were to buy music. So you had to go through a distributor. All of those cost money. But before For that, you had to actually be through a record label who would then get it to a distributor. So a lot of these services, they they showed up Because it was impossible to sell your music online otherwise.

And Bandcamp showed up, and it was like, hey. It's really dead simple. You upload your stuff, And anybody can buy it. They take a small modest cut of the music.

And, honestly, I I don't know how many albums I sold on Bandcamp, But I didn't I didn't make that much money on it. It was a really easy, nice to use service, and I liked it quite a bit. It has since been sold, and I believe it's being axed. So I think that is why people are talking about it right now. When I initially saw this, I thought it was

rid A reference to SoundCloud. And I was gonna explain that, like, when a tweet goes viral, everybody follows it up with the link to my SoundCloud, because if you're getting tons of traffic, you might as well pump it for your own personal gain. So So that's what I thought it was, but then I was like, oh, no. That's SoundCloud, not Bandcamp. Yeah.

Yeah. Band Bandcamp was a really nice rid Tool for somebody like me who couldn't get their music, for sale any other way. And, yeah. Next question from struggling developers.

Rid. How can I execute untrusted JavaScript code with Node currently using VM2, but new exploits are constantly getting discovered And it's not secure enough? Yeah, so I put this in there because I thought it'd be interesting to talk about. I don't necessarily have all the answers, but I kinda wanna open this up to both the community as well and and talk about what your possible options are here. So Hold on. Before you get started, do you wanna Blaine what they mean by untrusted

JS code. So

untrusted code is you have code from your users and you need to execute it for some reason. Maybe you are Running something like Shopify is a good example.

You say, all right, Shopify users, we're hosting your website, rid. But you want to add a little bit of custom JavaScript for click handlers or whatever. All right, now you're opening it up this wide world of Letting your users run code, especially you're letting users run code sometimes on a domain name that is shared with other instances. And there's there's lots of security things in, in place there. Even the browsers maintain a list of like Shopify app.

They maintain a list of those domain names so that data can't be shared on the same domain name. Like if we have Scott. Shopify and West. Shopify.com, it treats those 2 domain names as scott.comandwesst.com so that you still have cores issues even though they're on the same domain name. But so VM2 is Deprecated, and it says there are security issues like you said. It says to use rid. Isolated VMs.

And we're we're gonna have, Faraz on the show in a couple weeks, and we'll we'll ask him about this. This is not directly his forte, but I guarantee he has thoughts about it. But, what do we got here? So you got rid. What would I recommend? First of all, I would use whatever the big boys use.

2 of the biggest Web hosts in the world or website builders in the world, Shopify and Wix.

Those 2 things let you run JavaScript on a website that they host both in the browser as well as You can have like a like a function that runs server side. So how do you run? How do you let random people just run Any willy nilly code that they want to, right? We've talked many times about all the nefarious things that can go along. So I did a quick little bit of research on this, and I even had talked to the Wix folks about this. I'm pretty sure both of them Use Wasm or WebAssembly, and they will run it in a separate worker, which is a Isolated instance of JavaScript, and it allows you to parse things, to execute things without Having access to the main host because the possible issues is, let's say you're running Node. Js and Scott sends me some code and I run that code.

There's a possible that it could leak outside of that container and then, oh shoot, now they have access to my entire machine And they could access data. They could run code. They could they could modify the code that is currently running and do all kinds of nefarious stuff. So Those are the 2 big ones I'm going to ask anyone who's listening that does know a little bit more about this to tweet us or send us an email because I think this is kind of interesting as well.

Other things V eight isolates. So we had Ryan Dahl on and he talked about Do you know in that security model, both do you know Edge Functions, Cloudflare Workers, Fastly Edge? Those things all run In their own isolate, meaning it has its own memory.

It has its own instance running.

It has everything its own. And As far as we know, it's impossible to break outside of those.

Now, all 3 of those Workers Deno and Fastly, those don't really satisfy your node use case because what if you need to use Node APIs? And then the last 1 I have here is, can can you run it in the browser? We now have web containers and a couple other implementations of Node. Js that run-in the browser, which is pretty nifty. So maybe there's a possibility that you could just run it, run it on the user's browser and you don't have to worry about that. Yeah.

Alright. Well, next question here is from Gareth. Gareth says, hey, guys. Love the show. I started building websites in 2004 And have been there from the days of static table based until now. Oh, yeah.

Remember, table based websites. Gotta love it. Right? After a few years of ignorance is bliss, where I essentially kept building websites but turned a blind eye to the overwhelming Number of new tools, methodologies, and platforms out there, I am now ready to dive deep into some learning. I'd love to get your thoughts on some modern DevOps for and continuous integration for building out WordPress websites. The caveat is that the entire WordPress Installation is the website, including the theme itself, plug ins, including free pro and internal custom plug ins, media files, and the content in the database.

I'm in a position where I can shape how things are done for a small web team, and I am keen to bring us rid. Singing and dancing into the modern web landscape.

Many thanks for all you guys do. Now this is really interesting because, one, WordPress in many of these PHP based website situations, they store a lot of things into the database.

And that's often a problem when you're trying to do modern workflows. Right? Modern workflows using things that, rid push things up via get into continuous integration pipelines and things like that.

So they make it hard. Now all of these tools, WordPress, Drupal, any of these things, they do allow for paths, But you do kind of have to adjust to how you work. I know one way that we used to work before moving into a git based workflow is that we would essentially create the entire website as is locally, and then we would bundle that up, tarball it, And take the database, export it, and then throw it online. And then that's that's the the website.

Right? But that that doesn't really work that way.

So you kinda have to start to separate the idea from the database as it exists from the website that you're working on locally.

So working in a, quote, unquote, modern way with some of these tools is going to feel very different overall.

So perhaps you should maybe take a look at different ways that you need to build things. So if we're working on a WordPress based site, Number 1 question is, do you need a CMS for whatever you're building? I think that's a big question that not enough people ask themselves. A lot of times people say, yes. Obviously, I need a CMS for what I'm building. That's just how we've done it. It gives the client access to be able to update their own stuff. They deploy this thing. The client never touches it. Right? So do you really need a CMS? If you don't need a CMS, you can take a look and and build things in a much different way. Maybe you're building things as a straight up static site with JavaScript, or maybe using JavaScript very minimally. You're using a static site generator or Next. Js or SvelteKit or a, Nuxtree. Those are exporting as a static site, then they just have Straight up HTML without a database. Right? Do you even need that database piece? So it it really depends on how you like to work moving forward. But number 1, I think the most important thing you need to do is you need to figure out how to work in a flow using version control, Using continuous integration deployment, putting things up on GitHub, and having that then push your site live.

Those are, like, the biggest steps To getting into a more modern workflow, I'd say. Yeah, I I know there are lots of tools out there that will do the whole rid Like Vercel like continuous integration for WordPress.

And certainly, you can do that. You probably do have to have a little bit of rid. Tooling around the images. Yes. Because when you upload an image, it goes into the the file system of your server. And if you are using continuous integration, then the images aren't part of that. But most, not most, lots of people in WordPress land have their image uploads so that when you upload something, it throws it on a CDN instead of putting it on the file system. So you have to you have to sort of think about Everything in my WordPress build is immutable and it cannot be changed, so we cannot upload to the file system. If I do need to upload a file, it should go to a CDN somewhere else.

I'll answer from like the front end point of view on this type of things, because a lot of times you don't want to go outside of Your WordPress theme. You want to keep all of your plug ins, your WordPress theme and all of that, and that is totally fine. But you want some of the more modern Features for the front end. So I would say get Vite going in with your WordPress.

And what that will allow you to do is You can build your components in a like you still have the idea of blocks and components in WordPress, but You can use Vite to or any other build tool. I probably I would probably say Vite to write the associated JavaScript for those components and Then you can import them and queue them as you need them. There's lots of good articles online on how to do that.

Then I probably would look at something like Alpine JS instead of going you can go all in React or Angular or Svelte or whatever, but You probably say I'm fine with the WordPress theme system. I just need a little bit of interaction here or there. I just need little sips of JavaScript as I need it. And Alpine JS is perfect for that type of thing because you write the templates in your PHP HTML templating, and then you just add Alpine syntax to that. And then when the page loads, Alpine will pick it up. You can take data that is from your WordPress queries and dump it into a data attribute or something like that, And you can pick that up with Alpine JS and loop over and filter and do clicks and whatnot.

And that is generally your best bet We're adding interactivity and modern experiences to an existing website where you clearly can't move off of This type of thing, it's not worth it and you don't necessarily want to, but you do want to add a bit more. And I think like once you have that, once you have a nice build pipeline, once you have continuous integration, Once you have the ability to make more dynamic things and load in the JavaScript only on the pages that are needed, then you'll start opening up the doors for a lot more flexibility in your your builds. Yeah. Next one from Shmi McGee.

I've got 25 SVG icons, And I want to have them in line so I can change their colors, but I also want to use them as background images. How do I orchestrate color adapting icons for use in inline and background images. So we touched upon this on the.

The problems We had with the website episode that we did a couple of weeks ago, which was, yeah, we have all these icons, Sometimes we need to change the color because there's dark mode, light mode and different themes.

So the only way to change an SVG's color is to change the fill either in line or via CSS when you're selecting the SVG. Right.

So if you put them as a background image, you all of a sudden give up all of the flexibility of changing fills and strokes and all of that via CSS.

So it's like kind of this like weird.

What do I do? And The solution to that is there is no good solution.

There's a bunch of like, solutions.

If your SVGs are just like black rid And there's no shading or multiple colors to them, you could use the mask.

And a mask will you could overlay it.

You could just have like a square of red and then you use the SVG as a mask.

And then what it will cut out the actual SVG itself. So that's that's probably a really good solution if that's the the case for you.

You can also make them a server route.

The grit on the syntax website needed to be either white grit When it was in dark mode or black grit when it was in light

mode. Yes, that's correct. And

So I and I also I wanted it to be seemingly random, and I wanted to have different sizes of grit. So I made a server route that took in a bunch of parameters and rendered out the SVG so I could give it a width, a height, a amount of grit And the color of the grid. So you could pass all those values and then the server would generate the SVG for you and kick it out the other way. So rid. Maybe think, can I build a server side route, maybe just a little function that returns the SVG, but via like a query parameter or something like that, then you could do a find or replace on the specific color? The only annoying thing that we have there is you can't put CSS variables into a URL because it would be so nice to say background URL dog.svg and then question mark, color equals, and then you could pass it a variable. You have to explicitly pass it a HEX code or some other way to color. The 3rd way is you can use a data URI.

So you could say background image is equal to data colon SVG, and you literally paste the entire SVG into there.

And if that's the case, then you have access to the SVG itself because it's in CSS.

But then it also can be a background image and you can modify that SVG via

rid. JavaScript. So, again, not ideal, but it works. Yeah. The the big there's so many little problems that equate to big problems here. So, good luck.

Rid.

It it almost needs like a service that will will do that for you. Like, if, Did I talk about my SVG service?

Maybe not on the show. You've talked to to me. Yeah. If you go go right now. Go to svg.westbossdot

com forward slash dog. Svg or forward slash fries.

Svg.

And that's just a little Cloudflare worker that hits the URL. Grabs, oh, you want fries? Then it does a search against an SVG API, finds a random one and then returns it to you.

Via that because I wanted something that where I could like I just want a quick icon. That's not an emoji and I want to be able to just to type like hamburger.

Svg.

And that works, and I could take it one step further and pass the

Color of the SVG via query param. This is totally unrelated. But did you know that if you swap the s and the b in your name, West Boss, it becomes web sauce? Yep.

WebSauce. I like it. Yeah. I I accidentally typed that, and I was like, oh, WebSauce. That'd be a cool brand. What about a web worker? Rid. A web worker, you could intercept the fetch of the SVG.

Yeah.

And then put a query for him on there. And then With a Web Worker, you it's all done client side, but you still can modify You can modify the actual You can do that whole server side thing I said in the browser. Man,

what a world. Okay. Next question from Andrash.

They say, hi, Wes and Scott. I really enjoyed the show on design systems with Brad Frost.

It was an eye opener for me. I am now convinced For that for any large project, it is the best to have a web component library with all atomic components.

But are there any publicly available libraries that customizable, headless without design? I would like to start promoting this approach at my workplace. I think this is something that could be used by any agency because it is framework agnostic, independent from design, and provides only functionality that rid. TML does not provide on its own. I'm gonna tell you what my favorite one of these is and one that I've used, numerous times is shoelace.

Rid West, have you ever used shoelace?

Yeah. Shoelace. Style. I have never used it, but is this an example of The different components done in web components?

Yes. It is. Yes. So this is a collection of web components, and it's a collection of web components that do a on a different things, and you can install them all individually.

So if you need to install just one of these, you can install just one of them. I recently used this in a site to do a a drag, like the, the the swipe up area, And it worked really well. You know? It it it had enough functionality that I could, really make it my own. There there wasn't Anything really getting in the way, it was definitely like a lot of components that you would typically need to use. It's not entirely devoid of CSS, but you can Use these devoid of CSS.

And, again, I found them like oh, the it was the drawer component that I used. I found the drawer component to be exactly what I needed. I need a drawer to slide up. I need it to be able to close automatically. I need it to be able to close with the button. It's all being done with the web components. I could style it to look however I want it to look.

And so this was a good one for me.

Rid I think, we also talked about Open UI before on this podcast. And Open UI, one of the things that they do Whenever they have the research section of any of their different, libraries, they have a whole thing that shows Like a matrix of who's implemented what what way.

And I think those are really interesting because it can rid allow you to see exactly who's implementing these different, nonstandard but should be standard HTML components.

So those are 2 resources that I would check if I were you.

I think this is a thing we'll continue to see more and more of because web component based HTML elements is really truly what web components are all about.

For me personally, you're Ending essentially what should be there in the browser already, and you're doing so in a way that can just be plopped into anything. Yeah, that's really cool. The shoelace one is is fantastic

because rid It really does it all, and it leaves room for you to to style it however you want. So you could. It does the functionality. How does a dropdown work? Does all the accessibility? It does the web component part, which is it bundles it into its own Web component.

It has examples on how to use them with React, Vue, and Angular. So if like you said, you probably have different rid. Implementations throughout your company so you can't just build a react based framework because what happens with the other teams that need it? And then it has, like all of the probably 40 different possible inputs for your common things drop downs, radio buttons, time, spinners, and then you can make your own on top of that. So, yeah, Shoelace. Yeah. Check that out as a way good way to start. I used it on a side project recently, and I was very impressed. So rid. Yeah. It seems like nobody's gonna be building component libraries from absolute scratch anymore because These things are in such a good spot where you don't have to buy in to how they look. You don't have to buy in to the framework they're using, But you are buying into it's already premade and it's fully accessible, which is kind of what you want. Nobody wants to build a multi select drop down rid From scratch. That's just that's an, headache. Yeah. It's no fun.

Next question we have here from Ringo Starr. Hello. I am a web dev. I can write type rid. On the front end, node and go on the back end. I learned all of these things by doing.

Great way to learn. Now I wanna learn Rust, and it is the hardest language I've come up rid With so far, if we exclude servers, I'm struggling to think of a good project to practice on. Do you have any good project ideas that would be Good to implement in Rust. I will, of course, make a web server in it, but other languages do that with ease.

I want to realize the full power of Rust in something thus learned. I'm thinking like image and audio processing, video games, etcetera.

My knowledge begins and ends with the Web ATM.

That's always the frustrating part is if you want to like build something, sometimes you're like, oh, I'll build a web server. That's what a lot of people do. But because you have requests coming in. You got to modify it. You can make a bunch of but that's sometimes you look at it like, ah, this is not nearly as good as something that already exists.

And you're just thinking in terms of of the web. Right. So first thing that came to my mind was Spooky voice changer.

I think that would be really cool is take some audio and then figure out how to change the octaves and the Sine waves and all that whatever. However you do that, I've built one before. I totally forget what the words are for them, but be able to modify the person's voice That comes back or audio analyzer. This is one thing Scott and I want right now is take an MP3 and simplify it so that we can see the over like an hour of speaking where the audio levels at and make that into a nice little graph or something like that. I think that'd be kind of cool to do as well. You build CLI tools. That's what we had Chris From Chris Lattner, who built Swift. And I asked him, like, what do you what do you use to build these things? And he said, I always build command line tools because they're super helpful

and they're really low level. Yeah. CLI is a great place to start even, like, doing something as as simple as, rid Taking a template and then exporting it as a a PDF. I have, like, a contract generator. It's something that I thought was a really good project that I made.

Basically, I made a CLI that prompted me for some names and some things, and I took a contract template and then exported it as a PDF.

So it's basically just a fast find and replace, export as PDF. Nice little project because you get access to the file system stuff. You get access to creating A PDF. You get access to, like, learning about CLI type of tools.

I I one thing I I think I would stress here if you wanna pick up Rust stuff, you know, a great place To dive into UI based things is to build something with Tori because then you don't have to learn any of these weird sort of Rust based UI, rid. Libraries, which I think are all garbage, honestly, I I found most of them to be terrible. Now, you know, I'm speaking from somebody who's a web developer. So, You know, you might be the the the, Rust UI person and have a different opinion. But, honestly, I think if if you're the type of person who knows web tech, What you can do with Tori is build out the UI and web stuff and not worry about having to get the hang up of a UI.

And then anytime you wanna do something interesting, Like, perhaps you're doing a screen recording, then you're diving into Rust packages, and you're really, you know, really expanding your mind in that way. So I would I would check out building an app with Tori. Anything you can do, think of just for fun to access maybe native, native app APIs from the computer or or those types of things you might be doing. But, me, personally, Sticking with a web UI is a great way to unlock yourself there.

Also, one thing to keep in mind is a lot of these Rust Applications can be compiled to WASM, meaning that think about something that is too tricky to do in JavaScript, but you still want to do it in the browser.

Maybe like video editing, take 3 video clips and take out all the silence and then clip them together.

That would be kind of a cool one. That would be very hard to do in the browser in JavaScript, But you probably can build something in Rust to do that, and then you would be able to run it in WASM. And bonus points, you get to learn how WASM works. Yeah. I will say

none of that's going to be hot or none of that's going to be easy. So if you want easier projects, CLI is definitely the way to Build yourself a little handy u utility CLI. It can be trivial. Right? It doesn't have to be useful or something that you're going to love. Just something practical and, That was something that works. Alright. Next question from Griffin. Do you ever plan to do more podcasts with Scott's wife Or another psychologist psychologist or psychiatrist revolving around learning, procrastinating, imposter syndrome, etcetera.

Love the pod. Keep up the great work. Hey.

She is available all the time. So if you all want to hear more from my wife, rid Doctor Courtney Talinsky, please let me know. She is a doctor of educational psychology. She's taught courses on human development.

Rid. At at the master's level, she works full time with children who have learning disabilities. So She is available, and I think she had a great time last time she was on here. So if there's any topics in particular you all would like to hear more from her about, rid. I'm sure she'd be more than happy to come on. Yeah, that's one thing I have here is what do you all think about the experts?

The recruiter episode was got like amazing feedback. A lot of people say, like, we should do 1 every 6, 8 months just to kind of check the temperature of the hiring one.

Not everybody loves them, but I think that's Okay because not everyone's going to love everything. And if we try to cater to everybody, then rid.

It becomes mid, you know.

So let us know your thoughts. Either way, we're we'd love hearing Your feedback on the types of same with the lawyers. A lot of people loved when the lawyers came on and talked about cookie law and GDPR and things like that. So these are things that they aren't web developers, but they're web adjacent and we have to interact with our well-being, getting sued or Getting a job.

So let us know. We'd love to hear that. I bet Cookie Monster would love to come on and talk about cookie love as well. I'm in if you got the hookup.

Next question from Jesse Hall, Code Stacker. This is this is one I got probably 6 DMs about. Have you tried MongoDB vector search For AI embeddings. So real quick, AI embeddings are you can take an AI model like OpenAI, you can feed it Something piece of text in our example, like we can feed it the entire transcript of a show, rid. And what you'll get back from that is a mathematical representation, essentially an array of numbers that describe rid. The contents of the show, and you do that for all of the shows, and then you can you can do things like these are similar shows or how close are they? And they don't have to. It's not just like text based.

It's because the AI knows about what you're talking about.

It will show you that they are close together. Like I did some some really interesting ones where I gave it like car, truck, red and green.

The very simple example it knew that car and truck were vehicles in red and green were were colors, but it goes Many, many layers deep as to are you talking positively about this thing? Are you talking about UI components? Are you talking about server side rendering? Ready. So AI embeddings are really cool for being able to surface content via search and related content and rid all that cool stuff. And a lot of people, I didn't even know this, MongoDB has the ability to store vectors, And that's really cool because when you want to search for something that is similar like let's say we take this potluck episode And we say show me the other Pollock episodes that are the most like this or even the questions that were answered.

Show me the other questions that were similar to this one in the 8 years of this podcast.

That is where you use a vector database because it knows how to search based on those So MongoDB is a really cool one. I'm certainly going to try that out.

There seems like there's a 1000000 of them popped up in the last couple of months.

Chroma, Vespa.

I know Radis does it.

Pinecone seems to be a very popular one in the space. Zeta is one I use. Cloudflare D3 is one I'm sort of leaning towards, but, I did not know MongoDB did it. And the ease of running MongoDB locally And just getting up and running with it makes that very attractive. And I like

the APIs for working in Mongo. I I like working in Mongo. I know Yeah. That not everybody does, but it it's so friendly to me for some reason. It just it calls to me. Big fan. Next one here from Connor Dowdall.

Huge fan of web components, the v s code plug ins e s six string HTML and inline HTML give syntax highlighting inside template strings using And then a a comment HTML and then template tag literal.

Prettier can format template strings using the same syntax Or using uppercase HTML inside of a comment, then template tag, litter case.

Oh, template tag literals.

Rid. These are not compatible. No matter what, I cannot hit control, comment, to comment out my CSS styles inside of my template inner HTML.

I just wanted to shine light on this.

Isn't that frustrating, Connor? This is the worst art thing in the world. I I can't tell you. There's been a lot of situations. You're in a React template. You do, The the comment, and then it gives you the wrong style of comment, and then you'd wanna throw your computer out the window.

Wes has provided one to say he uses instead saying comment ridged. Templates.

So we'll have a link to that in the show notes. But my gosh.

Isn't that the type of thing that really sets you off nowadays?

Rid Yeah. So I you may have even got this recommendation from me. The ES6 string HTML plug in for Versus Code was really nice because you can Essentially, the way it works is you have backticks and you're going to put HTML in backticks. Pretty common in web components, pretty common if you're just using document fragments.

You're trying to render out some HTML with vanilla JavaScript. I do it all the time. I switched from that one to Very less known. Only 22,000 installs, but it's called Comment Tag Templates, and they have support for Probably 50 different languages out there, and they allow you to use upper case HTML instead of lowercase.

So hopefully that will solve your specific issue.

I am just running it through the I can't even get the Prettier rid Playground to format the HTML for me.

So I'm not quite sure if that will fix it or not. But so Prettier itself has a flag that you can pass it and it will try to detect.

It's on by default, but it will try to detect different languages in your tag template literal. So if you're putting CSS or you're putting HTML or you're putting TypeScript inside of backticks because you want to display it on a page. Like, for example, when I do my conference talks, if I want to put text on the page. I'll put it in back text and tag it as that language so I get all the nice syntax highlighting that I'm used to as I'm typing out the slides.

So I think this will work for you. Check it out, and grab that one. Everyone else listening,

install this one. It's way better. All right. Well, that is it for this rid Now we're getting into the show part of the show that we talk about sick picks, things that we think are sick.

I have A documentary that Courtney and I watched this weekend, and it was really super good, rid. Especially if you like heist style documentaries, those types of things, which we've talked about numerous ones of that style on this podcast before. But this documentary was about he's essentially a thief who is really good at climbing, and he broke into, Modern Art Museum of Paris and stole a bunch of stuff and never got caught.

Well, he eventually kinda gets caught. But either way, it's an incredible documentary. It's called the Spider Man of Paris.

Rid. And I gotta say, this thing was so good because the guy is super interesting. His story is super interesting.

The the methods at which he steals things is bananas. He's like a true cat burglar

who is an expert in his craft. So highly recommend this little documentary. It was a lot of fun. I am going to sick pick, I think, something I've picked a couple years ago, but I still see it. Not enough people using that. And that is an instant read digital thermometer for your kitchen.

So many people overcook their food simply because they are scared of dying from the not hitting the right temperatures.

And when problems like that can be mathematically solved, is this at a certain temperature that is safe to eat? Then rid. You shouldn't be having those problems. An additional a digital instant read thermometer, a really nice one, is like $15 Canadian.

And it can save you from overcooking your meal. It can save you from getting food poisoning if you undercook it. So I don't know why everybody doesn't just have one of these because even on the back of it, it says, yeah, what the tips are. You know, you're cooking pork, 145 on it. If you're cooking chicken, it says 1 165. I do 160 because I'm a bit of a I'm a bit of a bad. You like your chicken medium? So many times I've rid. Yeah. A little jelly still. No, it's because you Cook to 160. It will still rise when it's sitting on the cutting board rid. Up to 165 and you can use the thermometer to make sure of that. But the amount of times I've cut into a piece of chicken And people are like, is that cooked all the way? And it's like, yes, it's cooked all the way. It's just not like dry as crap because you think that A little bit of red or like a piece of dark meat in the thigh is uncooked.

So do yourself a favor. Get yourself an instant read thermometer. Rid. The guesswork out of dying at dinner. Yeah. I got one for, like, like, seriously, like, $10 on Prime Day and

easy easy good purchase. I use it Every single time I cook now,

Yeah. They're they're excellent. Big fan. Big fan. Especially, like, some of them are the one I have was, like like, waterproof.

So you can just give it a like you don't have to, like, yeah, worry about getting it wet. I've left it in there like I have 1 by the barbecue that I sometimes leave uncovered.

They get rained on. I had I did get 1 cheap one that broke, but I've had the other one at the cottage. I'll link to the one that I've had for Quite a while, and it's been been rocks off. Yeah. Mine has a magnet on the back. You can just stick it to stuff. Yeah. Big fan of magnets. Rid Alright. I think that's it for today. Thanks, everybody, for tuning in, and we will catch you on Friday.

Rid Peace.

Peace.

Head on over to syntax.fm for a full archive of all of our shows. Rid. And don't forget to subscribe in your podcast player or drop a review if you like this show.