👩‍💻 Выбор Masonry Syntax в CSS

Еще в 2020 году 👩‍💻 Firefox выпустил прототип для создания «masonry» макета в CSS. Сейчас все браузеры стремятся выпустить что-то подобное, но ведутся жаркие споры о том, какой синтаксис лучше использовать.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #CSS #feature

👩‍💻 Глубокое погружение в сессии в Laravel

При создании приложений Laravel почти гарантированно придется иметь дело с сессиями. Они являются фундаментальной частью веб-разработки.

В этой статье мы рассмотрим, что такое сессии, как они работают в Laravel, и как с ними можно работать в приложениях Laravel.

Затем рассмотрим, как взаимодействовать с сессиями, используя «классы сессий», чтобы избежать распространенных ошибок, которые часто встречаются при работе над приложениями Laravel.

Наконец, рассмотрим, как тестировать данные сессий в Laravel.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Laravel #Sessions

👩‍💻 Понимание PHP фреймворков: Лучшие варианты для веб-разработки

Хотя время от времени возникают вопросы о популярности PHP, нет никаких сомнений в том, что PHP остается мощным инструментом в веб-разработке, а фреймворки в его экосистеме играют решающую роль в формировании эффективности, масштабируемости и ремонтопригодности приложений. В статье мы исследуем текущую конкуренцию между тремя основными PHP-фреймворками: Laravel, Symfony и CodeIgniter.

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #PHP #Laravel #Symfony #CodeIngiter

👩‍💻 Откажитесь от Git Checkout: Вместо этого используйте Git Switch и Git Restore

Если в своей повседневной работе используете Git, то git checkout - это распространенная команда. Она часто используется для переключения ветвей, и если посмотреть в документацию, то можно увидеть фразу «переключить ветви или восстановить файлы рабочего дерева». Но в UNIX должно быть «Делай одно дело и делай его хорошо». Это сбивало с толку, поэтому в Git 2.23 появилась пара команд для замены.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Git

👩‍💻 Разделение уровней логов между Stdout и Stderr с Laravel

Вы когда-нибудь хотели вести логи определенных уровней в Laravel? Конечно, можно использовать опцию level config, чтобы указать минимальный уровень для логирования, но что, если нужно, чтобы логи Debug и Info попадали только в определенный логгер?

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Laravel #Logs

👩‍💻 CSS Веерное раскрытие с Grid и @property

Веерное раскрытие - это разворачивающаяся анимация, при которой группа элементов появляется один за другим, рядом друг с другом, как будто они выкладываются из стопки. При этом обычно наблюдается едва уловимое подпрыгивание.

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #css #grid

👩‍💻 Секреты упорядочивания свойств объектов JavaScript

Недавно кто-то спросил меня, обязательно ли свойства объектов JavaScript должны быть неупорядоченными и непредсказуемыми?

Разработчики знакомые с ранним JavaScript могут ответить, что Object.keys() или for...in возвращают непредсказуемый порядок свойств объекта. Но так ли это на самом деле?

Как и следовало ожидать, теперь существуют правила, которым нужно следовать.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #JS

👩‍💻 Git Workflow: Полное руководство по эффективному управлению кодовой базой

Независимо от того, опытный вы разработчик или только начинаете, эффективное управление кодовой базой имеет решающее значение для успеха. Git, широко используемая система контроля версий, помогает отслеживать изменения, сотрудничать с другими и поддерживать целостность проекта. Однако без правильного рабочего процесса Git может стать непосильной задачей. В этой статье мы расскажем о комплексном рабочем процессе Git, рассмотрим различные сценарии и лучшие практики, включая стратегии ветвления, такие как feature-based и forking workflow, чтобы обеспечить бесперебойную совместную работу и управление проектом.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Git #workflow

👩‍💻 Обработка событий вставки в JavaScript

Добро пожаловать в третий и последний пост из этой серии. В первой статье я объяснил, как JavaScript может читать из буфера обмена пользователя. В прошлой статье я объяснил обратное - запись в буфер обмена пользователя. Теперь я покажу, как добавить базовую обработку «события вставки» в ваше веб-приложение. К счастью, многое из того, что мы узнали в предыдущих двух статьях, пригодится, поскольку «форма» данных будет той же самой.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #JS #Events

👩‍💻 Что такое докер? Как он устроен?

Docker произвел революцию в создании, доставке и работе приложений, представив концепцию контейнеризации, объединяющую различные технологии для упаковки и развёртывания программного обеспечения. Давайте подробно рассмотрим все основные концепции, лежащие в основе Docker.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Docker #HowTo

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

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

Приходилось ли вам писать компонент React, который импортировал бы скопированные стили, возможно, в виде CSS-модуля?

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #CSS #Events

👩‍💻 Laravel 11 Конфигурация Middleware: Исчерпывающее руководство

Laravel 11 представляет новый способ конфигурирования middleware с помощью класса Illuminate\Foundation\Configuration\Middleware. Этот мощный класс предоставляет удобный интерфейс для управления стеком middleware приложения. В статье мы рассмотрим публичные методы этого класса и покажем, как эффективно использовать их в приложении Laravel.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Laravel #Laravel11 #middleware

👩‍💻 Livewire или Inertia.js. Что из них выбрать?

И Livewire, и Inertia - невероятно популярные стеки для создания приложений на Laravel. Если вы затрудняетесь с выбором, давайте взвесим, какой из них лучше подходит.

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Laravel #Livewire #InertiaJs

👩‍💻В погоне за цветом

Я фанат побочных квестов: профессиональных касательных, подогревающих ваш интерес, оттачивающих ваше мастерство и приносящих долгосрочные дивиденды для выполнения вашего основного задания. Как правило, в любой момент у меня их несколько: одни длятся несколько недель, другие - годами.

Одно из последних - разработка цветовых систем CSS. Оно затянулось по нескольким причинам. Цвет - это мощный инструмент в наборе инструментов дизайнера, а разработка поддерживаемых, гибких, податливых, адаптируемых цветовых систем - это сложно (читай: «весело пытаться решить»). Я также люблю, чтобы все было основано на практическом применении, что означает, что в основном занимался этим сайд-квестом в контексте веб-сайтов, которые активно проектирую и создаю. В данном случае это мой личный сайт, сайт для Steady и последняя итерация моего начинающего сайта Grease. К ним мы перейдем в ближайшее время. Сначала - определения.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #CSS

🛡 Защита от атак на основе CSS: Лучшие практики веб-безопасности

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

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #CSS #Security

⚡️ Мои каналы

📩 Заметки разработчика — Заметки о Frontend, Backend и немного DevOps. В основном о PHP, Laravel, JavaScript, CSS, тестировании кода и настройке серверов.

📦 Laravel packages — Пакеты Laravel Packages — созданный сообществом код для добавления дополнительной функциональности в Laravel

👩‍💻 Осваиваем Laravel — Погрузитесь в профессиональную веб-разработку с PHP и Laravel

📰 Web Dev Trends — Статьи по направлениям связанным с веб-разработкой, которые мне попались.

👩‍💻 Интеграция Laravel 11 с Neo4j для сложных связей

Здравствуйте, веб-разработчики Laravel! В этой статье я покажу как интегрировать Laravel 11 с Neo4j, базой данных графов, отлично справляющейся с управлением сложными связями между данными. Хотя традиционные базы данных SQL отлично подходят для многих приложений, они не справляются со сложными связями, подобными тем, что встречаются в социальных сетях или рекомендательных системах.

Neo4j создана специально для решения таких задач, что делает ее мощной альтернативой реляционным базам данных в определенных сценариях.

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #Laravel #Neo4j

👩‍💻 Кэширование зависимостей в GitHub Actions

GitHub Actions предоставляют два способа хранения файлов: кэширование для таких вещей, как dependencies, и artifacts для результатов работы, таких как журналы или двоичные файлы. Хотя звучат они похоже, используются они для разных целей. Так, мы будем использовать кэширование, чтобы ускорить выполнение наших рабочих процессов.

Еще один момент: доступ к кэшу будет ограничен только несколькими ветками: current branch, base branch для pull requests и default branch. Кэши, созданные в несвязанных ветках, будут недоступны, но в большинстве случаев это не окажет влияния, поскольку работа ведётся либо в текущей, либо в базовой ветке.

Правильное использование кэширования может помочь сократить время сборки, особенно для проектов, чьи зависимости меняются нечасто.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #GitHub #Actions #Cache

👩‍💻 Улучшение производительности JavaScript на вашем сайте

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

❓ Долгие задачи: Операции JavaScript, которые монополизируют основной поток, что приводит к неотзывчивости пользовательских интерфейсов.
❓ Большие размеры пакетов: JavaScript-код, который слишком велик для быстрой загрузки, разбора и выполнения.
❓ Проблемы с гидратацией: Процесс присоединения функциональности JavaScript к HTML-версии сервера.

Хотя эти проблемы не новы, современные веб-практики и веб-фреймворки могут усугублять их, вновь ставя в центр внимания.

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #JS

👩‍💻 Как предотвратить перехват сеанса: Безопасное управление сессиями PHP

Предотвратите перехват сеанса в PHP, применяя методы безопасного управления сеансами, начиная с HTTPS и заканчивая безопасными куками и политикой истечения сеанса.

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

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

🖥 Читать статью (🇬🇧)

📱 @webdev_trends

#webdev #PHP #Session #Security