Jimmy Bonney's Blog

Small Design Updates

2026-02-21T00:00:00Z

It has been a long time since anything was done on this blog and with the raise of AI it would have been a shame not to use this capability to do anything about this. I am not talking about generating editorial content here, there is plenty enough of those elsewhere on the web. I am talking about doing something about the look and feel which has never really been my forte. So, with the help of Claude, I’ve gone through the old design and made a few updates:

replace mini.css by pico.css
move to a complete dark theme
simplify the layout so that articles are in focus
simplify the footer
simplify about page and provide recent experience highlights
a few accessibility fixes

I am also trying to reduce the time it takes for me to actually publish content. Today, I need to write the content, find an image for the header, edit the image to the right size, etc. I am trying to automate some of those tasks so that I can purely focus on the content and what I have to say. Let’s see how this goes…

Scheduling Post Publication with a Static Website (Using Bitbucket, Netlify and GCP)

2021-09-07T00:00:00Z

As I mentioned in different articles and in the About page, this website is being built using a static site generator, namely nanoc. Every time I push changes to the code repo – be it configuration changes, new or updated articles, etc –, a new build is triggered on Netlify and the new version of the site is deployed. This is all well and good, except that on some occasions, it would be nice to be able to schedule new articles to come up on the site on a specific day, without having to manually push the content only then. In the last few days, I spent some time to see how this could be done and this post will look into the solution that I put in place using Google Cloud Platform (GCP).

Update the logic in nanoc when building the website

The first thing to do is to make sure that nanoc does not build articles that are scheduled to be published later. This way, we can commit the changes to git and push them to the repository, but the new article will be excluded from the build on Netlify.

Initially, the Rules file preprocess block was containing the following rule:

# Delete unpublished articles
@items.delete_if { |item| item[:publish] == false }

This rule allowed me to exclude some articles that are still in draft from being processed and built into the site. In order to schedule articles, it is necessary to update the logic a bit so that we also look at the article created_at attribute: if it is in the future, we do not include it in the build. The updated rules are as follow:

# Delete unpublished articles
@items.delete_if do |item|
  (item[:created_at] > Date.today if item[:created_at]) || (item[:publish] == false)
end

Architecture

Before diving into the details, and as with all projects, there are different ways of achieving the same things. I looked a bit around to see if other people faced the same issue and what their solutions were and there are actually quite a few options out there. Most of them are related to code being hosted on Github and using GitHub native tools though, so those were not necessarily an option for me since my own repository is hosted on Bitbucket. Bitbucket comes with Pipelines that allows automating CI/CD and maybe it could have been an option to look into but the truth is I wanted to get my hands dirty and try to create a Cloud Function in Ruby running on GCP. So here comes the overall architecture:

The basic idea is to use Cloud Scheduler to trigger a Cloud Function on a daily basis. This function will clone the code from the (private so far) Bitbucket repository, it will fetch the last date at which Netlify made a deployment of the site and it will assess if there are any articles that are due to be published. If this is the case, then the function will call a Build Hook from Netlify for the website so that a new build is triggered and the website gets updated. That’s it, pretty simple.

Set up

Since we are using GCP, the first step was to create a new project and enable the necessary APIs (Cloud Functions API, Secret Manager API and Cloud Build API). At this time, a number of steps have been executed manually on the GCP console. I believe that most of them could have been done through scripting, using the glcoud SDK but this will be an exercise for later.

Interacting with Bitbucket and Netlify means that there are a few secret variables that the function will need to connect to them. For this purpose, we use Google Secret Manager. Once again, the variables here were created from the GCP Console but this could have been done using the SDK or code. This is outside of the scope of this quick project.

Create an App password in Bitbucket

This can be done from the global settings and is one option to conveniently have read access to the repository that we are interested in. Note that this is a global setting, meaning that if we give it read access to repositories, this grants read access to all repositories. There are probably options that are repo specific (using SSH keys for instance) but for convenience and ease of setup I went with the app password.

Create an access token in Netlify

It is also possible to create a personal access token to connect to Netlify. This is all explained in their doc and can be done from the global settings > Applications.

Fetch the site ID in Netlify

In order to get the list of deployments for a given site, we need the site ID from Netlify. This is accessible either through the API or from the UI, in the Site settings section.

Generate a build hook in Netlify

Finally, in order to generate a new build if needed, there are different possible approaches: one is of course to use the API (in the same way we fetch the deployment date) and another is to use a webhook. In this specific case, I went with the webhook since the netlify gem available does not include the build api calls.

Save secret in Secret Manager

Once all this data is gathered, it can be safely stored away in GCP Secret Manager.

Do make sure to grant the service account that will run the cloud function the rights to access secrets in Secret Manager. If using the default App Engine service account (not recommended for production as per Google’s guidelines), this is how it is done.

You can read more about it on Google documentation and forgetting to do this is a pretty common issue that generated a number of articles (for instance here) or question on StackOverflow (for instance here).

Cloud Function

Once all this is in place, we can go ahead and code the logic. To keep things together, I created a simple class Reviewer that has the necessary logic to connect to those services and identify if a new build needs to be triggered. This class is in turn called by the Cloud Function. To consult the whole code, head to the public repo.

require 'netlify'
require 'git'
require 'front_matter_parser'
require 'faraday'
require 'fileutils'

module FaasNetlifyBuild
  class Reviewer

    # Constructor
    #
    # @params args [Hash] the secrets from Bitbucket and Netlify (:bitbucket_token, :netlify_token, :netlify_site_id, :netlify_build_hook)
    def initialize(args)
      @bitbucket_token = args[:bitbucket_token]
      @netlify_token = args[:netlify_token]
      @netlify_site_id = args[:netlify_site_id]
      @netlify_build_hook = args[:netlify_build_hook]
      @tmp_location = args[:config]["TMP_FOLDER"]
    end

    # Logic to be executed to validate if a new build is required
    def run
      output = "No new build was needed..."
      checkout_code
      if new_build_needed?
        trigger_build
        output = "New build was triggered"
      end
      output
    end

    # Clone the git repository in a local folder
    def checkout_code
      p "Cloning repository..."
      # Delete the directory if it already exists
      FileUtils.rm_rf(@tmp_location)
      # Clone the repo in the tmp folder
      g = Git.clone("https://jbonney:#{@bitbucket_token}@bitbucket.org/jbonney/jimmybonney.com.git", @tmp_location)
    end

    # Check if a new build is needed. A new build is needed if:
    # 1. There is at least one article that has a publication date set to today or in the past and
    # 2. The last deployment date from Netlify is older than the article publication date
    #
    # @return [Boolean] true if a new build is needed, false otherwise
    def new_build_needed?
      p "Validating if a new build is needed..."
      last_deployment = last_deployment_date
      current_year = Date.today.year
      new_build_needed = false
      # Initiate the loader for front_matter_parser to allow dates
      loader = FrontMatterParser::Loader::Yaml.new(allowlist_classes: [Date])
      # Articles are sorted per year, in the folder 'content/articles/[YEAR]'
      Dir.glob("#{@tmp_location}/content/articles/#{current_year}/*.md") do |file|
        parsed = FrontMatterParser::Parser.parse_file(file, loader: loader)
        p "Analyzing article #{parsed['title']}"
        # If article explicitly set the publish flag to false, then don't do anything, move on to the next file
        next if parsed['publish'] == false
        # New build is needed if:
        # 1. the article created_at date is in the past AND
        # 2. the last deployment took place before the article created_at date
        new_build_needed = true if parsed['created_at'] > last_deployment && parsed['created_at'] <= Date.today
      end
      p "New build needed: #{new_build_needed}"
      new_build_needed
    end

    # Trigger the webhook from Netlify to start a new build
    def trigger_build
      p "Triggering the build..."
      response = Faraday.post(@netlify_build_hook) do |req|
        req.params['trigger_title'] = "Triggered automatically from Ruby script using webhook"
      end
      # TODO: handle errors in the response
    end

    # Fetch the last date at which a deployment took place
    #
    # @return [Date] last deployment date
    def last_deployment_date
      p "Checking last deployment date..."
      # Connect to Netlify
      netlify_client = Netlify::Client.new(:access_token => @netlify_token)
      # Get the correct site (i.e. jimmybonney.com)
      site = netlify_client.sites.get(@netlify_site_id)
      # The Netlify API sort deploys from most recent to oldest => first element is the most recent deployment
      last_deploy = site.deploys.all.first
      last_deploy_timestamp = last_deploy.attributes[:created_at]
      DateTime.parse(last_deploy_timestamp).to_date
    end
  end
end

require "functions_framework"
require "google/cloud/secret_manager"
require "yaml"
require "./reviewer"

# Use Google Cloud Secret Manager client to decode a secret
#
# @param client [Google::Cloud::SecretManager] the Google Cloud Secret Manager client
# @param secret_name [String] full path of secret to decode]
def extract_secret(client, secret_name)
  secret = client.access_secret_version name: secret_name
  secret.payload.data
end

# Fetch the secret, either from the file system if the secret is mounted as a file,
# or through a secret manager client otherwise
#
# @param secret_file [String] the path to the secret when it is mounted
# @param secret_manager_client [Google::Cloud::SecretManager] secret manager client
# @param secret_arn [String] the full secret identifier, including project number, name and version
# @return [String] the secret
def fetch_secret(secret_file, secret_manager_client, secret_arn)
  return File.read(secret_file) if File.exist?(secret_file)
  extract_secret(secret_manager_client, secret_arn)
end

# Load configuration file .env.yaml
config = YAML::load_file(File.join(__dir__, '.env.yml'))

# Entry point for the Cloud Function
#
# Read the relevant secrets and then initiate and run a Reviewer instance
FunctionsFramework.http "build_scheduler" do |request|

  # In the local environment, the json key should be present to allow us to read secrets from Secret Manager
  # This file is not commited (part of .gitignore, and therefore not sent to GCP either)
  if File.exist?('.credentials/secret_manager_secret_accessor.json')
    # Read the key only if it is not set from the environment already.
    ENV["GOOGLE_APPLICATION_CREDENTIALS"] ||= ".credentials/secret_manager_secret_accessor.json"
  end
  # Initiate the Secret Manager client, either by using the credentials defined above when this is
  # run locally, or the proper credentials will be looked up internally by GCP when this codes run on GCP
  client = Google::Cloud::SecretManager.secret_manager_service

  # Project ID is either read from the environment variable (usually when running inside GCP),
  # or through the config file
  project_id = ENV["GCP_PROJECT"] || config["PROJECT_ID"]

  # Fetch the different secrets needed
  bitbucket_token = fetch_secret(
    '/secrets/BITBUCKET_TOKEN', client, "projects/#{project_id}/secrets/BITBUCKET_TOKEN/versions/latest")
  netlify_token = fetch_secret(
    '/secrets/NETLIFY_TOKEN', client, "projects/#{project_id}/secrets/NETLIFY_TOKEN/versions/latest")
  netlify_site_id = fetch_secret(
    '/secrets/NETLIFY_SITE_ID', client, "projects/#{project_id}/secrets/NETLIFY_SITE_ID/versions/latest")
  netlify_build_hook = fetch_secret(
    '/secrets/NETLIFY_BUILD_HOOK', client, "projects/#{project_id}/secrets/NETLIFY_BUILD_HOOK/versions/latest")

  reviewer = FaasNetlifyBuild::Reviewer.new(
    bitbucket_token: bitbucket_token,
    netlify_token: netlify_token,
    netlify_site_id: netlify_site_id,
    netlify_build_hook: netlify_build_hook,
    config: config
  )
  reviewer.run
end

There are a couple of aspects to consider here:

GCP is making some changes to make it easier to access secrets from within a Cloud Function. However, those changes are in beta currently and therefore I didn’t get it to work 100% as I would like. In the code above, I have included some logic to either read from a secret that is mounted as file or accessed through a Secret Manager client. The client itself is either instantiated using a json key belonging to a service account having the secret accessor role (when this is done locally) or internally within GCP (GCP then discovers the credentials behind the scenes).
There are also some other variables that have been added to a config file, such as GCP Project number. Since I am not sure how secret the project number is, the repo contains an example file to be copied locally instead.

Test and Deploy

Test Cloud Function locally

GCP Cloud Functions comes with a framework allowing to test locally without having to deploy to GCP.

bundle install
bundle exec functions-framework-ruby --target build_scheduler

Simply open a web browser and connect to localhost:8080 by default or from the console curl localhost:8080. If all goes well, then the output should be “No new build was needed…” or “New build was triggered”.

Do note that the script does need internet to run, even for local testing, since it gets the different credentials from Secret Manager, clones the git repo from Bitbucket and fetches deployment data from Netlify.

Deploy to GCP

Once all is well, this can be deployed to GCP

gcloud functions deploy build_scheduler --runtime ruby27 --trigger-http --allow-unauthenticated

As mentioned above, GCP is adding support for secrets so that they can be mounted as files or environment variables and therefore not require a full Secret Manager client. I tried to deploy using the beta version below but didn’t get it to work properly. The command is working when I include a single secret, but not with multiples.

gcloud beta functions deploy build_scheduler --runtime ruby27 --trigger-http --set-secrets /secrets/BITBUCKET_TOKEN=BITBUCKET_TOKEN:latest,/secrets/NETLIFY_TOKEN=NETLIFY_TOKEN:latest,/secrets/NETLIFY_SITE_ID=NETLIFY_SITE_ID:latest,/secrets/NETLIFY_BUILD_HOOK=NETLIFY_BUILD_HOOK:latest

Set up the scheduler

GCP offers Cloud Scheduler that allows to simply set up cron jobs. In this specific case, we can use the scheduler to trigger a http request to the function that we have just deployed.

Note that when we deployed the function in the previous section, we set the flag --allow_unauthenticated which means that the function can be triggered by anyone having the link. We did this to validate that everything works as expected once the function is deployed. This is however probably not needed long term since the scheduler is invoking the function from within GCP: this should allow us to include some authentication easily and restrict access to who can trigger the function.

Next steps

Here are some things that come to mind in terms of improvements:

Auto-deploy the function when the code is pushed into the repository, inspired by this article
Authenticate Cloud Scheduler so that we can remove the public access to the function (see resources below)
Make this solution more generic so that it can be used by others with minimal changes
Reflect about how to interact with secrets

Conclusion

As we have seen, adding the possibility to schedule posts / articles is actually quite easy to put in place. I am conscious that my set-up is probably not the most common: nanoc is not the most used static-site generator, Bitbucket is not the most used git repository, and GCP doesn’t have the same footprint as AWS. All this is probably the reason why I had to deploy my own solution in the first place but hopefully it can help or inspire others having their own exotic set-up. One aspect that I didn’t mention is that this overall setup is probably going to run on the free tier offered by Google, meaning that we are adding this functionality for free. This is a nice bonus.

Everyday Carry (EDC)

2021-08-22T00:00:00Z

While I have always been interested in office material – I remember going through catalogues of pens and paper that my parents brought back home when I was a child / teenager – my interest in organization and “being ready quickly” just went off the charts in the last few years. As usual, turning to the Internet to look into my disease, I learned that there was a name for what I was interested in: Everyday Carry, or EDC in short.

Overview

Looking in more details into this, everyday-carry includes quite a lot, actually a lot more than I will probably ever be interested in. When browsing through websites in the USA, some include guns, knives and different kinds of tactical gear. I am a bit more focused on office EDC, meaning things that I would / might need in an office environment (or on the way to the office). Here are some examples to give you an idea:

Bags
Organizers
Notebooks
Wallets
Key rings
Pens
Watches
Flashlights
Multi tools
Glasses
Electronics
- Phone
- Computer
- Charger(s)
- Cables
- Battery pack
- Headset
- USB key

Most of my specific needs evolve around electronics and how to carry and organize all this in the best way. Let me go through a few items!

Bag / Backpack / Rucksack

First things first, when carrying a large number of items, everything would need to get into a bag. Choices are numerous and I have had quite a few bags across the years. From traditional top-loading backpack, to messenger bag, to portfolio, to “tech” backpack and finally recently clam-shell opening backpack. A couple of years back, I got a bag from Oakley (Motion Tech 2.0 Backpack) that I really enjoyed: slim design, dedicated sleeve for the laptop and tablet / notebook, a few pockets for daily essentials. The main problems that I had with it was that

in occasions, it felt a bit too small as it was hard to stash in rain clothes or my over-the-ear headset;
the top handle of the bag quickly started to fall apart (less than a year after I bought the bag)

Reaching to Oakley to get it repaired only resulted in a discount to buy another bag as the one I had was not produced any longer and they didn’t have a “repair” program. This experience led me to look after goods that were having a better warranty program, if possible a “buy for life” type of warranty, meaning that if something happens I know that I can go back to the manufacturer to get it fixed. As one can guess, there are not too many companies out there that are offering this kind of warranty, but hopefully more and more will do so as consumers start to realize the ecological impact of simply throwing away stuff as soon as something breaks. See the external links section below to get some inspiration.

With all this considered and after spending way too much time looking for the perfect bag™, I ended up ordering a slick version of GORUCK GR1 from Huckberry as I was not too much into the tactical look of the original version with the MOLLE webbing. It comes with a lifetime warranty that I hope I will never need considering the tough construction of the bag. At 21l, it also feels much larger than the Oakley so there is no problem to pack a rain jacket and pants or my headset. While I haven’t been in the office for a while due to covid-19, I used it during the holiday to carry around “my office” and this has been working well. Let’s see how it goes later when commuting again.

Organizers

Previously, when choosing a bag, I always looked at all the internal organization that it was offering. This might be the reason why I never managed to stick to any bag, because as soon as something that I am carrying around would change, then the bag would be less ideal. It would have either too much organization or not enough. Having everything spread out in the bag in the different internal pockets also meant that it was taking time to switch to another bag and not forget anything. This is how I learned that it would be much better to keep the internal organization of the bag separate from the bag layout. Ironically, this separation of concerns concept is a basic concept in software engineering (my daily job)… I guess it is sometimes hard to make the parallel between different domains :-).

One of the main features of the GR1 is the minimal organization that it offers. This means that if you want things to stick together, you’d better have some organization for it. From packing cubes to tech / admin pouches or wash bags, there are plenty of options out there and pretty much for all budgets.

I started with a HP Spectre Folio Pouch that I grabbed on sale. It opens flat for easy access and comes with some webbing and a large mesh pocket inside. I have been pretty satisfied with it but have a bit too much nowadays so I also bought a couple of GORUCK Wire Dopp and I have split the content in between:

Mouse and adapters go in the Folio Pouch;
Cables and charger go into the Wire Dopp.

Notebooks

I used to buy a lot of paper notebooks, but a few years ago I decided to try out a reMarkable paper tablet and since then, I do not go anywhere without it. I have the first version and I really enjoy it a lot. I know that they have made a second version, but this felt like an expensive upgrade for something that was still working perfectly so I am sticking with the one I have.

As a person, I usually like to have things in order and paper and notebooks usually become messy and out of order quickly. The reMarkable allows me to insert pages where I need them and easily sort things how I want. But of course, having this tablet means losing the benefit of pen and paper that does not require any charging. As I am writing this, I am considering buying back a few ruled cahier journals from Moleskine that I used to carry around earlier. They don’t take much space after all.

Wallet

I’ll keep this section short. Sweden is pretty much a cash-free country nowadays so the main things that I need to carry around are plastic cards and the occasional receipts. France had some very peculiar format for their ID card up until the beginning of the month. They decided recently to use a credit card format (like many other countries are already doing) so this means that I might even be able to go one size smaller on my wallet / card holder… except that I can’t because I still have a driving license that is a piece of paper folded in three :-(. So I’ll stick to what I have for now.

Electronics

This is the bulk of what I am actually carrying around, and for which I need all this organization. There is not much to say about this, but here is the list:

Work phone: I like to separate my private and working life, making it easier to disconnect when needed.
Work computer: Again, my private computer stays home and I carry around the work one. Recently got an upgrade to a Macbook Pro 16’’. I usually prefer a more compact format (13 or 14 inches) but like the additional real estate when working from home without an external screen.
Charger: I bought a GaN 100W charger from Hyper on Kickstarter a while ago and this is really convenient to be able to charge up to 4 devices at once (laptop included).
Cables: different mini-USB and USB-C cables in different sizes for the devices mentioned above as well as a short network cable when one needs to connect directly to an outlet / router.
Adapters:
- I have a number of USB-A devices (headset and mouse connectors, USB-keys) and the MBP only comes with USB-C ports, so here we are with small adapters allowing me to connect all those things.
- USB-C to RJ45 Network adapter
Headset: an over-the-ear headset from Jabra with Active Noise Cancellation – particularly helpful when working from home and your neighbor decides it is time to redo the kitchen.
USB keys: a few keys, mainly holding different Linux distro that I tried out or few larger files that need to be shared
Mouse: a Logitech MX Master 3

Misc

As I mentioned above, I usually pack some rain gear – both rain jacket and pants – inside a packing cube from IKEA. The jacket is a simple light-weight one, and the pants have a side opening pretty much all the way up to the waist so that they are easy to take on while keeping my shoes on.

Last Word

EDC encompasses a lot of gear and there is no right or wrong in there, only whatever works for you. The good thing is that it gets you thinking about what are the things that you need (or might need) so that you are ready for situations that life throws at you.

Forms for Static Sites

2021-08-17T00:00:00Z

I am getting more and more interested in static websites as I am following the developments in the JAMSTACK space. I have covered in previous articles some of the benefits of having a static site, such as better performance, easier scaling, cheap hosting to name a few. In this article, I wanted to share a few thoughts based on my latest experimentation and implementation.

I recently helped a family friend to update his company website, a simple site with 5 pages, one of them being a contact page with a form. Since I have been using Netlify for a few years now and the previous version of his site was already hosted there, I decided to use Netlify Forms to manage the contact form. Implementation is pretty straightforward as it only requires adding an attribute (netlify) to the <form> tag to get started. One can then play with some additional options as well to customize it a bit more, redirecting to a specific page when the form is successfully submitted or adding a honeypot to limit spam further. Notifications can be sent to different email addresses when a form is received and entries are saved in Netlify as well.

One limitation that I found there, and that I was not really found of, was the fact that the notification email includes [Netlify] in the subject of the email. This is even added when customizing the notification subject. This is not a deal breaker and there are options to bypass this, such as using zapier to customize notification further and avoid the confusion for the website owner receiving the email. But this experience got me curious and I started to search for “form as a service” options that were available out there.

I was not disappointed! There are quite a few solutions available, here is the top of the iceberg (in no particular order) as I am writing this post:

The features and pricing models are quite different across all those applications: free tier might or might not be available, base pricing is sometimes based on the number of forms, or number of submissions, or a combination of both. In short, I would need to look into more details based on my specific need to see what would be most appropriate and for the specific use case that I was relating above, this is not necessary at this time. But I am quite sure that this will be relevant in a near future so I am keeping this list handy as a starting point.

Favicon Converter and Generator

2021-08-05T00:00:00Z

I took some time recently to help out and redesign a website using Middleman. Considering that this was a simple website with only a few pages, it was a good opportunity to use a tool that I never used before. Once the layout was defined and the content was imported, it was time to create a favicon. I do not have much experience with that so I was browsing / googling around to see how to proceed when I stumbled upon favicon.io.

Favicon.io has been developed by John Sorrentino and is really easy to use. It provides a clean interface to either convert an existing image to a favicon or to generate one from your text or emoji. You then just need to download the resulting assets and update the <head> section to include them properly.

It was so easy to use that I decided that it was time to move away from the generic favicon that my own website was using. As you can see now in your browser, there is a simple one in place using my initials.

Load Disqus Comments on Click

2021-08-03T00:00:00Z

Comments on this website are managed by Disqus. I installed and configured this a long time ago when initially starting the transition to having a static website but still wanting to offer readers the possibility to comments on the articles I published.

While this solution might be convenient for me as a site owner (one click integration with a free tier available), it does come with a number of drawbacks, whether around privacy concerns or page load times. I have the ambition of removing it altogether in the (hopefully near) future but before I do so, I need to find a way to import the existing comments to whatever new system I put in place. Some articles include interesting and valuable input or links in the comments, so this would be a shame to lose them altogether.

I have started to look into the alternatives, and there are plenty of them. Until I find a solution that works well for this simple blog, one thing that I can do to help readers that are not interested in being tracked and / or experience longer load time, is at least make loading comments an explicit activity. Starting from today, Disqus comments will therefore not be loaded automatically on the article pages. Instead, I followed Rahul Arora and require the reader to click on a button to actually load the comments. On top of this, I added some background information linking back to this article if readers would like to understand more.

<div id="disqus_thread">
  <div id="disqus-disclaimer">
    <p>
      For the time being, comments are managed by Disqus, a third-party library. I will eventually replace it with another solution, but the timeline is unclear. Considering the amount of data being loaded, if you would like to view comments or post a comment, click on the button below. For more information about why you see this button, take a look at the following <a href="/articles/load_disqus_comments_on_click/">article</a>.
    </p>
    <button id="disqus-trigger" onclick="load_disqus('jimmybonney')">
      Load Comments
    </button>
  </div>
</div>

function load_disqus( disqus_shortname ) {
  // Prepare the trigger and target
  var disqus_trigger = document.getElementById('disqus-trigger'),
      disqus_target = document.getElementById('disqus_thread'),
      disqus_disclaimer = document.getElementById('disqus-disclaimer'),
      disqus_embed  = document.createElement('script'),
      disqus_hook   = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);

  // Load script asynchronously only when the trigger and target exist
  if( disqus_target && disqus_trigger ) {
    disqus_embed.type = 'text/javascript';
    disqus_embed.async = true;
    disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    disqus_hook.appendChild(disqus_embed);
    disqus_disclaimer.remove();
    console.log('Disqus loaded.');
  }
}

A Word About Performance

As mentioned above, Disqus is known for impacting the load time of a page, adding between 500kB and 1MB of elements to the page. To see what the impact of the change mentioned above would be, I ran a test on PageSpeed Insights before and after introducing this button. Here are the results:

Before

When Disqus is loaded automatically, the total score of my previous article page was 76. It might not be as bad as it looks considering that the first contentful paint was only taking 0.8s but still, a lot of time was spent loading those JS scripts and assets from Disqus making the page not fully interactive before 8.7s.

After

When Disqus is not loaded automatically anymore, the total score jumped to 99 and all metrics are now green. Most of the diagnostics and opportunities have now a medium or low severity.

This of course is just the result of one run of test (so not fully scientific :-)) but the page size is divided by nearly 3 and time to be fully loaded is divided by at least as much. Of course, if you are still interesting in going through the comments or leaving a comment, you’ll need to load of those assets, but this is at least a conscious decision and will not impact your experience until you decide to do so.

Another Start

2021-08-01T00:00:00Z

As I wrote a few months back already, I haven’t been very active around here for a while. With the exception of the article earlier this year, it has been a pause of around 3 years in my writing and publishing. Obviously a lot happened during the last 3 years – both on the personal and professional fronts –, and this is probably the reason why my priorities got shifted a bit but I would like to give this blog a new start and see if I can publish at least once a month in the coming year. Ambitious enough for someone who hasn’t written for a while BUT not too ambitious so that it becomes overwhelming.

I have an old list of topics for which I wanted to write articles about but everything is probably out of date so this really feel like starting from scratch again. In the past years, I manage to read quite a few books on diverse subjects (sleep, devops practices, product management, leadership, entrepreneurship, personal finance, …) and moving forward, I think I’ll share some thoughts on those subjects. This means that the blog might get a bit less technical but let’s see how it turns out.

Removing Google Analytics

2021-04-07T00:00:00Z

It has been a long time since I posted something and it was time for some clean-up, so bye-bye Google Analytics. It was long pending on my to-do list and really quick to remove but life happened in between and it therefore took a long time to get done.

Google Analytics (GA) has long been a default analytics solutions to get information about the number of users who visited a website, how long they interacted, where they are coming from (both geographically and other website referral page), etc. It is a really complete solution and integrates of course really well with the Google ecosystem. The downside of it all is the hidden cost for the audience. While completely free for the website owner, having Google Analytics in place means that users are getting tracked across the web. GA uses cookies to track users and with GDPR in place in EU, this also means that the audience should be informed about such tracking. In addition, considering all the things that GA offers, for such a simple website as mine, this is actually overkill in most cases since the main thing I might be interested in is the page views (i.e. how popular is a given article). For such a limited use of their tool, users visiting the website still needs to load the GA script which is quite large compared to alternative solutions.

At this point in time, I am not installing any other analytics solution. I have identified a couple of alternatives, Plausible and Fathom, that look attractive but I would need to dig more into this. I’ll communicate more about this if / when I put something in place.

In the meantime, enjoy not being tracked when browsing this website :-).

Firefox Warning "Your connection is not secure"

2018-03-18T00:00:00Z

Firefox is my browser of choice currently, mostly due to its philosophy centered around a web accessible to all. I therefore use it as the default browser on all computer, and that includes my working computer. However, at work, I started encountering a rather peculiar issue where Chrome and Edge could access the web without any issue but Firefox would keep on throwing me warning on almost all pages being visited to tell me “ Your connection is not secure”. Solving the issue proved to be quite simple but comes with a risk.

I am not sure why the problem occurred all of a sudden but it might be related to a specific version of Firefox that started to enforce something that was not done previously (as suggested by elliotstarks) or maybe it is simply my employer who updated something on their end. Either way, a lot of pages started to display a message “Your connection is not secure” as illustrated by the screenshot below.

Considering that Edge and Chrome did not have the same problem, it seemed to be related to the way Firefox handles its certificates. Indeed digging a little bit deeper, both Chrome and Edge were looking for certificates information in the same place. However, Firefox had its own certificates store and was not looking for the ones from my employer. Fortunately, Mozilla (the organization between Firefox) is aware of this kind of issue and there is therefore a way to look for certificates in the OS certificate store.

This is done by editing Firefox settings:

In the address bar, type: about:config
Read the warning on the screen and click on “I accept the risk”
Search for security.enterprise_roots.enabled and set the value to true (by double clicking on it)

You should not even need to restart your browser and Firefox is now able to access again the websites as before. There is however one drawback with this method: you are now allowing your web browser to use self-signed certificates of your employer, allowing the company to act like a man in the middle. At the same time, in most countries I believe that employers are allowed to monitor and inspect the traffic going in and out of your computer so as usual, while at work, make sure to do work related activities when navigating the Internet.

Stay safe!

Website Performance Review

2018-03-11T00:00:00Z

As I mentioned in a previous article, this website is purely static and has been so for a while now. However, the site structure and components have not been revisited for a number of years and while it was performing quite well (with a page size well under the current web page average size), a number of things were a bit overkill and unnecessary. As an example, the site was relying on a full fledge front-end component library containing both Javascript and CSS files which were barely used. It was time to perform some clean up activities to identify what was actually used or not to try and see how this could improve the overall website performance.

1. Starting Point

The website is using an old version of INK having both Javascript and CSS components. Using Pingdom, it is quite easy to run an analysis on some pages of the site to get an overview of:

The load time of the page
The page size
The number of requests
Splits of requests by content type and size

Let’s have a look at were we stand on the start page. The page size is only 310kB which is already way under the average page size of the last few years and bulk of the weight is coming from Javascript (41%), fonts (37.3%) and images (15.8%).

When looking at an article page in particular, we can see that the page size is more that doubled (753.9kB) compared to the start page and the number of requests is doubled as well. One interesting aspect which I believe is due to caching on Pingdom servers is that the load time was actually lower this time. Bulk of the content is still coming from Javascript and fonts but this time, CSS represents a bigger share than images.

Following this analysis on two pages, there are already a couple of takeaways:

Reduce the Javascript footprint
Use standard fonts rather than exotic ones
Reduce the CSS footprint

Google Chrome now also comes with an performance auditing tool that can provide some inputs as to what is most critical to address to improve the performance of the site.

2. Performance Improvements

Based on the performance analysis performed above, and as I mentioned in the introduction of this article, it was clear that a review of the front-end component library was due. In my case, I took a rather radical approach to completely remove the framework (INK) in place and decided to go with a small footprint CSS framework instead. The choice of the framework will be discussed in a later article, but for information I went with mini.CSS.

Replacing the framework obviously required some rework on the website but the benefit of having a generated static website is that pages are based on templates and those templates are the only files to be updated. The articles themselves being written in markdown are not impacted by this. In this case as well, I took the liberty to do some cleanup and remove a bunch of unused Javascript files.

The results of these changes are speaking for themselves. As you can see below, the start page has a size that has been divided by 3, weighting less than 100kB currently. The number of requests has been reduced to 12 (from 20) and the biggest content by size is now images (which is more acceptable than having scripts in my case).

The article page also benefits from massive improvements. The page size is being reduced from 753.9kB to 541.1kB, and the number of requests is reduced to 32. What is worrying from this analysis is actually the part that the comment management system (Disqus) represents. After the page is loaded, it is nearly 400kB of data (almost 75% of the overall page). Looks like something might be needed there if we want to improve even further.

The performance audit from Chrome also shows some nice figures. The most important things to fix now seems to be related to images and non-blocking rendering of CSS.

3. Conclusion and Next Steps

Conducting a performance analysis on a website can be done at multiple levels. In this article, we focus on the page size and number of requests which ultimately has an impact on the load time. A number of tools are available to help out in conducting such analysis and while we chose to illustrate our case with Pingdom it might be interesting to cite a couple of other alternatives such as GTMetrix, WebPageTest, PageSpeed or dareboost. Some of the recommendations coming from those tools are of course similar but it is nonetheless interesting to get the reports from all of them because they also offer different focus areas.

As far as this site is concerned, the focus on the CSS framework allowed to drastically reduce the page size, number of requests and load time of the page. There are however still a number of things to accomplish if we would like to improve even more the performances of the site. The next activity will most likely be around grouping together small icons into a sprite so that the number of requests to the server can be reduced. As I highlighted above, I am not particularly impressed either by the footprint of Disqus which means that I will most likely look into another commenting system when time allows. Finally, one of the recommendations from Chrome was to use WebP images and there is some room for improvement as well in the overall CSS file that is being generated. It currently relies on the complete mini.CSS framework but a large number of classes and elements are actually not used on the site and could therefore be filtered out. Focusing on performance is a never ending story but we are now in a much better place than we have been for years.