Third version of my website released 🎉
Tags: performance, showdev, webdev, javascript
Published: 2021-04-29 12:00:44

---
title: Third version of my website released 🎉
published: true
date: 2021-04-15 23:15:00 UTC
tags: performance, showdev, webdev, javascript
canonical_url: https://www.benjaminrancourt.ca/third-version-of-my-website-released
cover_image: https://www.benjaminrancourt.ca/images/third-version-of-my-website-released.jpg
---
Two months ago, I started one of my blog's biggest refactoring: **separating** the **processing** of my [Ghost](https://www.benjaminrancourt.ca/tag/ghost-cms) data from the **generation** of the blog itself. Rest assured, it did not take me two full months as I made the changes in my spare time. 😅

The end goal of this refactoring was to improve the build time of my [GitLab](https://www.benjaminrancourt.ca/tag/gitlab) CI pipeline. Let's see if it was worth it. 🤔

On average, the pipeline on my default branch `main` took 8m 30s and now, it completes under 3 m 41 s! So, it is now about **56,6% faster**! 🚀

It is a huge improvement, but when we considers the time it takes, we can seriously question its relevance for good reason. Although if I spent more time than I would have liked, I consider that refactoring to be an **investment** because this project had some positive side effects that I did not initially expect. 🤭

## Side effects

### Bug fixes

To make sure that I had not introduced any new bugs, I started comparing the HTML output produced . To my surprise, it was exactly the opposite: I **unconsciously fixed bugs** that I did not know I had! 😮

![](https://www.benjaminrancourt.ca/images/invalid-canonical.jpg)<figcaption>An invalid canonical tag, with a double slash, has been fixed.</figcaption>

![](https://www.benjaminrancourt.ca/images/invalid-json-ld-tags.jpg)<figcaption>An undefined JSON-LD element for a tag page is now correct.</figcaption>

I hope the fixes will improve my SEO! 🕊️

### Dates and time

In the previous version of my website, I noticed that sometimes, some posts published late at night had the next day as their publication date... Sounds like a time zone issue, right? 🌐

Now, all dates are converted to the `America/Toronto` time zone, which corresponds to my local time, here in Quebec: the [Eastern Time Zone](https://en.wikipedia.org/wiki/Eastern_Time_Zone) ([UTC-5](https://en.wikipedia.org/wiki/UTC%E2%88%9205:00)). ⚜️

It is quite simple in JavaScript to do this with the native [toLocaleDateString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString)function on date objects:

```javascript
const options = {
  day: 'numeric',
  month: 'short',
  timeZone: 'America/Toronto',
  year: 'numeric',
};
const toLocaleDateString = (dateObject) => dateObject.toLocaleDateString('en-CA', options);
```
<figcaption>The code used to display the dates on my blog</figcaption>

![](https://www.benjaminrancourt.ca/images/date-times-changed.jpg)<figcaption>Date differences between the previous version and the current version of my website</figcaption>

Also, I do not remember how I used to calculate the reading time before, but I noticed that some of my posts saw their reading time value drop drastically, like my [Lint PowerShell scripts with PSScriptAnalyzer](https://www.benjaminrancourt.ca/lint-powershell-scripts-with-psscriptanalyzer) post which went from 12 minutes to just 3 minutes, which looks more correct. 😂

### Greener website

As I use less of the ressources provided by the GitLab infrastructure to build my website, it uses less electricity and therefore, is a bit greener than before. 🌳

Also, I do not know why, but the new version of my website is now **3% more cleaner** than the previous version according to the [Website Carbon Calculator](https://www.websitecarbon.com/website/benjaminrancourt-ca/). 🧮

Maybe it is because I deleted all the code and images related to the **Apple iOs splash screens**. So sorry to Apple users who are reading this post now, it is not worth it for me to serve **20 images and 4,252 more characters** to everyone just to support one device type! 🍎

### While we are at it...

I also made some little improvements, but I am not sure if we should consider them as side effects. 🤔

#### JSON feed

As my data for my Atom file was already in JSON, I took the opportunity to generate also its equivalent in JSON: a **[JSON feed](https://jsonfeed.org/)**. It was something that was on my watch list and while I implement it, I really like the [specifications](https://jsonfeed.org/version/1.1), which are much simpler in my opinion, than the [RFC 4287 - Atom Syndication Format](https://tools.ietf.org/html/rfc4287) document.

```json
{
  "authors": [
    {
      "avatar": "https://www.benjaminrancourt.ca/images/benjamin-rancourt.jpg",
      "name": "Benjamin Rancourt",
      "url": "https://www.benjaminrancourt.ca/"
    }
  ],
  "description": "Thoughts, stories and ideas.",
  "favicon": "https://www.benjaminrancourt.ca/images/favicon/favicon-64.png",
  "feed_url": "https://www.benjaminrancourt.ca/feed.json",
  "home_page_url": "https://www.benjaminrancourt.ca",
  "icon": "https://www.benjaminrancourt.ca/images/favicon/favicon-512.png",
  "items": [
    {
      "content_html": "...",
      "date_modified": "2021-04-09T00:10:11.000Z",
      "date_published": "2021-04-08T23:15:00.000Z",
      "id": "https://www.benjaminrancourt.ca/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline",
      "image": "https://www.benjaminrancourt.ca/images/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline.jpg",
      "summary": "The ultimate recipe to push some file changes to the current Git repository within a GitLab pipeline!",
      "tags": [
        "GitLab"
      ],
      "title": "How to push to a Git repository from a GitLab CI pipeline 👷",
      "url": "https://www.benjaminrancourt.ca/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline"
    }
  ],
  "language": "en-CA",
  "title": "Benjamin Rancourt",
  "version": "https://jsonfeed.org/version/1.1"
}
```
<figcaption>Excerpt of my <a href="https://www.benjaminrancourt.ca/feed.json">JSON feed file</a></figcaption>

I am not sure if feed readers already support this new format created in 2017, but it does not cost much to support it. It also helps promote a new format to everyone, and helps it to be implemented by more people and businesses. ⌨️

```xml
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Benjamin Rancourt</title>
  <subtitle>Thoughts, stories and ideas.</subtitle>
  <id>https://www.benjaminrancourt.ca/</id>
  <link href="https://www.benjaminrancourt.ca/feed.xml" rel="self" type="application/atom+xml" />
  <link href="https://www.benjaminrancourt.ca/feed.json" rel="alternate" type="application/feed+json" />
  <link href="https://www.benjaminrancourt.ca" rel="alternate" type="text/html" />
  <updated>2021-04-09T00:10:11.000Z</updated>
  <author>
    <name>Benjamin Rancourt</name>
    <uri>https://www.benjaminrancourt.ca/</uri>
  </author>
  <icon>https://www.benjaminrancourt.ca/images/favicon/favicon-64.png</icon>
  <logo>https://www.benjaminrancourt.ca/images/favicon/favicon-512.png</logo>
  <entry>
    <content type="html">...</content>
    <id>https://www.benjaminrancourt.ca/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline</id>
    <link href="https://www.benjaminrancourt.ca/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline" rel="alternate" />
    <summary type="text">The ultimate recipe to push some file changes to the current Git repository within a GitLab pipeline!</summary>
    <title type="text">How to push to a Git repository from a GitLab CI pipeline &#x1f477;</title>
    <updated>2021-04-09T00:10:11.000Z</updated>
    <published>2021-04-08T23:15:00.000Z</published>
  </entry>
</feed>
```
<figcaption>Excerpt of my <a href="https://www.benjaminrancourt.ca/feed.xml">Atom feed file</a></figcaption>
#### Tag page

Even though each tag page uses a card format for their related posts, their layout was not great as the cards used the full width of the screen to be displayed. Now, the layout is almost identical to the homepage and the cards will be much easier to read, as their width cannot be greater than 65[ch](https://www.w3schools.com/cssref/css_units.asp) (approximatively of 1250px on my screen).

![](https://www.benjaminrancourt.ca/images/gitlab-tag-page.jpg)<figcaption>A comparaison of the <a href="https://www.benjaminrancourt.ca/tag/gitlab">GitLab tag</a> page, before and after</figcaption>

#### Tags page

And while we are at it, I have always wanted to have a page that lists all the tags I use. It is now done on my [**_Tags_**](https://www.benjaminrancourt.ca/tags) page. 🧙

![](https://www.benjaminrancourt.ca/images/tags-page.jpg)<figcaption>Screenshot of the <em>Tags</em> page</figcaption>

It also reveals some interesting statistics to me, like the fact that I blog more about GitLab and [Eleventy](https://www.benjaminrancourt.ca/tag/eleventy), based on their cumulative reading time! ⏱️

## Conclusion

Enough changes for now, it is time to take advantage of theses new improvements and above all, to enjoy the summer! ☀️