Vic's blog

目前正在進行一個案子，裡頭有一項需求是「多國語言系統」，就是前端界面要有多國語言的選項可以去做選擇，預設是繁體中文，但也要能切換成英文、日文這樣，之前沒做過對我來說是一種新的挑戰。 這次專案所使用的是 vue3 + vite 的形式，所以使用載入的是 Vue-i18n。 照著下方參考來源第一篇做是沒問題，使用方法不難，但其實我在研究中有所誤解的地方，跟沒辦法一時就弄懂的部分，有跟一些前輩們進行交流，在這邊做個紀錄。 概念網站上的多國語系其實會分成兩種，一種是 data，另一種則是 layout。 這邊的 data 指的是網頁上那些動態的資料，比如說像是我 blog 中一篇篇的新文章，而 layout 則是指網頁本身靜態的東西，像是我 blog 最上方的搜尋、首頁、文章總覽。 現在打開 fb 或是 youtube，選擇切換語系，假設是選擇切換成英文版本，但就會發現並不是所有的東西都變成了英文字，可能裡面內容的本身、自己的名字不會跟著變成英文版本。 所以說假如內容也需要多國語系時，那麼文章的內容本身，也需要依照多國語系寫好幾份，並不是寫好一個中文版本就能用像是 google 翻譯翻全...

這種技術本質是一種優化，不是必需品，今天若只處在一個先求有再求好的環境時，比較不會考慮到這種技術，但假設已經有寫出基本的程式碼，後來想要節省效能，避免伺服器負擔過大的話，那這種技術就值得導入跟實際應用。 本次研究的主角: Debounce，中文名字叫做防抖，我研究時在網路上有查詢到的定義如下， 12無論用戶觸發多少次的事件，對應的回呼叫函數只會在事件停止觸發觸發指定事件後執行也就是n秒後在執行該事件，若在n秒內被重複觸發，那就會重新計時。 Throttle，中文名字叫做節流，我研究時在網路上有查詢到的定義如下， 12無論用戶觸發事件多少次，附加的函數在給定的時間見個內只會執行一次n秒內只運行一次，若在n秒內重複觸發，那只會有一次生效。 防抖(Debounce)理解我自己的理解會先從字面上解讀，防抖意思就是為防止抖動的意思，那思考什麼時候會不停抖動，我想像是使用者的手一直不停抖動，而這在操作網頁上會造成問題，假如今天有一個按一次買 100 個物品的按鈕，手抖的阿伯只想買 100 個，所以他想要按一次就好，但是他的手就是會抖個不停，所以在按個過程中一個不小心就多按了好幾下，結果就...

前言在某些情境上，其實使用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 內部究竟是怎麼實現的，原始碼的解析，會著重在如何使用，以及理解為什麼需要有這個工具上，但研究的時候有幾篇提到這個部分，連結也會放在參考連結。 官網的安裝及使用說明得非常清楚，連結已放在最下面的參考資料，這邊我紀錄的是我自己比較偏好的方式，我選擇 A...

git 是現在主流的版控控制，寫軟體的人基本上都知道，但關於如何優化工作流以及什麼是 git hooks 知道的人可能就不多，因為這個部分是一種「優化」，使用了會更好，但是不用也沒關係，那我研究後覺得 git hooks 學會之後好處很多，那下面會儘量用好懂的方式來記錄跟介紹。 不講腳本寫法，不講複雜應用，只講整體的概念以及簡單的小應用來幫助理解概念。但還是要有對於 git 的簡單知識，不然可能看不懂這篇。 這篇文章主要會有以下這三個大重點： 什麼是 git hooks 為什麼要使用 git hooks git hook 基本的應用有哪些 什麼是 git hooks用一句話來講解這個概念，就是「每次使用了 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-...

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