Yesterday, I came across an interesting bug regarding JavaScript Arrays, and I wanted to share my approach to fixing it.
At a basic level, I wanted to pass part of an array to a function, but wanted to use the original array later on.
```js
let arr = [1, 2, 3, 4, 5]
let something = arr.splice(0, 3)
do(something) // []
DoSomethingWithOriginal(arr)
```
Thinking that Array.prototype functions don’t mutate the array directly, I moved on with my day. This lead to a bunch of problems down the line.
Some array methods in the EcmaScript specification are designed to mutate arrays, while others do not.
### Non-mutating functions
- Array.prototype.map()
- Array.prototype.slice()
- Array.prototype.join()
- …
These functions do not mutate the array they are called on. For example:
```js
let arr = [1, 2, 3, 4, 5];
let partOfArr = arr.slice(1, 2);
console.log(partOfArr); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
```
### Mutating functions
- Array.prototype.sort()
- Array.prototype.splice()
- Array.prototype.reverse()
- …
These methods mutate the array directly. This can lead to unreadable code, as the value can be manipulated from anywhere. For example:
```js
let arr = [5, 2, 4];
arr.sort();
console.log(arr); // [2, 4, 5]
```
To me, it is very unclear, which functions do, and which don’t mutate arrays directly. But, there’s a simple trick you can use to stop letting the functions mutate arrays directly, ultimately leading to more readable and reliable code.
Voilà! We have a sorted array, and the original one is also around. The spread operator(`[...arr]`) is used to create a new array with every value of arr .
You can use this for arrays, as well as objects:
```js
let obj = {
field: "example",
};
let extendedObj = {
...obj,
anotherField: 42,
};
console.log(extendedObj.field); // "example"
```
## Conclusion
ES6 brought us awesome features like let and const assignments, as well as arrow functions. A more unknown feature however is the spread operator. I hope you now know how to use the spread operator, and that you can adopt it for cleaner and simpler code.
title: Quick Tip! Setting up a lightweight Server-Client VPN with wireguard
date: "2020-08-19"
---
This blog post has been taken over from my [collection of "Today I Learned" articles](https://garrit.xyz/til).
You can easily set up a private network of your devices. This way you can "talk" to your phone, raspberry pi etc. over an **encrypted** network, with simple IP-addresses.
Firstly, install wireguard on all of your systems. Simply install the `wireguard` package from your package manager respectively. Check out [the official installation guide](https://www.wireguard.com/install/) if you can't find the package. If you're on debian, try [this](https://wiki.debian.org/WireGuard?action=show&redirect=Wireguard) guide. There's also an app for Android, iOS and MacOS.
Every participent (Client and server) needs a key-pair. To generate this, run this command first on the server, and on all clients:
```bash
wg genkey | tee wg-private.key | wg pubkey > wg-public.key
```
It might make sense to do this as root. This way you don't have to type `sudo` with every command.
## Server Configuration
You will need to create a configuration for the server. Save this template at `/etc/wireguard/wg0.conf`, and replace the fields where needed:
```conf
[Interface]
PrivateKey = <Serverprivatekeyfromwg-private.key>
Address = 10.0.0.1/24 # IP Address of the server. Using this IP Address, you can assign IPs ranging from 10.0.0.2 - 10.0.0.254 to your clients
ListenPort = 51820 # This is the standard port for wireguard
# The following fields will take care of routing
PostUp = iptables -A FORWARD -i %i -j ACCEPT; iptables -A FORWARD -o %i -j ACCEPT; iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE
AllowedIPs = 10.0.0.2/32 # The client will be reachable at this address
# Android Phone
[Peer]
PublicKey = <PublicKeyofPhoneClient>
AllowedIPs = 10.0.0.3/32
# ...
```
Then run `wg-quick up wg0` to start the wireguard interface with the configuration from `/etc/wireguard/wg0`.
## Setting up clients
Setting up clients is very similar to the server setup process. Generate a keypair on each client, save the following config to `/etc/wireguard/wg0.conf` and replace the nessessary fields:
```conf
[Interface]
PrivateKey = <ClientPrivateKeyfromwg-private.key>
Address = 10.0.0.2/32 # The fixed address of the client. Needs to be specified in the server config as well
[Peer]
PublicKey = <ServerPublickey>
AllowedIPs = 10.0.0.0/24 # Routes all traffic in this subnet to the server. If you want to tunnel all traffic through the wireguard connection, use 0.0.0.0/0 here instead
Endpoint = <PublicServerIP>:51820
PersistentKeepalive = 25 # Optional. Will ping the server every 25 seconds to remain connected.
```
On every client, run `wg-quick up wg0` to start the interface using the config at `/etc/wireguard/wg0.conf`.
This whole proccess might be easier on GUIs like Android or MacOS.
Now, try to ping your phone from your laptop:
```
ping 10.0.0.3
PING 10.0.0.3 (10.0.0.3) 56(84) bytes of data.
64 bytes from 10.0.0.3: icmp_seq=1 ttl=64 time=5382 ms
64 bytes from 10.0.0.3: icmp_seq=2 ttl=64 time=4364 ms
If you have ever contributed to an open source project, chances are you have opened a pull request on GitHub or a similar platform to present your code to the maintainers. While this is a very approachable way of getting your code reviewed, some projects have decided against using pull requests and instead accept patches via email.
## An introduction to patches
A patch is essentially a git commit expressed in plain text. It describes what commit the change is based on, and what has changed. A basic patch looks like this:
```
From 92132241233033a123c4fa833449d6a0d550219c Mon Sep 17 00:00:00 2001
From: Bob <bob@example.com>
Date: Tue, 25 May 2009 15:42:16 +0200
Subject: [PATCH 1/2] first change
---
test.txt | 1 +-
1 files changed, 1 insertions(+), 1 deletions(-)
diff --git a/test.txt b/test.txt
index 7634da4..270eb95 100644
--- a/test.txt
+++ b/test.txt
@@ -1 +1 @@
-Hallo Bob
+Hallo Alice!
```
As you can see, it is very readable for both the reviewer and the machine.
## Sending and receiving patches
The easiest way you can generate a patch from a commit is to use `git-format-patch`:
```
git format-patch HEAD^
```
This will generate a `.patch` file, that can be embedded into an email and sent to the maintainers. Oftentimes they will then reply to your mail with some inline comments about your code.
To simplify this process further, git has the `send-email` command, which let's you send the patch directly to someone without needing to embed it manually. I won't go into details about this, but there is a [well written guide](https://git-send-email.io/) on how to set it up.
If you have received a patch from someone, you can apply it to your tree with the `am` (apply mail) command:
```
git am <0001-first-change.patch
```
check your `git log` to see the patch in form of the latest commit.
## Why even bother
You might think that this is just a silly and outdated approach to collaborative development. "Why not simply open a pull request?" you might ask. Some projects, especially low-level oriented ones like the Linux kernel, do not want to rely on third-party platforms like GitHub to host their code, with good reasons:
1. Everyone can participate! You don't need to register an account on some proprietary website to collaborate in a project that uses a patch-based workflow. You don't even have to expose your identity, if you don't want to. All you need is an email-address, and frankly most of us have one.
2. It's plain simple! Once you get used to generating and applying patches on the command line, it is in fact easier and faster than opening a pull request in some clunky GUI. It doesn't get simpler than plain text.
3. It is rewarding! Once you have submitted a patch to a project, there is no better feeling than getting a simple "Applied, thanks!" response from a maintainer. And if it's a response that contains feedback rather than an approval, it feels even better to submit that reworked code again and get it eventually applied.
## Conclusion
The patch-based workflow is an alternative way to collaborate with developers. If it helps you in your day to day business depends on the projects you are contributing to, but in the end it is always good to have many tools under your belt.
title: Quick Tip! Sharing terminal output with Termbin
date: "2019-12-31"
---
Ever find yourself in a situation where you simply want to save or share the output of a terminal command? Selecting, copying and pasting text from stdout always feels quite tedious, if you just want to share the contents of a file.
A project called [Termbin](https://termbin.com/) tries to simplify this process. Just pipe the command you want to save to the following url on port `9999`, using Netcat:
```sh
echo "Hello, Blog!" | nc termbin.com 9999
```
Instead of showing the output, it will be forwarded to Termbin and show the URL, under which your output will be available:
```sh
➜ blog git:(master) ✗ cat ./some_file.txt | nc termbin.com 9999
https://termbin.com/faos
➜ blog git:(master) ✗
```
Sure enough, after navigating to [`https://termbin.com/faos`](https://termbin.com/faos), we will see the contents of `some_file.txt`. Neat!
### ⚠️Word of Caution⚠️
Do not pipe any personal information, credentials or any other private data into termbin. It will be instantly available to the general public, and theres no quick way to remove it.
"I write two tests before implementing a method", "My project has 90% coverage".
I don't know about you, but that's something I don't hear very often. But why is that?
Testing is not even that difficult to do, but yet it is always coming short in my projects. About a year ago, I've tried to implement tests in my React applications with little success, mostly because integrating `enzyme` and configuring it correctly is not that intuitive as a relatively new developer. I want to share my (partly opinionated) approach to JavaScript testing with `jest`, to get you started. In a later post I will demonstrate a way to implement `enzyme` into your React projects.
# The basics of testing JavaScript functions
To get started, you need a npm-project. I don't think I have to explain that, but just in case:
```bash
mkdir awesome-testing-project
cd awesome-testing-project
npm init -y
```
Of course, we need a unit we want to test. What about a method that returns the first element of an array?
```js
module.exports = function firstElement(arr) {
return arr[1];
};
```
You already spotted a bug, huh? Let's keep it simple for now.
Install and initialize Jest, an open-source testing framework maintained by Facebook. When initializing, you should check every question with `y`.
```bash
npm i --save-dev jest
npx jest --init
```
Next up, we need to define our first test. Conventionally, we create a folder named `__tests__` in the directory of the module we want to test. inside it, there should be a file named `<module>.test.js`. Something like this:
```bash
▶ tree
.
├── package.json
└── src
├── __tests__
│ └── firstElement.test.js
└── firstElement.js
```
Jest provides global functions that do not need to be imported in a file. A simple test can look like this:
test("firstElement gets first element of array", () => {
expect(firstElement([1, 2])).toBe(1);
});
```
`expect` is another word for `assert`. If you ask me, "Expect firstElement of [1, 2] to be 1" sounds reasonably english, doesn't it? After defining the test, all there is to do left is to run the `npm test` command, which has been created for us by running `npx jest --init` earlier.
at Object.<anonymous>.test (src/__tests__/firstElement.test.js:4:32)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 1.1s
Ran all test suites.
npm ERR! Test failed. See above for more details.
```
Whoops! Looks like we have found a bug! Let's fix it by adjusting the index of the return value in the firstElement function:
```js
module.exports = function firstElement(arr) {
return arr[0];
};
```
And after rerunning `npm test`:
```bash
▶ npm test
> jest
PASS src/__tests__/firstElement.test.js
✓ firstElement (4ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.666s, estimated 2s
Ran all test suites.
```
Yay, your first unit test! Of course, there is much more to find out about the Jest framework. To see a full guide, read the [official docs](https://jestjs.io/).
I have prepared a [template repository](https://github.com/garritfra/react-parcel-boilerplate) for building react apps. It also uses Jest to run tests, you don't have to worry about a thing! If you found this interesting, consider checking out my other blog posts, and/or check out my [GitHub](https://github.com/garritfra)!
Nowadays, password managers are a necessity if you care even the slightest about your personal belongings on the interwebs. But think about it, do you really want to trust another company to store your most sensitive information?
Use a **stateless** password manager like [LessPass](https://lesspass.com/) to access your password without relying on a third party to store your data.
### Why use a password manager in the first place?
Having a single password for multiple accounts is convenient. What's also convenient, is **using** this password on multiple accounts once you have access to a single one. What might be convenient to you, might also be convenient to others. Many people, [especially celebrities](https://web.archive.org/web/20170225163642/http://uk.businessinsider.com/twitter-says-it-wasnt-hacked-passwords-reused-older-hacks-malware-to-blame-2016-6), fall victim to this trap of comfort.
To counteract this, people are (and should be) using different passwords for different accounts. These passwords differ in a single letter or digit (Twitter: `porridge4president`, GitHub: `poridge5president`, etc.), or they don't match at all (Twitter: `porridge4president`, GitHub: `YouWontGuessThisOne`).
The problem that most likely arises from this technique is called _password chaos_ ([Source](https://encyclopedia2.thefreedictionary.com/password+chaos)):
> _"The confusion that arises when users have many unique passwords."_
Relying on third party companies doesn't seem like a big deal. After all, you are probably using some form of cloud service to host your photos. Yet there's a lot of trust involved in letting others handle your private data, especially your passwords. In 2017, [a major password manager got hacked, exposing sensitive data including users and their passwords](https://www.zdnet.com/article/onelogin-hit-by-data-breached-exposing-sensitive-customer-data/). This shows the potential for security breaches in an application that inherently seemed safe. But what if I told you that there is an alternative to this? A password manager that does not store your data at all?
### A Stateless password manager
Recently, I stumbled across [LessPass](https://lesspass.com/#/). LessPass is a password manager that is very different from what I have seen so far. Instead of storing passwords that either you or a random password generator came up with, it computes passwords on the fly, given a website, username, your masterpassword and some options.
The key here is that LessPass uses a **pure function**, i.e. a function that given the same parameters will always give the same result. Using this technique, there's no need to store your password in a database owned by a large company, nor do you have to sync your passwords between your devices ([but there's an app](https://play.google.com/store/apps/details?id=com.lesspass.android&hl=de)). The computation happens right on your machine, and **only** on your machine. If you want to find out more about how it works under the hood, you can check out [the authors blog post](https://blog.lesspass.com/lesspass-how-it-works-dde742dd18a4#.vbgschksh). He goes into great detail on what alorithm is used to compute your passwords and how to utilize every feature of LessPass.
### Conclusion
Being a little privacy nerd myself, I often think twice about what services I want to use, often even looking into self-hosted alternatives to major products. There are multiple products that offer self hosted solutions to store your passwords, however I also don't even trust _myself_ with such sensitive data either. LessPass eliminates the need to have a third party watch over your data, let alone to store it on their servers.
Garrit Franke
4 years ago