👩‍💻 CSS трюки, использующие только один градиент

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

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

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

📱 @webdev_trends

#webdev #CSS #tricks

👩‍💻 Как обновить устаревшую функцию PHPUnit withConsecutive()

Метод withConsecutive() был устаревшим в PHPUnit 9 и удален в PHPUnit 10. Это вызвало множество вопросов на StackOverflow, в различных проектах и на GitHub.

Это не было очень популярным нарушением обратной совместимости. Замены 1:1 не существует. Он может быть объединен с методами willReturn*(), что может сделать его еще более сложным для слияния.

При обновлении PHPUnit 95 % времени уходит на обновление этого единственного метода и 5 % - на все остальные. За последние месяцы мы провели несколько обновлений проекта с помощью Rector и узнали много нового.

Сегодня я хочу поделиться с вами знаниями и объяснить, почему это изменение для улучшения кода.

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

📱 @webdev_trends

#webdev #PHP #PHPUnit

👩‍💻 Рецепты определения поддержки CSS At-правил

At-правило @supports было несколько раз расширено с момента его первого выпуска. Когда-то оно позволяло проверять поддержку только пар свойство/значение, теперь оно может проверять наличие селектора с помощью функции-обертки selector() и различных форматов и технологий шрифтов с помощью font-format() и font-tech(), соответственно. Однако сообщество всё ещё жаждет одной возможности - проверки поддержки других at-правил.

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

📱 @webdev_trends

#webdev #CSS #tricks

👩‍💻 Руководство по конвейерам Laravel

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

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

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

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

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

📱 @webdev_trends

#webdev #Laravel #Pipelines

👩‍💻 Enums в Laravel: Все, что нужно знать

Enums появились в PHP 8.1, и Laravel в полной мере использовал их возможности. Давайте посмотрим, как можно использовать Enums в ваших проектах Laravel сегодня.

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

📱 @webdev_trends

#webdev #PHP #Laravel #Enums

👩‍💻 Выбор 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