947
阿裏雲前端周刊 - 往期回顧（1-3）
阿裏雲前端周刊 - 第 1 期
一、推薦、
1. 如何撰寫 Git 提交信息
https://chris.beams.io/posts/git-commit/
重建一段代碼的上下文是非常費時費力的，這是無法完全避免的。所以我們應該努力盡可能的減少它。提交信息可以幫上這個忙，也正因為此，一個提交信息反應了一名開發者是不是個好的協作者。
2. 十個關於 Node.js REST API 的最佳實踐
這篇文章裏，我們將介紹 Node.js REST API 的最佳實踐，包括關於路由命名，身份認證，黑盒測試，使用恰當的網絡緩存等內容。
3. WebAssembly 為什麼比 asm.js 快？
https://blog.huziketang.com/blog/posts/detail?postId=58ce80d2a6d8a07e449fdd28
WebAssembly 是為 Web 而設計的、可以生成瀏覽器可執行的二進製文件的編程語言。並且於2017 年 2 月 28 日，四個主要的瀏覽器一致同意宣布 WebAssembly 的 MVP 版本已經完成，即將推出一個瀏覽器可以搭載的穩定版本。WebAssembly 的一個主要目標就是變快。本文將給出一些它如何變快的技術細節。
二、ATA
1. React 項目集成 TypeScript 方法綜述
https://www.atatech.org/articles/75889
TypeScript 作為 JavaScript 的超集，提供了完整的類型係統，為靜態檢查提供了可能，靜太檢查能夠讓錯誤暴露在「編譯階段」。這遍文章簡單講一下在 React 項目中使用 TypeScript 的一些步驟。
2. 從iGraph管控係統看前端架構演進--一個後端團隊開發眼中的前端進化簡史
https://www.atatech.org/articles/75373
隨著個性化推薦業務的爆炸式增長，iGraph已經成長為一個托管了3000+張表的在線圖存儲和查詢服務平台。同時，管理iGraph數據和服務的管控係統的前端也在不斷地調整以適應業務的快速增長，從業務接入係統Umars-web到iGraph運維白屏化及自動化的Umars-service到如今待上線的iGraph、DII統一管控平台Autoumars(git)經曆了幾年的變遷。下麵我將通過這幾個平台的變遷來講述我所看到的前端演進過程。
3. 淺談漢字的基礎知識與設計方法
https://www.atatech.org/articles/74774
淺談漢字的基礎知識與設計方法，在設計banner的時候，我們通過banner中重要的元素字體進行設計，達到視覺上傳達情感，表明文字內容的目的。
三、其它
1. Reduce 和 Transduce 的含義
https://www.ruanyifeng.com/blog/2017/03/reduce_transduce.html
學習函數式編程，必須掌握很多術語，否則根本看不懂文檔。
本文介紹兩個基本術語：reduce和transduce。它們非常重要，也非常有用。
2. 解析 vue2.0 的 diff 算法
https://github.com/aooy/blog/issues/2
vue2.0加入了virtual dom，有向react靠攏的意思。vue的diff位於patch.js文件中，我的一個小框架aoy也同樣使用此算法，該算法來源於snabbdom，複雜度為O(n)。
了解diff過程可以讓我們更高效的使用框架。
本文力求以圖文並茂的方式來講明這個diff的過程。
3. 腳本錯誤量極致優化-監控上報與 Script error
https://github.com/joeyguo/blog/issues/13
在前端開發工作中，除了項目開發保質保量上線以外，項目的數據監控也應該配套起來，確保線上的正常運轉。如上報 pv 監控項目是否正常運轉；測速上報反應項目質量；腳本錯誤監控作為監控中重要一環，當頁麵發生報錯的時候，通過上報錯誤信息，能及時發現存在問題，修複優化、減少損失。
阿裏雲前端周刊 - 第 2 期
一、推薦、
1. 移動應用設計：綜述、導航和瀏覽
https://mp.weixin.qq.com/s/LYvBXbNwVnwMNyJOPVuG_w
應用程序現在是主流的提供內容和服務的方式，並已經廣受用戶信賴。但在一個已經高度被開發的市場裏，一款移動應用如何做到有用，有意義並且有價值，以使客戶滿意並留存呢？ Google 的 UX 研究主管 Jenny Gove 為您詳細介紹了創建一款優秀的移動應用的 25 條原則，我們會在這次連載中分批次為您逐一詳述。
2. 如何正確對用戶密碼進行加密？
https://www.infoq.com/cn/articles/how-to-encrypt-the-user-password-correctly
本文介紹了對密碼哈希加密的基礎知識，以及什麼是正確的加密方式。還介紹了常見的密碼破解方法，給出了如何避免密碼被破解的思路。相信讀者閱讀本文後，就會對密碼的加密有一個正確的認識，並對密碼正確進行加密措施。
3. 跨站的藝術-XSS Fuzzing 的技巧
https://www.qcloud.com/community/article/172258001490259493
對於XSS的漏洞挖掘過程，其實就是一個使用Payload不斷測試和調整再測試的過程，這個過程我們把它叫做Fuzzing；同樣是Fuzzing，有些人挖洞比較高效，有些人卻不那麼容易挖出漏洞，除了掌握的技術之外，比如編碼的繞過處理等，還包含一些技巧性的東西，掌握一些技巧和規律，可以使得挖洞會更加從容。
二、ATA
1. 業務運營前端團隊工具集-dbl-zcache
https://www.atatech.org/articles/76631
ZCache是一種在線資源的強緩存方案。前端在AWP後台配置要ZCache的資源列表，WindVane提前下載更新配置和資源，使得客戶端可以從本地讀取這些資源。
2. 聊聊 HSTS 下的 HTTPS 降級問題
https://www.atatech.org/articles/76639
HSTS 的作用是為了在用戶通過 HTTP 訪問網站時不需要服務器做 301/302 跳轉，直接一個 307 本地強製使用 HTTPS 訪問網站，這可以防止用戶在第一次發出請求時被劫持，也減少了一次請求。
3. 我所理解的工程師文化
https://www.atatech.org/articles/76564
對於什麼是工程師文化，很多人都能說出很多關鍵詞，比如：匠心，創新，專業，擔當，開放……
然而如果要用一句話來描述什麼是工程師文化，如何判斷一家公司是不是一家工程師文化的公司，卻不是一個很容易的問題。
三、其它
1. 深入理解 JSON
https://segmentfault.com/a/1190000008832185
我們再追本溯源問一下，JSON究竟是什麼東西？為什麼JSON就是易於數據交換？JSON和JS對象的區別？JS中JSON.parse、JSON.stringify和不常見的toJSON，這幾個函數的參數和處理細節到底是怎樣的？
2. 精讀 js 模塊化發展
https://mp.weixin.qq.com/s/kfXJ8ixpWq32hEAE3phcUA
如今，Javascript 模塊化規範非常方便、自然，但這個新規範僅執行了2年，就在 4 年前，js 的模塊化還停留在運行時支持，10 年前，通過後端模版定義、注釋定義模塊依賴。對經曆過來的人來說，曆史的模塊化方式還停留在腦海中，反而新上手的同學會更快接受現代的模塊化規範。
3. 真正了解CSS3背景下的@font face規則
https://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/
很多人隻要一提到@font face規則，心中就會不由自主“哦~~”的一聲：“這個我知道，可以用來生成自定義字符小圖標！”話是沒錯，問題在於很多人就以為生成字符小圖標就是@font face規則的全部，實際上隻是功能之一，如果真正了解@font face規則，你會發現，@font face規則可以做的事情其實非常多，尤其我們不考慮IE7，IE8瀏覽器的情況下。
阿裏雲前端周刊 - 第 3 期
一、推薦、
1. 在 Node.js 中引入模塊：你所需要知道的一切都在這裏
https://huziketang.com/blog/posts/detail?postId=58eaf471a58c240ae35bb8e3
本文介紹了 Node.js 中引入模塊的解析、加載、打包、VM 功能處理、緩存等五大步驟。
2. 為什麼你統計 PV 的方式是錯的？
https://www.jianshu.com/p/84e617daf484
翻譯自 Google 工程師 Philip Walton 的文章。共 3754 字，讀完需 7 分鍾。合格的工程師要能認識到數據和功能一樣重要，因為準確的數據收集是產品迭代、市場營銷的決策基礎。本文會幫你剖析為什麼你常用的統計方式是錯的？然後給出可行的解決方案。
3. 深入研究Chrome：Preload與Prefetch原理，及其優先級
https://mp.weixin.qq.com/s/O5E2ASBEzfKOxgzCCJDlfw
preload 是聲明式的 fetch，可以強製瀏覽器請求資源，同時不阻塞文檔 onload 事件。 prefetch 提示瀏覽器這個資源將來可能需要，但是把決定是否和什麼時間加載這個資源的決定權交給瀏覽器。
4. 天天寫業務代碼的那些年，我們是如何成長過來的
https://www.phodal.com/blog/howto-learn-technoloty-from-legacy-system-project/
天天寫業務代碼如何成長？本文作者分享了自己的經驗：組內技術活動，花時間投入練習，假想項目的重構。
三、其它
1. GPU 加速是什麼
https://aotu.io/notes/2017/04/11/GPU/
本文主要介紹了以下幾點問題：GPU 加速能做什麼；GPU 是什麼，如何用 Chrome devtools 進行分析 debug；如何開啟 GPU 加速；GPU 加速隱藏的坑。
2. CSS 揭秘整理之半透明邊框
https://mp.weixin.qq.com/s/kfXJ8ixpWq32hEAE3phcUA
和 CSS 邊框有關的那些事兒。
3. 深入理解 CSS：font metrics, line-height 以及 vertical-align
Line-height 和 vertical-align 可能並不如你所想的那般簡單。
4. 通往未來的前端工程師
https://www.jianshu.com/p/6884c603d43c
暢想一下，未來的前端工程師會是什麼樣的呢？
最後更新：2017-05-31 12:31:43