Happy to answer any questions you might have. Or simply say hello!

Visionary entrepreneur and software developer

Spices have shaped human civilization, driving exploration, trade, and culinary innovation for millennia. Today, I'm excited to introduce SpiceNice, a comprehensive open-source database that brings structured information about culinary spices and their source plants to everyone – from professional chefs to home cooks, botanists to farmers. A section on free literature about spices completes the website.

## What is SpiceNice

![SpiceNice website](https://res.cloudinary.com/dxxtt2clx/image/upload/v1733597813/Screenshot_2024_12_07_at_19_56_14_532af4235a.png)

[SpiceNice](https://spicenice.pages.dev) is a database of culinary spices. It contains information on the spice itself as well as on the corresponding plant. The idea is that you have structured data about culinary spices and its plants. This allows people who are interested in spices, like cooks, biologists, farmers and the general public to inform themselves.
Additionally, there is a small section on free literature about spices.

In the website version of the SpiceNice database you can select the spice that interests you. Then you get a more detailed overview of the spice with information like the botanical name, its culinary form and country of origin. Furthermore, there is information on the plant included, with explanation of plant botany and cultivation.

## Origin of the Data

The data was retrieved from the English edition of Wikipedia. 

## Technical Architecture

![Architecture SpiceNice](https://res.cloudinary.com/dxxtt2clx/image/upload/v1733596683/Architecture_Spice_Nice_39740c00b4.png)

The backend of SpiceNice is composed of the open source headless CMS (content management system) [Strapi](https://strapi.io), connected to a PostgreSQL database. Astro is used as the frontend framework that generates the SpiceNice static website. 

## Future Direction

The vision for SpiceNice is to become a comprehensive specialized database on culinary spices. It could also provide a web API to query the data with bindings for different programming languages. 
Also, the goal is to build up a community of like-minded people interested in the world of culinary spices. They could collaborate and communicate via the SpiceNice platform. 

Translation of the database content into different languages would be another goal. Bringing together consumers and producers of spice products would also be valuable.

## Conclusion

This concludes this overview of the SpiceNice open source product. If you are interested, want to collaborate or give feedback, please feel free to contact me via the button below.

## References

SpiceNice website: [https://spicenice.pages.dev](https://spicenice.pages.dev)

Strapi CMS: [https://strapi.io](https://strapi.io)

Cover Photo by <a href="https://pixabay.com/users/tarasyasinski-13623164/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=9061583">Taras Yasinski</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=9061583">Pixabay</a>


large_ai-generated-9061583_1280.png

medium_ai-generated-9061583_1280.png

small_ai-generated-9061583_1280.png

thumbnail_ai-generated-9061583_1280.png

Spices have shaped human civilization, driving exploration, trade, and culinary innovation for millennia. Today, I'm excited to introduce SpiceNice, a comprehensive open-source database that brings structured information about culinary spices and their source plants to everyone – from professional chefs to home cooks, botanists to farmers. A section on free literature about spices completes the website.

SpiceNice - An Open Source Spice Database

All the big cloud providers like AWS and Azure have an API for the synthesis of text into the spoken word. But there are also young startups like ElevenLabs that offer their innovative solutions in this space. A third option is open source software for those who either do not want to pay for the service of TTS (text-to-speech) or do need on-device TTS. Also, privacy reasons can play a role here.

That is why in this article I want to provide an overview of the most important open source TTS alternatives.

## Piper

[Piper](https://github.com/rhasspy/piper) is a project of the [Open Home Foundation](https://www.openhomefoundation.org). They want to create privacy-preserving technology for homes. The voices are trained using a project called [VITS](https://github.com/jaywalnut310/vits) that is based on the [paper](https://arxiv.org/abs/2106.06103) "Conditional Variational Autoencoder with Adversarial Learning for End-to-End Text-to-Speech" by Jaehyeon Kim, Jungil Kong and Juhee Son. What is new about this approach is that they do not use a separate vocoder to produce the audio waveform, but have packaged everything inside one neural network. They claim that this improves the quality of the spoken voice.

The VITS project uses PyTorch for training and inference.

Piper is simple to install, just run:

```bash
pip install piper-tts
```

Before running, you need to download the respective [ONNX](https://onnx.ai/) model for your language and voice. You can find the instructions [here](https://github.com/rhasspy/piper/tree/master?tab=readme-ov-file#running-in-python).

Piper supports a number of language. I tried some of those out and they sound natural and are great to listen to.

## Coqui

[Coqui](https://github.com/coqui-ai/TTS) was a project of the now defunct startup with the same name. Since the source code is open source it is still accessible and open to use. But how the project evolves in the future depends on community contribution.

It is also easy to install using Python:

```bash
pip install TTS
```

You can list all the supported language and voice combinations with the following command:

```bash
tts --list_models
```

Then to generate an audio file from text you need to select the appropriate model from the output of the command above.

For example:

```bash
tts --text "Text for TTS" --model_name "<model_type>/<language>/<dataset>/<model_name>" --out_path output/path/speech.wav
```

If the specified model is not locally available, it will download the model automatically and then generate the output WAV file.

I tried Coqui with several languages and the quality was okay and in some languages natural sounding. For best results use the VITS models.

## Whisper Speech

[Whisper Speech](https://github.com/collabora/whisperspeech) is an open source project leveraging another open source speech-to-text model by OpenAI, Whisper. The project Whisper Speech currently has only a limited number of languages and voices supported. It is not really ready to be used, but the samples offered on the GitHub pages are encouraging, although not sounding 100% natural.

The future will show how this project evolves, but the ideas behind it are promising.

## Mimic 3

[Mimic 3](https://mycroft-ai.gitbook.io/docs/mycroft-technologies/mimic-tts/mimic-3) was developed by Mycroft for its voice assistant. It is a neural TTS engine. The number of features of Mimic 3 is quite impressive with SSML support and an interactive mode.

Mimic 3 has a number of voices available with reasonable quality. The project is no longer maintained with the last source commits three years ago at the time of writing. The license is AGPL which might limit the usefulness of Mimic 3 further.

## Espeak-ng

The speech synthesizer [espeak-ng](https://github.com/espeak-ng/espeak-ng) is an open source project with the longest history on this list. It supports a large number of languages, more than 100. 
It uses a special synthesis method and therefore uses few system resources. It is easy to install, for example on Linux you can install it with a package manager.

Unfortunately, it produces very robotic sounding speech. But nonetheless it is intelligible. Thus, its use case is for example on certain embedded systems where natural sounding speech is not that important. Also, where support for less mainstream languages is needed, it might be the only open source option available.

## Conclusion

From the four tested open source text-to-speech application, my favorite is clearly Piper. It has the most natural sounding speech. Whisper Speech has potential, but only time will show how it evolves. 

With the main backer of Coqui out of business, its future is uncertain and depends on community support. The same is valid for Mimic 3, its future also being uncertain.
Espeak-ng clearly sounds robotic, but due to its great language support and low resource needs it can be a good fit for certain niche applications. 

So with that, I hope you have learned something in this article, and I am happy about any feedback. Just click on the contact button below.

## References

- Piper: [https://github.com/rhasspy/piper](https://github.com/rhasspy/piper)
- Coqui: [Coqui](https://github.com/coqui-ai/TTS)
- Mimic 3: [Mimic 3](https://mycroft-ai.gitbook.io/docs/mycroft-technologies/mimic-tts/mimic-3)
- Whisper Speech: [Whisper Speech](https://github.com/collabora/whisperspeech)
- Espeak-ng: [espeak-ng](https://github.com/espeak-ng/espeak-ng)

Cover image by <a href="https://pixabay.com/users/broneartulm-642467/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=856770">BroneArtUlm</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=856770">Pixabay</a>

large_sound-856770_1280.png

medium_sound-856770_1280.png

small_sound-856770_1280.png

thumbnail_sound-856770_1280.png

All the big cloud providers like AWS and Azure have an API for the sythesis of text into the spoken word. But there are also young startups like ElevenLabs that offer their innovative solutions in this space. A third option is open source software for those who either do not want to pay for the service of TTS (text-to-speech) or do need on-device TTS.  That is why in this article I want to provide an overview of the most important open source TTS alternatives.

From Text to Talk: Analyzing Open Source TTS Alternatives

The headless open source content management system (CMS) Strapi can be dockerized and deployed via Docker to the cloud. In this article I want to show how to deploy Strapi to the Digital Ocean App Platform as a Docker container.

## Strapi

[Strapi](https://strapi.io/) is a headless open source content management (CMS) created by an originally French startup. Strapi Inc. is now based in the U.S.A. with team members distributed globally. 

Strapi as a headless CMS means, it uses an API (REST or GraphQL) to communicate with the frontend. Usually, the frontend retrieves the content via the API and publishes it on a website. The frontend can for example be written in Next.js or in any other framework that allows publishing of websites.
Strapi allows for easy description of the content types and integrates an easy editor for editing the actual content. The best is that the basic version of Strapi is open source and free to use.

Once you have defined your content model you usually want to deploy Strapi somewhere so it is accessible to the persons doing the actual content editing. This is where cloud platforms come in.

In my setup here I use the Digital Ocean cloud platform because it is easy to use.

## Digital Ocean

[Digital Ocean](https://digitalocean.com) is a cloud platform that focuses on easy of use and developer experience. While by no means as comprehensive as AWS or other big cloud platforms, it nonetheless contains the basic services needed for operating in the cloud.

One possible way of deploying your application to Digital Ocean is using Docker and Docker images. Digital Ocean contains a Docker image registry and an "App Platform" to deploy the Docker images on actual servers. As a database for Strapi I use Digital Ocean's managed Postgres database.

Whiles there exists already a guide on Strapi's website for deploying [Strapi on Digital Ocean](https://docs.strapi.io/dev-docs/deployment/digitalocean-app-platform), that guide does not use Docker. This is why I want to talk more about Docker in this article.

## Building Docker Image

In my setup, I have a .env file with all the environmental variables needed for Strapi to operate. These include the database connection parameters. In my bash script I use the application `dotenvx` to pass the environmental variables of the .env file to the docker build command. [Dotenvx](https://github.com/dotenvx/dotenvx) is a Node application and can be installed by npm.

Here is my Bash script to build the image locally:

docker-build.sh
```bash
echo "Building with Docker..."
./increment-version.sh

./node_modules/.bin/dotenvx run -- sh -c 'docker build \
  --build-arg NODE_ENV=$NODE_ENV \
  --build-arg HOST=$HOST \
  --build-arg PORT=$PORT \
  --build-arg APP_KEYS=$APP_KEYS \
  --build-arg API_TOKEN_SALT=$API_TOKEN_SALT \
  --build-arg ADMIN_JWT_SECRET=$ADMIN_JWT_SECRET \
  --build-arg TRANSFER_TOKEN_SALT=$TRANSFER_TOKEN_SALT \
  --build-arg DATABASE_CLIENT=$DATABASE_CLIENT \
  --build-arg DATABASE_HOST=$DATABASE_HOST \
  --build-arg DATABASE_PORT=$DATABASE_PORT \
  --build-arg DATABASE_NAME=$DATABASE_NAME \
  --build-arg DATABASE_USERNAME=$DATABASE_USERNAME \
  --build-arg DATABASE_PASSWORD=$DATABASE_PASSWORD \
  --build-arg JWT_SECRET=$JWT_SECRET \
  --build-arg CLOUDINARY_NAME=$CLOUDINARY_NAME \
  --build-arg CLOUDINARY_KEY=$CLOUDINARY_KEY \
  --build-arg CLOUDINARY_SECRET=$CLOUDINARY_SECRET \
  -t strapi-app-name -f Dockerfile . '
```

This script runs a Docker build command to create the Docker image locally. It depends on the Dockerfile. The Dockerfile specifies the contents of the Docker image.

Here is my version:

Dockerfile
```Docker
FROM node:20-alpine as build
# Installing libvips-dev for sharp Compatibility
RUN apk update && apk add --no-cache build-base gcc autoconf automake zlib-dev libpng-dev vips-dev > /dev/null 2>&1
ARG NODE_ENV=production
ARG HOST=0.0.0.0
ARG PORT=1337
ARG APP_KEYS
ARG API_TOKEN_SALT
ARG ADMIN_JWT_SECRET
ARG TRANSFER_TOKEN_SALT
ARG DATABASE_CLIENT
ARG DATABASE_HOST
ARG DATABASE_PORT
ARG DATABASE_NAME
ARG DATABASE_USERNAME
ARG DATABASE_PASSWORD
ARG JWT_SECRET
ARG CLOUDINARY_NAME
ARG CLOUDINARY_KEY
ARG CLOUDINARY_SECRET

ENV NODE_ENV=${NODE_ENV}
ENV HOST=${HOST}
ENV PORT=${PORT}
ENV APP_KEYS=${APP_KEYS}
ENV API_TOKEN_SALT=${API_TOKEN_SALT}
ENV ADMIN_JWT_SECRET=${ADMIN_JWT_SECRET}
ENV TRANSFER_TOKEN_SALT=${TRANSFER_TOKEN_SALT}
ENV DATABASE_CLIENT=${DATABASE_CLIENT}
ENV DATABASE_HOST=${DATABASE_HOST}
ENV DATABASE_PORT=${DATABASE_PORT}
ENV DATABASE_NAME=${DATABASE_NAME}
ENV DATABASE_USERNAME=${DATABASE_USERNAME}
ENV DATABASE_PASSWORD=${DATABASE_PASSWORD}
ENV JWT_SECRET=${JWT_SECRET}
ENV CLOUDINARY_NAME=${CLOUDINARY_NAME}
ENV CLOUDINARY_KEY=${CLOUDINARY_KEY}
ENV CLOUDINARY_SECRET=${CLOUDINARY_SECRET}

WORKDIR /opt/
COPY ./package.json ./yarn.lock ./
ENV PATH /opt/node_modules/.bin:$PATH
RUN yarn config set network-timeout 600000 -g && yarn install --production
WORKDIR /opt/app
COPY ./ .
RUN yarn build
FROM node:20-alpine
RUN apk add --no-cache vips-dev
ARG NODE_ENV=production
ARG HOST=0.0.0.0
ARG PORT=1337
ARG APP_KEYS
ARG API_TOKEN_SALT
ARG ADMIN_JWT_SECRET
ARG TRANSFER_TOKEN_SALT
ARG DATABASE_CLIENT
ARG DATABASE_HOST
ARG DATABASE_PORT
ARG DATABASE_NAME
ARG DATABASE_USERNAME
ARG DATABASE_PASSWORD
ARG JWT_SECRET
ARG CLOUDINARY_NAME
ARG CLOUDINARY_KEY
ARG CLOUDINARY_SECRET

ENV NODE_ENV=${NODE_ENV}
ENV HOST=${HOST}
ENV PORT=${PORT}
ENV APP_KEYS=${APP_KEYS}
ENV API_TOKEN_SALT=${API_TOKEN_SALT}
ENV ADMIN_JWT_SECRET=${ADMIN_JWT_SECRET}
ENV TRANSFER_TOKEN_SALT=${TRANSFER_TOKEN_SALT}
ENV DATABASE_CLIENT=${DATABASE_CLIENT}
ENV DATABASE_HOST=${DATABASE_HOST}
ENV DATABASE_PORT=${DATABASE_PORT}
ENV DATABASE_NAME=${DATABASE_NAME}
ENV DATABASE_USERNAME=${DATABASE_USERNAME}
ENV DATABASE_PASSWORD=${DATABASE_PASSWORD}
ENV JWT_SECRET=${JWT_SECRET}
ENV CLOUDINARY_NAME=${CLOUDINARY_NAME}
ENV CLOUDINARY_KEY=${CLOUDINARY_KEY}
ENV CLOUDINARY_SECRET=${CLOUDINARY_SECRET}
WORKDIR /opt/app
COPY --from=build /opt/node_modules ./node_modules
ENV PATH /opt/node_modules/.bin:$PATH
COPY --from=build /opt/app ./
EXPOSE 1337
CMD ["yarn", "start"]
```
As you can see, the environmental variables from the .env file are used in the Dockerfile.

The Bash script to do the image version management is as follows:

increment-version.sh
```bash
#!/bin/bash

# Read the current version number from the file
VERSION=$(cat version.txt)

# Increment the version number
IFS='.' read -ra PARTS <<< "$VERSION"
MAJOR=${PARTS[0]}
MINOR=${PARTS[1]}

# Increment the minor version number
NEW_MINOR=$((MINOR + 1))

# Combine the major and minor parts into a new version number
NEW_VERSION="$MAJOR.$NEW_MINOR"

# Write the new version number back to the file
echo $NEW_VERSION > version.txt

# Print the new version number
echo "New version number: $NEW_VERSION"
```

Now every time to start building the Docker image, a new version number is created.

## Uploading Docker Image

Once you have created the Docker image locally, you can upload it to the Digital Ocean Docker Registry.
From there you can deploy it to a server.

Here is my Bash script for uploading the Docker image:

push-image.sh
```bash
echo "Pushing image to Digital Ocean..."

VERSION=$(cat version.txt)

docker tag strapi-app-name registry.digitalocean.com/your-containers/strapi-app-name:$VERSION
docker push registry.digitalocean.com/your-containers/strapi-app-name:$VERSION
```

You have to adapt the names of `your-containers` and `strapi-app-name` to your specific values.
The Bash script supports incrementally versioning the Docker images.

## Creating Digital Ocean App

Once the Docker image is in the registry you can deploy it in the Digital Ocean web interface.

Go to "App Platform". Click "Create App". Choose "Digital Ocean Container Registry". Then choose your repository and tag. Next, define your server hardware and as public HTTP port enter "1337". No "Run Command" needs to be entered.

Once you click on "Create", the app should be deployed on your server and subsequently it should be accessible in the defined URL.

## Conclusion

Strapi as a popular open source CMS needs to be deployed somewhere so that editors can access it and edit content. As you could see, one possibility among a variety of possibilities is deploying the Strapi CMS on Digital Ocean using Docker.

If you found this interesting or would like to tell me your experience with deploying Docker, please contact me, by pressing the contact button below.

## References

Strapi: [https://strapi.io](https://strapi.io)

Digital Ocean: [https://www.digitalocean.com](https://www.digitalocean.com)

Docker: [https://www.docker.com](https://www.docker.com)

Photo by <a href="https://unsplash.com/@aznbokchoy?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Lucas K</a> on <a href="https://unsplash.com/photos/blue-and-orange-smoke-wQLAGv4_OYs?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
  

large_lucas-k-wQLAGv4_OYs-unsplash.jpg

medium_lucas-k-wQLAGv4_OYs-unsplash.jpg

small_lucas-k-wQLAGv4_OYs-unsplash.jpg

thumbnail_lucas-k-wQLAGv4_OYs-unsplash.jpg

The headless open source content management system (CMS) Strapi can be dockerized and deployed via Docker to the cloud. In this article I want to show how to deploy Strapi to the Digital Ocean App Platform as a Docker container.

Deploy Strapi with Docker on Digital Ocean App Platform

large_ai-generated-7957989_1280.jpg

medium_ai-generated-7957989_1280.jpg

small_ai-generated-7957989_1280.jpg

thumbnail_ai-generated-7957989_1280.jpg

Although COBOL can be considered a legacy language, there are still billions of lines of COBOL in production. Modernizing these systems which are costly to run and maintain is a challenge. One solution to this issue is a COBOL to Go transpiler that I want to present in this article.

How to Automatically Convert COBOL to Go

With WebAssembly you can integrate different programming languages together. This opens up new possibilities to use great libraries written in one language in another different platform. In this article I want to show how to integrate a Go library for sentence tokenization in a JavaScript webpage. Normally, you cannot run Go code in a web browser, but with the WebAssembly technology you can.

## WebAssembly

[WebAssembly](https://github.com/WebAssembly/spec) is a W3C specification that defines a binary and text format for executable programs that can run in the browser but also stand-alone.  WebAssembly programs run in a stack-based virtual machine (VM). Taking its name from the programming language of Assembly, which is very close to the actual hardware, WebAssembly defines a more device-independent language than Assembly, but is still very low-level.

As of the time of writing this article, WebAssembly is supported by 97.11 % of all global browsers (caniuse.com). There exist various extensions to the W3C WebAssembly specification which have different levels of support among browsers.

## Sentences Go Library

[Sentences](https://github.com/neurosnap/sentences) is a Go library for sentence tokenization written by Eric Bower and published as open source on GitHub. Since you cannot run Go code in the browser natively, only JavaScript, there is the idea of using WebAssembly to integrate the library into a website.

## Expose Sentences Library to JavaScript

You can integrate the sentences library by writing a Go wrapper application that leverages the [syscall/js package of Go](https://pkg.go.dev/syscall/js). It is part of the Go standard library.
Note, that at the time of writing this article, this package is tagged as "experimental".

Specifically, we will be using the `js.FuncOf` function. Here is the full source code of the Go application:

```Go
package main

import (
	"fmt"
	"strings"
	"syscall/js"

	"github.com/neurosnap/sentences/english"
)

func sentenceWrapper() js.Func {
	sentenceFunc := js.FuncOf(func(this js.Value, args []js.Value) any {
		if len(args) != 1 {
			return "Invalid no of arguments passed"
		}
		inputSentence := args[0].String()
		fmt.Printf("input %s\n", inputSentence)
		tokenizer, err := english.NewSentenceTokenizer(nil)
		if err != nil {
			panic(err)
		}

		sentences := tokenizer.Tokenize(inputSentence)
		for _, s := range sentences {
			fmt.Println(s.Text)
		}

		var sentenceTexts []string
		for _, s := range sentences {
			trimmedText := strings.TrimSpace(s.Text)
			sentenceTexts = append(sentenceTexts, trimmedText)
		}

		allSentences := strings.Join(sentenceTexts, "\n") // Join all sentences separated by a space
		return allSentences

	})
	return sentenceFunc
}

func main() {
	fmt.Println("Go Web Assembly")
	js.Global().Set("tokenizeSentence", sentenceWrapper())
	<-make(chan struct{})
}
```

You see that now the `sentenceWrapper` function is exposed as the `tokenizeSentence` function in JavaScript. It expects as argument a string to tokenize and returns the tokenized string. The actual integration with the sentences library happens inside the function passed to `js.FuncOf`.

## Compile Wrapper

You compile the application to WebAssembly using the following Go build command:

```bash
GOOS=js GOARCH=wasm go build  -o main.wasm
```

If everything went fine, you should find the `main.wasm` file as output in your folder. This is the WebAssembly binary that will be loaded into the JavaScript application.

## Integrate WebAssembly Go Library in Website

In order to load the `main.wasm` file into the webpage, you need the following code:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="wasm_exec.js"></script>
    <script>
      const go = new Go();
      WebAssembly.instantiateStreaming(
        fetch("./main.wasm"),
        go.importObject
      ).then((result) => {
        go.run(result.instance);
      });
    </script>
  </head>
  <body>
    <textarea id="sentenceinput" name="jsoninput" cols="80" rows="20"></textarea>
    <input
      id="button"
      type="submit"
      name="button"
      value="tokenize"
      onclick="tokenize(sentenceinput.value)"
    />
    <textarea id="jsonoutput" name="jsonoutput" cols="80" rows="20"></textarea>
  </body>
  <script>
    var tokenize = function (input) {
      jsonoutput.value = tokenizeSentence(input);
    };
  </script>
</html>
```

When running this webpage in the browser, you also need the utility JavaScript file `wasm_exec.js` in the current directory. You can get the file from:

```bash
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
```

As you can see from the JavaScript code, the exposed `tokenizeSentence()`  function is called from JavaScript when clicking the "tokenize" button. The contents of the input field is used as argument to the function and the return value is then written in the text field to the right.

Note that you need to run a web server in order to run the webpage in your browser. You can use this code to build a webserver in Go:

server/server.go
```go
package main

import (
	"fmt"
	"net/http"
)

func main() {
	err := http.ListenAndServe(":9090", http.FileServer(http.Dir("../")))
	if err != nil {
		fmt.Println("Failed to start server", err)
		return
	}
}
```

After starting the web server, you can access the page in your browser under: `http://localhost:9090`.

Thanks to Naveen Ramanathan from [golangbot.com](https://golangbot.com/webassembly-using-go/) for his inspiration to this article.

## Conclusion

As always, I hope this article helped you in some way to stay curious. WebAssembly is a technology that has great potential to integrate the many different language eco-systems between each other.

## References

- WebAssembly.org: [https://webassembly.org](https://webassembly.org)

- WebAssembly specification: [https://github.com/WebAssembly/spec](https://github.com/WebAssembly/spec)

- Go sentences library: [https://github.com/neurosnap/sentences](https://github.com/neurosnap/sentences)

- Syscall/js package: [https://pkg.go.dev/syscall/js](https://pkg.go.dev/syscall/js)

- Golangbot Webassembly using Go: [https://golangbot.com/webassembly-using-go](https://golangbot.com/webassembly-using-go)

Photo by <a href="https://unsplash.com/@ventiviews?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Venti Views</a> on <a href="https://unsplash.com/photos/aerial-view-of-city-buildings-during-daytime-KElJx4R4Py8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
  

large_venti-views-KElJx4R4Py8-unsplash.jpg

medium_venti-views-KElJx4R4Py8-unsplash.jpg

small_venti-views-KElJx4R4Py8-unsplash.jpg

thumbnail_venti-views-KElJx4R4Py8-unsplash.jpg

With WebAssembly you can integrate different programming languages together. This opens up new possibilities to use great libraries written in one language in another different platform. In this article I want to show how to integrate a Go library for sentence tokenization in a JavaScript webpage.

Integrate Go Library into a JavaScript Webpage with WebAssembly

The World Factbook by the U.S. government contains a plethora of facts of all of the countries of this world. Up until now it was not easy to query and visualize the contained data. The open source project `chi-country-facts` is a GraphQL API and GUI of the World Factbook. I would like to introduce it in this article.

## World Factbook

The World Factbook is a collection of data about all of the countries of the world. It is published by the U.S. government and therefore has a U.S.-centric bias. But it contains a plethora of data that are homogenized that make it easy to compare countries globally. Therefore, it is used as the basis of data for the project `chi-country-facts`.

## Chi-country-facts

`Chi-country-facts` relies on project `factbook.json` by Gerald Bauer which parses the published website of the World Factbook and offers it as easily usable data in the JSON format.

![stack of chi-country-facts](https://res.cloudinary.com/dxxtt2clx/image/upload/v1716478733/Screenshot_2024_05_23_at_17_38_34_9558ec6b16.png)

`Chi-country-facts` consists of a loader that imports the JSON country data into a Mongo database.
It integrates the Apollo GraphQL server and also contains an easy graphical interface to send GraphQL queries (Apollo Sandbox), as seen on the screenshot below:

![screenshot chi-country-facts](https://res.cloudinary.com/dxxtt2clx/image/upload/v1716475556/Screenshot_2024_05_20_at_15_37_36_1db2608db3.png)

Other possibilities of using `chi-country-facts` is by building custom application on top of it and querying the data via the GraphQL API. You can also query the Mongo database directly. There are drivers in many programming languages available.

But how do you install the application and use it on your own system?

## Installation

A prerequisite for easy installing `chi-country-facts` is that you have Docker on your system.

As `chi-country-facts` publishes an image on Docker Hub, you can run it together with a Mongo database using the following docker compose file:

docker-compose.yml
```yml
version: '3'
services:
  app:
    image: tderflinger/chi-country-facts:0.3.0
    ports:
      - "4000:4000"
    depends_on:
      - db
    environment:
      - MONGO_URL=mongodb://db:27017/CountryFacts
  db:
    image: mongo:latest
    volumes:
      - mongodb_data:/data/db

volumes:
  mongodb_data: 
```
Note, adapt the image version number to the latest version. You can find this information on Docker Hub.

Once you have the docker-compose.yml on your file system, run it with:

```bash
docker compose up
```

Then, you can browse to `http://localhost:4000` and you can specify GraphQL queries in an easy-to-use interface.

## GraphQL Queries

Once you are in the Apollo GraphQL sandbox you can specify the GraphQL queries in the main editor. If you do not want to manually enter the queries, you can easily click the items you want to query on the left side. This is usually faster and easier.

When you have finished specifying your query, you can click the "Run" button and on the right hand side appear the results. If there are errors, the sandbox will tell you what needs to be fixed.

A valid query to enter would be for example the following:

```graphql
query WorldFactsQuery {
  country {
    name
    economy {
      agriculturalProducts
      budgetRevenues
    }
    geography {
      areaLand
      mapReferences
    }
  }
}
```

The attribute `mapReferences` is the continent (e.g. Africa, Europe, etc.). Other attributes are usually normalized, for example, the budgetRevenues attribute is the amount in USD.

When you run the query you should see the response on the right hand side of the screen. You can switch between JSON and table view. 

The next step is to export the results for further processing.

## Exporting Results

On the top of the `Response` panel you have the option to export the results data as CSV or JSON. Both are great formats for further processing. In our case we prefer CSV because one favorite data analysis tools supports it with ease.

## Data Analysis

There exist a plethora of tools for analyzing data in CSV format. One popular open source tool is [Pandas](https://pandas.pydata.org).

You can install it on most systems and use it with the Python programming language.

## Data Visualization

Using Pandas you can also do some data visualization, for example in Matplotlib. There are many tutorials for Pandas and Matplotlib on the web.

A great way to do interactive visualizations on the web is creating diagrams with D3.js. D3.js is a JavaScript library that makes it easier to create high-level interactive diagrams, like bar charts, pie charts, treemaps and many other types.

The diagrams on the page [Visual World Facts](https://visual-world-facts.pages.dev) were created using D3.js.
Visual World Facts is a website grown out of `chi-country-facts`. There, I used the data I queried and built interactive treemaps that show interesting relationships of the world's countries.

Check it out if you are interested.

## Conclusion

In today's internet there exist many great open sources of data about the world. It is important to stay curious. With the tools I developed, I hope you can gain great new insights into the wealth of data more easily.

## References

- Visual World Facts: [https://visual-world-facts.pages.dev](https://visual-world-facts.pages.dev)

- chi-country-facts: [https://github.com/tderflinger/chi-country-facts](https://github.com/tderflinger/chi-country-facts)

- Apollo GraphQL Server: [https://www.apollographql.com/docs/apollo-server](https://www.apollographql.com/docs/apollo-server)

- Pandas: [https://pandas.pydata.org](https://pandas.pydata.org)

- Factbook.json: [https://github.com/factbook/factbook.json](https://github.com/factbook/factbook.json)

large_vackground-com-hDQ-dUjQN8E-unsplash.jpg

medium_vackground-com-hDQ-dUjQN8E-unsplash.jpg

small_vackground-com-hDQ-dUjQN8E-unsplash.jpg

thumbnail_vackground-com-hDQ-dUjQN8E-unsplash.jpg

The World Factbook by the U.S. government contains a plethora of facts of all of the countries of this world. Up until now it was not easy to query and visualize the contained data. The open source project chi-country-facts is a GraphQL API of the World Factbook. I want to present it in this article.

Query World Factbook with GraphQL

Normally, when buying a home light that you want to control electronically, you need to install custom software. But with the ZigBee protocol and the RaspBee II gateway, you can use compatible devices and open source software. In this article I will show you how to add a custom Go API service to the stack.

In the following diagram, you can see the software stack that I use for the project:

![Software stack](https://res.cloudinary.com/dxxtt2clx/image/upload/v1710517369/Screenshot_2024_03_15_at_16_42_22_8508b85b01.png)

## ZigBee

ZigBee is an IEEE 802.15.4-based specification for a suite of high-level communication protocols used to create personal area networks with small, low-power digital radios. It is often used in home automation, but also in other contexts like industrial production or medical devices.
Its key feature is that it does not use much power. Therefore, it can often run on battery for a long time. The flip-side of this coin is that its data rate is also low. But for turning on and off lights this is enough.

When you buy a ZigBee enables device, like a LED light strip, you need a gateway to control the device.

## RaspBee II Gateway

One such ZigBee gateway is the [Raspbee II gateway](https://phoscon.de/en/raspbee2) that I use for this article. RaspBee II is developed by Dresden Elektronik in Germany and is an extension card that fits on a standard Raspberry Pi. RaspBee II comes with a software application called "deCONZ" that interfaces with the hardware. 

The great thing about deCONZ is that you can integrate it easily with Home Assistant, thereby allowing you to control the ZigBee gateway directly within Home Assistant.

## Home Assistant

[Home Assistant](https://www.home-assistant.io) is a widely used open source home automation application. It was originally developed by Paulus Schoutsen and initially released in 2013. It is written in Python and has a web interface but also releases mobile apps.

In Home Assistant you can add deCONZ as an integration. Thereby, your ZigBee devices that are recognized by deCONZ are also available in Home Assistant. Then, you can configure simple automation routines. For example, if you have a motion detector device, you could add an automation routine that whenever a movement is detected, the lights turn on.

But for our purpose, we want to integrate MQTT and control the lights via MQTT.

## Mosquitto

MQTT is a light-weight publish-subscribe protocol that is often used in home automation scenarios. Applications can communicate with each other with a publish-subscribe messaging mechanism.
In our case I use it to control the state of the LED lights. 

But first, we need to install a MQTT broker. One popular open source MQTT broker is Eclipse Mosquitto. It is easy to install and configure.
In my case I installed it together on the same machine where Home Assistant runs.

Then, you configure an automation in Home Assistant that reacts to messages received on a MQTT channel and turns the LED lights on or off.

You can see my configuration in the follwing screenshot:

![Home Assistant MQTT](https://res.cloudinary.com/dxxtt2clx/image/upload/v1710515892/Screenshot_2024_03_15_at_16_14_29_0a04ad1643.png)

As MQTT topic I chose "/homeassistant/sleep-light", but the naming is up to you. It just needs to be consistent with the Go web application we program later that publishes a MQTT message.

Once Home Assistant is configured, it listens for incoming MQTT messages on the topic "/homeassistant/sleep-light" and toggles the LED light accordingly.

Now we need to create a REST API and a simple web application to control the lights.

## Go App

For writing the REST API and the simple web application, I chose Go as the programming language. With Go it is easy to compile to ARM architecture processors. Also, deployment is straightforward on the Raspberry Pi.

This is the source code of the Go application:

```Go
package main

import (
	"fmt"
	"os"

	mqtt "github.com/eclipse/paho.mqtt.golang"
	"github.com/gofiber/fiber/v2"
)

func main() {
	broker := "tcp://your-server:1883"
	clientID := "go-mqtt-publisher"
	topic := "/homeassistant/sleep-light"
	message := "TOGGLE"

	opts := mqtt.NewClientOptions().AddBroker(broker).SetClientID(clientID)
	client := mqtt.NewClient(opts)
	if token := client.Connect(); token.Wait() && token.Error() != nil {
		fmt.Println(token.Error())
		os.Exit(1)
	}

	app := fiber.New()

	app.Get("/", func(c *fiber.Ctx) error {
		return c.SendFile("./public/index.html")
	})

	app.Get("/v1/lights", func(c *fiber.Ctx) error {
		token := client.Publish(topic, 0, false, message)
		token.Wait()

		if token.Error() != nil {
			return c.SendString(token.Error().Error())
		} else {
			return c.SendString("Toggled lights!")
		}
	})

	app.Listen(":3005")
}
```

As a REST API framework I use [Fiber](https://gofiber.io). The MQTT library is Paho MQTT. Before you run this Go app, you need to adapt the "broker" endpoint to your server.
This application listens on the GET "/v1/lights" endpoint and sends out a MQTT message to the Mosquitto MQTT broker. Since Home Assistant listens for these kind of MQTT messages, once you invoke the REST endpoint, the LED lights toggle.

One missing piece is the web application. It is a simple button that invokes the "/v1/lights" GET endpoint. Thus, the lights are toggled when the button is pressed.

Here is the web application:

index.html
```html
<!DOCTYPE html>
<html>
  <head>
    <title>Lights Toggler</title>
  </head>
  <body>
    <button id="myButton" style="font-size: 60px; padding: 10px 20px;">Toggle Lights</button>

    <script>
      document
        .getElementById("myButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", "http://your-server:3005/v1/lights", true);
          xhr.send();
        });
    </script>
  </body>
</html>
```

This web page gets delivered to the browser via the "/" endpoint as configured in the Go Fiber application.

In the web page I used XMLHttpRequest() instead of the now standard fetch() because the website has to work on legacy browsers for me. If this is not the case for you, then you can substitute these lines with fetch().

Now you can control the ZigBee lights with a web application and an API.

This brings to an end our story of how to control ZigBee LED lights with a web application. I hope you enjoyed the ride.

## Conclusion

As you could see from this article, integrating a LED ZigBee light into the word of web standard like HTTP and web applications requires quite some pieces. But luckily, many parts are open source and freely available. I am sure there are other ways to reach the same goal, and I would love the hear your story. You can contact me by pressing the contact button below.

## References

- ZigBee: [https://csa-iot.org](https://csa-iot.org)
- RaspBee II: [https://phoscon.de/en/raspbee2](https://phoscon.de/en/raspbee2)
- Home Assistant: [https://www.home-assistant.io](https://www.home-assistant.io)
- Mosquitto: [https://mosquitto.org](https://mosquitto.org)
- Go: [https://go.dev](https://go.dev)
- Fiber: [https://gofiber.io](https://gofiber.io)

Cover photo by <a href="https://unsplash.com/@9thvenom?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Dejan Nasteski</a> on <a href="https://unsplash.com/photos/blue-and-white-light-fixture-I3rvOvxvybE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
  

large_dejan-nasteski-I3rvOvxvybE-unsplash.jpg

medium_dejan-nasteski-I3rvOvxvybE-unsplash.jpg

small_dejan-nasteski-I3rvOvxvybE-unsplash.jpg

thumbnail_dejan-nasteski-I3rvOvxvybE-unsplash.jpg

Normally, when buying a home light that you want to control electronically, you need to install custom software. But with the ZigBee protocol and the RaspBee II gateway, you can use compatible devices and open source software. In this article I will show you how to add a custom Go API service to the stack.

Control ZigBee LED Lights with Go Web App

## Pure Functions

In recent years, with the augmentation of the functional programming style in JavaScript came the insight that functions generally and especially pure functions are easier to reason about than the object-oriented programming (OOP) paradigm. Therefore, general functional style programming has become more and more prevalent in the JavaScript community. For example, React moved to function components from class components.

In computer programming, a pure function is a function that returns for identical parameters identical output. Also, a pure function has no side effects like mutation of variables or mutable arguments.

Within functional style programming, pure functions therefore take a special place. By some proponents they are the preferred way to program in JavaScript, if possible (see for example [Dmitri Pavlutin](https://dmitripavlutin.com/javascript-pure-function)).

## Pure Functions in JavaScript

JavaScript as defined in the ECMAScript specification comes with a great number of predefined objects and functions. Many of the functions are not pure, but a number of them are pure functions that we can preferrably use.

These are the pure functions that are available in JavaScript by default (non-exhaustive list):

### General

- **parseInt():**  It parses the string argument and returns an integer.

```javascript
console.log(parseInt('123456'));
// 123456
```

- **parseFloat():** It parses a string and return a floating point number.

```javascript
console.log(parseFloat("3.14"));
// 3.14
```

### String

- **String.slice():** This function extracts a portion of a string and returns a new string.

```javascript
const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(4, 19));
// "quick brown fox"
```
- **String.trim():** This function removes the whitespace from both ends of the string and returns a new string, not modifying the original string.

```javascript
const greeting = "   Hello developers!   ";

console.log(greeting.trim());
// Expected output: "Hello developers!";
```

- **String.toUpperCase(), String.toLowerCase():** Function returns the string converted to uppercase or lowercase.

```javascript
const sentence = 'Hello developers!';

console.log(sentence.toUpperCase());
// Expected output: "HELLO DEVELOPERS!"
```

- **String.substring():** This function returns the part of this string from the start index up to and excluding the end index, or to the end of the string if no end index is supplied.

```javascript
const str = 'Ríoverse';

console.log(str.substring(1, 3));
// Expected output: "ío"

console.log(str.substring(2));
// Expected output: "overse"
```

- **String.charAt():** This method returns a new string consisting of the single UTF-16 code unit at the given index.

```javascript
const sentence = 'I like learning languages with Ríoverse.';

const index = 2;

console.log(`The character at index ${index} is ${sentence.charAt(index)}`);
// Expected output: "The character at index 2 is l"
```

- **String.replace():** This method returns a new string with one, some, or all matches of a pattern replaced by a replacement.

```javascript
const paragraph = "I think Tania's cat is cuter than your cat!";

console.log(paragraph.replace("Tania's", 'my'));
// Expected output: "I think my cat is cuter than your cat!"
```

### Math

- **Math.sqrt():** This method returns the square root of a number.

```javascript
console.log(Math.sqrt(16));
// Expected output: 4
```

There are many other Math functions that are pure functions. I will leave it to a page like MDN to enumerate them all.

### Array

These array functions do not modify the original array, but return a new array or a value based on the input array.

- **Array.concat():** This function is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

```javascript
const array1 = ['α', 'β', 'γ'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["α", "β", "γ", "d", "e", "f"]
```
- **Array.map():** This function creates a new array populated with the results of calling a provided function on every element in the calling array.

```javascript
const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]
```

- **Array.filter():** The function creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

```javascript
const words = ['spray', 'elite', 'exuberant', 'creation', 'language'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "creation", "language"]
```

- **Array.reduce():** This method of the Array instances executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

```javascript
const array1 = [1, 2, 3, 4, 5];

// 0 + 1 + 2 + 3 + 4 + 5
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 15
```

- **Array.every():** This method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

```javascript
const isBelowThreshold = (currentValue) => currentValue < 50;

const array1 = [1, 30, 39, 29, 10, 13, 48];

console.log(array1.every(isBelowThreshold));
// Expected output: true
```

- **Array.some():** This method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

```javascript
const array = [1, 2, 3, 4, 5];

// Checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// Expected output: true
```

- **Array.slice():** The method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

```javascript
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
```

Be careful, there exists a similar non-pure function called Array.splice(). 

- **Array.toReversed():** This method the copying counterpart of the reverse() method. It returns a new array with the elements in reversed order.

```javascript
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]
```

Note that the Array.reverse() method is the non-pure counterpart to Array.toReversed().

### Object

- **Object.keys():** This method returns an array of a given object's own enumerable string-keyed property names.

```javascript
const object1 = {
  a: 'astring',
  b: 42,
  c: false,
};

console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]
```

- **Object.values():** The method returns an array of a given object's own enumerable string-keyed property values.

```javascript
const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
};

console.log(Object.values(object1));
// Expected output: Array ["somestring", 42, false]
```

## Conclusion
If you prefer the function style of programming in JavaScript, I am sure these pure functions will come handy in your projects.
They reduce complexity and allow you to reason about your code more easily. Thus, this helps to reduce bugs.

If you have other examples of pure functions that you would like mentioned, please let me know and click the contact button below.

## References

- MDN: [https://developer.mozilla.org/en-US](https://developer.mozilla.org/en-US)
- Blog by Dmitri Pavlutin: [https://dmitripavlutin.com/javascript-pure-function](https://dmitripavlutin.com/javascript-pure-function)

Cover Image: Photo by <a href="https://unsplash.com/@jim_ahlberg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">James Ahlberg</a> on <a href="https://unsplash.com/photos/c-JzfmmDszTrw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
  

large_james-ahlberg-JzfmmDszTrw-unsplash.jpg

medium_james-ahlberg-JzfmmDszTrw-unsplash.jpg

small_james-ahlberg-JzfmmDszTrw-unsplash.jpg

thumbnail_james-ahlberg-JzfmmDszTrw-unsplash.jpg

Functional programming style in JavaScript has become more popular in recent years. Therefore, it is important to know examples of pure functions that are available to all JavaScript developers. They are the preferred way to use functional programming in JavaScript.

Catalog of Pure Functions in JavaScript

In many circumstances it is convenient to work remotely using Visual Studio Code. There is a fine VS Code extension that allows you to work on a remote machine as if it was your local machine. This is great for things like embedded programming or developing in the cloud. Read here how to do this.

## Why Working Remotely

Often when working on embedded projects like IoT devices you have two possibilities. One is to use a development machine that is separated from the embedded device and work there. Depending on the programming language, you will possibly need to use a cross-compiler to generate the version suitable for the embedded device. The other possibility is to directly work on the embedded device and develop there. This has the advantage of finding errors earlier, but may not always be possible due to device constraints. 

But now with the "Remote SSH" extension for Visual Studio Code you can comfortably develop within Visual Studio Code on your development machine and execute directly on the embedded device. This makes development on remote machines more convenient. 
The source code and the execution environment are directly located on the remote machine. You can access the remote machine comfortably via your development machine.

The next step is how to install the extension.

## Installing the Remote - SSH Extension

The pre-requisite for using the Remote SSH Extension is that the remote (e.g. embedded) machine has a running SSH server and a minimum of 1GB of RAM. This includes most versions of the Raspberry Pi as well as many server instances of cloud providers.

In Visual Studio Code you can install the Remote SSH Extension via the extension tab like so:

![Screenshot Remote SSH Extension](https://res.cloudinary.com/dxxtt2clx/image/upload/v1702380058/Screenshot_2023_12_12_at_12_19_59_86c30b7e00.png)

## Connect to Remote Machine

Once you have installed the extension, you can connect to your remote device via the command palette and search for "Remote-SSH: Connect to Host...". Now enter the IP address and then the user name and password of you remote machine.

![Connect to remote machine](https://res.cloudinary.com/dxxtt2clx/image/upload/v1702380726/Screenshot_2023_12_12_at_12_25_44_c42e8e147d.png)

Upon a successful connect, you wil see a new Visual Studio Code window where you can directly edit source files and execute scripts in the terminal.
The great thing is that you can open source files that are located directly on your remote machine but edit them seamlessly on your development machine. In case you need other language specific VS Code extensions like for example for editing Python you can install them there.

Once you have developed your first project with the help of the extension, you will notice that it is faster and esier than installing everything from scratch on the remote machine. Often it is even not possible to work with Visual Studio Code directly on the remote or embedded device.

## Conclusion

I hope in this article you could learn something new about the useful Visual Studio Code extension "Remote SSH". I am sure you can find other use cases like working remotely on cloud machines. If you like the extension do not hesitate to write me, I would love to hear from you.

## References

- Remote SSH Extension: [https://code.visualstudio.com/docs/remote/ssh](https://code.visualstudio.com/docs/remote/ssh)

- Visual Studio Code: [https://code.visualstudio.com](https://code.visualstudio.com)

Cover photo: <a href="https://unsplash.com/@heroye2?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Chung Yee Tsang</a> on <a href="https://unsplash.com/photos/house-surrounded-by-trees-during-nighttime-wqxCKM0R6R8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
  

large_chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg

medium_chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg

small_chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg

thumbnail_chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg

In many circumstances it is convenient to work remotely using Visual Studio Code. There is a fine VS Code extension that allows you to work on a remote machine as if it was your local machine. This is great for things like embedded programming or developing in the cloud. Read here how to do this.

Working Remotely Using Visual Studio Code

Often people use Nest.js and Prisma together when they program a backend application. Then there is the question of how to deploy the application with Docker. This article shows you how.

## Nest.js

[Nest.js](https://nestjs.com) is a framework for building server-side JavaScript and TypeScript applications. It provides an abstraction atop Express.js or Fastify. It has a good architecture and bigger server-side applications can be programmed faster than with pure Express.js or Fastify.
Often, Nest.js applications use an ORM (Object-Relational Mapping) and thus Prisma comes into play.

## Prisma 

Using an ORM in Node and Nest.js application faciliates manipulating and querying data in a SQL database. Due to the mismatch between an object-oriented programming language like TypeScript and the relational data model, a tool like Prisma is very useful.
Prisma has a single source of truth for the data model which is good design. It can easily be used within a Nest.js application.

Once you develop your Nest.js application, you also need to think about deployment. This is where containers with Docker shine.

## Docker

[Docker](https://www.docker.com) is used to automate the deployment of software in lightweight packages called containers. It is nowadays the standard of deploying server-side software in the cloud.

So when you want to deploy your Nest.js application that uses Prisma to a cloud service that supports Docker, you need to write a *Dockerfile*. The Dockerfile specifies the steps of creating a Docker image.

## How to Dockerize

This  is an example Dockerfile for a Nest.js application that uses Prisma:

```Docker
# Use an official Node.js runtime as the base image
# This line specifies the base image for the Docker image. In this case, we're using an official Node.js runtime image with version 18.18 and the # Alpine Linux distribution.
FROM node:18.18-alpine

# This line sets the working directory inside the container to /usr/src/app. This is where we'll copy our application code and where the # application will run.
WORKDIR /usr/src/app

# This line installs the build-base package using the Alpine package manager (apk). This package includes the necessary tools for building   
# native Node.js modules.
RUN apk add build-base

# This line installs Python 3 using the Alpine package manager. Python is required for some Node.js modules that have native dependencies.
RUN apk add python3

# This line installs the node-gyp package globally using npm. node-gyp is a tool for building native Node.js modules.
RUN npm install -g node-gyp

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install application dependencies
RUN npm install

# Copy the rest of your application code to the container
COPY . .

# This line sets an environment variable that tells the Prisma ORM to ignore missing engine checksums. This is useful when deploying to certain 
# platforms like Heroku.
ENV PRISMA_ENGINES_CHECKSUM_IGNORE_MISSING=1

# This line generates the Prisma client code based on the schema defined in the application.
RUN npx prisma generate

# Expose the port that your application will run on (Nest.js default is 3000)
EXPOSE 3000

# Define the command to run your application
CMD ["npm", "start"]
```

I included comments at each line of the *Dockerfile*. Please note that because of Prisma, there have been more steps necessary than for a pure Nest.js application. In this *Dockerfile* I used an Alpine Linux Node image because it is smaller in size and more secure than the standard Node image.

The next step is the build the image using Docker. You can do this with the following command:

```bash
docker build -t <image-name> .
```

Then you can start the image and run it as a container. If you use a tool like Docker Desktop, it is simply clicking on the run button. There also exists a command on the command line:

```bash
docker run -p <host-port>:<container-port> <image-name>
```

In our case, the *container-port* is 3000 (EXPOSE 3000 command in the Dockerfile). Finally, you should be able to access your deployed application.

## Conclusion

As you could hopefully see, Nest.js applications are principally not difficult to dockerize. When using the Prisma client, there are a number of additional steps that need to be taken. I hope you learned something new.

## References

- Nest.js: [https://nestjs.com](https://nestjs.com)

- Prisma: [https://www.prisma.io](https://www.prisma.io)

- Docker: [https://www.docker.com](https://www.docker.com)

Cover photo: <a href="https://unsplash.com/de/@lazycreekimages?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Michael Dziedzic</a> on <a href="https://unsplash.com/de/fotos/dreieckiges-rotes-und-blaues-dreieck-W6l35A_rxxU?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
  

large_michael-dziedzic-W6l35A_rxxU-unsplash.jpg

medium_michael-dziedzic-W6l35A_rxxU-unsplash.jpg

small_michael-dziedzic-W6l35A_rxxU-unsplash.jpg

thumbnail_michael-dziedzic-W6l35A_rxxU-unsplash.jpg

Often people use Nest.js and Prisma together when they program a backend application. Then there is the question of how to deploy the application with Docker. This article shows you how.

How to Dockerize a Prisma Nest.js Application

React Three Fiber is a React wrapper for the Three.js library, facilitating the integration of 3D objects into React applications. It claims similar speed and feature capabilities as Three.js directly. In this article, I show you by using a demo application how to display a glTF model in the browser.

## glTF

GlTF is a file format for three-dimensional scenes and models. It is an open standard managed by the Khronos Group. 
GlTF exists as two variants, .gltf as text format and .glb as binary format.
A lot of 3D software applications can directly export in glTF, for example Blender or Autodesk 3D Max.

## React Three Fiber

React Three Fiber is basically a React wrapper around the Three.js library. Three.js is a popular open source library for creating and displaying 3D objects in the browser. Thus, by leveraging React Three Fiber you can more easily use 3D objects in your React application than by going directly to Three.js. It makes Three.js available in a React idiomatic way.

It claims to be as fast as using Three.js directly. Also, it offers as many features as Three.js.

## Example Application

In order to demonstrate how to display a glTF 3D model using React Three Fiber we first create a React Three Fiber application using one of the ways indicated in the React Three Fiber documentation under: [https://docs.pmnd.rs/react-three-fiber/getting-started/installation](https://docs.pmnd.rs/react-three-fiber/getting-started/installation)

Then, we download a public domain model from [Smithsonian here](https://3d.si.edu/object/3d/command-module-apollo-11:d8c6457e-4ebc-11ea-b77f-2e728ce88125). It is a model of the command module of Apollo 11. 

You need to call a utility application called `gltfjsx` which converts the .glb file into a React component, like so:

```bash
npx gltfjsx apollo_exterior-150k-4096.glb
```

Copy the resulting React component `.jsx` file into your React application.

In your `App.css` you need to adapt the available size like this:

```css
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
```

Now modify the `App.tsx` of your application to display the Apollo module:

```tsx
import { Suspense } from 'react'
import './App.css'
import { Canvas } from '@react-three/fiber'
import { Model } from './Apollo';
import { OrbitControls } from '@react-three/drei';

function App() {

  return (
    <>
    <Canvas>
      <ambientLight intensity={0.5} />
      <OrbitControls />
      <Suspense>
        <Model position={[0, -500, 0]} />
      </Suspense>
    </Canvas>
    </>
  )
}

export default App
```

In my case, I called the React component `Apollo` and used the model component within a React `Suspense` component.
Everything is displayed on a canvas and there are also some lights so that you can view the model.
The `OrbitControls` component manages the rotation of the model with your mouse in the browser.

If you have not done so, you will also need to install the React library `@react-three/drei` because it is also needed.

Start your application with `npm run dev` and if everything went fine, you should see the Apollo 3D model. If you don't see the model at first, try rotating the model into the viewport.

It should look like this:

![Apollo module](https://res.cloudinary.com/dxxtt2clx/image/upload/v1693586612/Screenshot_2023_09_01_at_18_42_00_2a548ffa4d.png)

## Use Cases

Use cases for this application would be for example e-commerce websites where you want to integrate 3D product models in your shop.
If the e-commerce site is written in React, for example with Next.js, using React Three Fiber with glTF models would be a great solution.
You can leverage 3D models in a React way.

Also, for example, museums that have their sites written in React and want to show some of their artifacts in 3D would benefit from using React Three Fiber.

I am sure you will come up with more use cases. Write me if you have used React Three Fiber in your project!

## Conclusion

React Three Fiber offers an easy path to get started with 3D when you already have React knowledge. It leverages the power of Three.js and lets programmers integrate 3D models in their websites. This article only scratched the surface, and there is much more to explore.

## References

- Kronos glTF: [https://www.khronos.org/gltf](https://www.khronos.org/gltf/)
- React Three Fiber: [https://docs.pmnd.rs/react-three-fiber](https://docs.pmnd.rs/react-three-fiber)
- gltfjsx: [https://github.com/pmndrs/gltfjsx](https://github.com/pmndrs/gltfjsx)
- Command Module Apollo 11 glTF from Smothsonian (CC0): [https://3d.si.edu/object/3d/command-module-apollo-11:d8c6457e-4ebc-11ea-b77f-2e728ce88125](https://3d.si.edu/object/3d/command-module-apollo-11:d8c6457e-4ebc-11ea-b77f-2e728ce88125)

Cover photo by <a href="https://unsplash.com/de/@messrro?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mehdi MeSSrro</a> on <a href="https://unsplash.com/de/fotos/r-O95aZ6wvI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

large_mehdi-messrro-r-O95aZ6wvI-unsplash.jpg

medium_mehdi-messrro-r-O95aZ6wvI-unsplash.jpg

small_mehdi-messrro-r-O95aZ6wvI-unsplash.jpg

thumbnail_mehdi-messrro-r-O95aZ6wvI-unsplash.jpg

React Three Fiber is a React wrapper for the Three.js library, facilitating the integration of 3D objects into React applications. It claims similar speed and feature capabilities as Three.js directly. In this article, I show you by using a demo application how to display a glTF model in the browser.

React Three Fiber for Displaying a glTF 3D Model

Discover how to enhance your React components with type safety using TypeScript typings for events. TypeScript, a powerful superset of JavaScript, allows you to catch errors early and improve code clarity. Delve into browser events and their role in notifying applications of user or browser-triggered changes. Explore the world of React events and learn how to handle them effectively with TypeScript, enabling seamless integration of event typings for better tooling support and reliability.

## React in TypeScript

React is a JavaScript library that enables software developers to write components with code and markup.
TypeScript is a superset of JavaScript that adds type annotations to variables, functions, and objects.
React can be used with TypeScript to create type-safe components. Using TypeScript is especially
recommended for larger projects because it helps to avoid bugs and makes the code easier to understand.

You can install the React typings in TypeScript with the following command:

```bash
npm install @types/react --save-dev
```

Let us take a look at the typings for React using the JavaScript browser events.

## JavaScript Browser Events

In JavaScript in the browser, events are fired to notify the application of "interesting changes".
These changes can be triggered by the user, such as clicking a button, or by the browser, such as
the page loading or an error occurring. But events can also be server sent events or events from workers.

Since we are focused on React in this article, we are mainly concerned with the events that are triggered by the user in the browser.

## React Events

React facilitates the handling of events in the browser. The event handlers are functions that are called when the event occurs. 

This is an example of handling a keyboard event in React:

```jsx
const KeyboardEventExample = () => {
 const onKeyPress = (event) => {
   console.log(event.key);
 }; 

 return (
    <input type="text" onKeyPress={onKeyPress} />
  );
};
```

In this example, the onKeyPress function is called when the user presses a key on the keyboard. The event object is passed to the function as an argument. The event object contains information about the event, such as the key that was pressed.

## TypeScript React Event Typings

The same `KeyboardEventExample` in TypeScript looks like this:

```tsx
import React from 'react';

const KeyboardEventExample: React.FC = () => {
  const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(event.key);
  };

  return (
    <input type="text" onKeyPress={onKeyPress} />
  );
};
```

The `React.FC` is the type definition of a function component. In our case it has no props.

In the `index.d.ts` file of the `@types/react` package, the `React.FC` is defined as follows:

```ts
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}
```

The type signature of the `onKeyPress` function is `React.KeyboardEvent<HTMLInputElement>`. This means that the function takes an event object as an argument that is of type `React.KeyboardEvent<HTMLInputElement>`. The `React.KeyboardEvent` is a generic type that takes the type of the target element as a type argument. In our case, the target element is an `HTMLInputElement` because we use the `<input>` element.

The `React.KeyboardEvent` is defined in the `index.d.ts` file of the `@types/react` package as follows:

```ts
export type ModifierKey = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Hyper" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Super" | "Symbol" | "SymbolLock";

interface KeyboardEvent<T = Element> extends UIEvent<T, NativeKeyboardEvent> {
    altKey: boolean;
    /** @deprecated */
    charCode: number;
    ctrlKey: boolean;
    code: string;
    /**
     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
     */
    getModifierState(key: ModifierKey): boolean;
    /**
     * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
     */
    key: string;
    /** @deprecated */
    keyCode: number;
    locale: string;
    location: number;
    metaKey: boolean;
    repeat: boolean;
    shiftKey: boolean;
    /** @deprecated */
    which: number;
}
```

The provided type definition in TypeScript is for the KeyboardEvent interface, which extends the UIEvent interface and adds additional properties and methods specific to keyboard events. 

`KeyboardEvent` uses generics and can thus be applied to all elements. The type of the target element is passed as a type argument. In our case, the target element is an `HTMLInputElement` because we use the `<input>` element.

The other properties and methods of the `KeyboardEvent` are specific to keyboard events.

All UI events are derived from one base class, the `BaseSyntheticEvent`:

```ts
interface BaseSyntheticEvent<E = object, C = any, T = any> {
    nativeEvent: E;
    currentTarget: C;
    target: T;
    bubbles: boolean;
    cancelable: boolean;
    defaultPrevented: boolean;
    eventPhase: number;
    isTrusted: boolean;
    preventDefault(): void;
    isDefaultPrevented(): boolean;
    stopPropagation(): void;
    isPropagationStopped(): boolean;
    persist(): void;
    timeStamp: number;
    type: string;
}
```
This `BaseSyntheticEvent` has the basic properties and methods that all UI events have in common, like
if the event is bubbling, if the event is cancelable, if the default action is prevented, and so on.

Thus, you can see when leveraging TypeScript in your React project, you can easily
see the type of the event object and the properties and methods it provides.

These types also help most IDEs that support TypeScript, like Visual Studio Code, to aid you in crafting your code.

## Conclusion

I hope that by reading this article, you could learn more about the event typings of React with TypeScript.
It is worth taking a look behind the scenes of React and TypeScript to understand how they work together.
When you import the TypeScript React typings, you can simply look in your `node_modules` folder and `@types/react/index.d.ts` and
`@types/react/global.d.ts` to see the type definitions.

## References

- React: https://react.dev

- TypeScript: https://www.typescriptlang.org

- React event handlers: https://react.dev/reference/react-dom/components/common#event-handler

- MDN events: https://developer.mozilla.org/en-US/docs/Web/Events

Photo by <a href="https://unsplash.com/de/@dominikmartin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Dominik Martin</a> on <a href="https://unsplash.com/de/fotos/yE3_G-b1Spc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>



large_cover.jpg

medium_cover.jpg

small_cover.jpg

thumbnail_cover.jpg

Discover how to enhance your React components with type safety using TypeScript typings for events. Delve into browser events and their role in notifying applications of user or browser-triggered changes. Explore the world of React events and learn how to handle them effectively with TypeScript.

Thoughts by Thomas Derflinger

A Warm Welcome!

Services I Offer

Why Work With Me?

🚀 Let’s Innovate in Software!