Mobius UI Preview Release

(｡･∀･) ﾉﾞ 嗨，别来无恙呀！疫情期间，希望大家一切都好 🖖

开门见山，这次主要跟大家分享三件事情：

• 「Thoughts Lab」的近况和后续
• 「Mobius UI」预览版本发布及简单介绍
• 「Coding the World」计划 —— 我的就是你的！！！

Thoughts Lab

按照新年之初的打算，今年上半年我的主要精力应该是实习 + 兼职开发 Thoughts Lab，但因为疫情原因呆在家中，手头只有一部 Intel Core m3 的超极本，不足以流畅进行复杂项目的开发工作，故该项目也被迫停滞，无法及时更新，在这里先跟关心项目进展的朋友们说声抱歉。

💬 如果你不知道 Thoughts Lab 是什么，请移步： Thoughts Lab 发布啦！

略让人伤心的是，Thoughts Lab 自 1 月 1 日发布至今，在没有任何推广的情况下，累计用户共 652 人，其中 99% 都是通过推送获悉的开发者朋友们 ❤。由于采用邮箱认证，只有本校的同学才能够获得发布信息的权限，所以小程序首页的消息仍然停留在我发布初写的介绍内容，甚是荒凉。

看着一门心思做的小玩意儿无人问津，心里也有点不甘，接下来我会上手做一些推广工作，让同学们知道有这样一个东西为大家提供浏览、发布信息的功能 💌，希望能够正常运作起来，收集反馈为后续的优化和更新工作做准备。

特别感谢这段时间跟我讨论技术 “架构” 和服务选型的朋友，使我不至于将这个项目的细节完全遗忘 😛 同时，也有一个好消息跟大家分享，宅家期间，我找到了适合盈利的新产品，主体是一款浏览器扩展，目前是 Side Side Project 的状态。我完全相信它的潜力，所以 Thoughts Lab 也不必再纠结于用爱发电和维持生计的矛盾，大家能够顺利地用起来对我来说就是最开心的事情。

Mobius UI

🎨 Mobius UI 是我为新产品准备的 UI 框架，目前初具雏形，今天早些时候整合了近期的开发工作、补充了文档，更新了 GitHub Repo 正式与大家见面。

速览链接：🌟 GitHub Repository、💻 Mobius UI Preview Page

决定动手造轮子之前，我花了不少功夫寻找现有的优秀方案，包括样式库、组件库和设计系统，考察的标准主要是以下三点：赏心悦目；样式和组件低耦合，可定制、易扩展；开源、稳定维护、社区活跃，结果都不是很理想，虽然最主要的原因可能只有一个：「不是自己写的 😕」，而 Mobius UI 将具备以上所有优点。

设计上，Mobius UI 参考了 Neumorphism 风格，使用「近似的前景色和背景色 + 亮度适当的阴影」来呈现一种「接地气」的质感，同时又独具意料之外的「来自未来的美感」。但这种风格的缺点非常明显，大片近似的颜色导致页面可访问性较差，元素与元素之间的区隔度不够，层次的滥用也会导致页面内容缺乏关注点，用户的眼睛眨巴眨巴不知何处安放 👀 等。对于这些问题，我在实现的时候基于不断尝试进行了权衡，一方面使用特定组合的颜色提升了内容元素的观感，尽量采用多种方式而非单纯颜色的改变来标识元素的状态，另一方面，总结了一系列「要与不要」设计规范来提供使用建议。尽管如此，它的使用效果也是因人而异的，上下限差距极大，这是我在文档中建议大家优先在 Toy Projects 中投入使用的原因之一。

技术上用「中规中矩」来形容恰到好处，使用基本的 CSS 实现样式 + 使用 PostCSS 做预处理器优化编写状态逻辑的体验，无他。

目前来说，Mobius UI 具备以下特色：

• Utility First，推崇使用「功能类」组合出组件，而不是直接定义组件样式；

• Verbose Variables 居多，目前可以使用 Minify + Gzip/Brotli 达到 80% 以上的压缩比，本地构建的话使用 PurgeCSS 体积更小；

• 支持了 Dark Mode、Light Source（设置光源方向以调整阴影）；

• 支持引入 Houdini 和 JavaScript 做局部或全局的渐进增强；

• 具备完全可定制性，变量随处可见但逻辑得体，支持任意粒度的调节；

• 设计了简单的算式，可以通过给定的种子值，生成独特的配色方案，Mobius UI 的默认配色方案由本人生日生成 🤐

%var-color {
  /* --seed: 624;
  --cigaret: calc(var(--seed) - 360);
  --mobius: calc(360 - 264); */

  --dark-color-darker: hsla(264, 0%, 7%, 50%);
  --dark-color-darker-m: hsla(264, 0%, 12%, 50%);
  --dark-color-normal: hsla(264, 0%, 17%, 100%);
  --dark-color-lighter-m: hsla(264, 0%, 22%, 50%);
  --dark-color-lighter: hsla(264, 0%, 27%, 50%);

  --light-color-darker: hsla(264, 0%, 68%, 100%);
  --light-color-darker-m: hsla(264, 0%, 73%, 100%);
  --light-color-normal: hsla(264, 0%, 83%, 100%);
  --light-color-lighter-m: hsla(264, 0%, 93%, 100%);
  --light-color-lighter: hsla(264, 0%, 98%, 100%);

  --cigaret-color-darker: hsla(264, 100%, 17%, 100%);
  --cigaret-color-darker-m: hsla(264, 100%, 30%, 100%);
  --cigaret-color-normal: hsla(264, 100%, 50%, 100%);
  --cigaret-color-lighter-m: hsla(264, 100%, 70%, 100%);
  --cigaret-color-lighter: hsla(264, 100%, 83%, 100%);

  --mobius-color-darker: hsla(96, 100%, 17%, 100%);
  --mobius-color-darker-m: hsla(96, 100%, 30%, 100%);
  --mobius-color-normal: hsla(96, 100%, 50%, 100%);
  --mobius-color-lighter-m: hsla(96, 100%, 70%, 100%);
  --mobius-color-lighter: hsla(96, 100%, 83%, 100%);
}

了解更多详细的内容请移步 🌟 GitHub Repository，或者访问 💻 Mobius UI Preview Page 重温一下（我非常喜欢在晚上的时候盯着夜间模式反复打量）。

当下 Mobius UI 还在预览阶段，仅仅完成了样式基本框架的搭建和逻辑的梳理，下一个阶段的开发重点是基础元素的丰富和补充，将历时两周左右，下下个阶段的开发重点是渐进增强、MicroAnimation、和复杂组件，更具体的信息我会更新在 Repo 中的 Todos & Roadmaps，大家不妨点个 Star、加个 Watch 追踪 Mobius UI 的最新进展。

虽说 Mobius UI 是为新产品准备的，我也希望它能够应用在我开发的所有作品中，为大家提供一致的体验，这是一个次要的目标，但毫无疑问它将会出现在同一系列的文章中 🤔

Coding the World

Coding the World 是一个「工作坊」，按期举行，在这里你可以跟我一起实现 Thoughts Lab 的下一个应用，仅有的参加条件就是手头有一台电脑、以及每天两小时左右（每周 10 小时左右）的时间。对我来说，这是一个将知识和经验结构化输出的过程，对你而言，将获得包括但不限于：

• 一款精美、别致、实用的小程序；
• 腾讯云开发赠送的精美礼品；
• 一次「高校微信小程序应用开发大赛」参赛经验；
• 不止一项终身收益的技能；
• 一个看待世界的新视角；
• 一群可爱的小伙伴；

第一期的主题由我擅自决定了，我们将「各自 | 共同」完成一个「头像定制」小程序，按照难度大致划分为三个阶段：简单版本、自定义版本、社交化版本。

简单版本的预览、参加方式（第一期不超过 20 人，本校同学优先）、进度大纲等详细信息请访问：Coding the World Ⅰ

Thoughts

我非常害怕死亡，害怕到极致，但也许正出于对死亡的恐惧，才让我表现得一副「无所畏惧」的样子。2003 年非典的伤塑造了今天的我，现在是否也有孩子在遭受同样的苦楚，我不知道，祝福他（她）们未来一切都好。

希望自己一直善良、一直热血，永远向往自由。