Заметки разработчика
471 subscribers
672 photos
4 videos
1.17K links
Заметки о Frontend, Backend и немного DevOps. В основном о #PHP, #Laravel, #JavaScript, #HTML, #CSS, тестировании и настройке серверов.

https://www.dev-notes.ru

@snakenf
Download Telegram
#js #JavaScript #tips #frontend #webdev

Хотите генерировать случайные цвета с помощью JavaScript?

Сейчас я покажу как это сделать 🎨.

@dev_notes_ru
👍1
#laravel #breeze #php #tips #backend #webdev

Совет Laravel Breeze.

Хотите добавить пункт меню в верхнюю навигацию?

Не забудьте сделать это в ДВУХ местах:
x-nav-link для десктопного меню
x-responsive-nav-link для мобильного меню

@dev_notes_ru
👍1
#Laravel #LazyCollection #php #backend #webdev

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

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

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

📱 @dev_notes_ru
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥21
#Laravel #helper #php #backend #webdev

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

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

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

📱 @dev_notes_ru
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥1
👩‍💻 Вышел 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3