Waiting room

В комнате есть несколько кресел, которые пронумерованы от 1 до N. Первое кресло находится ближе всего ко входу.
Люди, входящие в комнату занимают кресла по следующим правилам:
1. Кресло находится на самом дальнем расстоянии от занятого.
2. Кресло находится ближе всего ко входу

Ваша задача: найти номер кресла для входящего человека.

Пример:
lastChair(10) => 9

👉 @frontendInterview

​В чем отличия между отзывчивым (responsive) и адаптивным (adaptive) дизайном и какой подход лучше применять?

Responsive и Adaptive дизайн оба направлены на создание лучшего пользовательского опыта на различных устройствах.

Различия между отзывчивым (responsive) и адаптивным (adaptive) дизайном заключаются в подходах, используемых для достижения этой цели.
Отзывчивый дизайн использует гибкую сетку (flexible grid), чтобы создать дизайн, который автоматически масштабируется и меняет свой шаблон в соответствии с шириной экрана. Изначально разработчики создают макет для наиболее широкого экрана, но потом, используя медиазапросы (media queries), устанавливают разные правила CSS для разных размеров экранов, чтобы оптимизировать отображение страницы на различных устройствах.

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

Какой из этих подходов лучше применять зависит от целей, которые разработчик хочет достичь. Если сайт имеет очень сложную структуру или использует много данных, адаптивный дизайн может быть лучшим выбором, потому что он дает больше контроля над тем, как контент будет отображаться на разных устройствах. Однако, если сайт имеет более простую структуру, то отзывчивый дизайн, благодаря своей гибкой сетке, может обеспечить более просто и удобно использование пользователей на любом устройстве.

👉 @frontendInterview

Какие преимущества имеет использование CSS-препроцессоров и какие препроцессоры вы знаете?

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

Некоторые из самых популярных CSS-препроцессоров:

- Sass - это один из самых популярных препроцессоров, в котором используется более развернутый набор функций и возможностей.
- Less - это более легковесный препроцессор, который использует синтаксис, более похожий на обычный CSS, чем Sass.
- Stylus - это менее распространенный, но все еще мощный препроцессор, который зачастую используется в определенных фреймворках для веб-разработки.

👉 @frontendInterview

👉 @frontendInterview

Что такое бандл (bundle) и как он используется в Frontend разработке?

Бандл - это артефакт, который создается сборщиком модулей (например, Webpack) и содержит весь JavaScript-код, требуемый для работы приложения. Он может включать в себя как код приложения, так и зависимости (библиотеки и фреймворки), необходимые для его функционирования. Бандл может быть в нескольких версиях для разных сред (например, разработка, тестирование, продакшн). Бандл позволяет сократить количество запросов к серверу, ускорить загрузку страницы и обеспечить лучшую производительность приложения. Кроме того, бандл можно оптимизировать для уменьшения его размера и ускорения загрузки, например, используя сжатие (compression) и минификацию (minification) кода.

👉 @frontendInterview

Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL, 4th Edition (2023)

Книга начинается с основных концепций и строительных блоков, используемых в Three.js, и помогает вам подробно изучить эти важные темы с помощью обширных примеров и образцов кода. Вы узнаете, как создавать реалистично выглядящие 3D-объекты с помощью текстур и материалов и как загружать модели из внешнего источника.

👉 @frontendInterview

Кодировщик дубликатов

Цель этой каты - преобразовать строку в новую, где каждый уникальный символ преобразуется в "(", а каждый дублирующийся в ")"

Примеры:
"din" => "((("
"recede" => "()()()"
"Success" => ")())())"
"(( @" => "))(("

👉 @frontendInterview

Какое поведение будет у функции, определенной с помощью Function Declaration, если ее вызов расположен перед определением функции в коде?

В JavaScript функции, созданные с помощью Function Declaration, могут быть вызваны до их определения. Это называется "hoisting" или "поднятие". При поднятии переменные и функции объявляются на самом верхнем уровне области видимости. Таким образом, даже если вызов функции появляется до ее определения в коде, функция будет все равно выполнена успешно.

👉 @frontendInterview

Какое влияние на производительность сайта имеет использование большого количества внешних библиотек и как можно улучшить эту производительность?

Использование множества внешних библиотек, особенно крупных, может существенно увеличить время загрузки страницы, что повлияет на производительность сайта. Чтобы улучшить эту производительность, следует применять следующие методы:

- Уменьшить количество библиотек, которые загружаются на странице, выбирая только необходимые.
- Использовать максимально сжатые и минифицированные версии, чтобы уменьшить размер файлов.
- Использовать Content Delivery Network (CDN), чтобы использовать кэширование и уменьшить время загрузки на стороне клиента.
- Консолидировать все внешние библиотеки в одном файле, чтобы уменьшить количество запросов на сервер.
- Использовать асинхронную загрузку, чтобы ускорить загрузку на стороне клиента, таким образом, страница будет загружаться быстрее.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Как работает контекст выполнения (execution context) в JavaScript?

В JavaScript контекст выполнения - это абстрактное понятие, которое описывает окружение, в котором выполняется код. Каждый раз, когда функция вызывается, создается новый контекст выполнения. Он составляется из объектов переменных, которые доступны в текущем контексте и указывает на текущую позицию в коде, на котором мы находимся.

Контекст выполнения состоит из трех составляющих: переменных, области видимости и объекта this.
Область видимости - это определенная область, где переменные могут быть использованы, и включает в себя переменные, объявленные в этой области и вне ее.
Объект this определяет контекст, в котором код выполняется. В глобальном контексте this указывает на глобальный объект window.

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

Объекты. Стильное ООП

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

👉 @frontendInterview