Code Ready | Frontend
رفتن به کانال در Telegram
Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Cотрудничество: @energy_c РКН: https://clck.ru/3NJCKs
نمایش بیشتر📈 تحلیل کانال تلگرام Code Ready | Frontend
کانال Code Ready | Frontend (@code_ready) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 21 626 مشترک است و جایگاه 5 952 را در دسته فناوری و برنامهها و رتبه 30 187 را در منطقه روسيا دارد.
📊 شاخصهای مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 21 626 مشترک جذب کرده است.
بر اساس آخرین دادهها در تاریخ 15 سپتامبر, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر 94 و در ۲۴ ساعت گذشته برابر -13 بوده و همچنان دسترسی گستردهای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 8.06% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 4.40% واکنش نسبت به کل مشترکان کسب میکند.
- دسترسی پستها: هر پست به طور میانگین 1 743 بازدید دریافت میکند. در اولین روز معمولاً 953 بازدید جمعآوری میشود.
- واکنشها و تعامل: مخاطبان بهطور فعال حمایت میکنند؛ میانگین واکنش به هر پست 25 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند css, браузер, интерфейс, загрузка, api تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاههای شخصی توصیف میکند:
“Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!
Cотрудничество: @energy_c
РКН: https://clck.ru/3NJCKs”
به لطف بهروزرسانیهای پرتکرار (آخرین داده در تاریخ 16 سپتامبر, 2026)، کانال همواره بهروز و دارای دسترسی بالاست. تحلیلها نشان میدهد مخاطبان بهطور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامهها تبدیل کردهاند.
21 626
مشترکین
-1324 ساعت
-347 روز
+9430 روز
در حال بارگیری داده...
کانالهای مشابه
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
سپتامبر '26
سپتامبر '26
+132
در 37 کانالها
اوت '26
+587
در 299 کانالها
Get PRO
ژوئیه '26
+63
در 38 کانالها
Get PRO
ژوئن '26
+123
در 19 کانالها
Get PRO
مه '26
+159
در 31 کانالها
Get PRO
آوریل '26
+90
در 31 کانالها
Get PRO
مارس '26
+234
در 68 کانالها
Get PRO
فوریه '26
+220
در 22 کانالها
Get PRO
ژانویه '26
+1 062
در 125 کانالها
Get PRO
دسامبر '25
+433
در 124 کانالها
Get PRO
نوامبر '25
+1 202
در 266 کانالها
Get PRO
اکتبر '25
+733
در 100 کانالها
Get PRO
سپتامبر '25
+1 126
در 108 کانالها
Get PRO
اوت '25
+1 117
در 240 کانالها
Get PRO
ژوئیه '25
+897
در 55 کانالها
Get PRO
ژوئن '25
+1 017
در 87 کانالها
Get PRO
مه '25
+2 027
در 323 کانالها
Get PRO
آوریل '25
+117
در 1 کانالها
Get PRO
مارس '25
+130
در 2 کانالها
Get PRO
فوریه '25
+125
در 0 کانالها
Get PRO
ژانویه '25
+130
در 3 کانالها
Get PRO
دسامبر '24
+234
در 5 کانالها
Get PRO
نوامبر '24
+259
در 7 کانالها
Get PRO
اکتبر '24
+2 497
در 247 کانالها
Get PRO
سپتامبر '24
+3 493
در 269 کانالها
Get PRO
اوت '24
+337
در 2 کانالها
Get PRO
ژوئیه '24
+140
در 1 کانالها
Get PRO
ژوئن '24
+793
در 7 کانالها
Get PRO
مه '24
+2 442
در 26 کانالها
Get PRO
آوریل '24
+2 945
در 37 کانالها
Get PRO
مارس '24
+1 802
در 42 کانالها
Get PRO
فوریه '24
+1 591
در 37 کانالها
Get PRO
ژانویه '24
+4 288
در 28 کانالها
Get PRO
دسامبر '23
+795
در 23 کانالها
Get PRO
نوامبر '23
+693
در 31 کانالها
Get PRO
اکتبر '23
+443
در 12 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 16 سپتامبر | +4 | |||
| 15 سپتامبر | +4 | |||
| 14 سپتامبر | +3 | |||
| 13 سپتامبر | +4 | |||
| 12 سپتامبر | +5 | |||
| 11 سپتامبر | +4 | |||
| 10 سپتامبر | +13 | |||
| 09 سپتامبر | +19 | |||
| 08 سپتامبر | +37 | |||
| 07 سپتامبر | +20 | |||
| 06 سپتامبر | +2 | |||
| 05 سپتامبر | +4 | |||
| 04 سپتامبر | +4 | |||
| 03 سپتامبر | +5 | |||
| 02 سپتامبر | +3 | |||
| 01 سپتامبر | +1 |
پستهای کانال
+4
📱 classList — управление CSS-классами!
Разбираем classList и основные методы DOMTokenList, с помощью которых можно добавлять, удалять, переключать и заменять CSS-классы, проверять их наличие, получать классы по позиции и перебирать коллекцию. Используется для управления состояниями элементов, переключения стилей и реализации динамической UI-логики без ручной работы с className.
📣 Code Ready | #шпора| 2 | requestSubmit() — программная отправка формы с сохранением нативного поведения!
В HTML-формах существует два разных подхода к программному запуску отправки. Метод submit() выполняет непосредственную отправку формы, но отличается от пользовательского сценария: он не запускает constraint validation и не генерирует событие submit.
const form = document.querySelector('form');
form.submit();
Если форма содержит обработчик submit, вызванный через submit(), он не будет выполнен. Это принципиальное отличие от реального действия пользователя через submit-кнопку.
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log('Form submitted');
});
form.submit();
Для случаев, когда отправка инициируется js, но должна сохранить стандартную модель поведения HTML-форм, используется метод requestSubmit().
form.requestSubmit();
requestSubmit() запускает стандартный алгоритм отправки формы: браузер выполняет встроенную constraint validation, а после успешной проверки генерирует событие submit.
Рассмотрим форму с обязательным email-полем. Если значение отсутствует или не проходит проверку типа email, обработчик submit вызван не будет, поскольку браузер остановит процесс на этапе валидации.
<form id="profile">
<input
name="email"
type="email"
required
>
<button type="submit">
Save
</button>
</form>
После регистрации обработчика отправку можно инициировать программно, сохранив обычное поведение формы.
const form = document.querySelector('#profile');
form.addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(form);
console.log(Object.fromEntries(data));
});
form.requestSubmit();
В отличие от submit(), метод requestSubmit() также позволяет передать конкретную submit-кнопку. Это важно для форм, где разные кнопки отправки имеют собственные параметры или меняют поведение отправки.
const saveButton = form.querySelector('.save');
form.requestSubmit(saveButton);
Переданная кнопка должна быть submit-элементом, связанным с этой формой. В этом случае учитываются такие параметры кнопки, как name, value, formaction, formenctype, formmethod и другие submit-настройки.
<form id="actions">
<input name="title" value="Example">
<button
class="save"
type="submit"
name="action"
value="save"
>
Save
</button>
</form>
В реальном приложении выбор конкретной submit-кнопки позволяет управлять поведением одной формы из разных сценариев отправки, сохраняя стандартную обработку браузера.
const form = document.querySelector('#actions');
const saveButton = form.querySelector('.save');
form.requestSubmit(saveButton);
На практике requestSubmit() применяется, когда действие пользователя необходимо инициировать из js, но при этом требуется сохранить полный жизненный цикл HTML-формы: валидацию браузера, событие submit и стандартную обработку submit-кнопки.
🔥 form.submit() и form.requestSubmit() решают разные задачи. Первый вариант выполняет прямую отправку без validation и события submit, второй запускает полноценный процесс отправки, максимально близкий к пользовательскому взаимодействию с формой. Если программная отправка должна работать так же, как обычное нажатие submit-кнопки, используйте requestSubmit().
📣 Code Ready | #практика | 832 |
| 3 |  🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг!
[+ разбор 50 сложных вопросов в подарок ]
17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика!
Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер,
Как это будет:
📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе
📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью
📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ
Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы
И ты можешь посмотреть его бесплатно 🔥
Только завтра, в прямом эфире!
🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥
Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot
Реклама.
О рекламодателе. | 934 |
| 4 | Element.scrollIntoView() — управление прокруткой без ручной работы с координатами.
scrollIntoView() в основном используют как простой переход к элементу, но в сложных интерфейсах важно понимать, какие scroll-контейнеры браузер будет изменять и как управлять областью воздействия.
По умолчанию метод пытается сделать элемент видимым во всех подходящих прокручиваемых предках — включая вложенные scroll-контейнеры и viewport, если это необходимо.
element.scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
В новых реализациях браузеров появился параметр container, который позволяет ограничить область прокрутки.
element.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
container: 'nearest'
});
container: 'nearest' ограничивает область прокрутки ближайшим scroll-контейнером вместо изменения всех доступных областей прокрутки.
Это особенно полезно для компонентов с вложенной прокруткой: списков, панелей, модальных окон и навигационных меню.
container — относительно новый параметр с ограниченной поддержкой браузерами. Перед использованием в продакшн стоит проверить поддержку. В браузерах без поддержки параметр может быть проигнорирован.
А также важно не путать два разных nearest: container: 'nearest' отвечает за какая область прокрутки может изменяться.
block: 'nearest' отвечает за как элемент будет позиционироваться внутри видимой области.
activeItem.scrollIntoView({
block: 'nearest',
inline: 'nearest'
});
block: 'nearest' использует стратегию минимального смещения. В отличие от start или center, браузер не пытается принудительно установить элемент в определённую позицию, а выполняет только необходимую прокрутку, чтобы элемент стал видимым. block обычно управляет вертикальной осью, а inline — горизонтальной.
Во многих случаях для управления расстоянием до края viewport или scroll-контейнера не требуется вручную считать координаты через getBoundingClientRect(). Эти правила можно описать через CSS:
.item {
scroll-margin-block: 16px;
}
.list {
overflow-y: auto;
scroll-padding-block: 16px;
}
scroll-margin задаёт внешний отступ для самого элемента при прокрутке.
scroll-padding определяет внутреннюю область видимости scroll-контейнера, внутри которого выполняется прокрутка. Это позволяет учитывать фиксированные панели, sticky-header и другие элементы интерфейса декларативно. Пример:
section.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
Теперь браузер учитывает заданные CSS-правила при вычислении конечной позиции.
🔥 В результате scrollIntoView() становится инструментом не только для простых якорных переходов, а для построения сложной навигации внутри интерфейсов с большим количеством вложенных scroll-областей.
📣 Code Ready | #практика | 811 |
| 5 |  Ищем новичков во frontend-разработке и вёрстке сайтов.
Айтилогия запускает бесплатное обучение, где будет:
1. Практика на реальном заказе ценой до 10 000₽.
2. Разбор работ куратором.
3. Задачи от Fullstack-разработчика с 12-летним опытом.
4. Именной сертификат.
И главное — ты почувствуешь уверенность.
Потому что увидишь, что выполнить заказ на frontend-проект тебе по силам.
👉 Приходи на бесплатное обучение и зови с собой друзей
🔥 С 2019 Айтилогия стабильно помогает с обучением, практикой, зарабатывать на фрилансе и проходить собеседования. | 1 044 |
| 6 |  👩💻 Адаптирует картинки под разные устройства и поддерживаемые форматы!
Тег <picture> позволяет браузеру выбирать подходящую версию изображения в зависимости от размера экрана, поддерживаемого формата или других условий.
Внутри <picture> обычно размещают:
• <source> — задаёт альтернативные версии изображения;
• srcset — указывает файл изображения;
• media — определяет условие выбора, например ширину экрана;
• type — указывает MIME-тип формата, например image/avif;
• <img> — служит основным или резервным вариантом изображения.
Браузер анализирует каждый тег <source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги не анализируются. Если тег <picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>.
📣 Code Ready | #атрибут | 1 125 |
| 7 |  Не давай стилям компонента протекать во вложенные компоненты!
Частая проблема большого UI: стилизуем весь контент внутри компонента, а потом эти правила неожиданно задевают другой компонент, вложенный внутрь.
<article class="article">
<p>Текст статьи</p>
<div class="widget"><p>Текст виджета</p></div>
</article>
Обычный селектор по вложенности затронет оба <p>:
.article p {
margin-block: 1em;
}
С @scope можно задать не только начало области, но и место, перед которым действие правил заканчивается.
@scope (.article) to (.widget) {
p { margin-block: 1em; }
}
Первый <p> получит стиль, а <p> внутри .widget — уже нет. .widget здесь является нижней границей scope, поэтому элементы внутри неё исключаются из этой области.
Это особенно удобно для CMS-контента, markdown, rich-text и дизайн-систем, где внутрь одного компонента могут попадать другие независимые компоненты.
И не приходится усложнять селекторы:
.article > p,
.article > section > p {
/* попытка описать структуру DOM */
}
Вместо описания всей структуры мы задаём архитектурную границу:
@scope (.content) to (.component) {
a { text-decoration: underline; }
}
🔥 @scope специально предназначен для ограничения селекторов конкретным DOM-поддеревом без наращивания специфичности и жёсткой привязки CSS к структуре разметки.
📣 Code Ready | #совет | 1 196 |
| 8 |  Прокачать навыки вёрстки и фронтенда можно в телеграм!
В этом канале опытный верстальщик делится структурированными уроками и различными материалами по HTML, CSS, JS, а также советами по заработку на фрилансе.
Канал будет полезен:
1. начинающим и опытным верстальщикам
2. программистам
3. веб-дизайнерам
Научиться и зарабатывать на верстке:
@free_html_lessons | 1 228 |
| 9 |  👨💻 MilaNick materials — большая подборка материалов для frontend-разработчиков!
В репозитории собраны полезные ресурсы по веб-разработке: HTML, CSS, JavaScript, React, Node.js, Webpack, Git, тестирование и архитектура frontend-приложений. Есть статьи, курсы, видео, книги, разборы задач и практические материалы по асинхронности, ООП, алгоритмам, паттернам проектирования и созданию реальных проектов.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 1 333 |
| 10 |  👩💻 Удобный тег, объединяющий элементы навигации по сайту!
В контейнер <nav> помещаются основные ссылки, по которым пользователь сможет быстро перейти на нужный раздел сайта.
В <nav> обычно размещают:
• главное меню сайта;
• навигацию по разделам;
• оглавление статьи или документа;
• ссылки для перехода между связанными страницами.
При этом не каждую группу ссылок стоит помещать в <nav>. Тег предназначен прежде всего для основных навигационных блоков, а обычный набор вспомогательных ссылок может оставаться без него.
📣 Code Ready | #атрибут | 1 790 |
| 11 |  +4📱 AbortController — отмена запросов и асинхронных операций!
Разбираем AbortController и AbortSignal, с помощью которых можно отменять fetch-запросы и другие поддерживаемые операции, проверять состояние и причину отмены, прерывать собственную асинхронную логику, задавать таймауты и объединять несколько сигналов отмены. Используется для управления жизненным циклом операций, предотвращения лишней работы и корректной очистки ресурсов.
📣 Code Ready | #шпора | 1 884 |
| 12 | Почему change не всегда подходит для отслеживания изменений в input!
При работе с формами часто пытаются отслеживать ввод через событие change:
input.addEventListener('change', event => {
console.log(event.target.value);
});
Но для текстовых полей это не всегда правильный вариант. change срабатывает не при каждом изменении текста, а после того, как пользователь изменил значение и завершил редактирование, например покинул поле.
Если интерфейс должен реагировать непосредственно во время ввода, используется событие input:
input.addEventListener('input', event => {
console.log(event.target.value);
});
Теперь обработчик вызывается при каждом изменении значения:
J
Ja
Jav
Java
При этом input — это не просто реакция на нажатие клавиш. Событие возникает и при других действиях пользователя, например при вставке текста, удалении, вставке через контекстное меню или перемещении текста через drag & drop.
Например, динамический поиск обычно строят так:
search.addEventListener('input', event => {
const query = event.target.value.trim();
filterItems(query);
});
Частая ошибка — использовать keyup как замену input:
input.addEventListener('keyup', handler);
Но эти события решают разные задачи. keyup реагирует только на отпускание клавиши, поэтому он не поймает вставку мышью, автозаполнение браузера и другие изменения значения без клавиатуры.
У события input есть дополнительная информация через InputEvent:
input.addEventListener('input', event => {
console.log(event.inputType);
});
Например, можно определить, было ли действие вставкой текста, удалением символа или вставкой из буфера обмена.
Если обработчик input запускает тяжёлую операцию или запрос к API, обычно используют debounce, чтобы не выполнять действие после каждого символа:
search.addEventListener(
'input',
debounce(event => {
fetchResults(event.target.value);
}, 300)
);
При этом у change остаются свои правильные сценарии. Например, для <select> он хорошо подходит, потому что важен момент выбора нового значения:
select.addEventListener('change', event => {
updateLanguage(event.target.value);
});
Важный нюанс: программное изменение value само по себе не создаёт событие input:
input.value = 'JavaScript';
Браузер отличает изменение через код от реального пользовательского ввода. Если приложению нужно уведомить другие части системы, событие можно вызвать отдельно:
input.value = 'JavaScript';
input.dispatchEvent(
new Event('input', { bubbles: true })
);
Но такое событие будет синтетическим (isTrusted === false), а не настоящим действием пользователя.
В сложных редакторах также учитывают IME-ввод, например при работе с китайской, японской или корейской раскладкой. Во время композиции можно проверить:
input.addEventListener('input', event => {
if (event.isComposing) {
return;
}
processValue(event.target.value);
});
🔥 Главное правило простое: если нужно реагировать на процесс редактирования в реальном времени — используйте input. Если нужно получить факт завершённого изменения значения — подходит change. Если нужно отслеживать только действия клавиатуры — используйте keyup, понимая его ограничения.
📣 Code Ready | #практика | 1 384 |
| 13 |  Коротко и по работному делу!
— Море IT & Digital вакансий на удалёнку
— Каждый день
— Прямые контакты HR
Подписаться на канал 🤘 | 1 006 |
| 14 | Разбираем insertAdjacentHTML() — вставляем HTML без повторного парсинга существующего содержимого!
Для добавления разметки в элемент иногда используют innerHTML +=:
list.innerHTML += '<li>Новый элемент</li>';
Но это не точечная вставка. Браузер получает текущее содержимое как строку, добавляет новую разметку и снова устанавливает innerHTML.
В результате существующие дочерние DOM-узлы могут быть заменены новыми:
const button = list.querySelector('button');
list.innerHTML += '<li>Новый</li>';
console.log(
list.querySelector('button') === button
);
// false
Для вставки HTML без повторного парсинга существующего содержимого есть insertAdjacentHTML():
const button = list.querySelector('button');
list.insertAdjacentHTML(
'beforeend',
'<li>Новый</li>'
);
console.log(
list.querySelector('button') === button
);
// true
Метод принимает позицию вставки и HTML-строку:
beforebegin
afterbegin
beforeend
afterend
Например, вставка первым дочерним элементом:
list.insertAdjacentHTML(
'afterbegin',
'<li>Первый</li>'
);
А afterend вставляет разметку после самого элемента:
list.insertAdjacentHTML(
'afterend',
'<p>После списка</p>'
);
beforebegin и afterend работают относительно родительского элемента, поэтому целевой элемент должен иметь родителя.
Что важно: insertAdjacentHTML() передает строку HTML-парсеру и не выполняет санитизацию. Передача недоверенного HTML создает риск XSS. Для обычного текста используйте textContent или insertAdjacentText(), а недоверенный HTML необходимо корректно санитизировать.
🔥 В отличие от innerHTML +=, insertAdjacentHTML() позволяет вставить новый HTML-фрагмент в нужную позицию, не заменяя уже существующие DOM-узлы.
📣 Code Ready | #практика | 1 297 |
| 15 |  «Мы уже внедряем ИИ» обычно означает, что не внедряете
Потому что «внедряем» на практике — это половина команды платит за подписку и генерит куски кода в чате. Это не процесс, это личная привычка каждого. Отсюда и результат: скорость выросла у двоих, ревью подорожало у всех.
Процесс начинается там, где есть повторяемый цикл: спецификация → план → исполнение агентом → проверка по критериям. Одинаковый у всех, воспроизводимый, встраиваемый в Git-флоу.
В четверг Хекслет показывает такой цикл на живом примере — собирают фронтенд мессенджера к готовому бэкенду через OpenSpec и OpenCode. Полтора часа, бесплатно, ведёт Валентин Исипчук из финтех-стартапа Cyoda.
Как минимум будет что обсудить с командой на следующем синке.
10 сентября, 19:00 МСК → Зарегистрироваться: 🔗 https://tglink.io/76987c7057db38?erid=2W5zFGC6nXB
ㅤ
ㅤ
#реклама
О рекламодателе | 926 |
| 16 |  ❤️ Супер интересная статья попалась на Хабре: «CSS задачи на 200 IQ»!
В этой статье:
• Узнаете, как сделать аналог fixed-элемента внутри прокручиваемого контейнера;
• Разберёте необычный способ передачи параметров в SVG через CSS;
• Посмотрите, как scroll-driven animations помогают решить сложную задачу с автоматическим размером элементов.
🔊 Продолжай читать на Habr!
📣 Code Ready | #статья | 1 493 |
| 17 |  Передавай простые значения из HTML прямо в CSS!
Раньше attr() практически ассоциировался только с content. Расширенный синтаксис умеет читать атрибут как конкретный CSS-тип и использовать результат в обычных свойствах.
Например, прогресс можно хранить прямо в разметке:
<div class="progress" data-value="72"></div>
А ширину вычислить без style="width: 72% и без JS:
.progress {
width: calc(attr(data-value type(<number>)) * 1%);
}
То же самое работает с типизированными значениями. Например, компонент может получить цвет из data-*:
.badge {
background: attr(data-color type(<color>), gray);
}
Это удобно для серверного рендера и компонентов, где данные уже находятся в DOM, тк не нужно дублировать их в inline-style или генерировать отдельные классы.
Но пока расширенный attr() для произвольных свойств и type() ещё имеет неполную поддержку браузерами.
🔥 По сути, data-* теперь может быть небольшим типизированным API между разметкой и CSS.
📣 Code Ready | #совет | 1 524 |
| 18 |  Сколько вакансий ты упускаешь, пока ищешь работу? 👀
Они разбросаны по десяткам Telegram-каналов, hh ru, карьерным сайтам и другим площадкам.
Пока ты мониторишь одни источники, подходящая вакансия может появиться в другом.
Софи забирает этот поиск на себя.
Она ищет подходящие вакансии в 350+ Telegram-каналах, на hh ru, карьерных сайтах компаний, Geekjob и youngjunior.ru
Сама изучает вакансии, пишет персональные сопроводительные и отправляет отклики.
Тебе больше не нужно каждый день выбирать, где искать работу и на что откликаться.
Софи будет искать везде.
Доступ откроется 22 сентября.
Первые 3 дня - бесплатно.
Мест немного. Подпишись, чтобы не пропустить старт. | 1 228 |
| 19 |  😍 RS School Materials — большая подборка материалов для изучения frontend-разработки!
Здесь собраны полезные ресурсы по HTML, CSS, Flexbox, Grid, JavaScript, React, Git и Computer Science: учебники, статьи, интерактивные курсы, игры и задачи. Отдельные разделы посвящены JavaScript-проектам и подготовке к собеседованиям. Удобная подборка для начинающих.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 1 653 |
| 20 |  👩💻 Этим атрибутом помечают обязательные поля формы!
Атрибут required добавляется обязательным полям формы. Если поле с таким атрибутом не заполнено, то при отправке формы браузер покажет предупреждение и отменит отправку.
Атрибут required можно использовать для <select>, <textarea>, а также для <input> со следующими типами:
• text,
• search,
• url,
• tel,
• email,
• password,
• date,
• month,
• week,
• time,
• datetime-local,
• number,
• checkbox,
• radio,
• file.
Важно: этот атрибут проверяется только на стороне браузера. Для защиты данных всегда нужна дополнительная проверка на сервере, так как HTML-валидацию можно обойти.
📣 Code Ready | #атрибут | 1 930 |
