Good afternoon. Good morning and good evening and welcome to listening to this. I know you’re probably not listening to it on the road or on your journey to work, but we don’t know what time of day it is. We don’t have any idea what kind of aid is for you. Folks, you are listening to the drunken UX podcast and I am your host, Michael Fienen.

This week on the drunken UX podcast. This is episode number 61. And we are talking about creating efficient emergency websites. And we are going to be talking emergencies more in the sense of like something that could take your site down, kind of situation sort of DRP disaster recovery type stuff.

Yeah. Every single unemployment site in the nation right now or Yep, the we’ve used the phrases before you know, the Slashdot effect or the hug of death. Yeah, the Reddit hunter of death. Uh, let’s see. But before we do that, I do want to encourage you to check us out on Twitter or Facebook that is at slash drunk in UX or on Instagram at slash drunken UX podcast. I got some fresh Mimi’s getting ready to come to you on Instagram. Oh my god, you’re gonna be head over heels there and

I’ve worked real hard on curating this next batch. Also, if you want to chat with us, make sure to go by Duncan ux.com slash discord and you can jump into our discord channel with us. We have moved from slack to discord if you use the old link from an old show, that will still work. It will just send you the discord instead of slack so don’t be confused. If you You’re expecting one over the other. What What have you got for your environment this evening? I

pretty otherwise straight basically.

know? Yeah, that’s fair. Yeah. How long do they age that?

isn’t I mean mezcal in general. I think it’s is it three years? I don’t I genuinely don’t know off the top of my head. I know. I think there is like a. a window that they do it though.

I am drinking something very different for me actually. It’s a high West distillery burger rye,

Yeah, it’s a bourbon rye straight whiskey blend. It comes out of a distillery in Park City, Utah. So it’s it’s not necessarily easy to find at the bottle is beautiful. The bottle is sort of this very, very light blue. And it’s got that show me old I don’t know if you can really see it through the webcam, but it’s that sort of old you see the bubbly? Yeah, it’s got that sort of old style glass look to it. Like an old medicine bottle. Kinda. It’s like a it’s a very rough Looking Glass. Yeah, eyeball it. This is strong. Shit. It’s about at 46% which is not planetary, you know setting records or anything but it is strong. It is quite sweet for whiskey. It’s honey kind of on on the nose and palate. It hits with a little bit of like, have you ever had like bourbon ice cream? Like a vanilla ice cream that’s flavored with bourbon? No, but I

Yeah, it’s got that kind of like you can really taste like this. This sort of ice creamy sort of vanilla flavor coming in, but then that bourbon tone carries through it like a very, very heavily and finishes a little bit spicy. Not necessarily a black pepper but maybe like a white pepper, kind of finish on it, but very strong like this. This is a whiskey that you take a sip of and it’s like no, it lets you know it’s there. But it’s Not like super Bernie. It doesn’t give you that hot chest feeling that, okay? Especially a rye bourbon can can or or rye whiskey can do for you. It’s flavorful. It’s something like this would be great with a giant porterhouse steak. Okay, that is what this I would love to sit here with a giant plate of grilled meat any

Thanks my friend Rory. He brought this over last time we visited and it’s I’ve had it on my shelf. And I’ve been delicate drinking it because I don’t want to run out of it too fast. But tonight, I wanted something a little different. So here we are, what more can you say?

That’ll get us through about Episode 242. So right, that’s a good plan. First, I want to give a shout out to everybody over Smashing Magazine. And that should come as no shock because everything Smashing Magazine puts out is fantastic. If they’re not on your reading list, they should be already and so you may have already heard about this. And this came up a while back and I just didn’t have time to fit it into a show until now. But back in March, they finally released the ethical design handbook. This is the latest in their series of smashing books. I think they’ve had four I’ve My memory is right up until now. And this is one that well, the way they describe it on their book release post is they say what happens when ad blockers cross browser Tracking Protection and data regulation like GDP. Are nccp A become a norm to, that’s when an honest ethical design could be a competitive advantage? This is something that’s super interesting to me because I work at a company where GDPR factors into everything we do. ccpa is factoring into everything we do. We, we try to do, right, you know, our cookie compliant, we got a cookie compliance banner. And we’ve been very aware of not trying to build those things, in a way meant to trick people into confirming, you know, acceptance with us, right. And so, this rings really true to me as far as like what I find important as a developer and designer. So I’m really excited about sitting down so I haven’t started reading it yet, but I’m super stoked to get into it. Yeah,

But you know, it’s a trust thing, right? It’s a this is where you Go from UX to cx customer variants. And the you know, that idea of building trust with your customers and giving them the right experience, not just with your application, but just as a human being kind of thing.

And the easy one right is how many times do you go to sites and they’re like, Hey, we use cookies to do stuff. And we just need to know if you will let us do it and your only option is to accept right like they they modal their site and it’s like you can’t dismiss it you can’t you have to click accept or go away. Right I go away, there is no site that does that, that I need that badly. I will go to another site and find the information.

It sucks because I know doing it right is hard. I know how much time we have spent on our tools and are still spending on making it so that users have you know, full granular control over well, I’ll accept your, you know, your tracking cookies, but I don’t want your marketing cookies or something like that.

He has on every one of his emails from his mailing list. At the right at the top of the email, it says and I’m quoting literally, big obvious unsubscribe link here. Boom right at the top. Never clicked it. Like I guess I’ve never wanted to because I like the emails that I get from because it sends quality email. Every other email that I get from anyone else always has it, like buried at the bottom or it’s obscured or I’m gonna throw a call back to something we talked about briefly last episode, I believe that, you know, in giving somebody the option to decline something, or to opt out of something is not going to entice them to make the negative action, right, like writing, writing, the option is not going to they’re not going to see that and be like, Oh, yeah, I’m just not gonna do that. It’s, you know, and like I say, it’s like with the emails, if you’re getting the email and you like the email, you’re trying to unsubscribe from it, the only time you’re gonna unsubscribe from is when you don’t want it anymore. And if you don’t write that easy, you’re gonna draw the ire of certain users who may shame you publicly over

I don’t have any idea who I could be referring to on that, but that’s That’s the only time where that really is a problem is you’re you’re making it harder for the user to do what the user wants to do, regardless of how you want it to happen as a business.

Yeah, it reminds me I think if we do a throwback here to Episode 41, Ron Bronson was on with us. And we talked about hostile design. Yes, we got into some of this and it leads into that right the the ethics of design and what is right to do and things like that. So that’s a good episode to go back and listen to if you want to get some a little bit of background on that. If you’re interested in the book. We’ll have a link in the show notes. You can go check it out. This isn’t a sponsored mention, we’re not getting any kind of kickback whatsoever on on plugging this. It’s 19 bucks for the ebook. It’s 39 bucks if you want the ebook and the print version. I’ve I put my money where my mouth is I bought it. I just haven’t started reading it yet. But as soon as I get through it, you can bet you’ll be hearing about it on a future episode of The drunken UX podcast.

So this week, we want to take a little bit of time here and by a little bit I mean, roughly exactly 34 minutes or so, to talk about emergency sites. When I say an emergency site, I mean like a site that needs to be put up in a hurry. That is designed to convey necessary information to an audience in high demand.

I’ll throw an even stupider one in there. And that’s hardware failure. Right? Yeah. Yeah. And the thing is, and like you and I think have probably lived through a version of all of these at some point. I was heavily involved right after the tornado hit Joplin. Okay. Missouri, right. Yeah. Joplin Missouri. That was 2011 I believe. Yeah, I I just had a knee surgery. And I was stuck in my recliner. And I used to be a firefighter years and years ago, and I’ve kind of got this. I still got that mentality of when something bad happens my instinct is to jump up and go, you know, do something and I couldn’t then I was stuck in my chair. So what I ended up doing was helping coordinate a lot of online resources and and, you know, relaying information to people keep in mind this was nine years ago, we didn’t have a lot of the tools that we have now. Yeah. It impacted cellular bill availability because towers were damaged and people were heavily using their phones and overloading them. landlines were knocked out good power outages everywhere. You know, what the director of Parks and Rec the show? Yes, yeah.

Yeah. From an emergency standpoint, I remember when the Virginia Tech shooting happened. And I believe at high Ed Webb one year, they even did a presentation on the impact that had on their website, like immediately after and the days that followed because they were getting a ton of traffic not related to students in school and education. But just you know, it’s it’s the digital rubberneck. Yeah. mentality, like people are going there. They want to know what’s going on or whatever. And all of that traffic that the whole kind of underpinning of all this is, if your infrastructure cannot handle getting information out, what can you do to make sure that you can still get out that critical need to know information in a timely manner. This isn’t full DRP DRP is disaster recovery plans. We’re not going to talk about you know, colo And off site backups and things like like, you know, super high end. This is more about just how do you keep the lights on for a website and it’s pretty easy and in relative terms, it just takes somebody taking the time to sit down and make sure though that those you know life jackets are stowed on the boat so to speak, right? metaphor for those of you so I want to reference first and foremost I have to give a shout out and I’m gonna apologize in advance because you know, it’s coming It’s a name that I’m having trouble with. And Aaron has tried to educate me on this

Is it an oom loud? Oh, yeah.

I am Kansas we had a great laugh at me earlier today cuz I had to read some French text work. And there is no time I sound like I am more from Kansas and listening to me try to read French because I don’t speak French at all,

is this really awesome fee? That’s the only thing I know. And I’m pretty sure it means I am a little girl. It’s from a from one of those commercials where it’s like the speak and say language. It used to be able to buy the ad the girl points to herself with a big thumb. She’s like this. This should be lush on feet. There’s a little trivia about me. So this is over his blog at mx b dot Dev, of course, we’ll have a link in the show notes. But he wrote a blog post about a tool he’s developed called the emergency website kit. And it’s it’s made the rounds in a few places. It’s very cool tool that he’s built, and we’ll talk about it specifically here in a few. But

It was inspired. I don’t know the tool was but his post was inspired by a comment from Nicolas Zacchaeus on Twitter that said, just received a shelter in place emergency alert with a web address. For more information, click the link the site is down all emergency sites should be static. And it rings true right now, right? Because we are trying to push out a lot of emergency information to people be it. What are the shelter in place orders? What are the business rules right now for people when you do if you’ve been laid off from your job, and that’s a big one, right? Yeah. The when we joked about it, but emergency sites are our number, I’m sorry, unemployment sites across the nation are crippled right now because they can’t keep up with demand. And it’s taking down not just the application side of many of those sites, but also the front end where the FAQ is our phone numbers are. And that’s a good example of why these things are important.

rights. And that’s what I was gonna say is WordPress being the classic example most folks are familiar with it. Yes, you can run caching on WordPress that will help things. But generally speaking, WordPress works by rendering every page on the fly. Yeah, this gets into where if we segue into talking about capacity server capacity, Mm hmm. The reason the site goes down is because it has limited resources. It only has so much CPU and so much memory. And the more people hitting a server, the more of that is in use, and when It gets to its limit, it can no longer effectively get pages out in a timely manner. And you get server errors, those may be 500 errors. Those may be just a straight up, you know, server down error

the, in WordPress, a session. And this can be highly variable because it depends on your theme. It depends on your plugins, it depends on a lot of stuff. But WordPress, on average uses about 15 to 40 megabytes of RAM per session because of the PHP thread and write the overhead that WordPress is running to make the database calls and if

right. And that’s something else and when we talk about this is, you know, the your HTTP server has to use memory your PHP thread is using memory, your database is using memory. And each one of those has limits there are bottlenecks that as a result, estimating your server capacity is incredibly hard. And it’s there isn’t Real simple equation to use to be like, Oh, this is how much RAM and CPU I have how many sites? Or how many people can I serve every minute? Well, it’s it depends. It depends on a lot of stuff there is for what it’s worth sort of an abstract equation. And again, it will be linked in the show notes. It’s from serve bolt. And the way they describe it. If you take the number of CPU cores divided by the average page response time in seconds, which is something you can get from your Chrome inspector tools or whatever, times 6460 seconds, times user click frequency, which you can get from Google Analytics, that gives you the maximum simultaneous users in the sense of, you know, considering a person on your site, not just how many pages you can spit out, but how many individual people can use your website over the course of a session at once.

Yeah. For what it’s worth, if you really want to know what it takes to take your server down. Try to take Your server down. There are tools to help with that. And my personal favorite is a tool called siege. It’s a command line tool. So you do have to get a little familiar with if you if you aren’t good at using the command line you will want to, but there’ll be a link to that there’s also a patchy j meter or Apache Bench. Any one of those, you can download their free tools. You set up the pages that you want to hit, you can give it you know, just your homepage, or you can give it a list of pages, how many clients you want to generate, how many visits per second you want to generate. And basically, you just start turning up the dial. And like when you finish with siege, it gives you a report of how many connections were dropped and how many pages were dropped. And you just start slowly. You know, you start with 10 users requesting a page a second, and it comes back and says we had 100% hit right. So dial it up, turn that knob up to two, turn it up to five and start seeing where things start falling apart. That that’s the best way really to figure out Where your server will fail, because how much RAM how much CPU usage and stuff you have is great. But you may have other services running on those boxes if your database server is on a different box from your production server, like all of this kind of stuff will affect how much load you can take. So a tool like that lets Unknown Speaker you

I mean, it’s what you’re basically doing with siege is running a DDS denial of service attack,

it’s Yeah, it is generally a good rule of thumb that unless it’s like hardware you own Yeah, definitely like and WordPress engine, I know. You definitely want to let them know you’re doing that they will let you do it. They have no problem letting you do but if you don’t tell them in advance, they assume it’s an attack and they will block whatever is coming in. Write that is Yeah, something definitely to keep in mind. But any of those tools, well, at least those will actually give you the performance of your server then and do it when it’s not live. That’s the other piece of advice. But once you know that you’ll have kind of this thumbprint, this fingerprint of how good are you? That’s why it’s important to know that

Yeah, well, even the IRS site with the get my payment tool. Yes. Yeah, it first launched and rallies. Now it looks like they have provisioned it so it will stay up. Yeah, to say the least. The next part of this is then gets into DNS. Not gonna go real deep into this, but I want to mention a couple things because DNS may or may not be in your control as a designer, as a developer, but maybe you’re an army of one at a company. So this is all something you handle, it just depends. But DNS gets into the sort of DevOps realm of being able to make sure the traffic is going to the right place. Yeah, normally, you have a DNS record, that DNS record says, my site comm is that IP 127 001 that’s your a record. And if that site goes down, normally, people keep going to this dead site, they they type in your address, they’re told where to go, and they go there and it’s another hit on a server, that’s all year. So you know, it’s, you know, stop kicking him. He’s already dead kind of thing. So, there’s a couple things you can do here. One is, and probably the best idea is to use a load balancer. Hmm. I can’t give you great advice on this because every load balancer is a little bit different, but

yeah, yeah, sure. a load balancer is basically the only thing it does. It’s a simple tool that just says, Hey, you want access to this stuff? Here’s where I’m going to send you. And so when you have a big site, like let’s say it’s Amazon, right? Amazon isn’t running their website on one old white box Dell stuffed in somebody’s closet.

No, I guarantee you that that is not the way they do it. That’s a word computers. Yeah. They, you know, it’s across thousands of servers. Right the load balancer does is it’s like a queue manager. Almost right. It says like a you go to the airport, and they’ve got for security lanes.

bank teller. Unknown Speaker Yeah, bank teller nice. Oh yeah,

you’re going through security at the airport, you got to the single guy who’s like checking your deal, but then they’re like, okay, go down the line eight or whatever, right? That’s what a load balancer does, it’s trying to distribute traffic amongst a bunch of servers usually keep loads down. That’s the first line of defense. If you need to handle a lot of traffic, scale yourself horizontally, have your site on three servers, then you can handle triple the weight. That’s not feasible for most folks. And it’s not necessary for a lot of folks though,

they’re very basic, though. They don’t have a lot of functionality,

Right? What you really want to look at though is you know how your pools are configured? Are you balancing? Or are you setting up failover. And this is where a load balancer becomes very valuable. Normally, if you’re running a load balancer and you’re balancing between two servers, and server one goes down. The load balancer is constantly checking the health of that server and it goes, Oh, no, server one went down, we’ll start sending people to server two, right? That’s where people like me get really nervous and say, God, I hope I have enough resources on server two to take that load. But the other thing it can do is you could have a third server, that’s the backup that never gets traffic to it at any other time. Right? You could say, if server one fails, then start sending traffic to server three. instead.

Yeah. And that’s exactly the point with instead of your load balancer and have that failover. Ideally, what happens is, because here’s the thing, right, if you met manage your DNS manually and a site goes down, you have to go into your DNS zone file and change that record to point to a new IP address, right, which is all well and good unless you have like a 24 hour TTL Time To Live settings set. But if you’ve got that high setting, though, if your DNS record is set to 24 hours, and you change that IP address, you have no guarantee that people are going to get your emergency site for the next day. In some cases. Usually it is definitely faster than that, but you have no guarantee of that on a load balancer. That’s not true. As long as that load balancer is up, it is still a load balancer is still a single point of failure. That’s Yeah, granted, but you say, here’s, here’s, you know, the pool for our production sites. Here’s the pool for emergency site. If production goes down, your only job is to then say, Okay, now we’re sending all the traffic to this new IP, and nobody has to wait on anything.

So the other thing you can do on DNS that can make this a little simpler if load balancers aren’t your cup of tea, or you just want the ability or the money or the wherewithal, there are services that can do like dynamic DNS monitoring for you that they usually can cost a few bucks or so one that comes to mind that I know of, I haven’t used it. So I can’t really speak to like from from an experience standpoint, but I know DNS Made Easy does this. You obviously have to let them manage your DNS. But then you give them your primary IP address and then like your failover IP address, and so if they, they were just like a load balancer in that sense, and that if they detect your main IP goes down, they will start routing people to your backup IP address. Then you don’t have to concern yourself with it or worry about that at all. It’ll just be there. Basically, I’ll throw a link to, they’ve got a little article that explains how their stuff works. Something to keep in mind, if you want to run a separate emergency site, you have to be concerned about DNS.

It depends on what your emergency strategy is. To like how you plan to update that how you know, information will get out through it and how you’re tooled how your CMS works. All of this has to factor in, use one thing, if you’ve got an emergency site, you can also use a CDN in front of it. Mm hmm. This helps in a couple ways. One, you’re relying on people who spend way more money on delivery infrastructure than what you do. You’re not going to spend more than CloudFront or digitalocean or CloudFlare, or any of these folks. So by relying on their infrastructure to deliver pages, even if it’s your normal site, yeah, you’re offloading a ton of server load to the CDN. Yeah, they don’t ever have to hit your server to get your page right in will cache it and deliver it from there. And so you still they still get the information. But you’ve now enabled yourself to make sure your server stays up. The caveat being if you use one of these services, especially CloudFront, cloud friends and AWS service, it’s metered so charges you based on how much you use. If you are experiencing an extremely high spike in traffic due to an event, you want to make sure you’re keeping your bandwidth usage low. So you aren’t also slapped with a giant bill to go along with all the headache of having a site down. That’s just something to consider in some services like digitalocean, you’re playing a fat, you’re you’re playing a flat, you’re paying a flat fee for access to their CDN up to I forget what is I think a terabyte or something of delivery. So odds are, especially if you’ve got a low bandwidth site, you’re not gonna hit their limit, most likely. That’s a ton of traffic at that point. So let’s let’s talk about emergency sites and a couple tools that are out there. There’s one that is newer and I don’t know if it is came out as an exact response to COVID-19. But I know that’s where it’s getting pushed real heavily. That’s service relief.us. It’s a site that’s designed to use air tables and net LIFFE I, to push out a very simple static site that has all its content editing, basically, in a spreadsheet for people. So putting information into it is easy. And it generates a super light, very tiny site that runs through nullifies system, then it’s simple. It’s not going to meet everybody’s needs, but it’s a good place to start. If it’s something you’re interested in and want to get a feel for what these things can look like. Yeah, it’s it’s a very straightforward system that folks were using it you’ll see, you know, they’re putting out lists of things like which restaurants are open or where can you go to support them? Are there events or resources available to the community to assist with things You know, food banks where they can pick up stuff, you know, Meals on Wheels, type services and things like that. The other one is the one that max set up and talked about in his article, which is the emergency site kit. He’s got this on GitHub. And there is a demo site. It’s emergency dash site dot Dev. If you want to go look at what it looks like in production, you can fork his repo and start changing stuff from there. It’s he’s got a lot of information about how it’s set up. It also uses natla phi as its default distribution system. You can in theory, connect it to any kind of front end or back end rather that you want. That output is really impressive though. So there you he’s using a eleventy It’s a static site generator. When you update your content in net LIFFE I eleventy runs generates the static content and then pushes it into the file server. The main page for that Emergency dev site is only 3.3 kilobytes. The amazing is super tiny. It takes five requests, although only one of those is necessary. The other ones are like a couple Fave icons and something else. Hmm. The page itself loads in 1.47 seconds. And the HTML document takes a whopping seven milliseconds, download seven milliseconds to download that that main HTML document. And he’s also done something very cool that, you know, he didn’t have to do but make a lot of sense for people who need access to the information. He’s included service workers. This is something we haven’t really talked about on the show at all. And it’s a new browser API tool that you can take advantage of to do work in the background on sites, and he’s using an offline ServiceWorker. So once you visit the page, it’s using the ServiceWorker to cache your website in the local storage and serve it so that if for some reason something happened to even take the emergency site down, you still could access the information that you had access to before.

So yeah, it acts kind of like a cached web server locally. So while

super tiny.

Yeah, well, I mean, that’s a good point to just talk about how how we should structure these kinds of things. So like when I was building mine, I tried to stick what what are the essentials, if we have an emergency, what’s the most important stuff people need access to. So a, the simpler you keep this thing, the more accessible it’s going to be. And the easier it’s going to be for people to get what they need. And if you’re in a situation where, you know, cellular bandwidth is low, or lines are out, and you know, you don’t have time to download a site that may come in at 10 megabytes for all of the background videos and images and CSS and JavaScript and ads, that’s uh, it may not it’s not going to look pretty but pretty is not the goal. Information is the goal. I would stick to news, I would stick to news that’s going on like what is pertinent right now. If it’s like an active shooter type situation, what are the emergency phone lines to check on loved ones or to submit tips? What locations are missing? safe or not safe? You know, that kind of news is going to be immediately important to everybody and should be the stuff at the top of that page.