آموزش اجزای وب و Stencil.js - ساخت عناصر HTML سفارشی

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

معرفی Introduction

• معرفی Introduction

• اجزای وب - نسخه ی نمایشی سریع Web Components - A Quick Demo

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

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• چرا از کامپوننت های وب استفاده می کنیم؟ Why Do We Use Web Components?

• مقایسه اجزای وب و چارچوب ها Comparing Web Components & Frameworks

• طرح کلی دوره Course Outline

• چگونه از دوره بیشترین بهره را ببریم How To Get The Most Out Of The Course

معرفی Introduction

• معرفی Introduction

• اجزای وب - نسخه ی نمایشی سریع Web Components - A Quick Demo

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

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• چرا از کامپوننت های وب استفاده می کنیم؟ Why Do We Use Web Components?

• مقایسه اجزای وب و چارچوب ها Comparing Web Components & Frameworks

• طرح کلی دوره Course Outline

• چگونه از دوره بیشترین بهره را ببریم How To Get The Most Out Of The Course

بازخوانی جاوا اسکریپت نسل بعدی (اختیاری) Refreshing Next Generation JavaScript (Optional)

• معرفی ماژول Module Introduction

• درک "لذا" و "تقویت" Understanding "let" and "const"

• کار با توابع پیکان Working with Arrow Functions

• صادرات و واردات Exports and Imports

• درک کلاس ها Understanding Classes

• کلاس ها، ویژگی ها و روش ها Classes, Properties and Methods

• اپراتور Spread & Rest The Spread & Rest Operator

• تازه کردن توابع آرایه Refreshing Array Functions

• آشنایی با کد Async Understanding Async Code

• جاوا اسکریپت نسل بعدی - خلاصه Next-Gen JavaScript - Summary

• توابع آرایه JS JS Array Functions

بازخوانی جاوا اسکریپت نسل بعدی (اختیاری) Refreshing Next Generation JavaScript (Optional)

• معرفی ماژول Module Introduction

• درک "لذا" و "تقویت" Understanding "let" and "const"

• کار با توابع پیکان Working with Arrow Functions

• صادرات و واردات Exports and Imports

• درک کلاس ها Understanding Classes

• کلاس ها، ویژگی ها و روش ها Classes, Properties and Methods

• اپراتور Spread & Rest The Spread & Rest Operator

• تازه کردن توابع آرایه Refreshing Array Functions

• آشنایی با کد Async Understanding Async Code

• جاوا اسکریپت نسل بعدی - خلاصه Next-Gen JavaScript - Summary

• توابع آرایه JS JS Array Functions

درک اصول Understanding the Basics

• معرفی ماژول - اجزای وب چیست؟ Module Introduction - What are Web Components?

• پشتیبانی مرورگر Browser Support

• راه اندازی توسعه ما Our Development Setup

• ایجاد اولین عنصر سفارشی ما Creating our First Custom Element

• تعامل با DOM اطراف Interacting with the Surrounding DOM

• درک چرخه عمر عناصر سفارشی Understanding the Custom Elements Lifecycle

• استفاده از "connectedcallback" برای دسترسی DOM Using "connectedcallback" for DOM Access

• گوش دادن به رویدادهای داخل کامپوننت Listening to Events Inside the Component

• استفاده از ویژگی ها در عناصر سفارشی Using Attributes on Custom Elements

• "ویژگی ها" در مقابل "ویژگی ها" "Attributes" vs "Properties"

• سبک دادن به عناصر ما Styling our Elements

• با استفاده از Shadow DOM Using the Shadow DOM

• اضافه کردن یک قالب HTML Adding an HTML Template

• استفاده از اسلات ها Using Slots

• تعریف قالب در جاوا اسکریپت Defining the Template in JavaScript

• استفاده از تگ های سبک در Shadow DOM Using Style Tags in the Shadow DOM

• گسترش عناصر داخلی Extending Built-In Elements

• زمان برای تمرین - مبانی Time to Practice - The Basics

• اشکال زدایی Debugging

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

درک اصول Understanding the Basics

• معرفی ماژول - اجزای وب چیست؟ Module Introduction - What are Web Components?

• پشتیبانی مرورگر Browser Support

• راه اندازی توسعه ما Our Development Setup

• ایجاد اولین عنصر سفارشی ما Creating our First Custom Element

• تعامل با DOM اطراف Interacting with the Surrounding DOM

• درک چرخه عمر عناصر سفارشی Understanding the Custom Elements Lifecycle

• استفاده از "connectedcallback" برای دسترسی DOM Using "connectedcallback" for DOM Access

• گوش دادن به رویدادهای داخل کامپوننت Listening to Events Inside the Component

• استفاده از ویژگی ها در عناصر سفارشی Using Attributes on Custom Elements

• "ویژگی ها" در مقابل "ویژگی ها" "Attributes" vs "Properties"

• سبک دادن به عناصر ما Styling our Elements

• با استفاده از Shadow DOM Using the Shadow DOM

• اضافه کردن یک قالب HTML Adding an HTML Template

• استفاده از اسلات ها Using Slots

• تعریف قالب در جاوا اسکریپت Defining the Template in JavaScript

• استفاده از تگ های سبک در Shadow DOM Using Style Tags in the Shadow DOM

• گسترش عناصر داخلی Extending Built-In Elements

• زمان برای تمرین - مبانی Time to Practice - The Basics

• اشکال زدایی Debugging

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

غواصی عمیق تر در اجزای وب Diving Deeper Into Web Components

• معرفی ماژول Module Introduction

• درک Shadow DOM Projection Understanding Shadow DOM Projection

• حالت دادن به محتوای «اسلات» خارج از Shadow DOM Styling "slot" Content Outside of the Shadow DOM

• حالت دادن به محتوای "اسلات" در داخل Shadow DOM Styling "slot" Content Inside the Shadow DOM

• سبک دادن به مؤلفه میزبان Styling the Host Component

• اجزای یک ظاهر طراحی شده از خارج Styling Components from Outside

• یک ظاهر طراحی میزبان شرطی Conditional Host Styling

• طراحی با در نظر گرفتن محتوای میزبان Styling with the Host Content in Mind

• استایل پویا هوشمند با متغیرهای CSS Smart Dynamic Styling with CSS Variables

• تمیز کردن استایل کلی ما Cleaning Up Our Overall Styling

• مشاهده تغییرات صفت Observing Attribute Changes

• تنظیم رفتار مؤلفه بر اساس تغییرات ویژگی Adjusting the Component Behaviour Upon Attribute Changes

• با استفاده از "دیگر تماس قطع شده" Using "disconnectedcallback"

• اضافه کردن یک روش رندر Adding a Render Method

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

غواصی عمیق تر در اجزای وب Diving Deeper Into Web Components

• معرفی ماژول Module Introduction

• درک Shadow DOM Projection Understanding Shadow DOM Projection

• حالت دادن به محتوای «اسلات» خارج از Shadow DOM Styling "slot" Content Outside of the Shadow DOM

• حالت دادن به محتوای "اسلات" در داخل Shadow DOM Styling "slot" Content Inside the Shadow DOM

• سبک دادن به مؤلفه میزبان Styling the Host Component

• اجزای یک ظاهر طراحی شده از خارج Styling Components from Outside

• یک ظاهر طراحی میزبان شرطی Conditional Host Styling

• طراحی با در نظر گرفتن محتوای میزبان Styling with the Host Content in Mind

• استایل پویا هوشمند با متغیرهای CSS Smart Dynamic Styling with CSS Variables

• تمیز کردن استایل کلی ما Cleaning Up Our Overall Styling

• مشاهده تغییرات صفت Observing Attribute Changes

• تنظیم رفتار مؤلفه بر اساس تغییرات ویژگی Adjusting the Component Behaviour Upon Attribute Changes

• با استفاده از "دیگر تماس قطع شده" Using "disconnectedcallback"

• اضافه کردن یک روش رندر Adding a Render Method

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

ساخت اجزای پیچیده تر Building More Complex Components

• معرفی ماژول Module Introduction

• ایجاد مؤلفه مدال Basics Creating the Basics Modal Component

• افزودن ظرف مدال Adding the Modal Container

• سبک دادن به عناصر مدال Styling the Modal Elements

• اضافه کردن برخی منطق برنامه های عمومی Adding Some General App Logic

• باز کردن Modal از طریق CSS Opening the Modal via CSS

• روش‌ها و ویژگی‌های عمومی Public Methods & Properties

• درک اسلات های نامگذاری شده Understanding Named Slots

• "تغییر شکاف" و دسترسی به محتوای اسلات "slotchange" & Getting Access to Slot Content

• بستن Modal با دکمه های Modal Closing the Modal with Modal Buttons

• ارسال رویدادهای سفارشی Dispatching Custom Events

• پیکربندی رویدادهای سفارشی Configuring Custom Events

• افزودن پیشرفت‌ها و انیمیشن‌های مدال Adding Enhancements & Modal Animations

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

ساخت اجزای پیچیده تر Building More Complex Components

• معرفی ماژول Module Introduction

• ایجاد مؤلفه مدال Basics Creating the Basics Modal Component

• افزودن ظرف مدال Adding the Modal Container

• سبک دادن به عناصر مدال Styling the Modal Elements

• اضافه کردن برخی منطق برنامه های عمومی Adding Some General App Logic

• باز کردن Modal از طریق CSS Opening the Modal via CSS

• روش‌ها و ویژگی‌های عمومی Public Methods & Properties

• درک اسلات های نامگذاری شده Understanding Named Slots

• "تغییر شکاف" و دسترسی به محتوای اسلات "slotchange" & Getting Access to Slot Content

• بستن Modal با دکمه های Modal Closing the Modal with Modal Buttons

• ارسال رویدادهای سفارشی Dispatching Custom Events

• پیکربندی رویدادهای سفارشی Configuring Custom Events

• افزودن پیشرفت‌ها و انیمیشن‌های مدال Adding Enhancements & Modal Animations

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

استنسیل - مقدمه Stencil - An Introduction

• معرفی ماژول Module Introduction

• استفاده از اجزای وب در مرورگرهای مدرن Using Web Components in Modern Browsers

• پشتیبانی مرورگر برای اجزای وب Browser Support for Web Components

• استفاده از اجزای وب در همه مرورگرها Using Web Components in All Browsers

• ایجاد یک پروژه استنسیل Creating a Stencil Project

• استنسیل چیست؟ What is Stencil?

• Stencil.js در پشت صحنه Stencil.js behind the Scenes

• غواصی در اولین جزء شابلون Diving Into a First Stencil Component

• بسته شدن Wrap Up

استنسیل - مقدمه Stencil - An Introduction

• معرفی ماژول Module Introduction

• استفاده از اجزای وب در مرورگرهای مدرن Using Web Components in Modern Browsers

• پشتیبانی مرورگر برای اجزای وب Browser Support for Web Components

• استفاده از اجزای وب در همه مرورگرها Using Web Components in All Browsers

• ایجاد یک پروژه استنسیل Creating a Stencil Project

• استنسیل چیست؟ What is Stencil?

• Stencil.js در پشت صحنه Stencil.js behind the Scenes

• غواصی در اولین جزء شابلون Diving Into a First Stencil Component

• بسته شدن Wrap Up

استنسیل - غواصی در اصول Stencil - Diving Into the Basics

• معرفی ماژول Module Introduction

• با استفاده از سرور توسعه Using the Development Server

• باید بخوانید: اطمینان از واردات صحیح MUST READ: Ensuring Correct Imports

• ایجاد یک کامپوننت وب استنسیل جدید Creating a New Stencil Web Component

• سبک دادن به یک جزء شابلون Styling a Stencil Component

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

• مهم: انعکاس لوازم جانبی به ویژگی ها Important: Reflect Props to Attributes

• پیکربندی Props Configuring Props

• استفاده از Slots & Styling Using Slots & Styling

• ارائه محتوای مشروط Rendering Conditional Content

• استفاده از ویژگی‌ها فقط برای استایل‌سازی Using Attributes for Styling only

• استفاده از Props در ترکیب با ویژگی ها Using Props in Combination with Attributes

• درک لوازم قابل تغییر Understanding Mutable Props

• آماده سازی برگه ها Preparing Tabs

• افزودن شنوندگان رویداد بیشتر Adding More Event Listeners

• با استفاده از حالت Using State

• افزودن متدها به کامپوننت ها Adding Methods to Components

• افزودن پس زمینه Adding a Backdrop

• زمان تمرین - استنسیل Time to Practice - Stencil

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

استنسیل - غواصی در اصول Stencil - Diving Into the Basics

• معرفی ماژول Module Introduction

• با استفاده از سرور توسعه Using the Development Server

• باید بخوانید: اطمینان از واردات صحیح MUST READ: Ensuring Correct Imports

• ایجاد یک کامپوننت وب استنسیل جدید Creating a New Stencil Web Component

• سبک دادن به یک جزء شابلون Styling a Stencil Component

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

• مهم: انعکاس لوازم جانبی به ویژگی ها Important: Reflect Props to Attributes

• پیکربندی Props Configuring Props

• استفاده از Slots & Styling Using Slots & Styling

• ارائه محتوای مشروط Rendering Conditional Content

• استفاده از ویژگی‌ها فقط برای استایل‌سازی Using Attributes for Styling only

• استفاده از Props در ترکیب با ویژگی ها Using Props in Combination with Attributes

• درک لوازم قابل تغییر Understanding Mutable Props

• آماده سازی برگه ها Preparing Tabs

• افزودن شنوندگان رویداد بیشتر Adding More Event Listeners

• با استفاده از حالت Using State

• افزودن متدها به کامپوننت ها Adding Methods to Components

• افزودن پس زمینه Adding a Backdrop

• زمان تمرین - استنسیل Time to Practice - Stencil

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

شابلون پیشرفته Advanced Stencil

• معرفی ماژول Module Introdution

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

• کامپوننت و آماده سازی API Component & API Preparations

• ارسال فرم ها Submitting Forms

• سبک دادن به کامپوننت Styling the Component

• درخواست های HTTP در کامپوننت ها HTTP Requests in Components

• با استفاده از کلید API Using the API Key

• دسترسی به عنصر میزبان Accessing the Host Element

• استفاده از مراجع Using References

• دو طرفه صحافی و اعتبار سنجی ورودی Two Way Binding & Input Validation

• رسیدگی به خطا Error Handling

• با استفاده از "componentdidload" Lifecycle Hook Using the "componentdidload" Lifecycle Hook

• تمام قلاب های چرخه حیات All Lifecycle Hooks

• استفاده از به روز رسانی قلاب چرخه حیات Using Update Lifecycle Hooks

• تماشای تغییرات Prop Watching Prop Changes

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

• سبک دادن به کامپوننت جدید Styling the New Component

• خروجی لیستی از عناصر Outputting a List of Elements

• سبک دادن به موارد فهرست Styling the List Items

• انتشار رویدادهای گمرکی Emitting Customs Events

• مهم: دکوراتور گوش کن Important: The Listen Decorator

• با استفاده از Listen Decorator Using the Listen Decorator

• با استفاده از Hostdata Using Hostdata

• اضافه کردن یک اسپینر بارگیری Adding a Loading Spinner

• جاسازی کامپوننت ها در کامپوننت ها Embedding Components Into Components

• استفاده از ویژگی های CSS Using CSS Properties

• استفاده از Stencil.js برای ساختن کل برنامه ها Using Stencil.js to Build Entire Apps

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

شابلون پیشرفته Advanced Stencil

• معرفی ماژول Module Introdution

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

• کامپوننت و آماده سازی API Component & API Preparations

• ارسال فرم ها Submitting Forms

• سبک دادن به کامپوننت Styling the Component

• درخواست های HTTP در کامپوننت ها HTTP Requests in Components

• با استفاده از کلید API Using the API Key

• دسترسی به عنصر میزبان Accessing the Host Element

• استفاده از مراجع Using References

• دو طرفه صحافی و اعتبار سنجی ورودی Two Way Binding & Input Validation

• رسیدگی به خطا Error Handling

• با استفاده از "componentdidload" Lifecycle Hook Using the "componentdidload" Lifecycle Hook

• تمام قلاب های چرخه حیات All Lifecycle Hooks

• استفاده از به روز رسانی قلاب چرخه حیات Using Update Lifecycle Hooks

• تماشای تغییرات Prop Watching Prop Changes

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

• سبک دادن به کامپوننت جدید Styling the New Component

• خروجی لیستی از عناصر Outputting a List of Elements

• سبک دادن به موارد فهرست Styling the List Items

• انتشار رویدادهای گمرکی Emitting Customs Events

• مهم: دکوراتور گوش کن Important: The Listen Decorator

• با استفاده از Listen Decorator Using the Listen Decorator

• با استفاده از Hostdata Using Hostdata

• اضافه کردن یک اسپینر بارگیری Adding a Loading Spinner

• جاسازی کامپوننت ها در کامپوننت ها Embedding Components Into Components

• استفاده از ویژگی های CSS Using CSS Properties

• استفاده از Stencil.js برای ساختن کل برنامه ها Using Stencil.js to Build Entire Apps

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

استقرار و انتشار Deployment & Publishing

• معرفی ماژول Module Introduction

• با استفاده از Stencil Config Using Stencil Config

• ساخت و استفاده از کامپوننت ها Building & Using the Components

• استفاده از کامپوننت های وب در پروژه Node.js Using Web Components in a Node.js Project

• انتشار به NPM Publishing to NPM

• نصب بسته های NPM Installing NPM Packages

• استفاده از کامپوننت های وب در یک برنامه زاویه ای Using Web Components in an Angular App

• استفاده از Web Components در برنامه React Using Web Components in a React App

• استفاده از اجزای وب در برنامه Vue Using Web Components in a Vue App

• Polyfills و اینترنت اکسپلورر Polyfills & The Internet Explorer

• IE & Polyfills IE & Polyfills

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

استقرار و انتشار Deployment & Publishing

• معرفی ماژول Module Introduction

• با استفاده از Stencil Config Using Stencil Config

• ساخت و استفاده از کامپوننت ها Building & Using the Components

• استفاده از کامپوننت های وب در پروژه Node.js Using Web Components in a Node.js Project

• انتشار به NPM Publishing to NPM

• نصب بسته های NPM Installing NPM Packages

• استفاده از کامپوننت های وب در یک برنامه زاویه ای Using Web Components in an Angular App

• استفاده از Web Components در برنامه React Using Web Components in a React App

• استفاده از اجزای وب در برنامه Vue Using Web Components in a Vue App

• Polyfills و اینترنت اکسپلورر Polyfills & The Internet Explorer

• IE & Polyfills IE & Polyfills

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

جمع بندی Roundup

• خلاصه دوره Course Roundup

• منابع و لینک های مفید Useful Resources & Links

• امتیاز: محتوای بیشتر! Bonus: More Content!

جمع بندی Roundup

• خلاصه دوره Course Roundup

• منابع و لینک های مفید Useful Resources & Links

• امتیاز: محتوای بیشتر! Bonus: More Content!