This media is not supported in your browser
VIEW IN TELEGRAM
Это атрибут для screen reader’ов, который задает текстовое описание элемента для пользователей с нарушениями зрения.
Есть теги и роли, для которых его точно нельзя использовать:
<caption> и роль caption.
<code> и роль code.
<dd> и роль definition.
<dt>, <dfn> и роль term.
<del> и роль deletion.
<em> и роль emphasis.
<ins> и роль insertion.
<mark> и роль mark.
и др.
Когда у элемента должно быть видимое для всех имя, используйте
aria-labelledby
.Please open Telegram to view this post
VIEW IN TELEGRAM
❤18👍14🔥5👎1
В этом посте покажем, как зафиксировать заголовок таблицы при прокрутке — просто и надёжно, без JavaScript и библиотек.
Как работает:
• С помощью position: sticky и top: 0 заставляем <thead> залипать к верхней границе.
• Добавляем background, чтобы шапка не сливалась при скролле.
• Ограничиваем высоту tbody и включаем overflow-y: auto — получаем прокручиваемое тело таблицы.
Это идеально подойдет для админок, дашбордов, таблиц со сводками и логами.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤8🤝6😁1
В первой части
мы рассмотрели основы: переменные, this, async, return. Во второй — фокус на управлении потоком: условия, обработка ошибок, классы и наследование. Эти конструкции лежат в основе логики приложений, контроллеров и архитектуры компонентов.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27❤20👍9🤝7
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Battle — это интерактивная платформа, где разработчики соревнуются в решении задач на минимизацию CSS-кода, создавая визуальные элементы с наименьшим количеством символов.
📌 Оставляю ссылочку: cssbattle.dev
📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥8❤5
Привет! В этом гайде реализуем интерактивную группу чекбоксов с одним главным флажком — он выделяет или снимает все остальные.
Ключевые моменты:
• HTML: простая и читаемая структура.
• CSS: контрастный стиль, мягкие границы и hover.
• JS: лаконичная логика управления группой.
Полезно для фильтров, таблиц или форм.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤13🔥7🤝3
В статье:
• Установите и настроите Vite‑сборку для React‑проекта;
• Внедрите RTK Query для удобного и эффективного взаимодействия с API;
• Перейдёте на Tailwind, отказавшись от CSS;
• Свяжете все три технологии, чтобы собрать супер‑отзывчивый, быстрый и минимальный фронтенд‑стек.
🔊 Советую продолжить чтение на Habr!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤9🔥7🤝1
Сохраняем и восстанавливаем scroll
Когда пользователь возвращается назад или обновляет страницу, важно вернуть его на ту же позицию. Вот как это сделать — универсально, без фреймворков и библиотек.
Сохраняем позицию при уходе:
Восстанавливаем при загрузке:
Работает даже после полной перезагрузки и закрытия вкладки. Для SPA можно подвязать на
Чтобы запомнить scroll на каждой странице отдельно:
🔥 Особенно может быть полезно в блогах, каталогах или длинных документах.
📣 Code Ready | #практика
Когда пользователь возвращается назад или обновляет страницу, важно вернуть его на ту же позицию. Вот как это сделать — универсально, без фреймворков и библиотек.
Сохраняем позицию при уходе:
window.addEventListener("beforeunload", () => {
localStorage.setItem("scrollY", window.scrollY);
});
Восстанавливаем при загрузке:
window.addEventListener("load", () => {
const y = +localStorage.getItem("scrollY") || 0;
window.scrollTo(0, y);
});
Работает даже после полной перезагрузки и закрытия вкладки. Для SPA можно подвязать на
pushState
и popstate
.Чтобы запомнить scroll на каждой странице отдельно:
const key = `scroll-${location.pathname}`;
localStorage.setItem(key, window.scrollY);
// и потом: scrollTo(0, +localStorage.getItem(key) || 0)
🔥 Особенно может быть полезно в блогах, каталогах или длинных документах.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤21👍14🔥13
This media is not supported in your browser
VIEW IN TELEGRAM
SQLite3 Editor — минималистичный, но мощный плагин для VS Code, который позволяет прямо внутри редактора создавать, просматривать и редактировать SQL-базы.
Идеален для быстрой отладки, прототипов и локальной аналитики.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22👍11🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Глобальное состояние из
WAI-ARIA
в котором элемент скрыт от вспомогательных технологий, но виден всем остальным пользователям.Как пишется:
• false — элемент виден вспомогательным технологиям.
• true — элемент скрыт от вспомогательных технологий.
• undefined — браузер сам определяет скрыт элемент или нет в зависимости от его стилей и видимости на странице.
Типичные ситуации: избыточный или дублирующийся текст,
декоративный контент, временно скрытые или свёрнутые элементы (выпадающее меню).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤11🤝5👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Web-Standards — база знаний и новостей от фронтенд‑комьюнити. Актуальные статьи, переводы, подкасты и события — всё, чтобы писать современный HTML, CSS и JS.
📌 Оставляю ссылочку: web-standards.ru
📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13❤6🤝6
Шпаргалка по базовым, но важным приемам: выбор элементов, управление классами, атрибутами и содержимым. Подходит для начальной и регулярной работы с интерфейсами, включая динамическое обновление DOM и настройку визуального состояния элементов.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25🤝16❤9👍3