Обновить
256K+

JavaScript *

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

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

Платформер в стиле DOOM: портируем старую курсовую на чистый JavaScript

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

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

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

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

Читать далее

Новости

React Native в 2026 году: New Architecture, нативный код и AI в реальном проекте

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

React Native по-прежнему часто описывают формулой «один код для iOS и Android». В 2026 году она звучит слишком просто. Современное приложение на React Native — это общий продуктовый слой на TypeScript, нативный интерфейс, Hermes, Fabric, JSI, фоновые процессы, platform-specific код и довольно много решений о том, где именно должна выполняться каждая задача.

Мы столкнулись с этим в Synchra.24 — мобильном приложении для линейных и распределённых команд. В проекте больше тысячи TS/TSX-файлов и свыше ста экранов, но рядом с ними живут Kotlin и Swift: геопозиция, push-уведомления, биометрия, системные виджеты и работа с медиа. Это не история о функциях нашего продукта и не попытка его рекламировать. Это разбор того, чем на практике стала разработка на React Native к 2026 году — и какую часть этой работы действительно можно поручить нейросетям.

Читать далее

Shadow AI — почему инженеры скрывают, что пользуются ИИ

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

Слушал подкаст Code of Leadership, выпуск про AI-assisted engineering. Полтора часа про то, как правильно встроить ИИ в разработку: копайлоты, MCP, метрики, место ИИ в SDLC. Разговор хороший, по делу. И где-то в середине проскочил термин, за который я зацепился и с которым хожу уже неделю — shadow AI. Проскочил сноской, в ряду прочих ИБ-рисков, между утечками и комплаенсом.

А я на этой сноске завис. Потому что мне кажется, что она интереснее основного разговора...

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

От одного npm‑пакета к кластеру Contagious Interview: практическое расследование supply chain‑кампании

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

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

На этот раз первым сигналом стал мой собственный supply chain‑мониторинг. Он сообщил о новом npm‑пакете plugin-react-vite. На первый взгляд это выглядело как очередной тайпсквоттинг - ничего особенно необычного.

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

В результате расследование ушло далеко за пределы одного package.json: от подозрительной зависимости я пришел к второму этапу размером около 30 тысяч строк, а затем - к нескольким месяцам активности, связанным пакетам, нескольким npm‑аккаунтам и уже известному кластеру.

Именно этот путь я и хочу разобрать.

Погрузиться в расследование

Психанул: как я за полтора месяца сделал формат конфигов и парсеры для семи языков

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

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

Читать далее

Думал, Android пишет двигатель хуже iOS. Передумал. Потом оказалось, что прав, но по своему

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

Полторы тысячи записей моторов с телефонов. Виноват был не бренд и не цена телефона, а то, чей DSP отрабатывает запрос браузера.

На iOS та же правка сработала наоборот.

Вскрытие ноу‑код сметы за 500$ или как купить «АИ — ассистента» который сожрёт весь бюджет заказчика

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

Привет, Хабр! Я разработчик из Минска (работаю официально, в статусе НПД). Занимаюсь автоматизацией на связке Self‑Hosted n8n + Redis. Внедряю автономных ИИ‑агентов для мессенджеров и связываю их с amoCRM.

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

Перед началом сразу обозначу, как говориться, на берегу: во‑первых — это не хейт и не попытка кого‑то «разоблачить». Ленты мессенджеров завалены рекламой от «ИИ‑агентств» и «продавцов успешного‑успеха», которые громко кричат про «...ваш цифровых сотрудников за пару дней...». У меня нет раскрученного профиля с красивыми публикациями, но, есть обычная практика. Данный разбор — это попытка показать (а может кому‑то и знакомо), что скрывается за красивыми нагенерированными видосами и контентом и почему, доверив реальный проект таким «спецам» обойдётся дорого. Во‑вторых — все упоминания брендов и платформ в статье — не реклама и не антиреклама. Названия систем я оставил исключительно ради сохранения контекста, да и в принципе живого отражения примера.

История статьи началась, наверное можно сказать в 2 этапа. На первом этапе, который был ещё наверное в марте этого года, ко мне обратился заказчик с интересным ТЗ: стек Instagram+ amoCRM + Google Sheets при плотном трафике до 5000 диалогов в месяц (таргет что тогда, что по сей день заходит «на ура»). Причём сёстры (заказчик — это семейный бренд ателье дизайнерских украшений) своими силами опробовали «...платформы где платишь подписку и в соответсвии с трафиком выбираешь соответствующий пакет услуг. Итог в который после первого дня триала по самым средним подсчётам вышел бы 1100$ в месяц расхода (!). Поскольку моя статья не о том какая архитектура была в итоге у них развёрнута, так что пойдём дальше.»

Читать далее

GridStack: цена выбора API для nested grids

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

Реальный кейс с nested grids в GridStack:

— почему подход на addGrid() привёл к ручной синхронизации DnD, проблемам с lifecycle и множеству фиксов;

— как переход на subGridOpts упростил архитектуру и сделал поведение стабильным.

Читать далее

Страница, которая не моргает: SPA-роутинг для HTML и Web Components

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

Фреймворки дают клиентский роутинг из коробки. У HTML и Web Components его нет. Если сайт уже отдаёт полные страницы, а клиентская навигация нужна только для части разделов, переписывать всё на фреймворк незачем.

Aura Router решает эту задачу, сохраняя HTML исходной точкой: маршруты объявляются как Custom Elements, а ссылки остаются обычными <a href>. Без JavaScript те же URL открываются как обычные страницы.

В статье соберём минимальный сайт из двух страниц и проверим прямой заход по URL, клиентскую навигацию и работу ссылок без JavaScript.

Читать далее

От клика до железа: хроника одного запроса. Часть 2

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

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

Читать вторую часть

Tinted — то, из‑за чего ты захочешь использовать терминал

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

Всем привет! Меня зовут Илья, я frontend‑разработчик.
Но сегодня хочу поговорить не о JavaScript, а о терминале.

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

Обычно мысли о терминале вызывают ступор. Кажется, что это что‑то непонятное, черно‑зеленое и предназначенное только для «настоящих программистов», и на практике большинство ограничивается npm run dev, git status и на этом все.

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

Сразу оговорюсь: речь пойдет исключительно о терминале, а не о NeoVim.
NeoVim — это отдельная большая тема.

Читать далее

Как я ускорил TypeScript-типы в 15.7 раза

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

Иногда TypeScript думает мучительно долго. У меня это вылезло не самым приятным способом: @_chenglou — он работал над React, ReasonML и ReScript, а сейчас над Midjourney — завёл в моей библиотеке схем issue «Large TS types cause type inference slowdown».

Ну… неприятно. Но я знал, что в системе типов TS люди собирали и не такое, вплоть до Doom, — значит, тормоза лечатся, а не заложены в фундамент.

Дальше всё оказалось довольно механически. Сначала тесты на типы, чтобы ничего не сломать молча: оптимизация типов легко превращает { a: string } в { a?: string }, и никто вам об этом не сообщит. Потом замеры через @ark/attest от создателей ArkType — он считает, во сколько инстанцирований типов обходится выражение, и фиксирует это как бейзлайн, который дальше можно занести в CI. И только после этого — сама оптимизация.

Фикс в итоге оказался на одну строчку. S.Output матчился по всему типу Schema<…> — большому объекту с перегрузками, пересечённому с юнионом всех вариантов схемы, — хотя готовый тип всё это время лежал в соседнем поле ~standard. Достаточно было заглянуть сразу туда.

Извлечение типа стало дешевле в 15.7 раза и перестало зависеть от размера схемы. В статье — таблица со всеми замерами до и после, код тестов и бенчмарков и рецепт, который можно применить к своему проекту.

Читать далее

Когда setState недостаточно: как я написал транзакционный стейт-менеджер на TypeScript

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

Стейт-менеджеров в JavaScript уже столько, что идея написать ещё один выглядит немного сомнительно. Есть Redux Toolkit, Zustand, MobX, Jotai, XState и десятки менее известных библиотек. Почти для любого способа хранить состояние уже существует готовое решение. Но все же в качестве эксперимента, решил реализовать свою идею.

Читать далее

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

TRON, Aptos и BSC в одной цепочке заражения: расследование JavaScript-загрузчика, связанного с ChainVeil

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

Что произойдет, если AI-агент порекомендует пользователю заражённый репозиторий? Именно так началось это расследование: от одного срабатывания Kaspersky до многоступенчатого JavaScript-загрузчика, использующего TRON, Aptos и BSC для доставки RAT.

Погрузиться в расследование

Часть 1. Как я делаю backend для браузерной игры три в ряд: server-driven контент, транзакции и идемпотентность

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

Часть 1. Как я делаю backend для браузерной игры три в ряд: server-driven персонажи и способности, общий контракт клиента и сервера, версионирование контента, транзакции, идемпотентность и админка.

Читать далее

Смена типа в объекте тоже не бесплатна

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

В прошлой статье про объекты и скорость доступа к известному полю я рассказал про hidden classes, inline cache и форму объекта. Практический совет там был простой: если поле опциональное, создай его сразу и положи null. Тогда экземпляры сохранят одинаковую форму.

Совет рабочий, но неполный. Форма объекта у V8 может остаться прежней, а вот внутренний контракт хранения поля может измениться. Если горячая функция успела прогреться под старый контракт, V8 пометит её на деоптимизацию.

Напомню, что для обычного CRUD это не повод выбрасывать null из модели и бежать переписывать все. Но вот для систем с путями по которым проходят десятки тысяч однотипных объектов в секунду, полезно знать вторую половину механики.

Какой такой контракт?

Как я перестал разрывать архитектуру на десяток документов — и сделал свой C4-редактор

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

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

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

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

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

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

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

Читать далее

Astryx: дизайн-система, которой может пользоваться AI-агент

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

В прошлой статье про StyleX я разбирал, почему компилируемый CSS выглядит логичным продолжением ветки CSS-in-JS. Одно из главных свойств StyleX для меня — предсказуемость: стили описываются в ограниченной форме, которую можно анализировать ещё до запуска приложения.

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

Теперь Meta открыла Astryx — дизайн-систему, построенную на React и StyleX. На первый взгляд это выглядит как релиз большой библиотеки: больше 170 компонентов, темы, тёмный режим, шаблоны, CLI, всё как мы любим. Но количество компонентов здесь не самое интересное. Astryx стоит рассматривать как следующий шаг после StyleX: если StyleX делает предсказуемыми стили, то Astryx пытается сделать предсказуемой работу с интерфейсом целиком — и для человека, и для AI-агента.

Читать далее

Encode, don't stringify — как JSON.stringify вам врёт

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

Помните, как лет 5–7 назад все сидели на Yup или Ajv и всех всё устраивало? Признаю, половину интернета устраивает до сих пор 🫡

Потом появилось «Parse, don’t validate», стало настольной книгой для кучи разработчиков и в итоге выстрелило и у нас, в JavaScript и TypeScript. Тысячи библиотек со схемами — лучшее тому подтверждение 😁

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

Читать далее

Use-As-Dictionary: как мы перестали отдавать один и тот же бандл по пять раз в день

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

У нас в среднем два релиза в день, бандл весит 7,76 МиБ после brotli, и половина клиентов качает его заново по несколько раз в сутки: хеш в имени файла поменялся - значит, кеш мимо. Compression Dictionary Transport (RFC 9842) позволяет объявить вчерашнюю сборку словарём для сегодняшней, и вместо 7,76 МиБ уезжает 15 КБ.

Рассказываю, что из этого работает на практике при непрерывной поставке: почему дельты только к предыдущей сборке хватает лишь на 43% визитов, как считать окно словарей по своим логам, как отдавать дельты из nginx без reload на каждый релиз, и что ломается на откатах, канарейках и бампах зависимостей. Все цифры - с нашего портала, методика в конце.

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