На этой неделе подвалило ещё 2 важных релиза:
https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-5-beta/
TS научится выводить тайпгарды самостоятельно, без явного описания.

https://module-federation.io/
Теперь эта технология стала бандлер-независимой. Теперь мы сможем шарить модули между проектами с разными бандлерами. Большое событие, кмк.

Ну и важная статья о том насколько важно крупным проектам быть early-adopters в новых технологиях. А так же как менеджить большие изменения в опенсорсе:
https://astro.build/blog/node-test-migration/

Как подготовить публичное выступление

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

Спешу поделиться и с вами

Не так давно мы решили к PR'ам выводить в статистику не только отчёт по увеличению бандла, но и по уменьшению. Всё-таки ощущать себя молодцом всегда приятно.

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

Так что собирайте статистику. Она лишней не бывает. Странности в ней могут показать неочевидные проблемы в проектах.

Чат, что вы думаете о «тупых» продуктах по типу https://remarkable.com/store/remarkable-2?

Я раздумываю над покупкой этой вещицы, но меня смущает то, что она направлена на огромный объём рукописного текста, а я предпочитаю печатать на клавиатуре и делать немного пометок с помощью карандаша. А так же часто мне важна камера, так как это удобно сделать снимок, а потом рисовать поверх него.
Из-за этого я не могу найти выгоды для себя в этой штуке.

А вы как думаете? Пробовали ли что-то подобное?

Новый месяц - новая реклама себя.

Если очень кратко: то я за деньги консультирую по разным вопросам. Если очень длинно: https://news.1rj.ru/str/xavescor_meetings_logs/6

Интересный кейс человека, который арендовал меня на одну сессию:
Я рассказал как поправить резюме и то, что есть хороший чат @resume_review, где люди критикую резюме и помогают сделать его лучше.
В итоге оказалось, что там сидят и рекрутёры тоже.
Интересный вывод: не стесняйтесь общаться с людьми и вываливать информацию о себе в паблик. Интересующие тебя люди могут найтись из неожиданных мест.

Очередная пачка изменений во фронте за эту неделю:
https://github.com/jestjs/jest/pull/14661
Jest переписывается на ESM. Учитывая, что через пару лет 22 года будет минимальной LTS, то куча проблем джеста с ESM кодом исправится сама собой, которая не поправится переписыванием на ESM

https://github.com/angular/angular/releases/tag/18.0.0-rc.0
Выход новой RC ангуляра. В ней не так много изменений, но там нет кардинальных изменений. Немного перешли на сигналы, чуток улучшили роутер, чуток выпили депрекейт и обновили минималку ts’a.
Ангуляр - это тот проект, который двигается как взрослый продукт: ничего не заставляем переписывать чтобы обновиться, кроме того о чём предупредили сильно заранее.


https://x.com/acdlite/status/1785691330988986587?s=61&t=VrzabS9_wqfWIQDxnvG2FA
Ну и решения от разрабов реакта: давайте патчить Date в будущих версиях реакта. Что же может пойти не так?

Время покажет

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

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

И вопрос: как с этим бороться? А бороться в итоге не надо. Надо поверить времени помогать тебе.
К примеру, организация каналов в телеге - это попытка организовать своё потребление, из-за которого ты можешь потребить кучу бесполезной информации, потому что ты сказал "я слежу за этим человеком".
И решение этой проблемы простое: хватит организовывать потребление информации. Если вы что-то не увидели, то это не ваша проблема, а проблема информации. Реально важные вещи не пролетят мимо вас. Я делаю просто: всё находится в одной ленте. Если я вижу канал редко, то я отписываюсь. Информация дойдёт до меня другими способами. Через другие каналы, через знакомых, через работу. Если не дойдёт, ну и пофигу на неё, значит она не важна.

Аналогичная ситуация у меня с тудулистом. Всё находится в одном списке с двумя приоритетами: не важно и очень важно. Причём в категории "очень важно" находятся реально важные вещи по типу "сделать платёж по кредиту". Остальное же летит в неважное. В этой ленте уже около 400 записей. Если я что-то не сделал из этого неважного, то и фиг с ним. Значит это реально не важно.

Логика очень проста: если вы что-то не увидели за какое-то время, то это вам не надо.

Аналогично я делаю с покупками: если мне хочется купить какую-то вещь и я сомневаюсь, то я даю себе время. Т.е. просто откладываю решение о покупке. На неделю, на месяц, на два. Если за этот срок я не перестал сомневаться, то значит вещь стоящая и её надо купить.

И подобного теста временем вокруг меня куча. Не стесняйтесь игнорировать информацию. 99% того что происходит вокруг нас - белый шум. И если вы не поучаствуете в нём, то это не проблема. Не стоит тратить кучу времени на обработку этого шума.

Последние 2-3 недели я работаю над автоматизацией проверок в проекте и тулами, которые упрощают жизнь разработчику.

Мой выбор пал на ESLint. И я столкнулся с тем, что нигде никак не описывается как писать +- сложные еслинт плагины. Документация - это просто справочник, даже учитывая что там написано слово tutorial в разделе create own plugin. Поэтому после написания плагина я делаю попытку задокументировать свой опыт, чтобы другиен люди не тратили своё время и нервы в том, чтобы написать свои правила:

https://dev.to/xavescor/eslint-plugin-what-was-missed-in-the-doc-fmg

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

one-time-password(OTP) в последнее время стало большой занозой в заднице. И если в браузерах хорошо помогают плагины, которые автоматически подставляют значения, то в терминале - хоть вешайся.

Но, благо, у всяких 1password(которым я пользуюсь) есть +- удобный cli клиент, и поэтому, к примеру, паблиш новой версии пакета из cli становится очень простым делом:

pnpm publish --access public --otp (op item get npm --otp) --tag latest 

Уверен, что подобная штука есть и у битвардена, но я не изучал.

Немного новостей, на которые я обратил внимание за последнюю неделю:
https://x.com/sheremet_va/status/1788501641836040260?s=52&t=ohIjgaVZLt6vr9X0nBz1jg
vitest реально думает о том как удобно писать код

https://arstechnica.com/gadgets/2024/04/google-delays-third-party-cookie-death-again-now-scheduled-for-2025/
third party cookies в очередной раз откладываются. Теперь до 2025 года. Спасибо британским регуляторам.

https://typehero.dev
Прекрасный сайт, чтобы потренироваться в написании типов и прокачать своё знание тайпскрипта. Я его попробовал и всем горячо советую. Игрофикация в обучении во все поля

Самодокументация кода

Документация - важная часть библиотек, которую очень лень писать. Поэтому важно уметь писать код так, чтобы он был самодокументируемым. Но с этим не справляется ни babel, ни webpack, ни eslint.

Они предлагают писать свои конфиги по простой схеме

module.exports = {...}

А что писать в этом объекте? Ну, сам догадаешься, если мы забыли описать это в документации.
Но у нас есть jsdoc, с помощью которого мы можем связывать js код и ts типы, к примеру

/**
 * @type {import('webpack').Configuration}
 */
module.exports = {}

И благодаря этим аннотациям код становится внезапно самодокументируемым. Ты можешь писать комментарии к конкретным полям в объекте, ты можешь помечать их аннотацией @deprecated, ты можешь делать что угодно. И любому программисту это понятно.

Если же у тебя TS, то надо вообще форсить людей с помощью тупых функций

type Config = {};

export const declareConfig(config: Config) {
  return config;
}

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

Из относительно хороших примеров: посмотрите как организована система плагинов у rollup. Они во всю используют этот механизм для подключения внешних плагинов. Ты не просто описываешь конфиг, а вызываешь типизированную функцию.

https://react.dev/learn/react-compiler

Хотелось бы оставить это до понедельника, но это прямо событие, Не сказать что положительное или отрицательное.

Давайте глянем что он может: он автоматически оборачивает содержимое вашего реактора компонента в костыли под именем useMemo/useCallback/React.memo. Теперь, возможно код станет поприятнее.

НО
- он работает только в Strict-Mode(привет текущая кривая экосистема)
- он работает только в рамках одного файла(привет компоненты на 100050000 строк)
- привет(предполагаю) внезапная деоптимизация кода, если вы нарушите какую-нибудь из эвристик этого компайлера, а все наверное встречались с ситуацией, когда ты забыл что-то мемоизировать и у тебя приложение падает с бесконечным ререндером. Архиотвратительная штука

Как по мне, ход интересный, но, кмк, совсем не в ту сторону.

Интересное из мира разработки, что я встретил за прошлую неделю:

- прошла реакт конф. https://twitter.com/t3dotgg/status/1790781312871383259
Не сказать что там есть что-то интересное, но ознакомиться полезно, если собираешься дальше с реактом жить

- state of html 2023. https://2023.stateofhtml.com/en-US Результаты.
Советую ещё раз глянуть state of html, только в результате отчёта. Поможет чуток освежить знания в html. Я, к примеру узнал о теге <Search> и атрибуте focusgroup

- https://blogs.vmware.com/cloud-foundation/2024/05/14/vmware-desktop-hypervisor-pro-apps-now-available-for-personal-use/
Появилось нормальное бесплатное решение для виртуализации на m1 маках. До этого приходилось прямо неплохо так мучаться. Всем советую, если надо что-то быстро проверить на другой ОС.

- https://world.hey.com/dhh/once-1-is-entirely-nobuild-for-the-front-end-ce56f6d7
Небольшой пример как чувак решил всё сделать без сборщика.

- https://www.npmjs.com/package/esm
Пакет, который позволяет в cjs код импортировать ESM на ноде. Теперь не надо ждать 22 ноды, чтобы переходить на ESM либы, если у вас cjs проект

Почему реакт идёт куда-то не туда pt1

- React Server Components(RSC) вы тута
- React Compiler
- Hooks

Спасибо подкасту "Веб-Стандарты"(https://www.youtube.com/@webstandards_ru), за напоминание что у меня горит от реакта. Всем рекомендую.

RSC - это возможность выполнять код ваших компонентов на сервере и прозрачно приносить результат на клиент. Звучит как очень хорошая фича. Да, звучала, около 4 лет назад.
Давайте глянем что произошло за это время:
а) Была введена новая директива "use server". Что превратило наш код в менее предсказуемую штуку с точки зрения сборки и дебага. А так же развязало руки немного в других местах(об этом в следующих сериях).
б) Если у вас есть серверные компоненты, то у вас не будет работать контекст. А у нас прямо дофига экосистемы построено на том, чтобы использовать контекст. Да, есть createServerContext. Но у него нет Consumer. Т.е. пользоваться нормально вы им не можете
в) Документации у этой штуки нет. У нас есть только референсное решение в Nextjs. И это реальная проблема. RSC состоит из двух частей: сборщика и протокола. И эти штуки закрыты. Вы не можете написать собственную имплементацию RSC. Ну, можете, если зареверc инженерите сборку некста и протокол, по которому некст общается с клиентом. Да пофигу на это. Вы даже документацию к createServerContext на react.dev не найдёте(на сайте некста тоже).

А теперь давайте вспомним почему реакту нужны RSC: потому что реакт тормознутый из-за миллиарда ререндеров на каждый чих и жирный донельзя по сравнению с конкурентами(пруф в комментариях). И наличие RSC совсем сорвало башню реакту, как мне кажется. Потому что React19 теперь на 20% жирнее чем React18(https://x.com/damianstasik_/status/1792144533997703506).

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

Решается эта проблема очень просто: @WebpageBot
Отправляете ссылку этому боту и он сбрасывает превью у всех пользователей. В итоге вы можете рекламить свои ссылки с всегда актуальным превью.

Почему реакт идёт куда-то не туда pt2

- React Server Components(RSC)
- React Compiler(RC) вы тута
- Hooks

RC - это "штука, которая позволяет упрощать ваш код, так как вам больше не нужно думать о мемоизации", как продаёт нам это решение команда реакта. Причём продаёт агрессивно. Этот продукт настолько хорош, что ребята из команды реакта ходят(https://github.com/bluesky-social/social-app/pull/4161) по репозиториям и сами внедряют его. Весьма красноречиво, не так ли?
Давайте глянем на реализацию RC. Если вы заглянете в исходники, то увидите, что ребята решили не переиспользовать уже текущие решения на рынке, а попросту написать всё своё: парсер, систему типов и логику мемоизации. Ни одно из решений, которое уже есть на рынке не было переиспользовано. К примеру, они могли бы хотя бы воспользоваться тайпскриптом, который уже давно протестирован сообществом. А это значит только одно: мы будем иметь максимальное количество магии и перестанем вовсе понимать что происходит в собранном коде.

Другая весёлая проблема: ваш итоговый код становится ещё больше. Но это же не проблема, правда? У нас же есть RSC, да? Теперь реакт - это анти-svelte. Если тот с помощью компиляции делает небольшие приложения, то RC делает толсто, но быстро(спорно).
Третье: наш код теперь не является отражением того что в реальности будет выполняться. Если в ангуляре и вью вся компиляторная магия происходит только в одном месте: в компиляции шаблонов, которые не являются кодом, то команда реакта решила собирать js.
Далее: RSC приоткрыло нам дыру в ад метапрограммирования своим "use server". Но теперь нас ничего не останавливает, поэтому RC добавляет ещё одну подобную директиву: "use no memo".

И самое печальное, что реакт своим компилятором не решает проблему ререндеров - пропы при изменении всё равно вызывают ререндер всего поддерева компонентов. И вместо решения проблемы как точечно обновлять DOM, как это делает, к примеру vue/angular/preact/svelte/lit/да_кто_угодно_кроме_реакта благодаря наличию реактивности, мы имеем монстоузное решение, которое просто позволяет разрабам не писать useMemo(sic!). А вот useEvent, который делает часть пропов стабильными, мы, конечно, вводить не будем(https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md).

Кстати, не удивлюсь, если в будущем мы будем иметь библиотеки, которые не будут попросту работать без RC. Люди же любят делать решения без сборки, ага.

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

Ещё одна весёлая(нет) причина почему RC - чуток совсем подход невтуда.

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

https://news.1rj.ru/str/monada_kedavra/193

Очередная подборка интересных вещей, которые мне попались на прошлой неделе:

- https://v8.dev/features/iterator-helpers
У нас в рантайме наконец-то появятся операции над итераторами, что позволит перестать оборачивать все итераторы в Array.from или в [...iteratior]

- https://x.com/karlhorky/status/1792500811307622631?s=52&t=ohIjgaVZLt6vr9X0nBz1jg
Не так давно вышел ESLint@9, в котором выпилили кучу устаревших апи и сделали flat config решением по-умолчанию. Это вызвало кучу боли, так как экосистема оказалась неподготовленной к релизу. Но у flat config есть куча преимуществ, поэтому советую не откладывать миграцию. Тред выше показывает возможные проблемы при миграции и способы обхода этих проблем. Важное напоминание. Flat config поддерживается в восьмой версии еслинта, поэтому для миграции вам не нужно выпиливать устаревшие апи в вашем коде. Посто обновитесь до последнего минора v8.xx

- https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API
Новый потенциальный удобный способ работать с урлами. Пока не в стандарте.