Ребят, напоминаю, что у нашего канала есть сайт, на котором все вопросы с собесов представлены списком, вместе с видео-ответами ➡️ easyoffer.ru

Что такое прототипное наследование ?
Спросят с вероятностью 10%

Прототипное наследование — это механизм, с помощью которого объекты могут наследовать свойства и методы от других объектов. Это одна из основных особенностей языка JavaScript, отличающая его от классических моделей наследования, используемых во многих других языках программирования.

Как это работает

Каждый объект имеет специальное скрытое свойство [[Prototype]] (как правило, доступное как proto или через Object.getPrototypeOf()), которое ссылается на другой объект — его прототип. Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство/метод не найдено в самом объекте, поиск продолжается по цепочке прототипов, пока свойство/метод не будет найден или не будет достигнут конец цепочки прототипов (прототип null).

Пример:

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  proto: animal
};

rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true

В этом примере объект rabbit наследует свойство eats и метод walk от объекта animal через прототипную цепочку.

Основные принципы

1️⃣ Прототипная цепочка: Когда вы обращаетесь к свойству объекта, автоматически ищет это свойство в объекте, а затем — в его прототипах, пока не достигнет конца цепочки прототипов.
2️⃣ Object.prototype: В вершине прототипной цепочки находится Object.prototype. Он не имеет прототипа и содержит методы, доступные всем объектам, такие как toString(), hasOwnProperty() и другие.
3️⃣ Создание объектов с определённым прототипом: Для создания объектов с указанием прототипа можно использовать Object.create(proto), где proto — объект, который должен стать прототипом для нового объекта.

Отличия от классического наследования

В отличие от него, прототипное наследование не использует классы как таковые (до введения class в ES6, которые являются "синтаксическим сахаром" над прототипным наследованием). Вместо этого объекты напрямую наследуют свойства и методы от других объектов.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое JSX ?
Спросят с вероятностью 10%

JSX (JavaScript XML) — это расширение синтаксиса. Оно позволяет писать структуру компонентов React с использованием синтаксиса, похожего на HTML, непосредственно файлах. Этот синтаксический сахар делает код более читабельным и удобным для разработки пользовательских интерфейсов.

Основные особенности JSX:

- Сочетание HTML и JavaScript: Позволяет использовать HTML-теги и компоненты React внутри JavaScript-кода.
- Выражения JavaScript: Можно вставлять JavaScript-выражения в фигурные скобки {}. Это позволяет динамически управлять содержимым компонентов.
- Компонентный подход: Легко создавать и использовать повторно компоненты UI, что упрощает разработку сложных пользовательских интерфейсов.
- Преобразование: Не может быть выполнен напрямую браузерами и требует преобразования в обычный JavaScript. Это обычно делается с помощью транспиляторов, таких как Babel.

Пример:

const element = <h1>Привет, мир!</h1>;

Этот пример демонстрирует JSX-элемент, который представляет собой заголовок первого уровня с текстом "Привет, мир!". В реальном JavaScript этот код будет преобразован в вызов React.createElement(), который создаёт React-элемент.

Вставка выражений:

Вы можете вставлять любые допустимые JavaScript-выражения в него, обернув их в фигурные скобки. Например:

const name = 'Иван Иванов';
const element = <h1>Привет, {name}</h1>;

Преимущества использования JSX:

✅ Наглядность: Код с ним легче читать и писать, поскольку он напоминает HTML.
✅ Мощность: Сочетает в себе преимущества JavaScript, позволяя использовать всю его выразительную мощь при описании UI.
✅ Интеграция: Плотно интегрирован с React, облегчая создание интерактивных компонентов.

JSX — это расширение синтаксиса, которое делает разработку интерфейсов на React более интуитивной и выразительной за счёт смешивания HTML-подобного кода с JavaScript. Хотя использование JSX необязательно для работы с React, оно значительно упрощает процесс разработки и повышает читабельность кода.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Как работает new ?
Спросят с вероятностью 7%

new используется для создания экземпляра объекта на основе функции-конструктора или класса. Процесс его работы можно разделить на несколько шагов:

1️⃣ Создание нового объекта: Когда вы используете его, JavaScript создаёт новый пустой объект.

2️⃣ Присвоение прототипа: Прототип созданного объекта устанавливается в значение свойства prototype функции-конструктора. Это означает, что новый объект наследует свойства и методы, определённые в прототипе конструктора.

3️⃣ Вызов функции-конструктора: Функция-конструктор вызывается с аргументами, переданными в неи, и контекстом this, установленным в только что созданный объект. Это позволяет добавлять свойства и методы непосредственно к экземпляру.

4️⃣ Возврат значения: Если функция-конструктор возвращает объект, то этот объект возвращается вместо только что созданного. Если возвращается не объект (например, примитивное значение) или функция-конструктор вообще ничего не возвращает, то возвращается созданный на шаге 1 объект.

Пример:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(Привет, меня зовут ${this.name}!);
};

// Создаём новый объект с помощью new
const person1 = new Person('Алексей', 30);

person1.greet(); // Выводит: "Привет, меня зовут Алексей!"

В этом примере new Person('Алексей', 30) создаёт новый объект, прототипом которого является Person.prototype, и вызывает функцию Person с this, указывающим на новый объект, что позволяет добавить свойства name и age к этому объекту. После этого, с новым объектом можно взаимодействовать, как с экземпляром Person, включая вызов методов, определённых в Person.prototype.

new позволяет создавать новые объекты на основе функций-конструкторов или классов, автоматически устанавливая связь между созданным объектом и прототипом конструктора, что обеспечивает наследование свойств и методов.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Как можно ускорить загрузку сайта ?
Спросят с вероятностью 7%

Ускорение загрузки сайта — крайне важный аспект веб-разработки, поскольку это напрямую влияет на пользовательский опыт и SEO. Есть множество способов оптимизации, которые могут помочь в этом:

1️⃣ Минимизация и объединение файлов: Сокращение количества файлов, которые нужно загрузить браузеру, может значительно ускорить загрузку сайта. Использование инструментов для минимизации (сжатия) этих файлов уменьшает их размер.

2️⃣ Асинхронная загрузка скриптов: Скрипты, загружаемые асинхронно, не блокируют отображение страницы. Это позволяет браузеру продолжать загрузку других элементов страницы, пока скрипт ещё загружается.

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

4️⃣ Оптимизация изображений: Изображения часто занимают большую часть размера страницы. Использование форматов, таких как WebP, которые обеспечивают меньший размер файла при сохранении качества, а также сжатие и масштабирование изображений под нужные размеры, могут значительно сократить время загрузки.

5️⃣ Использование сети доставки контента (CDN): CDN позволяет хранить копии вашего сайта на множестве серверов по всему миру, так что пользователи загружают контент с ближайшего к ним сервера.

6️⃣ Lazy loading (ленивая загрузка): Техника, при которой контент (особенно изображения и видео) на странице загружается только тогда, когда он попадает в область видимости пользователя. Это снижает начальную нагрузку на страницу.

7️⃣ Ускорение серверного ответа: Время ответа сервера может быть уменьшено за счет оптимизации сервера, использования более быстрого хостинга или оптимизации базы данных.

8️⃣ Использование HTTP/2: Протокол HTTP/2 позволяет более эффективно загружать ресурсы, благодаря мультиплексированию, сжатию заголовков и приоритизации запросов.

9️⃣ Удаление ненужных плагинов и скриптов: Ненужные плагины и скрипты могут замедлять ваш сайт, поэтому стоит регулярно пересматривать их и удалять неиспользуемые.

🔟 Использование AMP (Accelerated Mobile Pages): Если большая часть вашей аудитории использует мобильные устройства, использование AMP может ускорить загрузку страниц на этих устройствах.

Оптимизация загрузки сайта — это процесс, который требует внимания к деталям и постоянного тестирования. Использование инструментов анализа производительности, таких как Google PageSpeed Insights, помогает выявлять проблемы и предлагает конкретные рекомендации по их решению.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое props ?
Спросят с вероятностью 10%

props — это сокращение от "properties" (свойства). Это концепция, используемая для передачи данных от родительского компонента к дочернему компоненту. Они являются неизменяемыми, что означает, что дочерний компонент не может напрямую изменять полученные его; вместо этого, любые изменения в данных должны происходить на уровне родительского компонента, который затем повторно передает его дочерним компонентам.

Как они работают

Когда вы создаете компонент, вы можете передать ему props следующим образом:

const ParentComponent = () => {
  return <ChildComponent name="Иван" age={30} />;
};

В этом примере, ChildComponent получает два props: name и age. Доступ к этим props внутри ChildComponent происходит так:

const ChildComponent = (props) => {
  return <h1>Привет, мое имя {props.name}, мне {props.age} лет.</h1>;
};

Особенности props

✅ Неизменяемость: Предназначены только для чтения. Это означает, что компонент не может изменить свои props, но может либо использовать их "как есть", либо использовать их для вычисления новых значений внутри компонента.
✅ Передача данных: Позволяют компонентам получать данные от родителя, что делает компоненты более гибкими и повторно используемыми.
✅ Передача функций: Через него можно передавать не только данные, но и функции, что позволяет родительскому компоненту предоставлять обработчики событий дочерним компонентам.

Пример передачи функции

const ParentComponent = () => {
  const showAlert = () => {
    alert("Приветствие от родителя!");
  };

  return <ChildComponent showAlert={showAlert} />;
};

const ChildComponent = (props) => {
  return <button onClick={props.showAlert}>Показать приветствие</button>;
};

В этом примере, функция showAlert определена в ParentComponent и передается как props в ChildComponent, который затем использует ее как обработчик события клика для кнопки.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое react ?
Спросят с вероятностью 10%

React — это декларативная, эффективная и гибкая библиотека для создания пользовательских интерфейсов. Она позволяет строить сложные интерактивные UI из небольших и изолированных частей кода, называемых "компонентами". Он был создан инженерами Facebook и впервые представлен в 2013 году.

Основные особенности React:

1️⃣ Компонентный подход: Приложения строятся из компонентов, которые содержат свой собственный стейт (состояние) и логику отображения. Компоненты могут быть повторно использованы в разных частях приложения, что повышает удобство поддержки и разработки кода.
2️⃣ Декларативность: Позволяет описывать, как компоненты интерфейса выглядят в разных состояниях, автоматически обновляя их при изменении данных. Это делает код более читаемым и упрощает процесс разработки.
3️⃣ Виртуальный DOM (VDOM): Использует концепцию виртуального DOM для повышения производительности приложения. Виртуальный DOM — это легковесная копия реального DOM-дерева в памяти, позволяющая оптимизировать обновления интерфейса за счет минимизации взаимодействия с реальным DOM.
4️⃣ Однонаправленный поток данных: В нем данные передаются от родительских компонентов к дочерним через свойства (props), что обеспечивает предсказуемость и упрощает отладку приложений.

Использование React

Широко используется для разработки как небольших, так и крупных веб-приложений, предоставляя разработчикам мощные инструменты для создания интерактивных пользовательских интерфейсов. Он может быть использован как в одностраничных приложениях (SPA), так и в многостраничных сайтах.

Также лежит в основе таких проектов, как Gatsby (статический сайт-генератор) и Next.js (фреймворк для серверного и статического рендеринга), расширяя его возможности для разработки веб-приложений.

Экосистема

Включает в себя не только саму библиотеку, но и множество связанных инструментов и библиотек, таких как:

✅ Redux/React Context для управления глобальным состоянием приложения.
✅ React Router для навигации между страницами без перезагрузки.
✅ React Native для разработки кросс-платформенных мобильных приложений с использованием JavaScript и React.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое хук ?
Спросят с вероятностью 10%

Хуки — это функции, которые позволяют "подключаться" к состоянию и жизненному циклу компонентов React из функциональных компонентов. Введение их предоставило мощный инструментарий для работы со состоянием, эффектами и другими возможностями React без необходимости преобразования функциональных компонентов в классы.

- useState: Позволяет функциональным компонентам иметь состояние.

    const [count, setCount] = useState(0);
  

- useEffect: Позволяет выполнять побочные эффекты в компоненте, такие как обращения к API, подписки и т.д. Это аналог методов жизненного цикла componentDidMount, componentDidUpdate, и componentWillUnmount в классовых компонентах.

    useEffect(() => {
    document.title = Вы нажали ${count} раз;
  }, [count]); // Эффект использует переменную состояния count
  

- useContext: Позволяет получить доступ к данным из контекста. Это упрощает передачу данных через дерево компонентов без необходимости передавать props на каждом уровне.

    const value = useContext(MyContext);
  

- useReducer: Предоставляет альтернативный способ управления состоянием, основанный на паттерне редьюсер. Это особенно полезно для управления сложным состоянием.

    const [state, dispatch] = useReducer(reducer, initialState);
  

- useCallback: Возвращает мемоизированный колбэк, который изменяется только если изменяются зависимости. Это помогает предотвратить ненужные ререндеры.

    const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
  

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

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  

- useRef: Возвращает изменяемый ref объект, который может быть использован для хранения значения на протяжении всего жизненного цикла компонента.

    const myRef = useRef(initialValue);
  

Хуки были введены для решения нескольких проблем:
✅ Упрощение переиспользования логики состояния между компонентами без необходимости создавать высшие порядковые компоненты или рендер-пропсы.
✅ Использование состояния и других возможностей React без написания классов.
✅ Организация логики внутри компонента по принципу использования, а не жизненного цикла.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

👾 Ребят, напоминаю, у нас есть приватные группы где мы делимся реальными собеседованиями и тестовыми заданиями. Чтобы попасть в эти в группы воспользуйтесь ботами:
🤖 Доступ к базе собесов
🤖 Доступ к базе тестовых заданий

Зачем в web-pack чанки ?
Спросят с вероятностью 3%

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

1️⃣ Ленивая загрузка (Lazy Loading)

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

2️⃣ Разделение кода (Code Splitting)

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

3️⃣ Кэширование

При правильной настройке чанки могут быть эффективно закэшированы браузером пользователя. Если часть кода приложения меняется редко (например, сторонние библиотеки), её можно выделить в отдельный чанк, который будет загружен один раз и сохранён в кэше браузера на долгое время. Это уменьшает объем данных, которые необходимо загружать при повторных посещениях.

4️⃣ Параллельная загрузка

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

Пример:

В конфигурации Webpack можно настроить разделение кода с помощью optimization.splitChunks, что позволяет автоматически определять и выделять общие модули в отдельные чанки.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Зачем нужны сокеты ?
Спросят с вероятностью 3%

Сокеты — это программные интерфейсы (API), позволяющие обеспечивать взаимодействие между приложениями по сети. Они используются для создания сетевых соединений для обмена данными между клиентом и сервером или между узлами в сети. Вот основные причины, по которым сокеты являются важным инструментом в разработке сетевых приложений:

1️⃣ Обеспечение двусторонней коммуникации

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

2️⃣ Работа в реальном времени

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

3️⃣ Поддержка множества клиентов

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

4️⃣ Гибкость и контроль

Предоставляют разработчикам большую гибкость и контроль над тем, как устанавливаются и управляются сетевые соединения. Разработчики могут определять, какие протоколы использовать (TCP, UDP и др.), как обрабатывать ошибки и потерю пакетов, а также как оптимизировать производительность для конкретных требований приложения.

5️⃣ Передача различных типов данных

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие протоколы взаимодействия существуют ?
Спросят с вероятностью 3%

В сфере веб-разработки и сетевых технологий существует множество протоколов взаимодействия, каждый из которых предназначен для решения определённых задач. Вот некоторые из наиболее распространённых и важных протоколов:

1️⃣ HTTP (HyperText Transfer Protocol)

Это основной протокол для передачи данных в интернете, используемый для загрузки веб-страниц (HTML, CSS, JavaScript и изображений) от сервера к клиенту, обычно веб-браузеру. HTTP определяет методы (например, GET и POST), которые клиенты могут использовать для выполнения запросов к серверам.

2️⃣ HTTPS (HTTP Secure)

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

3️⃣ WebSocket

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

4️⃣ FTP (File Transfer Protocol)

Это стандартный протокол передачи файлов между компьютерами по сети. Он используется для загрузки и скачивания файлов с сервера, администрирования сайтов и управления содержимым сервера.

5️⃣ SMTP (Simple Mail Transfer Protocol)

Это протокол для отправки электронных писем. Он используется почтовыми серверами для доставки отправленных писем в почтовые ящики получателей.

6️⃣ IMAP (Internet Message Access Protocol) и POP3 (Post Office Protocol version 3)

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

7️⃣ TCP/IP (Transmission Control Protocol/Internet Protocol)

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

8️⃣ DNS (Domain Name System)

Это система, которая переводит доменные имена в IP-адреса, позволяя пользователям легко находить веб-сайты в интернете без необходимости запоминать числовые IP-адреса.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие критерии оценки кода есть ?
Спросят с вероятностью 3%

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

1️⃣ Читаемость

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

2️⃣ Производительность

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

3️⃣ Поддерживаемость

- Модульность и повторное использование: Код должен быть организован так, чтобы его было легко модифицировать, расширять и повторно использовать. Использование функций, классов и модулей способствует этому.
- Тестирование: Наличие тестов (юнит-тесты, интеграционные тесты) упрощает обнаружение и исправление ошибок, а также помогает обеспечить стабильность приложения при внесении изменений.

4️⃣Безопасность

- Предотвращение уязвимостей: Код должен быть защищён от распространённых уязвимостей, таких как XSS (межсайтовый скриптинг), CSRF (межсайтовая подделка запроса) и SQL-инъекции, в случае работы с базами данных.

5️⃣ Совместимость

- Кроссбраузерность: Веб-приложения должны корректно работать в различных браузерах и на различных устройствах.
- Стандарты и спецификации: Следование стандартам веб-разработки, таким как спецификации ECMAScript, помогает обеспечить совместимость и корректное функционирование кода.

6️⃣ Эффективность разработки

- Инструменты и практики: Использование современных инструментов разработки, систем контроля версий и методологий разработки, таких как Agile или Scrum, может улучшить эффективность и качество кода.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие популярные подходы изобрели для redux ?
Спросят с вероятностью 3%

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

1️⃣ Redux Toolkit (RTK)

Это официальный инструмент, предназначенный для упрощения работы с Redux. Он предоставляет набор утилит, которые помогают сократить количество бойлерплейта при инициализации хранилища, создании редюсеров и действий. Он включает в себя такие функции, как configureStore, createReducer, createAction, и createSlice, которые значительно упрощают процесс работы с состоянием.

2️⃣ Redux Saga

Это библиотека, предназначенная для управления асинхронными операциями (например, доступом к данным, чистыми функциями для побочных эффектов) в приложениях React с использованием Redux. Саги написаны с использованием генераторов, что облегчает управление сложными потоками асинхронных действий.

3️⃣ Redux Thunk

Это промежуточное программное обеспечение (middleware) для Redux, позволяющее диспетчеризации функций вместо действий. Это позволяет откладывать выполнение действия или диспетчеризировать только при выполнении определённых условий. Thunk часто используется для работы с асинхронными запросами.

4️⃣ Reselect

Это библиотека для создания "мемоизированных" селекторов. Селекторы позволяют вычислять производные данные, основываясь на состоянии Redux, и эффективно пересчитывать результаты только при изменении соответствующих частей состояния. Это улучшает производительность, особенно в сложных приложениях.

5️⃣ Normalizr

Это библиотека для нормализации вложенных JSON структур. В контексте Redux она помогает преобразовать вложенные данные в плоскую структуру, что упрощает хранение и манипуляцию данными в хранилище.

6️⃣ Immutable.js

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что такое z-index ?
Спросят с вероятностью 3%

z-index — это свойство, которое определяет порядок наложения элементов на веб-странице по оси Z (перпендикулярно экрану пользователя). Элементы с таким более высоким значением будут располагаться поверх элементов с более низким значением этого свойства, что позволяет управлять тем, как элементы перекрывают друг друга на странице.

Ключевые аспекты:

1️⃣ Только для позиционированных элементов: Работает только для элементов, у которых свойство position установлено как relative, absolute, fixed, или sticky. Для элементов с position: static (значение по умолчанию) z-index не применяется.

2️⃣ Целочисленные значения: z-index может принимать целые числа (включая отрицательные), где элементы с более высоким значением будут находиться выше элементов с более низким значением.

3️⃣ Создание контекста наложения: Каждый элемент с установленным z-index создаёт новый контекст наложения для своих дочерних элементов. Это означает, что индекс дочерних элементов будет работать относительно их ближайшего родителя с позиционированием, а не всей страницы в целом.

4️⃣ Авто: Значение по умолчанию для него — auto. Это означает, что элемент наследует порядок наложения своего родителя и не создаёт новый контекст наложения.

.background {
  position: absolute;
  z-index: 1; /* Задний фон /
}

.foreground {
  position: absolute;
  z-index: 2; / Передний план */
}

В этом примере элемент с классом .foreground будет отображаться поверх элемента с классом .background из-за более высокого значения z-index.

Важно помнить:

✅ Элементы с более высоким z-index иногда могут блокировать доступ к элементам с более низким z-index, например, при попытке взаимодействия с формой или кнопками.
✅ Безумное использование высоких значений z-index (например, z-index: 99999) может привести к сложностям с поддержкой и отладкой кода. Лучше использовать умеренные значения и хорошо продуманную структуру наложения.
✅ Порядок элементов в HTML также влияет на их наложение. По умолчанию, элементы, которые идут позже в коде, будут располагаться поверх элементов, расположенных ранее, если их z-index не изменён.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

В чем философия redux ?
Спросят с вероятностью 3%

Философия Redux основана на трёх основных принципах, которые направлены на создание удобной, предсказуемой и управляемой архитектуры управления состоянием, особенно когда речь идёт о сложных интерфейсах с динамическими данными.

1️⃣ Единое источник истины (Single Source of Truth)

Весь состояние приложения хранится в одном объекте внутри одного хранилища (store). Это облегчает управление состоянием, так как для его изменения не нужно обращаться к разным источникам или управлять несколькими хранилищами. Единый источник истины также упрощает отладку и тестирование приложения, а также внедрение таких функций, как отмена/повторение действий или сохранение состояния.

2️⃣ Состояние доступно только для чтения (State is Read-Only)

Не может быть изменено напрямую. Чтобы изменить что-то в состоянии, необходимо отправить действие (action) — простой объект, описывающий, что должно произойти. Это гарантирует, что все изменения в приложении можно отследить через действия, что делает поток данных в приложении предсказуемым и понятным.

3️⃣ Изменения производятся с помощью чистых функций (Changes Are Made with Pure Functions)

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

Философия Redux заключается в создании единого источника истины для всего состояния приложения, обеспечении его неизменяемости за счёт использования действий для любых изменений и определении изменений состояния через чистые функции (редюсеры). Эти принципы позволяют разрабатывать более предсказуемые, стабильные и легко поддерживаемые приложения.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие библиотеки популярны в react ?
Спросят с вероятностью 3%

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

1️⃣ React Router

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

2️⃣ Redux

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

3️⃣ Axios

Это библиотека для выполнения HTTP-запросов. Она может использоваться в браузере и на сервере (Node.js). Предлагает широкий набор функций и удобный API для выполнения запросов к серверу и обработки ответов.

4️⃣ Material-UI

Содержит готовые компоненты, стилизованные согласно Material Design от Google. Это позволяет легко и быстро создавать красивые и функциональные пользовательские интерфейсы.

5️⃣ Styled Components

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

6️⃣ React Testing Library

Предназначена для тестирования компонентов. Она позволяет тестировать компоненты "как они есть", симулируя взаимодействие пользователя с интерфейсом, что делает тесты более надежными и удобными в поддержке.

7️⃣ React Query

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

Эти библиотеки являются лишь частью большой экосистемы инструментов, доступных для разработчиков React. Выбор конкретных библиотек зависит от требований проекта, предпочтений разработчика и специфики задач.

В экосистеме React популярны библиотеки для маршрутизации (React Router), управления состоянием (Redux), выполнения HTTP-запросов (Axios), стилизации (Material-UI, Styled Components), тестирования (React Testing Library) и работы с асинхронными данными (React Query).

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Что есть во фронтенде, кроме JS ?
Спросят с вероятностью 3%

Используются также HTML (HyperText Markup Language) и CSS (Cascading Style Sheets). Эти технологии являются основой веб-разработки и работают вместе для создания и стилизации веб-страниц.

HTML

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

CSS

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

Давайте рассмотрим простой пример, где мы используем HTML для создания структуры веб-страницы и CSS для стилизации:

<!DOCTYPE html>
<html>
<head>
    <title>Пример страницы</title>
    <style>
        body { font-family: Arial; }
        h1 { color: blue; }
        p { color: green; }
    </style>
</head>
<body>

<h1>Привет, мир!</h1>
<p>Это пример веб-страницы.</p>

</body>
</html>

В этом примере HTML используется для определения структуры страницы с заголовком и абзацем текста. Внутри тега <style> в заголовке страницы мы используем CSS для задания стилей: выбираем шрифт для всей страницы, задаём цвет заголовка и абзаца.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Зачем изучение функционального языка ?
Спросят с вероятностью 3%

Изучение функционального языка предлагает уникальную перспективу и набор преимуществ, дополняющих понимание и навыки, полученные от императивного и объектно-ориентированного программирования. Вот несколько ключевых причин, по которым стоит изучать функциональное программирование:

1️⃣ Чистота функций и побочные эффекты

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

2️⃣ Неизменяемость данных

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

3️⃣ Первоклассные и высшие функции

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

4️⃣ Упрощение параллельного и асинхронного кода

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

5️⃣ Функциональное мышление

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

6️⃣ Разнообразие и инновации

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых

Какие минусы у react ?
Спросят с вероятностью 3%

React — это популярная библиотека для построения пользовательских интерфейсов, созданная и поддерживаемая Facebook. Хотя React обладает многими преимуществами, такими как компонентный подход, виртуальный DOM и реактивное обновление, он также имеет некоторые недостатки. Рассмотрим основные минусы React:

1️⃣Высокий порог вхождения для новичков

✅Сложность экосистемы: React сам по себе может быть относительно простым для понимания, но экосистема вокруг него (Redux, React Router, JSX, Webpack и т.д.) может быть сложной для новичков. Разработчикам нужно освоить много дополнительных инструментов и библиотек, чтобы использовать React эффективно.
✅JSX: Хотя JSX делает код более декларативным, он может показаться непривычным и сложным для разработчиков, не знакомых с ним.

2️⃣Быстро меняющаяся экосистема

✅Частые обновления: React и его экосистема быстро развиваются, и это может затруднить поддержание кода в актуальном состоянии. Разработчикам часто приходится адаптировать свои проекты к новым версиям и изменениям.
✅Несовместимости: Бывают случаи, когда обновления ломают обратную совместимость, что требует дополнительного времени и усилий на обновление проекта.

3️⃣Настройка проекта

✅Boilerplate код: Создание нового проекта на React может потребовать значительного количества начального кода и конфигурации. Хотя инструменты, такие как Create React App, упрощают этот процесс, для более сложных проектов часто требуется ручная настройка Webpack, Babel и других инструментов.
✅Сложность сборки: Настройка сборочного процесса для оптимизации производительности и поддержки различных окружений может быть сложной задачей.

4️⃣Производительность

✅Проблемы с производительностью при большом количестве компонентов: Несмотря на оптимизации, такие как виртуальный DOM, большие и сложные React-приложения могут столкнуться с проблемами производительности. Неправильное управление состоянием или неоптимизированные компоненты могут привести к избыточным перерисовкам и снижению производительности.
✅Рендеринг больших списков: Работа с большими списками данных может быть медленной, и разработчикам приходится использовать такие техники, как виртуализация (например, react-window или react-virtualized) для улучшения производительности.

5️⃣SEO (Search Engine Optimization)

✅Проблемы с индексированием: Хотя React позволяет создавать динамичные и интерактивные приложения, серверный рендеринг (Server-Side Rendering, SSR) или статическая генерация (Static Site Generation, SSG) могут потребоваться для улучшения SEO. Это добавляет сложность в настройку и разработку.
✅Дополнительные инструменты: Для улучшения SEO могут потребоваться дополнительные инструменты и библиотеки, такие как Next.js.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что такое inline block в отличии от inline элемента ?
Спросят с вероятностью 3%

Есть несколько значений для свойства display, которые определяют, как элемент будет отображаться на странице. Два из этих значений — inline и inline-block — имеют некоторые сходства, но и значительные отличия.

1️⃣ Inline элементы

Элементы с display: inline; ведут себя как часть текста. Это значит, что:

- Они располагаются на одной строке с другими инлайн-элементами или текстом, если только ширина родительского элемента не заставляет их обтекать.
- У инлайн-элементов нельзя задать ширину (width) и высоту (height), так как размеры определяются содержимым.
- Вертикальные отступы (margin-top и margin-bottom) и вертикальные внутренние отступы (padding-top и padding-bottom) не влияют на расстояние между инлайн-элементами вертикально, хотя могут влиять на фоновое изображение или цвет.
- Горизонтальные отступы и внутренние отступы применяются нормально.

Примеры инлайн-элементов: <span>, , <img>.

2️⃣ Inline-block элементы

Элементы с display: inline-block; комбинируют некоторые свойства инлайн и блочных элементов:

- Как и инлайн элементы, эти элементы располагаются на одной строке с другими инлайн-элементами или текстом.
- В то же время, у них можно задать ширину и высоту, как у блочных элементов.
- Вертикальные и горизонтальные отступы (margin и padding) работают как у блочных элементов, влияя на расстояние вокруг элемента во всех направлениях.
- Элементы могут содержать другие блочные или инлайн элементы.

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🔐 База собесов | 🔐 База тестовых