Использование функции Intl.NumberFormat

Для чего используется Intl.NumberFormat в JavaScript?

Если забыли, то вернитесь к посту от 28.05.2024.

👉 @web_craft | #frontend

Отслеживание изменений в DOM

MutationObserver — это API в JS для наблюдения за изменениями в DOM. Оно позволяет отслеживать добавление или удаление узлов, изменения атрибутов и текста.

Пример:

const targetNode = document.getElementById('myDiv');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

В этом примере, при любом изменении атрибутов или дочерних элементов внутри myDiv (или его потомков, благодаря опции subtree: true), функция callback будет вызвана и выведет соответствующее сообщение в консоль.

👉 @web_craft | #frontend

Предложение по стандартизации сигналов для TC39

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

👉 @web_craft | #frontend

Pure CSS 3D

Анимированная 3D графика на CSS.

👉 @web_craft | #frontend

Работа top-level await

Что позволяет делать top-level await в JavaScript?

Если забыли, то вернитесь к посту от 04.06.2024.

👉 @web_craft | #frontend

Обнаружение статуса соединения

navigator.online — свойство интерфейса Navigator для определения статуса подключения, возвращающее логическое значение: true, если пользователь в сети, и false, если не в сети.

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

if (navigator.online) {
  console.log('Вы в сети');
} else {
  console.log('Вы не в сети');
}

Для реагирования на изменения сетевого состояния можно использовать события online и offline, генерируемые объектом window:

window.addEventListener('online', () => {
  console.log('Соединение с сетью восстановлено');
});

window.addEventListener('offline', () => {
  console.log('Соединение с сетью потеряно');
});

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

Пример:

navigator.online ? console.log('Пользователь в сети') : console.log('Пользователь не в сети');

👉 @web_craft | #frontend

DOM: что такое объектная модель документа простыми словами

Статья объясняет концепцию DOM, которая представляет структуру веб-страницы в виде дерева объектов. Автор рассматривает, как DOM позволяет скриптам взаимодействовать с HTML-документами, делать их более динамичными и интерактивными. В статье приведены примеры использования методов и свойств DOM для доступа к элементам страницы и их изменения, таких как querySelector, createElement, getElementById, innerHTML, и addEventListener.

👉 @web_craft | #frontend

CSS Responsive House

Интерактивная анимация здания на CSS.

👉 @web_craft | #frontend

Использование document.activeElement

Что позволяет определить свойство document.activeElement в JavaScript?

Забыли? Вернитесь к посту от 11.06.2024.

👉 @web_craft | #frontend

Создание собственных ошибок в приложении

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

Обычно ошибки выбрасываются так:

throw Error("Ошибка сервера");

Для оптимизации создайте собственный класс ошибки:

class CustomError extends Error {
  constructor(message: string) {
    super(message);
    this.name = 'CustomError';
  }
}

Пример создания ошибок для работы с API:

class NullableRequestParameter extends Error {
  constructor(message = 'Required req param is nullable') {
    super(message);
    this.name = 'NullableRequestParameter';
  }
}

class Unauthorized extends Error {
  constructor(message = 'User is unauthorized') {
    super(message);
    this.name = 'Unauthorized';
    this.code = 401;
  }
}

export const RestServiceError = {
  NullableRequestParameter,
  Unauthorized
} as const;

// выброс ошибки
throw RestServiceError.Unauthorized();

👉 @web_craft | #frontend

8 паттернов реактивности в современном JavaScript

Статья рассматривает различные паттерны реактивности в JavaScript, объясняя их важность для современных веб-приложений. Описаны следующие паттерны: Pub/Sub, Custom Events, Custom Event Targets, Observer, Proxy, Object.defineProperties, MutationObserver и IntersectionObserver. Каждый паттерн сопровождается кодовыми примерами и пояснениями, как они помогают в создании реактивных систем, реагирующих на изменения данных и событий.

👉 @web_craft | #frontend