⭐️CSS Diner

Интерактивная игра для прокачки и закрепления знаний о селекторах CSS. В игре даётся анимированная полка блюд, HTML форма и определённый элемент или элементы, которые надо выбрать.

https://flukeout.github.io/

@javascriptv

⭐️ Обзор 10 приемов JavaScript для эффективного программирования

1. Объект Intl
Объект Intl позволяет форматировать числа, даты и валюту с учетом разных локалей и параметров.

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

Рассмотрим пример форматирования валюты:
let num = 100;

let RupeeFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "INR"})

let RupeeFormatted = RupeeFormatter.format(num);

console.log(RupeeFormatted)
// ₹100

let USDFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "USD"})

let USDFormatted = USDFormatter.format(num)

console.log(USDFormatted)
// $100

2. Оператор ??
Оператор ?? присваивает переменной значение по умолчанию, если она null или undefined.

Используйте данный оператор, если сомневаетесь в существовании у объекта того или иного свойства. Если свойство отсутствует, переменной присваивается значение по умолчанию.

Пример:
let user = {}

let name = user.name ?? "Anonymous"

console.log(name)
// "Anonymous"

3. Object.fromEntries()
Метод Object.fromEntries() преобразует массив пар “ключ-значение” в объект.

Возьмем следующий массив и создадим из него объект, как показано ниже:
let arr = [["name", "Alice"], ["age", 25]]

let obj = Object.fromEntries(arr);

console.log(obj)
// {name: "Alice", age: 25}

4. Array.flat()
Метод Array.flat() преобразует вложенный массив в один единственный.

Поскольку вложенными массивами сложно управлять, то данный метод помогает уменьшать их вложенность.

Пример:
let arr = [1, [2, [3, [4]]]];

let flat = arr.flat(Infinity)

console.log(flat)
// [1, 2, 3, 4]

5. Оператор ?
Оператор ?. обеспечивает доступ к свойствам объекта без проверки, является ли он null или undefined.

Используйте его, когда не знаете, существует ли объект или нет.

Пример:
let user = null

let age = user?.age

console.log(age)
// undefined

6. Array.reduce()
Метод Array.reduce() применяет функцию к каждому элементу массива и суммирует результат в одно значение.

Пример сложения всех чисел массива:
let arr = [1, 2, 3, 4, 5]

let sum = arr.reduce((a, b) => a + b)

console.log(sum)
// 15

7. String.repeat()
Метод String.repeat() создает новую строку, повторяя заданную строку указанное количество раз.

Пример:
let str = "js".repeat(10)

console.log(str)
// 'jsjsjsjsjsjsjsjsjsjs'

8. Array.from()
Метод Array.from() создает новый массив из массивоподобного или итерируемого объекта.

Пример:
let str = "Hello"

let arr = Array.from(str)

console.log(arr)
// ["H", "e", "l", "l", "o"]

9. Math.hypot()
Метод Math.hypot() находит квадратный корень из суммы квадратов его аргументов.

Так, сумма квадратов 3 и 4 равна 25, а квадратный корень из 25 равен 5. Следовательно, Math.hypot(3, 4) возвращает 5.

Пример:
let hyp = Math.hypot(3, 4);

console.log(hyp)
// 5

10. Object.assign()
Метод Object.assign() копирует значения всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект.

Пример:
let obj1 = {a: 1, b: 2};

let obj2 = {c: 3, d: 4};

let obj3 = Object.assign(obj1, obj2)

console.log(obj3)
// {a: 1, b: 2, c: 3, d: 4}

@javascriptv

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

1. Замыкания
▪️Замыкания обычно используются в JavaScript для создания частных переменных и инкапсуляции. Определяя переменные во внешней функции и возвращая внутреннюю функцию, которая обращается к этим переменным и изменяет их, можно контролировать видимость и манипуляции с данными. Это позволяет добиться сокрытия информации и избежать загрязнения глобального пространства имен.

▪️Когда outerFunction вызывается и присваивается замыканию, создается замыкание, которое сохраняет ссылку на outerVariable. В дальнейшем при вызове замыкания оно будет иметь доступ к outerVariable и может регистрировать ее значение.

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

2. Промисы
▪️Промис представляет собой конечный результат асинхронной операции, который может быть либо разрешенным значением, либо причиной отказа. Промис бывает в трех состояниях: ожидающий, выполненный, отклоненный.

▪️Для создания промиса используется конструктор Promise, который принимает функцию обратного вызова с двумя параметрами: resolve и reject. Внутри этого обратного вызова выполняется асинхронная задача с вызовом либо resolve(value) для выполнения промиса со значением, либо reject(reason) для отклонения его с указанием причины (обычно это объект error).

▪️Метод then() используется для обработки выполнения промиса. Он принимает функцию обратного вызова, которая получает разрешенное значение в качестве аргумента. Можно объединить несколько вызовов then() в цепочку для выполнения последовательных операций или преобразований разрешенного значения.

▪️Метод catch() используется для обработки отказа от выполнения промиса. В качестве аргумента он принимает функцию обратного вызова, которая получает причину отказа (ошибку). Обычно он используется в конце цепочки промисов для обработки ошибок, возникших во время асинхронной операции.

▪️Промисы также предоставляют дополнительные методы, такие как finally(), позволяющий указать обратный вызов, который будет вызван независимо от того, выполнен промис или отклонен, и Promise.all(), который можно использовать для ожидания выполнения нескольких промисов.

3. Прототипы и прототипное наследование
▪️Прототип — это объект, от которого другие объекты наследуют свойства и методы. При обращении к свойству или методу объекта JavaScript сначала проверяет, есть ли это свойство у самого объекта. Если нет, он просматривает цепочку прототипов в поисках прототипа объекта, затем прототипа прототипа и так далее, пока не найдет свойство или не достигнет конца цепочки.

В этой программе используются функции-конструкторы Animal и Dog.

▪️Функция-конструктор Animal принимает параметр name и присваивает его свойству name вновь создаваемого объекта с помощью this.name.

▪️Добавляем метод greet в Animal.prototype, который будет общим для всех экземпляров, созданных с помощью функции-конструктора Animal.

▪️Функция-конструктор Dog расширяет Animal с помощью Animal.call(this, name) для наследования свойств от конструктора Animal.

▪️Образуем цепочку прототипов, создав новый объект с помощью Object.create(Animal.prototype) и присвоив его Dog.prototype. Это связывает прототип экземпляров Dog с Animal.prototype, обеспечивая наследование.

▪️Добавляем в Dog.prototype метод bark, который предназначен для экземпляров, созданных с помощью конструктора Dog.

▪️Создаем экземпляры Animal и Dog с помощью ключевого слова new. Экземпляр animal использует метод greet, унаследованный от Animal.prototype, а экземпляр dog использует как метод greet, унаследованный от Animal.prototype, так и метод bark, определенный в Dog.prototype.

📌Читать

@javascriptv

🖥 Landing page with swiper - Карточки с прокруткой.

https://codepen.io/kristen17/pen/GRXgqaB

@javascriptv

🖥 Diagonal Layouts - анимация заднего фона с изменения по ползунку, реализована с помощью CSS и JS

https://codepen.io/enbee81/pen/yLyrmyg

@javascriptv

📊Создание кольцевой диаграммы на JavaScript

Визуализация данных — процесс не только познавательный, но и довольно забавный. Один из самых простых и увлекательных способов визуализации данных — создание кольцевой диаграммы. Я покажу вам, как без особых усилий построить интерактивную диаграмму на JavaScript.

(Предварительный обзор кольцевой диаграммы в изображении)

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

1) Создание базовой HTML-страницы.
2) Включение необходимых JavaScript-файлов.
3) Добавление данных.
4) Написание JS-кода.

1. Создание базовой HTML-страницы
Для начала создадим базовую HTML-страницу с элементом <div> для размещения кольцевой диаграммы. Дадим ей идентификатор. Установим ширину и высоту на 100% без полей и отступов, чтобы диаграмма отображалась во весь экран.

<html>
<head>
<title>JavaScript Donut Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

2. Включение необходимых JavaScript-файлов

Далее

@javascriptv