Frontend Interview - собеседования по Javascript / Html / Css

Что такое MR-стенды и с чем их едят

В условиях непрерывной интеграции и высокой скорости разработки фронтенд неизбежно сталкивается с вызовами, связанными с тестированием изменений до их слияния в основную ветку. Любой, даже минимальный апдейт, способен повлиять на пользовательский опыт, поэтому эффективность процессов тестирования становится критически важной. Для нас спасением стали MR-стенды, которые предоставляют возможность изолированного тестирования новой функциональности, минимизируя риски и сокращая время на выявление и исправление ошибок. Рассказываем, как работают MR-стенды, в каких случаях они особенно полезны и как их внедрение повлияло на качество и скорость нашей разработки.

👉 @frontendInterview

​Как можно расставить автоматическую нумерацию элементов, не относящихся к спискам при помощи CSS?

В следующем примере показано простое использование функции counter():

<section class="table-of-contents">
  <h1 class="title">Оглавление</h1>
  <h2 class="chapter">HTML и CSS</h2>
  <h2 class="chapter">Создание стилей и таблиц стилей</h2>
  <h2 class="chapter">Селекторы: выбор форматируемых элементов</h2>
  <h2 class="chapter">Механизм наследования стилей</h2>
  <h2 class="chapter">Управление сложной структурой стилей: каскад</h2>
  <h2 class="chapter">Поля, отступы, границы</h2>
</section>

На элементе <section> создаём счётчик с именем chapter и начальным значением 0:

.table-of-contents {
  counter-reset: chapter 0;
}

Устанавливаем увеличение значения счётчика сhapter, используя свойство counter-increment. Далее подставляем значение счётчика chapter через функцию counter():

.chapter {
  counter-increment: chapter 1;
}

.chapter::before {
  content: "Глава "counter(chapter) ": ";
}

👉 @frontendInterview

​Как удалить все элементы из массива?

Чтобы удалить все элементы из массива в JavaScript, можно использовать несколько способов, в зависимости от ваших целей.

Установка длины массива в 0
JavaScript позволяет вручную изменять длину массива. Если установить длину массива равной 0, все его элементы будут удалены.

let arr = [1, 2, 3, 4, 5];
arr.length = 0;

console.log(arr); // []

Присвоение пустого массива
Можно просто присвоить переменной новый пустой массив.

let arr = [1, 2, 3, 4, 5];
arr = [];

console.log(arr); // []

Пример

let arr = [1, 2, 3, 4, 5];
let reference = arr;

arr = [];
console.log(arr);       // []
console.log(reference); // [1, 2, 3, 4, 5]

Использование метода `splice`
Метод splice позволяет удалять элементы из массива. Если указать удаление всех элементов, массив станет пустым.

let arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);

console.log(arr); // []

Использование цикла (редко применяется)
Хотя это не самый эффективный способ, можно очистить массив с помощью цикла.

let arr = [1, 2, 3, 4, 5];
while (arr.length > 0) {
  arr.pop(); // Удаляем последний элемент
}

console.log(arr); // []

👉 @frontendInterview

Mumbling

На этот раз ни истории, ни теории. В примерах ниже показано, как написать функцию accum:

Пример:

accum("abcd")  // -> "A-Bb-Ccc-Dddd"
accum("RqaEzty")  // -> "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy"
accum("cwAt")  // -> "C-Ww-Aaa-Tttt"

Параметр accum представляет собой строку, в которую входят только буквы от a..z и A..Z.

👉 @frontendInterview

Laws of UX: Using Psychology to Design Better Products & Services

Это практическое руководство объясняет, как вы можете применять ключевые принципы психологии для создания продуктов, которые являются более интуитивными и ориентированными на человека. Автор Джон Яблонски разбирает дизайн приложений, чтобы привести наглядные примеры того, как дизайнеры UX могут создавать дизайн, адаптирующийся к тому, как пользователи воспринимают и обрабатывают цифровые интерфейсы.

👉 @frontendInterview

​Как растянуть элемент на 100%?

Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.

Растяжение элемента на 100% ширины и высоты
Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

Растяжение относительно окна браузера (`viewport`)
Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

Для исключения полосы прокрутки можно использовать

width: calc(100vw - 16px); /* Учитывается ширина скролла */

Использование `position: absolute`
Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

Растяжение внутри Flexbox-контейнера
Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

Растяжение внутри Grid-контейнера
CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

Растяжение с учетом отступов
Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

👉 @frontendInterview

Как программисты заходят к начальнику

👉 @frontendInterview

UI/UX тренды в 2025: угрожает ли ИИ будущему дизайнеров и какие визуальные тренды нас удивят?

Мы продолжаем следить за UI-трендами, чтобы создавать красивые и удобные интерфейсы, которые не только удерживают пользователей, но и гибко адаптируются под влиянием новых технологий. И, конечно, готовы рассказать о них вам.

👉 @frontendInterview

Как обработать ситуацию, когда код выбрасывает ошибку, и не сломать приложение?

Конструкция try...catch позволяет выполнить произвольный код, но если в нем произошла ошибка, то программа не остановит своё выполнение, а перейдёт в блок catch, где ошибку можно обработать. В этой статье описаны принципы работы с этой конструкцией.

👉 @frontendInterview

👉 @frontendInterview

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

И в новом сезоне ребята решили разобраться, какие инструменты и знания включают в роадмапы профессионального развития и насколько они применимы.

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Промокод сообщества
react_crew_2_oMGfq4 даёт скидку в 500 руб 🥳

​Что такое merge и rebase, в чем отличие друг от друга?

Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.

Merge (слияние)

Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

Rebase (перебазирование)

Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

Основные отличия

История коммитов
Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.

Коммиты слияния
Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.

Конфликты
Merge: Конфликты решаются один раз при слиянии.
Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.

Применение
Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.

👉 @frontendInterview

Binary Addition

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

Возвращаемое двоичное число должно быть строкой

Пример:

1, 1  //  "10" (1 + 1 = 2 in decimal or 10 in binary)
5, 9  //  "1110" (5 + 9 = 14 in decimal or 1110 in binary)

👉 @frontendInterview

Устойчивый веб-дизайн

Без сомнения, "Устойчивый веб-дизайн" является обязательным чтением для веб-дизайнеров и front-end разработчиков во всем мире. Тут собрана история и философия веба. Раскрыты идеи веб-разработки.

👉 @frontendInterview

​Что думаешь про SSR?

Server-Side Rendering (SSR) — это метод рендеринга веб-страниц на сервере перед их отправкой в браузер клиента. В отличие от Client-Side Rendering (CSR), где основная работа по рендерингу выполняется на стороне клиента, SSR позволяет создать HTML-код страницы на сервере и отправить его уже готовым для отображения в браузере.

Преимущества

Улучшение SEO:
- Поисковые системы могут более эффективно индексировать страницы, так как они получают полностью рендеренный HTML-код.
- SSR обеспечивает лучшую видимость для поисковых роботов, что важно для сайтов, ориентированных на SEO.

Быстрое время до первого отрисовки (First Paint):
- Пользователи быстрее видят начальное содержимое страницы, так как браузер получает готовый HTML.
- Это может улучшить восприятие производительности и снизить показатель отказов.

Социальные сети и предварительный просмотр:
- SSR упрощает создание мета-тегов и содержимого для социальных сетей, что позволяет правильно отображать предварительный просмотр страниц при их шаринге.

Лучший пользовательский опыт на медленных устройствах:
- Так как большая часть вычислений выполняется на сервере, клиентские устройства с низкой производительностью быстрее отображают контент.

Недостатки

Увеличение нагрузки на сервер:
- Сервер должен обрабатывать и рендерить каждую страницу, что может требовать больше ресурсов по сравнению с CSR.
- Это может потребовать более мощного серверного оборудования или масштабирования для обработки большого трафика.

Увеличение времени отклика сервера:
- Рендеринг страниц на сервере может занять дополнительное время, особенно для сложных страниц с большим количеством данных.
- Это может привести к увеличению времени ответа сервера.

Сложность настройки и поддержки:
- Настройка SSR требует дополнительных знаний и усилий по сравнению с CSR.
- Поддержка и отладка SSR-приложений может быть более сложной из-за необходимости управлять состоянием на сервере и клиенте.

Гибридные решения могут быть сложными:
- Комбинирование SSR с CSR для достижения оптимальной производительности и функциональности (например, использованием технологии Hydration) может усложнить архитектуру приложения.

Примеры

Next.js для React:
- Популярный фреймворк, который облегчает создание SSR-приложений на основе React.
- Поддерживает гибридные приложения с SSR для начальной загрузки и CSR для последующего взаимодействия.

Nuxt.js для Vue.js:
- Фреймворк, предоставляющий мощные возможности для SSR с использованием Vue.js.
- Упрощает создание универсальных приложений с возможностью переключения между SSR и CSR.

👉 @frontendInterview