技術 [Svelte 的奇妙冒險] Day 30 - 所以為什麼是 Svelte 而不是 React

終於來到最後一天，今天就來分享在 Day 1 時提到的為什麼我們公司的新專案不是繼續使用 React 而是改用 Svelte 前情提要 去年年末我們團隊開始了一...

技術 [Svelte 的奇妙冒險] Day 17 - SvelteKit 中的路由 (2)

今天來繼續介紹 SvelteKit 的路由。 +layout.svelte +layout.svlete 主要是來建立頁面之間共用的佈局，像是如果我有一個 h...

技術 [Svelte 的奇妙冒險] Day 28 - 部署

今天來介紹如何部署 SvelteKit 的網站，基本上我們可以分成需不需要 server-side 來選擇部署的設定。 那這次的部署都是使用 Cloudflar...

技術 [Svelte 的奇妙冒險] Day 27 - 環境變數

今天來介紹 SvelteKit 怎麼使用環境變數（environment variables），所謂環境變數是指我們程式運行所需要的某些設定、參數或敏感資料等等...

技術 [Svelte 的奇妙冒險] Day 26 - 進階路由

之前在 Day19 最後的總結有提到，頁面基本上都會按照它的檔案路徑而產生路由規則及使用對應 layout ，像是如果我的檔案是 /foo/+page.svel...

技術 [Svelte 的奇妙冒險] Day 15 - SvelteKit 介紹

為什麼我們需要 SvelteKit? 先說回 SPA 在 SPA 流行之前，前端主要是出現在 MPA (Multi Page App)裡的 template 的...

技術 [Svelte 的奇妙冒險] Day 16 - SvelteKit 中的路由

SvelteKit 的路由是基於 filesystem-based router 所建立的，簡單來說就是使用者所看到的 URL 跟檔案存放的路徑有關。 Svel...

技術 [Svelte 的奇妙冒險] Day 18 - SvelteKit 中的路由 (3)

+server.ts 前幾天有提到 SvelteKit 是一個全端框架，也就是說它能夠寫一些簡單的 API ，關於 API 的路由控制也跟我們的頁面一樣都是跟資...

技術 [Svelte 的奇妙冒險] Day 19 - SvelteKit 中的路由 (4)

+page.server.ts 在 Day 17 時有提到有些資料可以透過 +page.ts 的 load 的 function 先行在 server-sid...

技術 [Svelte 的奇妙冒險] Day 20 - 錯誤處理

+error.svelte 在 SvelteKit 中我們可以利用 +error.svelte 來設定遇到錯誤時該如何顯示 <!-- in src/ro...

技術 [Svelte 的奇妙冒險] Day 21 - 表單

今天來介紹 SvelteKit 中內建的表單功能，主要的特點就是我們能夠利用 HTML 的 <form> submit 的行為來直接跟 Svelte...

技術 [Svelte 的奇妙冒險] Day 23 - Hooks

SvelteKit 提供了一系列 function 讓我們可以攔截特定事件並且可以對這些事件做出不同的回應，也就是類似 middleware 的概念。 主要分為...

技術 [Svelte 的奇妙冒險] Day 22 - Link option

之前有說過在 SvelteKit 中，在頁面 redirect 的操作都只要透過 HTML 的 <a> 即可並不需要額外的 component ，...

技術 [Svelte 的奇妙冒險] Day 24 - Snapshot

試想一個情況，今天如果有一個表單想隨時保存使用者填寫的資料，能夠他跳去別的頁面或者不小心按到重新整理時依然能夠取回他所填的資料。 直覺來說可能會透過像是 loc...

技術 [Svelte 的奇妙冒險] Day 25 - Shallow routing

今天來介紹一個有趣的功能「Shallow routing」，直白翻譯的話叫做「淺層路由」，所謂淺層就是相對於一般的 routing 來說他雖然更新了 URL 但...