phrase.shop is a web app to generate secure yet memorable passphrases.
While there are several passphrase generators online, this one has the following strengths:
While any modern computer's randomness is just fine, using physical dice is more fun.
I like hexadecimal (16-sided) dice from Gamescience. I have three of these, bought specifically for this project. I roll all three at a time, for 12 bits of entropy per roll. This makes generating even the longest passphrase a breeze.
Gamescience also sells a 100-sided monster of a dice, which would yield a massive 6 bits of entropy per roll.
I welcome your contributions. In particular, I'm very supportive of newbie developers.
This app is written in TypeScript and uses Preact as the web framework. For unit tests, it uses Jest and Enzyme.
If you are new to developing web applications, I recommend the book Test-Driven React, which will introduce you to React, Jest, Enzyme, and Wallaby.js.
The workflow I propose:
Decide what to work on. There are a number of open issues that you're welcome to resolve, or you can scratch your own itch. Before starting development, please open an issue for your desired change so we can discuss it and align on whether it needs to be addressed and how to address it. If you don't lead with an issue, you risk wasting your time developing something I'll disagree with and won't accept.
Work on your changes. See next sections for how to run this project locally.
Run npm run build
before submitting a pull request and resolve any linter and unit test errors.
Submit a pull request on GitHub. Check that your change passes the Continuous Integration workflow. I'll review your contribution, and we'll either have a discussion, or I'll accept your change as-is.
You'll see your contribution on https://phrase.shop!
flowchart TB
init([App start])
generating[/Generating.../]
viewResult(View generated passphrase)
init-->generating
generating-- consume entropy -->viewResult
viewResult-- change/seed entropy -->viewResult
viewResult-- change complexity -->generating
classDiagram
class App {
entropyBitsAvailable
entropySource
phraseParts
}
class PhrasePartUi {
type
}
class PhraseStruct {
phraseParts
order
dependencyTree
}
App o-- PhrasePartUi
Install npm
using whatever
means is most convenient for you, such as Homebrew on macOS.
Initialize:
$ npm install
This creates a node_modules
directory.
Run unit tests:
$ npm test
Run the app locally:
$ npm start
This supports hot-reloading, so feel free to edit Javascript and see your changes in the browser immediately.
Run linter and generate final artifacts:
$ npm run build
This produces the app bundle Javascript, in ./docs
, that's served to real customers.
If any part of this process fails, please fix any issues before submitting a pull request.
The React/TS template for this web app came from https://github.com/philipmw/spa-template.
I made the favicon with Inkscape 1.0, with all the creativity that I could muster.