How to Output a Text Formatted with Line Breaks in a Filament Admin Panel (for Laravel apps)

While building a Filament Panel in an internal Laravel app today, I wanted to display a read only view of my Model. It contains a “message” field that has line breaks in it, which I wanted to show correspondingly.

I achieved this by combining the formatStateUsing() and html() methods with php’s nl2br function on a TextEntry:

<?php 

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            TextEntry::make('message')
                ->formatStateUsing(fn (string $state) => nl2br($state))
                ->html(),
        ]);
}

Quick Fix for Safari 18 Issue With Overlapping Columns in the Classic WordPress Editor Interface

The problem, introduced with Safari 18

The very recently released Safari 18 on macOS Sequoia seems to have introduced a bug that makes the columns in the classic editor interface of WordPress overlap. Metaboxes that should actually be below the main content field are placed under the second sidebar column.

Easy Fix: add CSS to WordPress admin

You can very easily fix this by loading the following CSS in your admin area:

/* Temporary Fix for classic editor bug in Safari 18 */
#postbox-container-2 { clear: left; }
.index-php #postbox-container-2 { clear: none; }

Even easier: install a tiny plugin that loads the fix

To make things even easier I’ve written a tiny WordPress plugin that does that and nothing more. Download and activate the plugin – and you are good to go.

Meanwhile let’s hope there will be an official fix for the issue.

Quickly Interact With the Selected Element in Dev Tools

Today I learned that there is a very handy shortcut for interacting with the currently selected DOM element in your browser’s console:

  1. Open dev tools in Chrome or Firefox
  2. Select an element / a node in the “inspect” tab
  3. You can now reference the selected element with $0 in the “console” tab and start interacting with it.
See how it works in Firefox (same in Google Chrome)

By the way: you don’t need to have the element currently selected anymore, since $0 means “the most recently selected node”. Also there is $1 to $4 for the last-selected to fourth-ago-selected node, as described in the Google Chrome Console Utilities API reference (might vary with other browsers).

How to Do a Simple Image Processing Performance Test With PHP & ImageMagick

I’ve created a simple open source script to measure ImageMagick performance on a web server. It measures, how long it takes to convert an image it into multiple sizes:

Just download the files from the repo, drop them on your server and open the script from your browser.

Download the script from GitHub

How to Update Duck DNS IP From a UniFi Device

It’s very helpful to have devices on your network reachable through a dynamic dns service without having to pay for it. Follow this short tutorial to setup IP updates from your UniFi router to the Duck DNS service:

  1. Register at duckdns.org and add a domain
  2. Log in to to UniFi management interface on unifi.ui.com (or your local webinterface) and choose the “Network” app.
  3. Go to Settings > Internet and click on your WAN interface
  4. In the Section “Dynamic DNS” click “Create New Dynamic DNS”
  5. Choose the following options:
    Service: dyndns
    Hostname: your “domain” from duckdns.org
    Username: nouser
    Password: nopassword
    Server: www.duckdns.org/update?domains=%h&token=yourtoken
    ℹ️ replace yourtoken with your token from duckdns.org
  6. Save
  7. Check your domain on Duck DNS: the “current IP” value should now be the same as your WAN IP from the UniFi router.

I am using it on our company’s Ubiquiti UniFi Dream Machine SE.