Работа с AbortController

Какое свойство объекта AbortController используется для связи с асинхронной операцией, например, с запросом fetch?

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

👉 @web_craft | #frontend

Обработка массивов с конца

Array.prototype.reduceRight в JavaScript позволяет выполнять операцию "свёртки" массива, начиная с его конца. Это полезно, когда нужно последовательно применить функцию к элементам массива, но в обратном порядке.

Метод reduceRight принимает два аргумента: функцию-аккумулятор и начальное значение. Функция-аккумулятор выполняется на каждом элементе массива, начиная с последнего и продвигаясь к первому. Результат предыдущего вызова функции передаётся в следующий как "аккумулятор".

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

const numbers = [1, 2, 3, 4];
const result = numbers.reduceRight((accumulator, currentValue) => {
  return accumulator - currentValue;
}, 0);

console.log(result); // Вывод: -10

Работа начинается с последнего элемента массива 4, затем к нему применяется функция, которая вычитает текущее значение из аккумулятора. В итоге получается 0 - 4 - 3 - 2 - 1 = -10.

👉 @web_craft | #frontend

Основы API Popover

Статья рассказывает о Popover API — новом инструменте в современных браузерах, позволяющем легко создавать всплывающие окна (popovers) без использования сторонних библиотек. Автор описывает основные возможности API, демонстрирует, как создавать и стилизовать поповеры, а также использовать JavaScript для управления их поведением. Статья также рассматривает особенности анимации и совместимость API с различными браузерами.

👉 @web_craft | #frontend

The Carlton dance

Анимация танцующего человека на чистом CSS.

👉 @web_craft | #frontend

Применение Object.defineProperty

Какой из параметров контролирует, будет ли свойство доступно для удаления или переопределения?

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

👉 @web_craft | #frontend

Локализация сортировки строк в JavaScript

В JavaScript сортировка строк по умолчанию не учитывает правила локализации, что может привести к некорректному порядку для разных языков. Для решения этой проблемы можно использовать объект Intl.Collator. Он предоставляет мощные возможности для сортировки строк с учетом культурных особенностей различных языков.

Сравним сортировку строк для английской и испанской локалей:

const names = ['Ana', 'ángel', 'beto', 'Óscar'];

const collatorEN = new Intl.Collator('en');
const collatorES = new Intl.Collator('es');

console.log(names.sort(collatorEN.compare)); // ['Ana', 'ángel', 'beto', 'Óscar']
console.log(names.sort(collatorES.compare)); // ['ángel', 'Ana', 'beto', 'Óscar']

Здесь видно, что английская локаль игнорирует акцент в слове ángel, тогда как испанская учитывает его, что приводит к различной сортировке.

👉 @web_craft | #frontend

Все способы преобразования массива в объект в JavaScript

Статья объясняет различные способы преобразования массива в объект в JavaScript.

👉 @web_craft | #frontend

CSS Physics with Math

Настраиваемая физика на CSS.

👉 @web_craft | #frontend

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

Как передаются аргументы в функцию через Reflect.apply?

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

👉 @web_craft | #frontend

Форматирование списков по локали

Intl.ListFormat — это функция в JavaScript, которая позволяет форматировать списки строк в соответствии с правилами определённой локали. Она позволяет автоматически расставлять запятые, союзы и другие разделители в зависимости от выбранного языка и региона.

const items = ['яблоко', 'банан', 'вишня'];

// Создание форматтера для английской локали
const listFormatterEN = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
console.log(listFormatterEN.format(items)); // "яблоко, банан, и вишня"

// Создание форматтера для французской локали
const listFormatterFR = new Intl.ListFormat('fr', { style: 'long', type: 'conjunction' });
console.log(listFormatterFR.format(items)); // "яблоко, банан et вишня"

В этом примере для английской локали используется союз "and", а для французской — "et". Также можно использовать другие стили, такие как 'short' или 'narrow', чтобы изменить формат списка.

👉 @web_craft | #frontend

10 ключевых концепций JavaScript

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

👉 @web_craft | #frontend

Stripes

Анимация тигра на CSS.

👉 @web_craft | #frontend

Работа с методом reduceRight

Какое значение возвращает reduceRight, если не указать начальное значение?

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

👉 @web_craft | #frontend

Запрет добавления или удаления свойств объекта

Метод Object.seal() позволяет «запечатать» объект, предотвращая добавление или удаление свойств. При этом существующие свойства можно изменять.

Как использовать Object.seal():

const user = {
  name: 'John',
  age: 30
};

// Запечатываем объект
Object.seal(user);

// Попытка добавить новое свойство (не сработает)
user.email = 'john@example.com';
console.log(user.email); // undefined

// Попытка удалить свойство (не сработает)
delete user.age;
console.log(user.age); // 30

// Изменение существующего свойства (сработает)
user.name = 'Jane';
console.log(user.name); // Jane

После вызова Object.seal(user), объект user не может быть изменен в плане добавления или удаления свойств. Однако, мы все еще можем изменить значения существующих свойств, такие как name или age.

Чтобы проверить, является ли объект запечатанным, можно использовать метод Object.isSealed():

console.log(Object.isSealed(user)); // true

Метод возвращает true/false.

👉 @web_craft | #frontend

Ключевое слово this в JavaScript

Статья объясняет ключевое слово this в JavaScript и его поведение в различных контекстах: внутри методов объектов, функций, стрелочных функций, а также в слушателях событий. Рассматриваются методы call, apply и bind, которые управляют значением this. Приводятся примеры кода и их результаты, чтобы показать, как this может ссылаться на разные объекты в зависимости от ситуации. В статье также обсуждаются особенности использования this в строгом режиме.

👉 @web_craft | #frontend

CSS transform animation stress test

Стресс-тест анимации с использованием CSS Transform.

👉 @web_craft | #frontend

Объект для сортировки строк с учетом правил локализации

Какой объект используется в JavaScript для сортировки строк с учетом правил локализации?

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

👉 @web_craft | #frontend

Как контролировать создание экземпляров в наследуемых классах

В JavaScript символ Symbol.species позволяет контролировать, какой конструктор должен использоваться при создании экземпляров в наследуемых классах. Это полезно, когда вы хотите изменить поведение методов, которые возвращают новые объекты на основе экземпляра класса.

Рассмотрим пример с классом MyArray, который наследует от встроенного массива Array. По умолчанию, методы такие как map(), возвращают новый экземпляр того же класса. Однако с помощью Symbol.species, можно указать, какой конструктор должен использоваться.

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const myArr = new MyArray(1, 2, 3);
const mappedArr = myArr.map(x => x * 2);

console.log(mappedArr instanceof MyArray); // false
console.log(mappedArr instanceof Array); // true

Метод map() возвращает обычный массив Array, а не MyArray, благодаря использованию Symbol.species.

👉 @web_craft | #frontend

Разгадка гипотезы Коллатца: изучение создания последовательностей с помощью JavaScript

Статья объясняет математическую гипотезу Коллатца и показывает, как реализовать её в JavaScript. Гипотеза утверждает, что при определённых арифметических операциях любая последовательность чисел в конечном итоге сведётся к 1. Автор демонстрирует два алгоритма для генерации таких последовательностей, включая оптимизацию с использованием мемоизации для повышения эффективности.

👉 @web_craft | #frontend

Jellyfish svg animation

Анимация медузы на CSS.

👉 @web_craft | #frontend