Spooky Web Dev Stories 2022

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

Welcome to Syntax, the spookiest web development show in the field.

Rid Is that is that German again?

Yeah. I don't know. I I got Dracula. I got Dracula. Ready.

Oh, so spooky.

This is the episode where we do spooky stories in web development. Things where people do rid. Awful things in web development. They delete a database accidentally. It'll put a swear word on. They do things where you just wanna stick your head in the sand. And every year, we have people submit Dozens of stories, and they are just very cringey. And it's fun to laugh at them in retrospect. And I think you can learn a thing or two about, like, what not to do as well.

Yeah. Straight up spooky for sure. That's like any time

I see, like, rid. Like, a ATV crash or something on the news. I wanna know, like, what happened because, like, I wanna I wanna know. Like, I don't wanna do that. You know? Like, did they go too close to a cliff or something? An ATV crashed. What? Of reference? Yeah. Well, that that's that's, like, my biggest fear. Like, we have, rid Like a little kids' ATV, and I was like, I don't think I want my kids ever riding that thing. Oh, yeah. Yeah. Every time I see, like, something on the news, like, rid Kids rolled over. I'm like, well, what were they doing? You know? Not not not to blame them, but, like, I just wanna know, like, how do you Oh, yeah. Because you can also be safe on them. But rid What what are kids not doing is really their question. That's a good good point. Good point. Apologies for my sickness sounding. I got the vid finally, which rid Sucked. So shout out to Scott for taking that last episode,

by himself, but I'm feeling a little bit better today, and we're gonna ready. Get going with the the Halloween. Oh, what's funny is that oh, no. It is. Yeah. It was the one on Friday. So I was thinking that this one would release before the yeah. But no. Wes is referring to tRPC episode with Alex.

But yeah. No. No worries, man. I'm I'm I'm sorry that you got the vid. That that stage is no fun. Yeah. Yeah. No no good, but I am excited to hear that. I'm I'm kind of bummed that that's the one I missed Because I'm very excited. I had lots of questions about it, but I'm sure you did a awesome job. Yeah. The good news is I asked a lot of questions because,

rid turns out I don't know very much about tRPC. So

Well, it's a good episode to try filling our by yourself then.

Rid we are sponsored by 3 awesome companies today. First 1 is Sentry. They do error exception and rid. Bug tracking, Prismic.

They are a headless CMS, for building websites and FreshBooks rid accounting. We'll talk about all of them partway through the episode.

So, mister Spooky Talinsky

Yo.

How's it going? Should we Should we just kick it off? I got the first one here from oh, we're not so we're not gonna say names in here. A lot of people submitted their names, and sometimes people submit companies.

We are scrubbing rid All of that because some of this stuff is bad, and we don't want people to be like, oh, on second thought, I don't want this going out. So 1st one is a longtime listener, huge fan of the show. Say hi to Scott for me. Hi, Scott. Do you know any good Mexican restaurants That where they don't smother the burritos.

What's that? They smothering a burrito is like putting, like, sauce on it. Like, could be a moly.

It could be salsa. Yeah. Yeah. Yeah. I'm a big fan of that. I don't know. There's lots of good Mexican restaurants here. Unfortunately, I, like, go to the ritzier places. So if, like, if you're looking for Authentico, anywhere on federal is probably fine. But if you're, like, if If you're looking for ritzier, I like mister Oh So, which is great because mister Bear is a great restaurant name.

They also have a a another restaurant that's, like, another, branch off called Senor Bear. So they have Senor Bear and Mr. Oso, which I think is a great pattern for a name. But since you have, like, Spanish, English, and then English, Spanish, you're kinda screwing yourself over if you want a 3rd restaurant name. So what are you gonna what are you gonna do there?

Alright. The this is the story. And this one I read, and I was like, we gotta start with this one. This is just a oof rid. One, this happened 5 or 6 years ago as I was working as a front end dev at a education technology company, and we were using React. Rid The product we are working on was a huge database of questions that schools could use to help their students practice for different subjects.

As rid. When you were practicing, you would have a list of questions on one side of the screen and whichever question was shown on the main part Of the page, we adopted React pretty early before state management was solved. So for single state management, we used a homegrown solution. It was basically a single global store.

We use component state, and it was essentially, also using component state was banned, so There would only be 1 single source of truth for all the state in the app, a rule that had been decided early on and we never questioned it.

In other words, state would have to live in the global store. One big issue with the system is that any change in state would cause the entire application to rerender.

Surprisingly, this didn't cause any serious issues for a long time until it did.

So initially, we get to the practice questions. Students would pick up a subject like geometry, a topic like polygons, and rid. They could answer questions on that topic. Each topic had about 50 questions.

Eventually, we released a feature to teacher where teachers could create assignments and exams, which would ready. Questions they wanted to. One day, a school district, which happened to be one of our biggest clients, hit us up telling us the product was broken, And they had multiple classes full of students that are unable to take a very important exam.

That's the worst when there's, like, literally real world people just sitting there. Yeah. Right. Especially for an exam. Right? People are already stressed out. Last thing you need is,

you know, some kinks in that. Yeah. Rid the exam had hundreds of questions and way more than we'd ever expect people to have in a single exam.

That's always the, The best use case for discovering limits in, software is that's just probably not go over this many ever.

That was the rid That list of questions on the side of the screen had infinite scroll. So as you completed the exams, more questions would load. The more questions would load rid. And more items on the list would have to render whenever any state changed.

So once you are at a few 100 questions, the render times would take over 30 rid seconds on a MacBook Pro.

He's 30 sec 30 I don't I rid I have a hard time understanding how that would happen. If it gets over 10 seconds, you'd assume that it's broken. Right? Like, if it gets over 10 seconds. I'm hitting refresh because I'm assuming that it's broken. Well, it it yeah. No kidding. So it's it says,

rid. Probably a good time to mention that the exams were timed.

So, yeah, the app was basically unusable. We had to scramble, rid. To add windowing to the list and we threw a should component updates in wherever we could. Thankfully, we're able to patch the issue pretty quickly, But I still feel so bad knowing that a bunch of teachers were probably stressing out our mistake. This is the lesson of the story was when read. To use windowing when rendering large lists, infinite scroll is the worst. So what windowing means is that if you've got a a large list of 600 questions.

Windowing will allow you to literally only render the ones that are supposed to be on, and the other ones are not rendered, into the DOM. They if like Twitter does this with tweets. If you scroll through a bunch of tweets, and you you inspect Element, there's not 400 tweets above you. They just put a whole bunch of blank space there. And then as you scroll back, they'll rerender them back in. This is a Technique that's widely used in video games to get, like, performance

out. They only, like, render what the character is in in the viewport to some degree. So that way, they don't have to keep all of the other stuff, all those other vertices in memory or whatever.

Rid. If you're out there looking for a solution to this type of thing, there's 2 really key libraries that people use. React virtualized and React window are the 2, that people use for virtualizing lists.

So that's a oof. That's a I would say that's a 8 bats out of 10 oof. Luckily, they're able to get it. And Yeah. I I think if you have to get more oops, you have to have money involved at at somehow.

Yeah. Yeah. Money money makes bigger oofs. Definitely.

Money or there has to be flights involved. Remember last year, there was one where Somebody had to, like, go into a lumber yard and, like, scan QR codes on logs because they dropped the database.

Yeah. Personal health info too. That would be bad too. You know, I would say I would say I'm gonna you said this is 8. I'm gonna say this is, like, this is 4 creepy crawlies out of 10 for me. Okay. Okay. Yeah. Maybe I'll reevaluate.

Yeah. I think you went a little too hot on that first one. Alright. Next is push notification hell. Longtime listener, first time caller.

I told this 1 earlier at the year at an enterprise software conference with a similar theme of horror stories at work during development.

Oh, supporting a legacy web application temporarily while we while we migrated to another platform.

I found the previous developer who worked on this app had set up alerts On pages that would 404 to our alerting service. Think. They said PagerDuty or X Matters, etcetera. I've rid. Never heard of either of those, but I would imagine that's, like, a lecture monitoring services. Yeah. The pager duty is, like, if you are on call on the weekend and Oh, yeah. Breaks,

then they're gonna ping your phone and be like, hey. There's elevated errors or something like that. So in this case in the somebody hit Right. Yeah. Somebody hits a 404 page on your web's Website, it's gonna ping your, ping your phone. Say, hey. Somebody tried to visit this page, and it's 4 0 4ing. Interesting.

I only ever got 1 or 2 or 3 of these during the year because, you know, legacy applications have very little people using them anymore.

The cybersecurity team had reached out to us about running a pen test, which, for those of you out there, it's a penetration test. Just to just making sure everyone is aware that things Could that happen sometime during the month? It had to be random, so we weren't furiously trying to fix the patch the app So we weren't furiously trying to patch the application.

I wasn't worried about it because it was going to be trashed anyway.

Fast Forward to 1 afternoon, a week or so later, I was on my drive home, and I got an alert on my page rep. Another alert and another and eventually, rid. 1000 or more push notifications sent to my phone.

The pen test was happening. The Ganner was hitting every possible endpoint to look for vulnerabilities.

I remembered right then about the 404 push notification.

These alerts were coming in so fast, I could not respond to them. My phone was getting hot trying to process the incoming messages As soon as they were coming in, I had to turn off my phone.

The app we used finally introduced the flood control. So if there are x events In so many minutes, it will be suppressing the sending out. We implemented it immediately.

I give this one Four pumpkins out of 10, I think it is spooky, but at the end of the day, the only person that hurt was you. So this is a a lesson in, throttling.

It's of it. Comes down to. But you know what, another unforeseen kind of consequence of this is if you were using, like, a service like, I forgot what that one though. There's, like, 1 major service that people use for, like, cross platform push notification. Pushover is what I use. Rid. Pushover. There's, like, a big one that owns a lot of stuff. SendGrid. It.

Oh,

SendGrid is email. They rid. Do push notifications as well. Yeah. There's somebody I'm thinking of specifically that I've Trello. Trello does push note. Trello? Twilio.

Rid. Twilio.

Yes. Twilio. You imagine if you're paying money for a service like that. That could get expensive really quick.

Yeah. Yeah. If you've got, like, rid. You you say, oh, yeah.

When you do it, send it at at 2¢ of push notification.

I had that when I sold my stickers.

Rid I was just have I think I got, like, 8 not 8,000, like, 4,000 push notifications in an hour or something like that. And, like, At a certain point, it stopped. And I was like, oh, I'm amazed that there's no nothing built into Ios that will Yeah. Will, like, group them or throttle them. Rid. Unreal, 13,000. That's hilarious. I once saw, like, David Beckham.

When he post to Instagram, he showed what it looked like, rid on his phone, and it's just

Why would you even have notifications on it? I he must have done it for, just for yeah. Yeah. Rid Look how cool I am. Yeah.

Next one we have here is called dark Friday.

Last year, During Black Friday, I accidentally deleted a good 2 to 300 orders from our error queue rather than fixing them. No way to correct it.

Oh, so,

what happens when you delete an error, that means that it never happened in the first place. I I don't know what an error queue is. I'm assuming what that is is, like, an order comes in, something's not a 100%, so they put them in the queue. They have to be addressed, rid and then he nuked them. So I said, what did you do? As I sometimes I I follow-up with more questions to these. And he said, Thankfully, they were refunded by the order system after 2 weeks because they never got marked as shipped.

So there's 2 to 300 people They didn't get their Black Friday deal. Sucks.

Oh, so, yeah, this one's kinda spooky. Yeah. This could be like this could be like 6 ghosts out of 10 to me. I'm I'm rid Call it

7 Ghost out of 11.

Oh, that's great.

Next one here does not have a title. Oh, here. I'll log in. I'll get your title. One sec. I don't I know what this one is. Okay. There we go. That's a good one. Alright. Tiny inch

With big problems, I was trying to think of another another alternative name for that to, like, play off of moe money, moe problems, but, like Oh.

Smaller and small problems. I don't know. I went and set up a online competition as a junior that was advertised on TV.

When I set up the MySQL DB, I accidentally set the auto incrementing entry ID field as a tiny int. So once the entries reached 128, The form would print a MySQL error. It was pushed to prod late Friday night and not tested.

That's a 2 for 2. Yeah. Strike 1. Strike 2. There we go. Monday rolled around, and the project manager asked me for the numbers. Surprise, surprise. A 100 and 28 entries.

Curious number. And you see, numbers like that, a 128 that are kinda significant numbers. You know something's Something's odd here. I started sweating in a panic knowing this TV ad had cost 100 of 1,000 of dollars to run all weekend.

My manager was all calm and saying don't stress. Just manually import the lost entries. Obviously, not standing the severity of my mistake.

I have no idea how I kept my job despite this monumental stuff up. I I haven't heard stuff up before. That's pretty fun. Then Wes asked for clarification, asked for a follow-up.

Yeah. What did you do? Yeah. Respond and then he said, I have no idea how management resolved the issue, but seeing as how it was an ad agency, I assume they'd either lied to the client or offered Some kind of deal, and I lived to code another day.

Okay. This one this one gets a a firm well, I don't know the price tag. This could get a, yeah, get get a 99,

Jello eyeballs out of 10 to me. Oh, yeah. I'm gonna give this 1 a 3 candy corns out of 4. That's just a Yeah. Oof.

Rid. That's big money at stake. And the fact that I think somebody swept it under the rug and nobody noticed, rid. Just,

some of these big brands, man. Yeah. Where where that where did the $100,000

go? I don't know. I I guarantee what happened is the boss of this guy I was like, I don't know. And then and then or maybe they told the client and the clients will go, well, I'm not getting in trouble for this. So pretty much everybody was just like, you know what? Let's just all be quiet about it.

Is it right? Yeah. Is it right? Alright. Next one we have here is, first off, the work itself. I was rid Working in a ticketing company that operates a website mostly built around .net and jQuery and made some solid sales amount $3,000,000 a day.

After a couple of years working for them, they decided to change a long term development strategy and throw their way entirely behind as many quick read. A b test as possible.

They would spend their meetings coming up with small ideas that could help them raise conversion rates. Yeah. That That's kinda interesting stuff is when you have $3,000,000 a day, could the color of a button or could one little Call to action or a smiling photo of somebody, make an extra $200,000 a day. You know? Like, that's that's wild to me. It's wild. Yeah. That's a a a different type of world that I'm living in. No matter how small, wacky, or anger inducing it was for the customers, rid. We would then develop some some quickly to test them out and see if they improved conversion rates. If it did, the change would be deployed and used permanently.

The first spooky half is that this demand for speed meant several typical tasks of a developer We're completely shelved. I'm talking tasks like any kind of testing, unit test, integration, performance, accessibility, anything else. Rid. Removing old defunct code for tests that were either permanently deployed or switched off, and even code reviews For following common code standards, this meant that the code base quickly became a hot steaming mess of sometimes unused, sometimes highly tangled and horror Horrifically organized code.

So that one didn't that one didn't hurt anybody.

It's just that's just a scary of a Scary code base. And I bet that is more common than we think, unfortunately, especially in these very large companies.

Next one here is costly mistake or a costly mistake.

The second This is from the same user, by the way. The 2nd spooky half is my costly mistake. One fateful day, I was writing a small AB test for the last Page of the checkout process, which required the users to navigate multiple pages asking for a range of details.

My tiny change was to bring the confirm purchase button up to the bottom of up from the bottom of the page to the sidebar where it'd be more visible.

Because there was no code review stage and because there was no testing it's it's so funny how many of these have because it was deployed Friday, and because there was no testing

Because not even done and because

Right. And because there was no testing.

Wait. There was another one here? Oh. Yeah. And because there was pressure to build it as fast as possible. Yes. Okay. That's How many checkboxes that we're gonna get here this great? I made the change and deployed it pretty quickly.

2 hours later, multiple dashboards started displaying that Sales were plummeting.

Turns out the confirm purchase button was the submit button inside of an HTML form. Use the Use the use the platform. Use the platform. Use the platform.

Turns out and I had just taken the button out of the HTML form and put it into the sidebar.

But what I had also done was accidentally move the button out of the AB test, meaning that it was being shown to everyone rather than 50% of the users. No. And that no one could check out.

We lost around $1,000,000 in that time. Oh. Oh, come on. I kept my job because management was fully aware of the risks and subsequently learned nothing. Hope you found this a fun read. I ended up giving a talk on this too to pass my re Experience and demonstrate that there's a real reason why we have reviews and tests. Thank you, Weston Scott, for your podcast. Yes.

Yeah. I mean, I'm gonna give this 1, you know, probably 10 zombie hands coming out of the ground out of 10. Rid. Wow. Yes. That's

there's some big money at stake there. And you gotta think, like, how much of that $1,000,000 just came back and bought it later? And how much of it how much of it are people just said screw it and walked away from it? Unreal. I'll give that 1 a 8.5 rid. Pumpkins out of 10.

Pretty pretty spooky. So this person had, no no testing and no No review process. It seems like no staging environment to check that kind of thing out. And and if they did, they might have Had a bug or two end up in their bug tracking system that might have been allowing them to see that sales weren't coming in before they actually took this live.

And you could do that with an application that we love over here called Sentry. Sentry at Sentry dot I o is a service to collect all of your errors and exceptions and Let you know where they exist, how they exist, and what release, and possibly who even added to them to that release. So that way, you can assign Who did what to what does who, and you can track these things in a way that allows you to easily squash these Creepy, crawly, spooky bugs that you have in your code. Because let's face it, this time of the year, nobody likes spooky things in their code. We got enough spooky stuff going on outside.

My my kid's gonna be the Mandalorian, and that's spooky enough for me.

We got ghosts in our front yard. I don't need bugs in my code. So if you want to squash all of your bugs, have them available to you in a nice easy to follow table, as well as track performance issues, and all other kinds of things that might be causing your users rid.

Spooky, spooky pain, head on over to century.io and use the coupon code at tasty treat. And you will say or you will get 2 months for free. And thank you so much to Sentry for sponsoring.

Alright. Next one, Comes from Holland, so we're titling this 1, deik leek.

You know what? I I my alternate title was Pub Leek, which I still think it was good. Oh, public. Okay. I I Scott changed it on me, and I was like, I thought I called this one dike leek.

And public is actually really good. I like that. I know it It was good. I know. Okay. Well, this is a story about a leak from Holland.

A colleague of mine used a file rid Sharing service to send multiple files to colleagues at the same time. The files contain credentials and passwords to access all of our databases.

Rid. 1st of all, you shouldn't be doing that.

1st of all

okay. Next, rid he, however, forgot to check the private checkbox, making the public the file publicly available on the file sharing website.

Our database contain all of the personal data, email addresses, home addresses, and banking banking data of millions of people, who are customers of our users.

It only took 30 minutes for my colleague to realize his mistake and take down the company.

Oh, sorry. No. No. Take that. Take it down. But the company still had to send a notice to all of our users to tell them about the potential leak And how we would monitor the situation. So props to the, props to the company there because probably not a big deal, but you never know. So you have to rid Follow that type of thing. We also had to change all of our database password, which was not a fun task. A few years have passed and no leaks have been detected, so we might be in the clear,