潮流最前端第 6 期：Technical debt as a lack of understanding-阿里云开发者社区

“潮流最前端，每周一新鲜而至” 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-sveltekit

We'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_graphql

Hypermedia 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/vscode

Design 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/uf99c5

How 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-houdini

CSS 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-project

Bootstrap 号称是 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/616

Holman 在 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 进行更高层次的开放，核心是互利共赢。未来的机会都在这个战略里了。