湖中剑 前端周刊 #18 | 动态图片、Chrome 97、依赖注入、Web IDE、Monorepo

655 阅读3分钟

周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。

📖 文章

动态图片生成方案

在业务需求中,根据返回数据动态生成图片分享是很常见的场景。比如在起点读书小程序中,每本书都需要生成一个动态图片,包含:书名、作者、类别和当前页面小程序码,这几个内容都是会动态改变的。

那如何抽象化&高性能的实现这一类需求呢?下面我们一起来探讨动态图片的生成方案。

mp.weixin.qq.com/s/0dWfL3ChI…

Chrome 97 发布 WebTransport,QUIC 协议小试牛刀

2022年1月4日正式发布的Chrome 97,带来了哪些新特性呢?

mp.weixin.qq.com/s/upOra3ONz…

ES6 以上版本代码要不要转码成 ES5?

为了兼容老的浏览器,尤其是IE系列,使用ES6以上规范的前端代码往往使用Babel等转码工具转码成ES5的代码。

距离发布ES6的2015年已经过去了6年了,现在浏览器对于ES6的兼容性如何呢?

mp.weixin.qq.com/s/fSRpl25Pi…

前端 CI/CD 上如何保证依赖安装速度达到优解?

前端应用在构建部署时长上,通常受代码拉取速度、以及机器配置高低等因素影响。排除这些我们往往不可控的因素外,仍可以通过对 npm 依赖安装方式进行优化,来达成更快的构建速度。

以项目存在 50 个以上生产依赖包,最优秀的依赖安装方式比最差的安装方式,往往能够节省 20s 以上的时间。

安装依赖的命令行有:npm install、npm ci 。在进行真正测试前,先了解下这两命令行的差异,进而明白他们为啥安装速度差异这么大。

xie.infoq.cn/article/675…

2022 年的 CSS

随着 2021 年的结束,让我们一起来看看 2022 年,我们可以期待哪些 CSS 特性将会在浏览器中出现。

juejin.cn/post/704826…

2021 JavaScript Rising Stars

2021年度 JavaScript Rising Stars 报告出来了,去年Star数量增加最多的项目竟然是zx!

risingstars.js.org/2021/en

聊聊 nestjs 中的依赖注入

在使用 nestjs 过程中会发现 nest 框架和后端同学使用的 Springboot 以及前端三大框架之一的 Angular 都有很多相似之处。没错这三个框架都有相似的设计,并都实现了依赖注入,本文就围绕依赖注入这个话题,展开讨论一下依赖注入是什么?以及在 nestjs 中详细的实现过程。

juejin.cn/post/704950…

🛠 工具、软件

molecule

一个轻量的 Web IDE UI 框架。

Molecule 是一款受 VSCode 启发,使用 React.js 构建的 Web IDE UI 框架。我们设计了类似 VSCode 的扩展(Extension)机制,可以帮助我们使用 React 组件快速完成对 Workbench 的自定义

核心功能:

  • 内置 React 版本的 Visual Studio Code Workbench UI
  • 基本兼容 Visual Studio Code 的 ColorTheme
  • 支持使用 React 组件自定义 Workbench UI 样式
  • 内置 Monaco Editor Command Palette、Keybinding等模块,并支持扩展
  • 支持 i18n,简体中文、English 、한국어 3 种语言
  • 内置一个简单的 Settings 模块,支持在线编辑修改以及扩展
  • 内置默认的 Explorer, Search 等组件,并支持扩展
  • Typescript 支持

在线预览地址:dtstack.github.io/molecule-ex…

github.com/DTStack/mol…

Monorepo 工具集

Turborepo 推荐的 monorepo 工具集,在此可以找到每个子领域的推荐方案和备选方案。多看别人的依赖推荐开阔下思路,还可以避免自己造低级轮子。

turborepo.org/docs/guides…


周刊首发于GitHub,欢迎订阅:

我的周刊