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

🤔 Какие использовать логические операторы? Основные — И, ИЛИ, НЕ. В JavaScript это &&, || и !. Они применяются для составных условий, управления логикой выполнения, фильтрации и принятия решений в коде. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое псевдоэлемент? Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML. 🚩Синтаксис Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after. 🟠Распространенные псевдоэлементы ::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

🚩Особенности работы Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями. Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";). Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript. Ставь 👍 и забирай 📚 Базу знаний

Такси для бизнеса. Яндекс Go Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go Узнать больше #реклама business.go.yandex О рекламодателе

🤔 В чём различие article и section? - <article> — самодостаточный фрагмент контента, который может существовать независимо (новости, блог). - <section> — логическая группа контента, часть большей структуры. Используется для организации и разметки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем нужен nginx? Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности. 🟠Как Nginx раздаёт фронтенд-приложение? Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке dist появляются статические файлы (index.html, app.js, styles.css).

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }
}

🟠Как Nginx проксирует запросы к бэкенду? Если фронтенд (myapp.com) и бэкенд (api.myapp.com) находятся на разных серверах, Nginx может перенаправлять запросы на API.

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    # Проксирование API-запросов
    location /api/ {
        proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🟠Как Nginx балансирует нагрузку? Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.

upstream backend {
    server backend1.myapp.com;
    server backend2.myapp.com;
}

server {
    listen 80;
    server_name api.myapp.com;

    location / {
        proxy_pass http://backend;
    }
}

🟠Как Nginx ускоряет сайт с кэшем? Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.

location /static/ {
    expires 7d; # Кэшировать файлы на 7 дней
    add_header Cache-Control "public, max-age=604800";
}

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

⚡️ Айтишник из «VISION» скупил топовые айти-курсы и выложил гигабайты материалов к себе Каждый найдет что-то по душе: 903 ГБ — Python 812 ГБ — Frontend 978 ГБ — C, C++ 804 ГБ — Java 432 ГБ — C#, GameDev 411 ГБ — SQL & БД 309 ГБ — DevOps 998 ГБ — ИБ & Хакинг 773 ГБ — Kotlin, Swift 189 ГБ — PHP 201 ГБ — GoLang 170 ГБ — Rust 167 ГБ — QA-Тестирование 310 ГБ — 1C + Лицензии 495 ГБ — Машинное обучение 704 ГБ — Аналитика Данных 991 ГБ — Дизайн Материалы в закрепе, постоянно пополняются👆🏻

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

🤔 Что такое IIFE? IIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Бесплатный курс Digital-дизайна На бесплатном курсе ты сможешь: ✨попробовать себя в digital-дизайне: афиши, сайты, UX/UI ✨сделать 3 проекта для портфолио с фидбэком от наставника ✨понять, как устроена работа дизайнера ✨получить доступ к «секретной базе» и гайдам по профессии Попробовать #реклама 16+ study.logomachine.ru О рекламодателе

🤔 Где писать запросы к серверу? Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода. 🚩Использование хуков useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🚩Методы жизненного цикла в классовых компонентах Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default DataFetchingComponent;

🟠Сервисы или утилиты Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым. service.js

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

DataFetchingComponent.js

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';

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

  useEffect(() => {
    fetchData()
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🟠Управление состоянием Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX. Ставь 👍 и забирай 📚 Базу знаний

Ищу желающих заполнять карточки товаров на ВБ! Работа полностью на удаленке с зп до150 000 рублей в месяц. Без опыта, нужен только телефон, занятость 3-6 часов в день. Всему обучат на бесплатном курсе и после возьму на работу: ✅ 3 дня уроков по 30 минут ✅ Домашки с проверкой и оплатой бонусами ✅ Плачу 10 тыс за каждую выполненную домашку Все кто пройдет курс, получат сертификат от школы с образовательной лицензией. ⚡ Набор заканчивается завтра. 👍 Для регистрации жмите кнопку "Зарегистрироваться" Зарегистрироваться #реклама 16+ course.wildmanager.ru О рекламодателе

🤔 Какой способ помогает бороться с прокидыванием, помимо Redux? Можно использовать Context API, который позволяет передавать данные от родителя к потомку без явного прокидывания через props. Это удобно для глобальных данных: темы, язык, текущий пользователь. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как бы добавлял статический метод в prototype? На самом деле, статические методы не добавляются в prototype, потому что они принадлежат самому классу, а не его экземплярам. Но если ты хочешь имитировать статический метод в prototype, можно использовать функцию-конструктор и добавить метод вручную. 🚩Как работают статические методы? (`static`) В классе статические методы объявляются с помощью static. Они не находятся в prototype, а принадлежат самому классу.

class User {
  static sayHello() {
    return "Привет!";
  }
}

console.log(User.sayHello()); // ✅ "Привет!"
console.log(User.prototype.sayHello); // ❌ undefined (нет в prototype)

🚩Добавление "статического" метода в `prototype` (не совсем статический) Если нужно, чтобы каждый объект имел доступ к "статическому" методу через prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод в prototype
User.prototype.sayHello = function () {
  return "Привет!";
};

const user1 = new User("Иван");
console.log(user1.sayHello()); // ✅ "Привет!"

🚩Добавление метода напрямую в сам класс (имитация `static`) Если хочется добавить метод на сам класс, а не в prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
  return "Привет!";
};

console.log(User.sayHello()); // ✅ "Привет!"

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

🤔 Зачем нужен механизм двустороннего связывания? Two-way binding нужен для: - синхронизации состояния UI и данных без дополнительного кода; - удобной работы с формами и интерактивными компонентами; - упрощения кода (особенно в v-model, ngModel). Но может затруднять отладку и контроль, если применять безмерно. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что произойдет если мы напишем невалидную разметку? Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так. 🚩Что делает браузер с невалидным HTML? Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что: Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег). Некоторые элементы могут быть проигнорированы или отображены некорректно. CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре. 🚩Примеры ошибок и их последствия Отсутствие закрывающего тега

<p>Привет, мир!
<p>Это новый абзац?

Вложенность тегов в неправильных местах

<p>Текст <div>Блок внутри абзаца</div></p>

По спецификации <div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца. Итоговый HTML может быть таким:

<p>Текст </p>
<div>Блок внутри абзаца</div>

🟠Отсутствие `DOCTYPE` Если не указать <!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей. Неправильные атрибуты в тегах

<img src="image.jpg" alt="Картинка" wrongAttr="что это?">

Незакрытые теги в таблице

<table>
  <tr>
    <td>Ячейка 1
    <td>Ячейка 2
  </tr>
</table>

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

REKONFA Live 6 ноября приглашаем рекламодателей, агентства и рекламные площадки обсудить технологии, маркетинговые инструменты и актуальные новинки. Ключевые участники рынка поделятся опытом и расскажут: — О ситуации на рынке рекламы — Как продвигать и продавать в интернете в 2025 году — Как бизнесу адаптироваться к меняющимся условиям Вас ждут доклады на актуальные темы, классный нетворкинг, вдохновляющая атмосфера для творчества и креатива. Встречаемся 6 ноября в Москве. Для тех, кто не сможет приехать, организуем интерактивное digital-шоу. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

🤔 Что означают union и intersection в TypeScript? - Union (|): переменная может быть одного из указанных типов. Пример: type A = string | number - Intersection (&): переменная должна соответствовать всем типам сразу. Пример: type B = { name: string } & { age: number } Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем отличается замыкание от области видимости? Замыкание и область видимости — это два фундаментальных концепта в JavaScript, связанных с работой переменных, но они решают разные задачи. Давайте разберёмся в их отличиях. 🚩Область видимости (Scope) Область видимости определяет, где в коде можно обращаться к переменной. В JavaScript есть три основные области видимости: Глобальная область видимости – переменные доступны в любом месте кода. Область видимости функции (функциональная) – переменные доступны только внутри функции, где они были объявлены. Блочная область видимости (с let и const) – переменные доступны только внутри блока {}.

function testScope() {
  let x = 10; // x доступна только внутри testScope
  console.log(x); // 10
}
console.log(x); // Ошибка: x не определена

🚩Замыкание (Closure) Замыкание – это функция, которая запоминает область видимости, в которой была создана, даже после выхода из неё. То есть, если внутренняя функция использует переменные внешней функции, она "захватывает" их и может использовать даже после завершения работы внешней функции.

function outer() {
  let count = 0; 

  return function inner() { 
    count++;  
    console.log(count);
  };
}

const counter = outer(); // outer выполняется, но переменная count остается в памяти
counter(); // 1
counter(); // 2
counter(); // 3

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

Высшее образование онлайн — поменяйте жизнь в 2025 году! ✅Набор в сентябре: от 6700 ₽/мес.* Московский технологический институт предлагает: — Высшее образование в московском вузе без выезда на сессии — Полностью дистанционный онлайн-формат — Возможность обучаться дома, на работе, в путешествии — Диплом государственного образца — Более 60 направлений на выбор (IT, инженерные, экономические, педагогические, управленческие и другие) — 5 способов оплаты обучения — Поддержка персонального куратора: от поступления до получения диплома Узнать больше #реклама 16+ mti-vuz.ru О рекламодателе

🤔 Можно ли добавлять несколько заголовков h1? Можно, но только по смыслу: - В HTML5 допустимо несколько h1 — по одному на секцию или article. - Главное — сохранять логичную иерархию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний