🔥 Awesome React — поддерживаемый список ресурсов, относящихся к экосистеме React.

Начав свою историю как коллекция из нескольких сотен пунктов, с тех пор её сократили до менее чем 200 за счет удаления всех устаревших проектов и сосредоточения внимания на самом главном.

🔜 Awesome React Components — еще одна отличная коллекция для добавления в закладки.

➡️ @tips_frontend

Что нужно знать о современном CSS: на заметку фронтенд-разработчику

Подборка современных дополнений к CSS: container queries, nesting, scroll-driven animations, view transitions, :has() и многие другие.

🔜 Читать

➡️ @tips_frontend

Знаете ли вы, почему мы не можем создавать новые инстансы из стрелочной функции в JavaScript? 👆

➡️ @tips_frontend

7 способов скрыть элемент с помощью CSS: на заметку фронтенд-разработчику

➡️ @tips_frontend

Простой кейс реализации паузы/старта видео в зависимости от состояния видимости страницы

🔜 Поиграть можно здесь

➡️ @tips_frontend

Не нужно ждать изменений от backend API. Мы можем легко переопределить ответ на любой запрос локально, чтобы продолжить работу с помощью Dev Tools

➡️ @tips_frontend

Адаптивные SVG на практике

Расширьте свои знания о работе с SVG, чтобы получить масштабируемый и адаптивный интерфейс.

▶️ Читать

➡️ @tips_frontend

🔄 Создание полосатого индикатора выполнения на CSS без использования какой-либо сторонней библиотеки: на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend

Простой и правильный способ отображения таймера с помощью tabular-nums: на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend

Простой способ добавить кастомные проверки форм с помощью JavaScript-метода setCustomValidity(): на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend

Мы не можем изменить цвет внешней SVG-иконки с помощью свойств fill/storke, но есть способ сделать это с помощью CSS mask

➡️ @tips_frontend

Использовать новые функции CSS и применять резервные стили в неподдерживаемых браузерах можно с помощью правила supports. То же самое можно сделать и в JavaScript

➡️ @tips_frontend

В Chrome Dev Tools мы можем сохранить любой элемент или объект в качестве глобальной переменной, что может быть очень удобно при отладке или быстром анализе данных

➡️ @tips_frontend

Как легко создать аккордеон без использования JavaScript: на заметку фронтенд-разработчику

➡️ @tips_frontend

Простой способ замены элемента в массиве на JavaScript: на заметку фронтенд-разработчику

➡️ @tips_frontend

67 странных приемов отладки, о которых ваш браузер не хочет, чтобы вы знали

Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.

Не самый свежий гайд, но он достоин того, чтобы остаться в ваших закладках.

🔜 Читать

➡️ @tips_frontend

➡️ @tips_frontend

Быстрый способ выбора элементов в Chrome Dev Tools: на заметку фронтенд-разработчику

➡️ @tips_frontend

Семантический способ выделить часть текста с помощью HTML-элемента <mark>: на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend

Легко предотвращайте цепочку прокрутки и улучшайте UX

Поиграть можно здесь

➡️ @tips_frontend

KeyUX — JavaScript-библиотека для улучшения UI управления клавиатурой веб-приложений.

Основная цель — не только обеспечение доступности (a11y), но и создание инструментов, где пользователи предпочитают использовать клавиатуру для управления.

🔜 Ключевые фичи:
🟡 Добавление горячих клавиш с помощью aria-keyshortcuts
🟡 Отображение состояния :active кнопки при нажатии горячей клавиши
🟡 Навигация с помощью стрелок клавиатуры в списках с role="menu"
🟡 Переход к следующему разделу по aria-controls и возврат с помощью Esc
🟡 Возможность пользователям переопределять горячие клавиши
🟡 Размер 2KB и отсутствие зависимостей
🟡 Совместимость с любыми фреймворками

👩‍💻 GitHub

➡️ @tips_frontend