drupal

In another Halloween-themed episode of Tag1 Team Talks, Janez Urevc shared a challenging migration story from his past. The project involved transitioning a media organization from an in-house proprietary CMS to Drupal, facing resistance from the existing development team attached to their custom system.

Read more michaelemeyers Tue, 10/31/2023 - 06:30

Cloud hosting solutions are cool until they ruin your multilingual website search. The search engine of this client's Drupal website was crashing and rebooting, but only on the dev and staging servers. How can that be?

Now there are two types of people in the sandwich universe - people who like to order a sandwich off the menu and people who like to customize their sandwich by choosing their bread, filling, and sauce. We’d like to call the latter, ‘Sandwich Mavericks’, who would (most likely) prefer their websites to be as unique as their custom sandwiches. They’re not tied down to a specific front-end technology, or limited by templates and themes provided by the CMS. A Decoupled Drupal CMS architecture lets you be the architect of your web destiny. If you’re not craving a sandwich yet, jump into this article right away to learn more about Decoupled Drupal and using React as the front-end technology to craft absolutely delicious web experiences that your audience will love. What is Decoupled Drupal? The term decoupled means to be detached or separated. In terms of Drupal, it refers to a detached frontend from the Drupal architecture. Hence in a decoupled Drupal architecture, the contents are managed by Drupal and the frontend can be any frontend technology like React, AngularJS, VueJS, etc. Decoupled Drupal is also known as headless Drupal. Traditional CMS VS Decoupled CMS Some key differences between traditional Drupal and decoupled Drupal: Traditional Drupal uses Twig as the frontend tool, while decoupled Drupal can use any of the previously mentioned modern frontend technologies. Traditional Drupal provides us with many out-of-the-box features like content preview, layout builder, etc. In decoupled Drupal, it will need extra effort to build these features. Traditional Drupal has average page speeds, whereas decoupled Drupal has average to fast page speeds. Traditional Drupal uses monolithic architecture, while decoupled Drupal can use both monolithic & microservices architecture. Tech complexity is average in traditional Drupal, whereas in decoupled Drupal it is highly complex. Image source: drupal.org Should you consider decoupling Drupal? Choosing between the two isn't a straightforward decision. It depends on various factors, with a key one being that decoupled Drupal is more intricate and requires additional effort to replicate many features that come prepackaged with Drupal. This can lead to increased development costs and heightened technical complexity. However, it also allows you to seamlessly incorporate Drupal into various modern technologies such as single-page applications (SPAs), mobile apps, configuration-based user interfaces, IoT and offers reusable content capabilities. How does Drupal support headless As Drupal employs an API-first architecture, we can utilize its backend structure to store and deliver content through APIs. Drupal's core natively supports JSON:API/REST API, enabling us to present content as JSON and communicate with front-end technologies via REST. To know which one to choose: JSON API vs REST API vs Graph QL, you can refer to this article. Creating a decoupled Drupal with React Let’s get down to business and start building a decoupled Drupal project with React. This is what your Project folder structure will look like: Under the root directory, we are placing our Drupal project and React app. Sidenote: here docker-compose.yml  is for managing the docker container created for Drupal and the React app. Our Drupal project is created using:  composer create-project drupal/recommended-project my_site_nameAnd our React app is created with: npx create-react-app my-appSetting Up the Drupal application Step 1: On the Drupal side we need to configure a few things to get started: a) Enable CORs settings in services.yml # Configure Cross-Site HTTP requests (CORS). # Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS # for more information about the topic in general. # Note: By default the configuration is disabled. cors.config: enabled: true # Specify allowed headers, like 'x-allowed-header'. allowedHeaders: ['*'] # Specify allowed request methods, specify ['*'] to allow all possible ones. allowedMethods: ['*'] # Configure requests allowed from specific origins. Do not include trailing # slashes with URLs. allowedOrigins: ['*'] # Sets the Access-Control-Expose-Headers header. exposedHeaders: false # Sets the Access-Control-Max-Age header. maxAge: false # Sets the Access-Control-Allow-Credentials header. supportsCredentials: trueb) Enable Rest, Rest UI, Serialization modules By default, Restful Web Services & serialization modules are present out of the box in Drupal 9. You need to install Rest UI (which is a contrib module). composer require 'drupal/restui:^1.21'c) Click the configure settings on the Rest UI module. Then enable the “Content” Resource name.   When this is enabled, it converts the data received from Drupal into JSON. Step 2: In order to access it, go to any content page, like here we are opening an article page.   Now if you add ?_format=json query parameter, it will show the data in JSON format ( a feature of RESTful Web services). Step 3: Now let's create a view with the latest articles on Drupal (see screenshot) A few pointers on the creation of the view.a) Create a “rest export” view. This will be used for passing out our latest articles data to our React app. b) Under path settings, authentication is provided as a “cookie”. We can also use basic auth (i.e. verification with username/password). For that, you need to install the basic auth module. For this demo, we are only using cookie-based authentication since it is more user-friendly when working with mobile applications. Step 4: Once created, visit the view url (here: /articles/latest). You will see the data formatted into JSON. Note: You don't need the _format=json parameter for this view page. Setting Up the  Frontend Application (React) Now that we have set up our Drupal site, let's begin creating out React application. 1) Folder structureSince we are using create-react-app, it provides us with the boilerplate code to get started with react. Sidenote: It is better to use Vite than Create-react-app for improved performance. 2) Create the frontend scaffolding    React APP {setIsModalOpen(true)}}>Add Nodes {setIsModalOpen(false)}}>X Title setFormData({...formData, title: e.target.value})} value={formData.title}/> Short Description setFormData({...formData, shortDesc: e.target.value})} value={formData.shortDesc}/> Body setFormData({...formData, body: e.target.value})} value={formData.body}> If the structure feels overwhelming, worry not. There are mainly two components: Results - renders the result from the API call. Article - the article items on the listing. Results.js const Results = ({articleUpdated, setArticleUpdated}) => { // article listing state. const [articleList, setArticleList] = useState([]); useEffect(()=>{ const relative_path = "/articles/latest"; // adding intensional delay for UI. setTimeout(() => { getData(relative_path) .then(res => setArticleList(res)) .catch((error) => {console.log(error)}) }, 1000); },[JSON.stringify(articleList), articleUpdated]); return ( { articleList?.length === 0 ? : { articleList?.map((curr,index) => { return ( ) }) } } ) } export default Results;  Article.js // article item component. const Article = ({title,shortdesc,nid, ds, articleUpdated, setArticleUpdated}) => { const handleDelete = (nid) => { deleteData(nid) .then((response) => { if (response.ok) { setArticleUpdated(articleUpdated + 1) } }) .catch((error) => console.error(error)) } return (

{title}

{shortdesc}

{handleDelete(nid)}}>Delete ) }The Results component uses getData() and postData() to get/post data from Drupal. getData()  export async function getData(relative_path, query_params) { const hasQuery = query_params ? "?" + query_params : ""; const generated_URL = endpointUrl + relative_path + hasQuery; try { const res = await fetch(generated_URL); const get_response = await res.json(); return get_response; } catch(error) { console.error(error) } }postData() export async function postData(data_to_post) { try { const response = await fetch(tokenURL) const csrf_token = await response.text() const post_data = { "type": [{ "target_id": 'article', }], "title": [{ "value": data_to_post.title, }], "body": [{ "value": data_to_post.body, }], }; const generated_URL = endpointUrl + "/node?_format=json"; const post_response = await fetch(generated_URL, { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf_token, }, body: JSON.stringify(post_data), credentials: "include" }) return post_response; } catch(error) { console.log(error); } }State variables used const [formData, setFormData] = useState({ title: "", shortDesc: "", body: "", img_field: "", }); const [articleUpdated,setArticleUpdated] = useState(0);Form handler const handleAddSubmit = (event) => { event.preventDefault(); postData(formData).then((res) => { if(res?.ok){ setArticleUpdated(articleUpdated+1) }else { console.log('invalid form submission') } }) setIsModalOpen(false); }3) After adding all the React code and the CSS as per desired design (Note: CSS code is not included), Run npm start  This will start your React application. Now you can add data on the React app and it will get stored on Drupal. And via the get method, we can view the updated result on our React app. This is the final result: On the Drupal application, our test data is now stored. Final Thoughts In the current market trend for API-first architecture, the rise of modern frontend tools to better serve the customer, and the possibility to use Drupal capabilities along with other powerful architectures, the Headless/Decoupled Drupal is a step into that. Currently, the poor documentation for decoupled architecture using best practices and the complexities of extracting data from some commonly used Drupal features like layout builder, paragraph module, etc. make it challenging to implement a fully decoupled website. As Dries Buytaert (founder of Drupal) also suggests going with progressively decoupled is a better choice as of now. The decision to opt for decoupled architecture comes with both advantages and challenges, it’s a matter of which one weighs more as per the end product. Discover how Specbee can assist you in navigating these waters and building a tailored solution that meets your unique needs.

Today we are talking about Commerce Kickstart, Commerce in General, and What’s new at Centarro with guest Ryan Szrama. We’ll also cover Navigation as our module of the week.

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

Topics

• High level overview of commerce kickstart
• Is it a distribution
• Will it move to recipes
• Why use commerce directly over kickstart
• Does kickstart lend itself to a specific type of site
• Compare with Shopify
• Do you ever recommend Shopify
• Are there additional conditions or events being added
• Can people contribute to kickstart
• What is Centarro focused on now
• What is the state of headless

Resources

• Selling File Downloads and certificates through Drupal Commerce
• Commerce Kickstart
• Driesnote
• Methodical coffee

Guests

Ryan Szarma - ryanszrama.com rszrama

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Mark Casias - kanopi.com - markie

MOTW Correspondent

Martin Anderson-Clutz - @mandclu Navigation

• Brief description:
  • Would you like to try out and give feedback on a proposed overhaul to how Drupal’s administration menu works? There’s a module for that.
• Brief history
  • How old: project created in 2004, but the namespace was taken over earlier this year as a place to work on the proposed new navigation in the contrib space
  • Versions available: No releases yet, so you need to clone the repo into your custom modules
• Maintainership
  • Very active development, commits in the past day
• Number of open issues:
  • 46, 14 of which are bugs
• Usage stats:
  • Officially 1 site is using it, but not recommended for production anyway
• Maintainer(s):
  • Include Christina Chumillas, Sascha Eggenberger, Lauri Eskola, Mike Herschel, and more
• Module features and usage
  • At this point, really a prototype, trying to define what the user experience should be
  • Worth noting that the latest release for the Gin admin theme also includes this new updated navigation as an experimental feature that can be updated, but still best to leave feedback on the Navigation project
  • The main idea is that instead of having dropdowns that fly out for deeper level menu items, the navigation is in a sidebar, with menu items that expand to reveal child items when clicked
  • It’s worth noting that dropdown menus with multiple levels handled in flyouts are a known usability pain point, and are often cited by industry experts like Jakob Neilsen as something to avoid
  • There are still some usability issues to be thought through with this approach, for example there is no longer a way to reach the top page of a section or subsection, because clicking on the link shows or hides the child items instead
  • This was a subject of some very active discussions at DrupalCon Europe last week, so I thought it would be good to cover this week, so our listeners can add their voices

In a world filled with a cacophony of opinions on how we should live our lives, it's essential to develop a discerning filter. Pay heed to the voices and advice that resonate with your own vision, embracing what aligns with your path while respectfully disregarding the rest. MK Gandhi effortlessly puts it in words,

"Happiness is when what you think, what you say, and what you do are in harmony."

—Mahatma Gandhi, Proponent of 'Ahimsa' in Indian Freedom Struggle.

This reminder serves as a compass to guide us through the noisy maze of external expectations. By adopting this approach, we shield ourselves from the risk of losing our sense of self and falling into the trap of living according to others' standards. It empowers us to maintain our focus on personal growth and well-being, preventing the weight of others' opinions from leading us down a path of self-doubt or depression.

The happiness of your life depends upon the quality of your thoughts: therefore, guard accordingly, and take care that you entertain no notions unsuitable to virtue and reasonable nature.

—Marcus Aurelius, Former Roman Emperor.

Within the vibrant and diverse Drupal community, this reminder echoes with a special resonance. The Drupal community, like the broader world, is a place where a multitude of voices and opinions can sometimes overwhelm individuals. The Drupal community embodies a spirit of collaboration and open-source innovation, where individuals from all walks of life come together to contribute to a common cause. However, amidst this diversity of voices and ideas, it's easy to lose sight of one's unique path and values. In this context, it's crucial for community members to remember such sane voices as they navigate the land of Drupal.

By embracing the notion of prioritizing personal happiness and well-being, community members can strike a balance between embracing the collective wisdom of Drupal and staying true to their own vision. It reminds them to contribute and engage in a way that resonates with their unique strengths and passions, without falling into the trap of conforming to external expectations. In doing so, they can thrive in the Drupal community, finding fulfillment and purpose while contributing to the growth and success of the platform.

Let us look into last week’s stories by The Drop Times (TDT).

A new platform for generating and showcasing ideas within the Drupal community has emerged, drawing inspiration from the successful Pitch-Burgh Innovation Contest named "Innovation Ideas." I had the opportunity to converse with Ricardo Marcelino, one of the minds behind the project, for an insightful article.

Drupal is making strides towards presenting a more unified brand experience for local associations by introducing a shared codebase and theme for localized Drupal websites. At DrupalCon Lille, Binny Thomas, our committed volunteer, had an in-depth live discussion with Esmeralda Tijhoff on the concept of a shared codebase, which was subsequently crafted into an article.

DrupalGovCon, a two-day extravaganza, takes place in Bethesda, Maryland, United States. There is also an extended learning contest as part of this event, sponsored by Drupal4Gov, the NGO organizing the conference, through which you may gain up to 9 Acquia certifications. Join the GovCon for an illuminating session featuring Aten's CEO, Justin Toupin, as he showcases a user-friendly Drag-and-Drop Publisher. Promet Source is providing a free Drupal Crash Course for Non-Developers at the GovCon. 

Don't forget to mark your calendars for the Berlin Drupal User Group Meetup on November 2, 2023. Local Drupal enthusiasts in Minneapolis are gearing up for a networking and discussion opportunity as they prepare for the November 2, Drupal Happy Hour event at Venn Brewing. 

In other great news, if you're considering speaking at DrupalCon Portland 2024, you have more time! The proposal submission deadline has been extended, offering a fantastic opportunity to share your expertise with the Drupal community.

As the end-of-life date for Drupal 9 fast approaches on November 1st, website owners and developers are actively gearing up for the crucial transition to Drupal 10. Annertech provides insights to ensure a smooth shift from Drupal 9 to Drupal 10. 

Drupal 10 is set to be a pioneering force, reshaping the web development landscape not only in 2023 but also in the years to come. Orion Web has thoughtfully compiled a list of Drupal 10's most essential features. Senior Backend Developer Juan Delgado Salmerón recently shared his experience of addressing a critical security issue in a Drupal 7 project through his blog post. Matt Glaman's crucial documentation represents a significant advancement in the development of Retrofit for Drupal. 

In a Halloween-themed conversation, Tag1 Consulting treated their audience to two eerie Drupal migration stories told by Benji Fisher in episode #102 of Tag1 Team Talks, a podcast series hosted by Michael Meyers. Additionally, Vardot has crafted a comprehensive guide for seamlessly integrating GA4 with GTM within Drupal, offering valuable insights for website optimization. RoseHosting provides a comprehensive guide on installing Drupal on Debian 12.

Altudo has introduced an eBook on the key considerations, benefits, and the journey involved in migrating from WordPress to Drupal.

So these are the highlights from TheDropTimes. Feel free to contact us with any suggestions, contributions, or feedback. Thank you for being a part of our community. Until the next edition, keep exploring, sharing, and embracing the power of knowledge! Follow us on LinkedIn, Twitter and Facebook. 

Sincerely,    
Elma John    
Sub-editor, The DropTimes  

Did you know that 79% of shoppers shop online at least once a month? The comfort and convenience associated with the experience are two primary drivers behind the massive inclination toward digital purchasing. As we sail ahead in the ocean of time, the fondness for online shopping is only going to increase further. Drupal e-commerce CMS and other similar platforms are working day in and day out to make the digital shopping experience even more engaging and alluring. According to research, the e-commerce market is expected to total over around $8.1 trillion in 2026. Seems incredible, doesn’t it? 

Given the enormous appeal of digital shopping, a majority of businesses are planning to expand their presence online. If you also have similar plans, it is crucial to be mindful of the ferocious competition. To accomplish enduring success, you’ll have to outperform the competition and establish your unique presence. I was wondering how to do so. The answer is to tap into the potential of a cutting-edge CMS like Drupal. 

Rank up your Drupal site with these search engine optimization tips kanapatrick Mon, 10/30/2023 - 10:14

If you have a Drupal website, you may already be aware of the many benefits this content management system offers. However, having a great website is only half the battle – it also needs to be easily found by your target audience. This is where search engine optimization (SEO) comes in.

The Future of Drupal Theming: An Overview of Emerging Trends and Tools Editor Mon, 10/30/2023 - 09:32

Drupal started as a student project in Belgium. Initially, Dries Bytart devised a communication system between students living in dormitories. But the Drupal software and community have grown significantly over the years. For now, ten significant versions of Drupal have been released. 
In this article, we will talk about Drupal theming that makes our sites precisely how we see them. It is impossible to divide them into good and bad strictly. Some templates suit your project and those that look out of place. Drupal allows you to use both templates and customize themes individually. Developers constantly offer improvements and updates. Stay updated with emerging trends and tools to ensure you have a competitive edge in the changing landscape of Drupal themes.