JS Задача: Глубокое клонирование объекта

Описание:
Реализуйте функцию deepClone(obj), которая создает глубокую копию объекта. Изменения в клонированном объекте не должны затрагивать исходный.

Пример
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);
clone.b.c = 42;
console.log(original.b.c); // 2
console.log(clone.b.c);    // 42

#домашка

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

Лучшие статьи @free_html_lessons:
1. Оптимизация верстки
2. Pointer events
3. Инструменты для верстальщика

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер

#лучшеезанеделю

Полезные плагины для PostCSS

PostCSS — это мощный инструмент для работы с CSS, который позволяет автоматизировать множество задач. Вот подборка плагинов, которые помогут вам писать чистый, современный и оптимизированный код:

1. Autoprefixer
Автоматически добавляет вендорные префиксы для поддержки старых браузеров. Больше не нужно вручную писать -webkit-, -moz- или -ms-.
👉 https://github.com/postcss/autoprefixer

2. CSSNano
Минификатор CSS, который удаляет лишние пробелы, комментарии и оптимизирует ваш код для production.
👉 https://github.com/cssnano/cssnano

3. PostCSS Preset Env
Позволяет использовать современные возможности CSS (например, кастомные свойства, вложенные правила и т.д.), которые будут автоматически преобразованы для поддержки старых браузеров.
👉 https://github.com/csstools/postcss-preset-env

4. PostCSS Import
Позволяет импортировать CSS-файлы прямо в ваш основной файл стилей, что упрощает организацию кода.
👉 https://github.com/postcss/postcss-import

5. PostCSS Nesting
Добавляет поддержку вложенных правил, как в Sass или Less. Теперь можно писать вложенные селекторы без препроцессоров!
👉 https://github.com/jonathantneal/postcss-nesting

6. PostCSS Custom Properties
Позволяет использовать CSS-переменные (кастомные свойства) даже в браузерах, которые их не поддерживают.
👉 https://github.com/postcss/postcss-custom-properties

7. PostCSS Sort Media Queries
Автоматически сортирует медиа-запросы, что упрощает чтение и поддержку кода.
👉 https://github.com/solversgroup/postcss-sort-media-queries

8. Stylelint
Не совсем плагин, но мощный линтер для CSS, который помогает находить ошибки и соблюдать стиль кода. Интегрируется с PostCSS.
👉 https://github.com/stylelint/stylelint

9. PostCSS Assets
Упрощает работу с ассетами (изображения, шрифты и т.д.), позволяя автоматически управлять путями и кэшированием.
👉 https://github.com/borodean/postcss-assets

10. PostCSS Pxtorem
Автоматически преобразует пиксели (px) в rem, что полезно для создания адаптивных интерфейсов.
👉 https://github.com/cuth/postcss-pxtorem

#css | #полезности

Intersection Observer

Что это такое?
Intersection Observer позволяет отслеживать пересечение элемента с областью видимости (viewport) или другим родительским элементом. Это особенно полезно для:

Ленивой загрузки изображений (lazy loading),
Реализации бесконечной прокрутки,
Анимации элементов при появлении в зоне видимости,
Фиксации элементов при прокрутке (например, кнопок или меню).
Как это работает?

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент виден на экране!');
    } else {
      console.log('Элемент исчез с экрана!');
    }
  });
});

Выбираем элемент для отслеживания:

const target = document.querySelector('.my-element');
observer.observe(target);
Настройка через параметры (threshold и rootMargin):
```const observer = new IntersectionObserver(callback, {
  threshold: 0.5, // Элемент должен быть виден на 50%
  rootMargin: '0px 0px -50px 0px' // Отступы вокруг зоны видимости
});

Пример использования:
Допустим, нужно, чтобы кнопка "Добавить в корзину" прилипала к низу экрана, когда исчезает из зоны видимости:

const button = document.querySelector('.add-to-cart');
const observer = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    button.classList.add('sticky');
  } else {
    button.classList.remove('sticky');
  }
}, { threshold: 1 });
observer.observe(button);

Почему это лучше, чем scroll?
Эффективность: Intersection Observer работает асинхронно и не грузит основной поток.
Гибкость: Можно отслеживать любые элементы и точно настроить, как и когда срабатывают события.
Производительность: Браузер оптимизирует работу Observer, что особенно важно для мобильных устройств.

#js

Псевдокласс :is() в CSS

Читать 🧑‍💻

#css | #теория

Псевдокласс :where() в CSS

Читать 🧑‍💻

#css | #теория

Макет для тренировки (вкусно маркет)

Перейти к макету 🧑‍💻

#практика | #макет

СSS Задача: CSS Grid

Создайте сетку, в которой три блока будут равномерно распределены по ширине. При уменьшении ширины экрана до 600px блоки должны располагаться друг под другом.

Подсказка: Используйте grid-template-columns и медиа-запросы.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Полезные плагины для PostCSS
2. Intersection Observer
3. Псевдокласс :where() в CSS

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер

#лучшеезанеделю

Верстка HTML-писем. Часть 1

Читать 👨‍💻

#html | #теория

Верстка HTML-писем. Часть 2

Читать 👨‍💻

#html | #теория

Макет для тренировки (miami)

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Сделать кнопку "Добавить в корзину" с эффектом sticky

На странице карточки товара нужно реализовать кнопку "Добавить в корзину", которая всегда будет видна пользователю при прокрутке страницы. Кнопка должна прилипать к нижней части экрана, когда пользователь прокручивает страницу вниз, но оставаться на своём месте, когда прокрутка находится в верхней части.

Требования:
- Кнопка должна быть изначально расположена под описанием товара.
- При прокрутке вниз кнопка должна "прилипать" к нижней части окна браузера.
- Кнопка должна занимать всю ширину экрана на мобильных устройствах и быть фиксированной внизу.

Ожидаемый результат:
При скролле вниз кнопка остаётся в нижней части окна браузера.
При возвращении наверх кнопка возвращается на своё место под описанием товара.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Анимация печатания на css
2. Верстка HTML-писем. Часть 1
3. Верстка HTML-писем. Часть 2

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI исследователь
2. Web-дизайнер
3. UX/UI Дизайнер

#лучшеезанеделю