Largest 5 digit number in a series

В следующем 6-значном номере:

283910

91 - наибольшая последовательность из 2 цифр подряд.

В следующем 10-значном числе:

1234567890

67890 - наибольшая последовательность из 5 последовательных цифр.

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

👉 @frontendInterview

​В чем различие методов 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

7 дней бесплатного обучения разработке сайтов, которые не сделают из новичка опытного прогера и не устроят на работу…

Зато покажут, как, даже не имея опыта в программировании:

1. Сверстать качественный веб-сайт на HTML + CSS;
2. Оживить страницу с помощью JavaScript;
3. Понять фронтенд-фреймворк Angular;
4. Подключить Backend и загрузить сайт на хостинг.

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

Оцени, как получилось у других новичков:
🔥 Алексей заработал $150 за сайт. Взял за основу домашку с курса.
🔥 Андрею заплатили 30 000₽ за сайт для свадебного агентства.
🔥 Оксана получила первый заказ на 10 000₽ и крутой опыт общения с клиентом.

👉 Успей ухватить курс бесплатно

⏳ 21 июня закроется регистрация на текущий поток.

👉 @frontendInterview

Загрузка файла с прогресс-баром

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

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

👉 @frontendInterview

Юнит-тестирование в Angular: лучшие практики и инструменты

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

- Почему важно писать юнит-тесты
- Зачем мокать зависимости и каковы плюсы и минусы
- Что такое SIFERS и почему это важно
- Что такое Angular Testing Library (ATL)
- Как тестировать с помощью SIFERS
- Как получать элементы DOM и генерировать события
- Что такое jest-auto-spies и observer-spy

👉 @frontendInterview

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

👉 @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

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

Sort Numbers

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

Например:

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

👉 @frontendInterview

Зачем нужен 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

От кнопки до продакшена: как мы делаем Telegram Mini Apps

Telegram Mini Apps — это мощный инструмент, который позволяет создавать интерактивные веб-приложения, работающие прямо внутри мессенджера. Они идеально подходят для игр, маркетплейсов, сервисов бронирования и многого другого.

В этом туториале мы разберем процесс создания Mini App:
- настроим проект
- создадим фронтенд на React с поддержкой Telegram SDK
- реализуем бэкенд на Python (Django)
- свяжем все компоненты и развернем приложение.

👉 @frontendInterview

Стрелочные функции JS, быстро, просто и без проблем

Сегодня мы заберем важную тему → "Стрелочные функции JS"

Содержание:
1. Стрелочные функции: arguments, hoisting
2. Работа с контекстом
3. Методы присваивания контекста
4. Обработчик событий

👉 @frontendInterview