Recently, Randy Fay of the DDEV project blogged about two new Docker providers available (and supported by DDEV) for MacOS: Rancher Desktop and OrbStack. Both of these join Colima and Docker Desktop as supported Docker providers for DDEV on MacOS. 

What is a Docker provider?

I know that I certainly have asked this question - more times than I care to admit. As Randy explains in the blog post:

All of the Docker Providers on every platform (except Linux) are actually wrappers on the open-source Docker/Moby project, which is supported by Docker, Inc.

In other words, in order for DDEV to talk to Docker, it needs a provider. But, not all Docker providers are created equal. Neither Docker Desktop nor OrbStack are open-source - both have free versions (with restrictions); for most commercial use cases, there is a cost involved. Colima and Rancher Desktop are both open-source.

Features vary between Docker providers as well, so it only makes sense that performance differences also exist. Fortunately, Randy has written another blog post summarizing the performance differences between the various Docker providers on MacOS.

tl;dr if you have Mutagen enabled with DDEV, then they're all pretty fast, with OrbStack having the edge.

Why switch Docker providers?

While Colima is (IMHO) heads-and-tails better than Docker Desktop for Mac, upgrading Colima itself has been a bit of a rocky road. I have learned to never assume that my databases will remain intact during a Colima upgrade. This usually isn't a deal-breaker, but for me, it is squarely in the inconvenience category.

I'm hoping that the situation is smoother with Rancher Desktop.

Getting started with Rancher Desktop

As I (currently) use DDEV on MacOS with Colima (and Mutagen enabled,) I decided to give Rancher Desktop a try, as it is an open-source option. 

Using the instructions provided by the DDEV project, I downloaded Rancher Desktop from the official site. A bit surprisingly, the recommended installation method was not Homebrew, but rather a bit of an old-school MacOS .dmg file.

After downloading Rancher Desktop (but before installing it,) the steps I took to install and change over from Colima began with:

Next, I double-clicked to install Rancher Desktop - making sure to uncheck the "Kubernetes" checkbox as the DDEV instructions suggested. I didn't touch any other settings during the Rancher Desktop install.

Once that was installed, I restarted my Terminal app, then navigated to one of my DDEV projects.

If you haven't used it before, the docker context use rancher-desktop bit basically tells Docker which provider to use. In other words, you can have multiple providers installed (like I do with Colima and Rancher Desktop) and switch between them using the docker context use command.

With that, installation was complete. 

My experience with Rancher Desktop

In short: uneventful (in a good way)

I didn't have any issues at all - it all went very smoothly. From a performance standpoint, Drupal 10 sites feel a little bit snappier than with Colima, but this is purely qualitative, not quantitative. 

The (minor) downside

When switching Docker providers, while project code isn't touched, unfortunately, project databases don't automatically come along. In his blog post, Randy suggests using ddev snapshot --all as an initial step in the process to back up all databases. I tend to take a more piecemeal approach - individually exporting databases while using Colima, then importing them while using Rancher Desktop. For example, here's my process for moving a database from Colima to Rancher Desktop (assuming my system is currently using Rancher Desktop):

Granted, it's a bit wordy, but it works for me.

So, Orbstack?

At the present time, I have no plans to test-drive Orbstack. While Randy's blog post does indicate I would experience a minor performance boost, at this time, I'd rather just stick with an open-source solution.

One of our Professional Module Development course graduates, Jay Volk, recounted his recent experience with Orbstack:

My experience is that OrbStack is really fast and while not open source (it's $8/mo.) it seems well worth the cost and I'm happy to support this project.  Orbstack will take your existing Docker settings and move them to Orbstack when starting up (it asks your permission.) This proved to be no problem for DDEV but occasionally causes problems with the other solution I sometimes need, Lando.  Easy enough, Docker can reclaim settings back from OrbStack and with a Docker restart you're good to go again with that (albeit slower) solution.

Conclusion

I wrote the first draft of this blog post about 2 weeks ago - since then I've stuck with Rancher Desktop and have no plans to go back to Colima. I'm pretty sure the performance is a bit better than Colima and I've had absolutely zero issues. The real test (for me at least) will be when it comes time to update Rancher Desktop - assuming it is a smooth experience, I doubt I'll be returning to Colima. 

Header image generated by ChatGPT-4 using the prompt: "Create a cartoon image of a cowboy lassoing a giant laptop computer using 2:1 aspect ratio". If someone could identify the two flying objects to the right of the laptop, I'd be most appreciative.

The Visual Layout Suite module is a great improvement of the core editorial experience leveraging Layout Builder and many contrib modules. Basicailly, it enables Layout Builder, depends on several contrib modules that improves Layout Builder and ads its custom magic.

One of the most important features is the use of utility classes allowing the configuration of the look and feel easily from the frontend with an instant preview. Additionally, it allows to restrict the utility classes a user can use, so the user is not overwhelmed by the extra options and also the look and feel of the page can be limited to be compliant with the style guide of the site. New utility classes can be easily added and components can be configured to only use a reduced set of utility classes to un clutter the UI.

VLSuite integrates with any Drupal component that integrates with Layout Builder and more: entity fields, paragraphs, Views, SDC, medias, etc. And there's no dependency on any theme, external service or certain entities. The only soft dependency is a Bootstrap 5 theme to enjoy all the VLSuite features out of the box. However, you can use any theme as long as it provides the utility classes you require. T

All the previous information means you could add VLSuite to an existing site with minimal…

Since Drupal 8, there has been a mostly smooth migration path between major versions, so you can upgrade from 8 to 9 to 10 relatively easily.

One bump in the road can be the availability of modules for the new version. Drupal 8 and 9 were only supported for a year after the release of their successors, which didn’t help. While quite a lot of modules had a release supporting the next version quickly, there seemed to be quite a few that were very slow to update, and quite a few sites were waiting for one or two modules to release compatible versions before being able to upgrade. I think there are…

Get your session in now...

Don't Miss the Last Chance to Submit Your Idea

With over 40 sessions submitted to date, we have a couple of days left for you to get your ideas in for MidCamp 2024!

We’re open to talks for all levels of Drupal users, from beginner through advanced, as well as end users and business owners.

See our session tracks page for a full description of the kinds of talks we are looking for.  If you’re new to speaking, check out the recording of our Speaker Workshop for ideas.

Submit a session now!

Important Dates:

• Proposal Deadline: January 7 (Sunday), 2024 at midnight CST
• Tickets on sale: very soon!
• Early-bird deadline and speakers announced:  February (all speakers are eligible for a free ticket, and anyone who submits a session that is not accepted will be eligible for early-bird pricing even after it closes)
• MidCamp 2024: March 20-22

Sponsors Get Early, Privileged Access

Get early and privileged access to new talent and customers by sponsoring MidCamp. We have a variety of sponsorship packages available.

Starting at $600, sponsoring organizations can target their jobs to a select group of experienced Drupal talent, maximize exposure by sharing space with dozens of jobs instead of millions, and have three days of being face-to-face with applicants.

Our sponsorship packages are designed to showcase your organization as a supporter of the Drupal community and provide opportunities to:

• grow your brand,
• generate leads,
• and recruit Drupal talent.

Check out the sponsorship packages here, we look forward to working with you to get your organization involved for 2024!

Stay In The Loop

Join the MidCamp Slack and come hang out with the community online. We will be making announcements there from time to time. We’re also on Twitter and Mastodon.

We can’t wait to see you soon! Don’t forget, cancel all those other plans and make MidCamp the only thing happening on your calendar from March 20-22, 2024.

I was just recently starting to get this on projects after (at least I think that's why) I updated to Chrome 120.

That's the error message in behat at least, which I think originates from the actual webdriver (chromedriver) response. If I look at the debug information from the chromedriver logs it says this:

Well the error is clear enough. It can not find the binary. That's fine by me, but where would I go about informing about the binary? Well, for me that would be in behat.yml:

This probably translates to something like this, while initiating the session with chromedriver (slightly edited for relevance and brevity):

If you are using some other tool that interacts with chromedriver, I am sure you are already setting some parameters there, which you could append this new parameter to.

Authored by: Nadiia Nykolaichuk.

Since Douglas Engelbart invented the computer mouse in 1963, it has become a popular device that many people use for browsing the Internet today. However, there are still a great number of people who cannot afford the comfort of using a mouse. A wide range of temporary or permanent impairments make them rely on keyboard-only navigation.

Amanda Luker

Senior Frontend Engineer

As a Senior Frontend Engineer at Four Kitchens, Amanda is responsible for translating visual designs and applying them to Drupal sites.

January 1, 1970

Drupal provides a system for site administrators to add their own images and have them appear uniformly on the website. This system is called Image Styles. This tool can resize, crop, and scale images to fit any aspect ratio required by a design.

When creating responsive websites, a single image style for each image variation is insufficient. Each image, such as a hero image, a card image, a WYSIWYG image, or a banner image, requires multiple versions of one image. This ensures that the website delivers only what visitors need based on their screen size. For instance, a mobile user may only require a 320-pixel-wide image, while a large desktop user may want an 1,800-pixel-wide image (doubled for double-pixel density). For this reason, Drupal has Responsive Image Styles, which will group your images into a set of styles that will each show under different conditions.

Practical approach to convert images from design to Drupal

• Determine your image’s aspect ratio. If you find that the images in the design are not in a common aspect ratio (like 1:1, 2:1, 4:3, or 16:9) or if they vary by a little bit, consider running the dimensions through a tool that will find the closest reasonable aspect ratio.
• Determine the smallest and largest image sizes. For example, for a 16:9 aspect ratio, the smallest size might be 320 pixels x 180 pixels, while the largest could be 3,200 pixels x 1,800 pixels (doubled for high-density screens).
• To generate all variations, you can use an AI tool to print images with 160-pixel increments between each size. 160 increments tend to hit a lot of common breakpoints. Here’s an example using GitHub CoPilot:

There are likely more ways to streamline this process with Copilot. I’ve also used ChatGPT to rewrite them using a prefix, making it easy to add them in Drupal like this:

If adding all of these steps seems like a lot of work, consider using the Easy Responsive Images module! This module can create image styles for you, allowing you to set your aspect ratios and the increment between each style.

Once you have all your styles in place, create your responsive image styles by following these steps:

• Choose a name for your responsive image style based on its usage
• Select the “responsive image” breakpoint group
• Usually, I choose to select multiple image styles and use the sizes attribute. Use the sizes attribute to craft your “sizes.” For example:

(min-width:960px) 50vw, (min-width:1200px) 30vw, 100vw

In this example, choosing an image that is smaller than 960 pixels will best fit the full width of the viewport. At 960 pixels, the image will be selected to best fill half of the viewport width, and at 1,200 pixels, 30%. This approach is nimble and allows the browser to choose the most appropriate image for each case.

After setting the size rules, choose all of the image styles that you want the browser to be able to use. You don’t have to use them all. In some cases, you might have two responsive image styles that are pulling from the same aspect ratio image styles, but one uses all of them and the other uses a subset of them.

After adding your responsive image style, you need to map your Media View Mode:

1. Go to https://[your-site.local]/admin/structure/display-modes/view/add/media
2. Add the media view mode as a new Display for Images: https://[your-site.local]/admin/structure/media/manage/image/display
3. Choose “Responsive image” as the Format and select your new responsive image style

Once you have set this up, you are ready to use the View Mode to display the image field for your entity.

In this example, all the images have the same breakpoint. There may be times when you need to have different aspect ratios at different breakpoints. In those cases, you may want to use your custom theme’s Breakpoint Group. This will allow you to manually select each image style on for each breakpoint (instead of letting Drupal choose it for you).

The post Responsive image best practices for Drupal appeared first on Four Kitchens.

Sometimes, creating a modern design with high functionality is problematic. Especially when it comes to large-scale and complex projects. There are various solutions to make the process of creating layouts easier and more convenient. One of the most influential and popular is Drupal Layout Builder.