Frontend | Interview questions

🤔 Как растянуть элемент на 100%? Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы. 🟠Растяжение элемента на 100% ширины (`width: 100%;`) Элемент займет всю ширину своего родителя. Я растянут по ширине! 🟠Растяжение элемента на 100% высоты (`height: 100%;`) Элемент займет всю высоту родительского элемента. Я растянут по высоте! 🟠Растяжение элемента на 100% ширины и высоты Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;. Растянут по ширине и высоте! 🟠Растяжение относительно окна браузера (`viewport`) Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна). Я растянут на весь экран! Для исключения полосы прокрутки можно использовать width: calc(100vw - 16px); /* Учитывается ширина скролла */ 🟠Использование `position: absolute` Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute. Я растянут абсолютно! 🟠Растяжение внутри Flexbox-контейнера Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch. Я растянут по Flexbox! 🟠Растяжение внутри Grid-контейнера CSS Grid также позволяет растягивать элементы. Я растянут внутри Grid! 🟠Растяжение с учетом отступов Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов. Я растянут с учетом отступов! Ставь 👍 и забирай 📚 Базу знаний

🤔 Что использовать, чтобы всплытие событий не происходило? Метод event.stopPropagation() останавливает всплытие события вверх по DOM. Также можно использовать event.stopImmediatePropagation() для прекращения вызова других обработчиков. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про операторы сравнения Операторы сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. 🚩Разница между `==` и `===` 🟠`==` (нестрогое сравнение) При == JavaScript приводит типы перед сравнением. console.log(5 == "5"); // true (строка "5" приводится к числу) console.log(0 == false); // true (false → 0) console.log(null == undefined); // true (особый случай) 🟠`===` (строгое сравнение) При === сравниваются и значение, и тип. console.log(5 === "5"); // false (разные типы) console.log(0 === false); // false (число !== логический тип) console.log(null === undefined); // false (разные типы) 🚩🔹 Логические значения в сравнении JavaScript приводит значения к true или false console.log(1 == true); // true (1 → true) console.log(0 == false); // true (0 → false) console.log("" == false); // true ("" → false) console.log([] == false); // true (пустой массив → false) console.log(null == false); // false (null не приводится к false) 🚩Особые случаи - null == undefined → true (они считаются "похожими"). - null === undefined → false (разные типы). - null >= 0 → true (null превращается в 0). - null > 0 → false (но null >= 0 – true, странно, да?). console.log(null == undefined); // true console.log(null >= 0); // true console.log(null > 0); // false (WTF?) Ставь 👍 и забирай 📚 Базу знаний

🤔 Что известно про обобщённые типы? Обобщённые типы (generics) позволяют писать универсальный и типобезопасный код, не зависящий от конкретных типов данных. Они часто применяются для функций, классов и интерфейсов, которым нужно работать с разными типами, но при этом сохранять строгую типизацию. Такой подход помогает избежать дублирования кода и повышает гибкость без потери контроля типов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие есть альтернативы ssr? В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки. 🚩CSR (Client-Side Rendering) Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс. 🚩Плюсы ➕Быстрая работа после загрузки Приложение становится очень интерактивным после инициализации. ➕Меньшая нагрузка на сервер Основная работа выполняется на клиентской стороне. ➕Гибкость и модульность Легко добавлять сложные интерактивные компоненты. 🚩Минусы ➖Медленная первая загрузка (Time to First Byte, TTFB) Пользователь видит пустую страницу, пока загружается JavaScript и данные. ➕Проблемы с SEO Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере. ➖Требования к устройствам Больше ресурсов требуется на стороне клиента. 🚩SSG (Static Site Generation) Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент. npm run build 🚩Плюсы и минусы ➕Молниеносная загрузка HTML статичен и отдается сервером без обработки. ➕SEO-дружелюбность Поисковые системы могут легко индексировать готовый HTML. ➕Уменьшение нагрузки на сервер Все вычисления выполняются заранее (во время сборки). ➖Ограничения при частых обновлениях контента Для обновления нужно заново пересобирать сайт, что может занимать много времени. ➖Не подходит для динамических данных Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным. 🚩ISR (Incremental Static Regeneration) Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее. export async function getStaticProps() { return { props: { data: fetchData(), }, revalidate: 60, // Обновлять страницу каждые 60 секунд }; } 🚩Плюсы и минусы ➕Лучшая производительность Страницы отдаются как статические, но обновляются при необходимости. ➕Гибкость Удобно для контента, который редко обновляется. ➕SEO Поисковики видят статические страницы. ➖Сложнее настроить Нужно управлять кэшированием и интервалами обновления. ➖Не подходит для полностью динамических страниц Если обновления контента слишком частые, ISR может не подойти. 🚩DPR (Dynamic Rendering / Hybrid Rendering) Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков. 🚩Плюсы и минусы ➕Оптимально для SEO Боты получают готовый HTML. ➕Гибкость Пользователи получают интерактивные страницы через CSR. ➖Усложнение архитектуры Нужно отслеживать запросы и разделять их. ➖Задержки для ботов Генерация страницы на сервере может занять время. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое кэш приложения в HTML5? Это механизм, позволяющий сохранять ресурсы веб-приложения в локальном кэше, чтобы оно могло работать офлайн. Реализуется через файл манифеста .appcache (устарело, заменено Service Workers). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как мы можем замерить скорость работы участка кода с date.Now? В JavaScript можно замерить скорость выполнения кода с помощью Date.now(), но есть более точные способы. Давайте разберём разные варианты. 🚩Использование `Date.now()` Метод Date.now() возвращает количество миллисекунд с 1 января 1970 года (Unix-время). Можно запомнить время до и после выполнения кода, а затем вычислить разницу. const start = Date.now(); // Фиксируем время начала // Код, время выполнения которого нужно измерить for (let i = 0; i < 1e6; i++) { Math.sqrt(i); } const end = Date.now(); // Фиксируем время окончания console.log(`Время выполнения: ${end - start} мс`); 🚩Использование `performance.now()` (Более точный способ) Метод performance.now() возвращает время с микросекундной точностью (до тысячных долей миллисекунды). Он точнее, чем Date.now(), так как измеряет время с высокой детализацией. const start = performance.now(); for (let i = 0; i < 1e6; i++) { Math.sqrt(i); } const end = performance.now(); console.log(`Время выполнения: ${(end - start).toFixed(3)} мс`); 🚩Использование `console.time()` Если нужно просто измерить время выполнения блока кода, можно воспользоваться console.time() и console.timeEnd(). console.time("Мой код"); for (let i = 0; i < 1e6; i++) { Math.sqrt(i); } console.timeEnd("Мой код"); // Выведет время выполнения Ставь 👍 и забирай 📚 Базу знаний

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? - Progressive enhancement: вначале создаётся базовая, минимальная версия, которая работает в любом браузере, а затем добавляются улучшения для современных. - Graceful degradation: вначале создаётся максимально функциональная версия, которая плавно теряет функции при запуске в старых браузерах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как понять что код работает корректно? Чтобы понять, что код работает корректно, нужно провести его тестирование, что включает в себя проверку кода на соответствие ожидаемым результатам в различных ситуациях. Вот основные подходы и шаги: 🚩Проверка требований Прежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований. Например: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове add(2, 3) результат будет 5. 🚩Тестирование (Test Cases) Тестирование предполагает выполнение кода с разными входными данными и проверку, что результат соответствует ожиданиям. 🟠Ручное тестирование Вы запускаете код с различными значениями и проверяете результаты. 🟠Автоматизированное тестирование Пишете тестовые скрипты, которые автоматически проверяют корректность работы. function add(a, b) { return a + b; } Мы можем протестировать её так console.log(add(2, 3)); // Должно вывести 5 console.log(add(0, 0)); // Должно вывести 0 console.log(add(-1, -1)); // Должно вывести -2 Однако лучше использовать автоматическое тестирование. Например, с помощью Jest test('add function works correctly', () => { expect(add(2, 3)).toBe(5); expect(add(0, 0)).toBe(0); expect(add(-1, -1)).toBe(-2); }); 🚩Обработка крайних случаев Иногда код может работать корректно для обычных данных, но давать сбои в "необычных" случаях. Эти ситуации называют крайними случаями. Пустой ввод (например, add() вместо двух чисел). Очень большие числа. Неправильные типы данных (например, строка вместо числа). console.log(add()); // undefined или ошибка console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы 🚩Отладка (Debugging) Если код не работает как надо, нужно использовать инструменты для отладки 🟠console.log() Вывод данных для проверки логики. 🟠Инструменты разработчика в браузере Для работы с JavaScript в реальном времени. 🟠Дебаггер Позволяет пошагово выполнять код. 🚩Проверка производительности Иногда корректная работа кода связана не только с правильным результатом, но и с его скоростью. Если код работает слишком медленно, это может быть проблемой. Инструменты, такие как performance.now() в JavaScript, позволяют измерять время выполнения функций. 🚩Code Reviews и тестирование пользователями После тестов полезно показать код другим разработчикам для проверки (code review) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены. Ставь 👍 и забирай 📚 Базу знаний