🖥 3D Scrolling Gallery/Timeline - 3D-прокрутка, выполненная с помощью SVG, CSS и библиотеки GSAP.js

https://codepen.io/creativeocean/pen/gOvYEgq

@javascriptv

🖥 Немного о замыканиях в Javascript

⏩Замыкание — это функция, которая имеет доступ к переменным, присутствующим в ее цепочке областей видимости, даже если внешняя функция перестает существовать.

Чтобы понять суть замыканий, мы сначала рассмотрим их характеристики:
— Даже если внешняя функция перестает существовать, замыкание по-прежнему имеет доступ к ее переменным.
— Замыкания не имеют доступа к параметру args своей внешней функции.

Давайте разберем подробнее первый пункт. Это основная функциональность любого замыкания. В этом сама суть замыканий и принцип работы.

Чтобы увидеть это в действии, мы выполним вот эту функцию buttonProps:

let buttonProps = (borderRadius) => {
  const createVariantButtonProps = (variant, color) => {
    const newProps = {
      borderRadius,
      variant,
      color
    };
    return newProps;
  }
  return createVariantButtonProps;
}

let primaryButton = buttonProps("1rem"); 

Вызов функции buttonProps вернет нам другую функцию, которая является нашим замыканием.

Теперь давайте выполним это замыкание:

const primaryButtonProps = primaryButton("primary", "red");

В результате выполнения замыкание возвращает следующий объект:

{
   "borderRadius":"1rem",
   "variant":"primary",
   "color":"red"
}

⏩Итак, почему замыкания по-прежнему имеют доступ к переменным, которые определены вне их области видимости, даже если внешняя функция перестает существовать (например, borderRadius)?

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

📎 Читать подробнее

@javascriptv

🖥 Факт дня — метод String.fromCharCode() в JS

⏩Статический метод String.fromCharCode() возвращает строку, созданную из указанной последовательности значений единиц кода UTF-16.

Синтаксис

String.fromCharCode(num1[, ...[, numN]]

num1, ..., numN
— Последовательность чисел, являющихся значениями единиц кода UTF-16. Диапазон составляет от 0 до 65535 (0xFFFF). Числа больше 0xFFFF усекаются. Проверка достоверности не производится.

Метод String.fromCharCode() возвращает примитивную строку, а не объект String.

Поскольку метод fromCharCode() является статическим методом объекта String, вы всегда должны использовать его как String.fromCharCode(), а не как метод созданного вами экземпляра String.


⏩Пример использования метода fromCharCode().

String.fromCharCode(65, 66, 67);  // "ABC"

📎 Полная таблица UTF-16


⏩Как заставить его работать с большими значениями

Хотя большинство распространённых значений Юникода может быть представлено одним 16-битным числом (как ожидалось на ранней стадии стандартизации JavaScript) и метод fromCharCode() может использоваться для возврата одного символа для самых распространённых значений (точнее, значений UCS-2, которые являются подмножеством самых распространённых символов UTF-16), для работы со всеми допустимыми значениями Юникода (занимающими до 21 бита) одного метода fromCharCode() недостаточно. Поскольку большие кодовые точки используют (самое меньшее) два «суррогатных» числа для представления одного символа, для возврата таких пар можно использовать метод String.fromCodePoint() (являющийся частью черновика ES6) и, таким образом, адекватно представлять эти символы.

@javascriptv

🖥 Несколько супер-полезных однострочников на JS

⏩Проверить, является ли путь относительным

const isRelative = (path) => !/^([a-z]+:)?[\\/]/i.test(path);

isRelative('/foo/bar/baz'); // false
isRelative('C:\\foo\\bar\\baz'); // false
isRelative('foo/bar/baz.txt'); // true
isRelative('foo.md'); // true

⏩Проверить, является ли строка шестнадцатеричным цветом

const isHexColor = (color) => /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

isHexColor('#012'); // true
isHexColor('#A1B2C3'); // true
isHexColor('012'); // false
isHexColor('#GHIJKL'); // false

⏩Подсчитать количество разных дней между двумя датами

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839

⏩Скопировать в буфер обмена

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

@javascriptv

🖥 Понимание среды выполнения JavaScript

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

Некоторые факты из статьи:

⏩JavaScript имеет уникальную модель выполнения, основанную на движке.

⏩В среде выполнения JavaScript есть два основных компонента: куча (Heap) и стек вызовов (Call Stack).

⏩Куча предоставляет место для хранения переменных и экземпляров, создаваемых программой.

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

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

⏩Web API, Очередь Обратных Вызовов и Цикл Событий обеспечивают неблокирующее поведение JavaScript.

📎 Статья

@javascriptv