Forem: Chit

Set up a Svelte todo list on self-hosted Supabase + Email sign up + Google, Facebook Auth + host on GitHub pages

Chit — Fri, 06 Jan 2023 13:21:09 +0000

In this tutorial. I will guide you through creating a to-do list web app using Svelte as the front end hosted on GitHub pages, and Supabase as the back end. I will also discuss how to set up an email authentication, as well as google and Facebook third-party OAuth. The outcome would be like this from this Github repo.

Important information

This is my second time making a tutorial, if there is anything unclear, feel free to ask in the comments and I'll try to reply to them.

This tutorial assumes you are using a self-hosted Supabase. If you are using a managed Supabase you should follow the instructions on the GitHub page instead.

If you don't already have a self-hosted Supabase, check out my other tutorial How to Self-host Supabase and come back to this tutorial afterwards.

Create a GitHub repository for the Svelte App

We will host our svelte app on GitHub pages. It is a static site hosting service that host files straight out of a repository on GitHub. It has the benefit of being free and has pretty good bandwidth since it is hosted by a big company.

We first need to create a GitHub repository. if you don't have GitHub Pro, you must create a public repository in order to share your site with GitHub pages, but with GitHub Pro, both private and public repositories support GitHub pages.

For the repository name, you can choose any name you want unless you want to page to be on your main GitHub page (Main GitHub page means the website on your {github_username}.github.io). If so, you need to name your repository as {github_username}.github.io.

If you name your repository other things, your website would have a link of {github_username}.github.io/{project_name} . In my case, my website would be on https://chit-uob.github.io/svelte_supabase_todo_example.

You can then click Create Repository.

Clone To-do list example

Then we clone the Svelte to-do list example from the Supabase GitHub. We choose a folder to put the project, and then we clone it with the sparse setting, this clones the repository without downloading every single file. Then we can go inside the repository and spare-checkout the to-do list example.

Make sure you have Git installed, install from here if you don't already
To open the command prompt on windows, you can right-click an empty space on the folder, and choose Open in Windows Terminal

git clone --depth 1 --filter=blob:none --sparse https://github.com/supabase/supabase
cd supabase
git sparse-checkout set examples/todo-list/sveltejs-todo-list

Now we can go in supabase -> examples -> todo-list , and copy the sveltejs-todo-list folder to another folder you use for the project. I am going to use the same example folder. Then we open the terminal inside the sveltejs-todo-list folder, and run the following commands.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/{github_username}/{repo_name}.git
git push -u origin main

If you haven't already logged in to GitHub, it may prompt you to log in with your credentials

Configure front end

Then we install the GitHub pages npm package

You need Node.js installed for this, install it from here if not already

npm install gh-pages --save-dev

Set up package.json

Inside the file package.json, we add a "homepage" property and set it as https://{github_username}.github.io/{project_name}, and a "deploy" inside the "script" property and set it as gh-pages -d dist, so lines 4-10 should look something like this:

  "version": "2.0.0",
  "type": "module",
  "homepage": "https://chit-uob.github.io/svelte_supabase_todo_example",
  "scripts": {
    "deploy": "gh-pages -d dist",
    "dev": "concurrently \"npm run dev:css\" \"vite\"",
    "dev:css": "tailwindcss -w -i ./src/tailwind.css -o src/assets/app.css",

Then we copy the .env.example file, and rename it to .env . Inside there we fill in the backend URL and anon key. If you followed my last tutorial, VITE_SUPABASE_URL would be your backend domain name. Otherwise, it would be whatever you set your API_EXTERNAL_URL inside the .env file inside the Supabase docker folder. As for VITE_SUPABASE_ANON_KEY , it is the value of ANON_KEY in the Supabase docker folder .env file.

...
JWT_SECRET=...
ANON_KEY={THIS IS THE ANON KEY}
SERVICE_ROLE_KEY=...
...
## General
...
DISABLE_SIGNUP=...
API_EXTERNAL_URL={THIS IS THE SUPABASE URL}
...

You should then add .env to the .gitignore file, in order to not commit your secret keys.

If not a user site nor custom domain: set up vite.config.ts

If you are not using the user site (username.github.io), or you are not using a custom domain, then you would need to configure the vite.config.ts , and set base to your repository name, so lines 5-8 look something like this:

// https://vitejs.dev/config/
export default defineConfig({
  base: '/svelte_supabase_todo_example/',
  plugins: [svelte()],
...

This is because normally Vite looks for files in the main URL, which would be username.github.io/{whatever_file} , but since we want it to look for files inside username.github.io/{project_name}/{whatever_file} , we need to set the base to the project name.

Change front-end authentication

The original code uses GitHub and Google auth, but we want to use Facebook and Google auth instead, so inside the src/lib/Auth.svelte file, in line 114, we change it into on:click={() => handleOAuthLogin("github")} . In line 118, we change it into Facebook .

Optional: Mapping a custom domain to the GitHub page

if you have a custom domain, you have to create a file called CNAME inside the public folder, with the content being the custom domain. And change the homepage inside the package.json to be the custom domain.

Navigate to your DNS provider and create a CNAME record that points your subdomain to the default domain for your site. For example, if you want to use the subdomain subdomain.example.com for your user site, create a CNAME record that points subdomain.example.com to <user>.github.io. Also, add A Record with host @ and value 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153. So your record looks like this:

Side note: when I was testing this, GitHub seems to dislike having dashes - or underscore _ inside the subdomain
If you used a user site <user>.github.io , every other project site you use afterwards, will start with your custom domain, instead of <user>.github.io .

Deploy with GitHub pages

We can install the necessary packages, build the project, and then deploy it.

npm install
npm run build
npm run deploy

We then visit the repository on GitHub and go to Settings -> Pages, select Deploy from a branch, and select gh-pages as the branch. Then we can optionally enable HTTPS too.

If you used a custom domain, the page would like something like this:

Congratulations! When you go to the URL stated above, you will be able to visit the website.

However, only the front end is working for now, in order to have a full-fletch web application, we need the backend to work as well.

Make the database table

The initial Supabase database given to us only contains the auth tables, we need to create the profiles table and todo table on our own. In the hosted version, the snippets are provided, but since we are self-hosting, we will have to copy them from there.

I created a Supabase account, created a project, and then copied the snippet. For you, you can just copy the following code to the run panel and run it.

Go to the Supabase dashboard, inside the default project -> SQL editor, we can paste the following code there, and click run to run them.

-- Create a table for public profiles
create table profiles (
  id uuid references auth.users not null primary key,
  updated_at timestamp with time zone,
  username text unique,
  full_name text,
  avatar_url text,
  website text,

  constraint username_length check (char_length(username) >= 3)
);
-- Set up Row Level Security (RLS)
-- See https://supabase.com/docs/guides/auth/row-level-security for more details.
alter table profiles
  enable row level security;

create policy "Public profiles are viewable by everyone." on profiles
  for select using (true);

create policy "Users can insert their own profile." on profiles
  for insert with check (auth.uid() = id);

create policy "Users can update own profile." on profiles
  for update using (auth.uid() = id);

-- This trigger automatically creates a profile entry when a new user signs up via Supabase Auth.
-- See https://supabase.com/docs/guides/auth/managing-user-data#using-triggers for more details.
create function public.handle_new_user()
returns trigger as $$
begin
  insert into public.profiles (id, full_name, avatar_url)
  values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
  return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

-- Set up Storage!
insert into storage.buckets (id, name)
  values ('avatars', 'avatars');

-- Set up access controls for storage.
-- See https://supabase.com/docs/guides/storage#policy-examples for more details.
create policy "Avatar images are publicly accessible." on storage.objects
  for select using (bucket_id = 'avatars');

create policy "Anyone can upload an avatar." on storage.objects
  for insert with check (bucket_id = 'avatars');

Then for the todo list

--
-- For use with:
-- https://github.com/supabase/supabase/tree/master/examples/todo-list/nextjs-todo-list or
-- https://github.com/supabase/supabase/tree/master/examples/todo-list/react-todo-list or
-- https://github.com/supabase/supabase/tree/master/examples/todo-list/sveltejs-todo-list or
-- https://github.com/supabase/supabase/tree/master/examples/todo-list/vue3-ts-todo-list
--

create table todos (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  task text check (char_length(task) > 3),
  is_complete boolean default false,
  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);
alter table todos enable row level security;
create policy "Individuals can create todos." on todos for
    insert with check (auth.uid() = user_id);
create policy "Individuals can view their own todos. " on todos for
    select using (auth.uid() = user_id);
create policy "Individuals can update their own todos." on todos for
    update using (auth.uid() = user_id);
create policy "Individuals can delete their own todos." on todos for
    delete using (auth.uid() = user_id);

Email sign up

To enable email sign-up, we need our backend to be able to send emails. Email servers are very difficult to host, so we will use an SMTP relay service, and have them send the emails for us. There are many choices, I chose to use Sendinblue because it has the biggest free tier email sending limit. It can send up to 300 emails per day, which means up to 9000 emails per month. You can use whatever service you want, you just need to get the required credentials.

Get the credentials from Sendinblue

Create an account in Sendinblue. In the dashboard, click on the Profile in the upper right corner -> SMTP and API.

Inside that page, we need the SMTP Server, Port, Login. We also need to generate an SMTP key, which would act as the password.

Fill in the credentials in the self-hosted Supabase

Going back to the Supabase backend, in the supabase/docker/ directory inside the .env file, we can paste the respective values inside the respective field.

## Email auth
ENABLE_EMAIL_SIGNUP=true
ENABLE_EMAIL_AUTOCONFIRM=false
SMTP_ADMIN_EMAIL={The email address you want the email to be from}
SMTP_HOST=smtp-relay.sendinblue.com
SMTP_PORT={The port given to you}
SMTP_USER={Your login}
SMTP_PASS={Your SMTP key}
SMTP_SENDER_NAME={The name of the sender of your choosing}

Social OAuth

We also want to enable Open Authentication login, because it skips the step of creating an account for the user, so users will more likely be inclined to sign up to your site.

Google

Supabase already has a guide on this, however, that is for the managed version, for the self-hosted version, there is something we need to do differently.

First, go to https://cloud.google.com/, Sign in to google if not already, and then click console. It will prompt you to accept the terms of service.

Inside there, click on Select a Project at the top left and click new project. Fill in your app information then click Create, this will take you to the dashboard for the new project.

In the search bar at the top labelled Search products and resources type OAuth. Click on OAuth consent screen from the list of results. On the OAuth consent screen page select External. Click Create.

On the Edit app registration page fill out your app information. The Application home page is your Svelte website, and The Authorised domain is the domain of your website. Click Save and continue at the bottom.

Click Credentials at the left to go to the Credentials page on the Google Cloud Platform console. Click Create Credentials near the top then select OAuth client ID . On the Create OAuth client ID page, select your application type. If you're not sure, choose Web application. Fill in your app name. At the bottom, under Authorized redirect URIs click Add URI.

Your URI should be what you set as the API_EXTERNAL_URL inside the supabase docker .env file + /auth/v1/callback. For example, https://mybackend.com/auth/v1/callback. Enter your callback URI under Authorized redirect URIs at the bottom. Enter your callback URI in the Valid OAuth Redirect URIs box. Click Save Changes at the bottom right. Click Create. Then we need to copy and save the values under Your Client ID and Your Client Secret.

Then we can go back to the supabase docker .env file, and add the following code

## Google auth
ENABLE_GOOGLE_SIGNUP=true
GOOGLE_CLIENT_ID={the_client_id_given_to_you}
GOOGLE_CLIENT_SECRET={the_client_secret_given_to_you}

And in the supabase docker docker-compose.yml file, under the auth environment section, (around line 87), we fill in the following:

GOTRUE_EXTERNAL_GOOGLE_ENABLED: ${ENABLE_GOOGLE_SIGNUP}
GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
GOTRUE_EXTERNAL_GOOGLE_SECRET: ${GOOGLE_CLIENT_SECRET}
GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: {the_callback_uri}

Around this part is a lot of GOTRUE_..., so it should be pretty easy to find. Keep in mind that the ${} things should be taken literally, you shouldn't replace the string inside ${}, but do replace {the callback uri} with the actual callback uri.

Facebook

The Facebook guide can also be found on the Supabase guide, I am going to briefly go through what you need to do, and the self-hosted instructions not included in their guide.

We first create and configure a Facebook Application on the Facebook Developers Site. We first login. Click on My Apps at the top right. Click Create App near the top right. Select your app type and click Continue (Do NOT choose "business", it complicates things). Fill in your app information, then click Create App. This should bring you to the screen: Add Products to Your App. (Alternatively you can click on Add Product in the left sidebar to get to this screen.)

From the Add Products to your App screen, we can click Setup under Facebook Login . Skip the Quickstart screen, instead, in the left sidebar, click Settings under Facebook Login . Enter your callback URI under Valid OAuth Redirect URIs on the Facebook Login Settings page. Enter this in the Valid OAuth Redirect URIs box. Click Save Changes at the bottom right.

Be aware that you have to set the right access levels on your Facebook App to enable 3rd party applications to read the email address. From the App Review -> Permissions and Features screen: Click the button Request Advanced Access on the right side of public_profile and email .

Click Settings / Basic in the left sidebar. Copy your App ID from the top of the Basic Settings page. Under App Secret click Show then copy your secret. Make sure all required fields are completed on this screen.

Then similarly, we go to the supabase docker .env file, and add the following code:

## Facebook auth
ENABLE_FACEBOOK_SIGNUP=true
FACEBOOK_CLIENT_ID={the_id}
FACEBOOK_CLIENT_SECRET={the_secret}

And in the supabase docker docker-compose.yml file, under the google stuff we just added, we add:

GOTRUE_EXTERNAL_FACEBOOK_ENABLED: ${ENABLE_FACEBOOK_SIGNUP}
GOTRUE_EXTERNAL_FACEBOOK_CLIENT_ID: ${FACEBOOK_CLIENT_ID}
GOTRUE_EXTERNAL_FACEBOOK_SECRET: ${FACEBOOK_CLIENT_SECRET}
GOTRUE_EXTERNAL_FACEBOOK_REDIRECT_URI: {the_callback_uri}

Note that both Google and Facebook Auth are in testing mode, to use them in production, you need to change them to production mode.

Replace site URL

also inside the supabase docker .env file, you can change the SITE_URL=http://localhost:3000 , and set the URL to the URL of your front-end website.

Restart Supabase

Now that everything is set, you can restart Supabase. If you followed my last tutorial, Supabase would be running inside a screen, do screen -r supabase , then ctrl + c to stop the already running docker, then docker compose up to start the docker again. If it is not already running, you can just do docker compose up inside the supabase docker directory to start Supabase.

Conclusion

Now you should get a fully functional to-do list web app, you can try the different logins, from email sign-up and sending an email to confirm your account, to one-click OAuth with Google and Facebook. After logging in, you can also add and remove to-do items, and they will stay there when you log in with different devices.

This is my second touch on making a tutorial, if there are any steps unclear, feel free to leave a comment and I'll try to answer them. hope this tutorial helps.

How to Self-host Supabase: A complete guide

Chit — Sat, 24 Dec 2022 22:35:42 +0000

In this guide, I will explain how to self-host Supabase. Including how to purchase and secure a virtual private server (VPS), install and set up Supabase, Set up a reverse proxy using Nginx, and get a secure socket layer (SSL) certificate to accept HTTPS traffic.

This is my first time writing a complementary guide, so if there is anything unclear, or you have any feedback, please leave it in the comment below.

What you will achieve

If you follow the steps, you will end up having a password-protected Supabase server hosted on a VPS, a reverse proxy that redirects traffic from the domain name to the respective endpoint on the Supabase back end with an SSL certificate.

To continue, you will need:

A domain name, free or paid, that you can set the A or CNAME record
A VPS running Ubuntu 20+, if you don't already this guild will also introduce one

Buy a VPS and set up

To self-host a Supabase back end, obviously, you need a VPS. If you already have one, you can move on to the section about securing the VPS and see if there is more you can do to secure your VPS. If not, the following guide will talk about how to purchase one.

Purchasing a VPS

I will be using OxideHost VPS because they are relatively cheap. I've been using them and they are pretty reliable. For those interested, this is my affiliate link.

After choosing the VPS and purchasing it with Ubuntu 22.04 installed, an email is sent to give me information about how to connect to my VPS. The most important part is the hostname, IP, and default password.

Connect to it

ssh {username}@{ip-address}

To connect to the VPS I just purchased, the simplest way is to use the ssh command in the command line. However, using this method, we will have to type this command and enter the password every time. A better method would be to use SSH clients such as PuTTY which is free. I will be using Termius since it has a nice interface and is free for students.

I will create a new host, inputting the hostname given by the email, and username which is root by default, and the password was given to me. It will ask you a question about do you want to connect to it, click yes. Then I will have connected to the VPS for the first time.

Securing the VPS

Now that we are connected to our VPS, we want to make sure we are the only people having access to it, so we need to take measures to secure it.

update its software

apt update
apt dist-upgrade

The first task is to update it since updated software usually has its security vulnerabilities patches. This also upgrades the Linux distribution. There will be a few questions the command prompt asks you, you can type y and then press enters to say yes to them. and if it is a multiple choice, you can press tab to navigate around, and press enters to confirm the selection.

Add another user

Now that you acquired your VPS, hackers also want to get access to it. There are tons of robots on the internet cracking passwords of random VPS, they usually try to log in as root since it is the default configuration. So we will add a new user, pass the root permission to it, and disable root login so those bad robots won't be able to log in to our VPS.

adduser {username}
usermod -aG sudo {username}

The username cannot have spaces within, so you can use an underscore like learn_supabase or learnsupabase . Then it will ask us some questions, we can input blank if we don't want to answer them. But we need to fill in a secure password , I recommend inputting a randomly generated password using some secure password generators so that there is no way for anyone to guess it. Then we can give the user Sudo privileges. And try to log in using the new username and password by creating a new host and connecting it.

Disable the root login

nano /etc/ssh/sshd_config

Now we need to change the Port to some random number to make it harder to guess, the number must be smaller than 65535. And we also change the link PermitRootLogin to no, so we can no longer log in as root.

After making the change, we can do ctrl + o to write out the changes, and ctrl + x to exit nano. Then we do the following command to restart the sshd service, so the new configuration will come into effect.

systemctl restart sshd

Install Supabase

Install docker

We need docker for this, a tutorial about how to install docker can be found here. In this tutorial, I will summarize what commands we need to run. This command assumes you are using Ubuntu, if you are using other distros, please refer to the above tutorial link.

sudo apt install apt-transport-https ca-certificates curl gnupg lsb-release
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io
sudo apt install docker-compose-plugin

Then, we also need to enable the user to use docker.

sudo usermod -aG docker {username}

Clone Supabase

Then we want to clone the Supabase from Github.

git clone --depth 1 https://github.com/supabase/supabase

Set up Supabase secrets

cd supabase/docker/
cp .env.example .env

Now we get inside the docker directory and copy the file for the environment variables.

Generate passwords

We open the .env file, and we will see a lot of settings.

nano .env

We want to set the passwords for the above fields. For POSTGRES_PASSWORD , you can use a randomly generated password. For the JWT secret, we have to use the custom key generator. you can copy the JWT secret and paste it into the file, and then we can select ANON_KEY , hit generate, copy it to the ANON_KEY field, then the SERVICE_KEY field.

nano volumes/api/kong.yml

Then we also copy the same key to the kong config, pasting the new anon key and service key.

Start docker

Now we open a new screen and name it so that we can connect to it later

screen

Here you will see the introduction of the screen, hit enter . Then we can do ctrl + a then ctrl + d to disconnect from the screen. In the console, you will see your screen number [detached from 3775963.pts-0.hostname] , the 3775963 number is the screen number.

screen -S {screen_number} -X sessionname supabase
screen -r supabase

Now we have reconnected to screen supabase , when we disconnect from it, we use ctrl + a then ctrl + d .

cd supabase/docker/
docker compose up

Now the supabase docker is started, it will download a bunch of things, and you can connect to your domain in port 3000.

Domain mapping

Now I want to point a custom domain to the backend. I used Namecheap, and I create an A record, pointing a subdomain to the IP address of my VPS.

Reverse proxy

Reverse proxy points the connections to the correct port. The part is explained very well in the Linode blog post, so I am only going to briefly talk about what commands needed to be run, you can refer to their blog post for a more detailed explanation.

We first install Nginx for reverse proxy.

sudo apt install nginx
sudo systemctl status nginx

If we connect to our domain, we will see the Nginx welcome page.

sudo nano /etc/nginx/sites-available/{your_domain_name}

then we copy the following content (from the Linode guide) into the file, replacing the example.com with your custom domain.

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

upstream supabase {
    server localhost:3000;
}

upstream kong {
    server localhost:8000;
}

server {
    listen 80;
    server_name example.com;

    # REST
    location ~ ^/rest/v1/(.*)$ {
        proxy_set_header Host $host;
        proxy_pass http://kong;
        proxy_redirect off;
    }

    # AUTH
    location ~ ^/auth/v1/(.*)$ {
        proxy_set_header Host $host;
        proxy_pass http://kong;
        proxy_redirect off;
    }

    # REALTIME
    location ~ ^/realtime/v1/(.*)$ {
        proxy_redirect off;
        proxy_pass http://kong;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header Host $host;
    }

    # STUDIO
    location / {
        proxy_set_header Host $host;
        proxy_pass http://supabase;
        proxy_redirect off;
        proxy_set_header Upgrade $http_upgrade;
    }
}

After that, we can do ctrl + o and ctrl + x to write and exit. Then we can create a symbolic link of the config from sites-available to sites-enabled, link the default config, and then restart Nginx.

sudo ln -s /etc/nginx/sites-available/{your_domain_name} /etc/nginx/sites-enabled/{your_domain_name}
sudo unlink /etc/nginx/sites-enabled/default
sudo systemctl restart nginx

Now, we can connect to Supabase using the domain name.

Get SSL

In this part, we will use Certbot to give our Supabase an SSL certificate. Their official website have pretty good instructions, so you can follow that. But I'll also let you know what commands I used.

We first install core, then certbot. Then we configure it, and at last try how it auto-renews, and then restart Nginx for it to take effect.

sudo snap install core; sudo snap refresh core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo certbot --nginx
sudo certbot renew --dry-run
sudo systemctl restart nginx

Secure Supabase

The Supabase dashboard everyone can connect to, to secure it, we do this to generate the password. It will ask you to type in the password two times, so it is best you generate a password from a secure password generator and then paste it there twice.

sudo htpasswd -c /etc/apache2/.htpasswd {admin_username}

Then we can check the password with

cat /etc/apache2/.htpasswd

Then we edit the Nginx config to password protect

sudo nano /etc/nginx/sites-available/{domain name}

and make it so that in the studio

    # STUDIO
    location / {
        proxy_set_header Host $host;
        proxy_pass http://supabase;
        proxy_redirect off;
        proxy_set_header Upgrade $http_upgrade;

        auth_basic "Administrators Area";
        auth_basic_user_file /etc/apache2/.htpasswd;
    }

at last restart

sudo service nginx restart

Here you can fill in the username as the {admin_username} you put in, and the password as the password you filled in.

Reconfigure Supabase

Now, we want to set the domain for the Supabase backend and external API.

screen -r supabase

Then we press ctrl + c to end the Supabase docker instance. Then we edit the .env file.

nano .env

We need to change the

...
API_EXTERNAL_URL=https://{your_domain}
...
SUPABASE_PUBLIC_URL=https://{your_domain} # replace if you intend to use Studio outside of localhost

Then we can do ctrl + o and ctrl + x to save the changes, then do the following to get Supabase back up.

docker compose up

Then we can exit the screen by doing ctrl + a then ctrl + d to disconnect without terminating the process inside.

Conclusion

Congratulations, you now have a working Supabase backend, protected by a password, inside a certified domain. Hopefully, my explanation is clear, is there are any questions or comments, feel free to leave a comment. Your next step would be to develop your front end, which I will cover in the next part of this guide.

What I learned from self-hosting a Supabase Svelte project: Part 2

Chit — Thu, 15 Dec 2022 17:17:03 +0000

In part 1, we went over self-hosting supabase, setting up Svelte, enabling third-party authentication and email sending. In this blog post, I will talk about what I learned about routing, SSL, domain name, local storage, and hosting svelte using GitHub pages.

Routing with Nginx

Currently, there are lots of programs running on various ports of my VPS. Supabase studio on 3000, Svelte on 5173, PostgreSQL running on port 5432, and Kong running on 8000 and 8443 for HTTP and HTTPS respectively. How do I take the users that want to connect to my front end (Svelte) to port 5173, and secure my Supabase studio?

The answer is routing, we can set up a router, or a reverse proxy, to take users that are connecting from HTTP and HTTPS, which is port 80 and port 443, and route them to port 5173, my Svelte front end. To do that, I will use Nginx, because that is the most popular one. In the following, I'm going to summarize what I did to get it working, If you want a more detailed explanation or code examples, I recommend you check out this article from Linode, I find it very helpful.

In Nginx, we create a server to listen to a single port, then we tell it how to redirect based on location. Locations are the URL path after the domain name, the location for example.com is /, and example.com/terms/ is ^terms/(.*)$ . Then in the location, we can ask it to redirect to a certain port, such as proxy_pass http://localhost:5173 , this would redirect the users connecting from this port at this location to this address instead.

An important thing for Nginx is that we have to configure which rules are active. There is a directory called sites-available, and one called sites-enabled. What we have to do it to configure the settings in sites-available, then created a symbolic link to the sites-enabled directory. Then we have to restart the Nginx service to apply changes. An important thing to do is to unlink sites you aren't using, I once forgot to unlink the default rules and was wondering how the default rules were applying for so long.

Getting SSL

After that, we can redirect HTTP traffic, but we need an SSL certificate if we want HTTPS traffic. They provide credibility and encrypt traffic. There are 3 ways to get a certificate:

Purchase it from a trusted certificate authority (CA), the cost can vary from 5 a year, up to who knows how much
Let a proxy like Cloudflare do it for you, users will connect to Cloudflare with the certificate, and then Cloudflare redirects the traffic to your site, and the users see the certificate from Cloudflare. This is free for personal or hobby projects.
Generate your own using a service like Certbot, it generates the certificate for you and you don't have to pay a penny. But the downside is that you will have to configure it yourself.

I went with Certbot since it is free. The website contains very detailed instructions about installing it. After getting it, I need to configure Nginx to use the certificate, redirect HTTPS traffic to my front end, and ask HTTP traffic to upgrade to HTTPS traffic.

Domain name

Then I needed a domain name for my website, you can think of a domain name as basically a link for the website. I went over the three providers that offer free 1-year in Github student pack, namely Namecheap, Name.com and .TECH. I analyzed what service they provide and how much the domain is going to cost after the 1-year free trial. Namecheap has the cheapest domain name after the free trial, so I decided to use it.

Now I have to configure it to redirect traffic from the domain name to the IP address of my VPS. There are different types of records, the ones that you're most likely to use are an A record or a CNAME record. A records allow you to associate a domain name or a subdomain to an IP address, CNAME records allow you to point your domain name or subdomain to a hostname.

I pointed the subdomain I wanted to the IP address of my VPS, then pointed the www version of the domain to the domain without the www part.

Storing data

For the encryption function of the website, I want people to be able to generate an encryption key locally and have it stored locally. So the data they post to the server will be encrypted. This makes it so that even if the website got hacked, the hackers couldn't read the encrypted content.

Users don't want to enter the key every time they visit the website, I need a way to store the encryption key locally. I was thinking to use cookies for this task, but then I found out that cookies get sent back to the web server for every request, which isn't secure at all. So I searched that there is Local Storage in browsers now, and the information there will not be sent to the web server, so I decided to use it.

It is very easy to use, to write something to local storage, you do localStorage.setItem("name", "Chris");, and to read something, you do let myName = localStorage.getItem("name");.

Svelte can be hosted statically

I don't know how I didn't know this, I always thought Svelte has to be hosted on a VPS, maybe because I developed Django apps before and they require a dedicated host. I found this out because I was talking to a friend about how I am buying a VPS to host the website, and he asked me why didn't I use Github pages instead. I said the website needed to be hosted, but he said it doesn't. I looked into it, and turns out he was right! Svelte doesn't have to be hosted dynamically. When we run npm run dev, it runs the developer version, which is dynamically hosted because it reacts to changes. But if we do npm run build, the page is built and the dist directory. Then we can deploy through any static site hosts, including Github pages.

GitHub pages can be used for public repositories for free accounts and private repositories for Pro accounts, which I have from the GitHub student pack. Moreover, GitHub is a big website, so I'm sure loading a front end there is very fast, as they would have good content delivery. Security isn't a big concern either, since only the front end is hosted there, and the important data is secured in the back end. Therefore I will be using GitHub pages to host my site on second thoughts.

Hosting on GitHub Pages

To host on Github pages, if we want to use the user GitHub page (username.github.io), instead of username.github.io/reponame, we need to have the website in the repository with the name username.github.io . Then we can control what to deploy, we can either set up a GitHub workflow, which is GitHub doing something for you automatically, or just deploy from a branch.

To automate this process, there is an npm package called gh-pages. It enables you to deploy your new version of the build, which is inside the dist folder for Svelte projects, to a new branch. Then if you configure your GitHub page to deploy that branch, this would automatically be deployed.

There are some important things to set up. We have to configure the homepage to the GitHub page website in package.json, as well as set up a new run config called deploy, which runs gh-pages -d dist . If we are using a custom domain, we also need to create a CNAME file inside the public/ directory with the content being the custom domain name. Then when we run npm run build then npm run deploy, our GitHub page will be deployed.

Conclusion

In this blog post, I discussed my experience with self-hosting a Supabase Svelte project. I covered setting up routing with Nginx, obtaining an SSL certificate with Certbot, securing a domain name with Namecheap, and hosting the project on GitHub Pages. Overall, I found that self-hosting my project was a valuable learning experience that allowed me to gain a deeper understanding of web hosting and the tools involved.

What I learned from self-hosting a Supabase Svelte project: Part 1

Chit — Wed, 14 Dec 2022 10:32:46 +0000

In this blog post, I will talk about what I learned from making a Supabase Svelte project. The plan for making this project is explained in this blog post. I will go over the obstacles I've overcome when trying the different building blocks of the project, namely self-hosting supabase, setting up Svelte, enabling third-party authentication and email sending.

Self hosting Supabase

The advantage of Supabase is that it supports self-host, so I don't have to worry about limits and bills. I went ahead and searched for the official tutorial. I expected a very complete tutorial that covers every step, but what I got was a very high-level overview of how to do it, talking about architecture, configuration, database etc. Then there is another tutorial on self-hosting with Docker. To their credit, there is a very concise script for getting the docker running, but that's all you get in terms of a hands-on tutorial. The rest of the article is yet another high-level overview of important things to do. This is fine for experienced developers, but as a new developer, I would have appreciated better guidance.

At that time, I didn't know what is docker-compose, how I deploy the docker from the local environment to the production environment (my VPS), and how to set up the secrets, so I kept on searching for more helpful tutorials.

Luckily, I stumbled upon this Youtube tutorial, huge shout out to Kelvin Pompey. He demonstrated the entire process of self-hosting Supabase with an Ubuntu Server on Digital Ocean, which I was able to follow step by step, and reproduce the working Supabase backend. I didn't use Digital Ocean, I used a VPS from Oxide Host since I've been using them for a few years starting from hosting a Discord bot, and the service is reliable.

I learned how to set up supabase, how to install docker-compose and that docker-compose starts the processes inside the docker-compose.yml file, and to update the secrets inside the .env file before deploying the Supabase.

Setting up Svelte front end

Now that I've set up the backend, I want some example frontend code to test if the backend is working. I was originally thinking about making a React app as it is pretty popular. But I found an officially maintained to-do list app written in Svelte, since it is very similar to a prayer tracker, I've decided to use that as the skeleton code and build on that.

The code is within the Supabase repo, and the Supabase repo is huge, so I don't want to clone the entire thing, just the part I need.

Only cloning a part of a repo

I've learned this from this StackOverflow post. We need the latest version of Git, I failed at first because I was using an older version of git that doesn't support sparse checkout.

I am going to use the Supabase repo as an example, the --depth 1 flag stops git from cloning any files inside folders. and the --filter=blob:none will filter out all blobs (file contents) until needed by Git, and --sparse just tells git you plan to git checkout later.

Then we cd into the directory, and sparse checkout, with set as the path of the content we want to check out.

git clone --depth 1 --filter=blob:none --sparse https://github.com/supabase/supabase
cd supabase
git sparse-checkout set examples/todo-list/sveltejs-todo-list

Then I just needed to run npm install to install the dependencies and npm run dev to run the Svelte project. I also installed nvm to manage the version of Node js.

I also needed to update the .env file to paste the Supabase host address, and the anon_key used in Supabase. Side note: I used the default credentials the first time I used Supabase, when I changed the credentials, the database no longer recognised me, I had to do docker-compose down --volumes to reset everything after I updated the .env credentials.

Enabling third-party authentication

Supabase supports third-party authentication, and it does that by recognising the email address. So let's say you used the same email address example@example.com on Google and Facebook, signing in with either will lead you to log in to the same account.

These third parties use an authentication standard Open Authentication (OAuth). OAuth is a protocol that allows applications to access user information without requiring their password. This allows users to securely share their information with third-party applications, minimizing the risk of a security breach.

Basically, instead of identifying a user using a password, the app asks Google, "do you trust this guy?". If Google trusts them, the app trusts them too.

To enable this, we have to create an account on the OAuth provider. I was able to do it for Google and Facebook. For Apple, the OAuth requires me to create an Apple App, and that is locked behind a paywall. I need to pay 79 pounds a year to access that, so I won't be using that.

Problem with Twitter OAuth

When I try to do it on Twitter, the funniest/most annoying issue happened. On the sign-up page, there is a button that asks do I want to receive marketing emails from them, I said no. Then they said they have sent a confirmation email to my email account, I didn't receive it, so I clicked have it resent. Guess what they said: "There was a problem resending the confirmation email, User has disabled email notification from Twitter...". I checked my Twitter setting and email notifications are on.

I then registered from the Twitter developer account on another Twitter account, this time ticking the marketing email field, this time I was able to get the confirmation screen and do it. So I think this was the issue. The funniest thing is that I was unable to fix this issue, I cannot find the setting to re-enable marketing email on the Twitter developer page.

Email sending

For email sending, originally I thought I can send emails from my VPS. So I searched for How to send emails through VPS. Every result uses Gmail or another managed email service, apparently, we can't simply use a VPS to send an email, I needed something called an SMTP server.

So I went on and search for How to host an SMTP server on a VPS. I found an article that says hosting a mail server is like building a jet, the article isn't trustworthy since it is from an email-sending company and they have a monetary incentive to say this. I wanted to find some open-source solutions that I can install in 1 step and be done, but there aren't any. Therefore I concluded the article was right and I gave up making my own SMTP server.

I had to find an email-sending service. I looked at different ones, SendInBlue has the largest free-email sending quota, 300 emails per day, which means 9000 emails per month. Of course, this is assuming 300 people sign up per day, which is highly unlikely, the number usually fluctuates. Still, this is the largest quota, so I went with them.

Conclusion

In this blog post, I talked about the process of creating a Supabase Svelte project. Including challenges I faced when self-hosting Supabase, setting up Svelte, enabling third-party authentication and email sending. I also wanted to talk about routing, SSL, domain name and storing information inside the web browser, but I realized this article already got very long. I've decided I'll write about them in part 2 of this blog post. So stay tuned.

My Plan for building a prayer tracker website

Chit — Tue, 13 Dec 2022 20:30:45 +0000

Background

As Christians, we should pray. it is a way for us to communicate with God and develop a deeper relationship with Him. In the Parable of the Unjust Judge, Jesus taught us not to lose heart when praying. But sometimes, we forget to pray, forget what to pray about, and forget how God answered our prayers. Imagine if our friend forgot to talk to us, or even worse, forgot what we did for them.

That's why we should keep track of what we pray about. It can help us see how God is answering our prayers, as well as help us stay accountable and faithful in our prayer life.

Using a paper journal or a note-taking app to do so is fine, but searching through paper journals is hard, and note-taking apps may not be as convenient as they are not tailor-made for this purpose.

Why I want to make it

Firstly, I see the need for it. While there are some great options out there, such as PrayerMate or the YouVersion Bible app, they are limited to smartphones only, you cannot access them with a computer. Moreover, they are very complex with many functionalities. It would be nice to have a simpler one. Because

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

Antoine de Saint-Exupry, Airman's Odyssey

Secondly, I am interested in trying out different technologies, and this sounds like a cool challenge. I can see this actually being helpful for others. I'm sure I'd learn a lot from doing this.

That's why I've decided to develop it and make it available to the public.

Features of the prayer tracker website

I want to build a website where users can:

Store prayer items, including the ability to add, edit, and delete items.
Give users a daily prayer list based on the frequency set for each prayer
Record how has God answered their prayer, or when the prayer was not granted
Encrypt the prayer items optionally

Since it is a website, we can assume the prayer items will be synced, and there will be account control. I choose a website over an app because a website can be accessed by any device connected to the internet, whereas apps must be downloaded and installed on a specific device.

How do I plan to build it

I've been following Fireship on Youtube, so I've got some technologies on my radar that I want to try out. Supabase is one of them, it claims to be an open-source Firebase alternative Backend as a Service (BaaS). I'm happy to see that they have a self-host option, which means I wouldn't be charged a large sum overnight, as I am hosting it myself, I can control how many resources to give it.

For the front end, I'm planning to use Svelte, simply because it is the javascript framework used in the Supabase to-do list example. I'm assuming it is a good framework for the official example to be built on that. I've also looked up the Fireship video on Svelte, and it looks promising.

For hosting the back end and front end, I'm going to use a VPS provider that limits my CPU and connection speed, but doesn't incur any additional cost nor have a data transmission limit, in my case, Oxide Host. It is much less stressful knowing that I won't be charged extra even if something went wrong.

What are the other building blocks?

I've decided to use Supabase, Svelte and a VPS as the foundation of my project. Now I have to choose the various building blocks that I'm going to use to build my website.

Before that, I want to talk about the two approaches to building something. The first approach is to start doing first and plan as you go, this leads to quicker development if nothing goes wrong, but it is also possible that you'll encounter a problem that sets you back a lot. The second approach is to plan everything before starting, this reduces the risk of finding problems mid-project and having to redo everything, but this slows down the progress, and there is only so much we can plan for, we may still find unexpected problems. I will use the latter approach and test each individual building block before using them to build the website.

At the time of writing this, I've already tested out all the technologies. The process is very difficult, I've been stuck at problems after problems. This process took me several days, and over 24 hours of figuring things out, so I'm going to spare the details and just explain what I'll be using. Later on, I'll write another blog post to talk about how I tested them.

Functionality	Technology used
Third-party authentication	Google and Facebook sign-in, as they are the most popular ones. I refrained from using Apple sign-in because it is locked behind a paywall, you need to pay to join their developer program to use it.
Routing	Nginx, since it is very popular.
Https, SSL	Certbot, since it is free and easy to set up.
Domain name	NameCheap, since it is cheaper than others and offers a 1-year free domain for students.
Storing encryption key locally	Local Storage in the browser, because unlike cookies, they do not get sent back to the server every request.
Email Authentication	MailInBlue, a relatively large email limit in the free tier

Conclusion

This is my plan to build this project. I will make a blog talking about my experience with testing the above building blocks, as well as a complete tutorial on how to set up a Supabase Svelte project.

Python script to find broken links in word document

Chit — Sun, 11 Dec 2022 22:22:22 +0000

I wrote a Python script to find broken links in a word document, the GitHub link is here. If you want to use it you can go to the GitHub page and the instructions are there. Below I will explain how it works and how I came up with this solution.

This program was inspired by helping a friend. The friend has to click on links inside documents one by one to check if they still work. Hearing that, I thought to myself, that sounds like a task that can be automated. Therefore I asked for some sample word documents and started testing the concepts.

In face of this big task, I decided to break the task into a few steps, figuring out a way to do each, and then piece them together.

Step 1: Finding links from texts

If I want to extract some patterns from text, the first thing that pops into my mind is Regular Expression. They are a way to find patterns in texts and are often deemed difficult and feared by developers. Therefore I did what any sane developer would do: search for this problem online and copied the Regex from stack overflow.

The regex is (https?:\/\/\S+), which is pretty easy to understand

Problem 1: the succeeding full-stop is also matched

Let's say I have a sentence that ends in a link, such as http://chit.hashnode.com. If I parse this text in the above regex, the last full-stop (.) will also be included, because it is a non-whitespace character.

the solution is to use another regex, http[s]?:\/\/[^\s]+[^.], here we have a [^.], which means: Match a single character not period (.) and not whitespace ( ), so it solves the problem of it catching the trailing period.

Problem 2: having a newline character at the end

The previous regex solves the problem of having a period at the end of the line. But what if there is a newline character after it?

Knowledge dump: What is a newline character

The newline character is the invisible character that tells the text editor to go to the next line. For example, let's say \n is the newline character, I am a line.\nI am another line will become

I am a line.
I am another line

Let's use the website regex101 to test it, when we have A sentence ending in https://google.com., the https://google.com will be correctly captured.

But with a newline character after it, it will be caught as well, since the newline character was not excluded in [^.].

As I am writing this blog post, I figured the solution was to exclude the newline character as well, resulting in the regex http[s]?:\/\/[^\s]+[^.], but I was not this clear-minded when I was programming, the solution I came up with is to replace all the newline characters with the space bar. Then do the regex matching, which also worked, because there are no longer newline characters.

Problem 3: Different types of links

The third problem is with links with no http, our regex only matches links starting with http, but some links start with www, or maybe even no www.

I am sure more clever regexs can accommodate this, but I didn't want to spend too much time at this stage, so I just used a python library to do the work for me. That's the beauty/problem with Python, there are so many libraries that you can just use one, and not care how it is implemented.

from urlextract import URLExtract
urlextracter = URLExtract()
urls = urlextracter.gen_urls(s)

Step 2 Check the links

Now that we have all the URLs from a text extracted, we want to check them.

Problem 4: links without a protocol specified

But remember how some links don't start with HTTP? I need to add an HTTP in front of them, or else the python library request will have a hard time knowing what protocol is required, so I used the following code to achieve that

import re
def formaturl(url):
    if not re.match('(?:http|ftp|https)://', url):
        return 'http://{}'.format(url)
    return url

urls = [formaturl(url) for url in urls]

here I try to match the regex (?:http|ftp|https)://, it tests if the URL starts with http/ftp/https, if not, we append http:// in front of it

then we use list comprehension to do it on the entire url list.

Actually checking the link

Now we get to the step of actually checking the link, we do that using the requests library. We wrap the requests.get() inside a try-catch block so that if other issues happen, the program will not crash, it will simply return false. and if the status_code of the response isn't 200, then we return false too, else we return true.

200 means all good, so if the website returns standard content, it will return all good.

def check_link(url):
    print(f"checking {url}")

    # Try and see if url have inherit problem
    try:
        response = requests.get(url)
    except:
        return False

    # See if not 200
    if not response.status_code == 200:
        return False

    return True

Step 3: Reading word document text

Now I have a function that extracts URLs, and another to check if the url's website is working. I have to extra the text from a word document.

To do that, I can simply use the save-as function inside word and call it a day. That would save the document in a text format and we can read the text file with the program and get the result.

But that would mean the user has to do more, so I was thinking, is it possible to read the word document directly with Python?

The answer is yes because actually, word documents are just zip files. To know if I'm telling you the truth, install 7zip and unzip a word document, and you will see the following result. A word document is just a zip file containing a lot of XML files.

A way to solve this problem is to read the word document as a zip file and find the links inside the XML files. But since I'm using Python, I decided to find if there are any libraries that can do this for me. I found docx, docx2txt, docx2python. After testing them all, the one I decided to use is docx2python, because it extracts the main text, headers, footers, and even footnotes. The syntax is as below:

from docx2python import docx2python

# extract docx content
def get_text_by_docx2python(path):
    text = docx2python(path).text
    return text

Step 4 Piecing them all together

Now that all parts of the puzzle are here, it is time to implement the main logic, we first extract the text by use_docx2python.get_text_by_docx2python, then urlextracter.gen_urls to get the URLs, after adding http to them, we use check_links.check_link to check the link, and print a helpful message.

Problem: some links show a different result when we request it from the program than when we actually click the site

This is because some sites do not like robots, but since Python requests have the default user agent as python-requests/2.25, the website sees this and forbids the program from getting the result. What we need to do to fix it is to use another user agent, I copied the user agent on my web browser, Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36, then I used response = requests.get(url, headers=HEADERS, stream=True), now the website responds correctly.

Step 5 Doing it asynchronously

Now waiting for the program to do all the things is fine, but it is also too slow. The slowest part is waiting for the websites to be fetched. Since we have to wait for each website to give us the result. This would be faster if we use concurrency, which means doing things at the same time.

Think of it as, burger shop A gives you a burger in 5 minutes, and Boba shop B gives you a boba in 3 minutes. You can get a burger and then a boba in 8 minutes. If you order both at the same time and then collect them when they are ready, you'll only need 5 minutes.

Concurrency code is a bit more complex so I'm not going to explain it here, you can visit RealPython on this topic, they have a great tutorial on this topic.

Step 6 Warp up

At last, I added a code to show a file dialogue to further simplify this for users.

import tkinter as tk
from tkinter import filedialog
file_path = filedialog.askopenfilename()

Conclusion

That's how I did it and I hope you learned something from it.

Where's my Voi scooter: [Conclusion] What I learned from Voi scooter data this summer

Chit — Tue, 20 Sep 2022 09:48:21 +0000

This blog post concludes what I learned from the data collected in the Where's my Voi scooter series. I started this study at the beginning of the summer aiming to find ways to locate a Voi scooter by collecting data on Voi scooters. I tracked the scooter location and the battery level of scooters in my city at one-minute intervals using the Application Program Interface (API) on their mobile app. Below is a summary of what I have learned from the study.

Mean battery level of scooters

Graph for the entire duration

This is the mean battery level of all scooters around the city during the entire duration of the project. The graphs may look small, you can right-click the image and click open image in new tab to enlarge them.

In general, the mean battery level fluctuated between 55% and 60%.

We can observe that before 7 July, there were flat lines every day. This was because back then scooters went offline at 10 pm, and online at 6 am. During that time my program could not collect data and it assumed the battery level didn't change. After 7 July, you can see that the transitions in the graph were smooth again with no jumps.

A scooter "goes offline" when the API no longer returns information about the scooter. The API that I used is the API that tells users where the idle scooters are. So when someone is using the scooter, when the battery of the scooter is being charged, or when the scooter is sent back to the warehouse, the scooter is considered "offline".

We can also see errors in the data collection. There were two sloped straight lines during June, as back then my program would crash if the API server didnt return information. This was fixed afterwards by adding a try-catch and retrying after failures. The second error was on 1 July, the graph broke into half. This is because I calculated the mean battery level each month, and the program guesses the battery levels of offline scooters by forward filling, ie. if the scooter went offline with 70% battery, the program assumes it would stay at 70% while being offline. When the new month started, the scooters with unknown battery levels were not included in the calculation, so there was a jump in the value. The reason I used forward filling despite this disadvantage is given in the 7th blog in this series.

We can also see a sharp decline in battery levels around 7 July. This might be because scooters no longer went offline at night and the scooter service area was expanded, so the battery drained even during the night, and with a wider area, it was more difficult to reach them and replace the battery of them.

Graph for weeks

These graphs were weeks starting from 10 July, they all started on Sundays. There was a general trend that the battery level was higher in the second half of the week.

Graph for days

These graphs were some days, they all started at around 0 am. There was a general trend that the battery level would increase in the first half of the day, usually, at 10 am, then start decreasing. This was strange, an increase in battery level should mean someone was swapping out the batteries, or new scooters with a full battery was being introduced. But it was hard to imagine people swapping batteries in the middle of the night.

Available scooter count

Graph for the entire duration

Same as the mean battery level, the days before 7 July had the count drop to zero at night because they were offline. And the number of available scooters also sharply declined from around 1150 scooters to under 500 scooters on 11 July. Presumably, it was because of the change in operation too.

We can also observe that more scooters were put into operation from 26 July, I believed it was due to the Commonwealth Games 2022 on 28 Jul 2022 8 Aug 2022. When the Commonwealth Games started, the number of available scooters, along with the mean scooter battery level dropped. It should be because of the increased ridership. This can be confirmed on the news where it said Voi sees record e-scooter ridership during 2022 Commonwealth Games at over 66,000 journeys.

Then the count returned to normal until 16 Aug but the count increased again on 19 Aug when the number of scooters exceeded 1750 scooters.

Graph for weeks

These are graphs of weeks starting from Sunday. There seemed to be a slight trend where the number of scooters in the second half of the week was higher.

Graph for days

These are graphs of days starting at 0 am, usually, the number of scooters increases to about the middle of the day, then decreases.

Ridership

Total graph

This graph corresponded positively to the available scooter count graph, when more scooters became available, more rides happened too. In July, there are fewer rides, but in July and August, the number of rides increased.

At the beginning of the graph, there were two places where the count hit close to zero, that was because of the error of my data collection program. My program crashed during that two times so I wasn't able to recognise rides during that two periods.

Commonwealth games

With this data, we can answer the question: did ridership increase during the Commonwealth Games 2022? The answer is it did. From 28 Jul 2022 to 8 Aug 2022, the ridership peaked at around 6400 rides per day, but the increase didn't stop there, it seemed even after the Commonwealth Games and the increase in scooter count and coverage, the increased ridership was maintained.

The sum of the rides during the Commonwealth Games calculated in my program is 65951, which was super close to 66000 said in this article. There was a discrepancy in the number due to the logic of my program. A ride was counted in my program when a scooter became offline and then online again within 45 minutes. But it did this at a one-minute interval. So if a rider parked a scooter and another rider rented it within a minute, my program would count it as one ride when there were supposed to be two. Another problem was that when a scooter temporarily went offline for a battery swap, my program still considered it a ride since the scooter went offline and then online.

I limited the maximum number of minutes in a ride because scooters might be taken to the warehouse, fixed, and re-released, so I could not count all instances of scooters being offline and then online again as a ride, so I chose 45 minutes as it was the maximum riding duration for a Voi pass.

Per week

Now I want to answer the question, does the ridership correspond with weekdays?

These weeks were the same as the ones with available scooter count. They generally corresponded with each other, days with more available scooters generally result in more ridership. There was no clear pattern in which weekdays had greater ridership.

Per day

The same days were chosen as the ones in the available scooter count graphs. These graphs were generally the opposite of those graphs, the times with the least available scooter were the times with most rides, which makes sense because people were using scooters so there are fewer of them available.

We can also see on most days the ride count was minimum in the morning around 5 am, then increased to peak at 8 am, then fell back again, then increased again from 12 pm to around 8 pm, then slowly decreased. I think the first peak was when people get to work, and the second peak was for people leaving work.

Heatmap

day

I figured it made little sense to measure this over weeks or the entire period, so I decided to only measure this over a day.

The scooters generally became more concentrated on certain spots on the map from 0 to 12 pm, then became more spread out after that.

Battery consumption

During ride

The way I calculated this was the same as ridership, so this analysis suffered from the same problems. However, I think these results would still be very close to the true value, as the calculation only fails in a few edge cases. The average level of battery drop was 0.461% per minute when unlocked. The battery consumption varied in each ride since scooters could be idle while unlocked, or be used in battery-consuming activities such as going up slopes.

I also filtered the battery consumption based on which month the data was collected, and found a surprising result. The battery consumption was decreasing. This is strange since I was taking on average all rides, so there shouldn't be much difference. Some possible explanation for this phenomenon was a change in rider behaviour, a change in battery capacity, or Voi figuring out a way to use less battery on its scooters.

I also filtered the results based on the starting battery level, and there are some interesting observations too. The results for the first half make sense, it is the same for our phones, the battery generally drains slower at a higher battery level. However, the battery drain decreased when it is below 40%, which is strange, usually, the battery drains the quickest when it is closest to zero.

When idle

I also wanted to know what is the battery draining speed when the scooter is sitting there idle. The average battery drained, while the scooter was idle, was 0.006830% per minute.

Starting at different battery levels, the draining speed was different too, the less battery there was, the faster the battery drains, this was what I had expected.

In my experience, lithium batteries, used in smartphones, usually drain faster when the battery level is lower. I wasn't able to pin down why, but I saw some explanations on the internet what I would like to share, one has to do with the lithium discharge voltage curve, in a lower stage of charge the voltage decreases and therefore the current has to be increased to maintain the power output, therefore the battery drains quicker. But I wasn't able to find solid proof of this, so if you know more, please let me know in the comments down below.

This brings us to another question, why during rides, the battery drained on 0-20% wasnt the quickest, but during idle, the battery drained on 0-20% was the quickest? It could be an error in my data processing. It could also be that Voi's display battery level was not the actual battery level, it displayed a lower level when the battery was near zero so that it could travel further during the supposed near zero battery, to prevent the scooter from running out of battery mid-ride, but this is just a theory.

Conclusion

This project started out with the goal of locating a scooter in the city, which I am now able to do with the data I collected. But I found greater interest in studying the broader trend of scooters around my city. So below are my findings:

I can conclude that the scooter business is doing well. The ridership increased during the Commonwealth Games 2022 and the usage didn't drop back down after the games. The batteries are being replaced in time so their mean battery level and available scooter count are stable. The scooter's battery drain when idle is about 65 times slower than when on a ride, so leaving scooters on the street isn't costing them a lot.

Other than what I learned from the data, I also learned a lot about data analysis in the project, like how to collect and organize data, how to analyse them, and some handy Python modules to make it easier.

Where's my Voi scooter: [10] Analysis of data in July 2022

Chit — Wed, 07 Sep 2022 11:03:11 +0000

In this blog, I will analyse the data of Voi scooters in my area in July using the Python program I built previously. All the messy code will not be shown here, but you can see the beautiful plots and graphs generated from the data. If you are interested in the code behind this, you can check out my Where's my Voi scooter series.

Downloading the data

I have been using a VPS (virtual private server) to collect the data regularly and automatically. Therefore I have to first download the data from it using a tool called Termius.

I selected all the data items from the start of July and copied them to my local machine. There are about 2GB of data.

Recap of what data I collect

I collect the data of all Voi scooters around my city every minute by using the API provided by the Voi mobile app. The data includes each available scooter's id, battery level and location. I modify it into a JSON list. Then I save the result to a JSON file every hour. Therefore the data I have looks something like this:

Importing the data and plotting the graph

All data files are in the same folder, so I generate a list of all file paths inside the folder and sort them in ascending order. Then I sanitise the data by trying to parse it using Python's try-catch. If the data file is correct, Python would not catch any error, so if Python caught an error, I know I have to fix the data file. Once that's done, I read all the files in ascending order and stored the time stamp and vehicle count in two separate numpy arrays. I then plot it using matplotlib. The graph looks something like this:

We can observe:

Before 7/7, the scooter count always goes to zero at the end of the day. Because scooters are disabled at night, after that, Voi decided that scooters would be available 24/7, therefore the scooter counts never dropped to zero again.
Near 12/7, the scooter count dropped to very low, that is just after the change, so maybe Voi did some changes in its workforce so that fewer workers are replacing batteries on scooters, or they are doing some checking on scooters so a lot is brought back for checking. Either way, the scooter count increased and returned to normal.
After 30/7, the number of available scooters seems to plummet, I suspect that is because of the Commonwealth games.

Finding the set of all available scooters

Then I run through all files, running the set union function from Python, to find the set of all scooters available throughout July. I do that by the list of all available scooters at each time stamp to a set, and take the union of the set of all scooters registered. So in the end, the union of all sets is the total amount of available scooters.

After running that code, I found out there were 2544 scooters of unique id that were available at a point in July.

Get all dates list

What I want is a gigantic pandas table with scooter ids as columns, and time stamps as rows. I already know the ids, so I have to find the time stamps, I do so by iterating through all the data items and adding the time stamps to a list.

Fill all the tables

I run the code to fill all the tables, it does this by iterating through all the data files, in each individual data item, and adding them to the corresponding pandas table. This code is extremely slow because we have 44499 data of individual time stamps. And in each data, there are 1000 scooters, and for each scooter, we are storing their latitude, longitude and battery level, so we are adding 44499 1000 3 items to tables, which is over one hundred million. The code wasn't able to finish in 2 hours, therefore I had to stop it, and continue the code from where I left off the other day.

Plotting individual scooters

Some scooters are more active, like

Some are decommissioned for some time, maybe for fixing, or just recycling scooters.

But keep in mind that we only know the id of the scooter, the same scooter could have its id switched, we don't know what the id means.

Plotting the mean battery count

now I wish to plot the mean scooter battery count. I do so by first dropping columns that were all null values. then I use the method of forwarding filling to fill in null values. Then at last I plot the graph using the plot function and the mean function with axis = 1. there are null values in my code reasons: when a scooter is rented, it is no longer available, so the value becomes null. when the scooter is called back for fixing or other purposes, it is not available. Before scooters are available all day, at night, all scooters are not available.

Plotting location heatmap

Then I generate the heatmaps using seaborn and matplotlib, I generate one for each hour, then piece them together as a gif file. The negative of having it as a gif file is that a gif file generally has a bigger file size as it compresses images individually, while mp4 is capable of storing the change between images, hence if the images in the video are similar, a lot of storage space can be saved. I convert the gif to mp4 using the answer suggested by this StackOverflow answer by using moviepy. and the result is as below.

Summary and what's next

There are a lot of interesting observations that can be made using these data. But for the length of this blog, I am just going to show the data collected and fewer observations. Again if you are interested in how the data was collected, you can check out Where's my Voi scooter series.

I think there are many conclusions to be drawn, such as where will scooters be concentrated at what time, and around what time most scooters are available.

Python program running at regular time interval tutorial using time and datetime module

Chit — Wed, 24 Aug 2022 10:57:28 +0000

This tutorial will teach you how to set up a Python program to run at regular time intervals using the time and datetime module. This is useful if you want to check something constantly, so you have a python program running in the background doing the checking for you at regular intervals.

Solution

I will put the solution on top. If you are interested in how I found it, you can read about it below.

Simple solution for if what you do is lightweight

Lightweight means that it doesn't use much CPU power and time, like a simple print function.

Assuming you want to run the code every 10 seconds.

import time
from datetime import datetime

def do_things():
    print(datetime.now())

while True:
    do_things()
    time.sleep(10)

you should get something like this

2022-08-24 10:59:35.247516
2022-08-24 10:59:45.259224
2022-08-24 10:59:55.272715
2022-08-24 11:00:05.284097
2022-08-24 11:00:15.290823

There you have it, you can replace the sleep time if you want a different interval, and you can replace the content of the do_things() function with what you want the program to do.

Problem with the simple solution

But if you are like me, what you wish to do every interval takes time, whether it is waiting for I/O from another program, or it is doing something very CPU intensive. Then if we still do what we did, we will get inaccuracies in wait time like the below.

import time
from datetime import datetime

def do_things():
    number = 50_000_000
    sum(i*i for i in range(number))
    print(datetime.now())

while True:
    do_things()
    time.sleep(10)

Here I used sum(i*i for i in range(number)) on a huge number to force the CPU to do a lot of work, don't mind the underscore in 50_000_000, it is the same as 50000000. The result of this program is:

2022-08-24 11:07:54.377208
2022-08-24 11:08:07.599538
2022-08-24 11:08:20.838108
2022-08-24 11:08:34.043164
2022-08-24 11:08:47.255688

As you can see, we want the program to execute every 10 seconds, but it took the program about 14 seconds each loop, this is because some extra time is spent computing. This is why you need the advanced solution.

Advanced solution

import time
from datetime import datetime, timedelta

def do_things():
    number = 50_000_000
    sum(i*i for i in range(number))
    print(datetime.now())

while True:
    previous_datetime = datetime.now()
    do_things()
    time_took_running_do_things = datetime.now() - previous_datetime
    remaining_time_in_secs = (timedelta(seconds=10) - time_took_running_do_things).total_seconds()
    time.sleep(remaining_time_in_secs)

and the result is:

2022-08-24 11:14:40.821099
2022-08-24 11:14:50.797054
2022-08-24 11:15:00.806950
2022-08-24 11:15:10.834795
2022-08-24 11:15:20.845102

Explanation

Here you can see that the codes run every 10 seconds even though we are doing the heavy lifting. This is because we compensated for the time taken to run do_things() by waiting for less afterwards. If it took the program 3 seconds to run do_things(), we only wait 7 seconds afterwards, so the program still do things every 10 seconds.

Limitation

This solution is limited by, the action you want to do must to take longer than the interval you want to loop. If you want to do an operation that takes 10 seconds every 1 second, this solution cannot help you. You might want to look into Concurrency from this RealPython article.

How I got there

Now I will talk about how I figured this out.

I am working ona program that sees if I'm playing computer games at regular intervals to remind myself how long I'm playing, but the problem is that it is very inaccurate. I would play a game for 45 minutes, then the program will tell me that I only played for 30 minutes.

I first thought this is a problem with time.sleep(), maybe because the CPU is doing a lot of work while gaming, the wait is wrong.

But this is proven wrong by when I'm not playing games, the program still runs at incorrect intervals.

Then I commented out the things the program does within each interval, only leaving the print time statement, and then the problem was fixed. It turns out the problem is what I do inside the interval is costing above 2 seconds!

I then immediately went on to try to over-engineer the problem. I thought to myself, maybe I want the loop and the do_things() function in separate threads via threading or asyncio, or maybe even separate CPU using multiprocessing. I watched the entire tutorial on Speed Up Your Python Program With Concurrency by Jim Anderson on RealPython until I drew this graph.

I then realize, what if I just do them all linearly, then compute how much time I need to wait? It is then that it dawned on me, that the problem was never this complicated. So I fixed the problem and decided to write this article to help others like me. So there you have it.

Where's my Voi scooter: [9] Masking scooter heatmap on the map using Python PIL module

Chit — Wed, 03 Aug 2022 22:00:41 +0000

In this blog, I plan to incorporate the map into the heatmap made in the previous blog post, because, with only the heatmap, you can see which coordinates have a lot of scooters, but you have to reference the map with the coordinates, which is inconvenient. So I want to put the information on the Heatmap directly on the map so that the information is shown clearly.

Heatmap

Overlapping image

To overlap the image of the map and the heatmap, I need to find out how to have a half-transparent image on top of another image.

I first have to make an image transparent, I do that by using the putalpha(128) to make an image half transparent. It works by putting an alpha, or transparency level of 128 on that image. An alpha level of 0 means completely transparent, and level 255 means completely opaque. So 128 is in the middle, hence half-transparent.

Then I tried using image.paste(another_image) to put the half-transparent image on top of the other. but what happened is the image complete overwrites the other. what I needed was alpha_composite. For testing, I alpha composited the half-transparent map on top of the sat.

I created this map_img by getting the four coordinates I used for the range of the heatmap. and Taking a screenshot with exactly the four corners.

sat_map

from PIL import Image
map_img = Image.open('img/map.png')
map_img.putalpha(128)
sat_map = Image.open('img/sat_map.png')
sat_map.alpha_composite(map_img)
sat_map.save('img/result.png')

result.png

Masking

Now I want to mask the heatmap image on the map image so that we can see the areas with a lot of scooters on the map. I wanted to use alpha composite like the last example, but I figured that using masking would be better. Image masking is putting image A on image B using image C as a guideline. I plan to put a dark image over the map, using the heatmap as a guideline. Places with more scooters will be darker so that we can tell where the scooters are on the map.

The function to do the masking is Image.composite(), it requires all images to have the same size. So I plan to use the size width 600 height 600 for all. I first make a background image of all white, resize the map image to the size of the heatmap using the thumbnail function, and paste it into the background. then I read the heatmap image and fix its size and convert it to L, which means greyscale for some reason. then I make a red image of all red, and I composite all of them together.

bg_img = Image.new("RGBA", (600, 600), 0)
map_img = Image.open('img/map.png')
map_img.thumbnail((474, 546), Image.ANTIALIAS)
bg_img.paste(map_img, (36, 21))
heatmap_img = Image.open('img/heatmap.png').resize((600, 600)).convert("L")
bk_img = Image.new("RGB", (600, 600), 255).convert("RGBA")
final_img = Image.composite(bk_img, bg_img, heatmap_img)
final_img.save('img/result2.png')

heatmap_img

The result is, for the places with more scooters, a red overlay will be on them, so we can tell where the scooters are focused.

What's next

In the next blog, I plan to analyse the Voi scooter data from July, since my data collecting program has been running for over a month already. I'm sure there will be interesting data collected.

Project Exposure: [1] Creating Social Media Presence and Cross-posting on Dev and Medium

Chit — Thu, 28 Jul 2022 10:50:48 +0000

In this blog, I continue my journey of increasing my exposure by designing my brand and making social media presence for my blog on Twitter, Instagram, Facebook, and Reddit. As well as cross-posting on other blogging platforms.

My brand

To make social media accounts, I need a brand. I am just going to call it "Chit's Programming Blog". Then I also need an email for all the social media, but I don't want to use my personal email or work email because I don't want to get my emails entangled. So I made a new Gmail account since it is the most trusted. Popular social media may blacklist other email providers because they are less secured and may be used to create spam bots etc.

Profile picture

I need a profile picture for social media. I don't want to use my photos, I'm also concerned about copyright and trademarks, so I cannot just snap an image online and use it. Therefore I need to design my own profile picture.

There are a handful of tools I can use. There are tools where I have to make everything from scratch, like Microsoft Paint, and Photoshop. There are also tools that give stock images and fonts for you, like Canva. There are also tools that claim to use AI to generate your logo if you tell it about what you want, like Tailor Brands, Designs AI, and Adobe Express.

I used Adobe Express since it is the bigger brand, and it says free to use forever on their website.

Social Media Presence

Then I created my social media page on different platforms.

Twitter

Once I created my basic Twitter account, I get to upgrade it into a Twitter Business Account, where I have to tell Twitter what company I am. Since there is no choice for content creator or blogger, I chose Information Technology Company. It also asks me if I am a shop or a creator, which I chose creator.

Then my Twitter account is finished. It gave me a handle "@BlogChit", which I am not so happy with, then I found out on their website that I can change the handle. I want the handle to be memorable and easy to type out. Looking at popular Twitter users, most of them use the same as their display name, so I think I will do that too.

But I discovered my name is too long, so at last, I decided to go with "ChitProgramming"

Instagram

At first, I thought I must use my real name on Instagram. But it turns out I can use my business name too, so I used it for searchability.

When I thought that I'm done making my Instagram account, I found a button to "Switch to professional account". I found this article talking about why should I switch to a professional account, and the point Instagram Business Profiles Can Share Links in Instagram Stories sold me, it means that I'll be able to share my blog post with a single click. So I clicked the button, selected "Creator" to describe me better than "Business", choose "Personal Blog" as my category, and then I have a professional Instagram account.

Facebook

This is basically the same with Instagram since it is owned by the same company, Meta. But one annoying thing is that it makes posts that I don't want. After I created the profile and added images, it made a post about my birthday, how I updated my profile picture and updated my cover photo.

Facebook seems to force you to use your real name to make an account, so I was confused why there are so many business pages on Facebook, it turns out that peoples use "profile", while businesses use "page", and "profile" to create "pages".

So I created indicating that my category is "Information Technology Company", added my blog's information, then it was done.

Reddit is the easiest of all, I just have to select a username, and enter my blog's info. I don't have to set up a professional account or anything.

Cross-posting

I thought I had to make a program to automatically post my blog on other websites, then make a canonical link back to the original one. But turns out, that both Dev and Medium have features that help you publish articles from other sources.

Dev.To

Inside the Settings -> Extensions page, there is an option where I can publish to the Dev community from RSS.

I get my RSS on the upper right corner of my blog, then I paste it on Dev.

Then all my posts from Hashnode end up there, that's so cool and useful.

I have to add tags manually, I have to check what tags are trending on Dev. I check this on their tags page

Medium

As for Medium, I cross-post by going to Settings -> Stories -> Import a story.

Then I input the link to my article and click import.

This one gave me some extra spacing between lines, which I have to remove.

Medium doesn't share what tags are trending, it only recommended some topics, so I have to find out in a third-party website.

What's next

In this article, I created social media accounts and cross-posting accounts. Now I can share my blog posts on social media and engage in discussions. And I will cross-post my previous blog posts at a regular interval, to avoid being spammy. As for SEO, since it takes time for Google to index my blog posts, I think I'll have to wait, and post an update once I can find myself on Google.

Project Exposure: [0] How do I increase my blog's view count

Chit — Mon, 25 Jul 2022 20:22:43 +0000

I've been writing this blog for about 2 months now and averages around 4 views per day, which is fair, considering how much competition is on Hashnode. In light of this, I aim to increase my blog view in this project - Project Exposure.

Possible reasons for low viewer count

I start by investigating the shortcomings of my blog, to see how I can improve.

Time on the platform

I've only written several blog posts. There is a small chance in each of my blog posts to be appreciated and attract followers. So the longer I am on this platform, the higher chance this happens.

My writing skills

I haven't written a blog before, and seldom write essays since I study Computer Science. Therefore my writing may wordy, unclear, and unpleasant to read. To fix this, I need to write more, as well as read good blog posts to learn.

My writing topics

Looking at the trending blog posts on Hashnode, it is clear the trending ones teach you something or tell you something you don't know. But the ones I write document a programming journey, so it is not what most people look for.

However, I do not intend to change my article topics, as my blog is for documenting my programming journey and my target audience is people interested or wanting to learn from my experience.

I also notice a lot of popular blog posts have a number in them, like 6 Habits I have picked up from working in tech for 3 years, 15 Common Beginner JavaScript Mistakes. I thought about using AI, feeding in article topics and views, to see if there is any correlation with it, but I'll save this idea for later.

People lack a chance to see my articles

I watched a video from Youtuber How Money Works, called Why Finance "Gurus" Want You To Hate Them - How Money Works. In that video, the author made an interesting point. The reason why fake gurus - people who give bad financial advice, act so unbearable, is because "any publicity is good publicity", working in conjunction with the sales funnel.

The sales funnel

The sales funnel is each step that someone has to take in order to become your customer, as visualised above. Actually, it is more like a sieve or a filter, since a funnel keeps everything poured in, but some customers will be lost in the process. For the sake of recognisability, I'll keep calling it a sales funnel.

Let's say in each step of my sales funnel, I keep 10% of the customers. If I want more people to enter the last step, follow me, I can: a) do better in each stage to keep more customers, such as making clickbait titles and writing a more interesting first paragraph of my article to increase the percentage of people staying in each stage. b) put more people in the initial stage of the sales funnel, so that more people will enter the final stage.

That's why I came up with the idea of making a program which automatically cross-posts my blogs and also creates social media presence to promote my blog to increase my exposure and put more people inside my sales funnel.

Popular blogging sites

To do that I will have to know where should I cross-post my blog, below are websites that I found online.

Hashnode, where I'm on
HackerNoon and FreeCodeCamp, have dedicated editors to review blog posts, so I may only submit high-quality blog posts
Dev.To, simular to Hashnode
Medium, a website for all kinds of articles
Google Blogger / WordPress / Wix..., these sites while giving me a lot of freedom, there is no way for people to find me there, as there is no explore button, so I will not consider these, as at this stage, I want to be discovered
LinkedIn, a place with professionals and experts, so I need to be careful what I post there
Tumblr, a mini blogging website with built-in social media capabilities

Social media where I can create a presence

Twitter
Reddit
Instagram
Facebook
Snapchat
Youtube and TikTok, if I ever consider making videos
Pinterest, seems to be image-based but I don't think I have any images to show

Search Engine Optimization

Ideally, my blog posts should be searchable from Google, so there is an additional way for people to visit my blog. But currently, my blogs cannot be searched on Google.

The first reason is that I have an apostrophe in my blog title and that "chit" is usually used with "chit chat", so Google thinks it was a typo. If I force Google to search "Chit's", my blog appears on top.

The other reason is that I recently changed the name from "Chit's tech blog" to "Chit's programming blog" because I realized that a tech blog is a blog that talks about new technology, which is not what I cover.

When I search for the title of my first article, I cannot find the result. It is because the past me thought it would be a good idea to make a custom SEO title. If I have time, I want to edit all my past blog posts' SEO titles and descriptions, for Google to better index my blog posts.

Also, notice that my article published on DevTo was indexed instead. This is undesirable because my articles on different platforms are fighting for views, what I should do instead is to use a canonical link, to tell Google, that the article you found on DevTo, comes from Hashnode, so Google knows where to send people.

When I search for newer articles, they do not appear in the result, I assume it is because it takes time for Google to index my blog posts.

I also designed an image for social media sharing, so it looks prettier when I share my blog.

I have to say, Canva is really easy to use, and has some nice templates.

Now All I have to do is wait for Google to index my new and improved blog.

Action plan

In the next blog, I want to create a social media presence on the above social media platforms, as well as investigate how can I cross-post to the other blogging platforms.