前端技术栈月刊

# 📖 2022-04

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章、教程以及应用，每月28日更新，本期第四十期期。2022 年度第四期。

# 星推

Github Star 推荐

  • facebook/lexical

    Lexical 是一个基于 React 的可扩展的文本编辑器框架，它提供出色的可靠性、可访问性和高性能的特性

# 工具

  • node-cron/node-cron

    Node.js 下的任务调度工具

  • deckgo/deckdeckgo

    deckdeckgo 可以制作精美的 slider, 写 PPT 又有了新方式

  • google/lovefield

    Google 出品的支持 web app 的关系型数据库

  • adonisjs/core

    为 Node.js 打造的功能齐全的 Web 框架

  • rowyio/rowy

    一款开源的类似 Airtable 的界面 UI 的数据库管理工具

  • yairEO/knobs

    类似于 dataGUI 的用户界面，常用于对参数微调

  • ssleptsov/ninja-keys

    和 KBar 的功能如出一辙，在 Web 工具型应用中，提供命令行式的界面可以提高生产力

  • AykutSarac/jsonvisio.com

    JSON 可视化工具，用图的方式将 JSON 数据可视化展现，更好的探索 JSON 数据结构

  • Charlie85270/tail-kit

    一个基于 TailwindCSS 2.0 编写的组件套件，支持 250+ 组件，还有一些模版可以选择

  • Chalk.ist

    Chalk.ist 是一个可以将你的代码转变成好看的图片的工具，类似的有 ray.so

  • antfu/vue-starport

    基于 Vue 的，在多个路由下可服用组件方案，并且提供了丝滑的动画过度效果

  • mikecao/umami

    Umami 是一个可以支持免费独立部署的站点访问分析工具，是良好的 Google Analytics 代替品

  • djyde/ossart

    一个开发者“玩具”，可以将你近 6 年的 GitHub 贡献图打印出来，你可以将其装裱起来，作为挂画之类的

    GitHub 官方也曾推出过类似的“玩具”，https://skyline.github.com/

  • tinylibs/tinypool

    Node.js 线程池类库，Fork 自 (piscina)[https://github.com/piscinajs/piscina]，但是更轻量

  • unsplash/unsplash-js

    Unsplash API，轻松获取 Unsplash 图片

  • Open Broadcaster Software

    开源免费的视频流编辑工具

# 教程

  • Web 存储 (opens new window)

    这篇文章讲解了浏览器支持的每一种离线存储方案的优劣：

    • SessionStorage 特定于选项卡，其作用范围涵盖选项卡的整个生存期。它对于存储 IndexedDB 键等少量会话特定信息可能很有用。此机制是同步的，会阻塞主线程，因此应谨慎使用。其大小限制约为 5MB，并且只能包含字符串。由于它特定于选项卡，因此无法从 web worker 或 service worker 进行访问。

    • LocalStorage 是同步的，会阻塞主线程，因此应避免使用。其大小限制约为 5MB，并且只能包含字符串。无法从 web worker 或 service worker 访问 LocalStorage。

    • Cookie 有其用途，但不应该用于存储。Cookie 随每个 HTTP 请求一起发送，因此只能存储少量数据，数据一多就会显著增加每个 Web 请求的大小。Cookie 是同步的，不能从 Web worker 进行访问。与 LocalStorage 和 SessionStorage 一样，cookie 仅限于字符串。

    • 每个现代浏览器都支持 IndexedDB 和缓存存储 API。它们都是异步的，不会阻塞主线程。可以从window对象、Web worker 和 service worker 访问它们，从而轻松地在代码中的任何位置使用。

    作者的建议：

    • 对于加载应用程序和基于文件的内容所需的网络资源，请使用缓存存储 API（service worker 的一部分）。
    • 对于其他数据，请使用 IndexedDB（带有 Promise 包装器）。

    我的建议：

    赞同上文作者的建议，但是对于其他数据，也许还要根据实际项目情况而定，虽然 localStorage 有其大小限制为 5MB，但是它已经能解决大部分Web 应用场景了，简单应用场景 localStorage 足够应对了，对于复杂应用那么就用 IndexedDB 吧。

  • Mastering CSS Transitions with React 18 (opens new window)

    使用 React 18 新的 Hooks useTransition 实现 CSS transition 过渡效果

# 资源

  • VectorWiki

    该站点提供了超过 120,000 个 SVG 品牌 Logo 可以下载，不错的资源站点

  • Doodle icons

    400+ 手绘风格的图标资源

  • Grainients

    https://www.weareheroes.digital/resources/grainients

    2000+ 颗粒状磨砂风渐变背景可下载

# 应用

← 📖 2022-05 →