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..." />

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

Простой тест для выбора профессии в IT Пройдите тест на профессию и забирайте: ✅ Бесплатную карьерную консультацию с экспертом ✅ Доступ к чат-боту с гайдами по профессиям и заданиями для самопроверки ✅ Мини-курсы для погружения в IT и дизайн, чтобы точнее выбрать направление ✨130 000 человек уже прошли профтестирование и выбрали перспективную профессию в IT или дизайне Пройдите тест бесплатно за 5 минут! Начать #реклама 16+ free.skillfactory.ru О рекламодателе

🤔 Чего стоит и не стоит избегать в оптимизации сайта? Стоит делать: - Оптимизировать изображения и видео. - Минимизировать количество HTTP-запросов. - Использовать эффективное кэширование. - Lazy-loading и code-splitting. Не стоит делать: - Загружать слишком много тяжелых скриптов. - Использовать много inline-стилей вместо внешних CSS. - Прерывать основной поток тяжелыми JS-операциями. - Загружать весь контент сразу без lazy-loading. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Корпоративный английский для бизнеса Корпоративный английский с IQ Consultancy как ещё один повод приходить в офис🏃‍♂️ Обучение, которое не только повышает уровень языка, но и укрепляет лояльность сотрудников, снимает рутину с HR и сплачивает коллектив. Создаем персонализированные программы, разговорный клуб и проводим тренинги по soft skills📚 Мы берем на себя все: подбор преподавателей, контроль прогресса и отчетность. Уроки проходят онлайн или оффлайн в офисе, в удобное для вас время. ✅ Результат: уверенные сотрудники, сильная команда и рост бизнеса! Узнать больше #реклама iqc.group О рекламодателе

🤔 Что такое миксины в препроцессорах? Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку. 🚩Примеры использования миксинов 1⃣Определение миксина

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}   

2⃣Использование миксина

.box {
    @include border-radius(10px);
}

.button {
    @include border-radius(5px);
}   

🚩Пример на LESS 1⃣Определение миксина

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

2⃣Использование миксина

.box {
.border-radius(10px);
}

.button {
.border-radius(5px);
}

🚩Пример на Stylus 1⃣Определение миксина

border-radius(radius)
  -webkit-border-radius: radius
  -moz-border-radius: radius
 border-radius: radius   

2⃣Использование миксина

.box
border-radius(10px)

.button
border-radius(5px

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

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

🤔 Как оптимизировать сайт? - Минимизировать CSS, JS и HTML (Minification, gzip, Brotli). - Lazy-loading изображений и видео. - Использовать CDN для быстрой доставки контента. - Оптимизировать рендеринг с помощью критического CSS. - Использовать кэширование (Cache-Control, ETag). - Уменьшить количество HTTP-запросов (объединять файлы, использовать sprites). - Оптимизировать шрифты и уменьшить их количество. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Бесплатный курс по UX/UI-дизайну с нуля C нуля сделаете портфолио из 4+ работ и узнаете всё о профессии UX/UI дизайнера на практике: - дизайн сайтов и интерфейсов приложений - графический дизайн - веб-дизайн С личным наставником и разбором работ 🎓 Подать заявку #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Как отменить обтекание картинки текстом? Когда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется float. 🚩Отмена обтекания с `clear: both;` Если изображение обтекается текстом из-за float, нужно очистить обтекание с помощью clear: both;.

<img src="image.jpg" class="float-img">
<p class="clear-text">Этот текст не будет обтекать картинку.</p>

.float-img {
  float: left; /* Изображение обтекается текстом */
  margin-right: 10px;
}

.clear-text {
  clear: both; /* Останавливает обтекание */
}

🚩Сделать изображение блочным (`display: block;`) По умолчанию img – inline-block элемент, поэтому текст может располагаться рядом. Если сделать его display: block;, текст уйдёт вниз.

img {
  display: block;
  margin: 10px auto; /* Центрирование */
}

🚩Использовать `overflow: hidden;` для предотвращения наложений Если у родителя есть float, можно использовать overflow: hidden; для очистки потока.

.container {
  overflow: hidden; /* Очищает обтекание */
}

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

Скидка 30% на корпоративное Такси от Яндекс Go Подключайтесь к сервису без бумажной волокиты и абонентской платы. Сотрудники скажут Вам "спасибо". Пользуйтесь корпоративными сервисами с Яндекс Go для бизнеса каждый день Скидка действует для новых клиентов на ОСН. Узнать больше #реклама business.go.yandex О рекламодателе Реклама на Яндексе

🤔 Как мерить скорость работы и отзывчивость сайта? 1. Lighthouse (Chrome DevTools) – анализ производительности. 2. PageSpeed Insights – оценка скорости загрузки. 3. Web Vitals (FCP, LCP, CLS, TBT, FID) – ключевые метрики. 4. Performance API – измерение времени загрузки ресурсов. 5. GTmetrix – детальный анализ производительности. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Автоматизированное SEO-продвижение для бизнеса! Бесплатный тест 5 дней. Моментальный и понятный результат. Снимаем и прозрачно показываем все метрики. Попробовать #реклама умныйсервис.рф О рекламодателе

🤔 Зачем нужен 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";
}

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

UserGate Open Conf 17 / 04 / 2025 ⚡ ИТ-конференция про защиту в открытую. Здесь мы создаем площадку для открытого диалога между заказчиками, партнерами, экспертами и специалистами в сфере продуктов, технологий и услуг информационной безопасности. Что мы готовим для вас: - аналитические данные исследования рынка информационной безопасности; - обзор новых видов и эволюции киберугроз с разбором кейсов по борьбе с ними; - планы внедрения новых фич и обновлений продуктов экосистемы UserGate; - 30+ продуктовых, партнерских и клиентских докладов; - нетворкинг, продуктовые демо, обмен опытом и консультации экспертов ИБ; - ответы на любые вопросы и сбор обратной связи о работе продуктов и устройств UserGate. Зарегистрироваться #реклама openconf.usergate.com О рекламодателе

🤔 Как задать последовательность выполнения скриптов? - defer – выполняет скрипт после загрузки HTML. - async – выполняет скрипт сразу после загрузки, без ожидания HTML. - DOMContentLoaded – ждет построения DOM, но не загрузки стилей и картинок. - load – ждет загрузки всех ресурсов, включая изображения. - Promise и async/await – управление асинхронными операциями в коде. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Что такое псевдоклассы? Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое. :hover — применяется к элементу, когда на него наводят курсор мыши.

a:hover {
  color: red; /* Ссылка станет красной при наведении /
}

:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).

input:focus {
  border-color: blue; / Граница инпута станет синей при фокусе /
}

:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).

button:active {
  transform: scale(0.98); / Кнопка немного уменьшится при клике /
}

:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.

li:nth-child(odd) {
  background-color: gray; / Заливка каждого нечетного элемента списка /
}

:not() — исключает из выборки элементы, соответствующие указанному селектору.

div:not(.special) {
  color: green; / Применяется к каждому div, который не имеет класса special */
}

🚩Зачем нужны псевдоклассы? Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя. Ставь 👍 и забирай 📚 Базу знаний

Онлайн-магистратура с IT специальностями от Яндекса Совместно с ИТМО, МИФИ, МФТИ. Онлайн-магистратура с актуальными программами и гибким графиком обучения. Получите высокооплачиваемую IT профессию, официальный диплом и практические знания. Господдержка оплаты. Совмещение с работой! Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

🤔 Как строки кода преобразуются в сайт? 1. Запрос к серверу → браузер получает HTML. 2. Парсинг HTML → создается DOM-дерево. 3. Запрос CSS и JS → загружаются и исполняются стили и скрипты. 4. Создание CSSOM → объединение с DOM → рендер-дерево. 5. Рендеринг → вычисление позиций элементов. 6. Отрисовка → пиксели появляются на экране. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Когда подрядчик тележится, добавляйте его в Коллабу Битрикс24 Коллабы – платформа для эффективной работы с подрядчиками. Тут обсуждения превращаются в задачи, а видео созвон можно собрать одной кнопкой. Любой проект можно разложить по полочкам с понятным ТЗ и обозначенными сроками. Работайте в Битрикс24 и создавайте Коллабы с подрядчиками. Начать #реклама 16+ collabs.bitrix24.ru О рекламодателе