Что такое рекурсия и как использовать её в JavaScript?

Рекурсия — это не просто функция, вызывающая саму себя. Это инструмент, который помогает, когда циклы уже не справляются.

- Как устроены рекурсивные функции
- Когда рекурсия полезнее цикла
- Примеры
- Как не попасть в бесконечный вызов

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript

ECMAScript 2025 утверждён!

На 129-й Генеральной ассамблее Ecma был принят новый стандарт JavaScript. Что нас ждёт:

✅ Импорт JSON с with { type: 'json' }
✅ iterator.filter().drop().take() — полноценные цепочки итераторов
✅ Set.prototype.union(), intersection() и другие
✅ Promise.try() и RegExp.escape()
✅ Поддержка Float16Array и inline-флагов в регулярках

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #ECMAScript2025 #ES2025 #frontend #вебразработка

Что следует избегать в JavaScript

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

🚫 innerHTML вместо textContent
🚫 JSON.stringify() для сравнения объектов
🚫 == вместо ===
🚫 eval() и var
🚫 Функции с 6 аргументами подряд
…и другие ловушки, в которые попадали почти все.

🔎 Это не догмы, а практичные советы, основанные на реальных граблях.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #tips #антипаттерны #советы

👩‍💻 Вышел Firefox 147: Полный разбор релиза для разработчиков

Новый выпуск Firefox — это не просто набор обновлений, а настоящий прорыв в инструментах для веб-разработки. Основные нововведения: CSS Anchor Positioning по умолчанию, мощный Navigation API и расширенные возможности View Transitions. Давайте разберем все детали.

🚀 Главные новинки: CSS Anchor Positioning

CSS Anchor Positioning (якорное позиционирование) — это настоящая революция в CSS. Теперь можно «привязывать» один элемент (например, тултип или выпадающее меню) к другому (якорю) прямо в CSS, без JavaScript, создавая отзывчивые интерфейсы.

Что теперь можно в Firefox 147:

Включено по умолчанию! Больше никаких флагов.

✅ Значение anchor-center: Новое, удобное значение для свойств align-self, justify-self и других, чтобы центрировать элемент относительно его якоря.
✅ position-anchor: none: Новое значение для отвязки элемента от якоря.
✅ Интеграция с Инструментами разработчика: Элементы с anchor-name получают значок «якоря» в DOM-обозревателе, а @position-try правила отображаются в панели CSS.

Практический пример создания тултипа:

/* 1. Объявляем якорь (кнопка) */
.button {
  anchor-name: --tooltip-anchor;
}

/* 2. Создаем и привязываем тултип */
.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor; /* Связываем с кнопкой */
  bottom: anchor(top); /* Размещаем тултип над кнопкой */
  left: anchor(center); /* Центрируем по горизонтали */
  translate: -50% 0; /* Точная центровка */
}

Преимущество: такой тултип автоматически адаптируется к прокрутке и границам экрана.

🛠 Улучшения для SPA: Navigation API и View Transitions

Firefox 147 делает разработку одностраничных приложений (SPA) значительно удобнее.

⚡️ Navigation API — новый стандарт для управления навигацией.
Позволяет перехватывать навигационные действия, управлять историей браузера и получать информацию о записях в истории. Он призван заменить History API и window.location, устраняя их недостатки. Подробнее об API можно узнать в полной спецификации на MDN.

🎭 View Transitions (Типы переходов)

API для плавных анимаций между состояниями страницы теперь поддерживает типы переходов (types). Это позволяет задавать разные анимации для разных обновлений контента (например, «переход вперед» и «переход назад»). Доступно свойство Document.activeViewTransition для получения активного перехода. Узнать больше можно в полном руководстве по View Transition API.

Инструменты разработчика также получили улучшения для View Transitions: псевдоэлементы ::view-transition теперь видны в DOM, а анимации — в панели анимаций.

💎 Другие важные улучшения

✅ JavaScript: Iterator.concat() для объединения итераторов.
✅ CSS: Поддержка -webkit-perspective для совместимости, новые единицы измерения (rcap, rch, rex, ric) на основе шрифта корневого элемента, свойства counter-* и quotes для ::marker.
✅ API: WebGPU теперь для всех macOS на Apple Silicon, Brotli-сжатие в CompressionStream, CSS-модули (импорт стилей как CSSStyleSheet), Service Workers как ES-модули.
✅ SVG: Поддержка медиа-фрагментов в URL для контроля анимации SMIL и отображения части изображения.
✅ Для разработчиков расширений: Временно загруженные расширения MV3 могут загружать скрипты с localhost.
✅ Для пользователей: Улучшение производительности видео для AMD GPU, поддержка XDG Base Directory в Linux, безопасность.

📈 Зачем все это нужно?

Firefox 147 — это не просто обновление, а серьезный шаг к более выразительной, производительной и простой в разработке веб-платформе. CSS Anchor Positioning обещает сократить объем пользовательского JavaScript для раскладки. Navigation API и View Transitions делают навигацию в SPA предсказуемой и кинематографичной. А WebGPU и другие API открывают двери для новых классов веб-приложений.

📱 @dev_notes_ru

#Firefox #WebDev #CSS #JavaScript #AnchorPositioning #ViewTransitions #NavigationAPI #Frontend

👩‍💻 Эволюция хуков в React: от useEffect к data-first архитектуре

Используете useEffect для задач, которые можно решить иначе? React продолжает развиваться, предлагая более эффективные подходы к управлению состоянием и побочными эффектами.

В новой статье рассматривается эволюция работы с хуками в сторону data-first архитектуры. Ключевые темы:

✅ Отказ от чрезмерного использования useEffect в пользу декларативных методов работы с данными.
✅ Использование useSyncExternalStore для интеграции с внешними состояниями и API браузера.
✅ Повышение отзывчивости интерфейса с помощью useDeferredValue и механизма переходов.

Современные практики React позволяют создавать более предсказуемые, производительные и сопровождаемые приложения.

🖥 Читать статью

📱 @dev_notes_ru

#React #Hook #JavaScript

👩‍💻 Асинхронные циклы в JavaScript: как избежать ловушек

Вы тоже сталкивались с тем, что асинхронные запросы в цикле выполняются последовательно и медленно, хотя должны работать параллельно? 🤔
Частая причина — неочевидное поведение await в forEach, map и for…of.

В новой статье разбираем:
🔹 Почему циклы ведут себя не так, как мы ожидаем
🔹 4 рабочие стратегии — от Promise.all() до управляемого параллелизма
🔹 Готовые шаблоны кода, чтобы сразу применять

Выберите правильный подход и перестаньте бороться с асинхронностью.

🖥 Читать статью

📱 @dev_notes_ru

#JavaScript #NodeJS #Async #Await