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

🤔 Что такое IIFE? IIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как мерить скорость работы и отзывчивость сайта? 🟠Web Vitals Google разработал набор метрик, называемых Web Vitals, которые оценивают ключевые аспекты пользовательского опыта: Largest Contentful Paint (LCP): Время загрузки основного контента страницы. First Input Delay (FID): Время от первого взаимодействия пользователя с сайтом до момента, когда браузер начинает обработку этого взаимодействия. Cumulative Layout Shift (CLS): Стабильность макета страницы (измеряет неожиданные сдвиги контента). 🟠Инструменты для измерения производительности Google Lighthouse: Инструмент, встроенный в Chrome DevTools, который анализирует страницу и предлагает улучшения. PageSpeed Insights: Онлайн-сервис от Google, который предоставляет отчеты о производительности сайта на мобильных и десктопных устройствах. WebPageTest: Позволяет проводить детализированные тесты производительности с разными настройками сети и устройства. 🟠Встроенные инструменты браузера Chrome DevTools: Включает вкладку "Performance" для записи и анализа производительности загрузки страницы и исполнения скриптов. Network Panel: Показывает время загрузки различных ресурсов, что помогает найти "узкие места". 🟠Мониторинг в реальном времени Google Analytics: Предоставляет отчеты о скорости загрузки страниц. New Relic, Datadog: Платформы для мониторинга производительности приложений и сайтов в реальном времени. 🟠Оптимизация и анализ Использование CDN (Content Delivery Network): Ускоряет доставку контента пользователям, снижая задержки. Минимизация и сжатие ресурсов: Уменьшение размеров файлов CSS, JavaScript и изображений. Кэширование: Хранение копий статических ресурсов для ускорения повторных посещений. 🚩Пример использования 1⃣Откройте сайт в браузере Google Chrome. 2⃣Нажмите F12, чтобы открыть DevTools. 3⃣Перейдите на вкладку "Performance". 4⃣Нажмите "Record" и обновите страницу. 5⃣После завершения загрузки остановите запись. Вы получите детальный отчет о производительности страницы. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что приоритетнее использовать TS или JS? TypeScript предпочтительнее для больших проектов, так как он предоставляет типизацию, которая предотвращает ошибки на этапе компиляции. JS используется в более простых сценариях или там, где требуется гибкость и нет необходимости в строгой типизации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое шаблонные литералы, и для чего они нужны? Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений. 🚩Примеры использования 🟠Интерполяция переменных и выражений Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

🟠Многострочные строки Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

🟠Встроенные выражения Внутри шаблонных литералов можно использовать любые JavaScript-выражения.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

🟠Вызов функций внутри шаблонных литералов Можно вызывать функции и методы внутри шаблонных литералов.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

🟠Тегированные шаблонные литералы Тегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

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

Как живет айтишник, который зарабатывает 5000$ в мес? Живет хорошо! За глубокие знания и умение решать самые сложные задачи его ценят в любой команде: от стартапа до крупной корпорации. А он умеет продавать себя, получать лучшие предложения на работу и эффективно распределять время. Для этого нужно всего 5 минут в день читать канал айтишника. Здесь вы найдёте практические советы, инсайды и секреты от разработчика с 11+ лет опыта, о которых не рассказывают на курсах. 5 минут на канале заменят месяцы самостоятельного изучения. Подписывайтесь: https://t.me/+gWRY7DmrzpRhOWVi

🤔 Что такое псевдоэлемент? Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Map filter reduce foreach, для чего нужны, особенности использования? Методы map, filter, reduce и forEach в JavaScript предназначены для обработки массивов и предоставляют мощные инструменты для работы с данными. Эти методы упрощают и делают код более читаемым и декларативным. 🚩forEach Метод forEach выполняет указанную функцию один раз для каждого элемента в массиве.

const array = [1, 2, 3, 4, 5];

array.forEach((element) => {
    console.log(element);
});

🚩Особенности 🟠Не возвращает значение forEach просто выполняет функцию для каждого элемента и не возвращает новый массив или значение. 🟠Использование Подходит для выполнения побочных эффектов, таких как логирование или изменение элементов массива. 🚩map Метод map создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.

const array = [1, 2, 3, 4, 5];

const doubled = array.map((element) => {
    return element * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

🟠Возвращает новый массив Каждый элемент нового массива является результатом вызова функции. 🟠Использование Подходит для преобразования данных, не изменяя исходный массив. 🚩filter Метод filter создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.

const array = [1, 2, 3, 4, 5];

const evenNumbers = array.filter((element) => {
    return element % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

🟠Возвращает новый массив Включает только те элементы, которые соответствуют условию. 🟠Использование Подходит для фильтрации данных на основе заданного условия. 🚩reduce Метод reduce выполняет функцию редуктора (сборщика) для каждого элемента массива, сводя массив к одному значению.

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 15

🟠Возвращает одно значение Результат выполнения функции редуктора. 🟠Начальное значение Второй аргумент функции reduce задает начальное значение аккумулятора. 🟠Использование Подходит для агрегирования данных, например, для вычисления суммы, произведения или объединения значений. Ставь 👍 и забирай 📚 Базу знаний

– Помощь с pet-проектом – Составление roadmap – Общая консультация – Проведение код-ревью и mock-собеседования – Помощь с трудоустройством Все это и многое другое может Ментор. Он обеспечит вам необходимый boost, ускорит и упростит вход в IT. 🔥 Здесь размещен список менторов, и многие из них предлагают бесплатную первую консультацию

🤔 В чём разница между макро- и микро-задачами? Макро-задачи (например, setTimeout, setInterval) выполняются в основном цикле событий после выполнения текущего стека. Микро-задачи (например, Promise, queueMicrotask) имеют более высокий приоритет и выполняются сразу после текущего выполнения кода, до обработки макро-задач. Микро-задачи используются для обработки данных в реальном времени, а макро-задачи — для отложенных действий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое bootstrap? Это популярный фреймворк для разработки интерфейсов веб-приложений. Он включает в себя набор инструментов для создания адаптивных и удобных для пользователя веб-страниц. Bootstrap предоставляет готовые CSS и JavaScript компоненты. 🚩Основные компоненты 🟠Сетка (Grid System) Bootstrap использует гибкую сеточную систему, основанную на 12 колонках, что позволяет создавать адаптивные макеты. Вы можете легко управлять расположением элементов на странице для различных размеров экранов.

<div class="container">
    <div class="row">
        <div class="col-md-4">Колонка 1</div>
        <div class="col-md-4">Колонка 2</div>
        <div class="col-md-4">Колонка 3</div>
    </div>
</div>   

🟠Компоненты Bootstrap включает множество готовых компонентов, таких как кнопки, формы, карточки, навигационные панели, модальные окна и многое другое. Эти компоненты можно легко стилизовать и настроить.

<button type="button" class="btn btn-primary">Основная кнопка</button>   

🟠JavaScript плагины В Bootstrap также включены JavaScript плагины, которые добавляют интерактивность и динамичность. Например, модальные окна, карусели, выпадающие меню и другие.

<!-- Кнопка для вызова модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Запустить модальное окно
</button>

<!-- Модальное окно -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Название модального окна</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Содержимое модального окна.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить изменения</button>
            </div>
        </div>
   </div>
</div>   

🟠Утилиты В Bootstrap имеются утилиты для быстрого добавления часто используемых стилей, таких как отступы, цвета, выравнивание текста и другие. Эти утилиты позволяют быстро применять стили без написания дополнительных CSS-классов.

<div class="p-3 mb-2 bg-primary text-white">Основной фон с отступами и белым текстом</div>   

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

🤔 Какие селекторы знаешь? CSS-селекторы включают: Простые: селекторы тегов (div), классов (.class), ID (#id), атрибутов ([type="text"]). Комбинаторы: потомок (A B), прямой потомок (A > B), сосед (A + B), все последующие (A ~ B). Псевдоклассы: :hover, :nth-child(n), :first-of-type. Псевдоэлементы: ::before, ::after, ::placeholder. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое миксины в препроцессорах? Миксины в препроцессорах 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

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

🤔 Что такое CSS? CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования HTML-элементов, включая цвета, размеры, шрифты и расположение. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Квартиры в Краснодаре. Ремонт в подарок до 31.12 Новый жилой район "Первое место" в Краснодаре. Здесь всё для счастливой жизни на первом месте: - Две школы - Шесть детских садов - Поликлиники - Собственный фитнес-центр - Многоуровневый паркинг Жилой комплекс располагается в новом районе города «Новознаменский», в Карасунском округе Краснодара и имеет удобный выезд на трассу М4 ДОН, Джубгскую трассу в направлении Черного моря и горнолыжных курортов. Успейте забрать билет в жизнь, где вы всегда будете на «Первом месте»! Получить предложение Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО " СЗ Живые квартиры" #реклама promo.tochno-pervoe.ru О рекламодателе

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

// Пример на Sass
$primary-color: #3498db;
$font-size: 16px;

body {
    color: $primary-color;
    font-size: $font-size;
}   

🟠Вложенные правила В стандартном CSS вложенность не поддерживается, что может затруднять чтение и поддержку кода. Препроцессоры позволяют использовать вложенные правила, что делает структуру кода более логичной и читаемой.

// Пример на Sass
.nav {
    background: #eee;

    ul {
        margin: 0;
        padding: 0;

        li {
            display: inline-block;

            a {
                color: #333;
            }
        }
    }
}
   

🟠Миксины Миксины позволяют определять повторяющиеся блоки стилей и использовать их в разных местах кода. Это помогает избежать дублирования и облегчает внесение изменений.

// Пример на Sass
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

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

🟠Функции и операции Препроцессоры поддерживают использование функций и операций для выполнения вычислений и обработки значений непосредственно в CSS-коде.

// Пример на Sass
$base-font-size: 16px;

.large-text {
    font-size: $base-font-size * 1.5;
}   

🟠Импорт файлов Препроцессоры позволяют разбивать CSS на несколько файлов и импортировать их в основной файл стилей. Это улучшает организацию кода и его поддерживаемость.

// Пример на Sass
@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';   

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

🤔 В чём отличие хранения данных в local storage от сессий? localStorage сохраняет данные бессрочно, пока их не удалят вручную, а sessionStorage хранит данные только на время текущей сессии браузера. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Быстрая миграция в Yandex Cloud за наш счёт Чувствуете, что текущая инфраструктура ограничивает рост вашего бизнеса? Пора переходить в облако! Специалисты Yandex Cloud помогут сделать процесс миграции максимально простым. Всё, что потребуется от вас, — выделить специалиста с доступом к инфраструктуре. Остальное мы берём на себя! И самое приятное: подайте заявку до 31 декабря, и мы покроем расходы на услуги нашей команды и тестовую инфраструктуру. ✨ Мигрируйте в Yandex Cloud легко и без рисков! ⚡Заполните заявку прямо сейчас Подать заявку #реклама yandex.cloud О рекламодателе Реклама на Яндексе

🤔 Как сделать анимацию бесконечно повторяющейся? Чтобы создать бесконечно повторяющуюся анимацию в CSS, используется свойство animation вместе с параметром infinite, который указывает, что анимация должна повторяться бесконечно. 🚩Основные шаги 1⃣Определение ключевых кадров анимации с помощью @keyframes. 2⃣Применение анимации к элементу с использованием свойства animation и указанием параметра infinite. 🚩Пример использования Сначала создайте анимацию с ключевыми кадрами. Допустим, мы хотим, чтобы элемент плавно изменял цвет и возвращался к исходному состоянию.

@keyframes changeColor {
    0% {
        background-color: lightblue;
    }
    50% {
        background-color: lightgreen;
    }
    100% {
        background-color: lightblue;
    }
}

Теперь применим эту анимацию к элементу и укажем, что она должна повторяться бесконечно.

.animated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: changeColor 3s infinite;
}

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

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку. Реклама. ИП Чернова О. А., ИНН:771399721044

🤔 Что такое хук? Хук — это функция в React, которая позволяет использовать состояние и другие возможности React в функциональных компонентах (например, useState, useEffect). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний