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

Docker позволяет упаковать приложение и все его зависимости в контейнер, обеспечивая одинаковую среду для разработки, тестирования и продакшна.

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

🤔 Зачем нужен 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

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

🤔 Чем var отличается от const ?

Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде.

🚩Область видимости (Scope)

🟠Var
Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена.

🟠Const
Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.

🚩Переназначение и изменение

🟠Var
Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение.

🟠Const
Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.

🚩Поднятие (Hoisting)

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

🟠Const
Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона".

🚩Инициализация

🟠Var
Эти переменные можно объявить без инициализации, и их начальное значение будет undefined.

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

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

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

🤔 Чем em отличается от rem?

🟠Как работает `em`?
em зависит от размера шрифта родителя (font-size).

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}

🟠Как работает `rem`?
rem всегда зависит от font-size у <html>.

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

🟠Когда использовать `em`, а когда `rem`?
Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми
Используйте em, если хотите, чтобы элементы зависели от родителя

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

🤔 Чего стоит и не стоит избегать в оптимизации сайта?

🟠Оптимизация изображений
Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя.

🟠Минификация и объединение файлов
Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один.

🟠Использование CDN (Content Delivery Network)
Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов.

🟠Кэширование
На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx.

🟠Асинхронная загрузка и критический CSS
Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.

🟠Улучшение производительности сервера
Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов.

🟠Использование современных технологий
Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов.

🟠Мониторинг и анализ
Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic.

🚩Чего стоит избегать при оптимизации сайта

🟠Избегайте чрезмерной минимизации
Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку.

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

🟠Не загружайте все ресурсы сразу
Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки.

🟠Не пренебрегайте кэшированием
Отсутствие кэширования: Увеличивает время загрузки для повторных посещений.

🟠Избегайте блокирующих ресурсов
JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами.

🟠Не злоупотребляйте анимациями и большими скриптами
Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах.

🟠Избегайте чрезмерного использования плагинов
Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью.

🟠Не забывайте про оптимизацию для мобильных устройств
Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства.

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

🤔 Как уничтожить объект web worker?

В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.

🚩Зачем уничтожать Web Worker?

Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.

🚩Как использовать `terminate()`?

Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

🚩Важно помнить

1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.
2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются.
3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker?

Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.

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

🤔 Расскажи про memo в react

React.memo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились.

🚩Зачем нужен `React.memo`?

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

🚩Как использовать `React.memo`?

React.memo — это функция высшего порядка (HOC), которая оборачивает функциональный компонент

import React from "react";

const MyComponent = ({ value }) => {
  console.log("Рендер компонента!");
  return <div>Значение: {value}</div>;
};

// Оборачиваем компонент в React.memo
const MemoizedComponent = React.memo(MyComponent);

export default MemoizedComponent;

🚩Пример без React.memo vs. с React.memo

Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике

import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <MemoizedComponent value="Привет, мир!" />
    </div>
  );
};

export default Parent;

🚩Когда НЕ стоит использовать `React.memo`?

Если компонент всегда ререндерится из-за изменения пропсов – смысла в memo нет.
Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу.
Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится.

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

🤔 Что такое git-flow?

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

🚩Основные ветки

🟠master
Содержит стабильную версию кода, готовую к выпуску (release).
🟠develop
Основная ветка для разработки, содержит последние изменения кода для следующего выпуска.

🚩Вспомогательные ветки

🟠feature
Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop.

🟠release
Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop.

🟠hotfix
Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop.

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

🤔 Расскажи про области видимости

В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.

🚩Глобальная область видимости

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

var globalVar = 'Я глобальная переменная';

function testFunction() {
  console.log(globalVar); // Доступно
}

testFunction();
console.log(globalVar); // Доступно

🚩Функциональная область видимости

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

function testFunction() {
  var functionVar = 'Я внутри функции';
  console.log(functionVar); // Доступно
}

testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна

🚩Блочная область видимости

Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.

if (true) {
  let blockVar = 'Я внутри блока';
  console.log(blockVar); // Доступно
}

console.log(blockVar); // Ошибка: переменная blockVar недоступна

🚩Область видимости модуля (Module Scope)

При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.

export const myVar = 'Я переменная из модуля';

import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"

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

🤔 Какая основная причина для использования SSR?

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

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

🤔 Когда стоит использовать тип any?

Тип any в TypeScript позволяет отключить проверку типов и использовать любую структуру данных, как в обычном JavaScript.
Но any убирает всю защиту TypeScript, поэтому его нужно использовать только в крайних случаях.

🚩Если тип данных неизвестен заранее (например, ответ от API)
Иногда сервер может вернуть разные структуры данных, и невозможно заранее определить точный тип.

async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  return response.json();
}

Лучший вариант — использовать интерфейсы вместо any:

interface User {
  id: number;
  name: string;
}

async function fetchUser(url: string): Promise<User> {
  const response = await fetch(url);
  return response.json() as User;
}

🚩При миграции JavaScript в TypeScript

Если проект на чистом JavaScript, добавление TypeScript может сломать код. any помогает постепенно вводить строгую типизацию.

function log(value: any) {
  console.log(value);
}

🚩Когда работаем с динамическими структурами (например, `localStorage`)

В localStorage можно сохранить что угодно, поэтому при чтении данных тип неизвестен.

const data: any = localStorage.getItem("user");

Лучше сразу привести any к нужному типу

const user = JSON.parse(localStorage.getItem("user") || "{}") as { id: number; name: string };

🚩Когда пишем универсальную библиотеку

Если функция должна работать с разными типами, any может быть временным решением.

function mergeObjects(obj1: any, obj2: any): any {
  return { ...obj1, ...obj2 };
}

Лучший вариант с generic (T вместо any)

function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

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

🤔 Что такое SOLID?

SOLID — это принципы ООП для создания гибкого кода: единая ответственность, открытость для расширения, замена подклассов, узкие интерфейсы, зависимости от абстракций.

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

🤔 Почему у нас в css нет селектора на родителе?

В CSS нет селектора родителя, потому что это нарушило бы оптимизацию и производительность рендеринга.

🚩Как работают селекторы в CSS?

Обычные селекторы идут от родителя к дочерним элементам.

.parent .child {
  color: red;
}

Что было бы с селектором родителя?

.child:has-parent(.parent) { 
  color: red;
}

🚩Использовать `:has()` (в современных браузерах)

В CSS4 появился :has(), который позволяет изменять родителя, если в нём есть определённый потомок.

.parent:has(.child) {
  border: 2px solid red;
}

🚩Использовать Flexbox/Grid вместо селектора родителя

Иногда можно поменять структуру HTML и стилизацию, чтобы избежать проблемы.

.parent {
  display: flex;
  gap: 10px;
}

🚩Использовать JavaScript

Если нужно изменить родителя динамически, можно использовать JavaScript.

document.querySelectorAll(".child").forEach(child => {
  child.parentElement.classList.add("has-child");
});

.has-child {
  border: 2px solid blue;
}

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