Introduction
Let’s talk about Craft CMS, plugins and nerdy stuff for a bit.
Hello Craft friends. A lot is going on in the world, and I hope you are well.
This is a simple newsletter, typically filled with technical news and information. The most significant news I have to share with you is not technical. It’s honorable. Craft has donated its May profits to organizations fighting for justice listed below. Bravo.
We’ve also got news of the latest Craft 3.4.x updates featuring improved the loading of the control panel. Plus, there are multiple previews of what 3.5 is going to bring us. 3.5 is shaping up to be a great update.
Thank you to the sponsors of this issue.
Fortrabbit is a preferred hosting provider for Craft CMS, offering a modern PHP application platform tailored for Craft, with Git deployments and Composer support. Try fortrabbit today.
Freeform is the feature-filled form plugin for Craft CMS that includes ready-to-use templates to get you up and running quickly. Learn about the power of Freeform.
Let's hit the links.
-John Morton
Top Stories
May profits for Craft CMS/Commerce/Plugin Store donated ⭐️
Craft CMS, Commerce, and Plugin Store profits for the month of May were donated to @blklivesmatter, @ColorOfChange, @NAACP_LDF, @eji_org, @join_campaign_0, and @projectnia.
Craft 3.4.22.1 released
As of 3.4.21, thumbnails now use the same aspect ratio as the source image and get a checkered background to reveal image transparency.⭐️
In version 3.4.22, field settings are now lazy-loaded when the Field Type selection changes, improving the up-front load time of Edit Field pages.
For more information, read the full changelog linked above.
News
GraphQL improvements in 3.5
Brandon teased in progress on updates to GraphQL queries coming soon to Craft Beta 3.5.
Craft and themes in 3.5
Piotr pointed to this Q&A in the GitHub issues area for 3.5 development. This means creating themes for Craft will be possible when 3.5 is released.
Nitro Beta 3
Quoting Jason McCallister, for the latest Nitro beta "there is a long list of changes, additions, and fixes! Most notable is the addition of nitro db
with a lot of helpful database management commands. You can now add, backup, and import databases from the CLI. Oh, and sites are created in the home folder to help with symlinks!
"If you are running an earlier beta, please run the nitro refresh
command to make sure everything is in the right place and order going forward!"
Featured Sponsor

Craft CMS Hosting Partner
We like to automate ALL THE THINGS — except customer support.
Get started with a free trial today! And ask whenever you have any questions.
Tools, tips, and fundamentals
Relations | Craft 3 Documentation
There was an interesting discussion in Discord last week about the relatedTo
parameter on an element. The docs currently mention passing in an element, an element ID or an array of element IDs or element objects as parameters. But relatedTo
accepts element queries as parameters as well.
See the following example where firstCategoryGroupQuery
and secondCategoryGroupQuery
are variables containing full queries.
craft.entries.section('posts') .relatedTo(['and', firstCategoryGroupQuery, secondCategoryGroupQuery])
This works, but, why does it work? Craft will call its ids()
method internally on those element queries, so the code above is just like calling this:
craft.entries.section('posts') .relatedTo(['and', firstCategoryGroupQuery,ids(), secondCategoryGroupQuery.ids()])
That means you're not actually saving SQL queries by doing this, but you have typed fewer keystrokes. (Thanks to Brandon for helping me out with this.)
To read the Discord discussion yourself, start here.
Making a versatile Twig macro
The Craft Twig Primer has a Dry templating section on how to make macros. It will give you a good start on making a DRY macro, but an additional tip was shared in Discord by Ben Parizek. Sending in a general settings
object which sets defaults for the expected values creates a versatile function.
{% macro button(settings) %}
{% set width = settings.width ?? 100 %}
{% endmacro %}
{% from _self import button %}
{{ button({ width: 200 }) }}
Here's a link the Discord discussion.
How to prevent cache busting (preferably on a single section)?
The StackExchange post mentions the cacheElementQueries
setting (see those docs) or the Cache Flag mentioned below.
London Craft Meetup Videos
London Craft CMS Meetup has a YouTube channel that hosts a series of videos taken of the live talks/ presentations carried out each quarter. Expect to see Ben Croker’s Templating for Performance in Craft presentation from the upcoming June 9 Meetup posted there soon.
Perfecting your technique
Using Gridsome with Craft CMS
Judd Lyon has a detailed and helpful post on understanding Gridsome and how you can use Craft as your data source.
Configuring Craft for Load Balanced Environments
The Craft team has posted a helpful article on setting up load balancing servers for high traffic sites.
CraftQuest : Creating a Boilerplate Craft Project
Join Ryan and Andrew as they cover how to build your own custom default Craft project and generate it using composer create-project
.
This recording requires a free CraftQuest membership. Paid yearly memberships are now just $199 and include all every course on the site. It’s worth it, IMO.
CraftQuest: Localhosting Round-Up
In this livestream, Ryan and Andrew review the localhosting options, and Andrew shows Ryan that Docker really isn't that hard after all.
Like the previous link, this one viewable with a free membership to CraftQuest.
Sponsor

Effortlessly build beautiful forms in minutes with Freeform!
Freeform is the most reliable, intuitive and powerful form building plugin for Craft. Everything is at your fingertips in our elegant form builder. It gives you full control to create simple or complex multi-page forms, as well as connect your forms to many popular API integrations. Templating is easy and highly customizable. Our ready-to-go templates and features like built-in AJAX and Conditional Rules Logic will have you ready in minutes! No other form plugin even comes close to comparing! You can trust Freeform (and the team behind it) to deliver the quality and support you expect and deserve.
Plugged In
Craft Blitz Recommendations ⭐️
The Craft Blitz Recommendations plugin will run in the background while is the site is navigated and provides templating performance recommendations for Craft CMS.
Dumper
Dumper gives you an easy way to inspect Craft objects in your templates. View entire arrays or individual entries or elements.
As pointed out on Discord, {{ dump(var) }}
is also built into Craft, so there is no need for a plugin for that, but Dumper uses the Symfony VarDumper component which formats the output more nicely.
Transient
Store variables in Twig code, which will be available to other templates for the duration of the page load to share values or states between multiple templates.
PageProofer
PageProofer is a website feedback tool that allows you to gather feedback, request content changes, reports bugs, and track issues directly on your website.
Level Entry Types
This plugin allows you to specify available entry types to the user based on the current structure level of an entry.
For example, if you have a structure made up of landing pages and tabbed pages, you can ensure tabbed pages are only allowed as a descendant of a landing page.
Cache Flag
Cache Flag adds a new {% cacheflag %}
Twig tag to Craft CMS, which works like the native {% cache %}
tag, except that it will not save element queries for automatic cache breaking.
The Craft Advantage
Yii, Twig, PHP & More
Intro to Composer, with Jordi Boggiano
In this episode of The Laravel Podcast, Matt Stauffer talks with Jordi Boggiano, co-creator and co-maintainer of Composer, about the powerful tool's history, common use cases, and overall purpose.
It’s not Craft, but it’s interesting.
A taste of Vue.js 3: API Changes, Async Components, and Plugins
This article Andrew takes you through changes that have to be made when moving to Vue.js 3, covering API changes, async components, and adapting existing plugins.
Vacations | Website 101 Podcast
In this episode, Sean and Mike discuss what to do when your web developer goes on vacation.
Sapper: The Next Small Thing in Web Development
Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.
Terminal - Visual Studio Marketplace
Do you use VS Code? This adds a tiny little icon in the status bar to make opening the built-in terminal a bit easier.
A Better Approach for Using Purgecss with Tailwind
Purgecss is an indispensable frontend tool, especially when used alongside TailwindCSS. Its mission and logic are simple -- so simple, that you need to help it if your classes do not appear verbatim in the code. Here are some approaches.
Sorted CSS Colors
A tool to sort the named CSS colors in a way that it shows related colors together.
Equal Width Columns in CSS Grid are Kinda Weird
Equal-width columns with CSS Grid requires some awkward syntax, but as the post says, you only have to learn it once.
From Node to Deno
This post collects popular Node packages and topics and discusses how to achieve the same thing using Deno.
Twin Macro
Use Tailwind classes within css-in-js libraries.
Andrew pointed this library out when he updated his post, Using Tailwind CSS with Gatsby, React & Emotion Styled Components.