鐵人檔案
遙想剛入行前端時，對於網頁中有哪些約定俗成的 UI 元件都沒有概念，實作就都是在亂寫！
但年初時跟著公司開發了一套 UI 元件庫，深刻感受到寫好一個 UI 元件所需要的觀念跟細節，像是 Design System、元件們的分類、彼此的依賴關係、UI 元件功能跟情境的區分、 前端開發架構 以及 使用上如何因應各種情境去更新、改版等等。
因此，這系列會以觀念為主，實作為輔。希望讓初踏入網頁開發領域的新手能對 UI 元件有基礎的認識和開發的架構，而已有經驗的老手能透過這系列更理解 UI 元件在網頁中所扮演的角色 ，注意到更多在開發上的小細節！
這 30 天跟著我一起來深度探索 UI 元件 吧！
大家好，我是讀哲學讀到寫 Web 的 Parker ，到現在約有兩年左右的開發經驗，遙想當初真的是完完全全從 0 開始，在這過程中，除了 HTML、CSS、J...
作為正式開始的第一篇要來講的是很基礎的網頁切版和怎麼去看網頁中有哪些元件，會分兩部分： 網頁微切版架構：讓還不太熟網頁的人理解一般網頁 UI 的架構大概會怎麼...
相信網路上其實已經有不少文章在談架構了，我的資歷也尚淺，今天雖然會介紹架構，但是主要會側重的點會是在 UI 元件在這樣的架構中的角色定位，我們可以如何去思考，...
如昨天預告的一樣，今天來介紹元件化開發的技術背景，它是什麼、為什麼重要，最後再講一下元件的開發流程。 首先，「元件化開發」是由於前後端分離跟前端框架的興起而達成...
今天是行前說明的最後一篇了，前面幾篇都是很架構面的知識，而今天要講的就是真的很貼近 UI 元件的分類系統了。 首先想先回答一個問題：「UI 元件為什麼要分類呢...
新章 突入！終於進入到期待已久的第二章 Design System 啦！ 那在講 Design System 之前想要先提到一個觀念：「前期規劃 > 實作...
在前一天我們知道了 Design System 為什麼出現、它試圖解決的問題和一些使用上的 Mindset 後，今天要來介紹 Design System 到底...
今天是這系列第一次碰 Code，要來介紹三種 Color System 在專案中實作的方式，但實現方式絕對不只這三種，這邊只是提供個參考或概念給大家！ 這三種...
雖然昨天已經介紹了如何在你的網頁中實作 Color System，但嚴格上來說今天才算是這系列第一篇的實作，畢竟 Color 只涵蓋了 CSS 的部分，並且是...
今天就要來實作 Icon 啦！事不宜遲直接開始！ 想先看 Code 或是 Demo 的由此去：Github Repo： ithelp-ui-demoLive D...
