开发时间

今年 2 月就开始惦记，7 月开始编写代码，打算 9 月中旬写完然后发布到 V2 上来寻求面试机会的，结果 8 月底去网易面试然后通过了。然后从 9 月底继续编写，现在已经部署到线上了。

初衷

一开始是使用别人的一言 API，然后就惦记着单独做一个 PWA 应用。恰好看完了《松浦弥太郎的 100 个基本》，当时觉得书里这么多想法，自己一下子记不住，记住过段时间又会忘，那么有没有地方能够循环展示这些内容呢？

我一开始是打算做一个 PWA 版的一个（就是韩寒工作室出的那个应用），但是在图文排版上不太好处理，图片的来源没有，而且使用的一言 API 也没有图片，最终还是回到了「展示一句话」这样的基本点上。

关于句子，有一个收集网站叫做句子迷，句子内容丰富，但是网页设计还停留在 Web2.0，移动端网页中也是传输的 HTML 页面，而不是常见 JSON 接口。很希望句子迷能够改版。

所以这个网页应用能够像句子迷网站那样收集自己喜欢的句子，并且能够展示出来。针对句子，采用了竖着排版和横着排版两种布局，不适合整篇文章。

怎么使用在「关于」选项里面有介绍，首页播放展示是以模式为主的。

技术

开启 gzip 后，网站大小为 200KB 左右，字体资源 24MB 是放在 CDN 上的。每次更新最多只会使用 200KB 的流量,字体资源下载后只要不被清理掉，就再也不会向网络请求获取。网站采用的前端技术也没什么新鲜的东西，可能就多了一个 indexedDB 缓存 20m 的字体文件吧，indexedDB 非 https 的网站也能使用。后台是用 restify+mongodb 写的，代码没有根据业余分割到各自的文件夹（为了使用类型提示），为了安全性暂时不公开后台源码，一年后再公开。

前端还存在的问题是

我 webpack production 的配置不能开启 uglifyPlugin，我不知道为什么是因为 commonChunck 吗？我想让 ServiceWorker 增量更新资源，只更新 bundle，vender 使用以前的，不知道 OfflinePlugin 的逻辑是不是这样写的。
在 fullscreen 模式下，软键盘会遮住输入框。
React 未做优化，有一些不必要的渲染。
24MB 的字体文件第一次解析时会导致页面卡顿。

tomato3

2017-10-24 00:20:09 +08:00

@ck65 这是动画库的正常现象，你得等它一个动画完成后在去点击其他操作，不然在动画期间他会让两个元素都作为离场元素设置为透明度为 0，就像在 macro tasks 中间插入了 macro tasks。我使用的是进出场组件，对动画过程无法精确控制，不能中途强制认为某个动画已结束，执行新动画。开发过程中，FullPageCard 在右侧其实还有一个关闭按钮。点击关闭按钮可以很快的关闭这个页面，但如果场景切换过快，会导致页面动画倒放以及你说的页面全白。我又给每一个组件设置 key 为 Date.now()能够解决这个问题，但是这样不能重用实例，是个反模式。所以就去掉了关闭按钮，Date.now 也去掉了。让你切换页面的鼠标移动距离变大，这样就不会那么快切换页面了。

但其实这个问题还是存在的，你在点我的收藏然后快速返回再进去几次，动画会倒放。

一言 PWA——一个展示一句话的网站

开发时间

初衷

技术