Make "Colorful Motivation" Great Again (一个刚出炉的 Chrome 插件)

[mofe]

我又来推荐新写的东西啦

上次写了个获取当前 ip 的程序，太简单了，这次稍微复杂点

重构了一个叫 Colorful Motivation 的东西

web 版 Colorful Motivation (m.mofe.io)

已经发布到了 Chrome Web Store

直接播放点这

博客原文点这

简介

这个程序做的事情很简单

先预设一个生日

每次打开 Chrome 新 Tab 时就会看到以分数的形式展示的年龄

时间输入页

注意有段数字用下划线标注出来了，这段 6 位数是背景颜色的色值，图上的色值即"#757794"

优化项

相比 原 Colorful Motivation New Tab 有如下优化

1. 用 react 重写了页面（使用 shouldComponentUpdate 隔离了组件状态的更新）
2. 将 setInterval 改为 requestAnimationFrame, 使数字流动更流畅
3. 删除了左下角和右下角的按钮, 日期输入方式改为点击数字弹出选框
4. 修改了计算日期的方式，使日期计算更精确

重构后的代码： https://github.com/mofelee/make-colorful-motivation-great-again-new-tab/blob/master/src/App.js

原始代码： https://github.com/joshspicer/colorful-motivation/blob/master/logic.js

不想在博客 Code Review。所以这篇文章太监了，如果有感兴趣的可以再开文章。。

PS. 我觉得没有什么能比这静静流动的数字更能激发斗志

[mseasons]

每次开一个新 tab 都能提醒自己又变老了

[mofe]

@mseasons 提醒自己 “ You Only Live Once ” ... 顺便可以熟悉下颜色的色值😂

[mofe]

似乎 V2EX 可以使用 iframe 加载视频？测试一下。。

<iframe height='330' scrolling='no' src='/player/?u=https%3A%2F%2Fd.mofe.me%2F2018%2F0517%2Fcolorful-motivation.mp4' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>