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

❄️ Вернулась с отпуска, сейчас нужно заново научиться работать

❄️ Хочу начать серию постов про Redux

Redux - state manager, которым я пользуюсь, как в личных проектах, так и на работе
Пробовала на практике MobX и Zustand - оба интересные, но по личному комфорту Redux у меня на первом месте 🤓

Менеджер состояний (State manager)
Что вообще такое и для чего нужен?
Это инструмент для хранения и управления состоянием приложения.

Пример состояний:
- Авторизован ли пользователь
- Открыто ли модальное окно
- Данные от сервера (например информация о пользователе и тд)

В маленьких приложениях такие данные можно хранить прямо в компонентах через useState и прокидывать дальше через пропсы

Маленькая история из жизни 🤕
На своем первом рабочем проекте я так и начала делать: просто прокидывала все состояния через пропсы в компоненты, где они были нужны.
Но проект начал разрастаться - и цепочка дошла до 10+ уровней вложенности.
Добавить новый экран или фичу - отдельная боль.
Логика дублировалась, дебажить сложно, да и вообще на код без слез не взглянешь

Спустя 3 месяца работы мы с тимлидом все же прикрутили Redux и все зарефакторили (к слову, этот проект мы переписывали с нуля раза четыре 🫠)

❕Зачем нужен Redux?
➖ Хранить состояние в одном месте
➖ Отделить бизнес логику от UI
➖ Очень легко дебажить (у редакса есть свои DevTools)
➖ Сделать состояние предсказуемым

❄️ В следующий раз расскажу более подробно про сам Redux и что там внутри!

#React #Redux

#Задачи

❄️ Функция высшего порядка
Тема, которую можно встретить на собеседованиях очень часто. Давайте разберемся! 🤓

Если вы программируете на JavaScript, но никогда не слышали про функции высшего порядка, то вы точно с ними сталкивались.
Так как JavaScript поддерживает функциональное программирование.

❕Функция высшего порядка — это функция, которая принимает другие функции в качестве аргументов или возвращает функции в качестве результата

➖ Функция, которая принимает другую функцию в качестве аргумента - функция обратного вызова.
Возьмем примеры из JavaScript: map, filter, forEach, setTimeout и еще много других.

const numbers = [1, 2, 3];

const doubled = numbers.map((num) => num * 2);

console.log(doubled); // [2, 4, 6]

map - это функция высшего порядка. Она принимает другую функцию (колбэк), которая применяется к каждому элементу

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

function greet(name) {
  return function (greeting) {
    console.log(`${greeting}, ${name}!`);
  };
}

const greetAnna = greet('Анна');
greetAnna('Привет'); // Привет, Анна!
greetAnna('Доброе утро'); // Доброе утро, Анна!

❕Вопросы, которые могут встретиться на собеседовании по этой теме:
1. Что такое функция высшего порядка?
2. Приведите пример HOF из стандартной библиотеки JS.
3. Какие преимущества дают HOF в коде?

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

❄️ Привет! Хотела у вас поинтересоваться - какие вопросы на собеседованиях вам действительно показались интересными и зацепили?

За последние годы я прошла несколько собесов (не сказала бы, что прям много). Большинство вопросов - вполне ожидаемые, будто достаточно просто зазубрить стандартный список, чтобы пройти.

Но иногда попадаются реально классные вопросы - такие, что заставляют задуматься или, как в моем случае, вспомнить университетскую программу 🤓

Делитесь в комментах: какой вопрос на собеседовании вас удивил или запомнился?
Можно не только по фронтенду - будет интересно посмотреть.

А потом, мало ли, может соберу это в отдельный пост

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

Тема: Тестирование сложных утилитарных типов в реальных проектах
Автор рассказывал про TypeScript и тестирование сложных типов.
Честно, раньше я вообще не задумывалась об этом

❕ Проблема
TypeScript не умеет сравнивать типы напрямую как T1 === T2 на уровне кода.

❕ Решение
Пишем специальные вспомогательные типы, которые проверяют "эквивалентность" типов во время компиляции.

type Expect<T extends true> = T;

type Equals<T1, T2> = 
  (<T>(x: T) => T extends T1 ? 2 : 1) extends 
  (<T>(x: T) => T extends T2 ? 2 : 1) ? true : false

type NotEquals<T1, T2> = true extends Equals<T1, T2> ? false : true;

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

Вообще прикольно, как в TypeScript можно завернуть очень нетривиальную логику,
Обычно используются какие-то базовые утилитарные типы - и всё

Вот ссылки на статьи, чтобы разобраться более подробно:
https://habr.com/ru/companies/cloud_ru/articles/860764/
https://habr.com/ru/companies/cloud_ru/articles/860770/
https://habr.com/ru/companies/cloud_ru/articles/868762/
https://habr.com/ru/companies/cloud_ru/articles/860778/
https://habr.com/ru/companies/cloud_ru/articles/865118/

❄️ Я наконец-то пощупала Docker!
Разрабатываем с друзьями приложение, которое близится к завершению (надеюсь).
Перед деплоем на каком-то удалённом сервере возник вопрос — как это всё организовать по-умному?
Захотела сделать всё с помощью докера. Бэкенд написан на Nest.js, база данных MongoDB.

Оказалось, не всё так сложно, как я думала изначально

🐳 Что я сделала:

➖Создала в корневой папке проекта Dockerfile - он описывает, как собрать образ нашего приложения.

#############
# The Build Stage
#############
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json .
RUN npm install
COPY . .
RUN npm run build

#############
# The Production Stage
#############
FROM node:20-alpine AS prod
WORKDIR /app
COPY package*.json .
RUN npm install --only=production
COPY --from=build /app/dist ./dist
ENV PORT=3000
EXPOSE ${PORT}
CMD ["npm", "run", "start:prod"]

➖ Также создала docker-compose.yml - он управляет несколькими контейнерами.

version: '3.8'

services:
  backend:
    build: .
    container_name: nest_backend
    ports:
      - "3000:3000"
    depends_on:
      - mongodb
    environment:
      - MONGO_URI=<your-mongo-uri>
      - SECRET_ACCESS=<your-access-secret>
    - SECRET_REFRESH=<your-refresh-secret>
    restart: unless-stopped

  mongodb:
    image: mongo:6
    container_name: mongo_db
    ports:
      - "27017:27017"
    volumes:
      - mongo_data:/data/db
    restart: unless-stopped

volumes:
  mongo_data:

📌 Чувствительные переменные лучше хранить в .env. Здесь — просто заглушки для примера.

Сборка и запуск контейнера

docker-compose up --build -d

Локально все работает!
Осталось теперь организовать это все на удаленном сервере.
Изначально была идея воспользоваться бесплатным сервисами, например Railway, но там не вышло. Были ошибки с базой данных 😢
Возможно разберусь с ними, либо буду смотреть на другие варианты

Как будут результаты, расскажу более подробнее!

❄️ Ура, завтра каникулы

На конференции DUMP

❄️ Слышали ли вы когда-нибудь о верстке в слепую? Или может практикуете?

Когда в рабочих задачах доходит до верстки макетов - я люблю делать это вслепую. То есть пишу компоненты и стили, не заглядывая в браузер.
Как будто челлендж: а получится ли всё идеально с первого раза?

Плюс в этом режиме хочется верстать максимально быстро - пока не засекала время, но наверное стоит попробовать.

❕ Хотела выделить преимущества и плюсы, которые дает такая практика:

➖ Меньше скуки.
Перенос макетов - рутинный этап задачи (особенно по сравнению с написанием логики). А если добавить элемент челленджа — становится веселее.

➖ Больше уверенности.
В начале свое пути во фронтенде, верстка пугала. Особенно сложные макеты и комментарии от дизайнера уже после релиза, так как не было уверенности в своих знаниях 😢

➖ Ускоряет работу.
Меньше "переключений" между кодом и браузером, выше концентрация

Кстати, недавно узнала, что на IT-конференциях иногда проводят соревнования по верстке вслепую.
Надеюсь будет возможность как-нибудь поучаствовать, очень интересно

❔ И еще вопрос, который меня волнует.
Как вы считаете, должен ли фронтенд разработчик верстать? Или тут все зависит от грейда разработчика?

❄️ Решила пощупать Telegram Mini Apps
Приложение максимально простое — тест с вопросами по фронтенду, сделалa за вечер после работы буквально на коленке

Цель была — потрогать SDK и понять, как вообще работают TMA. Использовала telegram-apps/sdk

Для такого простого приложения со серьезными сложностями я не столкнулась, нужно будет придумать что-то посерьезнее, но пока вот делюсь этим 😌
В планах - разобраться глубже в документации и не забрасывать

Единственная проблема на данный момент - это получить данные о пользователе. Скорее всего я делаю что-то не так, но прям ни в какую не хочет мне возвращать юзера, только вот undefined

Ссылка на приложение:
https://t.me/ReactRushBot

❄️ Продолжим разбираться в алгоритмах!
Хочу разобрать самую первую задачу на leetCode.

1. Two Sum
Описание:
Дан массив целых чисел nums и целое число target.
Нужно найти два разных индекса i и j, такие что:
nums[i] + nums[j] === target.
Вернуть нужно массив [i, j].
Гарантируется, что решение всегда есть, и один элемент нельзя использовать дважды.

❕ Решать данную задачу рекомендуется с помощью хэш-таблиц.
Хэш-таблицы - Структура данных, реализована ассоциативным массивом. Структура связывает ключи со значением.

Алгоритм работы:

Сначала заполняем хэш-таблицу: кладём туда все элементы из массива, где:
- ключ — это само число
- значение — его индекс

Затем проходим по массиву снова:
1. Для каждого числа nums[i] считаем, какое число нужно к нему в пару, чтобы в сумме получился target.
target - nums[i]
2. Проверяем: а есть ли такое число в нашей хэш-таблице?
3. Если есть, и его индекс не совпадает с текущим — возвращаем пару индексов.

Код

var twoSum = function(nums, target) {
    const hash = {};
    nums.forEach((item, index) => hash[item] = index);

    for (let i = 0; i < nums.length; i++)
    {
        let findKey = target - nums[i];

        if (hash[findKey] && hash[findKey] != i)
            return [i, hash[findKey]];
    }

    return [];
};

❄️ Задачи для практики:
217. Contains Duplicate
219. Contains Duplicate II
560. Subarray Sum Equals K

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

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

❄️ Давайте погружаться в TypeScript!

Сегодня хочу рассказать про Utility Types. В начале своей карьеры я почти не использовала их и не понимала, почему про них так часто спрашивают на собеседованиях.
Но спустя время и набравшись больше опыта, поняла, что это реально удобно!

🔹Utility Types – что это такое?
Это набор встроенных типов, они помогают:
- Избегать дублирования кода
- Делать типы более гибкими
- Упрощать сложные операции с типами

🔹Основные Utility Types

Partial<T>
Делает все свойства типа T необязательными.

Required<T>
Противоположность Partial — делает все поля обязательными.

Readonly<T>
Запрещает изменять свойства объекта.

Pick<T, K>
Создаёт тип, выбирая набор свойств K

interface User {
  name: string;
  age: number;
}
type UserName = Pick<User, "name">;
// { name: string }

Omit<T, K>
Создаёт тип, выбирая все свойства из T и затем удаляя K

interface User {
  name: string;
  age: number;
}
type UserName = Omit<User, "name">;
// { age: number }

Record<Keys, Type>
Создаёт тип объекта, ключи свойств которого — K и значения свойств — T

type PageUrls = Record<string, string>;
// { [key: string]: string }

❄️ Для работы я в основном использую Record, Omit и Pick - они покрывают большинство повседневных задач

#typeScript

❄️ 12 недель: как я планировала свои цели и что из этого вышло

В начале года я прочитала книгу Брайана Морана "12 недель в году.". Основная идея книги — ставить цели не на год, а на 12 недель.
Автор утверждает, что такой подход помогает достигать результатов быстрее и эффективнее. Я решила попробовать и в январе начала свои первые 12 недель. Сейчас, когда этот период подошел к концу, хочу поделиться результатами и выводами. ✨

Мои направления и результаты: 

Frontend 💻
➖ Личный проект с друзьями: Наконец-то сдвинулся с мертвой точки! По плану релиз должен был состояться в конце марта, но мы немного не успели. Тем не менее, прогресс есть, и я уверена, что скоро мы завершим проект.
➖ Алгоритмы: В начале я забыла про этот пункт, но потом взяла себя в руки и начала стабильно изучать по одной теме в неделю, решая задачи на Leetcode. Однако из-за отсутствия четких целей оценить результаты сложно. 🤔

Gamedev 🎮
Тут все пошло не так, как планировалось. Мотивация быстро пропала, и я не могла заставить себя выделять время на это. Проблема, как я теперь понимаю, в отсутствии четкого плана. Я начала читать документацию по Unity и смотреть уроки, но из-за того, что у меня уже есть базовые знания программирования, уроки казались скучными. В следующий раз я постараюсь поставить конкретные цели (например, создать простую игру за 12 недель, нужно подумать).

Личный технический блог ✍️
Цель была — не забрасывать блог и писать посты регулярно. С этим я справилась: посты выходили стабильно. Я не ставила целей по количеству подписчиков, но их рост приятно радует. Правда, теперь чувствую больше ответственности перед аудиторией.

Накопления 💰
Тут все прошло гладко. Я поставила цель накопить определенную сумму и выполнила ее без проблем.


‼️ Ошибки и выводы:

Недавно я прочитала книгу Катерины Ленгольд "Agile Life", где автор предлагает планировать задачи на спринты: 3 недели работы и 1 неделя отдыха. Это открыло мне глаза на одну из моих главных ошибок — я не учла время на отдых.
В результате на 7-й неделе я выгорела и ничего не делала, а 11-я неделя вылетела из-за отпуска. Это повлияло на мои результаты. 😓

Пришло понимание, что отдых — это необходимость. Если не планировать его заранее, то организм неожиданно сам его себе организует. После завершения этих 12 недель я возьму паузу, чтобы проанализировать свои результаты и спланировать следующий цикл с учетом уже новых знаний. 🧘‍♀️

А как вы планируете свои цели? Мне будет интересно узнать!

#Задачи