Frontend Interview - собеседования по Javascript / Html / Css

Какими способами мы можем получить картинку с сервера? В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с 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";

👉 @frontendInterview

Как владельцы Макбуков в модной кофейне видят твой Lenovo ThinkPad 👉 @frontendInterview

Большая онлайн-конференция UserGate OpenConf ⚡ ИТ-конференция про защиту в открытую. Диалог между заказчиками, партнерами, экспертами и специалистами в сфере продуктов, технологий и услуг информационной безопасности. Зарегистрироваться #реклама openconf.usergate.com О рекламодателе

Интернет мельчает. К чему привели тенденции Web дизайна Открывая очередной сайт с компьютера, я вижу одну и ту же картину. На странице так много «воздуха» в виде отступов, что дышать просто невозможно, это просто перебор. Половина пространства не занята абсолютно ничем. И это на любом разрешении, выше мобилок / планшетов. Основной блок кажется сплюснутым по центру, сжатым. Контенту просто визуально тесно на странице, ощущается как будто уменьшили масштаб. Но поверьте, это обычный 100% масштаб, обычное разрешение (1920х1080 для ПК и 2048х1330 для ноутбука). 👉 @frontendInterview

🔒Устали от использования сложных библиотек для автосохранения данных в проектах? Пора использовать Vue.js и локальное хранилище! На открытом вебинаре 14 апреля в 20:00 мск мы покажем, как работать с локальным хранилищем, включая LocalStorage, SessionStorage и базовые операции с IndexedDB. Вы увидите, как данные остаются, даже если вы перезагрузите страницу, и узнаете, как легко работать с ними через Composition API. Научитесь добавлять автосохранение в реальный проект без лишнего кода и сторонних инструментов! ⚡️Зарегистрируйтесь и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/3tv4/?erid=2W5zFGKafuz  Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🔒Устали от использования сложных библиотек для автосохранения данных в проектах? Пора использовать Vue.js и локальное хранилище! На открытом вебинаре 14 апреля в 20:00 мск мы покажем, как работать с локальным хранилищем, включая LocalStorage, SessionStorage и базовые операции с IndexedDB. Вы увидите, как данные остаются, даже если вы перезагрузите страницу, и узнаете, как легко работать с ними через Composition API. Научитесь добавлять автосохранение в реальный проект без лишнего кода и сторонних инструментов! ⚡️Зарегистрируйтесь и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/3tv4/?erid=2W5zFGKafuz  Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

В канале Selectel Newsfeed новые бесплатные курсы! Наши бесплатные курсы для специалистов всех уровней помогут разобраться в темах быстро, структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel и развивайте новые навыки📚 Смотреть #реклама 16+ О рекламодателе

Правильно ли заполнено поле ввода с цифрами? Проверяем прямо в браузере. Поля ввода с типами date, month, week, time, datetime-local, number и range могут иметь атрибуты min и max. Эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле. В зависимости от того, попадает ли введённое значение в диапазон, будут применяться стили для псевдоклассов :in-range и :out-of-range. - :in-range для полей, в которых введённое значение попадает в диапазон от min до max; - :out-of-range для полей, в которых введённое значение не попадает в диапазон от min до max. Пример

<input class="with-range" type="number" min="10" max="20" step="1">

.with-range {
  border: 1px solid black;
}

.with-range:in-range {
  border-color: green;
  background-color: rgb(0 255 0 / 20%);
}

.with-range:out-of-range {
  border-color: red;
  background-color: rgb(255 0 0 / 20%);
}

👉 @frontendInterview

👉 @frontendInterview

🛡Хотите строить защищенные и масштабируемые микросервисы с помощью ASP.NET Core? Присоединяйтесь к открытому уроку 17 апреля в 20:00 МСК и узнайте, как создать безопасные микросервисы с использованием JWT, OpenID Connect, и .NET Aspire. Мы разберем, как защитить API, оптимизировать производительность и внедрить современные подходы к аутентификации и авторизации. ❗Что разберем: - Принципы и преимущества архитектуры микросервисов. - Защиту API с использованием JWT и OpenID Connect. - Инструменты .NET Aspire для оркестрации сервисов и настройки окружения. - Реальные шаги по созданию микросервисов, настройке безопасности и работе с Docker. 🚀 Урок пройдет в преддверии старта курса «C# ASP.NET Core разработчик». 🎁 Все участники получат скидку на обучение по промокоду: ASP_NET_04. Присоединяйтесь: https://vk.cc/cKBIfk Промокод действителен до 28.04.2025 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjdFuGBe

ИИ + Тайм-менеджмент = Будущее продуктивности Хотите знать, как ИИ может оптимизировать работу вашей команды? В Таймлист ИИ мы делимся: ⚡ Свежими новостями из мира ИИ для бизнеса ⚡ Лайфхаками по тайм-менеджменту для команд 💻 Обновлениями и фичами Таймлист ИИ Управляйте временем с ИИ и увеличивайте эффективность! Подписаться #реклама 16+ tgryx.ru О рекламодателе

Является ли drag and drop частью спецификации? Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек. Как работает Drag and Drop API? В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.

<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>

<script>
  const dragItem = document.getElementById("drag-item");
  const dropZone = document.getElementById("drop-zone");

  dragItem.addEventListener("dragstart", (event) => {
    event.dataTransfer.setData("text/plain", "Данные элемента");
  });

  dropZone.addEventListener("dragover", (event) => {
    event.preventDefault(); // Нужно, чтобы разрешить сброс
  });

  dropZone.addEventListener("drop", (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    alert("Элемент сброшен: " + data);
  });
</script>

Какие события есть в Drag and Drop? Основные события: dragstart — когда начали тянуть элемент. drag — когда элемент двигается (срабатывает много раз). dragenter — когда курсор заходит в зону сброса. dragover — когда элемент находится над зоной (нужно preventDefault()). dragleave — когда курсор покидает зону сброса. drop — когда элемент отпущен в зоне сброса. dragend — когда перетаскивание завершено (даже если не сбросили). Где используется Drag and Drop? - Перетаскивание файлов в <input type="file"> (например, загрузка изображений). - Канбан-доски, как в Trello. - Онлайн-редакторы, как Figma. - Игры, где можно перемещать предметы. Можно ли сделать Drag and Drop без HTML5 API? Да, можно использовать другие методы: Через события мыши (mousedown, mousemove, mouseup). Через CSS position: absolute и transform. Через JS-библиотеки (Sortable.js, React DnD, Draggable.js). Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend. 👉 @frontendInterview

Partial Word Searching Создайте метод, который будет искать в массиве строк все строки, содержащие данную подстроку, игнорируя заглавные буквы. Затем верните массив найденных строк. Метод принимает два параметра: строку запроса и массив строк для поиска, и возвращает массив. Если строка не содержится ни в одной из строк массива, метод возвращает массив, содержащий одну строку: «Empty». Пример:

 wordSearch("me",["home", "milk", "Mercury", "fish"]) => ["home", "Mercury"]

👉 @frontendInterview

Simplified JavaScript for Very Important Programmers: The Fast Track to Mastering Essential JavaScript Concepts Это практическое руководство для всех, кто хочет освоить основные разделы JavaScript, не тратя время на запутанные объяснения и не пытаясь понять смысл неоднозначных слов. Книга наполнена реальными примерами и четким, лаконичным языком, который разбивает технические концепции на легкие для понимания фрагменты. 👉 @frontendInterview

Стать бэкендером в Яндексе за несколько дней 12–17 апреля устраиваем Week Offer Backend: за несколько дней можно пройти технические секции и попасть в Яндекс. Для этого нужно зарегистрироваться и решить несколько задач в Контесте. Ищем классных бэкенд-разработчиков с опытом работы от 3 лет на C++, Python, Java/Kotlin или Go, готовых работать в офисном или гибридном режиме в России. Вы сможете выбрать одну из команд: Яндекс Пэй, Яндекс ID, Яндекс Плюс, Яндекс Сплит, Яндекс Сейвы, Яндекс 360. Можно пообщаться с нанимающими менеджерами и выбрать самый интересный проект. Если всё пройдёт хорошо, сразу же получите офер. Зарегистрироваться #реклама yandex.ru О рекламодателе

​Что такое интерполяция? Это метод вставки значений или выражений в строки. Она позволяет динамически встраивать переменные и выражения в текстовые строки, делая их более гибкими и удобными для использования. Например, интерполяция достигается с помощью шаблонных строк. Почему это нужно? Упрощает работу с текстом, который должен включать значения переменных или результаты вычислений. Без интерполяции, программистам пришлось бы вручную конкатенировать строки и переменные, что делает код менее читаемым и более сложным в поддержке. Как это используется? Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции ${}. Пример кода:

const name = 'Иван';
const age = 30;
const greeting = `Привет, меня зовут ${name} и мне ${age} лет.`;

console.log(greeting); // Вывод: Привет, меня зовут Иван и мне 30 лет.

В данном примере переменные name и age интерполируются в строку greeting. Как это работает и почему это удобно? - Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей. - Удобство: Позволяет легко включать значения переменных и результаты выражений в строку. - Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк. Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:

const a = 5;
const b = 10;
const result = Сумма ${a} и ${b} равна ${a + b}.;

console.log(result); // Вывод: Сумма 5 и 10 равна 15.

👉 @frontendInterview

Открыт новый навык. Применяем с понедельника. 👉 @frontendInterview