Dashron v6 is live, using the latest roads.js 8.0.0 and a brand new framework pattern.

Roads.js was built to be isomorphic, allowing you to reuse code between the server and the browser. The goal is to write your routes once and use them in both locations, reducing the total amount of code you have to write. The resulting website would end up with the best of both worlds, server-side rendered (SSR) websites for fast initial page load and straightforward SEO, and client rendered pages for quickly navigating beyond that first page. It was a slight variant of the traditional Single Page App (SPA), but preferred the traditional server side MVC pattern in the browser instead of systems like React Router.

But that quick navigation came at a cost. When you load that first page, you download a large chunk of JavaScript. This JavaScript would include everything you need for the site, but also pages you may never see, and actions you may never perform. While waiting for this to download, you had a wonderful SSR page, sent quickly and completely to your browser, but you couldn’t do anything with it. All interactions were blocked by downloading this bundle. Overall this pattern worked and was an improvement over previous patterns, but it wasn’t the best choice for many sites.

Let’s try a new pattern

Lately a new pattern has been growing in popularity, the “Islands” pattern. This pattern starts with traditional server rendered websites and selectively adds small “islands” of interactivity where needed. These islands each have their own tiny bundle of JavaScript, sent only when necessary. This shrinks the necessary JavaScript to load a page to just the essentials, and ensures you can interact with the page quickly, all without requiring additional code. Write it once on the server, and you can assume the client will get the parts it needs.

While SPAs will still be necessary for some types of websites, many will be better served using the islands pattern. Personally I use it for sites like this one, where my Deck Delta tool  for upgrading Magic the Gathering decks is added as a single island on the page. I also use it heavily for Dungeon Dashboard, a site I’m building for managing D&D campaigns. I have plenty more projects in the pipeline and am looking forward to stretching this pattern to its limits.

Build with Islands

Setting up Islands from scratch isn’t trivial, so I built create-roads. Create-roads is a scaffolding tool that sets up a test website with the island architecture with a single command.

npm create roads@latest {folder_name}

If you’re feeling adventurous, give it a shot and poke around the code. If not, I’ll help you out with my next article.

Dashron

After weeks of late-night tinkering with neon gradients and hand-coded SVGs, V5 of Dashron.com is finally live. The synthwave aesthetic I’ve been chasing is complete, and the tech stack got a major overhaul too. Let’s dig into the details.

Design

The new Dashron.com V5 design was heavily inspired by synthwave visuals. I dug through countless band posters, concert pamphlets, movies and video games to get a feel for the core elements of the style. The iconic synthwave sun, neon gradients, lots of purple. It took some time to get the details right, but I’m very happy with the results.

A few technical details that made this work:

• There are no images in this design. Everything is a hand-written SVG.
• The background is a modified version of this codepen. I felt the scroll was too distracting, so I slowed it down.
• The “Dashron” font is called “Razor”, and is found here. The neon glow css is from this article.
• The rest of the fonts are called “Poppins” and found here. I like how the bold header gives old VHS case vibes.
• CSS Gradient was a big help in fine tuning the sun and header gradients.

Backend

Roads still powers the backend, but roads-starter is out of the picture. The organization of roads-starter didn’t work well for maintaining multiple different sites in the same framework. Dungeon Dashboard pioneered the new infrastructure, Dashron V5 adopted it, and I will open source it after building a third site. Hopefully soon!

Authoring

The authoring flow remains the same as described in Dashron.com V4. I write content in WordPress and it’s automatically picked up by my node server.

Templates

V4 used Handlebars for templates, but I have moved V5 over to React. You might feel it’s overkill to use React without front end JavaScript. There are two main reasons for this.

First, I adore JSX.

• This entire project is typescript, so having type hints/safety from the API calls to the HTML is wonderful. If I change an API call I’m immediately notified of everything I need to fix.
• Having clear imports for components makes debugging far easier than organization based on a convention I will surely forget.
• I prefer to put rendering logic into the template rather than the controllers, keeping it in the same file as the html and far away from the data retrieval. This is difficult with handlebars, as it has a limited amount of functionality. With React, I can transform anything into HTML, any way I want.

Second, I actually am using front end React on Dungeon Dashboard, so I kept it here for simplicity sake.

CSS

V4 used Bulma.io for rendering, but I found it far too limiting. For Dungeon Dashboard I moved to using Tailwind & Daisy. Tailwind is a class-based CSS system, which is far closer to CSS than most frameworks. It has been particularly impressive for a handful of reasons:

• In limiting my choices, it improves my consistency. e.g. font-size uses xs through 9xl, which maps to a change rems. I don’t need to come up with rems on a whim.
• It groups CSS in an opinionated way that will improve my design. e.g. font-size increases both font-size and line-height for better readability.
• Tailwind makes long, gross class lists. This is often seen as a negative, but in the world of React it encourages you to rethink your component organization for the better. I am now more encouraged to think about which parts of my site are reusable, and which should be split into their own component.
• Just as I like my rendering logic closer to my templates, having my CSS closer to my HTML has reduced interruptions, as I no longer have to jump between many files at once for minor tweaks.
• Responsive design is a joy in Tailwind. It’s trivial to indicate that certain styles only apply in certain screen sizes.
• Tailwind lets me break out of their restrictions any time I need without losing access to their responsive design patterns.

On top of this I use Daisy, a css component library built specifically to work with Tailwind. Daisy offers well designed UI components without having to depend on huge react component libraries. I just throw in the proper classes and everything looks great.

Overall, I’m very happy with the new setup. The whole stack feels much more maintainable.

If you’re curious about any of the tech choices here or want to see the code when I open source the infrastructure, don’t hesitate to reach out!

Late at night on December 16th I launched the new version of Dashron.com. This new version is a full redesign and a rewrite. The site was in desperate need of an update.

Code Organization

The previous version of dashron.com used roads-starter to help with code organization. roads-starter was a library that offered objects to help organize code and reduce duplication. roads-starter wasn’t cutting it for my larger side projects so I rewrote it to use code generation. I believe the new technique will be more maintainable.

CSS Framework

I am not a designer, and have not spent time improving those skills. For the redesign I wanted to build on the experience of stronger designers, so I selected the bulma css framework. I’ve been happy with bulma and will continue using it for future projects.

Authoring

The old site never had a good authoring flow. Behind the scenes I had one big text box that accepted markdown. This was limiting, not very inviting, and thus a barrier to creating content. The new site has no API or database. It consumes the WordPress API which allows me to author everything using the excellent WordPress editor.

You’ll also notice a new top navigation. In this new navigation is a series of topics I invest my time in. I will be writing about all these topics, and am excited to get back into creating content.