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

🤔 Как при наведении увеличить в размере элемент, не сдвигая соседние? Для этого используется трансформация элемента, которая изменяет его размер, не затрагивая соседние элементы. Она не влияет на положение других элементов, так как не изменяет геометрическое расположение в документе. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

📊 Реклама в сети телеграм каналов easyoffer ✈️ Для заказа пишите @easyoffer_adv easyoffer Backend Python | Вопросы Python | Удалёнка Python | LeetCode Python | Тесты Frontend | Вопросы Frontend | Удалёнка JavaScript | LeetCode Frontend | Тесты Java | Вопросы Java | Удалёнка Java | LeetCode Java | Тесты Тестировщик | Вопросы Тестировщик | Удалёнка Тестировщик | Тесты Data Science | Вопросы Data Science | Удалёнка Data Science | Тесты C# | Вопросы C# | Удалёнка C# | LeetCode C# | Тесты C/C++ | Вопросы C/C++ | Удалёнка C/C++ | LeetCode C/C++ | Тесты Golang | Вопросы Golang | Удалёнка Golang | LeetCode Golang | Тесты DevOps | Вопросы DevOps | Удалёнка DevOps | Тесты PHP | Вопросы PHP | Удалёнка PHP | LeetCode PHP | Тесты Kotlin | Вопросы Kotlin | Удалёнка Kotlin | LeetCode Kotlin | Тесты Swift | Вопросы Swift | Удалёнка Swift | LeetCode Swift | Тесты 📊 Реклама в сети телеграм каналов easyoffer ✈️ Для заказа пишите @easyoffer_adv

🤔 Какие модификаторы есть у событий? В JavaScript у событий есть специальные модификаторы, которые позволяют изменять поведение события, управлять его распространением, обработкой и связанной с ним логикой. 🚩`stopPropagation` Этот метод предотвращает всплытие события вверх по дереву DOM. По умолчанию, события в DOM распространяются по фазам: погружение (capturing) → цель (target) → всплытие (bubbling). Если вы хотите остановить обработку события на текущем элементе и не позволить ему "подняться" выше по дереву DOM, используйте stopPropagation.

<div id="parent" style="padding: 20px; background: lightblue;">
  Родительский элемент
  <button id="child">Дочерний элемент</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", () => {
    alert("Событие всплыло до родителя");
  });

  document.getElementById("child").addEventListener("click", (event) => {
    alert("Событие на кнопке");
    event.stopPropagation(); // Остановим всплытие
  });
</script>

🚩`stopImmediatePropagation` Этот метод, помимо остановки всплытия (как stopPropagation), предотвращает выполнение других обработчиков на том же элементе. Если у одного и того же элемента есть несколько обработчиков для одного события, stopImmediatePropagation гарантирует, что после его вызова остальные обработчики не будут выполнены.

<button id="myButton">Нажми меня</button>

<script>
  const button = document.getElementById("myButton");

  button.addEventListener("click", () => {
    alert("Обработчик 1");
  });

  button.addEventListener("click", (event) => {
    alert("Обработчик 2");
    event.stopImmediatePropagation(); // Остановим все остальные обработчики
  });

  button.addEventListener("click", () => {
    alert("Обработчик 3"); // Этот обработчик не выполнится
  });
</script>

🚩`preventDefault` Этот метод отменяет поведение элемента по умолчанию. Некоторые элементы (например, ссылки или формы) имеют стандартное поведение. Например: - Клик по ссылке ведет на новый URL. - Отправка формы перезагружает страницу. С помощью preventDefault можно предотвратить это поведение.

<a href="https://example.com" id="link">Перейти на сайт</a>

<script>
  const link = document.getElementById("link");

  link.addEventListener("click", (event) => {
    event.preventDefault(); // Останавливаем переход по ссылке
    alert("Поведение ссылки отменено");
  });
</script>

🚩`passive` Это модификатор, который не является методом, а используется в настройках обработчика событий. Он указывает, что обработчик не вызывает preventDefault. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart или wheel) предполагают, что вы можете использовать preventDefault. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true, вы говорите браузеру, что не собираетесь отменять поведение.

window.addEventListener("scroll", () => {
  console.log("Скролл работает");
}, { passive: true });

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

🤔 Какое Flexbox свойство отвечает за перенос элементов на новую строку? Свойство flex-wrap позволяет определять, могут ли элементы переноситься на новую строку, если они не помещаются в контейнере. Это свойство управляет тем, как элементы распределяются в ограниченном пространстве. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какое событие сработает при потери фокуса элементом формы? Событие, которое срабатывает при потере фокуса элементом формы, называется blur. 🚩Почему нужно событие `blur`? Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле. Автоматическое сохранение введенных данных при переходе на другой элемент формы. Скрытие вспомогательной информации (например, подсказок) при уходе с элемента. blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы. 🚩Как оно работает? blur срабатывает, когда элемент теряет фокус, то есть пользователь: Кликнул на другой элемент. Нажал клавишу Tab, чтобы перейти на следующий элемент. В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом. 🚩Как использовать `blur`? Событие можно обрабатывать с помощью: 1. HTML-атрибутов (например, onblur). 2. JavaScript через метод addEventListener. Пример на практике

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример blur</title>
  <script>
    function validateInput(event) {
      const input = event.target;
      if (input.value.trim() === "") {
        alert("Поле не должно быть пустым!");
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      const inputElement = document.getElementById("name");
      inputElement.addEventListener("blur", validateInput);
    });
  </script>
</head>
<body>
  <form>
    <label for="name">Введите имя:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Отправить</button>
  </form>
</body>
</html>

🚩Особенности события `blur` 🟠Не всплывает Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.

   // Работает только для конкретного элемента
   element.addEventListener("blur", handler);

   // Для делегирования используют focusout
   parentElement.addEventListener("focusout", handler);
   

🟠Отличие от `change` Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение. Ставь 👍 и забирай 📚 Базу знаний

🤔 За что отвечает z-index? z-index управляет порядком наложения элементов на оси Z. Элементы с более высоким значением отображаются поверх элементов с более низким значением, при условии, что они находятся в рамках позиционирования. Ставь 👍 и забирай 📚 Базу знаний

🤔 Почему селекторы перенаследуются? Селекторы перенаследуются в CSS для того, чтобы упростить иерархию стилей и избежать избыточного кода. Перенаследование позволяет дочерним элементам автоматически применять стили, заданные для родительских элементов, если не указано иначе. Это помогает поддерживать консистентность дизайна и упрощает управление стилями. 🚩Пример и объяснение

<div class="parent">
    <p>Текст в параграфе.</p>
    <div class="child">
        <p>Другой текст в параграфе.</p>
    </div>
</div>

И CSS

.parent p {
    color: blue;
    font-size: 16px;
}
.child p {
    font-size: 14px;
}

🚩Почему это важно 🟠Сокращение кода Позволяет избегать дублирования стилей, что делает код более чистым и легким для понимания. 🟠Управляемость Изменяя стиль родительского элемента, можно автоматически изменить стиль всех дочерних элементов, что облегчает поддержку и модификацию дизайна. 🟠Консистентность Обеспечивает единообразие стилей на всем сайте, так как дочерние элементы наследуют стили от родительских. Ставь 👍 и забирай 📚 Базу знаний

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе. 2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!

🤔 Из чего строится размер элемента? Размер элемента состоит из содержимого, внутренних отступов (padding), границ (border) и внешних отступов (margin). Суммарный размер зависит от используемой модели box-sizing. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как пользовался линтер js? Это инструменты, которые помогают разработчикам находить и устранять ошибки, улучшать стиль кода и обеспечивать соответствие кода определенным стандартам. Самый популярный линтер для JavaScript — это ESLint. 🚩Установка ESLint 1⃣Установка Node.js и npm Убедитесь, что у вас установлены Node.js и npm (Node Package Manager). Их можно скачать и установить с [официального сайта Node.js]. 2⃣Инициализация проекта Если у вас еще нет проекта, создайте новый с помощью команды:

npm init -y   

3⃣Установка ESLint Установите ESLint как dev-зависимость

npm install eslint --save-dev   

🚩Настройка ESLint 🟠Инициализация конфигурации ESLint Запустите команду для создания файла конфигурации .eslintrc:

npx eslint --init   

🚩Использование ESLint 🟠Линтинг кода Чтобы проверить ваш код с помощью ESLint, используйте команду

npx eslint имя_файла.js   

Например, если у вас есть файл app.js, выполните

npx eslint app.js   

🟠Автоматическое исправление ошибок ESLint может автоматически исправлять некоторые типы ошибок. Используйте флаг --fix, чтобы исправить ошибки, которые можно исправить автоматически:

npx eslint имя_файла.js --fix   

🟠Линтинг всего проекта Вы можете линтить все файлы в проекте, добавив скрипт в package.json. Откройте package.json и добавьте следующий скрипт в раздел "scripts":

"scripts": {
    "lint": "eslint ."
}  

Теперь вы можете запускать линтер для всего проекта с помощью команды

npm run lint

🚩Пример конфигурации .eslintrc.json Приведем пример базовой конфигурации для проекта, не использующего фреймворки

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "single"],
        "semi": ["error", "always"]
    }
}

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

🤔 Для чего служат vh и vw при указании размеров? vh и vw задают размеры элементов в процентах от высоты и ширины окна браузера соответственно. Они позволяют адаптировать элементы к размеру экрана. Используются для создания масштабируемого дизайна. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как обратиться к дом-дереву в реакте? В React обращаться к DOM-дереву можно несколькими способами, в зависимости от задач. Основные подходы включают использование рефов (refs) и манипуляции с элементами через стандартные методы JavaScript. 🟠Использование рефов (Refs) Рефы позволяют получить доступ к DOM-элементам напрямую. Это особенно полезно для управления фокусом, проигрывания медиа или интеграции с библиотеками сторонних разработчиков.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Получаем доступ к DOM-элементу через реф
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

export default MyComponent;

Пример с использованием функционального компонента и хуков

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

const MyComponent = () => {
  const myRef = useRef(null);

  useEffect(() => {
    // Получаем доступ к DOM-элементу через реф
    myRef.current.focus();
  }, []);

  return <input type="text" ref={myRef} />;
};

export default MyComponent;

🟠Манипуляции через стандартные методы JavaScript Иногда нужно обращаться к DOM-элементам, используя стандартные методы, такие как document.getElementById или document.querySelector. Это не рекомендуется, так как это противоречит философии React по работе с виртуальным DOM, но может быть полезно в некоторых случаях.

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const element = document.getElementById('my-element');
    element.style.color = 'red';
  }, []);

  return <div id="my-element">Hello, world!</div>;
};

export default MyComponent;

🟠Манипуляции через хуки React предлагает несколько хуков, которые могут быть использованы для управления жизненным циклом компонентов и обращения к DOM-элементам. useEffect: Хук для выполнения побочных эффектов. useLayoutEffect: Похож на useEffect, но выполняется синхронно после всех изменений DOM.

import React, { useRef, useLayoutEffect } from 'react';

const MyComponent = () => {
  const myRef = useRef(null);

  useLayoutEffect(() => {
    // Получаем доступ к DOM-элементу через реф
    myRef.current.style.color = 'blue';
  }, []);

  return <div ref={myRef}>Hello, world!</div>;
};

export default MyComponent;

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

🤔 Что такое адаптивная верстка? Адаптивная верстка обеспечивает корректное отображение веб-страниц на экранах разных размеров, включая мобильные устройства и компьютеры. Используются медиа-запросы и гибкие единицы измерения для настройки элементов в зависимости от ширины экрана. Цель — создать удобный и функциональный интерфейс на всех устройствах. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что если микрозадача создаст еще микрозадачу? Когда микрозадача (microtask) создаёт другую микрозадачу, обе задачи будут выполнены в том же цикле событий (event loop), прежде чем будет обработано следующее макрозадача (macrotask). 🚩Как работает цикл событий 🟠Макрозадачи (macrotasks) Например, обработчики событий, setTimeout, setInterval. 🟠Микрозадачи (microtasks) Например, Promises, MutationObserver, process.nextTick (в Node.js). 🚩Последовательность выполнения 1⃣Выполняется макрозадача. 2⃣Обрабатываются все микрозадачи, пока очередь микрозадач не станет пустой. 3⃣Переход к следующей макрозадаче.

console.log('Start');

setTimeout(() => {
  console.log('Macrotask: setTimeout');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('Microtask 1');
    Promise.resolve().then(() => {
      console.log('Microtask 2');
    });
  })
  .then(() => {
    console.log('Microtask 3');
  });

console.log('End');

🚩Ожидаемый результат console.log('Start') Выполняется сразу. console.log('End') Выполняется сразу после первого console.log. Очередь макрозадач ставит функцию из setTimeout. Очередь микрозадач добавляет первую микрозадачу из Promise.resolve().then(...). Вывод в консоли

Start
End
Microtask 1
Microtask 2
Microtask 3
Macrotask: setTimeout

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

🤔 Какие проблемы решает React? React упрощает создание динамических интерфейсов, управляя состоянием и обновлением DOM через Virtual DOM. Он решает проблему сложного взаимодействия между компонентами, предоставляя декларативный подход. React также улучшает производительность благодаря оптимизированным обновлениям и повторному использованию компонентов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чего стоит и не стоит избегать в оптимизации сайта? 🟠Оптимизация изображений Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя. 🟠Минификация и объединение файлов Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один. 🟠Использование CDN (Content Delivery Network) Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов. 🟠Кэширование На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx. 🟠Асинхронная загрузка и критический CSS Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы. 🟠Улучшение производительности сервера Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов. 🟠Использование современных технологий Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов. 🟠Мониторинг и анализ Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic. 🚩Чего стоит избегать при оптимизации сайта 🟠Избегайте чрезмерной минимизации Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку. 🟠Не используйте большие, несжатые изображения Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем. 🟠Не загружайте все ресурсы сразу Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки. 🟠Не пренебрегайте кэшированием Отсутствие кэширования: Увеличивает время загрузки для повторных посещений. 🟠Избегайте блокирующих ресурсов JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами. 🟠Не злоупотребляйте анимациями и большими скриптами Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах. 🟠Избегайте чрезмерного использования плагинов Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью. 🟠Не забывайте про оптимизацию для мобильных устройств Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства. Ставь 👍 и забирай 📚 Базу знаний

🤔 Зачем используют Vuex? Используется для управления состоянием в приложениях на Vue.js. Он обеспечивает централизованное хранилище, позволяя всем компонентам обращаться к единому источнику данных. Это упрощает работу с состоянием, делает логику приложения предсказуемой и улучшает структуру кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Сколько есть способов что-то сделать асинхронно? В JavaScript существует несколько способов выполнения асинхронных операций. Основные из них включают коллбеки (callbacks), промисы (promises) и async/await. 🟠Коллбеки (Callbacks) Коллбеки были первым способом выполнения асинхронных операций в JavaScript. Это функции, которые передаются другим функциям в качестве аргументов и вызываются после завершения асинхронной операции.

function fetchData(callback) {
  setTimeout(() => {
    const data = "some data";
    callback(data);
  }, 1000);
}

fetchData((result) => {
  console.log(result);
});

Почему это нужно: Коллбеки позволяют выполнять код после завершения асинхронной задачи, например, загрузки данных с сервера. Как используется: Передаем функцию в качестве аргумента и вызываем её, когда данные готовы. Почему так: Это простой способ передать управление после завершения асинхронной операции, но может привести к "аду коллбеков" (callback hell) при множественных вложенных вызовах. 🟠Промисы (Promises) Промисы были введены для упрощения работы с асинхронным кодом и для решения проблемы вложенности, характерной для коллбеков. Промис представляет собой объект, который может находиться в одном из трёх состояний: ожидание (pending), выполнено (fulfilled) или отклонено (rejected).

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "some data";
      resolve(data);
    }, 1000);
  });
}

fetchData().then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

Почему это нужно: Промисы делают код более читаемым и управляемым, особенно при наличии цепочек асинхронных операций. Как используется: Создаем новый промис и возвращаем его из функции. Затем используем методы then и catch для обработки результата или ошибки. Почему так: Промисы позволяют избежать вложенности и обеспечивают более линейный и понятный поток выполнения. 🟠async/await Это синтаксический сахар поверх промисов, который делает код ещё более читаемым и похожим на синхронный.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = "some data";
      resolve(data);
    }, 1000);
  });
}

async function main() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

Почему это нужно: async/await упрощает написание и чтение асинхронного кода, устраняя необходимость использования методов then и catch. Как используется: Объявляем функцию с ключевым словом async и используем await для ожидания завершения промиса. Почему так: async/await делает асинхронный код более похожим на синхронный, улучшая его читаемость и поддержку. Ставь 👍 и забирай 📚 Базу знаний

– Помощь с pet-проектом – Составление roadmap – Общая консультация – Проведение код-ревью и mock-собеседования – Помощь с трудоустройством Все это и многое другое может Ментор. Он обеспечит вам необходимый boost, ускорит и упростит вход в IT. 🔥 Здесь размещен список менторов, и многие из них предлагают бесплатную первую консультацию

🤔 Что такое async/await? Это синтаксис для работы с асинхронными операциями в JavaScript, который упрощает управление промисами. Ключевое слово async делает функцию асинхронной, а await приостанавливает её выполнение до завершения промиса. Это позволяет писать асинхронный код, похожий на синхронный. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний