В safari technology preview включена поддержка ElementInternals и form-assoiciated пользовательских элементов по умолчанию Пользовательские элементы — это функция, которая позволяет веб-разработчикам создавать повторно используемые компоненты, определяя свои собственные элементы HTML, не полагаясь на структуру JavaScript. ElementInternals — это новое дополнение к API пользовательских элементов, которое позволяет разработчикам управлять внутренними состояниями пользовательских элементов, такими как роль ARIA по умолчанию или метка ARIA, а также участие пользовательских элементов в отправке и проверке форм.
Текушее время и мы продолжаем наш цикл статей про разработку веб-компонентов и сегодня мы будем расширять возможности HTML5 тега time с помощью возможностей браузера и идеологии веб-компонентов
По умолчанию Vue\Nuxt помогают нам оптимизировать загрузку наших чанков и подставляют скриптам на странице rel=prefetch\preload, чтобы браузер мог подгрузить их заранее, подробнее про prefetch здесь. В небольших приложениях это не вызывает проблем, но с ростом приложения вы можете столкнуться c проблемой просадки FCP, как с этим бороться, расскажу на своем примере из работы сайта biglion.ru
Искусство оформления буквиц существует уже сотни, если не тысячи лет. Его использование в стилях печати для обозначения начала нового раздела или главы можно увидеть в истории. Но в цифровую эпоху всегда был проблематичным стилизовать буквиц, не было «чистого» решения для этого. Читать далее… »
В этой заметке хочу поделиться одним маленьким обновлением, которое произошло на сайте, а именно — добавление стилей для упоминания браузеров в статьях — ChromeFirefoxSafariEdge чуть поговорим о семантике и посмотрим как это реализовано у серьезных сайтов типа web.dev
На примере веб-компонента wc-like рассмотрим интеграцию с vue3+ фреймворком, посмотрим насколько секонмит нам времени веб-компонент и сколько кода нам надо добавить на vue чтобы все заработало. Демонстрацию смотрите тут. Также доступен git репозиторий с демкой и npm пакет vue-wc-likes.
Сборник лучших практик, которые, по мнению команды Chrome DevRel, являются наиболее эффективными способами повышения производительности Core Web Vitals в 2023 году.
На протяжении многих лет команда Google давала веб-разработчикам множество рекомендаций по повышению производительности сайта. Читать далее… »
В рамках цикла статей о веб-компонентах мы рассмотрим пример реализации компонента лайков wc-likes, пройдемся по шагам реализации и интегрируем лайки прямо на webislife 😄 поехали!) Читать далее… »