iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
影片教學

前端框架新選擇 - 30 天從 0 到 1 學 Svelte 系列

本系列會從基礎 Svelte 語法與功能介紹開始,循序漸進學習 Svelte 並且應用在前端常見的 UI 互動上;熟悉本框架之後會開始深入探討 Svelte 的應用與框架背後的原理,希望讓大家對 Svelte 有通盤性的了解。

鐵人鍊成 | 共 30 篇文章 | 46 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11: Svelte 內建 element 與 SSR 淺談

影片 內容 在 svelte 當中有許多內建 element 可以幫助簡化程式碼。例如 head, body, window, options 等等 詳細...

2020-09-20 ‧ 由 愷開 分享
DAY 12

Day12: UI 實戰篇 - API 處理與畫面互動 | 30 天從 0 到 1 學 Svelte

在前 11 天當中我們把大部分 Svelte 的功能都講解完啦!(撒花)從今天開始我們會搭配 Svelte 來實作各種前端 UI 的應用,也歡迎大家提供想法~...

2020-09-21 ‧ 由 愷開 分享
DAY 13

Day13: UI 實戰篇 - 如何實作一個好的 Modal? | 30 天從 0 到 1 學 Svelte

在前 11 天當中我們已經介紹大部分的 Svelte 功能,從 Day12 開始我們會使用 Svelte 來實作各種前端常見的 UI 應用,讓大家更能實踐 Sv...

2020-09-22 ‧ 由 愷開 分享
DAY 14

Day14: UI 實戰篇 - Slider 與列表互動 | 30 天從 0 到 1 學 Svelte

影片 內容 透過 Svelte 來實作一個客製化的 Slider,並且盡可能地涵蓋多一點細節。 ◼︎ 簡報連結:https://speakerdeck.com...

2020-09-23 ‧ 由 愷開 分享
DAY 15

Day15. UI 實戰篇:多功能表格實作 | 30 天從 0 到 1 學 Svelte

影片 內容 用 Svelte 實作動態表格 UI 這次實作的影片因為時間上的關係,有一些比較細部的功能並沒有實作出來,像是 a11y 的支援、排序的按鈕、更多...

2020-09-24 ‧ 由 愷開 分享
DAY 16

Day16. UI 實戰篇:下拉式組合方塊(Combo Box) | 30 天從 0 到 1 學 Svelte

影片 內容 在前端當中可能會出現的場景,在大量的選項清單當中選出一個選項,當選項過多時,長時間的滾動可能會降低使用者體驗,這時可以透過文字框輔助做下拉選單,方...

2020-09-25 ‧ 由 愷開 分享
DAY 17

Day17. UI 實戰篇:音樂播放器 | 30 天從 0 到 1 學 Svelte

影片 內容 ◼︎ 本集內容:用 Svelte 實作客製化音樂播放器 ◼︎ 簡報連結:https://speakerdeck.com/kjj6198/day3-...

2020-09-26 ‧ 由 愷開 分享
DAY 18

Day18. UI 實戰篇:圖片檢視器 | 30 天從 0 到 1 學 Svelte

影片 內容 本次程式碼連結:https://svelte.dev/repl/df5cb8d11d214af881d109b0c7c10b51?version...

2020-09-27 ‧ 由 愷開 分享
DAY 19

Day19. UI 實戰篇:通知佇列 | 30 天從 0 到 1 學 Svelte

影片 內容 用 Svelte 實作通知佇列 UI 並且在跨元件之間溝通 ◼︎ 相關連結: ・Svelte 官網 https://svelte.dev・程式碼連...

2020-09-28 ‧ 由 愷開 分享
DAY 20

Day20. UI 實戰篇:Tooltip | 30 天從 0 到 1 學 Svelte

影片 內容 用 Svelte 實作 Tooltip UI 相關連結 程式碼範例:https://svelte.dev/repl/58058516ea844c...

2020-09-29 ‧ 由 愷開 分享