drupal

Do you ever feel like you’re living ahead of your time when you watch those world-conquering AI movies? The only reason such movies are gaining popularity with every passing day is because a similar reality is not too far away. The world today is living wire-free and digitally. Online is the popular and future-demanding way of living. And for your business to prosper in this online world, mastering SEO is a necessity! Now, to achieve optimal visibility, you need to understand the three most important concepts: crawlability, indexability, and mobile-first indexing. Why all of them? These three concepts are codependent, and they make the most crucial pillars to determining how search engines discover, understand, and rank your website. Your goal here is to make your website stand out in this ever-competitive online space; your tool: SEO. In this blog, we focus on the what and why of all three concepts and the best practices to help your website rank higher on Google search results. Introduction to Crawlability, Indexability, and Mobile-First Indexing Each of these three concepts is connected to the other and therefore, can get confusing for the masses to understand the difference without proper analysis. Crawlability refers to the process search engines like Google use to discover web pages easily. In simple words, Google discovers web pages by crawling, using computer programs called web crawlers or bots. Indexing is the process that follows crawling. Indexability refers to the process where search engines can add pages to their index. Google indexes by analyzing pages and their content to add them to the database of zillions of pages. Mobile-first indexing refers to Google’s crawling process as it prioritizes the mobile version of website content over its website version to inform higher rankings. Why These Concepts Matter in Today’s SEO Landscape With the continuous evolution of Google and other search engines, your SEO strategies need to be top-notch. With Google prioritizing mobile traffic, and hence, its mobile-first initiative, optimizing your website for both crawlability and indexability is the need of the hour. Without proper measures implemented in these areas, your website may be heading towards stunted organic growth. And you don’t wish for that to happen, do you? So, go on reading till the end. What is Crawlability in SEO? Performed by crawler bots, crawlability is the ability of search engines to find and index web content. Google crawl bots are essential computer programs that analyze websites and collect their respective information. This information helps Google index websites and show relevant search results. Google crawl bots follow a list of web page URLs based on previous crawls and sitemaps. As crawl bots visit a page, they detect links on each page and add those links to the list of pages to crawl. These new sites then become a part of SERP results and change to existing sites. Furthermore, dead links are spotted and taken in to update the Google index. However,  it’s important to know how to get Google to crawl your site. If your website is not crawlable, chances are, some of your web pages won’t be indexed, leading to a negative impact on your website’s visibility and organic traffic, thus, affecting your site’s SEO numbers. Key Factors Affecting Crawlability While crawlability is crucial for optimizing your site’s visibility, there are several factors impacting it. Learn about some of the most crucial ones are below: Site structure – Your site structure plays a pivotal role in its crawlability. If any of your pages aren’t linked to any source, it won’t be easily accessible to crawl bots for crawling. Internal links – Web crawlers follow links while crawling your site. These crawl bots only find pages linked to other content. To get Google to crawl your site, make sure to have internal linking structures across your website, allowing crawl bots to easily spot these pages in your site structure. Robots.txt and Meta Tags – These two parameters are crucial to maximizing your crawl budget. Make sure to avoid commands that prevent crawlers from crawling your pages. Check your meta tags and robots.txt file to avoid common errors:       ◦ <meta name="robots" content="noindex"/>: This robots meta tag directive can block your page from indexing.       ◦ <meta name="robots" content="nofollow">: Although nofollow links allow your pages to be crawled, it exudes all permissions for crawlers to follow links on your page.       ◦ User-agent: * Disallow: /: This particular code bars all your pages from getting indexed. Crawl Budget – Google offers limited recommendations for crawl budget optimizations since Google crawl bots finish the job without reaching their limit. But B2B and e-commerce sites with several hundreds of landing pages can be at the risk of running out of their crawl budget, missing the chance of your web pages making their way to Google’s index for crawlability. Tools to Check and Improve Crawlability There are various tools in the digital realm that claim to improve crawlability. Let me highlight a few most popular tools you can use to improve crawlability: Google Search Console What better tool to analyze Google crawlability than its in-house tool? Although it’s not a surprise to know how often does Google crawl a site, i.e., once every 3 days to 4 weeks, there are no fixed times.  How to fix crawl errors in Google Search Console? You can analyze your page traffic, keyword data, page traffic broken down by device, and page rankings in SERP results. Google Search Console also provides you with insights on how to rank higher on Google search results following Google algorithms. Submit sitemaps and provide comprehensive crawl, index, and related information directly from the Google index. Screaming Frog SEO Spider This is the tool you want to use to take charge of two essential jobs at once: crawl your website and assist with SEO audits. This web crawler helps increase the chances of your web content appearing in search engine results. Analyze page titles, and meta descriptions, and discover duplicate pages – all the actions that impact your site’s SEO. The free version can crawl up to 500 pages on a website and can find if any pages are redirected or if your site has the dreaded 404 errors. If you need more detailed features, the paid version brings many to the table, including JavaScript rendering, Google Analytics integration, custom source code search, and more. XML Sitemaps A roadmap for search engine crawlers, XML sitemaps ensure crawlers reach the important pages that need to be crawled and indexed. For better crawlability, ensure that the following requirements are met while creating sitemaps: Choose Canonical URLs: Identify and include only your preferred URLs (canonical URLs) in the sitemap to avoid duplicates from the same content accessible via multiple URLs. CMS-generated Sitemaps: Most modern CMS platforms can automatically generate sitemaps. For platforms like Drupal, you get to apply the benefits of the Drupal XML sitemap module that allows you to create XML sitemaps adhering to sitemaps.org guidelines. Check your CMS documentation for specific instructions on sitemap creation. Manual Sitemaps for Small Sites: For websites with fewer than a few dozen URLs, create a sitemap manually using a text editor and follow standard sitemap syntax. Automatic Sitemap Generation for Large Sites: For larger websites, use tools or your website’s database to automatically generate sitemaps. Make sure to split your sitemap into smaller files if necessary.Submit Sitemap to Google: Submit the sitemap using Google Search Console or the Search Console API. You can also include the sitemap URL in your robots.txt file for easy discovery. Bear in mind that submitting a sitemap doesn’t ensure Google will crawl every URL. It serves as a hint to Google but does not guarantee URL crawling or indexing. What is Google Indexing in SEO? The process of adding pages of a website to a search engine’s database to display them in search results when relevant is called indexing. Search engines like Google, crawl websites and follow links on the sites to add new pages. They analyze their content to determine its quality and relevance. When search engines find quality and relevant content, they add those pages to their index. One of the main processes of the Google search engine is indexing. Google Indexing allows it to discover and analyze web content and display them as search results to users, resulting in higher SEO ranks. Factors That Influence Indexability Given the importance of indexability for search engines to work properly, it is only understood that several factors can hinder or contribute to its influence. Below is a list of the common factors that influence the indexability of website pages: Content Quality and Relevance - Search engine bots or bot crawlers are fonder of high-quality content. Well-written, original, informative, and content with clear headings and organized structure that is relevant to users make it to the list of indexed pages in search engines. Canonical Tags and Duplicate Content - Search engines cannot index duplicate content. Duplicate content raises confusion during Google page indexing. Therefore, canonical tags are the counter activity here to solve duplicate content issues. These tags help search engines distinguish between original and duplicate content while indexing the relevant content pages. Technical Issues – Technical issues like broken links, page load times, noindex tags or directives, redirect loops, etc., can contribute to a negative impact on SEO, preventing crawling or indexing your site content. Using Google Search Console for Indexing Your Site Various tools allow you to check whether or not your web pages are crawlable or indexed. However, Google being a giant search engine, it’s highly recommended to use Google indexing service to meet your SEO goals relatively easily. Let me walk you through a brief guide as to how you can use Google Search Console request indexing for your website. Verify Website Ownership: Confirm ownership by adding an HTML file or meta tag. Submit Your Sitemap: Submit your sitemap URL in the Sitemaps section to help Google discover your significant pages faster. Use the URL Inspection Tool: Submit specific pages for re-crawling or direct indexing requests. Monitor Coverage Issues: Use the "Coverage" report to identify and fix indexing issues like blocked pages. Improve Internal Linking: Ensure proper internal links for better crawling. Enhance Content Quality: Avoid low-quality or duplicate content to improve indexing chances. Fixing Common Google Indexing Issues Here are some common Google indexing issues (similar and in addition to those of crawlability issues) you may come across on your website that affect its visibility and performance in SERP results: Low-Quality Content Google always targets original and relevant content to rank highest in user search results. If your web content is low quality, scraped, or includes keyword stuffing, chances are, that Google won’t index your web pages. Make sure to cater to the needs of your users and provide relevant information to them that is unique and aligned with the Webmaster Guidelines. Not Mobile-Friendly Google prioritizes mobile-friendliness while crawling web pages. If your website content isn’t mobile-friendly, Google is likely to not index it. Make sure to implement an adaptable design, improve load times, compress images, get rid of pop-ups, and keep finder reach in mind while curating your website. Missing Sitemap Without proper sitemaps, you cannot get Google to crawl your site. Make sure to use XML sitemaps instead of HTML. It helps enhance your website performance in search engines. Once you’ve created the sitemap, submit it with the help of Google Search Console or robots.txt file. Poor Site Structure Websites with poor navigability are often missed by crawl bots. Poor site structure negatively impacts your site crawlability and indexability. Make sure to use a clear website structure and good internal linking for SEO purposes. Redirect Loops Redirect loops block Google crawl bots from indexing your pages correctly, as these bots indulge in these loops and cannot crawl your website. Check your .htaccess or HTML sources of your website for unintentional or incorrect redirect loops. 301 redirects for permanent pages and 302 redirects for temporary pages should be used to prevent this issue from occurring. What is the difference between crawlability and indexability Since these two concepts are connected, oftentimes people mistake one for the other.Crawling is the process of search engines accessing and reading web pages. On the contrary, indexing is the process of adding pages to Google index. Indexing comes after crawling. However, in selective cases, indexing website on Google or other search engine bots can take place without reading the content. What is Mobile-First Indexing As the name suggests, mobile-first indexing means Google crawl bots prioritize indexing the mobile version of website content over desktop. This Google mobile-first indexing is meant to inform rankings. If your website content is not optimized for mobile devices, it could hamper your SEO ranks, even for desktop users. Having mobile-friendly content gives your website the edge for getting recognized for relevance and accessibility, thus improving visibility in search results. Mobile-first indexing is highly prioritized today to meet the expectations of the growing number of mobile users. For a seamless mobile browsing experience, it is crucial to have relevant, navigable content to reduce bounce rates and improve the overall SEO performance of your website. The Impact of Mobile-First Indexing on SEO Mobile-first indexing is a necessity today. It highly impacts the implications of crawlability and indexability, necessary for SEO purposes. Optimize your website for mobile devices using an adaptable design. You can develop your website specially for mobile devices using a responsive web design with a mobile-friendly theme or a completely separate mobile website. Alternatively, you can develop app-based solutions or AMP pages to enhance your website performance on mobile devices. Small businesses, e-commerce and B2B websites, and enterprise-level organizations stand highly affected by this shift to mobile-first indexing. It’s high time for these organizations to develop mobile-friendly websites to meet their customers’ expectations. Additionally, SEO professionals have witnessed a surge in demand for mobile-responsive website design and development services. Therefore, aligning your SEO strategies to Google’s algorithm to stand alongside your competitors in this mobile-first landscape is key. Are mobile-first indexing and mobile usability the same? Definitely not. A website may or may not be usable on mobile devices, despite containing content that calls for mobile-first indexing. Best Practices for Optimizing Crawlability and Indexability in a Mobile-First World In a mobile-first world, it is important to optimize your web pages in the direction of gaining greater visibility and better performance in search engine results. Below are a few best practices supported by Google and other search engines that can help improve the crawlability and indexability of your website for Google mobile-first indexing as a priority in the present scenario. Mobile-friendliness: Effective responsive designs serving the same HTML code on the same URL, irrespective of the device used, is key to optimizing mobile-friendliness. Your site should adapt to the screen size automatically. According to Google, adaptable web designs work best for ease and maintenance. Navigation: Mobile users often use one hand to operate their devices and therefore, make sure to design your website with liquid navigation. Implement larger buttons, and menus, add ample spaces, and additional interactive elements for easy finger-friendly navigation. A pro tip: maintain a minimum tap target size of 48 x 48 px. Content Consistency: Use the same meta robot tags for the desktop and mobile versions of your website. Ensure that your robot.txt file has not barred access to the main content, specifically on mobile devices. Google crawl bots can crawl and index content only when mobile-first indexing is enabled on your website. Page Speed Optimization: Avoid lazy loading of web content. Slow loading times hamper user experience for mobile users. Make sure to optimize your web images without compromising quality. Minimize HTTP requests and leverage browser caching. Ensure faster loading times for your web content across the globe with the help of CDN distribution. Tools and Techniques for Ongoing Optimization With mobile-first indexing in mind, it only makes sense to stay updated with the ongoing trends to check your site for mobile-friendliness. Here are a couple of ways to do the necessary: Use Mobile-Friendly Test Tools with Google Search Console Open your account in Google Search Console and click on “Mobile-Friendly Test” in the Enhancements sections. Input the URL to be analyzed for mobile-friendliness and proceed with the “Test URL” button. Review the report generated that presents you with the result of whether or not the page is mobile-friendly and also offers suggestions to address any issues found. If not mobile-friendly, the list of issues may include small text, appearance issues, content too wide for the size of the screen, or other similar and/or related usability problems. Once you’ve addressed these issues, re-test the page using the Mobile-Friendly Test tool. Run regular audits like this on Google Search Console to ensure the mobile-friendliness of pages across your site. Optimize Core Web Vitals Pay attention to page speed, interactivity, and visual stability to align with Google’s Core Web Vitals. One of the ways to go about it is by utilizing the PageSpeed Insights tool by Google. It allows you to examine web pages and provides data based on both mobile and desktop content versions, along with improvement suggestions. You can simply input the URL in the tool and click on “Analyze.” Proceed from here accordingly to generate a report that checks your website’s mobile-friendliness with a Core Web Vitals Assessment. Higher metrics mean greater mobile responsiveness! Common Pitfalls to Avoid in Mobile-First Indexing Ignoring the Mobile Version of Your Site: Make sure all content, inclusive of text and media, is accessible not only on the desktop version of your site but also on mobile devices. Maintain content parity and SEO rankings. Overlooking Technical SEO on Mobile: Mobile content also needs indexing for SEO purposes. Ensure that both your mobile and desktop sites use the same structured data for consistency. Doing so helps search engines properly analyze your web content. Slow Mobile Page Speed: Compress images, leverage browser caching, and minimize code to enhance the page loading speed for your mobile site. This way, you deliver a seamless user experience for mobile users. Final thoughts Crawlability and indexability are two significant entities that shape the SEO performance of your website. With Google prioritizing mobile-first indexing today, it’s time to roll up your sleeves and strategize a brand-new mobile-focused SEO strategy that aligns with Google’s algorithm and highlights your brand identity. With AI and machine learning increasingly shaping SEO today, optimizing for mobile devices isn’t just about adapting to algorithms—it’s about meeting user expectations and staying competitive. A mobile-friendly site with fast loading times, responsive design, and consistent content will improve search rankings and user experience. As mobile usage grows, embracing mobile-first strategies ensures businesses stay ahead, enhancing both visibility and customer satisfaction in the evolving digital landscape.

In a previous article I wrote about the importance of the HTTP headers and web security avoiding the technical stuff. In this article I want to get into all the dirty technical details. 

Some time ago we came across the HTTP Header Analyzer by Dries Buytaert. This tool, as the name suggests, analyses the headers of the HTTP response from a website. There are other header analysers out there, but this one, published by the creator of Drupal, also takes into account Drupal-specific headers. The tool displays a report of all headers found, along with an explanation of the purpose of the header and notes on the values of the header, sometimes including recommendations for better values. It also displays information about missing headers that should be present. 

With all this information, the tool gives a score based on the missing headers, warnings and notices detected during the analysis. On the first runs on our website, I have to admit that the score was not bad, but not good: 6/10. Now I am happy to say that we get a score of 10/10 on the home page. Unfortunately, not all pages can get the highest score, as I explain below.

…

Get ready to witness a transformative era for Drupal! In his 40th State of Drupal address, founder Dries Buytaert announced groundbreaking plans that are set to redefine the platform. With the targeted launch of Drupal CMS 1.0 on January 15, 2025, coinciding with Drupal's 25th anniversary, the platform is gearing up to become the gold standard for no-code website building. From the ambitious Starshot Project aiming to revolutionize site-building for non-developers, to the introduction of the Experience Builder (XB) that brings React into the fold, Drupal is embracing innovation like never before. Plus, with a strong commitment to responsible AI integration and a complete overhaul of its documentation, Drupal is positioning itself at the forefront of web development. Dive into how these exciting developments will shape the future of Drupal and what they mean for the global community!

Practical Use Cases of Tagged Services in Drupal admin Tue, 09/24/2024 - 17:13

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.

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.

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

• AI Agents

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:
  • AI SEO Analyzer
• 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

The 2024 Women in Drupal Awards, sponsored by JAKALA, have recognized Esmeralda Braad-Tijhoff, Pamela Barone, and Alla Petrovska for their exceptional contributions in the Define, Build, and Scale categories, respectively, at DrupalCon Barcelona.

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

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:

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:

• Thanks to fazilitehreem and Utkarsh “utkarsh_33”, the “duplicate” action on component instances now works as expected, rather than resulting in an error
• Jesse and Gaurav “gauravvvv” made the canvas size dynamic based on browser viewport size, improving what we landed 4 weeks earlier
• Abhisek “abhisekmazumdar” Mazumdar, Dave and I updated the XB field type to no longer store SDC plugin IDs, but Component config entity IDs (a small but necessary first step towards supporting multiple component types — starting with Blocks)

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:

• James “q0rban” Sansbury, abhisekmazumdar and Alex “effulgentsia” Bronstein made MR reviews much easier and faster by adding Tugboat integration!
• Dave ensured that OpenAPI validation errors now result in a JSON response, which unblocks #3470321: Surface API error response in the UI — for better bug reports and faster DX — the issue title says it all!
• Together with Feliksas “f.mazeikis” Mazeikis and Dave, I documented the current component discovery + SDC criteria + `Component config entity, and described the status quo in an ADR. Because the status quo is now documented in depth, we’ll be able to make it crystal clear in #3454519: [META] Support component types other than SDC and child issues how we aim to evolve XB to supporting multiple component types, reducing the time to get to consensus on how to achieve that.

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. ↩︎

• Drupal
• Acquia
• Experience Builder

• Component previews prior to placing them on the canvas now provides accurate previews.
• Zero flickering when updating previews thanks to double buffering/iframe swapping.