我们在开源项目中是怎样埋彩蛋的

2018-12-25 17:30:24 +08:00
 Aresn

今天的 AntDesign 圣诞节彩蛋事件确实炸开了锅,加彩蛋的初衷是好的,只是这次玩过了火。

在开源软件中,加彩蛋是一种乐趣,并不为奇,同为知名 UI 组件库的 iView 项目,也经常在 文档 中埋藏很多彩蛋,不过仅仅是在 文档 中,组件库中是没有的。本来就来介绍下我们在开源项目中是怎样埋彩蛋的。

全民彩蛋计划

为庆祝 iView 两周岁生日,以及 3.0 版本的发布,我们在 18 年 7 月 28 日更新后, iView 文档 中放置了三枚彩蛋,它们埋藏在不同的页面里,可能是一段隐藏的代码,或是一段需要破解的密码等等。当然,找到三枚彩蛋,你并不能继承 iView 作者的遗产!彩蛋可以到 iView 开发者社区 兑换大量的 IO 币,IO 币可以换取各种礼物。

这个活动已经进行了 5 个月,已经有两名聪明的小伙伴成功找到了前两枚彩蛋,第一枚的位置是在 Collapse 折叠面板 页面的最后一个示例中:

https://www.iviewui.com/components/collapse

显示方法就是点击倒数第二个示例“简洁模式”中的第二个面板斯蒂夫·盖瑞·沃兹尼亚克,然后双击内容最后的 19840124,页面中就会弹出一个提示:

19840124 是一个日期,也就是 1984 年 1 月 24 日,这一天,苹果发布了麦金塔电脑( Macintosh ),对于苹果来说具有历史性的意义。第一枚彩蛋就是为了纪念这个事件。

第二枚彩蛋的位置在 Circle 进度环 页面的第二个示例总:

https://www.iviewui.com/components/circle

显示方法是点击“+号”按钮,当圆环到达 100% 后,再点击两次“+号”,页面中就会弹出一个提示:

这串字符是用 base 64 编码过的,解码后,就是第二枚彩蛋的正确答案了:

ToyStory-Pixar

Pixar 就是皮克斯动画工作室,是由苹果前 CEO 乔布斯被“赶出家门”后收购的,ToyStory 就是《玩具总动员》,是皮克斯制作的一部计算机动画长片和第一部剧场影片,给无数小朋友带来了欢乐。第二枚彩蛋就是纪念它的。

第三枚彩蛋至今( 2018-12-25 )仍未被找到,聪明的你要赶快行动哦!第三枚彩蛋与前两枚同样与苹果公司有关,这是因为 iView 的作者非常喜欢 Apple 和乔布斯!

弹幕彩蛋

在文档中埋彩蛋并不是 iView 的第一次活动了,在 16 年的 7 月 28 日( iView 一周岁),iView 文档首页增加了发弹幕的功能,你发的弹幕,同一时间打开文档首页的用户都可以实时看到。

一开始,大家玩的都很愉快,比如说 PHP 是世界上最好的语言 的,还有要妹子微信的,这很程序员:

再到后来,就被玩坏了,因为没有加验证,聪明的程序员各种 XSS 手段都用上了,于是画风就变成了这样:

这是一次典型的 XSS 攻击案例,哈哈!活动持续了 1 星期,总共发布了 10 万多条弹幕,大家玩的很开心。

节日彩蛋

逢年过节,iView 首页都会装饰,比如万圣节、圣诞节、春节。主要会美化一下 Logo 和改变首页背景图,比如今天的圣诞节,iView 的 Logo 是这样的:

比如 2018 年的春节:

春节有两个细节,一个是首页会放烟花(因为是截图,看不到动画),另一个是右上角有一个“福”字,当时可以支持支付宝的扫福活动。

2017 年的万圣节:

2017 年的圣诞节:

如果恰巧在一些特殊的时间节点发布了新版本,iView 在更新日志里也会做一个小彩蛋,或者说是纪念。比如 2018-03-14,这一天是史蒂芬·霍金离开这个世界的日子,我们在更新日志中和当天的文档首页也有纪念(首页为黑白色,现在无法找到当时的截图了),下面是更新日志:

后记

埋藏彩蛋是一个很有意思和意义的事情,许多游戏、电影、开源软件都有彩蛋。它们爱自己的用户,爱这个世界,希望给人们带来欢喜。iView 也会不断带来新的彩蛋,给用户带来惊喜,当然,它只会出现在文档中,源码是不用担心的!

5936 次点击
所在节点    JavaScript
24 条回复
ksco
2018-12-25 19:03:10 +08:00
恭喜你找到第三枚彩蛋
Keywords: Apple; Chapter 24

😅我也真是闲的慌哈哈
yiranHZT
2018-12-25 19:53:13 +08:00
嗯...刚打算直接下载 js 文件搜"彩蛋"关键字找出第三枚彩蛋,刚打开控制台就发现了这个:
https://imgur.com/OunCUn5
代码强迫症有点不能忍...
jackielin
2018-12-25 19:59:30 +08:00
蹭热点?
MoeXian
2018-12-25 20:03:52 +08:00
@ksco 无效的兑换码
ksco
2018-12-25 20:04:36 +08:00
兑换码是 ThinkDifferent,竟然没有空格~

哈哈哈很好玩~
noaccounthere
2018-12-25 20:04:48 +08:00
这确实才是正确的加彩蛋方法
ksco
2018-12-25 20:06:29 +08:00
@MoeXian #4 这不是兑换码,是个线索,看我上面的回复,已经被我兑换啦~

Aresn
2018-12-25 20:08:03 +08:00
@ksco 恭喜,半年了,终于被找到了
ksco
2018-12-25 20:08:42 +08:00
@ksco #5 解释一下,因为乔布斯传中文版的第 24 章的标题叫 Think Different,这也是苹果的一个广告的名字。
MoeXian
2018-12-25 20:10:06 +08:00
@ksco 233 好吧
MoeXian
2018-12-25 20:11:05 +08:00
@ksco 在文档哪里发现的鸭
ksco
2018-12-25 20:13:08 +08:00
https://www.iviewui.com/docs/guide/update

更新日志界面 3.0.0 Battleheart 这个版本,双击 更新日期 2018-07-28 就会弹出来了

不过我是搜源码找到的哈哈,惭愧。
MoeXian
2018-12-25 20:13:28 +08:00
@Aresn 文档的 Avatar 头像组件最后一个示例 change 按钮点击两次后 Chrome 未响应了...
shuirong1997
2018-12-25 20:14:37 +08:00
@yiranHZT #2 噗
a4854857
2018-12-25 20:15:11 +08:00
讲真。我看到文档里面这么多浮窗广告就已经不想去了解这个框架了。。。
MoeXian
2018-12-25 20:16:34 +08:00
@ksco 唔 看到了
yiranHZT
2018-12-25 20:19:18 +08:00
@Aresn 下次埋彩蛋可以考虑通过“双击”、“ hover ”等条件触发,然后请求服务器的彩蛋信息,再通过 notice 组件直接显示返回的结果。这样能简单地避免直接搜源码。😀
Aresn
2018-12-25 20:20:56 +08:00
@yiranHZT 你们都太聪明了
FindHao
2018-12-25 20:31:37 +08:00
@ksco 哈哈哈哈,恭喜你是半年来第一个 找 彩蛋的。
shuirong1997
2018-12-25 20:49:33 +08:00
@Aresn #18
虽然前端可以直接搜源码比较恶心,但直接汉字“彩蛋”放在代码里就没意思了~

可以考虑先将汉字转码(比如彩蛋的 unicode 码是“彩蛋”),然后将之切割成多股字符串,再将这些字符串藏到代码的不同地方。最后弹框显示的时候,拿到那些字符串,拼接下直接交给浏览器渲染出来就好了。

这样搞还有点意思~考虑下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/520897

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX