Использование функции 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

Photo editor

Фото редактор на CSS.

👉 @web_craft | #frontend

Работа API MutationObserver

Что позволяет отслеживать MutationObserver?

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

👉 @web_craft | #frontend

Управление задачами в JavaScript

scheduler.postTask — это API для улучшения управления задачами в JavaScript. Он позволяет планировать выполнение задач с разными приоритетами (user-blocking, user-visible, background).

Для использования API может потребоваться импорт полифила, так как поддержка браузерами может быть неполной. Основной синтаксис: scheduler.postTask(taskFunction, options), где taskFunction — функция для выполнения, а options — объект с параметрами, такими как priority, delay и signal.

Примеры кода:

scheduler.postTask(() => {
  console.log('High priority task');
}, { priority: 'user-blocking' });

scheduler.postTask(() => {
  console.log('Background task');
}, { priority: 'background' });

scheduler.postTask(() => {
  console.log('Task with delay');
}, { delay: 1000 });

const controller = new AbortController();
scheduler.postTask(() => {
  console.log('This task will be aborted');
}, { signal: controller.signal });
controller.abort();

👉 @web_craft | #frontend

ООП на простых примерах

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

👉 @web_craft | #frontend

CSS Switch Day and Night - Cat

Анимированный переключатель с кошкой на CSS.

👉 @web_craft | #frontend

Реагирования на изменения сетевого состояния

Какое событие генерируется объектом window, когда соединение с сетью восстановлено?

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

👉 @web_craft | #frontend

Управление промисами в JavaScript

promise.withResolvers() — удобный метод в JavaScript для создания промиса и доступа к его resolve и reject. Это упрощает управление промисами.

Пример:

const { promise, resolve, reject } = promise.withResolvers();

promise.then(value => {
    console.log('Промис выполнен с:', value);
}).catch(error => {
    console.error('Промис отклонен с ошибкой:', error);
});

// Разрешение промиса
setTimeout(() => resolve('Успех!'), 2000);

// или отклонение промиса
// setTimeout(() => reject('Ошибка!'), 2000);

Реализация promise.withResolvers():

function promiseWithResolvers() {
    let resolve, reject;
    const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
    });
    return { promise, resolve, reject };
}

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

👉 @web_craft | #frontend

Объединение веб-приложений и нативных приложений с помощью неизвестных JavaScript API

Статья описывает четыре малоизвестных JavaScript API, которые помогают сблизить возможности веб-приложений с нативными. API Web Share позволяет веб-приложениям делиться контентом с другими приложениями на устройстве пользователя. Статья включает примеры и код для внедрения этих API, показывая, как они могут улучшить взаимодействие пользователей с веб-приложениями.

👉 @web_craft | #frontend

Neuro Noise

Интерактивный фон реализованный с использованием GLSL.

👉 @web_craft | #frontend