Forem: David R. Myers

Install and use multiple Bundler versions

David R. Myers — Sun, 12 Jun 2022 01:33:52 +0000

As of Bundler v2.3 (when using RubyGems v3.3+), Bundler will automatically use the BUNDLED WITH version specified in Gemfile.lock when running the bundle install command. If the specified version of Bundler is not available, it will be downloaded and installed.

$ bundler -v
Bundler version 2.3.15

$ tail -2 ./example/Gemfile.lock
BUNDLED WITH
   2.1.4

$ (cd ./example && bundler -v)
Bundler version 2.1.4

If you can't upgrade to v2.3, there is a workaround. You will have to install the correct version of Bundler manually, but then you can use the _version_ syntax.

$ bundler _2.1.4_ -v
Bundler version 2.1.4

A Practical Cheat Sheet for CSS Flexbox (Containers)

David R. Myers — Tue, 27 Jul 2021 17:58:31 +0000

I originally posted this Flexbox cheat sheet on Twitter, but the response was so positive that I decided to write it up here too! We will cover the (in my opinion) most common scenarios for Flexbox.

If you just want the cheat sheet (pictured above), you can download it here!

Horizontal Alignment
- Anchor group to the center (horizontally)
- Anchor group to the right side
- Add space around all items
- Add space between all items
Vertical Alignment
- Anchor group to the center (vertically)
- Anchor group to the top
- Anchor group to the bottom
Perfect (Vertical and Horizontal) Center Alignment
Content Direction
- Reverse the flow of content (horizontally)
- Flow content vertically instead of horizontally
- Reverse the flow of content (vertically)
Content Wrapping
- Wrap content to next lines (flow down)
- Wrap content to previous lines (flow up)
Default Behavior

Horizontal Alignment

You can align items horizontally as a group or individually.

Anchor group to the center (horizontally)



.container {
  display: flex;
  justify-content: center;
}

Anchor group to the right side



.container {
  display: flex;
  justify-content: flex-end;
}

Add space around all items



.container {
  display: flex;
  justify-content: space-around;
}

Add space between all items



.container {
  display: flex;
  justify-content: space-between;
}

Vertical Alignment

You can align items vertically as a group.

Anchor group to the center (vertically)



.container {
  display: flex;
  align-items: center;
}

Anchor group to the top



.container {
  display: flex;
  align-items: flex-start;
}

Anchor group to the bottom



.container {
  display: flex;
  align-items: flex-end;
}

Perfect (Vertical and Horizontal) Center Alignment

You can combine selectors to get your desired layout. Perfect centering is a breeze with Flexbox.



.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Content Direction

You can change the overall content flow (column or row), and you can even change the arrangement of content.

Reverse the flow of content (horizontally)



.container {
  display: flex;
  flex-direction: row-reverse;
}

Flow content vertically instead of horizontally



.container {
  display: flex;
  flex-direction: column;
}

Reverse the flow of content (vertically)



.container {
  display: flex;
  flex-direction: column-reverse;
}

Content Wrapping

By default, all items are put on a single line.



.container {
  display: flex;
}

Wrap content to next lines (flow down)



.container {
  display: flex;
  flex-wrap: wrap;
}

Wrap content to previous lines (flow up)



.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Default Behavior

The default behavior of Flexbox will...

Treat the container as block (full width)
Left align all items
Stretch each item's height to fit the container
Fit all items on a single line



.container {
  display: flex;
}

Thanks for taking the time to check this out! If you think something is missing or you just want to say hello, please leave a comment below! ✌️

A Guide to Customizing the Zsh Shell Prompt

David R. Myers — Thu, 11 Mar 2021 21:13:23 +0000

The goal of this article is to teach you just enough about the shell prompt to make some helpful customizations.

What is the shell prompt?

The prompt is the bit of text that shows up in our shells to indicate that we can interact with them. The prompt usually gives us some details about the current shell session such as username, machine name, current directory, and some kind of prompt termination token. An example might look something like this.

david@macbook /tmp $

All of this information can be customized through the shell's prompt strings. Each shell has specific escape sequences that must be used. This just means that we have to use different tokens to represent things such as username, color formatting, etc. For the purposes of this article, we will be using Zsh, and we can confirm that is our current shell by running this.

echo $0 # /bin/zsh

Introducing PS1

The primary prompt string is stored in a variable called PS1. There are five prompt strings in total, so the trailing number denotes its responsibility. The primary prompt string is the one that is printed to stdout when the shell is waiting for a new command, and it is therefore the one we probably see most frequently. Unlike a typical variable, these prompt strings undergo expansion every time the prompt is displayed. This is what allows us to update the displayed path after changing directories, for example. A PS1 string might look something like this.

PS1='%n@%m %/ $ ' # david@macbook /tmp $

We will dive into this more below.

Breaking it down

The first thing to note is the use of single quotes ''. We can use double quotes, but we have to remember to escape all of the expressions that we want to re-evaluate each time the prompt is displayed. Double quoted strings undergo normal expansion and substitution before being stored in a variable, so evaluation would only happen once per shell session rather than once per prompt. It doesn't make a difference for our simple example above, but it starts to matter when we introduce things like variables and shell expressions. More on that later.

Next, let's take a look at each of the escape sequences in our prompt string. The first one is %n, and it represents our username. The next escape sequence is %/, and it represents the current directory. For these examples, we will assume the username is david and the current directory is /tmp. For more on Zsh prompt expansion, check out the docs.

How do we customize it?

We are going to build our prompt from scratch, so let's start with some basic information. We talked about the PS1 variable above, but we didn't talk about where it needs to be defined. For Zsh, we will use ~/.zshrc to set the PS1 variable. This file is loaded at the beginning of every shell session, so it will ensure our configuration is respected for all sessions and not just the current one. Every shell has a default prompt string, and we can view the raw source by echoing the PS1 variable (e.g. echo $PS1). While we can build on top of the existing one, for the purposes of learning, we are going to build ours from scratch. Add the following to your Zsh config.

# ~/.zshrc
PS1='$ ' # $

This prompt does its primary job of telling us the shell is ready for input, but we can make it much more useful. Let's start by adding our username %n, our machine name %m, and our current directory %/.

# ~/.zshrc
PS1='%n@%m %/ $ ' # david@macbook /tmp $

That's looking a lot more like what we might expect from a typical shell prompt.

Adding some color

Now that we have a basic prompt, we can spice it up with some color. To change the color of our prompt, we need to use a new type of sequence. Many modern terminals support 256 colors, and while some of these can be referenced by name, most will need to be referenced by their color code - ranging from 0 to 255. Colors are applied via start and stop sequences indicated by %F{} and %f, respectively. Let's put this into practice by coloring our current directory red.

# ~/.zshrc
PS1='%n@%m %F{red}%/%f $ ' # david@macbook /tmp $

Adding the current Git branch

Another useful piece of information which is not typically displayed by default is version control. Not all directories are version controlled, so this info will only show up when it is relevant. For this guide, we will use Git, but Zsh actually does support a few others. We are going to add the branch name of the current repo to our prompt, and in order to do this, we need to cover a few details about vcs_info . It is a framework that ships with Zsh to gather information from various version control systems.

# ~/.zshrc
autoload -Uz vcs_info # enable vcs_info
precmd () { vcs_info } # always load before displaying the prompt

This block is what actually enables and autoloads vcs_info before each rendering of the shell prompt. It stores the data in a new variable called vcs_info_msg_0_. If we use this variable in our prompt string, it will display some basic info such as our version control system and the current branch (e.g. (git)-[main]-). To format this info, we can use zstyle like so.

# ~/.zshrc
zstyle ':vcs_info:*' formats ' %s(%b)' # git(main)

The zstyle format string has its own tokens that are expanded in the prompt string. The first token %s represents the current version control system. The next token %b represents the current branch name. For more information on available tokens, check out the docs. Finally, we can combine everything we've learned and add a bit of color to the branch name.

# ~/.zshrc
autoload -Uz vcs_info # enable vcs_info
precmd () { vcs_info } # always load before displaying the prompt
zstyle ':vcs_info:*' formats ' %s(%F{red}%b%f)' # git(main)

PS1='%n@%m %F{red}%/%f$vcs_info_msg_0_ $ ' # david@macbook /tmp/repo (main) $

Final result

To summarize, we have learned how to include specific information about our system and shell session, how to display version control status information, and how to apply color to these various pieces of information.

Closing

I hope this article helped shed some light on the shell prompt syntax. It was a lot of fun to write while experimenting with my own prompt (which you can see at the top of this page). As a final note, I would love to share octo - a hackable, offline-first markdown editor for notes, code snippets, and writing that runs entirely in-browser. It's free and open source, and working on it gives me a lot of ideas and inspiration for the articles I write. Thank you, and happy coding. ✌️

A Guide to Web Development on the Windows Subsystem for Linux (WSL)

David R. Myers — Sat, 02 Jan 2021 20:59:33 +0000

This guide assumes you already have the Windows Subsystem for Linux (WSL) 2 installed. If that is not the case, I highly recommend you read through my previous article, A Guide to Installing the Windows Subsystem for Linux (WSL) and Windows Terminal, first. We are going to cover some of the most common web development tools that we need to get up and running, but there might be something missing. If that is the case, please leave a comment below! While I am using my own experience as a foundation, I am happy to amend this article as needed to make sure we cover the most common tools.

Update Linux package repositories

Make sure the Linux packages are up-to-date.

sudo apt update && sudo apt upgrade -y

Git

Make sure Git is installed and up-to-date.

sudo apt install -y git

Sign your commits with GPG

Make sure GPG is installed and up-to-date.

sudo apt install -y gnupg

Generate a GPG key

To use GPG signing with Git, you will need a GPG keypair. If you already have one, you can skip to the next step. This command will prompt you for the settings of your new key. If you do not know what to choose for the key settings, just go with the defaults. The two things you will need to provide are your name and your email.

# generate a new gpg key
gpg --full-generate-key

Configure Git to sign commits

This information is based on GitHub's guide. To list and highlight your available signing keys, run the following command.

gpg --list-secret-keys --keyid-format long | grep -A 2 ^sec | grep -A 2 -P "(?<=/)\w+"

Copy the highlighted part of your desired key (on the sec line after the /) for the next step. The terminal output should look something like this.

Now you need to tell Git about your signing key and enable commit signing.

# replace `<key>` with the key copied above
git config --global user.signingkey <key>

# enable commit signing
git config --global commit.gpgsign true

GitHub

GitHub is the most common platform for code hosting, and it is the one I use. That said, this information should be applicable to other platforms as well.

SSH

If you prefer to use SSH for GitHub (like me), you can generate a new SSH keypair and copy the public key to your clipboard using a Windows utility called clip.exe. Run the following commands to generate a new SSH keypair and copy the public key to your clipboard. Make sure you update the fake email below to match your actual email. If you decide to change the name of your generated SSH key, make sure to update the second command with the appropriate file name (id_ed25519 is the default).

# generate the ssh keypair
ssh-keygen -t ed25519 -C youremail@provider.example

# copy the public key
cat ~/.ssh/id_ed25519.pub | clip.exe

You can then upload your public key to GitHub via your settings page under the SSH keys section.

GPG

If you generated a GPG keypair in the Git section above, you can export the public key for use in GitHub or any other provider where you want your commits to show up as verified. Run the following command to copy the public key to your clipboard. Make sure you update the fake email below to match your actual email.

# copy the public key
gpg --export --armor youremail@provider.example | clip.exe

You can upload your public key to GitHub via your settings page under the GPG keys section.

Node / NPM

We have a couple of options available for installing Node and NPM. If you need to switch between multiple versions, I highly recommend using NVM. If you just want the latest version available for the Ubuntu distribution of Linux (without an easy method of switching), skip down to the Apt section below.

NVM

These instructions were pulled from the NVM README. Feel free to check out the instructions there if you want more details. Otherwise, run the following commands to get set up with the latest version of Node and NPM.

# install nvm (latest version at time of writing)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

# reload the .bashrc file
source ~/.bashrc

# install the latest version of node
nvm install node

Apt

This installs Node from the Ubuntu package repositories. The latest version available through Ubuntu might not be the latest version available through other means.

sudo apt install -y nodejs

Docker

Download and install Docker Desktop for Windows. To enable Docker for WSL 2, make sure the Install required Windows components for WSL 2 option is checked. Log out and log back in to finish the installation.

Text Editor

Using a traditional text editor with the WSL will require some extra configuration depending on the one you choose.

Atom

Launching Atom from within WSL is not as simple as you might think. The atom binary needs to be executed in a Windows cmd context, and it needs the Windows path of the specified directory instead of the Linux path. I created a little helper script to do exactly that. Download it to the /usr/local/bin directory and make it executable by running the following commands.

# download the atom script
sudo curl -o /usr/local/bin/atom https://gist.githubusercontent.com/voraciousdev/1a1473ea36906c8f6830a17701e7fd21/raw/b8c697ca810022f2fc4be9eef3f72a54c6073b7e/atom.sh

# make it executable
sudo chmod +x /usr/local/bin/atom

Now the atom command can be run from within WSL to open the app on Windows. It is worth mentioning that this does not implement full atom argument support at the moment. This script only accepts a single, optional path argument for the time being. Here are a few examples of how to use it.

# open the current directory
atom .

# open another directory
atom ~/workspace/project

# open atom without specifying a project
atom

VS Code

Download and install VS Code. When you open VS Code for the first time, it will prompt you to install recommended extensions. One of the recommended extensions will be Remote Development. Here are a few examples of how to use the new code command from the WSL terminal.

# open the current directory
code .

# open another directory
code ~/workspace/project

# open vscode without specifying a project
code

Closing

If you think something is missing from this article, please let me know. I am happy to update it with other common web dev tools. As always, thank you for reading!

A Guide to Installing the Windows Subsystem for Linux (WSL) and Windows Terminal

David R. Myers — Tue, 29 Dec 2020 05:00:20 +0000

As a developer that typically works on Mac or Linux, you will be disappointed with the out-of-the-box terminal in Windows. Lucky for us, Windows supports a fairly smooth Linux integration called the Windows Subsystem for Linux (or WSL for short). If you are unfamiliar with it, Microsoft has a pretty concise explanation:

The Windows Subsystem for Linux lets developers run a GNU/Linux environment -- including most command-line tools, utilities, and applications -- directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.

This guide is meant to serve as a quick reference for setting it up yourself (as I recently had to do).

Overview

This guide is not a comprehensive resource for all available options. Instead, I have made some assumptions to help you get it set up quickly.

You do not want to join the Windows Insider Program and install a preview build of Windows.
You do want to upgrade to WSL 2.
You do want to use Ubuntu 20.04 LTS as your Linux distribution.
You do want to use the Windows Terminal app.

A note about WSL 2 performance

While WSL 2 is more performant than WSL 1 in most cases, there is a specific scenario where it can actually perform worse than WSL 1. This occurs when you are working on files across file systems. Specifically, you will want to make sure you store your project files on the Linux file system instead of the Windows file system (assuming you are using Linux utilities). Microsoft explains this in further detail on Microsoft Docs.

Installation

Let's get started!

Enable WSL 1

We have to first enable WSL 1 before we can upgrade to WSL 2. In PowerShell (as an administrator), run the following command.

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Enable the Virtual Machine Platform feature

To enable the Virtual Machine Platform feature (required for WSL 2), run the following command in PowerShell (as an administrator).

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Restart your machine

In order to continue the installation of WSL 1 and 2, you will need to restart your machine. This can be done by running the following in PowerShell (as an administrator).

Restart-Computer

Update the Linux kernel

The Linux kernel update package is required to upgrade to WSL 2. To download and run the update, I recommend moving into a different directory since the administrator PowerShell dumps you into the system32 directory. You can accomplish this with the following command in PowerShell (as an administrator).

cd ~ ; wget https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi -outfile update.msi ; .\update.msi

You will be prompted to finish the WSL update.

Set WSL 2 as the default

In PowerShell (as an administrator), run the following command to set WSL 2 as the default.

wsl --set-default-version 2

Install Ubuntu 20.04 LTS

Get Ubuntu 20.04 LTS from Microsoft. You will need to click the "Get" link to open the Microsoft Store. From there, you can click "Install" to download and install the Ubuntu distribution.

Launch Ubuntu

The Ubuntu 20.04 LTS app should now be easily searchable in your list of Windows apps. Launch the app to finish setup. You will need to provide a username and password.

Note: If you encounter an error related to virtualization when launching the app, you may need to enable virtualization at the BIOS level.

Install Windows Terminal

Get Windows Terminal from Microsoft. You will need to click the "Get" link to open the Microsoft Store. From there, you can click "Install" to download and install the app. For more information on Windows Terminal, head over to Microsoft Docs.

Set Ubuntu as the default shell

To set Ubuntu as the default terminal in Windows Terminal, you will need to edit the settings.json file. To open this, click the dropdown arrow next to the new tab button and click on "Settings" near the bottom of the menu that pops up. The file will look something like this (unnecessary info has been removed).

{
  "defaultProfile": "{a-random-uuid-for-powershell}",
  "profiles": {
    "list": [
      {
        "guid": "{a-random-uuid-for-powershell}",
        "name": "Windows PowerShell"
      },
      {
        "guid": "{a-random-uuid-for-ubuntu}",
        "name": "Ubuntu-20.04"
      }
    ]
  }
}

You just need to update the defaultProfile property with the UUID for Ubuntu and save the file.

Use the Linux file system as your default

When you launch Windows Terminal, you will be presented with the Ubuntu shell, but you will be dropped into the Windows file system. As mentioned above, WSL 2 works best when you use the Linux file system. To change your default directory to your Linux user's home directory, you just need to run the following command in the Ubuntu shell (your new default for Windows Terminal).

echo 'cd ~' >> ~/.bashrc

You can change ~ to something else if you would like, but the home directory is usually a safe place to land in.

Closing

While this isn't necessarily a short article, I believe it is pretty concise. It aggregates information from a few sources to hopefully get you up and running with WSL 2 and Windows Terminal as quickly as possible.

An Introduction to vue-markdown-editor

David R. Myers — Mon, 28 Dec 2020 21:50:55 +0000

One of the biggest challenges I faced while building Octo was the markdown editor. When it comes to implementing a markdown text input, there is usually one way to go about it: a plain text input field with an optional preview mode. This approach obviously works, but the experience can be a bit clunky when writing larger bodies of content.

In this article, we will cover an alternative approach that - while being a bit heavier - offers a smoother user experience for the author. This will be accomplished with a standalone Vue component called vue-markdown-editor (MIT-licensed) which was extracted from the core of Octo. This component acts as a plain text input, but it renders headers, syntax highlighting, and images in place. This is especially helpful for overall readability and catching syntax errors without interrupting focus by switching between edit and preview panels. Feel free to try it out at octo.app!

Create a new Vue project

To kick things off, we need to create a new Vue project. We will create a bare project with the -b flag and use the default presets with the -d flag. The default preset uses yarn, but the snippets below will include the corresponding npm commands as well.

# create and open the project
vue create -b -d playground && cd playground

Install the editor component

Next, we will install the Markdown editor component.

# yarn (the default preset)
yarn add @voraciousdev/vue-markdown-editor

# npm
npm install --save @voraciousdev/vue-markdown-editor

Implement the editor

We need to import, register, and then use the new component. This is no different than importing another component from a relative path. Note the use of v-model on the MarkdownEditor component. This is the simplest way to bind our own data to the markdown editor.

<!-- src/App.vue -->
<template>
  <div class="app">
    <h1>Playground</h1>
    <!-- use the registered component -->
    <MarkdownEditor v-model="markdown" class="editor" />
  </div>
</template>

<script>
// import MarkdownEditor from the package
import MarkdownEditor from '@voraciousdev/vue-markdown-editor'

export default {
  name: 'App',
  components: {
    // register the component as MarkdownEditor
    // this step is what allows us to reference <MarkdownEditor/> in the template
    MarkdownEditor,
  },
  data() {
    return {
      markdown: '# Hello, World!\n\nHow are you today?',
    }
  },
}
</script>

<style>
body {
  background-color: #111;
  color: #aaa;
  font-family: sans-serif;
}

.app {
  margin: auto;
  max-width: 50rem;
  width: 100%;
}

.editor {
  background-color: #050505;
  border-radius: 0.25em;
  padding: 1em;
}
</style>

Run the app

All we have to do now is run the app and play around with the editor!

# yarn (the default preset)
yarn serve

# npm
npm run serve

Final result

This component was designed to be as simple to use as a textarea. Content is kept in plain text, so we can copy from or paste into the editor whenever we want!

Closing

This example project is on GitHub.

All in all, this article was pretty simple, but I really wanted to show off this new Vue component. It's open source and now available for anyone to use. I will continue to work on and improve this component because it powers my open source Markdown editor Octo (which I used to write this article). Both are MIT-licensed and available for anyone to use. I would greatly appreciate any feedback, and I hope you have a fantastic day!

A Practical Guide to the Web Cryptography API

David R. Myers — Wed, 09 Sep 2020 23:46:06 +0000

Client-side encryption is a feature I had wanted to implement in octo for a while now. When it finally came time to tackle it, I was surprised at the sparse real-world examples on the topic. The documentation on MDN is robust, but it requires a lot of jumping around to individual method APIs. I hope this article is helpful for anyone out there looking for guidance.

Note: The Web Cryptography API is asynchronous, so I use the async/await syntax in this article for concision.

SubtleCrypto

The Web Cryptography API was initially exposed through a nonstandard interface called Crypto, but it was later standardized through a new interface called SubtleCrypto. This article will focus on the public SubtleCrypto interface exposed at window.crypto.subtle.

Encryption

For the purposes of this article, we are going to use a symmetric algorithm. The public-key (asymmetric) strategy has a hard limit on how much data it can encrypt based on key size: (keyBits / 8) - padding. Symmetric encryption uses the same key to encrypt and decrypt data, and it does not have the same constraint. There are a few supported algorithms, but the recommended symmetric algorithm is AES-GCM for its authenticated mode.

Generating a Key

To start things off, we need to generate a symmetric key.

// https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/generateKey
const generateKey = async () => {
  return window.crypto.subtle.generateKey({
    name: 'AES-GCM',
    length: 256,
  }, true, ['encrypt', 'decrypt'])
}

Encoding Data

Before we can encrypt data, we first have to encode it into a byte stream. We can achieve this pretty simply with the TextEncoder class. This little utility will be used by our encrypt function later.

// https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder
const encode = (data) => {
  const encoder = new TextEncoder()

  return encoder.encode(data)
}

Generating an Initialization Vector (IV)

Simply put, an IV is what introduces true randomness into our encryption strategy. When using the same key to encrypt multiple sets of data, it is possible to derive relationships between the encrypted chunks of the cipher and therefore expose some or all of the original message. IVs ensure that repeating character sequences in the input data produce varying byte sequences in the resulting cipher. It is perfectly safe to store IVs in plain text alongside our encrypted message, and we will need to do this to decrypt our message later.

// https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues
const generateIv = () => {
  // https://developer.mozilla.org/en-US/docs/Web/API/AesGcmParams
  return window.crypto.getRandomValues(new Uint8Array(12))
}

We never want to use the same IV with a given key, so it's best to incorporate automatic IV generation into our encryption strategy as we will do later.

Encrypting Data

Now that we have all of our utilities in place, we can implement our encrypt function! As mentioned above, we will need it to return both the cipher and the IV so that we can decrypt the cipher later.

// https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt
const encrypt = async (data, key) => {
  const encoded = encode(data)
  const iv = generateIv()
  const cipher = await window.crypto.subtle.encrypt({
    name: 'AES-GCM',
    iv: iv,
  }, key, encoded)

  return {
    cipher,
    iv,
  }
}

Transmission and Storage

Most practical applications of encryption involve transmission or storage of said encrypted data. When data is encrypted using SubtleCrypto, the resulting cipher and IV are represented as raw binary data buffers. This is not an ideal format for transmission or storage, so we will tackle packing and unpacking next.

Packing Data

Since data is often transmitted in JSON and stored in databases, it makes sense to pack our data in a format that is portable. We are going to convert our binary data buffers into base64-encoded strings. Depending on your use case, the base64 encoding is absolutely optional, but I find it helps make the data as portable as you could possibly need.

// https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
const pack = (buffer) => {
  return window.btoa(
    String.fromCharCode.apply(null, new Uint8Array(buffer))
  )
}

Unpacking Data

Once our packed data has been transmitted, stored, and later retrieved, we just need to reverse the process. We will convert our base64-encoded strings back into raw binary buffers.

// https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
const unpack = (packed) => {
  const string = window.atob(packed)
  const buffer = new ArrayBuffer(string.length)
  const bufferView = new Uint8Array(buffer)

  for (let i = 0; i < string.length; i++) {
    bufferView[i] = string.charCodeAt(i)
  }

  return buffer
}

Decryption

We're in the home stretch! The last step of the process is decrypting our data to see those sweet, sweet secrets. As with unpacking, we just need to reverse the encryption process.

Decoding Data

After decrypting, we will need to decode our resulting byte stream back into its original form. We can achieve this with the TextDecoder class. This utility will be used by our decrypt function later.

// https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder
const decode = (bytestream) => {
  const decoder = new TextDecoder()

  return decoder.decode(bytestream)
}

Decrypting Data

Now we just need to implement the decrypt function. As mentioned before, we will need to supply not just the key but also the IV that was used in the encryption step.

// https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt
const decrypt = async (cipher, key, iv) => {
  const encoded = await window.crypto.subtle.decrypt({
    name: 'AES-GCM',
    iv: iv,
  }, key, cipher)

  return decode(encoded)
}

Putting it into Practice

Let's write an app! Now that all of our utilities are built, we just need to use them. We will encrypt, pack, and transmit our data to a secure endpoint. Then, we will retrieve, unpack, and decrypt the original message.

const app = async () => {
  // encrypt message
  const first = 'Hello, World!'
  const key = await generateKey()
  const { cipher, iv } = await encrypt(first, key)

  // pack and transmit
  await fetch('/secure-api', {
    method: 'POST',
    body: JSON.stringify({
      cipher: pack(cipher),
      iv: pack(iv),
    }),
  })

  // retrieve
  const response = await fetch('/secure-api').then(res => res.json())

  // unpack and decrypt message
  const final = await decrypt(unpack(response.cipher), key, unpack(response.iv))
  console.log(final) // logs 'Hello, World!'
}

That's all there is to it! We have successfully implemented client-side encryption.

As a final note, I just want to share octo, a writing app for developers, one more time. It's free, it's open source, and I would absolutely love it if you checked it out. Thanks, everyone, and happy coding. ✌️

Forem: David R. Myers

Install and use multiple Bundler versions

A Practical Cheat Sheet for CSS Flexbox (Containers)

Table of Contents

Horizontal Alignment

Anchor group to the center (horizontally)

Anchor group to the right side

Add space around all items

Add space between all items

Vertical Alignment

Anchor group to the center (vertically)

Anchor group to the top

Anchor group to the bottom

Perfect (Vertical and Horizontal) Center Alignment

Content Direction

Reverse the flow of content (horizontally)

Flow content vertically instead of horizontally

Reverse the flow of content (vertically)

Content Wrapping

Wrap content to next lines (flow down)

Wrap content to previous lines (flow up)

Default Behavior

A Guide to Customizing the Zsh Shell Prompt

What is the shell prompt?

Introducing PS1

Breaking it down

How do we customize it?

Adding some color

Adding the current Git branch

Final result

Closing

A Guide to Web Development on the Windows Subsystem for Linux (WSL)

Update Linux package repositories

Git

Sign your commits with GPG

Generate a GPG key

Configure Git to sign commits

GitHub

SSH

GPG

Node / NPM

NVM

Apt

Docker

Text Editor

Atom

VS Code

Closing

A Guide to Installing the Windows Subsystem for Linux (WSL) and Windows Terminal

Overview

A note about WSL 2 performance

Installation

Enable WSL 1

Enable the Virtual Machine Platform feature

Restart your machine

Update the Linux kernel

Set WSL 2 as the default

Install Ubuntu 20.04 LTS

Launch Ubuntu

Install Windows Terminal

Set Ubuntu as the default shell

Use the Linux file system as your default

Closing

An Introduction to vue-markdown-editor

Create a new Vue project

Install the editor component

Implement the editor

Run the app

Final result

Closing

A Practical Guide to the Web Cryptography API

SubtleCrypto

Encryption

Generating a Key

Encoding Data

Generating an Initialization Vector (IV)

Encrypting Data

Transmission and Storage

Packing Data

Unpacking Data