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

isplib

v0.1.17-beta-fix-8

Published

Snippets written in JavaScript. Majorly for our website.

Downloads

27

Readme

isplib

NPM jsDelivr

The package itself is under MIT license, but please note that some of the works cited therein have non-commercial restrictions.
Use it at your own risk. If necessary, you should consult a lawyer.

The document is mostly in zh_CN. However, you can use Google Translate to translate it into other languages.

这是个工具集,平时写的各种小物件都会放进来。由于主要供内部使用,代码 / 项目管理可能不是很规范,见谅。

图片加载器

简介

风景图 / 动漫图。可以作为网页背景。

使用方法

建议您将 latest 替换成具体的版本号,以免哪天我们进行 ~~瞎改~~ 不兼容更改,给您增加工作量。

建议从 jsDelivr 加载这个文件(在中国大陆有节点,速度不错)

<script async src="https://cdn.jsdelivr.net/npm/isplib@latest/loadImage.js"></script>

或者 UNPKG(如果你的访客主要来自中国大陆,建议不要使用 UNPKG,因为部分地区 / 运营商可能出现无法连接Cloudflare 的情况)

<script async src="https://unpkg.com/isplib@latest/loadImage.js"></script>

知乎(有时候会跳转到旧版,并且似乎没有清除节点缓存的功能)

<script async src="https://unpkg.zhimg.com/isplib@latest/loadImage.js"></script>

饿了么(有时候会提供旧版,并且似乎没有清除节点缓存的功能)

<script async src="https://npm.elemecdn.com/isplib@latest/loadImage.js"></script>

特性

默认情况下,它会修改 document.body背景不会定时轮换图片,并且添加高斯模糊效果。

可以通过给 window._place 赋值来修改图片的位置。

const imgPlace = document.getElementById('example');
window._place = imgPlace;
// or
const divName = 'example';
window._place = divName;

可以通过给 window._slide 赋值,使得图片定时轮换。

window._slide = true;
// or
window._slide = 1;

通过给 window._blurType 赋值来调整高斯模糊效果

window._blurType = 'back'; // 对元素背景进行高斯模糊 (默认效果)
window._blurType = 'self'; // 对元素自身进行高斯模糊 (当 window._place 指向一个 img 元素时,建议使用该选项)
window._blurType = 'no'; // 禁用高斯模糊

兼容性

理论上来说,这个文件在最新版的 Chrome / Firefox / Edge 上正常运行。

技术细节

我们使用动态 import() 并异步加载子模块 module.js / withCache.js / withoutCache.js

参见 import - JavaScript | MDN

由于 CacheStorage API 只在 https 环境下可用,写了个 withoutCache.js 供没有 https 环境加载图片。

参见 CacheStorage - Web APIs | MDN

Analytics

代码主要是从 cfga 那里贺来的,做了些微小的修改。

Repo 协议是 MIT License,作者是 Sukka 大佬。

<script async src="https://cdn.jsdelivr.net/npm/isplib@latest/analytics.js"></script>

Analytics 在页面 load 事件触发时会自动上报数据。你也可以手动调用 window.iga 上报数据。

使用前请设置如下值:

更多用法参见原项目的 README.md