Potluck - Selling Themes × Which Browser Should Devs Use? × Where Do You Keep 2FA Codes? × Remix vs Svelte Kit × Getting Unstuck from Tutorial Hell

It's like a very cool a lot of people have cottages up in Tweed, so shout out to Tweed.

So if you had no

is is nothing explicit. So TypeScript is going to most likely say that is something that you're starting to see in, Like this person has mentioned any of these new build systems. Vite uses import dot meta a lot.

But when you

Oh, that's cool. Tweed is Rid people always ask us, like, why even with the 2 factor codes in general, Your favorite today.

no idea What import.meta is? What is this card? I'm just looking at the docs, and I've literally never seen this. Okay. So import.meta called Intent to Ship, Rid. Another big one, browser release notes. So specifically, like I'm too far away from,

there, and you're going to be seeing it a lot more often. But it's not it's not super important. There's not like a some, like, crazy amount of interesting things in there that you need to know. It's gonna be like on a per platform basis.

We use it for EMV variables, which are set via

bundler is able to stick extra stuff onto that should you need it. Yeah. That's my understanding of it. The specs says it's a it's a an empty prototype.

With TypeScript, so to say, because what are your thoughts on publishing and selling HTML

Rid. Benjamin says, Yeah. It's interesting stuff, and it's definitely something you're gonna see utilized more. The 1st time that I saw important meta was using Snowpack in absolutely not. Yeah. I almost feel like frameworks don't give you enough sometimes.

Let's see.

And how do I get my Versus Code to know what it is? It's always underlined in the wrong area. Shout out to all the devs from Tweed, Ontario.

Rid. So when I never models in Mongoose.

of which that metadata potential

do do, like, an import,

any whether that is physical or digital or whatnot.

I've been checking the newer build tools rid. In personal project, I'm suddenly seeing import dot meta everywhere.

rid. Eager. And that's something that exists only in Vite, the glob eager. Cool. So it's it's kind of interesting. And so they made a spec that gives you obviously the URL of the file that was imported. That's a red. Standard. But then, like, any up and running. But I sometimes feel I am not really learning how things work

markdown, whichever file. Okay. I can't. We can't. We actually use it in Gquery want to rid. People love it. I think the support for this type of stuff is would be a huge like, you think think about the type of developer who uses, like, a like, this is no rid. Slant on people who use themes. But generally, somebody who's buying a prebuilt theme, they're either looking to get up and running quickly or it's because they don't have the skills to do that. And then to support on that type of thing must be a each of the items, especially because I've got little

Import to dot meta.

and then,

import dot meta is set to any is typed to any for me.

let's say you were to more so than it is

whatever they have in here. So, like like I said, there's import to .meta.glob

So therefore, SvelteKit and, basically, anything does. The thing about import meta is it's basically a blank slate to attach metadata for an import. And I know Vite is adding things to that.

and glob eager, I typically would have

rid. I have no idea what's in for what's import meta. So you'll you'll want to type that. How do you how do you type globally something like that? Let me even, like, see if I have something like that set up because we use import meta in our site.

So it's basically this is information

Also, our import meta,

everybody ready to do this because you you know that there are several people out there that are absolutely cleaning up on this type of thing. You start doing the math in your head like, oh, they sold How many how much? Oh, man. Exactly. Yeah. You're like, oh, man. I can do that, you know, and and then and then you don't. And I also very early on in my career, I tried to sell a WordPress theme on ThemeForest and it got rejected a couple of times and I sort of gave up on that.

and you go like F word. That's

None. I didn't sell a single one. I put it on ThemeForest. I worked hard on it. Granted, at the end of the day, I'm not a great designer. I built a HTML and CSS and JavaScript of the this is way back in the day like, menu items sort of stuff that's not complete. So, yeah, I would use NAV. So it looks like menu is this part of the proposal here is that

Do you see how much more like to make? Yeah. Pre prebuilt rid. Hooks with React or something like that.

a portrait image in this landscape image slot. And then all of a sudden be upset when it's clipping or something like that. You're yeah. You will have to deal with a ton of that kind of stuff. Absolutely a ton. So

I'm sure they do make money.

menu tag versus the semantic nav tag in HTML. I was building out a menu component for our storybook library at work and it rabbit

templates or themes. It looks like a great source of passive income and something like creating an experience dev could whip up and sell online in the marketplace such The theme for us are directly on their own website. Love the courses and the podcast. Keep up the good work. So, Ben, I have personally tried to do this before, and I sold

It's a, it's a interesting world and one that I personally like, you saw initially and was like, oh, man, this could be A great way to make some money. And then was instantly like, oh, wait. I'm not actually good enough at doing this to make the kind of money that you would want to make off of it. I Have talked over the years to probably

2011. I did this thing on on theme for us. I made not a single penny off that. So what do I think? I think it's Probably a great way to make money if you're good at it. And the people who have the popular ones, the ones that are Highly configurable

themes for free. Rid. It becomes popular. You give away something for free. It becomes very popular, and then you can monetize

I'm also sure that it's going to be a lot of effort. So if if that sounds like the the type of effort that you would want to put into something like this, Like, go for it, but also be prepared that you could put this thing up there and not sell a single single copy of it. So, you know, to do import all .gq.ts

Next question we have here from Perry. When it is is it rid. Best to use the semantic Yeah, a schema. And in that schema you say, like, okay, I have a customer.

enough that you walk away

nightmare in order to fix people's weird CSS issues and whatnot. So you'd have to account for a lot of different Rid let's especially with GraphQL, you define your schema And then, like, you can generate your TypeScript types as well as your GraphQL types all from that. And that's really, really nice to be able to able to do that. So rid. I think you're you're sort of on the right track. It's it's a little bit more limited, but you definitely, I definitely would not want to do that. But it's worth releases something, they're usually the last one to implement it. And then, you know, okay.

Maybe I will. Should I start selling these?

and CSS

Or if you have, like, another like, I bet I could do this. Like, I have a large email list and a large following. If I were to whip up a couple January 18, Blink. Intent to ship prototype CSS subgrid. There you go. Rid. We talked about subgrid probably 2 years ago on the podcast.

So, like, it's It's definitely to have some sort of argument as to one is better than the other any anymore. They're all very, very good. Yeah. Use whichever one you like, whichever one you feel like. Don't be afraid to try another one.

That said, just passively listen to this and sort of get your head around so nothing is like a traditional link yet. Yeah. I don't want to confuse reader impaired people With the wrong context, I hope this gives a glimpse into my angst. What do you think, Scott?

Yeah, all of those. And like, I have I probably met 3 or 4 people that have made, like, it. Jaw dropping money

Oh, rabbit. Is it rabbit tailed or gone down a rabbit hole? Rid It's a rabbit hole.

themes for something, I mean, just give it a try. Who cares? Those people don't rid. Don't get it that it's like it's not it's not your mama's JavaScript being very high in the easy level, Rid. Absolutely not. No. There's

like layout like people people would see this thing be like oh of course I can put a portrait rid. Also in for just about the exact same reasons. So it's definitely something that I think is is more of this this new

I bet I could sell a whole bunch of them. Right? It's not something that I'm interested in, but if you have an existing following, like a podcast or email list, you probably could do it as well. Totally.

can they possibly get it Import Meta?

Also, there's a flip side of if you get locked out of your 1 pass or you don't have your recovery codes to get in. So that's kind of a downside as well.

So I will not tell you where I keep my codes. I will not tell you how to access them,

Rid Hey, guys. TLDR.

rid. Guy had his passwords on sticky notes all on the monitor, and I was like, like a what do you what do you call that? A schema? be able to build something in the next hour. Why? Of. He knows how servers work. There's not anything special about it except for a couple little gotchas here or there. Yeah. Just haven't done it.

make sure there is still And I've never

rid. Whatever you do with them, what are the 2 big ones that Miriam had?

buddy, buddy.

in a vault or something, like in a in a safe. I mean, that's not that's not a terrible idea. I think it's A lot of them will prompt you to print them as you you generate them. And then, yeah, you could if you've got

why would you put them in 1 password where your password also is? And the answer to that is because in order to get into your one password,

Yeah. Next question is from Anan.

You need the your your master password, and rid. You need to set it up from another device that has 1 password

You might say, like, oh, it's not kinda someone gets into your one password, then framework.

in some sort of other location? So that's one is where is it? Rid. And second is, like, how do I access them? Like, do I have to break into your house and break into a safe So to answer that is, rid. I don't know. I don't I don't think so.

That's pretty good, I think.

you still need 2 factors.

Don't do that. Yeah. Don't do that. It's it's it's funny, those types of things. I always love it when you're, like, watching a sports broadcast and they'll, like, cut to the announcer's booth, and there'll be, like, a sign in the background. It's like, Wi rid. My password is it's like it's like the the private Wi Fi network of the arena. Come on. Come on. So that's that's the answer is we're not going to tell you, but import that meta is kind of up to, you know, the system that you're working in Because it says on the MDN docs that import meta has a null prototype, meaning there's nothing inherently attached to import meta.

Keep them in the fridge. Call it cold storage.

Have them, like, written on a piece of paper in files. So import .meta.glob

I will tell you what your rid. Your possible options are. Some people put them in their one password.

Oh, that's good.

Yeah. This is not something that either Wes or I should be answering on a like a an archived medium.

in order to get it? Or if somebody breaks into your house, is there a piece of paper? Or is it on a sticky note? Oh, my gosh. We we went through a, Can you explain

Rid. I am not the type of person to give up that kind of security information.

are you need to know where are the codes? Are they in your house? Are they at your in laws? Are they in a safety deposit box at the bank? Is it in a safe, Welcome to Syntax. This is the podcast with the tastiest web development treats out there. We've got a potluck,

Other people use the web because everybody uses their own browser. Everybody has a browser of choice, and there's reasons why they like it and dislike it. And if you can Use the web in many different browsers. You can understand

Hi, guys. Great show. Been a listener since episode 1. That's impressive because that is a lot of listening. Rid Because of this, I wanna try another programming language.

it's just your mama's edge. Chrome under the hood, you know? Rid. Yeah. Yeah. I have been using Firefox for years, Firefox dev edition for years. It's been awesome. I've absolutely loved it. Rid. I noticed recently that, like, when I, like, come back from locking my computer, worth the try. I think what happens is that a lot of people give away

why would you use Edge as a Mac user?

I don't know, 3 months now, and it's been totally good. Somebody Somebody was on my YouTube channel comment being like, It's like endlessly fun to get to play around in three d. It's like being a little kid.

if it's up to me if if it was up to me, and then they're like, you're 1 browser on a desert island, I would probably pick Chrome. That said, I've been using Edge for the past, I kinda have the idea, or I've at least gained some exposure to know what the interview process is like. People people often like, they they fear the rejection of not getting a job. They fear the rejection of, No. This interviewer is gonna think I'm bad at code or something like that. But in my experience, client side code or your UI code I should say now granted I actually saw some Next question here is from Chris.

Bounce back and forth. Do whatever you want. Rid. Next question we have here from Alex Nielsen.

exactly how sites are going to feel on them and to the general feel of using these browsers. Now If you had to pick 1 browser, I don't know, probably just pick Chrome. It has the best support and, tutorializer,

laggy, and YouTube videos will stutter.

It's, How how

The the only reason why I like to do this personally is because, like, you get a feel for how How do you keep up on new technologies? If you use 2 FA, where do you store your recovery codes? There's no harm in going for an interview and not getting that job. Because every interview you go into, Which are 2 functions to do, like, fancier imports where you can do it based on a glob pattern.

And the easiest way in my experience to bounce back and forth between browsers is to always have extensions like A password manager like 1 password or something. And then, honestly, if I switch over to another browser, logging into my stuff isn't difficult because I have 1 password set up, And I can switch browsers all the time.

Yeah. We're in such a good spot with browsers these days where, like, it's really hard to

edge. You know? like developers like that. But more importantly, marketers like that, because then they're able to They added this and this and this. Now we can go ahead and start using this thing in all of our applications.

Like, this is not another Next. Js. Like, it does some of the same stuff. And yes, it uses React, but we're also going to There we go.

Io guide

because then we'll see, like, a lot of applications that are built on it. A lot of people have Sort of fleshed it out. See. And like I said, okay, we've we've built a real thing on this. Let's see where we're at with it. Yeah, I agree.

I I would say

Server rendered applications? like, what do you care about? 50 megs? Like, well, maybe he's running, trying to run code So instead of like using a ULLI, variables into your application.

And

Next. Js or in these other modern ones. But me, personally,

The same way that SvelteKit is

Sanity.

Exactly, yeah. And if you're not like getting it, I would probably just like sit on it for a little while. There's definitely A lot of hype around it right now. And you might also be put off by some of that because everybody's saying it's the best thing in the world. And I'm really excited about it as well.

I'm not, like, jumping off the Svelte kit boat to go to remix because

Sick. Cool. Alright. Next question here is from Miguel.

Well, let's, take a quick second to talk about another one of our sponsors today, which is Sanity.

If you're building a site with a remix rid. You can take advantage of something like Sanity. Right? There you go. I I wonder. Let's let's take a look here. Sanity. Io, of course. Of course. They have in November already, they had a blog post, how to build a remix website with Sanity.

syntax,

I don't know. I can try to remember when, but it wasn't it wasn't that long ago.

Client that that one's a little bit more similar to Next. Js, rid in in terms of how it's doing things. So Remix is taking a very different approach to things. There's also some really killer features in in terms of having, like, you know your server endpoints exist in the exact same files and routes as your server side running with client side hydration.

so I think you might be missing missing the the coolness of Remix. Maybe give rid Just a little test drive in C leg. Alright. This is kind of neat. I think that's part of the, the hardest thing for a remix is trying to explain to people, work with WordPress or whatever they need to work with. Either way, the ones that are are really well executed, to do it without the safety net.

and live preview, which is rid. Oh, that's cool. They've put their live preview in there. Let's talk about that for this ad read. What is live preview? has a list of things that are and included again in HTML 5.1

Io because that would be a really fun project for you to do.

is great for both of them. So And these things, they can be

issues and PRs around doing that exact same thing, which gets me very, very excited. Rid. I I saw that, and I was like, this is, like, the one feature from Remix that I really appreciated having was, like, the export of the, so that you still get that. So everything is a trade off in life. Yeah, it's it's tough to I mean, if you're wanting to use web tech

which is 2 letters or like you could regex it. Like like prop types is like that in in React where you can actually run code against it.

whatever the get data one is. I we just talked about this the other day. But either way,

they're called actions or, 5 links of new projects every single week.

You can also use, have So that's that's I think I think that's for canceling fetch requests, if I were to look at that. All been waiting on. Yeah.

And you change your data. You want to see that data reflected in real time when you're updating your website. Right. You don't have to push a thing and build it and say, oh,

Rid. But, like, maybe sit on it for 6 months, a year and then see where it is in in a year from now, be doing other frameworks as well. It's more like rid. If I've learned anything from checking out Remix, it's not that it's like another framework. It's that sort of methodology

Hey, guys. I've been listening to the show in the past year, and I have been loving it. I actually started listening Or if you follow people on GitHub that are constantly doing cool things, like, rid. If if I follow somebody like Swix, like Sean Wang, right, he he likes a lot of cool projects.

Io, That's

of the same benefits. Am I missing something? Yes. It's not 3 plus years old. So, I don't know. They don't have that much of a a head start. If If anything, the SvelteKit was starting to work on

for

working with the server side generating HTML and pushing that in you were to Just console log import dot meta itself. It would return an object with the URL of the current file that's being loaded.

in they're very different in a lot of ways. If you're comparing directly Remix rid To to SvelteKit, you'd be making the mistake of saying that Remix is a React framework like Node or Next. Js that's dealing entirely with React,

that will get you double the free usage tier,

Well, you're building these websites

Really, what Remix is doing is more

rid It doesn't look good or oops. I forgot something. So Sanity has this thing called live preview, which I've I've integrated with my Gatsby rid. As soon as you update the data

You're missing something because Remix is doing something very different than both socket as well as, about the current import that exists right now, the current file that we're working with, the current module. And it is it's it's Entirely there just to hold metadata thought Yeah. This is bizarre.

I don't know. The developer experiences

Into my angst, I I I love the,

Pretty sure I get rid. I think I've I have I have a nav tag. Inside of the nav tag, I have my h one

And it looks And it's also, like, kinda incomplete. Yeah. Because there's, like, There's, like, things in it that are listed all as,

And that That makes me feel good.

but it is now is still marked as experimental.

you know I would just use the nav tag and call it a day the thing about the the menu tag is you do have to Like, the menu tag is analogous to an unordered list as in it expects, like, list items inside of there, but a nav tag doesn't necessarily expect anything inside of it other than links.

navigating so really amazing dev tools and gets updated all the time. And there's a great team of people working on it, but, you know, it's

I, And I'll say, oh, that's an interesting repo. Let me take a look at that.

necessarily, but I would just use the nav tag and not worry about it considering menu tag or the the nav tag where,

Yeah. It's what actually do I let me let me look at Westbost.com.

I mean if you have like semantically what is the difference between a menu and a navigation in my mind absolutely nothing

And if your CSS fails for whatever reason, They'd all be mashed together if they're on the same line. And often many fires will do that. So rid. Eject out of something in order to get access to something that that I totally couldn't. So,

The difference between putting a link on each line and putting links beside each other because they're inline elements.

You'll want to check it in many of these browsers, and

You know what else I I really appreciate about,

Nav is kind of the way to go if you're doing a navigation.

Have launched a new UI for level of tutorials, which believe it or not, it's a lot of work, a lot of potential bugs, and there's been nothing like Having something like Century to be able to quickly and make sure that I can resolve any of my individual errors. And I was really just having a big error with our video player lately. And it was so nice after I marked that thing is resolved to be able to

an unordered list with the list item inside of it. I don't do that. Yeah. I just do straight up links and straight up links inside.

MDN. So, like, I I don't really know too much about if you should use the

Let's actually take a quick second to talk about one of our sponsors today. This episode is sponsored by Sentry at Sentry dot I o. It's the perfect to see all of your errors and exceptions happening in a lovely interface.

it's gonna be

the menu tag was listed as experimental

You do have to worry about Sanity to get Our special link, sanity. Ioforward/

I mean if it's changing the page route

Century is that they're always improving upon their interface. I feel like I say this, like, every other week, rid. But we I I mean, I'm in this thing all the time, and they just added some new little lines to their graphs showing you how frequency or how frequently these errors have popped up. I gotta love that, a product that's always improving on itself. So check it out at century.io.

see that this error has not popped up again.

Alright. Next question is from Tom. Tom says, as a newbie web dev, which browser do you recommend, Chrome or Firefox Dev Edition? I don't know. If if you're asking me personally, I would use the nav tag specifically because it's not listed as experimental, By writing a different word

It's the perfect place to capture all of your errors and exceptions, Handle them, track them, attach them to users, send them to GitHub, do all that stuff and more. It's just really a top tier tool. So you'll want to head to tree dot I o and use the coupon code tasty treat, all lowercase, all one word, and you will get to 2 months for free. Thank you so much for Century for sponsoring.

that's what it's there for. It's for page navigation.

and going down the rabbit trail. Rid. Alright.

So You know, like you said, you're defining the model. So it's the model for the the data, the interface, whatever. It it is just the individual types. And if that's what you need to think about it, yeah, I think that's definitely definitely a good way to think about it. But also, I mean, we have Graph rid. Is also just defining the types of things. And in in anytime you're working with data, it's always kind of a good idea to know what the types of your things are rid. R in JavaScript is is not necessarily unique language, but it's one of the more unique features in in the language of JavaScript. That fact that it is untyped And it will not typed. It's loosely typed in that JavaScript itself does not care about resigning types

But you know what it is like. All of our spas with The products are spas with no SSR,

It's funny that I I did see that the,

Yeah. That's what it's there for. The menu tag was deprecated in HTML 4.01 You're kind of screwed anyways.

you could just do like a menu with the anchor links inside of it, rid They've been working on that for months before that, and we're still not we're still not there. You know? So that stuff moves

I have like a Chrome, a Chrome Canary, a Firefox dev. I have

Descriptions above. So, yeah, there's nothing wrong with just having a nav tag and throwing your links directly in there.

And you know what? I love Sentry. I I've talked about this all the time, but I recently they're not really the exact same, and they're certainly not. Skull Kid's existence doesn't invalidate Remix's existence,

and then the h. R. Between both of them. They have labels. It seems like menu is not cooked. I would not use it. I would it's funny. Like, I would have said, like, oh, yeah. Menu.

Into a huge discussion over the following days with my team. Menu seem to be Used for things like mimicking desktop apps and NAVs used for linking around the site.

And I always tell people, if you hear about it 12 times, then check it out. Don't check it out now, rid.

Like 4 years ago when we started this podcast, there's there's a couple of things that have have spiked up here and there. But also it's rid. Just JavaScript, right? Like, as long as you are good at JavaScript, And I was just, like after we hung up, I was, like, you would a 100%

The GitHub app has an Explore page that's really super good for finding new projects. In fact, I I've been, like, very like, Alright. Next question is from Benjamin LeBron.

I'll occasionally open up my get up, and on the home page, it'll be like, Swix has starred this repo.

I try to keep up with everything coming out, but there's so much it gets extremely overwhelming. How do you even know what to keep up with? Okay. So yeah. This you know what? For me, variable to see if something's a string or whatever in in JavaScript.

rid In this industry, like, yeah, it moves quick, but I don't know. We're still talking about the same stuff we are talking about,

rid. And wanna maybe just even just have them in your brain? We go straight to your dome in the newsletter at the level up links every week, so, I I would prefer to write Svelte myself. To me to me, the that it's like you're either writing Svelte or you're writing React there. Maybe you're writing Svelte in the future for Remix. Who knows? That could be a thing. But Same benefits? is funny. West has a little list here, so I'll let him do his list. I'll just knock out a couple of mine here first. One one that people don't often say is the GitHub.

We guess we'll often answer it again. Listen to this podcast. Honestly, like, the reason why Scott and I dig into every little thing here and there, and Sometimes it flops and sometimes it doesn't is so that you don't have to. You Oh, I see. I see. Yeah. So Veeet has added those themselves. Rid. Right. They've augmented the import meta. I see. I okay. Because you could you could possibly do, like, some, like, dynamic generation there even if I'm thinking about, like, Blink is a Blink is is Chrome, that have not necessarily stumbled, but have gotten into really good little sneaky. Like specifically, Bootstrap sells their own themes now. Why? Because there was another company that was doing it for years that was cleaning up rid. On that. And it also happened with 8 when HTML 5 came along, people were selling them.

CSS Working Draft

rid. There's a GitHub repo of people who have done this, whether it's Bootstrap themes, WordPress themes, tailwind themes, Magento themes.

say it's 6 months ago. Yeah. Yeah. Not November, December, January. Yeah. Almost 4 months ago 4 months ago. Yeah. We talked about this, and in in, like, Tailwind, you could have, like, blue, red, green, and then you could have 100, 200, 300, 400, 500. Right? So, like, between those 3 colors and those 6 weights, installed. Right? So you physically need a secondary device.

Blink intent to ship prototype abort signal that time out Static method.

very, very quickly. Like Scott Scott was saying in the last episode, man, I haven't done any serverless.

in reality, I have a newsletter where I publish

I found a quite a bit of things from the GitHub Explore page.

Rid. But by the 12th time that we talked about it, then, yeah, maybe it's time to start checking out. Right? And unless you're super into being early and excited about new stuff, You don't necessarily have to check it out until

I follow a lot of really smart and interesting people on Twitter who are doing a lot of interesting things. And the cool thing about interesting and smart people is that they tweet out a lot about the stuff that they work on, and then you can pick up in in get a good handle on it. Another one that people often don't say I have all of these Safari technical preview. I have all these browsers on my computer.

Subscribe to our our mailing list. Straight to your dome. I like that. Subscribe, folks.

I'm getting out of date. I'm falling behind. You have to, like, not check out anything for a very, very long time to fall behind

So

So there's that

Rid. If you follow the right people, man,

especially Safari because when Safari They are awesome. We'll talk about all of these companies partway through the episode.

everybody's figured it out, and then it's time for you to look in. Like, you may think like, oh, I'm of approaching

Because it will probably change or it might flop or,

interesting and and smart people, people who are diving into cool new projects all the time, those Those kind of people are always looking out for stuff and are always finding new things. So follow those types of people. Follow me and Wes on on GitHub and Twitter. And, You'll buy all of our courses and do all that stuff as well while you're at it.

transcript proposals.

And then by the time it's actually implemented in the browsers, might be another 6 months, a year. So Just look at stage 4. By the time it hits stage 4, though, sometimes it's

So I'll post a link to that newsletter in this show notes. But if you were looking for new things all the time

Rid Now that it's in Safari, we can start using it everywhere. So just read the release notes of Safari and say, like, oh, they added It's not a trail.

then you'll be able to that traffic and and people, Very, very generous. Thank you, Sanity, for sponsoring.

Firefox has really good release notes, safety deposit box or if you have a safe in your house, which is additionally protected by a layer of door locks.

Now I'm joking on that last one. But, And we use it, yeah, glob eager, and that that's pretty much it. But I'm not doing anything fancy to get this working

Rid Good day, queries, and likes. Yeah. So, like, we talked about that.

there will be 6 major versions before it's stable.

and just, like, look at the, like, running remix trailed.

which is Itweet when browser makers announce their intent to ship, rid change or remove features to their web engines.

Stage 4, JavaScript approvals. So take a look at, Rid. So that is wicked. Check it out. I'm going to link to the Sanity.

the scope of what's out there and what things are and what they're for.

kinda interesting.

We've answered this so many times. This is rid. The most common question that that people get. Like, hey. Like, how do you possibly know what's new? How do you keep up? It seems like it changes so quickly. We've answered it many times, but like, the core node.

love looking at stage 0 just because it's you see what people are dreaming up for the language. Rid. But, like, it'll be a year or 2 before that stuff actually gets approved.

Safari have really good release notes. And when those things release, it's worth taking a look at. Rid. I definitely wouldn't just start a store because I guarantee you that will flop, but start by giving away a whole bunch of stuff.

environment,

large. They can be hefty, certainly, but that is kind of the price you're paying for that ease of use. If you're wanting, like, a small native app, Tom, I recommend you utilize and use mini browsers because you'll besides wanting to check your application, especially in Safari, you know, open mindedness and get the job still, or you could go with just not do it at all and never gain that experience. Yeah. So in my opinion, apply early, apply often, apply frequently, So or a no prototype, so to say.

a very low level chip rid. Sets or, like Mhmm.

Desktop tools and generally, I reach for Elektron. The thing is that no Elektron tools are kind of huge in file size. Even Compressed, it's impossible

to

For chips are not writing JavaScript that runs on the chip. They're writing lower level language. And the the easier it is to program stuff,

There's been like, I think back to the episode we just did on Cloudflare Workers.

more languages that are are closer to the metal there. You're gonna be getting into your your c's, your rests, rid. You're those types of things to and you're probably gonna have to do your whole visual layouts using GUI kits in those things if you don't want to get the browser involved.

Rid. They have made their own version of JavaScript Next rid. Question from here is from long ago was that? Let's look. Rid November 10th and often they'll have, like, see what it looks like before you hit the publish button. Right.

but without the need for a browser framework to run compiled. So that's kind of interesting. It's like, yeah, you think about, can maybe. Oh, that's interesting. I love going down those little, Little rabbit holes. But, like, that's pretty clear that you probably shouldn't use menu. It's it's like half cooked and not really supported. So On, like, a camera or something like that. Right?

Rid. And I'm assuming because it is fast and small.

rid Native native, you're gonna get into

On a very small device like a Raspberry Pi or integrated circuit. Like, there's a reason, like, people writing code

I'm a front end developer with all kinds of stuff in JavaScript, also Node. Js for small rid. And you are you're pooched, right? You need 2 things. You, the

To have empty apps less than 50 megs.

Make native apps. There is going to be the the browser is the limitation there. Whether you are using electron or there's a new rust based one called the Tori, Which, We use it for glob eager, which is a function in.

Taurei, t a u r I, Taurei.

without the need More of a runtime spec, You need to think about 2 things. Like if somebody's going to get access to

a browser based or node based environment, and it doesn't work in thing and then a list item. And then I think I did that because you have a bit more control over That's

I don't want to do something like C or Java because likes and retweets. I'm trying to find one that, like, Where if you have, like, 2 unions, like, for example,

the more that comes along with it in terms of, like, it has to run-in this very special Awesome. And then you go tell your wife, like, can you believe it? Like, that's the kind of I think that's one thing that's not talked about is there's lots Very quiet people in very niche corners found that I have to, like, You are defining I mostly work on the same 3 JavaScript apps for my company, and they all use Webpack and .env.

I'm gonna ask a question. I'm gonna let rid Got answer it here because Scott is a little bit more,

to the syntax of JavaScript, Rid. And then I have to, like, just wait a couple of minutes and it will fix itself. So, like, that's kind of annoying. I don't know what it is. I haven't looked into it too much. But,

Yeah.

Which is I using an HR will create a separator.

And even then, there are explicit limitations that they have put in place that just is you can still write JavaScript, but they've written their entire interpreter at Cloudflare.

But I personally don't I don't know of any JavaScript like thing that exists in that regard. You know, maybe the closest thing you could come up with would be React Native. I know there's this is so so stupid, but there's a react native and a react native web, which allows you to write websites using react native. I wouldn't be surprised There's, like, a React Native desktop or something as well. And then you're kind of writing JavaScript, and it's probably not gonna be electron based, but I honestly have no no clue there. Rid I I do think if you're if you're wanting to write JavaScript or whatever, you're getting into this web tech, you're gonna have the browser as an overhead.

they have imported the data properly. Right. Like there's

I've looked at several basic TypeScript tutorials, but I've never heard anyone draw the comparison. So I'm wondering if I'm on the right track. It kind of is like he so he is talking about when I'm making a database, are you making you're working with any database.

Rid. I don't know. Did you find something? Because I would love to be able to do that. I I swear I saw somebody on on Twitter being like, holy cow, you can do this. And it was rid. An edge and edge dev, whatever, Safari.

rid.

and all that. So it's very, very similar. It's not as full featured as trying to get this up? Like, there's just nothing I hate.

And then For those, the user would need some sort of framework to run such apps. Is there something similar that,

I'm just starting to dabble with TypeScript. I've never used a typed language before. I've done some MERN Stack projects before, but I'm trying to decide if TypeScript types Are like creating

a rid. Got really, really popular.

must be

rid, rid In in one thing. Like like, one way they could get it is you put it in your backpack and someone steals your backpack. They did one thing there, amazing

like many, many combinations. And you can generate those possible options use the newer import dot meta feature, 2 steps in order for a malicious actor to get to them. Yeah. It's not entirely a bad idea to And they'll have courses, which is relational to another model, And for me, what do I do? I'll use a NAV tag. And then inside of that, I'll still use with backticks

How? I'm I'm nearly positive you can. Let me I'm pretty positive you can. Okay. Well, well, rid. I'll do some digging. And then if I find something, I'll speak up in the Another thing you can do is you can also generate your types

Specifically, my SQL is, like, 18 different types of numbers that you can store in it.

we want people to pick from a list of, Or you can there's a couple of different types of strings. Often, these ORMs will have validation built in. That's kind of one thing that TypeScript doesn't do. You say it's a string. But you you can't say rid. It's a string that starts with a capital, and it,

to things, rid. But things do have a type. You use the type of

a pretty common thing to do because

tight,

TypeScript string with length because on our users. Tech website, With Sanity.

like a really, really

You can't At least I did never found a way to say this is a string, but only a string with the length of 2 things. You can say it can be,

So I don't know. I'm going to keep looking for it, but I swear I saw somebody talking about it. I haven't done it personally. What was it the, like types from a template string

their own entry,

And it will automatically generate all every permutation of each of those colors and weights.

are on the right track there. Yeah. And and it I mean, it is. It's just describing

in that, you're going to say the customer will have a name that's a string, a number or an age, which is a number.

in TypeScript. And you can just put like your your recovery, two factor recovery codes,

what the types of your things are, whether that is,

To answer your question, our our I just googled it's a while. The pandemic. The reason why they started it is because their training business fell apart when the pandemic hit. So they had to pivot to something else. So 2 years a lot of these database ORMs are in that 4 or 5 being proposed and whatnot. Again, we'll have those people on the podcast and talk about stuff that's coming down the pipe. Like

if you could do that in TypeScript, because I often think like even on our users. Tech, rid. We have a whole library that does the validation. When somebody submits, I'd rather put my energy into SvelteKit, which has a 3 plus year head start And seems to offer 99% It moves fast in relation to, like, adding new features, but like not fast enough that you're going to hear about it on syntax. And then 2 months later, it's everybody's using it. It goes much slower than that. There's a Twitter

to a string in JavaScript or in TypeScript.

NZ or like, you can list out all the possible options, but I've never found a way to say, just give me a string with,

There's a whole GitHub action that validates the data to check that

between 7 and 8 letters long. Right? There's no validation. You could do that in Type ripped. Couldn't you? No. No. Like, you if you were to, like, set a string to something in TypeScript, in half of the browsers already.

you can have, just had a bit of issue with my microphone, as you know, and that always sucks. It makes me and a u l with the actual Import all markdown files and then the meta would have this specifically generated it's a little bit, like, that is used to inject your environmental

So that maybe that was it. Yeah. I'll I'll keep my brain on it, and I'll let you know if I I think of something. But you're right. I mean, until I can prove you wrong, you're you're totally right. Well, tweet us. I would love to be proved wrong here because that would be

Mhmm. Like, sometimes people will put country none. You know, like, that's not a country. You know, you can't put none in there. So, like, it'll validate and and fail the pull requests on them. Okay. Well, let's move on.

like phones and countries and things like that. And like you say, like, okay, give me a country code that is 2 letters long.

it wouldn't it wouldn't actually validate that the string inside of that it. Meets your your values, does it? Yeah. You could do stuff like that.

from your database.

Russell Williams.

just hanging in there. Just hanging in, getting getting stuff going. I've been playing a lot in 3 d lately in dude, I'm having so much fun. I'm making generative art. I'm making, Their their system is adding things. So, like, what is in

Lots of good questions today. We are sponsored by 3 awesome companies. We got Sentry, does error exception and performance tracking of your applications.

How are you doing? I'm doing great. I,

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

I think I think it was dirty power at the end of the day. Rid. Gotta be dirty power. Gotta be dirty power. Alright. Let's get on into it. 1st question is Do you know a programming language which is similar syntax to JavaScript in your back end, it will immediately render on the front end.

Sanity is the structured content CMS.

HTML spec when to use a menu versus a NAV tag.

just a little pattern. I saw some animations. Instagram.

from And FreshBooks Cloud Accounting.

I'm doing good. Just,

Scott and I will answer them for you. We got lots of really good questions about, rid. Webpack and .env

Rid. Where do you keep your 2 factor recovery codes? So stay tuned if you wanna rob us.

I was I was kind of spiraling. I was like, am I going to be spending my whole day what other stuff could possibly be attached to it? Because the docs just say it's an object with a URL property. It's a string. Yep. And, Like, that'd be very easy to type. So Vite inserts, a real estate showing the other day, and the freaking featured in it. So this question is from Anand. Lot of Anand people asking questions today. I'm not feeling the hype for remix.

Rid. Like, I don't mind, like, debugging computer problems or whatever, but, like, when you got a lot of work to do and then when it's, like, rid. Audio related, which is kinda outside my wheelhouse. I'm just like, oh, my gosh. Like,

failure along the way. But

importing modules, Finally, I've built complicated apps without Next.

You submit the questions.

How you doing today, Scott?

all these that's the thing with having such a big Set up as you just introduce more points of

It's just fun.

Can infinite loop or it can do this or can do that? It's like, well, why can't it do it for me? Why do I have to worry about that? Or even, like, You should memoize things that don't change. Well, why why do I have to do that? Like, I don't wanna have to be responsible for those types of optimizations

you know, accessibility my application could have, or any of these things. Like, do more for me, and let me focus on making the fun stuff. Absolutely. I agree. I don't think

rid. Yeah. Like being dominated by your code.

and,

on the inside, both on the front end and back end, as architecture and logic is already defined.

It's always just like, oh, wow, this is this is really nice. Oh, wow. You gave me the clear params in an object. Oh, wow. This is like the stuff that they do add and is just is all really nice.

Like deploying and continuous inter a lot of that is, like, the the where Vercel ends and Next. Js starts is kind of blurry for a lot of people.

You still have to understand how the server works. You still have to understand how this you definitely don't know have to to know how SSL certificates And they're kind of different ideas. Remix has been in the works for

Rid. This is a tedious thing that you have to do on every project, or maybe it's a security based thing. You know, it's like things like I think about I know, like, in React, it's like useEffect

I don't know. You some sort of sicko. You like things to be harder for you, I guess. But

Or those types of little things, interviews, just like many other things, are just as much of a matter of practice as they are anything else because you could go into a job interview with

And absolutely. Take all that stuff away from me. I've never felt

You know, there's there's so many little things where you're like, wait. Why why can't you just do this for me?

I've I've built complicated apps with Next.

because the more things I'm responsible for, it's the more things I have to keep in my brain, the more things that I could potentially break, The worst performance I could accidentally have, the worst,

And I don't think about it too deeply.

What's next, Scott? Next question is from John Ferguson.

So Webpack

is a JavaScript bundler and .env is a package I I rid. Canada, CA or US or

Alright. I have the thing. It's done, but I don't necessarily feel confident

Then you look it up after the interview. You crash and burn. You look it up after the interview. Next interview, they say, hey. Do this for a while then you say,

when you're working in tutorial code, Like, make it your own in some sort of way. Adapt it and don't

rid. Then what the teacher's doing, you're therefore not essentially painting by numbers as much. You're kinda having to think why was this thing named to be this thing? Why did I write this thing at all in the 1st place? Rid. What is this thing that I'm actually working with?

every code test you you take is practice for the next one. You go into a job interview, they say, do this food bar baz thing. You say, oh, I don't know how to do that.

Do you guys have any advice on getting unstuck from tutorial hell? And at what point do Do you think someone is ready to apply for junior web dev jobs? Okay. So this is a common thing I see, especially from newer developers all the time, is that they get in this mode where they're just constantly following paint by the numbers, paint by the numbers, and doing the tutorial.

You should be thinking about in terms of, like, when should I start applying? Apply for jobs.

the mentorship you needed to become a great developer. Beautifully put. I don't I don't think I have anything to add to that. That was that was really well put. Well, thank you.

get that experience for what job interviews are going to be like. And maybe you land the job, and maybe that job turns into,

Gonzalo Diaz.

the teacher's doing. Right?

mediocre skills but confidence validation

Do you feel frameworks like Next. Js, Remix, etcetera, extract too much of the complexity that it takes to build full stack web apps. I've dabbled in these frameworks, and it's a breeze to build a project. It's a matter of hours to get something,

if if if somebody's doing like a project or tutorial that's a to do list, Change it to be something that's like a grocery list. It's a very it's the exact same thing. It's very similar. You're gonna be doing the same techniques, but just the simple act of read. Writing different words down than what the the Neat SvelteKit Oh, so that's neat.

I can do that.

and going out in writing a ton of my own code, you know, or it can feel maybe more intimidating

rid. Get rack up that practice,

when I decided that I wanted to start a career in web development. I've taken several recommended courses, including Wes's beginner JavaScript and Scott CSS tutorials, but I feel like I'm stuck in tutorial hell for a while now. I know that I wanna be a friend developer, but I'm not sure if I have the skills to be one yet.

and,

And it takes you out of that headspace a little bit. But in as far as, like, what on, then you would have to type your import meta somehow. I have not had to type import meta. In fact, I'm just, like, now realizing that it was set to any. That's why I haven't any type issues with it. But, again, it's really just a location for things to be attached to Any given individual file that you're importing Yeah. And there's nothing essentially standardized about it except for the fact that there'll be the URL of the current file loaded up in there. Rid. So, like, what other the semantic HTML angst. Yeah. This one's this one's interesting. I You know what? I don't know too much about the HTML menu tag essentially even before this post. It's not widely used.

Now I I typically often have the same advice for these kind of situations is that when you're