“潮流最前端，每周一新鲜而至” If not SPAs, What? 、🧐一周精读🧐《设计模式 - SingleTon 单例模式》、Gazepass - 无密码的登录 API、纯CSS实现瀑布流布局已纳入W3C 网格规范、诺贝尔奖可视化、人口普查究竟查什么？本周最新前端资讯请查收。（更好的阅读体验请查看原文至语雀文档）
本周热点
栏目主编：平侠
If not SPAs, What?
https://macwright.com/2020/10/28/if-not-spas.html
A 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-2172137a1a56
Overlay 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
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=0AzkH8SYyOc
Dave 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
上周周刊中《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/nsfwjs
NSFW 指 Not Safe For Work 的意思，这个库叫 nsfwjs，通过 TensorFlow.js 在浏览器快速识别有点点那个啥的图像，别多想，还是去看看如何实现的~
Eta - 又来了一个新的模版引擎
其实 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 名作者组成的小组收集到的语言结构特性汇总的资料库。
它山之石
栏目主编：平侠、侑夕
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://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
Excel 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-owczarek
Michał 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-4M9E8NziAgshlwB7Sc6g
OOM (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
回形针近期的一篇科普文，在中国，人口普查是如何进行的？前几次的普查究竟查到了什么？
🔥第十五届 D2 前端技术论坛·无界，开放报名，速抢！
关注「Alibaba F2E」
把握阿里巴巴前端新动向
