Как я делал пет-проект и закопал его собственными руками

История о том, как MVP показал мне реальные проблемы, а попытка сделать «нормальную версию» только усугубила ситуацию

Разработку пет-проекта с прицелом на open source в моем случае можно описать выражением:
корабль любви разбился о айсберг бытовухи.

Telegraph API обещает принимать content до 64 КБ, но на практике CONTENT_TOO_BIG прилетает уже на 17-20 КБ. Разбираю, как измерял реальный лимит, при чём тут UTF-8 vs UTF-16 для кириллицы, и каким обходным путём чинил молчаливую деградацию RU-канала.

Прошлой зимой я писал тут про «Мастерок» — строительный калькулятор на Flutter для RuStore. Приложение поехало в прод, набрало 4.9 звезды, и в какой-то момент пришло осознание: аудитория смартфонных приложений — это аудитория смартфонных приложений. А человек, который в обед нагуглил «сколько мешков ротбанда на 20 квадратов», в магазин приложений не полезет. Он хочет страницу в браузере. Желательно без куки-баннера на полэкрана, без интерфейса из 2012-го и без того, чтобы перед ответом на вопрос ему предлагали посмотреть пять реклам.

Так появился getmasterok.ru — веб-половина той же экосистемы. Сайт на Next.js 15, шестьдесят один калькулятор, ИИ-прораб, SEO, блог, всё как положено. И с одним неочевидным вызовом, который стал главным сюжетом этой статьи.

А вызов я нашёл не сам. Его нашёл пользователь.

В 2026 году растёт риск перебоев и ограничений в работе интернета в РФ. В таких условиях имеет смысл заранее продумать, как сохранить привычное окружение при нестабильном доступе к сети.

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

Когда-то давно я только верстал. Накидывал разметку, добавлял классы, идентификаторы и стилизовал ЦСС-ом. И было хорошо. Потом от меня потребовали динамичности — пришлось добавить JavaScript. И было очень хорошо.

Технологии развивались, и мне хотелось пробовать новое. Я попробовал AJAX. Это было так волнительно... Я сказал бэкендерам: основную разметку жду от вас, а опции для выпадающего списка, например, отдавайте джейсоном по запросу. Они были не в восторге. «Одному HTML подавай, другому CSV, третьему ещё что-то — безобразие!» Но мы нашли компромис. Бэкэндеры сказали: «Вот вам, мол, джейсон, дальше сами как-нибудь». И назвали это REST API.

Сначала было очень круто! Мы, верстальщики, организовались. Мы стали фронтендерами! Конечно же, мы сразу побежали решать ещё нерешённые сто раз решённые задачи. Мы писали библиотеки и фреймворки — четыре миллиона штук! Да у нас даже есть библиотека с функцией для умножения чисел — lodash.multiply. Мы придумывали свои паттерны и архитектуры, например FSD. Короче, мы стали очень крутые.

Но то уже были «мы», а не я. Мне было сложно. Шутка ли, изучать по одному новому фреймворку в неделю? А ведь еще переписывать всё надо, стек-то устарел... В общем, в какой-то момент я перестал поспевать за модой и справляться со сложностью. Переходишь из одного проекта (на React) в другой (на Vue), а там всё иначе. Берешь нового разработчика в команду с опытом в React, например, а ему нужно время, чтобы вникнуть, потому что в его старой команде был другой «стейт-менеджер». Вавилон, никто друг друга не понимает.

После того как моя статья об LOTIS вызвала интерес, я решил подробнее раскрыть его архитектуру и привести примеры кода.

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

Около года назад моё желание кастомизировать десктопный клиент популярного музыкального сервиса привело меня в некое сообщество. Всё началось с попытки восстановить заброшенную тему «Blurity» после очередного обновления Electron-хоста, которое сломало все селекторы. Но проект быстро перерос рамки обычных правок CSS.

В этой статье я расскажу, как ChromaSync эволюционировал из простого визуального патча в полноценную инженерную систему — runtime-аддон со сложной архитектурой. Мы разберем «анатомию» плеера, создание декларативной системы из 70+ настроек и перенос тяжелой математики аудиореактивных эффектов в изолированное ядро на WASM. Это история о том, как 700 строк JavaScript превратились в 10 000, а обычная «разукрашка» — в оптимизированную экосистему, умеющую балансировать между визуальной насыщенностью и производительностью системы.

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

Мы сделали интерактивный дом-таймлайн про телевидение 90-х и 00-х. Под катом: как команда без разработчиков дошла от JSON-файла на VPS за до корпоративного Kubernetes

Об ООП кандидаты рассуждали уверенно — но в основном на концептуальном уровне, не вдаваясь в то, как именно ООП реализовано в JavaScript. С FP картина была другой: уверенности меньше, зато критика — конкретная и повторяющаяся: «иммутабельность дорогая по памяти», «рекурсия небезопасна из-за стека». Что характерно — эти аргументы почти всегда были сформулированы через опыт работы с JS, а не с Haskell, Clojure или Scala.

Это важная деталь. Любая парадигма существует на двух уровнях: концептуальном (идеальная модель) и имплементационном (как конкретный язык эту модель выражает). Судить о FP по JS — примерно то же самое, что судить об ООП по bash-скриптам с глобальными переменными.

Параллельно я регулярно слышал, что JS — функциональный язык. Аргументы варьировались от «там есть .map()» до рассуждений о чистых функциях и каррировании. Именно это и стало поводом для поста: я хочу объяснить, что я считаю функциональным языком — и почему JS таковым не является. Не перечислить отсутствующие фичи, а показать, почему их нет и что это значит в реальном рантайме.

Привет!

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

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

📺 Для тех, кто хочет делать игровые интерфейсы быстрее: видео про 2D-игры с AI и Phaser, где генеративные инструменты работают как напарник, а не как «чёрный ящик».

🤖 В AI-разделе — разбор того, что уже можно брать в прод: micro-ml на Rust/WASM, кейс крупной техкомпании с роем из 50+ агентов, Flint Alpha и практическая интеграция Claude с видео.

🛡️ По безопасности фокус на снижении рисков: прикладной XSS, бесплатная оценка уязвимостей кода от GitHub и дорожная карта крупной техкомпании по постквантовой криптографии.

🎨 CSS-блок про баланс визуала и доступности: почему box-shadow не заменяет outline в forced-colors и как сохранить корректный фокус.

⚛️ React-секция для тех, у кого интерфейсный слой растёт в сложности: управление модалками без хаоса, UI без брейкпоинтов и состояние компонентов через radio state machine.

⚡ В JS/TS — практичный набор без перегруза: Pretext для текста, k-means для палитр, модульная архитектура, Intl API и Web Audio API в Node/Bun.

🅰️ Angular-раздел посвящён Signal Forms в v21 и тому, как перейти к типизированным формам без ручных подписок.

🌐 В стандартах и дизайне — что уже можно внедрять сейчас: CSS Image Animation, Baseline за март, Liquid UI и UX-подходы для legacy-систем.

…и многое другое.

Всем привет
! Текст полностью написан человеком !

На днях вышла модель Qwen 3.6, весь реддит забит этой темой. И я рискнул проверить что она может

Оборудование на котором тестировал (Ноутбук Asus TUF AMD Ryzen + дискретная Nvidia rtx 4070 8GB):

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

Как взлом одного npm-аккаунта за 3 часа распространил RAT на 174 000 пакетов и почему стандартные инструменты вроде NPM Audit это не поймали. Разбираем инцидент с Axios: механику атаки, слепые пятна в CI/CD и то, что реально работает.

Привет, All!

Как вам идея, отказаться от тегов вообще и делать WEB-проекты исключительно на классах? А еще, чтобы и клиентский, и серверный коды шли рядом, как в десктопном приложении.И чтобы с одними и теми же переменными можно было работать и в PHP, и в JavaScript.

«Зачем?» — сапросит кто‑то. Отвечу: чтобы можно было строить не DOM‑элементы, а объекты предметной области бизнес‑процессов, которые автоматизирует мое приложение. И чтобы не тратить время на разные async, promise, ajax и так далее, пусть за это отвечает фреймворк!

Я говорю примерно вот о таком построении WEB-приложения:

Вы уверены, что ваш бандлер вырезает неиспользуемый код? Я тоже был уверен — пока бандл Next.js проекта не оказался в два раза тяжелее, чем нужно. Прогнал одинаковый тест на webpack, rollup, vite, esbuild и Next.js — 5 из 7 ломаются на банальном barrel файле. Полез в исходники, нашёл основную причину — и она оказалась не там, где ожидал.

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

Вот уже 18 лет статический анализатор кода PVS-Studio находится на рынке. За это время он обзавёлся поддержкой языков C, C++, C# и Java. Разумеется, останавливаться на этих языках мы не планируем, и в этой статье расскажем про разработку нового JavaScript/TypeScript анализатора, который выйдет уже совсем скоро.

Сегодня разберём тему, которая кажется элементарной, но на практике вызывает кучу вопросов. Речь о кнопке «Назад» в приложении на Vue.

Казалось бы, что тут сложного? Кликнули - ушли на предыдущую страницу. Но нет. Большинство разработчиков, даже с опытом, не до конца понимают, как устроена навигация в роутерах и как работает история браузера. А это критично, когда речь заходит о предсказуемом поведении приложения.

Orillusion + кастомные шейдеры: полный разбор процесса

Как зарегистрировать WGSL-шейдер, связать его с геометрией, настроить атрибуты и добиться анимации. Разбираем compute-шейдеры для GPU-вычислений и инстансинг на примере пяти вращающихся 4D-тессерактов. Если вам интересно то код и небольшие пояснения ниже.

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

Привет! Меня зовут Егор Молчанов, я разработчик в компании Домклик.

В прошлой статье мы познакомились с новыми функциями input(), output() и model(), которые закладывают фундамент для будущего Angular без Zone.js. Сегодня мы поговорим о том, как эти изменения дошли до самой, пожалуй, наболевшей темы в любом приложении — работы с формами.

В Angular v21 появился новый, экспериментальный способ управления формами — Signal Forms. Он не отменяет старые добрые Reactive Forms, но предлагает совершенно иной подход, основанный на сигналах. Давайте разберёмся, как работали формы раньше, как они будут работать с Signal Forms, и что это нам даёт.

У каждого из нас есть «чёрная дыра», куда уходят полезные ссылки. Кто-то сохраняет их в «Избранном» браузера, кто-то пишет сам себе в Telegram, кто-то держит десяток вкладок открытыми «на потом». У меня была та же проблема. Я пробовал Notion, Evernote, Google Keep, Obsidian - всё это мощные инструменты, но для простого «сохранить ссылку и не забыть» они часто избыточны.

Так родилась идея KylikLink - минималистичного PWA-приложения для заметок и ссылок, которое работает без интернета и не требует регистрации.

Playwright 1.59 — не очередное инкрементальное обновление. Это заявка на то, куда движется автоматизация тестирования, и это направление глубоко агентное. Если вы ждали, когда инструменты догонят AI-driven воркфлоу, о которых все говорят, этот релиз закрывает разрыв.

Разберём каждую крупную фичу и, что важнее, как каждую из них можно применить немедленно.

Задача усложнялась двумя дополнительными требованиями:

Привет, коллеги! Сегодня делимся историей, которая отлично показывает, как AI ускоряет старт, но человеческий опыт и внимание к деталям делают продукт по-настоящему крутым.

Недавно нам для одного из проектов понадобился DatePicker. Сам компонент под NDA, поэтому показать его не можем. Но чтобы поделиться процессом, мы специально для статьи собрали похожий концепт - с открытым кодом и возможностью потыкать вживую (ссылка ждет в конце).

Так вот, казалось бы, компонент простой, но мы решили не просто взять готовую библиотеку. Во-первых, хотелось понять «а как там внутри», а во-вторых - поставить себе планку: сделать его по-настоящему доступным по всем канонам WCAG. Ну и, конечно, не без эксперимента: «А что, если Claude напишет основу?»

Так началось наше приключение с созданием полностью доступного компонента выбора даты с использованием React и Typescript, следуя строгому паттерну WAI-ARIA APG «Date Picker Dialog»

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

Огромное число авторов используют хэштеги для пометки своих постов. А также для заголовков, вносят эту информацию на картинки, в инфографику для видео и всячески применяют для поиска.

Хочу рассказать о наблюдаемом мной парадоксе этой технологии с точки зрения IT и обычной жизни.

Этот термин состоит из конкатенации двух слов: hash и tag. Hash - это прежде всего понятие про уникальность с шифрованием.

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

Такие функции не всегда могут однозначно давать уникальные ответы в виде строк, поэтому существуют так называемые коллизии.

Короче, здесь главный приоритет - уникальность, "не как у других".

Тег, или тэг - это обозначение какой-то метки.

В HTML используются теги верстки, в разработке через систему контроля версий тегами помечали стабильную версию кода. tag-1.2.3

В общем, эти два термина несут окрас, который применяется во многих отраслях разработки.

dc.send(file) не означает, что файл уже доставлен. Между отправкой и реальной доставкой – буфер, relay, запись на диск, ACK, reconnect и потерянный после refresh File. Разбираю шесть production-проблем WebRTC-файлообмена, которые обычно остаются за пределами туториалов.

В этом выпуске 12 фич, которые стали доступы повесеместно с хорошей поддержкой. От трёх фич я в полном воссторге.

Обзор на браузерные API, которые стали Widely available в марте 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем.

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

В данной статье (а возможно цикле статей) речь пойдет о собственной разработке облачного SPA приложения по моделированию пространственных стержневых систем методом конечных элементов с численно-аналитическим решением для инженеров-проектировщиков в основе которого математическая модель Эйлера-Бернулли, вариационные принципы и итерационный метод сопряжённых градиентов применяемый для большеразмерных СЛАУ с разреженной матрицей жёсткости с одной стороны, и JavaScripts экосистема облака, выполненного в стеке Node js, Express js бэкенд части, и React js, MobX, Three js, glsl shaders фронтенд части с другой стороны. Отображение эпюр усилий в пространственных стержневых элементах реализовано на шейдерах vertexShader и fragmentShader. Это позволяет вычислять эпюры для каждого стержня на лету и выполнять отображение графиков (в общем случае полиномов 5 степени) в пространстве мгновенно.

Если вы ведете несколько проектов одновременно, вы знаете проблему управления информацией. Мысль пришла в голову — записал куда-то. Через месяц пытаешься вспомнить: где это было? Сохранил в папке где-то на компьютере? В заметках телефона? В рабочем чате или личных сообщениях?

Если не нашел — идея ушла. Или осталась, но найти её — отдельный квест и потеря времени, которое хотелось бы потратить с пользой, а не на поиски.

Со мной так происходило постоянно. Статьи и доклады по учёбе, отчёты по работе, технические заметки по разрабатываемому ПО, ссылки на полезные ресурсы, голосовые идеи по дороге на работу, полезные фото — всё в разных местах, без структуры, без связей.

Изначально я пытался найти для себя идеальный инструмент. Notion, Obsidian, Evernote — ни один не решал мою задачу в комплексе: быстро сохранить мысль, не потерять её, а потом легко найти и связать с другими.

Поэтому я написал свою систему.

Статья — не «продажа курса» и не «уникальный продукт». Это описание того, как я решал свои задачи, какие решения принимал и что из этого вышло. Если вы тоже теряете время при поиске нужной информации — возможно, найдёте здесь что-то полезное.

Рассказываю, как создал расширение для Chrome, которое автоматически отменяет рейды на Twitch. Разбираю архитектуру на Manifest V3, логику обнаружения модальных окон через текстовый анализ и подводные камни при работе с динамическим DOM.

Год назад я опубликовал первую статью про разработку приложения календаря тренировок. Спустя 5 месяцев опубликовал рассказ о 10 обновлениях. Сейчас время финала истории - ещё 7 обновлений за 7 месяцев.

Сам регулярно пользуюсь приложением - оно добавляет мотивации заниматься спортом дальше, сохраняет график тренировок, следит за объемом выполненных упражнений. На текущий момент в приложении больше 150 зарегистрированных пользователей.

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

Исходный код

Приложение в RuStore

Веб-версия

Frontend: Typescript, Vitest, Vite, Vue, Tanstack Query, Vue I18n, Tauri

Backend: Typescript, Vitest, Esbuild, Fastify, Mongoose, MongoDB, Swagger

Недавно Apple подтвердила стратегическое партнерство с Google для интеграции ИИ Gemini в свои устройства.  Сегодня мы их опередим и поднимем свою LLM в Android-смартфоне. С блэкджеком и WebUI.

28 марта 2026 года инженер Midjourney Cheng Lou выложил в открытый доступ библиотеку, которая за неделю набрала почти 40 тысяч звёзд на GitHub. И имя ей — Pretext. Это движок текстовой верстки на чистом TypeScript, который полностью обходит DOM и браузерный layout рефлоу. За этим стоит вполне большая проблема и красивое решение.

Давайте разберемся, что это такое, зачем оно нужно, как устроено и стоит ли тащить к себе в проект.

WebSocket vs SSE простым языком: двустороннее и однонаправленное соединение, как работает TCP и HTTP upgrade, и какие вопросы по этим темам чаще всего задают на собеседовании.

Привет!

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

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

📺 Крупные релизы и видео: Babylon.js 9.0 и доклад Таннера Линсли про TanStack Start.

🤖 AI в проде без розовых очков: как агенты «видят» веб, что не так с персонами в промптах и почему Cloudflare меняет подход к кэшу.

🛡️ Supply chain снова в фокусе: пауза bug bounty в Node.js, кейс с axios и практичные меры защиты зависимостей.

🎨 CSS-практика без магии: containment, sticky по осям, subgrid, dino game и «жидкие» анимации от Темани Афифа.

⚡ JavaScript/TypeScript: главное по JS 2026, новый JSIR от Google и утилиты для View Transitions.

🅰️ Angular-экосистема для AI-эпохи и не только: ngxtension, LLMs.txt в NG-ZORRO и MCP-страница в PrimeNG.

🌎 Веб-стандарты и браузеры: W3C про AI и голосовых агентов, JetStream 3 и MCP-коннектор в Opera Neon.

🖌️ UI/UX и доступность: WebAIM Million 2026, дизайн для людей с тревожностью и разборы про принципы дизайна.

…и многое другое.

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

В этот момент прокси-инструменты вроде Proxyman начинают играть совсем другую роль. Это уже не просто «посмотреть запросы», а полноценный слой управления трафиком.

Меня зовут Станислав, я Test-инженер в KODE, в этой статье разберу, как использовать Proxyman Scripts не как вспомогательную фичу, а как инструмент автоматизации тестирования.