JavaScript *

От уравнений до верификации: как мы сравнивали разработанный веб-модуль для анализа потерь в НКУ (низковольтных комплектных устройствах) с нормативной базой

А можно ли рассчитать потери и нагрев шин для оценки тепловыделения в НКУ быстро, точно и прямо в браузере?

Мы решили проверить — и разработали веб-ориентированное расчётное ядро, которое затем сравнили с требованиями ГОСТ.

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

Шины, при протекании по ним тока, нагреваются из-за Джоулевых потерь, и если температура выходит за рамки нормы, последствия предсказуемы: ускоренное старение изоляции, рост потерь энергии, а в критическом сценарии — перегрев и выход из строя оборудования.

На практике инженеры часто оказываются перед выбором:

Нормативные таблицы — надёжно и консервативно;

Дорогие CAE-пакеты (COMSOL, ANSYS) — сложно, точность требует времени и бюджета;

Упрощённые ручные расчёты — быстро, но менее точно.

А что, если объединить скорость, точность и прозрачность в одном веб-инструменте?

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

Привет!

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

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

📺 Плейлист по отладке Next.js с Sentry.

🤖 Рэйчел Эндрю и Эдди Османи — два взгляда на AI: когда использовать, а когда координировать целый оркестр агентов.

🛡️ GlassWorm: атака через невидимые Unicode-символы в npm-пакетах и расширениях VS Code.

🎨 CSS Anchor Positioning: два круга, стрелка и ноль строк JS от Темани Афифа.

⚛️ Storybook MCP для React, data-testid как признак недоступности и пошаговые туры через React Joyride.

👁️ Vue Devtools не работает в продакшене? QA-инженер написал свой инспектор.

🌎 Chrome 147 с scoped view transitions, Safari TP 240 и дайджест веб-платформы за март.

🖌️ Осмысленное трение в UX, ARIA-роли для дизайнеров и тест масштабирования шрифтов в Figma.

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

Привет, Хабр. Расскажу, как устроен мой сайд-проект — пиксельная аркада Прикольня, где у каждой компании друзей своя 3D-квартира с мебелью, аватарами и контентом на стенах. Под капотом — Next.js 16, Three.js через React Three Fiber, WebSocket-мультиплеер и PWA. Без единого .glTF файла — вся мебель процедурная.

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

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

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

31 марта из npm source maps утёк исходный код Claude Code. Через часы появился OpenClaude — форк с OpenAI-совместимым шимом, который позволяет подключить GPT-4o, DeepSeek, Llama через Ollama или любую модель. Разбираю, как это устроено, что реально работает, что нет, и почему «бесплатный Claude Code» — не совсем то, чем кажется.

Привет! Я Никита, Staff-инженер в крупном финтехе. В этой статье я хочу поделиться нашим опытом построения системы observability. Мы прошли путь от простых логов до сквозной трассировки, и я покажу, как это работает на фронтенде.

TL;DR: В статье разбираем опыт внедрения OpenTelemetry в крупном финтех-проекте.
Проблема: Логи без контекста не позволяют быстро найти причину 500-й ошибки в распределенной системе.
Решение: Сквозная трассировка (Distributed Tracing) от фронтенда до бэкенда.
Что внутри: Реализация CompositeLogger на TypeScript, патчинг fetch для сохранения контекста и примеры того, как превратить технические трейсы в карту бизнес-процесса. А именно - frontend реализация и практические детали интеграции.

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

В экосистеме JavaScript произошёл серьёзный инцидент, который хорошо показывает, насколько опасными стали атаки на open source и цепочки поставок. Исследователи StepSecurity сообщили о компрометации axios — одной из самых популярных HTTP-библиотек в npm (~83 миллионов загрузок в неделю). Злоумышленник получил доступ к аккаунту одного из ведущих мейнтейнеров проекта и опубликовал две вредоносные версии пакета: axios@1.14.1 и axios@0.30.4.

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

Знакомая ситуация? Вы открываете файл контроллера на 2000 строк. Там перемешаны SQL-запросы, HTML-разметка, бизнес-логика и комментарии на ломаном английском. В голове начинает играть тревожная музыка, а внутренний голос шепчет: “Закрой это немедленно, пока оно не сломалось”.

В психологии это называется “когнитивная перегрузка”. Мозг просто отказывается парсить такое количество переменных одновременно. Раньше программистам приходилось часами медитировать над распечатками кода, как сыщикам, пытаясь прокачать навык “Внутренняя империя”.

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

Здесь мы разберем 6 фундаментальных паттернов промптинга, которые вытащат вас из любой ямы.

BIP39 вместо номера телефона, ECDH P-256 + AES-256-GCM, non-extractable CryptoKey, трафик неотличимый от HTTPS. Как это устроено, что сломалось в процессе и почему некоторые решения были болезненными.

Мне нравится писать тесты. Написание теста и последующее обновление кода для его прохождения — всегда увлекательный процесс.

Но нет ничего хуже, чем выяснение того, что проверяют существующие тесты (раньше я сам часто был автором таких тестов).

Представляю вашему вниманию мои советы по написанию высококачественных тестов для фронтенда.

Хотите OpenClaw на русском? Официальной локализации нет и не планируется. Я написал перевод OpenClaw на русский через reverse proxy — прослойка инжектит JS-оверлей в HTML, переводит интерфейс через MutationObserver и не трогает ни строчки в исходниках. Обновления OpenClaw не ломают перевод. Рассказываю архитектуру, код и грабли.

Решил написать продолжение к предыдущей моей статье Операционная система Анна. Назвал "операционной системой" скорее как отсылку к фильму "Она" (Her) - понимаю, что это, конечно, не ОС в классическом смысле, так что прошу воспринимать это как художественное название, а не технический термин. Ну и вот недавно моя жена затеяла вести расходы в Google Sheets. Увидел её мучения о том, как создать формулы, листы и т. д. В итоге ей посоветовал поставить Анну на её домашний компьютер. При установке она настроила интеграцию с Google Sheets. Потом я ей посоветовал попросить Анну сделать следующее:

Как-то я вспоминал, как будучи школьником мы частенько собирались, чтобы поиграть в третьих героев. Как вы понимаете, ни одна из этих партий не только не доводилась до конца (про это будет картинка в статье), но и даже не доходила до битвы между игроками-человеками. И тогда ко мне пришла идея реализовать сетевой вариант игры по мотивам героев. Изначально задумка была сделать что-то типа Kings Bounty: у игрока один герой, он ходит по карте, подбирает сундуки, нанимает отряды и, наконец, находит другого игрока на карте и бьётся с ним. А потом я подумал, ведь самое интересное в героях – это тактические бои, почему бы сразу не предоставить игроку армию? Ведь на шахматных серверах людей не заставляют добывать фигуры, а сразу выдают полный комплект! Мне кажется, что в подобных проектах самая трудоемкая часть – это графика и графический движок. Поэтому я начал работу именно с этой части, а в статье расскажу про текущее состояние и немного моментов разработки.

Когда говорят «React перерендерился» — обычно имеют в виду что-то расплывчатое. Новичкам это слово объясняет всё и ничего одновременно. В официальной документации процесс описан точнее: trigger → render → commit. Давайте разберём, что происходит на каждом этапе — без магии, зато с Fiber, флагами и браузерным пайплайном.

Когда разработчик приходит в Next.js из обычного React SPA, он часто тащит с собой старую схему мышления. Есть поле ввода, значит будет useState. Есть поиск, значит будет useEffect. Есть список данных, значит будем следить за изменением состояния и вручную запускать новый запрос.

На маленьком экране это вроде работает. Но очень быстро выясняется, что в приложении уже не одно состояние, а три. Есть значение в поле, значение в URL, данные, загруженные по одному из этих значений. Потом появляется четвёртая проблема. Кнопки Back и Forward начинают вести себя странно. Ссылкой на результат поиска неудобно делиться. А отладка превращается в угадайку, потому что не до конца понятно, что именно сейчас считается главным источником правды.

В App Router это решается проще. Если фильтр является частью состояния страницы, его логично держать в URL. Тогда схема становится прямой: URL изменился -> сервер прочитал searchParams -> выполнил fetch -> отрендерил новый список. В этот момент Next.js начинает восприниматься как понятный инженерный инструмент.

Я периодически провожу технические интервью и смотрю pet-проекты кандидатов.

И почти всегда вижу одну и ту же картину:

Используется localStorage или заглушки вроде jsonplaceholder.

Я прекрасно понимаю, почему так происходит:

Всем привет!

Меня зовут Михаил Витик, я работаю в Лемана Тех техлидом в сервисной команде, которая поддерживает команды разработки сайта Лемана ПРО.

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

Эта задача и привела меня к идеям автоматической миграции, codemod‑трансформеров и использованию ИИ. В этой статье подробно расскажу о практическом опыте разработки автоматического мигратора кода на примере миграции с Linaria — CSS‑in‑JS решения — на CSS Modules.

Привет!

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

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

📺 TanStack AI генерирует картинки, а не только чат-ботов.

🤖 Почему ИИ выдаёт глупый код — и трёхуровневая архитектура, которая это исправляет.

🎨 Математическая модель masonry-раскладки на Flexbox — с алгеброй, а не «работающим примером».

⚡ TypeScript 6.0, обновления безопасности Node.js, петиция против AI-кода в ядре Node.js и Kafka из Node.js по-взрослому.

⚛️ TanStack улучшил пропускную способность SSR в 5 раз, а Strawberry Browser переписал 130 000 строк с React на Svelte за две недели.

🅰️ Angular выпустила официальные скиллы для AI-агентов.

💚 Компоненты визуализации звука для Vue.js на Web Audio API.

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

Открыл Postman, потыкал эндпоинты, всё ответило 200 — вряд-ли хорошее тестирование Разбираю что на самом деле нужно проверять в API, показываю примеры на Postman и Jest, и даю чеклист который можно взять и использовать прямо сейчас.