Javascript

🖥 Несколько супер-полезных однострочников на 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

🖥 Факт дня — метод 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

🖥 Немного о замыканиях в 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

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

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

@javascriptv

🖥 Асинхронные итераторы в JavaScript

▶️Итак, кейс.
Мы работаем с Node.js, и нам нужно прочитать файл, строка за строкой. В Node есть API для такого типа функций, который называется readLine (полную документацию можно найти здесь).

Это API событий, которые вы можете прослушивать следующим образом:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./file.txt'),
  crlfDelay: Infinity
})

reader.on('line', (line) => console.log(line))

И допустим, у нас есть простой файл:

line 1
line 2
line 3

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


▶️Решение
В дополнение к API событий readline также предоставляет асинхронный итератор. Это означает, что вместо чтения строки через слушателей в событии line мы будем читать строку при помощи нового способа использования ключевого слова for.

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

async function readLine (files) {
  for (const file of files) {
    const line = await readFile(file) // Imagine readFile is our cursor
    console.log(line)
  }
}

Однако благодаря асинхронным итерациям (например, readline) мы можем сделать так:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./xpto.txt'),
  crlfDelay: Infinity
})

async function read () {
  for await (const line of reader) {
    console.log(line)
  }
}

read()

Обратите внимание, что теперь мы используем новое определение for — for await (const x of y).

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

@javascriptv

🖥 Выполнение JavaScript кода, хранящегося в строке: методы

▶️Итак, если коротко, то для того чтобы выполнить JavaScript-код, записанный в виде строки, можно воспользоваться функцией eval():

eval("alert('Выполнено!');"); 

В результате появится всплывающее окно с текстом "Выполнено!".

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

Функция eval() обладает большими рисками для безопасности. Важно убедиться в том, что JavaScript-строка правильно обработана перед ее использованием в eval(), так как инъекции кода могут иметь серьезные последствия.


Альтернативы для запуска строк JavaScript

▶️Использование функции конструктора `Function`

let func = new Function("return 'Привет, мир!';");
func(); // Привет, мир!

Этот метод умеет обходить внешний контекст.

▶️Модуль `vm` в Node.js
В Node.js существует модуль vm, который предоставляет отдельный контекст для выполнения JavaScript-строк.

const vm = require('vm');
const script = new vm.Script("console.log('Привет из VM');");
script.runInThisContext(); // Привет из VM

▶️Безопасное выполнение с помощью `vm2` в Node.js
vm2 предоставляет ограниченное окружение для запуска ненадежного кода.

const { VM } = require('vm2');
const vm = new VM();
vm.run("console.log('Выполнение в песочнице');"); // Выполнение в песочнице

Не забудьте следить за обновлениями в части безопасности и обратите внимание на устаревшие API в vm2, чтобы избежать проблем.

▶️Запуск скриптов с помощью jQuery
Ни одна замена не сможет заменить добрые старые теги <script>, которые можно использовать для запуска JavaScript-строк с помощью jQuery.

let code = "$('body').append('<p>Привет от jQuery!</p>');";
$('<script>').attr('type', 'text/javascript').text(code).appendTo('body'); // Привет от jQuery!

@javascriptv

It's just CSS

Эффект при наведении на картинку, выполненный на чистом CSS, без использования JavaScript.

https://codepen.io/tiffachoo/pen/wvyXRzL

🖥 Релиз Restate 0.8

🌟 Состоялся релиз системы для создания отказоустойчивых рабочих процессов Restate 0.8. Код проекта опубликован на GitHub под лицензией Put Restate under Business Source License от Restate Software.

Согласно пояснению разработчиков проекта, Restate отлично подходит для создания:
⏩рабочих процессов типа Lambda как код (Lambda Workflows as Code)
⏩транзакционных обработчиков RPC
⏩обработки событий с помощью Kafka

В версии Restate 0.8 разработчики уделили большое внимание доработке API, учтя отзывы пользователей, чтобы уменьшить трудности при создании сервисов Restate. Также там добавлены комбинаторы промисов (Promise combinators), которые позволяют детерминированно комбинировать промисы. Например, если вы хотите дождаться вызова службы A или вызова службы B, то Restate позаботится о записи того, какой из промисов был выполнен первым, и в конечном итоге воспроизведёт этот выбор, когда это необходимо. В новой версии проекта доступны все комбинаторы стандартной библиотеки JavaScript.

Всё это звучит многообещающе, посмотрим)

🖥 GitHub

@javascriptv

⚡️ Создание анимированной боковой панели с помощью HTML, CSS и JavaScript

Github

@javascriptv

SCSS Washing machine

Стиральная машинка на HTML и SCSS.

https://codepen.io/Arkellys/pen/YoYNve

🖥 JavaScript однопоточный или многопоточный? Ставим точку

Полезная статья для лучшего понимания JavaScript.
В ней описывается:
— внутреннее устройство host-среды
— расширяемость и встраиваемость
— асинхронность
— инструменты организации многопоточности
— и ещё много всего

📎 Статья
📎 Вот ещё годное видео в тему, доказательство мультипоточности JS

@javascriptv

🖥 Truthy и Falsy в JavaScript

В JavaScript, truthy – это всё, что в логическом контексте считается истиной. Если что-то не является явно ложным (например, 0 или пустая строка ""), то это truthy.

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

▶️Допустим, вы пишете веб-приложение на JavaScript, и хотите проверить, заполнил ли пользователь поле с именем, прежде чем отправить форму. Вот где в игру вступают понятия truthy и falsy.

В JavaScript, если строка не пустая, она считается truthy, а пустая строка — это falsy. Это значит, что вы можете использовать простую проверку, чтобы узнать, заполнено ли поле:

let userName = form.userName.value; // значение, введённое пользователем

if (userName) {
  // Если userName truthy 
  console.log("Спасибо за заполнение имени, " + userName + "!");
} else {
  // Если userName falsy 
  console.log("Пожалуйста, заполните поле с именем.");
}

Этот пример показывает, как использование понятий truthy и falsy может сделать ваш код более кратким и читаемым. Вместо того чтобы писать сложные условия для проверки, не является ли строка пустой, не равна ли она null или undefined, вы можете просто проверить, truthy ли значение переменной.

Примеры falsy значений включают:
🟡0 и -0
🟡"" (пустая строка)
🟡null
🟡undefined
🟡NaN

Всё остальное в JavaScript считается truthy, включая:
🟡"0" (строка, содержащая символ нуля)
🟡"false" (строка, содержащая текст false)
🟡Пустые объекты {} и массивы []

@javascriptv

🖥 Подборка из интересных 20 мини-проектов на чистом Javascript

Никаких фреймворков или библиотек, только JS, HTML5 и CSS

Среди проектов:
*️⃣форма для заполнения
*️⃣бронирование мест в кинотеатре
*️⃣видеоплеер
*️⃣карточки мемори
*️⃣конвертер между валютами
*️⃣счётчик до НГ

Самое то, чтобы прокачать понимание JS, отточить работу с событиями, потренировать разные техники
Just JS it 🔥

https://javascript-mini-projects.netlify.app/

@javascriptv

🖥 Boa — экспериментальный лексер, парсер и компилятор Javascript

Тут на днях года состоялся релиз Boa v0.18 — экспериментального лексера, парсера и компилятора Javascript, а также движка ECMAScript, написанного на языке программирования Rust.

🔥 Новая версия Boa позволяет легко встраивать JS-движок в различные проекты, и а также использовать его из WebAssembly и командной строки.

Разработчики пояснили, что этот выпуск Boa также знаменует собой серьёзное обновление дизайна сайта проекта и появление нового логотипа.

«Поскольку Boa используется все большим количеством проектов, важно, чтобы мы могли предоставить стабильный и надёжный API. Нам кажется, что мы ещё не достигли этого результата, но после обсуждения с командой мы решили нацелиться на выпуск версии 1.0 в ближайшем будущем. Это станет для нас важной вехой, и мы надеемся, что к тому времени у нас будет много новых функций и улучшений», — пояснили разработчики проекта.

Впервые проект Boa был представлен на конференции JSConf EU 2019 разработчиком Джейсоном Уильямсом.

🖥Исходный код проекта выложен на GitHub под лицензией MIT
4.6К⭐️

@react_tg

🖥 Релиз TypeScript 5.4

Приятные новости 🌟
Состоялся релиз TypeScript 5.4. В новой версии языка программирования, построенного на основе JavaScript и позволяющего объявлять и описывать типы, в Microsoft поработали над производительностью языка, добавили новые возможности автодополнения кода для редакторов и упростили способы переподключения библиотек. Типы также используются в инструментах редактора TypeScript, таких как автодополнение, навигация по коду и рефакторинг, которые доступны в Visual Studio и VS Code. Проект доступен через NuGet или npm (npm install -D typescript).

В TypeScript 5.4 появился новый тип утилиты NoInfer, добавлена поддержка вызовов require() в пакете --moduleResolution и --module save, быстрое исправление при добавлении отсутствующих параметров, поддержка автоматического импорта для подпутей, исправлены ранее обнаруженные ошибки.

С выходом TypeScript 5.4 Microsoft продолжает работу над TypeScript 5.5. Согласно дорожной карте, бета-версия этого проекта должна выйти 16 апреля, релиз-кандидат — 4 июня, а финальный релиз — 18 июня.
Что ж, ждём)

Также стало возможно запускать тестовые ночные сборки TypeScript 5.4 Nightlies через npm, которые выпускаются каждый день в полночь (npm install -D typescript@next) для VS Code, Visual Studio, Sublime Text и IntelliJ.

@javascriptv

🖥 Обработка нажатия Caps Lock в JavaScript

Мне одному кажется, что Caps Lock — самая бесполезная клавиша? Вдобавок можно нажать её в самый неподходящий момент, скажем, при вводе пароля и не заметить. В идеале при написании JS добавить блок предупреждения пользователя о нажатии Caps Lock.

Чтобы отслеживать, включен ли Caps Lock, мы используем метод getModifierState:

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // предупредить о нажатии Caps Lock?
    }
});

Для подробного ознакомления с getModifierState давайте заглянем в доки W3C :

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

Как видим, getModifierState позволяет получить множество сведений о клавиатуре пользователя во время событий, ориентированных на нажатие клавиш.
Полезная штука, используйте)

@javascriptv

Совет по использованию инструментов Chrome Dev Tools 💡

Знаете ли вы, что в Chrome Dev Tools можно легко фильтровать запросы по временным рамкам? ✨

@javascriptv

🖥 Brainwave

Проект, с которым вы научитесь создавать современные веб-сайты с эффектом параллакса и макетами в виде коробочек-бенто.

Этот курс охватывает все: от стильного дизайна пользовательского интерфейса до принципов mobile-first, укрепляя ваши навыки работы с React.js и Tailwind CSS.

▪Github
▪Обучающее видео

@javascriptv

🖥 Пианино на JavaScript для Chrome

Проект состоит из 3 файлов: HTML-страницы, CSS-стилей и JS-скрипта.

*️⃣HTML-страница отвечает за «мясо» проекта: надписи, заголовки, подключение звуков и сборку всего проекта в одной точке. Но страница сама по себе ничего не сумеет: мы просто разместим на ней нужные блоки, а вся анимация и поведение задаются в двух других файлах.

*️⃣CSS-стили решают две задачи: оформляют страницу и рисуют интерфейс. Плавная анимация нажатия и появления подсказок прописываются именно здесь.

*️⃣JS-скрипт занимается всей работой пианино: отслеживает нажатия на клавиши, чтобы включить звук и показать нужный эффект на экране.

По-моему, неплохой способ прокачать свой скиллы веб-разработки
⏩ Подробное пошаговое описание, что делать

@javascriptv