Forem: Chris Shennan

The Changelog - February 2026

Chris Shennan — Wed, 11 Mar 2026 12:04:11 +0000

February in a nutshell: Streamlining Scaffold’s asset management, trying new marketing workflows, and keeping the momentum going, one small improvement at a time.

The Statistics

Revenue

Goal: £1,000 MMR

Source	Jan	Feb	Mar (11th)
BuyMeACoffee.com	£0	£0	-
GitHub Sponsors	£0	£0	-

Followers

Source	Jan	Feb	Mar (11th)
BlueSky	-	-	163
X	-	-	405
LinkedIn	-	-	759
Newsletter	-	-	23

Am I missing something? What other statistics would you like to see?

Product Feature - Scaffold Asset Management

February saw me continuing to improve the Scaffold Asset Management, simplifying the structure of the manifest.json file

grouping files by a section type
reducing verbose configuration via sensible defaults
adding files I missed, like the .releaserc.json (configuration to allow semantic versioning), .editorconfig (PHPStorm editor settings)

I then used the updated Scaffold Asset Management to bring Build With Scaffold up to date with the latest version.

Marketing - SkySurge

After I mentioned in my last post that I had started using Buffer to schedule some of my Bluesky and X posts, Henrik reached out and suggested that I give SkySurge a go. He even admitted it was a shameless plug, as it was for his own service, but the timing worked as it aligned with my objective - to increase my follower count.

While using SkySurge, I sent Henrik several suggestions for improvements, some UX niggles and a few ideas for new features, which Henrik graciously took on board, and had some of them done and deployed within a few hours. Even my feedback on making the application responsive on mobile was turned around in just a couple of days.

I've not done much user testing in the past, so this was a nice change of pace, and a win-win - Henrik got feedback on his product, and I got a tool to help me try and get involved in more conversations.

I've added a new "The Statistics" section to the top of this post, and I'll add it to my future posts so you can track my progress.

If you’d like to help me with that and follow along as I build in public, you can find me on Bluesky or X.

Blog Post

Things were quite quiet on the blogging front. I did hit an issue with the pdo_mysql PHP extensions intermittently disappearing with my latest Scaffold project and I wrote up the diagnosis and fix.

Documentation Updates

No progress this month.

Anything else?

When mentioning how disorganised I was when trying to pull together my notes for The Changelog - January 2026, the discussion turned to what I'm using to track my progress. This is primarily via Evernote, but I did highlight that I was having issues with it due to it converting Markdown to rich text format automatically, and a few Evernote alteratives were suggested.

I tried a few, and landed on FlatNotes. First impressions were really good:-

It's easy to set up - just a simple docker command or docker compose file
It allows me to work with raw Markdown files easily
It has a web interface - this is a core requirement for me with FlatNotes being self-hosted as I need to be able to use if from multiple devices (laptop / phone)

I initially tried it on my local machine, and it worked great so I tried to move it to a dedicated setup using an old Raspberry Pi, but the Raspberry Pi was too old and could only run the 32-bit OS and FlatNotes only has 64-bit docker images, so I'm back to using Evernote for now.

My next attempt will be to set it up on a Digital Ocean droplet, and the cost should be pretty much the same (Digital Ocean droplet cost vs Evernote Starter subscription), but my current Evernote subscription is valid for another 6 months so I've got a bit of time to swap over. The biggest factor for how quickly I'll move over to FlatNotes will be how much frustration I encounter while still trying to use Evernote.

Originally published at https://chrisshennan.com/blog/the-changelog-february-2026

Fixing Docker‑Compose, PhpStorm & Xdebug: Lesson from a Port & Socket Mix‑up

Chris Shennan — Thu, 24 Jul 2025 13:07:00 +0000

I recently hit a frustrating edge‑case with Docker, PhpStorm and Xdebug - and wanted to walk through what happened and how I fixed it, in case you end up in the same situation.

The symptom: “ports are not available” on port 3306

It started simple enough - Docker failed to start my MySQL container:

Error response from daemon: ports are not available: exposing port TCP 0.0.0.0:3306 -> 127.0.0.1:0: listen tcp […] bind: address already in use

I ran:

sudo netstat -tulnp | grep 3306

which showed:

tcp  0.0.0.0:3306  LISTEN  6885/docker-proxy

That meant Docker itself was already proxying 3306 - likely due to another container still running. So I:

Ran docker ps which shows no container running
Ran sudo docker ps which showed the MySQL container running on port 3306
Stopped and removed it with sudo docker compose down

That immediately solved the port conflict.

Next: PhpStorm could no longer run PHPUnit tests via Docker

I then ran, as my local user chris:

docker compose down
docker compose up

And all the containers started as expected. But now when I ran my tests in PhpStorm they failed with:

Failed to start docker‑compose service, start it in a command line and try again.

Yet everything worked fine from the CLI. What changed?

Turns out the issue wasn’t ports - it was the Docker socket PhpStorm was using.

The root cause: a user‑specific Docker socket

Running:

docker context inspect

revealed the CLI was talking to:

unix:///home/ubuntu/.docker/desktop/docker.sock

instead of the default:

/var/run/docker.sock

That meant Docker was running under my username (e.g. via Linux/WSL’s Docker Desktop), not the system socket. PhpStorm was still trying to connect to var/run/docker.sock, so none of the containers it saw were the ones I just started.

How I fixed it

Point PhpStorm at the right socket

In PhpStorm settings → Build, Execution, Deployment → Docker:

Edited the Docker configuration.
Changed the Unix socket to:

unix:///home/chris/.docker/desktop/docker.sock

Reconfigure PhpStorm’s interpreter & test runner

Now with PhpStorm connected to the correct Docker instance:

Went to Settings → PHP → CLI Interpreters
Removed any old Docker‑based interpreters tied to the wrong socket.
Added a new one pointing at my service’s PHP container.
Verified Settings → PHP → Test Frameworks recognized it.

Summary

The major takeaways:

Port conflicts? Check which docker‑proxy is listening and remove the conflicting container or change the host port.
PhpStorm not seeing running containers? Make sure it’s hooked to the same socket that Docker CLI is.
Always start containers and IDEs under the same user and context.
If you switch Docker setups (e.g. system vs Desktop), update PhpStorm’s Docker settings accordingly.

I hope this helps if you find yourself stuck a few steps removed from the real issue. Let me know if you’re still facing Xdebug or interpreter mapping problems - I’ve walked through quite a few of those myself lately!

Originally published at https://chrisshennan.com/blog/fixing-docker-compose-phpstorm-and-xdebug-lesson-from-a-port-and-socket-mix-up

Decorate the Symfony router to add a trailing slash to all URLs

Chris Shennan — Fri, 05 Jul 2024 13:21:43 +0000

I recently noticed an issue between the links that Symfony generated for Password Angel and the actual links that are in use. When Symfony builds the URL there are no trailing slashes i.e. /terms, however, as Password Angel is hosted in an S3 bucket as a static site a trailing slash is part of the live URL i.e. /terms/. This causes 2 problems:-

Unnecessary redirections - All links in the page will refer to the link version without the trailing slash and then the user will need to be redirected to the version with the trailing slash.
The canonical URLs are invalid - As I'm using Symfony to generate the canonical URL for each page, it generated the link version without the trailing slash. This may cause SEO issues as search engines will
- visit /terms
- be redirected to /terms/
- be informed the original page is at /terms
- ... go to step 1 - infinite loop ...

Solution - Decorate the Symfony Router

To resolve this I created a decorator for the Symfony default router and have overridden the generate method to add a slash to the end of the URL. It also checks for the presence of ? which would indicate there are query string parameters and in this situation, I am inserting the / before the ? as we want /terms/?utm_campaign=... and not /terms?utm_campaign=.../.

<?php

declare(strict_types=1);

namespace App\Service;

use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
use Symfony\Component\HttpKernel\CacheWarmer\WarmableInterface;
use Symfony\Component\Routing\RequestContext;
use Symfony\Component\Routing\RouteCollection;
use Symfony\Component\Routing\Router;
use Symfony\Component\Routing\RouterInterface;

#[AsDecorator('router.default')]
class TrailingSlashUrlGenerator implements RouterInterface, WarmableInterface
{
    public function __construct(
        private readonly Router $urlGenerator,
    ) {}

    public function generate($name, $parameters = [], $referenceType = self::ABSOLUTE_PATH): string
    {
        // Original URL
        $url = $this->urlGenerator->generate($name, $parameters, $referenceType);

        // Add the slash before any query string parameters
        $pos = strpos($url, '?');
        if ($pos !== false) {
            $parts = explode('?', $url, 2);
            if (str_ends_with($parts[0], '/') === false) {
                $parts[0] .= '/';
                return implode('?', $parts);
            }
        }

        // Add the slash at the end of the URL
        if (str_ends_with($url, '/') === false) {
            $url .= '/';
        }

        return $url;
    }

    public function match(string $pathinfo): array
    {
        return $this->urlGenerator->match($pathinfo);
    }

    public function getRouteCollection(): RouteCollection
    {
        return $this->urlGenerator->getRouteCollection();
    }

    public function setContext(RequestContext $context): void
    {
        $this->urlGenerator->setContext($context);
    }

    public function getContext(): RequestContext
    {
        return $this->urlGenerator->getContext();
    }

    public function warmUp(string $cacheDir, ?string $buildDir = null): array
    {
        return [];
    }
}

Note: To host Password Angel as a static site on S3, I have written a Symfony command to generate static versions of all the pages (all 4 of them) and these are uploaded to S3. Let me know if you're interested and I'll post up how the Symfony command works.

Originally published at https://chrisshennan.com/blog/decorate-the-symfony-router-to-add-a-trailing-slash-to-all-urls

Using PHP Attributes to Create and Use a Custom Validator in Symfony

Chris Shennan — Wed, 26 Jun 2024 14:00:00 +0000

Symfony, a leading PHP framework, is consistently updated to leverage modern PHP features. With PHP 8, attributes provide a new way to define metadata for classes, methods, properties, etc., which can be used for validation constraints. This blog post will guide you through creating and using a custom validator in Symfony to validate UK mobile number prefixes using PHP attributes.

What Are PHP Attributes?

PHP attributes, introduced in PHP 8, enable you to add metadata to various code elements, accessible via reflection. In Symfony, attributes can simplify defining validation constraints, making your code more concise and readable.

Example 1 - Creating a Custom Validator for UK Mobile Number Prefix

Let's create a custom validator to check if a phone number has a valid UK mobile prefix (e.g., starting with '07').

Step 1: Define the Attribute

Create a new attribute class that defines the custom constraint.

// src/Validator/Constraints/UkMobile.php
namespace App\Validator\Constraints;

use Attribute;
use Symfony\Component\Validator\Constraint;

#[Attribute(Attribute::TARGET_PROPERTY | Attribute::TARGET_METHOD)]
class UkMobile extends Constraint
{
    public string $message = 'The number "{{ string }}" is not a valid UK mobile number.';
}

Step 2: Create the Validator

Next, create the validator with the logic to check if a phone number has a valid UK mobile prefix.

// src/Validator/Constraints/UkMobileValidator.php
namespace App\Validator\Constraints;

use Symfony\Component\Validator\Constraint;
use Symfony\Component\Validator\ConstraintValidator;
use Symfony\Component\Validator\Exception\UnexpectedTypeException;

class UkMobileValidator extends ConstraintValidator
{
    public function validate($value, Constraint $constraint): void
    {
        if (null === $value || '' === $value) {
            return;
        }

        if (!is_string($value)) {
            throw new UnexpectedTypeException($value, 'string');
        }

        // Check if the number starts with '07'
        if (!preg_match('/^07[0-9]{9}$/', $value)) {
            $this->context->buildViolation($constraint->message)
                ->setParameter('{{ string }}', $value)
                ->addViolation();
        }
    }
}

Step 3: Apply the Attribute in an Entity

Use the UkMobile attribute in your entities to enforce this custom validation rule.

// src/Entity/User.php
namespace App\Entity;

use App\Validator\Constraints as AppAssert;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;

#[ORM\Entity]
class User
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column(type: 'integer')]
    private $id;

    #[ORM\Column(type: 'string', length: 15)]
    #[Assert\NotBlank]
    #[AppAssert\UkMobile]
    private $mobileNumber;

    // getters and setters
}

Step 4: Test the Validator

Ensure everything works correctly by writing some unit tests or using Symfony's built-in validation mechanism.

// tests/Validator/Constraints/UkMobileValidatorTest.php
namespace App\Tests\Validator\Constraints;

use App\Validator\Constraints\UkMobile;
use App\Validator\Constraints\UkMobileValidator;
use Symfony\Component\Validator\Test\ConstraintValidatorTestCase;

class UkMobileValidatorTest extends ConstraintValidatorTestCase
{
    protected function createValidator(): ConstraintValidator
    {
        return new UkMobileValidator();
    }

    public function testNullIsValid(): void
    {
        $this->validator->validate(null, new UkMobile());

        $this->assertNoViolation();
    }

    public function testValidUkMobileNumber(): void
    {
        $this->validator->validate('07123456789', new UkMobile());

        $this->assertNoViolation();
    }

    public function testInvalidUkMobileNumber(): void
    {
        $constraint = new UkMobile();

        $this->validator->validate('08123456789', $constraint);

        $this->buildViolation($constraint->message)
            ->setParameter('{{ string }}', '08123456789')
            ->assertRaised();
    }
}

Example 2 - Creating a Custom Validator for Glasgow Postcodes

In this example, we want to create a custom validator to check if a postcode is a valid Glasgow postcode. This could be used for professional trade services i.e. bark.com where a company only services certain areas.

Step 1: Define the Attribute

First, create a new attribute class to define the custom constraint.

// src/Validator/Constraints/GlasgowPostcode.php
namespace App\Validator\Constraints;

use Attribute;
use Symfony\Component\Validator\Constraint;

#[Attribute(Attribute::TARGET_PROPERTY | Attribute::TARGET_METHOD)]
class GlasgowPostcode extends Constraint
{
    public string $message = 'The postcode "{{ string }}" is not a valid Glasgow postcode.';
}

Step 2: Create the Validator

Next, create the validator with the logic to check if a postcode is a valid Glasgow postcode.

// src/Validator/Constraints/GlasgowPostcodeValidator.php
namespace App\Validator\Constraints;

use Symfony\Component\Validator\Constraint;
use Symfony\Component\Validator\ConstraintValidator;
use Symfony\Component\Validator\Exception\UnexpectedTypeException;

class GlasgowPostcodeValidator extends ConstraintValidator
{
    public function validate($value, Constraint $constraint): void
    {
        if (null === $value || '' === $value) {
            return;
        }

        if (!is_string($value)) {
            throw new UnexpectedTypeException($value, 'string');
        }

        // Regex for validating Glasgow postcodes (starting with G)
        $pattern = '/^G\d{1,2}\s?\d[A-Z]{2}$/i';

        if (!preg_match($pattern, $value)) {
            $this->context->buildViolation($constraint->message)
                ->setParameter('{{ string }}', $value)
                ->addViolation();
        }
    }
}

Step 3: Apply the Attribute in an Entity

Use the GlasgowPostcode attribute in your entities to enforce this custom validation rule.

// src/Entity/Address.php
namespace App\Entity;

use App\Validator\Constraints as AppAssert;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;

#[ORM\Entity]
class Address
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column(type: 'integer')]
    private $id;

    #[ORM\Column(type: 'string', length: 10)]
    #[Assert\NotBlank]
    #[AppAssert\GlasgowPostcode]
    private $postcode;

    // getters and setters
}

Step 4: Test the Validator

Ensure everything works correctly by writing some unit tests or using Symfony's built-in validation mechanism.

// tests/Validator/Constraints/GlasgowPostcodeValidatorTest.php
namespace App\Tests\Validator\Constraints;

use App\Validator\Constraints\GlasgowPostcode;
use App\Validator\Constraints\GlasgowPostcodeValidator;
use Symfony\Component\Validator\Test\ConstraintValidatorTestCase;

class GlasgowPostcodeValidatorTest extends ConstraintValidatorTestCase
{
    protected function createValidator(): ConstraintValidator
    {
        return new GlasgowPostcodeValidator();
    }

    public function testNullIsValid(): void
    {
        $this->validator->validate(null, new GlasgowPostcode());

        $this->assertNoViolation();
    }

    public function testValidGlasgowPostcode(): void
    {
        $this->validator->validate('G1 1AA', new GlasgowPostcode());

        $this->assertNoViolation();
    }

    public function testInvalidGlasgowPostcode(): void
    {
        $constraint = new GlasgowPostcode();

        $this->validator->validate('EH1 1AA', $constraint);

        $this->buildViolation($constraint->message)
            ->setParameter('{{ string }}', 'EH1 1AA')
            ->assertRaised();
    }
}

Beyond Entities

Custom validators aren't restricted to entities. They can be used to apply validation to properties and methods of any class you need, for example, if we wanted to use the GlasgowPostcode validator in a DTO object we could do something like

// src/DTO/PostcodeDTO.php
namespace App\DTO;

use App\Validator\Constraints as AppAssert;
use Symfony\Component\Validator\Constraints as Assert;

class PostcodeDTO
{
    #[Assert\NotBlank]
    #[AppAssert\GlasgowPostcode]
    private string $postcode;

    public function __construct(string $postcode)
    {
        $this->postcode = $postcode;
    }

    public function getPostcode(): string
    {
        return $this->postcode;
    }
}

and to check this DTO contains valid data we would make use of the validation service like

$postcodeDTO = new PostcodeDTO('G1 1AA');
$violations = $this->validator->validate($postcodeDTO);

Conclusion

Using PHP attributes to define custom validators in Symfony can enhance code readability and leverage modern PHP features. By following the steps outlined above, you can create robust, reusable validation logic that integrates seamlessly with Symfony's validation system. This approach simplifies adding custom validations and keeps your code clean and maintainable.

Happy coding!

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Originally published at https://chrisshennan.com/blog/using-php-attributes-to-create-and-use-a-custom-validator-in-symfony

Using Tailwind CSS with Symfony Encore

Chris Shennan — Mon, 01 Aug 2022 08:45:42 +0000

Why Tailwind CSS?

If you are reading this, you are probably in the same situation as me i.e. you can do backend development without breaking a sweat, but when you try your hand at some front-end development, it ends up looking like a throwback to 1994.

I've tried bootstrap and various themes, and whilst they help, they tend to focus on a handful of specific page templates and deviating from them leaves me in the same situation as before.

Tailwind, on the other hand, has a collection of components that you can piece together, any way you want, to build up your own templates and spans everything from marketing pages to an e-commerce store and checkout pages to application UI, meaning you can get your product up and running with a beautiful looking front-end with little effort and leaving you more time to do the stuff you are good at.

The downside is you need to pay for the components - currently £219 + VAT, but in my view, it is well worth it as it includes

All the components to build your marketing, application or e-commerce sites
Lifetime membership - free updates forever
Unlimited projects - no need to purchase for each project
Pre-made templates using Tailwind CSS ready to use - this is something they have just recently added.

I've spent much more than that over the years on templates that I've never quite managed to get working, whilst my first attempt at a project using Tailwind (https://passwordangel.co) had the front-end up and running inside an hour.

You can see all the available components and templates on the Tailwind UI site - https://tailwindui.com/

So without further ado, let's get stuck into getting Tailwind CSS up and running in your Symfony project.

Setup

Install Symfony

In this example, I'm going to set up a webapp symfony project because I want all the typical components for a web application (twig, routing, etc)

symfony new --webapp symfony-tailwind-demo
cd symfony-tailwind-demo
composer update

I'm also going to need the Symfony Webpack Encore bundle to provide the frontend integration.

composer require symfony/webpack-encore-bundle

Install node modules

These are the node modules that are required by the Encore bundle to provider the frontend functionality and the tailwind module to help build the CSS require for the templates that you build.

yarn add --dev \
    @hotwired/stimulus core-js \
    @symfony/stimulus-bridge \
    @symfony/webpack-encore \
    autoprefixer \
    postcss \
    postcss-loader \
    tailwindcss \
    webpack-notifier@^1.6.0

And now initialise tailwind so it creates your tailwind.config.js and postcss.config.js files

yarn tailwindcss init -p

Configuration

We need to specify which files to watch for changes in the /tailwind.config.js file. In our case, we want to watch for changes to any of the twig template files

// tailwind.config.js
module.exports = {
  content: [
      "./templates/**/*.twig"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

We also need to enable the post CSS loader in the webpack.config.js so it can resolve the tailwind CSS directives (we will get to that in a minute) into the desired CSS.

// webpack.config.js
Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')

   // ... rest of the default configuration ...

    // Add this line to enable the post CSS loader
    .enablePostCssLoader()
;

module.exports = Encore.getWebpackConfig();

Creating our first page using Tailwind CSS

Now that we have got the setup done and out the way, we can start to build our first page. Lets start by adding the tailwind CSS directives to our CSS file

/* /assets/styles/app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

and then adding the encore_entry_link_tags and encore_entry_script_tags twig functions to our base template so encore can load in the CSS and javascript

{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">

        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

Next, we want to add a routing file so we've got an entry point into the application

# config/routes.yaml
index:
    path: /
    controller: App\Controller\DefaultController::index

and then the corresponding controller

<?php

// src/Controller/DefaultController.php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class DefaultController extends AbstractController
{
    /**
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function index()
    {
        return $this->render('default/index.html.twig', []);
    }
}

And now the view template. Lets take a component from the preview section from https://tailwindui.com/preview. In this case I'm going to use "Ecommerce -> Components -> Promo Sections -> With image tiles"

{% extends 'base.html.twig' %}

{% block body %}
  <!-- This example requires Tailwind CSS v2.0+ -->
  <div class="relative bg-white overflow-hidden">
    <div class="pt-16 pb-80 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
      <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:static">
        <div class="sm:max-w-lg">
          <h1 class="text-4xl font font-extrabold tracking-tight text-gray-900 sm:text-6xl">Summer styles are finally here</h1>
          <p class="mt-4 text-xl text-gray-500">This year, our new summer collection will shelter you from the harsh elements of a world that doesn't care if you live or die.</p>
        </div>
        <div>
          <div class="mt-10">
            <!-- Decorative image grid -->
            <div aria-hidden="true" class="pointer-events-none lg:absolute lg:inset-y-0 lg:max-w-7xl lg:mx-auto lg:w-full">
              <div class="absolute transform sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
                <div class="flex items-center space-x-6 lg:space-x-8">
                  <div class="flex-shrink-0 grid grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="w-44 h-64 rounded-lg overflow-hidden sm:opacity-0 lg:opacity-100">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-01.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-02.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                  </div>
                  <div class="flex-shrink-0 grid grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-03.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-04.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-05.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                  </div>
                  <div class="flex-shrink-0 grid grid-cols-1 gap-y-6 lg:gap-y-8">
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-06.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                    <div class="w-44 h-64 rounded-lg overflow-hidden">
                      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-hero-image-tile-07.jpg" alt="" class="w-full h-full object-center object-cover">
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <a href="#" class="inline-block text-center bg-indigo-600 border border-transparent rounded-md py-3 px-8 font-medium text-white hover:bg-indigo-700">Shop Collection</a>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

Everything should now be in place and you can set encore running and watching for changes by running this in a terminal window.

yarn encore dev --watch

While this is running, you can modify any of the CSS classes in the above template i.e. change text-4xl to text-6xl and you should see notifications on the CSS being rebuilt in the terminal window.

Viewing your first page

We need to actually see the page to verify it is working as we expect. For simplicity, I'm going to use PHP's built-in webserver in this example so we can run, in another terminal window

cd public
php -S localhost:8080

And now we can open our favorite browser and go to http://localhost:8080 and see the result. It should look something like this

Try before you buy

So you can see this in action and experiment for yourself, I've created a git repository with the step of this blog post already completed so you can simply git clone and install the dependencies and away you go.

Git repository: https://github.com/chrisshennan/symfony-and-tailwindcss-example

References

Get started with Tailwind CSS - Installation - https://tailwindcss.com/docs/installation
Install Tailwind CSS with Laravel - https://tailwindcss.com/docs/guides/laravel
Tailwind UI - Official Tailwind CSS Components & Templates - https://tailwindui.com/

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Originally published at https://chrisshennan.com/blog/using-tailwindcss-with-symfony-encore

Docker - Tail `docker logs` from the end of the log file

Chris Shennan — Fri, 20 May 2022 08:45:00 +0000

Many docker containers output log and error information to /dev/stdout and /dev/stderr rather than their traditional log files, and you can use the docker logs command to view those messages. You can make use of the docker logs command like this:-

docker logs [CONTAINER_ID]

If you want to follow the logs live as you run your application, you can use:-

docker logs --follow [CONTAINER_ID]

By default, the docker logs command shows all the log entries for that container, and if the container has been running for a while, that can be many lines of output that you are not really interested in. If you are attempting to debug your application, you might want to follow the log entries but beginning now rather than showing everything that came before, i.e. tail the log entries from the end of the log file rather than the start.

You can do this by using --tail 0 i.e.

docker logs --follow --tail 0 [CONTAINER_ID]

Similarly, if you want to look back over recent entries, you can set the value accordingly, i.e. to view the last 100 entries you can do

docker logs --follow --tail 100 [CONTAINER_ID]

You can also use the shorthand version by replacing --follow with -f and --tail with -n like

docker logs -f -n 100 [CONTAINER_ID]

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

4 steps to improve Laravel + Docker performance issues

Chris Shennan — Tue, 04 Jan 2022 11:31:38 +0000

Ok, so the title is a little misleading. I was attempting to improve the performance of a Laravel application that was running inside docker but the improvements I made would work with other frameworks i.e. Symfony, CodeIgniter or even your own bespoke application. In this particular case, these changes resulted in a performance gain of almost 90%.

The performance improvements that I introduced were (I'll cover each of these in a bit more detail below).

Checking for DNS issues
Installing PHP Opcache
Configuring Nginx to handle OPTIONS requests
Installing docker-sync

Checking for DNS issues

DNS resolution issues can greatly affect the performance of your application and can leave you trying to debug applications for performance issues when your application is working fine. In my case, I traced the DNS resolution issues down to the use of a .test domain extension, i.e. example.domain.test. To try and identify the root cause, I created some sample entries in the /etc/hosts file to test with i.e.

127.0.0.1   example.domain.test
127.0.0.1   example.domain.xyz

With these set up, localhost, example.domain.test and example.domain.xyz will all resolve to 127.0.0.1. I was suspecting performance issues with example.domain.test and I set up example.domain.xyz as an alternative mapping to see if the issue was isolated to the .test extension or also affected the .xyz one.

Next, I spun up a standard nginx docker container so there was some content being served for our test cURL request to receive.

docker run --rm -p 8081:80 nginx

With this running, we can make a request to http://localhost:8081 or http://example.domain.test:8081 or http://example.domain.xyz:8081) and we should be presented with the default "Welcome to nginx!" page.

Now we can test if there are any DNS resolution issues by timing the requests.

Via localhost

sh-3.2$ /usr/bin/time curl -I  localhost:8081
HTTP/1.1 200 OK
Server: nginx/1.21.4
Date: Fri, 17 Dec 2021 08:32:50 GMT
Content-Type: text/html
Content-Length: 615
Last-Modified: Tue, 02 Nov 2021 14:49:22 GMT
Connection: keep-alive
ETag: "61814ff2-267"
Accept-Ranges: bytes

        0.01 real         0.00 user         0.00 sys

Via example.domain.test

sh-3.2$ /usr/bin/time curl -I  example.domain.test:8081
HTTP/1.1 200 OK
Server: nginx/1.21.4
Date: Fri, 17 Dec 2021 08:33:17 GMT
Content-Type: text/html
Content-Length: 615
Last-Modified: Tue, 02 Nov 2021 14:49:22 GMT
Connection: keep-alive
ETag: "61814ff2-267"
Accept-Ranges: bytes

        5.10 real         0.00 user         0.00 sys

Via example.domain.xyz

sh-3.2$ /usr/bin/time curl -I  example.domain.xyz:8081
HTTP/1.1 200 OK
Server: nginx/1.21.4
Date: Fri, 17 Dec 2021 08:33:42 GMT
Content-Type: text/html
Content-Length: 615
Last-Modified: Tue, 02 Nov 2021 14:49:22 GMT
Connection: keep-alive
ETag: "61814ff2-267"
Accept-Ranges: bytes

        0.05 real         0.00 user         0.00 sys

In my case, I was running this on Mac OSX and localhost and example.domain.xyz returns in a few milliseconds but example.domain.test has a 5-second delay. This turned out to be due to attempts to resolve the hostname via IPV6 and I'd only defined the IPV4 mapping in /etc/hosts file. Once I added the IPV6 mapping into my /etc/hosts file, like below,

127.0.0.1   example.domain.test
127.0.0.1   example.domain.xyz

::1 example.domain.test

I could then see that the cURL request to example.domain.test were resolving quickly as expected.

sh-3.2$ /usr/bin/time curl -I  example.domain.test:8081
HTTP/1.1 200 OK
Server: nginx/1.21.4
Date: Fri, 17 Dec 2021 08:37:11 GMT
Content-Type: text/html
Content-Length: 615
Last-Modified: Tue, 02 Nov 2021 14:49:22 GMT
Connection: keep-alive
ETag: "61814ff2-267"
Accept-Ranges: bytes

        0.01 real         0.00 user         0.00 sys

Note: If your application is an API that is accessed via an AJAX request, you could be affected by this delay twice, once for the preflight (OPTIONS) request and again for the GET / POST request, so this change could save you around 10 seconds overall per AJAX request.

Installing PHP Opcache

The PHP docker image doesn't have opcache enabled by default. You can add this to your Dockerfile in a similar way to below

FROM php:7.4-fpm

RUN apt-get update && apt-get install opcache -y

Unless you have specific needs, just enabling opcache should be enough

Configuring Nginx to handle OPTIONS requests

If your application is being accessed via an AJAX request then there are 2 requests that are being made. An OPTIONS (CORS) request (to see if the action is allowed) and the GET / POST / PATCH etc request (the actual action) and if your application is handling the OPTIONS request then you have a delay as a result of passing the request over to PHP and PHP booting up the framework etc to process the request.

In a development environment, you might be happy to leave your application open to all requests, in which case we can configure Nginx to handle the OPTIONS request directly and cut out your application which will speed up the request. To achieve this we need to add the following into your nginx configuration

# for OPTIONS return these headers and HTTP 200 status
if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Methods "*";
    add_header Access-Control-Allow-Headers "*";
    add_header Access-Control-Allow-Origin "*";
    return 200;
}

For example, in our garage API case, a full server block for development might look like this.

server {
    server_tokens off;

    listen 80;
    listen [::]:80;

    root /var/www/garage-api/public;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
        gzip_static on;

        # for OPTIONS return these headers and HTTP 200 status
        if ($request_method = OPTIONS) {
            add_header Access-Control-Allow-Methods "*";
            add_header Access-Control-Allow-Headers "*";
            add_header Access-Control-Allow-Origin "*";
            return 200;
        }
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass garage-api:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

Installing docker-sync

Install docker-sync using the following command

sudo gem install docker-sync

Configure

docker-sync.yml

version: "2"
syncs:
  garage-api-sync:
    src: './application'
    sync_userid: 33
    sync_groupid: 33

docker-compose.yml

version: '3.7'

services:
  garage-api:
    volume:
      garage-api-sync:/app:nocopy

  garage-nginx:
    image: nginx

Spinning up

docker-sync start
docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d

Summary

Although I was looking to boost the performance of my Laravel application running inside docker, these changes are not related to Laravel and so could be applied to any other framework or PHP application but these 4 changes did have a significant impact on the performance of my application.

I focused on one particularly heavy area of the application in which had a frontend application was making 18 API calls (so 9 preflight requests + 9 GET requests) and originally this took around 32 seconds to complete all the API calls. After the changes had been put in place this dropped to around 3.5 seconds resulting in a performance boost of almost 90%.

References

Docker Sync documentation - https://docker-sync.readthedocs.io/en/latest/index.html

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Fixing "Authentication plugin 'caching_sha2_password' cannot be loaded" errors

Chris Shennan — Mon, 20 Dec 2021 09:31:48 +0000

Summary

You have installed MySQL 8 and are unable to connect your database using your MySQL client (Sequel Pro, HeidiSQL etc). Every attempt to connect using your MySQL client results in the following error

Authentication plugin 'caching_sha2_password' cannot be loaded: dlopen(/usr/local/mysql/lib/plugin/caching_sha2_password.so, 2): image not found

Authentication plugin 'caching_sha2_password' cannot be loaded. The specific module can not be found

Reason

As of MySQL 8.0, caching_sha2_password is now the default authentication plugin rather than mysql_native_password which was the default in previous versions. This means that clients (Sequel Pro, HeidiSQL etc) that rely on the mysql_native_password won't be able to connect because of this change.

Resolution

1) You can, at a server level, revert to the mysql_native_password mechanism by adding the following to your MySQL configuration files

[mysqld]
default_authentication_plugin=mysql_native_password

2) You can, at a user level, revert to the mysql_native_password mechanism via the following process

Open a terminal window and connect to your MySQL instance via the command line

mysql -u [USERNAME] -p

Enter your MySQL password and press enter and you should be logged into your MySQL instance.

Now run the following SQL command, replacing [USERNAME], [PASSWORD] and [HOST] as appropriate.

Note: [HOST] can be the IP address of your computer which would allow access from your computer only or, in the case of a local development environment, you can use % to allow from any host.

ALTER USER '[USERNAME]'@'[HOST]' \
  IDENTIFIED WITH mysql_native_password \
  BY '[PASSWORD]';

ALTER USER '[USERNAME]'@'%' \
  IDENTIFIED WITH mysql_native_password \
  BY '[PASSWORD]';

Now you should be able to go back to your MySQL client and connect as normal.

References

2.11.4 Changes in MySQL 8.0 - https://dev.mysql.com/doc/refman/8.0/en/upgrading-from-previous-series.html
6.4.1.2 Caching SHA-2 Pluggable Authentication - https://dev.mysql.com/doc/refman/8.0/en/caching-sha2-pluggable-authentication.html

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

Connect to a private RDS instance using SSH & AWS SSM (Systems Manager)

Chris Shennan — Wed, 26 May 2021 11:35:37 +0000

Objective

You have an AWS RDS instance which is on a private subnet and therefore not publicly accessible and you wish to connect to this RDS instance remotely without installing a bastion server or having any public-facing ec2 instances.

For this article, we are making the following assumptions:-

There is no bastion instance to provide external access
There are no security groups which provide external access
There is an ec2 instance in a private subnet which has access to the RDS instance
This ec2 instance is running Ubuntu

Prerequisites

Install ec2-instance-connect on EC2 instance - This can be done by connecting to an existing ec2 instance using AWS Session Manager and run

  apt-get install ec2-instance-connect

Note: If you are using autoscaling groups or blue/green deployments, you can add this to the ec2 user data make sure that ec2-instance-connect is installed when a new server is created.

Install session-manager-plugin locally (https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-working-with-install-plugin.html)

Create an SSH Key

You will need an SSH to connect to the ec2 instance. If you already have one you wish to use then you can skip to the next step, otherwise, you can create one via

ssh-keygen -f my_rsa

This will create SSH private and public keys named my_rsa and my_rsa.pub.

Push your SSH Key to the target instance

To connect to the ec2 instance, you will need to send the SSH public key to the desired ec2 instance via

aws ec2-instance-connect send-ssh-public-key \
  --instance-id i-0c6e3bd52bbb2373c \
  --availability-zone eu-west-1a \
  --instance-os-user ubuntu \
  --ssh-public-key file:///my_rsa.pub

Note: The SSH public keys are only available for one-time use for 60 seconds in the instance metadata. To connect to the instance successfully, you must connect using SSH within this time window. Because the keys expire, there is no need to track or manage these keys directly, as you did previously.

Start Session

You can now start an AWS System Manager session and enable port forwarding. In this case, you are going to forward port 9999 on your local machine to port 22 on the target ec2 instance.

aws ssm start-session \
  --target i-0c6e3bd52bbb2373c \
  --document-name AWS-StartPortForwardingSession \
  --parameters '{"portNumber":"22", "localPortNumber":"9999"}'

Note: This will appear to hang because it is maintaining a tunnelling connection from port 9999 on localhost to port 22 on i-07edf50160ab3172

Open tunnel to RDS (in another terminal)

Now you need to open a tunnel to your RDS instance via the AWS System Manager session you created above.

ssh ubuntu@localhost \
-p 9999 \
-N \
-L 3388:production-database.inzy2e1e4v6s.eu-west-1.rds.amazonaws.com:3306

Note: This will appear to hang because it is maintaining a tunnelling connection between port 3388 on localhost to port 3306 on production-database.inzy2e1e4v6s.eu-west-1.rds.amazonaws.com via i-07edf50160ab3172

Connect to your RDS Instance

With the above steps complete, you can now use your favourite database client (SequelPro, HeidiSQL etc) to connect to your database. The connection details will be:-

Host: localhost
Port: 3388
Username / Password: as per the live database you are trying to access

You should now have access to your RDS instance.

References

Using Amazon EC2 Instance Connect for SSH access to your EC2 Instances - https://aws.amazon.com/blogs/compute/new-using-amazon-ec2-instance-connect-for-ssh-access-to-your-ec2-instances/
Install the Session Manager Plugin for the AWS CLI - https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-working-with-install-plugin.html

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!