• 原文地址：JavaScript: What is the meaning of this?
• 原文作者：Jake Archibald
• 原文发布时间：2021-03-08
• 本文永久链接：https://github.com/Ivocin/Translation/Blogs/javascript-what-is-the-meaning-of-this.md
• 翻译、校对：Ivocin

搞明白 JavaScript 中 this 的值有时候会很棘手，本文带你彻底搞懂 this。

JavaScript 的 this 往往会成为许多笑话的笑柄，因为它相当复杂。然而，我发现很多开发人员为了避免处理 this，用了更加复杂和特定领域的处理。如果你对 this 还不熟悉，希望本文能帮助到你。下面进入我的 this 指南。

我将从最具体的情况开始，以最不具体的情况结束，本文的结构类似与一个大的 if (…) … else if () … else if (…) … 语句，所以你可以直接跳转到匹配你代码情况的章节。

• 原文地址：ECMAScript 2021: the final feature set
• 原文作者：Axel Rauschmayer
• 本文永久链接：https://github.com/Ivocin/Translation/Blogs/ECMAScript-2021-the-final-feature-set.md
• 翻译、校对：Ivocin

更新于 2021-03-09: 今天，ES2021 候选提案 发布了其最终功能集的版本。如果它能够在今年 6 月的 ECMA 大会上通过，就会成为官方的标准。本文描述了有哪些新的内容。

• 原视频地址：Next generation frontend tooling with ViteJS ✨ Open Source Friday ✨
• 中英文字幕视频地址（B站）：【译】下一代前端工具 ViteJS 中英双语字幕 - Open Source Friday
• 中英文字幕视频地址（腾讯视频）：【译】下一代前端工具 ViteJS 中英双语字幕 - Open Source Friday
• 英文字幕：听译、YouTube 自动字幕
• 英文校对、翻译：Ivocin
• 视频字幕地址： Vite-Open-Source-Friday
• 原文链接：【译】下一代前端工具 ViteJS 中英双语字幕 - 掘金

关于 Vite，来看看作者本人怎么说。本视频是 Vue 以及 Vite 作者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上做客 GitHub Open Source Friday 节目的直播视频。在视频里有尤大关于 Vite 的各项功能的详细阐述、大神在线编码、在线 Debug、大佬 diss webpack 以及对 Vite 的哲学思考。本视频很长，接近 70 分钟，下面是视频摘录，大家可以选择自己感兴趣的点自行传送。强烈建议大家观看视频，里面有很多细节相信大家会有收获。

• 原文地址：Why I Write CSS in JavaScript
• 原文作者：max stoiber
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/why-i-write-css-in-javascript.md
• 译者：Ivocin
• 校对者：MacTavish Lee, Mirosalva

三年来，我设计的 Web 应用程序都没有使用 .css 文件。作为替代，我用 JavaScript 编写了所有的 CSS。

我知道你在想什么：“为什么有人会用 JavaScript 编写 CSS 呢？！” 这篇文章我就来解答这个问题。

• 原文地址：What Hooks Mean for Vue
• 原文作者：Sarah Drasner
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/what-hooks-mean-for-vue.md
• 译者：Ivocin
• 校对者：LeoYang, TUARAN

不要把 Hooks 和 Vue 的生命周期钩子（Lifecycle Hooks） 弄混了，Hooks 是 React 在 V16.7.0-alpha 版本中引入的，而且几天后 Vue 发布了其概念验证版本。虽然 Hooks 是由 React 提出的，它是一个对各 JavaScript 框架生态系统都有价值的、重要的组合机制，因此我们今天会花一点时间讨论 Hooks 意味着什么。

Hooks 主要是对模式的复用提供了一种更明确的思路 —— 避免重写组件本身，并允许有状态逻辑的不同部分能无缝地进行协同工作。

• 原文地址：Front-End Performance Checklist 2019 — 4
• 原文作者：Vitaly Friedman
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/front-end-performance-checklist-2019-pdf-pages-4.md
• 译者：Ivocin
• 校对者：ziyin feng，weibinzhu

让 2019 来得更迅速吧！你现在阅读的是 2019 年前端性能优化年度总结，始于 2016。

• [译] 2019 前端性能优化年度总结 — 第一部分
• [译] 2019 前端性能优化年度总结 — 第二部分
• [译] 2019 前端性能优化年度总结 — 第三部分
• [译] 2019 前端性能优化年度总结 — 第四部分
• [译] 2019 前端性能优化年度总结 — 第五部分
• [译] 2019 前端性能优化年度总结 — 第六部分

目录

• 构建优化
  • 22.确定优先级
  • 23.重温优秀的“符合最低要求”技术
  • 24.解析 JavaScript 是耗时的，所以让它体积小
  • 25.使用了摇树、作用域提升和代码分割吗
  • 26.可以将 JavaScript 切换到 Web Worker 中吗？
  • 27.可以将 JavaScript 切换到 WebAssembly 中吗？
  • 28.是否使用了 AOT 编译？
  • 29.仅将遗留代码提供给旧版浏览器
  • 30.是否使用了 JavaScript 差异化服务？
  • 31.通过增量解耦识别和重写遗留代码
  • 32.识别并删除未使用的 CSS/JS
  • 33.减小 JavaScript 包的大小
  • 34.是否使用了 JavaScript 代码块的预测预获取？
  • 35.从针对你的目标 JavaScript 引擎进行优化中获得好处
  • 36.使用客户端渲染还是服务器端渲染？
  • 37.约束第三方脚本的影响
  • 38.设置 HTTP 缓存标头

• 原文地址：A comprehensive look back at front-end in 2018
• 原文作者：Kaelan Cooter
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/a-comprehensive-look-back-at-frontend-in-2018.md
• 译者：Ivocin
• 校对者：Junkai Liu, wuzhe

拿一杯咖啡，坐下来，慢慢品读。我们的回顾不容错过。

Web 开发一直是一个快速发展的领域 —— 我们很难跟上在过去的一年中所有的浏览器变更、函数库的发布以及冲击思维的程序设计趋势。

前端行业每年都在增长，这使得普通开发者很难跟上。因此让我们退后一步，回顾一下 2018 年 Web 开发社区发生了哪些变化。

我们目睹了过去几年 JavaScript 爆炸式的发展。随着互联网对全球经济变得更加重要，谷歌和微软等巨头意识到他们需要更好的工具来创建下一代 Web 应用程序。

在这种环境下，以 ECMAScript 2015（又名 ES6）为开端，JavaScript 被引领出自创造以来最大的变革浪潮。现在 JavaScript 每年发布的版本都为我们带来了令人兴奋的新特性：如类、生成器、迭代器、promise、全新的模块系统等等。

这开启了 Web 发展的黄金时代。许多最流行的工具、函数库和框架在 ES2015 发布后立即流行了起来。即使主流浏览器厂商对新标准的支持还未过半，Babel 编译器项目就让成千上万的开发人员抢先一步尝试新功能。

前端开发者首次不需要被他们公司需要支持的最古老的浏览器限制，可以按照自己的节奏自由创新。三年和三个 ECMAScript 版本之后，这个 Web 开发的新时代并没有放缓前进的脚步。

• 原文地址：UX Design Practices: How to Make Web Interface Scannable
• 原文作者：Tubik Studio
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/ux-design-practices-how-to-make-web-interface-scannable.md
• 译者：Ivocin
• 校对者：生糸, Junkai Liu

我们每天被大量的线上或线下的信息流压的不堪重负。由于新技术的发展和快速的互联网连接，人们生成的内容比他们能够接受的更多。面对众多网站和应用程序时，用户不会逐字逐句地阅读所有内容 —— 他们会首先扫描页面，看一下这些内容对他们是否有用。因此，可扫描性是当今网站可用性的重要因素之一。本文探究了这一现象，并且提供了如何使数字产品可扫描的技巧。

• 原文地址：5 Tools for Faster Development in React
• 原文作者：Jonathan Saring
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/5-tools-for-faster-development-in-react.md
• 译者：Ivocin
• 校对者：Haoze Xu, Junkai Liu
• 本文掘金地址：[译] 5 款工具助力 React 快速开发

本文将会介绍 5 款工具，可加速 React UI 组件和应用程序的开发工作。

• 原视频地址：React Today and Tomorrow and 90% Cleaner React with Hooks
• 中英文字幕视频地址（B站）：【React Conf 2018】React 的今天和明天中英文双字幕
• 中英文字幕视频地址（爱奇艺）：React Today And Tomorrow Part II —— 中英双语字幕
• 英文文稿地址：React Today and Tomorrow - Part II
• 演讲者: Dan Abramov
• 英文字幕出自：YouTube 机器翻译
• 英文校对、翻译：Ivocin, 程序媛_小发
• 排版：Ivocin
• 本文掘金地址：[译] React 的今天和明天（图文版） —— 第二部分

因为这个演讲 Dan 的 Demo 部分比较多，建议如果时间充裕，可以观看视频。希望看本文视频的同学，可以查看我的这篇文章：React Conf 2018 专题 —— React Today and Tomorrow Part II 视频中英双语字幕。第一部分 Sophie Alpert 的演讲图文版地址：[译] React 的今天和明天（图文版） —— 第一部分