使用这些工具提高效率！❄️ 一月精选

没有什么比收集一些 JavaScript 库来开启新的一年并从中汲取项目灵感更好的方式了！事不宜迟，让我们看看一月会带来什么惊喜。

Sal.js 是一个滚动动画库，注重性能和小巧的占用空间。它使用原生 JavaScript 编写，不会引入任何额外的依赖项。

它基于 Intersection Observer API，允许异步观察目标元素与祖先元素或顶级文档视口的交集的变化。

但请注意，并非所有浏览器都支持此 API：

如果您的目标浏览器不受支持，则需要使用polyfill。

用法

在模板文件中，添加data-sal具有动画名称作为值的属性：

<div data-sal="fade"></div>

<!--
Many other animations are available:
- fade
- slide-up
- slide-down
- slide-left
- slide-right
- zoom-in
- zoom-out
- flip-up
- flip-down
- flip-left
- flip-right
 -->

然后只需在脚本文件中初始化库：

// ES6 modules
import sal from 'sal.js'

// CommonJS modules
var sal = require('sal.js')

sal();

Sal.js 将查找所有具有data-sal属性的元素，并在其在视口中可见时启动动画。动画的属性duration, delay and easing可以根据您的需求进行自定义。

<div
  data-sal="slide-up"
  style="--sal-duration: 3s; --sal-delay: 2s;">
</div>

网站

Headroom.js 是一个轻量级、高性能的 JS 小部件（没有依赖项），可让您对用户的滚动做出反应。

固定标题是一种流行的方法，可以让主导航靠近用户。这可以减少用户快速浏览网站所需的精力，但也存在一些问题……

大屏幕通常采用横向布局，这意味着垂直空间小于水平空间。因此，固定标题可能会占据内容区域的很大一部分。小屏幕通常采用纵向布局。虽然纵向布局可以提供更多垂直空间，但由于屏幕整体高度的限制，一个合理大小的标题仍然会显得非常突兀。

Headroom.js 允许您在适当的时候将元素带入视图，并在其余时间将焦点放在您的内容上。

该库动态地从目标元素中添加和删除 CSS 类，允许开发人员仔细定义每种情况下应该发生的情况：

<!-- initially -->
<header class="headroom">

<!-- scrolling down -->
<header class="headroom headroom--unpinned">

<!-- scrolling up -->
<header class="headroom headroom--pinned">

<style>
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}
</style>

您可以使用多种选项来轻松调整库：

var headroom = new Headroom(elem, {
  "offset": 205,
  "tolerance": 5,
  "classes": {
    "initial": "animated",
    "pinned": "bounceInDown",
    "unpinned": "bounceOutUp"
  }
});
headroom.init();

// to destroy
headroom.destroy();

你可以用不同的演示来测试它。

下面是一个使用摇摆效果的示例：

网站

PWA 资源生成器是由我的朋友Önder Ceylan开发的一款基于Puppeteer的工具。它会自动为你的应用生成图标和启动画面，并将它们直接集成到相关文件（manifest 和 index.html）中。
如果你至少实现过一次 PWA，你就会知道为不同平台创建图标图像，同时还要保持所有平台的尺寸和质量是多么繁琐和耗时。借助 PWA 资源生成器，你可以完全自动化这一步骤，并确保为多个目标设备提供像素完美的图像。

安装和使用

$ npm install --global pwa-asset-generator

$ npx pwa-asset-generator

PWA 资产生成器提供了多种选项来定制生成的资产：

  Options
    -b --background             Page background to use when image source is provided: css value  [default: transparent]
    -o --opaque                 Shows white as canvas background and generates images without transparency  [default: true]
    -p --padding                Padding to use when image source provided: css value  [default: "10%"]
    -s --scrape                 Scraping Apple Human Interface guidelines to fetch splash screen specs  [default: true]
    -m --manifest               Web app manifest file path to automatically update manifest file with the generated icons
    -i --index                  Index HTML file path to automatically put splash screen and icon meta tags in
    -a --path                   Path prefix to prepend for href links generated for meta tags
    -t --type                   Image type: png|jpeg  [default: png]
    -q --quality                Image quality: 0...100 (Only for JPEG)  [default: 100]
    -h --splash-only            Only generate splash screens  [default: false]
    -c --icon-only              Only generate icons  [default: false]
    -f --favicon                Generate favicon image and HTML meta tag  [default: false]
    -l --landscape-only         Only generate landscape splash screens  [default: false]
    -r --portrait-only          Only generate portrait splash screens  [default: false]
    -d --dark-mode              Generate iOS splash screen meta with (prefers-color-scheme: dark) media attr  [default: false]
    -u --single-quotes          Generate HTML meta tags with single quotes  [default: false]
    -g --log                    Logs the steps of the library process  [default: true]