Forem: Duncan Lew

How I Built a SpeedtestTracker with Raspberry PI and AWS Lambda

Duncan Lew — Fri, 07 Feb 2025 21:56:59 +0000

Our daily lives, whether we’re gaming, streaming or working from home, revolve around the internet and all the digital services that it provides. A pillar of this connection is the reliability of the download and upload speeds that your ISP can deliver. When you sign up for a service that promises certain speeds, you want to validate that you get what you pay for. This need inspired me to create SpeedtestTracker: a system that performs daily speed tests, stores the result in a database and even sends out an alert via a Telegram bot. This blog post will walk you through the steps I took to bring this idea to life.

1. Designing the system

SpeedtestTracker is set up as a two part system:

the client for running speedtests, extracting and saving the results
the server for processing, storing and sending alerts of the data

The Raspberry Pi, as the title already reveals, will act as the client and the server will be made of an AWS Lambda function. To streamline the development, I consolidated both the client-side and server-side components into a single TypeScript project. This approach enabled interface sharing, simplifying the communication between the two components.

The following dependencies played an important role in the implementation:

Node.js v22
Axios for sending data to the server-side
esbuild for bunding both the client and server separately
dotenv for loading environment variables
node-cron for scheduling daily speedtests on the client
Pino for structured logging
Telegraf as a library for interacting with Telegram bots
AJV for validating JSON responses from the speedtest cli

If this sounds like something that you would like to try out or improve, check out the souce code on GitHub.

2. Hardware setup with the Raspberry Pi as the client

The backbone of the project starts with the Raspberry Pi. A very small, yet powerful and energy efficient computer that can run speedtests according to a schedule. Running frequent speedtests the whole day could congest your network, so I opted for a daily schedule instead. For my use-case, I don’t need to see deviations in my speed throughout the day. Having my Pi run a speedtest once a day fits my needs to collect data for statistical analysis over time.

2.1 Speedtest-cli

The Pi is going to run a shell script that executes the Speedtest-cli tool to capture the Internet speed results. Here’s the command it uses:

speedtest --format=json

To automate the process, I wrote a TypeScript function that executes the shell command with error handling and parsing of the JSON result. Here’s the implementation:

export function runSpeedtest(): Promise<any> {
  const command = "speedtest --format=json";

  return new Promise((resolve, reject) => {
    exec(command, (error, stdout, stderr) => {
      if (error) {
        reject(`Error executing command: ${error.message}`);
      }

      if (stderr) {
        reject(`Standard Error: ${stderr}`);
      }

      try {
        const result = JSON.parse(stdout);
        resolve(result);
      } catch (parseError) {
        reject(`Failed to parse JSON output: ${parseError}`);
      }
    });
  });
}

2.2 Sending data to the endpoint

After the JSON result is retrieved, we can send this data to an endpoint. This endpoint URL is protected by an API key and triggers an AWS Lambda when it’s called. I’m using the address in the input argument as a location identifier. Here’s the function for sending the data via a POST request:

export const saveSpeedTestResult = async (
  speedtestResult: SpeedtestResultDto,
  url: string,
  apiKey: string,
  address: string,
) => {
  const headers = {
    "Content-Type": "application/json",
    "x-api-key": apiKey,
  };

  const payload: SpeedtestTrackerPayload = {
    pk: address,
    result: speedtestResult,
  };

  const response = await axios.post(url, payload, { headers });
};

2.3 Scheduling a cron job

With these methods in place, we can schedule the speedtest to run once a day at a specific time with node-cron. This is what the cron job looks like:

cron.schedule("0 13 * * *", async (result) => {
  const url = process.env.URL as string;
  const apiKey = process.env.API_KEY as string;
  const address = process.env.ADDRESS as string;

  try {
    const speedtestResult = await runSpeedtest();
    await saveSpeedTestResult(speedtestResult, url, apiKey, address);
  } catch (error) {
    logger.error({ error }, "Error in running the cron job");
  }
});

2.4 Managing the node process with PM2

When running this script on the Raspberry Pi we want to keep the cron job alive. If you start the node process for the cron job via an SSH session, the process will terminate when you terminate the SSH session. This is where PM2 comes in. PM2 is a process manager that can run node processes in the background indefinitely.

While PM2 can run TypeScript directly, it’s not recommended in production due to inefficiency. To overcome this, we will first transpile TypeScript into JavaScript with esbuild:

esbuild lib/speedtest-cli/index.ts --bundle --platform=node --sourcemap --target=node22 --legal-comments=none --outfile=build/speedtest-cli/index.js

Run the transpiled JavaScript with PM2:

pm2 start build/speedtest-cli/index.js

For convenience, these commands can be added to the package.json. As long as your Raspberry Pi remains powered on, this node process will run in the background indefinitely.

3. AWS Lambda as the server

On the server side, I use an AWS Lambda function to process and store the results. For the infrastructure, project setup and the deployment, I rely on AWS CDK.

3.1 AWS CDK and project setup

The AWS Cloud Development Kit, or AWS CDK, allows me to define the cloud infrastructure using a familiar programming language instead of managing a big YAML or JSON file that is required by AWS CloudFormation. In my situation I’m using TypeScript to define my resources.

To initialize a CDK project, I ran the following command in my SpeedtestTracker project:

cdk init app --language typescript

Next, I installed the esbuild dependency that will be used by the CDK to compile my TypeScript code:

npm install --save-dev esbuild

Inside the lib directory, CDK generates a file called speedtest-tracker-stack.ts . This acts as the scaffolding where you can define your resources.

3.2 Adding an AWS Lambda resource

For my Lambda resource I added the following code:

const fn = new NodejsFunction(this, "SaveSpeedtestFunction", {
  entry: path.resolve(__dirname, "lambda-handler/index.ts"),
  runtime: lambda.Runtime.NODEJS_LATEST,
  handler: "handler",
  bundling: {
    sourceMap: true,
  },
  environment: {
    NODE_OPTIONS: "--enable-source-maps",
    BOT_TOKEN: process.env.BOT_TOKEN!,
    CHAT_ID: process.env.CHAT_ID!,
  },
});

The lambda handler according to this snippet will be located in the lambda-handler directory and I’ve included the required environment variables that should be included for the lambda to run correctly.

3.3 Adding a DynamoDB resource for data storage

To store the results, I’ve set up a DynamoDB table. The following code snippet creates a table with the partitionKey and sortKey and grants read/write rights to the Lambda function:

const table = new dynamodb.TableV2(this, "Table", {
  partitionKey: { name: "pk", type: dynamodb.AttributeType.STRING },
  sortKey: { name: "epochTime", type: dynamodb.AttributeType.NUMBER },
  tableName: "speedtest-tracker",
});
table.grantReadWriteData(fn);

3.4 Creating an securing the API Gateway

An API Gateway serves as the interface between the client and the server. To secure the API, I added an API key and linked it to a usage plan. The usage plan limits request rates, ensuring that the API stays performant. Here’s the code:

const api = new apigw.LambdaRestApi(this, `ApiGwEndpoint`, {
  handler: fn,
  restApiName: `SpeedtestTrackerApi`,
  deployOptions: {
    stageName: "prod",
  },
  defaultMethodOptions: {
    apiKeyRequired: true,
  },
});

const plan = api.addUsagePlan("UsagePlan", {
  name: "SpeedtestTrackerUsagePlan",
  throttle: {
    rateLimit: 10,
    burstLimit: 2,
  },
});

const apiKey = api.addApiKey("ApiKey", {
  apiKeyName: "SpeedtestTrackerApiKey",
});

plan.addApiKey(apiKey);
plan.addApiStage({
  stage: api.deploymentStage,
});

3.5 Deploy the defined resources

With all the resources defined, they can be synthesized and deployed with the following commands:

cdk synth
cdk deploy

3.6 Lambda handler

The lambda handler will act as the server-side part, that will process the incoming speedtest result from the Raspberry Pi, validates it using the AJV schema validation and then stores it in DynamoDB. At the end we will also send a success/failure message via Telegram using Telegraf.

The core lambda handler looks like this:

export const handler: APIGatewayProxyHandler = async (
  event: APIGatewayProxyEvent,
  context: Context,
): Promise<APIGatewayProxyResult> => {
  try {
    withRequest(event, context);
    logger.info({ data: event }, "Received event");

    const payload = extractPayload(event);
    const { pk: primaryKey, result: speedtestResultDto } = payload;
    const speedtestResult = getSpeedtestResult(speedtestResultDto);
    const telegramMessage = constructSuccessMessage(
      primaryKey,
      speedtestResult,
    );

    const putResponse = await putItem(primaryKey, speedtestResult);

    await sendTelegramMessage(telegramMessage);
    return successResponse(JSON.stringify(putResponse, null, 2));
  } catch (error) {
    logger.error("Error in the lambda handler");
    let statusCode: number;
    let message: string;

    switch (true) {
      case error instanceof SpeedtestTrackerValidationError:
        statusCode = 400;
        message = (error as SpeedtestTrackerValidationError).message;
        break;
      case error instanceof SyntaxError:
        statusCode = 400;
        message = (error as SyntaxError).message;
        break;
      default:
        statusCode = 500;
        message = `Unknown error occurred: ${error}`;
        break;
    }

    const stringifiedMessage = JSON.stringify(message, null, 2);
    const telegramMessage = constructFailureMessage(stringifiedMessage);

    await sendTelegramMessage(telegramMessage);
    return errorResponse(statusCode, stringifiedMessage);
  }
};

3.7 JSON validation

In the lambda handler, we’re using an extractPayload function that parses and validates the incoming JSON against a predefined schema. If there are missing fields in the payload, an error SpeedtestTrackerValidationError will be thrown to prevent incorrect data from being stored into the DynamoDB.

extractPayload = (event: APIGatewayProxyEvent) => {
  if (event.body === null) {
    throw new SpeedtestTrackerValidationError("Payload may not be empty");
  }

  const parsedBody = JSON.parse(event.body);

  const isValid = validate(parsedBody)
  if (!isValid) {
    throw new SpeedtestTrackerValidationError(`JSON validation failed with error: ${JSON.stringify(validate.errors)}`);
  }

  return parsedBody as SpeedtestTrackerPayload;
}

The setup for the validate function can be found over here in [the project].(https://github.com/duncanlew/SpeedtestTracker/blob/main/lib/lambda-handler/schema.ts)

3.8 Save result in DynamoDB

The lambda handler will persist the speedtest result in DynamoDB using the putItem utility function. It will structure the speedtest result for querying and analysis. Each entry requires a primary key (pk) and a sort key. The pk will store the address of the home for which I’m tracking the speedtest results. The sort key will store the epoch time in seconds. Using this composite key of pk and sort key, you will be able query for all the speedtest results of a range.

export const putItem = async (
  primaryKey: string,
  speedtestResult: SpeedtestResult,
) => {
  const now = new Date();

  const command = new PutCommand({
    TableName: TABLE_NAME,
    Item: {
      pk: primaryKey,
      epochTime: toEpochSeconds(now.getTime()),
      date: now.toISOString(),
      payload: speedtestResult,
      downloadMbps: speedtestResult.downloadMbps,
      uploadMbps: speedtestResult.uploadMbps,
      pingMs: speedtestResult.pingMs,
    },
  });

  return await docClient.send(command);
};

3.9 Send Telegram message

For the telegram integration, I made use of the Telegraf dependency which requires two variables:

CHAT_ID
BOT_TOKEN

To get the BOT_TOKEN, you will first have to create a specialized chatbot via the Telegram app. During the creation of your chatbot, a token will unique and private token will be generated. The CHAT_ID is the specific chat session for which you want the chatbot to send a message.

These env variables will be handled in the .env file which can be loaded with the dotenv dependency.

import { Telegraf } from "telegraf";
import * as dotenv from "dotenv";

const chatId = process.env.CHAT_ID!;
const botToken = process.env.BOT_TOKEN!;
const bot = new Telegraf(botToken);

export const sendTelegramMessage = async (message: string): Promise<void> => {
  await bot.telegram.sendMessage(chatId, message);
};

4. Takeaway

Building a SpeedtestTracker with a Raspberry Pi demonstrates how to turn a simple IoT device into a monitoring tool for your internet performance. We also leveraged AWS native tools like AWS CDK, AWS Lambda, and DynamoDB to process, store, and send alerts for the daily speedtest results. This project serves as an important learning tool to apply your knowledge of how to develop and utilize both cloud and hardware resources to achieve your goal. There are many small but valuable challenges that you’ll encounter like setting up deployments, validating JSON for data storage and configuring Telegram alerts. No matter whether you’re looking into learning about network monitoring or wanting to expand your skills in serverless architecture, this project is an ideal starting point. Happy coding! 🚀

duncanlew / SpeedtestTracker

SpeedtestTracker

Built with Raspberry Pi and AWS Lambda

The accompanying blog post for this project can be found on Medium and dev.to.

View on GitHub

If the content was helpful, feel free to support me here:

A Guide to Parsing CSV Files in Go

Duncan Lew — Tue, 02 Apr 2024 20:30:34 +0000

Among all the programming languages available, Go, or Golang, has become more popular in the past years. In 2023 Go re-entered the top 10 spot of most popular languages, according to InfoWorld. This language has garnered so much clout because of its simplicity, efficiency and ability to compile directly to machine code, offering many speed benefits.

As someone new to Go, I would like to dive deeper into this language to find out its potential. The best way to learn something new is by doing it. So that is why I started on a project to not only hone my Go skills, but also solve a common task: CSV parsing and data manipulation. Through this blog post I will illustrate how to parse a CSV file containing rows of articles. These articles need to be filtered based on a property and then written to a new CSV file. The accompanying source code to this project can be found on GitHub.

Prerequisites

To get started with the project, you will need the following:

Go version 1.22.1 or later
IDE of choice (e.g. Visual Studio Code)

1. Initialize the project

The first step in creating our Go project involves setting up a new directory called demo-go-csv-parser. Then navigate into this directory.

mkdir demo-go-csv-parser
cd demo-go-csv-parser

The next step is to initialize a Go module called demo-go-csv-parser

go mod init demo-go-csv-parser

A go.mod file will be created inside your directory. This module file is used to organize and manage dependencies, similar to the package.json of the Node.js ecosystem.

2. Install the CSV dependency

The dependency that we're going to use is called gocsv. This package provides a variety of built-in functions for parsing CSVs using Go structs. To include the dependency in your project, run the following command:

go get github.com/gocarina/gocsv

3. Write the code

It's time to dive into the coding aspect of the project to get a taste of how the Go programming language works. To maintain clarity, we're going to break down the coding process into the following sections:

Create main file
CSV file setup
Read file
Filter articles
Write file By decomposing the whole project into bite-size chunks, we can tackle each part with more attention. ### Create main file In the root folder of the demo-go-csv-parser project, create a file called main.go. Populate the file with the following:

package main

import (
    "github.com/gocarina/gocsv"
    "os"
)

The first line indicates the package name for the file. Every Go file needs to start with a package declaration. The second part of the file consists of the import block with two dependencies:

gocsv: the external package that we've previously installed
os: this built-in Go dependency will be used for I/O functionalities to read and write CSV files.

CSV file

For this project, we're going to use a sample CSV file that you can find at this GitHub link. Feel free to download and include this sample file in your project. Most CSV files are structured and have a header to denominate what each column will be used for. In Go, we can map each of CSV row into a custom data structure called struct. This struct will contain fields corresponding to a CSV column.

In our CSV file, the first two columns in this CSV file are named Title and URL. Mapping these two into a Go struct called Article would look like this:

type Article struct {
    Title string 
    URL string
}

The gocsv dependency supports the usage of tags to indicate what the column name is in the CSV file. This is a handy feature in cases where you would have spaces in the column name or if the column name deviates from the actual field name we would like to use in the Go struct.

Considering all the columns of our CSV file, we can add all the columns with the csv tags to the final Article struct which should look like this:

type Article struct {
    Title           string `csv:"Title"`
    URL             string `csv:"URL"`
    DocumentTags    string `csv:"Document tags"`
    SavedDate       string `csv:"Saved date"`
    ReadingProgress string `csv:"Reading progress"`
    Location        string `csv:"Location"`
    Seen            string `csv:"Seen"`
}

Read file

We are going to get to the crux of the project. We need to be able to read a CSV file called example.csv located in the root directory. To achieve this, we're going to write a separate ReadCsv() function to achieve this:

func ReadCsv() []*Article {
    // Try to open the example.csv file in read-write mode.
    csvFile, csvFileError := os.OpenFile("example.csv", os.O_RDWR, os.ModePerm)
    // If an error occurs during os.OpenFIle, panic and halt execution.
    if csvFileError != nil {
        panic(csvFileError)
    }
    // Ensure the file is closed once the function returns
    defer csvFile.Close()

    var articles []*Article
    // Parse the CSV data into the articles slice. If an error occurs, panic.
    if unmarshalError := gocsv.UnmarshalFile(csvFile, &articles); unmarshalError != nil {
        panic(unmarshalError)
    }

    return articles
}

The function ReadCsv can be broken down into the following parts:

The function returns an slice of pointers to the elements of type Article.
We use os.OpenFile() to open example.csv with specific flags in read-write mode. The flag os.ModePerm indicates a the file mode for creating new files if necessary. This openFile() either returns a file handle (csvFile) or an error (csvFileError).
Immediately in the next step, we check for errors. The nil is Go's equivalent to null or empty. If an error was stored in the variable, we exit the function and report the error.
The defer csvFile.Close() makes sure that the opened csvFile is always closed regardless of when the function return happens. This is best practice for file resource management.
With the file open and error handling in place, we're going to proceed to parse the CSV content. The gocsv.UnmarshalFile() function is provided with the file handle and the reference articles slice. It reads the CSV rows and populates the slice with Article instances.
If the parsing of the csvFile completes without errors, the articles variable will be returned correctly. ### Filter articles After successfully parsing the CSV file and storing its contents into an articles slice, the next step is to filter this slice. We want to only retain the articles whose location is set to inbox. We're going to create a function called GetInboxArticles to achieve this:

func GetInboxArticles(articles []*Article) []*Article {
    // Initialize an empty slice to store inbox articles
    var inboxArticles []*Article

    // Iterate through each article in the provided slice.
    for _, article := range articles {
        // Check if the article's Location is equal to inbox
        if article.Location == "inbox" {
            // If the article's location is inbox, add it to the inboxArticles slice
            inboxArticles = append(inboxArticles, article)
        }
    }

    return inboxArticles
}

Let's closely examine this function:

This function accepts a slice of pointers to the Article struct and returns a slice of the same type.
We create an empty slice called inboxArticles that will store the articles that meet the inbox criteria.
We create a for loop that's going to iterate through each element of the articles slice. If the location property of the article is equal to inbox, we append this element to the inboxArticles slice.
After the loop has finished, we return the slice inboxArticles.

Write file

Now that we've extracted the inbox articles, we want to persist this data into a new CSV file. Writing contents to a CSV file will be similar to reading the contents as in the previous steps. We're going to create a function WriteCsv that looks like this:

func WriteCsv(articles []*Article) {
    // Open result.csv for writing; create it if it doesn't exist, or overwrite it if it already exists.
    resultFile, resultFileError := os.OpenFile("result.csv", os.O_WRONLY|os.O_CREATE|os.O_TRUNC, os.ModePerm)

    // Check for errors when opening or creating the file. If there's an error, panic.
    if resultFileError != nil {
        panic(resultFileError)
    }
    defer resultFile.Close()

    // Marshal the articles into the CSV format and write them to the result.csv file
    if marshalFileError := gocsv.MarshalFile(&articles, resultFile); marshalFileError != nil {
        panic(marshalFileError)
    }
}

Let's go through this piece of code step by step:

We create a function WriteCSV that accepts an input argument of Article slice.
We use os.OpenFile() to create or open the file results.csv. The flags passed into the function ensure that the file is write-only, will be created if it doesn't exist, and overwritten if it already exists.
After trying to open the file result.csv, we check if the variable resultFileError contains an error. If it does contain an error, we exit the function with the panic operator.
For good I/O hygiene we ensure that the resultFile is closed whenever the function exits with the defer.
Finally, we are going to write the contents of the articles to the resultFile with gocsv.MarshalFile(). The MarshlFile function expects to arguments: reference to the slice, and the CSV file to which it should write the contents. If there was an error during the marshaling process, the function will panic. ### Putting it all together We've written three helper functions: Reading a CSV file, writing to a CSV file and filtering articles. We're going to combine all of these three into a main function like this:

func main() {
    articles := ReadCsv()
    filteredArticles := GetInboxArticles(articles)
    WriteCsv(filteredArticles)
}

Run 🚀

With all the Go code in place, it's time to run it! This can be done with the following command:

go run main.go

If done correctly, your project will have a new file named result.csv. Congratulations, you have just run your first Go project! 🎉

Takeaway

For our everyday task of processing a CSV file, we can see that Go's simplicity, efficiency and easy-to-learn syntax shine brightly. This makes it easy for new learners to pick up this powerful language and rich ecosystem of packages and utilities. Keeping an eye on new tools and languages like Go can expand your skills toolset and offer you a different vantage point to think and solve problems. Of course the best tool for the job will depend on your project's requirements. Perhaps you will consider integrating Go for your next software project. Happy coding! 🧑‍💻

duncanlew / demo-go-csv-parser

A Guide to Parsing CSV Files in Go

The tutorial for this project can be found on Medium and dev.to.

View on GitHub

If the content was helpful, feel free to support me here:

Migrate your data from Readwise Reader to Omnivore

Duncan Lew — Wed, 10 Jan 2024 21:31:35 +0000

Readwise Reader and Omnivore are both great read-later services. Each offers unique features and experiences. Although I was an avid user of Readwise Reader, I didn't use all of its features to their fullest. Omnivore, with its open-sourced nature, catered more closely to my needs. In situations where your needs change, migrating your saved content from Readwise Reader to Omnivore could become a necessity. Facing this issue myself, I decided to write my own tool to facilitate this process.

I had two main reasons for developing this tool. Firstly, I wanted to address this need that I have to seamlessly transfer my content between these two services. Fortunately, Omnivore provides a very extensive API to achieve this. Secondly, this project served as an opportunity for me to learn Rust, a programming language popular for its performance and memory safety.

This blog post will describe the steps you need to perform to import your data into Omnivore. The GitHub project with the source code can be found here.

Prerequisites

To get started with the data migration tool, you will need the following:

Exported CSV file from Readwise Reader using the web interface. Check Readwise's FAQ for the steps.
API key from Omnivore

Running the importer tool

There are two ways to run the importer tool. The easiest way without requiring to install Rust is by using the binary. For those who would like to explore the repository or make changes to the source code, it's also possible to run the tool with the Rust build tools.

Running it with the binary

A compiled binary is available for download in the project GitHub Releases of this project.

1. Download the binary

Navigate to the Release page and download the latest version for your operating system

2. Run the binary

Open a terminal and navigate to the directory where you downloaded the binary. Add your CSV file in that directory and then run the following command with the two parameters replaced

./readwise_to_omnivore_importer --key YOUR_API_KEY --file-path   PATH_TO_CSV

Running it locally

To run the project locally, make sure to first install Rust on your local machine. This should only take a few minutes. When that is done, open up a terminal and follow these steps:

1. Clone the repository

git clone git@github.com:duncanlew/readwise-to-omnivore-importer.git   
cd readwise-to-omnivore-importer

2. Add your CSV file

Add your exported CSV file from Readwise Reader into the directory called readwise-to-omnivore-importer.

3. Run the importer

In the following command replace YOUR_API_KEY and PATH_TO_CSV with your api key and file path to your CSV, respectively.

cargo run -- --key YOUR_API_KEY --file-path PATH_TO_CSV

Takeaway

Transitioning your reading list from Readwise Reader to Omnivore is a streamlined process thanks to their easy export and import tools and APIs. Moreover, creating your own tool using an unfamiliar tech can be both rewarding and educational. I hope this guide, along with the provided source code in the GitHub project inspires you to embark on your own journey of continuous learning. Happy coding! 😎

duncanlew / Readwise-to-Omnivore-Importer

Readwise to Omnivore importer

The "Readwise to Omnivore Importer" is a custom tool developed using Rust to facilitate the import of articles from Readwise Reader into Omnivore. It uses a CSV file exported from Readwise Reader using the web interface The importer parses this CSV file, ensuring all data is transferred to Omnivore. Additionally, a verification check is run to confirm the existence of a URL before importing it into Omnivore. This is done to avoid polluting your Omnivore library with broken links Furthermore, the tool provides clear logging results and a summary of the import process.

Features

Parse the exported CSV file
URLs that are invalid won't be imported into Omnivore
Import into Omnivore using an API key for authentication
Detailed logging of invalid and errored results shown in the terminal and stored as a CSV file
Possibility to run the project locally or use the tool as…

View on GitHub

If the content was helpful, feel free to support me here:

Building Your First Chatbot using ChatGPT with TypeScript in NodeJS

Duncan Lew — Sun, 07 May 2023 17:42:09 +0000

Artificial intelligence (AI) is rapidly becoming one of the most promising technologies, particularly with the introduction of generative AI chatbots. OpenAI launched its first AI chatbot in November 2022 and within a short couple of months, it has become the fastest-growing app in history. Who would have known that one of the most transformative technologies to be introduced in 2022 would be a simple text box to chat with a computer program that can give you an answer to almost any question that you ask it? Many industries have shifted their strategies to incorporate and adopt more AI technologies into their core services and products.

It can be difficult to wrap your head around the rapid developments happening in the AI space, and many questions arise about how to best use AI to improve services. In this blog post, we'll explore the building blocks of how to build a simple NodeJS application to chat with ChatGPT using TypeScript. This is going to be a command-line interface to interact with the chatbot.

What you will need to get started:

Node.js version 18 or newer
IDE of choice (e.g. Visual Studio Code)

1. Retrieve your API key from OpenAI

In order to get started, you will need to create an API key to use ChatGPT from your Node.js application. Navigate to https://platform.openai.com. If you’ve used ChatGPT before, you will have already created an OpenAI account and can log in immediately. If not, create your account first to get started.

Once you’re signed in, click on the top right corner of your profile page to open up a dropdown menu. Select the option “View API keys”.

A settings page will be shown in which you can generate a new secret key. Clicking on this button will trigger a modal to pop up displaying your new API key. Make sure to copy this value and store it in a safe place. This will be needed for the Node.js application.

Are there costs for using the API?

Generating an API key, which is required to access the OpenAI API, can be done for free. As of the writing of this article, OpenAI provides users with a $5 credit that can be used to test their API without incurring any extra costs. If you wish to continue using the API after your free credits have been depleted, you will need to enter your billing information. It's important to keep in mind that OpenAI offers different pricing plans based on usage. Ensure your usage stays within budget if you decide to pay for a pricing plan.

2. Set up a project with the required dependencies

For our Node.js application, we’re going to create a directory to get started. We’re going to call this directory chatgpt-typescript:

mkdir chatgpt-typescript

Now we can navigate into the newly created directory to create the src directory to store our source code and initialize an npm project:

cd chatgpt-typescript
mkdir src
npm init -y

The flag -y means that we’re going to accept the defaults for creating the npm project.

Now we need to install the production and development dependencies of our project:

npm install openai dotenv chalk
npm install -D typescript @types/node ts-node

The dependency openai is package that provides wrapper methods to access the OpenAI API directly. Dotenv is a package that we use to easily load in environment variables. Finally, chalk is a package that we use to add beautifully colored styling to the terminal.

3. Set up the TypeScript compiler

To get started with TypeScript in our project, we need to initialize a TypeScript configuration file. We can do this with the following command:

npx tsc --init

The TypeScript compiler will create a tsconfig.json file with some default values. Replace the contents of that file with the following:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "ESNext",
    "moduleResolution": "nodenext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "rootDir": "./src",
    "outDir": "./build",
  }
}

This is the file that we’ll be using for this blog post. We’ve defined that we will be using the modern ESM modules and that our root directory is inside ./src.

Inside our TypeScript files, we want to be able to use the import syntax. To do that, we need to instruct the compiler to use JavaScript modules. We are also going to add a build script and a start script to the package.json file. This will be useful when we want to play with our command-line interface. Add the following lines to your package.json file:

{
  ...
  "type": "module",
  "scripts": {
    "build": "tsc",
    "start": "npm run build && node build/index.js"
  },
  ...
}

4. Add your API key to the .env file

The dependency dotenv that we installed allows Node to load environment variables from the .env file into its global variable called process.env. The API key that we generated, needs to be loaded into our Node.js application. We don’t add this API key directly into our TypeScript file, but place this inside .env file.

Create a .env file inside your root directory and add the following line to it:

OPENAI_API_KEY=<<replace-with-your-openai-api-key>>

Make sure to replace the placeholder with the contents of your API key.

5. Write your first Chatbot in TypeScript

Now it’s time to write our code to make an API call. Create an index.ts in the src directory.

The first thing that we’re going to do is add the following import lines for the required packages:

import { Configuration, OpenAIApi, ChatCompletionRequestMessage } from 'openai';
import * as readline from 'readline';
import * as dotenv from 'dotenv';
import chalk from 'chalk';

The next step is to load in the OpenAI API key. We need the this key to make API calls to OpenAI to interact with ChatGPT.

// Load OpenAI API key from environment variable
dotenv.config();
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

We need to initialize two objects. A messages array to store the history of our interaction with the chatbot. This helps the chatbot to keep the history of your messages in memory when giving you back a response. The second object that we need to initialize is the userInterface object. We use this object to interact with the command-line interface.

// Initialize messages array
const messages: ChatCompletionRequestMessage[] = [];

// Initialize readline interface
const userInterface = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

Now that we have initialized the userInterfaceobject, we can set the prompt that the user sees when their input is required with .setPrompt(). After that, we add the .prompt() method so that the interface is going to wait for the user to add their input.

// Set prompt for user
userInterface.setPrompt(`\n${chalk.blue('Send a message:')}\n`);
userInterface.prompt();

When you see the message Send a message: , the user can enter a prompt for the chatbot. We want the chatbot to receive this prompt when the user presses the Enter button. We can do this with the following lines of code:

userInterface.on('line', async (input) => {
  // Create request message and add it to messages array
  const requestMessage: ChatCompletionRequestMessage = {
    role: 'user',
    content: input,
  };
  messages.push(requestMessage);

  // Call OpenAI API to generate response
  const completion = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    messages: messages,
  });

  // Display response message to user
  const responseMessage = completion.data.choices[0].message;
  if (responseMessage) {
    console.log(chalk.green(responseMessage.content));
    messages.push({
      role: responseMessage.role,
      content: responseMessage.content,
    });
  }

  // Prompt user for next message
  userInterface.prompt();
});

When the user presses Enter in the command-line interface, the program triggers the line event and extracts the user’s input from the input variable. The program then creates a ChatCompletionRequestMessage to store the input and stores it in the messages array. This message’s role property is set to user to indicate that it represents a user’s input. When ChatGPT generates a response, the program creates another ChatCompletionRequestMessage with the role property set to assistant to indicate that it presents the program’s response.

Finally, the program is going to make an API call to OpenAI generate a response based on the user’s input. This response is stored in the messages array and will be displayed in the command-line interface.

Optionally, when the user quits the program, we can display an exit message:

// Handle program exit
userInterface.on('close', () => {
  console.log(chalk.blue('Thank you for using this Demo'));
});

The complete code with all the required interactions should look like this:

import { Configuration, OpenAIApi, ChatCompletionRequestMessage } from 'openai';
import * as readline from 'readline';
import * as dotenv from 'dotenv';
import chalk from 'chalk';

// Load OpenAI API key from environment variable
dotenv.config();
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

// Initialize messages array
const messages: ChatCompletionRequestMessage[] = [];

// Initialize readline interface
const userInterface = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

// Set prompt for user
userInterface.setPrompt(`\n${chalk.blue('Send a message:')}\n`);
userInterface.prompt();

userInterface.on('line', async (input) => {
  // Create request message and add it to messages array
  const requestMessage: ChatCompletionRequestMessage = {
    role: 'user',
    content: input,
  };
  messages.push(requestMessage);

  // Call OpenAI API to generate response
  const completion = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    messages: messages,
  });

  // Display response message to user
  const responseMessage = completion.data.choices[0].message;
  if (responseMessage) {
    console.log(chalk.green(responseMessage.content));
    messages.push({
      role: responseMessage.role,
      content: responseMessage.content,
    });
  }

  // Prompt user for next message
  userInterface.prompt();
});

// Handle program exit
userInterface.on('close', () => {
  console.log(chalk.blue('Thank you for using this Demo'));
});

6. Interact with your chatbot 🤖

Now it’s time for the moment of truth! Run the following command in your terminal to start up your chatbot:

npm run start

This command is going to transpile your TypeScript code to JavaScript and run the compiled code in build/index.js . You can now start interacting with ChatGPT using your TypeScript code. Ask it anything that you want. An example of this interaction looks like this:

Takeaway

ChatGPT is a powerful tool that can be leveraged by developers to add chatbot functionality to their existing applications. With the new wave of technological innovations happening in AI, learning to use these tools can help you to understand these trends better and provide users with an enhanced experience. By following this tutorial, you can see that it’s quite straightforward to get started with a simple example of connecting to ChatGPT. The next step for you could be to think of ways to integrate a ChatGPT-powered chatbot into your current services or workflows. Happy coding! 😎

The complete source code can be found here.

duncanlew / demo-chatgpt-typescript

Building Your First Chatbot using ChatGPT with TypeScript in NodeJS

The tutorial for this project can be found on Medium and dev.to.

Running locally

When running this locally, make sure to first create a .env file and place your OpenAI API key in there. You can also check step 4 of my tutorial on Medium or dev.to for more background information on this.

View on GitHub

If the content was helpful, feel free to support me here:

Develop Anywhere, Anytime with GitHub Codespaces

Duncan Lew — Sat, 04 Feb 2023 19:44:10 +0000

A Guide to Setting Up and Using GitHub Codespaces for Streamlined Development

Getting started with software development in any new project can be a daunting process. Depending on whether you’re running a Windows, Mac, or Linux operating system, the instructions to boot up the project correctly can differ a lot. There are many dependencies, extensions, and command-line tools to install and also network configurations that you might have to set up. And you haven’t even started writing your first line of code! 🤯

What if there is a way to skip the hassle of getting your local dev environment up and running and immediately start-up the project without any hassle? GitHub Codespaces is here to save the day! 🤩 GitHub Codespaces is a cloud-based development environment that comes fully configured with all the dependencies, IDE, and extensions that you need to start contributing your first line of code. The best part of GitHub Codespaces is that it can run in any browser opening up the possibility to use your iPad, Android tablet, or even your Chromebook as a development machine. You don’t have to worry anymore about the hardware specs of your device since the whole dev setup is running in the cloud. The only thing that you need is a stable internet connection.

In this article, we’re going to explore how to get started with GitHub Codespaces and use a sample GitHub repository to start up the project, make a change and commit a line of code. Let’s get started!

What do you need to get started with GitHub Codespaces?

There are many ways to use GitHub Codespaces. The method that we will be using in this article is to start Codespaces from inside your browser. There are also other ways to start it up directly with an IDE like Jetbrains IntelliJ or Visual Studio Code. These methods for starting up Codespaces from an IDE won’t be covered in this article.

Anyone with a GitHub account can get started with Codespaces. It is free for individual use for up to 60 hours a month. After you exceed this limit, you will have to sign up for a plan to continue coding in the cloud-hosted environment. 60 hours a month should be ample time to decide whether you want to continue using this service full-time or as a side addition to your development tools.

1. Start CodeSpaces from a GitHub repository

You can start a Codespaces instance from any GitHub repository. I have set up a working React project in a public repository that you can use for Codespaces. Feel free to test it out directly from my repository.

When you open up the repository page, you will see a green Code button in the upper right corner:

Click on it to open up a menu. Select the Codespaces tab and then a different green button called Create Codespace on main will be shown.

Clicking on Create Codespace on main will start up a cloud development environment. A loading screen will be shown while the creation is in progress:

After the cloud environment is up and running, you will see a Visual Studio Code instance running from inside your browser:

You’re now ready to start using CodeSpaces! 💻

2. Start the React project from inside Codespaces

Now that your Codespaces instance is up and running. It’s time to do some actual coding! In the open terminal that is on display, type npm run start and wait for the process to start up.

When the React project has started up, it will open up a new tab in your browser in which you can see your front-end page:

You have just successfully started your React application from inside the cloud environment! No setup, dependency management or extensions on your own machine is required to make it work. 😎

3. Make a code contribution inside Codespaces

Let’s go back to our browser tab with Codespaces up and running. Navigate to the following file: src/App.tsx. On line 11 change the line to GitHub Codespaces and save your changes:

Go back to your tab in which you have your active front-end page running and refresh your page. You will see your changes immediately reflected on the screen.

Now that we’ve made our textual change in App.tsx, we can commit and push this change to our branch. This can also be easily done inside your Codespaces instance. You can either do this from the terminal or from the Source Control sidebar. Being able to perform git actions will depend on your access rights to the GitHub repository from which your Codespaces instance is running.

4. Note on port forwarding

When you ran npm run start in the previous steps, a local development server was started up from inside Codespaces. When an application inside Codespace starts a server with a localhost URL, port forwarding will automatically get set up so that you can visit the served page from a URL that looks like this:

This URL can only be accessed privately. This means that only you can access it with the GitHub account you used to start Codespaces. If you want to share this URL with friends or colleagues so that they can check out the web server from their own devices, you have to make sure that the PORT visibility is set to public. This can be done easily from within Codespaces itself. In the Panel window, click on the PORTS tab. Our React application was being served on localhost:3000. The row with Port number 3000 is the one that corresponds to our local web application. Right-click on this row and click on Port Visibility and then Public to enable public access to your served React page. The options for changing the port visibility will look like this:

5. Stop or terminate Codespaces

When you’re done with your coding session in Codespaces, closing the browser tab is not enough to terminate Codespaces. The cloud instance will still be running on GitHub’s server and each hour being run counts up to your 60-hour monthly allowance. You can either choose to pause or stop your Codespaces or to delete your Codespace instance completely. This can be done on the page of the GitHub repository by clicking on the green Code button and then clicking on the three dots of the active Codespace to show the termination options for your instance.

Wrap-up

GitHub Codespaces is a powerful cloud-hosted development environment that provides developers with a secure and efficient way to code, build, and debug their projects. Forgo the hassle of owning a powerful development machine and installing all the required development dependencies. Being a productive developer on an iPad is made possible with Codespaces. With its easy setup and collaboration features, GitHub Codespaces makes it simple for developers to get started quickly and collaborate with others on their projects. Give it a try today and see how it can streamline your development work. Happy coding! 😎

If the content was helpful, feel free to support me here:

Back to the Basics with HTML Forms

Duncan Lew — Sat, 14 Jan 2023 19:15:41 +0000

Understand the intricacies of how the HTML Form works

Forms are an essential part of any modern website that allows users to interact with data and submit information. Many modern frameworks like Angular and React have their own implementation and wrappers to facilitate the creation of HTML forms, but it's also important to understand what is happening behind the scenes when you're making an input form. In this article, we're going back to the basics of HTML forms and how to use them.

Structure of an HTML form

An HTML form is composed of a set of elements for users to interact with. These elements can include an input field, a checkbox, and a submit button. All the information filled in from the form fields can be used to submit information to a web application.

We’re going to create a simple form with two input fields for the username and email address and a submit button. In order to do this, we’re going to introduce three HTML elements:

<form>: The form element is used as a container for various user input fields
<input>: This element allows input for our username and email address
<label>: This element is a caption that is used for the input element

Using these three elements, we can create a simple HTML form like this:

<form>
  <label for="username">Username</label>
  <input name="username" id="username" placeholder="Username" />

  <label for="email">Email</label>
  <input name="email" id="email" placeholder="example@email.com" />

  <input type="submit" value="Submit" />
</form>

In this HTML sample, we see some attributes inside the <label> and <input> elements. Let’s take a look at what they are.

Inside the <label> element, the for attribute is used to associate the label with a specific form control. In this case, the label "Username" is associated with the text field that has an id of "username".

Inside the <input> element. we’ve used a couple of attributes:

name : This attribute is used to give the input form control a name. We can identify the correct input with this name attribute when the form is submitted.
placeholder: This is used to display placeholder text when the field hasn’t been filled in yet by the user.
type: The final <input> element has the attribute type with the value submit. This means that it will become a button that submits the form. All <input> elements can be given a type attribute. If none is defined as in the case of username and email, the default one will be text.

When this sample HTML form is displayed by the browser, it will look like this:

Submitting the form

We’ve created a complete working form with two input elements for username and email and a button to submit the data. What will actually happen when you click on the Submit button? The responsibilities are separated into two parts. The browser or the client is responsible for sending the form data, and the server is responsible for receiving and processing the form data. We’re going to take a look at what happens from the perspective of the browser or client.

Let’s assume that we’ve filled in helloworld and my@email.com for the first two input fields.

When you click on the submit button, a couple of things are going to happen:

Form data will be collected as a query string based on the input fields like this: username=helloworld&email=my@email.com
The current browser URL will be retrieved. If the form is being served from localhost:8000, then that is what the current URL will be.
The browser will navigate to the current address appended with the query string constructed from the form data. The formula for the constructed address is this: <currentUrl>?<queryString>
The resulting address will be localhost:8000?username=helloworld&email=my@email.com

Navigating to this newly constructed URL is in its essence a GET request. It’s up to the server to be able to process this URL with the query string parameters. What we often see with form submissions, is that we would like to do a POST request instead. In addition to that, we might also want to post this request to a specific URL. This can all be achieved by adding the method and action attributes in the <form> element like this

<form method="POST" action="https://myformurl.com">
    ...
</form>

If this form gets submitted, the browser is going to perform a POST request to the URL https://myformurl.com with username=helloworld&email=my@email.com as a payload. The request content-type header will be set to application/x-www-form-urlencoded. It’s then up to the server to be able to process this form submission correctly with the given information.

Retrieving the form as a JSON payload

In many modern JavaScript frameworks like Angular, React and Vue, form submission is done via a JSON payload. These frameworks usually don’t use a GET request with query string parameters or a POST request with a payload of content-type application/x-www-form-urlencoded. In order to achieve this form extraction as a JSON payload, we are going to add an event listener to the HTML form and some client-side JavaScript.

The event listener that we are going to add to the HTML form is called onsubmit. This event is fired when a form is submitted. When this onsubmit event is triggered, we want to call a function named extractJson(). We can do it like this:

<form onsubmit="extractJson(event)">
    ...
</form>

In this example, the event argument is passed to the extractJson() function. This object is automatically generated by the browser when the form is submitted.

We now need some JavaScript to extract the JSON from the HTML form. This can be achieved with the following code:

function extractJson(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  const jsonData = Object.fromEntries(formData);
  console.log(jsonData);

  // Send the JSON payload as a next step
}

The line event.preventdefault(); is used to prevent the default behavior of the form submission to occur. The default behavior, in this case, is the GET request to the current URL with the form data as a query string parameter.

After preventing the default form behavior, we’re going to use the FormData API to retrieve the FormData which is stored in event.target. We use Object.fromEntries to convert the FormData to a plain JavaScript object and then log into the console. The expected console output will look like this:

{
  "username": "helloworld",
  "email": "my@email.com"
}

This resulting variable jsonData can be used to send the form data to a server.

I’ve created a working CodePen sandbox to illustrate the extraction of the form data with these HTML and JavaScript code samples. You can find it over here: https://codepen.io/duncanlew/pen/mdjwMLO. Feel free to play around with it! You can check out the console output by clicking on the Console button in the bottom left corner.

I’ve added some CSS in the code sandbox to style the form a bit, but this is of course outside the scope of this article. 💅 All the CSS styling can be commented out so you can see what the unstyled version of the form looks like. This has no effect on the functionality of the form submission.

Wrap-up

HTML forms are one of the basic building blocks in modern websites to interact with data and submit information. Understanding the basics of how HTML forms work and how to use them is an important part of becoming a proficient web developer. With the right configuration, you can even send the form data as a JSON object. Don’t be afraid to take a step back from the modern frameworks and investigate what is happening technically under the hood. Happy coding! 👨‍💻

If the content was helpful, feel free to support me here:

Streamline Your Java Development Workflow with SDKMAN

Duncan Lew — Sun, 08 Jan 2023 15:42:22 +0000

Switching between Java versions can be as easy as running a single command

Do you have multiple versions of Java, Maven, Gradle, or other SDKs to manage? Are you tired of manually switching between different versions of these SDKs? SDKMAN to the rescue! SDKMAN is a command-line tool that allows you to quickly switch between various versions of SDKs, making it easier and more efficient to develop and test your applications. In this article, we'll discuss the benefits of using SDKMAN, provide some installation instructions, and explain how to use it to switch Java versions.

Benefits of using SDKMAN

SDKMAN is a great tool for developers because it makes it easier to manage and switch between different versions of Java. By default, you can only have one version of Java installed on your computer at a time. With SDKMAN, you can easily switch between different Java versions without needing to uninstall or reinstall Java every time.

Another great benefit of SDKMAN is that it also works out of the box for other SDKs in the JVM ecosystem, like Maven, Gradle, Scala and SBT. You don’t have to install a different manager for each SDK.

In addition to that, SDKMAN makes it easier to keep your Java versions up-to-date. SDKMAN will automatically check for updates and notify you when new versions of Java are available. This saves you time and effort, as you don't need to manually search for updates

Finally, SDKMAN is a tool built in bash and is completely free to use. It's open-source and available for anyone to use.

Installation

Installing SDKMAN is very easy. All you need to do is run the following command in your terminal:

curl -s "https://get.sdkman.io" | bash

If the command has been executed successfully, the output is going to look similar to this:

Once the command has been run, you can use SDKMAN to install and switch between different versions of Java. You might have to restart your Terminal before the sdk commands will work. To check whether SDKMAN works in your terminal after the installation, type the following command:

sdk version

It should be able to output the version of SDKMAN like this:

SDKMAN 5.16.0

Installing Java versions

SDKMAN makes it very easy to install different Java versions. To list all available Java versions that you can install, simply run the following command:

sdk list java

This will list all the available versions of Java that you can install. If you want to install Java 11 from the vendor Temurin, you can look for the identifier in this list which is: 11.0.17-tem. Type q to exit the list. Using the identifier for the Java version you want to install, run the following installation command:

sdk install java 11.0.17-tem

After successfully installing Java 11, the output will look like this:

If you need to install Java 17 from Temurin, it’s as easy as copying the identifier from the output command of sdk list java and placing it in the sdk install command:

sdk install java 17.0.5-tem

Switching Java versions

To switch between Java versions, you need to look for the identifier of your Java version in sdk list java and copy that value to switch to. If you’d like to switch to Java 11 of Temurin, run the following command:

sdk use java 11.0.17-tem

If you’d like to switch to Java 17 of Temurin, this would be the correct command:

sdk use java 17.0.5-tem

Making a specific Java version the default

If you’d like to make a specific Java version the default, like version 17 of Temurin, you can run the following command:

sdk default java 17.0.5-tem

How about Maven, Grade, and the rest?

We’ve seen how to install and switch between Java versions. But how would you know which SDKs are supported? No worries! The complete list of SDKs supported by SDKMAN can be found here: https://sdkman.io/sdks. How do you install and switch between other JVM-based SDKs like Maven, Grade, and the rest? The principle is the same for Java. You simply have to replace the Java and identifier command with the one the SDK you want to use:

sdk list maven
sdk install maven <version-identifier>

Conclusion

SDKMAN streamlines the management of all the SDKs that you’d need in the JVM ecosystem. We’ve covered how to easily install and switch Java versions and also how to do that for other SDKs that you’d need. SDKMAN is definitely a tool worth checking out and can help you save time and effort in the process. This is especially helpful for teams that are working on multiple projects with different SDK version requirements. Happy coding! 😎

If the content was helpful, feel free to support me here:

Six Essential Tips for Boosting your JavaScript skills

Duncan Lew — Sat, 31 Dec 2022 16:10:21 +0000

JavaScript was introduced in 1995 and its standards are actively being maintained by ECMA International - hence the name ECMAScript for JavaScript. Since 2015, major versions of the JavaScript language are being introduced every year in June. So JavaScript is constantly evolving, and new features are regularly being added to the language. Are you looking to take your JavaScript skills to the next level with all the relevant new features? Whether you're a beginner or an experienced developer, there are always ways to improve and learn new techniques. In this blog post, we'll explore six essential tips that can help you level up your JavaScript skills. For each tip, we'll also point out which ECMAScript version is required to be able to use it.

1. Optional Chaining

Have you tried accessing nested properties inside an object in which the intermediate properties might be undefined? To avoid your code from throwing errors like Cannot read properties of undefined, we write very convoluted statements wrapped with && operators like this:

if (request.body && request.body.product && request.body.product.price) {
    console.log(request.body.product.price);
}

JavaScript has a feature called optional chaining which is a way to access or modify properties of objects without worrying if an intermediate property is undefined. The statement will simply return undefined without throwing an error and ending your code execution prematurely. This optional chaining allows you to write cleaner, more concise code. By using optional chaining, you can avoid having to write multiple checks to verify the existence of an object before attempting to access it.

Rewriting the same if statement with optional chaining will look like this:

if (request?.body?.product?.price) {
    console.log(request.body.product.price);
}

This feature was introduced in ES2020.

2. Nullish coalescing operator

When you want to assign a value to a variable, you might be placing null and undefined checks to make sure that you’re retrieving the intended value. If that’s not the case, we might want to provide a fallback value in that case. Such a code sample could look like this:

const userName = (user?.name !== null && user?.name !== undefined) ?
    user.name :
    'Anonymous';

In JavaScript, there is a nullish coalescing operator (??) that allows developers to provide a fallback value when working with null or undefined values. This operator can be used to check for null or undefined values and provide an alternative value when the initial value is null or undefined.

For example, you can use the nullish coalescing operator to simplify the code sample from above like this:

const userName = user?.name ?? 'Anonymous';

This feature was introduced in ES2020.

3. Maps Instead of For Loop

When you start a JavaScript programming course, one of the first topics typically taught is for loops. For loops are a type of loop that repeats a set of instructions a certain number of times. They are used to iterate over data structures like arrays or objects and can be used to perform a wide variety of tasks.

If you want to iterate through an array and store the value of each number squared in a new array, it would look like this with a for loop:

const numbers = [1, 2, 3, 4, 5];
const squares = [];
for (let i = 0; i < numbers.length; i++) {
    squares.push(numbers[i]**2);
}

With the introduction of newer, more modern features in JavaScript, for loops are not always the best option for some tasks. Maps are a powerful data structure that can often be used instead of for loops to improve performance. The map() method takes a callback function as its argument and returns an array with the results of calling the callback on each element in the array. This allows you to quickly and easily iterate over an array without having to write a loop.

The benefit of using a Map is that it doesn’t cause side effects in your code and always allows you to create a new array. The resulting code with a Map would look like this:

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(number => number ** 2);

This feature was introduced in ES2015 or ES6.

4. Arrow Functions

Arrow functions are a concise way to define functions in JavaScript, and they have several benefits over traditional function declarations. Arrow functions have a shorter syntax than regular functions, which can make your code more readable. Additionally, arrow functions are lexically scoped, meaning that the value of the this keyword inside an arrow function is the same as the value outside of it. This can be very helpful when working with objects and methods.

For example, consider the following regular function:

function add(a, b) {
    return a + b;
}

This can be written as an arrow function like this:

const add = (a, b) => a + b;

This feature was introduced in ES2015 or ES6.

5. Object Destructuring

Object destructuring is a feature of JavaScript that allows you to quickly and easily extract values from an object. It allows you to create variables that contain the values of specific properties in an object, which can be useful when you need to access the same properties repeatedly.

For example, consider the following code:

const product = {
    name: "iPhone",
    color: "purple",
    price: 1000
};

const name = product.name;
const color = product.color;
const price = product.price;

Using object destructuring, you can extract the values from the user object and assign them to variables like this:

const product = {
    name: "iPhone",
    color: "purple",
    price: 1000
};

const { name, color, price } = product;

This feature was introduced in ES2015 or ES6.

6. Object literal enhancement

Now that you know what Object destructuring is, it’s time to take a look at object literal enhancement. This is a feature of JavaScript that is the exact opposite of object destructuring. It allows you to grab variables and create objects with fewer lines of code. For example, consider the following code:

const name = "iPhone";
const color = "purple";
const price = 1000;

const product = {
    name: name,
    color: color,
    price: price
};

Using object literal enhancement, you can simplify this code to:

const name = "iPhone";
const color = "purple";
const price = 1000;

const product = { name, color, price };

This feature was introduced in ES2015 or ES6.

Conclusion

JavaScript is constantly getting enriched by new features every year. By following these up-to-date tips and continuing to learn and grow, you can level up your JavaScript skills and become a more proficient and successful developer. Don't be afraid to challenge yourself and try new things – it's the best way to improve and keep up with the ever-changing world of technology. Happing coding! 😎

If the content was helpful, feel free to support me here:

Easily Format and Highlight Your Code in Google Docs

Duncan Lew — Sun, 18 Dec 2022 17:29:58 +0000

Google Docs is a popular word processing tool that allows you to create and edit documents online. Code formatting in Google Docs hasn’t always been an easy task to achieve. If you wanted to put a code block directly into your Google Docs document, you would have ended up with unformatted code with no syntax highlighting. This isn’t always easy on the eyes and is not conducive to quickly scanning your code to get a sense of its purpose. There are other ways to achieve this in a more aesthetically pleasing way, but that meant having to use add-ons as a work-around. But fret no more, Google has got you covered! One of the new notable features that Google just announced is Code Formatting, which makes your code easier to read and understand.

How to use it

To access this code-formatting feature in your current Google Docs document, select Insert > Building blocks > Code Blocks. Afterwards, select the programming language of your choice. It’s also possible to access this feature by typing @project assets in the document and selecting Code blocks.

Availability

According to Google’s post, the code formatting feature in Google Docs will be available to all Google Workspace customers starting on January 3, 2023. Google has not stated yet that they have plans to roll it out to those with personal Google Accounts in the future. Hopefully this will change in the near future.

Wrap-up

Google Docs is constantly getting improved with new features and this time it’s a boon for us developers out there! Code formatting in Google Docs is a useful tool that can help you create documents that are easier to read and understand. Whether you are working on a document that includes a lot of code or just want to insert a few lines of code into your document, Google Docs has you covered. 👨‍💻

If the content was helpful, feel free to support me here:

A better Node version manager: Volta vs nvm

Duncan Lew — Tue, 29 Nov 2022 20:11:19 +0000

A better Node version manager: Volta vs nvm

The Node.js ecosystem has been undergoing developments to its JavaScript tools, which makes the JavaScript tooling that we use more robust, reliable, and fast. One specific tool that we’re going to take a look at is the version manager for Node.js. When you’re frequently switching between different Node.js repositories, managing the specific versions of Node should be a very mundane process. The established management tool recommended by many for Node is nvm. Just because nvm has been around for a long time and is used by many developers does not necessarily mean that it’s the best tool for the job. There are other toolchains like Volta that claim to do a better job than nvm. Today, we’re going to take a look at whether these claims hold water and how to immediately get started with Volta on your machine.

1. The new kid in town: Volta

Volta is a JavaScript tool built on Rust for managing different Node.js versions. This tool can run on Windows, macOS, and Linux systems, making it a truly universal version manager for Node.js with cross-platform support. Volta claims to be very fast and seamless in its startup time and per-project version switching. Is Volta faster and snappier than the established nvm for managing your Node.js versions? We’re going to put these claims to the test.

Getting started with Volta
Volta is very easy to install on your system. If you have a macOS or a Linux machine, you can install Volta with the following command:

curl https://get.volta.sh | bash

The successful output for installing Volta will look like this:

This script will install Volta and update your bash, zsh, or fish startup script immediately.

If you have a Windows machine, you can download and run the installer from the following link.

After the installation you can install Node.js version 18 like this:

volta install node@18

It sounds counterintuitive, but switching to a different Node.js version with Volta is also done by using the install command.

volta install node@16

The last volta install command that is run, makes that Node.js version the default one.

2. Benchmarking approach 📏

In order to test Volta’s speed claims, we’re going to use two MacBooks with the following CPU configurations:

16-inch 2019, 2.6 GHz 6-Core Intel Core i7
16-inch 2021, Apple M1 Pro

For brevity in the rest of the article, we’re going to call these machines an Intel machine and an M1 machine. On both the Intel and M1 machine, we’re using zsh as the default shell and have nvm installed. For benchmarking, we’re going to use the zsh profiler and measure the time needed for a zsh startup to interactivity.

Zsh profiler

We’ll profile the startup times of our Terminal with nvm in the startup script and see how this differs when we install Volta. This way we can see if Volta delivers on its speed promises compared to nvm.

Profiling the startup time in zsh can be done with the built-in profiler called zprof. This can be done very easily by placing zmodload zsh/zprof at the beginning of your ~/.zshrc file and zprof at the bottom. We can use the profiling results to analyze which processes are being run and how time-consuming they are during the zsh startup.

Startup time measurement

Measuring the startup time before zsh becomes interactive can be done by running the following command:

time  zsh -i -c echo

3. Putting Volta’s speed claims to the test with benchmarks 🏎️

Now it’s time to get down to the nitty-gritty of actually running the measurements! When we run the zsh profiler for the Intel machine, we get the following results:

num  calls                time                       self            name
-----------------------------------------------------------------------------------
 1)    1         446.15   446.15   90.42%    169.93   169.93   34.44%  nvm_auto
 2)    2         276.22   138.11   55.98%    151.08    75.54   30.62%  nvm
 3)    1         102.95   102.95   20.86%     86.29    86.29   17.49%  nvm_ensure_version_installed
 4)    1          21.97    21.97    4.45%     16.77    16.77    3.40%  nvm_die_on_prefix
 5)    1          16.66    16.66    3.38%     16.66    16.66    3.38%  nvm_is_version_installed
 6)    2          15.11     7.56    3.06%     15.11     7.56    3.06%  compaudit
 7)    1          22.02    22.02    4.46%      6.91     6.91    1.40%  compinit
 8)    1           6.32     6.32    1.28%      6.32     6.32    1.28%  (anon)
 9)    1           4.88     4.88    0.99%      4.88     4.88    0.99%  nvm_grep
10)    1           4.68     4.68    0.95%      4.68     4.68    0.95%  zrecompile
11)    1           4.44     4.44    0.90%      4.44     4.44    0.90%  __sdkman_export_candidate_home
12)    1           3.97     3.97    0.80%      3.97     3.97    0.80%  __sdkman_prepend_candidate_to_path
13)    1           1.32     1.32    0.27%      1.32     1.32    0.27%  regexp-replace
14)   14           1.10     0.08    0.22%      1.10     0.08    0.22%  compdef
15)    5           0.92     0.18    0.19%      0.92     0.18    0.19%  is-at-least
16)    1           0.84     0.84    0.17%      0.84     0.84    0.17%  colors
17)    4           0.54     0.14    0.11%      0.54     0.14    0.11%  add-zsh-hook
18)    2           0.48     0.24    0.10%      0.48     0.24    0.10%  bashcompinit
19)    4           5.21     1.30    1.05%      0.33     0.08    0.07%  nvm_npmrc_bad_news_bears
20)    1           0.21     0.21    0.04%      0.21     0.21    0.04%  nvm_has
21)    6           0.15     0.03    0.03%      0.15     0.03    0.03%  is_plugin
22)    4           0.11     0.03    0.02%      0.11     0.03    0.02%  pathadd
23)    1           0.08     0.08    0.02%      0.08     0.08    0.02%  _install-omp-hooks
24)    1           0.15     0.15    0.03%      0.07     0.07    0.02%  complete
25)    3           0.07     0.02    0.01%      0.07     0.02    0.01%  is_theme
26)    2           0.04     0.02    0.01%      0.04     0.02    0.01%  env_default
27)    1           0.03     0.03    0.01%      0.03     0.03    0.01%  fig_reset_hooks
28)    1         446.18   446.18   90.42%      0.03     0.03    0.01%  nvm_process_parameters
29)    1           0.03     0.03    0.01%      0.03     0.03    0.01%  detect-clipboard
30)    2           0.02     0.01    0.00%      0.02     0.01    0.00%  __sdkman_echo_debug
31)    1           0.01     0.01    0.00%      0.01     0.01    0.00%  nvm_is_zsh

-----------------------------------------------------------------------------------

From this profiling table, we can see that more than 90% of the startup time is occupied by nvm. This is a very shocking revelation.

Running the same profiler for the M1 machine produces a similar result. We can also see that in the case of the M1 Mac more than 90% of the startup time is consumed by nvm processes.

num  calls                time                       self            name
-----------------------------------------------------------------------------------
 1)    2         211.82   105.91   74.12%    115.62    57.81   40.46%  nvm
 2)    1          79.78    79.78   27.92%     68.59    68.59   24.00%  nvm_ensure_version_installed
 3)    1         256.20   256.20   89.65%     44.38    44.38   15.53%  nvm_auto
 4)    2          14.99     7.49    5.24%     14.99     7.49    5.24%  compaudit
 5)    1          14.95    14.95    5.23%     14.86    14.86    5.20%  nvm_die_on_prefix
 6)    1          11.20    11.20    3.92%     11.20    11.20    3.92%  nvm_is_version_installed
 7)    1           4.30     4.30    1.51%      4.30     4.30    1.51%  zrecompile
 8)    1           4.15     4.15    1.45%      4.15     4.15    1.45%  (anon)
 9)    1          18.29    18.29    6.40%      3.30     3.30    1.15%  compinit
10)    1           1.47     1.47    0.51%      1.47     1.47    0.51%  nvm_has
11)    1           0.77     0.77    0.27%      0.77     0.77    0.27%  regexp-replace
12)    1           0.49     0.49    0.17%      0.49     0.49    0.17%  colors
13)    5           0.48     0.10    0.17%      0.48     0.10    0.17%  is-at-least
14)   13           0.46     0.04    0.16%      0.46     0.04    0.16%  compdef
15)    4           0.29     0.07    0.10%      0.29     0.07    0.10%  add-zsh-hook
16)    6           0.09     0.02    0.03%      0.09     0.02    0.03%  is_plugin
17)    4           0.09     0.02    0.03%      0.09     0.02    0.03%  nvm_npmrc_bad_news_bears
18)    4           0.07     0.02    0.02%      0.07     0.02    0.02%  pathadd
19)    1           0.08     0.08    0.03%      0.04     0.04    0.01%  complete
20)    1           0.04     0.04    0.01%      0.04     0.04    0.01%  _install-omp-hooks
21)    3           0.03     0.01    0.01%      0.03     0.01    0.01%  is_theme
22)    1           0.03     0.03    0.01%      0.03     0.03    0.01%  fig_reset_hooks
23)    2           0.02     0.01    0.01%      0.02     0.01    0.01%  bashcompinit
24)    1         256.21   256.21   89.65%      0.01     0.01    0.00%  nvm_process_parameters
25)    2           0.01     0.01    0.00%      0.01     0.01    0.00%  env_default
26)    1           0.01     0.01    0.00%      0.01     0.01    0.00%  detect-clipboard
27)    1           0.00     0.00    0.00%      0.00     0.00    0.00%  nvm_is_zsh

Measuring startup time to interactivity between nvm and Volta

Now that we’ve profiled the startup of zsh until it becomes interactive, it’s time to measure the actual startup time of zsh itself. This measurement can be done by running the following command:

time zsh -i -c echo

This command will output 3 parameters: the user, system, and total startup time. This is an example of the output command in which I’ve replaced the actual numbers with ***.

*** user *** system 75% cpu *** total

All these numbers are expressed in seconds. The parameter that we are going to focus on for the startup time is the last one which is the total startup time.

On our Intel machine, we are going to measure the zsh startup time twice. Once with nvm turned on and the other time with Volta enabled. This is the result:

# Intel zsh startup time
0.72s user 0.60s system 75% cpu 1.744 total # with nvm
0.15s user 0.16s system 97% cpu 0.314 total # with Volta

These are some shocking numbers! The total startup time with nvm is 1.744 seconds. When we enabled Volta as our Node version manager, the startup time dropped to 0.314 seconds. Volta is faster by 1.43 seconds. This is a whopping reduction of 82%! Imagine all the seconds you save waiting for your Terminal to startup zsh. 💨

The next step is to also measure the startup time for our M1 machine. M1 is no slouch to begin with. We wonder whether using Volta would even be worth it on an M1 machine that already has one of the industry’s best-optimized silicon chips based on the ARM architecture. These are the M1 results:

# M1 zsh startup time
0.14s user 0.21s system 70% cpu 0.496 total # with nvm
0.06s user 0.07s system 74% cpu 0.174 total # with Volta

M1’s startup time with nvm is only 0.496 seconds. This is already more than a second faster than the Intel machine with nvm, which has a startup time of 1.744 seconds. However, if we enable Volta on M1 the startup time can be reduced even more to 0.174 seconds. We can shave off 0.322 seconds of startup time with Volta. This computes to a startup time reduced by 65%! M1 had no trouble starting up quickly with nvm, but it can become even faster with Volta! ⚡️

4. Takeaway

The JavaScript ecosystem is developing at an even faster pace than before. Keeping up with all these new technological developments in the JavaScript scene can be daunting. New tooling that gets developed like Volta certainly dares to challenge the established norm like nvm. We were able to achieve a reduction in the startup time of 82% and 60% for an Intel and Mac machine, respectively. The biggest contributing factor to Volta being so snappy seems to be its foundation which is built on Rust. We might see even more tooling in the future being built with Rust or Go which makes good use of parallelism and memory optimizations. I hope that this article can shed some light on one of the new tools in the JavaScript environment. Happing coding! 😎

If the content was helpful, feel free to support me here:

Elevate Your Terminal Experience on The Mac 🧘‍♂️

Duncan Lew — Sat, 05 Nov 2022 20:26:51 +0000

The key ingredients to spice up your terminal are Oh My Zsh, Oh My Posh, and Fig

The macOS operating system comes preinstalled with a default Terminal app. As a software engineer, data scientist or if you like geeking around, there's a big chance that you will be spending a lot of time in the terminal running a variety of commands. The terminal with its traditional white text on a black screen is quite bland and uninspiring. It doesn't invite you to stay in that window in order to get more stuff done.

Upgrading your terminal experience can be done for productivity reasons. You can install a bunch of shortcuts, plugins, and helpers to speed up your everyday processes. Making your terminal more powerful can of course also be done for aesthetic reasons. It will definitely become a more delightful experience every time you use the terminal.

I will outline a five-step process to make your Terminal experience more powerful. Using your terminal will never be the same again after you've seen what's possible. Let's get started!

1. Replace the Mac Terminal 🕺

The default Terminal app for Mac leaves a lot to be desired. Other terminal emulators of competitors provide many extra features that are indispensable for the everyday Terminal user like split pane view, mouseless copy, and a paste history just to name a few.

To get started, I would recommend using iTerm and seeing whether this Terminal emulator fits your needs. Visually, it is the most similar to the built-in Terminal app with added features on top. If you're more adventurous you can try out Warp or Hyper. They offer more cutting-edge features like AI-assisted command search and more editor-like command input.

Before installing iTerm, we need to install Homebrew first. Homebrew is a package manager for Mac and allows you to install packages by just executing them in your terminal application. If you haven't installed Homebrew yet, please install this first by running the following in your terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

iTerm can now be installed with brew by running the following command:

brew install --cask iterm2

2. Install a Zsh configuration and plugins 📦

Zsh is the default shell that comes pre-installed on all macOS systems since macOS Catalina. Zsh works as an interpreter that translates your terminal commands into instructions for your operating system to run. Zsh on itself isn't very powerful. To improve this, we will install Oh My Zsh which is a framework for managing your Zsh configuration. This will allow you to install plugins for your Zsh configuration.

To install Oh My Zsh, simply open up your terminal emulator of choice and run the following command:

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

After you've installed Oh My Zsh, the output is going to look like this:

Oh My Zsh comes pre-installed with the git plugin. This gives you a bunch of git aliases that you can use from your terminal. A handy few are:

gst = git status
gaa = git add --all
gl  = git pull

For the complete list, please check out the git plugin page for Oh My Zsh.

To install other plugins for your Zsh configuration, open the following file in your editor of choice: ~/.zshrc. The currently installed plugins are denoted by the following line:

plugins=(git)

The exhaustive list of all possible plugins can be found on this Oh My Zsh plugins page. Do you want to have aliases for 1Password, Spotify, Visual Studio Code, or one for the many engineering scripts that you run? Someone probably created a plugin for that. I would recommend installing the z plugin, which allows you to quickly navigate to a directory you have visited before with minimal keystrokes. Adding extra plugins to your zsh configuration can be done by simply editing the plugin line of the .zshrc file like this:

plugins=(git z brew)

After saving your changes, make sure to restart your terminal emulator or run the following command to make use of your latest changes:

source ~/.zshrc

3. Install a theming engine 💅

This is probably the most exciting step: theming your terminal emulator! The theming engine that we're going to use is Oh My Posh. Oh My Posh has a lot of preconfigured themes and colors for your terminal prompt and makes it very easy to install and configure.

3.1 Oh My Posh

You can install the Oh My Posh theming engine with Homebrew by executing the following command:

brew install jandedobbeleer/oh-my-posh/oh-my-posh

3.2 Fonts

Oh My Posh recommends installing Nerd Fonts. These fonts are patched to include beautiful icons which will be displayed in your terminal prompt. Fonts can be installed with the built-in Oh My Posh command.

oh-my-posh font install

After running this command, you will be prompted to select a specific font. We will choose Meslo, since Oh My Posh recommends this font for its theming engine.

After having installed the Meslo font, you will probably need to configure this font in your terminal application of choice. Setting this up in iTerm settings will look approximately like this:

If all is set properly, your terminal should now look like this:

3.3 Optional: choose a different theme

You don't have to use the theme that Oh My Posh comes preinstalled with. That's the beauty of it. You can choose any of the predefined themes that are available on this page. To configure the theme look for the following line in your .zshrc file:

eval "$(oh-my-posh init zsh)"

When you've settled on a specific theme like M365Princess, you can change the Oh My Posh command in .zshrc file into:

eval "$(oh-my-posh init zsh --config $(brew --prefix oh-my-posh)/themes/M365Princess.omp.json)"

Don't forget to rerun the command source ~/.zshrc to activate your changes. 🚀

4. Beautify your ls command 👩‍🎤

When you use your terminal, you list the content of your directory very frequently. The list that is outputted to your screen is very unoriginal and not easy to scan.

Wouldn't it be nice if the output of your ls command could be more distinguishable and easier to scan? Exa to the rescue! Exa is a replacement for the boring ls command and improves it with color, icons, and additional metadata. To install exa, run the following command in your terminal:

brew install exa

Exa doesn't actually replace the ls command in your terminal. To run exa, you will have to give it a bunch of flags to denote what configuration you want your ls command to contain. We can make aliases to replace the standard ls command with exa so that you don't have to type all the flags every time you want to list the content of a directory. We will add 3 aliases for the commonly used ls commands: ls, ll, and la. Open up your .zshrc file and add the following lines:

alias ls='exa --icons --group-directories-first'
alias ll='exa -l --icons --no-user --group-directories-first  --time-style long-iso'
alias la='exa -la --icons --no-user --group-directories-first  --time-style long-iso'

Rerun source ~/.zshrc and use the exa command anywhere and be delighted with the output! 🤩

5. Finishing touches: autocomplete magic 🦄

What is a terminal without some autocomplete magic? The intellisense for code completion you get with modern IDEs has become indispensable in a software developer's job. Why can't this intellisense be extended to the terminal? Well, that's possible with Fig! Fig is an extension that adds some autocomplete greatness to the most commonly used terminal emulators. It works smoothly to autocomplete many commands you can think of, like cdand git . To install Fig run the following command in your terminal:

brew install fig

After installing Fig, open the application from your Application folder and follow the startup process to configure it correctly. When all it's done, you should be left with a terminal emulator that is a feast for your eyes. 🤩 Try using the git add command in a project to see how Fig suggests your unstaged files in the suggestion box.

Takeaway

Getting your terminal application to look sharp shouldn't be a difficult and daunting task. Almost all of this can be done quickly by just executing a bunch of commands in your terminal to get the desired results. It's a very small time investment that pays dividends. It may not make you more productive per se, but it will certainly make you feel like a boss using it! Happing coding! 😎

If the content was helpful, feel free to support me here:

Explain and Translate Your Code With GitHub Copilot

Duncan Lew — Sun, 21 Aug 2022 18:49:00 +0000

Boost your understanding with natural language descriptions of your code

GitHub Copilot is the new kid in town with a unique set of features that even seasoned developers can use to their advantage. One of the main selling points of GitHub Copilot is its ability to provide suggested lines of code assisted with AI. A specific feature that doesn’t get much attention is called Copilot Explain.

Copilot Explain, as the name suggests, will translate code into natural language descriptions. This can be an immense help to developers who are unfamiliar with a certain project or programming language. This feature can also translate code from one programming language to another. This is a boon for instances when you find a code snippet solution in a different programming language and need to translate it to the target language of the repository.

Requirements to get started

GitHub Copilot is free to use for students and open-source contributors. In all other cases, you can try it out with a trial to see if it fits your needs. In order to get started with GitHub Copilot, you will need an IDE. For this example, we will be using Visual Studio Code.

As of writing, the feature Copilot Explain is in technical preview and requires you to sign up for the tester group. Check out GitHub Next to see how you can be part of the technical preview.

1. Install the extensions for GitHub Copilot

Inside your Visual Studio Code IDE, install the following two extensions for Visual Studio Code:

A popup will prompt you to configure Copilot. Follow the setup wizard to connect your GitHub account to GitHub Copilot.

2. Highlight the code to be explained

For this example, we are going to simulate a situation in which you’re working with an unfamiliar repository that uses the Kotlin programming language. Kotlin is a very modern language introduced in 2011 and it might not necessarily be a language that all developers are familiar with.

The code sample that we are going to use is from the Kotlin example page:

If you aren’t familiar with the Kotlin syntax, some parts might not necessarily make sense immediately and you might want to have a quick way to understand what this piece of code does without taking a deep dive into the intricate workings of Kotlin itself.

Make sure to have the example code sample available in a file inside Visual Studio Code as example.kt. Highlight all the lines in this file.

3. Explain the code

If the Github Copilot extensions are installed correctly, you should have an extra GitHub icon available in your vertical activity bar:

After clicking on the GitHub icon, your sidebar should like look this:

If you haven’t highlighted your code yet, make sure to do it now and then click on the button named Ask Copilot. It will show the result as a translation of the code into plain English:

So that’s how you can retrieve a description of what unfamiliar code snippet does in plain English! 🤓

4. Translate the code into a different programming language

If you found this code sample in Kotlin, and would like to translate it into a language that you are familiar with, GitHub Copilot can help you out! Let’s try to translate the code from Kotlin into Python. The GitHub Copilot activity bar has a second section called Language Translation:

Click on the blue button named Ask Copilot to translate your code. The end result will look like this:

There you go! You just translated a code snippet from Kotlin to Python! 🔎

Takeaway

GitHub Copilot can be a revolutionary code completion tool by suggesting lines of code to the developer based on a comprehensive machine learning model. It certainly isn’t a tool to replace the developer. It’s a tool to elevate the development experience as if there is someone next to you helping you out from time to time with good suggestions. This can especially be useful for boilerplate and repetitive code.

The new features that we introduced in this article for explaining and translating code are still in technical preview and gives us a glimpse into what the next step could be in AI-assisted programming. Make sure to keep an eye on tools like GitHub Copilot to see where the industry is heading next! 🚀

If the content was helpful, feel free to support me here: