《百闻技术周刊》061期

">
【专题：Vue Conf 2021资料收集】
【实践经验】
【基础夯实】
【实用工具】
- 1、GitHub 支持上传视频文件
- 2、chrome开发者工具各种骚技巧
【动态与研究关注】
【程序之外】

【专题：Vue Conf 2021资料收集】

【实践经验】

1、浏览器性能优化实战

https://mp.weixin.qq.com/s/RCJftzmhQbc-b89pU5d32w

本文主要分为五部分：
第一部分，讲了浏览器整体架构和渲染相关进程.
第二部分，雅虎军规是多年前提出的非常经典的优化建议。
第三部分，性能指标。
第四部分，性能工具。
第五部分，监控在性能优化中占很重要的部分，”事前”监控更重要，防患于未然。让性能优化成为一个预防者而不是追赶者。

2、如何利用 monorepo 策略管理代码？

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

monorepo 是一种将多个项目代码存储在一个仓库里的软件开发策略（”mono” 来源于希腊语 μόνος 意味单个的，而 “repo”，显而易见地，是 repository 的缩写）。将不同的项目的代码放在同一个代码仓库中，这种「把鸡蛋放在同一个篮子里」的做法可能乍看之下有些奇怪，但实际上，这种代码管理方式有很多好处，无论是世界一流的互联网企业 Google，Facebook，还是社区知名的开源项目团队 Babel （如下图）都使用了 monorepo 策略管理他们的代码。

3、【流水线竞品分析】GitLab CI/CD 分析与实践

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

GitLab CI/CD 是 GitLab 内置的持续集成/持续交付产品。本文将对 GitLab CI/CD 进行简要功能分析和实践。
顾名思义，GitLab CI/CD 由 CI 和 CD 两部分组成：

GitLab CI 用于在一个共享仓库内整合团队开发的代码。开发者通过 MR 提交代码，在合并代码前 MR 会触发一个流水线，构建、测试、验证新产生的代码。
GitLab CD 通过结构化的部署流水线来确保 CI 环节验证通过的代码的交付。

示意图如下：

4、从一次重构组件代码来谈谈前端多语言最佳实践

https://mp.weixin.qq.com/s/V-GetBAy2v2Is5rA7-8oMA

本文从自己项目目前多语言的现状和问题出发，列举了目前业界一些多语言实践，并结合公司内部的一些实践，总结了一套最低成本解决项目多语言的方案。并阐述了如何利用commander+jscodeshift来开发一个 CLI 帮助组件完成代码改造，从而实现组件多语言方案的迁移

5、手写一个webpack，看看AST怎么用

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

本文的要点进行下总结：

webpack最基本的功能其实是将JS的高级模块化语句，import和require之类的转换为浏览器能认识的普通函数调用语句。
要进行语言代码的转换，我们需要对代码进行解析。
常用的解析手段是AST，也就是将代码转换为抽象语法树。
AST是一个描述代码结构的树形数据结构，代码可以转换为AST，AST也可以转换为代码。
babel可以将代码转换为AST，但是webpack官方并没有使用babel，而是基于acorn[9]自己实现了一个JavascriptParser[10]。
本文从webpack构建的结果入手，也使用AST自己生成了一个类似的代码。
webpack最终生成的代码其实分为动态和固定的两部分，我们将固定的部分写入一个模板，动态的部分在模板里面使用ejs占位。
生成代码动态部分需要借助babel来生成AST，并对其进行修改，最后再使用babel将其生成新的代码。
在生成AST时，我们从配置的入口文件开始，递归的解析所有文件。即解析入口文件的时候，将它的依赖记录下来，入口文件解析完后就去解析他的依赖文件，在解析他的依赖文件时，将依赖的依赖也记录下来，后面继续解析。重复这种步骤，直到所有依赖解析完。
动态代码生成好后，使用ejs将其写入模板，以生成最终的代码。
如果要支持require或者AMD，其实思路是类似的，最终生成的代码也是差不多的，主要的差别在AST解析那一块。

6、[译文]网页动画的十二原则

https://cssanimation.rocks/cn/principles/

作为前端的设计师和工程师，我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画，但我们经常做的东西不会超过这些。
迪士尼经过基础工作练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。
在本文中会逐个介绍这十二个原则，并讨论它们怎样运用在网页中。你能在 Codepen 找到它们全部的开源 HTML 和 CSS 代码。

7、CSS 实现多行文本“展开收起”

https://juejin.cn/post/6963904955262435336

这里整理一下实现重点：

文本环绕效果首先考虑浮动 float
flex 布局子元素可以通过百分比计算高度
多行文本截断还可以结合文本环绕效果用 max-height 模拟实现
状态切换可以借助 checkbox
CSS 改变文本可以采用伪元素生成
多利用 CSS 遮挡“障眼法”
【基础夯实】
1、10个你可能没用过，但很强大的Web API
https://mp.weixin.qq.com/s/_Hufto3frIqk9m9I4Ty4Hg

在本文中，作者将介绍 10 个不那么流行的 Web API。不那么流行并不意味着它们没有用处。你可以在项目的各种用例中使用它们。

2、开发中遇到过的 NPM 疑惑解答

https://mp.weixin.qq.com/s/H-qBQ32YiPBL3IPNgwVuRA

本文主要解决以下几个问题：

package.json中的dependencies和devDependencies的区别是啥，peerDependencies、bundledDependencies、optionalDependencies又是啥？
为什么有的命令写在package.json中的script中就可以执行，但是通过命令行直接执行就不行？
为什么需要package-lock.json文件？
一个包在项目中有可能需要不同的版本，最后安装到根目录node_modules中的具体是哪个版本？

3、Node.js中的进程与线程

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

4、精读《算法基础数据结构》

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

掌握了不同数据结构的特点，可以让你在面对不同问题时，采用合适的数据结构处理，达到事半功倍的效果。
所以本文详细介绍各类数据结构的特点，希望读者可以融会贯通。

5、90% 的前端都会使用 ES6 来简化代码，你都用过哪些？

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

文章介绍了 ES6 常用的一些语法以及使用场景，可以用来查缺补漏～

6、如何应用 SOLID 原则整理 React 代码之单一原则

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

SOLID 原则的主要是作为关心自己工作的软件专业人员的指导方针，那些以经得起时间考验的设计精美的代码库为荣的人。

本文将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件。

7、一文帮你搞定90%的JS手写题

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

【实用工具】

1、GitHub 支持上传视频文件

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

Github 正式发布视频协作功能。现在在 issue、pull request 和 discussions 里已支持上传 .mp4 和 .mov 文件

2、chrome开发者工具各种骚技巧

https://juejin.cn/post/6844903604839514125

推荐一个网站：umaar.com/dev-tips/，chrome还有各种骚姿势，本文随便列举几个作者之前不了解，觉得挺有用的。

【动态与研究关注】

1、汉字笔顺动画技术剖析

https://juejin.cn/post/6959519041715175454

2、前端录制回放系统初体验

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

网页本质上是一个 DOM 节点形式存在，通过浏览器渲染出来。我们是否可以把 DOM 以某种方式保存起来，并且在不同时间节点持续记录 DOM 数据状态。再将数据还原成 DOM 节点渲染出来完成回放呢？
rrweb 是一个前端录制和回放的框架。全称 record and replay the web ，顾名思义就是可以录制和回放 web 界面中的操作，其核心原理就是上面介绍的方案。

3、CSS 新特性 contain，控制页面的重绘与重排

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

contain 属性允许我们指定特定的 DOM 元素和它的子元素，让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。
本文详细介绍了contain 的属性值和用法

4、「不容错过」Chrome DevTools 七大新功能

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

Chrome 团队今年发布了不少新的功能，帮助开发者提升网页开发体验。在最近的 Google 开发者大会上，介绍了最新的七大功能，它们分别是:

支援css-in-js的框架的样式编辑
模拟时区功能
Lighthouse 量化使用者体验
Issues 面板
媒体面板
一件修复文字的色彩对比
及时模拟色觉障碍

【程序之外】

1、2021阿里巴巴设计周全记录，设计的未来，明年见！

https://mp.weixin.qq.com/s/RF-AMcPFsHY6Q_klTiFkOQ

2、如何做规划？分享2种思维和4个方法

https://mp.weixin.qq.com/s/LILm—w9vj_K7qjI4EakBw

每年每个部门都要进行规划，规划能让目标更聚焦，让我们清晰地知道今后我们要做什么、如何去做。并非每个人都会参与规划中去，但需要掌握规划的方法，否则让你来做规划时，你会发现很痛苦，找不到什么头绪，要么规划出来的内容都是散点，要么规划出来的太抽象。

在本篇文章中，提到了规划的2种思维模式，并分享自己在规划中用到的4个规划方法，让开始做规划的你显得不那么迷茫。

3、Android 12、TPU V4 和量子计算机，凌晨的 Google I/O Keynote 发布了什么？看这篇总结就够了！

https://mp.weixin.qq.com/s/KHfXyp5BmFdeZ15dZ-B5MQ

2021年的 Google I/O 大会因为新冠疫情的原因，与历年的线下场馆不同，今年采用线上直播的形式举办。两个小时的 Keynote 演讲，Google 密集的展示了旗下大量产品线的更新，其中包含中国开发者关心的 Android 12 以及 TPU V4，本文是掘金整理的 Keynote 全部内容。

4、沉浸式设计的应用探索

https://mp.weixin.qq.com/s?__biz=MzAwNzAzMDY1NQ==&mid=2649935145&idx=1&sn=0593bacd0a62ed384475d4c25227fdbc

本文将梳理沉浸式设计的定义、相关理论和观点，结合沉浸式设计的一些应用案例归纳沉浸式设计的几种常见手段，最后再借用相关数据论证沉浸式设计的价值。