🤔 Как происходит взаимодействие с Git?

1. Инициализация репозитория: Создается локальный репозиторий с помощью git init или клонируется существующий через git clone.
2. Изменение файлов: Вносятся изменения в файлы проекта.
3. Отслеживание изменений: Добавляются изменения в индекс с помощью git add.
4. Фиксация изменений: Изменения сохраняются в истории репозитория с помощью git commit.
5. Синхронизация: Изменения передаются на удаленный сервер (git push) или загружаются (git pull).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Ищу работу пол года

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

Честно говоря, искать работу полгода — это нонсенс. Очевидно, что человек делает что-то не так. Главная ошибка, которую совершают многие, — это создание иллюзии поиска работы.

То есть человек вроде бы ищет работу, но делает это неэффективно, тратя время на нецелевые действия. Например:

➖ Просматривает вакансии перед откликом.
➖ Пытается понять, подходит ли он под вакансию. Если считает, что не подходит — не откликается.
➖ Пишет сопроводительные письма (иногда даже уникальные под каждую вакансию).
➖ Заполняет анкеты, проходит тесты.

Все эти действия отнимают время, но не приводят к результату.

Почему это не работает?

HR-менеджер не может вручную отсмотреть 2000 откликов, оценить каждое резюме и прочитать сопроводительные письма. Поэтому компании используют ATS-системы (системы автоматического подбора), которые анализируют резюме и определяют процент его соответствия вакансии.

Что делать, чтобы повысить шансы?

1️⃣ Добавить ключевые навыки в резюме — и в основной текст, и в теги. Возьмите их с easyoffer.ru

2️⃣ Убрать нерелевантный опыт, оставить только подходящий.

3️⃣ Оформить опыт так, чтобы он выглядел релевантным. Если у вас его нет, укажите проекты, стажировки или другой опыт, который можно представить как работу от 1 года. Если опыт слишком большой, сузьте его до 6 лет.

4️⃣ Откликаться на все вакансии без разбору. Если вы Junior, не ищите только стажер или Junior-вакансии — пробуйте везде. Не отказывайте себе сами, пусть это решит HR

5️⃣ Сделать резюме публичным, потому что HR-менеджеры часто ищут кандидатов не только среди откликов, но и в базе резюме.

6️⃣ Используйте ИИ по минимуму – ATS-системы считывают это и помечают "сгенерировано ИИ"

‼️ Главное правило: чем больше откликов — тем выше шанс получить оффер. Делайте резюме удобным для ATS-систем, и вас заметят.

1. Посмотрите видео о том как я вывел свою резюме в Топ1 на HH
2. Посмотрите видео как я нашел первую работу
3. Прочитайте этот кейс про оптимизацию резюме

Если прям вообще тяжело.

Создайте несколько разных резюме. Создайте 2, 3 да хоть 10 резюме. Настройте авто-отлики и ждите приглашения на собесы.

Не нужно создавать иллюзию поиска работы, сделайте несколько простых и актуальных действий.

🤔 Какие преимущества у di?

Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне.

🚩Почему DI полезен?

🟠Уменьшает связность кода (Loose Coupling)
Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.

class UserService {
  constructor() {
    this.db = new Database(); // Прямо создаем зависимость
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

С DI (гибкость)

class UserService {
  constructor(db) {
    this.db = db; // DI передает зависимость извне
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);

🟠Улучшает тестируемость (Unit-тесты проще)
С DI можно подменять зависимости на заглушки (mock, fake, stub).

const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔

С DI (можно подменить зависимость)

class FakeDatabase {
  findUserById(id) {
    return { id, name: "Тестовый пользователь" };
  }
}

const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);

console.log(userService.getUser(1)); // ✅ Тест без реальной БД

🟠Улучшает расширяемость (легко менять зависимости)
Допустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase.

class UserService {
  constructor() {
    this.db = new MySQLDatabase(); // Нужно менять здесь
  }
}

С DI (добавляем новую зависимость без изменения кода UserService)

const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);

🟠Упрощает управление зависимостями (через DI-контейнеры)
В крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript).

import "reflect-metadata";
import { Container, injectable, inject } from "inversify";

@injectable()
class Database {
  findUserById(id) {
    return { id, name: "База данных" };
  }
}

@injectable()
class UserService {
  constructor(@inject(Database) db) {
    this.db = db;
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();

// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));

Ставь 👍 и забирай 📚 Базу знаний

🤔 Каким образом HTML превращается в страницу?

1. Загрузка: Браузер загружает HTML-документ.
2. Парсинг: HTML разбивается на DOM (Document Object Model).
3. Стилизация: CSS применяется к элементам DOM.
4. Рендеринг: Браузер рендерит элементы на странице, создавая визуальное представление.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Основные причины отказа от классовых компонентов в react?

С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему.

🟠Меньше кода → чище и понятнее
Функциональные компоненты короче, читаются легче, а код становится чище.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.increment}>
        Счетчик: {this.state.count}
      </button>
    );
  }
}

Функциональный компонент (хуки делают код проще)

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Счетчик: {count}
    </button>
  );
}

🟠Легче управлять жизненным циклом (useEffect vs componentDidMount)
В классах жизненный цикл* компонента состоит из нескольких методов (componentDidMount, componentDidUpdate, componentWillUnmount).

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: this.state.time + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <p>Время: {this.state.time} секунд</p>;
  }
}

Функциональный компонент (хуки делают все проще)

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Время: {time} секунд</p>;
}

🟠Лучшая производительность (меньше потребления памяти)
Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции.
Создают экземпляры this
Обрабатывают setState
Хранят лишние связи и контексты
Не создают this
Используют только нужные данные
Оптимизируются через React.memo

const Button = React.memo(({ onClick }) => {
  console.log("Ререндер кнопки");
  return <button onClick={onClick}>Нажми</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}

🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props)
Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Компонент монтирован");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

Хуки (useEffect) делают код чище

function useLogger() {
  useEffect(() => console.log("Компонент монтирован"), []);
}

function MyComponent() {
  useLogger();
  return <p>Привет, мир!</p>;
}

🟠Функциональные компоненты – будущее React
React официально рекомендует использовать функциональные компоненты
Dan Abramov (разработчик React)
Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов
Классы не работают в React Server Components
Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое семантика?

Это использование HTML-элементов в соответствии с их смыслом. Например:
- <header> для заголовков.
- <article> для статей.
- Семантический HTML улучшает SEO, доступность и структуру кода.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Опасности использования `innerHTML` в JavaScript

innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

🟠Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

🟠Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

🟠Случайное удаление обработчиков событий
Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

Ставь 👍 и забирай 📚 Базу знаний

🤔 Почему React?

1. Компонентный подход: Упрощает создание и повторное использование UI-элементов.
2. Виртуальный DOM: Повышает производительность благодаря минимизации операций с реальным DOM.
3. Большая экосистема: Множество библиотек и инструментов для разработки.
4. Универсальность: Подходит как для веб-приложений, так и для мобильных (React Native).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Когда нужно использовать кнопки а когда ссылки?

В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение.

🟠Когда использовать `<button>`?

Когда действие выполняется на странице без перехода на другую
Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта)
Отправка формы
Открытие/закрытие модального окна
Включение/выключение чего-то на странице
Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

🟠Когда использовать `<a>`?

Когда нужно перейти на другую страницу (или секцию сайта)
Когда ссылка ведет на внешний или внутренний ресурс
Навигация по сайту
Переход на другую страницу
Ссылки на соцсети, статьи, файлы

<a href="https://example.com">Перейти на сайт</a>

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

🟠Ошибки и неправильное использование
Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое Redux?

Это библиотека для управления состоянием приложения:
1. Единое хранилище: Все состояние приложения хранится в одном объекте.
2. Принцип "однонаправленного потока данных": Состояние изменяется через действия (actions) и редюсеры (reducers).
3. Удобство тестирования: Легко отслеживать изменения состояния.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое flexbox?

Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки.

Главные особенности
🟠Гибкое выравнивание
элементов в строку или колонку
🟠Равномерное распределение
пространства между элементами
🟠Упрощает адаптивную верстку
без float и position
🟠Легкое центрирование
элементов

🚩Основные термины Flexbox

Когда включается display: flex;, элементы внутри него становятся флекс-элементами.

Flex-контейнер → родительский элемент (display: flex;)
Flex-элементы → дочерние элементы контейнера
Главная ось (main axis) → ось, вдоль которой расположены элементы
Поперечная ось (cross axis) → перпендикулярная ось

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

🚩Основные свойства Flexbox

🟠`display: flex;`
Включает Flexbox для контейнера.

.container {
  display: flex;
}

🟠`flex-direction` – направление оси
Определяет, как располагаются элементы (по горизонтали или вертикали).

.container {
  flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
  flex-direction: column; /* В столбик */
  flex-direction: row-reverse; /* Справа налево */
  flex-direction: column-reverse; /* Вниз-вверх */
}

🟠`justify-content` – выравнивание по главной оси

.container {
  justify-content: flex-start; /* По умолчанию, слева направо */
  justify-content: center; /* Центр */
  justify-content: flex-end; /* Справа налево */
  justify-content: space-between; /* Равномерное распределение */
  justify-content: space-around; /* С отступами */
  justify-content: space-evenly; /* Равномерные промежутки */
}

🟠`align-items` – выравнивание по поперечной оси

.container {
  align-items: stretch; /* По умолчанию (растягивает) */
  align-items: center; /* Центр по вертикали */
  align-items: flex-start; /* Вверх */
  align-items: flex-end; /* Вниз */
  align-items: baseline; /* По базовой линии текста */
}

🟠`flex-wrap` – перенос элементов на новую строку

.container {
  flex-wrap: nowrap; /* По умолчанию – все в одной строке */
  flex-wrap: wrap; /* Элементы переносятся */
  flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}

🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`)
Работает, когда элементы занимают несколько строк.

.container {
  align-content: flex-start; /* Вверх */
  align-content: flex-end; /* Вниз */
  align-content: center; /* По центру */
  align-content: space-between; /* Равномерное распределение */
  align-content: space-around; /* С отступами */
  align-content: stretch; /* Растянуть (по умолчанию) */
}

🚩Управление отдельными элементами (`flex`-элементы)

flex-grow – рост элемента

.item {
  flex-grow: 1; /* Растянется, если есть место */
}

flex-shrink – сжатие элемента

.item {
  flex-shrink: 0; /* Не уменьшаться */
}

flex-basis – начальный размер элемента

.item {
  flex-basis: 200px; /* Фиксированный размер */
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что делает Webpack?

Это инструмент для сборки модулей JavaScript:
1. Объединяет файлы: Собирает модули в один файл для улучшения производительности.
2. Обработка ресурсов: Подключает стили, изображения, шрифты.
3. Оптимизация: Минимизирует код, разделяет файлы на части (chunking).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие значения будут являться falsy значениями?

В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений:

🟠`false`
Логическое значение false.

console.log(Boolean(false)); // false    

🟠`0`
Число ноль.

console.log(Boolean(0)); // false    

🟠`-0`
Отрицательное число ноль (хотя это редко встречается на практике).

console.log(Boolean(-0)); // false    

🟠`0n`
Число BigInt с значением ноль.

console.log(Boolean(0n)); // false    

🟠`""` (пустая строка)
Строка без символов.

console.log(Boolean("")); // false    

🟠`null`
Специальное значение, обозначающее отсутствие какого-либо значения.

console.log(Boolean(null)); // false    

🟠`undefined`
Специальное значение, обозначающее необъявленное или неприсвоенное значение.

console.log(Boolean(undefined)); // false    

🟠`NaN`
Специальное значение, обозначающее не число (Not-a-Number).

console.log(Boolean(NaN)); // false    

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

🟠Проверка значений на falsy
В условиях (if statements) все falsy значения интерпретируются как false.

const values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (!value) {
        console.log(`${value} is falsy`);
    }
});

Примеры в условиях

if (!false) {
    console.log('false is falsy'); // выводится
}

if (!0) {
    console.log('0 is falsy'); // выводится
}

if (!"") {
    console.log('"" is falsy'); // выводится
}

if (!null) {
    console.log('null is falsy'); // выводится
}

if (!undefined) {
    console.log('undefined is falsy'); // выводится
}

if (!NaN) {
    console.log('NaN is falsy'); // выводится
}

🟠Использование в логических операторах
Falsy значения также учитываются в логических операциях.

const value = null;

const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy

Ставь 👍 и забирай 📚 Базу знаний

🤔 Почему нельзя отдать строку в DOM?

1. Уязвимость XSS: Если строка содержит вредоносный код, это может быть использовано злоумышленниками.
2. Нарушение безопасности: Непроверенные строки могут модифицировать структуру DOM.
3. Практика: Вместо строки используйте методы, которые безопасно добавляют элементы или текст (innerText, textContent).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Зачем нужен docker?

Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации.

🚩Почему нужен Docker?

🟠Решает проблему "работает у меня, но не у тебя"
В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере.

🟠Автоматизирует развертывание
Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер.

🟠Легко масштабировать
Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes).

🟠Разделяет зависимости
Каждое приложение работает в изолированной среде, и конфликты библиотек исключены.

🟠Работает везде (Windows, Mac, Linux, серверы, облако)
Контейнер можно запустить где угодно, где установлен Docker.

🚩Как работает Docker?

🟠Создаем `Dockerfile` (инструкция для сборки контейнера)
Пример для Node.js-приложения

# Базовый образ с Node.js
FROM node:18

# Устанавливаем рабочую директорию
WORKDIR /app

# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .

# Запускаем приложение
CMD ["node", "server.js"]

Собираем образ Docker (создаем "упакованный" контейнер)

docker build -t my-app .

Запускаем контейнер

docker run -p 3000:3000 my-app

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как развернуть строку в JS?

Можно воспользоваться методами работы с массивами. Сначала строка преобразуется в массив символов с помощью split(''), затем массив разворачивается с помощью reverse(), и в конце собирается обратно в строку с помощью join(''). Это стандартный и удобный способ для выполнения такой операции.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что делает и для чего нужна функци function.Prototype.Bind?

bind() – это метод, который создает новую функцию с привязанным контекстом (this) и (опционально) фиксированными аргументами.

🚩Основные возможности `bind()`

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

Пример: потеря this без bind()

const user = {
  name: "Иван",
  sayHello() {
    console.log(`Привет, ${this.name}!`);
  },
};

setTimeout(user.sayHello, 1000); // ❌ this = undefined

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое стек вызовов?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как взаимодействуешь с eventloop?

Event Loop (Цикл событий) – это механизм, который управляет выполнением кода, обработкой асинхронных задач и взаимодействием с Web API.

🚩Как мы взаимодействуем с Event Loop?

Используем асинхронный код: setTimeout, setInterval, fetch, Promise, async/await
Оптимизируем выполнение тяжелых задач
Управляем приоритетами выполнения (Microtask vs Macrotask)

🟠Как работает Event Loop?
JavaScript выполняет код в однопоточном режиме, но может обрабатывать асинхронные задачи через очередь событий (Event Queue) и микрозадачи (Microtask Queue).

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

Вывод в консоли

1
4
3
2

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что сделать, чтобы setTimeout выполнился позже?

Для того чтобы setTimeout выполнялся позже, необходимо задать время задержки (в миллисекундах) в его втором аргументе. Чем больше значение, тем позже будет выполнен переданный callback. Например, setTimeout(() => console.log('Hello'), 5000) выполнит код через 5 секунд.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний