[Перевод] Scrollbar в современном CSS

[Перевод] Scrollbar в современном CSS

Начнем с того что scrollbar – это самый обыденный элемент, присутствующий на всех веб-сайтах и в каждом приложении. Исторически сложилось так, что стилизовать scrollbar-ы было очень сложно и многие из разработчиков помучились с ними и стараются избегать работы с ними, но все же, как мне кажется, мы должны уделять им немного больше внимания. Давайте посмотрим, что мы можем сделать в 2022 году, чтобы улучшить возможности прокрутки для наших пользователей. Читать далее

Подробнее
Фронтенд-новости №12. Вышел EcmaScript 2022, фавиконки в 2022, как будет выглядеть веб только с Chromium

Фронтенд-новости №12. Вышел EcmaScript 2022, фавиконки в 2022, как будет выглядеть веб только с Chromium

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 20–26 июня. 📔 EcmaScript 2022. 22 июня 2022 года 123 Генеральная ассамблея Ecma утвердила спецификацию языка ECMAScript 2022 — теперь он официально является стандартом. Внутри все новинки. 📔 Как создавать иконки сайтов в 2022 году — всё о favicon. Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы. 📔 Как будет выглядеть веб только с Chromium?.

Подробнее
Еще один способ использовать SVG в React. На этот раз удобный

Еще один способ использовать SVG в React. На этот раз удобный

SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги , и даже . Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG, необходимо вставлять SVG-изображения непосредственно в html-разметку. Хотя на самом деле есть еще один способ. И он удобный. Читать далее

Подробнее
Фронтенд-новости №11. JQuery живее всех живых, замена CAPTCHA, вариативные шрифты в Figma

Фронтенд-новости №11. JQuery живее всех живых, замена CAPTCHA, вариативные шрифты в Figma

Дайджест новостей и полезных статей из мира фронтенд-разработки c 13 по 19 июня. Главное на 20 июня Замените CAPTCHA на Private Access Tokens Исследователи: мы изучили 1 000 000 сайтов и видим, что jQuery самый популярный, а вы говорите, что не используете его. В Figma появились вариативные шрифты Другие новости о доступности, спецификациях, вёрстке, JavaScript и Node.js внутри дайджеста. Что там у вас ещё

Подробнее
[Перевод] Создание музыкального инструмента с помощью Web Audio API

[Перевод] Создание музыкального инструмента с помощью Web Audio API

Недавно я поехал в Техас и купил трехрядный диатонический баян. Диатонические аккордеоны популярны для множества различных типов народной музыки, которую обычно учат на слух. Это хорошо для меня, потому что я все равно не умею читать ноты. Аккордеон имеет 34 кнопки со стороны высоких частот и 12 кнопок со стороны басов. В отличие от фортепианного аккордеона, который имеет такое же логическое хроматическое расположение, как и фортепиано, у диатонического аккордеона просто набор кнопок, и

Подробнее
Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера

Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера

Перед нами часто возникает задача, сделать текст отзывчивым в зависимости от размера экрана устройства. Казалось бы, задача вполне тривиальна, и сходу можно назвать несколько вариантов её решения, не ломая голову, но всегда есть дополнительные условия, которые усложняют выполнение простых задач. В данной статье мы будем рассматривать решение небольшой задачи: как сделать максимально возможный размер шрифта динамического текста в его родительском контейнере. Или же, как впихнуть…

Подробнее
Фронтенд-новости №10. Опубликован HTTP/3, History API мёртв, WebContainers доступны в Firefox

Фронтенд-новости №10. Опубликован HTTP/3, History API мёртв, WebContainers доступны в Firefox

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 6–12 июня. А вот главные новости: HTTP/3 опубликован в качестве предлагаемого стандарта History API мёртв, да здравствует Navigation API WebContainers (способ запуска Node.js в браузере) официально поддерживаются в Firefox. Что там у вас ещё

Подробнее
Фронтенд-новости №9. Конец эпохи IE, 19 лет Wordpress, цветовые тренды 2022

Фронтенд-новости №9. Конец эпохи IE, 19 лет Wordpress, цветовые тренды 2022

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

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

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

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

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

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

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

Подробнее
Фронтенд-новости №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 и ему подобные сайты. Задача текущей статьи — дать

Подробнее