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

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

@easy_javascript_ru

19.3K subscribers

34 photos

2 videos

906 links

Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp

Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky

Download Telegram

About

Blog

Apps

Platform

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

19.3K subscribers

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

Forwarded from easyoffer

⏳ Такого больше не будет!

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

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

👉 Поддержать: https://planeta.ru/campaigns/easyoffer

2.76K views15:05

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

🤔

Какие есть операторы в JS?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍21🔥2💊2

3.06K views16:10

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

2.59K views18:00

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

Forwarded from easyoffer

🚨

60 минут до финала

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

👉 https://planeta.ru/campaigns/easyoffer

Please open Telegram to view this post

VIEW IN TELEGRAM

2.51K views20:00

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

Forwarded from Идущий к IT

Я смотрю на эту цифру и до сих пор не верю.

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

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

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

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

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

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

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

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

👍8

2.79K views06:35

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

👍18

3.54K views09:10

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

🤔 Разным ролям нужно по-разному предоставить dataset. Как бы это сделал?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥6👍1

3.6K views16:10

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

👍12

3.95K views09:10

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

🤔 Как работает Event Loop в Web API?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12🔥3🤔1💊1

3.57K views16:10

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

👍11

3.53K views09:05

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

🤔

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

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥16👍10🤔2

3.78K views16:10

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

👍16

4.21K views09:05

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

🤔 Зачем нужны сокеты?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12🔥5

3.61K views16:10

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

👍7💊6

3.98K views09:05

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

🤔 В чём отличие box-sizing: border-box от box-sizing: content-box?

- border-box включает padding и border в размер элемента — проще контролировать итоговую ширину.
- content-box — по умолчанию: ширина задаётся только для содержимого, а padding и border добавляются отдельно.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍17🔥1

3.75K views16:10

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

🤔 Что выбираешь ооп или функции?

Выбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы.

🚩

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

Объектно-ориентированное программирование подходит, когда:
Нужно моделировать реальные объекты и их поведение
Приложение состоит из множества взаимодействующих сущностей
Важно инкапсулировать данные и защитить их от прямого изменения
Требуется повторное использование кода через наследование и полиморфизм

class Animal {
  constructor(name) {
    this.name = name;
  }

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

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"

🚩

Когда использовать функциональное программирование?

Функциональный подход хорош, если
Код должен быть чистым и предсказуемым
Нужно избегать изменений состояния (иммутабельность)
Требуется много работы с массивами, коллекциями данных
Нужно легко писать асинхронный код

const double = num => num * 2;

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);

console.log(doubledNumbers); // [2, 4, 6, 8]

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍19🤔2

4.45K views09:05

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

🤔 Что такое операторы or и and?

Это логические операторы, которые используются для проверки условий:
- or (||) — возвращает true, если хотя бы одно из условий истинно.
- and (&&) — возвращает true, только если все условия истинны.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍27💊8

3.66K views16:10

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

🤔

Что такое относительная ссылка?

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

Относительная ссылка

<a href="../contact.html">Контакты</a>

Абсолютная ссылка

<a href="https://example.com/contact.html">Контакты</a>

🚩

Типы относительных ссылок

🟠

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

<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->

🟠

Ссылки с подъемом вверх по дереву файловой структуры
Используются два символа точки (..) для перехода на уровень выше.

   <a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->

🟠

Корневые ссылки
Указывают путь относительно корня веб-сайта, начиная с /.

<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->

🚩

Зачем нужны относительные ссылки?

🟠

Удобство при локальной разработке
Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через localhost), вам не нужно указывать абсолютный путь с доменом.

🟠

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

🟠

Экономия времени
Меньше текста в коде, особенно если проект содержит множество ссылок.

🚩

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

Ссылка на файл в текущей папке

<a href="file.html">Файл в текущей папке</a>

Ссылка на файл в подкаталоге

<a href="subfolder/file.html">Файл в подкаталоге</a>

Ссылка на файл в родительской папке

<a href="../file.html">Файл в родительской папке</a>

Ссылка на файл относительно корня сайта

<a href="/folder/file.html">Файл в папке от корня</a>

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12

3.45K views09:05

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

🤔 С помощью чего можно создать асинхронные callback?

Асинхронные callback можно создать через:
1. Промисы — основной способ в современных браузерах:
2. fetch('/api').then(response => callback(response));
3. async/await — оборачиваем функцию в async, а внутри можно использовать await:
4. const callback = async () => {
5. const result = await fetch(...);
6. // обработка
7. };
8. Таймеры и события — классические способы:
9. setTimeout(() => callback(), 1000);
10. element.addEventListener('click', () => callback());
Callback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍9🔥6

3.39K views16:10

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

🤔 Чем em отличается от rem?

🟠

Как работает `em`?
em зависит от размера шрифта родителя (font-size).

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}

🟠

Как работает `rem`?
rem всегда зависит от font-size у <html>.

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

🟠

Когда использовать `em`, а когда `rem`?
Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми
Используйте em, если хотите, чтобы элементы зависели от родителя

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍14🔥4💊2

3.76K views09:05