├── .github ├── ISSUE_TEMPLATE │ └── ---issue---.md └── workflows │ └── release.yml ├── .gitignore ├── HOW-TO-RELEASE.md ├── README.md ├── docs ├── 2021-10-13.md ├── 2021-10-27.md ├── 2021-11-10.md ├── 2021-11-24.md ├── 2021-12-22.md ├── 2021-12-8.md ├── 2021-7-21.md ├── 2021-7-7.md ├── 2021-8-18.md ├── 2021-8-4.md ├── 2021-9-1.md ├── 2021-9-15.md ├── 2021-9-29.md ├── 2022-1-19.md ├── 2022-1-5.md ├── 2022-10-20.md ├── 2022-11-9.md ├── 2022-2-23.md ├── 2022-2-9.md ├── 2022-3-23.md ├── 2022-3-9.md ├── 2022-4-20.md ├── 2022-4-6.md ├── 2022-5-18.md ├── 2022-5-5.md ├── 2022-6-15.md ├── 2022-6-29.md ├── 2022-7-13.md ├── 2022-7-27.md ├── 2022-8-10.md ├── 2022-8-24.md ├── 2022-9-21.md ├── 2022-9-7.md ├── 2024-10-11.md ├── 2024-10-24.md ├── 2024-11-22.md ├── 2024-11-8.md ├── 2024-12-20.md ├── 2024-12-5.md ├── 2024-2-23.md ├── 2024-2-29.md ├── 2024-3-15.md ├── 2024-3-29.md ├── 2024-4-11.md ├── 2024-4-25.md ├── 2024-5-17.md ├── 2024-5-30.md ├── 2024-6-13.md ├── 2024-6-28.md ├── 2024-7-11.md ├── 2024-7-25.md ├── 2024-8-23.md ├── 2024-8-9.md ├── 2024-9-20.md ├── 2024-9-5.md ├── 2025-1-16.md ├── 2025-1-3.md ├── 2025-2-14.md ├── 2025-2-27.md ├── 2025-3-14.md ├── 2025-3-28.md ├── 2025-4-10.md ├── 2025-4-27.md ├── 2025-5-16.md ├── 2025-5-30.md └── _config.yml ├── package-lock.json ├── package.json └── scripts └── index.js /.github/ISSUE_TEMPLATE/---issue---.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 投稿 issue 模板 3 | about: 投稿模板 4 | title: 技术周刊投稿 - 标题 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | - 标题： 11 | - 链接： 12 | - 类别： 13 | - 来源： 14 | - 推荐理由（文章评论/解读）： 15 | - 您的名字： 16 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: release 2 | on: workflow_dispatch 3 | jobs: 4 | release: 5 | name: Release 6 | runs-on: ubuntu-latest 7 | steps: 8 | - name: Checkout 9 | uses: actions/checkout@v2 10 | with: 11 | fetch-depth: 0 12 | - name: Setup Node.js 13 | uses: actions/setup-node@v1 14 | with: 15 | node-version: 16 16 | - name: NPM install 17 | run: | 18 | npm ci 19 | - name: generate markdown 20 | id: gen-markdown 21 | env: 22 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 23 | run: | 24 | node ./scripts/index.js 25 | - name: Open pull request 26 | env: 27 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 28 | uses: gr2m/create-or-update-pull-request-action@v1 29 | with: 30 | author: Weekly Bot 31 | branch: release/new-post 32 | body: This PR was auto generated. 33 | commit-message: 'add: ${{ steps.gen-markdown.outputs.issues }}' 34 | title: 'add: new post' -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /HOW-TO-RELEASE.md: -------------------------------------------------------------------------------- 1 | # 周刊发布流程 2 | 3 | 1. 触发 Github Actions 中的 release action： 4 | 5 | ![image](https://user-images.githubusercontent.com/9262426/157417402-55796bb6-77c4-484b-8b96-a3c3ac67e137.png) 6 | 7 | 2. 执行完毕后会产出一个 Pull request： 8 | 9 | ![image](https://user-images.githubusercontent.com/9262426/157417941-903b7cb5-62a8-48f7-a6d0-826fcd1debb4.png) 10 | 11 | 3. 本次 Pull request 所在分支为 `release/new-post`，可以本地进行一些修改后提交，更新 Pull request。一些需要手动修改的内容： 12 | 13 | 1. 增加头图 14 | 2. 调整分类 15 | 3. 增加`第X期` 16 | 17 | 4. 发给其他评委进行审阅。 18 | 5. 如果要修改，回到步骤 3。 19 | 6. 如果不需要修改，合入 Pull request 即可。相关 Issue 会被自动关闭。 20 | 7. 更新首页的 README.md。 21 | 9. 在其他渠道发布： 22 | 23 | 1. 微信公众号 24 | 2. 知乎 25 | 3. 邮件 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊 2 | 3 | 前端技术双周刊，是百度 KFive 团队推出的技术期刊，记录值得分享的技术好文。 4 | 5 | 希望拓宽同学们的技术视野，营造良好的技术氛围。不止关心脚下的路，还要多看看远处的风景。 6 | 7 | 欢迎投稿，推荐或自荐文章，您可以通过提 [issue](https://github.com/SearchFeed/weekly/issues) 的方式发起投稿。 8 | 9 | ### 内容构成 10 | - 主体：高质量技术文章 11 | - 补充：针对文章的评论/解读，或者其它原创内容 12 | 13 | ### 发布时间 14 | 双周五发布（如遇节假日往后顺延） 15 | 16 | ### 发布渠道 17 | 1. [KFive 知乎专栏](https://www.zhihu.com/column/c_1184770014971883520) 18 | 2. 公众号『百度技术培训中心』=> 『学习成长』菜单 => 『KFiveTeam』 19 | 20 | 欢迎关注公众号『百度技术培训中心』 21 |

22 | 百度技术培训中心 23 |

24 | 25 | ### 周刊日志 26 | - [前端技术双周刊第 63 期](https://searchfeed.github.io/weekly/2025-5-16) 27 | - [前端技术双周刊第 62 期](https://searchfeed.github.io/weekly/2025-4-27) 28 | - [前端技术双周刊第 61 期](https://searchfeed.github.io/weekly/2025-4-10) 29 | - [前端技术双周刊第 60 期](https://searchfeed.github.io/weekly/2025-3-28) 30 | - [前端技术双周刊第 59 期](https://searchfeed.github.io/weekly/2025-3-14) 31 | - [前端技术双周刊第 58 期](https://searchfeed.github.io/weekly/2025-2-27) 32 | - [前端技术双周刊第 57 期](https://searchfeed.github.io/weekly/2025-2-14) 33 | - [前端技术双周刊第 56 期](https://searchfeed.github.io/weekly/2025-1-16) 34 | - [前端技术双周刊第 55 期](https://searchfeed.github.io/weekly/2025-1-3) 35 | - [前端技术双周刊第 54 期](https://searchfeed.github.io/weekly/2024-12-20) 36 | - [前端技术双周刊第 53 期](https://searchfeed.github.io/weekly/2024-12-5) 37 | - [前端技术双周刊第 52 期](https://searchfeed.github.io/weekly/2024-11-22) 38 | - [前端技术双周刊第 51 期](https://searchfeed.github.io/weekly/2024-11-8) 39 | - [前端技术双周刊第 50 期](https://searchfeed.github.io/weekly/2024-10-24) 40 | - [前端技术双周刊第 49 期](https://searchfeed.github.io/weekly/2024-10-11) 41 | - [前端技术双周刊第 48 期](https://searchfeed.github.io/weekly/2024-9-20) 42 | - [前端技术双周刊第 47 期](https://searchfeed.github.io/weekly/2024-9-5) 43 | - [前端技术双周刊第 46 期](https://searchfeed.github.io/weekly/2024-8-23) 44 | - [前端技术双周刊第 45 期](https://searchfeed.github.io/weekly/2024-8-9) 45 | - [前端技术双周刊第 44 期](https://searchfeed.github.io/weekly/2024-7-25) 46 | - [前端技术双周刊第 43 期](https://searchfeed.github.io/weekly/2024-7-11) 47 | - [前端技术双周刊第 42 期](https://searchfeed.github.io/weekly/2024-6-28) 48 | - [前端技术双周刊第 41 期](https://searchfeed.github.io/weekly/2024-6-13) 49 | - [前端技术双周刊第 40 期](https://searchfeed.github.io/weekly/2024-5-30) 50 | - [前端技术双周刊第 39 期](https://searchfeed.github.io/weekly/2024-5-17) 51 | - [前端技术双周刊第 38 期](https://searchfeed.github.io/weekly/2024-4-25) 52 | - [前端技术双周刊第 37 期](https://searchfeed.github.io/weekly/2024-4-11) 53 | - [前端技术双周刊第 36 期](https://searchfeed.github.io/weekly/2024-3-29) 54 | - [前端技术双周刊第 35 期](https://searchfeed.github.io/weekly/2024-3-15) 55 | - [前端技术双周刊第 34 期](https://searchfeed.github.io/weekly/2024-2-29) 56 | - [前端技术双周刊第 33 期](https://searchfeed.github.io/weekly/2022-11-9) 57 | - [前端技术双周刊第 32 期](https://searchfeed.github.io/weekly/2022-10-20) 58 | - [前端技术双周刊第 31 期](https://searchfeed.github.io/weekly/2022-9-21) 59 | - [前端技术双周刊第 30 期](https://searchfeed.github.io/weekly/2022-9-7) 60 | - [前端技术双周刊第 29 期](https://searchfeed.github.io/weekly/2022-8-24) 61 | - [前端技术双周刊第 28 期](https://searchfeed.github.io/weekly/2022-8-10) 62 | - [前端技术双周刊第 27 期](https://searchfeed.github.io/weekly/2022-7-27) 63 | - [前端技术双周刊第 26 期](https://searchfeed.github.io/weekly/2022-7-13) 64 | - [前端技术双周刊第 25 期](https://searchfeed.github.io/weekly/2022-6-29) 65 | - [前端技术双周刊第 24 期](https://searchfeed.github.io/weekly/2022-6-15) 66 | - [前端技术双周刊第 23 期](https://searchfeed.github.io/weekly/2022-5-18) 67 | - [前端技术双周刊第 22 期](https://searchfeed.github.io/weekly/2022-5-5) 68 | - [前端技术双周刊第 21 期](https://searchfeed.github.io/weekly/2022-4-20) 69 | - [前端技术双周刊第 20 期](https://searchfeed.github.io/weekly/2022-4-6) 70 | - [前端技术双周刊第 19 期](https://searchfeed.github.io/weekly/2022-3-23) 71 | - [前端技术双周刊第 18 期](https://searchfeed.github.io/weekly/2022-3-9) 72 | - [前端技术双周刊第 17 期](https://searchfeed.github.io/weekly/2022-2-23) 73 | - [前端技术双周刊第 16 期](https://searchfeed.github.io/weekly/2022-2-9) 74 | - [前端技术双周刊第 15 期](https://searchfeed.github.io/weekly/2022-1-19) 75 | - [前端技术双周刊第 14 期](https://searchfeed.github.io/weekly/2022-1-5) 76 | - [前端技术双周刊第 13 期](https://searchfeed.github.io/weekly/2021-12-22) 77 | - [前端技术双周刊第 12 期](https://searchfeed.github.io/weekly/2021-12-8) 78 | - [前端技术双周刊第 11 期](https://searchfeed.github.io/weekly/2021-11-24) 79 | - [前端技术双周刊第 10 期](https://searchfeed.github.io/weekly/2021-11-10) 80 | - [前端技术双周刊第 9 期](https://searchfeed.github.io/weekly/2021-10-27) 81 | - [前端技术双周刊第 8 期](https://searchfeed.github.io/weekly/2021-10-13) 82 | - [前端技术双周刊第 7 期](https://searchfeed.github.io/weekly/2021-9-29) 83 | - [前端技术双周刊第 6 期](https://searchfeed.github.io/weekly/2021-9-15) 84 | - [前端技术双周刊第 5 期](https://searchfeed.github.io/weekly/2021-9-1) 85 | - [前端技术双周刊第 4 期](https://searchfeed.github.io/weekly/2021-8-18) 86 | - [前端技术双周刊第 3 期](https://searchfeed.github.io/weekly/2021-8-4) 87 | - [前端技术双周刊第 2 期](https://searchfeed.github.io/weekly/2021-7-21) 88 | - [前端技术双周刊第 1 期](https://searchfeed.github.io/weekly/2021-7-7) 89 | -------------------------------------------------------------------------------- /docs/2021-10-13.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#8-2021.10.13 2 | 3 | ![前端技术双周刊_1](https://user-images.githubusercontent.com/9262426/137092266-075e8262-fff9-4829-aaa0-f0d7b71bbcc9.png) 4 | 5 | ## 前端框架 6 | 7 | - [san-composition](https://github.com/baidu/san-composition) 8 |
San 框架支持了 Composition api 🍻🍻🍻，欢迎使用。 9 | 10 | - [从理念到 LRU 算法实现，起底未来 React 异步开发方式](https://zhuanlan.zhihu.com/p/420486501) 11 |
由 React Suspense 的能力引申到所有异步操作场景，我们可以得到的启发。 12 | 13 | ## JavaScript 14 | 15 | - [JavaScript ES6 Symbol 终极教程](https://zhuanlan.zhihu.com/p/419876620) 16 |
Symbol 知识点查漏补缺。 17 | 18 | - [Enumerating and analyzing 40+ non-V8 JavaScript implementations](https://notes.eatonphil.com/javascript-implementations.html) 19 |
除了主流的 V8、JavaScriptCore、SpiderMonkey 以外，其实还有很多种版本的 JavaScript 引擎实现，本文列举了用于各种不同场景的40+ JavaScript 引擎。 20 | 21 | - [An Introduction to Speculative Optimization in V8](https://ponyfoo.com/articles/an-introduction-to-speculative-optimization-in-v8) 22 |
V8 的开发者，介绍 V8 是如何在运行时通过推断变量类型优化执行效率的。 23 | 24 | ## Node.js 25 | 26 | - [那些你应该说再见的 npm 祖传老库](https://mp.weixin.qq.com/s/1KRUysvbYo69qf2UPRC7Og) 27 |
随着 Node.js 版本不断更新，官方提供了很多新库，社区中的一些库已经可以废弃了。 28 | 29 | - [Node.js 的底层原理](https://zhuanlan.zhihu.com/p/375276722) 30 |
很详细的一篇文章。 31 | 32 | - [NodeConf Remote Oct 18-21](https://www.nodeconfremote.com/) 33 |
Node.js 相关的一个会议，十月下旬开始，可以在线观看。 34 | 35 | ## 端智能&智能化 36 | 37 | - [怎样理解前端智能化这一新浪潮？](https://mp.weixin.qq.com/s/xGaNNV_CHzKb3r4B9sWtVA) 38 |
针对近年来兴起的前端智能化方向，从概念、问题和难点、应用场景等角度给出了作者的一些深入思考。 39 | 40 | - [和你说说代码推荐](https://mp.weixin.qq.com/s/ZY4cj0UvJvPUVogf-0uzWw) 41 |
一篇科普性的短文，介绍了代码智能（Code Intelligence）领域一个有趣的子方向：代码推荐。 42 | 43 | ## More About Web 44 | 45 | - [Safe DOM manipulation with the Sanitizer API](https://web.dev/sanitizer/) 46 |
把 HTML 字符串直接渲染到页面上是很危险的行为，一不小心就会触发 XSS 问题，Sanitizer API 提案就是为了解决这个问题。 47 | 48 | - [Simplifying Form Styles With accent-color](https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/) 49 |
使用accent-color简化表单元素的样式定制。 50 | 51 | - [深入 WebAssembly 之解释器实现篇](https://mp.weixin.qq.com/s/hktDuC1nky06tAaAi-mwMA) 52 |
介绍了 Wasm 解释器的工作原理和实现思路。 53 | 54 | ## 扩展阅读 55 | 56 | - [用随机梯度下降来优化人生](https://zhuanlan.zhihu.com/p/414009313) 57 |
李沐大佬的一点人生经验。 58 | 59 | - [Chrome is the new Safari. And so are Edge and Firefox.](https://nielsleenheer.com/articles/2021/chrome-is-the-new-safari-and-so-are-edge-and-firefox/) 60 |
不仅国内在反垄断，最近业界呼吁苹果开放 ios 中浏览器内核的声音越来越多，这篇文章写了作者对苹果这一做法的思考。 61 | 62 | - [Facebook 崩溃始末](https://zhuanlan.zhihu.com/p/417401983) 63 |
汇总了多篇针对 Facebook 10月4日崩溃的分析文章，让我们一探究竟。 64 | 65 | 编辑：梅旭光 审阅：胖总&Mr.Q&三水清 66 | -------------------------------------------------------------------------------- /docs/2021-10-27.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#9-2021.10.27 2 | 3 | ![前端技术双周刊_2](https://user-images.githubusercontent.com/4032009/138925202-12e2297f-6ecb-46e2-bd8d-d5bec63a30c3.png) 4 | 5 | ## JavaScript 6 | 7 | - [How to Fill an Array with Initial Values in JavaScript](https://dmitripavlutin.com/javascript-fill-array/) 8 |
看似简单的问题可能也有一些陷阱 9 | 10 | - [怎样判断一个引用类型变量是 Proxy 的实例？](https://juejin.cn/post/6865910564817010702) 11 |
通常大家可能都能想到用 instanceof 操作符做判断，但是却不能符合预期。本文提出了一种解决办法，借助 Symbol.toStringTag 方法和 Proxy 可以代理自身的特性完成判断。Proxy 和 Symbol 都属于元编程的范畴，能力很强大。 12 | 13 | - [Naive UI 组件的源码解读](https://mp.weixin.qq.com/s/JdBmq6WPzDeo5GI3YWLDTw) 14 |
本文一层层源码级剖析了 Naive UI 的 Button 完整过程，可以发现对于组件库这个领域来说，绝大部分的构思都是花在如何设计可扩展的样式系统上，从 Ant Design、Element UI 使用 Less 来组织样式系统，再到 Material Design 使用 CSS-in-JS，如 styled-components 来组织样式系统，再到现在 Naive UI 使用 CSS Render 来组织样式系统。大家在组件库的开发实践中也可以从中参考借鉴。 15 | 16 | - [clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript) 17 |
Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript. 18 | 19 | ## CSS 20 | 21 | - [重新构想原子化 CSS](https://antfu.me/posts/reimagine-atomic-css-zh) 22 |
文章从 [Tailwind CSS](https://tailwindcss.com/) / [Windi CSS](https://cn.windicss.org/) 的利弊出发，介绍了自己的原子化 CSS 引擎 [UnoCSS](https://github.com/antfu/unocss)，拥有几个特点：直观且完全可定制，支持可变修饰配置，提供大量预设并且支持自定义预设、性能强大等。文章中作者深入思考和动手实践能力值得学习。 23 | 24 | ## Node.js 25 | 26 | - [patch-package](https://zhuanlan.zhihu.com/p/424952162) 27 |
patch-package 可以帮你『优雅』的修改 node_modules 下的代码 28 | 29 | - [Node.js v17来了，看看有哪些新功能](https://mp.weixin.qq.com/s/JliFSL-118HOrlliBkJiiQ) 30 |
Node.js v17 版本已发布，取代了 v16 做为当前版本，新的 v17 版本提供了一些新功能：基于 Promise 的其它核心模块 API、错误堆栈尾部增加 Node.js 版本信息、OpenSSL 3.0 支持、v8 JavaScript 引擎更新至 9.5。Node.js 的奇数版本不是稳定的版本（例如，当前的 Node.js v17 ），它的生命周期很短，可以尝鲜，不过不推荐用于生产环境。 31 | 32 | ## 端智能 33 | 34 | - [说一说 Web 端侧 AI](https://mp.weixin.qq.com/s/9PoFZVs7jiI992y6MWLqUQ) 35 |
一篇浅尝辄止的入门文章，带你了解端智能的概念、应用场景、优势和局限性，Web 端智能的架构与流程等内容。 36 | 37 | ## 前端框架 38 | 39 | - [React 全新文档来了](https://zhuanlan.zhihu.com/p/424425002) 40 |
React 官方文档内容过于陈旧。从去年10月开始，React 团队的 Rachel Nabors 开始推进新文档的编写。时隔一年，[React 新文档 Beta 版](https://beta.reactjs.org/)终于上线了。此外，React 全新文档的技术选型也值得我们借鉴。 41 | 42 | ## 算法 43 | 44 | - [SELF-PARKING CAR IN 500 LINES OF CODE](https://trekhleb.dev/blog/2021/self-parking-car-evolution/) 45 |
如何用500行 TS 代码实现自动泊车功能？在这篇文章中，作者从0到1介绍了如何使用遗传算法，在500行代码以内实现一个简单场景下的自动泊车功能。文章内不仅提供了详细的代码解释，完整的代码实现，还提供了一个[在线模拟器](https://trekhleb.dev/self-parking-car-evolution)直观地查看每一代遗传算法的训练结果。 46 | 47 | - [音频可视化：采样、频率和傅里叶变换](https://cjting.me/2021/08/07/fourier-transform-and-audio-visualization/) 48 |
在很多音乐播放器中经常会看到一排随音乐跳动的柱子动画效果，大家有没有想过该如何实现呢？好奇的话请戳 49 | 50 | ## 开源产品 51 | 52 | - [微软发布 vscode.dev](https://zhuanlan.zhihu.com/p/424134878) 53 |
和前段时间 github 推出的`github.dev`有点像，不过更纯粹，不会和 github 账户绑定 54 | 55 | - [Semi Design](https://mp.weixin.qq.com/s/_QQA13sOG1-kBQp5Fdt0Hg) 56 |
抖音系推出的面向企业级应用的设计系统 57 | 58 | 59 | ## 拓展阅读 60 | 61 | - [前端 DDD 思考](https://zhuanlan.zhihu.com/p/421300074) 62 |
复杂的业务系统无论前端还是后端，都面临着巨大的挑战，除了系统本身的功能之外，最大的风险在于业务逻辑需要被准确实现的同时，给研发团队的实现时间却很紧张，紧随而来的系统的代码在长时间迭代中，越来越难以维护。作者受到 DDD 的启发，探索了 DDD 在前端领域的可能性，给出了一套标准建模步骤，并结合 Mobx 和 React 说明如何实现。对于具有复杂业务场景的前端需求具有很大的参考价值。 63 | 64 | - [CORS 讲解](https://jakearchibald.com/2021/cors/) 65 |
CORS 的详细介绍及正确的使用姿势 66 | 67 | - [从 Web 图标演进历史看最佳实践](https://mp.weixin.qq.com/s/fubW5UTFoqe94XZUdTETVQ) 68 |
在目前组件化开发的大背景下，通过分析不同实现方案的优缺点，建立起一套当下图标的最佳实践，减少了流程中的沟通和容易出错的人工操作，高效地达成了设计和实现的一致性。 69 | 70 | - [做一名真正的软件工程师](https://mp.weixin.qq.com/s/_YsFab4yuaNkDMVc_55qwQ) 71 |
章老师近期的分享精华 72 | 73 | - [关于系统复杂度的碎碎念](https://mp.weixin.qq.com/s?__biz=Mzk0MDIwNzM2MA==&mid=2247484408&idx=1&sn=a47e9da5a93882ae3492caffed97d0a3) 74 |
从阅读 [Complexity has to live somewhere](https://ferd.ca/complexity-has-to-live-somewhere.html) 和《a philosophy of software design》联想到的如何管理系统复杂度问题。1. 系统可以设计得复杂，只要复杂的部分不常修改就可以了。2. 经常修改的部分与不经常修改的部分可以进行拆分。3. 重复的工作一定可以配置化。4. 工程师不应该抗拒复杂度 75 | -------------------------------------------------------------------------------- /docs/2021-11-10.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#10-2021.11.10 2 | 3 | ![前端技术双周刊_2](https://tva1.sinaimg.cn/large/008i3skNly1gw9w4fa214j30p00an40u.jpg) 4 | 5 | ## JavaScript 6 | 7 | - [Writing clean JavaScript tests with the BASIC principles](https://yonigoldberg.medium.com/fighting-javascript-tests-complexity-with-the-basic-principles-87b7622eac9a) 8 |
作者认为很多团队没有做好单元测试覆盖的一个重要原因，不是大家不想做，而是测试用例写的太差劲，导致无法持续，以至于形同虚设。所以作者给出了写单测的5个原则（BASIC），通过例子说明了遵循它的好处 9 | - [用 TypeScript 类型运算实现一个中国象棋程序](https://github.com/xufei/type-chess) 10 |
用TypeScript类运算符实现，思路上非常有趣 11 | 12 | ## CSS 13 | 14 | - [A Guide To CSS Debugging](https://www.smashingmagazine.com/2021/10/guide-debugging-css/) 15 |
本文将常见的 CSS 问题分为4类，分别讲了对应的 debug 方法。1. Overflow of content from its parent. 2. Inheriting browser inconsistencies. 3. Unexpected inheritance from the cascade. 4. CSS resiliency failures from DOM changes 16 | - [聊聊纯 CSS 图标](https://zhuanlan.zhihu.com/p/430423521) 17 |
作者提出了一种使用图片实现 CSS 图标的方案，同时又能够支持可缩放、可着色、彩色图标等要求 18 | 19 | ## Node.js 20 | 21 | - [Web Streams Everywhere](https://css-tricks.com/web-streams-everywhere-and-fetch-for-node-js/) 22 |
stream 是对 I/O 抽象的标准 API，在前端业务场景中应用越来越广泛。这里对 node/web stream 的用法做了详细的讲解 23 | - [Is Deno Still a Thing? A Look at the Status of the Node Killer](https://blog.bitsrc.io/is-deno-still-a-thing-a-look-at-the-status-of-the-node-killer-884d47981d09) 24 |
Deno 正式发布一年多了，比起当初要替代 Node.js 的雄心，现在好像没有什么水花。但实际上它也在稳健的发展，看看它最近的进展吧 25 | - [Node.js 后端框架 star 数排名](https://zhuanlan.zhihu.com/p/431730018) 26 |
2021年11月更新的，可以作为 Node.js 后端框架选型参考 27 | 28 | ## 前端框架 29 | 30 | - [不要再拿组合式 API 与 React Hooks 来对比了！](https://mp.weixin.qq.com/s/xvRP7pIq41dC1KDlhgtjJQ) 31 |
Vue 的组合式 API 在设计之初受到过 React Hooks 的启发，且这两者都可以把逻辑抽象成函数的组合，来实现逻辑的内聚与复用，在视觉上有相似之处。但是本质上组合式 API 与 React Hooks 的心智模型还是大不相同的 32 | 33 | ## 开源产品 34 | 35 | - [北海 (Kraken) v0.9 — 支持 QuickJS 首屏性能再提升 20%](https://zhuanlan.zhihu.com/p/429278372) 36 |
Kraken 0.9版本加入了几大新特性：1. 支持 QuickJS 作为 JavaScript Engine；2. 支持 HTML 文件的解析和渲染；3. 支持 HTTP 协议的缓存特性；4. 支持 Vue/React 官方工具链；5. 支持模块热更新；6. 支持 querySelector / querySelectorAll 37 | - [XState](https://mp.weixin.qq.com/s/rHgUYOTyMKYupuJal_vY_Q) 38 |
一个比较标准的有限状态机的实现，并可以通过图形化的方式转换为状态图的形式。同时也是一个状态管理库，但状态驱动的思维和 Redux 等库有很大不同 39 | 40 | ## 工具 41 | 42 | - [npkill](https://mp.weixin.qq.com/s/53U0VBp5h4iiktfxqLhTcw) 43 |
电脑空间不够用了，这个工具可以帮你安全快速的清理电脑上的 node_modules 44 | 45 | ## 扩展阅读 46 | 47 | - [Hermes 即将成为 React Native 默认的 JS 引擎](https://mp.weixin.qq.com/s/1Zlj2bmKJngU2z8-l4uNFw) 48 |
重点介绍了过去两年来在推动 Hermes 成为 React Native 最佳 JavaScript 引擎方面取得的各项激进展。RN 官方团队有信心通过更多改进让 Hermes 成为各类平台上 React Native 中的默认 JS 引擎 49 | - [iOS 端容器之 WKWebView 那些事](https://mp.weixin.qq.com/s/39u-48KvO-Fmkn9t0nJ-fA) 50 |
文章描述了 WKWebView 使用中常见的4个问题：请求代理问题、Cookie 管理问题、全面屏适配问题和 WebContent 进程崩溃问题，同时也给出了对应的解决办法 51 | - [元宇宙下的前端现状](https://mp.weixin.qq.com/s/oFgOvPa0ZtBCJmgtnFKAZA) 52 |
最近元宇宙一词爆火，作为大家口中的“互联网的最终形态”，需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不会终止的世界。上面提到的各项技术，和目前前端关联比较大的，便是 AR、VR，探索元宇宙下的前端～ 53 | -------------------------------------------------------------------------------- /docs/2021-11-24.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#11-2021.11.24 2 | 3 | ![前端技术双周刊_11](https://tva1.sinaimg.cn/large/008i3skNly1gwq9h0xc6aj30p00anjtp.jpg) 4 | 5 | ## JavaScript 6 | - [TypeScript 系列之 Narrowing](https://zhuanlan.zhihu.com/p/432622039) 7 |
Narrowing 即类型收窄，TypeScript 中将类型自动推导为更精确类型的过程叫类型收窄。本文涵盖了代码中几乎所有类型收窄的情况。 8 | 9 | - [浅谈 MessageChannel](https://zhuanlan.zhihu.com/p/432726048) 10 |
基本涵盖了 MessageChannel 的所有应用场景 11 | 12 | - [How to Debounce and Throttle Callbacks in Vue](https://dmitripavlutin.com/vue-debounce-throttle/) 13 |
在 Vue 中使用 Debounce 和 Throttle 需要注意的问题 14 | 15 | ## CSS 16 | 17 | - [Responsive Layouts, Fewer Media Queries](https://css-tricks.com/responsive-layouts-fewer-media-queries/) 18 |
不用 media queries 如何实现响应式设计？本文提供了一套纯 CSS 方案，包括基于容器宽度改变背景色，在不同大小屏幕下改变元素位置、显示或隐藏某个元素、改变一行元素个数等。不知不觉，CSS 的能力已经变得这么完善了！ 19 | 20 | ## Node.js 21 | - [装饰器+依赖注入开发 Node 后台接口](https://zhuanlan.zhihu.com/p/433149145) 22 |
这篇文章适合于对控制反转和 AOP 切面编程感兴趣的同学 23 | 24 | ## 前端工程化 25 | - [【翻译】Rust 是 JavaScript 基础设施的未来](https://mp.weixin.qq.com/s/n_ZeNp1MjWiA4bb62oto7A) 26 |
Rust 以其强大的性能和优秀的内存管理机制，现在正越来越多地被用来取代 JavaScript 成为 Web 生态系统的一部分，如压缩、编译、打包、N-API、WASM 等等。附：[原文链接](https://leerob.io/blog/rust) 27 | 28 | ## 拓展阅读 29 | - [抖音背后的 RTC 优化技术揭秘](https://mp.weixin.qq.com/s/BhVM6i3ZPwTwTqJoT3qR1g) 30 |
针对抖音中的不同场景要求，总结了基于清晰度、流畅度、实时性指标的优化策略最佳实践 31 | 32 | - [大漠：我认识的 W3C 规范](https://mp.weixin.qq.com/s/sND2srCSi0k1bQnIkXxmvw) 33 |
针对 W3C 规范很详尽的介绍，建议收藏保存，当做一个目录索引，需要的时候查一查 34 | 35 | - [Sorting colors in JavaScript](https://tomekdev.com/posts/sorting-colors-in-js) 36 |
本文介绍了如何把一堆杂乱无章的颜色进行排序展示的方法，以提供良好的视觉体验 37 | 38 | - [【翻译】TypeScript 4.5 正式发布](https://zhuanlan.zhihu.com/p/435054926) 39 |
11.17日 TypeScript 4.5正式发布，这里查看 [官方原文](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) 40 | 41 | ## 开源工具 42 | 43 | - [execa](https://github.com/sindresorhus/execa) 44 |
可以用来替代child_process的友好版本。拥有 Promise 接口，更好的 windows 系统支持，最大支持100MB Buffer 等特点 45 | 46 | - [typescript-boilerplate](https://github.com/metachris/typescript-boilerplate) 47 |
typescript 项目脚手架，支持 TS4，集成了 esbuild 打包，支持 Node.js 和浏览器项目 48 | 49 | -------------------------------------------------------------------------------- /docs/2021-12-22.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#13-2021.12.22 2 | 3 | ![前端技术双周刊](https://user-images.githubusercontent.com/9262426/147057545-85e992c0-25f3-41a1-9092-8e4c97355e82.png) 4 | 5 | ## JavaScript 6 | 7 | - [Deep-copying in JavaScript using structuredClone](https://web.dev/structured-clone/) 8 |
一个用于深拷贝的新 API，解决了痛点问题，不过目前支持程度还不是很好。 9 | 10 | - [Web 图像组件设计的最佳实践](https://mp.weixin.qq.com/s/-T5107cpL_HsW-JP6LeHSg) 11 |
看看 Next.js 中的 Image 组件设计有哪些可以借鉴之处。 12 | 13 | - [Performance Implications of JavaScript Errors](https://calendar.perfplanet.com/2021/performance-implications-of-javascript-errors/) 14 |
JavaScript 异常会对页面性能造成多大影响？ 15 | 16 | - [Array.prototype.groupBy to the rescue!](https://www.charpeni.com/blog/array-prototype-group-by-to-the-rescue) 17 |
groupBy 进入 stage 3 了，又一个 lodash 中的函数要被实现了。 18 | 19 | ## 包管理 20 | 21 | - [Enrolling all npm publishers in enhanced login verification and next steps for two-factor authentication enforcement](https://github.blog/2021-12-07-enrolling-npm-publishers-enhanced-login-verification-two-factor-authentication-enforcement/) 22 |
NPM 将强制所有有发包权限的用户使用更高安全级的登录方式，将分位几个步骤执行，最终希望所有重要包的作者都使用 2FA。这应该会避免很多恶意包的出现。 23 | 24 | ## 浏览器 25 | 26 | - [探秘 WKWebView](https://mp.weixin.qq.com/s/l9D4V0ON3uJ0HfsJ7bpJiQ) 27 |
详细了解 WKWebView。 28 | 29 | ## 开源产品 30 | 31 | - [Flutter 2.8 正式发布](https://flutter.cn/posts/announcing-flutter-2-8) 32 |
这次正式版主要关注的是移动平台性能，也包含了更方便的应用接入后端服务的特性。与此同时发布的还有 Dart 2.15 正式版，增加了对并发性能的重大改进，也添加了新的语言特性，比如构造函数拆分和枚举类型的增强，也进行了性能优化，使得运行时内存降低了 10%。 33 | 34 | - [VueUse](https://zhuanlan.zhihu.com/p/439711824) 35 |
VueUse 是一个基于 Composition API 的实用函数集合，帮助你快速实现一些常见的功能，让你在 Vue3 中开发更加得心应手。 36 | 37 | - [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3) 38 |
带来 JIT engine，Colored box shadows，Scroll snap API，Multi column layout 等大量新特性。 39 | 40 | - [Fastify 发布了 3.25.0，以及新的文档](https://github.com/fastify/fastify/releases/tag/v3.25.0) 41 |
新的文档分成了 Guides 和 Reference 两部分。https://www.fastify.io/docs/latest/ 42 | 43 | - [undici v4.12.0](https://github.com/nodejs/undici/releases/tag/v4.12.0) 44 |
undici 是 Node.js 官方开发的 http 1.1 网络库，用来解决 Node.js 中网络库使用太繁琐的问题。同类库有 node-fetch 等。新发布了 4.12.0 版本，离 stable 越来越近了。 45 | 46 | - [express v4.17.2](https://github.com/expressjs/express/releases/tag/4.17.2) 47 |
express 发布了新版本，主要是依赖的更新以及问题修复，还在更新的意义大于更新内容了。上次发布 4.17.1 还是在 2019 年五月，两年前了。 48 | 49 | ## 拓展阅读 50 | 51 | - [新书《程序员数学》](https://book.douban.com/subject/35689348/) 52 |
百度 KFive 团队翻译的新书上市，本书以程序员的方式来学习数学，希望大家喜欢。 53 |
![image](https://user-images.githubusercontent.com/9262426/147058254-5b2fac84-58ef-4774-ba74-9dae62f9eb51.png) 54 | 55 | - [React Conf 2021 Recap](https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html) 56 |
回顾 React Conf 2021。其中黄玄作为 Meta 员工，也以 React 开发者的身份进行了分享。 57 | 58 | - [2021 Linux Foundation annual report](https://www.linuxfoundation.org/tools/linux-foundation-annual-report-2021/) 59 |
年末了，很多人都在忙着写年度总结。先来看看 Linux Foundation 关于开源社区的年度总结吧。 60 | 61 | - [Node Congress 2022 February 17th–18th, 2022](https://nodecongress.com/) 62 |
又一个 Node.js 会议 63 | 64 | - [The Metaverse: Abstracted Reality And The Future Of Tokenized Life](https://pizzaparty.substack.com/p/the-metaverse-abstracted-reality) 65 |
元宇宙很火，但什么是元宇宙却没有定论。作者通过这篇文章描绘了他认为的元宇宙。 66 | 67 | - [Log4j vulnerability explained: Prevent Log4Shell RCE by updating to version 2.17.0](https://snyk.io/blog/log4j-rce-log4shell-vulnerability-cve-2021-4428/) 68 |
近期 Log4j 库的漏洞影响很大，这篇文章介绍了漏洞的原理以及解决方式。该漏洞虽然不会影响到写 JS 的同学，但这一事件可以引发很多思考。 69 |
首先还是老生常谈的依赖库安全问题，对于线上项目，一定要检查自己项目的依赖，及时跟进依赖安全问题。[Why you should check-in your node dependencies](https://www.jackfranklin.co.uk/blog/check-in-your-node-dependencies) 70 |
再来就是目前的开源社区模式，很多重要的基础库是由一些单纯出于爱好的开发者维护的，由于这些库过于底层，他们可能没有什么名气，并不会因为这个库获得收入。但这种纯粹出于爱好的维护行为是否能够持续，是值得商讨的。或许随着开源社区发展，sponsor 制度可以被更多人接受，又或者我们可以有一种其他的激励付费制度提供给开源项目维护者。[PROFESSIONAL MAINTAINERS: A WAKE-UP CALL](https://blog.filippo.io/professional-maintainers/?utm_campaign=Adventures%20in%20Nodeland&utm_medium=email&utm_source=Revue%20newsletter) 71 | ![image](https://user-images.githubusercontent.com/9262426/146879059-22179038-32e5-41cd-97b3-15fa38c758f0.png) 72 | -------------------------------------------------------------------------------- /docs/2021-12-8.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#12-2021.12.8 2 | 3 | ![前端技术双周刊_5](https://user-images.githubusercontent.com/17450747/145038623-c49dbefc-fdd4-4737-8d7d-142aa4aadbf1.png) 4 | 5 | ## JavaScript 6 | - [requestAnimationFrame 执行机制探索](https://mp.weixin.qq.com/s/ocFcBRjj8xzizF5ebFepdA) 7 |
本文通过对 requestAnimationFrame 的全方位解读带我们探索浏览器动画执行机制 8 | 9 | - [重排、重绘、合成，你真的懂吗？](https://mp.weixin.qq.com/s/57aMCVDjuVswEFFep3omLQ) 10 |
本文主要介绍了重排、重绘、合成的基本概念、触发时机、影响范围以及其优化策略。 11 | 12 | - [看向未来 - 近期 TC39 提案汇总](https://mp.weixin.qq.com/s/AxwT588VKRxnlkBlXICMpQ) 13 |
TC39 提案汇总介绍，包含近半年全部已经落地的提案，以及近期有进展的尚未落地的提案。 14 | 15 | - [图解 ESM](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) 16 |
随着浏览器支持越来越广泛，Vite 等编译工具的兴起，是时候回顾一下这篇讲解 ESM 的经典文章了。 17 | 18 | ## Node.js 19 | - [Node.js 多进程/线程 —— 日志系统架构优化实践](https://mp.weixin.qq.com/s/s3DeAxrEbVmqtCHGP9lstg) 20 |
通过日志系统解密和解压缩优化实践作为引子，详细介绍了 Node.js 中多进程/多线程实现和通信方式 21 | 22 | ## 前端智能化 23 | - [智能设计之布局详解](https://zhuanlan.zhihu.com/p/415512216) 24 |
本文先从用户注意力分布和设计原则的角度出发介绍了什么是好的布局设计，然后从实现角度介绍了当前主流的布局方式：基于约束的布局和 Auto Layout 布局。再引申出近年来出现的智能布局生成方法，包括一些成熟的可用数据集和训练模型，最后给出了可参考的布局评价标准。 25 | 26 | ## 设计工具 27 | - [Figma 自动布局指南](https://mp.weixin.qq.com/s/-p8bsUoKPCRIZZffEssUFw) 28 |
Auto Layout 自动布局是 Figma 的核心卖点之一，可以解放设计师的大部分重复劳动。但是从技术角度来看，这不就是 Flexbox 吗？可以说这是技术赋能设计的一个典范，但反过来工程师也可以了解到怎么样把晦涩的技术思维转化为易用的产品功能。 29 | 30 | ## 端智能 31 | - [Paddle.js & PaddleClas 实战 ——『寻物大作战』AI 小游戏](https://mp.weixin.qq.com/s/GP1lc3FZ6lQyD7FJfU67xw) 32 |
『寻物大作战』是一款基于 Paddle.js & PaddleClas 能力打造的 AI 小游戏，通过一套端到端的图像分类模型来实现物体识别的效果。所依赖的技术主要包含两大部分：百度飞桨图像分类套件 PaddleClas 和基于 JavaScript 的前端深度学习推理引擎 Paddle.js。对比采用网络传输数据至服务端进行推理的方案，性能优势显而易见，是一个更优的选择。 33 | 34 | - [再添神器！Paddle.js 发布 OCR SDK](https://mp.weixin.qq.com/s/ivrYFOO1iWErLFc2JlIJ1g) 35 |
PaddleOCR 是百度开源的超轻量级文字识别模型套件，提供了数十种文本检测、识别模型，旨在打造一套丰富、领先、实用的文字检测、识别模型/工具库，助力使用者训练出更好的模型，并应用落地。 36 | 37 | ## 开源产品 38 | 39 | - [Mitosis](https://github.com/BuilderIO/mitosis) 40 |
Mitosis 原本指细胞的有丝分裂，这里指的是一份组件代码，可以编译成多种不同的框架语言版本运行。可以在 [Playground](https://mitosis.builder.io/) 这里体验 41 | 42 | ## 拓展阅读 43 | 44 | - [2021 年 GMTC 全球大前端技术大会上有哪些值得我们关注？](https://www.zhihu.com/question/502936541/answer/2260235978) 45 |
附gmtc内容和资料：https://gmtc.infoq.cn/2021/shenzhen/schedule 46 | 47 | - [聊聊 vue 中的 keep-alive](https://mp.weixin.qq.com/s/PXaK6E9TAceoTa5I-PR_hQ) 48 |
本文介绍了 Vue 中的内置组件组件以及组件的具体用法。同时也分析了组件的一些内部原理，以及作者对于 keep-alive 的运行的一些总结 49 | 50 | - [图片加载异常兜底方案](https://juejin.cn/post/6945040754255331336) 51 |
针对图片加载异常的情况给出了比较全面的解决方案 52 | 53 | - [前端工程师应该为用户体验负责](https://mp.weixin.qq.com/s/CoqW5x9vMN87U3h5fuEoSw) 54 |
一些基础的交互体验常识，在新一代的前端开发中被大量忽视。比如点击反馈、边界异常处理、HTML 语义化。张鑫旭分析了产生这个困境的原因，以及解决方式。不过对于我们更多的意义在于提高这方面的意识，先有意识才能有行动 55 | 56 | - [英伟达 AI 产品：打字生成图片](https://mp.weixin.qq.com/s/J4IK4hG_SZmKDk2qFW_wXQ) 57 |
英伟达最新的 AI 模型 GauGAN2，不仅能根据字词生成逼真风景照，还能实时用文字P图！创意满分！ 58 | 59 | - [容器并不能解决一切问题](https://mp.weixin.qq.com/s/HKnW50EfxBnKtNyz5OfW3Q) 60 |
我们的行业在过去十年中取得了令人难以置信的进步，这在一定程度上要归功于 Docker、Docker Compose 和 Kubernetes 等技术。然而，我们仍在研究如何在我们所处的多样化环境中进行开发。 61 | 62 | -------------------------------------------------------------------------------- /docs/2021-7-21.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2021.7.21 2 | 3 | ![前端技术双周刊_1](https://user-images.githubusercontent.com/4032009/126340953-a0299962-2d24-4903-b0e1-2bed3ecf6f7d.png) 4 | 5 | ## JavaScript 6 | 7 | - [Sparkplug — a non-optimizing JavaScript compiler](https://v8.dev/blog/sparkplug) 8 |
V8 has a new super-fast non-optimising compiler, which improves V8 performance on real-world benchmarks by 5–15%. 9 | 10 | - [如何实现一个零延迟的定时器？](https://zhuanlan.zhihu.com/p/379637806) 11 |
很多人都知道，setTimeout是有最小延迟时间的，根据 MDN 文档 setTimeout 实际延时比设定值更久的原因：最小延迟时间中所说：在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度）。 12 | 13 | - [一起学规范系列 —— Object.keys() 的顺序是如何定义的？](https://zhuanlan.zhihu.com/p/389201653) 14 |
Object.keys() 是一个我们在写代码时非常常用的获取对象属性键值对中的键列表的方法，于此同时我们会发现它返回的键数组顺序和我们申明的属性不一致。本文将基于最新的 ECMAScript® 2022 Language Specification 来看看 Object.keys() 返回的属性值顺序究竟是如何定义的。 15 | 16 | - [深入理解 TypeScript 高级用法](https://zhuanlan.zhihu.com/p/136254808) 17 |
初用 TypeScript 开发的同学一定有这样的困扰：代码代码提示并不智能，似乎只能显式的定义类型，才能有代码提示，无法理解这样的编程语言居然有这么多人趋之若鹜；各种各样的类型报错苦不堪言，本以为听信网上说 TypeScript 可以提高代码可维护性，结果却发现徒增了不少开发负担；显式地定义所有的类型似乎能应付大部分常见，但遇到有些复杂的情况却发现无能为力，只能含恨写下若干的 as any 默默等待代码 review 时的公开处刑；项目急时间紧却发现 TypeScript 成了首要难题，思索片刻决定投靠的 Anyscript，快速开发业务逻辑，待到春暖花开时再回来补充类型。双倍的工作量，双倍的快乐只有自己才懂。为了避免以上悲剧的发生或者重演，我们只有在对它有更加深刻的理解之后，才能在开发时游刃有余、在撸码时纵横捭阖。 18 | 19 | ## Node.js 20 | 21 | - [2021年最值得了解的 Node.js 工具](https://mp.weixin.qq.com/s/DGzPPSyBfhn8xL72fPc3bw) 22 |
文章的灵感来源于，社群中某大佬分享一个自己耗时数月维护的github项目 awesome-nodejs 。或许你跟我一样会有一个疑惑，github上其实已经有个同类型的awesome-nodejs库且还高达41k⭐，重新维护一个新的意义何在？当你深入对比后，本质上还是有差别的，一个是分类体系粒度更细，其次是对中文更友好的翻译维护，也包括了对国内一些优秀的开源库的收录。最后我个人认为通过自己梳理，也能更好地做复盘和总结。 23 | 24 | - [用 Rust 和 N-API 开发高性能 Node.js 扩展](https://zhuanlan.zhihu.com/p/234914336) 25 |
N-API 也发布一段时间了，社区中有很多 Native addon 也慢慢迁移到了 N-API，比如 bcrypt , sse4_crc32 等。N-API 弥补了之前 nan 最痛的跨 V8 版本 ABI 不兼容的问题。但即使是迁移到了 N-API，编写 native addon 也有一些编写代码之外的痛点。用 Rust 替代 C/C++ 看起来是一个很美好的选择，Rust 有现代化的包管理器: Cargo ，经过这么多年的发展在生态上尤其是与 NodeJS 重叠的服务端开发 、跨平台 CLI 工具、跨平台 GUI (electron) 等领域有了非常多的沉淀。比起 C/C++ 生态，Rust 生态的包属于只要有，都可以直接用的状态，而 C/C++ 生态中的第三方代码则属于肯定有，但不一定能直接用的状态。这种状态下，用 Rust 开发 Node addon 少了很多选择，也少了很多选择的烦恼。 26 | 27 | ## 工程化 28 | 29 | - [swc 很好，也还不够好](https://zhuanlan.zhihu.com/p/386730674) 30 |
这是一篇总结性文章，先抛出结论：swc 暂时还无法在生产环境使用，swc 很好，也还不够好。 31 | 32 | ## 拓展阅读 33 | 34 | - [GMTC（全球大前端技术大会）内容和资料](https://gmtc.infoq.cn/2021/beijing/schedule) 35 | 36 | - [十年磨一剑，WebAssembly是如何诞生的？](https://mp.weixin.qq.com/s/pl6dsF-D6Q5tBKtG9jn8lQ) 37 |
创造一个编程语言最好的时间是10年前，其次是现在。从 Emscripten 到 asm.js 再到 WebAssembly，从一个业余项目到 W3C 标准，差不多是整整10年。 38 | 39 | - [深入理解 WKWebView（基础篇）—— 聊聊 cookie 管理那些事](https://mp.weixin.qq.com/s/jZP2DsAa5OV91wdNMw39cA) 40 |
cookie 技术的便捷性使得它在多种场景中被广泛使用，有时候甚至存在滥用情况，对同一 cookie 实例，前端、客户端、服务端都可以轻易的进行增删改查，我们在享受其便捷性的同时，也有必要确保其被正确、可控的使用。本文将在前系列文章的基础上，继续深入 WKWebView 源码，聊聊 cookie 管理那些事，希望给大家带来一些新的视角和认知，揭开 cookie 管理的迷雾。 41 | 42 | - [前端机器学习简史](https://mp.weixin.qq.com/s/kNBMlewGVo2DOPaqgPBCug) 43 |
提到前端智能化，就不得不说机器学习，因为这所谓的前端“革命”就是由机器学习/深度学习发起的，在一开始，机器学习作为人工智能的一门分支学科发展而来，主要研究的便是如何让机器具备像人类一样的学习能力。但渐渐地，机器学习从人工智能领域慢慢向基础领域拓展，由所谓的应用科学慢慢地变为向互联网一样的基础设施，然而真正的前端智能化并未如前面所说的那样简单。 44 |
> 编者注：机器学习、简史、革命，作者用词儿都很『大』，实则是一篇 pipcook 软文，不过用作学习了解也还是能有所收获。 45 | 46 | - [100亿美金设计工具独角兽Figma，国产化的模仿者们如火如荼](https://zhuanlan.zhihu.com/p/390271059) 47 |
这篇文章不会讲太多 Figma 的特性，而是从 Web 前端和设计工具的发展去讨论。从技术难度来说，做类似 Figma 这样的产品，要比做 Canva 这类产品难的多，举个不太恰当的例子，就好比开发 Photoshop 和美图秀秀的难度区别。而国内做类似 Figma 的产品，大概是2018年开始的。开发周期基本上也要1年-2年的时间，产品也都集中在2020年之后上线。 48 |
> 编者注：这篇文章介绍了 Figma 的发展历史以及国内4款模仿者的基本情况，并在最后给出了自己对于国内设计工具方向的预测和判断。 49 | 50 | 希达&旭光编，胖总&穆老板审 51 | -------------------------------------------------------------------------------- /docs/2021-7-7.md: -------------------------------------------------------------------------------- 1 | ## 前端技术双周刊-2021.7.7 2 | 3 | ### JavaScript 4 | 5 | [ES2021 Now Approved; Here's the Features (Quickly)](https://h3manth.com/ES2021/) 6 |
1.支持逻辑赋值运算符 Logical Assignment Operators (&&= ||= ??=), 2. 支持数字分隔符 Numeric Separators (1_000), 3. 支持 Promise.any & AggregateError, 4. 新增 String.prototype.replaceAll, 5. 新增 WeakRefs & FinalizationRegistry Objects 7 | 8 | [Promise 和 async/await 的异常处理，原来还有这种坑！](https://zhuanlan.zhihu.com/p/387485307) 9 |
Promise 和 async/await 在 JavaScript、TypeScript 中已经很常见了，但你有遇到过这个报错(Uncaught in promise)吗？这篇文章为你分析此类问题的成因和解决办法。 10 | 11 | [JS 是怎样运行起来的](https://zhuanlan.zhihu.com/p/383959486) 12 |
有的同学可能已经知道，JS 是通过 JS 引擎运行起来的，JS 引擎有很多种，比如 Chrome 使用的 V8 引擎，Webkit 使用的是 JavaScriptCore，React Native 使用的是 Hermes。今天我们主要来分析一下比较主流的 V8 引擎是怎样运行 JS 的。 13 |
编者注：一篇浏览器V8引擎执行 JS 的入门级流程讲解。 14 | 15 | [JavaScript 事件循环：从起源到浏览器再到 Node.js](https://mp.weixin.qq.com/s/E0vu7kJLcgDdJRVrAeyEIA) 16 |
很多文章都在讨论事件循环 (Event Loop) 是什么，而几乎没有人讨论为什么 JavaScript 中会有事件循环。博主认为这是为什么很多人都不能很好理解事件循环的一个重要原因 —— 知其然不知其所以然。所以本文试图抛砖引玉，从一些更溯源的方式来与大家探讨 event loop，希望大家能从中有些收获。 17 | 18 | ### Nodejs 19 | 20 | [POSIX Threads Programming](https://hpc-tutorials.llnl.gov/posix/) 21 |
This tutorial is ideal for those who are new to parallel programming with pthreads. A basic understanding of parallel programming in C is required. For those who are unfamiliar with Parallel Programming in general, the material covered in EC3500: Introduction to Parallel Computing would be helpful. 22 |
编者注：一个讲解 pthreads 的教程，Node.js 中的 worker_thread 在 Linux 中就是使用的 pthreads 来实现的。了解 pthreads 的特性可以帮助我们更好的使用 worker_thread。 23 | 24 | [10 Best Practices to Containerize Node Web Applications with Docker](https://snyk.io/blog/10-best-practices-to-containerize-nodejs-web-applications-with-docker/) 25 |
Production-grade guidelines for building optimized and secure Node-based Docker images whether for microservices, server-side rendering, or stand alone apps. 26 | 27 | ### 工程化 28 | 29 | [JavaScript Code Coverage](https://v8.dev/blog/javascript-code-coverage) 30 |
Code coverage provides information about whether, and optionally how often certain parts of an application have been executed. It’s commonly used to determine how thoroughly a test suite exercises a particular codebase. 31 |
编者注：可能与很多人的认识不同，V8 自身支持了代码覆盖率的检测。本文讲解了 V8 中代码覆盖率检测的两种方式，以及为什么函数层面的覆盖率检测是没有损耗的。 32 | 33 | [如何设计并开发一个好的脚手架](https://juejin.cn/post/6979895864017813518) 34 |
传统（事实上大一点点的公司都会考虑CI/CD自动化）手动操作低效、出错率高、依赖某些特定人员等。尤其在项目越来越大的时候，这些问题将更为严重，更不用谈“灰度发布”，这些点有一个就有足够的理由接着看本文，作为前端架构师就是要解决各种“效能”问题。 35 | 36 | ### 拓展阅读 37 | 38 | [我所理解的 Hooks API](https://mp.weixin.qq.com/s/5XiY9JnN-XjQfzS9AbF4cg) 39 |
Hooks API 从 2018 年开始进入开发者视野至今已经将近两年了，但目前还有很多同学对 Hooks 有很多的不理解和困惑。为何要从 Class API 换成 Hooks API？Hooks API 使用方法跟 Class API 有很大的区别，需要重新学习。大量的函数嵌套让“闭包陷阱”变得非常常见。我们也不难发现社区上已经有很多关于 Hooks API 的教程，甚至的其源码的分析学习。但当我们实际地到 React 的源码中学习 Hooks API 的实现方式的时候，会被其“神奇”的实现方式搞得更加一头雾水。那么我们究竟还能从什么角度去学习和理解 Hooks API 的设计模式呢？ 40 |
编者注：本文从一个独特的角度帮助大家理解 Hooks API，虽然有些同学业务中可能并没有涉及到这块内容，但是仍然值得借鉴学习。 41 | 42 | 深入理解 WKWebView 系列：[入门篇：WebKit 源码调试与分析](https://mp.weixin.qq.com/s/VdkVBIQwj7WkAk8-5wppmQ)，[基础篇：WKWebView 加载生命周期与代理方法剖析](https://mp.weixin.qq.com/s?__biz=MzUxMzk2ODI1NQ==&mid=2247484417&idx=1&sn=2c2002280d04e95e8fa7a07bb85d9c04) 43 |
移动互联网时代，网页依旧是内容展示的重要媒介，这离不开 WebKit 浏览内核技术的支持与发展。在 iOS 平台下开发者们需要通过 WKWebView 框架来与 WebKit 打交道。虽然苹果官方提供了关于 WKWebView 的 API 与使用说明，但这并不能满足开发者们的需求，各类复杂场景依旧让我们焦头烂额，而解决方案却不易寻找。此时，优秀的开发者们将目光移向苹果开源的 WebKit 内核代码，试图从中寻找解惑之道，却发现依旧困难重重，坎坷不断，主要问题如下：内核源码复杂难懂：动辄几个 G 的源码，且缺乏关键代码注释与说明，跟踪分析工作量大；系统兼容分支较多，一块代码可能区分 iOS、Mac、嵌入式等分支；历史代码或实验功能较多，导致查看源码并不容易缕清逻辑。无法结合业务代码分析：异常问题往往在复杂场景下才会出现，缺乏业务代码的结合，问题无法复现 44 | 45 | [抽象泄露（Leaky Abstraction）](https://mp.weixin.qq.com/s/KiWiaLyaBd79MrgCRwAjxw) 46 |
在 5 月 23 日 Online Meetup With Evan You 的问答环节中，Evan 在说到 low code 时提到一个概念 —— “abstraction leak”. 在前端开发过程中接触过很多内部平台和工具，包括 low code 建站平台、组件库、框架和二次封装的元框架。在这个过程中会发现一个比较普遍的现象：即便文档覆盖相对比较全面，开发者在实现或排查某一些特定的问题时仍然不可避免地需要阅读对方平台或库的源码，或了解更底层的原理。一些特定的场景下，平台或库索提供的接口、界面或规范不再适用；它们的抽象层次不再能满足业务场景要求。但是往往这些痛点并不是系统本身的管理或设计缺陷；更多的是某些应用场景下的“抽象泄漏”导致。本文翻译多篇相关英文文章，并在此基础上整合、提炼，就系统设计中的抽象层级和抽象泄漏现象进行讨论。 47 |
编者注：这篇文章给大家介绍了什么是抽象泄露，探讨了如何应对抽象泄露，以及我们在做抽象设计时应该注意些什么。将抽象泄露这个常见现象讲的很深入透彻，引人深思。 48 | 49 | [Vue 3 的 SFC Style CSS Variable Injection 提案实现的背后](https://mp.weixin.qq.com/s/N1AoRSuK00V5QoZr4TWWvQ) 50 |
在 5 月 22 日的 Vue Conf 21 上，尤大在介绍单文件组件（SFC）在编译阶段优化的部分，讲了 SFC Style CSS Variable Injection 这个提案，即