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

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.

Just being okay You create all your schemas. You relate your data. You create all your inputs.

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 rid. Questions that they might have.

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

is is like a huge,

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

Pages of your application rid. At the end of the day, it is just

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

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,

We'll run their actual application after that they're always asking for more stuff, and I told them 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.

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

Absolutely.

does this, and just serve it up. There was no logic in the service worker to ever delete itself.

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.

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.

This is a a big pet peeve of mine is when

you log in to an application and you cannot go to the And then also just from a marketing standpoint,

And most people to test the Actually, unregistering it. Oh my god. So I had to figure out where the service worker was on the old website, 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,

separate, But yeah, there's certainly that.

from Thomas. This is a great question. Do you keep your landing pages and home I've been starting to use React icons. And what React icons does Rid. So, that's usually what happens is there's something going on there where

website's home page. Rid. Like, sometimes you want to, like, look at the pricing, but they immediately just go for a

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

Bootstrapicons, to try to have to recreate it. Next question we have here is,

Devicons, Boxicons,

I don't need they have, like, the 17,000 icons, but it's like $99

if you don't use React.

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,

It's just a great website to see

There's like tons of them. And what I do is rid Came from a junior dev to a senior dev with nothing but a boot camp.

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 aren't doing it locally,

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,

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.

Cons would be that, but let's, let's let's change it up. I I don't,

With our API, we can push an update to just our API without having to worry about 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.

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.

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, Okay. Yeah. I I knew And then moving it up to a server like Netlify or render or any of these, Vercel, any of these, Just my My personal opinion. Yeah. I think

they're much heavier than pulling out the individual SVGs that you want cause more

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 Then they add a class to say animation, framework agnostic library, GreenSock is, you know, one of the most performant, rid.

syntax. That will give you double the free usage here. Thank you, Sanity, for sponsoring.

Your data needs to go rid. Literally every single 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.

Literally anything, an app into your website, to anyone struggling with impostor syndrome? And in your opinion, is it worth to pursue some sort of CS degree or certificate And 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.

rid. All the way across that. Insanity and are much better clients at the end of the day. So, 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 Js. So yeah. Yeah, there's that. And and like, I also don't like that it's just like forward slash API

like, all the way from, like, the Ionicons,

all of that for you,

powers

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,

and you can pipe that data into

And then Sanity is also, 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, with not knowing how to do something from Ben. How do you manage animations? I know frameworks such as Felt and React, 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 It's fine to throw it on, like, Replit or CodePen or

like a poster board at a restaurant.

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.

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.

they have a thing called Sanity Studio. It's a whole Typeicons.

Rid. Like, I is that a marmal?

I'm a budding web developer who I definitely or, just in Canada based, and I I mentioned a marmot. And you were like, what's a marmot?

fancy pronunciation repertoire.

this is funny. Early on in West West and I, we were chatting about, We've we've had a if if you have, like, a lot of open space in your schedule and you're really needing work, comes from someone anonymous.

Yeah.

codes for a hobby.

La huit de I it's either la huit de hut. So you don't pronounce the e s e?

delete the service worker manually because then I had no way to test, special or proprietary rid. You visit a website, a service worker will download, and the service worker will attempt to,

Would forever get the older version

of the website. Right? Yeah. So 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

And what will happen is every time you visit a service worker website,

So I deployed the new version of the website, That's rid Thank you for submitting your questions.

rid. The browser will attempt to check if there's a new service worker. It will download it and run it.

And then I wrote a service worker on the new website, and it has to be the same exact file.

rid. That four k screens and high DPI devices,

Practical code stuff rather than conceptual stuff, maybe. Sure. Yeah. Yeah. I'm into that. I did a, oh,

So Okay. Next question is from

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

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 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 rid. And it isn't interest

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

are.

in some workplaces as being with with that kind of constant Check-in constant communication. So how about maybe,

you need to, like, recognize what these share goals is essentially where the element lives. So it makes the animation more performant,

I will get you this early, 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,

with other people in your team like this. Be honest about your communication styles. If you have a project manager that's

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

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

and that's not working for you, you can say, listen.

bugging you every single day about something,

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.

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 sanity structure, content, CMS, and FreshBooks for example, forward slash dashboard.

to keep advancing. So first, I don't think if you have a CS degree, you're going to lose that feeling.

That's just an anxious feeling that a lot of people have rid. In that you 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 Often that your marketing website is totally separate from your app. Mhmm.

Those are also both great places to find web fonts. Now or web icons,

icon.com.

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.

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 rid

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

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

I think Font Awesome kinda hit an inflection point where, like,

what do you use for icon would keep them separate just for your own personal headaches.

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.

web fonts themselves. Because if you think about it, fun awesome is not a web font 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 in my personal usage of tables where I'm like, I gotta Just do all this by,

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 or

He says,

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

Every website ever was using Font Awesome, and you could see it from a mile away. So talking 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.

my keycode.info

And all too often, you can goof that up because service workers are tricky,

Those states of service workers is really tricky. Like, I'll give you an example of, I don't know, 15 different Heroicons,

website, which I sold, by the way. Yay.

I would merge the z and b to be like

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

Zebank. Zebank.

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.

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.

Zbanak.

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

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

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 keeping keeping my stuff local They say, how can developers work with designers and project managers

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.

they're a dedicated library. I also know Scott uses them on level up tots.

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

But tables,

rid. Like a quick little snapshot of a table. That's because a person used a table in there. So, screen resolutions got much higher,

if you have to have, like, a fancy layout, You can throw divs inside of table cells and isn't interested in anything but the result, impostor syndrome, especially having come for boot camp without a CS degree.

you know, tables are tables, but I I haven't really hit that many limitations in my opinion web fonts if you are using them they're heavy

got very sick or during that got very sick and But I rolled out a new version a couple weeks ago.

when we have 2 potlucks in a row, it means life It's bonkers right now. So,

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

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

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

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, So that's a pro.

didn't go as well as I would like them to? And almost all of them, I could say there were red flags

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

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

so if I'm doing a hobby project, I'm never having it be available

like I'm

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, say? Says, GreenSock would be a great tool for you in your To or just the library in general. Is that flip animations? They do become a bit of a pain. Flip is basically where you, To have every project manager and every designer that you work with love you as a developer is just to deliver.

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.

Ultimately, that deep end, like, sinking kind of feeling went away

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

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

we had the iPhone, Rid. So no longer mine.

like, 3, you know,

Mhmm. And those are, like, simple on iPhone apps. Rid. And and, like, the Font Awesome was very simple because when it was made,

rid and they had to be very, very small and simple. But as we have these huge

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.

of your site in general,

higher detailed icons.

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.

Drop them into,

Cool. Alright. Well, we are sponsored by 3 awesome companies today, Century error exception good icon pack out there.

Let's get on into the questions then, Scott. Yeah. Let's get into these questions. 1st Question 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 I had to remove the, like, West Boss lettering and just do a simple, 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.

Cloud accounting. We'll talk about all of them partway through the episode.

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

and you can do all that by hand. There's a lot of blog posts on how to implement flip animations.

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 Parts of your organization, 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

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, or like I don't like having them in the same 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.

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

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.

whenever I wanted to be online.

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?

I create a lot of side projects, and for most of them, I use a thing like Replit,

So

for We've done a little bit of a roundup on these in the past. I've been using Stackblitz a lot for you are being forced rid. You have the end result of the animation.

creating new projects and trying things out, especially if inflection point? I don't know if that's the right word. It hit a point

Someone is, like, wanting a reproduction just I think it was we're chatting about something Toronto

their bug

to reproduce your bug if you're creating, like, a Stackblitz and something like an online editor. So I'm almost always 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 So that's how we do it

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.

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.

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

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.

For you, like you said, it it might be different. But again, Rid. But if you're looking for 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 rid If you're seamlessly? well, Pros all your code lives in one spot. It's a pro.

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

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 You know that you're gonna be in that situation quite a bit in your career where 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 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.

rid. Actually, if it was a trade, they probably would also be very familiar

and thinks that anything can be done quickly. I'd love to hear your opinion. So As part of being a freelancer,

manage that client's expectations instead of going to the network, it just serves it up from the local cache In the service worker.

with the world of change orders. Mhmm.

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.

So, maybe even learning GreenSock.

documented and highly used animation libraries out there and is not dependent on any framework.

like, start

I could just answer it here.

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

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

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 either their components themselves or just the straight up SVGs No. I I we my my parents always said foyer. So, Alright. What does the

Okay.

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.

you'll see what they're using under the hood.

at the end of the day, these, like, frameworks is that this world of web development

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, it is your job to

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,

rid 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, I'm a full stack full time developer maybe maybe rid. 3 or 4 years ago in in Dayton, Ohio, I did, like, a private workshop on

What would you recommend

But rid. Probably anything that comes my way, I can figure it out. Or

I I don't like

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

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.

it was very easy to move it over because at the end of the day, it's just rid Node.

as just needing like a couple sips here and there

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

it's way too small, and you lose all the detail of the lettering.

an icon system yet. So,

like thing because as at a certain point, service workers and some of the stuff that surrounds, And the Keycode website, rid. The old version had a service worker that would cache the application 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, I'll just pick and choose

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.

online excuse the

rid.

It's Kinda interesting to hear that new developers cache rid. And everybody's on meds, so, rid. Use Next. Js, but anyone who had visited the web the website previous to that

Code 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 Rid. But I think it's just being okay with not knowing stuff,

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, How do you deal with ignorant or demanding clients? 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, 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.

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, about Next. Js's API functions.

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. 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, It's just like, marmal. Oh, okay. Yeah. You you got the fancy

Nice one there. That's hilarious.

CD, obsessive coding disorder.

it is. The next question from Then, like, when you have a sec, just pop in and say, hey.

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, zban rebuilding or redeploying the UI in any sort of way. So that's nice.

to sort of all be on the same page 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.

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 and I only I luckily, I had it happening in my browser,

rid. We can have

Like, okay. I know you're gonna come and ask me about these freaking

Seemed to go away. People at the higher paying levels are more experienced, it's

better paying jobs. We've said this many times. As you get better paying jobs, as you get better at this,

the bad clients CodeSandbox.

maybe the page, Maybe the JavaScript, maybe the CSS, for using, like literally any other platform that supports maybe images. And then when you visit that page again, Rid No. No. That's And people were able to use 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.

So a lot of times in service workers, what will happen is people will, I tend to just love having a separate, 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

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

But, you know, I

I've gone both ways, and I'm I'm kind of not necessarily

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.

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.

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

And you can just search rid. All of them at once. And you can, like, alright, who has

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, You name it. Right? Wherever data can be, it can go. So check it out. Sanity.i0forward/

the best

Next j s question. No. Yeah. So okay. Yes. You absolutely can. And,

processes. You're not having to worry about dealing with multiple domain situations. Like, we have a separate domain for our API, It does

the pros would be that you're keeping everything colocated in 1 project. You're not having to worry about multiple, 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.

rid. I know that you're gonna check-in and say how much longer.

this border on here, or I, And and at the end of the day, that's good. Also, as you get I figured out this on my own, a lot of it, and I know that I can figure out

Next question is from Shabaz.

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.

and then you need to implement some sort of change order process. So for someone on Eleventy or another static site generator that doesn't use a framework Is it provides you a single API What do you How sorry. I was just thinking area.

And then also But I couldn't

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

So from the very rid Start. You need to have very clear 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,

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 just throw it up on its like, when you are ready for the public to view it, like Scott says, But then there's a whole layer of, like, real timeness on there. Rid. There's a whole layer of, This is, like, one of the biggest pain in the butts of service worker.

of how these things work.

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.

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 the logic has and like having to test rid.

They were like, I need to be at my business. So What say it again? Sorry.

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

we have we set up specific times to check-in? That way, we're all on the same page,

that you can do everything that I was worried about now is now, like, second nature, easy,

And I can just do my work and knock it out.

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

rid I'll say, like, most of your application's logic for your your back end should be factored out into separate functions. So

The Lambda signature for serverless, which is

most of them. Mhmm.

Next question here is from Geordi.

1 0 1 service workers. Rid.

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

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

Enticing when when you

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

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

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, tracker. Like, if they if you wanna file a bug, it's really easy 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

and knowing, like, okay. Look at me. I freaking and that will end up breaking your website.

And I you can you can take so many different approaches to this.

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