Frontend | Вопросы собесов

Ну все! Теперь не нужно тратить деньги на топовые курсы и книги по программированию — их выложили в Telegram бесплатно Все найденные курсы собирают тут — t.me/+Rg23ozD8yGdkYmJi По этим курсам выучить любой язык за 7 дней вообще не проблема, находка для начинающих программистов Подписаться #реклама 16+ О рекламодателе

В чем разница между 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 разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

ТОП-4 Курса по Программированию ⚡Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. ✅Хотите стать программистом, но не знаете с какого языка начать? Помогаем разобраться в самых популярных и востребованных языках программирования. Подарок в конце подборки! Выбрать #реклама 16+ tutortop.ru О рекламодателе

Чем синхронный код отличается от асинхронного ? Спросят с вероятностью 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 разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Как запустить собственный пет-проект и зарабатывать на нём зарплату senior-разработчика? На этом канале мы решаем сложные задачи, которые часто попадаются на собеседованиях. Но что, если перевернуть игру и вместо работы на кого-то запустить собственный пет-проект, который будет приносить деньги? Александр Рогачев запустил телеграм-канал Indie Hackers, где рассказывает про пет-проекты, которые приносят стабильный доход своим создателям. Без венчурных инвестиций, без бизнес-планов и команды. Разве такое возможно? Да! Несколько примеров: Агрегатор вакансий c доходом в 4000$ / месяц Плагин для Chrome с доходом 20000₽ / месяц Если вы в поиске свежих идей, которые могут обеспечить стабильный пассивных доход, подписывайтесь на канал Indie Hackers. Уверен, что там вы найдёте то самое, что зажжёт огонь в вашем сердце ❤️‍🔥 ➡️ Ссылка для входа

Обучаем Java-разработчиков оплата после выхода на работу В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты. Если задуматься, то все в выигрыше: — ты получаешь работу в Москве или Санкт-Петербурге с хорошей зарплатой, мы получаем процент за инвестиции в тебя; — в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше; — мы прокачиваем твои навыки еще 2 года после курса: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут; — мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов. Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку! Узнать больше #реклама 16+ kata.academy О рекламодателе

ТОП-4 Курса по графическому дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

Какие знаешь способы центрирования ? Спросят с вероятностью 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 разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

И целого Nginx мало... ...- почему нагруженным приложениям не хватает стандартной функциональности прокси-серверов? Стабильная работа веб-сервисов – главная задача для каждого инженера. Однако вы наверняка сталкивались с ситуацией, когда высоконагруженные приложения требуют больше, чем стандартная функциональность балансировщиков. 22 августа в 11:00 приглашаем вас ознакомиться с продуктом, который поможет решить задачи, связанные с поддержанием отказоустойчивости систем! На вебинаре СберТех представит вам российский веб- и обратный прокси-сервер Platform V SynGX, который поможет обеспечить стабильную работу сервисов. Вы узнаете, как устроен этот продукт и какие практики использования собственной логики обработки запросов применяются в СберТехе. Зарегистрироваться #реклама 16+ platformv.sbertech.ru О рекламодателе

Почему не пишем все стили в style ? Спросят с вероятностью 7% Написание всех стилей непосредственно в атрибуте style не является хорошей практикой по ряду причин: 1️⃣Разделение структуры и презентации Стилизация и структура должны быть разделены для лучшей организации и поддерживаемости кода. Когда стили находятся в CSS-файлах, а структура — в HTML, это облегчает чтение и редактирование кода. 2️⃣Переиспользование стилей Позволяет переиспользовать стили на нескольких элементах и страницах. Если писать стили в атрибуте style, то каждый элемент должен иметь свои стили, что ведет к дублированию кода.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

3️⃣Упрощение изменений и обновлений Изменение стилей в одном месте (CSS-файл) проще и быстрее, чем изменение атрибутов style для каждого элемента. Это особенно важно для больших проектов.

/* CSS файл */
.text-red {
  color: red;
}

HTML:

<p class="text-red">This text is red.</p>
<p class="text-red">This text is also red.</p>

Если нужно изменить цвет, достаточно поменять его в одном месте в CSS-файле. 4️⃣Улучшение производительности Браузеры кешируют CSS-файлы, что уменьшает время загрузки страницы. Инлайновые стили загружаются каждый раз, когда загружается HTML-документ, что увеличивает нагрузку на сеть. 5️⃣Семантика и поддержка инструментов разработки Стили файлах делают код более семантическим и легко анализируемым для инструментов разработки, таких как линтеры и препроцессоры. Это улучшает качество и консистентность кода. 6️⃣Поддержка медиа-запросов и адаптивного дизайна CSS-файлы позволяют легко использовать медиа-запросы для адаптивного дизайна. Это сложно и неэффективно делать с инлайновыми стилями.

/* CSS файл */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Плохо vs Хорошо Плохо (все стили в `style`):

<p style="color: red; font-size: 16px;">This is a paragraph.</p>
<p style="color: red; font-size: 16px;">This is another paragraph.</p>

Хорошо (использование CSS):

/* CSS файл */
.red-text {
  color: red;
  font-size: 16px;
}

HTML:

<p class="red-text">This is a paragraph.</p>
<p class="red-text">This is another paragraph.</p>

Мы не пишем все стили в атрибуте style, потому что это делает код сложным для чтения, поддержания и повторного использования. Вместо этого мы используем CSS-файлы для разделения структуры и стилизации, что упрощает работу с кодом и повышает производительность. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Зачем необходим dom ? Спросят с вероятностью 7% DOM (Document Object Model) необходим для взаимодействия с веб-страницами и управления их содержимым, структурой и стилями программным образом. DOM представляет собой программный интерфейс для HTML и XML документов. Он описывает логическую структуру документов и позволяет языкам программирования взаимодействовать с ними. Зачем он нужен 1️⃣Доступ к элементам страницы: Позволяет программно получать доступ к элементам HTML-документа (теги, текст, атрибуты) и манипулировать ими. 2️⃣Изменение содержимого: С помощью него можно изменять содержимое страницы динамически, например, обновлять текст, менять изображения, добавлять или удалять элементы. 3️⃣Обработка событий: Позволяет обрабатывать события, такие как клики, нажатия клавиш, прокрутка и другие взаимодействия пользователя с веб-страницей. 4️⃣Динамическое изменение структуры страницы: Предоставляет методы для добавления, удаления и изменения элементов и атрибутов, что позволяет динамически изменять структуру страницы. 5️⃣Интерактивность: С помощью него можно создавать интерактивные веб-приложения, которые реагируют на действия пользователя без перезагрузки страницы. Как он работает Представляет собой древовидную структуру, где каждый элемент страницы является узлом дерева. Вершиной дерева является объект document, который представляет весь HTML-документ. Узлы могут быть элементами (<div>, <p>, <a> и т.д.), текстом, комментариями и другими типами. Пример HTML-документа:

<!DOCTYPE html>
<html>
<head>
  <title>Document Object Model</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Структура для этого документа:

document
 └── html
     ├── head
     │   └── title
     │       └── "Document Object Model"
     └── body
         ├── h1
         │   └── "Hello, world!"
         └── p
             └── "This is a paragraph."

Основные методы и свойства 1️⃣Доступ к элементам: ✅document.getElementById(id): Возвращает элемент по его id. ✅document.getElementsByClassName(className): Возвращает все элементы с указанным классом. ✅document.getElementsByTagName(tagName): Возвращает все элементы с указанным тегом. ✅document.querySelector(selector): Возвращает первый элемент, соответствующий CSS селектору. ✅document.querySelectorAll(selector): Возвращает все элементы, соответствующие CSS селектору. 2️⃣Создание и удаление элементов: ✅document.createElement(tagName): Создает новый элемент. ✅parentElement.appendChild(childElement): Добавляет элемент в конец дочерних элементов родителя. ✅parentElement.removeChild(childElement): Удаляет элемент из дочерних элементов родителя. 3️⃣Изменение содержимого и атрибутов: ✅element.innerHTML: Изменяет или получает HTML-содержимое элемента. ✅element.textContent: Изменяет или получает текстовое содержимое элемента. ✅element.setAttribute(name, value): Устанавливает значение атрибута элемента. ✅element.getAttribute(name): Получает значение атрибута элемента. Пример:

// Изменение текста заголовка
const header = document.querySelector('h1');
header.textContent = 'Hello, DOM!';

// Добавление нового параграфа
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

// Изменение атрибута
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');

DOM необходим для программного доступа и управления содержимым веб-страницы. Он позволяет изменять текст, структуру, стили и обрабатывать события на странице. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

ТОП-4 Курса по UX/UI-дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

Начните обучение в магистратуре в Центральном университете уже на 3-м курсе бакалавриата! Центральный университет — современный вуз, созданный при поддержке ведущих компаний России: Т-Банка, Авито и других. Учебу реально совместить с последними курсами бакалавриата или действующей работой. Обучение занимает 20 часов в неделю в вечернее время в первый год, а занятия проводят в центре Москвы профессоры из МГУ, МФТИ, РЭШ и практики из индустрии. Обучение в университете построено по принципам ИТ-компаний, со средой, способствующей росту и развитию. У каждого студента будет: - личный ментор по траектории обучения; - доступ к карьерному центру с коучами и консультантами; - опыт работы в проектах 30+ компаний-партнеров уже во время обучения; - диплом гособразца. Участвуйте в онлайн-отборе, чтобы выиграть грант на обучение до 1,2 млн рублей. Больше подробностей про университет и конкурс грантов по ссылке! erid:2VtzqubG1Mu Реклама, АНО ВО «Центральный университет», ИНН 7743418023