前端資訊週報 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優化和提高搜索結果排名

講講道理

修羅場 ：日本米其林餐廳學徒的職人之路

這是一篇介紹日本米其林餐廳學徒成長軌跡的一篇文章，說實話我在他們要走的這條路上只看到了隱忍和吃苦，固然最後可能厚積薄發成爲一代宗師。這裏引起了個人一點小感想：寫程序也算是一門手藝，對於手藝人來講追求技藝的精益求精應當是一件理所應當的事。在如何寫好程序好這件事上也沒有捷徑可走，也要耐得住寂寞的。多學、多想、多作。

 

本文同時也發佈在個人知乎專欄：前端技術漫遊指南 ，歡迎你們關注