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

ТОП 2 канала для тех кто увлекатеся хакингом и кибербезопасностью: Этичный Хакер — крупнейший в СНГ канал по информационной безопасности. OSINT, анонимность, пентест, социальная инженерия. Лаборатория Хакера — авторский канал от специалиста по ИБ. Новости даркнета, сетевая разведка, обзоры инструментов с github, полезные подборки.

Прокачаем ваш frontend скилл с junior до middle Научим писать код, который не стыдно показать Первые 7 дней бесплатно. Попробуй! Узнать больше #реклама 16+ ykul.ru О рекламодателе

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

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

🤔 Что делает и для чего нужна функци function.Prototype.Bind? bind() – это метод, который создает новую функцию с привязанным контекстом (this) и (опционально) фиксированными аргументами. 🚩Основные возможности `bind()` Привязывает this, чтобы не потерять контекст Позволяет создавать частично примененные функции Используется в обработчиках событий и таймерах Пример: потеря this без bind()

const user = {
  name: "Иван",
  sayHello() {
    console.log(`Привет, ${this.name}!`);
  },
};

setTimeout(user.sayHello, 1000); // ❌ this = undefined

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

Беспроводной пылесос Tefal X-Force Flex 15.60 Эффективность уборки на максимум. Благодаря цифровому мотору новейшего поколения Tefal X-Force Flex обладает мощностью всасывания до 230 аэроватт, а гибкий корпус позволяет ему с легкостью справляться с уборкой в самых труднодоступных местах. Наслаждайтесь беспрерывной качественной уборкой до 80 минут без подзарядки. Для достижения максимальной эффективности пылесос автоматически определяет тип поверхности и подбирает оптимальную мощность всасывания для напольного покрытия. Благодаря уникальной насадке Аква Tefal X-Force Flex пылесосит и моет полы одновременно, делая уборку полноценной и экономя ваше время. Узнать больше #реклама tefal.ru О рекламодателе

🤔 Как развернуть строку в JS? Можно воспользоваться методами работы с массивами. Сначала строка преобразуется в массив символов с помощью split(''), затем массив разворачивается с помощью reverse(), и в конце собирается обратно в строку с помощью join(''). Это стандартный и удобный способ для выполнения такой операции. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. 🚩Почему нужен Docker? 🟠Решает проблему "работает у меня, но не у тебя" В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. 🟠Автоматизирует развертывание Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. 🟠Легко масштабировать Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). 🟠Разделяет зависимости Каждое приложение работает в изолированной среде, и конфликты библиотек исключены. 🟠Работает везде (Windows, Mac, Linux, серверы, облако) Контейнер можно запустить где угодно, где установлен Docker. 🚩Как работает Docker? 🟠Создаем `Dockerfile` (инструкция для сборки контейнера) Пример для Node.js-приложения

# Базовый образ с Node.js
FROM node:18

# Устанавливаем рабочую директорию
WORKDIR /app

# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .

# Запускаем приложение
CMD ["node", "server.js"]

Собираем образ Docker (создаем "упакованный" контейнер)

docker build -t my-app .

Запускаем контейнер

docker run -p 3000:3000 my-app

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

Стать джуном за 3 дня реально? Очевидно, что нет. Но за месяц вполне возможно. Есть такой канал Frontender's notes, в котором фронтент-сеньоры публикуют полезные материалы. Уже собрано в нём: — Готовые приложения (211 шт) — Оптимизация кода (87 шт) — Компоненты (744 шту) — UI-киты (509 шт) — Полезные статьи (92 шт) Теперь не нужно искать информацию по крупицам в интернете. Всё в одном месте: Frontender's notes

Битрикс24 💻Один онлайн-сервис для совместной работы. 📱10+ инструментов. ✅0 денег. Счастливые сотрудники. Прибыльный бизнес. Регистрируйтесь и забирайте себе Зарегистрироваться #реклама 16+ office-online.bitrix24.ru О рекламодателе

🤔 Почему нельзя отдать строку в DOM? 1. Уязвимость XSS: Если строка содержит вредоносный код, это может быть использовано злоумышленниками. 2. Нарушение безопасности: Непроверенные строки могут модифицировать структуру DOM. 3. Практика: Вместо строки используйте методы, которые безопасно добавляют элементы или текст (innerText, textContent). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Новые возможности Yandex Search API 20 февраля в 12:00 (мск) пройдёт бесплатный онлайн-вебинар для владельцев сайтов и аналитических сервисов. Вы узнаете, как использовать поисковые технологии для повышения эффективности своего бизнеса. Зарегистрироваться #реклама 16+ yandex.cloud О рекламодателе Реклама на Яндексе

🤔 Какие значения будут являться falsy значениями? В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений: 🟠`false` Логическое значение false.

console.log(Boolean(false)); // false    

🟠`0` Число ноль.

console.log(Boolean(0)); // false    

🟠`-0` Отрицательное число ноль (хотя это редко встречается на практике).

console.log(Boolean(-0)); // false    

🟠`0n` Число BigInt с значением ноль.

console.log(Boolean(0n)); // false    

🟠`""` (пустая строка) Строка без символов.

console.log(Boolean("")); // false    

🟠`null` Специальное значение, обозначающее отсутствие какого-либо значения.

console.log(Boolean(null)); // false    

🟠`undefined` Специальное значение, обозначающее необъявленное или неприсвоенное значение.

console.log(Boolean(undefined)); // false    

🟠`NaN` Специальное значение, обозначающее не число (Not-a-Number).

console.log(Boolean(NaN)); // false    

🚩Примеры использования 🟠Проверка значений на falsy В условиях (if statements) все falsy значения интерпретируются как false.

const values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (!value) {
        console.log(`${value} is falsy`);
    }
});

Примеры в условиях

if (!false) {
    console.log('false is falsy'); // выводится
}

if (!0) {
    console.log('0 is falsy'); // выводится
}

if (!"") {
    console.log('"" is falsy'); // выводится
}

if (!null) {
    console.log('null is falsy'); // выводится
}

if (!undefined) {
    console.log('undefined is falsy'); // выводится
}

if (!NaN) {
    console.log('NaN is falsy'); // выводится
}

🟠Использование в логических операторах Falsy значения также учитываются в логических операциях.

const value = null;

const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy

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

Подключите единое решение для вашего колл-центра Управляйте вашими звонками, чатами, аналитикой и операторами в одном окне Контакт-центра MANGO OFFICE! ✅Читайте на сайте реальные кейсы повышения CSI, выручки, скорости ответа и найма сотрудников Попробовать #реклама 16+ mango-office.ru О рекламодателе

🤔 Что делает Webpack? Это инструмент для сборки модулей JavaScript: 1. Объединяет файлы: Собирает модули в один файл для улучшения производительности. 2. Обработка ресурсов: Подключает стили, изображения, шрифты. 3. Оптимизация: Минимизирует код, разделяет файлы на части (chunking). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

📺 Уникальная база IT собеседований 456+ реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 Что такое flexbox? Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки. Главные особенности 🟠Гибкое выравнивание элементов в строку или колонку 🟠Равномерное распределение пространства между элементами 🟠Упрощает адаптивную верстку без float и position 🟠Легкое центрирование элементов 🚩Основные термины Flexbox Когда включается display: flex;, элементы внутри него становятся флекс-элементами. Flex-контейнер → родительский элемент (display: flex;) Flex-элементы → дочерние элементы контейнера Главная ось (main axis) → ось, вдоль которой расположены элементы Поперечная ось (cross axis) → перпендикулярная ось

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

🚩Основные свойства Flexbox 🟠`display: flex;` Включает Flexbox для контейнера.

.container {
  display: flex;
}

🟠`flex-direction` – направление оси Определяет, как располагаются элементы (по горизонтали или вертикали).

.container {
  flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
  flex-direction: column; /* В столбик */
  flex-direction: row-reverse; /* Справа налево */
  flex-direction: column-reverse; /* Вниз-вверх */
}

🟠`justify-content` – выравнивание по главной оси

.container {
  justify-content: flex-start; /* По умолчанию, слева направо */
  justify-content: center; /* Центр */
  justify-content: flex-end; /* Справа налево */
  justify-content: space-between; /* Равномерное распределение */
  justify-content: space-around; /* С отступами */
  justify-content: space-evenly; /* Равномерные промежутки */
}

🟠`align-items` – выравнивание по поперечной оси

.container {
  align-items: stretch; /* По умолчанию (растягивает) */
  align-items: center; /* Центр по вертикали */
  align-items: flex-start; /* Вверх */
  align-items: flex-end; /* Вниз */
  align-items: baseline; /* По базовой линии текста */
}

🟠`flex-wrap` – перенос элементов на новую строку

.container {
  flex-wrap: nowrap; /* По умолчанию – все в одной строке */
  flex-wrap: wrap; /* Элементы переносятся */
  flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}

🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`) Работает, когда элементы занимают несколько строк.

.container {
  align-content: flex-start; /* Вверх */
  align-content: flex-end; /* Вниз */
  align-content: center; /* По центру */
  align-content: space-between; /* Равномерное распределение */
  align-content: space-around; /* С отступами */
  align-content: stretch; /* Растянуть (по умолчанию) */
}

🚩Управление отдельными элементами (`flex`-элементы) flex-grow – рост элемента

.item {
  flex-grow: 1; /* Растянется, если есть место */
}

flex-shrink – сжатие элемента

.item {
  flex-shrink: 0; /* Не уменьшаться */
}

flex-basis – начальный размер элемента

.item {
  flex-basis: 200px; /* Фиксированный размер */
}

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

Решаете задачи, но не получаете оффер? Прокачка хард-скиллов – это основа. Умение писать чистый код, разбираться в алгоритмах и решать сложные задачи действительно важно. Чем сильнее технические навыки, тем выше шансы пройти тех.интервью. Бесспорно. Но вот вопрос: почему даже сильные разработчики могут провалить собеседование? Потому что сейчас технические навыки – это не всё. Процесс получения оффера – это не только алгоритмы и код. Вы можете идеально решить задачу, но если: • Не умеете объяснять свои решения • Теряетесь на поведенческих вопросах • Не понимаете, что именно хочет услышать интервьюер • Не выстраиваете стратегию поиска, а просто бесконечно откликаетесь, да еще и слабым резюме, не доходите до тех.интрвью, не выстраиваете коммуникацию в процессе отклика и на этапах … так можете и не дойти до финального оффера. Тем более до выбора из офферов с классной зп. Конверсия будет страдать! Как получить оффер, а не просто проходить интервью? Разбирают на канале ключевые аспекты, без которых даже топовый технарь может провалиться: Как оформлять резюме и отклики, чтобы вас звали на интервью Как отвечать на вопросы о вашем опыте Как уверенно проходить собеседования и "продавать" себя Какие ошибки мешают даже опытным разработчикам получать офферы Подробный разбор — как получить оффер

Крупнейший университет искусственного интеллекта Учим использовать ChatGPT в профессиональных целях, создавать нейро-сотрудников и зарабатывать на искусственном интеллекте. ✨ 8 000+ студентов со всего мира ✨ 600+ AI-проектов, созданных студентами ✨ Сборная Университета — победители крупнейших AI-хакатонов России ✨ Стажировки в крупнейших компаниях России (РЖД, Ростелеком, РУДН, Совкомбанк, Самолет и другие) ✨ Трудоустраиваем выпускников в крупнейшие компании (Яндекс, ВТБ, Сбербанк, Роскосмос и другие) Будем рады видеть тебя в наших рядах! Узнать больше #реклама 16+ neural-university.ru О рекламодателе

🤔 Что такое Redux? Это библиотека для управления состоянием приложения: 1. Единое хранилище: Все состояние приложения хранится в одном объекте. 2. Принцип "однонаправленного потока данных": Состояние изменяется через действия (actions) и редюсеры (reducers). 3. Удобство тестирования: Легко отслеживать изменения состояния. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний