前端技術週刊 2018-03-30

前端技術週刊 2018-03-30

你們好，廣受你們喜好的前端快爆主編 @過氣網紅一絲 在昨天某女神問題中躺槍被 @草依山 爆出驚天大料以後，今已無顏面對粉絲，因此本期的小編由打雜實習生暫代。格調不夠，圖片來湊。

前端快爆

• D3.js 發佈其第五個大版本更新。異步文件加載接口調整爲了Promise，支持了地圖生成輪廓算法和密度等高線圖，調整了色彩系統的實現。?

• Chrome Canary 67.0.3378.0+ 版本支持 Windows觸摸板支持了。?
• 本週末的 AmsterdamJS 大會值得期待，好比字面意義上執行 console.log(brain) ?

• Node.js 2018 年 3 月的安全發佈，修復了以前公告中宣佈的問題。?
• Chrome 66 開始正式部分支持 CSS Typed Object Model（Typed OM），該規範是 Houdini 工做的一部分，能夠看作是 CSSOM 的升級版，新規範帶來了更好的可編程性和性能提高。?
• LG 發佈了 webOS 開源版本，現已向公衆開放。?

• 調試一個未知（他人） bug 的時候，咱們老是很抓狂：這個變量到底在哪兒被改爲這樣了！break-on-access 利用Object.defineProperty 解決了這個問題。

• 幾個你不可不知的超級酷炫的 Chrome DevTools 使用技巧：在發送 ajax 請求時觸發斷點、在控制檯輸入多行命令、給指定元素截圖…… ?

優秀 Demo

• 燈泡開關

• 太陽系探索

專題

可自動化的頁面重構

頁面重構是前端最開始做爲一個職位的主要工做，然而相關過程老是顯得那麼原始，那麼刀耕火種。在這個自動化工具已經規模化的時代，不止一個團隊嘗試過了自動化生成頁面和動畫的方案，在本次專題中，咱們整理了相關的文章。

交互稿到代碼

• 動畫：從 AE 到 Web

主要介紹瞭如何手工把 AE 稿件實現成一個簡單的 CSS 動畫：提取動畫參數，生成運動貝塞爾曲線，造成補間動畫。

• 最全最好用的動效落地方法、都幫你總結好了 - 前端篇

變化、時長和曲線是動畫的三個基本元素。Lottie、Keyframe 類開源庫，能夠將 AE 導出的動畫資源直接在項目中應用，經過 gka 一類工具，能讓咱們更輕鬆地製做關鍵幀動畫

• 設計稿自動生成可用頁面的展望

從 Sketch 直接生成簡單的原型代碼，到 React-Sketch 從代碼到設計的反向思考，再到自建可視化頁面搭建平臺的歷程，對於設計稿到頁面的全面探索與思考。

• 用深度學習自動生成HTML代碼

期盼這一天正式到來，又怕來得太快。

基礎自動化

• 關於雪碧圖預處理和後處理方案的討論
• PostCSS Deep Dive

---

編輯：@池冰 & 審閱：@humphry
題圖：https://www.letsnurture.com/services/web/conversion/psd-to-wordpress.html