前端资讯周报 3.6 - 3.12: 对学习Javascript最有帮助的三本书，以及HTML标题的迷思

Posted 2020-09-04 前端技术漫游指南

每周一我都会分享上一周我订阅的技术站点中，和解决问题的过程中阅读到的值得分享的文章。

毕竟个人的阅读量有限，也欢迎大家留言或者私信给我你们阅读到的，对你们前端技术有帮助的任何内容，题材不限，语言不限。可以是技术博客，也可以是知乎或stackoverflow的问答。

如果你觉得这篇分享给你带来了帮助，请不要吝惜的点个赞，或者把这个专栏推荐给你的朋友们，还可以关注我。谢谢啦！

本周推荐

What Is the Best Book for Learning JavaScript?

作者在这里给出了他认为适用于学习javascript最佳的三本图书，分别是 Eloquent JavaScript，You Don’t Know JS，Effective JavaScript。这三本书覆盖了从入门到深入，从Node.js到ES6。其中的 You don‘t know JS 更是托管为github上的开源项目，可以免费阅读，我个人也在阅读中。当然，文章作者也再三强调这三本书只是他的个人推荐绝非是绝对的标准。对了，你觉得对你帮助最大的学习Javascript的书是一本或者几本？在留言分享给大家吧

The Document Outline Dilemma

最近有很多关于html中“标题（<h1>, <h2>...<h6>）”标签的讨论。比如说有的观点认为HTML标记中的标题在DOM中的关系其实是平级的，甚至和相邻的段落也是平级的，这没有起到标题的作用，没有表达标题和它内容之间的从属关系。这篇文章从这个问题出发，谈了很多很多，有标准、可读性、样式、困境。这篇文章可能对你的技术进步不大，但是会使得你对语义化标签，对HTML的理解很有帮助，简单来说它能增长你的觉悟。但是文字读起来有点困难，对我来说。

Universal Web Components

即使你还没有接触过 Web Components，你也能畅读这篇文章。这篇文章的价值在于它很好的诠释了 Web Components 背后继承自 HTML 的设计思想：Abstraction & Declarative 。即告诉浏览器你需要什么，而不是告诉浏览器如何做。这大大的简化了编程（对比一下使用脚本创建一个div标签和使用HTML创建一个div标签）。基于这个主题，接下来它展示了 Web Components 跨领域的用法，例如在 Node.js 服务端使用，用于硬件编程等。

The Unexpected Power of Viewport Units in CSS

viewport单位的入门以及5种经典用法。配合这篇 Viewport Unit Based Typography 关于如何使用viewport单位设置页面字体以及 Everything I know about Responsive Web Typography响应式排版的文章一起食用更加

Using CSS Transitions on Auto Dimensions

给某些CSS属性添加transition动画时，要求CSS属性值必须为明确的数字，而不能是auto. 这篇文章总结了四种即使在值为auto的情况下也能成功执行transition动画的方法

Moving Airbnb Search to React

Airbnb的研发团队决定使用React重构他们的搜索页面。页面界面设计虽简单，但页面的实现确实非常复杂的，包含了各种实验，本地化和营销需求，更致命的是缺少测试覆盖。那么如何保证重构之后的版本不会有功能上的缺失呢？通过对比重构前后页面的各项指标来发现问题。

技术前瞻

CSS Grid Layout: A New Layout Module for the Web

本周的大新闻是更多的浏览器支持CSS Grid（本周Chrome 57 和 Firefox 52发布 ）了！关于CSS Grid的教程有很多，精选了这一篇webkit官方发布的CSS Grid教程奉献给大家

Introduction to Web Audio API

或者你这辈子也不会用到web audio API，但我个人觉得这篇文章介绍的内容很好玩，做出的DEMO也很有意思，比如你可以尝试下面这个DEMO：Play the Xylophone (Web Audio API)

On container queries

Ethan Marcotte喜欢在设计页面时把页面当作一个拥有许多丰富组件的系统。每一个组件都拥有自己的响应式规则，每个组件都有自己的breakpoints，分而治之设计每一个组件最后再组装为一整个页面。但在目前 media query 只能返回当前页面的整体状态，而无法查询单个元素所处的环境。这篇文章通过了实际的例子说明了这种困境以及给他带来的设计中的不便，提出了 container query （或者说element query）的必要性

Progressive Web App

PWA在我看来是很有前途很美好的一个技术方向（离线应用），这是一篇可以说是来自官方的介绍（因为本文作者 Addy Osmani 是谷歌的工程师，他好像是Yeoman的作者，也是图书Learning Javascript Design Patterns的作者）。围绕PWA还有一些列的技术生态值得介绍。将来可以来一个PWA专题节目

老调重弹

CSS Architecture Block-Element-Modifier (BEM)

用于设计样式结构的BEM准则是很经典的理论了，它给出了一些如何组织HTML结构以及如何根据结构命名样式的规则，这篇文章把它做了简单的介绍。想了解的朋友可以通过这篇文章入门。有兴趣的话可以继续在网上搜寻有关它的其他资料。

Learn about CSS Architecture: Atomic CSS

相对于上篇的BEM样式架构，Atomic架构感觉是一个异类。如果把BEM原则比喻为语义化的话，那么Atomic则代表可视化。我个人还是倾向BEM，但是不妨大家多听听不同的声音，见仁见智吧

React Quickly: How to Work with Forms in React

React入门篇，教你如何用React处理<Form>元素。大部分内容都很常规，我觉得其中对单向绑定和双向绑定的解释很透彻

唱唱反调

AMP and the Web

AMP是Google推出的一套前端框。与我们常用的前端框架不同的是，它是一套页面级别的解决方案，旨在提高页面性能。这篇文章作者担心的是，AMP这样级别的框架在扼杀互联网的创造性，你可以想象使用AMP的站点展现内容的方式局限于框架里有限的组件。更可怕的真相是，很多的站点使用AMP的目标并不是提升网站的性能，而是为了SEO优化和提升搜索结果排名

讲讲道理

修罗场 ：日本米其林餐厅学徒的职人之路

这是一篇介绍日本米其林餐厅学徒成长轨迹的一篇文章，说实话我在他们要走的这条路上只看到了隐忍和吃苦，当然最后可能厚积薄发成为一代宗师。这里引发了我的一点小感想：写程序也算是一门手艺，对于手艺人来说追求技艺的精益求精应当是一件理所应当的事。在如何写好程序好这件事上也没有捷径可走，也要耐得住寂寞的。多学、多想、多做。

 

本文同时也发布在我的知乎专栏：前端技术漫游指南 ，欢迎大家关注