Javascript

🚀 fetch-event-stream` 🥳

Крошечная утилита (745b) для обработки событий, отправляемых сервером через API "fetch" и/или WebStreams

🔹 Поддерживает все среды выполнения JS
🔸 Позволяет использовать WebWorker / ServiceWorker
🔹 Принимает AbortController для потоков, которые можно отменить

GitHub: https://github.com/lukeed/fetch-event-stream

@javascriptv

🖥 Асинхронность в JS

Хорошая статья о том, как реализована асинхронность в JavaScript, когда и для чего её использовать

Содержание статьи:
⏩Синхронный код и его проблемы
⏩Асинхронный код
⏩Стек вызовов
⏩Цикл событий
⏩Колбэки
⏩Промисы (Promise)
⏩Асинхронные функции
— Связка async/await
— Плюсы async/await

Пару фактов из статьи:
⏩Асинхронный код включает функции обратного вызова (колбэки), которые вызываются в ответ на события.

⏩Ад колбэков — проблема, связанная с использованием большого количества обратных вызовов в асинхронном коде.

⏩Промисы — объект-обёртка для асинхронного кода, который содержит состояние и работает аналогично колбэкам.

⏩Асинхронные функции — функции, которые возвращают промисы и могут быть вызваны с помощью ключевого слова await.

⏩Связка async/await позволяет писать более чистый и короткий код, а также обрабатывать ошибки с try-catch.

⏩В Node.js и некоторых браузерах есть setImmediate(), который выполняет почти то же, что и setTimeout() с нулевым таймером.

⏩Promise.all() и Promise.race() используются для ожидания выполнения всех запросов или ожидания выполнения первого запроса из списка.

⏩Для обхода асинхронных итерируемых сущностей можно использовать for await...of.

📎 Статья

@javascriptv

🖥 Хорошо ли ты знаешь JavaScript? Проверь себя

Кто-то думает, что JavaScript — это простой язык для несложных скриптов на странице. Но на самом деле современный JS умеет куда больше, чем это было раньше.
Проверь себя, насколько ты знаешь возможности JavaScript.

📎 Ссылка на тест

@javascriptv

🖥 Сравнение Bun.js и Node.js

Держите полезную статью, в которой сравнивается Bun.js и Node.js
А перед этим давайте немного поговорим о Bun.js

⏩Вот основные преимущества Bun.js:
— Почти полная совместимость с Node.js/Deno.
— В десятки раз быстрее Node.js и Deno.
— Нативная поддержка JavaScript.
— Богатый набор встроенных Web API.
— Самый эффективный менеджер пакетов.
— Встроенный dev-сервер.
— Встроенный раннер тестов.
— Встроенный бандлер.
— Возможность почти моментального перехода с Node на Bun.

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

⏩За счет чего достигается эффект Blazingly Fast, которым так известен Bun.js сегодня?
— Bun написан на языке Zig. Это альтернатива C++ и Rust. Zig предоставляет низкоуровневые возможности для ручной работы с памятью, за счет чего появляется возможность оптимизировать вообще все элементы платформы. К слову, это и было сделано: более 80% составных частей Bun, которые так или иначе уже были реализованы в Node, были переписаны на Zig с максимальной оптимизацией обращений к памяти.

— Bun использует движок JSCore. Конечно, напрямую на производительность это не влияет, поскольку многие бенчмарки вам скажут, что JSC почти идентичен по скорости V8. Однако в данном случае дело вовсе не в производительности. JSCore предоставляет более открытую и удобную платформу для выполнения JS-кода, в отличие от V8, который изолирует этот процесс, поэтому накладные расходы на многие процессы снижаются.

📎 Статья

@javascriptv

Объект URL в JavaScript: полный разбор

⏩Итак, создать объект URL можно 2 способами:

— Конструктор URL():

const url = new URL("https://www.example.com/path?query=123#hash");

— Использование window.location:

const currentUrl = new URL(window.location.href);

⏩Из чего состоит URL
Вот некоторые составляющие URL :
— href: полный URL.
— protocol: протокол, например https:.
— host: хост (доменное имя и порт).
— hostname: только доменное имя.
— port: только порт.
— pathname: путь после доменного имени и порта.
— search: строка запроса, начинающаяся с ?.
— hash: якорь, начинающийся с #.
— origin: протокол + домен + порт.

⏩Допустим, у нас есть такой URL, включающий все эти части:

https://www.example.com:8080/path/page.html?query=123#section

⏩Тогда объект URL для него будет выглядеть так:

const url = new URL("https://www.example.com:8080/path/page.html?query=123#section");

⏩А если мы попытаемся вывести значения разных свойств, получим следующее:

console.log(url.href);     // https://www.example.com:8080/path/page.html?query=123#section
console.log(url.protocol); // https:
console.log(url.host);     // www.example.com:8080
console.log(url.hostname); // www.example.com
console.log(url.port);     // 8080
console.log(url.pathname); // /path/page.html
console.log(url.search);   // ?query=123
console.log(url.hash);     // #section
console.log(url.origin);   // https://www.example.com:8080

⏩Ещё вы можете изменить любую часть URL, изменяя соответствующее свойство.

url.search = "?newquery=456";
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456#section

⏩Объект URLSearchParams в сочетании с объектом URL упрощает работу с параметрами запроса.

const params = new URLSearchParams(url.search);
params.set("newparam", "value");
url.search = params.toString();
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456&newparam=value

@javascriptv

🖥 Создание приложения Node.js с TypeScript

⏩Полезная статья о том, как настроить TypeScript для создания приложений Node.js с pnpm, Node.js, TypeScript и ES Modules для удобной разработки.

План статьи
Понимание инструментов
Добавление файлов конфигурации
— package.json
— "type": "module" в package.json
— Зависимости
— Конфигурация TypeScript
— .gitignore
— Каталог src
Добавление скриптов
— Скрипт build
— Скрипт start
— Скрипт dev
—— tsc --watch
—— node --watch
—— run "/dev:/"

📎 Статья

@javascriptv

🔥 Monolith - это инструмент CLI для сохранения полных веб-страниц в виде отдельных HTML-файлов. Он объединяет все ресурсы в один файл, обеспечивая автономный доступ и простое архивирование.

▪ Github

@javascriptv

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

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

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

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

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

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

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

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

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

📎 Статья

@javascriptv

🖥 Полезная статья о функциях высшего порядка в Javascript

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

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

Функции высшего порядка полезны по нескольким причинам:

⏩Абстракция: Инкапсулируя общие паттерны и операции, функции высшего порядка позволяют писать более абстрактный и многократно используемый код. Это облегчает сопровождение кодовой базы, а также рассуждения о ней.

⏩Композиция: Функции высшего порядка позволяют создавать сложные операции путём объединения простых функций. Это делает ваш код более модульным, гибким и лёгким для понимания.

⏩Лаконичность: Функции высшего порядка могут сделать код более лаконичным и выразительным, сократив объем кода, который вам нужно написать. Это облегчает написание и понимание сложной логики, а также отладку кода.

📎 Статья

@javascriptv

📌Годный контент по CSS и какие в нём появились нововведения

О чём говорится в статье:
🔘В CSS появились новые единицы измерения области просмотра, такие как vh, vw, vmin и vmax.

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

🔘Были определены новые состояния: большой экран просмотра и малый экран просмотра, и введены новые единицы: svh и svw.

🔘Тригонометрические функции стали доступны прямо в CSS, что упрощает управление функциями трансформации и генерацию случайных значений.

🔘Трансформации теперь можно разделять и применять по отдельности, что делает код более компактным.

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

🔘Ключевое слово @scope позволяет создавать пространства имён и задавать стили с ограниченной областью видимости.

📎 Статья

Enjoy)

@javascriptv