⚙️ Что такое теневые DOM-деревья (Shadow DOM) и как они работают?

Shadow DOM — это ключевая часть технологии Web Components, которая позволяет создавать инкапсулированные области DOM с собственным стилем и поведением. Теневые DOM-деревья изолированы от остального документа, что предотвращает конфликты стилей и упрощает создание переиспользуемых компонентов.

➡️ Пример:

// Создание элемента с Shadow DOM
const host = document.createElement('div');
const shadowRoot = host.attachShadow({ mode: 'open' });

// Добавление стилей и контента
shadowRoot.innerHTML = `
  <style>
    p {
      color: blue;
    }
  </style>
  <p>Это текст внутри Shadow DOM</p>
`;

document.body.appendChild(host);
console.log(document.querySelector('p')); // null (элемент скрыт из глобального DOM)

🗣️ В этом примере текст внутри Shadow DOM изолирован. Стили из Shadow DOM не влияют на остальную страницу, и наоборот. Shadow DOM полезен для создания самодостаточных UI-компонентов.

🖥 Подробнее тут

↔️ CSS Container Queries — адаптивность без костылей

Адаптивность через @media — привычная вещь, но неудобная: когда один компонент используется в разных местах, его поведение зависит от размера окна браузера, а не от его контейнера. В итоге — хаки и дублирование стилей.

ℹ️ Как было раньше (через media queries):

.card .noscript {
font-size: 1rem;
}

@media (min-width: 768px) {
.card .noscript {
font-size: 2rem;
}
}

ℹ️ Как стало с Container Queries:

.card {
container-type: inline-size;
container-name: card;
}

.noscript {
font-size: 1rem;
}

@container card (min-width: 400px) {
.noscript {
font-size: 2rem;
}
}

Проблема: Если компонент .card вставить в узкий сайдбар на широком экране, стили могут «сломаться», так как адаптивность зависит от окна браузера, а не от контейнера. Теперь .noscript реагирует на размер контейнера, а не на размер вьюпорта. Это решение убирает все костыли и делает компоненты более гибкими.

Теперь можно создавать по-настоящему адаптивные компоненты без костылей. Поддержка в Chrome, Edge и Safari уже есть, так что пора пробовать в продакшене!

🚪 Frontender's notes

👩‍💻 TS Extend: полезная утилитарная функция для расширения type

Статья объясняет ограничения TypeScript 5.7 в работе с расширением типов, демонстрирует проблему интерсекции с одинаковыми свойствами и предлагает утилиту Extend для корректной обработки таких случаев.

Читать...

👩‍💻 Уникальные значения из массива

Напишите функцию, которая принимает массив и возвращает новый массив, содержащий только уникальные значения из исходного массива.

Пример:

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = getUniqueValues(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Решение задачи🔽

function getUniqueValues(arr) {
return [...new Set(arr)];
}

// Пример использования
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = getUniqueValues(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

🔝 Самые интересные статьи за последние дни:

• RUINSWORLD: Многопользовательский шутер с открытым миром для браузера на js/ts, Three и Vue. Бета-версия

• Рецепты TypeScript: простое тестирование типов

• Как я создала приложение, которое решает, что мне есть

• Vite 6.0: Новые возможности и будущее веб-разработки

• Наиболее эффективные методы улучшения Core Web Vitals

📣 Софт-скилл для фронтенд-разработчика: как объяснять сложные вещи просто

На разных уровнях в разработке — от мидла до лида — основным становится не только код, но и то, как ты доносишь свои мысли и идеи. Умение ясно и доступно объяснить технические вопросы — это не просто бонус, а важный навык для любой команды.

🔎 Какие ошибки часто встречаются?

• Слишком много абстракций. Использование сложных терминов и понятий часто сбивает собеседника с толку
• Лишняя сложность. В 15 минутах объяснения, где можно было бы уложиться в 2, теряется фокус
• «Очевидные» вещи. То, что кажется очевидным тебе, может быть абсолютно непонятно другим

📣 Что стоит делать, чтобы улучшить коммуникацию?

• Структурированность. Начни с главного: сначала объясни зачем это нужно, затем что происходит, и в конце уже объясни как это работает
• Примеры вместо теории. Пример: вместо «нужно оптимизировать рендеринг», лучше сказать «компонент перерисовывается 20 раз, хотя данные изменяются лишь один раз»
• Адаптация под собеседника. Общайся с джуном на доступном языке, с продактом избегай тех. жаргона, а с архитектором можно углубиться

➡️ Этот навык полезен в code review, созвонах с заказчиком или продуктом, наставничестве джунов и презентации архитектурных решений. Он помогает ясно и доступно объяснять сложные концепции без лишних деталей.

Ключевая мысль. Хороший разработчик хорошо пишет код. Сильный разработчик — не только пишет код, но и умеет объяснять его так, чтобы все поняли. Это делает тебя важным членом команды, на которого можно опереться.

🚪 Frontender's notes

🛡 Парольная защита статичной HTML-страницы на JS

Как защитить веб-страницы паролем без серверной поддержки? Инструменты StatiCrypt и Portable Secret помогут зашифровать HTML с использованием AES-256. Статические страницы остаются безопасными даже на публичном хостинге.

Читать...

👩‍💻 Таймер обратного отсчёта

Создайте простую страницу с таймером обратного отсчёта. Пользователь вводит количество секунд, нажимает кнопку "Старт", и таймер начинает обратный отсчёт до нуля. После окончания таймера на экране отображается сообщение "Время вышло!".

Решение задачи🔽

<input type="number" id="timeInput" placeholder="Введите секунды">
<button id="startButton">Старт</button>
<div id="timer">0</div>

const input = document.getElementById('timeInput');
const button = document.getElementById('startButton');
const timerDisplay = document.getElementById('timer');
let timerId;

button.addEventListener('click', () => {
const seconds = parseInt(input.value, 10);
if (isNaN(seconds) || seconds <= 0) {
timerDisplay.textContent = 'Введите корректное число!';
return;
}

clearInterval(timerId);
let remainingTime = seconds;

timerDisplay.textContent = remainingTime;
timerId = setInterval(() => {
remainingTime -= 1;
if (remainingTime <= 0) {
clearInterval(timerId);
timerDisplay.textContent = 'Время вышло!';
} else {
timerDisplay.textContent = remainingTime;
}
}, 1000);
});

👩‍💻 Cube & Dots Loader

Анимированная загрузка в виде точек и куба. Сделана на чистом CSS.

Открыть код...

⚙️ В чем разница между == и === в JavaScript?

В JavaScript операторы == и === используются для сравнения, но ведут себя по-разному. == выполняет нестрогое сравнение, при котором JavaScript может преобразовать типы данных для сопоставления значений. В отличие от него, === выполняет строгое сравнение, проверяя как значение, так и тип данных, без приведения типов.

➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.

🖥 Подробнее тут

👩‍💻 CSS :has() — Псевдокласс, который давно ждали

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

Читать...

👩‍💻 Простой калькулятор с динамическим вводом

Создайте калькулятор, который позволяет выполнять основные арифметические операции (сложение, вычитание, умножение, деление). Пользователь вводит два числа и выбирает операцию из выпадающего списка. Результат отображается автоматически.

Требования:

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

Решение задачи🔽

<div>
<input type="number" id="num1" placeholder="Введите первое число">
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input type="number" id="num2" placeholder="Введите второе число">
</div>
<div>
<h3>Результат: <span id="result">0</span></h3>
</div>

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operation = document.getElementById('operation');
const result = document.getElementById('result');

function calculate() {
const value1 = parseFloat(num1.value) || 0;
const value2 = parseFloat(num2.value) || 0;

let res = 0;
switch (operation.value) {
case 'add':
res = value1 + value2;
break;
case 'subtract':
res = value1 - value2;
break;
case 'multiply':
res = value1 * value2;
break;
case 'divide':
res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)';
break;
}

result.textContent = res;
}

[num1, num2, operation].forEach(element => {
element.addEventListener('input', calculate);
});

⚙️ Кнопки с несколькими состояниями

Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.

Читать...

📈 Подборка статей для вашей карьеры

• Как сделать резюме, которое дойдёт до работодателя. Фильтры ATS в 2025 году

• Ошибайся смело: жизненные уроки из мира machine learning

• Как учиться во взрослом возрасте: 7 советов, проверенных на практике

• Нейросети, чат-бот и диджитал-адаптация: цифровые инструменты внутрикома

• Долгосрочная стабильность vs. карьерная мобильность

⚙️ 9 open source библиотек для вашего следующего проекта

Разработчики часто сталкиваются с выбором, какие инструменты использовать для своего следующего проекта. Даже если вы серьёзно настроены на разработку продукта, проблема остаётся той же.

В этой статье я расскажу о 9 библиотеках с открытым исходным кодом, которые улучшат ваш проект.

Читать...

⚙️ Что такое AbortController в JavaScript и зачем он используется?

AbortController — это API, который позволяет отменять асинхронные операции, такие как запросы fetch. Это полезно для предотвращения утечек ресурсов и отмены операций, которые больше не нужны.

➡️ Пример:

const controller = new AbortController();
const signal = controller.signal;

// Отправляем запрос с возможностью отмены
fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error(err);
    }
  });

// Отмена запроса через 500 мс
setTimeout(() => controller.abort(), 500);

🗣️ В этом примере AbortController отменяет запрос через 500 мс. Это позволяет избежать обработки ненужных данных, если, например, пользователь покинул страницу или отменил действие.

🖥 Подробнее тут

🤔 Разбираемся с цветами: пространства, иллюзии и квантование

Статья исследует природу цвета, его восприятие и обработку. Рассмотрим дискретизацию, цветовые модели, пространство и причины несоответствия при передаче изображений. Узнайте, что скрывается за HEX-кодами.

Читать...

🎯 Ставь цели на день через "3 приоритета"

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

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

👩‍💻 Реализация интерактивной карты

Наглядный пример того, как с помощью JS API можно создавать нестандартные интерактивные карты. Яндекс Еда опубликовала исследование самых характерных блюд в городах в России и для визуализации использовала решение от API Яндекс Карт. Оно удобно тем, что позволяет легко и быстро настраивать цвета и детальность карты, убирать или добавлять нужную информацию.

Читать...

📝 HTML <dialog> — нативные модальные окна без использования JS

Модальные окна — один из самых популярных элементов интерфейса, с которым часто приходится работать на фронтенде. Раньше, чтобы реализовать модалку, нам приходилось подключать внешние библиотеки или писать кастомные решения. Но в HTML5 появилась нативная поддержка модальных окон через <dialog>, что значительно упрощает задачу.

❌ Как было раньше:

<div class="modal hidden">
<p>Привет!</p>
<button onclick="closeModal()">Закрыть</button>
</div>

<style>
.hidden { display: none; }
</style>

<noscript>
// Какой то JS код
</noscript>

➕ Как стало с <dialog>:

<dialog id="myDialog">
<p>Привет!</p>
<button onclick="myDialog.close()">Закрыть</button>
</dialog>

<button onclick="myDialog.showModal()">Открыть</button>

Для реализации модальных окон часто использовался обычный <div> с добавлением классов для отображения и скрытия, а также JavaScript для управления этим процессом. Чтобы скрыть или показать модалку, нужно было вручную изменять стили или использовать JS-функции.

ℹ️ Как <dialog> упрощает работу и где полезно:

— .showModal(): открывает модалку
— .close(): закрывает модалку
— Улучшение доступности: <dialog> уже дружит с screen readers
— Браузер сам обрабатывает фон и клавишу Esc для закрытия окна
— Модальные окна (уведомления, формы, подтверждения)
— Быстрые прототипы без лишнего JS

📌 Если вам не нужно сложное оформление и анимации, то <dialog> идеально подходит для реализации модальных окон с минимальными усилиями. Код при этом минималистичен. Конечно, для более сложных задач и дизайнов без дополнительных стилей и JavaScript не обойтись, но для простых задач пойдет.

🚪 Frontender's notes

👩‍💻 Remove anchor from URL

Завершите функцию/метод так, чтобы он возвращал URL с чем-либо после удаления привязки (#).

Пример кода:

"www.codewars.com#about" --> "www.codewars.com"
"www.codewars.com?page=1" -->"www.codewars.com?page=1"

Решение задачи🔽

function removeUrlAnchor(url) {
return url.split('#')[0];
}

// Примеры использования
console.log(removeUrlAnchor("www.codewars.com#about")); // "www.codewars.com"
console.log(removeUrlAnchor("www.codewars.com?page=1")); // "www.codewars.com?page=1"