Weekly#6
Table of Contents
- News | Article
- 枯れた技術の水平思考
- JS Dates Are About to Be Fixed
- You Are NOT Dumb, You Just Lack the Prerequisites
- If Your World Is Not Enchanted, You're Not Paying Attention
- Fixing a Bug in Google Chrome as a First-Time Contributor
- Stop inventing product problems; start solving customer problems
- In Loving Memory of Square Checkbox
- why lowercase letters save data
- Tutorial
- Code
- Cool Bit
- Tool | Library
- Music
- 杂言碎语
News | Article
枯れた技術の水平思考
横向思维对于死技术的优势在于,通过使用已经普及和过时的技术,开发和生产成本可以更低。
矛盾的是,这也意味着它们不参与技术竞争。
据说横井在 20 世纪 90 年代中期曾说过:"家用视频游戏机缺乏创意。
据说,横井对家用视频游戏机性能的不断提高进行了讽刺性的评论,称缺乏创意的唯一出路就是 CPU 竞争和色彩竞争。
横井担心这会导致产品只贵不畅销。
任天堂的 switch,虽然硬件性能一般,但是依然有很多有趣的游戏在上面运行,例如塞尔达,而且运行得也很好。
早期任天堂也追求过新技术,但是新技术开发的机子,软件公司还跟不上,导致了机子没有被广泛采用。
后来他们就用较旧的,成熟的技术开发机子,反而变得畅销。
软件开发上,新的技术社区比较小,碰到问题可能需要自己踩坑,而成熟的技术社区比较活跃,很多问题别人可能都碰到过了,试错成本就比较低。
但是过于老旧的,甚至已经被宣布停止维护的技术,维护的人也很少,出现问题了修复起来也不容易。
技术总是在更新迭代的,只能是选择的时候好好权衡一下吧。
JS Dates Are About to Be Fixed
JS 的日期缺少时区的概念,即使使用 UTC 时间,同一个 UTC 时间也可以转换成多个不同时区的时间表示。
假如一个全球性的应用,决定在每天的 0 点执行一些动作,那 0 点是对于什么地区而言的?中国的时区还是美国?
而新的规范推出了 Temporal.ZonedDateTime,可以在定义时间的时候增加时区信息,避免时区造成的歧义。
You Are NOT Dumb, You Just Lack the Prerequisites
这并非因为我能力不足,而是我缺乏大量必要的背景知识。
就像在等级 1 的情况下试图战胜艾尔登法环中的 boss 一样。
就像中途进入电影院—你无法理解情节,因为你错过了开头。
对于学习复杂的主题,如数学、计算机科学等,也是如此。
缺乏核心知识是导致理解差距的原因,而不是能力的缺乏。
所以这里有一个温和的提醒:你并不笨,你只是还未掌握所有的先决条件。
If Your World Is Not Enchanted, You're Not Paying Attention
Enchantment is just the measure of the quality of our attention.
魅力只是我们注意力质量的衡量标准。
“Just because something is available instantly to vision does not mean that it is available instantly to consciousness.” Or, as she also puts it, just because you have looked at something doesn’t mean that you have seen it.
"视觉能立即看到的东西并不意味着意识也能立即看到"。或者,正如她所说,你看了某物,并不意味着你已经看到它。
大致的意思应该是说,世界不是缺少美,而是缺少 发现 美的眼睛。
类比听歌,如果是工作,走路的时候随便听,歌就像是一种背景乐,可能不会留意到里面的乐器组成,作曲人埋在曲子里的巧思。
但是,如果专门去听一首歌,就会听到曲子里很丰富的器乐,人声,念白等等,很发现原来这首歌这么精彩,好听。
Fixing a Bug in Google Chrome as a First-Time Contributor
作者修复 Chrome 的一个 bug 的过程,看下来觉得文档还是很重要,作者在修复过程中能通过文档得到不少的帮助。
Stop inventing product problems; start solving customer problems
要了解清楚用户的需求,而不是创造产品需求,但实际并不满足用户的需要。
或许弄清需求后,并不需要开发,而是通过别的一些手段也能满足用户需求,甚至成本更低。
对于开发来说,可能无法直接接触到用户,对接的往往是产品经理,除了理解清楚产品需求之外,也要尽可能去弄明白需求解决的问题,也许会发现有一些更好的实现。
In Loving Memory of Square Checkbox
方框是多选框,圆框是单选框,这应该是一种普遍认知吧,不过最近苹果改了,将圆框变成了多选框,让人有点分不清。
在交互上,一般要遵循大众普遍的认知和习惯。
例如关闭按钮点了就应该是关闭,如果点了反而是确认,就会让人摸不着头脑,增加了用户的认知负担,用户可能就不想用了。
why lowercase letters save data
简单理解就是小写字母往往出现频率更高,在文本中的重复率也就更高,重复率越高,压缩的时候就可以压缩得更多,于是就比大写字母节省一点空间。
Tutorial
Styling Tables the Modern CSS Way
一步一步教你美化表格,例子丰富,不错的文章。
Making SVG Loading Spinners: An Interactive Guide
使用 SVG 创建 spinner 的教程。
How To Create An NPM Package
2024 年创建 NPM package 的步骤,一些最佳实践和工具推荐。
Code
前端实现搜索并高亮文字的两种方式
其中一种实现思路:
- 使用正则匹配光亮文字
- 使用 Range 创建高亮文字的选中区域
- 使用 Range: getBoundingClientRect() method 获取选中区域的尺寸信息
- 遍历尺寸信息,通过定位,将光亮色块定位到对应的文字上
当然,边缘场景还有很多,可以看看作者的处理。
JavaScript Generators Explained, But On A Senior-Level
The short answer to the question "What is a generator?" is:
Generators are pull streams in JavaScript.
关于 Generator 的一篇解释文章,几个有用的场景:
- 按需生成数据或处理大型或无限数据集
- 处理异步操作
- 允许在复杂流程的步骤之间停止
Cool Bit
Font with Build-In Syntax Highlighting
直接在字体中加入语法高亮功能,实现代码的语法高亮。
原理是利用了 OpenType COLR table 先将同一个字符,生成多种不同颜色的变体。
然后利用 OpenType contextual alternates,编写判断逻辑,当匹配某个关键字的时候,用对应颜色的变体。
虽然思路看起来简单,但是判断逻辑部分感觉挺复杂的。
The Monospace Web
等宽网页,字体符号等都是等宽的,整整齐齐,看着舒服。(Hacker News Comment)
MakerSkillTree
一个 awesome-list,收集了很多技能树,像是一份成就表,达成了就着色点亮一下 :P
The secret inside One Million Checkboxes
前阵子在 Hacker News 上看到一个有很多 checkbox 的网站,访问的网站的人都可以点击,选中状态会实时同步。
网站背后的故事挺有趣的,例如:
- 每个 checkbox 对应 1 bit,所有数据的存储大小,才 125 KB,通过 base64 编码传输到客户端。
That’s a million bits. There are 8 bits in a byte, so that’s 125,000 bytes, which is 125KB - not even the size of an MP3! Totally workable.
- 有人通过位编码,给作者发消息。
- 有人用来画画,传达信息
Can you convert a video to pure css?
将视频转换成纯 CSS ?
视频其实是连续播放的图片,而图片由多个像素点组成,那么将像素点用 CSS 表示,然后让这些像素点动起来,好像就是视频?
Tool | Library
Favicon.im
输入网站地址,获取网站的 favicon。
blazwitcher
一个 Chrome 插件,用于搜索 tab,history,bookmark,支持拼音搜索。
Free Public API
这个网站提供了一些 API,是老师为学生搭建的,供他们的编程项目使用。
重要的是网站的 API 会每天测试是否可用,保证网站上的 API 都是可用。
这样当你需要 API 调试的时候,到网站上找 API 用就一定是可用的,而不是尝试了 N 个 API,还找不到可用的。
Music
本周喜欢的歌比较多,我将之前周刊推荐的歌整理到 Weekly 歌单了,欢迎收藏 :P
the three mice
鼠鼠鼠的这张专辑,喜欢里面听起来可爱活力的女声,也喜欢里面的器乐,里面的萨克斯,吉他,鼓点。
其中《鲁蛇俱乐部》有两个版本,各有特色,一个更摇滚,一个缓和一些,但背景音却是深夜的呐喊声。
so well let's forget everything said
always more than what we were able to do
混入人类计划 Blending into Human
这是 ChillChill 的新专辑,以前听这个歌手并不多,是在每日推荐里听到《五块钱的伞》喜欢上了这张专辑。
人声和歌词都挺可爱的,听着让人开心。
怀疑是卖伞店老板诡计多端
施法让我居住的城市乌云频繁
因为每一次买单他看起来自信满满
和我说“嘿,欢迎再来”
毕竟天总会放晴雨会停
淋湿的雨伞会迎着阳光被忘记
如果你有缘捡到别客气
多幸运可以陪你度过下一个雨季
听说雨伞上住着拿盾的神仙
守护着每一个撑开他的胆小鬼
越贵的防御越高可以直面地球毁灭
我的风雨暂时不配 — 五块钱的伞
给整片银河系的疲劳都写了假条
随机抽一条 保证奏效
抛开 负担 忍不住想要
为自己喝彩
顺利捡漏一天舒坦
— 屑屑
菊花夜行军
前阵子看了《南国再见,南国》,里面的长镜头很喜欢。
里面有段台词,真是中年男人的无奈:
我对不起我爸!阿瑛一直叫我开餐厅,操他妈,算命的说,我他妈的还要过五关斩六将。 我只是开餐厅而已,我他妈还要过五关斩六将……叫我怎么跟阿瑛求婚啊? ——搞了他妈十几年,什么都没有!什么都没有啊!我操!我他妈怎么跟人家谈将来?!
电影是在一个 B 站视频《 评分9.7!无法超越的华语民谣史诗|菊花夜行军|林生祥&交工乐队》看到的,很喜欢里面骑摩托的片段,就找来看了看。
而视频说的专辑《菊花夜行军》也是很早以前就听过的,还去现场听过 live。
唱菊花夜行军时,生祥喊道:“晚点名!”,全场听众一起”1,2,1,2,1234,1234…" 氛围真是好,音乐也很好听。
《菊花夜行军》这张专辑是一个故事,在城市混不下去的阿成,骑着风神 125 ,从连通城市和乡村的县道184 回来,回到农村耕耘自己。
成仔,耕田是耕毋出水 (成仔,耕田是耕不出油水)
汝又冇读到有书 (你又没读到什么书)
毋当出去学一个技术 (不如出去学点技术)
人讲,百番头路百番难 (人说,百种工作百种难)
就算讨食也冇清闲 (就算乞食也不清闲)
成仔,爱煞猛认真做喔 (成仔,要努力认真做)
他人系驶个BMW (别人家如果开辆BMW)
捱等是铁牛车罔拖 (我们就铁牛车勉强拖)
罔拖罔拖定着会有 (凑合凑合一定会有)
— 风神125
是那代逃离城市的人的故事,是一张充满感情的专辑。
恰好最近又听到一张专辑《向前走 》,是南国再见里的演员,林强制作的,其中里面同名曲《向前走》讲的是一个青年背井离乡去到大城市台北闯的故事。
火车,渐渐要启程
再会,我的故乡和亲戚
亲爱的父母,再会吧
一起的朋友,告辞啦
我要前去台北打拼
听人说什么好东西都在那里
朋友,笑我是爱做白日梦的憨仔
不管如何,路是自己走
Hooo!再会吧!
Hooo!什么都不怕
Hooo!再会吧!
OoHooo!向前走
— 向前走
和菊花夜行军中的阿成形成了对比。
向前走这张专辑也很好听,推荐~
杂言碎语
- 时间就是生命,开会尽快和相关人员同步完信息,不要浪费与会无关的人的时间