Patrick Chong

Deploy websites and APIs (for free)

2021-10-16T02:31:10Z

Personally have tried most of the platforms here. All platforms have a generous free tier, with different limitations.

Website + API + Database #

Deta - Totally free. Something quite new that I found out, still exploring and built a couple of prototypes with it. Apparently they will have an alternative way to generate revenue.
Fly - generous free plan, able to host three servers with Heroku style buildpacks or using docker, 3GB storage/postgres databases, no slow-startup issue
Railway - generous free plan, able to host 2-3 postgres databases and servers
Google Apps Script (if we consider Google Sheets as a database) (Javascript only)
Glitch (JavaScript only)
Render - very limited free plan, PG database expires after 90 days, not recommended

Website + API #

Vercel - Currently most of my projects are hosted here thanks to Vercel’s generous free plan, this website is on hosted Vercel too!
Netlify

Database + Static File Storage #

Supabase (PostgreSQL)

Database only #

MongoDB Atlas (NoSQL)
Grist (Spreadsheet-like)
Airtable (Spreadsheet-like)

Website only #

Surge

DNS service #

Cloudflare
- Also has free SSL service

Online IDEs #

Free Design Resources

2021-11-06T02:31:10Z

Images #

Illustrations #

Icons #

SVG #

https://www.svgrepo.com/
https://glyphs.fyi/
https://svgbox.net/iconsets/ - svgicon as a service
https://freesvg.org/

Transparent PNG images/Icons #

Background graphics #

Other resources #

https://www.canva.com/ - Create good looking designs easily, I use this a lot!
https://signature.email/generator - Email signature image
https://dimmy.club/ - Device mockups
https://shadows.brumm.af/ - CSS Shadows
https://svgco.de/ - Image to SVG
https://www.codepng.app/ - Code to Image
https://gifcap.dev/ - Screen recording to gif
https://www.screensizes.app/ - Device screensize and resolutions
https://ojoy.zaps.dev/ - Upscale images
https://neural.love/video - Upscale videos and images
https://redact.photo/ - Redact photos
https://cleanup.pictures/ - Remove objects from images
https://express.adobe.com/tools/remove-background - Remove background from images
https://runwayml.com/ - Remove background from video

Other compilations #

https://nodesign.dev/

Custom Asana ICal Sync to Google Calendar

2022-06-11T13:07:17Z

Asana to ICal #

Script below fetches events from Asana and returns formatted ICal Feed. I deployed the function as a lambda on Vercel.

Sync ICal feed with Google Calendar #

The existing Google Calendar ICal sync updates very slow (between 12-24 hours). So I used the script from https://github.com/derekantrican/GAS-ICS-Sync to sync events from Asana (through the Vercel lambda API endpoint) to Google Calendar more frequently.

Run Grocy On Fly.io

2022-06-10T12:03:15Z

I’ve been wanting to try using Grocy to manage some household inventory but couldn’t find a server where I could host PHP for free but is also up to date enough to support SQLite version 3.90 (see Github issue). When researching the latest platforms that I could deploy websites and APIs (for free), I found out about Fly, their generous free plan (no sleep + persistent storage) and their support for Docker containers. Decided to try running Grocy on Fly and it worked beautifully! Here’s the process for anyone who would like to do the same.

Create an account on Fly and install Fly command line tool: https://fly.io/docs/getting-started/installing-flyctl/
Git clone Grocy Docker image (https://github.com/linuxserver/docker-grocy) and open terminal in cloned folder.
Run flyctl launch to generate a fly.toml file with the app_name of your choice.
Update internal_port in fly.toml from 8080 to 80 because the Docker image is running grocy on port 80.

internal_port = 8080

to

internal_port = 80

Create a persistent volume on Fly.

flyctl volumes create <volume_name> --size <volume_size_in_gb> --region <region_code>

# Example:
# flyctl volumes create grocy_data --size 1 --region sin

Add mount configuration to fly.toml

[mount]
source = "<volume_name>"
destination = "<destination_folder_name>"

Example:
[mount]
source = "grocy_data"
destination = "/grocy_dir"

Your final fly.toml file should look something like the following:

app = "<app_name>"

kill_signal = "SIGINT"
kill_timeout = 5
processes = []

[env]

[experimental]
  allowed_public_ports = []
  auto_rollback = true

[[services]]
  http_checks = []
  internal_port = 80
  processes = ["app"]
  protocol = "tcp"
  script_checks = []

  [services.concurrency]
    hard_limit = 25
    soft_limit = 20
    type = "connections"

  [[services.ports]]
    handlers = ["http"]
    port = 80

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443

  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2s"

[mount]
source = "grocy_data"
destination = "/grocy_dir"

Run flyctl deploy to deploy your app.
After the build is completed, run flyctl ssh console to ssh into the application server. You’ll see the grocy files in /app/grocy and that the persistent disk is mounted at <destination_folder_name> (/grocy_dir in my case).
I tried making the persistent disk /app so that all the server files are always in the persistent disk, but Fly didn’t seem to like that so I created a Git repo in /grocy_dir/ and manually back up/restore the Grocy database/uploaded files between /app/grocy/data/ and /grocy_dir/ with shell scripts. The backup files are subsequently uploaded to the cloud via Git. The two scripts I used are shared beow and are meant to be run in the root directory.

# backup.sh
cd /app/grocy/data/ && cp -r `ls -A | egrep -v ".htaccess|.gitignore|viewcache|backups"` /grocy_dir/data

# restore.sh
cp -r /grocy_dir/data/* /app/grocy/data/;
chown -R abc /app/grocy/data/*; # required else Grocy can't read the files somehow

That’s all! Thanks for reading and drop a comment below if you have any questions. 😄

Sustainability Resources

2022-01-30T13:07:17Z

Videos #

WaterBear - Free streaming service for environmental documentaries: https://www.waterbear.com
Our Changing Climate: https://www.youtube.com/channel/UCNXvxXpDJXp-mZu3pFMzYHQ

Food #

Reduce food waste: https://www.savethefood.com

Environmental Impact Data #

IPCC Emissions Factor Database https://www.ipcc-nggip.iges.or.jp/EFDB/main.php
Carbon dioxide emissions embodied in international trade: https://stats.oecd.org/Index.aspx?DataSetCode=IO_GHG_2021
Database of Food Impacts on the Environment for Linking to Diets: https://css.umich.edu/page/datafield
Compilation of life cycle databases: https://ghgprotocol.org/life-cycle-databases

Take Action #

Take climate action at work: https://www.workforclimate.org
Explore jobs from climate tech companies: https://climatebase.org
Innovative pro-climate projects from all over the world: https://solarimpulse.com/solutions-explorer

Stuff I've Cooked

2021-11-14T13:07:17Z

Various food experiments I've done hehe. Not in any particular order.

Tailwind CSS Components

2021-10-24T13:07:17Z

General Components #

Full Page Demos #

Some minimal CSS frameworks as alternatives to Tailwind CSS #

https://github.com/kognise/water.css (3.27kb) - Classless CSS
https://github.com/xz/new.css (4.8kb) - Classless CSS
https://github.com/andybrewer/mvp (8kb) - Classless CSS
https://picturepan2.github.io/spectre/index.html (~10KB gzipped) - More of a component framework

Investment Resources

2021-09-18T02:31:10Z

Ongoing collection of resources I found helpful/that I want to refer back to as I begin my investment journey. Contains mixture of Malaysia, US, crypto etc.

Malaysian Portfolio Updates/Reference #

Stock Data and Charts #

https://www.klsescreener.com/v2/ (Malaysia only)
https://klse.i3investor.com/index.jsp (Malaysia only)
https://finance.yahoo.com/
https://www.tradingview.com/
https://www.koyfin.com/
https://vig.io/ (US only)

Youtube #

Ziet Invests: https://www.youtube.com/c/ZietInvests (very helpful to starting my investment journey)
Mr Money TV: https://www.youtube.com/c/MrMoneyTV
SuyinOng: https://www.youtube.com/user/SuyinOng26
Swan Thinks: https://www.youtube.com/channel/UCDuyH5z50E8junwzNkCLzDw

Stock Market Analysis #

Coding + Trading #

https://aroussi.com/tag/python

Platforms/Tools I Currently Use/Am Exploring #

Malaysia #

US/International #

Crypto #

Coinbase

Hide Discord Sidebar

2021-03-18T15:04:21Z

Hide Discord Sidebar is a Chrome extension for Discord users who find the Discord sidebar too huge and wish to minimize/hide it when they are not using it. This extension minimizes the channels list into a small left sidebar when it is not in use as well as installs a button on the top right corner that hides/shows the Discord server list.

How did it come about? #

Hide Discord Sidebar a little tool I built to solve a small problem I had. I was using Discord to keep in touch with some friend groups and didn’t like the space taken up by the server and channel sidebars. So I decided to give myself the opportunity to learn how to build a Chrome extension so that I can customize the Discord interface. The code itself is relatively simple. Just some CSS to minimize the channels sidebar initially and to expand it on hover, and a button that hides/shows the server sidebar with Javascript.

Final Thoughts #

Fast forward to two years, Hide Discord Sidebar currently has 10000+ users (as of Oct 2023). Although it would require fixing whenever a Discord update breaks it (which happens from time to time), maintaining the extension is relatively painless since I would consider the functionality of the extension to be complete (and so there’s no need to build new features).

Source code: https://github.com/patrickxchong/hide-discord-sidebar (Give the repo a star if you like!)

Enable Firebase debug mode for Android apps

2021-10-02T02:31:10Z

Install Android debug bridge: https://www.xda-developers.com/install-adb-windows-macos-linux/
Enable USB debugging on phone (if not already done in step 1): https://developer.android.com/studio/command-line/adb#Enabling
Connect your device to your laptop and make sure device shows up in ADB with running this command in the terminal: adb devices (if not already done in step 1)
If you don’t know the package name, search for it with the following command:

adb shell "pm list packages -f <search-term>"

Example

adb shell "pm list packages -f telegram"
# output from command
package:/data/app/org.telegram.messenger-bpV9sE5semiBisZel2YxUA==/base.apk=org.telegram.messenger

The package name is at the very end of the output(after base.apk=). In this case, it’s org.telegram.messenger

To enable Firebase debug mode, run this in the terminal:

adb shell setprop debug.firebase.analytics.app <insert package name>

Example

adb shell setprop debug.firebase.analytics.app org.telegram.messenger

setprop itself doesn’t output anything, but you can check if the property is set correctly with:

adb shell getprop debug.firebase.analytics.app

Which should return org.telegram.messenger if setprop ran successfully.

Congrats, you have successfully enabled Firebase Debug Mode on your device! You can now open the app you’re testing and check Firebase Analytics events sent by your device at the DebugView page on Firebase. If you don’t see any events after a few minutes, try restarting the app, that usually triggers the app to start sending debug events.

Note: Firebase Debug mode for iOS requires using XCode on a Mac, for more info see here: https://firebase.google.com/docs/analytics/debugview

KDE Plasma Notes

2021-09-04T12:03:14Z

Ongoing list of tips and fixes with KDE Plasma on Manjaro

Unzip/Unarchive files #

Instead of the usual unzip/tar commands, KDE has the ark tool installed to manage archives. ark is usually accessed via the GUI but can be run in the command line as well. ark works on various formats such as tar, gzip, bzip2, zip, rar when the appropriate libraries are installed.

ark -b -a [archive(s)]

References:

Tiling window manager like experience (like i3) #

Install Kröhnkite (KWin Script, take note to follow the instructions in the Enabling User-Configuration and Tips)
Force windows to start not maximised (so that window borders will show)
Install Move Window and Focus to Desktop (KWin Script to move window and focus to new desktop in one keyboard shortcut)

There are other ways to do this which uses i3 directly (like this Reddit post), but I couldn’t find a way minimise Zoom to show the mini window (see below) on i3 so I decided to use Kröhnkite instead.

Zoom mini window (image source: https://www.law.hawaii.edu/sites/www.law.hawaii.edu/files/Zoom Training Final.pdf)

Open specific Settings screens directly #

Bluetooth: systemsettings5 bluetooth

Remember folder structure per folder on dolphin #

Hamburger button > Configure > Configure Dolphin > General > Behaviour > View > Remember display style for each folder (as at Dolphin 21.08.0)

Adapted from: https://askubuntu.com/questions/1195505/how-to-change-how-files-are-sorted-in-different-folders-in-dolphin

Windows like Icon theme #

PlasmaXLight

xbacklight command not working #

Solution: https://askubuntu.com/a/1060843

Launch .desktop files from command line #

Helpful to debug/test .desktop files

kioclient5 exec <path of .desktop file>

Update application list after creating .desktop file #

Either of these commands would work depending on the use case

sudo update-desktop-database
update-desktop-database ~/.local/share/applications
kbuildsycoca5

Source: https://forum.kde.org/viewtopic.php?f=14&t=167056

Install WPS office and block internet #

Most people find success with the Snap package that already disables internet, but it seems to only suport Gnome DE (Github issue). After trying many methods (including setting up OpenSnitch), I finally found an easy solution that works well: Install the flatpak version of WPS Office and block internet access in the flatpak configuration.

# install flatpak
flatpak install flathub com.wps.Office
# revoke internet access
sudo flatpak override com.wps.Office --unshare=network


#########################################################
# if necessary, enable internet access
sudo flatpak override com.wps.Office --share=network

Setup fcitx5 for Mandarin typing support #

https://jeffreytse.net/computer/2020/11/19/how-to-use-fcitx5-elegantly-on-arch-linux.html

Notes:

.desktop files can be found at /var/lib/flatpak/exports/share/applications
I can’t seem to get the flatpak apps to run in GTK+ UI (based on the steps provided at https://wiki.archlinux.org/title/WPS_Office#Use_GTK+_UI), running env GTK2_RC_FILES=/usr/share/themes/Breath/gtk-2.0/gtkrc flatpak run com.wps.Office -style=gtk+ still opens WPS Office in Qt mode, suggestions on how to fix that are welcome!

Sources:

Data Science Resources

2021-09-24T02:31:10Z

Ongoing collection of resources I found helpful/that I want to refer back to as I begin my data science journey.

Tutorials #

https://machinelearningmastery.com/ - online blog tutorials
https://jovian.ai/
https://paperswithcode.com/ - research papers with code
https://www.freecodecamp.org/learn/machine-learning-with-python/

NLP #

https://huggingface.co/
Malay based models: https://huggingface.co/malay-huggingface/
Malay based datasets: https://github.com/huseinzol05/malay-dataset

Keras Hyperparameter Optimisation #

https://towardsdatascience.com/hyperparameter-optimization-with-keras-b82e6364ca53

Datasets (for machine learning practice) #

https://archive.ics.uci.edu/ml/datasets.php
https://github.com/jbrownlee/Datasets
Consumer Complaint Database (website, zip)

Malaysian Datasets #

https://github.com/tindakmalaysia - GeoJSON and election data
https://github.com/syazwimazli/my-shapefile - GeoJSON data
https://github.com/MoH-Malaysia/covid19-public / https://github.com/CITF-Malaysia/citf-public - COVID data

Others #

Create Trello Cards from Google Form Responses

2021-08-31T02:31:10Z

The Zapier integration between Google Form and Trello only allows one to add color labels and custom text labels separately, but the custom text labels added by Trello were not matched with the right color label. To circumvent that, I created a custom google-apps-script that emails the Google Form response as a card to Trello directly (guide to set up Trello Board email here)

The script below is used by a feedback form which supports 3 types of feedback: Feature Request, Bug Report, or Other. #Other #Yellow would create a yellow colored Other label.

function onSubmitHandler(e) {
	let itemResponses = e.response.getItemResponses()
	let email = itemResponses[0].getResponse()
	let name = itemResponses[1].getResponse()
	let type = itemResponses[2].getResponse()
	let subject,
		body,
		attachments = []

	if (type === 'Other') {
		let title = itemResponses[3].getResponse()
		let feedback = itemResponses[4].getResponse()
		subject = `[Other] ${title} #Other #Yellow`
		body = `
## Message
${feedback}

${name}
${email}
    `
	} else if (type === 'Bug Report') {
		let title = itemResponses[3].getResponse()
		subject = `[Bug] ${title} #Bug_Report #Red`

		body = `
## Description
${itemResponses[4] ? itemResponses[4].getResponse() : ''}

## Device, Operating System, Browser
${itemResponses[5] ? itemResponses[5].getResponse() : ''}

## Additional Context
${itemResponses[7] ? itemResponses[7].getResponse() : ''}

${name}
${email}
    `
		if (itemResponses[6]) {
			itemResponses[6].getResponse().forEach((fileId) => {
				attachments.push(DriveApp.getFileById(fileId).getBlob())
			})
		}
	} else if (type === 'Feature Request') {
		let title = itemResponses[5].getResponse()
		subject = `[Feat] ${title} #Feature_Request #Blue`

		body = `
## Problem
${itemResponses[3] ? itemResponses[3].getResponse() : ''}

## What feature do you think could help solve that problem?
${itemResponses[4].getResponse()}

## How would you use the feature you have described?
${itemResponses[6] ? itemResponses[6].getResponse() : ''}

${name}
${email}
    `
		if (itemResponses[7]) {
			itemResponses[7].getResponse().forEach((fileId) => {
				attachments.push(DriveApp.getFileById(fileId).getBlob())
			})
		}
	}

	MailApp.sendEmail({
		name: 'GForm to Trello',
		to: '<Insert Trello Board Email>',
		subject,
		body,
		attachments,
	})
}

Notes #

Data returned by Google Form’s On Form Submit trigger: https://developers.google.com/apps-script/guides/triggers/events?hl=en#form-submit_1
Seems like the data could be easier to manipulate through the use of the namedValues field when setup with a Form Submit trigger on Google Sheets instead, but I’ve not tried that yet.
DriveApp.getFileById(fileId).getBlob() - used to handle File Upload fields on the Google Form, and the files would be attached to the Trello card created by the email. More details here.
MailApp.sendEmail does the final step of emailing the form to Trello.

Automating Daily Site Rebuilds

2021-08-24T02:31:10Z

Steps #

Create a new project at https://script.google.com/.
Paste one of the scripts below into Code.gs.
a. Simple Daily
b. Complex Daily
c. Complex Generic
Modify as desired with URLs/webhooks from Vercel/Netlify etc.
Test code by running dailyCron function from editor (will be prompted to authenticate on the first time).
Go to Triggers on the left sidebar (has the clock icon).
Select Add Trigger and modify the settings based on the image below:
Hit Save and you’re done!

Simple Daily #

let dailyList = ['<insert url>']

function dailyCron() {
	dailyList.forEach((url) => {
		let options = {
			method: 'get',
		}
		let response = UrlFetchApp.fetch(url, options)
		Logger.log({ url, response }) // log the URL and the response
	})
}

Complex Daily #

let dailyList = [
	{
		url: '<insert url>',
		options: {
			method: 'get',
		},
	},
	{
		url: '<insert url>',
		options: {
			method: 'post',
			contentType: 'application/json',
			payload: JSON.stringify({
				message: 'hello world',
			}),
		},
	},
]

function dailyCron() {
	dailyList.forEach((item) => {
		let response = UrlFetchApp.fetch(item.url, item.options)
		Logger.log({ url: item.url, response })
	})
}

Complex Generic #

let dailyList = [
	{
		url: '<insert url>',
		options: {
			method: 'get',
		},
	},
	{
		url: '<insert url>',
		options: {
			method: 'post',
			contentType: 'application/json',
			payload: JSON.stringify({
				message: 'hello world',
			}),
		},
	},
]

let monthlyList = [
	/* similar structure to dailyList */
]

function dailyCron() {
	cronHelper(dailyList)
}

function monthlyCron() {
	cronHelper(monthlyList)
}

function cronHelper(list) {
	list.forEach((item) => {
		let response = UrlFetchApp.fetch(item.url, item.options)
		Logger.log({ url: item.url, response })
	})
}

Notes #

Inspired by Trigger a Netlify Build Every Day with IFTTT. Created the code in google-apps-script so that it’s more flexible/extensible.
If the desire is to save the results, then creating the script in connection to Google Sheets would work better.
Function is named dailyCron/monthlyCron after the Linux cron utility
An webtool that works for simple use cases is: https://cron-job.org/en/

Limitations of google-apps-script #

Script runtime: 6 min/execution (all accounts)
URL Fetch calls: 20,000/day (normal Google accounts), 100,000/day (Google Workspace accounts)
Source: https://developers.google.com/apps-script/guides/services/quotas

Why I rebuilt my blog with Eleventy

2021-08-15T02:31:10Z

My first intro to Javascript frontend frameworks is through Vue.js in 2017. I really like Vue’s Single File Components and how similar the Vue syntax is to HTML. Naturally, I transitioned to the batteries loaded Nuxt.js that already sets up Vue Router, Vuex, SSR etc under the hood. In fact I built the first iteration of this blog with Nuxt’s static mode and the very helpful Nuxt Content module.

As much as the status quo works, I’ve never been very happy with the long Javascript build process, the large Javascript bundles that are created (and have to be downloaded), and the Vue.js hydration process that needs to happen on the client-side. Given these limitations, I started looking for better alternatives. After all, the main reason why I like Vue is because I could create reusable components. For the most part, I was looking for templating, not reactivity.

There are already common templating languages such as Pug, Handlebars and Mustache, but they’re often used with servers like Express, and there aren’t a ton of places to host a server for free with no downtime/cold starts. I’m sure there’s a way to prerender a site using Express with one of the template languages above and some Markdown files, it doesn’t seem to be a very common solution.

Hence I began my SSG exploration! I tried Hugo and Eleventy. Hugo because it is touted as the most performant solution. Eleventy because it has gathered a lot of traction despite being quite new, and is currently powering web.dev, A11y Project and eslint.org, organisations that care a lot about best practices (which I assume to mean that Eleventy does conform to their definition of best practices).

My limited experience with Hugo was quite confusing. I tried and retried a couple of starter templates but felt stuck trying to understand Hugo’s config.toml and templating syntax, as well as working out a development process with asset compilation in the theme folder and Hugo’s own site generation process. Overall my takeaway was that It’s hard to customise a Hugo site, especially with limited Go experience. Since I do want to be able to customise freely, and didn’t want to spend too much time trying to figure out Go, I decided to not pursue Hugo for now (though I’m pretty sure I’ll revisit it someday).

Which leads me to Eleventy, which was much easier to understand since it’s all Javascript. I did run into some teething troubles, mostly with trying to recreate Vue Single File components in Eleventy (There’s eleventy-plugin-vue, but I wasn’t too keen on trying that as it’s pretty experimental). I ended up using the Nunjucks template language because it’s similar to Python’s Jinja2 that I have experience with. Nunjuck’s Macros and Eleventy’s shortcodes + paired shortcodes provided a functional way to create components, although I definitely wish for a nicer syntax to create universal components/paired shortcodes in Eleventy instead of declaring them in Javascript strings. I was stuck with slow rebuilds in development with the starter template that I used, but that gave me an opportunity to peek under the hood of how Eleventy works, and it’s really suprising how easy it was to create an Eleventy plugin with the fix that I came up with (blog post coming soon on that).

And there we have it, why I ended up rebuilding this blog with Eleventy. Appreciate the very supportive Eleventy community on Discord who have helped me with my questions. Eleventy isn’t perfect, but it’s pretty good at its job right now and it’s still improving. I look forward to how much more awesome it will be when V1 is launched! 😍

Edit 1:
I use Alpine.js as a replacement for Vue.js on this blog. I’ve not mixed Alpine components with Nunjucks macros yet, but I do foresee possible issues with code duplication when declaring Alpine components with the Alpine Data syntax. Will have to explore further on this.

P.S. It was pretty exciting to get a 100 Lighthouse score on mobile, not surprising since Eleventy itself doesn’t inject any scripts, and Eleventy Img handles image processing so well. Thankfully Alpine.js and the Tailwind CSS (with PurgeCSS) have minimal impact on the site’s load time.

Just Hang In There

2021-08-07T02:31:10Z

Just hang in there
You will get there
It’s fine to shed a little tear
When things are just too much to bear

Just hang in there
You will get there
It’s fine to share your fears and struggles
With the people that you care

Lyrics for this song came to me in one of my lower moments. I just finished an exam, and was walking home in the dark in the middle of the winter to join a Zoom meeting. It’s been a tiring and busy season, but as I trudged home, the words ‘Just hang in there’ were stuck in my head.

As I experimented with rhyming, the verses started to form: "It’s fine to shed a little tear when things are just too much to bear", "It’s fine to share your fears and struggles with the people that you care", an apt reflection of my feelings at that moment. A melody started to form as I continued to walk and by the time I arrive home I couldn’t wait to find the right chords to the song in my mind.

The vibe of the song is quite influenced by Jayesslee’s more jazzy songs like Officially Missing You with a more bossa nova vibe. Here are two versions of the song produced so far:

Version produced by Patrick #

Version produced with Fools For Thought #

PS. I’ve been trying to write verses to the chorus but have yet to find anything that really resonates. Do drop a comment below if you have any ideas!

Battery Notifications in Linux

2021-07-10T02:31:10Z

Bash Script #

Put this anywhere and make the script file executable with with chmod +x.

#!/bin/bash

# watch --interval=5

CAPACITY=$(cat /sys/class/power_supply/BAT0/capacity)
STATUS=$(cat /sys/class/power_supply/BAT0/status)

if [[ (${CAPACITY} > 80) && (${STATUS} == "Charging")]]
then
  /usr/bin/notify-send -u critical "Battery" "Disconnect Charger. Battery is above 80%"
elif [[ (${CAPACITY} < 20) && (${STATUS} == "Discharging")]]
then
  /usr/bin/notify-send -u critical "Connect Charger. Battery" "Battery is below 20%"
fi

Crontab script #

Schedule to run script every 2 minutes

# for notify-send to work
DISPLAY=:0.0
XAUTHORITY=/home/$LOGNAME/.Xauthority
DBUS_SESSION_BUS_ADDRESS=unix:path=/run/user/1000/bus

*/2 * * * * <location of script>

Guide: https://crontab.guru/#*/2_*_*_*_*

Why keep laptop battery between 80-20 percent #

Have to admit that I had a hard time finding reputable sources, but I guess it could be true if many sources are saying the same thing?

Example Sources:

Bonus: Windows PowerShell Battery Notification script #

Not experienced with PowerShell at all, but managed to hack this to work on my Windows installation. Use at your own risk!

# Requires -Version 3.0

$lowBattery = 21
$chargedBattery = 80
$delayIntervalMinutes = 2

Add-Type -AssemblyName System.Windows.Forms
Add-Type -AssemblyName PresentationFramework

# Doesn't seem like there's a powershell way to do this,
Add-Type -ReferencedAssemblies @("System.Windows.Forms"; "System.Drawing") -TypeDefinition @"
    using System;
    using System.Drawing;
    using System.Windows.Forms;
    public static class TextNotifyIcon
    {
        // it's difficult to call DestroyIcon() with powershell only...
        [System.Runtime.InteropServices.DllImport("user32")]
        private static extern bool DestroyIcon(IntPtr hIcon);

        public static void UpdateIcon(NotifyIcon notifyIcon, string text)
        {
            using (var b = new Bitmap(16, 16))
            using (var g = Graphics.FromImage(b))
            using (var font = new Font(FontFamily.GenericMonospace, 8))
            {
                g.DrawString(text, font, Brushes.White, 0, 0);

                var icon = b.GetHicon();
                try
                {
                    notifyIcon.Icon = Icon.FromHandle(icon);
                } finally
                {
                    DestroyIcon(icon);
                }
            }
        }
    }
"@

$notifyIcon= New-Object System.Windows.Forms.NotifyIcon
$notifyIcon.Visible = $true

$notifyIcon.BalloonTipIcon = [System.Windows.Forms.ToolTipIcon]::Warning
function showBalloon($title,$text) {
  $notifyIcon.BalloonTipTitle = $title
  $notifyIcon.BalloonTipText = $text
  $notifyIcon.ShowBalloonTip(20000)
}

function showMessageBox($title,$text) {
  $ButtonType = [System.Windows.MessageBoxButton]::OK
  $MessageIcon = [System.Windows.MessageBoxImage]::Error
  $Result = [System.Windows.MessageBox]::Show($text,$title,$ButtonType,$MessageIcon)
}

function checkBattery() {
    $batteryLevel = Get-CimInstance -ClassName Win32_Battery | Measure-Object -Property EstimatedChargeRemaining -Average | Select-Object -ExpandProperty Average
    $charging = (Get-CimInstance -ClassName Win32_Battery | Select-Object -ExpandProperty BatteryStatus) -ne 1
    if ($charging -and $batteryLevel -ge ($chargedBattery + 5)) {
        showMessageBox "Battery at 85%" "Please unplug charger"
    }

    #done charging
    if ($charging -and $batteryLevel -ge $chargedBattery) {
        showBalloon "Battery at 80%" "Please unplug charger"
    }
    #low battery warning
    elseif (!$charging -and $batteryLevel -le $lowBattery) {
        showBalloon "Battery at 20%" "Please plug in charger"
    }
    else {
        # $notifyIcon.Text = "Battery $batteryLevel%"
    }
    # $batteryLevel = [DateTime]::Now.Second.ToString()
    [TextNotifyIcon]::UpdateIcon($notifyIcon, $batteryLevel)
}

function exitApp() {
    # $balmsg.dispose()
    $delayTimer.dispose()
    $contextMenu.dispose()
    $notifyIcon.dispose()
    # $appContext.dispose()
    Stop-Process $PID
    [system.gc]::Collect()
    # Exit
}

$contextMenu = New-Object System.Windows.Forms.ContextMenu
$notifyIcon.ContextMenu = $contextMenu

#Add Trigger MenuItem
$menuTrigger = New-Object System.Windows.Forms.MenuItem -ArgumentList "Trigger"
$menuTrigger.add_Click({
    checkBattery
})
$contextMenu.MenuItems.AddRange($menuTrigger)

#Add Exit MenuItem
$menuExit = New-Object System.Windows.Forms.MenuItem -ArgumentList "Exit"
$menuExit.add_Click({
    exitApp
})
$contextMenu.MenuItems.AddRange($menuExit)

#timer
$delayTimer = New-Object System.Windows.Forms.Timer
$delayTimer.Interval = $delayIntervalMinutes * 60 * 1000
$delayTimer.add_Tick({checkBattery})
$delayTimer.start()

checkBattery

# Create an application context for it to all run within.
# This helps with responsiveness, especially when clicking Exit.
$appContext = New-Object System.Windows.Forms.ApplicationContext
[void][System.Windows.Forms.Application]::Run($appContext)

Prayer

2020-10-18T16:13:28Z

Prayer exposes sin. Just like any rightful worship of god should magnify His glory and our need for his grace. It requires commitment and repentance. (Paul E. Miller, A Praying Life)
Pray about what your mind is wandering to. Maybe it is something that is important to you. Maybe the Spirit is nudging you to think about something else. (Paul E. Miller, A Praying Life)
When you know that you (like Jesus) can’t do life on your own, then prayer makes perfect sense. (Paul E. Miller, A Praying Life)
If you are not praying, then you are quietly confident that time, money and talent are all your need in life. You’ll always be a little too tired, a little too busy. But if, like Jesus, you realize you can’t do life on your own, then no matter how busy, no matter how tired you are, you will find time to pray. (Paul E. Miller, A Praying Life)
If we think we can do life on our own, we will not take prayer seriously.
Our failure to pray will always feel like something else - a lack of discipline or too many obligations. (Paul E. Miller, A Praying Life)
To become more like Jesus is to feel increasingly unable to do life, increasingly wary of your heart. (Paul E. Miller, A Praying Life)
The prayer of a Christian is not an attempt to force God’s hand, but a humble acknowledgment of helplessness and dependence. When we are on our knees, we know that it is not we who control the world; it is not in our power, therefore, to supply our needs by our own independent efforts; every good thing that we desire for ourselves and for others must be sought from God, and will come, if it comes at all, as a gift from his hands. If this is true even of our daily bread (and the Lord’s Prayer teaches us that it is), much more is it true of spiritual benefits. This is all luminously clear to us when we are actually praying, whatever we may be betrayed into saying in argument afterward. In effect, therefore, what we do every time we pray is to confess our own impotence and God’s sovereignty. The very fact that a Christian prays is thus proof positive that he believes in the lordship of his God. (J. I. Packer, Evangelism and the Sovereignty of God)

Remove file extensions from path when querying with @nuxt/content

2020-09-09T08:13:52Z

Problem #

I was migrating this blog from hmsk/frontmatter-markdown-loader to @nuxt/content to make use of @nuxt/content’s powerful Markdown query features and faced a weird bug when I was setting things up. I adapted the code from https://content.nuxtjs.org/fetching but got:

But when I visited the url at http://localhost:3000/_content/pages/home.md, I see the Markdown file

What happened? #

After trying everything from disabling buildModules/modules/loaders to referring to the example at https://github.com/nuxt-company/demo-blog-nuxt-content to setting up a new Nuxt project with the content module enabled with yarn create nuxt-app. I finally realized what I did wrong.

@nuxt/content’s API is $content(path, options?), and the properties of path listed on their documentation is:

Type: String
Default: /

Which I took to be the full path of the file (in this case pages/home.md). So I ended up doing

// pages/index.vue
async asyncData({ $content, error }) {
  try {
    const page = await $content("pages/home.md").fetch();
    return {
      page,
    };
  } catch (err) {
    console.error(err);
    error({ statusCode: 404, message: 'Post not found' });
  }
  return {};
},

Which led to the weird situation where the markdown file wasn’t fetched in asyncData, but somehow worked when I visited the request URL directly (this is likely a bug/not expected behaviour since the documentation also specifies that the API endpoint should be queried without the file extensions.

Solution #

The fix was simple. All I had to do was to remove the file extension from the page and everything worked beautifully!

// pages/index.vue
const page = await $content('pages/home').fetch()

Final Thoughts #

Despite wasting more than half a day trying to figure out this lame if-only-I-understood-the-docs better/if-only-the-docs-had-better-examples bug, I was quite happy with how easily I can query, filter, sort through the markdown files with the @nuxt/content API. It’s way better compared to the queries I wrote last time to power this blog. @nuxt/content plays very well with Netlify CMS as well, quite excited to add in features (like search) with the capabilities of @nuxt/content!

Convert Vue To Android with Ionic Capacitor And CircleCI

2020-06-20T02:31:10Z

Note: I would recommend anyone using Vue.js and wants to turn their webapp into a mobile app to checkout Quasar. They do it very well out of the box!

What is Ionic Capacitor? #

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, and the web. - From Capacitor Docs

Capacitor is created by the Ionic framework (which is why I refer to it as Ionic Capacitor) In this case, I will use Capacitor compile a Vue.js app into a native Android debug apk that can be installed into Android phones.

What is CircleCI? #

CircleCI automates your software builds, tests, and deployments. - From CircleCI Docs

CircleCI integrates really well with Github and allows users to build executables, run tests and release software.

Demo Source #

For the purposes of this demonstration, I made a fork from an existing Hackernews clone built by Vue at https://github.com/vuejs/vue-hackernews-2.0 and made some modifications to it so that it uses vue-cli-service instead of SSR.

I then built the project with yarn build (which calls vue-cli-service build) which compiles the project as an spa into the /dist folder.

Adding Capacitor #

To add Capacitor to the Vue.js project, run yarn add @capacitor/core @capacitor/cli

Then npx cap init to initalize the Capacitor project.

The command will create a capacitor.config.json in the root of the project. Here is the defaults in capacitor.config.json after running npx cap init.

// capacitor.config.json
{
  "appId": "com.hackernews.vue",
  "appName": "vue-hackernews-2.0",
  "bundledWebRuntime": false,
  "npmClient": "yarn",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

IMPORTANT!!! The webDir in our case using Vue is /dist so we’ll have to change it from www to dist.

To enable android in our project, run npx cap add android.

This creates an /android folder and adds @capacitor/android as a dependency in package.json.

For now I don’t see a good reason to keep the android folder in version control since the contents will change whenever the project is updated so I added android into .gitignore.

I then run npx cap sync to update android dependencies, and copy web assets into the Android project.

And just like that, the webapp is Android ready!

One can run npx cap open android to open the project in Android Studio if Android Studio is installed.

Adding CircleCI #

Since I don’t have Android Studio installed on my laptop (and I wasn’t interested to do so since Android Studio is pretty large), I decided to try using CircleCI to build the project. There are 3 main parts to the script I made:

build_yarn: install dependencies and run npx cap add android and npx cap sync
build_android: build debug apk with gradlew
publish-github-release: publish debug apk as a release on Github

Note 1: I created a config file at /config/Android/AndroidManifest.xml which will be copied into the /android folder during the build time on CircleCI so that I can reduce the number of permissions that the app requests. (Have to remember to change the package name in AndroidManifest.xml else the app will not open)

Note 2: I set up the use of ghr in publish-github-release based on the tutorial here: https://circleci.com/blog/publishing-to-github-releases-via-circleci/

The completed script is as follows

# .circleci/config.yml
version: 2
workflows:
  version: 2
  build-test-and-deploy:
    jobs:
      - build_yarn
      - build_android:
          requires:
            - build_yarn
      - publish-github-release:
          requires:
            - build_android

jobs:
  build_yarn:
    docker:
      - image: circleci/node:10-browsers
    steps:
      - checkout
      - restore_cache:
          name: Restore Node Modules Cache
          keys:
            - yarn-modules-{{ checksum "yarn.lock" }}
      - run: ls node_modules || yarn install --frozen-lockfile
      - save_cache:
          name: Save Node Modules Cache
          key: yarn-modules-{{ checksum "yarn.lock" }}
          paths:
            - node_modules
      - run: yarn build
      - run: npx cap add android
      - run: npx cap sync
      - persist_to_workspace:
          root: android
          paths:
            - ./*
  build_android:
    docker:
      - image: circleci/android:api-29-node
    environment:
      JVM_OPTS: -Xmx3200m
    steps:
      - checkout
      - attach_workspace:
          # Must be absolute path or relative path from working_directory
          at: android
      - restore_cache:
          name: Restore Node Modules Cache
          keys:
            - yarn-modules-{{ checksum "yarn.lock" }}
      - restore_cache:
          key: jars-{{ checksum "android/build.gradle" }}-{{ checksum  "android/build.gradle" }}
      - run:
          name: Chmod permissions #if permission for Gradlew Dependencies fail, use this.
          command: sudo chmod +x ./android/gradlew
      - run:
          name: Download Dependencies
          command: cd android && ./gradlew androidDependencies --debug
      - save_cache:
          paths:
            - ~/.gradle
          key: jars-{{ checksum "android/build.gradle" }}-{{ checksum  "android/build.gradle" }}
      - run:
          name: Copy configuration files
          command: cp config/Android/AndroidManifest.xml android/app/src/main/AndroidManifest.xml
      - run: # https://developer.android.com/studio/build/building-cmdline This creates an APK named module_name-debug.apk in project_name/module_name/build/outputs/apk/
          name: Build debug APK and release APK
          command: |
            cd android
            ./gradlew :app:assembleDebug
            ./gradlew :app:assembleRelease
            ./gradlew :app:assembleDebugAndroidTest
      - run:
          name: Run Tests
          command: cd android && ./gradlew lint test
      - store_artifacts: # for display in Artifacts: https://circleci.com/docs/2.0/artifacts/
          path: android/app/build/reports
          destination: reports
      - store_artifacts: # for display in Artifacts: https://circleci.com/docs/2.0/artifacts/
          path: android/app/build/outputs/apk
      # - store_artifacts: # for display in Artifacts: https://circleci.com/docs/2.0/artifacts/
      #     path: android/app/src/main/assets/public
      - store_test_results: # for display in Test Summary: https://circleci.com/docs/2.0/collect-test-data/
          path: android/app/build/test-results
      - persist_to_workspace:
          root: android/app/build/outputs
          paths:
            - ./apk/*

  publish-github-release:
    docker:
      - image: cibuilds/github:0.10
    steps:
      - attach_workspace:
          at: ./android
      - run:
          name: 'Publish Release on GitHub'
          command: |
            mv android/apk/debug/app-debug.apk android/apk
            mv android/apk/release/app-release-unsigned.apk android/apk
            ghr -t ${GITHUB_TOKEN} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} -delete ${CIRCLE_BUILD_NUM} ./android/apk/

The debug apk which can be installed into any Android phone can be found here: https://github.com/patrickxchong/vue-hackernews-2.0/releases/tag/8

All in all I’m pretty pleased with how it turned out! It has quite a native look and feel to it. It was a good opportunity for me to work with CircleCI and learn the differences between caches, workspaces and artifacts on the platform as well.

References:

Domain Name and Personal Branding

2020-05-20T01:07:05Z

After getting a good part of this site together, I thought that it would be cool to get a personal domain name for the site. A quick search on popular domain name providers brought me to Namecheap where I found out that a .com domain only costs USD8.88 for a year! 😮 That’s about the price of a cheap meal in the US, or in the case of Malaysia, USD 8.88 = ~RM36 which is about the price of 4 decent meals. The price is incredible. Also, since generally registering a new domain name is cheaper than renewing it (on Namecheap it’s $8.88 to register and $12.98 to renew). I decided to buy the domain name for 10 years to save more money upfront.

While looking at domain hosting options, I did a price comparison with GoDaddy which is another popular option and found out that Namecheap is MUCH CHEAPER. Below is the cost comparison between the two:

GoDaddy		Namecheap
RM639.50	Cost of domain for 10 years	USD88.80 (~RM360)
RM399.90	WHOIS Guard (to protect your personal information attached to the domain name) for 10 years	Free
RM1101.76	Total with taxes and fees	USD90.60 (~RM393.52)

Going with Namecheap saves me up to ~RM700 (~USD 160), which in my opinion is quite a decent amount of money. With the domain registrar settled, I then went on a long quest of what domain name I should use. I did want to stick with a .com domain because it’s the cheapest but given how long the .com domain has existed, A LOT of names have been taken. These are some of the ones that I’ve considered but were taken:

patrickchong.com (of course)
pa3ck.com (Pa - three - ck, get it? heh)
pa3k.com (same logic as above)
patrickc.com
cpatrick.com

After checking off all the names that were taken, this was the shortlist that I ended up with, and the reasons why I disqualified the respective possible domain names:

chongpatrick.com (seems a lil weird)
patrickcjh.com (not a fan of the shortform)
pa3kchong.com (all the ones with the numbers start looking more like a spam site and less professional/smart when it’s meshed up with other words)
p3kweb.com
pa3fy.com
patriqchong.com (works, but a little lame)
patrick-chong.com (not a fan of the dash in there)
patrickxchong.com (the domain I bought!)

All in all I decided to go with patrickxchong.com because

One of my first emails was patrickxchong[at]gmail[dot]com, and I still use it to this day.
It doesn’t look too bad with the ‘x’ in there and it still carries a professional look if I have it on my namecard/resume.
After checking with Namechk, it seems like patrickxchong is not quite a common username on a lot of platforms yet. So I took it as an opportunity for me to build a consistent personal brand under the patrickxchong name.

So with those thoughts, I bought my personal domain name of patrickxchong.com on Namecheap!

Only time will tell whether this investment in personal branding with pay off, or if it’s necessary at all. Aside from Twitter, I’ve found that I could change my username on most major platforms to patrickxchong. A list of all the platforms that I have an account with can be found at the Contact page.

Scrabble Text

2020-05-12T02:31:10Z

I was quite into the scrabble theme after making the favicon for this site and hence decided to build on it by creating scrabble theme headings! I believe it can be better/made more dynamic by making the padding sizes more responsive to the font size. I’ll try to do that before incorporating it as a vue component on this site. Check the Codepen below for what I have right now:

See the Pen Scrabble Text by Patrick Chong Jin Hua (@patrickxchong) on CodePen.

Crash Nitro Kart Rescore

2020-04-26T06:12:39Z

Crash and Burn
And do it all over again

Inspiration #

I’ve always had fond memories of the Crash Bandicoot racing games because they remind me of the days in middle school when I used to play the game with my friends on the Playstation. Here’s a snippet of gameplay footage when four people are playing at the same time:

If you noticed, the backing track is pretty quiet and simple during the race. There’s just a little percussion to keep the pace of the race going, and the main sounds that the player hears are the exhaust of the cars and sound effects of the power-ups. So I thought, why not try to create a more interesting backing track for the race? For the piece to sound more like the real deal, I decided to take certain motifs from the main theme of Crash Nitro Kart and build on them to create a brand new race track. Here’s the Crash Nitro Kart Theme:

Composition Process #

In terms of the vibe of the game, Crash Nitro Kart is a wacky and fun racing game. I tried my best to stay true to the feel of the theme music, which has a lot of syncopation with a certain funkiness that comes from the C minor pentatonic scale centered note choice.
I also attempted to imitate the instrumentation of the theme music by using similar sounding marimbas and brass instruments because I felt that they were iconic to the theme, and developed the other instruments around those sounds.

Software #

I used Ableton to do my composition and arrangement. However, I found the drum sounds in Ableton really subpar so I used Garage Band’s Drummer feature on my iPad to create some drum loops that fit what I needed for the track, exported them to Google Drive, and then imported them into Ableton on my laptop. I played all the other instruments (Marimba, Bass, Strings, Brass) using my laptop keyboard.

I added the gameplay video in because I feel that it gives listeners a good sense of what’s going on. I also found some royalty-free sport car sounds from Zapsplat.com and added them to the track because the “feel” was incomplete without it. What’s a racing game track without the sound of car engines right?

After I was done with the race track, I decided to try a hand at creating some pre-race sounds and a post-race victory track to make a more holistic video game rescore experience. Here’s the completed piece, enjoy!

Final Thoughts #

I found the rescoring process quite difficult when using existing motifs because it was hard initially to break away from the preexisting melodic lines that I’m used to hearing, but it worked out with some experimentation. Overall I was quite satisfied with what I created, and it was a very refreshing experience sitting in the driver’s seat (pun intended) to dictate how the music should affect the game experience.

PatrickxChong Site Favicon

2020-04-26T04:07:05Z

I’m still in the midst of figuring out the mood/vibe of this site, but a site definitely needs an original favicon. so I decided to experiment with a favicon generator at https://favicon.io/favicon-generator/. The end result is a favicon that looks like a Scrabble tile, which I felt was kinda apt. Scrabble tiles are a bit like a lego pieces. You can build words with them, rearrange them to make another word, there’s endless possibilities! (well one can argue that the number of words are finite, but I’m optimistic that mankind will continue inventing words). Below are the settings that I used to generate the favicon (can also be accessed here).

Favicon Generator with color settings #

First Personal Site!

2020-04-24T02:07:05Z

Yay I finally have a personal site! 😄

Been on my mind for a good number of years now. I did some digging and found a template at https://github.com/Gomah/bluise that uses NuxtJS, Tailwind CSS and Netlify CMS. I’m familiar with Nuxt/Vue.JS and have been wanting to get my hands dirty with Tailwind CSS and Netlify CMS, so this is a pretty cool opportunity. Looking forward to playing around with the site more!

Patrick Chong

Deploy websites and APIs (for free)

Website + API + Database #

Website + API #

Database + Static File Storage #

Database only #

Website only #

DNS service #

Online IDEs #

Free Design Resources

Images #

Illustrations #

Icons #

SVG #

Transparent PNG images/Icons #

Background graphics #

Other resources #

Other compilations #

Custom Asana ICal Sync to Google Calendar

Asana to ICal #

Sync ICal feed with Google Calendar #

Run Grocy On Fly.io

Sustainability Resources

Videos #

Food #

Environmental Impact Data #

Take Action #

Stuff I've Cooked

Tailwind CSS Components

General Components #

Full Page Demos #

Some minimal CSS frameworks as alternatives to Tailwind CSS #

Investment Resources

Malaysian Portfolio Updates/Reference #

Stock Data and Charts #

Youtube #

Stock Market Analysis #

Coding + Trading #

Platforms/Tools I Currently Use/Am Exploring #

Malaysia #

US/International #

Crypto #

Hide Discord Sidebar

What is Hide Discord Sidebar? #

How did it come about? #

Final Thoughts #

Install Hide Discord Sidebar #

Enable Firebase debug mode for Android apps

KDE Plasma Notes

Unzip/Unarchive files #

Tiling window manager like experience (like i3) #

Open specific Settings screens directly #

Remember folder structure per folder on dolphin #

Windows like Icon theme #

xbacklight command not working #

Launch .desktop files from command line #

Update application list after creating .desktop file #

Install WPS office and block internet #

Setup fcitx5 for Mandarin typing support #

Data Science Resources

Tutorials #

NLP #

Keras Hyperparameter Optimisation #

Datasets (for machine learning practice) #

Malaysian Datasets #

Others #

Create Trello Cards from Google Form Responses

Notes #

Automating Daily Site Rebuilds

Steps #

Simple Daily #

Complex Daily #

Complex Generic #

Notes #

Limitations of google-apps-script #

Why I rebuilt my blog with Eleventy

Just Hang In There

Version produced by Patrick #

Version produced with Fools For Thought #

Battery Notifications in Linux