JavaScript *

Речь пойдёт о реализации реакции веб-интерфейса на наклон устройства, смещение бликов, теней, для придания ему таким образом интерактивности и объёма.

Device Orientation API существует уже давно. Мобильные устройства с гироскопом стали пожалуй основным окном для приложений и сайтов. Всевозможные эффекты "блеска" / градиентов в дизайне встречаются регулярно, тренд на эмоциональный дизайн и кажется пора это всё объединить!
И ведь Apple выкатили эту фишку в liquid glass! Но... лично по моему мнению, как-то не "дожали" или она померкла на фоне других нововведений... а жаль, я считаю реакцию ui на положение устройства гораздо более перспективной темой чем новая прозрачность с крутой физикой преломлений которую тут же все побежали повторять. В отличии от преломления фона, адекватная реакция на наклон устройства это не графон ради графона, а микро‑взаимодействие дающее ощущение контроля, отзывчивости, даже "живости" интерфейса. Ведь даже если пользователь не тапает по экрану - он очень даже взаимодействует с интерфейсом(смотрит/читает) и слегка "покачивает" телефон в руке, и UI на эти микродвижения уже чуть-чуть отвечает, маленькая физика (свет/тень/глубина), как будто элементы не нарисованы, а существуют как объекты... Ну это моё субъективное восприятие... тут есть похожие мысли про роль микровзаимодействий и баланс эмоций.
Знаю что некоторых людей "лишние" анимации наоборот нервируют, или даже "укачивают", чтож... прекрасно что для них есть опция reduce-motion, для меня такой замечательной обратной опции "сделать красиво" нет )))
Если всё ещё не понятно о чём я, можете глянуть это видео:

Как правильно называть маршруты в Vue Router: два простых правила, которые спасут ваш проект:

1. Первое правило: всегда задавайте name

2. Второе правило: храните имена в enum (или константном объекте)

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

Создать расширение, которое отрезает этот хвост с помощью регулярного выражения — задача на 10 минут. Но сделать так, чтобы это расширение не сломало работу сайтов, не убило поисковики и не вызвало бесконечные циклы переадресации в современных реалиях Manifest V3 — уже интереснее.

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

На дворе 2026-й, и за это время как React, так и Vue сделали гигантский скачок в развитии и создании экосистемы вокруг себя. Но статистика до сих пор беспощадна к Vue. На React в два раза больше вакансий, чем на Vue. Сколько я ни спрашивал React-инженеров, ответ был всегда один и тот же: «React для серьезных проектов, а Vue так уж».. Серьезно? Почему вы до сих пор так думаете?? Ну хоть один пример приведите, что нельзя сделать во Vue. Хотя бы потратьте 1 день на изучение экосистемы Vue 3 Composition API, Vue Router, Pinia - да вы после этого забудете про свой React. А про различные useState я вообще молчу, Vue тут вообще вас всех обошел с обычными ref. Это вы еще не слышали про keep-alive.

Я считаю, что такое мнение построилось из-за простой причины: люди просто поставили свою карьеру на React, вот почему они его защищают, а компании продолжают его использовать.

Если кратко - да все с ними ТАК. Это замечательный набор современных браузерных технологий, для решения реальных задач веб-разработки. Веб-компоненты позволяют делать очень многое, более просто и элегантно, чем это было бы без них. А главное, они позволяют, с потрясающей гибкостью, решать задачи “со звездочкой” - те, которые немного выходят за рамки и требуют более творческого подхода от разработчика.

Почему-же тогда по Хабру гуляют, кхм… некие одиозные личности (не будем показывать пальцем) и рассказывают нам про то, что веб-компоненты это ужас-ужас и полный провал? Давайте разберемся.

Предлагаю открыть портал в ад и задать вопрос, который сейчас, кажется, витает в воздухе у всех, кто связан с разработкой: фронтенд вообще еще жив? Или логичнее уже сейчас срочно переучиваться, пока через пару лет не пришлось делать это в панике?

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

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

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

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

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

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

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

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

Дорогие 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: у игрока один герой, он ходит по карте, подбирает сундуки, нанимает отряды и, наконец, находит другого игрока на карте и бьётся с ним. А потом я подумал, ведь самое интересное в героях – это тактические бои, почему бы сразу не предоставить игроку армию? Ведь на шахматных серверах людей не заставляют добывать фигуры, а сразу выдают полный комплект! Мне кажется, что в подобных проектах самая трудоемкая часть – это графика и графический движок. Поэтому я начал работу именно с этой части, а в статье расскажу про текущее состояние и немного моментов разработки.