V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Philippa
V2EX  ›  分享创造

分享一个疫情期间写的学英语 web

  •  
  •   Philippa · 2020-05-22 00:00:43 +08:00 · 1659 次点击
    这是一个创建于 1407 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前一段时间迷上了前端,所以疫情期间找业余时间用 js 写了个学英语的 web,方法是我自己平时看 YouTube 学习的办法,我感觉比较合适中高级和喜欢 shadow practice 的人。技术方面后端 Graphql ( Apollo Server + prisma2 ),前端是 Next.js(只有首页开了 ssr) + Apollo client + mobx-state-tree 。由于此前看到的众多不大好的事例,决定不开源(也不是什么高科技的东西)。此外还有更多想法和可以优化的地方,但可能受众太小了,目前没有计划继续这个 side project,打算迟点本地跑就行了。趁现在网站还活着分享一下看看大家的想法💡

    由于需要 YouTube,所以需要飞机,请自行准备。下面是一些截图,提供一个快速的指南。

    添加你喜欢的 YouTube Video 后,先过一遍视频,并添加视频中出现的不熟悉的单词和词组

    点击词汇列表并不会弹出释义,而是会跳到对应的视频片段。是的,我以前也是中学期间就看到过语言习得论的文章,语言学习关键是 context,上下文的连结,而不是背含义。若还是不记得,可以点击文本出现字典。

    根据你的词汇进行听写,确保学习质量再推进到下一个视频。否则看视频很容易是视频看完了,英语没学到。有点像买个 ipad 看书结果盖杯面的味道(都是借口)

    截图的地址是: https://cabylang.com/learn/w0ztlIAYTCU

    网站的首页是: https://cabylang.com

    第 1 条附言  ·  2020-10-28 14:32:02 +08:00
    项目正在重构,暂时关闭。
    20 条回复    2021-02-04 10:52:21 +08:00
    ps4512
        1
    ps4512  
       2020-05-22 00:33:53 +08:00 via iPhone
    做的不错
    falcon05
        2
    falcon05  
       2020-05-22 00:39:14 +08:00 via iPhone
    看上去不错的样子
    Philippa
        3
    Philippa  
    OP
       2020-05-22 01:44:44 +08:00
    @ps4512 谢谢

    @falcon05 谢谢,设计改过好多次,下次开 project 先找设计师
    cheung
        4
    cheung  
       2020-05-22 01:45:54 +08:00 via iPhone
    厉害
    seanxx
        5
    seanxx  
       2020-05-22 09:43:01 +08:00
    收藏了,等我听完 englishpod 再来尝试下
    hejingyuan199
        6
    hejingyuan199  
       2020-05-22 10:54:15 +08:00 via Android
    很有创意。我觉得很棒。
    字幕是利用它自动生成的吗?
    有的视频是直接有字幕的。

    我有点想法,如果一个用户在多个视频都收藏了某个单词,那会切到哪个视频呢?
    哈哈。要是能剪辑一下视频拼接起来,是不是更酷。YouTube 视频是可以下载的,用 ffmpeg 剪辑一下,或者别的 opencv 啥的。哈哈。
    hejingyuan199
        7
    hejingyuan199  
       2020-05-22 10:55:55 +08:00 via Android
    @hejingyuan199 楼主的技术结构我很羡慕。以后多多指教。多介绍下前端的这些技术面。不知道如何编辑自己的留言,所以回了两条。
    yuankui
        8
    yuankui  
       2020-05-22 11:25:40 +08:00   ❤️ 1
    看技术栈就知道楼主牛逼
    mara1
        9
    mara1  
       2020-05-22 12:21:51 +08:00
    @seanxx ,同好啊,我去年听完的。
    Philippa
        10
    Philippa  
    OP
       2020-05-22 19:14:31 +08:00
    @cheung 谢谢,你也有很多魔性作品啊
    Philippa
        11
    Philippa  
    OP
       2020-05-22 19:16:36 +08:00
    @seanxx
    @mara1

    我以前大学时也听了一年的 Englishpod,那时挺流行的?因为当年都是说是 voa 慢速常速这种,那个 news 实在太无聊了。
    mara1
        12
    mara1  
       2020-05-22 19:23:34 +08:00
    @Philippa, EnglishPod 还是蛮好的,我听第 1 期时候大半听不懂,需要对着文本,到 300 多期时候,已经可以听懂 90%了。

    现在我在听 All Ears English, 感觉也挺好玩的。
    Philippa
        13
    Philippa  
    OP
       2020-05-22 19:45:58 +08:00   ❤️ 1
    @hejingyuan199

    视频的字幕是可以自动生成和人工的。在用户加入视频页面两种字幕都认,可能使用者感觉自动字幕都很好,就没理由拒绝。后台的 pipeline 批量加就只加人工字幕,因为自动字幕很难判断其质量如何。

    后面那个 idea 很好,目前视频之间没有交换数据。切到的视频就是当前页面的视频,这个有这个想法,以后可能会加上,比如跨视频,做一个整合的跟踪,但那样后台我需要长期运行的 pipeline,考虑到成本,目前没做。现在前后端都是纯 serverless 部署的,没人访问情况下基本上除了数据库的费用其他都可以忽略。

    剪视频我要研究一下版权问题,我不确定那样可行。不过这是最理想的情况,前一天学过什么视频,第二天剪好就等点开一个个的过,那样效率最高,因为现在的设计都是视频之间是割裂的。

    技术这方面的话,前端这边 Nextjs,个人感觉和 create-react-app 区别很少,只是基础上多了 ssr 。另外是 ApolloClient 做 graphql 的 client 端,css 用了 tailwindcss,这个方便自己做设计,设计用的 Figma,几小时的教程就能速成。部署用了 serverless+aws lambda,为的是便宜。:)
    Philippa
        14
    Philippa  
    OP
       2020-05-22 19:47:46 +08:00
    @yuankui 哪里哪里,之前是做后端的,所以做出来还是能做出来,但技术很一般。
    iMusic
        15
    iMusic  
       2020-05-23 10:48:33 +08:00
    网站做的很棒,完全不像小作坊 /个人作品,感谢
    iMusic
        16
    iMusic  
       2020-05-23 10:57:49 +08:00
    邮箱注册有问题哈,确认地址是 localhost:3000 的,手动改成网站地址,验证通过。
    Philippa
        17
    Philippa  
    OP
       2020-05-23 18:57:00 +08:00
    @iMusic 谢谢!邮箱注册补了个 test case,谢谢提醒
    sooo
        18
    sooo  
       2020-05-27 17:16:34 +08:00
    感觉很好,先收藏
    HI101
        19
    HI101  
       2020-05-31 22:26:18 +08:00
    @seanxx 在哪获取的资源,能分享下吗?
    chocolatesir
        20
    chocolatesir  
       2021-02-04 10:52:21 +08:00
    请问楼主重构完了吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1174 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 18:18 · PVG 02:18 · LAX 11:18 · JFK 14:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.