DEV Community: St. John Johnson

Animated Gifs for Text-Based UIs

St. John Johnson — Tue, 03 Mar 2020 07:44:48 +0000

Context

In my spare time, I've been working on a simple text-based game for my 4 year old to play. He found my 10 year old Linux laptop and has been having a blast with the terminal.

When I started writing the game, I picked GoLang as the language and researched a variety of TUI (text user interface) libraries. After some quick prototypes, I settled with tview for the solid primitives and ease of keyboard interaction.

Objective

During development, I realized it could use more feedback when getting an answer right or wrong. The way I wanted to solve that was by adding simple animations (e.g. happy vs sad cat). Nothing in tview (or the other libraries) had anything readily available.

The following is the process I went through to build a new tview object that supported displaying animated gifs:

Parse the image frames and timing information
Display the frames on the screens
Scale for multiple animations

Step 1. Parsing Gifs

GoLang has a simple built in Gif library image/gif. After decoding the file, you are left with:

Set of frames as image.Paletted
Set of delays between frames as int

Step 2. Image to Text

I stumbled across pixelview which converts images into formatted text for tview by using colored half-block unicode characters (▀).

It also accepts the image.Image interface (which is what image.Paletted above uses).

Now I can display each of those Gif frames into a tview box.

Step 3. Optimizing

The above prototype wouldn't really work. Besides the single-threaded iteratation through a single gif (which prevents us from adding multiple gifs), there are performance issues to take into account. Depending on the speed and the number of frames, you would see CPU load during quick rendering and constant conversion of image objects. Additionally, the use of TextView and the added features (scrolling and highlighting) slows down rendering.

To reduce that impact and support multiple images, I switched to my own Box class and made some important changes.

First, I switched the animation to be on-demand. That way, whenever the view needed to be re-drawn it would calculate the current frame it should be on and render that.

I did that by recording the start time of the view and iterating on each frame delay until we knew where we were.

Second, I removed our usage of TextView and made my own stripped down version of the TextView draw function.

Finally, I triggered a global re-draw on a periodic basis. That way all Gifs would be animated consistently (although not as smooth).

Final Product

In the end, I created a library that allowed me to add basic animated gifs into my son's game using a single interface.

Here is the library as well as the documentation.

And this is a simple example (dancing banana not included):

Internal Domains with DNSMasq and Pi-Hole

St. John Johnson — Sat, 29 Feb 2020 07:37:55 +0000

Running services inside your own household is an absolute blast. It usually starts with some application you need to keep running after you close your laptop. Before you know it, you have a Raspberry Pi in every room, at least one Intel NUC, and a small server rack in your Amazon shopping cart.

When going down this path myself, I noticed an interesting problem arose after I introduced the second server. Talking to one machine is easy, just memorize the static IP. But once you start to introduce multiple machines or multiple services on the same machine, it becomes a game of "what IP, what port, what path." And for the other people in the household, it's impossible to understand.

For me to continue, I needed my own DNS server. Luckily, I already introduced one into my ecosystem when I starting running Pi-Hole (for blocking tracking/ads).

In the next section, I'm going to show you how to quickly augment Pi-Hole to serve internal domains as well as block those pesky external domains.

1. DNSMasq

Pi-Hole, under the hood, is running DNSMasq. So we want to provide it with some additional hosts to resolve.

First is the additional configuration to run after Pi-Hole:

Second is the list of hosts and their static IPs:

2. File Placement

The .conf file should be placed in the /etc/dnsmasq.d/ folder. And the .list file should be placed in the /etc/pihole/ folder.

For this demonstration, we're going to manage Pi-Hole locally in a Docker container. Here is my docker-compose file that mounts those files correctly:

3. Validating

If we run Pi-Hole with those settings, we can validate they are accepted by using dig:

$ dig @127.0.0.1 haas.example.com +short
10.0.0.205
$ dig @127.0.0.1 pihole.example.com +short
10.0.0.205
$ dig @127.0.0.1 plex.example.com +short
10.0.0.210
$ dig @127.0.0.1 go +short
10.0.0.215
$ dig @127.0.0.1 modem +short
192.168.100.1

And that external domains are still routed:

$ dig @127.0.0.1 google.com +short
172.217.5.206
$ dig @127.0.0.1 github.com +short
192.30.255.113

Appendix

All of the steps and configurations you saw in this guide are available to checkout from my GitHub Gist:

$ git clone https://gist.github.com/d441e26e4d77a975fd3ebb4e6f19e3d6.git
...
$ cd d441e26e4d77a975fd3ebb4e6f19e3d6
$ make
...

Bring Your Own Certificate Authority

St. John Johnson — Mon, 24 Feb 2020 05:17:22 +0000

Over the past few years, I've been running a number of internal services for my household. These include automation tools with Home Assistant, anti-tracking with Pi-Hole, and media management with Plex.

Even in my home network, I still want these services to all use TLS. Until last week, I was doing this via a single complicated Nginx server using path proxying to the internal services. That service had a single (obfuscated) domain name that I used Let's Encrypt (ever 90 days) with DNS validation.
This was quite complicated to manage, share with the family, and not all the services I wanted to use supported alternative paths.

This all changed last week when my friend told me his household has their own Root Certificate! It immediately clicked, I could have all the subdomains I want with valid TLS certificates and not have to expose any information to the internet! Brilliant!

In this article, I'm going to walk through creating your own root certificate for your domain, generating server certificates, configuring your servers, and installing the CA on your client machines.

0. Know your Environment

My target systems were going to be a variety of OSX, iOS, and Windows devices. After doing some research (e.g. trial and error), I found that OSX/iOS has some new limitations on certificates that affect the work we need to do. The quick summary is:

RSA keys must use key sizes greater than or equal to 2048 bits
DNS name of the server must be in the Subject Alternative Name (SAN)
Server certificates must contain "serverAuth" ExtendedKeyUsage (EKU)
Server certificates must be valid for 825 days or fewer

And for me to make the certificates, I wanted the process to be quite repeatable (as I'll be adding new services over time) and I needed it to support sane future defaults. For those reasons, I ended up using cfssl by CloudFlare.

$ brew install cfssl
...
🍺  /usr/local/Cellar/cfssl/1.4.1: 5 files, 44.2MB

$ cfssl version
Version: 1.4.1
Runtime: go1.13.4

All of the steps and configurations you will see in this guide are available to checkout from my GitHub Gist:

$ git clone https://gist.github.com/77c5515720954a97f2b9866bc6ab85e0.git
...
$ cd 77c5515720954a97f2b9866bc6ab85e0
$ make
...

1. Generating your Root Certificate

We need to start by generate our CA (Certificate Authority). To do this, we need to provide a config to cfssl about our new root domain. Here is my ca-csr.json. You can also see the defaults via cfssl print-defaults csr

Pay close attention to the RSA/2048 as that is required for OSX/iOS.

Now we use the gencert command to create our new CA. Piping the command to the cfssljson command converts the cfssl JSON output into files.

$ cfssl gencert -initca ca-csr.json | cfssljson -bare ca
2020/02/23 00:21:49 [INFO] generating a new CA key and certificate from CSR
2020/02/23 00:21:49 [INFO] generate received request
2020/02/23 00:21:49 [INFO] received CSR
2020/02/23 00:21:49 [INFO] generating key: rsa-2048
2020/02/23 00:21:49 [INFO] encoded CSR
2020/02/23 00:21:49 [INFO] signed certificate with serial number 505123895045664503620591058435184552164152724476

That will give you your new CA (ca.pem) and private key (ca-key.pem).

2. Generating a Server Certificate

With that new CA, we can now mint a certificate for our first service (pi-hole). Generating a certificate requires two configs, one for the CA config and another CSR for the server itself.

Here is my ca-config.json:

Pay close attention to the 1 year expiration and "server auth" being listed in the usages section (i.e. EKU).

Here is my server-csr.json:

Key is RSA/2048 again and we also put the DNS entry in hosts (i.e. SAN)

Now that we have our configs, we can generate our certificate:

$ cfssl gencert \
    -ca=ca.pem \
    -ca-key=ca-key.pem \
    -config=ca-config.json \
    -profile=web-servers \
    server-csr.json | cfssljson -bare server
2020/02/23 09:16:46 [INFO] generate received request
2020/02/23 09:16:46 [INFO] received CSR
2020/02/23 09:16:46 [INFO] generating key: rsa-2048
2020/02/23 09:16:46 [INFO] encoded CSR
2020/02/23 09:16:46 [INFO] signed certificate with serial number 380799927774623048949672171568330922769086552071

Now you have a server certificate for pihole.stj.me with (server.pem) and private key (server-key.pem).

We can quickly verify it with openssl:

$ openssl verify -CAfile ca.pem server.pem
server.pem: OK

3. Configuring a NGinx Server

Our NGinx server needs to perform three actions:

Serve ca.pem over 80 so our clients can install the certificate.
Redirect pihole.stj.me from 80 to 443/ssl.
Serve pihole.stj.me over 443/ssl with the server keys we generated.

To serve Pi-Hole, I'm using a docker container that is on the same virtual network via docker-compose (see below).

Here is my nginx.conf file that supports those actions.

As I said above, I've put everything in Docker-Machine with the two containers to make it easier to demonstrate here (docker-compose.yml):

With all this, we can get the service running using a simple command:

$ docker-compose up nginx
Starting 77c5515720954a97f2b9866bc6ab85e0_pihole_1 ... done
Starting 77c5515720954a97f2b9866bc6ab85e0_nginx_1 ... done
Attaching to 77c5515720954a97f2b9866bc6ab85e0_pihole_1, 77c5515720954a97f2b9866bc6ab85e0_nginx_1

Make sure to augment your /etc/hosts with the new subdomain (until we put it in dnsmasq):

$ echo "127.0.0.1 pihole.stj.me" | sudo tee -a /etc/hosts
$ grep stj.me /etc/hosts
127.0.0.1 pihole.stj.me

And we can now verify that the actions work as expected:

Serving the certificate over port 80:

$ curl http://localhost/ca.pem
-----BEGIN CERTIFICATE-----
...
----------END CERTIFICATE-----

Redirecting to https:

$ curl -I http://pihole.stj.me/admin/
HTTP/1.1 301 Moved Permanently
Server: nginx/1.17.8
Date: Mon, 24 Feb 2020 03:50:40 GMT
Content-Type: text/html
Content-Length: 169
Connection: keep-alive
Location: https://pihole.stj.me/admin/

Serving pi-hole with our server certificates:

$ curl -I https://pihole.stj.me/admin/
curl: (60) SSL certificate problem: unable to get local issuer certificate

$ curl -I --cacert ca.pem https://pihole.stj.me/admin/
HTTP/1.1 200 OK
Server: nginx/1.17.8
Date: Mon, 24 Feb 2020 03:52:28 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
X-Pi-hole: The Pi-hole Web interface is working!
X-Frame-Options: DENY
Set-Cookie: PHPSESSID=fvj75itvvq3e8pel87gkl7gdk2; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache

4. Installing the Clients

Great, we have a working service, time to make sure your clients can talk to your services without having to pass the CA around (or --insecure).

For the rest of this guide, we're going to assume this is running on a server in the network with the IP 10.0.0.100. That means from whatever device in your trusted network, you should be able to access http://10.0.0.100/ca.pem. Additionally, you have already configured pihole.stj.me to point to 10.0.0.100 via DNSMasq or something else on your network.

OSX

Download the ca.pem from your server via the URL above
Open Keychain Access.app
Go to the System keychain
Click File > Import Items or use shift+cmd+I
Double-click on your certificate
Expand the Trust section and select Always Trust for When using this certificate
Close Keychain Access.app
Visit https://pihole.stj.me/admin/ successfully!

IOS

Visit the ca.pem URL above in Safari
Click Allow when prompted about downloading a configuration profile
Go to the Settings app
Click on Profile Downloaded
Click Install, enter your passcode, click Install, and click Install again
Go back to the Settings app
Go to General > About > Certificate Trust Settings
Enable Full Trust for your Root Certificate
Visit https://pihole.stj.me/admin/ successfully!

Windows 10

Download the ca.pem from your server via the URL above
Open Microsoft Management Console via Start > Run > mmc.exe
Click File > Add/Remove Snap-in
Select Certificates
Select Computer Account and Local computer
Click OK to close the dialog
Navigate to Trusted Root Certification Authorities
Right-click and select All Tasks > Import
Follow the wizard and select the ca.pem file you downloaded
Visit https://pihole.stj.me/admin/ successfully!