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

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

On 13 June 2023, I released [Tab Shelf](https://tabshelf.clarencesiew.com/) to the world. It's a Google Chrome extension that lets you view and manage your tabs from the new-ish side panel.

## Features

Aside from viewing your tabs in the side panel, you can also:

* Put tabs to sleep to save system resources.
* Move tabs between groups.
* Create new tab groups from a selection of tabs.
* Close tabs in bulk.
* Control mute/unmute volume (it doesn't even need to have audio playing - you can mute a tab if you suspect that it will autoplay video or audio ahead of time).
* Filter tabs by group (once you get used to it, it effectively feels like a way to treat tab groups like separate workspaces).

## Inspiration

Of course, vertical tabs aren't new. Not at all. They're already common features on other browsers such as Safari, Microsoft Edge, Vivaldi, and of course, Arc by The Browser Company. Firefox has had a multitude of legendary vertical tab management extensions like Tree-Style Tabs and Sideberry.

I had previously grown accustomed to vertical tabs when trying the Arc browser extensively. When switching back to Firefox, I just had to install Sideberry to continue having these darn vertical tabs.

When I hopped on over back to Chrome (I've switched back due for dev purposes), I realised there _still_ wasn't a vertical tab solution ready. Even after Google added side panels to the browser. I was surprised that there wasn't even an API to make use of it at the time.

## From the ashes

Over the King's Birthday long weekend, I discovered that Google had _finally_ made the Side Panel extensions API available in Chrome v114. I immediately thought back to an extension I was working on called TabQueue, which was meant to help with queueing tabs (akin to the already-existent Reading List). I thought: _"How about I slap on some vertical tab management features to this?"_

Without going too deep into it, much of the TabQueue codebase was written at a time I was just returning to using React extensively for the first time in 1-2 years. I had forgotten how to use the React Context API and state management in TabQueue was a dog's breakfast. I effectively gutted most of the TabQueue code but kept (and heavily modified) much of the existing CSS styling.

Tab Shelf definitely isn't the first vertical tab management extension to make use of the Side Panel API, but I have to say (with some considerable bias) that it's perhaps the prettiest looking one out there at the moment.

## Give it a go!

You can now get [Tab Shelf on the Chrome Web Store](https://chrome.google.com/webstore/detail/tab-shelf/gkiobnohamhihbaipacecjfljepjjlmg). I'd love to get feedback on it as I'm working through new features and planning future releases. It's already pretty featureful at the time of writing this, but there's still so much more in the pipeline.
