Заметки разработчика

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

📱 @dev_notes_ru

#joke

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

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

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

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

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

📱 @dev_notes_ru

#Frontend #CSS #Form #Validation

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

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

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

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

📱 @dev_notes_ru

#Frontend #CSS #AlignContent

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

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

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

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

📱 @dev_notes_ru

#HTML #details

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

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

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

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

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

📱 @dev_notes_ru

#JavaScript #Clipboard #API

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

📱 @dev_notes_ru

#joke

👩‍💻 CSS @supports

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

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

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

📱 @dev_notes_ru

#Frontend #CSS #supports

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

📱 @dev_notes_ru

#joke

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

📱 @dev_notes_ru

#joke

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

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

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

📱 @dev_notes_ru

#Frontend #CSS #lh #rlh

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

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

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

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

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

📱 @dev_notes_ru

#html #search

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

📱 @dev_notes_ru

#joke

📱 @dev_notes_ru

#joke

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

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

📱 @dev_notes_ru

#Laravel #tips

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

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

📱 @dev_notes_ru

#Laravel #Str #tips

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

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

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

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

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

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

📱 @dev_notes_ru

#JavaScript #Scheduler

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

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

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

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

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

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

📱 @dev_notes_ru

#Frontend #CSS #ContentVisibility

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

Вам когда-нибудь нужно было создать ключ к коллекции по атрибуту из её элементов? Хотя это можно сделать при помощи хака с pluck, метод keyBy делает именно это 🚀.

📱 @dev_notes_ru

#Laravel #Collection #tips

👩‍💻 CSS :has() — Псевдокласс, который давно ждали

Псевдокласс :has(), устраняет давнее ограничение в CSS — невозможность стилизовать элементы на основе их содержимого.

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

Реляционный псевдокласс :has() — функциональный псевдокласс работающий как условная проверка содержимого элемента. Он позволяет применять стиль в зависимости от того, содержит ли элемент определённые дочерние элементы.

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

📱 @dev_notes_ru

#Frontend #CSS #has