JavaScript *

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

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

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

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

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

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 для нескольких продуктовых команд и думают, как провести редизайн без поломки потребителей. Внутри — код, архитектурные решения, компромиссы и честные выводы по итогам миграции.

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

Современные фронтенд-приложения постоянно взаимодействуют с файлами.

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

Но именно здесь начинаются настоящие проблемы.

В августе 2025 года TypeScript впервые возглавил рейтинг GitHub по числу активных контрибьюторов, обойдя Python и JavaScript. Изменился подход к написанию кода: типы стали машиночитаемыми контрактами, фреймворки сделали TS вариантом по умолчанию, а ИИ-инструменты используют типы как ограничения. Разбираемся, какие цифры подтверждают тренд, где он создаёт издержки и как выбирать стек в 2026 году с учётом изменений рынка.

Небольшой R&D о современных альтернативах Electron для десктоп‑приложений на веб‑технологиях. На одинаковом тестовом приложении (React + TypeScript + Vite) сравниваются ElectroBun, NeutralinoJS и Wails: как устроена их архитектура, каким образом они взаимодействуют с ОС, что происходит под капотом и почему результаты по памяти так сильно отличаются. В статье есть практические наблюдения, замеры потребления ОЗУ, плюсы и минусы каждого подхода, а также рекомендации, в каких сценариях выбирать минималистичный WebView‑подход, полноценный backend на Go или браузерный рантайм с максимально широкой поддержкой Web API и графики.

Баннер с запросом согласия на cookie есть почти на каждом сайте. Но часто он существует «для галочки» — данные в аналитику улетают сразу при загрузке страницы, независимо от того, что выбрал пользователь. И если раньше это была просто недоработка, то с 1 сентября прошлого года в 152-ФЗ (Федеральный закон «О персональных данных») был внесен ряд изменений, в том числе, появились новые требования к оформлению согласия на обработку персональных данных. Во-первых, оно должно быть получено в явном виде, а во-вторых, существенно вырос штраф за несоблюдение этого пункта. Компаниям было дано время на устранение несоответствий закону, а со второй половины этого года должны начаться массовые проверки того, как компании собирают и хранят персональные данные. Так что если вы до сих пор не привели эту часть вашего сайта в порядок — сейчас самое время этим заняться.

Разберемся с этими настройками на примере нашего сайта cleverdata.ru: если ничего не делать/использовать дефолтные настройки/использовать стандартный набор Tilda с Яндекс метрикой, то ... баннер отображается, но Яндекс.Метрика загружается и собирает данные ещё до того, как пользователь успевал нажать хоть какую-то кнопку. Конечно, такие настройки использовать нельзя — это нарушает требования 152-ФЗ и GDPR, которые обязывают получить явное согласие пользователя до начала сбора данных. И мы так, естественно, не делаем. А можно ли как-то исправить эту ситуацию? – Можно!

Привет, я Анна Таюрская, инженер технической поддержки (L1) компании CleverData. Я знаю, как решить эту проблему.

Как выкатить собственный движок JavaScript

Привет, Хаброжители! Мы подготовили для вас перевод статьи, в которой автор делится опытом создания собственного движка JavaScript с нуля.

Автор на языке Go с нуля создаёт простой движок JavaScript. В статье пошагово разобраны ключевые этапы: от лексического анализа и построения AST до реализации вычислителя и встроенных функций (print, fetch, JSON). Отличный материал, чтобы понять, как код на JS превращается в работающие инструкции.

В прошлой статье про ГИГАХРУЩ мы показали игру как живой weird-проект: браузерный survival horror / ARPG без движка, ассетов и спокойной жизни.

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

Разберем, как ГИГАХРУЩ устроен под бетоном: один активный клеточный этаж, typed arrays, плоские сущности, WebGL raycasting, A-Life, самосбор как мутация мира, сохранение, ограничения и MESH PASS как render-only объем поверх клеточной симуляции.

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

За 6 месяцев ежедневной работы с Claude Code я выработал 10 конфигов. Без них теряю по 10-15 часов в месяц на исправление того, что агент сделал не так. С ними ощутимо меньше. Это не туториал «что такое Claude Code». Это конфиги для тех, кто уже работает с инструментом и хочет выжать из него больше. Готовые конфиги в конце каждого раздела, копируйте сразу.

Компании уже оплачивают сотрудникам Claude Code, Cursor или Codex, но не всегда видят рост производительности.

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

Разбираю, зачем команде общая память, и при чём тут GBrain, OpenBrain и обычные Markdown-файлы.

Привет!

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

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

📺 Страница отрисована, а интерфейс всё ещё «оживает»: отложенная гидратация в TanStack Start на карусели Jack Herrington и подкаст с Андерсом Хейлсбергом — от Turbo Pascal до того, как ИИ меняет ремесло, когда код пишут не построчно — чтобы понять, где теряется скорость и куда движется разработка.

🤖 Половина кода уже с ИИ, а доверия меньше: опрос State of AI 2026 (54% сгенерированного кода), Яндекс и тысячи конфликтов при мерже Chromium, перцептрон 1959 года и «чтение мыслей» модели Anthropic — чтобы смотреть на внедрение ИИ цифрами и без иллюзий.

🛡️ Пустили агента в репозиторий — а что он может сломать: разбор Positive Technologies и история, когда ИИ «находит» CVE, который уже был в обучающих данных — чтобы не открывать доступ вслепую.

💫 Анимация замирает вместе с React: управление бесконечными CSS-циклами без прыжков и сравнение CSS, Motion и GSAP на главном потоке — чтобы интерфейс оставался плавным без лишнего JavaScript.

⚡ Нужна коллаборация как в Figma и Miro: Hocuspocus от Tiptap на Y.js и CRDT без гонок правок — WebSocket, офлайн и Redis — чтобы собрать совместное редактирование в своём редакторе без тяжёлого бэкенда.

⚡ Поиск раздувают до эмбеддингов и LLM: Fuse.js ~6 КБ с нечётким поиском, кириллицей и Web Workers в 7.4.0 — чтобы находить по списку в браузере без сервера и векторной базы.

⚡ TypeScript кажется очевидным, пока не упёрлись в типы: 15 коротких приёмов от Matt Smith — satisfies, проверка «все варианты учтены», строгий режим — чтобы писать безопаснее и без лишних аннотаций.

⚛️ React-шаблон на 35 000 звёзд без хаоса в репозитории: разбор Bulletproof React на Habr и MUI X 9.3 — чтобы взять проверенную архитектуру и не собирать стек с нуля.

🔥 Ember 7.0 без сюрпризов при мажоре: в основном сняли устаревшее, путь через 6.12 и Vite по умолчанию — чтобы обновиться без лотереи.

🅰️ Angular 22 меняет правила игры: OnPush по умолчанию, signal forms и инструменты для агентов в API — чтобы заложить новый проект на актуальных примитивах, а не по инерции.

𝐒 Svelte: $state.eager и pending больше не рвут зависимости, батчи идут связным списком — чтобы асинхронный UI вёл себя предсказуемо после обновления.

📦 Solid 2 в бета-версии, звонки WebRTC в production и шрифтовые иски на 15,3 млн ₽: асинхронность как примитив, грабли CallKit и SFU, PHP-парсер для проверки сайта — чтобы не удивляться ни релизу, ни иску.

🌎 Браузер снова забирает вёрстку у хаков: column-rule и row-rule в зазорах grid/flex и HTML внутри canvas за флагом — чтобы меньше DOM-обходов и проще UI поверх 3D.

🌐 Стандарты без костылей: сравнение объектов по значению (Composites в TC39) и элемент <install> для PWA без своего JavaScript — чтобы меньше полагаться на ссылки и самописные кнопки установки.

🛠️ Агенты под контролем: statewright с фазами и лимитами, свой Claude Code за вечер на DeepSeek и экспериментальный агент доступности GitHub н

Как обычно в начале месяца мы рассказываем вам о том, что изменилось в GigaIDE за прошедший месяц — май. Соответствующий обзор за апрель доступен здесь. Ниже — краткий обзор обновлений Pro-функциональности GigaIDE, который можно найти на нашем маркетплейсе.

Привет, Хабр!

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

В этой статье я хочу поделиться своими мыслями о MobX - инструменте, который я искренне полюбил после многих лет разработки интерфейсов. Приятного чтения! :)

Как я собираю ГИГАХРУЩ: survival horror / ARPG в браузере без Unity, Phaser и ассет‑пайплайна. WebGL/canvas raycasting, procedural textures/sprites/sound, A‑Life, самосбор как мутация мира и миллиарды LLM‑токенов, которые всё равно не компилируются.

Локальные LLM сейчас — это действительно мощный инструмент. Они уже вплотную приблизились к проприетарным моделям вроде Claude, особенно в задачах кодинга. Я сам активно использую локальные модели для разработки на TypeScript и Go.

На данный момент самая интересная модель для моего стека — Qwen3.6-27B. Но один только выбор хорошей модели ничего не гарантирует. Без правильных параметров вы не получите ни скорости, ни качества.

В этой статье я расскажу, с какими конкретно параметрами запускаю Qwen3.6-27B в llama.cpp (мой текущий фаворит среди бэкендов), какие метрики считаю важными, и как нашел баланс между скоростью, стабильностью и качеством.

Многие гонятся за чистой скоростью генерации токенов, но я считаю, что приоритеты должны быть другими:

Каждый, кто пишет на TypeScript хотя бы пару лет, отлично знаком со стандартным DI-сценарием: класс, декоратор @Injectable(), флаг emitDecoratorMetadata в конфиге и рантайм-магия фреймворка. Этот подход казался прорывным в 2015 году, но современный TypeScript ушел далеко вперед. У нас появились мощнейший статический анализ и продвинутый вывод типов, в то время как популярные DI-контейнеры вроде NestJS, InversifyJS или TSyringe будто законсервировались в прошлом.

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

Но что, если заставить компилятор TypeScript проверять валидность всего графа зависимостей еще до запуска кода? Без декораторов, reflect-metadata, кастомных трансформеров и тяжелой кодогенерации.

В этой статье мы разберем концепцию «экстремальной типизации» на примере InferDI — первого DI-контейнера, где сам граф зависимостей вместе с lifetime-правилами перенесен напрямую в систему типов. Мы поговорим о фундаментальных вещах: почему полный отказ от «удобной» магии аннотаций в пользу 100% ванильного TypeScript — это лучшая инвестиция в архитектуру, безопасность, скорость сборки и долговечность вашего проекта на годы вперед.