Forem: F1LT3R

A Reasonably Simple, Secure Password Scheme

F1LT3R — Thu, 14 Aug 2025 22:25:19 +0000

A Simple Password Scheme

Are online password generators and password library systems really safe and secure?

With a across-site attack, someone may be able to read the password you are generating online. And hackers can and do attack centralized password library databases, to steal the database files and crack as many of the passwords as possible.

This happened to the password service LastPass in 2022: https://techcrunch.com/2022/12/22/lastpass-customer-password-vaults-stolen/

In this article you will learn a reasonably simple password scheme that you can use across many services without worrying about your passwords being hacked, because we never have to store the passwords anywhere, even on paper.

Requirements

A linux terminal.
The dicewords program.
The pwgen program.
Stickers (or other device name system).

Installation

sudo apt install diceware pwgen

Generate A Scheme Passphrase

The goal is to come up with a password with the following properties:

Easy to remember (simple, memorable words or phrase)
Hard to brute-force (high entropy)

Diceware

Install the Diceware utility if you do not have it already:
```
sudo apt install diceware
```
Now use Diceware to generate a 7 word phrase with a couple of special characters thrown in:
```
diceware -n 7 -d " " -s 2
```

- `-n 7` - Number: Select seven random words.
- `-d " "` - Delimiter: separate the words with a space.
- `-s 2` - Special Chars: Change two characeters to special characters.

The resulting output should be something like:

```plaintext
Idealness Revivi5g Delir$ous Presuming Badge Straggler Sworn
```

> **NOTE:** the two special characters above are `5` and `$`. These characters raise the entropy of your password, making it hard to brute-force.

Storing Your Scheme Passphrase

Seven words and two special characters should be easy enough to memorize. If you have to write it down to remember the phrase, my suggestion is to follow these three basic rules:

Only keep it written down for a month or so.
Keep the paper you've written it on under locked and key.
When you have memorized the passphrase, burn the paper.

It shouldn't take you long to memorize, as you will be using it fairly often when you need to log into a service, or system.

The Password Scheme

With this reasonably simple password scheme, you only have to remember five things:

PASSPHRASE - Your Scheme Passphrase, as generated above.
DOMAIN - The name of the device, domain or service you are using.
IDENTITY - The username, email, or phone number you use with that device, domain, or service.
LENGTH - The length of the password for your domain. Some passwords systems are limited in length.
MODE - The mode is either SIMPLE (uses basic characters), or COMPLEX (uses lots of special characters). Some password systems to not allow complex passwords.

You can visualize your password scheme this way:

PASSPHRASE > DOMAIN + IDENTITY < [LENGTH, MODE]

`PASSPHRASE`

Your PASSPHRASE is the Scheme Passphrase you used above.

`DOMAIN`

The DOMAIN is the thing your are using your passphrase to log into. The DOMAIN can be a physical computer, a web domain, a physical or virtual disk,etc.

Naming your domain is easy, just take the web address of the service you are using, for example: "twitter.com".

Naming Physical Devices

You may want to commit the names of your devices to memory, such as Backup-Disc-1 or Main-Computer. But if you have a lot of physical devices that require a password, you may want to use a naming strategy.

Example

I encourage you to generate your own device naming system that is most memorable for you. But here is an example to help get you thinking:

Buy an assortment of stickers: letters, numbers, color dots, animals, plants, spaceships, cartoon characters, etc.
Give each device one or more stickers.
Generate a name from the stickers you placed on the device, for example: if you placed a red dot sticker, a gopher animal sticker and a number 2 sticker to the device, it's DOMAIN might be something like: "RedGopher2"

NOTE: You may use multiple passwords to log into a computer system if you have set a BIOS password, or use disc encryption. In this case you can add this detail to your DOMAIN, eg: "RedGopher2-BIOS".

`USER`

The USER is simply the username you use when logging into a particular domain.

For a website or service, your USER will be your email address or username.

For a physical computer system, your USER will be the main username you use to log into the operating system.

For a physical disk, your USER can just be "user" or your name.

`LENGTH`

Some websites and computer BIOS passwords are limited in the length of characters allowed, and also the complexity of special characters allowed. So the length of the password will be subject to the password system you are logging into.

My suggestion is to only use two or three LENGTH + MODE pairs where possible to reduce the complexity for memorization.

For example:

LENGTH=64 + MODE="COMPLEX"
1. Disk Encryption Passwords
2. Most Website Passwords
Example:
```
x1THK''[zH5=>VJylQfJs9EK4[[/w.q*#U4;bP=pRw9++?\-MK#"Z(ND=UhY=\vH
```
LENGTH=16 + MODE="SIMPLE"
1. BIOS passwords
2. Poorly designed website passwords
3. Mobile passwords
Example:
```
en8ae4Poh0Fahgh5
```

NOTE: While many BIOS systems will allow a long, complex password; they may be very time consuming to type into a terminal where you are unable to copy + paste the password. It is sometimes acceptable (as a necessary limitation) to use a short, simple password for these password checkpoints.

Scheme Table

Let's say you want to log into your desktop computer, then log into an external drive, and finally log into Twitter. Your Scheme Table might look like this:

Device	Checkpoint	Domain	Identity	Length	Complexity
Desktop Computer	BIOS Password	`RedGopher2-BIOS`	`"user"`	16	`SIMPLE`
Desktop Computer	Disk Password	`RedGopher2-DISK`	`"user"`	16	`SIMPLE`
Desktop Computer	OS Password	`RedGopher2-OS`	`"user"`	16	`SIMPLE`
External Disk	Disk Password	`BlueDuck3`	`"user"`	64	`COMPLEX`
Twitter	Web Password	`twitter.com`	`"me@domain.com"`	64	`COMPLEX`

Generating Passwords to Scheme

Using the Password Scheme Table above, let's generate a set of passwords.

To generate a SIMPLE password for the Desktop Computer's BIOS we use pwgen with a SEED. The SEED is used to generate the password, meaning the password will always be easily recoverable by remembering the PASSPHRASE + DOMAIN : USER with the LENGTH and MODE.

PASSPHRASE='Idealness Revivi5g Delir$ous Presuming Badge Straggler Sworn'
DOMAIN='RedGopher2-BIOS'
USER='user'
SEED="$PASSPHRASE+$DOMAIN:$USER"

# Use the seed to generate a password
pwgen 16 1 -H <(echo "$SEED") -cn

# OUTPUT: "cheekuCho2quaula"

# Clear sensitive variables from memory (or close terminal)
PASSPHRASE=DOMAIN=USER=""

CHALLENGE:

Try generating the password using the information above. Do you get the same output: "cheekuCho2quaula"?

You should!

Try changing one of the words and getting a new password output. Then switch the word you changed, back to it's original word, and you should get your original generated password back again: "cheekuCho2quaula".

We can do the same again for the COMPLEX passwords with a LENGTH of 64 characters:

PASSPHRASE='Idealness Revivi5g Delir$ous Presuming Badge Straggler Sworn'
DOMAIN='twitter.com'
USER='me@domain.com'
SEED="$PASSPHRASE+$DOMAIN:$USER"

# Use the seed to generate a password
pwgen 64 1 -H <(echo "$SEED") -cnsy

# OUTPUT: "cheekuCho2quaula"

# Clear sensitive variables from memory (or close terminal)
PASSPHRASE=DOMAIN=USER=""

The parameters we changed were:

"pwqgen 64" - Produce a 64 character length password.
"pwgen -s" - Create a secure password with complex high entropy character set.
"pwgen -y" - Use symbol/special characters.

Processing The Whole Table

When we apply the the logic above to the whole Scheme Table, we get the following output:

Device	Checkpoint	Password
Desktop Computer	BIOS Password	"`cheekuCho2quaula`"
Desktop Computer	Disk Password	"`iGahghoog9Ahgh7N`"
Desktop Computer	OS Password	"`ahghun7Shauweew0`"
External Disk	Disk Password	"`yN2F/_T}&#!Y68^_q%ZmoYt]xc?l%qf<<!(u,:hc%Od\
Twitter	Web Password	"{% raw %}z12-Qxyg{s9Ua~g0bAUG`N-pm7NAujx4hno<C(5\asM4]/`xg0^tCjK$06q=8gCn"

Using a Generator Script

To make it easy to retrieve your passwords quickly, you can create a generator script within your bin $PATH. We will simply name our generator script "pass". Don't forget to run chmod +x ./pass, to make the generator executable.

#!/bin/bash

# The first arg is your DOMAIN:USER (string)
if [ -z "$1" ];
    then echo "You must provide a DOMAIN:USER, eg: 'twitter.com:me@domain.com'"; exit 1;
    else DOMAIN_USER="$1";
fi

# Use a secure password entry for your PASSPHRASE
echo -n Enter your PASSPHRASE: 
read -s PASSPHRASE
echo

# The second arg is password LENGTH
if [ -z "$2" ];
    # Default to 64 characters for most passwords
    then LENGTH=64;

    # We can pass a custom length, "16", for our working example
    else LENGTH=$2;
fi

# The third argument is our MODE
if [ -z "$3" ];
    # Default to SECURE for most passwords
    then MODE="SECURE";

    # Providing any input, eg: [y, true, simple] -sets MODE to SIMPLE
    else MODE="SIMPLE";
fi

# Create our recoverable SEED
SEED="$PASSPHRASE+$DOMAIN_USER"

# Generate password based on LENGTH, SEED and MODE
if [ "$MODE" == "SIMPLE" ];
    then PASS=$(pwgen $LENGTH 1 -H <((echo $SEED)) -cny);
    else PASS=$(pwgen $LENGTH 1 -H <((echo $SEED)) -cnsy);
fi

echo $PASS

Using our "pass" script we can generate our Twitter password as described in the examples above. You will be asked to enter your PASSPHRASE. As you type your PASSPHRASE out, your characters will be hidden.

pass 'twitter.com:me@domain.com'

Enter your PASSPHRASE:

# OUTPUT: z12-Qxyg{s9Ua~g0bAUG`N-pm7NAujx4hno<C(5\asM4]/`xg0^tCjK$06q=8gCn

Further Strategies to Consider

Memorable Words

Make sure you pick words that are memorable to you!

Try to pick words that have some meaning to your life. This will make them much easier to remember. This is especially true if the commination of your words tell some kind of story.

Only Four Words for Beginners

For beginners: consider keeping your PASSPHRASE to four words.

Keeping your PASSPHRASE to four words will make this simple password scheme easier to use and quicker to memorize. When you are comfortable with this simple password system, consider upgrading to seven words.

Using a `SALTWORD`

You may want to add a SALTWORD to your DOMAIN:USER string for extra obfuscation:

pass 'twitter.com:me@domain.com+FOOBAR'

You can easily change your SALTWORD to be individualized to a DOMAIN, or use the same SALTWORD across multiple domains. Just make sure you create a memorable scheme for your saltwords if you use them.

Single Domain Breech

If you learn that a hacker has breeched any given domain, you can add a SALTWORD for the specific domains that were breeched.

Multiple Domain or `PASSPHRASE` Breech

If you learn, or suspect that someone has gained access to your PASSPHRASE, I would recommend taking the following action:

Generate a new PASSPHRASE if you're sure someone has all your words. Or you may want to change a single word in your PASSPHRASE if you only suspect someone has gain accessed to your words.
Create a table of your domains (like the one earlier in this document).

Use a bash script to run through your domains and generate a new set of passwords. Example:

echo -n Enter your new PASSPHRASE: 
read -s NEW_PASSPHRASE
echo

newPass () {
    if [ -z "$3" ];
        then PASS=$(pwgen $2 1 -H <(echo "$NEW_PASSPHRASE+$1") -cnsy);
        else PASS=$(pwgen $2 1 -H <(echo "$NEW_PASSPHRASE+$1") -cn);
    fi

    echo "$1: $PASS"
}

newPass "RedGopher2-BIOS:user" 16 SIMPLE
newPass "RedGopher2-DISK:user" 16 SIMPLE
newPass "RedGopher2-OS:user" 16 SIMPLE
newPass "BlueDuck3:user" 64
newPass "twitter.com:me@domain.com" 64

After running the script with "F0o Bar Ba$ Qux" as your PASSPHRASE, you should see the following output:

Enter your new PASSPHRASE:

"RedGopher2-BIOS:user": piec5Oovaaloh8pe
"RedGopher2-DISK:user": Iquathae5na3aL2m
"RedGopher2-OS:user": ouSohS8pei3yee6i

"BlueDuck3:user": ]v)Dy'rTSBbkwN7Dns=z<T0CZcID!D[Q42/i=q(nD@\Kg@/^mr0(f2"wQFsPC~>}

"twitter.com:me@domain.com": >,D\-c.6'+G]-:!PIEeOp6?;B'yP=UsPzCu`rd6HSY0b}gtS^z61dZc;6Yp=Spg9

Conclusion

Congratulations!

Now you can quickly recover a seeded password for any domain using a memorable PASSPHRASE on any system with pwgen installed.

If you learn of a breech you can update your passwords individually with a SALTWORD, or update all your all passwords with a new PASSPHRASE.

This password system is easy to remember, simple to use and only requires one tool to be installed (pwgen).

This password system does not rely on any centralized services prone to hackers, and if you're comfortable memorizing a few words, you never have to write any passwords down!

LUKS Encrypt 🔐 Raspberry PI 🍓🥧

F1LT3R — Mon, 08 Jan 2024 04:57:01 +0000

Requirements

Raspberry PI
SDCard w/ Raspberry PI OS Lite installed
Flash drive connected to the RPI (to copy data from root partition during encrypt)
Bash scripts: https://github.com/F1LT3R/luks-encrypt-raspberry-pi

Install OS and Update Kernel

Burn the Raspberry PI OS to the SDCard w/ Balenar Etcher or Raspberry PI Imager
Copy install scripts into /boot/install/
Boot into the Raspberry PI and run sudo /boot/install/1.update.sh
sudo reboot to load the updated kernel

Install Enc Tools and Prep `initramfs`

Run script /boot/install/2.disk_encrypt.sh
sudo reboot to drop into the initramfs shell.

Mount and Encrypt

Mount master block device to /tmp/boot/

mkdir /tmp/boot
mount /dev/mmcblk0p1 /tmp/boot/

Run the encryption script, passing your flash drive descriptor:

/tmp/boot/install/3.disk_encrypt_initramfs.sh [sda|sdb|etc]

When LUKS encrypts the root partition it will ask you to type YES (in uppercase).
Create a decryption password (you will be asked twice).
LUKS will ask for the decryption password again to copy the data back from the flash drive to the root partition.
reboot -f to drop back into initramfs.

Unlock and Reboot to OS

Mount master block device at /tmp/boot/

mkdir /tmp/boot
mount /dev/mmcblk0p1 /tmp/boot/

Open the LUKS encrypted disk:
```
/tmp/boot/install/4.luks_open.sh
```
Type in your decryption password again.
exit to quit BusyBox and boot normally.

Rebuild `initramfs` for Normal Boot

Run script: /boot/install/5.rebuild_initram.sh
sudo reboot into Raspberry PI OS.
You should be asked for your decryption password every time you boot.
```
Please unlock disc sdcard: _
```

References

Using LUKS Encrypted 🔐 Disks w/ Linux 🐧 on The CLI

F1LT3R — Mon, 08 Jan 2024 02:54:43 +0000

In this scenario, I create an encrypted LUKS disk to periodically save the Documents/ folder with Rsync, from a computer that does not have a GUI.

Creating a LUKS Disk

# Snapshot the disk list
BEFORE=$(mktemp); lsblk > "$BEFORE"

# [PLUG IN DISK]

# Snapshot changed disk list
AFTER=$(mktemp); lsblk > "$AFTER"

# Show the disks changed
diff -U0 -w "$BEFORE" "$AFTER" | tail -n +4

# Remove tmps
rm "$BEFORE" "$AFTER"

# Setup luksFormat Disk
sudo cryptsetup luksFormat /dev/xvdj

# [TYPE "YES"]
# [Enter Password]
# [Enter Confirmation Password]

# Open Encrypted Partition
sudo cryptsetup luksOpen /dev/xvdj DATA

# Install XFS Tools is necessary 
sudo apt install xfsprogs

# Add XFS File System
# (sudo apt install xfsprogs)
sudo mkfs.xfs /dev/mapper/DATA

Mounting a LUKS Disk

# Attach disk to Qube 

# Replace xvdi, DATA with actual names
sudo cryptsetup luksOpen /dev/xvdi DATA

# See drive on mapper
ls /dev/mapper/DATA

# Create mount point
sudo mkdir /media/user/DATA

# Mount the partition
sudo mount /dev/mapper/DATA /media/user/DATA

# Rsync ~/Documents, excluding node_modules
sudo rsync -av --exclude="node_modules:*.un~" ~/Documents /media/user/DATA

Unmounting a LUKS Disk

# Unmount the disk
sudo umount /media/user/DATA

sudo rm -r /media/user/DATA

# Close the encrypted partition
sudo cryptsetup luksClose DATA

Do You Remember "Semantic HTML"? 🤣

F1LT3R — Fri, 29 Dec 2023 17:11:55 +0000

<div>
  <label {...getLabelProps()}>Enter a fruit</label>
  <div
    style={{display: 'inline-block'}}
    {...getRootProps({}, {suppressRefError: true})}
  >
    <input {...getInputProps()} />
  </div>
  <ul {...getMenuProps()}>
    {isOpen
      ? items
          .filter(item => !inputValue || item.value.includes(inputValue))
          .map((item, index) => (
            <li
              {...getItemProps({
                key: item.value,
                index,
                item,
                style: {
                  backgroundColor:
                    highlightedIndex === index ? 'lightgray' : 'white',
                  fontWeight: selectedItem === item ? 'bold' : 'normal',
                },
              })}
            >
              {item.value}
            </li>
          ))
      : null}
  </ul>
</div>

ShadeJS 🌴 Part 2 - The Magic HTTP Server 💫

F1LT3R — Wed, 20 Dec 2023 04:19:13 +0000

This article is Part 2 of the series: Build Your Own SPA Framework with Modular JavaScript, NodeJS and Closed-Shadow Web Components.
Part 1 | Part 2

The Journey Continues

So I got a logo 🌴

And I grabbed some namespaces:

It's time to start working on the HTTP server!

Server Design

I'll be honest. I hate using bundlers and transpilers. But one of the things I love about them, is the way that imports don't require a file extension.

For example:

import foo from './foo' // imports ./foo.mjs

Also the ability to get index.mjs from it's component directory.

import foo from './my-comp' // imports ./my-comp/index.mjs

Rewrites

When you setup a web server such as Apache, or Nginx, the server is already using these kind of rules. They are called "rewrites". That's how the server knows to fetch index.html when being asked for the root /.

So I will need a stack of rewrite rules to check through.

Like this:

const rewritePaths = (pathname) => [
    `${pathname}/index.html`,
    `${pathname}.html`,
    `${pathname}.mjs`,
    `${pathname}/index.mjs`,
    `${pathname}.css`,
    `${pathname}/index.css`,
]

Now we need to add some logic to:

Check for the file if a file extension was found in the request.
Check the rewrite paths if there was no extension.
Return the OS file location, content-type, etc.

const rewrite = (pathname, extension) => {
    const rewrites = extension ? removeDoubleSlashes([pathname]) : rewritePaths(pathname)

    for (const rewrite of rewrites) {
        const rewriteTarget  = stripStartSlash(rewrite)
        const location = path.resolve('./web', rewriteTarget)

        const stat = getStat(location)
        const {ext} = path.parse(rewriteTarget, true)
        const contentType = headers[ext]

        if (stat) {
            return {location, stat, contentType}
        }
    }
}

But UT-OH.

I've broken something!

Relative imports no longer work.

301 Moved Permanently

When I'm serving a response without the file extension, and that response uses a file import, the browser does not know what that new import is relative to. This breaks my relative imports, throwing a 404 response code.

To handle this I will use the 301 Moved Permanently response code.

const hasNoEndSlash = (url) => url.slice(-1) !== '/'

const wasRewritten = (url, location) => url.slice(1) !== path.relative(WEB_DIR, location)

const MovedPermanently301 = (res, location) => {
    res.writeHead(301, {
        Location: `http://localhost:${PORT}/${location}`
    })
    res.write('301 Moved Permanently')
    res.end()
}

const requestHandler = (req, res) => {

    ...

    if (hasNoEndSlash(pathname) && wasRewritten(pathname, file.location)) {
        const relativeLocation =  path.relative(WEB_DIR, file.location)
        return MovedPermanently301(res, relativeLocation)
    }

    ...

}

Fantastic!

Everything loads as expected.

Project Structure

So what do these imports look like, and what is the project structure?

In the ./web/index.html file I am loading my counter component without the file extension.

<!DOCTYPE html>
<html>
<body>
    <h1>Index</h1>
    <my-counter></my-counter>
    <script src="/components/counter" type="module"></script>
</body>
</html>

And my counter component imports index.mjs from ./web/vendor/Shade/index.mjs. I'm using a ../ to test that relative imports are really working.

import Shade, {css, html} from '../vendor/Shade'

class MyCounter extends HTMLElement {
    title = 'My Awesome Counter'
    count = 0

    style = ({count}) => css`
        h1 {
            color: ${count >= 8 ? 'red' : 'green'};
        }
        ...
    `

    template = ({title, count}) => html`
        <div>
            <h1>${title}</h1>
            ...
        </div>
    `

    constructor() {
        super()
        Shade(this)
    }
    ...
}

window.customElements.define('my-counter', MyCounter)

And css.mjs and html.mjs are exported from ./web/vendor/Shade/index.mjs via the lib directory. Eg: ./web/vendor/Shade/lib/[html,css].mjs

import html from './lib/html' 
import css from './lib/css' 
import shade from './lib/shade' 

export {html, css}

export default shade

Try It!

Check out Part 2 of the code for yourself. Download it from GitHub and play around with the imports.

https://github.com/Shade-JS/ShadeJS/tree/part-2

git clone https://github.com/Shade-JS/ShadeJS.git
cd ShadeJS
git checkout part-2
node run server/server.mjs

What do you think?

ShadeJS 🌴 Part 1 — Burn It All Down! 🔥

F1LT3R — Fri, 15 Dec 2023 03:07:22 +0000

This article is Part 1 of the series: Build Your Own SPA Framework with Modular JavaScript, NodeJS and Closed-Shadow Web Components.
Part 1 | Part 2

Hi, I'm Al.

And I've decided to make a modern SPA framework that DOESN'T SUCK! 🥳

Why? Because I don't like build systems and code bundlers. Because I don't like 512 terrorbytes of bloatware in my node_modules folder. Because I'm fed up with transpilers, and code-wigglers, and domain-magic fizz-bunglers.

I'm going to burn it all down.

I just like clean, simple code that doesn't try to be too much.

I'll be opinionated – So my code doesn't have to be.

Why would I want to spend precious cycles fixing broken build systems when I can just press SHIP? Why should I be micromanaging my minifier for a microseconds gain, when the only code I need to load is that what is on the screen right now? Who cares about types anyway when you can build your whole app with only strings? Why smash my head against a strongly typed API schema just so I can get intellisense?

REALLY?!
Does it make any-sense, to you?

It's too much I tell you.
TOO MUCH!

Why can't I just compose deep in flow-state, rapidly swinging out components into production like Chuck Norris?

I can – I tell you. AND I WILL!

No, seriously.

I want to build the most framework-less framework of frameworks, The little codebase that couldn't get in your way if it tried.

But how?

How

What I will use?

Web Components
Modular JavaScript
NodeJS
JavaScript Runtime Interpreter
JavaScript CSS Parsing Engine

What will features be?

.mjs-Aware HTTP Server
Build-less Deployments
LIVE Fragments triggering tiny DOM updates
Runs under a tight Content Security Policy with no unsafe-eval or unsafe-inline, etc.
Built in Lazy Loading
Two Way Data Binding
SPA Integration w/ Browser History
Modular CSS Templates
Hot Module Swapping (HMR)
Storybooks Integration
Unit & End-to-End test Integration
Recommended VS Code Integrations
Traditional Package Bundling (Maybe)

Choose a Name

Because I want to take advantage of the performance improvements and tighter security of Closed Shadow Web Components, I'm looking for a name that has something-to-do with "shadows".

I like the idea of sitting in the cool shade of a palm tree on hot, sunny day, and that gives me some great ideas for a logo; so I'm thinking "ShadeJS"?

Domains Available? "YES"
NPM Names Available? "YES"

It's a done deal. 🤝

Design The Components

I want to use Web Components as the base for this framework. So I am going to start by designing what a simple component might look like.

Here's an example of a simple counter component:

import Shade, {css, html} from '/vendor/Shade'

class MyCounter extends HTMLElement {
    title = 'My Awesome Counter'
    count = 0

    style = ({count}) => css`
        h1 {
            color: ${count >= 8 ? 'red' : 'green'};
        }
        p {
            border: 1px dotted black;
            padding: 1rem;
        }
    `

    template = ({title, count}) => html`
        <div>
            <h1>${title}</h1>
            <p>${count}</p>
            <button @click="subtract(1)">Subtract 1</button>
            <button @click="add(1 + 1)">Add 2</button>
        </div>
    `

    constructor() {
        super()
        Shade(this)
    }

    add(amount) {
        this.count += amount
    }

    subtract(amount) {
        this.count -= amount
    }
}


window.customElements.define('my-counter', MyCounter)

Having the style and template as callback functions give me some nice control over the code - control that I can abstract away.

Pass state into the callback for style and template to:
- Update CSS values like color, eg: color: ${count >= 8 ? 'red' : 'green'}
- Show / Hide portions of the template
Evaluate & run code in the template, eg: @click="add(1 + 1)
Map arrays to render lists with HTML
Stringify the style and template functions to read the temple literal variable names, and update state when mutations happen.

Going Private

What about private functions? Sometimes need the code to be invisible and untouchable from the outside. So lets think about what that might look like.

Here is a method I could use for private components:

import Shade, {css, html} from '/vendor/Shade'

class MyCounter extends HTMLElement {
    #style = () => css`
        h1 {
            color: ${this.#count >= 8 ? 'red' : 'green'};
        }

        p {
            border: 1px dotted black;
            padding: 1rem;
        }
    `

    #template = () => html`
        <div>
            <h1>${this.#title}</h1>
            <p>${this.#count}</p>
            <button @click="#subtract(1)">Subtract 1</button>
            <button @click="#add(1 + 1)">Add 2</button>
        </div>
    `

    #title = 'My Awesome Counter'
    #count = 0

    #add(amount) {
        this.#count += amount
    }

    #subtract(amount) {
        this.#count -= amount
    }

    constructor() {
        super()
        Shade(this, {
            style: this.#style,
            template: this.#template,
            '#add': this.#add,
            '#subtract': this.#subtract,
        })
    }
}

window.customElements.define('my-counter', MyCounter)

We can simplify this with a more functional component. Rather than using private members on a class, we can just pass functions and values without any reference to the outer scope.

Here is an example:

import Shade, {css, html} from '/vendor/Shade'

const style = ({count}) => css`
    h1 {
        color: ${count >= 8 ? 'red' : 'green'};
    }

    p {
        border: 1px dotted black;
        padding: 1rem;
    }
`

const template = ({title, count}) => html`
    <div>
        <h1>${title}</h1>
        <p>${count}</p>
        <button @click="#subtract(1)">Subtract 1</button>
        <button @click="#add(1 + 1)">Add 2</button>
    </div>
`

function add(amount) {
    this.count += amount
}

function subtract(amount) {
    this.count -= amount
}

const state = {
    title: 'My Awesome Counter',
    count: 0,
}

class MyCounter extends HTMLElement {
    constructor() {
        super()
        Shade(this, {
            style,
            template,
            state,
            add,
            subtract,
        })
    }
}

window.customElements.define('my-counter', MyCounter)

Wrapping Up

So I think I have a solid start on what I want from this framework, and what the developer experience is that I'm aiming for.

Will it be the fastest framework in the wild?
What is "fast"?

Will it be the funnest developer experience out there?
You betcha!

Whatever happens, it will be a great way to learn some new tricks. And maybe you would like to learn them with me.

What do you think? Should I go for it?

Find File by Name w/ Linux CLI

F1LT3R — Thu, 29 Jun 2023 03:22:37 +0000

find . -name "foo*"

Batch Convert MP3 to MP4

F1LT3R — Thu, 29 Jun 2023 03:04:18 +0000

for i in *.mp4; do ffmpeg -i "$i" "${i%.*}.mp3"; done

TypeScript?.. or JavaScript?

F1LT3R — Wed, 22 Jul 2020 07:36:05 +0000

JavaScript! Why?

Better composability
Faster development

Type Safety Bugs

I spend about 1% of my time dealing with types and type related bugs in JavaScript. To be fair, I use Prettier, ESLint, & BDD with VS Code, so most type safety bugs get knocked down before production anyway.

Eric Elliot has a good post on this called, The TypeScript Tax.

TypeScript is JavaScript's Aircraft Carrier

To draw an analogy, JavaScript is a jump-jet and TypeScript is an aircraft carrier; And even though TypeScript is safe, it's still not safe enough to run a nuclear power plant.

Classes

TypeScript's classes don't get me excited, because I don't use classes. I prefer JavaScript object composition.

Enclosed Pure Object Composition

I like to use Enclosed Pure Object Composition in place of Object Oriented Programming. Conceptually, the mental model is exactly the same, but with the added powers that first-class functions absorb in the Web's event based architecture. Everything I need from OOP can be done with plain JavaScript. No prototypes. No classes necessary.

For example: here is the Enclosed Object equivalent of a Class:

// Counter.mjs

export const Counter = (count = 0) => ({
  add: () => (count += 1),
  get count() {
    return count;
  },
});

const counter = Counter(2);
counter.add();
counter.add();
console.log(counter.count); // 4

This kind of object composition is easier to reason about. The memory footprint and CPU load of Object Composition is identical to Classes and Prototypes.

Let's compose...

// Counters.mjs

import { Counter } from './Counter.mjs';

export const Counters = (...counters) => ({
  add: () => counters.map((counter) => counter.add()),
  get count() {
    return counters.map((counter) => counter.count);
  },
});

const counters = Counters(Counter(0), Counter(1));
counters.add();
console.log(counters.count); // [ 1, 2 ]

Extensible Object Composition

We can make our pattern more extensible. Here is a similar object composition, allowing for the use of JavaScript's this keyword.

// Employee.mjs

const methods = () => ({
  work() {
    this.product += this.productivity;
  },

  report() {
    console.log(
      `I'm ${this.name}, a ${this.role}.
       I produced ${this.product} units.`
    );
  }
});

export const Employee = name => ({
  name,
  role: 'worker',
  productivity: 2,
  product: 0,
  ...methods()
});

const al = Employee('Al');
al.work();
al.report();

// I'm Al, a worker. I produced 2 units.

Let's extend...

// Manager.mjs

import { Employee } from './Employee.mjs'

const accept = () => ({
  accept({ role, productivity }) {
    Object.assign(this, {
      role,
      productivity
    });
  }
});

const al = Object.assign(
  Employee('Al'),
  accept()
);

const promotion = {
  role: 'manager',
  productivity: 1
};

al.accept(promotion);
al.work();
al.report();
// I'm Al, a manager. I produced 1 units.

JavaScript's this keyword is unnecessary. The same result can be achieved by passing the employee's state to the scope of the employee's methods.

// Employee.mjs

const work = state => ({
  work: () => {
    state.product += state.productivity;
  }
});

export const Employee = name => {
  const employee = {
    name,
    role: 'worker',
    productivity: 2,
    product: 0
  };

  return Object.assign(
    employee,
    work(employee)
  );
};

const al = Employee('Al');
al.work();
console.log(al.product); // 2

Anti-Fragile

Object composition in Vanilla JavaScript is anti-fragile. I don't have to keep changing my code when the language's class API surface shifts. I don't have to get things working again when packages in TypeScript's Node ecosystem deliver breaking changes, in exchange for fancier features or security enhancements. (This is not an anti-security statement).

Keep The Web Simple

I often wonder how many frontend engineers learn frameworks, libraries and supersets, yet never realize the awesome power of modern JavaScript.

I love writing pure, enclosed objects, wrapped in the lexical scopes of first class functions, all the way down; There's Very little magic, and a whole lot of beauty.

If you want learn more about the inner workings of the code patterns above, read Kyle Simpson's excellent book series called, You Don't Know JS (Yet).

The following three books are particularly helpful:

Down Boy! (Kill processes by Port)

F1LT3R — Fri, 10 May 2019 11:40:12 +0000

Need to kill processes by port? Try this...

Setup

Save this bash script as downboy to your bin directory:

#!/bin/bash
for PORT in $@
do
    PID=$(lsof -i :$PORT | awk 'FNR ==2 {print $2}')
    echo "kill -9 $PID"
    kill -9 $PID
done

Make downboy executable:

chmod +X ./downboy

Usage

Now you can easily close any number of processes by their port:

sudo downboy 80 8080 3000

Bye-bye.

Agile Insight: Time = Complexity

F1LT3R — Mon, 06 May 2019 05:17:31 +0000

Many Agile teams use Story Points as the measure for both:

The length in time to complete a task
The complexity of engineering a task

The idea is that over time, a team will normalize on some fuzzy, but shared idea of what a Story Point represents. That fuzzy, but shared idea will evolve over time. A task that takes three Story Points today may only take one Story Point in the future.

Inconsistent Measures

Each team is different, changing over time

One team’s idea of a Story Point does not necessarily match another teams idea of a Story Point. This is a problem for the organization because variability in measures makes forecasting more unreliable. Forecasting is already unreliable enough.

Businesses place a high value on knowing how long it takes deliver software, and though it is not possible to know how long it really takes, the business can not act until it has counted the cost. Even though the cost is wrong, it’s closer than it was when you didn’t guess.

So why make it harder for the organization by using an inconsistent measure?

Insight

Time already is a consistent measure of Complexity

Complex tasks take longer than simple tasks. Simple tasks can be broken down more easily than complex tasks, therefore they can be shorter. Breaking complex tasks down is hard, and takes time.

If you have a simple task that takes a day, and a complex task that takes a day, both tasks add the same value to your average velocity.

So what does it mean that one task is simple and one is complex?

It only means time.

Dimensions Not Leveraged

Lets examine our problem space from easiest to estimate, to hardest to estimate:

Simple tasks that are short
Simple tasks that are long
Complex tasks that are short
Complex tasks that are long

This problem space has two axis: Complexity and Time, yet both are overloaded into the single measure of the Story Point. If we really wanted to capture time and complexity as values we could leverage, we would be better off using two distinct variables.

Losing The Dimension of Complexity

So what are we saying when we map Complexity and Time together?

Let c = complexity, t = time and sp = Story Points

Simple-Short: 1c + 1t = 2sp
Simple-Long: 1c + 2t = 3sp
Complex-Short: 2c + 1t = 3sp
Complex-Long: 3c + 3t = 6sp

In the example above, the Simple-Long task and the Complex-Short task are both estimated to be 3sp. In this case, the engineers are estimating that both tasks will take a similar amount of effort.

Then some haunted soul is forced to calculate the average velocity of the team (story points per sprint), and use that average to gate how many stories can fit into the next sprint.

The multidimensional Story Point has now been boiled back down to the linear dimension of time.

You can add as many axis to your Story Points as you want, but you’re only leveraging one.

Get Real, Use Days

The estimate for our Complex-Short task might be justified like this:

“I think this should task should be quick, probably about a day, but there’s a couple of areas I’m not so sure about - it could get a little complex, so let’s say three Story Points.”

That 3sp will be used to measure against points from another sprint, which maps to a value of time. So what you’re actually saying is:

“That Short-Complex story will likely take me three days.”

… even though you did not provide your estimate in days.

How Many Days?

What if we start asking this:

“How many days do you think this story would take?”

Then you might answer:

“About two or three days, so let’s say three to be safe.”

Now we have a measure of three days, or 3d.

Because we are flattening Complexity down to Time anyway, we may as well just estimate in days.

No Agile magic required.

Day Points - A Standard Measure

A day means a day, for any team

While it’s true that one team may be able to get more done in a day than another, at least everyone can use a standard measure to estimate future work: one day.

1d = one day's work

A day means a day, for any time

One day still means “one day”, in two years. The same cannot be said for Story Points, they only mean something to a specific team at a specific time.

I recommend just using a point for a day.

It easier, and less pretentious.

Disclaimer: Be careful using Day Points. Agile is a religion, and people are scared of decimals.

Compact or Verbose Codestyle?

F1LT3R — Sun, 25 Nov 2018 17:51:41 +0000

Which code style do you prefer and why?

Compact

const get = (store, key) => 
    Reflect.has(window[store], key) && 
        JSON.parse(window[store][key]) ||
        new Error(`Key "${key}" not found in window.${store}.`);

Verbose

const get = (store, key) => {
    if (!Reflect.has(window[store], key)) {
        return new Error(`Key "${key}" not found in window.${store}.`);
    }

    const jsonStr = window[store][key]
    const dataObj = JSON.parse(jsonStr);
    return dataObj;
};

Forem: F1LT3R

A Reasonably Simple, Secure Password Scheme

A Simple Password Scheme

Requirements

Installation

Generate A Scheme Passphrase

Diceware

Storing Your Scheme Passphrase

The Password Scheme

PASSPHRASE

DOMAIN

Naming Physical Devices

USER

LENGTH

Scheme Table

Generating Passwords to Scheme

Processing The Whole Table

Using a Generator Script

Further Strategies to Consider

Memorable Words

Only Four Words for Beginners

Using a SALTWORD

Single Domain Breech

Multiple Domain or PASSPHRASE Breech

Conclusion

LUKS Encrypt 🔐 Raspberry PI 🍓🥧

Requirements

Install OS and Update Kernel

Install Enc Tools and Prep initramfs

Mount and Encrypt

Unlock and Reboot to OS

Rebuild initramfs for Normal Boot

References

Using LUKS Encrypted 🔐 Disks w/ Linux 🐧 on The CLI

Creating a LUKS Disk

Mounting a LUKS Disk

Unmounting a LUKS Disk

Do You Remember "Semantic HTML"? 🤣

ShadeJS 🌴 Part 2 - The Magic HTTP Server 💫

The Journey Continues

Server Design

Rewrites

301 Moved Permanently

Project Structure

Try It!

ShadeJS 🌴 Part 1 — Burn It All Down! 🔥

How

Choose a Name

Design The Components

Going Private

Wrapping Up

Find File by Name w/ Linux CLI

Batch Convert MP3 to MP4

TypeScript?.. or JavaScript?

Type Safety Bugs

TypeScript is JavaScript's Aircraft Carrier

Classes

Enclosed Pure Object Composition

Extensible Object Composition

Anti-Fragile

Keep The Web Simple

Down Boy! (Kill processes by Port)

Setup

Usage

Agile Insight: Time = Complexity

Inconsistent Measures

Insight

Dimensions Not Leveraged

Losing The Dimension of Complexity

Get Real, Use Days

How Many Days?

Day Points - A Standard Measure

Compact or Verbose Codestyle?

Compact

Verbose

`PASSPHRASE`

`DOMAIN`

`USER`

`LENGTH`

Using a `SALTWORD`

Multiple Domain or `PASSPHRASE` Breech

Install Enc Tools and Prep `initramfs`

Rebuild `initramfs` for Normal Boot