Digest | flomo整理标签, WSL2+AI笔记, 前端Tips, 最重要的软件架构

>  2021年07月25日信息消化

### AIのこれまでとこから　WEB+DB Press Vol.123

AIは要件がきちんと積み上がった上で、適切なところに適切な技術使うことができれば、ビジネス成果につなげやすいと考えています。ーー大城信晃　NOB DATA

データ分析の中で最も有名なのはKaggle、日本語だとSignateやNishikaなどがあります。

AIで使うツールは、大きく３種類ありましう。インプットとしてのデータソースを扱うもの、分析・モデリング・レポーティングするもの、そしてAIをシステム実装するものです。

**データ収集**、

クローリングを使うか、APIを用意するのか、ロギング用のデータを仕組むのか。

**データエクスポート**：シェルやEmbulkを使ったり、大規模なデータをリアルタイムで同期する際はFluentdを使ったりします。

エラーやリトライなどETL処理を管理する場合、Airflowのようなワークフローエンジンを使うことが多いです。企業によっては、digdagを使うこともあるようです。

Refer

- signate.jp
- nishika.jp
- embluk.org
- fluent.org
- airflow.apache.org
- digdag.io

### WSL2本格入門　Software Design 2021.7

##### ネットワーク

WSLはほぼ仮想マシン。ネットワークも、ホスト側のWindowsと共有しているわけではなく、いわゆるブリッジモードで動作します。ホストのWindowsとWSL2は別のnネットワークになってろい、同じポートを使うアプリケーションを同時に起動してもエラーになりません。WSL２は、その内部の`hostname -I`を起動しときに表示されるIPアドレスで稼働しています。（IPは毎回変動します。）

WSL２ではlocalhostForwardingという設定はデフォルトでtrueになっています。これが有効になっていれば、Windowsでlocalhostへのアクセルがあった場合にWSLにフォワードしますので、IPアドレスを調べなくても通信できます。

```mermaid
graph LR;
	WSL2["<br/> WSL 2 <br>APP 0.0.0.0:8000"]
	WSL2_IP([http://172.30.240.1:8000])
	WIN_IP([http://localhost:8000])
	WIN["WIN 0.0.0.0:8000"]
	Browser --> WSL2_IP;
	WSL2_IP --> WSL2;
	Browser --> WIN_IP;
	WIN_IP --優先--> WSL2;
	WIN_IP -.-> WIN;
```

##### WindowsとWSL２の相互利用

```bash
# windows
> wsl echo "hello world"
# WSL2
$ calc.exe

# WSL2 utility
# change to windows path
wslpath -w <linux_path>
# change to linux path
wslpath <windows_path>
```

##### 注意点

仮想マシンではなく、あくまでもサブシステムという扱いであるため、/etc/hostsの設定などはWindows側の設定で起動ごとに上書きされます。

WindowsとWSL２のやり取りは同一ホスト内でもネットワークアクセスとなります。大量のファイルの読み書きではパフォーマンスが大幅に落ちます。

**そのため、WSL２で開発する場合は`/mnt/c`を作業フォルダにしないようにします。**

動作の設定

```bash
# global setting
C:\Users\<USERNAME>\.wslconfig

# distribution setting
/etc/wsl.conf
```

### 6 Amazing Frontend Coding Tips That You Probably Don’t Know

原文：[6 Amazing Frontend Coding Tips That You Probably Don’t Know](https://blog.devgenius.io/6-amazing-frontend-coding-tips-that-you-probably-dont-know-6fdfa2e2b264)

1. Hidden HTML

```html
<p hidden>This paragraph won't show up. It's hidden by HTML</p>
```

2. `inset` shorthand in CSS

```css
div{top:0;left:0;bottom:0;right:0}
// equals
div{inset:0;}

```

3. Some Tricks

```js
// JS: Detect the internet speed by
navigator.connection.downlink
// JS: Vibrate your phone
window.navigator.vibrate(500);

// Disable pull to refresh
body{
 overscroll-behavior-y: contain;
}

```

4.  Prevent the user from pasting text

```html
<input type="text"></input>
<script>
//selecting the input.
  const input = document.querySelector('input');
  
//prevent the user to paste text by using the paste eventListener.
  input.addEventListener("paste", function(e){
    e.preventDefault()
  })
  
</script>
```

### 我们真的需要整理标签么？

原文：[我们真的需要整理标签么？](https://mp.weixin.qq.com/s/42rDxI2qIz3t7llP-GA_Yw)

![图片](https://raw.githubusercontent.com/Phalacrocorax/memo-image-host/master/uPic/640.png)

左图是我们的神经元细胞，右图是我们已知的模拟宇宙的形态，**能看到自然界中无论宏观和微观，其实很少出现「结构明确」的分类，更多的是节点和连接，像一张网络**，重要的节点不断地拓展，而更多的节点随着积累会建立更多连接。

**分类像建筑物，一经设计好再改进就面临彻底重构的问题。**而我们吸收知识更像是神经回路不断被加强/减弱的过程，收集之后会慢慢的生长出来结构。**所以试图一次性建立好一个明确的分类体系不但没有意义，也没有可能性 —— 除非你停止生长。**

在理解了标签的两种类型后（其实还有很多，这里不展开），我们着重讲下用以「导航」的标签用法。受 Tiago Forte 的 P.A.R.A 的思路启发，在 flomo 中我尝试用一种更简单的方式 i.A.R.P 来对内容进行「索引」。

当然，信息被个人主观的理解，贴上标签建立连接，成为知识。所以每个人的体系都不一样，所以一定是个性化的，不断生长的，**所以不存在完美的方案，只存在适合你的方案。**

I.A.R.P 是一组缩写，即：

•Inbox（收件箱）：我会将所有临时性的，还未消化的内容放置于此，定期来进行归档、整理或者删除。可以当做大脑的缓存，避免记录的时候纠结放在哪里。

•Area（领域）：这是最重要的概念，即日常你需要精进的「领域」，比如健康就是一个领域，而跑步则是项目；写作是一个领域，而写一篇公众号文章则是一个项目；•Resource（资源）：对应到卢曼的 Zettelkasten 方法中，更像是永久笔记。一般来说是兴趣、主题、资产等内容。注意是自己消化过的内容，而非机械的收藏。

•Project（项目）：是指一个将要发生的独立事件，并且这个事件不是一次性就能完成的，至少需要多个动作才能完成。比如要写一本书，需要整理资料，罗列提纲，撰写内容，联系出版社。类似生活中还有组织一次旅游，录制一期播客等。

![Image](https://mmbiz.qpic.cn/mmbiz_png/wDNLH7zcd1NKykq52mSeqt625mWWTnHcY0MianXGulA0njT94zAddrEfBAlw5KOia3YdHMShYhNNEhe8xmZRJQxQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

而置顶标签之外，大量的标签都不再承载「导航」的功能，仅仅用来当做 MEMO 内容的补充。所以即使有几百个标签，也不会觉得难以管理。

### Software Architecture: The Most Important Architectural Patterns You Need to Know

原文：[Software Architecture: The Most Important Architectural Patterns You Need to Know](https://levelup.gitconnected.com/software-architecture-the-important-architectural-patterns-you-need-to-know-a1f5ea7e4e3d)

An architectural pattern is a general, reusable solution to a commonly occurring problem in software architecture within a given context.

架构模式是在特定环境下对软件架构中经常出现的问题的一种通用的、可重复使用的解决方案。

- Layered Architecture

> We should use this style for small, simple applications or websites. It is a good choice for situations with a very tight budget and time constraints.

- Presentation Layer
  - Business Layer
  - Persistence Layer
  - Database Layer

- Pipe and Filter

> The pipe-filter architecture uses in a variety of applications, especially tasks that facilitate simple, one-way processing such as EDI, ETL tools.

- 4 types of filters
    - producer (`source`): the starting point of a process.
    - transformer (`map`): performs a transformation on some or all of the data.
    - tester (`reduce`): tests one or more criteria.
    - consumer (`sink`): the terminating point.

- Client Server

> We can use the client-server style to model a part of a system that has many components sending requests (clients) to another component (server) that offer services: online applications such as email, document sharing and banking.

- Model View Controller

- [MVC vs MVP vs MVVM](https://levelup.gitconnected.com/mvc-vs-mvp-vs-mvvm-35e0d4b933b4)

- Model-View-Controller

- Model–View–Presenter

- Model-View-ViewModel

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

- **Performance Evaluation** — When we are testing the UI performance, MVP turns out to be the one with the highest reliability and lowest hindrance when it comes to rendering frames. Data binding in MVVM creates an additional overload that could drastically affect its performance when performing complex tasks.

**Compatibility** — When testing the patterns based on their compatibility, MVVM was the best of the lot due to its data binding which had a positive impact. MVP fared better than MVC, which had serious restating issues.

**Modifiability** — When we talk about design patterns, it is evident that it should be modifiable since that gives us the option of adding new features and strategies into our app.

- Event Driven Architecture

- > Construct distributed systems that can service asynchronous arriving messages associated with an event, and that can scale from small and simple to large and complex.
    >
    > An e-commerce application that uses this approach would work as follows:
    > The Order Service creates an Order in a pending state and publishes an `OrderCreated` event.

- Microservices Architecture

- > Many use cases are applicable for a microservices architecture, especially those that involve an extensive data pipeline. For example, a microservices-based system would be ideal for a reporting system on a company’s retail store sales. Each step in the data preparation process would be handled by a microservice: data collection, cleansing, normalization, enrichment, aggregation, reporting, etc.