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

Изменение стиля 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 #Рефакторинг

👩‍💻 Понимание селектора `:root` и CSS переменных Используйте возможности CSS3 с селектором `:root`, упрощающим глобальную стилизацию, повышающим удобство сопровождения и открывающим динамичный, отзывчивый дизайн. 🖥 Читать статью 📱 @dev_notes_ru #Frontend #CSS

💡 Совет по Laravel: Контроль доставки уведомлений Бывают случаи, когда необходимо определить, должно ли уведомление, поставленное в очередь, отправляться пользователю, например, когда пользователь может отказаться от уведомлений. Laravel поставляется с функцией shouldSend, позволяющей сделать именно это 🚀. 📱 @dev_notes_ru #Laravel #tips

📱 @dev_notes_ru #joke

📱 @dev_notes_ru #joke #css

CSS Working Group приняла решение разрешить синтаксис диапазона в запросах style. Можно сравнивать с переменной контейнера:

@container style(--var < 5em)

Но можно сравнивать и обычные значения:

style(1em < 20px)
style(sibling-count() > 3)

Функция style также может быть использована для условий встроенных if() Функция style() разработана для работы с именами свойств, поэтому можно использовать переменные без var(). Возможно, когда-нибудь браузеры также позволят обращаться к нестандартным свойствам напрямую. Но, так же можно использовать var(). Если вам нравится var() или возможность использования резервных значений, он тоже работает! 📱 @dev_notes_ru #CSS #feature

👩‍💻 Упрощение CSS с псевдоклассом `:is()` Недавно появился повод воспользоваться новым псевдоклассом CSS `:is()`, и он превосходен! Хочу рассказать, как с его помощью можно значительно уменьшить сложность селекторов. 🖥 Читать статью 📱 @dev_notes_ru #Frontend #CSS

👩‍💻 Начиная с Laravel v12.4.0, можно объявить новый метод в классе миграции - shouldRun(). Как следует из названия, метод возвращает логическое значение, определяющее, должен ли Laravel запустить миграцию. Этот метод может быть полезен в сценариях, когда необходимо условно выполнить определенные миграции в зависимости от условий запуска. Например, можно создать таблицу реферальных программ, только если она включена в конфигурации 🚀. 📱 @dev_notes_ru #Laravel #tips

💡 Совет по Laravel: Подсказка о пропущенных аргументах Вам приходилось контролировать, что пользователь вводит необходимые аргументы в консоли? Laravel поставляется с контрактом PromptsForMissingInput для автоматической подсказки пользователю о пропущенных аргументах 🚀. 📱 @dev_notes_ru #Laravel #tips

👩‍💻👩‍💻 Тёмная и светлая темы для SVG Использование CSS функции `light-dark()` для реализации светлого и тёмного режима для SVG иконок,включая SVG, используемые с HTML элементом `img` или в качестве CSS свойства `background-image`. 🖥 Читать статью 📱 @dev_notes_ru #Frontend #HTML #CSS

💡 Совет по PHP: `Callable` объекты первого класса В PHP 8.1 появились callable объекты первого класса. Они могут добавлять синтаксический сахар, особенно при работе с коллекциями Laravel, где часто используются замыкания 🚀. 📱 @dev_notes_ru #PHP #tips

99 мелких багов в коде 99 мелких багов в коде Разобрались с одним, пропатчили его 117 мелких багов в коде 📱 @dev_notes_ru #joke

Здесь сказано, что вы должны быть в аду, но поскольку вы писали на Ассамблере, мы засчитаем это как отработанное наказание. 📱 @dev_notes_ru #joke

👩‍💻 Laravel Context: Умное хранение и протоколирование данных в запросе Начиная с Laravel 11+, фреймворк представил мощную функцию — Context, позволяющую хранить временные данные в рамках одного запроса, задания или консольной команды. А в Laravel 12 она стала ещё лучше — теперь контекст автоматически внедряется в логи, HTTP-запросы, события и исключения. Примеры использования в приложении Laravel: 🛡 В middleware, сервисах или в любом другом месте вашего кода

use Illuminate\Support\Facades\Context;
use Illuminate\Support\Str;

Context::add('trace_id', (string) Str::uuid());
Context::add('app_section', 'checkout');
Context::add('server', gethostname());
Context::add('currency', 'USD');

📄 В контроллерах, логах или событиях:

Log::info('Payment started in section [{app_section}].', [
    'user_id' => $user->id,
    'amount' => $amount,
]);

🌐 При отправке внешних HTTP-запросов:

Http::withHeaders([
    'X-Trace-Id' => Context::get('trace_id'),
])->post('https://api.payment.com/charge', [...]);

✨ Что можно хранить в `Context`? ✅ ID текущего пользователя или ID трассировки ✅ Имя сервиса/модуля ✅ Метаданные среды (сервер, регион, локаль) ✅ Флаги бизнес-логики (валюта, роль, точка входа) ✅ Преимущества использования Context: ✅ Глобальный доступ в рамках текущего запроса ✅ Безопасно и изолированно (не влияет на другие запросы) ✅ Автоматическая инъекция в логи, исключения, HTTP-вызовы, события и задания ✅ Идеально подходит для отладки, мониторинга и отслеживания запросов в больших или распределенных системах 📌 Думайте о Context как о «временном хранилище данных», которое может использоваться во всех приложениях и не нужно повсеместно передавать переменные. Это чистый, современный способ отслеживания и управления данными, относящимися к конкретным запросам. 📱 @dev_notes_ru #Laravel #Context #tips

👩‍💻 PHP 8.4: Новый DOM Selector API — работа с DOM с помощью CSS селекторов! В PHP 8.4 появилось мощное обновление — теперь можно выбирать элементы DOM с помощью CSS селекторов, как в JavaScript! Встречайте новые методы: querySelector() и querySelectorAll(). Примеры использования ✅ Выбор по классу и идентификатору:

$dom = new DOMDocument();
$dom->loadHTML('
    <div id="title">Title by ID</div>
    <div class="header">Title by class</div>
');

// По ID
$title = $dom->querySelector('#title');
echo $title->textContent;  // Title по ID

// По классу
$header = $dom->querySelector('.header');
echo $header->textContent;  // Title по классу

✅ Выбор нескольких элементов:

$dom = new DOMDocument();
$dom->loadHTML('
    <ul>
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
    </ul>
');

$items = $dom->querySelectorAll('.item');
foreach ($items as $item) {
    echo $item->textContent . "\n";
}

✨ Почему это замечательно: ✅ Знакомый синтаксис CSS — чистый и интуитивно понятный ✅ Меньше шаблонов — больше никаких вложенных циклов или getElementsBy...() ✅ Точный выбор элемента — по идентификатору, классу, тегу или любой комбинации 📌 Теперь работа с HTML в PHP похожа на JavaScript — и это намного удобнее! 📱 @dev_notes_ru #PHP #tips

👩‍💻 Laravel: Не забудьте о начальной настройке! Перед развертыванием проекта Laravel убедитесь, что параметры безопасности и стабильности правильно настроены. Вот несколько важных настроек, которые необходимо добавить в сервис провайдер (например, AppServiceProvider). 💡 Принудительное использование HTTPS в продакшне Принудительное использование HTTPS для всех URL-адресов (кроме локального окружения):

private function enforceSecureUrls(): void
{
    if (!$this->app->environment('local')) {
        URL::forceScheme('https');
    }
}

✅ Защищает пользовательские данные ✅ Предотвращает проблемы со смешанным контентом 💡 Предотвращение выполнения деструктивных команд базы данных Отключение опасных SQL команд (DROP, TRUNCATE) в продакшне:

DB::prohibitDestructiveCommands($this->app->isProduction());

✅ Предотвращает случайную потерю данных в живой базе данных 💡 Включение кэширования конфигураций и маршрутов Ускоряет работу приложения в продакшне:

php artisan config:cache
php artisan route:cache

✅ Снижает нагрузку на сервер и улучшает время отклика 💡 Где их разместить Добавьте enforceSecureUrls() и DB::prohibitDestructiveCommands() в метод boot() своего AppServiceProvider:

public function boot(): void
{
    $this->enforceSecureUrls();
    DB::prohibitDestructiveCommands($this->app->isProduction());
}

📱 @dev_notes_ru #Laravel #tips