Babel — это транспилятор JavaScript, который превращает современный код в версию, понятную более старым средам. В версии v8 вышло несколько важных изменений — он стал ESM-only и требует Node.js 22 и выше. @babel/preset-env теперь по умолчанию не компилирует код в ES5 — вместо этого ориентируется на современные браузеры. Также удалили опции loose и spec в пользу более гибких assumptions. Полифиллы core-js теперь подключаются через отдельный плагин. Но главный вопрос: актуален ли ещё Babel на фоне роста быстрых альтернатив вроде Oxc и SWC? В релизе даже признают, что экосистема изменилась, но при этом напоминают — у Babel всё ещё 650 миллионов загрузок в неделю.
#devnews #babel #oxc #esm #js #javascript #frontend #webdev #nodejs #bundler
1. Разбираю типичные ошибки при реализации Circuit Breaker — про них вас тоже могут спросить на бэкенд-собеседовании. 1. Один Circuit Breaker на всё приложение. Если один выключатель закрывает все внешние вызовы, то проблема в одном сервисе заблокирует доступ ко всем остальным. Решение: отдельный Circuit Breaker на каждый внешний сервис или на каждый тип вызова. 2. Слишком чувствительный порог. Если порог ошибок слишком низкий, Circuit Breaker будет часто открываться даже при незначительных сбоях. Решение: настраивать порог на основе реальной статистики ошибок и времени. 3. Нет fallback. Если Circuit Breaker открылся, вызовы падают с ошибкой. Решение: предусмотреть fallback — запасной ответ из кэша, заглушка или сообщение пользователю. 4. Не логируют переходы состояний. Без логов вы не поймёте, почему Circuit Breaker открылся или закрылся. Решение: логировать все переходы состояний для анализа и отладки. 5. Забывают про таймаут запроса. Circuit Breaker не спасёт, если внешний вызов висит бесконечно. Решение: настраивать таймаут на каждый вызов, чтобы Circuit Breaker мог считать его ошибкой. Про другие паттерны смотрите в полном видео — ссылка под шортсом.
#circuitbreaker #backend #circuitbreakerpattern #backendpattern #backendinterview #designpatterns #codinginterview #softwarearchitecture #microservices
Angular v22 — это важный релиз, который переводит три ключевые фичи из разряда экспериментальных в production-ready. Signal Forms — новая система управления формами на основе сигналов, которая объединяет лучшие черты реактивных и шаблонных форм. Angular Aria — набор accessibility-примитивов для создания доступных компонентов. И асинхронная реактивность с resource и httpResource — теперь данные с бэкенда можно получать декларативно, прямо в сигналах, без лишних подписок. Angular продолжает движение в сторону сигналов, и этот релиз — ещё один шаг к полностью сигнальному будущему. Кроме того, в Angular CLI добавили MCP-сервер для AI-агентов, а также два официальных скилла: angular-developer и angular-new-app. Теперь AI-помощники могут напрямую взаимодействовать с CLI и писать код в соответствии с актуальными best practices.
#devnews #angular #frontend #angularcli #signalforms #asyncreactivity #aria #mcp #webdev
Разбираю частые вопросы с собеседования про паттерн Circuit Breaker. 1. Чем Circuit Breaker отличается от retry? Retry повторяет запрос несколько раз в надежде, что ошибка временная. Circuit Breaker блокирует вызовы, когда сервис явно упал, чтобы не тратить ресурсы. Retry чаще используется с Circuit Breaker, но не заменяет его. 2. Что такое bulkhead? Bulkhead — это паттерн изоляции ресурсов. Он ограничивает количество одновременных вызовов к внешнему сервису, чтобы один проблемный сервис не забрал все ресурсы (потоки, соединения) системы. 3. Где хранить состояние Circuit Breaker в распределённой системе? В распределённых системах состояние хранят в централизованном хранилище — Redis, ZooKeeper или распределённом кэше, чтобы все инстансы приложения видели общее состояние. 4. Как мониторить Circuit Breaker? Использовать метрики: количество открытых/закрытых состояний, число ошибок, задержки и количество отклонённых вызовов. Инструменты — Prometheus, Grafana, Hystrix Dashboard.
#circuitbreaker #faulttolerance #backend #backendinterview #designpatterns #codinginterview #techinterview #softwarearchitecture #microservices
Motion — это библиотека для анимаций в вебе, которая раньше называлась Framer Motion. Она позволяет создавать плавные анимации в React, Vue и обычном JavaScript с простым декларативным синтаксисом. В версии 12.40 появилась интересная фича: в transition.arc() можно передать опцию path, что позволяет анимировать движение объекта по заданной траектории. В версии 12.39 добавили поддержку repeatType и repeatDelay для последовательностей анимации, а также множество исправлений для жестов перетаскивания и работы variants. Motion остается ключевым игроком с 11 миллионами загрузок в неделю.
#devnews #framermotion #motion #animation #react #javascript #vuejs #ux #ui #frontend
В React Native 0.86 произошло важное событие — репозиторий проекта вместе с Metro, Yoga и сайтом переехал в организацию React Foundation. Это большой шаг к объединению всей экосистемы под одной крышей. Из технических новшеств — полноценная поддержка edge-to-edge на Android 15+ и эмуляция светлой/тёмной темы прямо в DevTools. И приятный бонус: это уже второй релиз подряд без breaking changes, так что обновление пройдёт максимально гладко.
#devnews #reactnative #react #mobiledev #appdevelopment #android #ios #frontend #webdev #reactfoundation
В этом шортсе подвожу итоги по ZCode и моделям GLM. Начну с тарифов: лайт-подписки хватит только для небольших задач, а для полноценной работы и больших проектов понадобится подписка уровня 100-долларовой подписки Claude, но она дешевле Claude в полтора раза. По планированию GLM-5.2 не уступил Opus — это серьёзный плюс. Из преимуществ ZCode — встроенный браузер с DevTools, чего нет у Claude, и работает без VPN. Но есть и минусы: ZCode не может управлять браузером, как это делает Claude Code, и интерфейс планирования в ZCode менее удобный, чем у Claude. В итоге если не получается подключить Claude или хочется альтернативу — ZCode с GLM-5.2 неплохой вариант. Мощная модель, уникальные фичи, но с некоторыми ограничениями по управлению и удобству.
#zcode #claudecode #claudeopus #glm #glm52 #zai #aimodel #aiagent #aitools #aicoding
В этом шортсе показываю встроенный браузер в ZCode — это не просто для предпросмотра HTML, а полноценный инструмент для разработки. Можно открывать локальные файлы и проекты прямо внутри редактора, проверять вёрстку и видеть изменения в реальном времени. И да, там есть DevTools — инспектор элементов, консоль и всё, что нужно для отладки фронтенда. DevTools открывается одной кнопкой, буквально в один клик. У Claude Code, например, такой возможности нет . Также можно сделать референс любого элемента из браузера — прямо в коде или консоли. В ZCode всё сразу под рукой: смотришь на страницу, открываешь DevTools, правишь код на лету. Удобно, быстро, не нужно переключаться между окнами.
#zcode #devtools #browser #glm #glm52 #zai #aimodel #aiagent #aitools #aicoding
visx — библиотека визуализации от Airbnb, которая объединяет мощь D3 для вычислений и React для работы с DOM. Главная особенность — это не готовые графики, а набор низкоуровневых компонентов-примитивов, из которых вы сами собираете нужные визуализации. В версии v4 наконец добавили поддержку React 19. Также обновили зависимости d3-shape и d3-path до третьей версии, полностью убрали prop-types и lodash.
#devnews #datavisualization #datavis #visx #airbnb #react #frontend #js #webdev
Использовать key={index} в React-списках — антипаттерн, который приводит к багам с состоянием, анимациями и перерисовкой. В этом шортсе объясняю, почему индексы — плохая идея и что использовать вместо них. Стабильный и уникальный идентификатор — вот правильный выбор. Сохраняй — пригодится!
#react #reactjs #keyindex frontend #webdev #coding #programming #js #jsx
React Hook Form — это библиотека для управления формами в React, которая минимизирует количество ререндеров. В версии v7.80 вышло три важных обновления. Главная фича — возможность отключать отдельные поля внутри useFieldArray через опцию disabled. Теперь можно управлять состоянием каждого поля. Разработчики улучшили производительность: ускорили onChange, setValid, dirty checking и setValue. Также исправили баг, из-за которого пустой массив и пустой объект ошибочно считались равными. Важно: в версиях 7.54–7.80 обнаружена уязвимость prototype pollution, которая исправлена в 7.81.
#react #reacthookform #devnews #forntend #webdev #useform #reactjs #js
Flexbox и Grid — два основных подхода к вёрстке в CSS, которые часто путают. В этом шортсе коротко и наглядно показываю, в чём разница и когда что использовать. Flexbox — для одноразмерных раскладок (ряд или колонка). Grid — для двухразмерных раскладок (сетка). Частый вопрос на собеседованиях. Сохраняй — пригодится!
#flexbox #grid #css #webdev #coding #programming #frontend #shorts #html #csstutorial
PolyCSS — это CSS 3D-движок, который рендерит 3D-модели через DOM, используя CSS-трансформации, без WebGL и canvas. Каждый полигон становится обычным HTML-элементом, который можно инспектировать в DevTools. Поддерживает OBJ, STL, glTF, GLB и VOX, работает с React, Vue и ванильным JS. Проект уже используют для создания игр — например, шутер в стиле Quake, полностью на CSS 3D. Но главный вопрос — производительность: каждый полигон — это DOM-узел, поэтому чем сложнее сцена, тем сильнее нагрузка на браузер.
#devnews #polycss #css #3d #css3d #html #frontend #js
Git Stash — команда, которая временно прячет изменения, чтобы переключиться на другую задачу, не коммитя недоделанный код. В этом шортсе показываю, как это работает. git stash — спрятать изменения. git stash list — посмотреть все сохранённые стэши. git stash pop — применить последний стэш и удалить его из списка. Частый вопрос на собеседованиях. Сохраняй — пригодится!
#git #gitstash #programming #coding #developer #learngit #devops
Fontpair — это сервис с более чем 500 готовыми сочетаниями шрифтов для дизайнеров и разработчиков. Бесплатные шрифты из Google Fonts уже встроены в систему — остаётся только выбрать и использовать. В сервисе есть режим Playground, где можно проверить, как выбранное сочетание выглядит на визитках, сайтах, слайдах и в соцсетях. Расширение для Chrome позволяет навести на любой текст на сайте и узнать название шрифта, размер, интерлиньяж и цвет. За пару кликов можно сгенерировать DESIGN.md с готовыми переменными для CSS, Tailwind или SCSS.
#fontpair #typography #fonts #webdesign #design #ui #ux #frontend #шрифты
Debounce и Throttle — два подхода, которые часто путают даже опытные разработчики. В этом шортсе коротко и наглядно показываю, в чём разница и когда что использовать. Debounce — откладывает выполнение, пока поток событий не успокоится. Идеально для поисковых строк и автодополнения. Throttle — пропускает выполнение не чаще одного раза в заданный интервал. Идеально для скролла и ресайза. Это частый вопрос на собеседованиях, на котором многие ошибаются. Сохраняй — пригодится в работе!
#debounce #throttle #coding #programming #webdev #codinginterview #frontend
TypeScript 7.0 RC — это не просто очередное обновление, а полная смена фундамента. Компилятор переписан с JavaScript на Go — проект занял больше года и получил кодовое имя "Corsa". В итоге типизация и сборка ускорились в среднем в 10 раз: например, на кодовой базе VS Code (1.5 млн строк) время проверки типов сократилось с 77 до 7 секунд. Ускорение — это сочетание нативного кода Go и параллельной обработки. При этом логика проверки типов осталась той же, что в TS 6.0 — поведение компилятора не поменялось. Новая версия уже доступна для тестирования.
#typescript #ts #go #golang #frontend #webdevelopment #programming #coding #typescript7
Случайно затер коммиты? git reset --hard поставил крест на работе?
В этом шортсе коротко о том, как git reflog помогает восстановить потерянные коммиты.
Сохраняй шпаргалку — пригодится!
#git #gitreflog #gitreset #gitresethard #gitcommands #coding #programming
Fragment ref — это новая возможность в React, которая появилась в canary-релизе. Раньше Fragment использовался только для группировки элементов без лишних DOM-узлов. Теперь вы можете добавить к фрагменту ref и получить FragmentInstance, который даёт доступ к дочерним DOM-элементам. Это позволяет управлять фокусом, обрабатывать события и отслеживать видимость группы элементов без лишних обёрток. Новая фича призвана заменить устаревший findDOMNode и упростить работу с компонентами.
#devnews #react #reactjs #frontend #webdev #programming #javascript #js #reactfragment #fragmentref
Показываю пример реализации Outbox Pattern на практике. Сначала схема таблицы outbox_events: id, aggregate_id, event_type, payload, status, created_at. Внутри сервиса OrderService при создании заказа мы сохраняем бизнес-данные в таблицу orders и событие в outbox_events в одной транзакции — это гарантирует атомарность. После коммита транзакции запускается relay-процесс, который читает события со статусом pending, отправляет их в брокер сообщений (Kafka/RabbitMQ), и после успешной отправки меняет статус на processed или удаляет запись. Весь код показан в шортсе. Про другие паттерны смотрите в полном видео — ссылка под шортсом.
#outboxpattern #microservices #backend #backendinterview #designpatterns #codinginterview #techinterview #softwarearchitecture