آموزش Svelte & SvelteKit: راهنمای کامل

سرفصل ها و درس ها

معرفی Svelte Introduction to Svelte

• قبل از شروع Before Getting Started

• نسخه ی نمایشی برنامه ای که قرار است بسازیم A Demo of the App that We Are Going to be Building

• Svelte چیست؟ What is Svelte?

• ابزارها و برنامه های افزودنی Tools & Extensions

• Svelte در مقابل SvelteKit Svelte vs. SvelteKit

معرفی Svelte Introduction to Svelte

• قبل از شروع Before Getting Started

• نسخه ی نمایشی برنامه ای که قرار است بسازیم A Demo of the App that We Are Going to be Building

• Svelte چیست؟ What is Svelte?

• ابزارها و برنامه های افزودنی Tools & Extensions

• Svelte در مقابل SvelteKit Svelte vs. SvelteKit

شروع با Svelte Getting Started With Svelte

• ایجاد یک الگوی Svelte Vite Creating a Svelte Vite Template

• ساختار پایه اجزای Svelte Svelte Components Basic Structure

• کاوش حالت با یک مولفه ساده شمارنده Exploring State With A Simple Counter Component

• بیانیه های واکنشی Reactive Statements

• اظهارات واکنشی Gotchas Reactive Statements Gotchas

• لوازم جانبی Component Props

شروع با Svelte Getting Started With Svelte

• ایجاد یک الگوی Svelte Vite Creating a Svelte Vite Template

• ساختار پایه اجزای Svelte Svelte Components Basic Structure

• کاوش حالت با یک مولفه ساده شمارنده Exploring State With A Simple Counter Component

• بیانیه های واکنشی Reactive Statements

• اظهارات واکنشی Gotchas Reactive Statements Gotchas

• لوازم جانبی Component Props

با ایجاد یک کامپوننت دکمه‌ای، نرم‌افزار بیشتری را کاوش کنید Exploring More Svelte by Creating a Button Component

• دسترسی به کودکان جزء با اسلات Accessing Component Children With Slots

• استفاده از SCSS در یک پروژه Svelte با استفاده از svelte-preprocess Using SCSS in a Svelte Project Using svelte-preprocess

• افزودن کلاس ها به صورت پویا با استفاده از دستورالعمل کلاس Adding Classes Dynamically Using The Class Directive

• دستورالعمل سبک The Style Directive

• استفاده از اسلات های نامگذاری شده Using Named Slots

• استفاده از Slot Props Using Slot Props

• انتقال رویداد و اصلاح کننده ها Event Forwarding and Modifiers

• حمل و نقل لوازم با $respProps Forwarding Props With $respProps

با ایجاد یک کامپوننت دکمه‌ای، نرم‌افزار بیشتری را کاوش کنید Exploring More Svelte by Creating a Button Component

• دسترسی به کودکان جزء با اسلات Accessing Component Children With Slots

• استفاده از SCSS در یک پروژه Svelte با استفاده از svelte-preprocess Using SCSS in a Svelte Project Using svelte-preprocess

• افزودن کلاس ها به صورت پویا با استفاده از دستورالعمل کلاس Adding Classes Dynamically Using The Class Directive

• دستورالعمل سبک The Style Directive

• استفاده از اسلات های نامگذاری شده Using Named Slots

• استفاده از Slot Props Using Slot Props

• انتقال رویداد و اصلاح کننده ها Event Forwarding and Modifiers

• حمل و نقل لوازم با $respProps Forwarding Props With $respProps

غواصی عمیق تر با جزء فهرست کارها Diving Deeper With a Todo List Component

• {#each} حلقه‌ها {#each} Loops

• اتصال مقدار ورودی به یک متغیر Binding Input Value to a Variable

• به روز رسانی آرایه ها و اشیاء در Svelte Updating Arrays & Objects in Svelte

• قطعات اتصال دهنده Binding Component Props

• رویدادهای کامپوننت سفارشی Custom Component Events

• کار با داده های تغییرناپذیر Working With Immutable Data

• حذف رویداد Todos Removing Todos Event

• جابجایی رویداد Todos Toggling Todos Event

• لوازم فقط خواندنی Readonly Props

• اشکال زدایی کد در Svelte Code Debugging in Svelte

• توابع چرخه حیات جزء Component Lifecycle Functions

• مثال عملی توابع چرخه حیات Lifecycle Functions Practical Example

• ابعاد صحافی Binding Dimensions

• عملکرد چرخه حیات کنه The tick lifecycle function

• پاکسازی کامپوننت ما Cleaning Up Our Component

• یک ظاهر طراحی به جزء ما Styling Our Component

• بلوک {#انتظار The {#await} Block

• در حال بارگیری و رسیدگی به وضعیت بارگیری و خطا onMount Loading and Handling Loading & Error States

• افزودن Todos از API Adding Todos From the API

• حذف Todos با استفاده از API Removing Todos Using the API

• تغییر کارها [راه حل تمرین] Toggling Todos [Exercise Solution]

• با اسلات ها، کامپوننت را قابل تنظیم تر کنید Making the Component More Customizable with Slots

غواصی عمیق تر با جزء فهرست کارها Diving Deeper With a Todo List Component

• {#each} حلقه‌ها {#each} Loops

• اتصال مقدار ورودی به یک متغیر Binding Input Value to a Variable

• به روز رسانی آرایه ها و اشیاء در Svelte Updating Arrays & Objects in Svelte

• قطعات اتصال دهنده Binding Component Props

• رویدادهای کامپوننت سفارشی Custom Component Events

• کار با داده های تغییرناپذیر Working With Immutable Data

• حذف رویداد Todos Removing Todos Event

• جابجایی رویداد Todos Toggling Todos Event

• لوازم فقط خواندنی Readonly Props

• اشکال زدایی کد در Svelte Code Debugging in Svelte

• توابع چرخه حیات جزء Component Lifecycle Functions

• مثال عملی توابع چرخه حیات Lifecycle Functions Practical Example

• ابعاد صحافی Binding Dimensions

• عملکرد چرخه حیات کنه The tick lifecycle function

• پاکسازی کامپوننت ما Cleaning Up Our Component

• یک ظاهر طراحی به جزء ما Styling Our Component

• بلوک {#انتظار The {#await} Block

• در حال بارگیری و رسیدگی به وضعیت بارگیری و خطا onMount Loading and Handling Loading & Error States

• افزودن Todos از API Adding Todos From the API

• حذف Todos با استفاده از API Removing Todos Using the API

• تغییر کارها [راه حل تمرین] Toggling Todos [Exercise Solution]

• با اسلات ها، کامپوننت را قابل تنظیم تر کنید Making the Component More Customizable with Slots

انیمیشن ها و انتقال ها Animations & Transitions

• مقدمه ای بر انتقال Introduction to Transitions

• متحرک سازی Todos ما Animating Our Todos

• {#key} انتقال {#key} Transitions

• انیمیشن فلیپ The FLIP Animation

• انتقال سفارشی CSS Custom CSS Transitions

• انتقال‌های CSS سفارشی (ادامه) Custom CSS Transitions (Cont.)

• انتقال های جاوا اسکریپت سفارشی Custom JavaScript Transitions

• نمایش لیست های انجام شده و لغو شده به طور جداگانه Displaying Done and Undone Lists Separately

• انتقال Crossfade The Crossfade Transition

انیمیشن ها و انتقال ها Animations & Transitions

• مقدمه ای بر انتقال Introduction to Transitions

• متحرک سازی Todos ما Animating Our Todos

• {#key} انتقال {#key} Transitions

• انیمیشن فلیپ The FLIP Animation

• انتقال سفارشی CSS Custom CSS Transitions

• انتقال‌های CSS سفارشی (ادامه) Custom CSS Transitions (Cont.)

• انتقال های جاوا اسکریپت سفارشی Custom JavaScript Transitions

• نمایش لیست های انجام شده و لغو شده به طور جداگانه Displaying Done and Undone Lists Separately

• انتقال Crossfade The Crossfade Transition

اقدامات Actions

• مقدمه ای بر اکشن ها Introduction to Actions

• اقدام Longpress The Longpress Action

• استفاده از Tippy.js در Svelte Without Action Using Tippy.js in Svelte Without Actions

• ایجاد یک اکشن Tippy.js Creating a Tippy.js Action

اقدامات Actions

• مقدمه ای بر اکشن ها Introduction to Actions

• اقدام Longpress The Longpress Action

• استفاده از Tippy.js در Svelte Without Action Using Tippy.js in Svelte Without Actions

• ایجاد یک اکشن Tippy.js Creating a Tippy.js Action

مغازه ها Stores

• ایجاد یک مینی روتر برای آزمایش Creating a Mini Router for Testing

• تنظیمات برنامه ذخیره با فروشگاه های قابل نوشتن Store Application Settings With Writable Stores

• اشتراک‌های خودکار و صحافی فروشگاه Auto-subscriptions & Store Binding

• با استفاده از تنظیمات فروشگاه مقدار طرح رنگ Using the Settings Store Color Scheme Value

• عملکرد برگشت به تماس فروشگاه Store Callback Function

• مکان فعلی را با فروشگاه‌های خواندنی ذخیره کنید Store Current Location With Readable Stores

• فروشگاه های سفارشی Custom Stores

• فروشگاه های مشتق شده Derived Stores

• فروشگاه های Writable Tweened Tweened Writable Stores

• درون یابی سفارشی در فروشگاه های توئیند Custom Interpolations In Tweened Stores

• فروشگاه های قابل نوشتن بهار Spring Writable Stores

مغازه ها Stores

• ایجاد یک مینی روتر برای آزمایش Creating a Mini Router for Testing

• تنظیمات برنامه ذخیره با فروشگاه های قابل نوشتن Store Application Settings With Writable Stores

• اشتراک‌های خودکار و صحافی فروشگاه Auto-subscriptions & Store Binding

• با استفاده از تنظیمات فروشگاه مقدار طرح رنگ Using the Settings Store Color Scheme Value

• عملکرد برگشت به تماس فروشگاه Store Callback Function

• مکان فعلی را با فروشگاه‌های خواندنی ذخیره کنید Store Current Location With Readable Stores

• فروشگاه های سفارشی Custom Stores

• فروشگاه های مشتق شده Derived Stores

• فروشگاه های Writable Tweened Tweened Writable Stores

• درون یابی سفارشی در فروشگاه های توئیند Custom Interpolations In Tweened Stores

• فروشگاه های قابل نوشتن بهار Spring Writable Stores

Context API The Context API

• مقدمه ای بر Context API Introduction to the Context API

• مدیریت یک فرم بدون زمینه Handling a Form Without Context

• ایجاد اجزای فرم و فیلد Creating Form & Field Components

• استفاده از زمینه برای انتقال داده به کودکان Using Context to Pass Data Down to Children

• ترکیب زمینه و فروشگاه‌ها برای واکنش‌پذیر کردن زمینه ما Combining Context & Stores to Make Our Context Reactive

• مدیریت فرم اعتبار سنجی Handling Form Validation

• استفاده از Slots & Slot Props برای سفارشی سازی بیشتر اجزا Using Slots & Slot Props For More Component Customization

• استفاده ضروری از کتابخانه Konva.js Using Konva.js Library Imperatively

• ایجاد یک جزء Konva Stage Creating a Konva Stage Component

• ایجاد مولفه های لایه و رکت Creating Layer & Rect Components

• رسیدگی به لایه ها و لایه های تخریب کننده Handling Destroying Layers & Rects

• مدیریت به روز رسانی اجزای Konva.js Handling Updating Konva.js Components

• مدیریت رویدادهای Konva.js Handling Konva.js Events

• استفاده از Props فقط خواندنی برای دسترسی به شی Rect ما Using Read-Only Props to Access Our Rect Object

Context API The Context API

• مقدمه ای بر Context API Introduction to the Context API

• مدیریت یک فرم بدون زمینه Handling a Form Without Context

• ایجاد اجزای فرم و فیلد Creating Form & Field Components

• استفاده از زمینه برای انتقال داده به کودکان Using Context to Pass Data Down to Children

• ترکیب زمینه و فروشگاه‌ها برای واکنش‌پذیر کردن زمینه ما Combining Context & Stores to Make Our Context Reactive

• مدیریت فرم اعتبار سنجی Handling Form Validation

• استفاده از Slots & Slot Props برای سفارشی سازی بیشتر اجزا Using Slots & Slot Props For More Component Customization

• استفاده ضروری از کتابخانه Konva.js Using Konva.js Library Imperatively

• ایجاد یک جزء Konva Stage Creating a Konva Stage Component

• ایجاد مولفه های لایه و رکت Creating Layer & Rect Components

• رسیدگی به لایه ها و لایه های تخریب کننده Handling Destroying Layers & Rects

• مدیریت به روز رسانی اجزای Konva.js Handling Updating Konva.js Components

• مدیریت رویدادهای Konva.js Handling Konva.js Events

• استفاده از Props فقط خواندنی برای دسترسی به شی Rect ما Using Read-Only Props to Access Our Rect Object

زمینه ماژول Module Context

• متن ماژول چیست؟ What is Module Context

• استفاده از زمینه ماژول برای پیگیری نمونه های کامپوننت Using Module Context to Keep Track of Component Instances

• ایجاد یک مؤلفه ساده پخش کننده ویدیو و اطلاعات رسانه اتصال Creating a Simple Video Player Component & Binding Media Information

• مکث ویدیوهای دیگر هنگام پخش ویدیو Pausing Other Videos When Playing a Video

• پخش و مکث همه ویدیوها Playing & Pausing All Videos

زمینه ماژول Module Context

• متن ماژول چیست؟ What is Module Context

• استفاده از زمینه ماژول برای پیگیری نمونه های کامپوننت Using Module Context to Keep Track of Component Instances

• ایجاد یک مؤلفه ساده پخش کننده ویدیو و اطلاعات رسانه اتصال Creating a Simple Video Player Component & Binding Media Information

• مکث ویدیوهای دیگر هنگام پخش ویدیو Pausing Other Videos When Playing a Video

• پخش و مکث همه ویدیوها Playing & Pausing All Videos

SvelteKit: صفحات و طرح‌بندی‌ها SvelteKit: Pages & Layouts

• مقدمه ای بر SvelteKit Introduction to SvelteKit

• ایجاد یک پروژه SvelteKit جدید Creating a New SvelteKit Project

• ایجاد مسیرها Creating Routes

• نام مستعار پوشه $lib و نام مستعار سفارشی The $lib Folder Alias & Custom Aliases

• توابع ناوبری: goto()، beforeNavigate() و afterNavigate() Navigation Functions: goto(), beforeNavigate() & afterNavigate()

• پارامترهای استراحت Rest Parameters

• پارامترهای اختیاری Optional Parameters

• تطبیق پارامترها Parameter Matchers

• اصول چیدمان Layouts Basics

• تغییر طرح بندی به صورت مشروط Changing Layouts Conditionally

• گروه های طرح بندی Layout Groups

• خارج شدن از سلسله مراتب طرح بندی Breaking Out of Layouts Hierarchy

SvelteKit: صفحات و طرح‌بندی‌ها SvelteKit: Pages & Layouts

• مقدمه ای بر SvelteKit Introduction to SvelteKit

• ایجاد یک پروژه SvelteKit جدید Creating a New SvelteKit Project

• ایجاد مسیرها Creating Routes

• نام مستعار پوشه $lib و نام مستعار سفارشی The $lib Folder Alias & Custom Aliases

• توابع ناوبری: goto()، beforeNavigate() و afterNavigate() Navigation Functions: goto(), beforeNavigate() & afterNavigate()

• پارامترهای استراحت Rest Parameters

• پارامترهای اختیاری Optional Parameters

• تطبیق پارامترها Parameter Matchers

• اصول چیدمان Layouts Basics

• تغییر طرح بندی به صورت مشروط Changing Layouts Conditionally

• گروه های طرح بندی Layout Groups

• خارج شدن از سلسله مراتب طرح بندی Breaking Out of Layouts Hierarchy

SvelteKit: بارگیری داده ها SvelteKit: Loading Data

• تابع بار مشترک (سرور و مشتری) Shared Load Function (Server & Client)

• ایمنی نوع با انواع تولید شده Type-safety with Generated Types

• نمایش داده های بارگذاری شده ما Displaying Our Loaded Data

• توابع بارگذاری فقط سرور Server Only Load Functions

• توابع بارگذاری طرح Layout Load Functions

• تمرین صفحه محصول + خطاها و بازگردانی ها Product Page Exercise + Errors & Rediercts

• انتقال داده از یک صفحه به طرح والد آن Passing Data From a Page to its Parent Layout

• کنترل پاسخ مسیرها و ایجاد نقاط پایانی Controlling Routes' Response and Creating Endpoints

• مدیریت صفحات و نقاط پایانی در یک مسیر و ایجاد نقاط پایانی POST Handling Pages & Endpoints in the Same Route and Creating POST Endpoints

• ورودی های تابع بارگذاری Load Function Inputs

• استفاده از Fetch در SvelteKit Using Fetch in SvelteKit

• [به‌روزرسانی] جریان داده با وعده‌ها [UPDATE] Data Streaming with Promises

• ایجاد صفحه ورود و نقطه پایانی Creating a Login Page and Endpoint

• استفاده از کوکی ها برای ورود و خروج Using Cookies to Login and Logout

• اجرای مجدد همه عملکردهای بارگذاری Re-running All Load Functions

• اجرای مجدد عملکردهای بار خاص Re-running Specific Load Functions

• [به روز رسانی] گرفتن و بازیابی داده ها با عکس های فوری [UPDATE] Capturing & Restoring Data with Snapshots

SvelteKit: بارگیری داده ها SvelteKit: Loading Data

• تابع بار مشترک (سرور و مشتری) Shared Load Function (Server & Client)

• ایمنی نوع با انواع تولید شده Type-safety with Generated Types

• نمایش داده های بارگذاری شده ما Displaying Our Loaded Data

• توابع بارگذاری فقط سرور Server Only Load Functions

• توابع بارگذاری طرح Layout Load Functions

• تمرین صفحه محصول + خطاها و بازگردانی ها Product Page Exercise + Errors & Rediercts

• انتقال داده از یک صفحه به طرح والد آن Passing Data From a Page to its Parent Layout

• کنترل پاسخ مسیرها و ایجاد نقاط پایانی Controlling Routes' Response and Creating Endpoints

• مدیریت صفحات و نقاط پایانی در یک مسیر و ایجاد نقاط پایانی POST Handling Pages & Endpoints in the Same Route and Creating POST Endpoints

• ورودی های تابع بارگذاری Load Function Inputs

• استفاده از Fetch در SvelteKit Using Fetch in SvelteKit

• [به‌روزرسانی] جریان داده با وعده‌ها [UPDATE] Data Streaming with Promises

• ایجاد صفحه ورود و نقطه پایانی Creating a Login Page and Endpoint

• استفاده از کوکی ها برای ورود و خروج Using Cookies to Login and Logout

• اجرای مجدد همه عملکردهای بارگذاری Re-running All Load Functions

• اجرای مجدد عملکردهای بار خاص Re-running Specific Load Functions

• [به روز رسانی] گرفتن و بازیابی داده ها با عکس های فوری [UPDATE] Capturing & Restoring Data with Snapshots

SvelteKit: قلاب ها، مدیریت خطا، متغیرهای محیطی و ماژول های خصوصی SvelteKit: Hooks, Error Handling, Environment Variables & Private Modules

• قلاب دسته The Handle Hook

• با استفاده از Locals Object Using the Locals Object

• دسته واکشی قلاب The handleFetch Hook

• تعمیر سریع Quick Fix

• رسیدگی به خطاهای مورد انتظار Handling Expected Errors

• رسیدگی به خطاهای غیرمنتظره Handling Unexpected Errors

• استفاده از متغیرهای محیطی Using Environment Variables

• ماژول های فقط سرور Server Only Modules

SvelteKit: قلاب ها، مدیریت خطا، متغیرهای محیطی و ماژول های خصوصی SvelteKit: Hooks, Error Handling, Environment Variables & Private Modules

• قلاب دسته The Handle Hook

• با استفاده از Locals Object Using the Locals Object

• دسته واکشی قلاب The handleFetch Hook

• تعمیر سریع Quick Fix

• رسیدگی به خطاهای مورد انتظار Handling Expected Errors

• رسیدگی به خطاهای غیرمنتظره Handling Unexpected Errors

• استفاده از متغیرهای محیطی Using Environment Variables

• ماژول های فقط سرور Server Only Modules

SvelteKit: پیش بارگیری صفحات و گزینه های پیوند SvelteKit: Preloading Pages & Link Options

• پیش بارگذاری داده های صفحات Preloading Pages' Data

• پیش بارگذاری کد صفحات Preloading Pages' Code

• گزینه‌های پیوند مجدد و بدون پیمایش Reload and No Scroll Link Options

• پیش بارگذاری کد و داده به صورت برنامه ریزی شده Preloading Code and Data Programmatically

SvelteKit: پیش بارگیری صفحات و گزینه های پیوند SvelteKit: Preloading Pages & Link Options

• پیش بارگذاری داده های صفحات Preloading Pages' Data

• پیش بارگذاری کد صفحات Preloading Pages' Code

• گزینه‌های پیوند مجدد و بدون پیمایش Reload and No Scroll Link Options

• پیش بارگذاری کد و داده به صورت برنامه ریزی شده Preloading Code and Data Programmatically

SvelteKit: گزینه های صفحه و پیش رندر SvelteKit: Page Options & Pre-rendering

• گزینه های SSR، CSR و trailingSlash SSR, CSR and trailingSlash Options

• پیش نمایش صفحات و نقاط پایانی Pre-rendering Pages and Endpoints

• پیش نمایش صفحات با محتوای پویا Pre-rendering Pages with Dynamic Content

• پیش نمایش صفحات با پارامترهای پویا Pre-rendering Pages with Dynamic Parameters

• افزودن داده های پویا در یک صفحه از پیش رندر شده Adding Dynamic Data in a Pre-rendered Page

• ماژول $app/environment $app/environment Module

SvelteKit: گزینه های صفحه و پیش رندر SvelteKit: Page Options & Pre-rendering

• گزینه های SSR، CSR و trailingSlash SSR, CSR and trailingSlash Options

• پیش نمایش صفحات و نقاط پایانی Pre-rendering Pages and Endpoints

• پیش نمایش صفحات با محتوای پویا Pre-rendering Pages with Dynamic Content

• پیش نمایش صفحات با پارامترهای پویا Pre-rendering Pages with Dynamic Parameters

• افزودن داده های پویا در یک صفحه از پیش رندر شده Adding Dynamic Data in a Pre-rendered Page

• ماژول $app/environment $app/environment Module

SvelteKit: Form Actions SvelteKit: Form Actions

• اقدامات فرم چیست؟ What are Form Actions?

• یادداشت سریع Quick Note

• ورود به سیستم با استفاده از اکشن فرم Logging In Using a Form Action

• تغییر مسیر در Form Actions Redirecting in Form Actions

• اقدامات فرم نامگذاری شده است Named Form Actions

• تقویت فرم ما با جاوا اسکریپت Enhancing Our Form with JavaScript

• سفارشی کردن اکشن Enhance Customizing the Enhance Action

• [راه حل تمرین] نمایش خطاهای اعتبارسنجی با استفاده از عمل تقویت [Exercise Solution] Showing Validation Errors Using the Enhance Action

• استفاده از فرم ها با متد GET Using Forms with GET Method

SvelteKit: Form Actions SvelteKit: Form Actions

• اقدامات فرم چیست؟ What are Form Actions?

• یادداشت سریع Quick Note

• ورود به سیستم با استفاده از اکشن فرم Logging In Using a Form Action

• تغییر مسیر در Form Actions Redirecting in Form Actions

• اقدامات فرم نامگذاری شده است Named Form Actions

• تقویت فرم ما با جاوا اسکریپت Enhancing Our Form with JavaScript

• سفارشی کردن اکشن Enhance Customizing the Enhance Action

• [راه حل تمرین] نمایش خطاهای اعتبارسنجی با استفاده از عمل تقویت [Exercise Solution] Showing Validation Errors Using the Enhance Action

• استفاده از فرم ها با متد GET Using Forms with GET Method

SvelteKit: استقرار SvelteKit: Deployment

• نمای کلی آداپتورها Adapters Overview

• ساخت و اجرای برنامه ما با آداپتور Node Building & Running Our App with the Node Adapter

• در حال اعزام به هروکو Deploying to Heroku

• در حال استقرار در Vercel Deploying to Vercel

• در حال استقرار در Netlify Deploying to Netlify

SvelteKit: استقرار SvelteKit: Deployment

• نمای کلی آداپتورها Adapters Overview

• ساخت و اجرای برنامه ما با آداپتور Node Building & Running Our App with the Node Adapter

• در حال اعزام به هروکو Deploying to Heroku

• در حال استقرار در Vercel Deploying to Vercel

• در حال استقرار در Netlify Deploying to Netlify

بیایید یک برنامه Spotify با Svelte & SvelteKit ایجاد کنیم Let's Create a Spotify App with Svelte & SvelteKit

• ایجاد یک پروژه SvelteKit جدید و نصب نرمال ساز CSS Creating a New SvelteKit Project And Installing a CSS Normalizer

• راه اندازی SASS Setting Up SASS

• اضافه کردن سبک های جهانی Adding Global Styles

• ایجاد یک برنامه Spotify و افزودن متغیرهای محیطی Creating a Spotify App & Adding Environment Variables

• ایجاد یک درخواست ورود به Spotify Constructing a Spotify Login Request

• ایجاد نقطه پایانی تماس مجدد Spotify Redirect Creating the Spotify Redirect Callback Endpoint

• پر کردن چیدمان ریشه با کاربر وارد شده در Spotify Populating the Root Layout With The Logged in Spotify User

• تازه کردن توکن های دسترسی منقضی شده Refreshing Expired Access Tokens

• خروج از سیستم با استفاده از نقطه پایانی Logging Out Using An Endpoint

• اضافه کردن دارایی ها و نمادها Adding Assets & Icons

• ایجاد کامپوننت دکمه ای Creating a Button Component

• استفاده از Typescript برای گسترش ویژگی های HTML بومی Using Typescript to Extend Native HTML Attributes

• ایجاد و استایل دادن به صفحه ورود Creating & Styling the Login Page

• ایجاد منوی پیمایش دسکتاپ Creating the Desktop Navigation Menu

• حالت دادن به منوی پیمایش دسکتاپ Styling the Desktop Navigation Menu

• ایجاد نوار بالا و متحرک کردن آن در اسکرول Creating the Top Bar & Animating it On Scroll

• ایجاد منوی ناوبری موبایل Creating The Mobile Navigation Menu

• بهبود دسترسی به منو Improving Menu's Accessibility

• پیاده سازی Focus Trap برای منوی ناوبری Implementing Focus Trap for The Navigation Menu

• ایجاد کامپوننت دکمه آیکون Creating An Icon Button Component

• نهایی کردن منوی ناوبری موبایل ما Finalizing Our Mobile Navigation Menu

• ایجاد و استایل کردن دکمه منوی کاربر Creating & Styling the User Menu Button

• ایجاد یک منوی Tippy Svelte Action For Out Profile Creating a Tippy Svelte Action For Out Profile Menu

• اضافه کردن یک تم Tippy و سبک دادن به منوی کاربر Adding a Tippy Theme & Styling The User Menu

• بهبود Tippy با افزودن پلاگین های Tippy Improving Tippy By Adding Tippy Plugins

• برچسب عنوان صفحات، رد شدن از پیوند و نشانگر بارگیری صفحات Pages' Title Tag, Skip Link & Pages' Loading Indicator

• سبک دادن به طرح بندی برای جاوا اسکریپت غیرفعال Styling the Layout for Disabled JavaScript

• واکشی داده ها از Spotify API Fetching Data From the Spotify API

• ایجاد نقطه پایانی برای انتقال تماس‌های Spotify API Creating an Endpoint for Forwarding Spotify API Calls

• واکشی داده های صفحه اصلی Fetching the Home Page Data

• در حین ناوبری سمت سرویس گیرنده، رمز دسترسی را به روز کنید Refreshing the Access Token During Client Side Navigation

• ایجاد نشانه گذاری صفحه اصلی Creating the Home Page Markup

• سبک دادن به صفحه اصلی Styling the Home Page

• ایجاد کامپوننت کارت Creating a Card Component

• ایجاد کامپوننت کارت (ادامه) Creating a Card Component (Cont.)

• ایجاد صفحه آلبوم و بارگیری داده های آلبوم Creating the Album Page & Loading Album Data

• نشانه گذاری مؤلفه آیتم صفحه ItemPage Component Markup

• سبک دادن به مؤلفه صفحه آیتم Styling The ItemPage Component

• دریافت رنگ متوسط ​​یک تصویر Getting The Average Colour of an Image

• استفاده از نقطه پایان رنگ متوسط ​​در صفحه آلبوم Using the Average Colour Endpoint in the Album Page

• نشانه گذاری مؤلفه TrackList The TrackList Component Markup

• یک ظاهر طراحی اجزای TrackList The TrackList Component Styling

• ایجاد کامپوننت پخش کننده صوتی Creating an Audio Player Component

• استفاده از مولفه Player در کامپوننت The TrackList Using the Player Component in The TrackList Component

• مدیریت مؤلفه TrackList هنگامی که JS غیرفعال است Handling the TrackList Component When JS is Disabled

• سفارشی کردن صفحات خطا Customizing Error Pages

• افزودن دکمه تلاش مجدد در صفحه خطا Adding a Retry Button in Error Page

• داده های صفحه لیست پخش Playlist Page Data

• نشانه گذاری و یک ظاهر طراحی صفحه لیست پخش Playlist Page Markup & Styling

• دکمه بارگیری آهنگ های لیست پخش Playlist Tracks Load More Button

• فهرست پخش آهنگ های صفحه بندی برای JS غیر فعال Playlist Tracks Pagination For Disabled JS

• کنش‌های فرم لیست پخش را دنبال و لغو دنبال کنید Follow & Unfollow Playlist Form Actions

• دکمه دنبال کردن و لغو دنبال کردن Follow & Unfollow Button

• وقتی JS فعال است، دنبال کردن و لغو دنبال کردن را تقویت کنید Enhancing Follow & Unfollow When JS is Enabled

• ایجاد یک فروشگاه و کامپوننت Toasts Creating a Toasts Store & Component

• ایجاد فروشگاه و مؤلفه نان تست (ادامه) Creating a Toasts Store & Component (Cont.)

• فهرست‌های پخش نشانه‌گذاری و استایل‌سازی صفحه Playlists Page Markup & Styling

• کامپوننت صفحه بندی قابل استفاده مجدد Reusable Pagination Component

• افزودن یک صفحه ایجاد فهرست پخش و اقدام فرم Adding a Create Playlist Page & Form Action

• انتقال فرم لیست پخش به یک جزء مجزا Moving the Playlist Form to a Separate Component

• ویرایش صفحه لیست پخش و اقدام فرم Edit Playlist Page & Form Action

• ایجاد کامپوننت مدال با Micromodal.js Creating a Modal Component with Micromodal.js

• تقویت فرم افزودن لیست پخش Enhancing the Add Playlist Form

• بهبود فرم ویرایش لیست پخش Enhancing the Edit Playlist Form

• واکشی و نمایش همه لیست های پخش Fetching & Displaying All Playlists

• اضافه کردن آهنگ به دکمه لیست پخش و منوی Tippy Add Track to Playlist Button & Tippy Menu

• اضافه کردن آهنگ به فهرست پخش Form Markup & Styling Add Track to Playlist Form Markup & Styling

• افزودن آهنگ به فرم لیست پخش Add Track to Playlist Form Action

• تقویت فرم افزودن به لیست پخش Enhancing the Add to Playlist Form

• اقدام فرم حذف آهنگ ها از لیست های پخش Removing Tracks From Playlists Form Action

• بهبود حذف آهنگ ها از فرم لیست های پخش Enhancing Removing Tracks From Playlists Form

• مدیریت افزودن به فهرست پخش استایل فرم برای JS غیر فعال Handling Add to Playlist Form Styling for Disabled JS

• ایجاد صفحه نمایه Creating The Profile Page

• ایجاد صفحه نمایه (ادامه) Creating The profile Page (Cont.)

• [تمرین] صفحه هنرمند [Exercise] The Artist Page

• صفحه اصلی جستجو The Search Home Page

• جزء فرم جستجو The Search Form Component

• صفحه نتایج جستجو The Search Results Page

• موارد فهرست تابع بارگذاری مسیر Listing Items Route Load Function

• موارد فهرست تابع بارگذاری مسیر (ادامه) Listing Items Route Load Function (Cont.)

• نشانه گذاری صفحه آیتم های فهرست شده Listing Items Page Markup

• کد اضافی Extra Code

بیایید یک برنامه Spotify با Svelte & SvelteKit ایجاد کنیم Let's Create a Spotify App with Svelte & SvelteKit

• ایجاد یک پروژه SvelteKit جدید و نصب نرمال ساز CSS Creating a New SvelteKit Project And Installing a CSS Normalizer

• راه اندازی SASS Setting Up SASS

• اضافه کردن سبک های جهانی Adding Global Styles

• ایجاد یک برنامه Spotify و افزودن متغیرهای محیطی Creating a Spotify App & Adding Environment Variables

• ایجاد یک درخواست ورود به Spotify Constructing a Spotify Login Request

• ایجاد نقطه پایانی تماس مجدد Spotify Redirect Creating the Spotify Redirect Callback Endpoint

• پر کردن چیدمان ریشه با کاربر وارد شده در Spotify Populating the Root Layout With The Logged in Spotify User

• تازه کردن توکن های دسترسی منقضی شده Refreshing Expired Access Tokens

• خروج از سیستم با استفاده از نقطه پایانی Logging Out Using An Endpoint

• اضافه کردن دارایی ها و نمادها Adding Assets & Icons

• ایجاد کامپوننت دکمه ای Creating a Button Component

• استفاده از Typescript برای گسترش ویژگی های HTML بومی Using Typescript to Extend Native HTML Attributes

• ایجاد و استایل دادن به صفحه ورود Creating & Styling the Login Page

• ایجاد منوی پیمایش دسکتاپ Creating the Desktop Navigation Menu

• حالت دادن به منوی پیمایش دسکتاپ Styling the Desktop Navigation Menu

• ایجاد نوار بالا و متحرک کردن آن در اسکرول Creating the Top Bar & Animating it On Scroll

• ایجاد منوی ناوبری موبایل Creating The Mobile Navigation Menu

• بهبود دسترسی به منو Improving Menu's Accessibility

• پیاده سازی Focus Trap برای منوی ناوبری Implementing Focus Trap for The Navigation Menu

• ایجاد کامپوننت دکمه آیکون Creating An Icon Button Component

• نهایی کردن منوی ناوبری موبایل ما Finalizing Our Mobile Navigation Menu

• ایجاد و استایل کردن دکمه منوی کاربر Creating & Styling the User Menu Button

• ایجاد یک منوی Tippy Svelte Action For Out Profile Creating a Tippy Svelte Action For Out Profile Menu

• اضافه کردن یک تم Tippy و سبک دادن به منوی کاربر Adding a Tippy Theme & Styling The User Menu

• بهبود Tippy با افزودن پلاگین های Tippy Improving Tippy By Adding Tippy Plugins

• برچسب عنوان صفحات، رد شدن از پیوند و نشانگر بارگیری صفحات Pages' Title Tag, Skip Link & Pages' Loading Indicator

• سبک دادن به طرح بندی برای جاوا اسکریپت غیرفعال Styling the Layout for Disabled JavaScript

• واکشی داده ها از Spotify API Fetching Data From the Spotify API

• ایجاد نقطه پایانی برای انتقال تماس‌های Spotify API Creating an Endpoint for Forwarding Spotify API Calls

• واکشی داده های صفحه اصلی Fetching the Home Page Data

• در حین ناوبری سمت سرویس گیرنده، رمز دسترسی را به روز کنید Refreshing the Access Token During Client Side Navigation

• ایجاد نشانه گذاری صفحه اصلی Creating the Home Page Markup

• سبک دادن به صفحه اصلی Styling the Home Page

• ایجاد کامپوننت کارت Creating a Card Component

• ایجاد کامپوننت کارت (ادامه) Creating a Card Component (Cont.)

• ایجاد صفحه آلبوم و بارگیری داده های آلبوم Creating the Album Page & Loading Album Data

• نشانه گذاری مؤلفه آیتم صفحه ItemPage Component Markup

• سبک دادن به مؤلفه صفحه آیتم Styling The ItemPage Component

• دریافت رنگ متوسط ​​یک تصویر Getting The Average Colour of an Image

• استفاده از نقطه پایان رنگ متوسط ​​در صفحه آلبوم Using the Average Colour Endpoint in the Album Page

• نشانه گذاری مؤلفه TrackList The TrackList Component Markup

• یک ظاهر طراحی اجزای TrackList The TrackList Component Styling

• ایجاد کامپوننت پخش کننده صوتی Creating an Audio Player Component

• استفاده از مولفه Player در کامپوننت The TrackList Using the Player Component in The TrackList Component

• مدیریت مؤلفه TrackList هنگامی که JS غیرفعال است Handling the TrackList Component When JS is Disabled

• سفارشی کردن صفحات خطا Customizing Error Pages

• افزودن دکمه تلاش مجدد در صفحه خطا Adding a Retry Button in Error Page

• داده های صفحه لیست پخش Playlist Page Data

• نشانه گذاری و یک ظاهر طراحی صفحه لیست پخش Playlist Page Markup & Styling

• دکمه بارگیری آهنگ های لیست پخش Playlist Tracks Load More Button

• فهرست پخش آهنگ های صفحه بندی برای JS غیر فعال Playlist Tracks Pagination For Disabled JS

• کنش‌های فرم لیست پخش را دنبال و لغو دنبال کنید Follow & Unfollow Playlist Form Actions

• دکمه دنبال کردن و لغو دنبال کردن Follow & Unfollow Button

• وقتی JS فعال است، دنبال کردن و لغو دنبال کردن را تقویت کنید Enhancing Follow & Unfollow When JS is Enabled

• ایجاد یک فروشگاه و کامپوننت Toasts Creating a Toasts Store & Component

• ایجاد فروشگاه و مؤلفه نان تست (ادامه) Creating a Toasts Store & Component (Cont.)

• فهرست‌های پخش نشانه‌گذاری و استایل‌سازی صفحه Playlists Page Markup & Styling

• کامپوننت صفحه بندی قابل استفاده مجدد Reusable Pagination Component

• افزودن یک صفحه ایجاد فهرست پخش و اقدام فرم Adding a Create Playlist Page & Form Action

• انتقال فرم لیست پخش به یک جزء مجزا Moving the Playlist Form to a Separate Component

• ویرایش صفحه لیست پخش و اقدام فرم Edit Playlist Page & Form Action

• ایجاد کامپوننت مدال با Micromodal.js Creating a Modal Component with Micromodal.js

• تقویت فرم افزودن لیست پخش Enhancing the Add Playlist Form

• بهبود فرم ویرایش لیست پخش Enhancing the Edit Playlist Form

• واکشی و نمایش همه لیست های پخش Fetching & Displaying All Playlists

• اضافه کردن آهنگ به دکمه لیست پخش و منوی Tippy Add Track to Playlist Button & Tippy Menu

• اضافه کردن آهنگ به فهرست پخش Form Markup & Styling Add Track to Playlist Form Markup & Styling

• افزودن آهنگ به فرم لیست پخش Add Track to Playlist Form Action

• تقویت فرم افزودن به لیست پخش Enhancing the Add to Playlist Form

• اقدام فرم حذف آهنگ ها از لیست های پخش Removing Tracks From Playlists Form Action

• بهبود حذف آهنگ ها از فرم لیست های پخش Enhancing Removing Tracks From Playlists Form

• مدیریت افزودن به فهرست پخش استایل فرم برای JS غیر فعال Handling Add to Playlist Form Styling for Disabled JS

• ایجاد صفحه نمایه Creating The Profile Page

• ایجاد صفحه نمایه (ادامه) Creating The profile Page (Cont.)

• [تمرین] صفحه هنرمند [Exercise] The Artist Page

• صفحه اصلی جستجو The Search Home Page

• جزء فرم جستجو The Search Form Component

• صفحه نتایج جستجو The Search Results Page

• موارد فهرست تابع بارگذاری مسیر Listing Items Route Load Function

• موارد فهرست تابع بارگذاری مسیر (ادامه) Listing Items Route Load Function (Cont.)

• نشانه گذاری صفحه آیتم های فهرست شده Listing Items Page Markup

• کد اضافی Extra Code