Vic's blog

需求情境網頁上碰到區塊或是全部列印的需求時就會使用到列印的功能。 這篇會寫很簡單，因為我遇到需求沒有很複雜。 我自己是在 vue3 的專案中，需要去列出商品的資料，所以只需列出一部分的區塊就好，而不是全頁列印。 我最初找的方式我找的是vue3-print-nb這一個 vue3 列印套件。 官方文檔： https://github.com/Power-kxLee/vue-print-nb 其實會發現很簡單，只需要加入v-print就可以達成需求。 但後來發現原生就能做到這件事情，也能不用套件完成。 瀏覽器內建的列印功能其實最簡單的列印，其實就是在當前頁面中按下右鍵就有列印的選項。 程式的話，就是以下這串指令就可以完成： 1window.print(); 但可能很多人在此處會發現一些問題。 你只想印某些區塊，但是發現全部都印進去。 印出來的畫面怎麼都沒有樣式？ 這其實是因為說，原生列印功能還需要的其他設定。 設定 @media print有寫過 css 的人應該對 media 不陌生，除了在做 rwd 時會用到，其實在規範列印樣式時也同樣需求這個語法。 1234/* 一般樣式*...

前言起因是體驗過睡很少的滋味，發現睡很少的這件事情會讓大腦及身體產生一些debuff的效果，各種負面效果會纏身，那我就開始想說那我睡很多的話是不是反而可以獲得增益效果。 所以前一陣子拿自己去做實驗，每個睡眠時間都親自嘗試，網路上有很多結論，說人要睡多久有一個固定的公式，但我覺得那可能是適用在別人，卻不一定適合自己，還是得自己嘗試看看。 睡與繼續睡首先實驗進行時要先確保沒有睡不著的問題，及良好的睡眠品質，所以晚上都會開冷氣，睡前確保沒有蚊子，晚上睡覺前不使用 3c 產品，適度做運動或是喝一杯熱牛奶。 我想要判斷出差異的部分： 記憶力 專注力 反應力 受壓力反應 最先從以下幾個時間開始做嘗試，每個都嘗試一段時間，大致上是幾個禮拜。10 小時，12 小時，14 小時，16 小時。 10小時：大約是從晚上 10 點到早上 8 點的概念，大腦有點脹脹的感覺，但整體來說精神是好的，一段時間記住這個感覺後，我把這個睡眠的綜合(上述四項)分數定為 10 分，性價比的分數為 10 分，當作一個基準點的概念。 12小時：晚上 10 點到早上 10 點的概念，ㄧ段時間後發現我的上午已經快消失了，起...

vite 是 vue 的作者尤雨溪所開發的，為了改善開發者的體驗而生。 vite 嚴格來說不是純打包工具，更像是一種建構工具。 vite 的核心概念： 快速熱更新 快速冷啟動 熱更新 => 在不重新加載整個頁面的情況下，去即時做修改。冷啟動 => 預建構 + 開啟時準備。 這兩個功能不僅僅存在於 vite，而是 vite 進一步優化了熱更新及冷啟動的時間。 webpack 出現時就已經擁有了熱更新及冷啟動的概念，在當時環境已經算是很快速及方便的工具，但放在現在來看，等待要好幾十秒就會讓人覺得太久了。 而 vite 就帶來了更快的開發速度及優化整體的流程。 vite 的出現其實不是為了要取代掉 webpack，webpack 也沒有辦法變得像是 vite 一樣，因為兩者的核心概念本就不同。 webpack 的核心是先打包再去建立環境，主軸會是放在打包這一塊。 vite 則是不打包，在開發環境時，不會做打包這件事情，只會在最初的時候去進行預建構之後存放在本地端，之後如果有需要去修改的其他地方時，會利用原生 ESM 的機制，等於說把一部分打包的任務交...

目前正在進行一個案子，裡頭有一項需求是「多國語言系統」，就是前端界面要有多國語言的選項可以去做選擇，預設是繁體中文，但也要能切換成英文、日文這樣，之前沒做過對我來說是一種新的挑戰。 這次專案所使用的是 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 的生命週期，這個稍微就會解釋。 腳本就是一種程式的文件，我會把它想像是可以做某一種事情的程式，像是玩遊戲的時候，假如覺得一直在做一些重複性的事情很煩，那就可以...