乐趣区

关于前端:前端周刊-9-layui退出历史舞台姿态检测TensorFlowjs幽灵依赖危害代码流程图

jiezi

周刊收集包含前端（但不限于前端）的文章、新闻、开源我的项目、工具等等，每周一更新。

📰 News

layui 行将退出历史舞台

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

https://www.layui.com/

Webpack 5.54.0 公布

Webpack 5.54.0 现已公布，次要更新内容有：

  1. Features
  2. 改良常量折叠以容许跳过更多 && || 和 ?? 分支
  3. 容许在 webpack 中应用所有的 hashing，用 output.hashFunction 进行配置
  4. 在模块中应用 eval 时，不再齐全从外部图剖析中跳出
  5. Bug 修复
  6. force bump enhanced – 解决谬误的办法
  7. Performance
  8. 缩小创立 snapshots 时的调配次数
  9. 增加 output.hashFunction: “xxhash64″ 一个基于 wasm 的超疾速哈希函数
  10. 改良短字符串序列化时的 UTF-8 转换
  11. 进步依赖项的 hashing 性能

https://github.com/webpack/webpack/releases/tag/v5.54.0

Taro 3.3.9 公布

新增 Taro 小程序端构建后反对 CI（继续集成）的插件：@taorjs/plugin-mini-ci。反对构建结束后主动关上小程序开发者工具、上传作为体验版、生成预览二维码（临时仅反对微信、字节、百度、支付宝小程序）。

https://github.com/NervJS/taro/releases/tag/v3.3.9

📖 文章

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

https://mp.weixin.qq.com/s/JdQmgQ57nWQM99JW_ueFVg

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

https://juejin.cn/post/7010922819143860261

应用 MediaPipe BlazePose GHUM 和 TensorFlow.js 进行 3D 姿势检测

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

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

https://mp.weixin.qq.com/s/tOlWR6aZpPG5L-LKiV2ecg

⭐️ 幽灵依赖的危害

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

https://zhuanlan.zhihu.com/p/412419619

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

https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp

40 个非 V8 JavaScript 实现比照

https://notes.eatonphil.com/javascript-implementations.html

Index Signatures in TypeScript

https://dmitripavlutin.com/typescript-index-signatures/

Theatre.js: Motion Design

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

https://www.theatrejs.com/

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

https://mp.weixin.qq.com/s/Zy7jRcXGYnuwB9WJuSoeGQ

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

https://mp.weixin.qq.com/s/cbYMpuc4hnV9NA4VfqJLvg

React 框架运行时优化计划的演进

https://mp.weixin.qq.com/s/4Y6DuY5rDohgdCm0MP5WBA

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

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

https://posthog.com/blog/automating-a-software-company-with-github-actions

CSS 的相对长度单位都不精确

CSS 有几个长度单位属于相对长度，比方像素 px、厘米 cm、英寸 in、点 pt。然而，这些单位都不是精确长度。

https://www.smashingmagazine.com/2021/07/css-absolute-units/

JavaScript 中的货币计算

咱们在计算金钱的时候，肯定要非常谨严，确保每一分钱都计算在内，然而 JavaScript 的 Number 类型却无奈胜任这一工作，在本文中，作者将介绍 Number 无奈胜任这项工作的起因以及如何在 JavaScript 中正确地进行金钱计算。

https://www.honeybadger.io/blog/currency-money-calculations-in-javascript/

JavaScript eventing deep dive

重新学习浏览器事件。

https://web.dev/eventing-deepdive/

推断式预渲染

https://web.dev/speculative-prerendering/

🛠 工具、软件

Elk: 针对嵌入式零碎的小型 js 引擎

https://github.com/cesanta/elk

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

反对 JavaScript, Python, Ruby and PHP。

https://github.com/scottrogowski/code2flow/

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>

https://github.com/github/hotkey

React CountUp

简简单单展现动静数字成果。

https://github.com/glennreyes/react-countup

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

https://github.com/isaachinman/next-i18next

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

demo: https://virtualvivek.github.io/react-windows-ui/#/

https://github.com/virtualvivek/react-windows-ui

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`

https://github.com/sindresorhus/ow

周刊首发于 GitHub，欢送订阅：

我的周刊

退出移动版