👩‍💻 Вышел 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

👩‍💻 Автоматическая фильтрация в Laravel: сила Global Scopes

Для поддержания чистоты и единообразия запросов часто использую глобальные области видимости (Global Scopes) в моделях. Например, в приложении может быть автоматическое исключение архивных записей компаний из всех выборок, что помогает избежать случайного обращения к неактивным данным.

// Создание области видимости для исключения архивных компаний
class ExcludeArchivedScope implements Scope
{
    public function apply(Builder $builder, Model $model)
    {
        $builder->where(
            'status', '<>',
            CompanyStatusEnum::ARCHIVED->value
        );
    }
}

/* 
Добавление `addGlobalScope()` к нужной модели. Этот метод используется для применения глобальной области видимости к модели. Это означает, что каждый раз при запросе к модели (например, через `Company::all()` или `Company::where(...)`), условия области видимости автоматически добавляются в конструктор запросов, фильтруя результаты без необходимости вручную добавлять их каждый раз.
*/

class Company extends BaseModel
{
    protected static function booted()
    {
        static::addGlobalScope(new ExcludeArchivedScope());
    }
}

// Временное отключение ВСЕХ областей видимости
Company::withoutGlobalScopes()->find($id);

// Временное отключение только области видимости
Company::withoutGlobalScope(ExcludeArchivedScope::class)->find($id);

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

📱 @dev_notes_ru

#Laravel #LaravelTips #PHP #Eloquent

🔄 Вышло обновление Angie 1.11.2!

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

📋 Основные исправления в версии 1.11.2:

🔹 HTTP/3: Исправлена проблема, при которой HTTP/3-запросы могли завершаться с ошибкой [alert] sendmsg() failed (90: Message too large) while sending frames, если был отключен BPF.
🔹 IPv6 & HTTP/3: Решена проблема с приемом HTTP/3-запросов при прослушивании wildcard IPv6-адреса с включенным BPF.
🔹 Docker API: Исправлена работа динамического обновления групп проксируемых серверов при указании доменного имени в директиве docker_endpoint.
🔹 Модули: Обновлен модуль angie-module-cache-purge до версии 2.5.5.

Это второе обновление в ветке 1.11.x. Предыдущий выпуск 1.11.1 от 30 декабря 2025 года также принес ряд улучшений и исправлений, включая корректный учет HTTP/2-запросов в статистике и исправление проблемы с ACME-клиентом в API статистики.

💡 Полезные ссылки:

Полный список изменений (changelog) для всех версий: https://angie.software/angie/docs/oss_changes/

Документация по настройке модуля Metric для сбора произвольной статистики (добавлен в версии 1.11.0): https://angie.software/angie/docs/http/ngx_http_metric_module/

📱 @dev_notes_ru

#Angie #WebServer #Nginx #Changelog #Обновление

👩‍💻 Ошибка 503 в Nginx: Руководство по диагностике и исправлению

Обновлено руководство по диагностике и устранению ошибки 503 Service Temporarily Unavailable в Nginx. Материал был дополнен детальными конфигурациями, алгоритмами поиска причин и методами повышения отказоустойчивости инфраструктуры.

В статье представлен структурированный подход: от экспресс-чек-листа для оперативного реагирования до настройки балансировки нагрузки, пассивных health checks и планирования масштабирования. Рассмотрены типичные сценарии возникновения ошибки, анализ логов и корректировка ключевых параметров, таких как proxy_read_timeout и max_fails.

Руководство призвано помочь системным администраторам и разработчикам не только устранять инциденты, но и выстраивать профилактические механизмы для стабильной работы сервисов.

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

📱 @dev_notes_ru

#Nginx #DevOps

Наконец-то я могу видеть свои Tailwind классы без прокрутки...

📱 @dev_notes_ru

#Joke #Tailwind

Да, я full-stack разработчик 💪

📱 @dev_notes_ru

#Joke #Developer

👩‍💻 Vinyl и vinyl-fs: сквозные потоки в Gulp

Пока инструменты вроде Vite решают задачи сборки фронтенда «из коробки», Gulp нашёл свою нишу как гибкая платформа для автоматизации на основе потоков файлов. В новой статье мы исследуем его ядро — объект Vinyl и модуль vinyl-fs.

Вы узнаете:
▸ Как виртуальный файловый формат Vinyl абстрагирует работу с файлами.
▸ Почему функция gulp.src() — это интерфейс к vinyl-fs.
▸ На каких современных паттернах строится управление потоками вместо устаревшего passthrough.
▸ Как применять эти знания на практике: сборка JS-проектов, генерация контента, оптимизация ресурсов.

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

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

📱 @dev_notes_ru

#Gulp #NodeJS

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

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

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

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

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

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

📱 @dev_notes_ru

#React #Hook #JavaScript

🚀 Laravel 12.48.0: исправления ошибок, новые возможности и улучшения

Вышло очередное обновление фреймворка — версия 12.48.0. Как всегда, релиз сфокусирован на стабильности, исправлении багов и внесении небольших, но полезных улучшений в различные компоненты.

🌟 Исправления критических ошибок и улучшения

✅ Бесконечный цикл в отложенной очереди: Решена проблема с бесконечным циклом при использовании Illuminate\Queue\SerializesModels в отложенных заданиях.
✅ Совместимость со сторонними guard'ами: Внесены повторные правки для обеспечения обратной совместимости с нестандартными системами аутентификации.
✅ Работа с блокировками: Исправлена ошибка в Cache::restoreLock() для драйвера MemoizedStore.
✅ Чтение файлов: Исправлен баг с частичным чтением файлов в Filesystem::sharedGet().
✅ Декораторы для валидации: Класс Enum для правил валидации теперь реализует интерфейс Stringable.
✅ Обработка JSON во HTTP-клиенте: Появилась возможность задавать флаги для декодирования JSON в ответах клиента.

✨ Новые возможности

✅ CORS Middleware: В middleware HandleCors добавлен метод skipWhen(), позволяющий гибко управлять применением CORS-правил.
✅ События для заданий: Добавлено новое событие BatchFinished, упрощающее отслеживание завершения пакетной обработки заданий.
✅ Алиасы для выражений в Query Builder: Появилась возможность создавать собственные SQL-выражения с использованием метода alias().
✅ Обновление индексов failed_jobs: Удалены лишние индексы из таблицы failed_jobs, что должно повысить производительность.

⚡️ Прочие улучшения и рефакторинг

✅ Производительность: Оптимизировано создание объектов в контейнере за счёт отказа от Reflection API в пользу прямого создания.
✅ Тестирование: Изоляция скомпилированных шаблонов Blade для каждого процесса при параллельном тестировании.
✅ Типы данных: Значительные улучшения типизации в классах Illuminate\Support\Str и PendingRequest, добавлены соответствующие тесты.
✅ Переводы: Теперь строки перевода могут содержать квадратные и фигурные скобки.
✅ Документация блоков: Добавлены и исправлены аннотации PHPDoc в нескольких классах.

Полный список изменений можно найти в официальном релизе.

📱 @dev_notes_ru

#Laravel #Laravel12

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

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

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

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

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

📱 @dev_notes_ru

#JavaScript #NodeJS #Async #Await

👩‍💻 jQuery 4.0.0: релиз к 20-летию библиотеки и ключевые изменения

Команда jQuery выпустила первую за почти 10 лет мажорную версию — jQuery 4.0.0, приуроченную к 20-летию библиотеки. Это масштабное обновление, которое модернизирует код, удаляет устаревшие API и вносит ряд изменений ломающих совместимость.

📅 Сроки поддержки браузеров:

jQuery 4.0 перестаёт поддерживать IE10 и старше, Edge Legacy (не-Chromium), очень старые версии iOS, Firefox и Android Browser. Поддержка IE11 пока остаётся, но будет удалена в jQuery 5.0.

⚡️ Ключевые изменения и улучшения:

1️⃣ Удалены давно устаревшие методы (их следует заменить на нативные аналоги):

🔹 jQuery.isArray → Array.isArray()
🔹 jQuery.parseJSON → JSON.parse()
🔹 jQuery.trim → String.prototype.trim()
🔹 jQuery.type, jQuery.now, jQuery.isNumeric и другие.
🔹 Это сократило размер библиотеки более чем на 3 КБ в gzip.

2️⃣ Модернизация кодовой базы:

🔹 Исходный код переведён с AMD на ES-модули, что улучшает совместимость с современными сборщиками.
🔹 Добавлена поддержка Trusted Types для безопасной работы с HTML под строгими политиками CSP.

3️⃣ Изменения в поведении:

🔹Порядок событий фокуса (focus, blur, focusin, focusout) теперь соответствует актуальной спецификации W3C, а не старому решению jQuery.
🔹Автоматическое добавление "px" к unitless-значениям в .css() сильно ограничено. Теперь px добавляется только к известному набору свойств.
🔹Slim-сборка стала ещё меньше: из неё удалены модули Deferred и Callbacks (размер ~19.5 КБ в gzip), так как в поддерживаемых браузерах (кроме IE11) можно использовать нативные Promise.

🛠 Как обновляться? Важные шаги:

1️⃣ Внимательно изучите официальное руководство по обновлению до версии 4.0.
2️⃣ Используйте плагин jQuery Migrate для выявления проблем в существующем коде.
3️⃣ Если нужна поддержка удалённых старых браузеров (IE10 и др.) — оставайтесь на ветке 3.x.

💾 Ссылки для скачивания:

Полная версия: https://code.jquery.com/jquery-4.0.0.js
Slim-версия: https://code.jquery.com/jquery-4.0.0.slim.js
Через npm: npm install jquery@4.0.0

Это историческое обновление очищает библиотеку от исторического багажа, делая её более современной и ориентированной на будущее. Для новых проектов стоит рассматривать нативные API браузеров, но для поддержки legacy-кода jQuery 4.0 — отличный путь вперёд.

📱 @dev_notes_ru

#jQuery #JavaScript #Frontend #WebDev #jQuery4

👩‍💻 Ленивые итераторы в JavaScript: руководство с примерами

Знаете ли вы, что классическая цепочка items.filter().map().slice(0,10) обрабатывает тысячи элементов, хотя нужны лишь первые десять? Это как перелопатить тонну песка ради щепотки золота.

В статье разбираем нативное решение — хелперы итераторов (Iterator Helpers). Они позволяют:

✅ Обрабатывать данные лениво, без промежуточных массивов.
✅ Останавливать вычисления, как только результат достигнут.
✅ Эффективно работать с большими данными и асинхронными потоками.

Это меняет подход к оптимизации в JavaScript. Разбираемся, как их внедрять и каких подводных камней избегать.

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

📱 @dev_notes_ru

#JavaScript #IteratorHelpers

В Pull Request #58379 для ветки 12.x было добавлено полезное улучшение в HTTP-клиент Laravel. Теперь в объекте Response можно устанавливать флаги для декодирования JSON.

💡 В чём суть

Раньше метод $response->json() просто парсил JSON с настройками PHP по умолчанию. Это могло приводить к скрытым проблемам:

Тихие ошибки: json_decode() по умолчанию молча возвращает NULL при ошибке в структуре JSON, что усложняет отладку.
Потеря данных: PHP может некорректно обрабатывать очень большие числа (например, transaction_id или Snowflake ID из Discord/X), что ведёт к повреждению данных.

Как теперь можно решить
В метод json() добавлен параметр flags. Это позволяет передавать стандартные константы PHP для управления парсингом.

❗️ Сценарии использования

✅ Защита от потери больших чисел (часто встречается в платежных системах и соц. сетях):

$data = $response->json(flags: JSON_BIGINT_AS_STRING);
Большие целые числа будут возвращены как строки, что гарантирует их сохранность.

✅ Строгий режим для отладки:

$data = $response->json(flags: JSON_THROW_ON_ERROR);

При малейшей ошибке в JSON будет выброшено исключение, а не возвращён NULL.

✅ Комбинированный режим для продакшена:

$data = $response->json(
    flags: JSON_BIGINT_AS_STRING | JSON_THROW_ON_ERROR
);

И данные целы, и ошибки не пройдут незамеченными.

⚡️ Что изменилось для разработчика

Раньше для такого контроля нужно было вручную парсить $response->body(). Теперь всё решается одним параметром встроенного метода.

Небольшое изменение, которое устраняет целый класс проблем при интеграции с реальными, неидеальными API.

📱 @dev_notes_ru

#Laravel #Laravel12

👩‍💻 Управляйте spread-синтаксисом: Практическое применение Symbol.iterator

Что, если ваш объект мог бы быть и структурой с понятными свойствами, и коллекцией для мгновенного разворачивания через ...? Оказывается, в JavaScript это встроенная возможность через Symbol.iterator.

В статье разбираем на конкретной задаче:
🔹 Как работает spread «под капотом» и почему Map разворачивается парами.
🔹 Решаем дилемму «объект или массив» — пишем утилиту, результат которой можно и читать как fileInit.bytes, и подставить в new File(...fileInit).
🔹 Плюсы, минусы и когда это реально нужно — чтобы не усложнять код без дела.

Инструмент мощный, но требует осмысленного применения.

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

📱 @dev_notes_ru

#JavaScript #SymbolIterator #Symbol

🚀 Быстрая загрузка CSS с помощью словарей сжатия

Устали выбирать между быстрой первой загрузкой и моментальными переходами по сайту? Словари сжатия в HTTP/3 решают эту проблему, сокращая объём передаваемых CSS до минимума.

В статье разбираем:
🔹 Как технология устраняет дублирование кода
🔹 Пошаговая настройка
🔹 Стратегия внедрения с fallback для всех браузеров

Это не теория — метод уже работает в Chromium и готов к использованию в production.

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

📱 @dev_notes_ru

#DevOps #CSS

👩‍💻 Git Worktree: изолированная работа с ветками и параллельные задачи

Работаете над фичей, но срочно нужен хотфикс? Не хотите терять контекст и грязные файлы?

🚀 Git Worktree создаёт изолированные рабочие директории для параллельной работы над разными ветками! Теперь можно:

✅ Вносить срочные исправления, не трогая основную ветку
✅ Работать над несколькими задачами одновременно
✅ Экспериментировать без риска для продакшена
✅ Тестировать PR и чужие ветки в чистом окружении

📖 В статье:

🔹 Как создать, переместить и удалить рабочее дерево
🔹 Архитектура и принципы работы
🔹 Когда использовать (а когда не стоит)
🔹 Сравнение с git stash и clone
🔹 Ответы на частые вопросы

🔄 Статья была обновлена

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

📱 @dev_notes_ru

#Git #Worktree

🚀 Laravel 12.49.0: исправления, улучшения и новые возможности

Вышло очередное обновление фреймворка — версия 12.49.0. Как всегда, релиз нацелен на стабильность, исправление ошибок и добавление небольших, но полезных улучшений в различные компоненты системы.

🛠 Исправления ошибок и улучшения

✅ Pagination без total: Исправлена проблема с пагинацией при использовании метода simplePaginate() в связке с withQueryString().
✅ Изоляция шаблонов Blade: Улучшена изоляция скомпилированных шаблонов при параллельном тестировании, предотвращены потенциальные пересечения данных.
✅ Обработка CORS: Добавлена поддержка заголовка Authorization в Allow-Headers по умолчанию в middleware CORS.
✅ Очистка очереди: Исправлена команда queue:prune-batches — теперь корректно удаляются устаревшие записи в таблице job_batches.
✅ Трансляция событий: Устранена ошибка сериализации при использовании моделей с преобразованными атрибутами в каналах трансляции.
✅ Валидация файлов: Валидатор mimetypes теперь корректно обрабатывает файлы без расширения.
✅ Формы и CSRF: Исправлено поведение CSRF-токенов при использовании форм внутри модальных окон и SPA-сценариев.
✅ Оптимизация памяти: Улучшена работа с памятью при обработке больших коллекций в BelongsToMany отношениях.

✨ Новые возможности

✅ Динамические каналы трансляции: Добавлена поддержка динамических (private/presence) каналов трансляции через новый метод channel() в маршрутах.
✅ Кастомные драйверы очередей: Расширена возможность подключения пользовательских драйверов очередей через метод Queue::extend().
✅ Гибкий поиск в Paginator: В Paginator добавлен метод appendsQueryString(), позволяющий тонко управлять параметрами строки запроса.
✅ Улучшенная типизация: Добавлены строгие типы (type hints) и аннотации PHPDoc в классы Pipeline, Conditionable, ValidatedInput.
✅ Локализация сообщений: В сообщениях об ошибках валидации теперь поддерживаются плейсхолдеры с атрибутами перевода.
✅ Интеграция с Horizon: Добавлены события JobProcessing, JobProcessed, JobFailed для улучшенного мониторинга очередей через Horizon.

⚡️ Прочие улучшения

✅ Производительность: Ускорена загрузка сервис-провайдеров за счёт оптимизации кэширования конфигураций.
✅ Тестирование: В TestResponse добавлены методы assertSessionHasErrorsIn() и assertSessionDoesntHaveErrorsIn() для точной проверки ошибок по ключам.
✅ Артизан-команды: В команде make:model появилась опция --pivot для быстрого создания моделей сводных таблиц.
✅ Документация: Обновлены и дополнены PHPDoc-аннотации в классах HttpClient, DatabaseManager, BladeCompiler.

Полный список изменений можно найти в официальном релизе

📱 @dev_notes_ru

#Laravel #Laravel12

👩‍💻 Типизация JavaScript: почему JSDoc — это полноценная альтернатива TypeScript

А вы знали, что можно получить все преимущества TypeScript, оставаясь в рамках чистого JavaScript? Всё благодаря JSDoc — системе типизации, которая работает через комментарии. В обновлённой статье:

✅ Добавили больше практических примеров аннотаций
✅ Расширили сравнение рабочих процессов (workflow)
✅ Включили ответы на частые вопросы из комментариев

Этот подход идеален для легаси-проектов, скриптов и случаев, где важна скорость разработки без настройки сборки. Обновление делает материал ещё более прикладным.

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

📱 @dev_notes_ru

#JavaScript #JSDoc #TypeScript

👩‍💻 Типизация JavaScript через JSDoc: Руководство по настройке TypeScript Compiler

Используете JSDoc только для подсказок в редакторе? Тогда вы теряете главное: сквозную проверку типов от локальной разработки до продакшена.

В свежей статье рассматриваем профессиональную настройку системы типов через TypeScript Compiler:

🔹 Как за 5 минут включить проверку типов во всём проекте.
🔹 Автоматическая генерация .d.ts файлов для ваших библиотек.
🔹 Интеграция строгой проверки в CI/CD — код с ошибками не попадёт в main.

Это не хак, а легитимный подход для больших проектов. Если вы до сих пор просто ставите // @ts-check и думаете, что это всё — вам сюда.

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

📱 @dev_notes_ru

#JavaScript #JSDoc #TypeScript

👩‍💻 Директива location в Nginx: Полное руководство с примерами

Эффективная и безопасная конфигурация веб-сервера требует чёткого понимания принципов работы директивы location в Nginx. В новом материале представлено полное руководство, охватывающее ключевые аспекты:

✅ Синтаксис модификаторов и алгоритм выбора блоков
✅ Практическое различие между директивами root и alias
✅ Готовые конфигурации для веб-приложений, API и балансировки нагрузки

Руководство также актуально для пользователей Angie, сохраняя полную совместимость конфигураций.

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

📱 @dev_notes_ru

#Nginx #Angie #location #DevOps

👩‍💻 Совет по JavaScript: matchMedia()

Знаешь, как в JavaScript проверить, соответствует ли текущий viewport мобильному виду?

Не нужно городить window.innerWidth и слушать resize вручную.

Используй matchMedia — тот же самый медиа-запрос, что и в CSS:

const mq = matchMedia('(max-width: 550px)');

// Текущее состояние
console.log(mq.matches); // true / false

// Реагируем на изменения
mq.addEventListener('change', e => {
  console.log('Мобильный?', e.matches);
});

✅ Работает синхронно
✅ Использует те же условия, что и в стилях
✅ Не нужно самому отслеживать ресайз

📱 @dev_notes_ru

#JavaScript #CSS #Frontend