因個人精力有限倒彰,暫停簡書的維護,歡迎大家關注我的知乎https://www.zhihu.com/people/wei-wei-24-86-36/activities莱睁,會持續(xù)分享前端待讳、Web開發(fā)相關文章
「前端之巔」是InfoQ旗下關注前端技術的垂直社群,加入前端之巔學習群請關注「前端之巔」公眾號后回復“加群”仰剿。投稿請發(fā)郵件到editors@cn.infoq.com创淡,注明“前端之巔投稿”。
新聞熱點
國內國外南吮,前端最新動態(tài)
《jQuery 3.2.0 發(fā)布》:jQuery 3.2.0 中包含了一系列的錯誤修復琳彩、性能提升以及部分棄用 API 的徹底移除 。重大的更新包括添加了對于自定義 CSS 屬性操作的支持部凑,徹底移除了 isArray露乏、nodeName 等方法以及修復了
.width()
等部分方法中的問題。( http://6me.us/BN8 )《Facebook 發(fā)布 Create React Native App》:類似于 Create-React-App涂邀,Create React Native App 能夠為開發(fā)者快速創(chuàng)建零配置的 React Native 項目瘟仿,并且與基于 Expo 構建了完整的可以屏蔽底層原生代碼細節(jié)的 React Native 項目,使得開發(fā)者可以快速嘗試上手 React Native 項目 比勉。同時劳较,開發(fā)者也可以使用
npm run eject
命令將項目切換到全配置狀態(tài)驹止,以方便自行添加原生組件。 ( http://6me.us/29r )《2017 React 大會成功舉辦》:2017 年 React Conf 于 3 月 13 日观蜗、14 日成功舉辦臊恋,會上來自世界各地的開發(fā)者就 React Fiber、Flow墓捻、Performance捞镰、React Native 等多個主題發(fā)表了演說與討論,推薦選擇自己喜歡的演講視頻觀看毙替。( http://conf.reactjs.org/livestream )
《Sketch 宣布開源其文件格式》:隨著近日發(fā)布的 Sketch 43 版本岸售,Sketch 宣布開源其文件格式,這也意味著未來可能會有人基于該格式開發(fā) Windows 版本應用或者簡單的 Sketch 文件瀏覽器厂画。鑒于其文件格式為 JSON凸丸,我們也可以暢想未來會出現自動構建的 Web Service。( http://6me.us/DyAYEC )
《Chromium 即將支持 APNG》:該 Commit 會為 Chromium 添加 APNG 格式的支持袱院,該格式可以逐步替換現存的 Gif 格式 屎慢。( https://parg.co/bO9 )
《Kotlin 1.1新增協程、類型別名特性忽洛,提升了對JavaScript的支持》:Kotlin的新版本引入了多項新的語言特性(其中最值得注意的就是協程)腻惠,同時還提升了對其JavaScript目標環(huán)境的支持。( http://www.infoq.com/cn/news/2017/03/kotlin-11-released )
開發(fā)教程
步步為營欲虚,掌握基礎技能
《Flexbox 語法清單》:該網頁提供了交互式的 CSS Flexbox 教程集灌,詳細介紹了 Flexbox 的使用語法與經典案例。( http://yoksel.github.io/flex-cheatsheet/ )
《Sketch:React Native 的 Playground 》:隨著 Create React Native App 的發(fā)布复哆,Expo 發(fā)布了能夠在線編輯 React Native 應用的工具 Sketch欣喧。開發(fā)者可以在 Web 上直接編輯 React Native 應用代碼,或者拖拽方式加入組件梯找,然后通過 Expo 客戶端完成本地預覽唆阿。( http://6me.us/aGFX )
《編寫 JavaScript 框架:客戶端路由》:本文是編寫 JavaScript 框架系列的最后一篇,主要著眼于討論如何實現 JavaScript 客戶端路由及其與服務端路由的區(qū)別锈锤。( https://parg.co/bOL )
《30 天學習 30 個 VR 項目》:本系列作者介紹了從 0 到 1 如何開發(fā) 30 個常見的 VR 項目驯鳖,從最基礎的圖片瀏覽、視頻播放久免,到交互性動畫等等 浅辙。( https://risonsimon.com/days-in-vr/ )
《CORS 詳細指南》:本文是對于瀏覽器中跨域訪問協議 CORS 進行詳細介紹,并且以完整的代碼交互示例演示 CORS 協議的效果與使用方法妄壶。( https://parg.co/bOF )
《Angular的模塊間通信》:模塊是Angular的構建單元摔握,Angular應用程序的所有可視化元素也是由模塊構建的寄狼。當我們把模塊拆散成更小的模塊時丁寄,我們就要確保它們可以把數據傳來傳去氨淌。到那時候,恰當地模塊間通信機制就成了我們應用程序的基礎伊磺,可以讓所有的數據都保持同步狀態(tài)盛正。( https://parg.co/bOD )
工程實踐
立足實踐,提示實際水平
《PWA 在餓了么的實踐經驗》:本篇旨在和大家分享「餓了么 M 站」(https://h5.ele.me/msite/)在 PWA 改造中的實踐經驗屑埋。涉及到的方面有:PWA 線上部署的準備工作豪筝、多頁應用的 prerender 優(yōu)化、實踐過程中踩到的(和推進解決的)坑摘能。( https://parg.co/bO7 )
《滴滴 Web App 5.0 Vue 2.0 重構經驗分享》:滴滴的 Web App 是運行在微信续崖、支付寶、手 Q 以及其它第三方渠道的打車軟件团搞。借著產品層面的功能和視覺升級严望,我們用 Vue 2.0 對它進行了一次技術重構;本文即是本次重構中的經驗分享逻恐。( https://github.com/DDFE/DDFE-blog/issues/13 )
《前端代碼測試概述》:作者在本系列文章中介紹了前端代碼測試的相關概念與實踐技巧像吻,包括了單元測試、集成測試复隆、端到端測試等多個方面拨匆。( http://6me.us/posk )
《以組件為中心的 React 懶加載》:React Loadable 是以組件為中心的懶加載框架,其基于 Webpack 2 提供的
import
提供的異步代碼分割與加載功能進行了一系列的封裝挽拂。( http://6me.us/mNHi )《另一種 CSS 壓縮思路》:本文作者提出了一種新的 CSS 壓縮思路惭每,有可能會損壞原有的 CSS 文件,不過其壓縮比率相較于現有的通用 CSS 壓縮策略會更為優(yōu)秀亏栈。( https://luisant.ca/remynifier )
《來自 Vixlet 的 React 優(yōu)化策略》:在過去的數年中洪鸭,來自 Vixlet 的前端開發(fā)團隊一直使用 React 與 Redux 的開發(fā)架構,本文即是該團隊分享其在開發(fā)過程中發(fā)現的 React 優(yōu)化策略的介紹仑扑。( http://6me.us/dx5 )
深度閱讀
深度思考览爵,升華開發(fā)智慧
《2017 成為專業(yè) Web 開發(fā)者的學習路線圖》:作者在此文中以圖表的方式展現了 2017 年中如果想成為專業(yè)的 Web 開發(fā)者,應該在 Web 前端镇饮、服務端以及 DevOps 領域所需要學習到的技術棧以及進階路線圖蜓竹。( http://6me.us/W0k )
《關于 JWE 安全漏洞的討論》:JSON Web Token 是基于 JSON 的訪問令牌創(chuàng)建標準(RFC 7519),本文則是介紹了 JWE 面對的 Invalid Curve Attack 原理以及受影響的開源庫等內容储藐。( http://6me.us/D0iKp )
《wasm_lua》:wasm_lua 提供了能夠運行于 WASM 環(huán)境下的 Lua 虛擬機俱济,未來基于 Lua 構建前端框架也是個可行的選擇 。( https://github.com/vvanders/wasm_lua )
《U.S. Web 設計標準》:近日 U.S. 官方網站的樣式與視覺設計指南 1.0.0 版本發(fā)布钙勃,包含了大量的 Bug 修復與反饋修正蛛碌。( https://parg.co/bO1 )
《Preact 內部原理探秘》:Preact 是提供了類似于 React API 不過速度更快、包體更小的 React 替代包辖源,本系列文章是 Preact 的開發(fā)者介紹其內部工作原理 蔚携。( https://parg.co/bOj )
《擴展JS應用在架構性取舍上應關注八點要素》:如果想要構建可擴展的軟件希太,可以從很多角度來思考軟件架構。但是如果每個角度都去考慮酝蜒,根本不可能做出想要的軟件誊辉。這就是為什么需要從架構的角度對設計進行取舍:取我們最需要的,舍次要的亡脑。堕澄。( https://parg.co/bOn )
開源項目
樂于分享,共推前端發(fā)展
《手淘發(fā)布 Atlas》:手機淘寶安卓客戶端容器化框架 Atlas 正式宣布開源霉咨。Atlas由阿里巴巴移動團隊自研蛙紫,以容器化思路解決大規(guī)模團隊協作問題,實現并行開發(fā)途戒、快速迭代和動態(tài)部署惊来,適用于Android 4.x以上系統(tǒng)版本的大小型App開發(fā)。 (https://github.com/alibaba/atlas)
《Animista》:Animista 是開箱即用的 CSS 動畫庫棺滞,其作者還發(fā)布了非常易用的在線預覽與選擇站點裁蚁,適合于設計人員選擇合適的動畫效果。( http://animista.net/ )
《Quokka.js》:Quokka 能夠幫助我們在常用的編輯器(譬如 VSCode)中快速建立原型試驗場继准,包括了行內錯誤提示枉证、代碼測試與覆蓋率提示、富文本輸出格式化等等移必。( https://quokkajs.com/ )
《Guetzli》:Google 宣布開源新的 JPEG 編碼器 Guetzli室谚,與現有的壓縮編碼工具相比,其能夠減少近 35% 的文件尺寸而依然保持圖片質量崔泵。( http://6me.us/AM7a )
《wasm-loader》:wasm-loader 是能夠用于 Webpack 的 WASM 二進制模塊導入工具秒赤,其能夠允許你在 JavaScript 代碼中導入 wasm 格式文件并且將二進制文件打包成為 JS Bundle 的一部分 。( https://github.com/ballercat/wasm-loader )
巔峰人生
- 程序員創(chuàng)造的世界并不總是美好憎瘸,IT工作者又該如何自處入篮?:ThoughtWorks 總監(jiān)咨詢師熊節(jié)分享了他對技術發(fā)展的相關看法:科技如何被用于作惡、科技如何控制我們的思想幌甘、科技如何在21世紀復活了17世紀的奴隸制潮售、科技工作者如何探索替代方案,并就IT工作者又該如何自處這一問題進行了探討锅风。
學習資源
斯達克學院 StuQ 特別邀請年輕卻有豐富實戰(zhàn)經驗的張德檢?師制作了小程序系統(tǒng)直播課程酥诽,由最基本的小程序介紹開始,一步步帶領大家熟悉開發(fā)者工具皱埠,同時上手制作簡單的小程序肮帐。結合企業(yè)正在使用的精品案例,從 0 到 1 系統(tǒng)講解边器,6 周 9 小時帶你玩轉微信小程序開發(fā)训枢。8折優(yōu)惠中托修。具體詳情戳這里,驚喜不停肮砾!