type
status
date
slug
summary
tags
category
icon
建议先逛逛我制作的网站再来看这篇 blog。
一、前言
原本我就对可视化很感兴趣，自从订阅了很多关于设计和 web 技术的 newsletter 之后，我接收到了更多关于可视化的资讯，我越发期待能写出属于自己的网站。
在 2021 年 11 月 16 日，老板带我们大学城校区的学生到南海校区参观，当天我还发了一条微博。在回程路上，老板问起我的微信头像是谁？以及为什么我的微信名叫做何志武。我回答说头像是《重庆森林》里金城武饰演的何志武，所以微信名也用了何志武。老板说不知道这部电影。这让我想起入学不久，我刚刚搬进实验室工位的时候，师兄也问过我同样的问题，我回答了之后，师兄也似懂非懂地点点头。两件事结合起来，让我有了一个想法，我玩那么多个社交网络平台，能不能有一个网页让大家知道我头像的寓意呢？
再加上选课的时候，我注意到有一门课叫《高级程序设计与软件工程》，查看了课程介绍确认课程的确与 web 技术相关。
咦~事情变得有意思起来了！
如果选了这门课，不就能通过课程逼迫自己学习 web 技术进而完成网页吗？如果顺利的话，既学习了 web 技术，又能通过制作的网页让大家知道我头像选择的原因，说不定还能顺便制作另一个展示我个人 blog 图标的网站呢！
二、期望
在使用 Notion 搭配 Vercel 发布 blog 成功之后，我发现原来可以有工具可以不用自己搭建服务器和购买域名就能发布网页内容的，没错，你正在看的这篇文章就是这样被你看到的。
而这，也让我对将要制作的网站有了几个期望：
- 网站必须能通过链接在公网打开
- 项目要免费开源
- 网站必须至少提供深色模式
- 必须使用 React 和 Vue（借此机会学习两个框架）
三、学习
（一）JavaScript
开始上课之后老师在第一节课就让学生讨论期末课程作业的选题，如果就为实现 avatars & favicons 展示功能的话似乎并不高级，但是也还行，挺有趣的。
给我上课的是给学校开发过学生信息管理系统的唐老师，我本科的时候上过他的 C# 和 .NET 课，还好这次老师没有规定技术栈。我没有资格说 .Net Framework 不好，但是我之前的作品最终看上去实在不漂亮，而且似乎 .Net 也的确不是现在主流的 Web 技术。
其实我在本科的时候就已经学过 HTML 和 CSS，这次为了赶工期直接放弃复习，直接从 JavaScript 开始学。大概是一个星期吧，所有空闲时间都在阅读 MDN Web Docs，也算大概了解 JavaScript了。
值得一提的是，MDN Web Docs 的翻译志愿者在文档里留下了很多彩蛋！
出于这些以及其他原因，我们建议您在代码中尽可能多地使用let，而不是var。因为没有理由使用var，除非您需要用代码支持旧版本的 Internet Explorer (它直到第 11 版才支持let，现代的 Windows Edge 浏览器支持的很好)。
由 Mozilla 基金会支持的 MDN Web Docs 竟然在文档里的很多处地方都大力赞扬 Windows Edge，只是偶尔才隐晦推销一下说”我们的 Firefox 也很不错哦！“这种互联网开放精神太难得了！
在讨论前最后再改进一波。
就像 HTML 和 CSS，JavaScript 代码中也可以添加注释，浏览器会忽略它们，注释只是为你的同事（还有你，如果半年后再看自己写的代码你会说，这是什么垃圾玩意。）提供关于代码如何工作的指引。注释非常有用，而且应该经常使用，尤其在大型应用中。
如果你的项目需要支持年代久远的浏览器，那么使用XHR可能会更爽一些。如果你的项目比较激进而且你根本不管老版的浏览器吃不吃这套，那就选择Fetch吧老铁。
其实cookie也没什么好说的，document.cookie一把梭就完事了。
不过我并不打算在 JavaScript 这一个中间步骤中太过深入，订阅的各方信息源都告诉我，现在几乎没有人单纯地使用 HTML + CSS + JavSscript 三件套写网页了。React 和 Vue 作为最流行的前端框架之其二，几乎成了开发网站的首选甚至是默认选择。甚至连 MDN Web Docs 也是 Powered by React。
（二）Vue
首先学习的是 Vue，不仅仅是因为它“易学易用”的特性，更重要的是 Vue Mastery 提供了官方的教程。Vue Mastery 的好处是它是正儿八经的的 official，内容言简意赅，但缺点是不少课程需要付费，不过还好有学习网站 bilibili。
也是在 Vue Mastery 的课程中我了解到了 JSONPlaceholder，这给我的后端数据存储提供了崭新的思路！具体细节会在后文的“后端”章节进行介绍。
（三）React
在简单学了 Vue 之后感觉时间还有充裕，那就顺便把 React 也学了吧。
刚开始使用 create-react-app 构建应用的时候还挺兴奋，页面是我喜欢的深色模式！如果顺利的话，同一个应用使用 React 和 Vue 分别构建，不就完成了浅色模式和深色模式吗？Nice！
不过当我还沾沾自喜，把在 Vue 项目中的 HTML 代码复制到 React 项目中之后，我就傻眼了。项目在 Class 和 Style 附近疯狂报错，满屏幕的红色波浪线。查询之后原来 Class 要用 ClassName，Style 要用
{{}}并使用小写驼峰命名法，算了算了，原来两个框架之间有这么显著的差异，还是老老实实先找一节 React 的课程上吧。四、工具
（一）UI 框架
虽然早已听闻 Bootstrap 的大名，但是觉得我要通过 Vue 和 React 分别构建 profile pictures 和 favicons 展示的网站，如果全部都用 Bootstrap 的话也太无聊了吧！
还好发现了下面这个网站。
网站统计了最流行的 React UI 框架和最流行的 Vue UI 框架，虽然距离上一次更新已经一年多了，但是某种程度上也有一定的指导意义，从排行榜里面挑出喜欢的就好。Well done！
（二）后端
这里给不太了解 Web 技术的朋友不那么严谨地介绍一下，前端顾名思义就是打开网页之后你看到的一切，而后端可以理解为如何存储数据和在数据库中处理数据。
在学了 Vue Mastery 的课程之后，我就决定使用 json 格式存储数据了。首先因为网站需要的数据并不复杂，网站可以简单理解为投票网站，所以要存储的数据大致是票数、相关的介绍等，用 json 完全可以满足需求。再加上 Vue Mastery 课程中教了如何使用 Axios，我能快速完成功能开发。
而且时间有限，我还要完成原本的学习任务，再者我可以算是 learn from scratch，还是先关注我最喜欢的可视化实现，先把功能实现再说吧。此外，最开始了解的部署的工具 Vercel 只提供对前端的支持，关于 Web 技术我还是新手，对相关的工具还不了解，直到晚些才知道 Render 提供了免费的数据库服务，而且通过使用 Waline 搭建评论区才知道了有如 LeanCloud 等免费的后端服务提供商。
说回我现在使用的 json，美中不足的是 JSONPlaceholder 提供的是假的（fake）api，也就是说，对数据库链接的 Post、Put 等等操作虽然会返回 success 的 reply，但是真实的数据其实是没有改变的。说人话就是用户在网站上一顿操作猛如虎，一刷新，一切变回原样。
那么就需要另外寻找工具了，可惜的是搜索的时候 json 关键字很容易引导搜索引擎给出关于 json 操作的搜索结果，而且很多有好内容的 blog 的 SEO 做得并不好，导致其淹没在了 CSDN 的很多注水文章之中。不过还好在已经停止运行的 jsonbox 的 Github Issues“Any alternative after the termination of service jsonbox.io ? #82”中发现了替代品 JSONBIN 和 Krates。
1. JSONBIN
已放弃！原因就是其只有 10000 次免费操作限制。不过它页面很直观，操作示例也给得很全面，不但给了 Python request 的操作示例甚至还给了 JavaScript 的操作示例。我通过使用 JSONBIN 确认了代码无误后，再迁移到 Krates 只需简单修改就好。
2. Krates
很棒的工具，优缺点都很明显。
优点：
- 免费！
- 当同一个 IP 短时间内频繁访问的时候，会对其进行限速，也算变相网络安全保护了。
缺点：
- 应用无登陆无账户。过一段时间再上 Krates 的网站会发现页面空空如也，如果之前建立的“Database”没有把 link 和 key 等信息记录下来的话，那么这个“Database”就没了，有点像 Crypto 的钱包。
- 只提供 curl 的示例，还好之前用过 JSONPlaceholder 和 JSONBIN，通过对两者的使用熟悉了 Axios，不然十分劝退。
（三）评论
其实引入评论系统也是受 blog 搭建的启发，比如我在使用的 Nobelium 和 NotionNext 博客生成器，都对多个评论系统进行了支持，如 Giscus、Cusdis 等，但是经过查阅，发现 Gitalk、Utterances、Giscus 都需要 Github 登陆才能发表评论，这样的限制也太高了。
还好，在搜索过程中，我发现了这篇 blog：
文章讨论对比了各大评论系统，经其介绍和推荐，我决定使用 Waline 作为网站的评论系统，一是因为 Waline 不用 Github 登陆即可评论，这也是最重要的原因；二是因为 Waline 官方提供了 npm 包能很方便地在项目中使用，并且还提供了详细的使用指引。
不过在阅读了 Waline 的贡献者怡红公子阐述自己的评论区被恶意刷屏的文章之后，我发现即使是项目的创始人，也有可能在自己建立的评论区受到网络暴力，真是如《第三方评论系统之我见》所引用的：
我向来是不惮以最坏的恶意，来推测中国人的。——鲁迅「纪念刘和珍君」
于是，我决定对评论区做一定的限制。在允许匿名评论的前提下，我打开了评论的审核机制，所有在网站的评论都必须经过我的审核通过才能显示在评论区。如果后续发现仍会有大量恶意评论涌入，我将禁止匿名评论。
（四）部署
有了搭建 blog 的经验，再加上 Vue Mastery 课程的教学，决定使用 Vercel 部署使用 React 搭建的网站，使用 Render 部署使用 Vue 搭建的网站。
Vervel 是真的好用，可惜只支持前端的项目。而 Render 虽然提供了 Vercel 所没有的 PostgreSQL 和 Redis 数据库服务及其他 Web 服务，但还是要吐槽一下。
首先是 Render 没有深色模式，虽然不是什么大问题，但是从 Vercel 切换到 Render 的时候，一瞬间从漂亮的深色模式切换到白晃晃的浅色模式，的确眼睛不太舒服。其次是项目的域名在项目创建之后就不能改了，想要更改就只能新建一个项目，这也太反人类了吧。而且 Render 在国内的访问速度不太友好，包括 Dashboard 和项目的链接。
五、反馈
五一劳动节假期，我让一位从小一起长大的 Ines 帮忙体验一下我网站的介绍和网站本身，并给予些意见。Ines 硕士毕业于伦敦艺术大学，是一位 UX 研究者和设计师。Ines 的主页：
不出所料，介绍和网站都有非常多的问题，让我庆幸的是，绝大部分的问题都是我在 code 或者写介绍的时候就知道这里会有问题，但可惜的是即使是知道会有问题，但是我还是这么就着错误的路线进行下去了，真是可笑。
问题包括但不限于：
（一）设计和排版十分难看
这真没办法，我真的尽力了，让我实现功能似乎还行，但让我设计真的容易“Yuck！”
在一开始我还尝试过使用 Figma 或者 MasterGo 设计原型之后再通过代码实现，可是发现这也太难为我了，在设计应用上的设计原稿连我自己都看不下去，还是直接从代码入手吧。由于我是借助 UI 框架构建的网站，再加上本人能力有限，所以我能做的大概就是对不同组件的“排列组合”。要说网站遵循了什么设计规范体现了什么设计理念，我可不敢苟同。而且在我看来，功能的实现肯定是要优先于设计的质感的，虽然两者其实并不矛盾，但是考虑到我的水平，必须要进行取舍了，虽然在 Ines 看来可能有不同意见。
不过，好像现在的设计和排版还行？
（二）网站使用说明模糊
这点我自己也十分承认。我让几位硕士同学体验了一下网站，他们都对网站的使用感到无从下手，尽管诸如点赞、切换图片显示、向下滚动页面、点击 About 等操作在我看来是显而易见的，原来产品经理的存在是这么重要。
而且我的硕士同学都对 avatars、profile pictures、favicons 感到疑惑，不知道这些名词代表什么，尤其是 favicons，所有体验过的同学都表示是第一次听说。但是这些东西真的挺难用语言描述清楚的，每次我都是马上打开一个标签页，用手指着告诉我的同学，“看，这是 favicon，这是 profile picture。”同学才会恍然大悟。
感谢 Ines 的建议，现在我把网站的操作指引设置为打开网站时以弹窗的方式进行显示，而对 favicons 的介绍则以图片的形式展示。
是不是直观多了？
（三）介绍语句不一致
这就是我完全没想到的了，在我受到过的所有英语教育中，包括雅思和初高中的英语课，老师都是建议要尽量呈现更多不同的词句变化，但现在 Ines 看来，不同的介绍应该尽量保持语句的一致性，这样才能给予用户好的体验。
仔细想想，对呀！考试的时候，作文都是写给改卷老师看的，尽量多的词句变化体现的是我的英语能力，但是说白了，这网站可以算是一个产品，受众是用户，没有人愿意看到一个满是定语从句的页面，包括我自己。
（四）介绍语句不能包含与情感相关的词
原因出在这副图片的介绍：
关于这副图，我写到：
DINGYI considers this a little bit boring in this newsletter.
虽然这个头像生成器我的确是从 DEX 周刊这份 newsletter 中知道的，而我也只是引用了主理人 DINGYI 的原话并翻译成英语。但是 Ines 说，网站可以算是投票网站，但是介绍中已经写出的“boring”会对用户产生心理暗示，会影响用户的公正投票。
（五）链接设计不规范
比如关于 Chinese Red 这个颜色，我原本这样介绍：
I know this colour from this video.
虽然方可成老师也喜欢这样的链接引入方式，比如在《新闻实验室》中他写到：
前两天还看到一种神奇的说法，来自兔主席。他在文章中说，“主张‘人不可能胜天’、接受‘躺平’或‘共存’的人，实际上其实已经成为COVID-19病毒在人类社会里的‘代理人’（agents）：他们在代表COVID-19‘发声’，呼吁人类社会接纳COVID-19。”
但如 Ines 所建议，把链接插入完整的网站名称中会更直观。比如：
这是我的 newsletter 《驯鹿漫游》。
六、反思
（一）有啥用？
其实说白了，我制作的网站其实和我的学习或者说高大上一点，我的科研任务，一点关系都没有，它们只是我自己的一点试验和学习成果，只是我的一项课程作业罢了。
但是当看到我的网站在 Vercel 和 Render 部署成功，看到 Vercel 首次部署成功网站显示的撒花，收到 Successfully deployed 的通知邮件，首次点进公网链接成功访问自己的网站，看着内容正确加载，看着自己的沙发评论正确显示在评论区的时候，我由衷地感到兴奋、骄傲和自豪！
但是就在开发进行到一半的时候，我开始问自己，这东西做出来到底有什么用呢？由于从本科开始，父母一直会以“这有什么用？”来询问我的学习情况，所以受其影响，我似乎逐渐变得功利，“有没有用”貌似逐渐成了评判事物的最重要甚至是唯一标准。至于事物有没有给我带来快乐，有没有让我感到兴奋、骄傲和自豪，只是一些丝毫不在评判范围内的无关痛痒的无聊考虑罢了。好残忍，好绝望。
所以到了开发后期，即使所有的功能已经过我和几个硕士同学的测试，我还是不敢分享出来。我无法用“它们能展示我的社交头像和网站图标”以及“这个东西给我带来了快乐并且它让我感到兴奋、骄傲和自豪”来说服心中举着“这有啥用？”牌子的小人。但也就是那段时间我听了 Struggle with me 的一期播客，里面关于如何判断有没有用的讨论让我印象深刻。
五一劳动节放假回家，对父母关于有用没有这件事大发牢骚之后，发现父母早已不用“有啥用？”来衡量我的事情了，我是那么普通，只要好好活着不给他们添乱就好。而我自己似乎是患上了寻找事物用处的 PTSD，甚至会为制作出这样的网站而找不到高大上的意义感到不堪和羞耻，有病吧？！
（二）理工男 VS 艺术女
如前文所言，我的网站经过了 Ines 的体验，并根据她的建议做了不少改进。在与她的交流过程中，我发现我们的观点十分不同。
首先，考虑到我所了解的国内就业和理工科的科研环境，我认为研究生搞前端的性价比不高，研究生阶段更多的是搞后端和算法的。但是 Ines 说，如果是交互设计，还是可以搞前端的，说实话，没有什么所谓性价比。是我肤浅了还是我的认识太浅薄了？
其次，虽然现在我的方向是用深度学习来解决计算机图像方面的问题，但是说白了，最后的结果就类似于把某一个指标从可能 80 % 提升到了 90 %。而且我必须有一篇论文发表才能毕业，我觉得我的学习压力好大，所以觉得折腾这个网站是没用的。但是 Ines 说，她个人不会觉得花时间在专业方向以外的相关领域就是没用的，她虽然不是搞音乐和舞台艺术的，但因为她感兴趣，所以把用户体验、交互技术设计的东西整合进了音乐表演里面做了一个项目，她就觉得挺有意义。
此外，可能是专业或者学校的差距过大，审视一下我做过的项目，都是些什么电压电流控制、数据处理之类大家听起来非常无聊的东西，但是反观 Ines 的项目，虽然我不懂，但是就是觉得设计很漂亮、很能让人开心，我也太菜了吧！
随着谈话的深入，我越发觉得让我们的观点不同的，可能更多的是我们的立场不同而不是所受教育的不同或者专业的不同。
我很明显感觉到我似乎代表了中国比较传统的有生活升级强烈欲望的朋友（这里我不敢用阶级跃迁这样的词汇），即使我现在的生活已经非常棒了，但我仍然保留着曾经的思维模式跳不出桎梏。对于我来说，学习就是为了找好工作换取更多的报酬，而我自己喜欢什么？我说不出来也真的不知道。至于发展自己的兴趣，我甚至觉得有点可笑。虽然我也在自己的主页写了我的爱好，并且我也在连载 newsletter 和剪视频，但是问我为什么的时候，我还是会首先说这些是用来提升自己的社交影响力，其次才是因为我喜欢。而且说喜欢的时候，我还是会感到一丝自责并认为这是不务正业。
与 Ines 交流不久，我就想到如下的话，虽然由我说出来似乎很装，但还是分享给读者：
我必须学习政治与战争，这样我的儿子才能自由学习数学和哲学。我的儿子必须学习数学、哲学、地理、自然历史、造船、航海、商业和农业，这样我儿子的儿子才有权利学绘画、诗歌、音乐、建筑、雕塑、挂毯和瓷器。 ——约翰 · 亚当斯
而 Ines 就是很符合新时代标准的青少年，关注自我提升，对生活充满热情。我很羡慕她能找到自己喜爱的事并能为自己做的事感到自豪！
七、What's Next？
接下来还是会对网站进行维护，主要是对 package 的升级进行适配，但是可能不太会增加新功能了，最近快要开题了，但是我只是初步定了研究方向，压力有点大。
Web 技术毕竟不是我的研究方向，我还是需要把更多的时间分配到神经网络的学习上，而且在短期的大量学习和 debug 之后，我也感到疲惫和厌倦，我不想再面对满屏的红色报错波浪线也不想钻研 React 和 Vue 了。我到现在还不知道 Vue 的 v-slot 和 template 怎么用以及在 Vue 中与 React 的 useContext 功能相同或类似的东西是什么，但是我已经没有了一开始想要弄明白它的激情，也不会因为 debug 或者查资料没关注时间而错过饭点了。
或许是时候该歇一歇了吧。