“潮流最前端，每周一新鮮而至” Technical debt as a lack of understanding、🧐一周精讀🧐《設計模式 - Adapter 擴充卡模式》、企業級資料可視化應用有哪些機遇與挑戰？Revolution incoming: CSS Houdini and the future of frontend development、電影院能挺過疫情嗎？本周最新前端資訊請查收。
本周熱點
欄目主編：平俠
Technical debt as a lack of understanding
https://daverupert.com/2020/11/technical-debt-as-a-lack-of-understanding/If you develop a program for a long period of time by only adding features but never reorganizing it to reflect your understanding of those features, then eventually that program simply does not contain any understanding and all efforts to work on it take longer and longer.
7GUIs: A GUI Programming Benchmark
https://eugenkiss.github.io/7guis/There are countless GUI toolkits in different languages and with diverse approaches to GUI development. Yet, diligent comparisons between them are rare. Whereas in a traditional benchmark competing implementations are compared in terms of their resource consumption, here implementations are compared in terms of their notation. To that end, 7GUIs defines seven tasks that represent typical challenges in GUI programming. In addition, 7GUIs provides a recommended set of evaluation dimensions.
What's the deal with SvelteKit?
https://svelte.dev/blog/whats-the-deal-with-sveltekitWe're rethinking how to build Svelte apps. Here's what you need to know. Releated: The Next Svelte May Be Serverless-First -- Rich Harris at Svelte Summit.
Why not use GraphQL?
https://wundergraph.com/blog/why_not_use_graphqlHypermedia APIs played and still play a big role for server rendered web applications. However, the web is moving forward. Users expect an experience as native as it could be from websites. The Jamstack is taking over on the frontend. Hybrid models with server side rendering and dynamic Javascript clients are the enablers of these applications. RESTful APIs excel at a different set of problems. They will not go away, quite the opposite! They’re just not the right tool for this style of applications the industry is currently shifting towards. I think REST APIs are a perfect tool for internal APIs, partner APIs and server to server communication. This is an area where GraphQL doesn’t really bring any benefits over REST. Alongside RPC it will have a great future in this area. GraphQL on the other hand is more than happy to wrap resource- and RPC-based APIs.
Adobe XD for Visual Studio Code - Create and consume Design System Packages
https://letsxd.com/vscodeDesign systems are the link between Design and Development. To build a successful, tailored, and widely-adopted system, both designers and developers need to have a seat at the table. The new Adobe XD extension for Visual Studio Code allows developers to visually map design sources, created in XD and available in Creative Cloud Libraries, to platform-specific code using design tokens. DesignOps teams will be able to create shareable Design System Packages (DSPs) that contain all the information developers need to consume while coding, including code snippets and documentation.
深度閱讀
欄目主編：侑夕、紫益
🧐一周精讀🧐《設計模式 - Adapter 擴充卡模式》
https://github.com/dt-fe/weekly/172.精讀《設計模式 - Adapter 擴充卡模式》.md通過三個生動的例子與 JS 示例代碼，幫助前端的你了解設計模式，讓我們一起積累不過時的知識！
Adapter（擴充卡模式）屬于結構型模式，别名
wrapper
，結構性模式關注的是如何組合類與對象，以獲得更大的結構，我們平常工作大部分時間都在與這種設計模式打交道！擴充卡模式是最簡單的結構型模式之一，其目的是把接口不相容問題抹平，一起來學習吧！
企業級資料可視化應用有哪些機遇與挑戰？
https://mp.weixin.qq.com/s/ZNzjVII-ZggCjHKgR5Gofw螞蟻@禦術在外灘大會關于企業級可視化的分享文字版，從為什麼需要、目前挑戰和問題和未來趨勢來闡述，很适合前端同學一讀。
CodeSandbox 是如何讓 npm 上的子產品直接在浏覽器端運作的
https://www.yuque.com/wangxiangzhong/aob8up/uf99c5How we make npm packages work in the browser 的一篇翻譯文章，譯者加入了自己的了解，利用這個思路其實對于一些線上開發的場景可以做不少事情。
What the fuck JavaScrip t 中文版?
https://github.com/denysdovhan/wtfjs/blob/master/README-zh-cn.md哈哈哈哈，原來
"b" + "a" + +"a" + "a" = "baNaNa"
，還有
[1, 2, 3] + [4, 5, 6]; // -> '1,2,34,5,6'
，你知道是為啥嗎？還是不要寫這樣的代碼。
我可能連 GitHub 搜尋都不會用
https://juejin.im/post/6891056415440535565原來 Github 上面搜尋還有這麼多神仙技巧...不過我還是覺得簡單的才是比較好記住的。
開源資訊
欄目主編：侑夕
Nat - 可以替換你 ls 指令的工具
https://github.com/willdoescode/nat比原有 ls 的展示效果要豐富漂亮不少，安裝後可以替換原有 ls，執行
cargo install natls
，然後
code .zshrc
加上
alias ls='natls'
就好了。
Tesseract.js - 支援 100 多種語言的純 JS OCR
https://github.com/naptha/tesseract.js對應前端想識别圖檔中的文字可以用這個庫來做，不過我一直用 Bob 這個 Mac 開源軟體來做識别和翻譯工具。
Denoify-讓 NPM 子產品支援 Deno 且不需單獨維護
https://github.com/garronej/denoify一個将 NPM 子產品建構 Deno 子產品的包，結合着 Github Action 其實就能做到無需手動去維護了，官方是這樣介紹的
For NPM module authors that would like to support Deno but do not want to write and maintain a port for it
CSS Spider-一個抄網頁 CSS 實作的 Chrome 擴充
https://cssspider.fresalabs.com/home試用了下效果還不錯，開啟後，滑鼠放到元素上，對應的樣式就出來了，可快速 Copy 使用。
Gitify-一個 github 消息通知的菜單欄工具
https://github.com/manosim/gitify用 Electron 實作的一個支援多端的實時通知軟體，比較适合開源軟體的維護同學。
Asciinema - 友善錄制指令行會話過程并通過連結分享
https://asciinema.org/平時我們分享一個指令行的使用，一般是錄制視訊然後 mp4 檔案方式分享給他人，這個工具可支援直接錄制生成對應 url 給到他人同時支援所有人可見。
CSS 前沿
欄目主編：大漠
研究下 Houdini 中的 CSS Layout API
https://www.zhangxinxu.com/wordpress/2020/09/houdini-css-layout-api/CSS Layout API
開啟自定義布局模式，隻有你想不到的，沒有你做不到的。隻不過
CSS Layout API
以後注定是小部分開發者的玩具，最終出現的局面一定是少部分人創造，大部分人直接使用。
CSS Houdini
https://iamvdo.me/en/blog/css-houdiniCSS Houndini 是 CSS 世界中的魔法師。CSS Houdini 是精心設計的一種新的标準，為開發者提供自由和靈活性來建構他們自己的特性。其目的是定義底層 API ，通路浏覽器的核心，進而讓開發者參與到創新過程中，而不受曆史标準的限制。
Revolution incoming: CSS Houdini and the future of frontend development
https://tsh.io/blog/css-houdini-future-frontend-development/一場革命即将到來，它将決定前端的未來。它将帶來更快的使用者界面，更豐富的視覺效果和全新的可能性。此外，在遙遠的未來，前端甚至可能消除浏覽器的相容性問題!
Bootstrap or TailwindCSS: How to decide a framework for your next project?
https://blog.surjithctly.in/bootstrap-or-tailwindcss-how-to-decide-a-framework-for-your-next-projectBootstrap 号稱是 CSS UI 架構中的不老神話，而新秀 TailwindCSS 卻是 Atomic Design 中的戰鬥機。如果你是強度依賴于 CSS UI 架構來建構你的 UI 界面的話，那麼這篇文章值得你花一點時間學習一下。
Secrets of drawing with CSS and a single DIV
https://levelup.gitconnected.com/secrets-of-drawing-with-css-and-a-single-div-ce9930ec9050每期 CSS 前端的末尾都會有一個關于“一個 div 的 Demo ”。那麼這篇文章将告訴你，CSS 在一個
div
上是如何繪制出一些複雜的圖形。
一個div的Demo：A Single (Spooky) Div with Lynn Fisher
https://codepen.io/jlengstorf/full/vYKRBwW 墨者修齊
欄目主編：十吾
流動的邊界
http://flowingboundary.com/該作品運用可視化方式記錄此次新冠重大疫情的不同次元資料，并用互動叙事的網頁形式和隐喻修辭的視覺語言對“流動的邊界”進行探讨，包含“塵埃”、“燈火”、“淚雨”、“春華”四個版塊。作品嘗試用藝術語言對疫情資料進行處理，打破大衆對資料冷靜、中立、準确的刻闆印象，展開對沉浸式資料叙事體驗的可視化探索。
美國各州對婦女和兒童權利保護
https://ccdl.claremont.edu/digital/collection/p15831coll5/id/616Holman 在 1918 年繪制的關于美國各州對婦女和兒童權利保護的可視化圖形，圖中徑向每個切換代表一個州，外層每一個圓環為一種婦女兒童權利，如第一層圓環為有婦女兒童權利工會、第二層圓環的童工 14 歲年齡限制等，圖中共 10 層圓環表示了婦女兒童相關的十項權益；在每一項上白色表示有權利保護，黑色表示沒有保護或者很差。
電影院能挺過疫情嗎
https://public.tableau.com/zh-cn/gallery/no-more-movie-theaters-decline-box-office?tab=viz-of-the-day&type=viz-of-the-day在 2020 年的疫情中，電影院及其相關産業經曆了有史以來的最大危機。美國有大量的電影院票房利潤大幅下降，還有無數家電影院已經倒閉。何時才能讓這一切恢複正常似乎成為了一個謎題。除此以外，電影院的市場還一直在被流媒體服務搶占。
檢視更多墨者修齊： https://www.yuque.com/mo-college/weekly/upq75n
它山之石
欄目主編：平俠、侑夕
騰訊文檔 | 全平台系統設計
https://isux.tencent.com/articles/multiplatform.html全平台系統設計也許會成為下一代應用的基礎規則，正如當初的響應式設計。
Is the Internet Different?
https://stratechery.com/2020/is-the-internet-different/More broadly, the pre-Internet world, governed as it was by gatekeepers, was certainly a more unified one, at least as far as conventional wisdom was concerned — this applied to law and economics just as much as anything else. At the same time, that does not mean the pre-Internet world had a better overarching grasp on the truth, given how much more difficult it was for dissenting voices to gain distribution.
Data is not the new oil: a call for a Butlerian Jihad against technocrat data ding dongs
https://scottlocklin.wordpress.com/2020/11/05/data-is-not-the-new-oil-a-call-for-a-butlerian-jihad-against-technocratic-ding-dongs/I tire of the dialog on “big data” and “AI.” AI is an actual subject, but as used in marketing and press releases and in the babbling by ideologues and think tank dipshits, the term is a sort of grandiose malapropism meaning “statistics and machine learning.” As far as I can tell “big data” just means the data at one point lived in something other than a spreadsheet.
Raspberry Pi 400: the $70 desktop PC
https://www.raspberrypi.org/blog/raspberry-pi-400-the-70-desktop-pc/ https://martinpeck.com/blog/2020/11/06/Raspberry-Pi-400/Raspberry Pi has always been a PC company. Inspired by the home computers of the 1980s, our mission is to put affordable, high-performance, programmable computers into the hands of people all over the world. And inspired by these classic PCs, here is Raspberry Pi 400: a complete personal computer, built into a compact keyboard.
國家“雙循環”重大戰略調整背後的5個核心邏輯
https://36kr.com/p/953193853974149“以國内大循環為主體、國内國際雙循環互相促進的新發展格局”内涵是什麼？意味着什麼？大家真的争論得比較多，我了解新發展格局有5個核心的内容。01 未來會繼續開放，但是開放的最終目的是圍繞滿足國内市場需求；02 開發和提升國内市場，是我們未來的重點；03 盡快補中國經濟的短闆；04 盡快推進中國的高品質發展；05 進行更高層次的開放，核心是互利共赢。未來的機會都在這個戰略裡了。
把閑魚 APP 長清單流暢度翻了倍
https://mp.weixin.qq.com/s/dlOQ3Hw_U3CFQM91vcTGWQ鹹魚關于 Android 原生、flutter 頁面的長清單優化經驗分享，一個良心教程。
網易雲音樂 iOS 14 小元件實戰手冊
https://mp.weixin.qq.com/s/gFd8fkJBkQd5RpFSD0P8Ig國内終于有廠商在慢慢跟進這個功能了，來看看網易音樂是怎麼做的。
抖音品質建設 - iOS 啟動優化
https://mp.weixin.qq.com/s/3-Sbqe9gxdV6eI1f435BDg一個 App 的啟動速度給使用者的印象很重要，也是讓使用者喜歡用的的一個因素，抖音 iOS 的啟動優化從此文看做了不少事情也說明了原理所在。
Flutter 之全埋點思考與實作
https://juejin.im/post/6892371163859976199埋點對于阿裡前端的同學應該再熟悉不過了，不過假如我問你 Flutter 埋點的原理你知道嗎？
QQ 音樂 Android 編譯提速之路
https://juejin.im/post/6891957803813584909一直覺得 QQ 音樂整體 App 做的不錯，借此文來學習一波 QQ 音樂團隊在增量編譯元件研發上的探索與實踐。
語雀産品經理的成長之路
https://www.yuque.com/fangqiao/oe8iog/vk6m19為什麼感覺語雀的産品越做越好，同時有一條主線執行下去呢？因為它的産品經理幾年都沒有換過。
視覺設計中發現的 11 種視錯覺
https://mp.weixin.qq.com/s/zGdXBq4RDLaPYduEHJiHFg日常中大家都可能會碰到一些神奇的場景，讓人産生視覺錯覺，本文來告訴你原因所在。
Notion 的思想來源和投資人
https://mp.weixin.qq.com/s/eatQQa-ArDI96wROtX66dQ好吧這個軟體之前就被“吹”得很火，我也反複幾個月内至少試用過三次還是覺得有些複雜最後給放棄了，不過還是有很多人用上後就特别喜歡了。
檢視更多： https://www.yuque.com/awesome/fe_weekly/20201109
關注「Alibaba F2E」
把握阿裡巴巴前端新動向