DEV Community: Andri

Tech Podcasts for 2024

Andri — Wed, 14 Feb 2024 08:04:27 +0000

Some of the podcasts I enjoy during my bike-trip to work.

Soft Skills Engineering

Soft Skills are an underrated ability in engineers and Dave and Jamison deliver their advise in such a funny and helpful way that it's hard not to smile while listening to it.

Syntax.fm

Scott and Wes are really in touch with what's trending in the tech world and usually have both great guests and interesting takes on a various range of subjects.

Go time

A great Go(lang) specific show with deep technical topics and plenty of humor.

.NET Rocks

Even though I don't really program in .NET, I enjoy this show very much. Patterns and ways of working are universal and the hosts are very entertaining.

Darknet Diaries

Host interviews hackers and other cyber-criminals about their exploits and mistakes.

devtools.fm

Recently started listening, but so far very happy with their content which focuses on developer tooling (duh).

Home Assistant Podcast

As someone who likes tinkering with smart-home stuff, this show is very inspiring to what you can do with a few lines of Python or YAML.

JS Party

In depth show about all things JavaScript/TypeScript.

React Native Radio

A show from Infinite Red about React Native, Expo and the art of making cross platform apps.

Self Hosted

An inspiring show about software that you can host yourself without "the cloud". I may not do a lot of self hosting, but I enjoy listening to others talk about it in detail.

Shop Talk

Somewhat Ruby specific, but a great all-around tech pod cast.

ENV files

Andri — Sat, 18 Dec 2021 00:00:00 +0000

An environmental-variable is a way for the environment (your operating-system, or shell) to share information with future processes. Some ENV vars are global (and set by the OS), others are only useful in a certain context.

You could be using a configuration file, but the world of hosting has very much adopted the 12 Factor App way of configuring applications. For environments like CI/CD, Heroku and Kubernetes, this makes a lot of sense.

In development though, this can be quite awkard to use.

Example: Backend API

You've written a beautiful monolith, but it needs a couple of things to run properly. It uses a private key to sign auth tokens, and it uses AWS credentials for uploads to S3.

You decide to use ENV variables and decide on AUTH_KEY and AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY. Then you set up your hosting, and configure your app to abort if any of those are missing.

In development though, instead of running npm run dev, you now need to run AUTH_KEY=xxx AWS_ACCESS_KEY_ID=xxx AWS_SECRET_ACCESS_KEY=xxx npm run dev.

This is rather annoying, and might prompt you to write a blog post about ENV variables...

Creating the .env file

Instead of defining the ENV variables every time, we can create a .env file in our project workspace. It usually looks something like this.

# JWT encoding key
AUTH_KEY=youWillNeverGuessThisYouEvilHackers
# AWS Developer Access
AWS_ACCESS_KEY_ID=xxx
AWS_SECRET_ACCESS_KEY=xxx

You may be tempted to check this file into source control (e.g. Git) and store with your code. That would be a mistake. Especially if you decide at a later point to open-source your project. Then you'd also be giving everyone access to your AWS credentials. Even if you later delete the file from your repo.

Instead, add it to your .gitignore file to make sure that it will never get accidentally pushed with your code.

.env

It may not be 100% secure, to store stuff like this on your developer laptop, but it's still better than storing secrets in your repository.

Pro tip: New developers on your projects may not know anything about ENV variables or your local .env file. So make sure you update your documentation, and provide useful error messages if those ENV variables are missing.

Never create .env files for anything other than your development setup. It is very easy to accidentally expose secrets that way.

Reading the .env file

If we now run our backend, it will complain that our ENV variables are not set. We have to tell Node (or whatever) about those variables.

On Linux/Mac this is quite easy.

Pass the env-vars to MYCOMMAND

In this case npm run dev will have access to any ENV variables in the file.

eval $(egrep -v '^#' .env | xargs) npm run dev

Export the vars in .env into your shell

It's also possible to "export" the variables to your current session. That way, any command you run afterwards from the same shell will inherit it.

export $(egrep -v '^#' .env | xargs)
npm run build
npm run dev

Node.js

It is also possible to read ENV files without doing shell-script dark arts.

dotenv

You can inject the ENV variables into your Node.js process like this.

npm install --save-dev dotenv

In your app.js

require('dotenv').config()

In my experience, this is a horrible way of reading the ENV file. Remember, that this is a convenience for development. Why are we adding it to production code?

dotenv, without polluting your code

Add a file called env.js to your project workspace.

const { execSync } = require("child_process");

// This reads the .env file into the environment
// and shares it with any child process
require("dotenv").config();

const [argnode, argcmd, ...argrest] = process.argv;

// Run whatever follows `node env.js` as a child process and inherit stdin/stdout/etc
execSync(argrest.join(" "), {
  stdio: "inherit",
});

Then in your package.json. In my example, I'm loading .env and then running the Remix dev-server.

{
  "name": "your package"
  "scripts": {
    "dev": "node ./dev.js npm run dev:server",
    "dev:server": "remix dev"
  }
}

There are packages on NPM that do this for you, like dotenv-cli or dotenv-run-script. But why install a dependency for 4 lines of code?

Host Static Websites on a VPS with TLS

Andri — Sun, 02 May 2021 00:00:00 +0000

Hosting doesn't have to be complicated or expensive. I'll show you how to host a static site for $6/mo on DigitalOcean (ref link).

Be warned, this is a bit technical and you will need to type some things into a terminal. I will explain what each line does on the way.

Creating the server

Log on to the DigitalOcean cloud console and create a new Droplet.

Distribution : Ubuntu LTS or Debian is fine
Plan : Basic
Options : AMD, $6/mo (1G ram, 20G SSD, 1TB bandwidth)
Datacenter : Just pick the one closest to you.
Authentication : Pick a password or use a public SSH key (i use SSH keys).
Hostname : Something that helps you remember. Mine is called "hostingdemo"

DigitalOcean offers automatic backups for $9.60/mo and you can select that if you want, but in our case... we'll be building the site elsewhere and uploading it.

After a few seconds, you should see your server ready.

Logging on to the server

Note the IP address field. Click it to copy the address. You need SSH. It should already be installed on your Linux, Mac or Windows machine.

In your terminal shell (open terminal og cmd).

ssh root@your-droplet-ip-address

If you selected a password, you'll be prompted for that. If you selected an SSH key and that key is setup on your machine you're all logged in.

Installing what we need

We'll be using Caddy for our web-server to use its' automatic TLS feature. Other options could be nginx or apache.

# Install the web server
apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo apt-key add -
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee -a /etc/apt/sources.list.d/caddy-stable.list
apt update
apt install caddy
# Update your server, highly recommended
apt dist-upgrade -y

Now open a browser and access http://your-droplet-ip-address

That was easy, right?

Adding a web user to upload with

So far, we've been using "root", a system user that can do anything. We don't want to spread that around. Create a new user:

useradd webuser --password somethingstronger -s /sbin/nologin -m

This creates "webuser" with the password "somethingstronger" (and I do mean, it... use your own strong password), disables the SSH login and creates a home directory.

Enabling SFTP

To be able to upload files from a non-privleged user we need to change the SSH configuration a bit. Open the SSH daemon config in "/etc/ssh/sshd_config".

nano /etc/ssh/sshd_config

Make sure that the following lines look like this:

Subsystem sftp internal-sftp
PasswordAuthentication yes

The first one enables use of SFTP without having a login shell (like our limited webuser) and the second allows password logins for SSH.

Restart the SSH server

service ssh restart

Test the login from your machine (this works on Mac and Linux, unsure about Windows)

sftp webuser@your-droplet-ip

webuser@your-droplet-ip's password: 
Connected to your-droplet-ip.
sftp>

Tell Caddy to serve files from our webuser directory

nano /etc/caddy/Caddyfile

:80

# Set this path to your site's directory.
root * /home/webuser

# Enable the static file server.
file_server

# Refer to the Caddy docs for more information:
# https://caddyserver.com/docs/caddyfile

This tells Caddy to serve from the webuser home directory instead. But, we need to give it access.

usermod -a -G webuser caddy
service caddy restart

Test the web-server

Upload an "index.html" to your server. Use whatever SFTP client you like (like FileZilla or winscp). From my local machine, I create a simple HTML file on my computer called "index.html" with "hello world" in it. Then I uploaded it to our server.

sftp sftp webuser@your-droplet-ip
put index.html

Adding a hostname or a domain

I added a DNS record to give my server a name. How exactly you add this depends on your DNS hosting provider. DigitalOcean has this under "Networking -> Domains".

Hostname : whateveryouwant (I used "hostingdemo")
Record Type : A
Target : your-droplet-ip-address

Now, if I point a browser to http://hostingdemo.andri.dk...

Adding Encryption (TLS/SSL)

To do this, we open our Caddyfile again in "/etc/caddy/Caddyfile" and change it to the following:

hostingdemo.andri.dk # replace this with your hostname

# Set this path to your site's directory.
root * /home/webuser

# Enable the static file server.
file_server

# Refer to the Caddy docs for more information:
# https://caddyserver.com/docs/caddyfile

Reload the configuration.

service caddy reload

Then in your browser change the URL from "http" to "https" and reload.

Wrapping up

We created a new server on DigitalOcean
We added a new non-privileged user "webuser" and configured it to upload the site
We setup a DNS name for our new site
We setup Caddy with automatic TLS using Lets Encrypt

Bonus

Automatically upload your Jamstack site with Github Actions

This is covered in more details in my Deploy your Static Site Anywhere post, but copy paste the following into a .github/workflows/deploy.yaml file in your repo on Github.

You need the following secrets set up on your repo:

SFTP_HOST : host or ip of droplet
SFTP_USER : webuser
SFTP_PASS : yourverysecretpassword

name: buildpack
on: [push, pull_request]
jobs:
  remote-build:
    runs-on: ubuntu-latest
    container:
      image: docker:stable
      volumes:
        - /home/runner:/workspace
    env:
      IMG_NAME: ${{ github.workflow }}
      NODE_ENV: production # Makes this a little more clean on the Node side
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}

      # Downloads and caches the pack command (the code is open)
      - uses: andrioid/setup-pack@main
      # Attempt to fetch any previous image so that we may use it for caching
      - run: docker pull ghcr.io/${GITHUB_REPOSITORY}/${IMG_NAME} || true
      # Builds your site with buildpacks (heroku builder)
      - run: pack build ghcr.io/${GITHUB_REPOSITORY}/${IMG_NAME} --builder=heroku/buildpacks:20
      # Pushes your new image to Github's Container Registry
      - run: docker push ghcr.io/${GITHUB_REPOSITORY}/${IMG_NAME}
      # Copy the build assets from the container and cleanup
      - run: CONTAINER_ID=$(docker create ghcr.io/${GITHUB_REPOSITORY}/${IMG_NAME}:latest /bin/sh) && docker cp ${CONTAINER_ID}:/workspace/public . && docker rm ${CONTAINER_ID}
      - run: ls -alh public
      - uses: actions/upload-artifact@v2
        with:
          name: public
          path: public/

  deploy-via-sftp:
    needs: remote-build
    runs-on: ubuntu-latest
    env:
      RCLONE_CONFIG_VPS_TYPE: sftp
      RCLONE_CONFIG_VPS_HOST: ${{ secrets.SFTP_HOST }}
      RCLONE_CONFIG_VPS_USER: ${{ secrets.SFTP_USER }}
      RCLONE_CONFIG_VPS_PASS_PLAIN: ${{ secrets.SFTP_PASS }}
    steps:
      - uses: andrioid/setup-rclone-action@main
      - uses: actions/download-artifact@v2
        with:
          name: public
          path: public
      - run: echo "RCLONE_CONFIG_VPS_PASS=$(rclone obscure ${RCLONE_CONFIG_VPS_PASS_PLAIN})" >> $GITHUB_ENV
      - run: rclone -v copy public vps:.

This requires you to have a repository on Github and that your site can be built with Buildpacks. I have this running with Gatsby, but it should work with almost anything that builds into public/.

Now my Jamstack Example site is deployed on our VPS!

Deploy Static Websites Anywhere

Andri — Sat, 01 May 2021 00:00:00 +0000

Before I started my carrier in Software Development, I was a System- and Network Administrator. I used to setup web servers and managed my own little server room. I truly, do not miss upgrading operating-systems on live services or dealing with hardware failure. However, hosting web-pages back then was much easier. You'd get an FTP/SFTP access and you'd upload your files. Then they got served statically...

Today, everything is about scale and maybe prematurely so. If you want to host a typical static site today, many hosting providers force you to add a Github (or similar) integration to your repository. To be fair; these providers offer automatic TLS, CDN, fail over and full scaling. But, what if I want to upload my own files? What if I already have a build-pipeline somewhere? Then this forced build-process is not convenient, but quite annoying.

I'm going to show you how to break free and deploy your static site wherever you want, using nothing but Github Actions.

Our toolbox for today

Github Actions: Github's build pipeline. This can be done on any CI platform. I simply chose Github actions because almost everyone uses Github and it's free for open source projects.
rclone: A wonderful file-syncing tool that supports a whole range of services.
Buildpacks: Build almost any project without writing a single Dockerfile. It detects your project, handles caching and has been used in production at Heroku for a very long time.

You also need node.js and git installed before we proceed. This guide expects that you know how to work with Git and Github.

TLDR;

If you're anything like me, you just want to skip the bullshit and dive straight into the code.

Setting up our sample Gatsby site

This could be any type of static site. I decided to go with Gatsby, because that's what I'm using. The only thing we assume here, is that npm run build works and builds to public/. Otherwise you have to adjust for it yourself.

Note : If you already have a site you want to deploy, you can skip this part.

npm init gatsby
# follow the prompts

Note : If you enabled the feed or sitemap plugins you need to add a metadata.siteUrl to your gatsby-config.js.

cd jamstack-example # or whatever you named yours
npm run develop # if you want to play with it
npm run build

Now you have a site in public/ that is ready to be deployed. Let's try it out real quick before going on to the Github part.

npm run serve

Then direct your browser to http://localhost:9000. If everything went well, you should see this.

Building it with Actions

Log on to Github and create a new repo. On that repo, find the repository URL and copy it where it says <repo>.

git remote add origin <repo>
git branch -M main
git push -u origin main

Now then. Let's add some actions! Create a file with this name and add it to your project.

.github/workflows/deploy-anywhere.yml

name: buildpack
on: [push, pull_request]
jobs:
  remote-build:
    runs-on: ubuntu-latest
    container:
      image: docker:stable
      volumes:
        - /home/runner:/workspace
    env:
      IMG_NAME: ${{ github.workflow }}
      NODE_ENV: production # Makes this a little more clean on the Node side
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}

      # Downloads and caches the pack command (the code is open)
      - uses: andrioid/setup-pack@main
      # Attempt to fetch any previous image so that we may use it for caching
      - run: docker pull ghcr.io/${GITHUB_REPOSITORY}/${IMG_NAME} || true
      # Builds your site with buildpacks (heroku builder)
      - run: pack build ghcr.io/${GITHUB_REPOSITORY}/${IMG_NAME} --builder=heroku/buildpacks:20
      # Pushes your new image to Github's Container Registry
      - run: docker push ghcr.io/${GITHUB_REPOSITORY}/${IMG_NAME}
      # Copy the build assets from the container and cleanup
      - run: CONTAINER_ID=$(docker create ghcr.io/${GITHUB_REPOSITORY}/${IMG_NAME}:latest /bin/sh) && docker cp ${CONTAINER_ID}:/workspace/public . && docker rm ${CONTAINER_ID}
      - run: ls -alh public
      - uses: actions/upload-artifact@v2
        with:
          name: public
          path: public/

It goes without saying that you need to add, commit and push this change afterwards.

Deployment

Deploy to AWS S3
Deploy to Github Pages
Deploy to Neocities
Deploy to Netlify
Deploy to SFTP

Deploy to AWS S3

Amazon's S3 is one of the oldest managed cloud service and it shows why. It's capable to act as a bin for all your files, yet also supports things like static hosting and rewrites.

Create a bucket

Log on to AWS management console and find the S3 page. Create a bucket and note the ARN name.

IAM & access control

One of the most painful AWS experiences, is how we deal with permissions. I've done this many times, but I have to look it up every time.

Create a user with IAM and assign the following permissions with a new policy. Replace with your ARN from earlier. Mine is "arn:aws:s3:::jamstack-example.andri.dk/".

jamstack-policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "<MYBUCKET>",
                "<MYBUCKET>/*"
            ]
        }
    ]
}

This policy allows your user to upload, download, list files, delete objects and upload with permissions (rclone uses this to apply your acl). The resources limit this permission to this single bucket (a good idea!).

TLS / SSL

Some services do this automatically, but AWS requires you to do this manually. I didn't add TLS to my example site, but you can take a look at this this blog post on how to add TLS to your S3 hosted site.

All done!

The site is now deployed on AWS S3.

Doing with any S3/SFTP any site isn't much different from the S3 example. In the appendix, I'll provide a few more examples.

  deploy-aws-s3:
    needs: remote-build
    runs-on: ubuntu-latest
    env:
      RCLONE_CONFIG_AWSS3_TYPE: s3
      RCLONE_CONFIG_AWSS3_ACCESS_KEY_ID: ${{ secrets.S3_KEY_ID }}
      RCLONE_CONFIG_AWSS3_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
      RCLONE_CONFIG_AWSS3_REGION: eu-central-1 # yours may differ
      RCLONE_CONFIG_AWSS3_ACL: "public-read"
      BUCKETNAME: jamstack-example.andri.dk
    steps:
      - uses: andrioid/setup-rclone-action@main
      - uses: actions/download-artifact@v2
        with:
          name: public
          path: public
      - run: ls -alh
      - run: rclone ls awss3:${BUCKETNAME}
      - run: rclone -v copy public awss3:${BUCKETNAME}

This is how my deploy-aws-s3 job looks in my workflow file.

You can see the site in action here.

Deploy to Netlify

To be able to upload files to Netlify, you have to create a new site. To create a site without adding a Git repo, you can go to the "Sites" page and in the bottom there is a drag-drop area where you can drop your "public" directory to create a new site.

When that is done, you can use the following job definition. Just grab the Site API ID from the site-settings page.

  deploy-netlify:
    needs: remote-build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/download-artifact@v2
        with:
          name: public
          path: public
      - uses: jsmrcaga/action-netlify-deploy@v1.1.0
        with:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
          NETLIFY_DEPLOY_TO_PROD: true
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
          BUILD_DIRECTORY: public

You can see the site in action here.

Deploy to Github Pages

Github Pages uses Git, and if you have a project that you want to use for Github Pages you can just create an empty "gh-pages" branch and use it to update your site.

For this blog-post, I created "andrioid/jamstack-example" and I'm using that for a demo deployment.

To setup our pages branch, do the following. Credit.

git checkout --orphan gh-pages
git rm -rf .
git commit --allow-empty -m "root commit"
git push -u origin gh-pages

This creates a branch named "gh-pages" without any commit history. Then deletes all of the tracked files. Then we add an empty commit and push it. Github will automatically set Pages up when the branch is named "gh-pages".

The only remaining thing is to use our build-step to upload the site to this branch. Fortunately there is an action that does just that.

  deploy-ghpages:
    needs: remote-build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2 # needed to setup git
      - uses: actions/download-artifact@v2
        with:
          name: public
          path: public
      - uses: JamesIves/github-pages-deploy-action@4.1.1
        with:
          branch: gh-pages
          folder: public

Add this job to your deploy-anywhere.yaml file.

You can see the site in action here.

Deploy to Neocities

Neocities offers free hosting and if you upgrade you can have TLS and a custom domain as well. They also support Webdav and that would allow us to upload with rclone (just like we did with S3), but I don't have a premium account.

So, to get this running we grab the Deploy to Neocities action. You can find your API key in the Neocities Site Settings. Add it to your repo secrets as "NEOCITIES_API_KEY".

  deploy-neocities:
    needs: remote-build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/download-artifact@v2
        with:
          name: public
          path: public
      - name: Deploy to neocities
        uses: bcomnes/deploy-to-neocities@v1
        with:
          api_token: ${{ secrets.NEOCITIES_API_KEY }}
          cleanup: false
          dist_dir: public

Add this job to your deploy-anywhere.yaml file.

You can see the site in action here.

Deploy to SFTP

I setup a small webserver with automatic TLS on DigitalOcean to demonstrate SFTP. You can read about it here.

You need the following secrets set up on your repo:

SFTP_HOST : host or ip of sftp server
SFTP_USER : webuser
SFTP_PASS : yourverysecretpassword

Add this job to your deploy-anywhere.yaml file.

  deploy-via-sftp:
    needs: remote-build
    runs-on: ubuntu-latest
    env:
      RCLONE_CONFIG_VPS_TYPE: sftp
      RCLONE_CONFIG_VPS_HOST: ${{ secrets.SFTP_HOST }}
      RCLONE_CONFIG_VPS_USER: ${{ secrets.SFTP_USER }}
      RCLONE_CONFIG_VPS_PASS_PLAIN: ${{ secrets.SFTP_PASS }}
    steps:
      - uses: andrioid/setup-rclone-action@main
      - uses: actions/download-artifact@v2
        with:
          name: public
          path: public
      - run: echo "RCLONE_CONFIG_VPS_PASS=$(rclone obscure ${RCLONE_CONFIG_VPS_PASS_PLAIN})" >> $GITHUB_ENV
      - run: rclone -v copy public vps:.

You can see the site in action here. This link may stop working when I decide that I don't want to pay $5/mo for it.

Additional Hosting Providers?

Please drop me a line on Twitter if you want to add a hosting provider to this post. The only requirement is that it's possible to create the project without Git integration.

Deploy to Vercel 🚫️

Before Vercel was Zeit, their CLI now was able to take any folder and make it a website. But, it doesn't look like Vercel allows any of that anymore. I also can't find a way to create a project without integrating with a Git hosting provider.

Deploy to DigitalOcean 🚫️

DigitalOcean Spaces was actually my first attempt, but only after getting almost everything working, I realized that they don't support indexes. So, I had everything up and running with their CDN, but I had to manually link to "index.html".

As far as I know, there is no way of manually uploading files to their "Static Apps" offering.

Final words

When I started writing this post, I was sure that most of the hosting providers did in fact support open standards like SFTP, Webdav or even S3. But, that's not the case and that makes me sad.

Why those providers have the need to dominate our workflows is beyond my understanding. After all, what we're uploading here isn't any different than classic websites. All we need is a web-server. Everything else is just gravy.

Appendix

How to copy files from a Docker image

docker create $image # returns container ID
docker cp $container_id:$source_path $destination_path
docker rm $container_id

Adding Progressive Web Apps (PWA) to the Linux Desktop

Andri — Fri, 02 Oct 2020 00:00:00 +0000

At work, we use Microsoft Teams, and we used to (and sort of still) use Slack. I recently switched from a Macbook Pro to a Linux laptop (again), and what annoys me greatly is that when I "share screen/application" in the Slack or Teams app it offers me only to share my entire monitor.

Sure, it's annoying that I can't pick what window is shared; but what makes it unbearable for other people on my team is that my monitor is ultra-wide so everything I share becomes really tiny on their screen. Sorry.

Chrome can do it!

By accident, I stumbled upon that Slack running in Chrome on Linux can share windows just fine. The native Slack app does not. So I went on an adventure to figure out how to add web-apps to the Linux desktop and it's surprisingly hard to find (hence this post).

Chrome used to have a link in "More Tools -> Add to Desktop", but no more; and that had me confused. It's now called "More Tools -> Create Shortcut".

Just navigate to the site you want to open as an application, click "Create Shortcut" from the menu, check "Open as Window" and you're good.

On Linux, this will create a .desktop file in ~/.local/applications so that your desktop environment will pick it up. This guide should also work fine on Windows and Mac.

Plus, it's better!

Today, I'm running Outlook, Slack and Teams as progressive-web-applications and the performance is much better, screen/window sharing works and it uses less CPU than the Electron apps.

Kubernetes: Set Image Action

Andri — Thu, 27 Aug 2020 11:32:13 +0000

My Workflow

I have a workflow for work (private repo) that required setting images on Kubernetes clusters and the workflow file was getting harder and harder to read.

So I decided to create Kubernetes: Set Image that generates kubectl commands to help with changing images on deployments, and wait until the changes take effect.

I'll be using this for automatic environments, manual dispatch for more stable environments.

Features

Supports multiple deployments
Supports multiple containers per deployment
Groups deployment commands, so if you have two changes to one deployment, it will only run one kubectl line.
Wait until the cluster reports that the changes have been applied.

Submission Category:

DIY Deployments

Yaml File or Link to Code

The README has examples of how to use this action.

Example workflow

workflow.yml

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    name: Testing
    steps:
      - name: Test our action
        uses: andrioid/gh-action-k8s-set-image
        with:
          namespace: "default"
          images: |
            deployment.example.backend=gcr.io/example/backend:latest
            deployment.example.frontend=gcr.io/example/frontend:latest

Runs:

kubectl --namespace default set image deployment/example backend=gcr.io/example/backend:latest frontend=gcr.io/example/frontend:latest
kubectl --namespace default rollout status deployment/example

Additional Resources / Info

Special thanks to:

TypeScript
NCC (from Vercel)
ts-jest
Venue POS (my employer)

Meetings from Home: Tools

Andri — Mon, 16 Mar 2020 00:00:00 +0000

Are you working from home? Here's a list of some great tools that you can use for free.

If you have anything to add to the list, please give me a shout at @andrioid.

Video Conferencing and chat

Jitsi Meet

Not quite as polished as some of the commercial options, but quite capable. Works best with Chrome, but seemed to work fine in Firefox too.

No account required: ✅
No organization required: ✅
Open Source: ✅
Self Hostable: ✅
Screen Sharing: ✅
Chat: ✅

Team.video

Does exactly what the names says. No account required, very simple to use.

No account required: ✅
No organization required: ✅
Open Source: 🚫
Self Hostable: 🚫
Screen Sharing: ✅
Chat: ✅

Whereby (formerly Appear.in)

Used to be my favourite video-conferencing tool.

No account required: 🚫
No organization required: ✅
Open Source: 🚫
Self Hostable: 🚫
Screen Sharing: ✅
Chat: ✅

Slack

Needs no introduction. A chat app that also has voice and video features.

No account required: 🚫
No organization required: 🚫
Open Source: 🚫
Self Hostable: 🚫
Screen Sharing: ✅
Chat: ✅

Microsoft Teams

Microsoft's answer to Slack. Needs your organization to have a Microsoft account and the Teams feature activated.

No account required: 🚫
No organization required: 🚫
Open Source: 🚫
Self Hostable: 🚫
Screen Sharing: ✅
Chat: ✅

Whiteboarding

Excalidraw

An excellent tool that makes it quite easy to draw diagrams or simple drawings.

Diagrams: ✅
Live collaboration: ✅
Free form: 🚫

2019 in Tech

Andri — Sun, 29 Dec 2019 00:00:00 +0000

Every year, or that was my plan back in 2013; I do a review of what technology I've been using during the year and reflect on my experiences.

This year has been fun in many ways. I have been creating apps, websites, microservices and APIs.

React

When I started playing with React 4 years ago, Angular was insanely popular in Denmark and everyone was looking at me funny. There was no standard tool for anything and every week there were major version changes in the stack.

I heard this somewhere:

People use Angular because of Google. People use React even if Facebook made it.

Today, I look back on React with fondness. I started making web-sites back when we had .shtml files and .php3. But then something changed. We as an industry started using the browser for more than rendering markup and then we had a few broken years.

The core problem, as I see it; is that we no longer have enough information to fully generate web-pages on the server anymore. The users expect a certain amount of dynamic functionality and while it isn't hard to add small snippets, this quickly becomes unmaintainable.

Some people realized this and tried to combine one templating language for both server and client. But as soon as the initial data started to change, there were issues.

React changed all of this. We now have one language to describe UI as a function of props and state. I can't imagine doing UI any other way. It might be Svelte or Vue in the future; but components are here to stay.

Go, the programming language

I'm sure some people consider me an early adopter, but I had my eye on Go for a very long time before I started using it professionally 3 years ago.

It's funny how I can be excited for a language that has very few features, roughly 6 years after I first started playing around with it.

It feels like being on the same team. We all use the same formatting, the standard library usually has the functionality we need and there is less friction when working with others. This contributes to what I consider to be a very productive language.

In 2019 I have created GraphQL API's, microservices and small tools and Go is by far my favourite backend language.

TypeScript

In May, I joined a new company and they were doing all of their new code in TypeScript. The project I joined has alwaysStrict=true and I hated it very much. Everything I was used to do in JavaScript was now something that the compiler refused to make work. I spent 2/3 of the time defining types for something I thought was obvious.

Later, I moved to another project where we also did TypeScript with React, but without strict-mode this time. This time, it clicked for me. It helped that I had 6 months experience with TypeScript at the time, but being free to use TypeScript without the feeling that I was being used by it.

Bottom line. Would I use TypeScript again? Yes. Being able to define types for props and state really speeds up development. Strict-mode? It's too verbose and results in some very ugly code without any good reason.

Immer

I first heard about Immer over at React Europe 2018, in the context of being "better than Immutable.js", but I had absolutely no intention of doing anything, that changed all of my state data to some weird types again. So I ignored it.

Then, I was dealing with some internal state in React that included messing with items of an array. Arrays in React state is probably the most annoying part of React. It feels verbose and hard to read at the same time. This immutable dance with arrays is painful; even in modern JS or TS.

Immer is lovely. It's a function that takes the current state, gives you a "draft-state" that you can mutate. Then it produces a new output and returns it. The best part

So you can simply do

import produce from 'immer'
const [animals, setAnimals] = useState(['Cock', 'Raven', 'Dog', 'Pig']);
setAnimals(produce(draftAnimals => {
    draftItems[0] = 'Rooster'
}))

This will produce a new array with the changes applied and React will render the changes as expected.

Immer is a must-have tool in your React toolbox.

React Native

I used to work at a company that does mobile-payments for parking. They had an app that was once a nice Xamarin application that worked on iOS and Android. But after 2 years of out-sourcing the app was unstable and unmaintainable (we spent 4 months on just making it stop crashing, without luck). I was responsible for the project and I had a feeling in my stomach that this was probably never going to be ok unless we'd invest an entire team into this.

I had tried playing with React Native when 2 years earlier, when they released initial support for Android, but it didn't feel mature at all. So, I decided to give it another shot and spent a few evenings and a weekend making a simple proof-of-concept in React Native. Long story short: I pitched it to my boss and we created a new app in React Native and Expo.

Expo was a really positive experience for me. I didn't have a big team, so being able to skip the native part of React Native was a clear win for me. All of the libraries we needed were already in Expo, so it was a no-brainer.

So when I started on a new React Native project this year, where we had to do all of the native parts ourselves, I was a bit scared. To my surprise, it wasn't as hard as I thought. I managed to do some minor changes to a Swift library without knowing anything about Swift or Xcode with help from my co-workers. And making the native bits talk to the JS bits was quite simple too.

All in all, a positive experience. Would do again.

For 2020?

I'm starting the year with by joining an existing React Native team and I'm looking forward to help bring the project forward.

So here's hoping for another year filled with good technology. I wish you a happy new year!

Announcing gatsby-plugin-social-cards

Andri — Sun, 15 Sep 2019 00:00:00 +0000

Ever seen those images shown next to posts on Twitter, Slack or Facebook? Ever wonder where they come from? Me too!

This plugin will create automatic cards for your (ReMark) at build-time.

Announcing

I am ready to announce my new Gatsby plugin, gatsby-plugin-social-cards.

There are a few alternatives for Gatsby social-cards, but I wanted to try making these cards with SVG, React and the Sharp library that most Gatsby sites already depend on.

Currently this plugin resides within my site, but if there is interest in it, I'll move it into its own repo. Contact me on Twitter if you have any issues.

Features

Backgrounds

You can put a cover frontmatter on your post, and we'll use that. Otherwise, we'll use a default-background that you can specify or if that fails, we'll use a fallback one.

Designs

There are two design available now, "card" and "default". But we can expand that later.

Author image

If specified, an author image is shown on the image. That is also configurable.

Custom author-image

The author image can be ommitted if it's not wanted, or customized in the configuration.

Install

yarn add gatsby-plugin-social-cards
# or npm install --save gatsby-plugin-social-cards

How to use

Please see the README for how to use.

Slim Docker images for your Go application

Andri — Fri, 06 Sep 2019 00:00:00 +0000

How to build a slim Docker container for your Go application using multi-stage images.

I'm using Go 1.13 and the community module proxy to build the binary and Alpine as a base image. It adds a user and group instead of running as root.

Dockerfile

Be sure to replace "cmd/server/server.go" with your main file.

FROM golang:1.13 as builder

WORKDIR /app
COPY . /app
RUN CGO_ENABLED=0 GOOS=linux GOPROXY=https://proxy.golang.org go build -o app cmd/server/server.go

FROM alpine:latest
# mailcap adds mime detection and ca-certificates help with TLS (basic stuff)
RUN apk --no-cache add ca-certificates mailcap && addgroup -S app && adduser -S app -G app
USER app
WORKDIR /app
COPY --from=builder /app/app .
ENTRYPOINT ["./app"]

I hope this is helpful. I mostly blogged this to document it for myself.

Making a Gatsby site from Meetup event data

Andri — Sun, 25 Aug 2019 00:00:00 +0000

As part of my talk preperation for Aalborg Frontend Meetup, I was going to do a walkthrough of a new Gatsby site and use gatsby-source-meetup to import the upcoming events.

Imagine my surprise, when I discovered that Meetup had stopped issuing API keys.

gatsby-source-ical

Gatsby has a wonderful collection of source plugins, and one of them happens to be gatsby-source-ical. I'll hand it to Meetup support; they did send me a useful link that indicated they I may not need an API, since they have a calendar feed available.

Finding the calendar export

First, find your group on Meetup, click "Events", "Calendar" and at the bottom there are feed links (if you're logged in).

For our group, the URL is: "https://www.meetup.com/Aalborg-Frontend/events/ical/"

Add the plugin

yarn add gatsby-source-ical

gatsby-config.js

// In your gatsby-config.js
module.exports = {
    plugins: [
        // You can have multiple instances of this plugin
        // to read source nodes from different remote files
        {
            resolve: `gatsby-source-ical`,
            options: {
                name: `events`,
                url: `https://web-standards.ru/calendar.ics`
            }
        }
    ]
}

Query the data

{
    allIcal {
        edges {
            node {
                start
                end
                summary
            }
        }
    }
}

Why?

I put this together in case someone else is creating a meetup website with Gatsby and got frustrated with the API change.

Choosing a programming language

Andri — Sun, 04 Aug 2019 00:00:00 +0000

Imagine that you're a CTO, a Tech Lead or someone that has to make an early technical decision that will effect the company for years to come. What programming language do you choose?

The cost of abstraction

Systems tend to have two types of complexity. Complexity from the business-domain, and complexity from the technical-domain. In my experience, the technical-complexity takes up more room than it should.

There are, of course brilliant programmers out there, who manage complexity really well, regardless of what language they code in. But people have different skill-sets, and a great team has many different types of members.

Readability

When I took my first programming job, I was looking forward to "writing some awesome code". But, writing code wasn't my primary job. Reading it was.

There are some tools that help manage this. Coding-standards, linters, code-formatters all try to make reading each other's code easier.

But what if every feature of our programming language, comes with a cost? If you give 10 programmers the same task, how similar would the implementations be? I argue that if you get many different types of implementations, then your programming language is too complex.

To be productive at writing code, we also need to be productive at reading it.

Dependencies

At a certain point we need something from our programming language that isn't a language-feature, but a library feature. We need to open a file, parse HTTP headers, decode JSON, or talk to databases.

Every dependency we add to our programs comes with a price, even if the code is free. What if the maintainer get's hit by a bus? What if the maintainer becomes malicious? What if there's a critical security bug?

Why did PHP win over Perl for web-development in the late 90's? I'm willing to bet it was because PHP's standard-library was so good, and well documented.

Another approach is Javascript's NPM where there is no standard library. Every little thing has it's own package. The advantage has been that the community of JS really stepped up and you can find a package for any thing you can imagine. The disadvantage is that with nested dependencies, we have no idea on what code we're actually depending on. There hasn't been a NPM apocalypse yet, just the story of left-pad and an occasional bitcoin miner.

I think this a no-brainer. If we're building something that needs to be reliable for years to come, then we need a standard library that has security updates and advisories when shit happens. And remember, that we don't include dependencies, we adopt them.

Hiring people

At some point, we all need help. And that help usually comes to us by means of hiring people. If it wasn't for this point, I might be programming in Erlang, Elixir and Elm right now. I think these languages are extremely interesting, and not just because they all start with the letter E.

But reality sets in, and we need a pool of people to hire from, that either know your tech-stack or will have an easy time learning it.

The exception is when an organization has decided to invest in something, has a resources to teach newcomers and is willing to pay premium for talent.

Performance

Performance is important. But, aim for "good enough" instead of "perfect". "Perfect" will almost certainily have a downside in other parts of this post.

Does your project require some hard-core performance? Systems that have a "hard" real-time requirement might limit your choices. "Soft" real-time is still doable in almost any language.

We once programmed in a world of a single CPU. That world is no more. Please pick a langauge that handles multiple executions well.

A practical example would be a checkout-API call on a webshop. The customer has submitted a payment token, an order, and an email we need to verify. None of these things depend on each other, but all three things need to complete to succeed.

Developer Experience

To me, a good developer experience consists of the following things.

The code is easy to read and understand.
The language is supported in my editor (or IDE) of choice.
There is a good, reliable debugger available.
Easy to write and run tests, both locally and in build-systems.

Final words

We try to plan for the future, but nobody really knows it will bring. So, aim for the next 5 years and then time will tell.

What language would you pick, and why?

Credits

Big thanks to @NinaLimpi at Undraw for the wonderful illustrations.