1-3

promise 語法詳細解析：http://promise.eddychang.me/docs/contents/ch5_flow_n_error/

s3 檔案若更新，檔案內容不一樣，名稱一樣，會造成 URL 取得的內容是舊的，但點 AWS 後台查看卻是新的情況

crypto-js : 加密用的 JS 套件
Vue 提供 mixin 來讓組件能共用同一個功能
import 要 mixin 複用的 vue 檔，在組件內定義好 mixins: [ 變數 ]，即可直接使用 mixins vue 檔內的生命鉤子、data 或 methods 等等
如果變數名稱有重複以原組件為主， mixin 的會被覆蓋; 生命鉤子會一起執行，mixin 先

在組件標籤上綁定原生事件(click mouseover)等等，會無效
官網部版前要清 cache bls create-invalidation

移除 Xcode 後，原本 VScode 內的 git 功能和 npm install 會受影響無法使用，最後 sudo xcode-select —install 才能用
切換專案下 bls checkout-project
API 要使用 DynamoDB 或 Conito 等等任何操作，要在 template yaml 中的 role 設定允許 Action

Nuxt-i18n 要耕換語言時會更換網址路徑 (/tw)，官網做法是: <nuxt-link :to="switchLocalePath('en')">English</nuxt-link> 套用在公司官網上點擊感覺沒有重新載入，會回到頂部、路徑有變(/tw)而已，文字語言沒變，自己按重新整理後才會改變 (不知道是不是因為 Nuxt 模式選 SPA 的關係) 改用 <a :href="switchLocalePath('en')">English</a> 後能重新載入順利改變語言，跟 Vuetify 官網變更語言時一樣。

Nuxt 的 Vuetify 配置：https://github.com/nuxt-community/vuetify-module (能改字體、icon、載入自訂 css 等等配置)
<v-icon>mdi-facebook</v-icon> <v-icon>fab fa-facebook</v-icon> 不同家圖標依照官網資訊輸入會有所不同 (會對應到 class 名稱)
Nuxt.config.js 包含 webpack、文件各種配置

Vue3 原始碼將是 tree-shakeable，也就是說如果沒用到某些功能，打包輸出時將不會包含
vue router 在 children 內的動態路徑(如果前面沒有其他路徑名)，不用加 /，直接 :params ，不然會有在其他頁重整頁面後又回到動態頁面的 bug

Nuxt 每個 module 分陣列寫

font-display:swap; 讓字形先顯示預設，邊載入邊陸續更換顯示字形
網頁下載資源優先度調整優化(preload，preconnect 與 prefetch)：https://shubo.io/preload-preconnect-prefetch/ 和 https://blog.csdn.net/weixin_30530339/article/details/96585226
因 google font 會先載 css 再去 gstatic 拿字型，用 preconnect 與 gstatic 預先做連線能省一點點時間

今天 work report，下次要做完整投影片，版控、時程規劃、整體進度強調寫 weekly report，紀錄工作項目時數，統計比例

在 aws cloudfront 開啟 gzip 壓縮
完整 preload css 資源 { rel: 'preload', href: 'https://fonts.googleapis.com', onload: 'this.rel = "stylesheet"', as: 'style' }

關於 font family 被 vuetify 蓋掉，照著 github 文件的方式不起作用：https://github.com/nuxt-community/vuetify-module#treeShake 無法客制 css 變數 ~~原本舊版有分語言用不同字體，考慮在載入時根據語言異步載入不同語言檔案~~ 在被vuetify覆蓋的情況下就算實現也會無法作用 vuetify 的 icon 和 font 是否能自訂異步載入？ data-n-head 有 1,6 內容重複問題：只能研究 https://vue-meta.nuxtjs.org/api/#plugin-options

nuxt 頁面動效設定：https://zh.nuxtjs.org/api/configuration-transition

swiper 套件使用：https://github.surmon.me/vue-awesome-swiper/

Nuxt 用 axios 時不用在 nuxy.config.js 的 plugins 引入，在需要用的組件或 vuex 內引入就好了
vue mixin 功能只能複用 script 、 template不行
物件內若賦予新 key 值，vue watch 就算開 deep 也更新不到

HTML 標籤：kbd 認識
data-* attribute 理解，用 .dataset 能取得所有自訂 data 鍵值
querySelector()是以 CSS 選取器規則; document.querySelector(audio[data-key="${e.keyCode}"])
querySelector 和 getElement 差別在宣告變數取值後一個是靜態另個動態更新變化
認識 web event：transitionend、animationend
transition 設 all 時 transitionend 會觸發很多樣式動畫結束的事件
音檔需連續播放時，currentTime 要設0才有連續效果
classList.add、remove、toggle
e.currentTarget 註冊事件的元素本身，e.target 觸發事件的元素

按住後連續觸發後發現有 playing 樣式會殘留的問題，故自行加 keyup 事件 remove 所有 playing 樣式

Nuxt-i18n Meta 設定：https://nuxt-community.github.io/nuxt-i18n/seo.html#seo
結構化資料兩種方式：json-ld、mircodata，Google 較推薦 json-ld，但兩種達到的效果一樣，都是給 Google 讀取的結構化資料，能幫助呈現不一樣的搜尋結果(SERF)，各種效果：https://www.awoo.com.tw/blog/serp/
json-ld 是建構一份 <script type="application/ld+json"> 標籤在頁面下方，缺點是可能會使檔案變大
mircodata 是在 html 標籤裡設定屬性(埋 code)，如：<h1 **itemprop="name"**>Avatar</h1>，缺點是難以維護
sitemap 是一份給 Google 讀取的網站地圖資料，在網站中網頁數量龐大時，能幫助建立索引，避免漏掉。https://support.google.com/webmasters/answer/156184?hl=zh-Hant
sitelink 沒有明確指說要如何設定才有，只能做好網站最佳化：https://bloggingwizard.com/google-sitelinks/

Open Graph data：是種協議，方便分享網頁到社交平台上時能呈現豐富的資訊
在 meta 設置 og 屬性：<meta property="og:image:type" content="image/jpeg" />
FB 等等的是看 og，twitter 除了 og 還要額外設它專屬的屬性：<meta name="twitter:card" content="summary" />

~~照官網方式啟用 GA 不起作用 (不知是否因為目前架構是 nuxt spa 丟 S3的方式)，後來裝 @nuxtjs/google-gtag 可啟。~~ 原本官網做法是 Nuxt spa build 出一個個頁面的靜態檔案，一起丟到 S3 上，但後來發現其 meta data 全都是預設，都是要跑 js 後才會動態改變， SEO 問題還是得跑伺服 prerender，或是寫個爬蟲弄出各個 meta data (但內容部分還是空白)，後來討論決定先繼續做 SEO 優化設置，伺服等之後找時間一次做完。

用 webpack-bundle-analyzer 產生的視圖來優化哪些資源大小：https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7
昨天裝的是 gtag 和 GA 不一樣，但今天裝 GA 後就順利執行了
hotjar 分析工具安裝，在原本 html 結構內是貼在 body 尾部 script 標籤內，在 Nuxt 框架中創 hotjar.js 後在 config 的 plugins 中引入 { src: '~plugins/hotjar.js', mode: 'client' } 即可
helpscout 小工具，移植到 Nuxt 框架方式也是同 hotjar
在 vue 用 recaptcha 除了引入組件外也要在 head script 載入 js 檔才能作用
google 結構化資料測試工具：https://search.google.com/structured-data/testing-tool/u/0/ (用來檢測網頁的結構資料是否正確)
複合式搜尋結果測試工具：https://search.google.com/test/rich-results?hl=zh-tw (根據 google 指定的搜尋結果樣式設定結構資料)

Certificate Manager (ACM) 申請SSL憑證
CloudFront (全球內容傳遞服務、在各地節點加快傳輸)，建立分佈指向S3源
瀏覽器→CloudFront→S3，
CloudFront 可以設定各種 http 狀態碼需如何回應瀏覽端，(當S3回應錯誤時，可以設置導回路徑，回應瀏覽端 200 OK)
Invalidation 可以清除 CloudFront 的快取(只要連線過一次，就會在節點建立副本方便下次快取)，在重新上版時需要做
CNAME(自訂網域)指向，(管理CNAME的主帳號需設置指向)，接著在 CloudFront 設置 CNAME，指向認證過程約10分鐘

操作 docker 指令
在 docker 建置 nuxt 專案：https://medium.com/@ryanC1993/dockerize-nuxt-project-c3ab8d23cd70

vue-awsome-swiper 套件會在 server端渲染，需調整：https://juejin.im/post/5cee27e76fb9a07ee95851f8
plugins 載入的插件注意是否會引用 window 物件，mode: 'client', mode: 'server' 調整執行環境
beforeCreate()、created() 在伺服和使用端都會觸發，注意是否有用到瀏覽器環境的東西

Docker 指令集：https://joshhu.gitbooks.io/dockercommands/content/Containers/ContainersBasic.html 包裝 image 時，專案內檔案名稱嚴格遵守大小寫區別，本機執行時好像檔案大小寫不強制。已確認問題：

vuetify 斷點在伺服器渲染時無法作用，用戶端載入後不會更新
TypeError: n.setAttribute is not a function : https://github.com/vuejs/vue/issues/5919

vuetify 斷點解決方法：在 data 先設一個變數預設值取代所有有用到 $vuetify.breakpoint 的地方，在 mounted() 內把 $vuetify.breakpoint 值給 data 變數。 (header、footer 原本就可以正常作用，是因為頁面組件包太深嗎？)

已知問題 n.setAttribute 相關資訊線索：

git 到 feat/seo 都正常，到下個commit 合併 jonh移植的東西後就壞了
直接輸入網址切換可以，手機版本身操作切換正常，但網頁版就會報錯了

~/.aws/credentials：放 ID、密碼權證的地方 ~/.aws/config：放 region、output等等設定的地方 ~/.config/bls.....：bls 相關專案 config 放置的地方(bls create-project) cat ~/foo/bar: cat 指令為看檔案內容 nano ~/foo/bar: nano 指令為修改檔案內容

推送 docker image 到 ECR (為映像檔儲存庫)： (aws configure 設置 Access Key ID、Secret Access Key、region) 需要認證之類的指令最後面加 ——profile <project name> 即可抓對應的 credentials 和 config 資料

先建立儲存庫
將本地映像檔加上 tag : docker tag <image_name or image_hash> <aws_account_id>.dkr.ecr.<region>.amazonaws.com/<repository_name>
使用命令推送上去：docker push <aws_account_id>.dkr.ecr.<region>.amazonaws.com/<repository_name>