Easy whitespace trimming with Twig

When using the Twig templating engine for PHP you might have used the trim filter to trim away any possible existing blanks at the beginning and end of a string:

{{ '  I like Twig.  '|trim }}

{# outputs 'I like Twig.' #}

Another way to trim out whitespaces is by using the – modifier:

<li>
    {{- value }}    </li>
{# outputs '<li>no spaces    </li>' #}

Use an Image From a URL With Timber

Most of the time when creating a WordPress website based on Timber I am working with local images that were added through the WordPress media library or uploaded using an ACF image field. You use these with the help of the get_image() function of Timber.

But sometimes it can come in handy to work with images from an URL source – be it from another site or even your own server.

Here is how to do that with the get_external_image() function:

$context = Timber::context();

// Lets say you have an external image that you want to use in your theme

$context['cover_image'] = Timber::get_external_image($url);

Timber::render('single.twig', $context);

Then in your twig file you can use the typical filters and properties:

<img src="{{ cover_image.src }}" class="cover-image" />

Helpful documentation for further information: Timber\externalImage and work with external images.

How to Fix: Cannot create a new Simulator on Xcode running on macOS Sonoma

I use the Xcode Simulator for testing and debugging the website I create on iOS since I don’t have an iPhone. It is basically the full iOS running inside a window on your Mac.

Since upgrading to macOS Sonoma I was not able to launch or create a new Simulator however. When trying to create a new Simulator I wasn’t able to click into the “OS Version” field – it just wouldn’t do anything:

How to Fix Not Being Able to Pick an OS Version

When I opened the main Xcode app and selected the “iOS” tab on top, it showed the notice “iOS 17.0 Not installed”. So just click on “GET” and download the new OS, which might take a little while:

After having downloaded the iOS version and reopening the Simulator app I could pick the “OS version” again and was able to use my old Simulators and also create a new Simulator device without a problem:

So here is this website running inside a virtual iPhone 15’s Safari. You can use almost all features of Safari and see the whole browser ui which is handy for better testing of responsive websites:

Bonus Tip: Add more OS versions inside XCode / Simulator

I also learned along the way that inside Xcode’s settings you can head over to the “Platforms” tab to see all installed Platforms and download new ones:

Order your Google Chrome profiles the way you want

I use profiles inside Google Chrome a lot. The helpful function makes it easy to separate Google accounts or website logins and is also handy when wanting to remember 2FA (Two-Factor Authentication) codes in the browser for longer time.

There are several of these profiles that I only access maybe twice a year e.g. when accessing Google services with a specific account.

🫤 Chrome’s default: profiles are ordered randomly or chronologically

I have 20+ profiles set up. On opening Chrome it displays the “profile picker” window. By default these are ordered by an obscure method – maybe by date added or so. This means that the profiles I actually want to use most often (maybe 3-5 profiles) are harder to find and I might need to scroll down every time I want to use them.

From the interface there doesn’t seem to be a way to manually reorder these profiles.

✨ The solution: Nicely order your Google Chrome profiles

Turns out you can actually order your profiles in your preferred custom way:

1. Open Chrome so the profile picker window appears:

2. Edit your profile by clicking the three-dots menu and selecting “Edit”:

3. Change the name of your Chrome profile. You could either prefix it with an Emoji or with a number to order them precisely.

Clone All Files From a Single Git Branch Without Git History

When starting a new WordPress theme project I usually create a new Git repository for my custom theme to be stored in. Into that I want to clone the files of the starter theme I am using (Flynt), but without that project’s Git history (.git directory). Here are two ways to do that:

Use Git Commands to Clone Without History

I have my new repo locally at ~/code/new-theme and want to clone the next branch of the public https://github.com/flyntwp/flynt repo into that:

cd ~/code/new-theme
mkdir tempclonedir
cd tempclonedir
git clone --depth=1 --single-branch --branch next https://github.com/flyntwp/flynt . 
rm -rf .git
cd ..
mv tempclonedir/{.,}* .
rm -r tempclonedir

Of course you can combine these commands into a one-liner like so:

cd ~/code/new-theme && mkdir tempclonedir && cd tempclonedir && git clone --depth=1 --single-branch --branch next https://github.com/flyntwp/flynt .  && rm -rf .git && cd .. && mv tempclonedir/{.,}* . && rm -r tempclonedir

Using degit to Clone Single Git Branch

Alternatively you can use degit to make the same task easiert. It’s a Node.js package maintained by Rich Harris, the creator of Svelte.

First install degit globally:

npm install -g degit

Then to do the same as above run the following command:

cd ~/code/new-theme
degit https://github.com/flyntwp/flynt#next

Note: if you are cloning into a new git repo (that already has a hidden .git directory and therefore isn’t empty) you have to append the “–force” parameter.