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.
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 greenor 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.
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).
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 😅
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
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.