Thinking Ahead for Emergency UI When Building a Website

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get Here JS Scott Tolinski

and Wes Bos. Welcome to Syntax. This is the podcast with the tastiest web development treats out there. Today, we got a good one for you. We're gonna be talking about, like, emergency UI when building a website. And this JS sort of, like, come up in the last little while, and, I like to call this Node Day UI is when something happens to a business or a school or organization and they need to quickly get information across to their website visitors via a pop up or a banner or a special page on their website.

Is your website set up for something like that? And this is sort of bugging me because I've been going to all of these websites for schools and businesses and whatnot, and they all have these just awful like, clearly just threw in a div and and type some content, or they, like, have pnpm editable little block, and they do massive Times New Roman font with the, like, green background.

Because, like, when there's an emergency, we don't necessarily have time to wait for the web developer to to build something. And I think that there is, something to talk about here in terms of, like, what should you do for your websites to be prepared for putting across UI and being able to communicate effectively for anyone that that visits the websites and needs to get that information.

Interesting.

Let alone like, I'm saying snow day here because, like, we're all stressed out here, and and that that's sort of the basic thing. If a school is closed because there's too much snow, you need to get that information across to to everybody.

Wes, obviously, we're talking about what else is going on in the world right now. Yeah. I feel like you're just like, you're coining a term here with the Snow Node UI.

Like, that's that's a pretty cool idea. You could get a, like, a a book apart book about Snow Day UI. Snow Day UI. Yeah. I think ESLint interesting. What do they have in the south where they don't have Node days? Well, I suppose if there is a like, if if the snow hits the ground, everybody screeches to a halt over there, so you could still call it a snow day. That's true. Yeah. Atlanta gets, like, 1 centimeter, and it's just out of out of out of order. Yeah. Right.

Today, we're sponsored by 2 awesome Scott companies, Sanity and Sentry. We'll talk about them partway through the episode.

Cool.

So my name is Scott Tolinski. I don't know if, if, Wes, you introduced me or not. No. No. No. You didn't.

You didn't introduce your your cohost. Sorry about that. Well, we're all out of sorts here. I can't even see Wes because of the bandwidth. So, we we're like for the 1st time ever, we don't have headphone latency, but we're still talking over each other because we can't see when we're about to talk. So it's it's, it's super fun. We're we're we're switching it up. It's getting, getting kinda wild.

I did the the most interesting thing on Saturday night that I I kinda wanted to share on this. That would be some fun little quarantine thing.

So, you know, all the the kids are using Zoom nowadays? All the kids? All the young kids? Oh, yeah. The kids are in Zoom. Kids are in Zoom. Well, my parents are my dad's using Zoom for his work. My brother's using Zoom for his work. We set up I don't know if you've ever played these games. They're called the Jackbox Party Pack.

No. They're games that you play either on the computer, on a Nintendo Switch, or whatever, but everybody uses their phone as a controller.

And you hit a u website, you enter a four digit code, and then your phone becomes the controller where you answer the questions or you draw the things or you do that. It's fascinating. I we maybe we should talk about it and look into it, like, what their execution of it is because it's web tech meets video game tech meets, you know, all the stuff we're doing here.

It's so cool, but guess what we did because there's no online play or anything like that. We used my Cam Link that I use. It's this little USB thing that is HDMI for my camera. Yeah. I plugged my Nintendo Switch into the Cam Link via HDMI and then plugged that into my computer.

Then using, Zoom, I shared the screen with everybody.

So we played Jackbox Party Pack with my entire family via Zoom on my own personal Nintendo Switch. It was the coolest thing ever.

That's amazing. I felt like a wizard of this tech because everybody's using their own phone. It's all just hitting the web. You know, the the latency was, like, nonexistent. It was so cool because you could answer the questions in real time or whatever, and everybody's worked it, like, without a hitch. There was, like, no issues with it once in a while. So, yeah, it was really cool. That's next level. I like that a lot. Yeah. Yeah.

So I thought that that was a lot of fun.

Oh, man. Alright. So let's, jump on into it. So, it's a snow day or it's a global pandemic or whatever, and your client needs to relay information to its website visitor as quickly and as efficiently as possible, how do they do that? What do you need in in place on your website? So, first of all, at the very least, the the customer should be able to easily update their website and reflect this info, not to mention all of the stuff we're gonna talk about today. They shouldn't have to contact you as a web developer to add something, to to the website.

Show the snow day banner.

Turn it on or turn it off, and then you can type something into there, like a link or or an image or something like that. So let's just go through what are the the sort of pieces that you you need on this. At at the very basic, you need some sort of banner or a, a pop up that shows when when the user visits your the Node page. So this is something it may seem super simple, but, you start to think about, okay. Well, does that banner interfere with anything else that is currently on the page? Is it fixed, or is it, a static? Does it scroll with the website? Is it fixed on desktop? Is it not on on mobile? You Scott have to to to think about all of those things. Something that I saw quite a bit was, pop ups on websites that were not properly styled for mobile. So whether the images were stretched, somebody threw an image in there where the developer was not not thinking that they would put an image in there, horizontally scrolled, things like that. So just at the very basic and this probably will take you an extra hour to code into every website that you now make. But the ability to have a banner and or a pop up on the Node page that will obviously show to to the user when there is an emergency situation.

So I'm curious about this because we have some of these in our site, and I'm interested to hear some of your thoughts on this. So if these things, whether it's a pop up or I mean, if it's a pop up, it's obviously dismissible. But a banner can also be dismissible too with, like, an x just to get it out of there. Yeah. How do you personally store that information as to whether or not that users click that banner? Do you throw it in a cookie?

Yeah. That's a really good question because, like, you want to be able to dismiss it and for it not to come back every single time that the user visits the website, especially a pop up. That's super annoying. Yeah. That would be annoying. And I've certainly seen some of those in the situation that we're in right now. So I either use a cookie or local storage.

I was gonna recommend local storage, and, basically, you just have, like, a a setting either in the cookie or in local sergeant. It can just be a totally client side cookie. This doesn't need to be a, like, a secure cookie or server side cookie. And you just say, like, has it been opened or has it been closed? And you can set that thing to true.

And then before you show that thing, you you go ahead and check if that thing has been set. And I was gonna say local storage. Well, you sent me this thing the other day that local storage now only sticks around for 7 Node.

Yeah. So this is one part of the reason why I'm asking this question because I keep things like that in local storage. Personally, I keep, like, all sorts of little user settings in local storage, including, like, whether or not they clicked on a pop up. But it it got me thinking about, like, should I like, if the user has a user object, should I store some of those in the DB, or should I store some of those in cookies? Because there is some, like we'll link to this in the show notes. There was this post about local storage being removed after 7 days, but there was a lot of caveats to that. And it's only in Safari, by the way, which, of course, Safari. Come on. And their their idea is that it's, like, going to prevent trackers and things like that, which I get, and it's it's very important.

But the caveats around it are that I think you have to be coming from or the request has to be coming from a known tracker, like Facebook or something like that.

And as well, you have to not visit the site.

If you're visiting the site that, like, 7 days changes. 7 days regardless seems like too little to me, but I don't know. There there was a a lot of discussion and caveats about this. There was a I'll see if I can find it. There was a really great really great hacker news comment section where people who really dove into the specifics about it warp talking about the specifics, and, obviously, it's something you wanna familiarize yourself with a little bit.

Yeah. So does it have to come from from a known tracker? Because, like, I'm thinking myself, I store volume and playback rate and a few other user settings.

Right. Likewise. I store that in local storage.

So I I wasn't able to correctly identify exactly, like, all of the caveats here.

Somebody was saying that that was the case, and they're like, well, what if like, what what's the step there? Like, does Google like, if your site includes Google Analytics, does that put you on a target of known tracker? You know? Yeah. How do you make sure that you are clear from whatever JS going on here? And I do think it I I don't know. Maybe the team behind this has thought about this more than I have, but it does seem a little over the top. Yeah. I it's frustrating when we all this happens often where we get these new APIs. They're amazing, and then the marketers find a way to abuse it to track you. And then then we sort of have to claw back, like, battery status API that happened to that. There's a couple other. It's all just called fingerprinting.

These APIs can be used to track you across the web, and we sort of have to take them back, which sucks.

But I think for a pop up, once every 7 days, if you haven't visited the website, that's not the end of the world. I would probably do it in local storage just because the API for setting and getting stuff in local storage is much nicer than the cookie API. So, yeah, I would I would probably do that. Or if you use React Hooks,

just, drop one of those, use local storage, or use cookie hooks. And I have one of those for each where I can just do set, get cookie, or set, get local storage for my, site just with the use local storage. Yeah. It's very nice. Basically, the, use state API.

One other thing I was gonna say about this, like, dismissing things is that how do you know to show it again? Because, like, things are changing very quickly right now, and that information may be updated several times a week. So I was thinking, like, what I would probably do is, like, you you can't just dismiss it for, like, 4 days because, like, what if they dismiss it right before new information needs to be shown? So I was thinking, like, you need some sorta, like, unique identifier, based on the content that is in that thing. So Yeah. I was thinking maybe maybe you could instead of, like, you your dismiss cookie or your dismiss local storage could be based on a hash of the content in the alert, or maybe you could just, like, use the length, like, the number of characters that are in there. Like, that's not totally unique, but it's it's likely that if you update that pop up, then the length of the the alert will change, and then then then that's then it will then it will show again because it has changed since then. There's a whole bunch. JS long as it is unique and you can then reshow it when that information has changed.

Yeah. That's a problem I have not had to think about because No. Me neither. Yeah. None of my alerts or pop ups for those kind of things or anything that would stick around more than, like, here's an event that happened or my my banner isn't dismissible.

Yeah. So there's a lot of little problems here that you don't really think about until you really start to dive into it. And I guess that's a nice little microcosm of our entire industry JS everything is a much larger problem when you really start to dive into the specifics of, alright, how does this thing need to work? I mean I mean, we've all experienced that Wes your boss is like, just throw an alert on the site. And then when you start to think about it, you're like, Okay. Well, what are the parameters here that this needs to abide by?

Yeah. I I've done it actually once years ago on my own website where I was, like, showing random pop ups for different products or not pop ups, banners. And then if someone dismissed a certain product and they came and visited again, it would make sure that that product wouldn't be shown again, but, like, maybe another product would would be shown. So in that case, I had to use the product code in the dismiss cookie because there was multiple banners showing, and you had to dismiss each of them depending on when it showed up. Did you get feedback on that? Because I feel like that's the kind of thing people might get angry at.

No. It it was I I had a lot more logic in it in terms of, like, when it showed up, and it also wasn't, like, a super obnoxious one. I think it was a little banner at the bottom of a blog post or something like that. I'm very aware that this stuff is very obnoxious to developers, especially when you're using it for marketing and not for, like, emergency information.

Oh, totally. Yeah. Right. Yeah. There there is, like, nothing that will make me want to leave a site faster than like, oh, I just wanna wanna read this article and then pop up with a newsletter, and then, like, shaming you to be like, no. I don't want 10 great tips on how to, you know, clean and wipe their way. Wash your hands. Yeah. Right.

That's a really good point.

Other things you should be aware of is is good styling. This can go a long way.

When you give your your user a like, a WYSIWYG to add in text, most people just give them the WYSIWYG and they can go nuts on it. And what happens is that they get the default colors that come in the palette, and then they get, like, a default sans serif and serif font, which is really frustrating for your users to see. And I've seen this over and over again. So, go a little bit further and figure out how do you customize that WYSIWYG and give them the fonts and the colors that they Node, or just take them out entirely and use your CSS to to style those things. Yeah. Because when people are panicking, they're not thinking about brand. But some company you're looking at everything right now. The brand of the company really shows through in terms of how do they present themselves when they are getting across emergency information, and it's not just like a it doesn't look like a Microsoft Word doc.

Yeah. And let's be entirely honest here. You should be not giving the marketers or the content editors the ability to produce something that looks bad in the site. Absolutely.

I always really thought about that when I was doing sites for customers, clients, whatever. Not only limiting the tools that they see, like in Drupal and WordPress or whatever, hide the things that they shouldn't be touching, you know, in that aspect, But, also, just don't give them the opportunity to have it look bad. If you just throw a basic paragraph in a div or whatever or whatever, you know, through the WYSIWYG, it should look like the rest of your site. It should fit the design system.

So don't get too specific with everything everything all the TypeScript least provide some sort of really good default style so they can't mess it up. They can't get this in a way that is going to look bad for the for the brand overall.

Speaking of not messing it up, Scott Oh, yeah? What should you use to not mess up your bug reporting?

Your bug reporting?

Oh, sorry. Not.

Wes just did a That's a perfect Yeah.

So This is a Sanity spot, not Sanity. Yes.

Let let's try that again. Speaking of not messing it up, if you wanted to, like, maybe give your user some input fields for a title and a little WYSIWYG editor, how would you use that, Scott? How would I use that? Or what what what would you okay. This is awful. Can you please transition sponsor? Yes.

Yes. Yes.

You Node, so along that same lines is we really want to give our content editors a perfect place to just enter something, not mess it up, have exactly what they need there. And that's actually one of the places where Sanity shines, and I'm talking about Sanity Scott I o. Now Sanity is the, back end CMS that your your front end data needs. And one of the coolest things about Sanity is they allow you to customize their, admin interface, and it's all built with React. It's really fantastic, which means that you can do what I'm talking about here. You can make your content editors edit the source in a way that gives them no opportunities to mess it up. You give them exactly what they need. They can visualize it. They can see it. It's all react. It's all customizable.

You can get started in just minutes. It's unbelievable. So you're gonna check out Sanity atsanity.i0, and there's so much more here. There is so much more. There's this awesome GraphQL, aspect of the whole thing. But, basically, all you gotta know before you head over to Sanity right away is that it's an awesome place to host your back end data.

We get questions about these kind of services all the time. Insanity is a fantastic option. So you're going to want to head to Sanity.

Ioforward/syntax, and you will get an awesome supercharged free developer plan, which is a double usage.

So check it out, Sanity/ syntax.

Alright. Next little thing we've got here is what I like to call page alerts. So, you know, you you visit a website, and you get that little bubble of information.

Your contact was updated successfully or there was an error doing x, y, and z Yep. Or a warning, whatever. Generally, when I'm building a website, I will whether it's like a toaster that pops up from the bottom right hand corner or whether it's just a little alert that goes on top of an existing page, this is different than, like, a sitewide bar or banner because generally sometimes pages on your website need the ability to just have a little, like, hey.

Heads up. This is still a valid page, but please take into consideration x, y, and z. So Mhmm. Giving your user the ability to insert. What do you even call that? Like, an alert? Not like a pop up alert. We call it alert on level up. Our our component is an alert component component,

but the common way that I hear it is a Toast message.

Yeah. In in Android, specifically, I know Android development, they call those a Toast in the official SDK, but, I'm not exactly positive what their official official name JS. But I I've it's funny because I've had people correct me when I've called mine an alert, and then, like, it's a toast message. And so yeah. You know what it is?

What is it? They're Flash messages, which I don't like that. Well, Flash was, like, when you did everything server side Yeah. You could just ref you could flash something. And then on the next load of a page, then the user would see generally, you code something green, yellow, and red for the different situations. So, also, just, like, giving the user the ability to insert a div with the class of what oh, I'm just looking. Bootstrap calls them alerts, so that's fine. Yeah. It's fine. Yeah. It's it's such a common UI paradigm that everybody has. Just give your user the ability to insert those in because, like, you maybe maybe someone's viewing the hours of operation, and you you might have a little pop up say, hey. Heads up.

These hours are currently modified. Please call ahead to the store to make sure we're open. And that's just a good thing to have in general for things like holidays and whatnot as well. Yeah. Totally. We have those for all sorts of things,

and I keep talking about, like, custom hooks in our React setup. Right? I would recommend making these super easy to use. Like, we just have a single function, whether this is Redux or whatever. That's just send alert, send error, whatever. You pass in the string, make it nice and easy.

Next is going to be creating new pages. I know a lot of people right now have a lot of information to share. Specifically, I know our daycare sound like a tome of stuff. Here's what you need to know. Here's what we're doing. Here's what you you like anything that's permanent.

And it was gigantic.

It Wes it was just like, you know, basically, like, one of those pop up messages, and it should have been a a page, really. They should have just sent you to a blog post.

And so just like you should with any website you do, like, across the board, you should never put out a product that doesn't have the opportunity to have a single page with text information on it because your clients are going to want that just about at any given point for anything at any time. And if they go to create a new page in, let's say, WordPress or Drupal and it looks like total garbage, well, that's not a great look for you. So you want any sort of generic page to be a single page, nice text, nice defaults.

You need to think about that. And oftentimes with these things, they're just sent out via, like, an alert, like, click here to read more or whatever.

But you need to think about, well, if if this is some sort of long time important thing, how do they link it? How do they add it to the NAV? What do they do with this page? What did they do with this content? So you need to have a single pages ready to go. You need to have nice slugs.

A slug is a English sort of way of having the URL, so it's not just whatever .comforward/anid.

You want to have it be the page name kebab case store, something pertinent, something relevant.

So what do you do? You gotta have these things. Again, nice defaults, nice work so that they can just add it easy peasy. Because you mentioned very specifically that people aren't going to be thinking about the brand or whatever at this point. They're just gonna, how can we get this information up as fast as possible?

Totally. Business owners have enough. And I say business, but, I mean, like, it could be a school. It could be a a local organization. These people have enough on their plate. They're trying to figure out what's going on right now. The least of their worries is, does this look good, for our users? And I I would say that's on you as a web developer to make sure that whatever it is that they put out there looks good to the user JS well as things like, like, Scott said, the slug, because, like, you might have, like, a a radio announcement. Make sure you go to, whatever.comforward/snowday Node all the updates on on what's going on right Node, or you might post that out to Facebook. It's just a link. What about Google too? You Google,

you know, level up tour tutorials COVID nineteen or whatever just to see what their status or whatever is, and you want it to be able to be found easily.

Totally. Totally. You're right. Speaking of Google, one thing I was wondering is how do you tell Google that the hours of operations have changed? Because, you you go to Google Maps or Google Places or something like that, and they show the hours.

And sometimes they will even show you the hours on holidays, which I love.

Totally. You don't have to call them to see if they're open or not. And I was like, how does Google know that? And I I've dug into it, and there is a meta tags for, specifying hours of operation

for your business, which is pretty cool. Did you know about this? I didn't, but I it's it's funny because I would imagine most of the people who use those in some capacity might not even know about them either. Maybe they're just, like, adding a plug in that's, like, hours of operation plug in, and let me add them here. You know? I I think Google does a pretty good job at scraping

just markup.

And if you use, like, a UL or something like that, it's it's, I think, like, good is just clean markup.

Better is using the time tag with date time in it. I use I've been using the time tag a lot on, my own website that I've been working on recently because I wanna show Google when things have been updated and when things were written.

And then, like, I think best is just stick that data right into a meta tag, and we've linked here just to the spec for the meta tag. And you can you can list all the days you're open, all the times that you open, what times you close, things like that, which is pretty Sanity. And I'm assuming Google will ESLint those up. And I'm not sure how quickly they will change them on your business profile.

I'd be interested to see how that works.

Yeah. That's a nice little good, better, best you pulled together out of nowhere. Thank you. Yeah. It's just,

look at me. I'm just tearing things all day long.

So the next is going to be, how can we do this with, things that we've already like, you already have a hook into your audience somehow. Right? For instance, you have their email address or they have an account on your your site. We actually have the little user dashboard on Vercel up tutorials, and I do, like, little alert pop ups there for things like the newsletter or things like that or the latest series. And that could be a good way because they already have an account. They've already said that they want to hear from you in some sort of way. And along the same lines is probably the way that I've received most of the alerts so far from different companies, and that's be via email newsletters.

I've gotten just about a COVID nineteen or a Node day email. I'll I'll let's just say snow day from now on. I got a snow day email from just about every single company I ever signed up from a newsletter for, letting me know what their plans and thoughts on it were. You know, the ones I appreciated were the ones that I actually cared about it, and the ones that I didn't appreciate were the ones that were just like, hey. We're just thinking about it. And it's like, okay. But there's no important information. I'm already learning about this thing from everywhere else. Like, I don't need you to tell me what it is. Yeah. Like, my bank sent me a, we're here for you. But yeah. Right. Oh, okay. Yeah. You are. Yeah. Sure. You'll be here for me. Yeah. We bought a custom door for our bathroom, like, 6 years ago

from a company, and they emailed us. Like, they've never emailed us before, and they're like, we're here for you. Like, your custom door is here for me? Get out of here. You're not here for me.

Yeah. Don't do that.

Honestly, I I'm just looking at all of the stuff that's going on right now, and I'm like, man, I see people scrambling to get a website up, scrambling to get more of a online ordering setup.

I see people scrambling and posting out to Facebook because that's the only way they can possibly reach their audience. And I think, like, man, like, this thing is gonna cause people to sort of reevaluate and say, like, how do we, when things go awry, especially our business that could be potentially closing down if we don't get enough sales, how do we access our audience much more easily? And I think email newsletter is probably number 1 for that that type of thing. Don't lean on your your Facebook page in order to get information out, especially when it's super important.

Yeah. Totally.

What else? My my dad, some of my relatives own a, what's it called, a, a huge greenhouse.

And, my dad does a website for them, and they had to close. And they have 1,000 of dollars worth of flowers that are just sitting there, and they were allowed to do, online pickup where you can schedule, like, a a time. And he just reached out for some real quick, like, scheduling software for meetings. People were able to book themselves in for a spot and note what they wanted, and then they Scott show up. So that's probably not something that you need to code ahead of time, but just know that that is a possibility, and you could probably reach for some off the shelf scheduling software if you need to do it. Yeah. This was

I don't know what things have been like for you. We talked about this be a bit before we started recording, but in the snow day over here, they they started said, okay. Anybody who, you know, you can now do delivery for alcohol via bars and stuff, or I know some of the liquor stores around here were really scrambling to get their online pickup or ordering online process going. And I think it's important to maybe at least, if you are in the type of business or anything where you're shipping or dealing with actual goods or or creating a site like that might be a good idea for you as a developer to have some idea about the general landscape of things like that because they could email you and say, we need online ordering right now. What are you gonna do? And you're not gonna have a lot of time to think about that. I was just I was thinking about this specifically because the one that we ordered from has some software, and I had never heard of it before. And I'm trying to find it right Node. But it was basically just like an iframe that popped in from the left and everything iframed in. You added your catalog in there, and they took care of everything, and it was able to be dropped into an already existing website.

And it honestly just looked like they took any of their given pages and dropped an iframe into the main section. And then the cart was sort of like a iframe in over on the side, and it worked really super well. I know there's a like, Snipkart does this. There's a bunch of little solutions for this, but there's some that are way more managed.

And it would be a good idea for you to at least have the idea of some sort of the landscape of different services that could augment your service in the time of emergency.

Yeah. Absolutely. I had this with my church. They said obviously, all all churches closed down. Mhmm. And they said, we need to livestream.

We've never done this before. I Right. I build the website. OBS? And I was just like, oh, like, I'm I'm the tech guy, so I gotta figure this out now. And, I was like like, OBS. Yeah. That like that like, also, I couldn't, like, drive it from my cottage because it was Yeah. It's awful. So I can't run OBS from my cottage and upload all this, like, 4 k or whatever.

And so, like, we we got Zoom piping into YouTube, but then YouTube needed 24 hours before you could livestream. So, like, you had to wait for that. And then, like, you can't embed a livestream unless you have a 1,000 Oh my god. Subscribers and a linked ads. And I was like, oh, man. Like, this took us, like, probably, like, a week and a half just to get all this stuff set up properly. You think like, oh, yeah. Just go whip up a YouTube account and you're good to go. But because of, like, measures against people abusing the system, some of the stuff takes days or weeks before you're allowed to fully use all of the things all of the the features. So even if you wanna create a YouTube and a Vimeo account and have them empty or just upload a couple small things, just having an account that has some age to it will probably help you in the future. So, like, letting a client know you're building a website for them. Hey. I know that you don't might not necessarily need this, but should you need to do something really quickly, it's worth having this thing set up properly. I I saw that also with restaurants as well. They're scrambling to get their Uber Eats up and running. They never had Uber Eats, but now they need it. So it took them at least a week to get online with Uber Eats when they they probably lost a whole week's worth of takeout.

Yeah. Totally. I mean, that's a whole big bushel of work right there. The A bushel of work. It's a big bushel of work. But I I think this is an important key piece that you you touched on JS really that, like, when you're creating a project for something, it might be worthwhile to create all the accounts around that YouTube, Twitter, you know, all of those things. Not only just so they're locked up and you have them, but you have them in case you need them. They just exist. You don't have to use it just because it exists.

So I think it is important to at least own the accounts that you might need, not just the accounts that you do need. Yeah. Absolutely.

And let's talk about a service that you absolutely do need, and that is Sanity at Sentry Scott I o. Hey. I usually do the Sanity, Ed West. Do you wanna take a a shot at it since I did the Sanity ad?

I do.

Yeah. Century is all of the error and exception tracking that you need for your project. So, the way that works, you install this little snippet on your website, and then it will log any errors that happen. You can put them all in Node place, so you have your back end. You have your front end. It's kinda cool. They, the one of the examples they have is serverless.

I specifically was looking at, what is it, Cloudflare Workers.

But, like like, how they don't have logs. So if something goes wrong on your Cloudflare Worker, like, how do you know what happened? And their solution is, I'm not kidding, just use Sentry. So, you can integrate your Sentry into your serverless functions. So whatever goes wrong in your serverless function, you'd be able to get some more context as to to what happened. It's not necessarily a user went to the website and something happened. It could be there Wes an there was a four zero four error when you're expecting JSON to come back. And, in order to to get some more information about what happened there, Sentry will log all of that even in your serverless functions, which is pretty cool. Tons and tons of different features they have here. You can assign it different people. You can look at the breadcrumbs as to what happened leading up to that specific error, and you can integrate it with pretty much any language imaginable.

Go check it out. Century.i0.

Use the coupon code Sanity treat for 2 months free. Again, that's tasty treat, all lowercase, all one word. Thanks so much to Century for sponsoring.

Nice. We did a little, ad swap today. That was fun. Yeah. Switched it up. Switching it up. Yeah. So lastly is a deployment, which is a big thing because if you are running a site that is 100% front end code, maybe, you know, you built a Gatsby site and there's no back end and everything's modified through this or that or whatever, your clients are not going to know how to head to GitHub to edit a post. They're not going to know how to redeploy the thing. They're not going to know how to update anything.

So, you have to make sure that there is a process in case your users, your clients Node to add or update the site in any sort of way without your help.

You need to make sure that's in place, whether that is a CMS based solution, which is obviously the easiest one of those.

Even if it's I don't know what like, what kind of tips do you have for redeploying or having your clients deploy things that need to be added?

I think that the the kind of the scary thing is is that sometimes you build a website, and you just don't touch it for 3 or 4 years because it's working fine, especially with something like WordPress. The updates happen on the server, and the client's continuing to update content on it. But if you need to quick panic add a banner or something like that, then, like, you have to remember, okay. How do I deploy this thing? Where is it locally on my machine? How do I recompile all my CSS? So making good notes as to, like, how what's the deploy process for this? What are the credentials? All that good stuff. Because, like, when people are panicking that they need to update the website, that's not the time to figure out that your, this is actually this probably is the time that you'll figure it out is that your CSS doesn't compile anymore because it's on no. Like, I specifically I've got a Gulp 3 website, and it doesn't it just doesn't work with anything past Node 12 or node 10, something like that.

And every time I need to work on it, I have to revert back to an old version of Node in order to make it work. And it's frustrating when you wanna just get something up really quickly.

So maybe just making sure that you still know how to compile and deploy that thing nice and smoothly.

And maybe you have someplace where you have some sort of encrypted record of well, I mean, I guess, like, a good option for that would be, like, 1 password. Right? Like, we talked about in our password security things. 1 password allows you to store more than just, like, passwords. They allow to store notes and things like that. So maybe Node need to add DB credentials, DB locations, different things that you need to access quickly. Like, let's say, you pop open to MySQL and all of a sudden you're like, shoot. I have no idea what the username and password for this specific database was, and then you have to go try to figure it out, whatever. Make sure you have all that stuff. I used to keep it in an encrypted table, but I think 1 password might be a better place if I needed to store any of that data long term.

Yeah. Yeah. I agree.

Just having that that's a bad day if you forget how to how to deploy that thing. Bad day. Yeah.

Other things you need to know about, do any caches need need to be cleared? So if you are using something like a Cloudflare and you you deploy a a new banner on a website, you might have to log in to Cloudflare and clear the cache because that information needs to be seen immediately and not in 3 hours when that that cache clears. So just knowing how to clear the cache, any CSS that needs to be cache busted as well. So if you if you deploy a bunch of new CSS and that's why all of this inform all of the stuff we're talking about today, it's way better to think ahead for it. Because when it does happen, you don't have to worry about busting your cache in CSS or any of that. Busting your ass to bust your cache.

You could just dip you can just deploy the thing, or you don't even have to deploy it. You just have to type in the box in your in your editor, and that content will show up. So, obviously, do this stuff way ahead of time if you can. I think that everything that's gone down now, it will make us start to think about how do we add this stuff to our website. Even if it costs your client a little bit of extra money, you can you can very clearly explain to them, like, look. If something goes down, we need to be ready, and we can't you can't just call me up on the phone, and we'll we'll deploy it right away.

Right. Because we've sort of talked about the availability of companies and people scrambling.

But if every other company is scrambling to get these things up at this point, the developers who worked on these projects might be totally swamped as Wes. Again, giving you an argument for why you should be worrying about this now rather than, you know well, actually, right now Wes we have a snow day.

Yes. Absolutely.

Yeah. So that's all I got here. What you anything, anything additional?

No. I think that that's good. It's, probably one of our shorter episodes, but, pretty important stuff, I would say. Yeah. Maybe once all this blows over, go ahead and and start talking to your your clients about, like, how do we integrate the stuff into the website so we're a little bit better prepared for the next snow day. Yeah. Totally.

So next section of the show is the part where we talk about things that we like. Sick picks, things that are sick, picks that we have of things that we like. Do you have any sick picks ready to go? I do, actually.

This is more of a a sick tip or something like that. Woah.

Sick tip. So when we realized that our vacation was Vercel, this is by the time you're re listening, this is probably a month ago.

We said, oh, shoot.

We're we Yarn headed up to our cottage, and we don't have, like, a TV or anything up here. And if we're gonna be spending some serious time, we wanna be able to watch some TV. So, I jumped on Marketplace and figured out that, like, 5, 6 year old projectors are very, very affordable.

For a $100, we grabbed this, like, 5 year old, HD 10 80 p projector, and, it looks awesome. It just projects onto our wall. And I thought, like, wow. That that that was a way better call than than going and buying, like, a cheap TV or or something like that. We had to buy a little set of computer speakers for it and whatnot as well. But What about the bulbs? Did you buy a fresh bulb, or what's the bulb life on it? Yeah. That was that's the kind of the scary thing is that, like, a bulb can last about 25 100 hours or 2000 hours. So I asked the seller, can you look up how many hours are on the on the bulb? And so he did, and he said 5 105 100 hours, which so it leaves me with tons of time, on this one. So I think, like, if you want if you're looking for a little projector or something like that, maybe go look on, the used classifieds.

Once all of this blows over, don't go now. Don't be meeting random people in parking lots. Yeah. Don't do that. Yeah. Because I was I was so surprised that, like, the the value you get for your money. I remember projectors were 1,000 of dollars when I was a kid or even just when I was doing teaching in Vercel. Like, 5, 10 years ago, they were pretty expensive, but they've come down quite a bit.

My first job was a projection, technician. Yeah. So we used to have to replace the bulbs all the time because they were used, like, 8 hours a day, you know, in a day. So we were always replacing the bulbs in these projectors. I I went to a projector conference.

I went to a conference in in in Las Vegas for projectors, and I learned a lot about projectors. It was probably the latest, conference I've attended, not because projectors Yarn cool, but because I really had no want to be there. My boss was like, you need to produce 1 blog post a day, and you need to do video blogging back before that was really even a thing. So I don't know. It was it was fun.

It's kind of a unknown world to me. I went I dipped into it real quick. I just, like, went online to see how much is a bulb in case it does burn out, and it's about $150.

So more than the projector Scott itself if you have to replace the bulb, which could be a bit of a bummer. The bulbs are expensive,

and you have to be very careful when you install them, FYI.

Oh, you can't get the oils on your hands or or why? Yeah. You can't get hand oils on the bulb because the bulb gets super hot, and then that will destroy the bulb. So, yeah, pro tip.

That's like those old halogen

work lights. Just like that. Yeah. You can't touch them otherwise they explode. Yeah. You're exactly right. You don't want that. So, my sick pick is going to be another YouTube channel full of music for these Node day times. We've been putting this on the TV, and these things are just amazing.

Not always the most essentially I don't know. There's never any, like I don't wanna say nudity or anything because it's it it's definitely Scott, but there's definitely a lot of, like, you know, shirtless dudes surfing on the beach or or, you know, people getting a, you know, a tan or something. But these things are basically like they're basically like a screensaver that changes. This this guy has a YouTube channel here, mellow, groovy sounds, where he mixes together various funk, soul, and mellow music mixes from the eighties nineties seventies. And let me tell you, you've they are overlaid on essentially GIF length HD video of various beach scenes for a couple hours. Some of these are 2 and a half hours long, and they have various different ones, even, like, some Japanese city pop ones. But we've been listening very specifically to the Mellow Groove AOR West Coast mix number 3.

And all the time, we put this thing on now, and it's gotten to the point where we recognize and know the songs. And the songs are are sort of goofy, but it really transforms you into another place. You see these beach scenes. You see these, whatever, and and it's so good. Like, there there are just some of them when I like I had a hard time shutting this off the other night because, oh, man, I was like, I was about to shut it off, and then Midnight Rendezvous came on. And I was like, oh, no. It's Midnight Rendezvous. I can't shut this off. So it's so good. They're goofy, but, we've just been living on it. And we had to cancel our beach vacation.

So when you get this, like, beach scene going on in the background or something like that, it really does help a little bit transform you, move you to another place. And, I've been relying on it so much and absolutely really love it. So check this YouTube channel out. We've been, again, living on this.

Awesome. Shameless plugs. Go to westboss.comforward/courses to see a list of all of my JavaScript CSS courses. You wanna learn React or something like that? Check it on out. Use the code syntax for $10 off.

Yeah. Cool.

Head over to level up tutorials Scott com. And if you are not already a subscriber, you can sign up to become a pro for 50% off. Also, everything in the store right now is 50% off as well. Beautiful. Alright. Thanks so much for tuning in, and we will catch you on Monday.

Peace.

Peace.

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