👩‍💻 Анимация по высоте/ширине авто (без хаков)

Всего три строки кода, и вы получаете плавный переход к height: auto.

& {
  interpolate-size: allow-keywords;
}
p {
  transition: 1s;
}
p:not(:hover) {
  height: 5lh;
}

Все волшебство выполняет interpolate-size: allow-keywords. Подробнее об этом читайте в статье Анимация height: auto; (и другие ключевые слова внутреннего размера) в CSS.

👩‍💻 Посмотреть пример на CodePen

Пока поддерживается только в Chromium-based браузерах.

✅ 👩‍💻 Chrome, 👩‍💻 Edge, 👩‍💻 Brave.
❌ 👩‍💻 Firefox, 👩‍💻 Vivaldi и Яндекс Браузер.

📱 @dev_notes_ru

#css #feature #animation

👩‍💻 Сокращения JavaScript экономящие время

Разработчик JavaScript, пишущий чистый, эффективный и лаконичный код может значительно сократить время разработки. Понимание ряда удобных сокращений JavaScript может сделать код более читаемым и помочь избежать повторяющихся шаблонов. В статье мы рассмотрим 10 мощных сокращений JavaScript, способных сэкономить часы работы над кодом и повысить производительность.

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

📱 @dev_notes_ru

#javascript #js #tips

💡 Совет по Laravel: Загрузка подсчета отношений на лету

При работе с моделями вам может понадобиться подсчёт отношений. Если вы забыли его загрузить, всегда можно использовать loadCount, чтобы подгрузить подсчёт на лету 🚀.

📱 @dev_notes_ru

#laravel #php #tips

👩‍💻 Цветовой круг с градиентом

Используйте функцию conic-gradient() и новую цветовую интерполяцию, чтобы создать симпатичный цветовой круг.

.box {
  background: conic-gradient(in hsl longer hue,red 0 0);
}

✔️ Укажите браузеру более длинный (longer) путь между красным (red) и красным.

❌ Без сложного сочетания цветов

👩‍💻 Codepen

📱 @dev_notes_ru

#css #gradient #tips

👩‍💻 Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

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

📱 @dev_notes_ru

#html #script #async #defer

💡Совет по Laravel

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

📱 @dev_notes_ru

#laravel #php #tips

#joke

📱 @dev_notes_ru

👩‍💻 Удаление дубликатов из массивов и строк в JavaScript

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

Рассмотрим два решения задачи: одно для удаления дубликатов из массивов, другое — для удаления дубликатов из строк (хотя они очень похожи).

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

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

📱 @dev_notes_ru

#JavaScript #js #tips

💡Совет по Laravel

Хотите протестировать содержимое email в приложении, но не хотите настраивать что-то вроде Mailgun?

Просто используйте параметр .env MAIL_DRIVER=log, и все email будут сохраняться в файле storage/logs/laravel.log, а не отправляться.

📱 @dev_notes_ru

#laravel #php #tips

#joke

📱 @dev_notes_ru

👩‍💻 Используйте useId() вместо вручную созданных ID

Мы считаем, что следует чаще использовать хук useId(). Если вы обнаружили, что не используете его, есть большая вероятность, что ваше приложение или сайт либо недоступны (a11y), либо вы создаёте код, склонный к ошибкам. Позвольте объяснить.

tl;dr
✅ Используйте`useRef()` вместо вручную созданных ID, если требуется доступ к DOM из JS
✅ Используйте useId() вместо вручную созданных ID, чтобы связать два узла DOM для обеспечения доступности.


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

📱 @dev_notes_ru

#React #Hooks #useId

💡 Совет по Laravel: Улучшенный dd()

При отладке запроса в Eloquent для проверки результата часто используется dd(). А знаете ли вы, что можно просто подключить его напрямую? 🚀

📱 @dev_notes_ru

#laravel #eloquent #php #tips

🤔 Одна из распространенных претензий к PHP заключается в том, что он не справляется с параллелизмом из-за своей однопоточной природы.

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

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

Рекомендую использовать этот фасад только для небольших задач, поскольку он все ещё находится в стадии бета-версии.

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

📱 @dev_notes_ru

#laravel #concurrency #php #tips

👩‍💻 Гибкое кэширование в Laravel — это очень просто

Познакомьтесь с новым методом Cache::flexible() в Laravel, позволяющим сбалансировать свежесть данных и производительность в приложениях с высокой активностью.

В Laravel 11 появилась новая функция кэширования, призванная изменить подход к обработке дорогостоящих операций с данными. Новый метод Cache::flexible() реализует паттерн, позволяющий обслуживать кэшированные данные, обновляя их в фоновом режиме, предлагая разумное решение извечной проблемы баланса между свежестью данных и производительностью приложения. В статье мы рассмотрим эту функцию, начав с основ и постепенно погружаясь в более сложные сценарии использования.

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

📱 @dev_notes_ru

#Laravel #Cache

🤔 При написании тестов часто используются случайно сгенерированные данные с Faker. В результате тест иногда может случайно провалиться, а иногда пройти.

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

В таких случаях я использую метод repeat(), доступный в PestPHP, позволяющий повторить тест определенное количество раз.

После проведения тестирования с достаточным количеством повторений я удаляю вызов repeat().

Такой подход помогает обеспечить стабильность теста на протяжении нескольких итераций...

📱 @dev_notes_ru

#laravel #pest #php #tips

👩‍💻 А вы знали, что если ожидается, что в Коллекции будет только один элемент, соответствующий вашим критериям, можно использовать sole.

Он работает так же, как и first, но выбрасывает исключение, если результат оказался не один.

Это очень удобно при работе со сложными Коллекциями! 🔥

📱 @dev_notes_ru

#laravel #collection #tips

👩‍💻 Авторизация маршрутов на основе политики в Laravel

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

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

📱 @dev_notes_ru

#laravel #route #policy

💡 Совет по Laravel: Пропуск заданий

Вам когда-нибудь требовалось пропустить выполнение задания? Это можно сделать и вручную, но Laravel поставляется с middleware Skip, делающим именно это 🚀.

📱 @dev_notes_ru

#laravel #Jobs #php #tips

🔜 Принудительная установка определенного состояния элемента

Скоро появится в DevTools. Современная эмуляция псевдо состояния для стилизации и тестирования.

Обратите внимание, как оно адаптируется к выбранному элементу .

📱 @dev_notes_ru

#DevTools #feature #tips

👩‍💻 Отладка SQL запросов в Laravel

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

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

📱 @dev_notes_ru

#laravel #sql

💡 Совет по Laravel: Запрос подтверждения в командах

Знаете ли вы, что можно запрашивать подтверждение для рискованных команд перед их выполнением? Это можно сделать с помощью метода confirm 🚀.

📱 @dev_notes_ru

#laravel #commands #php #tips