Последние посты
Code Ready | Frontend
23 сент., 06:12
👩💻 Тег для перевода данных с человеческого языка на компьютерный!Тег <data> позволяет показать пользователю обычный текст и одновременно связать его с другим значением, которое удобно использовать в скриптах или при обработке данных.В <data> используются: • содержимое тега — текст, который видит пользователь; • value — машиночитаемое значение; • JavaScript — при необходимости может получить значение через свойство value.Элемент <data> стоит использовать, когда вы не хотите выделять элементы на вёрстке, например, при помощи <div> или <span>, но вам нужно связать текст с внутренним ID или значением, который вы будете использовать при обработке запросов пользователя.📣 Code Ready | #атрибут
Code Ready | Frontend
22 сент., 12:12
inert — отключение целой области интерфейса без обхода дочерних элементов!Иногда часть интерфейса требуется временно исключить из взаимодействия: например, при открытии выдвижной панели или на время операции, когда фоновый интерфейс не должен принимать пользовательский ввод.Управлять состоянием каждого элемента отдельно можно, но такой подход требует учитывать разные типы элементов и механизмы взаимодействия: button.disabled = true; input.disabled = true; link.tabIndex = -1;disabled применим не ко всем HTML-элементам, а изменение tabindex решает только задачу фокуса. Для блокировки целой области документа существует глобальный атрибут inert: <main id="content"> <button>Сохранить</button> <a href="/profile">Профиль</a> <input type="text"> </main>Состоянием можно управлять через HTMLElement.inert, без поиска и изменения каждого интерактивного элемента внутри контейнера: const conteCode Ready | Frontend
22 сент., 10:12
13 12Code Ready | Frontend
22 сент., 10:12
🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовитьсяКак это будет: 📂 Александр Дмитриев, разработчик из известного международного финтеха, ex-VK, ex-Ozon проведет вайбкодинг секцию разработчику-добровольцу 📂 Александр будет задавать реальные вопросы с секций, которые проводил сам и комментировать ответы 📂 В конце можно будет задать любой вопрос АлександруЭто бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы.Переходи
Code Ready | Frontend
22 сент., 08:12
CSS теперь разрешает создавать собственные функции!В дизайн-системах постоянно повторяются одни и те же вычисления. .card { padding: calc(6 4px); }.modal { gap: calc(4 4px); }Можно вынести саму логику вычисления в @function. @function --space(--n) { result: calc(var(--n) 4px); }И дальше использовать её практически как встроенную CSS-функцию. .card { padding: --space(6); }
Code Ready | Frontend
21 сент., 07:30
✍️ Frontend Interview Questions — шпаргалка для подготовки к собеседованиям!В репозитории собраны не просто вопросы, а готовые ответы и пояснения по ключевым концепциям фронтенда, включая типичные спорные моменты и задачи, на которых часто проверяют понимание языка и React. Можно использовать для повторения теории, самопроверки и поиска тем, которые стоит подтянуть.Оставляю ссылочку: GitHub 📱📣 Code Ready | #репозиторийCode Ready | Frontend
18 сент., 17:12
😎 Интересная статья лежит на Хабре: «П維чему нейро考ети дел思ют так»!В этой статье: • Объясняется, как токены превращаются в эмбеддинги и как модель представляет смысл в многомерном пространстве; • На примере grokking показывается, как нейросеть переходит от запоминания ответов к пониманию общего правила; • Разбираются внутренние представления LLM и причины неожиданных артефактов в их ответах.🔊 Продолжайте читать на Habr!➡️ IT Ready | #статья
Code Ready | Frontend
18 сент., 08:12
Почему старый fetch-запрос может перезаписать новый?Асинхронные операции завершаются независимо от порядка запуска. Поэтому в интерфейсах, где новый запрос делает предыдущий результат неактуальным, может возникнуть race condition.Например, пользователь быстро продолжает вводить поисковый запрос. Запрос для более длинной и актуальной строки может завершиться раньше предыдущего. Если каждый ответ безусловно передавать в renderResults(), более старый результат в итоге перезапишет актуальный: search.addEventListener('input', async event => { const query = encodeURIComponent(event.target.value); const response = await fetch(/api/search?q=${query});renderResults(await response.json()); });Проблема здесь не в fetch() как таковом, а в отсутствии контроля актуальности асинхронной операции: любой завершившийся запрос получает возможность изменить состояние интерфейса.Если устаревшиеCode Ready | Frontend
17 сент., 08:12
👨💻 Интересная статья-подборка на Хабре: «Зря вы забыли эти HTML- и CSS-фичи»!В этой статье: • Вспомните, как contenteditable позволяет редактировать содержимое элементов прямо в браузере; • Разберётесь, зачем использовать <time> и где пригодится currentColor; • Узнаете разницу между background-clip и background-origin и посмотрите на практические примеры их применения.🔊 Продолжай читать на Habr!📣 Code Ready | #статья
Code Ready | Frontend
16 сент., 08:12
📱 classList — управление CSS-классами!Разбираем classList и основные методы DOMTokenList, с помощью которых можно добавлять, удалять, переключать и заменять CSS-классы, проверять их наличие, получать классы по позиции и перебирать коллекцию. Используется для управления состояниями элементов, переключения стилей и реализации динамической UI-логики без ручной работы с className.📣 Code Ready | #шпора
Code Ready | Frontend
15 сент., 15:12
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();Code Ready | Frontend
15 сент., 12:10
Element.scrollIntoView() — управление прокруткой без ручной работы с координатами.scrollIntoView() в основном используют как простой переход к элементу, но в сложных интерфейсах важно понимать, какие scroll-контейнеры браузер будет изменять и как управлять областью воздействия.По умолчанию метод пытается сделать элемент видимым во всех подходящих прокручиваемых предках — включая вложенные scroll-контейнеры и viewport, если это необходимо. element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });В новых реализациях браузеров появился параметр container, который позволяет ограничить область прокрутки. element.scrollIntoView({ behavior: 'smooth', block: 'nearest', container: 'nearest' });container: 'nearest' ограничивает область прокрутки ближайшим scroll-контейнером вместо изменения всех доступных областей прокрутки.Это особенно полезно для компонентов с вложеннойCode Ready | Frontend
15 сент., 07:12
👩💻 Адаптирует картинки под разные устройства и поддерживаемые форматы!Тег <picture> позволяет браузеру выбирать подходящую версию изображения в зависимости от размера экрана, поддерживаемого формата или других условий.Внутри <picture> обычно размещают: • <source> — задаёт альтернативные версии изображения; • srcset — указывает файл изображения; • media — определяет условие выбора, например ширину экрана; • type — указывает MIME-тип формата, например image/avif; • <img> — служит основным или резервным вариантом изображения.Браузер анализирует каждый тег <source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги не анализируются. Если тег <picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>.
Code Ready | Frontend
14 сент., 13:12
Не давай стилям компонента протекать во вложенные компоненты!Частая проблема большого 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, поэтому элементы внутри неё исключаются из этой области.
Code Ready | Frontend
14 сент., 07:12
👨💻 MilaNick materials — большая подборка материалов для frontend-разработчиков!В репозитории собраны полезные ресурсы по веб-разработке: HTML, CSS, JavaScript, React, Node.js, Webpack, Git, тестирование и архитектура frontend-приложений. Есть статьи, курсы, видео, книги, разборы задач и практические материалы по асинхронности, ООП, алгоритмам, паттернам проектирования и созданию реальных проектов.Оставляю ссылочку: GitHub 📱📣 Code Ready | #репозиторийCode Ready | Frontend
11 сент., 07:12
👩💻 Удобный тег, объединяющий элементы навигации по сайту!В контейнер <nav> помещаются основные ссылки, по которым пользователь сможет быстро перейти на нужный раздел сайта.В <nav> обычно размещают: • главное меню сайта; • навигацию по разделам; • оглавление статьи или документа; • ссылки для перехода между связанными страницами.При этом не каждую группу ссылок стоит помещать в <nav>. Тег предназначен прежде всего для основных навигационных блоков, а обычный набор вспомогательных ссылок может оставаться без него.📣 Code Ready | #атрибут
Code Ready | Frontend
10 сент., 07:12
📱 AbortController — отмена запросов и асинхронных операций!Разбираем AbortController и AbortSignal, с помощью которых можно отменять fetch-запросы и другие поддерживаемые операции, проверять состояние и причину отмены, прерывать собственную асинхронную логику, задавать таймауты и объединять несколько сигналов отмены. Используется для управления жизненным циклом операций, предотвращения лишней работы и корректной очистки ресурсов.📣 Code Ready | #шпора
Code Ready | Frontend
9 сент., 15:15
Почему 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 JavaCode Ready | Frontend
9 сент., 10:12
Разбираем 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');Code Ready | Frontend
9 сент., 06:12
❤️ Супер интересная статья попалась на Хабре: «CSS задачи на 200 IQ»!В этой статье: • Узнаете, как сделать аналог fixed-элемента внутри прокручиваемого контейнера; • Разберёте необычный способ передачи параметров в SVG через CSS; • Посмотрите, как scroll-driven animations помогают решить сложную задачу с автоматическим размером элементов.🔊 Продолжай читать на Habr!📣 Code Ready | #статья
