Digest | Figma最佳实践, 9大UI网格系统, docker-compose最佳实践

>  2021年06月07日信息消化

### 每天学点Design

#### 9 best grid system for web/mobile UI

https://blog.prototypr.io/9-best-grid-system-for-web-mobile-ui-265c68d30c09

##### Bootstrap Grid System

The most popular option for us. More often 12 columns with indents. Standard and simple system. Most of the interface market is built on these principles, and many of the below listed systems are created on this basis. Very quickly learn, but this grid creates an internal standardization.
Although most likely this similarity will be see only designers.

对我们来说是最受欢迎的选择。更多时候是12列，有缩进。标准而简单的系统。大部分的界面市场都是建立在这些原则之上的，下面列出的许多系统都是在这个基础上建立的。很快就能学会，但这种网格创造了一种内部标准化。
尽管很有可能这种相似性只有设计师才能看到。

![img](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/uPic/1*UywfaBeOL4nOXW3UAdJ8rQ.gif)

##### Material Responsive Grid

Google material design. Most designers have come across this system, it is very convenient in its essence, the guides are well described. One of the most advanced solutions on the market. But unfortunately obliges to use the systems that Google offers, but does not stop changing them ;)

谷歌材料设计。大多数设计师都接触过这个系统，它的本质是非常方便的，指南的描述很好。是市场上最先进的解决方案之一。但不幸的是，不得不使用谷歌提供的系统，但并没有停止改变它们；)

![img](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/uPic/1*hCXl4VnGFXkfvJDAsz5VPQ.gif)

##### Flexbox Grid

##### Custom modular grid based HTML

There are many examples when taking the bootstrap base principles. It’s a 6 or 12-column system and designers much rework it. Change the size of individual blocks, make them unequal, and so on. It’s a trend now.

在采取bootstrap的基本原则时，有很多例子。这是一个6列或12列的系统，设计师们多会对它进行重新设计。改变单个块的大小，使其不平等，等等。这已经是一种趋势了。

![img](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/uPic/1*r-rWhnRB4ZqvdZhXcb6ffQ.gif)

##### Crow Grid Framework

Not very popular in comparison with other system, reminded grid constructivist posters, interesting and fresh. Maybe once it becomes very popular.

与其他系统相比不是很流行，让人想起了网格构造主义的海报，有趣而新鲜。也许会变得非常流行。

##### Human Interface Guidelines

Apple. Very little said about modular systems, but principles so intersting. Suitable of course, first for iOS.

苹果公司。关于模块化系统说得很少，但原则是如此有趣。当然，首先适合于iOS。

##### Fluent Design System

Absolutely new system from Microsoft. Today it is little known, but the presentation video very interestingly shows how they represent modern design.

微软的新系统。今天它鲜为人知，但演示视频非常有趣地展示了他们如何代表现代设计。

#### Everything you need to know about layout grids

https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/

As an aspiring designer, one of the first proper books I purchased was Josef Müller-Brockmann's [Grid Systems in Graphic Design](https://www.niggli.ch/en/grid-systems-in-graphic-design.html). The book was fascinating to me because it helped codify the many ways a grid could provide structure and consistency, improve readability, and create emphasis and hierarchy in design. It's the first text to formalize many of these concepts into such concise words, and it's probably one of the most important tomes on the topic. In the design world, there's a common joke that you can tell how long someone has been a designer by the color of the spine of their Müller-Brockmann copy.

作为一个有抱负的设计师，我买的第一本合适的书是Josef Müller-Brockmann的[图形设计中的网格系统](https://www.niggli.ch/en/grid-systems-in-graphic-design.html)。这本书对我很有吸引力，因为它帮助编纂了网格可以提供结构和一致性、提高可读性、以及在设计中创造重点和层次的许多方法。这是第一本将这些概念正式化为简明的文字的书，而且它可能是关于这个主题的最重要的书籍之一。在设计界，有一个常见的笑话，你可以通过Müller-Brookmann的书脊的颜色来判断一个人做了多久的设计师。

By carefully constructing a grid that's suitable to your content, you can define structure, hierarchy, and rhythm in your design. When done right, the scaffolding of grids can remove the guess work from many aspects of your process. Different types of grids can also help you establish a rational approach to type scales, positioning, sizing and spacing.

通过仔细构建适合你的内容的网格，你可以在你的设计中定义结构、层次和韵律。如果做得好的话，网格的支架可以从你的过程中的许多方面消除猜测。不同类型的网格还可以帮助你建立一个合理的字体比例、定位、尺寸和间距的方法。

Although these principles originated in the relatively "rigid" medium of print, I remain convinced now more than ever of their importance. In the era of screen design, grids can be instrumental in establishing consistency across a wide variety of device and viewport sizes, especially for teams that need to create a cohesive design experience for multiple products and platforms.

尽管这些原则起源于相对 "死板 "的印刷媒介，但我现在比以往任何时候都更相信它们的重要性。在屏幕设计的时代，网格可以在各种设备和视口尺寸之间建立一致性，特别是对于那些需要为多个产品和平台创造一致的设计体验的团队来说。

Despite all the benefits of grid systems, for a long time I struggled to configure grids effectively in my own design process—they often didn't provide me with the flexibility I wanted (in other design tools). So you can imagine my happiness when I discovered how [layout grids](https://help.figma.com/article/55-layout-grids) worked in Figma. Figma offered added functionality like styles that removed much of the friction I had previously experienced.

尽管网格系统有很多好处，但在很长一段时间里，我都在努力在自己的设计过程中有效地配置网格--它们往往不能为我提供我想要的灵活性（在其他设计工具中）。因此，当我发现布局网格在 Figma 中是如何工作的时候，你可以想象我的快乐。Figma 提供了额外的功能，如样式，消除了我之前经历的大部分摩擦。

#### Baseline grids

A baseline grid is one that's established from the baselines your typography sits on. These appear as visual aids in your design spanning the width of your design and repeating vertically at an even internal. What that interval is, is largely dependent on your typography scales and line-heights. In many 8pt grid systems, a 4pt baseline is used. This basic unit makes the math easy and scalable as you start to setup different type sizes and line-height combinations.

一个基线网格是由你的排版所处的基线建立的。这些基线在你的设计中作为视觉辅助工具出现，横跨你的设计的宽度，并在垂直方向上以均匀的内部重复。这个间隔是什么，主要取决于你的排版比例和行高。在许多8pt网格系统中，使用的是4pt基线。当你开始设置不同的字体大小和行高组合时，这个基本单位使数学变得简单，而且可以扩展。

Using one can help you align one piece of type to another while giving you a unit of measure to help establish the sizing and spacing of other elements. In many design systems, such as [Google's Material Design](https://material.io/design/layout/spacing-methods.html#baseline), the baseline grid is a foundational part of defining type size and line-height parings, as well as spacing for margins and padding.

使用基线网格可以帮助你将一个字体与另一个字体对齐，同时给你一个测量单位来帮助建立其他元素的尺寸和间距。在许多设计系统中，比如谷歌的Material Design，基线网格是定义字体大小和行高的基础部分，也是定义边距和填充的间距的基础。

If you've ever wanted to create a baseline grid in Figma, there are a couple of different ways to do so using a row grid.

1. A grid that is built around line-heights 围绕行高建立的网格
2. A grid that is built around the actual baseline that text sits on 围绕文本所处的实际基线建立的网格

![img](https://cdn.sanity.io/images/599r6htc/production/398fe9d7ae24161bba06f981a90d768fc007e4ef-2156x1532.png?rect=0,0,2156,1531&w=693&h=492&q=75&fit=max&auto=format)

#### Nested grids

Unlike other tools, with Figma you won't be limited to a single grid at the "artboard" level. Since you can apply a grid to any frame, this means you can apply them to frames that are nested within your design. So feel free to get all [Matryoshka](https://en.wikipedia.org/wiki/Matryoshka_doll) on your design and create grids within grids within grids to your hearts content.

与其他工具不同，使用 Figma，您不会被限制在 "artboard "级别的单一网格上。由于您可以将网格应用于任何框架，这意味着您可以将它们应用于设计中嵌套的框架。因此，您可以自由地在您的设计上使用[Matryoshka](https://en.wikipedia.org/wiki/Matryoshka_doll)，并在网格中创建网格，以满足您的需求。

Once you begin to leverage this, there are infinite ways to use grids as visual aids within particular areas of your design. You can help differentiate among them by specifying the color and opacity of each grid.

一旦你开始利用这一点，就有无限的方法在你设计的特定区域内使用网格作为视觉辅助。你可以通过指定每个网格的颜色和不透明度来帮助区分它们。

![](https://cdn.sanity.io/images/599r6htc/production/66d964b25629d90f4e0bd7c94ebd51143bdc7724-2156x1440.png?w=693&q=75&fit=max&auto=format&dpr=2)

### 其他值得阅读

### Docke Compose Best practices for Web Apps

原文：[Best Practices Around Production Ready Web Apps with Docker Compose](https://nickjanetakis.com/blog/best-practices-around-production-ready-web-apps-with-docker-compose)

#### Docker Compose

##### Controlling which health check to use:

```yml
  web:
    healthcheck:
      test: "${DOCKER_WEB_HEALTHCHECK_TEST:-curl localhost:8000/up}"
      interval: "60s"
      timeout: "3s"
      start_period: "5s"
      retries: 3
```

##### Publishing ports more securely in production:

```yml
  web:
    ports:
      - "${DOCKER_WEB_PORT_FORWARD:-127.0.0.1:8000}:8000"
```

In the past I’ve written about how I like [running nginx outside of Docker directly on the Docker host](https://nickjanetakis.com/blog/why-i-prefer-running-nginx-on-my-docker-host-instead-of-in-a-container) and using this pattern ensures that the web’s port won’t be accessible to anyone on the public internet.

在过去，我曾写过我喜欢在Docker之外直接在Docker主机上运行nginx，使用这种模式可以确保web的端口不会被公共互联网上的任何人访问。

By default it’s restricted to only allow connections from localhost, which is where nginx would be running on a single server deploy. That prevents folks on the internet from accessing `example.com:8000` without needing to set up a cloud firewall to block what’s been set by Docker in your iptables rules.

默认情况下，它被限制为只允许来自localhost的连接，也就是nginx在单个服务器上运行的地方。这可以防止互联网上的人访问example.com:8000，而不需要设置一个云防火墙来阻止Docker在iptables规则中设置的内容。

Even if you do set up a cloud firewall with restricted ports I would still do this. It’s another layer of security and security is all about layers.

即使你设置了一个有限制端口的云防火墙，我仍然会这样做。这是另一个安全层，而安全是关于层次的。

And in dev you can set `export DOCKER_WEB_PORT_FORWARD=8000` in the `.env` file to allow connections from anywhere. That’s handy if you’re running Docker in a self managed VM instead of using Docker Desktop or in cases where you want to access your site on multiple devices (laptop, iPad, etc.) on your local network.

在开发中，你可以在.env文件中设置导出`export DOCKER_WEB_PORT_FORWARD=8000`，允许从任何地方连接。如果你在一个自我管理的虚拟机中运行Docker，而不是使用Docker Desktop，或者你想在本地网络的多个设备（笔记本、iPad等）上访问你的网站，这就很方便了。

##### Taking advantage of Docker’s restart policies:

```yml
  web:
    restart: "${DOCKER_RESTART_POLICY:-unless-stopped}"
```

Using `unless-stopped` in production will make sure that your containers will come up after rebooting your box or if they crash in such a way that they can be recovered by restarting the process / container.

在生产中使用 "unless-stopped "将确保你的容器在重启你的盒子后会出现，或者如果它们崩溃，可以通过重启进程/容器来恢复。

##### Limiting CPU and memory resources of your containers:

```yml
 web:
    deploy:
      resources:
        limits:
          cpus: "${DOCKER_WEB_CPUS:-0}"
          memory: "${DOCKER_WEB_MEMORY:-0}"
```

#### Dockerfile

##### Running your container as a non-root user

```dockerfile
# These lines are important but I've commented them out to focus going over the other 3 lines.
# FROM node:14.15.5-buster-slim AS webpack
# WORKDIR /app/assets
# RUN mkdir -p /node_modules && chown node:node -R /node_modules /app

USER node

COPY --chown=node:node assets/package.json assets/*yarn* ./

RUN yarn install
```

##### Taking advantage of layer caching

```dockerfile
COPY --chown=node:node assets/package.json assets/*yarn* ./

RUN yarn install

COPY --chown=node:node assets .
```

This is Docker 101 stuff but the basic idea is to copy in our package management file (`package.json` file in this case), install our dependencies and then copy in the rest of our files. We’re triple dipping our first `COPY` by copying in the `yarn.lock` and `.yarnc` files too, since they all go in the same spot and are related to installing our packages.

This lets Docker cache our dependencies into its own layer so that if we ever change our source code later but not our dependencies we don’t need to re-run `yarn install` and wait forever while they’re all installed again.

这是Docker 101的内容，但其基本思想是复制我们的包管理文件（这里是package.json文件），安装我们的依赖，然后复制我们的其他文件。我们通过复制yarn.lock和.yarnc文件来实现第一次复制，因为它们都在同一个地方，并且与安装我们的包有关。

这可以让Docker将我们的依赖关系缓存在自己的层中，这样，如果我们后来改变了源代码，但没有改变我们的依赖关系，我们就不需要重新运行yarn install并永远等待它们被再次安装。

##### Using build arguments

```dockerfile
ARG NODE_ENV="production"
ENV NODE_ENV="${NODE_ENV}" \
    USER="node"

RUN if [ "${NODE_ENV}" != "development" ]; then \
  yarn run build; else mkdir -p /app/public; fi
```

#### 记笔记的三种方式

http://xiao.do/issues/37-642928

谈到个人效率，创作，记笔记是绕不开的话题，据我观察和总结，无论是作家，文字工作者，互联网创作者还是学生，普通人，记笔记的方式或者风格，除了完全不记之外呢，可以分成这三种：

#### write to remember

写下来只是为了当下立即记住，而不是为了将来再来回顾。

记录当下的想法，所以你可以从这篇帖子了解到什么是「[写下是为了立即记住](https://cognition.happycog.com/article/writing-to-remember?utm_campaign=happy letter&utm_medium=email&utm_source=Revue newsletter)」。贝多芬的话来说就是：

> If I put it in a sketchbook, I never forget it and I never have to look it up again.

#### write to search

Ben 谈到了自己储存信息的方式。他说自己并没有一个所谓的系统。他的浏览器时常开着几百个网页，偶尔会把读到有趣的链接复制到 WorkFlowy 里，配上一点自己的评论。而绝大部分读过的内容，全都存在自己的大脑里。他说自己是搜索型的人，当需要用到之前读过的某个信息或文章时，他会去 Google 或 WorkFlowy 搜索关键词。

大部分人通过记下，然后搜索，足以满足需求。

#### write to organize

这类人对 2nd Brain，zettelkasten，LYT(link your thinking)等术语了如指掌，并正在使用某个复杂系统的自我改进版来记录和管理自己的笔记。他们花比较多的时间在整理和回顾上，相信笔记的复杂程度会与自己的知识储备以及创作能力正相关。平时也会较常人更多的关注新的工具，新的名词和方法，时不时的来“优化”自己的系统。他们敬仰的那些笔记专家，大多是靠贩卖笔记相关的内容和课程为生。

### 一点收获

- Knowing a language is an ongoing process, not a discrete event. A living habit, not an acquired skill. A magazine subscription, not a book.

了解一种语言是一个持续的过程，而不是一个离散的事件。是一种生活习惯，而不是一种获得的技能。订阅杂志，而不是一本书。

- Honestly, the more I fiddle with productivity tools, the closer I get to appreciating the Unix philosophy of "do one thing and do it well."

老实说，我越是摆弄生产力工具，我就越是接近于欣赏Unix的哲学，即 "做一件事并把它做好"。

- [The most overlooked way to be more productive](https://www.youtube.com/watch?v=JU4leSqbvDA)

>  There is only so much you can do in a day. 
  >
  >  Learning to take breaks is just as important as being productive. Burnout is no joke.
  >
  >  Detach