2023.06月刊

开源工具

这里是当月发现的有趣、有用的开源项目…

oclif

https://oclif.io/ 这是一个在Node.js中构建CLI的框架。这个框架是在Heroku CLI的基础上构建的，但可以通用于构建任何自定义CLI。它既适用于带有几个标志选项的单文件CLI，也适用于具有子命令（如git或heroku）的非常复杂的CLI。

特性

参数解析
可配置的主题分隔符
快速
CLI生成器 ⭐️
测试助手
自动文档
插件
钩子
TypeScript可选
自动更新安装器

github-script

https://github.com/actions/github-script 此操作可以轻松地在工作流中快速编写使用GitHub API和工作流运行上下文的脚本

OverlayScrollbars

https://github.com/KingSora/OverlayScrollbars OverlayScrollbars是一个JavaScript滚动条插件，它隐藏了原生滚动条，提供了自定义样式的覆盖滚动条，并保持了原生的功能和感觉。

qnm

https://github.com/ranyitz/qnm QNM是一种通过提供有关已安装模块的快速且集中的信息来解决此问题的工具。它支持 npm 和 yarn ，并允许您快速识别您感兴趣的模块的版本

ink

https://github.com/vadimdemedes/ink 可以用React组件的方式写CLI工具，很棒～！

foalts

https://foalts.org/ 全功能Node.js框架，基于TypeScript-文档齐全

million

https://million.dev/ Million.js可以运行在你熟悉和喜欢的React API上，但使用了超优化的虚拟DOM。它是JS框架基准测试中表现最好的一个.

threlte

https://threlte.xyz/ Threlte是一个渲染器和组件库，用于在Svelte应用程序中以声明和状态驱动的方式构建和渲染three. js场景。

Motion+canvas

https://motioncanvas.io/ TypeScript库，用于使用Canvas API创建动画视频。

rewind-ui

https://rewind-ui.dev/ 可定制的React + Tailwind CSS组件库-一个适合Tailwind CSS思维方式的React组件库。

highlight

https://github.com/highlight/highlight highlight.io 是为下一代开发人员提供的监控软件。比sentry强大

console-ninja

https://console-ninja.com/ 一个很炸裂的console.log插件

chalk-animation

https://github.com/bokub/chalk-animation chalk的花里胡哨版

minisearch

https://github.com/lucaong/minisearch 用于浏览器和Node.js的小型内存全文搜索引擎-该解决方案的优势在于它获取的数据存储在本地，因此允许它离线工作并具有良好的性能

civet

https://civet.dev/ Civet是一种可编译为TypeScript或JavaScript的编程语言，因此您可以使用现有的工具，但可以使用简洁而强大的语法。除了99%的JS/TS兼容性外，还有许多特性。

devalue

https://github.com/Rich-Harris/devalue Like JSON.stringify, but handles

cyclical references (obj.self = obj)
repeated references ([value, value])
undefined, Infinity, NaN, -0
regular expressions
dates
Map and Set
BigInt
custom types via replacers, reducers and revivers

import * as devalue from 'devalue';

let obj = { message: 'hello' };
devalue.uneval(obj); // '{message:"hello"}'

obj.self = obj;
devalue.uneval(obj); // '(function(a){a.message="hello";a.self=a;return a}({}))'

novu

https://novu.co/ 面向开发人员的开源通知基础设施开发通知层是我们在设计新应用程序时经常做的事情。它通常都是一样的，在这里发送一封电子邮件，在那里发送一个推送通知，但在你意识到之前，你必须管理不同渠道的数百个通知。 Novu的目标是帮助开发人员在产品和用户之间创建有意义的事务性通信。所有这些都具有易于使用的API和出色的开发人员体验。

appwrite

https://appwrite.io/ Appwrite是一个安全的开源后端，它抽象了构建现代应用程序所需的常见，复杂和重复任务的复杂性。 Appwrite为您提供了一组安全的API、工具和管理控制台UI，可帮助您快速构建应用，而不会影响安全性。使用Appwrite将用户身份验证和管理、数据和文件存储、运行服务器端代码、图像处理、本地化等功能添加到您的应用中。

Strapi

https://strapi.io/ 最先进的开源无头CMS，可以毫不费力地构建强大的API。 Jun-20-2023 10-03-35.gif

https://github.com/kaleidawave/ezno 一个用Rust编写的JavaScript编译器和TypeScript检查器，专注于静态分析和运行时性能，主要是针对JavaScript比较厉害了，当没有使用TS时，也能体验到同样静态分析能力。 Ezno的核心是JavaScript的类型检查器。类型综合是分析语法和制定条款的性质。通过比较有关术语的信息以及这些术语的使用方式，类型检查器可以在运行时防止错误。

exiftool-vendored.js

https://github.com/photostructure/exiftool-vendored.js 跨平台读取图片的exif信息

UnsuckJS

https://unsuckjs.com/ 使用轻量级JavaScript库逐步增强HTML。没有构建工具，没有编译器，没有麻烦。

Selecto.js

https://github.com/daybrush/selecto Selecto.js是一个允许你使用鼠标或触摸在拖动区域中选择元素的组件。 Jun-23-2023 12-26-44.gif

AutoAnimate

https://auto-animate.formkit.com/ AutoAnimate是一个零配置的插入式动画实用程序，可为您的Web应用程序添加平滑过渡。您可以将其与React，Solid，Vue，Svelte或任何其他JavaScript应用程序一起使用。

octokit.js

https://github.com/octokit/octokit.js 适用于浏览器、Node和Deno的GitHub SDK。

kysely

https://kysely.dev/

Nightwatch

https://nightwatchjs.org/ 测试自动化框架，具有一组强大的工具，可以跨Web和本地移动的应用程序编写，运行和调试测试。

shiki

https://shiki.matsu.io/ 是一个漂亮的语法高亮显示器，Shiki生成的HTML看起来与VS Code中的代码完全相同，并且在静态网站生成器（或动态网站）中工作得很好。

kasper

https://npm.kasper.io/ VS Code的Node Dependency Management UI-支持npm，yarn，pnpm

radash

https://github.com/rayepps/radash Radash是下一个你离不开的工具库。首先，它很强大。有了这些强大的函数，你就可以得到强类型和零依赖关系。如果你能带着一点信心走出来，尝试一下这些功能，我毫不怀疑你会发现自己喜欢上它。它提供了在线playground，你可以在线尝试它提供的方法接口。

Simple Statistics

http://simple-statistics.github.io/docs/ JS中的统计方法-很多函数都很简单，但API很容易理解，涵盖了平均值，偏差，相关性和随机性等领域。精度问题待验证

Typist

https://typist.doist.dev/?path=/docs/readme–docs 基于Tiptap的富文本编辑器组件–一个大胆而又简单的文本编辑器控件。你可以尝试侧栏中的示例。它适用于基本的富文本情况，如编写评论或消息，并且还有一个单行模式。

技术新视界

Deno新版本

https://deno.com/blog/v1.34 Deno 1.34 版引入了一个新功能，可以把 Node.js 程序和 npm 模块打包，成为一个二进制文件，支持 Windows/Mac/Linux 全平台。

Chrome的popover API

https://developer.chrome.com/blog/introducing-popover-api/ 网页的弹出层是很常用的 UI 模式，Chrome 正式推出了 popover API，浏览器内置了弹层组件。

FormRender 2.0

https://juejin.cn/post/7239715294229299257
飞猪团队的FormRender方案，Schama方案值得参考一下。

New CSS color spaces and functions in all major engines

https://web.dev/color-spaces-and-functions/ CSS现在支持颜色空间，允许我们访问sRGB色域之外的颜色。这意味着您可以使用HD色域中的颜色来支持HD（高清晰度）显示。此支持附带了新功能，可以更好地利用Web上的颜色。

重新评估媒体查询中的 px 与 em

https://keithjgrant.com/posts/2023/05/px-vs-em-in-media-queries/ 我们过去常说 em 是媒体查询中使用的最佳单位。到2023年，情况还会是这样吗？

哈啰的Wukong

【第2972期】Wukong 动态化组件能力实践 Wukong 在标准 UI 组件、JS 动态能力、样式支持等方面提供多种功能加持，同时支持自定义组件、自定义 JS Bridge 的能力以满足更复杂、更加定制化的业务场景。

支持 UI & 逻辑动态发布，提高研发 & 运营效率
原生页面内嵌动态化视图的接入方式，接入成本低
Android /iOS 双端侧表现一致，支持实时预览，所见即所得
UI 渲染纯 Native 实现，体积小、性能好、内存少

2023年面向开发人员的35个知识库工具

https://medium.com/promyze/35-knowledge-base-tools-for-developers-in-2023-2584d1ea6bbb

2023年面向Web开发人员的10个开源项目

https://medium.com/geekculture/10-open-source-projects-for-web-developers-in-2023-b972ac745ff

2023年在哪里托管Remix应用程序

https://www.jacobparis.com/content/where-to-host-remix 本文推荐了9个不同的平台，都可以用来作为静态站点的部署。

HTTP/3优先级介绍

https://blog.cloudflare.com/better-http-3-prioritization-for-a-faster-web/

浅谈React新Hook的未来与思想

Hook 革命！浅谈 React 新 Hook 的未来与思想本文通过对新 Hook 的深入讨论，我们可以看到它为 React 组件开发带来的前所未有的可能性和灵活性。懒订阅作为一种新兴的优化方法，将对实际开发产生积极影响。在未来，我们期待 Hook 的更多变革和进步，以满足开发者不断增长的需求。同时，对其他类型的数据源进行懒订阅优化也是一个值得探讨的方向。

ES2023

https://github.com/tc39/ecma262/releases/tag/es2023 虽然网上一有大量文章介绍，但来自官方的消息还是值得了解一下

技术方案

在浏览器选项卡之间共享WebSocket连接

https://javascriptweekly.com/link/140504/rss WebSocket连接就像特殊的通信通道，允许Web浏览器和服务器实时相互通信。但是，当在浏览器中打开多个选项卡或窗口时，每个选项卡或窗口都会建立自己的WebSocket连接。这可能会造成浪费并影响Web应用程序的性能。在这篇博客文章中，作者介绍了可以通过ShareWorker建立多个标签页之间的连接，从而使其共享一个WebSocket连接，从而使Web程序更加高效。

babel-plugin-enhance-log

偏爱console.log的你，肯定会觉得这个插件泰裤辣！一个更好的打印日志的插件，支持自动打印行数，以及自定义样式等。

Playwright

Playwright 自动化测试神器！本文相当于PlayWright的入门教程。

从字符串中选择第n个字符的多种方法

https://christianheilmann.com/2023/06/02/the-many-ways-to-select-the-n-th-character-from-a-string/

配置改动监听

我改了一行公共代码后，同事说要建个没我的小群本文主要讨论了当项目关键配置改动之后导致线上出现问题的一种预防方案，是一个可以轻松尝试的方案。

如何使用SvelteKit构建服务器端渲染（SSR）

https://smashingmagazine.com/2023/06/build-server-side-rendered-svelte-apps-sveltekit/ SvelteKit是一个使用Svelte构建应用程序的框架。您可以使用SvelteKit构建各种应用程序，这些应用程序可以是单页应用程序（SPA）或服务器端渲染（SSR）应用程序等。在本文中，Sriram向您展示了如何构建服务器端呈现的SvelteKit应用程序，并通过遵循此分步指南将其部署到Netlify。

从用户行为到数据：数据采集全景解析

https://www.woshipm.com/data-analysis/5845710.html 本文为读者系统讲解了数据采集的核心原理、埋点技术、工具、组织建设等方面知识。文章探究了采集的整个过程，包括后端交互采集方式、用户行为采集方式（即埋点技术），以及数据采集中的工具、团队组织建设等多方面内容，是产品经理的视角，值得借鉴了解。

考虑数据是怎么来的

用户行为动作的抽象过程，如点击、浏览、登录这些动作抽象为数据
从动作到日志的交互过程，如对浏览这一过程中的交互行为：谁、什么时间、对谁、做了什么动作。
更多的描述——参数的引入，他用的什么设备登录？IP地址是什么？在什么地理位置？用的什么网络？点击的按钮？跳转地址是什么？
公有参数、私有参数、日志长度
日志的格式设计：定常、扩展与嵌套
捕捉、传输、SDK与管道

全埋点与代码埋点

工具要怎么做

业务发展初期，几乎很少在一开始就考虑如何采集数据的。一是没有团队上没有专业领域的人来设计，二是团队更聚焦业务与市场，精力不够，三是不会投入太多的成本在采集数据上。初期的业务产品需要快速试错，敏捷迭代，所以全套的采集方案和快速迭代的产品节奏是对不齐的。绝大多数情况都是在产品快要上线的两到三周前才会思考要看什么数据来监测产品的情况。

组织与流程

PM+研发自提需求自行消化，借助工具进行管理。
专职人员负责采集，借助工具进行管理。

前端项目构建时的资源监控与分析

【第2977期】前端项目构建时的资源监控与分析本文介绍了测量统计性能相关的工具，并且结合具体的前端项目构建案例，分析了构建过程中的资源消耗，从而更好地帮助前端开发者更加深入地理解构建过程，做到知其然更知其所以然。读者在阅读完本文后，下次遇到构建性能优化问题时，也有一定的解决方案策略。

autofit.js

https://github.com/995231030/autofit.js autofit.js是一个可以让你的PC项目自适应屏幕的工具，其原理非常简单，即在scale等比缩放的基础上，向右或向下增加了宽度或高度，以达到充满全屏的效果，使用autofit.js不会挤压、拉伸元素，它只是单纯的设置了容器的宽高。

微前端

深入调研了微前端，还是iframe最香 - 掘金

ECMAScript 2023

ECMAScript 2023 正式发布，有哪些新特性？总结的尚可

如何解决前端领域的竞态问题

如何解决前端领域的竞态问题？在前端常见的搜索，分页，选项卡等切换的场景中。由于网络的不确定性，先发出的请求不一定先响应，这会造成竞态问题。解决竞态问题，我们可以选择「取消」或「忽略」过期请求。

「取消请求」，XMLHttpRequest 可以使用 abort 方法，fetch API 以及 axios 可以使用 AbortController
「忽略请求」，可以基于指令式 promise 或请求 id 的方式封装高阶函数来减少模板代码

自动化页面性能检测系统

【第2984期】搭建自动化 Web 页面性能检测系统 —— 实现篇很良心且没有遮掩的完整技术方案，具有很强的实操价值。

技术好文

Promise是如何工作的

https://www.freecodecamp.org/news/guide-to-javascript-promises/

你的代码过度设计了吗

你的代码过度设计了吗？如何避免？

按照公司的编码规范写代码、遵守公司内的约定是很重要的事情，如果公司内部没有自己的编码规范，还可以参考业内认可的编码规范（这些都是公司前辈们总结的最适用于自己公司的经验）
熟悉设计模式，对于不熟悉的设计模式宁愿不用也不瞎用，保持代码简单易懂（不做一知半解，不炫技）
充分理解需求并有一定前瞻能力，根据业务场景复杂度选择自己熟悉的设计模式（一切抛开场景的设计都是搅屎棍）
编码时有点洁癖，习惯抽取和改动不合理的代码，对代码质量有追求（要认真哦，出了 bug 是要背的，没把握的话可以暂时不改，但要打上标记后续一点点改）
小步快跑，简单点可能也挺好：不要一开始就想着做出完美的方案，很多时候优秀的方案不是设计出来的，而是逐渐演变出来的，一点点优化已有的设计方案比一开始就设计出一个完美的方案容易得多。

前端常见问题分析

http://zoo.zhengcaiyun.cn/blog/article/common-question 文章主要介绍零在数据类型、异步、样式、性能、兼容性几个方面的常见问题和对应定位解决方法，对涵盖了最常见的一些问题。

前端性能优化的方法盘点

前端性能优化，我会从这几个角度去回答你！超级详细！包含以下几个层面的优化措施，不少是偏于老套的“面试向”答法，但方向齐全，可以作为性能优化话题的指导。

网络优化
页面渲染优化
JS优化
图片优化
webpack打包优化
React优化
Vue优化

编写干净高效的React代码-最佳实践和优化技术

https://dev.to/sathishskdev/part-4-writing-clean-and-efficient-react-code-best-practices-and-optimization-techniques-423d

前端食堂技术周刊第 88 期

前端食堂技术周刊第 88 期：Svelte4、NestJS 10、State of CSS、Vitest 1.0 Roadmap

GPT是什么

http://zoo.zhengcaiyun.cn/blog/article/chatgpt 列举了两个在团队内落地的案例，值得考虑借助GPT解决业务团队中的某一些问题。

在VSCode中提高生产力的6个快速技巧

https://techhub.iodigital.com/articles/6-vscode-tips

cmd + option + o 用来删除不必要的导入
f2 重命名变量将自动更新所有实例
通过 Code > Preferences > Keyboard Shortcuts 为常用操作添加快捷操作方式
cmd + . 快速修复linting问题（通过配置keybindings.json）
cmd + ’ 快速修复导入问题通过配置keybindings.json）

有用的DevTools提示和技巧

https://www.smashingmagazine.com/2023/06/popular-devtools-tips/ 作者分享了15个开发者工具使用技巧，有几个确实有惊艳到，可以在特定情况下派上用场的小技巧，同时推荐了这个https://devtoolstips.org/ 网站(他自己做的，包含了149个Tips)

cmd + shift +c 然后 delete 删除某个节点（这个在删除烦人的弹框很有用，之前都是找到再给他display:none）
选中video节点，然后 $0.playbackRate = 2，用来更改视频播放速率
edge浏览器中 cmd + shift + p 然后搜 3D，可以查看z-index、DOM和合成层的3D视图，可视化调试必备

前端JavaScript开发手册- React、Angular和Vue比较

https://www.freecodecamp.org/news/front-end-javascript-development-react-angular-vue-compared/ React、Angular和Vue等前端框架提供了强大的工具和抽象，可以简化交互式和动态用户界面的创建。在本指南中，探讨了这些框架的主要特性和优点，以及它们的相似之处和不同之处(包含组件体系、虚拟DOM、学习曲线、语法、生态、普及型、渲染性能、产物大小、优化技术、可扩展性)。文章特别好！

当你深入到前端开发的世界时，不要把自己限制在一个框架上。熟悉多种框架，以扩展您的技能并适应不同的项目要求。在围绕这些框架的充满活力的社区中，拥抱与其他开发人员合作和学习的机会。

如何使用三个有用的工具来提升您的React技能

https://www.freecodecamp.org/news/upgrade-your-react-skills/ 本文探索了三个强大的React.js工具：Recoil用于状态管理，SWR用于数据获取，Formik用于响应式表单。通过使用这些工具，你可以提高React.js技能，并在动态React生态系统中保持领先地位。

为什么TypeScript不能很好的使用Object.keys?

https://alexharri.com/blog/typescript-structural-typing

interface Options {
  hostName: string;
  port: number;
}

function validateOptions (options: Options) {
  Object.keys(options).forEach(key => {
    if (options[key] == null) { // options[key]会报如下的错
      // @error {w=12} Expression of type 'string' can't be used to index type 'Options'.
      throw new Error(`Missing option ${key}`);
    }
  });
}

技术周边

RabbitMQ

为什么说前端监控系统离不开 RabbitMQ？前端监控系统会收到很多来自用户端的请求，如果直接存入数据库很容易把数据库服务搞挂掉，所以一般会加一个 RabbitMQ 来缓冲。它是生产者往 queue 里放入消息，消费者从里面读消息，之后确认消息收到的流程。当一对多的时候，还要加一个 Exchange 交换机来根据不同的规则转发消息：

direct 交换机：根据 routing key 转发消息到队列
topic 交换机：根据 routing key 转发消息到队列，支持模糊匹配
headers 交换机：根据 headers 转发消息到队列
fanout 交换机：广播消息到交换机下的所有队列
而且消费者可以设置一个消费的并发上限，这样就可以保证服务不会因并发过高而崩溃。

这就是流量削峰的功能。 RabbitMQ 在后端系统中经常能见到，是很常用的中间件。