DEV Community: Killian McGrath

Stop Leaving Yourself Open to Massive Cloud Bills

Killian McGrath — Tue, 19 Mar 2024 23:40:14 +0000

It's relatively easy to build a web app. However, it's far more difficult to build one that's secure, scalable, and does not expose the user to DDOS/cost attacks.

In this article, I'll cover some important things I've learned as a self-taught programmer who hosts my own web apps.

The motivation for this post

The following video popped into my YouTube feed the other day: I got my first DDoS (and what you can do to help prevent it)

A YouTuber, Web Dev Cody, racked up a $269 AWS bill when his Icon Generator website got hit with over 200,000,000 requests in about an hour.

The $269 bill is honestly quite tame compared to what's possible. For example, here's a $104k bill for a static Netlify website.

Public cases, such as the Netlify one above, often have the bills forgiven. However, there's no guarantee of this. You may also leave yourself open to smaller, less obvious ways in which you're paying too much for cloud services.

While Web Dev Cody's bill wasn't particularly massive, it's a great example of unnecessary exposure to runaway cloud bills.

Use Cloudflare for Static Assets

After reviewing Cody's bill, I found that he incurred costs for Amazon CloudFront (AWS's CDN) requests and bandwidth.

The pinned comment on this YouTube video currently reads:

from all the comments I've read from people smarter than myself, you should probably just use cloudflare.

I could not agree more.

AWS charged him $269 because a (presumably bad) actor repeatedly made requests to a static page on his website.

Had I been building the same website as him, I'd have used Cloudflare pages to host the static assets... And my bill would still be $0 after the attack.

I don't want to pick on Cody at all, but I quickly learned when reading/watching tutorials that content creators usually fail to take into account or explain how to avoid massive bills. When Cloudflare launched its Pages product, it was a game changer for me when launching personal sites, prototyping, and hosting MVPs.

For example, I recently (re)built a game sensitivity converter website with thousands of pages. As it's currently just a static website, I was able to host it with Cloudflare pages at $0.

Even if you're using another server or cloud platform to host/generate your content, you should still utilize Cloudflare's (free or very cheap) CDN and proxy services to cache static assets. Unlike other CDNs, Cloudflare does not charge for bandwidth (at least until you reach enterprise levels), assuming you're abiding by their very legitimate TOS.

Compute

To be honest, I haven't looked too much into Cody's website, but presumably, it also needed compute.

When it comes to compute, I unfortunately haven't found an overwhelming obvious choice like with Cloudflare for static assets.

There are always tradeoffs:

Serverless is easy but absurdly overpriced once you reach scale (go beyond free tiers, etc).
Companies like Heroku, DigitalOcean Apps Platform, Netlify, etc. do indeed make things easier, but again, they're overpriced.

Whatever you do, make sure you thoroughly read through companies' billing terms.

If there's no guaranteed fixed cost, make sure there are ways to programmatically monitor your billing and limit/stop services if you reach a certain threshold.

It's also important to choose a service that updates usage/billing in real-time. This $72,000 Google Cloud bill was partially a result of the Firebase Dashboard taking 24 hours to update.

While likely not the optimal choice, I usually use Heroku for prototyping, personal projects, and MVPs. It's not cheap for what you're getting, but they offer fixed prices and don't charge overages on basic plans (as far as I understand).

However, you can use anything as long as you can monitor your usage/billing. But whatever you do, don't expose yourself to potentially massive runaway costs.

Breaking Away From Bootstrap CSS Framework

Killian McGrath — Tue, 13 Oct 2020 08:13:23 +0000

I began teaching myself how to code a little less than a year ago to give myself the ability to start any website I wanted without having to hire a programmer.

While I've genuinely enjoyed figuring out how to solve the logical problems required to make certain tools and apps, I absolutely loathe working on any front-end aspects dealing with UI and design.

Due to my hate for front-end programming and the fact that I had experience working with Bootstrap in the past WordPress websites I made using page builders, I just assumed using Bootstrap or another CSS framework was my best bet.

Bootstrap Does Speed Up Development

For my first coding projects, I used React-Bootstrap ("The most popular front-end framework Rebuilt for React") and React Select (for easy dropdown selection fields).

As you'd hope from something calling itself "Bootstrap," it did make it incredibly easy to shit out a halfway decent looking website. From memory and a bit of "ctrl + fing" the docs, I could knock out most of the design work for a new website in less than an hour.

The Problems With Bootstrap

The problems came whenever I wanted a unique look for a React-Bootstrap component. For Bootstrap to work, you need to use its CSS. This means that I had to overwrite the existing CSS any time I tried to custom style a bootstrap component.

Glossing over unused and duplicate code issues, this is a pain in the ass, at least for someone as awful at CSS as myself.

When adding a bootstrap component, you end up with a bunch of "phantom code." You write one line of code, that's actually a component with multiple lines. While this is the entire benefit of Bootstrap, it actually makes it a colossal pain to even find the correct element to target in your CSS.

I'd end up spending more time and writing as much CSS than if I'd just written custom code for everything.

CSS is Easy. What was I thinking?

I've been working on a new website recently in the golf niche. One type of content on the site is product round-ups (e.g., The best XYZ).
A requirement I had was a scrolling carousel of all the products in each guide. This allows readers who want a quick breakdown of each product to find answers to their questions above the fold. It also doesn't require too much scrolling down the page for readers who want more info (e.g., Things to Consider When Choosing XYZ).

If you're not sure what I'm talking about, here's a not quite finished but functional example I built, as you can see in this article.

Anyway, after hours trying to figure out how to make this utilizing Bootstrap, I cut my losses and decided to rewrite all of the front-end code for my website.

I watched a video on CSS Flexbox and spent about 10 minutes reading a couple of articles on the subject before beginning my start from scratch.

Well, it ended up taking me only a couple hours to rewrite all the front-end code I had and create the product carousel.

While I definitely need a web designer's help if I want to improve the looks of everything, I'm now confident I could make just about anything UI related in a somewhat reasonable amount of time. My code is also much cleaner and there are no risks of serving unused CSS.

I Should Have Done This Sooner

What's the point of this article?

I should have taken a few minutes to learn the basics of CSS a long time ago! After a few weeks of this, I actually find it far more straightforward than using a CSS framework.

I'm now preemptively kicking myself for the next major mistake I'll find out I've been making a year from now.

Have Projects In Mind When Teaching Yourself to Code

Killian McGrath — Tue, 17 Mar 2020 00:49:58 +0000

Though I have a VERY long way to go in becoming a good programmer, I feel my progress teaching myself to code has exceeded what the average beginner achieves in a similar time frame.

While you could argue that I could have learned more in this time, I think it's at least safe to say I've put in more time over the last few months than the vast majority of other people on a similar journey (many 12-18 hour days).

In this article, I want to talk about how I've managed to stay focused on learning and coding almost all day every day for the last few months.

Yes, Not Everyone Has As Much Time to Invest

Yes, I'm aware not everyone has as much time to invest in learning to code. I've fortunately set myself up over the last few years by creating low maintenance websites (WordPress sites that didn't require any real programming knowledge) that generate enough monthly revenue that I feel comfortable taking time off to learn a new skill. I've also drastically cut down on my spending.

This article isn't necessarily about spending all day learning to code. Instead, it's about finding the motivation to stick with it when the initial excitement wears off.

Have Real Projects In Mind

Whether spending 12-18 hours a day or just a couple hours a week learning to code, I think it's extremely helpful having projects in mind that you want to build.

As you learn the basics of your programming language, start thinking of simple projects you'd like to use yourself. If you can't think of anything unique, try to recreate or even improve an existing tool.

My very first JavaScript coding project was a recoil calculator for a firearms review website I've run for a couple of years. While I figured out how to implement the logic in a text editor, I didn't actually know how to implement it on a website... so I ended up making it with a WordPress plugin.

Despite not using the code I had written, I was hooked and wanted to learn how to build a full website 'from scratch.' This led me to learn React & NextJS - "The React Framework."

Aside from shooting firearms, video games are one of my favorite ways to waste time have fun and relax. I've always wanted to create a website to do with gaming and eSports, so I started working on individual tools in that space.

My first project was a very simple sensitivity converter that allows you to find the same sensitivity in a different game. It's not going to change the world, but it felt great to code and release my first useful project to the world after around a month of learning.

Since then, I've continued adding additional tools to the website and am in the process of building an event organizer that helps users find eSports match streams and tournaments, starting with the game Counter-Strike: Global Offensive (CS:GO).

With the goal of creating a functional and useful gaming website, I've been able to maintain my passion for learning and writing code.

Learn By Doing

When I started doing online coding courses (Codecademy and Code With Mosh), I took diligent notes in Google Docs. As I tried to progress, it was incredibly frustrating to forget what I'd learned and constantly having to look over my notes before writing any code.

Beginning to work on real projects forced me to repeat what I'd learned and write code without a guide.

Initially, this was a huge struggle, but it led to me memorizing core concepts and learning how to efficiently search for coding answers on Google.

Final Thoughts

Weeks 3-6 of learning to code were a huge grind for me. If I hadn't begun working on real (yet simple) projects that interested me, there's a good chance I'd have given up.

Think of a project you want to build, search Google for project ideas, or expand on projects you're learning to develop in online coding courses.