mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2025-10-26 14:26:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

content: writing as an architect is hard

Browse Source
This commit is contained in:
Rick van Lieshout
2022-10-31 23:59:37 +01:00
parent e2380f9b91
commit 027add7be1
8 changed files with 126 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.vscode/settings.json vendored
View File

@@ -2,5 +2,11 @@
"cSpell.words": [
"frontmatter",
"slsw"
],
"grammarly.selectors": [
{
"language": "markdown",
"scheme": "file"
}
]
}

130
content/posts/2022/writing-as-a-software-architect-is-hard/index.md
View File

@@ -1,28 +1,130 @@
---
title: My blog hasn't gotten an update in 5 years, here's why.
date: "2022-10-15"
date: "2022-10-30"
template: "post"
category: "blog"
tags:
- "software development"
- "architecture"
- "writing"
description: "Good software design practices and a few perfectionistic tendencies lead to almost 5 years without any writing. This blog is a deep dive into a few of the struggles of the past 5 years"
description: "Good software design practices and a few perfectionistic tendencies lead to almost 5 years without any writing. This post is a deep dive into a few of the struggles of the past 5 years"
---
Wanting to perfect a site ...
lots of theming issues
I've been rebuilding the old "[rickvanlieshout.com](https://rickvanlieshout.com)" for over 5 years now...
But the website isn't that big. It could be done way faster and it has been done way faster.
The thing is, I rewrote it several times, each time with a different design and updated packages.
## Things I've changed
## Changing the theme (round #1)
- Darkmode + switch
- Header on blogs
- prism.js darkmode + themes
- tables
- quotes
- image zoom
Shortly after finishing the original website its design already felt stale.
Sure, it had some nice colors and I really liked the mobile view (it read beautifully on a smartphone), but it still felt off.
Nothing on the website gave me a wow effect, most of it was "ok" and some of it was not to my liking.
I never quite put my finger on the why, but it just didn't feel right.
### The posts query bug
I did put a lot of time into optimizing and designing the bits I found important, the biggest time sinks were multi-language support and print mode.
In the end, I even ended up making a compromise on the multi-language support because I didn't want to blog in Dutch.
One of the things I'm glad I did, however, was working on styling print mode.
It wasn't because I expect many people to print my website or articles, it's because I expect some of them to use "read-focus" extensions or apps like pocket as I do so often myself. I also suspect the occasional pdf download, most of which I probably did myself on my resume page though.
My website has a lot more pages than the official example on Github.
Their postsQuery retrieves everything with a slug
One of the biggest annoyances that I tried solving with a new theme was dark mode.
Hell, I swung completely in the opposite direction and bought the all-dark [Hikma theme](https://themeforest.net/item/hikma-portfolio-html-template/23366729). I rebuilt the entire site in that theme, but never published. The next chapter will explain why.
## Moving to Gatsby
Right around the time I started thinking about uploading the new theme I also found GatsbyJS.
Gatsby was in its infancy back then, barely out of beta and a little rough around the edges.
Considering I like to live on the edge, software-wise anyway, I decided to go for it.
`rickvanlieshout.com-hikma-gatsby` was born and I worked on it for a few short weeks.
In the end, that also burned out because, again, the theme felt stale.
## Upgrading to Gatsby 3 and back to the old theme
I'd had enough! I needed to finish my website and I needed to do it quickly.
I picked up the new Gatsby V3, my old theme, and a renewed mental vigor and started coding away.
The first prototypes came into existence very quickly and looked fine.
Alas, I burnt out on the project almost as quickly as I had started.
One of the reasons was the theme... but there was a more serious reason this time as well.
## Server-side rendering, the old theme, and a stubborn software architect
During the rewrite to Gatsby V3 I encountered various SSR issues.
The most notable of them all was not being able to save and apply the color scheme without annoying flashes on page loads.
I chalked it up to a CSS issue and left it for what it was at first, but I simply couldn't go live like this.
We just discovered my other biggest flaw. Perfectionism.
Because I am responsible for code and product quality at my job and have also heavily emphasized that part of my contributions in any of the open-source projects I've worked on, I felt that I couldn't release something that wasn't perfect.
And as most of you will know, you can chase perfection forever. There is always a flaw, always something to improve.
In my mind, I could fix the quality issues, but I'd still be left with the theme.
I also realized I'd end up at the same point I started... Same design, and the same missing features, just a bunch of time later.
This wasn't working either.
## Finding a new design and a new starting point
One day I found myself procrastinating on a whole bunch of things by looking at fancy CSS themes.
I hadn't really thought about it, but I'd ended up looking at new portfolios and blog designs.
I'd found a few good candidates but didn't really make a choice yet.
Was I embarking on the journey once again? Or would I give up before I started?
Eventually, I decided to organize my thoughts and figure out why things failed before, it roughly came down to:
- I can't go about and make it perfect on the first try
- No translations
- Print mode for all the important pages
- Dark mode can come later
- I didn't like the design, I wanted something black and white which could be reversed for dark mode
- I didn't like the previous efforts of using Gatsby for just the posts and not the static pages
- I needed a starting point, no matter how "good" it was, I needed a place to start writing again.
- I needed a new website fast because the old one was breaking down (PHP updates caused the API to break)
Eventually, I stumbled upon "[lumen](https://github.com/alxshelepenok/gatsby-starter-lumen)". A beautiful blog project with amazing typography and a relatively modern Gatsby setup. It wasn't perfect, it missed a few bells and whistles, but it did tick off a lot of boxes.
I decided to fork the project and try it out, adding bits and bobs of content to see how my writing style would look with the new theme.
I liked it.
## Not all was perfect however
As with all things in life, this project would need some work. I found a few things that were lacking which I wanted to fix before releasing a new website. I was determined not to fall into the same trap as before however and structured the work better than I ever had before.
### Things I changed
Below you'll find a list of some of the biggest things I've changed.
- I added a Dark mode with a little [react-toggle](https://github.com/aaronshaf/react-toggle) to switch between light/dark.
- Blog posts now show a header that includes the "back to articles" button and my name.
- Added code block theming for both light and dark mode
!["A block of code in both the dark and light themes"](/media/prism_styles.png)
- I added support for tables with a bit of styling around them (slight indent and row styling)
![a table](/media/table.png)
- I added the ability to quote others in a beautiful way
![a quote](/media/quote.png)
- Medium like image zooming (click any of the images above)
#### The posts query bug
Here and there I also encountered some bugs. Most of them got fixed in my copy but one of them was big enough that I felt a need to contribute to the project. The "posts query" bug.
Before the fix, there was a bug in the `post-query` file that simply looked through all markdown files to find pages with a slug.
This, however, is troublesome if you have more than the 3 example pages because the default page sizing will fail.
You see, the code that fetches the blogs does so by filtering out real "posts", but the pagination queries do not.
This meant that, given enough pages, the pagination would overflow and tell the user that there were more posts available than there were.
If a user were to click on "next" they would be presented with an empty page.
In the end, it was a tiny bug, but I [submitted a PR](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/1125) to fix it in the upstream repository.
## making it my own
Though the original codebase gave me a great starting point I have decided not to follow the upstream contributions but instead forge my own future.
Doing so allows me to keep my codebase clean and allows me to deviate from the choices made by Alexander.
Alexander is slowly introducing more features than I need.
One of the newer feature commits (a dark mode) even included his own state management library "diesel" for which I see absolutely no fit in the project.
As such, I have decided to simply skip pulling from upstream and maintain the website myself.
## The future is bright
Now that I have this new blog it should be easier for me to write some articles.
Let's hope I will find time to write more than I have in the past 5 years!

BIN
content/posts/2022/writing-as-a-software-architect-is-hard/media/prism_styles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
content/posts/2022/writing-as-a-software-architect-is-hard/media/quote.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
content/posts/2022/writing-as-a-software-architect-is-hard/media/table.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

73
package-lock.json generated
View File

@@ -19,7 +19,6 @@
"gatsby-plugin-catch-links": "^4.24.0",
"gatsby-plugin-feed": "^4.24.0",
"gatsby-plugin-google-gtag": "^4.24.0",
"gatsby-plugin-htaccess": "^1.4.0",
"gatsby-plugin-image": "^2.24.0",
"gatsby-plugin-manifest": "^4.24.0",
"gatsby-plugin-offline": "^5.24.0",
@@ -13547,44 +13546,6 @@
"react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^0.0.0"
}
},
"node_modules/gatsby-plugin-htaccess": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-htaccess/-/gatsby-plugin-htaccess-1.4.0.tgz",
"integrity": "sha512-CaUQ3SPkV8khTk2MvY58KJAGAQFLxrlSb9ysxB+BeOgdruI2F0hWsQQI5/A94VtZsdB/5CbJcZVNmCyDJ+SJqg==",
"dependencies": {
"fs-extra": "^8.1.0",
"lodash": "^4.17.15"
}
},
"node_modules/gatsby-plugin-htaccess/node_modules/fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"dependencies": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
},
"engines": {
"node": ">=6 <7 || >=8"
}
},
"node_modules/gatsby-plugin-htaccess/node_modules/jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
},
"node_modules/gatsby-plugin-htaccess/node_modules/universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
"engines": {
"node": ">= 4.0.0"
}
},
"node_modules/gatsby-plugin-image": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-2.24.0.tgz",
@@ -43715,40 +43676,6 @@
"minimatch": "^3.1.2"
}
},
"gatsby-plugin-htaccess": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-htaccess/-/gatsby-plugin-htaccess-1.4.0.tgz",
"integrity": "sha512-CaUQ3SPkV8khTk2MvY58KJAGAQFLxrlSb9ysxB+BeOgdruI2F0hWsQQI5/A94VtZsdB/5CbJcZVNmCyDJ+SJqg==",
"requires": {
"fs-extra": "^8.1.0",
"lodash": "^4.17.15"
},
"dependencies": {
"fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
}
},
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
"requires": {
"graceful-fs": "^4.1.6"
}
},
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
}
}
},
"gatsby-plugin-image": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-2.24.0.tgz",

2
src/assets/scss/_variables.scss
View File

@@ -29,7 +29,7 @@ $color-gray: color.adjust(hsl(0, 0%, 13%), $lightness: 30%);
$color-gray-border: var(--gray-border);
$color-gray-bg: var(--gray-border);
$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Ubuntu", "Segoe UI", "Roboto", "Oxygen-Sans", "Cantarell", "Helvetica Neue", sans-serif;
$typographic-root-font-size: 100;
$typographic-base-font-size: 16px;

3
src/components/ThemeSwitcher/theme.scss
View File

@@ -1,13 +1,14 @@
.react-toggle {
background-color: transparent;
border: 0;
bottom: -5px;
cursor: pointer;
display: inline-block;
padding: 0;
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
touch-action: pan-x;