JavaScript *

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

Для начала кратко опишу фронтовый стек у нас в «Криптоните»: мы те ребята, которые не пишут на 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 язык для описания схем данных и контрактов. В статье я опишу сам язык, а также расскажу, зачем я его создал

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

Привет! Меня зовут Незар, я фронтенд-разработчик из Т-Банка. В 21 релизе Angular команда разработчиков представила экспериментальное API для построения реактивных форм с помощью сигналов. В статье подробно его разберем. 

Тому, кто знаком с классическими Reactive Forms в Angular, новый Signal Forms API покажется эволюционным шагом: те же мощные возможности, но с сигналами — а значит, с автоматической реактивностью, полной типизацией и меньшим количеством шаблонного кода. 

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

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

Меня зовут Карлен, я Lead Fullstack разработчик в ITFB Group. Хочу поговорить о том, как превратить нейросеть из «игрушки» в настоящего компаньона, который усиливает ваши навыки 😎 Речь пойдет не об обзоре AI-инструментов (выбор оставим за вами), а об искусстве составления промптов — «разговорном интерфейсе» между вами и вашим digital-напарником.

Привет!

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

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

Медиа: Mastra Workspaces (свой «Claude Code»), Рич Харрис про RSC, безопасность фреймворков.

AI: безопасность агентов, пост-обучение LLM (Netflix), Brave Search API.

A11y: Axe MCP в DevTools, чеклист Shopify, role="presentation".

Браузеры: Interop 2026, WebMCP и ранний доступ в Chrome.

3D: 3D-труба на R3F, procedural snake на Three.js.

CSS: эластичный текст, pie chart, параллакс, пирамиды, вихрь, Ambient, освещение.

JS/TS: sql.js, Perspective BI, TS-дженерики.

React: State of React 2025, shadcn vs MUI, HighTable, FrankenTUI, Ant Design 6.3, оптимизация.

UX/UI: фоновые задачи, интерфейсы для агентов, семантические токены.

Тестирование: JIT Tests от Meta (тесты от LLM).

Разное: Electrobun, учебник математика/CS/AI, WarCraft 3 UI, npmx, Stockfish 18.