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

Почему важно указывать ширину и высоту для картинок ? Спросят с вероятностью 7% Указание ширины и высоты для изображений в HTML имеет несколько важных преимуществ, которые влияют на производительность, рендеринг и пользовательский опыт: 1️⃣Улучшение производительности и оптимизация рендеринга ✅Предотвращение перерисовок и переформатирования (reflows): Когда браузер загружает страницу, он сначала строит DOM (Document Object Model) и CSSOM (CSS Object Model). Если размеры изображений не указаны, браузеру приходится ждать, пока изображения загрузятся, чтобы узнать их размеры. Это может вызвать переформатирование страницы, когда элементы перемещаются, чтобы освободить место для изображений. Указание размеров заранее позволяет браузеру зарезервировать нужное пространство, избегая дополнительных перерисовок и улучшая производительность. 2️⃣Улучшение пользовательского опыта ✅Стабильная компоновка (layout stability): Когда размеры изображений указаны, браузер может зарезервировать пространство для каждого изображения до его загрузки. Это предотвращает смещение контента во время загрузки страницы, обеспечивая более плавный и предсказуемый пользовательский опыт. 3️⃣Быстрая загрузка страниц ✅Эффективное использование сетевых ресурсов: Знание точных размеров изображений позволяет браузеру более эффективно обрабатывать загрузку и отображение контента, уменьшая задержки и улучшая общую производительность страницы. 4️⃣Сокращение времени до первого отрисовки (First Contentful Paint, FCP) ✅Оптимизация рендеринга: Когда браузер знает размеры изображений, он может быстрее отрисовать контент страницы, даже если изображения еще не загружены. Это сокращает время до первого отрисовки (FCP), что является важным показателем производительности. Рассмотрим пример HTML-кода, в котором указаны размеры изображения:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Size Example</title>
  <style>
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Example Image</h1>
  <img src="image.jpg" width="600" height="400" alt="Example Image">
</body>
</html>

В этом примере: ✅Атрибуты width и height задают фиксированные размеры для изображения. Это позволяет браузеру зарезервировать нужное пространство до загрузки изображения. ✅CSS-правило max-width: 100%; height: auto; гарантирует, что изображение будет масштабироваться в зависимости от ширины контейнера, сохраняя пропорции. Указание ширины и высоты для изображений в HTML улучшает производительность и пользовательский опыт. Оно позволяет браузеру зарезервировать пространство для изображений, предотвращает переформатирование страницы и смещение контента, ускоряет рендеринг и снижает время до первого отрисовки. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

👩‍💻 Программирование теперь в телеграм! Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление: Обучение JavaScript с нуля Обучение Python с нуля Обучение Java с нуля Обучение HTML/CSS с нуля Обучение C/С++ с нуля Обучение С# с нуля Обучение SQL/GO/PHP с нуля Обучение Kotlin/Swift с нуля ⛓ Архив на 3489ГБ: Курсы, книги, шпаргалки, статьи, видео, ресурсы — всё собрано в одном месте: @roadmap_ready

Сообщество IT-специалистов в Telegram от Selectel. Канал крупнейшего независимого провайдера IT-инфраструктуры и облаков. Шесть причин подписаться на канал: - железные новости; - обзоры продуктов; - разборы кейсов; - актуальные IT-статьи; - анонсы митапов; - бесплатные курсы. Подписаться #реклама О рекламодателе

Откуда берется контекст функции ? Спросят с вероятностью 7% Контекст функции — это значение, которое доступно через ключевое слово this. Контекст функции определяется способом ее вызова, а не тем, где функция была определена. Вот основные способы, которыми определяется контекст функции: 1️⃣Глобальный контекст и контекст функций ✅Глобальный контекст: В глобальной области видимости this ссылается на глобальный объект. В браузере это объект window.

    console.log(this); // В браузере это будет window
  

✅Контекст функции: При обычном вызове функции this ссылается на глобальный объект (в строгом режиме — undefined).

    function showThis() {
    console.log(this);
  }

  showThis(); // В браузере это будет window (или undefined в строгом режиме)
  

2️⃣Контекст методов объекта Когда функция вызывается как метод объекта, this ссылается на объект, которому принадлежит метод.

const obj = {
  name: 'Alice',
  showThis: function() {
    console.log(this);
  }
};

obj.showThis(); // { name: 'Alice', showThis: [Function: showThis] }

3️⃣Конструкторы и классы При вызове функции-конструктора с ключевым словом new, this ссылается на новый созданный объект.

function Person(name) {
  this.name = name;
}

const alice = new Person('Alice');
console.log(alice.name); // Alice

4️⃣call, apply и bind Эти методы позволяют явно устанавливать контекст this при вызове функции. ✅call: вызывает функцию с указанным значением this и аргументами, переданными по отдельности.

    function showThis() {
    console.log(this);
  }

  const obj = { name: 'Alice' };
  showThis.call(obj); // { name: 'Alice' }
  

✅apply: вызывает функцию с указанным значением this и аргументами, переданными в виде массива.

showThis.apply(obj); // { name: 'Alice' }

✅bind: возвращает новую функцию, которая при вызове будет иметь указанный контекст this.

const boundShowThis = showThis.bind(obj);
  boundShowThis(); // { name: 'Alice' }

5️⃣Стрелочные функции Не имеют собственного контекста this. Вместо этого они захватывают this из окружающего лексического контекста.

const obj = {
  name: 'Alice',
  showThis: function() {
    const arrowFunc = () => console.log(this);
    arrowFunc();
  }
};

obj.showThis(); // { name: 'Alice' }

6️⃣Обработчики событий В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // <button> элемент
});

Контекст функции (this) определяется способом вызова функции. В глобальной области видимости this ссылается на глобальный объект. В методах объекта this ссылается на сам объект. В функциях-конструкторах this ссылается на новый созданный объект. Методы call, apply и bind позволяют явно задавать значение this. Стрелочные функции захватывают this из окружающего контекста. В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Обучаем Java-разработчиков оплата после выхода на работу В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты. Если задуматься, то все в выигрыше: — ты получаешь работу в Москве или Санкт-Петербурге с хорошей зарплатой, мы получаем процент за инвестиции в тебя; — в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше; — мы прокачиваем твои навыки еще 2 года после курса: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут; — мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов. Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку! Узнать больше #реклама 16+ kata.academy О рекламодателе

🌊  Водоворот знаний в Кодовороте 🤿 Погружайся в мир лучших видео уроков по программированию. Каждый день на канале выходит полезный контент. Кодируй своё будущее вместе с нами! ⛓ Подпишись

Такси для бизнеса. Яндекс Go Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go Узнать больше #реклама business.go.yandex О рекламодателе

Что такое репозиторий ? Спросят с вероятностью 3% Репозиторий в контексте разработки ПО — это хранилище, в котором сохраняется исходный код проекта и вся связанная с ним информация. Репозитории используются для управления версиями кода, совместной работы над проектами и отслеживания изменений. Репозитории могут находиться как локально на компьютере разработчика, так и удаленно на сервере или в облачном сервисе. Основные типы 1️⃣Локальные: ✅Хранятся на локальной машине разработчика. ✅Используются для разработки и тестирования кода до его отправки в удаленный репозиторий. 2️⃣Удаленные: ✅Хранятся на удаленных серверах или в облачных сервисах. ✅Обеспечивают совместную работу нескольких разработчиков, доступность и резервное копирование кода. ✅Примеры: GitHub, GitLab, Bitbucket. Основные функции 1️⃣Управление версиями: ✅Отслеживание всех изменений в коде с помощью системы контроля версий (например, Git). ✅Позволяет вернуться к любой предыдущей версии кода, сравнивать изменения и анализировать историю. 2️⃣Совместная работа: ✅Обеспечивает возможность совместной работы над проектом, слияния изменений от разных разработчиков и разрешения конфликтов. ✅Поддерживает рабочие процессы, такие как ветвление (branching) и слияние (merging). 3️⃣Резервное копирование и безопасность: ✅Хранение кода в удаленных репозиториях обеспечивает его сохранность и доступность. ✅Поддерживает механизмы контроля доступа для защиты кода от несанкционированного доступа. Основные команды для работы 1️⃣Создание репозитория: ✅Локальный репозиторий: git init ✅Клонирование удаленного репозитория: git clone <url> 2️⃣Отслеживание и фиксация изменений: ✅Добавление изменений в индекс: git add <file> ✅Фиксация изменений: git commit -m "Сообщение коммита" 3️⃣Работа с ветками: ✅Создание новой ветки: git branch <branch-name> ✅Переключение на другую ветку: git checkout <branch-name> ✅Создание и переключение на новую ветку: git checkout -b <branch-name> 4️⃣Слияние изменений: ✅Слияние ветки в текущую ветку: git merge <branch-name> 5️⃣Работа с удаленными репозиториями: ✅Добавление удаленного репозитория: git remote add origin <url> ✅Отправка изменений в удаленный репозиторий: git push origin <branch-name> ✅Получение изменений из удаленного репозитория: git pull origin <branch-name> Пример 1️⃣Создание локального репозитория:

      mkdir my-project
   cd my-project
   git init
   

2️⃣Добавление файла и фиксация изменений:

      echo "# My Project" > README.md
   git add README.md
   git commit -m "Initial commit"
   

3️⃣Подключение к удаленному репозиторию на GitHub:

      git remote add origin https://github.com/username/my-project.git
   git push -u origin master
   

4️⃣Создание новой ветки и работа в ней:

      git checkout -b new-feature
   echo "New feature" > feature.txt
   git add feature.txt
   git commit -m "Add new feature"
   git push origin new-feature
   

Репозиторий — это хранилище кода и связанных данных проекта, используемое для управления версиями и совместной работы. Он может быть локальным или удаленным. Позволяют отслеживать изменения, работать с ветками, сливать изменения и обеспечивать резервное копирование кода. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Получите диплом от НИТУ МИСИС в веб-разработке Яндекс Практикум и НИТУ МИСИС приглашают на онлайн-программу «Веб-разработчик» Полноценная учёба в онлайн-формате Зачёты, сессии, лекции и семинары с гибким графиком. На платформе Практикума Гибкая теория, автоматическая проверка заданий и встроенная YandexGPT. Преподаватели НИТУ МИСИС и наставники Яндекс Практикума Они будут проводить занятия и учить вас применять теорию на практике. Студенческий, льготы и диплом гособразца У вас будут все преимущества студента-очника. Доступ к инфраструктуре вуза — кампусам, библиотекам и мероприятиям. Оплатить учёбу можно разными способами: всю сумму сразу, по семестрам или с помощью госкредита — тогда ежемесячный платёж составит от 500 ₽, а государство погасит часть кредита за вас. Подать заявку #реклама 16+ practicum.yandex.ru О рекламодателе

👨‍💻 Чтобы стать более востребованным перцем в IT индустрии неплохо бы знать английский. Канал Hello Word в игровом стиле поможет улучшить твой English skill. 🤓У нас ты найдешь: 🟡 Тесты с пропуском слов 🟡 Мемы на английском 🟡 Полезные шпаргалки для изучения 😎 Расширяй свои навыки и покоряй начинай покорять западную индустрию. Испытай свои знания и попробуй пройти тест.

Реклама для бизнеса любого уровня в Яндекс Директе Создайте эффективную рекламную кампанию с алгоритмами Яндекс Директа 👌 Начните прямо сейчас ⚡ Зарегистрироваться #реклама direct.yandex.ru О рекламодателе

Какие функции есть в js ? Спросят с вероятностью 7% Существует несколько типов функций, каждая из которых имеет свои особенности и области применения. Вот основные виды функций: 1️⃣Функциональные выражения и объявленные функции Объявленные функции (Function Declaration) Объявленные с использованием ключевого слова function, идущего перед именем функции. Эти функции "всплывают" (hoisted), что означает, что они могут быть вызваны до их определения в коде.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

Функциональные выражения (Function Expression)

Не "всплывают" и не могут быть вызваны до их определения.
const greet = function(name) {
  returned 
};

console.log(greet('Bob')); // Hello, Bob!

2️⃣Стрелочные функции (Arrow Functions) Это сокращенный синтаксис для создания функций, введенный в ES6. Они не имеют собственного контекста this и не могут быть использованы в качестве методов или конструктора.

const greet = (name) => Hello, ${name}!;

console.log(greet('Charlie')); // Hello, Charlie!

3️⃣Анонимные функции Часто используются в качестве аргументов для других функций или для создания замыканий.

setTimeout(function() {
  console.log('This will run after 1 second');
}, 1000);

4️⃣Функции-конструкторы Для создания объектов. Они вызываются с ключевым словом new и обычно имеют заглавную букву в названии.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const alice = new Person('Alice', 30);
console.log(alice.name); // Alice

5️⃣Методы объекта

Являются свойствами объекта.

const person = {
  name: 'Alice',
  greet: function() {
    return Hello, my name is ${this.name};
  }
};

console.log(person.greet()); // Hello, my name is Alice

6️⃣Генераторы (Generators) Могут быть приостановлены и возобновлены в любой момент. Они объявляются с помощью function* и используют ключевое слово yield.

function* generatorFunction() {
  yield 'First';
  yield 'Second';
  yield 'Third';
}

const gen = generatorFunction();
console.log(gen.next().value); // First
console.log(gen.next().value); // Second
console.log(gen.next().value); // Third

7️⃣Асинхронные функции (Async/Await) Возвращают промис и позволяют использовать синтаксис await для упрощения работы с асинхронным кодом.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => console.log(data));

8️⃣Функции обратного вызова (Callbacks) Передаваемые в качестве аргументов в другие функции и вызываемые позже.

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000);
}

fetchData(function(data) {
  console.log(data); // { name: 'Alice' }
});

Есть несколько типов функций, включая объявленные функции, функциональные выражения, стрелочные функции, анонимные функции, функции-конструкторы, методы объекта, генераторы, асинхронные функции и функции обратного вызова. Каждый тип функций имеет свои особенности и области применения. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

ТОП-4 Курса по графическому дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

💸 Работа для IT'шников Выбери своё направление ⤵ 1. Frontend 2. Python 3. Java 4. Тестировщик QA 5. Data Science 6. DevOps 7. C# 8. С/C++ 9. Golang 10. PHP 11. Kotlin 12. Swift

Как расшифровывается css ? Спросят с вероятностью 7% CSS расшифровывается как Cascading Style Sheets, что в переводе означает "каскадные таблицы стилей". Давайте рассмотрим каждый элемент этого термина: 1️⃣Cascading (каскадные): Этот термин указывает на то, что стили применяются к элементам HTML в определенном порядке приоритетов. Когда стили конфликтуют (например, когда одно и то же свойство задано несколькими стилями), CSS использует каскадные правила для разрешения этих конфликтов. Эти правила включают: ✅Специфичность селекторов (различные типы селекторов имеют разный приоритет). ✅Порядок расположения в коде (последний стиль имеет больший приоритет). ✅Использование ключевого слова !important (приоритет выше всех обычных правил). 2️⃣Style (стили): Стили определяют, как должны выглядеть элементы HTML на веб-странице. Это включает в себя множество свойств, таких как цвета, шрифты, размеры, расположение, отступы и многие другие аспекты внешнего вида. 3️⃣Sheets (таблицы): CSS-правила обычно хранятся в файлах, которые называются таблицами стилей. Эти файлы могут быть внешними (подключенными к HTML-документу через элемент <link>), встроенными (внутри элемента <style> в самом HTML-документе) или инлайновыми (непосредственно в атрибутах стиля HTML-элементов). Вот пример CSS, который показывает использование каскадных таблиц стилей для стилизации HTML-документа:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Example</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .inline-style {
      color: red;
    }
  </style>
</head>
<body>
  <h1 class="heading inline-style">Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

В этом примере: ✅Внешний файл styles.css задает стили для body, h1 и элементов с классом .heading. ✅Встроенные стили в элементе <style> задают цвет текста для элементов с классом .inline-style. ✅Каскадные правила CSS определяют, что цвет текста элемента <h1> будет красным, так как инлайновые стили имеют наибольший приоритет. CSS расшифровывается как Cascading Style Sheets, что означает "каскадные таблицы стилей". Это язык, используемый для описания внешнего вида и форматирования HTML-документов, поддерживающий каскадные правила для разрешения конфликтов между стилями. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Работать и не уставать, достигать цели, но делать это в кайф - реально! Как научиться делать дела и не выгорать? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ▪️ Как научиться отключать мозг от работы и отдыхать? ▪️ Как совместить кучу рабочих задач и время с семьей? ▪️ Как справиться с прокрастинацией? ▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного.