為 Yup 自訂驗證加上支援 Typescript

 作者 Puck Wang |  建立於 2022-05-02 14:11  |  更新於 2022-05-02 14:35  |  版本 317d3c7  |  分類: 軟體開發 |  標籤: Front-end, 資料驗證, Yup, Typescript

我們在使用 Yup 時,很常會使用 Yup.addMethod 來新增自訂的驗證方式,但如果專案是 Typescript 的卻沒有加上適當的 Type,會使編譯時出現錯誤。

這時候我們為加上正確的 Type,不只不會出現錯誤,使用上也更方便。

Continue Reading...

使用 Git Bisect 快速找到第一個有問題的 Commit

 作者 Puck Wang |  建立於 2021-04-19 03:34  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: 版本控制, Debug |  標籤: Git
Git log
Git log

現在專案很常使用 Git 作為版本控制系統,所以在遇到 Bug 找不到是哪裡出錯時,可以藉由找出第一次出錯的 Commit 來找到問題原因。

但在大型專案中,全部 Commit 可能達上千筆,如果遇到很久沒發現的 Bug,就可能會發比較久的時間去找是哪個 Commit 出問題。

常見的可能會看 Commit 訊息來反推可能有問題的 Commit,或是用最笨的方法一個個往回找,這樣效率都不太好。

利用 Git 內建的 Git Bisect 來使用二元搜尋的方式來找有問題的 Commit,就可以大大提升效率。

Continue Reading...

Jenkins Pipeline Stages 平行處理的寫法

 作者 Puck Wang |  建立於 2021-03-13 11:47  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: CI/CD |  標籤: Jenkins, Pipeline, Parallel, 平行處理
Jenkins Pipeline Parallel Example
Jenkins Pipeline Parallel Example

Jenkins Pipeline 在執行 Stage 時,某些情況使用平行處理可以節省很多執行所需時間,本文將會介紹幾種平行處理的方法。

你可以在官方文件中看到 ParallelMatrix 兩種實現平行處理的方法,而我除了這兩個外還會在多介紹一個利用 Parallel 去實現動態 Stage 的方法,這也是很常在網路上看到的問題,可以更靈活地去運用 Parallel。

Continue Reading...

Don't Make Me Think:如何設計好網站 - 讀後筆記

 作者 Puck Wang |  建立於 2021-02-22 18:08  |  分類: UI/UX, 讀後筆記, 精選 |  標籤: Web, Front-end, 前端
Don't Make Me Think 第三版封面
Don't Make Me Think 第三版封面

近年一直想提升我的 UI / UX 技能,至少到用起來不會不適,而有人向我推薦這本入門的書,稍微查了一下目錄後,看起來內容滿不錯。也剛好遇到過年假期,就想說把它看完順便寫成重點筆記。

原本是想在網路買二手,但發現市立圖書館剛好有這本書 (第二版),所以就改去圖書館借了,而上次到圖書館借書是五年前了。

Continue Reading...

Bind Shell 與 Reverse Shell

 作者 Puck Wang |  建立於 2021-01-10 21:00  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: 資訊安全 |  標籤: 攻擊手法, Netcat, 遠端執行指令攻擊

Bind Shell 與 Reverse Shell 是兩種常見的遠端執行指令的技術,讓攻擊者可以向目標主機發送並執行指令,常與檔案上傳漏洞 (File Upload Vulnerabilities) 搭配使用。

這是我在研究檔案上傳漏洞時發現的一個有趣的攻擊手法,所以把它記錄下來,但也沒有太深入去專研,所以讀完本文不會讓你精通,只會讓你簡單了解並知道如何使用。

本文將使用 Netcat 來 Demo。

Continue Reading...

.Net Core 使用 FluentMigrator 遷移資料庫

 作者 Puck Wang |  建立於 2020-06-30 17:59  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: 軟體開發 |  標籤: dotnet, .net-core, 套件, database

Fluent Migrator 是一個 .Net 的資料庫遷移 (Migration) 框架套件,其他如 LaravelRuby on Rails 也有類似的套件。遷移就像是資料庫的版本控制一樣,提供 Code-First 的方式去管理資料庫結構,並可將其納入專案的版控中。

Continue Reading...

Git 進階應用 Submodule 與 Subtree,使用它們來拆分專案

 作者 Puck Wang |  建立於 2020-03-18 21:29  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: 版本控制 |  標籤: Git, Git Submodule, Git Subtree, 子模組, 匯入, 模組化, 專案拆分

在開發過程中,專案隨著時間變得越來越肥,不時還生出子專案,此時就會遇到需要各專案共用一些 Code 的部分,如果共用的部分是用 複製貼上 的方式去同步,那勢必一定會造成兩邊不同步,維護困難。

本篇文將分享 Git Submodule 與 Git Subtree 的差異及它們的使用方法。

Continue Reading...

使用 Github Actions 來自動化部署 Hugo 到 Github Pages

 作者 Puck Wang |  建立於 2020-03-14 21:22  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: DevOps, 精選 |  標籤: Github Actions, Hugo, 部署, CI/CD, 自動化, 建置, Workflows
graph LR; A[Self] -->|Commit| B B[Github] --> C C[Github Actions] -->|Build/Deploy| D D[Github Pages]

本文說明如何利用 Github Actions 在將 Commit 推上 Github 後,自動化執行 Hugo 建置並部署結果到 Github Pages。

Continue Reading...

2020 JetBrains Quest 官方解謎全記錄

 作者 Puck Wang |  建立於 2020-03-09 23:23  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: 活動紀錄 |  標籤: 彩蛋, JetBrains, Quest

就在台灣時間 2020/3/9 20:04,JetBrains 的官方 Twitter 發了一篇推文如下

而我看到這個,就馬上燃起我的解謎魂了!也就打一篇解題的過程來紀錄一下。

接下來我將一步一步的紀錄我的解題步驟,不過當看到這篇文章時應該已經過了活動期限囉!畢竟不能破人家的梗!

Continue Reading...

使用 vuex-map-fields 讓 Vuex state 也可使用 v-model 綁定

 作者 Puck Wang |  建立於 2019-05-16 21:17  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: 軟體開發 |  標籤: Front-End, Vue, Vuex, Web, vuex-map-fields, v-model

有在用 Vue 寫應用程式的人,一定也會接觸到 Vuex,它有很多優點但也有限制, 其中一項就是不能在 Mutation 以外的地方修改 State ,所以也就不能直接使用 v-model 去綁定,雖然官方有提供一段替代的寫法,但還是比原本直接用 v-model 來的麻煩很多,特別是大量的時候。

Continue Reading...

Debian 安裝與配置 Supervisor

 作者 Puck Wang |  建立於 2019-05-08 11:44  |  更新於 2021-12-12 06:36  |  版本 bfd595b  |  分類: 伺服器維運 |  標籤: Supervisor, Process Manager, Debian, Services, Laravel, Queue, Linux

最近為了讓在伺服器上的 Laravel Queue Worker 更方便去管理,不用每次重啟伺服器都要上去重新執行, 所以要來安裝官方文件有提到到 Supervisor 這個服務。

Supervisor 是個用 Python 寫的一個程序管理服務,支援自動重啟、執行多程序 …etc。

Continue Reading...