《百闻技术周刊》046期

">
【实践经验】
【基础夯实】
【实用工具】
【动态与研究关注】
【程序之外】

【实践经验】

1、QCon演讲实录|淘系前台业务“秒交付”研发模式的革新探索

https://mp.weixin.qq.com/s/7pG2YPGlfMnQdwihulZp5Q

“能力复用”、“跨端”、“技术栈归一”是移动互联网业务效率提升的三大底层核心驱动力，围绕这三个点业务研发模式不断的演进，以适应业务高速发展的诉求。

淘系前台业务云+端一体化的探索，核心是通过多容器应用架构的升级，打通了技术栈的边界，实现了业务跨云+端的闭环；通过组件化的应用架构实现领域能力复用的透明化；通过函数化的研发交付让运维透明；通过云端一体化框架以及页面模块化搭建，让“前台研发”专注于业务。

2、如何只使用CSS提升页面渲染速度

https://mp.weixin.qq.com/s/aPguK-dZr7JMA-s2OOFyjg

用户喜欢快速的 Web 应用。他们期望页面加载速度快，运行流畅。如果滚动时出现动画中断或延迟，用户很可能就会离开你的网站。作为一名开发者，你可以做很多事情来提升用户体验。本文主要介绍你可以用来提升页面渲染速度的 4 个 CSS 技巧。

3、他们渲染了一百万个网页，来了解网络如何崩溃

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

分析数据表明，大多数问题都可以被归类。而这，就能为开发人员指引 Web 技术的未来发展方向：修复这一些小问题就可以将 Web 的报错数量减少十倍。

这些坏家伙的 TOP10 分别是：

引用错误
类型错误
语法错误
Error
调用异常
OneSignal
超出范围
Integration Error
chunk 下载错误
eval 计算错误
4、预填充Vue.js全局存储状态的三种方法
https://mp.weixin.qq.com/s/Cu5r-8gJm-Z00XRfZr-sNg

5、我是如何将网页性能提升5倍的 — 构建优化篇

https://mp.weixin.qq.com/s/5fWSnzSdnx65M8QSjgg05A

我在构建、网络、资源加载、运行时、服务端、功能组织等多个方面都进行了优化，准备做一个系列，分章节给大家分享下我的优化经验。

6、如何自己开发一款力导向图？

https://mp.weixin.qq.com/s/78px2JAsjl0YPPifQP9FAg

力导向图大家都不陌生，力导向图缺少不了力，而在数据量很大的情况下初始化节点以及对节点进行拖动时会导致整个力导图都在一直在动，密集的情况会更加严重，并且本着可以对点更好，灵活的控制，满足不同的需求，所以打算自己实现一个简单的力导向图，并在过程中对碰撞检测进行一次探索。
前一小节讲开发过程中有问题的需求。后面主要是碰撞检测以及点的分配的功能。

7、超过N行如何折叠并显示“…查看全部”？

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

8、使用CLI开发一个Vue3的npm库

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

本文就跟大家分享下如何使用CLI从零开始开发一个支持Vue3的库，并上传至npm，欢迎各位感兴趣的开发者阅读本文。

【基础夯实】

在 ClipboardEvent 对象中含有一个 clipboardData 属性，该属性包含了与剪贴板相关联的数据。详细分析了 clipboardData 属性之后，我们发现已复制的图像和普通文本被封装为 DataTransferItem 对象。

4、为什么不推荐用for…in遍历数组

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

for…in本身是Object的遍历方法，JS中的数组也继承自Object，所以自然而然也能使用for…in遍历出属性。然而for…in有一些难以注意到的细节，稍不注意就可能被坑。

5、让别人夸赞你的 JS 写得漂亮

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

6、8个硬核技巧带你迅速提升CSS技术

https://juejin.cn/post/6908879198933221383

7、【Vue3官方教程】🎄万字笔记 | 同步导学视频

https://juejin.cn/post/6909247394904702984

8、备战2021：vite工程化实践，建议收藏

https://juejin.cn/post/6910014283707318279#heading-26

说白了vite就是为开发者量身定做的一套先进的开发工具，按需编译、热模块替换等特性使我们开发时免除了重新打包的等待时间，开发体验丝滑，默认还整合了vue3，是居家旅行、杀人灭口之必备良药。目前vite已经是正式版，相关的生态正在迅速繁荣起来，笔者也第一时间在工程化方面做了一些探索，希望能够抛砖引玉。

9、如何优雅的判断元素是否进入当前视区

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

主要内容包括：

使用元素位置判断元素是否在当前视区
使用 Intersection Observer 判断元素是否在当前视区
实例：懒加载
实例：无限滚动
实用 npm 包推荐
10、可视化拖拽组件库一些技术要点原理分析
https://juejin.cn/post/6908502083075325959

本文主要对以下技术要点进行分析：

编辑器
自定义组件
拖拽
删除组件、调整图层层级
放大缩小
撤消、重做
组件属性设置
吸附
预览、保存代码
绑定事件
绑定动画
导入 PSD
手机模式

为了让本文更加容易理解，将以上技术要点结合在一起写了一个可视化拖拽组件库 DEMO：

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）

11、详解vue的diff算法

https://juejin.cn/post/6844903607913938951#heading-11

【实用工具】

1、Vue.js最佳静态站点生成器对比

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

在本文中，我会向大家介绍用于静态站点生成的四大 Vue.js 框架，并对它们做详细对比，帮助找到适合你用例的选项。
1. Nuxt.js
2. VuePress
3. Gridsome
4. Saber

2、7个顶级静态代码分析工具

https://mp.weixin.qq.com/s/R61pyn4gjM-v1vWrWCoW4w

静态代码分析或源代码分析是指使用静态代码分析工具对软件的“静态”(不运行的) 代码进行分析的一种方法，找出代码中潜在的漏洞。静态代码分析器检查源代码，找出特定的漏洞，并检查代码是否符合各种编码标准。
为什么要进行静态代码分析？

在执行代码之前获取代码洞见；
与动态分析相比，执行速度更快；
可以对代码质量维护进行自动化；
在早期阶段 (尽管不是所有阶段) 可以自动检索 bug；
在早期阶段可以自动发现安全问题；
如果你在使用带有静态分析器的 IDE(例如遵循 PEP8 的 Pycharm)，那你已经在“船”上了。

在知道了什么是静态代码分析之后，接下来就有必要了解一下市场上有哪些好用的静态代码分析工具。废话不多说，让我们来看看现在比较流行的静态代码分析工具。

3、给在座各位“打工人”分享33款提高工作效率的vscode“实用插件”

https://mp.weixin.qq.com/s/1DJilpZADOwHTt_z4Bi6kg

本文从基础必备、代码规范、开发神器三个方面来推荐，方方面面都有涉及，有了这些神器就让我们一起愉悦的撸代码吧！

【动态与研究关注】

1、2020年大前端技术趋势解读

https://mp.weixin.qq.com/s/aAmFyYF7Y6F2-9-LrZ-fsg

时光荏苒，非比寻常的一年即将过去。在这过去的一年中，与其说前端的平稳期即将到来，不如说前端反而进入了技术深水区。换言之，在全栈和多端的影响下，前端领域里“术业有专攻”的时代已经到来。如今的前端早已不再拘泥于满足页面展示，而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业，继而影响商业结果。这种表象的改变背后是本质的转变，从更为宏观的角度来说，前端正在通过持续的技术革新和技术融合不断突破自身边界，进而重新定义自身价值。在这种大变革的时代背景下，腾讯IMWeb前端团队也正在与时俱进得进行着技术更新、优化与升级，结合自身这一年的快速发展，IMWeb团队为大家带来2020年大前端技术趋势解读。

2、2020全球CSS报告新鲜出炉，前端从业者平均年薪35w

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

CSS 从 1994 年 10 月首次被提出，到目前为止已经20余年，但是 CSS 早已发生了天翻地覆的变化，2020的CSS 又是如何的呢？
我们现在可以使用 CSS Grid 轻松制作动态或响应式的布局，以更少的代码来进行自适应布局。CSS-in-JS 无需依赖全局样式表，我们可以将样式与组件写在一起去构建主题化的设计系统。
最重要的是，Tailwind CSS 突然出现，通过它的实用至上的 CSS 的类名使用，迫使我们重新考虑传统的语义类名称的设计。
本次主要可以从6个方向（新特性、单位和选择器、CSS技术、CSS工具库、CSS使用环境和学习CSS渠道）进行了深度的报告CSS的使用学习情况，从本次调查，可以让你了解目前最流行的布局，最前沿的特性以及前沿的技术库等等~

3、Google、Facebook等均开始支持的HTTP3到底是个什么鬼？

https://mp.weixin.qq.com/s/-sD504t5Ebm0Ubwalos8DA

最近一段时间以来，关于HTTP/3的新闻有很多，越来越多的国际大公司已经开始使用HTTP/3了。
所以，HTTP/3已经是箭在弦上了，全面使用只是个时间问题，那么，作为一线开发者，我们也是时候了解下到底什么是HTTP/3，为什么需要HTTP/3了。
那么，本文就来讲解一下到底什么是HTTP/3？他用到了哪些技术？解决了什么问题？

4、当我们在谈论大前端时，我们在谈些什么

https://mp.weixin.qq.com/s/3sAnw1w1b5ZePvlFkBhHzw

“大前端”是一个由国内业界发明的技术名词，甚至没有对应的英文词汇（如果有，请悄悄告诉孤陋寡闻的笔者），而它却逐渐变成了前端领域的大趋势，在客户端开发上，Native 与 HTML5 争斗了十年，谁也没有取代谁，反倒是有融合的趋势，而融合之后的产物在一定意义上来说就是大前端。

【程序之外】

1、GitHub 2020 报告：全球开发者工作与生活平衡情况年度分析

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

GitHub 在 2020 年底发布了 2020 年社区和开发者报告。主要包括全球开发者工作与生活平衡情况，赋能社区健康和全球软件安全报告三个部分，本文分享的是全球开发者工作与生活平衡情况，

本报告指出以下四点发现：

修改量小的 pull request 有助于推动创新和生产力：严格将 pull request 的内容修改量控制在较小范围内的团队，代码审阅等相关的反馈速度更快。在过去的一年中，开发者们通过控制 pull request 中内容的修改量，提升了他们工作的速度和质量，并将 pull request 从创建到被合并所需时间控制在了七个半小时以内。这样大家就有更多的时间去做自己想做的事儿了。
自动化可以提升生产力，改善开发者体验：使用 GitHub 的 Action 来对 pull request 进行自动化处理，使得其被合并所需时间缩短了 19%，并使得合并的 pull request 的数量提升了 34%。通过在工作流中使用自动化工具，可以最大程度地降低手动的操作，节省出更多的时间以让团队成员进行创新、开发和其他工作的协作。
当大家都在家时，开源是一种很好的“消遣”方式：数据分析表明，开发者在周末和假期会“离开”工作，而在这段时间开源项目的活跃度却激增。这表明开发者对待工作和开源的态度是不一样的，开发者可能会认为开源是一个提供了学习、成长、创新和与社区互动的一个绝佳的渠道和机会。
开发者活跃度凸显了灵活和个性化解决方案的重要性：本报告通过分析了四大时区的开发活动数据，发现在所有时区中，在过去的一年中，无论是工作时间还是工作量都在增加。并且开发者可能会通过灵活的时间安排来管理他们的时间和精力，这其实有助于延续他们的精力。但需要提醒的是，如果牺牲个人休息时间来工作，打破了工作和生活的平衡，那么长远看来这种方式是没法持续的。

2、这5个程序员，改变了世界

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

3、22条设计登录&注册的规则

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

4、2020金点设计奖“年度最佳设计奖”揭晓

https://mp.weixin.qq.com/s?__biz=MzIzMjE4MTkwMQ==&mid=2651115389&idx=1&sn=70b700718d7920084d7634ce06a5801f

5、一个好的建筑，能改变一座城市的气质 | 100+ 张图带你看遍全球顶尖设计

由英国著名的设计媒体 Dezeen 主办的 Dezeen Awards，堪称世界上规模最大、最具权威性的年度设计奖项之一，旨在表彰世界最优秀的建筑、室内、产品项目，以及杰出的创意机构和个人。
今年建筑领域，来自23个国家的1455个参赛作品，参与12个设计类别的角逐，其中64个项目脱颖而出，可谓百里挑一，能够入围本身，就代表了极高的国际水准。
近日经过严苛评选，2020年度 Dezeen Awards 建筑类别获奖最终揭晓。仅有12个建筑获奖，而其中有3个获奖项目来自中国。本期就让我们领略国际顶尖建筑的同时，感受中国当代设计，在古典与现代中碰撞出的无穷魅力。