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! 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

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

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