👩‍💻 Реализация глубокого копирования объекта

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

Пример кода:

const obj = { 
  name: "Alice", 
  info: { age: 25, hobbies: ["reading", "swimming"] } 
};
const copy = deepClone(obj);

console.log(copy); // { name: "Alice", info: { age: 25, hobbies: ["reading", "swimming"] } }
copy.info.age = 30;
console.log(obj.info.age); // 25 (изменение не повлияло на оригинальный объект)

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

function deepClone(obj) {
if (obj === null || typeof obj !== 'object') {
return obj;
}

if (Array.isArray(obj)) {
return obj.map(deepClone);
}

const clone = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key]);
}
}
return clone;
}

// Примеры использования
const obj = {
name: "Alice",
info: { age: 25, hobbies: ["reading", "swimming"] }
};
const copy = deepClone(obj);

console.log(copy); // { name: "Alice", info: { age: 25, hobbies: ["reading", "swimming"] } }
copy.info.age = 30;
console.log(obj.info.age); // 25 (изменение не повлияло на оригинальный объект

⚡️ Как развернуть Supabase в облаке Timeweb Cloud

В статье расскажем, как Supabase — бесплатный аналог Google Firebase — помогает разработчикам быстро создавать приложения и сайты. Узнаете, как работать с базой данных, аутентификацией, хранением файлов и реальным временем, без необходимости управлять сервером.

Читать...

🔍 Maskito: то, что вы давно искали

В этой статье рассмотрим, как форматировать ввод данных в формах для удобства пользователей. Обсудим проблемы существующих библиотек маскирования и предложим более эффективное собственное решение.

Читать...

👩‍💻 Что, если использовать контейнерные единицы измерения для... всего

Однажды я спросил себя: а что, если использовать контейнерные единицы измерения для каждого элемента дизайна? Я задался этим вопросом, отчасти потому, что мне показалось, что ответ может быть таким: ну, тогда всё будет очень хорошо масштабироваться!

Читать...

👩‍💻 On-Scroll Fire Transition

Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript.

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

👩‍💻 Как использовать менеджер состояний NgRx для Angular-проектов

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

Читать...

👩‍💻 Современные тренды CSS: эволюция функций

Рабочая группа CSS выпустила новый модуль Values and Units Level 5: меньше кода, больше возможностей – звучит как мечта? Давайте вместе разберемся, как эти новшества изменят нашу работу и сделают веб красивее.

Читать...

➡️ 6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

Небольшая подборка малоизвестных техник для HTML, CSS и JavaScript.

Читать...

👩‍💻 Как работает свойство object-fit в CSS?

Свойство object-fit позволяет управлять масштабированием содержимого (например, изображений или видео) внутри контейнера, не искажая его соотношение сторон. Это особенно полезно при создании адаптивных и аккуратных галерей.

➡️ В этом примере изображение заполняет контейнер, сохраняя пропорции, благодаря значению cover:

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

🗣 Свойство object-fit помогает контролировать отображение изображений в контейнерах, не растягивая и не искажая их.

👩‍💻 8 неэффективных практик JavaScript, которых лучше избегать

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

Читать...

👩‍💻 Автоматическая караоке-система на основе React и Vercel

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

Читать...

➡️ Пара шаблонов кастомизированных элементов Handlebars для Apache Superset

Apache Superset — популярный инструмент для визуализации данных с открытым кодом. Но при его использовании можно столкнуться с ограничениями. В статье обсуждается, как с помощью шаблонов Handlebars и Jinja решать эти проблемы, включая интеграцию web-верстки в дашборды и обход ограничений системы.

Читать...

📏 Код ревью — это не поиск багов

Многие воспринимают ревью как проверку на ошибки. Но баги должны ловить тесты.

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

👩‍💻 React и FormData

Узнайте о новейшем и одновременно старейшем стандарте React для доступа к данным формы, а также о том, как использовать его с TypeScript.

Читать...

⚙️ Паттерн «Бэкенд для фронтенда»: преимущества, недостатки и лучшие практики для реализации

Если ты хочешь стать настоящим мастером API, тебе нужно знать о паттерне BFF. В этой статье рассказываем, как создавать управляемую архитектуру с использованием BFF, избегая избыточной сложности и головной боли при поддержке.

Читать...

⚙️ Как работает свойство z-index в CSS?

z-index управляет тем, как элементы накладываются друг на друга в трёхмерном пространстве веб-страницы. Элементы с большим значением z-index будут отображаться поверх тех, у которых значение меньше.

➡️ В этом примере элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1:

.element1 {
  position: relative;
  z-index: 1;
}

.element2 {
  position: relative;
  z-index: 2;
}

🗣 Важно помнить, что свойство z-index работает только с элементами, у которых установлено позиционирование (position: relative, absolute, fixed или sticky).

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

👩‍💻 Profile Card UI

Стильная карточка-портфолио с анимированными кнопками. Сделан на Svg, SCSS и JavaScript.

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

❓ Как быстро разобраться в Next.js 14: 5 советов опытного фронтендера

Делимся пятью советами, которые помогут быстро разобраться в тонкостях работы с изображениями, переменными окружения, кэшированием и управлением компонентами в Next.js.

Читать...

👩‍💻 Масштабируемый CSS с архитектурой ITCSS

Статья рассказывает об архитектуре Inverted Triangle CSS, которая помогает масштабировать и поддерживать крупные CSS проекты. Обсуждаются причины выбора, пошаговая реализация и сравнение с другими подходами.

Читать...

👩‍💻 Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

Читать...