使用这些工具提高效率！🎅 十二月精选

2025-06-07

使用这些工具提高效率！🎅 十二月精选

距离今年结束仅剩几周时间，让我们来看看 2019 年的最后一个系列吧！

非常感谢所有对之前文章留下积极评价的读者，很高兴知道您可以在项目中使用建议的库！！❤️

中焦

Medium zoom 是一个 JavaScript 库，用于缩放页面上的图像并为其添加不同的效果，例如与目标图像匹配的边距或背景颜色。

样本
 

我们有不同的方法将缩放功能绑定到图像元素：

// CSS selector
mediumZoom('[data-zoomable]')

// HTMLElement
mediumZoom(document.querySelector('#cover'))

// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'))

// Array
const images = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-zoomable]'),
]

mediumZoom(images)
Enter fullscreen mode Exit fullscreen mode

该图书馆提供了几个有趣的功能：

  • 📱 响应式——可在移动设备和桌面设备上扩展
  • 🚀 高性能且轻量级——应该能够达到 60 fps
  • ⚡️ 高清支持——缩放时加载高清版本的图像
  • 🔎 灵活性——将缩放应用于选定的图像
  • 🖱 鼠标、键盘和手势友好——点击任意位置、按下按键或滚动以关闭缩放
  • 🎂 事件处理——当缩放进入新状态时触发事件
  • 📦 自定义 — 设置您自己的边距、背景和滚动偏移
  • 🔧 可插入 — 为缩放功能添加您自己的功能
  • 💎 自定义模板——扩展默认外观以匹配您的应用程序的 UI

网站

 

 

进步

Progressbar.js 是一个用于创建带有动画 SVG 路径的响应式、流畅的进度条的库。它提供了一些内置形状，但也可以使用任何矢量图形编辑器创建自定义形状的进度条。

使用方法非常简单：

var ProgressBar = require('progressbar.js');

// Assuming you have an empty <div id="container"></div> in HTML
var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1);  // Value from 0.0 to 1.0
Enter fullscreen mode Exit fullscreen mode

 

半圆示例（检查结果选项卡）：

自定义形状示例（检查结果选项卡）：

网站
 

 
替代文本

Tailwind CSS 是一个实用优先的快速 UI 开发框架。
与其他 CSS 框架不同，它没有提供一组现成的元素，而是提供了一些可直接在 HTML 模板中使用的实用类。

例如，以下一组样式规则应用于示例模板：

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

生成此输出：

替代文本

其背后的理念是无需编写任何自定义 CSS，而是通过将预先存在的 Tailwind 类直接应用于 HTML 文件来设置元素的样式。
此外，每个实用程序类都可以在不同的断点处有条件地应用，从而轻松构建复杂的响应式界面。

还可以轻松自定义默认设置：

// Example `tailwind.config.js` file
module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}
Enter fullscreen mode Exit fullscreen mode

网站
 

 

标识

Color Thief 可以从图像中提取主色，并为其生成调色板。颜色详细信息以表示红、绿、蓝值的整数数组形式返回，可用于进一步处理。

例子

示例2

当您需要决定在 Web 应用程序中使用哪种颜色集时，它会非常有用。

网站
 

 

ASCII

想要生成一个 ASCII 标题，给你的应用增添一丝书呆子气
吗？ 那就试试 Ascii Today 吧，它是一个有趣的 ASCII 标题生成器，你可以输入你想要的标题，然后可以从输入文本的不同 ASCII 表示形式中进行选择：

替代文本

网站
 

 
12月系列就到这里！明年再来探索新发现……
 

替代文本

文章来源：https://dev.to/paco_ita/be-more-productive-with-这些-tools-december-picks-for-you-ajd
Devto 翻译
PREV
Next JS 对构建网站和应用程序的优势
NEXT
渐进式 Web 应用简介