shihn.ca ⚡️

I created a blog and decided to keep it

I was playing with Eleventy last weekend for a project ‒ did the Hello World equivalent, and created a blog. I jokingly tweeted that I should find something to write about, now that I have a blog. I say jokingly, because writing about anything has always given me a bit of anxiety, and I'd never actually start a blog.

Then I thought why not? Perhaps forcing myself to write every week or two will make me become a better writer. I have always admired people who can write well.

"You could do the ole dev thing of writing about building the blog and then never again until the next time you rebuild the blog." - Matthew Phillips. So here I am, doing just that.

I will not go into the technical details behind setting up a blog, because quite honestly, Eleventy was super easy and their tutorials do a great job. I will talk about the fluff instead.

Designing my blog

Ready to create a blog for realz, the first thought was aesthetics. I had decided that I did not want to spend days designing this thing, and yet I did not want to use a generic blog template. I gave myself a day, and no more, to come up with a quick design and most of the implementation.

I decided early on that the site will be divided into two main sections - the blog bit, and the bit where I talk about my silly side projects. Now they are under Writings and Creations. Rest of the design was quickly put together without actually creating a cohesive design narrative.

Background + Colors

I was talking to someone a couple of days ago how websites rarely use textured backgrounds anymore. Right away, I decided my blog will not be flat and will have some sort of textured background. My go to place for this is usually Subtle Patterns, but I remembered I had this texture (I don't recall the source) from an abandoned side project from years ago. I decided to use it to avoid spending hours trying different patterns.

Gray tectured background

The big downside of this texture is that it's very gray! The actual blog content (like this page) would be on a light solid background (white), and then I picked two accent colors - blue and pink.

Cards - Blog Post

Having a gray textured background, I decided to use cards to show blog entries in a list. My initial design was quite clean, but being in a whimsical mood, I decided to add a splash of color to it.

I had a Java program from a while ago that parsed images to extract colors from it. I decided to use it to create a theme for each post. Since the theming is image based, the downside is that every blog post would need an image to go with it. Not sure if that's a smart choice, but I'm going with it for now. Here's how it works:

Image processing to extract theme

When I get a color to use with each post, I use the brightness of the color to determine if the text on it should be black or white.

These colors are now set as CSS properties on each card --card-bg and --card-fg. The --card-bg property fills the background of the card, and it is also used to create a linear gradient on top of the image, so the image blends in with the background.

background: linear-gradient(to left, var(--card-bg, rgba(0,0,0,0)), rgba(0,0,0,0));

It creates the following effect:

Note: If I continue to like this, I will adapt that java code as an Eleventy JavaScript extension, so the themes for each post are generated automatically at static-site-generation time.

Cards - Creations

I wanted a different look for items representing experiments and side projects. With my allocated time to design this running out, I went to extreme - What doesn't look like a rectangle? A circle!

After some mucking around, I ended up with the following. It uses the same color theming described for blog-post cards, but no gradients here. It looks a bit whimsical, but I was going for that.

Creation cards example

Fonts

Having run out of time, I went with the standard fonts. No web fonts. I recall a New York Times experiment where they realized people tend to consider a serifed font more reliable (Baskerville) than sans-serifed ones. So I picked a serifed font for the blog content, and sans-serif for titles, links, and image captions.

Hosting

I have heard great things about Netlify so decided to give it a go. It was pretty straightforward.

Conclusion

I am pretty happy with what I ended up with after a day's work. I realize that some of these decisions may not scale well (e.g. a big list of creation cards), or may not be most efficient to browse around. But, I hope to revisit it after I am convinced that I will not let this blog die. 😏

Having some existing code for quick image processing definitely helped, and it would be fun to incorporate it into the eleventy build process.

What do you think?

I'm not sure if I'm going to have comments on the blog or not, but let me know on Twitter. Also, slide the bar below to indicate how much joy did this post bring you.