[HTML] pug的註解、標籤後方有本文的處理、插值（變數）、pug-loader

https://www.getit01.com/p2018020125177324/
https://www.getit01.com/p2018020125310457/

pug中要註解可選擇是否生成在Html：
// 這樣寫會在 html生成
//- 前方有減號，這樣寫不會

使用<br>結束一行再輸入文字該怎麼寫呢？
用 enter附近的 " | " 符號例如：
<br/>
要輸入的文字

在pug裏會寫成：
br
| 要輸入的文字

<h1>title<span>sample</span>輸入的文字</h1>
也是一樣的寫法：
h1 title
  span sample
  | 輸入的文字
或是：
h1. title #[span sample] 輸入的文字

插值
https://pugjs.org/language/interpolation.html
在 HtmlWebpackPlugin 傳 data 變數
https://medium.com/@milkmidi/test-c3a23ca0cc55 - Milk Midi 奶綠茶

[Ang] 指令 directive：元件型、屬性型、結構型

component directives

attribute directives
兩種：ngStyle(直接鍵入a-選單尋找) ngClass

structural directives
三種：ngIf ngSwitch ngFor

[Ang]雙向繫結 two-way binding 、範本參考變數 template reference variables

雙向繫結 two-way binding  [( )]
會自動做到 {{屬性}} 及 (事件)，

在app.module.ts 中import ngModel：

import { FormsModule } from '@angular/forms';

component 建立 propertyName，
template tag裡寫入 [(ngModel)]="propertyName"
也可以輸入a-，vs code擴充的 angular extension pack會自動跳出選單，
tab之後就會變成 [( ... )]，非常方便。

範本參考變數 template reference variables #name
可套用到任意 tag內，有點類似 id，直接在 template對它進行動作。

[JS/Ang]鍵盤偵聽事件、event filter、TS中函式參數的宣告

输入框事件监听(一)：keydown、keyup、input -blog.csdn.net/yiifaa 甘焕的博客

這是在學ng時碰到的作業，
直接在 html塞 on***=""，以前都沒這樣寫過，為時未晚。

例如：在圖片塞 onclick，點擊後讓自己或其他元件產生變化；
在 input塞 keydown等等。

Ng的事件過濾器 event filter
(keyup)改為 (keyup.escape)或是 (keyup.enter) 這兩個常用的鍵；
搭配使用 $event.target / $event.target.value 。

在 component寫函式時，
寫入參數同時加入型別或屬性(property)有助於程式碼撰寫及除錯，
也可增加維護或修改效率，
例如：

countText(count: string) {

this.number = count.length;

}

原本未加入string，如果輸入 count.lenth，vs code不會有錯誤提示，
加入string後會出現提示。

countTextClean(input: HTMLInputElement) {

...

}

宣告之後可以在輸入‘.’時用選的，減少出錯。
也有看到有些寫法會使用any： (parameter : any)

[CSS]Sass中的HSL function

Sass HSL function -wcc723.github.io，討論顏色處理的function

常用的darken & lighten (color, n%)，
還有飽和 Saturate & Desaturate(color, n%)；

lightness(color)取得顏色的明度，就像 selector.text 的取得。

hue & adjust-hue(color, n deg)，
前者取得色環位置，後者取得調整後呈現；

grayscale(color) 調整為灰階，這裏調整後明度不變；

complement & invert (color)，互補色（負片）及反相色，
這兩個差異我也不清楚，應是跟RGB三原色、CMYK二次色有關係。
ps調色前必知的色彩原理 -愛經驗

[JS]將函數當成參數

我們知道函數可以寫成這樣：

function functionName (n, m){ ... }

也可以

function functionName (funcName, m){
...
return funcName (r)
}

[HTML]使用自定義屬性、並能通過 html5驗證：data-*

趕案子的時候因為時間緊迫，
常常直接使用 plan-U(ugly) 而割愛捨棄 plan-A~C，
導致維護麻煩，所以要常常祈求不需維護

例如下面這個 plan-U程式碼，當使用者沒有選取任何物件，
或選擇數量不同的物件時，img 會跟著抽換 ：

這樣子又醜又胖，且 attr寫死在js裏。

於是結案後回想這個問題，想到可以寫函式將他們包住，
富經驗的前端高高手朋友更建議可以將 img圖檔直接存入 html。
什麼意思？ 使用data-*
HTML 5 自訂屬性 -Inet@Web

可以在 <img>這個 tag裏新增自定義的屬性，
但隨意命名不會通過 html5的驗證，例如：
<img src='...' layer01='diamondDarkest.png' alt='...'>
這樣可以使用，但不會通過驗證。
改成 data-layer01就可以囉！
這樣一來也更加符合資料呈現放在html的原則，
接著將 attr()寫成 attr('src','data-layer01') 就更方便也更整齊囉！

依上方文章推測，也許還能這樣寫，類似物件導向的方式：
attr('src', dataset.layer01) 
最後這個寫法純屬臆測，尚未證實。

所以圖片的 .topImg img.txt2, .topImg img.txt3 原本html img tag中，
加入data-layer01 ~ data-layer04，後包入函示並給參數來調整src、display的內容，
就能解決讓程式碼更易讀、利於維護囉。