Заметки разработчика
471 subscribers
671 photos
4 videos
1.17K links
Заметки о Frontend, Backend и немного DevOps. В основном о #PHP, #Laravel, #JavaScript, #HTML, #CSS, тестировании и настройке серверов.

https://www.dev-notes.ru

@snakenf
Download Telegram
Если вы попытаетесь использовать Livewire 3 со стартовым набором Laravel Breeze, то можете заметить, что ваши компоненты не реагируют на реакцию, а некоторые функции Livewire просто не работают. Причиной может быть Alpine.js, который загружается дважды. Сейчас я покажу вам, как это исправить.

https://www.dev-notes.ru/articles/laravel/livewire-3-laravel-breeze-error-alpine-js-conflict/
Если вы хотите избежать хранения конфиденциальных данных БД (например, номеров паспортов) в виде обычного текста, Laravel может зашифровать их в Моделях Eloquent, просто присвоив им значение encrypted. Давайте посмотрим, как это работает.

https://www.dev-notes.ru/articles/eloquent/encrypt-models-data-with-casts/
Bun — это быстрый набор инструментов JavaScript "все в одном". Его можно использовать как среду выполнения (он гораздо быстрее, чем Node.js), как программу для запуска тестов и даже как менеджер пакетов. Именно это интересует нас как PHP-разработчиков.

https://www.dev-notes.ru/articles/php/bun-php/
Новый View Transitions API предлагает более простой способ анимации между двумя состояниями DOM — даже между загрузками страницы. Это прогрессивное усовершенствование, работающее уже сегодня.

CSS-переходы и анимация произвели революцию в веб-эффектах за последнее десятилетие, но не все так просто. Рассмотрим список элементов — например, десять изображений с заголовками, — который мы хотим перевести в новый список элементов с помощью эффекта cross-fade. Текущий подход:

1. Сохранить старые элементы DOM
2. Создать новые DOM-элементы, добавить их на страницу, обеспечив соответствующее расположение
3. Затухание старого набора при появлении нового набора, затем
(опционально) Заменить старые элементы DOM на новые

До сих пор не было возможности просто обновить DOM — до сих пор! View Transitions API использует следующий процесс:

1. API делает снимок текущего состояния страницы.
2. При необходимости мы обновляем DOM, добавляя или удаляя элементы.
3. API делает снимок нового состояния страницы.
4. API выполняет анимацию между двумя состояниями, используя стандартное затухание или любые CSS-анимации, которые мы определим.

Нам нужно только обновить DOM, как мы это уже делаем. Несколько строк дополнительного кода могут постепенно улучшать страницу при наличии View Transitions API для создания эффектов, похожих на презентацию.

API является экспериментальным, но последние браузеры на базе Chromium поддерживают внутристраничные эффекты, основанные на DOM одного документа.

View Transition API для навигации также доступен в Chrome 115+ и предлагает анимацию между загрузками отдельных страниц — как, например, на типичных сайтах WordPress. Это ещё проще в использовании и не требует использования JavaScript.

Mozilla и Apple не раскрыли своих намерений по внедрению API в Firefox и Safari. Любой браузер без View Transitions API будет продолжать работать, поэтому добавлять эффекты можно уже сегодня.

https://www.dev-notes.ru/articles/javascript/view-transitions-api-introduction/
Как использовать несколько баз данных в проекте Laravel и управлять разделёнными записями в базе данных.

Стремясь сохранить ясность в каждом из своих проектов, я разделяю базы данных в зависимости от выполняемой ими роли. Например, этот блог включает в себя несколько баз данных: одна специально для блога, другая — для аналитики. В этой статье объясняется, как это сделать.

https://www.dev-notes.ru/articles/laravel/use-several-databases/
Соглашения об именовании CSS улучшают взаимодействие членов команды при работе над проектами, повышают сопровождаемость и масштабируемость проекта, позволяя разработчикам оптимизировать свои рабочие процессы. В этой статье мы погрузимся в мир соглашений об именовании CSS, покажем практические примеры и преимущества, которые они дают в процессе разработки.

В frontend разработке написание чистого и эффективного кода делает программиста лучше. Неважно, идёт ли речь о личном проекте, совместном задании, agile-проекте или тестовом проекте при приёме на работу. Одним из основополагающих разделов, который обычно упускают из виду разработчики, является применение соглашений об именовании CSS, и некоторые из них на собственном опыте убедились в том, насколько страшен плохо написанный CSS-код при отладке и управлении огромными кодовыми базами. Независимо от того, осознаете вы это или нет, во время тестирования кодирования или технических собеседований ваши правила именования передают информацию о ваших методах разработки. Они могут быть использованы для оценки вашего поведения и эффективности. Итак, в этой статье мы расскажем о лучших практиках именования CSS, чтобы вы могли повысить качество своего кода. К концу статьи читатели должны чётко понимать соглашения об именовании CSS и их преимущества, а также будут знакомы с различными соглашениями об именовании стилей. Конечная цель статьи — дать читателям практические советы по использованию этих соглашений, которые они смогут применить в своей работе, чтобы писать более чистый и эффективный код.

https://www.dev-notes.ru/articles/css/elevate-your-coding-efficiency-with-css-naming-conventions/
Являясь основой многих сайтов с высокой посещаемостью, Nginx зарекомендовал себя как надёжное, высокопроизводительное и гибкое решение для обслуживания веб-контента.

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

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

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

https://www.dev-notes.ru/articles/devops/nginx-performance-optimization-tips/
В Laravel очень мощный конструктор запросов. Он предлагает богатый набор методов, позволяющих легко и просто писать SQL-запросы.

Одним из таких методов является метод Where, и он имеет множество способов упрощения сложных запросов.

Простейший способ использования where — просто статически вызвать его в модели как Model::where('name', 'Ahmed')->first().

https://www.dev-notes.ru/articles/eloquent/query-builder-where/
Laravel предлагает встроенный метод отправки электронной почты из вашего приложения с помощью фасада Mail. Этот метод требует подключения внешнего почтового сервера, например SMTP-сервера Gmail, который мы будем использовать в данной статье.

Чтобы начать отправлять электронные письма с помощью Gmail в Laravel, необходимо включить доступ к приложению в учётной записи Gmail и добавить учётные данные Gmail SMTP в файл Laravel .env. После этого вы сможете использовать встроенный в Laravel фасад Mail для отправки писем в своём приложении.

В данной статье мы рассмотрим этот процесс в подробностях.

https://www.dev-notes.ru/articles/laravel/how-to-send-email-using-gmail/
Мягкое удаление записей в Laravel позволяет помечать записи как "удалённые", а не удалять их из базы данных навсегда. Это может быть невероятно полезно при работе с информацией, которую в будущем может потребоваться восстановить. К счастью, Laravel поставляется со встроенной функцией soft delete!

Чтобы использовать soft delete в Laravel Eloquent, добавьте в модель трейт SoftDeletes, создайте миграцию с колонкой deleted_at и используйте метод ->delete() для пометки записей как удалённых с одновременным сохранением их в базе данных.

В данном пошаговом руководстве мы рассмотрим, как это можно легко добавить в приложение Laravel.

https://www.dev-notes.ru/articles/eloquent/how-to-soft-delete/
TypeScript основывает обнаружение и определение типов на выведении типов (Type Inferences) и аннотациях типов (Type Annotations), и в этой статье мы расскажем о них, чтобы вы могли понять, когда и как их использовать.

Одной из отличительных особенностей TypeScript является то, что он — статически типизированный язык. Это означает, что при объявлении переменные должны быть отнесены к соответствующим типам данных, поскольку это проверяется во время компиляции. Это отличается от синтаксиса JavaScript, динамически типизированного языка, который позволяет свободно объявлять переменные без необходимости указывать тип данных — интерпретатор присваивает переменным их типы во время выполнения программы. Наиболее важной особенностью использования статически типизированных языков для разработчиков является проверка ошибок на этапе компиляции, что увеличивает скорость разработки, поскольку сразу видно, есть ли в коде несоответствие типов или вы пытаетесь вызвать несуществующую функцию. Это более эффективный метод по сравнению с динамически типизированными языками, которые выполняют проверку ошибок во время выполнения.

В TypeScript переменные должны быть привязаны к типам, чтобы избежать нежелательных результатов. В TypeScript существует два основных способа представления типов: выведение типов (Type Inference) и аннотации типов (Type Annotations). В этой статье вы узнаете об аннотациях типов и выведение типов, о том, как их использовать, и о том, как лучше всего их применять. Давайте погрузимся в тему.

https://www.dev-notes.ru/articles/typescript/type-inferences-and-annotations/
Через некоторое время в большинстве приложений появляются дублированные строки, что приводит к ухудшению качества работы пользователей, повышению требований к хранению данных и снижению производительности базы данных. Процесс очистки обычно реализуется в коде приложения со сложным поведением фрагментации, поскольку данные не помещаются в память полностью. Однако один SQL-запрос может выполнить весь процесс, включая определение приоритетов строк и количества дубликатов, которые необходимо оставить.

https://www.dev-notes.ru/articles/database/delete-duplicate-rows/
Объединять данные с помощью SQL очень просто. Однако иногда очень нужны зависимые соединения, возвращающие лишь небольшое подмножество данных объединённой таблицы. С помощью LATERAL соединения знакомый для каждого цикл может быть воспроизведён в SQL.

При объединении нескольких таблиц строки обеих таблиц связываются между собой на основе некоторых условий. Однако если результат должен быть ограничен, например, тремя последними купленными товарами для каждого покупателя, стандартное предложение соединение не будет работать: Объединённая таблица купленных товаров не может быть ограничена только тремя строками для каждого покупателя. Так не работает объединение, в него включаются все строки, соответствующие критериям объединения. Но при латеральном присоединении вместо таблицы будет присоединён подзапрос, который выполняется один раз для каждого покупателя, что приводит к эквивалентному циклу for-each в SQL.

https://www.dev-notes.ru/articles/database/for-each-loop-lateral-join/
Манипулируйте размеров сплитов для получения нужной площади области просмотра.

Устали от того, что размеры сплитов не совпадают с желаемыми? Предварительный просмотр сплитов или список быстрых исправлений не отображаются так, как хотелось бы? Раздражают слишком длинные строки на одном размере вертикального сплита? Нужно ещё несколько строк в окне :Git, чтобы было понятно, на что смотреть? В Vim меня это сильно раздражало. В течение многих лет я разочарованно мирился с этим.

https://www.dev-notes.ru/articles/vim/resize-splits/
Frontend-приложения играют центральную роль в обеспечении бесперебойной работы пользователей. В современной взаимосвязанной сети, где широко распространены сторонние интеграции и API, обеспечение надёжной безопасности имеет первостепенное значение. Нарушение безопасности может привести к краже данных, несанкционированному доступу и ухудшению репутации бренда. В этой статье мы расскажем вам, как использовать CORS и CSP для обеспечения безопасности ваших веб-страниц.

Представьте, что в ваше приложение внедрён вредоносный скрипт, который похищает конфиденциальные данные пользователей или перенаправляет их на мошеннические сайты. Страшно, правда? Но не стоит бояться! Правильная реализация CORS и CSP позволяет защитить наши frontend приложения и опередить потенциальные угрозы.

https://www.dev-notes.ru/articles/security/securing-front-end-apps-with-cors-and-csp/
Менеджер зависимостей Composer является де-факто способом управления зависимостями в PHP-проектах. Вся современная PHP-разработка немыслима без Composer. Но знаете ли вы, что с помощью Composer можно делать многое, кроме установки и обновления зависимостей?

Именно так! В этой статье я перечислю такие возможности Composer, о которых вы, возможно, не знали. И которые могут помочь улучшить рабочий процесс в Composer.

https://www.dev-notes.ru/articles/php/lesser-known-composer-tricks-tips/