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

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

毕竟我的的阅读量有限，也欢迎你们留言或者私信给我大家阅读到的，对大家前端技术有帮助的任何内容，题材不限，语言不限。能够是技术博客，也能够是知乎或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优化和提高搜索结果排名

讲讲道理

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

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

 

本文同时也发布在个人知乎专栏：前端技术漫游指南 ，欢迎你们关注