囧克斯

本文是我在 VueConf 24 CN 的开场演讲稿，分享我和 Vue.js 的十年的故事。
文中截图来自我的幻灯片。另外我试着挑战了一下 Paper Mario 的主题风格，希望大家喜欢。

• VueConf 24 CN 官网：https://vueconf.cn/
• 在线幻灯片地址：https://jinjiang.dev/slides/my-10-years-with-vuejs/
• 演讲 B 站视频地址：https://www.bilibili.com/video/BV16W421R7ga/

一转眼，Vue.js 已经十周年了，这同时也几乎是我个人参与 Vue.js、参与开源项目的十年。

我和 Vue 缘分的开始应该是自己 2014 年在阿里内部创建的一个项目，名字如果没有记错的话叫 lib-noble。这个库算是一个 data observer 的 JavaScript 实现，后来我们管这种东西叫 reactivity API，再后来叫 signals。在我看来大同小异。写了这个库没多久，我就在 GitHub 上发现了 Vue.js，其中数据处理的相关设计和实现都跟我自己写的东西不谋而合。我当时的第一反应是，这个库比我写的好多了，而且还有很多其他功能，比如组件系统、模板编译等等。于是我就开始关注 Vue.js，并一路参与到了今天。

在这十年里，Vue.js 本身，包括团队，都经历了很多事情。我自己所经历的故事，已经出圈且被大家熟知或调侃的，也许就是自己在 Vue 的第一个 PR (只改了两个空格)、维护中文官网 (今年愚人节我们玩了个“威优易”的彩蛋)、创建了开源项目 Weex 并和 Vue 有一段时间的双向官方合作、以及在 Vue 的纪录片中出镜等等。相关的内容不打算赘述了。这次我主要想分享几则背后发生在 Vue 和我自己身上的小故事。尽可能还原一个更加立体的历经 10 年的开源项目。

关注我的人可能已经知道我最近作为常驻嘉宾加入了一个叫做《代码之外 Beyond Code》的播客节目。

• 官网
• Apple Podcasts
• 小宇宙
• Bilibili (视频版)
• YouTube (视频版)

这里简单分享一些我参与《代码之外》的故事：

水一篇。这周集中把博客由 Hexo 迁移到了 VitePress，顺便把主题也换了。简单记录一下迁移过程。

(本文写于 2022 年 11 月)

大约一周之前，我突然接到父母亲的消息，说九十多岁高龄的奶奶身体突然变得非常不好，感觉很难坚持了，虽然立刻飞回去不太现实，但还是希望可以安排个远程视频，见一面。

我非常清楚这意味着什么，这一面就是最后一面了。

隔天早上，我们安排了视频见面。我们上一次见面也是视频见面，当时我们还能相互交谈个几句。这一次，奶奶的身体靠在家人身旁勉强可以坐起来，除了睁大眼睛看着屏幕对面的我，已经动弹不得，也说不出话了。我不确定她还能不能听到我说话，总之我努力说了很多。那一刻，自己心里特别难受——一是不愿看到这一幕，二是悔自己没有办法来得及回去亲自看看或身体力行帮着做点什么。

除了伤感，我决定写一点关于我奶奶的东西，让更多人认识和记住她。

介绍要给小工具给大家：zhlint

这个工具可以帮助你快速格式化中文或中英混排的文本。比如常见的中英文之间要不要用空格、标点符号要用全角字符之类的。

看上去这工具似乎和自己的工作和职业关系不大，但其实也是有一定由来的。

为大家介绍一个刚刚开源，但其实自己已经使用超过 5 年的小工具：vue-mark-display。你可以用它把 markdown 格式的文本转换成幻灯片并在浏览器中播放和控制。

开发背景 ​

我自己工作中经常需要准备各式各样的幻灯片，所以逐渐觉得用 PowerPoint 或 Keynote 来做幻灯演示略微显得有些笨重。这体现在板式和样式设计、文件大小、打开、编辑和播放的方式等很多方面。加上我从事的就是前端开发的工作，对语义化的信息格式非常敏感，深刻的认为，那些你表面上想编辑的“样式”其实是信息的“类型”+“配套的样式”罢了。所以决定用 markdown 外加自己扩展的一些小功能，来撰写幻灯片，并研发了相应的工具，也就是最近开源的 vue-mark-display。

最早这个工具是用 vue v0.10 写的，当时源代码里还有像 v-attr, v-repeat, v-transition 这样的“古董级”语法，而且还在依赖 Zepto。最近准备开源这个项目的时候，我也基于最新的前端知识和技能进行了重构。所以大家看到的是比较新的版本。

其实在此之前，我也写过很多类似的小工具了，但都没有坚持使用很久，这次开源的 vue-mark-display 我差不多持续使用了 5 年。经历了差不多这 5 年时间，准备过了无数的幻灯片和公开演讲，我想说基于 markdown 以及这些小功能撰写幻灯片真的很酷。如果你也有兴趣试一试用 markdown 为主体来撰写自己的幻灯片，那么不妨了解并体验一下 vue-mark-display。

另外，事实上，如果只是想使用它，你是不需要学习任何关于 Vue 的知识的 —— 文章最后会提供一个不需要 Vue 知识的开箱即用的办法 —— 所以它也对 React、Angular 等社区的同学友好 —— 只要你会写 markdown 和简单的 HTML5 代码，你就可以使用 vue-mark-display 制作出非常精美的幻灯片。

如题，今年陆续参加了一些技术会议，有些新的感触，尤其是今年第一次尝试多参加了一些境外的会议，有在 HK 的，有在 TW 的，有在 JP 的，感受很不一样，当然也参加了年初的厦门 CSSConfCN 和刚结束的 VueConfCN。另外网上越来越多人在讨论或是质疑参加技术会议到底有什么意义、好的技术会议应该是什么样子的，我也以写这篇博客的方式参与一下。

先说分享一些自己参加 VueConf Hangzhou 的流水账见闻。

上周末作为一名分享者参加了 CSSConf CN，在厦门。

其实除了自己的分享内容，这次我是带着很明确的目的参会的，因为有两个主题我特别关注，就是：

• 第一个：响应式的组件
• 第三个：从 API 的角度看组件的 CSS

(两个分享的标题都被我稍微“演绎”了一下)

这两件事都是自己工作上正在特别关注的事情，一方面，我们很少从 API 的角度去理解一个组件的 CSS 该如何组织和管理，所以这个标题就特别吸引我，另一方面响应式组件的分享者是来自新加坡的前端工程师 Zell (我个人一直觉得国内的响应式都是在瞎搞，看了很多周围团队都没有认真做这件事，甚至不相信响应式的价值，从设计师到工程师)，因此非常珍惜这个机会能近距离学习一些国外的同行们是怎么看待和实践响应式的。

所以尽管我们团队的差旅经费已经用完了，还是决定自费来厦门近距离交流一下。

现在证明这次真的不虚此行。

当然参加这种线下活动，“面基”的目的是一定有的……恩，这个不值一提。

译自：https://blog.prototypr.io/the-future-of-web-forms-4578485e1461 Matt West 的 The Future of Web Forms

license: CC BY-SA 4.0

---

如何通过会话式的界面让数据收集更加人性化。

Web 表单是从纸质媒介进化而来的。即设计一组标签和线框来限制输入，同时让数据处理变得跟容易。

毕竟，表单的目的是收集数据，以便执行操作。为了执行该操作，我们需要把收集的数据统一汇总。我们在界面上设计了一些约束以便达到统一汇总的目的。表单旨在符合流程上的需求，而非用户本身。

表单经常给人的感觉是冷冰冰的，没有人情味。因此，我们得到的回应往往也是冷酷和不人性的。我们不深入细节，如果一个朋友问你相同的问题，你可能会多一些回复，但这是一台电脑。他想要的只是数据，别的不在乎。就好像你在跟人说话但是人家并没有在听。为什么没人听的话说出来会让人觉得烦呢？

Image by Ken Teegardin.

和许多数字化的东西一样，表单已经被之前的形态严重影响。我们之所以往线框里填东西是因为我们以前在纸上就是这么画的。