Today V5 of Dashron.com is live, with a brand new design. 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 videos 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 right, but I’m very happy with the results.

Some additional design notes:

• There are no images in this design. Everything is a hand-writtten 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.

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.

Backend

Roads still powers the backend, but roads-starter is out of the picture. The organization of roads-starter doesn’t fit my needs with maintaining multiple sites. Dungeon Dashboard pioneered the new infrastructure, Dashron V5 adopted it, and I will open source it after building a third site. Hopefully soon!

Templates

V4 used Handlebars for templates, but I have moved V5 over to React. You might wonder why I use React when I have no 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.

Don’t hesitate to reach out if you have any questions or interest in the work I’m doing!