Mountains and Valleys – Codebase sprint journeys
Part I: The Refactoring Sprint begins
I am now midway through a refactoring project. At this moment the refactor is breaking. I will fix it but this is a good moment to step back and consider where I am at and what I am doing.
This project started when I wanted to post an article to my WordPress blog. The article already exists on my Eleventy blog.
The article includes two definitions within a blockquote. CSS definitions have a headline label and the definition text.
The Eleventy blog has its own design system and style sheet. I have no CSS styles to put headline labels or definitions into a blockquote in my WordPress theme. This is a small, unusual variation.
While writing CSS to add styles I found that my font's source has changed. The static Google fonts I use have become variable fonts.
This triggered a larger project refactoring my typography. The font change required research and testing. The required deep-dive into typography research is a story unto itself.
For the moment I am in the implementation stage. I am digging into concerns way beyond adding a headline label into a blockquote.
Part II: Looking back – How the journey began
I initially designed and built my website in 2004, in the early days of CSS. Recently I looked at The Wayback Machine and found a partial reconstruction of what it used to look like.
When I started with web design I liked that I could simply type code. I proudly learned to code using SimpleText.
Some of the design DNA from the original website remains. Periodically I have redeveloped the website. HTML5 and CSS3 came and responsive design took hold. I refactored.
I switched from using SimpleText to writing code using the SublimeText app. I added SASS to my design process. I refactored.
I learned to break my website into templates using Gulp and Handlebars. I refactored.
I added a WordPress blog to the website. My WordPress theme is based on my website design. I refactored the code base for WordPress using SASS.
Nowadays I use VSCode, but I also still use TextEdit to code. Often I find it is easier to open a file from a folder and work.
NPM modules and the Gulp build often need updates for both systems.
Part III: Looking where my feet are – Consolidating disparate design systems
I have two separate front-end design systems. My website is static HTML generated by Handlebars templates. I use a Gulp configuration. The WordPress theme has its own style sheet. The style sheets are separate but similar. The WordPress CSS imitates the style and design of the static website.
But the refactoring of each stylesheet has become out of sync. I am now comparing the SASS files between the Handlebars and WordPress systems. I seek to unify the code as much as possible.
Long ago I converted fonts and colors to SASS values. With the advent of CSS custom properties I switched. I converted the SASS values on the website to custom properties.
Changing fonts has triggered a larger refactoring sprint. Part of this WordPress refactor also includes exchanging SASS values for custom properties. I am comparing the two build systems, working to homogenize the code bases. Later I will also update the fonts in the website codebase.
This may seem crazy. But it is a great example of how small tasks often lead to finding problems that need correction. Taking care of details and delving into accumulated technical debt ultimately strengthens the design.
Part IV: Looking ahead from the summit
Looking ahead, there will be further redesign sprints for both design systems. The WordPress theme is now dated. The theme is built using PHP. The layout and architecture is brittle and no longer serves my needs.
WordPress has changed from strict PHP to a block-design system. Recently I built a custom WordPress theme for a client. Part of that project entailed adding CSS properties and values into a JSON format.
To modernize my WordPress I will need to convert my CSS into JSON format. How will that affect my intention to unify the two design systems? I do not know. Maybe I will abandon WordPress for Eleventy or another system.
It is important to keep codebases simple. Today there is a vast wave of change sweeping design and development. I am growing with it.
I look back proudly at my history of periodic refactoring sprints. I see where my feet are at today and where I will be refactoring again in the future. This is what it means to have a living design system.
Part of presenting a living Internet brand includes progressive enhancement. I seek to find clients who appreciate sustained website maintenance.