Влияние document.designMode в режиме on

Что происходит при установке document.designMode в "on"?

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

👉 @web_craft | #frontend

Форматирование чисел в JavaScript

Intl.NumberFormat — это инструмент для локализации и форматирования чисел, который поддерживает различные стили отображения, включая валюты, единицы измерения и проценты.

Для валюты можно указать, отображать ли символ, код или полное название валюты. Например, форматирование валюты в стиле немецкой локализации:

const numberFormatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(numberFormatter.format(123456.789)); // Выводит "123.456,79 €"

Единицы измерения также могут быть локализованы, предоставляя информацию в наиболее понятной форме для пользователя. Пример форматирования длины в американской системе измерений:

const unitFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'kilometer', unitDisplay: 'long' });
console.log(unitFormatter.format(5.5)); // Выводит "5.5 kilometers"

👉 @web_craft | #frontend

18 советов по созданию чистого и эффективного кода JavaScript

В этой статье представлены советы по написанию чистого и эффективного кода JavaScript. В ней обсуждается использование стрелочных функций, метода Array.from() и console.table() для улучшения организации кода. Другие важные моменты включают использование const и let соответствующим образом, деструктуризацию для извлечения свойств объекта и установку значений по умолчанию с помощью логического оператора ИЛИ.

👉 @web_craft | #frontend

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