# Designed by engineers (uh oh!)


If you've ever worked in software development, or maybe even as a non-technical manager in a big business, you've probably seen this.

It's those software or web products which for all intents and purposes are functional, but in terms of how they look and 'feel' to use, are as basic as can be, or could do with some TLC.

I'm one of those engineers. It's not that I don't care for design, but that I'm genuinely just not great at it. I've tried to improve over the years and I'd like to say I've gotten better, but the truth is that I'm still fairly bad at making things look good.

With that in mind, in this post, I'm going to share some resources that hopefully might help me (and you) to become better at making our functional masterpieces look better. I'll aim to keep this post update in future, but I can't make any promises.

 - **Typography**: [https://www.youtube.com/watch?v=9-oefwZ6Z74](https://www.youtube.com/watch?v=9-oefwZ6Z74)
 - **Colours**: [https://www.youtube.com/watch?v=vvPklRN0Tco](https://www.youtube.com/watch?v=vvPklRN0Tco)
 - **CRAP: Contrast, Repetition, Alignment, Proximity**: [https://www.youtube.com/watch?v=uwNClNmekGU](https://www.youtube.com/watch?v=uwNClNmekGU)
 - **19 psychological design principles**: [https://www.youtube.com/watch?v=fYs2Mdyasuc](https://www.youtube.com/watch?v=fYs2Mdyasuc)
 - **The 8pt grid system (sizes are multiples of 4 or 8)**: [https://www.youtube.com/watch?v=ohF93_k3IMk](https://www.youtube.com/watch?v=ohF93_k3IMk)
 - **Mobbin (real world design inspiration)**: [https://mobbin.com/](https://mobbin.com/)
 - **Screen design (app design library + UI inspiration)**: [https://screensdesign.com/](https://screensdesign.com/)
 - **Flowbite (premade Tailwind components)**: [https://flowbite.com/#components](https://flowbite.com/#components)
 - **Material Design 3**: [https://m3.material.io/](https://m3.material.io/)
 - **More typography**: [https://threadreaderapp.com/thread/1576997489529344001.html?s=12&t=DEBSW0_4NSQHe9j7iInI4w](https://threadreaderapp.com/thread/1576997489529344001.html?s=12&t=DEBSW0_4NSQHe9j7iInI4w)
 - **More colours**: [https://threadreaderapp.com/thread/1579536039139758080.html](https://threadreaderapp.com/thread/1579536039139758080.html)
 - **Expo - Mathematical-driven animations**: [https://expo.dev/blog/the-beauty-of-mathematics-in-crafting-stunning-animations](https://expo.dev/blog/the-beauty-of-mathematics-in-crafting-stunning-animations)
 - **Font choice**: [https://fonts.google.com/knowledge](https://fonts.google.com/knowledge)

## Key tips

Below, I'll summarise some of the things which have stuck with me. Don't ask me why these tips are recommended or why they stuck with me, they're just things that designers have said, and after trying them out, they seem to work.

 - **Use sizes which are divisible by 4.** For example, 4, 8, 12, 16, 20 px for padding (but see next point for 'rem' units).
 - **Use 'rem' units.** If you work in React Native like me, you won't have access to this. So, with that in mind, all you need to know is that 1 rem = 16 pixels. Since we're using 'divisible by 4' as our basis, that means 4px = 0.25 rem. You could have `const rem = (size: number) => size / 4 ` and called with `rem(4)` if you want a px -> rem conversion function.
 - **Don't design beautiful interfaces.** Those things you see on Dribbble and similar sites? Not practical. They look fantastic, but they're not practical. Build practical UI's that look good, not beautiful UI's which aren't functional.
 - **Flex-shrink and flex-grow are not mutually exclusive.** Flex-shrink will ensure that a container doesn't grow beyond its boundaries (e.g. if it has lots of sibling elements). Flex-grow will ensure it fills the available space instead of leaving empty gaps.
 - **Focus on large groups, then small subgroups, the individual subgroup subgroups.** For example, if we use YouTube as an example, the large groups would be the header, the menu on the left, and the video section. Within the video section, you have subgroups - e.g. recommended videos, reels, maybe the 'games' suggestions. Within each of these subgroups, you have a thumbnail, title, author, age, etc. These are grouped visually.
 - **Font weights and colours are great for visual hierarchy.** For example, a title and subtitle might be the same size, but the title would be bold, white, while the subtitle would be normal-weight, gray.
 - **Spacing is better than borders.** A border might add visual separation, but it also adds clutter. When scanning a UI for the first time, spacing will be easier for the brain to notice compared to a visual separator.
 - **Avoid duplication.** This isn't anything to do with the 'repetition' link I shared above. Rather, it refers to removing wording which is redundant. For example, if you have an icon for 'Mail' that opens a panel to write a message, you probably don't need to add a 'write your message' label.
 - **Icon-only UI's are awful.** This is a personal opinion from me, and I specifically refer to Snapchat with this point - the UI of it is horrible to use because it feels like you have to learn what each button does because of a lack of labelling or common icon choice. None of the icons are 'obvious' in what they do except for the 'record' button. Don't overuse wording when it's not needed, but also don't represent functionality which is unique using icons which are unfamiliar.
 - **Use common iconography.** What this means is that if you're using an icon, find what is the most common icon (or icons) for that functionality. For example, the 'Share' icon is often represented by either the square with an upwards pointing arrow, or the 3-dots-connected-by-lines (an older icon, not super-clear on what it means, but used often enough for so long that it's commonly understood). Don't use some weird icon which makes no sense for the context.
 - **(Shading) without borders.** You can use borders around items, but they should be very subtle in the 'default state'. If you're using them to highlight a selected option, that's good. If you can't use spacing to group things for some bizarre reason, use background colour shades. Borders for grouping are a fallback option.

Designed by engineers (uh oh!)

# The technicalities of blogging


So, this blog's been up and running for a short while, and only had 2 posts. It's a very basic NextJS project, but I've already been keen to optimise the 'behind the scenes' element of it.

For example, when I first created the blog, I had a node script which would detect when a file was created, and use that when building to generate the 'created at' time. The problem with this is what when you deploy the file, the attributes change. One deployment will have a different 'created at' time to the other, and you've no way of working around that directly.

This indirectly created another problem - the URL would change. Since I generated the URL 'hash' from known data, this would change between deployments, which means I was essentially creating dead-links with every deployment.

So, in my next iteration, I decided to use a metadata file. It was just JSON to begin with, and this worked well. The data would always remain the same, next would read it when building, and all was good in the world. Eventually, I decided to make this a typescript file which would calculate the hash at build-time, based upon the static metadata.

Again, this worked well, but in my ever-expanding quest to do more, I decided I might want to write blog posts from an N8N form so that I didn't have to clone the repo, add a file, run some scripts, etc.

So, I decided that the next logical step would be to start using a database. I'm absolutely not going to deploy a database, but using a local in-repo SQLite database? Yeah, that can work. It's not storing much, and it's not shipped to browsers. As I've mentioned before, one goal of this blog is to be entirely SSG. I'm not shipping MB of JS to clients, and so I'm also not shipping a few hundred KB SQLite DB to clients either.

To support this, I implemented some rudimentary data extraction from the markdown blog posts themselves, where I use the HTML comment tags to store the creation time.

Now, I've got part of my setup working. I've moved over to a couple of scripts - one which generates metadata based upon files and puts it into SQLite (runs before build), and another which loads the data from the DB (also runs during the Next page generation at build time).

What I don't have working (yet!) is the N8N parts, but mostly because I've been too busy to finish the workflow. I can create new files in the repo, and that'll deploy them properly, but I've not actually gone through and tested it properly. Each time I submit the N8N form, it tries to push a file, which seems to trigger a commit, which in turn triggers my page host to try to run a build.

I'm sure I'll figure it out eventually. I said this project wasn't going to stress me out, or take significant time once it was setup, and I'm maintaining that. I want blogging to be fun and no pressure.

The technicalities of blogging

# Self-hosting - vindicated (again)


Today, there was an AWS outage at US-East-1. I'm not sure what the cause was - some say DNS, others say an issue at the DC.

Lots of folks reporting that their Ring cameras and video doorbells don't work, banking apps offline, Reddit having trouble. Chaos.

## I was unaffected (mostly)

My cameras? Still recording and responding.

Photos? Yep, still syncing and accessible.

Calendar? Yeah, I can still create events.

Reddit and Github? OK, yeah, I had trouble with those, but I can't self-host either of them (OK, I'm sure self-host alternatives exist, but that doesn't bring in the content of those platforms).

Todays events once again vindicated my choice to self-host as much as possible over the past years.

## What am I self-hosting?

I touched on this briefly in the previous blog post, but todays outage felt like a great opportunity to dive deeper. Let's start with core infra.

Firstly, Unraid. This has the core of much of my self-host infrastructure, though it doesn't host everything - more on that later.

Secondly, and perhaps most importanly, opnsense. OK, I know you literally can't 'remote host' your router or firewall, but understanding that I'm using opnsense rather than some ISP-provided option might help explain other parts later. I was originally running pfSense (pre-installed on the system I bought), but in recent months decided to switch to opnsense.

Thirdly, Adguard-Home. I originally setup Pi-Hole on an R-Pi, but I eventually decided to move it out once I'd setup Unraid. As I quickly learned, hosting your DNS server on a NAS is a bad idea, especially if stopping the array also takes that DNS server offline. I then setup a secondary/fallback DNS server on a separate box, but it always annoyed me because syncing them and same versioning them was doubling the work (and meant running 2 systems). Not that I had to do it often, but it was just something extra to keep check on. Finally, I decided to install Adguard-Home on opnsense - because if my router is offline, then I've got bigger problems to worry about.

I'm running a ProxMox box (and some other systems) too, I'll dive into this more later.

So, that covers the core infra. I know technically only OpnSense / router/firewall and a DNS server are core infra for a network. Now, let's dive into what I'm self-hosting.

I'm running both Netbird and Tailscale. The reasons for this are redundancy and counter-shittification. Netbird is my primary choice because it's self-hosted, but Tailscale exists as a backup. Netbird relay does run externally, primarily because I started having trouble connecting to it when it was running internally. I run Netbird clients on my systems (including phones), and have a dedicated 'masquerade' node on ProxMox (LXC) to enable access to other internal systems and also to act as an exit node (ensuring I can still access IP-restricted resources). If for some reason Netbird becomes unavailable, I've got Tailscale to fallback on, and have a dedicated Ubuntu VM running on ProxMox with Tailscale configured.

## What's on Unraid?

I run the majority of things from my Unraid system. The below are all Docker containers unless specified. I'm not going to list absolutely everything, but the main things are written below.

Frigate. Ideally, I should move that out to another system, have a cache drive for footage which then rsyncs across to Unraid (for redundancy reasons), but the Unraid system is the only one with an Intel CPU in, so video transcoding is super-cheap from a power perspective when compared with the AMD systems. The AWS outage means my cameras still work and record. The fact they're firewalled means that I've already had them in a 'no outside connectivity' scenario.

MQTT. This is generally only used for Home Assistant, but since I've move HA off of Unraid (and into a HA OS in a VM on ProxMox), this could probably be deprecated in favour of running MQTT within HA itself. I also run 'MQTTExplorer' which lets me view MQTT data easily - the only reason I run it here is because I got tired of running the client version on both my PC and Laptop (which also mean I can even access it on my phone).

VaultWarden. I've been using a password manager since about 2018, starting with 1Password. In recent years, we've seen breaches at some of these cloud-based password managers, and even though I trust the encryption they employ, I would have no way of knowing if a breach had occurred until they announce it. Sometime in the past year, I decided that the risk was too great, and looked for alternatives I could self-host. Initially, I considered using something like Hashicorp Vault, but reading deeper I found that it wasn't really a suitable option for password managers (especially if you still value the convenience of cross-platform apps to actually access it). Then, I found VaultWarden, and set about securing it in every feasible way imaginable. It already does most of the heavy lifting, but limiting access to it is still incredibly important.

Searxng. This is a self-hostable search engine which uses multiple other commercial search engines, but avoiding cookies by acting as something of a proxy. Admittedly, I don't use this as much as I perhaps should - I'm still very much stuck in a 'Google first' mindset for search. What I did find is that SearXNG results aren't always as contextual as I'd like. For example, if I search for "Expo network" on Google, it'll usually bring up the documents page for the 'expo-network' package for react native apps. If I search for that same term in SearXNG, it'll bring up things related to "Expo's", as in 'exposition' (large scale public exibitions) about networking (as in 'socialising'). To resolve this, I have to explicitly search 'react native Expo network' or something similar. It's not a lot of extra typing, but it's also not as convenient as Google.

Immich. This is probably my favourite self-host project, and one of the most used for sure. Originally, I was a Google photos person because I'd been using Android since ~2011. I did have an iPhone 4 before that, but I generally didn't bother with iCloud sync. I did have an iPhone XS in 2018, but decided that the Huawei P30 Pro was a better option all-round. In December 2021, I was looking around for a new phone. I'd been using the Samsung Z Fold 2 at that time, and I was starting to get annoyed by it. The battery life wasn't ever as good as I'd liked, and I found myself hating having to unfold it (because the 'tiny' front screen was a pain to type on). So, looking around, I decided to switch over to iPhone once more, with the iPhone 13 Pro Max. Surprisingly, the battery was great, the cameras were phenomenal, and the overall experience was nice to use. So, I found myself also paying for iCloud too.

In early 2024, I decided enough was enough, and decided to setup Open Media Vault and install Photoprism on a mini PC. It seemed OK at first, but OMV is horrible to navigate, and I found that Photoprism didn't actually protect or proxy assets - if you knew the URL of an asset, you could access it directly without authentication. It's not that I have photo that are risky, but that doesn't mean I want people randomly stumbling upon any photos by checking random URL's. I also found that it was really unreliable and slow with transcoding, though this was likely due to it running on an Intel N95 system. After 3 months, I decided this wasn't long-term supportable, and sought alternatives. Immich was heavily recommended, and felt much nicer to use - very close to Google Photos. I decided it was time to setup a NAS, which is where the Unraid installation was born from, and where Immich ultimately ended up being installed. I setup encrypted remote backups, verified a restoration procedure, and then cleared out Google Photos and iCloud, then cancelled the subscriptions.

Baikal. I wasn't ever a calendar person. I respected their uses, but to me, they were a corporate tool I had no use for in the home. That was until I started socialising again in late 2024. I found that keeping track of events was getting problematic, and if I ever wanted to plan something which didn't have a MeetUp or Facebook event page, I had no way of reliably reminding myself about it or checking for time conflicts. So, I set about searching, and found Baikal. I had some trouble getting different calendar apps linked up with it, but it generally worked. After a few months, I discovered that there's a WebDAV authentication setting in the admin panel, which by default was set to 'Digest'. Changing this to 'Basic' resolved the auth issues I'd started having after reinstalling client calendar apps.

Timetagger. As a software engineer working in a commercial setting for various clients, I have to track my time for most of them. I was using Toggl for the longest time, and it worked, but this was another tool I decided to self-host. I did this primarily for privacy reasons more than anything, but also because I wanted reliability in the event of outages. It doesn't have client apps, so using the PWA or website is the only solution, but that works just fine across Windows, Mac, and iOS (and likely Android too).

Neos-Memos. I don't use notes apps very often, but I had a bunch from the past that I didn't want to lose. Again, installing a self-host option was more for privacy than anything. I migrated my notes from Google Keep to Neos-Memos (by manually copy-pasting each note across), and then deleted them from Google Keep. One less thing for Google to snoop in on.

Kavita. I have a bunch of ebooks but I don't always want to use the Kindle app. Self-hosting makes sense. I don't read books or ebooks that often these days, but it's handy to have something around because I never really know what my brain will feel like doing.

Dawarich (a recent addition to self-hosting). I wasn't ever big on Google Timeline or companies knowing where I'd been at every moment. Recently, I realised there's value to myself in knowing where I've been at a particular time or on a particular day. I recently used it to find out when was the last time I'd seen certain people. Rather than saying "I think it's been 2 weeks", I could say with certainty "It was [specific date] when I last saw you" (yeah, I'm a stickler for being precise and explicit about what I say as it reduces the chance of miscommunication).

Ollama + Open Web UI. I'm not big on how AI is being used to spew out oceans of slop, but I respect that it can be used as a tool. I typically use it for coding, but not for 'vibe coding' or writing entire apps. Rather, I use it for individual pieces within functionality, or for reminding myself the syntax of things. For example, with SQL, I usually forget how to correctly nest into JSON and JSONB data (usually using the wrong `->` or `->>`). I recently used it to figure out some CSS for this blog - specifically for code blocks, and fixing a weird bug with the padding or offset of the first line inside the blocks. I also used it to help me figure out how to use various Next-related functionality when creating this blog (specifically how to get data from files when using SSG). AI is often wrong, either hallucinating functions which don't exist, or being correct but it's for older versions of libraries and no longer works. In terms of models, I tend to stick with Deepseek R1 (14b) or GPT-OSS (21b), but I've got a range of different models ready for different scenarios.

Paperless NGX + AI. I use multiple computer systems, but I absolutely do not want my documents in the cloud. I don't tend to store many of them, but I still don't want them being sent to random cloud services. So, I run Paperless NGX. The paperless-AI tool does automatic tagging for me to make it easier to organise and search.

Jellyfin. Folks seem to like Plex, but I don't, because they still rely on cloud connection and an account. Jellyfin doesn't care about any of that, instead focusing on what it's meant to - transcoding media and serving a UI to play it. The community seems to be obsessed with writing their own front-ends, which doesn't really interest me, but I'm glad that it's open enough that people can do that.

## What's on ProxMox?

ProxMox hosts less than Unraid. Ironically, it's got more a more powerful CPU and almost as much RAM (compared to the Unraid system which is basically a desktop PC), but it's also a mini PC running AMD, so transcoding on it would lead to louder fans. It doesn't run all that much right now, but I set it up as a means to expand in future.

N8N. I'd known about N8N for a few years, but I'd never paid much attention to it. See, for the longest time, I stuck by trying to do everything with code. If I wanted to automate something, I'd run a cron script on a system somewhere in my network, and 'tada, it worked'. This is fine for simple stuff, but complex stuff could take hours to build out and ensure it worked. Recently, decided to take a look at N8N in more detail, and it turns out I had more use cases than I could have imagined. Not loads, but as time goes on, I'm finding more and more. I'll probably dive into what I'm using N8N for in a future blog post.

Remote VSCode server / host. OK, so I'm **not** talking about 'VSCode Workspaces'. Rather, it's literally an Ubuntu server VM with projects on which I can SSH into. VSCode can work with this, and that means I can work on projects from both my desktop PC and my laptop. And since I have Netbird, I can access them even if I work remotely (very rarely). The downside of this is that for React Native projects, I can't do certain things like build a new binary for iOS, and anything that tries to work with web browsers generally won't work (e.g. I can't launch the React Native Devtools because there's no browser installation or even a desktop environment on this VM). This VM is given a lot of resources to work with to avoid performance issues.

Home Assistant OS. The first thing I ever self-hosted (if you exclude pi-hole). Borne from frustration with a wifi lightbulb sometimes just not working (and never working during outages) and having rate limits (*screaming*). I was running the Docker version of this for the longest time because it was the easiest for my use-case (always mini PC's until I got to the Unraid system). It eventually ended up running on Unraid so I could retire some of the older N95 and N100 systems I was using. When I setup ProxMox, I decided to migrate HA here - mainly because having it on Unraid subjects it to outages if I stop the array (= no lightbulb control), and decided that running HA-OS was a better option.

## Anything else being hosted anywhere?

I run a separate mini-PC. This used to host a lot more services and act as my 'devbox' (i.e. remote VSCode server), but is now mostly decicated to Nginx-Proxy-Manager. I'm planning on moving Nginx-Proxy-Manager over to the ProxMox box too at some point so I can retire that system, but I know all too well that swapping around proxies can lead to temporary outages.

Self-hosting - vindicated (again)

# Welcome to the blog


I've mulled over creating a blog for a few months, but never got around to building it. I wanted to make a blog where everything is self-contained, with no need to deploy a database or run any server (besides literally anything that can serve HTML).

So, I built this blog in NextJS in about 6 hours over the course of 2-3 days. Honestly, all previous experience I've had with Next was a rough experience, usually because of frankenversions in some projects (upgrading across multiple versions and not clearing out hacky workarounds from older versions), or trying to balance Expo react-native mobile with Next strapped onto the side for a web project.

All things considered, building out this ultra-simple blog was mostly pleasant. No significant hurdles, just a little bit of learning.

## Who am I?

I'm Scott P., also known as ChronSyn. I'm a software engineer working in React Native (Expo), Typescript, and SQL. I'm based in the north of England, and I've been working remotely since late 2020 (thanks, pandemic!).

I've been working commercially as a software engineer since early 2018, building projects with Javascript since 2014, but I also worked with Delphi (object pascal) as early as 2005... but we can mostly ignore anything built before 2010.

## What am I going to blog about?

Consider this a blog of mixed subjects. I expect many blog posts will be about coding and software engineering, but you should also expect to see posts about self-hosting / homelabbing. I might post photos, and there might even be some blog posts about gaming, but don't count on it.

## Homelabbing?

I am very much in the "host all the things" camp. I started on this journey in 2022 when I was frustrated with a wifi bulb being completely uncontrollable if my internet was acting up. I setup home-assistant, and started moving devices over. For the next 2 years, I experimented with self-hosting different things on various mini-PC's, but it wasn't until June 2024 when I setup Unraid and built an entire homelab system around it that I started taking it more seriously.

I started cancelling subscriptions for services where self-host options exist, such as photos (Immich), video (Jellyfin), calendar (Baikal), time-tracking (Timetagger), notes (Neosmemos), documents (Paperless-NGX), AI (ollama + open web UI), location timeline (Dawarich), and a bunch of others.

Since I'm also a stickler for never seeing HTTP warnings, I also use a reverse proxy (originally Traefik, but eventually Nginx-Proxy-Manager) with LetsEncrypt certs. I've set things up so that services can only be accessed internally (and only by specific devices at both proxy and Firewall level), and use Netbird for VPN for when I'm remote (because as good as Tailscale is, I'm all too familiar with Enshittification of tech products and don't want to see my VPN go the same way).

This self-hosting has saved me a significant sum of money each month while offering much better reliability and privacy. I know that things don't change unless I update something (e.g. update a package), but even then most things don't change between updates. I know that if I return to something 6 months after I last used it, it'll still be the same.

Most recently, I setup a Proxmox system on a separate 32-core mini PC, and started using a self-hosted N8N instance, which has opened up a lot of doors for me to build more projects for myself.

## Geek or nerd?

I'm a nerd in that I'm interested in STEM (particularly the ST parts), but I'm a geek in that I tend to focus intensely on specific hobbies within those fields (as opposed to understanding many things about many subtopics).

## Other hobbies?

I've tried a bunch of hobbies over the years, but one which has stuck with me is photography. I started taking it seriously in 2014. I started with a OnePlus One phone (because the 50 MP stitched photo mode was incredible), moved up to a Panasonic FZ-72 in July 2015, then a Nikon D5200 in October 2015, and finally a Nikon D750 in January 2016.

Eventually, cameras on phones improved enough that I generally don't bother with the DSLR any more. These days, I use the iPhone 17 Pro Max (previously iPhone 15 Pro Max) for photography, and for 95% of situations, the results are fantastic (composition is arguably more important than 'perfection').

I've also got a DJI Mini 4 Pro drone, though like many gadgets I've bought, that doesn't see much use these days.

I also enjoy 3D printing. Specifically, I design and print practical / functional parts to solve problems I have. That doesn't mean I never print *pretty* things, just that I prefer to solve problems. As of writing, my biggest print project was the Hexagon Storage Wall, whih really helped organise a bunch of things that were on my desk (though I should definitely get more things mounted on remaining space).

I also enjoy trying to perfect pizza using a home oven. I'm a fan of Neapolitan-style pizza, but I recognise that oven temperature plays a huge role in making it the way it is, and I feel that's the missing part in an otherwise great result.

## Gaming?

Yeah, I game. I've been playing World of Warcraft since early 2007, though I've not raided in any focused capacity since late 2010. I unlocked Mythic+ mounts in at least 1 season in BFA, Shadowlands, Dragonflight, and The War Within, but I never do it with organised groups because despite it being an MMO, I'm very much a solo gamer.

Besides that, I've been on and off with Battlefield games over the years (I started with BF2), most recently with BF6, but also with BF2042 in the months prior.

I used to love Heroes of the Storm, but it's been mostly on life support for a few years, and it's the sort of game where I play it intensely for a few months then get bored of for ages.

Scott P. Blog

Designed by engineers (uh oh!)

The technicalities of blogging

Self-hosting - vindicated (again)

Welcome to the blog