No.22 和技术输出破圈的云游君聊前端学习、个人感悟和产品背后的故事

前端主播：辛宝Otto、刘威Franky、小白菜嘉宾：云游君本期官网网址 webworker.tech介绍第 22 期播客我们邀请到了云游君。【嘉宾信息】云游君是一位年轻的大佬，作品很多，之前在 element-plus 认识的，之前做的夏日空调、隔离食用手册、B站填报志愿锦囊 多次破圈，从小玩具到万众瞩目的实用工具，相比有自己的一番心路历程！公众号 #云游君万万没想到这是一个《关于一个差点成为飞行员的大触因为电脑太烂转行成为程序员的故事》。云游君的工作桌面《Web Worker》是几个前端程序员闲聊的音频播客节目。节目将围绕程序员领域来瞎聊，聊资讯、聊职场、聊技术选型...... 只要是和 web 开发有关的都可以聊。因为主播是前端程序员目前会以前端为视角切入。wx 粉丝群请加 Otto 微信: xinbao965时间轴01:20 正片开始01:45 云游君的自我介绍，在 element-plus 的维护，做过的小作品 夏日小空调 被人民日报报道的隔离食用手册等 ，聊背后的小细节。09:48 静态网站CDN 被攻击的背后故事，github - 又拍云 - cloudflare15:10 作为一个应届生，是怎么走上前端这条道路的。从电脑带不动 Unreal 到前端三大件，到php，到vue等。主播们聊起了初学前端的兴奋感，以及学前端（可能）比学算法学大数据省钱哈哈哈23:30 做这些产品背后的想法，云游君的思考30:55 主播们听完云游君背后思考后的感受。35:00 云游君做的 明日方舟 CSS框架，从设计到感悟。39:00 目前在做什么，想做什么。从博客主题hexo-theme-yun 到 文字冒险游戏框架ADV.JS，以及 静态博客框架Valaxy 的开发。我们兴奋地看起了代码。42:35 对未来的规划和畅想。44:20 作为年轻的程序员有什么过来人经验。比如越早知道 github 越好！信息获取途径、多尝试等。47:40 主播们听下来的感悟。线上文字采访部分你是谁，在网络上做了什么，在哪些地方可以找到你，比如 github 知乎 公众号等Hello，我是云游君。一个兴趣使然的开发者，热爱开源，Element Plus 团队成员，写过一些奇怪的东西，便携小空调、隔离食用手册，也在写一些辅助工具、项目和小游戏。希望能创作出可以成为他人回忆的事物。 博客：云游君的小站 www.yunyoujun.cn` www.yunyoujun.cn GitHub: YunYouJun 哔哩哔哩：云游君 公众号：云游君 知乎同名，但是没有啥内容……现在在做什么在支付宝写蚂蚁庄园业余在写一些开源项目，有很多想做的事情还没有做，目前在写 Valaxy 一个静态博客框架、ADV.JS 面向未来与前端的文字冒险游戏引擎，做一个计划中的小游戏，学好 Rust、图形学基础和 WebGL，写轻小说，画插画，做视频，写博客和公众号。总体来说，想的太多，做的太少。与其说是在做什么，不如说是未来想做什么。前端学习的经历和坎坷我的家乡是一个小镇，尽管家中早早有了电脑，但在家家户户开始联网之际，我们家仍旧秉承着克制。因此严格意义上来说，我直到大学期间才开始接触编程。并且直到大一下学期方说服了父母为我购置笔记本电脑，并且由于对电脑硬件一知半解，和父母在电脑城购买的电脑性能也只能说差强人意。那时，出于高考的曲折，尽管是我主动选择的专业，但真正学习时，我对其本身并没有很强的归属感，对于课上老师照本宣科读的各类名词也毫无兴趣。我仿佛总觉得自己有一天会离开这里，并在大一大二将自己的热情放在小说、制作海报、视频、辅修动画上。不知道该说是机缘巧合，还是发现了课堂外的兴趣，我仍旧放弃了大一的转专业和大二的转校的机会。我预感可以在这条路上似乎更能实现自己的某些想法，并靠此养活自己，而不是其他兴趣使然，而很难自力更生的爱好。提到学计算机，我想总有一部分人或多或少怀揣着制作一个独立游戏，并借此暴富的梦想。我也是其中之一。我尝试用各类语言（C#/Java） 做过一两个小游戏，但也许是学艺不精，总觉很难又好又快地做出自己真正想要的效果，实现也不够优雅。由于自己平时并不擅长与人交流，遇到问题也只会闭门造车百度问诊，直到此后的自己回顾起来，才发现走了诸多弯路，只觉光阴似箭、覆水难收。譬如使用 C# 时选用了微软后续不再维护的框架 XNA 而非 Unity，听着疲惫不堪风扇嗡嗡作响的笔记本，对着 Unreal 望洋兴叹。总之，兜兜转转，我终于找到了一个最低成本又有趣且有无穷可能性的领域，前端。而我觉得我选择这条路有三条理由，其一便是它需要的资源最少，我那明明正值壮年却已如风烛残年的笔记本也能完美运行环境并开发，二来广阔的学习资料低成本（开源+免费），三来所见即所得有即时的成就感反馈。而接触前端的原因，也是因为学校里课程设计有个搭建系统的相关内容，最初是用 Dreamweaver，到用 Sublime 写 JQuery，再学了 PHP 的框架 Laravel，了解到 Vue，开始 Element 一把梭，随后是 Nuxt，工作时会写些 React，也算是走了一遍前端史。后来也越来越发现按部就班地学习学校课程是不行的，发现 GitHub 便成为了我的分水岭。我觉得自己很难纯粹看视频去学一个东西，就像上课很难认真听讲这件事一样，但我很喜欢在写项目的过程中去学习。我的第一个有两位数 Star 的项目是 cocos-creator-joystick，诞生于自己某个折戟的小游戏项目，我在 Cocos Creator 论坛中分享了它，意外地收到了很多收藏和鼓励，并成为了我第一个破两位数 Star 的项目。搭建相关网站时，尝试做了一个 Element Theme Ink 来定制自己的主题，并得以进一步学习了 Sass 和 Element 的源码。观「SAO」与「SAO Utils」有感，想做一个 Augma 组件库并以此练手，顺带深入学习了一下 Element Plus 的相关组件实现，提了些 PR 有幸被邀请加入团队。莫名奇妙爆火的便携小空调源于一次 React + CSS + 状态管理练手。回想起来做了很多好像是无用功的东西，但意外地最后又好像不是完全无用。找实习投简历做了 web-resume，玩明日方舟+练习 CSS 写了 ak-ui，为了搭建自己的博客做了主题 hexo-theme-yun（我的第一个破百 Star 项目），后续则是在做自己的静态博客生成器 valaxy。因为有了群和诸多网友，做了QQ 群机器人 mirai-ts + el-bot。切换 npm 镜像的 nnrm，学 Web Components 做的 wc-github-corners，回忆起来，几乎每个项目的诞生都有其故事和渊源。之后很想在 B 站做一个系列，用每个视频讲一讲每个项目背后的故事和实现过程。咕参与开源有哪些产出，有什么感悟，来一波 stargithub.com 项目就不一一列举了。目前想主力做的两个项目是 Valaxy 和 ADV.JS。感悟就是持之以恒、目的驱动、在过程中学习成长。未来打算做什么，方向？作品？正如上文所言，想做一些讲讲项目或者开源故事的视频投稿。又或者是做一个小游戏，并借此暴富。（不忘初心了属于是）以及想开一个自己的工作室（目前定作云乐坊），分享一些自己的工作流及开源，做一些有趣的事情。（还有梦想借此养活自己）在博文「云乐坊工作室的成立与缘起与有关的话」www.yunyoujun.cn 写了一些自己今后的想法我觉得自己是一个物质欲望相对较低的人，想尽量摆脱做一名螺丝钉，并有机会做一些自己想做的事情。做的东西破圈什么感觉，比如被人民日报报道食材做饭的小程序首先肯定是开心，然后也会因此觉得有一些压力和责任感，比如一定要维护下去。然后就是觉得自己有点走运，比如小空调，其实时至今日我也没有明白它为啥会毫无推广的火起来。当时同时我也希望能够创作出其他更有意思更有用更值得分享的东西，而不是在这里止步。做了这么多技术工具，有什么技巧，怎么规划的正如开头所言，我是一个兴趣使然的开发者。我做事可能基本没有什么规划。我觉得这也是我的一个缺点。当我需要到什么，或者想要去写什么的时候，便会去做它，如果做它的过程很开心，很流畅，我可能会废寝忘食地想要完成它。所以我一般会有一个想要将其应用出去的动机去驱动自己。围绕技术产出，代码或者产品，有哪些收获感受，顿悟时刻，像感谢的引导老师之类的列几位开源社区的引导老师。 Yang Yi github.com 评阅了我 GitHub 第一个 PR（Element），而那次合并绝对是我参与开源社区的一个契机、鼓舞以及开始。我有时会想，如果当时 PR 被关闭了，是否会对自己产生之后的蝴蝶效应呢？ Jeremy github.com 因为此前的头像是只鸡，我们都叫他鸡哥，Element Plus 灵魂人物，也是我真正意义上大量参与大型项目协作，从他身上学到了很多经验。 antfu github.com 可怕的生产力，活跃在许多项目之间，我的开发效率因此受益，并从中学习到了一些项目的架构开发经验。我的毕设导师栾老师在做毕设时给了我很大的自由空间，并在我可能退缩之时鼓励我尝试，而她的临别赠言-希望我可以把握住机会，我记忆犹新。我是一个在现实里不怎么擅长社交的人，有遇到一些犹豫不决的事情和机会时，我可能常常优先选择回避。而线上则是能打字的绝不语音，能语音的绝不视频。但偶尔我会想起这句话，并尝试做一些本可能会放弃的事情。与此前在「刀剑神域」中听到的台词如出一辙，「与其不去做而后悔，不如做了之后再后悔」。有时我会得到不错的结果，有时也可能毫无成效，空费时间，但至少不会总是在之后为其后悔。想的太多，做的太少。恰逢年末，回顾起自己，我决定给出这样的年终总结。幕后工作策划 辛宝剪辑 辛宝时间轴 辛宝文字校对 无上传发布 辛宝