[Перевод] Вышел Chrome 116

[Перевод] Вышел Chrome 116

Традиционный перевод анонса от команды Google Chrome о нововведениях • Document Picture-in-Picture API • Улучшена отладка отсутствующих таблиц стилей в DevTools • Свойство notRestoredReasons И многое другое! Читать далее

Подробнее
[Перевод] Skeleton Mammoth — или как я решал проблему переиспользуемых скелетон лоадеров

[Перевод] Skeleton Mammoth — или как я решал проблему переиспользуемых скелетон лоадеров

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

Подробнее
React + Styled Components — идеальная анимация. Параметризованная анимация

React + Styled Components — идеальная анимация. Параметризованная анимация

В данной статье продемонстрирован способ реализации “параметризованной” css анимации React компонента с помощью styled components. Параметризованная потому что css анимация описывается через параметры, которые динамически рассчитываются на основе пропсов и состояний компонента при его рендеринге. Читать далее

Подробнее
Интересные трюки JS, HTML и CSS, #2

Интересные трюки JS, HTML и CSS, #2

Небольшая подборка нестандартных вариантов использования HTML/JS/CSS, где каждый найдёт что-то интересное. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления. Предыдущая часть здесь. В этом выпуске — DevTools для мобильных браузеров, CSS-антистресс для Booking.com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox) и др. Читать дальше →

Подробнее
[Перевод] Исследование производительности анимации на основе скрола страницы

[Перевод] Исследование производительности анимации на основе скрола страницы

Что нового в анимации на основе скрола? Анимация на основе скрола - это способ добавить интерактивности и визуального интереса вашему сайту или веб-приложению, который запускается в зависимости от положения прокрутки пользователя. Это отличный способ удержать пользователей и сделать сайт более привлекательным. Раньше единственным способом создания анимации на основе скрола страницы, было реагирование на событие прокрутки в главном потоке. Это приводило к двум основным…

Подробнее
[Перевод] Вышел Chrome 115

[Перевод] Вышел Chrome 115

В этой статье вы узнаете про: • Анимации на основе скрола • Topics API • Ограждённые Фреймы • Privacy Sandbox и многое другое! Читать далее

Подробнее
[Перевод] Введение в View Transitions API

[Перевод] Введение в View Transitions API

Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня. Читать дальше →

Подробнее
Сравнение тяжеловесности популярных библиотек UI компонент для Vue 3

Сравнение тяжеловесности популярных библиотек UI компонент для Vue 3

Библиотеки UI компонент популярны и удобны в некоторых случаях, но у них тоже есть обратные стороны. Одно дело, когда делаешь админку и используешь десятки компонент, другое - когда тебе надо всего пару компонент. Было проведено исследование - взяты три HTML элемента: Button, Input и Select, и проверено, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3. Читать далее

Подробнее
React: как сделать динамический суффикс в <input />, который будет двигаться вместе с набранным текстом

React: как сделать динамический суффикс в <input />, который будет двигаться вместе с набранным текстом

В этой статье вы узнаете как с помощью react можно сделать input с двигающимся суффиксом, который идет сразу после значения ввода Читать далее

Подробнее
Как фронтендеру пройти собеседование: разбор типичных задач и советы от тимлида «РТК ИТ»

Как фронтендеру пройти собеседование: разбор типичных задач и советы от тимлида «РТК ИТ»

Хекслет поговорил с Михаилом Синяковым, Head of Frontend в «РТК ИТ». Мы узнали, как обычно проходят собеседования у фронтендеров, какие задачи они решают, а также на что стоит обратить внимание кандидатам при подготовке к интервью. Читать далее

Подробнее
Чем хорош и чем плох Tailwind CSS, или «Допустим, у вас стартап!»

Чем хорош и чем плох Tailwind CSS, или «Допустим, у вас стартап!»

Привет, Хабр! Меня зовут Александр Водолазских. Я живу в Новосибирске и я работаю Frontend Domain Lead в СберМаркете. Сегодня хочу немного поговорить об опыте работы с Tailwind CSS — utility-first CSS framework. Поделюсь болью и радостью, которые возникли при его эксплуатации. Читать далее

Подробнее
[Перевод] Вышел Chrome 113

[Перевод] Вышел Chrome 113

Что вы узнаете: WebGPU уже здесь, он позволяет использовать высокопроизводительную 3D-графику и параллельные вычисления в вебе. С помощью инструментов разработчика теперь можно переопределять заголовки ответов сети. Начинает распространяться First Party Sets, часть Privacy Sandbox, которая позволяет организациям объявлять связанные сайты. И многое другое. Читать далее

Подробнее