آموزش وب کامپوننت‌ها: راهنمای جامع از صفر تا صد (Zero to Hero) - آخرین آپدیت

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

سلام و خوش‌آمدگویی! Hello & Welcome Aboard!

• ساختار دوره Course Structure

• قبل از شروع بخوانید! READ BEFORE YOU START!

مقدمه‌ای بر وب کامپوننت‌ها Intro to Web Components

• حقایق تاریخی. آیا می‌دانستید؟ Historical Facts. Did you know?

• وب کامپوننت‌ها چیستند؟ What are Web Components?

• ساختار وب کامپوننت‌ها Web Components Structure

• کامپوننت‌ها در فریم‌ورک‌های UI Components in UI Frameworks

• نام‌گذاری فایل‌ها و ساختار پروژه File Naming & Project Structures

• راه‌اندازی پروژه: Vite + Yarn Setup Project: Vite + Yarn

• وقت کوییز است! Hey! Quiz Time

• تمرین و بررسی (راه‌اندازی اولیه) Practice & Checkpoint (Initial Setup)

غوص در Shadow DOM Diving into Shadow DOM

• کالبدشناسی Shadow DOM Shadow DOM Anatomy

• Shadow DOM دستوری (ISD) Imperative Shadow DOM (ISD)

• Shadow DOM اعلامی (DSD) Declarative Shadow DOM (DSD)

• حالت‌های Open و Closed Open & Closed Modes

• وقت کوییز است! Hey! Quiz Time

• استایل‌دهی در Shadow DOM Styling in Shadow DOM

• قابلیت‌های فوق‌العاده Shadow DOM Shadow DOM Superpowers

• بخش‌های CSS Shadow | ExportParts CSS Shadow Parts | ExportParts

• پراپ‌ها و متدهای داخلی Built-In Props & Methods

• وقت کوییز است! Hey! Quiz Time!

• تمرین و بررسی (Shadow DOM) Practice & Checkpoint (Shadow DOM)

درباره عناصر سفارشی (Custom Elements) About Custom Elements

• کالبدشناسی عناصر Elements Anatomy

• چرخه حیات: مراحل و ثبت Lifecycle: Phases & Registration

• چرخه حیات: کال‌بک‌ها | واکنش‌ها Lifecycle: Callbacks | Reactions

• آیا عنصر متصل شده است؟ Is Element connected?

• انواع: داخلی (Built-in) در مقابل خودمختار (Autonomous) Types: Built-In VS Autonomous

• قراردادهای نام‌گذاری Naming Conventions

• وقت کوییز است! Hey! Quiz Time!

• ویژگی‌ها و پراپ‌ها: بخش اول Attributes & Properties: Part 1

• ویژگی‌ها و پراپ‌ها: بخش دوم Attributes & Properties: Part 2

• خروجی: رویدادهای سفارشی (Custom Events) Output: Custom Events

• اتصال داده دوطرفه (Two Way Data Binding) Two-Way Data Binding

• وراثت و ترکیب (Inheritance & Composition) Inheritance & Composition

• استایل‌دهی عناصر سفارشی Styling Custom Elements

• وقت کوییز است! Hey! Quiz Time!

• تمرین و بررسی (Custom Elements) Practice & Checkpoint (Custom Elements)

تسلط بر قالب‌های HTML Mastering HTML Templates

• مروری بر قالب‌ها (Templates) Templates Overview

• استایل‌دهی قالب‌ها Templates Styling

• Document Fragments Document Fragments

• تشخیص تغییرات (Change Detection) Change Detection

• وقت کوییز است! Hey! Quiz Time!

• تمرین و بررسی (قالب‌های HTML) Practice & Checkpoint (HTML Templates)

دنیای اسلات‌ها (Slots) World Around Slots

• پروجکشن محتوا (Content Projection) Content Projection

• مقدمه‌ای بر اسلات‌ها (Slots) Intro to Slots

• انواع اسلات‌ها Types of Slots

• رویداد تغییر اسلات (Slot Change Event) Slot Change Event

• وقت کوییز است! Hey! Quiz Time!

• استایل‌دهی محتوای اسلات شده Styling Slotted Content

• تخصیص اسلات‌ها Slot Assignments

• اسلات‌های چندسطحی Multi-Level Slots

• وقت کوییز است! Hey! Quiz Time!

• تمرین و بررسی (اسلات‌ها) Practice & Checkpoint (Slots)

عناصر مرتبط با فرم Form-Associated Elements

• مقدمه‌ای بر Element Internals API Intro to Element Internals API

• مدیریت مقادیر فرم Managing Form Values

• حالت‌های سفارشی فرم Form Custom States

• استایل‌دهی فرم‌ها | حالت‌ها Styling Forms | States

• ارتباط برچسب‌های فرم (Labels) Form Labels Association

• واکنش‌های چرخه حیات فرم Form Lifecycle Reactions

• اعتبارسنجی فرم: بخش اول Form Validation: Part 1

• اعتبارسنجی فرم: بخش دوم Form Validation: Part 2

• دسترسی‌پذیری فرم‌ها Form Accessibility

• وقت کوییز است! Hey! Quiz Time!

• تمرین و چک‌لیست (فرم‌ها) Practice & Checklist (Forms)

وب کامپوننت‌های پیشرفته Advanced Web Components

• راه‌اندازی پروژه: Vite + Yarn + TS Setup Project: Vite + Yarn + TS

• استفاده از TypeScript: مبانی Using TypeScript: Basics

• استفاده از TypeScript: پیشرفته Using TypeScript: Advanced

• تمرین خانگی ۱: تایپ‌اسکریپت Home Task 1: Typescript

• قدرت‌بخشی با Storybooks Empower Storybooks

• ابزارهای پیشرفته CSS: بخش اول Advanced CSS Tools: Part 1

• ابزارهای پیشرفته CSS: بخش دوم Advanced CSS Tools: Part 2

• بومی‌سازی و i18n Localization & i18n

• تست‌های واحد (Unit Testing) Unit Testing

• مونو‌ریپوها (Monorepos): بخش اول Monorepos: Part 1

• مونو‌ریپوها (Monorepos): بخش دوم Monorepos: Part 2

• میکرو فرانت‌اندها: معرفی Micro-Frontends: About

• میکرو فرانت‌اندها: کاربرد Micro-Frontends: Usage

• تمرین خانگی ۲: میکرو فرانت‌اند Home Task 2: Micro-Frontend

• انتشار UI Kits در NPM و GitHub Publish UI Kits: NPM & GitHub

• پالی‌فیل‌ها (Polyfills): چرا، چه زمانی و چگونه Polyfills: Why, When, How

سخن نهایی. گام بعدی چیست؟ Final Words. What's next?

• تبریکات! Congratulations!

• در شبکه‌های اجتماعی به من بپیوندید! Join me on Social Media!