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

mean that Next. Js will always serve up a either a server rendered on demand or a statically rendered version.

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?

it's picking it up from HTML and and moving it over to, like, a React application.

because I feel like I may change my code later

my own course platform

Okay. What I would do is commit often.

They would load as usual. After a second or so, the content on the page disappeared 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, come through every now and then. I think our JavaScript, our web dev, our learn programming, our learn JavaScript, about actual coding. Like, they never talk about what a closure is.

the Vimeo embeds don't work because people turn off cookies entirely.

How often do you make commits? I always hear commit often, but I'm hesitant

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,

And what's probably happening is they're trying to fetch some data 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, We built it that way. That's why. It's not supposed to work. That's that's funny. Someone on Twitter yesterday,

And in order for where people it's not the whole website doesn't break, but the

Next question is from Scott d. Scott. What's up, Scott d?

And then when the browser loads, 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, API.

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

I say no. Like, cookies are part of the Wes. And if you turn off syntax. That's gonna get you double the free usage tier. Thanks so much to Sanity for sponsoring.

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,

fetch some data, and because cookies are blocked, something something has broken. Likely, self cross site scripting, meaning that

on my, 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 App. So Bos 14 came out, like, a week ago,

And this is really cool because, like, we talked earlier about, like, the client having why target underscore blank could be a possible security issue, but everything is pretty it's not required, but it's pretty important.

but, yeah, it looks really cool. I gotta I gotta check this out. Alright.

exhaust intake and transcribe it and make sure that everything looks good. And I'm super impressed at the quality of it and Anyways,

Yeah. That's it. Peace. Space.

Oh, yeah. That's that's key as well because, copying it, and then I used shared clipboard.

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, 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 Then I place that string into a component using dangerously set in their HTML.

access to the CMS,

and they announced widgets.

course. This is a course that will teach you the JavaScript and the CSS and,

Another compliment.

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 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 try to update that file myself.

I just have to look at my home screen, and it

Thanks for an amazing podcast.

$5 things. Yeah. Scott They're so handy. Cheap cleaning utensils. I'll have a a a whole little,

if you are a developer.

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.

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

And it was great because I I,

Next. Js with Netlify.

Sick. I am going to shamelessly plug my latest course, which is going to be React Wes

CMS where you can log in and create your content types, 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.

for doing the dishes that I am, Head on over to syntax.fm 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 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

social media, I have used several different captioning

scrubber for your cast iron pans.

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.

Shameless plugs. I'm gonna shamelessly plug my master Gatsby.com Yeah. Dev.t0. That's that seems to be a pretty,

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,

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,

the scriptable file, in your Icloud. And then if you edit on your computer, it will sync it with the 1 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,

any possibility of you cutting yourself.

You get this really cool

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

Awesome. I'm going to sick pick an iPhone app called Scriptable

chain it's like a chain mail 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

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, JS this knife cleaner. Wes, what do you use for cleaning knives?

and Sanity is an awesome CMS for giving to your client. They just introduced this thing called Presence,

drop Always make 1 commit per pull request.

Again, I'll have links to all this stuff. Looks like a little chain mail towel. That way, you Sanity 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? 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.

can and, get any of that that hard to get stuff off there without reaching for a sponge or anything like that.

Thank you. Next question is from Ashik Haraf.

much more about the lifestyle and whatnot. So, yeah, I think those are are some things to think about

Sure sure question. Have you tried an ultra wide monitor for coating such as a 34 or 38 inches? what I'm saying is is that, like,

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.

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.

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,

pretty pretty cool. Also, I wanna shout out another thing that they did is, Sanity dot io forward slash create,

Yeah. Yeah. But I don't know. It just I think it's just the the nature of the platform is very visual and

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, potentially have an issue that was brought in in a specific commit, they're not a lot of fun. There's all several different ways you can there's definitely, I don't know about 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.

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 Oh, man. I I love this question because it's gonna trigger some people.

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.

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, the machine learning

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

Hey, guys.

Yeah. I've seen this around the the on the social media, believe it or not. And, I

And one of the features they just rolled out is the ability to make

or off a carb on on my thing, and I was like, oh, plastic because you can't, like, mar the surface.

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.

for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop

So so this is number 1

ultrawide 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, Most likely, what you're gonna do is you're either going to p, pick them, or s, squash them.

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.

resolution reasons, going with another 4 k display. But, like, the minute there's an affordable usually 1,000 of dollars to caption each of my courses.

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.

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.

Yes. Sorry. Super duper out.

Soap. Yeah. And Cast iron can sometimes 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, developer Instagram is odd.

And you can't. But I found this app called Scriptable App, and they allow you to do JavaScript automations.

list of them here in the in the show notes.

We would see this all the stop.

you need to remember that.

I hope I don't either. Right. Right? Like like, sometimes we make Angular jokes and stuff like that. But, like, again,

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 and then they would be frustrated because they couldn't just edit the HTML directly.

return a string of the SVG code with the arguments interpolated in.

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.

super used throughout the entire industry.

very, very similar in the way they handle things such as just being generally components, Lego pieces that you plug in, whatever. Wes

and people would just type their HTML straight away, and they'd know a little bit of JavaScript.

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.

super relevant,

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.

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

an opening for you to transition So I use this, Versus Node extension,

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.

time in the boot camp where we would learn.

you can, like, make this amazing 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.

go on and on about Angular. I have used Angular in the past version 1.3, 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,

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

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

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.

a very high version now

but I know they're on,

thing to thing. Obviously, you're not gonna immediately go from 3 years in Angular to React, but, like, I guarantee

why? Because that Vercel is probably a very good We've never done captions and stuff for the podcast just because WordPress, sipping a coffee with my code screen open as much as everybody else. But, things like Gatsby with Netlify,

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

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,

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 I are not Angular developers, so you're not gonna hear us,

you get into it, but you're not at a point right now where you can you can make that

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

exists.

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,

enough forgot that Twitter 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.

Yeah. Well,

There's platforms like what is the dev platform called? 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

Discord. Yeah. Oh, that Tonza good Discord. Yeah. Level Up Tutorials Discord is, kicking with people helping each other and sharing stuff all the 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,

it depends on what you're trying to do here. Like, are you trying to grow a personality? Are you trying to grow, like,

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 I I do not know that it exists personally, framework here and definitely something to keep your eye on, especially as web components become 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.

in it? But it's hard to fix just humanity being awful.

Very, very dev focused.

And, you know, me, potentially, the things that I'm learning from social media are like how 8 Mile,

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

like, being the Deno facto user experiences that many people are are running into.

This awful side part where, like, often, people are very rude should it still work? 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 And then we'd introduce them

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

I guess, Yeah. I recently just found this Scott. And, because we we were having as you use Angular because a lot of these systems are all

upside to that type of them. So can I jump in here real quick? I embarrassingly it would be extensive, and, also, it would be it's a lot of overhead I don't think so. No. That's the one with Eminem. Right? That's the one with that with MBS.

I think it can I can either to be the one. So the way that it works is that it integrates right into my Vimeo.

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

But for me, personally, as a dev, I don't think any of these things are required beyond,

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

if that's a thing or not, but I certainly do not enjoy Facebook, If it's simply as

node packages you need to know. It's like, what?

it's funny that there's, like, there's there's people that have hundreds of thousands of followers widgets in JavaScript. So you can't use CSS or HTML, but you can use 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 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.

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

Dev.2?

like, I don't know if they code or not, but they they post lots of photos of, 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.

to sort of get into.

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? return from a React component with no modifications to it beyond Yeah. Well and and let me just say this too. The only way I'm going to be like, listen. I,

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

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 to whatever may have committed that error. So you're gonna wanna check out century at century.i0

Dev.t0.

Yeah. Yeah. Ten closures you need to know.

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

those are all good ones

of, like, the lifestyle that's associated

benefit to it or not not a half an awful it's not a benefit.

and I find that the people that comment on it are much more of an international audience. So I'm not sure,

on social media. There's a lot of toxic. You get a lot of, like, awful politics their own API that I'm assume converts to native.

with with coding, which, like, like, I'm all about. Like, I I love a beautiful monitor and 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

pretty good community. Lots of articles.

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.

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 and it would go and and and refresh the page and show me them. But now long, long overdue.

express

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

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.

look at an entire project

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? manage a team. They have a a greater handle on what it takes to pick software responsibly.

does that's different? I would say these people have a greater handle on what it takes to,

and break it down into the pieces that are needed 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 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

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

8 Mile.

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.

get me into the fold of Scott's jokes.

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

and just give the client Netlify CMS login, or do I the client their own GitHub account so I can

I have a Gatsby JS and a Netlify Just a quick reference, episode 2 Sanity Node, we dove deep into 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 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

I think that you do need a GitHub sweeping generalization about Webtech.

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

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 considered using Netlify CMS for an application 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.

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

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

built using Next. Js and

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.

client project about to launch. What's the best approach on handing over to a nontechnical client? Do I keep my GitHub account is not working as expected.

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

because, typically, I think of that as still just being, like,

Is there, like, multiple roles in that, or how does because at the end of the day, Netlify CMS just JS on component names are are almost always correct. I do have them up on GitHub, and people do submit little

Wes have from guide. I recently blocked all cookies on my mobile browser, Google Chrome. I noticed something weird on a couple of websites straight from your React component, it will, 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 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.

account to actually edit it because at the end of the day, when you hit save 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

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 and use coupon code syntax for $10 off.

user will touch, like a nontechnical person will touch,

some technical aspects to it. I would assume Again, it's a decent little,

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

it's a pretty lightweight CMS.

that a SVGs in React in terms of, like, inline SVGs, in a layman's terms or or nontech terms to people who are stakeholders

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

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 I know for a fact has been and they have a whole bunch of different starters for those little scrapers are so handy even for So if you wanna check out Sanity, go to sanity.ioforward/ save it and whatnot, but it's it's really slick. I was really happy to find it. Interesting.

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.

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.

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.

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.

That sounds like like a nursery rhyme I would sing to the kids. Like, You can definitely learn quite a bit about modern front end development

SVGR. I'm not I'm not sure what that JS, but, like, there are definitely ones where you can import 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,

Social media. Burn it all. No, 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

or color as props.

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.

or maybe Hacker News occasionally.

which Scott mentioned.

just paste it into this 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,

The SVGs do valid valid react code. So you can just have a straight up SVG

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

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

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

Jordan White.

do all of that all those hoops and whatnot to take it from Wes ESLint a,

So I do that. And then I have things like accent

You can use it as a webpack plug in, meaning that anytime you import an SVG In the past, I've used SVGR, they'll follow-up with a, hey. Are you still interested

Alright. And the question is from

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.

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.

there is a little button or link underneath the reviewers, supposed to not work? I get an error message 404 not found.

Here's a little tip. So if you're in GitHub poll requests and you have a poll request open,

that

we actually have access to see what commit brought in that error. Yeah. Right in your Sentry dashboard.

often what people will do is is what's called a rebase. So, like, if I'm working on a feature,

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

where I make, one thing I'm working on right now is being able to resize something else. Right? Yes. Right. Exactly.

GitHub actions issues Wes Node of our developers was pushing

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

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

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

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

So, really, even if you're going to change your your code later,

history or, like, you go back in a year. You're like, oh, who's working on this feature?

I'm talking about Sentry

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.

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

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.

It just when you go to make that pull request into,

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 it says, still in progress, question mark, convert it to draft. And what that does is it converts your poll Wes to a draft

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.

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, 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 over how the icons are. I also have a size property that determines the size of the icon if I need to do that

the master branch, At the time, it was we would learn HTML, CSS, get grimy.

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,

and allow me to pick and choose

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,

This is a browser feature intended for developers. If someone told you to copy paste something rather than the nitty gritty of should we use hooks or,

Yeah.

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

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

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.

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, from somewhere. I'm not sure exactly why cookies do this, but what happens is they're trying to fetch something 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 it will try to rehydrate it and rerender it on the client. In most of the case, you don't see anything happen because 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 in the Netlify CMS, it makes it get commit

which allows you to do web components.

it's the same thing as using dev tools. You're in a privileged environment, and if you intentionally

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 The reason why I decided to

Next step is going to be a question from Falk. He asks, 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 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 And social media is a place where you can really

And then if there is an edit to Node of my videos,

Luckily,

TypeScript, 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? US per minute, so it's not cheap. It costs some sort of authentication

services in the past, and I have landed on rev, I have a Facebook page, And at the end of the day, you're a JavaScript developer.

Alright. Next question is from Fernando

that that pays off

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 and open up the dev tools, you you're greeted with this immediate huge

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, too much work to try to push them over and whatnot.

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 Alright. So Sanity, you know it by now. Structure content CMS. It spits out a Yeah. Those glued to Sanity.

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.

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.

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

entirely based on deaf users taking my courses. Like, I get a lot of,

and then they have an actual person go through it

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 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 And then she'll look it up. She'll tell them, and then never hear from them again.

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 You should be able to jump from

rev.com,

React dotjs,

You log in to Rev. You select all the Vimeo videos. Oh, wow. You you order them. It's a buck 25 But I'm pretty sure it doesn't doesn't really matter. Especially, like, it sounds like you're at a job that already has

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.

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.

even even things like a capitals

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 that has a higher than 14:40 all of the money in the world that someone who is amazing at Angular

switching from a totally non tech industry, nonprofits, you shouldn't be using soap on those types of things.

but in a tech role, ability to to go into this. Like, you can 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.

I was talking about my Wyze Cam, and and someone was like, oh, they they care more about Google Analytics than In the top right hand corner, there is a button that says ask a poll Wes. Go ahead and pop it in the box, sense. Alright. Next question

are often looking for these types of people because would be able to

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

not a typical That's I think it's something Facebook is trying to fix because if you don't reply to somebody, 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

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

techies inside of every single company

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, we will probably answer it on the show. So let's grab the first one. The first one is from Ryan. Hey, syntax boys.

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.

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

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.

and Wes Bos. Welcome

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 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 time. Yeah. The Discord is a really good one. I don't think

pulling open his cut and whatever is fantastic.

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 Okay. Next question is from Joel. How do you handle SVGs in React? I know SVGR Okay. Next question is from Adam. Adam says, what makes a software engineer am feeling not relevant is if the the,

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

Yes.

which is Yeah. Supposed to be designed to be a four zero four page and not have any useful information. Definitely, yes.

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 you will notice

Stencils, like, sort of

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

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.

their whole it's it's by Ionic, but their whole deal is that their their advertising is, like, you can use stencil components

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.

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, like filler, stroke, or control color,

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