[Перевод] Стили заголовков в CSS: градиенты

[Перевод] Стили заголовков в CSS: градиенты

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

Подробнее
Фронтенд-новости №8. Вышел Wordpress 6.0, найдена оптимальная длина строки, <dialog> под вопросом

Фронтенд-новости №8. Вышел Wordpress 6.0, найдена оптимальная длина строки, <dialog> под вопросом

Дайджест новостей и полезных статей о фронтенд-разработке за последнюю неделю 23–29 мая. Что там у вас ещё

Подробнее
[Перевод] Знакомство с профилировщиком производительности вашего браузера

[Перевод] Знакомство с профилировщиком производительности вашего браузера

В какой-то момент своей карьеры вы, возможно, просматривали вкладку «Производительность» в инструментах разработки вашего любимого браузера. В конце концов вы попытались создать profile, но, вероятно, быстро разочаровались. Высокая плотность отображаемой информации делает ее немного подавляющей и несколько пугающей. Я был там, я понимаю тебя! Хорошая новость: кривая обучения на самом деле не такая крутая! Как только вы усвоите несколько концепций, он внезапно станет вашим самым ценным…

Подробнее
[Перевод] Первый взгляд на CSS свойство object-view-box

[Перевод] Первый взгляд на CSS свойство object-view-box

Я всегда хотел, чтобы CSS умел обрезать изображение и размещать его в любом нужном мне направлении. Это стало возможным благодаря использованию дополнительного элемента HTML в сочетании с различными свойствами CSS, которые я объясню позже. В этой статье я познакомлю вас с новым свойством CSS object-view-box, предложенным Джейком Арчибальдом в начале этого года. Это позволяет нам обрезать или изменять размер замененных HTML-элементов, таких как или . Читать далее

Подробнее
Фронтенд-новости №7. Больше никаких игр со шрифтами, COLRv1 и большое обновление Figma

Фронтенд-новости №7. Больше никаких игр со шрифтами, COLRv1 и большое обновление Figma

Дайджест новостей и интересных статей из мира фронтенд-разработки за 16—22 мая. Как отключить запрос favicon.ico, если это нужно. Вы же знали ,что ваш браузер всегда запрашивает favicon.ico? Теперь фраза «поиграться шрифтами» усложняет задачу, так как грядёт COLRv1 Как работают :where(), :is() :has() и какой из селекторов упрощает жизнь Playwright теперь готов тестировать ваши компоненты на React, Vue и Svelter Большое обновление Figma Что там у вас ещё

Подробнее
Введение в SVG-анимации для верстальщиков

Введение в SVG-анимации для верстальщиков

Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать

Подробнее
Фронтенд-новости №6. Интернет сломан, бесплатный VPN в Edge, State of CSS 2022

Фронтенд-новости №6. Интернет сломан, бесплатный VPN в Edge, State of CSS 2022

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 9–15 мая. Что там у вас ещё

Подробнее
[Перевод] 3 способа использовать box-shadow в CSS

[Перевод] 3 способа использовать box-shadow в CSS

Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать. Читать далее

Подробнее
Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры

Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры

Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских. Горячее Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax(). Узнайте о JavaScript контейнерах. Что случится если вы откажетесь от React? Ещё один сайт на HTML. Да, так тоже можно. Остальные новости и статьи — под катом. Что там у вас ещё

Подробнее
Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

Фронтенд-новости №4. Лучший шрифт для веба, поиск среди hidden, очередной React

Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая. — Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5. — Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений. – Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс,…

Подробнее
[Перевод] 11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком

[Перевод] 11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком

Я полагаю, вы знакомы с инструментами разработчика браузера Chrome. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript. В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки! Давайте посмотрим

Подробнее
[Перевод] Эффективный параллакс

[Перевод] Эффективный параллакс

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

Подробнее