这里记录每周值得分享的科技内容，周五发布。
本杂志开源（GitHub: ruanyf/weekly[1]），欢迎提交 issue，投稿或推荐科技内容。
周刊讨论区的帖子《谁在招人？》[2]，提供大量程序员就业信息，欢迎访问或发布工作/实习岗位。

封面图

上海中环的一根高架柱子上面，画着一匹巨大的斑马。（via[3]）

本周话题：五菱汽车的产品设计

很多年前，我就知道五菱汽车。大学时，一个广西同学去了那里就业，从此我就记住了，柳州有一家汽车厂。
当年，它很不起眼，主要生产面包车。据说，模仿的是日本三菱面包车，连牌子和名字都模仿了人家。
但是后来，这家公司逐渐摆脱了模仿，开始生产原创的家用轿车，发展得越来越好，成了全国知名品牌。尤其是近两年的几个车型，简直令人刮目相看。
宝骏 E300。
宏光 Mini EV。
皮卡和房车。
这些车的造型和外观设计，十分新颖和别致，完全原创，明显有一套自己的设计语言，非常吸引眼球。
要知道，它们都是低价车，定价几乎是同类车的下限，房车十几万，其他车几万块，配置都很低端。这就是我觉得不简单的地方， 明明是廉价货，可是看上去一点都不廉价，反而有点气派。
举例来说，很多年轻人，尤其是女性，购买五菱宏光 Mini EV，作为代步车。但它的配置和价格，跟有一些四轮的老年代步车差不多。那些老年代步车让人觉得很简陋，年轻人几乎不可能购买，但是五菱重新设计和包装以后，就打开了市场。这就是厉害的产品设计。
把廉价的东西做得很廉价，那不叫本事；把廉价的东西做得很轻盈，那才叫本事。
所谓“轻盈”，就是简单优雅，在物质上节省材料和能源，在精神上追求自由。廉价的东西，原来只能吸引低端的顾客；做得轻盈以后，就能吸引到高收入的顾客。
我觉得，五菱汽车是一个好例子，值得软件开发者学习，怎么把产品做得简单而不简陋，轻盈而不笨重。

Vue 3 和 React 17 的源码比较

React 和 Vue 是国内最流行的两个前端框架，孰优孰劣的争论，就从来没有停息过。只要有人提一句：“我觉得 A 比 B 更好”，下面肯定就是一堆回帖。
•“ Vue 只适合小项目，大项目扛不起来”•“ React 组件太复杂，代码组织乱！“•“ Vue好上手，岗位多”•“ 大厂基本都用 React，不用 Vue ”
其实大可不必，它们各有特点，都能解决前端开发的问题，你只要选择更适合自己风格的那种就可以了。这就像不同品牌的汽车，都能开到目的地，只是你开起来顺不顺手而已。
不过，这两个框架的对比和争论，并非全无意义。
1、React 和 Vue 各自的特点是常见的面试题。

2、技术选型时，必须对各个框架都非常了解。

3、通过对比，有助于领悟一些前端的本质东西，比如算法、工程化方法、规范等等，可以帮你构建技术壁垒，保持核心竞争力。
本周的课程资料，就是两大框架的对比 《Vue 3.0 和 React 17 源码剖析比较》 资料包。它从框架原理开始讲起，分析各自的设计思路，再到现实业务场景的适用性，最后抽象二者的底层实现，层层递进，帮你掌握这两个框架的异同。
下面就是资料包的主要内容。
它比较适合前端入门不久、对主流框架还不够熟悉的同学。可以帮助学习者掌握 Vue3 和 React17 设计思路和面试技巧，也能对比框架生态，了解技术选型方法论，探究框架原理。
资料包由国内著名培训机构“开课吧”提供，编写者大圣老师（盛鑫晶）是前百度、360 的前端架构师，精通 Vue 和 React 开发，也是 Vue 3.0 源码的贡献者。
主办方为了推广品牌，现在向周刊读者赠送这个资料包。微信扫描下方二维码，就可以免费领取。
扫描后，记得添加助教老师微信。当天，老师就会把资料包发给你，数量不多，欢迎扫码领取。

科技动态

1、闪烁灯光的代码[4]
有人发现，2020年发布的游戏 Alyx，里面地下室的闪烁灯光，跟1998年发售的《半条命》是一样的，说明它们使用的是同样的代码。
大家仔细看下面的游戏视频[5]，两者闪烁灯光的模式和频率完全一样。
它的代码实现，是使用一个字符串mmamammmmmammamamaaamammma表示灯光亮度变化的顺序，a 表示暗，m 表示亮。这个技巧最早是1996年 John Carmack 在雷神之锤（Quake）里使用的。
2、奥运村的遥控器[6]
加拿大网球运动员来到东京参加奥运会，住进奥运村后，就遇到了麻烦。空调遥控器竟然只有日文，完全看不懂，她只好在网上发文求助。
网友纷纷给她出主意，用手机翻译软件拍照就可以了。但是，这件事反映了组委会的疏漏，以及空调厂家的设计完全没有考虑外国用户。
3、沼气摩托车[7]
一个荷兰艺术家将一辆二手摩托车，改建成使用沼气（主要成分甲烷）作为燃料。摩托车的尾部挂了一个大瓶子，用来存储沼气。
加气时，需要使用一个特殊装置，到池塘和沟渠去收集有机物质分解或腐烂所释放的甲烷。
收集8个小时的沼气，可以行驶20公里。这个项目的主要目的，是为了提醒公众环境保护。
4、交通信号灯[8]
1914年，美国城市克利夫兰安装了人类第一个交通信号灯，从那时到现在，基本样子没变过。一家俄罗斯设计公司，最近提出了新的信号灯设计。
这种信号灯就是一整块液晶面板，通过背景色的变化，来提示红灯、黄灯和绿灯，并用勾、叉和感叹号等辅助符号，加强注意力。
它还会显示剩余的秒数，以及绿灯时可通行的道路走向。
5、
《纽约时报》[9]报道，越来越多的美国年轻人拍一段自己的短视频，放在 TikTok 上面求职，请求看到的人转发。
这比 A4 纸的简历效果好多了，值得借鉴。大家完全可以在简历上印一个自己视频的二维码。
6、3D 打印的汽车配件[10]
福特公司在美国新发布的 Maverick 皮卡汽车，车内的大量配件都没有提供实物，而是提供了 STL 源码文件，让车主自己去 3D 打印，有一点“毛坯车”的意思。
可以打印的配件包括杯架、储物箱、垃圾桶、绳索组织器、挂袋的双钩、座椅下的储物隔板等等。福特公司说，还会发布更多可 3D 打印的配件。
这样做有几个好处，一是降低了车辆的出厂价格，二是用户可以根据自己的喜好，决定打印哪些配件，以及使用什么材质。另外，外部厂商也可以根据公开的接口，生产第三方配件。
7、
一位设计师提出[11]，浏览器的窗口标签应该可以改变位置，放置在浏览器的左右两侧，就像活页夹一样。
我觉得，这种设计对宽屏幕显示器很有意义。

文章

1、JavaScript 新增的运算符[12]（中文）
本文介绍 ES6 的后续标准为 JavaScript 新增的七个运算符，其中包括最新的 ES2021 标准增加的三个运算符。
2、软件未来的10个预测[13]（英文）
一个云计算专家预测软件未来的10个变化，可以当作一家之言看看。
3、如何向美国政府索取入境照片[14]（英文）
外国人每次进入美国时，需要拍照并扫描指纹。根据美国法律，可以向美国政府索取这些信息的副本。本文记录作者是怎么做的。
4、Haskell 语言入门第一步[15]（英文）
这篇文章介绍怎样动手尝试 Haskell 语言，并写一个简单函数，内容清晰易懂 。
5、关于微控制器的知识[16]（英文）
当代计算机越做越小，符合冯诺依曼架构的全套计算装置，已经可以做进一块芯片了，这种芯片式的计算机称为“微控制器”。本文介绍微控制器的基本知识。
6、最糟糕的音量控制界面[17]（英文）
本文收集各种极其难用的音量控制界面设计，有点恶作剧性质，比如上图。
7、JS 脚本如何正确检测用户的设备[18]（英文）
用户经常使用伪装的 User-Agent 标头，隐藏自身的信息。本文给出了各种思路，如何用 JS 脚本，正确检测用户的上网设备。
8、Suspense 和 React.lazy() 用法示例[19]（英文）
React 16.6 版本引入了 Suspense 组件，用于生成动态加载元素的过渡效果。本文给出了一个完整的示例，介绍它配合 React.lazy() 的用法。

工具

1、Orbit[20]
一个 React 的组件库，由旅游网站 Kiwi.com 设计，带有旅游休闲的风格。
2、Feed me up, Scotty![21]
这个工具使用 CSS 选择器，从任意页面提取想要的内容，通过 GitHub Actions，自动生成该页面的 RSS。
3、transfer.sh[22]
这个开源工具允许自己架设服务，从命令行分享文件给其他人，也可以直接使用官方的在线版。
4、MoviePy[23]
一个视频编辑的 Python 库，可以方便地编写脚本，进行各种视频操作，基于 ffmpeg。
5、Ampache[24]
一个开源的流媒体服务器，允许远程访问托管的音频和视频文件，有点类似于 Plex。
6、Mobian[25]
手机版的 Debian 系统，可以安装在指定型号的手机上，现在支持一加 6 和 Poco F1。
7、push-bot[26]
一个基于 wechaty 的微信推送机器人，可以用脚本向微信推送消息。（@tans[27] 投稿）
8、织信[28]
一个面向企业用户的低代码平台，帮助企业不用写代码，就能搭建管理系统、业务平台、企业官网等，有免费使用的版本。（@hopper20[29] 投稿）

资源

1、网络迷踪[30]
炒饭社区的一个板块，网友上传照片（比如上图），请求帮助找出这是在哪里拍的。（@cijianzy[31] 投稿）
2、Mac 电脑如何设置开发环境（2021版）[32]（英文）
一个程序员买了新的 Mac 电脑，用于全栈开发。他详细记录了，如何将这台电脑设置成开发环境。
3、微软 Rust 语言初学者教程[33]
微软公司推出 Rust 语言视频教程，一共35讲，每一讲都是几分钟的短视频，存放在 Youtube 上面。
4、Pitch Deck Hunt[34]
创业公司向投资者和用户介绍自己的 PPT，叫做 Pitch Deck。该网站收集了150多家著名公司早期的 Pitch Deck，可以用来当作模板。

图片

1、地下小镇[35]
澳大利亚南部内陆有一个名叫库伯佩迪（Coober Pedy）的小镇。它最初是一个蛋白石矿场，现在已经停止开采了。
该镇的夏季地表温度接近50摄氏度，为了躲避酷暑，许多居民都搬到地下的矿洞里面居住，已经有100年历史了。
当地的地面上，到处都是烟囱和通气孔。
人们则是在地下安家，客厅、卧室、厨房，一应俱全。
酒吧、教堂、商店、旅馆、娱乐设施等也在地下，整个小镇可以都在地下运作，不到地面活动。
2、自动合影机[36]
美国达拉斯牛仔队的体育场里，有一个自动合影机，球迷可以挑选自己喜欢的体育明星合影，非常酷。
我预感，国内很快就会出现类似的机器。

文摘

1、一个人可以有多少个朋友？[37]
英国人类学家罗宾·邓巴（Robin Dunbar）提出过著名的“邓巴数”的概念。
他认为，由于人类大脑的容量，一个人能够保持的友谊关系是有限的，平均大约为150人。大脑认知功能比较强的人，会有更多一点的朋友。
下图就是他的理论。
（1）你最贴心的朋友，平均是1.5个，很可能是你的伴侣。
（2）你的亲密朋友大约是5个，如果你遇到困难，他们会放下一切来支持你。
（3）你的至交平均是15个，他们是你的主要社交伙伴，你足够信任他们，会想着跟他们一起吃饭、旅行，交流生活经验。
（4）你熟悉的朋友是50个，如果你在家里举办周末大烧烤，会邀请他们。
（5）你的普通朋友是150个，你举行婚宴的时候，他们会参加。
（6）你认识的人大约是500个，路上见到，会打招呼。
（7）你记得住名字的人是1500个。
（8）你对脸有印象的人是5000个。
之所以会有这些层，是因为一个人的社交时间和精力是有限的。你不得不选择，如何分配这些时间，与哪些人共度。
他还有其他一些推论。
（1）一般来说，内向的人在每一层的朋友数，都比外向的人少。
（2）与一个陌生人成为好朋友，大约需要相处200个小时。
（3）随着年龄的增长，朋友关系变得越来越难以建立，每一层的朋友数字都会下降。
（4）坠入爱河会让你减少两个好朋友。

言论

1、
年轻时，我犯的最大错误，就是没有及时离职。我以为我必须向公司证明自己，然后再离开，但这其实没有任何意义。你不欠雇主任何东西，不必向雇主证明任何事情。他们对你丝毫没有忠诚度，对你做对或做错、是聪明还是愚蠢，毫不在意。
把时间用在你最终不会引以为豪的东西上面，是一件可怕的事情，浪费了你在地球上的短暂旅程。
-- Hacker News 读者[38]
2、
新手作家追求写得聪明，专业作家追求写得清晰，大师追求引起读者灵魂的共鸣。
-- David Perell[39]
3、
上周俄罗斯西北部的气温高达35度以上，持续了好几天，那个地方在北极圈里面，晚上太阳几乎不下山，没日没夜的高温暴晒，简直是对人的折磨。
-- Hacker News 读者[40]
4、
创业者要做两件事：第一件是弄清楚要做什么，第二件就是去做。
但是，大多数创业者不认为第一件事很重要，如果花费一天时间思考，试图更好地理解一个问题，他往往觉得那一天是浪费掉的，没有行动力。
-- 《动作要快，但要先了解问题》[41]

历史上的本周

2020年（第 118 期）：高考志愿怎么填
2019年（第 66 期）：创业不是零和游戏
2018年（第 15 期）：周刊的内容从何而来？

References

[1]
 ruanyf/weekly: 
https://github.com/ruanyf/weekly
[2]
 《谁在招人？》: 
https://github.com/ruanyf/weekly/issues/1870
[3]
 via: 
https://www.facebook.com/groups/alashanghaining/permalink/10160047667453465
[4]
 闪烁灯光的代码: 
https://80.lv/articles/valve-reused-the-code-for-flickering-lights-in-alyx-22-years-later/
[5]
 游戏视频: 
https://v.qq.com/page/p/i/v/p3256qp06iv.html
[6]
 奥运村的遥控器: 
https://twitter.com/lawanda50/status/1416979481651150849
[7]
 沼气摩托车: 
https://www.notechmagazine.com/2021/07/inventor-harvests-methane-gas-from-ditches-and-ponds-to-power-his-moped.html
[8]
 交通信号灯: 
https://www.fastcompany.com/90655753/the-traffic-light-gets-a-dazzling-21st-century-makeover
[9]
 《纽约时报》: 
https://www.nytimes.com/2021/07/19/technology/tiktok-resumes-jobs.html
[10]
 3D 打印的汽车配件: 
https://www.motor1.com/news/513312/ford-maverick-3d-print-accessories/
[11]
 提出: 
https://twitter.com/neilsardesai/status/1416527160794361868
[12]
 JavaScript 新增的运算符: 
https://wangdoc.com/es6/operator.html
[13]
 软件未来的10个预测: 
https://blog.container-solutions.com/10-predictions-for-the-future-of-computing
[14]
 如何向美国政府索取入境照片: 
https://arstechnica.com/tech-policy/2015/02/how-i-requested-my-photographs-from-the-department-of-homeland-security/
[15]
 Haskell 语言入门第一步: 
https://blog.kalvad.com/haskell-series-part-1/
[16]
 关于微控制器的知识: 
https://blog.toit.io/what-you-need-to-know-about-microcontrollers-5fabd6d5b019
[17]
 最糟糕的音量控制界面: 
https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950
[18]
 JS 脚本如何正确检测用户的设备: 
https://multilogin.com/why-mimicking-a-device-is-almost-impossible/
[19]
 Suspense 和 React.lazy() 用法示例: 
https://dev.to/collegewap/code-splitting-in-react-using-react-lazy-and-loadable-components-3o54
[20]
 Orbit: 
https://orbit.kiwi/
[21]
 Feed me up, Scotty!: 
https://feed-me-up-scotty.vincenttunru.com/
[22]
 transfer.sh: 
https://transfer.sh/
[23]
 MoviePy: 
https://github.com/Zulko/moviepy
[24]
 Ampache: 
https://ampache.org/
[25]
 Mobian: 
https://mobian-project.org/
[26]
 push-bot: 
https://github.com/tans/push-bot
[27]
 @tans: 
https://github.com/ruanyf/weekly/issues/1856
[28]
 织信: 
https://www.informat.cn/
[29]
 @hopper20: 
https://github.com/ruanyf/weekly/issues/1866
[30]
 网络迷踪: 
https://chao.fun/f/84?time=1627397908906
[31]
 @cijianzy: 
https://github.com/ruanyf/weekly/issues/1858
[32]
 Mac 电脑如何设置开发环境（2021版）: 
https://www.swyx.io/new-mac-setup-2021/
[33]
 微软 Rust 语言初学者教程: 
https://www.youtube.com/playlist?list=PLlrxD0HtieHjbTjrchBwOVks_sr8EVW1x
[34]
 Pitch Deck Hunt: 
https://www.pitchdeckhunt.com/
[35]
 地下小镇: 
https://www.businessinsider.com/inside-coober-pedy-australias-underground-town-2016-1
[36]
 自动合影机: 
https://www.reddit.com/r/Damnthatsinteresting/comments/o7brim/this_really_cool_system_to_take_a_picture_with/
[37]
 一个人可以有多少个朋友？: 
https://kottke.org/21/06/the-circles-of-friendship
[38]
 Hacker News 读者: 
https://news.ycombinator.com/item?id=27565815
[39]
 David Perell: 
https://twitter.com/david_perell/status/1409610371527233539
[40]
 Hacker News 读者: 
https://news.ycombinator.com/item?id=27694136
[41]
 《动作要快，但要先了解问题》: 
https://jacobobryant.com/blog/understand/
继续阅读
阅读原文