To test, I gave it the code of my DominoParty game at: https://github.com/obaqueiro/dominoparty/blob/master/backend/app/app.ts .

I asked it to analyze it and give me the top errors, it replied the following:

There are no obvious errors in the code. However, there are some potential issues and areas for improvement.

The code does not check for errors when calling Redis functions. For example, in the onPlayerConnect function, the code assumes that the get call will always return a value, but it does not check for errors or handle the case where no value is returned.

The code does not handle disconnections or clean up after players leave a game room. If a player disconnects, the server will continue to treat that player as being in the game room, even though they are no longer connected. This can lead to inconsistencies in the game state and potentially cause errors.

The code uses a global redis variable to store the Redis client instance. This could cause problems if multiple instances of the game server are running concurrently, as they would all be sharing the same Redis client. It would be better to create a new Redis client instance for each game server instance.

The code does not use any authentication or authorization mechanisms to prevent unauthorized access to the game server. It is possible for anyone who knows the server's address and port to connect to it and potentially manipulate the game state.

The code does not validate the data received from clients. This means that it is possible for malicious clients to send invalid or malformed data to the server, potentially causing errors or security vulnerabilities.

Overall, the code works as intended, but it could benefit from improved error handling, better handling of player disconnections, better management of the Redis client, and improved security.

Then I asked it to tell me how to fix the firs terror, to which it responded:

// When a player connects a room, add the player to the room and notify other playersonPlayerConnect(roomName: string, socket: Socket) {console.log(Player ${socket.id} connecting to room:  + roomName);let roomData: {boardData: any, players: any} = {boardData:{}, players:[]};
// get room data from DB
this.redis.get(roomName, (err, data) => {
  if (err) {
    // handle the error
    console.error(`Error getting room data for ${roomName}: ${err}`);
    return;
  }

  if (data) {
    let room = JSON.parse(data);

    // construct response payload with room data
    roomData = {
      boardData: room.boardData,
      players: room.players || []
    };

    // notify other players of player joining the room
    if (room.players) {
      let availablePlayers: string[] = [];
      room.players.forEach(player => {
        if (this.io.sockets.connected[player]) {
          availablePlayers.push(player);
          this.io.sockets.connected[player].emit('message', { event: 'playerConnected' });

It basically inserted the if(err) condition.  Pretty neat.

Tonight I was in the mood to do some C programming (haven't done that in a long time) so I decided to implement the TicTacToe game in C.  In total I spent 25 minutes doing the implementation.  I had to look a couple of things like how to get a random int, and how to initialize an array.  

I liked my resulting code:

#include <stdio.h>
#include <stdlib.h>
#include <time.h>

#define ERROR_INVALID_POSITION -1 
#define ERROR_POSITION_NOT_EMPTY -2
#define ERROR_INVALID_TOKEN -3

#define NO_WINNER '-'
#define WINNER_TIE 'T'

void printBoard();
int setToken(int n, char token);
void userMove();
void computerMove();
char checkWinner();

char board[] = {'-', '-', '-', '-', '-', '-', '-', '-','-' };

int main() {
  srand(time(NULL));   
  char winner = '-';
  while(1) {
    printBoard();  
    userMove(); 
    winner = checkWinner();
    if (winner != NO_WINNER) break;
    printf("%c\n", winner);
    computerMove();
    winner = checkWinner();
    printf("%c\n", winner);
    if (winner != NO_WINNER) break;
  }

  printBoard();  
  if (winner == WINNER_TIE) {
    puts("A boring tie.... how boring");
  }
  else 
  {
    printf("Winner is: %c. Congrats!\n", winner);
  }
  return 0;
}

void  printBoard() {
  for (int row=0; row < 3; row++) {
    printf("%c|%c|%c\n",board[3*row+0], board[3*row+1], board[3*row+2]);
  }
  puts("");
}

int setToken(int n, char token) {
 n--; // To start positions from 1
 if (n < 0 || n> 8) {
  return ERROR_INVALID_POSITION; 
 }
 if (board[n] != '-') {
  return ERROR_POSITION_NOT_EMPTY;
 }

 if (token != 'O' && token !='X') {
  return ERROR_INVALID_TOKEN;
 } 
 board[n] = token;
 return 0;
}

void userMove() {
  int position;
  while (1) {
    puts("Enter a number [1-9] to set an O:");
    scanf("%d",&position);
    int error = setToken( position, 'O');
    if (error == ERROR_INVALID_POSITION) {
      puts("Invalid Position Entered, try again\n");
    } else
    if (error == ERROR_POSITION_NOT_EMPTY) {
      puts("That position is already taken, try again\n");
    } else 
    { 
      break;
    }
  }
}

void computerMove() {
  int n = 0;
  while (1) {
    n = rand() % 8 + 1;
    if (setToken(n,'X') == 0) break;
  }
}

char checkWinner() {
 if (board[0] == board[1]  && board[1] == board[2]) { return board[0]; }
 if (board[3] == board[4]  && board[4] == board[5]) { return board[3]; }
 if (board[6] == board[7]  && board[7] == board[8]) { return board[6]; }


 if (board[0] == board[3]  && board[3] == board[6]) { return board[0]; }
 if (board[1] == board[4]  && board[4] == board[7]) { return board[1]; }
 if (board[2] == board[5]  && board[5] == board[8]) { return board[2]; }

 if (board[0] == board[4]  && board[4] == board[8]) { return board[0]; }
 if (board[2] == board[4]  && board[4] == board[6]) { return board[2]; }

 int empty = 0;
 for (int i = 0; i < 9; i++ ) {
   if (board[i] == '-') { empty++; }
 }
 if (empty == 0) { return WINNER_TIE; }

 return NO_WINNER;
}

Now that tech lay offs are starting to happen, these are some interesting pages where one can follow them:

• https://layoffs.fyi
• https://trueup.io/layoffs (great charts!)
• ... will add more here if I find something noteworthy

Vidar Hokstad wrote a really good comment on his experience migrating some infrastructure from AWS to GCP in this HN thread. I'm reproducing here verbatim because I think it is pretty insightful:

Unfortunately not, but it's surprisingly straight-forward, apart from the database bit, but here's a bit more detail from memory. There are many ways of doing this and some will depend strongly on which tools you're comfortable with (e.g. nginx vs. haproxy vs. some other reverse proxy is largely down to which one you know best and/or already have in the mix) [Today I might have considered K8s, but this was before that was even a realistic option, but frankly even with K8s I'm not sure -- the setup in question was very simple to maintain]:

• Set up haproxy, nginx or similar as reverse proxy and carefully decide if you can handle retries on failed queries. If you want true zero-downtime migration there's a challenge here in making sure you have a setup that lets you add and remove backends transparently. There are many ways of doing this of various complexity. I've tended to favour using dynamic dns updates for this; in this specific instance we used Hashicorp's Consul to keep dns updated w/services. I've also used ngx_mruby for instances where I needed more complex backend selection (allows writing Ruby code to execute within nginx)

• Set up a VPN (or more depending on your networking setup) between the locations so that the reverse proxy can reach backends in both/all locations, and so that the backends can reach databases both places.

• Replicate the database to the new location.

• Ensure your app has a mechanism for determining which database to use as the master. Just as for the reverse proxy we used Consul to select. All backends would switch on promoting a replica to master.

• Ensure you have a fast method to promote a database replica to a master. You don't want to be in a situation of having to fiddle with this. We had fully automated scripts to do the failover.

• Ensure your app gracefully handles database failure of whatever it thinks the current master is. This is the trickiest bit in some cases, as you either need to make sure updates are idempotent, or you need to make sure updates during the switchover either reliably fail or reliably succeed. In the case I mentioned we were able to safely retry requests, but in many cases it'll be safer to just punt on true zero downtime migration assuming your setup can handle promotion of the new master fast enough (in our case the promotion of the new Postgres master took literally a couple of seconds, during which any failing updates would just translate to some page loads being slow as they retried, but if we hadn't been able to retry it'd have meant a few seconds downtime).

Once you have the new environment running and capable of handling requests (but using the database in the old environment):

• Reduce DNS record TTL.

• Ensure the new backends are added to the reverse proxy. You should start seeing requests flow through the new backends and can verify error rates aren't increasing. This should be quick to undo if you see errors.

• Update DNS to add the new environment reverse proxy. You should start seeing requests hit the new reverse proxy, and some of it should flow through the new backends. Wait to see if any issues.

• Promote the replica in the new location to master and verify everything still works. Ensure whatever replication you need from the new master works. You should now see all database requests hitting the new master.

• Drain connections from the old backends (remove them from the pool, but leave them running until they're not handling any requests). You should now have all traffic past the reverse proxy going via the new environment.

• Update DNS to remove the old environment reverse proxy. Wait for all traffic to stop hitting the old reverse proxy.

• When you're confident everything is fine, you can disable the old environment and bring DNS TTL back up.

The precise sequencing is very much a question of preference - the point is you're just switching over and testing change by change, and through most of them you can go a step back without too much trouble. I tend to prefer ensuring you do changes that are low effort to reverse first. Need to keep in mind that some changes (like DNS) can take some time to propagate.

EDIT: You'll note most of this is basically to treat both sites as one large environment using a VPN to tie them together and ensure you have proper high availability. Once you do, the rest of the migration is basically just failing over.

When using a keyboard with Spanish/Mexico layout and English layout setting, the § key is position in the place where the ` should be (left side of the 1 key).

This tells you how to fix that:

https://ppolyzos.com/2020/10/09/swap-places-between-tilde-and-section-sign-§-key-in-your-macbook-keyboard/

Archive link in case it goes away:
https://archive.is/kjLoU

Just needed to write this out. I've been working with some project which was decided to be implemented in NestJS. I have always been wary of using "thick" backend frameworks to implement applications, because I've seen all the problems that arise when a "toy program" becomes a real-life production project using RoR, LoopBack and similar frameworks.

At some point someone convinced me to try NestJS. In theory it is different because it uses several standard libraries and it "just" provides a framework to glue them all.

The problem is that that glue is pretty brittle: As with all frameworks, once you have to deviate a bit from their intended use, you are screwed. Similarly, you will hit a little known bug that is hidden deep inside the framework... and because it is free, nobody will really care if you get blocked (though luck, fix it yourself... if you can/have-time dive into the code). I've got two examples so far:

Using the TypeORM library

We had implemented a good chunk of code in NestJS, and it was working OK. However, at some point we decided to implement the TypeORM library as it is described in NestJS documentation (nothing fancy, just one table using Postgres). While everything works when running the application, the tests are irremediably broken due to this bug:

https://github.com/nestjs/typeorm/issues/321

TypeError: Right-hand side of 'instanceof' is not an object when use absolute path in nestjs

Apparently NestJS + TypeORM do not play well with the Jest framework. The Github issue specifically talks about "using absolute paths", but this happened to us even when not using absolute paths. Of course getting "support" (which is free support because it's free software after all) did not help at all, and in this case, the NestJS team didn't even acknowledge the bug.

Using a RabbitMQ Microservice

The second issue happened when trying to use the "sanctioned" RabbitMQ micro-service configuration. I reported it in the following issue:

https://github.com/nestjs/nest/issues/7196

Basically, a malformed JSON in a RabbitMQ message is not being caught as an exception where it should. The issue has been open for several months now in the "needs triage" state. Good thing I found a workaround!

Workarounds

Because life must go on, I had to find workarounds for these two issues. Fortunately, workarounds were easy to do, but it seemed that I had to "patch" my code for problems happening in the NestJS framework.

What comes next

I would not use NestJS for any future project, nor I would recommend it for anyone. Sure, the prospect of not having to implement a lot of "boilerplate" code sounds good, but in this case, having to dig into some unknown codebase made me lose time that I could have been using for implementing real work.

It will be better to download one of the many NodeJS hexagonal-architecture boilerplates or MVC or NTier or whatever architecture you prefer, and then using standard libraries like Express, Sequelize, Bunny, etc to connect to services. That way if something doesn't work, you will have complete control.

I still prefer thin frameworks.

An old man's rant

Back in the day (20 years ago?) when online music services started (after the RIAA lost against MP3 piracy), one of the main features of online music players that you could not play something specific, but could get a mix based on artists that you liked. One of the services that offered this was LastFM (way back in 2002). Additionally you had the ability to "like" the music that you have liked, and "block" any song you didn't; logging every song you played and every other song you skipped.

The problem is... that since that time, there have been a plethora of new services (Rhapsody, Rrdio, Deezer, Pandora, Tidal, Spotify, Google PlayYoutube Music, among several more obscure others), and each of them saves in one way or another your list of played, skipped, loved and hated tracks, over and over. Every one of them think that the way they use your play history to suggest you new songs is the best one; and most likely all of it sucks.

The way I see it, that data should be available for download in an open and standard format. So that you could a) Move it between music services if you like and b) Use any "neutral" third party application (maybe open source?) to analyze your play history and give you insights.

Coming back to LastFM, they tried to do something like that: You can connect a LastFM plugin in some of the services that will send your listened songs to LastFM. The problem is that a) It is not open (you cannot download your history form LastFM in a suitable format) and b) Not all services support it, and c) Once you generate your data in LastFM, you can only listen it there.

Proposal for an Free, Open Music Streaming History Data format

What I am proposing is simple. Come up with a simple JSON (or YAML if we feel brave) standard that allows one to store the behavioural data as you play your music in any service, including things like: "loved this song", "skipped this song after N seconds", "hated this song", etc.

This will give everyone the ability to really own their data, and will open the opportunity to improve recommendation algorithms by third parties (open source or commercial).

The format could be something as simple as this:

listening_history.json 
-------
{
   exportDate: "2022-01-01T20:35Z",
   listenedTracks: [
    {
       artistName: "Metallica",
       albumName:  "Ride the Lightning", 
       trackName:  "For Whom the Bell Tolls",
       durationSeconds: 309,
       playData: {
          playTimeSeconds: 150,
          playScore: 1
       }
    },
    {
       artistName: "Megadeth",
       albumName:  "Youthanasia", 
       trackName:  "Victory",
       durationSeconds: 327,
       playData: {
          playTimeSeconds: 327,
          playScore: -1
       }
    }
 ...
]

All fields are straightforward except maybe playScore, which would be used to capture the "like" and "dislike" buttons across different services (i.e. when someone clicks on a like button, the playScore would be +1; clicking on a "skip/block" button would set the playScore to -1; finally 0 would be a default value for when there's not reaction to the song).

Recently we installed a cat door at home to allow our cat to go in and out as she pleases. After installing it, my wife innocently asked "wouldn't it be cool if we could know when the cat goes out and in of the door?". Of course I took that as a dare, and a weekend project was born.

For this project, I setup a system that senses whenever the cat moves through the door (using an arduino-like board and a move sensor), and sends a ping to an AWS lambda function. The Lambda function registers the date and time of the ping and writes the timestamp in a Goole Spreadsheet into a new row.

The Cat (introducing Garrita)

This is Garrita, the one that started everything. She loves going in and out of the house at her own pleasure. For those of you who don't speak Spanish, "Garrita" roughly translates to "little claw".

And this is the door we want to spy:

The hardware

For this project I used the following hardware:

• An ESP32 board which was around $200 MXN ($10 USD),
• HC SR501 PIR movement sensor that goes for around $161 MXN ($7 USD) for 5 pieces
• a bunch of jumper cables to connect the components, costing around $90 MXN (~$4 USD) for 120 cables.

Connecting the hardware was pretty straightforward. There are plenty of web sites that explain how to connect the PIR sensor into the ESP32 board. This one shows how to, as part of a nice project. Basically the PIR sensor has a positive (+), negative (-) and a data connector. The negative connects into the ESP32 ground, the data connects into any of the ESP32 data pins, and the positive connects into the VIN pin (this is instead of the standard 3 Volt pin, because the PIR connector requires 5 volts, which are available through the VIN PIN).

After connecting everything this is how the hardware looks like. Pretty simple:

The Software

ESP32 Board Software

For the software, I used the Arduino IDE. And connected the ESP32 to my MacBook for flashing. Note that I had to install UART serial port drivers for the ESP32 to be seen by OSX. The drivers can be downloaded from this page.

The software for the ESP32 is pretty simple, we setup an interrupt to listen to events when the PIR sensor detects movement, then we send a ping in the form of an HTTP GET request into the AWS API gateway lambda function that we will be using. Of course we must do all the Wifi initialization and other setup processes.

#include "WiFi.h"
#include <stdio.h>
#include <HTTPClient.h>
#include <TimeLib.h>

#define timeSeconds 10
#define MY_SSID "yourWiFiSSID"
#define PASSWORD "YourWifiPassword"
#include "soc/rtc_wdt.h"


#define MY_URL String("https://your-AWS-api-gateway-endpoint.aws.amazon.com/dev/event")
#define EVENT_DELAY_TIME 60
const int motionSensor = 27;

/* We use a flag to indicate when the sensor movement was detected because 
 * we have to send the HTTP request outside of the interrupt handler
*/
int sensor = 0;
// Setu
time_t lastEventTime = now() - EVENT_DELAY_TIME ;

// Performs a GET request to the endpoint appending the specified sensor
void do_request(String sensor) {
  String request_string =  MY_URL + String("?") +  sensor;
  HTTPClient http;
  http.begin(request_string);
  Serial.println(request_string);
  int httpCode = http.GET();  
    if (httpCode > 0) { //Check for the returning code
        String payload = http.getString();
      }
    Serial.println(httpCode);
    http.end(); //Free the resources
}

// Checks if motion was detected, sets LED HIGH and starts a timer
void IRAM_ATTR detectsMovement() {
  Serial.println("Motiong detected");  
  // Interupt handler only raises the flag to send the sensor event
  time_t timeNow = now();

  // Wait at least 60 seconds between sending events
  Serial.println(timeNow - lastEventTime);    
  if (timeNow - lastEventTime > EVENT_DELAY_TIME) {
    
    Serial.println("Sending event");  
    sensor = 1;
    lastEventTime = timeNow;
  } else {
      Serial.println("Delayig event dispatch");  
  }
}

void setup()
{  
    Serial.begin(115200);
    // Set WiFi to station mode and disconnect from an AP if it was previously connected
    WiFi.mode(WIFI_STA);
    WiFi.begin(MY_SSID, PASSWORD);
    if(WiFi.waitForConnectResult() != WL_CONNECTED) {
         Serial.println("Wifi Connection failed"); 
    }
    WiFi.printDiag(Serial);
    
    Serial.println("Setup done");
    pinMode (LED_BUILTIN, OUTPUT);
    // Set LED to LOW
    digitalWrite(LED_BUILTIN, LOW);
    
    // PIR Motion Sensor mode INPUT_PULLUP
    pinMode(motionSensor, INPUT_PULLUP);
    // Set motionSensor pin as interrupt, assign interrupt function and set RISING mode
    attachInterrupt(digitalPinToInterrupt(motionSensor), detectsMovement, RISING);

      
}

void loop()
{
    // If the sensor flag is up then we send the request and reset the flag
    if (sensor > 0) {
      do_request( sensor == 1 ? "sensor_1" : "sensor_2");    
      sensor = 0;
    }
    // Wait a bit before looping
    delay(3000);

}

This code is also available on github.

We do some simple logic to prevent sending multiple pings for the same movement detection event. This is something that I have to improve in the future, doing a better noise reduction algorithm.

Serverless AWS/Lambda/HTTP-gateway

To capture the pings from the ESP32 board, I setup a Serverless framework project using AWS Lambda and HTTP gateway technologies. The full code is also available on github. But basically it mainly consists of a serverless.yml file defining the HTTP gateway, the lambda function, and the definition of some ENV variables to authenticate with Google Spreadshseets:

service: event-service

frameworkVersion: ">=1.1.0 <=2.65.0"

provider:
  name: aws
  runtime: nodejs14.x
  environment: ${file(.env.yml):}
  stage: dev
  region: us-east-1
  lambdaHashingVersion:  "20201221"
functions:
  eventSubmission:
    handler: api/event.submit
    memorySize: 128
    description: Submit Event for saving
    events:
      - http: 
          path: event
          method: get

The other main file is the event.js file, which receives the HTTP gateway GET request and appends a new row in a Google Spreadsheet with
the current date and time (in my timezone):

'use strict';
const { google } = require('googleapis');


let sheets;

module.exports.submit = async (event, context, callback) => {

 const auth = authorize();
 sheets = google.sheets({ version: 'v4', auth });
 writeToSheet();
   const response = {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Event registered successfully',
      input: event,
    }),
  };
  callback(null, response);
};

function authorize() {
  const oAuth2Client = new google.auth.GoogleAuth({
    credentials: {
      client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
      private_key: process.env.GOOGLE_PRIVATE_KEY.replace(/\\n/gm, '\n')
    },
    scopes: ['https://www.googleapis.com/auth/spreadsheets'],
  });
  return oAuth2Client;
} 


async function writeToSheet() {

  let dateTime = new Date().toLocaleString("es-MX", { timeZone: 'America/Mexico_City'});

  return sheets.spreadsheets.values.append({
    spreadsheetId: process.env.GOOGLE_SPREADSHEET_ID,
    range: 'data',
    resource: {
      values: [dateTime.split(' ')]
    },
    insertDataOption: 'INSERT_ROWS',
    valueInputOption: 'RAW'
  });
}

The Result

Once all of that is setup, we get a timestamp added into the spreadsheet every time Garrita passes the door.
.

This is the ESP32 board with the connected sensor:

Future work

There's a bunch of things that I have to do to improve this, among them:

• Implement a better noise reduction algorithm in the board so that I get less false positive events triggered. Right now, some shadow movements trigger a ping.
• Remove the Fresnel lens that sits on top of the PIR sensor, to focus its field of view only to the point where the cat moves through the door.
• Place the whole hardware into a plastic enclosure for better presentation.

I learned about this amazing search engine https://search.marginalia.nu/ that favours text/information heavy websites and punishes flashy Web2/Web3 sites. The results are quite astounding and signal heavy. I needed to save it for future reference.

This is a neat trick in Linux for when you have a bit (some GB) in different disks and want to use it to save large files. I use this for mining XCH (Chia Cryptocoin).

1. First check the available space on each disk using df -h:

Filesystem      Size  Used Avail Use% Mounted on
/dev/sdg        4.6T  4.5T   84G  99% /media/omar/SEA_5T_B
/dev/sdp2        30T   30T   68G 100% /media/omar/seagate1

Here we have 2 disks, one with 84G and another with 68G. The size of the file we want to store is more than 100GB. To do that, we will first create "image" files using the remaining space in each disk:

truncate -s67G /media/omar/seagate1/67G.img
truncate -s83G /media/omar/SEA_5T_B/83G.img

Then, we create a loopback device with losetup for each disk:

losetup --show --find /media/omar/seagate1/67G.img
losetup --show --find /media/omar/SEA_5T_B/83G.img

We must pay attention to the data returned by those two previous commands, as they will tell us the name of the loopback device (e.g. /dev/loop1).

As a next step, we are going to use btrfs to create a single filesystem from those 2 devices:

sudo mkfs.btrfs -d single /dev/loop1 /dev/loop2
(Replace /dev/loop1 and /dev/loop2 with whatever you got from the losetup step)

Finally, we can mount our btrfs filesystem in some directory like:

sudo mount -t btrfs -o ssd,nodatacow,nodatasum,discard,nodiratime,discard=async,noatime /dev/loop1 loops/

In my case I added all those options to make access faster. With btrfs you can mount a several-disk filesystem by referring to one of the devices (like /dev/loop1 in this case)

After mounting this device, we do a df -h again and should see our new disk mounted in the specified directory with the summed amount of space:

Filesystem      Size  Used Avail Use% Mounted on
/dev/loop1      150G  3.8M  148G   1% /media/omar/loops

And that's it! we've got 150G to use for large files!

Some references:

• https://unix.stackexchange.com/a/368186/14790
• https://btrfs.wiki.kernel.org/index.php/Using_Btrfs_with_Multiple_Devices#Multiple_devices

Back in the day (5 years ago) I wrote a good blog post related to a migration the Engineering team did from a monolithic infrastructure into a "microservice based" architecture.

The original URL is this, but I've seen it has gone down a couple of times in the last days so I saved a copy of it in archive.is:

The Path to Kueski 2.0 (Archive).

Another good blog post that is worth saving, is the Better Logging (Archive) post by Jorge del Rio which has good ideas about logging in production environments.

A nice script to generate sequence diagrams in an HTML page:

Taken from: https://unpkg.com/js-sequence-diagrams-autorenderer@1.0.1/index.js

// JS-sequence-diagrams auto-renderer; renders a document using JS-sequence-diagrams (https://bramp.github.io/js-sequence-diagrams/)
// See readme.md for usage instructions
// Pretty inefficient, but it works:
const a = document.createElement('script'); a.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js');
document.head.appendChild(a);
a.onload = () => {
  const b = document.createElement('script'); b.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js');
  document.head.appendChild(b);
  b.onload = () => {
    const c = document.createElement('script'); c.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js');
    document.head.appendChild(c);
    c.onload = () => {
      const d = document.createElement('script'); d.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js');
      document.head.appendChild(d);
      d.onload = () => {
        const diagram = Diagram.parse(document.body.textContent);
        document.body.textContent = "";
        const x = document.createElement('div');
        document.body.appendChild(x);
        diagram.drawSVG(x, {theme: 'simple'});
      }
    }
  }
}

As an example usage, paste this into a file test.html and open it in your browser:

Jon->Ygritte: Do you remember the cave?
Note right of Ygritte: Long silence...
Ygritte-->Jon: We should have stayed in that cave
Jon->Ygritte: We'll go back there.
Ygritte-->Jon: You know nothing Jon Snow


# Rendered using JS-sequence-diagrams (https://bramp.github.io/js-sequence-diagrams/) by the line below:
# <script src="https://unpkg.com/js-sequence-diagrams-autorenderer@1.0.1/index.js"></script>