Automated Link Preview Image Card

Taking screenshots with Playwright

A while ago, I saw this tweet thread from Simon Willison about how he added social media preview cards to his TILs. He detailed how he did this through a combination of Puppeteer, Vercel, SQLite, and some other stuff I didn’t understand 😅. @simonw Added social media preview cards to my TILs! https://til.simonwillison.net/til/til/pytest_subprocess-server.md Read more... At that time, I was manually taking these screenshots by hand to be included as part of the commit, which is to say it’s not very efficient....

May 31, 2022

Rebuilding Personal Site from Scratch

Only HTML + CSS with no frameworks

As time goes on in my journey of experimenting with different technologies on building a web interface, I figured it’s time for my personal site to return to the fundamentals. So I decided to build it with only HTML + CSS with one of the goals being that it should work perfectly fine with JavaScript disabled. Before this, it’s built with Vue. You can still find the source here. Design Inspiration Skip this next paragraph if you’re not interested in my old site’s origin story....

January 31, 2022

Upgrading a Vue TypeScript Project (2.x -> 3.x)

Migrating from Parcel to vite

While Vue 3 has been out of beta for quite a while, (as noted on their website) a migration build is still a work in progress so the current advice is to stay with Vue 2 if it’s a non-trivial project. I procrastinated on this article for so long that a migration build has since been released. Feel free to check it out here. That said, as Parcel v1 is no longer maintained (and with v2 supporting only Vue 3), I figured it’s time to upgrade....

December 12, 2021

PostgreSQL on Azure Pipeline with OSX

While the defacto way of running postgres on Azure Pipeline according to this guide seems to be using the docker image, the MacOS image on Azure Pipeline does not have docker support due to some licensing issue. So instead, this has to be setup and handled manually. We’d use brew here since it comes installed in the OS image and is the easiest way to deal with it as far as I’m aware....

July 18, 2021

Ava with Vue (2.x) + TypeScript (and NYC)

Component and Unit Testing with Test Coverage

When working on a project with Vue (TypeScript), I faced a lot of roadblocks trying to get code coverage to work. The issue is largely covered in this issue thread. Most solutions / workarounds for that seems to revolve around changing the bundling flow with webpack. Considering my lack of familiarity with webpack (on top of my use of scss and pug in Vue files), putting together a webpack config that works for me turns out to be extremely challenging....

May 22, 2021

Cross Language Object Parsing

I wrote code that writes code

I was working on a side project where I had the backend and frontend setup to run on different programming languages. As I was working on it, it started to bug me a little that I have to write the same object / struct and enum for each language in use everytime I introduce a new enum or struct. It can also be confusing / dangerous if I updated one side and forget to update the other....

August 9, 2020

Multi-language Support Build Tool

Developing with Please

I recently started learning about Go to find out what’s all the hype about. So I figured what’s a better way than to build a project out of it? As I was setting up my machine and going through tutorials step-by-step, I was slightly annoyed by the fact that the development of Go projects are limited to inside the $GOPATH. Personally, I have all my side projects stored at the top level of the computer....

August 7, 2019

Functional and flexible shell scripting tricks

Shell scripts vs python or perl Its 2019 now, who writes shell scripts anymore? Am I right? Well, apparently I do. ¯\_(ツ)_/¯ There are some good arguments for that here and here which mainly revolve around 2 things: Shell exists in all Unix systems and makes use of system default features. Shell is an “interactive command function” designed to get user inputs during the process of running them. Also, here’s an additional relevant reading about the differences between sh and bash....

May 7, 2019

Test Driven Development with Alexa SDK

Quick guide to building and unit testing an Alexa Skill

What is Test Driven Development? According to Wikipedia, it means “Requirements are turned into very specific test cases, then the software is improved to pass the new tests, only.” Basically, you would first have to write the test of the software/feature you are developing before you start working on the developing the software/feature itself. Here are a few more articles on the benefits and why you should apply TDD: Test Driven Development by Jan Olbrich Isn’t TDD twice the work?...

October 29, 2018

How to host multiple domain names and projects on one server

NGINX is one magical tool

I own multiple domain names, and each one hosts a different side project. For the longest time, everything that required ‘hosting’ was hosted on Heroku. But their free tier can be quite limited, it can also get costly quickly if you are paying for each separate project. So instead, I decided to explore putting all of them together using NGINX (recommended to me by Jane Manchun Wong). Required Resources Virtual Private Server (VPS) You’ll need a virtual server such as DigitalOcean or EC2 by AWS....

August 29, 2018