周五前端：学习如何学习版

希望你度过了一个美好的夏天！本周的电子报刊包含多篇文章，都围绕着一个重要的核心问题展开：我们如何才能跟上时代的步伐，学习到我们需要学习的知识，同时又不至于精疲力竭？特别推荐你阅读电子报刊“其他精彩内容”栏目的前三篇文章。

此外，我们还准备了一系列常见的 CSS 和 JavaScript 文章，包括一些简短精炼的入门指南和精彩的长篇分析。敬请欣赏！

ZenDev 的 KBall敬上

PS：友情提醒一下，我最近推出了一项一对一辅导项目，适合任何想要获得更多帮助的人。我乐意帮助你提升技术技能，也乐意在沟通、职业发展和应对压力等方面提供帮助。如果你感兴趣，欢迎预约一次免费的咨询电话，我们来聊聊！

CSS 和 SCSS

使用自定义属性管理多个背景

本文精彩地展示了如何将 CSS 自定义属性作为 CSS 值的一部分（而非整个值）使用。此外，属性还可以由其他属性构成，因此它为您提供了一些非常强大的工具来管理和组合 CSS 值。

如何使用 CSS Grid 构建日历

这是一个关于如何使用 CSS Grid 构建日历布局的优秀分步教程。它很好地演示了自动布局算法如何为你所用。

关于CSS边距，你需要知道的一切

本文将深入探讨 CSS 边距，包括大量篇幅讲解令人头疼的边距折叠问题。边距折叠绝对是 CSS 新手开发者最难掌握的知识之一，本文不仅会讲解如何避免边距折叠，还会解释其背后的原因。

定位粘性和表格标题

简短精炼，直击要点，但它能帮你避免在使用position: sticky表格时遇到的一些挫折和麻烦。那么，你是否应该开始使用它呢position: sticky？除非你需要支持 IE 浏览器，否则我的答案是绝对应该！因为它解决了之前处理粘性元素时遇到的诸多难题。

使用纯 CSS 实现多行截断

非常巧妙的技巧。大多数情况下，用 JavaScript 实现可能更好。但如果你确实需要在 CSS 中实现此功能，并且不介意内容末尾和“...”之间留一些空白，那么这看起来是个不错的选择。

JavaScript

JavaScript生成器入门指南

你的代码里用到生成器了吗？我没用……至少部分原因是它们对我来说仍然不太直观。这份指南很容易理解，但确实还有一些不直观的地方（传递给生成器的第一个值会被忽略，但后面的值却不会？什么鬼？）。

JavaScript Maps 和 Sets 详解

文章中列出的映射相对于简单对象的价值主张在我看来相当薄弱（映射能够提供一致的迭代顺序这一事实是一个更有力的论点），但集合是一个非常有用的工具。

使用 Vue 构建交互式且无干扰的表单

非常棒的长篇教程。它从一系列需求入手，逐步展开概念设计/验证，最后构建出一个完整的实现，并在此过程中解释了所使用的 Vue 特性。值得一读。

使用上下文、门户和钩子在 React 中创建自定义模态框

一篇与上文形式相同的短文。本文将构建一个对象（在本例中是一个模态框），并以此过程来探索一些概念，这次使用的是 React。

推广链接

（仅剩2天！）Udemy所有编程课程都在促销，起价仅为10.99美元。

Udemy 上的所有软件开发课程仍在促销！但促销活动仅持续到周日，所以赶紧行动吧！如果您想学习某个新领域，现在正是购买课程的好时机，即使您暂时没有时间学习，因为价格非常优惠。我最近推荐的课程包括《2019 年完整 JavaScript 课程》、《使用 Redux 的现代 React》（我就是通过这门课程学习 React 的，课程内容已更新至最新功能）以及《Vue JS 2 - 完全指南》（由我最喜欢的 Udemy 讲师之一 Maximilian Schwarzmüller 讲授）。

其他精彩之处

通过阅读源代码提升你的 JavaScript 知识

虽然标题和示例都针对 JavaScript，但我认为这篇文章对任何开发者都非常有用。毫无疑问，学习新技术的最佳方法之一就是阅读并尝试理解他人的代码。尤其是编写精良的代码，但说实话，任何可运行的代码都值得学习。随着开源软件的普及，海量的示例唾手可得。所以，选择一个你正在使用的库或框架，仔细阅读，逐步加深理解。本文将为你提供一些技巧，帮助你更轻松地理解代码，并优化学习过程。

战胜技术学习曲线怪兽

我希望这篇文章能有更多内容，但我真的很喜欢他提出的不同学习方式（顺序学习与快速扫描学习）的分类。我觉得我学习新技术的方法是，先进行一些顺序学习，以便初步了解整体框架，然后再启动项目，并在每次遇到问题时使用快速扫描学习的方法。

关于职业倦怠的坦诚对话（音频）

最近一期 JSParty 节目非常精彩，三位 JS/前端领域的杰出人士分别以不同的方式探讨了他们与职业倦怠作斗争的经历。

组件驱动开发（CDD）指南

这是一本关于如何将组件融入开发流程的优秀指南。由于组件是当今前端开发领域最重要的主题之一，无论您选择了何种技术，它都对您产生影响，因此非常值得一读。

输出：HTML 原生的 live region 元素

这篇文章让我对另一个我之前并不了解的语义化 HTML 元素有了更深入的了解。这个output元素是一个原生“动态”元素，这意味着屏幕阅读器会自动预期它会更新内容，并会持续监听更新并播报。真棒！

周五快乐！

本周的“周五前端简报”就到这里啦！如果你喜欢这篇文章，不妨在 Twitter 上关注我，或者加入我的邮件列表。订阅即可每周五直接在邮箱中收到这些简报！订阅链接：https: //zendev.com/friday-frontend.html