Простой и правильный способ отображения таймера с помощью 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

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

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

➡️ @tips_frontend

Пример базовой анимации для маркеров/номеров HTML-списка с помощью псевдоэлемента ::marker

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

➡️ @tips_frontend

Простой способ использования свойства gap для макета flexbox

➡️ @tips_frontend

Network => Overview: простой способ фильтрации запросов по времени в Chrome Dev Tools

➡️ @tips_frontend

Подготовка к фронтенд-собесу: архитектурная часть

YouTube-блог, в котором разбираются ключевые принципы архитектуры систем на примере популярных приложений: Notion, Google Calendar/Sheet и другие.

📺 Смотреть

➡️ @tips_frontend

Совет по CSS 👆

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

➡️ @tips_frontend

Совет по HTML 🔝

Для улучшения UX, результатов поисковых систем и доступности используйте элемент <time> для отображения даты, времени или продолжительности на веб-страницах

➡️ @tips_frontend