React Geiger

Библиотека для React, которая воспроизводит звук счетчика Гейгера на медленные рендеры React-компонентов. Т.е. вы подключаете её к себе на страницу и будете слышать пощелкивания каждый раз, когда случается рендер дольше определенного значения (50ms). На страничке проекта есть демо, где можно получить экспириенс, не устанавливая эту либу в свои проекты. Хотя я попробую на досуге подключить либку в рабочий проект.

https://github.com/kristiandupont/react-geiger

#development #javascript #react #performance

Дайджест за 2024-03-11 - 2024-03-15

⭐Why React Server Components Are Breaking Builds to Win Tomorrow
Большой статья про эволюцию подходов рендера React-приложений, начиная от клиентского рендера и заканчивая серверными компонентами. Расписано, какие были плюсы и минусы у каждого подхода и почему появился следующий подход.

Рекомендую к прочтению, если вы еще не читали подобных статей и интересуетесь тем, как развивается React.

Introducing JSR - the JavaScript Registry
Команда Deno сначала придумала свой рантайм для исполнения JS, а теперь представляют свой тулинг для реджистри с пакетами - JavaScript Registry (JSR). В основе JSR лежит идея, что тулинг для управления пакетами и реестр пакетами должен предоставлять лучший DX, чем текущие решения

NPM проделал большой путь в своем развитии, но сообщество проделало куда больший путь и хотелки разработчиков отличаются от того, что дает NPM. Например, до сих пор не решен вопрос, какой код нужно публиковать в npm - es5, es6 или может быть вообще не транспайлить код и поставлять исходники как есть?

Introducing runes
В Svelte используется свой компилятор для обеспечения реактивности компонентов. Вы просто объявляете переменную и используете ее в шаблоне, а Svelte компилятор сам делает её реактивной. Иногда все не так просто, но не в этом суть. В Svelte5 уходят от этого подхода и теперь реактивность будет явной. Чтоб было не скучно, названо это рунами.

В статье объясняется разница между новым и старым способом написания кода, а также на что это повлияет. Я недавно писал браузерное расширение с применением svelte и в целом согласен с мотивацией, описанной в статье: магическая реактивность завораживает, но хочется более явного API для этого и возможности использовать его не только в svelte файлах.

Puter: Internet OS and Desktop Environment in the Browser!
Вот сидите вы в своем ноутбуке, запускаете операционную систему, в ней браузер и потом думаете "эх, хочу вернутся операционную систему, но для этого надо выйти из браузера, что же делать?". И тут вам на помощь приходит Puter - десктопное окружение внутри браузера! Puter предоставляет собой много-оконное окружение с приложениями, которое очень похоже на современные операционные системы. Поиграйтесь в демке, выглядит действительно круто (о том, зачем такое нужно - позже).

В демке можно позапускать vscode, терминал, paint, файловый менеджер, камеру и многое другое. Можно даже, как я понял, вставить свое приложение. Интересно, что сам Puter написан на чистом JS + JQuery (вот мы и нашли пользователей JQuery). Ребята решили не брать какой-то сложный фреймворк для того, чтобы приложение работало быстро.

React Geiger
Библиотека для React, которая воспроизводит звук счетчика Гейгера на медленные рендеры React-компонентов. Т.е. вы подключаете её к себе на страницу и будете слышать пощелкивания каждый раз, когда случается рендер дольше определенного значения (50ms). На страничке проекта есть демо, где можно получить экспириенс, не устанавливая эту либу в свои проекты. Хотя я попробую на досуге подключить либку в рабочий проект.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Shiki: Syntax highlighter

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

https://shiki.style

#development #javascript #library

The faster Lambda runtime - NodeJS or LLRT? We benchmarked.

Недавно Amazon сказали, что хотят использовать на своих лямбдах не node.js, а LLRT. LLRT - это эффективный рантайм на основе движка QuickJS. Amazon явно сделали это не просто так, а провели исследование эффективности LLRT в их кейсах, но публично их не показывали (или я не увидел). В этой статье автор пытается разобраться, действительно ли LLRT лучше

В целом статья делится на 2 части: сравнение движков (V8 и QuickJS) и сравнение скорости работы лямбды на node.js и LLRT

Итоги сравнения движков:
- V8 быстрее всех конкурентов по перформансу
- QuickJS весит так мало, что помещается на микрухи типа ESP32. QuickJS весит около 1 МБ, в то время как nodejs около 25-40 (в статье описано 150МБ, но по факту с сайта nodejs бинарь весит 25-40 в зависимости от платформы)

Если сравнивать скорость работы лямбды на двух рантаймах, то:
- LLRT инициализируется в разы быстрее (47ms против 770ms). А т.к. это лямбда, то за это время приходится платить (насколько я понимаю принцип работы AWS)
- Скорость ответа на запросы у LLRT также выше, чем у nodejs

Наверное, можно сказать что сам бенчмарк не совсем точный или правильный (как и почти любой бенчмарк в интернете), но какой есть. Видно, что LLRT запускается быстрее (это ожидаемое следствие QuickJS), но также и быстрее выполняет основную функцию - обработку запросов.

https://learnaws.io/blog/node-vs-llrt

#development #javascript #performance #nodejs #llrt #benchmark

Modern Git Commands and Features You Should Be Using

Git, де факто, стандарт индустрии в области инструментов CVS и разработчики используют его каждый день. Однако, большинство разработчиков знают только основные команды - commit, push, pull, checkout.

В статье рассказывается о полезных фичах git, которые существуют относительно недавно: switch для перехода между ветками, restore для восстановления файлов, sparse-checkout для чекаута не всего репозитория, а только его части, worktree для одновременной работы над несколькими ветками и bisect для поиска коммита, в котором появилась проблема

Статья очень простая и короткая, но таких статей, про использование базовых инструментов, если честно, не хватает.

https://martinheinz.dev/blog/109

#development #git #recommended

Voici.js - A Node.js library for pretty printing your data on the terminal

Библиотека для вывода таблиц текстом в терминал в node.js. Библиотека написана на Typescript и имеет много разных фич: стилизация таблицы, сортировка, подсветки, агрегация и многое другое. С одной стороны "зачем кому-то нужны таблицы в stdout", с другой, кому то это может быть полезно. Например, у нас в проекте есть скрипты на node.js, которые мы запускаем в CICD пайплайнах и там понятный человеку вывод важен.

https://voici.larswaechter.dev

#development #javascript #nodejs #library

The Magic in Shiki Magic Move

В тулах для презентаций есть анимация перехода между слайдами, которая автоматически определяет, как нужно переместить элементы с 1го слайда на другой. Это позволяет делать красивые анимации смены слайдов. И вот такую же штуку поддерживает shikijs для кода. Вы можете вставить 2 примера кода, например "до" и "после" рефакторинга, и shiki сам красиво анимирует переход одного в другой.

В статье рассказывается, как реализована эта фича в shiki. В целом, как я понял, алгоритм одновременно и прост и непрост. Верхнеуровнево он достаточно простой: есть 2 сниппета кода, нужно распарсить токены с каждого сниппета, а затем разметить их как "новый токен (не было в 1 сниппете, но появился во 2)", "исчезающий токен (был в 1 сниппете, но нету во 2)", "перемещающийся токен(есть в обоих снипетах)". Затем для каждого типа токена придумать анимацию - исчезающие исчезают, появляющиеся появляются, а для перемещающихся надо собрать координаты откуда и куда они перемещаются. Затем собственно сделать красивую анимацию для каждого типа анимации.

Звучит просто. Но непросто корректно найти пары элементов, которые двигаются (и вообще искать diff по тексту). В shiki используется подход от Google diff-match-patch, которая реализована как либа и создана как раз для нахождения дифов между текстом, которую Google делал для Google Docs (возьмите себе на заметку, если у вас есть подобная задача)

Задача с анимированием более простая, поэтому тут углубляться не буду: матчим дифф на токены текста (которые являются span'ами текста) и высчитываем изменения координат для токенов, которые должны переместится

Результат выглядит просто бомбически.

https://antfu.me/posts/shiki-magic-move

#development #javascript #animations #shikijs

Дайджест за 2024-03-18 - 2024-03-22

Shiki: Syntax highlighter
Еще одна библиотека для подсветки синтаксиса в браузере. Поддерживает много языков и тем, а также кастомизируется через плагины и имеет интеграции в некоторые инструменты для генерации статических сайтов.


The faster Lambda runtime - NodeJS or LLRT? We benchmarked.
Недавно Amazon сказали, что хотят использовать на своих лямбдах не node.js, а LLRT. LLRT - это эффективный рантайм на основе движка QuickJS. Amazon явно сделали это не просто так, а провели исследование эффективности LLRT в их кейсах, но публично их не показывали (или я не увидел). В этой статье автор пытается разобраться, действительно ли LLRT лучше

В целом статья делится на 2 части: сравнение движков (V8 и QuickJS) и сравнение скорости работы лямбды на node.js и LLRT

⭐Modern Git Commands and Features You Should Be Using
Git, де факто, стандарт индустрии в области инструментов CVS и разработчики используют его каждый день. Однако, большинство разработчиков знают только основные команды - commit, push, pull, checkout.

В статье рассказывается о полезных фичах git, которые существуют относительно недавно: switch для перехода между ветками, restore для восстановления файлов, sparse-checkout для чекаута не всего репозитория, а только его части, worktree для одновременной работы над несколькими ветками и bisect для поиска коммита, в котором появилась проблема

Voici.js - A Node.js library for pretty printing your data on the terminal
Библиотека для вывода таблиц текстом в терминал в node.js. Библиотека написана на Typescript и имеет много разных фич: стилизация таблицы, сортировка, подсветки, агрегация и многое другое. С одной стороны "зачем кому-то нужны таблицы в stdout", с другой, кому то это может быть полезно. Например, у нас в проекте есть скрипты на node.js, которые мы запускаем в CICD пайплайнах и там понятный человеку вывод важен.

The Magic in Shiki Magic Move
В тулах для презентаций есть анимация перехода между слайдами, которая автоматически определяет, как нужно переместить элементы с 1го слайда на другой. Это позволяет делать красивые анимации смены слайдов. И вот такую же штуку поддерживает shikijs для кода. Вы можете вставить 2 примера кода, например "до" и "после" рефакторинга, и shiki сам красиво анимирует переход одного в другой.

В статье рассказывается, как реализована эта фича в shiki. В целом, как я понял, алгоритм одновременно и прост и непрост. Верхнеуровнево он достаточно простой: есть 2 сниппета кода, нужно распарсить токены с каждого сниппета, а затем разметить их как "новый токен (не было в 1 сниппете, но появился во 2)", "исчезающий токен (был в 1 сниппете, но нету во 2)", "перемещающийся токен(есть в обоих снипетах)". Затем для каждого типа токена придумать анимацию - исчезающие исчезают, появляющиеся появляются, а для перемещающихся надо собрать координаты откуда и куда они перемещаются. Затем собственно сделать красивую анимацию для каждого типа анимации.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Type system of the React compiler

Статья про систему типов в разрабатываемом компиляторе React Forget. В данной статье объясняется, как на основе анализа кода компилятор может понять, что используемые функции и переменные оперируют только примитивами и поэтому их не нужно оборачивать в useMemo, сохранив устройство немного ОЗУ и уменьшив размер поставляемого бандла.

Использование своей системы типов позволяет React'у не только оптимизировать код на этапе компиляции, но и проводить проверки корректности использования кода. Например, запрещать мутировать state из useState.

https://www.recompiled.dev/blog/type-system/

#development #javascript #react #reactForget

OpenTelemetry in Practice: Instrumenting JavaScript Apps for Tracing

Статья про интеграцию nodejs и браузерных js приложений в OpenTelemetry.

OpenTelemetry - это проект, который предлагает фреймворк для сбора, обработки и экспорта телеметрии (сигналов, трейсов, логов), и вокруг которого можно настроить разные бекенды для анализа телеметрии.

Если говорить простым языком, то OpenTelemetry позволяет реализовать в проекте хороший observability, когда вы, расследуя какой-то инцидент с прода и зная traceId одного из запросов, можете восстановить весь процесс обработки запроса пользователя от "клика на кнопку" и до запросов в базу. Причем, это все можно красиво визуализировать, агрегировать и по разному обрабатывать.

Вернемся к JS. OpenTelementry описывает протокол, по которому нужно передавать телеметрию, а также дает готовый sdk для подключения в nodejs и браузер, который отправляет базовую телеметрию (не уверен точно какую, но как минимум исполняемые http запросы должны логироваться). SDK для подключения, судя по всему, супер гибкое, поэтому чтоб подключить SDK надо установить около 10 npm пакетов и написать около 50 строчек инициализации.

В статье коротко рассказывается и показывается, как подключить OpenTelementry в nodejs и браузерное приложение, как локально поднять простой коллектор для данных и смотреть трейсы со своим приложений

https://marmelab.com/blog/2024/03/14/opentelemetry-in-practice-instrumenting-javascript-apps-for-tracing.html

#development #javascript #nodejs #opentelemetry #monitoring #sre

Type Predicate Inference: The TS 5.5 Feature No One Expected

В TS 5.5 появится автоматическое уточнение типов у функций-предикатов. Проще всего это объяснить на примерах

Typescript давно умеет уточнять типы в условиях: если мы будем проверять тип переменной в условии if, то в теле if переменная будет уточненного типа

console.log(value); // value: string | number

if (typeof value === "string") {
    console.log(value); // value: string
}

С функциями типа isString такое не работало, пока не добавили специальный синтаксис

function isString(value: unknown): value is string {
   return typeof value === "string";
}

if (isString(value)) {
  console.log(value); // const value: string
}

Однако, есть 2 проблемы: 1) нужно не забывать писать этот специальный синтаксис 2) TS не проверяет, действительно ли тело функции сходится с объявленной проверкой. Например, если случайно указать is number вместо is string и TS ничего не скажет на этот счет

В релизе 5.5 Typescript сам будет уточнять тип переменных в таких функциях

function isString(value: unknown) {
  return typeof value === "string";
}

if (isString(value)) {
  console.log(value); // string
}

И это работает даже в более сложных примерах

function isObjAndHasIdProperty(value: unknown) {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    typeof value.id === "number"
  );
}

if (isObjAndHasIdProperty(value)) {
  console.log(value.id); // number
}

Однако, это все еще не будет работать для arr.filter(Boolean) т.к. Boolean - это не предикат. Но эта проблема решается установкой ts-reset

https://www.totaltypescript.com/type-predicate-inference

#development #typescript

Node.js: The Documentary | An origin story

Вышла документалка про node.js. Я еще не смотрел (но собираюсь посмотреть), но судя по навигации, документалка посвящена истории создания ноды: от появления самой идеи использовать v8 для рантайма, до драмы о разделении коммьюнити на 2 лагеря (io.js и node.js) и дальнейшего их воссоединения

https://www.youtube.com/watch?v=LB8KwiiUGy0

#development #nodejs #documentary #youtube

Дайджест за 2024-03-25 - 2024-03-28

Type system of the React compiler
Статья про систему типов в разрабатываемом компиляторе React Forget. В данной статье объясняется, как на основе анализа кода компилятор может понять, что используемые функции и переменные оперируют только примитивами и поэтому их не нужно оборачивать в useMemo, сохранив устройство немного ОЗУ и уменьшив размер поставляемого бандла.

Использование своей системы типов позволяет React'у не только оптимизировать код на этапе компиляции, но и проводить проверки корректности использования кода. Например, запрещать мутировать state из useState.

OpenTelemetry in Practice: Instrumenting JavaScript Apps for Tracing
Статья про интеграцию nodejs и браузерных js приложений в OpenTelemetry.

OpenTelemetry - это проект, который предлагает фреймворк для сбора, обработки и экспорта телеметрии (сигналов, трейсов, логов), и вокруг которого можно настроить разные бекенды для анализа телеметрии.

Type Predicate Inference: The TS 5.5 Feature No One Expected
В TS 5.5 появится автоматическое уточнение типов у функций-предикатов. Проще всего это объяснить на примерах

Typescript давно умеет уточнять типы в условиях: если мы будем проверять тип переменной в условии if, то в теле if переменная будет уточненного типа

Node.js: The Documentary | An origin story
Вышла документалка про node.js. Я еще не смотрел (но собираюсь посмотреть), но судя по навигации, документалка посвящена истории создания ноды: от появления самой идеи использовать v8 для рантайма, до драмы о разделении коммьюнити на 2 лагеря (io.js и node.js) и дальнейшего их воссоединения

https://www.youtube.com/watch?v=LB8KwiiUGy0

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегамдрузьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Как в Node.js контролировать потребление памяти при обработке сетевых запросов

Статья на хабре от Тинькофф про потоковую обработку данных в node.js небольшими порциями. При обработке запросов расходуется память - ведь нужно все пришедшие реквесты где-то хранить перед их обработкой. Один из способов вызвать DoS - это отправить много очень тяжелых запросов на бекенд и тем самым вызвать у него падение по потреблению памяти. Поэтому в высоконагруженных проектах необходимо чутко относится к обработке запросов. В статье рассказывается, как обрабатывать запросы на node.js и не падать по памяти

Техника, о которой говорится в статье, одновременно и проста и сложна. Нужно спроектировать такой протокол передачи данных, чтобы не нужно было дожидаться получения всех данных для их обработки. Это открывает нам возможность обрабатывать данные потоками. В свою очередь, TCP-протокол поддерживает явное указание сервером количества пакетов, которые он может принять.

Суммарно это дает следующее решение: в node.js создается Stream, в котором указано количество данных, после которого приостанавливается наполнение Stream (эта отметка называется highWaterMark). Этот Stream обарабатывается через for await of и связывается с обработчиком request. Node.js видя, что request связан со стримом, у которого есть highWaterMark, отправляет клиенту по TCP-соединению информацию о том, сколько еще данных можно отослать.

Как итог: запрос обрабатывается потоково, nodejs не расходует лишнюю память.

Данная статья очень хороша тем, что объясняет и работу потоков в nodejs, объясняет немножко про TCP и показыает реальный кейс оптимизации nodejs приложения.

https://habr.com/ru/companies/tinkoff/articles/799709/

#development #nodejs #performance #stream #habr #recommended

Для подписчиков из Новосибирска: 9 апреля SRE-Митап в Новосибирске

https://meetup.tinkoff.ru/event/sre-on-the-road-novosibirsk/

Программа:
18:30 - 19:00 Регистрация участников
19:00 - 19:40 Вячеслав Хаверко, Паттерны отказоустойчивой архитектуры
19:40 - 19:45 Перерыв
19:45 - 20:25 Максим Снежков, Аварийное восстановление Kubernetes в Cluster API
20:25 - 20:30 Перерыв
20:30 - 21:10 Лев Алимов, SRE+GPT. Использование LLM в повседневной работе инженера
21:10 Нетворкинг

JavaScript Visualized: Promise Execution

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

https://www.lydiahallie.com/blog/promise-execution

#development #javascript #Promise #guide #recommended

JavaScript Playground: Write and run code with instant live feedback.

Playground для запуска JS-кода, который показывает результат работы expression'ов (например, вы написали 5*5, а playground рядом покажет 25). Выглядит очень круто.

https://runjs.app/play

#development #javascript #playground

We Rewrote our React App in Svelte in Three Weeks

Короткая история, как Dusty Phillips вместе со своей женой развивали небольшой проект (приложение для написания историй) и столкнулись с проблемой реализации drag-and-drop в React, но нашли хорошее решение на Svelte. Svelte настолько им понравился, что они переписали все приложение на нем

Какие основные плюсы Svelte, по сравнению с React, выделяет автор:
- Более быстрая разработка (в тексте буквально есть передергивание "сделал на Svelte за 1 день то, что на React мы тратили 6 недель")
- Необходимо писать меньше кода
- Разработка на Svelte намного веселее, чем разработка на React. А с релизом Svelte 5 станет еще веселее
- Легче изучить. Для начала разработки на Svelte необходимо знать HTML, JS и CSS.

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

Кроме того видно, что пришлось побороться с реактивностью Svelte (как, наверное, и всем, кто начал трогать Svelte). Но в Svelte5 реактивность будет более управляемой, что должно пойти на пользу разработчикам. Тем, кого заинтересует статья, автор рекомендует подождать Svelte5

Также автор выделил один большой минус Svelte - сложно добавлять стили в используемые внешние компоненты. Как следствие, использование любого ui-kit'а отзывается болью борьбы со стилями.

https://dusty.phillips.codes/2024/03/20/we-rewrote-our-react-app-in-svelte-in-three-weeks/

#development #javascript #react #svelte #refactoring

3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.

Сниппет js-кода, который визуализирует в 3D DOM-дерево страницы. Открываете свой любимый сайт, копируете код из сниппета в консоль, выполняете и наслаждаетесь приколдесной визуализацией.

Насколько знаю, что-то подобное есть нативно и в DevTools, но тут весь прикол как раз в том, что это сделано небольшим сниппетом js-кода.

https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca

#development #javascript

Tinkoff запускает командное соревнование Tinkoff CTF с призовым фондом.

Я сам не любитель такого формата, но наверняка кому то будет интересно.

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

Разбор одной из задач есть на хабре и он достаточно интересный и полезный, как минимум, для общего развития (декомпилириуется Android APK, подменяются ресурсы, перехватываются сетевые запросы к мобильному приложику).

Соревнование идет в командах до 3х человек. На всё про всё - 36 часов от 9 утра 20 апреля, до 9 вечера 21 апреля.

Участвовать можно как в онлайне, так и в офлайне в офисах Тинькофф в Москве и регионах (в том числе в Новосибирске).

Регистрация тут