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

Безопасность в интернете — всё. В России фиксируются странные атаки на популярные сервисы, а крупные СМИ делают вид, что ничего не происходит Недавно легла одна из главных опор интернета — Cloudflare, после которой посыпались все сайты, и это лишь верхушка айсберга. У крупных сервисов тихо утекают базы, ломают криптокошельки и пользуются уязвимостями, а люди узнают об этом только когда их данные и деньги уже на теневых площадках Так что, если не хотите однажды проснуться с пустыми счетами или украденными аккаунтами, советуем хотя бы раз в день читать живые кибер-сводки, а не вылизанные новостные каналы Именно такие вещи без прикрас разбирают в канале heavyinternet: там ежедневно публикуются настоящие атаки, свежие утечки и предупреждения, которые вы не увидите в официальных новостях Подпишись, позаботься о своих финансах и безопасности в интернете: https://t.me/+lHLimYrxqGFiMjgy

Цифровое тридевятое царство появилось в Облаке Mail ✨ Очень сказочные дела творятся в Облаке Mail ✨ Отгадайте загадку про сказочных героев и волшебные силы подписки Mail Space. Кто правильно отгадает, получит дивные подарки. ❤️ Перейти на сайт #реклама 16+ cloud.mail.ru О рекламодателе

🤔 Что такое интерполяция? Это способ отображения динамических данных в шаблонах. 1. В Vue интерполяция выполняется с использованием двойных фигурных скобок ({{ }}). 2. Позволяет вставлять значения из данных или вычисляемых свойств в пользовательский интерфейс. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"

🚩Когда использовать функциональное программирование? Функциональный подход хорош, если Код должен быть чистым и предсказуемым Нужно избегать изменений состояния (иммутабельность) Требуется много работы с массивами, коллекциями данных Нужно легко писать асинхронный код

const double = num => num * 2;

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);

console.log(doubledNumbers); // [2, 4, 6, 8]

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

Надежные VDS-сервера в NetAngels от 73₽/месяц Подберем мощные VDS-сервер для любых задач. Техподдержка 24/7. Защита от DDoS-атак. Гибкая конфигурация. Бесплатный перенос VDS с сохранением всех данных. Попробуйте VDS-сервер от NetAngels уже сегодня! Перейти на сайт #реклама 16+ netangels.ru О рекламодателе

🤔 В чём разница между операторами or и and? - or подходит, когда достаточно одного условия для действия. - and нужен, когда должны выполниться сразу несколько условий. Пример: Если пользователь вошёл в систему И подтвердил почту — используем and. Если пользователь админ ИЛИ редактор — используем or Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как браузер понимает что картинка является картинкой? Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее. 🟠MIME-тип (Media Type) MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например: - image/png → PNG - image/jpeg → JPEG - image/svg+xml → SVG - image/gif → GIF - image/webp → WebP

Content-Type: image/png

🟠Расширение файла Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif).

<img src="picture.jpg" alt="Картинка">

🟠HTML-теги и атрибуты Когда браузер встречает в коде такие теги, как <img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.

<img src="image.png" alt="Пример картинки">

🟠Формат и сигнатура файла Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например: - PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII). - JPEG — FF D8 FF. - GIF — 47 49 46 38 (GIF89a). Ставь 👍 и забирай 📚 Базу знаний

Купите квартиру на Юге. Отдыхайте на море и в горах! ЖК "Гарантия PRIME" в Краснодаре — это: 😊 Теплый климат и природа за окном Просыпайтесь в окружении парков, леса и набережной. Дышите чистым воздухом, гуляйте вечерами в авторском саду с фонтанами. 🚗 Море и горы — на расстоянии выезда на выходные Всего 2 часа до пляжей Черного моря и 4 часа до склонов Красной Поляны. Ваш активный отдых доступен каждые выходные! 🏠 Всё для жизни «здесь и сейчас» Свой гастрономический кластер, арт-пространство и деловой хаб прямо во дворе. Живите в ритме южного курорта, не выезжая из города. 🎓 Среда для роста: от детского сада до университета. Ваши дети учатся в престижных школах прямо во дворе, а Университет КубГУ в 10 мин езды. Система образования по международным стандартам для Ваших детей. Ваша личная резиденция на Юге! Узнать больше Проектная декларация на сайте https://наш.дом.рф/. #реклама gk-garantiaprime.ru О рекламодателе

🤔 Что такое Promise.all? Promise.all — это метод, который принимает массив промисов и возвращает один промис, который: - выполняется успешно, если все промисы успешно завершились (результат — массив); - отклоняется, как только один из промисов вернёт ошибку. Удобен для запуска нескольких асинхронных задач параллельно и ожидания их результатов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как можно вставить svg в html документ? Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript. 🟠Прямой (inline) SVG-код в HTML Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

🟠Через тег `<img>` Если SVG не нужно изменять, можно вставить его как обычное изображение.

<img src="image.svg" alt="Описание изображения" width="100" height="100">

🟠Через CSS `background-image` SVG можно использовать как фоновое изображение.

<div class="icon"></div>

<style>
  .icon {
    width: 100px;
    height: 100px;
    background-image: url('image.svg');
    background-size: cover;
  }
</style>

🟠Через тег `<object>` Позволяет загружать SVG-файлы и взаимодействовать с ними.

<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

🟠Через тег `<iframe>` SVG можно загружать в iframe.

<iframe src="image.svg" width="100" height="100"></iframe>

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

СберЛизинг — лизинг для бизнеса на выгодных условиях! Для юридических лиц и ИП — легковые и коммерческие авто, грузовой транспорт, спецтехника, оборудование. Ключевые преимущества: ✅ Аванс — от 0% ✅ Скидки от поставщиков ✅ Выгодные программы и субсидии ✅ Срок лизинга — до 7 лет ✅ Решение по сделке — от 2 часов Не упускайте возможность обновить автопарк на лучших условиях. Получите персональный расчет и быстрое решение! Перейти на сайт #реклама sberleasing.ru О рекламодателе

🤔 Что такое ООП? Это парадигма программирования, основанная на концепции объектов. Основные принципы: 1. Инкапсуляция: объединение данных и методов. 2. Наследование: создание новых классов на основе существующих. 3. Полиморфизм: возможность использовать один интерфейс для разных типов. 4. Абстракция: выделение важных характеристик и скрытие деталей реализации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего необходим viewport? Viewport – это область видимой части веб-страницы в браузере пользователя. 🟠`meta viewport` – ключ для адаптивного дизайна Чтобы страница корректно отображалась на мобильных устройствах, используется мета-тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

🟠Проблема без `meta viewport` (почему он нужен?) Без viewport (по умолчанию) На мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить. 🟠Дополнительные параметры `meta viewport` Управление масштабом

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Отключение адаптации iOS Safari

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

Прибыль есть, но её будто не видно Вы стараетесь развивать бизнес, но всё время уходит не на клиентов или продажи, а на отчёты и переписку с налоговой. Бухгалтерия забирает внимание и силы. Кажется, что контролируете процесс, но на деле рост компании откладывается. ⚡ С «Моим делом» этого нет. Мы берём на себя расчёты, отчётность и контроль за сроками. Всё работает спокойно и без сюрпризов, а вы наконец можете сосредоточиться на том, ради чего и начали бизнес. Узнать больше #реклама autsorsing.moedelo.org О рекламодателе

🤔 Что разбирали в движке браузера? Обычно разбираются: - Event Loop (очереди микротасков и макротасков); - Call Stack и Web APIs; - Garbage Collector; - Внутренняя работа setTimeout, Promise, render; - Оптимизация DOM, reflow/repaint; - Компиляция и исполнение JS (V8, SpiderMonkey). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован. 🚩Зачем уничтожать Web Worker? Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется. 🚩Как использовать `terminate()`? Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

🚩Важно помнить 1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения. 2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются. 3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker? Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Что такое атрибут target и какие значения он принимает? Атрибут target определяет, где откроется ссылка или форма. Значения: - _self — в текущем окне (по умолчанию); - _blank — в новой вкладке; - _parent — в родительском фрейме; - _top — в полном окне браузера. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда стоит использовать тип any? Тип any в TypeScript позволяет отключить проверку типов и использовать любую структуру данных, как в обычном JavaScript. Но any убирает всю защиту TypeScript, поэтому его нужно использовать только в крайних случаях. 🚩Если тип данных неизвестен заранее (например, ответ от API) Иногда сервер может вернуть разные структуры данных, и невозможно заранее определить точный тип.

async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  return response.json();
}

Лучший вариант — использовать интерфейсы вместо any:

interface User {
  id: number;
  name: string;
}

async function fetchUser(url: string): Promise<User> {
  const response = await fetch(url);
  return response.json() as User;
}

🚩При миграции JavaScript в TypeScript Если проект на чистом JavaScript, добавление TypeScript может сломать код. any помогает постепенно вводить строгую типизацию.

function log(value: any) {
  console.log(value);
}

🚩Когда работаем с динамическими структурами (например, `localStorage`) В localStorage можно сохранить что угодно, поэтому при чтении данных тип неизвестен.

const data: any = localStorage.getItem("user");

Лучше сразу привести any к нужному типу

const user = JSON.parse(localStorage.getItem("user") || "{}") as { id: number; name: string };

🚩Когда пишем универсальную библиотеку Если функция должна работать с разными типами, any может быть временным решением.

function mergeObjects(obj1: any, obj2: any): any {
  return { ...obj1, ...obj2 };
}

Лучший вариант с generic (T вместо any)

function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

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

Скидки до 60 000 ₽ на смартфоны HONOR на Яндекс Маркете Смартфоны HONOR. Современный дизайн и мощность - покупай на Яндекс Маркете. Перейти на сайт #реклама market.yandex.ru О рекламодателе