В чем философия 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. Ставь 👍 если нравится контент.

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

Для чего нужен cors ?
Спросят с вероятностью 3%

CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он был введен для решения проблем, связанных с политикой одного источника (Same-Origin Policy), которая предотвращает взаимодействие между ресурсами из разных источников, чтобы защитить данные от межсайтовых атак.

Основные задачи

1️⃣Обеспечение безопасности
✅CORS помогает предотвратить атаки, такие как XSS (Cross-Site Scripting) и CSRF (Cross-Site Request Forgery), ограничивая доступ к ресурсам на сервере только с доверенных доменов.

2️⃣Разрешение легитимного кросс-доменного обмена данными
✅CORS позволяет легитимным веб-приложениям запрашивать ресурсы с других доменов. Это важно для современных веб-приложений, которые часто взаимодействуют с API и ресурсами, размещенными на разных серверах.

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

Добавляет новые HTTP-заголовки, которые позволяют серверу сообщать браузеру, разрешено ли выполнение кросс-доменных запросов.

1️⃣HTTP-заголовки, используемые для CORS

✅Access-Control-Allow-Origin: Определяет, какие домены могут обращаться к ресурсам сервера.
✅Access-Control-Allow-Methods: Определяет, какие HTTP-методы (например, GET, POST, PUT, DELETE) разрешены для кросс-доменных запросов.
✅Access-Control-Allow-Headers: Определяет, какие заголовки могут быть использованы в кросс-доменных запросах.
✅Access-Control-Allow-Credentials: Указывает, разрешено ли отправлять куки и авторизационные данные вместе с запросом.
✅Access-Control-Max-Age: Указывает, как долго результаты проверки могут кэшироваться.

2️⃣Процесс CORS-запроса

Простой запрос (Simple Request)
✅Запросы с методами GET, HEAD или POST и с ограниченным набором безопасных заголовков считаются простыми и обрабатываются напрямую.

Предварительный запрос (Preflight Request)
✅Для методов, отличных от GET, HEAD и POST (или если используются нестандартные заголовки), браузер сначала отправляет "предварительный" запрос с методом OPTIONS. Этот запрос проверяет, разрешен ли кросс-доменный доступ.
✅Если сервер разрешает запрос, он отвечает с соответствующими заголовками CORS. Только после этого браузер отправляет основной запрос.

Пример простого запроса:

Запрос:

GET /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com

Ответ:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://anotherdomain.com
Content-Type: application/json

{"message": "Success"}

Пример предварительного запроса:

Предварительный запрос:

OPTIONS /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

Ответ на предварительный запрос:

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://anotherdomain.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

Основной запрос (если предварительный запрос успешен):

POST /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com
Content-Type: application/json

{"data": "Some data"}

Ответ на основной запрос:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://anotherdomain.com
Content-Type: application/json

{"message": "Data received"}

CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он помогает защитить данные от межсайтовых атак и разрешает легитимные кросс-доменные запросы, обеспечивая взаимодействие между веб-приложениями и API, размещенными на разных серверах. CORS добавляет специальные HTTP-заголовки для управления доступом и может включать предварительные запросы для проверки разрешений.

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

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

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

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

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

1️⃣ Установите атрибут id для целевого элемента на странице. Должен быть уникальным в пределах страницы.

<div id="section1">Это целевая секция</div>

2️⃣ Создайте ссылку с атрибутом href, значение которого начинается с символа #, за которым следует id целевого элемента.

Перейти к целевой секции

3️⃣ Когда пользователь кликает по такой ссылке, браузер автоматически прокручивает страницу до элемента с соответствующим id.

<!DOCTYPE html>
<html>
<head>
    <title>Пример страницы с якорными ссылками</title>
</head>
<body>

<h2>Перейти к Секции 1</h2>
<h2>Перейти к Секции 2</h2>

<div style="height:600px;">
    <p>Прокрутите вниз</p>
</div>

<h2 id="section1">Секция 1</h2>
<p>Некоторый контент...</p>

<div style="height:500px;">
    <p>Прокрутите вниз</p>
</div>

<h2 id="section2">Секция 2</h2>
<p>Ещё некоторый контент...</p>

</body>
</html>

В этом примере, кликая на "Перейти к Секции 1" или "Перейти к Секции 2", пользователь будет направлен к соответствующему разделу на странице.

Дополнительные применения:

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

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

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

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

Зачем нужны разные хештеги ?
Спросят с вероятностью 7%

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

1️⃣ Хештеги в социальных сетях:

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

      #пример - делает ваш пост видимым для всех, кто ищет посты с этим хештегом.
   

2️⃣ Хештеги в URL (якорные ссылки):

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

      Перейти к разделу 1
   <div id="section1">Содержимое раздела 1</div>
   

В этом примере, когда пользователь кликает на ссылку "Перейти к разделу 1", страница прокручивается к <div id="section1">.

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

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

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

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

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

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

1️⃣Управление состоянием и реактивность

React
Был создан для решения проблем управления состоянием и реактивности в пользовательских интерфейсах. Он предоставляет компонентный подход к построению UI и использует виртуальный DOM для оптимизации обновлений пользовательского интерфейса.

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

// Пример компонента React
import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

2️⃣Обработка сложных данных и взаимодействий

Angular
Предоставляет комплексный фреймворк для построения крупных приложений с сложными взаимодействиями и управлением состоянием.

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

// Пример компонента Angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello, {{ name }}!</h1>`,
})
export class AppComponent {
  name = 'World';
}

3️⃣Простота и гибкость

Vue.js
Созданный Эваном Ю (Evan You), стремится предоставить простой и гибкий инструмент для построения пользовательских интерфейсов, который легко интегрируется с существующими проектами.

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

// Пример компонента Vue.js
<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script>
export default {
  data() {
    return {
      name: 'World',
    };
  },
};
</script>

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

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

✅Виртуальный DOM (React): Обновления в DOM происходят только тогда, когда это необходимо, что снижает нагрузку на браузер.
✅Change Detection (Angular): Оптимизированный механизм обнаружения изменений позволяет эффективно обновлять представление.

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

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

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

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

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

1️⃣ Компонентный подход: Приложения состоят из компонентов. Компонент — это кусочек пользовательского интерфейса, который можно использовать повторно. Каждый компонент имеет своё состояние и пропсы (параметры, которые передаются от родительского компонента), что делает его независимым и способным к самостоятельной работе.

2️⃣ JSX: Использует JSX — синтаксис, похожий на HTML, для описания структуры интерфейса. Он делает код компонентов более читабельным и упрощает процесс их создания.

      function App() {
     return <div>Привет, мир!</div>;
   }
   

3️⃣ Виртуальный DOM: Одной из главных особенностей является использование виртуального DOM — лёгкой копии реального DOM. Это позволяет React оптимизировать обновления интерфейса, сначала применяя изменения к виртуальному DOM, а затем, после вычисления наиболее эффективных изменений, к реальному DOM. Это существенно повышает производительность, особенно при работе с большими объёмами данных.

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

5️⃣ Хуки: С появлением хуков он стал ещё более мощным и гибким. Хуки позволяют использовать состояние и другие его возможности без написания классов. Например, хук useState позволяет добавить состояние к функциональному компоненту.

      import { useState } from 'react';

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

     return (
       <div>
         <p>Вы кликнули {count} раз</p>
         <button onClick={() => setCount(count + 1)}>
           Нажми на меня
         </button>
       </div>
     );
   }
   

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

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

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

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

Какую проблему решает асинхронность в js ?
Спросят с вероятностью 3%

Асинхронность решает проблему блокировки основной нити выполнения (main thread) при выполнении длительных операций. Основная нить выполнения отвечает за обработку пользовательского интерфейса, а также за выполнение кода. Если длительные операции, такие как сетевые запросы, таймеры или ввод/вывод, выполняются синхронно, они могут блокировать пользовательский интерфейс, делая приложение неотзывчивым и неудобным для пользователя. Асинхронность позволяет выполнять такие операции параллельно, не блокируя основную нить.

Основные проблемы

1️⃣Блокировка пользовательского интерфейса (UI)
✅Синхронные операции, такие как загрузка данных из сети, чтение файлов или выполнение сложных вычислений, могут блокировать основной поток, замораживая интерфейс и делая приложение неотзывчивым.
✅Асинхронные операции позволяют избежать этой блокировки, выполняя задачи в фоновом режиме и возвращаясь к основному потоку, когда результаты готовы.

function fetchData() {
  const request = new XMLHttpRequest();
  request.open('GET', 'https://api.example.com/data', false); // false для синхронного запроса
  request.send();
  if (request.status === 200) {
    console.log(request.responseText);
  }
}

fetchData();
console.log('Этот код выполнится только после завершения fetchData');

2️⃣Параллельное выполнение задач
✅Асинхронные операции позволяют выполнять несколько задач параллельно, что повышает производительность и эффективность приложения.
✅Например, загрузка нескольких ресурсов (изображений, скриптов, стилей) одновременно может значительно ускорить время загрузки страницы.

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

Promise.all(urls.map(url => fetch(url).then(response => response.json())))
  .then(results => {
    console.log('All data fetched:', results);
  })
  .catch(error => console.error('Error fetching data:', error));

3️⃣Обработка событий и таймеров
✅Асинхронные функции, такие как setTimeout и setInterval, позволяют выполнять задачи с задержкой или периодически, не блокируя основной поток.
✅Это полезно для выполнения задач по расписанию, создания анимаций, обработки пользовательских событий и многого другого.

console.log('Start');
setTimeout(() => {
  console.log('Executed after 2 seconds');
}, 2000);
console.log('End');

4️⃣Работа с I/O (ввод/вывод)
✅Асинхронные операции ввода/вывода позволяют эффективно обрабатывать задачи чтения и записи данных, например, при работе с файлами или базами данных.
✅Это важно для серверных приложений, обрабатывающих множество одновременных запросов без блокировки.

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
    return;
  }
  console.log('File content:', data);
});

console.log('This code runs while the file is being read');

Основные механизмы

1️⃣Коллбэки (Callbacks)
✅Функции обратного вызова, которые вызываются по завершении асинхронной операции.

function fetchData(callback) {
  setTimeout(() => {
    const data = 'Some data';
    callback(data);
  }, 1000);
}

fetchData(data => {
  console.log('Data received:', data);
});

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

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

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

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

Принципы SOLID — это набор из пяти принципов ООП, которые помогают разработчикам создавать более понятный, гибкий и поддерживаемый код. Эти принципы были популяризированы Робертом Мартином (Robert C. Martin), также известным как "дядя Боб". Вот что обозначает каждый принцип:

1️⃣Single Responsibility Principle (Принцип единственной ответственности):
✅Каждый класс должен иметь одну и только одну причину для изменения, то есть одну ответственность.
✅Это помогает сделать код более понятным и облегчает его поддержку, так как каждая часть кода отвечает только за одну конкретную задачу.

        // Пример плохого кода
    class User {
        void saveToDatabase() {
            // сохраняет пользователя в базу данных
        }
        
        void sendEmail() {
            // отправляет приветственное письмо пользователю
        }
    }

    // Пример хорошего кода
    class UserRepository {
        void save(User user) {
            // сохраняет пользователя в базу данных
        }
    }
    
    class EmailService {
        void sendWelcomeEmail(User user) {
            // отправляет приветственное письмо пользователю
        }
    }
    

2️⃣Open/Closed Principle (Принцип открытости/закрытости):
✅Программные сущности (классы, модули, функции) должны быть открыты для расширения, но закрыты для модификации.
✅Это означает, что мы должны иметь возможность добавлять новый функционал без изменения существующего кода.

        // Пример плохого кода
    class Rectangle {
        void draw() {
            // рисует прямоугольник
        }
    }

    class Circle {
        void draw() {
            // рисует круг
        }
    }

    class GraphicEditor {
        void drawShape(Object shape) {
            if (shape instanceof Rectangle) {
                ((Rectangle) shape).draw();
            } else if (shape instanceof Circle) {
                ((Circle) shape).draw();
            }
        }
    }

    // Пример хорошего кода
    interface Shape {
        void draw();
    }

    class Rectangle implements Shape {
        public void draw() {
            // рисует прямоугольник
        }
    }

    class Circle implements Shape {
        public void draw() {
            // рисует круг
        }
    }

    class GraphicEditor {
        void drawShape(Shape shape) {
            shape.draw();
        }
    }
    

3️⃣Liskov Substitution Principle (Принцип подстановки Барбары Лисков):
✅Объекты в программе должны быть заменяемы экземплярами их подклассов без изменения правильности выполнения программы.
✅То есть, подклассы должны дополнять, а не изменять поведение базового класса.

        // Пример плохого кода
    class Bird {
        void fly() {}
    }

    class Ostrich extends Bird {
        void fly() {
            throw new UnsupportedOperationException();
        }
    }

    // Пример хорошего кода
    class Bird {}
    
    class FlyingBird extends Bird {
        void fly() {}
    }

    class Ostrich extends Bird {}
    
    class Sparrow extends FlyingBird {
        void fly() {
            // реализация полета для воробья
        }
    }

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

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

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

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

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

1️⃣Запрос ресурса:
✅Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с http:// или https://, браузер отправляет запрос на сервер.

        GET /index.html HTTP/1.1
    Host: example.com

2️⃣DNS-разрешение:
✅Браузер преобразует доменное имя (например, example.com) в IP-адрес с помощью DNS-сервера.

3️⃣Установка соединения:
✅Браузер устанавливает TCP-соединение с сервером, а если используется https, то устанавливает также SSL/TLS-соединение для безопасной передачи данных.

4️⃣Отправка HTTP-запроса:
✅Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.

        GET /index.html HTTP/1.1
    Host: example.com

5️⃣Получение HTTP-ответа:
✅Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.

        HTTP/1.1 200 OK
    Content-Type: text/html

    <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

6️⃣Разбор (парсинг) HTML:
✅Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.

        <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

7️⃣Обработка CSS:
✅Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).

       h1 {
        color: blue;
    }

8️⃣Построение рендер-дерева:
✅DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице.

9️⃣Визуализация (рендеринг):
✅Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка).

🔟Обработка JavaScript:
✅Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.

document.querySelector('h1').textContent = 'Hello, JavaScript!';

1️⃣1️⃣Асинхронные операции:
✅Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы.

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

Браузер запрашивает у сервера веб-страницу, получает HTML, CSS и JavaScript, строит и отображает страницу на экране, обрабатывая взаимодействия пользователя и изменения в реальном времени.

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

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

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

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

Вот основные типы селекторов и их примеры:

1️⃣Селекторы по тегу:
✅Выбирает все элементы с определённым тегом.

        p {
        color: blue;
    }
    

2️⃣Селекторы по классу:
✅Выбирает элементы с определённым классом. Класс указывается с помощью точки ..

        .example {
        font-size: 16px;
    }
    

3️⃣Селекторы по идентификатору (ID):
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки #.
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки #.

        #uniqueElement {
        background-color: yellow;
    }
    

4️⃣Комбинированные селекторы:
✅Позволяют выбирать элементы, используя комбинацию различных критериев.
✅Селекторы потомков: выбирают элементы, которые находятся внутри другого элемента.

        div p {
        margin: 20px;
    }

✅Селекторы дочерних элементов: выбирают элементы, которые являются дочерними для другого элемента.

        div > p {
        margin: 20px;
    }

✅Смежные селекторы: выбирают элементы, которые следуют непосредственно за другим элементом.

        h1 + p {
        margin-top: 10px;
    }

✅Селекторы по атрибуту: выбирают элементы с определённым атрибутом.

        a[href] {
        color: red;
    }

5️⃣Псевдоклассы:
✅Позволяют выбирать элементы в определённом состоянии.

        a:hover {
        color: green;
    }

6️⃣Псевдоэлементы:
✅Позволяют стилизовать определённые части элементов.

        p::first-line {
        font-weight: bold;
    }

Примеры:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример селекторов</title>
    <style>
        /* Селектор по тегу */
        h1 {
            color: blue;
        }
        /* Селектор по классу */
        .highlight {
            background-color: yellow;
        }
        /* Селектор по ID */
        #main {
            font-size: 20px;
        }
        /* Селектор по атрибуту */
        a[target="_blank"] {
            color: red;
        }
        /* Псевдокласс */
        a:hover {
            text-decoration: underline;
        }
        /* Псевдоэлемент */
        p::first-letter {
            font-size: 200%;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Заголовок</h1>
    <p class="highlight">Это пример текста с подсветкой.</p>
    <p id="main">Это основной текст.</p>
    <a href="https://example.com" target="_blank">Ссылка</a>
</body>
</html>

Селектор — это шаблон, который выбирает элементы HTML для применения стилей. Существуют разные типы селекторов, такие как по тегу, классу, ID, а также комбинированные селекторы, псевдоклассы и псевдоэлементы.

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

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