Code Ready | Frontend

Element.animate() — управление композицией анимаций в браузере! CSS-анимации удобны, пока элемент имеет одно состояние. Но когда несколько эффектов должны управляться из JavaScript, Web Animations API даёт больше контроля. Например, несколько анимаций одного элемента могут существовать одновременно:

const fade = element.animate(
  [
    { opacity: 0 },
    { opacity: 1 }
  ],
  {
    duration: 300
  }
);

const move = element.animate(
  [
    { transform: 'translateY(20px)' },
    { transform: 'translateY(0)' }
  ],
  {
    duration: 300
  }
);

Браузер создаёт отдельные Animation-объекты и объединяет их эффекты при расчёте итогового стиля элемента. У каждой анимации есть собственное состояние:

console.log(fade.playState);

console.log(move.currentTime);

currentTime позволяет управлять прогрессом вручную:

fade.currentTime = 150;

Анимация сразу перейдёт примерно к середине выполнения. Это полезно для синхронизации анимаций с внешним состоянием, например с прогрессом загрузки:

animation.currentTime =
  progress * animation.effect.getTiming().duration;

Также Web Animations API позволяет изменять параметры уже созданного эффекта:

animation.effect.updateTiming({
  duration: 1000
});

При этом не нужно пересоздавать анимацию. Отдельно стоит учитывать композицию свойств. Если два эффекта изменяют один и тот же параметр:

element.animate(
  [
    { transform: 'translateX(100px)' }
  ],
  {
    duration: 1000
  }
);

element.animate(
  [
    { transform: 'scale(1.2)' }
  ],
  {
    duration: 1000
  }
);

Оба эффекта работают с одним CSS-свойством transform. Итоговое поведение зависит от правил композиции анимаций, поэтому параллельное изменение одного свойства может дать неожиданный результат. Для сложных случаев можно управлять композицией через composite:

element.animate(
  [
    {
      transform: 'translateX(100px)'
    }
  ],
  {
    duration: 500,
    composite: 'add'
  }
);

В этом режиме новое значение добавляется к существующему, а не заменяет его. 🔥 Element.animate() — это не просто замена CSS keyframes. Web Animations API предоставляет полноценную модель управления анимациями: состояние, время выполнения, изменение параметров и правила композиции эффектов. 📣 Code Ready | #практика

На Stepik запустили курс по вайбкодингу c Claude Code Первым делом вы освоите базу Claude Code и научитесь проектировать полноценные приложения. После этого перейдёте к более продвинутым инструментам и автоматизации: ➡️Разработаете собственные MCP-серверы и Claude Skills ➡️Автоматизируете разработку с помощью Agent Loops и хуков ➡️Освоите Claude Design, Cowork и Connectors ➡️Построите личную систему знаний на базе Obsidian + Claude Cowork ➡️Научитесь работать с таблицами при помощи Cowork ➡️Перестанете постоянно упираться в лимиты Claude А в финале получите готовую дорожную карту, полезные лайфхаки и 7 практических способов обхода блокировок Claude Code в России. 🔥 В течении 48 часов действует скидка 25%

Наткнулся на необычную и очень интересную статью на Хабре: «PowerHTML»! В этой статье: • Показывается, как создать интерактивные презентации, которые работают полностью офлайн в одном HTML-файле без установки программ и регистрации; • Разбираются возможности редактора: встроенные видео, анимации, таймеры, интерактивные элементы и др; • Объясняется, как с помощью AI был создан полноценный инструмент, ориентированный на преподавателей, спикеров и всех, кто проводит презентации. 🔊 Продолжайте читать на Habr! 📣 Code Ready | #статья

Intl.ListFormat: форматируем списки с учётом языка пользователя! При разработке интерфейсов часто нужно вывести набор данных в виде обычного текста: участников команды, выбранные фильтры, категории товара или список доступных вариантов. Самый простой вариант — использовать join():

const users = [
  'Alex',
  'Maria',
  'John'
];

users.join(', ');

Такой подход работает только для простого разделения элементов. Но он не знает правил конкретного языка. В английском между последними элементами используется and, в русском — и, а в других локалях могут быть свои правила форматирования. Если приложение поддерживает несколько языков, обычно появляются ручные проверки:

if (locale === 'en') {
  // добавить and
}

if (locale === 'ru') {
  // добавить и
}

Поддерживать такую логику сложно, поэтому для подобных задач в JavaScript существует стандартный API Intl.ListFormat. Создаём форматтер и передаём нужную локаль:

const formatter =
  new Intl.ListFormat('ru');

formatter.format([
  'JavaScript',
  'TypeScript',
  'Python'
]);

Результат: JavaScript, TypeScript и Python. При изменении локали правила форматирования изменятся автоматически:

const formatter =
  new Intl.ListFormat('en');

formatter.format([
  'JavaScript',
  'TypeScript',
  'Python'
]);

Результат: JavaScript, TypeScript, and Python. Intl.ListFormat использует встроенные правила локализации JavaScript, поэтому не нужно самостоятельно реализовывать союзы, разделители и особенности разных языков. Кроме обычного перечисления можно форматировать варианты выбора. Например, когда пользователь выбирает один из способов оплаты:

const formatter =
  new Intl.ListFormat(
    'ru',
    {
      type: 'disjunction'
    }
  );

formatter.format([
  'Карта',
  'PayPal',
  'Перевод'
]);

Результат: Карта, PayPal или Перевод. По умолчанию используется conjunction — обычное перечисление через союз "и". Значение disjunction используется для альтернатив через "или". Также важно понимать, что Intl.ListFormat не изменяет исходные данные. Он только создаёт новую строку:

const tags = [
  'Frontend',
  'Backend',
  'DevOps'
];

const text =
  new Intl.ListFormat('ru')
    .format(tags);

Массив tags останется без изменений, что удобно при работе с состоянием приложения и неизменяемыми данными. В реальных проектах этот API полезен для отображения пользователей, тегов, фильтров, категорий и любых списков, которые должны выглядеть естественно для пользователей из разных стран. 🔥 Intl.ListFormat позволяет использовать стандартные правила локализации JavaScript вместо ручной сборки строк через join() и множества условий для разных языков. 📣 Code Ready | #практика

🔥 Глобальное обновление программ CyberYozh Academy

3 новых уровня для вашей карьеры

Рынок кибербезопасности меняется каждый месяц, и мы меняемся вместе с ним. Теперь наши флагманские программы выстроены в четкую систему из 3 уровней, которые идеально подойдут для специалиста на любом этапе карьеры. ⚡️Выбирайте свой трек: 🟢 УРОВЕНЬ 1: Новичкам - Инженер по информационной безопасности

Трек для тех, кто готов освоить одну из самых высокооплачиваемых и востребованных профессий в IT с полного нуля, без воды и иллюзий. Длительность: 11 месяцев Итог: Диплом установленного образца + помощь с трудоустройством Стоимость: от 5 015 ₽/мес

🟡УРОВЕНЬ 2: Специализация - Специалист по OSINT

Полное погружение в конкретную специальность. Идеально для студентов, у которых уже есть базовые знания в ИБ, и которым нужно стать профи в узкой нише. Длительность: 9 месяцев Итог: Удостоверение + помощь с трудоустройством Стоимость: от 4 763 ₽/мес

🟥УРОВЕНЬ 3: Повышение квалификации - Пентест внутренней инфраструктуры: Active Directory

Курсы для действующих специалистов в сфере ИБ, которым необходимо расширить свой боевой арсенал и пробить карьерный потолок. Длительность: 6 месяцев Итог: Удостоверение + подготовка к сертификации Стоимость: от 5 821 ₽/мес

Неважно, делаете ли вы первые шаги или уже давно работаете - у нас есть инструменты, чтобы кратно усилить ваши скиллы. 👉 Подобрать программу и записаться на курс: @cyacademy_support 🦔

👩‍💻 Можно ли стилизовать текст, к которому пользователь перешёл по ссылке? ::target-text — псевдоэлемент, который применяется к тексту, найденному через текстовый фрагмент в URL вида #:~:text=.... Он позволяет задать стили выделения, которые браузер покажет после перехода по такой ссылке. Примеры использования:

• изменить фон выделенного текста;

• добавить собственный цвет текста;

• настроить контрастное выделение вместо стандартного.

Стандартные якоря #id подсвечивают целевой элемент. Текстовые фрагменты #:~:text=... указывают на конкретную строку текста. ::target-text позволяет настраивать стиль этого автоматического выделения (обычно это жёлтая подсветка от браузера), чтобы он соответствовал дизайну. 📣 Code Ready | #свойство

CSS.escape() — экранирование динамических значений для CSS-селекторов! При работе с DOM часто приходится искать элементы по динамическим значениям: id, class, значениям атрибутов. И здесь есть один важный момент: querySelector() и querySelectorAll() принимают не просто строки, а полноценные CSS-селекторы. Поэтому если часть селектора формируется динамически, нужно учитывать правила синтаксиса CSS. Например:

const id = "user:123";

const element = document.querySelector(
  `#${id}`
);

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

#user:123

На первый взгляд кажется, что мы ищем элемент с id="user:123". Но для CSS символ : имеет специальное значение. Он используется для псевдоклассов:

:hover
:focus
:checked

Поэтому CSS-парсер воспринимает : не как часть значения, а как элемент синтаксиса селектора. Для таких случаев существует стандартный метод CSS.escape():

const id = "user:123";

const element = document.querySelector(
  `#${CSS.escape(id)}`
);

Теперь значение будет преобразовано в корректный CSS-идентификатор:

#user\:123

Браузер понимает, что : является частью значения, а не специальной конструкцией CSS. Такая проблема возникает не только с двоеточием. CSS имеет множество специальных символов, которые могут изменить смысл селектора:

const id = "product.item#42";

const element = document.querySelector(
  `#${CSS.escape(id)}`
);

Без экранирования символы ., # и другие будут интерпретироваться как часть CSS-селектора. То же самое относится к динамическим классам:

const className = "theme:dark";

const element = document.querySelector(
  `.${CSS.escape(className)}`
);

CSS.escape() работает согласно правилам CSS-идентификаторов и возвращает строку, которую можно использовать внутри селектора:

CSS.escape("hello world");
// "hello\ world"

CSS.escape("item.value");
// "item\.value"

CSS.escape("a:b");
// "a\:b"

До появления этого метода часто использовали ручное экранирование:

value.replace(/:/g, "\\:");

Но такой подход быстро становится неудобным. CSS имеет много специальных случаев: разные символы, пробелы, цифры в начале идентификаторов и другие правила. CSS.escape() переносит эту логику на стандартный API браузера. Использовать его стоит в местах, где динамическое значение становится частью CSS-селектора:

document.querySelector()

document.querySelectorAll()

element.matches()

element.closest()

Важный момент: CSS.escape() не является механизмом защиты данных. Он решает только задачу корректного экранирования значения для CSS-селектора. Например:

element.innerHTML = value;

— это уже другая область: HTML и потенциальные XSS-риски. Там используются другие механизмы защиты. Если вы работаете с динамическими id, классами или значениями, которые приходят извне (например, из API), CSS.escape() помогает избежать ошибок парсинга и сохранить ожидаемое поведение DOM API. 🔥 CSS.escape() — хороший способ подготовить динамические значения перед использованием внутри CSS-селекторов. 📣 Code Ready | #практика

Опа, тут бывший сеньор одного из IT-отделов Яндекса Игорь Никитин выкатил целый канал про Python — и это лучшее, что есть в рунете по теме. Качественные гайды. Советы от известных прогеров. Тематические мемасы. Короче, ничего лишнего. Хватит душить питона, учись его кодить: https://t.me/+IzIPzvoa7p40ZTUy 🐍

👩‍💻 Группируем заголовок и обычный текст! Тег <hgroup> объединяет основной заголовок страницы или раздела с дополнительным текстом, который его сопровождает — например, подзаголовком или кратким описанием. Чаще всего внутри <hgroup> размещают:

• один из заголовков <h1>–<h6>;

• дополнительные элементы текста, например <p> с пояснением.

Он помогает логически связать несколько элементов заголовка, сохраняя структуру документа более понятной для браузеров и вспомогательных технологий. Не используйте <hgroup>, если вы хотите показать два независимых заголовка, — лучше оформить это через <section> или <article> 📣 Code Ready | #атрибут

✍️ Frontend Handbook — большая база знаний по frontend-разработке! Здесь собраны статьи, документация, шпаргалки, инструменты и другие ресурсы по HTML, CSS, JavaScript, TypeScript, React и многим другим технологиям. Особенно удобно, что информация хорошо структурирована, поэтому можно быстро найти нужную тему. Оставляю ссылочку: GitHub 📱 📣 Code Ready | #репозиторий

Intersection Observer — отслеживаем появление элементов в области видимости! Эффективная альтернатива scroll-событиям. Используется для ленивой загрузки, анимаций и инфинит-скролла. Инициализируем наблюдатель:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

Подключаем наблюдение:

document.querySelectorAll('.anim').forEach((el) => {
  observer.observe(el);
});

Стили для появления:

.anim { opacity: 0; transform: translateY(30px); transition: 0.4s ease; }
.visible { opacity: 1; transform: none; }

🔥 Простая и масштабируемая практика, которую используют в продакшене: YouTube, Medium, e-commerce. 📣 Code Ready | #практика

AI уже умеет писать код. Следующий шаг — поручить ему код-ревью. Большинство разработчиков используют AI как продвинутый автокомплит. Но агенты уже умеют выполнять полноценные инженерные задачи: проверять pull request, искать баги, следить за стилем и безопасностью кода. На бесплатном воркшопе покажут, как собрать такого агента своими руками и встроить его в GitHub. Что будет на практике: 🔹 Настроите AI-ревьюера на Opencode и AGENTS.md; 🔹 Разберётесь, как работают MCP, Tools и Skills; 🔹 Подключите агента к репозиторию; 🔹 Протестируете его на реальном pull request; 🔹 Получите готовый workflow, который можно использовать после воркшопа. Подойдёт разработчикам, тимлидам, DevOps, QA и всем, кто хочет внедрять AI в реальные процессы разработки, а не просто общаться с чат-ботами. 21 июля, 19:00 (МСК). Участие бесплатное. Записаться → #реклама О рекламодателе

Как создавать независимые компоненты без конфликтов CSS-переменных? В больших проектах часто используют глобальные переменные:

:root {
  --color: blue;
}

Но потом один компонент случайно меняет значение, и стили начинают влиять друг на друга. CSS позволяет делать локальные токены прямо внутри компонента.

.card {
  --color: #222;
  color: var(--color);
}

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

.dark-card {
  --bg: #111;
  --text: white;
}

Внутренние элементы автоматически получают эти значения:

.title {
  color: var(--text);
}

Без дополнительных классов и дублирования. Особенно удобно для:

.theme,
.component,
.widget

где каждый блок должен иметь свои настройки. 🔥 Локальные CSS custom properties позволяют строить компонентные дизайн-системы без огромного количества модификаторов и переопределений. 📣 Code Ready | #совет

🇷🇺 Разбираешься в радиочипах, оптике и связи? Забери до 1 000 000 рублей за свои инженерные навыки на турнире «Дронкон» 🇷🇺 «Сталинские Соколы» открывают регистрацию на 4-й Всероссийский турнир «Дронкон», который пройдет с 22 по 26 августа. Турнир пройдет по направлению: - Инженерное дело: навыки программирования, сборка электронного оборудования, беспроводная связь, оптические системы + стратегия «Битва Дронов»; Призовой фонд для победителей:

🥇место – 1 000 000 рублей 🥈место – 700 000 рублей 🥉место – 500 000 рублей Награда за 4-8 места - 100 000 рублей

Пройди заочный онлайн-этап и получи путевку на очный этап турнира в Республику Татарстан! Перелет, питание, проживание - за счет организаторов. 🇷🇺 Подать заявку и узнать подробности 🇷🇺

Date.parse() и неочевидные проблемы при работе с датами! При работе с датами в JavaScript часто используют Date.parse() или new Date(), чтобы преобразовать строковое значение в дату или получить timestamp. При этом важно понимать, какое значение хранится в системе: календарная дата, локальное время или конкретный момент времени. Ошибки обычно появляются, когда эти разные сценарии начинают обрабатываться одинаково. Например:

const timestamp = Date.parse(
  '2024-01-15T10:30:00Z'
);

console.log(timestamp);

JavaScript возвращает количество миллисекунд от 1 января 1970 года UTC. Проблемы возникают, когда в Date.parse() передают даты в произвольном формате:

Date.parse('01/15/2024');

Date.parse('15.01.2024');

Date.parse('2024/01/15');

Такие форматы не являются надёжным контрактом между системами. Их обработка может отличаться в зависимости от окружения и реализации JavaScript. Например:

Date.parse('01/02/2024');

Такая запись неоднозначна. Без явного формата невозможно гарантировать одинаковый результат во всех окружениях. Поэтому при обмене датами между backend и frontend обычно используют ISO 8601 с явным указанием времени и часового пояса:

new Date(
  '2024-01-15T10:30:00Z'
);

Здесь описан конкретный момент времени. Указаны дата, время и часовой пояс (UTC), поэтому значение будет одинаково интерпретироваться независимо от локального времени пользователя. Отдельная проблема возникает при работе с датами без времени. Например:

const date = new Date(
  '2024-01-15'
);

console.log(date);

Строка 2024-01-15 в JavaScript интерпретируется как UTC-дата:

2024-01-15T00:00:00.000Z

После этого значение преобразуется в локальный часовой пояс пользователя. В часовом поясе UTC+3 пользователь увидит:

15.01.2024 03:00

А в UTC-5:

14.01.2024 19:00

Само значение времени остаётся одинаковым, но календарная дата при отображении может измениться. Именно здесь часто возникает ошибка в модели данных. Например, сервер возвращает дату рождения пользователя:

{
  "birthday": "2000-01-15"
}

На frontend создаётся объект Date:

const birthday = new Date(
  user.birthday
);

birthday.toLocaleDateString('ru-RU');

Разработчик ожидает получить: 15.01.2000. Но пользователь в другом часовом поясе может увидеть: 14.01.2000. Причина в том, что дата рождения — это календарное значение. Она не зависит от часов, минут и часового пояса. Объект Date в JavaScript используется для работы с конкретным моментом времени, поэтому при преобразовании строк учитывается часовой пояс. Для временных событий лучше использовать полный ISO-формат:

const createdAt = new Date(
  '2024-01-15T14:30:00Z'
);

Дата создания сообщения, время оплаты или момент отправки уведомления являются событиями во времени. Для них важно передавать полное значение с часовым поясом. А вот календарные значения, например дату рождения или дату окончания периода, не всегда стоит преобразовывать в Date. В таких случаях безопаснее работать с исходным значением:

const [year, month, day] =
  '2000-01-15'.split('-');

const formattedDate =
  `${day}.${month}.${year}`;

Так значение останется календарной датой и не будет изменено из-за часового пояса. Также стоит учитывать, что Date.parse() не выбрасывает исключение при невозможности распознать дату:

const result = Date.parse(
  'invalid-date'
);

console.log(result);

Результат: NaN. Поэтому такие значения необходимо проверять:

const timestamp = Date.parse(value);

if (Number.isNaN(timestamp)) {
  throw new Error(
    'Invalid date'
  );
}

Основная проблема при работе с датами в JavaScript связана не с самим Date.parse(). Проблемы появляются, когда смешиваются разные типы данных: календарные даты, локальное время и конкретные моменты времени. 🔥 Перед использованием Date важно определить, что именно хранится в данных: дата, время события или значение, которое зависит от часового пояса. Только после этого стоит выбирать способ представления и обработки. 📣 Code Ready | #практика

Пачку офферов заказывали? О всех трудоустройствах через ИИ-ассистента Софи ребята узнают от пользователей. И какой же кайф, когда они делятся своими историями. Вот так в чате узнали сразу о трех новых офферах: • Кейс Сергея - 2 недели в Софи и 2 оффера. • Кейс Елены - 1 неделя в Софи и оффер спустя 10 лет перерыва в работе. Елене 52 года. • Кейс Юлии - 1 месяц в Софи, свитчер из финансового аналитика в разработчика SQL. И еще один оффер🎉 Искренние поздравления ребятам и удачи им на новой работе! В следующий раз доступ в Софи откроется уже 21 июля. Если хочешь получить 3 дня бесплатного доступа - подписывайся на этот канал, все анонсы будут там.

🤔 HTML5Book — большой учебник по HTML, CSS и JavaScript! На сайте собрана большая база материалов по веб-разработке: подробные уроки по HTML5, CSS3, JavaScript и jQuery, а также удобные справочники по HTML- и CSS-свойствам. Здесь можно найти разбор тегов, форм, анимаций, Flexbox, Grid, DOM и других ключевых технологий фронтенда. Большое количество практических примеров, готовых решений и UI-эффектов для интерфейсов. 📌 Оставляю ссылочку: html5book.ru 📣 Code Ready | #сайт

CSS-вычисления теперь работают с auto и max-content! Многие знают calc(), но он не умеет вычислять auto, max-content, fit-content и min-content. Например, так написать нельзя:

.panel {
  width: calc(max-content + 2rem);
}

Такое значение считается невалидным. Для этого появился calc-size().

.panel {
  width: calc-size(max-content, size + 2rem);
}

Теперь браузер сначала вычисляет max-content, а затем прибавляет к нему 2rem. Это работает и с другими размерами, зависящими от содержимого.

.panel {
  height: calc-size(auto, size + 1rem);
}

Полезно, когда элемент должен сохранить естественный размер содержимого, но при этом стать немного больше без JS. 🔥 calc-size() позволяет выполнять вычисления с auto, max-content и fit-content — то, чего обычный calc() делать не умеет. 📣 Code Ready | #совет

1000+ свежих IT-вакансий каждый месяц в одном месте 🤘 Пока другие листают hh — мы ищем вакансии по всему рынку: каналы, сайты компаний, стартапы и закрытые источники. IT Россия IT СНГ Стажировки Digital Международка Удалёнка Python Бигтех Дизайн QA Джунам Frontend Аналитика Стартапы за рубежом DevOps Не с HH Автоотклики

👩‍💻 Отображаем математические формулы с помощью тега <math>! Тег <math> используется для встраивания математических выражений на веб-страницу с помощью языка MathML. Он позволяет отображать дроби, степени, корни, индексы, матрицы и другие математические конструкции без изображений. Кроме глобальных атрибутов, <math> поддерживает:

• display="inline" — формула отображается внутри строки (по умолчанию). • display="block" — формула выводится отдельным блочным элементом. • alttext — альтернативное текстовое описание формулы.

Все теги MathML чувствительны к регистру: используйте строго строчные (<msup>, а не <MSUP>). Для лучшего внешнего вида можно подключать стили к формуле, но аккуратно, некоторые свойства не работают 📣 Code Ready | #атрибут