文/一个从命令行走向Web的转型者

如果你问一个写了十年后端的人：”你写过Hello World没有？”

他大概会白你一眼。

但如果你问他：”你有没有一个别人点开就能看到的Hello World？”

他可能会愣一下。然后说：”还真没有。”

我就是那个愣过的人。写了十年的服务端代码，每次都是在终端里看到那行输出就完事了。直到有一天我女儿跑过来问我：”爸爸，你天天说写代码，你写的东西长什么样？你给我看看。”

我打开终端，敲了个python -c “print(‘Hello, World!’)”。她看了一眼，说：”就这？黑乎乎的，连个颜色都没有。”

那一刻我突然意识到一件事：我写了十年程序，从来没有给我女儿看过一个她能理解的”软件”。

从”能跑”到”能看”：差距比想象中大

于是那天下午我决定写一个真正的Hello World软件——一个网页，打开就能看到”Hello, World!”，字体大一点，漂亮一点，最好有个背景色。

听起来很简单对吧？

打开VS Code，新建一个index.html，敲个

Hello, World!

，双击打开浏览器——好了，看到了。前后不到一分钟。

我女儿看了一眼，说：”嗯，比刚才那个黑乎乎的强点，但还是好简单。”

她说得对。一个只有标题的空白页面，算不上”软件”。它只是一个标签页里的一行字。

于是我决定加码。要加样式、加交互、加一点”软件”该有的样子。然后我发现，这一加码，事情开始变得复杂了。

第一个问题：字体怎么跑到别人电脑上就变了

我选了一个好看的Google Font，在本地看着确实漂亮。但当我发给朋友，他在他手机上打开的时候，字体变成了系统默认的宋体。

因为他的网络加载不了Google Font，fallback机制又没设好。

我这才意识到，软件要”给别人看”，意味着你要面对无数种设备、网络状况、浏览器版本。你在自己的开发机上跑得好好的，不代表别人打开也长那样。

于是我开始研究@font-face，研究font-display: swap，研究系统字体栈的写法。一个字体问题让我折腾了大半个小时。等我解决完这个问题，回头看了看最初的代码——比原来多写了三十行。

第二个问题：手机上看和电脑上看完全两回事

我女儿是用iPad打开的。我一开始在电脑上开发，所有布局都是按1920×1080做的。在iPad上一打开，标题出了屏幕右边，按钮叠在了一起。

我又开始研究响应式设计。@media查询、flex布局、相对单位、viewport设置。改完了在电脑上按F12调成移动设备预览，看着还行，但真机上一测，又歪了。

那天下午我反复调整了七八轮，最后在电脑、iPad、手机三个设备上终于基本一致了。那个页面不再是”一行字”，而是一个规规矩矩居中、在各种屏幕上都看得清楚、字体舒适、带有渐变背景的卡片。

我女儿再来看的时候，说了一句：”这个像软件了。”

但我知道，它离真正的”软件”还差着十万八千里。

第三个问题：不能每次都让人家双击html文件吧

双击HTML文件就能打开，确实方便。但如果你想把东西发给一个不懂技术的人，你不能说：”你下载我这个文件，然后双击打开，用Chrome看。”

你得有一个链接。一个任何人点开就能看到的、不需要下载任何东西的链接。

为了这个链接，我又花了将近一天。

先注册了一个域名，然后租了一个最便宜的云服务器，接着折腾Nginx配置——把那个HTML文件放到服务器的/var/www/html目录下，配好server_name，重启Nginx。结果浏览器报403 Forbidden，查日志才发现文件夹权限没给对。

改完权限，再访问——终于出来了。

我把链接发给我女儿，她在学校用教室的电脑打开，看到了那个漂亮的、带渐变的、字迹清晰的”Hello, World!”页面。回来之后她说班上好几个同学都看了，说”你爸还会干这个”。

那个晚上我觉得比上线任何一个商业项目都有成就感。

软件到底是什么：一个从未被说破的答案

经过这一通折腾，我对”软件”有了新的理解。

以前我觉得软件就是代码，写得对、跑得通、性能好就是好软件。但那天之后我发现，软件是一段从你脑子里出发，最终抵达另一个人眼睛和心里的旅程。

代码只是这段旅程的起点。你写了一行Hello World，那是你的Hello World。但只有当另一个人打开它、看到它、理解它、有所感受的时候，它才变成了”软件”。

在这个意义上，所有没有用户的东西，都只是”程序”。所有有人使用的程序，才是”软件”。

而很多程序员干了很多年，都在写程序，未必在写软件。因为他们写的东西，从来不给真正的”用户”看。

推荐每个人给自己做一个能展示的Hello World

所以我想推荐每个人都做这么一件事——给自己写一个”能展示的Hello World”。

不一定要复杂到部署到云端。可以是：

一个用HTML+CSS做成贺卡样式的Hello World页面，能发给朋友点开看。

一个用小游戏框架做的Hello World，点击页面上的按钮，Hello World以动画形式弹出来。

一个用PPT也能做的”软件”——设计好漂亮的排版，导出成可交互的PDF，发给别人看。

重点不是用什么技术，重点在于：你从”自己能看到”，变成了”别人能看到”。

这个转变带来的东西很奇妙。

首先，你会开始在意”体验”。以前你只在意”对不对”，现在你开始在意”好不好看””顺不顺手””别人打开会不会困惑”。这种在意，是区分工匠和流水线工人的分水岭。

其次，你会被迫面对”真实世界”。别人的网络、设备、习惯，都跟你不一样。你会遇到各种意外，然后学会处理这些意外。这个过程，比读任何一本”软件工程”教材都管用。

最后，你会收获一种”被看到”的快乐。有人点开你的链接，看到你写的东西，甚至点了个赞。那种反馈，比你跑通一百次终端里的Hello World都强烈。因为这次有人看见你了。

那个页面现在还开着

我做的那个Hello World页面现在还部署在服务器上，链接一直没关。偶尔有朋友问”你最近在干嘛”，我就把链接甩过去，说”闲着没事写了个页面”。

他们点开之后一般会说”挺好看的”，然后我就心满意足地把电话挂了。

后来我把那个页面的代码发到了技术社区里，标题叫《每个人都需要一个能展示的Hello World》。结果收到很多回复，有人说”我也做了一个，你看”，然后贴了自己的链接。有人把Hello World做成了翻卡片的游戏，有人做成了随着鼠标移动而变色的动态页面，有人做成了输入名字就可以定制问候语的小工具。

我突然觉得，那天下午我女儿问我的那个问题，其实问了很多程序员都该想想的事。

“你写的东西长什么样？你给我看看。”

如果这个问题你回答不上来，也许可以找个周末，给自己做一个能展示的Hello World。

不用多复杂，不用多高级。就让它好看一点、完整一点、能让别人打开的时候”哦”一声。然后把它发给一个人。哪怕是发给自己的手机。

从那一刻起，你写的就不再是”程序”了。你写的东西，有人看了，有人感受了。那就是软件。