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

Зачем нужен React Context? React Context (React.createContext) предоставляет способ передачи данных через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне. Она полезна для управления состоянием, которое должно быть доступно во многих частях приложения, не пропуская его через каждый уровень компонентов. Основные случаи использования React Context: Context часто используется для управления глобальным состоянием приложения, например, текущим пользователем, настройками темы, языковыми настройками и другими данными, которые должны быть доступны в различных частях приложения. 1. Темизация: Context позволяет легко управлять темами (например, светлая/темная тема) и применять их к разным компонентам без необходимости передавать тему через пропсы. 2. Аутентификация: Context может быть использован для хранения и передачи информации о текущем пользователе и его аутентификационном статусе. 3. Настройки локализации: Context позволяет управлять и передавать текущие языковые настройки, обеспечивая локализацию и интернационализацию приложения. Примеры использования React Context: Создание контекста:

import React from 'react';

// Создание контекста с дефолтным значением
const ThemeContext = React.createContext('light');

Использование Provider для предоставления значения контекста:

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>Themed Button</button>}
    </ThemeContext.Consumer>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Преимущества использования React Context: 1. Упрощает управление состоянием: Context позволяет избегать "prop drilling" — необходимости передавать пропсы через множество уровней компонентов. 2. Повышает читаемость и поддержку кода: Централизованное управление состоянием и данными улучшает читаемость и упрощает поддержку кода. Когда не следует использовать React Context: 1. Избыточное использование: Контекст не следует использовать для данных, которые изменяются часто или предназначены только для узкой области компонента. Частые изменения данных в контексте могут привести к избыточному рендерингу компонентов. 2. Сложные состояния: Для управления сложными состояниями и побочными эффектами лучше использовать специализированные библиотеки, такие как Redux или MobX. 👉 @frontendInterview

Sort Numbers Доработайте решение так, чтобы оно сортировало переданный массив чисел. Если функция передала пустой массив или значение null/nil, то она должна вернуть пустой массив. Например:

solution([1, 2, 10, 50, 5]); // should return [1,2,5,10,50]
solution(null); // should return []

👉 @frontendInterview

State Management with React Query: Improve developer and user experience by mastering server state in React Начиная с краткой истории управления состоянием в экосистеме React, вы узнаете, что послужило причиной перехода от глобального состояния к состоянию клиента и сервера и, таким образом, поймете необходимость создания React Query. По мере продвижения по главам вы увидите, как React Query позволяет выполнять задачи, связанные с состоянием сервера, такие как выборка, кэширование, обновление и синхронизация данных с сервером. Но это еще не все: освоив React Query, вы сможете применить эти знания для работы с состоянием сервера в серверных фреймворках рендеринга. Вы также будете работать с паттернами для тестирования вашего кода, используя библиотеку тестирования и Mock Service Worker. 👉 @frontendInterview

​В чем разница == и === ? Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода. Оператор == (равно) Сравнивает значения двух переменных, но перед сравнением производит приведение типов, если переменные относятся к разным типам. Это означает, что если вы сравниваете число с строкой, JavaScript попытается преобразовать строку в число, а затем сравнить эти два значения. Этот процесс может привести к неинтуитивным результатам. Примеры:

'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка

Оператор ===(строго равно) В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым. Примеры:

'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы

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

Как защитить бизнес от киберугроз? Количество киберинцидентов за последние 5 лет выросло в 2,3 раза. Бизнес всё чаще сталкивается с репутационными и операционными рисками, а ответственность ложится на топ-менеджмент. СберУниверситет совместно с партнёром Positive Technologies* запускает программу «Информационная безопасность бизнеса». Программа ориентирована на генеральных директоров, операционных директоров и других управленцев — тех, кто принимает решения и отвечает за устойчивость бизнеса. Это двухдневный интенсив с кейсами атак, симуляцией кризиса и практическими инструментами, которые помогут выстроить стратегию защиты и повысить устойчивость компании к цифровым угрозам. Старт — 5 июля. Подробнее — по ссылке. *Positive Technologies — лидер в области результативной кибербезопасности. Записаться #реклама 16+ sberuniversity.ru О рекламодателе

Если вы вдруг забыли как выглядит фуллстэк 👉 @frontendInterview

Чемпионат для подростков по 10 направлениям от «Алабуга Политех»☺️ Программирование и Битва роботов, Экономика и Юриспруденция, 3D моделирование и Английский язык и многое другое, чтобы каждый нашел свою дисциплину. Для участия тебе нужно☺️ ☺️Оставь заявку на сайте ☺️Пройди заочный этап на HR-платформе: Business Cats до 1,0 по «Общению» и «Аналитике» для оплаты дороги туда и обратно ☺️Приезжай на чемпионат Мы предлагаем тебе☺️ ☺️Общий призовой фонд турнира составляет 1 000 000 рублей ☺️Проживание и дорога бесплатно ☺️Возможность поступить в «Алабуга Политех» Участвуй в турнире от образовательного центра мирового уровня и получай призы и преимущество в поступлении☺️

Инструменты для дома и дачи Ресанта ⚡Скидки до 40% на мойки высокого давления и дрели-шуруповёрты от брендов Ресанта, Huter и Вихрь! Надёжная техника для вашего дома и участка 👍 Купить #реклама market.yandex.ru О рекламодателе

Юнит-тестирование в Angular: лучшие практики и инструменты В этой статье я хочу поделиться опытом, который накопил за годы работы с юнит-тестами в Angular. Вот о чём пойдёт речь: - Почему важно писать юнит-тесты - Зачем мокать зависимости и каковы плюсы и минусы - Что такое SIFERS и почему это важно - Что такое Angular Testing Library (ATL) - Как тестировать с помощью SIFERS - Как получать элементы DOM и генерировать события - Что такое jest-auto-spies и observer-spy 👉 @frontendInterview

🐍💩👩‍💻👩‍💻🧑‍💻🧑‍💻🐧👩‍💻🧑‍💻👩‍💻👩‍💻 В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++/C# (343 видео, 87 книги) — Java/QA (176 видео, 32 книги) — Git/Linux (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP/1С (227 видео, 83 книги) — SQL/БД (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go/Rust (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложили в Telegram

Загрузка файла с прогресс-баром Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Если файлы большие, то хорошей практикой будет показывать пользователю прогресс и результат загрузки файла. Для этого можно использовать прогресс-бар. Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому в статье будет рассмотрена организация отправки файла на стороне клиента: HTML-разметка, стилизация элементов и JS-код для передачи файла на сервер. 👉 @frontendInterview

ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ Айтишники поймут ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ

Большая кладовая онлайн-курсов Stepik – незаменимый спутник для тех, кто работает удаленно и любит путешествовать, так как помогает учиться в любой точке мира. Это отличная альтернатива чтению книги и просмотру фильма: позволит вам скоротать время в дороге, осваивая полезный навык или подтягивая иностранный язык, особенно удобно это делать в мобильном приложении. У Stepik есть свой телеграм-канал, в котором они рассказывают об авторских курсах (как платных, так и бесплатных), а также публикует полезные статьи и ссылки. У них есть такие подборки курсов: - Разработка на Python - Дизайн и графика - Тестирование ПО - Работа с данными Подпишитесь на stepik_courses и найдите интересующий курс для себя! Подписаться #реклама 16+ О рекламодателе

👉 @frontendInterview

7 дней бесплатного обучения разработке сайтов, которые не сделают из новичка опытного прогера и не устроят на работу… Зато покажут, как, даже не имея опыта в программировании: 1. Сверстать качественный веб-сайт на HTML + CSS; 2. Оживить страницу с помощью JavaScript; 3. Понять фронтенд-фреймворк Angular; 4. Подключить Backend и загрузить сайт на хостинг. А главное, там можно пообщаться с экспертами и получить совет по доработке своего проекта. Оцени, как получилось у других новичков: 🔥 Алексей заработал $150 за сайт. Взял за основу домашку с курса. 🔥 Андрею заплатили 30 000₽ за сайт для свадебного агентства. 🔥 Оксана получила первый заказ на 10 000₽ и крутой опыт общения с клиентом. 👉 Успей ухватить курс бесплатно ⏳ 21 июня закроется регистрация на текущий поток.

​В чем различие методов call apply bind? Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении. Сall Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть. Пример:

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

Здесь он используется для вызова функции greet с this, установленным в "Earth", и двумя дополнительными аргументами "Hello" и "Alice". Apply Очень похож на call, но принимает аргументы в виде массива, а не по отдельности. Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

В этом случае он вызывает функцию greet с this, установленным в "Earth", и аргументами, переданными в виде массива. Bind Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже. Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

Здесь он используется для создания новой функции greetEarth, которая при вызове выводит тот же результат, что и предыдущие примеры, но с тем отличием, что контекст this и аргументы были заранее заданы. 👉 @frontendInterview

Largest 5 digit number in a series В следующем 6-значном номере:

283910

91 - наибольшая последовательность из 2 цифр подряд. В следующем 10-значном числе:

1234567890

67890 - наибольшая последовательность из 5 последовательных цифр. Заполните решение так, чтобы оно возвращало наибольшую последовательность из пяти последовательных цифр, найденных в заданном числе. Число будет передано в виде строки, состоящей только из цифр. Решение должно вернуть пятизначное целое число. Передаваемое число может быть до 1000 цифр. 👉 @frontendInterview