Digest | CSS Grid vs Flexbox, 技术债务

>  一份2021年03月12日的信息流提炼

### 每天学点前端

#### 3大CSS网格功能

原文：[Top 3 CSS Grid Features To Start Using in Production](https://www.yogitatrainingcenter.com/top-3-css-grid-features-to-start-using-in-production-by-jose-granja-better-programming-feb-2021/)

- `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));`
  - `minmax(min, max)`
  - auto-fill: 尽量在给定的约束条件下，用尽可能多的列来填满这一行。
  - auto-fit: 行为方式与自动填充相同，但任何空的重复轨道将被折叠。

#### Grid vs Flexbox

##### 阅读资料

- [CSS Grid vs. Flexbox: A Practical Guide](https://blog.udemy.com/css-grid-vs-flexbox/)

- [Flexbox vs. CSS Grid: Which Should You Use and When?](https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184)

**Grid**:  网格布局，精确地控制布局中项目的位置，重点是**内容放置**。

**Flexbox**：线性布局，Flex项会根据其内部内容和可用空间的大小进行增长和收缩，重点是**内容流**。

##### 比较实现

[jsfiddle DEMO](https://jsfiddle.net/sikouyuu/dxhgLemw/112/)

用Grid和Flexbox实现最简单的Header，Main，Footer布局：

```css
.grid-layout {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.flexbox-layout{
   height: 100vh;
   display: flex;
   flex-direction: column;
}
.flexbox-layout main {
    flex: auto;
}
```

### 每天学点软技能

#### 担任软件开发人员15年后的反思

原文：[Reflections After 15 Years of Working as a Software Developer](https://betterprogramming.pub/reflections-after-15-years-working-as-a-software-developer-cabf610f51a0)

- 如果没有家庭负担，多换工作。考虑到工资与见识
- 为了自己做好工作，而不是为了别人
- 你会交到很多好朋友，但是换工作后最终会失去他们
- 批评代码，而不是人
- 购买好的设备（屏幕，座椅，键盘，etc.）
- 要避免技术债务。**Technical debt**，由于现在采取一个简单（有限）的解决方案而不使用Best Practice，未来会造成额外工作的隐含成本。如果做事情急功近利没有足够的思考，将来就会吃亏。
- 保持自己的节奏。软件开发的世界发展得非常快，但要放轻松，始终按照自己的节奏不断学习和成长。如果你不能学会所有的东西，也不要绝望。
- 如果你想在不浪费时间的情况下做好一件事，不要走捷径。好好阅读文档。否则，你可能不会以最好的方式做事情。不要只是复制来自StackOverlfow的解决方案，要理解它。
- 学会断线。休息好的头脑会更有效率。

### 其他值得阅读

- 如何成为网上的匿名者： [How To Be Anonymous Online](https://medium.com/technology-hits/how-to-be-anonymous-online-130bece5ad09)

- 换浏览器：Firefox，Brave浏览器（支持Chrome扩展），Tor，Chrome匿名模式，DuckDuckGo
  - 检查手机的App权限
  - 升级家里的DNS
    - Cloudflare DNS： 1.1.1.1
    - NextDNS
  - 使用VPN，检查提供商是否支持PFS— Perfect Forward Secrecy。此外，检查VPN提供商所在地的隐私法律和法规。

- 博客 | 撰写50篇NewsLetter的50条经验: [50 lessons learned from writing 50 newsletters](https://nesslabs.com/50-lessons-50-newsletters)

- 邓宁-克鲁格效应（ Dunning–Kruger effect）不要试图一下子搞清楚所有的事情。
  - 不要定一个在某日期前达到某数量的订阅者的目标。相反，与自己约定在特定日期前发送特定数量的新闻邮件。
  - 花点时间弄清楚你到底为读者提供了什么，以及他们为什么要订阅。
  - 管理你的冒名顶替综合症（impostor syndrome）。你可能会犹豫是否要发送newsletter，因为你正在将自己从舒适区中延伸出来。但无论如何都要发送。
  - 不要迷恋统计数字。如今，即使是打开率也没有多大意义。许多人都在使用阻止任何形式的跟踪的应用程序和浏览器扩展，所以这些数字越来越没有意义。专注于创造优秀的内容并与读者互动--这些才是唯一有意义的工作目标。
  - 这是一场马拉松。发展需要时间。如果目标是在网上赚钱，有许多更快、更简单的方法来实现这个目标。经营NewsLetter不是一个快速致富的计划。要有耐心。
  - 将你的NewsLetter作为一种自我教育机制。当你想教自己如何做一些新的事情时，可能很难保持动力。NewsLetter是让自己负责任的好方法。想学习如何编码？开始一个编码NewsLetter。想学习如何烹饪？在你的NewsLetter中每周分享一个新食谱。当你和读者一起学习的时候，这个旅程会更加精彩。

- [知乎｜优雅的赞美他人](https://www.zhihu.com/question/20675186)

- Feeling：感受 + Fact：事实（具体/细节） + Compare：对比

- 真诚最重要，夸具体不夸全部

- 一句赞美的话里面多转几个弯，让人听完了之后能温故而知新，回味出不同的意思来。

- > 我以后肯定会特别喜欢我们的孩子，因为她会特别像你。

### 今日收获

- 一个最容易被忽视的提高生产力的方式：**深度休息（Deep Break）**。职业倦怠不是玩笑。从日常的工作，学习，烦恼中脱离出来，再回去的时候可能会意识到很多重要的事情。[The most overlooked way to be more productive](https://www.youtube.com/watch?v=JU4leSqbvDA)