​Введение в JavaScript Temporal API

Реализация объекта Date() в JavaScript была скопирована непосредственно из Java в 1995 году. Два года спустя Java отказалась от неё, но в JavaScript она осталась для обратной совместимости. При этом Date() крайне неудобен и часто непредсказуем, а API оставляет желать лучшего.

К счастью, есть Temporal API, которое решает эту проблему. Подробнее о нём:

https://webdevblog.ru/vvedenie-v-javascript-temporal-api/

#javascript

Login & Sign Up Form Concept — концепт формы авторизации и регистрации на сайте. Переключение между двумя видами взаимодействия происходит с приятной анимацией.

https://codepen.io/ZuthLonble/pen/RwNZgbR

@javascriptv

iOS Notifications — анимированные оповещения в стиле iOS. Реализованы с помощью SCSS и TypeScript.

https://codepen.io/ykadosh/pen/ZERjpRJ

@javascriptv

Что было добавлено в ECMAScript в 2023 году

ECMAScript — это стандарт языка программирования JavaScript, который устанавливает правила, синтаксис и другие критерии создания JavaScript-кода.

ECMAScript ежегодно дополняется сообществом разработчиков JavaScript и соответствует стандартам ECMA International.
Эти обновления позволяют создавать более качественные и быстрые веб-приложения, а также обеспечивают возможность масштабирования и поддержки кода в будущем.

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

Вот, какие функции были добавлены в ECMAScript в 2023 году.

1. Поиск элемента в массиве
Эта функция позволяет найти нужный элемент — от первого до последнего — в массиве с помощью установленного условия.

const array = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}, {a: 4, b: 4}]

console.log(array.findLast(n => n)); //result -> {a: 4,b: 4 }

console.log(array.findLast(n => n.a * 5 === 20)); // result -> {a:4,b:4} as the condition is true so it returns the last element.

console.log(array.findLast(n => n.a * 5 === 21)); //result -> undefined as the condition is false so return undefined instead of {a:4,b:4}.

console.log(array.findLastIndex(n => n.a * 5 === 21)); // result -> -1 as the condition is not justified for returning the last element.

console.log(array.findLastIndex(n => n.a * 5 === 20)); // result -> 3 which is the index of the last element as the condition is true.

2. Грамматика Hashbang
Эта функция позволит нам использовать Hashbang/Shebang в некоторых CLI.

Shebang представлен #! и представляет собой специальную строку в начале скрипта, которая сообщает операционной системе, какой интерпретатор использовать при выполнении скрипта.

#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(2*3);

#!/usr/bin/env node
// in the Module Goal
export {};
console.log(2*2);

Строка #!/usr/bin/env node вызывает исходный файл Node.js напрямую как исполняемый файл.

3. Символы-ключи в WeakMap
Теперь можно использовать уникальные символы в качестве ключей.

До этого обновления WeakMaps можно было использовать в качестве ключей только объекты. Объекты используются в качестве ключей для WeakMaps, потому что они имеют один и тот же аспект идентичности.

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

const weak = new WeakMap();

const key = Symbol('my ref');
const someObject = { a:1 };

weak.set(key, someObject);
console.log(weak.get(key));

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

Новые введенные функции Array.prototype:

Array.prototype.toReversed()
Array.prototype.toSorted(compareFn)
Array.prototype.toSpliced (start, deleteCount, … items)
Array.prototype.with(index, value)
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toReversed */

const reversed = numbers.toReversed();
console.log("reversed", reversed); // "reversed", [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSorted */
const sortedArr = numbers.toSorted();
console.log("sorted", sortedArr); // "sorted", [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]
/* with */
const replaceWith = numbers.with(1, 100);
console.log("with", replaceWith); // "with", [1, 100, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSpliced */
const splicedArr = numbers.toSpliced(0, 4);
console.log("toSpliced", splicedArr); // "toSpliced", [5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

@javascriptv

​Чистые функции в JavaScript: руководство для начинающих

Функция — это повторно используемый блок кода, который принимает аргументы и возвращает вычисленное значение. А чистая функция всегда возвращает одно и то же значение при одинаковых аргументах и не создает побочных эффектов.

Давайте более подробно рассмотрим, что такое чистые функции и почему они полезны:

https://dmitripavlutin.com/javascript-pure-function/

#javascript

Another Datepicker — нестандартная форма выбора даты. Реализована с помощью SCSS, SVG и JavaScript.

https://codepen.io/aaroniker/pen/MWQjxro

@javascriptv

Paperworld — красивая анимированная 3D сцена. Реализована с помощью CSS, Pug и JavaScript.

https://codepen.io/atzedent/pen/ExpmWoY

@javascriptv

Three.js Mobile VR Sonic — бегущий Sonic в 3D пространстве three.js с возможностью перехода в VR режим. Sonic может прыгать и собирать монетки.

https://codepen.io/b29/pen/yQXQrg

@javascriptv

💡Задача: Игра в прыжки

Условие: Вам дан целочисленный массив nums. Изначально вы находитесь в первом индексе массива, и каждый элемент массива представляет максимальную длину прыжка в этой позиции.

Верните true, если вы можете добраться до последнего индекса, или false в противном случае.

Пример:
Ввод: nums = [1,3,1,1,4]
Вывод: true
Объяснение: Переходим на 1 шаг от индекса 0 к 1, затем на 3 шага к последнему индексу.

Ввод: nums = [3,2,1,0,4]
Вывод: false

Решение:

var canJump = function(nums) {
// Base condition...
if(nums.length <= 1)
return true;
// To keep the maximum index that can be reached...
let maximum = nums[0];
// Traverse all the elements through loop...
for(let i = 0; i < nums.length; i++){
//if there is no way to jump to next...
// so we should return false...
if(maximum <= i && nums[i] == 0)
return false;
//update the maximum jump...
if(i + nums[i] > maximum){
maximum = i + nums[i];
}
//maximum is enough to reach the end...
if(maximum >= nums.length-1)
return true;
}
return false;
};

Пишите свое решение в комментариях👇

@javascriptv

💫 Какой метод глубокого клонирования в JavaScript наиболее эффективный — исследование

В данном исследовании сравниваются различные методы глубокого клонирования в JavaScript, а их эффективность оценивается с помощью серии модульных тестов.

▪Читать

@javascriptv

Carousel with drag and wheel

Карусель с перетаскиванием и прокруткой колеса. Реализована с помощью CSS и JS

#css #js #анимация #carousel

https://codepen.io/supah/pen/xxJMbbg

@javascriptv

✔ Как структурировать API-вызовы при автоматизированном тестировании с Playwright и JavaScript

В создании автоматизированных e2e-тестов для сложных систем есть много трудностей. Одна из них — “идеальное” окружение. Это окружение должно быть полностью под вашим контролем и включать многие (если не все) характеристики окружения разработки или продакшн-окружения.

На практике это часто не так. Окружение требует регулярного контроля, сброса данных и настройки требований для каждого теста “на лету”.

В случае онлайн-приложений, основанных на REST-архитектуре и запросах API, мы можем обойти эту проблему и приводить систему в необходимое состояние перед каждым тестом или набором тестов.

В этом примере я воспользуюсь Playwright с модулем запросов, который он предоставляет для отправки вызовов API.

Допустим, приложение, которое мы тестируем, представляет собой простой магазин с товарами. Для авторизации используется технология JWT (веб-токен в формате JSON). Следовательно, каждый последующий вызов после входа в систему должен включать данный токен.

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

▪Читать

@javascriptv

🔧 Chrome for Testing — новая версия Chrome, специально предназначенная для тестирования веб-приложений и автоматизации.

Узнайте, почему команда Chrome сочла это необходимым на конкретных примеры, в которых Chrome for Testing может быть полезен вам как разработчику.

Читать

Minimalist Thermostat - Регулировка температуры, выполненная с помощью SVG, CSS и библиотеки GSAP.js

https://codepen.io/jkantner/pen/rNpbMjO

@javascriptv

🖼Стек вызовов JavaScript: объяснение с помощью иллюстраций

▪Типичный случай

В случае ниже каждая функция завершается после выполнения всех строк кода внутри нее.
function defense() {
console.log('I am the defense attorney');
}

function prosecution() {
console.log('I am the prosecutor');
}

console.log('All rise');
defense();
prosecution();

👀Смотреть

▪Более интересный случай

В данном примере — вызов функции внутри другой функции.
function callingToWitness(witnessNumber) {
console.log('Calling to witness number ' + witnessNumber);
}

function defense() {
callingToWitness(1);
callingToWitness(2);
}

function prosecution() {
callingToWitness(3);
callingToWitness(4);
}

console.log('All rise');
defense();
prosecution();

👀Смотреть

Этот пример помогает лучше понять термин “стек”. Благодаря вызову функции внутри другой функции мы видим, как “боксы” нагромождаются один на другой и создают стек “боксов”.

Каждый “бокс” выполняет код внутри себя. При вызове функции создается новый “бокс” внутри нее. Если есть простая команда, например console.log, она просто выполняется. Выполнив весь код, “бокс” покидает стек.


Что такое “боксы”? Зачем нужны контексты выполнения?

▪Читать

@javascriptv

Jello Tab Bar - красивый анимированный tabbar, написанный с помощью SVG, CSS и JavaScript

https://codepen.io/oey_amir/pen/xxpZgEW

@javascriptv

Ghost Card - эффектная карточка с 3D эффектом.

https://codepen.io/pizza3/pen/pobevYW

@javascriptv

DeepScan - полезный инструмент, который проводит анализ исходного кода.

Программа отлично работает в обнаружении возможных ошибок и уязвимостей в JavaScript приложениях.

Она проводит подробное сканирование и анализ вашего кода, выявляя проблемные секции, такие как неправильное использование переменных, возможные утечки памяти и небезопасные операции с данными.

https://deepscan.io/

@javascriptv

Yotako.io — крутой инструмент дизайна в код с помощью искусственного интеллекта

С помощью инструмента можно без труда экспортировать дизайн из графических редакторов, таких как Sketch и Adobe XD, и преобразовать их в код на различных языках программирования и фреймворках

При этом Yotako.io также обеспечивает синхронизацию между дизайном и кодом, что позволяет легко вносить изменения в процессе разработки

Стоимость: #бесплатно (но есть платные тарифы).

#дизайн #code #ии

@javascriptv