这是一个创建于 1647 天前的主题，其中的信息可能已经有所发展或是发生改变。
之前一段时间迷上了前端，所以疫情期间找业余时间用 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
项目正在重构，暂时关闭。
 |
1
ps4512 2020-05-22 00:33:53 +08:00 via iPhone
做的不错
|
 |
2
falcon05 2020-05-22 00:39:14 +08:00 via iPhone
看上去不错的样子
|
 |
4
cheung 2020-05-22 01:45:54 +08:00 via iPhone
厉害
|
 |
5
seanxx 2020-05-22 09:43:01 +08:00
收藏了,等我听完 englishpod 再来尝试下
|
 |
6
hejingyuan199 2020-05-22 10:54:15 +08:00 via Android
很有创意。我觉得很棒。
字幕是利用它自动生成的吗？ 有的视频是直接有字幕的。 我有点想法，如果一个用户在多个视频都收藏了某个单词，那会切到哪个视频呢？ 哈哈。要是能剪辑一下视频拼接起来，是不是更酷。YouTube 视频是可以下载的，用 ffmpeg 剪辑一下，或者别的 opencv 啥的。哈哈。 |
|
7
hejingyuan199 2020-05-22 10:55:55 +08:00 via Android
@hejingyuan199 楼主的技术结构我很羡慕。以后多多指教。多介绍下前端的这些技术面。不知道如何编辑自己的留言，所以回了两条。
|
 |
8
yuankui 2020-05-22 11:25:40 +08:00  1
看技术栈就知道楼主牛逼
|
 |
11
Philippa OP |
 |
12
mara1 2020-05-22 19:23:34 +08:00
@Philippa, EnglishPod 还是蛮好的，我听第 1 期时候大半听不懂，需要对着文本，到 300 多期时候，已经可以听懂 90%了。
现在我在听 All Ears English, 感觉也挺好玩的。 |
|
13
Philippa OP 1
@hejingyuan199
视频的字幕是可以自动生成和人工的。在用户加入视频页面两种字幕都认，可能使用者感觉自动字幕都很好，就没理由拒绝。后台的 pipeline 批量加就只加人工字幕，因为自动字幕很难判断其质量如何。 后面那个 idea 很好，目前视频之间没有交换数据。切到的视频就是当前页面的视频，这个有这个想法，以后可能会加上，比如跨视频，做一个整合的跟踪，但那样后台我需要长期运行的 pipeline，考虑到成本，目前没做。现在前后端都是纯 serverless 部署的，没人访问情况下基本上除了数据库的费用其他都可以忽略。 剪视频我要研究一下版权问题，我不确定那样可行。不过这是最理想的情况，前一天学过什么视频，第二天剪好就等点开一个个的过，那样效率最高，因为现在的设计都是视频之间是割裂的。 技术这方面的话，前端这边 Nextjs，个人感觉和 create-react-app 区别很少，只是基础上多了 ssr 。另外是 ApolloClient 做 graphql 的 client 端，css 用了 tailwindcss，这个方便自己做设计，设计用的 Figma，几小时的教程就能速成。部署用了 serverless+aws lambda，为的是便宜。：） |
 |
15
iMusic 2020-05-23 10:48:33 +08:00
网站做的很棒，完全不像小作坊 /个人作品，感谢
|
|
16
iMusic 2020-05-23 10:57:49 +08:00
邮箱注册有问题哈，确认地址是 localhost:3000 的，手动改成网站地址，验证通过。
|
 |
18
sooo 2020-05-27 17:16:34 +08:00
感觉很好，先收藏
|
 |
20
chocolatesir 2021-02-04 10:52:21 +08:00
请问楼主重构完了吗
|
Select Language