#Laravel #LazyCollection #php #backend #webdev

👩‍💻 Оптимизация обработки больших массивов данных с Lazy Collection

При работе с большими массивами данных в Laravel использование памяти может быстро стать узким местом. Lazy Collection предлагает элегантное решение проблемы, позволяя эффективно работать с большими объёмами данных. Давайте рассмотрим, как использовать эту мощную функцию в приложениях Laravel.

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

📱 @dev_notes_ru

#Laravel #helper #php #backend #webdev

👩‍💻 Упрощение преобразования данных с хелпером transform()

Laravel хелпер transform() — мощный, но недооценённый инструмент, способный очистить код при работе с условными модификациями данных. Эта универсальная функция позволяет преобразовывать данные только при соблюдении определённых условий, что делает её идеальной для обработки пользовательского ввода, форматирования ответов API или предоставления значений по умолчанию. Рассмотрим, как эффективно использовать хелпер transform() в проектах Laravel.

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

📱 @dev_notes_ru

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

👩‍💻 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: группировка данных

Устали вручную группировать массивы? Теперь это встроенная функция! Object.groupBy() — ваш новый лучший друг для сортировки данных по любому строковому свойству.

const tasks = [
  { description: 'Task 1', tag: 'Tag 1', project: 'Project A' },
  { description: 'Task 2', tag: 'Tag 1', project: 'Project B' },
  { description: 'Task 3', tag: 'Tag 2', project: 'Project A' },
];

const tasksByProject = Object.groupBy(tasks, (task) => task.project);
console.log(tasksByProject);

Результат:

{
  'Project A': [
    { description: 'Task 1', tag: 'Tag 1', project: 'Project A' },
    { description: 'Task 3', tag: 'Tag 2', project: 'Project A' },
  ],
  'Project B': [
    { description: 'Task 2', tag: 'Tag 1', project: 'Project B' },
  ]
}

✅ Поддержка: Все современные браузеры и JS-окружения поддерживают этот метод с марта 2024 года.
Для старых платформ доступен полифил через core-js.

🔑 Ключи любого типа: Если нужно использовать в качестве ключа не только строки, но и объекты, числа и другие типы — используйте Map.groupBy().

📱 @dev_notes_ru

#JavaScript #WebDev #Frontend