Дайджест за 2024-04-01 - 2024-04-05

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


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

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

JavaScript Playground: Write and run code with instant live feedback.
Playground для запуска JS-кода, который показывает результат работы expression'ов (например, вы написали 5*5, а playground рядом покажет 25). Выглядит очень круто.


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

3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
Сниппет js-кода, который визуализирует в 3D DOM-дерево страницы. Открываете свой любимый сайт, копируете код из сниппета в консоль, выполняете и наслаждаетесь приколдесной визуализацией.

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

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


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

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

What You Need to Know about Modern CSS (Spring 2024 Edition)

Крутая статья про современный CSS, которая рассказывает про свежие фичи CSS, которые уже пора во всю использовать в разработке. Для каждой фичи есть описание фичи, чем она полезна, поддержка браузерами и интерактивный пример в Codepen.

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

Список описанных фичей:
- Container Queries (size)
- Container Queries (style)
- Container Units
- View Transitions
- Nesting
- Scroll-Driven Animations
- Anchor Positioning
- Scoping
- Cascade Layers
- Logical Properties
- P3 Colors
- Color Mixing
- Margin-trim
- Text wrapping
- Subgrid

https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/

#development #css #recommended #cssContainerQueries #cssHas #viewTransition

Technology Radar | An opinionated guide to today's technology landscape | Thoughtworks

Thoughtworks обновили свой техрадар. Появилось много всяких новых инструментов. Много внимания уделяется использованию AI.

Что такое техрадар - это визуализация в виде радара инструментов и подходов, используемых в компании (в данном случае Thoughtworks). Радар поделен на 4 сектора (языки, инструменты, платформы, техники) и каждая секция поделена на 4 секции по удаленности от центра: 1) Можно смело использовать; 2) выглядит хорошо, но нет уверенности что можно смело использовать; 3) пробуем использовать; 4) прекращаем использовать

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

https://www.thoughtworks.com/radar

#development #techradar

From Text to Models: A Comprehensive Guide to Textual Modeling and Diagrams as Code Tools in 2024

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

Интересно, что автор не стал "повторяться" относительно своей предыдущей статьи и некоторые инструменты не вошли в список (например mermaidjs)

https://modeling-languages.com/text-uml-tools-complete-list/

#development #uml #diagram #architecture

20+ JavaScript libraries to draw your own diagrams (2024 edition)

В продолжение предыдущей ссылки - обзор JS библиотек для построения диаграмм.

https://modeling-languages.com/javascript-drawing-libraries-diagrams/

#development #uml #javascript #diagram

Thoughts on Pair Programming

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

В статье также есть неплохое подсвечивание проблемы двойных стандартов от менеджеров. Заключается оно в простом примере: если разработчики садятся работать в режиме парного программирования, то менеджер может начать ругаться, что сидеть вдвоем над одной задачей - это неэффективно. Но этот же менеджер готов собрать встречу на 2 часа на 10+ человек, которую нельзя пропускать.

Далее автор описывает, как парное программирование помогает в работе. Предположим, что работа делится на 2 типа: в которой много неопределенности и в которой все понятно.

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

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

https://dev.to/shaharke/thoughts-on-pair-programming-1i8g

#development #managment #pairProgramming

Дайджест за 2024-04-08 - 2024-04-12

⭐What You Need to Know about Modern CSS (Spring 2024 Edition)
Крутая статья про современный CSS, которая рассказывает про свежие фичи CSS, которые уже пора во всю использовать в разработке. Для каждой фичи есть описание фичи, чем она полезна, поддержка браузерами и интерактивный пример в Codepen.

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

Technology Radar | An opinionated guide to today's technology landscape | Thoughtworks
Thoughtworks обновили свой техрадар. Появилось много всяких новых инструментов. Много внимания уделяется использованию AI.

Что такое техрадар - это визуализация в виде радара инструментов и подходов, используемых в компании (в данном случае Thoughtworks). Радар поделен на 4 сектора (языки, инструменты, платформы, техники) и каждая секция поделена на 4 секции по удаленности от центра: 1) Можно смело использовать; 2) выглядит хорошо, но нет уверенности что можно смело использовать; 3) пробуем использовать; 4) прекращаем использовать

From Text to Models: A Comprehensive Guide to Textual Modeling and Diagrams as Code Tools in 2024
Большой обзор инструментов для построения диаграм на основе текста. Статья рассматривает кучу современных инструментов для построения диаграмм. Большинство из них так или иначе связаны с визуализацией UML, но есть и другие инструменты.

Интересно, что автор не стал "повторяться" относительно своей предыдущей статьи и некоторые инструменты не вошли в список (например mermaidjs)

20+ JavaScript libraries to draw your own diagrams (2024 edition)
В продолжение предыдущей ссылки - обзор JS библиотек для построения диаграмм.


Thoughts on Pair Programming
Короткая статья про парное программирование от лида небольшой команды, которая недавно начала очень активно использовать эту технику. В статье нет каких-то больших подробностей про то, как эта техника используется в команде, но описаны основные преимущества, которые получила команда от использования техники

В статье также есть неплохое подсвечивание проблемы двойных стандартов от менеджеров. Заключается оно в простом примере: если разработчики садятся работать в режиме парного программирования, то менеджер может начать ругаться, что сидеть вдвоем над одной задачей - это неэффективно. Но этот же менеджер готов собрать встречу на 2 часа на 10+ человек, которую нельзя пропускать.

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

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

JavaScript Signals standard proposal

Во фронтенде одна из основных тем сейчас - это сигналы. Сигналы - это новый удобный способ работы с данными. И вот в tc39 появился пропозал на введение сигналов в стандарт языка. Пропозал на stage 0 - т.е. это еще супер-ранний черновик, но знаменательно то, что кто-то оформил этот черновик

https://github.com/proposal-signals/proposal-signals

#development #javascript #signal #proposal #tc39

Bun 1.1

Вышел Bun 1.1. Основная большая фича - поддержка работы Bun на Windows. По заверениям команды Bun - на Windows он быстрее и работает и устанавливает зависимости. В целом, вспоминая свой последний опыт установки node.js на Windows, я не удивлен. npx somepackage из коробки после установки nodejs просто не работает

Кроме поддержки Windows добавлены разные фичи поменьше, ускорен запуск приложения.

Из прикольных фич:
- Поддержка WebSocket перешла статуса экспериментальной фичи в стабильную фичу.
- В Bun теперь необходимо явно указывать пакеты, чьи скрипты жизненного цикла (например postinstall) вы хотите запускать
- Можно билдить код для запуска в Node.js
- Можно помечать импорты встроенных модулей как макросы. Это позволяет исполнить их на этапе компиляции, а не в рантайме. Например, можно заимпортировать readFileSync как макрос и считать какой-нибудь файл во время компиляции, а не каждый раз считывать его при запуске приложения. Выглядит интересно
- Улучшен тулинг для тестирования: добавили новые матчеры и возможность мокировать модули

В общем, достаточно крупный релиз, все из него описать в одном посте нереально - куча изменений разного размера и значимости почти во все аспекты Bun.

https://bun.sh/blog/bun-v1.1

#development #javascript #bun #releaseNotes

Dioma: Elegant dependency injection container for vanilla JavaScript and TypeScript

Dioma - новая библиотека, реализующая DI контейнеры на JS и TS. Библиотека одновременно имеет очень простое и элегантное API и при этом поддерживает разные способы инстанцирования зависимостей, разные скоупы видимости зависимостей, возможность иметь несколько контейнеров (в том числе child-контейнеры), отслеживает циклические зависимости и умеет в асинхронное инстанцирование. И все это счастье еще хорошо интегрируется с системой типов в TypeScript.

Рекомендую взглянуть на либку. Лично я, вполне вероятно, когда-нибудь её заиспользую в каком-нибудь пет проекте.

Ниже представляю пару примеров кода, чтобы было представление об API.

Использование DI в классах с применением Singletone скоупа

import { inject, Scopes } from "dioma";

class Garage {
  open() {
    console.log("garage opened");
  }

  // Single instance of the class for the entire application
  static scope = Scopes.Singleton();
}

class Car {
  // injects instance of Garage
  constructor(private garage = inject(Garage)) {}

  park() {
    this.garage.open();
    console.log("car parked");
  }

  // New instance of the class on every injection
  static scope = Scopes.Transient();
}

// Creates a new Car and injects Garage
const car = inject(Car);

car.park();

Использование DI не с классами

import { Token } from "dioma";

const token = new Token<string>("Value token");

container.register({ token, value: "Value" });

const value = container.inject(token);

console.log(value); // Value

Использование фабрик

import { Token } from "dioma";

const token = new Token<string>("Factory token");

container.register({ token, factory: (container) => "Value" });

const value = container.inject(token);

console.log(value); // Value

https://github.com/zheksoon/dioma

#development #javascript #dependencyInjection #library #github #recommended

Frontend Development Beyond React: Svelte

React - самый популярный инструмент для разработки во фронтенде, но иногда полезно взглянуть и на другие инструменты, чтобы изучить что-то новое и посмотреть на React с новой стороны. Именно этим и занялся автор текущей статьи - он решил изучить Svelte и во время изучения делал заметки про Svelte, которые превратились в большую статью

В статье рассматриваются разные аспекты Svelte, начиная от компилятора и заканчивая паттернами и крутыми фичами Svelte.

https://itnext.io/frontend-development-beyond-react-svelte-1-3-f47eda22cba5

#development #javascript #svelte

zx 8.0.0

Вышел zx 8.0.0. Напоминаю, что zx - это крутой инструмент от гугла, который позволяет удобно писать cli-cкрипты на js.

Глобальных изменений не так много: пакет теперь в 20 раз меньше за счет сборки на esbuild, возможность выполнять командны синхронно, поддержка AbortController, дропнули ssh

https://github.com/google/zx/releases/tag/8.0.0

#development #javascript #zx #library #google

ESLint v9.0.0 released

Вышел Eslint 9.0.0. Eslint начал активно избавляться от всякого legacy, концентрируясь на том, чтобы быть платформой для линтинга, а не супер-комбайном.

Основные изменения касаются отказа от старого конфига, отказа от nodejs < 18 и еще кучи отказов от всякого легаси, а также немного улучшили API для тестирования

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

module.exports = {
   extends: ['someSharedConfig']
   plugins: ['somePlugin']
}

Это достаточно простое API, но оно имеет ряд недостатков:
- Нужно подстраиваться под правила резвола eslint. Например, если вы хотите в проекте написать кастомное правило, то надо создать полноценный плагин, который должен резолвится по правилам eslint
- При наследовании конфигов eslint будет резолвить плагины этих конфигов от корня, а не от папки с конфигом. Из-за этого появляются разные неприятные эффекты. Например, некоторые конфиги тянут плагины как свои зависимости и рассчитывают, что эти плагины упадет в корень нод-модулей при установке, но такое случается не всегда. Другая проблема, что 2 конфига могут оба тянуть 1 и тот же плагин разных версий. Тогда в корень не попадет ни первая и ни вторая версия плагина. Это большая проблема, которую обходили разными способами, а сообщество поделилось на несколько лагерей (лично я в том лагере, который предлагает указывать все зависимости переиспользуемого конфига в peer-dependencies, чтобы разработчики сами на стороне приложения разобрались как и что лучше установить)

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

const react = require("eslint-plugin-react");
module.exports = {
    files: ["*.js"],
    plugins: {
        react
    },
    rules: {
        "react/jsx-uses-react": "error"
    }
};

Также оставлена возможность запускать eslint со старой стратегией обработки конфига, указан особую енву.

Также Eslint делает достаточно смелый шаг и дропает поддержку nodejs < v18.18.

Eslint убирает из стандартной поставке разные форматтеры. Если они кому-то нужны, их можно поставить отдельными npm пакетами

Также убрана возможность писать правила для плагинов в формате функций, теперь все правила должна быть описаны в полном формате

В Eslint есть API для автоматической проверки кастомных правил. Его доработали и теперь оно также умеет:
- Проверяет, что в сообщении об ошибке все плейсхолдеры заполнены
- Проверяет, что саджест а) изменяет код б) меняет код на валидный в) сообщения уникальны
- Проверяет, что output теста отличается от изначального code
- Проверяет, что в тесте проверяется message и саджест (если он предоставляется в ошибке)
- Проверяет, что нет дублирующих тест-кейсов

Также ускорили опцию --quiet, которая выводит только ошибки, за счет того, что правила, помеченные как warn перестали запускаться.

В общем, инструмент развивается и скоро все будем переходить на новый формат конфигов

https://eslint.org/blog/2024/04/eslint-v9.0.0-released/

#development #javascript #eslint #release

Figma Plugins

Статья про особенности написания плагинов для Figma. Статья не очень сильно раскрывает как же писать эти самые плагины и с какими проблемами можно столкнуться при написании плагина. Но зато статья разбирает проблемы sandbox'инга плагинов.

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

Для этого можно применить sandboxing. Это когда плагины помещаются в какую-то изолированную песочницу, из которой у них очень ограниченный доступ к внешнему миру. Самый простая реализация sandboxing - это iframe, который общается с родительским приложением через postMessage.

Автор рассматривает системы sandboxing'а в Observable (iframe + postmessage) и Val Town (node-deno-vm) и Figma. В Figma для sandboxing'а используется JS движок QuickJS, который запускается прямо в браузере (и, вероятно, скомпилирован в WASM). На мой взгляд, достаточно прикольное решение.

https://macwright.com/2024/03/29/figma-plugins.html

#development #javascript #figma

DevTools Tips & Tricks

10 полезных фичей в DevTools. Некоторые вы уже могли видеть в тысяче других статей про devtools, но другие фичи выглядят достаточно интересно

Полный список фичей:
- При попытке инспектировать popup существует проблема, когда вы переходите в devtools чтобы кликнуть на HTML, фокус с элемента на странице спадает и popup закрывается. В DevTools есть опция, которая предотвращает сброс фокуса при переходе в DevTools
- Использоване LogPoints вместо console.log
- Эмулирование раскладушек (foldable devices) для тестирования верстки для устройств типа samsung fold, где телефон можно разложить в планшет
- Автокомплит в стилях
- Форматы цветов
- Снимок скриншота в эмуляции устройства с высокой плотностью пикселей. В DevTools в рамках эмуляции устройства можно эмулировать не только размер экрана, но и плотность пикселей
- Просмотр событий для Server Sent Events
- Копирование всех изменений стилей, сделанных для данной страницы в devtools
- Live Expressions - это как watch в дебагере, но выводится сразу в devtools.
- Дебаг горизонтальных скролов.

https://frontendmasters.com/blog/devtools-tips-tricks/

#development #javascript #devtools

Migrating 500+ tests from Mocha to Node.js

Хорошая статья про миграцию Astro c Mocha+chai на тест-раннер от ноды. У Astro 600+ тест-сьютов и 1600+ тестов. Большинство из этих тестов интеграционные. Команда Astro захотела переехать на нативное решение в node.js потому что верят в его развитие

Миграция была сделана в 3 этапа: перевели простой пакет, перевели сложный пакет, перевели все остальное

На первом этапе перевели простой пакет, который позволяет создавать новые astro-проекты через astro create. Этот пакет простой с точки зрения миграциии, потому что там были только юнит-тесты. В целом, миграция прошла гладко и серьезных проблем не обнаружилось:
- Неудобно, что флаги командной строки у nodejs многословные (--test-name-pattern вместо --match или -m)
- указание файлов через glob работает немного по другому
- Многопоточность выключается только программно, а не через флаг. В прочем, начиная с 21 nodejs можно включать и через флаг

Далее команда переводила проект по-сложнее и там появилась более серьезные проблема. Nodejs гарантирует изоляцию тестов через запуск каждого теста в отдельном процессе. Тесты в astro уже хорошо изолированы и процессная изоляция просто замедляла исполнение тестов. Поэтому команда Astro сделала неприятный воркераунд: перед запуском тестов, все тест-файлы объединялись в один, чтобы nodejs стартовал все тесты в одном процессе.

Также есть разница в написании проверок в chai и nodejs.

Например, в chai есть способа сравнения на равенство

import { expect } from "chai";

expect("foo").to.eq("foo")
expect("foo").to.be.eq("foo")
expect("foo").to.equal("foo")
expect("foo").to.be.equal("foo")

В node.js способ всего один, что делает код более консистентным

import { assert } from "node:assert/strict";

assert.equal("foo", "foo")

С другой стороны, в chai можно удобно проверить наличие подстроки в строке

import { expect } from "chai";

expect("It's a fine day").includes("fine")

в Node.js же это придется проверять через string.includes

import assert from "node:assert/strict";

assert.equal("It's a fine day".includes("fine"), true)

Третий этап миграции - это мигрировать все остальные тесты в проекте. Звучит как достаточно объемная работа, но Astro воспользовалась помощью сообщества, которое откликнулось и переписало 300 тест-сьютов за неделю

Итоговый результат:
- Переехали на nodejs test runner и отказались от mocha + chai
- В целом Astro довольны переездом
- Текущее API nodejs не всегда удобное и быстрое, но команда nodejs прислушивается к сообществу и решает эти проблемы


https://astro.build/blog/node-test-migration/

#development #javascript #mocha #nodejs #testing #migration #astro

Node.js 22 is now available!

Вышла Nodejs 22, которая станет LTS-кой осенью.

Основные изменения:
- Новый V8 - WASM GC, Array.fromAsync, методы в Set и хелперы для итераторов
- Компилятор Maglev включен по-дефолту. Это увеличит производительность небольших cli
- С включенным экспериментальным флагом можно require-ить синхронные ES-модули
- node --run запускает скрипты из package.json.
- При работе со стримами используется High Water Mark - это отметка, обозначающая, сколько данных приложение готово принять с потока для обработки. В Nodejs22 дефолтное значение High Water Mark повышено до 64кб.
- node --watch запускает скрипты в watch режиме (переведено из экспериментальной фичи в стабильный функционал)
- Имплементация WebSocket вышла из эксперимента в стабильный пакет
- Добавлен glob и globSync в node:fs

https://nodejs.org/en/blog/announcements/v22-release-announce

#development #javascript #nodejs #release

Announcing TypeScript 5.5 Beta

Выпущен Typescript 5.5 Beta. Ниже опишу основные изменения

Улучшение уточнения типов в предикатах. В канале уже был пост про это, но коротко повторюсь. Часто TypeScript-у нужно было явно указывать, что функция уточняет тип аргумента. Теперь же Typescript это будет понимать сам.

Пример кода, который ведет себя по-разному в 5.4 и 5.5

// 5.4 - nums: (number | null)[]
// 5.5 - nums: number[]
const nums = [1, 2, 3, null, 5].filter(x => x !== null);

nums.push(null);  // ok in TS 5.4, error in TS 5.5

Улучшена проверка доступа к полю по индексу. Если TS уверен, что по текущим переменным там будет корректный тип, он не будет кидать ошибку

function f1(obj: Record<string, unknown>, key: string) {
    if (typeof obj[key] === "string") {
        // Now okay, previously was error
        obj[key].toUpperCase();
    }
}

Теперь можно импортировать типы в JSDoc через @import. Импортирование типов в JS файл для использования в JSDoc-е - не самая популярная фича (хотя я использую эту фичу несколько раз в год). Раньше необходимо было делать import внутри декларации типа, теперь же можно явно прописать импорт модуля. Легче показать на примера

// в 5.4
/**
 * @param {import("./some-module").SomeType} myValue
 */
function doSomething(myValue) {
    // ...
}

// в 5.5
/** @import * as someModule from "some-module" */

/**
 * @param {someModule.SomeType} myValue
 */
function doSomething(myValue) {
    // ...
}

Также теперь TS умеет проверять регулярки на валидность (но только те, что пишутся сразу в коде, а не те, которые создаются через new RegExp).

Изоляция деклараций типов. Библиотеки предоставляют свои типы в .d.ts файлах. Часто так бывает, что для проверки типов необходимо проходить по всем импортам внутри .d.ts, чтобы вывести все типы и убедиться в их корректности. Это может занимать много времени, особенно в больших проектах. Поэтому в TS ввели режим isolatedDeclarations, которые проверяет, что все типы .d.ts выводимы из файла без прыгания по импортам, что значительно ускоряет тайп-чек.

Опять же, разберем на примере

import { add } from "./add";

const x = add(); // ОК: тип не объявлен, но переменная не экспортируется

// ОШИБКА, экспортируется, но тип непонятен
export function foo() {
    return x;
}

// OK, тип указан явно
export function foo(): string {
    return x;
}

// OK, тип легко выводится
export let x = 10; 
// ОК, тип легко выводится
export function y() { return 20; } 

// OK, есть `as number`
export function z() { return Math.max(x, y()) as number; }

В tsconfig добавлена поддержка ${configDir} в описании путей. При использовании композиции конфигов была боль с описанием относительных путей т.к. ts обрабатывает их не так, как иногда хочется. Теперь же можно использовать ${configDir} , чтобы указывать пути относительно конфига. Пример использования

{
    "compilerOptions": {
        "typeRoots": [
            "${configDir}/node_modules/@types"
            "${configDir}/custom-types"
        ],
        "outDir": "${configDir}/dist"
    }
}

Также проведены оптимизации внутри TypeScript. TS стал быстрее собирать проекта на 5-8%, а language server стал работать на 10-20% быстрее. Кроме того размер пакета (архива) снизился 5.5МБ до 3.7МБ

Теперь нельзя переопределить undefined. До 5.5 нельзя было делать type null = any, type number = any и прочие переопределения. Но можно было переопределить type undefined = any. Теперь так нельзя

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

https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/

#development #javascript #typescript

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

ESLint v9.0.0 released
Вышел Eslint 9.0.0. Eslint начал активно избавляться от всякого legacy, концентрируясь на том, чтобы быть платформой для линтинга, а не супер-комбайном.

Основные изменения касаются отказа от старого конфига, отказа от nodejs < 18 и еще кучи отказов от всякого легаси, а также немного улучшили API для тестирования

Figma Plugins
Статья про особенности написания плагинов для Figma. Статья не очень сильно раскрывает как же писать эти самые плагины и с какими проблемами можно столкнуться при написании плагина. Но зато статья разбирает проблемы sandbox'инга плагинов.

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

DevTools Tips & Tricks
10 полезных фичей в DevTools. Некоторые вы уже могли видеть в тысяче других статей про devtools, но другие фичи выглядят достаточно интересно

Migrating 500+ tests from Mocha to Node.js
Хорошая статья про миграцию Astro c Mocha+chai на тест-раннер от ноды. У Astro 600+ тест-сьютов и 1600+ тестов. Большинство из этих тестов интеграционные. Команда Astro захотела переехать на нативное решение в node.js потому что верят в его развитие

Миграция была сделана в 3 этапа: перевели простой пакет, перевели сложный пакет, перевели все остальное

Node.js 22 is now available!
Вышла Nodejs 22, которая станет LTS-кой осенью.

Основные изменения:

Announcing TypeScript 5.5 Beta
Выпущен Typescript 5.5 Beta. Ниже опишу основные изменения

Улучшение уточнения типов в предикатах. В канале уже был пост про это, но коротко повторюсь. Часто TypeScript-у нужно было явно указывать, что функция уточняет тип аргумента. Теперь же Typescript это будет понимать сам.


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

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

React 19 Beta

Выпущен React 19 Beta! Обновляться пока рано, но уже можно готовиться к изменениям.

Первое большое изменение - Actions. Команда React не стала мудрить и взяла термин, который используется кучей тулов для менеджмента состояния и начала его использовать. В React-компонентах часто необходимо делать асинхронные действия, например, загружать данные из API. Сейчас в React это можно сделать композицией нескольких useState. А в React 19 можно использовать несколько новых хуков, которые упрощают работу с такими функциями

Пример использования нового API

const [name, setName] = useState("");  
const [error, setError] = useState(null);  
const [isPending, startTransition] = useTransition();  

const handleSubmit = () => {  
  startTransition(async () => {  
    const error = await updateName(name);  
    if (error) {  
      setError(error);  
      return;  
    }  
  redirect("/path");  
  })  
};

Кроме useTransition появился еще useActionState, который упрощает работу с экшнами. Также в Form'ы можно прокидывать action-ы

function ChangeName({ name, setName }) {  
  const [error, submitAction, isPending] = useActionState(  
    async (previousState, formData) => {  
      const error = await updateName(formData.get("name"));  
      if (error) {  
        return error;  
      }  
      redirect("/path");  
      return null; 
    },  
    null,  
  );  
  return (  
    <form action={submitAction}>  
      <input type="text" name="name" />  
      <button type="submit" disabled={isPending}>Update</button>  
      {error && <p>{error}</p>}  
    </form>  
  );  
}

Также для удобства добавили хук useOptimistic, который позволяет упростить применение паттерна Optimistic UI. useOptimistic очень похож на useState, но отличается тем, ему на вход приходит эталонное значение и хук в state возвращает оптимистичное значение, пока action, в рамках котого произошел оптимистичный апдейт, не завершится.

function ChangeName({currentName, onUpdateName}) {  
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);  
  const submitAction = async formData => {  
    const newName = formData.get("name");  
    setOptimisticName(newName);  
    const updatedName = await updateName(newName);  
    onUpdateName(updatedName);  
  };  
  return (  
    <form action={submitAction}>  
      <p>Your name is: {optimisticName}</p>  
      <p>  
        <label>Change Name:</label>  
     <input  
       type="text"  
       name="name"  
       disabled={currentName !== optimisticName}  
     />  
   </p>  
    </form>  
  );  
}

Еще один новый хук use, позволяет дождаться промиса внутри компонента. Из особенностей - хук use может нарушать правила хуков и быть вызван внутри if-ов и других условных конструкций

import {use} from 'react';  

function Comments({commentsPromise}) {  
  // `use` will suspend until the promise resolves.  
  const comments = use(commentsPromise);  
  return comments.map(comment => <p key={comment.id}>{comment}</p>);  
}  

function Page({commentsPromise}) {  
  // When `use` suspends in Comments,  
  // this Suspense boundary will be shown.  
  return (  
    <Suspense fallback={<div>Click Me Load More...</div>}>  
      <Comments commentsPromise={commentsPromise} />  
    </Suspense>  
  )  
}

Наконец-то можно прокидывать ref как prop компонету, без использования forwardRef.

Также добавлено много фичей для серверного рендера, в частности серверные компоненты, серверные экшны и улучшены удобство рендера meta-тегов, style, script async, preload.

Еще из знаковых изменений - корректная поддержка Custom Elements.

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

https://react.dev/blog/2024/04/25/react-19

#development #javascript #react #release