用 Rust + Bevy 打造一個簡化版「雷電」射擊遊戲
小時候在大型機台玩《雷電》時，總覺得能自己做出一個射擊遊戲一定很酷。 現在算是實現了，而且還是用 Rust ...
Archive
All published articles on Railquill, organized chronologically.
2025
2024
Drizzle v.s Prisma
比較 Prisma 跟 Drizzle 兩個 ORM 的一些差異。
從手把手環境設定到建立第一個 Flutter 專案
帶你手把手把 Flutter 的環境設定弄好！
Rust 從零開始網頁爬蟲(2024 Hello World)
本篇文章是 2024 Hello World Dev Conference 工作坊的實作流程，可以搭配 Github repohttps://github.com/bucky0112/scrapingrust 一起使用。 Rust 簡介 Rust 是一個近年來引起非常多討論的程式語言，因為效能出色，並且安全性...
Type or Interface?
TypeScript 的 type 和 interface 有什麼不同？
Next.js 如何在 App Router 中使用 Context？
介紹如何在 Next.js 中使用 Context。
React 19 Beta 新武器解鎖體驗
介紹 React 19 Beta 新 Hooks。
2023
使用 Leptos 建立和部署 WASM 到 GCP
2023 DevFest Taipei 議程之一，介紹如何使用 Leptos 建立和部署 WASM 到 GCP。
Rust Web 之旅：新時代的後端開發
2023 COSCUP Rust 議程軌之一，介紹 Rust 在後端開發的應用，以 Tide 為例。
淺談在 2023 年的 React 還需要 Redux 嗎？
淺談在 2023 年的 React 還需要 Redux 嗎？
React Native x Expo x TypeScript 實作計算機
讓我們來用 React Native 和 Expo，還有 TypeScript 來寫一個計算機手機 App 吧！
React.js 全攻略班推薦給想要精進自我的前端工程師
這門課程是由五倍紅寶石舉辦，並由奶綠茶老師教導，這門課程對於想要精進自我的前端工程師來說，是一個非常好的選擇。
使用 Jest 和 React Testing Library 進行測試的方法 - 測試列表
介紹如何使用 Jest 和 React Testing Library 進行測試列表
2022
Rust x React
Rust x React 夢幻共演
用 Rust 來寫前端 - Yew
Rust 的框架 Rocket
來玩 Rust 的框架吧！ - Rocket - Part III
Rust 的框架 Rocket
來玩 Rust 的框架吧！ - Rocket - Part II
Rust 的框架 Rocket
來玩 Rust 的框架吧！ - Rocket - Part I
Rust 的框架 Rocket
來用 Rust 建立一個伺服器吧！Part IV
用 Rust 建立一個伺服器
來用 Rust 建立一個伺服器吧！Part III
用 Rust 建立一個伺服器
來用 Rust 建立一個伺服器吧！Part II
用 Rust 建立一個伺服器
來用 Rust 建立一個伺服器吧！Part I
用 Rust 建立一個伺服器
Rust 的閉包
Rust 的閉包
控制流程 if…else
Rust 的 如果可以...
用 Cargo 管理專案好棒棒
專案太大怎麼管理？用 Cargo 就搞定！
先從意料中的 Hello World 開始
BJ4，就只是 Hello World
了解 Redux 並實作一個範例
了解 Redux 並實作一個範例
除了 useState，你可以選擇更好管理狀態的 useReducer
標題有點引戰，但是如果想要跨元件處理狀態，並且狀態非常複雜的話，那麼 useState 可能就不是那麼好管理，也許可以試試看 useReducer。
使用 useContext 處理跨元件狀態
寫了這麼久 React，發現我的筆記都沒整理過，趁最近比較不忙來清理一下筆記 XD 這次要分享的是跨元件處理狀態的 hook -- useContext。
使用 Electron 搭配 React 建置桌面程式
這次公司打算把專案製作的網頁打包成桌面程式，之前就已經知道有 Electron 這個工具可以用，剛好趁這個機會來紀錄一下過程。
2021
React Search Photo Demo
在 Vite 使用 React，練習透過 Unsplash API 來搜尋圖片。
使用 useEffect 來掌管元件作用
可以取代 Class Component 的神兵利器之一，無疑是 useState 還有本篇介紹的 useEffect。
Tailwind 安裝 React 篇
React 專案如何安裝 Tailwind
Ruby 的邏輯判斷與流程控制
Ruby 的邏輯判斷與流程控制
Ruby[0] - 從安裝環境到 Hello World
從安裝 Ruby 環境到寫出 Hello World
Vuex 中的 Computed 用法 - Getters
在公司專案中，有多筆資料是從 `actions` 的回傳結果再透過 `mutations` 來更改資料狀態。這時候想要透過 computed 來處理這些資料，但是還要再把資料傳入 components 中再做處理，感覺總是沒那麼即時，如果在 Vuex 裡面也可以做 computed 就好了...咦？還真的有嗎！？...
開始我的 Vue 3
Vue 3 正式版問世也一段時間了，也是時候來認識一下新朋友了，前端就是要不停地追技術啊0.0
圖片剪裁套件的使用 - Vue-Cropper
Vue Cropper 這個套件使用起來非常方便，而且剛好符合我的需求，只需要看著文件設置一些設定就可以做出變化了。
2020
讓 Vue 每次換頁都能在最上方的方法
在 Vue 開發的 SPA 上，每次換頁總是會有一個問題，那就是換到其他頁面，畫面總是不會在最頂端，而是在上一頁的位置，這個問題以前覺得還好，但客戶要求修正這個問題，那就來修正吧！
React 的 props 運用
在 React 中，元件之間資料的傳遞都是由父元件傳給子元件的單向數據流，本篇文章將會講到如何使用 props 來傳遞資料。
在 CRA 專案中管理 components
在一個專案中，通常不會在一個頁面放入太多的 HTML 結構，這樣會變得難以維護。前面也有提到如何拆分成 component，本篇文章則是講解如何在透過 creat-react-app 的專案中，管理各個 components。
偽類選取器之 :nth-child() 和 :nth-of-type()
最近都在忙著面試，有些面試官人很好，如果有不懂的地方，他們會試著教你，所以我也藉由面試學到了蠻多東西（真的謝謝面試官大大）。 像是學到了 `:nth-child` 跟 `:nth-of-type` 這兩個的用法，回家也試著玩了一下，蠻有趣的，之後可以運用在 side-project 看看，這篇文章先來介紹這兩者的...
React 的表單輸入運用
在 Vue 中使用 v-model 來做表單輸入時非常好用，那麼在 React 中可以怎麼運用呢？本篇文章將會介紹該怎麼利用 Hook 來做類似的效果。
用 Create React App 來建立專案吧～
在逛 GitHub 看別人的 React 專案時，似乎都是使用 Create React App 來開發居多，比較少見使用 CDN 的模式，所以本篇文章將會講解如何入門使用 Create React App 來建立一個專案，並會簡單跟 Vue CLI 做一下比較。
React Fragment 的標籤好適合懶人工程師啊～
在使用 Vue 的 template 模板時，如果有多個 HTML 標籤的話，就必定需要一個 `<div>` 包起來才能運行。而 React 在 JSX 中也是一樣的，只是它多了一個選擇可以用，而且更精簡，看起來就跟沒有一樣呢～
使用 Actions 跟 Mutations 來改變資料狀態
上一篇已經初步了解 State，這篇繼續試著了解怎麼透過 Actions 跟 Mutations 來改變 State。
用 Vuex 來管理 State 資料狀態
在之前的專案中，如果碰到要資料傳遞的部份，例如是父子層關係的話，只要用 `props` 跟 `emit` 就可以解決了，而遇到同階層的關係，就用 `$eventbus` 來處理，不過這個方法只能處理比較簡單的資料，而且在 Vue 3 也不支援了。不怕，總是有技術可以解決問題，所以就從 state 開始來學學 Vu...
React 動態加入 CSS
前面提到如何使用邏輯運算子來判斷顯示加號減號，這篇則是介紹其他方式，也就是使用 CSS 來動態將 HTML 元素隱藏起來。
安裝 Gulp
Gulp 是一種前端自動化工具，可以幫助開發者將 SASS 跟 ES6 編譯成一般瀏覽器看得懂的版本，也可以把圖片跟 .css 還有 .js 壓縮成更小的檔案，是一個很方便的開發工具，這篇文章將介紹如何安裝 Gulp 並引入專案中。
React 運用邏輯運算子解決 JSX 問題
在 React 前一個筆記中，有試著做出一個 Counter，並且有加入判斷條件：如果數字為 0 的話，就沒辦法繼續按減號。還有另一種作法是：如果數字為 0 的話，減號按鈕就消失不能按，不過實做的話，會出現一些問題，這篇來看看需要解決什麼問題。
React v.s Vue 之 Component 比較心得
目前學 React 學了一點皮毛，而 Vue 也使用了一陣子，想寫一篇來比較一下兩者對於我這個小碼農有什麼不一樣。
使用 useState 來管理狀態
前面提到當變數更新時，React 還不知道資料有更新。所以 React 提供了一個方法來監控而且管理資料，而這就是 React 的 Hooks 之一 - useState。
建立並使用 React Component
在前端框架中，將原本 UI 拆分成獨立而且可以重複使用的程式碼，就是 Component（Angular 我不確定是不是，不過我在 Vue 蠻常用的）。 拆成 Component 的好處是，方便日後維護以及可以專注在個別程式碼的開發，還有最棒的是可以當作是一個樂高積木一樣重複使用組合。
如何在 JSX 中加入 CSS 樣式？
在 React 中，什麼東西都可以直接寫在 JavaScript 裡面，就連 CSS 樣式也可以，雖然有點奇怪，不過我在 Vue 也是會這樣寫 inline-style 的，只是 Vue 還會寫在 template 中，而 React 則是寫在 JSX 裡面。
JSX 變數與表達式使用
經過上一回的 JSX 超入門，這一次一樣入門，不過從變數以及表達式開始。
City Weather App 開發筆記
這次單純使用 JavaScript 來串接 API 開發一個天氣小程式，也練習一下我的 SCSS，寫了一下英文文件發在 GitHub 上可以練習我的英文，這篇就稍微介紹一下我的開發過程吧～
學會 Mixin，讓你 SCSS 開發更快速
以往自己在寫 CSS 時，多少會遇到想要寫某一個效果卻忘記怎麼開始，然後就需要上網找怎麼解決問題。當下雖然問題解決了，不過可能過沒多久，當遇到同樣問題時，又需要再去找解法，這時候 Mixin 就派上用場了。
React 從 JSX 開始 Hello World
相信每個使用 React 的前端工程師都會聽過並學習使用 JSX 這個語法，雖然官方是說不一定要求使用 JSX，不過先來看一下它如何寫，也許就不會這麼排斥它了...吧？
如何刪除 Hexo 已發佈的文章
不小心在 Hexo 發佈一篇不要的文章，本來以為直接刪除 posts 裡面的文章再重新發佈一次就可以了，結果沒用，在 stack overflow 找了一下就解開了，紀錄一下該怎麼解決。
SCSS import 切分檔案管理
在以往單純使用 CSS 的開發經驗中，總是會使用一支 CSS 檔案來設計所有的樣式，但是這樣的缺點是之後的維護相當困難，要找一個樣式的 code 可能要找很久。之前在寫 Vue 專案的時候，覺得元件式的管理很棒，所有元件分離讓之後的管理變得容易很多，現在才發現原來 SCSS 也可以做類似的事情，感覺好用很多啊～
SCSS 變數運用
說來慚愧，立志成為一名前端工程師的我，只會純 CSS 跟框架來幫網頁做樣式，對於 SASS 這個好用的語言工具卻是知道的不多，所以想趁有時間來學一下 SASS，就開了這個學習筆記系列。
ES6 好用語法 - 箭頭函式
在 ES6 中，有許多好用的語法可以使用，這篇就來介紹箭頭函式。
JavaScript 作品實戰班之課程心得
在經歷了為期 8 週的課程之後，回顧當時的猶豫，現在覺得上到這個課程真的是太好了，感覺對使用 JavaScript 的信心提升了不少，對於 Vue.js 的掌握度也越來越熟悉，甚至還用 Vue CLI 做了一個電商網站呢！
Vue.js 的 component 是什麼？
當做完一個專案時，每當想要修改某樣東西時，都要再重新審視程式碼，這時候就會非常痛苦。 而 Vue.js 中有一個 component 的概念，就不用再害怕維護專案啦。
JS 基礎回顧 - DOM
想像一下在夾娃娃機中，我們操作著爪子，在機台中抓取我們想要的東西。 而這樣的概念，有點像是我們要怎麼樣來藉由 JavaScript 操作網頁畫面的 HTML 元素，文件物件模型（Document Object Model, DOM）就可以幫助我們來做這件事。
如何使用 Vue CLI 建置專案
Vue CLI 介紹與環境建置，以及建置專案。
JS 基礎回顧 - 迴圈
迴圈 Loop 在 JavaScript 中，當遇到需要重複做某件事時，是個非常好用的方法。而迴圈又分為幾種不同的方式，本篇將會介紹如何使用比較常見的作法。
JS notice： JavaScript 與 undefined
本篇文章會稍微講解 undefined 與 not defined 的差異。
用 Vue.js 做一個 TodoList
很多教學都會試著做出 TodoList 來驗收自己學習的成果，這篇文章也不免俗的將會運用目前學到的 Vue 技術，做出一個簡易的 TodoList。
挑戰 Codewar - 1
這是在胡立的程式導師實驗計畫第四期中的 Codewar 練習題https://github.com/bucky0112/mentor-program-4th/blob/master/codewar.md，裡面的題目都是出自 Codewarshttps://www.codewars.com/dashboard，之後...
JS 基礎回顧 - function
在看 kuro 大神寫的 0 陷阱！0 誤解！8 天重新認識 JavaScript！https://www.tenlong.com.tw/products/9789864344130（不是業配，這本書很棒）中提到，JavaScript 最核心也最容易被誤用的部份非函式（function）莫屬。我一開始在學 JS ...
Think first, code later
以前看過一篇文章，是用拉麵店販賣機講解關於 api 的概念，我覺得作者很厲害，可以用淺顯易懂的方式讓當時還是前端麻瓜的我看得懂，那篇文章很推薦新手去看 -> 從拉麵店的販賣機理解什麼是 APIhttps://medium.com/@hulitw/ramen-and-api-6238437dc544 最近作者開了...
基礎 Vue.js(上)
身為目前 3 大前端應用框架之一的 Vue.js，截至目前為止在 GitHub 已經累積 160k 的星星數，以下是個人的學習筆記。
使用 Hexo 在 GitHub 部署 Blog
本來一直不是很想用 Hexo，因為覺得很多人使用，所以有使用另一種 Hugo 來架設 Blog，但是用完一直覺得不合口味，原本打算就將就著用。 剛好看到 Hexo 最多人使用的主題 - Next，感覺還不錯，真香，就來裝裝看吧！