### 什麼是 favicon.ico
favicon 是網站的圖案，在使用 Chrome 的情況下，favicon.ico 會顯示在 chrome tab 上。
在網路上有很多不同的網站可以將 png 變成為 ico 檔案。我們只需要把喜歡的圖片使用這些工具變為 ico 檔案就可以直接使用。
### 使用 HTMLWebpackPlugin
在使用 webpack 時，我們可能要使用到 HTMLWebpackPlugin 來建立 html 的進入點 (特別是 react js)。我們可以通過設定 HTMLWebpackPlugin 的參數來設定 favicon。
```js
new HtmlWebpackPlugin({
favicon: Path.join(__dirname, 'src', 'favicon.ico')
})
```
有關更多的使用方法，可以去 plugin 的官方 github 去查看 :
https://github.com/jantimon/html-webpack-plugin
### Nginx 的設定檔
很多時我們都需要更新 nginx 的設定檔來設置新的功能到 nginx 上，但是在 production 的環境下，如果設定檔出錯可能會出現很大的狀況 !!
想安安全全的確保重新啟動 nginx 時不會出問題，最好是先檢查一下設定檔有沒有打錯的地方。
### 檢查
我們可以通過使用以下的 command 來檢查 nginx 設定檔 :
```sh
$ nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
```
如果成功沒有錯的話就會告訴你 syntax is ok，出錯的話則會提示你在那裏出現問題 ! 絕對是變更設定檔後，重新啟動 nginx 是必要的動作之 1 啊 !
### Reverse proxy (反向代理服務器)
Reverse proxy 是指由代理伺服器接收了來自 internet 的訪問，然後會把訪問轉發給內聯網上的伺服器，然後把伺服器回傳的結果返回給 internet 的使用者。而這個代理伺服器的工作就是 reverse proxy 了。
### 為什麼要使用 reverse proxy
很多時我們的服務器是不會直接連上 internet 的，而是由一個 firewall 來分隔開 internet 和 intranet，以確保服務器的安全。所以我們需要一個 reverse proxy 來為各種不同服務的請求分流到不同的伺服器上。
### Nginx
Nginx 除是可以成為網站伺服器外，還可以作為一個 reverse proxy。只需要在 config 檔案內設定好就可以了。
設定檔位置 : `/etc/nginx/site-availables/default`
先來看一個最普通的設定:
```text
# 設定 1 個 server 設置
server {
# 監聽 port 80
listen 80 default_server;
listen [::]:80 default_server;
# 監聽 port 443 (使用 ssl 設定)
listen 443 ssl default_server;
listen [::]:443 ssl default_server;
# 設定 ssl 使用的證書及密匙
ssl_certificate /etc/nginx/ssl/nginx.crt;
ssl_certificate_key /etc/nginx/ssl/nginx.key;
# 設定監聽的 domain (可以多於 1 個)
server_name _;
# 設定文件的根目錄
root /var/www/html/;
# 設定預設要存取的文件
index index.htm index.html index.php index.nginx-debian.html;
}
```
我們把上面的設定檔修改一下，刪除下面這兩個設定 :
```text
root /var/www/html/;
index index.htm index.html index.php index.nginx-debian.html;
```
然後在原有的位置加入下面的設定 :
```text
# 指定收到 url 的工作
location / {
# 加入額外的 http header
proxy_set_header X-Forwarded-For $remote_addr;
# 加入額外的 http header
proxy_set_header Host $http_host;
# 把訪問移交到目標伺服器
proxy_pass https://localhost:8080;
}
```
下面是完整的設定檔 :
```text
# 設定 1 個 server 設置
server {
# 監聽 port 80
listen 80 default_server;
listen [::]:80 default_server;
# 監聽 port 443 (使用 ssl 設定)
listen 443 ssl default_server;
listen [::]:443 ssl default_server;
# 設定 ssl 使用的證書及密匙
ssl_certificate /etc/nginx/ssl/nginx.crt;
ssl_certificate_key /etc/nginx/ssl/nginx.key;
# 設定監聽的 domain (可以多於 1 個)
server_name _;
# 指定收到 url 的工作
location / {
# 加入額外的 http header
proxy_set_header X-Forwarded-For $remote_addr;
# 加入額外的 http header
proxy_set_header Host $http_host;
# 把訪問移交到目標伺服器
proxy_pass https://localhost:8080;
}
}
```
經過上面的設定，就可以把來自 port 80 的訪問轉發到同一主機的 port 8080 上去了。
### Nginx
Nginx 除了可以用來作為 Web 伺服器外，它還可以用來設定為 proxy，如果配上 virtual host 的話就可以在一台主機上部署多個不同的 applications。
### Virtual host
像 apache2 一樣，nginx 也可以以不同的 domain 來分別處理的動作，只需要在 config 檔案內設定好就可以了。
設定檔位置 : `/etc/nginx/site-availables/default`
先來看一個最普通的設定:
```text
# 設定 1 個 server 設置
server {
# 監聽 port 80
listen 80 default_server;
listen [::]:80 default_server;
# 監聽 port 443 (使用 ssl 設定)
listen 443 ssl default_server;
listen [::]:443 ssl default_server;
# 設定 ssl 使用的證書及密匙
ssl_certificate /etc/nginx/ssl/nginx.crt;
ssl_certificate_key /etc/nginx/ssl/nginx.key;
# 設定監聽的 domain (可以多於 1 個)
server_name _;
# 設定文件的根目錄
root /var/www/html/;
# 設定預設要存取的文件
index index.htm index.html index.php index.nginx-debian.html;
}
```
在 `server_name` 的設定內，`_` 是指預設的情況，即是沒有配合到合適的 domain name 情況。
如果我們在 `server_name` 後加入了 domain name，就會指定這個 server 的設定為監聽指定的 domain name 訪問。例如 :
```text
# 監聽 domain name 為 19site.net 及 www.19site.net 的訪問
server_name 19site.net www.19site.net;
```
通過以上的設定就可以依 domain name 來設定多個不同的服務在相同的 port 上。
Canvas 在 html 5 面世已經有一段時間，在使用上有很多大神門寫出了出色的 library 來把 canvas 的圖像 model 化。最近要要處理一個 project 是需要使用 canvas 來畫圖層。這次筆者就選擇了用 fabric.js 來開發這個功能。
### fabric.js
先到官方網站看看 : http://fabricjs.com
由於沒有太多的時間來寫教學，所以都是主要記錄一下開發時遇到想要記低的事情。在寫這個文章時使用的是版本 4.1.0。
### 安裝
可以使用 npm 來安裝，在 react js 內使用。
```js
import { fabric } from 'fabric';
```
### Remove duplicated elements in array in JS (ES6)
We have the following case:
```js
// we have an array with some duplicated elements
let data = [1, 2, 3, 1, 4, 2, 6, 5, 6, 2];
// we want to remove duplicated elements and get the result like below
[1, 2, 3, 4, 6, 5];
```
### Set
By using `Set`and spread syntax, we can easily achieve this:
```js
// using set and spread syntax
data = [ ...new Set(data) ];
console.log(data);
> [1, 2, 3, 4, 6, 5];
```
在網站開發工作上，Dialog 是一個很常會使用得到的元件。我們可以使用現成別人寫好的來達成，不需要自動重新寫一個。
### SweetAlert2
SweetAlert2 是一個 Dialog 的 Library，用來在網站上顯示 Dialog。內建有很多使用情況及預設的 template 可以直接使用。
無論是純 Javascript 或是使用 ReactJS 都可以使用。
官方網站 : https://sweetalert2.github.io
### 自動提示
現今的瀏覽器很多時都會儲存起使用者輸入過的資料，以方便下次使用者需要再用時不需要重新載入。但是有時這樣的設定反而會引起麻煩，例如如果電腦是公用的，就可能會看到很多不同人輸入過的結果。
### 關閉功能
我們可以通過對 text field 加入參數來獨立設定每一個欄位是否出現提示。
```text
autocomplete='off'
```
實際使用 :
```html
<input type='text' name='username' autocomplete='off' />
```
這樣在輸入文字時就不會出現提示字的選單了。
### 為何防止短時間內重覆執行功能?
現時得多的應用程式都是建立在 web service 上，在使用者介面及服務器之間的溝通，很多都會使用非同步來進行，以提升使用者的體驗。為免使用者可以重覆 submit 表單，在設計使用者介面時需要防止這個情況。例如把 submit disable 以防止使用者重覆按下。
### Delay Call
要處理需要短時間內需要重覆執行的功能，但是又想限制在特定時間後才一次過累積執行 (例如即時提供 suggestion 的 combo box)，就可以使用 Delay Call 的方法。
### 實作方法
以下會使用 JS 來作個例子 :
```js
// variable for saving delay call state
let delayId = undefined;
// function want to prevent multiple call in short moment
const requestJson = () => {
// do ajax call
};
// find dom element and add click handler
document.getElementById('myButton').addEventListener('click', evt => {
// check delay call state
if( typeof delayId === 'undefined') {
// assign delay call id (timeout id)
delayId = setTimeout(() => {
// clear delay id
delayId = undefined;
// call function
requestJson();
}, 1000);
}
});
```
以上的代碼可以防止 `requestJson` 在 1 秒在被重覆執行。
### Apache
Apache (httpd) is a web server application that can turn you machine into a web server.
### Change apache settings
Open file `/etc/apache2/site-available/000-default.conf. You may see the following content:
This is the default setting of Apache, you may copy these setting to create a new one.
Change port and document root.
Then open file `/etc/apache2/ports.conf`.
Add `Listen 81` setting to config file.
### Check configuration file is valid
Before restart Apache service, better check the config files syntax is valid.
```sh
$ apachectl configtest
```
### Restart service
Restart Apache to apply new settings.
```sh
$ sudo service apache2 restart
```