Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!

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

to Syntax. This is the podcast with the tastiest web development treats out there. My name is Wes Bos. I'm a full stack developer from Node. And with me, as always, is mister Scott Tolinski. How are you doing today, Scott? Hey. I'm doing good. Just hanging out. Just hanging out. Landon had his 1st trip to the urgent care. He slipped and fell and sliced open his gin, and we were Oh, yeah. It was super bad that we're

very convinced he was going to need stitches. And then they did surgical glue. But, man, he's the little champion. He did not even like he didn't even bad night. They were pulling open his cut and whatever is fantastic.

Oh, rough.

Yeah. That what what Wes the ER look look like right now? Well, it was well, we went to an urgent care, which isn't technically not the same thing. It's sort of just like a little shack.

It Wes chill. There was nobody there. They had us all in their our own little section, and Landon wore his Incredible Hulk mask. And we all just sort of hung out, and it it was fun. I mean, it it was definitely, like, not not bad at all. I was a little concerned going in, but it it was all good. That's good.

Alright. Today, we are sponsored by 2 awesome companies. First one is Sanity, which is a structured content CSS, and Sentry, which does all of your error and exception tracking. We'll talk about them partway through the episode.

So, Dave, today, we've got a potluck going, which, we I was looking at the the thing, and we used to do a potluck once a month, and it's been 5 weeks since we've done a potluck. So long, long overdue.

And these are just questions that you submit, and we will answer them for you. If you have a question you'd like to get on the show, go to syntax.fm.

In the top right hand corner, there is a button that says ask a poll Wes. Go ahead and pop it in the box, and, we will probably answer it on the show. So let's grab the first one. The first one is from Ryan. Hey, syntax boys.

You've talked a couple times in the past about security concerns around target equals underscore blank.

Just a quick reference, episode 2 Sanity Node, we dove deep into why target underscore blank could be a possible security issue, but mostly isn't anymore because the browsers have sort of fixed that. But it says, you mentioned how adding rel Node opener and or rel no refer can secure this functionality, but what's to stop a savvy person from going into dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose? Or for what? Surely browsers have thought of this, and it's not so easy to hack. So the question JS, okay, like, putting no opener, no referrer on a link fixes the security Node, but, like, what if somebody takes it off? That's what's referred to as a self XSS, self cross site scripting, meaning that the user has to intentionally go and disable it. Like like, what if you take your parachute off when you jump out of a plane? Right? Like, these are things that the user would have to intentionally do themselves, and then there's also, like you have to be very technical. So, like like, why would a technical user even even do that? The reason why I picked this question is because the whole idea of self CSS can happen. Like, if you go to facebook.com and open up the dev tools, you you're greeted with this immediate huge stop.

This is a browser feature intended for developers. If someone told you to copy paste something here to enable a Facebook feature or hack into someone's account, it is a scam and will give them access to your Facebook account. So it's the same thing as using dev tools. You're in a privileged environment, and if you intentionally shoot yourself in the foot, then, yes, that's a security issue. But I don't I don't think that's actually a a issue.

Yeah.

Next step is going to be a question from Falk. He asks, first, thanks for the amazing podcast. I've learned a lot and gave me lots of smiles. Thank you, Falk. Wes, why did you not mention Stencil? Stenciljs.com when talking about web components on your last potluck, and I presume you had not heard of it. So I'm going to stop you right there. I had heard of Stencil, but for some reason, it just didn't pop in my head when we were doing this. In fact, I take in a decent look at it. The cool thing for those of you who don't know, Stencil is a neat library, stenciljs.com, which allows you to do web components.

Stencils, like, sort of their whole it's it's by Ionic, but their whole deal is that their their advertising is, like, you can use stencil components within React, within Vue, within Svelte, and it plays nice with all of them. To me, that's a bit pretty big selling point because if you're looking to ever build a tool that allows people to do the same thing as something else, but you want them to use yours, then having it, like, a clear migration path is is definitely, like, a good good thing to have built in. In fact, I think that's probably a reason why it's so hard for new JavaScript frameworks to take off in some ways because, well, people have already using you know, I'm already using React, so why would I ever think about putting something else in my code Bos, because, you know, that that transition or maybe the interplay would be a little bit difficult. So I've pasted some code here in the show notes. That is what a stencil component looks like, and it's really pretty neat. It uses decorators and it looks a lot like a it looks like a lot like a react component.

Now, one of the neat things about Stencil is that it uses JSX. So those of you coming from a react should feel pretty at home with it.

Again, it's a decent little, framework here and definitely something to keep your eye on, especially as web components become more and more of a used thing. I think things like stencil will be more common to see in the wild. Either way, I think stencil is awesome, and it definitely was on my radar. But when preparing these shows, it's it's not always easy to remember everything all the time, especially when you're when you're someone like me with a memory that is not perfect. So, that that that's the scoop on Stencil. I I highly recommend if those sound like things that you're interested in and you're interested in web components checking it out.

I'm gonna let you grab the next Wes. So I'm just laughing here looking at it. This next question I added here, is h t t p s Node whatever forward slash forward slash www.syntax.fm supposed to not work? I get an error message 404 not found.

Yes.

We intentionally built the website to not work. And if you arrived on it and it was not working, then that was it could be expected. In fact, you have actually hit the real website, which is Yeah. Supposed to be designed to be a four zero four page and not have any useful information. Definitely, yes.

We built it that way. That's why. It's not supposed to work. That's that's funny. Someone on Twitter yesterday, I was talking about my Wyze Cam, and and someone was like, oh, they they care more about Google Analytics than taking our money. Oh, yeah. Oh, yes. I'm sure they care more about Google Analytics. Yeah. Like, there was, like, a, like, a error, and they couldn't pop open the buy Node because something new with Google Linux Tolinski broke it. And, like, they don't care more about Google Linux than selling you the thing.

It's a it's a bug, and the thing broke, obviously. Happen. Bugs happen. Yeah. So don't be snarky when when things like that happen. Yes. I know. Is is there one that's supposed to be completely black and not work, and you can't see anything or click on it? Is that supposed to be that way? No. No. There's some dev sweating at the same time that you're you're being are you trying to get it to work? So just remember, there's there's people behind these things. So next question we have here is from Gabe. Hey, guys. Wondering what advice you have for self taught switching from a totally non tech industry, nonprofits, arts in my case, where I work in a tech role. I've hustled and built a portfolio of projects, and I've learned a ton from both of your courses. But I feel in my experience JS seen as less value because they don't work in traditional software slash web development environment. Any tips for getting over the final hurdle and getting job? It's kinda interesting. So works in a pnpm tech industry but in a tech role, not a typical software development role. I don't think that this is that big of a deal. Node thing I was thinking about the other day, how it's so cool like, Scott. Scott's wearing a, I go, a Kraken hat right now from the the NHL Yes. Because someone who listens to the podcast saw that Scott was tweeting about it, and then they sent him a hat. And I was like, it is so cool that we always have techies inside of every single company regardless of of what type it is. So it sounds like in this case, you're, like, in a tech role, but probably not specifically building software and building websites. So I don't think that is not as valuable. It certainly would be your 1st web development role, so that's always the the Scott hardest thing to do. And it it sounds like you you know what you've Deno, and as you've built a portfolio of projects and and and put yourself out there and and, really, I think at the end of the day, you just need keep doing that. Keep building stuff. Keep putting projects out. Keep writing blog posts. Keep doing whatever it is that that you you feel like is a good, use case of your time. And then eventually, you're gonna get someone's gonna take a a chance on you and bring you on for their 1st web development job. So, honestly, I think companies are often looking for these types of people because

they're hidden gems. Right? They're they're the people that aren't web developers yet, but are probably could be easily skilled up and trained. Especially because they have, like, a whole host of different types of professional experience that come in handy. I mean, working in a professional role in any regard requires a lot of different skills that are not just can you type key and get code to work. You know, being a professional in any regard requires you to have those experiences. So I think, like you said, these people can be totally hidden gems, and this might be a good opportunity for you to explain some of these things in a cover letter. But typically, when you're applying for jobs, it might be a good opportunity for you to say, alright. Here is what could be a perceived weakness, but just like m and m and a model, you can come out and get in front of it. You say, yeah. That's right. I haven't done a a web develop development specific role anymore. Here's why that's great. Wes, I assume you haven't seen that movie because I thought that was a funny joke, and you're not you're not laughing. What movie is it? 8 Mile, 8 Mile.

I don't think so. No. That's the one with Eminem. Right? That's the one with that with MBS.

Yeah. No. I need I need to put that on the list. I have my list is growing. You don't need to put it on your list. You don't need to. No? I mean, I don't. Someone please make me a list of, like, 10 movies that I need to see to just get me into the fold of Scott's jokes.

One time Wes had a friend that was this is unrelated, but somewhat related. We had a friend who, like, had a heart to heart with another friend and was, like, a 100% serious. They're like, I feel like you're not laughing at my jokes.

We've always been, like, cracking up. So anytime, like, I say something that I think is funny and Courtney is, like, not laughing on, she'll be like, Courtney, I feel like you're not laughing at my jokes. Like you're not.

Okay. Next question is from Adam. Adam says, what makes a software engineer senior? Scott, typically, what makes someone a senior engineer by role is specifically that they've been given the opportunity to be promoted into that role. That I mean, that's really what makes someone senior. But if you're asking, what are the things that somebody JS a senior developer does that's different? I would say these people have a greater handle on what it takes to, manage a team. They have a a greater handle on what it takes to pick software responsibly.

Some people pick software when they're when they're creating a project or or they're deciding things, and they'll just pick it based on whatever's hot, whatever's new, whatever's cool, whatever, without understanding what the implications for that would be for the entire team, the future of the project, yada yada yada, the bottom line. Right? So what makes a senior software engineer? Well, typically, they're pretty responsible in terms of making responsible decisions for their team. They know how to manage and work with a team. They know how to talk to management, and they typically are able to express in a layman's terms or or nontech terms to people who are stakeholders to, like, why these things are important or what needs to happen. At least in my perspective, in my experience, that's what senior software engineers have done. Yeah. I also think, like, another big one of a senior engineer is being able to

look at an entire project and break it down into the pieces that are needed and maybe different projects, maybe different servers. Maybe you need a stand alone back end, and then you need a React app for for the web, and then maybe you can build something else for the for the iPhone app. But just being able to sort of take a step back and say, like, this is how we're gonna architect everything rather than the nitty gritty of should we use hooks or, something else. Right? Yes. Right. Exactly.

Next question we have here is from Sam. Hi, guys. Long time listener, 1st time caller looking for advice.

I have a Gatsby JS and a Netlify client project about to launch. What's the best approach on handing over to a nontechnical client? Do I keep my GitHub account and just give the client Netlify CMS login, or do I the client their own GitHub account so I can that I can access for any maintenance? What do other devs do? So I think have you used used Netlify CMS before, Scott? I have. Is there multiple roles? Is there, like, multiple roles in that, or how does because at the end of the day, Netlify CMS just JS

markdown. Right? It's a GUI that sits on top of markdown. Correct. Yeah. It's a it's a, markdown GUI to say that in the just to swap the words around. Yeah. So Netlify CMS, it does. It's a Netlify GUI and typically, it's a pretty lightweight CMS.

I have not considered using Netlify CMS for an application that a user will touch, like a nontechnical person will touch, because, typically, I think of that as still just being, like, slightly 1 step in front of somebody editing markdown files. Right? Like, the interface is nice, and it it it does get you a GUI and, like, proper little widgets for whatever you want. And those are I guess that is a a big jump in front of of markdown file editing. But in the same regard, I don't know if I've I've ever considered using this for a project for nontechnical people. We actually actually have a a Netlify CSS set up for Scott Tolinski just in case I ever feel like getting into a GUI. But what do other devs do? You know what? This one, I'm not entirely positive what other people would do because I just don't. I've never necessarily considered this as being a practical option for client based projects. That said, what I would do is I would give them a login. I would make sure they have their own login. I would absolutely not have them create a GitHub account because, normal people do not know what GitHub JS. And I'm sure if I was the normal person, it would scare the life out of me seeing all that code in those green boxes. I mean, what's up with all this stuff? So I would not give them a GitHub account. I would make them have their own account to give them training on it. So here's a low key aspect of passing off a project to a client that a lot of people tend to forget when passing off a project to a ESLint. You need to train your your your maintainers, the people who are gonna be maintaining this content and writing it, you need to train them. So if you set up a for them, here's what you do. You get them on a Zoom call. You record the Zoom call. If you're on a Mac, QuickTime has an GitHub little screen recorder, and you just talk them through exactly what you do. And then at the end of it, you spit them out a video file and say, oh, by the way, I recorded this talk for you. Anytime you need to go see how to update post, open video update post. There. There you go. So killing 2 birds with 1 stone, you give them a reference, and you get to train them at the same time. So that's what I would do. I would make sure they are trained, especially if it requires some technical aspects to it. I would assume

that multiple maintainers could access the Netlify CMS, but it's not something I have experience with. I know they can, but I don't know what the Node system's like. I think, like, maybe this should have been like, this is intentionally why I didn't use Markdown in my latest course. Even though we're all developers taking the course and they could all edit the Markdown, the target of the course is people that are gonna be handing off these projects to nontechnical users, and they Node you need a you need a CMS you can log in to and edit and drag and drop things and and whatnot. So that's something to to really think about. But for you, yeah, I would just I would make some secondary.

I think that you do need a GitHub account to actually edit it because at the end of the day, when you hit save in the Netlify CMS, it makes it get commit to the actual underlying markdown. So you probably will. Even though we said don't, you probably will have to make them a GitHub account just so they can use that as a login. I think you could do different accounts, though. I don't I don't see why you would need, like, a secondary account for yourself or, like, whatnot. No. I mean, what I'm referring to is not like a GitHub login. I'm, like, double checking this right now, but I'm pretty sure you can use other types of logins

because I know they they support different OAuth clients. So I was thinking maybe you could be like, oh, let's have a Facebook login. Right? But I clicked on their site, and their other That's where there's no database or anything. It is it is version control at the end of the day. So you do need to give them that credit. Yeah. I guess that that totally makes sense now that I think about it. But off the top of my head, I was thinking, Michael, yeah, they could have a Facebook. No. That that doesn't make any

sense. Alright. Next question Wes have from guide. I recently blocked all cookies on my mobile browser, Google Chrome. I noticed something weird on a couple of websites that I know for a fact has been built using Next. Js and is not working as expected.

They would load as usual. After a second or so, the content on the page disappeared with the error message, sorry. An unexpected error has occurred.

In some cases, it was printed in the site's font and with the same background color on the body. Why does blocking cookies do this to Next. Js website? So I actually get this sometimes on my, my own course platform where people it's not the whole website doesn't break, but the the Vimeo embeds don't work because people turn off cookies entirely.

And in order for Vimeo to embed my videos on my domain name and not have them publicly available, cookies are needed for for whatever reason. So what's happening here is it's a rerender or rehydration bug, mean that Next. Js will always serve up a either a server rendered on demand or a statically rendered version.

And then when the browser loads, it will try to rehydrate it and rerender it on the client. In most of the case, you don't see anything happen because it's picking it up from HTML and and moving it over to, like, a React application.

And what's probably happening is they're trying to fetch some data from somewhere. I'm not sure exactly why cookies do this, but what happens is they're trying to fetch something fetch some data, and because cookies are blocked, something something has broken. Likely, some sort of authentication or session variable that is is stored in the next it's probably not related to Next. Js intentionally, but it's just that the request that it was made needs those cookies. So why does that happen? Because of that, should it still work? I say no. Like, cookies are part of the Wes. And if you turn off

part of the web, then like, I understand that there's privacy issues there and that those certain certainly should be blocked, but cookies are still a a major building block behind how a lot of the web works. So you can't just take them out and expect it to to all work. We saw this a long time ago with people said, like, I should be able to turn off JavaScript, and the whole thing should work. And, like, yeah. Yeah. But also Yeah. No. Yeah. Yeah. I know. I was gonna say the exact same thing. That's the first thing I thought of when they when I saw this. It's like people say, cookie bad. I don't want cookie, so I turn cookie off. And it sure. Yeah. Okay. You can turn cookies off, but whatever. You can expect the experiences to necessarily be the same or everything to work the same way that you'd expect them to with all of the features turned on. Anybody who's worked in server side rendering for React knows just how much fun rehydration issues can be. Yeah. These things are are tough to troubleshoot and tough tough to develop, but, I would say most likely, like you said, it's not a Next. Js specific thing. And I would probably reach out to the creators of that content and just say, hey, just so you know, if you turn cookies off, this thing breaks. And maybe it is a simple instance of, like, what you mentioned. It's like the server components coming back fine, but with cookies turned off, part of the code is breaking. Maybe there's, like, a variable that's expected to be there. I don't know if you check the console or something, but rehydration errors can happen. They're they're not a fun a lot of fun to, debug, but, yeah, most likely not a Next JS specific thing.

Next question is from Scott d. Scott. What's up, Scott d? How often do you make commits? I always hear commit often, but I'm hesitant because I feel like I may change my code later before I make a poll request. I really like your episode and get fundamentals. I would love a tutorial deep dive and get workflows, when to commit, how often should I commit, even though what I'm working on isn't complete or I need to refactor it. What is the code review etiquette? Okay. What I would do is commit often.

So, really, even if you're going to change your your code later, committing code is really just basically saying, here is, like, a landmark. Here is a landmark of, like, this specific time in in the code development. So I still commit even if the code is going to change. And with a detailed commit message, it will tell a lot about, like, why the file is changing and and how it's changing. Now here's a little feature. I'm not sure if this is related, but I think this could possibly be related because you mentioned something about code reviews.

Here's a little tip. So if you're in GitHub poll requests and you have a poll request open, you will notice that there is a little button or link underneath the reviewers, and it says, still in progress, question mark, convert it to draft. And what that does is it converts your poll Wes to a draft so that everybody knows that this thing is is still being updated and being worked on. So that way, any commits or anything that comes into this poll request in the meantime will not be asked to be reviewed. It's just gonna be listed as a commit or the changes that have happened. So if you convert your poll request to draft, it's specifically not going to ask for review on that code.

Yeah. I recently just found this Scott. And, because we we were having GitHub actions issues Wes Node of our developers was pushing stuff to a pull Wes. And every time he did stuff, even though he didn't want it to be pulled yet, it was triggering our GitHub actions. And so we're getting all these all these notifications, and we were like, how do we turn this off? That's when we found the draft button.

That's awesome. So what I did with mine is that I commit often, just as Scott said as well, after every single minor feature, after every time I do something, because, like, I use also use Git for my own use cases Wes if I, like, if I change something about a function, I'll just commit it. Why? So I can if I change it in the future or if I need to roll it back, I absolutely can.

It just when you go to make that pull request into, the master branch, often what people will do is is what's called a rebase. So, like, if I'm working on a feature, where I make, one thing I'm working on right now is being able to resize the list of videos beside the player so you can make it smaller or bigger if if you want to. So, like, that feature, if I might have 15 different commits on that just because as I'm working through it, especially at the end of the day Mhmm. Because, like, my my nightmare would be my laptop gets stolen or, like, I spill something or or for whatever reason, you lose a day or 2 worth of work that's worth that's worth a lot to me. So I'll commit it and push it to my own branch, then do a rebase. So, the way that it works is, like, let's say you have 10 commits. You just TypeScript rebase dash I. The dash I stands for interactive, meaning that you can go in and interactively decide what gets included and whatnot, And they type head tilde 10, and what that says is take the last 10 commits and allow me to pick and choose what I wanna do with them. And and part of that rebase, you can do a whole bunch of stuff. You can remove commits and and whatnot.

Most likely, what you're gonna do is you're either going to p, pick them, or s, squash them.

You can pick 1 commit, or you can also, like, rename commits that way as Wes, but you can you can pick 1 and then squash the rest into that commit. And then when you make your pull request, it's all nice and tidy into a single big commit, and then that makes any history or, like, you go back in a year. You're like, oh, who's working on this feature? It's just a nice tidy commit where everything's in in one. Some people don't like that. They say just leave your history as you wrote it. Right? Like, you you intentionally committed at that time, then just leave those 10 commits in, and that's fine. Other people say no.

Always make 1 commit per pull request.

That's interesting. I've always just been, like, you know, I don't necessarily care if the commit log is that tidy Yeah. JS long as it explains what's actually taken place within the the changes of the code. So that's that's an interesting perspective to hear like that. There is like a world where people need the tidiest, tidiest commits and everything. Interesting. So if you committed some code to your site and it broke your site, then you want to use Sentry. Now I'm talking about Sentry dot I o. Sentry is the perfect error and exception handling service that tells you all sorts of great information about the errors that are happening on your code. And let me tell you, it's very, very nice. In fact, it related to this, if we wanted to potentially have an issue that was brought in in a specific commit, we actually have access to see what commit brought in that error. Yeah. Right in your Sentry dashboard.

Sanity then you can write directly from there, click another button, and get it to create and open an issue where you can tag the relevant parties to whatever may have committed that error. So you're gonna wanna check out century at century.i0 and use the coupon code Sanity treat, all lower case, all one word, and you will get 2 months for free. So check it out, century.i0.

Alright. Next question is from Fernando Saavedra.

Hey, folks. I'm a big fan of syntax. I listen to new episodes as soon as thank you, Fernando. I have a question for Wes. Oh, okay. What am I? What am I, Fernando, here? Okay.

You can answer this too, I think. How do you handle

and transcripts for your courses? Do you use some tool or service for that, or you or do you do it by hand? And, no, Wes, no. I'm gonna I'm gonna make you answer this one because I was not addressed in the question.

I have used several different captioning services in the past, and I have landed on rev, rev.com, to be the one. So the way that it works is that it integrates right into my Vimeo.

You log in to Rev. You select all the Vimeo videos. Oh, wow. You you order them. It's a buck 25 US per minute, so it's not cheap. It costs usually 1,000 of dollars to caption each of my courses.

But I'm pretty sure that that pays off entirely based on deaf users taking my courses. Like, I get a lot of, actual deaf people taking my courses, which is which is awesome to see. And they also, like, keep me. Like, it's not just, like, some generated transcripts and whatnot and stuff like that. Like like like, it's actual people that are going in there. And I the way that I think that it works because it's getting faster and faster. It used to take about a week to get my transcripts back, and now it takes me usually 24 hours to have the transcripts back. And I think that's because the machine learning TypeScript, along with you give it a dictionary of words that you often say. So I'll I'll give it a dictionary of how to how to like, npm lowercase, React dotjs, spelled capital r. And I'll give you just a huge list of, like, technical words that I'm saying that are not English words, and that will take it into account, add them to the dictionary as they're generated. And I think what happens is that they they get it 90, 95% of the way there with computers, and then they have an actual person go through it and transcribe it and make sure that everything looks good. And I'm super impressed at the quality of it and even even things like a capitals on component names are are almost always correct. I do have them up on GitHub, and people do submit little fixes here and there because it's not a 100% perfect, but it is very, very, very good. That's how I do it. They they publish them right to Vimeo.

And then if there is an edit to Node of my videos, I can either try to update that file myself.

If it's simply as I got a caption done for a couple of videos, and I forgot to put the 5 second bumper on the front of each of them.

So I use this, Versus Node extension, and it just bumps all the captions 5 seconds Oh. Which is amazing. Wow. That's a I was wondering how you do that with the time stamps.

Yeah. Yeah. It's it's great, and they have a whole editor in Rev as well. If I make more than, like, a minute or two worth of it, even if I if I cut a 10 second thing out in the middle of it, I just reorder the captions for it because it's too too much work to try to push them over and whatnot.

Yeah. Interesting. Yeah. Their, their website's really nice too. It has a neat little Scott of stripe design kind of Deno. That looks very nice.

Luckily, like, I can afford to do it for my courses because I don't I don't put out a course every week or whatever and have enough people but buying it. But it's definitely something I would like to see on even on those podcasts. Like, I'm I'm curious. Every every couple of months, I come back to the computer generated transcripts, and I think they're probably almost at a point now where we can probably just computer generate the syntax transcripts.

We've never done captions and stuff for the podcast just because it would be extensive, and, also, it would be it's a lot of overhead to our our workflow and our process, especially when it was taking a week to get the captions done Wes sometimes we only have, like, 12 hours between when the podcast is edited and when it when it's live. But, I'm wondering if we can, like, work that in somehow into, like, a published cycle where the computer just generates all the Yeah. Transcripts for us. I think that's a really interesting idea, and I think it's something we should probably get on. Next question is from Mike. Hey, Scott n West. Your show totally

rules. Oh, I'm a recent graduate of by the way, we only pick questions that, compliment us in the first sentence of the Yeah. They all. They they all Scott with, I love a big fan. Right. This that's unintentional. I I assure you it was not intentional. I'm a recent graduate of a code school that focused on Ruby on Rails. The company I work at currently uses Angular for part of their React on Rails. Oh, I'm so used to saying Ruby on Rails. I saw r and r, and I I my brain auto completed to Ruby on Rails.

Woah. Focused on React and Rails. The company that I currently work for uses Angular as part of their stack. I would eventually like to move into a dev spot, but I'm finding Angular feels a bit stuffy.

And I'm not as excited about it as I am, React, Vue, Svelte, etcetera.

I am afraid that if I dive into Angular, I'll become less relevant down the road, and I want to learn everything. But I only have so much time, and I don't want to stop my growth as a developer. Any thoughts on this would be sick. Cheers. Okay. So check it out. Angular, super relevant, super used throughout the entire industry.

So by using Angular, learning Angular, being good at Angular, you will not be losing any relevancy.

You can definitely learn quite a bit about modern front end development as you use Angular because a lot of these systems are all very, very similar in the way they handle things such as just being generally components, Lego pieces that you plug in, whatever. Wes and I are not Angular developers, so you're not gonna hear us, go on and on about Angular. I have used Angular in the past version 1.3, but I know they're on, a very high version now and 60 for Angular version 60. But the people that use Angular tend to like it. I I don't I don't think using Angular is like a a boon to your career in any sort of way. I I think if your team uses Angular, dive in, become Angular. I really think it's it's totally not only is it totally fine, but Angular, you know, it's it's a totally good world to be in.

Yeah. We get this question all the time and with a lot of tech, and I think we Node to make it very clear. Just because we don't use it doesn't mean we don't like it. It's because we don't use it.

Scott and I have our stacks, and we like to use those stacks. And, of course, we try different stuff every now and then, but at the end of the day well, maybe Scott can, but I'm not switching stacks every single day. No. I'm not switching stacks. Don't I mean okay. So I do probably have a bit of a reputation as a switcher of stacks a stack switcher, but let let's be clear. The level of tutorial site has been built in React from almost day 1. So, like, I, you know, I'm as much as I I talk about Svelte and I like Svelte, whatever, moving our entire code Bos to re, Svelte or or anything else for that matter would be absolutely no fun and certainly not something I'm interested in doing. So It's not worth it. Yeah. It's not worth it. I'm at the end of the day, I am practical enough to to realize when you should and shouldn't. Yeah. Yeah.

And at the end of the day, you're a JavaScript developer.

You should be able to jump from thing to thing. Obviously, you're not gonna immediately go from 3 years in Angular to React, but, like, I guarantee all of the money in the world that someone who is amazing at Angular would be able to go through the React docs, and in, like, 4 4a half days, take half day off on Friday, can get really good at at Angular. Right? Like, why? Because that Vercel is probably a very good JavaScript developer.

And the fact that they use different types of templates and different hooks and stuff, At the end of the day, the stuff is just JavaScript in in the browser, so, you need to remember that.

Angular gets such a bad rap, I I think. And I hope we don't contribute to that because I I don't intentionally contribute to that.

I hope I don't either. Right. Right? Like like, sometimes we make Angular jokes and stuff like that. But, like, again, it doesn't doesn't really matter. Especially, like, it sounds like you're at a job that already has an opening for you to transition into a web development role. That sounds amazing. You don't have to switch jobs. They already have a stack. Go for it. Yeah. Also, Node more thing one more thing I'm missing is I have a one more thing too.

We would see this all the time in the boot camp where we would learn.

At the time, it was we would learn HTML, CSS, and people would just type their HTML straight away, and they'd know a little bit of JavaScript.

And then we'd introduce them WordPress, and then they would be frustrated because they couldn't just edit the HTML directly.

And they would say, I hate WordPress. And it's like, you have been a web developer for 3 weeks. You don't hate WordPress. You have you have you have no ability to to go into this. Like, you can you can, like, make this amazing revelation about tech and coding and stuff like that. You just don't like it because it's different, and it's not what you know. And, of course, you might not like it at the end of the day because you get into it, but you're not at a point right now where you can you can make that sweeping generalization about Webtech.

Yeah. Well and and let me just say this too. The only way I'm going to be like, listen. I, am feeling not relevant is if the the, place came with a stack that was like, we're using MooTools and whatever. Like, at that point, I might say, okay, maybe I want to learn something a little bit more modern here. Modern. Yeah. But Angular, yeah, no sweat there.

Okay. Next question is from Joel. How do you handle SVGs in React? I know SVGR exists.

I I do not know that it exists personally, but I'd like to avoid adding another dependency if it's something I can roll on my own. In the past, I've created functions that take parameters like filler, stroke, or control color, return a string of the SVG code with the arguments interpolated in.

Then I place that string into a component using dangerously set in their HTML.

I haven't seen this method before or used anywhere else, not because it's bad and probably because it's not the best practice, but it also works. So maybe I am fine. Okay. Here's what I do. Listen, SVGs in React in terms of, like, inline SVGs, they're not a lot of fun. There's all several different ways you can there's definitely, I don't know about SVGR. I'm not I'm not sure what that JS, but, like, there are definitely ones where you can import a a SVG path, and then your build tool will then actually inline it or a React component that will inline it. You can reference it like an image and have it inline it. No problem.

But I personally here's what we do. We have a React component that is a standard React component that all it is is a switch statement.

And the switch statement takes a string of a name, and that name is the icon name. Now you don't need to have an Wes be dangerously set in your HTML, and you don't have to have it be a string.

The SVGs do valid valid react code. So you can just have a straight up SVG return from a React component with no modifications to it beyond changing a view hyphen box to view camel case box and things like that. For whatever reason, React doesn't like our normal data attributes.

So I do that. And then I have things like accent or color as props.

And I just have any time I need to add an icon, I just add it to the switch statement with a string. We audit it from time to time, but it gives me full control over how the icons are. I also have a size property that determines the size of the icon if I need to do that style prop in case I just want to pass any CSS to it. So like I said, it's basically just a switch statement that takes a name for a string and outputs the SVG as an SVG. This gives us full control over everything, and it's pretty maintainable.

Just like I said, add a new add a new icon. You just paste into the the switch statement. You need to replace 1. You just paste over the one that's there and and whatever. And for us, it's it's worked very well. I've always done it this way, and it has, never really led me astray. So this is this is the way that I I approach.

In the past, I've used SVGR, which Scott mentioned.

You can use it as a webpack plug in, meaning that anytime you import an SVG straight from your React component, it will, do all of that all those hoops and whatnot to take it from Wes ESLint a, into a proper React component. And then, also, there's just, like, a little thing online where if you just got 1 or 2 SVGs, just paste it into this little box, and it will kick out the React equivalent code. Mhmm. Copy, paste, put it in a component. Bob's your uncle. Copy, paste, put it in a component.

That sounds like like a nursery rhyme I would sing to the kids. Like, Alright. And the question is from Jordan White.

What social media platforms do you use as a dev and what is cool to have? What ones are there and what are their benefits? Social media. Burn it all. No, I say this JS somebody who is, like, completely obsessed with using Instagram and Reddit for the most part. So your mileage will vary. I personally don't learn anything off of social media unless it's a news aggregate like re like Reddit or maybe Hacker News occasionally.

But for me, personally, as a dev, I don't think any of these things are required beyond, like, being the Deno facto user experiences that many people are are running into.

And, you know, me, potentially, the things that I'm learning from social media are like how how an app that is used by millions of people should look and function and work. So Yeah. I'm gonna I very rarely disagree with you. I'm gonna say, social media

is pretty it's not required, but it's pretty important.

Yeah. Well, I guess, what I'm saying is is that, like, it depends on what you're trying to do here. Like, are you trying to grow a personality? Are you trying to grow, like,

your reputation? Are you trying to have, like, a a foot in the sand? Like, I don't know. Yeah. No. Like, not not for, like, somebody like me where, obviously, I need to market my courses and and and whatnot. Like, if just a regular dev who wants to be a good web developer and work at a company, do you need social media for that? Probably not, but that's how I stay up to date. That's how I stay in tune with with what's going on JS that you follow all of these different people in the web development. Has this sort of, like, awful side benefit to it or not not a half an awful it's not a benefit.

This awful side part where, like, often, people are very rude on social media. There's a lot of toxic. You get a lot of, like, awful politics get mixed in with the web development stuff, so there's that. And it's it's distracting and can take away from your job, but there still is, at least in my opinion, still is a lot of upside to that type of them. So can I jump in here real quick? I embarrassingly

enough forgot that Twitter is included in social media because you're right. I I learn a mammoth ton from Twitter and the people I follow on Twitter. And as we say this, like, one of the few tabs that I don't close is my tweet deck. So, like, you could ignore everything that I've said about this that, because I I just didn't think about Twitter. Yeah. Maybe people just associate I was just thinking Facebook and Instagram. With the awful ones. Yeah. TikTok?

Facebook for developers. Like, let's go through them really quickly. Facebook for developers.

I have a Facebook page, and I find that the people that comment on it are much more of an international audience. So I'm not sure, if that's a thing or not, but I certainly do not enjoy Facebook,

except for Marketplace. I love Facebook Marketplace. I need to get to sell my car. Maybe I should dive in the Marketplace. Do you get people being super flaky on Marketplace? And Yes. Yeah. Oh my gosh. I've been trying to give away a piece of drywall Yeah. Which JS, like like, if for free. Yeah. And I've had, like, 30 people be like, hey. Is this still available? And I immediately say Wes. And then they And then you never hear from them ever again. So Either that or or they're, like, they're they asked the dumbest question. Like, Courtney was trying to sell this, like, IKEA desk that she bought for, like, you know, maybe $100. We're trying to sell it for, like, $20. Huge markdown because nobody's taken it. So we're just like, here.

Here is this desk. Please take this desk. Yeah. Here's the model number. Here's 800 photos of it. Whatever. And then the questions come in. They're like, excuse me. Could you tell me the exact depth of the Wes? And Oh my gosh. It drives you crazy. How could you possibly not look that up? Like, just Google it.

And then she'll look it up. She'll tell them, and then never hear from them again.

No. People are I'm such a good Facebook market place because I always tell people, hey, I'm going to go check. I'll get back to you. But there's some awful, awful people on on Facebook Marketplace.

That's I think it's something Facebook is trying to fix because if you don't reply to somebody, they'll follow-up with a, hey. Are you still interested in it? But it's hard to fix just humanity being awful.

Anyways, Facebook, yeah, developer, I don't I don't think so. I don't think that's our good spot. Reddit is it can be a good place for it. It's not somewhere that I hang out a ton. I subscribe to a couple of web devs, and I see this stuff come through every now and then. I think our JavaScript, our web dev, our learn programming, our learn JavaScript, those are all good ones to sort of get into.

There's platforms like what is the dev platform called? Dev.2? Dev.t0.

Yeah. Dev.t0. That's that seems to be a pretty, pretty good community. Lots of articles.

Very, very dev focused.

So that one seems like a good one. Free Node Camp has forums.

Seems to be a a good place to to spend your time. Discord.

Discord. Yeah. Oh, that Tonza good Discord. Yeah. Level Up Tutorials Discord is, kicking with people helping each other and sharing stuff all the

time. Yeah. The Discord is a really good one. I don't think developer Instagram is odd.

I think it can

it can be a good place if you're looking for, like, motivation. I have, like, thoughts about it. Yeah. Yeah. There's a there's a lot of, like, really, like, copy and paste it, like, you know, 10 Git tips or, like, I saw 1 the other day. It was like it was like 100 node packages you need to know. It's like, what? Like, I I'm not gonna go through 100? Swipe through a list of a 100 Node packages, and that will just be, like, like, data f Wes. But then moment j like, it's like it's just they clearly, like, looked at the list that was, like, the 100 most downloaded ones and and turned it into an image. There's there's some stuff like that. You gotta wade through some some serious copy and paste garbage, I think. And on the flip side, there's a lot of, like, Instagram developers who

like, I don't know if they code or not, but they they post lots of photos of, of, like, the lifestyle that's associated with with coding, which, like, like, I'm all about. Like, I I love a beautiful monitor and sipping a coffee with my code screen open as much as everybody else. But, it's funny that there's, like, there's there's people that have hundreds of thousands of followers and never post anything about actual coding. Like, they never talk about what a closure is.

Yeah. Yeah. Ten closures you need to know.

Yeah. Yeah. But I don't know. It just I think it's just the the nature of the platform is very visual and much more about the lifestyle and whatnot. So, yeah, I think those are are some things to think about social media, if you are a developer.

Yes. Sorry. Super duper out.

And social media is a place where you can really lose your sanity if you don't, you know, prune your garden enough. So, with more about our sponsor, this this, this episode is Wes talking about Sanity.

Alright. So Sanity, you know it by now. Structure content CMS. It spits out a API.

You get this really cool CMS where you can log in and create your content types, and then you also you can edit and and add all the content. You know about that, but, there's some new features to Sanity that we're gonna cover right now. First one is called presence.

And this is really cool because, like, we talked earlier about, like, the client having access to the CMS, and Sanity is an awesome CMS for giving to your client. They just introduced this thing called Presence, which will show you when somebody else is currently editing one of the fields or one of your data types. So it's like almost like, you know, Google Docs. You can see where who's editing what and whatnot. This will put a little picture of of who's editing that field above the field, so pretty pretty cool. Also, I wanna shout out another thing that they did is, Sanity dot io forward slash create, and they have a whole bunch of different starters for things like Gatsby with Netlify, Next. Js with Netlify.

I know they're gonna roll out a bunch of, ones with Vercel and Next. Js as well pretty soon, so make sure you stay glued to Sanity.

So if you wanna check out Sanity, go to sanity.ioforward/ syntax. That's gonna get you double the free usage tier. Thanks so much to Sanity for sponsoring.

Thank you. Next question is from Ashik Haraf.

Hey, guys.

Thanks for an amazing podcast.

Another compliment.

Sure sure question. Have you tried an ultra wide monitor for coating such as a 34 or 38 inches? I feel the extra width would be great for a single monitor setup, but haven't been able to see 1 live where I live. Let me tell you. I have a 38 inches monitor that is fantastic, and I absolutely love it. And let me tell you, it is very impressive to look at. So if you haven't seen 1, live, don't worry. When you plug it in and you turn it on for the 1st time You will not regret it. Yeah. 34 or 38 inches. It is a sight to behold. I mean, I I remember getting my 1st 24 inches monitor and thinking this is the largest thing I've ever seen in my entire life.

Let me tell you. The these 38 ultrawide monitors are very, very good. And the cool thing about it is, like, being able to have, you know, multiple code tabs and your website and developer tools open all at the same time on 1 monitor JS just nothing can beat that. I'm the type that struggles with, like, once I get everything on my my 15 inch trying to get it all in a place where, like, I'm not just tabbing constantly between a 100 different windows.

Yeah. There's nothing better than being able to see it. I just like I almost bought an ultra wide the other day because I I have a, I have a 32 inch four k, and I left it at the cottage in my office there. And I came home, and I was like, alright. I need a new monitor for home now. And I almost went with the 38 inch, but I ended up, just for resolution reasons, going with another 4 k display. But, like, the minute there's an affordable ultrawide that has a higher than 14:40 resolution, I'm all over it because I'm so jealous of Scott's, like, being able to have it. Because it's I have 2 monitors at but, like, there's a huge bezel in between them, and you have to angle them at the right thing. But having a nice curved display is my dream. Yeah. The curved ultrawide,

definitely recommend. Cool. So this is the part of the show where we talk about sick pnpm, things that we have found to be sick.

The reason why I decided to

sick pick these things, the fact that I was doing the dishes last night and I was thinking, man, I wonder if other people know about these tools that they have for doing their dishes that I have loved so much. So I have, 3 tools for doing the dishes that I am, I'll have links to in the show notes so you can imagine them or see them. But, Wes, I'm gonna be interested to know if you have any of these products. Okay. They're all really super cheap. 1 is a knife cleaner, which is so I don't know how you wash your knives, but I've always, like, took in a scrub daddy, and I gotta do the edges and the other edges. And then, knowing me, I'm such a spaz that at one point, I'm I'm sure I'm gonna slice my hand open at some point. So I got this neat little thing that is a knife cleaner, which is basically like a c shape that has scrubbies on both sides. And you can just sort of slide your hand up and down the knife to clean it, and it scrubs it really well without any, any possibility of you cutting yourself.

So so this is number 1 JS this knife cleaner. Wes, what do you use for cleaning knives?

Oh, man. I I love this question because it's gonna trigger some people.

So I have very nice knives, and I have very nice sharpening equipment, and I put them in the dishwasher because I don't have time to clean them. This is so much faster. This is faster than them. Is it I just throw them right in the dishwasher, which you're not supposed to do with nice knives because apparently I'm surprised you can't. Ruins them. Yeah. But I don't care. I just throw them in. I and I sharpen them really well all the time, and they work amazingly. That's yeah. I Wes, for you, because you do us obsessively sharpen them Wes I don't necessarily I don't necessarily do that. I I mean, I I sharpen them, but probably not as much as you Yarn nicer. Oh, yeah. I don't know if the dishwasher makes them less sharp. It is supposed to dull them. Yeah. It is supposed to dull them. I don't have the, like, the steel ones that actually rust. Mine are still stainless at the end of the day, but still, I don't I I just, yeah, I just sharpen them.

Okay. So that's number 1. Number number 2 is this really neat scraper, like a plate scraper, and it's like a plastic plate scraper that really just is a piece of plastic on one end to allow you to scrape things off of plates, like food, whatever, cheese, so you don't get it all caught up in your your scrub daddy. Got one of these. And then the other corner of it JS, like, looks like teeth where it grooves in between, like, a skillet plate or a skillet, pan. So you could scrub that pan as well. And then the last 1 that I'm going to use sick pick. So 3 kitchen things is a chain it's like a chain mail scrubber for your cast iron pans.

Oh, yeah. That's that's key as well because, you shouldn't be using soap on those types of things.

Soap. Yeah. And Cast iron can sometimes get grimy.

Cast iron can get grimy and maybe got some stuff stuck on there. And so this is basically looks like a little chainmail. It looks like a chain mail towel.

Again, I'll have links to all this stuff. Looks like a little chain mail towel. That way, you can and, get any of that that hard to get stuff off there without reaching for a sponge or anything like that.

Yeah. Those those little scrapers are so handy even for cooking and things like that. Yeah. Being able to to pull something off. I it's sorta on the same. I'm gonna post pick you right Node. And, plastic

razor blade scraper Yes. Soapy. I have one that is half of it. One end is a plastic razor blade, and the other half is an actual razor blade. So you can use the actual razor blade on the the stovetop.

If you have a stovetop or the the granite or something like that, you can use the plastic. Yeah. Or sticker you get, like, a sticker on something. You need to scrape it off. Oh, yeah. I used that for a like, I had to take a old gasket off of exhaust intake or off a carb on on my thing, and I was like, oh, plastic because you can't, like, mar the surface.

So I love those those kind these are the my favorite sick picks because they're just, like,

$5 things. Yeah. Scott They're so handy. Cheap cleaning utensils. I'll have a a a whole little, list of them here in the in the show notes.

Awesome. I'm going to sick pick an iPhone app called Scriptable App. So Bos 14 came out, like, a week ago, and they announced widgets.

And I was like, awesome. Love widgets. I wanna make my own.

And I was like, can you like, is there, like, some sort of iframe I could make Wes I could just, like, iframe a website in and load my widget in in JavaScript? And you can't. But I found this app called Scriptable App, and they allow you to do JavaScript automations.

And one of the features they just rolled out is the ability to make widgets in JavaScript. So you can't use CSS or HTML, but you can use their own API that I'm assume converts to native.

And it was great because I I, I wrote a little widget that fetched my, like, my sales numbers for the day and for the week and displayed them right on it. So I don't have to the way I would check my sales previously is I have, like, a little shortcut, and it would go and and and refresh the page and show me them. But now I just have to look at my home screen, and it it fetches them. I'm not sure how often, but every time I look at it, it's been fetched within the last couple of minutes.

And it was really easy. It probably took me about half an hour to to write this little widget and get it up and running. That sounds fantastic. That sounds like something I gotta do.

The workflow for it was a little bit weird because you can't you have to code it on the phone. So what I did, it ended up just, like, coding it on my computer, copying it, and then I used shared clipboard.

So it would be in the clipboard on the phone, And then I just paste it in. Other people said you can put the file, the scriptable file, in your Icloud. And then if you edit on your computer, it will sync it with the 1 on your phone. It's not the best workflow, and there's no there's no development workflow. So every time you want to test something, you Scott save it and whatnot, but it's it's really slick. I was really happy to find it. Interesting.

Yeah. I've seen this around the the on the social media, believe it or not. And, I but, yeah, it looks really cool. I gotta I gotta check this out. Alright.

Shameless plugs. I'm gonna shamelessly plug my master Gatsby.com course. This is a course that will teach you the JavaScript and the CSS and, everything that you need to learn to build a modern website with Gatsby, React, GraphQL, headless CSS, Sanity. Actually, one of our sponsors today, Progressive Images, scoping your CSS, serverless functions, all of that good stuff. Check it out, master gatsby.com, and use coupon code syntax for $10 off.

Sick. I am going to shamelessly plug my latest course, which is going to be React Wes for everyone. What I did is I took some of all of the things that I've learned about React over the years, and we've had this is, like, now my 4th version of doing a React for beginners course. And and instead of updating it, it's like, let's do a whole new course because so much has changed. And while we have the old course that teaches the class components and all that stuff is still valid, we're gonna be releasing a brand new course that is react with hooks from the very beginning in terms of, like, you wanna learn React. But here's step 1. Let's write a function component. Right? Let's let's talk about these things as they are now, not as they were or whatever. So level up tutorials at .comforward/pro.

If you have been holding off learning React, this is the best time to do it, and this course will teach you everything you need to know to get up and running. Alright. Thanks so much for tuning in. Hopefully, you enjoyed that one. Make sure you submit your botlet questions at syntax.fm, and we will catch you on Monday. Yes. And be sure to tell us how much you enjoyed it at the beginning of each question so that we can read your question.

Yeah. That's it. Peace. Space.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop