Logging × Blogging × Testing × Freelancing

Hey. I'm doing good. I got some yard work in. Feeling really nice to be outside. You know? I I found out that half the things in my front landscaping were weeds that were just really they were like a lot of little tree sprouts and stuff like that. When we moved in to this house, it was clear at some point the previous owners had paid for professional landscaping. Right? So the landscaping at one point was very profesh.

But I do not think the previous owner ever got his hands dirty whatsoever because there's somebody, like, the trees were every single tree on this property was completely overgrown. Every shrub, everything. It's the exact same problem at our house too. Just like Yeah. What were they doing? The amount of stuff that Node cut out of here? Yeah. Kinda keep it on top of it. This guy had he he had probably no Sanity skills whatsoever because there's so many, like, little maintenance things that he did not do clearly. So, yeah. No. It felt good to clean up that stuff. I spent all day, Wes, pulling maybe hundreds and hundreds and hundreds of these little little tiny things out of our garden. Node it's incredible. It it looks like I could not even

I lived so close to Detroit for so long. I went to a lot of break dancing battles in Detroit.

We spent a lot of time in Detroit. And, how, there's a Danny Brown song where he says house field field field field house. That's where I'm from or something to that degree. And it's there there was, like, parts of Detroit that are certainly like that. Detroit has some very lovely parts as well. But, yeah, it is it nature takes

where the house is too Bos. Yeah.

Let's talk about real quick. If if you want answers to any of the questions that you have in your code base, check out Sentry. Sentry gives you the answers for performance, errors, issues, anything that you could possibly have. It even gives you, answers for your metrics and user feedback if your customers wanna give you feedback on your site. Just about anything you could possibly want to know, Century's got your back. So head on over to century.ioforward/ syntax. Sign up and get 2 months for free. This show is brought to you by Sanity, and they answer all of our tough questions whenever we have questions about our code Bos. And you know we do. So shout out to Sentry for that.

Alright. 1st question, Roger Pnpm. I think it's worthy of an entire show, but I'd like to know more about logging from a site.

Console dot log is clearly a hot mess with Vercel, and I'm sure there is a better way to go. Help a nerd brother, please. Yeah. Yeah. It is weird. I found the logs on Vercel to be extremely difficult to navigate about. And it's not I don't know if it's it's definitely a skill issue on my part.

But logging is one of those things that I I've always liked to set up a really proper logging solution.

And I set it up, and then I very rarely use it.

It's never been one of those things that I've I've really, like, really decided to go hard in. But I have used, as far as logs go, I mostly used PaperTrail.

PaperTrail JS a really, really cool product for storing your logs. It's cloud hosted. The the UI is fine. You can aggregate and search through your logs and find the ones that you need specifically.

But at the end of the day, I you know, logging can only get you so Yarn. And I think you'll probably want more. If you're doing logging for, like, errors and stuff like that, I I would probably not really rely on that. I would go for something and and forgive me for pitching our own product.

But I would go for something like Century that gives you a much more organized throwing a proper error.

Yeah. Throwing a proper error and really categorizing it. So if you're talking about logging for errors, I would much rather use something like Sanity. If you if you think this is too silly, you can ignore this recommendation. But we used it long before Sentry took over syntax.

So yeah. I I don't know. I've used paper trail again. Logging is one of those things that could be really helpful. Like, let's say you have a cron job. You wanna make sure that cron job is executing at a timely time you know, executing at the correct time. You can tag your logs and all sorts of things like that.

So, yes, logging in production can be a hot mess. I don't know if I'd necessarily recommend relying on it for errors, but for general logging, yeah, toss a service like PaperTrail on there or I know there's a few others. Wes, have you used any of these services?

pretty good. It's like it's live. You can refresh. You can filter. You can search. I find it I have a hard time finding what I'm looking for typically. Like, if I'm just going for, hey. I'm using the application. Give me a log for the current, like, session that's coming in. I found it to be easier. And so, like, render Render as a hosting platform. You click logs. There JS your logs. No more clicks. Right? I feel like with the Vercel one, you gotta do so many clicks to get to where you wanna go.

Yeah. I I totally feel that.

Blocking is, like, in my mind, a long term play. You know? You're not writing a blog to get dev famous overnight or to have a 1000000000 hits or traffic on your thing. You're building it as a long term play. People will find your stuff as they need it. And if they find your post and they like it, they'll come back to your site. I there I can't tell you how many times that a Wes Bos blog post JS Save My Bacon or, get this, just while we were researching this episode, I came across a blog post from Dave Rupert, and it, like, answered every single question I could possibly have. We'll talk about the thing that it was on later in this episode. I'll share a link to it. But I was just like, thank you, Dave. Like, thank you so much for being the person to put this down because there was nothing else good on this particular topic, and it was taken from such an unapproachable way. So there there's just so many times when I do. I Google things, and the best answer is coming from a blog. You might be wondering about AI.

Why not just use AI to ask ask these questions? Well, you gotta kinda know the answer if you're using AI because AI could just tell you stuff. So if you don't know at least the answer ahead of time, you you might not be getting, you know, all of the information. So blogs, I think blogs are still very valuable.

I still see endless reason to host your own blog on your own website.

Just do it whenever you want and, have it be a long term play. Don't expect success overnight with whatever success looks like for you in that regard.

Next question from Nick Hebert.

Hi, Wes and Scott. Big fan of the show. Was wondering about your thoughts on adding carbon neutral indicates on websites such as Vercel, GreenWeb Foundation, and Website Carbon Calculator.

I have never heard of either of these, the GreenWeb Foundation or website carbon.com.

These are it's cool.

I'm I'm about this stuff. So, you know, the web, it's easy to lose track of of this kind of, like, environmental impact or energy usage of the things that you're doing.

But, dang, this really shows you, like, straight up, globally, the average web page produces approximately 0.8 grams of c o two equivalent per page view.

Wow. A web for a website with 10,000 monthly page views, that's a 102 kilograms of CO 2 e per year.

Yeah.

Hey. I think this is great. I I I I would like to see more emphasis on this kind of stuff. But, again, apparently, I haven't been seeking it out. So, man, I'm I'm gonna dive into some of these services a little bit more. But, Nick, I think this is sick, and I think it's a a really cool thing. So thank you for bringing this to my attention.

Yeah. Like, what actually makes an impact? Well, Adrian, the website carbon calculator and syntax.fm gets a score of a b, which is cleaner than 78%

Yeah. Yeah. It feels a bit over my head, but at the same point, I think it's really neat. Yeah. Like, I've this freaking mammoth of an AI just used 14 kiloflops

I think there is a kind of, like, a, like, a false narrative there where people say, it's it's not it's about the private jets, not the plastic straws or whatever. But to me, it's like, hey. You know what? If I if I if I believe in these things as being, like, a positive thing, then like, hey. I'm putting my money where my mouth is, and I'm gonna do the things in the right way. But it's hard to know about all the right ways to do things because there's so much. Right? So yeah. I I get what you're saying. I I just think I think it's it's good to do your part too even if your part is a fraction of a fraction of a part. I'm just hold on. We're gonna see what Wes gets on the the carbon. Need more dark mode. It's what it's gonna tell you. B.

My personal website gets an a plus.

It's a static svelte svelte kit site. So shout out to static svelte kit sites. A plus. Alright.

Visit mine instead. I give you a plus. Yeah.

Tolinski running on Cloudflare pages.

So a plus for Cloudflare Pages.

It could also be that there JS nothing on my website. Very true.

There's literally nothing on my website. Yeah. I think the speaking and appearance is the only one that loads anything. Hold on. Your work page, you get 98%.

Yeah. It it depends on what your goals are. If your goal is to knock something out really quick, you can use the Vercel AI package. But if your goal is to maybe understand this stuff a little bit more and build some actual skills around AI coding. If, like, that is your goal to say, hey. I wanna get better at coding AI things, then you you're much better off, like Wes said, writing your own scripts using, you know, what you want to use specifically.

And I think you'll at least understand it all a little bit better rather than yeah. The the other thing I'll say with these packages that wrap

Yes. Yeah. Absolutely.

Alright. Next question from MCB.

What any idea what the deal with the hyphens CSS property? It seems like it never works for me. Not sure if it has to do with the fonts I'm using or if it's just a buggy property.

Wes, have you ever heard of hyphens as a CSS property?

I know. It just goes to show you, we spend all our days looking at this stuff, and I've never heard of the hyphens CSS property. So let me tell you about hyphens. The hyphen CSS property, basically, it specifies how words should be hyphenated when they wrap. If you were to specify hyphens, colon, none, it will not break your word. It it like, a long word inside of a container will end up overflowing the container.

Hyphens Scott manual will break, but it will break where you've put an ampersand, signifier in here. I'll try to get some some code examples. Ampersand hyphen or ampersand shy? What is ampersand

I think yeah. I know. Right? This is such what I would say felt like I went into, like, a alternate dimension looking at this. So I've never heard of any of this.

Shy a shy ampersand is an invisible or soft hyphen hyphen.

This character is not rendered visibly.

Instead, it marks a place where your browser should break the word if hyphenation is necessary.

So a shy doesn't actually show the hyphen.

So that might be one of the reasons why it's not showing.

The hard hyphen, we had the soft hyphen. Now we have the hard hyphen. The hard hyphen character indicates a visible line break opportunity.

Even if the line is not actually broken at that point, the hyphen is still rendered. So the hyphen will show up no matter what with a hard hyphen.

This stuff is wild, man. I never seen any of this. So, you know, hyphen hyphens colon manual, I believe you need this hyphen property in there to get it working. Hyphens auto will just throw a hyphen wherever it's appropriate whenever a word breaks.

Man, why is this not working? You know what? Since I just heard about this property, I do not know.

But take a big look at that browser compatibility chart. That browser compatibility chart, be looking like a, Connect 4 board. It's crazy.

anywhere? Flow wrap anywhere? Yes.

Overflow wrap. Overflow hyphen wrap, and then the value we had was anywhere. Other property values are break warp or normal.

This was also just a totally new to me property. So, yeah,

showing us that one. If you want to follow-up with this question, I would love to see your code where this isn't working, because, yeah, I wanna see it.

Yeah. Word. Alright. Next question from Shivan.

Can you guys please go over writing tests? This can be from unit tests with v test, for example, all the way to integration Wes and end to end testing with Playwright, for example. Yeah. I think we could do a whole show on this, but let's give you the basics.

Unit testing is testing 1 specific unit of your code. Oftentimes, that's a function, and you're just testing that singular function. The function adds two numbers. You write some tests that say, hey. I expect the value if if I'm doubling the number, I expect if I put 2 into this function, that 4 will come back. I expect if I put 6 into this function, that 12 will come back.

And so that is a unit test. And that's one of the reasons why, functional programming can be nice because when your Node a bunch of functions, it's really easy to unit test a whole bunch of functions, especially these pure functions.

Right? So unit testing is testing 1 individual piece of your code. There is a test driven development thing that people used to talk about a lot more than they talk about it Node, where you write your tests, then you write the code. I don't know if anybody's actually doing that. That's so much work. But, typically, you're writing these tests in Node using one of several packages, whether that's Mocha or Chai, v Wes. There's a lot here. So we I'm not gonna get too deep into that stuff because, there's a lot here, especially in the modern way. And we have native node testing now as well built into node. Yeah. I'm a fan of that approach when I'm like like, I had to write a

Yeah. Totally. So that is unit testing really quickly. Again, we should do and I in fact, before this question even came up, I I was putting together a show on testing because I think it's, you Node, there's a lot here, and things have changed enough since the last time we talked about testing.

Integration testing is how things work together in a system. Right? You have 2 or 3 things. I mean, that's just an arbitrary number. You have a few things. You have things that work together. You're testing to make sure that when I put into this into the system, this pops out of the system. Right? It it's a little bit more of testing how so you made sure that all of your individual units work.

Now you're making sure that all of your big units work.

So first, we're testing the little bitty units, and then we're testing the big units as a system.

Now for my money, the only testing that I invest any time into and granted I'm just writing websites and web apps here. I'm not writing major application code or any things like that. So your mileage will vary here. I think many people wanna get way more into unit testing and integration testing than me.

But as a straight up web app developer, for my money, end to end testing, biggest bang for buck. Because the way end to end testing works for web development stuff is it loads up your site in a real browser.

And then using either Playwright or Cypress, it uses a language to essentially interact.

You can fire click events. You can navigate. So, like, if I wanna navigate to a page, I'm not saying in JavaScript, hey. Navigate to this page. I'm saying, go to this page and then click on the link, and then make sure that link works. Right? And then check to see if the heading's there, and then click play on the on the audio player. Then while the audio player's playing, you can check to see if the the, actual time stamp is updating and things like that. So end to end testing is running your application as users will run it. And for me, that is if you're investing Sanity time, that's the the best way you can get a lot out of a little bit of time. What's cool about Playwright and Cypress is they both have test recorders.

So they'll open up your website, and you can click through and enter things into text boxes, and it records the test. It writes the test for you. So it's, those things, it's just it's endlessly useful. I always make, like, a site tour to make sure all my pages and, common things are working like how I'd expect.

Yeah. You also get really tired. So so that's another reason why you don't obsess over every little thing. Yeah. I I think the biggest thing that you don't realize for the first, I mean, may you probably realize this, but maybe some of you don't. The 1st few months, you're doing a lot of sitting on the couch with access to only 1 or no hands because you're holding the baby. And even if that baby is sleeping, like, it's not like you're getting any work done when that baby is is sleeping in your arms because you just you can't you can't type with 2 hands while you're holding a baby. Not gonna work. So I think, like Wes said, listen to podcasts.

Subscribe to YouTube. This would be a good time to invest in your ambient learning, putting things on, having stuff get into your brain rather than your getting your hands dirty kind of learning.

Yeah. I I think that's that's my big advice. And, gotta say Drew Hill, that's a pretty sweet name if that's your real name, Drew. Yeah. I wonder if people ever make Cisco or Thong Song jokes to Drew. That'd be very funny.

Man, I I just looked up the members of Drew Hill, by the way, because the only one I know is Cisco. I feel like everybody knows Cisco. They got some pretty Node, the entity. That's another guy in Drew Hill. Nokia,

Enter the Drew. Yeah. Everybody that's it. I I've seen, like, a 1000000000 Drew Hill album covers, but I've only heard the Thong song. So, shout out to Drew Hill.

Next question from Matthias.

Hi, Wes and Scott. Great show, long time listener, first time caller.

Question, do you have experience freelancing as a web developer? How would you start now? I have a ton of experience working for company startups and agencies agencies in the Wes.

But I would like to start on my own directly working with clients. But I'm in South America. That could be an issue. Yes. You may have, very real trouble getting clients that are not near you to do the work.

But I think that's just an opportunity to maybe flex a little bit more online in terms of your networking skills and things like that.

Because let's face it. Somebody's looking for a developer.

You know, they might hire out of country for that developer. That's totally common. But how would they find you is really the biggest thing. So, Matthias, you can definitely do this. You gotta work on your findability. You gotta get listed into things. You gotta put work up online.

A buddy of mine ended up getting his 1st major job just because he was dribble famous. He was dribble famous, and then all of a sudden, companies were knocking down his door to pick him up. And he he got some pretty sweet jobs out of that. So I think this is an opportunity to step up your web presence in a way that can get people to know that you're out there looking for work, but also make them aware of you.

Online Upwork and stuff is kind of a shoot to the bottom.

Alright. Let me let me check you right there. It's Neumann. If that's how you say it, Neumann. I've seen Seinfeld before. I know how to spell Neumann. Gosh. I'm so mad at you.

Neumann, Neumann Node for making the best microphones in the whole world. The Neumann m t 48 is a what do you call it? What do you call yours? A audio interface? Yeah.

Yes. The Neumann m t 48 is that, but also a computer. So there's a little computer inside of this thing, and onboard in this computer is digital signal processing. There's a compressor. There's a gate. There's preamps because before I had a hardware compressor and gate. I had a physical hardware preamp. I had all these things sitting on my Wes. And this thing does it all. But it does it all with presets and with digital. Like, there's 32 tracks out on this thing. You could do 32 individual tracks out. I can apply effects individually to a channel, and then I'll put that to a 2nd or separate channel in my computer. That means I could record, Wes, a track with a different EQ and a track with a different EQ, record those as 2 separate pnpm, and then decide later or potentially, you know, have 1 clean for the audio editor and maybe one that that doesn't need additional help or anything like that. Either way, this thing is dope. It's very expensive. But as the fact that I spend most of my time talking into a microphone on the computer, having a really good, highest quality preamps, highest quality software is great. Not to mention, when I had the podcast from my parents' house in Michigan, It's it's this little itty bitty thing, and I can take it with me. And it has all my presets, and it has all my settings.

With the hardware that we used to have, the DBX two eighty six, I believe it. It's huge. That thing, it's a big old rack thing. I can't take that with me. It's okay. Then my gate and compressor's out. Okay? My preampture, I can bring that. But this is is definitely travel, portable, comes in a nice little case, and it's cool. I think the coolest thing about it though JS the fact that we're in a situation here where computers have gotten fast enough and small enough that you can put onboard digital signal processing into things like a audio interface.

And to even go further with that, my homie, Devin of Good Hertz, they launched a guitar pedal.

And this guitar pedal JS actually really cool. You should give it a look because it replicates the sound streaming music on a 56 k modem.

That's, like, kind of, like, the the vibe that this thing is trying to replicate.

But this is not just a guitar pedal the way that typical guitar pedals are. There JS a little computer in there running actual software on it. So,

And Yeah. It's amazing. That A fancier thing that they got real time auto tune and stuff. You ever Yeah.

Yeah. Well, 1, it takes all of that stress off of my my computer JS is, like, really the biggest one.

In reality, the software on this thing is just really good. So if I was let's say, I was buying audio VST plug ins.

And many of these VST plug ins you're applying after the fact and then, you know, per potentially, like, Node, like, rendering it out, but whatever. You're you're processing it ahead of time.

Those plug ins would cost more than this thing. So the the software that you get on it is really good for the hardware that comes with it. So, yeah, it it's an expensive piece of hardware. But the software itself, if you've ever tried looking at, like, waves VST plug ins Yeah. Yeah. That that'll shoot your head right out or your hat right off your head. They, they're expensive.

Totally.

And there's a part 2. Stuart from the UK, this is a different, question asker, but it's related. Thanks so much for the awesome podcast. I just heard you were having GoodHertz devs on. If you haven't already recorded, can you please ask them if they have any recommendations for UI libraries for audio synth plug ins, skeuomorphism, visually UI making their analog counterparts lives on in audio plug ins, but I haven't managed to find any libraries which emulate knob switches you find on audio hardware. Yeah.

Stewart, that's a good one. I I will ask them that question when we get them on. Devin, he's a hard guy to, schedule with, but he knows. He has the ESLint. So I'll I'll bug him a little bit. We'll get him on the show. I'll ask him about their UI development. They do it all on their own, and it's all web tech, SVGs, HTML, all that stuff. So, we'll get them on and ask that question. If you're interested a little bit more about that, you can hit us up on the YouTube. And then we haven't recorded it yet, so I'll have plenty of questions to ask, for the Good Hurts folks. Okay. Next question here from Ollie Williams.

What do you think about CSS module scripts? It seems they were added to the platform mostly to improve a styling story for Shadow DOM. Would you use them outside of that? Man, Wes, I heard of CSS modules.

And CSS modules JS I had known them before this question came in, was simply just you import the CSS and then you can use CSS Scott class name or whatever it was and then apply that to your HTML to get that class name and CSS properties applied there. I don't like that. But this is not really that. It's it's more of a means of wrangling in style sheets and keeping style sheets separate specifically for web components. But you can use it anywhere. You can use it for the DOM DOM. You can use it for the Shadow DOM. Gives you all sorts of things like deduplication, a consistent order of evaluation.

Again, this is where that Dave Rupert blog post comes in. So Dave blogged about this in 2021, and I thought it was pretty interesting.

Definitely not something that I've used. It feels like, like you mentioned, Ollie, that this feels like a good fit for tangling or untangling kind of shadow dom styles. And Dave actually makes a really good point for exactly that in this blog post.

So I would say, yes, you're probably I think this is probably for web components folks first and foremost.

It doesn't solve any issues I have in particular because I'm using a bundler Wes if I do import, you know, styles Scott CSS in my Vite application, And Vite just does it for me. So so this isn't something that I'm necessarily reaching for myself. Maybe at some point, the tools that use these things are gonna just do all this for me again.

Or maybe they already are, and I'm not even knowing it. I'd never heard of this being referred to as CSS module scripts, but it's interesting stuff.

across the board? Your, your instinct to say anything about scope was dead on because Dave also says in his blog post, maybe one day this problem goes away. Miriam Suzanne has a proposal and explainer for the new CSS feature called scope. So maybe it's not even something we end up getting ESLint, and scope just kind of takes over what you would even do for scoping there. Because, ultimately, the problem of shadow styling in CSS JS, like, how do you encapsulate CSS to 1 component without leaking, but at the same time, give people the flexibility and everything? So, yeah, maybe perhaps the answer at the end of the day is just scope takes over.

Yeah. You know what? I've been listening to a lot of new podcasts. Sometimes I just go on Pocket Casts, and I click the discover button, and I just, like, look for some things and, you know, see what kind of catches my eye. Did you see that we were featured? And who was it? Plexus? On Plex. Yeah. Plexus picks? Shout out to Plex or the Plex devs or whoever, listen to this show. That's pretty sweet. Yeah. So thank you for that. I've been listening to some some new podcasts, and I'll I'll give you Node here that I really enjoy. There's a a podcast called Deep Cover, the Nameless Man, but it it's just called Deep Cover.

This is season 4 of Deep Cover. I've been listening to this since season 1. And the I the whole concept of this show is not necessarily somebody undercover because that it can be somebody undercover, but it's also just like identity.

So people taking on false identities. So, like, the 1st season is about, basically, it's about FBI agents going undercover to to track down the mob. But, season 4 is really interesting here because they don't always just go straight to, you know, undercover cops kind of thing.

Season 4 is all about there's a murder, and they just heard a rumor of a murder. They don't even have a victim.

All they have is a rumor of a murder, and they're starting there trying to track down who was murdered, where were they murdered, all that stuff. And it's all about, trying to find this person's identity so that they can then charge the the murderer.

It it's very funny. It's like they they know there is a guy who's a murderer, but they do not know who he killed, when or where or how or anything.

I do like board games. Yeah. We play, a lot of board games with our kids. Not like the fancy ones, but, like, our kids are getting really into to board games. I grew up playing a lot of cards. So cards may be more than, board games. But

like, drugs, and this person is from Colombia. And, like, you have put all those clues together. Just the data connection and the data and the infer, everything. Wes, I'm surprised to hear you don't like board games, and it makes it frustrating that when we played our dumpster fire, Century game. Century made a game called Dumpster Fire, I believe. Oh, yeah.

Yeah. When we played that,

Yeah. Man, I gotta get one of these for we got a pressure washer, and I was like, I'm gonna pressure wash this whole, driveway. And then I start to do these little to drink. I'm like, this is going to take me 2 centuries.

Yeah. Man, one thing I pressure wash that many people might not think about, shoes. I pressure wash, especially, like, my lawn mowing shoes and stuff like that. Not on your feet, though. Don't do that. Not on my feet. No. That would be really painful.

Yeah. I I did my shoes a couple times as well. It's amazing how how clean they come. Yeah. Especially the you got these junky shoes that you've been mowing the lawn in for, like, 4 Yarn. Yeah. And it made them look brand stinking new. So, yeah, shout out to pressure washers. They rule.

Cool.

Sick.