從手把手環境設定到建立第一個 Flutter 專案
環境設定永遠是開發者一開始遇到的新人殺手，尤其是當你下定決定想學一項技術，但在環境設定就卡關，然後…就沒有然後了😭。Flutter 的環境設定算有點麻煩，但希望本篇文章可以幫助你打贏第一個關卡。然後由於我手上只有 macOS，所以這篇文章會以 macOS 的用戶視角來進行環境安裝。
選擇環境進到官網之後，可以選擇你的開發系統，並按照官方文件來一步一步完成環境設定的前置作業，這裡選擇 macOS 來示範。
接下來會問你主要想開發什麼類型的 App，由於 Flutter 是一個可以跨平台開發的框架，不管是 iOS 還是 Android，甚至是 Desktop App 還是 Web 都能勝任。不過我們的目標主要是要開發 mobile app，所以這裡我們選擇 iOS 或是 Android 都可以，這裡我們先選擇 iOS。
安裝必要的開發工具進到 iOS 的設定頁面，會先看到密密麻麻的一堆文字，但不用擔心，接下來一步一步帶你設定。
首先想要開發 iOS app，那麼就必須要安裝必要的 Xcode（這是一個在 App Store 上評分超低分，而且又超級肥的工具，但只能用它），後面會需要做 ...
Rust 從零開始網頁爬蟲(2024 Hello World)
本篇文章是 2024 Hello World Dev Conference 工作坊的實作流程，可以搭配 Github repo 一起使用。
Rust 簡介Rust 是一個近年來引起非常多討論的程式語言，因為效能出色，並且安全性極佳，寫起來非常有趣，在每一年的 Stackoverflow 調查中已經連續蟬聯多年的最受歡迎程式語言（most-admired programming language），可以參考今年 2024 的調查。也因為討論度很高，並且很多國際知名企業也紛紛投入使用，可以感受到似乎引領了一股風潮，好像什麼都要用 Rust 來改寫原本的產品，或者是出現以 Rust 開發的新東西。
安裝 Rust要安裝 Rust 非常簡單，只要進到官網，然後按下“立即開始”的按鈕，就會偵測你目前電腦的系統，並給你安裝的建議與說明。像是我的電腦是 macOS 系統，所以只要按照指示，在終端機執行指令，就可以開始安裝。
安裝 Rust 這個步驟主要會安裝兩個東西，分別是：
Rustup
Cargo
Rustup 是 Rust 的安裝與版本管理工具，而 Cargo 則是 Rust 的建置與套件 ...
用 Rust 寫一個網頁爬蟲
通常要使用網頁爬蟲，會想到用 Python 來寫，但其實蠻多程式語言都可以做到，蠻好奇如果用 Rust 來寫的話怎麼樣，所以這一篇文章會示範如何用 Rust 來寫網頁爬蟲。
建立 Rust 專案第一步我們會先使用 Cargo 來建立一個新的 Rust 專案，這邊我們會使用 cargo new 來建立一個新的專案，專案名稱為 rust_web_scraping。
1cargo new rust_web_scraping
安裝相關的套件接下來需要移動到專案的目錄下，並且安裝相關的套件：
1cargo add tokio -F full
tokio 是 Rust 中用來實現非同步的處理，我們還要安裝 reqwest 和 scraper 這兩個套件，這兩個套件分別用來發送 HTTP 請求和解析 HTML。
12cargo add reqwestcargo add scraper
目前的 Cargo.toml 應該會長這樣：
1234[dependencies]reqwest = "0.12.5"scraper = "0.20.0"tokio = & ...
Type or Interface?
在開發 TS 一段時間後，發覺 type 跟 interface 這兩個東西看起來很像，一直不太清楚使用的時機是什麼，所以研究了一下，寫了一篇文章記錄一下。
站在巨人的肩膀上，我參考了這部影片，有些觀點很有趣：
在開始之前，先簡單介紹一下這兩種東西，並比較一下兩者的差異。
什麼是 type？type 是 TypeScript 中用來定義型別別名的關鍵字，它可以定義任何型別。
123456789type UserType = { name: string age: number}const user: UserType = { name: "Bucky", age: 18,}
什麼是 interfaceinterface 是用來定義物件型別的一種方式，它主要用於描述物件的形狀。
123456789interface UserInter { name: string age: number}const user: UserInter = { name: ...
Next.js 如何在 App Router 中使用 Context？
自從 Next.js 推出 App Router 後，讓開發者可以輕鬆使用強大的路由功能，但是同時也帶來一些在使用 React Hooks 的限制。本篇文章將探討如何在 App Router 中有效使用 useContext 等 hooks 來傳遞 props，並解釋為什麼在某些情況下不能在 Server Component 中使用 hooks。
什麼是 App Router？App Router 是 Next.js 13.4 版本引入的一項重大更新，它徹底改變了我們使用 React 的方式。這個新的路由系統是基於 React Server Components，為開發者提供了更強大、更靈活的工具來建立高效能的網頁應用。
App Router 的核心特性：
React Server Components：這是 App Router 的基礎。Server Components 在 Server 端運作，而不是在 Client 端。這代表著它們可以直接使用伺服器資源（如 DataBase），而不用將這些資源暴露給 Client 端或通過網絡傳輸不必要的數據。
巢狀路由和 Layout：你 ...
React 19 Beta 新武器解鎖體驗
經過長時間的等待，自從 React 18 在 2022 年推出以來，React 19 Beta 版終於在近期與開發者見面了。作為 React 18 的下一個主要版本，React 19 帶來了許多讓開發者心動的新特性，這次我們就先來一探究竟有什麼新的功能。
useTransition在前端操作中，經常會碰到需要更新狀態的情況，例如：使用者點擊按鈕後，需要更新 UI 來響應這個操作。然而，有些狀態更新可能計算量較大或者涉及非同步操作，執行時間較長。
以下是一個範例，當使用者輸入名字後，點擊按鈕，會呼叫 API 更新名字，並且在更新過程中，按鈕會變成不可點擊的狀態。updateNameAPI 這個函式會模擬 API 的行為。
12345678910111213141516171819202122232425262728293031323334353637383940import { useState } from 'react'const updateNameAPI = async (newName) => { return new ...
使用 Leptos 建立和部署 WASM 到 GCP
這篇文章是由 Google Developer Group(GDG) 主辦的 DevFest Taipei 2023 其中的一個議程，主題是 - 使用 Leptos 建立和部署 WASM 到 GCP。
什麼是 Leptos近年來，Rust 語言越來越受到關注，而有關 Web 端的生態系更是蓬勃發展，不管是前端還是後端，都有許多優秀的框架可以使用，而 Leptos 就是其中一個框架。
那麼 Leptos 有什麼特別的呢？
Leptos 標榜是一個全端框架，話雖如此，但還是以前端為主，真要說的話，其角色有點類似於 Next.js。而 Leptos 提供了兩種 render 的方式，分別是：
Client-side rendering(CSR)
Server-side rendering(SSR)
而不管是哪一種 render 的方式，都是使用 WASM 來實現的。
作為效能優異的 Rust 語言，Leptos 也不例外，其效能也是非常優秀的，如上圖 Leptos 官網所示，Leptos 的效能比起其他框架來說，是非常優秀的。
什麼是 WASMWASM 是 WebAssembly 的縮 ...
Rust Web 之旅：新時代的後端開發
這篇文章是 2023 COSCUP Rust 議程軌之一，介紹 Rust 在後端開發的應用，以 Tide 為例。
Rust 已經連續多年成為 Stack Overflow 最受歡迎的程式語言，在 2023 年的調查也毫不意外的再度奪冠。
許多公司紛紛將 Rust 應用在產品上，例如：Amazon、Meta、Microsoft、Google 這些大公司，並且帶起一股似乎什麼都可以用 Rust 來重新改寫的風潮。
既然 Rust 這麼猛，那麼是不是也可以運用在網頁開發上呢？答案是肯定的，現在已經有許多的框架可以用來開發，想開發前端沒問題，後端框架更是如雨後春筍般的冒出來，例如：Rocket、Actix、Warp、Tide 等等。
從 JavaScript 的角度學習 Rust身為網頁開發者，多多少少都會使用 JavaScript，所以從 JavaScript 的角度來學習 Rust 會比較容易理解。
宣告變數12let x = 5; // mutableconst y = 10; // constant
123let x = 5; // immutablelet mut y = 10 ...
淺談在 2023 年的 React 還需要 Redux 嗎？
淺談在 2023 年的 React 還需要 Redux 嗎？前幾天在推特上看到有人提問標題這個問題，有些網友回覆 Redux 太複雜，建議改用其他的狀態管理套件。也有網友提出 React 都有 context API 來處理跨元件狀態了，根本不需要 Redux。
在這個問題上，許多開發者可能會有不同的觀點，但讓我們先從最基本的 React context 開始比較，然後再探討 Redux。
首先，我們來看看 React 的 context API。React context 提供了一種方式來共享值，例如這些值是全域的，例如主題、語言偏好等等，而不需要手動將 props 傳遞過多層。然而，當我們使用 useContext 並搭配 useReducer 來作為全域狀態管理時，所有使用該 context 的元件將會在 state 變更時重新 render，不論他們使用的 state 部分是否有改變。如果你有一個沒有被 useCallback 包裹的處理器，那麼虛擬 DOM 比對將會失敗，這些元件將會導致 DOM 更新。當然你可以有多個小的 contexts，但這樣你就會有多個狀態的來源，這可 ...
React Native x Expo x TypeScript 實作計算機
讓我們來用 React Native 和 Expo，還有 TypeScript 來寫一個計算機手機 App 吧！
什麼是 React Native?React Native 是一個用於構建移動應用程序的 JavaScript 框架。可以讓開發者使用 ReactJS 為 iOS 和 Android 平台創建手機 App。 React Native 提供了一套預構建的組件，可以用來構建應用程序的用戶界面，使得創建移動應用程序變得快速而簡單。
什麼是 Expo?Expo 是一套用於構建和部署 React Native 應用程序的工具和服務。它為開發者提供了一個平台，可以在各種設備和平台上輕鬆設置、運行和測試他們的 React Native 應用。 Expo 還提供了一系列的 library 和 API，可用於為應用程序添加功能，如照相、推送通知等。
建立專案首先來建立專案，如果這個專案取名為 calculator，那麼就執行以下指令：
1npx create-expo-app calculator --template
因為我們要使用 TypeScript，所以我們要選擇 blank (T ...
