Как легко создать аккордеон без использования 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

CSS-свойство shape-outside в действии: на заметку фронтенд-разработчику

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

➡️ @tips_frontend

20 методов сокращения JavaScript для повышения эффективности

Сокращение кода — это компромисс между производительностью и удобочитаемостью.

Читайте подробнее

➡️ @tips_frontend

Одно правило CSS для отображения * у всех обязательных меток полей: на заметку фронтенд-разработчику

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

➡️ @tips_frontend

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

➡️ @tips_frontend

Простой способ анимации иконки при нажатии/фокусе: на заметку фронтенд-разработчику

➡️ @tips_frontend

HTML-элемент <dialog> в действии, или Как просто создать модальное окно

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

➡️ @tips_frontend