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.

Meeting the Swiss WordPress Community at WordCamp Switzerland 2023

I attended my first WordCamp today at this year’s edition of WordCamp Switzerland in Murten. The event was a one-day conference for people who are interested in the WordPress community. With about 220 participants, there were 16 talks ranging from legal issues like the new Swiss privacy law to SEO.

My badge of WordCamp Switzerland 2023

People were very open and I enjoyed talking to some of them – whether they were professionals earning their daily bread with WP based projects, enthusiastic hobbyists or people working for service providers like Cyon, the Swiss hosting company.

My favourite talks were:

  • WooCommerce, but faster! by Remkus de Vries in which he talked about the importance of putting the focus on the right aspects of your site, for example picking a good hosting service and external caching provider.
  • How to automate your maintenance by Nico Martin with an introduction to Playwright and how you can automate testing with it.
  • SEO WooCommerce: let’s get that traffic where Isaline Muelhauser shared practical insights in how she approched a project in her role as SEO strategist.

Was definitely interesting and I can recommend you to go – it’s nice to meet other people that share the same or might have other perspectives on the WordPress ecosystem.

Thanks to everyone who helped to organise the whole event quite smoothly. They also did a good job at including everyone speaking German, English and French 👏🏻

Build great WordPress websites with Flynt, the component based starter theme for developers

After working with WordPress since my teenage years and trying all sorts of ways of building websites with it I came across the Flynt WordPress starter theme about two years ago. It allowed me to build a lot of websites since then. I’ve come to love it’s component based approach so much that I’ve decided that more people know about this great tool. So I decided to make a “Getting started with Flynt” video about it:

Flynt – A Component Based WordPress Starter Theme for Developers To Create Tailored Websites 🚀

It’s actually the first screencast video that I’ve recorded in English – which turned out harder than I thought 😅 I would really like to receive feedback by you (I mean you!) in the comments of this post or on YouTube, whether it’s related to Flynt or also the video itself.


Full transcript of the video

Intro

Hey everyone!

In this videos I want to talk to you about a fantastic way to build WordPress websites. It begins with a starter theme I’ve discovered about two years ago, called Flynt.

Flynt is not your average theme or site builder: it’s a starter theme for developers that want to efficiently build custom sites. So, if you are looking for a path to get better at developing with WordPress, want to write maintainable code and provide a good flexible admin experience for your editors – THIS IS THE WAY!

In the next few minutes I will tell you about

  • what makes Flynt great
  • then show you how your content editors workflow is going to look like
  • and last but not least show you insights into how the theme’s code looks in practice.

Let’s get started!

About Flynt

The main paradigm when building with Flynt is breaking down your site into smaller parts – the “components”. So if you’re looking at your site try to identify the components that make it up – for example here on the Flynt website:

  • The Logo
  • The main Navigation
  • and a content section containing an Image besides a text

Treating all these elements as their own little things breaks down your code for logic, styling and interactivity into small packages that can be quickly understood and reused – on one site or also easily copied to the next site you’re building.

Flynt is a starter theme, and a theme for developers – what does that mean? It’s a starting point for a practical best-practices theme setup and tooling to make your life easier.

Opposite to some well known end-user themes like Divi or Avada or Enfold that focus on letting you to build your site without coding it doesn’t provide a ton of ready-to-use elements but instead only a good basic set of components that you may fully customise, remove if you don’t need them, and for sure add new one’s yourself. So the idea is to ship something tailored to your needs instead of unused bloat.

And one of the best things? It doesn’t invent a lot of new things but rather combines some very well known, widely used developer tools for WordPress in a hassle-free way.

So, the main ingredients of Flynt are:

And by the way: Flynt was built by Bleech, an agency from Berlin, Germany that needed an efficient solution to create great WordPress websites and shared it with the world. Thanks a thousand times guys!

Admin / Content editing experience

Let’s quickly look into WP Admin in order to then better understand how the concept of components works.

When I am editing a page with Flynt you’ll see that the native WordPress editor / Gutenberg is removed and replaced by a component based editor. This editor is actually nothing else but ACF’s Flexible Content Field. It allows me to quickly add new components, move their order with drag & drop and of course – editing the content of my pages and posts. As you can see the actual fields and interface that is displayed for each component has been custom tailored for what it needs and nothing more.

This is a big plus of the concept in my experience with content editors: the interface may not be too fancy, but it can quickly be understood and used by clients without a steep learning curve.

Overview of the theme & components

Now enough of the theoretical talk: let’s dive into code.

I’ve opened up the Flynt theme directory in my VS Code. You’ll find the familiar WordPress theme core ingredients: we have index.php, page.php, style.css – I assume you’ve already met them elsewhere. Let’s not yet get into much more detail about the theme in general, but focus on one interesting directory: “Components”.

When developing your site, you’ll probably be spending most of the time working on components. So let’s now see how these are built. Let’s look at the Image Slider Component, that we’ve just used, as an example.

The typical files a component can have in the Flynt starter theme.

It shows the core files that a component can have:

  • a functions.php file that contains the definition of the ACF fields that are shown in the admin area. It’s also the place where you can fetch and modify your data before it gets passed on to the next step:
  • in index.twig – you are going to write the HTML that is later rendered when your component is shown to the visitor of your site. It’s written in HTML, flavoured with the Twig templating language which makes juggling with data quite easy.
  • Further we have a _style.scss file – This is where all the CSS styling of this individual component is defined. It’s written in Sass, which is just CSS with a few additional tricks like nesting to make it’s development more joyful. It will later be compiled into standard CSS.
  • And last but not least: script.js – in here we can let our component do things interactively, for example letting our bunch of images turn into a slider. Each component that contains Javascript is turned into a standard web component and provides a familiar way to work with.

So let’s again go through these files and see what they contain in more detail:

  • functions.php: this file first defines a custom PHP Namespace for each component, in order to prevent conflicts with equally named functions. Next to it we see the getACFLayout() function where all of our data fields are defined that will show up on the content editor’s screen. Let’s quickly open up WP-admin side by side and have a look at a few fields:
    • Title (wysiwyg)
    • Images
    • …and more
      These definitions are standard ACF field definitions as they can also be created through ACF’s WP-Admin page. Thankfully we don’t have to remember all of these by heart but can use Flynt’s VS Code Snippets Plugin to insert example definitions.
  • Let’s go into the next file index.twig. In here we prepare our HTML. All of our data fields that are defined in functions.php getACFLayout() function are automatically available here. Remember how we defined the “images” field that holds our slider images? We’ll that’s what is accessed here on line 11. We’re using the “loop” function of Twig to loop over all the images in that field. Technically the images field returns an array, so we’re looping over all array items. We then output an image tag for each of our images. Further below we’re adding some next & previous buttons to control our slider.
  • Of course so far our slider component wouldn’t really do anything but output a list of images, since we didn’t add any Javascript or CSS. Let’s quickly look at a important detail here in our twig template. If we look closely we can see that our outermost div contains an is="flynt-slider-images" attribute. This is used inside script.js to define a standard web component. What that means is that we have now created a new and reusable block on our website. Once that component is loaded on a page the constructor() is called which initialises our javascript slider. I will not go into much more detail here since this is custom for every component, but to give you a quick overview is that for this example we are loading the swiper slider, find some DOM elements and initialise the swiper-slider is on them.
  • So far so good: we’ve added some fields to add data, output that data to HTML with a little help of Twig and then turned that into a neat image slider. Now let’s make it pretty ✨ When we look at the _style.scss file we see that the CSS-selector is targeting the same ‘is=”flynt-slider-images”‘ element. All of our styling is then typically written inside it, which means it’s scoped by that component and will not accidentally style any other parts of your site. Since we’re writing all custom code this also generally means that you can write really low-specificity CSS which makes your life – again – less painful and a lot more joyful.

That’s about it for a basic component. There can also be components that are only used in your layout, not in WP admin such as your Navigation or Footer. And of course there’s lot a other things to be said and seen, but I’ll finish here for the moment.

Further resources

If this has made you curious, then let me share three helpful links for finding out more about Flynt:

  1. the Flynt website has some good introductions about it’s core concepts and setup, you should definitely read these to get started easier.
  2. The Flynt Github repo Readme also explains some ideas more practically and of course let’s you download the theme ;-)
  3. If you’re stuck with a problem or have some ideas then please share them in Flynt’s discussion board on Github.

Outro

Please let me know in the comments if you found this video interesting or helpful. And oh: hit the Thumbs Up button if you liked it 🙌🏻

Bye Bye!