前端每周清单: GraphQL安全加固，去中心化的Web

Posted 2021-04-30 前端之巅

重要的事情要特意提醒： 由于微信不支持外链（注意是外链），查看本文带链接版请点击文末 阅读原文。

新闻热点

国内国外，前端最新动态

Webpack 4.0.0 发布: 本周 Webpack 4 正式发布，包含了大量的特性更新，以及极大的性能优化（最高可达 98%）。Webpack 4 中移除了 CommonsChunkPlugin，替换以一系列默认的配置以及简单的 optimize.splitChunks 接口。同时 Webpack 4 为我们带来了 mode 的配置项，允许开发者根据不同的需求选择是面向开发环境优化还是生产环境优化，从而降低了初学者的门槛。更多变化说明参考这里。

Parcel v1.6.0 发布: 虽然距离 Parcel v1.5.0 发布仅仅过去了三周，Parcel v1.6.0 依然为我们带来了超过十五个的新特性以及大量的修复提升。该版本中值得关注的特性包括：基于 Babel 的 ES6+ 零配置转化，面向 React 以及 Preact 的自动 JSX 支持，Node 以及 Electron 目标的支持，生产环境下包体分析，Node 6 以及 W3C WebManifest 的支持等。

npm v5.7.0 发布: 该版本带来了一系列令人激动的特性与修复提升，本文即是对该版本的重点变化的详细说明。该版本引入了 package-lock.json 文件的自动合并功能，开发者使用 npm install 的时候即可以自动合并 package-lock.json 与 npm-shrinkwrap.json。同时该版本引入了新的 ci 命令，其仅会安装 lock 文件中的依赖项，并且会在 package.json 与 lock 文件不一致的时候抛出错误。该命令相较于 npm install 有 2 ~ 10 倍的性能速度提升，能够大大优化目前的 CI 持续集成流程。

开发教程

步步为营，掌握基础技能

你需要知道的关于 CSS Variables 的一切: 大部分的编程语言都支持变量，或者类似的特性；尽管 CSS 长久以来一直不支持自定义变量，随着 Web 的快速发展我们也欣慰地看到它引入了自定义属性，或所谓的变量的特性。本文即是对于 CSS Variables 的全面介绍，从 CSS Variables 的特性原理到它在实际应用开发中的实践；为了更好地进行讲解，作者还从零构建了三个项目：使用 CSS Variables 创建多态组件，基于 CSS Variables 的主题特性，创建小的 CSS Variable Booth。更多相关资料参考现代 Web 开发基础与工程实践 - 基础篇。

2018 javascript 测试概述: 该指南旨在介绍 2018 年中应该掌握的与 JavaScript 测试相关的概念、名词、工具与方法。本文集合了许多的优秀文章中的理念，以及作者自身多年在构建 Welldone 软件解决方案过程中积攒的经验。作者在多年的工作中曾经面向不同的产品使用实践了不同的测试解决方案的组合搭配，本文则是使用 Jest 进行单元测试与集成测试，并且使用 TestCafe 进行界面测试。更多相关资料参考 Awesome JavaScript Reference。

人脸识别：使用 React-Redux 以及 Kairos 来识别你自己: 我们正处在人工智能与机器学习技术迅猛发展的年代，Face ID 与人脸识别也不再遥不可及，而成为了生活中不可缺少的一部分。付诸实践总好过高谈阔论，本文作者即介绍如何使用 React-Redux 以及 Kairos 来创建人脸识别的应用，并且用它做一些有趣的事情。更多相关资料参考 DataScienceAI MindMap。

工程实践

立足实践，提示实际水平

Spectrum 的 Streaming Server-Side Rendering 以及分布式缓存的实践: React 16 为我们带来了 Streaming ServerSide Rendering，允许并发地进行 html 传输与界面渲染。该特性优化了首字节传输与首屏渲染的时间，使得用户能更快地见到有意义的界面。本文则是 Spectrum CTO 分享的，他们是如何使用流式响应以及分布式缓存来保证高性能的 React 应用服务端渲染实践；更多相关资料参考现代 Web 开发基础与工程实践 --React 篇。

GraphQL API 的安全加固: GraphQL 让前端能够便捷，乃至随心所欲地进行数据查询，这样保证了 API 的灵活性，但也带来了一定的安全隐患。除去合法的，有效的查询，恶意的攻击者可能会提交很多耗时的、嵌套多层的查询，从而耗光你的服务器、数据库、网络以及其他的计算与存储资源。本文中，Spectrum CTO 为我们分享了他们在生产环境下是如何对 GraphQL API 进行安全加固的；更多相关资料参考 GraphQL Reference。

Event sourcing vs CRUD: 很多情况下，事件驱动 (Event Sourcing) 往往与领域驱动开发 (DDD) 以及 CQRS 这种设计模式紧密连接在一起，不过 Event Sourcing 并不仅仅是他们的部分，本文即是对 Event Sourcing 与 CRUD 进行的详细对比介绍。Event Sourcing 也可以看做特殊的数据存储方式，不同于传统的以关系型数据库为核心的存储方式，Event Sourcing 并不会将记录持久化，而是将变化存放为时序序列或者其他类型，从而方便消费者进行处理。更多相关资料参考 MicroService MindMap。

深度阅读

深度思考，升华开发智慧

Promises 并不中立: Promises 方便了我们在 JavaScript 中进行异步操作，但是本文作者认为 Promise 的中立性不足，以至于对整个生态系统造成了伤害。Promise 最简单的目标，就是包含了某个未来可知的值，可能在下一次的 Event Loop，或者几分钟之后才能得到该值。作者认为 Promise 不够中立的原因包括：非延时执行；不可取消；无法通过；then() 混淆了 map() 与 flatMap()。更多相关资料参考 现代 JavaScript 开发基础。

CSS 键盘记录: 本项目，CSS Keylogging 包含了一个 Chrome 插件，以及一个 Express 服务器来演示如何利用 CSS 实现键盘记录攻击。该攻击方式的原理很简单，就是利用 CSS 属性选择器来匹配字符，以及 background-image 属性来将判断的字符传到服务器中；该项目还包含了简单的脚本来为每个 ASCII 字符生成独特的请求格式。更多相关资料参考 WebSecurity MindMap。

去中心化的意义: 在互联网发展的第一波浪潮，大概是 1980s ~ 2000s 年间，互联网服务都是基于开源的协议构建，并且由社区维护控制。而在第二个年代，大概从 2000 年到现在，Google，Apple，Facebook 以及 Amazon 这样的巨头掌控着互联网。随着以区块链为代表的加密网络的兴起，或许在未来我们可能会进入去中心化的年代。本文即是从宏观的历史发展的角度，讨论了去中心化的意义，以及其与中心化应用相比的不足或优势；加密网络允许我们构建社区主导的网络，并且方便第三方的开发者、创新者以及商业人才加入。更多相关资料参考 Web Series。

开源项目

乐于分享，共推前端发展

GhostText: GhostText 为我们提供了丰富的编辑器插件，从而允许我们能够直接在编辑器中向浏览器的输入框中写入内容；换言之，所有在编辑器中输入的内容都会实时同步到浏览器中。

Proton Native: 移动端开发中，React Native 为我们带来了跨平台的界面构建与状态管理支持，从而能够更方便地构建跨平台应用。Proton Native 则是类似于 React Native 的，依托于 React 生态系统的，开发桌面扩平台应用的框架；它同样允许开发者使用 Redux 这样的流行的库。

vue-ethereum-ipfs: vue-ethereum-ipfs 是基于 Vue，Ethereum 以及 IPFS 的分布式应用服务器。Ethereum 可以看做分布式虚拟机，IPFS 则是分布式内容分发网络的一种，Vue 是用于构建 Web 应用的 JavaScript 框架。vue-ethereum-ipfs 通过将状态存放于 Ethereum，并且使用 IPFS 来分发 HTML，从而使得 Web 应用更高效地运行。

basicScroll: basicScroll 为我们提供了面向移动端与桌面的，基于 CSS Variables 控制的独立并发滚动效果。basicScroll 允许我们根据滚动位置来改变 CSS Variables，并且可以使用 CSS Variables 来自定义动画。

巅峰人生

Hinton：人类就是机器，绝妙的机器: 本文是对于深度学习之父，Geoffrey Hinton 人生与职业经历的简要介绍。三十多年来，Geoffrey Hinton 一直徘徊在人工智能研究的边缘地带。他像局外人一样坚守着一个简单的观点：计算机可以像人类一样思考，依靠直觉而不是规则。

前端之巅