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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Атрибут aria-label — доступность без лишней разметки!

Это атрибут для screen reader’ов, который задает текстовое описание элемента для пользователей с нарушениями зрения.

Есть теги и роли, для которых его точно нельзя использовать:
<caption> и роль caption.
<code> и роль code.
<dd> и роль definition.
<dt>, <dfn> и роль term.
<del> и роль deletion.
<em> и роль emphasis.
<ins> и роль insertion.
<mark> и роль mark.
и др.


Когда у элемента должно быть видимое для всех имя, используйте aria-labelledby.

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
18👍14🔥5👎1
👩‍💻 Мини‑трюк CSS — фиксируем шапку таблицы без JS!

В этом посте покажем, как зафиксировать заголовок таблицы при прокрутке — просто и надёжно, без JavaScript и библиотек.

Как работает:
С помощью position: sticky и top: 0 заставляем <thead> залипать к верхней границе.

Добавляем background, чтобы шапка не сливалась при скролле.

Ограничиваем высоту tbody и включаем overflow-y: auto — получаем прокручиваемое тело таблицы.


Это идеально подойдет для админок, дашбордов, таблиц со сводками и логами.

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍228🤝6😁1
📱 Разбираем ключевые слова JavaScript!

В первой части мы рассмотрели основы: переменные, this, async, return. Во второй — фокус на управлении потоком: условия, обработка ошибок, классы и наследование. Эти конструкции лежат в основе логики приложений, контроллеров и архитектуры компонентов.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2720👍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🔥85
📱 Группа чекбоксов с "Выделить всё"

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

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

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

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


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

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

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

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25🤝169👍3