Forem: kieronjmckenna

How to Create a (Nearly) Free Serverless Rate Limiter on AWS

kieronjmckenna — Mon, 11 Nov 2024 22:07:50 +0000

This post was originally posted on my company's blog here.

I recently wanted to implement a rate limiter in typescript for my site Opinly and seeing as we use SST to deploy on AWS, I took a stab at writing one up myself using DynamoDB. Needless to say (considering I'm blogging about it) I'm pretty happy with how it came out.

There was the option of using Redis on Upstash, but I wasn't keen to bring in a new third party dependency if I didn't have to.

I've been using DynamoDB for a while and seeing as its scale to zero serverless and decently low latency I thought it would be a great choice.

I managed to make the whole rate limiter work with only one DynamoDB hit per request, so I've been seeing added latency in the low double digit milliseconds which is acceptable for my use case.

The Code

Firstly, some things to note regarding setting this up yourself.
Make sure that your Partition Key, Sort Key, TTL attribute, and Table Name are changed to match your setup.

This is how my infrastructure as code looks with SST, but its just as easy with CDK or the console

Moving on to the fun stuff, the real meat of the functionality comes from the UpdateCommand call made to dynamo db

What we're doing here is calculating the time period for the counter that we're going to be incrementing.

Once that is calculated we attempt to increment the count, but we have a condition on the call to ensure that the limit in the database is less than or at the limit we've set in the parameter.

If the limit is below our rate, then we return false. If not then we will fall into the catch block.

DynamoDB will throw a specific Error class called ConditionalCheckFailedException only when the condition specified did not match. In our case its

"attribute_not_exists(#rateLimitCount) OR #rateLimitCount <= :limit"

If it is that specific type of error then we either throw the error specified or return true depending on the parameters.

In the rare case that dynamo throws a different error then we throw that and let the next guy deal with it.

Conclusions

I like the implementation of this rate limiter as its:

Very simple
Doesn't require any third party services
Can be extended for more functionality such as blocking a user after too many exceeded attempts if needed.
Low latency - As I mentioned the single request varies between 5-50ms but this could be improved if you provisioned DynamoDB with the necessary Write Capacity. I just have mine set to pay per request.
Scalable - Can scale as far as Dynamo can, which is the whole point of the database
Cheap - We're using 1 RCU per request, and the TTL means that the counters will delete themselves when needed

Automating Button Clicks on Websites with Selenium

kieronjmckenna — Mon, 08 Apr 2024 09:23:59 +0000

Read on to find out how to setup your Python environment and use a script that demonstrates how to use Selenium with Python to automate button clicks on a website.

Automating Button Clicks on Websites with Selenium

In this blog, we'll explore how to automate the process of clicking buttons on a website using Selenium, a powerful tool for controlling web browsers through programs. We'll write a simple Python script that automates button clicks, a technique useful for a variety of tasks such as testing websites.

Setting Up Your Environment for Running Selenium Scripts in Jupyter Notebook

To run Selenium scripts, particularly for automating button clicks on a website using a Jupyter Notebook, you need to set up your environment as follows:

Install Python: Ensure that Python is installed on your computer. You can download it from the official Python website.
Install Jupyter Notebook: Jupyter Notebook is an interactive computing environment that enables users to create and share documents containing live code, equations, visualizations, and narrative text. Install it by running pip install notebook in your command line.
Install Selenium: Selenium is a suite of tools for automating web browsers. Install it using Python’s package manager by running pip install selenium.
Download WebDriver: For this example, we're using Google Chrome as the browser. Therefore, you need to download ChromeDriver, which is a standalone server that implements WebDriver's wire protocol for Chrome. Ensure the version of ChromeDriver matches your Chrome browser's version.
Launch Jupyter Notebook: After installation, launch Jupyter Notebook by running jupyter notebook in your command line. This will open the Jupyter Notebook interface in your default web browser.
Create a New Python Notebook: In the Jupyter Notebook interface, create a new Python notebook where you can write and execute your Selenium script. This setup provides an interactive and user-friendly environment to run and test your Selenium scripts efficiently. Writing the Script Here's a basic script outline:

Key Points of the Script

Loop for Repeated Actions: We use a loop to repeat the process.
Timing: time.sleep(3) sets a delay to prevent rapid-fire requests, which is essential for not overwhelming the server or getting flagged as spam.
Incognito Mode: Running the browser in incognito mode helps to avoid issues with cached data and cookies.
Finding Elements: driver.find_element is used to locate the button by its CSS selector. Ensure you have the correct selector for the button you intend to click.
Error Handling: The try-except block is crucial for handling exceptions and avoiding crashes.

Ethical Considerations and Best Practices

Automating interactions with websites should be done responsibly. Abide by the terms of service of the website, and ensure your actions do not harm the website’s functionality or the user experience for others.

Conclusion

This script demonstrates a basic yet powerful way to automate browser tasks using Selenium in Python. It can be extended and modified for more complex scenarios and different types of web interactions. Always remember to use such automation responsibly and ethically.

The Best Way to Use Open AI and Typescript

kieronjmckenna — Tue, 02 Apr 2024 15:13:00 +0000

(Update April 2024 - when this article was written OpenAI didn't have function calling within tools, read to the end for the updated code)

In this article you'll find out how to fallback from gpt4 turbo preview to gpt 4 when using function calling (Relevant November 2023 as gpt4-turbo is in preview and heavily rate limited), and with that response validate and type your function calling responses

The function calling feature is very powerful (we use it all the time to turn unstructured data into structured data) as it allows us to get JSON data for whatever function we want to call. But it's still possible that GPT could hallucinate bad JSON data, or the wrong type, or a wrong field name...I could go on (just last week the JSON coming back couldn't be parsed because it was malformed when telling GPT4 to use emojis).

Besides those outliers, we want our response from GPT to be typed for use elsewhere in our application rather than just having it as "any".

So with that context let's get into the code. We're going to use an example where we're taking in a question from a user asking questions on an e-commerce site as a way to show multiple functions we might call based on the user's question.

Code

Real quick install OpenAI:

and instantiate the OpenAI client:

GPT4 Turbo to GPT4 Fallback

Now we want to set up the ability to fallback from one GPT model to another. As I mentioned before, it's currently November 2023 and GPT4 Turbo is still in preview and rate limited. So for going to prod, we need to have a fallback to plain old GPT4 😔

So just a few try catches and we've got our fallback setup. You could use this for falling back from any model to another.
You might be wondering why I didn't use Omit<..., "model"> rather than passing each of the parameters individually. I tried this, spreading omitted objects into the OpenAI call, but it broke the return type as it uses generics internally based on whether you pass functions in... so try to get that working at your own peril.

Now, time to make our type-safe call to OpenAI.

So... a lot of code there, but let's break it down.

At the top of the file we're defining both the data we want to come back from open ai for each function and a mirror schema in Zod for each type to be passed into our functions.
We create a map for all the functions and the parser to sanitise the data coming back from OpenAI.
We use the function we defined above to make the call with a fallback from GPT4 turbo to regular GPT4. If you're reading this in the future you will most likely not need this, but who knows maybe you'll swap out the models from GPT4 turbo and GPT4 to GPT5 turbo and GPT5
We use the map we defined to call the function with the data that's sanitised with the appropriate parser. We're using Promise.all here as Open AI just announced that function calling can return multiple function calls, but adjust to your use case

Remember this is just an example to show how to make an Open AI calls type-safe and the whole e-comm customer support thing is erroneous. This has been very useful for us when we forgot to mark fields as required in the open AI schema but they came back as undefined, or catching random bad responses from Open AI.

From there, you're good to integrate OpenAI into your typescript project and be able to sleep at night knowing that the data is at least in the right format as it flows through your program.

Update April 2024

Since writing the article OpenAI has changed their APIs slightly to move function calling within tools, and we've also figured out how to reduce the duplication between Zod and the JSON schemas.

Updating Functions To Tools in OpenAI

Updating our fallback function to using tools looks like this:

Not much of a change, just moving away from the function calling API to use the new Tools API.

Now we can change our call to OpenAI:

We're still using the example from above with a few minor changes.

Tools API

We're now passing an array of objects that specify the type of tool we're calling. For now, this is always "function" but in the future, there may be options to use data analytics and more.

Inferring JSON Schemas from Zod

In the original example, we were writing out the JSON schemas to match our zod parsers, but with the help of zod-to-json-schema we can now infer the descriptions and rules directly from Zod.

Thanks for reading!

WebP Image Optimisation + BlurHash with Sharp in NodeJS

kieronjmckenna — Tue, 02 Apr 2024 07:54:06 +0000

In this blog post, we'll cover how to convert images into WebP format and create blur hash images to store in your database to show as placeholders. WebP is used to create images that only need to be used in applications.
Resizing to Fit WebP
First, there's an important thing to note when using WebP. There is a maximum width and height of 16383 (according to Google, the creators of WebP - documented here).
If you forget to implement this you'll get a sharp error saying:

Processed image is too large for the WebP format

So we need to implement code to resize this if necessary before converting:

This code just does a quick check to see if it needs to be resized and returns the sharp instance if needed.
Notice that width and height are optional on the metadata. I haven't seen these values returned as undefined, but in the event an image is corrupted ensure to handle the errors.
Converting To WebP
Next, we convert the image to WebP. We'll make use of the function above to resize if needed.

This returns our converted image to WebP.
For more configuration read more about using Sharp here
Creating the BlurHash
We also want to create a BlurHash to store in our database for showing a placeholder while the image loads over the network.

This returns us the 36-character hashed string that can be used with BlurHash on the front end.
In our react front end we can use it like this:

Convert to fit your use case, but that's all you need to show blurred placeholders before your already optimised WebP image loads on the front end.
Read more about BlurHash usage here
Thanks for reading

Trigger a Typescript AWS Lambda on Receiving an Email with SES

kieronjmckenna — Tue, 02 Apr 2024 07:47:41 +0000

In this blog post, we’ll discuss how to trigger a Typescript AWS Lambda function when you receive an email in AWS SES. We’ll be using SST V2 in this example, but it’s easily convertible to CDK if needed.

As a prerequisite, you’ll need to set up a verified identity and inbound rule in Route 53 for this to work. The docs found here are pretty straightforward.

Infrastructure as Code (IAC)
First, we need to set up the stack and IAC for the inbound rule and function.

Ensure to change the inbound domain and function path to fit your project. This will route all traffic from the domain to your lambda function.

We also need to go into the console and mark this inbound rule as active. Note you can only have one active rule per region per account — but nothing is stopping you from adding more domains to the recipients array. We’ll cover how to route to your desired operation below.

AWS Lambda Typescript Handler
Next, we need to set up the handler to perform whatever operation we need.

With this function, we can perform whatever operation we need within our Typescript code.

Thanks for reading!

IOS/Android App Store Redirect with AWS CloudFront Functions and CDK

kieronjmckenna — Wed, 20 Sep 2023 12:32:04 +0000

I recently wanted to setup a link to redirect people who either clicked on a link or scanned a QR code to be taken to their relevant app stores on IOS or Android for my React Native App. I’m sure theres a few websites out there that do this, but I preferred to have it under my domain, and didn’t want to pay for it.

I thought I’d give it a go using CloudFront functions. It was a bit tricky to get setup using CDK but I’m happy with how it turned out, so I thought I’d share in case anyone was looking to setup a similar thing.

You may be thinking, is setting up a whole CDN a bit overkill for a redirect based on a user agent header? Probably. But its not actually that much code , users wont have to wait for a cold-start or experience distance latency, and CloudFront is pay as you go. So why not.

I’m going to be writing the CDK code in Typescript, and I won’t be diving into setting up Route53, or a CDK project as theres plenty of tutorials out there on those topics.

CDK Stack

First thing to note — make sure this stack is deployed in us-east-1 as that’s where CloudFront functions/distributions must be deployed.

First in the CDK stack we want to add something like this:

In the stack we’re creating a cloudfront distribution, s3 bucket, acm certificate and cloudfront function.

The bucket doesn’t actually do anything here, but the distribution needs an origin of some kind. Note we’re setting the cloudfront function as the Viewer Request which means it will be triggered before the request ever gets to the origin.

Since we’ll be setting up the function to redirect the request, the request never reaches the bucket.

The other key part of the configuration is the line:

originRequestPolicy:  
cloudfront.OriginRequestPolicy.ALL_VIEWER_AND_CLOUDFRONT_2022,

This tells cloudfront to forward headers to our function that we’ll need in order to redirect based on the device type. You can read more about it here:

AWS CloudFront Headers Docs

CloudFront Function

Next we need the js file that we pointed the CloudFront function to in the stack:

Make sure to line up the path to the function with whatever you set it as in the stack. In our example this file is at src/functions/app-store-redirect.js

The function is making use of the CloudFront headers that we specified to be forwarded to the origin. Customise this to your needs as it can probably be used for more than this simple use case. Make sure to redirect in every scenario unless you’ve setup the bucket to handle requests, otherwise you’ll get an error.

Route 53

Finally we need to create a record to tell Route53 to point whatever domain/path we want to the cloudfront distribution.

I just used the console to create the record using an alias. Read here about how to do that here:

AWS Route 53 CloudFront Distribution Docs

And thats it, if users are on an iPhone they’ll be taken to the IOS App Store and if they’re on an Android the Google Play Store.

Hope you found this useful.