{ Снежные строки }

❄️ Отдохнула недельку, теперь настроение писать код!

📌 Планы на ближайшее:

➖ Telegram Mini Apps
Хочу погрузиться в разработку мини-приложений для Telegram
Если у кого-то есть опыт или советы — делитесь, буду благодарна! 🙌

➖ Docker + NestJS + MongoDB
Также нужно разобраться с Docker для организации бэка на NestJS и БД MongoDB.
Опыта с Docker пока нет вообще 😢, но я надеюсь, что всё пойдет гладко

Когда разберусь и будут более менее какие-то результаты, обязательно поделюсь!

❄️ Всех с началом недели!

Разберемся сегодня с вопросом, который часто встречается на собеседованиях.
Что такое чистая функция?

🔹Чистая функция - это любая функция, которая:
➖ Не вызывает никаких побочных эффектов.
➖ При одинаковых входных данных всегда возвращает одинаковый результат.

🔸 Побочные эффекты (side effects) - любое изменение внешнего состояния за пределами функции. Например:
- Вызов API
- Мутация входных данных
- Логирование
- Изменение глобальных переменных

Пример чистой функции:

function add(a, b) 
{ 
   return a + b;
}

add - всегда возвращает одно и то же значение при одинаковых аргументах и не изменяет внешние данные — значит, она чистая

Зачем нужны чистые функции?
📌 Чистые функции - делают код понятным, предсказуемым и легко тестируемым

#JavaScript

❄️ Джедайские техники - Максим Дорофеев
В феврале прочитала книгу Максима Дорофеева "Джедайские техники"

С 2025 года начала серьезно относиться к организации времени и вопросам личной эффективности.
Всегда были с этим проблемы, лень одолевала. Да и сейчас не сказать, что я с ней полностью справилась😢

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

Практики, которые я решила внедрить в жизнь:

Список задач на день.
📌 Как разгрузить мозг?
🔹 Список задач – фиксируем мелкие и средние дела.
🔹 Список проектов – отслеживаем долгосрочные задачи.
🔹 Календарь – записываем встречи и важные события.
🔹 Справочная информация – все, что может понадобиться позже.

Метод Pomidoro.
Если вкратце - разделяешь работу над задачами на определенные циклы, в который концентрируешься именно на определённую задачу (либо несколько задач)
Вариант, который подошел мне
🔸 30 минут работаешь
🔸 6 минут отдыхаешь
🔸 После 4 циклов – длинный отдых 20 минут
Метод помогает не выгорать, концентрироваться на задаче и избегать отвлечения внимания.

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

📖 Цитата из книги

За очень продуктивным и ударным днем последует день, на протяжении которого вы будете чувствовать упадок сил и потерю работоспособности - это нормальное следствие переутомления.

Так что давайте себе время на восстановление и не ругайте себя за усталость!

📖 Вывод
Книга дает рабочие инструменты, но важно их реально применять, а не просто знать. Посмотрим, как получится.
Какие практики используете вы?

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

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

<Frontend вдохновляет/> - авторский канал Александра для тех, кто хочет получить заряд мотивации. Истории с работы, юмор, разбор примеров кода и советы новичкам (и не только им) - все здесь 🙂

Коучинг для ИТ с Анной Бикеевой — канал коуча с 17-летним бэкграундом в ИТ, где автор рассказывает на своем опыте и опыте клиентов, как работа с мышлением помогает расти в карьере и громко заявлять о себе!

В АйТи из Уфы - канал о буднях во Frontend разработке без технических деталей.
Раушан рассказывает как перешёл из другой сферы, проходит собесы и собирается в web3 разработку.
Делится чем интересуется вне работы, чтобы держать кукуху на месте 🙃

IT Инсайты — канал лида разработки с 12-летним опытом в ИТ-сфере, где публикуются полезные мысли и советы для сотрудников ИТ и их руководителей. Канал будет интересен как начинающим, так и опытным специалистам 🤗

Фронтенд Кухня - канал, где мы вкусно готовим фронтенд, добавляем библиотеки по вкусу, делимся рецептами дебага и приправляем все это щепоткой карьерных советов

Какой автор был для вас открытием, а кого читаете уже давно?

❄️ Наконец-то дошли руки до алгоритмов!

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

🔍 Что такое метод двух указателей?

Метод двух указателей — это техника, которая используется для решения задач с массивами или строками. В этом методе используются два указателя (индекса), которые перемещаются по массиву или строке по заданному правилу

Чаще всего:
➖ Один указатель начинается с начала массива (left).
➖ Другой — с конца массива (right).
➖ Они движутся навстречу друг другу, пока не встретятся.

📚 Пример задачи: Two Sum II
Разберем на примере задачи с leetCode 167. Two Sum II - Input Array Is Sorted

Описание
Дан отсортированный массив целых чисел numbers и целое число target. Необходимо найти индексы двух чисел, которые в сумме дают target.
Индексы должны быть на 1 больше, чем реальные индексы массива (по условию задачи).

Алгоритм работы:
1. Мы используем два указателя: left (начало массива) и right (конец массива).
2. На каждом шаге вычисляем сумму элементов на этих указателях.
3. Если сумма равна target, возвращаем индексы.
4. Если сумма меньше target, двигаем left вправо (увеличиваем сумму).
5. Если сумма больше target, двигаем right влево (уменьшаем сумму).

Код

var twoSum = function(nums, target) {
    let left = 0;
    let right = nums.length - 1;

    while (left < right)
    {
        const sum = nums[left] + nums[right];

        if (sum == target)
            return [left + 1, right + 1];

        if (sum > target)
            right--;

        if (sum < target)
            left++;
    }
};

❄️ Задачи для практики:
125. Valid Palindrome
26. Remove Duplicates from Sorted Array
11. Container With Most Water

#JavaScript #Алгоритмы

❄️ С праздником, девушки!
Пусть ваш код всегда работает, а идеи не заканчиваются!
Кстати, утром наткнулась на классные интервью женщин из IT от сбера, советую!☺️
Читать

❄️ Что такое DOM-дерево?

Document Object Model (DOM) — это структура, представляющая HTML-документ в виде дерева. 🌳
Браузер использует DOM для отображения страницы и взаимодействия с ней через JavaScript.

💡 DOM позволяет:
➖Управлять HTML-разметкой из JavaScript, делая веб-страницы динамическими.
➖Обновлять элементы на странице без её перезагрузки.

❗️Недостатки DOM:
- При каждом изменении браузер пересчитывает стили, перерисовывает элементы и перерабатывает макет страницы.
- Частые обновления DOM могут замедлять работу приложения 🐌

❔Что такое виртуальный DOM?

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

🛠 Как работает VDOM в React?

1️⃣ React сначала обновляет виртуальный DOM, не изменяя реальный.
2️⃣ Затем он сравнивает новый VDOM с предыдущей версией (процесс diffing).
3️⃣ React определяет минимальный набор изменений и применяет их к реальному DOM (reconciliation), обновляя только измененные элементы.

❄️ Fiber

Новый механизм согласования (reconciliation) в React 16, основная цель которого сделать рендеринг виртуального DOM инкрементным.

🔥 Основные преимущества Fiber:

1️⃣ Разбивает обновления на мелкие части, делая рендеринг более плавным.
2️⃣ Позволяет приостанавливать и возобновлять работу, не блокируя основной поток браузера.
3️⃣ Улучшает производительность анимаций и сложных интерфейсов.

#React

❄️ Ура, с пятницей!

❄️ Оптимизация производительности в React

Разберем три инструмента, которые помогают избежать лишних вычислений и ререндеров: useMemo, useCallback и React.memo.

1️⃣ useMemo

❕Хук для мемоизации результатов вычислений

Когда использовать
➖ Для тяжелых вычислений (например, фильтрация, сортировка, преобразование данных).

2️⃣ useCallback

❕Хук, который мемоизирует функции.

Когда использовать
➖ Для колбэков, передаваемых в дочерние компоненты, особенно если они оптимизированы с помощью React.memo.
➖ Для колбэков, которые зависят от изменяющихся данных в useEffect.

3️⃣ React.memo

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

Когда использовать
➖ Для компонентов, которые рендерятся часто, но их пропсы изменяются редко.

❄️ Когда не использовать?
Использование этих инструментов должно быть обоснованным, чтобы не сделать только хуже!
Иногда они могут добавить больше накладных расходов, чем пользы

#React

#Задачи

❄️ Чем отличаются useEffect, useLayoutEffect и useInsertionEffect?

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

❔Давайте разберёмся!

1️⃣ useEffect
Это самый популярный хук для работы с побочными эффектами.
Он выполняется асинхронно после того, как браузер завершит рендер и отрисует изменения на экране

2️⃣ useLayoutEffect
Этот хук похож на useEffect, но выполняется синхронно перед тем, как браузер отрисует изменения

useLayoutEffect(() => {
  const element = document.getElementById('my-element');
  element.style.width = '100px';
}, []);

3️⃣ useInsertionEffect
Этот хук появился в React 18 и предназначен для вставки стилей в DOM перед рендером
‼️Используется в основном библиотеками, работающими с CSS-in-JS

💡Итог
- useEffect - для большинства задач!
- useLayoutEffect - только если нужно синхронное взаимодействие с DOM
- useInsertionEffect - на своем опыте никогда не использовала. Как советует документация React - хук предназначен для авторов библиотек CSS-in-JS

#React

❄️ Всем хорошей пятницы и выходных!

❄️ "Искусство чистого кода" (Кристиан Майер)

👩‍💻 Хочу начать делиться книгами, которые недавно прочитала. В основном это будет техническая литература.
Надеюсь, что такие небольшие обзоры будут интересны! 😊

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

💡 Принципы, которые я выделила для себя:

➖Принцип Парето:

- 20% усилий дают 80% результата.
- Нужно сосредоточиться на жизненно важном меньшинстве (20%) и не распыляйся на тривиальное большинство.

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

Про этот принцип был один из первых постов в этом канале

➖Принцип Unix:

Делай что-то одно, но делай это хорошо.

- Каждая функция должна выполнять одну задачу.
- Простое всегда лучше сложного.

📌 Пример:
Разделение UI и функциональной логики. Это упрощает тестирование и ускоряет разработку

➖Закон Деметры:
Минимизируй взаимозависимость элементов. Чем меньше модулей зависят друг от друга, тем проще поддерживать код.

❄️ Вывод:
Книга очень понравилась, читается легко. Если хочется структурировать свою работу и узнать, как писать поддерживаемый код, обязательно стоит прочитать!

Делитесь своими рекомендациями и книгами, которые точно нужно прочитать! 📚

#Книги

#Задачи

❄️ Сегодня разберем задачку, которая часто вызывала у меня трудности на собеседованиях: 
порядок вывода console.log в функциональном компоненте React.

Пример:

import React from 'react';

const Inner = () => {
  console.log('render-inner');
  return null;
}

export function App() {
  const [counter, setCounter] = React.useState(0);
  
  console.log('render-1', counter);

  React.useEffect(() => {
    setCounter(1);
    console.log('effect-1', counter);
  }, []);

  React.useEffect(() => {
    setCounter(2);
    console.log('effect-2', counter);
  }, [counter]);
  
  console.log('render-2', counter);
  return <Inner />;  
}
}

Основные правила жизненного цикла React

1️⃣ Монтирование компонента 🛠

➖React сначала выполняет рендер компонента.
➖Внутри рендера выполняются все синхронные операции, включая вызовы `console.log`.
➖После рендера React монтирует компонент в DOM.

2️⃣ Запуск эффектов (useEffect) ⚡️

➖После монтирования React запускает эффекты (useEffect).
➖Эффекты с пустым массивом зависимостей ([]) выполняются только один раз после первого рендера.
➖Эффекты с зависимостями (например, [counter]) выполняются после каждого рендера, если зависимости изменились.

3️⃣ Обновление состояния (setState) 🔄

➖Если внутри эффекта вызывается setState, React планирует обновление состояния.
➖Обновление состояния приводит к повторному рендеру компонента.

4️⃣ Повторный рендер 🔁

➖После обновления состояния React снова выполняет рендер компонента.
➖Если в результате рендера изменяются зависимости эффектов, эти эффекты снова выполняются.

Итоговый порядок вывода
render-1 0
render-2 0
render-inner
effect-1 0
effect-2 0
render-1 2
render-2 2
render-inner
effect-2 2
render-1 2
render-2 2

#Собеседование #React

❄️ Как вы отдыхаете от работы?

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

❕Это выматывает: глаза устают ещё больше, и нет ощущения, что я действительно отдохнула

А сегодня пятница — время для отдыха и восстановления! Планирую попробовать что-то новое, а как вы отдыхаете? 😊

❄️ В новом году я решила подтянуть и улучшить свои знания по алгоритмам!
В прошлом году я отказалась от алгоритмической секции на собеседовании в Т-банк, потому что была не уверена в своих знаниях.
Очень обидно 😢 но стало отличной мотивацией!

Теперь буду готовиться! 💪

По плану:

➖ Начну с основ: структуры данных (массивы, деревья, графы и тд).
➖ Базовым алгоритмы: сортировки, поиск, жадные алгоритмы.
➖ Параллельно практика на LeetCode.
➖ И уже начала читать "Грокаем алгоритмы".

Результатами обязательно буду делиться с вами! 👩‍💻

А как у вас обстоят дела с алгоритмами? 🔥
Может быть, есть советы, как лучше готовиться?