👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.

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

📱 @dev_notes_ru

#Frontend #JavaScript #JS #ViewTransition #MutationObserver

💡 Совет по Laravel: Новый строковый метод `doesntContain`

Иногда требуется проверить, что строка не содержит заданного значения. Раньше можно было использовать хелпер contains, но с новым методом doesntContain стало ещё удобнее 🚀.

📱 @dev_notes_ru

#Laravel #String #tips

👩‍💻 Web Performance API: Измерьте важное

Производительность веб-сайта — это не только быстрая загрузка. Речь идёт о понимании того, что происходит с момента, когда пользователь попадает на сайт, до того, как он сможет им воспользоваться. Performance API открывает этот чёрный ящик поведения браузера.

Скорость влияет на всё. Пользователи покидают медленные сайты. Поисковые системы накладывают на них ограничения. Мобильные пользователи расстраиваются, когда приложения разряжают их батареи. Performance API помогает измерить эти реальные последствия.

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

📱 @dev_notes_ru

#Frontend #JavaScript #JS #PerformanceAPI

💡 Совет по Laravel: Пропуск отчетов об исключениях

Возможно, вы не хотите сообщать о каких-либо исключениях своему инструменту мониторинга. Хотя можно вручную зарегистрировать их в app.php, можно просто пометить исключение с помощью интерфейса ShouldntReport 🚀.

📱 @dev_notes_ru

#Laravel #Exceptions #tips

👩‍💻 Предзагрузка отзывчивых изображений

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

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

📱 @dev_notes_ru

#Frontend #HTML #Responsive #Image #Preloading

💡 Совет по Laravel: Получение полного лога запросов

Вам когда-нибудь нужно было вывести полный лог запросов, выполняемых в методе? Можно включить лог запросов в самом начале и вывести его в конце, используя `enableQueryLog и getRawQueryLog` 🚀.

📱 @dev_notes_ru

#Laravel #DB #tips

👩‍💻 Что бы я хотел знать о Postgres, когда начал его изучать

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

За исключением… Postgres. Дело не в том, что официальная документация не является выдающейся (она такая и есть!) — она просто огромна. Для текущей версии (17 на момент написания статьи), если распечатать её в виде стандартного PDF на бумаге формата A4, она занимает 3,024 страницы. Это не то, что может просто сесть и прочитать от начала до конца любой начинающий инженер.

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

Обратите внимание, что многие из этих вещей могут быть применимы и к другим системам управления базами данных (СУБД) SQL или к другим базам данных в целом. Но я не так хорошо с ними знаком, поэтому не уверен, что к ним относится, а что нет.

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

📱 @dev_notes_ru

#DataBase #Postgres #tips

💡 Совет по Laravel: Автозавершение в PestPHP

При написании тестов PestPHP вы, скорее всего, будете использовать $this, что не очень хорошо для автозаполнения IDE и может потребовать добавления PHPDoc. Чтобы избежать этого, используйте в тестах хелпер test(), возвращающий текущий экземпляр Test Case 🚀.

📱 @dev_notes_ru

#Laravel #PestPHP #tips

👩‍💻 Настройка одного набора цветов для светлого и тёмного режимов

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

Часто, когда речь идёт о светлом и тёмном режимах, подразумевается полная смена цветов. Светлый цвет становится темным и наоборот. Такова сущность ситуации!

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

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

📱 @dev_notes_ru

#Frontend #CSS #ColorScheme #DarkMode #LightMode

💡 Совет по Laravel: Глобальное Middleware для HTTP клиента

Заголовки могут быть полезны. Например, глобальный user agent может помочь идентифицировать запросы вашего приложения в других сервисах или сторонних API. Laravel уже поддерживает middleware для запросов и ответов, позволяющие делать именно это 🚀.

📱 @dev_notes_ru

#Laravel #HTTP #tips

"Продолжай писать код. Исправим это позже"

📱 @dev_notes_ru

#joke

📱 @dev_notes_ru

#joke

💡 Руководство по типам данных SQLite

Большинство баз данных имеют определённые типы данных, но SQLite значительно отличается от других систем баз данных. В статье рассказывается о динамической системе типов SQLite и различных типах данных для тех, кто только начинает работать с SQLite.

SQLite — популярная, лёгкая система баз данных, хранящая данные в одном файле. Её простоте способствует гибкая, динамическая система типов, отличающаяся от статических, жёстких типов, используемых в других системах баз данных, таких как MySQL, PostgreSQL или SQL Server, требующих указания типов данных при создании таблиц.

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

📱 @dev_notes_ru

#DataBase #SQLite #tips

💡 Совет по Laravel: Новый метод `rawColumn`

В Laravel v11.32 появился новый метод rawColumn. Теперь, вместо использования DB::statement, когда грамматика не поддерживает обновление или создание колонки, можно использовать метод rawColumn 🚀.

📱 @dev_notes_ru

#Laravel #Migration #tips

Понимание различных типов SSH ключей

Ключи Secure Shell (SSH) неотъемлемая часть современной защиты серверов и сетей. Они позволяют аутентифицировать пользователей и устройства, не полагаясь на пароли, уязвимые для попыток взлома. В статье рассмотрим различные типы ключей SSH и способы их эффективного использования.

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

📱 @dev_notes_ru

#DevOps #SSH

💡 Совет по Laravel: Объяснение запросов Eloquent

Вам когда-нибудь требовалось выполнить EXPLAIN для запроса Eloquent, чтобы проверить, используется ли индекс? Хотя можно вручную извлечь необработанный запрос и выполнить на нем EXPLAIN, можно добавить в цепочку метода explain, чтобы сделать именно это🚀.

📱 @dev_notes_ru

#Laravel #Eloquent #tips

👩‍💻 Доступ к связанным с маршрутом моделям в запросах формы Laravel с #[RouteParameter]

В этой статье вы узнаете о PHP атрибуте #[RouteParameter], который используется в Laravel для доступа к моделям, связанным с маршрутом, в классах запросов форм. Мы подробно рассмотрим, как применять этот атрибут и какие проблемы он решает.

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

📱 @dev_notes_ru

#Laravel #Attribute #RouteParameter

💡 Совет по Laravel: Принудительное использование HTTPS для URL

Начиная с Laravel v11.31, можно обеспечить HTTPS для всех генерируемых URL без необходимости указывать схему HTTPS в запросе 🚀.

📱 @dev_notes_ru

#Laravel #URL #tips

🖥 Определение переполнения/скроллбара используя современный CSS

Хотите определить, есть ли у элемента переполнение или он прокручивается? Это возможно с помощью анимации, управляемой прокруткой! Кроме того, эту информацию можно хранить в переменной на уровне :root и делать с ней всё что угодно (например, стилизовать элементы на странице).

:root {
  timeline-scope: --scroll;
  animation: --scroll forwards;
  animation-timeline: --scroll;
  container-name: --scroll;
}
.box { /* соответствующий элемент */
  overflow: auto; /* или hidden */
  scroll-timeline: --scroll;
}
@keyframes --scroll {
  0%,to{--scroll: 1;}
}
@container --scroll style(--scroll: 1) {
  /* CSS, когда .box переполнен 
     можно нацелиться на любой элемент на странице!
  */
}
/* Да, вы можете использовать --scroll везде! */

Измените размер элемента .box в демонстрационном примере на 👩‍💻 CodePen и посмотрите на волшебство! (пока только для 👩‍💻)

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

.box {
  overflow: auto; /* или hidden */
  animation: scrolling forwards;
  animation-timeline: scroll(self);
}
@keyframes scrolling {
  0%,to{
    /* CSS, применяемый к .box, когда в нём есть переполнение */
  }
}

Или дочерний элемент

.box {
  overflow: auto; /* или hidden */
}
.box .child {
  animation: scrolling forwards;
  animation-timeline: scroll(); /* он будет считать, что у предка overflow: auto/hidden  */
}
@keyframes scrolling {
  0%,to{
    /* CSS, применяемый к .child, когда у .box есть переполнение */
  }
}

Пример на 👩‍💻 CodePen

🔗Источник: Overflow/scrollbar detection using modern CSS

📱 @dev_notes_ru

#CSS #tips

👩‍💻 Что означает ошибка "refusing to merge unrelated histories"

Рассмотрим как решить распространённую ошибку Git: "refusing to merge unrelated histories" при объединении репозиториев с несвязанными историями.

Ошибка Git "refusing to merge unrelated histories" возникает, когда Git пытается объединить ветки или репозитории без общей истории коммитов. Это может быть случай, когда кто-то пытается объединить два независимых репозитория, объединить два проекта или даже синхронизировать локальный проект с новым удалённым репозиторием.

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

📱 @dev_notes_ru

#Git #Merge #Error

💡 Совет по Laravel: Трейт `Prohibitable`

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

📱 @dev_notes_ru

#Laravel #Prohibitable #tips