Дайджест за 2025-08-25 - 2025-08-29

GitHub’s internal playbook for building an AI-powered workforce
Статья от Github про сложности внедрения AI в работу. Основная проблема - не купить инструменты, а внедрить их использование в рабочий процесс.

В статье описывается модель, по которой Github масштабирует применение AI.

Part 1: Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity
Недавно во многих каналах и форумах разошлись результаты исследования влияния использования на производительность разработчиков. Результаты следующие: ожидали ускорение на 20%, а по факту замедлились на 19%. Давайте погрузимся в исследование и поймем его ограничения и выводы

Чем это исследование примечательно (ну кроме неожиданного результата) - оно проводится на реальных эадачах и замеряется время выполнения задач. Другие исследования обычно замеряют скорость написания строчек кода или открытия пул реквестов, или измеряют производительность на синтетических задачах (напишите свой веб сервер который отдает hello world)

Part 2: Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity
Как я говорил в предыдущем посте, исследователи выделили 21 фактор, который виляет или может влиять на производительность разработчиков. Давайте их разберем.

Я не буду рассматривать факторы as is как в исследовании, я их переструктурирую в более широкие факторы

Part 3: Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity
Завершающий пост про исследование.

Давайте коротко вспомним, что было в предыдущих постах:

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

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

Mediabunny - Complete media toolkit

Mediabunny - тулкит для работы с медиа прямо в браузере. Склеивание, перекодирование, комбинирование и тд и тп. В общем, ffmpeg но только в браузере и в виде библиотеки для JS.

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


https://mediabunny.dev/

#development #javascript #media #library

Why do browsers throttle JavaScript timers?


Хорошая статья, рассказывающая про особенности работы setTimeout. Вы знали, что setTimeout(0) вызовется не сразу, а через 4мс? А все потому что, когда-то разработчики слишком активно использовали setTimeout(0) где надо и где не надо, а разработчики браузеров решили защитить пользователей и сделали минимальный лимит в 4мс.

Описал достаточно утрировано, но тем не менее - можете рассчитывать на 4мс вместо 0мс задержки в современных браузерах.

Зачем браузеры делают такое? Они оптимизируют использование батарейки и сети на устройствах пользователей. Иногда браузеры делают это более агрессивно. Например, safari задерживает выполнение колбека на 26 секунд, а для неактивных вкладок хром задерживает выполнение колбека на одну секунду

Что же делать, если вы хотите выполнить колбек после выполнения всех микротасок? Автор задался тем же вопросом т.к. делает JS-имплементацию indexeddb и ему нужно комитить транзакции.

Автор провел простые бенчмарки и сделал следующие выводы:
- scheduler.postTask имеет минимальную задержку (0.00-0.01 мс), но не реализован в safari
- window.postMessage имеет задержку чуть больше (0.01-0.03мс), но поддерживается в safari
- MessageChannel.postMessage имеет задержку еще чуть больше (0.02-0.05мс), но в safari значительно больше (0.52мс)

Когда нибудь и текущие API могут замедлить (когда разработчики станут ими слишком активно злоупотреблять), но пока так.


https://nolanlawson.com/2025/08/31/why-do-browsers-throttle-javascript-timers/

#development #javascript #timers #setTimeout

Fresh 2.0 Graduates to Beta, Adds Vite Support

Fresh - веб-фреймворк в deno - зарелизился в бетке 2.0.

Главные изменения:
- Интеграция с Vite
- HMR в islands-компонентах
- Ускорение инициализации приложения в браузере в 10 раз
- Вернули компонент Head. Убирали, потому что была кривая реализация, ухудшающая перформанс. Теперь хорошая реализация

https://deno.com/blog/fresh-and-vite

#development #javascript #deno #vite

You no longer need JavaScript

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

Какие приколы рассмотрены в статье:
- Вложенные css-селекторы (пример & > .buttons)
- Колор пикер на чистом css
- transitioning + @starting-style
- nesting + :has для выбора темы сайта
- radio-group и radio tabs
- Акордеон
- Валидация инпутов с использованием regexp-шаблона и :has
- Использование lvh, svh, dvh вместо vh
- Получение высоты экранной клавиатуры (актуально для мобильных девайсах) в css (пока только для хрома)

Горячо рекомедую статью и демки к просмотру.

https://lyra.horse/blog/2025/08/you-dont-need-js/

#development #javascript #css

Deriving Client State from Server State

Частый паттерн - использовать useEffect для синхронизации состояния двух стейтов. В рамках статьи обсуждается синхронизация стейта react-query и zustand. Вместо использования useEffect предлагается высчитывать состояние, вместо его синка

Пример проблемы:

const useSelectedUser = () => {
  const { data: users } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  })
  const { selectedUserId, setSelectedUserId } = useUserStore()

  // If the selected user gets deleted from the server,
  // Zustand won't automatically clear selectedUserId
  // You have to manually handle this:
  useEffect(() => {
    if (!users?.some((u) => u.id === selectedUserId)) {
      setSelectedUserId(null) // Manual sync required
    }
  }, [users, selectedUserId])

  return [selectedUserId, selectedUserId]
}

Пример предлагаемого решения

const useSelectedUser = () => {
  const { data: users } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  })
  const { selectedUserId, setSelectedUserId } = useUserStore()

  const selectedId = users?.some((u) => u.id === selectedUserId)
    ? selectedUserId
    : null

  return [selectedId, setSelectedUserId]
}

Соглашусь с автором. Если вы можете не использовать 2 стейта, которые надо синхронизировать - не надо их использовать т.к. синхронизация стейтов это а) кривое решение б) хрупкое решение. У меня до сих пор есть въетнамские флешбеки от синхронизации rxjs-like стейта (какой-то самописный стор на обсерваблах) с redux-like стором.

https://tkdodo.eu/blog/deriving-client-state-from-server-state

#development #javascript #react #reactQuery #zustand

Дайджест за 2025-09-08 - 2025-09-12

Mediabunny - Complete media toolkit
Mediabunny - тулкит для работы с медиа прямо в браузере. Склеивание, перекодирование, комбинирование и тд и тп. В общем, ffmpeg но только в браузере и в виде библиотеки для JS.

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

Why do browsers throttle JavaScript timers?

Хорошая статья, рассказывающая про особенности работы setTimeout. Вы знали, что setTimeout(0) вызовется не сразу, а через 4мс? А все потому что, когда-то разработчики слишком активно использовали setTimeout(0) где надо и где не надо, а разработчики браузеров решили защитить пользователей и сделали минимальный лимит в 4мс.


Fresh 2.0 Graduates to Beta, Adds Vite Support
Fresh - веб-фреймворк в deno - зарелизился в бетке 2.0.


You no longer need JavaScript
Очередная статья про то, что слишком много Javascript грузится на сайтах, а ведь можно делать интерфейсы без Javascript. Отличие этой статьи от многих таких же - очень крутые примеры и демки того, что позволяют сделать современные веб-стандарты без использования JS.


Deriving Client State from Server State
Частый паттерн - использовать useEffect для синхронизации состояния двух стейтов. В рамках статьи обсуждается синхронизация стейта react-query и zustand. Вместо использования useEffect предлагается высчитывать состояние, вместо его синка


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

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

Introducing Next-Generation Flamegraph Visualization for Node.js

Название статьи говорит само за себя - представлен инструментарий для профилирования nodejs приложений. Фишки, в общем-то, две: а) крутая визуализация б) профилирование замедляет fastify всего на 5%

Рекомендую открыть статью и посмотреть демки и скриншотики. Решение очень хорошее и удобное:
- Можно использовать без конфига
- Задизайнено для удобной интеграции в приложения и тулы автоматизации
- Можно стартовать и стопать профилирование с помощью SIGUSR2 сигналов (отдельный лайк)
- Програмное АПИ
- Кросс-платформенное cli
- Стандартный формат вывода результата профилирования

В статье приводится несколько примеров использования (типичный сценарий: запустить сервер, сделать запросы, остановить профилирование) и различные бенчмарки

https://blog.platformatic.dev/introducing-next-gen-flamegraphs-for-nodejs

#development #javascript #nodejs #performance #flamegraph #profiling

MCP-UI - Interactive UI Components for MCP

Если вы более менее активно используете AI, то вы наверняка знаете, что такое MCP. Это протокол для интеграции инструментария в ИИ-агенты. MCP-UI предлагает решение для mcp с интерактивным UI. Т.е. у вас в чате не просто "был вызван тул такой-то", а показывается полноценный UI, который наглядно показывает результат, позволяет с ним повзаимодействовать и доуточнить (что приведет еще к одному вызову тула)

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

https://mcpui.dev/

#development #javascript #mcp #ai

Дайджест за 2025-09-15 - 2025-09-16

Introducing Next-Generation Flamegraph Visualization for Node.js
Название статьи говорит само за себя - представлен инструментарий для профилирования nodejs приложений. Фишки, в общем-то, две: а) крутая визуализация б) профилирование замедляет fastify всего на 5%

MCP-UI - Interactive UI Components for MCP
Если вы более менее активно используете AI, то вы наверняка знаете, что такое MCP. Это протокол для интеграции инструментария в ИИ-агенты. MCP-UI предлагает решение для mcp с интерактивным UI. Т.е. у вас в чате не просто "был вызван тул такой-то", а показывается полноценный UI, который наглядно показывает результат, позволяет с ним повзаимодействовать и доуточнить (что приведет еще к одному вызову тула)


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

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

React Won by Default – And It's Killing Frontend Innovation

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

Автор рассматривает, какие альтернативы есть у React и в чем они лучше React:
1. в SolidJS реактивность сделана лучше чем в React. Бенчмарки говорят о 2-3х кратном различии в производительности
2. Svelte ближе к идеям web'а и имеет мощный компилятор, который позволяет делать аналогичные решения, которые весят в десятки раз меньше
3. Qwik со своей моделью постепенной интерактивности позволяет загружать пользователям минимальный объем кода и максимально быстро отдавать интерактивные сайты

Тем не менее, ни одна из альтернатив не может стать достаточно популярной из-за использования React как стандарта.

React, тем временем, не приносит ничего нового и замыкает веб-разработку на себе: чтобы делать приложения на React, необходимо знать особые паттерны, которые применимы только в React. React, к тому же, не прост. Жизнь react-разработчика это история про борьбу с react'ом: с хуками, с серверным рендером, с strict-режимом

Автор призывает всех использовать объективные подходы к выбору инструментов и выбирать наиболее подходящий инструмент для задачи, нежели выбирать только React. Но, честно сказать, даже не представляю что может заставить крупные компании переходить на другой стек: React-разработчиков можно буквально нанимать вагонами и они будут способы поддержать react-приложение, которое было написано почти 10 лет назад.


https://www.lorenstew.art/blog/react-won-by-default

#development #javascript #react #svelte #qwik #solidjs

The expert Guide to Next.js Performance Optimization

Электронная книга от blazity про оптимизацию производительности в next.js приложениях. Книга бесплатная, чтобы получить - достаточно указать свою почту. Книжка не только про Next.js (хотя, конечно, большая часть связана с Next.js), рассказывается также и про шрифты, web vitals, инструменты измерения производительности, загрузку изображений и 3rd-party скрипты

В общем, неплохой сборник решений для оптимизации производительности в одном pdt-файле

https://blazity.com/the-expert-guide-to-nextjs-performance-optimization

#development #javascript #nextjs #book #performance

Wasm 3.0 Completed

Вышел wasm 3.0! Основные фичи направлены на то, чтобы открыть возможность компилироваться в wasm различным языкам программирования. В частности, одна из фичей - встроенный сборщик мусора, который необходим языкам со сборщиком мусора. Это открывает возможность компиляции в Wasm для java-языков, Dart, Go

https://webassembly.org/news/2025-09-17-wasm-3.0/

#development #javascript #wasm

Updated and Ongoing Supply Chain Attack Targets CrowdStrike npm Packages

Снова крупный инцидент безопасности в npm-экосистеме. На этот раз злоумышленники получили доступ к публикации популярных пакетов и встроили туда червя, который заражает соседние пакеты и встраивает код, который крадет креды и крипту.

Атаке подверглись более 500 пакетов, в том числе крупные пакеты с десятками миллионов скачиваний в неделю

https://socket.dev/blog/ongoing-supply-chain-attack-targets-crowdstrike-npm-packages

#development #javascript #npm #security

Fetch streams are great, but not for measuring upload and download progress

Хорошая заметка от Джейка Арчибальда про потоковую загрузку данных в JS. Если коротко: потоковая загрузка поддерживается через fetch, но вы не сможете корректно посчитать прогресс. А если будете делать запрос через XHR - сможете!

Честно говоря, удивительно, что fetch уже давно стандартизирован, но до сих пор в некоторых банальных моментах XHR все еще впереди.

Итак, как же все таки выполнить потоковую загрузку. В целом, все просто и не меняется давно: получаем Reader, и читаем из него куски данных

const response = await fetch(url);
const reader = response.body.getReader();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(value);
}

console.log('Done!');

Можно даже использовать итераторы (но не в сафари)

const response = await fetch(url);

for await (const chunk of response.body) {
  console.log(chunk);
}

console.log('Done!');

Но, однако, вы не сможете корректно посчитать прогресс скачивания т.к. content-length, отдавемый сервером и длина контента, которую вы получаете в JS может отличаться из-за сжатия (по сети отправляются сжатые данные, а в JS вы получаете уже сырые данные)

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

// Get a video from disk, or from the camera
const videoStream = getVideoStreamSomehow();
// Process it in some way, e.g. editing or transcoding
const processedVideo = videoStream.pipeThrough(new SomeVideoProcessor());

// Upload the stream
await fetch(url, {
  method: 'POST',
  body: processedVideo,
  duplex: 'half',
  headers: {
    'Content-Type': 'video/mp4',
  },
});

Но корректно замерять прогресс загрузки также не получится.

Единственный способ измерять прогресс сегодня - использовать XHR

const xhr = new XMLHttpRequest();

// Upload progress
xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    console.log(
      `Uploaded ${((event.loaded / event.total) * 100).toFixed(2)}%`,
    );
  }
};

// Download progress
xhr.onprogress = (event) => {
  if (event.lengthComputable) {
    console.log(
      `Downloaded ${((event.loaded / event.total) * 100).toFixed(2)}%`,
    );
  }
};

xhr.open('POST', url);
xhr.send(blobOrWhatever);

Но, уже ведутся обсуждения по добавлению такой возможности и в fetch

https://jakearchibald.com/2025/fetch-streams-not-for-progress/

#development #javascript #fetch #jakeArchibald #stream

Дайджест за 2025-09-22 - 2025-09-26

React Won by Default – And It's Killing Frontend Innovation
Статья о том, как выбор React дефолтным инструментом для проектов убивает фронтенд. Можно по-разному относится к тому факту, что React сегодня является стандартным инструментом для создания веб-приложений - это одновременно и благо и проклятье.


The expert Guide to Next.js Performance Optimization
Электронная книга от blazity про оптимизацию производительности в next.js приложениях. Книга бесплатная, чтобы получить - достаточно указать свою почту. Книжка не только про Next.js (хотя, конечно, большая часть связана с Next.js), рассказывается также и про шрифты, web vitals, инструменты измерения производительности, загрузку изображений и 3rd-party скрипты

Wasm 3.0 Completed
Вышел wasm 3.0! Основные фичи направлены на то, чтобы открыть возможность компилироваться в wasm различным языкам программирования. В частности, одна из фичей - встроенный сборщик мусора, который необходим языкам со сборщиком мусора. Это открывает возможность компиляции в Wasm для java-языков, Dart, Go


Updated and Ongoing Supply Chain Attack Targets CrowdStrike npm Packages
Снова крупный инцидент безопасности в npm-экосистеме. На этот раз злоумышленники получили доступ к публикации популярных пакетов и встроили туда червя, который заражает соседние пакеты и встраивает код, который крадет креды и крипту.

Fetch streams are great, but not for measuring upload and download progress
Хорошая заметка от Джейка Арчибальда про потоковую загрузку данных в JS. Если коротко: потоковая загрузка поддерживается через fetch, но вы не сможете корректно посчитать прогресс. А если будете делать запрос через XHR - сможете!

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

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

State of QUIC in Node.js

HTTP/3, он же QUIC, придуманный чтобы заменить HTTP2 и ускорить веб с октября станет доступен в nodejs. В первый раз о поддержке QUIC в nodejs заговорили еще 6 лет назад, но только недавно openssl (поверх которого, видимо, nodejs обрабатывает http2) сделали поддержку quic

Штош, ждем новостей как кто-то переехал и ускорил свой трафик.

В статье коротко рассказывается про основные фишки QUIC и про то, почему так сложно сделать поддержку QUIC в nodejs

https://nodevibe.substack.com/p/state-of-quic-in-nodejs

#development #javascript #nodejs #quic

Using the node 18+ native test runner with TypeScript and React

Короткая заметка про то, что в текущей nodejs можно запускать юнит-тесты для React-компонентов, написанных на typescript, чисто на встроенном в nodejs тест-раннере. С помощью доп флагов nodejs поддерживает typescript (через вырезание типов) и транспиляцию jsx.

Ставим пакеты

pnpm add --save-dev @testing-library/react global-jsdom jsdom tsx

Пишем тесты

import React from "react";
import { describe, test } from "node:test";
import { strict as assert } from "node:assert";
import { render, fireEvent, screen, cleanup } from "@testing-library/react";
import { Toggle } from "./Toggle";

beforeEach(() => {
  cleanup(); // cleans the dom state between each test
});

describe("Toggle", () => {
  test("calls onToggleClick when clicked", () => {
    let callCount = 0;
    const { getByText } = render(
      <Toggle 
        options={["On", "Off"]}
        selected="On"
        onToggleClick={() => callCount++}
      />
    );
    
    fireEvent.click(getByText("On"));
    assert.equal(callCount, 1);
  });
});

Запускаем тесты

node --import global-jsdom/register --import tsx --experimental-transform-types --test src/components/Toggle.test.tsx

https://matthewbrown.io/2025/09/04/node-test-runner

#development #javascript #nodejs #typescript #jsx #testRunner #nodejsTestRunner

Behind The Scenes of Bun Install

Статья от Bun про то, как они оптимизировали установку npm-пакетов - в 7 раз быстрее npm, в 4 раза быстрее pnpm, в 17 раз быстрее чем yarn.

Статья хороша т.к. решение bun быстрое не на уровне алгоритмов, а на уровне правильного использования API операционки.

Одна из проблем - npm использует nodejs API для доступа к файловой системе. Это порождает 2 проблемы:
1. Эти операции проходят через очередь событий nodejs/libuv
2. Эти операции требуют перхода из user mode в kernel mode, т.е. операционка переключает контекст исполнения команды, что достаточно затратно (в статье приводится цена в 500 наносекунд для одного такого обращения для процессора с частотой 3ГГц)

Решение от bun - написали свое решение для доступа к файловой системе на zig и оптимизировали системные вызовы доступа к файлам. Там где yarn делает 4 миллиона системных вызовов, bun делает 165 тысяч.

Кроме самой установки пакетов bun также оптимизировал копирование закешированных пакетов в проект. Для разных ОС сделаны разные решения, гарантирующие быстрое копирование пакетов

Кроме этого, bun оптимизировали DNS-запросы. В npm запросы делают через nodejs API, что приводит к использованию очереди в libuv. Bun напрямую используют возможности ОС

Другая оптимизция - bun трансформирует package.json пакетов в бинарные данные, которые значительно ускоряют доступ к информации в package.json. Парсинг JSON достаточно хорошо оптимизирован современными инструментами, но он все равно медленее работы с бинарными данными.

Следующая оптимизация затрагивает скачку архивов. Обычно пакетные менеджеры скачивают архив с пакетом и на лету его извлекают. Т.к. итоговый объем распакованных файлов неизвестен, то пакетным менеджерам приходится алоцировать доп память, если извлеченные данные оказываются больше, чем ожидалось. Bun, вместо этого, скачивает полностью tarball, в конце tarball находится информация, показывающая сколько места занимают извлеченные данные, bun их считывает и аллоцирует необходимое пространство на диске.

Далее идет оптимизация, достаточно сложная - bun оптимизирует доступ к дереву зависимостей для CPU. Если хранить дерево как обычно, то CPU часто будет попадать мимо своих кешей и ходить в ОЗУ. Bun хранит дерево зависимостей в хитрых массивах, что оптимально для CPU-кеширования. Я, наверное, не справлюсь с правильным объяснением - лучше почитать самому.

https://bun.com/blog/behind-the-scenes-of-bun-install

#development #javascript #bun #npm #packageManagers

Deno 2.5: Permissions in the config file

Вышел Deno 2.5! Достаточно много разных изменений, главное из которых, имхо, возможность указывать наборы пермишнов (может ли приложение ходить в сеть или на файлуху) через конфиг.

Другие интересные изменения:
- Добавлены after и before хуки в Deno.test
- Добавлена возможность указывать заголовки в websocket
- Рантайм API для Deno.bundle
- Поддержка html как entrypoint для сборки
- Аудит-логи доступа к пермишнам (файлы, енвы, сеть)
- Возможность запуска setTimeout, setInterval, clearTimeout, clearInterval с интерфейсом nodejs (функции начнут возвращать nodejs-рефы на таймеры)
- --watch автоматически подтягивает изменения env-файла
- Дали возможность явно указать максимальное количество входящих TCP-соединений в очереди на обработку
- Улучшили перформанс разных API

https://deno.com/blog/v2.5

#development #javascript #deno #releaseNotes