👩‍💻👩‍💻 Тёмная и светлая темы для SVG

Использование CSS функции `light-dark()` для реализации светлого и тёмного режима для SVG иконок,включая SVG, используемые с HTML элементом `img` или в качестве CSS свойства `background-image`.

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

📱 @dev_notes_ru

#Frontend #HTML #CSS

💡 Совет по Laravel: Подсказка о пропущенных аргументах

Вам приходилось контролировать, что пользователь вводит необходимые аргументы в консоли? Laravel поставляется с контрактом PromptsForMissingInput для автоматической подсказки пользователю о пропущенных аргументах 🚀.

📱 @dev_notes_ru

#Laravel #tips

👩‍💻 Начиная с Laravel v12.4.0, можно объявить новый метод в классе миграции - shouldRun().

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

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

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

📱 @dev_notes_ru

#Laravel #tips

👩‍💻 Упрощение CSS с псевдоклассом `:is()`

Недавно появился повод воспользоваться новым псевдоклассом CSS `:is()`, и он превосходен! Хочу рассказать, как с его помощью можно значительно уменьшить сложность селекторов.

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

📱 @dev_notes_ru

#Frontend #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

📱 @dev_notes_ru

#joke #css

📱 @dev_notes_ru

#joke

💡 Совет по Laravel: Контроль доставки уведомлений

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

📱 @dev_notes_ru

#Laravel #tips

👩‍💻 Понимание селектора `:root` и CSS переменных

Используйте возможности CSS3 с селектором `:root`, упрощающим глобальную стилизацию, повышающим удобство сопровождения и открывающим динамичный, отзывчивый дизайн.

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

📱 @dev_notes_ru

#Frontend #CSS

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

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

📱 @dev_notes_ru

#Frontend #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

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

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

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

📱 @dev_notes_ru

#Frontend #UA #CSS

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

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

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

📱 @dev_notes_ru

#Frontend #CSS #currentColor

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

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

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

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

📱 @dev_notes_ru

#JavaScript

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

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

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

📱 @dev_notes_ru

#Eloquent #owns

📱 @dev_notes_ru

#joke

📱 @dev_notes_ru

#joke

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

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

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

📱 @dev_notes_ru

#Frontend #CSS

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

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

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

📱 @dev_notes_ru

#Frontend #CSS #JavaScript #A11y