Digest | 产品搜索设计,写作训练,Shell基础,CSS Snippets

>  2021年04月28日信息消化

### 3000字扫盲shell基础知识

原文：[3000字扫盲shell基础知识](https://juejin.cn/post/6844904196710334472#heading-3)

##### shell 变量分类

- 环境变量：保存操作系统运行时使用的参数。

- 位置变量：传递脚本参数时使用。

- 预定义变量：类似于环境变量，不同是它是不能重定义的。

- 自定义变量：由用户自定义,可用于用户编写的脚本。

```bash
# 环境变量: 查看全局环境变量:
printenv
# 定义一个环境变量
export kaka="kaka"
env |grep kaka
# 删除环境变量
unset kaka
```

预定义变量: 常用的预定义变量有如下几个。

![img](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/PicGo/172d9a5f095c8d23)

#### shell 运算符

##### 算数运算符

- +,-,*,/,%,=,==,!=

##### 关系运算符

- -eq, -ne
- -lt, -gt
- -ge, -le

##### 布尔运算符

- ! 非运算
- -o 或运算
- -a 与运算

##### 文件测试运算符

| operator |                    | operator |                  | operator |                |
| -------- | ------------------ | -------- | ---------------- | -------- | -------------- |
| -b       | 是否块设备         | -c       | 是否字符设备文件 | -d       | 是否目录       |
| -e       | 文件或目录是否存在 | -f       | 是否普通文件     | -g       | 是否设置SGID位 |
| -k       | 是否设置粘着位     | -p       | 是否具名管道     | -u       | 是否设置SUID位 |
| -r       | 是否可读           | -w       | 是否可写         | -s       | 文件是否为空   |
| -x       | 文件是否可执行     |          |                  |          |                |

```bash
#!/bin/bash
file="/root/testfile.sh"
if [ -r $file ]
then
   echo "该文件可读"
else
   echo "该文件不可读"
fi
if [ -x $file ]
then
   echo "该文件可执行"
else
   echo "该文件不可执行"
fi
```

### 提高写作能力

原文：[PW#783: PubCoach top 10: April 2021](https://www.publicationcoach.com/pubcoach-top-10-april-2021/)

##### Get better at entering writing contests

1. Submit your story early
2. Stick to the word count
3. Don’t tell the judges why you deserve to win
4. Follow the format
5. Focus on the theme, don’t just mention it
6. Interpret the theme in an unusual way

##### Follow the 70-20-10 rule

如果你想提高你的写作水平，要明白数量比质量更重要。在数字上，这表示如下。你70%的作品将是平庸的；20%的作品将是糟糕的；10%的作品将是出色的。这种多多益善的哲学是杰西卡-斯蒂尔曼（@EntryLevelRebel）最近在《公司》上发表的一篇文章的主题。

> If you want to improve your writing, understand that *quantity* is more important than quality. In numbers this is expressed as follows: 70 percent of your work will be mediocre; 20 percent will suck; 10 percent will be remarkable. This more-is-better philosophy is the theme of [a recent post](https://www.inc.com/jessica-stillman/success-jerry-uelsmann-70-20-10-rule.html) in *Inc.* by Jessica Stillman, (@EntryLevelRebel).

##### Learn how to copy others

我喜欢认为自己是一个模仿者。我从抄袭他人的简单行为中学到了许多写作技巧。

你猜怎么着？我在无意中模仿了音乐家保罗-西蒙（@PaulSimonMusic）的风格。在奥斯汀-克莱恩（@austinkleon）的博客上发布的迪克-卡维特（Dick Cavett）节目的4分钟精彩片段中，你可以了解到西蒙的 "乱世之桥 "的创意是如何来自巴赫，并与一点福音音乐相融合的。请看这个片段! 它很吸引人。

> I like to consider myself a [copycat](https://www.publicationcoach.com/why-you-should-be-a-copycat/). I have learned many of my writing skills from the simple act of copying others. 
>
> And guess what? I was inadvertently imitating the style of musician Paul Simon (@PaulSimonMusic). In a fabulous [4-minute clip from the Dick Cavett show](https://austinkleon.com/2021/04/13/the-song-machines/), posted on the blog of Austen Kleon, (@austinkleon), you can learn how Simon’s idea for “Bridge Over Troubled Waters” came from Bach, melded with a bit of Gospel music. Watch this clip! It’s fascinating.

##### 做好人物的命名工作 Do a better job of naming your characters

1. Always Google your characters’ names
2. Choose names that fit the character
3. Choose names that begin with different letters
4. Avoid generic or over-used names
5. Be creative but make names pronounceable
6. Name only featured players, not walk-ons
7. Don’t change names mid-story
8. Choose names to fit the setting, period and age group
9. Try a character name generator
10. Don’t fake foreign or antique names

### CSS Tips

##### Typing Effect

##### position: sticky

##### CSS Scroll Snap

### 设计你的产品搜索

原文：[Designing search for your product](https://medium.muz.li/designing-search-for-your-product-758c97a64fc8)

##### The Stages of Search | 搜索的阶段

###### 1.Capture

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

这个阶段基本上都是在捕捉用户的查询，并将其记录在系统中。但这也是搜索漏斗中最开放的部分。这意味着什么呢？
用户可以完全自由地在搜索框中输入任何内容。同一个查询可以用不同的方式来构思。有时它可能意味着同样的事情（"冰淇淋店坎登镇 "vs "我在哪里可以找到坎登镇的冰店"），有时同样的词可能意味着完全不同的事情（"赛马 "vs "赛马"）。

> This stage basically is all about capturing the user’s query and logging it in the system. But this is also the most open-ended part of the search funnel. What does that mean?
> A user has complete freedom to type anything in the search box. The same query can be framed in different ways. Sometimes it could mean the same thing (“ice cream shop camden town” vs “where can i find ice shops in camden town”) and sometimes the same words could mean completely different things with the same words (“race horse” vs “horse race”).

###### Things to keep in mind here

- **提供视觉反馈** - 始终提供视觉反馈，传达系统在采集查询时的情况。确保用户能够在启动查询之前看到他们所输入或说出的内容。这也包括语音搜索的不同状态（捕获查询、捕获查询）。它允许用户检查错误并在这里自行纠正。

> **Provide visual feedback** — Always provide visual feedback communicating where the system is at when the query is being captured. Ensure that the user is able to see what they’ve typed or spoken before firing the query. This would also include the different states for voice search (capturing query, query captured). It allows the user to check for mistakes and correct it here itself.

- **使用自动完成** - 对于文本查询，使用自动完成来减少错误，同时也节省了一些输入整个查询内容的时间。自动完成是出现在搜索栏下的一个小对话框，它根据用户到目前为止输入的内容为查询提供建议。在界面上放一块很容易的东西，但它真正的魔力在于为它提供动力的智能背后。要了解更多关于自动完成的信息，请点击链接[谷歌自动完成在搜索中的工作原理](https://blog.google/products/search/how-google-autocomplete-works-search/)。

> **Use autocomplete** — For text queries, use auto-complete to minimize errors and also save some time from typing out the entire query. Auto-complete is the small dialog box that appears under the search bar that has suggestions for queries based on whatever the user has typed so far. An easy piece to put on the interface, but its true magic lies behind the intelligence that powers it. To learn more about autocomplete, follow the link [How Google autocomplete works in Search](https://blog.google/products/search/how-google-autocomplete-works-search/).

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

2. ###### Interpret

3. ###### Match

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

- **有限和无限的结果** - 了解你的用户对他们在你的产品上期望的那种结果的看法。这里有两种可能的看法--几乎是有限的或无限的。这种认知很重要，因为它定义了用户搜索背后的意图。在一个有限的空间里，用户知道他们在寻找什么，他们需要做的就是发现它并继续前进。在这里，界面需要易于扫描。例如，当你在WhatsApp上进行查询时（有限的），你正在寻找一个特定的聊天，或一个群组。但在一个无限的空间里，有可能出现多个符合查询的结果。

> **Finite & Infinite Spaces** — Understand the perception your users have of the kind of results they expect on your product. The two possible perceptions here are — virtually finite or infinite. This perception matters because it defines the user’s intent behind searching. In a finite space, the user knows what they’re looking for, all they need to do is spot it and move forward. Here, the interface needs to be easy to scan. Example, when you fire a query on WhatsApp (finite), you’re looking for a specific chat, or a group. But in an infinite space there are possibilities of multiple results that could match the query.

- 同质或异质体验 - 确定你的产品中的可搜索类别（歌曲、专辑、艺术家、播放列表等）。

> **Homogeneous or Heterogeneous Experience** — Identify the searchable categories in your product (songs, albums, artists, playlists and so on).

- **不要忘记边缘案例**--当一个系统找到很多好的匹配，它就会按照设计模式在界面上以某种顺序列出这些结果。但是，当系统没有找到匹配物，只有一个或异常少的匹配物时，就有可能出现界面空白或用户处于不知道如何继续的状态。用户正在寻找答案，即使系统不能适当地找到，也应该与用户沟通。这里的目标是为用户提供替代方案或方法来进一步满足其信息需求。在这种情况下，一些流行的方法展示如下--空搜索、错误状态、特定匹配、类别树、编辑搜索。

> **Don’t forget the edge cases** — When a system finds a lot of good matches, it’d list them in some order on the interface following a design schema to present the results. But when the system finds no matches, one or unusually low number of matches, there are chances of the interface looking blank or the user being in a state where they don’t know how to proceed. The user is looking for answers, and even if the system can’t find it appropriately, it should communicate that with the user. The goal here is to provide the user with alternatives or ways to proceed further with their information need. Some of the popular methods in such cases are showcased below — null search, error states, specific matches, category tree, edit search.

##### Rank

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

##### Representation

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

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

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

### 一点收获

- 经典的 what happens when you type in a URL in an addess bar in a browser. ![img](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/uPic/EcmG_g4WoAI2rTv.jpg)

### 附录:snippets

- Typing Effect

```css
.wrapper {
  height: 100vh;
  /*This part is important for centering*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}
```

- CSS Scroll Snap

```css
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #de5448;
  color: #fff;
  font-size: 3em;
}

.bg-blue {
  background: #4267b2;
}

.bg-green {
  background: #4CAF50;
}

```

- Dynamic Tooltips

```css
.tooltip {
  position: relative;
  border-bottom: 1px dotted black;
}

/* Tooltip box */
.tooltip:before {
  content: attr(data-tooltip); 
  position: absolute;
  width: 100px;
  background-color: #062B45;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 1.2;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  font-size: 0.75em;
}

/* Tooltip arrow */
.tooltip:after {
  content: "";
  position: absolute;
  bottom: 75%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  opacity: 0;
  transition: opacity .6s;
  border-color: #062B45 transparent transparent transparent;
}

.tooltip:hover:before, .tooltip:hover:after {
  opacity: 1;
}
```