DEV Community: Keme Kenneth

🚀 Deploy to AWS Lambda in Minutes with GitHub Actions

Keme Kenneth — Thu, 28 Aug 2025 15:41:09 +0000

Ever deployed your app to AWS Lambda or thought about doing it? Now it’s easier than ever with the new AWS Lambda Deploy GitHub Action.

In the past, deploying to Lambda meant writing long AWS CLI commands in your workflow or wrestling with complex CloudFormation templates. But now, with just a few lines of YAML, you can ship your code directly to AWS Lambda.

The AWS Lambda Deploy GitHub Action is an official tool from the AWS team, available right in the GitHub Marketplace. Since GitHub Actions is already one of the most user-friendly CI/CD tools, this new integration makes deploying to Lambda seamless.

How It Works

To get started, all you need is:

AWS credentials configured using the configure-aws-credentials action.

The aws-lambda-deploy action with just a handful of required inputs.

You can deploy any runtime supported by Lambda - Node.js, Python, Java, .NET, or Ruby.

Example Workflow

Here’s a simple workflow that deploys a Python app to Lambda whenever you push code:

name: Deploy to AWS Lambda
on: push

permissions:
  contents: read

jobs:
  lambda:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1                

      - name: Deploy Lambda Function
        uses: aws-actions/aws-lambda-deploy@v1.1.0
        with:
          function-name: my-moon-app
          code-artifacts-dir: .
          handler: app.handler
          runtime: python3.10
          role: arn:aws:iam::123456789012:role/my-lambda-role

This workflow runs automatically whenever you push code or commit to your repository.

Key Parameters

function-name – The name of your Lambda function

code-artifacts-dir – Directory of your app’s code (use . if it’s in the root)

handler – The entry point (fileName.functionName, e.g., app.handler)

runtime – The runtime your app uses (e.g., python3.10, nodejs18.x)

role – IAM role ARN for Lambda execution

The action also supports advanced options like package-type, image-uri, memory-size, timeout, environment, and architectures.
See the full parameter list 👉 here
.

Security Best Practice

⚠️ Never hardcode your AWS credentials in your workflow.
Instead, store them as GitHub secrets and reference them like this:

aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

Closing

With the AWS Lambda Deploy GitHub Action, deploying serverless apps is now as easy as pushing code. It’s fast, simple, and officially supported by AWS—making it a perfect fit for modern CI/CD pipelines.

How I made any browser tab my Notepad

Keme Kenneth — Tue, 21 Nov 2023 12:42:08 +0000

I like speed, and sometimes opening a notetaking app while you're on a page is just too slow for the thoughts going through our fast thinking minds. In that case, a quick browser tab is all you need to start jotting.

contenteditable might as well as be the most powerful HTML attribute in this regard.

All I did was to bookmark a tiny HTML script. I then made sure the bookmark icon (yes, I added an icon 😎) is visible when I hit new tab, and I have a ready cursor take my notes.

I applied basic styling, and also prevented accidental tab/browser closure.

_Here's the script. Customize it to your liking ✌️ _

data: text/html, <html><head><style>body::before{content: "Make great notes today!";color:cornflowerblue; font-size:3rem; margin: 2rem 0px 3rem;position:absolute;top: 0;}</style><script>window.onbeforeunload%20=%20e%20=>%20%20(e.returnValue%20=%20"Please,%20stay")</script><link%20rel="icon"%20type="image/png"%20href="https://img.icons8.com/color/72/typewriter-with-tablet.png"%20sizes="32x32"><title>Notr%20by%20Zeelz</title></head><body%20contenteditable%20style="font-family:%20'Monaco',%20sans-serif;font-size:1.1rem;line-height:1.4;max-width:60rem;margin:0%20auto;position: relative;padding:4rem;padding-top: 7rem;background-color:rgb(53,%2054,%2058);color:darkgray">

ProductivityTips #Notetaking #HTML

Slot ads in between your articles in Laravel

Keme Kenneth — Sun, 22 Oct 2023 14:34:37 +0000

The boss said to me "Mr developer, I want Google ads to show in between my articles. One above and another below an article is just not good enough". In my mind, I held my head with my both hands and thought to myself how the heck am I suppose to do that? An article is one very long string of text saved in a relational database. Anyway, I said I'll figure out a way to do it and continued with other tasks.

While I was on other things, like every programmer knows, my subconscious was at work trying to figure out a way to achieve that task. Then boom! it dawned on me that I could just break the long string into an array and loop over it slotting the ads in using some kind of condition. Now the question is how do I break an article into an array (pieces). I went looking around the database to see how exactly the articles are stored.

Turns out each paragraph of an article is stored as an HTML

. I thought to myself perfect, I'll just use "

" as the delimiter to split the long string to paragraph bits. Since it was Laravel, PHP has this convenient "explode()" method, what a name right? 😆 Also, I've always wondered by the delimiter has to be the first argument, I think it's intuitive to have the string as first arg though.

$content = explore("</p>", $post->content);

Now, I have a way to break the string. But doing so would remove the closing tags for all "

"s. The solution is to loop over each array item and add the close tag back, using array_map() function.

$content = array_map(function ($c) {
  return $c . "</p>";
}, $content);

I successfully made each paragraph an array item. Now, how do I slot in the ad? First, some articles are really short so I should make sure not to add ads in those. 5 became the number, if I split (aka explode) an article and the array items are not up to 5, no ad needs be there. Pass $content as a string in that case.

...

if (count(explode("</p>", $post->content)) >= 5) {
    $content = explode("</p>", $post->content);
    $content = array_map(function ($c) {
        return $c . "</p>";
    }, $content);
} else {
  $content = "";
}

...

Alright, this would do for my controller method. Let's pass it down to blade.

...

return view('posts.show', [
    'post' => $post,
    'content' => $content,
]);

...

$post has all the properties of an article - title, categories, tags, author, etc

Enter Blade

...

@if (is_array($content))
  @foreach ($content as $key => $i)
    @if ($key > 0 && Str::length($i) >= 300 && $key % 5 === 0 && count($content) >= 10)
      @include('google_ad')                        
    @elseif(!(Str::length($i[floor($key / 5) * 5 -1]) >= 300) && $key % 8 === 0 && count($content) >= 12)
      @include('google_ad')
    @endif
    <div class="post-content">
      {!! $i !!}
    </div>                     
  @endforeach
@else
  <div class="post-content">
    {!! $post->content !!}
  </div>
@endif 

...

Here, the outer @if is checking if an article even qualifies for ads, else show normal $post->content

If an article qualifies I'm then checking if a paragraph is up to 300 characters and that paragraph is divisible by 5 (5th, 10th, 15th,...), lastly, if it passes the previous tests, the total paragraphs must be up to 10, then include an ad.

If the 5th (10th, 15th,...) paragraph isn't long enough (that calc is wild I know) let's insert an ad after every 8th paragraph, provided the article is up to 12 paragraphs this time. The idea is if I've printed ad at position 15, 16th shouldn't even bother, 20th should have 24th skip, you get idea.

Well, there you go. In case, you've wondered how to slot ads or anything in between a long string of text.

AWS NETWORKING 101

Keme Kenneth — Sun, 08 Oct 2023 09:45:52 +0000

AWS networking can be overwhelming, at least it was for me at first. But when you piece its various parts apart it's simple and digestible.
In this post, let's understand the network components in AWS that make your EC2 instance possible, say to run a web server.

Outline/ Components

VPC
Network Access Control List (NACL)
Internet Gateway
Route Table & Routes
Subnets
Security Groups
Network Interface
NAT Gateway
Create EC2 Instance

We would be using AWS CLI, so go ahead, install and set up AWS CLI - https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html

VPC

A virtual private cloud (VPC) is a logically isolated portion of the AWS Cloud. Think of it as your own special cloud environment to create all kind of resources. A VPC spans a region. Subnets, explained later, helps VPC isolate resources to different availability zones (AZs) for redundancy.
VPC is the first resource you create before anything else. A VPC helps you define an IP range, which would be sub-divided by subnets. Your AWS account comes with a default VPC but you're not to use that for production.

Let's create a VPC and enable fancy hostnames
aws ec2 create-vpc --cidr-block 10.0.0.0/16

# Take note of the VcpId. I usually would store it as an env var

aws ec2 modify-vpc-attribute --vpc-id $VPC_ID --enable-dns-hostnames "{\"Value\":true}"

Check my post to understand VPC/Subnet IP range and CIDR sub-division - Dividing IPs for Multiple Subnets in a VPC

Network Access Control List

Network Access Control List (NACL) is a stateless network resource that controls traffic to/fro resources in a VPC from the subnet level. It allows or denies access.
Every VPC needs at least a NACL. Hence, on creation of a new VPC AWS automatically creates a default NACL attached to the VPC.

Internet Gateway

Internet Gateway (IGW) is truly a VPC's gateway to the internet.

Say, we have a website domicile in an EC2 instance with a public-facing IP, when Kayode from Ibadan hits that IP or hostname how does that request get to the EC2? Traffic gets to the EC2 through, you guessed it - IGW

Let's create one and attach it to our VPC, else Kayode won't be able to browse our fancy blog

aws ec2 create-internet-gateway
# Take note of IgwId from the output

aws ec2 attach-internet-gateway --internet-gateway-id $IGW_ID --vpc-id $VPC_ID

Route Table and Routes

A route table is basically a collection of routes that determine the flow of internal and external traffic to/fro resources in a VPC.

Upon creation of a new VPC, AWS automatically creates a default (main) route table

Since, a VPC may have multiple route tables each route table associates with at least a subnet so resources know which route table routes their traffic per the subnet they belong to. But then if route table/subnet association is not explicitly defined, it's assumed that all subnets are associated with the default (main) route table (The one AWS gave us).

We said a route table is a collection of routes, right? Yes, so we need to define a route for internet access (egress & ingress). This route would use the IGW as its target (router).

aws ec2 create-route --route-table-id ROUTE_TABLE_ID --destination-cidr-block 0.0.0.0/0 --gateway-id IGW_ID

# IGW_ID from when we created IGW

To get id of default route table list all route tables and copy the RouteTableId where the DestinationCidrBlock is 30.0.0.0/24
aws ec2 describe-route-tables

Subnets

Think of subnets as a way of splitting your VPC to bits, to be put in different AZs and to hold different applications or resources.

Create a subnet for the VPC. Let AWS place it in any Az within the VPC's region
aws ec2 create-subnet --cidr-block 30.0.0.0/16 --vpc-id $VPC_ID

Why 30.0.0.0/16? Just incase we decide to create another subnet.

Enable public IP generation for public subnet
If not EC2s you create in this subnet won't have public-facing IP address
aws ec2 modify-subnet-attribute --subnet-id $SUBNET_ID --map-public-ip-on-launch

AWS automatically associates this subnet to the default NACL of the VPC. NACLs are for subnets after all 🤷‍♂️

A subnet that wants internet access should have a route in its route table pointing to an IGW, that is how a subnet is even said to be "public" anyway.

Security Group

A security groups (SG) is a stateful firewall at the instance level, as against NACL at the subnet level.
You can create SG rules to define various traffic types, ports and sources.
Say we want to create a rule for tcp traffic for port 80 and 0.0.0.0/0 as source. This would allow anyone on the internet to access our blog on port 80.

Create a security group
aws ec2 create-security-group --vpc-id $VPC_ID --group-name http-80 --description "http 80"
# Copy the groupId (sg-04dffb200473a5ce9)

Add a rule to open port 80, (Allows non-secure http traffic from anywhere)
aws ec2 authorize-security-group-ingress --group-id $SG_ID --protocol tcp --port 80 --cidr 0.0.0.0/0

Go ahead and add a rule to open port 22 for SSH access

Network Interface

AWS Elastic network interface (ENI) is a virtual network adapter that lets resources between a VPC connect with each other and with the internet. ENIs are created in subnets.

So how does an ENI work you ask? An ENI connects an EC2 instance to network resources through its subnet.
Remember our subnet is associated with a route table, which has an IGW route. You get the flow
ENI => subnet => route table => IGW route => internet

But we mustn't create an ENI ourselves. AWS creates one for us on EC2 creation and attaches it to the instance. It would use the subnet and SG we specify for the EC2.

NAT Gateway

For every route table there's a default (local) route for resources within a VPC to communicate. But what if an EC2 which isn't public needs internet to download stuffs and update itself? This is where a Network Address Translation gateway (NAT gateway) comes in.
A NAT gateway allows instances in a private subnet to connect to the internet.

Create a NAT gateway in a public subnet

aws ec2 create-nat-gateway --subnet-id $SUBNET_ID
# Take note of the NatGatewayId

Create a route in a private subnet route table to target the NAT gateway

aws ec2 create-route --route-table-id ROUTE_TABLE_ID --destination-cidr-block 0.0.0.0/0 --nat-gateway-id NatGatewayId

Note: A private subnet is one that isn't associated with a route table, which has an IGW route.

Now the instances you create in this private subnet can't be accessed from the internet but can access the internet to download software packages.

EC2 Instance

This is not an exhaustive list of AWS network components, but they are the basic ones you need.

To finalize, let's create an EC2 instance utilizing the network resources created and configured above to install a web server to check our new networking prowess 😃

SSH Key Pair
To login (ssh) to the instance, we would be need an SSH key file.

Create an SSH key-pair with which you would ssh into the instance
aws ec2 create-key-pair --key-name fancy-blog-ssh

# Carefully copy and save the private key string to a file - privkey.pem

aws ec2 run-instances \ --image-id ami-067d1e60475437da2 \ --instance-type t2.micro \ --subnet-id $SUBNET_ID \ --security-group-ids sg-04dffb200473a5ce9 \ --key-name fancy-blog-ssh \ --associate-public-ip-address

image-id => OS image (AWS Linux 2)
instance-type => CPU & memory categorization (1vCPU 1GiB memory)
subnet-id => our subnet id
security-group-ids => our SG id
key-name => the name we gave our key pair
associate-public-ip-address => generate a public IP for this instance

# Take note of the InstanceId

You need the PublicIpAddress value, which is not populated at first but when you view that instance.

# To view the instance details to get our PublicIpAddress, run:
aws ec2 describe-instances --instance-id INSTANCE_ID
Let's SSH into our machine and install a simple web server - httpd
ssh -i privkey.pem ec2-user@54.210.11.65

sudo yum install httpd sudo systemctl start httpd

Now open your browser and enter http://54.210.11.65

You should see "It works!", if you didn't may have done something wrong. Comment below.

Resources
https://docs.aws.amazon.com/cli/latest/reference/ec2/

Tear Down
Always remember to tear down all the resources you create for learning purposes, to avoid incurring cost. AWS likes money like all of us 😆

❤️ ✌️

Dividing IPs for Multiple Subnets in a VPC

Keme Kenneth — Sun, 01 Oct 2023 10:12:11 +0000

When creating resources for your application in a cloud infrastructure like AWS you would categorize resources into public or private subnets, often spread across multiple Availability Zones (AZs) for high availability, all in a single virtual private cloud (VPC).

VPC defines the total IP range using CDIR (Classless Inter-Domain Routing) notation.
Eg. 10.0.0.0/22 - 1024 IPs

The number after the slash "/" - 22 (prefix length) is used to calculate the total IPs following a formula - 2^(32 - PREFIX_LEN). It could go from /0 to /32.

In the above VPC the CIDR is 10.0.0.0/22 - 1024 IPs
This means the total number of subnets will share 1024 IPs

But how do you now further divide these IPs for each subnet?

Octets referencing:
[10].[0].[0].[0] => [1st].[2nd].[3rd].[4th]

Subnet-1 => 10.0.0.0/24 - 256 IPs
Range 10.0.0.0, 10.0.0.1, 10.0.0.2, ... 10.0.0.255
Meaning the 4th or last octet is full it has exactly 256 IPs.

But anything below /24 would have eaten into the 3rd octet, say /23 - 512 IPs, because the last octet certainly don't have up to 1024 IPs

Subnet-2
Knowing that the last octet is full, 2nd subnet has the 3rd octet to play with.
Common practice when creating additional subnets is to increase the octet by 1 - 10.0.1.0/24 - 256 IPs
Range 10.0.1.0, 10.0.1.1 ... 10.0.1.255

I could choose any PREFIX_LEN (0-32) but I also have to bear in mind that the VPC's total range is 1024
If I did 10.0.1.0/22, this won't work because 1024 + Subnet-1's 256 is more than the VPC's total.

Subnet-3 => 10.0.2.0/24 - 256 IPs
Range 10.0.2.0, 10.0.2.1, 10.0.2.2 ... 10.0.2.255

I hope this brief explanation helps you understand how to allocate IP ranges to a VPC's subnets better.

Thanks for reading ❤️

Tailwind CSS and HTML for Production without Framework

Keme Kenneth — Fri, 05 May 2023 10:07:12 +0000

Want to use plain old HTML with Tailwind CSS but you're not using any framework?

Because https://cdn.tailwindcss.com is only advised to be used for "play" not for production.

Here's the ABC:

Assuming you already have your html site in a directory called 'site', create a parent directory to contain 'site' - 'tailwind/site'
Install and initial Tailwind CSS:
cd tailwind npm install -D tailwindcss npx tailwindcss init
Update the content array of your tailwind.config.js to:
content: ["./site/**/*.html"]
If you have any theme config go ahead to update the theme object as well
Create a tw.css file in your project root ./tailwind/tw.css and add the following tailwind directives:
@tailwind base; @tailwind components; @tailwind utilities;
Run Tailwind build command
npx tailwindcss -i ./tw.css -o ./site/main.css --watch
Tailwind will generate a main.css inside your /site dir. Add <link> it to your html and start using Tailwindcss utility classes
When you're done building your site, stop the tailwind cli and copy the site directory or push just the site directory to GitHub for onward deployment
Enjoy!

Downgrade create-react-app@latest to @17

Keme Kenneth — Mon, 24 Oct 2022 09:17:37 +0000

You ran npx create-react-app@latest to get things started. Now you want to take it down a notch, to say version @17.

Do these:

Remove node_module
Remove package-lock.json
In package.json > change version for react & react-dom to "^17.2.0" or your choice
Update index.js as shown:

import React from 'react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { render } from 'react-dom'; 

const root = document.getElementById('root');
render(

  <React.StrictMode>
    <App />
  </React.StrictMode>,

  root

);

reportWebVitals();

@17 doesn't use ReactDOM
Get root element directly with DOM selector
Pass root as 2nd arg to render()

Promise.all(), Promise.any() as Simple as ABC

Keme Kenneth — Fri, 21 Oct 2022 15:15:52 +0000

Many of us now regard the beloved Javascript Promise API as old fashioned, now that we have async/await. But Promises still have their place and are still very relevant.

But what if you're just beginning to learn Promises and are finding it hard to wrap your head around. Follow me briefly as I quickly explain it with a simple code example.

A promise is a function that helps you write asynchronous code. What this means is that if you make a network request in your program other parts of the program won't have to wait until your network request is complete. I'm sure you must have heard that Javascript is single-threaded, and runs your code from top to bottom.

Javascript Promise API is available to us as a class, all you have to do is to instantiate it as you would a class in OOP.

It takes two arguments, which are functions you use to return the data from your request or the error, if that was the case.

Conventionally, we call the arguments resolve and reject. The former returns your data, while the latter returns error.

Alright, enough talk. Let's see a simple example:

const userPromise = new Promise((resolve, reject) => {
    axios()
    .then((res) => resolve(res.data))
    .catch((error) => reject(error))
})

userPromise
.then((data) => {
    // use data here
})
.catch((error) => {
    // handle error elegantly
    console.log(error)
})

If what you need to make multiple API requests and you want all of them to complete (resolve) before you can do anything with them. You have just the perfect method of that - Promise.all()

This method takes a list of promises or requests that haven't resolved.

It resolves all your promises in a go if all of them went well but return the reject should any fail.

const axios = require('axios') #assumes axios is imported
const userPromise = new Promise((resolve, reject) => {

    const req1 = axios.get('https://reqres.in/api/users/1')
    const req2 = axios.get('https://reqres.in/api/users/2')
    const req3 = axios.get('https://reqres.in/api/users/3')

    Promise.all([req1, req2, req3])
    // # when all of the promises resolve
    .then(promises => resolve(promises))

    // # when any of the promises rejects
    .catch(err => reject(err))
});

userPromise
// #if all 3 reqs went well
.then((listOfPromiseData) => {    
    const users = listOfPromiseData.map(({data}) => data.data.email)
    console.log(users)
})
// if any of reqs went south
.catch((err) => console.log('just err...'))

Remember in the above example all 3 requests must be successful for .all() to resolve. But in other situations you might need just one of the requests to come true to proceed, in such case the candidate is Promise.any(). I'm sure you don't need another example to show this. Use .any() in place .all() and intentionally fail of your requests.

Hope you've learnt something today. Thank you for reading ❤️

Scaling & Load-balancing NodeJS Containers with Nginx

Keme Kenneth — Sat, 08 Oct 2022 12:33:35 +0000

So, your NodeJS application is getting loads of requests, and it has become too much for a single server to handle. Now, you don't have a fancy AWS managed service to help you. The solution would be to manually scale your servers horizontally. Horizontally scaling is provisioning replica servers as opposed to increasing the CPU/memory combination of a single server to handle more load.

Luckily, Docker and Docker-compose with Nginx could easily get the job done for you.
Docker could easily scale your servers to any number. With Docker-compose, the job becomes even easier as you don't always have to type in a bunch docker commands.

Okay, let's assume you've used Docker to replicate your servers to 3, meaning your NodeJS application is now running in 3 replica containers. The question becomes how would each of the server know when to handle a request? In comes Nginx.

Nginx: The software load balancer, reverse proxy, web server, & content cache with the enterprise features and support you expect.

Nginx at its core is a web server.
While your 3 containers are running and not knowing when any of them should rise to the occasion and handle a request, Nginx can help with that situation with its load-balancing feature.

Load balancing refers to efficiently distributing incoming network traffic across a group of backend servers, also known as a server farm or server pool. - Nginx

Nginx in this case, will act as a proxy server, standing between your client requests and your 3 servers.

When a new request comes in Nginx will accept it and route it to one of the servers. It has 3 algorithms it uses to tell which server to route traffic per time. The default of those algorithm is round-robin.

Round-robin:
First request to to server1, second request to server2, and third to server3, then repeat

Say your NodeJS server is listening on port 3000, a simple docker-compose script would look something like this:

version: '3.9'

services:
  nodeapp:
    build: .
    ports:
      - "3000"

  nginx:
    image: nginx:latest
    ports:
      - "4000:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf

docker-compose.yml

The compose script builds your NodeJS app from your Dockerfile and pulls Nginx server from docker public registry. The nodeapp service is not mapped to any specific host port because only a single machine can map to a host port at every given time. But the nginx server would be taken requests on port 80, mapped to the host's 4000.

Furthermore, we added the volumes directive, to enable to us write a config file to nginx to build. This config is the crux of this setup.

events {
  worker_connections  4096;
}

http {
    server {
        listen 80;
        location / {
            proxy_pass http://nodeapp:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

nginx.conf

Nginx listens on / (home route) on port 80, then routes traffic to nodeapp on port 3000 using its proxy_pass directive.

Complete scripts including Dockerfile and simple Express app are available on my Github https://github.com/zeelz/zeelz-developer/tree/nodejs-docker-compose-nginx

Video Walkthrough

Beautiful color scheme for iTerm2/Terminal

Keme Kenneth — Sat, 08 Oct 2022 08:38:29 +0000

Grey Green

https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/Grey-green.itermcolors

How to Use:

> iTerms2 menu
>> Preferences
>>> Profiles tab
>>>> Colors tab
>>>>> Color Presets dropdown
>>>>> Import downloaded color file
>>>>> Choose imported color scheme from list

Enjoy!