前端周刊 #9 | layui退出历史舞台、姿态检测TensorFlow.js、幽灵依赖危害、代码流程图

563 阅读3分钟

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

📰 News

layui 即将退出历史舞台

layui 官网将于 2021 年 10 月 13 日进行下线。

www.layui.com/

Webpack 5.54.0 发布

Webpack 5.54.0 现已发布,主要更新内容有:

  1. Features
  • 改进常量折叠以允许跳过更多 && || 和 ?? 分支
  • 允许在 webpack 中使用所有的 hashing,用 output.hashFunction 进行配置
  • 在模块中使用 eval 时,不再完全从内部图分析中跳出
  1. Bug 修复
  • force bump enhanced - 解决错误的方法
  1. Performance
  • 减少创建 snapshots 时的分配次数
  • 添加 output.hashFunction: "xxhash64"一个基于 wasm 的超快速哈希函数
  • 改进短字符串序列化时的 UTF-8 转换
  • 提高依赖项的 hashing 性能

github.com/webpack/web…

Taro 3.3.9 发布

新增Taro 小程序端构建后支持CI(持续集成)的插件:@taorjs/plugin-mini-ci。支持构建完毕后自动打开小程序开发者工具、上传作为体验版、生成预览二维码(暂时仅支持微信、字节、百度、支付宝小程序)。

github.com/NervJS/taro…

📖 文章

企业微信超大型工程-跨全平台UI框架最佳实践

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

⭐️ 近 20k Star的项目说不做就不做了,但总结的内容值得借鉴

juejin.cn/post/701092…

使用 MediaPipe BlazePose GHUM 和 TensorFlow.js 进行 3D 姿态检测

3D 姿态检测为健身、医疗、动作捕捉等应用开启了全新的设计机会。在浏览器中通过 3D 动作捕捉来驱动角色动画就是一个很酷的案例。快来尝试一下吧~

实时演示版:3d.kalidoface.com/

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

⭐️ 幽灵依赖的危害

“幽灵依赖” 指的是 项目中使用了一些 没有被定义在其 package.json 文件中 的 包。

zhuanlan.zhihu.com/p/412419619

Partytown: 在Web Worker运行第三方脚本

dev.to/adamdbradle…

40个非V8 JavaScript 实现对比

notes.eatonphil.com/javascript-…

Index Signatures in TypeScript

dmitripavlutin.com/typescript-…

Theatre.js: Motion Design

可以通过编程和可视化的方式来为使用Three.js、HTML/SVG甚至是小页面元素或js变量值创建的3D对象设置动画。

www.theatrejs.com/

20秒完成机器学习模型训练和部署?! 说说 Pipcook 2.0

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

Webpack 原理系列十:HMR 原理全解析

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

React 框架运行时优化方案的演进

mp.weixin.qq.com/s/4Y6DuY5rD…

如何使用 GitHub Actions 自动化开发流程

作者介绍他们公司如何使用 GitHub Actions,将各种开发步骤自动化,举了很多例子,演示了测试、代码格式化、构建、部署的配置文件应该怎么写。

posthog.com/blog/automa…

CSS 的绝对长度单位都不准确

CSS 有几个长度单位属于绝对长度,比如像素 px、厘米 cm、英寸 in、点 pt。但是,这些单位都不是准确长度。

www.smashingmagazine.com/2021/07/css…

JavaScript 中的货币计算

我们在计算金钱的时候,一定要十分严谨,确保每一分钱都计算在内,但是 JavaScript 的 Number 类型却无法胜任这一工作,在本文中,作者将介绍 Number 无法胜任这项工作的原因以及如何在 JavaScript 中正确地进行金钱计算。

www.honeybadger.io/blog/curren…

JavaScript eventing deep dive

重新学习浏览器事件。

web.dev/eventing-de…

推断式预渲染

web.dev/speculative…

🛠 工具、软件

Elk: 针对嵌入式系统的小型js引擎

github.com/cesanta/elk

Code2flow: 为动态语言生成调用流程图

支持 JavaScript, Python, Ruby and PHP。

github.com/scottrogows…

Hotkey: 简单易用的快捷键绑定库

<a href="/page/2" data-hotkey="j">Next</a>
<a href="/help" data-hotkey="Control+h">Help</a>
<a href="/rails/rails" data-hotkey="g c">Code</a>
<a href="/search" data-hotkey="s,/">Search</a>

github.com/github/hotk…

React CountUp

简简单单展示动态数字效果。

github.com/glennreyes/…

next-i18next: 翻译你的 Next.js 应用

github.com/isaachinman…

react-windows-ui: Windows Fluent风格的UI

demo: virtualvivek.github.io/react-windo…

github.com/virtualvive…

ow: 面向人类的函数参数校验工具库

import ow from 'ow';

const unicorn = {
	rainbow: '🌈',
	stars: {
		value: '🌟'
	}
};

ow(unicorn, ow.object.exactShape({
	rainbow: ow.string,
	stars: {
		value: ow.number
	}
}));
//=> ArgumentError: Expected property `stars.value` to be of type `number` but received type `string` in object `unicorn`

github.com/sindresorhu…


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

我的周刊