前端框架 Svelte 上手指南：從基本介紹到 UI 實戰與測試（iT邦幫忙鐵人賽系列書）

全台首創
線上線下全方位健康管理提案
自用零接觸，送禮送健康！
健康習慣養成課程3000元＋運動教練課程2000元＋
營養師課程2000元，還有好多驚喜，
現在只花3500元把滿滿超值大禮盒帶回家，
正是你減重塑身更健康的最佳選擇！
健康管理禮盒給你8驚喜！
一、線上課程一：價值3000元「健康資訊全精華」
二、線上課程二：價值2000元6堂「彈力帶使用課程」（初階＋進階）
三、線上課程三：價值2000元「211餐盒營養師專業指導」（初階＋進階）
四、裝什麼都好用的「輕巧多功能時尚提包」
五、讓你打破觀念框架的《習慣要健康》書籍1本
六、陪你改變長久慣性的《5分鐘健康管理日記》1本
七、運用NLP神經語言程式學原理的「211餐盒」
八、無異味＋親膚感＋氣質藍「健康彈力帶」3條

改變的第一步！專家帶你掌握三祕訣
本套禮盒由培訓教練的教練、全方位健康顧問培訓專家所設計。曾經以為沒有病痛就是健康的她，體重曾飆升到85公斤，同時罹患五種疾病，從此大量學習身心靈健康法，積極透過管理健身房與培訓健康顧問的經驗，去實證所學的證照與知識；至今已幫助超過1800位客戶養成更健康的生活習慣，健康減脂也達5000公斤以上！

她以長期經驗得出，唯有從健康習慣養成、運動訓練、健康飲食規劃三管齊下，才能真正達到想要的健康成果，而最難的就是做出「改變」，「線上＋線下」陪伴同步練習，便是幫助你跨出「改變」第一步最好的方法！

恭喜你，即將迎向改變三祕訣帶給你的全新體驗與喜悅──
有趣：加入線上課程的活潑指引，輕鬆學會全部精髓。
有效：書每看一篇＋日記每寫一天，離打破慣性的日子就越近。
有伴：日記像朋友陪你天天練習，做彈力帶運動或準備211餐盒時，也等於私人教練和營養師就在你身邊。

花30分鐘就能減重＋塑身＋健康，輕鬆練習、無痛改變
每周做下面的練習3次，另4天以準備211餐盒取代彈力帶運動，一段時間後就能感受自己有明顯大改變。
1. 參考彈力帶下半身訓練影片（持續10分鐘）。
2. 持續上面動作，同時花5分鐘看書一篇＋5分鐘寫日記。
3. 剩下20分鐘跟著彈力帶教學影片做其他訓練。
★ 10分鐘強化肌肉力量
彈力帶含5／15／30LBS三種磅數。影片有初階3支（上半身／核心／下半身訓練）及進階3支示範，教練以最細緻的體線定位，循序漸進從最安全的低風險教到更有挑戰性的動作。
★10分鐘準備餐盒
此款餐盒由NLP專業執行師特別規劃。營養師除說明初階的食材2：1：1落實原則，再進階提供數種搭配法，讓你吃得營養健康且越吃越瘦。
★ 5分鐘讀《習慣要健康》一小篇
作者以幽默口吻談打破慣性、告別壞習慣、三感減肥法等一般人似懂非懂的議題，全書60篇精華，都是能幫助你輕鬆改變的能量指引與練習。（請續讀其他頁面，有針對本書內容之精彩介紹）
★ 5分鐘寫一頁《5分鐘健康管理日記》
除運用手寫日誌這件事，發揮眼、耳、手三種感官功能，另可跟著15篇指引文，開始心寧靜運動及能量朗讀，活在每一天，60天後你會更喜歡自己。

除「價值7000元三大線上課程」之外，再加碼贈禮
掃描禮盒所示QR CODE，加入LINE@好友，即可依步驟輕鬆領取課程。
★開箱禮盒加碼送：熱門「大腦銀行商學堂」線上課程7天體驗（見《習慣要健康》第29頁，限用微信帳號領取）。
★2021年12月31日前完成線上課程開通，再加贈「健康防疫口罩夾一組」（日本水性塗布IONPURE©無機銀離子抗菌材料專利授權）。

一場疫情，是否改變了你的人生觀？從此更懂得愛自己、欣賞自己，也認為健康是珍愛身邊親人的最好禮物；然而躲過了疫情的衝擊，你有變得更健康了嗎？

不再給自己找藉口了，從今起讓專家陪伴你～
祝福每一位想改變的人，一天比一天更年輕更健康，體態越完美，身體越逆齡！

【《習慣要健康》書籍專文推薦】
真誠與幽默的口吻，生動與鮮活的案例，讓你看了之後會願意開始，並且知道持續努力的方法！
──Dr．53 林頌凱／台灣運動醫學權威、復健科資深主任醫師

書中「三感減肥法」，即是她於接受NLP專業訓練後，將其所學的理論與技術，實際應用在指導學生健康瘦身的特別體悟與收穫。
──Hogan Lee（李玉光）／華人NLP暨催眠教育推廣中心首席講師

正念不僅能夠讓自己安心下來，也能夠讓自己好好的飲食、好好的生活，成為一個有品質、有品味、有品格的人。
──吳楷貴／聖心心理諮商所所長、宜蘭縣諮商心理師公會副理事長

人們所追求的並非長命百歲，而是為了能延長或優化健康的狀態。
──李杰凊／中華民國健身運動協會理事長

琇文在健康產業發展多年的心得，加上在天賦優勢心理學所習得對人的覺知覺察轉換成心靈健康，將學理與實務融會貫通。
──林俊安／Asia Training集團銷售總裁、天賦優勢心理學實戰導師、「碼上成交」課程創始人

如果你也正在苦惱怎麼讓自己變得更健康，這本書將提供給你一套完整的指引。
──林暐淳／全台最大線上營養師平台、Cofit 群健科技執行長

健康是一種態度！琇文花了主要的篇幅，闡述寶貴的健康觀念以及如何活出健康的美好狀態，篇篇都是精華，我真心可以感受到她的愛心、用心！
──邵明涵／完美曲線股份有限公司總經理、中華民國女性健康運動協會理事長

這本書提出了簡單可行的方法，也使我想起 KISS原則（keep it simple and stupid），只要依循步驟一步一步的執行，一段時間後一定可看到績效。
──張欽豐／中華健康管理協會理事長

現在開始改變千古以來錯誤的靜態養生習慣，跟著作者一起動，
開始真正的抗老化之旅吧！
──郭珈佑／Curves 三店之加盟主、Curves 加盟主協會前主席

兩天的運動只會讓你感覺身體舒適，五年以上的保健才可能脫胎換骨。
──鄧添來／交通部郵電司前司長、台灣電信產業發展協會監事、智上科技股份有限公司董事

她在健康產業發展成功，將自己跟疾病奮鬥，到擁有健康身心的過程中學習的知能轉換，運用實務貢獻所長。
──鄧稚勤／新思國際集團創辦人、Asia Training 台灣市場開發負責人

因在台灣電信客服的歷練，讓她習慣去思索客戶的困難，正是具備客戶思維的態度，相信她不斷優化商業模式的許多思維，未來也能滿足更多客戶的期待！
蘇引華／大腦銀行董事長、世界首席大腦工程師

（以上依姓名筆畫排序）

陳愷奕（愷開）
從 2015 年踏入網頁前端開發，喜歡探索前端技術，利用網頁解決問題。在 2019 年末認識 Svelte 後，主要的 side project 都以 Svelve 為主力做開發。為了在台灣帶動更多 Svelte 的討論，創辦了 Svelte.js Taiwan Facebook 社團，並在部落格上寫了數篇 Svelte 相關的文章。

第 1 章 Svelte 簡介
1-1　「又」一個前端框架？
1-2　為什麼 Svelte 值得學習？
1-3　重新思考響應機制（Rethinking Reactivity）
1-4　減少運行時期的額外開銷
1-5　Svelte 的缺點
1-6　環境準備
1-7　如何在線上寫 Svelte
1-8　初探 Svelte
1-9　除了 Svelte 外更重要的事

第 2 章 Svelte 入門篇
2-1　安裝 Svelte 與開發環境
2-2　使用 Rollup 開發 Svelte
2-3　使用 webpack 開發 Svelte
2-4　基本語法介紹
2-5　資料傳遞與標籤
2-6　$響應式語法
2-7　如何加入樣式
2-8　Svelte 當中的 Class
2-9　特殊標籤 @Html
2-10　特殊標籤 @Debug
2-11　邏輯判斷語法（If, Else）
2-12　迴圈語法
2-13　事件綁定與客製化事件
2-14　await 區塊語法
2-15　key 區塊語法
2-16　Svelte 生命週期方法
2-17　Svelte 與雙向綁定 bind
2-18　Svelte 中的描述符
2-19　Svelte 與其他樣板引擎的不同

第 3 章 Svelte 進階篇
3-1　在 Svelte 元件使用 CSS 自定義屬性
3-2　Svelte 當中的 Store
3-3　Svelte 當中的 context
3-4　Svelte 當中的 tick
3-5　Svelte 當中的轉場機制 transition
3-6　Svelte 當中的 motion
3-7　Svelte 當中的 animate
3-8　Svelte 當中的 slot
3-9　Svelte 當中的 action
3-10　Svelte 內建 Element
3-11　Svelte SSR 功能
3-12　Svelte 編譯設定
3-13　如何在 Svelte 中使用 CSS 預處理器

第 4 章 Svelte 實戰篇 – 實作常見 UI 元件
4-1　前言：實作 UI 時要注意的事
4-2　客戶端路由（Client Side Routing）
4-3　處理 API 與畫面互動
4-4　實作 Modal 元件
4-5　客製化滑桿 Slider
4-6　表格（Table）
4-7　下拉式組合方塊（Combo Box）
4-8　音樂播放器
4-9　通知佇列
4-10　Tooltip

第 5 章 伺服器渲染 – SvelteKit
5-1　什麼是 Sveltekit
5-2　前端頁面產生方式：SSR、CSR、SSG
5-3　Sveltekit 檔案系統基礎路由
5-4　Layout 與巢狀 Layout
5-5　在 Pages 中讀取並使用參數
5-6　錯誤頁面
5-7　Hooks
5-8　模組
5-9　設定
5-10　使用 adapter 部署

第 6 章 測試篇
6-1　為什麼要撰寫測試？
6-2　測試的種類
6-3　使用 testing-library 與 jest 撰寫測試
6-4　使用 Cypress 撰寫端對端測試

第 7 章 部署篇 – 將 Svelte 專案公開到網路上
7-1　使用 Netlify 部署 Svelte App
7-2　使用 Vercel 部署 Svelte App
7-3　使用 Github Pages 部署 Svelte App

第 8 章 Svelte 原理篇
8-1　抽象語法樹
8-2　Svelte 如何生成程式碼
8-3　分析 Svelte 生成程式碼

附錄 名詞釋義與中英對照