Submarine Animation

Анимация подводной лодки на CSS.

👉 @web_craft | #frontend

Аргументы Intl.RelativeTimeFormat

Какие аргументы принимает конструктор Intl.RelativeTimeFormat?

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

👉 @web_craft | #frontend

Асинхронные операции в JavaScript

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

Как работает top-level await:
Ранее для использования await необходимо было объявлять асинхронную функцию:

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}
fetchData();

Теперь с top-level await можно писать асинхронный код прямо в модуле:

const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

👉 @web_craft | #frontend

WebGL Ghost Cursor (2023 update)

Интерактивный курсор с настраиваемым приведением на CSS и JavaScript.

👉 @web_craft | #frontend

Adjustable Text Emphasis with CSS lh unit

Регулируемый текстовый блок на CSS.

👉 @web_craft | #frontend

Варианты данных для отправки через navigator.sendBeacon()

Что можно передать в качестве данных в метод navigator.sendBeacon()?

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

👉 @web_craft | #frontend

Проверка фокуса на элементе

document.activeElement — это свойство в JavaScript, которое позволяет определить текущий сфокусированный элемент в документе. Его использование позволяет узнать, находится ли определенный элемент в фокусе. Это свойство возвращает элемент, который в данный момент имеет фокус, или null, если ни один элемент не сфокусирован. Важно отметить, что document.activeElement доступно только для чтения, что означает, что нельзя напрямую изменить его значение.

Пример:

let el = document.querySelector('.btn-white');
let isFocus = el === document.activeElement;

console.log(isFocus); // true/false

В этом примере с помощью document.querySelector выбирается элемент с классом .btn-white. Затем, переменная isFocus устанавливается в true, если выбранный элемент el совпадает с текущим сфокусированным элементом document.activeElement, и в false в противном случае. Это позволяет легко определить, сфокусирован ли данный элемент в текущий момент.

👉 @web_craft | #frontend

Создание сервиса для обмена файлами без головной боли.

Статья описывает, как создать сервис для обмена файлами, используя Fly.io и Tigris1. Автор статьи рассказывает о проблемах, связанных с обменом больших файлов между пользователями в разных частях мира, и предлагает решение этой проблемы с помощью глобального хранилища объектов и вычислительных ресурсов, предоставляемых Fly.io и Tigris1.

👉 @web_craft | #frontend

CSS LEGO Minifigure Maker

Интерактивный редактор LEGO фигурки на CSS.

👉 @web_craft | #frontend

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