1-11

Moment.Js

時間表示字串的 'YYYY-MM-DD HH:mm'，其中小時的 H 代表 24 小時制，h 代表 12 小時制

Linux 檔案權限相關知識

http://linux.vbird.org/linux_basic/0210filepermission.php

AWS Certified Security - Specialty

cloudfront access log
IAM role 衝突 deny 永遠大於 allow
IAM policy condition 可設置更彈性的條件，例如限制某個時間段才有用，限制某個ＩＰ
NACL 作用於整個 subnet
SG 作用於 instance
NACL stateless 兩邊都要設才會通，有 ruleID 越小越先套用，可設置 allow、deny
SG stateful 一邊設另邊會通，無 ruleID，可設置 allow

Vue Web Component

props 傳值用小駝峰命名變數在組件內會無法正確解析(用烤肉串命名接收也無法)，故一律用小寫命名，但 $emit 事件命名不在此限。

CloudFormation Yaml

條件函式內不能用 ImportValue

React.JS

JavaScript 組件函式庫，相比與 Vue ，綁定 Dom 與資料要設置的比較多，且寫法較接近原生 JS (Vue 很多語法糖包裝掉了)
使用模板語法 JSX
單向資料流傳遞 props
組件內自己設置及使用的資料 state，可向下傳遞
修改 state 只能使用 this.setState()
若有雙向問題，需將共用的 state 提升至共同父層，由父層提供 props 資料與修改 state 函式供子組件使用

React.JS

為了方便閱讀，我們將回傳的 element 分成數行來寫，並加上 () 括號，如此 JavaScript 才不會在 return 後加上一個分號並破壞我們的程式。

return (
    <div>
    <h1>Hi</h1>
    </div>
);

Array & fill()

建立陣列其他種方法

let list
list = new Array // []
// 若只有一個參數且是數字將會建立對應數量的 undefined 的陣列
list = new Array(3) // [ <3 empty items> ] // list[0] -> undefined
list = new Array(3, 4) // [3, 4]
list = Array() // [] 與 new Array 輸出相同

Array.fill() 會將陣列內每一個元素替換為 fill() 裡的參數

object spread

如陣列展開一樣，物件也可以展開：var newPlayer = {...player, score: 2}; 一樣不影響原物件，但重複的 key 會覆蓋前面的，和 Object.assign() 一樣

string spread

字串也可以進行 ...spread

const object = {...'string'} // object { '0': 's', '1': 't', '2': 'r', '3': 'i',.... }
const array = [...'string'] // array ['s', 't', 'r', 'i', 'n', 'g']

for in、for of

in 用於迭代 key 值，of 用於迭代 value 值

new Set()

Set 有點像是陣列 (array)，Set 中的元素 (element) 可以是任何資料型態，兩者不同的地方在於 Set 中所有的值都是唯一的 (unique values)，不會有重複的值，當你存入重複值 (duplicate values) 會被忽略。
當你向 Set 中加入新元素時，Set 內部會用 === 來判斷是否有重複值(因為 NaN !== NaN，所以 NaN 是用另外個方法判斷)

Athena

查詢會有 cache token，就算之後有建立正確的 table 上去，先前查詢失敗的 token 續用會 cache 住之前的錯誤。

網頁載入速度優化(1)

CSS 比 JS 更加堵塞：每次載入網頁時，CSS 樣式必定讀取建完 CSSOM 之後才會繼續建立 DOM，因為 CSS 讀取若是漸進更新，可能會產生同一個元素一直變更樣式而浪費效能，並讓使用者困惑。(DOM 可以漸進式，因為節點彼此不會影響，但 CSS class 可能會)
HTML 讀取解析 → 遇到 link 標籤停下並請求 CSS 接著讀取建立 CSSOM → 繼續解析 HTML → 遇到 script 標籤看有無 defer 或 async 決定後續流程 → 解析完 HTML → DOM 與 CSSOM 組合成渲染樹 → 一些渲染步驟 → 繪製到頁面上
script 標籤依需求加上 async, defer
原文翻譯：https://medium.com/@wyattkidd/%E9%AB%98%E6%95%88%E8%83%BD%E7%B6%B2%E7%AB%99%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F-f7b7b9499b2e

CSS 檔案異步下載

在 link 標籤設置 media 屬性，不符合目前條件的話將會等到渲然完畫面之後才下載，可增進初次渲染效能。
preload 和 media 一起用時，不符合條件就不會預加載。
<link rel="stylesheet" href="other.css" media="(max-width: 1439px)">

git stash

git stash 指令可將目前工作目錄的檔案先暫存起來(類似commit)，然後可切換到其他分支不影響
git stash save -u "我是註解" 有註解功能
git stash pop 將暫存取下在目前分支上
git stash -u 將未建立索引的檔案也暫存
git stash clear 將暫存刪除
git stash list 看目前有哪些暫存

網頁載入速度優化(2)

preload, prefetch, 和 preconnect
<link rel=preload as="style" href="main.css"onload="this.rel='stylesheet'">
preload 為告訴瀏覽器此資源優先度高需先下載，as 的值會影響優先度，onload 事件綁定後就不用再多寫一個 link 標籤讀取資源了(preload 為下載但尚未讀取)。
預加載 CSS 好處是不會阻塞 DOM 解析，但畫面樣式會變動。
link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="myfont.woff2">
字型預加載需 crossorigin="anonymous"，否則會下載兩次。
Preload Header：server response header 如有定義 preload 資源，則會直接觸發瀏覽器預加載，不需要等 html 解析到有 preload 的標籤。
prefetch 為優先度最低的，主要用於其他頁的檔案或稍後有可能用到的資源
preconnect 為預先建立握手連接(節省時間)
結論: preload 告訴瀏覽器：「這份資源對目前的頁面是必要的，請用最快的速度下載此資源。」
preconnect 告訴瀏覽器：「這個網頁將會在不久的將來下載某個 domain 的資源，請先幫我建立好連線。」
prefetch 告訴瀏覽器：「這資源我等等會用到，有空的話幫我先下載」。

重新認識 Vue.js (1)

若是 <select> 標籤中 v-model 的值無法對應到任何一個選項時，這個 select 標籤會預設為未選中的狀態
在 iOS 系統中，會讓使用者無法選擇第一個選項，因為此時 iOS 不會觸發 change 事件。所以為了解決這個問題，我們可以在第一個 option 的空值選項加入 disabled 屬性來排除此問題。

<select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

<input> 標籤中輸入數字，取值出來後的型態會是字串(就算 input type=“number” 也一樣)
故可以用修飾子 .number 來轉型 (若輸入的值無法轉 number 則保持字串型態，不會有 NaN 產生)

重新認識 Vue.js (2)

v-pre 讓模板渲染能呈現原始內容，不會解析。

<div v-pre>{{ text }}</div> // <div>{{ text }}</div>

v-on 觸發事件時，如果沒有指定參數，預設就會將 event 物件當作參數傳入
如果在 methods 需要傳入參數的情況，則可以在模板中指定傳入 $event

<button v-on:click="plus(amount, **$event**)">Plus</button>
//
methods: { 
    plus (amount, **event**) {
        console.log(event.target.tagName);
        this.count += amount;
    }
}

事件修飾子 .self，只會能由自己的事件觸發，從子層元素傳來的事件不會觸發。常見範例是燈箱：按周圍會關閉，按內容不會。
一個指令可以同時加入多個修飾子，而修飾子的順序會影響執行的結果。
如 v-on:click.prevent.self 會先執行 prevent 的動作，阻擋所有的點擊行為；而 v-on:click.self.prevent 會先執行 self ，只會阻擋該元素自己的點擊行為。
事件修飾子 .passive，.passive 等同於 addEventListener 的 passive 屬性，用途是告訴瀏覽器這個事件處理器會不會呼叫 event.preventDefault 來停止瀏覽器的原生行為。
這個屬性較常見在用來改善 scroll 事件的效能，因為以前瀏覽器要多判斷 scroll 事件會不會被 preventDefault ，加上 passive 屬性之後就直接略過這個判斷，當 passive 為 true 表示此事件不會被 preventDefault。換句話說， .passive 修飾子無法與 .prevent 一起使用，因為這時 .prevent 會直接被無視。
.exact 用來精確判斷鍵盤修飾子，改善以前設置 .enter 時，同時按下 Enter 和其他鍵也會觸發。
加上了 .exact 之後就只有在按下 Enter 鍵的時候才會執行事件。@keydown.enter.exact="addToMessages"
v-if 群組渲染：
v-for 也可遍歷物件 v-for="(val, key, index) in book"。由於物件 (object) 在 JavaScript 本身並不帶有順序的特性，物件屬性間的順序會依照瀏覽器對 Object.keys() 實作方式的不同而有所差異，因此 v-for 在不同瀏覽器環境下，渲染物件的列表順序可能會有所不同。
v-for 陣列更新觸發渲染問題：因 Vue 2.X 是使用 Object.defineProperty，故除了對陣列做重新賦值的情況，對陣列內元素做更新的情況無法觸發畫面更新。而 Array 原生方法中會使原陣列改變的方法 (push、sort、splice...等等)，Vue 有針對這些做包裝改寫，使得操作這些方法時能觸發畫面更新 (所以我們在 Vue 實體中使用的上述陣列方法其實是 Vue 改寫過的)，但到 Vue 3.0 後，底層狀態更新機制改為 Proxy API 來處理，就不會有陣列更新沒重渲的問題了。

JavaScript 30 - Day6 - Type Ahead

fetch(url, { options }) 會回傳 blob 物件 (含有 status code 和其他 response 相關資訊)，但要用 blob.json() 方法才能把 body 的資料取出，而 options 則類似 axios 那樣配置 header、body 那樣，fetch API 請求方法皆可用 (get post...)。
使用 replace() 後會回傳新字串，不會影響原本的參考值。

JavaScript 30 - Day7 - Array Cardio Day 2

Date() 回傳字串，new Date() 回傳物件(new Date 也可，但加括號後面可直接接方法：new Date().getDay() )。

JavaScript 30 - Day8 - Fun with HTML5 Canvas (1)

<canvas class="test" width="1000px" height="700px" style="width: 1000px;height: 700px;"></cancas>
HTML 屬性 width 和 height 實際上是設置內容的寬高，如有給 class box-sizing: border-box; 故其 border 寬度最終還是會加上去。若用 inline style 或 class 內設置寬高，則可以壓過 HTML 屬性設置的寬高。
HTMLelemement.getContext(type, { options }) 回傳一個 canvas 的物件，若該元素已建立過 canvas，則無法再建立第二次，其實例方法僅能取得 type 對應的，無法取得其他 type 的方法。

重新認識 Vue.js (3)

Vue 父子组件資料傳遞另一種方法(inheritAttrs、$attrs、$listeners)
$attrs 能取得父組件在子組件上傳遞的 data ，但沒有在子組件的 props 定義的資料(class、style 除外)，與監聽的事件。在子組件內能用 v-``bind=“$attrs” 再傳遞給孫組件使用。($attrs 不能直接使用，通常作用為將此組件沒用到上層傳來的資料或是監聽事件傳下去給子組件使用)
class 或 style 會將父定義子和子自己設置的值做合併。除此之外，若 key 相同，父定義的會蓋掉子的，故可配合下列 inheritAttrs 來防止子屬性被蓋掉。若監聽事件名稱相同，則會從父開始依序觸發事件。
inheritAttrs 預設為 true，會將 props 沒定義但是父組件有傳遞的 data，直接綁在 HTML attr 上，設 false 則不會綁在 HTML attr 上。(class、style 除外)
$listeners 在 Vue 3.0 已被棄用，其之前使用情境用的 .native 事件修飾子也已被棄用。
上列幾種方式能實現父傳孫的操作，目前想到比較好的應用場景是對現成的 Vue 組件庫做二次封裝。
假設父組件傳值 A,B,C 給子，子再用 $attrs 給孫，這時若子有定義 props 取 B，則孫只能取得上面傳來的 A,C。
若有需要 reset 組件內的 data 可以用下列寫法：

resetData () {
    Object.assign(this.$data, this.$options.data.call(this));
}
// 後面用 call() 綁定 this 是因為，若 data 定義有用到 this，會造成 undefined
// 因為調用這個方法時內部的 this 是指向 $options，所以要用 call() 綁定正確的 this 給 data

:bind 綁值時變數名稱規範烤肉串，在組件內 props 取值用小駝峰命名。

重新認識 Vue.js (4)

props 在組件初始化時 (還無法 access 到 this ) 會優先於 data、computed 等等，所以 validator 檢查時是無法取得data、computed、methods 等等的。
props 傳遞物件時，現在強制子組件無法修改物件內值，若綁 v-model 或修改會報錯。
若將物件內的值一個個 bind 太多的話可用 v-bind=“object” (會自動做解構)，即可在子組件內直接以 key 值接收。
:is 除了幫助在特定標籤內渲染組件外： <li is="your-component"></li>，也可以動態渲染組件：<component :is="'your-component'" />。
<keep-alive> 同時間只會有一個直屬的子組件被渲染。
<keep-alive> 有提供 include、exclude 與 max 可供選擇性快取。

// 多種表示方式: 字串、正則、陣列 (:exclude 一樣)
<keep-alive :include="'home-component,list-component'">
<keep-alive :include="/(home|list)-component/">
<keep-alive :include="['home-component', 'list-component']">
// 會保留最後 "2" 個組件的狀態，:max 可與 :include 或 :exclude 搭配使用
<keep-alive :max="2">

slot：https://book.vue.tw/CH2/2-4-slots.html (slot 沒常實際使用故需要紀錄的東西太多所以直接貼文章)
<transition> 動態切換元素時，不會有動畫效果的問題：原因是 vue 為了增進渲染效能，會重複利用已存在的元素，所以若切換的兩個元素都是用 div 標籤，則不會重新渲染 (跟 v-for 要 bind key 一樣原因)，所以這時只要加 :key 給元素唯一值即可正常動畫。
若是元件間的動畫切換，則不用 :key，用 <component> 搭配 is 即可。(v-if else 也可)
若在 <transition> 下使用 v-show 切換元素，則會發生報錯，原因是 transition 只能適用單一節點 (v-show 只是隱藏而不是從 html 去除)，若是有多個節點的情況下需要用 <transition-group> 來替代。
<transition-group> 比較不一樣的地方是，會渲染真實的元素出來包覆，預設是 span，可設 tag 屬性變更標籤; 再來是其內元素”必須“綁 key 值。最常使用場景是和 v-for 一起做搭配。

Node.js

fs.unlinkSync(path) 用於將檔案刪除，資料夾不行。

CSS sticky

position: sticky;

<div class="scroll-container relative">
    <div class="item-container-1">
        <div class="item-title sticky **top-0**"></div>
        <div class="item-content"></div>
    </div>
    <div class="item-container-2">........
</div>

使用架構如上，需有一個可定位和可滾動的區塊，內有多個容器元素，容器內部元素才可套用 sticky 屬性 (需給定位點才會生效)，在區塊容器還在可視區域內但 sticky 元素超出可視區域外時，固定在指定的位置，當滾動使區塊容器離開可視區域時，sticky 元素才會跟著離開。
sticky 屬性尚無法在橫向軸作動。

CSS text-align: justify

text-align: justify;

使內容填滿寬度，左右兩邊是切齊的，但不包含最後一行。視覺上比較好看。

CSS float

float: right; // left, none
clear: right; // left, both, none

多用於實現文繞圖排版。
由於浮動元素有可能會影響下一個父容器的內容，故通常會在浮動元素的父容器設置 after 偽元素的 clear 屬性，在最後清除浮動。

Moment.Js​

Linux 檔案權限相關知識​

AWS Certified Security - Specialty​

Vue Web Component​

CloudFormation Yaml​

React.JS​

React.JS​

Array & fill()​

object spread​

string spread​

for in、for of​

new Set()​

Athena​

網頁載入速度優化(1)​

CSS 檔案異步下載​

git stash​

網頁載入速度優化(2)​

重新認識 Vue.js (1)​

重新認識 Vue.js (2)​

JavaScript 30 - Day6 - Type Ahead​

JavaScript 30 - Day7 - Array Cardio Day 2​

JavaScript 30 - Day8 - Fun with HTML5 Canvas (1)​

重新認識 Vue.js (3)​

重新認識 Vue.js (4)​

Node.js​

CSS sticky​

CSS text-align: justify​

CSS float​

Moment.Js

Linux 檔案權限相關知識

AWS Certified Security - Specialty

Vue Web Component

CloudFormation Yaml

React.JS

React.JS

Array & fill()

object spread

string spread

for in、for of

new Set()

Athena

網頁載入速度優化(1)

CSS 檔案異步下載

git stash

網頁載入速度優化(2)

重新認識 Vue.js (1)

重新認識 Vue.js (2)

JavaScript 30 - Day6 - Type Ahead

JavaScript 30 - Day7 - Array Cardio Day 2

JavaScript 30 - Day8 - Fun with HTML5 Canvas (1)

重新認識 Vue.js (3)

重新認識 Vue.js (4)

Node.js

CSS sticky

CSS text-align: justify

CSS float