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

@resolute/rio

v0.1.0

Published

Responsive Image Optimizer

Downloads

2

Readme

Locally

  1. Source may be a URL or a local file
    1. If a URL, perform HEAD request and parse etag header. Generate the source hash as {xxHash64(URL)}-{etag}.
    2. If a local file, read contents of file and generate source hash as {xxHash64(file contents)}.
    3. Note: we must create a lock to prevent re-reading or re-requesting the same resource over and over. This would act as an ephemeral cache of the source hash. We must figure out how to purge this cache during periods of long execution contexts—like a “watch” scenario.
  2. Generate an {optionsHash} by normalizing the options (mime type, width, height).
    1. Options must be normalized so that swapping the order of width and height does not generate a different hash.
    2. If {sourceHash}-{optionsHash} exists in local FS cache, return it.
  3. GET rio-gcf passing the {sourceHash} and the options, ~~and optionally a locally existing If-None-Match: "{variantHash}"~~ —doesn’t make sense: if we’re caching locally, then we do not need to check with the server. If the response is:
    1. 404
      1. The rio-gcf server does not have the source.
      2. Proceed to upload POST source where the request body is either 1) the file contents or the 2) URL.
      3. Note: we must also create a lock for source uploading to prevent overloading rio-gcf with may upload request.
    2. 200
      1. The rio-gcf server has the source and is either 1) generating the variant based on the options, or 2) found the asset in its GCS cache and is returning that.
    3. ~~304~~
      1. ~~The rio-gcf server has the source, and the ETAG ({variantHash}) passed in If-None-Match request header is the correct fresh version.~~

Server-side

GET Request Headers

  • ~~If-None-Match: "{variantHash}"~~
  • Accept: {mime type} Request URL Search Params
  • sourceHash
  • width (optional)
  • height (optional)
  1. Generate an {optionsHash} by normalizing the options (mime type, width, height).

Possible States

  1. Variant locally on filesystem by {sourceHash}-{optionsHash}
    1. exists
    2. does not exist
  2. Source in GCS
    1. exists
    2. does not exist
  3. Variant in GCS
    1. exists
    2. does not exist

If the Variant ({sourceHash}-{optionsHash}) exists locally, simply return it along with its meta ({sourceHash}-{optionsHash}.meta).

If the Source does not exist in GCS, upload (POST) it to GCF/GCS.