因個(gè)人精力有限，暫停簡書的維護(hù)，歡迎大家關(guān)注我的知乎https://www.zhihu.com/people/wei-wei-24-86-36/activities，會持續(xù)分享前端、Web開發(fā)相關(guān)文章

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請關(guān)注「前端之巔」公眾號后回復(fù)“加群”。投稿請發(fā)郵件到editors@cn.infoq.com，注明“前端之巔投稿”。

新聞熱點(diǎn)

國內(nèi)國外，前端最新動(dòng)態(tài)

• 《jQuery 3.2.0 發(fā)布》：jQuery 3.2.0 中包含了一系列的錯(cuò)誤修復(fù)、性能提升以及部分棄用 API 的徹底移除 。重大的更新包括添加了對于自定義 CSS 屬性操作的支持，徹底移除了 isArray、nodeName 等方法以及修復(fù)了.width()等部分方法中的問題。( http://6me.us/BN8 )

• 《Facebook 發(fā)布 Create React Native App》：類似于 Create-React-App，Create React Native App 能夠?yàn)殚_發(fā)者快速創(chuàng)建零配置的 React Native 項(xiàng)目，并且與基于 Expo 構(gòu)建了完整的可以屏蔽底層原生代碼細(xì)節(jié)的 React Native 項(xiàng)目，使得開發(fā)者可以快速嘗試上手 React Native 項(xiàng)目 。同時(shí)，開發(fā)者也可以使用 npm run eject命令將項(xiàng)目切換到全配置狀態(tài)，以方便自行添加原生組件。 ( http://6me.us/29r )

• 《2017 React 大會成功舉辦》：2017 年 React Conf 于 3 月 13 日、14 日成功舉辦，會上來自世界各地的開發(fā)者就 React Fiber、Flow、Performance、React Native 等多個(gè)主題發(fā)表了演說與討論，推薦選擇自己喜歡的演講視頻觀看。( http://conf.reactjs.org/livestream )

• 《Sketch 宣布開源其文件格式》：隨著近日發(fā)布的 Sketch 43 版本，Sketch 宣布開源其文件格式，這也意味著未來可能會有人基于該格式開發(fā) Windows 版本應(yīng)用或者簡單的 Sketch 文件瀏覽器。鑒于其文件格式為 JSON，我們也可以暢想未來會出現(xiàn)自動(dòng)構(gòu)建的 Web Service。( http://6me.us/DyAYEC )

• 《Chromium 即將支持 APNG》：該 Commit 會為 Chromium 添加 APNG 格式的支持，該格式可以逐步替換現(xiàn)存的 Gif 格式 。( https://parg.co/bO9 )

• 《Kotlin 1.1新增協(xié)程、類型別名特性，提升了對JavaScript的支持》：Kotlin的新版本引入了多項(xiàng)新的語言特性（其中最值得注意的就是協(xié)程），同時(shí)還提升了對其JavaScript目標(biāo)環(huán)境的支持。( http://www.infoq.com/cn/news/2017/03/kotlin-11-released )

開發(fā)教程

步步為營，掌握基礎(chǔ)技能

• 《Flexbox 語法清單》：該網(wǎng)頁提供了交互式的 CSS Flexbox 教程，詳細(xì)介紹了 Flexbox 的使用語法與經(jīng)典案例。( http://yoksel.github.io/flex-cheatsheet/ )

• 《Sketch：React Native 的 Playground 》：隨著 Create React Native App 的發(fā)布，Expo 發(fā)布了能夠在線編輯 React Native 應(yīng)用的工具 Sketch。開發(fā)者可以在 Web 上直接編輯 React Native 應(yīng)用代碼，或者拖拽方式加入組件，然后通過 Expo 客戶端完成本地預(yù)覽。( http://6me.us/aGFX )

• 《編寫 JavaScript 框架：客戶端路由》：本文是編寫 JavaScript 框架系列的最后一篇，主要著眼于討論如何實(shí)現(xiàn) JavaScript 客戶端路由及其與服務(wù)端路由的區(qū)別。( https://parg.co/bOL )

• 《30 天學(xué)習(xí) 30 個(gè) VR 項(xiàng)目》：本系列作者介紹了從 0 到 1 如何開發(fā) 30 個(gè)常見的 VR 項(xiàng)目，從最基礎(chǔ)的圖片瀏覽、視頻播放，到交互性動(dòng)畫等等 。( https://risonsimon.com/days-in-vr/ )

• 《CORS 詳細(xì)指南》：本文是對于瀏覽器中跨域訪問協(xié)議 CORS 進(jìn)行詳細(xì)介紹，并且以完整的代碼交互示例演示 CORS 協(xié)議的效果與使用方法。( https://parg.co/bOF )

• 《Angular的模塊間通信》：模塊是Angular的構(gòu)建單元，Angular應(yīng)用程序的所有可視化元素也是由模塊構(gòu)建的。當(dāng)我們把模塊拆散成更小的模塊時(shí)，我們就要確保它們可以把數(shù)據(jù)傳來傳去。到那時(shí)候，恰當(dāng)?shù)啬K間通信機(jī)制就成了我們應(yīng)用程序的基礎(chǔ)，可以讓所有的數(shù)據(jù)都保持同步狀態(tài)。( https://parg.co/bOD )

工程實(shí)踐

立足實(shí)踐，提示實(shí)際水平

• 《PWA 在餓了么的實(shí)踐經(jīng)驗(yàn)》：本篇旨在和大家分享「餓了么 M 站」（https://h5.ele.me/msite/）在 PWA 改造中的實(shí)踐經(jīng)驗(yàn)。涉及到的方面有：PWA 線上部署的準(zhǔn)備工作、多頁應(yīng)用的 prerender 優(yōu)化、實(shí)踐過程中踩到的（和推進(jìn)解決的）坑。( https://parg.co/bO7 )

• 《滴滴 Web App 5.0 Vue 2.0 重構(gòu)經(jīng)驗(yàn)分享》：滴滴的 Web App 是運(yùn)行在微信、支付寶、手 Q 以及其它第三方渠道的打車軟件。借著產(chǎn)品層面的功能和視覺升級，我們用 Vue 2.0 對它進(jìn)行了一次技術(shù)重構(gòu)；本文即是本次重構(gòu)中的經(jīng)驗(yàn)分享。( https://github.com/DDFE/DDFE-blog/issues/13 )

• 《前端代碼測試概述》：作者在本系列文章中介紹了前端代碼測試的相關(guān)概念與實(shí)踐技巧，包括了單元測試、集成測試、端到端測試等多個(gè)方面。( http://6me.us/posk )

• 《以組件為中心的 React 懶加載》：React Loadable 是以組件為中心的懶加載框架，其基于 Webpack 2 提供的 import 提供的異步代碼分割與加載功能進(jìn)行了一系列的封裝。( http://6me.us/mNHi )

• 《另一種 CSS 壓縮思路》：本文作者提出了一種新的 CSS 壓縮思路，有可能會損壞原有的 CSS 文件，不過其壓縮比率相較于現(xiàn)有的通用 CSS 壓縮策略會更為優(yōu)秀。( https://luisant.ca/remynifier )

• 《來自 Vixlet 的 React 優(yōu)化策略》：在過去的數(shù)年中，來自 Vixlet 的前端開發(fā)團(tuán)隊(duì)一直使用 React 與 Redux 的開發(fā)架構(gòu)，本文即是該團(tuán)隊(duì)分享其在開發(fā)過程中發(fā)現(xiàn)的 React 優(yōu)化策略的介紹。( http://6me.us/dx5 )

深度閱讀

深度思考，升華開發(fā)智慧

• 《2017 成為專業(yè) Web 開發(fā)者的學(xué)習(xí)路線圖》：作者在此文中以圖表的方式展現(xiàn)了 2017 年中如果想成為專業(yè)的 Web 開發(fā)者，應(yīng)該在 Web 前端、服務(wù)端以及 DevOps 領(lǐng)域所需要學(xué)習(xí)到的技術(shù)棧以及進(jìn)階路線圖。( http://6me.us/W0k )

• 《關(guān)于 JWE 安全漏洞的討論》：JSON Web Token 是基于 JSON 的訪問令牌創(chuàng)建標(biāo)準(zhǔn)（RFC 7519），本文則是介紹了 JWE 面對的 Invalid Curve Attack 原理以及受影響的開源庫等內(nèi)容。( http://6me.us/D0iKp )

• 《wasm_lua》：wasm_lua 提供了能夠運(yùn)行于 WASM 環(huán)境下的 Lua 虛擬機(jī)，未來基于 Lua 構(gòu)建前端框架也是個(gè)可行的選擇 。( https://github.com/vvanders/wasm_lua )

• 《U.S. Web 設(shè)計(jì)標(biāo)準(zhǔn)》：近日 U.S. 官方網(wǎng)站的樣式與視覺設(shè)計(jì)指南 1.0.0 版本發(fā)布，包含了大量的 Bug 修復(fù)與反饋修正。( https://parg.co/bO1 )

• 《Preact 內(nèi)部原理探秘》：Preact 是提供了類似于 React API 不過速度更快、包體更小的 React 替代包，本系列文章是 Preact 的開發(fā)者介紹其內(nèi)部工作原理 。( https://parg.co/bOj )

• 《擴(kuò)展JS應(yīng)用在架構(gòu)性取舍上應(yīng)關(guān)注八點(diǎn)要素》：如果想要構(gòu)建可擴(kuò)展的軟件，可以從很多角度來思考軟件架構(gòu)。但是如果每個(gè)角度都去考慮，根本不可能做出想要的軟件。這就是為什么需要從架構(gòu)的角度對設(shè)計(jì)進(jìn)行取舍：取我們最需要的，舍次要的。。( https://parg.co/bOn )

開源項(xiàng)目

樂于分享，共推前端發(fā)展

• 《手淘發(fā)布 Atlas》：手機(jī)淘寶安卓客戶端容器化框架 Atlas 正式宣布開源。Atlas由阿里巴巴移動(dòng)團(tuán)隊(duì)自研，以容器化思路解決大規(guī)模團(tuán)隊(duì)協(xié)作問題，實(shí)現(xiàn)并行開發(fā)、快速迭代和動(dòng)態(tài)部署，適用于Android 4.x以上系統(tǒng)版本的大小型App開發(fā)。 (https://github.com/alibaba/atlas)

• 《Animista》：Animista 是開箱即用的 CSS 動(dòng)畫庫，其作者還發(fā)布了非常易用的在線預(yù)覽與選擇站點(diǎn)，適合于設(shè)計(jì)人員選擇合適的動(dòng)畫效果。( http://animista.net/ )

• 《Quokka.js》：Quokka 能夠幫助我們在常用的編輯器（譬如 VSCode）中快速建立原型試驗(yàn)場，包括了行內(nèi)錯(cuò)誤提示、代碼測試與覆蓋率提示、富文本輸出格式化等等。( https://quokkajs.com/ )

• 《Guetzli》：Google 宣布開源新的 JPEG 編碼器 Guetzli，與現(xiàn)有的壓縮編碼工具相比，其能夠減少近 35% 的文件尺寸而依然保持圖片質(zhì)量。( http://6me.us/AM7a )

• 《wasm-loader》：wasm-loader 是能夠用于 Webpack 的 WASM 二進(jìn)制模塊導(dǎo)入工具，其能夠允許你在 JavaScript 代碼中導(dǎo)入 wasm 格式文件并且將二進(jìn)制文件打包成為 JS Bundle 的一部分 。( https://github.com/ballercat/wasm-loader )

巔峰人生

• 程序員創(chuàng)造的世界并不總是美好，IT工作者又該如何自處？：ThoughtWorks 總監(jiān)咨詢師熊節(jié)分享了他對技術(shù)發(fā)展的相關(guān)看法：科技如何被用于作惡、科技如何控制我們的思想、科技如何在21世紀(jì)復(fù)活了17世紀(jì)的奴隸制、科技工作者如何探索替代方案，并就IT工作者又該如何自處這一問題進(jìn)行了探討。

學(xué)習(xí)資源

斯達(dá)克學(xué)院 StuQ 特別邀請年輕卻有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)的張德檢?師制作了小程序系統(tǒng)直播課程，由最基本的小程序介紹開始，一步步帶領(lǐng)大家熟悉開發(fā)者工具，同時(shí)上手制作簡單的小程序。結(jié)合企業(yè)正在使用的精品案例，從 0 到 1 系統(tǒng)講解，6 周 9 小時(shí)帶你玩轉(zhuǎn)微信小程序開發(fā)。8折優(yōu)惠中。具體詳情戳這里，驚喜不停！