DEV Community: Francis Avanceña

Making Earthquake PH: Working with Tweets and Maps

Francis Avanceña — Wed, 15 Jan 2020 00:00:00 +0000

The recent disaster in Batangas becuase of the Taal Volcano caused a spew of scientific terms and overflow of science communication to the public. It got me thinking on how we inform the general public regarding these terms and especially during these times where many volcanic earthquakes occur.

Gretchen Ho

@gretchenho

Looks like @phivolcs_dost needs a social media / digital comms manager to translate all of this info into human speak. #informationdissemination twitter.com/jimenez_mon/st…

03:29 AM - 13 Jan 2020

Mon Jimenez @Jimenez_Mon
Who needs:understands this info about Taal? https://t.co/ANrZKiOra6

96 678

As per Gretchen Ho’s tweet above how do we make PHIVOLCS’ tweets into human speak. That’s when I thought of making Earthquake PH.

What is Earthquake PH?

Earthquake PH is a website that gives details about earthquakes in the Philippines in an understandable manner through, descriptions and map visualizations of where earthquakes are. This site was created to make the general public informed about details about earthquakes making information understandable to the normal citizen.

How does Earthquake PH work?

The site uses the Twitter API to scrape the most recent tweets from the PHIVOLCS account every ten minutes. From the recent tweets, we filter them to get tweets specifically regarding earthquake information. Next, we parsed the information from the full text of the Tweet to get the following information using Regular Expressions:

Date and Time
Location
Latitude
Longitude
Strength or Magnitude
Depth of Focus

After this, we run the coordinates to a reverse Geocoder to give us an address of where the epicenter of the earthquake is and then save it to our MongoDB database.

Features of Earthquake PH

Earthquake Details

The first feature is a general overview of the details regarding the earthquake. I included the general details from the tweet, a Google Map of the epicenter based on the longitude and latitude given and descriptions about how strong the earthquake was from this website.

Richter magnitude	Description	Earthquake effect
< 2.0	Micro	Micro earthquakes, not felt.
2.0-2.9	Minor	Generally not felt, but recorded.
3.0-3.9	Minor	Often felt, but rarely causes damage.
4.0-4.9	Light	Noticeable shaking of indoor items, rattling noises. Significant damage unlikely.
5.0-5.9	Moderate	Can cause major damage to poorly constructed buildings over small regions. At most slight damage to well-designed buildings.
6.0-6.9	Strong	Can be destructive in areas up to about 160 kilometres (100 mi) across in populated areas.
7.0-7.9	Major	Can cause serious damage over larger areas.
8.0-8.9	Great	Can cause serious damage in areas several hundred miles across.
9.0-9.9	Great	Devastating in areas several thousand miles across.
10.0+	Epic	Never recorded

Quake Map

I decided to add another feature which is called the Quake Map the Quake Map visualizes on the screen where the 10 latest earthquakes are, how strong they were and when and where exactly they took place.

Technology Used

Now for the technical details, the website is a monolith Express.js application, a MongoDB database from MongoDB Atlas, Several Map and Geocoding APIs and of course Twitter’s Developer API.

In the detail pages of the earthquakes, I used Google’s Map Embed API to visualize the location of the earthquake. On the other hand, I used Leaflet and OpenStreetMaps for the Quake Map since it’s open-source and free unlike Google’s API for multiple markers. Leaflet can also be used for more features down the line.

On updating the data on the site, I just do this by having a Node.js script that runs every 10 minutes and on this file, using the Twitter API, I get the 100 most recent tweets of PHIVOLCS not including RTs then get the information through RegEx, then I check the database if the Tweet ID is already included in the database if it’s not I used LocationIQ’s Reverse Geocoding API to get an address of where the earthquake occurred. Then insert it to the database.

Using the site.

You can visit the site by going to https://earthquakeph.francisoliver.dev/ or by clicking here. The site currently has more than 120 recorded earthquakes and counting. Feel free to suggest new features to the website and how I can improve it.

Side Projects: Telegram Food Bot using the Zomato API

Francis Avanceña — Sat, 19 Oct 2019 00:00:00 +0000

In work, we use Telegram as a main communication platform and being in a central business district, there are many food places to choose from that will end up in endless discussions on where to go out to eat for lunch outs and dinner catch-ups. When looking at fun APIs to use in a project I stumbled across Zomato’s API, so, as a side project, I decided to make a Telegram bot that narrows restaurant options and stop groups from being indecisive in choosing where to eat.

What is Zomato?

Zomato is a restaurant aggregator and food delivery service startup company founded in India. It is now known today for its Zomato Gold product which allows for discounts and buy-1 take-1 deals in certain restaurants. The company localized into many countries, including here in the Philippines.

What is Telegram and Telegram Bots?

Telegram is a cross-platform instant messaging app similar to WhatsApp and Viber, it is very popular due to its feature of end-to-end encryption in all conversations, customer stickers and chatbots (particularly the Werewolf, Uno and Quizarium chatbots) to name a few. In the industry, we mainly focus on Facebook’s Messenger Platform as a way for us to showcase services and improve a brand’s social presence but in the Telegram environment, anyone can make their own chatbot without creating a Facebook page and having the trouble of applying for a Facebook API Key. Telegram allows for developer creativity, in which developers can have a bot for every occasion and problems they deem they need to solve or another ‘side project’ that will never get pushed to production.

How will the chatbot work?

Looking at the given endpoints of Zomato (check it out here for the full documentation), I planned to make it interactive as possible, here are the available endpoints from the documentation.

Request	Endpoint	Description
`GET`	`/categories`	Get the list of Categories
`GET`	`/cities`	Get city details
`GET`	`/collections`	Get Zomato collections in a city
`GET`	`/cuisines`	Get the list of all cuisines in a city
`GET`	`/establishments`	Get a list of restaurant types in a city
`GET`	`/geocode`	Get location details based on coordinates
`GET`	`/location_details`	Get Zomato location details
`GET`	`/locations`	Search for Locations
`GET`	`/dailymenu`	Get the daily menu of a restaurant
`GET`	`/restaurant`	Get restaurant details
`GET`	`/reviews`	Get restaurant reviews
`GET`	`/search`	Search for restaurants

In order for an accurate search through the bot, we need to get three crucial points of information from the user first. First, where are they located (/location), next is the type of establishment they want to eat at (/establishments) and lastly the type of cuisine they would like to eat (/cuisines). After that, we search for the relevant restaurants through the search endpoint (/search) and display them to the user.

The chatbot's process flow

Implementation and Technology Used

For this project, I used Node.js and NPM packages Telebot and zomato.js, a little RegEx knowledge is also useful here. These API wrappers make it easier for us to develop and abstracts the complexity making us focus on the experience of the chatbot and its implementation. I heavily used Telegram’s inlineKeyboard feature which allows for buttons to be pressed by the user which triggers the next part of the flow. Essentially, we call Zomato’s API based on different event handlers in the bot.

For the implementation, I created three different telegram commands as access to the bot’s services.

Command	Description
`/start`	Start a conversation with the bot.
`/location`	Tell the bot your location. Usage `/location <keyword>.`
`/search`	A quick search for a restaurant. Usage `/search <keyword>`, works best if you have already set a location with the `/location` command.

The bot’s flow is heavily reliant on the ‘callbackQuery’ event and parsing of that data to store for later usage in a case syntax. The bot does not use a database but instead uses a 2D array to store data unique per chat or conversation using Telegram’s chat_id as a unique identifier. As another kicker, I deployed the chatbot to Heroku in a free dyno, sending an HTTP request to the main URL every five minutes to avoid the chatbot from sleeping.

The chatbot in action

Going through the main flow

Get started

Set the location

Set establishment type

Set cuisine

Show restaurants

Set restaurant

Show the map

Doing a quick search

The quick search takes into consideration the set location through the /location <KEYWORD> command using the bot and immediately going to the quick search may not yield the best results.

For this example, I put BGC Stopover Pavillion as my location so it takes into account that location when I search for a restaurant.

Quick Search

Quick Search: Restaurant Select

Possible Improvements

The possible improvements and features that can be added to the bot are as follows:

Having the user control to control to sort via the cost and rating.
Having the user control how many restaurants in the search the bot will display as the results.
Having the user choose what payment method they want and displaying restaurants that only have that payment method.
Have suggested restaurants to try based on the user’s location via the /location_details endpoint.
Have a proper database to store the chat data.
Make the chatbot less reliant on inlineKeyboards but on a ReplyKeyboardMarkup to have a real conversation experience with the bot and to show which user did what if the chatbot is in the group chat.
And other general performance updates (having a database instead of an array to store data).

Conclusion

Telegram is one of the best channels for developers starting out with chatbots. It has a low barrier to entry and its usage can go to very simple to incredibly complex. It can be used for implementing games, implementing services through APIs such as a bot like this, a weather bot and even a bot that just sends jokes, web scraping to even handling payments with its integration with Stripe and other payment methods. It allows developers to have fun and just do that side project that you always wanted to do as a break from the usual jobs. Zomato’s API is just begging to be integrated into other apps, its huge repository of restaurant information across the globe can be used in not only chatbots but in websites and can be integrated with other services as well.

Making this chatbot was fun, doing something for ourselves once in a while that we can use in real life (me and my Management Trainee friends use this chatbot) without any pressure from deadlines is the ultimate goal of any side project. Sometimes we need that as developers, our own creation, a safe programming space, where we can just goof off and do what we want and where we have total control and learn new technologies at the same time.

UAAP Real Time Sentiment Analysis of Fan Tweets

Francis Avanceña — Fri, 30 Aug 2019 00:00:00 +0000

It is UAAP season once again and this year’s season 82 is hosted by Ateneo it is a good time to take a look at one of my favorite projects I did during my senior year in college. This one is taken from the final project for CS 129.1: Special Topics in Software Engineering: Contemporary Database Technologies, more commonly known among our circle as “Contempo DB”. For this project, we did a real-time tweet analysis of tweets during the Final Four game of the Ateneo Blue Eagles and the FEU Tamaraws last November 25, 2018.

What we wanted to find out.

For the project, we wanted to find out through data analytics are three things.

What percentage of the tweets regarding the UAAP game are toxic or not?
Which fan base or contingent is more toxic?
What are the most frequent words that fans use?

If you look at Twitter during these crucial collegiate games you see that most of the Philippine Trends are taken up by topics that are related to the game. However, due to the action happening in the games, some of the fans become overly passionate about their tweets. This means there is good data velocity coming from Twitter’s API and there a lot of emotionally charged tweets that we can analyze.

The technology we used.

The main technology that we used is mainly JavaScript based. NodeJS as a runtime and NPM Packages. For the data gathering we used the following:

MongoDB with Mongojs as a driver
Twit as a Twitter SDK wrapper for both the platform’s REST and Streaming APIs
Sentiment (NPM Package)
Dotenv to secure our API keys

For data visualization, we did it via an express web app and used the following:

Express
EJS as a templating engine
Chartkick.js

// Load environment variables
require('dotenv').config();
// Configure twitter API
const Twit = require('twit');
const config = require('./twitter_config');
const twitter = new Twit(config);
// Load sentiment analysis package
const Sentiment = require('sentiment');
const sentiment = new Sentiment();
const filipinoWords = require('./filipino');
// Configure mongoDB
const mongojs = require('mongojs');
const db = mongojs('tweets',['admu', 'feu'])

const filipino = {
    extras: filipinoWords
};

const trackingWords = [
    'ADMU',
    'FEU',
    // Plus many more
];

How did we do it?

We followed this simple methodology:

Using Twitter’s streaming API, we subscribed to the ‘statuses/filter’ endpoint.
Then we listened for tracking words related to the game and filter it to English (en) or Filipino (tl) words.
Analyzed the tweet using a sentiment analysis package.
Then we “classified” them to be either an Ateneo contingent or FEU contingent tweet.

For the sentiment analysis, we simply thought of toxic and good words in Filipino and translated it to English and set their score as the same as their English score. This is not the best way to do it but for our case, it was the best we can do at that time. We managed to come up with around 50+ toxic words and around 40+ good words.

console.log("Listening for tweets . . .");

const stream = twitter.stream('statuses/filter', {track: trackingWords, language: ['tl','en']})
stream.on('tweet',(tweet)=>{
    if (tweet.retweeted_status === undefined){
        let tweetText;
        if (tweet.extended_tweet == undefined){
            tweetText = tweet.text;
        } else {
            tweetText = tweet.extended_tweet.full_text
        }
        let analysis = sentiment.analyze(tweetText, filipino);
        let tweetScore = tweet;
        tweetScore.sentiment_analysis = analysis;
        classifyTweet(tweetScore);
    }
});

We first gather and analyze the tweets coming in from the Twitter API and save it to a MongoDB collection, with the sentiment score and the tokenized tweet, based on a simple classification logic: For negative sentiment score tweets, if it talks about a certain school or team it is classified on the opposing side. On the other hand for positive and neutral scored tweets we classify it to them as fans of the team they are talking about. This classification is happening as the tweets come by.

function classifyTweet(tweet){
    let admuClassifiers =[
        // Classifiers for AdMU here.
    ];
    let feuClassifiers = [
        // Classifiers for FEU here.
    ];
    let tweetText;
    if (tweet.extended_tweet == undefined){
        regText = tweet.text;
        tweetText = tweet.text.toUpperCase();
    } else {
        regText = tweet.extended_tweet.full_text;
        tweetText = tweet.extended_tweet.full_text.toUpperCase();
    }

    for (let admu of admuClassifiers){
        if (tweetText.includes(admu.toUpperCase())){
            if (tweet.sentiment_analysis.score >= 0){
                console.log(`Inserted to ADMU: Score ${tweet.sentiment_analysis.score} - ${regText}`);
                return db.admu.insert(tweet);
            } else {
                console.log(`Inserted to FEU: Score ${tweet.sentiment_analysis.score} - ${regText}`);
                return db.feu.insert(tweet);
            }
        }
    }

    for (let feu of feuClassifiers){
        if (tweetText.includes(feu.toUpperCase())){
            if (tweet.sentiment_analysis.score >= 0){
                console.log(`Inserted to FEU: Score ${tweet.sentiment_analysis.score} - ${regText}`);
                return db.feu.insert(tweet);
            } else {
                console.log(`Inserted to ADMU: Score ${tweet.sentiment_analysis.score} - ${regText}`);
                return db.admu.insert(tweet);
            }
        }
    }
}

After the gathering we did a map-reduce on the tokenized tweets that we got, for three different use cases, we didn’t include stop words for both English and Filipino that we got from our professor, for the map-reduce phase.

Most used words/emojis
Most used positive words/emojis.
Most used negative words/emojis.

// Map functions
function getTokens1(){
   var stopWords = [];
   var tokens = this.sentiment_analysis.tokens
   for(var token of tokens) {
       if (token != "" && !stopWords.includes(token.toLowerCase())){
           emit(token, 1)
       }
   }
}
function getTokens2(){
   var stopWords = [];
   var tokens = this.sentiment_analysis.positive
   for(var token of tokens) {
       if (token != "" && !stopWords.includes(token.toLowerCase())){
           emit(token, 1)
       }
   }
}
function getTokens3(){
   var stopWords = [];
   var tokens = this.sentiment_analysis.negative
   for(var token of tokens) {
       if (token != "" && !stopWords.includes(token.toLowerCase())){
           emit(token, 1)
       }
   }
}

// Reduce Function
function aggregateCount(key, values){
   var count = 0;
   for(var value of values){
       count += value;
   }
   return count;
}

// Map Reduce Command Run in the MongoDB Shell
results = db.runCommand({
    mapReduce: 'admu',
    map: getTokens1,
    reduce: aggregateCount,
    out: 'admu.wordcount'
});

results = db.runCommand({
    mapReduce: 'feu',
    map: getTokens1,
    reduce: aggregateCount,
    out: 'feu.wordcount'
});

results = db.runCommand({
    mapReduce: 'admu',
    map: getTokens2,
    reduce: aggregateCount,
    out: 'admu.positive'
});

results = db.runCommand({
    mapReduce: 'feu',
    map: getTokens2,
    reduce: aggregateCount,
    out: 'feu.positive'
});

results = db.runCommand({
    mapReduce: 'admu',
    map: getTokens3,
    reduce: aggregateCount,
    out: 'admu.negative'
});

results = db.runCommand({
    mapReduce: 'feu',
    map: getTokens3,
    reduce: aggregateCount,
    out: 'feu.negative'
});

Results

For our results in the web app we mainly looked at the following: using a bar graph we looked at the most frequently used words, most used positive words, most used negative words. Aside from that we also did Top 10 most positive tweets for both sides and a top 10 most negative tweets for both sides. Using chartkick.js we used an API endpoint to get the data for performance (gotta have that fast page load).

General Results

Total Count of Tweets

Total Count of Positive Tweets

Total Count of Negative Tweets

Total Percentage of Positive Tweets

Total Percentage of Negative Tweets

Looking at the Ateneo Tweets

Most Frequently Used Words/Emojis

Most Frequently Used Positive Words/Emojis

Most Frequently Used Negative Words/Emojis

Some examples of top positive tweets from Ateneo fans

Tweet	Sentiment Score
LOVE YOUR ENERGY, @ThirdyRavenaaa 💙 WOOHOO! Galing, galing!	14
Thirdy’s maturity every year since high school has been amazing! What’s more amazing is the maturity of not his hops but of the maturity of his biceps triceps and shoulders!!! 💪🏻 Am I right? Haha! Good job @ThirdyRavenaaa !!!	14
Finals here we come!! 💙 Congratulations, Ateneo Blue Eagles 😃 Good luck sa finals 😊💙 #BEBOB #UAAPFinalFour #OBF	13

Now some top negative tweets from Ateneo fans

Tweet	Sentiment Score
Sino yung #21 sa FEU? Halatang halata ang pagbunggo kay Isaac aba!! Gago ka?? Kitang kita sa replay pwede ka dumaan sa iba talagang ganun pa ha? Bullshit ka.	-9
Get yo shit in da basketball court Stockton. There’s no way that’s a basketball play. UAAP should ban that fool. #OBF	-9
@alecstockton2 how are you doing now in the dugout Mr. Ill tempered piece of shit	-6

Looking at the FEU Tweets

Most Frequently Used Words/Emojis

Most Frequently Used Positive Words/Emojis

Most Frequently Used Negative Words/Emojis

Some examples of top positive tweets from FEU fans

Tweet	Sentiment Score
I will always be proud of you guys!! You have fought well! Let’s bounce back next year!! Braver!! 💪 Salute to all our graduating players 👏 You all have made the FEU Community so proud!! Thank you our brave Tams! Mahal namin kayo!! 💚💛	17
Though far from home, our feet may roam Our love will still be true Our voices shall unite to praise thy name anew We’ll treasure within our hearts the FEU! Horns up, Tamaraws! 💚💛🔰 Atleast we made it to the final 4. Not bad at all, Congrats Areneyow! 🤣	15
Nothing but love and respect to the FEU Men's Basketball team 💚💛 you guys did great! We'll bounce back strong next season.	10

Now some top negative tweets from FEU fans

We even got a Bisaya tweet in the mix.

Tweet	Sentiment Score
PUTANGINA MO KA WALA KANG MANNERS GAGO!!!! MGA FANS NG ATENEO BOO KAYO MGA QAQO	-9
thirdy ravena ayaw paawat sus	-7
Dili jud ni mawala ang BIASING pag magdula ang ATENEO ayy. Yawa mani si Thirdy Ravena. Playing victim pisteeee 🤬🤬🤬 di kayko ga watch ug basketball pero puta siya ✌🏼	-7

Zipf’s Law

The results and the curve that it shows reminds me of a VSauce video that I watched before. See the video here:

In a nutshell, Zipf’s law just states that given a large sample of words used, the frequency of any word is inversely proportional to its rank in the frequency table. In mathematical terms, a word number n has a frequency proportional to 1/n.

Final Words

Me and my group are not data scientists, the methodology that we used is not perfect. We made this project specifically for a database class not necessarily a pattern recognition or data modeling class. The classification logic can be significantly improved and there are more things to analyze in tweets rather than sentiments. I encourage the use of Twitter’s excellent API to look into more possible data science use cases. I also included our presentation deck that has most of the points raised here and a video of our gatherer and classifier in action during the game itself.

Implementing Dark Mode to Your Jekyll Site

Francis Avanceña — Mon, 08 Jul 2019 00:00:00 +0000

Jekyll is a static site generator powered by Ruby, that can use both HTML and Markdown for markup and Liquid as a template engine. It’s the technology that powers my personal website! And with the prevalence in web development of now having both a light and a dark theme, we will implement having this functionality in Jekyll sites.

Using native CSS variables and JavaScript we are going to implement a full blown toggled dark mode or dark theme in our Jekyll websites. First we must first define our CSS variables for our light theme. In CSS we define a variable by having two dashes prefixing the variable name like in the code example below.

html {
    --bg: #fff;
    --bg-secondary: #f3f3f3;
    --headings: #07f;
    --text: #333;
}

We can see that we have four CSS variables namely --bg, --bg-secondary, --headings and --text. Once we have all our CSS variables set up for the light theme we create another set for the dark theme retaining the variable names but appending it to the html element with the data-theme='dark' attribute like in the code below:

html[data-theme='dark'] {
    --bg: #333;
    --bg-secondary: #444;
    --headings: #39f;
    --text: #bbb;
}

With those two steps out of the way we need only need to assign the CSS variables to the different HTML components.

body {
    background-color: var(--bg);
}

.container {
    background-color: var(--bg-secondary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--headings);
}

p, strong, b, em, span, code, small {
    color: var(--text);
}

Now in your main HTML layout file to check whether your dark mode works add the attribute data-theme='dark' to the html element.

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/assets/js/application.js"></script>
    <link rel="stylesheet" href="/assets/css/application.css">
    <title>My Jekyll Site</title>
<head>
<body>
    <!-- Jekyll Template -->
</body>
</html>

For now we leave the site in its light mode set the data-theme attribute back to light. Now we must create a button to toggle between both modes and it give the class theme-toggle to be able to select it using JavaScript.

<button class="theme-toggle">Toggle Dark Mode</button>

We will next write the JavaScript for the desired behavior of when clicking the button it must toggle between our two themes using native JavaScript we write.

document.addEventListener('DOMContentLoaded', themeChange);

function themeChange(){
    // Select our toggle button
    let button = document.querySelector('.theme-toggle');

    // Add an event listener for a click
    button.addEventListener('click', function(e){
        // Check the current data-theme value
        let currentTheme = document.documentElement.getAttribute('data-theme');
        if(currentTheme === 'light') {
            transition();
            document.documentElement.setAttribute('data-theme', 'dark');
        } else {
            transition();
            document.documentElement.setAttribute('data-theme','light');
        }
    });

    // Adds the 'transition' class to <html> for CSS fun
    let transition = () =>{
        document.documentElement.classList.add('transition');
        window.setTimeout(()=>{
            document.documentElement.classList.remove('transition');
        }, 1000);
    }
}

Going back to our CSS file to add the CSS transition we add the following code below at the end of your CSS file.

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
    transition: all 650ms !important;
    transition-delay: 0 !important;
}

If you are using a single page application like React.js, Angular or Vue. This implementation works fine as you navigate the web app but for Jekyll in which the files are built into the _sites folder and technically has multiple HTML pages and files when deployed, the dark mode is immediately lost when we move from one HTML file to another. To remedy this we go to one special library known to Ruby Developers: turbolinks.js. Known for being shipped with the Ruby on Rails Framework its main implementation and the fundamentals of how turbolinks works is the solution on retaining the dark theme while navigating through our Jekyll site.

Turbolinks works by intercepting anchor tags or the <a> tags in your site and instead of doing the regular GET request for it, turbolinks intercepts the request and makes an XMLHttpRequest or more commonly known as an AJAX request instead and only replacing the contents of the <body> tag. So in technically it makes our Jekyll site like a "single page application" in a sense.

We only need to add the turbolinks.js library via CDN or locally through npm and add it to our header in the default HTML layout.

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js"></script>
    <script src="/assets/js/application.js"></script>
    <link rel="stylesheet" href="/assets/css/application.css">
    <title>My Jekyll Site</title>
<head>
<body>
    <!-- Jekyll Template -->
</body>
</html>

In adding turbolinks we have to edit our JavaScript file, since we said that we want the code to run when 'DOMContentLoaded' event has been triggered but due to turbolinks when we navigate our pages this event does not trigger thus leaving our code unable to execute. We must change the event handler to a turbolinks event namely the 'turbolinks:load' event provided in the turbolinks documentation. Now our JavaScript file should look like the example below.

document.addEventListener('turbolinks:load', themeChange);

function themeChange(){
    // Select our toggle button
    let button = document.querySelector('.theme-toggle');

    // Add an event listener for a click
    button.addEventListener('click', function(e){
        // Check the current data-theme value
        let currentTheme = document.documentElement.getAttribute('data-theme');
        if(currentTheme === 'light') {
            transition();
            document.documentElement.setAttribute('data-theme', 'dark');
        } else {
            transition();
            document.documentElement.setAttribute('data-theme','light');
        }
    });

    // Adds the 'transition' class to <html> for CSS fun
    let transition = () =>{
        document.documentElement.classList.add('transition');
        window.setTimeout(()=>{
            document.documentElement.classList.remove('transition');
        }, 1000);
    }
}

This enables our JavaScript files to execute when clicking our button toggler and to navigate without losing our chosen theme in the site. Remember that this only works in one session of navigating through the site, meaning that if another tab is created with the same site the default light theme will be shown, and if you visit the site again in the future it will revert back to the default theme.

Try using cookies to store some information on the browser to retain information on what theme the user prefers. It’s another implementation for another time.