А ты использовал :has() в CSS?

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

Примеры Использования:
С помощью :has() можно выбирать элементы, содержащие определенные дочерние элементы. Например:

button:has(> svg) { 
   /* Добавляем стили для кнопок, содержащих элементы svg */
}

Также можно комбинировать :has() с другими псевдоклассами для более тонкой настройки выборки:

.div:has(img:not([alt])) {
   /* Добавляем стили для div, содержащих изображения без атрибута alt */
}

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

#css

При разработке приложений на React мы часто прибегаем к условному рендерингу. В этом посте мы рассмотрим одну из распространенных проблем при использовании оператора &&

Частая ошибка:
Один из распространенных способов условного рендеринга в React - использование оператра &&, например, array.length && <div/>. Этот подход позволяет отображать компонент только при выполнении определенного условия, в данном случае, при наличии элементов в массиве.

Проблема с нежелательным выводом:
Однако, если array.length равен 0, выражение array.length && <div/> вернет 0. Это приведет к нежелательному выводу в JSX, что может сбить с толку.

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

array.length > 0 ? <div/> : null

или явно привести к Boolean

Boolean(array.length) && <div/>

Итого:
Для более точного и предсказуемого управления условным рендерингом в React рекомендуется применять явные и четкие условия, избегая неявных преобразований и тем самым улучшая читаемость кода.

Мы уже рассматривали подходы к условному рендерингу в этом посте(тык)

#react #codestyle

Значения, которые React игнорирует в JSX

Знали ли вы, что в React есть значения, которые просто игнорируются при рендеринге JSX?

false, null, undefined и true могут быть использованы в JSX, но они не будут отображаться. Важно отметить, что некоторые "ложные" значения, например, число 0, всё же будут отображены React. Это обсуждалось в предыдущем посте(тык), где рекомендуется явно приводить их к типу boolean, чтобы избежать этой ситуации.

Если вы хотите, чтобы значения типа false, true, null или undefined были видны в выводе, перед их использованием их следует преобразовать в строки.

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

#react

Компоненты высшего порядка в React

Компонент высшего порядка(HOC) - это функция, которая принимает компонент и возвращает новый компонент. Она предоставляет удобный способ обернуть компоненты, расширив их возможности без изменения основной структуры.

Вероятно, вы уже сталкивались с React.memo(). Этот HOC представляет собой эффективный инструмент для предотвращения лишних перерисовок функциональных компонентов при неизменных пропсах.

Давайте напишем простой HOC, который обернет компонент и добавит отслеживание кликов по нему. Часто хорошей практикой является называть HOC с префиксом "with", что делает его назначение более понятным для других разработчиков.
Вот пример реализации:

// HOC добавляющий логику для отслеживания кликов
const withClickTracker = (WrappedComponent) => {
  const ClickTracker = (props) => {
    const handleClick = () => {
      console.log('Кликнули по компоненту:', WrappedComponent.name);
    };

    return (
      <div onClick={handleClick}>
        <WrappedComponent {...props} />
      </div>
    );
  };

  return ClickTracker;
};

// Компонент, который будет обернут HOC
const Button = ({ children }) => {
  return <button>{children}</button>;
};

// Обернем компонент Button с использованием HOC
const ButtonWithClickTracker = withClickTracker(Button);

// Используем новый компонент
const App = () => {
  return <ButtonWithClickTracker>Нажми меня</ButtonWithClickTracker>;
};

Преимущества использования HOC:
- Позволяет избежать дублирования кода, добавляя функциональность к нескольким компонентам.
- Помогает разделить различные аспекты функциональности компонента, делая код более модульным и понятным.
- Могут использоваться вместе, образуя цепочки для создания сложных компонентов с разнообразной функциональностью.

Итого:
Компоненты высшего порядка - это мощный инструмент для улучшения структуры вашего кода в React. Они позволяют создавать более гибкие, переиспользуемые и легко поддерживаемые компоненты. Понимание и умение использовать HOC может значительно улучшить разработку ваших приложений на React.

#react

Регулярные выражения

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

В JavaScript регулярные выражения представлены объектом RegExp. Они используются для поиска определенных паттернов в строках. Синтаксис регулярных выражений включает в себя различные символы и метасимволы, такие как ^, $, ., *, +, ?, [ ], { }, | и другие.

Практические примеры:
- Использование регулярных выражений для поиска определенных слов или выражений в строке.
- Проверка на соответствие формату email, номера телефона и других данных.
- Замена определенных слов или символов в строке на другие.
- Выделение определенных частей строки по шаблону.

Если вы хотите быстро и удобно проверить ваше регулярное выражение на примерах текста, вы можете воспользоваться онлайн-сервисами, такими как regex101.com. Этот сайт предоставляет удобный инструмент для тестирования регулярных выражений.

Итого:
Регулярные выражения - это мощный инструмент для работы с текстом. Они предоставляют возможность проводить сложные операции с текстом, такие как поиск, извлечение, замена и проверка на соответствие шаблонам.

#javascript

Мы часто используем метод filter при работе с массивами в JavaScript, но что если создать собственную версию этого метода?

Метод filter cоздает новый массив с элементами, прошедшими проверку переданной функцией.
Давайте реализуем свою собственную версию этого метода для лучшего понимания его внутреннего устройства:

Array.prototype.customFilter = function(callback) {
  let filteredArray = [];
  for (let i = 0; i < this.length; i++) {
    // В callback передаются три параметра: текущий элемент массива, его индекс и оригинальный массив
    if (callback(this[i], i, this)) {
      filteredArray.push(this[i]);
    }
  }
  return filteredArray;
};

Этот пример добавляет новый метод customFilter к прототипу массива. Он принимает функцию обратного вызова callback, которая определяет условие фильтрации элементов.

Пример использования:

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.customFilter(item => item % 2 === 0);
console.log(evenNumbers); // Выведет: [2, 4]

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

Итого:
В этом посте мы рассмтрели процесс создания собственной версии метода filter для массивов. Это позволяет глубже понять внутреннее устройство метода и освоить приемы добавления кастомных методов к прототипам.

#javascript

Покорение this в JavaScript

Ключевое слово this в JavaScript - одно из понятий, которое может вызывать затруднения у разработчиков. Он играет важную роль в том, как функции взаимодействуют с объектами в JavaScript. Понимание того, как this работает, существенно для освоения языка и поможет избежать ошибок.

Что такое this?
this представляет собой ссылку на текущий объект, который вызывает функцию в JavaScript. Однако, его значение зависит от контекста, в котором функция была вызвана.

Пример использования this:

const cat = {
  name: 'Барсик',
  greet: function() {
    console.log(`Мур, меня зовут ${this.name}!`);
  }
};

cat.greet(); // Выведет "Мур, меня зовут Барсик!"

В этом примере this внутри функции greet ссылается на объект cat, и мы можем получить доступ к его свойству name через this.name.

Как работает this?
Значение this определяется тем, как вызывается функция. Существует несколько правил, определяющих контекст this:
- В глобальной области this ссылается на глобальный объект (в браузере это window)
- Когда функция вызывается как метод объекта, this указывает на сам объект(слева от точки), в контексте которого она вызывается
- При использовании конструктора (с помощью new) this относится к только что созданному экземпляру объекта
- Когда функция передается в качестве обработчика события, this указывает на элемент, к которому привязано событие
- При привязке через call, apply или bind можно явно указать, на что должен ссылаться this

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

const cat = {
  name: 'Барсик',
  greet: function() {
    setTimeout(function() {
      console.log(`Мур, меня зовут ${this.name}!`);
    }, 1000);
  }
};

cat.greet(); // Выведет "Мур, меня зовут undefined!"

В этом примере this внутри setTimeout указывает не на объект cat, а на глобальный объект (в браузере это window). Это происходит из-за потери контекста this во вложенной функции.

Как избежать проблем с this?
- Используя стрелочные функции, мы можем избежать потери контекста, так как они не имеют собственного this и берут его из окружающего контекста.
- Переменные или методы объекта могут быть сохранены в других переменных для сохранения контекста this.
- Явно привязать контекст с помощью методов call, apply, или bind, чтобы присвоить this определенному контексту

Итого:
Понимание this в JavaScript является важным навыком для любого разработчика. Он может быть запутанным, но при правильном понимании и использовании он становится мощным инструментом в руках разработчика JavaScript.

#javascript

Как работает React.memo и когда его следует использовать? В этой статье мы рассмотрим основы мемоизации компонентов в React.

-> Читать статью

#react

В этой статье мы разберем два ключевых типа в TypeScript: unknown и any. Их часто обсуждаются на собеседованиях и они важны для понимания разработчиками. Вы узнаете о ключевых различиях между unknown и any и расширите ваше понимание TypeScript.

-> Читать статью

#typescript

Погружение в области видимости JavaScript

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

Что такое область видимости?
Область видимости относится к контексту, в котором переменные и функции объявлены и доступны для использования. В зависимости от места объявления, переменные могут иметь глобальную, функциональную или блочную область видимости.

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

const globalVar = "Я глобальная переменная";
function testScope() {
    console.log(globalVar); // Доступ к глобальной переменной
}
testScope();

Функциональная область видимости:
Переменные, объявленные внутри функции, имеют локальную область видимости. Они доступны и могут быть изменены только в пределах этой функции, что обеспечивает их безопасность и предотвращает конфликты с переменными из других областей.

function testLocalScope() {
    const localVar = "Я локальная переменная";
    console.log(localVar); // Доступна только внутри функции
}
testLocalScope();
console.log(localVar); // Ошибка: localVar не определена

Блочная область видимости:
Введенная в ES6, блочная область видимости позволяет переменным, объявленным с помощью let и const, быть ограниченными блоками кода (например, циклами или условными операторами). Это дает больше контроля над тем, где и как переменные должны использоваться.

if (true) {
    const blockVar = "Я в блочной области видимости";
    console.log(blockVar); // Доступна внутри блока
}
console.log(blockVar); // Ошибка: blockVar не доступна вне блока

До ES6, var был основным способом объявления переменных в JavaScript. Переменные, объявленные через var, имеют некоторые уникальные особенности. Они подчиняются функциональной области видимости, а не блочной, и подвержены "всплытию" (hoisting).

function testVar() {
    if (false) {
        var functionScopedVar = "Я в функциональной области видимости";
    }
    console.log(functionScopedVar); // Доступна внутри функции
}
testVar();

Замыкания и области видимости:
Замыкания в JavaScript - это мощный паттерн, который позволяет функциям запоминать и доступать к переменным из области видимости, в которой они были созданы, даже после того, как эта область была закрыта.

function outerFunction() {
    const outerVar = "Я из внешней функции";

    function innerFunction() {
        console.log(outerVar); // Доступ к outerVar из внутренней функции
    }

    return innerFunction;
}

const myInnerFunction = outerFunction();
myInnerFunction(); // Выводит "Я из внешней функции"

Итого:
Понимание областей видимости в JavaScript является важным для фронтенд разработчика. Осведомленность о различиях между var, let и const и их соответствующих областях видимости поможет вам избежать непреднамеренных ошибок и конфликтов в вашем коде. Знание этих концепций демонстрирует глубокое понимание языка и его особенностей, что является ключевым фактором при оценке квалификации разработчиков.

#javascript

Замыкания в JavaScript

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

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

Как работают замыкания?
Давайте рассмотрим простой пример:

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

В этом примере, counter является замыканием. Оно сохраняет доступ к переменной count, которая определена во внешней функции createCounter.

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

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

Итого
Замыкания - это мощный инструмент в JavaScript, который не только позволяет сохранять данные и состояние, но и способствует более чистому и модульному коду. Понимание замыканий открывает двери для более продвинутых техник программирования.

#javascript

Разбор задачи с собеседования: Реализация Promise.all

На собеседованиях часто предлагают написать собственные реализации стандартных функций языка. Одним из таких заданий может быть написание своей версии Promise.all. Это отличный способ проверить понимание асинхронного программирования и работы с промисами.

Что такое Promise.all
Promise.all - это метод, который принимает массив промисов и возвращает новый промис, который разрешается, когда все промисы в массиве успешно завершены, или отклоняется, если хотя бы один промис отклонен.

Задача
Написать функцию promiseAll, которая ведет себя подобно Promise.all.
Функция должна:
1. Возвращать промис.
2. Разрешаться с массивом результатов, когда все промисы выполнены.
3. Отклоняться с той же причиной, что и первый отклоненный промис из массива.

Реализация promiseAll

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError('Arguments must be an array'));
    }

    const resolvedValues = [];
    let resolvedCount = 0;
    const promisesCount = promises.length;

    if (promisesCount === 0) {
      resolve(resolvedValues);
    }

    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(value => {
          resolvedValues[index] = value;
          resolvedCount += 1;
          if (resolvedCount === promisesCount) {
            resolve(resolvedValues);
          }
        })
        .catch(reject);
    });
  });
}

Объяснение реализации
1. Функция promiseAll принимает массив промисов promises.
2. Если promises не является массивом, функция отклоняется с TypeError.
3. Создаются переменные для хранения разрешенных значений и счетчика разрешенных промисов.
4. Промисы перебираются с помощью forEach, обрабатываясь через Promise.resolve для поддержки не-промисов.
5. Каждый раз, когда промис разрешается, его значение записывается в resolvedValues, и увеличивается resolvedCount.
6. При достижении resolvedCount значения promisesCount массив resolvedValues возвращается.
7. В случае отклонения любого промиса, основной промис отклоняется.

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

#interview #javascript

Разбираемся с схлопыванием отступов в CSS

Схлопывание отступов, является интересной особенностью CSS, которая часто становится источником вопросов для разработчиков. Это явление возникает, когда два вертикальных отступа (margin) находятся рядом друг с другом, и, вместо того чтобы складываться, они объединяются в один, принимая значение большего отступа. Этот процесс может существенно влиять на макет веб-страницы, делая понимание схлопывания отступов важным для правильной вёрстки.

Почему это происходит?
Схлопывание отступов - это часть спецификации CSS. Оно помогает предотвратить излишние отступы между элементами, что особенно полезно в потоковых макетах.

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

Как управлять схлопыванием:
- Добавление границы или паддинга к элементам помогает предотвратить схлопывание отступов, так как наличие этих свойств изменяет условия, при которых происходит схлопывание.
- Использование flex или grid вместо блочной модели позволяет избежать схлопывания отступов, обеспечивая более точный контроль над расстояниями между элементами.

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

#css

Использование useRef в React и почему createRef не подходит для функциональных компонентов

В React, рефы представляют мощный инструмент для работы с DOM-элементами и React-компонентами. Хотя createRef и useRef оба предназначены для работы с ref, их применение различается, особенно когда речь идет о функциональных компонентах.

useRef в Функциональных Компонентах
useRef - это хук, предлагающий универсальный и стабильный способ для хранения ссылок в функциональных компонентах. Он обладает следующими качествами:
- Сохраняет один и тот же объект ref между рендерами, обеспечивая стабильность.
- Можно использовать для хранения любых изменяемых данных, не приводящих к перерендеру - компонента.
Изменения в .current свойстве не вызывают перерендер компонента, что обеспечивает более эффективное управление состоянием

Пример использования:

function Component() {
  const ref = useRef(null);

  useEffect(() => {
    ref.current.focus();
  }, []);

  return <input ref={ref} />;
}

Ограничения createRef в функциональных компонентах
createRef обычно используется в классовых компонентах и при каждом рендере создает новый ref объект. В функциональных компонентах это приводит к проблемам:
- Создает новый ref при каждом рендере, что приводит к потере состояния ref между обновлениями.
- Не сочетается с концепцией хуков и функциональными компонентами.

Заключение
Для функциональных компонентов в React всегда стоит выбирать useRef из-за его стабильности и совместимости с хуками. В классовых компонентах подходящим выбором остается createRef

Софт скиллы для программистов

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

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

Ключевые причины:
- Коммуникативные навыки играют важную роль, так как умение четко и ясно выражать свои мысли необходимо для эффективного общения. Кандидаты, способные эффективно общаться, легко вписываются в команду и быстрее адаптируются к рабочему процессу.
- Командная работа необходима в IT-проектах, где совместная работа и способность достигать общих целей ценятся особенно высоко.
- Решение проблем часто важнее глубоких технических знаний, так как способность к творческому подходу и нахождению нестандартных решений помогает эффективно справляться с непредвиденными ситуациями.
- Адаптивность в быстро меняющемся мире технологий означает, что способность быстро обучаться и адаптироваться ценится выше узкоспециализированных навыков.
- Эмоциональный интеллект важен для создания гармоничной рабочей среды, так как он включает понимание и управление как собственными, так и чужими эмоциями.

Примеры применения софт скиллов:
- Эффективное общение на совещаниях помогает уточнить задачи и избежать недопонимания.
- Умение разрешать конфликты и находить компромиссы в командной работе облегчает совместную деятельность.
- Логический подход к решению проблем в критических ситуациях ведет к их более быстрому и эффективному разрешению.

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

Разбор задачи с собеседования: Потеря this в методе объекта

На собеседованиях часто задают вопросы, касающиеся контекста this и встроенных методов работы с массивами. Как мы уже обсуждали в одном из наших постов(тык), понимание this в JavaScript очень важно. Эти вопросы могут казаться базовыми, но они проверяют фундаментальное понимание языка и его особенностей. Рассмотрим пример кода, где требуется отфильтровать список задач по статусу.

Исходный код:

const todoService = {
  activeStatus: 'progress',
  todoItems: [
    { task: 'Подписаться на канал True Frontender', status: 'completed' },
    { task: 'Выучить JavaScript', status: 'progress' },
  ],
  getFilteredTodosByStatus: function() {
    return this.todoItems.filter(function(todo) {
        return todo.status === this.activeStatus;
    });
  }
};

console.log(todoService.getFilteredTodosByStatus());

Что делает код:
- Объявляется объект todoService, который содержит текущий фильтр для задач (activeStatus), массив объектов задач (todoItems), и метод getFilteredTodosByStatus.
- Метод getFilteredTodosByStatus предназначен для возврата задач, чей статус совпадает с activeStatus.
- В методе filter используется обычная функция, что может привести к потере контекста this.


Проблема:
Внутри функции, переданной в filter, this не будет ссылаться на объект todoService, а будет undefined или ссылаться на window, в зависимости от строгого режима (use strict).
Это означает, что this.activeStatus будет undefined, и метод getFilteredTodosByStatus не сможет корректно отфильтровать пользователей.

Как исправить:
Используйте стрелочную функцию для сохранения контекста this из внешней функции:

getFilteredTodosByStatus: function() {
  return this.todoItems.filter((todo) => {
    return todo.status === this.activeStatus;
  });
}

Или используйте переменную для сохранения контекста перед вызовом filter:

getFilteredTodosByStatus: function() {
  const currentActiveStatus = activeStatus;
  return this.todoItems.filter(function(todo) {
    return todo.status === currentActiveStatus;
  });
}

Итого:
Эта задача проверяет понимание особенностей работы с контекстом в JavaScript и способности решать распространенные проблемы, связанные с потерей контекста.

#interview #javascript

Введение в паттерны

Паттерны проектирования - это общепризнанные решения, предлагаемые для стандартных задач. Они помогают разработчикам организовать код, облегчая тем самым процесс разработки и поддержки. В JavaScript, как и в других языках программирования, паттерны делятся на три основные категории: порождающие, структурные и поведенческие.

Порождающие паттерны
Порождающие паттерны касаются процесса создания объектов. Они помогают создавать объекты таким образом, чтобы улучшить управляемость и гибкость системы. Эти паттерны особенно полезны, когда система не опирается на жесткое наследование, а склонна к композиции объектов.
Среди ключевых порождающих паттернов выделяются:
- Абстрактная фабрика
- Строитель
- Фабричный метод
- Объектный пул
- Прототип
- Одиночка

Эти паттерны находят применение, например, в ситуациях, где требуется создать группы тесно связанных объектов.

Структурные паттерны
Структурные паттерны помогают создавать большие структуры из объектов и классов. Они обеспечивают эффективное взаимодействие между различными частями, используя наследование и композицию.
Структурные паттерны включают:
- Адаптер
- Мост
- Декоратор
- Фасад
- Компоновщик
- Прокси
- Приспособленец

Эти паттерны позволяют, например, объединять процессы различных библиотек для создания единой системы.

Поведенческие паттерны
Поведенческие паттерны фокусируются на взаимодействиях и обязанностях между объектами. Они помогают определить, как различные компоненты системы взаимодействуют друг с другом.
В их число входят:
- Цепочка обязанностей
- Команда
- Итератор
- Посредник/Медиатор
- Наблюдатель
- Состояние
- Стратегия
- Посетитель
- Хранитель
- Шаблонный метод

Эти паттерны решают задачи координации и делегирования обязанностей между объектами.

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

#patterns

Разница между useEffect и useLayoutEffect в React

Хуки useEffect и useLayoutEffect в React часто вызывают путаницу из-за их схожести. Оба хука предназначены для выполнения побочных эффектов в функциональных компонентах, но они имеют ключевые различия в тайминге их выполнения.

useEffect
useEffect используется для выполнения побочных эффектов в компоненте, таких как запросы данных, подписки или ручные изменения в DOM, которые не требуют немедленного выполнения и не блокируют визуальные обновления.

Особенности:
- Выполняется после отрисовки и коммита компонента в DOM.
- Не блокирует визуальные обновления, что делает его идеальным для большинства побочных эффектов.
- Используется для взаимодействий с внешними API и выполнения асинхронных операций.

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

Особенности:
- Выполняется синхронно после всех изменений DOM, но до перерисовки.
- Используется для чтения или изменения DOM до того, как пользователь увидит обновления.
- Может вызывать блокировку визуальных обновлений, если содержит тяжелые вычисления.

Ключевые различия:
- useEffect выполняется после отрисовки компонента, позволяя выполнять побочные эффекты без блокировки визуальных обновлений, в то время как useLayoutEffect выполняется непосредственно после изменений в DOM и перед перерисовкой, что идеально подходит для задач, требующих немедленного чтения или изменения DOM.
- Использование useLayoutEffect может привести к заметным задержкам в визуальных обновлениях, особенно если в нем содержатся тяжелые вычисления, тогда как useEffect не оказывает такого влияния на процесс рендеринга.
- В большинстве случаев предпочтительнее использовать useEffect для обработки побочных эффектов, а useLayoutEffect следует использовать только тогда, когда необходимо синхронно взаимодействовать с DOM, например для измерения размеров элемента перед его отображением.

Заключение
Выбор между useEffect и useLayoutEffect зависит от требований к побочным эффектам в вашем компоненте. Хотя useEffect является наиболее часто используемым хуком для побочных эффектов из-за его не блокирующего поведения, useLayoutEffect предоставляет необходимую синхронность для определенных сценариев работы с DOM. Важно правильно выбирать между ними, чтобы обеспечить эффективную работу приложения и хороший пользовательский опыт.

#react

Default Export vs Named Export

В JavaScript есть два основных типа экспорта: default (по умолчанию) и named (именованный). Понимание их различий важно для эффективной организации кода и его повторного использования.

Default Export
Default export - применяется для экспорта одного основного элемента из модуля, идеально подходя для экспорта уникальных или специализированных компонентов. Этот тип экспорта позволяет импортирующему файлу выбрать имя для компонента, добавляя гибкость.

Пример использования:

// Экспорт
export default function Component() { ... }

// Импорт
import Component from './Component';

Named Export
Named export - используется для экспорта нескольких элементов из одного файла. Это идеально подходит для библиотек компонентов, утилит или когда один файл содержит несколько связанных функций или компонентов.

Пример использования:

// Экспорт
export const utility1 = () => { ... };
export const utility2 = () => { ... };

// Импорт
import { utility1, utility2 } from './Utilities';

Какой тип экспорта использовать
- Использование default export рекомендуется для основных компонентов или функций в файле, особенно если в нем только один экспортируемый элемент. Это упрощает импорт и поддерживает чистоту кода.
- Named export лучше использовать для файлов, содержащих несколько функций, утилит или компонентов. Это обеспечивает ясность и консистентность в именах экспортируемых элементов и упрощает их поддержку и обновление.

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

#javascript