Debounce API Requests in a JS Class

I have a react application that needs to access an API endpoint on the client side - which is hit when a user clicks on a button, as well as a few other places in the UI. The trouble is, the API endpoint is a cloud function, which is charged on a per-execution basis.

I don't want users to be able to spam-click this button and have to pay for it, but I also don't want to disable the button during the request - which would encourage the user to view the source and spam my API themselves. I want something to work invisibly, so they think that everything is working as they expect - a new request every time they click.

Because of how I crafted the API response, only the last request really matters within a specified amount of time, which means a debounced API request function would be perfect.

Here's an overview of how I implemented it, based off of the lodash debounce method:

Mass Effect Checklist

Check it out →
GitHub repo →

I wanted to build something for my portfolio, so I decided to over-engineer something basic with a sketchy idea: the Mass Effect Checklist! 😃

Mass Effect is by far my favourite game series, I've played through the game so many times that I could just-about recite everything by heart.

To aid in my unhealthy addiction, I created a list of things that I need to do - allowing me to get to the ending that I like the most. Sometimes I forget what I'm supposed to do or how to do something, and end up having to go over to the Wiki. The problem is, the Wiki is hard to follow. I felt like this checklist format is easier and more logical.

It's currently at something of an MVP stage, and at the time of writing, I haven't even finished typing-up all the missions. At the moment it's just a proof-of-concept.

I've recently forced my friend to finally experience the game, so he's my test guinea pig. However, I would love it if more people gave it a go, so send my some feedback by contacting me here after using it for a bit.

Future changes will mostly be on UX, interactivity (such as a success calculator for certain missions), a timeline to show an overview of the list, syncing the checklist to the cloud, and maybe a saved-game upload functionality - to check the list based on your progression, check success requirements for missions before you even get to them, and show some stats that are normally hidden in the game.

Technologies used

  • React
  • Netlify
  • Foundation
  • Azure Functions
  • Application Insights

Check it out →
GitHub repo →

Notes on Cloud Providers Offerings for Serverless

I just had some notes I wanted to share regarding using serverless functions on a couple of different cloud providers.

Microsoft Azure

  • My go-to provider for functions
  • Supports secrets for things like connection strings
  • Can be configured to use inputs and outputs from Azure services, already authenticated
  • Works best with functions written in C# (non-crx)
  • C# script (crx) is not really supported in IDE's, mostly to do with importing libraries
  • Node.js and Python are still not quite mature yet
  • C# projects have the fastest cold-startup, while Node.js is the slowest
  • Python is always slow to run regardless, because it's run through some type of virtualised environment that you have to set up yourself
  • Good luck using Python wheels or pip
  • Function runtime is based on input and output - if for example you send an output, the function will be terminated soon-after, rather than letting the function terminate in code. This makes eventual data design impossible.

Google Cloud

  • Node.js functions only
  • Slightly slower to run overall, but doesn't appear to have a cold-startup that I could see
  • Function runtime is NOT based on input and output, functions can terminate programmatically
  • Secrets storage, like environment variables, are not supported
  • Git integration was impossible for my workflow for the above reason, had to paste into the web editor with my secrets in plaintext.
  • Google Cloud libraries are automatically imported, and already authenticated based on the account running the function

Steganographic Message Extraction from Image

Steganography is the practice of hiding data in plain sight, such as within the pixel data in an image, video, or audio file. There are infinitely many ways of doing this, by changing the order or distance that the message bits are stored from each other - but it is most important that it remains constant, and that the person you're sending the message to knows how to decode it!

I have a snippet for you to do the decoding. This snippet assumes you have an image where a pascal-type string message has been stored in row-major, least-significant-bit fashion.

This snippet requires PIL, or its modern fork - Pillow (pip install Pillow)

HTTP Authentication Dictionary Attack

Here's a little snippet of Python code to crack HTTP digest authentication, getting a user's password given information from a captured packet and a wordlist.

You can find some good wordlists right here.


Debounce API Requests in a JS Class

I have a react application that needs to access an API endpoint on the client side - which is hit when a user clicks on a button, as well as...