爱意满满的作品展示区。
tomato3

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

  •  3
     
  •   tomato3 · Oct 23, 2017 · 8723 views
    This topic created in 3143 days ago, the information mentioned may be changed or developed.

    先放网址: https://hitokoto.heitaov.cn

    这是一个展示一句话的渐进式网页应用,emmm.....可能有点鸡肋。如果你喜欢宋体,为了更好的视觉效果,建议在应用中开启思源宋体选项。

    开发时间

    今年 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 写的,代码没有根据业余分割到各自的文件夹(为了使用类型提示),为了安全性暂时不公开后台源码,一年后再公开。

    前端还存在的问题是

    1. 我 webpack production 的配置不能开启 uglifyPlugin,我不知道为什么 是因为 commonChunck 吗?我想让 ServiceWorker 增量更新资源,只更新 bundle,vender 使用以前的,不知道 OfflinePlugin 的逻辑是不是这样写的。
    2. 在 fullscreen 模式下,软键盘会遮住输入框。
    3. React 未做优化,有一些不必要的渲染。
    4. 24MB 的字体文件第一次解析时会导致页面卡顿。
    40 replies    2017-10-25 09:32:53 +08:00
    liweicomeon
        1
    liweicomeon  
       Oct 23, 2017 via iPhone
    不错,帮顶,马克
    xshwy
        2
    xshwy  
       Oct 23, 2017
    如果能通过空格切换下一句就更好了
    taifu
        3
    taifu  
       Oct 23, 2017 via Android
    感觉挺不错的。
    Keyblade
        4
    Keyblade  
       Oct 23, 2017
    使用白色 UI 的话那些按钮都看不见了,是这样设定的还是 bug ?
    tomato3
        5
    tomato3  
    OP
       Oct 23, 2017 via Android
    @xshwy emmm....这个可以加上~
    misaka19000
        6
    misaka19000  
       Oct 23, 2017 via Android
    这个不是有现成的吗。。。

    hitokoto.cn
    misaka19000
        7
    misaka19000  
       Oct 23, 2017 via Android
    tomato3
        8
    tomato3  
    OP
       Oct 23, 2017 via Android
    @Keyblade 是给使用深色系的时候使用的 或者适合纯白色的颜色
    Keyblade
        9
    Keyblade  
       Oct 23, 2017
    @tomato3 #8 是哦你这么一说我想起来旁边有个改背景色
    tomato3
        10
    tomato3  
    OP
       Oct 23, 2017
    @misaka19000 是的 还有很多 你可以在“第三方 API ”模式中看到有这个来源。你也可以自己搭自己的接口,然后在这个客户端上用,比如说解析句子迷网站的句子或者哔哩哔哩的弹幕的跨域 API,然后写好你的 adapter,也能用这个网站播放。
    forestyuan
        11
    forestyuan  
       Oct 23, 2017
    字是竖排的,看着好累
    mogita
        12
    mogita  
       Oct 23, 2017
    发现一个 bug:
    打开首页,点「关于」,点「←」左箭头,点「关于」,点左箭头,点关于,点左箭头,白屏。有时三次后白屏,有时四次后白屏,Chrome 62 macOS 10.13 。
    tomato3
        13
    tomato3  
    OP
       Oct 24, 2017 via Android
    @ck65 这是动画库的正常现象,你得等它一个动画完成后在去点击其他操作,不然在动画期间他会让两个元素都作为离场元素设置为透明度为 0,就像在 macro tasks 中间插入了 macro tasks。我使用的是进出场组件,对动画过程无法精确控制,不能中途强制认为某个动画已结束,执行新动画。 开发过程中,FullPageCard 在右侧其实还有一个关闭按钮。点击关闭按钮可以很快的关闭这个页面,但如果场景切换过快,会导致页面动画倒放以及你说的页面全白。我又给每一个组件设置 key 为 Date.now()能够解决这个问题,但是这样不能重用实例,是个反模式。所以就去掉了关闭按钮,Date.now 也去掉了。让你切换页面的鼠标移动距离变大,这样就不会那么快切换页面了。

    但其实这个问题还是存在的,你在点我的收藏然后快速返回再进去几次,动画会倒放。
    Keyblade
        14
    Keyblade  
       Oct 24, 2017
    啊对了还有个建议
    要不要考虑横向的时候固定一下按钮的位置呢
    tomato3
        15
    tomato3  
    OP
       Oct 24, 2017 via Android
    @Keyblade 😂就是不知道该固定在哪儿啊。都不合适,只有等设计师出马了。PC 上已经可以用空格键来切换下一个了,如果你应用没更新,刷新一下页面就可以了。
    xingxing09
        16
    xingxing09  
       Oct 24, 2017
    很棒的网站 截了几张图 做壁纸
    tomato3
        17
    tomato3  
    OP
       Oct 24, 2017 via Android
    @xingxing09 谢谢~点 logo 可以全屏哦~现在句子不是很丰富,你可以发布自己喜欢的句子到自己的句集里,然后点击句集上的「加入来源」,将这个来源加入一个模式(没有的话新建一个,一个模式可以有多个来源),然后回到首页,在页面设置将模式改为你设置的模式。这样可以截取自定义的句子作为壁纸。
    shiny
        18
    shiny  
    PRO
       Oct 24, 2017
    思源宋体的效果堪称惊艳
    irainsoft
        19
    irainsoft  
       Oct 24, 2017
    无法访问此网站

    找不到 hitokoto.heitaov.cn 的服务器 DNS 地址。

    没有设置海外域名解析?
    loading
        20
    loading  
       Oct 24, 2017
    阅读习惯好累。
    BearD01001
        21
    BearD01001  
       Oct 24, 2017 via iPhone
    赞👍🏻
    lingtings
        22
    lingtings  
       Oct 24, 2017
    好漂亮
    tomato3
        23
    tomato3  
    OP
       Oct 24, 2017 via Android
    @irainsoft 😂是的。现在改回默认解析,可能十多分钟后可以访问
    jisibencom
        24
    jisibencom  
       Oct 24, 2017
    和我的站有一些类似,虽然没我的简单,但技术比我高太多。
    Patrick95
        25
    Patrick95  
       Oct 24, 2017
    很棒
    cyancat0525
        26
    cyancat0525  
       Oct 24, 2017 via Android
    看了一下很不错,一页一个才有意境
    stebest
        27
    stebest  
       Oct 24, 2017
    之前有人想把一言接入 live2d 的说,不知道后来怎样了。https://github.com/EYHN/hexo-helper-live2d
    jinzhe
        28
    jinzhe  
       Oct 24, 2017
    下载字体进度怎么做的?
    quietjosen
        29
    quietjosen  
       Oct 24, 2017
    适合展示读书笔记、书摘。
    tomato3
        30
    tomato3  
    OP
       Oct 24, 2017 via Android
    @jinzhe XHR2.0 的 process 事件。
    quietjosen
        31
    quietjosen  
       Oct 24, 2017
    点子不错。现在大段大段的内容,人都懒得读了。少,反而更容易被接受。

    参考你的创意,用户从 Klib 中分享精彩的书摘或读书笔记,这些公开的笔记生成一个广场,每次打开都随机抽选一条。不算抄袭吧?😂

    利益相关:我是 Klib 作者。
    Thiece
        32
    Thiece  
       Oct 24, 2017
    @tomato3
    @misaka19000

    我记得最早的一言是这个 http://hitokoto.us/ 然后作者弃坑停止维护了。
    zhanziyang
        33
    zhanziyang  
       Oct 24, 2017
    简简单单,也能让人眼前一亮!支持!
    tomato3
        34
    tomato3  
    OP
       Oct 24, 2017 via Android
    @quietjosen 😃请随意~ 好点子值得分享~
    SamWanng
        35
    SamWanng  
       Oct 24, 2017
    很好看,可以做个小程序啊。

    然后可以生成图片分享到朋友圈,附带二维码。
    woshinide300yuan
        36
    woshinide300yuan  
       Oct 24, 2017
    挺好的。
    xshwy
        37
    xshwy  
       Oct 24, 2017
    @tomato3 哈哈哈 这么快就添加上了啊 已经看到空格可以换下一句了
    tomato3
        38
    tomato3  
    OP
       Oct 24, 2017
    @Thiece 是的。不知道最近网站为啥不能访问。

    @SamWanng 没有考虑过做小程序。如果要生成图片分享的话,要自带截图的库文件,使用频率并不高,手机截图或者电脑截图不就可以了吗?分享的话,一个 url 不就可以了吗? hitokoto.heitaov.cn 暂时没考虑吸引用户,这是个小众应用。如果要考虑社交,我一个人不适合运营,还有监管问题。要么庸俗,要么孤独。
    quietjosen
        39
    quietjosen  
       Oct 24, 2017
    @tomato3 哈哈,我也就这么一说;真做起来,可没这么轻松。比如,监管风险。
    cattrace
        40
    cattrace  
       Oct 25, 2017
    不错,挺喜欢的,收藏了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5478 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 137ms · UTC 01:15 · PVG 09:15 · LAX 18:15 · JFK 21:15
    ♥ Do have faith in what you're doing.