Planet Drupal

A comprehensive analysis by The DropTimes (TDT) examines CMS usage across 8,134 non-profit and charity organizations in the United States. The findings highlight a dominant preference for Free and Open Source Software (FOSS) solutions, with WordPress being the most widely used CMS. Drupal also shows significant usage, especially among top-ranked websites.

At DrupalCon Portland, Dries announced Starshot during his State of Drupal presentation. Part of Starshot is the idea that we have Drupal CMS and Core. The big difference is that the Drupal CMS offering comes with standard contributed modules used by almost every existing Drupal build. Then, Dries showed a proposed wireframe for the Drupal.org download page. One of the first things I noticed was the "Launch" in the Drupal CMS section. I wasn't sure about the end goal: 

Low-code solutions are a quick and adaptable substitute for the conventional development cycle as digitization picks up speed. 

Low-code developments are quick, flexible, and affordable but perform better at certain tasks than others. Businesses usually use them mainly in these particular areas- Workflow Automation, Customer Relationship Management (CRM), Enterprise Resource Planning (ERP), Data Integration, Mobile and Web Applications, Business Process Management (BPM), Internal Tools and Dashboards, and E-commerce Platforms.

Before this, let’s delve into the concept of low-code development to gain insight into how it benefits businesses.

The free Webform module of Drupal offers out of the box the option to create complex calculators with the Computed Twig element. Here are some tips to help you easily, better, and faster create calculators with Drupal Webforms.

Did you know that the first CSS preprocessor was introduced over a decade ago, changing the way we write stylesheets? A CSS Preprocessor extends the limited capabilities of CSS and helps in improving efficiency, maintainability, organization, and reusability.  The tool in focus today is a very popular CSS preprocessor tool - Stylus. Stylus takes your CSS to the next level. With features like variables, nesting, and mixins, Stylus transforms the repetitive, cumbersome aspects of writing CSS into a streamlined, efficient process. It offers a dynamic approach to styling that will enhance your productivity and keep your code organized. Stylus can be integrated with your Drupal theme as well, and we'll discuss how to do that shortly. We’ll also talk about what makes Stylus more flexible than SCSS. What is Stylus CSS Preprocessor Stylus is a CSS preprocessor, which allows you to write CSS in a more dynamic way. It was initially released in 2010 as an open-source project. Stylus gained attention for its minimalist syntax as it is clean, without semicolons and brackets. The latest version is v0.63.0. Compared with SASS, it's newer as the first SASS release made its way to the market in 2006. Why Stylus over SCSS Stylus has a more minimalist syntax compared to SCSS. It allows you to omit brackets and colons and relies on indentation instead of braces and semicolons. Installing Stylus CSS Preprocessor To install Stylus on a local machine, ensure you have Node.js and npm installed, then run the following command: npm install stylus –gCompile Stylus files to CSS files: stylus stylus/index.styl -o css/Add the Stylus Watcher: stylus -w stylus/index.styl -o css/Installation in Drupal Theme It's simple and easy to use Stylus in any CSS-based Drupal theme. First, install Stylus on your local machine using the command provided above. After successful installation, create a folder named ‘stylus’ to hold all files with the .styl extension. There should also be a CSS folder to contain the compiled CSS files. Once both folders and files are ready, run the following command: stylus -w stylus/index.styl -o css/In the case of Stylus, we don’t need to configure any JS file like we do when using a GULP CSS preprocessor. How Stylus is more flexible than SCSS Indentation-based, Less Syntax, More Flexibility: Stylus is indentation-based. Whitespaces are significant, so we substitute the curly braces ({...}) with an indent, which allows us to omit semicolons, braces, and colons as shown in the following code snippet. Example: body color white Built-in Functions: Stylus comes with a rich set of built-in functions for tasks like color manipulation, mathematical operations, and more.    • unit(value, units) - Which converts the specified value to the specified units eg unit(10px, em)   • to-em(value) - Converts the specified value from pixels to em units.   • to-px(value) - Converts the specified value from em units to pixels. Integrated Units: Stylus supports integrated units, which means you can perform calculations with mixed units (e.g., 2px + 1em) without converting them manually. This can be convenient for responsive design and other scenarios where you need to work with different units in your stylesheets. Example: body    width 100px + 1em Using CSS properties as variable lookup: CSS Property values can be used in the same selector. Example: H1  max-width: 100px width: (@max-width/2) Variables Scopes in Stylus: There are two types of variables you can define in Stylus: Local and Global. Variables declared within a block are local or block-scope variables. Global variables take precedence over local variables. Example:  primary-color = "green“ h1 primary-color = “red“ color primary-color h2 color primary-color  OUTPUT CSS:  h1 { color: red; } h2 { color: green } Variables in Stylus: Variables in Stylus are like normal identifier names; they can contain $. Therefore, the following variables are valid with or without $.  header1-font = 25px header2-font = 20px $header3-font = 20px  Stylus Mixins & it’s implémentation buttonmixin { border-radius: 25px; color: white; } button buttonMixin for Loop iteration: For loop iteration in Stylus allows us to harness basic programming features. Here's how we implement a for loop in Stylus:  size-1 = 30px size-2 = 24px size-3 = 20px for i in 1..3 h{i}   font-size: lookup('size-' + i)  The Output:  h1 {font-size: 30px;} h2 {font-size: 24px;}  h3 {font-size: 20px;} Stylus Functions: Functions are similar to mixins however functions return data mixins don’t. In Stylus we can declare and call functions like in any other programming language. widthCalculate(width1,padding1)  width1+padding1  divwidth:widthCalculate(100px,10)Func with Default Argument  widthCalculate(width1,padding1 = 20)  width1+padding1 If you would like to learn more about Stylus, check their documentation page here. Final Thoughts So there you have it—Stylus brings a breath of fresh air to your Drupal projects when it comes to managing CSS. Using Stylus enables you to style effortlessly with variables, nesting, and mixins. Are you revamping an existing theme or starting fresh? Our Drupal experts are here to bring your vision to life. Let's transform your website together. Explore our Drupal development services today and see how we can tailor Stylus to fit your project perfectly.

<p>The online warehouse system of this <a href="https://www.adcisolutions.com/work/online-inventory?utm_source=planetdrupal%26utm_medium=rss_feed%26utm_campaign=online_inventory">Drupal-powered online store</a> calculated the remaining stock of different suppliers incorrectly. The culprit was a custom code and an erroneously configured search. Here's how we fixed this and other issues along the way.</p><img data-entity-uuid="11ac02b3-fd6f-49e7-98f2-4edf245de63c" data-entity-type="file" src="https://www.adcisolutions.com/sites/default/files/inline-images/online-warehouse-management-system.png" width="1346" height="922" alt="online warehouse system drupal">

Today we are talking about Drupal Architecture, Common Site Building questions, and How we solve things with Drupal with guest Alexander Varwijk. We’ll also cover Drupal 10.3 as our module of the week.

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

Topics

• Where do you start when thinking about a new site or feature.
• Where is the line for extending vs forking
• Do you have solutions that you default to when building a feature
• Do you find people come to Drupal with specific third party requirements
• What do you think about Headless
• When do you choose to contribute a new module to Drupal
• Will recipes change your architecture
• How do you learn about new ways of doing things
• Where did you get your username, are you the king of the Netherlands

Resources

• Drupal Core Issues to split "Site builder" functionality into more granular chunks
  • "Administer Users" permission should be separate from "Administer Account Settings"
  • Enabling "List User" without "Administer Users"
• Fibers for concurrency in core (and the Revolt Event Loop)
• Change records for Drupal 10.3
• Bigpipe to Revolt
• ChatGPT / CKEditor Issue
• Config update issue
• Issue for update hook divergence
• Tinode
  • A free, unlimited, and flexible open source messaging platform that’s been built mobile-first
• View transitions api
• Change in supported versions for the Open Social distribution

Guests

Alexander Varwijk - alexandervarwijk.com Kingdutch

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Baddý Sonja Breidert - 1xINTERNET baddysonja

MOTW Correspondent

Martin Anderson-Clutz - mandclu.com mandclu

• Brief description:
  • Have you been wanting to use Workspaces, Single Directory Components, Recipes, or the new admin menu in your Drupal site? The new Drupal 10.3 release is better for using all of these and more.
• Module name/project name:
  • Drupal 10.3
• Brief history
  • How old: It was tagged on Jun 20 by catch of Tag1 and Third & Grove
• Features and usage
  • In this new minor version, Workspaces is now declared stable, and Single Directory Components are now fully integrated into core, instead of being in an experimental module.
  • Drupal 10.3 also includes the new Access Policy API that was funded as part of the Pitchburgh process kicked off at DrupalCon Pittsburgh
  • The “super user” access policy that automatically grants user 1 every permission can now be turned off in services.yml
  • Also, Recipes and the new Navigation menu are available as experimental features
  • The Actions UI, Book, and Statistics modules are deprecated, and contrib projects are available
  • Install profiles can now be uninstalled, and new sites can be installed without any profile at all
  • 10.3 also includes a revision UI for taxonomy terms, and they can also be used with content moderation
  • All core-provided image styles now include WebP conversion
  • The state service now uses a cache collector for performance, which requires opt in within settings.php for existing sites
  • There are other performance improvements, including: POST requests are now render cacheable, duplicate queries during logins are avoided, and big pipe requests now avoid reading session from the database multiple times
  • With 10.3 developer can also make use of a new AJAX command to open a URL in a dialog, and a new DraggableListBuilderTrait, among a host of other changes
  • Of course, there are some additional deprecations, so the Project Update Bot has already been busy creating new MRs

Today DrupalCI and patch testing is turned off on https://drupal.org for good. While it is the end of an era, DrupalCI helped propel us into a strong culture of automated testing. Onwards with the faster and more versatile @gitlab CI! https://www.drupal.org/about/core/blog/drupalci-and-all-patch-testing-will-be-turned-off-on-july-1-2024

Artificial Intelligence (AI) has quickly become a cornerstone of technological innovation. But why is it needed, and how exactly is it changing our lives? To start, imagine a world where machines can predict what you want before you even ask for it. That's the promise of AI, and it's no longer a distant dream.

AI is reshaping industries by automating routine tasks, providing insights through data analysis, and enhancing user experiences with personalization. For instance, in healthcare, AI algorithms can analyze medical records to predict patient outcomes and suggest treatments, drastically improving care quality. In finance, AI-driven systems can detect fraudulent activities in real-time, safeguarding our money and financial data.

Moreover, AI impacts our daily lives more subtly. Think of how Netflix suggests shows you love or how Alexa can answer your questions and control your smart home. These AI-driven features are making life easier and more enjoyable.

Now, let’s introduce AI to Drupal, a powerful content management system (CMS) known for its flexibility and robust features. Integrating AI with Drupal opens new possibilities for web development, making websites smarter and more user-friendly. AI can analyze users' likes and tailor website content to their interests. This means two people visiting the same site might see different content based on their preferences, making their experience more engaging.

Customer support is another area where AI shines. AI chatbots on Drupal sites can answer questions instantly, providing support without making users wait. These chatbots learn from each interaction and improve over time.

AI can also help predict what users will do next. By analyzing user data, AI provides insights into trends and behaviours, helping site administrators make better decisions about content and marketing strategies.

AI is excitingly changing technology, making our lives easier and more efficient. When combined with Drupal, AI takes website development to the next level. From personalizing content and improving search to automating tasks and enhancing customer support, AI makes Drupal sites smarter and more responsive. As AI continues to evolve, it will bring even more improvements, making online experiences better for everyone.

Now, let's delve into the latest Drupal-related news stories and articles covered by The Drop Times:

Check out the article by Alka Elizabeth and Kazima Abbas, sub-editors at The Drop Times, on Drupal Developer Day Burgas. They share insights from the organizers Valery Lourie, Maria Totova-Cholakova, and Hristo Chonov, representing Drupal Bulgaria, as well as speakers Frederik Wouters and Klaus Purer. This year’s event gathered community members to discuss innovative sessions and projects, showcasing how this event is contributing to the future of Drupal.

Additionally, explore the transformative vision behind Drupal Starshot through the insights of Gábor Hojtsy and Pamela Barone with Alka Elizabeth. This ambitious initiative addresses Drupal's past criticisms by enhancing user experience and accessibility with innovative UI improvements and pre-packaged feature sets. Delve into the potential and challenges of Starshot and understand how the leadership team is steering Drupal towards a more user-friendly future.

In his article at The Drop Times, Jay Callicott explores the significance of understanding exponential growth, the transformative power of AI in development, and the critical role of prompt engineering. By harnessing AI tools like the DrupalAI modules, developers can innovate with unprecedented speed and efficiency, navigating the accelerating pace of change in the digital landscape.

Daniel Cothran and Nia Kathoni have introduced a new Drupal module, Views CSV Source, designed to streamline the process of displaying CSV data within Drupal sites. Released on March 5, 2024, and updated on June 25, 2024, this module addresses a common need among Drupal users: the ability to easily display spreadsheet data on a web page without the labour-intensive process of populating a database table. Read more about it here.

Hector Ignacio Iribarne has announced the upcoming Broward Drupal Meetup, scheduled for Wednesday, July 10, 2024, from 7:00 PM to 9:00 PM ET. Organized by Ofer Shaal, Jay Epstein, and Hector Iribarne, this user group meeting will take place online via Zoom. The meetup will focus on discussing Drupal Starshot.

The upcoming Network of European Drupal Associations (NEDA) meeting is scheduled for July 16, 2024, from 2:30 to 4:00 PM (Central European Time—Brussels). This virtual gathering aims to connect members of the Drupal community and local Drupal associations across Europe and beyond. The primary focus is sharing experiences, exploring ways to support each other with knowledge and resources, and discussing common challenges and solutions local associations face.

Don't miss Drupaladas #4 event, "PHPStan in your Projects," scheduled for June 28, 2024, at 12:30 p.m. CEST. This virtual meetup, hosted by Jose Luis Bellido Rojas, will be conducted through a Slack huddle in the #drupal-es channel and features a detailed exploration of PHPStan integration in Drupal projects, led by Alvaro J. Hurtado Villegas.

Drupal Camp Asheville 2024, scheduled for July 12-14, 2024, is just around the corner, with only two and a half weeks left until the event kicks off. As attendees arrive, organizers have arranged a special Thursday night baseball game on the evening of July 11 at the historic McCormick Field.

DrupalJam, held on June 12, 2024, at Fabrique Utrecht, brought together the Drupal community for a day of insightful talks and networking. For those who missed this anniversary edition, the event's highlights are now available on the DrupalJam YouTube channel. The channel has uploaded Dries Buytaert's keynote speech and various insightful sessions for viewers to enjoy. It also features an after-movie capturing the event's atmosphere and memorable moments.

Looking ahead, Drupal Gutenberg v4.0, set for release in August 2024, will feature a major UI refactor specifically tailored for Drupal, moving away from WordPress components. It will introduce single-field editing and make the editor entity agnostic, allowing for editing various content types. The update will also integrate with the Drupal Starshot initiative, enhancing the overall Drupal editing experience.

CKEditor recently announced the release of five new plugins for Drupal users, coinciding with the launch of Drupal 10.3. These updates include the CKEditor 5 Plugin Pack 1.1.0 and CKEditor 5 Premium Features 1.2.9, featuring essential technical fixes and new functionalities to enhance content creation.

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. Also, join us on Drupal Slack at #thedroptimes.

Thank you,
Sincerely,
Kazima Abbas
Sub-editor, The Drop Times 

Leveraging AI and Machine Learning in Drupal Editor Mon, 07/01/2024 - 09:59

Dries Buytaert once predicted that AI bots would provide factual information and communicate with emotions and personality, offering more human-like interactions than websites.
Artificial intelligence technologies have recently begun to be actively used in various fields, including web development. But what exactly? Implementing AI into your Drupal-based website opens up vast opportunities to improve your business's efficiency, significantly improve your customers' service quality, and much more. In this article, you will learn how to achieve success by using AI and Machine Learning in Drupal.

A review of the pros and cons of moving towards or away from publishing PDFs on government sites in Australia.

One great way to extend your catalog of components is by creating components variations. Variations, in the context of component-driven development, refers to displaying your content in different ways. Variations of a component reduce the need of building new components as well as duplicate code.

In Storybook, variations are known as Stories. In this post I will be using variations and stories interchangeably.

The image below shows how different card stories or variations, can display the same content in many ways.

Fig. 1: Example of multiple variations of a Card component.

Principles of building components

Sometimes when building a new component, we can't anticipage how the website will evolve with time and therefore we build components the best way possible at the time of building them. As time goes by and requirements change, we realize that we could have done things differently had we known about the requirements changes. Variations of a component give you a chance to alter how something was built without having to change your entire environment of content architecture.

Some time ago I wrote about principles for building components. Rather than repeating myself, take a quick look at the article and comeback when you are done. You will find those principles not only apply to building new components, but also to building variations of components.

Building component variations in Storybook

In Storybook, all variations of a component are referred to as "Stories", hence the name Storybook. A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states/variations a component can support. Here's a visual that describes the official naming and hierarchy Storybook uses.

Fig. 2: Storybook's official naming convention and hierarchy.

The Card component

First off, I am going with the assumption that you already know how Storybook stories are created and that you have a Storybook instance running. If that's not the case, follow these instructions to get your Storybook environment up and running. You will need NodeJS 20+ and NVM installed on your system to follow along.

Next, let's look at the Card variations we will be creating in this post.

Fig. 3: Example of the different card variations we will build in this post.

The image above shows the Card stories or variations we will build. From top-left to right:

• Default or Stacked
• Light CTA
• Small
• No image
• Horizontal

In the interest of time, I have a repo that already includes the base of the Card component so you can focus only on building the variations.

1. Clone the repo which already contains a project to work with and the Card component.

   If you already have a working Storybook environment, copy the components directory (src/components), from the newly cloned repo, into your project.

2. Switch to the variations branch by running git checkout variations

3. Run the project as instructed in the README in the repo

Methods for creating stories

In this tutorial, we will use two methods for creating variations in Storybook:

1. Doing all the work directly in card.stories.jsx to change fields values or hide/show fields, depending on the story requirements.
2. Using additional *.yml files to assist with the same fields updates above.

We will be using the first method above for all stories except the Card horizontal. The original Card component was built with Twig, but for the variations we will be working exclusively in card.stories.jsx. The current version of the card story looks like this:

import parse from 'html-react-parser'; import card from './card.twig'; import data from './card.yml'; import './card.css'; const component = { title: 'Molecules/Card', render: (args) => parse(card(args)), }; export const Card = { name: 'Card stacked', args: { ...data }, }; export default component;

Let me explain the snippet above as this is the foundation for all the variations we will be creating.

• First we do a series of imports to collect all the pieces needed to build components and stories:

  • import parse: This is a react plugin which allows us to parse the HTML in our stories into React code Storybook can understand.
  • import card: It imports all the code and logic inside our component's twig template.
  • import data: Pulls in all the data from the component's .yml file so we can use it as React args.
  • import './card.css': Imports all CSS styles so Storybook can displayed the styled components and stories. Inside card.css, we already have styles for each of the stories we will be building.

• Next, we set a new configuration object called component, which will serve as the default instance of the card component. This is an arbitrary name and can be anything that makes sense to you.
  Inside the component object we have two properties: title and render.

  • The title property's value determines the location and name of the component within Storybook's hierarchy. In this example the Card component will be located under the Molecules folder. See Fig.2 above for details about the hierarchy.
  • The render property is what handles the rendering of the component by using the card and data objects we imported earlier, and combined together (Twig and YML), they render the full component.

• Next, we create our first story by defining a new configuration object called Card, in which we pass a name (Card stacked), for the story and the data variable as args.

• Finally, we export the component object as default, which is a React requirement.

If Storybook is running, you should see the new variation which will display the Card stacked. If you need to run Storybook for the first time, in your command line navigate to the storybook directory and run these commands:

IMPORTANT: You need NodeJS 20+ and NVM installed in your system. nvm install npm install npm run build npm run storybook

If all goes well, Storybook should be running showing the Card stacked story under the Molecules folder.

Preview of Card stacked

Fig. 4: Example of the Card stacked from which other variations will originate.

Card with light CTA

• Inside card.stories.jsx, and directly after the closing of the Card object (around line 17), add the following object to create a new story:

export const CardLightCta = { ...Card, name: 'Card light CTA', args: { ...data, cta: { modifier: 'button--light', text: 'Try it now', url: 'https://mariohernandez.io', } }, };

Let's go over the snippet above:

• We start by creating and exporting a new object called CardLightCta. This is a new story. This name is arbitrary but it should be unique for each story.
• Next, we pass the default Card story (...Card), as a spread operator, so the new story inherits all attributes from the original card.
• The name property allows for each story to have a unique name which will appear directly under the component name in Storybook's sidebar (see Fig. 2 at the top for details).
• Finally, we open the args object where we will update some of the fields to achieve the desired variation:
  • We pass the ...data object as a spread operator to individually update the fields that need updating.
  • Since the only difference between this variation and the original card is that the CTA is light, we need to define the cta object and provide each of its properties with the appropriate values:
    • First as a modifier class we pass button--light. This is a predefined modifier class which will turn the CTA white.
    • Next, we type the text that will become the CTA's label, Try it now.
    • And finally, we pass a URL to the CTA.

Preview of Card with light CTA

Fig. 5: Example of a Card component with a light CTA.

Card small

This next story or variation is the small version of the card. The difference between this card and the original one is that this one has no CTA, and its size is ...well, small 🙂

Same as before, add the following snippet to card.stories.jsx directly after the closing of the card with light CTA story:

export const CardSmall = { ...Card, name: 'Card small', args: { ...data, modifier: 'card--small', cta: '', }, };

This story is very similar to the previous one from the updates needed point of view. As you can see, the only thing we are doing is passing card--small as a modifier class to the entire component, and since we don't need a button or CTA, we are defining the cta object but its value is empty which will suppress it from printing on the page. If you notice in card.twig, we use a conditional that checks if the cta object exists, otherwise don't print any of the markup starting with the footer tag.

Preview of small card

Fig. 6: Example of a small card.

Card with no image

• You know the drill, inside card.stories.jsx, directly after the closing of the previous story, add the following snippet:

export const CardNoImage = { ...Card, name: 'Card no image', args: { ...data, modifier: 'card--no-image', image: '', }, };

Even more similar to the previous story, this variation only varies from the original story as follows:

• We are passing a modifier class to the component, card--no-image.
• Since we want no image, we define the image object but leave its value empty.

Preview of card without image

Fig. 6: Example of a card without image.

Card horizontal

The final variation is the Card horizontal. For all previous variations we have done all the changes inside card.stories.jsx, but for this one, we will resource to using an alternative *.yml file. Why you may ask, well, this variation requires a bit more changes and making all those changes inside the stories.jsx file may look a little too busy and not as easy to read the code. That's pretty much the only reason for me to use this method, to keep the code in my stories clean and more readable.

You may have noticed in the project you cloned; inside the card directory we have a file called card-horizontal.yml. This file is almost identical to the original card.yml as far as the fields in it. The only difference is that some of the fields have unique content or no content at all. Let's look at the file before starting.

--- modifier: 'card--horizontal' image: <img src="/card-square.jpg" alt="Palm trees near city buildings" /> title: level: 2 modifier: 'card__title' text: 'Step outside to the outdoors' url: 'https://mariohernandez.io' teaser: 'With spring in full bloom, the weather could not be better to take a walk outside and enjoy the beauty of nature.' cta: ''

• The modifier field has a specific CSS class we will pass: card--horizontal. This class will allow us to change the layout of the card to be in horizontal direction.
• The image field uses a different image altogether. The image has been cropped in square aspect ratio for better fitting of this variation.
• Finally, the cta field is empty, meaning we don't want to print a button on this variation.

Maybe I exaggerated when I said that this variation has too many changes, but my point is that in cases when your stories do require a lot of changes, using a different yml file may help you keep your stories.jsx file a lot neater and cleaner.

• The first step is one we haven't done before. Inside card.stories.jsx somewhere around line 5 (after the last import in the file), add the following import:

import dataHorizontal from './card-horizontal.yml';

• Next, the way we've done before, inside card.stories.jsx add the following object directly after the closing of the last story:

export const CardHorizontal = { ...Card, name: 'Card horizontal', args: { ...dataHorizontal, }, };

• First we imported a new data file called card-horizontal.yml and assigned the object name of dataHorizontal. By doing this, any changes we make inside card-horizontal.yml will be reflected in Storybook.
• Lastly, we repeat the same process as the previous variations but this time, inside the args object, we pass the new object we created in the previous step (...dataHorizontal), rather than ...data.
• That's it. Our story file is nice and clean. Since we handled all the fields updates in card-horizontal.yml, the .jsx file is simply consuming its data to achieve the desired variations.

Preview of horizontal card

Fig. 6: Example of a card in horizontal layout.

Now that we have covered both methods for creating variations, know that neither method is better than the other. The decision to use one over the other boils down to personal preferences and sometimes which makes the most sense to simplify the process.

End result

At the end of this process, your card.stories.jsx should look like this:

import parse from 'html-react-parser'; import card from './card.twig'; import data from './card.yml'; import dataHorizontal from './card-horizontal.yml'; import './card.css'; const component = { title: 'Molecules/Card', render: (args) => parse(card(args)), }; export const Card = { name: 'Card stacked', args: { ...data }, }; export const CardLightCta = { ...Card, name: 'Card light CTA', args: { ...data, cta: { modifier: 'button--light', text: 'Try it now', url: 'https://mariohernandez.io', } }, }; export const CardSmall = { ...Card, name: 'Card small', args: { ...data, modifier: 'card--small', cta: '', }, }; export const CardNoImage = { ...Card, name: 'Card no image', args: { ...data, modifier: 'card--no-image', image: '', }, }; export const CardHorizontal = { ...Card, name: 'Card horizontal', args: { ...dataHorizontal, }, }; export default component;

In closing

This only touches the surface of creating stories, but it is refreshing to know that no matter how complex your components may be, when it comes to having Storybook parse them, the React code in your stories is very minimum. Certainly, there are exceptions, but as I complete the migration of our large Drupal project with many components, some of which are pretty large and complex, we still were surprised how little React code was required of us to write because all the heavy lifting is being done by Storybook, with its contrib extensions, as well as Twig itself.

One of the skills everyone needs to have is asking for help. Whether that’s in our work, our education, or our personal lives, we all need help from time to time. We are focused on work here, but this same basic rules apply in all aspects of our lives.

The right time to ask for help is, like so many things, a balancing act. Struggling through a complex issue can be a great way to learn something new. But often we can short cut that learning by simply asking the right questions at the right time.

On the flip side, if we ask too early not only do we risk missing a chance to build deep understanding, we also risk frustrating colleagues by asking them to do our job.

One short cut for when you need to ask for help is if another team member asks if you have already asked. Generally, I want to have called for support before my PM suggests it. By then they are frustrated that I haven’t already solved whatever the issue is solo.

Signs You Might Need Help

Given my current role and skill set, I’m often the person who gets called when a project goes sideways. That means I see a lot of places where someone didn’t call for help until they were in crisis. While that’s going to happen to us all from time to time, it’s better to call for help when the problem is small. If you want until the project starts burning down around you, it’s way too late.

You might need help if:

• You have absolutely no idea what to do next.
• You are about to re-design a large portion of your project to get around a challenge.
• You have spent more than a day pounding on a problem without success.
• You are avoiding working on a task, because you don’t know how to get started.
• You are about to use a mode/tool/technique that everyone says is a bad idea.
  • In Salesforce that can mean things like:
    • loading data in serial mode
    • setting batch size to 1
    • using view all data in your tests.
  • In Drupal that can mean things like:
    • hacking a module
    • loading data in the theme layer
    • writing raw SQL queries

What to do Before Asking for Help

As I said before, asking for help is a balance: you can wait too long, or you can ask too soon. The real trick is hitting the sweet spot.

There are several things you should always do before taking another person’s time.

• Google It! I kinda can’t believe I have to say that, but not everyone bothers.
• Make sure you can explain the question clearly. If you don’t know where you got stuck, how can I help you get unstuck? And thinking it through might make the answer obvious.
• Develop a theory. When asking for help, it can be useful to pose a theory about an approach. Even if you’re wrong it may help me understand your thinking.
• Try a few things. Experimenting with what’s going wrong can help you formulate your question, and may help me short cut my research if you have eliminated obvious issues.
• Explain the problem to your dog, cat, rabbit, stuff animal, etc. As someone who spends time being a human rubber duck, I can often tell when someone tried to explain it once already.

Where/Who to Ask for Help

For me, the hardest part is knowing who to ask.

As a consultant I try to avoid asking questions in places clients may see it. Our clients pay for us to be experts, they do not want to see us asking questions in public – particularly if the question has a simple answer.

As a Salesforce MVP, one of my favorite perks is the MVP Slack channel, where we ask each other questions that run the full range of complexity. While access to a community that hard to access, and that advanced, is a privilege there are other ways to find similar groups like your local user group.

I love having a good internal network of people to ask for help. Most of the places I have worked at as a consultant have had some kind of information place to ask questions and help each other out. If you work in a consultancy find or create such a back channel.

If concerns about being seen by clients isn’t relevant to you, check out this list of 7 Salesforce Communities to Join recommended by Salesforce Ben.

Help Build a Helpful Community

The final thing to know about asking for help, is that it’s important to offer help as well. A good question can be valuable to someone else who has the same issue in the future. A good answer is helpful to both the person who asked the question and the person who looks again in the future.

But offering answers, even if not perfect answers, is a great way to learn and encourage others to seek help. Any time I post a question on Stack Exchange, I try to hunt around for one or two to answer as well. That both allows me to pay it forward, it also helps encourage the tone that people can be experts in one thing while still needing help in another.

Smart people need help, and should be comfortable asking for it.

The post Knowing When to Ask for Help appeared first on Spinning Code.

Healthcare systems consistently rely on technology to provide accurate and timely care. Drupal, an integrated CMS, can help meet this goal.

Discover important security updates and changes happening in Drupal 7 and how you could benefit from upgrading to Drupal 10!

Discover how Drupal enables organizations to adapt to evolving business needs with agility and ease.

Organizations still using Drupal 7 are missing out on the flexibility, customization options, scalability, and marketing capabilities available in the newer versions. Drupal 10 allows for the management of consistent and engaging digital experiences across various channels, enhances search engine optimization, and enables web teams to deliver content more efficiently.

Authored by Nadiia Nykolaichuk.

It seems like yesterday that people started cautiously embracing artificial intelligence with admiration, surprise, or even fear. Technology rushes forward, multiplying the number of potential ways to use AI on your website to streamline your workflows.

Here's what I've been working on for my Drupal contributions this week. Thanks to Code Enigma for sponsoring the time to work on these.

Takeaway: Government CMS preferences evolve with population size, shifting from specialized proprietary solutions for smaller entities to enterprise-level, often open-source platforms for larger ones. This shift reflects the need for greater scalability, flexibility, and advanced features as government entities grow and face more complex digital demands. NEED A CMS THAT CAN GROW WITH YOU? TALK TO OUR TEAM