User:Saul

This page contains my notes and documentation of various technologies, mostly related to the tech stack I use.

Useful Links In This Wiki

• User:Saul/networking
• User:Saul/pwa
• User:Saul/linode
• User:Saul/Raspberry_Pi
• User:Saul/Open_WRT
• User:Saul/nginx
• User:Saul/vue
• User:Saul/wasm
• User:Saul/feathers
• User:Saul/Realtime_app
• User:Saul/electron
• User:Saul/nativescript
• User:Saul/eslint
• User:Saul/jest
• User:Saul/Mongodb
• User:Saul/c_sharp
• Wordpress
• MySQL
• Linux_commands
• User:Saul/editors
• Math
  • User:Saul/cs_and_math
  • User:Saul/matrices
  • User:Saul/algebra
  • User:Saul/calculus
  • User:Saul/probability
  • Understanding Quaternions

My Crypto Links In This Wiki

• User:Saul/Insane
• Blockstack

My Troubleshooting Pages

• User:Saul/Sound_card
• User:Saul/3d_printer
• User:Saul/duel_boot
• User:Saul/soarer

Cool Projects

• Library Of Babel
• Book of Obscure Sorrows
• Nvidia Vid2Vid
• 3d Scanning
• Unsplash - Free Image Library
• The Noun Project - Free SVG Library
• Gutenberg - Free E-book Library
• Archive of the Internet
• Easing cheat Sheet
• Mathematical animations for python
• Abandoned Games Archive
• The Eye - Digital Archive
  • The Eye - Older Games

Snippets:

BASH:

Copy File To Server

To copy a file from or to a server over ssh run:

# scp SOURCE DESTINATION
scp -r USER@IP:~/SOME_FOLDER ~/SOME_FOLDER

VPS Proxy

To proxy traffic over port 1080 run:

ssh -NCD 1080 user@ip

Then in Firefox go: Edit -> Preferences -> General -> Network Proxy (near the bottom) and modify the following settings:

Manual Proxy Configuration
Socks Host: localhost
port: 1080

Alias

To save a command run:

alias COMMANDNAME="COMMAND"

This will be lost on reboot however so to save it run:

echo "alias COMMANDNAME=\"COMMAND\";" >> ~/.bash_aliases # OR directly into the rc file (~/.bashrc)

Random Password Generation

A useful command to generate a random password of 10 characters:

</dev/urandom tr -dc 'A-Za-z0-9!#$%&()*+,-./:;<=>?@[\]^_`{|}~' | head -c 10 ; echo

Or even better use this.

CSS:

Sticky Footer

body .site{
	display: flex !important;
	min-height: 100vh !important;
	flex-direction: column !important;
}

#content {
	flex: 1 !important;
}

Note: in Wordpress the user bar will make the page need to scroll so logout to see it properly.

Hide ReCaptcha

body:not(.page-id-16) .grecaptcha-badge {
    display: none;
}

Same Height Columns:

.Container{
	display: flex;
}

.Column{
	flex: 1; /* optional to equalize widths */
}

Javascript

Git Web Hooks

const http = require("http");
const crypto = require("crypto");
const exec = require("child_process").exec;

const repo = "<DIRECTORY OF YOUR REPO>";
const secret = "<YOUR SECRET>";

http.createServer((req, res) => {
	req.on("data", chunk => {
		// Github
		const sig = "sha1=" + crypto.createHmac("sha1", secret).update(chunk.toString()).digest("hex");

		// Gitea
		//const sig = crypto.createHmac("sha256", secret).update(chunk.toString()).digest("hex");

		const isMaster = body?.ref === "refs/heads/master";

		// Gitea needs "x-gitea-signature"
		if (req.headers["x-hub-signature"] == sig && isMaster) {
			if (isMaster)
				exec(`cd ${repo} && git pull`);

			res.writeHead(200);
			res.end("Success!");
		} else {
			console.error("Failed verification.");
			res.writeHead(403);
			res.end("Failed verification.");
		}
	});
}).listen(8080);

Add it as a service: /etc/systemd/system/webhook.service

[Unit]
Description=Git webhook
After=network.target

[Service]
Environment=NODE_PORT=8080
Type=simple
User=root
ExecStart=/usr/bin/nodejs <WEBHOOK DIRECTORY>
Restart=on-failure

[Install]
WantedBy=multi-user.target

Higher Order Functions

Higher order functions are functions that accept or return a function. These are useful of abstracting and reducing your code.

// ES6+
const fetchResource = (resource, id) => fetch(`api/${resource}/${id}`);

const makeFetcher = resource => id => fetchResource(resource, id);

const fetchUser = makeFetcher("users");
const fetchGroup = makeFetcher("group");

const user = fetchUser("123");
const group = fetchGroup("10");

// ES5
function fetchResource (resource, id) {
	return fetch("api/" + resource + "/" + id);
}

function makeFetcher (resource) {
	return function (id) {
		fetchResource(resource, id);
	};
}

function fetchUser () {
	return makeFetcher("users");
}

function fetchGroup () {
	return makeFetcher("group");
}

var user = fetchUser("123");
var group = fetchGroup("10");

This example helps show how higher order functions can be useful. If the api location changes you only need to change one function to get your code working again.
The fetchResource function is just a simple function that calls the fetch function with its parameters. The makeFetcher is a closure function that returns another function that calls our first, therefore when make fetcher gets called it returns a function that only needs the id due to the resource being saved due to the first function acting a a closure. Then you can quickly make your fethcUser, fetchGroup functions and so on.

Unpacking Objects And Arrays

Arrays can be unpacked into a variables list like this example:

let list = ["apples", "bananas", "carrots", "pears", "corn"];

let [itemOne, itemTwo, ItemThree, ItemFour] = list;

console.log(itemOne); // Output: "apples"
console.log(itemThree); // Output: "carrots"

You can use this syntax to switch the variables too!

[itemOne, itemTwo] = [itemTwo, itemOne];

console.log(itemOne); // Output: "bananas"

Objects can be unpacked using similar syntax:

let person = {
	name: "sam",
	height: 2,
	food: "pizza"
}

{name, height, food} = person;

console.log(name); // Output: "sam"
console.log(food); // Output: "pizza"

({height, food, name}) = person;

console.log(name); // Output: "sam"
console.log(height); // Output: 2

Note that the variable names must match the object properties, if you want different names you can do it like this:

({name: n}) = person;

console.log(n); // Output: "sam"

Using this syntax you can also set default values for properties like so:

({name: n, pet: favouriteAnimal = "dragon"}) = person;