Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

221,16
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Декларативное RPC вместо REST-ручек — победили сетевой бойлерплейт и вычистили код с помощью фреймворка Chord

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели9.2K

Во многих проектах взаимодействие фронта с бэком до сих пор строится по классике: ручки, fetch, headers, дублирование типов. При таком подходе внушительная часть кода уходит на обслуживание сети, а не на саму бизнес-логику. 

Мы решили эту проблему через Chord — фреймворк сетевого уровня на базе JSON-RPC. Используем его уже более 2 лет. 

Эта статья для фронтенд- и фулстек-разработчиков, работающих с TypeScript и мета-фреймворками вроде SvelteKit, Next или Nuxt. В ней покажу, как мы с помощью Chord вызываем серверные методы как обычные функции и получаем типы с бэка без дублирования. 

Читать далее

Frontend Status: свежий дайджест фронтенда и AI — 16.06.2026

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели7K

Привет!

Это 18 выпуск Frontend Status — дайджеста по фронтенд-разработке.

В этом выпуске:

📺 Экосистема TanStack кажется бесконечной, а browser gaming снова стал серьёзной платформой: Jack Herrington собирает 17 библиотек в одном приложении, а Software Engineering Daily с Эриком Дабилбором из Poki разбирает WebAssembly и WebGL/WebGPU на практике — чтобы увидеть, как устроены и стек, и дистрибуция современных веб-игр.

🤖 Старые приёмы промптинга режут точность reasoning-моделей, а закрытая вкладка не останавливает счёт — токены и GPU крутятся впустую — чтобы перестроить работу с ИИ и не платить за отменённую работу.

🛡️ Next.js с дефолтными настройками уязвим к RCE через Server Actions — даже если «серверных функций у нас нет» — чтобы не жить с иллюзией безопасности.

🎨 Центрирование всё ещё ломает голову, а каскадные анимации плодят сотни :nth-child — честный разбор центрирования и новые sibling-index() / sibling-count() — чтобы понимать, почему код работает, а не подбирать методом тыка.

⚡ Зелёные async-тесты врут, PDF застревает в iframe, геометрия — в sin/cos, DI падает на проде — PDFSlick, Geometric.js, InferDI и разбор ловушек Jest — чтобы ловить ошибки до деплоя, а не в три часа ночи.

⚛️ React-зоопарк, неделя конфигов и ручная мемоизация: карта Robin Wieruch на 2026-й, Rockpack из коробки, TanStack AI без вендорного замка, visx 4.0, RSC в TanStack Start и React Compiler — чтобы собирать стек без споров и вычистить лишний шум из кодбейза.

👁️ TanStack Table почти убил типы и автокомплит во Vue — честный разбор на Habr — чтобы брать библиотеку только под ту боль, которую не решить за час на чистом Vue.

🌎 Chrome подставляет тяжёлые блоки по ходу стрима, Firefox говорит с железом через Web Serial, canvas наконец принимает DOM — чтобы меньше костылей в вёрстке и проще UI поверх графики.

🦮 aria-label на div — ложная доступность, которую скринридер проглатывает — чтобы не тратить время на иллюзию a11y.

📦 Код пишут агенты, а ценность — в суждении: cpojer, автор Jest, о том, что осталось важно инженеру — чтобы направлять систему, а не печатать быстрее.

⚡ Node молча жрёт память, если стримы игнорируют backpressure — чтобы баг не всплыл только на по-настоящему большом датасете.

Читать далее

Семь стрел, 429 деревьев: семилетняя ошибка именования, всплывшая за чисткой Mermaid-визуализации

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели11K

Заходят как-то две машины Тьюринга в одну диаграмму… а у них имена одинаковые.

Я говорю «машины», а на деле — два разных экземпляра State @turing-machine-js/machine, сконструированные по-разному, с разным поведением во время исполнения, и со строго одинаковым state.name. Это происходило в библиотеке, которую я разрабатываю в качестве хобби с 2019 года, и я этого не замечал семь лет.

Обнаружил случайно, начиная с задачи на чистку Mermaid-визуализации. Закончил — кардинальной переделкой того, как композиция состояний отражается в имени. И узнал, что за этой переделкой прячется число C_7 = 429.

Читать далее

Большой каталог «на почитать» про $mol, web и не только

Уровень сложностиПростой
Время на прочтение15 мин
Охват и читатели8.6K

Реактивность лучше MobX, виртуализация рендеринга «из коробки», типизированные стили на TypeScript, локально-первая модель данных через CRDT — эти идеи Дмитрий Карловский (nin-jin) разрабатывает на своём фреймворке $mol и в проекте $hyoo.

За десять лет накопилось около сотни статей на Хабре и большая документация на mol.hyoo.ru, разбросанная по годам и площадкам — карта потерялась даже у тех, кто читал.

Этот каталог — навигатор по корпусу. 80+ материалов разложены по 12 темам:

с чего начать и для кого это вообще

история фреймворка от тизера 2016-го до обзора 2025-го

реактивность от первого «атома» 2014-го до свежего цикла 2026-го

архитектура: MAM, view.tree, виртуализация, CSS-in-TS

руководство по практике

утилиты: $mol_fetch, $mol_time, $mol_regexp, VaryPack, MarkedText

TypeScript-приёмы и принципы кода

$hyoo и Гипер База — распределённые данные на CRDT

сообщество, бенчмарки, аналитика проекта в цифрах

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

Полезно даже тем, кто не будет писать на $mol.

Читать далее

Один SSE для четырёх LLM: стриминг OpenAI, Anthropic, DeepSeek и Kimi через один бэкенд

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели7.7K

Мы делаем чат-агрегатор, где в одном окне доступны GPT, Claude, Kimi и DeepSeek. Фронтенду нужно отдавать ответ в реальном времени — токен за токеном, как в ChatGPT. Бэкенд при этом ходит к четырём разным API, и стриминг у них устроен по-разному. Расскажу, как мы свели это к единому SSE-потоку наружу, и про две грабли, на которые наступили: рваные UTF-8 символы и парсинг чужих SSE.

Статья будет полезна всем, кто проксирует LLM через свой сервер.

Зачем вообще свой прокси

Фронтенд не должен знать ключи провайдеров и не должен ходить к ним напрямую. Все запросы идут через наш Node.js-бэкенд: он подставляет ключ, дёргает нужный API с stream: true, парсит входящий поток и отдаёт фронту унифицированные события. Плюс на бэкенде живут лимиты, учёт токенов и подмена провайдера.

Задача: «получить поток от провайдера X → распарсить → отдать фронту в едином формате».

Два разных формата стриминга

Провайдеры делятся на два лагеря.

Читать далее

Забытый, но небесполезный: багхантинг во вкладке Source. Актуалочка для 2026 года

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели8.9K

2026 год, роботы доставщики на улицах крупных городов, автоматические сканеры уязвимостей для QA, фреймворки разработки , которые позволяют написать код как для сайта по продаже авторских батонов и выпечки , так и портал для крупного медицинского бизнеса - все это в наличии и не вызывает удивления. Казалось бы чем нам как разработчикам или QA полезным будет пресловутый DevTools и вкладка Source...

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

Читать далее

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

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели14K

Когда верстаешь адаптив, постоянно скачешь между десктопом и мобильной версией: то DevTools в режиме устройства, то ресайз окна, то открыть на телефоне. Десктоп и мобайл при этом никогда не видны одновременно — один прячется, когда смотришь на другой.

Готовые мобильные симуляторы это не закрывали: они хорошо делают своё дело, но не дают посмотреть адаптив прямо на вкладке, поверх десктопа. Я сделал свой инструмент — и в статье разбираю, как это устроено технически.

Читать разбор

Немного магии: как устроен API фикстур в Playwright

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели13K

Playwright использует довольно необычный подход в реализации своего JavaScript API для фикстур. Чтобы понять, как это работает, мне пришлось заглянуть под капот библиотеки и разобраться, откуда в этом API столько магии.

Читать далее

Почему может быть опасно держать открытыми Mini Apps в Telegram или где нибудь ещё: Focus Hijacking на практике

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели11K

И так, вы в Telegram Web и вы запускаете безобидное на первый взгляд Mini App, сворачиваете его или просто переключаетесь на соседний приватный чат, чтобы продолжить переписку. Казалось бы, контексты изолированы, фрейм приложения неактивен, и вы в полной безопасности. Но так ли это на самом деле?

Читать далее

Передача значений переменной из PHP в JavaScript

Время на прочтение1 мин
Охват и читатели13K
Здравствуйте уважаемые читатели. За ранее хочу сказать, что это мой первый пост и не судите очень строго.

Сегодня пост будет посвящен передачи значений переменной PHP в JavaScript — сценарий.
Этот урок подойдет самым новичкам, тем кто только начинает заниматься Web — программированием.
Для начала создадим обычный документ index.php и его каркасом будет служить простой HTML код.
Читать дальше →

Семь браузерных инструментов без сервера: WASM, WebGPU, шифрование на клиенте

Уровень сложностиСложный
Время на прочтение5 мин
Охват и читатели11K

Запись в Notion - и текст на чужом сервере. Задачи в облачном планировщике - данные в чужой аналитике.

Волна локальных LLM показала широкой аудитории, что on-device - это реально. Модель работает, данные не покидают машину. RAG в indexeddb - кто так не делал?

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

Я доделал свои 7 pet-проектов. Все работают целиком в браузере, без сервера, без регистрации, без отправки данных куда-либо. Только локальное хранилище, шифрование на стороне клиента и нативные браузерные API.

Что же это за проекты

Я сделал инструмент для бизнес и системного аналитика, чтобы не держать всё в голове во время разбора задачи

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели14K

Меня зовут Денис, я бизнес-аналитик. Статья про то, как я построил себе рабочий инструмент — Custom Tool — который живёт прямо в браузере, ничего не требует устанавливать и помогает не забыть ни одного важного вопроса при разборе задачи.

Ссылка на инструмент: denissadykov.github.io/ba-cheatsheet/custom
Всё открыто, бесплатно, без регистрации.

Читать далее

Назад в будущее UI-kit: как мы перевели живую библиотеку на дизайн-токены и ничего не сломали

Уровень сложностиСредний
Время на прочтение24 мин
Охват и читатели12K

UI-kit, которым пользуются несколько продуктовых команд, нельзя просто отправить в будущее и переписать под новый дизайн. За ним тянется прошлое: старые CSS-переменные, публичный API, кастомизации у потребителей и независимые релизные циклы. При этом бренд уже меняется, дизайнеры приносят новую палитру, типографику, motion, скругления и тёмную тему и всё это нужно аккуратно посадить на компоненты, которые продолжают работать в продакшене.

Привет, Хабр! Меня зовут Амир, я Senior Vue.js Frontend Developer в экосистеме Лукоморье. Уже шесть лет я развиваю фронтенд большой внутренней ERP-платформы, в том числе внутренний UI-kit: около 50 компонентов на Vue 3 и TypeScript, которыми пользуются несколько продуктовых команд в Ростелекоме.

В этой статье расскажу, как мы устроили для UI-kit такое «назад в будущее»: в одной долгоживущей ветке sova провели редизайн поверх работающих компонентов, сохранили публичный API для команд-потребителей и перевели визуальный слой на новую архитектуру. Мы внедрили 3-tier-систему дизайн-токенов, собрали pipeline на Style Dictionary и Tokens Studio for Figma, оставили старые CSS-переменные через legacy-алиасы, а заодно закрыли несколько долгов библиотеки: типизацию шаблонов, встроенный SVG-спрайт на 816 иконок, утилиту темизации и вынос runtime-зависимостей с сокращением бандла с 940 до 150 КБ.

Материал будет полезен инженерам дизайн-систем, фронтенд-архитекторам и тимлидам, которые поддерживают UI-kit для нескольких продуктовых команд и думают, как провести редизайн без поломки потребителей. Внутри — код, архитектурные решения, компромиссы и честные выводы по итогам миграции.

Читать далее

Ближайшие события

Делаем базу знаний и Телеграм бота психотерапевта, с использованием LLM Wiki и CF Workers

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели7.3K

Строим Telegram-бота с RAG-поиском по базе знаний — без векторных БД, без эмбеддингов, без платной инфраструктуры. Поиск по ключевым словам через Jaccard, LLM через Groq, история сессий в Cloudflare KV, деплой одной командой. Стек: TypeScript + Telegraf + Cloudflare Workers.

Читать далее

Schema-driven ORM для TypeScript: @cleverbrush/knex-schema и @cleverbrush/orm

Уровень сложностиСредний
Время на прочтение13 мин
Охват и читатели4.8K

Статья о том, как превратить TypeScript-схему в единый источник истины для работы с базой данных: из одного определения получить типы строк, имена таблиц и колонок, типизированные запросы, связи, миграции и unit-of-work поверх Knex.

Читать далее

Путь к ошибке: зачем нужны «Breadcrumbs» во frontend-мониторинге

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели8.1K

Пользователь столкнулся с ошибкой в вашей программе. Трекер ошибок ее зафиксировал. Стек-трейс показывает место сбоя. Но что делал пользователь за несколько секунд до этого? Какие запросы выполнялись? На каком шаге сценарий пошёл не так?

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

Читать далее

free AI girlfriend. Почему мужчины уходят из экономики отношений и как устроен пространственный 3D-аватар в браузере

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели12K

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

При этом, согласно макроэкономической статистике, структура перераспределения капитала выглядит иначе. Возникает логичный вопрос: как именно распределяются финансовые потоки в обществе и почему традиционная «экономика отношений» сегодня превратилась в систему с крайне сомнительной окупаемостью инвестиций (ROI) для мужчин?

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

Читать далее

Я устал от Electron, Tauri и Neutralino — и случайно сделал… лучше?

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели12K

Webnative - фреймворк для разработки нативных приложений на языках веба с использованием нативных webview компонентов.

Читать далее

Медицинское обучение через игру: симулятор лечения сифилиса и ВИЧ

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели10K

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

Код открыт, лендинг и игры доступны по ссылке.

Полечить сифилис и ВИЧ

Mini Bucket 3.6.4: теперь с плагинами — двери для разработки открыты

Время на прочтение3 мин
Охват и читатели8.1K

Как мы превратили панель управления NAS в платформу для расширений, зачем туда Log Manager и для чего Plugin Template.

В новой версии 3.6.4 я добавил возможность устанавливать плагины. Перед реализацией возникло много вопросов. Наша ключевая фишка — мультисеть (позволяет переключать фронтенд на бэкенд другого сервера для его мониторинга и управления). Значит, и модуль плагинов должен уметь переключаться.

И......

Что же дальше...