记录快乐的五一

Posted on:2023-05-3 13:00
10 min read
    生活杂记 日记

刚度过了一个快乐的五一假期,写一篇小小的流水帐简单记录一下。

为什么说是快乐的,因为很久没有以如此轻松的心态度过的小长假了。

在结束了连续6天的超强度工作后,迎来了五天小长假。一如既往的早起,即使是假期。因为每一个早起的日子,都能够拥有更多可支配的时间。每天早上的标准流程是:洗漱,吃早餐,洗衣服,简单收拾屋子。这套流程走完,时间还不到9点,剩下的时间非常富裕。

Lettura的开发

在假期前,和设计朋友一起讨论了一下https://github.com/zhanglun/lettura关于这款应用的一些UI和交互的设计问题。所以在假期刚开始的时候,便花了点时间对Lettura进行主题配色的优化。HappyHues 是一位设计师创建的配色网站,里面有十几种用于Web开发的色板。我将其中的色板信息按照抓取下来,按照色板号,生成了对应的Design Token,比如一号色板如下:

{
  "palette-1-color-1-elements-background": {
    "value": "#fffffe"
  },
  "palette-1-color-1-elements-headline": {
    "value": "#181818"
  },
  "palette-1-color-1-elements-paragraph": {
    "value": "#2e2e2e"
  },
  "palette-1-color-1-elements-button": {
    "value": "#4fc4cf"
  },
  "palette-1-color-1-elements-button-text": {
    "value": "#181818"
  },
  "palette-1-color-1-illustration-stroke": {
    "value": "#181818"
  },
  "palette-1-color-1-illustration-main": {
    "value": "#f2eef5"
  },
  "palette-1-color-1-illustration-highlight": {
    "value": "#4fc4cf"
  },
  "palette-1-color-1-illustration-secondary": {
    "value": "#994ff3"
  },
  "palette-1-color-1-illustration-tertiary": {
    "value": "#fbdd74"
  },
  "palette-1-color-2-elements-background": {
    "value": "#f6efef"
  },
  "palette-1-color-2-elements-headline": {
    "value": "#181818"
  },
  "palette-1-color-2-elements-sub-headline": {
    "value": "#2e2e2e"
  },
  "palette-1-color-2-elements-card-background": {
    "value": "#f0e2e1"
  },
  "palette-1-color-2-elements-card-heading": {
    "value": "#181818"
  },
  "palette-1-color-2-elements-card-paragraph": {
    "value": "#2e2e2e"
  },
  "palette-1-color-2-icons-stroke": {
    "value": "#181818"
  },
  "palette-1-color-2-icons-main": {
    "value": "#f2eef5"
  },
  "palette-1-color-2-icons-highlight": {
    "value": "#4fc4cf"
  },
  "palette-1-color-2-icons-secondary": {
    "value": "#994ff3"
  },
  "palette-1-color-2-icons-tertiary": {
    "value": "#fbdd74"
  },
  ...
}

然后使用Style-Dictionary 将 Design Token 转换成CSS变量。

/**
 * Do not edit directly
 * Generated on Sun, 30 Apr 2023 02:17:24 GMT
 */
:root {
	--palette-1-color-1-illustration-tertiary: #fbdd74;
  --palette-1-color-1-illustration-secondary: #994ff3;
  --palette-1-color-1-illustration-highlight: #4fc4cf;
  --palette-1-color-1-illustration-main: #f2eef5;
  --palette-1-color-1-illustration-stroke: #181818;
  --palette-1-color-1-elements-button-text: #181818;
  --palette-1-color-1-elements-button: #4fc4cf;
  --palette-1-color-1-elements-paragraph: #2e2e2e;
  --palette-1-color-1-elements-headline: #181818;
  --palette-1-color-1-elements-background: #fffffe;
	...
	...
	.
  --palette-17-color-4-elements-background: #fffffe;
	--palette-17-color-5-elements-links: #fef6e4;
  --palette-17-color-5-elements-paragraph: #172c66;
  --palette-17-color-5-elements-headline: #001858;
  --palette-17-color-5-elements-background: #fef6e4;
}

使用postcss的for插件,将创建的颜色CSS变量变量和业务CSS变量进行绑定,在实际使用中,只需要关注业务CSS变量即可。

@for $i from 1 to 17 {
  :root body[data-palette='$(i)'] {
    --color-primary: var(--palette-$(i)-color-1-illustration-highlight);
    --color-secondary: var(--palette-$(i)-color-1-illustration-secondary);
    --color-tertiary: var(--palette-$(i)-color-1-illustration-tertiary);
    --headline-color:var(--palette-$(i)-color-1-elements-headline);
    --paragraph-color: var(--palette-$(i)-color-1-elements-paragraph);
    --button-bg-color: var(--palette-$(i)-color-1-elements-button);
    --button-text-color: var(--palette-$(i)-color-1-elements-button-text);
    --stroke-color: var(--palette-1-color-1-illustration-stroke);

    --body-color: var(--paragraph-color);
    --body-bg-color: var(--palette-$(i)-color-2-elements-background);
    --app-main-bg-color: var(--palette-$(i)-color-1-elements-background);

    --feed-list-bg-color: var(--palette-$(i)-color-1-elements-background);
    --feed-headline-color: var(--palette-$(i)-color-1-elements-headling);
    --feed-active-bg-color: var(--palette-$(i)-color-1-elements-button);
    --feed-active-headline-color: var(--palette-$(i)-color-1-elements-button-text);

    --article-list-bg-color: var(--palette-$(i)-color-2-elements-background);
    --article-headline-color: var(--palette-$(i)-color-2-elements-headline);
    --article-paragraph-color: var(--palette-$(i)-color-2-elements-sub-headline);
    --article-active-bg-color: var(--palette-$(i)-color-2-elements-card-background);
    --article-active-headline-color: var(--palette-$(i)-color-2-elements-card-heading);
    --article-active-paragraph-color: var(--palette-$(i)-color-2-elements-card-paragraph);
    --detail-bg-color: var(--palette-$(i)-color-3-elements-card-paragraph);
  }

另外,在tailwind的配置中,我也把这些颜色都加上,使用的时候就很方便了。在这些内容准备就绪之后,在Lettura的设置界面增加了主题选择,简单但是有效。

配色板虽好,有的配色组合在最后的实际效果中还是有那么一点点不太合适的,可能有些乍看之下确实有点丑,后续再慢慢调整吧。整体来说,加上了这些配色之后,还是不错的。我再也不用纠结什么主色调了。

过去,在Lettura项目上,我总是想在很短的时间内,开发更多的功能。在早期阶段,有很多基础功能需要开发,这样我很兴奋,效率也很高。但是随着功能逐渐完善,短时间内快速开发功能的这种想法反而让我渐渐长产生了负担。再经历了一些思考之后,我不再纠结功能开发的快慢,回归到打磨自己的产品的初心。Lettura主题色是这次假期我给自己的定的一个小目标,在假期中顺利完成,这让我感觉到很舒心。

逛花鸟市场

在毕业之后之后,断断续续养过不少花花草草。在上海时,养过多肉和向日葵,当时养得挺好的,搬家到杭州之后因为工作的关系疏于照看,都倒下了。后来又养了一些绿萝,茉莉,雏菊之类的容易打理的植物,因为工作的关系,也没怎么打理,最后搬家的时候全部都留在了出租房里。

找了一个下午和老婆去了一趟花鸟市场,买了几盆花。一盆很大的月季,将近半米高,正开着花,红彤彤的特笔漂亮,一盆蓝色的绣球,个头小很多,但是也是花团锦簇,甚是好看;另外两盆我也忘了叫什么名字,绿色的叶子,都挺有北欧风格的。

在市场上还看到了很多老桩多肉,价格太高了,没舍得买。回家之后在PDD下单了一盆钱多多,先养养看。晚上又补加了两盆茉莉。乘着这次机会,重新清理了阳台上的花花草草,打造一个花园阳台。

运动和健身

假期打了两场球。第一场是在小程序上找到的局,在全民健身中心的5楼。参加是老年局,大部分都是中年男子,见识到了所谓的“球场老大爷”。

他们多是球场老手,以控制为主,打四个点位,以尽可能小的消耗来消耗对手。如果无法快速结束战斗,就要被大爷们全场溜着打。习惯了猛男对轰局的我在开始的时候非常不适应。起球之后习惯性退后压中心准备接杀,结果是网前吊球,打了几局之后菜慢慢适应。整场下来各种失误不说,还被累得半死。哈哈,我真是菜。

整个过程还是蛮开心的,参加的人不多,所以可以一直打。大家都很和气,场下的观战的大爷还告诉我对面大爷的弱点和习惯,教我怎么打他,哈哈,简直欢乐了。以后有机会可以再参加大爷们的球局,练练球商。

第二场是参加群友组织的局,老地方,也有一些常打的朋友参加。熟悉的节奏,熟悉的球路,打起来也是畅快淋漓。但是要想打得好,还是得多动脑子。

每次发完球,浑身都酸痛,不适合立马撸铁。假期有这么多闲暇时光,于是重新开始游泳了。应该是假期的关系,健身房泳池人特别少,除了几个上游泳课的小朋友之外,没有其他人了。

游泳能有效刺激内啡肽的分泌,内啡肽是一种感觉良好激素,可改善人的情绪,帮助缓解压力,所以每次游完都感觉到愉悦。相比撸铁,在水中,我可以彻底放松自己的身体,配合上规律的深呼吸,内心感觉很平静。池底花花绿绿的瓷砖,配上摇曳的水光,仿佛置身在一个如梦如幻的世界中。

虽然我的假期看起来平平无奇,但是为什么我确认为这是一个非常舒心的假期呢?我想,究其原因,应该是我没有给自己设定目标。

过去的长假,我总会在假期开始之前,给自己设定一些必须要做的学习计划。虽然大部分计划都能按时完成,但是每次假期结束,却依然有一种奇怪的感觉。我的计划完成了,然后呢?我得到了什么?变强了吗?快乐了吗?我的假期怎么就结束了?而这次五一假期,从第一天开始的疯狂编程开始,所有的事情都没有规划过。每天想到做什么,就去做了,主打一个随心而为。

希望能够一直快乐。

Toggle theme