所有文章共 125 篇

所有文章列表

機器人圖示

在 AI 時代應該如何保障未來

AI 並不會離開我們的生活,並且只會越來越普及,這也意味著我們的生活將受到影響。什麼事情是人類能 AI 不能的?未來的工作會是怎麼樣?人們能做什麼來保證未來?

文章搜尋符號

使用 Pagefind 替任何靜態網站添加搜尋功能

不到 3 步驟讓你的網站擁有以 WebAssembly 高效驅動的客製化搜尋功能。靜態網站像是部落格、文件、個人網站、公司網站……等這類閱讀體驗為主的網站通常都有搜尋內容的需求,恰逢 Pagefind 1.0 的推出我把原先自製的 fuse.js 搜尋功能換成 Pagefind,這篇文章將分享如何在任何靜態網站上加入搜尋功能。

愛心符號

什麼是 Shadcn UI?為什麼在前端圈這麼火爆?

近期工作接觸使用 Shadcn for Vue 來打造網頁 UI,這是一款基於 Tailwind 可彈性客製化的元件組合,讓我們可以快速建立出符合需求的網頁介面。這篇文章將會介紹現有樣式庫的問題以及 Shadcn UI 的特色,以及為什麼在前端圈這麼火爆。

一隻手操縱觸控板符號

如何正確的設計表單?必須知道的用戶輸入 UX 基礎

表單是是網站中最常見的功能性元素也是與用戶溝通的橋樑,像是購買商品、註冊會員、問卷填寫……等各項行動都離不開它,然而這麼重要的體驗卻時常被忽略,於是我決定整理一個良好的表單應該具備的體驗以及為什麼應該這樣設計。

警戒符號

如何處理 TypeScript 拋出的錯誤?

JavaScript 有 try...catch 語法用於捕捉程式中的錯誤情境,在需要時使用 throw 語法來拋出「任何錯誤」,通常建議會丟出 JS 預設的錯誤物件,但在 TypeScript 要怎麼做才能確保拋出的錯誤的型別?

眼睛上有一條斜線符號

為什麼禁用輸入通常是個糟糕的決定,以及如何正確禁用用戶輸入

網頁原先是靜態文件,但隨著需求增加,動態的改動網頁的狀態已變得普遍,隨意使用 `disabled` 屬性就像是在用戶路上堵上一顆巨石,這樣的設計不僅無法幫助用戶解決問題,還會讓用戶感到困惑。我們應該盡全力讓用戶知道問題原因,而不是只做到「阻止用戶的錯誤行為」。

Astro Logo 符號

使用客製化元件在 Astro MDX 當中

在 Astro 中使用 MDX 撰寫文章給我非常多的彈性,但絕大多數文章我還是希望使用 Markdown 現有的語法來撰寫,像是:圖片、程式碼區塊、列表……等,有沒有辦法將自定義的元件對應於 Markdown 語法呢?這樣就不用每次都要再 MDX 中特地引入元件並使用,單純的撰寫 Markdown 即可。

旋轉箭頭中間有一個驚嘆號符號

存在於 UI 設計與開發之間的大問題

Continuous Delivery 在 The Biggest Problem With UI 影片中點出了我多年來對於產品 UI 開發流程最大的疑惑:為什麼 UI 設計與開發的流程總是如此不順暢不協調?「有沒有辦法讓團隊穩定高效的產出真實滿足用戶需求的產品?」是本篇文章探討的核心問題。

文件檢查符號

2 種方法驗證 JSON-LD 是否正確運作?

重視 SEO 的網站都會想盡辦法提供搜尋引擎更多資料,以便網站有更多機會出現在目標客群眼中,其中 JSON-LD 便是一種夾帶更多資料以描述網頁網頁內容的方式之一。通常不會多留意它,直到真正實作下來也不知道有沒有任何用處?該如何檢驗搜尋引擎有正確抓到這筆資料?這篇文章分享我的經驗以及讓你實際驗證 JSON-LD 是否和規且有被正確解讀。

旋轉箭頭符號

如何重寫陳舊系統:就像忒修斯之船

近期面對許多陳舊代碼維護的問題,碰巧我翻找到這個部落格:Understand Legacy Code,紀錄一下「重寫」陳舊系統可能會遇到的困境與解套方案。以我自己手上的專案為例,在進行專案升級評估時發現事情比原先想像還要複雜!

溝通符號

消除團隊學習債務:每日小會

開發者在記錄或轉移知識方面的「失敗」並不是因為懶惰或缺乏關心。 相反,[環境壓力]促使他們在績效和學習目標之間的複雜緊張關係中找到平衡。當讓學習變得顯見並不安全時,績效文化就會獲勝。透過每日小會的方式,每天花費短小的時間讓學習在團隊中被提倡鼓勵。

文章上有箭頭符號

內容於設計之前:給設計者的寫作建議

UI 介面當中文字佔據了絕大多數的內容,文字充斥在設計的每個角落,它們是最有威力的設計元素之一,以極為精簡的形式傳遞深刻的意涵。這篇文章想分享設計與內容可以是相輔相成的概念,並且討論設計者在沒有內容的情況下設計可能造成什麼樣的問題。

重疊的抽象幾何線條符號

故事化直白的解釋 Monorepo 是什麼

隨著前端的複雜程度增加,Monorepo 這個詞彙也時常出現在眼前,可惜的是相關介紹資源非常不足,趁著近期較為閒暇的時間來統整紀錄一下我對 Monorepo 的理解。受到不同好文章與影片的的啟發,我想寫一篇最直白的 Monorepo 解釋,希望能夠幫助更多人理解 Monorepo 的概念。

標籤符號

紀錄如何從頭打造數位產品 - 設計令牌篇

設計令牌(Design Tokens)或令牌是一種管理設計屬性與數值的方式,用於建構 UI 最細小的元素,適當的使用設計令牌可以讓設計系統更加彈性與可擴展,不論是任何職位,只要與設計系統相關的人士都應當了解設計令牌的概念。

選色器符號

紀錄如何從頭打造數位產品 - 顏色篇

近期公司購買了設計相關的課程,期望透過研究改良目前的設計來提升與開發合作的效率,恰好我之前的工作領域也與設計相關,而且我很早就想跨領域多寫與網頁相關的文章!因此打算特地開一系列文章記錄課程筆記以及我自己補充的想法與資源。

不高興表情符號

為什麼 CSS 這麼難學這麼詭異?

開發者們對 CSS 有不同的意見,有的人說它很簡單、有的人說它難以駕馭,這些都是事實。我時常聽到苦惱的後端或是與其打交道多年的自己脫口而出:「CSS 真的好詭異阿!」,這篇文章來總結為什麼 CSS 是一個讓人又愛又恨的存在,它為什麼這麼難學這麼詭異?

Astro Logo 符號

Astro 系列文第十七日:頁籤

透過內容集合動態的生成 Route 是件方便美好的事情,但一旦數量一多就必須要想辦法分批次顯示這些資料,恰好 Astro 內建頁籤可以幫助我們打造這方面功能。

Astro Logo 符號

Astro 系列文第十四日:圖片最佳化

通常文件會伴隨著圖片,而圖片可以佔據一個頁面絕大多數的運算資源與流量!你會希望圖片能夠被好好處理避免它們壓垮整個網站的體驗,Astro 預設自帶相關的元件與方法幫助你處理這些事務。

Astro Logo 符號

Astro 系列文第十三日:Markdown 與 MDX

撰寫網站最終還是要回歸到易於維護,能不能不需要接觸程式,只需透過編寫文件就能更改頁面內容呢?也就是將內容與版面、邏輯做分離。本章節我們將會學習 Markdown 與 MDX 來達成這件事。

Astro Logo 符號

Astro 系列文第十日:整合 UI 框架

前面提到如何在 `.astro` 格式中添加客戶端 JavaScript 使元件具備互動性。Astro 最吸引人的一項特點就是可以整合各大 UI 框架到元件之中,享受不同技術與其生態域帶來的便利與好處。在本章節將會從安裝整合到製作一個 React 元件。

Astro Logo 符號

Astro 系列文第八日:實作整合 Tailwind

這個章節更偏向我在 Astro 中使用 Tailwind 的歷程心得,如果你沒有打算導入 Tailwind 可以直接前往下一章節即可。透過兩個章節都在練習寫按鈕,現在推薦你嘗試撰寫各式各樣的元件熟悉使用 Astro,對你來說都不會是問題了。

Astro Logo 符號

Astro 系列文第七日:實作按鈕元件

在本章節綜合了先前「基礎元件」與「樣式」兩章節的內容,打造出一個通用的網頁按鈕元件,一起來實作看看吧。按鈕是網頁極具代表性的元件之一,下一章節講解整合 Tailwind 也會以這個例子出發,敬請期待!

Astro Logo 符號

Astro 系列文第二日:現有問題與解方

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今天理解到了動態網站與靜態網站的區別,關係到了網頁「渲染模式」的抉擇,而 Astro 就及是一個瞄準生成靜態頁面為主的框架。

Astro Logo 符號

Astro 系列文第一日:起飛前置準備

Astro 是一個以靜態內容為主的前端框架,受到前端社群極高評價。藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日大致介紹 Astro 的優勢與劣勢,以及社群與周邊資源。

開放框線中央有一個旋轉箭頭符號

了解網頁的三大渲染模式 Rendering Patterns feat. SSG, SSR, CSR

當建構一個網頁的時候,最首要面對的問題就是「網頁內容要怎麼生成並提交給用戶?」,而為了解決這個問題所產生的解決方法就是「網頁渲染模式 (Rendering Pattern)」。建構網站有許多種方式,藉由了解它們之間的取捨可以更好的幫助你建構下一個網頁專案。

重疊卡片符號

給初學者的 Jamstack 介紹

你可能在近期會很常聽到 Jamstack 這個詞彙,簡單來說它是一種現代建構網頁應用的方式。藉由這篇入門文章你可以了解:為什麼需要它?以及如何實踐這項技術。

旋轉箭頭中央有問號符號

傳值與傳址,都幾咧?

在程式語言中最基本的問題就是問題就是如何紀錄與操縱資料,牽扯到傳值與傳址的問題,這篇教學搭配圖表幫助你了解它們的差異。

+1符號

JavaScript 五個步驟製作計數器

計數器是入門各大框架基本會見到的習題,可以說是任何 App 最低限度的功能展示。這次使用原生的 JavaScript 來重現該題目,並且一步一步的思考並改善結果。

標籤符號

為什麼你應該要使用資料屬性 data-*

data 屬性是一個正式存儲資料於 HTML 的作法,將資訊儲存在 HTML 標籤屬性上,使 JavaScript 與 CSS 都能讀取得到元素的資料,同時也有一些應該特別注意的常見的錯誤範例也會在本文中展示。

節點符號

DOM API 一篇就會!

用一篇文章快速教你如何程序化的更動網頁,一起來學會如何存取、編輯與監聽 DOM ,還有綜合懶人包!

文字符號

授權透明、實用的字體哪裡找?

字體是版面的靈魂,好的字體能夠更好的表達文詞間的情緒與情境!本篇文章蒐集了實用且來源可靠、授權清楚的字體網站,在使用時請務必要注意授權範圍限制。