JavaScript *

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

Немного о проекте

Проект представляет собой распределенную систему, состоящую из двух web-порталов на React, порядка двадцати микросервисов на .NET и нескольких интеграций со сторонними системами. Все компоненты участвуют в одном сквозном бизнес-процессе, а релизы выходят регулярно — в среднем раз в две недели.

QA-инженер подключился к проекту уже после начала активной разработки. В этот момент мы осознанно отказались от наращивания объемной ручной тестовой документации и сделали ставку на E2E-автотесты.

Почему Е2Е?

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

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

Привет!

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

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

Медиа · TanStack Router и маршрутизация в React · Pinia и будущее Vue (Эдуардо Сан Мартин)

AI · Агентное будущее Next.js · AGENTS.md по-новому (Эдди Османи) · Вайб-кодинг и ценность кода (Маттео Коллина) · Таймлайн LLM за 10 лет

Безопасность и браузеры · OWASP для агентных приложений (Auth0) · Firefox 148 setHTML() вместо innerHTML · CSS corner-shape в Blink (Chrome)

CSS · Псевдокласс :near() · Смерть скролл-фейду (Крис Койер) · x86 на чистом CSS/HTML

JS/TS · Зелёный дизайн интерфейсов (Смэшинг) · Полифил switch · TypeScript v6 beta · TSSLint v3 · Асинхронные паттерны

A11y · .visually-hidden в 2026 (Дэвид Бушелл)

Фреймворки · React: React Doctor, SVAR Gantt, когда RSC тормозит · Angular: PrimeNG 19→21, Taiga UI CDK v4.72 · Vue: Nuxt на русском, VueUse

Разное и 3D · Ностальгия по вебу 90-х · Штраф Amazon 2,5 млрд за тёмные паттерны · WebGL composite (Three.js) · voxCSS и Mahjong

Представим ситуацию: идет тяжёлый спринт, вы выполнили кучу задач, написали тонну нового функционала, готовитесь к релизу и вдруг обнаруживайте, что часть фич перестала работать! Идёте разбираться и обнаруживайте, что оказывается бэкендер Вася в последний момент решил переименовать поля в json-е, а вам об этом не сказал!

Ситуация образная, но позволяет быстро обрисовать одну из болей во время разработки. В этой статье я бы хотел рассказать об одном из вариантов её решения в коде с помощью подхода Единого источника истины(Single source of truth).

Привет, Хабр! Меня зовут Василий Беляев. Я руководитель группы разработки по направлению фронтенда в ИТ-компании «Криптонит». В этой статье хочу поделиться опытом и рассказать об оптимизации библиотек: о том, с какими проблемами мы столкнулись, и как их пошагово решили.

Для начала кратко опишу фронтовый стек у нас в «Криптоните»: мы те ребята, которые не пишут на React. У нас все проекты и библиотеки написаны на Vue + Composition API. Из дополнительных инструментов мы используем следующие:

Многие привыкли считать, что VS Code — это просто текстовый редактор. Но «под капотом» у нас старый добрый Electron со всеми вытекающими. Если расширение имеет доступ к файловой системе, а вы открываете в нём кривой файл поздравляю, вы в зоне риска

Я решил покопаться в безопаснности популярных расширений от самой Microsoft: SARIF Viewer и Live Preview. Спойлер: удалось найти обход защиты (CVE-2022-41042) и вытащить локальные файлы через... DNS-запросы.

Система типов в TypeScript может творить чудеса, но на практике многие используют ее едва ли на десять процентов. Признайтесь, мы все хотя бы раз лепили any просто чтобы компилятор отстал и дал собрать проект. Проблема в том, что такие компромиссы рано или поздно приводят к неожиданным падениям в рантайме.

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

Одна из главных проблем i18n в приложениях заключается в том, что о ней вспоминают в последнюю очередь.

Обычно мы разрабатываем продукт, проверяем соответствие рынку (Product-Market Fit) и только спустя месяцы или годы решаем: «Пора выходить на глобальный уровень».

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

Как же с этим справиться? Заморозить разработку на неделю и рефакторить каждый компонент?

В последнее время я вижу много решений, основанных на compiler-driven подходе. Обещание заманчивое: добавьте пару строк кода, и приложение «само» станет мультиязычным.

Однако есть существенные недостатки.

Мы (человечество) очень хотим создать разум. Инопланетян мы пока не нашли, поэтому пытаемся собрать его сами из кремния и электричества. Но то, куда свернула индустрия сегодня, вызывает вопросы. Мы греем планету мегаваттами энергии, перемножая гигантские матрицы в дата-центрах, чтобы обучить LLM. Backpropagation и современный инференс - это непозволительно дорого и энергозатратно.

А что если вернуться к истокам? Что если интеллект — это не градиентный спуск, а кристаллизация связей под давлением информации?

В этой статье я расскажу о концепте Термодинамического Мозга. Это самоорганизующийся граф, который обучается в один проход O(1), непрерывно адаптируется к новым данным, спит по ночам, чтобы не сойти с ума, и настолько нетребователен к ресурсам, что его можно запустить хоть во вкладке браузера, хоть на Arduino.

Вы когда-нибудь писали плагин для semantic-release? А хотели бы? Если да, то идем дальше. Расскажу, как это сделать и самое главное это не сложно. А в конце Вас ждет репозиторий, который вам поможет начать проект.

Привет! Меня зовут Алексей, я работаю в команде Авторизации Банки.ру. Сегодня хочу познакомить Вас с тем, как можно написать свой плагин для semantic-release.

Сегодня выпустили первую версию нашего опенсорс-конструктора для e-com и финтех-продуктов. Рассказываем, что внутри и чем Роллаут уже сейчас может пригодиться любому бизнесу, что-нибудь продаёт или принимает оплату онлайн.

Пара слов о том, как программисты разных конфессий справляются с самой очевидной задачей в Computer Science.

Примеры правильных и неправильных разворотов списка на десяти разных языках.

Вкладки браузера разрастались до 5 ГБ. Причина — эффекты в реактивной системе, которые продолжали жить после удаления компонентов из DOM: подписки на сигналы не очищались, замыкания удерживали ссылки на мёртвые узлы, а каждый переход по SPA множил «призрачные» обновления. Разбираем, как иерархия parent-child эффектов, привязка к disconnectedCallback через effectSet и WeakRef полностью решили проблему — без ручного управления подписками

Привет, Хабр! Последние несколько месяцев я пишу на фреймворке $mol. $mol очень крутая штука, но для иишки слишком мало информации в датасетах.

Агент постоянно что то да путал, и даже не смотря на типизацию в моле ( даже в css ) это всё очень долго кругами ходило.

Агент:

TL;DR: Обновил UnblockPro до v2.0. Discord теперь реально работает — не только проходит тесты, но и загружает приложение, подключается к голосовым каналам и ведёт себя как положено. Разобрался, почему «всё ОК» в тестах, но Discord молча висит на «Проблемы с подключением». Оказалось, проблема была в архитектуре фильтрации — не хватало трёх ключевых правил, и DPI тихо дропал соединения, которые тесты не проверяли. Код на GitHub — by-sonic/unblock-pro.

Предыстория

Два месяца назад я выложил UnblockPro — Electron-приложение, которое в один клик обходит DPI-блокировки Discord и YouTube. Статья набрала 50к+ просмотров, 200+ звёзд на GitHub, 192 закладки на Хабре. Люди скачивали, пользовались, ставили звёзды.

И параллельно писали в issues: «YouTube работает, а Discord — нет».

Причём у части пользователей всё работало отлично. А у другой части — Discord висел на «Connecting...» или «Проблемы с подключением», хотя приложение рапортовало: «Стратегия X работает!». Тесты проходили. Логи были зелёные. Но Discord — нет.

Я потратил неделю на поиск причины. И нашёл. Проблема оказалась гораздо глубже, чем я думал.

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

Не желая идти на компромиссы, я реализовал систему анимаций на Canvas. В статье поделюсь опытом создания частиц и физики на чистом JS, а также бегло разберу встроенные инструменты браузера для таких задач.

Мы будем делать схематичную анимацию фейерверков и конфетти по нажатию на кнопку при помощи JS. Изученные принципы универсальны для любого ЯП. Нам понадобится немного знаний ООП, тригонометрии, физики и совсем чуть-чуть геометрии. Вот что получится в итоге:

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

Недавно я посмотрел фильм «Тетрис» (2023) и поймал себя на мысли, что история создания — не менее увлекательна, чем сама игра. А ещё она вдохновила меня на идею, взять классическую механику и добавить в неё щепотку… песка.

В данной статье я покажу код на JS, который не поместился в предыдущей статье, а также перепишу его на TS. Кратко расскажу о преимуществах TS над JS и о том, что необходимо понимать для перехода.

В прошлой статье я также упоминал, что у Сергея получилось запустить мой проект на Tauri в режиме разработки на Arch. Он поделился со мной информацией в issue на GitHub и тем самым внёс вклад в проект. Поэтому я решил попробовать исправить проблему на основе его issue. Заодно расскажу, что такое issue и как оно выглядит.

Заваривайте чай, доставайте вкусняшки — пора «снимать первый урожай помидор»! 🍅

Почему-то в последние пару лет я упорно не замечал, что Autodesk ушел из России (шутка), но постоянно обновлял свой любимый Fusion 360 через боль и страдания. Параллельно со мной страдали некоторые мои товарищи, практически все мои обучающиеся, да и много кто ещё. Дополнительной проблемой стал перевод пары учебных аудитории на Ubuntu, а Fusion 360 существует исключительно для Windows, и костыли через wine работают криво. Даже младшие классы пострадали, т.к. разрабатывали у нас модели в Tinkercad. Единственная бюджетная (бесплатная) альтернатива, это FreeCAD, но интерфейс у него не самый дружелюбный, особенно для школьников.

Идея появилась совершенно случайно, за разговором с коллегами. А почему бы на коленке не набросать простенький 3D-редактор для моделирования под 3D-печать. С простым интерфейсом и работой прямо в браузере. Естественно, это будет не полноценный САПР, но для обучения и простенького проектирования функционала должно хватать.

Целился я в нечто среднее между Tinkercad и Fusion360. Одной из задач было обойтись без сервера, т.е. работа на стороне клиента. В качестве основы я выбрал популярную библиотеку 3D графики Three.js.

Накидал пробный интерфейс и тут началось...

Scedel - это language- и protocol-agnostic язык для описания схем данных и контрактов. В статье я опишу сам язык, а также расскажу, зачем я его создал

Статья про то как контролировать загрузку статики у себя в продакшн сборке и предотвратить сайд-эффекты.