前端技术栈月刊

# 📖 2022-03

# 星推

Github Star 推荐

  • Million (opens new window)

    亮点是不到 1KB 的 Virtual DOM 解决方案，感兴趣可以去看看代码

    该库作者（白宇彤）是马上即将加入 Vercel 实习的学生，年仅 17 岁。

    🔗 链接：https://github.com/aidenybai/million

# 工具

  • hue.tools (opens new window)

    一个颜色混合器，也可以查看各种颜色编码格式，比较直观的寻找颜色灵感

    底层使用的是这两个类库：

    • https://tinycolor.vercel.app/
    • https://gka.github.io/chroma.js/

    🔗 链接：https://hue.tools/?format=hex

  • OpenSumi (opens new window)

    一款帮助你快速搭建本地和云端 IDE 的框架

    🔗 链接：https://opensumi.com/zh

  • tooling.one (opens new window)

    一站式 Web 工具，包含了日常开发用到的一些好用的工具，比如：

    • Image to Base64
    • JSON Format
    • URL Encode/Decode

    🔗 链接：https://tooling.one/

  • PrimeVue (opens new window)

    一个看着还不错的 Vue 3 组件库

    🔗 链接：https://github.com/LuanEdCosta/copy-image-clipboard

  • Freemarketingtools.io (opens new window)

    虽然是市场营销工具集合，不过也提供了不少前端开发用得上的 Web 设计工具、SEO 工具

    🔗 链接：https://www.freemarketingtools.io/

  • astro.build (opens new window)

    一个新型的静态站点构建工具，开源近一年 star 增长速度不错

    🔗 链接：https://astro.build/

  • Git History (opens new window)

    用非常平滑的动画的方式去查看一个文件的历史记录，支持 VSCode 插件，体验非常不错。

    🔗 链接：https://github.com/pomber/git-history

  • Microbundle (opens new window)

    PREACT 作者开发的一款轻量的基于 Rollup 的 📦 打包工具，可用于防止 XSS 的一个类库

    🔗 链接：https://github.com/developit/microbundle

  • pixelmatch (opens new window)

    图像对比算法，可以对比出来两张图片的差异，非常适合作为 UI 组件库的底层 UI 测试工具

    🔗 链接：https://github.com/mapbox/pixelmatch

  • npmgraph (opens new window)

    用可视化的方式探索 NPM 黑洞😄，我们看下 Vue 的依赖

    🔗 链接：https://github.com/npmgraph/npmgraph

  • regex-vis (opens new window)

    提供了可视化的界面来编辑正则表达式

    🔗 链接：https://github.com/npmgraph/npmgraph

  • toolight.cn (opens new window)

    又一个 Web 在线工具集合，提供如下功能

    🔗 链接：https://toolight.cn/

  • Color Wheel (opens new window)

    一个色轮选色工具，由 Canva 提供

    🔗 链接：https://www.canva.com/colors/color-wheel/

  • smalldev.tools (opens new window)

    又一个 Web 在线工具集合

    🔗 链接：https://smalldev.tools/

  • react-arborist (opens new window)

    基于 React 的一个功能比较全的树形展示控件

    🔗 链接：https://github.com/brimdata/react-arborist

  • Mock Service Worker (opens new window)

    前端开发中总会需要模拟 API 请求的场景， MSW 是一个比较好的解决方案。

    🔗 链接：https://mswjs.io/

# 教程

  • CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web (opens new window)

    以往前端在实现文本高亮的时候，可能会通过动态的渲染多余的 dom，设置 CSS 样式实现高亮效果。

    此文中提到的 CSS Custom Highlight API 是一个未来的可以用于实现文本高亮的解决方案，目前还是一个在进行中的 W3C 提案，大部分浏览器还不支持。不过可以作为新 API 了解一下。

    实现文本高亮的关键点：

    • 使用 Range API 圈定文本高亮范围
    • 使用 CSS Highlight API 设置高亮范围
    • 结合 CSS 伪类 ::highlight 设置高亮样式

# 资源

  • New MDN (opens new window)

    MDN 发布了全新的新主页，阅读体验得到了进一步提升，竟然提供了暗色模式，个人认为文档、新闻、博客类的站点都应该提供 暗色模式 让阅读者以沉浸式的阅读体验，也不伤害眼睛。

    🔗 链接：https://hacks.mozilla.org/2022/03/a-new-year-a-new-mdn/

  • Does it ARM (opens new window)

    这个站点可以查询一个应用是否适用于 Apple M1 芯片，大部分我在使用的应用应该都支持了，至少是向下兼容的。

    🔗 链接：https://doesitarm.com/

# 应用

  • Icon shelf (opens new window)

    面向开发者的免费的图标管理工具，平时如果你开发中用到的自己设计的图标比较多，可能正需要这样一款工具来管理你的图标。并且提供了一件拷贝成 React、Vue、Embed 形式的组件功能。

    🔗 链接：https://icon-shelf.github.io/

← 📖 2022-04 →