This page is a deep dive into the software we use for this site. If you’re more interested in the software we use to construct roons itself, click here.
WordPress
This site is built using WordPress. If you don’t know what WordPress is — I didn’t, until my housemate recommended it — it’s a website builder that powers something like 40% of the web.
We were tempted to build the whole site from scratch in Kotlin, but luckily talked ourselves out of it. Building and maintaining an entirely bespoke site like that would have taken too many resources away from actually making roons — you know, sort of the reason we’re doing any of this.
WordPress is easily good enough for our purposes. We might gripe a bit about having to use PHP and JS, or struggling with the plugin system. But the platform is flexible, stable, and has a ton of resources — we don’t really need anything else.
hosting
This site is hosted on FlyWheel. It’s… ok!
theme
The site uses our custom theme, whomington. It’s based on the official whomtech primary colours:
- big galaxy, #1a1b26
- shiny yellow metal, #ffd700
We then use a handful of other neon-like colours as needed, with blue and green being our main fallbacks.
The fonts are PT Mono for things like headers, code etc, and PT Sans for everything else.
hintbox plugin
WordPress has a pretty powerful plugin system. We find it a bit tricky to work with sometimes, and PHP/JS wouldn’t be our choice of languages — but the ecosystem is flexible, and a lot of very smart people have done a lot of excellent work to show us how to build our own plugins.
The first is our hintbox plugin:
simulator
The interactive demos are another custom block. We have two options when we set up the block:
- Scene mode — the simulator loads a specified scene. Most simulator tools are disabled, and the scene itself can specify exactly which tools are enabled. This mode is the one you see in demos.
- Simulator mode — the simulator keeps its full functionality. You can load, edit, and save scenes. Even when a scene is loaded, the simulator will ignore any constraints defined by the scene. This mode is the one on our simulator page, and it’s what we use to design the demos.
We have a huge amount of cleanup to do on the simulator, and at some point we want to do more of a technical dive into how it works.
shortcodes
WordPress also supports shortcodes, which are a concise way of injecting elements into a page. For example, any time a page has the [ nav ] shortcode, WordPress replaces it with our tutorial navigation HTML element.
We also created some “pseudo-shortcodes”, which are little blocks of text surrounded by :. We define some regex to process the content of these blocks and replace them with an HTML element. For example:
: 10110 :becomes 10110: itt 0111 :becomes: c-cyan hello world :becomes hello world
more info
If you’d like us to add more info on any particular area, get in touch at support@whomtech.tech.