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

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

👉 Дайджест мобильной разработки @mobile_dvlp
Download Telegram
TanStack Charts: типизированная библиотека для графиков на SVG и Canvas

TanStack Charts — это типизированная библиотека для построения графиков на SVG и Canvas, которая помогает собирать диаграммы из mark, scales, transforms и interactions без лишнего веса в бандле.

В React-версии базовый line chart занимает 32,1 kB gzip, а Canvas можно подключать точечно для тяжёлых сцен, сохраняя оси, tooltip, фокус и responsive-логику на одной схеме данных.

https://tanstack.com/charts/latest
👍3❤2
Почему LLM хуже замечают информацию в середине промпта

LLM могут иметь слепую зону для информации, которая находится в середине длинного промпта, даже если она явно есть во входных данных. На практике это значит, что при длинных документах, истории чата или результатах из tool calls модель чаще цепляется за начало и конец, а важная деталь в середине может быть проигнорирована.

https://blog.bytebytego.com/p/the-llm-blindspot-why-models-forget
👍4🤔2
REST API для задач на Node.js и Express

Разбор того, как собрать backend для менеджера задач на Node.js и Express: регистрация и логин, JWT-авторизация, CRUD для задач, валидация входных данных и проверка эндпоинтов через Postman или Thunder Client.

https://dev.to/saiprasanna/building-a-task-management-rest-api-with-nodejs-and-expressjs-61a
❤2👍2
Границы в софте: навык, который сильнее влияет на архитектуру, чем кажется

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

Это напрямую влияет на поддержку кода: удачные границы упрощают изменения, уменьшают связанность и делают зависимости предсказуемыми. Практический навык здесь — замечать, какие обязанности стоит группировать, и не пускать лишние зависимости внутрь ядра системы.

https://blog.bytebytego.com/p/how-software-boundaries-are-the-most
❤3👍2
Профилирование CPU и памяти в Workers и Durable Objects по запросу

Cloudflare добавила профилирование CPU и памяти для Workers и Durable Objects прямо в продакшене. Это даёт flamegraph, где видно, какая функция съедает время или память, и помогает быстрее находить утечки, лишние вычисления и причины OOM. Профиль можно снять из Dashboard или через CLI, а затем скачать файл и разобрать его дальше. Для TypeScript важно включить source maps, иначе имена функций в профиле будут плохо читаемыми.

https://blog.cloudflare.com/workers-on-demand-profiling/
❤3🥱1
Как Cloudflare Radar упростили для широкой аудитории

Cloudflare Radar получил редизайн, чтобы данные о глобальном трафике и сбоях в интернете было проще читать не только инженерам, но и журналистам, исследователям и обычным пользователям. В новой версии сделали акцент на map как на понятной точке входа и перевели блоки с данными в более структурированный tabbed-поток, чтобы не перегружать страницу и сохранить глубину информации.

Для веб-разработчика здесь важен сам подход: сложный data product можно сделать заметно понятнее, если выстроить иерархию, опереться на знакомые паттерны и привести интерфейс к общей дизайн-системе. Это хороший пример того, как редизайн влияет не только на внешний вид, но и на доверие, навигацию и то, насколько охотно пользователи будут возвращаться к продукту.

https://blog.cloudflare.com/radar-redesign/
❤3👍2
TanStack Charts: типизированная библиотека для графиков в React

TanStack Charts даёт грамматику для графиков на SVG и Canvas, где можно собирать marks, scales, transforms, interactions и анимации из компактных примитивов или через совместимые с D3 входы. Это полезно, когда нужен не просто готовый chart component, а гибкая основа, которую не придётся менять при росте продукта.

У библиотеки стабильный API в версии 1.0, строгая типизация и tree-shaking, а базовый React line chart весит 32.1 kB gzip. Canvas можно подключать точечно для тяжёлых графиков, при этом оси, тултипы, hydration, responsive layout и экспорт продолжают работать через одну и ту же схему описания.

https://tanstack.com/charts/latest
👍3
CSS Anchor Positioning: как привязывать элементы к другим элементам

CSS Anchor Positioning позволяет позиционировать один absolute-элемент относительно другого элемента-якоря, даже если они находятся в разных ветках DOM. Это полезно для попапов, подсказок, меню и любых интерфейсных связок, где нужно держать элемент рядом с триггером без ручных пересчётов координат.

Вместо привязки к контейнеру используются anchor-name, position-anchor, position-area и anchor(): ими можно выбрать якорь, задать сторону и точно совместить границы элементов. В Chrome это уже работает с мая 2024 года, а на практике даёт более надёжную и гибкую альтернативу ручному position: absolute для связанных UI-элементов.

https://habr.com/ru/articles/1092540/
🔥3
Beta: Oxynote — документация API в стиле Stripe

Oxynote — это подход к API-документации в стиле Stripe, который помогает быстро собрать понятные и аккуратные справочные страницы для продукта. Он полезен, когда нужно не просто перечислить эндпоинты, а показать разработчику, как с ними работать без лишней возни.

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

https://github.com/oxynote/oxynote
🔥2
Как строить масштабируемые AI-автоматизации в n8n

n8n помогает собирать не только простые связки сервисов, а рабочие автоматизации для продакшена с вебхуками, self-hosted-развёртыванием, обработкой REST API и кастомным JavaScript для очистки и преобразования данных.

Плюс в том, что на его базе можно строить AI-пайплайны: извлекать структуру из документов, подключать LLM, делать агентов с памятью, собирать цепочки из нескольких агентов и добавлять ручные approvals, ретраи и мониторинг, чтобы это не ломалось на реальных нагрузках.

https://www.freecodecamp.org/news/create-scalable-ai-automations-with-n8n/
Size Limit: контроль размера и скорости JS-бандла в CI

Инструмент Size Limit измеряет не только размер JS, но и реальную стоимость его загрузки и выполнения в браузере. Его удобно подключать в GitHub Actions или другой CI, чтобы пул-реквесты не протаскивали тяжёлые зависимости и не ухудшали производительность.

https://github.com/ai/size-limit?ref=console.dev
❤1🔥1