👩‍💻 CSS эффект Slice от Ana Tudor

Slice! - одно из моих любимых и, безусловно, самое популярное демо, которое я сделала в этом году.

Никакого JS, никакого дублирования текста, никаких изображений, кроме CSS-градиентов. SVG-фильтры позаботились как о текстуре, так и об эффекте «slice + offset».🪄

Также contenteditable.😼

👩‍💻 https://codepen.io/thebabydino/pen/GRaKbZo

📱 @dev_notes_ru

#CSS #effects #codepen #tips

👩‍💻 Новое в Symfony 7.2: Silent Verbosity

Symfony 7.2 представляет silent verbosity для подавления всего вывода, включая ошибки.

При работе с некоторыми сторонними сервисами может потребоваться, чтобы приложение Symfony создавало логи в формате JSON для более удобной интеграции. К счастью, этого можно легко добиться с помощью интеграции Symfony с Monolog.

Однако при выполнении некоторых консольных команд они могут генерировать вывод как в потоке stdout, так и в потоке stderr. Это проблематично, если сторонний сервис ожидает только JSON-файлы логов и сталкивается с этими неструктурированными данными.

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

📱 @dev_notes_ru

#Symfony #features #verbosity

👩‍💻 Напоминание, что @scope и блоки стилей HTML — это мощное сочетание

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


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

📱 @dev_notes_ru

#frontend #css #scope

💡 Совет по Laravel: Перемещение столбца на первую позицию

Знаете ли вы, что можно переместить столбец на первую позицию в таблице, даже если он была добавлен позже? Для этого используйте метод first() 🚀.

📱 @dev_notes_ru

#laravel #migration #tips

👩‍💻+👩‍💻 Вкладки со скруглёнными углами и границами

Пример переключения между вкладками от Ana Tudor

Изначально я сделала это после того, как кто-то спросил, как создать вкладки с закругленными углами и границами.

👩‍💻 https://codepen.io/thebabydino/pen/oNKLLbv

Ванильный CSS + JS + немного SVG-магии.🪄

📱 @dev_notes_ru

#CSS #JS #codepen #tips

👩‍💻 Новое в Symfony CLI: автодополнение команд

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

Хорошая новость заключается в том, что начиная с Symfony CLI v5.10, Symfony CLI предоставляет автодополнение команд для оболочек Bash, ZSH и Fish.

Чтобы включить его, следуйте инструкциям, отображаемым командой symfony completion --help.

Но это ещё не всё! Знаете ли вы, что Symfony Console обеспечивает автодополнение команд bin/console в вашей оболочке? Да! Начиная с версии 5.4 для Bash, 6.1 для Fish и 6.2 для ZSH. Поэтому Symfony CLI может перенаправлять инструкции автодополнения команд в проект Symfony при автодополнение команд symfony console из коробки!

Но и это ещё не всё! Вы, наверное, знаете, что сам Composer использует Symfony Console. Так что да, в symfony composer тоже будет работать!

Это отличный вариант для тех, кто работает над несколькими проектами с разными окружениями, версиями Symfony или PHP, чтобы получить автодополнение команд, работающее без сбоев.

В качестве небольшого приятного бонуса, поскольку Symfony CLI также разработан с использованием автономных библиотек с открытым исходным кодом, эта функция автодополнения команд теперь доступна для любого инструмента, использующего symfony-cli/console, как, например, Blackfire CLI.

📱 @dev_notes_ru

#Symfony #cli

👩‍💻 Новое в Symfony 7.2: Улучшения языка выражений

В Symfony 7.2 улучшен компонент ExpressionLanguage, добавлены новые битовые и логические операторы, упрощена регистрация кастомных провайдеров и реализована поддержка комментариев.

Компонент ExpressionLanguage предоставляет механизм, позволяющий компилировать и оценивать выражения. Основное назначение компонента — позволить пользователям использовать выражения внутри конфигурации для более сложной логики. В Symfony 7.2 мы улучшили его, добавив новые возможности.

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

📱 @dev_notes_ru

#Symfony #features #ExpressionLanguage

👩‍💻 Как деструктуризация массивов может замедлить JavaScript код

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

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

📱 @dev_notes_ru

#JavaScript #tips

💡 Совет по Laravel: Новый метод кэширования `flexible`

Начиная с Laravel v11.23.0, можно использовать новый метод flexible для кэширования. Если приходилось сталкиваться с проблемой перепроверки кэша до истечения срока его действия, воспользуйтесь им 🚀.

📱 @dev_notes_ru

#laravel #cache #tips

👩‍💻 Правильно выбранный viewBox может помочь избежать необходимости устанавливать кучу атрибутов

❌
<svg viewBox='0 0 12 12'>
  <line x1='3' y1='6' x2='9' y2='6' stroke='red' stroke-width='3'/>
</svg>
✅
<svg viewBox='-1 -2 4 4'>
  <line x2='2' stroke='red'/>
</svg>

Оба варианта дают одинаковый результат.

📱 @dev_notes_ru

#SVG #tips

👩‍💻 Новое в Symfony 7.2: Атрибут AsMessage

В Symfony 7.2 представлен новый атрибут #[AsMessage], позволяющий настраивать транспорт(ы) непосредственно в классе сообщения

Компонент Messenger представляет шину сообщений с возможностью отправки сообщений и их синхронной или асинхронной обработки с помощью транспорта (очередей). Основными элементами Messenger являются сообщения (PHP класс хранящий данные), обработчики (PHP класс вызываемый при отправке поддерживаемых им сообщений) и транспорты (обрабатывающие отправку и отправку сообщений).

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

📱 @dev_notes_ru

#Symfony #features #AsMessage

👩‍💻 Автоматизация резервного копирования баз данных c Laravel

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

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

📱 @dev_notes_ru

#Laravel #Backup

💡 Совет по Laravel: Используйте метод `set` в фабриках

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

📱 @dev_notes_ru

#laravel #factory #tips

👩‍💻Краткое пошаговое руководство по созданию внутренней тени для элемента img

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

📱 @dev_notes_ru

#SVG #tips

C’est la vie

📱 @dev_notes_ru

#joke

👩‍💻 Новое в Symfony 7.2: Именованные сериализаторы

Symfony 7.2 позволяет конфигурировать несколько экземпляров сериализаторов с различными контекстами по умолчанию, конвертерами имён, наборами нормализаторов и кодировщиков.

В Symfony 7.2 компонент Serializer позволяет настроить несколько экземпляров сериализатора с различными контекстами по умолчанию, конвертерами имён, наборами нормализаторов и кодировщиков. Это удобно, если ваше приложение взаимодействует с несколькими API, каждый из которых использует свои правила.

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

📱 @dev_notes_ru

#Symfony #Serializer

👩‍💻 Sass: @import объявлен устаревшим

В 2019 году была выпущена система модулей Sass, добавившая в язык новые правила @use и @forward, призванные заменить @import и сделать таблицы стилей более удобными и менее подверженными ошибкам. Теперь можно объявить, что @import официально устарел, начиная с версии Dart Sass 1.80.0.

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

С момента выпуска модульной системы прошло 4,5 года, и уже больше года прошло с тех пор, как мы преодолели порог в 80% использования Dart Sass, установленный нами для начала процедуры устаревания, и мы чувствуем себя комфортно, делая этот шаг. Однако мы понимаем, что это большое изменение в языке, и не все пользователи смогли полностью отказаться от @import до сих пор.

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

📱 @dev_notes_ru

#Frontend #Sass

💡 Совет по Laravel

А вы знаете о хелпере rescue(), доступном в Laravel?

Функция rescue() принимает в качестве параметра функцию, которая выполняется немедленно, но не выбрасывает исключение, если оно возникло.

Отсюда и название rescue(), поскольку запрос продолжается и «спасается» от исключения. Отличная мысль!

Однако если исключение возникает, о нем все равно сообщается в лог-файлы.

Вот пример разницы между функцией rescue() и блоком try-catch...

📱 @dev_notes_ru

#laravel #helper #tips

👩‍💻+👩‍💻 Реалистичные зернистые тени без дублирования изображения

👩‍💻 Realistic grainy shadows with no image duplication

Навеяно https://codepen.io/gayane-gasparyan/pen/LYGGmmr, только здесь не нужно устанавливать каждое изображение в качестве фона div, а затем дублировать его в pseudo.

Вместо этого используется один элемент img с alt. Более поддерживаемый, доступный + меню img по правому клику.

Ana Tudor

📱 @dev_notes_ru

#html #css #tips

4 из 5 разработчиков наслаждаются code review

📱 @dev_notes_ru

#joke