npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

surpass

v0.1.1

Published

Taking sensitive field input beyond the ordinary

Downloads

7

Readme

surpass

Surpass is an input component for sensitive data, like passwords, that incorporates several innovations in usability:

  • Enables toggling of input between unmasked (showing input verbatim), masked (hiding individual characters, ie. traditional password entry), and hidden (all feedback is completely swallowed)
  • Masked input includes an abstract signifier of the masked content, for validation purposes (see the section on "Gross Simplification" below)
  • Validating input by re-typing it is both optional and always available

Allows Increased / Decreased Obfuscation

Traditional password obfuscation is frequently unnecessary, and the user should be given the option to disable it. Right now, the only browser that ships with a facility to show an entered password is Microsoft Edge, and even that only applies while the user is holding the button.

Adding absolute-privacy allows users paranoid about the disclosure of Gross Simplification Ideally, this would also enable functionality in user agents to completely hide feedback outside of the password input

Additionally, this configrable sensitivity should be available for any kind of input, not just passwords. Some users may be uncomfortable entering their Social Security Number, PIN, or real name in public,

Gross Simplification

Details not final. This aspect of surpass is still experimental, and is subject to heavy changes as I gather more data about its operation going forward.

Communicates the input state, a la Lotus's Hieroglyphics or Chroma-Hash, without exposing significant details of the password.

  • Doesn't show until the user has gone at least 1/3 second without typing
  • Doesn't show for passwords shorter than 6 characters

Calculation

This technique maps the entered password to one of 144 different possible combinations of shape, color, and position, by taking the 32-bit FNV-1a hash of the string's UTF-8 representation, XOR-folding it to 16 bits (to diffuse biases in the lower bits), then taking the value of that result modulo 144.

That remainder is then translated to a combination of shape, color, and arrangement by mapping the highest-order multiple of 6 to one of six possible combinations of circle, triangle and square, the next multiple of 6 to a permutation of red, green, and blue, and the lowest multiple of 4 to which position the first shape will be in: the top, right, left, or bottom. (This leaves an unavoidable < 1/10000 bias toward some combinations of shapes and colors, but keeps the four positions evenly represented.)

The FNV-1a hash function was selected as the simplest available technique to derive a value from a string (compared to a relatively heavy function like MD5), while still maintaining the properties necessary for this use case (even distribution / diffusion and non-reversibility).

Double-entry

Re-entering something the user can read isn't as sensible, but you may want to recommend they take that extra step: however, there may be other fields where this kind of validation may make more sense for the user.