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

Бесплатное обучение по продвижению бизнеса в интернете 5 августа стартует интенсив для предпринимателей от Яндекс Рекламы. За 4 недели научим запускать рекламу в интернете, даже если раньше вы никогда этого не делали. В программе: Реклама в Яндексе — какие выбрать инструменты для продвижения бизнеса Юнит-экономика — как рассчитать бюджет на рекламу, чтобы не уйти в минус УТП для вашего бизнеса — как выделяться на фоне конкурентов Запуск рекламы — как самостоятельно настроить кампанию Анализ и оптимизация — что улучшить в рекламе Вас ждут: 5 вебинаров от практикующих экспертов Яндекса Задания с самопроверкой и дополнительные материалы Закрытое сообщество предпринимателей для обмена опытом Узнать подробности и зарегистрироваться: Зарегистрироваться #реклама 16+ yandex.ru О рекламодателе

🧑‍💻 Если твой английский позволяет ответить только на вопрос "Do you speak English", то с этим нужно что-то делать, будучи программистом. 🫤 Ты в курсе, что ... - говорят по-английски — 20% из всех людей. - Большое кол-во IT документации написано на английском. Хочешь понимать код лучше? Изучи язык, который используется в его основе. 📕 На нашем канале ты постепенно будешь набираться опыта, в этом тебе помогут: - Тесты для изучения английского: проверьте свои знания на практике. - Английский через мемы: учите язык весело и с интересом. - Шпаргалки для повторения: закрепите знания быстро и эффективно. - Английский сленг программиста: станьте настоящим профи в коммуникации. 🔥 Маленький шаг в изучении иностранного откроет перед тобой большие возможности будущего специалиста и значительно повысит твое зп. 🌸 Подпишись, do it!

ТОП-4 Курса по Data Science Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. 🎓Освойте продвинутую математику с самых азов 💻Научитесь создавать ML-модели и работать с нейронными сетями ✅Получите реальный опыт на практических проектах 🏠Начните работать удаленно 💰Подарок в конце подборки! Выбрать #реклама 16+ tutortop.ru О рекламодателе

📌 Вопрос из таблицы? 💬 Спрашивают в ЦИФРА% собеседований Запросы к серверу можно писать в различных частях кода в зависимости от архитектуры вашего приложения и используемых технологий. Основное правило — писать серверные запросы там, где это наиболее логично с точки зрения структуры и логики вашего кода. Рассмотрим несколько распространенных подходов и ситуаций. 1️⃣ Клиент-серверные приложения 🤔 Веб-приложения (JavaScript/TypeScript) Для веб-приложений запросы к серверу обычно выполняются на стороне клиента (в браузере) с использованием JavaScript или TypeScript. Чаще всего это делается с помощью API, таких как fetch или axios. Пример с использованием fetch:

function fetchData() {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

🤔 Веб-приложения с использованием библиотек/фреймворков Когда вы используете фреймворки, такие как React, Angular или Vue, запросы к серверу обычно выполняются в компонентах или сервисах. Пример с использованием React:

import React, { useEffect, useState } from 'react';

function MyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error:', error));
    }, []);

    return (
        <div>
            {data ? <div>Data: {data}</div> : <div>Loading...</div>}
        </div>
    );
}

🤔 Мобильные приложения Для мобильных приложений, разработанных с использованием таких технологий, как React Native, Swift или Kotlin, запросы к серверу также выполняются в коде приложения. Пример с использованием React Native:

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

function MyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error:', error));
    }, []);

    return (
        <View>
            {data ? <Text>Data: {data}</Text> : <Text>Loading...</Text>}
        </View>
    );
}

2️⃣ Серверные приложения 🤔 Серверные скрипты (Node.js) В случае серверных приложений на Node.js запросы к другим серверам могут выполняться для интеграции с внешними API или микросервисами. Пример с использованием axios:

const axios = require('axios');

axios.get('https://api.example.com/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

🤔 Бэкенд-фреймворки (Django, Flask) В бэкенд-фреймворках, таких как Django или Flask, запросы к другим серверам часто выполняются в функциях обработки запросов (view-функциях) или в бизнес-логике приложения. Пример с использованием Django (Python):

import requests
from django.http import JsonResponse

def fetch_data(request):
    response = requests.get('https://api.example.com/data')
    if response.status_code == 200:
        return JsonResponse(response.json())
    else:
        return JsonResponse({'error': 'Failed to fetch data'}, status=response.status_code)

🤔 Заключение Запросы к серверу можно писать в различных частях вашего кода в зависимости от архитектуры приложения и используемых технологий. Важно, чтобы запросы выполнялись в логически обоснованных местах, а их логика была хорошо инкапсулирована и легко тестируема. 🤔 Краткое объяснение Запросы к серверу пишут в коде клиента или сервера, в зависимости от архитектуры приложения. Важно делать это в логически обоснованных местах и обрабатывать возможные ошибки. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

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