A while back I launched boxdox-marvel, it was an experiment into new technology. Instead of using things I usually use to make sites, I tried out two static site generators, Hugo and Hexo. Static site generators are neat in the sense that all the processing happens offline, leaving you with static html that can easily be distributed, archived, etc.
However, in the process of making boxdox-marvel.v1, I quickly learned that static site generators were not the right tool for the job. boxdox-style sites are just data viewers are heart, so I thought the static nature of the data was a good fit for a static site generator, but in reality, I underestimated the speed and complexity of creating the kinds of views I wanted to make.
How did boxdox.v1 work
A script written in python scanned data files from the game, dumping all data into structured JSON. These python data files were used by the static site generator to generate an html page showing a table containing the data. This worked fine, although the page generation times worked against me in terms of rapid iteration.
As I began to add features like making the table dynamically filterable and sortable, I realized that for almost everything I needed to do, I needed the data in JSON structure anyways. The DataTables jQuery extension I was using could work from HTML, but a lot of the features were going to be harder to implement unless I passed the JSON to it raw.
Learning a new framework
All of the previous boxdox’s were either Angular 1 or Angular 2 apps. I wanted to hop the fence and learn React. React is an web framework that was created by engineers at Facebook. One of my favorite things about being a programmer is knowing what the right tool for the job is, and its hard to do that without constantly building new products with new tools.
React is a little confusing coming from Angular. Angular is more of a full framework, while React focuses on just the view layer of a traditional MVC framework.
Learning a new CSS framework?
Almost every website I have made in the past few years has been built on Bootstrap 3 in some way, and lately I have been trying out Bootstrap 4 in preparation for the future. However, sometimes Bootstrap gets in my way, so I decided to try out a new CSS framework called PureCSS.
Well it turns out I use more of the default Bootstrap styling than I thought!
The reason I chose PureCSS was because I didn’t want to have to override a ton of styles on a site that only has so many different kinds of content to style anyways. However, I found myself missing some of that built in styling in practice, as it helps immediately give the site a more consistent look and feel.
In addition to this, via the dantarion-bootstrap repo I published on github, I normally am able to share styling between all the boxdox sites, so that the colors and UI are shared between them all.
With PureCSS, I am left with a site that is functional but needs more work in terms of look and feel.
Its not PureCSS’s fault, I am just lazy!
Anyways, here it is!