Clarence Siew

Tab Shelf

Clarence Siew

An extension for Google Chrome to let you view and manage your tabs from the side panel. It provides easy access to various controls to sleep tabs, regroup/ungroup tabs, and close them. It was designed to look as close as possible as to what a native implementation of vertical tabs in Chrome would look like (with some creative liberties for the sake of usability).

BiscuitWM

Clarence Siew

A minimalist X11 window manager for Linux/Unix systems written in Python. It's largely an experimental project. It's based on TinyWM and xpywm.

Brioche

Clarence Siew

Brioche is a React UI component library based off the reusable components and stylesheets that were developed via my personal website over the years. It is currently under heavy development and may not have all commonly-used UI components.

It is the successor to Cardo, my previous attempt at building a UI component library.

Cardo

Clarence Siew

A client-side web frontend library (more so a collection of functions to enable single-page web apps). The previous version of my site and my 'Hoddle' Javascript window manager contain the foundational work for this library. The initial version of my upcoming podcast app used this library extensively.

It does not add additional syntactic sugar to the existing HTML syntax of a site (unlike Vue.js or Svelte). It is largely made up of utility functions written in vanilla JavaScript with some JQuery thrown-in (for stuff like changing out contents of an element, performing data calls, etc). My own custom utility CSS stylesheets also work hand-in-hand with this library to provide pre-designed UI elements.

Cardo's CSS utility library survived beyond Cast's transition to Vue.js. The latest iteration of it powers this site. This CSS utility library along with the custom React components in use on this site are in the process of being converted into a reusable library.

Cast

Clarence Siew

A podcast web app that allows you to manage your podcast subscriptions and bookmarks with an intuitive, well-organised interface.

It used the Node.js runtime with the Express framework for its backend API service.

The initial version of Cast used my own custom frontend library, Cardo. However I later switched to the Vue.js framework.

This project came very close to a public release just before I got my first full-time job. I am considering the possibility of rebuilding this (with drastically better architectural decisions).

Hoddle

Clarence Siew

An experimental client-side JavaScript frontend library to turn a web page into a desktop-like environment. It allows for moveable and resizeable windows.

It was supposed to become a framework, but it was abandoned in favour of Cardo, and later Brioche.

Podzol

Clarence Siew

A podcast app that lives in your terminal. It stores indexes of your podcast subscriptions and episode data in JSON files. It's written in Python and uses the pygame library for audio streaming functionality. Limitations with pygame and cross-platform compatibiltiy (Linux and macOS) led me to start working on a web-based podcast client (which was initially codenamed Podzol).

md2magic

Clarence Siew

A static site generator written in Python. Ideal for blogs. Work on a rewrite had been on-and-off until 2020.

Antorca Linux

Clarence Siew

A Debian-based Linux distribution designed for a simple out of the box experience. Ideal for Windows users transitioning to Linux. It used the Xfce desktop environment.

A variant based on Ubuntu with Flatpak integration was in the works shortly before its abandonment. I also considered reviving Antorca Linux with my custom window manager, BiscuitWM, at one point.

TransitSafe

Clarence Siew

An app and service that lets commuters report incidents (crime, hygiene, medical emergencies, etc) on public transport. It used the Public Transport Victoria APIs to get data on public transport services and station metadata.

Website

Clarence Siew

Pre-framework era

Pre-historic (????-2018)

I only recently recalled that I hosted very early versions of my website on Google Firebase before migrating to GitHub Pages. I also used to build websites using Google Sites (they were effectively wikis), but they have since been lost to time.

Version 1.0 (2018-2022)

Initial implementation using plain HTML, CSS, and JavaScript. Early revisions were not single-page apps, and often swung wildly between brutalist web design and skeumorphic design. The final revision of version 1.0 used JavaScript to inject templated components like the navigation bar and site footer (which is the opposite of what most modern JavaScript SPA frameworks do). This project used my now-abandoned frontend library, Cardo, to perform these injections. Click here to visit this version of the site.

Version 1.1 (2020-24/09/2020)

Stripped back to just a single landing page. It had nothing more than links to my social media accounts and side projects. Click here to visit this version of the site.

Vue era

Version 2.x (24/09/2020-19/06/2021)

A complete overhaul of the website as a playground to learn Vue. Like version 1.0, this iteration of the site went through drastical design changes throughout its lifetime. The CSS stylesheets I developed for this site largely came from my abandoned podcast app project. Click here to visit this version of the site.

React era

Version 3.x (19/06/2021-28/07/2021)

Another overhaul of the website, but using React this time. I wanted to practice using functional components rather than class components, and to take advantage of React Hooks. The CSS from the previous site was getting huge and unwieldy too, so it's high-time to simplify it.

This was the most short-lived major version of the site. Its custom components and CSS stylesheets formed the basis of the Brioche UI library for React. The following version of this site was the first to use the library rather than internal custom components.

Version 4.x (28/07/2021-2/10/2021)

It was identical in appearance, layout, and content to version 3.0, however it was the first version to use the Brioche UI library. Click here to visit this version of the site.

Svelte era

Version 5.x (2/10/2021-13/09/2022)

The website was migrated to yet another frontend framework, Svelte. The original plan was to use this version as a chance to learn Tailwind CSS as well, but I just couldn't help playing around with some custom CSS to achieve some mid-2010s skeuomorphic aesthetic.

This version also had a couple of neobrutalist phases too, but as of version 5.10.0, skeuomorphism is back. Unlike the previous version of the website, version 5.0 did not use the Brioche UI library.

NextJS era

Version 6.x (13/09/2022-Present)

I went from one statically-generated/server-side generation framework to another. As I was working on new side projects that relied heavily on React, I thought it would be nice to once again use my website as a React playground. I still wanted to use static generation for blog posts, so at first I looked at using a plugin for Vite, but I wasn't able to figure out the configuration.

I gradually began moving out a lot of content stored as Markdown and JSON files (which required making a new Git commit and re-running a deploy of the site every time I want to modify some content) into Firebase. I also built a whole admin CMS app into the site for my own use to write and publish new blog posts, and manage listed projects and their information. In fact this description update for Version 6.x of this site's era was written using this very CMS!

Well, eventually the CMS was removed. It didn't quite make sense to have static content pages that dynamically fetched data from a database while also statically generating some pages. I eventually added a Now page to describe what I've been up to more recently. It's also meant for short notes that don't quite have the same finesse as what a blog post would have.

illume OS

Clarence Siew

A lightweight Debian-based Linux distribution designed for old hardware (e.g. 32-bit x86 PCs). It used IceWM as its window manager in version 1.x, before transitioning to the LXDE desktop environment from version 2.x onwards.