#js #JavaScript #tips #frontend #webdev
Хотите генерировать случайные цвета с помощью JavaScript?
Сейчас я покажу как это сделать 🎨.
@dev_notes_ru
Хотите генерировать случайные цвета с помощью JavaScript?
Сейчас я покажу как это сделать 🎨.
@dev_notes_ru
👍1
#Laravel #LazyCollection #php #backend #webdev
👩💻 Оптимизация обработки больших массивов данных с Lazy Collection
При работе с большими массивами данных в Laravel использование памяти может быстро стать узким местом. Lazy Collection предлагает элегантное решение проблемы, позволяя эффективно работать с большими объёмами данных. Давайте рассмотрим, как использовать эту мощную функцию в приложениях Laravel.
🖥 Читать статью
📱 @dev_notes_ru
При работе с большими массивами данных в Laravel использование памяти может быстро стать узким местом. Lazy Collection предлагает элегантное решение проблемы, позволяя эффективно работать с большими объёмами данных. Давайте рассмотрим, как использовать эту мощную функцию в приложениях Laravel.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥2❤1
#Laravel #helper #php #backend #webdev
👩💻 Упрощение преобразования данных с хелпером
Laravel хелпер
🖥 Читать статью
📱 @dev_notes_ru
transform()Laravel хелпер
transform() — мощный, но недооценённый инструмент, способный очистить код при работе с условными модификациями данных. Эта универсальная функция позволяет преобразовывать данные только при соблюдении определённых условий, что делает её идеальной для обработки пользовательского ввода, форматирования ответов API или предоставления значений по умолчанию. Рассмотрим, как эффективно использовать хелпер transform() в проектах Laravel.Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1🔥1
Новый выпуск Firefox — это не просто набор обновлений, а настоящий прорыв в инструментах для веб-разработки. Основные нововведения: CSS Anchor Positioning по умолчанию, мощный Navigation API и расширенные возможности View Transitions. Давайте разберем все детали.
CSS Anchor Positioning (якорное позиционирование) — это настоящая революция в CSS. Теперь можно «привязывать» один элемент (например, тултип или выпадающее меню) к другому (якорю) прямо в CSS, без JavaScript, создавая отзывчивые интерфейсы.
Что теперь можно в Firefox 147:
Включено по умолчанию! Больше никаких флагов.
anchor-center: Новое, удобное значение для свойств align-self, justify-self и других, чтобы центрировать элемент относительно его якоря.position-anchor: none: Новое значение для отвязки элемента от якоря.@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, а анимации — в панели анимаций.Iterator.concat() для объединения итераторов.-webkit-perspective для совместимости, новые единицы измерения (rcap, rch, rex, ric) на основе шрифта корневого элемента, свойства counter-* и quotes для ::marker.API: WebGPU теперь для всех macOS на Apple Silicon, Brotli-сжатие в CompressionStream, CSS-модули (импорт стилей как CSSStyleSheet), Service Workers как ES-модули.localhost.Firefox 147 — это не просто обновление, а серьезный шаг к более выразительной, производительной и простой в разработке веб-платформе. CSS Anchor Positioning обещает сократить объем пользовательского JavaScript для раскладки. Navigation API и View Transitions делают навигацию в SPA предсказуемой и кинематографичной. А WebGPU и другие API открывают двери для новых классов веб-приложений.
#Firefox #WebDev #CSS #JavaScript #AnchorPositioning #ViewTransitions #NavigationAPI #Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3