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.

Authored by: Nadiia Nykolaichuk 

“Join us this spring in the City of Roses, Portland!”

— the DrupalCon team

The best opportunity to grow your Drupal skills, plant the seeds of connection, and help the Drupal community flourish is just around the corner! This spring, the world’s biggest Drupal meetup is coming back to the City of Roses, which is one of the most famous nicknames for Portland, Oregon.

Join us THURSDAY, March 21 at 1pm ET / 10am PT, for our regularly scheduled call to chat about all things Drupal and nonprofits. (Convert to your local time zone.)

This month we'll be giving a recap of last week's NTC, and an update on our plans for DrupalCon Portland, including the Nonprofit Summit and the recently announced discount for nonprofit attendees!

And we'll of course also have time to discuss anything else that's on our minds at the intersection of Drupal and nonprofits.  Got something specific you want to talk about? Feel free to share ahead of time in our collaborative Google doc: https://nten.org/drupal/notes!

All nonprofit Drupal devs and users, regardless of experience level, are always welcome on this call.

This free call is sponsored by NTEN.org and open to everyone. 

• Join the call: https://us02web.zoom.us/j/81817469653

  • Meeting ID: 818 1746 9653
    Passcode: 551681

  • One tap mobile:
    +16699006833,,81817469653# US (San Jose)
    +13462487799,,81817469653# US (Houston)

  • Dial by your location:
    +1 669 900 6833 US (San Jose)
    +1 346 248 7799 US (Houston)
    +1 253 215 8782 US (Tacoma)
    +1 929 205 6099 US (New York)
    +1 301 715 8592 US (Washington DC)
    +1 312 626 6799 US (Chicago)

  • Find your local number: https://us02web.zoom.us/u/kpV1o65N

• Follow along on Google Docs: https://nten.org/drupal/notes

View notes of previous months' calls.

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.