Code Ready | Frontend

🔥 Глобальное обновление программ 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 | #атрибут

Node.replaceWith() — замена DOM-элемента без пересборки HTML! Когда нужно заменить элемент на странице, часто используют innerHTML, outerHTML или удаляют старый узел, а потом создают новый. В небольших интерфейсах разницы почти не видно, но внутри браузера это разные операции. Если вы работаете с динамическими интерфейсами, где есть состояние элементов и обработчики событий, такие детали становятся важными. Например:

const oldElement = document.querySelector('.message');

oldElement.outerHTML = `
  <div class="success">
    Saved
  </div>
`;

Выглядит просто: старый элемент заменили новым. Но браузер получает строку HTML, разбирает её и создаёт новый DOM-узел. Старый элемент исчезает из DOM, а на его месте появляется другой объект. Если где-то была сохранена ссылка на старый элемент или на нём были обработчики событий, они не перейдут автоматически. Для браузера это уже другой DOM-объект. Для замены конкретного узла есть более подходящий метод:

const oldElement = document.querySelector('.message');

const newElement = document.createElement('div');

newElement.textContent = 'Saved';

oldElement.replaceWith(newElement);

replaceWith() работает непосредственно с DOM-узлами. Браузеру не нужно заново парсить HTML-строку — он получает готовый элемент и заменяет только нужное место в DOM-дереве. Это удобно, когда вокруг элемента есть другая разметка, которую не нужно трогать. Например:

const button = document.querySelector('.button');

const loader = document.createElement('span');

loader.textContent = 'Loading...';

button.replaceWith(loader);

Меняется только button. Родительский элемент, соседние узлы и остальная структура страницы остаются без изменений. Разница хорошо заметна, если сравнить с innerHTML. Например:

const container = document.querySelector('.container');

container.innerHTML = `
  <div class="card">
    New content
  </div>
`;

Здесь браузер заново создаёт содержимое контейнера из строки. Даже если часть элементов выглядит так же, это могут быть уже новые DOM-объекты. Например:

const input = document.querySelector('.search');

input.value = 'frontend';

container.innerHTML += `
  <div>
    New block
  </div>
`;

Если input находится внутри container, старый элемент будет пересоздан вместе с содержимым. Можно потерять значение поля, обработчики событий и ссылки на старые DOM-объекты. Именно поэтому innerHTML += часто становится причиной багов. replaceWith() такого поведения не создаёт, потому что меняет только указанный узел. Например:

const title = document.querySelector('.title');

const newTitle = document.createElement('h2');

newTitle.textContent = 'New title';

title.replaceWith(newTitle);

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

const button = document.querySelector('.button');

button.addEventListener('click', handleClick);

const newButton = document.createElement('button');

button.replaceWith(newButton);

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

newButton.addEventListener('click', handleClick);

Также replaceWith() может принимать несколько узлов:

element.replaceWith(title, text, button);

Браузер удалит старый элемент и вставит переданные узлы на его место. Причём это могут быть не только элементы, но и текстовые узлы:

element.replaceWith('Hello');

🔥 Подведем итог: replaceWith() удобен для точечной замены DOM-элементов без повторного парсинга HTML и пересоздания всей окружающей структуры. В отличие от innerHTML, он работает напрямую с узлами и даёт больше контроля над изменениями DOM. 📣 Code Ready | #практика

IT мероприятия 🤘 Всё самое интересное для карьеры в IT: митапы, хакатоны, конференции, стажировки и обучение. Подписывайся 🤘 1. Москва 2. Санкт-Петербург 3. Для стажеров и студентов

Крутая статья попалась на Хабре: «HTML Sanitizer API: конец эпохи DOMPurify и XSS-страданий»! В этой статье: • Разбирается, почему привычные способы защиты от XSS становятся сложнее и какие проблемы есть у старых подходов вроде DOMPurify; • Показывается новый HTML Sanitizer API, который позволяет безопаснее работать с пользовательским HTML прямо на уровне браузера; • Объясняется, как современные веб-разработчики могут упростить код и повысить безопасность приложений.

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

📣 Code Ready | #статья

Проверяем интернет-скорость! Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет speedtest-net, который позволяет получить скорость загрузки, отдачи и пинга. Такой скрипт можно встроить в мониторинг или просто проверить сеть без браузера. Шаг 1 — импортируем:

const speedTest = require('speedtest-net');

Шаг 2 — запускаем тест:

(async () => {
  const res = await speedTest({ acceptLicense: true });
})();

Шаг 3 — форматируем и выводим результаты:

// Загрузка
console.log(`Download: ${(res.download.bandwidth / 125000).toFixed(2)} Mbps`);

// Выгрузка
console.log(`Upload: ${(res.upload.bandwidth   / 125000).toFixed(2)} Mbps`);

// Пинг
console.log(`Ping: ${res.ping.latency} ms`);

🔥 Теперь у тебя свой speedtest прямо в коде. Можно запускать вручную или добавить в cron для регулярного замера. 📣 Code Ready | #практика