This code:

  created: function () {
    fetch(url)
    .then(
      function(response) {
          response.json().then(function(data) {
            app.data = data;
            app.dataAvailable = true;
          });
      }
    ).catch((error) => {
      console.error('Error:', error);
    });
  },

Instead, I'll write a "service", or at least something that looks like it. So I'll put this in a separate "services.js" file:

let url = 'https://spreadsheets.google.com/feeds/cells/16hJ_67ox89L3DuVuc8KWAGMYFwb58rVP2fjCkc2AoGE/1/public/full?alt=json';

let edriveDataService = (function () {
    let fetchData = function (callback) {
        fetch(url)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                callback(data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });;
    };

    return {
        fetchData: fetchData
    };
}());

Then I can use it, like so:

  created: function () {
    edriveDataService.fetchData(function (data) {
      app.data = data;
      app.dataAvailable = true;
    });
  },

That moves some plumbing (the .json() call, the chaining of the .then's) out of the main code.

Conclusion

I moved the code to fetch data into it's own class.

Next up, I will finally start doing some analysis on the data!

I would like to use Vue's component abilities to make that table a component. The goal is then to extend the app with various components that make up the whole site.

Organizing the code

To keep it simple, for now, I will put my components straight into the app.js file.

In the future, I could consider putting them in a components.js file, putting each component in its own file or use something like webpack that adds a "compile" step to my process.

Creating a basic Component in Vue.js

I add this to app.js:

Vue.component('trip-overview', {
  data: function () {
    return {
      message: "Hello world!"
    }
  },
  template: '<div>{{ message }}</div>'
});

And in index.html:

<div id="app">
  <trip-overview></trip-overview>
  ...
</div>

This will show the div from the template of the component, with the appropriate message.

Bind some data into the Component

I can change my component and add a "prop":

Vue.component('trip-overview', {
  props: ['rows'],
  template: '<div>{{ rows }}</div>'
});

Here, I just expect as the value of rows all the rows, as returned by getRows

I can bind that via the html declaration:

<trip-overview v-if="dataAvailable" v-bind:rows="getRows()"></trip-overview>

Note that I use v-if to make sure the component is only rendered AFTER the data is loaded.

If I run getRows before that, at the moment the data is not available. That function will fail. This also shows that if you exclude a component with v-if is will not only hide it, but also not try to render it or run its lifecycle.

The above code will just dump the JSON data on the page, but it shows I have the data available in the component:

Copy the table into the component

The component code now looks as follows:

Vue.component('trip-overview', {
  props: ['rows'],
  template: `
  <table class="pure-table">
    <thead>
      <tr v-for="row in rows.slice(0,1)">
        <th v-if="row.cells[0].row == 1" v-for="cell in row.cells">
          {{ cell.inputValue }}
        </th>
        <td v-if="row.cells[0].row > 1" v-for="cell in row.cells">
          {{ cell.inputValue }}
        </td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows.slice(1)">
        <th v-if="row.cells[0].row == 1" v-for="cell in row.cells">
          {{ cell.inputValue }}
        </th>
        <td v-if="row.cells[0].row > 1" v-for="cell in row.cells">
          {{ cell.inputValue }}
        </td>
      </tr>
    </tbody>
  </table>
  `
});

Note the use of backticks to surround the code. This is mostly to include newlines in the variable.

Also notice I changed the getRows() call to rows. This also means I did an optimization, since now getRows() is called only once instead of twice.

Now I can replace the whole <table> element in my html with my component. Resulting in the following:

  <div id="app">
    Data available: {{ dataAvailable }}
    
    <trip-overview v-if="dataAvailable" v-bind:rows="getRows()"></trip-overview>
  </div>

Nothing has changed to the final result, but the index.html looks cleaner again and I have a re-usable component to show a table listing a number of trip entries.

If I would choose to show a second table, maybe with a list showing only trips of > 50 km I could add a second trip-overview element. For example:

  <div id="app">
    Data available: {{ dataAvailable }}
    
    <trip-overview v-if="dataAvailable" v-bind:rows="getRows()"></trip-overview>
    <trip-overview v-if="dataAvailable" v-bind:rows="getFilteredRows()"></trip-overview>
  </div>

Conclusion

Using components allows me to build the page up out of smaller re-usable building blocks. You can also use components inside other components and build up the complexity like that.

It automatically already gave me an optimization in efficiency. And I'm now set to add more components.

Next up, I will be having a look at organizing the data my components will be showing to the user. I don't want to have the logic of calculating stats, grouping things etc ... in my components. So I'll do that elsewhere.

"Pure CSS" is, according to them, a "set of small, responsive CSS modules that you can use in every web project."

The responsive part means it should include the things necessary to adjust to different screen sizes. Also they are small but look nice!

Adding Pure CSS

That's one line in the html's <head>:

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous">

Styling the table

Add the class "pure-table" to the table tag:

      <table class="pure-table">
          ...
      </table>

The table now looks like this:

To show the headers as actual headers, I must change the table rendering a little.

      <table class="pure-table">
        <thead>
          <tr v-for="row in getRows().slice(0,1)">
            <th v-if="row.cells[0].row == 1" v-for="cell in row.cells">
              {{ cell.inputValue }}
            </th>
            <td v-if="row.cells[0].row > 1" v-for="cell in row.cells">
              {{ cell.inputValue }}
            </td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in getRows().slice(1)">
            <th v-if="row.cells[0].row == 1" v-for="cell in row.cells">
              {{ cell.inputValue }}
            </th>
            <td v-if="row.cells[0].row > 1" v-for="cell in row.cells">
              {{ cell.inputValue }}
            </td>
          </tr>
        </tbody>
      </table>

This is not idea, since I'm calling the getRows function twice. But I will change this later so for now it's OK.

The result looks like this:

Conclusion

The web app isn't amazing yet. But at least I have a UI framework in place, as well as some styling built-in.

Next up will be to better organize things, using vue components and a dedicated class that will take care of parsing the data received from Google Sheets.

I've had some good experiences with vue.js in the past: it's easy to get started without much fuss, but broadly used and well supported.

As the most basic feature of my web app, I just want to show the data that I receive from the Sheet.

Load Vue.js

But to do that, I already want to get my UI framework in place, so that I can continue extending the app from there.

Add Vue.js as a reference

Checkout the Getting Started guide for vue.js if you're going to use it.

For now, I'll add this to my index.html head:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Create the Vue App

To make sure everything is loaded, I will follow the getting started guide to add a message, in index.html:

<body>
  <div id="app">
    {{ message }}
  </div>
</body>

And in js/app.js:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Note: for this to work I had to move the <script> tag to include my js/app.js to the bottom of the <body> tag

In summary, index.html:

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
  
  <script src="js/app.js"></script>
</body>
</html>

And js/app.js:

let url = 'https://spreadsheets.google.com/feeds/cells/16hJ_67ox89L3DuVuc8KWAGMYFwb58rVP2fjCkc2AoGE/1/public/full?alt=json';

fetch(url)
  .then(
    function(response) {
        response.json().then(function(data) {
          console.log(data);
        });
    }
  );

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Load data when Vue JS app loads

Currently, I fetch the data and only write it to the console.

What I want is to tell the vue app to load the data, and once it's loaded make it available to views inside the vue app.

Remember I'm making this app as a prototype. I may not be using vue in the ideal manner. Just a way to get it going. I may change this later.

What I can do is:

• Add a flag to the app data indicating if the data is available or not
• On the "created" hook of the app, actually load the data

I can do this as follows in the app:

// ...
var app = new Vue({
  el: '#app',
  data: {
    dataAvailable: false,
    data: {}
  },
  created: function () {
    fetch(url)
    .then(
      function(response) {
          response.json().then(function(data) {
            app.data = data;
            app.dataAvailable = true;
          });
      }
    ).catch((error) => {
      console.error('Error:', error);
    });
  }
});

Note, I replace the message from the original with my new variables: dataAvailable and data.

I can change my html as follows:

  <div id="app">
    Data available: {{ dataAvailable }}
    <div v-if="dataAvailable">
      HERE COMES THE LIST!
    </div>
  </div>

Now I have a page that indicates "loading: false" as soon as it's loading, and "loading: true" as soon as the data is available.

The second div is only rendered when the data is available. The plan is to put some markup in there to actually list the values in a table.

Show a list with vue

The data structure coming from the Sheet offers a property .feed.entry which is the array of cells with data.

It's a little annoying that the things are structured in a flat list of cells. So I'm adding a method to my app that will restructure the data as a list of rows:

var app = new Vue({
// ...
  methods: {
    getRows: function () {
      // group by row
      let rows = app.data.feed.entry.reduce((acc, reducer) => {
        let row = acc[reducer.gs$cell.row - 1] || { row: reducer.gs$cell.row, cells: [] };
        row.cells.push(reducer.gs$cell);
        acc[reducer.gs$cell.row - 1] = row;
        return acc;
      }, []);
      
      return rows;
    }
  }
});

The reduce call is used to group by row. It's not the most elegant implementation, but the result is an array of two rows, each with 14 cells.

I can now continue to render an HTML table based on the data:

  <div id="app">
    Data available: {{ dataAvailable }}
    <div v-if="dataAvailable">
      <table>
        <tr v-for="row in getRows()">
          <td v-for="cell in row.cells">
            {{ cell.inputValue }}
          </td>
        </tr>
      </table>
    </div>
  </div>

It looks ugly, but that displays my data on screen:

Conclusion

Here I added vue js to my app. This will allow me to more easily drive my UI from the data in my app.

I now have a vue app that, when available, shows the loaded data from the Google Sheet as an html table on the page.

Next up is adding something to make the page look better, without doing too much design / css work.

I'm going to build a web application with the following characteristics:

• Driven by data from a Google Spreadsheet
• Running with HTML, CSS and JavaScript
• No server-side technology, except for a webserver serving static HTML, CSS and JavaScript

Why do I want this? It avoids a lot of complications and boiler plating, but it's also lots of fun. Furthermore, the hosting I have is getting a little low on resources.

The Motivation

I like to have some insight in data, in the form of stats. For some reason, that is pleasant to me.

If all goes well, I will soon be driving an electric car and I'd like to see some details. What are the average trips, how fast does the battery discharge in various circumstances, etc etc ...

There's probably stuff for that around, but it's fun to be free in whatever you want to learn.

The Plan

First of all I want a Google Spreadsheet with data of each trip. Date, time, outside temperature, total km, use of highway, use of airco, ...

Secondly, I want a webpage where I can see whatever analysis I feel like doing.

For that second part, I'd like to do everything in HTML/CSS/JavaScript that fetches and parses the data from Google directly.

As far as the back-end is concerned, all I need is a web server that can serve static HTML, CSS and JavaScript files.

Given my scenario, this seems reasonable. I don't require complex data storage (databases), user management (logins), content creation, ... all I need to do is show some data.

But I wonder if not having a back-end at all is an advantage or disadvantage. I made a similar app before, for our office foosball stats - but that one had a little bit of back-end code.

Why Google Sheets?

• I don't have to worry about setting up and running a Database
• I don't have to create data entry forms
• I don't have to worry about authentication / authorization (google does it for me!)

In general, it's less stuff to think about.

First Steps: Setting up the Spreadsheet

Create the Sheet

• Login to Google Sheets
• Create a new Sheet
• On the first row, put the column headers
• Add some data

In my case, I will be having the following columns for now:

• Date
• Start time
• Start km
• Start charge
• Start temp
• End time
• End km
• End charge
• POB (people on board)
• Eco-mode?
• B-mode?
• Airco?
• Highway?

Publish the Google Sheet as JSON

Google sheets allows you to publish the sheet and consume the data - without authentication - as JSON.

Here's a good post on how to set it up:

• How to use Google Sheets as a JSON endpoint (freecodecamp.org)

I don't feel like reproducing that post, so please check it out. I made sure it's on archive.org if the link dies.

Bottom line, here's my JSON endpoint:

• https://spreadsheets.google.com/feeds/cells/16hJ_67ox89L3DuVuc8KWAGMYFwb58rVP2fjCkc2AoGE/1/public/full?alt=json

First Steps: Loading the JSON in a webpage

For the UI, I will have to use some third party tools. Something like bootstrap for the looks, and something like Vue.js for hooking up the data to the UI.

For now, all I care about is an index.html that's able to load the data. To load the data, I use the "fetch API": fetch

I have one HTML file:

<html>
<head>
  <script src="js/app.js"></script>
</head>

<body>

</body>
</html>

And one js/app.js file:

let url = 'https://spreadsheets.google.com/feeds/cells/16hJ_67ox89L3DuVuc8KWAGMYFwb58rVP2fjCkc2AoGE/1/public/full?alt=json';

fetch(url)
  .then(
    function(response) {
        response.json().then(function(data) {
          console.log(data);
        });
    }
  );
 
document.write('Hello world!');

All it does is load the data and log it to the console. I also write "Hello world!" to the screen. If I see that then I know the JavaScript hasn't failed.

First Steps: Storing the code

To make it easy to load the code, and update it, I will put it all in a GitHub project.

On the webserver I can then just do a git pull to update the app.

I add the two files, but use the following folder structure:

• html/index.html
• html/js/app.js

Commit and push:

• https://github.com/AaronLenoir/edrive

First Steps: Hosting

I already have hosting set up for this blog, my second blog and some additional apps. Each website is running in a docker container and gets its own hostname under aaronlenoir.com.

To host this, it's enough to set up an nginx server and point it to the html folder of the repo. Setting that up happens in the docker-compose configuration.

Not going into the full details, this is what I have to add:

  edrive:
    image: nginx:alpine
    restart: always
    depends_on:
      - "nginx-proxy"
    ports:
      - 127.0.0.1:8140:80
    volumes:
      - ./edrive/html:/usr/share/nginx/html:ro
    environment:
      - url=https://edrive.aaronlenoir.com
      - VIRTUAL_HOST=edrive.aaronlenoir.com
      - LETSENCRYPT_HOST=edrive.aaronlenoir.com
      - LETSENCRYPT_EMAIL=info@aaronlenoir.com

This ensures that all requests for the domain "edrive.aaronlenoir.com" are passed to my new nginx instance.

The server is serving all files in the folder ./edrive/html and its sub-folders.

Also notice the two LETSENCRYPT environment variables. These are used by the nginx-proxy-companion docker container to fetch an SSL certificate from Let's Encrypt.

I also had to add an A-record to my DNS, which I do via Namecheap:

Conclusion

I've set up the base to start working, iteratively, on my simple stats apps for my car data:

• https://edrive.aaronlenoir.com

Using Google Sheets is a way of getting some data to your web application, without having to worry about: data entry, authentication, storage, back-end hosting, ...

Hosting requirements are limited to hosting static files. I can even run the app directly from my local disk.

I can push a change to github, and pull from there to update the app, wherever it's running.

Now to actually parse some data ...

I thought I'd write down how I did it.

Getting the Data

Have a look at my previous blog post to find out how I record the GPX track and get the data into JavaScript.

For this post, it's enough to know I end up with a parsed GPX structure:

  let gpx = new gpxParser();
  gpx.parse(gpxData);
  drawAltitudeChart(gpx.tracks[0]);

The "magic" happens in the drawAltitudeChart function. Although the real magic actually happens in the HighCharts component.

Embedding HighCharts

To show the graphs, I use a third party javascript component HighCharts, which is free for non-profit and personal use.

Before we look at the details of drawAltitudeChart, which prepares the gpx data for the altitude profile, here's how to load up HighCharts:

Load the appropriate JavaScript:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Add a div as a place-holder for where the chart must appear:

<div class="chart" id="altitude"></div>

Preparing the Data

The first thing drawAltitudeChart is take the data from the gpx track and restructure it in a way that makes sense for the altitude chart.

What I need for that chart is a series of timepoints and the altitude at that time:

let dataPoints = track.points.filter(p => p.time !== null).map(p => [p.time, p.ele * 3.28084]);

I use some fancy JavaScript stuff like filter and map. filter is a function that can be executed on an array and will return a new array with only the items for which the given condition is true.

In my case I'm looking for points that have a time filled in. Because I noticed this happened sometimes.

With map I transform each element in the array of points into a new element - in my case a second array of a time and an elevation.

I multiply with 3.28084 because I want the altitude in ft (feet) and the gpx track has the altitude in meter. 1 meter is 3.28084 ft.

Showing the Chart

With the array of time-altitude pairs, the chart can be loaded. HighCharts offers many options, so it was quite the setup in the end.

Highcharts.chart('altitude', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'Altitude (ft)'
    },
    subtitle: {
        text: 'Altitude en route'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Altitude (ft)'
        }
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b %H:%M}: {point.y:.2f} ft'
    },

    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },

    colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

    series: [{
        name: "Altitude (ft)",
        data: dataPoints
    }],

    time: { useUTC: false }
});

There are several types of charts, I like the look of the area chart.

chart: {
    type: 'area'
},

The x-axis in my chart represents time, the object in javascript is of type Date, which HighCharts can understand if the x-axis type is datetime

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
        month: '%e. %b',
        year: '%b'
    },
    title: {
        text: 'Date'
    }
},

With the plot options it's possible to specify the line chart should show a spline, which smooths the segments between data points.

plotOptions: {
    spline: {
        marker: {
            enabled: true
        }
    }
},

The colours for the chart I kept fairly standard.

colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

Here's where I actually load in my data points. I also give the chart a name here. It's possible to load more than one series.

series: [{
    name: "Altitude (ft)",
    data: dataPoints
}],

This time setting was important because by default HighCharts shows the time in UTC. Which is not as interesting in my case.

time: { useUTC: false }

Conclusion

If you have a series of time-value pairs, you can use HighCharts to plot these in a chart, with a small amount of configuration.

HighCharts is free to use for non-profit and personal use.

To switch hostnames, it should be fairly easy. Here's the two entries that need changing in docker-compose.yml

  ...
  ghost:
    image: ghost:1-alpine
    restart: always
    depends_on:
      - "nginx-proxy"
    ports:
      - 127.0.0.1:8080:2368
    volumes:
      - ./blog/data/ghost:/var/lib/ghost/content
    environment:
      - url=https://blog.aaronlenoir.com
      - VIRTUAL_HOST=blog.aaronlenoir.com
      - LETSENCRYPT_HOST=blog.aaronlenoir.com
      - LETSENCRYPT_EMAIL=info@aaronlenoir.com
 ...
   ghost2:
    image: ghost:2-alpine
    restart: always
    depends_on:
      - "nginx-proxy"
    ports:
      - 127.0.0.1:8120:2368
    volumes:
      - ./blog2/data/ghost:/var/lib/ghost/content
    environment:
      - url=https://blog-test.aaronlenoir.com
      - VIRTUAL_HOST=blog-test.aaronlenoir.com
      - LETSENCRYPT_HOST=blog-test.aaronlenoir.com
      - LETSENCRYPT_EMAIL=info@aaronlenoir.com

For reference, I will keep the old blog around for a bit on the blog-test URL.

Here's the new configuration:

...
  ghost:
    image: ghost:1-alpine
    restart: always
    depends_on:
      - "nginx-proxy"
    ports:
      - 127.0.0.1:8080:2368
    volumes:
      - ./blog/data/ghost:/var/lib/ghost/content
    environment:
      - url=https://blog-test.aaronlenoir.com
      - VIRTUAL_HOST=blog-test.aaronlenoir.com
      - LETSENCRYPT_HOST=blog-test.aaronlenoir.com
      - LETSENCRYPT_EMAIL=info@aaronlenoir.com
 ...
   ghost2:
    image: ghost:2-alpine
    restart: always
    depends_on:
      - "nginx-proxy"
    ports:
      - 127.0.0.1:8120:2368
    volumes:
      - ./blog2/data/ghost:/var/lib/ghost/content
    environment:
      - url=https://blog.aaronlenoir.com
      - VIRTUAL_HOST=blog.aaronlenoir.com
      - LETSENCRYPT_HOST=blog.aaronlenoir.com
      - LETSENCRYPT_EMAIL=info@aaronlenoir.com

Conclusion

If you are reading this post, everything worked out! Phew!

For my blog I use a slightly customized version of the default Casper theme.

Mostly because I include "disqus" comments at the bottom of the posts (comments are not supported by Ghost itself).

What I did to update my custom theme:

• Create and switch to a new branch: ghost-2
• Use git fetch upstream to get the latest branches from the original repo
• Use git merge upstream/master to merge the original master into my branch

This will make sure I have the latest updates from Ghost's default theme, as well as my changes.

I did have a small conflict on the line where I removed the "feedly.com" link in the RSS feed link.

After having done that, I cloned the repo into blog2/data/ghost/themes/casper-custom.

After doing that and restarting the blog, I could select the custom theme via the Design settings in Ghost.

Reloading everything, it turned out my comments were already working correctly on the new blog too!

Having done that, I think everything is ready to switch to the new version of the blog.

In Ghost blog, I tried to export this current blog - as json - and import it to the new blog.

However, I received the error:

Import failed
Request is larger than the maximum file size the server allows

Looking at the server's response it was:

413 Request Entity Too Large
nginx/1.17.3

So my nginx proxy refuses to process a file this big in the upload.

nginx.config per domain

With the nginx-proxy docker image, there's a way to create hostname specific configurations:

I have mapped the folder ./nginx/vhost.d to /etc/nginx/vhost.d inside the container.

In that folder I can create a file named after the hostname. In this case:

blog-test.aaronlenoir.com

Configure entity size

According to this website I must add a client_max_body_size setting to the ´http´, ´server´ or ´location´ context.

In my case, the config files are by default in the location context so I can add a line:

client_max_body_size 2M;

The file is about 1.6M so this should be enough.

Restart nginx

To restart I take down all the containers using docker-compose:

sudo docker-compose down

And I restart it back in "background mode" (-d):

sudo docker-compose up -d

If there are no errors with my config, the nginx docker container will be up and running quickly, otherwise it'll probably bail out and I will have to look at the docker-compose output.

Luckily, everything started up without a hitch!

Import Warnings

After this change, I was able to import all posts.

There were a few warnings:

• User: Entry was imported, but we were not able to resolve the following user references: created_by, updated_by. The user does not exist, fallback to owner user.
• User: Entry was not imported and ignored. Detected duplicated entry.
• Settings: Theme not imported, please upload in Settings - Design
• Settings: Permalink Setting was removed. Please configure permalinks in your routes.yaml.

Only the last one, I think, will require some looking into.

Permalinks

On my blog, I enable permalinks. This adds a date to the URL. Apparently, according to the warning, I should use routes.yaml for this.

In the "Labs" section of ghost I can upload a routes configuration file. But I'm not sure what I should put in the file.

The default, according to the Ghost 2 docs, looks like this:

routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

My current blog posts have a URL in the form of:

https://blog.aaronlenoir.com/<YYYY>/<MM>/<DD>/<POST_TITLE>

This post on Some Dude's Tech Blog already details how to do this.

The permalink line needs updating to /{year}/{month}/{day}/{slug}/:

routes:

collections:
  /:
    permalink: /{year}/{month}/{day}/{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

So I put this in a routes.yaml file and upload it ... this did the trick.

Checking on the server, the file is stored in: data/ghost/settings.

It may seem unimportant, but when I add a third party comment app to my blog, the comments from the old blog will still be there if the URL of the posts remains the same.

Images

The json that exports my posts does not include images.

For this, I must copy the "images" folder from my original blog to the new one. The images folder can be found in data/ghost/images

Since both are on the same server, I could do this in a single command:

cp -a ~/aaronlenoir.com/blog/data/ghost/images ~/aaronlenoir.com/blog2/data/ghost

Conclusion

In this post I wanted to import my existing posts in a blog running on Ghost 1.25.7 to a new blog running on Ghost 2.

I exported my posts using the Labs section in the Administration section.

That gave me a 1.6 MB JSON file which I could not upload because nginx limited the upload size. I changed the setting client_max_body_size to be 2M, which allowed me to import the posts.

Secondly, I made sure the URL's to the posts remained the same by restoring the "permalink" setting that includes the date in my posts.

Finally, I copied over all images from my old posts, which were not included in the export.

I had some other warnings during the import. They were not so important: couldn't find an old author and a duplicated entry. Finally, it complained it could not find my custom theme. But that's for next time.

In this post, I documents the steps I take to add a new website to aaronlenoir.com using Digital Ocean and docker.

I think I'd like to upgrade my blogs to blog engine Ghost 2 (I'm using version 1 now).

It's quite the update, so first I want to run a new instance on the side to see how it works.

I will be adding, as a test, blog-test.aaronlenoir.com.

Update: I though this would be a simple ten minute task, but Ghost 2 is giving me problems

Current Setup

At the moment, I'm hosting four websites.

Two Ghost 1 blogs:

• blog.aaronlenoir.com
• flightschool.aaronlenoir.com

Two home-made .NET Core applications:

• tracks.aaronlenoir.com
• kicker.aaronlenoir.com

All of them run on a single Digital Ocean "droplet" (a Virtual Private Server or VPS).

In front of them is an nginx instance configured as a reverse proxy. Nginx is responsible for redirecting requests to the appropriate application, which are not exposed to the internet directly. Additionally nginx takes care of the SSL certificates.

All 4 applications and nginx run as a docker container. Additionally, I run a sixth docker contain responsible for renewing my SSL certificates for each of the hostnames.

To manage the configuration of each container, I use "docker-compose". The docker-compose configuration can be found on GitHub: https://github.com/AaronLenoir/aaronlenoir.com/blob/a059df908ddbccc6147ea064a2fdf55ae2296669/docker-compose.yml

In summary I run 6 docker containers that do all the work. To add a new website I must add another container and associate it with a new hostname so that nginx can forward the requests correctly.

Step 1: Run Ghost 2 via docker-compose

I log into my VPS using SSH. It's a UNIX system (I know this).

Ghost says they don't offer an "official" docker image to run the blog. But they do point to an "unofficial" one: https://hub.docker.com/_/ghost/.

Interestingly, the docker page says it's the Official image. So maybe the ghost FAQ is a little outdated and it IS official now.

According to the docs, to run a ghost image on the default port I must run the following:

$ docker run -d --name some-ghost ghost

I COULD do that, but I wouldn't be able to test it. So I'm going to immediatly put it in my docker-compose.yml file:

  ghost2:
    image: ghost:2-alpine
    restart: always
    depends_on:
      - "nginx-proxy"
    ports:
      - 127.0.0.1:8120:2368
    volumes:
      - ./blog2/data/ghost:/var/lib/ghost/content
    environment:
      - url=https://blog-test.aaronlenoir.com
      - VIRTUAL_HOST=blog-test.aaronlenoir.com
      - LETSENCRYPT_HOST=blog-test.aaronlenoir.com
      - LETSENCRYPT_EMAIL=info@aaronlenoir.com

ghost2 is the name of the container.

image indicates I wish to use the latest 2.x version. I use alpine because of the lower footprint and it worked well with version 1.

restart is set to always that way I'm sure if it's stopped correctly via docker that it gets restarted. I can still stop it using docker-compose.

depends-on specifies the nginx-proxy must be running before this container can start up.

ports means internally ghost runs on port 2368 (the default) but the container should listen on port 8120 externally.

volumes points to the location on my server where all the files should be (theme, images hosted on the blog, logs, database, ...). The first part is the location on my server, the second part is the location inside the container to which it should map. I'm assuming ghost 2 still expects the data in /var/lib/ghost/content

environment sets a number of environment variables in the container:

• url the URL to use for the blog - may not be necessary for ghost 2
• VIRTUAL_HOST is used for the nginx-proxy to know that requests for that hostname must go to this container
• LETSENCRYPT_HOST tells the let's encrypt container the hostname for which it must fetch a certificate
• LETSENCRYPT_EMAIL is passed to Let's Encrypt when I'm asking a new certificate, they use that to send me mails about the certificate expiration (but I renew automatically - normally)

After adding this to my docker-compose.yml file I restart everything. Which results in the download of the image:

Creating network "aaronlenoircom_default" with the default driver
Pulling ghost2 (ghost:2-alpine)...
2-alpine: Pulling from library/ghost
e7c96db7181b: Pull complete
50958466d97a: Pull complete
56174ae7ed1d: Pull complete
284842a36c0d: Pull complete
237455e2fb15: Pull complete
e9505cbbbd44: Pull complete
711e6ff570b7: Extracting [====================================>              ]  4.522MB/6.145MBownload complete
 65.56MB/68.44MBwnload complete
    548B/548B

After that the following message indicates at least something started:

Creating aaronlenoircom_ghost2_1               ... done

Step 2: Testing

To test, I usually tell my local machine to resolve the test hostname to the IP address of my VPS.

In windows, that's done by editing the file C:\Windows\Systems32\drivers\etc\hosts

I add the following entry:

82.196.2.207	blog-test.aaronlenoir.com

With that I entered the url in my browser. This immediatly gives me an error because I don't yet have an SSL certificate. This is normal because Let's Encrypt won't yet know of the hostname.

Of course I can tell Firefox to "accept the risk and continue", because I know what this site is.

Sadly, I'm greeted by a server error:

500 Internal Server Error
nginx/1.17.3

Step 2.1: Troubleshooting

TL;DR This troubleshooting session goes through a lot of useless stuff that eventually turned out not to be important. You could skip to Step 3 ...

Since the error is coming from nginx, I'm assuming the nginx proxy server wasn't able to forward my request. I presume this is because the ghost container couldn't start correctly.

Docker-Compose logs

To check this, I usually run docker-compose in interactive mode, so that I can see what happens in each of the containers:

sudo docker-compose up

Strangely it looks like ghost 2 is running. This was the only logging I could find at start-up:

ghost2_1                | [2019-09-28 22:12:11] INFO Ghost is running in production...
ghost2_1                | [2019-09-28 22:12:11] INFO Your site is now available on https://blog-test.aaronlenoir.com/
ghost2_1                | [2019-09-28 22:12:11] INFO Ctrl+C to shut down
ghost2_1                | [2019-09-28 22:12:11] INFO Ghost boot 25.093s

When I visit the site, the logging tells me, not as much as I was hoping for:

nginx-proxy_1           | nginx.1    | blog-test.aaronlenoir.com 84.192.158.84 - - [28/Sep/2019:22:15:11 +0000] "GET / HTTP/2.0" 500 177 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0"

Ghost Logs

I did remember pointing to a data directory that doesn't yet exist: blog2/data/ghost

It was created and it did generate some logs in the folder: /blog2/data/ghost/logs

In the logs, there are no errors and I can see it created the database correctly:

{"name":"Log","hostname":"ec4432e19f48","pid":1,"level":30,"msg":"Ghost is running in production...","time":"2019-09-28T22:04:14.110Z","v":0}
{"name":"Log","hostname":"ec4432e19f48","pid":1,"level":30,"msg":"Your site is now available on https://blog-test.aaronlenoir.com/","time":"2019-09-28T22:04:14.112Z","v":0}
{"name":"Log","hostname":"ec4432e19f48","pid":1,"level":30,"msg":"Ctrl+C to shut down","time":"2019-09-28T22:04:14.114Z","v":0}
{"name":"Log","hostname":"ec4432e19f48","pid":1,"level":30,"msg":"Ghost boot 33.975s","time":"2019-09-28T22:04:14.117Z","v":0}

So everything looks hunky-dory. Then why is nginx giving me a 500?!

Shell into nginx

I can attach a console to the running nginx proxy server:

Use docker ps to find the container name:

user@docker:~/aaronlenoir.com$ sudo docker ps
CONTAINER ID        IMAGE                                    COMMAND                                                                                      CREATED             STATUS              PORTS                                                                                                          NAMES
8c2683b52ce0        jrcs/letsencrypt-nginx-proxy-companion   "/bin/bash /app/ent                                                                    r…"   16 minutes ago      Up 2 minutes                                                                                                                       aaronlenoircom_nginx-proxy-companon_1
5c899f091de8        ghost:1-alpine                           "docker-entrypoint.                                                                    s…"   16 minutes ago      Up 2 minutes        127.0.0.1:8090->2368/tcp                                                                                       aaronlenoircom_flightschool_1
023f4d1bed3f        ghost:2-alpine                           "docker-entrypoint.                                                                    s…"   16 minutes ago      Up 2 minutes        127.0.0.1:8120->2368/tcp                                                                                       aaronlenoircom_ghost2_1
0448fff371fe        kicker                                   "dotnet Kicker.Stat                                                                    s…"   16 minutes ago      Up 2 minutes        127.0.0.1:8100->80/tcp                                                                                         aaronlenoircom_kicker_1
9200cd720030        tracks                                   "dotnet Mapper.dll"                                                                          16 minutes ago      Up 2 minutes        127.0.0.1:8110->80/tcp                                                                                         aaronlenoircom_tracks_1
eb8844ca3d79        ghost:1-alpine                           "docker-entrypoint.                                                                    s…"   16 minutes ago      Up 2 minutes        127.0.0.1:8080->2368/tcp                                                                                       aaronlenoircom_ghost_1
411b175ed115        jwilder/nginx-proxy                      "/app/docker-entryp                                                                    o…"   16 minutes ago      Up 2 minutes        0.0.0.0:80->80/tcp, 0.0.0.0:443->4                                                                    43/tcp   aaronlenoircom_nginx-proxy_1

It seems to be aaronlenoircom_nginx-proxy_1. Then I must execute bash to get a shell in the running container:

user@docker:~/aaronlenoir.com$ sudo docker exec -it aaronlenoircom_nginx-proxy_1 /bin/bash
root@411b175ed115:/app#

Being in the shell I can see if nginx decided to log anything. But where?

In /etc/nginx/nginx.conf the location of the logs is mentioned:

error_log  /var/log/nginx/error.log warn;

However, the file itself points to /dev/stderr so I think I would've seen something in the docker-compose test run. So no luck there!

Shell into ghost

I can do the same with ghost though:

user@docker:~/aaronlenoir.com$ sudo docker exec -it aaronlenoircom_ghost2_1 /bin/bash
bash-4.4#

Looking at netstat I can see it is in fact running and listening on port 2368.

bash-4.4# netstat -an
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State
tcp        0      0 0.0.0.0:2368            0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.11:43769        0.0.0.0:*               LISTEN
udp        0      0 127.0.0.11:44987        0.0.0.0:*
Active UNIX domain sockets (servers and established)
Proto RefCnt Flags       Type       State         I-Node Path

Log files? No we already checked that!?

Wget from the host

Normally, nginx sends a request to the port 8120. So I can do that too, from the VPS. And that yeilds some more information!

user@docker:~/aaronlenoir.com$ wget localhost:8120
--2019-09-28 22:44:35--  http://localhost:8120/
Resolving localhost (localhost)... 127.0.0.1
Connecting to localhost (localhost)|127.0.0.1|:8120... connected.
HTTP request sent, awaiting response... 301 Moved Permanently
Location: https://localhost:8120/ [following]
--2019-09-28 22:44:35--  https://localhost:8120/
Connecting to localhost (localhost)|127.0.0.1|:8120... connected.
OpenSSL: error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol
Unable to establish SSL connection.

What we see is that ghost sees my request, but tells me to come back via "https". Since I did not configure https this - of course - won't work.

Since nginx takes care of this, the internal applications shouldn't be doing this. I'm a little surprised ghost has https enabled by default - BUT THAT'S GOOD, usually.

Step 2.2: Let Ghost 2 allow HTTP

I'll shell back into the ghost container:

user@docker:~/aaronlenoir.com$ sudo docker exec -it aaronlenoircom_ghost2_1 /bin/bash
bash-4.4#

I wanted to use ghost cli to see the config but:

bash-4.4# ghost config
You can't run commands as the 'root' user.
Switch to your regular user, or create a new user with regular account privileges and use this user to run 'ghost config'.
For more information, see https://docs.ghost.org/install/ubuntu/#create-a-new-user-.

Since I'm in docker, I don't really have a normal user.

Where is the config file? Oh it's here: /var/lib/ghost/config.production.json

bash-4.4# cat config.production.json
{
  "url": "http://localhost:2368",
  "server": {
    "port": 2368,
    "host": "0.0.0.0"
  },
  "database": {
    "client": "sqlite3",
    "connection": {
      "filename": "/var/lib/ghost/content/data/ghost.db"
    }
  },
  "mail": {
    "transport": "Direct"
  },
  "logging": {
    "transports": [
      "file",
      "stdout"
    ]
  },
  "process": "systemd",
  "paths": {
    "contentPath": "/var/lib/ghost/content"
  }
}

I don't immediatly see a setting forcing or not forcing https?

I did set the URL environment variable to https://test-blog.aaronlenoir.com so maybe that's why it does https. I'll change it to http in my docker-compose.yml.

That seemed to yield another result:

user@docker:~/aaronlenoir.com$ wget localhost:8120
--2019-09-28 23:04:35--  http://localhost:8120/
Resolving localhost (localhost)... 127.0.0.1
Connecting to localhost (localhost)|127.0.0.1|:8120... connected.
HTTP request sent, awaiting response... 200 OK
Length: 21826 (21K) [text/html]
Saving to: ‘index.html’

index.html                           100%[======================================================================>]  21.31K  --.-KB/s    in 0s

2019-09-28 23:04:36 (345 MB/s) - ‘index.html’ saved [21826/21826]

But still I receive an error 500 from nginx! But we now know the blog is running and NOT redirecting to https ...

Step 2.3: Working without HTTPS?!

I took everything down and then ran

sudo docker-compose up

And now everything is working! But over HTTP. Why am I redirected to HTTP?

I already have multiple apps running internally on http and externally on https and I've never seen this.

I will first try to register the hostname so that maybe I get my SSL certificate sorted in nginx!

Step 3: Register hostname

I own the domain aaronlenoir.com. I can add a subdomain in my administration panel with Namecheap:

Good news! Doing that solved all the problems.

Step 3.1: More troubleshooting

I now want to set the url in docker-compose.yml back to https to see if it still works ...

...

Success, everything still works!

Conclusion

I thought this was going to be a short post.

And - apart from the two hour debug session - that's how eAsY it was to add a new Ghost 2 instance to my blog.

😭

I made a thing for my other blog to show the GPS track of my flights.

I thought I'd write down how I did it.

Recording GPS Tracks

I use an app for iOS called "myTracks". In the free version you can start a recording and then stop the recording.

You will be able to view the track in the app itself, but you can also export it and e-mail yourself a file in the "gpx" format. Gpx stands for "GPS Exchange Format" and it's XML based.

Dowloading GPX files

I fetch the GPX file from a URL using the standard "Fetch API"

        fetch(trackPath)
            .then(function (response) {
                return response.text();
            }).then(function (gpxData) {
                // Parse gpxData here ...
            });

Parsing GPX files

I use a JavaScript library "gpxParser" that I found on GitHub.

The parsing works like so:

let gpx = new gpxParser();
gpx.parse(gpxData);

Embedding a Map

I need a map to draw the gps track on. For this I use leaflet to embed an OpenStreetMap map.

With the following script:

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
            integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
            crossorigin=""></script>

This CSS

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
          integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
          crossorigin="" />

This HTML

<div id="map"></div>

And this piece of JavaScript to initialize the map:

let mymap = L.map('map');

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 50
}).addTo(mymap);

Drawing the Track

After parsing the GPX data and embedding a map, it's possible to draw the track:

function drawTrack(track) {
    let coordinates = track.points.map(p => [p.lat.toFixed(5), p.lon.toFixed(5)]);

    var polyline = L.polyline(coordinates, { weight: 6, color: 'darkred' }).addTo(mymap);

    // zoom the map to the polyline
    mymap.fitBounds(polyline.getBounds());
}

In the first line track.points.map(p => [p.lat.toFixed(5), p.lon.toFixed(5)]) I "map" each point in the track to a new object that the Leaflet library understands: a two element array (latitude and lontitude).

To be clear, the "track" input is what the gpx library has parsed. From earlier:

let gpx = new gpxParser();
gpx.parse(gpxData);
drawTrack(gpx.tracks[0]);

Example

Here's an example of what the embedded map looks like. Note it also contains two charts for altitude and groundspeed. These use the HighCharts component - but I'll talk about that in some other post.

I also packages this into an app by itself, so it can be embedded by using a URL (in the example: https://tracks.aaronlenoir.com/?track=tracks/flights/flight-010-20190917.gpx

You can see the URL of the gpx file is passed to the track variable.

In this episode I finally finish the guessing game from the book "The Rust Programming Language" by adding a loop to allow multiple guesses.

I'm doing a series of 25 minute sessions where I try to get familiar with the Rust programming language. The blogposts in these series are the notes I took of the lessons learned along the way.

Warning to the reader: As always in this series, these are notes I take as I'm learning. They reflect my current understanding and may be incorrect!

Looping

I was expecting a while loop, based on my experience with other languages. For example:

while (x != 1) { ... }

This would execute the code inside the brackets ({ and }) until x was no longer equal to 1.

But instead, the book suggests using a loop statement:

loop {
   ...
}

This runs the code in the brackets until that code tells it to stop, using a break statement.

In the match where the result is evaluated we execute the break statement if the guess was correct:

match guess.cmp(&secret_number) {
    Ordering::Less => println!("Too small."),
    Ordering::Greater => println!("Too big."),
    Ordering::Equal => {
        println!("You win!");
        break;
    }
}

I presume while isn't used, because variables are typically not mutable. The variable I check the while condition on (like x != 1) requires x to be mutable. Maybe there is a while statement and I while learn about it later.

read_line can append

Originally, I made the mistake of leaving the following statement outside of the loop:

let mut guess = String::new();

Then every time the player entered a guess the value was appended to the existing guess:

Please input your guess.
5
You guessed: 5

Too small.
4
You guessed: 5
4

3
You guessed: 5
4
3

This teaches me that if you use io::stdin().read_line with a mutable String variable, whatever the user inputs is appended to the existing string.

Note that this was only possible because my parse call now also handles the Err result by executing continue.

let guess: u32 = match guess.trim().parse() {
    Ok(num) => num,
    Err(_) => continue,
};

Match executes code

The match code for the parse call showed something interesting too.

At first, I thought a match would produce a value:

Ok(num) => num,

This would read as: If "Ok" then pass num as the result of the match. Which is actually also what it does.

But considering this:

Err(_) => continue,

I would read this as: If "Err" then pass continue as the result of the match. But that is not at all what happens.

It actually says: If "Err" then execute the following statement and the result of that statement is the result of the match.

Path statement?

The above means, for the first statement Ok(num) => num, the result of the match statement would be num.

This implies that a line with the following statement would be a valid statement:

`guess;`

Assuming guess is an existing variable.

And it is actually valid and it compiles. Although it does produce a rather cryptic warning: path statement with no effect

I can understand it warns about a useless statement, because it has no side-effects. But what I don't understand is what a path statement is. I've googled around for the term but haven't found anything. So if somebody can point me in a direction that would be super nice.

Conclusion

This was a quick session, but still I've learned that a match statement actually executes code.

I've also learned that read_line can append new text to an existing mutable String.

And finally, I've learned the important loop statement.

Next up in the book are no longer tutorials, so my way of working will have to change a little I think. We'll see!

In this post the brainf*** interpreter is further optimized by translating the source code to an internal instruction set.

In Part 3 a second "jump table" was introduced to make the interpreter a little faster.

The result was an interpreter that could generate the mandelbrot example in 43 seconds.

While useful, it wasn't very creative compared to the earlier optimization. The following optimization is a lot more impactful.

Preprocessing

The idea is that a lot of time is spent reading through the code itself and that code is in memory as a string.

We have to go through that code a lot during loops, reading characters from the string. Additionally, we have to maintain those jump tables from the previous optimizations. This all adds up.

What if we run through the code once, record its meaning into instruction sets? Then we can loop through instructions that contain all the information we need.

If we do that we won't need to figure out every time how much to add or substract somewhere, we'll just know from looking at a single Instruction.

Instruction Set

Instead of working with "brainf***" directly, we'll make our own instruction set and build up our instructions from the original code.

The plan is to have a list of Instruction objects that contain all the necessary information to perform a certain instruction. This Instruction will need a "Type" and an optional numerical parameter.

For example: Add 5 to current memory location is an instruction of the type "Add" with a "5" as parameter.

Each instruction will have a type, indicating what needs to be done:

private enum InstructionType
{
    None = 0,
    Add, Subtract, ShiftLeft, ShiftRight, Print, Read, BeginLoop, EndLoop
}

Of these, Add, Subtract, ShiftLeft and ShiftRight have parameters. The others don't.

The Instruction is a C# class:

private class Instruction
{
    public InstructionType Type { get; private set; }

    public int Parameter { get; set; }

    public Instruction(InstructionType type) : this(type, 0)
    { }

    public Instruction(InstructionType type, int parameter)
    {
        Type = type;
        Parameter = parameter;
    }
}

After looping once through the code we'll have a list of Instruction objects.

Running the Code

Running the code is now a three step process:

• Strip all irrelevant characters from the source
• Build the Instruction set
• Execute the Instructions

public void Run(FileStream source)
{
    var strippedSource = Strip(source);

    var instructions = BuildInstructions(strippedSource);

    Execute(instructions);
}

The step to strip all irrelevant characters is so that we don't have to worry about skipping those characters when reading through the code.

Building Instructions

Some bf instructions can be directly converted to an Instruction. For example Print and Read:

case '.':
    instructions.Add(new Instruction(InstructionType.Print));
    break;
case ',':
    instructions.Add(new Instruction(InstructionType.Read));
    break;

For instruction Add (+), Subtract (-), ShiftLeft (<) and ShiftRight (>) we also need a parameter to know how much to add, substract or shift.

When we encounter such a character, we count how many times the same character follows, and we progress further in the code by that many steps.

For Add that looks like this:

case '+':
    instructions.Add(new Instruction(InstructionType.Add, CountSeries(reader)));
    break;

The CountSeries method progresses the reader until it encounters a character different from + and returns how many times it saw that character being repeated.

private int CountSeries(CharReader cr)
{
    var count = 0;
    var currentChar = cr.GetChar();
    while (cr.HasCharacters() && cr.GetChar() == currentChar)
    {
        count++;
        cr.Forward();
    }
    cr.Back();
    return count;
}

Reading the Loop Instructions

For the loops ([ and ]) we're still using the jumptable from before. But only when building the instruction sets.

For the Instruction itself, the Parameter for BeginLoop indicates the location in the code to jump to when the loop can be skipped. For EndLoop it's the location where to jump to if we need to continue the loop.

The tricky part is the "location to jump to" refers to one of the instructions in the instruction set and no longer a location in the original code. Luckily we can use the Stack from Part 2 again:

case '[':
    instructions.Add(new Instruction(InstructionType.BeginLoop));
    jumpTable.Push(instructions.Count - 1);
    break;
case ']':
    var beginPosition = jumpTable.Pop();
    var beginInstruction = instructions[beginPosition];
    instructions.Add(new Instruction(InstructionType.EndLoop, beginPosition));
    beginInstruction.Parameter = instructions.Count - 1;
    break;

Executing the Instructions

With an array of Instruction objects, actualy executing the code becomes relatively straight-forward. This is good because some of the Instructions will be executed many times. Things that happen a lot are preferably really simple.

For example, the Add instruction is now:

 case InstructionType.Add:
    memory[pointer] += (byte)instruction.Parameter;
    break;

Even the most complicated part, the loops aren't too bad:

We either jump to the specified location or continue to the next instruction, depending on the condition.

 case InstructionType.BeginLoop:
    if (memory[pointer] == 0)
    {
        instructionPointer = instruction.Parameter;
    }
    break;
 case InstructionType.EndLoop:
    if (memory[pointer] != 0)
    {
        instructionPointer = instruction.Parameter;
    }
    break;

Results

The result is the mandelbrot can now be generated in 10 seconds. Quite something knowing our previous optimization left us at 43 seconds.

Drawbacks

There is a drawback to this approach: it requires looping through the whole code before we run, and keeping everything in memory as an Instruction object. So we put a little more strain on the memory. But in this case that's not too bad.

If the source code is really large, this could become a bigger issue.

This optimization required significant changes to the existing code.

Conclusion

There's still more room for optimization, but going from 43 s to 10 s is quite something.

It shows that a good preparation can really make a lot of difference. In this case the preparation was building a set of useful instructions. This extra work payed off in the end.

Please find the full code here on Github: Optimization05.csetty sweet.

I was looking around for some innovative music and apart from the usual atonal bleepedyblob stuff I was getting a little dissapointed.

Until I found out about SKYGGE. A project by composer Benoit Carré.

It's a collaboration between Benoit, several guest artists and AI tools called Flow Machines.

The result are good sounding pop songs, but composed and performed in part by Benoit's flow machine.

I'm surprised I haven't yet found more AI assisted music composition projects (as far as I can tell) because it sounds like an interesting fit.

I'd love to see and hear some listenable live AI - artist collaborations in the future. If only I had musical and AI abilities!

But for now, SKYGGE has some awesome songs considering the background. Especially this Hello Shadow, in collaboration with none other than Stromae and Kiesza:

Check it out:

They released a full album: "Hello World". Available on streaming services (I didn't find it on CD or LP anywhere).

On the website for the album, "Hello World", there is detailed information for each track: Track by Track (helloworldalbum.com)

In this post I describe how I modified my Ghost Template to include Disqus comments in my blog posts.

The blog platform I use is a self-hosted version of Ghost.

One of the drawbacks is it doesn't have a built-in comment system. However, there exist some third party services that let you add comments to your site.

One such service is Disqus.

Sadly, adding this to my Ghost instance wasn't just a matter of checking a checkbox and filling in some parameters.

Setting up Disqus

I actually already had Disqus set up from older blogs. So I was able to use the existing Ghost project. In fact, the posts that got migrated from my previous blogs still have the comments from when I was running it on OpenShift (long time ago).

But to set it up, there's a guide here: Install Disqus on a Website (the links requires you to be logged in to Disqus)

Updating the theme

To add Disqus I had to modify the Theme I use a little. I use a slightly modified version of the standard Ghost theme, called "Casper".

Disqus requires me to add a small block of HTML / JavaScript to the page where I want to embed comments. This block of code make the browser load the comment form from Disqus directly.

In my case, I want this under every blogpost.

To do that, in the template I must update the "post.hbs" file and add the block of code somewhere. The standard Ghost theme's "post.hbs" file contains a place to put this already, by default it looks like this:

{{!--
<section class="post-full-comments">
    If you want to embed comments, this is a good place to do it!
</section>
--}}

So I uncommented the section and replaced the text with the Disqus code block.

The disqus block looks like below:

<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = '{{url absolute="true"}}';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'ghost-{{comment_id}}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://blog-aaronlenoir.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

When you have an account at Disqus, it will provide you with the appropriate code. The only thing Ghost specific is the URL and Identifier:

• URL: '{{url absolute="true"}}'
• Identifier: 'ghost-{{comment_id}}'

This is information I got from the Ghost documentation: Apps & Integrations: Disqus

Fetching the new Theme

On the server where I run my Ghost blog I have a script to stop and start the webserver(s). Each application runs in a docker container, fronted by an Nginx (OSS webserver) container.

Every time I start the blog, first the latest version of the theme is fetched from github:

git -C blog/data/ghost/themes/casper-custom pull

CSP

I have implement "Content Security Policy" on my website. This informs the browser from which domain my website is allowed to fetch data. By default loading the disqus platform wouldn't have been allowed, so I had to add the domain in my nginx CSP configuration:

add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://code.jquery.com blog-aaronlenoir.disqus.com";

Possible Improvements

I would like to configure the comment section to only load on demand: click here to load the comments

I had that in my previous version of the blog, so I will add that back in the future.

Code

Find my customized Casper template here: github.com/AaronLenoir/Casper

Find my nginx configuration here: github.com/AaronLenoir/aaronlenoir.com/blob/master/nginx/vhost.d

Find the complete set up for my containers here: github.com/AaronLenoir/aaronlenoir.com

Conclusion

Adding Disqus comments to a Ghost blog requires modifications to the theme you are using.

I'm not sure what the SaaS solution of Ghost Pro offers. It's quite possible over there it can simply be checked on or off, but I haven't actually looked at that.