From a46639002b00cf754c12d74463ae49668669d0f6 Mon Sep 17 00:00:00 2001 From: ruanyf Date: Fri, 30 Jul 2021 08:57:46 +0800 Subject: [PATCH] docs: release issue 169 --- README.md | 1 + docs/issue-169.md | 427 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 428 insertions(+) create mode 100644 docs/issue-169.md diff --git a/README.md b/README.md index c19a8ff..2c0c897 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/docs/issue-169.md b/docs/issue-169.md new file mode 100644 index 0000000..393565b --- /dev/null +++ b/docs/issue-169.md @@ -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)，两者闪烁灯光的模式和频率完全一样。 + + + +它的代码实现，是使用一个字符串`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/) + +美国达拉斯牛仔队的体育场里，有一个自动合影机，球迷可以挑选自己喜欢的体育明星合影，非常酷。 + +我预感，国内很快就会出现类似的机器。 + + + +## 文摘 + +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) + +（完） +