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

Web Components & Stencil.js - Build Custom HTML Elements
Duration 08:19:40
Открыть все курсы от udemy
Облачный хостинг на SSD с лучшей техподдержкой! Развернуть приложение в один клик

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 не требуются

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

Твоя оценка

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

Комментарии

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

10-01-2019 en 107 уроков
udemy Modern HTML & CSS From The Beginning
Создавайте современные адаптивные веб-сайты и пользовательские интерфейсы с помощью HTML5 и CSS3, включая Flexbox и CSS Grid. Этот курс предназначен как для начинающих, так и для опытных разработчиков, которые хотят научиться создавать адаптивные веб-сайты и пользовательские интерфейсы с использованием современных технологий HTML5 и CSS3 +, таких как Flexbox и CSS Grid. Этот курс включает в себя часы как обучения, так и изучения, а также проекты...
Duration 17:03:44
3 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
1 0

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

Полный курс по программированию на Python для начинающих

Полный курс по программированию на Python для начинающих

en
Изучите Python для AI, машинного обучения, науки о данных и разработки приложений. Математики, ученые и инженеры любят Python. Почему? Потому что он делает сложные вычисления и повторяющиеся задачи действительно простыми для написания и выполнения. Разработчики любят его, потому что он простой...
Python для анализа данных

Python для анализа данных

ru
«Данные — это новая нефть». Они помогают усовершенствовать продукт, привлечь новых пользователей и являются драйвером роста любой компании. Компании во всем мире используют Python для сбора и анализа данных. В Uber, Yandex и Facebook, знание Python является обязательным требованием при приеме...
Flutter и Dart: полноценное мобильное приложение™

Flutter и Dart: полноценное мобильное приложение™

en
Изучение того, как создавать приложения для iOS и Android, с полным демонстрационным примером на основе Dart и Flutter Framework. Flutter - это SDK для мобильных приложений, предназначенный для создания высококачественных собственных интерфейсов на iOS и Android в рекордно короткие сроки. Flutter ра
Flutter: кроссплатформенное приложение iOS / Android

Flutter: кроссплатформенное приложение iOS / Android

en
Создавайте кроссплатформенные красивые нативные приложения в рекордно короткие сроки. Flutter - это SDK для мобильных приложений, в комплекте с фреймворком, виджетами и инструментами, который предоставляет разработчикам простой и продуктивный способ создания и развертывания красивых мобильных...
Программирование на Dart от новичка до эксперта

Программирование на Dart от новичка до эксперта

en
Изучите Dart с уровня Beginner и станьте экспертом, который может начать изучать Flutter, AngularDart и многое другое. В этом курсе вы узнаете все, что вам нужно знать о Dart. Dart - это язык, который становится популярным день ото дня, и разработчики по всему миру стремятся к этому языку...
Понятный JavaScript (Middle)

Понятный JavaScript (Middle)

ru
Хочешь стать JavaScript разработчиком, систематизировать знания и выйти на совершенно новый уровень! Курс «Понятный JavaScript» — это комплексная программа обучения, которая позволит тебе полностью изучить с нуля главный язык Frontend разработчика. Уже через 3 месяца ты будешь знать JavaScript...
chat
logo