欄目主編：平俠
The Developer Experience Gap
https://redmonk.com/sogrady/2020/10/06/developer-experience-gap/If there is and can be no Apple-equivalent enterprise vendor arriving to make sure the enterprise telephone app team plays nicely with the enterprise music player team, what progress can be expected? It’s early, and the next few quarters should provide hints at who has accurately identified the depth of the problem and taken steps to address it. In the meantime, here are five adjectives that will describe the next generation of developer experience: Comprehensive, Developer Native, Elegant, Multi-Runtime, Multi-Vendor.
Faster Web App Delivery with PRPL
https://addyosmani.com/blog/the-prpl-pattern/PRPL is a pattern for structuring and serving web applications and Progressive Web Apps (PWAs) with an emphasis on improved app delivery and launch performance. The letters describe a set of ordered steps for fast, reliable, efficient loading.
Webpack 5 release
https://webpack.js.org/blog/2020-10-10-webpack-5-release/The major version was also the chance to revise some of the defaults and to align with proposals and specifications that come up in the meantime. Relaeted: Webpack 5 Headache, How to Set Up webpack 5 from Scratch.
Temporal: Open Source Workflows as Code
https://mikhail.io/2020/10/temporal-open-source-workflows-as-code/Microservices, serverless functions, cloud-native applications—distributed event-driven business applications are hot, and we will deal with them for years. I worry that the application development industry underestimates the complexity of such systems. Ad-hoc solutions to common problems may rapidly increase the technical debt and slow down the ability to innovate. I’m excited to see tools like Temporal enter the space of open-source workflows, or rather the space of asynchronous data processing. Releated: Why the Serverless Revolution Has Stalled, Serverless Horror Stories.
Emerging Architectures for Modern Data Infrastructure
https://a16z.com/2020/10/15/the-emerging-architectures-for-modern-data-infrastructure/And yet, despite all of this energy and momentum, we’ve found that there is still a tremendous amount of confusion around what technologies are on the leading end of this trend and how they are used in practice. In the last two years, we talked to hundreds of founders, corporate data leaders, and other experts – including interviewing 20+ practitioners on their current data stacks – in an attempt to codify emerging best practices and draw up a common vocabulary around data infrastructure. This post will begin to share the results of that work and showcase technologists pushing the industry forward.
欄目主編：侑夕、紫益
🧐一周精讀🧐《設計模式 - Factory Method 工廠方法》
https://github.com/dt-fe/weekly/169.精讀《設計模式 - Factory Method 工廠方法》.md通過三個生動的例子與 JS 示例代碼，幫助前端的你了解設計模式，讓我們一起積累不過時的知識！
Factory Method（工廠方法）屬于建立型模式，利用工廠方法建立對象執行個體而不是直接用 New 關鍵字執行個體化。意圖：定義一個用于建立對象的接口，讓子類決定執行個體化哪一個類。Factory Method 使一個類的執行個體化延遲到其子類。
ECMAScript 2020 新增特性
https://juejin.im/post/6883306672064987149ECMAScript 2020 是 ECMAScript 語言規範的第 11 版，新增的這 9 個新特性值得一學。
Serverless 未來十年發展解讀
https://juejin.im/post/6883773727733972999本文整理自 Johann Schleier-Smith 在 ServerlessDays China 的演講，主要分為四個部分：首先闡述 UC Berkeley 怎樣來定義 Serverless ，之後會分享一些近期的研究成果和進展，最後提出對雲計算未來的一些預測和設想。
浏覽器是如何工作的
https://king-hcj.github.io/2020/10/05/google-v8/一篇文章方方面面的介紹到了 Chrome V8，讓你更懂 JavaScript，很是詳細。
超全的 Linux Shell 文本處理工具集錦
https://segmentfault.com/a/1190000037480939每周學一點新知識，用過 Shell 處理一些文本才知道原來這麼簡單友善，此文将一些處理文本常見的工具都介紹了一個遍，可先了解到用的時候再查。
一文了解檔案上傳全過程
https://segmentfault.com/a/1190000037411957一篇很詳細的介紹檔案上傳流程的好文，從前置知識、請求端、服務端、接收端一層一層來帶着入學的感覺。
欄目主編：侑夕
Zipson - Json 壓縮工具
https://github.com/jgranstrom/zipsonZipson 是一個讓原本
JSON.parse/stringify
增加了壓縮和流媒體支援的臨時替代方案，感覺前後端傳輸中，接口先壓縮吐出資料，前端通過解壓擷取 Json，可讓傳輸資料變小 50%。
Bubble Tea：一個強大輕量的 TUI 架構
https://github.com/charmbracelet/bubbleteaBubble Tea 一個基于 Elm 架構的 Go 架構，借此可用有趣、函數式、帶狀态的方式去編寫指令行 APP，效果很不錯，雖然是 GO 語言，不過可觸類旁通研究一波。
BlurHash: 圖檔懶加載舒服的占位符
https://github.com/woltapp/blurhash之前我們一般使用純灰色亦或是骨架占位符的方式來緩存暫未出來的圖檔，雖然看起來沒問題但是不讨設計喜歡，BlurHash 這個模糊彩色的占位符值得試試。
Drogon：一個基于 C++14/17 的 Http 應用架構
https://github.com/an-tao/drogonDrogon 是一個基于 C14/17 的 Http 應用架構，通可以友善的使用 C建構各種類型的 Web 應用服務端程式，寫習慣 Node 的同學看看這個會讓你驚訝的。
detect-gpu:一個 GPU 的檢測庫
https://github.com/TimvanScherpenzeel/detect-gpu根據 GPU 的 3D 渲染基準分數對 GPU 進行分類，開發人員可借此結果為圖形密集型應用程式提供合理的預設設定。
Plausible Analytics：Google Analytics 替代品
https://github.com/plausible/analyticsPlausible Analytics 是一個簡單、輕量且隐私友好的 Google Analytics 替代品，不使用 cookie，自托管或者雲上部署都可以。
Awesome YouTubers
https://github.com/JoseDeFreitas/awesome-youtubers以上這個 Awesome YouTubers 将技術領域值得關注的 YouTuber 給挑選出來了，适合那種看視訊學習的同學來有選擇關注~
欄目主編：大漠
[mediaqueries-5] Updating the CSS media feature syntax for foldable & dual-screen devices #5621
https://github.com/w3c/csswg-drafts/issues/5621@zouhir 和他的同僚@dlibby是最早提出了跨媒體特性，主要用來解決微軟雙螢幕裝置，然後拓展到可折疊螢幕，甚至是可以通過建立更多枚舉值來表示新硬體的螢幕拓撲。這是目前解決雙螢幕和可折疊螢幕的技術方案之一。現在該特性已送出W3C規範中 Media Queries Level 5進行讨論。
The --var: ; hack to toggle multiple values with one custom property
https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property你肯定知道使用JavaScript來動态更新或者應用CSS的屬性值，但你肯定不知道如何在CSS中采用自定義屬性的特性來決定屬性運用哪一個值。時至今日的CSS自定義屬性也可以做到JavaScript中真（
true
）和假（
false
）的切換。
Logical layout enhancements with flow-relative shorthands
https://web.dev/logical-property-shorthands/很多開發者都習慣于實體屬性，但在Web的布局當中實體屬性将會帶來很多令人感到困惑，甚至是麻煩。特别是有着國際業務需求的同學，那麼CSS邏輯屬性的到來，将會改變這一切，再也不會讓你為不同語言排版，布局感到頭痛。而且CSS邏輯屬性真的要到來了，甚至說已經到來了。
Dynamic Element Scaling in CSS
https://levelup.gitconnected.com/dynamic-element-scaling-in-css-7e35ed9a3914使用CSS給HTML元素做動态縮放，比如 width 、 height 或者 font-size ，可能會想到的是使用CSS媒體查詢特性，在不同的螢幕下使用不同的值。但這将會增加代碼的備援度，也會讓你的代碼變得越來越難維護。在這篇文章中，作者通過CSS的 calc() 函數，向大家展示了如何動态修改元素大小。
一個Div的能做什麼：Demo1
https://codepen.io/jshwrnr/full/ZEOGroR這是一個
div
建構的紋理背景效果。
欄目主編：彼洋
TC39 9月會議提案進度報告
https://www.yuque.com/alibabaf2e/vab8a9/czwuqv本次會議上，我們主持了 Error Cause 提案進入了 Stage 1，作為阿裡巴巴集團内 JavaScript 錯誤處理模式的一個總結，将這個行為寫入标準，便于更多的開發者工具如 Alinode、阿裡雲 ARMS 等改進異常分析的體驗。
Chrome 86 重要更新
https://www.yuque.com/alibabaf2e/gt3np7/ullslmChrome 86 在2020年10月推出了穩定版，現已全面應用于Android、Chrome OS、Linux、macOS 和 Windows等平台，我們一起來看下這次的重要更新。
欄目主編：十吾
為什麼智能手機會導緻頸部綜合症可視化
https://multimedia.scmp.com/lifestyle/article/2183329/text-neck/index.html現在，全球手機使用者數量超過了 50 億，這個世界上三分之二的人口都擁有手機。我們大多數人每天至少要彎腰 2 個小時，這将讓我們的頸部承受的重量增加多達 27 千克。如果在走路時使用手機發消息，則可能會帶來各種意外事故。該可視化作品通過互動的形式，展示了頸部是如何承受壓力的。
名作失竊可視化
https://www.informationisbeautifulawards.com/showcase/3266-you-could-fill-a-museum聯邦調查局的資料庫全球資料庫包含7,200多種失竊的名作，包括斯特拉迪瓦裡小提琴、卡爾德手機、蒂法尼燈、小醜畫等。
對 tensorflow 中資料流圖的可視分析
http://vis.pku.edu.cn/blog/%e5%af%b9tensorflow%e4%b8%ad%e6%95%b0%e6%8d%ae%e6%b5%81%e5%9b%be%e7%9a%84%e5%8f%af%e8%a7%86%e5%88%86%e6%9e%90%ef%bc%88visualizing-dataflow-graphs-of-deep-learning-models-in-tensorflow%ef%bc%89/Tensorflow 是谷歌開發的當下最流行的機器學習軟體之一。它采用資料流圖（Dataflow Graph）來表達機器學習算法的計算過程，使用者可以定制不同的資料流圖來建構自己的算法。然而，随着深度學習的興起與流行，各類神經網絡漸趨大規模、複雜化，算法開發者僅憑借自身的了解與記憶，很難把握算法的各部分體系結構，互相之間也難以進行溝通。為此，這篇文章提出了可視化工具 TensorFlow Graph Visualizer，通過可視分析幫助使用者在 TensorFlow 中進行算法分析與開發。該文章榮獲了 IEEE VAST 2017 的最佳論文獎。
檢視更多墨者修齊： https://www.yuque.com/mo-college/weekly/syvbtp
欄目主編：平俠、侑夕
Thoughts writing a Google App script
https://martinfowler.com/articles/202009-google-app-dir.htmlRecently a friend of mine asked for a simple program that would correlate some data drawn from a couple of online services. I decided the best way to do this for him would be to use a google spreadsheet as the host, putting the code into the spreadsheet's script area. I'm no expert in Google App Script, but the exercise led to a few observations, which I feel compelled to share.
How AI is powering a more helpful Google
https://blog.google/products/search/search-on/When I first came across the web as a computer scientist in the mid-90s, I was struck by the sheer volume of information online, in contrast with how hard it was to find what you were looking for. With recent advancements in AI, we’re making bigger leaps forward in improvements to Google than we’ve seen over the last decade, so it’s even easier for you to find just what you’re looking for. Today during our Search On livestream, we shared how we're bringing the most advanced AI into our products to further our mission to organize the world’s information and make it universally accessible and useful.
Help kids Be Internet Awesome
https://beinternetawesome.withgoogle.com/en_us/interlandTo make the most of the Internet, kids need to be prepared to make smart decisions. Be Internet Awesome teaches kids the fundamentals of digital citizenship and safety so they can explore the online world with confidence.
編碼技巧（五）：适當可擴充
https://zhuanlan.zhihu.com/p/266076082本文介紹了一個新的編碼技巧：“适當可擴充”，什麼樣的代碼才能成為 “适當” 的呢？文中詳細的進行了解釋。值得一提，代碼的各種優秀特征，都是需要花費精力來寫出來的，也就說需要成本，我們才能有收益。是以，提供 “可擴充性”，必然得是滿足了相關的需求，不能是開發者一廂情願而為之。當然為了追求技術精進，高度可擴充的案例，也是非常值得學習的。這并不沖突。我們可以身懷絕技，但用的時候卻隻 “恰到好處”。這才是行家的手筆呀。
企業文化建設需要适度“用力過猛”
https://mp.weixin.qq.com/s/fTqMP7vbunhWyDOleyYgvw企業文化建設，是一個有破有立的過程，破在固有的思想觀念和行為模式，立在新的思想觀念和行為标準。按照慣性定律，沒有外力作用時，事物總是處于勻速運動或靜止狀态，是以成功的企業文化建設，多少會給人一種“用力過猛”的感覺，否則不足以打破當下的慣性；即便是自我心靈覺醒，同樣也需要外力。海爾砸冰箱，就是一種适度“用力過猛”的外力，張瑞敏砸的不是冰箱，砸的是當時幹部員工隊伍中落後的思想觀念，不光在企業内部，甚至在整個企業界喚醒了人們沉睡的品質意識。适度“用力過猛”，為的是讓人從習以為常的穩态中驚醒，邁向需要做功的激活态（非穩态）。
當百度to B
https://mp.weixin.qq.com/s/xS5ACCrgh0C5w_rUL2gwJg當雲計算進入以各行業傳統企業和政府部門為主力客戶的“下半場”，一個行業共識是，計算與存儲的基本能力之外，雲與AI的結合将成為接下來的關鍵競争點——雲計算負責新型IT基礎架構，AI負責具體業務問題。而在雲和AI兩個領域，尤其是二者的結合上，百度都是重要的玩家。
iOS 背景鎖屏監聽搖一搖
https://juejin.im/post/6881420727371694093不會吧這也行系列，一般情況下出于省電、權限、合理性等因素考慮一些奇怪的需求 iOS 不是很好實作，如當 APP 處于背景或鎖屏狀态時，依舊可以監聽到搖一搖，看看這裡是怎麼做的。
Flutter 1.22 正式釋出
https://juejin.im/post/6879048672597213198來看一看 Flutter 1.22 趁着 iOS 14/Android 11 釋出季，都更新了一些什麼樣的功能？
1 分鐘将 vscode 撸成小霸王
https://juejin.im/post/6882576431503638536這個是真的“浪”，借助JSNES模拟器弄了一個 VSCode 的小霸王遊戲機，VScode 插件搜尋「小霸王」即可使用，這個想法很是不錯~
哪些工具使你成為一個更好的程式員？
https://news.ycombinator.com/item?id=23468193Hacker News 上面比較熱烈的一個讨論，看看國外的程式員怎麼說？
很炫酷的 3D 可視化的星空
http://stars.chromeexperiments.com/一個可互動式的三維可視化恒星鄰居，包括超過 10 萬顆附近的恒星，點選 URL 進入很是不錯。
Blush:插圖定制生成工具
https://blush.design/zh-CN這個工具不錯的是可以自定義插圖的每一部分來建立自己的構圖，同時種類也很多，對于前端同學寫一些圖文搭配 PPT 蠻适合。
2020 中國奢侈品消費者數字行為洞察報告
https://mp.weixin.qq.com/s/fsBblPTiTjYXg1vUKzK_Jw從此文來了解下後疫情時代中國奢侈品消費市場呈現的趨勢、消費鍊路以及品牌打法，還可結合“名媛拼團”側面來剖析下。
檢視更多： https://www.yuque.com/awesome/fe_weekly/20201019
關注「Alibaba F2E」
把握阿裡巴巴前端新動向