“潮流最前端，每周一新鮮而至” If not SPAs, What? 、🧐一周精讀🧐《設計模式 - SingleTon 單例模式》、Gazepass - 無密碼的登入 API、純CSS實作瀑布流布局已納入W3C 網格規範、諾貝爾獎可視化、人口普查究竟查什麼？本周最新前端資訊請查收。（更好的閱讀體驗請檢視原文至語雀文檔）
本周熱點
欄目主編：平俠
If not SPAs, What?
https://macwright.com/2020/10/28/if-not-spas.htmlA few months ago, I wrote an article about how the SPA pattern has failed to simplify web development. The SPA pattern (Single-Page Apps), I tried to define, was about the React model, which also covers, to a large extent, the model of Vue, Angular, and other frontend frameworks. Like any critique, it begs for a prescription and I didn’t give one, other than gesturing toward server-side frameworks like Rails and Django. But I think there are some trends starting to form. I had queued up some time to really dive into the frameworks, but things like walking in parks have taken priority, so here’s just a grand tour. If you’re not a fan of the SPA approach, what else can you do? Turns out there are numerous modern alternatives from Stimulus to RedwoodJS.
Building a multi-platform Figma/Sketch plugin with React
https://blog.prototypr.io/building-a-multi-platform-figma-sketch-plugin-with-react-2172137a1a56Overlay is a design-to-code tool we’ve been working on to create production-ready web components from design tools. In short, it’s a plugin that compiles design data (as JSON) into code. Releated: Anima 4.0: Go Straight From Design to React in the Design Handoff.
微信小程式入門教程
http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-three.html阮老師教大家開發小程式，說明這項技術正在平民化，而且正被市場大範圍接受。雖然很封閉，不過不得不說它的出現有望讓應用開發重回曾經哪個人人可做應用的時代。
Lobe - Machine learning made easy
https://lobe.ai/Lobe has everything you need to bring your machine learning ideas to life. Just show it examples of what you want it to learn, and it automatically trains a custom machine learning model that can be shipped in your app. Lobe is a free, private desktop application that has everything you need to take your machine learning ideas from prototype to production. Releated: How AI will change software development, Experimenting with Automatic Video Creation from a Web Page.
The Pragmatic Programmer 20 Years Later
https://www.youtube.com/watch?v=0AzkH8SYyOcDave Thomas and Andy Hunt conquered the world in the late 90s with the best-selling book The Pragmatic Programmer, which quickly became a staple for every programmer. This book came straight from the programming trenches, cutting through the increasing specialization and technicalities of modern software development to examine the core process - taking a requirement and producing working, maintainable code that delights its users
20 years later, they are back with a new edition that has major revisions and new material reflecting changes in the industry since its first release.
深度閱讀
欄目主編：侑夕、紫益
🧐一周精讀🧐《設計模式 - SingleTon 單例模式》
https://github.com/dt-fe/weekly/171.精讀《設計模式 - Singleton 單例模式》.md通過三個生動的例子與 JS 示例代碼，幫助前端的你了解設計模式，讓我們一起積累不過時的知識！
SingleTon（單例模式）可能是最簡單，最容易了解的設計模式了！但其實它并不簡單，你知道什麼時候不該使用單例模式，以及單例模式有哪些替代方案嗎？還不了解的話就點進來學習一下吧！
我的前端成長之路：内觀自在，外觀世音，追尋内心平靜
https://mp.weixin.qq.com/s/lq7XQGM56CovF2Q_Y8Ht4A來自飛豬前端聖司的一篇關于自我成長的總結文章，校招畢業 4 年時間從 P5 到 P8，内觀自在，外觀世音，推薦前端同學一讀。
對開發人員有用的定律、理論、原則和模式
https://github.com/nusr/hacker-laws-zh值得收藏和多次閱讀的程式員定律，裡面收集很多抽象經驗的解釋，比如說「過早優化是萬惡之源」、「九個女人不能在一個月内生一個孩子 」。
解釋 JavaScript 的記憶體管理
https://felixgerschau.com/javascript-memory-management我們平時寫代碼的時候幾乎不太考慮 JS 的記憶體管理，因為浏覽器已經幫忙做了，但是有時候假如碰到記憶體洩露，那懂一些原理會有便于你排查問題。
聊一聊二維碼掃描登入原理
https://juejin.im/post/6844904111398191117可先想後看，假如讓你實作一個二維碼掃碼登入的功能你會怎麼做？
為什麼 IPv6 難以取代 IPv4
https://draveness.me/whys-the-design-ipv6-replacing-ipv4/西電學弟的文章，從網絡原理角度來解釋為什麼 IPv6 難以取代 IPv4，整體部落格品質超級高，值得關注。
開源資訊
欄目主編：侑夕
Gazepass - 無密碼的登入 API
https://gazepass.com/上周周刊中《Meet Face ID and Touch ID for the Web》，剛想去玩玩，就有人給産品化出來了，效果實作很贊，說不定不久将來在 Web 中輸入框密碼類型就變成可選狀态了。
iOS 上的 Linux shell 工具
https://github.com/ish-app/ish/iOS 上面的指令行工具，想想可以用它來玩什麼？
使用 TensorFlow.js 進行 NSFW 檢測
https://github.com/infinitered/nsfwjsNSFW 指 Not Safe For Work 的意思，這個庫叫 nsfwjs，通過 TensorFlow.js 在浏覽器快速識别有點點那個啥的圖像，别多想，還是去看看如何實作的~
Eta - 又來了一個新的模版引擎
https://eta.js.org/其實 tpl 挺好用的，就是感覺有些上古時代的産物了，Eta 相比就潮流一些了，可以同時在 Node、Deno 和浏覽器中使用，性能不錯很輕量配置性更強一些。
使用 GitHub Actions 等生成你的跑步首頁
https://github.com/yihong0618/running_page思路很不錯，借助 GitHub Actions、Gatsby、Vercel 自動部署、Mapbox 地圖等能力可以将你的平時的跑步記錄(Keep、Nike、Garmin 等)生成一個自動更新的首頁。
CSS 前沿
欄目主編：大漠
純 CSS 實作瀑布流布局已納入 W3C 網格規範
https://drafts.csswg.org/css-grid-3/#masonry-layout在不久的未來，你就可以使用純 CSS 的特性實作瀑布流布局了。
The Dark Side of the Grid
https://www.matuzo.at/blog/the-dark-side-of-the-grid/CSS 網格布局是目前Web布局中最強大，最靈活的一個布局子產品。因為它具有靈活性、廣泛性和強大功能。它讓我們的生活變得如此簡單，但它也在使用者體驗和可通路性方面帶來了新的危險。作者圍繞着這個話題通過三篇文章的篇幅和大家探讨了網格布局和可通路性之間的關系，以及網格布局中黑暗的一面。
Thinking Outside the Box with CSS Grid
https://frontend.horse/articles/thinking-outside-the-box-with-css-grid/現代主流浏覽器對 CSS 網格的支援越來越好了，這也意味着 CSS 網格可以為 Web 布局提供前所未有的可能性，與 Flexbox 相比，我們可以用更少的元素建立更複雜的布局。但當你使用 CSS 網格布局時，不能僅僅局限于矩形布局模式下，我們應該跳出這個思維。
Responsive Grid Design: Ultimate Guide
https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892注意，這篇文章并不是介紹 CSS 網格子產品的使用。而是詳細介紹了網格設計給我們 Web 布局帶來的幫助。網格有助于保持不同布局之間的一緻性，并更快地做出設計決策。網格可以更精确地控制不同螢幕大小上的對齊和布局。本文強調了響應式網格最重要的方面，以及産品設計師如何在設計工作流中調整網格。
Fundamentals of layout in user interface design (UI)
https://uxdesign.cc/fundamentals-of-layout-in-interface-design-ui-3a9dba31f1布局是支援界面的可視元件的結構。它的工作原理是使用者打開網站後，使用者視線可以合理的轉移到分組，排列和了解資訊上。另外它還有助于網站上重要資料的突出顯示。是以，布局功能對使用者是不可見的，但與導航相關。一個好的布局設計與目标有關，反映在一個好的使用者體驗上。這就是為什麼我們可以說一個正确的布局能讓使用者以最少的時間找到他想要的東西。這也反映在使用者可以用更少的時間在網站上完成做更多的事情，以及使用者更願在網站上花更多的時間。
Are APNGs the GIFs of the Future?
https://medium.com/@victorsanabria/are-apngs-the-gifs-of-the-future-ee12b95876b0在網際網路的曆史上，新業務和技術不斷颠覆舊的，動圖（帶有動效的圖）就是一個很好的例子。比如我們最早的動圖格式， .gif ( GIFS )圖它誕生于 1987 年，是一種可移植的圖像格式，支援基本的動畫，是網站和社交媒體的必備工具，就像表情符号一樣，它甚至被用來替代文本。然而，與其他圖像格式相比，GIF 隻能說它在 Web 中年齡很老。對于複雜的動圖它的顯示的品質是偏低的，而且加載的時間也很長（檔案大）。随着技術的革新，在現代 Web 中，APNGs 圖（也可以是動圖）可以替代 GIFs 圖，而且 APNGs 圖品質高，體積小。是現代 Web 中使用動圖不二選擇。
Comparing Various Ways to Hide Things in CSS
https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/您可能會認為用 CSS 隐藏内容是一個簡單明了的問題，但是有多種解決方案，每種解決方案都是唯一的。開發人員最常用的是 display: none 來隐藏頁面上的内容。不幸的是，這種隐藏内容的方式并不是萬無一失的，因為在螢幕閱讀器“無法通路” 這些内容。事實上，在 CSS 中有很多“隐藏”内容的方法，每一種方法的優缺點很大程度上取決于它的使用方式。我們将在這裡回顧每一種隐藏的技術，并在結束時給出一個總結，以幫助我們決定何時使用哪種隐藏技術。
一個div可以做什麼：繪制蛋糕
https://codepen.io/lynnandtonic/full/bGegozj今天要分享的 CSS 的 Demo 是使用一個
div
繪制蛋糕。
墨者修齊
主編：十吾
諾貝爾獎可視化
https://www.informationisbeautifulawards.com/showcase/204-nobels-no-degrees該可視化探索了多年來的諾貝爾獎故事。展示了每個獲獎者的獎項類别，獲獎年份，當時獲獎者的年齡以及主要學術機關和家鄉。每個點代表一個諾貝爾獎獲得者，每個點的位置根據獲獎的年份（x 軸）和獲獎時的年齡（y 軸）而定。
Diagram Maker
https://awslabs.github.io/diagram-maker/Diagram Maker 是亞馬遜開源的一個圖編輯庫，可以在外觀和行為方面進行完全的自定義。它還公開了一個聲明性到的接口，以減少将庫內建到任何應用程式中所需的代碼，并内置許多互動式功能。
Languages in the World
http://snip.ly/pJsZ#http://www.puffpuffproject.com/languages.html這是一個分析目前世界上語言體系現狀的可視化項目, 使用者可以探索常見的語系，檢視世界各地使用的語言。資料集來源為 WALS，是一個由 55 名作者組成的小組收集到的語言結構特性彙總的資料庫。
檢視更多墨者修齊： https://www.yuque.com/mo-college/weekly/ggmvwv
它山之石
欄目主編：平俠、侑夕
It’s time to recognise internet access as a human right
https://webfoundation.org/2020/10/its-time-to-recognise-internet-access-as-a-human-right/It’s clear that we must build a better, safer, more empowering digital world. We need governments, companies, civil society, and citizens to work together now to create this digital future. A future where internet access is understood — and realised — as a basic human right. The Contract for the Web will help us get there — through an ambitious, inclusive, and collaborative approach.
IFTTT - Do more with the things you love
https://ifttt.com/ https://benjamincongdon.me/blog/2020/10/30/Goodbye-IFTTT/Connect your apps and devices in new and remarkable ways. Make the things you love more powerful. Ifttt is a free platform that helps all your products and services work better together.
Microsoft overhauls Excel with live custom data types
https://www.theverge.com/2020/10/29/21539844/microsoft-excel-custom-data-types-power-bi-wolfram-alpha-power-query-dataExcel now goes far beyond text and numbers. Microsoft is overhauling Excel with the ability to support custom live data types. Excel users have been using Microsoft’s spreadsheet tool for decades to import, organize, and analyze data, but the basic data types have always been limited to text and numbers. While Microsoft has added dynamic arrays and some custom stocks and geography data types previously, the company is now updating Excel to let people import their own data as a custom data type.
What It's Like Being a jQuery Maintainer
https://github.com/readme/michal-golebiowski-owczarekMichał Gołębiowski-Owczarek is one of those heroes who drives and maintains a library that can seem either essential or passé, depending on what company you keep: jQuery. Here’s a look at how he approaches this responsibility.
Native 地圖與 Web 融合技術的應用與實踐
https://mp.weixin.qq.com/s/RKGJOtRMjTetTZRIGzqH_Q同層渲染是移動端 H5 的一種性能體驗“黑科技”優化技術，也即将 WebView 與 Native 元件疊加到一起共處一個頁面，如打車的地圖用 Native 的，操作部分用 H5 來實作，美團的解決方案可供輸入
iOS 性能優化實踐：頭條抖音如何實作 OOM 崩潰率下降 50%+
https://mp.weixin.qq.com/s/4-4M9E8NziAgshlwB7Sc6gOOM (Out Of Memory)指的是在 iOS 裝置上目前應用因為記憶體占用過高而被作業系統強制終止，在使用者側的感覺就是 App 一瞬間的閃退，Crash 對于用戶端同學很好了解但是對于前端卻很頭疼，來看看頭條的解決思路是怎麼樣的？
如何進行 iOS Widget 開發？
https://mp.weixin.qq.com/s/xXEWWHXt4oKDSboogTbTZA盒馬同學基于盒馬小鎮的 Widget 開發，分享在登入授權、資料更新、界面渲染以及稽核上的實踐經驗
産品經理如何做産品架構設計
http://www.woshipm.com/pd/4231285.html對于産品經理來說，發展到一定階段後，日常的工作内容往往離不開産品架構設計。這是一個極其細緻的活，需要産品經理有很強的架構能力。那麼産品經理如何才能摸清産品的底層邏輯、提升對産品的認知，做好産品架構呢？
到底幾點睡覺才算是不叫熬夜？
https://daily.zhihu.com/story/9729486最好還是别熬夜？不如今天就早點睡吧。
人口普查究竟查什麼？
https://mp.weixin.qq.com/s/Hc6TR83XRpwxW_g3vIdZXw回形針近期的一篇科普文，在中國，人口普查是如何進行的？前幾次的普查究竟查到了什麼？
檢視更多： https://www.yuque.com/awesome/fe_weekly/20201102
🔥第十五屆 D2 前端技術論壇·無界，開放報名，速搶！
關注「Alibaba F2E」
把握阿裡巴巴前端新動向