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

ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода.

🚩Почему ESLint полезен?
Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить.

🚩Проблемы без ESLint

Разные стили написания кода
Пропущенные точки с запятой или лишние пробелы
Неиспользуемые переменные
Ошибки, которые не выявляются во время компиляции (например, undefined переменные)

🚩Решение с ESLint:

Автоматически находит ошибки и предупреждения
Подсказывает лучшие практики
Поддерживает кастомные правила
Работает в IDE и CI/CD (автоматическая проверка)

🟠Как ESLint работает?
ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

🟠Как установить и настроить ESLint?
Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

🟠ESLint в IDE (VS Code, WebStorm)
Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave"

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

🟠ESLint в CI/CD (автоматическая проверка на сервере)
В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку.

"scripts": {
  "lint": "eslint src --fix"
}

Теперь перед коммитом можно запускать:

npm run lint

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

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

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

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

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

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

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

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

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

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

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

В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).

<img> – самый простой способ (браузер сам загружает)

<img src="https://example.com/image.jpg" alt="Картинка">

CSS (background-image) – если нужно фоновое изображение

.element {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

🟠`fetch()` – если нужно обработать картинку в JS
Можно загрузить изображение как Blob и создать временный URL.

fetch("https://example.com/image.jpg")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById("img").src = url;
  });

XMLHttpRequest – старый метод (устарел, но работает)

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";

xhr.onload = function () {
  const url = URL.createObjectURL(xhr.response);
  document.getElementById("img").src = url;
};

xhr.send();

🟠`<canvas>` – если нужно редактировать изображение
Можно загрузить картинку и нарисовать её на <canvas>.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

img.src = "https://example.com/image.jpg";

WebSocket – если изображение передаётся в реальном времени

const socket = new WebSocket("wss://example.com/socket");

socket.onmessage = function (event) {
  const url = URL.createObjectURL(event.data);
  document.getElementById("img").src = url;
};

data URL (Base64) – если нужно хранить изображение в тексте

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

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

🤔 Для чего нужен тег <noscript>?

Он используется для отображения альтернативного контента в случае, если у пользователя:
- отключён JavaScript,
- браузер не поддерживает JS.
Это как "план Б" для статического отображения.

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

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

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

🤔 Как мы можем замерить скорость работы участка кода с date.Now?

В JavaScript можно замерить скорость выполнения кода с помощью Date.now(), но есть более точные способы. Давайте разберём разные варианты.

🚩Использование `Date.now()`

Метод Date.now() возвращает количество миллисекунд с 1 января 1970 года (Unix-время). Можно запомнить время до и после выполнения кода, а затем вычислить разницу.

const start = Date.now(); // Фиксируем время начала

// Код, время выполнения которого нужно измерить
for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = Date.now(); // Фиксируем время окончания
console.log(`Время выполнения: ${end - start} мс`);

🚩Использование `performance.now()` (Более точный способ)

Метод performance.now() возвращает время с микросекундной точностью (до тысячных долей миллисекунды). Он точнее, чем Date.now(), так как измеряет время с высокой детализацией.

const start = performance.now();

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = performance.now();
console.log(`Время выполнения: ${(end - start).toFixed(3)} мс`);

🚩Использование `console.time()`

Если нужно просто измерить время выполнения блока кода, можно воспользоваться console.time() и console.timeEnd().

console.time("Мой код");

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

console.timeEnd("Мой код"); // Выведет время выполнения

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

🤔 Что такое репозиторий?

Это хранилище кода, файлов и их истории изменений. Используется для совместной работы над проектами. Репозитории могут быть локальными (на компьютере) или удаленными (например, на GitHub, GitLab). Системы контроля версий, такие как Git, управляют содержимым репозитория.

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

🤔 Зачем создавались библиотеки react и другие?

Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки:

🟠Повышение эффективности разработки
Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным.
React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение.

🟠Улучшение производительности
Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким.
React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились.

🟠Облегчение работы с состоянием приложения
Управление состоянием больших и сложных приложений может стать хаотичным.
React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой.

🟠Улучшение масштабируемости и поддерживаемости кода
По мере роста приложения, код может стать сложным для понимания и изменения.
Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода.

🟠Сообщество и экосистема
Наличие обширного сообщества и инструментов для разработки.
React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения.

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

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

🤔 Какие преимущества у 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));

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

🤔 Что такое 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">

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