This post was supposed to be a short foreword to _another_ post about software architecture to briefly chronicle my adventures in the world of frontend web development, from the beginning to the present. But alas, I got a little too excited and ended up writing up something a far too long for a foreword and a little too meandering for a proper post.

I started bumbling my way into the world of frontend development during a nail-biting final year project through [React](https://reactjs.org/). I consequently had PTSD from trying to learn React (pre-hooks!) with [Material UI](https://mui.com/) (now _MUI_) at the same time. Prior to this I was mostly toying with [Python UI toolkits](https://pygobject.readthedocs.io/en/latest/) and [playing around with window managers on Linux](https://github.com/csiew/BiscuitWM).

As I graduated from uni just as the pandemic kicked-off, I tried to roll-my-own barebones duct-taped client side JavaScript mixed with [template-based responses](https://ejs.co/) via an Express server. This was used for my first crack at a podcast web app. It performed _poorly_ and I genuinely appear to have lost the code/repository of this attempt. Some aspects of the client side JavaScript work made its way on to my personal website.

I then got sucked into the [Vue.js](https://vuejs.org/) ecosystem and coming surprisingly close to completing a second crack at this podcast web app. I started getting responses to job applications close to the ~1 year anniversary (late 2020 to early 2021) of the first COVID case on Australian shores, so this project was abandoned. I also re-implemented my personal website using Vue.js.

I jumped back into the world of React for my first full-stack client (work) project in early 2021. It was initially built using class-based components, but once I understood how [React Hooks](https://reactjs.org/docs/hooks-intro.html) worked, I hastily refactored the entire frontend to use functional components. We were supposedly following the Agile methodology, but being fresh out of uni it still didn't click that working on a card/issue _absolutely should not_ involve refactoring half the project _all the time_. Apologies and thanks to Chris for having the patience to review my absolutely _horrifyingly large_ pull requests!

My mesmerising UI work and my colleagues' brilliant backend + database design ended up being such a hit that this project ended up getting extended and its scope expanded. After I left this team, they rewrote everything in TypeScript (it was originally all in JavaScript; I would only be introduced to TypeScript in my next work project) whilst retaining my CSS styling.

Shifting to more backend-heavy work did not satisfy my frontend itch after the success of my previous work project, so I turned to making my personal website something of a playground. I replaced my Vue.js based personal site with a new React site and imbued it with the many learnings from mistakes made in my last work project. I eventually rolled out a UI library called [Brioche](https://github.com/csiew/brioche), but abandoned it around the time I discovered [Svelte](https://svelte.dev/) and [SvelteKit](https://kit.svelte.dev/). I then rewrote my site _again_ with SvelteKit.

I started getting interested in server-side rendering (SSR) as I learned more and more about using SvelteKit. However, a series of [breaking changes in preparation for SvelteKit's 1.0 release](https://www.netlify.com/blog/migrating-breaking-changes-in-sveltekit/) and sheer laziness made me return to re-implementing my site with React. A failed attempt to make my site SSR using a [Vite](https://vitejs.dev/) plugin led me to finally give [Next.js](https://nextjs.org/) a shot. The current version of my site (at the time of publishing) was written using Next.js.

What comes next in my frontend adventures is still somewhat in the air. I've been looking into [module federation](https://medium.com/@vueshenzhen/a-brief-introduction-of-vite-plugin-federation-9e998b2e43b) recently (this was going to be a part of the original post I was going to write) for my own rather-large personal project. I've pulled off another _Brioche_, in that I extracted the components from my personal website and turned them into a new component library. However this time I don't plan on turning this into a Brioche v0.2.

Til next time.

**_EDIT (06/01/2023):_** I've since extended my personal site to include a CMS to update and/or publish new posts. This update was written in it!

**_EDIT (17/03/2023):_** I decided to start scaling back the CMS features for my site. It won't go to waste as I'm migrating the CMS to another side project. I'll be reverting to statically-generated content for now.


A not-so-technical chronical of the frontend shenanigans I've been up to

Adventures in Frontend

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](/projects/cardo), my previous attempt at building a UI component library.


UI library for React projects

Brioche

### 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.](https://csiew.github.io/archive/index.html)

#### 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.](https://csiew.github.io/index.html)

### 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.](https://v2.clarencesiew.com)

### 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](https://github.com/csiew/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](https://github.com/csiew/brioche) UI library. [Click here to visit this version of the site.](https://v4.clarencesiew.com)

### 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](/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.


This very website

Website

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).


react

Adventures in Frontend

Brioche

Website

Tab Shelf