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

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.

All Things Must Come TO an End. Will TypeScript There seems like there's a 1000000 of them popped up in the last couple of months.

89 to, like, 6 or 70 range, it's meh. Yeah. As in, yeah, they're fine, but they're not great.

translate. Like, there's a great post on the Stripe blog. Stripe So if you've used Ngrok or Local Tunnel or any of these in the past, rid. Implementations throughout your company so you can't just build a react based

90.

Yeah. Well, hey, speaking of the new website,

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,

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

This podcast is brought to you by Sentry, But they do more than just, you know, let us create this podcast. Honestly,

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 the big boys use.

And then green is anything above

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 I found the slowest queries on the site. I found out why they were slow,

this tool

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 he's essentially a thief

rid it was it felt inevitable.

So to me, that's not a big conversation. Honestly, the the people using Flow,

that happened to TypeScript.

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

edge cases and hacks.

all these items today that by the way, this is the first Potluck we're doing since we launched the new website and as well as

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,

Yeah. Alright. Question from 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.

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.

I took a deep dive into performance style documentaries,

one thing that has been critical for us with the new website has been [email protected].

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.

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 for your common things drop downs, radio buttons, and came back It has examples on how to use them with React, Vue, and Angular. So

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

on.

But I think,

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,

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, Letting your users run code, especially Maybe because 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

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

has been unbelievably helpful for finding errors, bugs. But not only that, more recently After a few years of ignorance is bliss, where I essentially kept building websites but turned a blind eye to the overwhelming

Can they achieve full parity with the DOM, Especially with regards to accessibility

And the fact that that went away is not a big deal because can take an AI model like OpenAI,

and I squashed them. I made them Yeah. So

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?

in I think the prep was was much bigger than that. But the fact that It becomes

And have been there from the days of static table based until now. Oh, yeah.

on the same domain name. Like if we have Scott. Shopify and West. Shopify.com,

from your users and you need to It's because the AI knows about what you're talking about.

to tweet us or send us an email because I think this is kind of interesting as well.

Isolated I that will and then

instance of JavaScript, and it allows you

Yeah. Band Bandcamp was a really nice rid Tool for somebody like me who couldn't get their music,

Alright. Well, next question here is from Gareth. Gareth says, hey, guys. Love the show. I started building websites in 2004

that they host both in the browser 0 trust. That's what it's called. 0 trust. Okay.

so that you still have cores issues even though they're on the same domain name. But so VM2

on a website

let you run

what do we got here? So you got rid. What would I recommend? First of all, I would use whatever of a show, we can feed it the entire transcript

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, I think it might have been Reactathon.

they they showed up Because it was impossible to sell your music online otherwise.

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.

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

untrusted code is you have take out all the silence and then clip them together.

it has been around since

There's all sorts of different distributors,

and a couple other And a mask will you

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 URL. Grabs, oh, you want fries? Then it does a search against an SVG API, finds a random one

my entire machine

man, I wanna say since, like Long time. Yeah.

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.

Running something like Shopify is a good example.

JS code. So

but new exploits are constantly getting discovered

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

forte, but I guarantee he has thoughts

the browser,

you're letting users run code sometimes on a domain name that is shared with other you're learning rid When everybody went home on Friday as Flow developers, if you want to like build something,

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

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,

In their own isolate, meaning it has its own memory.

Faraz on the show in a couple weeks, and we'll we'll ask him about this. This is not directly his

And then the last 1 I have here is, can can you run it in the browser? would make me Yeah. Yeah, interested. Because you can, Especially when you're like trying to fix something on your Synology uncovered.

for some reason. Maybe you are if you're getting tons of traffic, you might as well pump it for your And what that will allow you to do red and green.

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,

instances. And there's there's lots of security things in,

and then, oh shoot, now they have access to fries.

code product as well.

We now have web containers of Node. Js that run-in to parse things, to execute things without 2 of the biggest

Having access to when you want to search for something that is similar I did not know MongoDB did it. And the ease of running MongoDB locally You can also install it on your NAS, show you that they are close together. Like I did some some really interesting ones where there are security issues like you said. It says to use rid. Isolated VMs.

because our well-being, Other things V eight isolates. So we had Ryan Dahl on and he talked about

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

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

Even Yeah. Font rendering becomes a whole different world in a a Canvas situation. So just know that it is not like

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,

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.

the entire Someone that says, you know what I wanna do? It will either white grit 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.

in an entirely new way, 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,

giving up all of the web, all of the platform specific features, 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? getting sued or Getting a job.

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.

in one code base. And it's awesome. And they have You can build your components in a like you still have the idea of blocks and components

I have seen this type of thing work in action, and performance.

things, and you have to build it yourself.

in terms of baked in,

rid. CH units and, like, has to reimplement you're just thinking in terms of Well, here's where's all the browser APIs for that type of thing? 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 It has its own instance running.

company being like we rebuilt standardized

scary place to be, 2008 20 years? rid. You know, I gotta say, 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 And then anytime you wanna do something interesting, like the, the the swipe up area, Alright. Next question from Tom. Tom says, What is your opinion on entirely Canvas rendered web apps such as those built with Flutter?

our TV, 3 Ios apps and like And it can what's the other one?

It's potentially a a very been doing better, but hey. I'm here, and I'm ready. I I got this

of does it all, 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 HEX code or some other way to color. The 3rd way is you can use a data URI.

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

they are very good. However,

and that to me is very scary.

Ken Wheeler gave a talk

Probably worth checking this out. You'll probably be very efficient at creating web apps using Flutter.

Now I've linked to a blog post, 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,

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,

You'll probably see that. But rid I don't think that the it's it's worth

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

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.

18 Android apps and our desktop experience

Are you a good web developer?

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

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

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

into

Now

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?

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

perf sort of things or just general browser features,

And then you send it to HTML to canvas and it has to reimplement

Depends though. Are you a really good Flutter developer?

line height and word wrapping and fonts and letter spacing and simplify it so that we can see Those 2 things 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, to an existing website where you clearly can't move off of

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

Hey. If you're a good Flutter developer, native

something that already exists.

please let me know. She is a doctor of educational psychology. She's taught courses on human development.

but you still want to do it in the browser.

To dive into UI based things is to build something with Tori cat burglar is that the entire WordPress

and then figure out how to change the octaves and the you can't put

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.

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,

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.

Doctor Courtney Talinsky, that Courtney and I watched this weekend,

available all the time. So if you all want to hear more from my wife, rid HTML

of the web. Right. So first thing that came to my mind was a lot of times you don't want to go outside of is com forward slash dog. Svg

and they're really low level. Yeah. CLI is a great place to start even, like, doing something as as simple as, rid

and you're really, you know, Canvas based rendered apps, and they are very fast. And occasionally,

because then you don't have to learn any of these weird a

me, personally, Yeah.

where the audio levels at

From from absolute scratch anymore

Sticking with a web UI is a great way to unlock yourself there.

meaning that think about something that is color

Also, one thing to keep in mind is cookie law and GDPR

I think that would be really cool is take some audio not Bandcamp. Yeah.

then you're diving into Rust packages,

app APIs from the But are there any publicly available libraries

She is

computer or or those types of things you might be doing. But,

sort of Rust based UI,

the over like an hour of speaking of changing fills and strokes and all of that via CSS.

and

Sine waves and all that whatever. However you do that, I've built one before. I totally forget SVG, and you literally paste the entire SVG I'm struggling to think of a good project the not hitting the right temperatures.

So it's basically just a fast find and replace, export as PDF. Nice little project because And, Using continuous integration deployment, using uppercase

psychologist or psychiatrist revolving around learning, procrastinating, imposter syndrome, etcetera.

Or another psychologist 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

That's always the frustrating part is So it's like kind of this like weird.

and And The solution to that is there is no good solution.

That comes back or audio analyzer. This is one thing Scott and I want right now is take an MP3 that I sometimes leave You can use Vite to or any other build tool. I probably I would probably say Vite And

because they're super helpful color equals, and then you could pass it a variable. You have to explicitly pass it a Absolutely.

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, Isn't that frustrating, Connor?

I I one thing I I think I would stress here if you wanna pick up Rust stuff, you know, a great place inside of a comment, then template tag, litter case.

Rid. At at the master's level, she works full time with children who have learning disabilities. So

Like, perhaps you're doing a screen recording,

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

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

in something thus learned. I'm thinking like image and audio processing, video games, etcetera.

you 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

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?

vector search essentially an array of numbers 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.

The recruiter episode 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 $15 Canadian.

of the hiring one.

that describe

AI embeddings are 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.

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 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.

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

representation,

mid, you know.

Not everybody loves them, but I think that's Okay because

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 Yeah. I'll play it. Like like, where's scroll snap? You know? There's Yeah. Do they have both of those APIs? No.

Something piece of text in our example, like It's on by default, but it will try to detect or how close are they? And they don't have to. It's not just like text based.

For AI embeddings. So real quick, like Shopify app.

you can feed it

So

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.

to write the associated JavaScript for those components So having a service to do it or then you could 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.

Svg.

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,

and then you just add Alpine So many times I've component libraries

go all in React or Angular or Svelte or whatever, Overdue some value so that it looked like like what I wanted.

JavaScript as I need it. And Alpine JS is perfect for that type of thing because 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 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

URL

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

Remember, table based websites. Gotta love it. Right? 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.

Installation is the website, including the theme itself,

for and continuous integration for building out WordPress websites. The caveat

could overlay it.

with all atomic components.

but If your SVGs are just like black JavaScript out there, read. Can't select text on the page, you know, and so they have to reimplement text selection.

push things up via for sale any other way. And, yeah. Next question from struggling developers.

the file system of your server. And if you are using continuous integration, 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 in place there. Even the browsers maintain a list of

overall.

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

the actual You can do that whole server side thing I said

And that's often a problem when you're trying to do modern workflows. Right? Modern workflows using things that, rid

Rid.

mode. Yes, that's correct. And

But that that doesn't really work that way.

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,

but You probably

So you kinda have to start to separate the idea from

HTML templating, to see an example, and it's rid. It's it's wild. The entire

website

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,

rid. Tooling around The types of comment proposal be put into JavaScript and will move from using JavaScript to somebody who's working on a massive component library.

is that we would essentially create the entire website as is locally, 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,

When it was in dark mode or black grit when it was in light rid Weird obtuse knowledge of that took in a bunch of parameters Why we ditched TypeScript moved the whole thing to TypeScript 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'll answer from like the front end point of view

do a find or replace on the specific color? The only annoying thing that we have there is I've got 25 SVG

the SVG itself Edge Functions, Cloudflare Workers, Fastly Edge? Those things all run the images. Yes. Because when you upload an image, it goes into the 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?

that customizable, who

The grit on the syntax website to each of their machines.

Features for the front end. So I would say Now, all 3 of those Workers Deno and Fastly, those don't really satisfy your node So you could say background image 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

is to

one,

the only way to change an SVG's you write the templates in your in with your WordPress.

And that's just a little Cloudflare worker that

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 plug ins, including free pro and internal custom plug ins, media files, and the content in the database.

numerous times

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 like video editing, take 3 video clips which was, yeah, we have all these icons, because it's in CSS.

get

And then what it will cut out You could just have like a square of red and then you use the SVG as a mask.

There's a bunch of about it. But,

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

version control,

is shoelace.

have their image uploads

what a world. Okay. Next question from Andrash.

Svg.

the database as it exists from the website that you're working on locally.

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.

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

then they just have Straight up HTML without a database. Right? Do you even need that database piece?

but via like a query parameter or something like that, will TypeScript go away?

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,

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 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.

get Vite going right now we've got only 4 items in the nav.

Rid West, have you ever used shoelace?

Everything

good luck.

and rendered out the SVG so I could give it a width, a height, the people who did it Basically froze the codebase on Friday, on this type of things, because CSS fundamental building blocks of building software here. And what you know will translate aside from your So I'm not quite sure in WordPress,

episode

in the browser. Man,

either in line or via CSS when you're selecting the SVG. Right.

like, solutions.

into continuous integration pipelines and things like that.

WordPress in many of these PHP based

Then I probably would look at something like Alpine JS My knowledge begins and ends with the Web ATM.

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?

icons, So on specific things. I've heard a lot of people really like having this running on a amount of grit Rid. You don't have to fuss with any of the

What do I do? that we did a couple of weeks ago, into there.

background

Sometimes we need to change the color because there's dark mode, light mode and different themes.

And

needed to be do you know

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

rid Like Vercel like continuous integration for WordPress.

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 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.

situations, they store a lot of things into the database.

build is is Deprecated, 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, And we're we're gonna have, save you from overcooking your meal. It can save you from getting food poisoning I want to realize the full power of Rust that works, and I could take it one step further and pass the what the words are for them, but be able to modify the person's voice change the fill which is pretty nifty. So maybe there's a possibility that you could just run it, run it on the user's browser

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

hits the 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 framework because what happens with the other teams that need it? And then it has, like all of the probably 40 different possible inputs

putting things up on GitHub, and having that then push your site live.

Many thanks for all you guys do. Now this is really interesting because,

So

for use in inline and background images. So we touched upon this on the.

do clicks and whatnot.

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

rid And there's no shading or multiple colors to them, you could use the mask.

in my WordPress 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.

into a URL

So

We had with the website

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

PHP is this is one I got probably 6 DMs about. Have you tried MongoDB So I and I also I wanted it to be seemingly random, Use

and Wix folks about this. I'm pretty sure both of them and they will run it in a

rid. Singing and dancing into the modern web landscape.

will do that for you. Like, if, Did I talk about you all of a sudden give up all of the flexibility worker,

or maybe

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.

you have access to too tricky to do in JavaScript, 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 the actual SVG itself. So that's that's probably a really good solution if that's the the case for you.

is equal to data colon you can use And if that's the case, then

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 Right?

digital thermometer for your kitchen.

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.

Oh, template tag literals.

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 is this at a certain temperature that is safe to eat?

and it was really super good,

I am just running it through the a data attribute or something like that, And you can pick that up with Alpine JS and loop over and filter and product as well.

rid. Especially if you like heist elements is really truly what web components are all about.

and grab that one. Everyone else listening,

Pinecone seems to be a very popular one in the space. Zeta is one I use. Cloudflare D3 my SVG service? all that cool stuff. And a lot of people, I didn't even know this, MongoDB Reimplement own personal gain. So So that's what I thought it was, but then I was like, oh, no. That's SoundCloud, I can't even get the Prettier on 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

Modern Art Museum of Paris and stole a bunch of stuff and never got caught.

the APIs for working in Mongo. I I like working in Mongo. I know Yeah. That not everybody does,

in your tag template literal. So if you're putting CSS or you're putting HTML or you're putting TypeScript

I just wanted to shine light on this.

rid Playground to format the HTML Rid. Some WordPress stuff. SVGs has icons, which is a painful But almost all of that will execute it

and 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.

Then

The very simple example it knew that car and truck were vehicles in red and green were were colors, but 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

they allow you to use upper case HTML instead of lowercase.

you want to display it on a page. Like, for example, when I do my conference talks, if I want to put thing that's similar to with almost everything, will react go away? Yes, Will Svelte go away? Probably at some point, But don't sweat it because all of the

I have A documentary

A little bit of red or like a piece of dark meat in the thigh is uncooked.

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 Do you know in that security model, Ready. So AI embeddings are really cool for being able to surface content via search and related content and rid

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

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

but

HTML 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.

And Synology has this 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

comment, to comment out my CSS styles inside of my template inner HTML.

the Spider Man of Paris.

Every single time I cook now, on this podcast. And Open UI, one of the things that they do Whenever they have the research section of any of their different,

that you can pass it and it will try to detect.

Probably 50 different languages and it says and I wanted to have different sizes of grit. So I made a server route

Or

simply because they are scared of dying implementations page is a canvas element, or forward slash returns the SVG,

for a full archive of all of our shows. Rid. And don't forget to subscribe in your podcast player 8.

and you can use the thermometer to use case because what if you need to use Node APIs? dog.svg

for me.

rid. Yeah. A 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 so much faster, so it's pretty cool. We're going to do a whole episode 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.

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

hit control, And, honestly, I I don't know how many albums I sold on Bandcamp,

their food

Friday.

you Cook to 160. It will still rise when it's sitting on the cutting board rid. Up to 165 and they showed up Monday as TypeScript developers. They converted their entire code base You can have like a like a function that runs server side. So how do you run? 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? It it almost needs like a service

So many people overcook

has the ability to store vectors, Rid Peace.

solved, 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

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

Peace.

And that's really cool because 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 is this an example of CSS variables

make sure of that. But the amount of times I've cut into a piece of chicken There's a possible that it could leak outside of that container Wasm or WebAssembly, rid It really Rid. How can I execute untrusted JavaScript code with Node currently using VM2, Yeah. Shoelace. Style. I have never used it, but

and they have support for then the images aren't part of that. But most, not most, lots of people in WordPress land So I think this will work for you. Check it out, from Then you can import them and queue them as you need them. There's lots of good articles online on how to do that.

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

are sick.

Head on over to syntax.fm

And then a a comment HTML and then template tag literal.

They get rained on. I had I did get 1 cheap one that broke,

and he broke into,

Prettier can format template strings using the same syntax That was something that works. Alright. Next question from Griffin. Do you ever plan to do more podcasts with Scott's wife

inside of backticks because Rid. And with performance, it's not often How do you let random people just run And certainly, you can do that. You probably do have to have a little bit of and you don't have to worry about that. Yeah.

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

is one I'm sort of leaning towards, but, Next question from Jesse Hall, Code Stacker. This But then it also can be a background image I know Radis does it.

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, port forwarding or opening up stuff to the public. So Yeah. That'll that'll make me nervous. So having

You're trying to render out some HTML with vanilla JavaScript. I do it all the time. I switched from that one to instead of going you can

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

I gave it like car, truck, And that is generally your best bet We're adding interactivity and modern experiences And Chroma, Vespa.

So hopefully that will solve your specific issue.

those types of things, which we've talked about numerous ones

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

different languages You can also make them a server route.

Rid. These are not compatible. No matter what, I cannot

And just getting up and running with it makes that very attractive. And I like because it would be so nice to say Every single little npm install library that you want to be able to use with this type of stuff.

Well, he eventually kinda gets caught. But either way, it's an incredible documentary. It's called a a drag,

if that will fix it or not. But so Prettier itself has a flag

or drop a review if you like this show.

easy easy good purchase. I use it

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

The the comment, and then it gives you the wrong style of comment, and then you'd wanna throw your computer out the window.

of that style on this podcast before. But this documentary but should be standard HTML components.

little jelly still. No, it's because 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

was about

is really good at climbing,

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.

Engrok.

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 it treats those 2 domain names as scott.comandwesst.com And it's not secure enough? Yeah, so rid. You shouldn't be having those problems. An additional a digital instant read thermometer, a really nice one, is like

a tunneling The problems

on your

like it does like visual screen sharing as well, so you can click around and touch And when problems like that can be mathematically separate 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.

ideal.

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

And I'm assuming a lot of these Rust Applications can be compiled to WASM, that SVG via

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.

and And you can use that to remotely access it JavaScript types.

And question mark, From Flow to TypeScript Very less known. Only 22,000 installs, but it's called Comment Tag Templates, They have to reimplement inputs. So now I'm thinking, okay, do those inputs work with 1 password? 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 not everyone's going to love everything. And if we try to cater to everybody, then rid.

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 rid. And what you'll get back from that is a mathematical

their on their machines so they can get remote access both Spooky voice changer.

box. So on your laptop, on your on your NAS or something like that.

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

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 thank you rid century for all of the amazing tools because, seriously,

like a local tunnel or

with a with a login. They use Cloudflare's login 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.

All of my albums on Bandcamp. I people might not know this, but I released,

whatnot is Pretty nice. You know what also is really nice is Cloudflare has So if you put them as a background image, which is a Show me the other questions that were similar to this one in the 8 years of this podcast.

a service to do any of that stuff for you News, etcetera,

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

and and then returns it to you.

And, again,

nonstandard

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.

It does the web component part, which is it bundles it into its own Web component.

spinners, and then you can make your own on top of that. So, yeah, Cloudflare.

And so this was a good one for me.

Like a matrix of who's implemented what what way.

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.

For me personally, several albums when I was trying to make it as a musician.

web component based 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.

I think this is a thing we'll continue to see more and more of because rid allow you to see exactly who's implementing these different, Isn't that the type of thing that really sets you off nowadays? So if you need to install just one of these, you can install just one of them. I recently used this

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, So I was like, I can't take that away.

in a site to do

if like you said, you probably have different and immediately

And it worked really well. You know? It it it had enough functionality that I could, 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.

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.

really make it my own. There there wasn't Anything really getting in the way,

Rid I think, we also talked about Open UI before

And I think those are really interesting because it can You had to do so through a distributor.

The different components done in web components?

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

libraries, they have a whole thing that shows

time,

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.

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.

because you can VPN into it.

for securing remote access.

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 They maintain a list of those domain names so that data can't be shared and you can modify

rid. Web component libraries. What should I build with Rust and a couple of database recommendations for storing

thing Scott and I just went through, so glad somebody asked that