前端資訊周報 3.6 - 3.12: 對學習Javascript最有協助的三本書，以及HTML標題的迷思

標籤：數字   硬體   art   query   hit   react   接下來   google   forms   

每周一我都會分享上一周我訂閱的技術網站中，和解決問題的過程中閱讀到的值得分享的文章。

畢竟個人的閱讀量有限，也歡迎大家留言或者私信給我你們閱讀到的，對你們前端技術有協助的任何內容，題材不限，語言不限。可以是技術部落格，也可以是知乎或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 是Google的工程師，他好像是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最佳化和提升搜尋結果排名

講講道理

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

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

 

本文同時也發布在我的知乎專欄：前端技術漫遊指南 ，歡迎大家關注

前端資訊周報 3.6 - 3.12: 對學習Javascript最有協助的三本書，以及HTML標題的迷思