If you visited my site before, you might think not much has changed, but trust me, everything is fresh and new.
Some background
This site exists since March 2013 (first post), when I decided I need a place apart from my business site brainsellers.de.
Alex Walker published an article on sitepoint.com about what he called the cicada principle. As I totally loved the idea behind the principle, but had no use of those random looking, quite noisy backgrounds Alex mainly created with his principle, I adapted it for an image gallery and wrote an article about it (in german Simulierter Zufall mit CSS). That article gained some attention, as Alex mentioned it in an edit of his article and a quite popular Australian podcast I forgot the name of, discussed it. So I thought I might need an English site.
Actually this was a thought I went pregnant with for a while and this short moment of fame was the final kick in the butt I needed. So this site started with an english version of said article Simulated random with CSS and the cicada principle.
Since then the design didn't change that much. You can still find a screenshot of that early version in the article Custom 404 file not found page. At the last (kind of) relaunch, with my switch to 11ty, I didn‘t change the design at all, as the task was to replicate my Textpattern site. This is nearly exactly one year ago.
Why now
In the end of last year, I thought to few is happening on this site. So I established a new habit to publish a recap every month, where I comment on some of the links I bookmarked or boosted on Mastodon. This kind of worked, but resulted in this boring look of my articles page.
I could have just changed my article title scheme. But that would have been to easy. Furthermore I really like what Max Böck, Jeremy Keith and Jim Nielsen do with their note pages. So I‘ll gonna give that a try. And my notes page is already filled from the start, as I „moved“ all the links from my recap articles there. I‘ll try to keep the habit to go over my collected links once a month, but this setup makes it more easy to just publish a link (or a book recommendation …) just when it comes my way.
I could imagine their might be notes that will evolve into an article later on, but I don‘t have to wait with publishing until I have said article finished.
With that their might be not much happening on the articles page again. But my hope is, that with a hopefully constant stream of posts on my notes page, I will be more often at my page with my mind which could™ result in more articles than before.
What I did
Those changes for the Notes section on the back-end side where astonishingly easy, thanks to the incredible versatile 11ty. So I decided why not also go over the styling. The notes section has to be styled anyway, so why not more. I evaluated that thought and decided to not just add styles to my 11 years old style-sheet that got reworked several times, but to start from a clean slate.
Just a few days before it was CSS naked day and by going naked myself I once again noticed how clean and well formed my HTML markup is, so it would be a great opportunity to facilitate what CSS has grown into over the last couple of years. Especially as my day job is much more on the design side, I eagerly jumped into some good old hands on front-end polishing.
Burgerless responsiveness
Even my old design didn't need a burger menu. Normally with only three menu items I don't use a burger on mobile screens, but I someday tried some new approach to implementing such a menu and tried it out on my site where it stuck. You may ask "why is he talking of three menu items, when before notes there where only two?", but I had a page for my portfolio which I of course kept alive, but don't present it such prominent anymore. Im currently not on job hunt, but the main reason is, it's quite outdated already.
So anyways I left the burger menu aside and show my menu entries on every screen size now.
Micro formats 4tw
The one thing I had to change my markup for was the addition of a h-card in the footer. I'm not entirely sure if that works correctly, as my phone number and mail address are ASCII escaped (is this even a correct term?) for spam prevention (this seems to work quite fine for years now), but I wanted to give it a try. I always liked the idea of micro formats and tested them several times over the years.
Welcome Aleo
My old headings were just the same font in bold and a lighter grey. This was not the best from an a11y point of view, but also looked a bit boring. I tried several fonts for this blog over time and even a serif font for body text in the articles. With Rubiks I stick for a while now, as in my eyes it's interesting, stays out of the way and delivers great legibility. So I searched for a fitting slab serif font and think I found a good companion in Aleo. Having a serif embedded anyways, gives me the possibility to also use it for block quotes and maybe even more in the future.
Colors
Before I used just the orange from my fox logo as highlight color, now I changed links to a blue. It's not a must, but still the most common and kind of standard color for links. But most and for all it brings a bit more life to my site.
Animations
Also my old site used animations. There where obvious ones like on my portfolio page, where they still are. But in my eyes animations shine the most where they are more subtle and just enhance interaction. Those where also present on the old site, but in a inconsistent way, as the site often was a playground to test things out and then they stayed that way. Now I tried to make them more planned and consistent.
Search?
I started playing with pagefind and it seems to work quite well. I might implement it properly on all pages, but I'm not sure about this. A pure JS search has it's advantages, but it also has some accessibility issues. If I'll use it site wide, I will style it properly. Being unsure if I want to use it in the future, I currently use the style it brings by itself. For now it's just where it's needed the most. When you get lost, search might be a lifesaver. So I already put it on my 404 page and for my testing, there is a dedicated search page that I just didn't link outside of this article, yet.
What else?
No more pixel graphics. I recreated all icons and similar and they are all SVG now. Probably the only pixel image left (aside the portfolio and article content) is my portrait. With the imminent death of twitter and the fragmentation of social media that brings, I will probably have to create SVGs for Bluesky and Threads soon, as I might add them to my share buttons.
I have set up webmentions, but have not created a workflow to publish them, when they arrive. With that, there is still no way to have comments on the articles. So if you want to add, criticize or correct something, the best way is to at me on Mastodon.
I'm still a bit uncertain about my notes page. I think the most important thing are the (outgoing) links, not the link to the notes article itself. That's what I showed visually and semantically. But that brings the wrong order in heading levels. I will see, how I will handle that in the future. For now it stays that way.
Finally the only thing left is to welcome you on my "new" site!