Avi Schwab, is a prolific contributor to Drupal, and one of the lead organizers of MidCamp, an annual gathering of the MidWest Drupal community in Chicago.

The Drupal Association has published this guest blog on behalf of author John Picozzi, in collaboration with Chat Hester, Stephen Cross, Nic Laflin, Mike Anello, and AmyJune Hineline.

“Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it's the only thing that ever has.”  - Margaret Mead

In my mind, the above quote distills the Drupal Community down to one sentence and perfectly describes its mission. Many in the community also use “Come for the code, stay for the community” to highlight that Drupal is more than just open-source software; it’s a community of committed citizens focused on helping each other, growing skills, and developing world-changing open-source software. As many are aware, Drupal 7 will reach end-of-life (EOL) at the end of this year. Many are working to move their sites to Drupal 10, while others are looking to “Level Up” their skills to work with the latest and greatest Drupal version. This story highlights the journey of one developer and how we as a community came together to help him (and hopefully many others) achieve Drupal 10 readiness. 

Our story starts with Drupal Slack and the following message from Chad Hester (chadhester). 

“Hey, I have an idea that I wanted to run by you… Since I'm looking for more contracting work, getting back in to Drupal development is on my radar. I haven't done development work since Drupal 7, though. I'm out of practice since ~2015. There are lots of people who learn Drupal for the first time, but I wonder if anyone has documented their experience re-learning Drupal. Perhaps that's something that could be good as a Talking Drupal mini-series. What do you think?”

I thought it was an interesting idea and told Chad I would take it back to the team at Talking Drupal to discuss. The Talking Drupal team, Stephen Cross (stephencross), John Picozzi (johnpicozzi) & Nic Laflin (nicxvan), discussed and loved the idea. Working with Chad, they refined the show format and structure to something like a scrum meeting, where each week they reviewed what was done, what challenges were faced, and what tasks should be completed in the week to come. While brainstorming about the mini-series format they also thought of community members who could be involved. 

At Talking Drupal, we strive to provide the Drupal community a platform for learning and awareness. We also include the community in creating that content as much as possible. To that end, we identified Mike Anello (ultimike) of DrupalEasy as a great choice for a mentor and AmyJune Hineline (volkswagenchick) of the Linux Foundation as a host for the series. After identifying all the folks we planned to include, Stephen started outreach, and quickly, everyone was onboard. Within three weeks of the above Slack message, we started recording our first episode. From that point, we started recording weekly and planned eight episodes. 

Everyone contributed to the goals of this mini-series and added their perspective. We wanted to ensure the series would help the community move from Drupal 7 development to Drupal 10 development. However, we also wanted to go above and beyond with real open-source contributions. Mike provided that via a capstone goal of having Chad contribute an automated test to a real-life contrib project. This goal was a perfect outcome and would not only empower Chad to contribute but could empower anyone who watched the series. Overall, we have set out to bring in community members to build content for others. Allowing community members to push/pull others forward in their skill set. 

Today, we are happy to share the first episodes of the Talking Drupal Mini Series: Skills Upgrade. A developer's journey from Drupal 7 to Drupal 10. Through this effort the community has come together to support its members to grow and learn. The power of the Drupal Community isn’t in the software we develop, it's in the people we empower. Those people are empowered to learn, grow, and use amazing open-source software. Indeed, I believe this group of thoughtful, committed citizens have done their little bit to change the world. 

Episodes will be released over the next few weeks. Thank you, and Enjoy!

Drupal is a CMS that colleges from different countries eagerly use. According to a report by The Drop Times, up to 80% of the world's top 100 universities chose Drupal for at least one of their websites. We wanted to find out how this technology is used in Poland and what other content management systems are popular among Polish higher education institutions - both public and private. This report presents the results of our analysis. 

Google Analytics 4 has taken the world of web analytics by storm. It is an incredible tool that helps you understand how users interact with your business website. You can use these insights to deliver personalized experiences to your customers, enhance loyalty, and boost your revenue. If you have availed of Drupal services and run a Drupal-powered website, this blog will help you delve into how you can successfully combine Drupal and GA4 to accomplish phenomenal results. 

How to Combine GA4 With Your Drupal Website

Given the fantastic user insights provided by GA4, its combination with Drupal can take your business website on an upward spiral of growth. As Drupal is a cutting-edge content management system, its combination with GA4 can result in the creation of an incredible marketing strategy and improvement in your site’s performance. 

Since its debut in 2010, Drupal 7 has provided a stable foundation for innumerable websites. But moving to a newer version—like Drupal 10—becomes crucial to guarantee security, performance, and access to the newest features as Drupal 7 approaches its end of life on January 5, 2025. 

Even though this Drupal upgrade has the potential to be revolutionary, it's important to know what features you might face while upgrading from Drupal 7 to 10. This will enable you to plan appropriately and gain a clear understanding of what to anticipate. 

CSS has been on a roll for a few years and we keep getting great things to use. In the process of removing jQuery from Drupal core, we’re running into the problem of replacing jQuery .parents() method by something else. In certain conditions it is very easy to use CSS selectors to replace this method. Given the following HTML:

To select all the parents of the article tag with jQuery you could do:

The typical way of doing this is with a while loop looking at the parentElement and building the array manually. Now with :has() it becomes much easier:

The only limitation is that a unique identifier needs to exist to build the CSS selector, that’s easy enough to generate if necessary.

Use the platform. When it’s good, it’s really good.

A DrupalCamp is a one- or two-day event that centers on the Drupal open source web content management system, and tends to bring together people from a geographical region. The goals are primarily, of course, knowledge sharing and increasing awareness of and helping to grow the Drupal community. It's not easy to do this without also increasing awareness and knowledge of the tools we all use along with Drupal as well, which makes the gatherings all the more valuable.

Mike Goulding

Senior Drupal Engineer

Mike has been part of the Four Kitchens crew since 2018, where he works as a senior engineer and tech lead for a variety of Drupal and WordPress projects.

January 1, 1970

There are many different options available for the organization or team that decides it is time to decouple their Drupal site. There are frameworks that are designed for static site generation (SSG) and there are others that use server-side rendering (SSR), with many that claim to do both well.

React and NextJS have been popular options for a while now, and they are well-loved here at Four Kitchens as well. Another framework that is a little different from the above is Astro, and it may be worth considering.

What is Astro?

Astro is an interesting framework to work with, and it only becomes more so with time. Astro’s website makes claims of performance advantages over many other frameworks in the space. The full report can be found here.

More interesting than performance claims are some of the unique features this framework brings with it. Astro has many official integrations for other popular JS frameworks. This means, for example, that part of a page could use React, while another part could use Svelte. An even more ambitious page could use Vue, React, and AlpineJS for different components. While these examples are not a typical or recommended use case, they do illustrate that flexibility is one of the real strengths of Astro.

This flexibility doesn’t come with a steep learning curve, as Astro makes use of enough familiar pieces so that newcomers aren’t immediately overwhelmed. It is possible to write Astro components in a straightforward manner, similar to HTML, and still incorporate JavaScript XML (JSX) expressions to include data in the component’s output. There are a couple of tutorials for getting started with Astro, and they do a good job of giving the general structure of a project along with some scenarios that are unique to the framework.

(Also, Houston is an adorable mascot and I am here for it!)

Using Astro with Drupal

Despite all of the integrations that can be found in the Astro toolset, there is notably one key thing that is missing: There isn’t an existing integration for Drupal! The list of content management systems (CMSs) that Astro recommends are specifically headless CMSs, which make for a more natural starting point for this setup than converting a Drupal site.

Never fear, though! Drupal may not specifically be on that list, but that doesn’t mean it isn’t something that should be considered. Astro has that incredible flexibility, after all, and that means there are more options than it seems on the surface. All that is needed is an endpoint (or several) to fetch data from Drupal, and things are looking up once again.

Using the Drupal GraphQL and GraphQL Compose modules, it is possible to quickly get data ready to expose from Drupal and into the hands of a decoupled framework like Astro. With that, it becomes possible to fetch that data within Astro and build our frontend while taking advantage of many of the features that Astro offers. This can also be done with REST API or JSON:API, but for our purposes, the consistency and structure of GraphQL can’t be beat when crafting a decoupled integration with Drupal.

Using the fetch function that is available to Astro, (and JavaScript in general), we can get data from just about anywhere into our Astro components. This blends well with the head start from the compose module, as you can take an existing Drupal site and be ready to connect to a frontend framework very quickly. This means quicker prototyping and quicker assembling of components.

Astro also supports dynamic routing out of the box, which is an essential feature when connecting to a Drupal site where routes aren’t always structured like directories. Using this wildcard type of functionality, we can more easily take an existing site — regardless of the structure of the content — and get output into Astro. With the data from the routes in hand, we can get to the fun part: building the components and taking advantage of more of the Astro’s flexibility.

Flexibility is key

For me, Astro’s strength doesn’t solely come from the speed that it builds and renders content or the ease of building pages in a familiar JSX or Markdown pattern. Its real strength comes from the flexibility and variety of build options. While it does a great job handling some functionality on a given component or creating simple pages for a blog listing, it does even more with the ability to bring in other frameworks inside of components. Want to add a search page, but there isn’t an existing integration for Astro? If there is one for React, that works here, too! Do you have an internal team member really excited about building personalized content with Vue? Bring that in, and that component will work as well.

While the reality of the implementations may be a bit more involved than described on the tin, it is surprisingly easy and encouraged to bring in live updating components inside of Astro. This changes what would otherwise be a run-of-the-mill frontend tool into something much more interesting. Astro does shine in its own right, especially with statically generated pages and content. It just wouldn’t be doing anything especially new without bringing in other frameworks.

This is also where bringing a CMS like Drupal into a decoupled setup with Astro is intriguing. There is an opportunity for highly dynamic pages that wouldn’t work with a traditional static framework while still getting the speed and benefits of that approach. Drupal sites are typically very quick to update when content changes, which can be a sticking point for working with a decoupled architecture. How often should the frontend be rebuilt and how much can caching make up the difference? With having some parts of the site use components that can update more easily on the page, there benefits of both approaches can come through.

The post AstroJS and Drupal appeared first on Four Kitchens.