Frontend | Вопросы собесов
19.3K subscribers
34 photos
3 videos
907 links
Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp

Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky
Download Telegram
🤔 Что такое функциональное программирование?

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

🚩Основные принципы функционального программирования

🟠Чистые функции (Pure Functions)
Функция называется чистой, если:
При одинаковых входных данных всегда возвращает одинаковый результат.
Не изменяет внешние переменные (нет побочных эффектов).
Нечистая функция (изменяет внешнюю переменную)
let count = 0;
function increment() {
count += 1; // изменяет внешнюю переменную
return count;
}


Чистая функция (зависит только от аргументов)
function increment(num) {
return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)


🟠Иммутабельность (Immutable Data)
Данные не изменяются, а создаются новые версии объектов.
Изменение объекта (нефункциональный подход)
const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объект


Создание нового объекта (функциональный подход)
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект


🟠Функции высшего порядка (Higher-Order Functions)
Функция, которая принимает другую функцию в аргумент или возвращает функцию.
const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]


Пример: Функция, возвращающая другую функцию
const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10


🟠Функциональные методы массивов (map, filter, reduce)
Функциональные методы позволяют не мутировать массив, а создавать новый.
Используем map() для изменения элементов
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]


Используем filter() для фильтрации
const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]


Используем reduce() для вычислений
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10


🟠Каррирование (Currying)
Разделение функции на несколько функций, каждая принимает по одному аргументу.
function sum(a, b) {
return a + b;
}
console.log(sum(2, 3)); // 5


Пример: Каррированная функция
const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🤔1
🤔 Какая особенность в поведении у асинхронных callback?

Асинхронные callback-и не выполняются мгновенно. Они ставятся в очередь событий (event loop) и запускаются после завершения текущего стека вызовов. Это означает, что:
- Код после вызова асинхронного callback-а продолжается немедленно.
- Callback может сработать позже, вне текущего потока.
- Нужно учитывать асинхронный контекст при работе с состоянием, рендером и логикой приложения.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥2
🤔 Какие статические методы promise знаешь?

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

🟠`Promise.resolve(value)` – создаёт выполненный промис
Возвращает успешно выполненный Promise с переданным значением.
Promise.resolve(42).then(console.log); // 42


🟠`Promise.reject(error)` – создаёт отклонённый промис
Возвращает промис в состоянии "отклонён" (rejected).
Promise.reject("Ошибка!").catch(console.error); // "Ошибка!"


🟠`Promise.all(promises)` – ждёт ВСЕ промисы или первый `reject`
Выполняет все промисы параллельно и ждёт, пока ВСЕ выполнятся.
Если один промис отклонится, Promise.all немедленно выдаст ошибку.
Promise.all([
Promise.resolve(10),
Promise.resolve(20),
Promise.resolve(30),
]).then(console.log); // [10, 20, 30]


Ошибка прерывает выполнение
Promise.all([
Promise.resolve(1),
Promise.reject("Ошибка!"),
Promise.resolve(3),
]).catch(console.error); // "Ошибка!"


🟠`Promise.allSettled(promises)` – ждёт ВСЕ промисы, не падает при `reject`
Возвращает массив состояний (fulfilled или rejected) каждого промиса.
Никогда не отклоняется, даже если есть ошибки.
Promise.allSettled([
Promise.resolve(100),
Promise.reject("Ошибка!"),
Promise.resolve(300),
]).then(console.log);


Выведет
[
{ status: "fulfilled", value: 100 },
{ status: "rejected", reason: "Ошибка!" },
{ status: "fulfilled", value: 300 }
]


🟠`Promise.race(promises)` – ждёт ТОЛЬКО первый завершённый промис
Возвращает результат ПЕРВОГО выполненного или отклонённого промиса.
Promise.race([
new Promise(res => setTimeout(() => res("Промис 1"), 500)),
new Promise(res => setTimeout(() => res("Промис 2"), 300)),
]).then(console.log); // "Промис 2" (он быстрее)


🟠`Promise.any(promises)` – ждёт ПЕРВЫЙ успешный промис
Возвращает результат ПЕРВОГО выполненного (fulfilled) промиса.
Если ВСЕ промисы отклонены (rejected), возвращает AggregateError.
Promise.any([
Promise.reject("Ошибка 1"),
Promise.resolve("Успех!"),
Promise.reject("Ошибка 2"),
]).then(console.log); // "Успех!"


Ошибка, если все промисы reject
Promise.any([
Promise.reject("Ошибка 1"),
Promise.reject("Ошибка 2"),
]).catch(console.error); // AggregateError: Все промисы отклонены


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28
Forwarded from easyoffer
📅 Осталось 7 дней до конца краудфандинга

Мы на финишной прямой!

Если ты планировал присоединиться, но ещё не успел, сейчас идеальный момент.

Вознаграждения за поддержку:

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

👉 Поддержать easyoffer 2.0

Не откладывай на последний момент

📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ
🤔 Какие хранилища есть в браузере?

В браузере доступно несколько механизмов хранения данных:
1. localStorage — постоянное хранилище строковых пар ключ-значение, сохраняется между сессиями браузера.
2. sessionStorage — аналогично localStorage, но очищается при закрытии вкладки.
3. cookies — небольшие объёмы данных, могут передаваться на сервер, доступны и клиенту, и серверу.
4. IndexedDB — асинхронная база данных в браузере, подходит для хранения больших объёмов данных, включая объекты.
5. CacheStorage — используется в PWA и сервис-воркерах для кэширования запросов и ответов.
Каждое хранилище имеет своё назначение, ограничения и особенности использования.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥10
🤔 Как реализовать адаптивную верстку?

Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК).

🟠Гибкие сетки (Flexbox, Grid, `max-width`)
Использование max-width вместо width
.container {
width: 100%; /* Контейнер занимает всю ширину */
max-width: 1200px; /* Но не больше 1200px */
margin: auto; /* Центрирование */
}


Использование Flexbox
.container {
display: flex;
flex-wrap: wrap; /* Перенос элементов, если не влезают */
justify-content: space-between;
}

.item {
width: 48%; /* Два элемента в ряд */
}

@media (max-width: 768px) {
.item {
width: 100%; /* Один элемент в ряд на маленьких экранах */
}
}


Использование CSS Grid
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}


🟠Медиа-запросы (`@media`)
Изменяют стили в зависимости от ширины экрана.
/* Десктоп (от 1024px) */
body {
font-size: 18px;
}

/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
body {
font-size: 16px;
}
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}


🟠Адаптивные изображения (`srcset`, `sizes`)
Позволяет загружать разные изображения в зависимости от устройства.
<img 
src="image-400.jpg"
srcset="image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Адаптивное изображение">


🟠Viewport (`meta viewport`)
Управляет масштабированием на мобильных устройствах.
<meta name="viewport" content="width=device-width, initial-scale=1">


🟠CSS-фреймворки (Bootstrap, Tailwind)
Фреймворки содержат готовые адаптивные классы.
Bootstrap (грид-система)
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">Контент</div>
<div class="col-md-6 col-sm-12">Контент</div>
</div>
</div>


Tailwind CSS
<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
<div class="bg-blue-500">1</div>
<div class="bg-green-500">2</div>
<div class="bg-red-500">3</div>
</div>


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17💊4
🤔 Что ещё является важной частью понимания кода?

Структура проекта, читаемость, консистентность, наличие документации, комментирование сложных участков и покрытие тестами. Также важен контекст — бизнес-цель и поведение кода.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥1
🤔 Для чего в js нужна асинхронность?

JavaScript – однопоточный язык, где код выполняется **последовательно, но иногда мы ждём ответа (запрос в интернет, чтение файла, таймер). Если всё делать синхронно, программа зависнет.

🟠Проблема синхронного кода
Представьте, что мы загружаем данные из API синхронно:
const data = fetch("https://api.example.com/users"); //  Ожидание ответа
console.log("Данные загружены:", data);


🟠Асинхронность решает эту проблему
Асинхронный код не блокирует выполнение программы
fetch("https://api.example.com/users")
.then(response => response.json())
.then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");


🚩Как работает асинхронность в JS?

Callbacks (обратные вызовы) – старый способ.
Promises (fetch(), then/catch) – современный вариант.
async/await – удобный синтаксис для асинхронного кода.
async/await – лучший способ писать асинхронный код
async function getData() {
try {
let response = await fetch("https://api.example.com/users");
let data = await response.json();
console.log("Данные:", data);
} catch (error) {
console.error("Ошибка загрузки:", error);
}
}

getData();
console.log("Этот код выполняется, пока ждём данные!");


🚩Где нужна асинхронность?

Запросы к серверу
Чтение файлов
Таймеры
Работа с базами данных
Взаимодействие с пользователем (ожидание ввода)

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
🤔 Какие основные вещи присущи HTML?

HTML задаёт структуру документа: заголовки, параграфы, списки, изображения, формы. В HTML важны семантика, вложенность, правильное использование тегов и атрибутов. Он обеспечивает основу, на которую накладываются стили и поведение.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥2
🤔 В какой последователности будут вызываться хуки при использовании хуков жизненного цикла в миксине и подключении его в компонент?

В Vue 2 и Vue 3 можно подключать миксины (mixins), которые добавляют в компонент дополнительные методы, данные и хуки жизненного цикла.

🚩Пример в Vue 2

Миксин (myMixin.js)
export default {
created() {
console.log("🌍 Миксин: created");
}
};


Компонент (MyComponent.vue)
<script>
import myMixin from "./myMixin.js";

export default {
mixins: [myMixin],
created() {
console.log("📦 Компонент: created");
}
};
</script>


Вывод в консоль при создании компонента
Миксин: created
Компонент: created


Vue 3: хуки вызываются так же
Если использовать setup(), он выполнится после хуков миксина
import { onMounted } from "vue";
export default {
mixins: [myMixin],
setup() {
console.log("🚀 setup()");
},
mounted() {
console.log("📦 Компонент: mounted");
}
};


Вывод в консоль
Миксин: mounted
setup()
Компонент: mounted


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Forwarded from easyoffer
Офигеть, вот это поддержка! 🔥

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

Но больше всего я боялся, что запущу кампанию, и не получится собрать даже 300 т. Это был бы провал. Так много усилий, времени и денег вложено в проект… и если бы всё закончилось ничем — это бы сильно демотивировало.

Но, ребята, мы превысили изначальную цель в 10 раз —
3 031 040 рублей! 🤯

Вся эта кампания — это одна большая проверка бизнес-модели на прочность. И я супер рад, что запустил всё публично. Люди видят, что EasyOffer реально нужен. Теперь нет сомнений — проект актуален, он будет прибыльным и будет развиваться.

Мне приходит огромное количество сообщений в личку: кто-то когда-то давно пользовался сайтом, он помог с трудоустройством, и сейчас они уже не ищут работу — но всё равно поддержали.
Это прям очень круто и трогательно.

Никак не могу отделаться от мысли, что easyoffer — это ведь мой первый сайт. Учебный, пет-проект, просто для портфолио. И вот что из него вышло. Просто офигеть.

Я не зря ушёл с работы, чтобы заниматься только им.
Я поверил в этот проект — и сейчас вижу, что вы тоже в него верите. Для меня это очень многое значит.

Огромное спасибо за вашу поддержку! ❤️
🔥12
🤔 В чём отличие хранения данных в local storage от куки?

localStorage хранит данные на стороне клиента и позволяет сохранять информацию в виде ключ-значение без ограничения по времени, пока пользователь явно не удалит данные. Куки же могут передаваться на сервер при каждом запросе, имеют ограниченный объём (до 4KB) и срок действия. localStorage более удобен для долгосрочного хранения данных, которые не должны передаваться на сервер, тогда как куки полезны для передачи информации, такой как аутентификационные токены. localStorage работает только на клиентской стороне, куки же могут быть доступны и на стороне сервера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥9
🤔 Для чего необходим viewport?

Viewport – это область видимой части веб-страницы в браузере пользователя.

🟠`meta viewport` – ключ для адаптивного дизайна
Чтобы страница корректно отображалась на мобильных устройствах, используется мета-тег viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">


🟠Проблема без `meta viewport` (почему он нужен?)
Без viewport (по умолчанию)
На мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить.

🟠Дополнительные параметры `meta viewport`
Управление масштабом
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


Отключение адаптации iOS Safari
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14
Forwarded from easyoffer
Осталось 3 дня!

Финальный отсчёт пошёл — осталось всего 3 дня до окончания краудфандинга easyoffer 2.0

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

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

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

Поддержи проект сейчас, чтобы не забыть!

📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ
👍2
🤔 Какие есть подходы к адаптивности?

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


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥5💊2
🤔 Как методы будут у 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": "charlie@example.com"
}


Ответ (201 Created)
{
"id": 3,
"name": "Charlie",
"email": "charlie@example.com"
}


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

{
"name": "Alice Smith",
"email": "alice.smith@example.com"
}


🟠`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
🔥13👍6💊1
Forwarded from easyoffer
Завтра последний день!

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Браузер использует 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
👍16🔥1