We talk with Andy Giles about GitHub Copilot and his experience with it in Drupal development.

URLs mentioned

• GitHub Copilot
• Visual Studio Code extension 
• PhpStorm plugin
• Official Microsoft video on getting started with GitHub Copilot in Visual Studio Code 

DrupalEasy News

Professional module development - 15 weeks, 90 hours, live, online course.  
Drupal Career Online - 12 weeks, 77 hours, live online, beginner-focused course.

Audio transcript  

We're using the machine-driven Amazon Transcribe service to provide an audio transcript of this episode.

Subscribe

Subscribe to our podcast on iTunes, Google Play, iHeart, Amazon, YouTube, or Spotify.

If you'd like to leave us a voicemail, call 321-396-2340. Please keep in mind that we might play your voicemail during one of our future podcasts. Feel free to call in with suggestions, rants, questions, or corrections. If you'd rather just send us an email, please use our contact page.

Credits

Podcast edited by Amelia Anello.
 

Today we are talking about web design and development, from a group of people with one thing in common… We love Drupal. This is episode #435 UI Suite initiative.

For show notes visit: www.talkingDrupal.com/435

• Elevator Pitch
• What do you mean by implementing design systems
• Is this to thel themers or site builders
• What is the expected outcome
• The project page says initiative, but this is not on the community initiatives page, is this an intitiative
• How does this implement public design systems
• Does this work with Single Directory Components
• Youtube Channel
• Getting involved
• Roadmap
• Use cases
• Do you see this going into core

• UI Suite Initiative
• UI Suite YouTube
• UI Suite Slack

Pierre Dureau - LinkedIn pdureau

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi

Chris Wells - chrisfromredfin

• Brief description:
  • Have you ever wanted simple but accessible dropdown navigation on your Drupal website? There’s a module for that.
• Module name/project name:
  • Disclosure Menu
• Brief history
  • How old: created in Nov 2022 by Jay Huskins of Redfin Solutions
  • Versions available: 2.1.5 which works with Drupal 9 and 10
• Maintainership
  • Actively maintained, most recent commit is less than a month ago
  • No Test coverage at this point
  • Documentation - via README.md
  • Number of open issues: 2, neither of which are bugs
• Usage stats:
  • 29 sites
• Maintainer(s):
  • Jay Huskins, with support from Redfin
• Module features and usage
  • Provides a new menu block that includes markup for disclosure buttons, that make it easier for users on assistive devices to navigate drop-down menus
  • Activating the button will toggle the visibility of nested menu items
  • Also includes ARIA labels to provide clarity around what the buttons do
  • Worth mentioning that Drupal’s Olivero theme also includes disclosure buttons in its mWe’ll also cover Disclosure Menu as our module of the week.
  • Guest Introenus, but there isn’t a straightforward way to pull the menus implemented there into your custom theme
  • Also had a write-up in the Drupal advent calendar we talked about last month, so listeners can also check that out if they want more information

Prompt Engineering: Get the Most From Your Drupal Site's AI Integration

A recent analysis by the IMF estimates that 40% of jobs globally, or 60% of jobs in advanced economies, will be impacted by the growing adoption of AI. How will it impact your role? In my opinion the surest way to secure your place in these transformed economies will be by including AI in the toolset you use to stay competitive.

Tags

• Drupal

Dear Reader,

As we bid farewell to the inaugural month of the new year, we find ourselves standing at the intersection of introspection and eagerness. With its promise of renewal and a clean slate, January has set the stage for the unfolding chapters of the coming months. It's a time marked by resolutions, goal-setting, and embracing the boundless possibilities.

In reflecting on this initial chapter, let's take a moment to assess our achievements, acknowledge progress, and eagerly anticipate the challenges and triumphs on the horizon. The journey of the year has only just begun, and the unwritten pages of our story beckon with anticipation.

As January gracefully transitions into February, the closure of the Global Contribution Weekend in the Drupal community symbolizes a significant close to an impactful month. Here is a compilation of Drupal Contribution Weekend celebrations that occurred across the globe. Nico Grienauer has an explainer of what this event is. 

As we bid farewell to January, the Drupal Community sets its sights on a month steeped in celebration. Often hailed as the month of love, February encourages us to bask in the warmth of connections and expressions of affection. With numerous global events, Drupal is poised to embrace the heartwarming spirit of togetherness.

Now, let's shift focus and explore some of the latest news stories and articles we covered last week.
Kazima recently engaged in a compelling interview with Fran Garcia-Linares, Senior Drupal Developer at the Drupal Association. During the interview, Fran discussed the Association's strategic initiatives, including migrating from Drupal 7 to Drupal 10 and spearheading the GitLab Acceleration initiative. Additionally, Kazima delivered comprehensive coverage of the latest developments and insights from Drupal Mountain Camp 2024.

Acquia has exciting webinars lined up. On February 7, 2024, they will host "Mastering Your DAM Strategy and Governance Plan for 2024 and Beyond," aiding businesses in navigating asset demands through digital asset management (DAM) solutions. Additionally, on January 29, 2024, at 12:15 pm EST, Acquia will delve into "Navigating the AI Labyrinth: Security & Compliance in Modern DXPs and CMSs."

Jesse Loseberg leads an A11yTalk session on February 08, 2024, at 01:30 PM (ET), titled "The Accessibility Mindset: Moving Beyond Remediating, Fixing, and Reacting." and at the Florida DrupalCamp on February 24, 2024, from 1:00 pm to 1:45 pm, Steve Wirt of CivicActions explores "Unraveling the Clues to Effective Drupal Site Documentation," tailored for developers, project managers, content designers, system architects, and UX designers.

Droptica's webinar, "The Future After Drupal 7: Exploring Alternatives and New Opportunities," is on February 22 at 3:00 pm CEST. Save the date for Drupalcamp Rennes on March 28-30, 2024, promising three days of Drupal Camp goodness. Stay updated with this week's Drupal events by checking the published list here.

NERD Summit 2024 has extended its session proposal deadline until all 40 session slots are filled. Additionally, the event offers sponsorship opportunities for keynote talks. For more details, check the provided link. DrupalSouth Sydney 2024, happening at the Sydney Masonic Centre from March 20 to 22, is a significant gathering for the Australian and New Zealand Drupal community. GitHub has opened its certification program to the public, offering individuals worldwide a chance to enhance their skills and credentials. Learn more at this link.

Splash Awards Australia and New Zealand are calling for submissions in 2024. Find more details here. Explore the details of the upcoming DrupalCon Portland, which features a dedicated marketing track. Find more information here.

Varbase 9.1.1 is now available, offering a patch (bugfix) release for Varbase 9 suitable for production sites. Created by Rajab Natshah, this release addresses issues and ensures smoother functionality. Also the PHP development team has released PHP 8.2.15 and PHP 8.3.2, introducing important updates and improvements to the widely used scripting language.

There are more stories available out there. But the compulsion to limit the selection of stories is forcing us to put a hard break on further exploration—happy Drupaling folks.

To get timely updates, follow us on LinkedIn, Twitter and Facebook.

Thank you,

Sincerely
Elma John
Sub-editor, TheDropTimes.

Ever found yourself wondering, 'Why is my Drupal site crawling at a snail's pace?' or contemplating ways to turbocharge your Drupal website performance? Essentially, what are the most efficient, budget-friendly, and quickest solutions to tackle those performance bottlenecks that are hindering your website's speed?

Fortunately, if your website is powered by Drupal 8 (and we assume it is), you're in for a treat with one of the most sophisticated caching systems available. The key lies in embracing Drupal caching best practices and leveraging its full potential.

Top 9 Essential Drupal Caching Tips

Let’s explore the top 9 Drupal caching best practices that promise to be the game-changer for your page load time. 

The Web Chefs

January 1, 1970

At Four Kitchens we keep several lists of “Hot Topics” to share our learnings across the dozens of sites that we care for. Are you upgrading a Drupal site to CKEditor5? We’ve tidied up one of these internal wiki documents into this set of general upgrade guidelines that might pertain to your website.

Rough steps to upgrade

The level of effort needed for this upgrade will be different for each site. It may take some time to figure out. CKEditor 5 is available in Drupal 9.5 and beyond. You can try switching/upgrading on a local site or multidev and assess the situation.

First, create a list of CKEditor enhancement modules on the site and check if they are Drupal 10 ready (the reports from Upgrade Status and this Drupal.org page may help). Common modules to look for include Linkit, Anchor Link, Advanced Link, IMCE, Entity Embed, Video Embed Field, Footnotes, and anything with the word “editor” in the title.

As a best practice, you should test both the creation of new content, and editing existing content in several places. This will help make sure that some lesser used HTML isn’t treated differently in the new CKEditor. Run visual regression tests (if available).

You may need to point out key interface changes to your clients or stakeholders (e.g., contextual windows for links/media/tables instead of modals, etc.). While it is a bit of a change, it’s overall an improved user experience, especially for new people who are coming in cold.

Anchor links

Anchor link gives editors the ability to create links to different sections within a page.

For “better integration with Drupal 10, CKEditor 5, and LinkIt” there is a 3.0.0@alpha version. If your project isn’t using wikimedia/composer-merge-plugin, you must require northernco/ckeditor5-anchor-drupal package and add the following to the repositories section of composer.json:

Issue

Branch

Embedded media

Depending on the age of your site, it might be using one of several techniques to embed media into the WYSIWYG:

• Entity embed
• Video embed field
• The embedding functionality built into more recent versions of Drupal Core

If your site is using the video_embed_field module (most sites are probably using Drupal core’s media module), there is a patch that adds support for CKE5. Insert Image works slightly different (though this is probably not the case if your site uses core’s media module). It’s worth considering if there is a way to enhance this for user experience, if necessary.

If your site uses custom Entity Embed for media, consider switching to the core media library. It may provide a better administrative user experience in some cases.

The insert image button in CKEditor functions a little differently than it used to. Rather than bringing up a modal with fields to upload an image like the image below:

It now immediately pulls up your computer’s file system for you to search for images like so:

After adding your image, the alt tag box prompts you underneath the image:

After submitting your alt tag, you can adjust alignment and sizing:

Moving general styles to link styles

It was common in CKEditor4 to use its “Styles” feature to provide a way to add variations of links (to make them look like buttons, or to add icons).

There are a few UX problems with that approach. Either the styles are set to apply on <span>, which means that they can be applied to non-links, or the styles are set to apply on <a>, which means that they are mysteriously grayed out most of the time (until you select a link). Either way, it’s not intuitive how to apply a link style. In CKEditor5, we can switch to using the Link Styles module.

Change in Styles dropdown behavior

In CKEditor4, when integrated with Drupal, the Styles dropdown only allowed applying one style to an element (e.g., “external link”). If you tried to apply a different style, such as “locked link,” the previous style would be removed.

The Drupal implementation of CKEditor5 allows for multiple styles to be applied to elements via the Styles dropdown. This change may be unexpected for some, and could result in elements that look broken, such as when a link has both the “external link” and “locked link” styles.

CKEditor5 introduced a new API for adding theme-specific styles. The new architecture might cause the CKEditor5 theme to bleed into the admin theme. To know how to deal with these issues, review new API for adding theme-specific styles in CKEditor5.

You’ll likely run into an issue with styles bleeding outside of the editor, so see the other section within this page.

Cut and paste

Paste-from-Word, paste-from-Google-Docs, etc. is now built-in to CKEditor5. (At least for 90% of use cases.) There’s a paid plugin for more esoteric needs.

There is no paste-as-plain-text plugin for CKEditor5. You can use Ctrl-Shift-V (or Cmd-Shift-V) to paste as plain text. If you want to get rid of all formatting (including bold, links, etc.) in existing text, you can highlight the text, use Ctrl-C to copy, then Ctrl-Shift-V to paste it back as plain text.

Behat

Many of our Behat automated test broke after the update because there were multiple structural changes, so this is how we solved it: First, here is the doc about how to get the editor instance in case you want to know more about it. This is how we rewrite our custom step to fill out the CKEditor during testing. (We found the code in an article post-post).

and the mink step for regular field:

And I fill in wysiwyg on field "field-summary-0-value" with "Some Teaser Text"

And for a field inside a paragraph:

And I fill in wysiwyg on field "field-sidebar-content-0-subform-field-simple-text-0-value" with "Behat Side Nav Body Text"

Preventing custom styles from bleeding into admin theme with CKEditor5

See the new API documentation about implementing theme styles in the new way. This may require some adjustments on your end.

One of the major changes with CKEditor5 is that it pulls WYSIWYG styles onto the whole page when there is a WYSIWYG on the page. In CKEditor4, styles were only pulled into the CKEditor iframe. This can be extremely frustrating when the admin theme looks odd or different on pages that contain a WYSIWYG.

Limit the number of stylesheets being pulled into the WYSWIYG. (First, note that this method has only been confirmed to work on newer versions of Sous using specific webpack settings. If you are having problems with it, make sure your webpack settings allow for multiple manifests to be generated. You may need to refer to a newer site to see how it is configured.)

The first step is to create a new stylesheet (a manifest) called wysiwyg.scss in the same directory as your styles.scss file, which assembles all the stylesheets used in your theme. For this stylesheet, we’ll only want to include the stylesheets that our WYSIWYG needs. For example, I have one that looks like this:

In this example, we are pulling in a couple needed files from node_modules (normalize and breakpoint), and then any .scss files from base, and then select files from atoms (links, text, lists, tables, and images).

Compile and make sure that it has created the new files at /dist/css/wysiwyg.css. If you get any errors, you may need to include another file that has a variable you need, or something along those lines.

1.) Update your .info file In your theme’s .info file, set CKEditor5 to use your new stylesheet:

2.) Review the WYSIWYG. Visit a page with a WYSIWYG on the page, and verify that the limited styles are loading properly within the WYSIWYG. Try all the dropdowns and buttons that are included in the WYSIWYG settings. If anything appears unthemed, review your styles to see if there’s a stylesheet missing from your manifest.

3.) Review the rest of the page. Now review the page around the WYSIWYG and note how if differs from other pages that do not have a WYSIWYG. Common differences to look for are: heading styles, text styles, buttons — basically anything that you included in your manifest.

4.) Limit styles

• Find the page’s body class for node edit pages (in our test case, .gin--edit-form). It may depend on your admin theme.
• Find the wrapper class for the WYSIWYG. Most likely the best choice is .ck-content. Our approach will be to hide styles from .gin--edit-form, but then add them to .ck-content.

For example:

becomes:

And for buttons:

it becomes:

With any luck, the styles used apply mixins, which makes it easy to filter out where to apply the styles. In some cases, the overriding of styles may become hard because of the order in which the stylesheets are loaded. Try to avoid !importants and instead use things like an additional element or class to firm up your override.

One issue that may come up is your overrides here end up overriding things in your custom theme, depending on how they are defined. In this case, don’t wrap the styles in the body classes, but rather undo the custom theme’s style on the admin page items manually. Luckily, since we’re narrowly applying custom styles, only things used in the WYSIWYG will need to be addressed.

For instance:

Continue to review your page and adjust it until it no longer differs from other admin pages.

Editor explodes out of its container in deeper paragraphs

This issue seems to occur only with rich text fields within a paragraph. It might be limited to the Gin theme.

This issue might be because of the container’s width. If input fields inside the container have a specified size exceeding the screen width, it can lead the editor to inherit the container’s width, extending beyond the screen. You can see this as a Drupal Core/CKEditor5 bug in Drupal.org: CKEditor5 toolbar items of multivalue field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form’s sidebar on wide viewports.

To resolve this quickly, set the input fields to 100% width, making sure everything works seamlessly. Be sure to include this in a stylesheet of your admin theme.

We can also modify the ‘flex-wrap’ property of the CKEditor buttons to make sure they stay within the container’s width:

Additional resources

• Five Can’t Miss Articles on CKEditor 5 in Drupal
• Upgrading to CKEditor5
• Upgrading my site from CKEditor4 to CKEditor5
• How to upgrade from CKEditor4 to CKEditor5

The post Tips for upgrading to CKEditor5 appeared first on Four Kitchens.

Aegir is a hosting system built in Drupal, for Drupal.

It lets you easily create new Drupal sites and create databases, filesystems, virtual hosts etc. for the sites. You can manage hundreds or thousands of sites using a simple Drupal based UI. As simple as you would manage a list of 100 blog posts, you can manage 100 Drupal websites.

Currently the latest released version of Aegir is: Aegir 3.

Aegir 3 relies on Drush 8, which means it can work with: Drupal 7; Drupal 8 and Drupal 9. But not Drupal 10. Oh.

I have need for it to work with Drupal 10. Specifically we have a large collection of Drupal sites, that currently Drupal 9, but ready and waiting to jump to Drupal 10. Yes, we've left it too late, we should have done this a long time ago, but we are where we are.

I've spent the day looking into various options, they are roughly:

• Move to BOA
• Get Aegir 3 to work with Drupal 10
• Move to Aegir 4
• Move to Aegir 5
• Move to something else

My terms of reference

I'm looking for a solution that changes as little as possible in the current stack. We've got a big, beefy server, and lots and lots of Drupal sites on it. The Drupal sites themselves run fine and we're after the management of them really. We don't need to scale out particularly, and if we do, we've got options on the hardware side vertically. We also don't need some fancy multi-datacenter approach, and ideally keep with our Nginx, Varnish and Apache sandwich.

I do want to manage things in the old school way, but I need a few, select, non-technical users to be able to manage the sites in a friendly UI like Aegir's hosting system.

Lots of the new hotness out there are essentially orchestrating Kubernetes, and that's great, but I don't actually want 100 containers all running PHP which is how I understand all of these systems would essentially function.

I used to be an Aegir maintainer, and I have a deep knowledge of how Aegir works and even helped write some of the inter-process communications stuff in Drush 8. 

Move to BOA

The first option is one that has shown to be working, and requires a custom fork of Drush 8, some core patches and using BOA. BOA is quite an aggressive fork of Aegir, and I'm not sure I want all the changes and whatnot that comes with it. I think I have to discount it, because the last time I looked there would simply be too much change on the nginx side of things at least, and it was doing all kinds of things I don't simply understand and thus won't be able to reason about.

The main inspiration I take from BOA is that they've got it working! Well, they've got something working. It looks like they've essentially forked Drush 8, applied some Drupal core and Aegir patches. This makes it so that Aegir can still use it's aliases, code and talk to Drupal 10 sites. How they've been able to do this is very impressive indeed. I feel like it's just a matter of time before it breaks though, surely Drupal 10 is going to change something in it's lifecycle and cause issues. I don't quite see how this can work with Drush commands in contrib modules. For example, during deployments on our sites we revert features, but that's a features module provided Drush command, which won't be callable from Drush 8 in Drupal 10.

Get Aegir 3 to work with Drupal 10

This I feel is the least effort option. Find some way to get standard Aegir 3 to communicate with Drupal 10. Now, Drush 8 can't directly bootstrap a Drupal 10 site. Aegir 3 uses Drush 8 to be both the backend storage for all the data about the sites to host, and to bootstrap the sites it manages.

This worked really well in the Drupal 5/6/7 days, and just about coped with Drupal 8/9, but hasn't for Drupal 10. Think of it this way, what if instead of hosting a Drupal site, it was a Wordpress site? Aegir simply wouldn't be able to neatly bootstrap into a Drupal site and do it's stuff. It's the same with Drupal 10.

How much stuff does it really do though? I'm not 100% sure. I know that it gets the currently installed packages for example, but what else does it do. It looks to me like it often hands off a Drush subprocess do the heavy lifting. Maybe we can hand off to another subprocess, one that runs a site-local Drush 12+ instance, passing in all the options it needs to bootstrap and run the actual commands on the site.

Please, if this is a completely crazy way to go, someone please comment and let me know!

Move to Aegir 4

So there is a 4.x branch of Aegir, and apparently it can work with Drupal 10 sites. It does this by replicating the aliases to YAML files and then running a global Drush 11, which can then bootstrap the Drupal sites. Apparently it also has replaced some of the Drush invocations with standard process invocations. I guess it had to do this because the Drush to Drush process communication stuff was in Drush 8 and got removed.

It seems like Aegir 4 also brought in a lot of other changes too, and that's not particularly something I want or need. Also, it's never been officially released/tested by the community etc.

Move to Aegir 5

This got announced in a few blog posts a while back, and I've not heard anything since. It's possible that it's there and ready to go, but as far as I understand it, it's a whole change to how the sites would be managed and hosted, and while an import from Aegir 3 is on the roadmap, it seems like it would import the sites into something completely different, not some simple vhosts and a DB server.

Also, even if it does exist, it'll have had minimal testing and eyes on it.

Move to something else

I think this is my preferred long-term option. These sites don't really need Drupal. They could actually be static sites plugged into a central content repository. That would drastically simplify lots and lots of things. Or we keep the Drupal sites, but move them to Kubernetes and using something like Amazee's Lagoon to host them etc. This would be very cool, but probably quite expensive in terms of having enough resources to host all the containers.

One for the long term future I think.

Get Aegir 3 to work with Drupal 10

I might give this a go in that I think what I can do is this:

1. Get Aegir running normally.
2. Install a Drupal 9 site.
3. Get a single Aegir task running that doesn't bootstrap the Drupal 9 site with Drush 8. I'm thinking something like getting the one-time login link. This has data flowing in both directions, and I think, Drush 8 trying to bootstrap Drupal to the run the provision command. Getting this working would involve calling a site local Drush based on the data from the alias, but not actually using the alias.
4. If that works, put something into settings.php that throws an exception if Drush 8 is detected, and then try to get everything else working for my use-cases.
5. Then try and set up a Drupal 10 site.

I'd love to know your thoughts on this. Do you have an old Aegir running sites, and you don't know what to do with it? Or do you think I'm crazy and want to offer me a better way to go, use the comments below, please!

Updates/notes

So looking at the provision commands, the actual provision command to say, get the one-time login link bootstraps the Drupal site. So that would need to change that command so that it no-longer bootstrapped Drupal at all, but instead changed to be a pure Drush command. Then it could load the data from the alias etc.
I'm tempted to go ahead and get a dev instance of Aegir running and the add a new Drush command, that doesn't bootstrap Drupal, but does attempt to grab data from an alias and see what I can do. That possibly an even simpler proof of concept, as it's an entirely new Drush command, but one I then know could be called by provision's task runner instead of the current one.