JavaScript *

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

Прошлый раз я рассказал, как написал свой калькулятор раскладки плитки, потому что замучился считать ванную в столбик. Тот пост был про версию 1.2 — база, прямая/диагональная раскладка, смета, PDF, нумерация плиток. Комменты были классные, фидбек пошёл сразу, и за месяц я выкатил ещё три версии. Самое заметное — ёлочка и общий план квартиры, где все комнаты лежат на одном полотне. Про это и пишу.

Хайп-цикл фронтенда, кажется, наконец-то выдохся. Мы вышли из фазы бесконечного переизобретения колеса, где каждый месяц появлялся «убийца React», и вошли в эпоху убийцы Fable инженерной зрелости. Сегодня опытного инженера сложно впечатлить очередным фреймворком: ценность сместилась в сторону предсказуемости, скорости поставки (delivery) и снижения когнитивной нагрузки.

Привет, меня зовут Павел Востриков, и я — архитектор веб-направления в «Лаборатории Касперского». В этой статье хочу разобрать JS-экосистему как набор инженерных компромиссов.

На HolyJS Spring 2026 мы предложили 120+ инженерам оценить свой реальный стек. Получившийся радар мог быть просто списком библиотек, но в итоге вышел срезом того, как выглядит рациональный подход к коду в 2026 году. Мы видим, как разработчики массово идут в сторону предсказуемой скорости масштабирования решений и инженерной гигиены.

Какое-то время назад я выкладывал статью на Хабр про свое obsidian хранилище.

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

Кроме простой структуризации и удаления лишнего, я также провел некоторые махинации над кодом dataviewjs своей библиотеки книг и доделал свою домашнюю страницу, добавив интеграцию со своей основной библиотекой и поработав на css составляющей. В общем-то были еще некоторые изменения, но об этом всем будет далее.

«Я собрал приложение за выходные». Почему вайбкодинг в проде опаснее, чем кажется.

Где заканчивается прототип и начинается инженерия, почему «работает у меня» не равно «готово для бизнеса» и за что на самом деле платят опытной команде.

Задумывались ли вы когда-нибудь о том, что на самом деле происходит под капотом, когда вы рендерите приложение React? Мы знаем, что React строит дерево DOM и отображает UI на экране, но как React конструирует это дерево и как он эффективно обновляет его при изменении состояния?

В этой статье мы рассмотрим React Fiber — основной движок согласования (reconciliation) React. Мы рассмотрим, как React строил DOM до v15, недостатки этой ранней стековой (stack) модели с точки зрения производительности и то, как асинхронная архитектура Fiber решает эти проблемы, начиная с React v16 и до React v19.

Как просьба друга «настроить кассу» закончилась open-source ERP, тринадцатью российскими интеграциями и нейросетью, которая теперь считает закупки, ищет косяки в учёте и пишет владельцу в Telegram.

Есть у меня друг. Назовём его Артём.

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

Примерно за месяц до открытия Артём пришёл ко мне с классической фразой:

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

Если вы когда-нибудь были «тем самым знакомым программистом», то примерно понимаете, чем обычно заканчивается слово «помоги». Сначала задача выглядела просто: выбрать что-нибудь вроде iiko, поставить, настроить и забыть.

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

Так в ресторане появился DeepSeek, который скоро заменит Артема, а может и всех остальных. Сам будет заказывать еду, сам кушать... ну это я отвлекся.

Сразу важный момент. Я не писал ресторанную ERP с нуля. Это был бы отличный способ потратить много времени и получить плохую кассу. Я взял готовую open-source систему и начал допиливать её под конкретный ресторан. И вот здесь всё стало интереснее.

Привет, хабр! Уже 11 лет я пилю свой игровой движок, и я готов представить его публике. Я все еще дорабатываю его, но он уже вполне стабилен и я делаю игры на нем.

Движок открытый и бесплатный, нацелен преимущественно на мобильные игры, поддерживает пачку платформ — ios, android, web, mac, windows, linux. Он компактный (всего несколько мегабайт), производительный, позволяет писать логику игры как на C++, так и на JavaScript. Внутри есть убер‑редактор для всего — вот он на скриншотике выше

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

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

Всем привет! Меня зовут Егор Савинцев, я Frontend Platform Engineer в Авито. Сейчас я работаю в команде архитектуры, а до этого в команде Phobos в рамках Платформизации переводил страницу объявления на Beduin — разрабатывал клиентскую архитектуру и переписывал блоки. 

Сразу важное отступление. 

Beduin — это Backend‑Driven UI. Если в нативе в коде клиентского приложения есть компоненты, бэкенд присылает им данные, и всё работает. В Beduin бэкенд присылает и данные, и сами компоненты в специальном виде. На клиенте у нас только рендерер — специальный компонент, который принимает JSON и рендерит то, что мы прислали. 

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

Статья будет полезна frontend‑ и mobile‑разработчикам, инженерам платформенных команд, архитекторам клиентских приложений и backend‑разработчикам, которые внедряют Backend‑Driven UI. В общем, всем, кто планирует переводить крупные экраны на BDUI и хочет заранее узнать, что может пойти не так. Спойлер: всё.

Затеял ремонт в ванной, дошёл до плитки — и тут понеслось. Санузел у меня Г‑образный, в углу венткороб, раскладку хочу диагональную, а «раздели площадь на плитку» вообще не работает, я это понял когда мои циферки не сошлись с тем что плиточник насчитал — разница набежала непонятно откуда.

Плиточник говорит — берите пятнадцать процентов запаса и всё. Пятнадцать процентов от плитки по 2000 с лишним за метр это уже сумма, я в столбик посчитал и решил что нет, надо по‑другому. Калькуляторы онлайн — площадь на цену умножают, я и сам умею. В CAD полез — там сначала модель строй, а мне не чертежи нужны были.

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

Несколько лет назад у нас с одногруппником был зачёт по C++, и вместо того чтобы сделать что-то скромное (например, «Калькулятор» или «Генератор паролей»), мы, конечно же, решили замахнуться на какую-то игру, и тогда нам попалась новость о 30-летнем юбилее игры DOOM. План был красивый, т. к. на тот момент командной работы у нас не было, мы решили, что мой одногруппник пишет псевдо-3D-движок в духе классического рейкастинга, а я делаю 2D-платформер, который в итоге должен был запускаться прямо внутри его мира, как игровой автомат, который запускался бы перед игрой, и сколько патронов ты собрал, столько у тебя и будет в игре.

Проблема появилась не в архитектуре и не в гейм-дизайне, а гораздо раньше — на этапе, который мы оба благополучно пропустили: мы не договорились, на чём пишем. Я по рекомендации преподавателя взял SFML — с ним я уже возился на парах, там всё human-readable, спрайты, окна, звук из коробки. Товарищ выбрал SDL, т. к. видел гайд про DOOM на SDL — она даёт прямой доступ к буферу пикселей, что для рейкастинга буквально то, что нужно: рисуешь вертикальные полоски стен вручную, без лишней абстракции между тобой и экраном.

По отдельности оба выбора были правильными, а вместе — нет. Слинковать в одном проекте SDL и SFML можно, но два разных event loop, два разных подхода к окну и таймингу — это уже не работа для автомата по зачёту, а отдельная курсовая работа, на которую у нас оставалось дня два-три. Мы посчитали и сдали как два независимых проекта. Препод посмотрел, оценил — и выдал ровно ту фразу, которую в такой ситуации выдал бы любой человек, который знал о проекте: «Идея классная, жалко, что не объединили», но нам это было неважно на тот момент, как говорится, зачёт получили — и на этом спасибо.

Cлучилось то, что я обычно советую не делать: я не выбрал из существующих 14 форматов, а сделал 15-й.

В первой части мы заставили кнопку на веб-странице запустить локальный exe-файл через расширение Chrome и Native Messaging Host. Теперь усложним задачу: операция длится десять секунд, сообщает прогресс и поддерживает отмену. Для этого заменим sendNativeMessage() постоянным соединением connectNative(), перепишем хост на Java 21, разберём протокол, восстановление соединения и жизненный цикл процесса, а затем соберём exe с помощью GraalVM Native Image и проверим всё в настоящем Chrome.

Инструмент: C4 QuietGridLabs. Можно открыть демо без авторизации: проект будет храниться локально в браузере.

Иногда архитектура «есть» — но пользоваться ею невозможно.

На доске лежит схема сервисов. В Confluence живёт описание. Где-то рядом — sequence-диаграмма, которую никто не открывал с прошлого года. ER-модель хранится в другом инструменте. А когда на ревью возникает простой вопрос «какой endpoint обслуживает этот путь?», команда начинает собирать ответ из памяти, догадок, выдумок, ссылок и исходников.

Я больше 15 лет работаю в ИТ, из них около десяти занимаюсь проектированием и системным дизайном. За это время перепробовал немало: Sparx, ArchiMate, Structurizr, Confluence, whiteboard-сервисы. Я не считаю их плохими — у каждого есть свой сценарий и своя аудитория. Но лично у меня постоянно оставалось ощущение разрыва: диаграмма была отдельно, документация отдельно, а живой контекст системы — в голове у людей.

В какой-то момент моими рабочими спасателями стали whiteboard и VS Code, а позже Cursor. В них можно быстро собрать мысль, оставить немного полезного творческого беспорядка и двигаться дальше. Но они не решали главную проблему: хотелось, чтобы система, её связи, сценарии и документация были одной навигационной моделью.

Так появился C4 QuietGridLabs. Это мой экспериментальный редактор, где C4-модель — это каркас проекта. К элементам можно прикреплять документацию, sequence-диаграммы, ER-диаграммы и описание API, а по связям — переходить от общего ландшафта к конкретным участникам взаимодействия.

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

Vue снова меняет способ обновления интерфейса: теперь на горизонте Vapor и рендеринг без Virtual DOM. Зачем очередная архитектурная перестройка и что не устраивает команду Vue в нынешнем подходе?

Чтобы ответить, проследим путь Vue от Object.defineProperty до Proxy  и зачем теперь понадобился Vapor. Это поможет лучше понимать поведение ref, reactive и computed, вникнуть в причины архитектурных изменений Vue и подготовиться к дальнейшим изменениям.

CSS «слушает» нас. Нет, не в буквальном смысле. Суть в том, что в CSS появляется все больше псевдоклассов, которые позволяют реагировать на события JS без необходимости писать сам JS. Формально псевдоклассы отслеживают состояния, а не события, но порой они настолько похожи на обработчики событий, что разница становится почти незаметной (хотя в контексте CSS это не так уж важно).

Привет, Хабр! (И тебе, 1С-ник, который открыл статью только чтобы убедиться, что пока точно не надо изучать новый продукт. И тебе, питонист, который сейчас будет морщиться. И тебе, мобильный разработчик, который уверен, что без Kotlin/Swift нормальное приложение не родится - держи кружку крепче.)

Эта статья будет посвящена технологии, на которой можно написать своё мобильное приложение за пару дней. И я вам на примере реализованного мною полноценного проекта логистического приложения покажу, что сейчас из себя представляет эта технология на нашей родной КИРИЛЛИЦЕ, и что на ней можно сделать прямо сейчас. И самое главное, как…

👾 ИИ Агент для скоринга торговых рекомендаций

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

В итоге оценивается не красивая лента и не заявленный win rate, а статистически проверяемое качество решений автора.