docs: release issue 169

This commit is contained in:
ruanyf 2021-07-30 08:57:46 +08:00
parent 925b98de33
commit a46639002b
2 changed files with 428 additions and 0 deletions

View File

@ -28,6 +28,7 @@ $ grep -nri css docs | cat --number
**七月**
- 第 169 期:[五菱汽车的产品设计](docs/issue-169.md)
- 第 168 期:[游戏《底特律:变人》](docs/issue-168.md)
- 第 167 期:[广告拦截器太过分了](docs/issue-167.md)
- 第 166 期:[视频学习胜过读书吗?](docs/issue-166.md)

427
docs/issue-169.md Normal file
View File

@ -0,0 +1,427 @@
# 科技爱好者周刊(第 169 期):五菱汽车的产品设计
这里记录每周值得分享的科技内容,周五发布。
本杂志开源GitHub: [ruanyf/weekly](https://github.com/ruanyf/weekly)),欢迎提交 issue投稿或推荐科技内容。
周刊讨论区的帖子[《谁在招人?》](https://github.com/ruanyf/weekly/issues/1870),提供大量程序员就业信息,欢迎访问或发布工作/实习岗位。
## 封面图
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072902.jpg)
上海中环的一根高架柱子上面,画着一匹巨大的斑马。([via](https://www.facebook.com/groups/alashanghaining/permalink/10160047667453465)
## 本周话题:五菱汽车的产品设计
很多年前,我就知道五菱汽车。大学时,一个广西同学去了那里就业,从此我就记住了,柳州有一家汽车厂。
当年,它很不起眼,主要生产面包车。据说,模仿的是日本三菱面包车,连牌子和名字都模仿了人家。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072601.jpg)
但是后来,这家公司逐渐摆脱了模仿,开始生产原创的家用轿车,发展得越来越好,成了全国知名品牌。尤其是近两年的几个车型,简直令人刮目相看。
宝骏 E300。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072602.jpg)
宏光 Mini EV。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072603.jpg)
皮卡和房车。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072606.jpg)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072605.jpg)
这些车的造型和外观设计,十分新颖和别致,完全原创,明显有一套自己的设计语言,非常吸引眼球。
要知道,它们都是低价车,定价几乎是同类车的下限,房车十几万,其他车几万块,配置都很低端。这就是我觉得不简单的地方, **明明是廉价货,可是看上去一点都不廉价,反而有点气派。**
举例来说,很多年轻人,尤其是女性,购买五菱宏光 Mini EV作为代步车。但它的配置和价格跟有一些四轮的老年代步车差不多。那些老年代步车让人觉得很简陋年轻人几乎不可能购买但是五菱重新设计和包装以后就打开了市场。这就是厉害的产品设计。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072812.jpg)
**把廉价的东西做得很廉价,那不叫本事; 把廉价的东西做得很轻盈,那才叫本事。**
所谓“轻盈”,就是简单优雅,在物质上节省材料和能源,在精神上追求自由。廉价的东西,原来只能吸引低端的顾客;做得轻盈以后,就能吸引到高收入的顾客。
我觉得,五菱汽车是一个好例子,值得软件开发者学习,怎么把产品做得简单而不简陋,轻盈而不笨重。
## Vue 3 和 React 17 的源码比较
React 和 Vue 是国内最流行的两个前端框架,孰优孰劣的争论,就从来没有停息过。只要有人提一句:“我觉得 A 比 B 更好”,下面肯定就是一堆回帖。
> - “ Vue 只适合小项目,大项目扛不起来”
> - “ React 组件太复杂,代码组织乱!“
> - “ Vue好上手岗位多”
> - “ 大厂基本都用 React不用 Vue ”
其实大可不必,它们各有特点,都能解决前端开发的问题,你只要选择更适合自己风格的那种就可以了。这就像不同品牌的汽车,都能开到目的地,只是你开起来顺不顺手而已。
不过,这两个框架的对比和争论,并非全无意义。
> 1、React 和 Vue 各自的特点是常见的面试题。
> 2、技术选型时必须对各个框架都非常了解。
> 3、通过对比有助于领悟一些前端的本质东西比如算法、工程化方法、规范等等可以帮你构建技术壁垒保持核心竞争力。
本周的课程资料,就是两大框架的对比 **《Vue 3.0 和 React 17 源码剖析比较》** 资料包。它从框架原理开始讲起,分析各自的设计思路,再到现实业务场景的适用性,最后抽象二者的底层实现,层层递进,帮你掌握这两个框架的异同。
下面就是资料包的主要内容。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072814.jpg)
它比较适合前端入门不久、对主流框架还不够熟悉的同学。可以帮助学习者掌握 Vue3 和 React17 设计思路和面试技巧,也能对比框架生态,了解技术选型方法论,探究框架原理。
资料包由国内著名培训机构“开课吧”提供编写者大圣老师盛鑫晶是前百度、360 的前端架构师,精通 Vue 和 React 开发,也是 Vue 3.0 源码的贡献者。
主办方为了推广品牌,现在向周刊读者赠送这个资料包。微信扫描下方二维码,就可以免​费领取。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072815.jpg)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072816.jpg)
扫描后,记得添加助​教老师微信。当天,老师就会把资料包发给你,数量不多,欢迎扫码领取。
## 科技动态
1、[闪烁灯光的代码](https://80.lv/articles/valve-reused-the-code-for-flickering-lights-in-alyx-22-years-later/)
有人发现2020年发布的游戏 Alyx里面地下室的闪烁灯光跟1998年发售的《半条命》是一样的说明它们使用的是同样的代码。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070306.jpg)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070307.jpg)
大家仔细看下面的[游戏视频](https://v.qq.com/page/p/i/v/p3256qp06iv.html),两者闪烁灯光的模式和频率完全一样。
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=p3256qp06iv" allowFullScreen="true" width="600" height="674"></iframe>
它的代码实现,是使用一个字符串`mmamammmmmammamamaaamammma`表示灯光亮度变化的顺序a 表示暗m 表示亮。这个技巧最早是1996年 John Carmack 在雷神之锤Quake里使用的。
2、[奥运村的遥控器](https://twitter.com/lawanda50/status/1416979481651150849)
加拿大网球运动员来到东京参加奥运会,住进奥运村后,就遇到了麻烦。空调遥控器竟然只有日文,完全看不懂,她只好在网上发文求助。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072402.jpg)
网友纷纷给她出主意,用手机翻译软件拍照就可以了。但是,这件事反映了组委会的疏漏,以及空调厂家的设计完全没有考虑外国用户。
3、[沼气摩托车](https://www.notechmagazine.com/2021/07/inventor-harvests-methane-gas-from-ditches-and-ponds-to-power-his-moped.html)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071407.jpg)
一个荷兰艺术家将一辆二手摩托车,改建成使用沼气(主要成分甲烷)作为燃料。摩托车的尾部挂了一个大瓶子,用来存储沼气。
加气时,需要使用一个特殊装置,到池塘和沟渠去收集有机物质分解或腐烂所释放的甲烷。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071408.jpg)
收集8个小时的沼气可以行驶20公里。这个项目的主要目的是为了提醒公众环境保护。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071409.jpg)
4、[交通信号灯](https://www.fastcompany.com/90655753/the-traffic-light-gets-a-dazzling-21st-century-makeover)
1914年美国城市克利夫兰安装了人类第一个交通信号灯从那时到现在基本样子没变过。一家俄罗斯设计公司最近提出了新的信号灯设计。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072101.jpg)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072102.jpg)
这种信号灯就是一整块液晶面板,通过背景色的变化,来提示红灯、黄灯和绿灯,并用勾、叉和感叹号等辅助符号,加强注意力。
它还会显示剩余的秒数,以及绿灯时可通行的道路走向。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072105.jpg)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072103.jpg)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072104.jpg)
5、
[《纽约时报》](https://www.nytimes.com/2021/07/19/technology/tiktok-resumes-jobs.html)报道,越来越多的美国年轻人拍一段自己的短视频,放在 TikTok 上面求职,请求看到的人转发。
这比 A4 纸的简历效果好多了,值得借鉴。大家完全可以在简历上印一个自己视频的二维码。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072001.jpg)
6、[3D 打印的汽车配件](https://www.motor1.com/news/513312/ford-maverick-3d-print-accessories/)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071905.jpg)
福特公司在美国新发布的 Maverick 皮卡汽车,车内的大量配件都没有提供实物,而是提供了 STL 源码文件,让车主自己去 3D 打印,有一点“毛坯车”的意思。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071906.jpg)
可以打印的配件包括杯架、储物箱、垃圾桶、绳索组织器、挂袋的双钩、座椅下的储物隔板等等。福特公司说,还会发布更多可 3D 打印的配件。
这样做有几个好处,一是降低了车辆的出厂价格,二是用户可以根据自己的喜好,决定打印哪些配件,以及使用什么材质。另外,外部厂商也可以根据公开的接口,生产第三方配件。
7、
一位设计师[提出](https://twitter.com/neilsardesai/status/1416527160794361868),浏览器的窗口标签应该可以改变位置,放置在浏览器的左右两侧,就像活页夹一样。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071801.jpg)
我觉得,这种设计对宽屏幕显示器很有意义。
## 文章
1、[JavaScript 新增的运算符](https://wangdoc.com/es6/operator.html)(中文)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071001.jpg)
本文介绍 ES6 的后续标准为 JavaScript 新增的七个运算符,其中包括最新的 ES2021 标准增加的三个运算符。
2、[软件未来的10个预测](https://blog.container-solutions.com/10-predictions-for-the-future-of-computing)(英文)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071101.jpg)
一个云计算专家预测软件未来的10个变化可以当作一家之言看看。
3、[如何向美国政府索取入境照片](https://arstechnica.com/tech-policy/2015/02/how-i-requested-my-photographs-from-the-department-of-homeland-security/)(英文)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071303.jpg)
外国人每次进入美国时,需要拍照并扫描指纹。根据美国法律,可以向美国政府索取这些信息的副本。本文记录作者是怎么做的。
4、[Haskell 语言入门第一步](https://blog.kalvad.com/haskell-series-part-1/)(英文)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071304.jpg)
这篇文章介绍怎样动手尝试 Haskell 语言,并写一个简单函数,内容清晰易懂 。
5、[关于微控制器的知识](https://blog.toit.io/what-you-need-to-know-about-microcontrollers-5fabd6d5b019)(英文)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071405.jpg)
当代计算机越做越小,符合冯诺依曼架构的全套计算装置,已经可以做进一块芯片了,这种芯片式的计算机称为“微控制器”。本文介绍微控制器的基本知识。
6、[最糟糕的音量控制界面](https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950)(英文)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071414.jpg)
本文收集各种极其难用的音量控制界面设计,有点恶作剧性质,比如上图。
7、[JS 脚本如何正确检测用户的设备](https://multilogin.com/why-mimicking-a-device-is-almost-impossible/)(英文)
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062803.jpg)
用户经常使用伪装的 User-Agent 标头,隐藏自身的信息。本文给出了各种思路,如何用 JS 脚本,正确检测用户的上网设备。
8、[Suspense 和 React.lazy() 用法示例](https://dev.to/collegewap/code-splitting-in-react-using-react-lazy-and-loadable-components-3o54)(英文)
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062901.jpg)
React 16.6 版本引入了 Suspense 组件,用于生成动态加载元素的过渡效果。本文给出了一个完整的示例,介绍它配合 React.lazy() 的用法。
## 工具
1、[Orbit](https://orbit.kiwi/)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071502.jpg)
一个 React 的组件库,由旅游网站 Kiwi.com 设计,带有旅游休闲的风格。
2、[Feed me up, Scotty!](https://feed-me-up-scotty.vincenttunru.com/)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070704.jpg)
这个工具使用 CSS 选择器,从任意页面提取想要的内容,通过 GitHub Actions自动生成该页面的 RSS。
3、[transfer.sh](https://transfer.sh/)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070705.jpg)
这个开源工具允许自己架设服务,从命令行分享文件给其他人,也可以直接使用官方的在线版。
4、[MoviePy](https://github.com/Zulko/moviepy)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072204.jpg)
一个视频编辑的 Python 库,可以方便地编写脚本,进行各种视频操作,基于 ffmpeg。
5、[Ampache](https://ampache.org/)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072704.jpg)
一个开源的流媒体服务器,允许远程访问托管的音频和视频文件,有点类似于 Plex。
6、[Mobian](https://mobian-project.org/)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072701.jpg)
手机版的 Debian 系统,可以安装在指定型号的手机上,现在支持一加 6 和 Poco F1。
7、[push-bot](https://github.com/tans/push-bot)
一个基于 wechaty 的微信推送机器人,可以用脚本向微信推送消息。([@tans](https://github.com/ruanyf/weekly/issues/1856) 投稿)
8、[织信](https://www.informat.cn/)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072711.jpg)
一个面向企业用户的低代码平台,帮助企业不用写代码,就能搭建管理系统、业务平台、企业官网等,有免费使用的版本。([@hopper20](https://github.com/ruanyf/weekly/issues/1866) 投稿)
## 资源
1、[网络迷踪](https://chao.fun/f/84?time=1627397908906)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072710.jpg)
炒饭社区的一个板块,网友上传照片(比如上图),请求帮助找出这是在哪里拍的。([@cijianzy](https://github.com/ruanyf/weekly/issues/1858) 投稿)
2、[Mac 电脑如何设置开发环境2021版](https://www.swyx.io/new-mac-setup-2021/)(英文)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070716.jpg)
一个程序员买了新的 Mac 电脑,用于全栈开发。他详细记录了,如何将这台电脑设置成开发环境。
3、[微软 Rust 语言初学者教程](https://www.youtube.com/playlist?list=PLlrxD0HtieHjbTjrchBwOVks_sr8EVW1x)
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062501.jpg)
微软公司推出 Rust 语言视频教程一共35讲每一讲都是几分钟的短视频存放在 Youtube 上面。
4、[Pitch Deck Hunt](https://www.pitchdeckhunt.com/)
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071002.jpg)
创业公司向投资者和用户介绍自己的 PPT叫做 Pitch Deck。该网站收集了150多家著名公司早期的 Pitch Deck可以用来当作模板。
## 图片
1、[地下小镇](https://www.businessinsider.com/inside-coober-pedy-australias-underground-town-2016-1)
澳大利亚南部内陆有一个名叫库伯佩迪Coober Pedy的小镇。它最初是一个蛋白石矿场现在已经停止开采了。
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062007.jpg)
该镇的夏季地表温度接近50摄氏度为了躲避酷暑许多居民都搬到地下的矿洞里面居住已经有100年历史了。
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062002.jpg)
当地的地面上,到处都是烟囱和通气孔。
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062003.jpg)
人们则是在地下安家,客厅、卧室、厨房,一应俱全。
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062004.jpg)
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062005.jpg)
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062006.jpg)
酒吧、教堂、商店、旅馆、娱乐设施等也在地下,整个小镇可以都在地下运作,不到地面活动。
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062008.jpg)
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062009.jpg)
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062010.jpg)
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062011.jpg)
2、[自动合影机](https://www.reddit.com/r/Damnthatsinteresting/comments/o7brim/this_really_cool_system_to_take_a_picture_with/)
美国达拉斯牛仔队的体育场里,有一个自动合影机,球迷可以挑选自己喜欢的体育明星合影,非常酷。
我预感,国内很快就会出现类似的机器。
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=v3255t75g3f" allowFullScreen="true" width="600" height="800"></iframe>
## 文摘
1、[一个人可以有多少个朋友?](https://kottke.org/21/06/the-circles-of-friendship)
英国人类学家罗宾·邓巴Robin Dunbar提出过著名的“邓巴数”的概念。
![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072901.jpg)
他认为由于人类大脑的容量一个人能够保持的友谊关系是有限的平均大约为150人。大脑认知功能比较强的人会有更多一点的朋友。
下图就是他的理论。
![](https://cdn.beekka.com/blogimg/asset/202106/bg2021061705.jpg)
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 读者](https://news.ycombinator.com/item?id=27565815)
2、
新手作家追求写得聪明,专业作家追求写得清晰,大师追求引起读者灵魂的共鸣。
-- [David Perell](https://twitter.com/david_perell/status/1409610371527233539)
3、
上周俄罗斯西北部的气温高达35度以上持续了好几天那个地方在北极圈里面晚上太阳几乎不下山没日没夜的高温暴晒简直是对人的折磨。
-- [Hacker News 读者](https://news.ycombinator.com/item?id=27694136)
4、
创业者要做两件事:第一件是弄清楚要做什么,第二件就是去做。
但是,大多数创业者不认为第一件事很重要,如果花费一天时间思考,试图更好地理解一个问题,他往往觉得那一天是浪费掉的,没有行动力。
-- [《动作要快,但要先了解问题》](https://jacobobryant.com/blog/understand/)
## 历史上的本周
2020年第 118 期):[高考志愿怎么填](https://www.ruanyifeng.com/blog/2020/07/weekly-issue-118.html)
2019年第 66 期):[创业不是零和游戏](https://www.ruanyifeng.com/blog/2019/07/weekly-issue-66.html)
2018年第 15 期):[周刊的内容从何而来?](https://www.ruanyifeng.com/blog/2018/07/weekly-issue-15.html)
## 订阅
这个周刊每周五发布,同步更新在[阮一峰的网络日志](http://www.ruanyifeng.com/blog)和[微信公众号](http://weixin.sogou.com/weixin?query=%E9%98%AE%E4%B8%80%E5%B3%B0%E7%9A%84%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97)。
微信搜索“阮一峰的网络日志”或者扫描二维码,即可订阅。
![](https://cdn.beekka.com/blogimg/asset/202103/bg2021030402.jpg)
(完)