DEV Community: Lucretius Biah

Migrating my website’s image hosting from Sirv to Imagekit with Python

Lucretius Biah — Wed, 12 Apr 2023 23:29:57 +0000

I've always hosted the images I use on this site on Sirv since I started using this domain. It's an image CDN that optimises and delivers your images faster.

Why I'm changing from Sirv

I've been using Sirv to optimise the images on my website since I started blogging, and it's been fantastic. It has everything I expected and more: picture optimisation, url scaling and cropping, image overlays, caching, and more. The monthly bandwidth on Sirv's free plan was insufficient for my website, therefore I opted to move away from them. It was fine for me at first, but as my website grew and I received more and more visits, my bandwidth usage went high.

The free plan provides 500 MB of storage and a monthly bandwidth of 2 GB.

The image above shows the bandwidth usage from April 30 to May 6, and it's 1.37 GB, a few megabytes shy of 2 GB. Therefore, I had to look for another solution. I would have been OK if I had upgraded to the business plan, but I'm kinda broke, so I must look for free options that will meet my needs. After much investigation, the best alternative was ImageKit, which provided 20 GB of storage and 20 GB of bandwidth, just what I was looking for😌.

Coding the migration script

As a developer, I tend to automate most things. I could have migrated image by image, but that would take a century before I was done, so I decided to use Python to quicken the process.

How The Script Will Work

The image above demonstrates how our programme will operate. We will first retrieve a list of all our images from Sirv, then iterate through all the files and upload it to ImageKit. It is quite simple.

Getting list of files

The first method is very easy, we are going to make Sirv export a CSV file which will contain a list of all the files on their server. Head over to your "My files" directory on Sirv. Then you right-click an empty area and select "Export file list to CSV".
Now, this will download a CSV file onto your device.

Installing Required Packages

Obviously, we will need to install some packages in order to make our script work. The only package which we will be installing is the ImageKit SDK.
In order to install it, just open your terminal and paste in the following code.

pip install imagekitio

Create a new Python file and put the following code inside after the package has been successfully installed.

import csv
from imagekitio import ImageKit

imagekit = ImageKit(
    private_key = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    public_key = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    url_endpoint = "https://ik.imagekit.io/your_endpoint/"
    )



with open("file-list.csv") as csv_file:
    csv_reader = csv.DictReader(csv_file)
    for row in csv_reader:
        line = dict(row)
        folder = line["File"].split("/")[:-1]
        folder.append("")
        folder = "/".join(folder)
        if line['Type'] != "folder":
            imagekit.upload_file(
                file = line["URL"],
                file_name = line["Name"],
                options = {
                    "use_unique_file_name": False,
                    "folder": folder
                }
                )
        print("Uploaded " + line["Name"])

You only need the code above. First, we included the CSV and ImageKit packages. Then we built an ImageKit instance. You must replace private_key and public_key with the private key and public key of your account, accordingly. Then you replace url_endpoint with the endpoint for your account.

On the following line, we opened the CSV file (which I renamed 'file-list.csv' after downloading it from Sirv) and built a CSV reader.

The files are then uploaded to ImageKit once we go over the data in the CSV file.

Outro

So this is how I transferred all of my images from Sirv to ImageKit. The procedure described here will also move your images to ImageKit. If you run across any issues, please post them in the comments area.

Cusdis: a privacy-friendly comment system

Lucretius Biah — Wed, 12 Apr 2023 23:25:12 +0000

Cusdis is a new lightweight, privacy-first, open-sourced comment system. It's a perfect alternative for Disqus users who want to retain their privacy.

Installing Cusdis is very easy, and its user interface is simple. Users do not need to sign up before they can comment on your website. This is very great for me because I do not want users to spend time creating an account to just write a single comment.

Pros

Cusdis is open-sourced.
This means that if you are a developer, you can read the source code and make sure they are not tracking your data.
It is self-hostable.
In case you want to host your data on your server, Cusdis allows you to do just that.
It doesn't require the commenter to sign in.
It also doesn't use cookies.

Cons

You have to manually moderate comments.
Unlike other comment systems, you have to manually moderate your comments in Cusdis. This means that comments are not displayed by default until you approve them.
The comment widget is not customizable.
This means you can't use your custom colours and fonts within the widget.

Installing it on my website

As I said earlier, installing Cusdis is very easy. Just head over to their website and create an account. After that, you will be redirected to your dashboard which will allow you to add a new website. After adding the website, you will be given an embed code which you will place wherever on your page where you want your comment widget to appear.

On this site, my blog posts page is on src/routes/blog/[slug]/+page.svelte, and this is how I inserted Cusdis into my website.

<article>
<div>
<!-- article content -->
</div>
<!-- [tl! focus:start] -->
<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="{appid}"
  data-page-id="{metadata.slug}"
  data-page-url="{$page.url.pathname}"
  data-page-title="{metadata.title}"
  data-theme="{$theme}">
</div>
<svelte:head>
    <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
</svelte:head>
<!-- [tl! focus:end] -->
</article>

This is how I display Cusdis on my website. I provide variables for all the data Cusdis will need to render the comment system.

Variable Name	Description
`data-host`	Refers to the domain on which the data is loaded
`data-app-id`	Unique ID that is generated by Cusdis
`data-page-id`	Unique keyword used to identify the page (You can use the blog's slug)
`data-page-url`	Current page's URL
`data-page-title`	Title of the current page
`data-theme`	Theme of the widget (Could be light, dark or auto)

Why I don't like the new Github achievements

Lucretius Biah — Sat, 11 Jun 2022 00:00:00 +0000

I've always used GitHub since I first started coding. Almost every developer on the planet uses Github for something. The benefit of using it is that it simplifies version control. Every developer understands the value of version control, and GitHub makes our lives easier. I'm not going to go into the benefits of using GitHub, so let me get right to the point.

History of Github achievements

So let me tell you the story of Github's achievements.
Last year, in 2021, NASA and Jet Propulsion Lab (JPL) launched the first Mars helicopter into the Martian atmosphere. The helicopter was built with open-source software. GitHub decided to add badges to the profiles of every developer who contributed to specific versions of any open-source projects and libraries used by Ingenuity, the helicopter.
GitHub achievements were created to recognise the efforts of these developers.

The image above depicts the first-ever Github achievement badge. It was exciting to see some developers with these badges. Simply seeing a developer with one of these badges meant he had contributed to something great, like a seasoned pro. This badge was released alongside two others.
The "Artic Code Vault" badge, as well as a badge for those who sponsor open-source projects through Github sponsors.

The point is that these badges were valuable and difficult to obtain. Only the worthy possessed them, and to be awarded any of these badges, one had to work hard or accomplish something extraordinary.
They were difficult to obtain, making it worthwhile to fight for them. I wanted one of those badges back then, but I knew I had to do something deserving to get one.
Then my dreams came true, but not in the way I had hoped.

The new Github Achievements and why I hate it

GitHub released a beta version of its achievements section just two days ago, and it sucks. It distributes badges unnecessarily.

These are the new badges which were introduced by Github.

The idea of Github introducing a new set of badges is fantastic, but the manner in which the badges are distributed or awarded is disastrous.
Let us begin with the first badge.

YOLO
This is the badge you get for making a pull request. Though the badge is fantastic, let me tell you what it lacks. You can earn this badge by simply submitting a pull request to your repository. See what I mean? It stinks, and there's no reason to earn a badge for it. What is the point of a user always wanting to merge his pull request?
Pull Shark
It is, as the name implies, a badge that you receive when your pull requests are merged. It's a fantastic badge, but you can also award it to yourself.

The fact that you can award yourself these badges negates the entire point of achievements. What is the point of rewarding yourself with something? Almost every developer will have these badges as a result of this. Nothing distinguishes them any longer. I've seen a few developers receive these badges, and it's really sad to see that the majority of them just made some commits in their repositories and received this badge. "The more rare, the better." Something is worth fighting for when it is extremely difficult to obtain or earn.

Conclusion

What I suggest is that Github should retake another strategy as to how they award their achievements.

SvelteKit Hooks. Everything You Need To Know

Lucretius Biah — Tue, 07 Jun 2022 21:13:15 +0000

SvelteKit has something called hooks. A file which exports a set of functions which run on every request to the server. It's really useful!

Introduction

A SvelteKit hook is a file which exports four functions which you can use to modify data from your server. It is not compulsory for your app to contain a hook file but one is implemented by default if you don't create one. It exports four optional functions handle, handleError, getSession and externalFetch. With hooks, you can extend SvelteKit to suit your needs😉.

Use Cases of Hooks

A list of possible things which you can do with SvelteKit hooks.

Redirecting a user
Authenticating a user
Minifying HTML, CSS and JavaScript response
Getting the user session
Setting cookies
Fetching data from a database
Handling errors
Modifying fetch response
Modifying HTML returned from the server

Creating a Hook

The default location for the hook file is src/hooks.js or if you prefer to use a folder, you can store your functions in an index.js file inside src/hooks/ which will then make the path src/hooks/index.js.

Also, you can change the default path to the file inside your svelte.config.js file by editing the config.kit.files.hooks value.

Listed below are the list of functions which are exported by hooks in SvelteKit.

handle

The handle hook is a function which runs on every request to the server and also during prerendering. It allows us to access the request and modify the response. Inside the handle function, we can add custom data to the request.locals which will then be accessible to all the endpoints.

To simply put, the handle function acts like a middle-man who sits between the client and the server and intercepts the request before taking it back to the client. This allows us to perform a variety of actions to the response before sending it back. For example, we can decide to minify the HTML response before sending it back to the server or redirect a user who is not logged-in to the login page.

export const handle = async ( { event, resolve })=> { return await resolve(event)}

The snippet above shows the bare minimum of how the handle hook works. It receives an event object which contains the request and an asynchronous resolve function which generates the response by taking in the event as parameter. Also included in the event object is the clientAddress (a getter function which returns the user's I.P address), locals(An object which allows you to pass custom data to your endpoints), params (an object which contains the value of the dynamic path), platform (a variable which contains the system's platform. It is usually set by the adapter), routeId and url.

To add custom data to the request, just populate the event.locals with your data before returning the response. You can also minify your HTML generated by SvelteKit using hooks since it doesn't do that by default. I have written a guide on how to do it.

The resolve function also supports a second optional parameter that also gives us more control over the response.

This allows us to disable server-side rendering. By default, it is set to true. If set to false. It renders an empty shell page.

   /** @type {import('@sveltejs/kit').Handle} */

   export const handle = async ( { event, resolve })=>{
       const response = await resolve(event,{
           ssr: false
       });
       return response;
   }

transformPage

This function allows you to apply custom transforms to the HTML document.

   /** @type {import('@sveltejs/kit').Handle} */

   export const handle = async ( { event, resolve })=>{
       const response = await resolve(event,{
           transformPage: ({ html })=>{
               return html.replace("a","b")
           }
       });
       return response;
   }

Multiple handle functions

SvelteKit allows you to chain multiple handle functions with the use of the sequence helper function. What the function does is that, it takes an array of functions and iterates through them and apply the handle function to each of them.

Let's look at an example.

import { sequence } from "@sveltejs/kit/hooks";

const first = async ( { event, resolve })=>{
    console.log("First handle start");
    const result = await resolve(event);
    console.log("First handle stop")
    return result;
}

const second = async ( { event, resolve })=>{
    console.log("Second handle start");
    const result = await resolve(event);
    console.log("Second handle stop");
    return result;
}


export const handle = sequence(first, second)

The resulting response will be:

First handle start
Second handle start
Second handle stop 
First handle stop

As you can see from the resulting output, the first function will be called first followed by the second function but the second function will finish before the first function. Well, I still don't know the reason why it happens this way🤷‍♂️.

Fixing Common Errors Whiles Using The Sequence Helper

Cannot find package "@sveltejs/kit" on production build

This problem is mostly found for those who use adapter-node whiles using the sequence helper function. The reason for this error is that, adapter-node doesn't bundle @sveltejs/kit with the build output so it doesn't find the sequence function when running the application in production.

Solution

Create a file called sequence.js and paste the sequence function code inside.

You can get the source code from node_modules/@sveltejs/kit/dist/hooks.js.
Then you import the sequence function from the file you just created.

example below
```
  import { sequence } from "./sequence.js";
```

handleError

This is the hook responsible for handling errors in your application. Whenever an error is thrown when rendering your app, this function will be called with the error and the corresponding event that caused it. This function actually doesn't do much apart from reporting the errors in your application. It is mostly useful during production where you might want to get notified of every error that happens in your application. For example, you might want to write in a code that sends you an email each time your app receives an error.

During development, a frame will be displayed on your screen highlighting the cause of the error.

The handleError function will not be called when pages and endpoints explicitly respond with 4xx and 5xx status codes

getSession

Since HTTP is a stateless protocol, it means the client and server forget about each other at the end of every request. In order to keep track of user's state, we use sessions to store data about the user. The data is stored in the server's memory.

The getSession hook allows you to access the session object. The function takes an event object and returns a session object. This function is run whenever SvelteKit server-renders a page. If it's unimplemented, the session is an empty object {}.

Apart from accessing the session object, you can also set the session inside this hook. Let's look at an example.

export const getSession = (event)=>{
    return event.locals.user = {
        name: "John Doe",
        age: "20",
        id: 112244233434343
    }
}

In the example above, we set the session object with some values. In order to access the session in our page, we just need to retrieve it inside our load function.

<script context="module">
    export const load = async ({ session })=>{
        return {
            props: {
            session
            }
        }
    }
</script>

Also, the data inside our session object will be accessible by endpoint if they access event.request.locals.

externalFetch

This hook simply allows you to modify a fetch request that happens inside a load function that runs on the server. Any fetch to any external resource than runs on the server is handled by this function. Actually, it doesn't do much, the only important use case I found for it was making it hit API's directly instead of passing through proxies. This doesn't do much but it helps increase the speed of your fetch requests. Also, it allows you to modify the headers of your fetch request.

Conclusion

This is a much detailed explanation of hooks in SvelteKit. If any information is missing out, please do write it in the comment section.

Python: How To Make A Letter Counter

Lucretius Biah — Wed, 29 Dec 2021 00:00:00 +0000

Table Of Contents

The code
Testing the fuction
Modified Code

So this blog post is about a problem which I found in Sololearn where you are to make a simple program that takes a group of text and then returns a dictionary showing the occurence of each letter

So a letter counter is simply a program which takes a text or string and returns the number of occurrence of each letter. We are going to make a python function which takes a string and returns a dictionary with the number of occurence of each letter

The code

def letter_counter(text):
    dict = {}
    for i in text:
        dict[i] = text.count(i)
    return dict

So a function called letter_counter was created and it takes text as parameter. Then inside the function, we create an empty dictionary called dict. Then on the next line, we iterate through all the characters in the text variable, we then include the current letter inside the dict dictionary. Then we use the .count method of the string class to find the number of occurrence of the current letter and assign it as the value of the letter in the dictionary. Then finally, we return the dict variable.

Testing the fuction

So let’s text the fuction we just created with this string “Lucretius is a great developer”.

text = "Lucretius is a great developer"
print(letter_counter(text))

{'L': 1, 'u': 2, 'c': 1, 'r': 3, 'e': 5, 't': 2, 'i': 2, 's': 2, ' ': 4, 'a': 2, 'g': 1, 'd': 1, 'v': 1, 'l': 1, 'o': 1, 'p': 1}

[Program finished]

Well, the fuction works alright but there is a slight problem.

If you are to check the output carefully, you can see the fuction found the number of occurrence for whitespaces as well but whitespaces are not letters so let’s modify our fuction to exclude whitespaces.

Modified Code

from string import ascii_letters
def letter_counter(text):
    dict = {}
    for i in text:
        if i in ascii_letters:
            dict[i] = text.count(i)
    return dict

Now if you are to run the fuction, you will realize that it excludes all non-letters from the dictionary.

What we did was to import the ascii_letters constant from the string module, then before adding a character to the dict variable, we check if the current character is included in the letters constant, if it is, we add it; meaning it’s a letter, else, we exclude it.

Happy Coding 😄

JavaScript: How To Return Data From A Function In Sqlite3

Lucretius Biah — Thu, 04 Nov 2021 00:00:00 +0000

Table Of Contents

The Problem
1. Why Undefined?
The Solution
1. Modified Code
2. Explanation

Whiles trying to implement a read counter for my website this morning, I run into a bug. The function which returned the query from the database always returned undefined

The Problem

const getData = (slug)=>{
    let data;
    db.serialize(()=>{
        db.get('SELECT * FROM blog WHERE slug = ?',slug, (err, rows)=>{
            data = rows;
        })
    });
    return data;
}

let data = getData("return-data-from-sqlite3-nodejs") // => undefined

This was my code snippet, the function getData takes a slug as parameter, then it searches the database to retrieve all the data for the slug. It then assigns the data to the data variable, then at the end of the function, it returns the data variable. The function without a doubt works perfectly but when you run it, it will always return undefined.

Why Undefined?

The reason why the function returns undefined is that, db.get is an asynchronous function, so the return statement will always run before the function has even completed it’s work.

The Solution

Since the db.get function is asynchronous, we need to find a way to make it return it’s value once it has finished it’s work and the solution is by using Promises. So we need to wrap the whole code in a Promise and when the function finishes executing, the promise will return the results.

Modified Code

const getData = (slug)=>{
    return new Promise((resolve, reject)=>{
    db.serialize(()=>{
        db.get('SELECT * FROM blog WHERE slug = ?',slug, (err, rows)=>{
            if (err)
                reject(err)
            resolve(rows)
        })
    });
    })
}

let promise = getData("return-data-from-sqlite3-nodejs") // => Promise { <pending> }
.then(results=>{
console.log(results) // => { slug: 'adding-matomo-website', read_times: 1, shares: 0, likes: 0 }
})

Explanation

So basically, what we did was wrap the whole function in a Promise and pass the rows to resolve if our code run successfully, else we pass the err to reject if there were any errors.

Oh, by the way, you can get the json of how many times this blog post has been read from this url /blog/return-data-from-sqlite3-nodejs.json

How to bypass reCAPTCHA using 2Captcha and Selenium in Python

Lucretius Biah — Thu, 28 Oct 2021 15:37:00 +0000

CAPTCHA's are really really annoying, even though they are there for security purposes, they tend to consume our time. Imagine filling a 5 minute form and then you have to restart filling the form again just because you got that annoying 😠 CAPTCHA wrong.
But..., there's a solution, 2captcha

What are CAPTCHA's?

First of all, CAPTCHA stands out for Completely Automated Public Turing test to tell Computers and Humans Apart. It's just a test which is taken to test if you are a human or a machine. CAPTCHA's help to defend against ad spammers who promote their scams in comments on webpages. By requiring all users to negotiate the CAPTCHA authentication, administrators can filter out spammers who attempt to automate their activities.

Why are they annoying?

First of all, they are great but they do become annoying when it becomes hard for you the human to solve

What is 2Captcha?

2Captcha is made to connect customers who need to recognize many captchas in real time. In short, they are a company who help to solve those annoying Captcha's for you. Though there are many CAPTCHA solving services available, 2Captcha is so far the best as it is very fast in solving Captchas. It's the main tool which I use to solve Captchas and am going to show you how you can use 2Captha to solve Captha's in Python using Selenium.

How 2Captcha Works

In order for 2Captcha to solve a Captcha for you, it requires some data.
So, here's how it works.

You submit data to their API endpoint.
The data contains the sitekey, page url, 2captcha key and method.
The sitekey contains code which is used to invoke the Captcha service on the page. The page url refers to the url of the page which contains the catpcha. The 2captcha key refers to the api key which you obtain from 2Captcha and the method tells 2captcha how to solve the captcha.
Someone on the endpoint receives your Captcha with the details
You keep on polling the endpoint till you Captcha is solved
The results is then returned to you

How To Solve Captcha's Using 2Captcha in Python

Installing the Packages

First of all, you need to have the Python language installed on your computer. Then, we install the selenium package. Selenium automates web browsers and it's going to help us to solve the captcha.
Open your terminal and type in pip install selenium.
Then, we install requests, (pip install requests) which will enable us to make http requests to the 2Captcha end point.
After everything has finished installing, you then need to install Chrome browser driver, you can download it here.

Starting Selenium

from selenium import webdriver

driver_path = "C:\\Program Files (x86)\\chromedriver_win32\\chromedriver.exe"
brave_path = "C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe"

option = webdriver.ChromeOptions()
option.binary_location = brave_path

browser = webdriver.Chrome(executable_path=driver_path, chrome_options=option)

browser.get("https://www.google.com/recaptcha/api2/demo")

So in the snippet above, we import the web-driver from selenium. The driver_path and brave_path variables holds the path to the chrome driver file and the brave browser file respectively.

Then, the option variable is useful if we want to give extra options to the browser, like for example, starting it in incognito mode.
The browser variable then creates the browser instance. The browser.get function opens the browser with a page containing a CAPTCHA which we are going to solve.

After running the code, if you get an image like this, then it means everything is working correctly.

Extracting The Data From The Page

So as I said earlier, in order for 2Captcha to solve a Captcha for you, it requires some details and those details are in the page which contains the Captcha.

site_key_element = browser.find_element_by_css_selector('[data-sitekey]')
site_key = site_key_element.get_attribute("data-sitekey")
page_url = "https://www.google.com/recaptcha/api2/demo"
method = "userrecaptcha"
key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

The site key is contained in an element with the attribute "data-sitekey" so we first find an element which contains the attribute. We then extract the site key value from the element.
The page_url is just the URL to the page which contains the Captcha.
The method tells 2Captha that the Captcha type is reCaptcha.
The key is obtained from 2Captcha if you signup for their services.

Submit Data To Their Endpoint

import requests

url = "http://2captcha.com/in.php?key={}&method={}&googlekey={}&pageurl={}".format(key,method,site_key,page_url)
response = requests.get(url)

if response.text[0:2] != 'OK':
    quit('Service error. Error code:' + response.text)
captcha_id = response.text[3:]

In order to make a request to a server, we use the python requests module. So we imported the requests module and sent a request to the url which we created.

We then wait for a response, if the response is not equal to "OK", then it means something went wrong so we close the program, else, we store the capthca_id from the response.

Receiving Solved Captcha

After we have sent the request to their endpoint, we then keep on polling their server to check if they have finished solving our Captcha.

import time

token_url = "http://2captcha.com/res.php?key={}&action=get&id={}".format(key,captcha_id)

while True:
    time.sleep(10)
    response = requests.get(fetch_url)

    if resp.text[0:2] == 'OK':
        break

After submitting the request, we will be given a captcha id which we will use to check if our Captcha is solved. Since the Captcha won't be solved once it is sent, we need to use a while loop. Inside the loop, we wait for 10 seconds and make a request. If the response is "OK", we break the loop since it means the Captcha has been solved.

Inserting The Solved Captcha Into The Page

So after receiving the solved Captcha, we will then use Selenium to insert the solved Captcha into the page.

captha_results = response.text[3:]
browser.execute_script("""document.querySelector('[name="g-recaptcha-response"]').innerText='{}'""".format(captha_results))
browser.find_element_by_css_selector('[id="recaptcha-demo-submit"]').click()

So after we extract the solved Captcha, we then use Selenium to execute JavaScript that inserts the code in the form and then submits
it.

The Whole Code

from selenium import webdriver
import requests
import time

driver_path = r"C:\\Program Files (x86)\\chromedriver_win32\\chromedriver.exe"
brave_path = r"C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe"

option = webdriver.ChromeOptions()
option.binary_location = brave_path

browser = webdriver.Chrome(executable_path=driver_path, options=option)

browser.get("https://www.google.com/recaptcha/api2/demo")

site_key_element = browser.find_element_by_css_selector('[data-sitekey]')

site_key = site_key_element.get_attribute("data-sitekey")
page_url = "https://www.google.com/recaptcha/api2/demo"
method = "userrecaptcha"
key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

url = "http://2captcha.com/in.php?key={}&method={}&googlekey={}&pageurl={}".format(key,method,site_key,page_url)
response = requests.get(url)

if response.text[0:2] != 'OK':
    quit('Service error. Error code:' + response.text)
captcha_id = response.text[3:]



token_url = "http://2captcha.com/res.php?key={}&action=get&id={}".format(key,captcha_id)

while True:
    time.sleep(10)
    response = requests.get(fetch_url)

    if response.text[0:2] == 'OK':
        break



captha_results = response.text[3:]
browser.execute_script("""document.querySelector('[name="g-recaptcha-response"]').innerText='{}'""".format(captha_results))
browser.find_element_by_css_selector('[id="recaptcha-demo-submit"]').click()

How To Generate A Sitemap For Your SvelteKit Website

Lucretius Biah — Tue, 26 Oct 2021 14:55:02 +0000

Generating a sitemap for your SvelteKit website is very easy. It requires no coding at all.

By default, SvelteKit has no sitemap generator at all. But there is a node module which can help you generate a sitemap.xml file for you website. It's called sitemap-generator. It's a module which helps us to generate sitemaps. It is able to builld sitemaps for websites and even SPA's.

It comes along with a CLI (Command Line TooL) which makes sitemap generation easier.

Generating Sitemap For Your Website

Inside the root of your src/routes folder, create a sitemap.xml.js file
This is the file which will read the contents of the xml file and display it to the user
Inide the file you created, paste the following code inside

import fs from 'fs';

export async function get() {
  try {
    const data = fs.readFileSync('sitemap.xml', 'utf8');

    return {
      headers: {
        'Content-Type': 'application/xml'
      },
      body: data
    };
  } catch (e) {
    return {
      body: 'Error'
    };
  }
}

Build and deploy your website.
I know this sounds weird but it's actually the right thing.
The sitemap generator needs a live website in order to generate the sitemap.
Use SSH to connect to your server and navigate to the root directory of your website.
You need to connect to your server through SSH and navigate to the root directory in which the build folder is location. NB: Not the build folder, but the folder in which the build folder resides in.
Execute the code below

 npx sitemap-generator-cli %your_website_url% --last-mod --change-freq daily --priority-map "1.0"

where %your_website_url% is the url to your website. The arguments are self explanatory so there will be no need for me to explain them.
This command will create a sitemap.xml file inside the website root folder.

Open your browser and navigate to %your_website_url/sitemap.xml and the sitemap should be there.

Conclusion

So fellas, that is how you can create a sitemap for your sveltekit website. If you faced any challenges, please leave a comment below.

I wish dev.to had a chat feature

Lucretius Biah — Sun, 24 Oct 2021 10:08:31 +0000

I really wish dev.to had a chat feature included in it. Sometimes, I just want to say Hi to a few people but there seems to be noway to do it inside the application.

Something should be done about it.😠😠

An easy way to count elements in a JavaScript array

Lucretius Biah — Sun, 24 Oct 2021 08:15:36 +0000

If you have a Python background, you are probably familiar with the count method in the list class.
The count method does not exist in JavaScript. For those unfamiliar with the count method, it counts the number of times an item appears in an array. For example, suppose we have a numbers array, and we want to find the number of times the number '2' appears in the array. In Python, we would do it like this.

numbers = [1,2,3,4,5,2,3,4,2,4,2]
print(numbers.count(2)) # => 4

The code would return 4 because the number '2' appears four times in the array.
Since this technique did not exist in JavaScript, I decided to write my own.

Array.prototype.count = function (item) {
    return this.filter((x) => x === item).length;
};

Extending JavaScript inbuilt classes can cause unexpected behaviour and conflicts with other libraries, so it's better to create custom classes instead.

In the code above, I extended the Array class and added a new method called count through the prototype. The method takes an argument called item. It then filters the array and returns the number of times item was found in the array.

To utilise the code, simply construct an array and call the count method as shown below.

let names = ['David', 'Walsh', 'David', 'Tania', 'Lucretius'];
names.count('David'); //=> 2

The FLAMES Game Algorithm in JavaScript

Lucretius Biah — Wed, 20 Oct 2021 06:44:01 +0000

So I wanted to create the FLAMES Game in JavaScript and here's how I did it

If you haven't read about my article on the FLAMES game, you can read it here.

The Algorithm

Okay, so here's how the game work.

It takes two full names of different individuals
Cancel out the common letters in both names
Count the number of uncommon letter's
Find the modular 6 of that number
Then compare the number to this simple table

| Number | FLAMES |
| ------ | ------------- |
| 0 | Friends |
| 1 | Lovers |
| 2 | Admirers |
| 3 | Marriage |
| 4 | Enemies |
| 5 | Secret Lovers |

Code In JavaScript

So we are going to use Object Oriented Approach to create the game in JavaScript so you can create a new JavaScript file and paste the following code inside and I will explain below

class Flames {
    constructor(first_name,second_name){
        // The constructor takes both names as paramters
        this.first_name = first_name; //The first partner's name
        this.second_name = second_name; //The second partner's name
        //We then create a clone of both names and convert them 
        //to lowercase and remove all white spaces in them
        //NB: The reason for creating the clone is because we don't
        //want to mess with the original data

        if (first_name === undefined || second_name === undefined)
                throw Error("Both names are required");

        this.a = this.first_name.toLowerCase().replace(/\s/g,"");
        this.b = this.second_name.toLowerCase().replace(/\s/g,"");
        this.getDifference();
        this.getRelationship();
        //Now we remove the cloned variables since they are not needed
        delete this.a;
        delete this.b;
    }

    getDifference(){
        //This method is responsible for cancelling the common letters
        //out and returning the uncancelled letters

        for (let i = 0; i < this.a.length; i++) {
            for (let j = 0; j < this.b.length; j++){
                //The `if` statement below is to check if a letter in the
                //first_name is also present in the second_name, if it is,
                //it removes that letter in both names.
                //After that, we call the function again, the reason for calling
                //the function is to make it run with the new data or else it will
                //stick to the unreplaced data
                if (this.a[i] === this.b[j]){
                    this.a = this.a.replace(this.a[i],"");
                    this.b = this.b.replace(this.b[j],"");
                    this.getDifference();
                }
            }
        }
        this.differenceContent = this.a + this.b;
        this.difference = this.a.length + this.b.length;
        return this.difference;
    }
    getRelationship(){
        //The method responsible for returning the relationship between both individuals
        const FLAMES = {
            0: ["F","Friends"],
            1: ["L","Lovers"],
            2: ["A","Admirers"],
            3: ["M","Marriage"],
            4: ["E","Enemies"],
            5: ["S","Secret Lovers"]
        };
        let modular_difference = this.difference % 6; //Gets the modular 6 of this.difference
        this.relationship = FLAMES[modular_difference];
    }
}

Explaining The Code

That's all the code for the game. So we created a class called Flames. It's constructor takes two parameters; first_name and second_name. We then create a clone of both names as this.a and this.b respectively, the reason why we do this is that we do not want to mess with the original data.

The getDifference function is the function which is responsible for cancelling out the common letters in both names. It iterates through all the letters in the first_name and checks to see if that letter exists in the second_name. If it does, it removes that letter in both names. After that, it combines the letters which were not cancelled and sets it as this.difference.

The function getRelationship is the function which determines the relationship between the two names. It contains an object whose keys can be used to find the relationship between the names. The modular_difference variable contains this.difference MOD 6. This will return an integer which is less than 6, we then use that integer as key to access the relationship from the FLAMES object.

Playing The Game

In order to play the game, you can create an HTML file and place a form which requires two names, the creativity is upto you, then in your JavaScript, you pass those names to the FLAMES class like this;

const FLAMES = new Flames("First Partner's Name","Second Parner's Name");
console.log(FLAMES.relationship)

Do note that, the Flames class returns an object which contains some basic data, in order to get the relationship, you need to call the class' instance.relationship

Conclusion

So that's the algorithm for the FLAMES game in JavaScript, you can try it out at https://www.kudadam.com/flames.

Happy Coding 😄

Follow me for more cool articles like this

The FLAMES Game. Everything You Need To Know About It

Lucretius Biah — Wed, 20 Oct 2021 04:55:12 +0000

The FLAMES game is a game which is usually played by kids, it can determine the relationship between two people with the use of their names.

What is FLAMES?

Flames is an acronym which stands out for "Friends Lovers Admirers Marriage Enemies 'Secret Lovers'". This game can determine the relationship between two people with the use of their names. It is usually played among teens to find if they are compatible with their crushes😆 Well, I played some before and it was fun. Even though some websites use different meanings for the acronym, the words they use are just synonyms to the original, but the meaning above, is the original.

Who Invented The FLAMES Game?

Though it is unknown who invented the game, research I made shows that the game was created around the 90's, that's a really really long time ago. And... it was played among kids and teenagers.

Is the FLAMES Game Real?

Simple answer, No. Other answer, well, it depends. The results you get after playing the game can actually go in your favour or it might not. Though it uses a simple algorithm, it can be real when it's results are true for you.

Technically speaking, the results produced are not real, it's just the results from a mathematical formula, so naa!!, It's not.

How To Play The Game

The original version of FLAMES is played on a paper. So you will need a pen and paper.

Write your name and your partner's name on a piece of paper

On the piece of paper, you are to write your full name and your partner's full name. Though this is not necessary, it is the best way to test your FLAMES. Also, don't use nicknames.

For example; we will use the names "Tony Stark" & "Pepper Stark"

Cancel out the common letters in both names

Now, you are to cancel out the common letters in both of the names irrespective of the case in which the letters are written in. Note that, you are only to cancel out an instance of the letter in both names, not all instances of the letter.

We then get "Tony" ~~Stark~~" & "Pepper ~~Stark~~".

Count the number of remaining letters

We then count the number of letters which were not cancelled in both names.

So we combine the un-cancelled letters and get "TonyPepper". We then count the number and get 10.

We then compare the number to the acronym FLAMES

So we start assigning each number to each letter in the acronym, like 1 -> F, 2->L,3->A,... till we get to 10. If we get to the end of the acronym, we restart the counter till we get to ten. For example, 6 -> S so 7 will then start at F again till we get to the end of the number.

So the number 10, will end at M. We then compare the answer to this simple table below.

Letter	Meaning
F	Friendship
L	Lovers
A	Admirers
M	Marriage
E	Enemies
S	Secret Lovers

So, the relationship between "Tony Stark" and "Pepper Stark" is Marriage.

Conclusion

So fellas, that's all about the FLAMES game. Go ahead and try it out.
Follow me for more nice articles like this