Какие знаешь способы центрирования ?
Спросят с вероятностью 7%

Центрирование элементов может быть выполнено несколькими способами, в зависимости от типа элемента (блочный или строчный), его размеров и родительского контейнера. Вот основные методы центрирования элементов по горизонтали и вертикали:

Центрирование по горизонтали

1️⃣Использование `text-align` для строчных и встроенно-блочных элементов

.container {
  text-align: center;
}

2️⃣Использование margin: auto для блочных элементов с фиксированной шириной

.element {
  width: 50%;
  margin: 0 auto;
}

Центрирование по вертикали

1️⃣Использование Flexbox

Позволяет легко центрировать элементы по горизонтали и вертикали.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Высота контейнера */
}

2️⃣Использование Grid Layout

Также предоставляет простые способы для центрирования.

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

Комбинированное центрирование (по горизонтали и вертикали)

1️⃣Flexbox

Удобен для центрирования по обеим осям.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

2️⃣Grid Layout

Предоставляет способ центрирования по горизонтали и вертикали с использованием place-items.

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

3️⃣Абсолютное позиционирование

В сочетании с трансформацией.

.container {
  position: relative;
  height: 100vh; /* Высота контейнера */
}
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Центрирование с учетом размеров элемента */
}

HTML:

<div class="container">
  <div class="element">Центрированный элемент</div>
</div>

Центрировать элементы можно с помощью различных методов: text-align для строчных элементов, margin: auto для блочных элементов, Flexbox и Grid для универсального центрирования, а также абсолютного позиционирования с трансформацией.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Чем синхронный код отличается от асинхронного ?
Спросят с вероятностью 7%

Синхронный и асинхронный код отличаются тем, как они выполняются и управляют операциями ввода-вывода, временем ожидания и выполнением задач. Давайте рассмотрим их различия подробно.

Синхронный код

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

Синхронного кода:

function syncTask() {
  console.log('Начало');
  for (let i = 0; i < 1000000000; i++) { /* Длительная операция */}
  console.log('Конец');
}

syncTask();
console.log('Это будет выполнено после syncTask');

В этом примере, пока длительная операция (цикл) не завершится, программа не продолжит выполнение и следующий console.log не будет вызван.

Асинхронный код

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

С использованием коллбеков:

console.log('Начало');

setTimeout(() => {
  console.log('Асинхронная операция');
}, 1000);

console.log('Конец');

В этом примере setTimeout ставит задачу на выполнение через 1 секунду, но код продолжает выполняться дальше, и console.log('Конец') вызывается до завершения асинхронной операции.

С использованием промисов:

console.log('Начало');

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Асинхронная операция завершена');
  }, 1000);
}).then(message => {
  console.log(message);
});

console.log('Конец');

С использованием async/await:

console.log('Начало');

async function asyncTask() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Асинхронная операция завершена');
}

asyncTask();
console.log('Конец');

Основные отличия

1️⃣Выполнение:
✅Синхронный код: Выполняется последовательно. Каждая операция должна завершиться до начала следующей.
✅Асинхронный код: Позволяет выполнять другие операции, пока текущая не завершится.

2️⃣Блокировка:
✅Синхронный код: Может блокировать выполнение всей программы, если операция длительная.
✅Асинхронный код: Не блокирует выполнение программы. Другие операции могут выполняться параллельно.

3️⃣Управление временем ожидания:
✅Синхронный код: Время ожидания одной операции может замедлить всю программу.
✅Асинхронный код: Ожидание длительных операций не мешает выполнению других задач.

4️⃣Простота понимания:
✅Синхронный код: Проще для понимания и отладки, так как выполняется последовательно.
✅Асинхронный код: Может быть сложнее для понимания из-за необходимости управления состоянием и ожиданием результатов асинхронных операций.

Примеры

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

В чем разница между get и post ?
Спросят с вероятностью 7%

Методы GET и POST — это два из наиболее часто используемых HTTP-методов для взаимодействия с веб-серверами. Они имеют разные цели и характеристики, которые делают их подходящими для различных задач.

GET

1️⃣Основное использование: Метод используется для запроса данных с сервера. Например, загрузка веб-страницы, получение данных из базы данных и т. д.
2️⃣Параметры в URL: Данные передаются в URL строки в виде параметров. Пример:

      GET /search?query=javascript&page=2 HTTP/1.1
   Host: www.example.com
   

3️⃣Кеширование: Запросы GET могут быть закешированы браузером и прокси-серверами, что повышает производительность при повторных запросах.
4️⃣Букмарклеты: Запросы GET могут быть сохранены в закладках (букмарклеты) и легко шарятся.
5️⃣Идемпотентность: Запросы GET должны быть идемпотентными, то есть выполнение одного и того же запроса несколько раз не должно изменять состояние сервера.
6️⃣Ограничение по длине: URL имеет ограничение по длине (в зависимости от браузера и сервера, обычно около 2000 символов).

POST

1️⃣Основное использование: Метод используется для отправки данных на сервер, например, при отправке формы, загрузке файла и т. д.
2️⃣Параметры в теле запроса: Данные передаются в теле HTTP-запроса, а не в URL. Пример:

      POST /submit-form HTTP/1.1
   Host: www.example.com
   Content-Type: application/x-www-form-urlencoded
   Content-Length: 27

   username=john&password=1234
   

3️⃣Безопасность: Данные, передаваемые с помощью POST, не видны в URL, что делает этот метод более безопасным для передачи чувствительных данных (например, паролей). Однако данные все равно могут быть перехвачены, если не используется HTTPS.
4️⃣Кеширование: Запросы POST не кешируются браузером по умолчанию.
5️⃣Нет ограничений по длине: Метод POST не имеет таких же строгих ограничений по длине данных, как GET, что делает его подходящим для отправки больших объемов данных.
6️⃣Неидемпотентность: Запросы POST могут изменять состояние сервера, и выполнение одного и того же запроса несколько раз может привести к разным результатам (например, повторная отправка формы может создать дубликаты данных).

Примеры

GET:

<form action="/search" method="get">
  <input type="text" name="query" />
  <button type="submit">Search</button>
</form>

POST:

<form action="/submit-form" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">Submit</button>
</form>

Сравнение

| Характеристика | GET | POST |
|--------------------------|-----------------------------------|-----------------------------------|
| Цель | Получение данных | Отправка данных |
| Параметры | В URL | В теле запроса |
| Кеширование | Да | Нет |
| Безопасность | Менее безопасный для чувствительных данных | Более безопасный для чувствительных данных (при использовании HTTPS) |
| Ограничение по длине | Да (обычно около 2000 символов) | Нет |
| Идемпотентность | Да | Нет |
| Возможность закладок | Да | Нет |

GET используется для получения данных и передает параметры в URL, может кешироваться и имеет ограничение по длине URL. POST используется для отправки данных, передает параметры в теле запроса, не кешируется и не имеет строгих ограничений по длине данных.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Что такое hoisting ?
Спросят с вероятностью 7%

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

Hoisting переменных

Для переменных, объявленных с использованием var, только само объявление поднимается, а присвоение значения остается на своем месте. Это может привести к неожиданным результатам.

console.log(a); // undefined
var a = 5;
console.log(a); // 5

Интерпретируется как:

var a;
console.log(a); // undefined
a = 5;
console.log(a); // 5

Переменные, объявленные с помощью let и const, также поднимаются, но находятся в так называемой "временной мертвой зоне" (temporal dead zone, TDZ) до тех пор, пока выполнение кода не дойдет до строки их объявления. Попытка доступа к таким переменным до их объявления вызывает ошибку.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(b); // 10

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;
console.log(c); // 15

Hoisting функций

Функции, объявленные с помощью function declaration, полностью поднимаются — как объявление, так и их определение. Это позволяет вызывать функции до их объявления в коде.

hoistedFunction(); // "This function is hoisted"

function hoistedFunction() {
  console.log("This function is hoisted");
}

Функции, объявленные как function expression, ведут себя иначе. Только объявление переменной поднимается, но не ее присвоение. Это значит, что вы не можете вызвать такую функцию до ее фактического объявления.

hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function

var hoistedFunctionExpression = function() {
  console.log("This function is not hoisted");
};

Важные моменты

1️⃣Переменные, объявленные с помощью `var`, поднимаются, но их значение становится undefined до присвоения.
2️⃣Переменные, объявленные с помощью let ито такое поднимаются, но остаются недоступными до фактического объявления в коде, что вызывает ошибку при доступе.
3️⃣Функции, объявленные как function declaration, полностью поднимаются и могут быть вызваны до своего объявления.
4️⃣Функции, объявленные как function expression, поднимаются только как переменные, а присвоение происходит на месте, что делает их недоступными до присвоения.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Что такое merge и rebase, в чем отличие друг от друга ?
Спросят с вероятностью 7%

merge и rebase — это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.

Merge (слияние)

Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.

1️⃣Предположим, у вас есть две ветки: main и feature.
2️⃣В ветке feature вы сделали несколько коммитов.
3️⃣Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

В результате получается история, включающая коммит слияния:

A---B---C---F---G (main)
     \       /
      D---E (feature)

Где F и G — коммиты в ветке main, а D и E — коммиты в ветке feature. Коммит G — это коммит слияния, который объединяет изменения из feature в main.

Rebase (перебазирование)

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

1️⃣Предположим, у вас есть две ветки: main и feature.
1️⃣В ветке feature вы сделали несколько коммитов.
3️⃣Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

В результате история переписывается, как если бы коммиты из feature были сделаны на основе самой свежей версии main:

A---B---C---F---G (main)
                 \
                  D'---E' (feature)

Где D' и E' — это новые коммиты, созданные при перебазировании, основанные на последних изменениях из main.

Основные отличия

1️⃣История коммитов:
✅Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
✅Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.

2️⃣Коммиты слияния:
✅Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
✅Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.

3️⃣Конфликты:
✅Merge: Конфликты решаются один раз при слиянии.
✅Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.

4️⃣Применение:
✅Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
✅Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.

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

✅Используйте `merge`, когда вы хотите сохранить всю историю разработки, включая все ветвления и слияния. Это полезно для командной работы, где важно видеть весь контекст изменений.
✅Используйте rebase, когда вы хотите поддерживать чистую и линейную историю. Это особенно полезно для интеграции изменений в основную ветку перед созданием pull request'ов, чтобы история коммитов была более понятной.

Merge объединяет изменения из одной ветки в другую, создавая новый коммит слияния и сохраняя всю историю. Rebase переписывает историю, делая её линейной, перемещая коммиты из одной ветки на базу другой.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Что такое dns ?
Спросят с вероятностью 3%

DNS (Domain Name System) — это система, которая переводит доменные имена, понятные человеку, в IP-адреса, понятные компьютерам и сетевым устройствам. Основная задача DNS — облегчить доступ к ресурсам в Интернете, позволяя использовать легко запоминаемые доменные имена вместо сложных числовых IP-адресов.

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

1️⃣Разрешение доменных имен:
✅Основная функция DNS заключается в преобразовании доменных имен (например, www.example.com) в соответствующие им IP-адреса (например, 93.184.216.34), чтобы веб-браузеры и другие интернет-клиенты могли находить и обращаться к нужным ресурсам.

2️⃣Обратное разрешение (Reverse DNS):
✅Обратное разрешение — это процесс преобразования IP-адресов обратно в доменные имена. Это используется для проверки подлинности или при проведении сетевой диагностики.

Как он работает

Процесс разрешения доменного имени включает несколько этапов и компонентов:

1️⃣Введение DNS-кэша:
✅Браузер и операционная система сначала проверяют свои локальные кэши на наличие записи о недавно разрешенном доменном имени. Если запись найдена и не истекла, используется закэшированный IP-адрес.

2️⃣Запрос к DNS-серверу:
✅Если локальный кэш не содержит нужной записи, запрос отправляется к DNS-серверу вашего интернет-провайдера (ISP) или другого конфигурируемого DNS-сервера (например, Google Public DNS).

3️⃣Рекурсивный запрос:
✅DNS-сервер провайдера может выполнять рекурсивный запрос, запрашивая информацию у других DNS-серверов, если он сам не знает ответа. Этот процесс включает несколько шагов:
✅Запрос к корневому DNS-серверу.
✅Корневой сервер направляет к DNS-серверу верхнего уровня домена (TLD, например, .com, .org).
✅Сервер верхнего уровня направляет к авторитетному DNS-серверу конкретного домена.

4️⃣Авторитетные DNS-серверы:
✅Авторитетный DNS-сервер для домена (например, example.com) содержит окончательную информацию об IP-адресе для запрашиваемого доменного имени и возвращает её DNS-серверу провайдера.

5️⃣Ответ клиенту:
✅DNS-сервер провайдера кэширует полученный IP-адрес и отправляет его обратно клиенту (вашему браузеру или операционной системе).

6️⃣Доступ к ресурсу:
✅Клиент использует полученный IP-адрес для установления соединения с нужным сервером и получения запрашиваемых данных.

Допустим, вы вводите в браузере www.example.com:

1️⃣Браузер проверяет локальный DNS-кэш.
2️⃣Если записи нет, браузер отправляет запрос на DNS-сервер провайдера.
3️⃣DNS-сервер провайдера выполняет рекурсивный запрос:
✅Запрашивает корневой DNS-сервер.
✅Корневой сервер направляет к серверу TLD .com.
✅Сервер TLD направляет к авторитетному DNS-серверу example.com.
4️⃣Авторитетный DNS-сервер example.com возвращает IP-адрес, например, 93.184.216.34.
5️⃣DNS-сервер провайдера кэширует этот IP-адрес и возвращает его браузеру.
6️⃣Браузер устанавливает соединение с сервером по IP-адресу 93.184.216.34 и загружает страницу.

DNS (Domain Name System) — это система, которая преобразует доменные имена в IP-адреса и наоборот. Она позволяет пользователям вводить легко запоминаемые доменные имена вместо сложных IP-адресов для доступа к ресурсам в Интернете. DNS включает в себя процессы проверки кэша, рекурсивные запросы к DNS-серверам и использование различных типов записей для разрешения имен и управления ресурсами.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Какие особенности в js ?
Спросят с вероятностью 3%

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

1️⃣Динамическая типизация

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

let variable = 42; // Число
variable = 'Hello, world!'; // Строка

2️⃣Функции первого класса

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

function greet(name) {
  return `Hello, ${name}`;
}

const sayHello = greet;
console.log(sayHello('Alice')); // Hello, Alice

function executeFunction(fn, value) {
  return fn(value);
}

console.log(executeFunction(greet, 'Bob')); // Hello, Bob

3️⃣Замыкания (Closures)

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

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4️⃣Прототипное наследование

Использует прототипное наследование вместо классового. Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], которое указывает на другой объект, используемый в качестве прототипа.

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

const dog = Object.create(animal);
dog.name = 'Рекс';
dog.speak(); // Рекс издает звук

5️⃣Асинхронность и события

Поддерживает асинхронное выполнение через коллбеки, промисы и async/await. Это позволяет обрабатывать события и операции ввода-вывода без блокировки основного потока выполнения.

Использование коллбеков:

function fetchData(callback) {
  setTimeout(() => {
    callback('Данные получены');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование промисов:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование async/await:

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data); // Данные получены (через 1 секунду)
}

getData();

6️⃣Интуитивно понятная работа с объектами

Имеет мощные встроенные функции для работы с объектами, такие как деструктуризация, операторы расширения и методы объектов.

Деструктуризация:

const person = {
  name: 'Alice',
  age: 30
};

const { name, age } = person;
console.log(name); // Alice
console.log(age); // 30

Операторы расширения:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

Обладает множеством уникальных особенностей, таких как динамическая типизация, функции первого класса, замыкания, прототипное наследование, асинхронное программирование с коллбеками, промисами и async/await, интуитивно понятная работа с объектами и массивами, а также событийно-ориентированное программирование. Эти возможности делают его мощным и гибким инструментом для веб-разработки и других приложений.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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