About This Site

Post 2!

I thought the next best thing to discuss was the v1 design for this site.

I first explored web design back in the early 2000s when PHP was king of the back end, and Lissa Explains was the hot shit (Honestly? Rediscovering this site in my 30s, and finding that it sort of still works is amazing).

But after putting things down for nearly 20 years, I came back to discover that everything is now just JavaScript! That weird hacker code you had to use to make popups. JavaScript. Front end, back end, side ends! JavaScript everywhere. All the way down.

Deep down though, I missed the old ways of just writing plain HTML / CSS. For this reason, I immediately bounced off React and its JSX syntax, as well as other large frameworks like Vue and Angular.

Thankfully, I happened across Svelte, and the (at the time) fledgling SvelteKit. It was getting popular, and seemed to be everything I wanted in this world of modern frameworks; semantic HTML with batteries, easy routing, and even easier code separation. A framework that just gets out of the way, and lets me build.

I’ve never looked back. While I’ve only ever built hobby projects, all of them are made with SvelteKit.

Which made it a no-brainer choice for this site. These days, Svelte’s CLI makes it so easy - you can install mdsvex from the start and immediately have all the tools you need for a markdown-powered blog. It was crucial that the site supported markdown for posting. I do all of my writing in Obsidian, an app that I’m a long time user of. Being able to drop finished articles into a folder and have the site update dynamically is fantastic.

So that covers the back and front end logic. CSS was a different ride.

I initially went with Tailwind, my standard approach lately. I typically use it with some kind of component framework: Flowbite and DaisyUI are my go-to’s. However, I quickly realised this wasn’t the right call here. Usually, these tools get me close enough to what I need, with just enough control to meaningfully customise without defeating the point but, after much experimentation, I still found myself looking at a web of messy utility classes, and a site that looked…default.

So what did I do?

I installed Pico CSS, an almost classless, ultra opinionated CSS framework. The definition of default.

Yeup. Hear me out.

This isn’t my first rodeo with Pico. A few years ago I used it to build a relational notes app for my D&D game (before discovering Obsidian), along with a number of other tiny apps. I chose it for similar reasons to SvelteKit; Pico is great when you just want to build something. It immediately gets out of the way, and let’s you write clean, clear HTML. When you just need to lay down some foundations, nothing beats it.

And as I muddled around with Tailwind, I realised that this was exactly what I needed. I wasn’t missing customisation, I was missing a clear path forward. As I start blogging, I just want to write and have it look pretty. No bullshit. Could component frameworks have achieved this? Probably, but not without at least some effort on my part. Pico makes it zero effort. I quickly generated a custom theme, and it’s done. It’s by far my favourite pretty-by-default CSS framework.

So that’s where I’m at, and I’m really happy with things so far. Sure, Lissa would probably criticise my lack of cursor trails, but right now I just want to focus on the writing.

Perhaps that will change in the future. But for now, I’m happy with what I’ve built.