A lot of people decided to “wake up” during the summer of 2020 and the pandemic. Wake up to the facts that were in front of us all along, but which, if they did not directly affect you, were easy to ignore. Wake up to the fact that BIPOC folks have been dealing with atrocities from micro-aggressions to outright murder for too long. The fact is, white privilege feels dirty and guilt-inducing because it should. Because it is a thing that exists and that some of us never asked for but we still have to own it and figure out how to turn it into allyship. It was a difficult few years for some of us…

It has been 10 years since the first Drupal Global Contribution Weekend (DGCW).
For this past decade, communities all around the globe have met on the last weekend of January for three days of fun, community, and contribution.

Despite the years, the spirit of the event hasn't changed. Everyone is welcome, including site builders, testers, designers, project managers, translators, marketers, writers, and, of course, developers. We truly had representatives from all these domains in the recent 2023 version of the event.

Where do you live? Where do you work? What language do you speak?
It doesn't matter because you will find a local event that fits your needs. And if you don't, we'll help you create one.

When

This year, DGCW was from Friday to Sunday, 27-29 January.

Where

This year we saw participation from 3 continents, 7 countries, and 7 languages, with 8 locations in total.
And in line with the Drupal Community’s inclusivity mission, all events gave the ability to also join the team remotely.

Why

Because meeting your local community is always great. Because working as one enriches us as human beings. Because working with peers strengthens you as a professional.
Because we come from the code and stay for the community. This event is the true litmus test since it has been running for so many years, and it's completely self-organised!

What

During the 3-day event, about 140 issues have been worked, 9 being on Drupal core issues queue and the rest between contrib and communities projects.
A total of 67 got fixed and 12 reached the status "Review and tested by the community", waiting to be merged and released.

At the moment, there are about 1.8k major issues on Drupal core queue. If we had a Global Contribution Weekend every week, we could clean that in about 5 months.

We hope the number of participants continues to grow in the next few years.

How

Organising an event is super easy. Have a look at this blog post from DCGW 2020 and check out the section "Interesting, but there isn’t anything close to me." 

Thanks to everyone who joined, who organised, who wanted to join and couldn’t, and who will help with making the next Drupal Global Contribution Weekend - 26th to 28th of January 2024 - better and greater.

Join us on #global-contribution-weekend, #contribution-events, and #event-organizers Drupal Slack channels.

Say “hi” to the contributors all around the world!

Italy: not only Drupal issues. We also discussed the PROs and CONs of DrupalSpoons compared with the new Gitlab integration. And we ate pizza, a lot of delicious pizza!

Germany: Our team is contributing to #Drupal from all over Europe. The first contribution happened at 9am and we have had many more since then. Here are photos from the kickoff call this morning.

Poland: Greetings from Wrocław, Poland :)
 

ECA team: while we haven't got a picture unfortunately, we've achieved quite a bit. 6 maintainers have been working on 17 issues of which 14 got fixed.

France: We didn't manage to get everyone on the pic, but here is the French community on our Saturday events (online+in Paris)

Ukraine: 50+ developers from all over Ukraine came to DevBranch office (the organizer) in Lutsk city for this initiative. We’ve been working on 137 issues, 77 of which are successfully completed so far.

Canada: Canada (Vancouver) team in action, smashing issues like superheroes.

How to Integrate Google Tag Manager with Drupal 9 – An Easy Step-by-Step Tutorial Shefali and Shruthi 14 Feb, 2023 Subscribe to our Newsletter Now Subscribe Leave this field blank

Marketers are always seeking new ways to elevate website engagement and maximize interactivity. Yet, managing the countless third-party integrations and tracking tools implemented to enhance their business can quickly become overwhelming and chaotic. That's when Google Tag Manager comes to the rescue. With its intuitive and user-friendly platform, managing, updating, and tracking the snippets, tags, and integrations on your website has never been easier. From improving website performance to boosting conversion rates, Google Tag Manager offers the solution to streamline your digital marketing efforts and revolutionize your online presence.

Drupal 9 makes integrating with Google Tag Manager easy and effortless. The Google tag manager module in Drupal lets you quickly add, modify and remove tags on your website without touching any code! Read this easy step-by-step guide to learn how to integrate your Drupal 9 site with your Google tag manager.

What is Google Tag Manager and how can it help?

Google Tag Manager is like a toolkit. It has all the tools you need meticulously organized in one place. Tools like Google Analytics, Adwords, personalization tools, A/B testing tools, Remarketing, Native advertising pixels, and much more. All the integration tags can be stored in Google Tag Manager for better access and management. How can it help, you ask?

• Marketers find it greatly beneficial as they don’t have to depend on developers to add and modify integration tags on the website. They can easily do it themselves.
• Better organization of tags can help marketers’ access and manage their integrations easily.
• Updating tags don’t require you to change them on multiple web-pages. 
• Test if your tags get triggered on any event/action in the preview mode.
• You can even check for formatting or security issues before deploying it to live.
• Provides an extra layer of data security.

Integrating Google Tag Manager in Drupal 9

Drupal 9 integrates seamlessly with Google Tag Manager and installing it is also a breeze. Now that we know how useful Google Tag Manager is, let’s move on to integrating it with your Drupal 9 website.

Step 1 - Install the module

You can download the Google tag Manager module here.

Or run this command through composer with this command :

composer require 'drupal/google_tag:^1.4'

Step 2 - Configure the Module

In the admin toolbar, go to Configuration-> System -> Google Tag Manager

Step 3 - Open Container Page

Once you click on Google Tag Manager, you will see a container page like this –

Step 4 - Add a Container

Click on the Add container button. This is where you will add the Container ID that you had created previously when you signed up with GTM. If not done already, go here to signup and create a container ID for yourself (shown in the below steps).

Step 5 - Create a Container

Under Account setup, give the Account name and your Country name.

Under Container setup, give the Container name and select the target platform as per your requirements.

Click on the Create button.

Step 6 - Get the Container ID

Once done, you will be able to see a popup screen that will display the code snippet that needs to be pasted in the head section. Look out for the Container Id which will look like an alphanumeric word and begins with “GTM”. Here it is “GTM-MXQN9XL”. Copy this code to your clipboard.

Step 7 - Insert the Container ID

Head back to your Drupal setup where you had to add the container ID. Give a name for your container in the Label field and paste the previously copied container ID in the Container ID field. Save the configuration.

Step 8 - And we’re all set!

To verify if the installation of Google tag manager has been successful in your Drupal site, go to the home page of your website and do an “Inspect Element”. If it has been installed properly, you should be able to see it within the tag.

Google Tag Manager is an extremely useful tool for site owners and marketers. Different third-party integrations can be maintained, added and modified easily. This greatly helps marketers in speeding up the process of experimenting and testing out various useful integrations that can lead to better user engagement. Drupal 9 comes loaded with plenty of powerful features and functionalities and tons of handy contributed modules that you can easily install and connect to. As a leading Drupal development company, we can help you build seamless digital experiences with Drupal. We’d love to talk to you!

Email Address Subscribe Leave this field blank Drupal Planet Drupal 9 Drupal 9 Module Drupal Development Drupal Module

Leave us a Comment

 

Recent Blogs

Image

How to Integrate Google Tag Manager with Drupal 9 – An Easy Step-by-Step Tutorial

Image

From Code to Community: Shashwat Tiwari's Dual Pursuits

Image

Taming JavaScript in Drupal (Includes FAQs)

Want to extract the maximum out of Drupal? TALK TO US

Featured Case Studies

Great Southern Homes, one of the fastest growing home builders in the US, sees greater results with Drupal

Explore

A reimagined digital solution for Abaco, a global leader in embedded computing systems for the defense industry

Explore

Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology

Explore View all Case Studies

How to Log Messages in Drupal 8 Editor Tue, 02/14/2023 - 10:43

Keeping a logbook is necessary for the correct operation of the system, so it is prudent to add an algorithm to the code. Thanks to this solution, changes will be made automatically, and all employees with the necessary level of access will have access to them.
Previously, to activate the function used, two protocols were offered by the software. Today we no longer have to face such difficulties because the new Drupal 8 has merged two options into one. Change notifications appear in the "Reports" section, allowing viewing of the content in the user interface. More details about how to log messages in Drupal 8 and Drupal 8 module development will be discussed in our material. 

You don’t have to know a markup language such as HTML to create complex content on your digital platform. 

Users and editors without coding experience can easily craft and update web content using a rich text editor – also called WYSIWYG. It’s pronounced wizz-ee-wig, and stands for What You See Is What You Get. 

CKEditor 5 is the default WYSIWYG editor in Drupal 10, having been initially introduced in Drupal 9.3. Its powerful features make it far more than a mere update of CKEditor 4. In fact, CKEditor 5 was written completely from scratch to overhaul the content editing experience. 

Let’s take a look at what you can expect from CKEditor 5 in Drupal and how to make the most of its core and premium features. 

CKEditor 5 in Drupal Core: A Smoother User Experience 

Better User Interface

CKEditor’s user interface has undergone a serious makeover. It’s been greatly simplified and modernized with UI improvements to icons, toolbar items mechanics, interface colors, and the theme. 
 

Three examples of UI display options. From left to right: Classic offers a fixed toolbar for distraction-free editing; Balloon comes with a floating toolbar so you can edit content in its real location; Inline displays the toolbar only when the editor is focused. Credit: CKEditor.

Balloon Panels

It used to be that adjusting embedded media and tables would bring up a dialog window that covered the content you wanted to format. These windows have been replaced with balloon panels that are much more intuitive, accessible, and mobile-friendly. 

Quick and Easy Tables

Creating and editing tables in CKEditor 4 was often a painstaking process. Content editors will be relieved to hear it’s a breeze in the newest version. You can insert, style, and adjust tables with just a few clicks. It’s also easy to copy and paste rows and columns. 

The tables toolbar offers an efficient editing experience. Credit: CKEditor.

Reworked Style Drop-Drown

The style drop-down has been improved so that you can now see how each style will look before applying it. 

Site admins can configure the styles available through CKEditor 5 in Drupal 10. Credit: CKEditor.

Improved Lists Feature

CKEditor 5 is more stable when it comes to creating complex lists. The improvements were based on a review of hundreds of scenarios relating to nested list items, including those with multiple blocks. 

CKEditor 5 Premium Features: A Catalyst for Collaboration

Adding the CKEditor 5 premium features module to Drupal 10 lets you use state-of-the-art solutions for collaborating and exporting content. It provides a Google Docs-like editing experience that gives you more control over your content and streamlines your editing processes. 

Track Changes 

When track changes mode is turned on, all your edits will be displayed as suggestions that can be accepted, discarded or commented on.

Revision History 

The sophisticated revision history feature allows you to see any changes made and who made them without having to leave the editor. You can also compare several revisions at once and restore previous versions.

Comments

You can now add comments to text and block elements such as images. Your team members can have discussions in threads and remove the comments when they’re done.

Check out the CKEditor 5 collaboration features demo. Credit: Drupal.

Real-Time Collaboration

Multiple authors can now work simultaneously on the same rich text content. You can see at a glance which users are actively editing at any time. 

Notifications

You can now keep track of content changes by setting up notifications by email or writing a custom mechanism to get notifications via Slack. 

Export to Word and PDF

With the click of a button, you can create a PDF or Word Document from content you’ve crafted in CKEditor 5. There is also a pagination feature that lets you see how your document will be laid out for printing. 

CKEditor 5 lets you easily convert rich text content into a PDF. Credit: CKEditor.

MathType

MathType is now integrated with CKEditor 5. This feature allows you to display math equations and chemical formulas on your web pages. You can create keyboard shortcuts and save frequently-used equations and symbols. This could be a particularly useful tool for educational institutions.

The MathType integration lets you create various formulas in CKEditor 5. Credit: CKEditor. 

 

Upcoming Features: What to Expect Next 

Here are some exciting features that are soon to be integrated into Drupal 10 or in your Drupal version of CKEditor 5. 

Autoformatting

This allows you to edit content without having to click any toolbar buttons. Once it’s integrated into Drupal 10, you’ll be able to quickly create lists or format text simply by typing shortcuts. 

becomes a blockquote." data-entity-type="file" data-entity-uuid="65ddae15-8619-4c77-8c77-7015bf994793" src="https://evolvingweb.com/sites/default/files/inline-images/ckeditor5-autoformat-in-core.gif" width="777" height="353" loading="lazy" />

Try the autoformatting demo. Credit: Drupal.

Transformations

You’ll soon be able to automatically create symbols with shortcut text, such as a copyright sign by typing (C). The transformations features can also be a great tool for introducing auto-correct rules.

TypeScript

Developers are currently limited to JavaScript if they want to write a plug-in for CKEditor. But CKEditor will soon deliver official TypeScript for the entire API.

Get Expert-Led Experience With Drupal 10

Want more know-how? Master the fundamentals with our Drupal for Content Editors Training. You'll come away with actionable knowledge to implement improvements to your content processes, accessibility, consistency, and value.

 

//--> //-->

+ more awesome articles by Evolving Web

Overview  The agency’s challenge A large federal government agency had multiple sites, including a public-facing website built on GovCMS Drupal 7. With Drupal 7 coming to end-of-life, the agency needed a new GovCMS site built on Drupal 9. Note : The agency can’t be named for security reasons.   The agency’s transformation Salsa recommended building the new website using CivicTheme , for a rapid build. The site was built in 3 months, and for under $40K. CivicTheme is an open source, inclusive and component-based design system and Drupal 9 theme. The outcomes A visually appealing website built with user-tested components A fast website build An extremely cost-effective website build   Detailed case study Below is a more detailed case study, with specific information for this site build.

Overview  The agency’s challenge A large federal agency wanted a new website dedicated to a specific subset of its stakeholders. The agency was already using GovCMS for other sites, so wanted a new GovCMS Drupal 9 website.  Note : The agency can’t be named for security reasons.   The transformation Salsa cloned another new website we’d built for the agency using GovCMS and CivicTheme . The client then uploaded new content and images to the site. The combination of cloning the site and using CivicTheme saved our client considerable time and costs. The site was built in 2 months and for under $20k.

How to optimise your progressively decoupled Drupal frontend with the new Intersection Observer API.

by rikki.bochow / 14 February 2023

Read on for front-end tips backed by code you can use! You can also watch the full video at the end of this post. 

What is Lazy Loading?

Lazy Loading isn’t a new concept; however, let's quickly recap what we know about it.

“Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It’s a way to shorten the length of the critical rendering path, which translates into reduced page load times.” Mozilla Developer Network.

Why is lazy loading significant?

Good performance offers many benefits.

How often have you given up and closed a web page because it took too long to load? Especially when you’re on your mobile or experiencing a poor connection. It’s easy to forget that not everyone has regular access to fast, reliable internet connections or devices.

There are plenty of benefits to lazy loading:

• Improved initial page load times
• Better perceived performance
• Decreased data usage
• Positive impact on SEO rankings
• Higher conversion rates
• Improved user experience

If you’d like to dive deeper into these metrics, check out Jake Archibald’s F1 series for before and after speed tests.

The basic principles of lazy loading

Stylesheets

Because stylesheet files are render-blocking, we need to determine what is critical or above-the-fold CSS and inline it. We then defer the rest with Javascript attribute swapping and use Drupal’s Library system to reduce unused CSS.

Javascript

We also need to determine our critical Javascript and consider inlining it. Definitely defer any JS that isn’t critical and load asynchronously where applicable. 

ES6 modules are deferred by default and supported by modern browsers, so can be combined with code splitting. Again, we can use Drupal’s Library system to reduce unused Javascript.

Media

Media can slow down pages too. That’s why the loading attribute is gaining support in both Drupal and browsers. 

has the most comprehensive support, so you should avoid using Javascript for these and also avoid lazy loading images that are likely to be above the fold.

Always put height and width attributes to prevent layout shift and use the responsive images module.

But we want to lazy load more!

And with the Intersection Observer API, we can. 

So what is the Intersection Observer API?

“The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.” Mozilla Developer Network

Simply put, it means: “tell me when an element has scrolled into or out of view”.

This API isn’t new (having been around for roughly five years); however, the recent demise of Internet Explorer now means it has full browser support.

iframes

Let's take iframe in Firefox as an example. If you have a lot of iframes (because, let’s face it, sometimes you just need to) and you’d like to save your Firefox users from long pages loads, then you can use oembed_lazyload (which uses Intersection Observer).

Alternatively, you can write a very simple Intersection Observer to populate the iframe src attribute from the data-src value.

In the video below, I ran through a basic introduction to the Intersection Observer API. I used all the default settings and checked the isIntersecting property, swapping the attributes, and then Unobserving the iframe (so it didn’t trigger again when it scrolled into the viewport subsequent times).

// const lazyLoadIframe = iframe => { const obs = new IntersectionObserver(items => { items.forEach(({ isIntersecting }) => { if (isIntersecting) { iframe.src = iframe.dataset.src obs.unobserve(iframe) } }) }) obs.observe(iframe) } window.addEventListener('load', () => { document.querySelectorAll('iframe').forEach(iframe => lazyLoadiFrame(iframe)) })

Javascript applications

We can expand on this idea of deferring assets that are below the fold and think about our progressively or partially decoupled projects.

In the following example, we’ll imagine a Drupal site with complex javascript applications embedded here and there. The apps are written in React, Vue or even Vanilla JS; they fetch data from Drupal as a JSON file and load their CSS. There may also be multiple apps on a page.

If we load these apps, as usual, we’ll load everything, including dependencies (JSON, CSS etc.) on the initial page load, regardless of whether we defer or async the javascript. It’s not render-blocking, but users who don’t scroll down to see the App are still downloading it.

Instead, we can combine the Intersection Observer with a Dynamic Import and truly defer loading all the apps’ resources until the mounting element is in the user's viewport. 

In the below code example, the load() function is only called upon intersection, so none of the apps’ dependencies are requested until the container scrolls into the viewport, significantly decreasing the initial page load time.

React example;

const lazyLoadApp = ( container, componentPath, props = {}, callback = () => [] ) => { const load = async () => Promise.all([ import("react-dom"), import("react"), import(componentPath), ]).then(([ { render }, React, { default: Component } ]) => render(, container, callback) ) const obs = new IntersectionObserver(items => { items.forEach(({ isIntersecting }) => { if (isIntersecting) { load() obs.unobserve(container) } }) }) obs.observe(container) }

We use Promise.all to ensure all of our dependencies are met, and then we destructure what we need from those dependencies and render our app.

After this happens, we unobserve the container.

You can also adjust the load() function as needed, i.e. import Vue and createApp instead–whatever your setup requires. 

Example for Vue 3;

const load = async () => Promise.all([ import("vue"), import(componentPath), ]).then(([ { createApp }, { default: Component } ]) => { const app = createApp(Component, props) callback(app) app.mount(container) })

Example for React 18;

const load = async () => Promise.all([ import("react-dom/client"), import("react"), import(componentPath), ]).then(([ { createRoot }, React, { default: Component } ]) => { const root = createRoot(container) root.render() // callback function moves into Component. })

Then usage would be something like:

// window.addEventListener('load', () => { document.querySelectorAll('[data-app-example]').forEach(container => lazyLoadApp( container, './path-to/component.jsx', { title: container.dataset.title, id: container.id, }, () => container.setAttribute('data-mounted', true) )) })

Here's the breakdown;

• pass in the container (div to render/mount to)
• the path to a specific component
• any props needed (maybe simple data attributes or drupalSettings)
• even a callback function after mounting has occurred

Accessibility considerations

We need to remember that the WCAG have findability rules for hidden content. Adding a heading (maybe even a description) inside the container with a button that triggers the load function might help with this. They get replaced by the rendered app but are available for screen readers and keyboard navigation.

You’ll also need to consider the following: 

• How important is the content in the JS app?
• Is the content shown elsewhere, or can it be?
• Is the app itself accessible?
• What will happen if JS isn’t enabled?

UX considerations

The unmounted container is also a good use case for Skeleton User Interfaces. Start by giving the container a grey background with a rough height/width for the rendered app, then add a loading animation, and you’ll help reduce the “jump” of the suddenly rendered app whilst also improving the perceived performance. 

This approach is also a great way to prevent Layout Shift issues. Also, remember to notify the user if something has failed to load.

You can tweak the Intersection Observer’s settings to increase or decrease the point of intersection, allowing for sticky headers, for example.

What else can we do with the Intersection Observer?

Other use cases for the Intersection Observer include:

• Scroll-spy type components that update sticky anchor navigation
• Animations that only start once in the viewport or should stop once outside the viewport.
• Infinite scrolling pagination
• Pausing videos when scrolled passed
• Bookmarking where an article has been read to

Let’s not forget that the post-Internet Explorer world is full of Observers, including:

• Mutation Observer. For DOM changes, such as attributes or markup/content injection (i.e. knowing when one app has rendered).
• Resize Observer. A more performant version of the window.resize event for element dimension changes.

These all follow the same Observe/Unobserve pattern, so once you learn one, you won’t be able to stop yourself from using them all!

Today we are talking about Drupal & Wordpress with Maciej Palmowski.

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

Topics

• What is Wordpress
• Do you have Drupal experience
• Pros of Drupal over Wordpress
• Pros of Wordpress over Drupal
• Selecting a CMS
• What sites don’t work well with Wordpress
• What sites don’t work well with Drupal
• Headless in Wordpress
• Will Wordpress use Symfony?
• Who wins?

Resources

• Talking Drupal #315 - Communities: Wordpress Vs Drupal
• Talking Drupal #16 - Wordpress Vs Drupal
• Yoast for Drupal (Real-time SEO)
• 295 31 Days of Migration
• 352 Migration
• 381 A Modular Web
• PHP Compatibility
  • https://make.wordpress.org/core/handbook/references/php-compatibility-and-wordpress-versions/
  • https://www.drupal.org/docs/system-requirements/php-requirements
• Statamic
• Sanity Io
• Cassidy Williams Talk
• Matt Mullenweg on licensing derivative works
• Code and Coffee
• Security report

Guests

Maciek Palmowski - maciekpalmowski.dev @palmiak_fp

Hosts

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Katherine Druckman - katherinedruckman.com @katherined

MOTW Correspondent

Martin Anderson-Clutz - @mandclu WordPress Migrate Supports migrating Wordpress exports into Drupal, including posts, pages, attachments, tags, and categories.

Four years have passed since Rachel Olivero left us. Drupal rever her by naming the current default frontend theme, 'Olivero.' Drupal is now WCAG compliant, and our added support for ATAG 2.0 proves that we live by her legacy. Drupal encourages the use of assistive technologies. It is all the more important for a person with vision disabilities. Accessibility, Diversity, and Inclusion are the cardinal ideals we follow, and Rachel was involved in all these areas. Her memorial in Drupal.org recalls that as a person who was blind, transgender, and a lesbian, Rachel understood a lot about the importance of diversity. She passed away on February 03, 2019. Let us keep on her vision forward, keeping Drupal open and accessible for everyone.

Last week, TheDropTimes (TDT) ran two interviews with the organizers of Florida DrupalCamp. AmyJune Hineline (volkswagenchick) emphasized the importance of accessibility in her interview, stating accessibility is not an option or an add-on; it should be a default. In the second interview, Adam Varn (hotsaucedesign) opines that the success of Olivero and Claro as modern, accessible themes shows that Drupal still has plenty to offer a themer interested in Drupal, and with the new Starterkit project coming to stabilization in Drupal 10, there will be even more tools.

Drupal 10 Development Cookbook got released last week, thanks to Matt Glaman, Kevin Quillen, and Justin Cornell. Drupal Association announced Rosa Ordinana and Lynne Capozzi joining as its new board members. As part of diversity and inclusion, the association is aligning with Black History Month. On Monday, 21 February 2021, at 10:00 am EST (15:00 hrs UTC), Joi Garrett, will introduce the new 'Black in Drupal' program.

Scroll further down for the rest of the stories from the past week.

Sincerely,
Sebin A. Jacob
Editor-in-Chief,
TheDropTimes