首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
华为云
V2EX  ›  程序员

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

  •  
  •   mofe · 158 天前 · 668 次点击
    这是一个创建于 158 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我又来推荐新写的东西啦

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

    重构了一个叫 Colorful Motivation 的东西

    web 版 Colorful Motivation (m.mofe.io)

    已经发布到了 Chrome Web Store

    Make Colorful Motivation Great Again New Tab

    点击播放动画

    直接播放点这

    博客原文点这

    简介

    这个程序做的事情很简单

    先预设一个生日

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

    1

    时间输入页

    注意有段数字用下划线标注出来了,这段 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. 我觉得没有什么能比这静静流动的数字更能激发斗志

    3 回复  |  直到 2018-05-18 10:33:01 +08:00
        1
    mseasons   158 天前
    每次开一个新 tab 都能提醒自己又变老了
        2
    mofe   158 天前
    @mseasons 提醒自己 “ You Only Live Once ” ... 顺便可以熟悉下颜色的色值😂
        3
    mofe   158 天前
    似乎 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>
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3366 人在线   最高记录 3762   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 18ms · UTC 03:41 · PVG 11:41 · LAX 20:41 · JFK 23:41
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1