👩‍💻 CSS content-visibility: Улучшение производительности веб-сайтов

CSS свойство content-visibility откладывает рендеринг элемента, включая компоновку и отрисовку, до тех пор, пока он не понадобится

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

Представьте: вы листаете огромную веб-страницу с сотнями изображений, сложными макетами и контентом, которого хватит на целую книгу. Без content-visibility браузеры послушно отображают каждый пиксель, независимо от того, видите его или нет. Это, как в ресторане — готовят каждое блюдо в меню на случай, если кто-то его закажет.

CSS свойство content-visibility сообщает браузерам, что они могут не рендерить элементы пока они вне области просмотра. Это может показаться простым, но для страниц с длинным скроллингом это очень важно.

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

📱 @dev_notes_ru

#Frontend #CSS #ContentVisibility

👩‍💻 Работа с JavaScript Scheduler API

Откройте возможности управления приоритетами и контроля выполнения задач в JavaScript с помощью нового Scheduler API. Новый подход поможет вам стать более продуктивными и эффективными в своей работе.

JavaScript Scheduler API представляет стандартизированный подход к управлению приоритетами задач в веб-приложениях.

Разработчики JavaScript исторически полагались на setTimeout(0) для передачи главного потока. Новый API обеспечивает более точный контроль над тем, как и когда выполняются задачи.

Традиционному подходу setTimeout к передаче главного потока не хватает детального контроля и правильной расстановки приоритетов. API Scheduler устраняет эти недостатки, предлагая более надёжное решение.

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

📱 @dev_notes_ru

#JavaScript #Scheduler

💡 Совет по Laravel: Метод `remove` Str

Вам когда-нибудь требовалось удалить несколько символов из текста? Хотя это можно сделать вручную с помощью функций PHP, Laravel предоставляет гораздо более удобную обертку remove, которая также может быть связана с другими методами 🚀.

📱 @dev_notes_ru

#Laravel #Str #tips

💡 Совет по Laravel: Метод `withWhereHas`

Вам когда-нибудь требовалось загрузить отношения в режиме жадной загрузки, но при этом ограничить их существование? Хотя это можно сделать вручную с помощью двух методов, Laravel поставляется с методом withWhereHas, позволяющим сделать именно это 🚀.

📱 @dev_notes_ru

#Laravel #tips

📱 @dev_notes_ru

#joke

Описание работы vs Работа

📱 @dev_notes_ru

#joke

👩‍💻 HTML элемент search

24 марта 2023 года в спецификации HTML появился элемент search — специализированный контейнер для интерфейсов поиска.

Элемент <search> служит семантической обёрткой для форм поиска и фильтрующих компонентов UI. Он обеспечивает лучшую доступность, чем общие элементы <div>, и разъясняет назначение связанного с поиском контента как браузерам, так и вспомогательным технологиям.

До его появления разработчики полагались на типовые элементы div с ролями ARIA для обозначения областей поиска — решение приемлемое, но не идеально. Элемент search меняет ситуацию, предоставляя собственное семантическое значение для интерфейсов поиска и фильтрации.

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

📱 @dev_notes_ru

#html #search

👩‍💻 CSS единицы измерения lh и rlh

Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.

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

📱 @dev_notes_ru

#Frontend #CSS #lh #rlh

Дорогой Санта я хочу создать операционную систему с помощью HTML

📱 @dev_notes_ru

#joke

Нарушителей заставят отлаживать PHP код

📱 @dev_notes_ru

#joke

👩‍💻 CSS @supports

Определение поддержки возможностей CSS и обеспечение интеллектуального отката с помощью @supports

Я постоянно использую @supports, проверяя, могут ли браузеры работать с современными возможностями CSS. Считайте, это страховкой для стилей — если браузер не поддерживает какую-либо современную функцию, можно обеспечить надёжный резервный вариант.

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

📱 @dev_notes_ru

#Frontend #CSS #supports

Ревью пул-реквеста после праздников

📱 @dev_notes_ru

#joke

👩‍💻 navigator.clipboard — Новый асинхронный Clipboard API в JavaScript

Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard

Впервые столкнувшись с новым API navigator.clipboard, я был поражён тем, насколько просто он упростил копирование и вставку в веб-приложениях. Прошли времена хаков document.execCommand.

Раньше для обработки операций с буфером обмена использовался document.execCommand("copy"). Этот подход был синхронным и ограниченным — он мог копировать текст только из выбранных элементов DOM. Кроме того, в разных браузерах он работал нестабильно.

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

📱 @dev_notes_ru

#JavaScript #Clipboard #API

👩‍💻 HTML элемент <details>: Встроенный аккордеон, который вы не используете

Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.

HTML элемент <details>, возможно, один из самых недооцененных встроенных элементов. Меня постоянно удивляет, как много разработчиков прибегают к использованию JavaScript, когда им нужно показать/скрыть содержимое, совершенно не обращая внимания на эту встроенную возможность.

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

📱 @dev_notes_ru

#HTML #details

👩‍💻 align-content: Простой способ выравнивания по центру с CSS

Наконец, можно центрировать/выравнивать по центу содержимое блочных макетов, не прибегая к flexbox гимнастике

Блочные макеты были частью CSS с самого начала, но им всегда не хватало необходимых элементов управления выравниванием. Теперь, благодаря поддержке align-content в блочных макетах, можно центрировать по вертикали с той же гибкостью, что и в flex и grid.

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

📱 @dev_notes_ru

#Frontend #CSS #AlignContent

👩‍💻 Не раздражающая валидация формы: CSS :user-valid и :user-invalid

Новые псевдоклассы :user-valid и :user-invalid предоставляют более умный способ стилизации состояния валидности формы в зависимости от действия пользователя.

Стилизация валидации форм всегда была сложной задачей. Новые псевдоклассы :user-valid и :user-invalid устраняют давнее неудобство CSS стилизации валидации форм — слишком раннее отображение состояния ошибки.

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

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

📱 @dev_notes_ru

#Frontend #CSS #Form #Validation

Отладка мелкого бага

📱 @dev_notes_ru

#joke

📱 @dev_notes_ru

#joke

👩‍💻 CSS `@import`: Плюсы и минусы

Использование @import обычно считается плохой практикой. Несмотря на определённые соображения, связанные с производительностью, @import предоставляет полезную функциональность, которой не обладает <link>.

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

📱 @dev_notes_ru

#Frontend #CSS #import