前言在某些情境上，其實使用computed或是watch都可以達成相同需求，可能還可以再加上一個method來一起做個比較，這些做法都可以做到，那要使用哪一個呢？ 這個問題令人感到困惑，整理此篇我做研究後的心得。 模板的意義所在首先，.vue檔案是由以下三個部分所組成的： 12345678<script setup></script><template></template><style></style> 最上方是程式碼區塊，中間是模板區塊，而最下面是樣式區塊，彼此各司其職負責自己領域的部分，包括程式邏輯、顯示畫面、畫面樣式，也許寫在一起不是不行，但確實把它們區分開來會讓可讀性增加，也比較好維護。 基於這個原因，template的區塊裡面，會建議只會幫忙做呈現畫面上的處理，頂多只有一些簡單的邏輯像是顯示不顯示各種資料。 複雜的邏輯可以寫嗎？ 也是可以寫在template，因為 vue 當中有提供文本插值的方式(如下)，使用兩個大括號給包起來，裡面就能放各種值，甚至也可以放置一段表達式(Expressions)，代 ...

會想寫這一篇是由於我發現在學習程式的時候，幫助我最大的，很多其實都不是那些很專業的文章或是影片，這會有一點反直覺，寫的太好太詳細的，有時反而沒辦法讓我理解。 反倒是像我一樣，學習程式沒有很長時間的人，他們所寫的心得或是筆記，竟然我吸收起來會比較快，這到底是什麼神奇的魔法，我開始思考了起來。 理解所需要的養分曾經有人跟我說過這樣一句話： 「要怎麼證明你已經完全懂了一個概念，你就去找完全不懂這個概念的人，講給他聽，他如果能因為你解釋完後就能懂，那就代表你真的懂這概念了。」 也就是所謂的，今天要是把專業用專業解釋，那還是只有專業的人能聽懂，但如果把專業的東西用很白話來解釋，那麼就不會侷限專業的人，而是所有人都有辦法懂。 學習時可以去看定義是最為正確的，但是要解釋給別人聽時，就得轉化成簡單的語言，其他人才能聽得懂，這是很重要的能力。 在電影《三個傻瓜》中，有一個場景是老師問學生們對「機器」的定義，主角用非常簡單的方式解釋： 任何讓工作變得簡單或是省時間的就是機器。熱的時候按一個按鈕，電風扇，機器。和很遠的朋友聯絡，電話，機器。每秒幾百萬次運算，計算機，機器。 但老師不買單，老師想要聽的是「機器 ...

這篇文章是關於我的寫 blog 的想法和經驗，我持續寫技術 blog 一段時間了。一開始，我寫 blog 的動機很簡單，就是看到其他一些技術大神們都有寫自己的技術文章，我也想像他們一樣，所以我開始了自己的寫 blog 之路。 當時並沒有太多深入思考，我只是覺得先開始寫就對了，也沒有覺得這個事情很困難。 最初的動力來源： 其他人在寫，我也來寫看看 覺得不困難，我來我也行 一開始的狀況一開始，我選擇使用 Google Blogger 作為寫 blog 的平台，這是一個非常容易上手的選擇，只需要一個 Google 帳號就能開始寫作，對於一個對這方面一無所知的人來說，這是一個很好的選擇。 當時我的部落格位於 bloghttps://appcs342.blogspot.com/ 學習時蠻常看別人文章的，想說也就那樣吧，應該不會太難，但是很快的自己就面臨到許多問題。 首先是很單純的就是我寫不出來。 不知道要寫什麼毫無頭緒，就算有了一個想寫的東西，但是下筆又很難下筆，覺得自己什麼都寫不出來。 我的文筆很差，我無法清晰地表達自己，相關技術知識也覺得掌握很差，所以我寫出來的內容看起來就像在胡言亂語 ...

在git hooks的使用中，其實除了原生的方式外有個更方便的工具已經出來。 那有關於什麼是git hooks可以看我上禮拜寫的文章。初探Git Hooks，優化Git工作流 | Vic’s Blog 在這邊簡單來說，git hooks 是每次 Git 存儲庫中發生特定事件時自動運行的腳本。 我想要做git的特定事件，像是push、merge、commit的執行前後，想做一些事情比如檢查，那就得靠git hooks的幫忙。 但那卻不是一件容易的事情，對很多人來說連找出.git隱藏檔都是困難的事情，更不用說自己寫腳本。 而husky就是為此而生，它讓操作git hooks變的更加簡單。 在Git專案中使用husky统一管理hooks，變成不難上手，性價比很高的一件事情。 這篇不會講解husky內部究竟是怎麼實現的，原始碼的解析，會著重在如何使用，以及理解為什麼需要有這個工具上，但研究的時候有幾篇提到這個部分，連結也會放在參考連結。 官網的安裝及使用說明得非常清楚，連結已放在最下面的參考資料，這邊我紀錄的是我自己比較偏好的方式，我選擇Automatic（自動）的安裝方式，這也是官網所推薦， ...

git是現在主流的版控控制，寫軟體的人基本上都知道，但關於如何優化工作流以及什麼是git hooks知道的人可能就不多，因為這個部分是一種「優化」，使用了會更好，但是不用也沒關係，那我研究後覺得git hooks學會之後好處很多，那下面會儘量用好懂的方式來記錄跟介紹。 不講腳本寫法，不講複雜應用，只講整體的概念以及簡單的小應用來幫助理解概念。但還是要有對於git的簡單知識，不然可能看不懂這篇。 這篇文章主要會有以下這三個大重點： 什麼是git hooks 為什麼要使用git hooks git hook基本的應用有哪些 什麼是git hooks用一句話來講解這個概念，就是「每次使用了git的資料庫中發生特別事件時(像生命週期)自動運行的腳本」。 生命週期就是像人的一生中，有嬰兒、壯年，生、老、病、死，那git的特別事件我覺得也像是生命週期一樣，就是git的一些重要環節上代表各個git的生命週期，這個稍微就會解釋。 腳本就是一種程式的文件，我會把它想像是可以做某一種事情的程式，像是玩遊戲的時候，假如覺得一直在做一些重複性的事情很煩，那就可以寫一個滑鼠自動一直點的腳本。 而使用了git ...

瀏覽器本身是可以儲存資料的，方法不只一種，目前我知道有以下這些方法： Cookies localStorage, sessionStorage indexedDB 其中indexedDB沒有去詳細理解內部實作細節，因為使用到的情境似乎很少見，我自己從來沒用到過，可能需要有龐大暫存的需求情境才有機會碰到，這個部分我只紀錄幾篇有關的技術文章： IndexedDB 前端如何緩存大筆資料：IndexedDB 介紹/應用 | Yass Tsai 【瀏覽器資料存取】IndexedDB 暫存機制的存在意義為什麼不把資料都存在伺服器端就好，資料為什麼得放在瀏覽器本身的儲存區？ 其實是有它的必要性，會有情境是把東西放在瀏覽器中比較好的狀況，而且放在瀏覽器的本地也有許多的好處。 首先，第一個比較直觀的好處是假如可以直接把資料就存在本地端，那就代表可以減少瀏覽器跟伺服器之間的數據運輸量，這樣可以減少從伺服器載入資源的速度，換句話說，這樣可以提升網站的載入速度，減少網站的等待時間。 然後存在本地端的話，也可以拿來做記錄用戶的行為，比如說登入了一個網站，要是沒有登出的話，下一次再進到這個頁面中 ...

之前用的主題沒有很喜歡，所以想要試試看其他的主題。 這次選擇的是butterfly。 jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly 這個主題也是屬於比較熱門的，所以比較不用擔心發生一些沒人發現的錯誤，基本上越多人使用的話，會踩的雷，其他人已經都幫我踩過了。 會選擇這主題除了是熱門的之外，它整體的特效外觀也是我比較喜歡的，名字也聽著順耳(蝴蝶)，選擇好主題之後，就開始研究如何無痛轉換過去。 紀錄一些比較印象深的點。 使用hexo g -d 失敗，沒辦法成功部署使用新的主題重新部署之後，專門部署的那個github repo就被重新清空重新開始，這是一開始我沒遇想到的，會這麼做主要是我想看看網站資料會不會繼承，結果看起來是不會的。 然後就部署時遇到了問題，如圖下： 後來去網路上找到這篇：(7条消息) hexo d命令报错 ERROR Deployer not found: git_蓝蓝223的博客-CSDN博客 下這一串指令就好了 1npm install hexo-deployer-git --save ...

這篇主要是紀錄我是怎麼理解這些名詞的。 因為關於程式語言的部分，我目前只有寫過 JavaScript，所以對於其他程式語言比較沒辦法體悟，這篇會從我使用 JavaScript 的角度來去理解！ 在都還沒研究時，我其實就已經知道 JavaScript 分別是哪幾種，但還不明白差異： JavaScript => 動態語言 弱型別 靜態作用域 動態語言、靜態語言用一句話來解釋就是在執行的時候可以改變結構的是動態語言，如果不能的話那就是靜態語言了。 這塊需要釐清以及容易卡住的地方我覺得是「執行」和「編譯」的名詞。 假如今天是在 vscode 寫 code，使用的程式語言是動態語言，像是 JavaScript，執行的話我會理解成，我印出了一個值，比如說 console.log(x)，那要看到這個 x 是多少的話，就得對它做「執行」的動作，我才能知道我到底印出了多少，不管是在瀏覽器上，還是在 node.js 上，而我在寫 console.log(x)的時候，就是同時在做「編譯」這件事情，我在 vscode 寫程式碼的過程就是編譯時的過程。 理解了這塊之後，再來回頭看動態語言跟靜 ...

mac 的內建截圖方式是按 shift+command+3 或是+4。 而在截圖的時候正常來說在右下都會有一個截完圖後的浮動視窗，可以在這個視窗再去做操作跟編輯，不喜歡可以直接刪掉。 而有一天截圖的時候就突然直接截完直接儲存在桌面，對我來說很不方便，我通常是截完圖後直接複製貼到 hackmd，如果沒有右下浮動視窗的功能，我就還得回到桌面去找哪一張截圖，實在是麻煩。 最後是研究要怎麼改變回來，雖然自己找花了一些時間，但其實蠻簡單的，在這邊紀錄一下： 按下 shift+command+5 看到這個框框就代表沒錯 點擊這個框框裡面「選項」 選擇裡面的“顯示浮動縮覽圖” 你會發現你截完圖後的浮動視窗回來了

這個部分算是網路的基礎，關於網路之間是如何傳遞資料的，背後的邏輯，我覺得很重要所以花了一些時間去研究，主要在這邊整理我理解的結果。 研究網頁前端的過程中，讓我發現一些盲點的事情，像是當我們輸入網址的時候按下了 enter 後，究竟是發生了什麼事情？ 當時我的腦袋覺得，只是我在客戶端發送了一個請求，然後在伺服器端接收了這個請求後，發送了回應回來，渲染出一個新的話，所以我這邊可以看到一個全新的畫面。 但是傳輸的過程沒有這麼簡單。 網路的層級 - OSI過去有一群人有發現說網路在傳送的過程中實在是做了太多的事情了，沒有整理起來的話其實大家都不太好懂，雜亂不堪是很難持續進步的，所以他們就一起把這些東西，也就是網路的部分做了標準化。 這些人把網路標準化後的部分，分成了七個層級，每一層都是負責不同的事情，包括了硬體和軟體在內的七個標準。 也就是所謂的 OSI，它是一個模型。全名是 System Interconnection Model。 有哪七個呢？ 如下圖 最上面是軟體，最下面是硬體的部分，而詳細這七層每一層在做什麼事情，我個人沒有去背，我覺得只要知道說最詳細嚴謹的層數有七層，然後它叫做 O ...