Spooky Web Dev Stories 2022

that will Yeah. Will, like, group them or throttle them. Rid. Unreal, 13,000. That's hilarious. I once saw, like, David Beckham.

or more push notifications sent to my phone.

These alerts were coming in so fast, I could not respond to them. My phone was getting hot trying to process the incoming messages 1st of all 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,

As soon as they were coming in, I had to turn off my phone.

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.

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? stuff up. I I haven't heard stuff up before. That's pretty fun. Then Wes asked for clarification,

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 during the year because, you know, legacy applications have very little people using them anymore.

Rid. Twilio.

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

software conference with a similar theme of horror stories at work during development.

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

Look how cool I am. Yeah.

like, 4,000 push notifications in an hour or something like that. And, like, 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,

When he post to Instagram, he showed what it looked like,

rid. You you say, oh, yeah.

like, I only ever got 1 or 2 or 3 of these

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.

I found the previous developer who worked on this app had set up alerts On pages that would 404

I had that when I sold my stickers.

rid on his phone, and it's just 8.5

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

I told this 1 earlier at the year at an enterprise and React window are the 2, My my kid's gonna be the Mandalorian, and that's spooky enough for me.

At a certain point, it stopped. And I was like, oh, I'm amazed that there's no nothing built into Ios which rid Sucked. So shout out to Scott for taking that last episode,

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

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.

ping your phone. Say, hey. Somebody tried to visit this page, and it's 4 0 4ing. Interesting.

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

okay. Next, seconds on a MacBook Pro.

And how much of it how much of it are people just 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.

there's some big money at stake there. And you gotta think, like, how much of that $1,000,000 also using component state was banned, So, mister Spooky Talinsky

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.

Our database contain all of the personal data, email addresses, home addresses, and banking banking data of millions of people,

Pretty pretty spooky. So this person had,

who are customers of our users.

a bug or two end up in their bug tracking system

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.

No review process. It I remembered right then about the 404 push notification.

no no testing and no

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

10 zombie hands coming out of the ground out of 10. Rid. Wow. Yes. That's

Spooky, spooky pain, head on over to century.io

rid he, however, forgot to check the private checkbox, 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, So there's 2 to 300 people

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, infinite scroll is the worst. So what windowing means is that if you've got a a large list of Because not even done and because

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.

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.

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

on the file sharing website.

just came back and bought it later? 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,

seems like no staging environment to check that kind of thing out. And and if they did, they might have Had

this demand for speed meant 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.

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, Unreal. I'll give that 1 a 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,

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.

several typical tasks of a developer 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.

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

The first spooky half is that

Scary code base. And I bet that is more common than we think, unfortunately,

make an extra

organized code.

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 said screw it and walked away from it?

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

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

Horrifically

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

And they had multiple classes full of students that are unable to take a very important exam.

So initially,

it did.

Surprisingly, this didn't cause any serious issues for a long time rid and then he nuked them. So I said, what did you do? and the other ones are not Prismic.

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.

until So once

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

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.

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.

We use component state, and it was essentially,

read. To use windowing when rendering large lists,

rendered,

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

you are at a few 100 questions, the render times would take over 30 rid 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.

That was the Alright. Next one, 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 Rid. 1st of all,

software is that's just probably not go over this many ever.

into the DOM. They if like Twitter does this with tweets. If you scroll through a bunch of tweets,

Windowing will allow you to literally only render the ones that are supposed to be on, That's always the, When you do it, send it at at 2¢ of push notification.

So, yeah, the app was basically unusable. We had to scramble, rid. To add windowing to the list 600 questions.

The best use case for discovering limits in, 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,

in that time. Oh. Oh,

Right. And because there was no testing.

and because there was no testing

or a costly mistake.

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

come on. I kept my job because management was fully aware of the risks and subsequently I made the change and deployed it pretty quickly.

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

that we're gonna get here this great? 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,

My tiny change was to bring the confirm purchase button up to the bottom of

But what I had also done was accidentally move the button out of the AB test, meaning that it was being shown to anywhere on federal is probably fine. But if you're, like, if If you're looking out. They only, like, render what the character is in in the viewport

up from the bottom of the page to the sidebar where it'd be more visible.

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.

everyone rather than 50% of the users. No. And that no one could check out.

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

Weston Scott, for your podcast. Yes.

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

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

Because there was no code review stage 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

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, could the color of a button or could one little Call to action or a smiling photo of somebody,

to Scott for me. Hi, Scott. Do you know any good Mexican restaurants Oh, Well, it's a good episode to try filling our by yourself then.

1st one is a longtime listener, huge fan of the show. Say hi making the public the file publicly available rid. Pumpkins out of 10.

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 late Friday night and not tested.

rid All of that because

They also have a a another restaurant that's, like, another, 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.

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.

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

for ritzier, I like mister Oh So, which is great because mister Bear is a great restaurant name.

like, sauce on it. Like, could be a moly.

That where they don't smother the burritos.

What's that? They smothering a burrito is like putting,

orders from our error

Next one we have here is called dark Friday.

Oh, that's great.

During Black Friday, I accidentally deleted a good 2 to 300 a day.

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 rid. Probably a good time to mention that the exams were timed.

queue rather than fixing them. No way to correct it.

Last year,

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, 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 Rid I was just have I think I got, like, 8 not 8,000,

7 Ghost out of 11.

Oh, so,

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

that people use for virtualizing lists.

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

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. Yeah. Money money makes bigger oofs. Definitely.

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.

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

The form would print a MySQL error. It was pushed to prod that might have been allowing them to see that sales weren't coming in before they actually took this live.

Jello eyeballs out of 10 to me. Oh, yeah. I'm gonna give this 1 a Let's just all be quiet about it.

yeah, get get a 99, Yeah. I mean, I'm gonna give this 1, you know, probably

despite this monumental

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 asked for a follow-up.

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,

rid. Just,

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.

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

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

Some kind of deal, here. Unfortunately, I, like, go to the ritzier places. So if, like, if you're looking for Authentico, 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 Okay. This one this one gets a a firm well, I don't know the price tag. This could get a, Next one here is costly mistake

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

Is it right? Yeah. Is it right?

and I lived to code another day.

I have no idea how I kept my job

Curious number. And you see, 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,

3 candy corns out of 4. That's just a Yeah. Oof.

numbers like that, a 128 that are kinda significant numbers. You know something's 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?

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.

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

With big problems,

web development show in the field.

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

the spookiest

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

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

Oh, so spooky.

This is the episode where we do spooky stories in web development. Things where people do you shouldn't be doing that.

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.

Rid Is that is that German again? in state would cause the entire application to rerender.

They are a headless CMS,

Yo.

for building websites and FreshBooks rid accounting. We'll talk about all of them partway through the episode.

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 Yeah. Yeah. If you've got, like,

in retrospect. And I think you can learn a thing or two about, like, what not to do as well.

it's fun to laugh at them I see, like,

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 Welcome

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

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

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

the yeah. But no. Wes is referring to tRPC episode with Alex.

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 we are sponsored by 3 awesome companies today. First 1 is Sentry. They do error exception and rid. Bug tracking, It's just that's just a scary of a especially in these very large companies.

before

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? and you you inspect a day,