Skip to main content
240

April 15th, 2020 × #webdev#UX#emergency preparedness

Thinking Ahead for Emergency UI When Building a Website

How to prepare your website and web development skills for emergency UI updates such as notices and banners

or
Topic 0 00:00

Transcript

Announcer

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Interesting.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

Cool.

Scott Tolinski

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

Topic 1 02:33

Difficulty communicating over video chat due to lack of visual cues

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 2 03:02

Using game consoles and video chat to play online games with family

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

So I thought that that was a lot of fun.

Wes Bos

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.

Wes Bos

Show the snow day banner.

Topic 3 05:28

Importance of styling banners properly for brands

Wes Bos

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.

Scott Tolinski

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?

Topic 4 06:48

Storing banner dismissal in cookies or local storage

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Topic 5 08:04

Local storage items removed after 7 days of no visits in Safari

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

Right. Likewise. I store that in local storage.

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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,

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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?

Topic 6 12:33

Complexity of designing robust dismissal and alerting logic

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

That's a really good point.

Wes Bos

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

Topic 7 14:27

Providing good styling defaults in CMS for non-technical users

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

Your bug reporting?

Wes Bos

Oh, sorry. Not.

Scott Tolinski

Wes just did a That's a perfect Yeah.

Wes Bos

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

Wes Bos

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.

Scott Tolinski

Yes. Yes.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 8 18:08

Sanity CMS allows customization of admin interface with React

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

So check it out, Sanity/ syntax.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

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?

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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.

Topic 9 21:07

Easily send alert messages with custom React hooks

Scott Tolinski

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.

Scott Tolinski

And it was gigantic.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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?

Wes Bos

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,

Scott Tolinski

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.

Topic 10 23:50

Scraping markup for business hours instead of meta tags

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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

Wes Bos

just markup.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

I'd be interested to see how that works.

Topic 11 25:29

Meta tags for specifying business hours

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

Yeah. Don't do that.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

Yeah. Totally.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Topic 12 30:12

Having awareness of available online order solutions

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 13 32:40

Owning accounts even if not actively used

Scott Tolinski

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?

Wes Bos

I do.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

Go check it out. Century.i0.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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?

Wes Bos

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.

Topic 14 35:25

Secure storage of credentials and notes for old projects

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

Yeah. Yeah. I agree.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Topic 15 38:14

Cache busting new assets during emergency updates

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

Yes. Absolutely.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

We said, oh, shoot.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

That's like those old halogen

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

Yeah. Cool.

Scott Tolinski

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.

Wes Bos

Peace.

Wes Bos

Peace.

Scott Tolinski

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.

Share