Разбор задачи с собеседования: Реализация Promise.all

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

Что такое Promise.all
Promise.all - это метод, который принимает массив промисов и возвращает новый промис, который разрешается, когда все промисы в массиве успешно завершены, или отклоняется, если хотя бы один промис отклонен.

Задача
Написать функцию promiseAll, которая ведет себя подобно Promise.all.
Функция должна:
1. Возвращать промис.
2. Разрешаться с массивом результатов, когда все промисы выполнены.
3. Отклоняться с той же причиной, что и первый отклоненный промис из массива.

Реализация promiseAll

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError('Arguments must be an array'));
    }

    const resolvedValues = [];
    let resolvedCount = 0;
    const promisesCount = promises.length;

    if (promisesCount === 0) {
      resolve(resolvedValues);
    }

    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(value => {
          resolvedValues[index] = value;
          resolvedCount += 1;
          if (resolvedCount === promisesCount) {
            resolve(resolvedValues);
          }
        })
        .catch(reject);
    });
  });
}

Объяснение реализации
1. Функция promiseAll принимает массив промисов promises.
2. Если promises не является массивом, функция отклоняется с TypeError.
3. Создаются переменные для хранения разрешенных значений и счетчика разрешенных промисов.
4. Промисы перебираются с помощью forEach, обрабатываясь через Promise.resolve для поддержки не-промисов.
5. Каждый раз, когда промис разрешается, его значение записывается в resolvedValues, и увеличивается resolvedCount.
6. При достижении resolvedCount значения promisesCount массив resolvedValues возвращается.
7. В случае отклонения любого промиса, основной промис отклоняется.

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

#interview #javascript

Разбираемся с схлопыванием отступов в CSS

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

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

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

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

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

#css

Использование useRef в React и почему createRef не подходит для функциональных компонентов

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

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

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

function Component() {
  const ref = useRef(null);

  useEffect(() => {
    ref.current.focus();
  }, []);

  return <input ref={ref} />;
}

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

Заключение
Для функциональных компонентов в React всегда стоит выбирать useRef из-за его стабильности и совместимости с хуками. В классовых компонентах подходящим выбором остается createRef

Софт скиллы для программистов

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

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

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

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

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

Разбор задачи с собеседования: Потеря this в методе объекта

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

Исходный код:

const todoService = {
  activeStatus: 'progress',
  todoItems: [
    { task: 'Подписаться на канал True Frontender', status: 'completed' },
    { task: 'Выучить JavaScript', status: 'progress' },
  ],
  getFilteredTodosByStatus: function() {
    return this.todoItems.filter(function(todo) {
        return todo.status === this.activeStatus;
    });
  }
};

console.log(todoService.getFilteredTodosByStatus());

Что делает код:
- Объявляется объект todoService, который содержит текущий фильтр для задач (activeStatus), массив объектов задач (todoItems), и метод getFilteredTodosByStatus.
- Метод getFilteredTodosByStatus предназначен для возврата задач, чей статус совпадает с activeStatus.
- В методе filter используется обычная функция, что может привести к потере контекста this.


Проблема:
Внутри функции, переданной в filter, this не будет ссылаться на объект todoService, а будет undefined или ссылаться на window, в зависимости от строгого режима (use strict).
Это означает, что this.activeStatus будет undefined, и метод getFilteredTodosByStatus не сможет корректно отфильтровать пользователей.

Как исправить:
Используйте стрелочную функцию для сохранения контекста this из внешней функции:

getFilteredTodosByStatus: function() {
  return this.todoItems.filter((todo) => {
    return todo.status === this.activeStatus;
  });
}

Или используйте переменную для сохранения контекста перед вызовом filter:

getFilteredTodosByStatus: function() {
  const currentActiveStatus = activeStatus;
  return this.todoItems.filter(function(todo) {
    return todo.status === currentActiveStatus;
  });
}

Итого:
Эта задача проверяет понимание особенностей работы с контекстом в JavaScript и способности решать распространенные проблемы, связанные с потерей контекста.

#interview #javascript

Введение в паттерны

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

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

Эти паттерны находят применение, например, в ситуациях, где требуется создать группы тесно связанных объектов.

Структурные паттерны
Структурные паттерны помогают создавать большие структуры из объектов и классов. Они обеспечивают эффективное взаимодействие между различными частями, используя наследование и композицию.
Структурные паттерны включают:
- Адаптер
- Мост
- Декоратор
- Фасад
- Компоновщик
- Прокси
- Приспособленец

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

Поведенческие паттерны
Поведенческие паттерны фокусируются на взаимодействиях и обязанностях между объектами. Они помогают определить, как различные компоненты системы взаимодействуют друг с другом.
В их число входят:
- Цепочка обязанностей
- Команда
- Итератор
- Посредник/Медиатор
- Наблюдатель
- Состояние
- Стратегия
- Посетитель
- Хранитель
- Шаблонный метод

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

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

#patterns

Разница между useEffect и useLayoutEffect в React

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

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

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

useLayoutEffect
useLayoutEffect работает аналогично useEffect, но вызывается синхронно после всех изменений DOM, но перед перерисовкой на экране. Это значит, что все изменения, выполненные в useLayoutEffect, будут отражены на экране сразу после его выполнения.

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

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

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

#react

Default Export vs Named Export

В JavaScript есть два основных типа экспорта: default (по умолчанию) и named (именованный). Понимание их различий важно для эффективной организации кода и его повторного использования.

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

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

// Экспорт
export default function Component() { ... }

// Импорт
import Component from './Component';

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

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

// Экспорт
export const utility1 = () => { ... };
export const utility2 = () => { ... };

// Импорт
import { utility1, utility2 } from './Utilities';

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

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

#javascript

Разбор задачи с собеседования: Реализация Promise.allSettled

В одном из наших прошлых постов(тык) мы разбирали реализацию Promise.all. Продолжая тему асинхронного программирования, на этот раз мы сосредоточимся на Promise.allSettled - еще одном ключевом методе для управления промисами в JavaScript. Эта задача на собеседовании проверяет умение кандидата работать с асинхронными операциями и его способность создавать комплексные решения.

Что такое Promise.allSettled
Promise.allSettled - это метод, который принимает массив промисов и возвращает промис, который разрешается после завершения всех промисов в массиве. В отличие от Promise.all, который отклоняется при первом же отклоненном промисе в массиве, Promise.allSettled предоставляет результат каждого промиса, независимо от его состояния.

Задача
Написать функцию promiseAllSettled, имитирующую поведение Promise.allSettled.
Функция должна:
1. Возвращать промис.
2. Разрешаться с массивом результатов всех промисов, независимо от их состояния.
3. Каждый результат в массиве должен быть объектом с полями status и value (для выполненных промисов) или status и reason (для отклоненных промисов).

Реализация promiseAllSettled

function promiseAllSettled(promises) {
  return new Promise(resolve => {
    const results = new Array(promises.length).fill(null);
    let completed = 0;
    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(value => {
          results[index] = { status: 'fulfilled', value };
        })
        .catch(reason => {
          results[index] = { status: 'rejected', reason };
        })
        .finally(() => {
          completed++;
          if (completed === promises.length) {
            resolve(results);
          }
        });
    });
  });
}

Объяснение реализации
1. Функция promiseAllSettled принимает массив промисов promises.
2. Создается массив results для хранения результатов каждого промиса.
3. Каждый промис в массиве обрабатывается с помощью Promise.resolve, чтобы поддержать как промисы, так и не-промисные значения.
4. Для каждого промиса результат (успешное выполнение или отклонение) записывается в results.
5. После обработки всех промисов функция возвращает промис, разрешенный с массивом результатов.

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

#interview #javascript

useImperativeHandle в React: хук, о котором Вы, возможно, не знали

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

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

Пример использования
Давайте рассмотрим пример, где у нас есть TextInput, и мы хотим, чтобы родительский компонент мог вызывать его метод focus.

import React, { useRef, useImperativeHandle } from 'react';

const TextInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} type="text" />;
});

function ParentComponent() {
  const textInputRef = useRef();

  const focusTextInput = () => {
    textInputRef.current.focus();
  };

  return (
    <>
      <TextInput ref={textInputRef} />
      <button onClick={focusTextInput}>Focus on Input</button>
    </>
  );
}

В этом примере useImperativeHandle используется для предоставления родительскому компоненту метода focus, позволяя управлять фокусом текстового поля.

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

#react

Глубокое копирование в JavaScript: Использование structuredClone

В JavaScript, глубокое копирование объектов и массивов является часто встречаемой задачей. С появлением функции structuredClone, эта задача стала решаться значительно проще и эффективнее.

Что такое structuredClone?
structuredClone - это новый стандартный метод JavaScript, предназначенный для создания глубоких копий объектов. Он может копировать более сложные структуры данных, чем JSON.parse(JSON.stringify()), и поддерживает большее количество типов данных.

Пример использования structuredClone:

const original = { 
  a: 1, 
  b: { c: 2, d: new Date() }, 
  e: new Set([1, 2, 3]) 
};

const deepCopy = structuredClone(original);

deepCopy.b.c = 20;
console.log(original.b.c); // Выведет 2, не 20

В этом примере structuredClone успешно копирует весь объект, включая вложенные объекты и структуры данных, такие как Date и Set.

Преимущества structuredClone:
- Может копировать множество различных типов данных, включая те, которые не поддерживаются JSON.parse(JSON.stringify()).
- Обычно работает быстрее, чем ручные или рекурсивные методы глубокого копирования.
- Поскольку это встроенная функция, она обеспечивает более надежное и безопасное копирование.

Ограничения structuredClone:
- Не может клонировать функции и некоторые другие типы объектов, такие как Error объекты или DOM узлы.
- Может не поддерживаться во всех средах выполнения JavaScript (например, в старых версиях браузеров).

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

#javascript

Темная и светлая темы: использование prefers-color-scheme в CSS

Адаптация веб-сайтов к пользовательским предпочтениям, включая выбор между светлой и темной темами, становится ключевым аспектом современного веб-дизайна. CSS медиа-запрос prefers-color-scheme позволяет автоматически адаптировать стили веб-страницы к выбранной пользователем теме. В этом посте мы рассмотрим, как использовать и тестировать prefers-color-scheme.

Как использовать prefers-color-scheme в стилях:

body {
    background-color: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

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

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

Тестирование тем в Chrome
Для тестирования разных тем на вашем сайте в Chrome можно принудительно установить значение prefers-color-scheme как light или dark:
1. Откройте DevTools, нажав F12.
2. Нажмите shift+cmd+p (на MacOS) или shift+ctrl+p (на Windows/Linux) для открытия командной строки.
3. Введите "prefers" в командную строку.
4. Выберите опцию "Emulate CSS prefers-color-scheme: dark" или "Emulate CSS prefers-color-scheme: light" для имитации выбора темной или светлой темы.

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

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

#css

Адаптация приложений к уровню заряда батареи с помощью Battery Status API

В современном мире, где многие из нас зависят от мобильных устройств, управление энергопотреблением становится достаточно важным аспектом в разработке. Battery Status API открывает перед разработчиками возможности для адаптации приложений в зависимости от уровня заряда батареи устройства. Давайте рассмотрим, как этот API может быть использован.

Что такое Battery Status API?
Battery Status API - это веб-API, предоставляющее данные о заряде батареи устройства, будь то мобильный телефон или ноутбук. Он сообщает о проценте заряда батареи, её состоянии зарядки и предполагаемом времени до полной разрядки или зарядки.

Пример использования Battery Status API:

navigator.getBattery().then(battery => {
    console.log(`Уровень заряда батареи: ${battery.level * 100}%`);
    console.log(`Зарядка в процессе: ${battery.charging ? 'да' : 'нет'}`);

    battery.addEventListener('chargingchange', () => {
        console.log(`Изменение состояния зарядки: ${battery.charging ? 'да' : 'нет'}`);
    });

    battery.addEventListener('levelchange', () => {
        console.log(`Изменение уровня заряда: ${battery.level * 100}%`);
    });
});

Этот код демонстрирует, как можно отслеживать состояние батареи и реагировать на изменения.

Что возвращает метод getBattery:
Метод getBattery() возвращает Promise, который при успешном выполнении разрешается в объект BatteryManager. Объект BatteryManager предоставляет доступ к информации о состоянии батареи и различные события, связанные с ней.

Ключевые свойства, которые предоставляет BatteryManager:
- Уровень заряда батареи level представлен числом от 0.0 до 1.0, что показывает процент заряда от полностью разряженной до полностью заряженной батареи.
- Значение charging указывает, заряжается ли устройство в данный момент, где true означает, что устройство заряжается, а false - что нет.
- Время до полной зарядки батареи chargingTime выражается в секундах и возвращает Infinity, если устройство не заряжается или уже полностью заряжено.
- Время до полной разрядки батареи dischargingTime также выражается в секундах и возвращает Infinity в случае зарядки батареи.

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

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

#webapi #javascript

Разбор задачи с собеседования: Реализация Promise.race

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

Что такое Promise.race
Promise.race - это метод, который принимает массив промисов и возвращает новый промис, который разрешается или отклоняется, как только первый промис в массиве разрешается или отклоняется. Он возвращает результат или ошибку этого первого промиса.

Задача
Написать функцию promiseRace, ведущую себя аналогично Promise.race.
Функция должна:
1. Возвращать промис.
2. Разрешаться или отклоняться с результатом или ошибкой первого завершенного промиса из массива.

Реализация promiseRace

function promiseRace(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError('Аргумент должен быть массивом'));
    }

    for (const promise of promises) {
      Promise.resolve(promise)
        .then(resolve)
        .catch(reject);
    }
  });
}

Объяснение реализации:
1. Функция promiseRace принимает массив промисов promises.
2. Если promises не является массивом, функция отклоняется с TypeError.
3. Используется цикл for...of для перебора всех промисов.
4. Каждый промис оборачивается в Promise.resolve для поддержки как промисов, так и обычных значений.
4. resolve и reject передаются непосредственно в .then() и .catch() каждого промиса.
5. Как только любой промис из массива завершается, возвращается его результат или ошибка.

Заключение
Умение реализовать Promise.race показывает понимание работы промисов и асинхронного программирования в JavaScript. Это популярный вопрос на собеседованиях, который проверяет способность кандидата эффективно работать с асинхронным кодом.

#interview #javascript

Паттерн Singleton в JavaScript

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

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

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

Реализация Синглтона для аналитики:

class Analytics {
    constructor() {
        if (Analytics.instance) {
            return Analytics.instance;
        }
        Analytics.instance = this;
        this.eventLog = [];
    }

    logEvent(event) {
        this.eventLog.push(event);
        console.log('Logged:', event);
    }

    // Другие методы аналитики
}

// Использование
const analytics = new Analytics();
analytics.logEvent('UserLoggedIn');

const anotherAnalytics = new Analytics();
anotherAnalytics.logEvent('PageViewed');

console.log(analytics === anotherAnalytics); // true
console.log(analytics.eventLog); // ['UserLoggedIn', 'PageViewed']

Объяснение Реализации
В классе Analytics проверяется, существует ли уже экземпляр.
Если экземпляр существует, он возвращается, иначе создается новый.
Метод logEvent демонстрирует добавление событий в общий лог.

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

#javascript #patterns

Погружение в Big O Notation

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

Что такое Big O Notation?
Big O Notation - это математическая нотация, используемая для описания сложности алгоритма. Она помогает оценить, как изменяется время выполнения или занимаемый объем памяти в зависимости от размера входных данных. В Big O акцентируется внимание на худшем сценарии выполнения алгоритма.

Почему это важно?
Понимание Big O помогает разработчикам:
1. Предсказывать производительность алгоритмов.
2. Определять потенциальные узкие места в коде.
3. Выбирать наиболее эффективные алгоритмы и структуры данных для конкретной задачи.

Примеры big O
- O(1) представляет константную сложность, где время выполнения остается неизменным независимо от размера входных данных. Пример - доступ к элементу массива по индексу.
- O(n) отражает линейную сложность, при которой время выполнения растет пропорционально размеру входных данных. Пример - линейный поиск в массиве.
- O(n²) означает квадратичную сложность, когда время выполнения увеличивается пропорционально квадрату размера входных данных. Типичный пример - двойной цикл для перебора элементов матрицы.
- O(log n) соответствует логарифмической сложности, при которой время выполнения увеличивается логарифмически с увеличением размера входных данных. Пример - бинарный поиск.
- O(n log n) представляет линейно-логарифмическую сложность, часто встречающуюся в алгоритмах сортировки, таких как быстрая сортировка. Время выполнения увеличивается не так стремительно, как в квадратичных или экспоненциальных алгоритмах.
- O(2^n) соответствует экспоненциальной сложности, где время выполнения растет очень быстро с увеличением размера входных данных. Примеры - рекурсивные вычисления, такие как вычисление чисел Фибоначчи.
- O(n!) относится к факториальной сложности, одной из самых высоких форм сложности. Пример - задача коммивояжера, где количество возможных путей растет факториально с увеличением числа точек маршрута.

Заключение
Big O Notation является фундаментальным инструментом в арсенале каждого разработчика. Она не только помогает лучше понимать алгоритмы, но и способствует написанию более эффективного и оптимизированного кода. В будущих постах мы более детально разберем каждую из этих сложностей и их применение на практике.

#algorithm #optimization