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

Welcome to Syntax. This is the podcast with the tastiest web development treats out there. We've got a potluck, Your favorite today.

You submit the questions.

Scott and I will answer them for you. We got lots of really good questions about, rid. Webpack and .env importing modules, the HTML spec when to use a menu versus a NAV tag.

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

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

Sanity is the structured content CMS.

And FreshBooks Cloud Accounting.

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

How you doing today, Scott?

I'm doing good. Just, 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,

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

It's just fun.

It's like endlessly fun to get to play around in three d. It's like being a little kid.

How are you doing? I'm doing great. I, just had a bit of issue with my microphone, as you know, and that always sucks. It makes me want to I was I was kind of spiraling. I was like, am I going to be spending my whole day trying to get this up? Like, there's just nothing I hate.

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, all these that's the thing with having such a big Set up as you just introduce more points of failure along the way. But 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 from Russell Williams.

Can you explain Import Meta? I mostly work on the same 3 JavaScript apps for my company, and they all use Webpack and .env.

So Webpack is a JavaScript bundler and .env is a package that is used to inject your environmental variables into your application.

Rid. So when I never use the newer import dot meta feature, I've been checking the newer build tools rid. In personal project, I'm suddenly seeing import dot meta everywhere.

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.

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

I have 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

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.

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.

Their their system is adding things. So, like, what is in 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.

But when you do do, like, an import, let's say you were to 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.

So it's basically this is information 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 of which that metadata is is nothing explicit. So TypeScript is going to most likely say that 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.

Import to dot meta.

Let's see.

Also, our import meta, We use it for glob eager, which is a function in.

We use it for EMV variables, which are set via 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 With TypeScript, so to say, because import dot meta is set to any is typed to any for me.

So if you had no any 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

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,

whatever they have in here. So, like like I said, there's import to .meta.glob and glob eager, Which are 2 functions to do, like, fancier imports where you can do it based on a glob pattern.

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, Import all markdown files and then the meta would have this specifically generated markdown, whichever file. Okay. I can't. We can't. We actually use it in Gquery

to do import all .gq.ts files. So import .meta.glob

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

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.

So or a no prototype, so to say.

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

Alright. Next question is from Benjamin LeBron.

Rid. Benjamin says, what are your thoughts on publishing and selling HTML and CSS 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 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 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 work with WordPress or whatever they need to work with. Either way, the ones that are are really well executed, I'm sure they do make money.

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

4 or 5 people who have done this, whether it's Bootstrap themes, WordPress themes, tailwind themes, Magento themes.

Yeah, all of those. And like, I have I probably met 3 or 4 people that have made, like, it. Jaw dropping money enough that you walk away and you go like F word. That's 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 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.

That said, 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.

So, like, it's It's definitely worth the try. I think what happens is that a lot of people give away themes for free. Rid. It becomes popular. You give away something for free. It becomes very popular, and then you can monetize that traffic and and people, 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 nightmare in order to fix people's weird CSS issues and whatnot. So you'd have to account for a lot of different

potential like layout like people people would see this thing be like oh of course I can put a portrait 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 definitely would not want to do that. But it's worth 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.

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 themes for something, 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.

Maybe I will. Should I start selling these? Do you see how much more like to make? Yeah. Pre prebuilt rid. Hooks with React or something like that.

Next question we have here from Perry. When it is is it rid. Best to use the semantic 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 trailed.

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

It's not a trail.

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.

But you know what it is like. All of our spas with The products are spas with no SSR, 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?

Into my angst, I I I love the, 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.

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

It's funny that I I did see that the, the menu tag was listed as experimental in MDN. So, like, I I don't really know too much about if you should use the menu tag or the the nav tag necessarily, but I would just use the nav tag and not worry about it considering that's what it's there for. It's for page navigation.

I mean if you have like semantically what is the difference between a menu and a navigation in my mind absolutely nothing I mean if it's changing the page route it's gonna be navigating so 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.

So 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, and I, thought Yeah. This is bizarre.

Yeah. That's what it's there for. The menu tag was deprecated in HTML 4.01 and included again in HTML 5.1 spec, but it is now is still marked as experimental.

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

using an HR will create a separator.

So instead of like using a ULLI, you could just do like a menu with the anchor links inside of it, 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.

And for me, what do I do? I'll use a NAV tag. And then inside of that, I'll still use

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.

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

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 a u l with the actual thing and then a list item. And then I think I did that because you have a bit more control over each of the items, especially because I've got little Descriptions above. So, yeah, there's nothing wrong with just having a nav tag and throwing your links directly in there.

You do have to worry about The difference between putting a link on each line and putting links beside each other because they're inline elements.

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

going down the rabbit trail. Rid. Alright.

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.

And you know what? I love Sentry. I I've talked about this all the time, but I recently 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 see that this error has not popped up again.

And that That makes me feel good.

You know what else I I really appreciate about, 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.

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.

Alright. Next question is from Tom. Tom says, as a newbie web dev, which browser do you recommend, Chrome or Firefox Dev Edition? Tom, I recommend you utilize and use mini browsers because you'll besides wanting to check your application, especially in Safari, You'll want to check it in many of these browsers, and I typically would have I have like a Chrome, a Chrome Canary, a Firefox dev. I have rid. An edge and edge dev, whatever, Safari.

I have all of these Safari technical preview. I have all these browsers on my computer.

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.

The the only reason why I like to do this personally is because, like, you get a feel for how 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 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, 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 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 don't know, 3 months now, and it's been totally good. Somebody Somebody was on my YouTube channel comment being like, why would you use Edge as a Mac user?

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 edge. You know? It's, 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, it's a little bit, like, laggy, and YouTube videos will stutter.

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. We're in such a good spot with browsers these days where, like, it's really hard to 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.

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

Hi, guys. Great show. Been a listener since episode 1. That's impressive because that is a lot of listening. Rid 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 models in Mongoose.

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.

You are defining a like a what do you what do you call that? A schema? Yeah, a schema. And in that schema you say, like, okay, I have a customer.

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

And they'll have courses, which is relational to another model, and all that. So it's very, very similar. It's not as full featured as a lot of these database ORMs are in that often they'll have, like, Specifically, my SQL is, like, 18 different types of numbers that you can store in it.

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, must be 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, 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.

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

from your database.

That's a pretty common thing to do because 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,

are on the right track there. Yeah. And and it I mean, it is. It's just describing what the types of your things are, whether that is, 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 to things, rid. But things do have a type. You use the type of variable to see if something's a string or whatever in in JavaScript.

To answer your question, our our I just googled TypeScript string with length because on our users. Tech website, we want people to pick from a list of, rid, like phones and countries and things like that. And like you say, like, okay, give me a country code that is 2 letters long.

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, rid. Canada, CA or US or 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, 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.

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 like a really, really tight, validation to a string in JavaScript or in TypeScript.

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

Where if you have, like, 2 unions, like, for example, 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, you can have, like many, many combinations. And you can generate those possible options with backticks in TypeScript. And you can just put like rid.

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

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

amazing 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, their own entry, There's a whole GitHub action that validates the data to check that they have imported the data properly. Right. Like there's 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.

Next question here is from Chris.

If you use 2 FA, where do you store your recovery codes? Yeah. This is not something that either Wes or I should be answering on a like a an archived medium.

So I will not tell you where I keep my codes. I will not tell you how to access them, whether that is physical or digital or whatnot.

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

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

You might say, like, oh, it's not kinda someone gets into your one password, then You're kind of screwed anyways.

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.

Rid people always ask us, like, why even with the 2 factor codes in general, 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, you still need 2 factors.

You need the your your master password, and rid. You need to set it up from another device that has 1 password installed. Right? So you physically need a secondary device.

You need to think about 2 things. Like if somebody's going to get access to your your recovery, two factor recovery codes, can they possibly get it 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, rid. And you are you're pooched, right? You need 2 things. You, 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, 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 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, a real estate showing the other day, and the freaking rid. Guy had his passwords on sticky notes all on the monitor, and I was like, buddy, buddy.

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

rid. Whatever you do with them, make sure there is still 2 steps in order for a malicious actor to get to them. Yeah. It's not entirely a bad idea to

Have them, like, written on a piece of paper in

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 safety deposit box or if you have a safe in your house, which is additionally protected by a layer of door locks.

That's That's pretty good, I think.

Keep them in the fridge. Call it cold storage.

Oh, that's good.

Yeah. Next question is from Anan.

Rid Hey, guys. TLDR.

Do you know a programming language which is similar syntax to JavaScript without the need More of a runtime framework.

I'm a front end developer with all kinds of stuff in JavaScript, also Node. Js for small 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 have empty apps less than 50 megs.

Because of this, I wanna try another programming language.

I don't want to do something like C or Java because For those, the user would need some sort of framework to run such apps. Is there something similar that, to the syntax of JavaScript, but without the need for a browser framework to run compiled. So that's kind of interesting. It's like, yeah, you think about, like, what do you care about? 50 megs? Like, well, maybe he's running, trying to run code On a very small device like a Raspberry Pi or integrated circuit. Like, there's a reason, like, people writing code 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, JavaScript being very high in the easy level, the more that comes along with it in terms of, like, it has to run-in this very special environment, Which is a browser based or node based environment, and it doesn't work in a very low level chip rid. Sets or, like Mhmm.

On, like, a camera or something like that. Right? So to answer that is, rid. I don't know. I don't I don't think so.

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

Rid. They have made their own version of JavaScript that just is you can still write JavaScript, but they've written their entire interpreter at Cloudflare.

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

And even then, there are explicit limitations that they have put in place

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 to 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, Taurei, t a u r I, Taurei.

Yeah.

And these things, they can be 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, rid Native native, you're gonna get into 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.

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.

I'm gonna ask a question. I'm gonna let rid Got answer it here because Scott is a little bit more, featured in it. So this question is from Anand. Lot of Anand people asking questions today. I'm not feeling the hype for remix.

I'd rather put my energy into SvelteKit, which has a 3 plus year head start And seems to offer 99%

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 I don't know. I can try to remember when, but it wasn't it wasn't that long ago.

And they're kind of different ideas. Remix has been in the works for 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

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, where, Really, what Remix is doing is more working with the server side generating HTML and pushing that in more so than it is The same way that SvelteKit is server side running with client side hydration.

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 client side code or your UI code I should say now granted I actually saw some Neat SvelteKit 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, they're called actions or, whatever the get data one is. I we just talked about this the other day. But either way, I I would say You're missing something because Remix is doing something very different than both socket as well as, Next. Js or in these other modern ones. But me, personally, I'm not, like, jumping off the Svelte kit boat to go to remix because 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? I don't know. The developer experiences is great for both of them. So they're not really the exact same, and they're certainly not. Skull Kid's existence doesn't invalidate Remix's existence, 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,

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 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 of approaching Server rendered applications? 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.

Rid. But, like, maybe sit on it for 6 months, a year and then see where it is in in a year from now, 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.

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

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.

Io, 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? Well, you're building these websites 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 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 in your back end, it will immediately render on the front end.

And like developers like that. But more importantly, marketers like that, because then they're able to see what it looks like before you hit the publish button. Right.

Rid. So that is wicked. Check it out. I'm going to link to the Sanity.

Io guide for running remix With Sanity.

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

You can also use, Sanity to get Our special link, sanity. Ioforward/ syntax, that will get you double the free usage tier, which is Very, very generous. Thank you, Sanity, for sponsoring.

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

Hey, guys. I've been listening to the show in the past year, and I have been loving it. I actually started listening 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.

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.

Alright. I have the thing. It's done, but I don't necessarily feel confident and going out in writing a ton of my own code, you know, or it can feel maybe more intimidating to do it without the safety net.

Now I I typically often have the same advice for these kind of situations is that when you're when you're working in tutorial code, Like, make it your own in some sort of way. Adapt it and don't 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 tutorializer, the teacher's doing. Right? By writing a different word 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? And it takes you out of that headspace a little bit. But in as far as, like, what You should be thinking about in terms of, like, when should I start applying? Apply for jobs.

There's no harm in going for an interview and not getting that job. Because every interview you go into, 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.

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, I can do that.

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, 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 mediocre skills but confidence and, 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, rid. Get rack up that practice, get that experience for what job interviews are going to be like. And maybe you land the job, and maybe that job turns into,

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.

Next rid. Question from here is from Gonzalo Diaz.

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, up and running. But I sometimes feel I am not really learning how things work on the inside, both on the front end and back end, as architecture and logic is already defined.

And I don't think about it too deeply.

Rid. Absolutely not. No. There's I've I've built complicated apps with Next.

I've built complicated apps without Next.

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

And absolutely. Take all that stuff away from me. I've never felt like I'm too far away from, like, the core node.

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.

And I've never found that I have to, like, rid. Eject out of something in order to get access to something that that I totally couldn't. So,

absolutely not. Yeah. I almost feel like frameworks don't give you enough sometimes.

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? 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 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 Or those types of little things, 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, 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

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

rid. Yeah. Like being dominated by your code.

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

How do you keep up on new technologies? 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, 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 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.

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, I found a quite a bit of things from the GitHub Explore page.

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.

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

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

Rid. If you follow the right people, man, 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.

Now I'm joking on that last one. But, in reality, I have a newsletter where I publish 5 links of new projects every single week.

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

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

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 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 can just passively listen to this and sort of get your head around the scope of what's out there and what things are and what they're for.

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

Because it will probably change or it might flop or, there will be 6 major versions before it's stable.

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 everybody's figured it out, and then it's time for you to look in. Like, you may think like, oh, I'm 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 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, 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, then you'll be able to very, very quickly. Like Scott Scott was saying in the last episode, man, I haven't done any serverless.

And I was just, like after we hung up, I was, like, you would a 100% 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.

Rid. Another big one, browser release notes. So specifically, Firefox has really good release notes, and Safari have really good release notes. And when those things release, especially Safari because when Safari releases something, they're usually the last one to implement it. And then, you know, okay.

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 They added this and this and this. Now we can go ahead and start using this thing in all of our applications.

Stage 4, JavaScript approvals. So take a look at, rid. There's a GitHub repo of transcript proposals.

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

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 in half of the browsers already.

So there's that CSS Working Draft has a list of things that are being proposed and whatnot. Again, we'll have those people on the podcast and talk about stuff that's coming down the pipe. Like what are the 2 big ones that Miriam had? Rid Good day, queries, and likes. Yeah. So, like, we talked about that.

How how long ago was that? Let's look. Rid November 10th 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 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 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 called Intent to Ship, which is Itweet when browser makers announce their intent to ship, rid change or remove features to their web engines.

Oh, so that's neat.

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

So that's that's kinda interesting.

I think I think that's for canceling fetch requests, if I were to look at that. All been waiting on. Yeah.

Rid let's and just, like, look at the, like, likes and retweets. I'm trying to find one that, like, rid. Got really, really popular.

There we go.

January 18, Blink. Intent to ship prototype CSS subgrid. There you go. Rid. We talked about subgrid probably 2 years ago on the podcast.

Finally, Blink is a Blink is is Chrome,