Welcome to my new blog! I haven't imported my [old blog posts](http://csiew.github.io/blog) to this new one. This new blog uses a successor to my static site generator script [md2magic](http://github.com/csiew/md2magic) to help with importing and indexing posts.

The new script is also written in Python. However I am now using JSON files for its configuration and post manifest. This was inspired by my work on [BiscuitWM](http://github.com/csiew/biscuitwm) which also uses a JSON file for configuration.

You can view the script in all its glory/horror on the [repository](http://github.com/csiew/website) of this site (under the name [*statgen.py*](https://github.com/csiew/website/blob/master/statgen.py) in the root directory). I will perhaps create a separate repository for this script once it has reached a point of maturity.

Unlike md2magic, it is not responsible for converting markdown files into HTML. Like I mentioned earlier, it's now more of an indexing tool that allows your site to have a readily-available list of your posts with some metadata.


An experiment in static site generators

A new blog, a new static site generator

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

As of late, I've been attempting some web development projects. I found a common problem with starting several new projects across different frameworks and runtimes is that I've been constantly looking up their docs online or my own notes on setting new projects up.

I decided it was finally time to start doing a little automation with shell scripts.

The first runtime-framework combination I'm working with is Node and Express. The script asks for the project name so that it could create a directory in my usual projects directory. It then goes through the motions of running the standard `npm` or `yarn` project initialisation. It also installs the `nodemon` package so that Node could automatically restart the app whenever I make a change.

It works great for my standard Express backend project setup. However I plan on adding flags so that it could be more convenient to toggle adding additional packages like `nodemon`. Flags could play a larger role in the future when I automate the setup process for React and Vue projects (i.e. adding a router package, or the Material UI or Bootstrap packages).

I'm also figuring out a frontend or interface to conveniently toggle various options in a single *view* rather than fiddling with flags and command line parameters. An `ncurses` text user interface was my initial choice, but I'm currently experimenting with an Electron app that would call the script and plug in the necessary flags.

You can take a look at the initial script on [GitHub](https://github.com/csiew/boilerplate_generators). The script is currently designed for use on Debian-based Linux distributions. Support for macOS (and maybe Windows) will come a little later.


An experiment in boilerplates and templates

Building a boilerplate factory

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


ssg

A new blog, a new static site generator

Adventures in Frontend

Building a boilerplate factory

md2magic