mrssea

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

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

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

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

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

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

123
12 мин
strokoff

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

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

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

link

164
21 мин
mrssea

10 ошибок, которых следует избегать при работе с Vue 3

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

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

208
11 мин
strokoff

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

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

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

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

149
6 мин
mrssea

Chrome 111 beta

 

Новые цветовые типы и цветовые пространства CSS, тригонометрические функции CSS и API View Transitions.

Следующие изменения относятся к новому выпуску бета-версии Chrome для Android, ChromeOS, Linux, macOS и Windows. Узнать больше о перечисленных здесь функциях можно по предоставленным ссылкам или из списка на ChromeStatus.com. Бета-версия Chrome 111 доступна с 9 февраля 2023 года.

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

111
6 мин
strokoff

Время чтения публикаций

Самая большая статья на webislife.ru

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

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

145
1 мин
strokoff

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

webkit

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

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

181
7 мин
strokoff

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

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

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

97
8 мин
strokoff

Как отключить prefetch в vue\nuxt и зачем это нужно

vue nuxt отключаем prefetch

По умолчанию Vue\Nuxt помогают нам оптимизировать загрузку наших чанков и подставляют скриптам на странице rel=prefetch\preload, чтобы браузер мог подгрузить их заранее, подробнее про prefetch здесь. В небольших приложениях это не вызывает проблем, но с ростом приложения вы можете столкнуться c проблемой просадки FCP, как с этим бороться, расскажу на своем примере из работы сайта biglion.ru

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

226
3 мин
mrssea

Управляйте буквицей с помощью CSS-свойства initial-letter

Искусство оформления буквиц существует уже сотни, если не тысячи лет. Его использование в стилях печати для обозначения начала нового раздела или главы можно увидеть в истории. Но в цифровую эпоху всегда был проблематичным стилизовать буквиц, не было «чистого» решения для этого. Читать далее… »

177
6 мин
«123456789»