Обновить
128K+

TypeScript *

Cтрого типизированная надстройка для JavaScript

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

B4 — сетевой мультитул по обходу блокировок

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

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

В итоге на сегодняшний день B4 - это не инструмент для обхода блокировок (коим и задумывался изначально), а полноценный сетевой мультитул с гибкой и продвинутой маршрутизацией таргетированного трафика.

Читать далее

Новости

Обновление контента игровых клубов. Отказ от внешнего S3-провайдера. Стоимость и механика

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

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

Читать далее

Playwright в картинках: как работают фикстуры

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

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

Читать далее

Point0 — фулстек TypeScript-фреймворк на Bun и React, о котором я мечтал

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

Хочу анонсировать свой фреймворк Point0. Это первый Bun FullStack фреймворк сопоставимый по функционалу с Next.js и TanStack Start. Однако, имеет кардинально другой DX, ради которого и был создан.

Мне всегда не нравились существующие фреймворки, особенно Next.js и Remix (React Router). Но я думал, что, видимо, по-другому фреймворки просто не получаются, поэтому и не делают. А громоздкость, чужие строгие соглашения, неповоротливость архитектуры, это просто необходимое зло, с которым я должен смириться.

В какой-то момент во мне накопилось критическое ощущение, что всё же должно быть совершенно по-другому. И я подумал, а напишу-ка я псевдокод на воображаемом фреймворке, который бы меня устраивал, вообще не взирая на возможность реализации. Просто буду писать проект, будто бы идеальный фреймворк существует.

И получилось так здорово, что я просто забыл обо всём на свете и 10 месяцев пилил реализацию этого фреймворка, а 3 месяца назад даже уволился с работы, чтобы уже скорее его добить. И вот добил, и хочу поделиться с вами.

Читать далее

ИИ-ассистент на базе Hermes Agent в Telegram: для саппорта, семьи, пет-проектов и не только

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

Недавно мы с женой придумали небольшой совместный проект: она креативит, я прогаю. Сделав каркас в Codex, я завел чат на троих с Hermes Agent. Пошерил ему доступы и контекст, теперь моя пассия добавляет фичи и двигает пиксели голосовухами. Это сработало так круто, что я всунул Гермеса много куда — и не могу не поделиться этим с вами!

В этой статье я расскажу: что такое Hermes Agent, как я его использую и как сделать себе также.

Начать ИИ-трасформацию

ChatGPT -> Codex CLI: как перенести контекст диалога в локальную сессию

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

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

Читать далее

Оптимизация без AI: как я автоматизировал API-ручки и типы

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

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

С этим надо было что-то делать.

Читать далее

Как построить свою оргмодель, свое хобби-приложение и не потерять месяц жизни

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

Друзья, сегодня отличный день, чтобы сделать свою первую статью на Хабре, который я читаю многие годы. Сегодня я успешно запустил в прод свой первый полноценный хобби (пет) проект.

Два года назад работая с замечательной командой консультантов института Адизеса, мы столкнулись с проблемой наличия бесплатного гибкого софта для построения орг.моделей. Быстро собрать подразделения и функции, перетащить ветки в новое место, покрасить и так что бы не рисовать линии и квадратики, а только сосредоточиться на самой модели, потому что все это происходит во время страт. сессии, где сидят руководители тех самых подразделений. А подразделений и веток много, сценариев много – кого-то временно скрыть или свернуть, кого-то скопировать как типовую функцию в другие ветки. Все делать нужно быстро и на большом экране и не всегда в логике HR штатной модели (а точнее всегда не в ней). Миро, Фигма и прочие конструкторы не подходят по той или иной причине.

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

Но мало сделать приложение, не менее важным было сделать легкий обмен сформированными моделями, возможность их просмотра и доработки участниками. А еще лучше часть рутины по низшим ветвям отдать ИИ на проверку или доработку. Так родилась еще одна идея – создать формат моделей, который говорит и на языке программы (data-to-diagram), и на языке человека, и на языке ИИ, и не зашит никакими лицензиями и нечитаемым кодом. То есть открытый формат. Было важно, чтобы формат работал с иерархическими моделями и не позволял никакие кросс-связи буквально, что бы пользователи не творили хаос между ветвями. Только прямая естественная потоковая иерархия и прямая ответственность. Но и признаки блокам нужны, так как не все способна отразить иерархия - так пришла идея тегов, как гибкая система реквизитов (а во многом и, по сути, мини база данных, при необходимости. Лайфхак!). Так же очень хотелось, что бы модель не только строила связи, но и по ним могла что-то посчитать - конечно же нужна универсальная ценность (value), но не ограничивать ее только одним типом, а дать свободно выбирать, что считать и в каких единицах схмерения – бюджет, время, единицы товара или количество населения страны. И это тоже нам надо! Для всего это отлично подошел хорошо известный ИТ-ишникам формат YAML, который для людей открыт, как текст, а для машины, по сути, четкая структура данных. Вот и отлично, я собрал на его базе прототип структуры и необходимых атрибутов. И дал короткое название .orgf. Сгенерировал несколько моделей через ИИ и дал проверить результат другой ИИ – результат великолепный. ИИ легко переводила любые данные в этот формат, хоть штатное расписание из Екселя, хоть выгруженные в PDF структуры функций и процессов. Прототип открытого формата ORGF себя полностью оправдал! Так получилось, что модели и формат появились раньше самого редактора моделей (приложения). Ну что же есть понятный запрос, теперь надо было сделать под него софт!

Читать далее

Дайджест JS/TS: новинки ES2026, гонка рантаймов и EAP

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

Пока фронтенд-инженеры продолжают пересобирать свои проекты на новых сборщиках, JavaScript как язык становится всё более зрелым, быстрым и безопасным. Мы собрали самые интересные новости из мира JS и TS за последние месяцы, мимо которых нельзя пройти.

Читать далее

Как мы ускорили разработку Frontend в 10х TSGO, Oxlint, Rsbuild, React Compiler & CodeGen

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

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

1. Type checking — TSCheck vs TSGO

2. Linting — ESLint vs Biome vs Oxlint

3. Bundling — Webpack → Vite → Rsbuild

4. API-контракты — Кодогенерация без AI

5. React-оптимизации — React Compiler в production

Читать далее

Как дать ИИ-агенту работать с данными и не потерять контроль: безопасный data-join через MCP, вместо создания DataLake

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

Это продолжение новых безопасных паттернов по работе с MCP, которые я для себя придумал, которые я описал в статье:

Основная задумка вместо того, чтобы строить очередной Data-lake возможно ли организовать взаимодействие через MCP так с данными, чтобы это было безопасно и эффективно

Кликай сюда, если интересно почитать

Два способа создания доступного DatePicker'а с помощью AI: 80/20 в пользу AI или системное проектирование с агентом

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

DatePicker казался нам небольшой задачей в разработке UI, пока мы не попробовали создать компонент, который будет корректно работать с keyboard navigation, screen reader’ом, управляемым состоянием и реальными проверками доступности.

Нам потребовался DatePicker производственного уровня на React и TypeScript, и сначала очевидный путь казался очень заманчивым: дать AI четкий запрос, получить 80% готового кода, а остальное доработать руками. Подробный разбор этого кейса есть в моей предыдущей статье «Попросили Claude создать WCAG-доступный DatePicker на React и потратили 3 дня на доработки».

Так вот.

Модель может сгенерировать структуру календаря, атрибуты ARIA, базовую keyboard navigation и логику работы с датами.

Затем начинается интеграция: поведение фокуса становится нестабильным; возникают конфликты между обработчиками событий; озвучивание screen reader’ами требует тщательного тестирования; небольшое изменение в логике работы с датами может неожиданно нарушить работу календаря; код выглядит нормально, но компонент пока не является надежным.

В этой статье я сравниваю два способа создания доступного DatePicker'а с помощью AI:

Первый — 80% кода с помощью AI, остальные 20% руками. Второй — системное проектирование с AI-агентом: PRD, декомпозиция задач, правила агента, внешняя верификация, Vitest, Playwright, сборка Vite, проверки типов и строгий цикл, в котором агент не может двигаться дальше, пока не будет пройден текущий шаг.

Дальше все по делу: в чем AI действительно нам помог; где он начал сбиваться с курса; почему одного большого promt'а оказалось недостаточно; как The Verifier изменил процесс и почему основная задача инженера в разработке с использованием AI больше не сводится только к написанию кода, а заключается в контроле над замыслом, архитектурой, контрактами и стоимостью изменений.

Читать далее

Попросили Claude создать WCAG-доступный DatePicker на React и потратили 3 дня на доработки

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

Выбор даты кажется небольшой задачей в UI, пока не попробуешь сделать его по-настоящему WCAG-доступным.

Нам понадобился настраиваемый DatePicker на React для процесса записи на прием к врачу, где пользователи, работающие с keyboard navigation, и люди, использующие screen reader’ы, должны были выбрать дату без лишних затруднений.

Claude сделал нам хорошую первую версию: структуру компонента, ARIA-атрибуты, базовую keyboard navigation и логику календаря. На первый взгляд результат выглядел почти готовым.

Затем мы запустили NVDA, VoiceOver и протестировали сценарий keyboard navigation.

Фокус выходил за пределы диалогового окна; некоторые даты озвучивались неверно; переключение между месяцами сопровождалось слишком тихим звуком; нажатие клавиши «Esc» закрывало календарь, но оставляло пользователя без контекста; режим высокой контрастности Windows нарушал отображение выбранного состояния.

Код выглядел нормально, но UX оставлял желать лучшего.

В этой статье мы рассмотрим реальную работу, стоящую за WCAG-доступным DatePicker'ом: где AI сэкономил нам время; где он не справился; как нам помог WAI-ARIA APG; какие детали нам пришлось исправлять вручную и почему доступность нельзя проверить, просто прочитав сгенерированный код.

Приготовьтесь к инсайтам, багам и победам!

Читать далее

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

Знакомимся с Cruzo. Часть 2. Обзор шаблонизатора внутри которого виртуальная машина

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

Cruzo — минималистичный UI-фреймворк без лишней сложности 

Знакомимся с Cruzo. Часть 1. RxBucket – контейнер состояний и конфигураций компонентов на фронте

Я продолжаю серию обзорных статей о js-фреймворке Cruzo. Я работаю над этим фреймворком последние 6 лет, много идей отпало, осталось только что реально нужно в работе.
Здесь я расскажу вам о сердце фреймворка – шаблонизаторе. Для его реализации была написана стековая виртуальная машина.
Какая еще виртуальная машина внутри js спросите вы? Это VM — но не «виртуальный процессор» вроде JVM или WebAssembly, а интерпретатор байткода, написанный на JavaScript.

Читать далее

Мультивалютность в ERP — считаем деньги в тенге, SOLANA и Theter одновременно [Go]

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

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

Так получилось, что я родился скромным Goфером и год назад начал работу над самописной ERP-подобной учётной системой для микробизнеса РФ…

Читать далее

Немного насчет — «AI-агенты сделают разработку самоподдерживаемой»

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

Немного насчет - «AI-агенты сделают разработку самоподдерживаемой».

Прогнал spec-driven агентный пайплайн на нескольких проектах, и картина каждый раз одна: узкое место, где тормозится разработка, не исчезает, оно сдвигается.

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

Как это работает на практике:

Читать далее

Покой как фича: анти-шагомер на Expo, который ругает за активность

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

Я сделал анти-шагомер на Expo и React Native: приложение, которое награждает за неподвижность и ругает за шаги. Снаружи это шутка про anti-wellness, внутри — Android step counter, background tasks, локальные пуши, Zustand, native-модуль для TYPE_STEP_COUNTER и state machine для чек-апа “я живой, но мне лень”. Рассказываю, что сломалось по дороге и почему фоновая логика в мобильной разработке — это не cron.

Мне лень, но интересно

Когда контекстное окно кончается, а проект — нет

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

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

Осознать масштаб

GenUI: первый взгляд на json-render и MCP Apps

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

Чат как интерфейс упирается в потолок. Текст хорош, когда ответ это объяснение или код. Но на запрос «покажи продажи за квартал и сравни с прошлым годом» модель отвечает стеной чисел, в которой ничего не покрутить. Хочется другого: интерактивный дашборд прямо в чате, который при следующей реплике не пересобирается с нуля, а аккуратно обновляется. Очевидное решение — попросить модель сгенерировать React-компонент — оказывается тупиком. Вывод нестабилен: один и тот же промпт сегодня даёт useState, завтра — Zustand. Сгенерированный JSX это исполняемый код, то есть открытая дверь для инъекций: в мае 2025 Invariant Labs показали на официальной GitHub MCP-интеграции, как вредоносный issue провоцирует агент на утечку данных из приватных репозиториев. И главное, что нет инкрементальности: на запрос «добавь фильтр» модель регенерирует весь компонент, состояние теряется, ввод сбрасывается.

Вывод: код это плохой интерфейс между LLM и приложением. Нужен промежуточный слой. Эта статья про два таких слоя: json-render отвечает за то, что и как рендерить из декларативной спецификации, MCP Apps — за то, где и как доставить этот интерфейс в ассистент. По официальному анонсу MCP Apps поддерживаются в Claude, Goose, VS Code Insiders и ChatGPT; json-render заявляет MCP-интеграцию для Claude, ChatGPT, Cursor и VS Code. Через всю статью я протащу один пример: дашборд продаж, который пользователь докручивает репликами «добавь разбивку по регионам», «сравни с прошлым годом», «убери блок». Сразу обозначу жанр: это мой первый пилотный заход в тему, поэтому текст ближе к обзору с пробами, чем к боевому отчёту из эксплуатации.

Читать далее

Знакомимся с Cruzo. Часть 1. RxBucket – контейнер состояний и конфигураций компонентов на фронте

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

Не так давно, я наконец выложил на github свой фреймворк cruzo – https://github.com/MaratBektemirov/cruzo. Сам фреймворк писался где-то с 2020г, в свободное от работы время. Причем большую часть времени я потратил на шаблонизатор с реактивными значениями.

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

Читать далее
1
23 ...