最近換了 Github 的密碼，發生 git push 推不上去的問題，查了資料推斷或許是 git-credentials 的快取與遠端認證產生衝突，決定使用 SSH 方式重新連線 GitHub，嘗試成功後來紀錄一下 SSH 的連線步驟。

1. 移除 local 儲存的認證與 Sourcetree 初始化

Mac 開啟 App「鑰匙圈存取」，輸入 git 查詢並刪除所有結果。

Nuxt.js 是以 Vue 為基底所建構的框架，透過 Nuxt.js，我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。

建立專案

在終端機輸入執行指令 npx create-nuxt-app <project-name> 後，會進入問題面板，能按照需求選擇開發上習慣使用的工具，如套件管理工具、伺服器框架、UI 框架、測試框架、渲染模式、版本控制系統等。

不過 Nuxt 還未全面支援 Sass 和 Vue3，所以如果在 Nuxt 中使用 Sass/Scss，或是 Vue3 的 Composition API，就會報錯。

安裝 Sass

Sass 的解決方案較為容易，在終端機執行以下指令即可開始使用 Sass。

npm install --save-dev sass sass-loader@10 fibers

最近對爬蟲感到興趣，幾天的研究發現 Puppeteer 這套由 Google 開源、使用無介面操作 Chrome 做自動化測試的 Node.js 函式庫也能用來爬取資料，因此決定使用 Node.js 搭配 Puppeteer 和 Axios (基於 promise 的 HTTP 庫)，自動化將先前作品「吉卜力相簿」 上的一千多張作品劇照下載下來。

Puppeteer 可由 npm 進行安裝，如果電腦中有基於 Chromium 的瀏覽器，可下載容量較小的核心版本，之後再將啟動路徑設置為應用程式路徑即可 (範例使用 Brave 瀏覽器)：

$ npm i puppeteer-core

設計前先從調查開始，釐清目標和傳達對象後簡化傳達主旨，選定氣氛/風格/調性 (正式、隨性、黑白)，依照以上內容思考策略。

要暢銷就要做好從打動人心 (共鳴) 到下單購買的動線。將感性關鍵字和視覺圖像結合，一頁一主題，視覺版面 (Viewport) 使用單一標語、單一視覺和製造留白。

只用最多兩種正規供應商字體 (fonts.com)；選用無襯線體 (Gill Sans, Frutiger, Gilroy, Avenir) 和襯線體 (Palatino, Optima, Trajan) 做搭配，商業場合基本上使用可讀性高的明體和黑體；差異化可使用字重 (粗細) 表現。

以願景或理念，決定色數。參考色票，依需求以順序選定：主色 (品牌故事)、底色、文字色、第一輔助色 (與主色明度相同、色相不同) 和第二輔助色 (與主色明度相同但彩度較低)。範例：主色 + 白 + 深灰 + 輔助色 (對比/協調功能)、

單色訴求是利用主色加深印象的戰略 (可口可樂)；巴斯配色適用二至三種顏色做延展，活用獨特色彩組合的戰略 (FedEx)；調色盤配色是由多種顏色組合而成，隨著服務或品牌的情況增減色數，商標色彩得以生動擴展，又被稱為動態識別 Dynamic Identity (Google 的各種 App 商標)。

使用照片或插圖前應做到釐清目的、調查和思考表現手法 (主視角構圖為客觀/自我帶入/想像畫面)。可使用手繪表達美味感、用大版面強調照片或插圖。採光影響九成照片品質，可在照片校正後利用濾鏡效果調色或套用藝術特效以營造風格 (親切/沈穩/悠閒)。

如果有時間和預算，建議委託創作者或代理商製作原創素材；若是使用網站上商業用途的素材，先了解是否已被大量刊登，且務必詳閱使用規範和授權條款，如果寫得不夠清楚，就盡量不要使用；若要委託繪製或拍攝，先了解自己需求類別、風格、主題和工具，備齊形象資料、繳納期限、合約、檔案類型等條件，再發案給特殊專長接案者進行委託。委託時討論由自己還是接案者保有最終決定權，並在每個階段做到共享、確認和同意。委託結束後，使用接案者的作品請標示原作者姓名。

整理設計風格，需要關注視線誘導、刪除不必要的元素、統一字體和外邊距，以及做到適當留白以凸顯主題。《設計是什麼？保羅．蘭德給年輕人的第一堂啟蒙課》裡提到「設計是形式與內容之間的關係。 (Design is a relationship between form and content.)」想讓人讀懂內容，排版就要簡單明瞭、注重共鳴；若希望讀者能樂在其中，編排上就盡量發揮創意。此外，也需注意設計的通用性，即能否在各種媒體尺寸上延展呈現。

意志力的總量是有限的，一整天能專注 3–4 小時算得上是相當不錯。讓人疲累的是選擇而非行動，與其想辦法讓自己專注，不如不做某些事。專注力能透過訓練強化。每次專注於一個行為，使其習慣化，就能培養出專注力。

晚上 8 點睡到早晨 4:30 為最佳睡眠作息，最好在晚上 10 點至凌晨 2 點進入深層睡眠。起床後 2 小時、早餐後 30 分鐘為黃金時段，建議養成易上手、幫助進入專注狀態的儀式。

根據人體晝夜節律，上午 10 點認知能力最高，最容易進入專注狀態，之後注意力隨著時間逐漸下降。建議早於 10 點起床，以 15 分鐘左右的運動活化大腦，讓自己流點小汗，像是慢跑、走路、伸展或游泳等；用餐採低升糖飲食：8:00 早餐、10:00 點心、12:00 午餐、15:00 點心，於 1–2 小時補充水分，並做到在早上吸收、中午輸出、晚上複習。

釐清對自己而言最重視的目標，以實現該目標為目的來佈置房間。靈感和天花板高度成正比，在天花板低的房間較能專注複雜的作業；在天花板挑高、光線昏暗的地方，較能構思出平常想不到的獨特點子。

預先做好避免為雜事做判斷的機制。例如，將筆電開著避免進行還要打開的決定、手機關機或是思考穿著等；保持桌面整潔，將分心事物收納淨空。

坐姿要端正：腰桿挺直，收下巴，頭擺正，膝蓋併攏，臀部與腰垂直，腳底平放。

重複運用短期專注，使用番茄鐘設定分段、白噪音協助專注，25 分鐘專注於單一行動上，時間到就「立刻」休息，5 分鐘短暫休息後再回到專注狀態中。可於每 15 分鐘站起來一次或者站著工作，以休息時絕不動腦、午睡不超過 20 分鐘為原則。

情緒也會影響專注。喜、樂、心流體驗能提升創造力，加快決斷時間；怒能增加行動力、解決問題的能力；哀促使冷靜、客觀判斷。可試著將情緒加入規劃。

運動習慣能強化大腦，讓大腦變得較不易疲倦。可在上午曬點太陽、在看得見大自然的地方做輕量運動；也可以做高強度間歇訓練、爬樓梯和快走；每天靜坐 3 分鐘可鍛鍊意志力，以專注在呼吸為目標，鼻子吸氣、吐氣各 7 秒為一週期。

一周留白兩天，處理未完成的事或放鬆；疲憊時可透過睡眠、對眼睛熱敷、肢體伸展、對不安情緒的覺察與紀錄來恢復；平常接觸令人振奮的話題、話語或詩可提高動力。

每一天結束，寫下一句對日常生活的幸福描述或感謝，問自己：「如果今天是人生的最後一天，我想做什麼？」並在十分鐘內做好明日「能完成」的 6 項待辦事項清單，安排上刻意加入休息和偷懶時間，隔天依順序、一次一件完成。待辦事項一開始可從簡單的事情著手，以掌握節奏和維持自信。睡前靜坐一下，睡眠環境盡量保持黑暗，別在睡前滑手機。

兩個生理機制掌管睡眠：近日節律與睡眠壓力。近日節律週期接近 24 小時，使人擁有大約 15 小時清醒時間和 9 小時睡眠；睡眠壓力由腺苷造成。清醒時，腦中腺苷濃度逐漸增高，若清醒達十幾小時，高濃度的腺苷將形成睡壓，而咖啡具有干擾睡壓的能力。

近日節律和睡眠壓力各自獨立運作，只要不進行睡眠，腺苷濃度將持續增加，然而近日節律週期還是不變。

睡眠時，會先進入非快速動眼期，然後再換成快速動眼期持續交替。在非快速動眼期間，腦波活動平緩，此時無用的神經連結會被清除；在快速動眼期間，腦波活動活躍，通常會做夢，此時會加強必要的神經連結。

晚睡將減少非快速動眼期效果；早起將減弱快速動眼期效果。睡眠不足也造成腺苷清理不完全，長期睡眠不足導致愈加疲勞的惡形循環。

提升睡眠品質訣竅：固定時間起床、後或黃昏可睡半小時、每晚睡眠 4–5 個 1.5 小時的週期 (每週 30–35 個週期)、睡前 1.5 小時準備入眠、保持環境昏暗低溫和心情平靜。

JavaScript 能做許多事，尤其透過瀏覽器的 API 或套件，我們得以悠游於巨量資料中，將資料轉換為與使用者溝通的介面，以下就來分享 15 個實用的 Vanilla JS 程式碼：

本文翻譯自 40 Tips that will change your coding skills forever。作者 Kesk 列出了一些對職業生涯有幫助的事情，很快就能讀完，但要正確應用到生活中可能需要一生的時間。Kesk 從事將近十五年的 App 開發，但有時仍不得不停下來思考軟體開發這行的重要心法。

1. 將程式碼拆分為不同的小功能。
2. 如果該下班時還沒有解決問題，那就關機，明天再做吧！別在想了。
3. YAGNI 原則：除非必要，否則不添加新功能，也別預測未來，你只需要盡快做出能用的東西，只為必要的部分和當前的需求撰寫程式。
4. 你不需要了解所有知識，也不需要了解所有框架。最重要的是你有好的基礎，在使用框架前先對程式語言深度了解，並且學習 SOLID 原則或是如何撰寫簡潔的程式碼。
5. KISS：「愚蠢地保持簡單」或是「保持愚蠢的簡單」是一項設計原則。指出大多數系統如果保持簡單而不是搞得更複雜，效果會是最好的。儘管這合乎邏輯，但有時很難實現。
6. 別想太多。
7. 如果在問題或 bug 上花太多時間，先離開一陣子，通常從辦公室到洗手間的路上，最好的解決方法就會誕生。對客戶或同事感到生氣時，也建議離開一陣子，如果你還想保住飯碗的話。
8. 學習撰寫有用的測試和做 TDD。TDD 是一個軟體開發過程，依賴重複非常短的開發週期：撰寫測試、執行所有測試、發現問題編寫程式碼、執行測試、重構程式、重複循環。
9. 先解決問題，再撰寫程式。別在不知道該做什麼的情況下就開始寫程式。
10. 別記程式，而是了解邏輯。
11. 學習如何更好的使用 Stack Overflow。如果要複製貼上 Stack Overflow 的解決辦法，確保你已經理解了。
12. 如果想學習新東西，那就練習。做一些範例並讓它們發揮功能，僅靠閱讀學習是不夠的。
13. 閱讀他人的程式碼，也讓別人閱讀你的程式碼。組隊開發和互相審查程式碼都是不錯的主意。
14. 別重造輪子。
15. 你的程式碼是最好的閱讀文件。
16. 知道如何 google 資料。這需要許多的閱讀經驗，以了解自己需要查什麼。
17. 你的程式碼在未來可能由他人進行維護，所以在撰寫時將這點銘記於心，別總想當個最聰明的人，盡可能讓程式可以當作故事來閱讀。
18. 使用 Google 解決錯誤最好的辦法就是複製貼上。
19. 永遠不要放棄，不管如何，你終會解決問題。你總會有狀況不好的時候，但總會過去。
20. 平靜、平靜、再平靜。解決問題最好的方法就是讓自己有顆安逸的心。
21. 學習軟體設計模式。設計模式是程式設計中常見的問題解決方案，每個模式都像一個藍圖，你可以對其進行自定義，用自己的程式碼解決常見的問題（別重造輪子）。
22. 使用整合工具，並儘可能自動化。
23. 做 Code Katas，它是編程中的一個練習，可以幫助工程師透過重複性和練習熟悉技能，練習範本參考這裡。
24. 讓程式碼關注於介面，而不是實現內容。依賴注入是必要的，可參閱 SOLID 原則。
25. 重構 — 測試 — 重構。重構是藉由重組現有程式碼、更改、不透過外部行為而優化內部結構的技術。
26. 當需要的時候尋求協助，別浪費掉時間。
27. 熟能生巧。
28. 雖然有時候評論可以幫到你，但別花太多心力在上面，他們很可能已經過時了。
29. 了解你的開發環境，投資一個夠強大的，像是 IntelliJ。
30. 重複使用組件。
31. 開發 web 應用程式時，以移動設備優先，並考慮效能和頻寬。
32. 別過早優化和重構程式，盡快做出最小可行性產品更為重要。
33. 永遠不要為了節省時間，選擇沒什麼效率的方式抄捷徑。每次寫程式時，都量力而為。
34. 遵循文件標準。
35. 使用者不是技術人員，開發使用者介面時為他們想想。
36. 總是使用版本控制系統，如 GitHub 或是 Bitbucket，並頻繁的做小提交。
37. 使用 log 比調試程式碼要好得多，請 log 所有關鍵的部分。
38. 寫程式時保持一致性。如果有使用撰寫風格，就始終使用同一種；如果是和許多人協同開發，確保所有團隊成員使用同種撰寫風格。
39. 別停止學習，不過比起新的語言和框架，還是將注意力放在軟體開發的基礎上吧。
40. 最後，對你在做的事情保持耐心和熱愛。

感謝閱讀到這裡，希望這些對你有幫助。