Is this a blog?

Part 1 - The Skeleton and the 1st Post

What do engineers do when they have time and want to create something? A blog! I don't know why... but here it is. YAB.

Devs create blogs to talk about some dev stuff, I guess, and my one will not be any different... My first blog post will be about creating a blog (also like a bunch of other devs).


I often see people pack their blogs with high-tech stuff. Trendy technologies, the newest frameworks, current best thing there is today, etc... I don't think there's anything wrong with that. I actually think that might be exactly what I'm gonna do at some point - create individual blog posts using different technologies and describing the process and some reflections.

But not right now. I was thinking of starting with the plain old HTML and CSS. I like Just as I'm writing this text, I already can see how easily I could utilise some of the tech that I use on a daily basis at work. First thought was the date of this very post - I can easily see at one point in the not-so-distant future feeling like changing the format. And (assuming I'd write a bunch of other posts) what do I do then? Sure, I could programmatically change them all, sounds like a fun 5 minutes regex find and replace task, but you know... YAGNI.


So what do I actually want? I want it to be constructed by writing semantic HTML and styled nicely with CSS. I think I also want to enrich it with some funky SVGs for the links in the heading. In terms of styling I want some decent dark and light scheme, and I want it to be working nicely on various media.

I defo want it to be accessible, but I know little about this subject or at least I feel like I know not enough. Having the website use simple and semantic stuff certainly helps.

I also want it to have nice CI. I mean, I already do. This version of the blog is hosted by Netlify. As it's a static page their free offering is just fine with nice GitHub integration. All I have to do is commit to the main branch, push it to the upstream and it's gotta go live.

Do I need any preprocessing? I don't think I do at this stage. I could minify this, but there's virtually no gain.

Testing? There's no logic here, no build that needs to be verified. The only thing is to check if the website is up. If it isn't, then... Well not great, but I ain't gonna lose millions every minute. Perhaps I can use GitHub Actions and run a synthetic.

Talking of availability, I'll have a look at some CDN. Fastly or Cloudflare or something. There might have some free tier for a blog site that maybe gets a visit once a month, but when it does, it could be nice and fast, no matter where requested from.

Last, but not least - features! I don't think I need anything in particular. The only thing that comes to my mind is a comments section, which I don't think is valuable at this stage. Feel free to Tweet at me ;]


I think there will be more, but that's it for the moment. I'll give it another thought later.

Thanks for reading <3

Part 2 - The Styling

It's been quite a few days over which I played mostly with CSS. It's still not perfect, there's still a lot that I want to improve, tweak or maybe even completely change. It's been surprisingly fun, as I always consider myself much more of aBEengineer than FE and digging deep in CSS is not my favourite activity.

I've learnt plenty and that surely was fun. My main source of knowledge was Material Design. I filled the gaps with fundamental MDN Web Docs: CSS, a few web searches with, as expected, Stack Overflow proving some answers to very specific questions. Used Can I Use to ensure that I don't use something exotic by accident. I wasn't aiming for any specific support target, but in general aiming for ~95% support or more. I want it to look great (in my poor taste 😂), while being pretty confident that if some styling doesn't work, it still looks good enough and, most of all, is readable. Let's not forget that this version is meant to be developed by hand and supported only by (growing) knowledge.

A bunch of times I was looking up one thing, which in turn, made me learn about another thing and so on until eventually I ended up yak shaving, just like I'm doing right now, writing this post... 😅


I'm a big fan of dark themes for many, many years and obviously that was my focus. I know, I neglected the light theme a bit, but I do plan to polish it a little. Soon.

Dark themes were with me before they were even considered "themes". They were terminals - simply black background with green or light grey text on them.

It was functional, it was practical. GUIs were added later. Putting the colours aside, I only imagine they were trying to imitate the paper and ink and made white background with black, no longer monospaced, text.

Not sure when I started intentionally switching to dark themes or customising/making my own themes, but for sure I'm happy that they come with so many products nowadays. They come in different shapes: ranging from simple black-and-white colour switches while maintaining other colours; through dimmed or high-contrast with focus on accessibility themes; or more stylistic and/or trying to fit a common theme applied in many independent apps; to completely unique and personalised ones and beyond. If your app or website doesn't have one yet, I surely encourage you to create one. Material design has a dark theme dedicated section, explaining how to do it well, accessible and why would you do it in the first place...


My theme... Well, it's not the prettiest, but I like it. The idea was to make a neony-and-not-so-material-theme... I still have a bunch of ideas, like make it even a bit more neony, especially the light theme, which doesn't look like it at all. I have some ambitious (for me) plans to make it also a bit glassy, some gradients on thicker borders, perhaps some blur here and there...

Having said that, I think I should constrain myself a little right now and focus on a couple of other things before I add more style features.

Part 3 - Reinforcing

Functional Testing

Added some funky tests in a browser. This was more of a play than anything really meaningful. The more I work on this, the more I feel like I'm missing open source and the great libraries that solve my problems much better than I could in a fast and reliable manner. There's not much I could even unit test, however some functional/e2e tests, would be warranted. Nope, I'm not going to be writing another Cypress 😂😂😂

If you're really curious, just look at /test.html (I didn't add it to the nav deliberately).


Synthetic Testing

Uptime is tested with Checkly. First time I used them, but they seem to do the job and be solid enough (for the moment); and most of all - it's free (for my use-case)! It tests the site on regular basis from multiple parts of the world. Was pretty easy to set it up (added a bunch of Playwright tests) and if something fails, I'll get an email and a Slack notification.

Additionally, there's a simple GitHub Action that pings the site and tests for a piece of text. Great redundancy on synthetic tests 😅


Availability

I think it's actually pretty good for what it is. I was thinking of using Cloudflare or Fastly, etc, but then I remembered that I get that out of the box with Netlify :3

Part 4 - The summary

First of all, I don't think that's the end of it, but I'm pretty satisfied with what I have. I was rushing nothing and made sure I was working on it when I actually felt like it. That's why it took so long since the part 1, but I don't think that's an issue.


One of the things that was really standing out to me when working on this, is that I can really appreciate the tools that I use every day that I don't even think about. I don't think I would create another site that doesn't use some basic tools, that support testing, linting, etc... It's not like I (or software developers) need them, it's just so much easier with them.

Although I haven't used any foreign code in here so far, in a way, I did cheat a little - I was using a powerful IDE (JetBrains products are my choice) that has a lot of tooling build in and some extra provided by plugins.


I'll keep it as it is, but I do want to continue working on my personal site. I guess, I'll simply archive this and start a new thing using this as a base. One thing that I surely want is to easier keep consistency when changing something, i.e. copy-pasta is easy, but can become really troublesome when stuff keep on growing. It's really easy to miss bits here and there.

It was a bit hard at times to recognise patterns that scream to me to abstract them and ignore them for the sake of this challenge. Don't worry my friends, I shall do it soon 😂😂😂


To conclude it was a fun experiment. One that I would recommend doing it at some point to every software engineer at some point. Either get back to the roots or - if you somehow started your career with heavy usage of tools, frameworks, libraries - see if you can do it without it.