Thinking Ahead for Emergency UI When Building a Website

for a couple hours. Some of these are 2 and a half hours long, good. Like, there there are just some of them when I like I had a hard time shutting this off the other night because,

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.

that was really even a thing. So I don't know. It was it was fun.

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

Yeah. Cool.

I went to a conference in in in Las Vegas for projectors, and I learned a lot about projectors. It was Yes. Yes.

the bulbs in these projectors. I I went to a projector conference.

who worked on these projects might be totally swamped as Wes. Again,

We said, oh, shoot.

I think, like, if you want if you're looking for a little projector or something like that, maybe go look on, For a $100, we grabbed this, like, 5 year old,

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.

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.

Sick tip. So when we realized that our 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,

show.

you know, shirtless dudes surfing on the beach or or, you know, people getting a, It's so cool, but guess what we did because there's no online play or anything like that. We

Not always the most essentially

Head on over to syntax.fm

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.

the Mellow Groove AOR West Coast mix number 3.

nineties via Zoom And it was gigantic.

My first job was a projection,

on this one. So 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, 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.

Yes. Absolutely.

they are overlaid on essentially So we played

and figured out that, I was I was so surprised that, like, the the value you get for your money. I remember projectors were

like, 5, 6 year old projectors

very specifically to 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 aspect of the whole thing. But, basically, anything.

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

Yeah. That was that's the kind of the scary thing is that, like, a bulb can last about 25 and they need to quickly get information across to their website visitors go a little bit further and figure out how do you customize that WYSIWYG

whatever, and and it's so way that I hear it is a Toast message.

are very, very affordable.

Peace.

of companies and people scrambling.

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.

Peace.

HD 10 80 p projector, from a company, whatever. Generally, when I'm building a website, treat for 2 months free. Again, that's tasty treat, all lowercase, all one word. Thanks so much to Century for sponsoring.

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

That's like those old halogen that they Node, or just take them out entirely and use your CSS to to style those things. Yeah. Because

Scott

seventies. And let me tell you, you've And redeploying or having your clients deploy things that need to be added?

technician. Yeah. So we used to have to replace the bulbs all the time because they were used,

YouTube channel full of music for these Node day times. We've been putting this on the TV, and these things are just amazing.

Head over to level up tutorials

probably the latest, their,

it looks awesome. It just projects onto our wall. And I thought, like, wow. That that that was a way better 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.

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, But if every other company is scrambling to get these things up at this point, the developers Zoom, I shared the screen with everybody.

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 product code

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

HD video of various beach scenes

Right. Because we've sort of talked about the availability

funk, soul, and mellow music mixes from the eighties

via a pop up or a banner or a special page on their website.

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.

Because, like, when there's an emergency, we don't necessarily have time

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?

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, putting across UI and being able to communicate effectively to wait for the web developer to to build something. And I think that there is, Other things you need to know about, do any caches need need to be cleared?

for anyone that that visits the websites and needs to get that information.

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

like, green background.

something to talk about here in terms of, like, what should you do for your websites to be prepared for, What is it? They're Flash messages, which it's working fine, Get out of here. You're not here for me.

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

set up for something like that? And this is sort of bugging me because I've been going to all of these websites for

UI

Interesting.

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.

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

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

this is actually this probably is the time that you'll figure it out is that your CSS doesn't compile anymore because 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.

some sort of encrypted Next is going to be creating new pages. I know

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.

And maybe you have someplace Cool.

How do I recompile all my CSS? So making good notes as to, like, how what's the deploy process for this? and, 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

busting your cache in CSS or any of that. Busting your ass to bust your cache.

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

where you have 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,

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, it's worth having this thing set up properly. I I saw that also with restaurants as well. They're Your contact was updated successfully or there was an error doing x, y, and z Yep. Or a warning, a static? Does it scroll with the website? Is it fixed on desktop? Is it 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

record of mellow, groovy sounds, where he mixes together various option. So you're going to want to head to Sanity.

your,

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

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.

nice slugs.

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.

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

a single page with text information on it because

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.

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

nice work so that they can just add it easy peasy. Because you mentioned very specifically that people aren't going to be thinking

And so

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.

because, Go check it out. Century.i0.

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

about the brand or whatever at this point. They're just gonna, how can we get this information up as fast as possible?

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

So what do you do? You gotta have these things. Again, nice defaults,

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, the used classifieds.

like, you might have, like, a a radio announcement. Make sure you go to, whatever.comforward/snowday 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?

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,

Yeah. And let's be entirely honest here. You should be

customers, clients, whatever. Not only DB locations, you know, clean and wipe their way. Wash your hands. Yeah. Right.

You can get started in just minutes. It's unbelievable. So you're gonna check out Sanity atsanity.i0,

when people are panicking,

the marketers

sponsor? Yes.

it should look like the rest of your site. It should fit the design system.

I always really thought about that when I was doing sites for 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.

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

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

right away is that it's an awesome place to host your back end data.

GraphQL,

Scott I o. Now Sanity is the,

Oh, sorry. Not.

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.

or the content editors the ability to produce something that looks bad in the site. Absolutely.

back end CMS that your your front end data needs. And one of the coolest things about Sanity is they allow you to customize

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

sans serif and serif font, which is really frustrating 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 One other thing I was gonna say about this, like, dismissing

You Node, so along that same lines is we really want to give

look bad for the for the brand overall.

When you give your your user a like, a WYSIWYG to add in text, 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,

Wes just did a That's a perfect Yeah.

I did the the most interesting thing on Saturday night my sick pick is going to be another

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.

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.

that I I kinda wanted to share on this. That would be some fun little quarantine thing.

maybe someone's viewing the hours of operation, and you you might have a little pop up say,

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?

hey. Heads up.

an awesome supercharged GIF length

this is different than, like, a sitewide

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 give them the fonts and the colors

then the user would see generally, you code something green, yellow, and red Awesome. Shameless plugs. Go to westboss.comforward/courses and not in 3 hours when that that cache clears. So just knowing how to clear the cache, 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, 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.

SDK, And let's talk about a service that you absolutely 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,

for the different situations. So, also, what's it called, a, a huge greenhouse.

Ioforward/syntax, But the caveats around it are that

just, like, giving the user the ability bar or banner because generally sometimes pages on your website need the ability to 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,

So check it out, Sanity/ 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 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,

but the common

I will specifying 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.

Yeah. In in Android, specifically, I know Android development, they call those a Toast in the official site just with the use local storage. Yeah. It's very nice. Basically, the, use state API.

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 in order to to get some more information about what happened there, Sentry will log all of that even in your serverless functions,

and you will get

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.

just have a little, like, hey.

Heads up. This is still a valid page, but please take into consideration 100 hours or 2000 hours. So I asked the seller, can you look up how many hours are on the on the bulb?

syntax.

free developer plan, which is a double usage.

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.

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

Yeah. So does it have to come from from a known tracker? Because, like, I'm thinking myself, I store

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

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

changes. 7 days regardless seems like too little to me, but 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, 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.

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,

several times a week. So I was thinking, like, what I would probably do

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, We get questions about these kind of services all the time. Insanity is a fantastic all you gotta know before you head over to Sanity and I keep talking about, like, custom hooks in our React

really great hacker news comment section where people who really dove into the specifics about it warp talking about the specifics, So my name is Scott Tolinski. I don't know if, if, Wes, you introduced me or not. No. No. No. You didn't.

volume and playback rate and a few other user settings.

there is some, like we'll link to this in the show notes. There was this post about 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

my my banner isn't dismissible.

things is that how do you know Today, we're sponsored by 2 awesome Scott companies, Sanity and Sentry. We'll talk about them partway through the episode.

local storage being removed 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.

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 So

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.

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.

and, obviously, it's something you wanna familiarize yourself with a little bit.

that information may be updated especially with something like WordPress. The updates happen on the server,

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

Right. Likewise. I store that in local storage.

If you're visiting the site that, like, 7 days

to show it again? Because, like, things are changing very quickly right now, and some of my relatives own a, Use the coupon code Sanity

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

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 and there's so much more here. There is so much more. There's this awesome

that could be potentially closing down if we don't get enough sales, how do we access our audience

had to close. And they have We've never done this before. I Right. I build the website. OBS?

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

What else? My my dad, 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.

scrambling to get a website up, scrambling to get more of a online ordering setup.

you know, you can now do delivery

might be a good idea for you as a developer like, 8 hours a day, you know, in a day. So we were always replacing Jackbox Party Pack with my entire family

pickup where you can schedule, Show the snow day banner.

Yeah. Don't do that.

my dad does a website for them, and they

Yeah. Totally.

when things go awry, especially our business

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, So This is a Sanity spot, not Sanity. Yes.

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 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 it's not just like a it doesn't look like a Microsoft Word doc.

their online pickup or ordering online process

and they were allowed to do, online vacation was Vercel, this is by the time you're re listening, this is probably a month ago.

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.

So the next is going to be, how can we do this with,

for alcohol via bars and stuff, or I know some of the liquor stores around here were really scrambling to get My name is Scott.

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.

I see people

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

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,

I'm just looking at all of the stuff that's going on right now, and I'm like, man, 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

Yeah. That's a nice little good, better, best you pulled together out of nowhere. Thank you. Yeah. It's just, ready to go. You need to have

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

So, not giving

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, And so he did, and he said 5 105 100 hours, which so it leaves me with tons of time,

specific error, and you can integrate it with pretty much any language imaginable.

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

and then it will schools and businesses and whatnot, and they all have these just awful 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.

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.

I specifically was looking at,

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, and they have various different ones, even, like, some Japanese city pop ones. But we've been listening

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 they will change them on your business profile.

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

Even if it's I don't know what like, what kind of tips do you have for

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.

So I thought that that was a lot of fun.

first of all, at the very least, the the customer should be able to easily update their website and reflect this info,

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.

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

Then using,

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.

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

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.

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

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

on my own personal Nintendo Switch. It was the coolest thing ever.

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.

into the Cam Link via HDMI and then plugged that into my computer.

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

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 Your bug reporting?

Totally. Totally. You're right. Speaking of Google, one thing I was wondering is

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,

Better is using the time tag

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 And if you use, like, a UL or something like that, it's it's, I think, like, good is just clean markup.

just markup.

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.

hours of operation

you you go to Google Maps or Google Places or something like that, and they show the hours.

with date time in it. I use I've been using the time tag a lot on,

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

I'd be interested to see how that works.

horizontally

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.

that were not properly styled for mobile. So whether the images were stretched, 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

pop ups on websites

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,

not on on mobile? You Scott have to to to think about all of those things. Something that I saw quite a bit was, And then before you show that thing, you you go ahead and check

So I'm curious about this because Yeah. So that's all I got here. What you anything, anything additional?

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,

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 1,000 of dollars worth of flowers that are just sitting there,

somebody threw an image in there where the developer was not not thinking that they would put an image in there, 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.

scrolled,

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

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

I either use a cookie or local storage.

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.

store that information as to whether or not that users click that banner? Do you throw it in a cookie?

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.

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 I see people scrambling and posting out to Facebook because that's the only way they can possibly Is your website 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,

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

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

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.

banners. And then if someone dismissed a certain product

That's a really good point.

and they came and visited again,

No. It it was 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,

Yeah. I I've done it actually once years ago on my own website where I was, like, showing

microcosm of our entire industry JS everything is a much larger problem when you really start to dive into the specifics of, 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.

random pop ups for different products or not pop ups, Honestly, I

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.

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?

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 and the client's continuing to update content on it. But if you need to quick panic add a banner or something like that,

Yeah. Absolutely. I had this with my church. They said obviously, all all churches closed down. Mhmm. And they said, how do you tell Google that the hours of operations have changed? Because, for your users to see. And I've seen this over and over again. So,

fully use all of the things Turn it on or turn it off, and then you can type something into there, like a link or or an image or something 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? 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

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.

And I was just like, oh,

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.

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 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 Yeah. Yeah. I agree.

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.

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,

some of the stuff takes days or weeks before you're allowed to And,

we need to livestream.

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