Everyday-FE-Articles 8~11月前端文章日推 [持續更新]

摘要： 由來自@阿里馬躍的每日文章推薦，於是順手整理，以便學習... -- By Ale-cc /* 注：序號不準確 */ 八月份 8月7日 星期二，農曆六月廿六 Scriptswitch: Conditional Script Loading Mana...

由來自@阿里馬躍的每日文章推薦，於是順手整理，以便學習... -- By Ale-cc

/* 注：序號不準確 */

八月份

8月7日 星期二，農曆六月廿六

4. Scriptswitch: Conditional Script Loading Manager for Browsers ofollow,noindex">github.com/anywhichway…

5. 三十分鐘掌握Webpack效能優化supermaryy.com/

6. 前端異常監控、上報及js壓縮程式碼定位 juejin.im/post/5b55c3…

7. 說一說javascript的非同步程式設計 juejin.im/post/5b643d…

8. 前端效能優化 mp.weixin.qq.com/s/oX6mspFtc…

9. 【第1353期】使用者體驗法則 mp.weixin.qq.com/s/mGjtX1frB…

8月9日 星期四，農曆六月廿八

11. 觀點｜螞蟻金服玉伯：我們是如何從前端技術進化到體驗科技的？ juejin.im/post/5b6904…

12. 手摸手，帶你用合理的姿勢使用webpack4（上） juejin.im/post/5b5690…

13. 手摸手，帶你用合理的姿勢使用webpack4（下） juejin.im/post/5b5d6d…

14. 阿里巴巴開源noForm：這也許是更好的表單解決方案https://www.oschina.net/p/noform

8月10日 星期五，農曆六月廿九

1. The "Slots" Pattern in React: Passing Multiple Children to Components daveceddia.com/pluggable-s…

2. vue中Axios的封裝和API介面的管理 juejin.im/post/5b55c1…

3. The JavaScript Clipboard crashcourse frontendnews.io/editions/20…

4. 【第1353期】使用者體驗法則 mp.weixin.qq.com/s/mGjtX1frB…

5. SurveyJS: Improved Form Builder Usability hackernoon.com/surveyjs-im…

6. Vue2.x原始碼解析系列四：資料響應之Observer juejin.im/post/5b5eae…

8月13日 每日資訊

3. 前端異常監控、上報及js壓縮程式碼定位 juejin.im/post/5b55c3…

4. 如何用node開發自己的cli工具https://juejin.im/post/5b6b086cf265da0f8d368935

5. REST將會過時，而GraphQL則會長存 mp.weixin.qq.com/s?__biz=MzU…

6. 阮一峰每週分享15期http://www.ruanyifeng.com/blog/2018/07/weekly-issue-15.html

7. 瀏覽器事件環和Node事件環不得不說的故事！ juejin.im/post/5b5f36…

8. CSSTHIS: Excellent Alternative to Styled-Components github.com/uppercod/cs…

9. 一點感悟：當走完所有大廠的實習面試後 juejin.im/post/5b68f3…

10. 淺析圖片懶載入https://juejin.im/entry/5b6ee4cbe51d451988565f80

8月14日 每日資訊

8. 手摸手，帶你用合理的姿勢使用webpack4（上） juejin.im/post/5b5690…

9. Es6中的模組化Module,匯入(import)匯出(export) mp.weixin.qq.com/s/NDA46vKoF…

10. 從青銅到王者10個css3偽類使用技巧和運用 juejin.im/post/5b6d0c…

11. 微前端的設計理念與實踐初探 juejin.im/post/5b7051…

12. 美團掃碼付的前端可用性保障實踐 juejin.im/post/5b6d53…

13. javaScript 微任務 jakearchibald.com/2015/tasks-…

14. 狙殺頁面卡頓 —— Performance 指北 pobusama.github.io/2018/07/27/…

8月15日 每日技術諮詢

1. 關於CSS變數你需要知道的一切 www.zcfy.cc/article/eve…

2. WebWorker與Socket/">WebSocket實現前端訊息匯流排 juejin.im/post/5b6d38…

3. Convert Amazon Links In A Hugo Site To Affiliate Links With Gulp www.thepolyglotdeveloper.com/2018/08/con…

4. 初識 Chrome Extension zhuanlan.zhihu.com/p/41933841

5. webpack4 系列教材 wanago.io/2018/07/16/…

6. 前端重構正規化之 float layout scala.cool/2018/08/feb…

8月16日 每日資訊

淺談Vue-router的部分高階用法 juejin.im/post/5b73a5…

Embedded Builtins v8project.blogspot.com/2018/08/emb…

WEB安全 - 認識與防禦XSS攻擊 www.cnblogs.com/HCJJ/p/9468…

一個視訊首屏的優化過程 juejin.im/post/5b6828…

淺談Http快取機制 www.cnblogs.com/vajoy/p/534…

How to Debug a Node.js app in a Docker Container blog.risingstack.com/how-to-debu…

8月17日 每日資訊

2. 別鬧！自簽名證書！ 360" rel="nofollow,noindex">zhuanlan.zhihu.com/p/41501360

3. 前端效能優化之雅虎35條軍規https://juejin.im/post/5b73ef38f265da281e048e51

4. javascript高階函式map、reduce、sort、filter chaoxuelei.github.io/2018/08/15/…

5. URI's fragment webfe.kujiale.com/uris-fragme…

6. 前端面試&筆試&錯題指南https://github.com/forrany/Web-Project

8月20日 每日資訊

2. 狀態管理器這麼火，讓我們來做一個簡單的redux原理解析吧(vuex類似) juejin.im/post/5b751e…

3. 前端中常見資料結構小結 github.com/MuYunyun/bl…

4. Node.js 中的 Stream webfe.kujiale.com/nodejsstrea…

5. 惰性求值——lodash原始碼解讀 juejin.im/post/5b784b…

6. 移動端上傳圖片進行平移放大縮小操作後生成海報

7. 2018 來談談 Web Component www.sitepen.com/blog/2018/0…

8. 基於 HTML5 的 WebGL 自定義 3D 攝像頭監控模型 www.cnblogs.com/xhload3d/p/…

8月21日 每日資訊

1. 簡單聊聊 GZIP 的壓縮原理與日常應用 zhuanlan.zhihu.com/p/42418273

2. 前端程式員必須掌握之三角函式在前端動畫中的應用 w3ctrain.com/2018/08/20/…

3. 【譯】15個有趣的JS和CSS庫（2018.7） juejin.im/post/5b777f…

【效能監控專題】

10. 自己動手打造前端效能監控系統 www.musicfe.cn/page/17

11. 程式碼跑不快？跑個分就知道了 mp.weixin.qq.com/s/-uB2cC9An…

8月22日 每日資訊

4. 通過HTTP的HEADER完成各種騷操作https://juejin.im/post/5b7919345188254312414b9c

5. 小動畫大學問https://juejin.im/post/5b7c2193f265da4340157b5b

6. 【譯】 開始在web中使用JS Modules www.musicfe.cn/page/16

7. 【推薦】QUIC協議分析https://mp.weixin.qq.com/s/a6oDkjiIJqVEMpuCzt7Mtw

8. Quantum初探 juejin.im/post/5b7a40…

8月23日 每日資訊

3. 一行 JavaScript 程式碼竟然讓FT.com 網站慢了十倍 juejin.im/post/5b7bb6…

4. Convert Data Between CSV And JSON With Simple JavaScript www.thepolyglotdeveloper.com/2018/08/con…

5. 【譯】如何用 Node.Js 和 Puppeteer 爬取網頁 juejin.im/post/5b7a8e… 原文https://coding.napolux.com/how-to-scrap-web-page-nodejs-puppeteer/

6. 【推薦】如何管理10萬行程式碼的單頁應用https://zhuanlan.zhihu.com/p/29711456?utm_source=wechat_session&utm_medium=social

8月27日 每日資訊

5. 凹凸實驗室：支撐數千萬消費者的小程式開發實踐 juejin.im/post/5b7e99…

6. 用Vue構建一個github“視覺化大資料平臺”-GitDataV，設計開發分享 juejin.im/post/5b7f6c…

7. 用例項告訴你如何重構帶有壞味道的程式碼 mp.weixin.qq.com/s?__biz=MzU…

8. 鴿子傳信解釋 HTTPS blog.hhking.cn/2018/08/25/…

8月28日 每日資訊

1. React v16.3 之後的元件生命週期函式: zhuanlan.zhihu.com/p/38030418 React v16.3 起，React 元件生命週期函式發生了巨大變化……

2. 三角函式在前端動畫中的應用: w3ctrain.com/2018/08/20/… 如何使用三角函式讓動畫更順滑。

3. CSS 混合模式高階應用: www.w3cplus.com/css/advance… 這篇文章並不是對 CSS 的混合模式做相應的科普，而是通過幾個示例，向大家展示了 CSS 混合模式的強大之處，以及可使用的場景。

4. 實戰 CSS Scroll Snapping: www.w3cplus.com/css/practic… CSS Scroll Snap（CSS 滾動捕捉）允許你在使用者完成滾動後多鎖定特定的元素或位置。Google 69+、Firefox、Edge 和 Safari 都支援它的某些版本。

5. JavaScript 的元系統: blog.csdn.net/aimingoo/ar… 本文是對在第四屆 FEDay 中分享的《無類繼承：JavaScript面向物件的根基》的進一步討論。

6. 前端插拔式 SPA 應用架構實現方案: www.yuque.com/es2049/blog… 關於架構的一些思考。

7. 快應用入門小結篇: blog.poetries.top/2018/08/21/… 快應用入門 step by step。

8. 滾動視差？CSS 不在話下: www.cnblogs.com/coco1s/p/94… 主要介紹 Parallax Scrolling 的幾種實現方式。

9. 聊聊 Web 中的度數單位: www.w3cplus.com/css/underst… 主要介紹了 CSS 中的角度單位，及其常見的出現場景。

8月29日 每日資訊

9. 讓 Markdown 中的程式碼可以實時執行 juejin.im/post/5b8512…

10. JavaScript OOP in 4 steps exploringjs.com/impatient-j…

11. 前後端分離 Vue + NodeJS(Koa) + MongoDB，從產品到開發，全棧實踐 juejin.im/post/5b850a…

12. 頁面字型閃一下？這兩個標準能幫到你 juejin.im/post/5b84a8…

13. package.json 中的 Module 欄位是幹嘛的 segmentfault.com/a/119000001…

14. nodejs中的子程序，深入解析child_process模組和cluster模組 github.com/fortheallli…

15. 重磅！首個多端 UI 元件庫 - Taro UI 釋出！aotu.io/notes/2018/…

16. TypeScript在react專案中的實踐 juejin.im/post/5b83a0…

8月30日 每日資訊

2. 微信小程式實現商城案例（賦原始碼) juejin.im/post/5b836d…

3. It Is Official: Water Ice Confirmed On The Earth’s Moon www.evolving-science.com/space/water…

4. 《Web 推送通知》系列翻譯 | 第二篇：推送是怎麼工作的? juejin.im/post/5b850b…

5. Event Loop 這個迴圈你曉得麼？(附GIF詳解) zhuanlan.zhihu.com/p/41543963

6. vue-video-player,通過自定義按鈕元件實現全屏切換效果 juejin.im/post/5b84ee…

8月31日 每日資訊

1. KOA簡易模版引擎實現https://juejin.im/post/5b865aeb6fb9a01a040717fb

2. 前端使用puppeteer 爬蟲生成《React.js 小書》PDF併合並 juejin.im/post/5b8673…

3. International SEO：多語言多區域網站SEO的快速入門指南 juejin.im/post/5b86d5…

4. 去哪兒網React轉微信小程式實踐https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247489432&idx=1&sn=e7b1583b179152d5214ed0c3e17da424&chksm=f951a2dbce262bcdbec76590541787da8d59ad5f3bdfd84a10be011865325ddadf1cf7f28f00&token=2089145282&lang=zh_CN#rd

5. GraphQL with Next.js and Apollonec.is/writing/gra…

6. 《Web 推送通知》系列翻譯 | 第三篇：訂閱一個使用者 github.com/yued-fe/y-t…

7. ECMAScript正則表示式6個最新特性 blog.fundebug.com/2018/08/30/…

九月份

9月1日 每日資訊

1. 2018年的@font-face juejin.im/entry/5b861…

2. 如何使用webpack構建Ueditor juejin.im/post/5b88e7…

3. 徹底搞懂word-break、word-wrap、white-space juejin.im/post/5b8905…

4. 前端資料校驗從建模開始 juejin.im/post/5b87c8…

5. 京晚8點--H5單頁面手勢滑屏效果實踐 blog.csdn.net/Wei_Smile/a…

6. 物件解構與點操作訪問究竟誰快 juejin.im/post/5b879b…

7. 揭密React setState imweb.io/topic/5b189…

9月3日 每日資訊

1. 淺談 TypeScript zhuanlan.zhihu.com/fed-talk

2. React Fire: Modernizing React DOM github.com/facebook/re…

3. 理解 Node.js Stream 模組 zhangxiang958.github.io/2018/09/01/…

4. 如何實現前端錄音功能 juejin.im/post/5b8bf7…

5. chrome外掛定製頁面和設定https://zhuanlan.zhihu.com/p/43189092

9月4日 每日資訊

2. AST抽象語法樹——最基礎的javascript重點知識，99%的人根本不瞭解 segmentfault.com/a/119000001…

3. 程式設計師職業生涯的6個階段 zhuanlan.zhihu.com/p/43597829

4. Three input element properties that I discovered while reading MDN www.stefanjudis.com/blog/three-…

5. 2018你應該知道的Web效能資訊採集指南https://github.com/berwin/Blog/issues/25

9月5日 每日資訊

1. ISOMORPHIC 的升級之路 zhuanlan.zhihu.com/p/43227689

2. Query records for a list of keys in GraphQL sandny.com/2018/09/03/…

3. 《從零構建前後分離web專案》探究 - 深入聊聊前後分離架構 juejin.im/post/5b8cd6…

4. 記一次Vue全頁面SSR深坑之旅 - 微弱的記憶體/CPU洩漏 juejin.im/post/5b8d31…

5. 搞懂 browserslist (基於官方文件翻譯） juejin.im/post/5b8cff…

9月6日 每日資訊

2. axios 內部設計分析 blog.hhking.cn/2018/09/04/…

4. JavaScript Functions詳解（包含ES6箭頭函式） www.zcfy.cc/article/jav…

5. 記錄一次vue2.0（history模式）下微信自定義分享的坑 juejin.im/post/5b8e44…

6. 深入探究ES6之模組系統 juejin.im/post/5b88fb…

7. 通過proxies設定常量 www.zcfy.cc/article/set…

9月7日 每日資訊

1. Puck.js: Javascript + Bluetooth === Awesome

2. 《從零構建前後分離的web專案》：前端了解過關了嗎？ juejin.im/post/5b8e5b…

3. 編寫更優雅的 JavaScript 程式碼（長期更新） juejin.im/post/5b8fd3…

4. 攜程前端模擬排序動畫 juejin.im/post/5b8fca…

5. 【Node】簡單快捷的圖片壓縮指令碼 github.com/HuJiaoHJ/bl…

6. Fluwx:讓在Flutter中使用微信SDK成為可能 www.jianshu.com/p/cf9872938…

7. 「譯」JS 引擎核心: 原型優化 (原文) mathiasbynens.be/notes/proto… juejin.im/post/5b8fe7…

9月10日 每日資訊

5. TypeScript AST 檢視器https://ts-ast-viewer.com/

7. 用瀏覽器輕鬆錄製音訊、視訊—— MediaRecorder API denzel.netlify.com/js/useful_w…

8. 如何保障前端專案的程式碼質量 juejin.im/post/5b911f…

9. webapck4 多頁面，多環境配置https://juejin.im/post/5b9116086fb9a05d05307e96

9月11日 每日資訊

5. 面向體驗的重構優化 juejin.im/post/5b9644…

9. 【前端效能】Web 動畫幀率（FPS）計算 www.cnblogs.com/coco1s/p/80…

10. Grouping AJAX requests in a pool aralroca.com/2018/09/10/…

11. 聊聊我對現代前端框架的認知 juejin.im/post/5b9617…

12. canvas畫素點獲取 —— 拾色器、放大器https://denzel.netlify.com/html/canvas_pixel_pick.html

    9月12日 每日資訊

13. webpack效能優化不完全指北https://juejin.im/post/5b8ac03ff265da431c627f8e

14. 「2018前端面試總結」 github.com/qianbin01/f…

15. 相對現代化的把控前端程式碼質量 soulteary.com/2018/09/06/…

16. webview佈局適配實踐https://juejin.im/post/5b92a0eaf265da0ad13b5cac

9月13日 每日資訊

5. 淺談hybrid技術http://www.cnblogs.com/yexiaochai/p/4921635.html

6. 高效的 GraphQL + Antd lutaonan.com/blog/effect…

7. 11 Javascript Data Visualization Libraries for 2018(視覺化工具推薦) www.aliyun.com/jiaocheng/1… bashooka.com%2Fcoding%2F10-useful-javascript-data-visualization-libraries%2F" rel="nofollow,noindex">bashooka.com/coding/10-u…

8. 你試過不用if擼程式碼嗎？ blog.fundebug.com/2017/11/06/…

9. 使用JS實現JS編譯器，並將目標js生成二進位制 juejin.im/post/5b923c…

10. Great usages of Array spread operator in examples cloud.tencent.com/developer/s…

11. Iceworks 2.7.0 釋出，海量圖表供你選擇 segmentfault.com/a/119000001…

12. 記一次前端大廠面試 juejin.im/post/5b9770…

13. 基於webpack4構建可預測的持久化快取方案 juejin.im/post/5b977a…

14. 工作七年的切圖仔如何面試web前端？ juejin.im/post/5b9849…

/* 4、5、8無連結，整理時已補上 Ale-cc注 */

9月14日 每日資訊

1. 基於 WebRTC 和 WebVR 實現 VR 視訊通話 webrtc.org.cn/20180906-we…

2. 從觀察者模式到手寫EventEmitter原始碼 juejin.im/post/5b987d…

3. 使用ColorfulImg獲取圖片主題色！ juejin.im/post/5b97e7…

4. H5遊戲開發：橫屏適配 zhuanlan.zhihu.com/p/30577906

5. 你對CommonJS規範瞭解多少？ juejin.im/post/5b966d…

9月15日 每日資訊

4. 從撒狗糧帶你瞭解WoT連線場景 mp.weixin.qq.com/s?__biz=MzU…

5. 在微信小程式中渲染HTML內容https://juejin.im/post/5b9b2be55188255c9a771e79

6. react-native 0.57 版本更新日誌 juejin.im/post/5b99de…

7. CSS實現水平垂直居中的10種方式（史上最全） juejin.im/post/5b9a44…

8. NodeJS 模組化的簡易實現（commonJS） juejin.im/post/5b966d…

9. 前端通訊：ajax設計方案 - 設計請求池，讓前端通訊快 zhuanlan.zhihu.com/p/44477183

9月16日 每日資訊

2. 如果不用 Node.js 寫業務https://juejin.im/post/5b987f39e51d450e805b2261

3. Security risk for opening new tabs or windows github.com/n0ruSh/blog…

4. 簡易表示式解析器編寫 juejin.im/post/5b9bb5…

5. GraphQL 技術淺析https://juejin.im/post/5b9b650df265da0afe62cf4e

9月17日 每日資訊

1. 如何只用 CSS程式碼讓一臺 iPhone/macOS 崩潰重啟? :bomb:https://juejin.im/entry/5b9e5b906fb9a05d290ee5e7

2. 「譯」如何使用 NodeJS 構建基於 RPC 的 API 系統https://juejin.im/post/5b9e5d046fb9a05d0d285f85

3. TypeScript 學習資源合集https://juejin.im/entry/5b9e4a135188255c3a2d3695

9月18日 每日資訊

2. 作為前端你拿什麼證明網站體驗？ juejin.im/post/5b9e61…

3. JS計算精度小記https://juejin.im/post/5b9c7cc6f265da0ab41e473b

4. snippet,讓你編碼效率翻倍https://juejin.im/post/5b99ed89f265da0af7750612

5. 專案初期的最優技術方案https://mp.weixin.qq.com/s/iThCyVxNt1qLWwfhZFkczQ

9月19日 每日資訊

1. 樹莓派，不玩不知道 mp.weixin.qq.com/s?__biz=MzU…

2. 震驚! 滑動驗證碼竟然能這樣破解https://mp.weixin.qq.com/s?__biz=MzUxMTcwOTM4Mg==&mid=2247483925&idx=1&sn=c756231d3e9a5dae0751b4c79bd57fe3&chksm=f96edbbcce1952aa6b20e32dfc5a0e166a4247b01fddaac9a60399fa08c1a44b1a14c13c0dba&token=299205667&lang=zh_CN#rd

3. Nodejs如何呼叫Dll模組 juejin.im/post/5b9f56…

4. 5 Tips to Write Better Conditionals in JavaScript scotch.io/tutorials/5…

5. electron終極奧義 五千字教程丟給你 juejin.im/post/5ba06b…

6. puppeteer+mysql—爬蟲新方法！抓取新聞&評論so easy！ juejin.im/post/5b9f13…

7. 用 canvas 的 getImageData 做點有趣的事 juejin.im/post/5ba065…

9月20日 每日資訊

1. React Profiler 介紹 github.com/xitu/gold-m…

2. 基於Nodejs的Tcp封包和解包https://juejin.im/post/5ba119735188255c4a711682

3. 精讀《REST，GraphQL，Webhooks & gRPC 如何選型》 segmentfault.com/a/119000001…

4. 如何優雅地鏈式取值https://juejin.im/post/5ba08483e51d450e99430a7f

5. JS的分號可以省掉嗎？ blog.fundebug.com/2018/09/18/…

9月21日 每日資訊

2. 利用CSS改變圖片顏色的多種方法https://juejin.im/post/5ba21d78f265da0af0337fe3

3. The web app checklist logrocket.com/blog/webapp…

4. How to Create a Guid/UUID code.askmein.com/create-guid…

5. 首屆前端藝術家沙龍精彩回顧 artist.alibaba.com/events/2018…

9月25日 每日資訊

5. 記錄一次打包優化https://juejin.im/post/5ba4f2266fb9a05d28734815

6. 網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分https://juejin.im/post/5ba73d1de51d450e551a0d08

7. 前端常用外掛、工具類庫https://juejin.im/post/5ba7d5dd5188255c6140cc9d

9月26日 每日資訊

告別龐大 PSD，輕鬆測量 imcuttle.github.io/make-psd-me…

深入探究immutable.js的實現機制

1. zhuanlan.zhihu.com/p/44571842

2. zhuanlan.zhihu.com/p/45106741

3.《前端之路》之 webpack 4.0+ 的應用構建 www.cnblogs.com/erbingbing/…

4. Show EJS: match-game - Multiplayer game developed with preact, socket-io and rxjs github.com/siffogh/mat…

5. Android 9 適配怎麼做？ “QQ音樂”優化實錄 wetest.qq.com/lab/view/40…

6. Koa2 中介軟體原理解析https://www.pandashen.com/2018/08/20/20180820200342/

9月27日 每日資訊

8. 3 Methods to Resolve GraphQL Endpoints www.contentful.com/blog/2018/0…

12. 22行程式碼的JS指令碼導致英國航空公司38萬乘客資料洩露 www.freebuf.com/articles/we…

14.漫畫告訴你什麼是ddos mp.weixin.qq.com/s/L5i_wzE8H…

13.瀏覽器的event loop mp.weixin.qq.com/s/r9hJmsK9o…

9月28日 每日資訊

The Best Explanation of JavaScript Reactivity medium.com/vue-mastery…

移動網際網路十年 mp.weixin.qq.com/s/IysgXGBQ8…

深入理解Typescript jkchao.github.io/typescript-…

9月29日 每日資訊

5. Nginx與前端開發https://juejin.im/post/5bacbd395188255c8d0fd4b2

6. 地圖小區景點邊界輪廓實現https://juejin.im/post/5bac9fade51d450e7210c3b3

阿里node地下鐵分享沙龍（深圳站） mp.weixin.qq.com/s/QP7FEt2Hb… 活動地點：深圳阿里中心

11月1日 每日資訊