![image.png](http://112.124.1.74/static/img/e9694ccce8fb42b3e62e487276c79557.image.png)
一年又一年，时间过得太快啦！

最近总是想着2022年的点点滴滴，一年时光不得写点什么不一样的，可是思前想后觉得这一年也没什么不一样的啊。所以呢，2022年终总结标题就取名为`平淡无奇`。

**人一生最重要的是什么？**我知乎、百度了一下，给出的答案相似，提到了人生五个方面，分别是**身体健康、财务理财、人际社群、工作事业、家庭生活、学习成长**。自己也觉得挺合理的，于是决定年终总结按这五个方面来写。

写年终总结思想过程中，想到了大学毕业前写的一篇写给五年后自己的话，想跟读者一起回顾下：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a21327af3d614f9d90d728a8a963eefc~tplv-k3u1fbpfcp-zoom-1.image)

共勉！



## **身体健康**

身体健康是一切的基础，每年我都会下意识地去锻练身体，这一年也不例外。

使用Keep有两年时间，运动总记录有12594分钟，这一年有7480分钟被运动占用

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd33275d86614f22a3ad87d994abfdba~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f83bc6ba6fd7416980fb69afb922885e~tplv-k3u1fbpfcp-zoom-1.image)

这一年，十一月份买了辆山地车开启周未骑行模式。到写完这篇文章为止，总骑行120公里。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d731ebf407c4b2791feb25a1a40e16b~tplv-k3u1fbpfcp-zoom-1.image)

跟大家分享骑行动态：

最长骑行距离刷新到26公里

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af4b85661de045ccbb0fe1defacd3afd~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d091160ebf2b42ffa1a3071dd07b51b0~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef3a462528ff4d61b35f06fd8a3e517a~tplv-k3u1fbpfcp-zoom-1.image)

骑行风景照合成视频发表个人视频号

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e44954701ed54f33823a93f20d6576d4~tplv-k3u1fbpfcp-zoom-1.image)

关于运动，我是较真的。

## 财务理财

分享两篇文章：

-   [一个程序员的财务独立之路](https://github.com/ruanyf/weekly/blob/08bcc8c63566fd4750bbeb31415f89ca8f170403/docs/issue-191.md)
-   [程序员如何实现财富自由](https://juejin.cn/post/7142455046599344164)

实现“财务独立”，不再为维持生计和支付日常账单而劳碌。这是每个人都幻想过的，我也想，我的人生目标就是追求财务独立。

读过好几本理财类书籍：

-   《小狗钱钱》
-   《富爸爸穷爸爸》
-   《财富自由之路》等

它们告诉我实现财务独立的一些做法：

-   开源节流

    除工作收入，应扩展更多收入来源，节省生活中不必要的消费；避免高额负债

-   学会投资

    投资自己是最靠谱的；学会钱生钱的方法，股票、基金等可以去购买

-   合理分配收入

    投资不是让你把收入全部碰股市，抱着搏一搏单车变宝马的心态。要将收入分成**要花的钱、保值的钱、生钱的钱以及保命的钱**

-   长期坚持

其实教给我们的道理很简单，难的是自己能否坚持做下去。

这一年，购买了一支股票、一支偏债型基金、二支偏股型基金，给家人及自己购买商业医保有一年。**要花的钱、保值的钱、生钱的钱以及保命的钱**这四笔钱均有去分配，但细想后发觉这四笔钱分配比例有点偏了，后面再调整下。

投资有风险，遭遇损失是常有的。

这一年收益率为-0.12%，学徒级投资吧。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30103785307b4cdabfdbf91498c59546~tplv-k3u1fbpfcp-zoom-1.image)

## **人际社群**

人际社交这方面，一直是我不擅长的。大学时期加入过学校社团，呆了半年，后来感觉实在难隔入到群体中就退出了，大学到毕业很少主动去社交，能认识的都是自己班上的。

工作后感觉圈子更窄了，作为技术人大部分时间是在独立思考敲代码，很少有机会能接触认识到优秀的人，更别说跨行业认识优秀的人。

自己线上会加入一些技术群，也会去认识关注一些行内大佬，他们会看书，经常写文档，写规划，写总结，早起学习，产出各种方法论，产出各种技术轮子，并且分享出来。他们有各种各样的优秀特质，我没有，接触后自己的潜意识里面也会想去培养一下特质，见贤思齐，鞭策一下自己。

## 工作事业

我想了想，感觉工作其实没什么好写的，日常工作就是写页面。公司业务技术难点不高，熟悉一段时间后基本可以用搬砖来形容，对于我这种工作没几年的程序员来讲要做的就是积累技能，学习怎么把砖搬好。

然而，在一个地方呆久了之后，难免会进入舒适区，焦虑倒是没感觉到，毕竟自己工作没几年。

温水煮青蛙非常浅显的道理，舒适区呆久了人容易麻木，原地踏步，所以跳出舒适区是下一年自己必须要去做的一件事。

这一年工作带给我的成长有限，重复的工作内容更多的是身体上的劳累，脑袋缺少思考。

最后再放一下公司代码提交记录和个人 `github` 代码提交记录：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7355f2bb6a04a24adaa61e7d08b48f6~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e86e9cfb63774522940fe1c6c97db986~tplv-k3u1fbpfcp-zoom-1.image)

说到事业就更没东西写了，社会阅历尚浅，没钱、没人脉、没点子，没故事，如果去创业肯定是找死。

有时候会想如果这行干不下去了，我会去做什么呢？暂时我也没有找到答案。

生活中会把脑子里一闪而过的想法记录下来，怕突然想不起了，可能哪一天我会从其中找到一条可行性想法做为答案吧。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10339b1b1509409b80df47c2deaee1c1~tplv-k3u1fbpfcp-zoom-1.image)

## 学习成长

年初，我定了一个计划：每天学习看书一个小时，然后通过某个应用自动生成，到点提醒

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9312b61446748c595f6a6ec33a3aa66~tplv-k3u1fbpfcp-zoom-1.image)

到年尾盘点一下，结果是完成次数少，未完成的次数占大头。

**思想的巨人，行动的矮子**，也许说得就是我这种。

这一年，没完整读完一本书，都是阅读到一半后没再读下去。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4fb3ce71db94c01bdf19ebb0ba76df2~tplv-k3u1fbpfcp-zoom-1.image)

好在自己有写文章的习惯，以教为学，这也是一种高效的学习方法。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d33e7c44e8f347cabf7e71821b6ee110~tplv-k3u1fbpfcp-zoom-1.image)

这一年，我在掘金写了10篇文章，写得也比较少，懒人一个。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9b2056f9a174657a4da2a36c1a9d41c~tplv-k3u1fbpfcp-zoom-1.image)

有参与`github`社区贡献，但没有深入参与到某一个开源项目中去

-   [vueuse](https://github.com/vueuse/vueuse/pull/2433)
-   [vue-devui](https://github.com/DevCloudFE/vue-devui/pull/99)
-   [vant](https://github.com/youzan/vant/pull/9732)

## 家庭生活

**家有本难念的经**，我是厌烦了，想离家远点越来越不想回家了。

翻一翻朋友圈，再简单分享一些生活点滴：

自己拍的好看景色

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74a5ec701d1c4a02b47707389138ea99~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1434f782a1d84a6aa04e8ea654f50aa2~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37e5dd0d33184ddf99acac775c132961~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c09b2a10cff46269402a66e43befbcb~tplv-k3u1fbpfcp-zoom-1.image)

五一假期去横店

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22645d4f518c4187b02f31f06b96885f~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad1b350d1dd248b8a45c36bc987d3fcd~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b980cfebddb4200a98adbed502857dd~tplv-k3u1fbpfcp-zoom-1.image)

金华衢州、武义游玩

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7523d669557f45038c86949e7c8cdb73~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/695dbc4f5ff54d05a3a7168f6c968da1~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15272c4b7ee44f72af4caff3e01c5734~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac052b58cd36417685f9fa3a8a6ab021~tplv-k3u1fbpfcp-zoom-1.image)

图贴得有点多，不贴了。

## 总结

白驹过隙，日光荏苒，再回看这一年光阴不禁感唉自己没有做成一件让自己满意的事。年中也写一篇总结，flag立的蛮多，完成的没有几件。

2023年度计划简化下就两点：

-   跳出舒适区，多写文章(最少15篇)尝试运营公众号「凌览社」，倒逼自己学习
-   搞钱

最后，2023年，希望大家**在新的一年，遇见更好的自己**。

平淡无奇，2022年终总结

![封面.jpeg](http://112.124.1.74/static/img/4770dc47b668bf9a979fee82f6e2db90.%E5%B0%81%E9%9D%A2.jpeg)
## 前言

在[Github Actions实现仓库自动同步Gitee并更新文档 - 掘金 (juejin.cn)](https://juejin.cn/post/7049317964281020446)文章前言中描述了笔者开源一个工具库。在持续更新库的时候，发现每一次更新[medash - npm (npmjs.com)](https://www.npmjs.com/package/medash)版本时，存在需要手动Git Push、执行rollup打包命令以及更新package.json文件中version字段值等操作。为解放双手，写了50+行代码。



## 实现终端交互选择版本号

版本号修改只考虑四种情况:

1. 更新主版本号, 如1.0.0修改成2.0.0
2. 更新子版本号，如1.0.0修改成1.1.0
3. 阶段版本号，如1.0.0修改成1.0.1
4. Beta版本，如1.0.0修改成1.0.0-beta.1

版本号的命名规则是由`.` 进行拼接，所以可以使用正则将版本信息获取出来。

首先，版本号信息存储在**package.json**`version` 字段值中，代码是使用了[TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)](https://www.tslang.cn/)。Ts执行时，**es6**模块化会被编译成node环境中支持的**CommonJS**模块化。即`import pkg from "../package.json";` 会被转化成`const pkg = require("../package.json")` 。 CommonJS标准规定，导入Json文件时，将会有把Json反序列化的操作，所以读取的json 已经被反序列化，不需要再`JSON.parse` 操作。

```TypeScript
import pkg from "../package.json";
const version = pkg.version;
const reg = /([1-9])\.([0-9])\.([0-9])(?:(\-\w*)\.([1-9]+))?/g;
const execs = reg.exec(version) as Array<any>;
```


然后，`npm install inquirer` 安装[inquirer ,](https://www.npmjs.com/package/inquirer)它是一个提供**终端交互**的工具包。

按照上述版本修改的四种情况，程序提供的版本号选择列表选择可以分成两种情况：

1. 版本号含有beta；
2. 版本号没有含有beta。

是否含有beta，通过对`execs[4]` 是否存在来判断。

```TypeScript
//...
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
        name: 'list',
        type: 'list',
        message: '请选择发布的版本:',
        choices: lists,
        default: [lists[0]]
    }])
    //...
}
```


处理含有beta的情况

```TypeScript
const getBetaVersionLists = (beta) => ([
    getVersion([execs[1], execs[2], execs[3]]),
    getVersion([execs[1], execs[2], execs[3]]) + `${beta}.${addOne(execs[5])}`
])
```


处理没有beta的情况

```TypeScript
const getVersionlists = () => ([
    getVersion([addOne(execs[1]), execs[2], execs[3]]),
    getVersion([execs[1], addOne(execs[2]), execs[3]]),
    getVersion([execs[1], execs[2], addOne(execs[3])])
])
```


其中`getVersion` 和`addOne` 方法分别用于拼接完整的版本号和数字+1

```TypeScript
const addOne = (num) => Number(num) + 1;
const getVersion = ([major, minor, patch]) => `v${major}.${minor}.${patch}`
```


不存在beta的效果：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82eeabdeec1e41598697bbc8350ba163~tplv-k3u1fbpfcp-zoom-1.image "")

存在beta的效果: 

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f67654744b4544289657cbdf15196bee~tplv-k3u1fbpfcp-zoom-1.image "")

> **注意点：**代码语言是使用**TypeScript**，所以执行时需要[ts-node - npm (npmjs.com)](https://www.npmjs.com/package/ts-node)工具帮我们编译下。


`npm run release` 是自定义命令，在文件package.json的scripts下配置即可。

```JSON
//...
    "scripts": {
        //..
        "release": "ts-node scripts/release.ts"
    },
//...
```


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae2fc7681f2b46ccbb59e494f4e35c07~tplv-k3u1fbpfcp-zoom-1.image "")

最后，导入node文件模块，将选择确定后的版本号重新赋值给version，再写入package.json

```TypeScript
//...
import path from "path";
import fs from "fs";
//...
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
        name: 'list',
        type: 'list',
        message: '请选择发布的版本:',
        choices: lists,
        default: [lists[0]]
    }]).then(async ({ list }) => {
        pkg.version = list
        //...
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            //...
        });
    })
}

```


好了，一个版本选择的功能就完成了。

## 跟Shell语言说再见

版本选择完成，接下来需要处理Git一系列命令提交代码、Git自动打Tag以及向Npm更新等操作。

需要处理命令有：

```Bash
git add .
git commit -m xx
git tag **
git push origin ** //向远程仓库提交tag
git push origin branch

npm run build //rullop打包
npm publish //npm 发版

```


其中`npm run build` 将执行[rullop](https://www.rollupjs.com/)打包

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41c0a32e224a4270b6aa922fdc9c2499~tplv-k3u1fbpfcp-zoom-1.image "")

在终端中自动化执行一些命令，这个时候就需要[Shell](https://www.runoob.com/linux/linux-shell.html)，创建Shell文件去完成对应的逻辑。作为前端工程师就需要去学习下Shell，有学习成本。

秉承能用Js实现的最终用Js实现的想法，node [child_process 子进程](http://nodejs.cn/api/child_process.html)模块中提供了可执行Shell命令的API。

当然还有更便捷的工具[zx](https://www.npmjs.com/package/zx),由google开源。

`npm i zx`安装zx，导入zx，`#!/usr/bin/env zx` 是zx要求的。

```TypeScript
#!/usr/bin/env zx
/...
import { $ } from 'zx';

```


正则匹配获取当前Git 分支：

```TypeScript
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
   //...
    }]).then(async ({ list }) => {
        pkg.version = list
        let branch = await $`git branch`;
        const { stdout } = branch;
        const reg = /\*\D(.+)\D/g;
        branch = (reg.exec(stdout) as any[])[1];
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            //...
        });
    })
}
```


按顺序执行命令

```TypeScript
const onSelectVersion = async () => {
     //..
    inquirer.prompt([{
     //...
    }]).then(async ({ list }) => {
      //...
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            await $`git add .`;
            await $`git commit -m ${list}`;
            await $`git tag ${list}`;
            await $`git push origin ${list}`;
            await $`git push origin ${branch}`;
            await $`npm run build&&npm publish`;
        });
    })
}
```


[zx](https://www.npmjs.com/package/zx)方法`$` 原理是使用了 [child_process 子进程](http://nodejs.cn/api/child_process.html)模块中`spawn` 方法

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ed08b73a84d42f8aee288cdbaba8a18~tplv-k3u1fbpfcp-zoom-1.image "")

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c5e2164bcd94e9389bfb85c1575b7dd~tplv-k3u1fbpfcp-zoom-1.image "")

到此，一个简简单单的脚本就完成了，算上空行一共就50+行。

## 最后

实现逻辑非常简单，没有什么难点。工作中肯定也会有一些需要反复做的事件，我们需要多去思考能否将其简化，学会做一个"会偷懒"的工具人。

感谢阅读，文章涉及的代码已开源，欢迎下载尝试[**release.ts**](https://github.com/CatsAndMice/medash/blob/dev/scripts/release.ts)。

50+行代码搞定一行命令更新Npm包

![](https://i.bmp.ovh/imgs/2021/11/f954aa01aa7d87d8.gif)




## 前言

打工人的无奈，公司要求每个人都要进行培训。为了完成它，上网找出好几个demo，都没有勾起我动手实现一波的欲望。日常浏览掘金时，偶然看到一篇[【中秋】纯CSS实现日地月的公转](https://juejin.cn/post/7006507905050492935?share_token=f590fc56-341d-48e7-bdd4-69c57fe98419)，决定就是它了。

实现效果: [日地月公转 (codepen.io)](https://codepen.io/lihai-boop/pen/RwZzawj)

## 实现日地月公转

### HTML5布局

布局方面非常简单，使用三个`div` 分别表示日，地，月，另外再加`div.contian` 进行包裹

```html
<div class="contian">
    <div class="sun"></div>
    <div class="earth">
        <div class="moon"></div>
    </div>
</div>
```

### 设置全局背景

`body` 天生自带`margin:8px;` 影响布局，去除即可

`html，body` 均为块级元素，独占一行，但高度不会占满窗口高度。我们需要让其撑满整个窗口，设置它们的高度为`height:100vh;`

```css
html,
body {
    margin: 0;
    padding: 0;
    background-color: #2f3141;
    height: 100vh;
}
```

### 定位居中

我们需要将所有内容都相对浏览器窗口居中展示，居中方式有：`flex,grid` 布局，定位以及设置`margin` 等。

这里绘图说明下如何`margin`居中:

给内容具体的宽高并设置`margin-left:aute;margin-right:aute;` 另外通过`calc((100vh - 内容高度) / 2)`

得到`margin-top` 的值。
![image.png](http://112.124.1.74/static/img/b25372865c1bce01b6be3704a870c7ac.image.png)
当然使用`margin`居中麻烦，这里我只提供一个思路。

日地月居中，我选择使用定位完成

`body` 是占满窗口的，我们以`body` 进行绝对定位。定位前需要给`body`设置相对定位属性`position: relative;` 然后给`div.contian` 添加绝对定位属性`position: absolute;`

```css
html,
body {
    margin: 0;
    padding: 0;
    background-color: #2f3141;
    position: relative;
    height: 100vh;
}

.contian {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    transform: translate(-50%, -50%);
}
```

绝对定位时，`top,left` 值是以`div.contian` 左上角为准，所以当`left:50%;right:50%` `div.contian` 并没有达到居中的效果，`left,right` 值页面需要减`div.contian`自身宽高的值。

为了达到效果，我使用了 `transform: translate(-50%, -50%);` 让其以自身的宽高为准向X轴，Y轴，各移动`-50%` 。

设置`transform` 可以理解为创建了一个三维坐标如下图，不同的是Z轴是正对屏幕，面对屏幕前的您。这里对`transform` 不做过多文字描述
![image.png](http://112.124.1.74/static/img/0c1a97d1e254a027f892f35a97da6cc2.image.png)
为了更直观的看到效果，我给`div.contian`加了一个`border`边框
![image.png](http://112.124.1.74/static/img/cc25b1a86c2a5d07897435f9e8a4871c.image.png)
### 模拟实现太阳

同理，使`div.sun` 相对`div.contian` 绝对定位居中。设置`border-radius:50%`绘制成圆形,`backgroud`使用线性渐变` linear-gradient`填充；为了效果更佳，给`div.sun` 一定的外阴影

给`div.sun`元素设置宽高，给外阴影  `box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);`

```css
.sun {
    position: absolute;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    left: 50%;
    top: 50%;
    background: linear-gradient(#fcd670, #f2784b);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);
}
```

太阳效果如图：
![image.png](http://112.124.1.74/static/img/bc1daf33e432fc5063c2e0247967e773.image.png)
### 模拟实现地球

#### 地球公转轨道

地球会绕太阳进行运动，运动的轨道是一个圆形的，我们可以给`div.earth` 宽高设置与最外层`div.contian` 一致

为直观我也给`div.earth`添加了一个`border` 属性

```css
.earth {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border:1px solid #f2784b;
}
```

这个圆边框将用于地球公转运动轨道

#### 伪元素`::before`实现行星

行星都用一个圆进行模拟，同理使用 `border-radius: 50%;` 给背景渐变色。将地球定位至地球公转轨道正上文 也就是`div.earth` 的正上方

```css
.earth {
  //...
  position: relative;
}
.earth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(#19b5fe, #7befb2);
    border-radius: 50%;
}
```

地球效果如图：
![image.png](http://112.124.1.74/static/img/d47a58cdabec6d91b1b0691cde23e0a8.image.png)
#### 伪元素`::after`实现行星尾巴

行星尾巴使用`border` 模拟，设置`::after`伪元素`width:100%;heigth:100%;`,占满`div.earth`

给`::after`伪元素`border-top:px solid silver;border-left:22px solid transparent;`

将`div.earth`的`border`去除，这个时候我们可以清楚的看到行星尾巴已经出来了
![image.png](http://112.124.1.74/static/img/c0a98bb635ad3fc388ac10164e39c829.image.png)
但行星尾巴并没有与地球交接在一起，这里可以通过设置`transform`中的`rotateZ`,让其绕Z轴逆时针旋转一定角度
![image.png](http://112.124.1.74/static/img/e59943bb834af655162fa7d97821bb0d.image.png)
此时，地球完成了，只差让其绕太阳旋转

给`div.earth`元素添加`animation`属性，定义动画关键帧`keyframes` ,让`div.earth` 一直Z轴是顺时针旋转

```css
.earth {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    position: relative;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }

}

.earth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(#19b5fe, #7befb2);
    border-radius: 50%;
}
 .earth::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      border-top: 2px solid silver;
      border-right: 2px solid transparent;
      border-radius: 50%;
      transform: rotateZ(-52deg);
  }
```

添加动画属性后效果：


![image.png](http://112.124.1.74/static/img/147574d00fac81af05e4ad978a83d72c.image.png)
### 模拟实现月亮

```html
<div class="earth">
    <div class="moon"></div>
</div>
```

html布局上，`div.moon`被`div.earth`包裹，所以我们依然通过定位，将`div.moon` 固定至地球公转轨道正上文 也就是`div.earth` 的正上方

月亮公转轨道圆应大于地球

```css
.moon {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #19b5fe;
    transform: translate(-50%, -50%);
}
```

为直观我给`div.moon` 添加了`border`
![image.png](http://112.124.1.74/static/img/147574d00fac81af05e4ad978a83d72c.image.png)
留下的就是使用`div.moon`的伪元素模拟出月亮与月亮旋转的尾巴,思路与模拟实现地球相同

到此，文章不再添加文字描述思路

最后将不必要的`border`删除，一个有手就会的日地月公转就完成了

完整代码不贴出来了，想要源码移步[日地月公转 (codepen.io)](https://codepen.io/lihai-boop/pen/RwZzawj)

当然，还可以扩展实现3D效果的公转自转，有兴趣的小家伙可以实现下
![image.png](http://112.124.1.74/static/img/e361013156bc3cd0880e65b81046b32d.image.png)
[实现行星公转自转 (codepen.io)](https://codepen.io/lihai-boop/pen/porMoMW)
## 总结

文章使用定位，`transform`,`animation` 等css3属性，从0到1实现了日地月公转

有手就会系列——实现日地月公转

五年后的自己，你好！你是否已经达成自己的职业目标？五年前的你，凭一腔热血选择互联网行业，并立志做出自己的成绩。

​		不管五年后的你如何，希望今天我写给你的话，可以让你想起当年下定决心。激励你继续努力下去,切勿懒散！

​		一, 我知道生活，工作压力大，但不要将全部压力自己担着。三十岁前拿命挣钱，三十岁后拿钱换命。每天再累也不要忘记锻炼身体，身体健康才是资本，不要懒。因为你没有经济资本生病，这是最重要的一点！

​      二,学习学习还是学习。2020年春节发生的一场疫情，全国人民被迫按下的暂停键，全民宅家。在这段时间里，我阅读专业，理财类书籍逐渐养成读书的习惯。希望五年后的你还保持着，我向往与b站知识区的up主们一样才华横溢。理性的眼光看待生活中的事情 。

​		三,成为高级前端工程师，现在的我面临的是就业压力。我相信凭现在我的能力在小公司找一份工作很容易了，但这不是我想要的，我想要的是进入大厂工作学习。为此我每天都在学习，写代码，无论当前目标能不能实现。希望五年后的你没有放弃提高专业能力的想法，珍惜一切机会提升自己，早日成为高级前端工程师，始终向进入一线大厂奋斗。

​		四，学习理财知识，培养财商。职业是不能帮你实现财富自由的。五年后的你，工作稳定，有一定的抗风险能力，也多多少少有一些存款，希望你尝试定投基金或股票。

​		五, 工作再忙也不要忘记陪陪父母。父母思想老旧，相处起来伤脑筋，希望你可以收敛自己的浮躁，多一点耐心对待父母,找时间带父母一起去旅游。她们真的劳累大半辈子了。

​	   一共五点要求，希望五年后的你能看到我今天写的话。反省自己做到了多少，写这么多的目的还是希望你不忘初心，不要浪费青春。不要重走父母的道路，一辈子都在底层混日子，看不到出头之日。  

**文章发布时间为：2020-10-05**

写给五年后的自己

标题没毛病，叫我靓仔🤵‍♂️就好了！！！

![image_aW2MlUTedo.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2199655ba63461a8b5c24b8193c149f~tplv-k3u1fbpfcp-watermark.image?)



## 回顾上半年

*   吃饭的工具升级，手机、电脑💻全部换成了苹果设备；

    设备升级，给我的收益🉐是️工作效率提升。

    对我最有用的功能是捆绑应用——提醒事项，它能每天提醒我需要去完成的事项。
    
    ![image_duzBiNBLZ2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec6abeca73c94c308e0ece649e859f1a~tplv-k3u1fbpfcp-watermark.image?)

    合理安排时间，五月初至现在已经坚持有两个月啦。

    不追求事事都完成✅，每天心里有点小目标，不摆烂！！！

*   坚持运动；  

    ![image_MwgRt0s-Uu.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e72d01f247e470db9789149bcb9190f~tplv-k3u1fbpfcp-watermark.image?)
    ![image_NPqQyfhJDs.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3149605598604495aff32a2faf636aeb~tplv-k3u1fbpfcp-watermark.image?)
    
    ![image_xjSh67JoEn.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87a9c8cd12354637b3876c9bfcf3bbf3~tplv-k3u1fbpfcp-watermark.image?)
    
    ![image_C1y4COA-GT.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8571d04e57274f618a34c32f24be4c79~tplv-k3u1fbpfcp-watermark.image?)


    每天工作时长8小时，坐的时间占5-6小时，导致有段时间腰酸背痛。意识到这样早晚要嗝屁💀了，从三月份开始逐渐去养成运动的习惯。室外行走散步，室内练某几项动作。

    身体是革命的本钱嘛！

*   坚持阅读专业文章、输出文章；

    上半年输出原创文章6篇，掘金平台共输出原创文章数13篇

    **推荐一读**：

    [定义一个常量，它真的不变吗？](https://juejin.cn/post/7113830483837845518 "定义一个常量，它真的不变吗？ - 掘金 (juejin.cn)")

    [仿Mac程序坞放大动画](https://juejin.cn/post/7098327859122405383 "仿Mac程序坞放大动画 - 掘金 (juejin.cn)")

    [玩转nodeJs文件模块](https://juejin.cn/post/7072972877628178440 "玩转nodeJs文件模块 - 掘金 (juejin.cn)")

    [50+行代码搞定一行命令更新Npm包](https://juejin.cn/post/7068969844607189029 "50+行代码搞定一行命令更新Npm包 - 掘金 (juejin.cn)")

    [Github Actions实现仓库自动同步Gitee并更新文档](https://juejin.cn/post/7049317964281020446 "Github Actions实现仓库自动同步Gitee并更新文档 - 掘金 (juejin.cn)")

    [有手就会系列——实现日地月公转](https://juejin.cn/post/7035597833864478733 "有手就会系列——实现日地月公转 - 掘金 (juejin.cn)")

    [ffmpeg视频压缩踩坑总结](https://juejin.cn/post/7025189268733558791 "ffmpeg视频压缩踩坑总结 - 掘金 (juejin.cn)")

    [实现懒加载的四种方式](https://juejin.cn/post/7004460061984555021 "实现懒加载的四种方式 - 掘金 (juejin.cn)")

    [深入剖析This机制](https://juejin.cn/post/6979944155610873887 "深入剖析This机制 - 掘金 (juejin.cn)")

    曾信誓旦旦在朋友圈立下冲掘金Lv4，但现在才渣渣Lv2🤕 ，离Lv4还差个十万八千里，有点小尴尬。这方面还要多勤快点，量变引起质变。

    时光不负，创作不停！

*   活跃Github社区；

    开源一个工具库:&#x20;

    [CatsAndMice/medash: 前端JavaScipt业务代码工具库🚀 🚀 (github.com)](https://github.com/CatsAndMice/medash "CatsAndMice/medash: 前端JavaScipt业务代码工具库🚀 🚀 (github.com)")

    **推荐一读**中有两篇是介绍开发工具库中实现自动化的实践。最近把工具库自动化完善了下，并且增加自动生成文档的功能，后续我会针对该功能再输出一篇实现自动化生成文档的文章。

    开源一个Git小脚本:&#x20;

    [CatsAndMice/coco-git: 一个自动创建、推送git tag脚本 (github.com)](https://github.com/CatsAndMice/coco-git "CatsAndMice/coco-git: 一个自动创建、推送git tag脚本 (github.com)")

    欢迎Star😁。

    2021下半年至2022年上半年Github commit量:
  ![image_LyW9D4dCLA.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51a3534052ce425da26e2bb0d9e2c03f~tplv-k3u1fbpfcp-watermark.image?)

*   学习

    大二开始敲代码，到今天已经有2.5年。在校喜欢看视频，也像大部分人一样全网收集学习资料，然后就没有然后了，我百度网盘一堆资料，收藏等于学会。

    工作后，基本不看视频，也不喜欢电子书，更不会去收集大把资料，偏向于买有点深度的实体书。

    Vue.js 官方团队成员霍春阳今年出了本新书《Vue.js设计与实现》，所以上半年一直在啃它，并且在Github创建了一个仓库，用于跟着作者思路自己也敲一遍，抄也要抄一遍，完成阅读进度70%。

    [CatsAndMice/vue3\_source\_code\_learn: Learn Vue3 (github.com)](https://github.com/CatsAndMice/vue3_source_code_learn "CatsAndMice/vue3_source_code_learn: Learn Vue3 (github.com)")

    硬骨头🦴，为了以后面试吹牛逼，必须敲碎咽下去。

    重温了一遍《JavaScript设计模式与开发实践》，设计模式编程内功，永远不过时。每隔一段时间再看都能有不一样的认知。
   
    ![image_7-RnAJDvJV.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cbb4b093cfb4ed08f798804f12085dd~tplv-k3u1fbpfcp-watermark.image?)

    专业/理财类书籍是我比较喜欢看的种类，跟money挂钩嘛🪝。

*   今年上半年最最最高兴的一件事——升职加薪。

    敏感话题，一笔带过。
    
    ![image_RRHKNQORI6.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58cf26f077254b55aa755caec5dd43bc~tplv-k3u1fbpfcp-watermark.image?)

回顾完。

## 下半年展望

*   [ ] 坚持运动；

*   [ ] 坚持使用提醒事项应用；

     > 养成不易，不能轻易废了！！！

*   [ ] 坚持输出原创文章，冲掘金Lv4；

    > 撸起裤腿冲就完事。

*   [ ] 学做饭,这项我一直有在行动，奈何手艺不佳；

    > 会做饭的靓仔肯定少💪。

*   [ ] 《Vue.js设计与实现》未读章节收尾；

*   [ ] 读完《数据结构与算法JavaScript描述》，创建仓库同步练习；

    > 这本书是我大学买的，一直放着都积灰了。

嗯，够了，工作、生活琐事它们占我大部分时间。Flag立太多，完不成没有意义。