🤔 Что такое макро и микро задачи?

Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач.

Ставь 👍 если знал ответ

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

💬 Спрашивают в 3% собеседований

Git — это система контроля версий, которая позволяет отслеживать изменения в коде, работать совместно над проектами и управлять различными версиями кода. Взаимодействие с Git происходит через командную строку с использованием различных команд. Рассмотрим основные этапы и команды, используемые для работы с Git.

Основные команды и этапы работы

1️⃣ Инициализация репозитория

Создание нового локального репозитория или клонирование существующего удаленного репозитория.

➕ Инициализация нового локального репозитория:

    git init
  

➕ Клонирование удаленного репозитория:

    git clone <url>
  

2️⃣ Добавление файлов в репозиторий

Добавление новых или измененных файлов в индекс (стейджинг).

➕Просмотр состояния репозитория:

    git status
  

➕ Добавление файла в индекс:

    git add <file>
  

➕ Добавление всех измененных файлов:

    git add .
  

3️⃣ Фиксация изменений

Сохранение изменений в истории репозитория с комментарием.

➕ Создание коммита:

    git commit -m "Сообщение коммита"
  

4️⃣ Работа с ветками

Создание, переключение и слияние веток.

➕ Создание новой ветки:

    git branch <branch-name>
  

➕ Переключение на другую ветку:

    git checkout <branch-name>
  

➕ Создание и переключение на новую ветку:

    git checkout -b <branch-name>

➕ Слияние веток:

    git merge <branch-name>
  

5️⃣ Работа с удаленными репозиториями

Добавление удаленного репозитория, отправка и получение изменений.

➕ Добавление удаленного репозитория:

    git remote add origin <url>
 

➕ Отправка изменений в удаленный репозиторий:

    git push origin <branch-name>
  

Пример:

    git push origin main
  

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

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

💬 Спрашивают в 3% собеседований

Процесс преобразования HTML-документа в веб-страницу, отображаемую в браузере, включает несколько ключевых этапов. Рассмотрим этот процесс шаг за шагом.

1️⃣ Загрузка HTML-документа

Когда пользователь вводит URL в адресную строку браузера или переходит по ссылке, происходит запрос HTTP (или HTTPS) к серверу, на котором находится веб-страница. Сервер отвечает на этот запрос, отправляя HTML-документ.

2️⃣ Парсинг HTML-документа

Браузер получает HTML-документ и начинает его парсинг. Это включает в себя разбор HTML-кода и создание структуры данных, известной как DOM (Document Object Model).

3️⃣ Построение DOM-дерева

Браузер читает HTML-документ построчно, создавая узлы для каждого элемента и текста. Эти узлы образуют DOM-дерево, которое представляет структуру веб-страницы. Каждый элемент HTML превращается в объект, который браузер может использовать для дальнейших операций.

4️⃣ Загрузка внешних ресурсов

В процессе парсинга HTML браузер также обнаруживает ссылки на внешние ресурсы, такие как CSS-файлы, JavaScript-файлы, изображения, шрифты и другие ресурсы. Браузер отправляет дополнительные HTTP-запросы для загрузки этих ресурсов.

5️⃣ Применение CSS и построение CSSOM

После загрузки CSS-файлов браузер парсит их и строит CSSOM (CSS Object Model) — объектную модель, представляющую стили, применяемые к элементам на странице. Затем браузер объединяет DOM и CSSOM для создания рендер-дерева (render tree), которое содержит видимые элементы страницы и их стили.

6️⃣ Расчет макета (layout)

Браузер рассчитывает размеры и положение каждого элемента на странице, основываясь на рендер-дереве и правилах CSS. Этот процесс известен как layout или reflow.

7️⃣ Отрисовка (painting)

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

8️⃣ Выполнение JavaScript

Если HTML-документ содержит теги <script> или ссылки на внешние JavaScript-файлы, браузер загружает и выполняет эти скрипты. JavaScript может изменять DOM, CSSOM и влиять на отрисовку страницы в реальном времени.

9️⃣ Обработка событий

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

Итоговый процесс

1️⃣Запрос страницы: Браузер отправляет HTTP-запрос и получает HTML-документ.

2️⃣Парсинг HTML: Создание DOM-дерева.

3️⃣Загрузка ресурсов: Загрузка CSS, JavaScript и других ресурсов.

4️⃣Парсинг CSS: Создание CSSOM и объединение с DOM для создания рендер-дерева.

5️⃣Макет: Расчет размеров и положения элементов.

6️⃣Отрисовка: Преобразование рендер-дерева в пиксели на экране.

7️⃣Выполнение JavaScript: Изменение DOM и CSSOM, повторная отрисовка при необходимости.

8️⃣Обработка событий: Реакция на взаимодействие пользователя с веб-страницей.

HTML-документ преобразуется в веб-страницу в браузере через процесс, включающий парсинг HTML, создание DOM-дерева, загрузку и применение CSS, расчет макета, отрисовку элементов на экране и выполнение JavaScript.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

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

💬 Спрашивают в 3% собеседований

Семантика в контексте веб-разработки и HTML означает использование элементов и тегов, которые четко и понятно описывают содержимое веб-страницы. Это помогает как разработчикам, так и машинам (браузерам, поисковым системам, вспомогательным технологиям) лучше понимать и интерпретировать структуру и значение содержимого.

🤔 Основные аспекты

1️⃣ Читаемость и поддержка кода:

➕ Семантический HTML делает код более читаемым и понятным для разработчиков. Когда элементы HTML четко отражают их содержимое и назначение, поддерживать и изменять код становится легче.

2️⃣ SEO (поисковая оптимизация):

➕ Поисковые системы лучше индексируют страницы, написанные с использованием семантического HTML. Это помогает улучшить видимость и рейтинг страницы в поисковых результатах.

3️⃣Доступность:

➕Семантический HTML улучшает доступность веб-страниц для пользователей с ограниченными возможностями, поскольку вспомогательные технологии, такие как экранные читалки, могут лучше интерпретировать и озвучивать содержимое.

Примеры семантических HTML-элементов

1️⃣ Структурные элементы:

➕ <header>: Представляет верхний колонтитул документа или секции.

➕ <nav>: Определяет набор навигационных ссылок.

➕ <main>: Содержит основное содержимое страницы.

➕ <section>: Определяет секцию в документе.

➕ <article>: Представляет самостоятельный элемент контента, который можно независимо распространять.

➕ <aside>: Определяет содержимое, связанное с основным содержимым, но не являющееся его частью.

➕ <footer>: Представляет нижний колонтитул документа или секции.

2️⃣ Текстовые элементы:

➕ <strong>: Указывает на важность текста (часто отображается жирным шрифтом).

➕ <em>: Выделяет текст, который имеет акцент или интонацию (часто отображается курсивом).

➕ <blockquote>: Оформляет цитату.

➕ <cite>: Указывает на источник или заглавие работы.

➕ <code>: Определяет блок кода.

➕ <abbr>: Определяет аббревиатуру.

🤔 Пример:

<p>Это <strong>важное</strong> сообщение.</p>
<p>Он сказал: <blockquote>Это пример цитаты.</blockquote></p>
<p>Код: <code>console.log('Hello, World!');</code></p>
<p>Слово <abbr title="Hypertext Markup Language">HTML</abbr> означает язык гипертекстовой разметки.</p>

🤔 Важность использования

1️⃣Ясность структуры и содержания:

➕ Использование правильных семантических элементов делает структуру и содержание веб-страницы более ясными и понятными.

2️⃣ Повышение эффективности разработки:

➕ Семантический HTML упрощает сотрудничество между разработчиками и дизайнерами, а также облегчает процесс отладки и поддержания кода.

➕Долгосрочная поддержка:

➕Веб-стандарты и технологии продолжают развиваться, и использование семантического HTML помогает обеспечить долгосрочную поддержку и совместимость вашего сайта с новыми инструментами и технологиями.

Семантика в HTML означает использование элементов и тегов, которые четко и понятно описывают содержимое веб-страницы. Это улучшает читаемость и поддержку кода, SEO и доступность. Семантический HTML включает такие элементы, как <header>, <nav>, <main>, <section>, <article>, <footer>, <strong>, <em>, <blockquote>, <cite>, <code> и <abbr>, которые помогают структурировать и описывать содержимое страниц.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое редакс?

💬 Спрашивают в 3% собеседований

Redux — это библиотека для управления состоянием приложений, часто используемая с библиотекой React, но она может быть использована и с другими библиотеками или фреймворками JavaScript. Redux предоставляет централизованное хранилище (store) для всех состояний приложения, что упрощает управление и отладку состояний.

🤔 Основные концепции

1️⃣ Хранилище (store):

➕ Является объектом, который содержит все состояние приложения. В приложении может быть только одно хранилище.

2️⃣ Действия (actions):

➕ Действия — это объекты, которые отправляются в хранилище для изменения состояния. Они должны иметь тип (type), который описывает тип действия, и могут содержать дополнительные данные (payload).

3️⃣ Редюсеры (reducers):

➕ Это чистые функции, которые принимают текущее состояние и действие в качестве аргументов и возвращают новое состояние. Они описывают, как состояние приложения изменяется в ответ на действия.

4️⃣ Диспетчеры (dispatch):

➕ Отправляют действия в хранилище. Это единственный способ изменить состояние в Redux.

5️⃣ Подписки (subscriptions):

➕ Позволяют компонентам подписываться на изменения состояния в хранилище и реагировать на эти изменения.

🤔 Пример

Для начала установим необходимые пакеты:

npm install redux react-redux

Создание действий (actions)

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

Создание редюсера (reducer)

// reducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

Создание хранилища (store)

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

Подключение Redux к React

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Использование состояния и действий

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default App;

🤔 Преимущества

1️⃣ Централизованное управление состоянием:

➕ Все состояние приложения находится в одном месте, что упрощает управление и отладку.

2️⃣ Предсказуемость:

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

3️⃣ Легкость тестирования:

➕ Действия и редюсеры легко тестировать из-за их чистоты и изолированности.

4️⃣ Возможность временной петли (time travel):

➕ Инструменты разработки Redux позволяют перемещаться по истории состояний, что облегчает отладку.

Redux — это библиотека для управления состоянием приложений, предоставляющая централизованное хранилище для всех состояний. Основные концепции Redux включают хранилище (store), действия (actions), редюсеры (reducers), диспетчеры (dispatch) и подписки (subscriptions). Redux часто используется с React, но может быть применен и с другими библиотеками.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что делает веб пак?

💬 Спрашивают в 3% собеседований

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

🤔 Основные функции

1️⃣ Сборка модулей (Module Bundling)

:plu Webpack анализирует ваше приложение, начиная с одного или нескольких входных файлов (entry points), и строит граф зависимостей всех модулей, используемых в вашем приложении.

➕ Он объединяет эти модули в один или несколько выходных файлов (bundles), которые можно загрузить в браузер.

2️⃣ Обработка ресурсов (Asset Management)

➕ Webpack может обрабатывать различные типы файлов, такие как JavaScript, CSS, изображения и шрифты, используя загрузчики (loaders) и плагины (plugins).

➕ Загрузчики позволяют вам преобразовывать файлы перед включением их в сборку. Например, загрузка CSS, преобразование ES6+ кода в ES5 с использованием Babel, оптимизация изображений и т.д.

3️⃣ Оптимизация производительности (Performance Optimization)

➕ Webpack предлагает множество встроенных функций для оптимизации выходных файлов, включая минификацию JavaScript и CSS, разделение кода (code splitting), удаление неиспользуемого кода (tree shaking) и др.

4️⃣ Горячая перезагрузка (Hot Module Replacement)

➕ Эта функция позволяет обновлять модули приложения в реальном времени без перезагрузки всей страницы. Это значительно ускоряет процесс разработки и тестирования.

🤔 Основные компоненты

1️⃣ Входные точки (Entry Points)

➕ Входные точки указывают Webpack, с какого файла или файлов начать построение графа зависимостей.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
};

2️⃣ Выходные точки (Output)

➕ Выходные точки определяют, где Webpack должен сохранить сгенерированные файлы и как их называть.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

3️⃣ Загрузчики (Loaders)

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

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

Webpack — это инструмент для сборки модулей, который объединяет и оптимизирует различные ресурсы приложения (JavaScript, CSS, изображения и т.д.) в один или несколько файлов для загрузки в браузер. Он использует входные точки (entry points), выходные точки (output), загрузчики (loaders) и плагины (plugins) для управления процессом сборки и обеспечения оптимальной производительности.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

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

Передача строки непосредственно в DOM (Document Object Model) может привести к различным проблемам, связанным с безопасностью и корректностью рендеринга. Рассмотрим более подробно, почему это не рекомендуется.

🤔 Проблемы с безопасностью

1️⃣ XSS-атаки (Cross-Site Scripting):

➕ Если строка содержит пользовательский ввод или динамически полученные данные, она может включать вредоносный код. Например, злоумышленник может вставить <script> тег, который будет выполнен браузером и может украсть данные пользователей или выполнить другие вредоносные действия.

const userInput = "<img src='x' onerror='alert(\"XSS Attack\")'>";
document.getElementById('output').innerHTML = userInput;

🤔 Проблемы с корректностью рендеринга

2️⃣ Неправильный рендеринг HTML:

➕ Строка, содержащая HTML-код, может быть неправильно интерпретирована или отрендерена браузером. Это может привести к некорректному отображению страницы или нарушению её структуры.

const invalidHTML = "<div>Unclosed tag";
document.getElementById('output').innerHTML = invalidHTML;
// Это может привести к неправильному отображению содержимого.

🤔 Как безопасно работать с динамическим контентом

1️⃣ Использование методов DOM API:

➕ Вместо передачи строк, рекомендуется использовать методы DOM API, такие как createElement, appendChild, textContent и другие. Эти методы позволяют безопасно добавлять элементы и текст в DOM.

const userInput = "Safe text";
const outputElement = document.getElementById('output');
const textNode = document.createTextNode(userInput);
outputElement.appendChild(textNode);

2️⃣ Экранирование данных:

➕ Если необходимо вставить HTML-код из строки, можно использовать методы, которые экранируют потенциально опасные символы.

const userInput = "<div>Safe content</div>";
const outputElement = document.getElementById('output');
outputElement.textContent = userInput;
// Использование textContent гарантирует безопасное добавление текста.

🤔 Примеры

1️⃣ Добавление текстового контента:

const userInput = "Some user-provided text";
const outputElement = document.getElementById('output');
outputElement.textContent = userInput;

2️⃣ Создание и добавление элементов:

const userInput = "Some user-provided text";
const outputElement = document.getElementById('output');
const paragraph = document.createElement('p');
paragraph.textContent = userInput;
outputElement.appendChild(paragraph);

Передача строки напрямую может быть небезопасной и привести к XSS-атакам и некорректному рендерингу. Вместо этого рекомендуется использовать методы DOM API, такие как createElement, appendChild, и textContent, для безопасного и правильного добавления элементов и текста.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 В чем отличие между серверным рендерингом и спа?

💬 Спрашивают в 3% собеседований

Серверный рендеринг (Server-Side Rendering, SSR) и одностраничные приложения (Single Page Applications, SPA) — это два различных подхода к созданию веб-приложений, каждый из которых имеет свои преимущества и недостатки. Рассмотрим их основные отличия.

🤔 Серверный рендеринг (SSR)

➕ При нем весь HTML-код страницы генерируется на сервере и отправляется в браузер в готовом виде.

➕ Сервер получает запрос от клиента, обрабатывает его, собирает необходимые данные, рендерит HTML и отправляет его обратно клиенту.

🤔 Преимущества:

1️⃣ Улучшение SEO:

➕ Поисковые системы получают полностью отрендеренную HTML-страницу, что облегчает индексацию контента.

2️⃣ Быстрый первый рендер (Time to First Paint):

➕ Пользователь видит содержимое страницы быстрее, так как браузер получает готовый HTML.

3️⃣ Совместимость с более старыми браузерами:

➕ Серверный рендеринг не требует от клиента выполнения сложного JavaScript-кода.

🤔 Недостатки:

1️⃣ Нагрузка на сервер:

➕ Сервер должен обрабатывать каждый запрос и рендерить HTML, что может увеличить нагрузку на сервер при большом количестве запросов.

2️⃣ Медленное взаимодействие после первого рендера:

➕ Каждое взаимодействие с приложением может потребовать полного обновления страницы, что делает взаимодействие медленнее и менее плавным.

🤔 Пример:

➕ Next.js для React.

🤔 Одностраничные приложения (SPA)

➕ В нем вся необходимая логика и компоненты загружаются на клиенте единожды при первой загрузке. После этого приложение взаимодействует с сервером через AJAX-запросы, загружая только необходимые данные.

➕ Обновляют контент динамически без перезагрузки всей страницы.

🤔 Преимущества:

1️⃣ Быстрое взаимодействие после первой загрузки:

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

2️⃣ Лучшая пользовательская опыта (UX):

➕ Плавные переходы и обновления контента без перезагрузки страницы.

3️⃣ Реактивное взаимодействие:

➕ Возможность реализации сложных пользовательских интерфейсов с высоким уровнем интерактивности.

🤔 Недостатки:

1️⃣ SEO-проблемы:

➕ Поисковые системы могут иметь сложности с индексацией контента, который загружается динамически.

2️⃣ Долгое время первой загрузки (Initial Load Time):

➕ Первоначальная загрузка может быть медленной, так как необходимо загрузить весь JavaScript-код приложения.

3️⃣ Совместимость с браузерами:

➕ Требует современных браузеров и может не работать в старых или менее популярных браузерах без полифиллов.

🤔 Пример:

➕ React с использованием React Router для маршрутизации.

➕ Vue.js с использованием Vue Router.

➕ Angular.

🤔 Гибридные подходы

Некоторые современные фреймворки поддерживают гибридный подход, совмещая преимущества SSR и SPA. Например, Next.js для React позволяет рендерить начальную загрузку на сервере для улучшения SEO и времени до первого рендера, а затем переключаться на SPA для интерактивных взаимодействий.

SSR с Next.js (React):

// pages/index.js
import React from 'react';

const HomePage = ({ data }) => (
  <div>
    <h1>Home Page</h1>
    <p>{data}</p>
  </div>
);

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default HomePage;

➕ Серверный рендеринг (SSR): Генерирует HTML на сервере и отправляет его в браузер. Обеспечивает лучшее SEO и более быстрый первый рендер, но может увеличить нагрузку на сервер и иметь более медленное взаимодействие после первого рендера.

➕ Одностраничные приложения (SPA): Загружают и выполняют весь JavaScript на клиенте, обеспечивая быстрые и плавные взаимодействия после начальной загрузки, но могут иметь проблемы с SEO и более долгое время первой загрузки.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых