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

Гайд «Как собственнику управлять отделом маркетинга?» Собственник бизнеса — это не тот, кто занимается всем, от стратегических решений до маркетинга. Это человек, который создает систему, где каждый элемент работает как одно целое. Маркетолог — это специалист, который погружён в данные, анализ, тестирование гипотез и построение стратегии. Считаете, что можно совмещать это с управлением компанией? Ошибка. Собственник должен направлять бизнес, а не тратить время на то, что могут сделать другие, лучше и эффективнее. Наш гайд — инструкция, как выстроить отдел маркетинга, который будет работать автономно, результативно, а главное, без участия собственника. Это шаг к построению бизнеса, который работает слаженно, как система, а не как набор отдельных задач. Забирайте! Скачать #реклама 16+ cmonster.io О рекламодателе

🤔 Как сделать тень падающую от блока? Используется свойство CSS box-shadow. Это свойство позволяет добавлять тени к элементам, создавая эффект объема и глубины.

.shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

🚩Объяснение Основной синтаксис

box-shadow: [смещение по горизонтали] [смещение по вертикали] [радиус размытия] [радиус растяжения] [цвет];   

🟠Параметры Смещение по горизонтали (x-offset): Определяет смещение тени по горизонтали. Положительное значение сдвигает тень вправо, отрицательное — влево. Смещение по вертикали (y-offset): Определяет смещение тени по вертикали. Положительное значение сдвигает тень вниз, отрицательное — вверх. Радиус размытия (blur-radius): Определяет, насколько размытой будет тень. Большее значение создаст более размытые края. Радиус растяжения (spread-radius): Определяет, насколько тень будет увеличена или уменьшена. Положительное значение увеличивает размер тени, отрицательное — уменьшает. Цвет (color): Определяет цвет тени. Обычно используется полупрозрачный цвет, чтобы тень выглядела естественно. 🚩Пример с разными параметрами

.shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    /* Пример тени с разными параметрами */
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
}

🚩С множественными тенями Свойство box-shadow также поддерживает добавление нескольких теней к одному элементу. Тени разделяются запятыми.

.multi-shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
                -5px -5px 10px rgba(0, 0, 0, 0.2);
}

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

🤔 E.preventDefault() и E.stopPropagation(), для чего нужны? e.preventDefault() предотвращает стандартное поведение элемента (например, отправку формы при нажатии на кнопку). e.stopPropagation() останавливает дальнейшую передачу события по цепочке DOM, предотвращая его обработку родительскими элементами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

9 продуктов для работы с данными от СберТеха Приглашаем в Телеграм-канал Data Platform V, где рассказываем о решениях для работы с данными от СберТеха и не только. Что вас ждет: ⚡Знакомство с российскими СУБД и другими продуктами для работы с данными ⚡Последние обновления и улучшения (узнаете в числе первых!) ⚡Кейсы успешного внедрения и использования (реальные примеры с подробным разбором) ⚡Полезные статьи, новости и тренды в сфере разработки СУБД ⚡Приглашения на мероприятия с участием экспертов Хотите разобраться лучше в инструментах для работы с данными и выбрать то, что принесет пользу вашему бизнесу? Присоединяйтесь! Подписаться #реклама О рекламодателе

🤔 Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице? Это свойство называется visibility. Это свойство может принимать несколько значений, но основными для скрытия элемента являются visible и hidden.

.hidden-element {
    visibility: hidden;
}

🟠visible По умолчанию, элементы имеют значение visibility: visible;, что означает, что они видимы на странице. 🟠hidden Когда элементу назначается значение visibility: hidden;, он становится невидимым, но продолжает занимать то же пространство в макете страницы, что и когда он был видимым. В этом примере, второй <div> с классом hidden-element скрыт, но продолжает занимать место на странице. Третий <div> расположен после него, как если бы скрытый элемент был видимым.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-element {
            visibility: hidden;
        }
        .visible-element {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="visible-element">Этот элемент видим.</div>
    <div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
    <div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>

🚩Зачем это нужно? 🟠Сохранение макета Когда важно сохранить исходный макет и расположение элементов. 🟠Динамическое управление видимостью Когда требуется временно скрыть элемент и затем снова сделать его видимым, не изменяя при этом расположение других элементов на странице. 🚩Альтернативы 🟠display: none; Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место. 🟠opacity: 0; Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое псевдоклассы? Псевдоклассы — это специальные ключевые слова в CSS, которые позволяют применять стили к элементам в определённых состояниях или на основе их позиции в документе. Например, `:hover` применяется к элементу, когда на него наведен курсор, а `:nth-child()` используется для стилизации конкретных элементов в последовательности. Они расширяют возможности CSS, добавляя динамическую стилизацию без использования JavaScript. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 С каким селектором можно добавлять стили на каждый элемент страницы? Чтобы добавить стили на каждый элемент страницы, можно использовать универсальный селектор *. Этот селектор выбирает все элементы в документе. 🚩Пример использования

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

🚩Объяснение 🟠Выбор всех элементов Универсальный селектор * выбирает все элементы в DOM (Document Object Model) структуре. Это включает в себя все теги HTML, такие как <div>, <p>, <span>, <a>, и так далее. 🟠Сброс стилей Пример кода выше сбрасывает отступы (margin) и внутренние отступы (padding) всех элементов на странице до нуля. Это часто делается для того, чтобы избежать неожиданных отступов, которые могут быть заданы по умолчанию браузером. Также устанавливается box-sizing: border-box, что изменяет модель коробки элемента, позволяя лучше контролировать размеры элементов при добавлении отступов и границ. 🟠Глобальное применение Использование универсального селектора полезно, когда нужно задать базовые стили для всего документа. Например, это может быть полезно в начале проекта для создания единообразного внешнего вида всех элементов. 🚩Минус Хотя универсальный селектор может быть полезным, его использование следует ограничивать, поскольку он может влиять на производительность страницы. Применение стилей ко всем элементам может привести к увеличению времени обработки стилей браузером, особенно на сложных страницах с большим количеством элементов. Ставь 👍 и забирай 📚 Базу знаний

🤔 Разница между margin и padding? Margin — это внешнее пространство между элементом и его соседями, а padding — внутреннее пространство между содержимым элемента и его границей. Margin влияет на положение элемента, а padding на размер его внутренней области. Оба свойства помогают управлять расстояниями в дизайне. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 Какие отличия между новым и старым js? JavaScript, как язык программирования, претерпел значительные изменения с момента своего создания. Основные изменения и улучшения в языке были введены с обновлениями спецификации ECMAScript (ES). Давайте рассмотрим ключевые отличия между "старым" JavaScript (ES5) и "новым" JavaScript (ES6 и более поздние версии): 🚩Основные отличия между ES5 и ES6+ (ES2015+) 🟠Объявление переменных: `var` vs `let` и `const` ES5: Объявление переменных с помощью var. Переменные, объявленные с var, имеют функциональную область видимости (function scope) и подлежат хостингу.

var x = 10;
if (true) {
 var x = 20;
 console.log(x); // 20
}
console.log(x); // 20   

ES6+: Объявление переменных с помощью let и const. Переменные, объявленные с let и const, имеют блочную область видимости (block scope) и не подлежат хостингу в том виде, как var.

let y = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(y); // 10

const z = 30;
// z = 40; // Ошибка: Assignment to constant variable.

🟠Стрелочные функции ES5: Определение функций с использованием ключевого слова function.

var add = function(a, b) {
  return a + b;
};   

ES6+: Стрелочные функции, которые предоставляют более краткий синтаксис и не имеют собственного значения this.

const add = (a, b) => a + b;   

🟠Шаблонные строки ES5: Конкатенация строк с использованием оператора +.

var name = 'Alice';
var greeting = 'Hello, ' + name + '!';   

ES6+: Использование шаблонных строк с обратными кавычками (`` ` ``) и интерполяцией.

const name = 'Alice';
const greeting = `Hello, ${name}!`;   

🟠Деструктуризация ES5: Извлечение значений из массивов и объектов с использованием точечной нотации.

var arr = [1, 2, 3];
var first = arr[0];
var second = arr[1];

var obj = {a: 1, b: 2};
var a = obj.a;
var b = obj.b;   

ES6+: Деструктуризация массивов и объектов.

const [first, second] = [1, 2, 3];
const {a, b} = {a: 1, b: 2};   

🟠Промисы ES5: Обработка асинхронных операций с использованием колбэков.

function fetchData(callback) {
setTimeout(function() {
callback('data');
}, 1000);
}

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

ES6+: Введение промисов для более удобной работы с асинхронными операциями.

const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
};

fetchData().then(data => {
console.log(data); // 'data'
});

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

🤔 Что такое inline стили, и какой они имеют приоритет? Инлайн-стили — это CSS-правила, прописанные непосредственно в HTML-элементе через атрибут style. Они имеют более высокий приоритет, чем стили из таблиц стилей или встроенные теги <style>, но уступают !important. Использование инлайн-стилей снижает переиспользуемость и усложняет поддержку. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Что такое хостинг js? Это механизм, при котором объявления переменных и функций поднимаются (hoisted) в верхнюю часть своей области видимости перед выполнением кода. Это означает, что переменные и функции могут быть использованы до того, как они были фактически объявлены в коде. Однако важно понимать, что хостинг поднимает только объявления, а не инициализации. 🟠Хостинг переменных Переменные, объявленные с помощью var, поднимаются в начало своей функции или глобальной области видимости. При этом они инициализируются значением undefined.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10

🟠Хостинг с использованием let и const Переменные, объявленные с помощью let и const, также поднимаются, но они не инициализируются. Попытка доступа к ним до объявления приведет к ошибке ReferenceError из-за временной мертвой зоны (Temporal Dead Zone, TDZ).

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

🟠Хостинг функций Функции, объявленные с помощью Function Declaration, поднимаются полностью, включая тело функции. Это позволяет вызывать функции до их фактического объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // 5

🟠Хостинг функциональных выражений Функции, объявленные с помощью Function Expression, поднимаются как обычные переменные. То есть их объявления поднимаются, но сами функции остаются неинициализированными до выполнения строки, где они определены.

console.log(subtract); // undefined
console.log(subtract(5, 3)); // TypeError: subtract is not a function

var subtract = function(a, b) {
  return a - b;
};

console.log(subtract(5, 3)); // 2

🚩Важные аспекты хостинга 🟠Понимание и использование хостинга Хостинг позволяет писать код, который может использовать функции и переменные до их фактического объявления, что может быть полезно в некоторых случаях. Однако злоупотребление этим механизмом может привести к путанице и трудноуловимым ошибкам. 🟠Лучшие практики Рекомендуется объявлять все переменные и функции в начале их соответствующей области видимости. Это улучшает читаемость и поддержку кода. Используйте let и const вместо var, чтобы избежать проблем с хостингом и повысить безопасность и предсказуемость кода. Ставь 👍 и забирай 📚 Базу знаний

😱 Вот и всё! Теперь вам не нужно сливать деньги на дорогие курсы по фронтенд-разработке — всё необходимое для обучения доступно совершенно бесплатно! Всё, что нужно для изучения фронтенда: полное руководство по HTML, CSS, а также практические гайды — @made_in_html_css. Детальный анализ материалов по FRONTEND-разработке. При этом информация представлена в лёгком и доступном формате, который делает процесс обучения увлекательным и ненадоедливым! Не упустите шанс подписаться на этот уникальный канал — Made in HTML/CSS

Расширить свой стек и поднять скиллы на следующий грейд просто! ➡️Gitlab CI/CD, Docker, RabbitMQ, JavaScript, Python, Linux для разработчиков, инструменты DevOps для разработчиков сами себя не изучат, но вы можете! А курсы Слёрма самых разных востребованных направлений помогут вам сэкономить время, повысить грейд и прокачать навыки. Учёба в Слёрм это: 🔵бесплатное начало: вы получите демодоступ к курсу на 1 день 🔵старт в любое время и обучение в своем темпе без привязки ко времени 🔵фокус на практику: она занимает до 80% обучения 🔵знания от ведущих экспертов современного IT рынка 🔵удобные условия оплаты: рассрочка, налоговый вычет, оплата зарубежной картой и даже оформление оплаты от работодателя. Становитесь востребованным и высокооплачиваемым специалистом на рынке вакансий и прокачивайте свои навыки с нами! Программу и полный список курсов смотрите ➡️ на сайте Реклама ООО «Слёрм» ИНН 3652901451

🤔 Как отцентровать блок по горизонтали и по вертикали? Блок можно отцентрировать с помощью flexbox (свойства justify-content: center и align-items: center) или grid. Также используются свойства position: absolute с вычислением смещения или transform: translate. Выбор метода зависит от контекста верстки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 Что такое function decloration? Это способ определения функции в JavaScript, при котором функция объявляется явно с помощью ключевого слова function, за которым следует имя функции. Функции, определенные таким образом, подлежат "поднятию" (hoisting), что означает, что их можно использовать до их фактического объявления в коде. 🚩Синтаксис Function Declaration

function имяФункции(параметр1, параметр2, ...) {
  // Тело функции
  // Инструкции
}

🚩Примеры использования Function Declaration Основное объявление функции

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

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

🟠Поднятие (Hoisting) Функции, объявленные с помощью Function Declaration, поднимаются, что позволяет вызывать их до объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

🚩Отличия между Function Declaration и Function Expression 🟠Поднятие (Hoisting) Function Declaration: Функции поднимаются и могут быть вызваны до их объявления.

console.log(multiply(2, 3)); // 6

function multiply(a, b) {
  return a * b;
}
     

Function Expression: Функциональные выражения не поднимаются, поэтому их можно использовать только после их определения.

console.log(divide(6, 3)); // Ошибка: divide is not defined

const divide = function(a, b) {
return a / b;
};

🟠Именование Function Declaration: Обязательно имеют имя.

function subtract(a, b) {
return a - b;
}

Function Expression: Могут быть анонимными или именованными.

const modulo = function(a, b) {
return a % b;
};

🟠Использование в коде Function Declaration: Часто используются для определения основных функций, которые нужны на протяжении всего кода. Они удобны для структурирования кода и обеспечения доступности функций в любом месте программы. Function Expression: Более гибкий способ определения функций, который часто используется для создания замыканий, обработки событий и в функциональных конструкциях, таких как методы массивов (map, filter и т.д.). Function Declaration

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

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

Function Expression

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

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

🚩Когда использовать 🟠Замыкания и колбэки Когда вам нужно создать функцию в контексте другой функции, например, передать её как аргумент или вернуть как результат. 🟠Модули и объекты Когда функции являются частью модуля или объекта и вы хотите ограничить их видимость или управление. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что ты знаешь про специфичность селекторов? Специфичность определяет приоритет CSS-правил при конфликте стилей. Она зависит от типов селекторов: инлайновые стили имеют самый высокий приоритет, за ними следуют ID, классы и псевдоклассы, и, наконец, теги. Чем выше специфичность, тем больше вероятность применения стиля. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

ТОП-4 Курса по Программированию ⚡Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. ✅Хотите стать программистом, но не знаете с какого языка начать? Помогаем разобраться в самых популярных и востребованных языках программирования. Подарок в конце подборки! Выбрать #реклама 16+ tutortop.ru О рекламодателе