Valentin Prugnaud

I was curious about NFTs and decided to go through the process of publishing my own! 

# Step 1: Generate the images
The first step was to generate all of them, I created a script inspired by Hashlips generator, created all the layers with Sketch and run the script to generate the images and the metadata, and decided to host everything on Firebase Hosting.

Check out the generator repository:
[@preview](https://github.com/foxted/Codebits-NFT-Generator)

# Step 2: Mint the NFTs

The next step, was to figure out how to mint every single one of them (the collection contains 625 versions!). For that task, I created a Solidity contract and a small script as well to mint every single one of them using Google ZX. 

Check out the contract and mint script:
[@preview](https://github.com/foxted/Codebits-NFT-Contract)

Since it is a fun project, I'll be giving away all of them, so feel free to reach out on [Twitter](https://twitter.com/codebits_nft) to receive your own random Codebit!

Codebits NFT

> **A quick note on 2020**
> 
> Just like many, 2020 was a complete blur. A global pandemic hit the world that we will all remember. Most of the year went by fast, and I completely forgot to write my review for that year at the beginning of 2021. Thus, this review will thus cover 2020 as well.

What a crazy couple of years, right? Adjustments to work from home full-time, hyper-focus on work, and limited social interactions. Despite this new reality, significant progress and learnings these past two years.

## Highlights
- [Speakbox](https://speakbox.ca) joined the Techstars Boston 2021 promotion!
- I became more comfortable at work with Kubernetes and Openshift.
- I started playing with incredible tools for the future of Speakbox: Hasura, GraphQL, Postgres.
- I published my first NFT, [Codebits](https://opensea.io/collection/codebit), on OpenSea.

## Career

I have been working for almost three years now at Telus, and I am grateful for my team and the progress we make every day. I learned a ton about Google Cloud, Kubernetes and Openshift and got more comfortable taking on more significant projects. 

## Entrepreneurship

[Speakbox](https://speakbox.ca) joined Techstars Boston! I repeat: [Speakbox](https://speakbox.ca) joined Techstars Boston! It's fantastic to be a part of this adventure! It is an incredible opportunity for us, and since the program started in November, the [Speakbox](https://speakbox.ca) team has been more focused and united than ever. I can't wait for 2022 to witness Speakbox reach another level!

On the technical side, we are starting to see the limitations of our No-SQL database. While developing the minimum viable product was convenient with Firestore, it is now beginning to be a blocker to deliver features quickly. Due to the minimal development capacity (I am still the only developer on the team!), we needed a solution that would allow me to focus on the various front-end applications with limited backend requirements. I discovered Hasura this year, which generates a fully functional GraphQL API on top of a Postgres database, allowing direct CRUD capabilities and allowing me to focus on particular business logic components on the backend.
I am looking forward to discovering more about Hasura, GraphQL and Postgres this year!

## Personal
On a personal level, it's pretty much stagnant. 

At the beginning of 2020, I started hitting the gym three times a week, but when March and the pandemic happened, I let the bad habits creep back in, and my trips to the gym became more sporadic. However, I did enjoy working out, geeking out on new strength exercises, and I am looking forward to getting this habit back on track—something to work on in 2022, once the gyms finally re-open again. 

I also experienced a leak in my shower in October this year, forcing me to leave the apartment for a month. However, I was lucky to find friends ready to host me for the month and make the whole experience less stressful. 

On the experimentation side, I decided to try and launch my first NFT on OpenSea. I didn't expect much of it; I wanted to learn more about the blockchain ecosystem. This NFT pays tribute to the beloved Github contribution graph. It contains 625 variations of 2x2 grids, each block representing one of the following levels:
- N: Newbie, barely any contribution
- J: Junior, some contributions
- I: Intermediate, frequent contributions
- S: Senior, regular contributions
- X: 10x, a shout out to the Twitter craze about the "10x developer"

## Shoutouts
- Aidan & Benjamin, we accomplished so much this past year, and I am excited for our future at [Speakbox](https://speakbox.ca).
- My team at Telus. They support my irregular work schedule and are always eager to learn in an inclusive environment. 
- Tom & Heidi for hosting Allison and me for a month!

## Learnings
- Google Cloud: I learned to manage logs better and keep the cost manageable in the process. 
- Hasura & Postgres; I am new to Postgres, I've only worked with MySQL in the past, but I enjoy it quite a bit!
- As a fun experiment, I launched my first NFT on OpenSea: [Codebits](https://opensea.io/collection/codebit). It's still a lot to learn and figure out, but I am glad I finally managed to do it!

## Looking ahead to 2022
Things I am looking forward to in 2022:
- Exciting [Speakbox](https://speakbox.ca) partnerships and growth
- Another trip to Boston with [Speakbox](https://speakbox.ca) in February
- My sister and niece are visiting me in Vancouver in the spring.
- Hopefully, the gyms will re-open, and I will resume my program.
- My Canadian citizenship should finally reach the final step; 2022 should be the year I become a Canadian citizen!

Come on, 2022, bring it!

2021: Year in Review

We all know the Internet we know and love isn't always a safe place, but there are innovations that we can easily 
leverage to make it a better place.

Recently, amid this whole COVID–19 situation, my co-founders and I decided to create a platform, for Canadians to thank
all the workers working on the front lines, risking their lives, for us while we stay at home: [Together North](https://togethernorth.ca). The whole country and many other places in the world started clapping and cheering at a dedicated time every day to show their gratitude. 
But we thought it would be a good idea to have a dedicated place where people could leave their gratitude messages, share it directly with 
the people they are cheering for and keep it online as a reminder.

And it was a good idea. The only problem was: some people don't go on the Internet to share love and compassion, but to write mean comments
and spread hate instead. And Together North was a perfect target: we are a small team and it is an open text message. There is room for abuse and we can't monitor every message manually.

Here comes the [Perspective API](https://www.perspectiveapi.com/). I decided to use this API to evaluate every incoming message
and decide whether or not that message should be published, or if it should be flagged and evaluated by a human.

Let's dive into how it works.

## Concept

The concept is simple: create a Firebase Function to evaluate any incoming message upon creation, run it through the Perspective API and based on the "Toxicity" result, decide whether or not we should display it or not.

After running a few manual tests with carefully chosen words, I decided to use a threshold of 25% toxicity. Anything above 25% would be flagged as "toxic", unpublished and forwarded to us in a dedicated Slack channel for human evaluation. Anything below 25% would automatically be approved, published on the platform but also forwarded into our Slack channel for good measure and proofreading just in case.

## Setup

We already have a "messages" collection on Firestore where we store all of our incoming messages. To decide whether or not we should display the message, we updated every document with a "published" flag. If true, it is displayed on the platform, if not, it is hidden until further notice.

Then, we created the Firebase Function with the code to evaluate the message and send the alerts. This function is triggered every time a message is created in the collection on Firestore.

Let's take a look at the code, shall we?

## Code

Here is the code we used for the Firebase Function: 

```javascript
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const Perspective = require('perspective-api-client');
const get = require('get-value');
const { WebClient } = require('@slack/web-api');

// Initialize
const slack = new WebClient(functions.config().slack.token);
const perspective = new Perspective({ apiKey: functions.config().perspective.api_key });

admin.initializeApp();

exports.moderateMessages = functions.firestore.document('messages/{message}').onCreate(async (snapshot, context) => {
    const id = snapshot.id;
    const data = snapshot.data();

    // Evaluate toxicity of the message via the Perspective API
    const result = await perspective.analyze(data.message);

    const toxicity = get(result, 'attributeScores.TOXICITY.summaryScore.value', {
        default: 1
    });

    if (toxicity * 100 < 25) {
        // Message is safe, approve it
        await slack.chat.postMessage({
            text: `@channel A safe message has been published on Together North! https://togethernorth.ca/m/${id}`,
            blocks: [{
                'type': 'section',
                'text': {
                    'text': `@channel A safe message has been published on Together North! https://togethernorth.ca/m/${id}`,
                    'type': 'mrkdwn'
                },
                'fields': [
                    {
                        'type': 'mrkdwn',
                        'text': `*ID*: ${id}`
                    },
                    {
                        'type': 'mrkdwn',
                        'text': ' '
                    },
                    {
                        'type': 'mrkdwn',
                        'text': `*Message*:\n${data.message}`
                    }
                ]
            }],
            channel: '#together-north',
        });
        return admin.firestore().collection('messages').doc(id).update({
            result,
            moderationScore: toxicity,
            published: true
        });
    } 
    
    // Message is not safe, send a message to Slack
    await slack.chat.postMessage({
        text: `@channel A suspicious message has been blocked on Together North!`,
        blocks: [{
            'type': 'section',
            'text': {
                'text': '@channel A suspicious message has been blocked on Together North!',
                'type': 'mrkdwn'
            },
            'fields': [
                {
                    'type': 'mrkdwn',
                    'text': `*ID*: ${id}`
                },
                {
                    'type': 'mrkdwn',
                    'text': ' '
                },
                {
                    'type': 'mrkdwn',
                    'text': `*Message*:\n${data.message}`
                }
            ]
        }],
        channel: '#together-north',
    });
    return admin.firestore().collection('messages').doc(id).update({
        result,
        moderationScore: toxicity,
        published: false,
    });
});
```

The logic is fairly simple: when a message is created, run the message through the Perspective API, if the toxicity level
is below 25%, share it in our Slack channel with the URL for easy reference and mark it as published. We store the toxicity
report from the API as well out of curiosity. 

However, if the message has a toxicity level higher than 25%, then we send a different Slack notification to our Slack channel,
mark the document as unpublished and store the toxicity report as well for easy review by our team.

If you are curious about using Firebase, the Perspective API or the Slack API, [get in touch](https://twitter.com/valentinprgnd)!

Moderate posts automatically with the Perspective API

[@preview](https://github.com/WhatDaFox/vuejs-cloud-run-poc)

## Configure Google Cloud

To be able to build and deploy, you will need a Google Cloud project, with a billing account set up, as well as
the [Google Cloud CLI](https://cloud.google.com/sdk/gcloud) installed.

Then you will need to create a configuration for your project: 

```bash
$ gcloud config configurations create cloud-run
$ gcloud auth login # and follow the steps
$ gcloud config set project YOUR_PROJECT_ID
```

## Create the project

```bash
$ npm i -g @vue/cli
$ vue create cloud-run
```

Vue CLI creates a Single Page Application type of project, so I needed to install `serve` to serve the project after the build. 

To install `serve`, run:

```bash
$ npm install --save-dev serve
```

I had to update the `package.json` file with the "start" script, like so: 

```javascript
"scripts": {
    ...,
    "start": "serve -p $PORT dist/",
}
```

Now we are ready to create the `Dockerfile`.

## Create the Dockerfile

Now we can build the app and run the `start` command.

```dockerfile
# Use the official lightweight Node.js 12 image.
# https://hub.docker.com/_/node
FROM node:12-alpine

ENV PORT=8080

# Create and change to the app directory.
WORKDIR /usr/src/app

RUN set -ex && \
    adduser node root && \
    chmod g+w /app && \
    apk add --update --no-cache \
      g++ make python \
      openjdk8-jre

# Copy application dependency manifests to the container image.
# A wildcard is used to ensure both package.json AND package-lock.json are copied.
# Copying this separately prevents re-running npm install on every code change.
COPY package*.json ./

# Install production dependencies.
RUN npm ci

# Copy local code to the container image.
COPY . ./

RUN npm run build

# Run the web service on container startup.
CMD [ "npm", "run", "start" ]
```

## Build & Deploy

Now, we can use Cloud Build to build our docker image. Cloud Build will automatically detect our `Dockerfile`, build, 
and push our image in Google Container Registry:

```bash
$ gcloud builds submit --tag gcr.io/YOUR_PROJECT/helloworld
```

Once that's done, we can run the following command to deploy our new revision to Cloud Run:

```bash
$ gcloud run deploy --image gcr.io/YOUR_PROJECT/helloworld --platform managed
```

## Benchmark

When testing, I ran a small (to avoid crazy costs) benchmark with Apache Benchmark. 

Here is the command I ran:

```bash
$ ab -n 1000 -c 80 https://cloud-run-url/
```

Here are the results: 

```
This is ApacheBench, Version 2.3 <$Revision: 1843412 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking helloworld-2fjcn3qpbq-uw.a.run.app (be patient)
Completed 100 requests
Completed 200 requests
Completed 300 requests
Completed 400 requests
Completed 500 requests
Completed 600 requests
Completed 700 requests
Completed 800 requests
Completed 900 requests
Completed 1000 requests
Finished 1000 requests


Server Software:        Google
Server Hostname:        helloworld-2fjcn3qpbq-uw.a.run.app
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-CHACHA20-POLY1305,2048,256
Server Temp Key:        ECDH X25519 253 bits
TLS Server Name:        helloworld-2fjcn3qpbq-uw.a.run.app

Document Path:          /
Document Length:        746 bytes

Concurrency Level:      80
Time taken for tests:   8.671 seconds
Complete requests:      1000
Failed requests:        0
Total transferred:      1272004 bytes
HTML transferred:       746000 bytes
Requests per second:    115.33 [#/sec] (mean)
Time per request:       693.656 [ms] (mean)
Time per request:       8.671 [ms] (mean, across all concurrent requests)
Transfer rate:          143.26 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       49  391 156.9    370     888
Processing:    32  252 106.9    285     878
Waiting:       28  198 101.0    185     876
Total:        313  643 204.8    620    1398

Percentage of the requests served within a certain time (ms)
  50%    620
  66%    703
  75%    734
  80%    790
  90%    898
  95%   1054
  98%   1136
  99%   1194
 100%   1398 (longest request)
```

## Conclusion

Really easy to deploy VueJS on Cloud Run and the performances aren't bad, even with a cold start

Deploy Vue.js on Google Cloud Run

[@preview](https://github.com/WhatDaFox/nestjs-fastify-cloud-run-poc)

## Configure Google Cloud

To be able to build and deploy, you will need a Google Cloud project, with a billing account set up, as well as
the [Google Cloud CLI](https://cloud.google.com/sdk/gcloud) installed.

Then you will need to create a configuration for your project: 

```bash
$ gcloud config configurations create cloud-run
$ gcloud auth login # and follow the steps
$ gcloud config set project YOUR_PROJECT_ID
```

## Create the project

For this proof of concept, I will only use the default NestJS application, that contains a single endpoint `/`
returning `Hello world!`: 

```bash
$ npm i -g @nestjs/cli
$ nest new cloud-run
```

Install the Fastify driver: 

```bash
$ npm i --save @nestjs/platform-fastify
```

We need to update `main.ts` to make use of the Fastify driver. Also, Cloud Run will decide the port of our application, so we have to update the `main.ts` file to reference
 the `PORT` environment variable, like so: 

```typescript
import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter({ logger: true }),
  );
  app.enableCors();
  await app.listen(parseInt(process.env.PORT) || 3000, '0.0.0.0');
}

bootstrap();
```

Now we are ready to create the `Dockerfile`.

## Create the Dockerfile

We need to containerize our application to be able to run on Cloud Run. Create a Dockerfile at the root of your project
and copy/paste the following:

> For better performance, I decided to build the app before hand and run the `start:prod` command.

```dockerfile
# Use the official lightweight Node.js 12 image.
# https://hub.docker.com/_/node
FROM node:12-alpine

# Create and change to the app directory.
WORKDIR /usr/src/app

# Copy application dependency manifests to the container image.
# A wildcard is used to ensure both package.json AND package-lock.json are copied.
# Copying this separately prevents re-running npm install on every code change.
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy local code to the container image.
COPY . ./

# Build the application
RUN npm run build

# Run the web service on container startup.
CMD [ "npm", "run", "start:prod" ]
```

## Build & Deploy

Now, we can use Cloud Build to build our docker image. Cloud Build will automatically detect our `Dockerfile`, build, 
and push our image in Google Container Registry:

```bash
$ gcloud builds submit --tag gcr.io/YOUR_PROJECT/helloworld
```

Once that's done, we can run the following command to deploy our new revision to Cloud Run:

```bash
$ gcloud run deploy --image gcr.io/YOUR_PROJECT/helloworld --platform managed
```

## Benchmark

When testing, I ran a small (to avoid crazy costs) benchmark with Apache Benchmark. 

Here is the command I ran:

```bash
$ ab -n 1000 -c 80 https://cloud-run-url/
```

Here are the results: 

```
This is ApacheBench, Version 2.3 <$Revision: 1843412 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking cloud-run-url (be patient)
Completed 100 requests
Completed 200 requests
Completed 300 requests
Completed 400 requests
Completed 500 requests
Completed 600 requests
Completed 700 requests
Completed 800 requests
Completed 900 requests
Completed 1000 requests
Finished 1000 requests


Server Software:        Google
Server Hostname:        cloud-run-url
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-CHACHA20-POLY1305,2048,256
Server Temp Key:        ECDH X25519 253 bits
TLS Server Name:        cloud-run-url

Document Path:          /
Document Length:        12 bytes

Concurrency Level:      80
Time taken for tests:   9.300 seconds
Complete requests:      1000
Failed requests:        0
Total transferred:      437004 bytes
HTML transferred:       12000 bytes
Requests per second:    107.53 [#/sec] (mean)
Time per request:       743.985 [ms] (mean)
Time per request:       9.300 [ms] (mean, across all concurrent requests)
Transfer rate:          45.89 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       79  461 213.7    430    2633
Processing:    37  208 118.9    200     506
Waiting:       22  163 105.3    139     501
Total:        129  669 220.7    626    2739

Percentage of the requests served within a certain time (ms)
  50%    626
  66%    702
  75%    768
  80%    772
  90%    862
  95%   1161
  98%   1371
  99%   1576
 100%   2739 (longest request)
```

## Conclusion

Compared to my previous experiment with the default installation of NestJS, I didn't observe any improvement in response time.

Writing about tech, product, and developer experience.

Codebits NFT

2021: Year in Review

Moderate posts automatically with the Perspective API

Deploy Vue.js on Google Cloud Run

Deploy NestJS with Fastify on Google Cloud Run