JavaScript *

Привет! Я Сергей, разработчик. Когда мне понадобилась легкая анимация лайка в стиле 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.

Все мы видели эти заголовки: «ИИ оставит программистов без работы», «Копирайтеры больше не нужны», «Завод — наше всё». Паника, хайп, мемы.

Но есть факты: Число резюме к числу вакансий увеличилось в 2 раза за 2025 год в сфер ИТ.

Поэтому я сделал шуточный сервис ai‑fire.ru, который показывает, отберёт ли у вас работу ИИ.
1️⃣ вводишь свою профессию
2️⃣ жмёшь кнопку
3️⃣ узнаёшь — пора паниковать или пока можно выдохнуть

Привет, Хабр! (И тебе, питонист, который считает свой язык идеальным, и тебе, JS-ник, у которого уже вышел новый фреймворк, пока ты читал это предложение, и тебе, 1С-ник, который устал объяснять, что ты тоже программист всем во круг.)

Наткнувшись миллионный раз на статью «КАКОЙ ЯЗЫК ПРОГРАММИРОВАНИЯ ВЫБРАТЬ?» я задался вопросом, почему люди ещё не поняли ответа на этот вопрос, ведь он на поверхности.

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

В этой, уже 3 по счету статье мы переходим к самому важному месту во всей архитектуре Capacitor — к плагинам.

Именно плагины делают из WebView полноценное мобильное приложение. С ними у Вас появляется доступ к камере, файловой системе, push-уведомлениям, Bluetooth и т.д.

В статье разберем:

как устанавливаются официальные плагины;

как работать с community-плагинами;

как мигрировать с Cordova;

и главное — как написать собственный плагин с нуля на реальном примере отправки SMS.

Помните времена, когда статический сайт был сайтом-визиткой на голом HTML, а любой серьёзный проект требовал CMS?

Мы привыкли считать нормальным сайт на WordPress, «Битриксе» или хотя бы самописном Django. Статика же оставалась уделом гиков, документации и страниц о скором запуске.

В 2025 году статические сайты вернулись. Не в качестве альтернативы для бедных, а как зрелая архитектура, которая решает 90% задач быстрее, дешевле и безопаснее, чем тяжёлый бэкенд.

В 2026 году может показаться странным писать новую библиотеку для MD5. Алгоритм считается устаревшим, браузеры постепенно убирают его из Web Crypto API, а в документации Node.js есть предупреждения о его использовании.
Но реальность сложнее. MD5 всё ещё жив в:

Контрольных суммах файлов (многие репозитории до сих пор публикуют MD5-хеши)

Системах кэширования (ключи на основе контента)

Легаси-протоколах (некоторые API требуют MD5-подписи)

Внутренних идентификаторах (где безопасность не важна)

Проблема в том, что существующие реализации либо устарели, либо не имеют TypeScript, либо не работают универсально (Node.js + браузер). Я решил это исправить и представил pure-md5 — современную, типизированную и адаптивную библиотеку.
В этой статье расскажу о технических решениях, архитектуре и покажу, почему это может быть полезно в ваших проектах.

Добрый день! Меня зовут Андрей Слекеничс, я PO GigaIDE, и сегодня мы продолжаем наш экскурс по функциональности GigaIDE.

Первая и предыдущая статьи цикла доступны здесь и здесь. Сегодняшний материал — последний, затрагивающий функциональность GigaIDE Community, и первый, в котором мы переходим к возможностям уже только GigaIDE PRO.

Привет, меня зовут Арина, я фулстек‑разработчик.
Есть задачи, которые годами возвращаются в твою жизнь. Для меня такой задачей стало бронирование столиков.
Давайте посмотрим, как я делала её трижды. Правило трёх попыток: один раз — ошибка, два — опыт, три — паттерн поведения.

Привет, Хабр! На связи Никита Ли, frontend-разработчик в Рунити.

За последние годы мы в Рунити пришли к довольно привычной для крупных frontend-команд ситуации: проектов становилось больше, кодовая база разрасталась, а количество переиспользуемых пакетов и микрофронтендов росло слишком быстро. Поддерживать зоопарк репозиториев становилось всё сложнее — и по времени, и по нервам.

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

Google и Microsoft представили в ограниченном превью новую технологию — WebMCP. Это стандарт, который обещает кардинально изменить взаимодействие ИИ-агентов с веб-приложениями. Если вы уже знакомы с Model Context Protocol (MCP) от Anthropic, то WebMCP — это его идеологический наследник, перенесенный непосредственно на сторону клиента (в браузер).

В предыдущей статье мы разобрали trackOpBits — механизм оптимизации трекинга зависимостей во Vue 3.
Но тогда мы смотрели на систему через одну конкретную оптимизацию.

Сегодня поднимемся уровнем выше.

Почти всё, что вы делаете во Vue:

В экосистеме JavaScript-разработки управление состоянием приложений всегда оставалось одной из самых сложных задач. От глобальных переменных до сложных библиотек вроде Redux и MobX — разработчики постоянно ��щут более простые и эффективные решения.

Сегодня мы познакомимся с Nexus State — новой библиотекой для управления состоянием, которая сочетает простоту использования Atom-подхода с мощными функциями для реальных приложений. В этой статье мы рассмотрим архитектуру Nexus State, его возможности, и проведем объективное сравнение с существующими решениями.