This Website

2026 Update

Things sure have changed since 2018, when I first started this project. Back then, we were all still riding the high of ECMAScript 6 and the modernization of Javascript, using tools like Babel to keep pushing Javascript into the future.

Now I got a codebase that bet hard on the bind-operator getting added to the spec and built a lot of support code around its use. Sadly, it looks like a feud with the pipe-operator guys ended up putting both proposals in a mire. At least the pipe-operator might still come along some day.

Which is a bit of a shame, in my opinion. The bind-operator felt like it paired well with Javascript and was like having C#'s extension methods in web development. Maybe someday I'll get to refactor everything to use the pipe-operator (or have an AI do it for me; things really HAVE changed).

Regardless, I am still proud of this thing and I learned a lot from it. Very nostalgic to come back and revive it.

Original Content

This website was built using NextJS and based on the Dimension template by HTML5 UP. NextJS produces a static website, without requirements for any complex server infrastructure, with the help of Webpack.

While the template was a great start in regards to style-sheets and the overall look and feel of the site, it was otherwise quite bare-bones and needed a lot of work to flesh it out completely.

The original SASS style-sheets were modified where needed to get better compatibility with Internet Explorer 11 and Edge. Pretty much all other custom CSS was written in styled-jsx, which NextJS has strong support for.

A few Webpack loaders were also created to assist in managing static assets, such as images or sounds, as well as generate links to other pages. These loaders help to ensure these assets actually exist prior to building the site and export React components and other information that make working with them easy and predictable.

The template also had very few supporting React components and little attention given to utilizing Webpack's code splitting and tree-shaking features; I added support for these capabilities myself in order to ensure as small a payload as possible to the site's visitors.

In pursuit of that goal, I also contributed to or forked a couple of projects. These projects are listed below:

babel-plugin-transform-resolve-wildcard-import

Attempts to aid Webpack's tree-shaking by converting wildcard imports into named imports. Webpack is already pretty good at this, but this plugin can shake out or split a little more in certain edge-cases.

My contributions remove the need for a surrogate object and also provides support for destructuring assignments.

resolve-imports-loader

An adaptation of SectorLabs' babel-plugin-transform-named-imports as a Webpack Loader.

Because the Babel plugin required Webpack's configuration to work properly and some of the transformations it was attempting were incompatible with some of the loaders I was using, it made more sense to turn it into a Webpack loader.

This website has not yet been built using this loader, however. Due to the complexity of the transformations and how difficult it is to perform them without asynchronous support from Babel, I've begun to re-write this into a full-fledged Webpack plugin instead. A later release of this website will likely make use of it, once I have time to finish it.

This site's code is available on GitHub for viewing. Large portions of the code-base have been made available for use under an open-source license, as well.

I consider this a good example of my website authoring capabilities. As my knowledge and understanding of React and NextJS improved, it under went a few major refactors to improve on the design, which I am now rather pleased with.