Code Ready | Frontend
20.1K subscribers
687 photos
307 videos
17 files
456 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📱 Группа чекбоксов с "Выделить всё"

Привет! В этом гайде реализуем интерактивную группу чекбоксов с одним главным флажком — он выделяет или снимает все остальные.

Ключевые моменты:
• HTML: простая и читаемая структура.

• CSS: контрастный стиль, мягкие границы и hover.

• JS: лаконичная логика управления группой.


Полезно для фильтров, таблиц или форм.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2313🔥7🤝3
👍 Нашёл отличную статью на Хабре: «Быстрый Frontend в 2025: почему RTK Query, Tailwind и Vite убивают классические подходы»

В статье:
• Установите и настроите Vite‑сборку для React‑проекта;
• Внедрите RTK Query для удобного и эффективного взаимодействия с API;
• Перейдёте на Tailwind, отказавшись от CSS;
• Свяжете все три технологии, чтобы собрать супер‑отзывчивый, быстрый и минимальный фронтенд‑стек.


🔊 Советую продолжить чтение на Habr!


📣 Code Ready | #статья
Please open Telegram to view this post
VIEW IN TELEGRAM
👍119🔥7🤝1
Сохраняем и восстанавливаем scroll

Когда пользователь возвращается назад или обновляет страницу, важно вернуть его на ту же позицию. Вот как это сделать — универсально, без фреймворков и библиотек.

Сохраняем позицию при уходе:
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)


🔥 Особенно может быть полезно в блогах, каталогах или длинных документах.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
21👍13🔥13
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Работаете с SQL и устали прыгать между рабочими пространствами?

SQLite3 Editor — минималистичный, но мощный плагин для VS Code, который позволяет прямо внутри редактора создавать, просматривать и редактировать SQL-базы.

Идеален для быстрой отладки, прототипов и локальной аналитики.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
22👍10🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Разберем атрибут aria-hidden — для скрытия элементов от вспомогательных технологий!

Глобальное состояние из WAI-ARIA в котором элемент скрыт от вспомогательных технологий, но виден всем остальным пользователям.

Как пишется:
false — элемент виден вспомогательным технологиям.

true — элемент скрыт от вспомогательных технологий.

undefined — браузер сам определяет скрыт элемент или нет в зависимости от его стилей и видимости на странице.


Типичные ситуации: избыточный или дублирующийся текст,
декоративный контент, временно скрытые или свёрнутые элементы (выпадающее меню).

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2011🤝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
🔥106🤝6
📱 Ключевые методы для работы с DOM-элементами!

Шпаргалка по базовым, но важным приемам: выбор элементов, управление классами, атрибутами и содержимым. Подходит для начальной и регулярной работы с интерфейсами, включая динамическое обновление DOM и настройку визуального состояния элементов.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24🤝169👍3
📱 Раскрывающийся блок FAQ без библиотек!

Привет! В этом гайде соберём аккордеон для часто задаваемых вопросов — лёгкий и доступный.

Ключевые моменты:
• HTML: семантическая разметка и aria-атрибуты для доступности.

• CSS: плавное открытие/закрытие блоков без прыжков.

• JavaScript: простой toggle и синхронизация с aria-expanded.


Полезный UI-паттерн, который улучшает читаемость и делает интерфейс чище.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2410🤝8👍5