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

SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги <img>, <object> и даже <iframe>. Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы…

[Перевод] Как создавать иконки сайтов в 2022 году — всё о favicon

Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы. Фронтенд-разработчики сейчас вынуждены создавать более 20 PNG-файлов, чтобы отобразить крошечный логотип веб-сайта на вкладке браузе…

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

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

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

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

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

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

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

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

6 советов по удобным интерфейсам за июнь

Хабр, привет!Сегодня мы поговорим о том, зачем надо отделять код страны от основной части телефона, зачем сохранять фокус в поле ввода после валидации, какие проблемы могут вызвать моушен анимации, как связан Esc и выпадающие списки, как фокус ускоряет…

Вавилонское сайтотворение: как фронтендеры и дизайнеры понимают друг друга

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

Как убрать пустой тег Option в Select

В данной экспресс статье описывается то, как сделать меню выбора Select пустым по умолчанию и скрыть пустой тег Option в меню выбора опций (тот что подсвечен серым) Читать далее…

Почему figcaption не заменяет alt

В HTML4 не было способа семантически разметить HTML, чтобы сохранить связь между изображением и его подписью. В HTML5 нам дали такую возможность с помощью элементов <figure> и <figcaption>.Давайте для начала определимся с терминами. alt — а…