一個工程師的筆記天地

# 前言 上一篇文章已經先了解版控系統的分類，並且知道 Git 屬於分散式版控系統。 開始使用 Git 前，筆者想先用「網購」的例子引領大家進入 Git 的版控世界。 # 用「網購下單」的例子來學 Git 相信大家在這個嚴峻的時代，都已經有網購的經驗。 如果我說，從購物網站「挑選商品」一直到「下單」的行為，跟 Git 的觀念有點像…...

# 前言 這個篇章來帶大家認識版控的概念，以及常見的版控類別。 在開始之前，避免新手後續的閱讀困惑，先來介紹幾個之後會看到的名詞： 地端 / 本機 / 本地 (local)：位於當前位置或靠近使用者的 設備 或 系統。 白話來說，就是你看得到的裝置，包含眼前的主機、筆電、手機，都可以稱為地端。 遠端 / 雲端 (remote)：不在使用者眼前的 設備 或 系統，也就是你看不到的裝置，包含隔壁辦公室的主機，或是遠在 Google 機房的「雲端硬碟」之類。 而通常遠端 / 雲端的資料，會需要透過「網路」才能從地端 (你眼前這台裝置) 存取。 儲存庫 (repository)：一個用來存放...

# 前言 Git，一個想成為工程師，好像一定要會的東西。 程式領域淺藏著許多「沒人教」，但在業界會被當成「理所當然」、「不用教就應該會」的技能，Git 就是其中一項，但這些技術對外行人來說，各個都不是容易跨過的門檻。 此時的新人可能還在跟程式拚得水深火熱，光是要搞懂那些「亂碼」，就已經弄得自己一個頭兩個大。 現在又殺出一個名叫 Git 的程咬金，擺明告訴新人如果不學會他，面試大概會第一個被刷掉。 認識 Git、使用 Git，成了就職前的一大挑戰。 # 初識 Git 筆者有幸在求學時期認識這門學問，但當時的我並沒有完全學會。 對於 Git 的操作，只知道怎麼使用 git add 、 git...

一直覺得 JavaScript Closures (閉包) 屬於不好懂的 JS 觀念之一，但他跟物件導向這門學問很像，不懂的時候覺得很難，懂得時候會覺得很有趣 初次接觸 Closures，完全沒辦法理解這個名字本身的涵義，事實上當時也有很多人紀錄相關的文章，但即便我重複看了好幾次，依然有種似懂非懂的感受 最近再次認識 JavaScript 的時候，又看到 Closures 的環節，感覺現在終於有能力可以用自己的話語把這個觀念記錄下來，決定寫下這篇文章 # 學習閉包所需要知道的三個觀念 當不懂程式觀念的時候，第一件是絕對是去看 MDN 根據 MDN...

在 JavaScript 陣列中，有兩個東西是我常常知道他們的存在，知道他們的用途，但每次都必須查 MDN 才能確認到底怎麼用 一個是 slice ， 另一個是 splice 這篇來紀錄一下這兩個陣列方法，看能不能加深一下自己的印象，未來用到的時候不用再去查 MDN # Array.prototype.slice() 定義： slice() 方法會回傳一個新陣列物件，為原陣列選擇之 begin 至 end（不含 end）部分的淺拷貝（shallow copy）。而原本的陣列將不會被修改。 slice...

發現 Vue 官網 與 vite 官網 所記錄的開發起手式不太一樣，紀錄一下以不同指令進行 vue 的起手差異。 由於目前為止 (2023.7) Vue 推薦開發配套會是 Vue3 script setup 語法 、 vite 與 pinia 作為主流，未來的文章將會以這幾種配套做為主。 另外，因為筆者習慣使用 npm 來設定套件，內容也多會以 npm 為主，如果習慣其他套件管理工具，例如 yarn 、 pnpm ，也是可以替換使用的！ # npm init vue@latest $ npm init [email protected] - The Progressive JavaScript...

三刷了鈴芽之旅，甚至還安排好了第四刷，總該寫寫心得吧！！ # 契子 初次接觸新海誠的電影，大概就是你的名字，再來就是天氣之子 對於電影風格最有感的，大概就是每一個畫面，都值得拿來當手機、電腦桌布吧 事實上，早在鈴芽之旅台灣上映之前，就在 YouTube 看到了主題曲的歌 不得不說，主題曲的旋律實在令人著迷，即便單曲循環撥放也不會膩的那種 這時的我還不知道鈴芽之旅是怎樣的故事，會是那種為了某件事情而踏上旅程的情節嗎？ 不久之後，Line 傳來訊息，「鈴芽之旅 有人要一起去看的嗎？」 就這樣，我也一起踏入鈴芽的旅程。 # 首刷 記得首刷那天，電影 7:20 開演，跟阿魁約 6:30...

接了前人的 code，整包程式幾乎所有功能只要能用套件就用套件，其中發現一個套件叫 dayjs，用起來還不錯，來記錄一下常用功能 # Dayjs 介紹 Dayjs 是一個輕量的 JavaScript 時間日期處理的函數庫，具有以下特點 輕量 程式碼只有 2kb 大小，並且沒有任何依賴，可以直接在瀏覽器中使用，也可以在 Node.js 中使用 易上手 實際使用的感覺比原生的 Date 物件更簡單，並且提供了一些常用的功能，例如：格式化時間、計算時間差、時間比較等等 相依性低 Dayjs 只依賴於 ES5 的函數庫，因此可以在任何環境中使用，包括...

Vite proxy 、 axios 攔截器 等議題，很容易在網路上查到資料 但自己實際在使用的時候，總會有一些細節沒注意到 這篇記錄實際使用了 vite proxy 、 整合 axios 攔截器 以及設定攔截器功能的內容 # 大綱 Vite 設定 proxy 方法 axios 攔截器如何設定 URL 實際使用 axios 的 API # Vite 設定 proxy 方法 在 Vite 中，我們可以通過在 vite.config.js 文件中設定一下，就可以做好應用程式的 proxy，讓 Vite 透過 proxy 呼叫 API Vite 預設已經有個 defineConfig...

flex 物件的子物件寬度為多少？從這個問題衍伸出 flex-shrink 的計算公式 這篇就來簡單聊聊吧 # flex 物件的子物件的寬度，在沒設定寬的時候是多少？ 事實上，flex 物件的子物件寬度，是由該物件內容寬度決定 例如下面的例子，將子項目 font-size 設定 20px 項目 a、b、c 分別是五個字、三個字、七個字 此時呈現結果將會是 a 的寬度為 5 x 20 = 100px b 的寬度為 3 x 20 = 60px c 的寬度為 7 x 20 = 140px .flex { width: 1000px; height: 300px;...