🤔 В чем разница между GET и POST?

1. GET:
- Используется для получения данных с сервера.
- Данные передаются в URL (в строке запроса), ограничены по длине.
- Менее безопасен, так как параметры видны в URL.
2. POST:
- Используется для отправки данных на сервер.
- Данные передаются в теле запроса, не отображаются в URL.
- Подходит для передачи больших объемов информации и конфиденциальных данных.

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

🤔 Что выбираешь ооп или функции?

Выбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы.

🚩Когда использовать ООП?

Объектно-ориентированное программирование подходит, когда:
Нужно моделировать реальные объекты и их поведение
Приложение состоит из множества взаимодействующих сущностей
Важно инкапсулировать данные и защитить их от прямого изменения
Требуется повторное использование кода через наследование и полиморфизм

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"

🚩Когда использовать функциональное программирование?

Функциональный подход хорош, если
Код должен быть чистым и предсказуемым
Нужно избегать изменений состояния (иммутабельность)
Требуется много работы с массивами, коллекциями данных
Нужно легко писать асинхронный код

const double = num => num * 2;

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);

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

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

🤔 Какие есть способы общения между компонентами?

1. Родительский компонент — дочерний компонент:
- Передача через props или события.
2. Общий контекст или хранилище:
- Использование глобального состояния (Redux, Zustand, Context API).
3. Взаимодействие через сервисы:
- Например, через API или WebSocket.
4. Pub-Sub модель:
- С помощью событий или библиотек типа EventEmitter.

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

🤔 Как определить что состояние является глобальным?

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

🚩Используется ли это состояние в нескольких независимых компонентах?

Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux).

// Глобальное состояние (например, Context API)
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });

  return (
    <UserContext.Provider value={user}>
      <Navbar />
      <Profile />
    </UserContext.Provider>
  );
}

function Navbar() {
  const user = useContext(UserContext);
  return <div>Привет, {user.name}!</div>;
}

function Profile() {
  const user = useContext(UserContext);
  return <div>Профиль пользователя: {user.name}</div>;
}

🚩Должно ли состояние сохраняться при переходе между страницами?

Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине
Авторизация пользователя
Темная/светлая тема приложения
Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище.

🚩Может ли состояние изменяться в одном месте, а использоваться в другом?

Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии.

const ChatContext = createContext();

function ChatProvider({ children }) {
  const [messages, setMessages] = useState([]);

  const sendMessage = (text) => {
    setMessages([...messages, { text, id: Date.now() }]);
  };

  return (
    <ChatContext.Provider value={{ messages, sendMessage }}>
      {children}
    </ChatContext.Provider>
  );
}

function ChatList() {
  const { messages } = useContext(ChatContext);
  return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
  const { sendMessage } = useContext(ChatContext);
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      onKeyPress={(e) => {
        if (e.key === "Enter") {
          sendMessage(text);
          setText("");
        }
      }}
    />
  );
}

🚩Зависит ли состояние от URL (адресной строки)?

Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path).
ID открытого товара: /products/123
Фильтры товаров: /shop?category=shoes&sort=price
Страница чата с пользователем: /chat?user=ivan

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

🤔 Что такое hoisting?

Это механизм JavaScript, при котором объявления переменных и функций поднимаются в начало своей области видимости. Например:
- Переменные, объявленные с var, поднимаются, но их значение остается undefined.
- let и const поднимаются, но не инициализируются.
- Функции полностью доступны до их объявления.

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

🤔 Какие есть альтернативы у redux?

Redux – мощный инструмент, но не всегда он необходим. Существует множество альтернатив, каждая из которых подходит для разных сценариев.

🚩React Context API + useReducer

Подходит для небольших и средних приложений
Встроено в React (не требует установки дополнительных библиотек)
useContext` позволяет передавать данные по дереву компонентов без "прокидывания" через props
useReducer работает как Redux, но проще

const AuthContext = createContext();

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return { ...state, isAuthenticated: false, user: null };
    default:
      return state;
  }
}

function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: null,
  });

  return (
    <AuthContext.Provider value={{ state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

function LoginButton() {
  const { dispatch } = useContext(AuthContext);
  return (
    <button onClick={() => dispatch({ type: "LOGIN", payload: "Иван" })}>
      Войти
    </button>
  );
}

🚩Zustand

Проще Redux, но с теми же возможностями
Нет лишних actions и reducers, только функции

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Счетчик: {count}</button>;
}

🚩Recoil

Идеален для React-приложений
Гибче, чем Redux, с концепцией "атомов" (раздельные состояния)

import { atom, useRecoilState } from "recoil";

const countState = atom({
  key: "count",
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩Jotai

Напоминает Recoil, но без сложных концепций
Поддерживает React Suspense и асинхронные состояния

import { atom, useAtom } from "jotai";

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩MobX

Автоматически отслеживает изменения состояния
Удобен для сложных приложений

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }
}

const store = new CounterStore();

const Counter = observer(() => (
  <button onClick={() => store.increment()}>Счетчик: {store.count}</button>
));

🚩XState

Подходит для сложных логик (например, UI-анимаций, состояний формы)
Удобно описывать последовательности действий

import { createMachine, interpret } from "xstate";

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
});

const service = interpret(toggleMachine).start();
service.send("TOGGLE"); // Меняет состояние

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

🤔 Что такое merge и rebase, в чем отличие друг от друга?

1. Merge:
- Объединяет ветки, создавая новый коммит.
- Сохраняет историю изменений обеих веток.
2. Rebase:
- Переносит коммиты одной ветки поверх другой.
- История становится линейной, но теряются промежуточные изменения.
Разница: merge сохраняет все ветвления, а rebase упрощает историю.

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

🤔 Что такое meta теги?

Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу.

🚩Зачем нужны meta-теги?

Улучшают SEO (поисковую оптимизацию)
Управляют отображением в соцсетях и поисковиках
Настраивают адаптивность страницы (например, на мобильных устройствах)
Определяют кодировку, язык и авторство страницы

🚩Основные meta-теги с примерами

Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Социальные сети (Open Graph, Twitter Cards)
Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

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

🤔 Когда брать абсолютные величины, а когда относительные?

1. Абсолютные величины:
- Когда нужны конкретные значения, например, доход компании в долларах.
2. Относительные величины:
- Для сравнения и анализа изменений, например, рост дохода в процентах.
Абсолютные подходят для понимания масштаба, а относительные — для динамики.

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

🤔 Что такое amp страницы?

AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что:
Используют оптимизированный HTML (AMP HTML)
Ограничивают использование JavaScript
Подключают Google AMP Cache для мгновенной загрузки

🚩Зачем нужны AMP?

Ускоряют загрузку страниц → полезно для мобильных пользователей
Улучшают SEO → Google любит быстрые сайты
Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание
Снижают нагрузку на сервер

🚩Как создать AMP-страницу?

AMP-страница – это обычный HTML, но с ограничениями и своими тегами.

<!DOCTYPE html>
<html ⚡️ lang="ru">
<head>
  <meta charset="UTF-8">
  <title>AMP Страница</title>
  <link rel="canonical" href="https://example.com/normal-page.html">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>
    body { visibility: hidden; }
  </style>
  <noscript>
    <style amp-boilerplate>
      body { visibility: visible; }
    </style>
  </noscript>
</head>
<body>
  <h1>Привет, это AMP!</h1>
  <amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>

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

🤔 Что известно про SSR?

SSR (Server-Side Rendering) ускоряет загрузку страниц и улучшает SEO, так как контент рендерится на сервере и передается готовым. Это полезно для сайтов с динамическим контентом и высокой нагрузкой, но сложнее в реализации и требует серверных ресурсов.

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

🤔 Расскажи про отдельные домены для статики

Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей:
CSS, JavaScript
Изображения, видео
Шрифты, иконки

Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN.

🚩Зачем использовать отдельные домены для статики?

🟠Разгрузка основного сервера
Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее

🟠Ускорение загрузки сайта
Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно.

🟠Кэширование и CDN
Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру

🟠Уменьшение размера cookie
Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (static.example.com), это снижает трафик

🚩Как настроить отдельный домен для статики?

🟠Создать поддомен для статики
Обычно статику размещают на поддомене:
static.example.com
cdn.example.com
assets.example.com

🟠Настроить веб-сервер или CDN
Если используем NGINX:

  server {
    server_name static.example.com;
    root /var/www/static;
  }

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

🤔 Какие использовать препроцессоры?

- Sass/SCSS: наиболее популярный и мощный для работы с CSS, поддерживает переменные, вложенность и миксины.
- Less: подходит для интеграции с JavaScript-проектами.
- Stylus: гибкий и минималистичный синтаксис, удобен для небольших проектов.
- Выбор зависит от требований проекта и команды.

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

🤔 Как css спрайты реализуются на странице или сайте?

CSS-спрайты – это метод объединения нескольких изображений в один файл для оптимизации загрузки и отображения на веб-странице.

🚩Зачем нужны спрайты?

Уменьшают количество HTTP-запросов → вместо 10 изображений браузер загружает 1 файл
Ускоряют загрузку сайта → меньше сетевой нагрузки
Кэшируются в браузере → реже загружаются заново

🟠Создание CSS-спрайта
Допустим, у нас есть 3 иконки:
icon-home.png
icon-user.png
icon-settings.png
Мы объединяем их в один файл (sprite.png):
![sprite]

🟠Использование спрайта с CSS
Теперь нам нужно показать нужную часть изображения с помощью background-position.

.sprite {
  background: url("sprite.png") no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Позиции каждой иконки */
.icon-home { background-position: 0 0; }  /* Первая иконка */
.icon-user { background-position: -32px 0; }  /* Вторая иконка */
.icon-settings { background-position: -64px 0; }  /* Третья иконка */

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

🤔 Как происходит взаимодействие с 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. Рендеринг: Браузер рендерит элементы на странице, создавая визуальное представление.

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