Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨ Читать далее
Подробнее
Псевдокласс :auto-fill в CSS позволяет нам стилизовать элементы , которые содержат контент, автоматически заполняемый браузером. В качестве примера возьмем форму регистрации нового пользователя. Вы когда-нибудь нажимали на поле ввода и видели раскрывающийся список предложений для вставки? Читать далее
Подробнее
В этой статье я расскажу, как и для чего, на одном из своих проектов, мы прикрутили новую возможность Next.js – On-Demand ISR (инкрементная статическая регенерация по запросу). Читать далее
Подробнее
Один великий китайский философ сказал: «каждый разработчик должен понимать, как исполняется его программа». Что ж, давайте разбираться. Говорить будем про рендеринг и его производительность. Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были…
Подробнее
За последнее время в CSS появилось достаточно новых возможностей, которые позволяют нам создавать новые решения для старых задач. Мне захотелось рассказать вам о тех, которые работают в современных браузерах, и их можно использовать прямо сейчас. Я подобрал, как мне кажется, наиболее распространенные задачи и покажу вам, как они решаются с помощью современного CSS. Надеюсь, вам будет интересно, и вы узнаете что-то новое. Так что не буду задерживаться, давайте начнем. Читать далее
Подробнее
Все браузеры элементу body добавляют внешний отступ со значением 8px (margin 8px). Это часть таблицы стилей по умолчанию, рекомендованных w3c. Но почему именно 8px? Откуда такая тенденция? Читать далее
Подробнее
В какой-то момент своей карьеры вы, возможно, просматривали вкладку «Производительность» в инструментах разработки вашего любимого браузера. В конце концов вы попытались создать profile, но, вероятно, быстро разочаровались. Высокая плотность отображаемой информации делает ее немного подавляющей и несколько пугающей. Я был там, я понимаю тебя! Хорошая новость: кривая обучения на самом деле не такая крутая! Как только вы усвоите несколько концепций, он внезапно станет вашим самым ценным…
Подробнее
Я всегда хотел, чтобы CSS умел обрезать изображение и размещать его в любом нужном мне направлении. Это стало возможным благодаря использованию дополнительного элемента HTML в сочетании с различными свойствами CSS, которые я объясню позже. В этой статье я познакомлю вас с новым свойством CSS object-view-box, предложенным Джейком Арчибальдом в начале этого года. Это позволяет нам обрезать или изменять размер замененных HTML-элементов, таких как или . Читать далее
Подробнее
Я полагаю, вы знакомы с инструментами разработчика браузера Chrome. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript. В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки! Давайте посмотрим
Подробнее
Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое. В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами…
Подробнее
Каждый день сайтом SuperJob пользуется более миллиона людей. Как построить архитектуру фронта, чтобы приложение загружалось быстро и при этом выполняло требования поисковой оптимизации? Как мы можем это измерить? Значительно повысить производительность можно при помощи серверного рендеринга, но какая будет цена у такой оптимизации? Какой инструмент выбрать — готовую библиотеку или собственное решение? Какие ограничения в дальнейшем могут быть вызваны выбором того или иного подхода? На
Подробнее
Функция CSS :where() — новейшее детище в блоке псевдоклассов. Она принимает список селекторов в качестве аргументов и минимизирует их, позволяя вам писать меньше кода и в то же время стилизовать их все вместе. В этом уроке мы узнаем про функцию псевдокласса :where() и покажем, как ее можно использовать в продакшене. Мы обсудим наложение, специфичность в отношении функции :where(), а также рассмотрим некоторые конкретные варианты использования. Поехали! Читать далее
Подробнее