鐵人檔案
即使現成 Slider / Carousel 套件已經非常多，但我們仍可以藉由重造輪子，研究其中的原理，把學過的前端知識都用上。這一顆會滑的輪子需要 CSS 屬性 Flex、Transform 大量運用，以及配合 JavaScript 的模組化設計，最後在第 30 天讓它成為可以讓人安裝的輪子 (NPM 套件)，讓我們來試試吧！
無論是 Node 後端的套件或前端用的 JavaScript 套件，它們都被發佈到 npm.js 上，才能夠被使用者下 npm install 指令安裝。我們可...
不知道大家有沒有想過，自己設計的套件要取什麼名稱才夠味，才到位。 在討論這個話題之前，我們先來市場研究一下，目前市面上受歡迎的套件，都是什麼名字，其中的命名哲學...
昨天我們已完成套件的命名，也建立了 GitHub 儲存庫，NPM 套件庫也先把套件要用的名字定下來了，準備開始開發 Slider 套件，不過在這之前還有些開發環...
由於採用 SCSS 把整體的 CSS 語法依功能、佈局的區塊拆分為許多小的 .scss 檔案。JavaScript 也採用模組化的方式，最後的成品勢必要打包成單...
在前幾天的文章，我們已完善了開發環境的準備工作，像是制定好程式碼風格為 airbnb，使用了 ESLint、StyleLint、Prettier 來管理程式碼的...
Day 25 開始進行 Slider 套件規劃，確定了基本的的佈局如下。 圖 a: Sliderm 套件佈局 並預計使用的方法： const sliderm =...
還記得筆者在 Day 19 時，提到過的 CSS 命名模式 - BEM。我們採用它來為整個 Slider 重新命明其中的 CSS class，以避免使用者在採用...
雖然 JavaScript 沒有完整物件導向程式設計的實作例如抽象 (abstract)、介面 (interface)，但我們仍可以把在其它程式語言用到的物件導...
今天要介紹的是每一個 Slider 套件必備的基本功能，雖然是基本功能，但確是困難度最高的主菜，完成了這個功能，其它附加功能都是小菜一碟，慢慢加上去才成了滿漢大...
GitHub Page 是 github.com 上每一個 git 儲存庫的內建功能，可以用來架設靜態 HTML 網站。以筆者的 GitHub 帳號來作為例子，...
