This media is not supported in your browser
VIEW IN TELEGRAM
Простой и правильный способ отображения таймера с помощью
Поиграть можно здесь
➡️ @tips_frontend
tabular-nums
: на заметку фронтенд-разработчикуПоиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Простой способ добавить кастомные проверки форм с помощью JavaScript-метода
Поиграть можно здесь
➡️ @tips_frontend
setCustomValidity()
: на заметку фронтенд-разработчикуПоиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Мы не можем изменить цвет внешней SVG-иконки с помощью свойств
➡️ @tips_frontend
fill/storke
, но есть способ сделать это с помощью CSS maskPlease open Telegram to view this post
VIEW IN TELEGRAM
Использовать новые функции CSS и применять резервные стили в неподдерживаемых браузерах можно с помощью правила
➡️ @tips_frontend
supports
. То же самое можно сделать и в JavaScriptPlease open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
В Chrome Dev Tools мы можем сохранить любой элемент или объект в качестве глобальной переменной, что может быть очень удобно при отладке или быстром анализе данных
➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Как легко создать аккордеон без использования JavaScript: на заметку фронтенд-разработчику
➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Простой способ замены элемента в массиве на JavaScript: на заметку фронтенд-разработчику
➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
67 странных приемов отладки, о которых ваш браузер не хочет, чтобы вы знали
Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.
Не самый свежий гайд, но он достоин того, чтобы остаться в ваших закладках.
🔜 Читать
➡️ @tips_frontend
Подборка полезных, но неочевидных приемов, которые помогут максимально эффективно использовать отладчик вашего браузера.
Не самый свежий гайд, но он достоин того, чтобы остаться в ваших закладках.
Please open Telegram to view this post
VIEW IN TELEGRAM
Быстрый способ выбора элементов в Chrome Dev Tools: на заметку фронтенд-разработчику
➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Семантический способ выделить часть текста с помощью HTML-элемента
Поиграть можно здесь
➡️ @tips_frontend
<mark>
: на заметку фронтенд-разработчикуПоиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
KeyUX — JavaScript-библиотека для улучшения UI управления клавиатурой веб-приложений.
Основная цель — не только обеспечение доступности (a11y), но и создание инструментов, где пользователи предпочитают использовать клавиатуру для управления.
🔜 Ключевые фичи:
🟡 Добавление горячих клавиш с помощью🟡 Отображение состояния
🟡 Навигация с помощью стрелок клавиатуры в списках с🟡 Переход к следующему разделу по
🟡 Возможность пользователям переопределять горячие клавиши
🟡 Размер 2KB и отсутствие зависимостей
🟡 Совместимость с любыми фреймворками
👩💻 GitHub
➡️ @tips_frontend
Основная цель — не только обеспечение доступности (a11y), но и создание инструментов, где пользователи предпочитают использовать клавиатуру для управления.
aria-keyshortcuts
:active
кнопки при нажатии горячей клавиши role="menu"
aria-controls
и возврат с помощью EscPlease open Telegram to view this post
VIEW IN TELEGRAM
Самый простой способ вертикального центрирования контента в макете блока: на заметку фронтенд-разработчику
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Пример базовой анимации для маркеров/номеров HTML-списка с помощью псевдоэлемента
Поиграть можно здесь
➡️ @tips_frontend
::marker
Поиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Network => Overview: простой способ фильтрации запросов по времени в Chrome Dev Tools
➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Подготовка к фронтенд-собесу: архитектурная часть
YouTube-блог, в котором разбираются ключевые принципы архитектуры систем на примере популярных приложений: Notion, Google Calendar/Sheet и другие.
📺 Смотреть
➡️ @tips_frontend
YouTube-блог, в котором разбираются ключевые принципы архитектуры систем на примере популярных приложений: Notion, Google Calendar/Sheet и другие.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 👆
Простое исправление, чтобы избежать этой распространенной проблемы случайного выбора флажка
➡️ @tips_frontend
Простое исправление, чтобы избежать этой распространенной проблемы случайного выбора флажка
Please open Telegram to view this post
VIEW IN TELEGRAM
Совет по HTML 🔝
Для улучшения UX, результатов поисковых систем и доступности используйте элемент <time> для отображения даты, времени или продолжительности на веб-страницах
➡️ @tips_frontend
Для улучшения UX, результатов поисковых систем и доступности используйте элемент <time> для отображения даты, времени или продолжительности на веб-страницах
Please open Telegram to view this post
VIEW IN TELEGRAM