Последние новости: Coursehunters.club

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

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

Полное введение в создание пользовательских 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 не требуются

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

Полный список уроков Развернуть / Свернуть
  • Урок 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
Этот курс находится в платной подписке!

И будет доступен в бесплатном просмотре 06.01.2019. Если у тебя еще нет у нас аккаунта - зарегистрируйся и оформи премиум подписку в своем личном кабинете, и смотри этот, а также многие другие курсы, прямо сейчас.

Следи за последними обновлениями и новостями в нашем coursehunters.club, или вступай в наш канал telegram.

Комментарии

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

Firebase c React, v2

Firebase c React, v2

en
Иногда у вас есть отличная идея для приложения и вы хотите как можно быстрее представить его миру. Лучше потратить время на работу над тем, что делает приложение особенным, чем на настройку и защиту серверов. Firebase позволяет вам получить критически важные - и ужасно утомительные для реализации...
Electron v2

Electron v2

en
Electron - это платформа для создания собственных кроссплатформенных настольных приложений с использованием веб-технологий (например, HTML, CSS и JavaScript). На этом семинаре вы научитесь создавать несколько настольных приложений с использованием Electron. Мы обсудим, как реализовать...
Universal React с Next.js - Полное руководство

Universal React с Next.js - Полное руководство

en
Узнайте, как создавать удивительные server-rendered приложения React с помощью Next.js. Хотите создавать удивительные, производительные и в целом лучшие приложения React? Смотрите не дальше, чем Next.js. Этот курс - лучшее руководство, которое вы найдете для изучения фреймворка Next.js. В нем мы...
JavaScript: Расширенные возможности

JavaScript: Расширенные возможности

en
Курс состоит из 8 уроков, на которых учащиеся смогут ознакомиться с новыми, а также расширенными возможностями языка JavaScript. Студенты рассмотрят возможность использование событий для мобильных устройств, реализацию возможностей ES6, ES7, ES8, ES9, и использование Promises RxJS в написании...
ES6, ES7 и ES8, время обновить ваш JavaScript / ECMAScript!

ES6, ES7 и ES8, время обновить ваш JavaScript / ECMAScript!

en
Если вы потратили время на программирование на JavaScript, вы слышали о ES6, ECMAScript или ES2015. Может быть, это был отвратительный сотрудник, который пытался вас унизить, другой курс удеми, или в встречались с ними на stackoverflow. Если вы не знакомы с ним или все еще задаетесь вопросом...
Просто Express (с кучей node и http). В деталях.

Просто Express (с кучей node и http). В деталях.

en
Нет MERN или MEAN ... просто Express. Для тех, кто немного узнал о самом крутом фреймворке node и хочет больше. У вас есть представление о том, что такое Node, Express и http, иначе вас бы здесь не было. Node и серверная часть JavaScript взяли мир штурмом, [НЕКОТОРАЯ БОЛЬШАЯ КОМПАНИЯ] переехала...
Разработка модуей Drupal 8 с примерами

Разработка модуей Drupal 8 с примерами

en
Никогда не было лучшего времени для изучения разработки модулей Drupal 8. Это потому, что Drupal 8 уже является лучшим технологически и более быстрым способом создания приложений Drupal (по сравнению с Drupal 7). Drupal 8 построен поверх Symfony, поэтому хорошие новости заключаются в том...
Appium (Версия 1.8.2) - Мобильное автоматизированное тестирование с нуля

Appium (Версия 1.8.2) - Мобильное автоматизированное тестирование с нуля

en
Appium курс - 200+ лекций по мобильной автоматизации от основ с примерами в реальных проектах. Курс полностью обновлен 12 ноября с последней версией Appium 1.8.2. Узнайте все, что вам нужно знать о мобильной автоматизации (Android + IOS), даже если вы никогда не программировали раньше.
chat
logo