What is a blog?

If you ask a dozen different people this question, you'll get a dozen different answers...

For me though, this particular blog is going to be one that documents my technical journey. "To where?" you may ask? To wherever it is I end up, I plan to write about any and everything about my software engineer experience here.

But first a brief introduction if this is the first you're hearing of me - I'm Rascal Two, a freelancing Software Engineer, always improving my skills and expanding my horizons. This particular expansion serves multiple purposes, one being to gain new experience creating, updating, and generally managing a blog, and another being to share my experiences with whomever may see them - be it for learning, relating, realizing that nobody is born knowing everything, or to take joy from my misfortunes.

The Birth of a Blog

This first entry is going to be quite self-referential, as while there are many blogging platforms I could've chosen from, I decided to choose none of them! If I haven't given up, you should be reading this on my very own site!

There is one unique thing about my personal site from my other projects: the code is an absolute mess! For that reason, and the fact that a portfolio is relatively unimpressive when it comes to showcase projects go, at least until I clean it up, it will not be open sourced.

Currently my personal site - this being the sixth iteration of it - is powered by Next.js, which should make the optimization of a bunch of static pages effortless. I start how many start adding a new page to Next.js: create a blog folder, index.tsx, and [slug].tsx, though for good measure I make the same files under a b folder for shorter links, when I do get around to sharing these.

Implementation

One positive about a project not being open source, is that you can write as much "bad" code as you want, which is exactly what I started doing - created some Markdown files in my data folder, threw together a basic fetchBlogs() function to convert these markdown into a basic Blog object:

interface Blog {
  slug: string
  title: string
  date: [number, number, number];
  html: string
  excerpt: string
}

and start serving them!

The landing page was easy enough, just pass all the blogs to the page component and render a little <section> for each. The actual blog pages only took a little more effort, with a getStaticPaths() and getStaticProps() I created all the

{ param: 'slug' }

I needed, and filtered through all my blogs from fetchBlogs() to get the current one, and pass it or null to my page component.

Obviously there's a lot missing from this, but it allows me to write text in one place, and after a quick build, for it to appear in another place, MVP completed, let's ship it! Unfortunately I'm not building something so plain, I do wish for this to look somewhat presentable and not like text on a page, so the styling process is next.

Thanks to that previously-mentioned bad code, I've a few global styles, so off the start I already have the background color set to black, and my sections with an interesting gradient between them. Here comes my reminder that I am not a designer, my projects are biased to their results, so they'll do what's needed, but won't necessarily look good while doing it. I say that to say that I have written some styles - adding border radiuses, footer padding, etc - just enough so it doesn't look bad to me.

Code Highlighting

This is not my first delve into syntax highlighting code blocks, so my instinct told me highlight.js, I decided to first look into my markdown library - marked.js - and see how it did highlighting. Got a bit confused for a few minutes thinking it had bundled some highlighting, before seeing the advanced usage and copying it straight into my code...and remembering I needed to choose which CSS theme to import - I went with import 'highlight.js/styles/github-dark-dimmed.css'; - for highlight.js, it was working!

But the backgrounds were missing, having a faint memory of this issue before, I checked the <tag class> to see the hljs class missing - which after adding made the background appear. However, it was the width of the entire page, thankfully easily fixable via a width: max-content; added to the .hljs.

The last syntax highlighting issue is that marked.js offers no way to do syntax highlighting on inline code blocks, so I needed to implement my own solution...which was doing a little regex replacement of any codeblock with no newlines, and manually sending it through highlight.js.

Scope Creep

At this point I already saw many more things I wanted to add to this - as I was using this very blog entry as my test content - from automatic linking when mentioning keywords/resources/websites, to automatic <abbr> insertions, and much more - but I recognized this feeling, and knew that if I kept on adding feature after feature, I'd never actually get this published.

Polishing

First was making the blog pages feel like they belong to my actual site - <footer> and <header>. For the <footer> I made my name a link back to the homepage, and - just to be enough - I added a link at the top of the page back to the blog homepage.

As I had no intention of instantly inviting anybody to actually read my blog, I felt no pressure to make things accessible just yet - so I didn't.

Finally I went through the files one by one, making one commit for the actual blog additions, and another for the <footer> changes.