Веб-компоненты и Stencil.js - Создание кастомных элементов HTML - Видеоуроки

Web Components & Stencil.js - Build Custom HTML Elements
Duration 08:19:40
Открыть все курсы от udemy

Web Components & Stencil.js - Build Custom HTML Elements - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Introduction 00:01:39
  • Урок 2. Web Components - A Quick Demo 00:06:31
  • Урок 3. What are Web Components 00:03:23
  • Урок 4. Why Do We Use Web Components? 00:03:06
  • Урок 5. Comparing Web Components & Frameworks 00:06:16
  • Урок 6. Course Outline 00:02:47
  • Урок 7. How To Get The Most Out Of The Course 00:03:05
  • Урок 8. Module Introduction 00:01:13
  • Урок 9. Understanding "let" and "const" 00:03:06
  • Урок 10. Working with Arrow Functions 00:05:28
  • Урок 11. Exports and Imports 00:04:44
  • Урок 12. Understanding Classes 00:04:31
  • Урок 13. Classes, Properties and Methods 00:03:04
  • Урок 14. The Spread & Rest Operator 00:06:28
  • Урок 15. Refreshing Array Functions 00:02:33
  • Урок 16. Understanding Async Code 00:01:05
  • Урок 17. Module Introduction - What are Web Components? 00:05:08
  • Урок 18. Browser Support 00:03:06
  • Урок 19. Our Development Setup 00:04:39
  • Урок 20. Creating our First Custom Element 00:08:30
  • Урок 21. Interacting with the Surrounding DOM 00:05:05
  • Урок 22. Understanding the Custom Elements Lifecycle 00:02:52
  • Урок 23. Using "connectedcallback" for DOM Access 00:02:06
  • Урок 24. Listening to Events Inside the Component 00:08:53
  • Урок 25. Using Attributes on Custom Elements 00:04:46
  • Урок 26. Styling our Elements 00:04:09
  • Урок 27. Using the Shadow DOM 00:05:01
  • Урок 28. Adding an HTML Template 00:05:41
  • Урок 29. Using Slots 00:01:51
  • Урок 30. Defining the Template in JavaScript 00:03:30
  • Урок 31. Using Style Tags in the Shadow DOM 00:02:41
  • Урок 32. Extending Built-In Elements 00:07:34
  • Урок 33. Wrap Up 00:02:31
  • Урок 34. Module Introduction 00:00:52
  • Урок 35. Understanding Shadow DOM Projection 00:02:27
  • Урок 36. Styling "slot" Content Outside of the Shadow DOM 00:03:45
  • Урок 37. Styling "slot" Content Inside the Shadow DOM 00:03:11
  • Урок 38. Styling the Host Component 00:04:43
  • Урок 39. Conditional Host Styling 00:02:50
  • Урок 40. Styling with the Host Content in Mind 00:02:28
  • Урок 41. Smart Dynamic Styling with CSS Variables 00:06:21
  • Урок 42. Cleaning Up Our Overall Styling 00:03:23
  • Урок 43. Observing Attribute Changes 00:06:18
  • Урок 44. Adjusting the Component Behaviour Upon Attribute Changes 00:02:35
  • Урок 45. Using "disconnectedcallback" 00:04:41
  • Урок 46. Adding a Render Method 00:06:14
  • Урок 47. Wrap Up 00:02:34
  • Урок 48. Module Introduction 00:00:53
  • Урок 49. Creating the Basics Modal Component 00:06:34
  • Урок 50. Adding the Modal Container 00:02:30
  • Урок 51. Styling the Modal Elements 00:05:36
  • Урок 52. Adding Some General App Logic 00:03:50
  • Урок 53. Opening the Modal via CSS 00:05:24
  • Урок 54. Public Methods & Properties 00:06:38
  • Урок 55. Understanding Named Slots 00:05:46
  • Урок 56. "slotchange" & Getting Access to Slot Content 00:05:11
  • Урок 57. Closing the Modal with Modal Buttons 00:07:02
  • Урок 58. Dispatching Custom Events 00:03:41
  • Урок 59. Configuring Custom Events 00:04:53
  • Урок 60. Adding Enhancements & Modal Animations 00:04:52
  • Урок 61. Wrap Up 00:01:49
  • Урок 62. Module Introduction 00:01:22
  • Урок 63. Using Web Components in Modern Browsers 00:02:36
  • Урок 64. Browser Support for Web Components 00:02:28
  • Урок 65. Creating a Stencil Project 00:03:00
  • Урок 66. What is Stencil? 00:03:10
  • Урок 67. Diving Into a First Stencil Component 00:06:57
  • Урок 68. Wrap Up 00:01:42
  • Урок 69. Module Introduction 00:00:36
  • Урок 70. Using the Development Server 00:03:20
  • Урок 71. Creating a New Stencil Web Component 00:08:56
  • Урок 72. Styling a Stencil Component 00:05:41
  • Урок 73. Using Props 00:07:03
  • Урок 74. Configuring Props 00:01:28
  • Урок 75. Using Slots & Styling 00:04:55
  • Урок 76. Rendering Conditional Content 00:02:09
  • Урок 77. Using Attributes for Styling only 00:03:28
  • Урок 78. Using Props in Combination with Attributes 00:04:18
  • Урок 79. Understanding Mutable Props 00:05:34
  • Урок 80. Preparing Tabs 00:03:34
  • Урок 81. Adding More Event Listeners 00:04:24
  • Урок 82. Using State 00:04:33
  • Урок 83. Adding Methods to Components 00:03:41
  • Урок 84. Adding a Backdrop 00:05:21
  • Урок 85. Wrap Up 00:01:53
  • Урок 86. Module Introdution 00:00:39
  • Урок 87. Creating a New Component 00:02:49
  • Урок 88. Component & API Preparations 00:03:58
  • Урок 89. Submitting Forms 00:02:10
  • Урок 90. Styling the Component 00:05:50
  • Урок 91. HTTP Requests in Components 00:07:44
  • Урок 92. Using the API Key 00:02:24
  • Урок 93. Accessing the Host Element 00:05:15
  • Урок 94. Using References 00:02:53
  • Урок 95. Two Way Binding & Input Validation 00:06:33
  • Урок 96. Error Handling 00:06:08
  • Урок 97. Using the "componentdidload" Lifecycle Hook 00:05:35
  • Урок 98. All Lifecycle Hooks 00:05:17
  • Урок 99. Using Update Lifecycle Hooks 00:04:42
  • Урок 100. Watching Prop Changes 00:04:48
  • Урок 101. Creating a New Component 00:05:57
  • Урок 102. Styling the New Component 00:01:12
  • Урок 103. Outputting a List of Elements 00:06:21
  • Урок 104. Styling the List Items 00:02:12
  • Урок 105. Emitting Customs Events 00:04:48
  • Урок 106. Using the Listen Decorator 00:06:06
  • Урок 107. Using Hostdata 00:04:38
  • Урок 108. Adding a Loading Spinner 00:03:54
  • Урок 109. Embedding Components Into Components 00:04:55
  • Урок 110. Using CSS Properties 00:04:33
  • Урок 111. Wrap Up 00:01:26
  • Урок 112. Module Introduction 00:00:55
  • Урок 113. Using Stencil Config 00:05:00
  • Урок 114. Building & Using the Components 00:04:16
  • Урок 115. Using Web Components in a Node.js Project 00:02:11
  • Урок 116. Publishing to NPM 00:03:25
  • Урок 117. Installing NPM Packages 00:01:28
  • Урок 118. Using Web Components in an Angular App 00:05:33
  • Урок 119. Using Web Components in a React App 00:05:19
  • Урок 120. Using Web Components in a Vue App 00:05:19
  • Урок 121. Polyfills & The Internet Explorer 00:02:50
  • Урок 122. Wrap Up 00:01:26
  • Урок 123. Roundup 00:02:59

Полное введение в создание пользовательских HTML-элементов / веб-компонентов с StencilJS и даже без него. Посмотрим правде в глаза: у вас есть тысячи HTML-тегов, но некоторые полезные (<tabs>, <side-drawer>, <modal>, ...) отсутствуют.  Что, если вы можете создавать собственные HTML-теги. Без таких фреймворков, как Angular, библиотеки React или знания JavaScript в целом. Просто с волшебной функцией native-JavaScript, называемой «Веб-компоненты» (или «пользовательские элементы HTML»).

Веб-компоненты представляют собой комбинацию различных спецификаций, которые выпекаются в браузере. Начало работы с этими функциями - легкий ветерок, и вы быстро сможете создавать собственные мощные и повторно используемые (даже в проектах!) Пользовательские элементы HTML.

Такие пользовательские элементы не заменяют Angular, React или Vue, хотя вы можете легко использовать их в ЛЮБОМ веб-проекте, включая проекты с использованием таких фреймворков и библиотек.

В этом курсе вы узнаете Веб-компоненты с нуля.

Но мы не остановимся. В то время как начало работы довольно простое, более сложные компоненты будут сложнее создавать. Stencil.js - это инструмент, который облегчает создание таких родных веб-компонентов, используя современные функции, такие как TypeScript и JSX (не знаете, что это? Не беспокойтесь, вы узнаете об этом в курсе!).

Подробно, в этом курсе вы узнаете:

  • как создавать повторно используемые, легкие пользовательские элементы HTML с встроенными функциями браузера
  • как создавать веб-компоненты всех сложностей - от простой всплывающей подсказки до модальных окно или боковых меню
  • как передавать данные в свои собственные веб-компоненты и использовать их там
  • как выпустить собственные пользовательские события, которые вы можете прослушать в JavaScript
  • как использовать Shadow DOM для охвата ваших стилей CSS для ваших пользовательских элементов
  • как использовать Stencil.js, чтобы получить гораздо более простой рабочий процесс разработки
  • как использовать многие функции Stencil.js позволяет более эффективно создавать собственные веб-компоненты
  • как развернуть / повторно использовать свои собственные веб-компоненты в ЛЮБОМ проекте, используя ЛЮБЫЕ фреймворки JavaScript, такие как Angular, React или Vue (или вообще ничего!)

Требоавание:

  • Основные знания JavaScript являются обязательными
  • ES6 JavaScript (const, let, classes, ...) настоятельно рекомендуется, но не строго требуется - в рамках курса предоставляется краткий обзор
  • Не требуется знание фреймворков JavaScript (например, Angular, React, Vue)
  • НИКАКИЕ знания TypeScript или JSX не требуются

Давайте погрузимься эту захватывающую технологию вместе!

Твоя оценка

8 0
Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

10-01-2019 en 125 уроков
udemy Modern HTML & CSS From The Beginning
Создавайте современные адаптивные веб-сайты и пользовательские интерфейсы с помощью HTML5 и CSS3, включая Flexbox и CSS Grid. Этот курс предназначен как для начинающих, так и для опытных разработчиков, которые хотят научиться создавать адаптивные веб-сайты и пользовательские интерфейсы с использованием современных технологий HTML5 и CSS3 +, таких как Flexbox и CSS Grid. Этот курс включает в себя часы как обучения, так и изучения, а также проекты...
Duration 20:55:56
22 0
21-11-2018 en 66 уроков
udemy Build Responsive Real World Websites with HTML5 and CSS3
Самый простой способ шаг за шагом освоить современный веб-дизайн, HTML5 и CSS3.  # 1 HTML5 и CSS3 курс в официальном рейтинге Udemy!
Duration 11:52:45
5 0

Последнее добавленное

Введение в Python разработку

Введение в Python разработку

en
Этот курс предназначен для обучения программированию с использованием Python. Мы рассмотрим строительные блоки языка, основы программирования, как использовать стандартную библиотеку, сторонние пакеты и как создавать проекты Python. В конце концов, вы должны понимать, как программировать.
Профессиональный облачный разработчик Google Cloud Certified

Профессиональный облачный разработчик Google Cloud Certified

en
Этот курс подготовит вас к сертификации Google Professional Cloud Developer, и все разделы основаны на общих целях, которые Google опубликовал для подготовки к экзамену. Мы также включили подробные пошаговые руководства и практические занятия, которые помогут закрепить концепции, которые мы...
Профессиональный облачный архитектор Google Cloud Certified (Ранний доступ)

Профессиональный облачный архитектор Google Cloud Certified (Ранний доступ)

en
Цель этого курса - подготовить вас к сдаче сертификации Google Cloud Certified Professional Cloud Architect certification. Мы достигнем этого с помощью широкого спектра уроков, практических демонстраций, лабораторных условий и практических вопросов в качестве многогранного подхода к подготовке.
AWS Advanced Networking Specialty

AWS Advanced Networking Specialty

en
Добро пожаловать на курс сертификации специалистов по продвинутым сетям AWS. Этот курс предназначен для того, чтобы дать вам концепции, практические занятия, практические экзамены и учебные пособия, необходимые для подготовки к экзамену. Хотя AWS больше не требует сертификации уровня Associate...
Автоматизация AWS с помощью Lambda, Python и Boto3

Автоматизация AWS с помощью Lambda, Python и Boto3

en
В этом курсе будет изучаться автоматизация AWS с использованием Lambda и Python. Мы будем использовать AWS SDK для Python, более известный как Boto3. Вы узнаете, как интегрировать Lambda со многими популярными сервисами AWS, такими как EC2, S3, SQS, DynamoDB и другими.
Постройте приложение Laravel с TDD

Постройте приложение Laravel с TDD

en
Пришло время взять методы, которые мы изучили в Laravel From Scratch, и эффективно использовать их при создании вашего первого реального приложения. Вместе мы будем использовать TDD для создания Birdboard - минимального, похожего на Basecamp, приложения для управления проектами.
Web Start

Web Start

ru
Хорошие новости - Codename 47 вернулся. Плохие новости - ничего нового он с собой не захватил. В этой части все те же уровни, для все то й же аудитории. Все надежды прошлой части развеялись в пух и прах. Если вы следили за приключениями лысого раньше, то эта часть врятли вас чем то...
Стилизация (стайлинг) NativeScript Core приложений

Стилизация (стайлинг) NativeScript Core приложений

en
Все о CSS в NativeScript Core. В этом курсе мы подробно изучим методы моделирования с помощью NativeScript Core. Мы узнаем, как использовать глобальные конструкции стилей NativeScript, а также как лучше подходить к разделению стилей на составные правила. Мы также рассмотрим использование стилей...
chat
logo