TTW screen shot

这周对很多跑者来说是个重要的日子，周末是跑过风景跑过你的杭州马拉松。从 11.19 延期到 12.17，没想到恰好碰到了低温天气，好在太阳没有缺席。我没有中签，为了迎接厦门马拉松，周中去了青山湖，赶在低温前跑过风景完成了一次长距离。

除了运动，大部分时间都在做现在的项目。每个人都有一个环游世界的梦想，我也不例外，我还想把自己所有的旅行记忆做成一个旅行页面，记录去过的地方，看过的世界，于是有了 TTW 这个项目。TTW 是 Travel the World 的首字母缩写，可以利用手机上的照片图库自动生成你的旅行记忆。想要了解 TTW，可以点击查看 落地页和 效果页 现在的样子，效果页中结合了世界马拉松大满贯和候选赛事，也算是跑步和旅行的交集。

这篇文章和开发无关，主要是分享开始过程中想到的，思考的部分。

怎么看待和设计师合作

程序员有一个缺点，就是容易忽略设计的重要，觉得简单设计能用就行了。我就是这样的程序员，之前有过不少纠结，找设计师合作觉得花钱，自己瞎琢磨则来回调整，效果不好不说，还浪费了很多时间。

只是现在好的应用首先就要精美，比如 Skratch, Globetrotter，这样才会有想用的冲动。平时，我也会去逛 Dribbble 社区，收藏 喜欢的设计，但看的再多也不能提高动手设计的能力，最多知道自己喜欢什么样的风格，提高一点自己的审美，仅此而已。近期在看《小而美》和《重来》的过程中，也在不断思考未来的生活方式。长远来看，理想的情况当然是清楚自己的能力圈，守住自己擅长的部分，其它的都通过合作（[[思维方式#终局思维]]）来完成，比如设计，这么想过之后也就不再纠结花钱去设计了。

之前在 Dribbble 上找过设计师合作，好处就是在合作之前已经了解设计师的风格。如果喜欢，需要做的就是找到联系方式，询问是否愿意合作就是了。这次尝试了在 闲鱼&小红书 两个渠道找设计师，这两个渠道的设计师定位也很明确，以空闲兼职或者独立设计为主。开始还想着优先找杭州本地的设计师，后来想到既然以后自己都不准备固定在一个地方上班，又何必要求设计师在本地呢。大家都是远程，独立，那么可以早早积累在这方面合作的经验啊。

一旦将视角切换到长期主义，从最终的理想结局反过来想问题，或许很多事情自然而然就有了答案。

理解「先开始，再学习」

在萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》，前言最后提到：

你不应先学习，再开始。而应先开始，再学习。

知道萨希尔·拉文吉亚，是在 indiehacker 社区看到分享 gumroad 的文章，还将分享做成了湾区周报第一期内容：周末项目Gumroad的成长分享。萨希尔分享了将这个周末项目做到了每月350K收入的历程，学到的东西，还有给其它开发者的建议。

其中也有「先开始，再学习」的类似表述：

Q: 您发现有什么特别有帮助或优势的东西吗？

A: 说实话，几乎没有什么。没有什么可以比现实生活中的经验更好的教训。有时候你只是需要行动起来。确保你快乐、享受过程，而且你正在学习。生活的其他方面会填补空缺。

也许，读书是理解这句话最好的例子。

读书，很多时候是想到以后想做什么，或者要做什么，去找相关方面的书去阅读，比如商业管理或者运营实践等。大部分的情况则是，读过之后知道了一些事情，然后就没有然后了。这就是「先学习，再开始」，很多时候是学习之后并没有开始，这句话好像和「理都懂，然并卵」 有着异曲同工之妙。

「先开始，再学习」，则是开始做一件事情，在做的过程中遇到问题去学习，也就是确定了要学习的内容，在真实的过程中学习，通过学习完成了事情。就像落地页和设计师合作，告诉设计师你要的是什么，设计师也需要知道你想要什么。开始合作，就会把想要的东西写下来，写的过程就会不断思考，想要的东西开始变的越来越具体；最终提供给设计师的文档越详细，就说明越知道自己想要什么；越知道自己想要什么，也越容易从设计师那里得到自己想要的效果。

这个开始的过程不但学到了如何合作，应该注意什么，通过写作来细化和明确自己想要的东西，最重要的还是完成了事情。

什么是 Mobile First

确认和拿到设计师给的落地页设计稿，需要做的就是把设计变成现实。

之前的一些页面已经在使用 Tailwind CSS，也知道 Tailwind 是 Mobile First，支持 Responsive Design，但其实只是知道这个概念，并不清楚 Mobile First 的真正含义。

实际开发过程，先是完成了 Desktop 版本的落地页，然后再考虑如何适配 Mobile 端。知道基于屏幕分辨率的断点但并没有真实用过，读文档的过程中才忽然意识到，原来 Mobile First 的意思是默认针对手机屏幕实现，再通过不同的屏幕尺寸断点来支持更多设计。如果用程序开发中的语言来类比，就是默认值的概念，页面默认是为手机端设计和实现的，需要区分什么分辨率的屏幕显示，就在CSS元素前加上对应的屏幕尺寸断点就好了。简单说屏幕尺寸断点就是开发语言中的IF语句，Mobile First -> Mobile Default。

明白了这一点，也就知道了之前的开发思路是错的。正确的开发过程应该是：

  1. 确认 Mobile 和 Desktop 设计效果，首先以 Mobile 端设计稿开始开发；
  2. 找到 Desktop 和 Mobile 的布局差异，通过屏幕分尺寸断点区分 Desktop 开发；
  3. 最终保证 Mobile 和 Desktop 两端的页面显示符合设计效果，确保两端显示正常；

对 Mobile First 和 Responsive Design 有了正确的理解，实际的开发就不是什么问题了。