Bucky Chu | Railquill

Welcome to Bucky's Tech Blog

From web applications to mobile apps and indie games, I love building across different platforms. This blog, built on **Railquill**, is my space to share insights, experiments, and the craft of writing clean, maintainable, and impactful software.

Recent Posts

Latest thoughts and insights

Rust 從零開始網頁爬蟲(2024 Hello World)

Sep 13, 2024 7 min read
本篇文章是 2024 Hello World Dev Conference 工作坊的實作流程，可以搭配 Github repohttps://github.com/bucky0112/scrapingrust 一起使用。 Rust 簡介 Rust 是一個近年來引起非常多討論的程式語言，因為效能出色，並且安全性...
Read article

Vuex 中的 Computed 用法 - Getters

Mar 18, 2021 1 min read
在公司專案中，有多筆資料是從 `actions` 的回傳結果再透過 `mutations` 來更改資料狀態。這時候想要透過 computed 來處理這些資料，但是還要再把資料傳入 components 中再做處理，感覺總是沒那麼即時，如果在 Vuex 裡面也可以做 computed 就好了...咦？還真的有嗎！？...
Read article

開始我的 Vue 3

Feb 10, 2021 2 min read
Vue 3 正式版問世也一段時間了，也是時候來認識一下新朋友了，前端就是要不停地追技術啊0.0
Read article

讓 Vue 每次換頁都能在最上方的方法

Dec 27, 2020 1 min read
在 Vue 開發的 SPA 上，每次換頁總是會有一個問題，那就是換到其他頁面，畫面總是不會在最頂端，而是在上一頁的位置，這個問題以前覺得還好，但客戶要求修正這個問題，那就來修正吧！
Read article

React 的 props 運用

Nov 26, 2020 1 min read
在 React 中，元件之間資料的傳遞都是由父元件傳給子元件的單向數據流，本篇文章將會講到如何使用 props 來傳遞資料。
Read article

在 CRA 專案中管理 components

Nov 23, 2020 2 min read
在一個專案中，通常不會在一個頁面放入太多的 HTML 結構，這樣會變得難以維護。前面也有提到如何拆分成 component，本篇文章則是講解如何在透過 creat-react-app 的專案中，管理各個 components。
Read article

偽類選取器之 :nth-child() 和 :nth-of-type()

Oct 22, 2020 2 min read
最近都在忙著面試，有些面試官人很好，如果有不懂的地方，他們會試著教你，所以我也藉由面試學到了蠻多東西（真的謝謝面試官大大）。 像是學到了 `:nth-child` 跟 `:nth-of-type` 這兩個的用法，回家也試著玩了一下，蠻有趣的，之後可以運用在 side-project 看看，這篇文章先來介紹這兩者的...
Read article

React 的表單輸入運用

Oct 21, 2020 1 min read
在 Vue 中使用 v-model 來做表單輸入時非常好用，那麼在 React 中可以怎麼運用呢？本篇文章將會介紹該怎麼利用 Hook 來做類似的效果。
Read article

用 Create React App 來建立專案吧～

Oct 16, 2020 1 min read
在逛 GitHub 看別人的 React 專案時，似乎都是使用 Create React App 來開發居多，比較少見使用 CDN 的模式，所以本篇文章將會講解如何入門使用 Create React App 來建立一個專案，並會簡單跟 Vue CLI 做一下比較。
Read article

React Fragment 的標籤好適合懶人工程師啊～

Oct 16, 2020 1 min read
在使用 Vue 的 template 模板時，如果有多個 HTML 標籤的話，就必定需要一個 `<div>` 包起來才能運行。而 React 在 JSX 中也是一樣的，只是它多了一個選擇可以用，而且更精簡，看起來就跟沒有一樣呢～
Read article

用 Vuex 來管理 State 資料狀態

Oct 10, 2020 2 min read
在之前的專案中，如果碰到要資料傳遞的部份，例如是父子層關係的話，只要用 `props` 跟 `emit` 就可以解決了，而遇到同階層的關係，就用 `$eventbus` 來處理，不過這個方法只能處理比較簡單的資料，而且在 Vue 3 也不支援了。不怕，總是有技術可以解決問題，所以就從 state 開始來學學 Vu...
Read article

React 動態加入 CSS

Oct 08, 2020 2 min read
前面提到如何使用邏輯運算子來判斷顯示加號減號，這篇則是介紹其他方式，也就是使用 CSS 來動態將 HTML 元素隱藏起來。
Read article

安裝 Gulp

Oct 03, 2020 1 min read
Gulp 是一種前端自動化工具，可以幫助開發者將 SASS 跟 ES6 編譯成一般瀏覽器看得懂的版本，也可以把圖片跟 .css 還有 .js 壓縮成更小的檔案，是一個很方便的開發工具，這篇文章將介紹如何安裝 Gulp 並引入專案中。
Read article

React 運用邏輯運算子解決 JSX 問題

Oct 01, 2020 2 min read
在 React 前一個筆記中，有試著做出一個 Counter，並且有加入判斷條件：如果數字為 0 的話，就沒辦法繼續按減號。還有另一種作法是：如果數字為 0 的話，減號按鈕就消失不能按，不過實做的話，會出現一些問題，這篇來看看需要解決什麼問題。
Read article

使用 useState 來管理狀態

Sep 30, 2020 1 min read
前面提到當變數更新時，React 還不知道資料有更新。所以 React 提供了一個方法來監控而且管理資料，而這就是 React 的 Hooks 之一 - useState。
Read article

建立並使用 React Component

Sep 28, 2020 2 min read
在前端框架中，將原本 UI 拆分成獨立而且可以重複使用的程式碼，就是 Component（Angular 我不確定是不是，不過我在 Vue 蠻常用的）。 拆成 Component 的好處是，方便日後維護以及可以專注在個別程式碼的開發，還有最棒的是可以當作是一個樂高積木一樣重複使用組合。
Read article

如何在 JSX 中加入 CSS 樣式？

Sep 27, 2020 1 min read
在 React 中，什麼東西都可以直接寫在 JavaScript 裡面，就連 CSS 樣式也可以，雖然有點奇怪，不過我在 Vue 也是會這樣寫 inline-style 的，只是 Vue 還會寫在 template 中，而 React 則是寫在 JSX 裡面。
Read article

City Weather App 開發筆記

Sep 26, 2020 1 min read
這次單純使用 JavaScript 來串接 API 開發一個天氣小程式，也練習一下我的 SCSS，寫了一下英文文件發在 GitHub 上可以練習我的英文，這篇就稍微介紹一下我的開發過程吧～
Read article

學會 Mixin，讓你 SCSS 開發更快速

Sep 24, 2020 1 min read
以往自己在寫 CSS 時，多少會遇到想要寫某一個效果卻忘記怎麼開始，然後就需要上網找怎麼解決問題。當下雖然問題解決了，不過可能過沒多久，當遇到同樣問題時，又需要再去找解法，這時候 Mixin 就派上用場了。
Read article

React 從 JSX 開始 Hello World

Sep 23, 2020 1 min read
相信每個使用 React 的前端工程師都會聽過並學習使用 JSX 這個語法，雖然官方是說不一定要求使用 JSX，不過先來看一下它如何寫，也許就不會這麼排斥它了...吧？
Read article

如何刪除 Hexo 已發佈的文章

Sep 23, 2020 1 min read
不小心在 Hexo 發佈一篇不要的文章，本來以為直接刪除 posts 裡面的文章再重新發佈一次就可以了，結果沒用，在 stack overflow 找了一下就解開了，紀錄一下該怎麼解決。
Read article

SCSS import 切分檔案管理

Sep 22, 2020 1 min read
在以往單純使用 CSS 的開發經驗中，總是會使用一支 CSS 檔案來設計所有的樣式，但是這樣的缺點是之後的維護相當困難，要找一個樣式的 code 可能要找很久。之前在寫 Vue 專案的時候，覺得元件式的管理很棒，所有元件分離讓之後的管理變得容易很多，現在才發現原來 SCSS 也可以做類似的事情，感覺好用很多啊～
Read article

SCSS 變數運用

Sep 20, 2020 2 min read
說來慚愧，立志成為一名前端工程師的我，只會純 CSS 跟框架來幫網頁做樣式，對於 SASS 這個好用的語言工具卻是知道的不多，所以想趁有時間來學一下 SASS，就開了這個學習筆記系列。
Read article

JavaScript 作品實戰班之課程心得

Aug 28, 2020 1 min read
在經歷了為期 8 週的課程之後，回顧當時的猶豫，現在覺得上到這個課程真的是太好了，感覺對使用 JavaScript 的信心提升了不少，對於 Vue.js 的掌握度也越來越熟悉，甚至還用 Vue CLI 做了一個電商網站呢！
Read article

Vue.js 的 component 是什麼？

Jun 01, 2020 4 min read
當做完一個專案時，每當想要修改某樣東西時，都要再重新審視程式碼，這時候就會非常痛苦。 而 Vue.js 中有一個 component 的概念，就不用再害怕維護專案啦。
Read article

JS 基礎回顧 - DOM

May 20, 2020 3 min read
想像一下在夾娃娃機中，我們操作著爪子，在機台中抓取我們想要的東西。 而這樣的概念，有點像是我們要怎麼樣來藉由 JavaScript 操作網頁畫面的 HTML 元素，文件物件模型（Document Object Model, DOM）就可以幫助我們來做這件事。
Read article

JS 基礎回顧 - 迴圈

May 12, 2020 3 min read
迴圈 Loop 在 JavaScript 中，當遇到需要重複做某件事時，是個非常好用的方法。而迴圈又分為幾種不同的方式，本篇將會介紹如何使用比較常見的作法。
Read article

用 Vue.js 做一個 TodoList

May 09, 2020 3 min read
很多教學都會試著做出 TodoList 來驗收自己學習的成果，這篇文章也不免俗的將會運用目前學到的 Vue 技術，做出一個簡易的 TodoList。
Read article

挑戰 Codewar - 1

May 07, 2020 2 min read
這是在胡立的程式導師實驗計畫第四期中的 Codewar 練習題https://github.com/bucky0112/mentor-program-4th/blob/master/codewar.md，裡面的題目都是出自 Codewarshttps://www.codewars.com/dashboard，之後...
Read article

JS 基礎回顧 - function

Apr 11, 2020 2 min read
在看 kuro 大神寫的 0 陷阱！0 誤解！8 天重新認識 JavaScript！https://www.tenlong.com.tw/products/9789864344130（不是業配，這本書很棒）中提到，JavaScript 最核心也最容易被誤用的部份非函式（function）莫屬。我一開始在學 JS ...
Read article

Think first, code later

Apr 03, 2020 1 min read
以前看過一篇文章，是用拉麵店販賣機講解關於 api 的概念，我覺得作者很厲害，可以用淺顯易懂的方式讓當時還是前端麻瓜的我看得懂，那篇文章很推薦新手去看 -> 從拉麵店的販賣機理解什麼是 APIhttps://medium.com/@hulitw/ramen-and-api-6238437dc544 最近作者開了...
Read article

基礎 Vue.js(上)

Mar 30, 2020 2 min read
身為目前 3 大前端應用框架之一的 Vue.js，截至目前為止在 GitHub 已經累積 160k 的星星數，以下是個人的學習筆記。
Read article

使用 Hexo 在 GitHub 部署 Blog

Mar 28, 2020 2 min read
本來一直不是很想用 Hexo，因為覺得很多人使用，所以有使用另一種 Hugo 來架設 Blog，但是用完一直覺得不合口味，原本打算就將就著用。 剛好看到 Hexo 最多人使用的主題 - Next，感覺還不錯，真香，就來裝裝看吧！
Read article