Potluck × Testing Animations × Tools for Learning × Coding Related Injuries

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

Welcome to Syntax. Today, we've got a potluck episode for you today. This where you bring the questions. We bring the answers. We got some fantastic questions all about web development and node and typescript and All kinds of good stuff set up today. We're excited to dive into that.

Let's talk about one of our sponsors real quick, and that is Sentry at Sentry.

Io.

They are the amazing error exception performance tracking company out there. Basically, how it works is that you ready. Throw Sentry into your existing application. They work with all the languages. They work with all the frameworks. They work with all the libraries.

You put it in your front end, you put it in your back end, and it will collect information about what went wrong, who it went wrong for, how it went wrong, all that information. This little treasure trail of information as to what went wrong. And it really helps you figure out what's going. And Honestly, you can just log in. You can take a look at, alright, what do I want to fix today or is something going totally wrong? You can make that Immediately make that into a GitHub issue. It will try to pinpoint which commit it actually did, who possibly committed to to create the thing.

Rid Awesome stuff. You're gonna check it out at century. Io. Use the coupon code tasty treat for 2 months for free. Thank you, Century, for sponsoring. Rid Sick. Cool. I'm gonna apologize to everybody. I have a double whammy today. I have a cough. I'm a little sick. I'm gonna not

rid Coughing at the mic, so hopefully you won't. You might just hear it in my voice. But, 2, it is what? It's 34 degrees outside For Wes, I don't know what that means for you. It's close to freezing.

And, our our direct next door neighbor, rid who's awesome, by the way? They have some landscapers out there. Who's landscaping at, like, nearly freezing at Monday morning at, You know, early in the morning here.

I'm just like, this is the type of thing you expect during the the summer or the afternoon or something, but not rid During the the winter still in Denver here. So I don't know why who whose idea it is to start landscaping. So you might hear some Chainsaws or whatever they have going on over there. So double word of warning from my my audio quality today. I promise I will be better next rid week. Alright. Let's get to the 1st question here from Bastian. It says, hey, Wes and Scott. Long time listener, first time caller. What do you do when you are done with a client's project? Rid. Do you offer full hosting and continuous support or just send them the project for them to host? I'm a hobbyist looking to get into a freelance as a side gig. Much love from down under, Bastian. This is a good question for a number of reasons, but it's it doesn't have a definitive answer. There's no right or wrong way to do this because I known rid People who do this in multiple different ways.

I know people that keep, retainer for clients. So that way A client can pay ahead of time for extra work or maybe they're paying for hosting each month, and part of that hosting bill comes with rid A bit of customer support on your end as a developer. And maybe perhaps you just manage it all for them. They pay you. You pay for the host, and then you take a bit off the Hop to make sure that, they have no downtime and maybe there's some extra customer support and extra service there for that user. And that could turn into a nice little revenue stream. I know some freelancers who have built their entire business off of continued support for clients. Rid. And the upside there is you end up having to have less clients because you end up having reoccurring revenue each month in a way that you wouldn't if you were not doing this type of thing and just pushing it off.

Now the big downside obviously comes from the amount of time effort It's going to require from you. And so I think the big thing is to consider, do you have clients that you would like rid to continue working with. And if you would like to continue working with them, then you can offer them full hosting and continuous support and continue to work rid with those customers, continue to cash in, but that doesn't mean that's something you have to offer to every client because we both know, Wes and I, that Not every client that you take on and complete a web project with is one that you wanna work with long term based on personalities.

And maybe you're perhaps the type of person who doesn't wanna deal with this at all. Rid There's absolutely nothing wrong with saying, alright. See you later.

I'll set you up. Well, maybe we can do it together if you're local or we can do it over a Zoom. You can rid I I can tell you where to go, where to put your credit card information in. We can get you all up and hosted. You just have this thing on auto renew. It's good to go for the rest of time, And then, see you later. I will never talk to you again hopefully.

In both of those situations can work, but it's definitely a trade off. So there's there's not much necessarily a a right or wrong thing here. But I've known freelancers who've done both of these things that made it work really well. So it really depends on who your clients are and who you are as a person.

Ready. Yeah. I'd say here, don't offer hosting. There's really not that much money in it and, like, continued support. That stuff is really hard. Basically, what I would say to my clients was, like, this thing is guaranteed against bugs for a year or 6 months or something like that, given that you're not adding a whole bunch of random stuff to it, especially with something like WordPress, it's kind of tricky rid In that, you give them this thing. And then if you if they're, like, savvy enough to, like, install plug ins or whatever, They can also break things as well. You know? So it's it's kinda frustrating, but you just gotta be, like, give I I guarantee it against bugs for 1 year of the code that I wrote. However, if it's something that you have introduced, then that would be an extra charge.

The hosting is Like, I'm just thinking, like, let's say you had 30 or 10 clients that you're hosting and you're charging them $30 a month. And that's all pure profit.

$300 a month. Probably not worth it. You're going to get emails about rid They're crazy email problems and and all that. And not to say that you shouldn't be doing that type of stuff, but rid. Probably that's more of a long term retainer where you're charging them 100 of dollars a month for that type of thing. And honestly, I don't know if there's a market for that type of thing.

Someone's going to say, okay, you're going to charge me, what, $300 a month where I can go to Wix and spend $6 a month or I don't know how much a Wix website is, but probably not worth it. What I always did was say you sign up for the hosting, you buy the domain name. Rid Unfortunately, for, I think, last year, after 12 years, I finally got my last client's domain name off my account, which is It was painful because what would happen is it would go up for renewal, and then I would renew it because I don't want it to go away. And then I would rid. Chase them to collect the, like, $20 for the domain name, and then they wouldn't pay and the email would bounce and it's just such a pain. So rid. Definitely don't do that type of thing. Certainly, you can have long term relationships with your clients. That's that's a great thing to do, but, make sure that you're getting paid for your time.

Yeah. You know what I mean? I I personally I personally follow that as well where I'm not rid. Hosting any of the clients work myself, and I'm not doing that. But I do know people that have done that work, but I guess I'd I've never really dove that deeply into the financials of the site. Because when you broke it down, you know, $300 a month obviously isn't worth it to host 10 clients, but they must be charging more because I I know people that have their whole business based on on that, or maybe they just have a lot of clients and they're able to manage that many. I don't know. Yeah.

Maybe there is something to be said for that. Let's say you have 100 clients at $30 a month. How many times are people actually updating their website or having issues? So many businesses. You can tell they made their website 6 years ago, and then they just haven't touched it, you know, and they need that page up. They're not they just kinda pay the bill and move along. So maybe maybe we'll reach out. Oh, I was gonna say I've done client work where I've I've picked up a website that's Currently being hosted on some developers,

and and that's when you you do the initial consultation. They just say this has been hosted here for, you know, rid. 10 years for whatever. I've been paying this much to this dude for 10 years.

So, yeah, if you're out rid and you are hosting and you're making it work and it's a business and it's profitable from you, we wanna hear from you. I would love to to hear from somebody who does that. We, my dad does a lot of that, like,

rid WordPress and and so he's retired. So when he retired, he took up, like, web development. And, actually, I sent him a lot of my past clients. Rid. And he more than once, he's had clients who literally don't know who owns the domain name and who has the hosting. And, like, I've gone down rabbit holes of Calling people that built websites 12 years ago for the client and, like, he's at a point where there's there's some clients rid Who they're not they're not paying anybody for the hosting, but and they have they have no clue who owns the website or who hosts the website.

So our our our our neighborhood has a website and I was trying to become the webmaster just because I, You know, the role is actually webmaster.

And I wanted my name printed as webmaster Scott Talinsky in the newsletter. So I reached out to them and they were like, If you can figure out who owns the current domain and where it's hosted, like, we will, let you do. That was just like, we have no idea. We're gonna buy rid A new domain just because we can't, we can't figure this one out.

Everybody who did it was, like, 90 years old, and nobody has a clue.

Ready. It's kind of interesting also with, like, volunteer stuff like that. There's churn. Right. And at a certain point, yeah, there's 100% churn of people in the ready thing, and nobody knows who's doing what.

Next question we have here from Material Dev in a Material Word world. Re My team works on a component library for our company. My teammates suggest we skip animations for our component unit tests To speed things up and reduce flakiness, I feel like we should keep animations in our tests so our tests match production behavior.

I think both options have the pros and cons. What do you suggest that we do? Oh, this is kind of interesting.

Rid Yeah. I'm trying to think if I've actually ever tested animations. I've tested React animations where ready. You test like, let's say you are animating a number. It was in a cart and you have 10 items and it goes to 11.

What I was testing is that there's 10 and you click the button and then there is 10 and 11 rid. And the 10 has, like, a going out class and the 11 has a going in class. And then and then after the whole amount of time, there's just an 11. The 10 doesn't exist there.

Have you you're tested animations? Yeah. No. So this is this is a problem, that I have hit directly.

I have to think a little bit about so rid Really, ultimately, it is a little bit about your testing strategy, especially if things are mounting and unmounting from the DOM, if you're using Like an end to end or like a dumb specific, testing situation.

You know, I wonder if The prefers reduced motion could be a friend here. This is not something that I've considered, But I just had this thought as I was thinking about this. We're like, in the past, what I would do if I have A page transition or something I know is 200 milliseconds.

I am going to throw a synthetic wait in there. Wait for the animation to finish, which is a is a really bad solution. Right? But ultimately, it's a solution that will work if you know that the animation is going to be rid complete. And, it will, you know, help reduce test flakiness because there's especially in end to end testing situations, You're looking at something like Cypress or something that's loading this up in a browser window and it's checking the dom.

And I've certainly had situations where I have my tests randomly fail because, maybe the loading took a longer second and then did not, the animation did not complete before went to check to see if it was there.

So this is definitely something I had. And so I just as I was writing, this question out thinking like, I wonder if you were to, you know, rid Have your animations be turned off with prefers reduced motion. If you could then do a setting inside of your test suite to say ready. Use prefer or prefer reduced motion on your test.

That way it is still matching your actual production, how the Dom is really running your test. But in the same regard, you would not have to add in a synthetic weight because my solution is to add the synthetic weight and that's what we do and it works fine.

I would much rather add this synthetic weight than to not have the animations at all. So to say So, you know, my teammates suggested we skip animations for our component unit test to speed things up. And perhaps you do that doing prefers reduced motion. But if they're If you're modifying the code other than that, I would say that might be not the right solution. Interesting.

Well, let us know if anyone else has a a decent solution for that as well. Yeah. And by all means, waiting does work. It fixes the problem.

And that kind of is how users are using the site at the end of the day. So alright. Next question here is from Mauricio from Bogota. Mauricio says, How does chat g p t fill the responses to the prompt? It does not use an API but server sent events.

Can you explain how server sent events work? And he even goes on to abbreviate as SSE as if we need another s s anything abbreviation in web development here. Wes, have you heard of server side events? Rid. I just want. Yeah.

It's kind of along the streams that we just talked about.

It's kind of in the streams world. Have you used them before? I haven't used them, and it does directly

refer to them as this kind of a an event stream. So a server side event, re 1, they say without an API. Well, it does use HTTP like a a normal request, so it's not exactly, rid Without a quote unquote API, it's still going off somewhere doing a request, right?

Yeah. So server sent events, essentially, The way that it works is that you create in JavaScript on the client, you create an event source and then you read listen to a specific URL.

And that is a long lived connection very similar to a WebSocket rid. And that your server can literally just send stuff over the wire as it needs it, such as events. Right.

Rid. And in the case of ChatGPT, they can whenever they have any updated information, they can just fire that over. I was just, like, looking up, like, why would you not use she's like WebSockets? Because WebSocket is the kind of a similar version to that.

WebSockets can send data both ways, whereas service events can just simply just send data

to the specific browser. I'm glad you said that that was going to be my question was why not just use WebSockets? WebSockets is also

its own protocol. It's WSS, right? And not everything supports WebSocket, right? Not every rid iPhone app. I'm sure WebSockets work in Ios. But, like, if you think about all of the places that you could get a request, re HTTP is sort of a standard around the world. It's it's in everything. You can make requests everywhere. You can make it from cURL. You can make it wherever. So it's really nice just to be able to use straight old HTTP without having to use rid. WebSockets or some sort of library or a whole bunch of setup.

So pretty pretty neat. Yeah. That is neat. You know what? I I hadn't heard of server side events ready. Before this, because anytime I'm doing anything like this, it is just straight up with WebSockets because I'm doing two way.

But, you know, it's An interesting, interesting way to do it because you're right. It's a one way chat. Sorry. I I was just thinking about that. Sorry. WebSockets are are often used in in chat. Rid. Right? Back and forth and back and forth chat. But this is a one way chat, and that's why it makes more sense this way. Alright. That just blew it wide open for me. I love it.

Next question from CMJ.

What is the best way to evaluate and choose a front end framework for a project? That's a good one. This, along with the which CMS should I use is always which was also a question we had been asked that I chose not to put into this episode.

We're going to do some sort of like month of CMSs or something around that just because there's so much out there.

And the same with we're kind of doing that with front end frameworks right now just by accident. We just had a whole bunch of authors of these frameworks out there.

What's the best way to evaluate a front end framework for a project? I think you got to look at a couple of things. You got to look at ease of authoring and getting up to speed.

Is there a whole bunch of boilerplate for that type of thing or not. You gotta look at how you can deploy the thing. Is it easy to deploy it, or is there a lot of Overhead. What does the ecosystem look like? You know, is there lots of tutorials out there? Is there lots of good documentation? Is there Lots of plugins around it where, okay, well, this framework doesn't do X, Y and Z, but if I want to be able to integrate something into it. How easy is that type of thing? Is it standard space or do I need, like, a specific adapter for every single thing? So I think that's probably your way to look at it. Also, how long has it been around? It's often very tempting to pick The latest and greatest in the brand new thing. But that's almost always a recipe for picking something that will rid Fizzle out or picking something that is going to have major API changes 3 or 4 times before they sort of settle. There's rid. There's certainly something to be said for picking a sign that is a little bit more established.

Yeah. And then certainly, you know, you don't wanna Left on an island where you're the only person working on x, y, and z. You can't find people to pick up this project or work on it later Once you're done with it, if if that's the type of thing. I remember, like, getting, potential clients at some point. You know, their sites were on cold fusion and being like, I have no idea. I can't find a single cold fusion developer.

What am I gonna do with this? And like me, I'm just like, I don't know. I guess I'll rewrite it or you have no other option. I can't I don't know anything about cold fusion. Right? And so many times, like, that can be a thing. You end up writing your thing on a thing and that thing becomes, gone at some point and then you're you're stuck with the software that you wrote.

But, you know, some of some of these choices, it depends on the life cycle of the overall project. How long do you plan on working on this project for? Is this something that needs to last forever.

If it needs to last forever, write it on as many web standards as possible, not on as library. So, like, really shoehorn as many rid. Web standards in there as you can web components and those types of things rather than doing everything in some library where the API is going to change and suddenly, rid you're writing everything in a different style than you were last year. So that's definitely something. But if it's a project, small team or maybe it's just a couple people, whatever, You know, you there's no harm in in picking some things that make you feel good too. So sometimes it's it's what is this stack? How does this stack make me feel? Do I feel productive in this? Rid. Are there the things that I need out of it? Is this going to work just fine for me? Long term, short term, whatever. It's understanding the project's life cycle rid And understanding your needs and wants as a developer. There's nothing worse than picking up a front end stack or a stack and all and then, like, not wanting to work on your project because You're either not experienced with the stack, you don't know what you're doing, you're not productive in it, or maybe you're just straight up not happy working on it. Those can all be factors as well. So, this is a long, long way of saying it depends. It, often depends on a lot of lot of factors. So just being able to, rid take an outside look exactly what you're building and how you want to build it is a big thing. Alright. Next question from Serfa.

Rid Surface says should functions only be used strictly for code that is going to be reused.

I, of course, use them for reused code, But also as a way to wrap code organizationally, it lets me see what a piece of code is doing at a high level. But I have some teammates who would rather explicitly not use functions if the code is never going to be reused.

Rid he says dad joke incoming. I guess they're less funky than me. Oh, I love it.

That's good. That's good. But I was Wondering where where where this is gonna go. I love the, funky dad joke.

It's is it easier for that it is easier for them to read one area of code rather than jumping function definitions everywhere. Now I'm on the fence on what to think. So naturally, I turn to whose opinions I highly value. What do you think? I am with you, Surfa. I like small functions.

This is a code style thing. There's no right or wrong answer here.

Some people are of the mind that a function should do one thing, and one thing only. Some not sometimes people are ready. Already, like, even at the point of, like, a function should only be, like, 10 lines max or 5 lines max. Or, like, people, like, prescribe Kind of arbitrary things in that regard to keep their functions really small.

I gotta say there are some really good benefits to having small functions. Small functions are way easier to test, especially if they're pure functions. Right? A function has an input and output. You can test that thing all day long, And if you have a lot of small functions, it's really easy to test a lot of small functions for their one explicit behavior. But if you have a big function, You're testing its input and output. It does a whole lot of stuff.

You know, things could break internally in that. It would be less clear what aspect of that is breaking or what's rid There are pros and cons to both of these strategies.

And, honestly, it's a little bit of code style in what your team wants to do. I personally lean towards smaller functions that do less even if they only are used once Because that's kind of how I was taught to program in general.

Ready. I I used a visual language to learn programming, and one of the cool things that that language allowed you to do was to click and drag and select several, like, Aspects of a function, so to say, and you click a button and say, encapsulate.

And that would just encapsulate it all into its own little thing and tuck it neatly rid neatly away. And there's something really nice about just calling the function that says get customer ID, rid transform customer, update customer billing, send it whatever. And then you just have, like it's almost like comments. Rid So to say exactly step by step what this application is doing rather than here's a bunch of if statements at the high level or whatever, rid to kind of pollute how you're looking at it. So it's a code style thing. I like small functions, but, you know, there's no right or wrong here. Unfortunately, it's it's a preference. Rid Yeah. I I think

I prefer to have my functions separate, from the flow control, rid. Where, like Scott says, get customers, send customer email. And then when you are reading your code, it will tell you exactly What is happening, but not how it's happening. And if you are curious about how is it getting the customer by ID, then you can click through to that and and actually see the code behind it. Testing, like Scott says, super important to be able to have a separate function to be able to test that type of thing.

The only time where I don't like it is where scoping gets incredibly more complex, having to pass literally everything into a function just so that you can do a simple thing and then pass back. If that's the case, then I have no problem just writing it in line.

But honestly, if you defer to Like, I don't I don't immediately go for writing a separate function, but I'll very quickly refactor out. So it's maybe not the first thing that I'll write, but as I say, that was 15 lines. That's a lot. It starts to make me feel a little bit anxious because there's so much code on the page. And I can't really understand what's going on.

And if that's the case, then very quickly you could just copy paste refactor out to a separate function. Even just keeping it in the same file is really nice.

So you don't have to do all the imports and everything like that.

And then you can have a nice, clean function and reference it if you need it. Rid. Yeah. And and, like, it's funny that you said that. Like, you might not write it that way initially because that goes along with directly how I was taught in the visual language rid to do everything. And then when you're done, you can encapsulate it into smaller chunks, essentially, that are more descriptive of what it's doing. So That's not a bad strategy totally. Question from

Pinky. When learning new coding concepts, I like taking notes to reinforce learnings and also Later reference. I'm curious as your process when learning, what kind of tools and processes do you use and find effective and recommended? Rid Yeah. I I do this quite a bit. Actually, it's funny.

A lot of my note taking these days is simply just opening up a show in the syntax notion and and keeping my notes in there because I think, like, okay. On learning something, as I learn things, I Put them somewhere and might as well put it into a show so we can get a show out of it as well. But I think that process will work well for literally anyone. Just have a markdown file somewhere in your project. I use that to put links to resources that would be helpful rid sort of things that I understand.

Keywords.

If you're not sure, like, what is a tokenizer? You know, you can just do a quick little read. Glossary of all the words that you have. Maybe even put it in a blog post. Even if you Don't end up publishing that blog post because it's half done.

It's a good practice to get into writing good comprehensive notes that you can come back and reference later. I can't tell you how many times I've felt happy that I rid. Took good notes to come back to in 6 months later. Yeah. Hey. I'm sorry, everybody. The

the leaf blowers and the Chainsaws are right outside my office. So you might be hearing it right now. But, really, you know, I I totally agree. You know what I use for this, Wes? I use Obsidian, pretty, Pretty regularly for this.

Obsidian is like a note taking app that you can do linked notes. People were using I believe it was called Rome for this as well. It's a type of thing that you would use Notion for, but, you know, it doesn't have necessarily the same database type of things. But it's also free If you want to use it for free and it it has it uses markdown files so you can sync them yourself.

And markdown files can be pretty easily turned into a blog post if That's the type of thing you're wanting to do.

But what I do is I use Obsidian.

I if I'm researching something, rid I I write down a lot of questions, the type of questions I'm having, and then I just start to answer those questions myself.

So, like, When I when I start, like, a a big note project in general or in general when I'm, like, learning a coding concept, I'll make a file for rid what I'm going to be learning, and I'll write down some assumptions or some questions or some things that are are kind of floating around in my brain.

This is what I think it is. Is that this, rid this is these are the types of things that I really don't know. Like, what is this thing that I keep hearing about? What is this concept? Rid And then those will out act as like a bit of an outline for me to dive into learning. Because one thing that happens when you're learning anything, you could get quickly re Unengaged with learning.

Sometimes when you when you try to learn something, it's really easy to rid Get lost into the the amount of things that are coming into your brain, but you're not analyzing them and you're not using your own brainpower to Sort them or maybe evaluate them. So it's important to not just take notes, But to take thoughtful notes and to write down questions and write down things that are floating around in your brain. Because if there's nothing ready. Loading it around in your brain while you're learning something, then you're probably not that engaged with it. So it's important to at least have Those kind of ideas in mind while learning things take a lot of notes that way. And and, you know, modern solution is rid I I keep chat GPT open now for this type of thing, and I will ask it questions, you know, straight up rid language questions. And and I'm not sound like I'm going to trust always the exact output of this, but I will use it inside of my question asking types of things to make sure that the types of questions that I have aligned correctly with the concepts that I'm learning. And I'll even ask it things like, is this related to this? I have this concept in my brain. Is this related to this? And they can say, yes, that's related. Okay. Let me dive further into x, y, and z.

Next question here from Jess. John says, what are your thoughts on using display grid Simply to be able to use the gap property on elements inside, I find it much easier than fiddling with padding and margin. I'm guessing there might be layout Shift issues are something that I have not thought about. John, I don't think there's any layout shift issues, but it becomes a little bit harder rid micro control things that you might not anticipate. So GRIT is really good at being able to control things That you have a good understanding of how many there is inside of everything.

But, like, let's say you have a blog post. It might have an h one, then a paragraph, then an h two, then a paragraph, then a paragraph, then an h three, whatever. Rid. If you use gap to separate those spaces, the spaces are all going to be uniform.

And the only way to make them not uniform is to know which ones rid are going to be not uniform and and be able to program those out ahead of time. Right? So you kind of inherently still need Margins and paddings for some things because, let's face it, different typography, different headings and font sizes, They need more room to breathe than other things. You just having a single margin between everything as a gap might not always work. So I personally, rid I evaluated a lot of these techniques because when I was redoing the level up website, I had a lot of people say, I just use grid for ready. In fact, we talked a little bit about this in a syntax episode already.

And this is a strategy that is super viable, And it works.

But there are some caveats there, as we've mentioned, when you have things that you're not quite sure exactly what that needs to be, and it might not always be uniform.

So just keep that in mind. A cool thing about doing a lot of things in Grid is that you can use that neat little grid overlay trick Where you're essentially positioning 2 grid cells on top of each other and being able to do animations without using position absolute.

So there are, like, certainly some benefits to using Grid. And I gotta say, like, Grid and Gap are some of my, like, favorite APIs and CSS in general. So, this is a strategy that can work, But just know that when you get into nonstandard vertical layouts, you might need to really consider how you're using this, rid And you probably will have to still get into padding and margin in some regards. Yeah. I agree. I I think

if if you can use it And it works for what you want, then go for it. Simply using Gap in a lot of cases, especially now that ready. Flexbox has it. Is it fully supported in Flexbox? Yeah.

I've been using it, but I often am guilty of rid. Just using stuff because my audience is

I'm often guilty of that as well. We are we are both blessed with rid. Audiences that aren't going to be using old browsers. So Yeah.

Yeah. It's it's fully supported, has been for ready. Couple of years now. Yeah. We're in good shape. So Flexbox has Gap as well. And if that's the case, you want to just quickly align some items or you quickly just want to stretch everything