Periodic Face-to-Face

Статья в блоге Мартина Фаулера про важность личных встреч в эпоху распределенной команды. Модель распределенной команды получила огромный рост популярности с приходом ковида (собственно, выбора то и не было). По началу это было в новинку, но сейчас это уже привычный паттерн. Появилось много инструментов для работы в распределенной команде. Однако, не смотря на всё это развитие, нам все еще необходимо личное общение

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

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

В общем, remote-first - это не серебряная пуля. В зависимости от того, какие коммуникации вам необходимы для решения задач, вам может требоваться разная частота офлайн-встреч с коллегами. Если вы работаете совсем обособленно (например, пишете plsql запросы по ТЗ), то вам должно быть комфортно на удаленке. Если вы - часть команды разработки и постоянно друг с другом коммуницируете, то необходимо иногда встречаться.

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

https://martinfowler.com/bliki/PeriodicFaceToFace.html

#managment #remoteWork #martinFowler

Дайджест за 2024-02-26 - 2024-03-01

WebContainers
StackBlitz разрабатывает технологию web containers. Если очень утрировано - технология позволяет запускать nodejs приложение прямо в браузере. Это, в частности, полезно для stackblitz т.к. бизнес построен вокруг предоставления окружения или песочницы для разработки приложений в браузере. Это удобно, но для запуска nodejs приложений требует запуска и обслуживания виртуалок. WebContainers решают проблему stackblitz, переводя запуск кода в браузер.

Если вам интересно поиграться с веб контейнерами - проходите по ссылке, там хорошая документация по работе с веб контейнерами

Finishing Turborepo's migration from Go to Rust
Turborepo завершили свое 15-месячное переписывание кода 70 тысяч строк кода с Go на Rust. Сама миграция на Rust проходила так, чтобы не влиять на пользователей. В целом, это весьма непростая задача и поэтому статья интересна

Storybook 8 Beta
Команда Storybook подогревает интерес к следующему релизу.

New client-side hooks coming to React 19
Статья рассказывает про новые API, которые, предположительно, будут в react 19. Пока они доступны в канареечном релизе React


Periodic Face-to-Face
Статья в блоге Мартина Фаулера про важность личных встреч в эпоху распределенной команды. Модель распределенной команды получила огромный рост популярности с приходом ковида (собственно, выбора то и не было). По началу это было в новинку, но сейчас это уже привычный паттерн. Появилось много инструментов для работы в распределенной команде. Однако, не смотря на всё это развитие, нам все еще необходимо личное общение

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

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

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

Does your team need a meeting reset?

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

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

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

https://qz.com/why-your-team-should-try-a-meeting-reset-1849949241

#managment #remoteWork #mettings

Reporting Core Web Vitals With The Performance API

Крутая статья про возможности Performance API в браузере. Автор подробно объясняет, как с современным API можно снимать метрики производительности страницы и как с ними работать. Я раньше думал, что есть перформанс метки и это, в общем-то, все API. Но в статье показываются крутые примеры как использовать PerformanceObserver, который позволяет узнать не только цифры конкретных метрик WebVitals, но и почему они такие.

Например, есть метрика Largest Contentful Paint. Можно не только узнать, какая у нас метрика LCP, но и вывести элемент, на основе которого считается метрика. Ниже пример кода из статьи.

const lcpObserver = new PerformanceObserver(list => {

  const entries = list.getEntries();
  const lcp = entries[entries.length - 1];

  entries.forEach(entry => {
    // Log the results in the console
    console.log(
      `The LCP is:`,
      lcp.element,
      `The time to render was ${entry.startTime} milliseconds.`,
    );
  });
});

// Call the Observer
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

// The LCP is:
// <h2 class="author-post__title mt-5 text-5xl">…</h2>
// The time to  render was 832.6999999880791 milliseconds.

Кроме этого разобрано как:
- Кто вызвал Cumulative Shift Layout и какой shift произошел
- Подсчет времени от взаимодействия со страницей до обновления UI
- Репортинг долгих фреймов анимации

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

Статья заканчивается на достаточно важной мысли - надо не только уметь замерять производительность, но и мониторить её. Поэтому автор также рассказывает 1 из вариантов мониторинга производительности на основе метрик от пользователей.


https://www.smashingmagazine.com/2024/02/reporting-core-web-vitals-performance-api/

#development #javascript #performance #recommended

Справочник React

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

Если вам понравился такой справочник, то у автора есть еще по популярным темам: HTML+CSS, Typescript, Angular, Solid, React Native, PWA, Node.js, Python3, XSLT, Базы данных.

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

https://reactdev.ru

#development #javascript #react #documentation #recommended

Introducing AI SDK 3.0 with Generative UI support

Недавно Vercel запускали генератор React-компонентов с помощью LLM-моделей по запросу. Теперь же они показывают SDK, которая позволяет интегрироваться с LLM-моделями и показывать пользователю ответ в виде React-компонента.

У обычных чатов с LLM (например, у того же chatGPT), общение происходит в чате обычным текстом, что не всегда удобно. Vercel AI SDK позволяет дать более богатый пользовательский опыт, отображая не просто текст, а React-компоненты.

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

С технической точки зрения, SDK реализовано для серверных React-компонентов.

https://vercel.com/blog/ai-sdk-3-generative-ui

#development #javascript #vercel #ai #react

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

Does your team need a meeting reset?
С приходом ковид многие компании перешли на удаленный формат работы. Из-за этого сильно повысилось количество встреч в календаре. В некоторых командах встреч стало так много, что уже некогда работать. Поэтому некоторые компании начали движение в обратную сторону. Например, есть инициатива no meetings day - нужно выбрать день, когда ни у кого не должно быть созвонов. В данной статье рассматривается практика reseting meetings.

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

⭐Reporting Core Web Vitals With The Performance API
Крутая статья про возможности Performance API в браузере. Автор подробно объясняет, как с современным API можно снимать метрики производительности страницы и как с ними работать. Я раньше думал, что есть перформанс метки и это, в общем-то, все API. Но в статье показываются крутые примеры как использовать PerformanceObserver, который позволяет узнать не только цифры конкретных метрик WebVitals, но и почему они такие.

Например, есть метрика Largest Contentful Paint. Можно не только узнать, какая у нас метрика LCP, но и вывести элемент, на основе которого считается метрика. Ниже пример кода из статьи.

⭐Справочник React
Большой справочник по React на русском языке. Описано много разного, начиная от перевода официальной документации React и заканчивая интеграциями с менеджерами состояния. В справочнике хорошие статьи и примеры кода, приятно читать.

Если вам понравился такой справочник, то у автора есть еще по популярным темам: HTML+CSS, Typescript, Angular, Solid, React Native, PWA, Node.js, Python3, XSLT, Базы данных.

Introducing AI SDK 3.0 with Generative UI support
Недавно Vercel запускали генератор React-компонентов с помощью LLM-моделей по запросу. Теперь же они показывают SDK, которая позволяет интегрироваться с LLM-моделями и показывать пользователю ответ в виде React-компонента.

У обычных чатов с LLM (например, у того же chatGPT), общение происходит в чате обычным текстом, что не всегда удобно. Vercel AI SDK позволяет дать более богатый пользовательский опыт, отображая не просто текст, а React-компоненты.

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

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

Why React Server Components Are Breaking Builds to Win Tomorrow

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

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

https://www.builder.io/blog/why-react-server-components

#development #javascript #react #reactServerComponents #recommended

Introducing JSR - the JavaScript Registry

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

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

Что же предлагает JSR. Я могу выделить 2 основных поинта

ES-модули вместо поддержки разных стандартов - сейчас, при публикации в npm, приходится думать над тем, в какой модульной системе публиковать пакет, или же поддерживать несколько систем сразу. Прогресс неумолимо наступает и ES-модули становятся все популярнее, но безопаснее поставлять одновременно точки входа для commonjs и es-модулей

DX как для автора, так и для пользователя - концепцию JSR можно описать так: "пусть разработчик пишет код как ему удобно, а JSR сделает так, чтобы пакет было удобно использовать". Что это значит? В JSR есть фичи для DX. Например, автор пакета просто пишет код на TypeScript, публикует его, а JSR сам его затранспайлит и поставит его готовым к интеграции в Node.js, Deno, Bun. Другая прикольная фича, это автодокументация. JSR сам собирает доку по интерфейсу, который предоставляет либа. Для этого достаточно хорошо описать типы и JSDoc к интерфейсам. Нельзя также не упомянуть, что все пакеты проверяются автоматикой и они получают оценку качества. Выглядит это почти 1 в 1 как отчет lighthouse: у вас 82 балла из 100 и список пройденных проверок и проблем.

Честно сказать, выглядит круто. Сообществу, ИМХО, не хватает хорошего тулинга для публикации пакетов. В статье более подробно описано, как начать пользоваться JSR и какие еще фишки там есть.

https://deno.com/blog/jsr_open_beta

#development #javascript #deno #registry #jsr

Introducing runes

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

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

Ниже приведу примеры кода, как делать реактивные переменные сейчас, и как их делать в рунах

Пример реактивных переменных в svelte без рун

<script>
// объявляем пропсы
export let width
export let height 

// расчитываем реактивный computed
$:  area width * height

// объявляем переменную. Svelte сам сделает её реактивной
let count = 0
// handler клика на 
function increment(){
  count++
}
</script>
<button on:click={counter.increment}> {count} </button>
<div> {area} </div>

Пример реактивных переменных в svelte с рунами

<script>
// объявляем пропсы
let { width, height } = $props();

// расчитываем реактивный computed
const area = $derived(width * height);

// объявляем переменную
let count = $state(0);
// handler клика на 
function increment(){
  count++
}
</script>
<button on:click={counter.increment}> {count} </button>
<div> {area} </div>

В целом, API стало более явным, но осталось удобным.

https://svelte.dev/blog/runes

#development #javascript #svelte

Puter: Internet OS and Desktop Environment in the Browser!

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

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

Зачем и кому это нужно? В целом, юзкейс конечно нишевый, но, допустим, такие штуки могут быть полезны, чтобы собирать какие-то свои устройства и предоставлять пользователям привычный интерфейс. Купить какую-то дешевую железку, которая умеет запускать линукс и в нем браузер, подключить к ней мышку и клаву и залочить окно на Puter - и вот у вас управляемая удобная песочница с нужными вам приложениями, из которой сложно выйти. При этом, как я понял, можно описывать свои приложения для Puter на html+js+css, что позволяет делать что-то типа своих сетапов Puter.

https://github.com/HeyPuter/puter

#development #javascript #library

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