strokoff
У нас всех есть проекты, над которыми мы не стали продолжать работать. Код стал неуправляемым, область применения расширилась, быстрые фиксы стали применяться поверх других фиксов, а структура кода рухнула под тяжестью спаггетти, программирование может быть грязным делом.
mrssea
Многие уже знают, насколько полезными могут быть веб-компоненты. Они предоставляют множество преимуществ, которые могут помочь в создании веб-приложений, или системы дизайна, или просто при создании чего-то, что будет переиспользовано в ваших приложениях. Читать далее… »
mrssea
Статья вышла в 2017 году, но и сейчас не теряет актуальности. т.к. я не нашла ее в переводе на русский язык, решила перевести сама.
Пользовательские элементы позволяют создавать собственные HTML-теги. Этот контрольный список охватывает лучшие практики, которые помогут вам создавать высококачественные элементы.
Пользовательские элементы позволяют расширять HTML и определять собственные теги. Это невероятно мощная функция, но она также низкоуровневая, а это означает, что не всегда ясно, как лучше всего реализовать свой собственный элемент.
Чтобы помочь вам создать наилучшие впечатления, мы составили этот чеклист — все, что, по нашему мнению, необходимо для того, чтобы пользовательский элемент вел себя хорошо.
strokoff
Сегодня мы напишем собственный современный веб-компонент WYSIWYG редактора, который поможет нам в дальнейших проектах с любыми формочками, где требуется редактирование текста от публикаций больших статей, до публикации простых комментариев. По максимуму реализуем возможности браузерных API и опубликуем npm пакет. Для нетерпеливых: github репозиторий а также npm package и git npm package.
strokoff
Мы рады сообщить, что поддержка декларативного теневого API DOM была добавлена и включена по умолчанию в Safari Technology Preview 162 . Напомним, теневой DOM является частью веб-компонентов, набора спецификаций, которые изначально были предложены Google для создания многоразовых виджетов и компонентов в Интернете. С тех пор эти спецификации были интегрированы в стандарты DOM и HTML. Shadow DOM , в частности, обеспечивает облегченную инкапсуляцию для деревьев DOM, позволяя создавать параллельное дерево для элемента, называемого «теневым деревом», которое заменяет рендеринг элемента без изменения собственного дерева DOM.
strokoff
В safari technology preview включена поддержка ElementInternals и form-assoiciated пользовательских элементов по умолчанию Пользовательские элементы — это функция, которая позволяет веб-разработчикам создавать повторно используемые компоненты, определяя свои собственные элементы HTML, не полагаясь на структуру JavaScript. ElementInternals — это новое дополнение к API пользовательских элементов, которое позволяет разработчикам управлять внутренними состояниями пользовательских элементов, такими как роль ARIA по умолчанию или метка ARIA, а также участие пользовательских элементов в отправке и проверке форм.
strokoff
Текушее время и мы продолжаем наш цикл статей про разработку веб-компонентов и сегодня мы будем расширять возможности HTML5 тега time с помощью возможностей браузера и идеологии веб-компонентов
strokoff
На примере веб-компонента wc-like рассмотрим интеграцию с vue3+ фреймворком, посмотрим насколько секонмит нам времени веб-компонент и сколько кода нам надо добавить на vue чтобы все заработало. Демонстрацию смотрите тут. Также доступен git репозиторий с демкой и npm пакет vue-wc-likes.
strokoff
В этой статье мы рассмотрим вариант интеграции веб-компонента wc-likes с CMS системой wordpress на примере сайта webislife.ru
strokoff
В рамках цикла статей о веб-компонентах мы рассмотрим пример реализации компонента лайков wc-likes, пройдемся по шагам реализации и интегрируем лайки прямо на webislife 😄 поехали!)
Читать далее… »