Привет! В этом гайде реализуем интерактивную группу чекбоксов с одним главным флажком — он выделяет или снимает все остальные.
Ключевые моменты:
• HTML: простая и читаемая структура.
• CSS: контрастный стиль, мягкие границы и hover.
• JS: лаконичная логика управления группой.
Полезно для фильтров, таблиц или форм.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤13🔥7🤝3
В статье:
• Установите и настроите Vite‑сборку для React‑проекта;
• Внедрите RTK Query для удобного и эффективного взаимодействия с API;
• Перейдёте на Tailwind, отказавшись от CSS;
• Свяжете все три технологии, чтобы собрать супер‑отзывчивый, быстрый и минимальный фронтенд‑стек.
🔊 Советую продолжить чтение на Habr!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤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👍13🔥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👍10🔥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
👍20❤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
🔥10❤6🤝6
Шпаргалка по базовым, но важным приемам: выбор элементов, управление классами, атрибутами и содержимым. Подходит для начальной и регулярной работы с интерфейсами, включая динамическое обновление DOM и настройку визуального состояния элементов.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24🤝16❤9👍3
Привет! В этом гайде соберём аккордеон для часто задаваемых вопросов — лёгкий и доступный.
Ключевые моменты:
• HTML: семантическая разметка и aria-атрибуты для доступности.
• CSS: плавное открытие/закрытие блоков без прыжков.
• JavaScript: простой toggle и синхронизация с aria-expanded.
Полезный UI-паттерн, который улучшает читаемость и делает интерфейс чище.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24❤10🤝8👍5