Today V5 of Dashron.com went live. Here are the details.

Design

As you can see, the new Dashron V5 design was heavily inspired by synthwave visuals. I dug through band posters, pamphlets, and other design examples and came up with this. The theme sometimes sacrifices aesthetics for readability, but overall I think I achieved the vibe I was looking for.

Some additional design notes:

• There are no images in this design. Instead of images I use SVGs, and usually write them by hand.
• 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.
• I got help making the gradients from CSS Gradient.

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 the website.

Backend

Roads still powers the backend, but roads-starter is out of the picture. I wanted to take a different approach, and did so as a part of my side project, Dungeon Dashboard. I hope to release my changes at some point in the future. I felt the organization of roads-starter didn’t fit my needs with maintaining multiple sites.

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 all the way through to the HTML is wonderful.
• Having clear imports for components makes debugging far easier than tracking down template files based on convention, or partial file paths.
• 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 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, that 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 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 sizes.
• Tailwind lets me break out of their restrictions any time I need without losing access to their responsive design patterns. It really lets me move faster.

On top of this I use Daisy, a css component library built specifically to work with Tailwind. Daisy allows me to easily pull in 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. Please reach out if you have any questions or interest in the work I’m doing!

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.