strokoff

Полное погружение в веб-компоненты в 2023 году

Погружение в веб-компоненты с webislife.ru

У нас всех есть проекты, над которыми мы не стали продолжать работать. Код стал неуправляемым, область применения расширилась, быстрые фиксы стали применяться поверх других фиксов, а структура кода рухнула под тяжестью спаггетти, программирование может быть грязным делом.

Читать далее… »

1723
mrssea

Лучшие практики для создания веб-компонентов

Многие уже знают, насколько полезными могут быть веб-компоненты. Они предоставляют множество преимуществ, которые могут помочь в создании веб-приложений, или системы дизайна, или просто при создании чего-то, что будет переиспользовано в ваших приложениях. Читать далее… »

476
mrssea

Лучшие практики по пользовательским элементам

Статья вышла в 2017 году, но и сейчас не теряет актуальности. т.к. я не нашла ее в переводе на русский язык, решила перевести сама.

 Пользовательские элементы позволяют создавать собственные HTML-теги. Этот контрольный список охватывает лучшие практики, которые помогут вам создавать высококачественные элементы.

Пользовательские элементы позволяют расширять HTML и определять собственные теги. Это невероятно мощная функция, но она также низкоуровневая, а это означает, что не всегда ясно, как лучше всего реализовать свой собственный элемент.

Чтобы помочь вам создать наилучшие впечатления, мы составили этот чеклист — все, что, по нашему мнению, необходимо для того, чтобы пользовательский элемент вел себя хорошо.

Читать далее… »

324
strokoff

Создаем свой веб-компонент WYSIWYG редактора. Часть 1

Базовый вид редактора
Базовый вид редактора

Сегодня мы напишем собственный современный веб-компонент WYSIWYG редактора, который поможет нам в дальнейших проектах с любыми формочками, где требуется редактирование текста от публикаций больших статей, до публикации простых комментариев. По максимуму реализуем возможности браузерных API и опубликуем npm пакет. Для нетерпеливых: github репозиторий а также npm package и git npm package.

link

717
strokoff

Декларативный shadow DOM

Декларативный shadow DOM

Мы рады сообщить, что поддержка декларативного теневого API DOM была добавлена ​​и включена по умолчанию в Safari Technology Preview 162 . Напомним, теневой DOM является частью веб-компонентов, набора спецификаций, которые изначально были предложены Google для создания многоразовых виджетов и компонентов в Интернете. С тех пор эти спецификации были интегрированы в стандарты DOM и HTML. Shadow DOM , в частности, обеспечивает облегченную инкапсуляцию для деревьев DOM, позволяя создавать параллельное дерево для элемента, называемого «теневым деревом», которое заменяет рендеринг элемента без изменения собственного дерева DOM.

Читать далее… »

532
strokoff

ElementInternals и ассоциированные с формой пользовательские элементы

webkit

В safari technology preview включена поддержка ElementInternals и form-assoiciated пользовательских элементов по умолчанию Пользовательские элементы — это функция, которая позволяет веб-разработчикам создавать повторно используемые компоненты, определяя свои собственные элементы HTML, не полагаясь на структуру JavaScript. ElementInternals — это новое дополнение к API пользовательских элементов, которое позволяет разработчикам управлять внутренними состояниями пользовательских элементов, такими как роль ARIA по умолчанию или метка ARIA, а также участие пользовательских элементов в отправке и проверке форм.

Читать далее… »

513
strokoff

Расширяем возможности HTML5 тега time с помощью веб-компонента wc-time

Текушее время и мы продолжаем наш цикл статей про разработку веб-компонентов и сегодня мы будем расширять возможности HTML5 тега time с помощью возможностей браузера и идеологии веб-компонентов

Читать далее… »

320
strokoff

Используем веб-компоненты в vue.js 3+

vue-wc-likes

На примере веб-компонента wc-like рассмотрим интеграцию с vue3+ фреймворком, посмотрим насколько секонмит нам времени веб-компонент и сколько кода нам надо добавить на vue чтобы все заработало. Демонстрацию смотрите тут. Также доступен git репозиторий с демкой и npm пакет vue-wc-likes.

Читать далее… »

793
strokoff

Интегрируем веб-компонент wc-likes в wordpress


В этой статье мы рассмотрим вариант интеграции веб-компонента wc-likes с CMS системой wordpress на примере сайта webislife.ru

Читать далее… »

383
strokoff

Разрабатываем переиспользуемый web-компонент для лайков

В рамках цикла статей о веб-компонентах мы рассмотрим пример реализации компонента лайков wc-likes, пройдемся по шагам реализации и интегрируем лайки прямо на webislife 😄 поехали!)
Читать далее… »

388
12»