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

Software Innovation for the Greater Good.

Social distancing has shaped an increase in usage of remote working tools.
One such tool is Jitsi video conferencing. In this article, I
want to describe how easy it is to spin up a free video conferencing server.
The tools used are Jitsi, the open source and free video conferencing software,
Terraform and Ansible.
As a cloud provider, I leverage Digital Ocean because of its competitive pricing.

Note that while the software is free, depending on which server you provision,
different costs may apply.

## Jitsi

Jitsi (https://jitsi.org/) is an open source video conferencing solution
that is encrypted and leverages the latest Web standards. Thus, you only
need a browser to talk to other people.
It was founded in 2013 by Emil Ivov. The name Jitsi comes from the
Bulgarian word жици which means "wires". Since 2013 the developer
community around Jitsi has continued to increase.

## Server Creation

In order to quickly create a server on Digital Ocean, I use the tool Terraform (https://www.terraform.io/).
It can reproducibly create server instances on most cloud platforms just by writing
configuration files.

This is what an example instance of Jitsi would look like. It is recommended to
have at a minimum a server with 3 GB, better 4 GB of RAM.

```bash
variable "do_token" {

}

resource "digitalocean_ssh_key" "default" {
  name       = "Jitsi Ubuntu SSH Keys"
  public_key = "${file("/Users/yourid/.ssh/id_ed25519.pub")}"
}

provider "digitalocean" {
  token = "${var.do_token}"
}

resource "digitalocean_droplet" "web" {
  image    = "ubuntu-18-04-x64"
  name     = "jitsi-1"
  region   = "fra1"
  size     = "s-1vcpu-3gb"
  ssh_keys = ["${digitalocean_ssh_key.default.fingerprint}"]
}
```

You need to adapt the path to your public key file and the region
where the server resides in.

Then run the commands:

```bash
terraform init
terraform apply
```

You will be asked your Digital Ocean token that you can retrieve from the
console of Digital Ocean.

## DNS Configuration

Once your server is created, you can find the IP address in the _terraform.tfstate_
file under ip4_address.

You now apply this address to your DNS configuration. In Cloudflare, for example,
you create a DNS A record with the IP address as content and "DNS Only".

After you have applied the DNS changes, you need to wait until they are updated in the DNS
servers. This can take a while, and you can check with _dig_ or _nslookup_ if this is the case.

## Software Installation

For an automated installation of Jitsi on the Ubuntu Linux server, we use the free Ansible (https://www.ansible.com/)
tool. You can install it on Mac with a simple _brew install ansible_. For other
operating systems, check the installation guide on ansible.com.

In order for the Ansible script to work, you need to adapt three variables. One is found in
the `hosts` file. There, you need to change the `ansible_host` to your IP server address.
Then there are two variables in the `install_jitsi.yml` script. One is the domain name (`domain_name`)
which is the domain you have configured, for example with Cloudflare or your DNS system.
The other variable is the email address (`email_address`) you need for the Let's Encrypt software that
will generate a valid TLS certificate.

hosts

```txt
[default]
jitsi ansible_host=your ip4 address
```

install_jitsi.yml

```yml
---
- name: Install Jitsi Meet
  vars:
    domain_name: videochat.yourdomain.com
    email_address: youremail@email.com
  gather_facts: 'no'
  hosts: jitsi
  become: yes
  remote_user: root

  tasks:
    - name: Add repository Universe
      apt_repository:
        repo: deb http://archive.ubuntu.com/ubuntu bionic universe
        state: present

    - name: Set hostname file to correct domain name
      lineinfile:
        path: /etc/hostname
        regexp: '^jitsi-1'
        line: '127.0.0.1 localhost {{ domain_name }}'
        owner: root
        group: root
        mode: '0644'

    - name: Add three lines to system.conf
      lineinfile:
        path: /etc/systemd/system.conf
        line: '{{ item }}'
        owner: root
        group: root
        mode: '0644'
      loop:
        - 'DefaultLimitNOFILE=65000'
        - 'DefaultLimitNPROC=65000'
        - 'DefaultTasksMax=65000'

    - name: Reload systemctl
      command: systemctl daemon-reload

    - name: Add Jitsi package
      raw: echo 'deb https://download.jitsi.org stable/' >> /etc/apt/sources.list.d/jitsi-stable.list

    - name: Get GPG Key
      get_url:
        url: https://download.jitsi.org/jitsi-key.gpg.key
        dest: /root/jitsi.gpg

    - name: Add PGP Key
      command: apt-key add /root/jitsi.gpg

    - name: Install apt-transport-https
      apt:
        name: apt-transport-https

    - name: Run the equivalent of "apt-get update" as a separate step
      apt:
        update_cache: yes

    - name: Remove Nginx
      apt:
        name: nginx
        state: absent

    - name: Remove what remains
      command: 'apt -y autoremove'

    - name: Write interactive values for automated installation
      raw: "debconf-set-selections <<< 'jitsi-videobridge jitsi-videobridge/jvb-hostname string {{ domain_name }}'"

    - name: Write another interactive values for automated installation
      raw: debconf-set-selections <<< 'jitsi-meet jitsi-meet/cert-choice select Generate a new self-signed certificate (You will later get a chance to obtain a Let'\''s encrypt certificate)'

    - name: Install jitsi-meet
      apt:
        name: jitsi-meet
        state: present

    - name: Install certificate
      raw: "echo '{{ email_address }}' | /usr/share/jitsi-meet/scripts/install-letsencrypt-cert.sh"
```

In order to run the installation of Jitsi on your target host, you need to run
the following command:

```bash
ansible-playbook install_jitsi.yml -i hosts
```

## Testing

If everything went fine with the installation, you can check it and
enter the domain name you configured in the browser.

The video conferencing interface of Jitsi should now appear, and you
can start creating a room and go chatting.

## Conclusion

While there is now a Digital Ocean Marketplace image of
Jitsi (https://marketplace.digitalocean.com/apps/jitsi-server),
I think the solution in this article can be flexibly applied to
other environments as well, like an in-house server or servers
at other cloud providers.

## References

- GitHub source code: https://github.com/tderflinger/jitsi-deployment

- Jitsi: https://jitsi.org/

- Terraform: https://www.terraform.io/

- Ansible: https://www.ansible.com/

- Digital Ocean: https://www.digitalocean.com/

- Wikipedia Jitsi: https://en.wikipedia.org/wiki/Jitsi


large_jitsi.png

medium_jitsi.png

small_jitsi.png

thumbnail_jitsi.png

Social distancing has shaped an increase in usage of remote working tools. One such tool is Jitsi video conferencing. In this article, I want to describe how easy it is to spin up a free video conferencing server.

Free Video Conferencing on Your Server

With Gatsby, you can generate a static website that works great with cloud
storage solutions like Google Cloud Storage. How to configure
Gatsby and use Infrastructure as Code tools like Terraform I want to show
in this article.

## Google Cloud Storage

In Google Cloud Storage (GCS) you can store files of any type (binary and text) on Google's
servers. The storage is organized in buckets, which are referenced by globally unique identifiers.
Within each bucket, you can have multiple files and directories. There are
different types of buckets, depending on use case. For example, you can have single region
or multiple region replication, buckets for archival purposes and other needs.

You can manage the buckets via a web interface or using the REST API and a command line application (gsutil).

The following picture is taken from the web interface storage browser where you can manage your buckets.

![Google Cloud Storage browser](./storage-browser.png)

For the creation of the example bucket, we will use a popular tool called Terraform.

## Terraform

Manually configuring cloud services is fine for getting to know them. But when you work
with cloud services on a daily basis, you rather need to find a way to automate your work.
This is the mantra of Infrastructure as Code (IaC). That means you programmatically
create the infrastructure and thus can easily automate tasks. This saves time and
increases reliability. One tool to enable IaC is Terraform.

Behind the scenes, Terraform invokes the REST APIs of the respective services.
That means in most cases you need to set up the environmental variables for the
API keys and install the CLI tools. For GCS, you can follow this tutorial: https://cloud.google.com/sdk/

You also need to install the Terraform application (https://learn.hashicorp.com/terraform/getting-started/install), which is just one file.

Since we want to deploy a static Gatsby website, all files need to be
publicly visible. Thus, there is a public_rule resource defined
that makes the web files publicly readable.

This is the Terraform definition file:

google-bucket.tf

```bash
resource "google_storage_bucket_access_control" "public_rule" {
  bucket = google_storage_bucket.static-site.name
  role   = "READER"
  entity = "allUsers"
}

resource "google_storage_bucket" "static-site" {
  name          = "test-yoursite-com"
  project       = "yoursite"
  location      = "EU"
  force_destroy = true
  storage_class = "STANDARD"

  website {
    main_page_suffix = "index.html"
    not_found_page   = "404.html"
  }
}
```

Replace test-yoursite-com with the unique ID of your
own Gatsby site.

After you run _terraform init_ and _terraform apply_,
the bucket test-yoursite-com will be created on GCS.

You can confirm the successful creation by opening
the storage browser in the Google Cloud Console:

https://console.cloud.google.com/storage

## Gatsby

Gatsby is a static website generator. For these
kinds of websites, no real server is needed. Instead,
cloud storage solutions like Google Cloud Storage are
ideal. The amount of money you pay compared to running
a full server is minimal.

One thing to note when using Gatsby with Google Cloud Storage
is that by default, all websites are hosted by their bucket name
under the https://storage.googleapis.com/ domain.

For example, the test bucket would be hosted under:
https://storage.googleapis.com/test-yoursite-com

For this to work in Gatsby, you need to add one option in the _gatsby-config.js_:

gatsby-config.js

```js
module.exports = {
  pathPrefix: "/test-yoursite-com",
...
```

Then you need to generate your Gatsby site with

```
gatsby build --prefix-paths
```

That ensures that the file paths and links are created correctly.

After that, simply upload the contents of your Gatsby _public_ folder
to the bucket with the Google Cloud CLI command:

```bash
cd public
gsutil cp -r . gs://test-yoursite-com
gsutil iam -r ch allUsers:objectViewer gs://test-yoursite-com
```

The second gsutil command makes all files publicly viewable.

## Conclusion

With Gatsby, you can create static sites that work well with
cloud storage solutions like Google Cloud Storage.
Using Terraform automates the creation of buckets and
makes it reproducible.

## References

- Google Cloud Storage: https://cloud.google.com/storage/

- Terraform: https://www.terraform.io/

- Gatsby: https://www.gatsbyjs.org/


large_shelf.jpg

medium_shelf.jpg

small_shelf.jpg

thumbnail_shelf.jpg

With Gatsby, you can generate a static website that works great with cloud
storage solutions like Google Cloud Storage. How to configure
Gatsby and use Infrastructure as Code tools like Terraform I want to show in this article.

Gatsby with Google Cloud Storage and Terraform

<YouTube id="hkw892wzbBg" />

When you use Vue for your project, there is a great chance that Nuxt can improve your experience significantly.
By using Nuxt you get all the benefits of the Vue ecosystem plus some significant enhancements
that I want to highlight in this article.

## 1. Server Side Rendered

Nuxt supports server side rendered applications (SSR).
When using Nuxt in server side rendered mode, you need a dedicated server to run the application.
Instead of the delivery of a big JavaScript file like in traditional Vue applications, the application is pre-rendered on the server
and only HTML and a bit of client side JavaScript is delivered to the browser.
This speeds up website performance and potentially even helps with SEO (the way your site
gets ranked in Google search engine).

When you are a React developer, you probably heard of the SSR framework Next.js. Nuxt is the Vue equivalent of
Next.js.

## 2. Static Site Generation

Nuxt not only supports SSR, but also static site generation.
With static site generation, everything can be rendered on your
development computer. Then the pre-rendered files can be copied
to a cloud file storage like S3. This simplified setup is
sometimes called the Jamstack. You get performance, security
and also SEO benefits compared to traditional Vue applications.
It is especially popular for blogs.

## 3. Simplified Routing

Nuxt comes out of the box with a simplified routing based on
Vue Router. In Nuxt there is a _pages_ folder where all
your pages reside. The file names and structure of this folder
will be reflected in your URL design. For example, a Vue file
_application.vue_ in the pages folder will be mapped to
https://yourapp.com/application
This simplifies the route management.

## 4. Simplified Meta Tags

Nuxt uses the _vue-meta_ package to manage site metadata.
You can simply define the meta tags in the
Nuxt configuration file (_nuxt.config.js_). In that
way you do not need to manually define the meta tags.

## 5. Sensible Conventions

Nuxt structures your project in a way that makes
it easy to grow and sets sensible defaults.
For example, there is a _css_ folder for common CSS files,
a _store_ folder for the VueX data store if you need that
and a _pages_ directory for your web pages.

## 6. Good SEO Support

While meanwhile Google says it is able to crawl
traditional Vue SPA (Single Page Applications) that contain
lots of JavaScript, Nuxt gives you a better chance of
getting a good SEO ranking due to the pre-rendering
capabilities. This makes your pages faster, which is also
a Google criterion for ranking your page.

## 7. Vuex Store

The VueX store can be included on installation.
So there is no need to manually install and configure
the Vuex store which speeds up the setup process.

## 8. Modules

You can customize nearly any aspect of Nuxt with Modules.
This makes the customization easy.
There are a number of official modules and a website
with Nuxt modules made by the community (https://github.com/topics/nuxt-module).

## Conclusion

I recently converted a traditional Vue website to Nuxt. My
experience was so positive that I decided to write this article.
For me, the main reason was the static site generation.
But I hope you could see that there are more reasons for using
Nuxt in your next project.

## References

- Nuxt: https://nuxtjs.org/

- Nuxt modules: https://github.com/topics/nuxt-module


large_anton-maksimov-5642-su-vtbgoLMPeG4-unsplash.jpg

medium_anton-maksimov-5642-su-vtbgoLMPeG4-unsplash.jpg

small_anton-maksimov-5642-su-vtbgoLMPeG4-unsplash.jpg

thumbnail_anton-maksimov-5642-su-vtbgoLMPeG4-unsplash.jpg

When you use Vue for your project, there is a great chance that Nuxt can improve your experience significantly.
By using Nuxt you get all the benefits of the Vue ecosystem plus some significant enhancements that I want to highlight in this article

8 Reasons to Use Nuxt

Quickly building a shop for digital goods on an e-commerce website is important for many merchants.
Using Snipcart and the CMS Gatsby allow us to integrate a shop fast.
Not only is the work of building the shop much less than traditionally, but also
the site performance is outstanding, thanks to Gatsby. And speed counts, as
most e-commerce merchants know.

## Installing Snipcart for Gatsby

With the following plugin, you can integrate Snipcart with your Gatsby site.
You need to create an account on [Snipcart](https://www.snipcart.com) and get the test API key.

```bash
npm i gatsby-plugin-snipcartv3 --save
```

Then in the gatsby-config.js you need to add:

```js
    {
      resolve: "gatsby-plugin-snipcartv3",
      options: {
        apiKey: YOUR_API_KEY,
      },
    }
```

## Upload of Digital Good

The next step is the upload of the digital good (like an e-book) file
in the Snipcart dashboard.

This can be done in the section "Digital Goods", "Upload".

![Digital good dashboard](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692378687/digital_good_1e32ac9469.png)

The result is a unique hash ID, the GUID. This GUID we need in the next section.
Note that you should enter a value for the maximum downloads per order
for the shop to work.

## Define Button

You can define all the parameters for the shop in one HTML button element
with the parameters in the element's attributes. You click the button and the digital good is
added to the shopping basket.
That's how easy the shop integration is.

```html
        <img
          src={GetBookButton}
          alt="Get A28 City Travel Guide Munich Haidhausen"
          class="snipcart-add-item"
          data-item-id="df29383b-7acf-4d2e-9cfc-616b7929e8ad"
          data-item-file-guid="df29383b-7acf-4d2e-9cfc-616b7929e8ad"
          data-item-price="3.99"
          data-item-url="http://www-test.a28.city.s3-website.eu-central-1.amazonaws.com/store"
          data-item-description="Travel like a Bavarian to Munich."
          data-item-image={BookCover}
          data-item-name="A28 City Guide Munich Haidhausen"
          data-item-has-taxes-included="true"
        ></img>
```

In my case, the button is an _img_ element, but you can also use a real _button_.
The attribute _data-item-file-guid_ specifies the GUID. The same GUID is also
used in the _data-item-id_ attribute. Then you also need the class attribute
set to "snipcart-add-item" and the _data-item-url_ to the URL of your shop.

The URL is important for security, and you can test your application in test mode.
So then it should be the URL of your test site, which needs to be accessible
over the internet (not localhost).

## Fetch Products

Then you need to deploy your test site and your test server with all
parameters filled out.

In the Snipcart dashboard, you now need to fetch the products, under the
"Fetch Products" menu.

![Fetch products](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692378687/fetch_product_96e08b148f.png)

You enter the URL of your shop, as also defined in the _data-item-url_.

Furthermore, you also need to define the URL in the "Domains & Urls" menu.

![Define URL](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692378684/define_url_b0c68d7cd9.png)

Now it is time to check out the menus in the Snipcart dashboard.
You can set taxes, countries to sell to, email templates and more.

## Production

Basically, this is all there is for a complete shopping basket and
checkout process on your Gatsby website.
When the tests work well, you can switch over to "live" mode
and choose a payment gateway to process your payments.

My shopping cart that I built for my site looks like this:

![A28 City shopping cart](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692378688/shop_727dde15e4.png)

## Conclusion

Snipcart is a fast and easy solution for Gatsby websites that
want to sell digital goods.

## References

Snipcart: https://www.snipcart.com

Gatsby Snipcart Plugin: https://www.gatsbyjs.org/packages/gatsby-plugin-snipcartv3/?=snipcart


large_shop.png

medium_shop.png

small_shop.png

thumbnail_shop.png

Quickly building a shop for digital goods on an e-commerce website is important for many merchants.
Using Snipcart and the CMS Gatsby allow us to integrate a shop fast.

Snipcart and Gatsby for Easy Digital Goods Shop

<YouTube id="IP4Ikw3KtAU" />

The Arduino IDE contains a simplified language for developing for the Arduino platform. This language is called
Wiring and is a simplified dialect version of C and C++. Common input and output operations are simplified, making the environment ideal for prototyping for designers and makers.

But sometimes you want to program in "real" C and use the AVR tool chain directly. For example, you might
want to look behind the scenes or need to program a library. Then it becomes necessary to use
the AVR tool chain.

How to program a simple blinking LED in pure C, I want to show in this article.

## Installation

In order to be able to compile and run the C program to AVR machine code, you need to install
a cross-compiler, a linker and an uploader for the AVR microcontroller.

Under Ubuntu Linux, this done by running the following command:

```bash
sudo apt-get install gcc-avr binutils-avr gdb-avr avr-libc avrdude make
```

This installs all the required tool chain for AVR C development on your machine.

## Arduino Hardware Setup

The C program assumes you have an Arduino Uno with one LED connected to port 13.

This Fritzing image shows the setup:
![Blinking LED](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692378835/Blink_Led_7cdbbb379f.png)

## Led.c

```C
#include <avr/io.h>

#define F_CPU 16000000
#define BLINK_DELAY_MS 5000

#include <util/delay.h>

int main (void)
{
  // Arduino digital pin 13 (pin 5 of PORTB) for output
  DDRB |= 0B100000; // PORTB5

  while(1) {
    // turn LED on
    PORTB |= 0B100000; // PORTB5
    _delay_ms(BLINK_DELAY_MS);

    // turn LED off
    PORTB &= ~ 0B100000; // PORTB5
    _delay_ms(BLINK_DELAY_MS);
  }
}
```

In this C example, the LED is turned on for 5000 ms (5 sec) and is then turned off again.
You need to import two header files, one for the IO ports definition and the other for
the delay function.

It is important that under pure C you need to calculate the exact
pin where you want to write to. In our case, the LED pin 13 is on Port B5 (or in binary: 0B100000).
You can find out about the raw port and pins in the [Arduino schematics](https://www.arduino.cc/en/uploads/Main/arduino-uno-schematic.pdf)
that can be accessed from the Arduino website.

## Compiling and Uploading

With the attached Makefile, it becomes easy to compile the C file.

Just run:

```bash
make
```

Behind the scenes, the Makefile calls the AVR C compiler (avr-gcc) and converts
the file to the correct hex format that the uploader can use.
Before you can upload, you need to find out where on your machine the Arduino Uno
is connected to. The path is then written in the Makefile as variable ARDUINO_USB.

Once that is done, upload the file to your Arduino Uno with:

```bash
make deploy
```

The uploader we use in the Makefile is called Avrdude.

## Conclusion

The Arduino family is a great hardware prototyping playing field.
But you can dive deeper and program the Arduino Uno without the
Arduino IDE directly by using AVR C. I hope I could take away the first hurdles in this adventure.

## References

- Led in pure C project source: https://github.com/tderflinger/arduino-blink-purec
- Arduino Uno schematics: https://www.arduino.cc/en/uploads/Main/arduino-uno-schematic.pdf
- AVR Toolchain: http://nongnu.org/avr-libc/
- Thanks to Sagar: https://github.com/sagarsp/arduino-blink-c

For best quality, watch it via this link here: [https://www.youtube.com/watch?v=IP4Ikw3KtAU](https://www.youtube.com/watch?v=IP4Ikw3KtAU)

Cover image by <a href="https://unsplash.com/de/@brianwangenheim?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Brian Wangenheim</a> on <a href="https://unsplash.com/de/fotos/OKWgnUqwBl0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  



large_brian-wangenheim-OKWgnUqwBl0-unsplash.jpg

medium_brian-wangenheim-OKWgnUqwBl0-unsplash.jpg

small_brian-wangenheim-OKWgnUqwBl0-unsplash.jpg

thumbnail_brian-wangenheim-OKWgnUqwBl0-unsplash.jpg

The Arduino IDE contains a simplified language for developing for the Arduino platform. Common input and output operations are simplified, making the environment ideal for prototyping for designers and makers. But sometimes you want to program in "real" C and use the AVR tool chain directly.

Arduino Blinking LED in Pure C

As the world grows more and more globalized, companies are looking for a uniform identity across their markets.
Thus, the demand for fonts that shine and offer the same harmony across languages and scripts (writing systems) is increasing.
This article highlights a selection of web fonts that offer multilingual features.

## Web Safe Fonts

In a website, you can use the user system's font.
If you rely on the user's pre-installed fonts, you need to use web safe fonts.
These are fonts that are available on multiple platforms (e.g. Windows, macOS, Android).
One sans-serif font would be Arial (by Monotype). It is available on Windows and macOS and supports Latin, Greek, Cyrillic
and Armenian scripts. For Android, you would need to use Roboto because Arial is not available by default.

So you would specify it like that in your CSS:

```css
font-family: Arial, Roboto, sans-serif;
```

When Arial is not available, use Roboto and if that is not available, the browser uses a different sans-serif font.

You see that this might not be the solution you are looking for, since there are different fonts on desktop and
mobile. Also, Arial does not cover all the major scripts. So if you also have text in the Devanagari script
for example, you would need to add a separate font that could look completely different in style.

Thus, Google decided to create a special font family that is uniform across all scripts. This family is called Noto.

## Noto

The name [Noto](https://www.google.com/get/noto/) comes from "no more Tofu" because when the user browses the web and does not have the correct font
on the system, she might see some square boxes as a replacement for the missing font. These boxes are also called "Tofu".

The Noto font family covers all scripts defined in the [Unicode 6.1 standard](https://en.wikipedia.org/wiki/Unicode). These are all major living scripts (like Latin,
Devanagari, Chinese, Japanese, Thai, Georgian and others) and many ancient historical scripts like Pali, Egyptian Hieroglyphs
or the Aramaic script.

The Android operating system comes with the Noto font families pre-installed. For your web project, you can download the files
and self-host on your server or use [Google Fonts](https://fonts.google.com).

## Monotype SST

An alternative to look at is a font from one of the major commercial font companies, Monotype.
They developed the [Monotype SST typeface](https://www.monotype.com/fonts/sst). It supports 93 languages. Although not as comprehensive
as Noto, it can distinguish your brand and offer high quality. Among the scripts included are
Cyrillic, Arabic, Thai, Japanese Kanji and Greek.

## Conclusion

For multilingual websites in many scripts, Noto could be the font family to use.
It offers a plethora of scripts and a harmonious look. Also, it is open source and free to use, even commercially.

If you only need a subset of the scripts and want to differentiate your design, Monotype SST
might be a candidate.

## References

- Google Noto Fonts: https://www.google.com/get/noto/
- Monotype SST(R): https://www.monotype.com/fonts/sst
- Unicode: https://en.wikipedia.org/wiki/Unicode
- Google Fonts: https://fonts.google.com/
- Noto Font Video: https://www.youtube.com/watch?v=16_NYHUZ1kM


large_devanagari-nepal.jpg

medium_devanagari-nepal.jpg

small_devanagari-nepal.jpg

thumbnail_devanagari-nepal.jpg

As the world grows more and more globalized, companies are looking for a uniform identity across their markets.
Thus, the demand for fonts that shine and offer the same harmony across languages and scripts (writing systems) is increasing.

Best Multilingual Web Fonts

Markdown is a popular format for online content due to its easy syntax. Now you
can create interactive content with React components in Markdown with MDX.

In this article, I show how to use [MDX](https://mdxjs.com) with a React application to render an
interactive chart with Recharts in a markdown file.

## React Static

[React Static](https://react-static.js.org) is a progressive static site generator for React. It is used
for our example application. Other React static site generators like
Gatsby or Next.js can also be used.

The MDX loader needs to be added to React Static, which is described in the [MDX documentation](https://mdxjs.com/getting-started/react-static).

## Recharts

[Recharts](http://recharts.org/) is a React charting library based on the fantastic [D3.js library](https://d3js.org/). With it, you can easily create
line charts, bar charts and many other types of charts. All this is easily packaged for React developers.

To use Recharts for your own application, just install it with

```bash
yarn add recharts
```

## Example Chart

The example chart component is shown here, a normal React component:

ExampleChart.js

```jsx
import React from 'react'
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts'
const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
]
export default () => (
  <div>
    <LineChart width={400} height={400} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line
        type="monotone"
        dataKey="pv"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  </div>
)
```

This component displays a nice line chart.

Then this ExampleCharts component can be inserted into the MDX file:

chart.mdx

```
# The Chart in MDX

This is some sample data from our chart:

import ExampleChart from "../components/ExampleChart.js"

<ExampleChart></ExampleChart>

```

Note, that you can write whole lines of JavaScript and JSX directly in
the MDX file. In our example, I imported the component and displayed it.

For the React Static application, you also need to display it in
a route as a component which you can import, like so:

```jsx
import React from 'react'
import Chart from './chart.mdx'

export default () => (
  <div>
    <Chart />
  </div>
)
```

The result is a beautiful line chart, as you can see in this screenshot:

![MDX screenshot](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692378942/mdx_application_22f6f67675.png)

## Conclusion

Using MDX with React Static was easy and straightforward. The example
React component Recharts was easily incorporated. Thus, I hope
to encourage you to try out MDX yourself.

## References

- React-mdx-rechart example application: https://github.com/tderflinger/react-mdx-recharts
- MDX: https://mdxjs.com
- React Static: https://react-static.js.org
- Recharts: http://recharts.org/


small_mdx-application.png

thumbnail_mdx-application.png

Markdown is a popular format for online content due to its easy syntax. Now you can create interactive content using React components in Markdown with MDX. In this article, I show how to use MDX with a React application to render an interactive chart with Recharts in a markdown file.

Creating Interactive Markdown with MDX

[Serverless](https://serverless.com/) is a framework for building and deploying serverless code. Provisioning and
scaling is automatically handled by the cloud provider. The Serverless framework is an abstraction on
top of the most important cloud providers. This tutorial will show how to write a function that
sends an email with customer contact information to you. This is a popular use case for contact forms on websites.

For the purpose of this tutorial, the [Twilio Sendgrid API](https://github.com/sendgrid/sendgrid-nodejs/tree/master/packages/mail) will be used to send an email.
This tutorial requires some basic knowledge of JavaScript and API calls.

## Serverless Computing

[Serverless computing](https://en.wikipedia.org/wiki/Serverless_computing), also known as function as a service (FaaS) was first pioneered by
Amazon AWS with AWS Lambda in 2014. Despite its name serverless, there are servers involved.
But the developer does not need to care for this server. She can write the server
code and then run a command to automatically deploy the function. Scaling is handled
by the cloud provider. Often, the pricing is based on function call
number and memory or CPU time.

This means fixed server costs that traditionally were
calculated based on how long the server runs are now transformed in variable costs
based on the number of calls and memory or CPU.

The new use cases for serverless computing are for example resizing an image after
upload or sending an email to the service department when the customer enters his contact
information and message on a website contact form.

This tutorial describes the latter use case. Other use cases include event streaming, and more
are listed on the [Serverless website](https://serverless.com/learn/use-cases/).

## Serverless Framework

The [Serverless framework](https://serverless.com/) is a free and open source framework written in Node.js.
It supports all major cloud providers like [AWS](https://aws.amazon.com/), [Google Cloud](https://cloud.google.com/), [Azure](https://azure.microsoft.com/en-us/), [Cloudflare Workers](https://www.cloudflare.com/de-de/products/cloudflare-workers/)
and [Alibaba Cloud](https://us.alibabacloud.com/). There is also an enterprise version that the company behind
the Serverless framework, Serverless Inc. supports.
Serverless Inc. is a startup based in San Francisco, USA and has the backing
of [Trinity Ventures](https://www.trinityventures.com), among others.

The installation of Serverless is pretty straightforward. Just follow
the instructions of the [Serverless docs page](https://serverless.com/framework/docs/getting-started/).

Next, clone the [serverless-message example application](https://github.com/tderflinger/serverless-message) from the GitHub repository.
Run _npm install_ and this resolves the package dependencies.

## Configuration

All major configuration is done in the file _serverless.yml_.
There, you can find information on which cloud provider to use,
which runtime and which region.
Under _functions_ the name of the function is specified,
its http method (POST) and that CORS should be enabled. Also,
this is a private function, meaning the caller needs to include
the API key in the header of the POST call. The value of
the API key is in the _apiKeys value_ section.

serverless.yml

```yml
service: serverless-message

provider:
  name: aws
  runtime: nodejs8.10
  region: eu-central-1
  apiKeys:
    - name: firstKey
      value: JNJSNKMKDMKSMKMDKMDK
  environment:
    SENDGRID_API_KEY: Your API Key
    MESSAGE_TO: Your email address
    MESSAGE_FROM: The sender email address (your website domain)
  usagePlan:
    quota:
      limit: 5000
      offset: 2
      period: MONTH
    throttle:
      burstLimit: 20
      rateLimit: 10

functions:
  sendMessage:
    handler: handler.sendMessage
    events:
      - http:
          path: send-message
          method: post
          cors: true
          private: true

plugins:
  - serverless-offline
```

There are also three variables defined that need to be set by you.
The `SENDGRID_API_KEY` is your Sendgrid API key. It can be created after signing
up to [Twilio Sendgrid](https://www.twilio.com/sendgrid).

The other two environment variables are the email address where the
contact message of the client should be sent to. This is normally
your business email address. There you will receive the message when
a client submits on your website. The `MESSAGE_FROM` variable
is the email address of your website.

The other section is the _usagePlan_ that is a security feature where
you can set the maximum number of monthly invocations.

## Serverless Function

This is the meat of the application. The handler function is just a
normal JavaScript function. You can import code from Node packages.
In this case, the _@sendgrid/mail_ is needed for sending out the email.

Otherwise, the function is simple. It sends an email
with the data (name, email, message) that was included as a body of the POST call.

The frontend will later need to post the data from the information that the customer entered
in a form. Currently, the frontend is not part of this application.

handler.js

```javascript
'use strict'

const sgMail = require('@sendgrid/mail')

function sendEmail(data) {
  sgMail.setApiKey(process.env.SENDGRID_API_KEY)
  const msg = {
    to: process.env.MESSAGE_TO,
    from: process.env.MESSAGE_FROM,
    subject: 'New Message from Website',
    text: `Message from ${data.name} - ${data.email}: ${data.message}`,
    html: `<strong>Message from ${data.name} - ${data.email}: ${data.message}</strong>`,
  }
  sgMail.send(msg)
}

module.exports.sendMessage = (event, context, callback) => {
  const data = JSON.parse(event.body)
  sendEmail(data)

  const response = {
    statusCode: 201,
    headers: {
      'Access-Control-Allow-Origin': '*', // Required for CORS support to work
    },
    body: JSON.stringify({
      message: 'Message sent successfully.',
      input: event,
    }),
  }

  callback(null, response)
}
```

The function return a 201 success code with a success message.

## Testing Offline

The good thing about Serverless is that it has a good plugin ecosystem.
There is also a very useful plugin for testing the AWS serverless function locally on
your PC. This plugin is called [serverless-offline](https://github.com/dherault/serverless-offline).

You can run the function locally with:

```bash
sls offline
```

This starts a local server and also prints the API key. You can for example use [Postman](https://www.getpostman.com/) to
run a POST command against the server. You need to include the API key in the
header (x-api-key).

Here is an example POST message body:

```json
{
  "email": "superman@superduppa8.com",
  "name": "Superman",
  "message": "Greetings to Nietzsche!"
}
```

When you do that, an email with this information will be sent to your configured email address.

## Deploying

Deploying is easy but can take a bit of time since all resources need to be
uploaded and provisioned.

Just run the command:

```bash
sls deploy
```

Please note that you need a functional AWS CLI installed locally, and
the AWS user needs to have the correct rights to install AWS lambda functions.
Refer to the [AWS documentation](https://docs.aws.amazon.com/cli/index.html) and the tutorials on Serverless listed below.

## Conclusion

Serverless greatly simplifies the development of serverless functions.
Also, it enables you to relatively easily switch cloud providers, avoiding
vendor lock-in.
As an open source framework it has a big ecosystem, is popular and
has the backing of a commercial company.

## Sources and Further Reading

- Serverless: https://serverless.com

- Serverless Offline: https://github.com/dherault/serverless-offline

- Twilio Sendgrid: https://www.twilio.com/sendgrid

- Tutorials as introduction to Serverless: https://hackernoon.com/best-tutorials-to-get-started-with-serverless-97c86623cdc0

- serverless-message example application: https://github.com/tderflinger/serverless-message


large_serverless.jpg

medium_serverless.jpg

small_serverless.jpg

thumbnail_serverless.jpg

Serverless is a framework for building and deploying serverless code. Provisioning and scaling is automatically handled by the cloud provider. This tutorial will show how to write a function that sends an email with contact information. This is a popular use case for contact forms on websites.

Serverless for Contact Messaging

The great advantage of open source projects is that you can look behind the scenes.
It is an opportunity to learn and be stunned.
Bootstrap is a hugely popular frontend framework. Looking behind the
scenes of Bootstrap unveils its heavy reliance on Sass, a CSS language.
This article shows some of the internals of Bootstrap with a focus on the button component
and the build environment.

## Bootstrap

Bootstrap is an open source CSS framework that is responsive and works with mobile devices.
It is used for user interface design. Originally programmed by Mark Otto and
Jacob Thornton at Twitter and released in 2011, it has since then gained a great worldwide popularity.

## Folder Structure

When you download the Bootstrap source code, the folder looks like this:

![Bootstrap folders](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692379055/bootstrap_folders_42b589f7ff.png)

You can see there is a /js folder that contains the JavaScript files. Not all Bootstrap
components use JavaScript, but those that do have their source files located here. In
/js/src/tools there is a JavaScript file called sanitizer.js that is for sanitizing HTML,
for security reasons.

It is important to note that in the current version 4.3.1, Bootstrap relies on the [JQuery](https://jquery.com/)
library for its JavaScript. A planned feature is the exchange of JQuery with plain
JavaScript in version 5 of Bootstrap.

Then there is the /js/tests/unit folder that contains unit tests written in the [QUnit](https://qunitjs.com) test
framework. QUnit is also used by JQuery.

Bootstrap also has a folder for integration tests which seems to be more of a stub and a folder
for manual visual tests.

The other folders found in the Bootstrap source code are /scss with all the visual descriptions
in the Sass language. Then there is the /site folder that contains the official Bootstrap website
generated with [Jekyll](https://jekyllrb.com/).

## Sass

The most important files of Bootstrap, the "soul" of Bootstrap, are located in the /scss folder.
As the [Sass](https://sass-lang.com/) webpage states, Sass is "CSS with superpowers". It is a programming language
that transpiles the Sass language into plain CSS that can be understood by all modern browsers.
All valid CSS is also valid Sass. It brings some new features to CSS, like variables, mixins,
for loops, interpolation and more.

If you want to understand Bootstrap, you need to know Sass. The /sass folder has three subfolders.
The /sass/mixins folder contains the mixins which are styles that can be reused throughout the stylesheet.
It is a kind of multiple inheritance for CSS styles.

The other folder under sass is the /sass/utilities folder. It contains utility selectors like
borders, float and spacing. Then there is another folder called /sass/vendor which contains
the source code of [RFS](https://github.com/twbs/rfs). RFS (Responsive Font Sizes) is a unit resizing engine developed for font resizing.

Taking a look at the \_buttons.scss source code, you will realize that a lot of functionality
is used from other files. One useful file that is referenced a lot is \_variables.scss.
There, variables like colors and sizes are defined. This file is also used by \_buttons.scss.

Furthermore, \_buttons.scss uses the \_buttons.scss from the /sass/mixins directory. It contains
for example, the mixins button-variant and button-size.

Sometimes it is not easy to figure out where in the source tree the references mixins and variables
are located. Then the search functionality of your IDE comes handy.

## Build Tools

Build tools are tools installed usually via NPM to run the transpilation, bundling, testing, and
linting of Bootstrap. You can see the list of used tools in the file _package.json_. There under
the property devDependencies is a list of tools used. You will find the [Karma](https://karma-runner.github.io/latest/index.html) test runner
for running unit tests.

Then, there is the module bundler [Rollup](https://rollupjs.org/guide/en/). [Stylelint](https://stylelint.io/) is used for checking the
styles for correctness. Of course, the [Babel](https://babeljs.io/) JavaScript transpiler is used as well as [Sinon](https://sinonjs.org/) for testing.
The utility [bundlesize](https://www.npmjs.com/package/bundlesize) is used to keep an eye on the size of the Bootstrap files.

Bootstrap has an elaborate system of scripts. You can run every component individually,
for example, if you would like to only generate, lint and minify the CSS files, you can
run by _npm run css_

Here is a list of some scripts from the _package.json_ you can start:

![Scripts screenshot](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692379056/scripts_screenshot_06d804e97d.png)

## Conclusion

The Bootstrap source code looks clean and well-organized. It is sometimes not
clear where the referenced mixins and variables are located in the Sass source. But
that is more due to Sass's missing package system.
I think looking behind the scenes of Bootstrap is a good opportunity to learn
and be stunned.

## Sources and Further Reading

- Bootstrap: https://getbootstrap.com/

- Sass: https://sass-lang.com/


small_bootstrap-buttons.png

thumbnail_bootstrap-buttons.png

Bootstrap is a hugely popular frontend framework. Looking behind the scenes of Bootstrap unveils its heavy reliance on Sass, a CSS language. This article shows some internals of Bootstrap, with a focus on the button component and the build environment.

Bootstrap Internals

In the first part of the DevOps series, I showed how to automatically create an AWS EC2 Spot instance with Terraform.
You can read it again here: https://www.tderflinger.com/en/ec2-spot-with-terraform

DevOps skills are becoming more important for Node.js developers. With Ansible, you can configure your cloud servers automatically.
Now, I explain to you how to automatically configure the created CentOS server with Node.js and Nginx. For
that I use the open source tool [Ansible](https://www.ansible.com/). Ansible is a software configuration and deployment tool. It has been originally written by Michael DeHaan in 2012. The company behind Ansible was acquired in 2015 by Red Hat, now an IBM division.

Ansible allows you to automate the installation of software. Thus, it is an important piece in the [Infrastructure as Code (IaC)](https://en.wikipedia.org/wiki/Infrastructure_as_code).
With Ansible, you can ensure that the right packages are installed, the right configuration files in the correct place and
the right services are running. You can also deploy your written software to the server with Ansible.
Furthermore, Ansible allows for provisioning a new server, but I used Terraform for this task, as you can read in the previous article.

Ansible is a good tool for [IaaS (Infrastructure as a Service)](https://en.wikipedia.org/wiki/Infrastructure_as_a_service) type of cloud computing environments. This includes AWS EC2 servers or Digital Ocean droplets. On this type of compute servers
you need to configure the needed software yourself. This is in contrast to [PaaS](https://en.wikipedia.org/wiki/Platform_as_a_service) offerings, where everything is managed,
you only upload the source code of your application. Heroku is an example of a PaaS offering.

When using Ansible, you will do most of your work in configuration files called playbooks. These are [yml files](https://en.wikipedia.org/wiki/YAML) that
are DSL (Domain Specific Languages) and describe the functions to configure.

The great thing about Ansible is that you do not need to install anything on the target server. Everything works using
port 22, via SSH. Only Python 2 or 3 needs to be available on the target machine. This distinguishes Ansible from tools like Chef or Puppet, where you need to install an agent.

## Mock Server

For this example, I want to automatically install a Node.js mock server for testing purposes. For that, I use the [NPM module
json-server](https://www.npmjs.com/package/json-server) and add a bit of mockup code. Basically, the mock server is a REST server with mock data.

json-server-http.js

```javascript
var fs = require('fs'),
  jsonServer = require('json-server'),
  server = jsonServer.create(),
  router = jsonServer.router('db.json'),
  middlewares = jsonServer.defaults()
const cors = require('cors')
const bodyParser = require('body-parser')

server.use(cors())
server.use(bodyParser.json())

server.use(middlewares)
server.use(router)

server.listen(3002, function() {
  console.log('json-server started on port ' + 3002)
})
```

It loads some data from a JSON file and returns the data via the REST endpoint.

One requirement for this mock server is that it is available via HTTPS. Thus, I use the Nginx
server as a proxy with a TLS connection. The necessary certificate and key files can
be generated offline with this Ansible Playbook.

## Generate TLS Certificate

First, you need to [install Ansible](https://docs.ansible.com/ansible/latest/installation_guide/intro_installation.html) on your computer.

The following Ansible playbook generates on your local computer the self-signed certificate and private key files. These files are
later uploaded to the Nginx directories.

generate_certificate.yml

```yml
--
- name: Generate Nginx TLS certificates and keys
  hosts: localhost

  tasks:
    - name: Generate OpenSSL private key
      openssl_privatekey: path=files/nginx.key

    - name: Generate OpenSSL Certificate Signing Request
      openssl_csr: path=files/csr.csr  privatekey_path=files/nginx.key common_name=www.someorg.org

    - name: Generate Self-signed certificate
      openssl_certificate: path=files/nginx.crt privatekey_path=files/nginx.key csr_path=files/csr.csr provider=selfsigned
```

You can run this playbook with the following command:

```bash
ansible-playbook generate_certificate.yml
```

## Install Node.js and Nginx

The actual work of configuration happens with the installation of the required software. First, Node.js is
needed in version 10.16. A good way to install Node.js on a Linux server is using the [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm).
On GitHub, there is a [ready-made Ansible playbook](https://github.com/morgangraphics/ansible-role-nvm) for installing NVM. We leverage that here and just invoke it in our script.

Then Nginx needs to be installed. The playbook looks something like this:

install_nodenginx.yml

```yml
---
- name: Install curl and wget
  gather_facts: 'no'
  hosts: mock
  become: yes
  remote_user: root

  tasks:
    - name: Install curl
      yum:
        name: curl
        state: present

    - name: Install wget
      yum:
        name: wget
        state: present

- name: Create nvm
  gather_facts: 'no'
  hosts: mock
  become: yes
  remote_user: root

  roles:
    - role: ansible-role-nvm
      nodejs_version: '10.16.0'

## Credits to John Lieske - https://www.ansible.com/blog/getting-started-writing-your-first-playbook
- name: Install Nginx
  hosts: mock
  become: yes
  remote_user: root

  tasks:
    - name: Add epel-release repo
      yum:
        name: epel-release
        state: present

    - name: Install Nginx
      yum:
        name: nginx
        state: present

    - name: Start NGiNX
      service:
        name: nginx
        state: started
```

Before running this playbook, you also need to specify your hosts file.

It can look like this, but you need to update the IP address with the
server IP on which you like to install.

hosts

```ini
[default]
mock ansible_host=100.24.146.164
```

Then run the playbook script with:

```bash
ansible-playbook install_node_nginx.yml -i hosts
```

Ansible playbooks are idempotent. That means no matter how often you run, the
result is always the same. You specify the outcome, like a file should be absent.
Ansible then figures out how to achieve that.

## Install the Mock Application

The next steps are copying the mock JavaScript files and the
Nginx certification files over. For running the NodeJS mock application, we use
the process manager [PM2](http://pm2.keymetrics.io/).

run_mock.yml

```yml
---
- name: Start mock and some other stuff
  hosts: mock
  become: true
  remote_user: root

  vars:
    key_file: /etc/nginx/ssl/nginx.key
    cert_file: /etc/nginx/ssl/nginx.crt
    conf_file: /etc/nginx/nginx.conf

  tasks:
    - name: Copy files
      copy: src=../../db.json dest=/home/centos

    - name: Copy package.json
      copy: src=../../package.json dest=/home/centos

    - name: Copy json-server-https
      copy: src=../../json-server-http.js dest=/home/centos

    - name: NPM installation
      shell: npm i
      args:
        chdir: /home/centos

    - name: Install PM2
      npm:
        name: pm2
        global: yes

    - name: Create directories for certificates
      file: path=/etc/nginx/ssl state=directory

    - name: Copy TLS key
      copy: src=files/nginx.key dest={{ key_file }} owner=root mode=0600

    - name: Copy TLS certificate
      copy: src=files/nginx.crt dest={{ cert_file }} owner=root mode=0600

    - name: Copy Nginx config file
      template: src=templates/nginx.conf.j2 dest={{ conf_file }}

    - name: Remove nginx.default
      file:
        path: /etc/nginx/nginx.conf.default
        state: absent

    - name: Restart Nginx
      service:
        name: nginx
        state: restarted

    - name: Start Mock
      shell: pm2 start json-server-http.js
      args:
        chdir: /home/centos
```

In this playbook, you can see the definition of variables. They are applied
with the interpolation of two curly braces `{{ var }}`. Also, a
template is used for the generation of the Nginx configuration file.
Templates in Ansible are [Jinja2](http://jinja.pocoo.org/) compatible, a Python
templating engine.

When everything is started, and you can go in your browser to your server IP using
https. The browser will display a dangerous looking warning because the certificate
is self-signed. You need to accept the certificate, and then you will see the Mock
application.

One thing to note is that these Ansible scripts only work on CentOS Linux machines.
Ansible does not abstract between Linux distros. Thus, if you would
like to configure and deploy on Ubuntu, you would need to adapt the scripts.

## Conclusion

If you have some experience with Linux system administration, understanding an
Ansible playbook should not be too difficult.
With Infrastructure as Code, it has become mandatory to automate these system administration tasks.
Also, when you need to configure many servers, tools like Ansible are an obvious necessity.
Thus, Ansible skills are valuable for Node.js developers in the context of DevOps.

## Sources and Further Reading

- Infrastructure as Code: Managing Servers in the Cloud, 2016, Kief Morris, O'Reilly Media

- Ansible: Up and Running, 2nd edition, 2017, Rene Moser and Lorin Hochstein, O'Reilly Media

* Source code of this article: https://github.com/tderflinger/ansible-node-mock


large_cow.jpg

medium_cow.jpg

small_cow.jpg

thumbnail_cow.jpg

DevOps skills are becoming more important for Node.js developers.
With Ansible, you can configure your cloud servers automatically. 
Node.js is a popular JavaScript server platform. How to install a
CentOS Linux server with Node.js and Nginx using Ansible I want to show in this article.

Using Ansible to Install Node.js

[Terraform](https://www.terraform.io/) is an [Infrastructure as Code (IaC)](https://en.wikipedia.org/wiki/Infrastructure_as_code) tool by HashiCorp. Using it, you can reproducibly create
server instances on cloud providers like AWS or Digital Ocean. In this article
I show you how to create an [AWS EC2 Spot](https://aws.amazon.com/ec2/spot/) instance server with Terraform.

AWS EC2 Spot instances are EC2 instances available at discount prices. EC2 (Elastic Compute Cloud) is Amazon's term for
servers in their data center that you can do basically anything you want with. You can use it to run software.
For my purpose, I am using an instance to create a [CentOS](https://www.centos.org/) Linux server for testing purposes. After the testing
is done, the EC2 Spot instance is destroyed.

First, you need to sign up to AWS and [install the AWS command line tool (CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html).

Terraform is accessing the AWS CLI and using the credentials you have configured there. After [installing Terraform](https://learn.hashicorp.com/terraform/getting-started/install.html),
we define a Terraform file that contains the configuration. The file has an .tf file name ending.

The creation of an EC2 instance is a little bit more complicated, because you need to define
networking and security rules.

You can find the source code on my GitHub page under: https://github.com/tderflinger/terraform-ec2-spot

## VPC

First, you define your VPC (Virtual Private Cloud) network that is a logically isolated subnetwork
of the AWS cloud.

```
resource "aws_vpc" "test-env" {
  cidr_block           = "10.0.0.0/16"
  enable_dns_hostnames = true
  enable_dns_support   = true
}

resource "aws_subnet" "subnet-uno" {
  # creates a subnet
  cidr_block        = "${cidrsubnet(aws_vpc.test-env.cidr_block, 3, 1)}"
  vpc_id            = "${aws_vpc.test-env.id}"
  availability_zone = "us-east-1a"
}
```

This definition uses the concept of CIDR addresses. The concept of the network
addresses is nicely explained in the [Digital Ocean article](https://www.digitalocean.com/community/tutorials/understanding-ip-addresses-subnets-and-cidr-notation-for-networking).

The availability zone is us-east-1a, but you can choose the one you prefer. You can
look up your availability zone in this [AWS article](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-regions-availability-zones.html).

## Security Groups

After that, you need to define your security groups. They are like a firewall. In this
case I allow port 22 (SSH), port 80 (HTTP) and 443 (HTTPS) in. The ingress part
is the data inflow. Egress is the outflow and everything can flow out.

```
resource "aws_security_group" "ingress-ssh-test" {
  name   = "allow-ssh-sg"
  vpc_id = "${aws_vpc.test-env.id}"

  ingress {
    cidr_blocks = [
      "0.0.0.0/0"
    ]

    from_port = 22
    to_port   = 22
    protocol  = "tcp"
  }

  egress {
    from_port   = 0
    to_port     = 0
    protocol    = "-1"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

resource "aws_security_group" "ingress-http-test" {
  name   = "allow-http-sg"
  vpc_id = "${aws_vpc.test-env.id}"

  ingress {
    cidr_blocks = [
      "0.0.0.0/0"
    ]

    from_port = 80
    to_port   = 80
    protocol  = "tcp"
  }

  egress {
    from_port   = 0
    to_port     = 0
    protocol    = "-1"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

resource "aws_security_group" "ingress-https-test" {
  name   = "allow-https-sg"
  vpc_id = "${aws_vpc.test-env.id}"

  ingress {
    cidr_blocks = [
      "0.0.0.0/0"
    ]

    from_port = 443
    to_port   = 443
    protocol  = "tcp"
  }

  egress {
    from_port   = 0
    to_port     = 0
    protocol    = "-1"
    cidr_blocks = ["0.0.0.0/0"]
  }
}
```

## Internet Gateway

Then you need to define your Elastic IP address, that is the IPv4 IP address where you can reach your server.
You also need to declare a couple of resources, like an [Internet Gateway](https://docs.aws.amazon.com/de_de/vpc/latest/userguide/VPC_Internet_Gateway.html) that serves as a network
address translation (NAT) and routing tables.

```
resource "aws_eip" "ip-test-env" {
  instance = "${aws_spot_instance_request.test_worker.spot_instance_id}"
  vpc      = true
}

resource "aws_internet_gateway" "test-env-gw" {
  vpc_id = "${aws_vpc.test-env.id}"
}

resource "aws_route_table" "route-table-test-env" {
  vpc_id = "${aws_vpc.test-env.id}"

  route {
    cidr_block = "0.0.0.0/0"
    gateway_id = "${aws_internet_gateway.test-env-gw.id}"
  }
}

resource "aws_route_table_association" "subnet-association" {
  subnet_id      = "${aws_subnet.subnet-uno.id}"
  route_table_id = "${aws_route_table.route-table-test-env.id}"
}
```

## SSH Access

Next, you will want to securely log in to your server. For that you define
the public key with that you can log in. You need to adapt the
file path to your public key on your system.

```
resource "aws_key_pair" "spot_key" {
  key_name   = "spot_key"
  public_key = "${file("/home/xx/.ssh/id_rsa.pub")}"
}
```

## Spot Request

The last piece in the Terraform definition file is the actual spot
instance request. There, you have to define the [Amazon Machine Image (AMI)](https://docs.aws.amazon.com/de_de/AWSEC2/latest/UserGuide/AMIs.html). The AMI is
basically an image file that contains the operating system.
In our case it is CentOS 7.4. You can find a list of public AMIs of your region in the AWS console under
the EC2 menu.

You also need to define an appropriate instance type.
On the AWS page, you can find a list of [instance types](https://aws.amazon.com/ec2/instance-types/?nc1=h_ls).
The other properties are references to the SSH key, to the
security groups and the subnet ID.
In the _spotprice_ entry, you specify how much the EC2 spot instance should cost maximally per minute.
The _blockdurationminutes_ specifies the time of the duration of the instance.
After that time, the instance is automatically destroyed.

```
resource "aws_spot_instance_request" "test_worker" {
  ami                    = "ami-66a7871c"
  spot_price             = "0.016"
  instance_type          = "t3.small"
  spot_type              = "one-time"
  block_duration_minutes = "120"
  wait_for_fulfillment   = "true"
  key_name               = "spot_key"

  security_groups = ["${aws_security_group.ingress-ssh-test.id}", "${aws_security_group.ingress-http-test.id}",
  "${aws_security_group.ingress-https-test.id}"]
  subnet_id = "${aws_subnet.subnet-uno.id}"
}
```

## Running Terraform

In order to actually apply and create the EC2 spot instance, you need to call Terraform
in the directory where you stored the definition file.

Be aware that your AWS user that you configured in your AWS CLI must have the rights
to create EC2 instances. Use the [AWS IAM](https://aws.amazon.com/iam/?nc1=h_ls) console to create the necessary rights.

Use the following two commands to run the creation of the EC2 spot instance:

```bash
terraform init
terraform apply
```

It will ask you the region and whether everything is good to go.
After the successful creation, there will be a terraform.tfstate file. In it you
can find the public IP address for the instance.
Also, in the AWS web interface, you can go to the EC2 section. There you will find your instance, and you
also can get the public IP address.

You can then connect with SSH to
the public instance like this:

```bash
ssh root@ip
```

When you do not need the instance anymore run the destroy command:

```bash
terraform destroy
```

## Conclusion

A server instance on Amazon EC2 is not as easy to set up as on other providers like
Digital Ocean. But you have more possibilities to configure.
With Terraform, you have the opportunity of an automatic and easily configurable
creation of EC2 Spot instances. The mantra of Infrastructure as Code is to be
able to automate as much as possible all system administration tasks.
Terraform is a vital tool in this respect.

In one of my next articles, I will show you how to use Ansible to provision the
just created EC2 spot instance.

## Sources and Further Reading

- Infrastructure as Code: Managing Servers in the Cloud, 2016, Kief Morris, O'Reilly Media

- Source code of this article: https://github.com/tderflinger/terraform-ec2-spot

- Article by Hasitha Algewatta: https://medium.com/@hmalgewatta/setting-up-an-aws-ec2-instance-with-ssh-access-using-terraform-c336c812322f

- Article by Digital Ocean on networking: https://www.digitalocean.com/community/tutorials/understanding-ip-addresses-subnets-and-cidr-notation-for-networking

- CIDR address calculation tool: https://www.ultratools.com/tools/netMask

- Article by Alberto Acuna: https://blog.albertoacuna.com/using-terraform-to-create-an-ec2-instance-within-a-public-subnet-in-aws/


large_cloud.jpg

medium_cloud.jpg

small_cloud.jpg

thumbnail_cloud.jpg

Terraform is an Infrastructure as Code (IaC) tool by HashiCorp. Using it you can reproducibly create server instances on cloud providers like AWS or Digital Ocean. In this article, I show you how to create an AWS EC2 Spot instance server with Terraform.

Create an EC2 Spot Instance with Terraform

[A-Frame](https://aframe.io/) is a [VR (Virtual Reality)](https://en.wikipedia.org/wiki/Virtual_reality) framework written in JavaScript, developed by Mozilla. It runs in the browser
and can display interactive 3D scenes using the normal desktop browser. It
also supports VR headsets like Oculus Go, Oculus Quest, HTC Vive and Windows Mixed Reality.

A-Frame supports WebVR or its successor [WebXR](https://www.w3.org/TR/webxr/). It is developed as a W3C standard. The WebXR standard is currently in evolution, but support by browsers is gaining traction.

How to build a VR website of a rotating sculpture with A-Frame, I want to show in this article.

First, you need a 3D object. Suitable objects can be found on sites like SketchFab. For the purpose
of this article I, take the [Artemis sculpture](https://sketchfab.com/3d-models/artemis-fountain-b9985a307aac41bbad4339fa46122d7a) by C. Bjerg and Poul Holsøe from 1934. It stands in
a park in Copenhagen, Denmark. Artemis is a goddess of the hunt and wild animals in ancient Greek religion.

The 3D model has a permissive license and can be used by attribution. When you download the file, only the .OBJ and the textures are needed.

Then you need an HTML file where the loading of the sculpture file and the positioning takes place.
This is as simple as loading the A-Frame JavaScript files in the head section and then building a
scene. The HTML elements in the A-Frame framework always begin with a- . So the scene object is
called _a-scene_, the sky object _a-sky_ and so on.

So you can use your knowledge of Web development when creating a 3D scene with A-Frame.

This is how the finished VR scene looks like in source code:

```html
<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-plane
        position="0 0 -4"
        rotation="-90 0 0"
        width="4"
        height="4"
        color="#000000"
      ></a-plane>
      <a-sky color="#FFFFFF"></a-sky>
      <a-assets>
        <a-asset-item
          id="hall-obj"
          src="./artemisfountain-low.OBJ"
        ></a-asset-item>
        <img id="hall-texture" src="./textures/artemis-diffuse-bw.jpg" />
      </a-assets>
      <a-entity
        position="0 -32 -50"
        animation="property: rotation; to: -90 360 0; loop: true; dur: 10000"
        rotation="-90 0 0"
        obj-model="obj: #hall-obj;"
        material="src: #hall-texture"
        id="hall"
      >
        <a-entity position="0 20 -120"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
```

You can see that the sculpture is called an asset and loaded with the _a-assets_ element.
The actual rotation is done in the _a-entity_ with the animation attribute. You need
to be careful with the coordinate system to rotate in the right direction.

Otherwise, this is all declarative and not much code.

Now you need to access the scene from your VR device. For my Oculus Go, they force you into
a registration as a developer to transfer data from your computer to the Oculus Go.

So you can circumvent this by deploying the HTML code to the "cloud". I use AWS S3 and simply
copy the code to a bucket.

This little bash script does that for me:

```bash
cd src
aws s3 sync --acl public-read . s3://vr.tderflinger.com
firefox vr.tderflinger.com.s3-website.eu-central-1.amazonaws.com
```


In the /src directory I have the A-Frame source code, and it is copied to my bucket, vr.tderflinger.com.
Then I can open the URL in my browser. The same URL you also need to input in your VR device's browser.

Then you can click on the icon on the bottom right, and you are immersed in the scene.

The project source code can be downloaded from the GitHub link below.

## Conclusion

For people coming from web development, it is relatively easy to get started with A-Frame. Since
A-Frame leverages web technology, you can step by step build more ambitious projects.

## Sources and Further Reading

- A-Frame: https://aframe.io/

- WebXR: https://www.w3.org/TR/webxr/

- Rotating Artemis source code: https://github.com/tderflinger/rotating-artemis-aframe

- Artemis model is by [Rigsters](https://sketchfab.com/3d-models/artemis-fountain-b9985a307aac41bbad4339fa46122d7a), license of the model is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)


large_rotating-sculpture.png

medium_rotating-sculpture.png

small_rotating-sculpture.png

thumbnail_rotating-sculpture.png

A-Frame is a VR (Virtual Reality) framework written in JavaScript, developed by Mozilla. It runs in the browser and can display interactive 3D scenes in your VR device. How to build a VR website of a rotating sculpture with A-Frame, I want to show in this article.

Thoughts by Thomas Derflinger