Какие преимущества имеет использование 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

Простое сжатие

Вам дана строка, состоящая из повторяющихся символов. Создайте функцию, которая обработает эту строку и преобразует её в массив, состоящий из кортежей (число повторений, символ).

Примеры:
string1="aaaaaaaaaaaaaaaaaaaaaaaaaabaaaaaaaaaaaaaaaaaa"
output1='[[26,"a"],[1,"b"],[18,"a"]]'

string="aaaaaaaabaaaa"
compressed=[[8,"a"],[1,"b"],[4,"a"]]

👉 @frontendInterview

​Что такое деструктуризация объектов и массивов в JavaScript?

Деструктуризация объектов и массивов в JavaScript — это возможность извлекать значения из объектов и массивов, присваивая их переменным.

При работе с объектами, можно использовать синтаксис фигурных скобок, чтобы выделить только те свойства, которые нужны в данном контексте и присвоить их новым переменным. Например:

 const person = { name: 'John', age: 30, city: 'New York' };
 const { name, age } = person;

В этом примере из объекта person извлекаются только свойства name и age и присваиваются переменным с теми же именами.

При работе с массивами, можно использовать синтаксис квадратных скобок, чтобы извлечь элементы массива в определенном порядке и присвоить их новым переменным. Например:

 const numbers = [1, 2, 3];
 const [a, b, c] = numbers;

В этом примере первый элемент массива присваивается переменной a, второй - b, третий - c.

Деструктуризация предоставляет возможность более четко и компактно извлекать значения из объектов и массивов, упрощает их обработку и позволяет избежать лишнего кода.

👉 @frontendInterview