Web Stack
4.07K subscribers
868 photos
5 videos
1.84K links
Дайджест web разработчика: статьи, туториалы, практики и полезные инструменты.

Админ: @jem_jem
Реклама: http://bit.ly/2wZeIPj

👉 Дайджест мобильной разработки @mobile_dvlp
Download Telegram
Nuxt 4.6: шаг к независимости от Nitro и новый CLI

Nuxt 4.6 делает фреймворк заметно гибче для fullstack Vue-приложений: серверный слой больше не привязан жестко к Nitro, а сборка сервера через чистый Vite теперь доступна как экспериментальный вариант. Это упрощает выбор стека под проект и снижает зависимость от конкретной серверной обвязки, а встроенные сессии, поддержка Vue Vapor и новый Nuxt CLI 4.0 добавляют удобства в повседневной разработке.

https://nuxt.com/blog/v4-6
❤4
npm staged publishing теперь умеет создавать новые пакеты

npm staged publishing теперь позволяет создавать новый npm package без ручного первого publish и подходит для автоматизированных workflows. Для этого можно использовать local session или granular access token, включая stage-only token; первая версия попадает в staged queue и становится доступной только после промоушена мейнтейнером.

https://github.blog/changelog/2026-10-02-npm-staged-publishing-now-supports-creating-new-packages/
👏3👍1
diffnav: просмотр git diff в терминале с деревом файлов

diffnav — терминальный pager для git diff с подсветкой синтаксиса и деревом файлов, как в интерфейсе GitHub. Он помогает быстрее ориентироваться в больших изменениях: видно, какие файлы затронуты, и можно сразу перейти к нужному месту в diff без лишнего скролла.

https://github.com/dlvhdr/diffnav
🔥4
AI-виджет поддержки, который сам заводит баги в GitHub

Показан рабочий способ собрать виджет поддержки для React и Next.js, который принимает баги, вопросы и идеи, сохраняет их в своей базе, а потом помогает вручную отправлять только подтвержденные баги в GitHub. Такой подход нужен, чтобы не терять обращения из разных каналов и не создавать публичные issue с лишними личными данными.

https://www.freecodecamp.org/news/build-an-ai-support-system-that-automatically-routes-bugs-to-github/
❤6
Сниппет для поиска N+1 в Laravel

Когда N+1 прячется в шаблоне или ресурсе, его легко не заметить на локальной базе. Этот сниппет считает повторяющиеся SQL-запросы за один HTTP-запрос и помогает поймать регрессии до того, как они попадут в прод.

use Illuminate\Database\Events\QueryExecuted;
use Illuminate\Support\Facades\DB;

public function boot(): void
{
if ($this->app->isProduction()) {
return;
}

$seen = [];

DB::listen(function (QueryExecuted $query) use (&$seen) {
$seen[$query->sql] = ($seen[$query->sql] ?? 0) + 1;
});
}


Учтите: запросы с разными значениями параметров здесь считаются одним и тем же SQL, а порог повторов нужно подбирать под ваш проект.

https://habr.com/ru/articles/1101198/
❤4🔥1
Biome 2.6 добавил форматирование Markdown, YAML и SCSS

Biome 2.6, Rust-рантайм для форматирования и линтинга, научился приводить к общему стилю Markdown, YAML и SCSS. Для JavaScript-проектов также открыли предварительный доступ к плагинам с собственными правилами линта.

Поддержка линтинга для этих форматов пока начальная, а плагины для JavaScript ещё в developer preview. Если вы хотите заменить связку Prettier и ESLint одним инструментом, сначала проверьте, хватает ли ему ваших правил и конфигов.

https://biomejs.dev/blog/biome-v2-6/
🔥3
CSS-Tricks собрал новые приёмы для CSS

Вышел свежий выпуск подборки CSS-Tricks с refraction-эффектами, scroll-state queries, @custom-media и другими новинками платформы. Внутри показывают, как собирать такие эффекты почти без JavaScript и где уже можно опираться на новые возможности браузеров.

Часть приёмов работает не везде, а для некоторых нужен Chrome или свежие реализации контейнерных и scroll queries. Если вы используете такие техники в интерфейсе, проверьте поддержку и держите запасной вариант для Firefox и старых браузеров.

https://css-tricks.com/whats-important-19/
🔥3
TanStack Redact уменьшил браузерный runtime React

TanStack Redact 0.2.0 вышел как более компактная замена React и React DOM в браузере. Он подменяет браузерную часть React, а ваш код, компоненты и хуки остаются без изменений.

С TanStack Start, Vite, Vinext и Next.js он уже работает стабильно. У Redact синхронный рендеринг, поэтому обходится без time slicing и прерываемых обновлений.

https://tanstack.com/blog/introducing-tanstack-redact
👍1
oxlint v1.89.0 усилил правила и исправил проверки

Вышел oxlint v1.89.0, линтер из проекта oxc, и в нём сразу поменяли набор рекомендованных правил для Vue 3, React, Next.js и TypeScript. Заодно исправили обработку lone surrogates в именах свойств и проверку строк, чтобы линтер не пропускал такие случаи и не ломал разбор.

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

https://github.com/oxc-project/oxc/releases/tag/oxlint_v1.89.0
TanStack AI 1.0 вышел в стабильную версию

TanStack AI 1.0 стал стабильным релизом фреймворк-агностичного AI toolkit для чатов, инструментов и работы с медиа. Он даёт единые API и 23 адаптера под разные провайдеры, а для долгих сессий добавили новый agent harness.

Agent harness пока остаётся экспериментальным, поэтому его интерфейсы могут измениться без предупреждения. Для обычных сценариев уже можно брать стабильные API, а с harness лучше заходить осторожно и проверять совместимость перед внедрением.

https://tanstack.com/blog/tanstack-ai-1-0
☃1👍1
Вышла Reicon с 2700 SVG-иконками

Reicon — открытая библиотека SVG-иконок для макетов и интерфейсов. В ней собрано более 2700 вручную отрисованных значков, которые можно брать в React, Vue, Svelte, Flutter и Figma.

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

https://reicon.dev/
PocketDeploy запускает сайт и PDS на Android

PocketDeploy поднимает на Android сайт, API и даже свой Bluesky PDS, чтобы старый телефон или эмулятор работали как маленький сервер. Встроенный runtime отдаёт HTML, CSS и JavaScript прямо с устройства, а данные и обработчики живут рядом с проектом.

Без root и без отдельного бэкенда на ПК у проекта есть жёсткие пределы по памяти, размеру базы и доступу наружу. Для сайта и PDS нужны разные шлюзы, а обновление не стирает данные только при аккуратном запуске и восстановлении.

https://habr.com/ru/articles/1100452/
Beta: wterm — терминал прямо в браузере

wterm — бета-терминал для веба, который рендерится в DOM и сразу получает нативное выделение, копирование, поиск и доступность. Он работает на сменяемом ядре: лёгком Zig/WASM или Ghostty для более точной эмуляции VT.

В DOM-рендеринге браузерные возможности остаются включёнными, а ссылки OSC 8 привязаны к своим ячейкам даже при прокрутке. Для работы с PTY нужен WebSocket-бэкенд, а при использовании source maps и React, Vue 3 или Svelte можно подключать готовые обвязки.

https://wterm.dev/
Почему опытные разработчики боятся agentic development

Опытные разработчики настороженно смотрят на agentic development не из любви к ручному коду, а потому что «собрано» не значит «готово для production». В одном эксперименте команда за неделю отдала весь код агентам и получила 80% готовности, но build часто оставался красным.

Сильный аргумент за подход: агенты ускоряют работу, а люди могут сосредоточиться на домене, границах, тестах и delivery pipeline. Сильный аргумент против: если проверки шумят и доверие к ним падает, то CI и DevOps теряют смысл, а ошибки в production становятся вероятнее.

А вы бы доверили агентам весь execution или оставили бы за собой контроль?

https://martinfowler.com/rachels-ramblings/good-devs-wary.html
Как изолировать превью для HTML от модели

Превью для HTML, сгенерированного моделью, нельзя безопасно рендерить через srcdoc без дополнительных ограничений. Такой iframe по умолчанию наследует origin страницы и может читать DOM, storage и cookies, а ещё отправлять запросы наружу.

Нужны пустой sandbox, отдельный origin и CSP с default-src 'none'. allow-scripts можно добавить только если превью действительно должно выполнять скрипты, а allow-same-origin вместе с ним лучше не включать.

https://blog.master.dev/building-an-isolated-preview-for-ai-generated-html/
😁2👍1
Node2Shell уже видит атаки на уязвимость Brotli в Node.js

ELLIO сообщает о реальном exploit-трафике для RCE в Brotli, который закрыли в релизах Node.js. Уязвимость живёт в библиотеке Google, поэтому патч нужен и там, где Brotli встроен в другой софт.

Встроенные копии Brotli в приложениях и зависимостях тоже требуют обновления, иначе закрытый в Node баг останется открытым. Проверьте, не тянет ли ваш стек собственную сборку Brotli, и обновите её вместе с Node.

https://ellio.tech/en/blog/node2shell-cve-2026-111497-rce-on-stock-nodejs-builds/
❤1👍1
Как AI-поиск меняет видимость сайтов

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

Модели смотрят на смысл, свежесть, факты и структуру страницы, а не только на ключевые слова. Если контент не подтверждается внешними источниками или перегружен повторениями, его чаще отбрасывают.

https://www.freecodecamp.org/news/ai-search-visibility/
Сниппет для Quill в Next.js без лишнего SSR

Когда один и тот же WYSIWYG-редактор нужен и для ввода, и для просмотра, важно не тащить его на сервер и не смешивать состояние заметки с состоянием самого Quill. В этом фрагменте редактор грузится только в браузере, а highlight.js подключается отдельно для подсветки кода.

"use client";

import dynamic from "next/dynamic";
import hljs from "highlight.js";

if (typeof window !== "undefined") {
window.hljs = hljs;
}

const ReactQuill = dynamic(
async () => (await import("react-quill-new")).default,
{ ssr: false }
);


Учтите: такой подход подходит только для client-side редактора; если вам нужен контент на сервере без гидрации, придется отдельно продумывать viewer и формат хранения HTML.

https://habr.com/ru/articles/1101222/
WordPress научился считать глубину дочитывания

Плагин AnGo Scroll Analytics для WordPress считает не среднюю прокрутку, а процентили глубины дочитывания. Так видно, где читатели отваливаются, и где до конца доходят только самые заинтересованные.

Трекер весит около 6 килобайт и шлёт данные через sendBeacon, а на сервере защищён от дублей через upsert с GREATEST(). Для точных цифр нужно учитывать отскоки, а также не ломать сборку на кэше, блокировщиках и залогиненных пользователях.

https://habr.com/ru/articles/1100670/
❤2
Foldkit строит фронтенд на Effect

Foldkit — TypeScript-фреймворк для фронтенда на Effect, где состояние и побочные эффекты вынесены в явную модель. Маршруты, серверный рендеринг и UI-компоненты тоже живут в одной схеме, поэтому поведение приложения проще отслеживать и тестировать.

Одна неизменяемая Model хранит всё состояние, а изменения проходят через один update. Для проекта нужна готовность работать по архитектуре Effect, иначе переход с React-стека будет слишком тяжёлым.

https://foldkit.dev/