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

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

  •  
  •   mofe ·
    mofelee · 2018-05-17 16:35:22 +08:00 · 1761 次点击
    这是一个创建于 2142 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我又来推荐新写的东西啦

    上次写了个获取当前 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
    mseasons
        1
    mseasons  
       2018-05-17 22:40:38 +08:00
    每次开一个新 tab 都能提醒自己又变老了
    mofe
        2
    mofe  
    OP
       2018-05-18 10:15:18 +08:00
    @mseasons 提醒自己 “ You Only Live Once ” ... 顺便可以熟悉下颜色的色值😂
    mofe
        3
    mofe  
    OP
       2018-05-18 10:33:01 +08:00
    似乎 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>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   941 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 21:32 · PVG 05:32 · LAX 14:32 · JFK 17:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.