[Перевод] Наиболее эффективные методы улучшения Core Web Vitals

На протяжении многих лет сообщество веб-разработчиков накапливало знания об оптимизации производительности веб-приложений. Хотя каждая отдельная оптимизация может привести к улучшению работы сайта, совместное применение всех методов является довольно сложной задачей. Кроме того, лишь некоторые из них применимы к какому-либо конкретному сайту. Вопросы производительности могут быть не столь очевидны для тех, чья карьера не была связана с этой областью. Именно поэтому важно понимать, какие…

Подробнее

Frontend Адвент-Календарь 2024

Не успеваете следить за последними новинками и трендами веб технологий? Этот адвент-календарь идеально подойдет для того, чтобы изучить и попробовать новые возможности CSS и JavaScript, появившиеся за последние годы. Читать далее

Подробнее

В Chrome Canary стал доступен полностью кастомизируемый <Select>

Новость Это должно было когда то случится, вслед за разработкой нативного элемента popover, в 150й версии Chrome Canary появился запрос на обратную связь по элементу Select, у которого можно полностью изменять выпадающий элемент. Элемент будет состоять из следующих частей, представленных на картинке: Читать далее

Подробнее

Исследование: в 2024 году только 0,5% из топ-200 веб-сайтов мира используют валидный HTML

Фронтенд-инженер, бывший сотрудник Google и Miro Йенс Оливер Мейерт провёл исследование, которое показало, что 199 из 200 самых популярных веб-сайтов используют неработающий HTML. Читать далее

Подробнее

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 9

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: какие сюрпризы есть при использовании свойства display; о чём нужно помнить при вёрстке кнопки «Показать пароль»; зачем нужны подсказки с помощью атрибута aria-label при разметке областей…

Подробнее

Полный гайд по CSS Flexbox с примерами из практики

Привет! Сегодня мы поговорим про flexbox в css. Это очень важная тема, в которой должен разбираться каждый фронтенд-разработчик или верстальщик. Я покажу вам как flexbox работает на реальных примерах. А в конце статьи покажу лайфхаки, которыми сам постоянно пользуюсь на работе. Читать далее

Подробнее

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 8

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: какие скрытые проблемы с паттерном «visually-hidden» нас ждут; в каких ситуациях кнопка «Закрыть» указывает на выход; чем вредно значение contents у свойства display; почему подсказка с помощью…

Подробнее

[Перевод] 37 Советов от Senior Frontend Разработчика. Для начинающих

Мне очень понравился пост abbeyperini, и я решил поделиться своими советами после более чем 5-летнего опыта работы разработчиком программного обеспечения. Готовы? Давайте погрузимся 💪. 1. Освойте основы Дом, построенный на шатком фундаменте, развалится при малейшей проблеме. Аналогично, если у вас нет прочных основ: Читать далее

Подробнее

[Перевод] Анимации CSS, основанные на времени

Демонстрация анимаций В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления. После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной

Подробнее

Рендерим таблицы с помощью Symbiote.js

В этой статье, я хочу показать базовые приемы работы с HTML-таблицами при использовании библиотеки Symbiote.js и раскрыть на практике некоторые ее важные особенности. Читать далее

Подробнее

Путь развития Frontend разработчика (Вторая часть)

Это вторая часть roadmap frontend разработчика, Если вы не читали первую часть, то настоятельно рекомендую ознакомится, Первая часть. В этой статье я продолжу вам рассказывать про мое представление современной карты развития frontend разработчика. Читать далее

Подробнее

Путь развития (Roadmap) Frontend разработчика

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

Подробнее