番茄时钟

我时不时会想自己写一个番茄时钟，因为网上找到的总是不尽如人意：它们大多没有通知功能，而且工作25分钟后会自动开始休息5分钟的计时。老实说我觉得那些软件是写给浏览器用的，不是写给人用的：不弹通知，要我一直盯着网页看么？自动开始，我要是想多花几秒完成手头的事呢？

我听说React是理念很好的框架，上次试用ReScript时我又发现ReScript存在的主要目的其实是写React。正好最近自制番茄时钟的想法又出现了，索性就尝试用这两个工具实现一下。最后的结果就是上面的框框，它支持：

• 时间结束后弹窗（当然，要经过你的允许）
• 由用户手动开始每个时间段（所谓“自主可控”）
• 暂停（好像原教旨主义者不会暂停，只会作废这段时间然后重新开始）
• 重新开始（只要再点一次相应按钮即可——哇！更自主可控了！）

它不支持：

• Safari浏览器——它真是顶级浏览器：我iPad买了五年了仍然用不明白这玩意，而且它的移动版不支持弹窗——据说16.4支持了，我很开心地去升级、打开实验性的通知功能，发现仍然不支持——啊还有，它的桌面版也差劲，因为请求弹窗API是早该被废除的版本。我真不知道这破软件是怎么做到用户体验和技术层面双丰收的。
• 在火狐安卓版里放到后台运行——计时会停止。直接用setTimeout的话在桌面浏览器上放到后台里会产生巨大的误差，所以我用了worker-timers。这下桌面浏览器、Chrome安卓版都可以在后台比较精确地计时了，唯独火狐不行。懒得研究，就这样了。
• 点击弹窗后跳到计时页面——最开始用new Notification可以设置onClick，然后调用window.focus的（安卓火狐无效）。但Chrome安卓版只支持Web Workers的showNotification，所以我换成大家都支持的showNotification了。按理说它也能监听点击事件，但我试了半天就是不行，所以先舍弃这个功能了。
• 更改工作、休息的时长——我觉得25、5、15挺好的。你想改的话可以去改Pomo.res。
• 放环境音乐——只有麦当劳才喜欢放环境音乐。

JavaScript社区让人嘲笑的一点是干一点小事就要装一万个包。我以前也跟着大家一起笑，但是真自己写了写发现这还是挺必要的：各个浏览器太不统一了，统一的标注也不好用。我决定洗心革面改过自新，在自己写JavaScript的时候不笑话JavaScript社区。

样式方面我直接用了NES.css。在我刚刚接触开源社区，只能修错别字时给它提过改一个字的PR。作者当天就回复了（好像是日本时间凌晨一点多？），并且教我使用git commit --amend和git push --force-with-lease修改commit message以通过测试——是的，这就是我重拾博客后的第一篇博文《提交PR后修改commit message》的来源。

NES.css似乎是以修改全局样式为目的而写的，直接使用的话会破坏博客原有样式。所以我用Sass给它所有样式前面嵌套了一层，然后删掉了多余的body。这样可以用了，但有些分辨率下进度条的边框会出现缝隙，不太明白为什么。

其实我写番茄时钟的初衷是在安卓火狐上使用，但不一直盯着页面的话连倒计时都无法完成这一点基本宣告了死刑。费劲巴拉写出来的东西是残废，我还是用我十块钱包邮的实体闹钟吧。