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

springu

v1.0.1

Published

A teeny-tiny spring utility

Downloads

10

Readme

A tiny-spring utility that returns the change of the value.

I'm tired of installing popmotion just to get the spring.

This is the younger brother of Lerpy.

Usage

import springu from 'springu';

let change = springu(obj, key, target, settings);
obj[key] += change;

With actual code:

import springu from 'springu';

let obj = { x: 0 };
let settings = { spring: 0.8, damping: 0.2,friction: 0.98, snapThreshold: 0.001 };

let changeX = springu(obj, 'x', 1., settings);
obj.x += changeX;
  1. Call sringu
  2. Add the velocity to the value

A note on API design.

No callbacks for when updating or completing.

While this makes it so you have to do that manually. It makes checking when multiple springs are done easier to think about and do. Without the need for a super complex API.

IMAGINARY API: callbacks + automatic setting the value

// THIS ISN'T THE ACTUAL API. JUST TO ILUSTRATE
import springu from 'springu';

let obj = { x: 0, y: 0 };
let settings = { spring: 0.8, damping: 0.2,friction: 0.98, snapThreshold: 0.001 };
let isXdone = false;
let isYdone = false;

// THIS ISN'T THE ACTUAL API. JUST TO ILUSTRATE
springu(obj, 'x', 1., {...settings, onComplete: () =>{ isXdone = true;  });
springu(obj, 'y', 1., {...settings, onComplete: () =>{ isYdone = true;  });

// THIS ISN'T THE ACTUAL API. JUST TO ILUSTRATE
if(isXdone && isYDone){
	// do something
}
// THIS ISN'T THE ACTUAL API. JUST TO ILUSTRATE

This feels like I have to go back and forward to understand what's even happening here.


Happy API : Returning the velocity to allow manual checking

import springu from 'springu';

let obj = { x: 0, y: 0 };
let settings = { spring: 0.8, damping: 0.2,friction: 0.98, snapThreshold: 0.001 };

let speedX = springu(obj, 'x', 1., settings);
let speedY = springu(obj, 'y', 1., settings);

obj.x += speedX;
obj.y += speedY;


// Do something if they aren't done
if(speedX || speedY){}
// Do something when both are done
if(!speedX && !speedY){}

The code is pretty linear and I can understand/wrap my head around it pretty easily.

No automatic adding to the object

While having to do this is more mental overhead:

	obj.x += speedX;
	obj.y += speedY;

I have two reasons for doing this.

  1. Keep the API the same as my Lerpy package.
    • Meaning you can swap them with only one line. And you don't need to remember to remove/add that line of code
    • I honeslty forgot about the second one. But yeah, the 1st is more than enough for me

On that note...

Why springu needs the object, while lerpy doesn't.

Unlike lerpy, springu needs to hold the current velocity of the spring somewhere. And it also needs to somehow know which is the velocity for certain value.

The only way of doing that with the lerpy API, is to rely on call order. Which is not the best of ideas since that's out of the scope of springu.