The Drop Times: Lupus Decoupled Drupal: Bridging Drupal’s Backend Strength with Frontend Freedom

In an article for The DropTimes, Sinduri Guntupalli explores how Lupus Decoupled Drupal merges the power of Drupal's backend with modern frontend frameworks like Vue.js and Nuxt. The platform offers a flexible, API-driven architecture with custom elements, caching optimizations, and diverse deployment options, providing an efficient solution for both developers and content editors working on complex web projects.

Specbee: A practical guide to Personalization with user personas (sample campaigns included!)

You know that moment when Google finishes your search with exactly what you were thinking? Or when you want to just Netflix and chill after a long day but you’re recommended the perfect show that completely blows your mind? That’s personalization in action! But how does this magic happen? It begins with truly understanding your audience—building user personas. From there, you segment them based on key behaviors and preferences, and finally, you deliver exactly what they’re looking for, right when they need it.  In this article, we’ll discuss how you can offer personalized content to your audience using some simple-to-implement techniques. How to create User Personas You might probably know your audience, but do you really understand who they are and what they prefer? That’s where user personas come in.  It's possible to perform a UX research project to identify specific "Personas," and identify the needs, desires, and habits of each.  Take a look at this decent write-up on Personas. From this article, here's an example of what a final "Persona" might look like: In this example, each Persona is given a name, background, brand preferences, etc. You may have already done this at some point. It can be a helpful practice, but it takes time and a lot of corporate buy-in.  So if you think that’s not a practical choice at the moment, we’d suggest you identify your core target audiences and use technology to give your web visitors a personalized experience. For the sake of this overview, let's instead use the term "Segment" instead of "Persona". Creating a personalized website experience There are 3 basic steps to successfully manage personalization. It is primarily asking these questions: Defining segments - What type of people are you targeting? Connecting users to segments - Is this visitor one of those types of people? Providing personalized content for each segment - What do we want to show these targets? 1. Defining Segments At a high level, a "Segment" is simply a user type. And those can be identified in any way that you prefer. For instance, let’s imagine your company sells shoes. You might identify Segments like: Casual Shoewear Enthusiast Sports and Fitness Buff Fashion-Conscious Shopper Parents Shopping for Kids Professional or Workwear Buyer Seasonal Shopper Discount Shopper Luxury Buyer Orthopedic Footwear Seeker Chances are, you already have Segments in place. They could be from existing email list groups or sales teams managing clients by size, product, or region. These Segments can start simple ("newsletter subscribers") and grow as your efforts grow. Task 1: Identify and define Segments that you would like to target. 2. Connect users to Segments  Once target Segments are identified, you need to determine how to identify which website visitors belong to which Segments. This is where the tech comes in. You can identify users based on their actions. These actions can include these and more: Logging in,  Filling out a form, Participating in a survey, Accessing a specific landing page, Following an email newsletter link, Clicking a Google/LinkedIn/Facebook ad. Any defined action that you track will allow you to identify the visitor's Segment and set a Cookie to maintain that identification.  Ads and marketing links will have parameters in their URLs. We can discuss more specifics here, but here's a nice general overview.  Once a visitor's Segment is identified you can present personalized content. Task 2: Determine the specific actions that categorize web visitors into User Segments 3. Provide personalized content for each Segment Now that we know the User Segments (Task 1), and we know how to identify the website visitor as a member of a specific Segment (Task 2), we provide the personalized content. Here's an example of 3 visitors (and 4 visits): User A receives an email newsletter with a link related to your marketing sales campaign. They click the link and when they go to the homepage they see a marketing page banner related to the campaign - "Returning Customers New Arrivals 50% Off." User B visits from a Google ad for a New Year's campaign. They click the ad, and the marketing page banner reads "2025 New Year Flash Sale" User C visits your website by directly typing in the URL like a caveman would. They see the homepage with a generic marketing page banner. They fill out a form to get more information. User C returns two weeks later and the homepage displays with a marketing page banner that reads, "Welcome Back User C!"  Task 3: Determine content that should be seen for each Segment Sample campaigns for a shoe retailer Going with the same example of a company that retails shoes, let’s dive into some personalized campaigns you can create for your target audience. Completing the three tasks above might give us the following Campaign outlines for site personalization: 1. Sneaker Sale Campaign Segment:Sneaker Enthusiasts User Identification:Visitor is a member of the Segment if they took any of the following actions: Clicked a Google ad for sneakers. Clicked a link in an email campaign featuring sneakers. Visited the "Sneakers" category page on the website. Personalized Content: Homepage banner showcasing a "Sneaker Sale: Up to 50% Off" promotion. Personalized CTA offering "Exclusive Sneaker Offers" to encourage sign-ups for further deals.  2. Coastal Cities Campaign Segment:Coastal City Customers User Identification:Visitor is a member of the Segment if they took any of the following actions: Clicked a link in an email campaign targeting customers in coastal cities (e.g., Miami, Los Angeles, New York). Filled out a form with a coastal city location. Visited the site from an IP address associated with coastal regions. Personalized Content: Homepage banner promoting "Summer-Ready Footwear for Coastal Living", featuring sandals, lightweight sneakers, and water-resistant shoes. A "Coastal City Style Guide" featured at the top of the blog page, showing trending footwear options for beach and city life. CTA below the banner offering "Exclusive Deals on Summer Styles for Coastal Shoppers", with a localized discount code for users in coastal regions. Creating a Campaign statement might help keep things organized and aid in communication, internally and externally. Final thoughts While there are many ways to personalize your content, what we’ve covered today represents some of the simplest yet most effective methods. Personalization can change how you connect with your customers. The key is knowing your audience and delivering the right message at the right time. If this got you excited, know that you are not on your own here! Specbee can work with you on each of these steps, and we always recommend starting small. Talk to one of our experts today to find out how we can help.

Talking Drupal: Talking Drupal #468 - Drupal AI

Today we are talking about Artificial Intelligence (AI), How to integrate it with Drupal, and What the future might look like with guest Jamie Abrahams. We’ll also cover AI SEO Analyzer as our module of the week.

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

Topics
  • What is AI
  • What is Drupal AI
  • How is it different from other AI modules
  • How do people use AI in Drupal
  • How does Drupal AI make AI easier to integrate in Drupal
  • What is RAG
  • How has Drupal AI evolved from AI Interpolator
  • What does the future of AI look like
Resources Guests

Jamie Abrahams - freelygive.io yautja_cetanu

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Martin Anderson-Clutz - mandclu.com mandclu

MOTW Correspondent

Martin Anderson-Clutz - mandclu.com mandclu

  • Brief description:
    • Have you ever wanted an AI-based tool to give your Drupal site’s editors feedback on the SEO readiness of their content? There’s a module for that.
  • Module name/project name:
  • Brief history
    • How old: created in Aug 2024 by Juhani Väätäjä (j-vee)
    • Versions available: 1.0.0-beta1, which supports Drupal 10.3 and 11
  • Maintainership
    • Actively maintained
    • Number of open issues: none
  • Usage stats:
    • 2 sites
  • Module features and usage
    • Once you enable this module along with the AI module, you can select the default provider, and optionally modify the default prompt that will be used to generate the report
    • With that done, editors (or anyone with the new “view seo reports” permission) will see an “Analyze SEO” tab on nodes throughout the site.
    • Generated reports are stored in the database, for ongoing reference
    • The reports are also revision-specific, so you could run reports on both a published node and a draft revision
    • There’s a separate “create seo reports” permission needed to generate reports. Within the form an editor can modify the default prompt, for example to get suggestions on optimizing for a specific topic, or to add or remove areas from the generated report.
    • By default the report will include areas like topic authority and depth, detailed content analysis, and even technical considerations like mobile responsiveness and accessibility. It’s able to do the latter by generating the full HTML markup of the node, and passing that to the AI provider for analysis
    • It feels like it was just yesterday that the AI module had its first release, so I think it’s great to see that there are community-created additions like this one already evolving as part of Drupal’s AI ecosystem

Wim Leers: XB week 19: flickering cliffhanger

Last week ended with 12 remaining issues. Did we make it? :D

Major loose ends

Like last week, I’m starting with the major loose ends.

Thanks to the impressive work by Dang “sea2709” Tran and the reviews and guidance from Jesse “jessebaker” Baker as well as many others, Experience Builder (XB) now has a robust solution for previewing components when hovering them in the “insert” menu. It required both server-side changes (global theme asset libraries were missing previously) and client-side changes (shadow DOM didn’t offer sufficient isolation; we needed <iframe>).
The result is so nice that I almost spat out my coffee because of a deep, unavoidable “OOOOOHHHHHHHHHHHHHHHHHHHHHHHH!!!!!” when reviewing it! :D

Image removed. Component previews prior to placing them on the canvas now provides accurate previews. (You can tell that I could not resist the temptation of hovering over Shoe badge multiple time :D)
Issue #3469856, image by me.

Once a component is placed, the preview canvas’ <iframe> must be updated: an updated HTML response is fetched and rendered. But every update to the component tree must result in an update to the preview. That means any typing the Content Creator does in the component props form results in the entire preview 1 getting re-rendered, which easily results in flickering. Jesse devised a very clever solution, inspired by … computer games!
He introduced an IframeSwapper that keeps two <iframe>s active, but with only one visible. Once the preview has updated (i.e. the invisible <iframe> has finished loading), he swaps it with the visible <iframe> 2 — eliminating all flicker:

Image removed. Zero flickering when updating previews thanks to double buffering/<iframe> swapping.
Issue #3469677, image by Jesse.

Updating the props of a Single-Directory Component (SDC) can be done by clicking the placed component in the preview, and the “component props form” will appear on the right side. This generally works well, but there are still lots of rough edges. The roughest of edges has now been fixed by Atul, Dave “longwave” Long, Travis “traviscarden” Carden and Bálint “balintbrews” Kléri (with Ben “bnjmnm” Mullins shepherding that issue after its many twists and turns to clarity): the server side now correctly handles SDC props that are required, the client side now uses browsers’ native reportValidity functionality. The result is that premature preview updates no longer occur. 3

While placing components and inspecting the component tree you’re creating, it can be handy to quickly get an overview. Browsers have ⌘+/⌘- (Ctrl+/Ctrl-) keyboard shortcuts to zoom in/out. But for XB, you typically want to zoom in/out only the preview, not the entire UI. So thanks to Jesse and Atul “soaratul” Dubey, XB now allows zooming in/out just the preview by pressing + or -. 4

Another rough edge in that component props form was fixed: some field widgets are highly complex, and need to load CSS/JS to work correctly. An example is the most complex widget in Drupal core: the media library widget, which we the recently added support for. Our naïve initial approach failed whenever switching between different components that each used the media library widget: the same JS was loaded again, resulting in JS errors! Fortunately, Drupal already solved this problem: Ben added ajaxPageState support — solved!

With all of those UI improvements in, parts of XB are starting to feel solid!

Better defaults

To make it easier for future (and existing) contributors to start contributing to/playing with XB, we changed two important defaults:

  1. Ben made XB depend on the Media Library module, because it offers a superior UX for (re)using images
  2. Deepak “deepakkm” Mishra, Ted “tedbow” Bowman and I updated the default XB config to start with an empty XB canvas

Only one 0.1 priority left!

With only one 0.1 priority left (#3469672: The XB annotations and labels should not change size when zooming), it became possible to help land non-priority fixes, such as:

Accelerating what’s to come after 0.1

With 0.1 essentially done, it’s important to prepare for what’s next, and set us up for success and facilitate wider contribution:

Can’t wait to see what product lead Lauri “lauriii” Timmanee prioritizes for milestone 0.2! :D (Spoiler: supporting blocks and actually saving what you see in the XB UI will definitely be in there!)

Week 19 was September 16–22, 2024.

  1. This will improve later, once we do #3462360: Partial preview updates: update preview of modified component only, not entire component tree, although later the previously mentioned abstract syntax tree (AST) would make that unnecessary (in most cases). ↩︎

  2. In lower-level contexts this is called double buffering — and for example Microsoft .NET forms documentation has a great explanation. ↩︎

  3. This is not yet completely solved — next in line is #3474732: Premature prop validation can break the UI. The value entered by the user must first meet the required shape that the SDC’s metadata conveys it needs (using JSON schema in its *.component.yml file). ↩︎

  4. Interesting follow-up issues for this: #3475838: Consider a11y impact and/or competitor analysis for preventing browser zoom and #3475749: Pinch gesture zooming sometimes invokes OS zoom behavior. ↩︎

MidCamp - Midwest Drupal Camp: Join us to help plan MidCamp 2025

Join us to help plan MidCamp 2025

Please join us for our first MidCamp 2025 planning meeting!

Why come?

Because we value giving back to the Drupal community and this is one way you can do that.

What should I expect?

That's mostly up to you -- there are a lot of roles and skillsets needed to put on a conference like MidCamp. Regardless of what you do day-to-day, you can find a fit. Everything from 

What if I don't live in Chicago?

That's OK! The planning of things is done remotely. A good portion of the planning team doesn't live in or near Chicago. People join because they care about Drupal and want to help make MidCamp happen.

How to join?

We'll share the Zoom link via Meetup. We also welcome you to join the #midcamp-organizers channel on our Slack team: https://mid.camp/slack

The Drop Times: DrupalCon Europe Beckons You to Barcelona

Dear Readers,

The much anticipated DrupalCon Europe for 2024 is all set to begin in Barcelona tomorrow. Hosted at the stunning CCIB (Barcelona International Convention Center), this year’s event, running until 27 September, promises to be one of the most memorable gatherings yet. DrupalCon is not just about code but about building connections, exchanging ideas, and forging the future of open-source technology. With four days packed full of sessions, workshops, and networking opportunities, here are some highlights you simply can't afford to miss. 

1. The Driesnote  

Dries Buytaert, the founder of Drupal, will deliver his landmark 40th Driesnote, where he will provide the much-anticipated "State of Drupal" update. Most importantly, he will dive into the progress of the Drupal CMS (aka Starshot), which first launched at DrupalCon Portland in 2024. Attendees will get a sneak peek into Drupal CMS' upcoming product launch and a demo of what's to come. If you're curious about how to get involved in shaping the future of Drupal, this keynote is a must-attend.

2. Women in Drupal Award  

Celebrating outstanding contributions to the Drupal community, the Women in Drupal Award, in partnership with JAKALA, will recognize individuals who have made significant impacts through their projects, businesses, or community engagement. Whether they are stellar developers or successful entrepreneurs, this award shines a light on those advancing the Drupal ecosystem.

3. Local Association Stand  

For the first time, fifteen European local Drupal associations will come together to host a Local Association Stand. This stand will be a gathering point where regional leaders, event organizers, and the community can exchange ideas and discuss challenges and opportunities specific to their areas. It’s the perfect spot to foster new connections and strengthen collaborations within the broader European Drupal community.

The event will also feature the Drupal Association Board Election Results, providing insight into the leadership shaping the future of the project. And for those looking to network with Drupal business leaders, the Drupal Business Dinner 2024 promises an elegant evening at the 1881 per SAGARDI, offering Mediterranean cuisine with a view of Barcelona's iconic port.

With that let's move on to important stories from last week.

On September 23, 2024, LagoonCon Barcelona will host developers, product managers, and technology leaders for a free event focused on improving the management of Drupal websites through the open-source platform, Lagoon. The event at the Hotel Barcelona Princess offers a deep dive into Lagoon's capabilities and its role in simplifying application delivery for Drupal and other open-source frameworks.

Local Associations, Camps, and initiatives come together during DrupalCon Barcelona 2024 for a joint Round table. This year's Round Table for Local Drupal Associations is a collaboration between the Network of European Drupal Associations (NEDA) the Local Associations Initiatives Project and the Drupal Association. Written by Esmeralda Braad-Tijhoff.

Lenny Moskalyk has published the Drupal CMS report as of mid-September 2024, providing an insightful overview of the latest developments within the Drupal community. This month, several initiatives have been seen highlighting the collective efforts to enhance the platform.

Volunteers can sign up for various roles, including marketing, registration, and session monitoring, to ensure the success of DrupalCamp Pune 2024. Selected volunteers will be rewarded with a 30% discount on their event tickets and a certificate recognizing their contributions.

The DropTimes has curated a list of key Drupal events happening this week, from September 23 to 29, 2024. Read more here.

The Drupalisms Working Group has launched a quiz to improve and open up Drupal's terminology, inviting the community to participate before the October 31st, 2024 deadline. With 20 questions focusing on various aspects of the Drupal platform, including user interface and functionality, the quiz allows developers and users alike to contribute to the evolution of Drupal's language. 

The FOSSEPS and OSOR projects are conducting a survey to assess interest in forming a European Open Source User Group for public administrations. The initiative seeks input from IT professionals within EU public bodies on the current use and challenges of Free and Open Source Software (FOSS).

Mark Conroy has expanded a proof-of-concept module into a fully functional live preview module for LocalGov Drupal Microsites. This development aims to enhance the user experience by allowing real-time previews of design changes within the platform, making it easier for councils to manage and update their microsites. 

Jay Callicott has announced a significant update to DrupalX, transforming it into an AI-powered platform. By integrating AI functionalities, DrupalX aims to become the most advanced Drupal starter on the market. 

The Drupal Decoupled Project is set to receive several major updates, as announced by Jesus Manuel Olivas, Co-Founder and CEO of Octahedroid and Composabase.  As a final update, Backdrop CMS has announced the release of version 1.29.0, bringing a host of new features, UX improvements, and essential bug fixes.

We acknowledge that there are more stories to share. However, due to selection constraints, we must pause further exploration for now.

To get timely updates, follow us on LinkedIn, Twitter and Facebook. You can also, join us on Drupal Slack at #thedroptimes.

Thank you, 
Sincerely 
Alka Elizabeth 
Sub-editor, The DropTimes.

Event Organizers: Connect with Event Organizers at DrupalCon Barcelona '24

There are many opportunities to connect with fellow event organizers throughout the week at DrupalCon Barcelona 2024. The Event Organizer Working Group also has an open call for board nominations until October 15. Join us and help shape the future of Drupal Community Events.

All Week

Local Associations Booth
Expo Hall
Visit with the Network of European Drupal Associations (NEDA) and other event organizers in the Expo Hall. Be sure to bring some of your stickers and swag to share with the community!

Sessions & Discussions

Not joining DrupalCon? Join us online any time:

Open Meeting via Slack, second Tuesday of each month!
Tuesday, October 8 starting at 16:00 UTC / 12:00 pm ET.

The meeting will stay open for 24 hours to allow participation across all time zones.

  • Initiative Updates
  • Camp Reports
  • DrupalCon Report

Join us to discuss these and other topics in the #event-organizers channel.

If there is something you want to share or discuss related to your camp, meetup, or other events organizer topics either leave a message in the Slack channel or comment on the Event Organizer issue queue.

The Drop Times: Government Website Usability: Insights from DrupalCon Portland

At DrupalCon Portland 2024, Hounder's Joshua Northcott shared his expertise on personalizing government websites and improving user intent for better service delivery. Learn how Hounder is advancing usability in public sector sites and the role of CKEditor’s new plugin pack in enhancing Drupal content creation. Watch the interview and explore insights on creating next-gen government website experiences.
Subscribe to