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

Перец на канале «Записки необычного препода» делает невозможное! А именно — встраивает мышление на английском взрослым людям. Как обычно пытаются научить «думать на языке»? Методом «бери больше, кидай дальше». Слушайте песни, смотрите фильмы, читайте книги в оригинале, и оно само как-нибудь запустится. Тут всё совсем не так. Тут происходит встраивание языка на кардинально других принципах. В результате вы ощущаете грамматику и слова «изнутри». Так, как бы вы их ощущали, будь вы носителем английского языка. Почитать подробнее про эту технологию можно тут. Есть конкретный механизм мышления. Он состоит из визуального слоя, слоя смыслов и слоя слов. Механизм разбивается на элементы. Каждый элемент тренируется отдельно. Оттренированные элементы стыкуются друг с другом с помощью специальных упражнений. Здесь: - Пошаговая технология; - Разбор механик мышления на языке; - Простота — любое сложное упражнение должно быть разбито на простые. - Измеримость — все упражнения тренируются до норматива (как правило в секундах). Норматив гарантирует освоение упражнения на уровне навыка. - Сумма упражнений неизбежно приводит к мышлению на языке. Так же, как правильно собранные вместе детали создают автомобиль. Вот, например: - как найти английские артикли в русском; - как освоить что угодно в 10 раз быстрее; - как взломать английскую грамматику. Подписывайся, чтобы узнать больше.

🤔 В чём разница между классической функцией и стрелочной? Классические функции создают собственное значение `this`, зависящее от того, как они вызываются (например, контекст объекта или глобальный объект). Стрелочные функции не имеют собственного `this` и используют значение `this` из окружения, в котором они были определены. Также у стрелочных функций нет доступа к объекту `arguments` и их нельзя использовать в качестве конструктора. Стрелочные функции чаще всего используются для упрощённого написания функций с замыканиями. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие бывают значение у background-size? Свойство CSS background-size определяет размеры фонового изображения элемента. Это свойство позволяет контролировать, как фоновое изображение масштабируется и располагается внутри элемента. 🟠auto Исходный размер фонового изображения. Это значение по умолчанию.

background-size: auto;  

🟠cover Масштабирует фоновое изображение так, чтобы оно полностью покрывало контейнер. Изображение будет обрезано, чтобы сохранить свои пропорции.

background-size: cover; 

🟠contain Масштабирует фоновое изображение так, чтобы оно полностью помещалось внутри контейнера, сохраняя свои пропорции. Изображение будет уменьшено или увеличено, чтобы вписаться в контейнер без обрезки.

background-size: contain;   

🟠Ширина и высота в пикселях Определяет конкретные размеры изображения в пикселях.

background-size: 100px 50px;   

🟠Процентные значения Определяет размер изображения в процентах от размера контейнера.

background-size: 50% 25%;   

🟠Ширина Устанавливает ширину изображения, высота будет автоматически установлена для сохранения пропорций.

background-size: 100px;   

🟠Краткий синтаксис Устанавливает ширину и высоту одновременно.

background-size: width height;   

🚩Примеры использования Масштабирование изображения с cover

.element {
    background-image: url('example.jpg');
    background-size: cover;
}

Масштабирование изображения с contain

.element {
    background-image: url('example.jpg');
    background-size: contain;
}

Конкретные размеры в пикселях

.element {
    background-image: url('example.jpg');
    background-size: 100px 50px;
}

Процентные значения

.element {
    background-image: url('example.jpg');
    background-size: 50% 50%;
}

Одно значение (ширина)

.element {
    background-image: url('example.jpg');
    background-size: 100px;
}

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

Программист — лекарство от больных тимлидов, тупых багов и тех самых митов в 10 утра ☠️ Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе. Идеально зачиллить вечерком и скинуть друзьям: @progeri

Программист — лекарство от больных тимлидов, тупых багов и тех самых митов в 10 утра ☠️ Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе. Идеально зачиллить вечерком и скинуть друзьям: @progeri

🤔Различие методов call apply bind? Методы `call` и `apply` выполняют функцию с заданным контекстом `this`, но `call` принимает аргументы по отдельности, а `apply` — в виде массива. Метод `bind` возвращает новую функцию с предустановленным значением `this`, которую можно вызвать позже. В отличие от `call` и `apply`, `bind` не вызывает функцию немедленно. `bind` часто используется для создания копий функций с привязкой контекста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как убрать маркер у списка? Чтобы убрать маркер у списка, используйте свойство CSS list-style-type со значением none. Это свойство применяется к элементам списка <ul> (ненумерованный список) или <ol> (нумерованный список) и убирает маркеры (буллеты) у элементов списка <li>. Пример использования HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Список без маркеров</title>
    <style>
        .no-marker {
            list-style-type: none; /* Убирает маркеры */
            padding: 0; /* Убирает отступы */
            margin: 0; /* Убирает внешние отступы */
        }
    </style>
</head>
<body>
    <ul class="no-marker">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</body>
</html>

Пример использования CSS

.no-marker {
    list-style-type: none; /* Убирает маркеры */
    padding: 0; /* Убирает отступы */
    margin: 0; /* Убирает внешние отступы */
}

🟠list-style-type: none; Убирает маркеры у элементов списка <li>. 🟠padding: 0; Убирает внутренние отступы у списка. Это полезно, поскольку некоторые браузеры добавляют отступы по умолчанию. 🟠margin: 0; Убирает внешние отступы у списка. Ставь 👍 и забирай 📚 Базу знаний

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе. 2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!

🤔 Какие способы изоляции стилей ты знаешь? Изоляция стилей может быть достигнута с помощью CSS-модулей, которые создают уникальные имена классов для предотвращения конфликта стилей. Shadow DOM изолирует стили внутри веб-компонентов, не позволяя им влиять на внешний код. Также можно использовать атрибуты, такие как `scoped` для стилей внутри Vue.js или инкапсуляцию стилей с помощью `@import` и `:host` в веб-компонентах. Все эти способы помогают избежать пересечения стилей и гарантируют их изоляцию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 За что отвечает justify-content и align-tiems у flexbox контейнера? В CSS Flexbox, свойства justify-content и align-items используются для управления выравниванием и распределением элементов внутри flex-контейнера. 🚩`justify-content` Свойство justify-content определяет, как flex-элементы должны быть распределены вдоль основной оси (main axis) контейнера. Основная ось по умолчанию — это горизонтальная ось для flex-direction: row и вертикальная ось для flex-direction: column. 🟠flex-start Элементы прижаты к началу контейнера.

.container {
    display: flex;
    justify-content: flex-start;
}   

🟠flex-end Элементы прижаты к концу контейнера.

.container {
    display: flex;
    justify-content: flex-end;
}   

🟠center Элементы выровнены по центру контейнера.

.container {
    display: flex;
    justify-content: center;
}   

🟠space-between Элементы равномерно распределены, первый элемент прижат к началу, последний элемент — к концу контейнера.

.container {
    display: flex;
    justify-content: space-between;
}   

🟠space-around Элементы равномерно распределены с равным отступом вокруг них.

.container {
    display: flex;
    justify-content: space-around;
}   

🟠space-evenly Элементы равномерно распределены с равными отступами между ними и краями контейнера.

.container {
    display: flex;
    justify-content: space-evenly;
}   

🚩`align-items` Свойство align-items определяет, как flex-элементы должны быть выровнены вдоль поперечной оси (cross axis) контейнера. Поперечная ось перпендикулярна основной оси: вертикальная ось для flex-direction: row и горизонтальная ось для flex-direction: column. 🟠flex-start Элементы прижаты к началу поперечной оси контейнера.

.container {
    display: flex;
    align-items: flex-start;
}   

🟠flex-end Элементы прижаты к концу поперечной оси контейнера.

.container {
    display: flex;
    align-items: flex-end;
}   

🟠center Элементы выровнены по центру поперечной оси контейнера.

.container {
    display: flex;
    align-items: center;
}   

🟠baseline Элементы выровнены по их базовой линии текста.

.container {
    display: flex;
    align-items: baseline;
}   

🟠stretch Элементы растянуты, чтобы заполнить контейнер вдоль поперечной оси (по умолчанию).

.container {
    display: flex;
    align-items: stretch;
}   

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

🤔 В чем разница == и ===? == сравнивает значения с приведением типов, что может приводить к неожиданным результатам, тогда как === сравнивает как значения, так и типы данных. Это означает, что === является более строгим оператором и не выполняет автоматическое преобразование типов. Например, 1 == '1' вернёт true, а 1 === '1' — false. Использование === более предпочтительно для избежания ошибок. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие виды инпутов бывают? HTML предоставляет множество типов <input> элементов, которые можно использовать для различных целей в веб-формах. Каждый тип <input> элемента определяет, какие данные могут быть введены пользователем и как эти данные будут отображаться в браузере. 🚩Основные типы: 🟠Текстовые инпуты: Однострочное текстовое поле для ввода обычного текста.

<input type="text" name="username">  

Однострочное текстовое поле для ввода пароля, где введенные символы скрыты.

<input type="password" name="password">   

Поле для ввода адреса электронной почты. Проверяет правильность формата введенного значения.

<input type="email" name="email">   

Поле для ввода поискового запроса.

<input type="search" name="search">  

Поле для ввода телефонного номера.

<input type="tel" name="phone">   

Поле для ввода URL-адреса. Проверяет правильность формата введенного значения.

<input type="url" name="website">   

🟠Числовые инпуты: Поле для ввода чисел. Может включать стрелки для увеличения или уменьшения значения.

<input type="number" name="quantity" min="1" max="10">   

Ползунок для выбора значения из заданного диапазона.

<input type="range" name="volume" min="0" max="100"> 

🟠Дата и время: Поле для выбора даты.

<input type="date" name="birthday">   

Поле для выбора даты и времени (без часового пояса).

<input type="datetime-local" name="meeting-time">   

Поле для выбора месяца и года.

<input type="month" name="expiry">   

Поле для выбора недели и года.

<input type="week" name="week">   

Поле для выбора времени.

<input type="time" name="alarm">   

🟠Выбор файлов и цвета: Поле для загрузки файлов с компьютера.

<input type="file" name="resume">

Поле для выбора цвета с помощью цветовой палитры.

<input type="color" name="favcolor">   

🟠Интерактивные элементы: Флажок для выбора/отмены выбора опции.

<input type="checkbox" name="subscribe" value="newsletter">  

Радиокнопка для выбора одного значения из группы.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female   

Кнопка для выполнения действия.

<input type="button" value="Click me">   

Кнопка для отправки формы на сервер.

<input type="submit" value="Submit">   

Кнопка для сброса формы до исходных значений.

<input type="reset" value="Reset">

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

🤔 Чем var отличается от const? Переменные, объявленные через var, могут быть переназначены, тогда как const блокирует возможность переназначения после инициализации. Также, const требует обязательной инициализации при объявлении. Var имеет функциональную область видимости, в то время как const ограничен блочной областью видимости. Const используется для переменных, значения которых не должны изменяться. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Как изменить направление оси flexbox контейнера? Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов. 🚩Возможных значения flex-direction 🟠row: Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию. 🟠row-reverse: Основная ось — горизонтальная, элементы располагаются справа налево. 🟠column: Основная ось — вертикальная, элементы располагаются сверху вниз. 🟠column-reverse: Основная ось — вертикальная, элементы располагаются снизу вверх. 🚩Примеры использования: Горизонтальное направление (слева направо):

.container {
    display: flex;
    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}

Горизонтальное направление (справа налево):

.container {
    display: flex;
    flex-direction: row-reverse;
}

Вертикальное направление (сверху вниз):

.container {
    display: flex;
    flex-direction: column;
}

Вертикальное направление (снизу вверх):

.container {
    display: flex;
    flex-direction: column-reverse;
}

Пример HTML и CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
            border: 1px solid #000;
            height: 200px;
        }
        .item {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

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

Привет! Хочешь узнать, как инди-разработчик создал свою игровую студию с нуля и привлёк в неё $1,5 миллиона инвестиций? 🚀 «Будни Фаундера» — это канал, где Никита Покручин, предприниматель и основатель LEVEL 26 GAMES, делится своим реальным опытом создания успешного стартапа в игровой индустрии. Что ты найдёшь в канале: - 🔥 Реальные кейсы и инсайты из жизни фаундера, который прошёл путь от инди-разработчика до владельца студии стоимостью $5 млн. - 🎯 Практические советы по привлечению инвестиций: как подготовиться, где искать инвесторов и как успешно провести переговоры. - ⚠️ Разбор ошибок и уроков, которые помогут тебе избежать типичных проблем при создании стартапа. 📌 В закрепе канала тебя ждёт статья 10 ключевых уроков из моего пути к привлечению $1,5 млн инвестиций. Почему стоит подписаться на «Будни Фаундера»: ➡️ Никита создал студию с нуля, а сейчас она оценивается в $5 миллионов, включает команду из 15 талантливых специалистов, а в их игру ежедневно играют десятки тысяч игроков ➡️ Три раза привлекал в свои проекты инвестиции на общую сумму $1,5 млн и готов поделиться практическими советами. ➡️ В канале ты узнаешь, как реально запускаются стартапы, как привлекается финансирование и как избежать типичных ошибок фаундеров. Если ты: ✅ Думаешь о том, чтобы запустить свой стартап ✅ Хочешь узнать, как выглядит управление стартапом и его развитием изнутри ✅ Стремишься научиться привлекать инвестиции и выстраивать отношения с инвесторами ...то этот канал для тебя! 👉 Подписывайся на «Будни Фаундера» сейчас и забирай оттуда статью "10 ключевых уроков из моего пути к привлечению $1,5 млн инвестиций". Так сказать инсайты из первых рук! [ПОДПИСАТЬСЯ НА КАНАЛ]

🤔 Чем let отличается от var? Переменные, объявленные через let, имеют блочную область видимости, тогда как var — функциональную область видимости. Это значит, что let не доступен за пределами блока, в котором объявлен, а var доступен в пределах функции. Также, переменные, объявленные через let, не подвержены всплытию (hoisting) так же, как var. Let считается более безопасным для использования в современных проектах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем придумали async/await? Ключевой целью введения async/await в JavaScript было упростить написание и чтение асинхронного кода, сделать его более линейным и похожим на синхронный. 🟠Улучшение читаемости кода Асинхронный код, написанный с использованием коллбеков или промисов, может быть трудным для чтения и понимания, особенно когда имеется несколько вложенных асинхронных операций. async/await делает асинхронный код более линейным, что упрощает его понимание. Пример с промисами:

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("some data");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

Пример с async/await:

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("some data");
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

main();

🟠Избегание "ада коллбеков" Когда асинхронные операции вложены друг в друга, код становится трудным для чтения и сопровождения. Это называется "адом коллбеков" (callback hell). async/await позволяет писать асинхронный код последовательно, без вложенности. Пример с промисами:

getData((data) => {
  processData(data, (processedData) => {
    saveData(processedData, (result) => {
      console.log(result);
    });
  });
});

Пример с async/await:

async function main() {
  try {
    const data = await getData();
    const processedData = await processData(data);
    const result = await saveData(processedData);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

🟠Снижение вероятности ошибок Когда используется async/await, ошибки могут быть обработаны с использованием привычного try/catch блока, что снижает вероятность пропуска ошибок. Пример с промисами:

fetchData().then((data) => {
  return processData(data);
}).then((processedData) => {
  return saveData(processedData);
}).catch((error) => {
  console.error(error);
});

Пример с async/await:

async function main() {
  try {
    const data = await fetchData();
    const processedData = await processData(data);
    const result = await saveData(processedData);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

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

IT Community Day в Санкт-Петербурге прошёл идеально! 👨‍💻 Сотни IТ-специалистов встретились, чтобы послушать доклады топовых спикеров, прокачать hard и soft skills, познакомиться, повеселиться на афтерпати, и главное — стать частью крупнейшего IТ-комьюнити! Завидуем тем, кто смог попасть на это мероприятие. А остальным советуем не расстраиваться: совсем скоро состоятся IT Community Day в: ✔️ В Казани 12 октября научимся управлять большими данными, укрощать искусственный интеллект, создавать успешное резюме и находить подход к карьере. ✔️ И в Екатеринбурге 19 октября поговорим об интеграции LLM в приложение, методологии API-first и комбинации личного и профессионального развития. Успейте зарегистрироваться! 💚 👉 Казань, 12 октября 👉 Екатеринбург, 19 октября

🤔 Что такое virtual dom? Virtual DOM — это легковесное представление реального DOM, которое используется для оптимизации обновлений пользовательского интерфейса. При изменении состояния приложения, виртуальный DOM обновляется сначала, после чего вычисляются минимальные изменения для реального DOM. Это позволяет сократить количество операций с реальным DOM, которые могут быть затратными. Virtual DOM широко используется в библиотеках, таких как React. Ставь 👍 и забирай 📚 Базу знаний