Skip to main content
304

November 25th, 2020 × #WebRTC#Debugging#Frameworks

Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

Scotty and Wesbos answer developer questions submitted by podcast listeners on topics like WebRTC, debugging, Rust, Sanity CMS, and more.

or
Topic 0 00:00

Transcript

Announcer

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss. Welcome to Syntax. This is a podcast with the tastiest web development treats. Re We've got a potluck for you today, which is where we answer the questions that you submit. If you've got a question you'd like us to answer on a future podcast, Hit up syntax.fm.

Announcer

There's a button in the right hand court top right hand corner. It says ask a question. Click it. Put your little question in the box.

Topic 1 00:26

Submit questions via syntax.fm

Announcer

Submit it over the interwebs, and we will answer on the podcast. So today, we got 2 on awesome sponsors. We got Sanity, which is all of your Structured content CMS needs and Sentry, which does your bug and error exception tracking. I'll talk about them partway through the episode. How are you doing today, Scott?

Scott Tolinski

Hey. I'm doing good. I'm on my 2nd coffee. So, that is not exactly promoting responsible behavior, but I am Getting here. Let's just say that. I'm I'm here. I've made it into the studio, which is literally the next room next to my bedroom, so I have made it. I have I am I am ready to work.

Announcer

Beautiful. We are having carpet installed on our stairs right now. So if you hear a bunch of banging, That's what it is.

Announcer

It's just real life. You know? It's just that's just how it is. Yeah. What do what do we do? So let's get into that. We got some really good questions in. So thanks to everyone who submitted them. We'll just get on into them. 1st one is from Upcon.

Announcer

How do you implement WebRTC? Please tell us more about online stream Streaming, screen sharing, and data flow.

Announcer

So for this, I'm I'm really into WebRTC. WebRTC is real time communication.

Topic 2 01:37

WebRTC enables peer to peer communication in the browser

Announcer

Essentially, what it allows you to do is open up data channels between clients between most likely multiple browsers. And you can send data whether that's Video, webcam, audio, or just raw data, you can share that from peer to peer. We did a whole show on this

Scott Tolinski

Ian Ramsey who made Sorry to interrupt. We also did our 3rd ever or our 2nd ever syntax show on this. Oh.

Scott Tolinski

And 2017 was on WebRTC.

Announcer

Episode 2 was on the 2.

Announcer

So listen to that one. Listen to show 256 with Ian Ramsey who actually built a this kind of Zoom competitor entirely in the browser with web technologies.

Announcer

Maybe we'll do another episode on on just that at one point.

Announcer

I recently was talking to a friend who works for DAILY dotco, and they they provide they're kind of, I think they're like a Twilio competitor, where they provide APIs for doing rid WebRTC.

Announcer

Because the the sort of the sucky thing at the end of the day is that sometimes you can't connect 2 computers to each other rid without somebody in the middle because of firewalls. And if that's the case, then you need to hot potato your data to a third party service.

Announcer

Rid. And, Twilio is a very popular one. And then I was just talking to a friend who works on daily.co.

Announcer

He gave me an account for it. So I wanna I kinda wanna build something now. It seems it seems like they also give you a couple more APIs where you can sort of hit the ground running.

Announcer

They have a prebuilt widget, so I'm gonna try that out at some point.

Scott Tolinski

Very interesting. Yeah.

Topic 3 03:21

Svelte is the easiest framework for beginners

Scott Tolinski

Next question is from Sam. It says, Which JS library slash framework do you think beginners might find the easiest time to understand? I'm gonna go out on a lemon here and say, rid Svelte by a country mile.

Scott Tolinski

Svelte is very easy, specifically because you don't have to worry about, like, set state. You don't have to worry about How many times does this thing rerender? You don't have to worry about hooks or the combination of all things. You don't even have to worry about JSX. There's It's just HTML plus some template text. Right? Yeah. You don't have to worry about any of those complexities.

Scott Tolinski

And when you when you set a variable let let's say I have a variable named rid Is cool, and I said is cool is equal to Wes, unless I change it to Scott, it updates automatically to Scott on the front end of the site without you having to do anything. So Svelte, I think, rid the most sense when you're learning it to say, like, this works the way I would expect it to work compared to React when you hit situations you're like, I don't know what's going on here. Maybe I I like, I I turned my website into a a a rubber duck. I don't know how I did that, but I did it. And those kind of things, I don't think happen as much when your learnings fell. That's just my opinion. Rid. The thing is, though, with React, you're gonna have a lot more tutorial material out there. You're gonna have a lot of trainers who will teach you the step by step. Rid. So if you are a capable developer, and you want to try React, I think, learning React might be easier Because there's the content out there, but learning Svelte will be easier because of the code base itself.

Announcer

Yeah. I'm I'm gonna agree with everything you just said there, and rid Even one more thing is that Svelte is not a toy either. You know? Like, just because it's easy to get up and running, it's it's just like those actual real world applications that run on Svelte. So Definitely check that out first, I would say.

Scott Tolinski

Yeah. Yeah. It's very good.

Announcer

Next question we have here is from Steven Gladney.

Announcer

How do you deal with different case types between different systems for for your project? For example, I store records in my Postgres database, Which typically uses snake case. Snake case is when you put underscores in between the words, and then I render them to React, which Props are typically camel case where the first word is lowercase and then the first letter of every subsequent word is is capitalized. That's camel case, rid like a camel. Is it better to add and convert these cases back and forth between the front end and back end or just rid Pick one case and use it everywhere.

Topic 4 05:10

CamelCase vs snake_case - pick one convention and stick to it

Announcer

Oh, that's that's a kind of interesting question because, like, you do it on the back end. You've got underscores for all of your property types, and then you gotta flip to react. And we should say that, like, nothing is wrong here.

Announcer

And often, you'll see people confuse an ESLint rule with the Bible and it being gospel.

Announcer

It's just a ESLint rule. You can turn it off if you don't want. So You can change. I would say if you're trying to map 1 to 1 from your database to your front end, I would probably just pick 1 one case and use it. And if that means that you have to use snake case on the front end, I think rid I don't I have actually not run into the industry because I I use CamelCase everywhere.

Topic 5 06:26

Debugging is about isolation - isolate the problem then solve it

Announcer

But what if your back end had to use snake case? What would you do, Scott?

Scott Tolinski

I use whatever cases used primarily in that environment specifically. So if the back end has to use 1 and if If I need another one, I reassign it to whatever it needs to be. If I need to convert from 1 to another, Lodash has a function to convert from 1 to the other really easily. They just have kebab or snake or whatever to convert. If you're copying and pasting a lot of code and finding that to be obnoxious, you can convert them really easily in Versus Code. Rid. Like, let's say I have 1, I think is it an extension? I think it is an extension case. See what I have for case because I can change case to be literally anything just by selecting the word and whatever. So I always use whatever cases of, like, used in that system. The, Versus code extension that I use is called change hyphen a case, not to be confused with change underscore case, Which I don't know is a real one, but that's a a case joke for you. That's kebab case. Kebab case. Yeah. Here's a question, Wes. Here's an unrelated question, but semi related. Rid What's your favorite case name? Because I think I think snake case is my favorite, but I I have a hard time between snake case and kebab cases. They're both very fun. I think kebab case is my favorite just because, like, I love kebab. Yeah. And it's yeah. I just picture a little sword going through all the letters. Very reasonable take. Yeah. Yeah. It it's unfortunate. You can't use it very much in JavaScript because

Announcer

dashes don't work in variable names. But Yeah. Yeah. The name of it, kebab case is the best. I what are the other names? There's up what's there's Pascal case or upper camel case Yeah. Where you capitalize the first thing.

Scott Tolinski

I capitalize everything with underscores. What's that called? Because that's, like, for constant variables. I use that for constant variables.

Scott Tolinski

Yeah. So camel case, snake case, kebab case, rid Upcase. I don't know. Yeah. There's a there's a bunch of these, but the fun ones are primarily kebab, snake, and camel. I mean, fantastical is not that fun of a word. Flat case is all lower. Oh, I found the list on I found the list on the Wikipedia.

Announcer

All lowercase is called flat case.

Announcer

All upper cat capitals is upper flat case. Oh. Camel case or Dromedary case. Man, I never heard of that. Capital is is, upper camel case or Pascal case.

Announcer

Snake case is also called pothole case. Okay. Okay.

Announcer

Here, this is the answer to what you were asking.

Announcer

All capitals, but with underscore is called screaming snake case.

Announcer

Oh.

Announcer

Macro case or Constant case, I think, is what you were referring to. Camel snake case is something.

Announcer

Kebab case is also called dash case and lisp case.

Announcer

All capitals with dashes is called train case or screaming kebab case. Oh my god.

Announcer

And then capitals rid. With dashes, it's called train case.

Scott Tolinski

Sick. Interesting. Very, very good. I'm glad we did that. So next one is from Joe from Minnesota.

Scott Tolinski

1st off, Scott, you are great.

Topic 6 09:26

Framework vs library distinction doesn't really matter

Scott Tolinski

Thank you, Joe.

Scott Tolinski

Wes, you're cool too. Thanks. I'm just joking. You're both great.

Scott Tolinski

Okay. My question is about the difference between a framework and a library. Should we have 2 separate words? A quick Google will give you the good both and for is jQuery a library or framework. I think jQuery is a library because it has rid. Different methods that I can pull off the shelf and use like a library.

Scott Tolinski

Get it? Oh my gosh. Okay. So he's making jokes now. Joe, you got jokes.

Scott Tolinski

Re I'm still learning.

Scott Tolinski

So React, which is a framework question mark, seems like magic. I don't know everything it's doing, but maybe it's rid my understanding. Thanks, guys, again. You both are really terrific teachers. Thank you so much, Joe. Okay. So I don't think it matters. Okay? The whole deal if it's a library or a framework, That was a big deal a little while ago, and people were trying to be like, React is a a library, not a framework. Whatever. Okay? It's just a UI framework. It's a framework for building UIs. Is it a rid. A CSS framework, a JavaScript framework, or whatever, I don't think it matters whatsoever what is a framework and what is a library.

Scott Tolinski

I I don't think it matters.

Scott Tolinski

Is it taking over what you would write for your front end? Like, are you writing front end code in React, not just straight up HTML? Yes. Well, then it's a framework for front end code. Is it this or that? Yeah. I I think most of the time, if it if you think it's a framework, it's probably a framework. At the end of the day, I don't really think that this distinction really matters. Is React a library? Yes. Is Vue a library? Yes. Is are they both frameworks? Yes.

Announcer

Yeah. That's it it's a question we get all the time, and I actually put this in my in my Gatsby course. I just said, like, what's the difference between rid Gatsby, which is technically a framework, and React, which they call a library.

Announcer

And the way I kinda look at it is if you're pulling something in for its utility, rid It's probably a library.

Announcer

But if it is a fundamental building block, you build your app on top of it, it is a framework.

Announcer

Rid So something like Gatsby, it gives you routing and bundling and image loading and page transitions, and that In that case, I would say that's a framework because you're building your app on top of that. Whereas, React is a tricky one because, generally, your entire application is React. Right? You couldn't really, like, re Take out React, but you are just pulling in React or Lodash or whatever for the utility that it provides, Meaning that it's not the like, React, the utility that you're pulling in is the rendering, taking your data and your templates and rendering it out to HTML and and knowing when rid and how to update that as quickly as possible. Lodash is a utility for working with data and functional programming. So That's how I see it, but at the end of the day, it doesn't matter. Right? That's what's it's bike shedding. We should do another bike shedding episode.

Scott Tolinski

Yeah. So in case you wanted some clarity on that, Joe, I said, no. It does not matter, and I don't care. And Wes says, very, very strict things that make one another. So, do with that what you will in case you wanted any bit of clarity there.

Announcer

This next one is from Matt. Hey, guys.

Announcer

Longtime listener. 1st time caller.

Topic 7 12:41

Debugging is a skill that improves with experience

Announcer

Hey, Matt. Thanks for calling in.

Announcer

Read. How can I work on improving my generic problem solving skills and my debugging skills? I recently had a discussion with a senior coworker to get some feedback on what I need to improve.

Announcer

And according to them, both my problem solving and debugging tend to be much weaker when dealing with unfamiliar areas of the code base or completely new issues.

Announcer

My coworker suggested these were things that will improve as I get more experience, but I feel like I have to be more proactive with these types of things. If you have any advice, I would love to hear. This is an interesting one because read. That's the question is, how do you get better at debugging? And and I think the senior dev here is is probably right is that as you encounter more issues, You will get better at them, but, also, like, there's gotta be some way to to learn debugging. Because, like, even, Like, the other day, one of the lights in our our house wasn't working, and this was a lamp with a bulb in it plugged into a separate dimmer re Plugged into a Wi Fi switch. And my wife just says, like, the the lamp's broken.

Announcer

I'm just like, okay.

Announcer

What what part? Where in the situation? Is the bulb broken? Is the stand? Is the stand? Is it plugged in? Is it the dimmer, or is it the Wi Fi switch? She says, I don't know. It's broken. Like, First of all, she didn't she didn't care enough to actually do it, and she was just putting that on my lap. So that's probably what it was. But, at the same time, I was like she's like, what do I test? Rid And I was like, okay. Well, like, start start by removing things that don't necessarily matter. Because is the light still working? So what you would do is take up the dimmer and the Wi Fi switch and plug it in directly, and then figure out, okay. Is it the cord? Mhmm. Is it the switch on the cord? Is it the bulb? And rid. And there's, like, just so many different things like that. And, I was like, oh, that's interesting how, like, my head immediately went for take rid All of as much as you can out of the picture, and then start to add back from there once you've confirmed it wasn't

Scott Tolinski

rid Troubleshooting projectors under the gun of doctors trying to wait for the projector to be working. So it would be like an auditorium full of 200 doctors, and The projector would be broken, and I had to walk down there in front of everybody and try to fix it while everybody's staring at me. So when you get in those kind of situations, you learn pretty quickly how to rid do sort of step by step troubleshooting where you're first, you try to, like, isolate what exactly is wrong with it. Now some of our Isolation, that's the key. Isolation is really the key of figuring out what the problem is. Now there are tools that will help you. I mean, some of our sponsors, and one of our sponsors this episode, Century, it's a decent option for having rid. The ability to troubleshoot things easier because they give you bread crumbs, like where is the problem located sort of in this line of code. So the key is to isolate where the problem is maybe potentially what line of code, and, some of those tools for isolating things is, like, straight up commenting stuff out. For me, particular, like, if I'm in a React site, let's say. Right? My application's not building.

Scott Tolinski

I start com I I started, like, the app dotjs where I have, like, my header and my footer and my content section or whatever, rid. And I start commenting some of those sections out. Maybe I'll comment out the header or comment out the footer or whatever where maybe potentially some things that have been changed there. And I'll get the site working, and then I'll start to uncomment things out until it breaks. If that's if you cannot get a good stack trace as to where the problem is. So I I start by re Commenting stuff out until I know that the minimum viable code is working, and then I start uncommenting out from there see if it's maybe potentially a syntax error that's not being located elsewhere. So, again, isolation is really the key. Isolating and and that is what you should do first is is rid. Find exactly where the problem is. Because if you don't know where exactly the problem is, it's impossible to to really spend like, you could just be start changing things. Oh, I think this is the problem. No. Don't think it's the problem. Know exactly where the problem is and then go from there. Yeah. I've been getting into,

Announcer

Hardware debugging. Yeah. Like like small engines all summer, and there's issues with them. And some people On the interwebs, we'll just say, like, start replacing parts, but that gets super expensive. You're gonna spend $50 on a part, and that ends up not being the issue. So That's like the spray and pray method of it. And you gotta really be able to figure out is the issue, And that honestly just comes with time and isolating

Scott Tolinski

the actual problem. Yep. Next question is from Brian. Rid Hey, guys. I enjoy your podcast as I feel. I can learn a lot of technical stuff while listening to it. I just listened to your podcast on making freelancing easier and enjoyed it. Rid. You talk about making your own component library. Do you have any tips on how to store manage a component library? Store manager component library. Okay. So there's a couple of ways to do this. Right? There is the the way that you could create a package. Rid So I've done I've let's just say I've done a a few of these in our project currently, and I don't know which is the best best one here. So we we have a a few different ways. One, you can create a project get it makes typing things really easy. It makes deploying really easy. It rid It makes typing things really easy. It makes deploying really easy. It makes all of the things that you hate to get up and running with, maybe that's the bundling aspect or Preparing for NPM, all of those things are made easy with t s d x. So if you are going to be making a React library, go for t s d x, read. And then you're going to have to get into linking via NPM link or Yarn link to link the project into your current one and install it that way, and it is the it's occasionally a giant PIA. So, just to let you know, then you have 2 code bases. Right? And then you're in 1 code base. You flop over. You make some changes. You update, Whatever. And that has to be a part of your workflow.

Scott Tolinski

It's not a lot of fun depending on the team size, though. Those kind of things can be mitigated Based on, your your workflows in general, there's also the option of doing something like a a learner or is it n x? Is that the new one? N x for mono repos? Nx.dev, extensible dev tools for mono repos. I have not used n x, but I have used Lerna, and it was a giant pain. And I couldn't get it working in the project, and so this is the option where you would have a monorepo that contains All of your different packages that can be linked together with a tool like Lerna, or there's even things like Yarn Workspaces.

Topic 8 18:43

For component libraries, use Storybook and Babel aliases

Scott Tolinski

There's also the option of doing Sort of what I do, if this package does not need to be linked out anywhere else, you don't need to use it elsewhere.

Scott Tolinski

Yeah. Here's a neat option. I like to use Babble aliases in just a directory where I alias a directory. For instance, here's a good example, my hooks. So I have Scott's dope hooks or just Scott's hooks, which is just a folder inside of my project, and I alias that directory's path rid to just be, hooks.

Scott Tolinski

So when I import any of my hooks, I import blank from And then just hooks as if it was an NTM package, but it's really just a Babble alias that looks for a folder in my project. And I do that with My hooks, my animations, my style component elements, my global use case utilities, I do that with my rid State library, I do that with our email library, and I put library in quotes. I'm doing air quotes here because these things are not, like, real libraries. They're just folders in my my application that I'm linking to. And I I use Babel aliases somewhat liberally, but I I think they can be really useful. And One of the ways people do with that is they'll prefix it with a specific character so that anybody can tell that it's a local package rid. Babbel alias, like, you could put, like, some sort of a symbol. Sometimes people were using the at symbol, but now the at symbol is pretty frequently used for organizational components. So rid. Drug, I I don't know. Whatever you want. I don't use any prefix. I just would expect that if there is a package named hooks, people would realize that it's not a actual package named hooks, rid But that's just me.

Announcer

I agree with everything you've said there. The only thing I'll add is if there are UI components, maybe stick them all in a storybook So you can visualize them all, especially if you got multiple people on your team that wanna see the ins and outs of everything like that. Storybook is a, A tool that allows you to visualize all of your UI components. It was started with React, I think, but it now works with Vue, Angular, and a couple others rid out there. And it it sort of gives you just this page that you can see all of your components in isolation, which is also a nice way to build your components because then they're not relying on Any other pieces of data, as long as your components are past the proper props, then they should just work. They should stand alone. Right? So check it out. Storybook.js.org.

Announcer

Next question from Nem Butcher.

Announcer

Hey, Watson Scott. Fan. Listen to every episode. Thank you. That's a lot of episodes.

Topic 9 21:43

Use Rust via WebAssembly for performance gains

Announcer

It gained our attention that Scott is learning Rust. So am I, and so far, I am liking it a lot.

Announcer

However, I lack a good reason to actually use it on real world production problems. It's funny. That's the exact problem I'm having with, Dino right now. Yeah. I'm just sitting here being like, I wish actually had a problem to that this fixed because I would love to build something in it. I'm a lot faster and efficient if I stick with JavaScript and Node. Js, and they seem a much better fit rid For my web dev related tasks, then a system level programming language. What projects do you use Rust for, and do you have any ideas on where Rust might be The thing to use when tackling web projects. Great question. Very excited to hear your answer.

Scott Tolinski

Yeah. I think there's a lot of neat use cases, and many of them rid. Are going to be for your own exploration rather than, like, this is the best use case right now for a professional project. But for instance, let's say you had a heavy JavaScript function, some heavy JavaScript functionality using something like Rust to do that Via WasmPack.

Scott Tolinski

WasmPack, not to be confused with Webpack, but WasmPack is is a a way that allows you to use Rust modules, re Basically, 1 to 1 in JavaScript so that you can import, essentially, Rust functions directly into JavaScript.

Scott Tolinski

So if you wanna say, like, okay. I have some rid heavy JavaScript, and I wanna try this out in the real world. Check out Wasm pack, and Wasm, to be honest, is not really rid It's not super hard to get a handle on once you once you get the basics. So if you've already gotten the basics of Rust, you can get a handle on WASM with Rust In just about no time, if you watch a couple of YouTube videos or hit up some, I think there's, like, the WASM Rust WASM book. I'll I'll link to that in the show notes. Either way, You can Wes, you're familiar with MongoDB Compass. Right? Do you use Compass? Oh, yeah. I use it. I I switched maybe 6 months ago from rid. MongoHub, and I love it. It's super good.

Scott Tolinski

Yeah. So Mongo Compass is like a stand alone desktop app that allows you to, re Well, get all sorts of information about your your your schema, your data inside of a MongoDB database. You can connect to a database, change it, whatever, but you can also analyze rid of it. And the analyzation tools are really, really neat, and those are all written in Rust and are being used in in the web. This is an Electron app. It's all being used via rid Wasm in Rust. So when you have, like, a really heavy function, like, meaning to analyze a bunch of data, that might be a neat ready. To say, you know what? I'm gonna write this function in Rust, and then I'm gonna use WASM to run it. It's it's definitely a neat option.

Scott Tolinski

There's also if you're looking for more web based projects, There is a really great framework, if you haven't seen it by now, called Rocket. Atrocket.rs allows you to build full on web apps Using Rust, and it's really great. It has templating, cookies, streaming. There's GraphQL component if you want it. There's testing, all sorts of neat stuff. So if you wanna just try building a web app in Rust, hate rockets where it's at. Give it a try. And, again, it doesn't have to be any serious project. I don't know if I would do a client project in this for any given reason for a freelance project. Can you imagine that client being like, I would like somebody to update this that's not you? And they'd be like, well, it's written in this Rust rid framework plus web framework.

Scott Tolinski

So, you know, maybe don't go nuts on that with client projects, but I think there is some real world use cases. One of the things that I built with it just rid. For funsies was I built a contract to PDF generator where it's a command line utility where Prompts me for some things, and then what it does is it replaces those strings in a template and then spits out an actual PDF rid. Exactly looking like how I wanted to so that I can write contracts for anybody, content creators, whatever, just by the command line. So The problems that you can solve with this are pretty much endless. You can do all sorts of web stuff. You can build a basic web server if you really want. But at the end of the day, I think just getting your feet with rid. With, some, like, goofy real world stuff and just trying it in different places is what you should do. Yeah. The only thing I'll add to that is You talk about, like, you're much more productive with the tech that you know. That's always important to to try new stuff, whether it's an entirely different language

Announcer

or whether it's just different rid. Frameworks and libraries than they used to doing because, like, this stuff does change over time.

Announcer

And if you stick with whatever rid stack that you are loving and knowing for 5 or 6 years, then you might run the risk of getting out of date. Or, also, it just, like, opens re Opens your mind up to all new things. Like, I know that a lot of the new stuff we have in JavaScript, a lot of the new ideas that come to JavaScript rid are not because people are just in JavaScript. It's because they're in other languages. It mean, like, what if we brought these ideas to Mhmm. Like, rid Types or state management or I don't know. All kinds of different stuff. What if we brought that to JavaScript? Right? And I'm glad that we have those types of people because that pushes JavaScript forward as well. Totally.

Scott Tolinski

Learning any of these new frameworks, it is really funny because I or new languages even. I I felt the same way about Node. Js. When I first learned, I was like, I don't even get what I would use this on because I have PHP, you know? But, like, I think it's hard sometimes to stay sane with all of the options that are available, and there's just too many different things. And I'm doing a a sly kind of transition into our and I'm talking about Sanity at Sanity.o, which will actually, solve some of the problems that any of these frameworks sort of fatigue can give you because, rid. Well, it makes hosting your data extremely easy, and I'm sorry if that transition was a little too, tightly integrated into my content. Somebody complained about that before. But, Wes, do you wanna talk about Sanity?

Announcer

Yes. Sanity dot I o is the headless CMS that we know and love. I actually used it in my Master Gatsby course, But I'm gonna focus on one of the features for Sanity. A couple podcasts we've talked about how they have this new feature that allows you to See who's editing and and whatnot, and they just have a new blog post out that's called creating a custom diff component.

Topic 10 27:29

Sanity CMS allows custom diff components

Announcer

And this is really cool because rid The way that Sanity works is that you can have this thing called Sanity Studio. It's based on React, but it's done for you. And you just go in and and create your re Content types, and it gives you a whole UI. But if you wanna customize that UI, you can because it's it's React, and you're allowed to jump in and make your own components.

Announcer

And rid. If you need to make a custom input component, you can do so with Sanity. And they have a blog post that shows how to show the def From and I actually have this in my own course platform as well as if you update some if if you change something in your CMS, Sometimes you wanna visually see what it was. Like, when I update somebody's email address, I wanna see beside that. It was rid. Westboss@gmail.com, but I changed it to west bro@netscape.ca.

Announcer

Re You wanna be able to see what you changed before you go ahead and and hit the save button before you publish it. And they have a blog post that re Shows you exactly how to do that with both the React as well as the Sanity API. So check it out on your next project, sanity dot rid. I o forward slash syntax. That will get you double free usage tier. And then check out the guide section on Sanity dot I o as well because they've got lots of rid Good tutorial content on there.

Scott Tolinski

Cool. Alright. Next question is from Doug Funny aka Douglas Funny. Doug, What's up? I love Doug. I don't know if you love Doug, but I love Doug. More of a Roger

Announcer

kinda Roger's a punk. Skeeter?

Scott Tolinski

Rid It's yeah. I like Skeeter's if we're gonna go on favorite characters, Skeeter's hand hands down the best Doug character. Or patty mayonnaise. Or the Dink family? Do you know what Dink stands for in the Dink family? No. What? An acronym, believe it or not. It's their last name in the show, But the it's a it's like income? Yeah. Double income, no kids because that's why they're rich. That family is, like, rich and has, like, a bunch of Gidget and Gizmos, and it's Because they're double income, no kids.

Announcer

Oh, I I was like, who was the Dinks? But that was his, goofy neighbor. Yeah. Oh. Is that funny? That's hilarious. That's true.

Scott Tolinski

That is true. Yes. At one one point in my life, one of my friends tried to accuse me of being a Roger. He was just saying, like, you just really enjoy being a Roger, and I was like, not even close, man. I'm I'm a, I'm a skeeter all the way for sure.

Scott Tolinski

Okay. So Back to the question. I've recently joined a great paying full time gig at a big enterprise level company as a senior JavaScript engineer Using React node and etcetera.

Scott Tolinski

I'm humbled to be here, but at the pace at times is slow, tickets are scarce, and I feel like I'm not able to really utilize or hone rid My skill set. I've been looking at potentially moving into a contracting or agency work. The money seems comparable with the added benefit of new and exciting projects and having more over them. Do you think the contract work would be more fulfilling, or is it crazy to leave a cushy job solely because I'm, in a sense, Or let me tell you, Doug Fenny, I have had the exact same experience. In fact, I took a job rid. At a, maybe not at an enterprise level company, but a bigger company than what I was working at. And I doubled my salary, which, at the time, was, like, crazy to me. I doubled my salary. So in addition to working at a new place that was kind of, like, big and exciting to me, I was rid a huge paycheck bump, but I hated it. The work sucked. The, designers were terrible.

Scott Tolinski

Like and I say terrible, I mean terrible. Like, this is well into, like, SVG and icon font territory, and they're giving me raster raster based crappy pixelated icons and stuff.

Scott Tolinski

Rid I just wanted out. I I had a bad time, and I couldn't quit because I had doubled my paycheck. I couldn't go back to my old job. I was not about start doing freelancing at that point because I just was I had a mortgage to pay and stuff. I I was just concerned about doing that.

Scott Tolinski

However, I kept my head down, and I got my work done. And I did a very good job. So that way, when anybody would be interviewed or asked About me at that job, they would say, oh, yes. Scott does amazing work, blah blah blah. He's he's very fast. He he does all the stuff. I also spent my time working on side rid Projects that were helpful to the organization. I've mentioned this before. I built, like, a to do list checker for people to to check before they launch occasionally, things were slipping through the cracks with some developers.

Scott Tolinski

And while other developers who are bored were playing video games, that that was an actual thing. I kept my head down, and I learned a bunch of stuff and, made it applicable. So even if you're bored, you can spend that time to learn things, and maybe you can make it, Maybe don't develop a startup that you're planning on selling later because, that would be bad news for who owns that code, but you should be able to And then I got an email on LinkedIn saying, hey. We got this really sick new project. And guess what? It pays more than my current job had paid. So it was an easy yes to that and able to leave. Everybody at my current job was gonna say nice things about the work I had done, and I made that transition when it was appropriate, but I didn't rush it is really what it comes down to. I thought this was a super interesting question because I also I didn't have a similar, but I did a co op at ExxonMobil, which

Announcer

Is, one of the most the biggest companies in the world, and they paid super well. And what I saw there was a lot of re People who are getting paid 30% more than probably what equivalent job would get working at bank or something else like that.

Announcer

And people were they seemed miserable. They didn't say mopey, but you could tell that there was no there was no spunk in the air.

Announcer

And you could tell that people were getting their paycheck and and going home, which is not necessarily a bad thing, but I I didn't I didn't get rid. The sense that people are excited about the stuff that they're working on. So I also was told, like, early on, like, there's nothing more scary than a well paying job that you hate, rid Especially when you allow your lifestyle to inflate to the amount that you're making because then you you can't get out. Like, I see a lot of friends have this where They have a job, the mortgage, the car, the vacations, stuff like that. Yeah. And then and then you realize, like, oh, I I don't like what I'm doing, and you're you're kinda stuck, which is frustrating. So it sounds like you making the jump. You says the money seems comparable And the added benefit of new and exciting projects. So I would say if you can, either do what Scott was saying, which is, like, Try to learn a whole bunch on the dime of of whoever's paying you right now. Build a whole bunch of new projects, whatever.

Announcer

Try save up 6, 12 months' worth of expenses, and then go for it. Like, I certainly don't ever wanna see somebody live their whole life out rid. In a job that they don't necessarily like, but they stick with it because because they need to. And and that's there's certainly lots of people that rid. Have to do that? I'm not saying that, but it sounds like he has a possibility to make a jump. Mhmm. One last thing I'll say is that agency contract work, Very fun. Also, very grueling. Stressful.

Announcer

Very stressful. Lots of the pace of it. Not every company, but a lot of them are very, very fast. There's you're in rid. 7 or 8 different projects a week sometimes, which can be nice. You can learn a whole lot, but I don't know a lot of people that work at agencies For the long run because of the the pace that it is at.

Announcer

Mhmm. Yeah. It can be tough. Definitely tough. Next question we have here is from Robin h. Do you think he has Robin Hood? Could be. I have a CSS question.

Announcer

I'm currently working on a next project and try and decide which CSS system to use. What is your take on CSS modules? I know you like style components a lot, But since they are built, there's built in support for CSS modules with scope CSS. I have a hard time feeling motivated to bring a new framework to it. Am I missing something? No. You're not. If you if you like CSS modules and if you can be productive in it, then You should go for it. I just prefer the approach of, like, just the way that emotion or style components Goes at it, so that's why I use it. At the end of the day, it doesn't really matter because it just gets compiled down to to CSS at the end of the day. Guess it doesn't totally get compiled down to CSS because it will it will re regenerate it. But nothing wrong with CSS modules. I just don't like the rid Developer experience behind it. And I I might be wrong about that. I think I should probably take another look at all of the options. I think it's been, like, 2 or 3 years since rid We done the CSS and JS show, so I like it. The landscape has definitely changed. There's a lot of new options.

Scott Tolinski

Even, like, Solid components, similar APIs that are are nicer and a little bit better.

Scott Tolinski

With CSS modules, here's a quick question for you. With CSS modules, do you have to import The class name and then attach it to the thing, is that how you do it? Yeah. I don't like that. I would just like I would love if you just import a CSS file or better yet. Here's the ultimate solution. In Svelte, you have a style tag at the bottom of the, the file or wherever you want. In the file, rid. You have a style tag, and that style tag becomes scoped to that file or that component. If I make a component in Svelte, I just write a style tag, and it automatically scopes that CSS rid that component.

Scott Tolinski

Give me that for React, please. I want that. In fact, the the closest I've gotten to that is With styled components, what I've been doing, and I I say this as I've been doing it, but I've only been doing it for, like, a couple weeks here giving this a try. What I have been doing rid. As I've been writing a singular wrapper component that would be like a div or whatever the component would be wrapped with, and this will just be, You know, let's say, my component is quiz results, then I'll have a component quiz results wrapper. And then what that is, that is a that is, in fact, a a re Scoped wrapper for that specific component. Exactly what I want, except for it's a div in a component. Whatever. So to me, that that's, like, sort of the golden solution is to be able to get rid. Global CSS where you want it, and then in addition to that scoped, like, hard scope CSS where you want it as well. I think the merger of those 2 worlds rid the best option. But in terms of, like, what works best for you, if CSS modules works best for you, then by all means, go for it. I just don't love it myself. It seems like a little bit extra work. Alright. Next question is from Michael Westfall regarding episode 290.

Scott Tolinski

You fielded a question regarding Angular, And I would appreciate and I appreciated your balanced response as I'm primarily an Angular developer at my job. If you could, would you please update the link to the Angular website? Rid Going to Angular dot io, which is at version 10 instead of the Angular JS v one website. Keep up the great work. Why, thank you, Michael. Yeah. But here, Let me propose something to you. If you see something like this that we goofed up, then these docs or or these episodes, they're all in markdown files in our GitHub repo, And it would be really, really super easy to submit a PR if that's the kind of thing that you noticed that we goofed up on. It would be faster too considering Wes and I rid. Both have jam packed schedules all day long, so I would really, really appreciate Hacktoberfest

Announcer

points for it. I think I Oh. I think I labeled syntax rid. Says a Hacktoberfest repo, so send us your PRs. Go nuts. Lots of people do because we get lots of stuff wrong in the show notes, And people just submit PRs, which is awesome because I don't even have to do the overhead of getting an email,

Scott Tolinski

getting set up, fixing it, Pushing it. It just has to be like, oh, we did this thing wrong. Here's the solution immediately, and it will auto deploy for you. So, Yeah. Just do do that kind of thing. And and to be honest, as somebody who is dyslexic, trying to understand the difference between Angular dot rid. I own Angular JS is a nightmare for me. I will never ever ever get that right. I'm gonna tell you, 1st and foremost, I'm never going to get that right, especially because I do not work in either of those libraries.

Scott Tolinski

I am surprised to hear that both of those are still kicking, though. That is still a thing. I can't believe it. It was in 2015 rid when that whole thing happened. And that's still a thing, it seems like. Yeah. It was just I think they just have the docs

Announcer

because there's still lots of projects on Angular one. So they people still use Angular one, though? Oh, yeah. Like, as a primary. Yeah. There's massive apps that are built on it that will never be moved away. They're just way too big.

Scott Tolinski

Crazy that there's no real up I mean, I don't know what the upgrade path looks like, but that's crazy to me that there wouldn't be, like, an easy upgrade path.

Scott Tolinski

Easy enough. Code mods or whatever. Why both you and I are no longer Angular devs, which rid No shade. Oh, yeah. My upgrade path from Angular was to rewrite it in React.

Announcer

We have to officially say no shade on Angular because other people think The Angular is not good. It is. It's just not It is. What we use. Yeah.

Announcer

Next question from Sarah b. I really need your guys' advice on how to write a good resume or any rid you may have for getting noticed in the hiring process with only a couple years experience. I have been applying to many jobs as a front end developer, and I seem to get no ever.

Announcer

Any suggestions that are much appreciated? Thanks so much in advance.

Announcer

This is a good question. I I don't like I've hired a lot of I have I'm not hired a lot of newbie developers, but we did see a lot when I was doing the boot camp, we did see a lot of People going through.

Announcer

And, honestly, I think that what you saw that was unappealing was something that was way too long, rid Something that was way too generic.

Announcer

If I was trying to hire someone, I'd just be like, show me that you're a cool person, and you work on neat stuff, rid. How I can look at it and and what tech you're involved in, and don't make it this huge formal thing.

Announcer

Like, I remember when I do do resumes, we'd have, like, rid. Objective.

Announcer

To obtain a job that in furthers the my career and skills in changing the world with web development. Right? Like, Seems a bit silly to me. So it it's just too much to read, and I bet, like, people get hundreds of hundreds of resumes.

Announcer

Rid. And if you see something like that, even if I were to see the same Microsoft Word template, I would probably be like, rid This this person didn't care enough. So I don't know. That's my thoughts. I don't really know if I have any hard suggestions there, but it looks like Scott has some here.

Scott Tolinski

Do. And also, I've I've been on lots of ends of hiring and not even just dev jobs for all sorts of jobs. So I have seen a lot of bad resumes in different ways, And so I I know what makes a good resume and a bad resume. Here might be a fun example, Wes. I would be interested, Sarah, if we could anonymously rid Critique your resume. That would be kind of fun. Right? We could do an, hasty treat critiquing a resume. If you, are listening Or you're Sarah and you want to anonymously have your resume critiqued, we would obviously change the name of That'd be a fun show. Yeah. We could we could hide any information whether it's, like, re Change the name of the actually, that might be really fun to change the name of all of the places to fictional places.

Scott Tolinski

My tips for you based first and foremost would be, one, So when you list your work experiences at your different jobs, like the things that you did at each job, make it so it's like 4 or so relevant re Verb based tasks as in, like, wrote per and I should say this, tailor your resume to the job you're applying for. Rid. If you're applying for a Rails job, do not fill this with anything that was, like, not Rails related. Or if you're applying for a no job, don't fill it with Rails stuff. Try to rid. Try to tweak the knobs a little bit to get it to be way more applicable, as in, like, if all you did was write rid. Write node code, and it's for a Rails job. You you don't have to say JavaScript in your thing. You can say, wrote production code for ford.com, you know? And then they will say, oh, that's a that's a you wrote production code for .com, collaborated in a team of 5 developers to produce prototypes.

Scott Tolinski

So they should be based like I did x, y, and z. And not only that, it should be things that the current job will entail. If if the job is going to be, Like, for a solo dev position, don't don't list collaborate in a team of 5 developers to produce prototypes. Right? Work on own to, you know, work productively by self to, you know, hammer out some code or whatever, either way.

Scott Tolinski

So for your job experiences, don't have this be too long. Sometimes people, like, put their Experience working at Subway or something.

Scott Tolinski

If you don't have any other work experience, if you've only worked at Subway, put Subway down. But rid. If you have, like, 5 other jobs in there, that's crazy. Don't do that.

Scott Tolinski

I only have 3, so my latest 3 jobs or my, like, Showstoppers, let's say, like okay.

Scott Tolinski

If I were to have worked, like, 5 jobs more recently than my ford.com job, I would have put, like, ford.com on there still because that's one that people go, oh. Oh. Oh. You know? You kinda want those those reactions wherever possible, so tailor it. And, also, do not, by any means, ever give a, like, percentage of whatever your skill is in a specific library. 25% Node. Js.

Scott Tolinski

10%.

Scott Tolinski

Oh, yeah. Everyone did that for a long time. Don't do that. Don't do that. It's bad, and I will I would not look at it. Re Oh, but yeah. No. So those are some quick tips if it's hard to see exactly what mistakes you're making without looking at your resume. So if you wanna do an anonymous, resume read or if anybody else, maybe we can make that happen. That would be fun. Alright. Next question is from Answari Aden.

Scott Tolinski

I am building a SaaS app using Node. Js back end and a React front end.

Scott Tolinski

I am, I think this meant to be like I am the back end identity, but it just says I am the back end or the back end identity. So let me let me try to infer this. I rid. I'm authorizing the back end identity tenant by reading the tenant ID from the token sent on every request.

Scott Tolinski

Question, How do I dynamically assign a subdomain wildcard or slug dynamically during the sign up process? The way FreshBooks does it. IE tenantone.domain.com, tenant2.domain.com.

Scott Tolinski

It gives a tenant a sense of ownership. So, Like, another good example of this would be, like like, in Reddit. Right? If you're on web dev, you can go to webdev.redidot rid and it's going to take you to the same place as rudda.comforward/rforward/webdev. Right? So you're giving, like, an actual domain ownership to a specific path or URL on a specific project. Wes, I do not know the answer to this question.

Scott Tolinski

Do you know the answer?

Announcer

Yeah. I I kind of do this already with my own application because I have 1 app running across 10 or 12 domain names because because I when I launch a course, I have a new domain name. And while that's not subdomain, it's very much the same way. So first, I'll tackle the subdomain part, and the way that works is that you go into your DNS rid. Records. You set an a record that is a a star. It's called a wild card. And then anything that doesn't have an a record Already assigned for it, like mail .whatever.com, will just be caught and redirected to your server.

Announcer

And then very early on in your application stack, you generally have in my case, it's a piece of middleware, and it will read. Translate the request into information about who's visiting. So in my case, it's translating the domain name into a product code. But for you, it's probably taking the tenant's domain name, looking that up in a database, and then returning that actual customer, and then you can just render out rid The login form or whatever.

Announcer

So instead of having, like, forward slash whatever and finding whoever signed in, you can just use a wildcard domain that renders out a login page with the rid The customer's colors and and whatnot, pretty simple to do.

Announcer

The only place that it gets tricky is if you need cookies to work both on the the subdomain and the regular domain. That's not too hard if it's all the same domain. You can just set it to allow all origins.

Announcer

Rid it gets really tricky when you're doing cross

Scott Tolinski

domain cookies and things like that. So, yeah, that'd be worth it. I need cookies to work in general.

Scott Tolinski

Need some cookies.

Scott Tolinski

Yes. I'm gonna need some cookies.

Announcer

I just had some Oreos, so I'll send you some.

Scott Tolinski

Ready. Well, my my, wife, Courtney, bought some neat Annie's. Are you familiar with Annie's? They do the, mac and cheese and stuff. Yeah. We can buy rid. The kids' mac although Annie's Annie's Mac and Cheese, if you buy it at Costco

Announcer

or no. If you buy it at the local grocery store, it's only 70% organic. But if you buy it at Costco, it's a 100% organic.

Scott Tolinski

Well, we buy it at Costco. So hey there. 100%. Okay. Good. Yeah. Yeah. Go ahead. Okay. Rid we Courtney's been buying these, like, little bunny crackers for the kids, and, she she's been buying birthday cupcake ones or whatever. They're like birthday cake ones.

Announcer

Rid I steal that box. I am ashamed to say. So yeah. Box is mine. Yeah. Okay. Longtime listener says,

Scott Tolinski

Wes, I've been taking your Mastering Gatsby rid Course, and I'm loving the course so far, hoping to finish it this week. My only complaint is I we wish you would have added a module for CSS.

Scott Tolinski

Think it's because I personally struggle with styling a website.

Scott Tolinski

Do either of you have any suggestions on how I can improve that aspect of web dev? Re Any tips or resources would be very appreciated.

Scott Tolinski

And before you give your answer, Wes, I do have a couple of courses on this on level of tutorials. We have modern CSS layouts, Which does CSS layouts and then modern CSS design systems, which teaches you how to use CSS variables to build design systems. So if you have a LevelUp tutorial subscription, we have those 2 courses. I hate hawking my own stuff like this, but that is my suggestion. Different. That's our podcast. We do what we want. Well, okay. We'll buy my stuff then. Just buy it. Just buy my stuff. Buy Scott's stuff. There there you go.

Announcer

My answer to this is this is actually one of the first courses where I did include all of the CSS. There's many CSS modules. I think this this question is more rid. You didn't include the CSS, and it's more I needed to learn CSS first before I went ahead and and did the stuff you're doing. Rid. And I do have courses on Flexbox and Grid, but I don't have a, like, a beginner job or beginner CSS course. Rid I do have the domain names, though, and that's definitely something that will be coming, coming my way in probably the next year or so because rid. I've been thinking about that a lot. It's like, how do you people always come to me, and they're like, hey.

Announcer

Your stuff is beginner. Right? And I always have to be like, not really. You have to go, and I have to, like, say, go to free for code camp and come back and take my beginner JavaScript course after that. Right? Send them my way. I got a bunch of beginner stuff. Alright. I'm gonna Send them your way too. Time. It's free. Oh, there you go.

Announcer

K. Link's in the description. Everyone click that. Alright. Next question is from Albie.

Scott Tolinski

For web developers just starting out in freelancing and building ecommerce site from a business perspective, do you recommend we first, 1, Just code and worry about the business stuff later or, 2, go through the government paperwork to be a sole proprietorship or, 3, incorporate, though this costs more. Rid. Love syntax. F m and your courses. Keep up the great work. Okay. This is a tough question to answer because it really, really depends. We started LevelUp Tutorials as a sole proprietorship and moved to an LLC, and now we're an s corporation. Why? Well, because the tax benefits varied greatly based on how much you are making with the project. So, like, you have to be above a certain threshold or have employees or needs rid to require you to incorporate, it really depends. Like, what is this thing gonna be? Is this gonna be a corporation, that you're tending to sell at some point. Right? Is this gonna be a VC thing? VC is like, c corps more than s corps, so I've heard. Is that actually true? Yeah. I think that's true. Okay. Don't take that as fact. I honestly don't, But there's a lot of complex tax situations involved here. If I were you, I would consult with a small business tax lawyer, first and foremost, if you are thinking about becoming an entity of any type Because they can give you that information. Again, that's just my opinion. If you wanna just start as a sole proprietorship, that's 2. It's not exactly rid difficult to change later on or even, like like, what we had to do is, like, close our sole proprietorship and then turn into an LLC and open a new LLC. Ready. That wasn't that hard of a process, but it might be if you have credit cards and bank accounts and whatever.

Scott Tolinski

Either way, it is Not necessarily a huge thing. If you are, it depends. Is this project going to be your job? Right? Is this going to be your job. It's going to be a business. Are you gonna start hawking it right away, or are you just starting to hammer out some lines of code in the side project? If it's gonna be your job, your company, all that stuff that you're starting, yes, incorporate. Right? Well, maybe not incorporate, but become an entity right away. Rid. If you are just hacking together some stuff for a side project, just chill on it. Who knows? There's no there's no reason to spend the money and to spend the time to rid do all that stuff if it's just going to be a small little project here. But, again, if it's just freelance if it's just freelance, just become a sole proprietorship. I I don't think you'd need to become in rid anything more than a sole proprietor. Or if you really wanna do it, you can become an LLC taxed as a sole proprietor.

Announcer

Again, talk to a tax attorney. I'll answer mine from Canada point of view. If you're just starting, just start accepting the money, and and you have to pay taxes on it at the end of the year.

Announcer

Like, once this thing starts going, then go ahead and and get a bank account for your sole proprietor. Sign up as a proper sole provider. That stuff all, It takes money. And, honestly, just like you said, just write the code, do your thing, and you you can figure out the business stuff as you start to get in, unless you're, like, rid. Assume that you're gonna build this mega corporation, but it it sounds like I just want a code and make some money here, and you can get the sole proprietor stuff ironed out. Rid. There's not there's nothing wrong with just having money and accepting it and putting into your own personal bank account as long as you're paying taxes on it, rid At the end of the year, should you incorporate? You'll know when you have to incorporate.

Announcer

Generally, your your tax repair will be like, hey. You're you're paying way too rid in taxes right now, you should only be paying $750 a year, and they'll set they'll set you up with the, corporation.

Announcer

That's rid. At least for for me, it was almost $1,000 between registration fees and lawyers' fees in order to get that stuff all set up. But at that point, I was saying, okay. Well, I'm gonna rid. Save more than $1,000, so it's well worth it in my case.

Scott Tolinski

Yeah. Next question is from Billy.

Scott Tolinski

Dudes love the podcast. What's your approach to handling adding plus margin in components? I generally follow the rule that components shouldn't have any baked in them. But then, What if I want to add some in the view? Would you wrap it and do some inline stuff? I lost my train of thought when how to explain the question, but I hope that makes sense. Peace and love. Read. So, yes, this is a tough problem, and, actually, it's a problem that I grow more and more likely to say, just use padding, all the time for everything every day Margin top. Margin top because of collapsing margins. And if you have margin top and margin bottom with collapsing margins, it can be just kind of a pain in the butt.

Scott Tolinski

But, I don't know. Let me let me propose this. Like, for instance, if you have, like, a card and a card has an h one in it Your h one's now gonna be pushed down too far or the bottom of the card's going to have too much space below it. You can tune each of these things on a per component basis, And you can do so nonspecifically using descendant to selectors and nth child stuff. So you could say the first child of this component, and it can be literally anything with the asterisk as long as it's anything should not have a margin top. And just likewise, the last of this component. It could be anything. It should not have a margin bottom. And using those things together, it doesn't really matter what the case is here no matter what you put in there, it's not going to have a margin on the top or the bottom where it doesn't need to be. So there's definitely a use case for 1 going Only padding, but there's also a use case for approaching each one specifically how it is and then tuning the margin stuff to work in a way that's appropriate in any potential use case that could work. So should a given component have margin on it? Oh, rid That's a tough one for me because I would say no, maybe no. It really depends on the situation. It's a tough one. Rid. Collapsible margins collapsing margins are just a giant pain in the butt and can lead to all sorts of weird things going on in your CSS. So I don't know. Wes, what do you have to say about this? Yeah. There there was a,

Announcer

blog post by somebody.

Announcer

Forget who it was. This is why I don't use margins on my components. And the end of the day is that Because if you need to take it off, you can always add padding to a component.

Announcer

But if the component itself has margin built in, rid It's hard to take it off. Yeah. So I kinda get that, but I kinda also don't really have that problem all that often. I don't I don't think I work on, websites that are so modular that the components are are showing up in random places where you do and don't need, margin.

Announcer

You said, like, if I need to change it, then I just pop a class on it and grab the thing from from inside of it. It is not totally neat that way because you are reaching into a, rid Hopefully, sealed component, but it's it's always worked out for me. So that's what I do. I think margin and padding are mostly fine unless you are finding it to be a

Scott Tolinski

A big issue. Yeah. It's one of those problems. There's no right or wrong answer here concerning the tools work how they work. It's just, figuring out what's best. Alright. Ready. Next question is from Justin, aka JJ, aka Baby Jay, aka jdalla dalla. Justin asks, how do you backup sensitive files that do not Get added to source control, a dotenv file, for example.

Scott Tolinski

I have off-site computer backups, and I have rid. Dotenv files on a small thumb drive on my key chain. What do you do? I don't have any great great answers for this one. Dotenv, and we're sort of just rid the dotenv files around. You can also encrypt those files. That might be an answer to encrypt them, but I I honestly don't know, Wes. What do you what do you do? I Don't really back them up. I'm I could probably go back on my time machine and get them if I accidentally were to delete them. Rid. But at the end of the day, if I were to accidentally lose some keys,

Announcer

then I just log in to the service and regenerate them again. Rid. So there's that. Somebody asked us a while ago. You could throw them in, like, a Dropbox folder or or something where you have them backed up there, but then then rid. Then you also have to think about, okay. Now I have all these potentially vulnerable things hosted on a cloud service. Do I trust that? Do I have a layer of security there to stop people from Possibly getting those. Another thing I I just saw last on a couple days ago is I've been trying out the new digital ocean app rid form, which is sort of their Heroku killer.

Announcer

And they have this really neat thing where you can put the environmental variable into the UI, and then you can encrypt it.

Announcer

And then it gives you a key, and then you it will never look up the ready. You can never look up what the value is, and then you have this key that you can put into your, environmental variable, and DigitalOcean will swap it out for you.

Announcer

And it's cool because then you can put the you can put those keys in version control, and it's fine if the public were to see those values because they are rid. They can only be unencrypted on your box that you have. So that's that's what we have there. The thumb drive is not necessarily a bad idea, but, rid. Encrypting them is probably a good idea if you're gonna put them on some sort of medium that does not have At least 2 factors of access to get to them. Yeah. Totally.

Announcer

Last question. We're going a little over here, but that's fine. Last question from Billy. Do you have any stress Management techniques, how do you cope with stressful situations at work like unexpected tight deadlines? Scott and I were joking earlier before the show is that it's, rid Y'all your kids, uppers in the morning and downers at night?

Scott Tolinski

Yes. No. The uppers and downer thing is a little

Announcer

on the nose. It turns out like It's a little too close to home. Yeah. The amount of caffeine that consume. Yeah.

Announcer

That rid. It's a really good question. I specifically find this hard when I have something that I don't finish. Like, I'm ready. Trying to get it done by 5 o'clock, and I I don't finish it. I have to bring that, like, frustration down Oh. 2 flights of stairs to my family, and it's just rid Like Yeah. So how do you deal with it? I've got a couple kettlebells in my office where if I'm feeling a little overwhelmed, I'll throw those around. Rid. Other things, list note taking to do apps, things like that. Get it out of your head into your system. That helps with stress as well.

Announcer

Eating well, not feeling, like, garbage, I find is helpful as well.

Scott Tolinski

Yeah. For me, one of the things to specifically exercise. I if I'm not, like, getting some of that pent up energy out, it is rough stuff for me mentally. I think it, like, really, really rid It's hard on me if I if I'm not able to get some of that stress energy out. Deep diaphragm breathing is definitely something I do where I breathe into my diaphragm, so It expands rather than contracting when you breathe in, doing those slow box breathing exercises if you have an Apple Watch or, some other things. Apps, They have breathing things built in. Those can help. But, again, it is tough, especially when you're working on these, like, hyper logical types of problems. It's it's tough rid to go from that mode into, like, family mode or hangout mode or whatever. And and it is important to find the things that really work for you the best. Obviously, over consuming things like alcohol is probably not the best best strategy for that in any regard. So, me, personally, Coffee in the morning and, get going, do my stuff the best that I can, be as productive as possible, dump everything I can into other systems so that it's not on my brain Because if it's on my brain, then then the things that are important at that given moment are not going to be on my brain, like making lunch or whatever for the kids. You know, it's it's important to be able to to put yourself out of the the the mindset there, and things for me, most specifically, exercise number 1 does the best job. That's all I have. We also do have another sponsor on this episode, which is Sentry, and Sentry is going to be the perfect place for you to store your rid stress that you could get from bugs because you can start in GitHub issues and get it out of your brain. Thinking about that bug? Hey. No worries. Century@century.io has the ability to click, move a bug in your site into a GitHub issue and track it there so you don't have to think about it, at least you don't have to worry about thinking about it, which could potentially leave your brain at any given point, and it's now in the system. Or maybe you're on a team, rid somebody else's thing, and you can click, oh, I found this bug. Let me just send this bug to Jeff. Sorry, Jeff, whoever you are. Jeff, you can go ahead and fix this bug yourself. And I'm not gonna think about it. So you're gonna wanna head to century@century.i0.

Announcer

Use the coupon code tasty treat, all lowercase, all one word, and you're gonna get 2 months for free. So thank you So very much for Century for sponsoring us. Alright. Let's get into some sick picks. I've got a sick pick for you today. Re It's a button up denim shirt. So in Canada, we have something called the the Canadian tuxedo, which is where you wear full denim.

Announcer

I've got a couple denim shirts, but I recently got a new one because I I had bought 1, like, 5 years ago, and I wear it all the time. The fashionable word for it is called chambray.

Announcer

But it's just basically a a denim shirt, and I got a new one from Levi's. It's called the Barstow Western shirt, And it's awesome. It's got really good snaps, so you don't have to fuss with buttons. And at the end of the night, you just rid Rip it off, and you don't have to fuss with buttons and getting it off. It's really thick denim, but it's still soft at the same time. It washes really nicely. And at least for my body type, it just fits super well. And get this. It was $12.98.

Announcer

It was on sale on Levi's, And I bought 4 of them.

Announcer

Wow. And I've just been, like I've been wearing it, like, all all day long, and I just cycle them in and out. I'm not trying to be Mark Zuckerberg and just, like, wear one thing, but I was like, man, this is such a nice shirt. I just every day, I reach for it, and I put it on, and rid It's a good one. So if you're looking for a nice Canadian tuxedo top, check out the Levi's

Scott Tolinski

Barstow Western shirt. I'm sort of that way with these Lululemon pants that I got. Rid. They are, like, perfect everyday pants, and it's crazy because I wouldn't have considered myself to be the type to wear these pants, but they're fantastic. Lulu dude? Yeah. Yeah. Yeah. I know exactly. Right? And it has a connotation, but I think they're they're very good.

Scott Tolinski

My sick pick today is going to be a cookbook that Courtney bought, and she's been telling a lot of people about this cookbook. She's been making a bunch of stuff. Ready. 2 for 2 on it. We only made 2 of the things in here so far, but both of them have been fantastic, and it's called eating out loud, bold Middle Eastern flavors for all day every day. We do not use Middle Eastern flavors very much in cooking. In fact, I myself am personally primarily use Japanese flavors. That is like my style of cooking. Courtney makes all sorts of stuff. So either way, she's been getting into this, making a bunch of recipes out of here, Middle Eastern flavors, rid. And they have been fantastic. So if you're into cookbooks and you're looking for something for Middle Eastern flavors, everything in here so far has just been great. Very good. Oh, that looks so good. It's got A shawarma.

Announcer

And it it looks like it just makes me think of when I was in university, we will go for, Alibaba's Oh, yeah. At, like, 3 in the morning after the rid you go get, like, this huge shawarma.

Scott Tolinski

At the and I think in in Britain, they call it a kebab. I think it I think those are 2 different things because there's a kebab sandwich, rid Like a wrap and a shawarma wrap that are different.

Announcer

Okay. Different. Yeah. They're at least A little bit different thing. But Yeah. Man, I love that. Rid The little pickled what are the red things?

Scott Tolinski

Well, red onions or what? But there's all sorts of pickled No. It's not a red onion. It's a pickled

Announcer

Shall it?

Scott Tolinski

Turn pickled turnip. Oh, turnips. Yeah. Yeah.

Scott Tolinski

Yeah. I like pickled anything, though, to be honest. Shameless plugs. I'm gonna shamelessly plug my master gatsby.com

Announcer

course. It's my latest course on learning how to build rid. And style websites with Gatsby, React. Js, headless CMS, serverless functions, progressive images, scope CSS.

Announcer

Any buzzword About the modern stack you can think of is included. Check it out. Gitmaster.com.

Scott Tolinski

Coupon code syntax is for $10 off. Ready. Cool. So I am going to shamelessly plug my latest course, which is on animating Svelte. If you're interested in animations and Svelte, rid. This course will teach you everything you need to know to get up and running building some really amazing animations. We even build our own drag library in the course. So if you wanna build a drive library or even learn how you can contribute to 1, go ahead and check out this course. It's very cool. Leveluptutorials.comforward/ Pro. And guess what? Hey, Wes. You might want to, think about this as well. Considering the release date of this episode, we'll be having a Black Friday sale. We're recording this in the future. So, yes, so both Wes and I will be running some major Black Friday sales. We're gonna be doing 50 rid. Send off subscriptions for the annual price, and it's going to be bananas. We're also gonna be doing some major sales on individual products. So if you wanna be buying 1 course specifically, you can do that. However, if you wanna go big and get that annual subscription, this very well may be the cheapest price you'll ever be able to get it at again ready. Once some of the new features on Level Up Tutorials drop. So check it out at leveluptutorials.comforward/pro.

Scott Tolinski

Sign up for a year and save 50% today.

Announcer

Awesome. Yeah. I will also have a major Black Friday, westboss.comforward/courses for listing of all my courses. Thanks for reminding me.

Announcer

Yeah. Right? Alright. Thanks for tuning in. We will catch you on Monday.

Announcer

Peace. Peace.

Scott Tolinski

Head on over to syntax.fm for a full rid archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

Scott Tolinski

Rid.

Share