Code Ready | Frontend

👩‍💻 Можно ли вывести видео поверх всех окон на странице или даже за пределы браузера? Псевдокласс :picture-in-picture в CSS применяется к видео, которое находится в режиме «картинка в картинке». Он позволяет стилизовать элемент <video>, когда пользователь вынес его в плавающее окно поверх других приложений или вкладок. Как это используется:

• изменение оформления видео в PiP-режиме; • визуальная индикация активного режима воспроизведения; • адаптация интерфейса под плавающее окно.

Комбинируйте с соседними селекторами (~, +) и :has(), чтобы менять другие элементы интерфейса, пока видео в PiP. 📣 Code Ready | #свойство

⚡️ Айтишник из «VISION» скупил курсы айти школ и выложил гигабайты материалов к себе Каждый найдет что-то по душе: 1202 ГБ — Python 1811 ГБ — Frontend 1100 ГБ — C / C++ / C# 804 ГБ — Java 411 ГБ — SQL & БД 309 ГБ — DevOps 998 ГБ — ИБ & Хакинг 773 ГБ — Kotlin / Swift 189 ГБ — PHP 201 ГБ — GoLang 170 ГБ — Rust 167 ГБ — QA / Тестирование 310 ГБ — 1C + Лицензии 495 ГБ — Машинное обучение 704 ГБ — Аналитика Данных 991 ГБ — Дизайн Материалы в закрепе, постоянно пополняются👆🏻

Почему textarea часто ломает layout? По умолчанию textarea можно тянуть во все стороны. Пользователь легко может растянуть её по ширине и сломать grid, flex или весь form-layout. Обычно никто это не контролирует.

textarea {
  resize: both;
}

Из-за этого форма начинает разъезжаться, особенно в боковых панелях, модальных окнах и узких контейнерах. Лучше сразу ограничить направление resize.

textarea {
  resize: vertical;
}

Теперь пользователь может увеличить высоту, но ширина layout остаётся стабильной. Если resize вообще не нужен:

textarea {
  resize: none;
}

Это особенно полезно для сложных форм.

.modal textarea,
.sidebar textarea {
  resize: vertical;
}

🔥 Контроль resize убирает неприятные layout-баги в формах и делает UI заметно стабильнее. 📣 Code Ready | #совет

Надоело долбить LeetCode в пустоту? 🎮 Девстанция — это не очередной список задач. Это RPG для программиста: 🕸 Паутина вместо списка. Каждая задача — узел на графе. Открываешь одни — открываешь путь к другим. Панорамируешь, зумишь, видишь прогресс физически. Skill Tree в мире кодинга. 🏆 Сезоны. 180 дней на прохождение паутины. В конце — нагрды и подведение итогов. Каждый сезон — перерождение. Никто не стартует с форой. 🔥 Геймификация. Стрики, ежедневные челленджи, достижения, рейтинги за сегодня/вчера/неделю/сезон, графики активности — ощути прилив азарта. 👥 Лента событий. Видишь, кто только что решил задачу, кто взял золото дня, кто выбил ачивку. Ты не один в тёмной комнате. Первый сезон уже идёт. Заходи в паутину 🕸 👉 Решай задачи на dev-station.ru

🐱 html-cheatsheet-rus — полезнейшая шпаргалка по HTML! Крутой материал для тех, кто изучает frontend или хочет быстро освежить базу по HTML. Здесь собрана действительно большая база — от структуры HTML-документа, тегов и атрибутов до форм, семантической вёрстки, мультимедиа, HTML5 API и accessibility.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

👩‍💻 Textarea, которая растёт по контенту без JavaScript! Автоматическое изменение высоты textarea — частая задача в формах, чатах и комментариях. Обычно для этого используют JavaScript, но современные браузеры уже умеют делать это нативно через CSS. Как работает:

• field-sizing: content включает автоматический расчёт размеров поля; • textarea начинает подстраиваться под объём текста; • высота увеличивается по мере ввода; • браузер сам рассчитывает размеры без JS-логики.

🔥 Это отличный способ упростить формы, чаты и интерфейсы ввода текста. 📣 Code Ready | #фишка

«Опять лагает»: где искать слабые места во фронтенде Если сайт тормозит и работает не так быстро, как вам хотелось бы, ему нужен аудит — на это потребуется примерно 1 рабочий день. Роман Игнатович, фронт-тимлид Далее, готов сэкономить эти бесценные 8 часов вашего рабочего времени. Он собрал чек-лист типичных ошибок во фронтенде, из-за которых всё лагает, с понятными способами их устранения. Больше технических разборов кейсов, советов и вакансий для разработчиков — в канале Далее. Подписывайтесь! #реклама О рекламодателе

📂 Напоминалка по аутентификации и авторизации в вебе! Например, Session-cookie хранит состояние на сервере и использует session_id в cookie браузера, тогда как Token-based подход переносит хранение состояния на клиент и отправляет токен в каждом запросе. На картинке показаны основные механизмы: классические session-cookie, токены и JWT, а также SSO для единого входа и OAuth 2.0 с различными grant flow, которые используются для разных типов приложений — web, mobile и server-to-server. Сохрани, чтобы не потерять! 📣 Code Ready | #ресурс

Почему querySelectorAll() не обновляется автоматически? Иногда кажется, что результат querySelectorAll() как-то привязан к DOM и должен сам обновляться при изменениях на странице. Но это не так — он возвращает фиксированный снимок на момент вызова.

const items = document.querySelectorAll('.item');

console.log(items.length); // 3

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

console.log(items.length); // всё ещё 3

После этого items никак не пересчитывается. Это просто сохранённый результат поиска, а не живая коллекция. Если нужен актуальный список — придётся заново выполнить запрос:

let items = document.querySelectorAll('.item');

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

items = document.querySelectorAll('.item');

console.log(items.length); // 4

Из-за этого иногда появляются простые, но неприятные ошибки в динамическом UI. Например, когда элементы добавляются позже, а список уже был сохранён заранее:

const buttons = document.querySelectorAll('.btn');

addNewButton();

// новый элемент сюда уже не попадёт
buttons.forEach(bindHandler);

Человек ожидает, что обработчик навесится на всё, но фактически работает только с тем, что существовало в момент запроса. Есть и другой вариант поведения — живые коллекции. Например:

const items = document.getElementsByClassName('item');

console.log(items.length); // 3

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

console.log(items.length); // 4

Такие коллекции действительно меняются вместе с DOM. К ним относятся getElementsByClassName, getElementsByTagName и element.children. Разница простая: querySelectorAll даёт снимок, а getElementsBy* держат связь с DOM. При этом NodeList, который возвращает querySelectorAll, можно спокойно перебирать как массив:

const items = document.querySelectorAll('.item');

items.forEach(item => {
  console.log(item);
});

Но это всё ещё не массив:

Array.isArray(items); // false

Если нужны методы массива — его нужно явно преобразовать:

const items = [...document.querySelectorAll('.item')];

🔥 На практике querySelectorAll используют чаще именно из-за предсказуемости. Он не меняется сам по себе, и это как раз удобно в реальных приложениях. Для динамики обычно либо делают повторный запрос, либо уходят в делегирование событий. 📣 Code Ready | #практика

Сидеть и работать в корпорации — страшно, жизнь-то мимо проходит. Уходить строить бизнес — страшно, а вдруг прогорит. Один из вариантов — разрабатывать свой пет-проект по вечерам. Многие успешные компании, например, Twitter, создавались именно так. Это не значит, что ваш проект обязательно заработает миллиарды, но заработать больше, чем в найме, и получить ценный опыт — вполне реально. Перед началом разработки появляется множество вопросов, например: • Как выбрать идею для пет-проекта? • Что нужно знать про маркетинг • Как запуститься и довести до первых продаж не имея бюджета на рекламу? В телеграм-канале «Твой пет проект», Михаил Табунов делится своим опытом с разработчиками и менеджерами. Он рассказывает, где искать идею для нового проекта, что нужно знать о маркетинге, как запустить стартап и привлечь первых 10 клиентов, а также о многих других важных вещах. Подписывайтесь на «Твой пет проект», получайте пользу от практиков рынка! https://t.me/+8Frwa03ciVlhNTky

😍 dreamDevTeamx — большая шпаргалка для фронтенд разработчиков! Годный репозиторий, в котором собрано много практической информации по разным направлениям разработки. Это база знаний, к которой удобно возвращаться во время обучения, работы или подготовки к собеседованиям. Материал ориентирован именно на практику.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Маленькая UI-деталь, которая влияет на восприятие интерфейса! Часто бывает: кликаешь по button, tab, dropdown-item или card-action и выделяется текст. Интерфейс сразу выглядит менее качественным.

.button {
  user-select: none;
}

Теперь текст внутри элемента нельзя случайно выделить мышью или тапом. Это особенно полезно для интерактивных элементов.

button,
.tab,
.badge {
  user-select: none;
}

Но важно не применять это глобально.

body {
  user-select: none;
}

Так можно сломать UX: пользователь не сможет копировать текст. Используй только там, где выделение реально не нужно.

button,
.control,
.action

Это маленькая деталь, но она заметно улучшает UI. 🔥 user-select: none — простой способ сделать интерфейс визуально чище и приятнее. 📣 Code Ready | #совет

AI-инструменты можно любить и ненавидеть, но работать без них в IT уже практически невозможно 🤩 Коллеги из AvitoTech 11 июля зовут в их офис на Лесной на AI Hardcore Day. Приглашают тех, кто каждый день сталкивается с AI в работе и даже пишет своих AI-агентов. Обещают доклады и нетворкинг-сессию на террасе после — и всё это без записи. 💫 Среди тем: — Spec-Driven Development: теория, инструменты, практика. — Разработка и тестирование MCP для внутренних агентных систем аналитики. — Выпрямляем руки агентов: как сделать MCP удобными и действительно полезными. — Атаки на GenAI-агентов: OWASP на практике. ➡ Регистрация тут!

✍️ Нашёл полезную статью на Хабре про современные возможности CSS, которые позволяют избавиться от старых костылей и писать код проще! В этой статье: • Показано, как решить проблему прыгающего контента через scrollbar-gutter; • Разбираются современные CSS-возможности: system-ui, light-dark(), margin-inline и align-content; • Объясняется, как сделать код чище, короче и удобнее для поддержки без лишних Flexbox и Grid-конструкций.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

💅 Frontend Stuff — коллекция полезных ресурсов для frontend-разработчиков! На сайте собрана большая база материалов для JavaScript-разработчиков: статьи, библиотеки, фреймворки, инструменты, полезные сервисы и обучающие ресурсы. От базовых инструментов до React, Vue, Node.js и др. Отличный ресурс для веб-разработчиков, которые хотят ускорить работу или найти новые инструменты. 📌 Оставляю ссылочку: frontend-stuff.com 📣 Code Ready | #сайт

Разбираемся зачем нужен event.currentTarget! При работе с событиями многие используют event.target и не задумываются, что это не всегда тот элемент, на который был повешен обработчик. Например:

<button class="btn">
  <span>Сохранить</span>
</button>

Повесим обработчик на кнопку:

button.addEventListener('click', (event) => {
  console.log(event.target);
});

Если кликнуть по тексту внутри span, то в консоль попадёт именно span, а не button. Потому что event.target всегда указывает на элемент, который стал источником события. Теперь выведем имя тега:

button.addEventListener('click', (event) => {
  console.log(event.target.tagName);
});

Клик по кнопке даст такой результат: BUTTON. А клик по тексту внутри span даст: SPAN. Из-за этого иногда появляются неожиданные баги:

button.addEventListener('click', (event) => {
  event.target.disabled = true;
});

Если событие пришло от вложенного элемента, код будет работать не с кнопкой, а с этим элементом. В результате можно случайно изменить не тот элемент или получить неожиданный результат. В таких ситуациях обычно нужен event.currentTarget:

button.addEventListener('click', (event) => {
  console.log(event.currentTarget);
});

currentTarget всегда содержит элемент, на котором сейчас выполняется обработчик. То есть:

button.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
});

При клике по span первым будет исходный элемент события:

event.target — span

А вторым — элемент, на котором выполняется обработчик:

event.currentTarget — button

Особенно хорошо разница видна при делегировании событий:

list.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
});

Здесь currentTarget всегда будет ссылаться на list, независимо от того, по какому дочернему элементу кликнули. Ещё один момент: currentTarget существует только во время обработки события.

const saved = event.currentTarget;

После завершения обработки значение event.currentTarget становится null. Поэтому если ссылка нужна позже — её стоит сохранить заранее. 🔥 Простое правило: target отвечает на вопрос «какой элемент стал источником события», а currentTarget — «на каком элементе сейчас выполняется обработчик». Понимание этой разницы помогает избежать множества мелких ошибок при работе с DOM-событиями. 📣 Code Ready | #практика

AI-инструменты можно любить и ненавидеть, но работать без них в IT уже практически невозможно 🤩 Коллеги из AvitoTech 11 июля зовут в их офис на Лесной на AI Hardcore Day. Приглашают тех, кто каждый день сталкивается с AI в работе и даже пишет своих AI-агентов. Обещают доклады и нетворкинг-сессию на террасе после — и всё это без записи. 💫 Среди тем: — Spec-Driven Development: теория, инструменты, практика. — Разработка и тестирование MCP для внутренних агентных систем аналитики. — Выпрямляем руки агентов: как сделать MCP удобными и действительно полезными. — Атаки на GenAI-агентов: OWASP на практике. ➡ Регистрация тут!

📂 Напоминалка для работы с JavaScript DOM! Например, querySelector() помогает быстро находить элементы на странице, addEventListener() обрабатывать события пользователя, а createElement() динамически создавать новый контент. На картинке — основные DOM-методы и свойства: поиск элементов, работа с содержимым, атрибутами, классами, событиями и управление структурой документа. Сохрани, чтобы не потерять! 📣 Code Ready | #ресурс

Как убрать лишние классы для пустых блоков? Часто в компонентах есть контейнеры для описания, ошибки, подсказки или дополнительного контента. Если данных нет — элемент остаётся пустым, но продолжает занимать место. Обычно это решают через JS или условный рендеринг.

.error {
  display: none;
}

А потом отдельно добавляют класс при появлении контента. Но CSS умеет определять пустые элементы самостоятельно.

.error:empty {
  display: none;
}

Теперь блок автоматически скрывается, если внутри ничего нет. Можно делать и обратную логику.

.card:not(:empty) {
  padding: 16px;
}

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

error,
hint,
description,
badge

Где содержимое может появляться динамически. 🔥 :empty позволяет убрать лишние классы и часть условной логики прямо средствами CSS. 📣 Code Ready | #совет

🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг 25 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.