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

🤔 Какими способами мы можем получить картинку с сервера? В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.). <img> – самый простой способ (браузер сам загружает)

<img src="https://example.com/image.jpg" alt="Картинка">

CSS (background-image) – если нужно фоновое изображение

.element {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

🟠`fetch()` – если нужно обработать картинку в JS Можно загрузить изображение как Blob и создать временный URL.

fetch("https://example.com/image.jpg")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById("img").src = url;
  });

XMLHttpRequest – старый метод (устарел, но работает)

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";

xhr.onload = function () {
  const url = URL.createObjectURL(xhr.response);
  document.getElementById("img").src = url;
};

xhr.send();

🟠`<canvas>` – если нужно редактировать изображение Можно загрузить картинку и нарисовать её на <canvas>.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

img.src = "https://example.com/image.jpg";

WebSocket – если изображение передаётся в реальном времени

const socket = new WebSocket("wss://example.com/socket");

socket.onmessage = function (event) {
  const url = URL.createObjectURL(event.data);
  document.getElementById("img").src = url;
};

data URL (Base64) – если нужно хранить изображение в тексте

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

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

🤔 Сколько понадобиться сравнений для того чтобы найти нужный элемент из 8? Если применить бинарный поиск на отсортированном массиве, максимум будет log₂(8) = 3 сравнения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем var отличается от const ? Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🚩Область видимости (Scope) 🟠Var Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. 🟠Const Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🚩Переназначение и изменение 🟠Var Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. 🟠Const Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🚩Поднятие (Hoisting) 🟠Var Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. 🟠Const Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🚩Инициализация 🟠Var Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. 🟠Const Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

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

🤔 Что такое необъявленные (undeclared) переменные? undeclared — это переменные, которые не были объявлены с помощью let, const или var, но используются в коде. В строгом режиме это вызовет ошибку. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое meta теги? Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. 🚩Зачем нужны meta-теги? Улучшают SEO (поисковую оптимизацию) Управляют отображением в соцсетях и поисковиках Настраивают адаптивность страницы (например, на мобильных устройствах) Определяют кодировку, язык и авторство страницы 🚩Основные meta-теги с примерами Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

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

Социальные сети (Open Graph, Twitter Cards) Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

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

Безопасность в интернете — всё. В России фиксируются странные атаки на популярные сервисы, а крупные СМИ делают вид, что ничего не происходит Недавно легла одна из главных опор интернета — 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). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний