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

🚀 Laravel v12.4: Новый каст AsHtmlString для HTML-контента

Laravel представил новое приведение типа для Eloquent — AsHtmlString, автоматически преобразующее атрибут модели в экземпляр HtmlString.

🔹 Пример использования:

use Illuminate\Database\Eloquent\Casts\AsHtmlString;

protected $casts = [
    'content' => AsHtmlString::class,
];

Теперь при обращении к $model->content вы получите объект HtmlString, доступный для вывода в Blade:

{!! $model->content !!}

✅ Преимущества:

• Упрощает работу с HTML из базы данных
• Избавляет от ручного оборачивания в new HtmlString(...)
• Обеспечивает корректный вывод HTML в Blade

📌 Рекомендуется для безопасного HTML-контента.

📱 @dev_notes_ru

#Laravel12

Создание кастов моделей в Laravel

В статье мы рассмотрим, что такое мутаторы, аксессоры и касты и как их использовать в приложении Laravel. Также рассмотрим, как создавать и тестировать касты в Laravel и хранить объекты в базе данных.

Касты, мутаторы и аксессоры моделей — это то, с чем приходится часто работать при создании приложений Laravel. Они играют важную роль во взаимодействии с моделями и данными, лежащими в их основе.

Laravel поставляется с множеством удобных встроенных кастов, обеспечивающих большинство сценариев использования. Но могут возникнуть ситуации, когда потребуется создать собственные касты для хранения и получения данных определённым образом.

В статье мы рассмотрим, что такое касты, мутаторы и аксессоры моделей в Laravel. Затем рассмотрим, как можно создавать собственные классы кастов и писать для них тесты.

К концу статьи вы должны чувствовать себя достаточно уверенно, приступая к использованию собственных кастов Laravel в своих приложениях.

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

📱 @dev_notes_ru

#Laravel12 #Eloquent

Типы пользователей GitHub

📱 @dev_notes_ru

#joke

Дресс-код

📱 @dev_notes_ru

#joke

Использование `attr()` в CSS для столбцов, цвета и размера шрифта

Теперь можно брать значения из атрибутов HTML, имеющих типы, так что если в элемент поместить атрибут data-font-size="2.2rem", то его значение можно присвоить.


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

📱 @dev_notes_ru

#Frontend #CSS #attr

Глобальное предотвращение проблемы N+1 в Laravel с автоматической жадной загрузки

Жадная загрузка в Laravel — это способ загрузки связанных моделей при запросе к модели. Она сделана для предотвращения проблемы N+1, возникающей, при загрузке модели и последующей поочерёдной загрузке связанных с ней моделей, что приводит к многочисленным запросам к базе данных.

Проблема N+1 может стать проблемой производительности, если много связанных моделей. Жадная загрузка позволяет загрузить все связанные модели в одном запросе, что может значительно повысить производительность.

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

📱 @dev_notes_ru

#Laravel12 #Eloquent #EagerLoading

Разноцветное выделение текста в CSS

`::selection` — это круто, но использование селекторов типа `:nth-child(5n+2)` — гораздо интереснее.


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

📱 @dev_notes_ru

#Frontend #CSS

`:only-child`

Иногда возникает необходимость изменить стиль элемента, если у него нет соседних элементов, и это очень просто сделать с помощью псевдокласса :only-child.

Это может быть удобно при работе с динамическим контентом, когда необходимо изменить внешний вид, если есть только один дочерний элемент, или если есть что-то вроде <figure>, где необходимо придать элементу разный стиль в зависимости от того, есть или нет <figcaption>.

figure {
  border-radius: 16px;
  padding: 4px;
  border: 1px solid black;
}

figure > img {
  border-radius: 12px 12px 0 0;
}

figure > figcaption {
  padding: 6px;
  border-radius: 0 0 12px 12px;
}

figure > img:only-child {
  border-radius: 12px;
}

Также можно сделать обратное, с помощью :not(:only-child).

Недавно я обнаружил, что сочетание с :has() может быть очень удобным, когда необходимо проверить, есть ли у элемента только один дочерний элемент:

/* Карточки с одним элементом получают больший padding */
.card:has(> :only-child) {
  padding: 2rem;
}

/* Карты с несколькими дочерними элементами сохраняют стандартный padding */
.card {
  padding: 1rem;
}

📱 @dev_notes_ru

#Frontend #CSS

Модернизация с Web-платформой: Уменьшение движения

Демонстрация, как современная веб-платформа может упростить уменьшение движения на старой кодовой базе.

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

📱 @dev_notes_ru

#Frontend #CSS #JavaScript #A11y

Резервные значения CSS переменных

Браузер не знает, является ли значение CSS переменной валидным, пока переменная не будет разрешена, а к тому времени её обработает каскад и отбросит возможные резервные значения.

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

📱 @dev_notes_ru

#Frontend #CSS

📱 @dev_notes_ru

#joke

📱 @dev_notes_ru

#joke

Метод `owns()`, которого не хватает в Eloquent

Хотя Eloquent ORM в Laravel довольно мощный и покрывает основные потребности для большинства случаев использования, всегда будет чего-то не хватать. Другими словами, всегда найдётся функция, которая не нужна пока не понадобится.

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

📱 @dev_notes_ru

#Eloquent #owns

👩‍💻 Быстрая сортировка строк с `Intl.Collator`

Улучшите сортировку строк с учётом локали, заменив повторяющиеся вызовы `String.localeCompare` одним экземпляром `Intl.Collator` для более быстрого и эффективного сравнения.

Сортировка строк может создавать неожиданные проблемы с производительностью, особенно при работе с большими наборами данных, нуждающимися в соответствующей локализации. Многие разработчики полагаются на String.localeCompare для сортировки по алфавиту, но есть и более эффективный подход, заслуживающий внимания.

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

📱 @dev_notes_ru

#JavaScript

Использование `currentColor` в 2025 году

Нужен ли `currentColor`? Не совсем, лучше использовать CSS переменные. Однако он всё равно имеет свою ценность, и об этом стоит поговорить..

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

📱 @dev_notes_ru

#Frontend #CSS #currentColor

Изменение стиля UA вложенного заголовка `h1`

Браузеры начинают внедрять изменения в стили UA по умолчанию для вложенных заголовков разделов. Разработчикам следует убедиться, что их сайты не используют стили UA в определённых случаях, во избежание непредвиденных результатов и ошибок в проверках Lighthouse. Рассмотрим, что представляют собой эти изменения, как определить, есть ли проблема на ваших страницах, и дадим несколько советов по обеспечению соответствия и улучшению структуры сайтов.

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

📱 @dev_notes_ru

#Frontend #UA #CSS

📱 @dev_notes_ru

#joke

CSS функции `min()` и `max()`

По моему опыту, CSS функцию clamp() любят больше, чем min() и max().

Конечно, она часто оказывается самой удобной, но и min(), и max() также могут принести огромную пользу.

В отличие от clamp(), требующей трех значений, функции min() и max() принимают столько значений, сколько необходимо.

Например, можно сделать что-то вроде этого:

.element {
  inline-size: min(100%, 960px, 60ch);
}

Я начал использовать min() во многих местах, где раньше использовал свойства max-, например, max-inline-size.

Один из распространенных примеров — классы .container/.wrapper:

.wrapper {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

В данном случае я выбираю меньшее значение между 100% - 32px и 960px.

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

.wrapper {
  --max-width: 960px;
  --padding: 16px;
  
  width: min(
           100% - var(--padding) * 2,
           var(--max-width)
         );
}

Может показаться, что это требует больше усилий, но я предпочитаю использовать переменные CSS для таких вещей, поскольку при необходимости они легко изменяются.

📱 @dev_notes_ru

#Frontend #CSS

Пора пофиксить этот баг
Позже в тот же день...

📱 @dev_notes_ru

#joke

Обновлён цикл статей по рефакторингу CSS

🖥 Рефакторинг CSS: Введение
🖥 Рефакторинг CSS: Стратегия, тестирование и сопровождение
🖥 Рефакторинг CSS: Оптимизация размера и производительности

📱 @dev_notes_ru

#Frontend #CSS #Рефакторинг