This Website Isn't The Best

I think that this is obvious, this site has a lot of areas it could improve upon itself, but then again nothing is perfect and as I type this out I spot areas of improvements I can apply into this blog, things like the previous and next blog buttons currently showing previous personal AND dev blogs. For some reason it works fine in the personal blog but here it is a jumbled mess, which probably won't look the best on a resume when I include this link in there but it's a learning process and i'm sure i'll fix it with time.

With that out of the way, let's talk about the biggest change of this site: the great split of blogs. Instead of having all of my development blogs in /blog AND all of my personal rambles in /blog I have gone ahead and split both blogs into their own categories, effectively making a more efficient browsing experience instead of relying solely on tags. This is a huge undertaking for me because I am still a novice at typescript, Node.JS, and all of these different tools that I now have at my disposal. I grew up with a focus mainly being on HTML, CSS, and Python so deciding to make a website using an unfamiliar codebase is very scary, even if it started out as a template I found on github.

The Split

At first I took all of the data and formatting that I used for /blog and duplicated it into a new path called /personal-blog allowing for a baseline starting zone towards making a secondary blog. By default all blogs get defined by tags and nothing else, so if I wanted to make it so that personal blogs only showed up in their own category I had to add a new category filter to my markdowns with two arguments, "dev" and "personal". This category identifier allows me to continue using the baseline tag filter while also being able to split up which spot each blog goes into, and while I thought it was going to be a quick in and out fix it really wasn't.

Below you can see a code snippet that is the main identifier for the actual blog page logic:

  const devPosts = allCoreContent(
    sortPosts(allBlogs.filter((post) => post.category === 'dev'))
  )

This one line is the main secret sauce behind the code that splits up the two blogs, obviously changing devPosts with PersonalPosts and 'dev' with 'personal' for the other blog that exists on this exact same site, and while I wish that was the only change I had to do it was not at all, and what was originally going to be a short quick job turned into multiple hours of debugging and finding out why it wouldn't finish my website building workflow. Sometimes I had to fight with the prettier package for TypeScript, a code formatter focused on making your entire codebase have the same style instead of having one file using a unique style while the other page doesn't have that same style, and fight I did.

After going through and making sure that prettier had full control over my project and making sure that I had inputting everything in a fluid continuous style that appeased the pretty code gods, I finally managed to start getting some motion towards the website posting, and while i'm keeping out a lot of the trial and error early on due to me honestly just not documenting that process, I still had a new issue I didn't think about until after it was all working.

RSS Feeds

I love RSS feeds, to elaborate on this I love the internet but I dislike social media and algorithmically selected content intended to keep you on the site browsing for hours upon hours, controlling your life and taking away your happiness with no real control over making your feed better due to sites recommending what they THINK you want to see. RSS Feeds allow you to bypass this because it allows you to pick and select the sites you follow and how you intake your information. You can't have an algorithm control a RSS Feed in the same way that you can with an actual social media platform, and because of this I wanted to make sure my website was compatible with programs like Fluent Reader.

What you're seeing above is the first attempt at importing this website into fluent reader, it had a LOT of issues such as thumbnails not showing, the defined values of a personal and dev blog not being shown, and no "Read more..." button after the short description that is included with these blogs. This RSS feed project also opened a can of worms originally where even before that image in Fluent Reader I experienced the Personal Blog not being archived on the sitemap at all and not being included in any RSS feed xml, so I had to rewrite a lot of code to change the logic I had that defined a blog as a dev blog and a personal blog, but once it was all done I managed to get a very pretty output that looks very similar to how Kotaku works with RSS feeds.

Despite this fix I have been looking around and I feel like I might improve RSS feeds again in the future to work like Polygon, which includes the entire blog post data including all of the images inside of it so that you can read it inside of Fluent Reader or any other RSS program instead of having to read the short description and then click into the official website, as I feel if someone wants to setup a watch for this sites RSS Feed, they should be able to see that feed in it's entirety without having any extra hoops to run through.

Throughout this process of improving my RSS Feeds I had to change a lot of tracked values. Originally I only had:

  <item>
    <guid>${config.siteUrl}/${basePath}/${post.slug}</guid>
    <title>${escape(post.title)}</title>
    <link>${config.siteUrl}/${basePath}/${post.slug}</link>
    ${post.summary ? `<description>${escape(post.summary)}</description>` : ''}
    <pubDate>${new Date(post.date).toUTCString()}</pubDate>
    <author>${config.email} (${config.author})</author>
    ${post.tags ? post.tags.map((t) => `<category>${escape(t)}</category>`).join('') : ''}
  </item>

But after going through and improving it, I had to remove values like authors due to not having any for this site and add new values such as logic for the thumbnails, leading to this final result:

  <item>
    <guid>${config.siteUrl}/${basePath}/${post.slug}</guid>
    <title><![CDATA[${escape(post.title)}]]></title>
    <link>${config.siteUrl}/${basePath}/${post.slug}</link>
    ${
      post.summary && post.images && post.images[0]
        ? `<description><![CDATA[<img class="type:primaryImage" src="${config.siteUrl}${post.images[0]}" /><p>${escape(post.summary)}</p><p><a href="${config.siteUrl}/${basePath}/${post.slug}">Read more...</a></p>]]></description>`
        : post.summary
          ? `<description><![CDATA[<p>${escape(post.summary)}</p><p><a href="${config.siteUrl}/${basePath}/${post.slug}">Read more...</a></p>]]></description>`
          : ''
    }
    <pubDate>${new Date(post.date).toUTCString()}</pubDate>
    ${post.tags ? post.tags.map((t) => `<category>${escape(t)}</category>`).join('') : ''}
    ${post.images && post.images[0] ? `<media:thumbnail url="${config.siteUrl}${post.images[0]}" />` : ''}
  </item>

Now if i'm being honest, I didn't fully understand what CDATA (Character Data) was when I first implemented it, I only included it because it was how Kotaku had stuff setup, and if it worked for them then surely it would work fine for me (Which so far it looks like it did)! Due to this though I found out that CDATA is a backbone for XML that allows it to render content on RSS viewers like Fluent Reader with full HTML data, supporting images, links, and other typical html markdown content.

Throughout this entire process however I suddenly have unlocked a new urge to create, to express, and to document my progress both in the professional side of my life and personal side of my life so that even if nobody expect maybe friends and potential employers look at this in the future, I will have made my own personal algorithmically free mark on the internet, leaving behind writings that hopefully can be read for a little bit longer than how long I am around on this earth. Along the way of splitting up this site I feel like my understanding of typescript, Node.JS, and all the tools at my disposal are growing day by day, allowing me to enhance my toolset and what I can create in the future!

As one final ending note, while writing this blog I implemented a fix for the previous and next blog buttons including the personal blogs on this dev blog section, an issue I mentioned right at the start, so always remember even if you don't know what a fix might be, attempt something because if it works, you'll feel accomplished and proud way sooner!