Forem: C I R L O R M ⚡

I built open-source alternation to Klark

C I R L O R M ⚡ — Thu, 09 Apr 2026 11:59:33 +0000

I’ve always loved the sound of premium mechanical keyboards, but I couldn’t justify dropping $5 on an app like Klack. Instead of opening my wallet, I decided to build my own version during my lunch break with Claude Code.

From the first prompt to a working MVP, it took less than an hour. I even decided to go a step further and added tactile sounds for mouse clicks too. What started as a way to save five bucks turned into Klick - a free, open-source alternative for anyone who wants that satisfying acoustic feedback without the price tag.

Check it out here: https://github.com/champ3oy/Klick/releases

Renew SSL certifications

C I R L O R M ⚡ — Thu, 24 Oct 2024 10:02:18 +0000

Renewing an expired SSL certificate on an AWS EC2 instance using Certbot involves a few straightforward steps. This guide will walk you through the process to ensure your website remains secure and accessible.

Prerequisites:

An AWS EC2 instance running your web application.
Certbot installed on your EC2 instance.
Administrative (sudo) access to the EC2 instance.
Your domain is correctly pointed to your EC2 instance's public IP address.
Ports 80 (HTTP) and 443 (HTTPS) are open in your security groups.

Steps to Renew the SSL Certificate:

1. Connect to Your EC2 Instance

Use SSH to connect to your EC2 instance.

ssh -i /path/to/your/private-key.pem ec2-user@your-ec2-instance-public-dns

Replace /path/to/your/private-key.pem with the path to your SSH key and ec2-user@your-ec2-instance-public-dns with your EC2 instance's user and public DNS.

2. Check Certbot Installation

Ensure that Certbot is installed on your system.

certbot --version

If Certbot is not installed, install it using the following commands based on your OS:

For Ubuntu/Debian:

sudo apt update
sudo apt install certbot

For Amazon Linux/CentOS:

sudo yum install certbot

3. Stop Your Web Server (If Necessary)

Stopping your web server may be necessary if Certbot needs to bind to ports 80 or 443 directly.

For Apache:

sudo systemctl stop apache2

For Nginx:

sudo systemctl stop nginx

4. Renew the SSL Certificate

Attempt to renew all certificates managed by Certbot.

sudo certbot renew

Notes:

Certbot automatically checks for certificates that are due for renewal and attempts to renew them.
If your certificate has already expired, you may need to force renewal or obtain a new certificate.

Force Renewal:

sudo certbot renew --force-renewal

Obtain a New Certificate (if renewal fails):
Replace yourdomain.com with your actual domain name.

For Apache:

sudo certbot --apache -d yourdomain.com -d www.yourdomain.com

For Nginx:

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Using Standalone Mode (if no web server is running):

sudo certbot certonly --standalone -d yourdomain.com -d www.yourdomain.com

5. Start Your Web Server

After renewal, restart your web server to apply the new certificate.

For Apache:

sudo systemctl start apache2

For Nginx:

sudo systemctl start nginx

6. Verify the Renewal

Check that your SSL certificate has been renewed successfully by accessing your website via HTTPS and inspecting the certificate details in your web browser.

Alternatively, use online tools like:

7. Set Up Automatic Renewal (Optional but Recommended)

Certbot can automatically renew certificates before they expire. This is often set up by default, but you can ensure it's configured correctly.

Check existing cron jobs:

sudo crontab -l

If not present, add a cron job:

sudo crontab -e

Add the following line to run renewal twice daily:

0 0,12 * * * /usr/bin/certbot renew --quiet

This schedules the renewal process to run at midnight and noon every day.

8. Troubleshooting Common Issues

1. Port Conflicts:

Ensure no other service is occupying ports 80 or 443 during the renewal process.

2. DNS Issues:

Verify that your domain's DNS records correctly point to your EC2 instance's IP address.

3. Firewall Restrictions:

Confirm that your security groups allow inbound traffic on ports 80 and 443.

4. Permission Errors:

Run Certbot commands with sudo to ensure proper permissions.

5. Rate Limits:

Let's Encrypt enforces rate limits. If you hit these limits, you'll need to wait before attempting again or use the staging server for testing:
```
sudo certbot renew --staging
```

Conclusion:
By following these steps, you should successfully renew your expired SSL certificate on your AWS EC2 instance using Certbot. Regularly monitor your certificates and ensure automatic renewals are functioning to maintain uninterrupted secure access to your services.

References:

EDD with event emitters

C I R L O R M ⚡ — Thu, 24 Oct 2024 09:59:28 +0000

Building an event-driven application in node.js using event emitters. A built-in module that is core to node.js architecture. The EventEmitter is a class that helps us create a publisher-subscriber pattern in node.js.

We’ll see how to use EventEmitter by building a bus booking application where users can book bus seats and receive an email notification when booking is successful. Getting started, we’ll set up a simple express application with a /book route.

index.js

import express from "express"
import { addTrip } from "./utils"

const app = express()

app.post("/book", (req, res) = {
    const {origin, destination, date} = req.body;

    if (!(origin && destination && date)) {
        res.status(400).send("Invalid request")
    }

    addTrip({
        origin, destination, date
    }).then((response) => {
        if (response.status) {
            // send notification to user
            // we can make a request to an email service (like resend) 
            // to send the user the notification. But this will mean we'll have
            // to wait for a response from resend before sending a response to the client.
            // This makes the response time a bit longer
        } else {
            // somehting went wrong
        }
    }).catch((error) => {
        // an error occured
        res.status(400).send(error.message)
    }).finally(() => {
        res.status(200).send("Request Received")
    })
})

app.listen(3000)

In this simple route, adding the logic to send email notifications directly there will cause our api to be a bit slower. So what we can do is to use an EventEmitter when after adding the trip to our database we emit a named event and a lister will pick the event and send the notification. Here’s how we can add that.

import express from "express"
import EventEmitter from "node:events" // import the EventEmitter class
import { addTrip } from "./utils"

const app = express();
const myEmitter = new EventEmitter(); // We create an instance of the EventEmitter class

// Let's setup a listener to listen for a named event, in this case 'booking'
myEmitter.on("booking", (trip) => {
    // Make the call to your email service to send the email
    console.log(trip)
})

app.post("/book", (req, res) = {
    const {origin, destination, date} = req.body;

    if (!(origin && destination && date)) {
        res.status(400).send("Invalid request")
    }

    addTrip({
        origin, destination, date
    }).then((response) => {
        if (response.status) {
            // emit an event and the listener will pick it up
            let trip = response.data
            myEmitter.emit("book", trip)
        } else {
            // somehting went wrong
        }
    }).catch((error) => {
        // an error occured
        res.status(400).send(error.message)
    }).finally(() => {
        res.status(200).send("Request Received")
    })
})

app.listen(3000)

How to deploy to an AWS ec2 machine using Github Actions

C I R L O R M ⚡ — Thu, 18 Apr 2024 16:59:21 +0000

I recently needed to set up an automatic or continuous deployment to a project I was working on and I needed to use Github actions. Being my first time I went online to read up on it a bit and also watched some Youtube videos, however I couldn't understand everything well so I explained my need to chatGPT, it's answer was enough to get me started but I needed to do some important changes on my own before my CI worked.

Here are my steps.

Create a Github workflow directory in the root of your project ./github/workflow
Add a yml file for you workflow deploy.yml I'm using deploy because the workflow is for deploying my project
Now you need to define your workflow in the deploy.yml file `name: Deploy Website

on:
push:
branches:
- main # Change this to your main branch name if different

jobs:
deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout code
  uses: actions/checkout@v2

- name: SSH into EC2 instance and deploy
  uses: appleboy/ssh-action@master
  with:
    host: ${{ secrets.EC2_HOST }}
    username: ${{ secrets.EC2_USERNAME }}
    key: ${{ secrets.EC2_SSH_KEY }}
    script: |
      cd /path/to/project
      git pull
      sudo pm2 stop app
      sudo yarn build
      sudo pm2 restart app

Now the easy part is over, lets get into some ssh madness

Set up ssk key
login to your ec2 instance ssh and run the following commands to generate ssh key pair
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
you need to get your secret key to add to your github actions. Open the private key file (~/.ssh/id_rsa) with a text editor and copy its contents. Then, go to your GitHub repository and navigate to Settings > Secrets. Click on "New repository secret" and add a new secret with the name EC2_SSH_KEY and paste the contents of the private key file into the value field.

Finally, Add Secrets to GitHub Repository: In your GitHub repository, go to Settings > Secrets and add the following secrets: EC2_HOST: The IP address or domain name of your EC2 instance. EC2_USERNAME: The username to log in to your EC2 instance.

Elevate Your User Growth with Refir: The Secret

C I R L O R M ⚡ — Thu, 28 Sep 2023 15:39:12 +0000

Are you looking to take your user growth to the next level? Referrals can be a game-changer, and we've got just the platform to help you harness their power effortlessly. Meet Refir, the ultimate referral platform designed to supercharge your user growth.

Get started Now

The Power of Referrals

Referrals have long been recognized as one of the most effective ways to grow your user base. When your existing users recommend your product or service to others, it's a vote of confidence that carries immense value. However, managing referral programs can be complex and time-consuming. That's where Refir comes in.

Key Features of Refir

Refir offers a host of features that make it a must-have for anyone serious about user growth:

1. Easy Integration

Refir seamlessly integrates with your existing systems. Whether you're running a startup or a well-established business, you can incorporate Refir into your workflow without a hitch. Say goodbye to complex integrations and hello to streamlined user growth strategies.

2. Real-Time Analytics and Insights

Gaining insights into the performance of your referral program is essential. Refir provides real-time analytics that allow you to track trends, measure success, and adapt your strategy on the fly. Data-driven decisions have never been easier.

3. Customizable Referral Programs

Your brand is unique, and your referral program should reflect that. Refir lets you tailor your referral programs to match your brand's identity and goals. Create personalized referral experiences that resonate with your users and drive engagement.

4. Instant Webhook Notifications

Stay in the loop with instant webhook notifications. When a new referral comes in or a user hits a milestone, Refir can send you real-time alerts. This feature ensures you never miss a beat and can respond promptly to important events.

Join the Refir Revolution

We believe that Refir can offer tremendous benefits to startups, businesses, and online entrepreneurs. But we don't just want you to take our word for it; we want you to experience it firsthand. That's why we invite you to join the Refir revolution.

Ready to elevate your user growth game? Take Refir for a spin today and discover the difference a powerful referral platform can make. Sign up for early access and be among the first to harness the full potential of referrals.

Get started Now

Build responsive websites with just 1 function

C I R L O R M ⚡ — Sat, 26 Aug 2023 14:22:40 +0000

Building responsive websites in today's world can be a hell lot of work. Mordern CSS doesn't make it any easier when using a ton of media-queries for each device screen size. I have been building website for more than 4 years and the only thing I hate about my job is building resposive pages for screens that people may not even get to use. My laziness led me to come up with an easier and scalable way of making my websites truely responsive.

Welcome Sass and mixers. Sass is a CSS framework that allows you to create functions called mixers. Now we can create a functions that converts our sizes to a responsive value when the screen size changes.

First we need to define a viewpoint

$custom-viewport: 1920;

This viewpoint is the neutral screen size you are building for.

Then create the main function, feel free to call it anything. Let's call it get-vw today

$custom-viewport: 1920;

@function get-vw($font) {
  $custom-context: $custom-viewport * 0.01 * 1px;
  @return $font / $custom-context * 1vw;
}

We are 90% done, now all that is left is to know how to use it.
Simple wrap the function arround all your px values. Example

h1 {
  font-size: CustomResponsive(36px); // Font size now dynamically adapts!
}

Well done, you have archived responsiveness.

Automate Git in 3 lines of code

C I R L O R M ⚡ — Thu, 17 Dec 2020 15:35:17 +0000

Hi there, I am going to show you how to automate your most used git commands in just three lines of code.
Our program will be able to run add, commit and push commands for us in just on call. Let me show you.

Writing the script

We are using shell script or bash to run our commands for us.

We will have to create a file name script.sh You can change the name to anything but maintain the .sh extension.

2.Then we write the code

#!/bin/bash

# This is the add command that will run add all your modified files to the working tree
git add .

# The git command takes an argument when running the script to use as the commit message
git commit -m "$1"

# Finally we push our code.
git push

And that's it, we are done.
Then we can run the script by running bash script.sh "commit message here" in the terminal.

Thank you for reading.
Twitter
Website

How to build Shazam-like app in React Native

C I R L O R M ⚡ — Thu, 03 Dec 2020 08:54:15 +0000

We are building a Content Recognition app using ACR-CLOUD API. You can use acrcloud in almost any language, they have an android SDK that can be use with react native if you know to do it. We are going to use their Python SDK rather because it's much easier to implement.
We will be building a back-end in python which will handle all the automatic recognition and a front-end in react native which will handle the audio input.

Concept

How will our application work?
ACR-Cloud allows us to scan audio files and it will recognize the song playing, unlike popular methods where the song is listened to in real-time and recognized, we are going to record the audio and scan it but we will create the impression that we are listening to it in real-time.
On our frontend, we will record a 10 sec audio clip and send it to our backend which will perform the automatic recognition and send back the response to the front-end, all this happens in less 20 sec which means processing of the clip takes less then 10 sec on the server.

Back-end in Python

For the back-end I used Flask to create a simple REST API that handle a file upload.
The API saves the file and passes the filepath to the recognizer. The recognizer returns a JSON object, this object is then returned to the frontend.

GITHUB github repo

Front-end in React Native

Our app uses expo-av for audio recording, the recording is done in 10 sec duration and the file is sent to the API on the back-end, the response contains all the details about the song found including it's spotify ID.
We are going to use the spotify ID to make another API request to the spotify search endpoint using the ID, this will return another JSON object which we use to display the song found, these include: artist name, song title, cover photo URL and spotify link.

GITHUB github repo

How to create a music streaming app - Expo(RN)

C I R L O R M ⚡ — Sat, 25 Apr 2020 14:48:21 +0000

I started working on a music streaming app a week ago and it wasn't easy as i thought. Expo provides tools needed to build the app but putting them together and making them worked as one is the hard part.
In this article i am going to go through the basics of streaming music in expo app.

Prerequisites

Expo (React native)
Firebase

We are going to use firebase to host the songs.

The Playlist

In our App.js

import React from 'react';
import { Text, FlatList, Image, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

import { Audio } from 'expo-av';
import firebase from 'firebase';
import { FontAwesome } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      allSongs: [],
      currentSongData: {},
      playingStatus: 'nosound',
      paused: false
    };
  }

  componentDidMount() {
    firebase
      .database()
      .ref('trending/')
      .on('value', snapshot => {
        let array = [];

        snapshot.forEach(child => {
          array.push(child.toJSON());
        });
        this.setState({
          allSongs: array
        });
      });
  }

  render() {
    return (
      <React.Fragment>
        {/* THE PLAYLIST */}
        <Text>Playlist</Text>

        {this.state.allSongs && (
          <FlatList
            contentContainerStyle={styles.containerContent}
            data={this.state.allSongs}
            keyExtractor={itemObj => itemObj.id.toString()}
            renderItem={itemObj => {
              const { item } = itemObj;

              return (
                <TouchableOpacity
                  onPress={() => {
                    this.setState({
                      currentSongData: item
                    });
                  }}
                >
                  <Text>{item.songTitle}</Text>
                  <Text>{item.artist}</Text>
                </TouchableOpacity>
              );
            }}
          />

        {/* THE PLAYER - player code goes here */}

        )}
      </React.Fragment>
    );
  }
}

We set our inital states for data

constructor(props) {
    super(props);

    this.state = {
      allSongs: [],
      currentSongData: {}
    };
  }

Then make a firebase call when the component mounts

componentDidMount() {
    firebase
      .database()
      .ref('trending/')
      .on('value', snapshot => {
        let array = [];

        snapshot.forEach(child => {
          array.push(child.toJSON());
        });
        this.setState({
          allSongs: array
        });
      });
  }

We user the forEach method so that we can make the values and push them to an empty array.
After, we update our state with the new array

this.setState({
   allSongs: array
});

In our render method, we use a FlatList to return each value in the array.

{this.state.allSongs && (
          <FlatList
            contentContainerStyle={styles.containerContent}
            data={this.state.allSongs}
            keyExtractor={itemObj => itemObj.id.toString()}
            renderItem={itemObj => {
              const { item } = itemObj;

              return (
                <TouchableOpacity
                  onPress={() => {
                    this.setState({
                      currentSongData: item
                    });
                  }}
                >
                  <Text>{item.songTitle}</Text>
                  <Text>{item.artist}</Text>
                </TouchableOpacity>
              );
            }}
          />
        )}

The Player

let song = this.state.currenSongData
<View>
        <TouchableOpacity>
          <View>
            <Image
              style={{
                height: 40,
                width: 40,
                borderRadius: 3,
                backgroundColor: 'gray'
              }}
              source={{ uri: song.image }}
            />
          </View>
          {song && (
            <View>
              <View>
                <Text>{`${song.songTitle} · `}</Text>
                <Text>{song.artist}</Text>
              </View>
              <View>
                <FontAwesome
                  color={purple}
                  name="play"
                  size={14}
                />
                <Text style={styles.device}>NOW PLAYING</Text>
              </View>
            </View>
          )}
          <TouchableOpacity
            onPress={() => togglePlay()}
          >
            <FontAwesome color={colors.white} name={iconPlay} size={28} />
          </TouchableOpacity>
        </TouchableOpacity>
      </View>

This is the interface, we display the cover art of the song, song title and artist.

Playing the song

funtions

togglePlay()

let togglePlay = async () => {
      this.setState(prev => ({
        paused: !prev.paused
      }));
      this._playAndPause();
    };

this.playAndPause()

 _playAndPause = () => {
    switch (this.state.playingStatus) {
      case 'nosound':
        this._playRecording();
        break;
      case 'donepause':
      case 'playing':
        this._pauseAndPlayRecording();
        break;
    }
  };

this.playRecording()

async _playRecording() {
    // alert('playing it');
    const { sound } = await Audio.Sound.createAsync(
      { uri: this.state.currentSongData.songLink },
      {
        shouldPlay: true,
        isLooping: false
      },
      this._updateScreenForSoundStatus
    );
    this.sound = sound;
    this.setState({
      playingStatus: 'playing'
    });
  }

_pauseAndPlayRecording()

 async _pauseAndPlayRecording() {
    if (this.sound != null) {
      if (this.state.playingStatus == 'playing') {
        console.log('pausing...');
        await this.sound.pauseAsync();
        console.log('paused!');
        this.setState({
          playingStatus: 'donepause'
        });
      } else {
        console.log('playing...');
        await this.sound.playAsync();
        console.log('playing!');
        this.setState({
          playingStatus: 'playing'
        });
      }
    }
  }

_updateScreenForSoundStatus()

 _updateScreenForSoundStatus = status => {
    if (status.isPlaying && this.state.playingStatus !== 'playing') {
      this.setState({ playingStatus: 'playing' });
    } else if (!status.isPlaying && this.state.playingStatus === 'playing') {
      this.setState({ playingStatus: 'donepause' });
    }
  };

_syncPauseAndPlayRecording()

  _syncPauseAndPlayRecording() {
    if (this.sound != null) {
      if (this.state.playingStatus == 'playing') {
        this.sound.pauseAsync();
      } else {
        this.sound.playAsync();
      }
    }
  }

This is a technical writing and you need knowledge in expo and react native to understand.
However you can send me a message on twitter full for source code (github repo)
Twitter : @cirlorm_io

Photo by Nadine Shaabana on Unsplash
Photo by NeONBRAND on Unsplash

Programming Script Kiddies

C I R L O R M ⚡ — Tue, 04 Feb 2020 14:13:20 +0000

Anyone can download snippets of codes and piece them together to create a program. In the cyber space(hacking), a Script Kiddie is an unskilled individual who uses scripts or programs developed by others to accomplish a task. However in programming, Script kiddies use open source projects and edit them to look like theirs. These individuals lack the skills required to create original programs and therefor turn to using other peoples code in their programs.

It's not totally wrong to use other people's code in your project, senior developers do it all the time but what is not right is using completely codes or projects from other people and presenting as your own.

Everybody is encourage to write write of their own and by so doing will master the at of coding and problem solving.

Javascript is a good way to start.

Cover Photo by Kobu Agency on Unsplash
Body Photo by Kevin Ku on Unsplash

LEARN TO CODE LIKE A HERO

C I R L O R M ⚡ — Sat, 02 Nov 2019 22:18:38 +0000

I'm a self taught developer and I was able to learn JavaScript and Python on the internet without taking any paid courses. So how did it all start?
I completed high school with ambitions to learn coding, so I jumped on the internet and downloaded a few books on Python and started reading. Although the books gave me the basic commands and meanings, I don't know how to use them to build anything that was worth it except for the usual"print('Hello World')". So I stopped learning how to code and got into blogging where I created my first website using WordPress. After some time I realise I wanted to do something more, that's when I contacted @JNYBRG on Twitter and asked him to build a streaming platform for me. He gave me an open sourced project he worked on and told me to tweak it to my liking, but I don't have any coding skills. I told him and he introduced me to JavaScript and web development. From here my life as a developer took off and never went back.
I went on YouTube and watched lots of videos and my thanks to Travesly Media, Design Course and Dev Ed.
I watched Dev Ed create a Weather App and I code as he goes and after that 40 minutes video I understood how to bring lines of code together to build something cool and it turned out that's all I needed to boost my coding skills.

SO WHAT DID I LEARNED ABOUT "LEARNING TO CODE" FROM THIS EXPERIENCE?

Learn the basics, understand what each line of code does.
Read on it and see how other developers use them in their codes.
Learn how to use them together to produce cool results.
Start a project. Start building a real app and learn new things as you do it. Use Google and StackOverflow to get answers to any problems you encounter.
Join the Dev Community.
Create a Twitter and Github account and start talking about tech/code and start contributing the little you know to open source projects.

I hope this article help encourage you in learning how to code and help you be more proficient in it.

Since this is my first article, I'll be glad to read your remarks in the comments.