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

Почему тебя не зовут на интервью? Исправь это в своем резюме… Получить приглашение на интервью сейчас сложнее, чем с нуля обучиться разработке. И к сожалению, это не шутка. Скорее всего только 1-2% работодателей сейчас позовут тебя на интервью. Это статистика, которую мы собирали по 10.000 откликам. Но над этой цифрой можно и нужно работать. Если правильно оформить свое резюме, и поменять свою стратегию с откликами, то конверсию можно увеличить до 10%. Т.е почти в 10 раз! Как это сделать? 1. Проверить свое резюме по нашему чек листу, и внести в него то, чего будет не хватать. 2. Поменять свой подход к поиску работы, ведь одними откликами на hh.ru сыт не будешь. 16 июля, в 18:00 по москве, мы вместе с Максом из CodeReview проведем вебинар на тему эффективного поиска работы в 2024 году. На нем Макс покажет как сейчас нужно искать работу. В прямом эфире. А также раскроет что именно нужно писать в свое резюме, чтобы оно ПРОДАВАЛО. Получить чек лист по составлению резюме, а также зарегистрироваться на вебинар можно по этой ссылке. Регистрируйся сейчас и увидимся 16 июля, в 18:00 по мск. 👉 Зарегистрироваться и получить чек-лист по резюме.

В чем преимущество методологии bem ? Спросят с вероятностью 7% Методология БЭМ (Блок, Элемент, Модификатор) — это подход к написанию и организации CSS кода, который помогает создавать масштабируемые и поддерживаемые интерфейсы. Основные преимущества методологии: 1️⃣Четкая структура и семантика БЭМ обеспечивает ясную и логичную структуру именования классов, что делает код более читаемым и понятным. Это особенно полезно в больших проектах.

<div class="button button--primary">
  <span class="button__text">Click me</span>
</div>

2️⃣button — блок ✅button__text — элемент ✅button--primary — модификатор 2️⃣Изоляция компонентов Блоки в БЭМ независимы и изолированы друг от друга, что предотвращает проблемы с каскадностью и неожиданным переопределением стилей.

<div class="header">
  <div class="header__logo"></div>
  <div class="header__nav"></div>
</div>

<div class="footer">
  <div class="footer__logo"></div>
</div>

Классы .header__logo и .footer__logo не пересекаются и не влияют друг на друга. 3️⃣Легкость в переиспользовании Блоки можно легко переиспользовать в разных частях проекта или даже в разных проектах без изменения их стилей.

<div class="card">
  <div class="card__title">Title</div>
  <div class="card__content">Content</div>
</div>

<div class="profile">
  <div class="card">
    <div class="card__title">Profile Title</div>
    <div class="card__content">Profile Content</div>
  </div>
</div>

4️⃣Удобство в поддержке и масштабировании Благодаря четкой структуре и изоляции, код написанный по БЭМ легче поддерживать и масштабировать. Добавление новых компонентов или модификация существующих не вызывает каскадных изменений в других частях системы. 5️⃣Унификация стилей Методология БЭМ способствует унификации и стандартизации стилей, что упрощает работу с проектом и делает его более предсказуемым. Пример HTML:

<div class="menu">
  <div class="menu__item menu__item--active">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

CSS:

.menu {
  background-color: #fff;
  border: 1px solid #ccc;
}

.menu__item {
  padding: 10px;
  color: #333;
}

.menu__item--active {
  background-color: #007bff;
  color: #fff;
}

Методология БЭМ упрощает чтение, поддержку и масштабирование кода за счет четкой структуры, изоляции компонентов и унификации стилей. Она делает интерфейсы более предсказуемыми и удобными для работы в команде. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Привет! Ты сейчас ищешь работу? Если да, то у меня для тебя классные новости. Мы с Максом решили провести вебинар на тему поиска работы и того, как быстрее получить оффер. Зачем? Да потому что найти работу просто откликаясь на вакансии теперь практически нереально. На Junior вакансии откликаются по 1500 кандидатов. 1500 человек, Карл... Вопрос: Как искать работу в таких условиях? Ответ: Нужно менять подходы, и использовать новые способы поиска работы. А вот какие способы, и как искать работу в 2024 году, расскажет мой товарищ - Макс, который помогает разработчикам с трудоустройством. Он расскажет тебе как ПРАВИЛЬНО откликаться на вакансии, на что смотрят рекрутеры, и как ты должен быть упакован, чтобы получить работу в это непростое время. 🗓 Когда? Во вторник – 16 июля, в 18:00 по мск. 🎁 После регистрации он также обещал прислать: 1) Анализ рынка труда. 2) Разбор кейсов тех, кто сейчас находит работу. 3) Пошаговый план, что нужно делать, чтобы прийти к оферу. 👉 Записаться на вебинар по поиску работы.

Оплата зарубежных сервисов стала удобной и доступной. Теперь можно пользоваться любыми сервисами со всего мира, не задумываясь о проблемах с оплатой. CheatPay помогает оплатить любые зарубежные сервисы российскими картами, а также помогает перевести средства за границу или получить средства из других стран. Например: - Потеряли доступ к Zoom, Chat GPT, Airtable, Atlassian, Canva Midjourney, Figma, Notion, Hetzner и к другим программам? - Простаивают проекты в Adobe Photoshop, Premiere Pro и After Effects, или другие? Вам помогут! CheatPay — это надежный, удобный и быстрый сервис оплаты, с множеством положительных отзывов. 📌Возможна оплата на ИП и кредитной картой 💳 Подписывайтесь на канал сервиса CheatPay, чтобы не потерять его.

Что такое схлопывание границ ? Спросят с вероятностью 7% Схлопывание границ (или схлопывание отступов, margin collapsing) — это поведение CSS, при котором вертикальные отступы (margins) соседних блоков могут быть объединены (схлопнуты) в один отступ. Это позволяет избежать удвоения вертикальных отступов между элементами и упрощает их управление. Основные правила 1️⃣Смежные вертикальные отступы: Когда два вертикальных отступа соседних блоков соприкасаются, они схлопываются в один. Размер схлопнутого отступа равен наибольшему из двух схлопывающихся отступов.

      <div class="block1"></div>
   <div class="block2"></div>

В данном случае итоговый отступ между .block1 и .block2 будет 30px, а не 50px. 2️⃣Родитель и первый/последний дочерний элемент: Если первый или последний дочерний элемент имеет вертикальный отступ, он схлопывается с отступом родительского элемента, если между ними нет границ, внутреннего отступа или контента.

      <div class="parent">
     <div class="child"></div>
   </div>

В этом случае итоговый отступ сверху для .child будет 20px, так как отступ .child схлопывается с отступом родителя. 3️⃣Пустые блоки: Если блок не содержит контента, границ или внутреннего отступа, его вертикальные отступы также могут схлопываться. Примеры Схлопывание между соседними элементами

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Итоговый отступ между .box1 и .box2 будет 30px. Схлопывание границ родителя и первого/последнего дочернего элемента

<div class="container">
  <div class="content">Content</div>
</div>

Итоговый верхний отступ для .content будет 25px, так как отступы схлопываются. Исключения и предотвращение схлопывания ✅Границы или внутренние отступы: Если между элементами добавить границу или внутренний отступ, схлопывания не произойдет.

    .parent {
    padding-top: 1px;
  }
  

✅Flexbox и Grid: Элементы, расположенные с помощью Flexbox или Grid, не схлопывают свои отступы. ✅Блоки с overflow: hidden, position: absolute, или display: inline-block: Такие блоки не участвуют в схлопывании отступов. Схлопывание границ — это процесс объединения вертикальных отступов соседних блоков в один, чтобы избежать удвоения отступов. В результате итоговый отступ равен наибольшему из схлопывающихся отступов. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Как джуну без опыта составить себе крутое резюме? Просто скачай наш гайд с 5 примерами реальных резюмешек ребят, которые недавно нашли работу. В этом гайде рассказали как: 1. Оформить свой опыт, даже если его нет. 2. Добавили 5 крутых примеров настоящих резюме junior разработчиков без опыта, которые нашли работу. А писала этот гайд команда, которая трудоустроила уже больше 150 джунов! Меняем его на подписку на канал 😊 👉 Скачать можно бесплатно по этой ссылочке.

Что такое usecontext ? Спросят с вероятностью 7% useContext — это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации. Как он работает 1️⃣Создание контекста Для создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.

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

   const MyContext = createContext();
   

2️⃣Provider Компонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.

      const MyProvider = ({ children }) => {
     const [state, setState] = useState('Hello World');

     return (
       <MyContext.Provider value={{ state, setState }}>
         {children}
       </MyContext.Provider>
     );
   };
   

3️⃣useContext Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.

      import React, { useContext } from 'react';

   const MyComponent = () => {
     const { state, setState } = useContext(MyContext);

     return (
       <div>
         <p>{state}</p>
         <button onClick={() => setState('New Value')}>Change Value</button>
       </div>
     );
   };
   

Полный пример

import React, { createContext, useState, useContext } from 'react';

// Создание контекста
const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello World');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('New Value')}>Change Value</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;

useContext — это хук, который позволяет компонентам получать данные из контекста. Он используется для доступа к глобальным данным без необходимости передавать пропсы на каждом уровне компонента. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

⚡️ Бесплатное обучение HTML/CSS, JavaScript, Vue.js с нуля с поддержкой от наставника На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить JS на практических задачах, которые интересно кодить С 10 по 14 июля он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — Vue.js Что вы сделаете на обучении — Сверстаете макет под присмотром тимлида — Затем добавите JavaScript (и это не пара скриптов для модального окна) — И перепишете проект на Vue.js 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться джуну. Помимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме В общем — даст пошаговый подробный план «Что учить фронтенд и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля Подписывайтесь, осталось 30 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первый урок из обучения уже доступен

Какие главные особенности куки ? Спросят с вероятностью 7% Cookies (куки) — это небольшие кусочки данных, хранящиеся в браузере и используемые для сохранения информации о пользователе. Вот основные особенности: 1️⃣Хранение данных на клиенте Хранятся на стороне клиента (в браузере) и используются для сохранения информации, которая может быть полезна при последующих посещениях веб-сайта. 2️⃣Ограниченный размер Размер каждого куки ограничен (обычно до 4KB). Поэтому куки не подходят для хранения больших объемов данных. 3️⃣Срок действия (время жизни) Каждая кука имеет время жизни, которое задается параметром Expires или Max-Age. По истечении этого времени кука автоматически удаляется браузером. 4️⃣Доступность по домену и пути Доступны только для указанного домена и пути. Это позволяет ограничивать доступ к кукам для других страниц и поддоменов. 5️⃣Безопасность (HTTP-only и Secure) ✅HTTP-only: Куки, установленные с флагом HttpOnly, недоступны через JavaScript, что помогает защитить данные от XSS-атак. ✅Secure: Куки, установленные с флагом Secure, передаются только по защищенному HTTPS соединению. 6️⃣Передача с запросами Автоматически отправляются серверу с каждым HTTP-запросом к соответствующему домену, что позволяет серверу узнавать пользователя и сохранять его сессию. Примеры использования куки 1️⃣Установка куки через JavaScript:

      document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
   

2️⃣Чтение куки через JavaScript:

      const getCookie = (name) => {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
     if (parts.length === 2) return parts.pop().split(';').shift();
   }

   console.log(getCookie('username')); // 'John Doe'
   

3️⃣Удаление куки через JavaScript:

      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
   

Примеры на сервере 1️⃣Установка куки на сервере (Node.js с Express):

      const express = require('express');
   const app = express();

   app.get('/', (req, res) => {
     res.cookie('username', 'John Doe', { maxAge: 900000, httpOnly: true });
     res.send('Cookie has been set');
   });

   app.listen(3000);
   

2️⃣Чтение куки на сервере (Node.js с Express):

      const express = require('express');
   const cookieParser = require('cookie-parser');
   const app = express();

   app.use(cookieParser());

   app.get('/', (req, res) => {
     const username = req.cookies.username;
     res.send(`Username is: ${username}`);
   });

   app.listen(3000);
   

Куки — это небольшие данные, хранящиеся в браузере. Они имеют ограниченный размер, время жизни, и доступны по определенному домену и пути. Куки могут быть защищены флагами HttpOnly и Secure, и автоматически отправляются серверу с каждым запросом. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Как проверить, что поле является массивом ? Спросят с вероятностью 7% Для проверки, является ли поле массивом, можно использовать несколько методов. Самый распространенный и рекомендуемый способ — это использование метода Array.isArray(). Этот метод проверяет, является ли переданное значение массивом, и возвращает true или false. Пример

const arr = [1, 2, 3];
const notArr = "Hello";

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(notArr)); // false

Альтернативные методы 1️⃣Проверка с помощью instanceof: Этот метод проверяет, является ли объект экземпляром конструктора Array.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(arr instanceof Array); // true
   console.log(notArr instanceof Array); // false
   

2️⃣Проверка с помощью конструктора Object.prototype.toString.call(): Этот метод проверяет тип объекта, возвращаемый методом

Object.prototype.toString.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
   console.log(Object.prototype.toString.call(notArr) === '[object Array]'); // false

Сравнение методов Array.isArray(): ✅Является самым современным и предпочтительным методом. ✅Поддерживается всеми современными браузерами. ✅Легко читается и понимается. instanceof: ✅Работает корректно в большинстве случаев.

  - Может давать неверные результаты, если массив создан в другом контексте (например, в iframe).

- Object.prototype.toString.call():
  - Универсальный метод для проверки различных типов объектов.
  - Меньше подвержен проблемам с контекстом, но выглядит менее читаемым по сравнению с Array.isArray().

Для проверки, является ли поле массивом, рекомендуется использовать метод Array.isArray(), так как он простой, эффективный и работает корректно в большинстве ситуаций. Чтобы проверить, является ли поле массивом, можно использовать метод Array.isArray(). Этот метод возвращает true, если значение является массивом, и false в противном случае. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

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

Расскажите о жизненном цикле компонента vue ? Спросят с вероятностью 7% Жизненный цикл компонента Vue.js описывает последовательность этапов, через которые проходит компонент от момента его создания до удаления. Каждый этап жизненного цикла сопровождается вызовом определенных хуков (методов), которые можно использовать для выполнения необходимых операций. Основные этапы: 1️⃣Создание (Creation): ✅beforeCreate(): Вызывается сразу после инициализации экземпляра, до того как будут установлены реактивные свойства. На этом этапе к экземпляру нельзя получить доступ через this. ✅created(): Вызывается после создания экземпляра и установки реактивных свойств. На этом этапе уже можно получить доступ к данным и методам компонента, но ещё нет привязки к DOM.

        new Vue({
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
        console.log(this.message); // 'Hello Vue!'
      }
    });
    

2️⃣Монтирование (Mounting): ✅beforeMount(): Вызывается перед монтированием компонента в DOM. На этом этапе шаблон ещё не скомпилирован и не вставлен в DOM. ✅mounted(): Вызывается после монтирования компонента в DOM. Здесь уже можно выполнять действия, зависящие от DOM, например, инициализировать сторонние библиотеки, работающие с DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
        console.log(this.$el); // доступ к элементу DOM
      }
    });
    

3️⃣Обновление (Updating): ✅beforeUpdate(): Вызывается перед обновлением DOM, когда изменяется реактивное свойство. На этом этапе можно получить текущее состояние до обновления. ✅updated(): Вызывается после обновления DOM. Этот хук можно использовать для выполнения действий, зависящих от нового состояния DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      methods: {
        updateMessage() {
          this.message = 'Hello World!';
        }
      }
    });
    

4️⃣Размонтирование (Unmounting): ✅beforeUnmount(): Вызывается перед размонтированием компонента и его удалением из DOM. Используется для выполнения очистки, например, отмены таймеров или отписки от событий. ✅unmounted(): Вызывается после того, как компонент был размонтирован и удалён из DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUnmount() {
        console.log('beforeUnmount');
      },
      unmounted() {
        console.log('unmounted');
      },
      methods: {
        destroyComponent() {
          this.$destroy();
        }
      }
    });
    

Жизненный цикл компонента Vue.js включает создание, монтирование, обновление и размонтирование. Каждый этап сопровождается вызовом определенных хуков (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted), которые позволяют выполнять различные действия в нужные моменты жизни компонента. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых