周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。
📰 News
layui 即将退出历史舞台
layui 官网将于 2021 年 10 月 13 日进行下线。
Webpack 5.54.0 发布
Webpack 5.54.0 现已发布,主要更新内容有:
- Features
- 改进常量折叠以允许跳过更多 && || 和 ?? 分支
- 允许在 webpack 中使用所有的 hashing,用 output.hashFunction 进行配置
- 在模块中使用 eval 时,不再完全从内部图分析中跳出
- Bug 修复
- force bump enhanced - 解决错误的方法
- Performance
- 减少创建 snapshots 时的分配次数
- 添加 output.hashFunction: "xxhash64"一个基于 wasm 的超快速哈希函数
- 改进短字符串序列化时的 UTF-8 转换
- 提高依赖项的 hashing 性能
Taro 3.3.9 发布
新增Taro 小程序端构建后支持CI(持续集成)的插件:@taorjs/plugin-mini-ci。支持构建完毕后自动打开小程序开发者工具、上传作为体验版、生成预览二维码(暂时仅支持微信、字节、百度、支付宝小程序)。
📖 文章
企业微信超大型工程-跨全平台UI框架最佳实践
⭐️ 近 20k Star的项目说不做就不做了,但总结的内容值得借鉴
使用 MediaPipe BlazePose GHUM 和 TensorFlow.js 进行 3D 姿态检测
3D 姿态检测为健身、医疗、动作捕捉等应用开启了全新的设计机会。在浏览器中通过 3D 动作捕捉来驱动角色动画就是一个很酷的案例。快来尝试一下吧~
实时演示版:3d.kalidoface.com/
⭐️ 幽灵依赖的危害
“幽灵依赖” 指的是 项目中使用了一些 没有被定义在其 package.json 文件中 的 包。
zhuanlan.zhihu.com/p/412419619
Partytown: 在Web Worker运行第三方脚本
40个非V8 JavaScript 实现对比
notes.eatonphil.com/javascript-…
Index Signatures in TypeScript
dmitripavlutin.com/typescript-…
Theatre.js: Motion Design
可以通过编程和可视化的方式来为使用Three.js、HTML/SVG甚至是小页面元素或js变量值创建的3D对象设置动画。
20秒完成机器学习模型训练和部署?! 说说 Pipcook 2.0
Webpack 原理系列十:HMR 原理全解析
React 框架运行时优化方案的演进
如何使用 GitHub Actions 自动化开发流程
作者介绍他们公司如何使用 GitHub Actions,将各种开发步骤自动化,举了很多例子,演示了测试、代码格式化、构建、部署的配置文件应该怎么写。
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
重新学习浏览器事件。
推断式预渲染
🛠 工具、软件
Elk: 针对嵌入式系统的小型js引擎
Code2flow: 为动态语言生成调用流程图
支持 JavaScript, Python, Ruby and PHP。
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>
React CountUp
简简单单展示动态数字效果。
next-i18next: 翻译你的 Next.js 应用
react-windows-ui: Windows Fluent风格的UI
demo: virtualvivek.github.io/react-windo…
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,欢迎订阅: