TG Telegram Group Link
Channel: Frontend | Вопросы собесов
Back to Bottom
Frontend | Вопросы собесов
🤔 Какие есть подходы к адаптивности?

- Media queries.
- Flexbox / Grid.
- Mobile-first дизайн.
- rem, %, vw/vh вместо px.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.3K views
Frontend | Вопросы собесов
🤔 Как методы будут у api?

В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными).

🚩Примеры использования

🟠`GET` – Получение данных
Запрашиваем список пользователей:
GET /users HTTP/1.1
Host: api.example.com


Ответ (JSON)
[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]


🟠`POST` – Создание нового ресурса
Отправляем данные нового пользователя:
POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Charlie",
  "email": "[email protected]"
}


Ответ (201 Created)
{
  "id": 3,
  "name": "Charlie",
  "email": "[email protected]"
}


🟠`PUT` – Полное обновление ресурса
Заменяем пользователя с ID 1:
PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Smith",
  "email": "[email protected]"
}


🟠`PATCH` – Частичное обновление ресурса
Меняем только имя пользователя 1, не трогая email:
PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Johnson"
}


🟠`DELETE` – Удаление ресурса
Удаляем пользователя с ID 2:
DELETE /users/2 HTTP/1.1
Host: api.example.com


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.2K views
Frontend | Вопросы собесов
Forwarded from easyoffer
Завтра последний день!

Краудфандинг заканчивается уже завтра, и второй попытки не будет.

👉 Поддержи easyoffer 2.0 и получи:

🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование

📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ
3.0K views
Frontend | Вопросы собесов
🤔 Для чего нужен UTC?

- Универсальное время — база для сравнения.
- Избегаем проблем с часовыми поясами.
- В БД храним в UTC, отображаем в локали.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.3K views
Frontend | Вопросы собесов
Forwarded from easyoffer
🚨 Последний шанс!

Сегодня — последний день краудфандинга.
Через несколько часов всё закроется, и больше невозможно будет поучаствовать.

Если ты хотел, но откладывал — СЕЙЧАС самое время. Займёт 2 минуты, но изменит твой подход к собеседованиям надолго.

Поддержи easyoffer 2.0 и получи:

🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование

PRO подписка к easyoffer 2.0:

✅ Доступ к списку вопросов, которые задаются на собеседованиях + вероятность встречи этих вопросов + их фильтрация по грейдам, типам интервью, компаниям

✅ Доступ к лучшим ответам на вопросы

✅ Список самых частых задач, которые задаются на собеседовании + их фильтрация по грейдам и компаниям

✅ Доступ к лучшим ответам на задачи

✅ Список тестовых заданий компаний + лучшее решение

✅ Доступ к тренажеру "Проработка вопросов", который позволит очень быстро подготовиться к самым частым вопросам

✅ Доступ к тренажеру "Реальное собеседование", который позволит тренироваться проходить собеседование в конкретную компанию

До конца кампании — остались часы.
Поддержать: https://planeta.ru/campaigns/easyoffer

📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ
2.5K views
Frontend | Вопросы собесов
🤔 Как браузер понимает что ресурс нужно закешировать?

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

🚩Как браузер решает, кешировать ресурс или нет?

Когда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков. 
HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"


🚩Как работают заголовки кэширования?

🟠`Cache-Control` – главный заголовок
Определяет, как долго ресурс должен храниться в кэше. 
Cache-Control: max-age=86400, public


🟠`Expires` – устаревший, но ещё используется
Определяет конкретную дату, до которой браузер может использовать кэшированный ресурс. 
Expires: Wed, 26 Feb 2025 12:00:00 GMT


🟠`ETag` – проверка обновлений ресурса
Позволяет браузеру узнать, изменился ли файл на сервере. 
ETag: "abc123"


Если браузер снова запрашивает ресурс, он отправляет заголовок 
If-None-Match: "abc123"


🟠`Last-Modified` – альтернатива `ETag`
Дата последнего изменения ресурса. 
Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT


Браузер может отправить запрос с
If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
2.8K views
Frontend | Вопросы собесов
Forwarded from easyoffer
⏳ Такого больше не будет!

Всего пара часов и больше не будет возможности получить:

🚀 PRO подписку к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование

👉 Поддержать: https://planeta.ru/campaigns/easyoffer
2.7K views
Frontend | Вопросы собесов
🤔 Какие есть операторы в JS?

- Арифметические: +, -, *, /, %
- Логические: &&, ||, !
- Сравнения: ==, ===, !=, <, >
- Присваивания: =, +=, -= и др.
- Тернарный: условие ? если true : если false
- Побитовые, typeof, instanceof, in, delete

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.0K views
Frontend | Вопросы собесов
Forwarded from easyoffer
Финальный отсчёт:
3 часа до конца краудфандинга easyoffer 2.0!

Это не просто скидка. Это шанс поддержать проект, который поможет и вам и тысячам айтишников готовиться к собеседованиям быстрее, эффективнее и увереннее.

За последние недели:
💥 Нас поддержали уже больше 1450 человек;
🔥 Вместе собрали больше 4,5 млн. рублей на запуск проекта;

Но сейчас важнее другое.

⏳ Через 3 часа всё закончится.
– Больше не будет подписки за 3 200 руб. на целый год!
– Не будет шанса первыми воспользоваться EasyOffer 2.0 на бета-тестировании

Если вы:

+ Планируете менять работу в этом или следующем году;
+ Хотите иметь под рукой 40,000+ вопросов собеседований с разборами, видео-ответами и тренажёрами;
+ Хотите зафиксировать лучшую цену на целый год… (потом будет в 12 раз дороже)

👉 Тогда просто переходите и поддержите нас сейчас:
https://planeta.ru/campaigns/easyoffer

📢 Три часа — и всё.
Не откладывайте на потом.

Спасибо всем, кто уже с нами! 💙
2.5K views
Frontend | Вопросы собесов
Forwarded from easyoffer
🚨 60 минут до финала

Через час мы закроем краудфандинг easyoffer 2.0
Это последний шанс вписаться в самые выгодные условия.

👉 https://planeta.ru/campaigns/easyoffer
Please open Telegram to view this post
VIEW IN TELEGRAM
2.5K views
Frontend | Вопросы собесов
Forwarded from Идущий к IT
Я смотрю на эту цифру и до сих пор не верю.

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

Я ставил планку в 300т рублей. В самом позитивном сценарии 1млн. Но про 5 миллионов… даже мысли не было. Уже в первые часы стало понятно, что кампания идет не по плану. Сайт краудфандинга не выдержал нашей нагрузки и лег 😁

Особенно в последние три дня — просто какой-то разрыв! Я ощущал, как будто ловлю попутный ветер. В последний час не хватало 50к до 5 млн, и я уже думал сам их докинуть, чтобы красиво закрыть 😁

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

Я чувствую огромную ответственность и нервничаю из-за высоких ожиданий. А вдруг что-то пойдёт не так? А вдруг на релизе кому-то что-то не понравится? Именно поэтому я рад, что могу честно выйти на новый этап и без давления от левых инвесторов.

В такие моменты вспоминаю, с чего всё начиналось. Как 2 года назад я писал свои первые посты на 500 человек о том, как учу программирование. Как записывал первое видео на YouTube про поиск работы. Как пилил первую версию easyoffer, вообще без понимания, что из этого выйдет.

И сейчас я думаю — может, эта история вдохновит кого-то из вас. Может, кто-то запустит свой айтишный проект, найдёт поддержку и соберёт бабки на развитие. Было бы круто

Спасибо за невероятную и колосальную поддержку ❤️
О такой аудитории как вы я не мог мечтать
2.7K views
Frontend | Вопросы собесов
🤔 Зачем нам разбивать приложение отдельно на backend и frontend?

Разделение на Frontend (клиент) и Backend (сервер) – это стандартный подход в современной веб-разработке. Это делает приложение гибче, масштабируемее и удобнее в разработке.

🚩Почему лучше разделять?

🟠Гибкость и масштабируемость
Можно менять Frontend и Backend независимо.
Можно использовать разные технологии (например, Vue.js + Django).
Можно легко разделить команды разработчиков.

🟠Повышенная безопасность
Frontend не имеет доступа к базе данных.
Все важные вычисления, авторизация, хранение данных происходят на сервере.
API можно защитить токенами (JWT, OAuth).

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

🟠Легче разрабатывать и тестировать
Можно разрабатывать Frontend и Backend независимо.
Можно подменять сервер на mock-данные во время разработки.

🚩Как они общаются? (REST API & GraphQL)
Разделённые приложения общаются через API:
REST API (GET, POST, PUT, DELETE)
GraphQL API (запросы только нужных данных)
WebSockets (реальное время, чаты, онлайн-игры) 
GET https://api.example.com/users


Ответ от Backend 
[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.5K views
Frontend | Вопросы собесов
🤔 Разным ролям нужно по-разному предоставить dataset. Как бы это сделал?

- Через разграничение прав (RBAC) — фильтровать данные на сервере в зависимости от роли пользователя.
- Использовать view-модели или DTO, в которых отфильтровано содержимое.
- Настроить фильтрацию SQL-запросов (например, WHERE role = ?).
- В UI можно скрывать/показывать поля, но не полагаться только на фронт.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.5K views
Frontend | Вопросы собесов
🤔 Как добавить слушатель события?

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

🚩Почему это нужно?

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

🚩Как это используется?

Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.

🟠Чистый JavaScript
Для добавления слушателя события используется метод addEventListener.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>


🟠React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.
import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;


🟠jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>


🚩Почему это удобно и важно

🟠Интерактивность
Позволяет создавать динамичные и отзывчивые интерфейсы.
🟠Гибкость
Возможность реагировать на различные действия пользователей.
🟠Удобство
В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.8K views
Frontend | Вопросы собесов
🤔 Как работает Event Loop в Web API?

Event Loop отвечает за выполнение кода, управление очередями микротасков и макротасков. Он поочерёдно берёт задачи из очереди и выполняет их, не блокируя UI.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.5K views
Frontend | Вопросы собесов
🤔 Как изменить направление оси flexbox контейнера?

Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов.

🚩Возможных значения flex-direction

🟠row:
Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
🟠row-reverse:
Основная ось — горизонтальная, элементы располагаются справа налево.
🟠column:
Основная ось — вертикальная, элементы располагаются сверху вниз.
🟠column-reverse:
Основная ось — вертикальная, элементы располагаются снизу вверх.

🚩Примеры использования:

Горизонтальное направление (слева направо):
.container {
    display: flex;
    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}


Горизонтальное направление (справа налево):
.container {
    display: flex;
    flex-direction: row-reverse;
}


Вертикальное направление (сверху вниз):
.container {
    display: flex;
    flex-direction: column;
}


Вертикальное направление (снизу вверх):
.container {
    display: flex;
    flex-direction: column-reverse;
}


Пример HTML и CSS:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
            border: 1px solid #000;
            height: 200px;
        }
        .item {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.4K views
Frontend | Вопросы собесов
🤔 Что такое макро и микро задачи?

Макро-задачи (macro-tasks) — это крупные задачи, такие как события ввода-вывода, таймеры или сетевые запросы, которые планируются в основной очереди событий. Микро-задачи (micro-tasks) — это задачи меньшего приоритета, которые выполняются сразу после завершения текущего блока кода, но до выполнения следующих макро-задач (например, Promise или MutationObserver). Микро-задачи всегда выполняются перед макро-задачами, что позволяет им завершаться быстрее. Это важное отличие в управлении асинхронным кодом и приоритизацией событий.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.7K views
Frontend | Вопросы собесов
🤔 Как с помощью js можно передвигать вперед/назад по истории браузера?

В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history.

🟠Использование `history.back()` и `history.forward()`
Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере. 
history.back();    // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед


Пример кнопок "Назад" и "Вперед"
<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>


🟠Использование `history.go(n)`
Этот метод позволяет перемещаться на определенное количество шагов:
history.go(-1) – назад на 1 страницу
history.go(1) – вперед на 1 страницу
history.go(-2) – назад на 2 страницы 
history.go(-2); // Перейти на две страницы назад
history.go(3);  // Перейти на три страницы вперед


🟠Получение длины истории `history.length`
Если нужно узнать, сколько страниц в истории текущей сессии: 
console.log(history.length); // Количество записей в истории


🟠Манипуляции с историей: `pushState()` и `replaceState()`
Если нужно изменить URL без перезагрузки страницы, можно использовать:
history.pushState(state, title, url)
Добавляет новый URL в историю (как будто пользователь перешел по ссылке). 
history.pushState({ page: 1 }, "Title 1", "/page1");


history.replaceState(state, title, url)
Заменяет текущий URL (не добавляет новую запись в историю). 
history.replaceState({ page: 2 }, "Title 2", "/page2");


Пример динамического изменения истории: 
document.querySelector("button").addEventListener("click", () => {
  history.pushState({ page: "about" }, "About Page", "/about");
});


🟠Отслеживание изменений истории `popstate`
Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate
window.addEventListener("popstate", (event) => {
  console.log("Текущий state:", event.state);
});


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
4.1K views
Frontend | Вопросы собесов
🤔 Зачем нужны сокеты?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.5K views
Frontend | Вопросы собесов
🤔 В чём разница между тегами div, img, p?

Все три тега (<div>, <img>, <p>) используются в HTML, но у них разные предназначения и свойства.

🚩Тег `<div>` (контейнер)

Блочный элемент, используется для группировки других элементов и стилизации. 
<div class="container">
  <p>Привет, мир!</p>
  <img src="image.jpg" alt="Картинка">
</div>


Особенности <div>
- Не несёт семантического значения (просто контейнер).
- По умолчанию блочный (занимает всю ширину).
- Используется для группировки и стилизации через CSS.

🚩Тег `<img>` (изображение)

Строчно-замещающий элемент, предназначен для вставки картинок. 
<img src="logo.png" alt="Логотип">


Особенности <img>
- Не имеет закрывающего тега (<img> – одиночный тег).
- Строчно-замещающий (ведёт себя как inline, но может иметь размеры).
- Заменяется на картинку при отображении страницы.
- Требует alt для доступности и SEO.

🚩Тег `<p>` (абзац)

Блочный элемент, предназначен для разметки текста. 
<p>Это текст в абзаце.</p>


Особенности <p>
- Блочный (начинается с новой строки).
- Используется только для текста.
- Внутри нельзя размещать другие блочные элементы (<div>, <p>).
Ошибка 
<p>Привет, мир!</p>
<p>Второй абзац</p> <!-- Это правильно -->
<p><div>Ошибка!</div></p> <!-- ❌ Нельзя вставлять <div> внутрь <p> -->


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
3.9K views
HTML Embed Code:
2025/06/30 12:34:14
Back to Top