Skip to main content
450

April 20th, 2022 × #teamwork#impostersyndrome#webdev#javascript

Potluck - Working on a Team × Dealing with Imposter Syndrome × Animating on the Web × Icon Libraries × Demanding Clients

Scott and Wes answer listener questions about working on a development team, dealing with imposter syndrome, using icon libraries, fixing broken service workers, building fullstack apps in Next.js, when to move a project to production, and dealing with bad clients.

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.

Topic 1 00:11

Hosts welcome

Guest 1

Welcome to Syntax, the podcast with the tastiest web development treats out there. We've got another potluck For you today, 2 potlucks in a row. What could possibly be going on? Well, when we have 2 potlucks in a row, it means life It's bonkers right now. So, I, we bought a new house. My wife and I bought a new house, and then we had to sell ours immediately after. So rid. That was a bit of chaos. And then immediately after that got very sick or during that got very sick and rid. And everybody's on meds, so, excuse the

Wes Bos

the raspy voice right now, but, we're on the mend. We're getting better. So, we got another pollock for you today. And, also, we've got some awesome questions. So pretty stoked about that. Yeah. And in addition, I had a death in the family. So I had to travel Oh my gosh. And go to a funeral. And and by the time yeah. I was like, you get back Sunday, and then there's Monday. And I was just like, yeah, Yeah. I don't think I can record today. Like, I am I am cook. Yeah. And you said you had jury duty too? Oh, yeah. I had jury duty on that Monday, And I got so close to being selected. They I would they weren't gonna, like, let anybody go, and then they let 1 person go. Then they called me up to the box. And then immediately after calling me up to the box, they say, alright. Everybody who's in the the back can go home now. And I was I was like, I'm the one only person rid called up from the audience or whatever they call it, and I did not ended up getting selected at the end of the day. Thank goodness. So, that's good. Have to go in. But, yeah, of those guys. Yeah. Yeah. I always I always wonder about that with, like, people who are self employed.

Topic 2 00:50

Hosts personal updates

Wes Bos

Oh, yeah. Do they do they take that into account We're like, you could just you can complain about it. There was one of the people someone's business? Yeah? Yeah. One of the people in the box was complaining about it.

Topic 3 01:48

Jury duty experience

Wes Bos

They were like, I need to be at my business. So yeah. No. They let her home. They let her go home. So who knows? Maybe I could have pulled that in. I Like, I'd be I'd be into that when I'm, like, older.

Guest 1

Like, I'd sit through, like, a, like, a trial, you know, like a like a really good one, like, Something that I, like, I can make a podcast about later. You know? Like Yeah. Honestly The, like, the mustard bandit or something like that where, like, he Like, every time you killed somebody, like, wipe mustard on them or something like

Topic 4 02:25

Types of jury duty cases

Wes Bos

that, and Yeah. It would be like, I could do that. A good podcast. Yeah? Okay. Yeah. The thing the mine mine was like a like a civil lawsuit for something frivolous, and it was just like, I don't wanna I don't wanna be here for this. You know? Yeah. Yeah. Rid

Sponsor intro

Guest 1

Cool. Alright. Well, we are sponsored by 3 awesome companies today, Century error exception tracking, sanity structure, content, CMS, and FreshBooks Cloud accounting. We'll talk about all of them partway through the episode.

Guest 1

Let's get on into the questions then, Scott. Yeah. Let's get into these questions. 1st Question

Topic 6 02:59

Working with designers/PMs

Wes Bos

comes from someone anonymous.

Wes Bos

They say, how can developers work with designers and project managers seamlessly? And we kinda had an episode about being a part of a team of called maybe, like, a month or 2 ago. And I think that, will encompass most of my thoughts for many of these things. But if you take a look at just in general your team's shared goals and have that in mind when you're communicating with people across different Parts of your organization, you need to, like, recognize what these share goals are.

Wes Bos

Like, what What is the end result of this project? What are the things that you all have in common that you're trying to do here? And it's most likely getting this thing out the door in a way that everyone is happy with. And And project managers or or designers, they can they can gain a reputation in some workplaces as being Not difficult to work with, but developers themselves might be the ones who are difficult to work with. And the the bashing heads of communication there can become a problem where People are not aware of the status of the project or what things are going wrong or where everything is currently. So my tips for you would be to always make sure that you have your shared goals in mind when having communication with other people in your team like this. Be honest about your communication styles. If you have a project manager that's bugging you every single day about something, and that's not working for you, you can say, listen.

Wes Bos

I will get you this early, but let's, let's let's change it up. I I don't, work well with with that kind of constant Check-in constant communication. So how about maybe, we have we set up specific times to check-in? That way, we're all on the same page, And I can just do my work and knock it out.

Topic 7 04:24

Being honest with communication needs

Wes Bos

You'll wanna be honest. You'll want to communicate well. Express where you're at in a given project if you're gonna hit deadlines or not. And I think the the biggest thing, that you can do To have every project manager and every designer that you work with love you as a developer is just to deliver.

Topic 8 05:02

Delivering work on time

Wes Bos

Deliver the goods. Deliver a site that is perfect flawless to whatever they gave you and deliver it in ahead of time. And let rid. Everybody know that it's no. Don't be like, I'm so fast. I'm the best. But be like, alright. Here it is. Everything's ready. It's fine. That way, if we wanna make any changes, any updates, whatever, rid. We can have extra time for that, and people will love you if you get things done early on time or just consistently to a degree where everyone's happy. Yeah. I think it's really important

Guest 1

to sort of all be on the same page and just understand where everybody's coming from. Like Developers love to hate on project managers, but, like, honestly, at the end of the day, they're trying to figure out, like, what's going on and whatnot. If you can anticipate rid. Questions that they might have.

Guest 1

Like, okay. I know you're gonna come and ask me about these freaking this border on here, or rid. I know that you're gonna check-in and say how much longer.

Topic 9 05:49

Understanding all roles

Guest 1

Then, like, when you have a sec, just pop in and say, hey.

Guest 1

This is where I'm at right now. That's the whole idea behind the stand up, right? You don't have to always be checking in and bugging each other.

Topic 10 06:11

Using standups for updates

Guest 1

And also just, like, be clear with everything. I think that rid. When designers and project managers are constantly, like, trying to babysit you, it's because they feel like there's a poor communication break in there as well. So Yeah. Totally. Like, rid. It's on everybody to to do that. And, honestly, that's a huge superpower of being able to produce good work is being able to work properly together. Yeah. Having those clear lines of communications and expectations set will go a long way to keeping everyone happy. Next question from Zach Zbanak.

Guest 1

What what was that right, Scott? What it would you say that last name is?

Topic 11 06:42

Pronouncing a name

Wes Bos

I would merge the z and b to be like zban rid.

Wes Bos

Zebank. Zebank.

Guest 1

Hey, Wes and Scott. I'm submitting a few questions, so I apologize if the intro is a bit repetitive.

Guest 1

That's rid Thank you for submitting your questions.

Guest 1

I'm a full stack full time developer coming up on 2 years in my job, and I've worked, my way up from a junior dev rid. Out of a boot camp to a senior dev. However, I feel like I'm constantly battling impostor syndrome, especially having come for boot camp without a CS degree.

Topic 12 07:01

Dealing with imposter syndrome

Guest 1

I continue to advance. I feel like I have this looming fear that I will get into a situation where I have no clue what people are talking about. Mhmm. What Is your advice to anyone struggling with impostor syndrome? And in your opinion, is it worth to pursue some sort of CS degree or certificate to keep advancing. So first, I don't think if you have a CS degree, you're going to lose that feeling.

Guest 1

That's just an anxious feeling that a lot of people have rid. In that you this world of web development is endless, and there is you can't even see the horizon. It's endless. There are no edges rid to it, and you are constantly getting into it. I think where people start to lose their imposter syndrome is not when they get good at what they are doing. Rid. Obviously, that's part of it. Like, you get better and you say, like, okay, I could I could figure out whatever whatever is coming my way.

Topic 13 08:09

Being comfortable not knowing

Guest 1

Rid. But I think it's just being okay with not knowing stuff, and knowing, like, okay. Look at me. I freaking rid Came from a junior dev to a senior dev with nothing but a boot camp.

Guest 1

I figured out this on my own, a lot of it, and I know that I can figure out rid. Probably anything that comes my way, I can figure it out. Or I I'm I'm also okay with saying I don't know that or I'm I'm oh, like, you hear Scott rid. And I say that all the time. Wow. We've been devs for, what, like, 15 years. I've never come across that before or, rid. Man, I can't tell you any time in my career I've ever had to use that, or why would you need to use that? I'm I'm literally not sure. Like, please enlighten me. And Just being okay with not knowing how to do something is is like a huge, I don't know. You look at Senior developers, and they often could say, hey. I don't know how to do that. I'm sure I could figure it out, but please enlighten me with that type of stuff. So just being comfortable In that space of not knowing is very important. I think that will help you get a long way. So, yeah, I also agree with everything you said, basically.

Topic 14 08:21

Progressing without formal education

Wes Bos

You know that you're gonna be in that situation quite a bit in your career where things are mysterious and you're gonna have to figure them out. And it's gonna feel like You shouldn't be here because of that. But, I mean, everybody gets there. And, honestly, I would as a as a somebody who really Has grown a lot through any job they've had. I, at this point, would be very much more excited to be in a role Where I feel over my head than one where I feel like I'm I have I have to figure out same thing over and over again. Yeah. I got it all figured out. I'm in my comfort zone. It's easy. I'm collecting a paycheck. And to me, that's not where I get maybe, like, personal growth and excitement from. I like Learning new things are growing, and everyone's different. But I do think being put in a a position where you are being forced To be moving out of your comfort zone into things that feel scary is a good thing. So you just keep on keep on going with this, and I think you're gonna like, A couple months from now, you're gonna be like, oh, yeah. Everything was everything that I was worried about now is now, like, second nature, easy, Whatever. Because even I think, like, some of the ways that I've been thrown into the deep end in some of my development jobs, Ultimately, that deep end, like, sinking kind of feeling went away pretty quickly after you get used to whatever you're doing or you've been trained or worked with the other, people who are, you know, experienced in whatever it is that you're doing. So just keep on going on.

Topic 15 10:47

Putting yourself in challenging roles

Wes Bos

Also, Zach also asked about some Coffee shops in Denver. Like, what's a good coffee in Denver? I didn't wanna post that question because, I could just answer it here.

Wes Bos

Basically, there's a a couple of places that I've I've been that are really good. Corvus is one of them that's well known.

Wes Bos

Blue sparrow is another one that's well known. Huckleberry is another one that's really good. I also posted a link to a 52 80 blog post about the 17 best coffee shops in Denver. I haven't been To a coffee shop in quite some time now, and I'm I'm excited to start maybe getting into trying some coffee shops Oh, man. A little bit more here. Yeah. There's a there's a yeah. Coffee seen in Denver, just like the beer scene, is is pretty pretty great. There's a lot of options, a lot of good coffee. And for those those of you who like cold brew, you can still get some very fragrant, lovely coke cold brews as well.

Wes Bos

Okay.

Topic 16 11:40

Denver coffee shops

Wes Bos

Next question is from Shabaz.

Wes Bos

Says, do you use the table element for displaying tabular data, Or do you end up using CSS Grid? Is it bad practice to use CSS Grid for tabular data? I use tables for tab tabular data for table data. I always have it feels like a lot of extra work, but now that we have Grid, I'm sure the CSSing of a grid based table is easier.

Topic 17 12:06

Using tables for tabular data

Wes Bos

But tables, I mean, they exist for a reason, and they're the semantic element for that data. That said, I don't really know what the semantic implications are of just doing it straight out of divs. But me personally, I I you know, tables are tables, but I I haven't really hit that many limitations in my personal usage of tables where I'm like, I gotta Just do all this by,

Guest 1

divs now. So that's my answer. Tables. You know? That's that's what tables are for. Tables are for tabular data. Rid. CSS Grid is for layout, and I don't think that you should put data into CSS Grid unless it's like a couple of bullet points of like a house and its its prices, the bedrooms, you know, like a couple of things under like some bullet points of data. Absolutely. But, rid. Yeah. Tables are for tabular data. It's the semantic element that's better for SEO. Like, you know, you Google something really quickly and Google shows you the little, rid. Like a quick little snapshot of a table. That's because a person used a table in there. So, if you have to have, like, a fancy layout, You can throw divs inside of table cells and then grid those if if you need to. But now don't don't be using CSS grid. That's rid That's that's a bit of a nightmare, to try to have to recreate it. Next question we have here is, from Ben. How do you manage animations? I know frameworks such as Felt and React, they're a dedicated library. I also know Scott uses them on level up tots.

Topic 18 13:31

Using a dedicated animation library

Guest 1

But What would you recommend for someone on Eleventy or another static site generator that doesn't use a framework Or just HTML CSS by yourself. Are there vanilla alternatives? Thanks. Love the show. So, yeah, Scott's got some some good points in here. I think rid The thing I will say, I'll let Scott go into the actual recommendations, is that at the end of the day, these, like, frameworks rid are just JavaScript and CSS at at the end of the day. So there's nothing that you can't do rid. In one of these frames, sometimes these frameworks have little handy things where they'll duplicate DOM elements to do flip animations or whatever. But rid. At the end of the day, it is just JavaScript and CSS, so not a big deal. You can just use whatever is using it. And more than likely, if you look at some of these libraries and look at their dependencies, you'll see what they're using under the hood.

Topic 19 14:26

Most are just JS and CSS

Wes Bos

Yeah. And my answer is largely similar. I think the biggest issues you're going to hit when trying to do animations without a library that's tied To or just the library in general. Is that flip animations? They do become a bit of a pain. Flip is basically where you, rid. You have the end result of the animation.

Topic 20 14:47

Flip animations more difficult

Wes Bos

You have the beginning result of the animation. You reverse it, and then you reverse that or whatever. So that way the ending state of the animation is essentially where the element lives. So it makes the animation more performant, and you can do all that by hand. There's a lot of blog posts on how to implement flip animations.

Topic 21 15:05

Animating DOM changes difficult

Wes Bos

But they those end up being kind of a PIA if you are rolling it by hand as opposed to just dropping in a Use flip or whatever it is on Svelte. I forgot what it I think it's just transition flipper. I have no idea. But, it's it's way easier if you're using a library because, typically, that's kind of a pain. Another thing that you'll hit is animating things when adding and removing them from the DOM. Now the way that many libraries handle this is they 1st, start off with like if something's not in the DOM, they'll start with whatever the out state of the animation is. Let's just use opacity 0. Okay? So things not in the DOM. It gets put in the DOM with opacity 0.

Wes Bos

Then they add a class to say animation, like, start Animation start, end, or whatever. You'll see this often with, like, React transition library or anything, basically, where you have a class that's being added or removed via a time out, And then there's a delay before the thing is added or removed to the DOM. It's added to the DOM. It starts with the initial state. It adds a class. It transitions.

Topic 22 15:44

GreenSock framework-agnostic option

Wes Bos

It removes that class. It exists in the DOM. Then on the exit of the DOM, you add a class. It starts that animation, then you remove it from the DOM after a time out. That kind of stuff is a pain in the butt. If you're not using a framework because like I said, in is is felt specifically your Framer Motion, It couldn't be any more simple than to just drop that in and have it manage all that stuff for you. So for me, that's the stuff by hand that's gonna feel like the most pain in the butt.

Wes Bos

Rid. But if you're looking for a framework agnostic library, GreenSock is, you know, one of the most performant, well, documented and highly used animation libraries out there and is not dependent on any framework.

Wes Bos

So, maybe even learning GreenSock.

Wes Bos

GreenSock would be a great tool for you in your repertoire.

Topic 23 16:50

GreenSock well-documented

Wes Bos

Perhaps something that would look really good on your resume in addition to being something that's not tied to any frameworks. And that's if you need If you want, I should say something a little bit more high powered to do things like flip animations without having to do it all by hand. But okay. Rid. Actually, let's take a quick break to talk about one of our favorite companies, which is Sentry at Sentry dot I o. Perfect place to see all of your errors and exceptions. Maybe you're coding the animations by hand, and you have some JavaScript You're toggling some stuff and maybe, you forgot a case where you need to check to see if an element was there or not, throw in some JavaScript errors. Well, Sentry is gonna catch all of that. It's gonna catch all of that and all the other mischievous little bugs that you wrote into your code, and it's going to even check your performance of your websites. It's going to make sure That these things are an experience that people are going to want to be at bug free and super fast, just like every website we've ever visited in modern web. Right, Russ? Rid. Bug free and super fast. Yeah. Yep. At least the websites I make. Yep. The websites I make bug free and super fast, so you can make websites just like, Wes and I, by having a tool like Sentry on your side. So check it out at century.i0.

Topic 24 17:58

Sentry sponsor spot

Wes Bos

Use the coupon code tasty treat, all lowercase, all one word. You get 2 months for free. And, honestly, one of those services that saved my bacon just about every single week, because, yeah, bugs be happening. That's how it works.

Wes Bos

Next question here is from Geordi.

Topic 25 18:11

Icon library question

Wes Bos

He says, what do you use for icon libraries? I've always used the Font Awesome, and I was wondering if there is if that's still the current hotness or it makes me look dated.

Wes Bos

I think Font Awesome kinda hit an inflection point where, like, inflection point? I don't know if that's the right word. It hit a point where Every website ever was using Font Awesome, and you could see it from a mile away. So that to me, I wouldn't pick Font Awesome just for that. It's not gonna, You know, there's some icons in Font Awesome that just feel almost amateurish at this point because they're so widely used. But in the same regard, it's easy. Right? It's Easy to drop in Font Awesome and just use those classes. But I think we've kind of moved away overall from web fonts themselves. Because if you think about it, fun awesome is not a web font

Topic 26 19:02

Font Awesome not just web fonts now

Guest 1

anymore. If you're no. Well, like, you you can still, but, like, that's not It was for a long time. Rid. Yeah. It definitely was. But, like, don't don't just associate Font Awesome as being a web font because you can use it in And any there's SVG or you can import them as you want. So that's not a I don't think that's a slight against it, though. Yeah. And actually, even looking at this right now, it the I haven't been to Font Awesome in a long time, apparently.

Wes Bos

It looks it looks much better, than it used to, and there's variance of all these things. So maybe who knows? Maybe just use Font Awesome. So maybe I'm totally wrong on this.

Topic 27 19:28

Font Awesome improved

Wes Bos

Rid. Just after looking at the website, yeah, it doesn't it doesn't feel necessarily like the same old font awesome of the past. Either way, like Wes mentioned, don't, rid. Don't use it as a well, I was mentioning, but Wes clarified that it's not only a web font. Don't use it as a web font. Use Straight up SVGs in my opinion web fonts if you are using them they're heavy they're much heavier than pulling out the individual SVGs that you want rid. And so, personally, I I do use an SVG system myself. I would just curate all of the different Icons I want. Download them as SVGs.

Topic 28 20:12

Curating own SVG icons

Wes Bos

Drop them into, either their components themselves or just the straight up SVGs And use those in my code. The way we do it was with a giant switch statement. Well, I guess there's a giant if else because it's a Svelte template Where you just pass in a string that string is one of the available icons and that completes the if statement to output the correct SVG.

Wes Bos

So that's how we do it And I you can you can take so many different approaches to this.

Topic 29 20:39

Pick icons that fit brand

Wes Bos

But again, I now that I I totally rescind anything anything negative I said about Font Awesome. It's Kind of nice here. Yeah. It's the reason why I've stopped using Font Awesome is just like,

Guest 1

I don't need they have, like, the 17,000 icons, but it's like $99 rid Like, I don't want to pay for Oh, an aid product. Some of it is. You get 1700 for free, and then they have, like, duotone and light and whatever. And, rid. So what I do is, like so, like, it's not that I don't like Fon Awesome. I just, I've been starting to use React icons. And what React icons does Is it provides you a single API for using, I don't know, 15 different Heroicons, Ionicons, Devicons, Boxicons, Bootstrapicons, Typeicons.

Topic 30 21:27

Using React Icons

Guest 1

There's like tons of them. And what I do is I'll just pick and choose the ones that I like. Now you have to be rid. Kind of careful that you you pick ones that are weighted the same. Otherwise, some are very thin and some are very bold.

Guest 1

Rid. But I I really like that because the hardest thing for me with it's like, oh, I just need a a quick icon. And then before you know it, rid. Like, oh, my gosh. I've converted this thing, and, now I have to have a, like, a icon file and, like so I just rid Really love how quick and easy React icons is. And then they also just they only import the ones that you want, so you're not importing the entire library. It just does a one rid 1 on 1. So if you it's also just a great website if you don't want to use if you don't use React.

Guest 1

It's just a great website to see rid. Literally every single good icon pack out there.

Topic 31 22:15

React Icons API

Guest 1

And you can just search rid. All of them at once. And you can, like, alright, who has the best play icon? I just searched play. Probably a 100 came back, You know? And you can just kinda, like, search through all of those to see,

Topic 32 22:37

Carefully choosing icon sets

Wes Bos

which one which one's the best. So I've I've been loving that in a lot of my projects because it's just so so simple. Yeah. This is nice. I wonder what the behind the scenes this looks like if it is just SVGs as like a If statement or if you're oh, I guess you're bringing in an individual one as a component, maybe icon name. I don't know. Yeah. I wonder what behind the scenes this looks like. It's This would be, like you said, a nice place to really get a good feel for all these icons. This this website really makes The table of icons pop in a way where, like, you can see them all where it's not holding them back, and they're all cohesive. Feels really Nice. I added a couple more links to our show notes. 1 is icons8. 1 is flat icon.com.

Wes Bos

Those are also both great places to find web fonts. Now or web icons, SVG icons. Now the big problem with some of these, like, you can get in trouble exactly like what you said where you're grabbing Multiple icons that don't really fit since they're not coming from a pack. So I would maybe recommend finding all of the specific icons that you want within 1 pack if you're going that route.

Wes Bos

Rid. But yeah. Yep. The icons, man. It's a it's a whole world. Right? And and they can greatly, like, change the vibe of your site in general, with whatever style you're going for. So make sure that you pick an icon set that fits your your brand's identity. You know, rid. I think why people moved away from Font Awesome and into other ones is because

Topic 33 23:40

Higher resolution screens

Guest 1

screen resolutions got much higher, And people were able to use higher detailed icons.

Guest 1

Mhmm. And those are, like, simple on iPhone apps. Rid. And and, like, the Font Awesome was very simple because when it was made, we had the iPhone, like, 3, you know, rid and they had to be very, very small and simple. But as we have these huge four k screens and high DPI devices, You can add a lot more detail to your icons, and it's still made out at a very, very small thing. So I bet that's why. There's also a lot of, like, Dynamic icons that can add or remove detail the larger or smaller they get. Oh, yeah. Those are really cool. Like an SVG that has that kind of detail in it. Rid. I think that's that's neat. I had to do that with my logo.

Topic 34 24:47

Removing logo detail at small sizes

Guest 1

I had to remove the, like, West Boss lettering and just do a simple, like thing because as at a certain point, it's way too small, and you lose all the detail of the lettering.

Wes Bos

I'm gonna have to do a deep dive on this myself. So We're doing a big redesign right now, and we have not essentially chosen an icon an icon system yet. So, I will be diving into the wide Rolled off icons and maybe you've just kick started this, so thank you. There you go. Next question from Sasha.

Guest 1

I see lots of websites that are broken or don't render properly, where I have to unregister the service worker and clear the site data to show normal. How could this happen? Rid.

Topic 35 25:15

Fixing broken service workers

Guest 1

This is, like, one of the biggest pain in the butts of service worker.

Guest 1

So a lot of times in service workers, what will happen is people will, rid. You visit a website, a service worker will download, and the service worker will attempt to, cache maybe the page, Maybe the JavaScript, maybe the CSS, maybe images. And then when you visit that page again, instead of going to the network, it just serves it up from the local cache In the service worker.

Topic 36 25:54

Caching causes issues

Guest 1

And all too often, you can goof that up because service workers are tricky, and that will end up breaking your website.

Guest 1

Rid. So, that's usually what happens is there's something going on there where the logic has and like having to test Those states of service workers is really tricky. Like, I'll give you an example of, my keycode.info website, which I sold, by the way. Yay.

Guest 1

Rid. So no longer mine.

Guest 1

But I rolled out a new version a couple weeks ago.

Guest 1

And the Keycode website, rid. The old version had a service worker that would cache the application and just serve it up. There was no logic in the service worker to ever delete itself.

Topic 37 26:36

Serving old cached version

Guest 1

So I deployed the new version of the website, but anyone who had visited the web the website previous to that Would forever get the older version of the website. Right? Yeah. So and I only I luckily, I had it happening in my browser, But I couldn't delete the service worker manually because then I had no way to test, to test the Actually, unregistering it. Oh my god. So I had to figure out where the service worker was on the old website, And then I wrote a service worker on the new website, and it has to be the same exact file.

Guest 1

And what will happen is every time you visit a service worker website, rid. The browser will attempt to check if there's a new service worker. It will download it and run it.

Topic 38 27:25

Browser checks for new service worker

Guest 1

And then rid Even even if there's no, like, code to to try to do it. If the service worker is registered, it'd always try to check if there's a new version. And then in that rid At service worker, I had to terminate the service worker and and remove all of the cache there and then finally re reload the actual page rid on that. So you can get into this this kind of scary situation where, the site is cached not forever, but you you can always get out of it by Figuring out where the service worker was and serving up a new one. So I I have, like, a GitHub gist I wrote of just called nuke all service workers. Mhmm. And anytime you Visit the website.

Topic 39 28:03

Nuke service worker gist

Guest 1

It will just nuke it away and and you could start again if you want again. Yeah.

Wes Bos

That's interesting to me. You know what? I would love Wes. I would love maybe even, like, a hasty treat where it's just Wes talking 1 0 1 service workers. Rid.

Topic 40 28:19

Wes service worker episode

Wes Bos

That that's what I would I think we did 1 many moons ago. Maybe we should do it again. But maybe even, like, get into some actual

Guest 1

Practical code stuff rather than conceptual stuff, maybe. Sure. Yeah. Yeah. I'm into that. I did a, oh, maybe maybe rid. 3 or 4 years ago in in Dayton, Ohio, I did, like, a private workshop on service workers and some of the stuff that surrounds, rid. That Yeah. And, it's it's an interesting world, man. It's it's not something I use a whole lot, partially because I'm rid. Care to goof it up and partially because, like, I don't know. I'd like but I would I would love to to do offline viewing for my videos, and I think that's That's my next step. Service workers can do a lot more, but that sort of like caching and offline is is the main use case that you see out there. I it freaks me out. I I actually don't do much with service workers just because,

Wes Bos

I haven't had that experience yet. I haven't gotten the deep dive there. So Oh, yeah? Yeah. There you go.

Wes Bos

Yeah. Cool. Alright. Well, next actually, let's actually take a quick break to talk about one of our sponsors today, which is Sanity. Yeah. Let's if you're dealing with service workers, You might lose your sanity.

Wes Bos

So

Topic 41 29:26

Sanity sponsor spot

Guest 1

Sanity.

Guest 1

Io is the unified content platform that powers better digital experiences.

Guest 1

Rid. What does that mean, you say? So Sanity is is a whole bunch of stuff that people love, you as the developer. To you, it's a CMS. You you you fire up Sanity.

Guest 1

You create all your schemas. You relate your data. You create all your inputs.

Guest 1

And then Sanity is also, they have a thing called Sanity Studio. It's a whole CMS that you can like a whole UI That you can use to edit your data, and it's built in React, so you can make your own React components if you need to.

Guest 1

But then there's a whole layer of, like, real timeness on there. Rid. There's a whole layer of, hooks where you can do approvals and and workflows to get data and content on your actual web rid site and preview it and all that stuff. So, like, like, all the way from, like, the the the the basement where us Developers live all the way through to, like, marketing and legal who needs to actually use the product at the end of the day.

Guest 1

Your data needs to go rid. All the way across that. Insanity powers all of that for you, and you can pipe that data into Literally anything, an app into your website, into, like a poster board at a restaurant.

Guest 1

You name it. Right? Wherever data can be, it can go. So check it out. Sanity.i0forward/ syntax. That will give you double the free usage here. Thank you, Sanity, for sponsoring.

Wes Bos

Next question is from Jared Gentry. He says, since Next. Js has API routes, could you build a full stack application using just Next. J s, what would be the pros and cons of doing this? Yes. You can. Next question. No.

Topic 42 31:10

Fullstack Next.js pros and cons

Wes Bos

Next j s question. No. Yeah. So okay. Yes. You absolutely can. And, the pros would be that you're keeping everything colocated in 1 project. You're not having to worry about multiple, processes. You're not having to worry about dealing with multiple domain situations. Like, we have a separate domain for our API, It does cause more inconvenience than it does if you're creating an image. Problems, and cookies are all of them. Yeah. Right. Cookies Cores and cookies. Of these cores and cookies. Those are 2 things that you will avoid.

Topic 43 31:41

Pros of colocation

Wes Bos

So that's a pro.

Wes Bos

Pros all your code lives in one spot. It's a pro.

Wes Bos

A pro is that there's a convention that works specifically with the UI of Next. Js, so that's a that's a pro.

Wes Bos

Cons would be that, rid what would a con be? A con would be that you don't have separate control of it in the same way, for instance. Like, we have With our API, we can push an update to just our API without having to worry about rebuilding or redeploying the UI in any sort of way. So that's nice.

Topic 44 32:14

Separation of concerns benefit

Wes Bos

Rid. We can keep them separated at a different level like our dependencies for our server. We can have them all be just whatever they are for the API. But then, again, a pro would that you're not managing 2 separate sets of dependencies, which is also a problem. So you can absolutely do it. West, you Speak a little bit more on what they're doing actually with their serverless functions and stuff like that. But for me, personally, there I I I think it's it's a great idea to have it all unless you're planning on having, I don't know, a really intense API that you wanna scale in different ways. But rid. Maybe you can even do that still with Next. Js functions. There's nothing

Guest 1

special or proprietary about Next. Js's API functions.

Topic 45 32:52

Nothing proprietary about Next.js functions

Guest 1

They're just like Amazon Lambda serverless functions. There's a couple they have a couple little, like, handy things, but that's nothing you couldn't replicate yourself. So rid in in terms of like being locked in, that's great because you could move that to like literally any other platform that supports The Lambda signature for serverless, which is most of them. Mhmm.

Guest 1

And rid I'll say, like, most of your application's logic for your your back end should be factored out into separate functions. So rid. Send an email, save a customer, mark as paid. And those functions are very movable, right? Because it's it's there's nothing specific about Next. Js in that. So rid. You totally could. Cons.

Topic 46 33:43

Factoring out backend logic

Guest 1

I don't like I just love having a separate, window open for my back end in Versus Code. You know, I got my front end. I got my back end. Like Scott says, your dependencies are a little bit easier to manage. You do have a little bit of duplication between the 2.

Guest 1

But yeah, there's certainly that.

Guest 1

I tend to rid. Use Next. Js, serverless functions as just needing like a couple sips here and there rid of of back end. I built my entire listen to the selling t shirts with TypeScript episode. I built the entire e commerce platform on Next. Js rid Functions. And it's funny because I built them in I built them in something else before I moved it to Next. Js, and it was very easy to move it over because at the end of the day, it's just rid Node.

Topic 47 34:31

Easily moving serverless functions

Guest 1

Js. So yeah. Yeah, there's that. And and like, I also don't like that it's just like forward slash API or like I don't like having them in the same editor. Again, I just like if I want to search for something, I'd like to know that I'm on the back end. Nice nice and cut and dry.

Wes Bos

So even though I I'd have them as separate processes, I open up my whole thing as a monorepo.

Topic 48 34:54

Using monorepos

Wes Bos

So I I have Oh, dear? Then both open at all times. And it doesn't it's not too bad to search between them. Sometimes Versus Code can be a little bit of a iffy words like Config files per project or you're restarting your TypeScript server stuff.

Wes Bos

But, you know, I I've gone both ways, and I'm I'm kind of not necessarily Like, I I don't necessarily have a a strong answer here because I have had a project with my meteor site where the API and the UI are tightly integrated. They're one project. They're one everything, and then I've had them both the separate processes and separate URLs.

Wes Bos

And it does feel like a a more of a pain in the butt now that they're separated.

Wes Bos

And so it's you you've gained control, but you've lost a little bit of that ease of use. So, yeah, it's definitely a trade off, But it's very possible you could do it. You could do it either way.

Topic 49 35:43

Tradeoffs either way

Guest 1

Next question from Thomas. This is a great question. Do you keep your landing pages and home Pages of your application separate, for example, forward slash dashboard.

Guest 1

Absolutely.

Guest 1

This is a a big pet peeve of mine is when you log in to an application and you cannot go to the website's home page. Rid. Like, sometimes you want to, like, look at the pricing, or you want to look at some features that they may have, and you have to log out or open the incognito tab rid just to see what their website looks like.

Guest 1

And then also just from a marketing standpoint, it's Often that your marketing website is totally separate from your app. Mhmm.

Guest 1

And most people We'll run their actual application on, like, app dot their domain name or or like a forward slash dashboard, something like that. So, Yeah. Keep them separate. I I really don't like that. The thing I have seen, I think Prisma does this, is that when you hit The home page, it will do a quick call to the back end. Mhmm. And it will change the sign in to your actual, like, avatar rid. Just a split second after the page loads, and that's a nice way just to show, okay, I I went to the website.

Wes Bos

Now how do I get to the dashboard? Because that's another problem. It's like, I'm visiting the marketing site. I just wanna rid site. I just wanna freaking get to the login page, and you don't have a link anywhere for it. You know? I actually have, like, changed several times whether or not I'm, like, Doing a redirect if you're landing on the marketing page or not. At the end of the day, one of the things that we have is, like, after you are logged in, clicking on the logo on the site no matter what will always take you to the your dashboard. But we're I think we're gonna evolve some of this after we get done with the redesign that we're working on right now. So, yeah, just a that's the whole thing. But, yeah, I I definitely, I definitely would keep them separate just for your own personal headaches.

Wes Bos

Okay. Next question is from rid

Guest 1

let me do this one. I have a bit of a French.

Wes Bos

What say it again? Sorry.

Topic 50 37:46

Pronouncing French name

Guest 1

La huit de I it's either la huit de hut. So you don't pronounce the e s e? Rid No. No. That's in French.

Wes Bos

Okay. Yeah. I I knew this is funny. Early on in West West and I, we were chatting about, just I think it was we're chatting about something Toronto or, just in Canada based, and I I mentioned a marmot. And you were like, what's a marmot?

Guest 1

Rid. Like, I is that a marmal? It's just like, marmal. Oh, okay. Yeah. You you got the fancy

Wes Bos

fancy pronunciation

Guest 1

of a marmal. What do you What do you call the when you come into a house, what do you call that? Foyer. Yeah. That's good. Yeah. Some people call it I always, like, watch HGTV, and these Couples from Texas are like, that's a nice foyer. That's foyer.

Wes Bos

Yeah.

Wes Bos

No. I I we my my parents always said foyer. So, Alright. What does the say? Says, I'm a budding web developer who codes for a hobby.

Topic 51 38:44

Online coding environments

Wes Bos

I create a lot of side projects, and for most of them, I use a thing like Replit, an online tool to host and build and develop sites, but It's not exactly a production environment. Where's the line for moving something hosted on a developer server like Replit or a Raspberry Pi to moving it to production like Netlify? Rid So for me, I'm almost always starting locally rather than in, like, a repllet. Like, I'll I'll pop open a project locally and and get that running on a local server before I will in cloud server, and that's fine.

Wes Bos

You know, I think the tools nowadays are getting a little bit better.

Wes Bos

We've we've had a We've done a little bit of a roundup on these in the past. I've been using Stackblitz a lot for creating new projects and trying things out, especially if Someone is, like, wanting a reproduction for their bug tracker. Like, if they if you wanna file a bug, it's really easy to reproduce your bug if you're creating, like, a Stackblitz and something like an online editor. So I'm almost always keeping keeping my stuff local And then moving it up to a server like Netlify or render or any of these, Vercel, any of these, whenever I wanted to be online.

Wes Bos

So so if I'm doing a hobby project, I'm never having it be available publicly or rid to the greater Internet or to whatever outside of my local machine until I'm I'm ready for it to exist in that sort of world.

Topic 52 40:11

Keeping private until ready

Wes Bos

For you, like you said, it it might be different. But again, once it needs to be public, that's when you wanna move it somewhere. I would if you're planning on using this thing As, like, an actual tool to use or an actual process, I would not keep it on one of these replit like tools.

Wes Bos

Just my My personal opinion. Yeah. I think

Topic 53 40:28

Avoiding always-on repls

Guest 1

as long as it's a toy, it's fine.

Guest 1

Or it's a a toy or, like, a, like, a tool. Rid.

Topic 54 40:38

Ok for toys and tools

Guest 1

It's fine to throw it on, like, Replit or CodePen or CodeSandbox.

Guest 1

It's Kinda interesting to hear that new developers aren't doing it locally, but they immediately just go for a online rid.

Guest 1

Code code place to to do it. What do you call that? Like, online environment. Right? Online ID. A cloud ID. Talked about. Right? We're talking about the iPad kids starting to learn to code, right? The iPad immediately go for that type of thing. And it's also nice because it's like, say you're learning to code and you're doing a little at school and a little on your rid. Home computer, and they wanna do a little on your iPad. So, like, when do you need to move it? Like, when it crashes, you know, like, when you hit those things. Rid. But, also, like, there's there's something to be said for just throw it up on its like, when you are ready for the public to view it, like Scott says, rid. Put it on something else and put a domain name on it. You never know if if those types of things will get really popular. Like, I've created many of those little websites, rid.

Guest 1

Over the years, and some of them get popular and some of them don't. It's kind of kind of fun to have. Yeah, it is. The next question from CD, obsessive coding disorder.

Topic 55 41:40

New developers going online first

Guest 1

Nice one there. That's hilarious.

Guest 1

What do you How sorry. I was just thinking area.

Topic 56 41:58

When to move to production

Guest 1

How do you deal with ignorant or demanding clients? Rid. When's the point where you say, I can't make this modification without extending the deadline or increasing price? This client doesn't understand exactly what they're asking for, rid. And it isn't interest and isn't interested in anything but the result, and thinks that anything can be done quickly. I'd love to hear your opinion. So As part of being a freelancer, it is your job to manage that client's expectations rid from the start. Otherwise, like, they don't they don't know how to run a project. They are they have a bricklaying business or something that you're helping them out with. Right? So, rid. Actually, if it was a trade, they probably would also be very familiar with the world of change orders. Mhmm.

Topic 57 42:45

Managing client expectations

Guest 1

So from the very rid Start. You need to have very clear expectations of how these things work.

Guest 1

And then also You need to remember that you're on your client side. You're trying to help out your client. Right? So you need to have a little bit of leeway here and there to make sure that, like, rid. You're they're getting the best thing. Like, if if you're just like, oh, no. I hate my clients. They're they're always asking for more stuff, and I told them Three times they can tell me and, like, that nobody wants to work with that person. Right? So there's got to be a little give and take there. You need to be very clear, and then you need to implement some sort of change order process. So let them know, hey. You wanna change something about the website? We need to write that up And be clear about if this is going to take more money and or time.

Guest 1

And and at the end of the day, that's good. Also, as you get better paying jobs. We've said this many times. As you get better paying jobs, as you get better at this, the bad clients Seemed to go away. People at the higher paying levels are more experienced, and are much better clients at the end of the day. So, How do you deal with them? Just get better at coding, and you will get better clients. Yeah. And that's a it's a funny thing because, like, if you're

Topic 58 43:34

Having a change order process

Wes Bos

rid If you're if if you have, like, a lot of open space in your schedule and you're really needing work, You can really do go through some great lengths to justify taking on one of these bad clients. The the bad clients are, like, just way that much more, rid.

Topic 59 44:02

Taking on bad clients when needing work

Wes Bos

Enticing when when you need the work because, you know, you you can't be as picky, but you gotta you do have to add some Some respect in your career. Like, have this radar for who's going to be a terrible client from the get go. I can I can Look back on so many projects that I worked on in my freelance career that didn't go as well as I would like them to? And almost all of them, I could say there were red flags immediately in that client meeting. Like, there were red flags that I should have said, I'm not a good fit for you. And, I could have gotten out of that rather than having to deal with some of the egos or just nonsensical ideas or like, I I you know, in, like, the year 2000,

Share