Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Aug 07 2020
Aug 07

Did you know that according to WebAim, a whopping 98% of the top million homepages on the web today present some sort of barrier to accessibility? This has serious implications for the 1 in 5 people worldwide living with some form of disability. Building a more accessible, inclusive web is truly everyone's business.

There's a ton of information out there on web accessibility, and it isn't always clear where to start and what you should be focusing on.

An illustration of Evolving Web's Accessibility Ebook

We've put together a simple, straightforward, informative guide to help designers, developers, and anyone working with a Drupal website navigate the ins and outs of the accessible web. Head over here to download your copy. It's free!

Ebook Chapters

1. Why web accessibility matters

Find out why making your website accessible should be a business priority.

2. What is web accessibility?

Learn about the key principles of accessibility and what standards and guidelines currently exist.

3. Assistive technologies you can start using today

Spend some time in the shoes of a user with a disability to experience first-hand why accessibility is so important, and whether your website really works for everyone.

4. Why Drupal is great for building accessible sites

The Drupal CMS comes with robust accessibility features out of the box. Find out how switching to Drupal can help your accessibility journey.

5. 18 tips for making your website WCAG compliant

Start making simple changes with a big impact today.

6. Tools for checking website accessibility

You're not alone! Discover some must-have accessibility testing tools.

7. Drupal modules for web accessibility

Need even more features? Explore our favourite Drupal modules that extend the CMS's accessibility capability even further.

Download Your Copy!

Click here to get your free copy of Building a More Inclusive Drupal Website: Your Accessibility Guide.

Aug 06 2020
Aug 06

Today we're presenting the first minor updates across the new DXPR (Formerly Sooperthemes/Glazed) branded products. 

What's New?

DXPR Theme

  • We updated our Free Drupal Theme to let you choose between a traditional 3-line hamburger menu icon and a 2-line menu icon. You can see it in use on DXPR.com right now! Do you like this new option? Let us know in the comments*, we may choose to add more options to customize the menu icon.
  • We pushed several front-end performance enhancements that will be especially noticeable if your digital experience platform is taking advantage of HTTP/2. Want to know more about the front-end performance of our products? Feel free to run your favorite tests on our website. Last we checked all the pages in our main menu score in between 95 and 100 on Google PageSpeed. 
  • Drupal 9 compatibility

*comments only open for registered users

DXPR Theme Changelog

DXPR Builder

  • For the first time ever we're updating DXPR Builder via our very own composer package server
  • We added an option "Mirror" to our row element. There is a design trend in creating story-like layouts with a rhythm of alternating text+image, image+text rows. However on the mobile design the order of content remains as text+image, text+image. With our new mirror option you can reverse the order the row's columns only on the desktop design. An example of this new feature is our Drupal Layout Builder product page. 
  • We've updated Font Awesome 5 Pro icons and included the duotone icon set, which is now available on all elements that support the Icon setting.
  • We modified how our "Full height" option on the section element works. This option will still make your section as tall as the viewer's screen, but we switched to making this minimum-height. This is to prevent text from invisibly flowing off the screen when the sections' content simply won't fit on a small screen.
  • Drupal 9 compatibility

DXPR Builder Changelog

DXPR Builder Enterprise

  • Added a "local video" drag and drop element for uploading videos to your media library and streaming them directy from your Drupal platform.
  • Fixed an issue with exporting "user profile" configuration entities.
  • Drupal 9 compatibility

DXPR Builder Enterprise Changelog

Lightning DXPR

  • Updated to Acquia Lightning 5.x.
  • Updated all depedencies to Drupal 9 compatible versions.

Lightning DXPR Changelog

Aug 06 2020
Aug 06

It’s never too late to open the new digital opportunities for your business. Your website can help you in this — just make it more up-to-date with the latest technology. Still on Drupal 7? Let’s discuss migrating to Drupal 8/9 and the essential steps for doing this. Our website maintenance and support team is ready to seamlessly perform them all for you.

Business benefits of migrating to Drupal 8/9

We once shared a post about why to migrate from Drupal 7 to Drupal 8. Since then, Drupal has made giant strides towards innovation, so Drupal 8 benefits for business have become more significant.

  • The latest advancements of D8 plus the new amazing prospects of D9 are combined into a unique “cocktail” of benefits that you will get if you migrate from Drupal 7 to Drupal 8/9. Let’s sum up just a few of them:
  • You can greatly expand your mobile audience thanks to the mobile-first nature of Drupal 8/9. Responsive design can be set up easily so as to provide the smoothest experiences for users of smartphones and tablets.
  • Your content editors will do tasks much faster and with joy. Features like the new CKEditor, the administrative Claro theme, Media Library, Layout Builder, and Quick Edit make a huge difference. Your editorial dashboard will look and work in a brand-new way.
Media Library in Drupal 8 and 9
  • Embrace larger audiences by speaking their languages thanks to out-of-the-box multilingual support. Languages are easy to add, interfaces are already translated, and editors can manage language versions in very convenient ways.
  • Your business can expand its digital reach if it’s not limited to a website alone. Content is now consumed via a great variety of devices — mobile phones, IoTs, smart TVs, wearables, conversational interfaces, and more. Drupal is now API-first, which means it is ready to exchange content in various formats with various devices and applications. Your editors publish content once and it is shared to multiple audiences.
  • Drupal now offers more built-in features and add-on modules to increase your website’s accessibility and make it easy-to-use for audiences with disabilities according to the latest standards.
  • A much cleaner code and more modern architecture make websites more SEO-friendly, secure, fast-performing, and easier to maintain, scale, and extend with new features.

Key steps of migrating to Drupal 8/9

1. Preparatory audit

As the first important step before migrating to Drupal 8 or 9, you will need to review your existing Drupal 7 site. Do its features and content structure meet your today’s business needs? Don’t forget to ask people involved in daily routine tasks on the website, because they might produce good advice.

2. Strategic planning

The results of this review is useful information for developers who should help you make an audit of all website’s modules, content types, etc. Here they plan what can just be migrated and what needs a custom rebuilding. When it comes to custom modules, they are the first candidates for custom rewriting because of the huge difference in architecture between D7 and D8/9. Contributed modules are ready in most cases.

3. Creating a fresh site instance

D7 is so far behind that the only way to upgrade a website is to create a fresh instance of the Drupal core from scratch, with subsequent migration of your content. This new Drupal 8/9 website will include all the lucrative benefits of the new version. Your website’s design can stay the same or become totally different — it’s up to you to decide.

4. Content and configuration migration

As the next important step of migrating from Drupal 7 to Drupal 8/9, developers migrate all your data using the available tools and methods. Luckily, Drupal now offers a lot of automation options. Some of the data will need to be recreated manually from scratch. For some data, complex mapping will be needed. Experts make decisions as to the most feasible ways of migration.

5. Testing and deployment

The final step of the Drupal 7 to 8/9 migration is to thoroughly check whether the data has been migrated correctly, and then the website can go live. In the ideal testing process, it’s more than just checking the correctness of the migration — professional QA engineers do various kinds of testing (performance, functionality, and usability testing) to evaluate the website’s work from all angles.

Migrating to Drupal 8/9 is easy with experts

We have tried and described the process of migrating to Drupal 8 or 9 in very simple terms. Yes, it can be challenging in reality. However, when you cooperate with experts, you can be sure all the steps of upgrading a Drupal 7 website to Drupal 8/9 will be performed smoothly and safely. Contact our web agency and let the new life of your website begin!

Aug 06 2020
Aug 06
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Burners-Lee, W3C Director and inventor of the World Wide Web’’

Are you planning to start a new business and probably looking to have a great web presence to go along with it? If that’s the case then you have landed at the right place. In the current age of web development, there are markets that are flooded with customers that would prefer to research and buy online. Today the word ‘web’ has become an indispensable resource that covers just about every aspect of our lives. Further, there are various modern ways to design effective and irresistible web solutions to captivate the attention of online buyers. However, the main question here is - is your website accessible to everyone, including people with disabilities?  Does everyone around you share the same level of accessibility that they should have? 

Unfortunately, many websites are inaccessible to people with disabilities, making it difficult for them to find information online. However, web accessibility for people with disabilities is becoming a greater priority, and as a matter of fact, accessible websites are no longer optional, rather they are a must-have. It has become important for websites to implement web accessibility to make sure that all the users are able to surf the web and easily browse content at the best possible.

A quick overview of the term 'Disability'

According to Centers for Disease Control and Prevention (CDC), “a disability is any condition of the body or mind (impairment) that makes it more difficult for the person with the condition to do certain activities (activity limitation) and interact with the world around them (participation restrictions).”

It is important to note that while referring to the people with disabilities, it is preferable to use language that focuses on their abilities rather than their disabilities. Terms like ‘handicapped’, ‘able-bodied’, 'physically challenged’, and ‘differently abled’ discourage the disabled. Therefore, it is important to keep the language in mind when communicating with or about people with disabilities.

Types of Disabilities

There are numerous types of disabilities that can affect a human being. Some of these conditions are more common than others. However, disability is not black and white, which means that two people with the same type of disability may not have the same experiences. Following are the disabilities that may affect different people in different manners.

Dark blue square boxes with different disabilities

Visual - Visual disabilities include mild or moderate vision loss in one or both eyes to complete loss of vision in both eyes. It involves a lack of sensitivity to certain colors, color blindness, and sensitivity to brightness. For example, color blindness, low vision, and blindness.

Cognitive, learning, and neurological -  Cognitive, learning, and neurological disabilities encompass neurological, behavioral as well as mental health disorders. For example, attention deficit hyperactivity disorder (ADHD), autism spectrum disorder, mental health disabilities, memory impairments, perceptual disabilities, and seizure disorders.

Auditory - Auditory disabilities can range from mild to moderate hearing impairment in one or both ears. Even partial loss or difficulty can contribute to auditory disabilities. For example, hard of hearing and deafness.

Physical - Physical also known as motor disabilities are weaknesses and limitations related to muscular control. These include involuntary movements that you cannot control. For example, amputation, arthritis, paralysis, and repetitive stress injury.

Speech - This disability includes the inability to produce speech that is recognizable by other people or software. Generally, the volume or clarity of speech makes the recognition difficult. For example, muteness, dysarthria, and stuttering.

Common Web Accessibility Myths 

In simple terms, web accessibility implies that the websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, web accessibility helps people to perceive, understand, navigate, and interact with the web. 

However, in this contemporary era, website accessibility is just a buzzword and not everyone in the present times has a firm grasp on what that term means. There exist web developers with little or no experience in terms of accessibility and the lack of accurate information about the best ways to quickly and easily identify accessibility problems. As a result, there are still a lot of myths and misconceptions about accessible websites and the people who use them.

Here are some of the most common myths that run around web accessibility. Let's burst them and face reality. 

A guy looking into telescope and 6 yellow circles comprising myths

Myth #1: Accessible sites are ugly

The first and foremost myth which prevails over all the other benefits of web accessibility is the mindset that accessible sites are ugly. There are people who still believe that accessibility places too many restrictions on the look and feel of the website. However, times have moved on and so has technology. In other words, internet space holds a collection of websites that are beautiful, media-rich, interactive, and accessible websites. 

Myth #2: Web accessibility is a solo job

A lot of people think that web accessibility is a solo job that needs to be performed by the Developer. However, falling all the accessibility duties into the remit of a developer is not right. Every individual who is associated with the website has to be responsible for accessibility.  Whether it is a content writer, a project manager, or even the CEO; everyone is required to be on-board to deliver accessibility effectively. 

Myth #3: Accessibility is all about burning a hole in your pocket

Well, the response to this myth is quite difficult to answer. There are basically two instances if you consider accessibility in your website. The first instance is if you are building a website from scratch, accessibility should not be expensive to implement. On the contrary, if you are implementing accessibility on a pre-existing site, it may take more people, and as a result, cost more in terms of ‘man-hours.’ Therefore, it is highly essential to think about accessibility at the very beginning of a project so as to reduce labor work and time in the future.

Myth #4: Accessibility is a prolonged process

Most of the websites dodge accessibility because they think accessibility holds nothing but a time disadvantage that they cannot afford to bear. However, considering accessibility at the very beginning of the project can help websites save their time and they don’t have to lose hours to fix their websites. Another way to help yourself with time crunch is to conduct an audit to identify key areas for improvement.

Myth #5: Unnecessary codes may lead to bloating

Websites are often afraid of the harm that the website may incur due to accessibility. There is a misconception that extensive code additions or unnecessary codes may harm the site and can lead to bloating. This is wrong as accessibility is all about developing a website in the right way and it can actually improve the SEO when produced correctly. 

Myth #6: Accessibility is subjective in nature

This is one of the biggest and unfortunate myths. No, accessibility is not subjective and by no means, any website is allowed to create discrimination against anyone with a disability. There are more than 650 million disabled people around the world and denying each of those people access to your website could be holding you back. Further, if you are a public sector organization, you are bound to follow the guidelines regulated by the new Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018. And if you’re anyone else, you need to adhere to the Equality Act 2010.

Convincing Reasons to Implement Accessibility

Apparently, the web has become an important part of our lives in such a short span of time. Accessing the web can help people to participate in a more active manner, thereby improving the life experience for all. Besides this, there is also the fact that the web offers one of the easiest ways to communicate and do business with people who suffer from a disability. However, the advantages of web accessibility aren’t limited to their immediate impact on people with disabilities, and some of them can even surprise you. 

Following are the many business and technical benefits that will help the website when you adopt web accessibility.

Blue background with a hand holding speaker

1. Better User Experience

User experience is more important than anything to ensure the success of the website. The concept of web accessibility is not limited to the successful access of the website, but it also means that the website offers a good user experience to the users. Accessible web design leads to better user experience regardless of the user's physical impairments. Therefore, approaching the website with accessibility in mind ensures that you are offering a good user experience across the board and are not causing friction for a portion of your audience.

2. Avoid discrimination and legal complaints

Apart from making sure that the website provides a good user experience to all users, make sure that the website is accessible to ensure that the site stays within legal requirements. The American Disabilities Act (ADA) was passed in 1990 with a view to protecting people living with disabilities from discrimination. The law is applicable to public and private spaces, building codes, transportation, telecommunication, government, and employment. Not to mention, the U.S. Department of Justice has concluded that the lack of accessibility for websites may be a violation of the ADA.

3. Wider Audience

Improving your website’s accessibility is the best thing to invest in. In other words, web accessibility represents an opportunity for businesses to design a website that’s accessible to everyone on the planet. As a matter of fact, the implementation of accessible web design can minimize the rate at which users abandon a site and can further increase the revenue. Moreover, web accessibility can help the organizations to reach more and more customers, increase customer satisfaction, and eventually gain a competitive edge over those organizations that don’t include accessibility features.

4. Improves SEO

Accessible sites and search engines go hand-in-hand. There are certain SEO best practices that can make the website even more accessible. For example, creating easy navigation, adding image alt tags, providing captions and/or transcripts for video, offers better functionality and usability that can easily be crawled by search engines, and offers a better user experience overall. In addition, web accessibility can help your site be more relevant, authoritative, and competitive in the SERPs (search engine results pages).

5. Increases usability

Usability is closely related to web accessibility. The objective of web accessibility is to make products, services, and environments more usable by people who suffer from a disability. Accessibility is often considered as an overlapping concept of accessibility which aims to improve a product or service’s ease of use and user experience. Subsequently, making your website navigable with a keyboard also benefits your broader user base. To be clear, fulfilling this requirement allows all users to easily locate the content they need.

Roadmap to Web Accessibility

After an organization makes a commitment to make it’s website accessible, it is important to follow a roadmap for the implementation of accessibility. Fortunately, web accessibility is not difficult to implement. We have put together a list of steps that will help your website to implement accessibility with ease.

Grey road map with 4 destinations

Initiate

First things first, the organization must align accessibility with the existing organizational approaches and communicate clear and measurable objectives with a view to engage stakeholders to support the plan. Further, discover and learn the current state of accessibility in your organization to discuss with the management. Set objectives in response to the problems identified with accessibility and organizational goals. Also, develop measurable objectives to address and fill the accessibility gaps within the organization’s web content, processes, and policies. It is often observed that lack of awareness is a frequent reason for lack of accessibility adoption. In other words, there are many people that may know little or nothing about accessibility and some may not appreciate that their role has an impact on website accessibility. Therefore, a general introduction to accessibility is required to create awareness and building enthusiasm for the task. Key stakeholder and management support will help with prioritization clashes, access to resources, and communication activities. Make sure to use the business case to help secure support from these groups.

Plan

Planning is the beginning of the implementation of the idea that was initially put in writing. It is highly essential to carefully plan the web accessibility policy to capture the goals and targets. A policy may be a compendium of roles and responsibilities, content preparation processes, quality assurance, infrastructure, and reporting. Budgeting and planning go hand-in-hand and it is equally important to create a budget for implementing accessibility. As a matter of fact, accessible sites don’t necessarily cost more money or time than inaccessible sites. However, there does exist a difference in cost. That is to say, accessible sites require money to train the team or build alternative materials like transcripts or translations. Therefore, it is a wise move to consider all potential costs from the beginning and factor them into the production budget. In case you have a very small budget, then consider the least expensive options that will allow the widest possible audience to access your site. 

Implement

Create accessibility implementation throughout the process to minimize overhead and improve the overall quality of the final outcome. Organizations need to develop the accessibility skills of everyone involved in the implementation process, including designers, developers, content creators, and managers. It is highly essential to integrate the goals from your accessibility policy within other organizational procedures and policies. This not only helps to spread the responsibility but also ensures that accessibility is considered as an integral part of everyday activities. Convey the assignments to the team members and ensure that the later knows what is expected of them. Also, make sure that everyone has the resources to aid them with their respective tasks. Organizations can prioritize the accessibility objectives so that you can achieve them more effectively. Examples of prioritization include:

  • Begin with the issues that can be fixed easily to help build motivation in the team.
  • Prioritize the development of accessible templates and components to support the creation of accessible content.
  • Prioritize visual design to synchronize with an on-going re-branding activity within the organization.
  • Prioritize recruitment or procurement policies to support anticipated hiring and acquisitions.
  • De-prioritize issues that are related to tools or systems, such as a content management system (CMS). The reason being,  they are expected to be changed soon anyway.

Sustain

Regular reviews of content, organizational processes, and resources will help in identifying the issues, thereby ensuring that accessibility remains a priority. It is important to coordinate closely with website owners to identify if there is room for improvement. This may include daily content publishing and maintenance activities, as well as broader redesign and development efforts. Since the content of the website is dynamic, make sure that regular accessibility reviews are performed. Accessibility checks can be included in the publishing process in order to reduce the risk of issues occurring. Besides this, consider the technologies that your organization aims to support and ensure to track functionality that changes each version. This may include the baseline browsers and assistive technologies you support and also the authoring tools such as the content management system (CMS). The improvements related to accessibility should be communicated on the website in the Accessibility Statement. Lastly, make your website user-friendly so that the user doesn’t find it difficult to submit the feedback on accessibility which can be used by the organization when considering future improvements.

Evaluating Web Accessibility 

It is always a good practice to implement web accessibility, however, it is equally important to evaluate accessibility to ensure that the websites and applications meet accessibility requirements. The process of evaluating accessibility should be early and throughout the development process so that it is easier to address them. The process of evaluation can be done using several accessibility tools. You can further use the filters to narrow down the list to the types of tools you are interested in.

Page Titles

Page titles help users to know where they are and help them move between pages open in the browser. The very first thing a user sees when s/he moves to a different web page is the page title.

What to check for:

  • Examine if there exists a title that adequately and briefly describes the content of the page.
  • Examine that the title is distinct from other pages on the website.

Image text alternatives ("alt text")

Text alternatives ("alt text") are used to convey the purpose of an image. It may include pictures, illustrations, charts, etc. Generally, text alternatives are used by people who do not see the image. For instance, people with visual disabilities can hear the alt text readout; and people who have turned off images to speed download can also see the alt text.

What to check for:

  • Every image has alt with an appropriate alternative text.

Headings

Web pages contain visual headings that divide the information into different sections. Generally, the heading text is bigger and bold. To make this work for everyone, the headings are required to be marked up.

What to check for:

  • The page consists of a heading and there should be at least one heading on every page.
  • All content that looks like a heading is marked up as a heading.

Contrast ratio ("color contrast")

  • Contrast ratio is beneficial for people who cannot read the text if there is not sufficient contrast between the text and background. For instance, light grey text on a light background.
  • High contrast (dark text on a light background or bright text on dark background) is required by older people with visual impairments who lose contrast sensitivity due to aging.
  • On the contrary, for some people with reading disabilities such as dyslexia — bright colors are not readable. Hence, they require low luminance.

What to check for:

  • Web pages should also have a minimum contrast ratio of at least 4.5:1 for normal-size text.

Resize Text

Some people need the enlarged text in order to read it. Also, some need to change other aspects of text display such as font, space between lines, and more.

What to check for:

  • All web content gets larger.
  • The text doesn't disappear.
  • Text, images, and other web content do not overlap.
  • All buttons, form fields, and other controls are visible as well as usable.

Moving, Flashing, or Blinking Content

Moving, flashing, or blinking content consists of carousels, ads, videos, auto-updating stock tickers, scrolling news feeds, and more. People with attention deficit disorder or visual processing disorders require the power to control the moving content.

What to check for:

  • Examine if there is any moving, blinking, or scrolling information that starts automatically and lasts more than five seconds.
  • Examine if there is any auto-updated information.
  • Ensure that no content flashes or blinks more than three times in a second.

Multimedia (video, audio) alternatives

People who suffer from some kind of hearing impairment or are deaf may not be able to access the information in podcasts or other audio unless it is provided in an alternative format. For example- captions and text transcripts.

What to check for:

  • Transcripts are easily found near the audio/video itself.
  • Check if there are captions in the specific language.
  • Visual information is provided to people who cannot see the video.

Keyboard access and visual focus

Most people feel difficulty or simply cannot use a mouse and therefore they rely on the keyboard to interact with the web. Such people who are blind or have mobility impairments rely on the keyboard commands such as voice input.

What to check for:

  • Examine that you can tab to all the elements, including links, form fields, buttons, etc.
  • Examine that you can tab away from all elements that you can tap into.
  • Examine that the tab order follows the logical reading order
  • Examine that the focus is clearly visible as you tab through the elements.
  • Examine that you can do everything with the keyboard and you don't need the mouse to activate actions or any other functionality.
  • Examine that after you tab into a drop-down list, you can use the arrow keys to move through all the options without triggering an action.
  • Examine that when images are links, they have clear visual focus and can be activated using the keyboard.

Conclusion

From the article above, you should have acquired a helpful high-level overview of accessibility, incorporating why it is important, and how you can get yourself fit into the workflow. Subsequently, it is highly recommended to have web accessibility at the back of your mind when building a website to ensure that everybody has the access to your website. Recently, web accessibility has become more important as the web begins to grow, and more and more people use it in their everyday lives. Therefore, making your website accessible to everyone will not only open the door to a wider range of users but also go towards making the web accessible for everyone.

Looking for a way to start your first-ever journey to web accessibility, ping us at [email protected] and our industry experts will assist you.
 

Aug 05 2020
Aug 05

At the time of this writing, it’s over a month since Drupal 9 was released. While the Drupal community has grown over the last decade, thanks to the innovative release cycle and building bridges to other communities, Drupal 9 release festivities were not as grand as I remember for Drupal 8. A significant reason for this is the COVID-19 pandemic that we all are facing right now (I hope you’re okay reading this in the future). But there’s a bigger point here. Drupal upgrades are not exciting anymore. 

Stay with me for a minute. Drupal 8 will remain the most exciting Drupal release for the foreseeable future. It was an interesting time while we rewrote Drupal (almost) from the ground up. We did that using years of learned best practices and PHP community support. As a result, Drupal is more reliable and dependable now than ever before in its two decades of existence. On the other hand, Drupal 9 release was almost boring. The only thing we did was remove the deprecated code.

Understanding the Drupal release cycle

That’s a big deal here. As a community, we are approaching our tweens and deciding how best to lay our foundations for the long haul ahead. This is reflected in how we release Drupal. Drupal 1 through 4 were the only supported major versions throughout their lifetime. Drupal 5 support lasted well into the Drupal 6 lifecycle and this repeated for Drupal 7, 8, and 9. Due to an interesting combination of circumstances, Drupal 7’s support exceeds even Drupal 8.
Image Source


We are innovating by introducing new features on a schedule. Read more about the release cycle here. At the same time, we are keeping Drupal maintainable for the long-term. It’s of little consequence that not all Drupal 8 code will run on Drupal 9. The important thing is that most of the code will. In fact, with the predictable release schedule of deprecations and new features, a well-maintained site might have had nothing to do when upgrading to Drupal 9. We saw this with a flurry of tweets and other social media updates announcing that people have upgraded their sites to Drupal 9 within hours of release.
Image Source

Understanding major releases

Starting with Drupal 9, all major releases will be the same as the last minor release in the previous version, except for the absence of deprecated code. This means Drupal 9 is identical to Drupal 8.9 to everyone–editors, site builders, and developers (as long as they don’t use deprecated functionality). That will also be the case for Drupal 10 and Drupal 11. And this will go on until we see a significant shift in the PHP programming paradigm that warrants another Drupal 8 style rewrite (will it be generics or async programming or something else we haven’t yet imagined?)

Enough theory, what does this mean for you?

Based on everything we talked about above, let’s get down to business.

  • Are you running Drupal 6 or earlier?
    • Migrate right now.
  • Are you running Drupal 7?
    • You have until Nov 28, 2022, to migrate to Drupal 9. Yes, it would be best if you don’t plan to migrate to Drupal 8 right now*.
  • Are you running Drupal 8.8 or earlier?
    • Upgrade to Drupal 8.9 right now.
  • Are you running Drupal 8.9?
    • You’re good until November 2021. Evaluate your site’s contrib and custom code to plan for Drupal 9 upgrade when possible.
  • Are you running Drupal 9?
    • You have reached your destination.

* There are caveats to every situation. I always try to make sure that I never generalize.

Planning the upgrade to Drupal 9

You are on Drupal 8 and want to upgrade to Drupal 9? There are lots of resources to help, but I suggest you start by installing the Upgrade Status and Upgrade Rector modules. Chances are you won’t need to look elsewhere.

Upgrade Status module can check for Drupal 9 compatibility information for each of the modules you use (including custom modules) and, along with Upgrade Rector, generate patches that you can use on Contrib and custom modules. As we see here, many Contrib modules already have Drupal 9 compatible releases. Most of the remaining modules only need minimal changes to become compatible.

Personally, I have only upgraded one site to Drupal 9 so far. There are a few more sites I can upgrade to Drupal 9 right now if I switched to dev releases of certain modules I use. But there’s no good reason for me to hurry. My Drupal 8.9 site is as good as Drupal 9 in every way, except the amount of code, PHP has to load (and that’s not a major problem thanks to Opcache). We will only see new features in Drupal 9.1 in December 2020, and I can wait until then for the Contrib modules to have proper releases.

Understanding Drupal versioning

If you have used Drupal for some time, you might know that you recognize compatible Contrib modules by their version. For example, Pathauto 7.x-1.0 is for Drupal 7 only. It won’t work on Drupal 6, nor Drupal 8. Similarly, token 8.x-1.2 would not work on Drupal 7.

With Drupal 8, the community adopted semantic versioning for the core. This has now rolled out to even Contrib modules. This means that we would be dropping the familiar versioning system that we have used for over a decade in favor of semantic versioning. Don’t worry, existing major releases are fine. That means you would still see new releases coming out for Pathauto 8.x-1.x branch, but if it were ever to create a new major release, we would probably see Pathauto 2.0. Actually, we might see Pathauto in Core (I hope), but that’s a different story.

Some of the modules have adopted this and see new releases in semantic versioning style (devel comes to mind). Other modules are still on their existing 8.x-y.z release scheme because they don’t need to change anything. And that’s another sign of maturity in how we write code for Drupal.

Conclusion

Drupal has long since moved from being adventurous and made efforts to become more reliable and robust in serving the people, as it should. The Drupal community has long stood by its slogan: Come for the code, stay for the community. This shift in thinking about Drupal’s release cycle is a testament to that fact: Drupal is not built in a vacuum. It is built, foremost, to serve the people who would use it.

Aug 05 2020
Aug 05

In the current environment, search engines are an essential audience. 

While it’s widely understood that attracting the attention of the major search engines, is key to a website’s overall effectiveness, too often, Search Engine Optimization is viewed as a task that can be checked off of a list once completed.

SEO needs to be viewed as an ongoing activity, with a consistent monitoring of metrics, along with a focus on learning and adjustments to strategy based on the intelligence hidden in the data.

Why SEO is Never Finished

Volumes of readily available information from thousands of different websites is now available online. Thousands of organizations compete for attention, which means that effective Search Engine Optimization (SEO) strategies need to constantly stay ahead of what the competition is doing and aligned with search engines’ most up-to-date methods of crawling websites for relevant information. 

SEO strategies are designed to improve organizations’ rank on the Search Engine Results Pages (SERP), which follow the search for specific keywords or queries. Appearing near the top of a Google or Bing SERP is essential for driving website traffic and conversions.

A recent article in Search Engine Journal reported that sites which appear on the first page of a Google search receive, on average, 91.5 percent of the traffic share. 

Great SEO is also aligned with great UX and web accessibility. The search engines favor websites that are streamlined for user accessibility and enabled for mobile.While the early days of SEO amounted to efforts to game the search engines, the search algorithms have become quite intelligent and now favor relevant content and well structured sites. 

How to Perform Continuous SEO on a Drupal or WordPress Website

1. Monitor and Collect Data

The first step in the SEO process is to monitor and gather key performance indicators (KPIs). . KPIs indicate how a website is performing relative to specific metrics, and help to gauge a site’s status relative to competitors. 

Search Engines such as Google and Microsoft Bing provide free and easy-to-use tools to help gather and collect important data and generate reports on the following website KPIs.
 

Key Performance Indicators
  • Number of Users: This metric is defined as the number of visitors who have initiated one session on a website. A session is a group of user interactions within a given timeframe. A single user can generate multiple sessions if they return to the website at a later time and a single session can also involve multiple views on pages and interactions, depending on the behavior of the user.
  • Number of Views: The number of views or page views refers to  the total number of times your website is viewed. One user session can generate multiple views and this metric indicates which pages are generating the most views. 
  • Organic Sessions: Organic Sessions refer to visits generated by users that are coming from an actual  search engine query, vs.visitors that found your site via paid advertisements.This metric helps gauge SEO performance by indicting the amount of traffic is generated by SERP results.
  • Bounce Rate: Bounce Rate refers to the percentage of visitors who exit the site after viewing only one page. Of course, sometimes visitors leave because they find exactly what they need on the one page, but the goal is to maximize interaction and the value of the website, and that’s indicated by a low bounce rate. Bounce rate is an important metric that reflects the quality of your website and individual web pages.
  • Pages Per Session: The pages per session metric indicates the average number of pages a user visits for each session. This metric is a great indicator of the ease of navigation.
  • Average Session Duration: The average session duration is an important indicator of the quality of content. The longer a visitor spends on the website the greater chances of the visit being converted into a lead. 

2.  Keep the Sitemap Updated

A sitemap is an important file that provides critical information about the pages, videos, images, assets, and other files that are on a website. Sitemaps help search engines to crawl the website. They also provides an indication of which webpages and files are most important, and this key to prioritization on the SERP. Having a sitemap that is continuously updated helps search engines quickly detect and crawl new pages. The sooner that search engines can find your webpage the sooner that page can generate more organic traffic.

Free tools provided by search engines, such as Google Search Console or Bing Webmaster, help to monitor websites for website indexing issues, coverage, or sitemap crawl issues. There are plenty of modules available for Drupal websites to build and automatically update sitemaps that can be submitted to Google Search Console and Bing Webmaster tool. Similarly, WordPress websites also have the option to install plug-ins that can also create and automatically update sitemaps.

3. Design for Web Accessibility

Continuously designing and updating your website for accessibility can also have a significant impact on SEO. Here are three quick  facts concerning the SEO and web accessibility connection:

  • Search engines also scan the alt text designed for the screen readers that visually impaired users rely upon.
  • Both screen readers and search engines scan title tags.
  • Both screen readers and search engines rely on meaningful html header hierarchies. 

Attention to SEO principles and guidelines not only results in higher search engine rankings, it also ensures that your site is accessible to a broader audience of users with disabilities. 

4. Keep Track of Keywords

Identifying and tracking relevant keywords on a website can help to gauge the performance of the content relative to search page rankings. Tracking keywords will also reveal opportunities that can be targeted with new content. 
A focus on keyword rankings can also help in building content strategy and that is relevant to the target audience.

5. Pay Attention to Site Speed

Site speed is also a major contributing factor in SEO. Faster load times are a factor is search page rankings, and continually monitoring for site speed will help quickly detect problems before they can negatively impact rankings.
 

Best Practices for Optimizing Site Speed
  • Reduce Image Size: Reducing Image sizes can help improve page loading times and performance.
  • Minify CSS, JavaScript, and HTML: Optimize page code by removing unnecessary spaces, commas, and other characters.
  • Minimize Redirects: Minimize the number of unnecessary redirects that are needed to reach a page.
  • Enable Compression: GZIP Compression can greatly reduce page loading times.

 

A Constant Focus on SEO

As search engines are becoming increasingly intelligent and the competition for high page rankings intensifies, a sharpened focus on SEO is an essential  exercise for staying in the game, with a competitive edge and meaningful insight into audience behavior.

At Promet Source, SEO is integrated into our multi-faceted approach for developing great websites. Looking for tips and techniques to improve SEO and build in continuous monitoring for optimal impact? Contact us today.

Aug 05 2020
Aug 05

We can’t wait to see you all online! Join us Oct 14-17, 2020 for the first-ever virtual BADCamp. Don’t wait: register now! 

With no travel arrangements to make, setting yourself up for an epic time at BADCamp is as easy as letting us know you’re attending. Consider all the other ways to get involved:

Session Submission Is Open

Help us make this the best BADCamp yet! 

We know the virtual platform can offer a unique opportunity to truly get the most forward-thinking Drupal knowledge out there, but we need your innovative brains to make it happen!

Tell us: 

  • How are you leveling up your Javascript skills and making the most radical websites?
  • How has COVID-19 affected agency management? 
  • What does the Drupal community need to know? 
  • What DevOps lessons have you learned? 
  • What accessibility mistakes do you see everyone making? 
  • What does the project manager of the future need to know? 

We’re waiting on the edge of our seats to hear your answers to all these and more. This year we are introducing the Drupal for Communicators (Marketing) track as well as bringing back the Beginner and Advanced Tracks for Drupal.

With online camps being more accessible and recordings on demand with Drupal.TV, we would love for folks to submit unique content to BADCamp. If you have any questions please contact an organizer.

Submit a Session

We welcome those from all levels of expertise, background, gender, ethnicity, sexual identity, religion, age, and ability. Our community is diverse and we know that Drupal can benefit when everyone is included.

What’s Coming Next!

Summits

This year, BADCamp is offering one-day summits for Higher Ed, Front-end, Backdrop, DevOps,  and Nonprofit technology. If you want to dive deep into the issues that matter most to you and collaborate with your peers, these are the place for you!

Trainings

Trainings will be available for registration soon, so stay tuned. With workshops on Composer, Analytics, project management, migrations, and more, BADCamp promises to bring you to the next level in your career path.

Volunteer Opportunities

Be sure to look out for our call for volunteers. BADCamp just doesn’t work without our community’s energy and support, so get ready for what we create together!

Aug 05 2020
Aug 05

Last month at DrupalCon Global, Dries Buytaert, the founder of Drupal, announced that a major focus of Drupal 9 will be improving the user interface and user experience of the platform - for all personas. Two of the five D9 Strategic Initiatives have been dedicated to making this happen. The “New Front-End Theme Initiative” or user interface (UI) for Drupal, also known as the Olivero Theme, covers the end-user experience. The “Admin UI & JavaScript Modernisation Initiative”, also known as the Claro Admin theme covers site builders, managers, and administrators.

A critical component of improving the experience for all users is accessibility. In this episode of Tag1TeamTalks, Michael Meyers (Managing Director, Tag1) talks with Kat Shaw (Senior Front-end Developer, Lullabot), a CPACC-certified accessibility expert working on both initiatives.

Join us for a tour and overview of both themes, get unique insight into the development process and inner workings of strategic initiatives, learn about the accessibility improvements, and find out how all these benefit you and your Drupal sites (hint: your sites become a lot more accessible, for free, with little effort on your part).

Both initiatives carry over from D8 and have been under development for some time. In Drupal 9.0, Claro, the new admin theme, is available in beta as an optional theme you can enable today. It is slated to become the default admin theme in the upcoming D9.1 release. You can also try the new front-end theme, Olivero, hands-on, by downloading and installing it from Drupal.org. It will likely be part of Core in the upcoming D9.1 release as an optional theme that you can enable, and will hopefully be the default theme in Drupal 9.2.

[embedded content]

Links

Kat’s links
Lullabot bio
Kat's Twitter
Kat's LinkedIn

Olivero and Claro themes
Demo: (built with Tugboat)
Olivero project
Olivero ‘Add new Olivero frontend theme to Drupal 9.1 core and eventually make it the default’
Claro Project
Claro ‘Roadmap to stabilize Claro
Drupal Current Development Cycle

Live Captioning tool
Website
Tool
Code repo
DrupalCon 2020 ‘Live Captioning’ session

Planta app: Keep your plants alive

Photo by Steve Johnson on Unsplash

Aug 05 2020
Aug 05

Drupal 7 website owners might have heard, perhaps not even once, that their websites are getting outdated.

With the recent release of Drupal 9, this topic is gaining special momentum. However, some business owners are reluctant to upgrade from Drupal 7 to Drupal 9. They need other solutions and alternatives.

Let’s list these options here. If you are among those who keep asking “should I upgrade from Drupal 7 to Drupal 9?”, this article featuring the upgrade alternatives will be of particular interest for you.

How long will Drupal 7 be supported?

Software products are released in new versions and then the old ones gradually go unsupported. In case with D7, the community support has been officially extended until November 2022. The team decided to do this because of the pandemic-related difficulties that businesses are now facing. Just the time to plan an upgrade to Drupal 7 to Drupal 9 (or choose an alternative solution).

After the end of support, D7 sites will stop receiving bug fixes updates, including ones in the security sphere. This may lead to security holes and malfunctions of a site, which is one of the reasons why upgrades are needed.

Why is Drupal 7 really outdated?

After D7, Drupal has quickly rushed ahead in its digital capabilities. All Drupal 8 benefits for business are huge, and the 9th version continues this forward movement. All those to decide to upgrade from Drupal 7 to Drupal 9 will get it all.

Websites have become much easier to use for content editors, friendly to mobile devices, integration-ready, multilingual, fast, adhering to the website accessibility standards, and so much more. They are also extremely easy to upgrade (beginning with a D8 to D9 migration). Compared to Drupal 7, they now have a modern architecture and components, which results in faster work, cleaner code, and better maintainability.

Although it is recommended to upgrade your Drupal website from D7 to D9, we respect those who are reluctant to upgrade. See which upgrade alternatives are available.

Alternatives to an upgrade from Drupal 7 to Drupal 9

Relying on commercial support

There is an alternative to stay with Drupal 7, and when it stops being supported, sign an Extended Support (ES) agreement. There is a D7ES (D7 Vendor Extended Support Program). It is meant to provide security support and fixes for the D7 core and contributed modules by a group of approved vendors. The updates and fixes will be shared publicly, but becoming an official customer will give you a big advantage. This will include prioritizing your modules, development, website maintenance, help from experts, and more.

D7 commercial support will help you have a good night’s sleep for a few years, but this is not a very future-oriented solution. You should know you are freezing your site in the state it has in D7, while the digital trends are moving ahead.

Moving from Drupal 7 to WordPress

Some customers choose to move from Drupal to another free CMS — WordPress — based on their personal or business preferences. For example, their editorial team is used to working with WordPress or their development team is made up of WordPress developers. Drupal and WordPress have always been competing CMSs, with intuitive interfaces being named among the best WP benefits, and the ability to create really complex technical solutions — among Drupal’s.

Converting Drupal data to WordPress is always challenging. However, we have both Drupal and WordPress experts on the team, so moving from D7 to WordPress is within our area of expertise.

Among prominent examples of Drupal to WordPress that we performed are an online education website, a large portal, a security news platform, and more.

WordPress CMS

Moving from Drupal 7 to Backdrop CMS

There is an alternative to switch from Drupal 7 to Backdrop CMS. This is an open-source CMS that has been forked from Drupal 7. It has a built-in upgrade path for Drupal 7 sites, which should make the move pretty easy. Backdrop has 60+ included modules and 500+ total add-ons available. It is easy to use for content editors who have got used to D7.

Backdrop sites are responsive to mobile devices, so they are displayed well on smartphones, tablets, and so on. While D8 and 9 are focused on delivering content across multiple channels (mobile devices, front-end frameworks, etc.), Backdrop offers a traditional approach and delivers content via HTML.

However, you shouldn’t choose the Backdrop alternative if you plan to go to Drupal 9 some time in the future. There will be no upgrade path to do this.

Backdrop CMS

Staying on Drupal 7 as is

The final alternative to upgrading from D7 to D8 is just leaving it all as is and staying on Drupal 7 without any support agreement. But this alternative is not really an alternative.

What will happen on the Drupal 7 end-of-life day in November? Of course, websites will not break the same day. However, the lack of community support is an important argument for many organizations. No one wants an unprotected website that can be hacked or start malfunctioning at any time, moreover, a website that is lagging so far behind the digital trends that have arrived in the last decade. That’s why there is no fooling yourself — staying on Drupal 7 without support is a bad idea.

Let us help you with any alternative to a Drupal 7 to Drupal 9 upgrade!

Whatever you choose, the Drudesk website maintenance and support service is here. Drupal website upgrades, CMS changes, and long-term support are our daily routine. Contact us for a free consultation and discover what could be the best solution in your case as an alternative to upgrading from Drupal 7 to Drupal 9. We will put this alternative to life smoothly and reliably!

Aug 04 2020
Aug 04

argument-open-source Like many developers, some of our first websites were built on the backbones of WordPress. It’s the hyper-popular king of content management systems. It has name recognition, an overflowing user base, and plenty of third-party integrations that help cut your development time. But, over the years, we’ve migrated almost exclusively to Drupal. So why did we switch? What is it about Drupal that leaves developers drooling? And why would anyone pick Drupal — which has around 1.3 million users — over WordPress —which has over 400 million users? Today, we’re going to compare David to Goliath. Why is Drupal, the third most active CMS behind WordPress and Joomla, a good choice for businesses looking to build a refreshing, impactful, and feature-rich website?

UNDERSTANDING THE CORE DIFFERENCES BETWEEN DRUPAL AND WORDPRESS

By far, the most significant difference between WordPress and Drupal is the overall development need. WordPress is simple. There are hundreds of thousands of third-party plugins that you can leverage to build an entire website with virtually no coding or developing knowledge. And, that’s the single biggest reason that WordPress is so massive. Anyone can build a WordPress site. It’s easy. Drupal requires development. If you want to build a Drupal website, you’re going to have to hire some developers. So, naturally, Drupal has fewer overall users. But, it’s essential to make that distinction. Drupal is built for businesses, public entities, and enterprises. WordPress is built for your everyday website. It’s important to keep this main difference in mind. It’s this difference that resonates throughout these core pillars. And, it’s this core difference that creates pros and cons for each platform.

DRUPAL VS. WORDPRESS: SECURITY, FLEXIBILITY, AND SCALABILITY

We consider security, flexibility, and scalability to be the three primary pillars of a CMS. An amazing designer can make a fantastic template or theme regardless of the CMS. And ease-of-use is relative to your plugins/modules, familiarity with the platform, and overall development capabilities. So those are both highly subjective. Security, flexibility, and scalability aren’t subjective; they are what they are.

SECURITY

WordPress has a security problem. Alone, WordPress accounts for 90% of all hacked websites that use a CMS. There’s a tradeoff that comes with leveraging third-party plugins to build websites. You increase your threat landscape. WPScan Vulnerability Database shows 21,675 vulnerabilities in WordPress’s core and with third-party plugins. This security vulnerability issue has been an ongoing headache for WordPress from the start. If we do a play-by-play, year-over-year of WordPress’s history, we see an ongoing and consistent security issue:

  • 2013: 70% of the top 40,000 most popular WordPress websites were vulnerable to hackers
  • 2014: SoakSoak compromises +100,000 websites, a massive DDOS attack hits 160,000 websites, and All In One SEO Pack puts +19 million sites at risk.
  • 2015: A core vulnerability puts millions of websites at risk, Akismet opens millions of websites to hackers, and YoastSEO puts over 14 million websites in hackers’ crosshairs.
  • 2016: At this point, millions of hacks are happening every week across plugins. Check out this WordFence weekly update during this period.
  • 2017: The hacks continue. The average small business website using WordPress is attacked 44 times a day at this point, and WordPress websites are 2x more likely to be hacked than other CMS.

The list goes on. Year-over-year, more vulnerabilities happen across WordPress. And this is an important point. WordPress has subpar security by design. It’s the tradeoff they made to build an ecosystem that doesn’t require development. We aren’t saying that the core of WordPress is inherently security-stripped. It’s not. But, given the scale, scope, and third-party-fanatic nature of the platform, it’s weak on security by nature. Drupal, on the other hand, is the opposite. Websites require development time, each website is customized to the user, and building a website takes time and patience. The tradeoff is better security. Drupal has built-in enterprise-scale security, and you don’t rely on a hotchpotch of third-party applications to build your website’s functionality. There’s a reason that NASA, the White House, and other government entities use (or used) Drupal. It has better security. We want to take a second to make the distinction. WordPress has a secure core. We would argue that Drupal has a more secure core. But the difference isn’t massive. WordPress’s security vulnerabilities are a product of its reliance on third-party applications to make a functional website.

FLEXIBILITY

WordPress is more flexible than Drupal to some users. And Drupal is more flexible than WordPress to some users. That may sound complicated. But it comes down to your development capabilities. Drupal has more features than WordPress. Its core is filled with rich taxonomies, content blocks, and unique blocks than WordPress. But, if you aren’t experienced, you probably won’t find and/or use many of these functionalities. On the surface, WordPress has more accessible features. At the core, Drupal is the single most feature-rich CMS on the planet. So, for businesses (especially public entities and larger enterprises), Drupal has a more robust architecture to tackle large-scale projects that have hyper-specific needs. For small businesses and personal website owners, WordPress is easier to use and requires far less development experience to tap into its functionalities, features, and flexibility.

SCALABILITY

Drupal has better scalability. This one isn’t a competition. Again, this comes down to the dev-heavy nature of the platform. To scale WordPress websites, you add more plugins. To scale Drupal websites, you develop more. There’s a key practical difference here. Drupal modules, taxonomies, and content blocks all exist in the same ecosystem. Each WordPress plugin is its own micro-ecosystem. So, with WordPress, most users are stringing together a ton of third-party ecosystems in an attempt to create one overarching website. Also, Drupal is built for enterprise-scale projects. So there’s backend support and a large landscape of community support around large-scale projects. WordPress is a catch-all CMS that has a little of everything. If WordPress is a Swiss army knife, Drupal is a custom, hand-forged bread knife — explicitly designed to help you scale, slice, and butter larger projects.

ARE YOU READY TO DEVELOP YOUR PERFECT DRUPAL WEBSITE?

At Mobomo, we specialize in Drupal development projects. Our agile-based team of top-level design, development, and support talent can help you launch and scale your website to fit your unique needs. From NASA to Great Minds, we help private and public entities build dreams and execute visions.

Contact us to learn more.

Aug 04 2020
Aug 04

What’s the secret sauce to a successful website? Well, there are more than 10 factors I can think of right off the bat. Like an attractive design, page-load speed, quality of content, marketing efforts and more.  One significant yet often overlooked element for a great user experience that drives a successful website is an intuitive navigation. Drupal 8 has a great set of modules to improve the navigation structure of your website. We have curated a list of top Drupal 8 (and 9) modules that enable easy and intuitive website navigation. Read on to find out.

drupal modules


A good website navigation lets site visitors know exactly where to get their information from as soon as they land on your website. Conversely, bad website navigation damages your rate of conversions and increases bounce rates. A website with attractive design does not always mean that navigating through it is intuitive. I have seen websites with ordinary designs with great navigation structures. And I keep going back to them because I know I can get what I need without scampering all over the place. According to CrazyEgg, the thumb rule is that it shouldn’t take more than 3 clicks for your user to find what they need.

Elements for an Intuitive Website Navigation

Your website visitors should be able to navigate from one page to another smoothly without getting distracted or confused. Distracted or confused users will leave your website before you establish a connection with them. Having a great design is good but if your visitors are not able to find your contact form, there is no point, is there? So, what makes up for a good navigation structure? 

1.    Main Navigation Bars 

This is the most crucial navigation element of a website. It is a horizontal (sometimes vertical) bar that lists links to point visitors around your website. A good main navigation bar needs to be simple, short, consistent, helpful, and catchy.

main-navigation-bar


2.    Breadcrumbs

These helpful navigational aids help site visitors to identify where they exactly are. They are a trail of links that starts from the parent page and ends with the current page, usually separated with a “>” or a “/” symbol.

3.    Multi-column Menus (and Submenus)

A more complex website with tons of branches and sub-branches should use multi-column menus. Again, these menus should be simple and easy to navigate through. 

4.    Sitemaps

Often considered as just an SEO booster, Sitemaps are extremely helpful as a navigation aid as well. A typical Sitemap should display a hierarchical structure of the entire website.

sitemap


5.    CTA (Call To Action) Buttons

This is where all the action actually happens! Proper placement of these CTA buttons play an important role amongst others like color, font style, size, text, etc.

CTA Button


6.    Sidebars

This is a good place to add page-specific links to enhance the UX for your site visitors. Good sidebars should be simple, not too long, contain a CTA and be ordered appropriately.

sidebar menu


7.    Hyperlinks

Here we are talking more about internal linking than external. A hyperlink should be intuitive and lead the visitor to the page they expect (no surprises please). Although having internal links are good for SEO, don’t over-do it or you may risk losing their focus on the page.  

8.    Footers

Footers are easy to ignore and are often used only to display only copyright details. The myth that people don’t scroll till the end of a page is now busted. A typical footer should contain links that you are not able to display in the header or sidebar sections. It could also have your contact details as well as mailing list sign up mini forms.

footer

Top Drupal 8 (and 9) Modules for Intuitive Navigation

1.    Menu Block 

The Drupal 8 Menu Block module’s design follows Drupal’s standard tree navigation style but  provides more enhanced features than the ones offered in the core Menu modules. You can easily configure blocks of menu links and specify the level you want to start and end with. There is no limit to the number of levels you can display. You can choose to keep your child menu elements expanded. Some basic features of this module are ported to Drupal 8 core. The Menu block module also supports Drupal 9.

Menu Block


2.    Easy Breadcrumb

The Drupal 8 Easy Breadcrumb module works by extracting location segments from the current URL of the webpage. It offers tons of configurable options and can replace the existing Drupal breadcrumbs module. You can choose to completely hide the home page link or any other specified links. The Easy breadcrumb module supports Drupal 9 too!

Easy Breadcrumb


3.    Superfish

The Drupal 8 Superfish module is ideal when you have large and multiple layered, multi-column drop down menus. The module integrates with the jQuery Superfish plugin which is a highly versatile menu plugin that works for touchscreens, screen-readers and other keyboard interactions. It can be configured to add time delays on mouse-out, animations, hide and reveal menu links, adds arrows if submenus are detected, and much more. It is also Drupal 9 compatible.

Superfish module


4.    Sitemap

The Drupal 8 Sitemap module is simple, clean and easy to use. It can display the entire site structure in a clean hierarchical structure. You can also choose to generate and display RSS feeds for blogs and categories. The Sitemap module supports Drupal 9.

sitemap-module


5.    Menu Item Role Access

This module allows you to add access control to your menus. You can enable and disable menu items depending on user roles. The Drupal 8 Menu Item Role Access module allows you to enter the role field (optional) to the menu items. It also supports Drupal 9.

Access control module          Image source: Menu Item Role Access


6.    Cheeseburger Menu

If you thought hamburger menus were great, wait till you check out the Cheeseburger menu. The Drupal 8 Cheeseburger menu module comes with some great features and is not just limited to mobile view, it also works with desktop views and varied screen sizes as well. It gives you the flexibility to choose the menu items that you want to appear in the Cheeseburger menu and also edit the menu titles. If you’re using Drupal Commerce, you can choose to display the shopping cart or the store phone number in the menu. Taxonomies could be chosen as the structure for your Cheeseburger menu. The Cheeseburger menu module supports Drupal 9 too!

Cheeseburger Menu 
Image source : Cheeseburger menu

7.    Simplify Menu

The Drupal 8 Simplify Menu module lets you render menus in your Twig template. It allows customization of the menu markup that enables accessibility and compatible with standards. You can render your menu tree as an array in the twig template and have full control over on the menu’s array. This module does not support Drupal 9 yet.

Simplify-Menu Module

8.    Total Control Admin Dashboard

The Drupal 8 Total Control Admin Dashboard is a useful administrative navigation tool. It acts as a centralized hub for all administration tools. The dashboard displays admin panes and quick links to users, taxonomies, menus, content types, site stats, views panel panes and more. The views panel panes can be further customized. This module also works with Drupal 9.

Total Control Admin Dashboard

9.    Footermap: a footer site map

As the name suggests, the Drupal 8 Footermap module provides a sitemap for your Drupal website that can be placed in the footer block. It allows dynamic generation of a sitemap and can be easily configured to support translation and caching. You can choose the menus to display, set the menu level limit (child menus), enable menu heading, edit the CSS to match your site layout and much more. The Footermap module also works with Drupal 9.

Footer sitemap


 

Aug 04 2020
Aug 04

(Available for projects)

Joris Snoek

Freelance Drupal
Consultant & Developer

As a Drupal developer / consultant I think it is important to stay up-to-date on module releases, so that I don't code unnecessarily and manage projects as efficient as possible. So here's my batch of this month -all Drupal 9 compatible!

1. Super Login

Enhances Drupal's login features, with things like:

  • Logging in with email address as well as username;
  • More user friendly layouts;
  • Dynamic caps lock warning message displayed when typing login password;
  • .. and ~11 other great features.

https://www.drupal.org/project/super_login

2. Simple Like Button

I release this last month, of course this needs to be here (:

https://www.drupal.org/project/simple_like_button

3. Site Alert

Put up site-wide messages easily, for example: place an alert, a maintenance downtime message, or general information.

https://www.drupal.org/project/site_alert

4. Mail Login

If you use Drupal's core login features, users need to login with their username. This light weight module makes sure they can also use an email address, which prevents a lot of support calls.

https://www.drupal.org/project/mail_login

5. Editor Advanced Image

When you insert an image into content via a Rich text editor, maybe you want to add an extra class, title or id: for styling -or SEO purposes. This module will facilitate that for your Drupal website.

https://www.drupal.org/project/editor_advanced_image

6. Simple Password Reset

When a user requests a new password in your Drupal site:

  1. They'll get a login link emailed;
  2. If clicked, they'll get a screen with a 'login button';
  3. If they click that: they'll be redirected to their user edit page where they can change password.

This module make this process more easy:

  • It skips the login form and brings the user right to profile edit page.
  • It logs the current user out, so they don't get an access denied error, where Drupal defaults to otherwise.

These measures will prevents a lot of confusion and support calls, trust me.

https://www.drupal.org/project/simple_pass_reset

7. Nice login

When you implement a (custom) Drupal theme, the default user login page also needs styling, a lot of the times this is not done because of other priorities. Install this module and you'll be done in no time with styling the Drupal login form.

https://www.drupal.org/project/nice_login

8. Poll

Create and manage polls right away in your Drupal website. As mentioned on the project page, it's features include:

  • Per-poll options for anonymous voting;
  • Whether voting is required;
  • Open / closed polls;
  • A block to display the latest poll;
  • Views integration;
  • Performance: well integrated with render caching and BigPipe, uses Ajax for voting;
  • Fully multilingual, translate polls and choices.

https://www.drupal.org/project/poll

9. Environment Indicator

Very handy module that clearly shows in what environment your browser currently is, for example: local, test or live. So you're a lot less likely to perform actions in the wrong environment like clearing cache, managing content, change config, etc.

We've all been there, but don't have to be anymore now (:

https://www.drupal.org/project/environment_indicator

10. Modal Page

Modals windows are used for different use cases like:

  • Drawing attention to piece of information;
  • Collecting configuration options;
  • Warnings / messages.
  • Blocking the application flow until information required to continue is entered;

Drupal core doesn't have an option to show content in a modal window out of the box, install this module and you'll have.

https://www.drupal.org/project/modal_page

11. Smart Date

You can use the Drupal core Date field for all kinds of purposes, but it lacks some user-friendliness and functionality. This module enhances the Date field in these areas:

  • Admin UI;
  • All day events;
  • Zero duration events;
  • Formatting;
  • Performance.

https://www.drupal.org/project/smart_date

12. Search Index Wipe

The Drupal search index can be massive on sites with humongous amounts of content. Sometimes it's too much for the Drupal's default 'search purge' function to handle. That is where this module steps in: it can handle massive search index wipes.

https://www.drupal.org/project/searchindex_wipe

13. Entity Update

I think all Drupal developers have been through this: create a custom entity, implement it and content will follow. Then suddenly you'll need to change or add a field, so change the schema of your custom Drupal entity. To implement this change, you'll have to truncate all content of this entity type, which is kind of nasty if there is already 'production content'. This module can help you solve this problem.

https://www.drupal.org/project/entity_update

14. Weight

Add a Weight field to your Drupal content type, that you can use for sorting. For example: sort a view manually by the number filled into your Weight field, so not chronologically or alphabetically.

https://www.drupal.org/project/weight

15. Similar By Terms

Makes it easy for Drupal site builder to show for example 'Similar content' in a block, based on taxonomy terms.

https://www.drupal.org/project/similarterms

16. Easy Breadcrumb

Drupal's default breadcrumb function is kind of meh to implement, this popular module makes your breadcrumb life a lot easier.

https://www.drupal.org/project/easy_breadcrumb

17. Login Popup

Drupal's default login and register features are separate pages, which can interrupt user's workflow. This module provides them in a popup / modal window.

https://www.drupal.org/project/login_popup

18. Mobile Detect

While most responsiveness can be done with css / media queries, sometimes you just want to alter the page based really on a device, like hiding blocks on an a mobile device for example. This module implements the mobiledetect library for you to use in Drupal.

https://www.drupal.org/project/mobile_detect

19. View Mode Page

Drupal's core is equipped with View modes, to facilitate different layouts for the same content like:

  • Full pages;
  • Teasers;
  • Rss.

But within Drupal core it's not possible to create pages of the same content type in different view modes (layouts). This module makes that possible: "Create separate pages for different view modes for a given content type." as the Drupal project page clearly states.

https://www.drupal.org/project/view_mode_page

20. CKEditor Entity Link

When installed, this module will make it possible for Drupal content managers to insert a link to any entity type: content, files, taxonomy, tags, users, etc.

https://www.drupal.org/project/ckeditor_entity_link

21. Tooltip Taxonomy

Show tooltips to your Drupal website visitor with help of Drupal's taxonomy. Easy manageable by content managers.

https://www.drupal.org/project/tooltip_taxonomy

22. Font Awesome Icons

Use the Font Awesome icon library in your Drupal website with this very popular module.

https://www.drupal.org/project/fontawesome

23. Entity Blocks

If you need entities (nodes/content, files, users, etc) to show in a block, this module might come in handy: "Entity block module lets you create blocks that can reference an entity." For example: show a certain piece of content in a block on the homepage (in a selected Drupal View mode)

https://www.drupal.org/project/entity_block

Wrap up

Alright, that's it for now, hopefully this Drupal module list can kickstart your specific need in a new or ongoing Drupal project. I'll publish another one next month, so stay tuned via my monthly Drupal newsletter!

Aug 04 2020
Aug 04

I have watched in sadness and sometimes anger as large non-profit after large non-profit collectively poured enough money into Raiser's Edge and other Blackbaud licenses and consulting services to fund many feature enhancements for the main FLOSS alternative, CiviCRM— improvements which would then be free for everyone, forever.

I have never met anyone who actually likes Blackbaud products and services. However, many organizations felt they were the only safe option, in the sense of claiming to have everything an enterprise needs.

Now, Blackbaud failed to secure its servers sufficiently and large amounts of its clients' donor data, including personally identifying information, was obtained in a ransomware attack. This was back in May. Blackbaud ultimately paid the ransomer to allegedly destroy the data they obtained— and only late in July finally told their customers what happened.

As the American Civil Liberties Union wrote to all its supporters, current and past (including myself), this is a rotten situation:

In all candor, we are frustrated with the lack of information we've received from Blackbaud about this incident thus far. The ACLU is doing everything in our power to ascertain the full nature of the breach, and we are actively investigating the nature of the data that was involved, details of the incident, and Blackbaud's remediation plans.

We are also exploring all options to ensure this does not happen again, including revisiting our relationship with Blackbaud.

Fortunately, none of Agaric's clients are affected. But we hope everyone using or considering using Blackbaud and other proprietary services for their most important data will look at free/libre open source solutions. Code you (or your technology partner) can see and contribute to means you truly can do anything. And if you put aside the money that would be gouged out of your organization by the eTapestry, Kintera, and Convio-swallowing monopolist Blackbaud, you probably can afford to.

At Agaric, we have recently been working with CiviCRM more recently (building on experience dating back fifteen years!) and we know our friends at Palante Technology Cooperative and myDropWizard are well-versed in CiviCRM, as are many others. Please consider this when weighing your options for maintaining a strong, ethical relationship with your supporters, and let us know if you have any thoughts or questions!

Aug 03 2020
Aug 03

Almost all websites have one requirement in common: getting notified when something specific is happening. Whether that's a new blog post, a new comment, a modified version of a node, an exception in the logs or a deleted user account, either the site admin or website visitors would like to know about some or all of these.

While this requirement is pretty common, each and every individual has very different views on how they want to get notified. Without getting into any discussion on effectiveness of emails, it seems enough to just think about all these other available channels like Slack, mobile push, ticket systems or even SMS.

Building websites with makes you wonder, why the solution stack to those requirements is that fragmented as it has been for over a decade. For Drupal 8 and 9 alone you'll find over 100 modules for the "notify" search term. At least 40 of them should be considered serious solutions as they have stable releases and security advisory coverage. But each of them only ever addresses one single aspect, i.e. only nodes or only comments or workflow states or exceptions or what ever. And then, most of them only offer email notifications for each of the event types they've been built for.

As this is not appropriate for an enterprise grade web application framework like Drupal, it's been time to sit down and address this space in a generic, scalable, configurable and maintainable fashion such that the community can build upon it and be ready for current and future requirements - because the subscription and notification requirements are under permanent pressure to adjust and improve, because the world around us is changing all the time as well.

The team at bitegra Solutions in Germany spent almost 2 years in problem analysis, solution design, software architecture and development to make available the ultimate solution for Drupal. We've decided to publish all available components on drupal.org and let the community participate in the benefits but also future maintenance and development of existing and additional features and notification channels for free.

This is part 1 of a blog post series which introduces the idea and implementation and how you can use them yourselves on Drupal projects of any size:

  • Part 1 (you are here): Introduction and system architecture
  • Part 2: Getting started with subscriptions and notifications
  • Part 3: How to add new notification channels
  • Part 4: Covering more events for being notified
  • Part 5: Customizing the notification output

System architecture

Let's get started with a list of requirements:

  • Support everything notable:
    • Content, i.e. entities:
      • Create, update, delete and pusblish/unpublish
      • Every entity type and bundle
      • Each bundle with individual and detailed settings
    • Configuration: track all changes to the site's configuration
    • Logger: track all log entries above a configured threashold
    • External events: allow other services in the enterprise network to notify the same audience
    • Allow developers to provide new plugins to create notifications
  • Be flexible with recipients
    • Authenticated users should be able to subscribe/unsubscribe to/from any available event configured on the site and made available for subscription
    • Site configuration should allow pre-selection of recipients for each available event type
    • Content editors with appropriate permission should be able to overwrite notification defaults per entity action (create, update, delete, publish, unpublish)
    • Allow developers to apply custom rules on recipient selection
  • Support multiple notification channels
    • Allow site builders to activate any number of different notification channels at once
    • Allow users to define their own preferences on channel priority
    • Make sure that each user only gets notified once for each event
    • Ensure and trace notification delivery
    • Provide good defaults for notification rendering per channel
    • Allow site builders to modify the notification output
    • Allow developers to add new channels

While collecting and structuring the requirements, it became obvious that there are 3 isolated phases that need to be addressed separately:

  1. Event capturing
  2. Recipient selection and notification creation
  3. Notification delivery

Yes, phase 2 contains two steps: for each notable event all relevant recipients need to be determined, and for each of them a notification entity gets created in order to further handle that notification for each recipient individually.

Events Recipients Notifications Delivery

This led to another major decision in the solution design: capturing events and selecting recipients for notifications is one major building block, and delivering those notifications to users over a number of channels is another one. Both building blocks can operate independently and hence we broke this down into 2 separate modules:

SANE: Subscription - Audit - Notification - Event

The SANE module addresses the first two phases: event capturing and recipient selection. Both phases are implemented with their own plugin managers and hence can easily be enhanced to support additional requirements.

Out of the box, SANE supports event capturing for content entities, configuration, logging and webhooks (external events). Each of those event types are implemented in separate submodules so that site builders can enable just those actually needed.

The recipient selection plugin manager allows to implement your own business logic but brings 2 plugins already with it: "all admin users" and "all active users". For the content entity event capturing plugin above, site builders can also configure on a per-bundle basis, which user roles are allowed to subscribe to supported event types - available subscriptions can be recognized as a recipient selection plugin in its own right.

SANE comes with 3 entity types to handle its duties:

  • Events (sane_event): each notable event gets stored with its creation timestamp and further details depending on the event type
  • Notification (sane_notification): for each recipient of each event a single notification gets stored
  • Action (sane_notification_action): to track the activity around that notification including an API to store delivery attempts and the receipt flag

As a result, this module allows you to audit the activity on your website by reviewing all these entities for events, notifications and actions so that you can easily tell what happened when and why. Of course, it also stores who got notified how and when. So, that made the final piece of the module name, just in cased you asked yourself: audit.

An extra benefit is the notification widget that comes with SANE. Without even delivering notifications out to the recipients, there is a huge value in telling your users what's new and changed on the site. The stored notifications allow you to do that easily. SANE comes with a view for unseen notifications and you can place that view as a block on the site for authenticated users.

With this in mind, SANE can be used on its own for any existing Drupal 8 and Drupal 9 site.

Push Framework

In order to also send notifications out to their recipients, the Push Framework module comes in handy. It hooks into the API provided by SANE but can also be used together with any other source of information that should be delivered. To make this possible, the push framework comes with a source plugin manager and SANE is just the first module which implemented a plugin for this. But of course, other sources can be provided easily like e.g. a newsletter module.

The push framework module handles all the logic of collecting the source content which is due for delivery, determining the appropriate channel for delivery which depends on available channels and user preferences, and then delivers the notification and reports back to the source on the delivery success. If delivery fails, each channel can support any number of retries and continue with another channel, if all retries failed.

The output channels are made available through the channel plugin manager which allows developing additional channels very easily. Currently supported (or planned) channels are:

  • Email
  • OneSignal
  • Alerta
  • Slack (planned)
  • Mattermost (planned)
  • Twilio (planned)

Diagram of the overall solution

Both of the above modules make intensive use of queues, i.e. all the heavy lifting is operated asynchronously. That helps to ensure reliability of both event capturing and recipient selection as well as delivery - without any impact on the websites performance.

SANE and Push Framework - full diagram

Both SANE and Push Framework have been carefully designed to provide a rock solid solution for all Drupal sites of any size. It comes with a common feature set for (a) event types which create notifications and (b) notification channels. But we are well aware that lots of sites have their own business logic for most of this solution space - even our own first customer project, where we used this, had such a specific requirement - which can still be satisfied by developing custom plugins or public modules, if the extra feature were of general interest.

The subsequent parts of this blog post series will give you all the insight into what's required to use these modules and how to enhance them towards your own requirements.

Aug 03 2020
Aug 03

Introduction

If you made a cool design, planned out the great user experience, added a chatbot, got a lot of high-quality traffic, and think that the job is done, we have some awful news for you. If you have all of the above but the site loads in about 15-30 seconds,  any businesses can be out of the game very soon.

Do you remember your feelings when you go switch from the search engine to a site, and it shows you a white screen for too long? You wait, wait, wait … As a result, you get bored, you close this tab, go back to the search engine, and click on the next site. 

People don't wait and go to your competitors - this is what you should keep in mind. One way out - to increase the performance of your site. High-performance sites offer visitors a good experience and help you reach your goals. All researchers agree that the optimal load time is from 1.5 to 3 seconds. So, if you can reduce the site loading time to 3 seconds then it will be enough for your site to be faster than many existing ones. This means that even minor site improvements can lead to tangible benefits for your business.

What is web performance? Web performance is all about making websites fast, including making slow processes seem fast. Does the site load quickly, allow the user to start interacting with it promptly? Are scrolling and animations smooth? How content is rendered? 

Let’s consider the advantages of the website with high performance:

  1. Fast page load improves the user experience, increases your page views.
  2. Search engines don’t allow sites with low performance to be on the top. Obviously, websites with high performance may be on the first positions of the search. 
  3. The likelihood of users’ return to the site increases if your website has a high-performance score. 

Sometimes the problem with performance is on the surface and it can be solved by installing particular Drupal modules. This is one of the easiest ways of improving website performance. Below, we will consider such modules. The Drupal modules are add-ons that can upgrade your site. However, firstly I want to say that a default Drupal website already has the tools out-of-the-box to improve performance. Settings are in the Admin - Settings - Performance menu. Here are some Drupal out-of-the-box module examples:

  • The Internal Page Cache module caches pages for anonymous users. 
  • The Dynamic Page Cache module makes it possible to cache pages with dynamic content. Pages requested by users (anonymous or authenticated) are stored the first time they are requested and can then be reused. 
  • The BigPipe module. For the first time, this technique was invented by Facebook. That's the simplest solution: have the lazily loaded content appear in a space that is reserved for it, that avoids reflowing content.

Any Drupal website also contains the Responsive image module because Drupal has it in its core. It uses responsive images that means loading images that have been specifically cropped for a user screen based on breakpoints (example: image sizes are optimized for mobile devices).

So, we cleared this up. It's time for the reason we're all here tonight. Now, we want to introduce you to 7 top Drupal modules that will boost the performance of your Drupal 8 website.

It’s a popular choice for accelerating the cache by placing the cache in memory instead of disk. It will significantly reduce the load on the database or file system and speed up the work of the site, due to the fact that working with memory is faster than with the database or files.

It’s a module for integration with a real-time content delivery network (CDN) that improves the performance of websites, mobile applications. Also, Fastly allows you to have full control over your configuration settings, and implement changes in real-time. 

The module facilitates cleaning external caching systems, reverse proxies, and CDNs as content actually changes. This module makes content delivery more efficient, resilient, and better protected from traffic spikes.

The AdvAgg module allows you to boost the front-end performance of your site. If you want your website pages to load faster, install this module. It contains several submodules - read all information on the official Drupal website.

If you want your website to load 30% faster you should add this module. Also, the websites which have CloudFlare are protected from many types of malicious actions, including comment spam, email collection, and many others. 

This module provides a lazy picture downloading. Due to Lazy loading images are loaded gradually, as a user scrolls the site. This allows you to speed up the site because when you first load the site, it will not load a large number of images that are not needed on the first screen.

To convert Drupal pages into pages that comply with the AMP standard, use Accelerated Mobile Pages (AMP). Accelerated mobile pages or AMP is a technology that provides convenient access to information on the Internet from the screens of smartphones and tablets. AMP pages are created for static content and differ from normal pages by high download speed. 

ImageAPI Optimize allows you to optimize the image losslessly when they are saved. Usually, the size reductions on the original image vary between 10-30 KB if the image was not optimized before. The module has built-in support for core image styles and a service allowing use in different modules. 

The Drupal modules are ready-made solutions that can solve a lot of problems fast, easy, and installation won’t cost a lot. If you want to make your website well-performing then adding necessary modules can be a good way of website optimization.

Useful links

  1. If you have a website on Drupal 7, we suggest you read the article "Drupal 7 Performance Tips" to improve its performance in different ways. 
  2. Learn more about a website audit and get a free website performance check-up tools list for free in the article "How to conduct a website audit: a beginner's guide".
  3. If you want to improve or create an education website read the article "Drupal modules for a university website" with a useful selection of the Drupal modules here.
  4. If your website still isn’t integrated with Social Media read the article about Drupal modules for integration with Social Media, and make your website user-friendly.
  5. Learn more about how to prepare your module for Drupal 9.
Aug 03 2020
Aug 03

If you are using shared web hosting for your composer managed Drupal website, you have probably ran into the problem of your server running out of memory for simple commands such as "composer install". Shared web hosting usually have memory limits which are shared across many websites.

This problem becomes quickly apparent if you are trying to install a new Drupal website into your shared hosting account. Because this is probably the first time that you have to run "composer install" for this website. Composer will then have to go and fetch all the files and download them into your vendor directory. This process is memory intensive. The end result is your process is abruptly killed without finishing.

Solution

A quick and easy solution is to install the site locally whereby you can successfully run "composer install". You would then have the vendor directory locally. Then use a service like FTP to manually upload the vendor folder into the correct directory on your hosting server. Then on your hosting server, try running "composer install" again. 

At this point, composer would not need to fetch all the files again. Composer may or may not have to update some files in the vendor directory. This is OK. But the process should now be able to complete within your memory limitations.

It should be noted that the vendor directory should not be committed to your git directory for a few important reasons.

Aug 03 2020
Aug 03

Views is an integrated function from Drupal which allows to build content views from available data. Content views are any filtered data display in a form of table, list or grid.

In this article, the sample view we are building is made of data managed by EK modules for business back office. But it may apply to any data from a Drupal module.

Views are very useful to extract custom data for analysis or compilation. You can add filters and access control to share pages and content.

You can also test the full example below result on our online demo

 

A new custom purchase list view

(check out complete video here as well)

To access view building form you must have permission Administer views. Check with administrator if you need to update permissions in your application.

To access the Views User interface, navigate to : /admin/structure/views

On this page, click the button Add view to start a new content view:

add view

In the subsequent form, fill-up the information needed to create the view: name and description, page title and path (path is the url to view display and can be inserted in the application menu) and display settings as in the example below:

 

add view form

 

After clicking "Save and edit" we are redirected to the content edit form.

 

View content building

The first step is to select the fields from content database that will be displayed in the table. For that selection we click on "Add" in fields section:

 

add fields

In the field list, we select following fields:

  • Serial number
  • Document date
  • Local currency
  • Total value in local currency

And format each field column name.

fields selected

 

The view content can be previewed in the lower part of the form:

 

preview 1

Add link to field

To improve view display, we are going to add a hyperlink to the serial number to redirect user to a display of the document with full information.

First we click on ek sales Purchase unique id (ID) to edit its configuration: hide from display and remove comma separated formatting:

config ID

 

Then we click on the field ek sales: Serial number (Ref.) to edit its configuration. In the "REWRITE RESULTS" section, we select "Output this field as a custom link" and enter the path to the document with ID:

 

config link

 

{{ id }} indicates a variable element which is equal to the value of the row ID. If you do not indicate the proper variable, the link will not work.

Now the view display shows Ref. column with hyperlink to the document and the ID column is hidden.

 

preview 2

Add a filter by date

To help user select data from view, the next step shows how to include a filter. The filter will select purchase rows based on date field.

First, click "Add" in the filter section:

button 2

Select the date field:

select date field

And configure with following settings:

 

config filter

A new box is included in the view to filter content by date:

filter

The View "Custom Purchases" is now completed and it can be accessed by users via default path /custom-purchases indicated in the view form (you can edit this path to any valid path you want to set) :

 

user view

 

In the next article, we will look at table relationship to link data with other tables and other display enhancements.

You can also watch our video for building a custom view:

 

 

build custom view part 1

Aug 01 2020
Aug 01

Drupal Camp Asheville was quite different this year, as it transitioned from an in-person event to virtual. While I missed driving up to Asheville, NC and hanging out, it was encouraging to meet new people and see the camp's reach extend internationally! Thanks to all who made this year's event especially great!

I was honored to have a chance to speak on upgrading projects from Drupal 8 to Drupal 9 compatibility, by demonstrating techniques and open source tools used by the community. A primary goal of the talk, "Anyone Can Help Upgrade Drupal Projects to Be Drupal 9 Compatible!", was to show how anyone who wants to help contribute to Drupal 9 upgrades can! This was accomplished by showing that not all Drupal 9 audit tools require developer knowledge, demonstration of the Drupal issue queue, and additional documentation resources provided in the presentation slides.

I thought the most fun part of the day was the live audit, patch testing, and release of a Drupal 9 compatible version of User Password Reset Link Timeout. While the actual release happened a few minutes after the end of the presentation, the demonstration shows a bit about using the issue queue, testing a patch, committing the patch, and pushing up a new tag for release. I just love the energy of live demonstrations!

A page with links to the slides and video can be found here.

[embedded content]
Aug 01 2020
Aug 01

Book cover: Local Web Development with DDEV ExplainedLocal Web Development with DDEV Explained, by Mike Anello, now available on amazon.com!

Looking to move to a professional local development environment? Learn how to use DDEV for your everyday development work with numerous step-by-step examples including installing DDEV, getting an existing Drupal site up-and-running, adding a Solr container, and everyday DDEV commands and workflows.

Only $5.99 for a digital copy and $9.99 for the dead tree edition - pick up your copy today!

Jul 31 2020
Jul 31

One of the great things about Drupal's new media manager is the ability to easily see all the media you're using on your website.

What if you want to replace one of those images or even more likely a PDF that needs to be updated?

Well in this OSTip, I'm going to show you how.

Let's go!

 

[embedded content]

"Hi and welcome to OSTips from OSTraining. I'm Rod Martin.

Osborne is the creator of this module.  It installs like any other module, but here's the instructions you'll need to know to enable the module.

  • browse to the forum
  • display configuration for any file based media types
  • enable the replace file form display widget (usually put it right under the file or image widget)

This is how it works. I've already installed the media entity file replace.

  • head over to structure media types image
  • manage form display
  • grab replace file
  • drag it up under tags
  • click Save

Now under our media item, you'll see the replace file section where you can replace the file and update everywhere it's been embedded in one simple action.

All right well that's it.  It can't be much simpler than that, and it adds such amazing functionality to the media manager for Drupal 8.

This has been OStips from OS Training."


About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.
Jul 30 2020
Jul 30

argument-open-source Over 500,000 businesses leverage Drupal to launch their websites and projects. From NASA to Tesla, public and private institutions regularly rely on Drupal to launch large-scale websites capable of handling their development and visual needs. But, starting a Drupal project doesn’t guarantee success. In fact, 14% of all IT projects outright fail, 43% exceed their initial budgets, and 31% fail to meet their original goals! In other words, if you want to create a successful Drupal project, you need to prepare. Don’t worry! We’ve got your back. Here are 5 things to keep in mind when starting a Drupal-based project.

1. GATHER REQUIREMENTS FROM STAKEHOLDERS EARLY AND OFTEN

According to PMI, 39% of projects fail due to inadequate requirements. Believe it or not, requirement gathering is the single most important stage of project development. In fact, it’s the first step Drupal itself takes when pushing out new projects (see this scope document for their technical document project). Gathering requirements may sound easy, but it can be a time-consuming process. We recommend using SMART (Specific, Measurable, Agreed Upon, Realistic, Time-based) to map out your specific needs. If possible, involve the end-user during this stage. Don’t assume you know what users want; ask them directly. Internally, requirements gathering should rally nearly every stakeholder with hefty amounts of cross-collaboration between departments. You want to lean heavily on data, establish your benchmarks and KPIs early, and try to involve everyone regularly. The single biggest project mistake is acting like requirements are set-in-stone. If you just follow the initial requirements to a “T,” you may push out a poor project. You want to regularly ask questions, communicate issues, and rely on guidance from stakeholders and subject matter experts (SMEs) to guide your project to completion.

2. PLAN YOUR SDLC/WORKFLOW PIPELINE

We all have different development strategies. You may leverage freelancers, a best-in-class agency, or internal devs to execute your Drupal projects. Typically, we see a combination of two of the above. Either way, you have to set some software development lifecycle and workflow standards. This gets complex. On the surface, you should think about coding standards, code flow, databases, and repositories, and all of the other development needs that should be in sync across devs. But there’s also the deeper, more holistic components to consider. Are you going to use agile? Do you have a DevOps strategy? Are you SCRUM-based? Do you practice design and dev sprints? At Mobomo, we use an agile-hybrid development cycle to fail early, iterate regularly, and deploy rapidly. But that’s how we do things. You need to figure out how you want to execute your project. We’ve seen successful Drupal projects using virtually every workflow system out there. The way you work matters, sure. But getting everyone aligned under a specific way of working is more important. You can use the “old-school” waterfall methodology and still push out great projects. However, to do that, you need everyone on the same page.

3. USE SHIFT-LEFT TESTING FOR BUG AND VULNERABILITY DETECTION

Drupal is a secure platform. Of the four most popular content management systems, Drupal is the least hacked. But that doesn’t mean it’s impenetrable. You want to shift-left test (i.e., automate testing early and often in the development cycle). Drupal 8+ has PHPUnit built-in — taking the place of SimpleTest. You can use this to quickly test out code. You can perform unit tests, kernel tests, and functional tests with and without JavaScript. You can also use Nightwatch.js to run tests. Of course, you may opt for third-party automation solutions (e.g., RUM, synthetic user monitoring, etc.) The important thing is that you test continuously. There are three primary reasons that shift-left testing needs to be part of your development arsenal.

  • It helps prevent vulnerabilities. The average cost of a data breach is over $3 million. And it takes around 300 days to identify and contain website breaches.
  • It bolsters the user experience. A 100-millisecond delay in page load speed drops conversions by 7%. Meanwhile, 75% of users judge your credibility by your website’s design and performance, and 39% of users will stop engaging with your website if your images take too long to load. In other words, simple glitches can result in massive issues.
  • It reduces development headaches. Nothing is worse than developing out completely new features only to discover an error that takes you back to step 1.

4. GET HYPER-FAMILIAR WITH DRUPAL’S API

If you want to build amazing Drupal projects, you need to familiarize yourself with the Drupal REST API. This may sound like obvious advice. But understanding how Drupal’s built-in features, architecture, and coding flow can help you minimize mistakes and maximize your time-to-launch. The last thing you want to do is code redundantly when Drupal may automate some of that coding on its end. For more information on Drupal’s API and taxonomy, see Drupal API. We know! If you’re using Drupal, you probably have a decent idea of what its API looks like. But make sure that you understand all of its core features to avoid headaches and redundancies.

5. SET STANDARDS

Every development project needs standards. There are a million ways to build a website or app. But you can’t use all of those million ways together. You don’t want half of your team using Drupal’s built-in content builder and the other half using Gutenberg. Everyone should be on the same page. This goes for blocks, taxonomy, and every other coding need and task you’re going to accomplish. You need coding standards, software standards, and process standards to align your team to a specific framework. You can develop standards incrementally, but they should be shared consistently across teams. Ideally, you’ll build a standard for everything. From communication to development, testing, launching, and patching, you should have set-in-stone processes. In the past, this was less of an issue. But, with every developer rushing to agile, sprint-driven methodologies, it can be easy to lose sight of standards in favor of speed. Don’t let that happen. Agile doesn’t mean “willy-nilly” coding and development for the fastest possible launch. It still has to be systematic. Standards allow you to execute faster and smarter across your development pipeline.

NEED SOME HELP?

At Mobomo, we build best-in-class Drupal projects for brands across the globe. From NASA to UGS, we’ve helped private, and public entities launch safe, secure, and exciting Drupal solutions. Are you looking for a partner with fresh strategies and best-of-breed agile-driven development practices?

Contact us. Let’s build your dream project — together.

Jul 29 2020
Jul 29

I had a very large key_value_expire table, even though Honeypot module had been uninstalled.

When investigating why I had such a large database on mark.ie (about 50MB - not huge, but a lot for a personal website) this evening, I noticed that the key_value_expire table in the database was about 40MB (after clearing cache). And that most of the entries in it (over 160,000) were for honeypot_time_restriction.

As it turns out, honeypot had been putting a time to expire of Jan 2038, so the table was just getting bigger and bigger. Then I did some Googling and found this: Honeypot key value entries never expire (effectively). That issue has been fixed for newer versions of honeypot, but all the old entries before that update are still in the DB.

There's another issue - Write update hook to clean up old honeypot_time_restriction values - to clean up all the old entries, but it's only at RTBC at the moment, and when it gets into the Honeypot module, it could take a long time for the update hook to run depending on how many entries you have in the table.

For my set up, I just ran DELETE FROM key_value_expire WHERE collection = "honeypot_time_restriction"; directly on the DB. It only took about 10 seconds to delete the 160,000+ rows, and reduced that table from about 40MB to 3MB.

It might be worth checking this on your site to try reduce your DB size.

Jul 29 2020
Jul 29

The new coronavirus (COVID-19) pandemic is more than a health crisis. As the infectious disease spreads across the world, it is leading to horrendous social, economic, and political crises that may last for the foreseeable future.

As lockdowns, physical distancing restrictions, and other measures were implemented to curb the spread of the dangerous virus, it led to an unprecedented shift in how things are done. Specifically, it disrupted the normal work environment in almost every industry, including the IT industry.

Companies that often relied on external IT support suddenly found their critical content and events pages outdated, as the external support team was overrun with requests from many other clients who needed their websites updated.

So, if there is one thing that has become clear during this pandemic it is the need to be self-sufficient. You don’t need to be hiring someone each time you want to update the design of your web page, customize images, or make any content changes to your site.

Why you need to know how to update your Drupal website

Updating your Drupal website is not rocket science. It’s something you can learn how to do on your own and avoid over-depending on your IT support staff, especially in times of crisis when reaching them is difficult.

Here are three reasons why being able to update your Drupal website is important.

1. Keeps you in control

Learning how to update your website quickly without IT support will make you in control over its look and feel. You’ll no longer need to make frantic calls for your site to be updated to meet the ever-changing user expectations.

With this level of control, you can unleash your inner creativity instantly and create whatever you want. So, whenever something unexpected happens, such as the ongoing COVID-19 pandemic, you’ll still ensure your site is up-to-date and performing optimally.

2. Saves costs

Let’s face it: relying on an IT support team to be in charge of updating your site is expensive. If your website needs to be updated regularly, the costs can affect your bottom line, especially during the coronavirus pandemic when cash flow is limited.

Knowing how to update your website will reduce the costs spent on hiring a third-party service. You can use the savings to improve your core business activities and gain a competitive edge in the marketplace.

3. Improves skills

Another benefit of learning how to update your site is that it’ll improve your skills significantly. Updating your Drupal website is a skill that can be acquired easily with our Drupal Layout Builder. With the new skill, you’ll improve your capabilities to succeed in the current digital age.

We all know how technology is rapidly advancing these days. So, if you can add this expertise to your skillset, you’ll position yourself for personal and professional success.

How to update your Drupal website fast without IT support

As earlier mentioned, knowing how to update your website is easy to learn. With our Drupal Layout Builder for Drupal 7, 8, and 9, you can create and update your websites without touching any line of code.

DXPR offers an easy way to make improvements to your website without requiring IT support. It allows you to create and edit what you want lighting fast.

DXPR Builder is built to offer the benefits of an enterprise-class CMS solution without the usual pain points. It comes with simple and easy to use drag-and-drop functionality that makes building and updating web pages hassle-free and rewarding.

Many of our clients have been able to quickly update their website header, footer, homepage, or event pages, with a COVID-19 messages that stands out. Some clients have used our "Alert element" and other chose for more conspicuous "Jumbotron element".

Conclusion

The COVID-19 pandemic has taught us lessons that we’ll live with for a long time to come. For Drupal website owners, it has exposed the importance of knowing how to make updates without relying on third-party services.

DXPR Builder has proved to be a viable solution to make the process of building and updating websites in Drupal fast, easy, and independent.

Photo by Markus Spiske from Pexels

Jul 29 2020
Jul 29
a laptop kept on a huge book and awomen sitting on the laptop


In this digital age, keeping the customers engaged with your brand is one of the most important parts of every business. Personalization has become so important that the companies that have been implementing it have been successful in the age of UX. It has now become a requirement.

Personalization refers to the process of using the information provided by the user to provide a personalized experience to them according to their needs and preferences. This helps you in making your customers feel heard and market the right product to the right person at the right time.

Why do we need to personalize?

Let’s not confuse personalization with customization. Personalization provides experience based on the information provided by the user whereas customization gives the users liberty to custom-make a product or service.

colorful graphs showing benefits of personalization Source: Semrush

When you go to a website, say for shopping or maybe just surfing and you realize that the app or the website is interacting with you. This makes you like the brand and go back to them every time you have a similar requirement. This will make you feel special and more connected to the brand.

Personalization is important because it creates a bond between the users and the brand and makes them loyal customers. If there is no personalized experience given to the users then the user might feel like he’s not being given much help from the brand even though it is.

While personalization can be a big hit for your brand, context factors also make a lot of difference. The device the customer is using, whether in the location the person is in or even the time of the day matters a lot in personalization.

Importance of personalized design

Personalization and design go hand in hand. If the UX of your brand is great and personalized for different kinds of users, you are good to go!

Let’s look at some of the best practices for Personalized UX Design

Show relevant recommendations

When providing personalized information, it is important to make sure that the information that you show the users is relevant and does not disturb the flow of the user experience. Many shopping applications show recommendations according to the search made by the users. This saves the user time and helps the user purchase more valuable.

Myntra shows trending products to let the users know what is trending currently. This is a different way of recommending products.

myntra shopping page


Understand the interests

When we talk about personalized experiences, Netflix is a well-known player in the market. Netflix provides a personalized experience to its customers by asking for customers’ preferences once they sign up. The first thing that you will observe on the home page is that the content is adjusted according to your interests.

netflix recommendations


Dynamic personalization

This practice uses algorithms to create an image of their potential customers, their buying habits, and their needs, depending upon factors like demographics, behavior, geolocation, and device.

Combining design with emotion

Combining design with emotion creates a magical personalized experience. To create trust between a brand and its customers, it is important to get the required information from the user and use it to create a design that develops a positive emotional reaction from the user.

It should be taken into consideration that the design should not invade the privacy of the users. This is a major turn off and is not liked by the customers. 

Navigation in personalisation

Navigational personalization means showing products that have been searched by the user but left without purchasing. You can show the products and similar products on the home page or somewhere it is visible to the user when they visit your page next time.

I searched for watches on Amazon and left without purchasing. Now when I visited Amazon again, it shows different kinds of watches under ‘items from popular brands’.

Amazon showing watch suggestions to buy


Technical design in personalization

Technical design is another practice that guides your technology decision towards a valuable personalized experience. There are two things that you need to consider: The kind of data that you collect from the users and the tactics that need to be implemented to this data.

Here’s a quick mapping of tactics with respect to customer volume and session time:

popular personalization tactics shown with red colored dots on a blue backgroundSource: A List Apart

To implement such a technical design, different customer data platforms and digital experience platforms can be used. Customer data platforms have become a popular technology that unveils the value of market segmentation and personalisation at scale. Digital experience platforms (DXP) are designed to engage users by building websites rapidly. If you are working on an advanced DXP you will have extended possibilities like machine learning and behavioural profiling that will help you become aware of different segments.

The four magical steps 

Segmentation is a great way to organize contacts by their traits, personas, behavior, or other defining details. This helps the brand to create hyper-personalization content for each user.  Segmentation makes personalization more manageable by grouping contacts. 

A chart showing demographics and psychographicsSource: Equisoft

Once you are done creating a segment worksheet, the next step is creating a campaign worksheet that includes the strategy that you will use for personalization. Talk about what the goals of your campaign would be, the description of the customers, the time frame of the campaign, the budget, etc.

The next step is wireframing personalization which is the first step in the design process. In this step, you decide the design that you will give to your campaign. Creating a simple wireframe makes sure that your designs will take into account the different page elements that are required to go into the design, and also that they’re placed in the best possible way.

The last and final thing to do now is to create a copy deck. A copy deck is a document that holds a series of related messages. It basically provides the infrastructure to plan your copy.

Writing a copy that relates to your campaign and design is the most important step. For example: 

example of copy deckSource: Autopilothq

Conclusion

Personalization is actually personal. It is the key for your brand to achieve new heights. It helps you gain the trust of the users and enhances the user experience by providing relevant content, and functions that match the user’s requirements. Personalization can be a great benefit if done in the right way. All you need to do is implement a successful personalization strategy with the help of the practices mentioned above! Contact us at [email protected] for your online business to boom!

Jul 29 2020
Jul 29

It’s been nearly five months since COVID-19 was declared a global pandemic and a national emergency. This, of course, is not how any of us imagined 2020 would play out when marketing plans were put in place at the start of the year. Despite the disruption and tragic human toll during the Spring months, there was widespread expectation that the pandemic would be headed for the history books by the third and fourth quarters.
 
Turns out, the pause from business-as-usual is not going to be brief. The disruption and human toll continues.
 
Whether or not we took the initial lockdown seriously enough, or attempted to reopen too soon, one fact is without dispute at this point: COVID-19 is going to be with us for a while and “normal” could be a long way off. 

So what does that mean for marketers?

Multiple Marketing Dilemmas

When customers and constituents are dealing with mounting upheaval and uncertainty on multiple levels, business-as-usual marketing campaigns run the risk of appearing tone deaf. At the same time, audiences are weary of the multitude of voices weighing in on COVID-19.

So how are the most perceptive and forward-thinking organizations regrouping and rethinking marketing and messaging five months into the pandemic? 

There’s a lot of soul searching going on and, in many cases, there are similarities between positive new directions within organizations and within homes. 

Renew and Refresh

At home, many have decided that now is the time to dive deep into big picture goals such as fitness, new hobbies, online classes, or intellectual pursuits -- tapping into the types of goals that tend to get pushed aside during normal daily life when commuting, socializing, and activities that call for being in close proximity or physically present take up a major chunk of time.  

Organizations are actually taking a similar approach to the “What Now” question. Studies show that to an increasing degree, preparations for the post-pandemic rebound are directed toward better web experiences that are impeccably aligned with user needs and expectations.

There are a host of reasons why website content audits, redesigns, redevelopment, or fixes that are taking many different forms are proving to be the best focus of organizational energy and marketing dollars right now.

Here are our top five:

1. Websites and web experiences are now a defining factor.

Long before the pandemic hit, Promet noted that organizations were increasingly defined by their digital presence. That reality emerged to the forefront as social distancing and shelter-in-place orders created a reliance on online engagements as the primary connection to the world. As websites have been called upon to do more heavy lifting than ever before, opportunities for excellent UX have come into focus, and users’ patience with sub-par experiences has worn thin.

2. This defining factor and digital hub needs to strategically reflect new realities.

COVID-19 has shaken modern life to the core. Historically, new design trends follow massive social upheaval, for good reason. After emerging from a constant stream of dire news, users are looking for bright spots, a breath of fresh air, and a reassurance that life is on track to be back to normal. The post-pandemic climate will present a powerful opportunity for renewal and reinvention. At Promet Source, we are anticipating an overall trend toward brighter colors, whimsical styles, and simplicity. For websites, this might mean a fresh, new color palette, bolder fonts with smoother edges, brighter images, and a renewed organization of previously complex menus and data.

3. Competition will be aggressive and strategic.

Marketing and advertising budgets were slashed at the start of 2020 as consumers lost their jobs, had less to spend, and were discouraged or forbidden from engaging in activities that fuel key sectors of the economy. While the timing of the economic rebound is uncertain, pent-up demand is undeniably huge. When the economy rebounds organizations will need to have a strategic response plan that includes an intentional, up-to date digital presence. 

4. Data and analytics will serve as stronger drivers of strategic decision-making.

Most organizations' websites are set up on Google Analytics, but often key intelligence is missing from the set-up. Now is the time to ensure that the web analytics are aligned to fully leverage user data. Great data and analytics will be required to achieve the next level of decision support intelligence. 

5. For Drupal users, migration to Drupal 9 is inevitable.

Drupal 9 is here. Drupal 7 and 8 are on the way out. Even though the Drupal organization has extended by one year the decommission date for Drupal 7 and 8, migration to the latest version is still required and this current downtime represents the perfect opportunity for upgrading to a far superior CMS and user experience.

At Promet Source, we tend to believe that there is never a bad time to make a website better aligned with market demands and current branding. In the current environment, the factors supporting website upgrades are more compelling than ever before. Contact us and let's talk about possibilities for getting ahead of what’s next. 

Jul 28 2020
Jul 28

In a previous blog post and video, we looked at the code that controls the display of link previews on Facebook. This is outlined by Facebook's Open Graph protocol, where we modify the <meta> tags within the <head> of our HTML web page to say what the title, description, image, and other info should appear in our preview.  

In that post, I showed how to manually modify those HTML tags. While it's good to learn what's going on behind the scenes, in reality, it would be kinda crazy to ask your content editors to modify this code for each piece of content they add. In fact, if you're using a CMS, it would be impossible for them to do so.  

So instead, let's allow the CMS to make our jobs easier. In this video, let's look at the Drupal Metatag module and the included Metatag: Open Graph module to save us time and make our job easier. At the end of this, we will have added <meta> tags in the <head> of our article to reflect how we want our preview on Facebook to appear.  

[embedded content]

Install the Modules

First, let's download the Metatag module. Inside of this module are many sub-modules, each of which is designed to handle the expected meta tags for other social networks, search engines and products.  

For this tutorial, you'll only need to enable the Metatag and Metatag: Open Graph modules. Although we are going to be dealing with Facebook link previews, we will not require the Metatag: Facebook module for this tutorial.

Create Metatag Field on Content Type

In order to give your editors the ability to change the meta information that gets printed to the <head>, we need to add a field to our content type.   

  • Go to Structure > Content Types > Manage Fields on the content type you want to affect
  • Click Add Field > General > Meta tags
  • Give your field a name ('Metatags' will do)
  • Save Settings  

Now when we go to add or edit a piece of content of this type, we have a collapsible 'Metatags' group on the right hand side of the page. It has a few different sections:  

  • Basic Tags
  • Advanced
  • Open Graph  

We can write inside of these fields and when we do, this will add the <meta> tags to our page. This gives your editors control over what gets printed in those tags and (eventually) what can be shown in the Facebook link preview.  

But we can also set some defaults. For instance, there's a lot options in the 'Advanced' section. Some of these fields we may never use, so let's turn them off and configure some others.

Configuring our Metatag Field

A new option appears on the Configuration page when we go to the Search and Metatag section. Click that and go to the Settings tab at the top of the page.

Hiding the Advanced Section

On that page, we get a list of different entities, including the content type that we just added the field to. Opening that section, it shows the Basic, Advanced, and Open Graph areas we saw before. Because none of them are checked, they all appear, but if we check the boxes next to Basic and Open Graph, now only those two sections will appear on our content type.

Hard-Coding Defaults

There are some Metatag fields that we probably don't expect our editors to fill out or have to change. So, we can set the default. For example, if we have an Article content type, we probably want to set the Facebook Open Graph og:type value to article. To change this:  

  • Go to Configuration > Search and Metatag
  • Scroll to the Content section and click Edit
  • Open the Open Graph section and in the Content type field, type article
  • Click Save  

Now, the og:type meta tag will be filled in automatically with the value article. This works for a value that remains constant, but what about fields that change on every piece of content, like the Title field? 

Setting Dynamic Defaults with the Token Module

First, install and enable the Token module.  

To set the Facebook Open Graph tags to match what we add in our content, we have to use the Token browser at the top of the page to select the field value we need. In this example, we'll set the og:title to match the node title:  

  • Open the Open Graph section and click on the Title field, making sure your text cursor is on the field
  • Scroll to the top of the page and click Browse available tokens. A draggable modal window will appear
  • Open the Nodes section
  • Click on [node:title]

This will insert [node:title]in the Title field, automatically putting in that piece of content's Title. You can repeat this for other fields.

A Note on Images

One of the Open Graph tags you probably want to automatically fill in is the og:image field. When configuring the default for this with the Token module, it might be tempting just to click on the image field on your content type, such as [node:field_image].

This won't work. We need the URL of the image, and this token does not provide that.  

Instead, you have to open the triangle beside the field, which reveals the different available Image Styles. Open the appropriate style, and get the URL of it, which appears like so: [node:field_image:large:url].

Wrapping Up

Setting up sensible defaults for your content editors is a great idea, and the Metatag module lets you get very specific with the data. And of course, these fields are editable on the content in case your editors do need to override them.

Jul 28 2020
Jul 28

argument-open-source

DRUPAL MIGRATION PREPARATION AUDIT

All good things must come to an end. Drupal 7 will soon meet its end. Does your organization have your migration plan to Drupal 9 in order? Here’s what you need to know to keep your Drupal site running and supported. Talk to Our Drupal Migration Experts Now!

OUR APPROUCH TO DRUPAL MIGRATION.

  • Analyze 
  • Inventory
  • Migration
  • Revision
  • SEO

OVERVIEW

Staying up to date with Drupal versions is vital to maintaining performance to your site:

  • Future-proofing
  • Avoiding the end-of-life cut-off
  • Performance
  • Security

GOALS

  1. Catalog existing community contributed modules necessary to the project
  • Do these modules have a corresponding Drupal 8 version?
  • If the answer to the above question is no, is there an alternative?
  • Is there an opportunity to optimize or upgrade the site’s usage of contributed modules?
  1. Catalog existing custom built modules
  • Do these modules rely on community contributed modules that may not have a migration path to Drupal 8?
  • Do these modules contain deprecated function calls?
  • Are there any newer community contributed modules that may replace the functionality of the custom modules?
  1. Review existing content models.
  • How complex is the content currently—field, taxonomy, media?
  • What specific integrations need to be researched so content will have feature parity?
  1. Catalog and examine 3rd party integrations.
  • Is there any kind of e-commerce involved?
  • Do these 3rd party integrations have any Drupal 8 community modules?
  1. Catalog User roles and permissions
  • Do user accounts use any type of SSO?
  • Is there an opportunity to update permissions and clean up roles?

PRE-AUDIT REQUIREMENTS

  • Access to the codebase
  • Access to the database
  • Access to a live environment (optional)
  • Access to integrations in order to evaluate level of effort

DELIVERABLES

Module Report The module report should contain an outline of the existing Drupal 7 modules with the corresponding path to Drupal 8, whether that’s an upgraded version of the existing module or a similar module. This report should also contain a sheet outlining any deprecated function usage for the custom modules that will need to be ported to Drupal 8.

Content Model Report The Content Model report should contain an overview of the existing site’s content types, users, roles, permissions and taxonomic vocabularies with each field given special consideration. Recommendations should be made in the report to improve the model when migrating to Drupal 8.

Integration Report The integration report contains a catalog of the third party integrations currently in use and marks those with an existing contributed module from the community and those that will require custom work to integrate with the Drupal 8 system.

Our Insights on Drupal Our latest thoughts, musings and successes.

Contact us. We’ll help you expand your reach.

Jul 28 2020
Jul 28

By default, Drupal implements a "node/nid" URL path system. When you create your first node in Drupal 8, the default URL path looks like ”/node/1”, and the next one will look like “/node/2” and so on. This not user-friendly nor is it very SEO-friendly. Search engines always prefer URLs that are more descriptive of the page content, clean and legible. Using the Drupal 8 Pathauto module, you can obtain a path that looks like this -> "/category/my-node-title". The Pathauto module also eliminates the need to manually create path aliases for every type of content on a Drupal site. When you have an existing site with plenty of content, you can leverage the Bulk generate option in the Drupal Pathauto module to automatically generate aliases for them in a jiffy. Let’s learn how to configure and implement this time-saving Drupal module. The Pathauto module is also Drupal 9 compatible.

Drupal-Pathauto-Module

What does the Drupal Pathauto Module do?

The Drupal 8 Pathauto module enables automatic generation of URL/path aliases for different kinds of content like nodes, taxonomy terms and users. All of this without the need for the user to manually enter the path alias. So instead of a URL that looks like /node/1, the Pathauto module lets you create URL aliases like /category/my-node-title. Thus, giving your users a much better idea on what to expect from the web page. Without Drupal Pathauto, creating a URL structure is time-consuming and error-prone. The site admins can specify a pattern to follow for different types of content. The Bulk generate option lets you automatically generate or regenerate aliases for pre-existing content as well. 

Getting Started with the Drupal 8 Pathauto module

Installing

Installing the Drupal 8 Pathauto module is like installing any other contributed module. I’m using the Composer to install since it automatically installs all of the necessary dependencies and Drush commands to enable the module. However, if you choose to install manually, make sure you also have the latest versions of the CTools and Token modules installed. 
Open the terminal, within the project enter the following command.

      $ composer require drupal/pathauto

      $ drush en pathauto

Configuration

1.    Create Drupal URL alias Patterns 

  • Configure Pathauto patterns as required in Configuration -> URL aliases -> Patterns.
  • Click "Add Pathauto pattern"
     Drupal Pathauto Configuration
  • Select the Pattern Type. For example, if you are generating URL aliases for nodes, you should choose “Content” as the Pattern type.
  • Add the path pattern to the textbox, and you can browse available tokens for the pattern. When you click on the link, available options will show up. For example, I used the [node:title] pattern. So, the URL will be http://yourdomain.com/node-title
  • Select content type or you can also leave it empty. This pattern will be used for all content from the Content Type dropdown.
  • Enter the Label field which helps in identification of the pattern.
  • Hit the Save button. 
     Pathauto-Module   
  • Back on the Patterns tab, you will now see that the Pathauto pattern has now been created
     Patterns tab in pathauto module

2.   Generate Bulk URL aliases

  • Go to the Bulk generate tab for the entity type you want to bulk generate the aliases and click Update.
     Bulk URL Aliases Generation in Pathauto Module
     
  • Now you have created the URL aliases automatically.
     Pathauto
  • Now Click on one of the Alias just generated and the page will display the Content with the user-friendly URL as shown below

     Url Generated

3.   Deleting Aliases

You can also batch delete aliases from the “Delete aliases” tab. You can either choose the entity types you want to delete, or you can bulk delete all aliases. You can choose to delete the aliases that you automatically generated. This will not affect aliases created manually. 

Pathauto-Module
Jul 28 2020
Jul 28

It has always been Ny Media’s priority to provide integrations with payment gateways that are giving merchants leverage over their competitors. This is why for many years we’ve been integrating our eCommerce platform with payment platforms provided by Vipps, Nets, Klarna, and many more. When implementing certain payment integration we’re always looking for a solution that would best fit merchant requirements and business model.

Klarna Checkout (KCO) is among the most popular payment gateways not only in Nordic countries (company origins in Sweden), but it is gaining popularity in the rest of Europe and US. KCO is more than just a payment gateway - it’s a checkout solution tightly coupled with payment gateway. We’ve been implementing Klarna over the course of the last few years - first KCOv2 and nowadays KCOv3, which gives us a good understanding of how Klarna works and evolves. To highlight just a few features that have been added to KCO since we first implemented KCOv2:

  • Klarna now allows gathering separate shipping and billing addresses,
  • customer can choose shipping method directly within Klarna Checkout iframe,
  • Klarna added support for external payment methods, i.e. Vipps or PayPal,
  • the customer’s order can be validated by the eCommerce platform before the payment is made.
Klarna Checkout preview

We’ve partnered with Klarna to make sure our implementation of KCO matches their guidelines and best practices. We can now proudly say that our platform, based on open-source Drupal Commerce, has been officially approved. We believe that sustainability in software can be achieved by sharing the code within a big open-source family so we’re happy to announce that the underlying code that we use in our platform is now part of the commerce_klarna_checkout and commerce_klarna_checkout_external_payment modules and can be downloaded and used by any merchant using Drupal Commerce as their eCommerce platform. If you’re looking for a more tailored solution that facilitates Klarna’s Shipping API - have a chat with us and we can help you with that!

We also want to remind all merchants that Klarna is planning to shut down KCOv2 in October 2020. If your platform is still using that product - reach out to our sales team and we’ll make sure to upgrade your platform in time.

Jul 28 2020
Jul 28

This is part 2 of the series on power of open source in the time of COVID-19. In part 1, we focused on the impact of open source during COVID 19 pandemic. In this article, we will explore how Drupal is fighting against COVID-19 and the effects that COVID 19 has had on Drupal.

The COVID-19 crisis has shone a harsh spotlight on a range of development challenges, and the choices the world makes now in its path to recovery. The spread of COVID-19, now considered a pandemic, continues to have a significant global impact on various fronts. As we see, COVID 19 also presents significant economic challenges, due to the convergence of disruptions in daily life, which have immediate implications for businesses as well as their workforce.

Black background with Drupal 9 icon


During the current period of COVID-19, which incorporates people from all walks of life taking a stab at the solutions to overcome this unprecedented situation, Drupal has emerged as a major world power. In these extraordinary times, the Drupal community has long stood by its slogan i.e., Come for the code, stay for the community. This statement itself is an answer to the fact that Drupal is not built in a vacuum, rather it is built to serve the people who would use it.

The invaluable support of Drupal Community

According to Dries Buytaert (Founder and Project Lead of Drupal), “Open Source continues to grow despite recessions. In other words, Open Source communities have the power to sustain themselves during an economic downturn, and even to grow.”

Drupal is basically used to build the best, most ambitious digital experiences on the web. And even now in the time of the pandemic, Drupal is being used in the fight against COVID-19 by organizations like the National Institutes of Health (NIH), Centers for Disease Control and Prevention (CDC), United Nations International Children's Fund (UNICEF), and many more.

COVID-19 has affected each and every sphere of our lives, and its impact is being felt at the Drupal Association as well. The Drupal Association provides support to all end-users of Drupal with updates and security releases. However, in this time of uncertainty, Drupal’s own finances are at risk. 

Certainly, there was a significant financial shortfall of at least $500,000 against Drupal. However, the Drupal Association took control over the situation and surpassed it by creating a benchmark of $500,000 in just 30 days. This itself is a big victory and an inspiration for how the community rallied to help.

[embedded content]


The situation of COVID 19 has made things evident that irrespective of what happens next, Drupal has to deal with the hard reality that DrupalCon revenue is a substantial part of what keeps the Drupal Association lively. With that being said, Drupal Association suffered an estimated loss ranging from $400,000 to $1.1 million.

Before the acquisition of the marketplace by the coronavirus pandemic, the Drupal Association was on track to achieve many of its strategic goals. However, the birth and rapid growth of coronavirus have hindered the Drupal’s solid financial path while also limiting its capacity to meet the mission and serve the community.

In these extraordinary times, the Drupal Association came up with a campaign called #DrupalCares with a view to organizing the fundraising effort across the Drupal Community. The goal of the campaign was to raise a fund of $500,000 in 60 days to secure the future of the Drupal Association, which Drupal achieved.

Individuals, as well as organizations graciously donated a 2-for-1 match for Drupal Association to help them raise money for the Drupal Association and helped keep the Drupal 9 launch right on track.

In order to protect the Drupal Association from the financial impact of COVID 19, the Drupal community also came forward to pour their support to the very known Drupal Association. Several individual donations have been made thus far and the community pledged to make this $1,00,000. 

Drupal’s Values and Principles

Dark background with bright text colorSource: Dries Buytaert’s blog

Drupal’s Value and Principles are much more than the culture and behaviors that the Drupal community members are deemed to uphold. The principles laid down by Drupal are the foundation of the technical as well as non-technical decisions that are required to be made. Furthermore, these values and principles allow the Drupal community to make better decisions at an augmenting rate, inspire members to be their best selves, and eventually move forward as a unified community. 

In the time of the pandemic, most of us have the chance to encounter if the Drupal stated values (still) align with our values. In addition, we can also consider the role of Drupal in our lives when the pandemic subsides. Consider Drupal’s first principle - "impact gives purpose," which is also an aspect of the first value, "prioritize impact." The first principle is quite practical in nature and concludes that by prioritizing the stakeholder, we should consider the needs of the people who create content before the people who build sites and even before the people who develop Drupal. In other words, this principle states that the Drupal lines up the needs of content creators before the needs of the developers.

Drupal's first principle serves a pivotal role in describing the impact of the Drupal community. For say, prioritizing impact is an implication that every community member acts in the best interest of the project. However, it should be noted that not every community member can or should make the Drupal project their top priority. People will obviously begin with their own needs which is not bad. Contributions to the Drupal should be subjective and should not come at your own expense. Change begins when you have the potential and the power to help others. Drupal does encourage people to participate, but not with some sort of expectations.  

Drupal’s first principle focuses on bigger goals and higher levels of achievements which is way beyond a conference room talking. They seek to help others, both at home and in their careers. The main intent of Drupal revolves around the use of Drupal for Good or even live in (with) Drutopia.

Contributing to Drupal

White background with a blue circle showing different sectionsDrupal contributions by project type | Source: Dries Buytaert’s blog

Contributors at Drupal's doorstep are always the most valuable asset and are the sole force behind improvements to the platform and the community itself. Being an open-source project, Drupal depends on the contributions of thousands of people around the world.

Sometimes the best way to contribute is to sit back and not contribute at all. Yes, you heard it right. There is no secret that the Drupal community is huge and it's just not possible to fix thousands of open issues by any stretch of the imagination. We cannot fix everything around us and we need to accept this. Acceptance is the beginning of the contribution to Drupal. Saying so, there is nothing to feel guilty about taking a break and considering what is important to your life. 

Moreover, there are many ways to contribute, and the Drupal community always looks for ways to improve the contributor experience. For instance, there are various local public media organizations that use Drupal to disseminate the most relevant information at the time of COVID 19 pandemic. Also, Drupal doesn’t make the demand for the most gifted Drupal developers to perform their job functions. In other words, Drupal calls for a team of professionals who have the urge and ability to work together and create consensus around ideas. Being in a Drupal community, even the smallest contribution makes a big difference which is of supreme importance. 

The Outset of Change

Change is the only constant in this world. That is to say, we as individuals are subject to changes and there is nothing that ever stays the same. That being said, the world around us is experiencing the biggest change that has ever happened to human life. This outset of the change is owing to the COVID 19 pandemic that has not spared any signal entity present on the earth. 

Most of the vendors are not able to support all previous versions of their software. Generally, older programs are dropped from support and are upgraded or removed from the network. However, considering the impact of the COVID 19 pandemic, Drupal has decided to extend the Drupal 7 end of life till November 2022. The Drupal 7 was released about a decade ago and extending its lifetime is a great investment as it best aligns with Drupal’s goals thereby making it safe for everyone to use. 

The year 2020 also saw the first-ever virtual DrupalCon which seeks to open various opportunities to the speakers and attendees who never would have been able to attend otherwise.

Conclusion

At this point, there are no doubt millions of people worth acknowledging and thanking Drupal for their contributions to fighting the good fight during the current crisis, whether financial, personal, or professional. The Drupal project has faced many financial challenges before and we firmly believe that it can come out of this crisis with a stronger open web. Not to mention, the world around us is facing an unprecedented challenge that will only be solved with an unprecedented community effort. 

Do you wish to contribute your part to the Drupal community? If yes, then be a part of the Drupal community and ping us at [email protected]. We will get in touch with you in the shortest time possible.

Jul 28 2020
Jul 28

Decoupled and multilingual web development are our specialities, and we’ve created this blog series to illustrate the advantages, as well as applications of using the Translation Management (TMGMT) module as part of a comprehensive translation strategy, and how this can be applied to a decoupled architecture.

So far in the series, we’ve had an in-depth look into what can be achieved when using Drupal as a translation management system, with the use of core functionality and some great contributed modules, and what the translation workflow can look like. We’re now going to shift the focus to look at translations in a decoupled Drupal architecture. 

First, we’ll look at a solution in which we integrated a Gatsby app with a pre-existing custom Drupal 7 translation repository, and then how we would approach decoupled translations with either Drupal 8 or Drupal 9 using the existing translation management system. We’ll be focussing on interface translation strings in this blog post. 

The Challenge


The goal of the project was to build a frontend that integrated with the client's third-party and in-house APIs and applications. Part of this was integrating with an existing Drupal 7 instance that housed the client’s content and an interface translation repository built with custom entities. The application needed to be provided in 8 different languages and due to the size and complexity of the application, introduced nearly 1000 interface translation strings. We needed to make sure that the translation team could continue using this translation repository as normal, and we’d need to be able to re-use some existing translations in the new Gatsby app. 

The Solution 


Initial setup

We started by creating a couple of custom endpoints in the client’s Drupal 7 instance that would allow us to read and write translations. We created an endpoint for listing out all of the translations in JSON format, keyed by langcode, and another endpoint for the creation of new translation entities.

Once the API endpoints were in place, we started to work on the translation framework for the Gatsby application. We chose to use the tried-and-tested i18next package, specifically react-i18next, for use with our React components. We had a large distributed team on the project, so to get us up and running quickly, we made sure there was a language switcher in place, and that the “t” function that i18next provides was available for use before completing the entire synchronisation feature with Drupal 7. This ensured the other developers could identify strings that needed translating and that we wouldn’t have to retrospectively update any text to make it translatable. Documentation for developers explaining the usage in the project was created, demonstrating example usage and the translation system architecture. The usage documentation within the Gatsby app looked similar to the example below:

import { useTranslation } from 'react-i18next';

function MyComponent () {
  const { t } = useTranslation();
  const siteName = ‘Amazee Translations’;
  return <h1>{t('page.section.element-name’,’Welcome to {{siteName}}’, {siteName} )}</h1>
}

Translation diagram

  • Translation key: a unique identifier for the translatable string
  • Default value: the English version of the translatable string. In our context, these matched our screen designs
  • Replacement variables and other options: some translatable strings will include dynamic variables

Synchronising translations


With the foundations set, we implemented the functionality to synchronise translations between the Gatsby app and Drupal 7.

Synchronising translationsThis translation synchronisation happens when the Gatsby application is built, and also periodically using a scheduled cron job.

1) Scan the Gatsby files for translatable strings 

We included and configured the i18next-scanner package to parse all our Typescript files and extract any usages of the “t” function. The extracted translations were all written to a file called dev.json which is used to populate the custom translation entities in Drupal 7. As well as all the parameters that were passed to the “t” function, a link to a custom preview app that lists out all Storybook stories for the given translation key, which gives the translation team context around the string and how it’s used in the app.


// Translation key parameter from t function
“form.address.state-label": {
// Default value parameter from t function (on build this will be prepended with 
 "administrative_title": "State/Province/Territory",
// Default value parameter from t function 
  "en_translation": "State/Province/Territory",
// Link to a custom app that displays all components that use the given translation key
  "context": "http://web.app/i18n/form.address.state-label”z
},

Example output from running the translation string scanExample output from running the translation string scan.


2) Fetch existing translations

To get existing translations, we make a GET request to the custom endpoint we created in Drupal 7, and for each language, we create a JSON file that can be used when initialising i18next.

Example output from running the translation string fetching from Drupal 7Example output from running the translation string fetching from Drupal 7.


3) Add any missing translations

Now that we have what should be available in Drupal 7 (all translatable strings from our Typescript files) and what actually exists in Drupal 7, we can do a quick diff between the dev.json file and the retrieved en.json (as we always create an English translation in Drupal 7 when syncing). 
 
This process means that when a new translation key is added to the Gatsby app, it will be pushed to Drupal on the next build, ready for translation into other languages. And vice versa, if a new translation is added to Drupal, it will be pulled into the app on the next build. 

In Drupal, each key's title is automatically prefixed with the app's version e.g. [1.1.0] Search (search.title). The version number is retrieved from the package.json file, which is updated when there's a new release. This helps identify translation batches for the translation team to work on.

Out in the wild


After the translation synchronisation feature was delivered, the translation process worked in this way:

  • Developers would ensure all strings used within the Gatsby app were wrapped in the t function and that a suitable key was provided. There’s error logging built into the synchronisation process to alert of any missing mandatory data, and using Typescript helps a lot for this too.
  • When features made it through the QA process, a deployment would be made to a pre-production environment where the translation sync would run and upsert the translations into Drupal 7. The translations would be tagged with the appropriate version number, and this would be communicated to the translation team at feature milestones.
  • Using the relevant version number, the translation team would then get to work on all the translations tagged with that version number, and subsequent builds would pull those into the Gatsby app. They would be able to use the preview links to confirm the context of the translation string and add the translation in Drupal 7.

Greenfield approach with Drupal 8 or 9
 

As the needs of our clients differ, we can’t always take a greenfield approach to solutions, and the solution above worked really well in the context of that project. In this example, we were only concerned with interface translations, so if we were to start afresh, here’s how we’d approach handling content and interface translation with Gatsby and Drupal 8 or 9.

Gatsby setup
 

We wouldn’t change a lot here in terms of localisation, we’d still use react-i18next in combination with i18next-scanner. It worked really well and one of the maintainers was super responsive and helpful when we ran into any issues (yay for the open-source community!). 

To synchronise interface translations with Drupal, we’d create a Drupal i18next backend plugin. To retrieve multilingual content from Drupal, we’d opt for using gatsby-source-graphql over gatsby-source-drupal due to gatsby-source-drupal not being multilingual-ready, and we are generally bigger fans of GraphQL and the flexibility it gives. Our very own John Albin presented the foundations for this kind of approach in his Decoupled Days 2019 talk 

Drupal setup


We’d set up GraphQL and use this as the endpoint for the Gatsby app to source its content from. We’d love to try out Gatsby Live Preview and Incremental Builds with this approach - something we’re very excited about after using this functionality successfully with a Gatsby + Contentful project. Content translations would work in the normal way, being retrieved with GraphQL, but for interface translations, i.e. the strings in the Gatsby app that Drupal isn’t aware of, we’d create a contributed module that would be able to communicate with the i18next backend plugin and then the interface strings from the Gatsby app could be managed in Drupal, as normal, as if they were retrieved from the usage of the t function in a Twig template.

Summary


With the progression of Drupal’s API-First initiative, from 7 to 8 and beyond, content and interface translations are now able to be retrieved from a Drupal instance and used in an entirely new frontend. This means there are lots of opportunities to level-up the UX of traditional Drupal 8 websites, without having to change the content and translation management process. Decoupled Drupal is a thriving topic and there are still many challenges to overcome; the important thing is to leave Drupal to what it’s best at, and the translation system is a fantastic and fundamental example of this.

Do you have a project that would benefit from a comprehensive translation strategy? We can help. Check out our services or get in touch today! 

Jul 27 2020
Jul 27

Following the previous post, in this article I wanted to share again some guidelines for debugging Drupal Migrations. While in the last article I wrote down some questions about modules, plugins and configuration object management, in this case I felt like stopping at something more “code-oriented”, more specific. I have chosen for this article some guidelines to configure Xdebug in an IDE (in this case I have used PHPStorm) for migrations running in a locally deployed Drupal using DDEV. With the aim of debugging a Migration process -although actually the process is similar for any other development, since it is something certainly transversal-, here I share with you my fifth article about migrations at Drupal. I hope you find it useful.

Picture from Unsplash, user Krzysztof Niewolny, @epan5

Table of Contents

1- Introduction to Xdebug
2- Xdebug for DDEV
3- Steps for seeting up the IDE
4- Errors launching Drush in containers
5- :wq!

This article is part of a series of posts about Drupal Migrations:

1- Drupal Migrations (I): Basic Resources

2- Drupal Migrations (II): Examples

3- Drupal Migrations (III): Migrating from Google Spreadsheet

4- Drupal Migrations (IV): Debugging Migrations First Part

5- Drupal Migrations (V): Debugging Migrations-II

1- Introduction to Xdebug

In this section we’re going to share some debugging tactics for our migrations that can complement the actions discussed in the previous article: we already know how to check the configuration files, how to use certain processing plugins to extract information from the process and at this moment we’re going to add the third piece to the construction: how to debug the operation of a migration from the point of view of the related code, that is, through the PHP classes involved in all the mechanics.

Xdebug is a classic PHP extension that in its simplest dimension, allows us to track variables from the code to see their values through the execution flows of your software. In this post we won’t stop to explain how to install, configure and manage Xdebug in general terms, but we can be interested in a particular case: in order to run your local Drupal installations and test your migrations, you can use DDEV, a tool for creating local development environments based on Docker containers that already has a pre-installation of Xdebug ready to use.

DDEV avoids having to implement classic LAMP environments by compartmentalizing networks of Docker containers already pre-configured with all the development tools already included, including Xdebug. Here you can find more information, articles and resources about the tool:
https://github.com/drud/awesome-ddev.

2- Xdebug for DDEV

Accepting the premise that we are in a environment build with DDEV, the activation of Xdebug can easily be done in two ways:

Either by editing the config.yaml file in the .ddev resource folder, path: your_project/.ddev/config.yaml, where you can activate xdebug on line 9 of the file:

DDEV enabling Xdebug

Or by command line, using the DDEV-related commands outside the container:

ddev exec enable_xdebug
ddev exec disable_xdebug

Or also:

ddev xdebug
ddev xdebug on
ddev xdebug off

The above commands will serve to activate and deactivate the resource (for performance reasons, the initial state of Xdebug in a DDEV installation is deactivated by default). Since Xdebug is a server-side tool, it is already in the container acting as a web server and requires no further configuration. It’s just a matter of preparing our usual IDE.

In essence, any IDE works the same way with Xdebug: it listens on a port and reacts as soon as it receives an input. Xdebug usually uses port 9000, and for each IDE there are some configuration examples that you can follow here:

And the basic technique was already exposed at the time by the PHPStorm team (Now I’m using PHPStorm for this example): https://blog.jetbrains.com/phpstorm/2012/03/new-in-4-0-easier-debugging-of-remote-php-command-line-scripts/.

3- Steps for setting up the IDE

Let’s look at some basic steps of setting up Xdebug in the PHPStorm IDE, although the philosophy behind it in others like VSCode is just the same.
The first idea is that by activating Xdebug, we’ll have it available for any PHP script running from the command line. This makes it especially valuable for debugging Drush or Drupal Console (Old and abandoned Drupal Console, BTW) . In this case, we also add the enormous facilitation of automated activation already in Xdebug in local DDEV-based deployments, so we add a lot of facilities to debug our migration.

Let’s take the next steps:

DDEV enabling Xdebug Server

1- Server for the project

Open the Server configuration for your project: go to File-> Settings -> Languages & Frameworks -> PHP -> Servers and create a new Server in the side menu. Give it a name (it will be easier if you use the name of your DDEV deployment for the project). Add port 80 and activate Xdebug as debugger.

2- Initial setup

When using PHPStorm non-locally, we need to set up an “external” server and map the project files. In the case of not being in a classic LAMP environment (that would be local environment), we will need to make this configuration (Docker or DDEV suppose a non-local way of deployment in some way). DDEV serves the Drupal installation files from within its web container, starting with /var/www/html/ but the files are located locally within a typical /home/user/folder/projects/my_project path, so we will load this file mapping.

3- Listening Debug connections

Activate the active listening button for debugging.

4- Load environment variable in the container

For this we have two options. We can either load it for each debugging session, entering it into the DDEV container using the ddev ssh instruction and then loading the environment variable from inside the web container with the next instruction, just execute:
export PHP_IDE_CONFIG="serverName=your.project.name.ddev.site"

You can also permanently load the environment variable by creating a companion file in the .ddev/ folder of the project, a docker-compose.env.yaml file that is located next to the other docker-compose related files from the DDEV configuration, with the content:

version: '3.6'
services:
 web:
   environment:
     - PHP_IDE_CONFIG=serverName=your.project.name.ddev.site

This file will be merged with the other files when you restarting the project container network (ddev start / ddev stop) and the variable will be loaded more persistently and automatically.

5- Breakpoints

We can then try to place various breakpoints along the code involved in a migration. For example, for processing that does not require transformation treatment (only the transfer from a source to a destination), we already know that a Process Plugin provided by default by the Migrate API is used: the Get.php class, present in /core/modules/migrate/src/Plugin/migrate/process/Get.php and in this case we can insert some breakpoints in what will be a safe place for certain migration examples: for example in the transform() method of the class (line 106):

DDEV enabling Xdebug with breakpoints

4- Errors launching Drush in containers

When we have the IDE in active listening for debugging, some breakpoints strategically located and we launch some Drush command in the context of DDEV, it is possible that when executing Drush commands, from the IDE we receive an error about the mapping of files associated to Drush. Without meaning to, it is executed on the global Drush launcher of the container, installed in the path /usr/local/bin/drush (of the operating system of the web container).

DDEV enabling Xdebug Drush mapping in containers

In that case, we have two options:

Ỳou can run drush directly on the /vendor address of the project (which is mapped in the previous configuration of our remote server), using the forms:

  • From outside the container: ddev exec /vendor/bin/drush migrate-status
  • From inside the container (ddev ssh): /vendor/bin/drush migrate-status

Another option is recommended by Randy Fay, @randyfay (one of the creators of DDEV) in the commentary to this Github issue:
github.com/ddev/issues/2341#issuecomment-650618158.

That is, take advantage of the Drush command example as usually described in the drush.example file in the path /your-name-project/.ddev/commands/web/ and modify the Drush use case it contains by directly placing the previous path to the project vendor, going from :
drush [email protected] to: /var/www/html/vendor/bin/drush [email protected]

This will allow us to run debugging with Xdebug for our migrations in DDEV environments. Here you can find more information about it:

Now you can run your migration with all the safety and comfort!

5- :wq!

[embedded content]

Jul 25 2020
Jul 25

Over the past few years, the Drupal community has been (sometimes slowly) embracing the Composer dependency manager tool for PHP projects. We have become accustomed to adding Drupal modules and base themes to our projects using composer require but many of us have only scratched the surface of what more Composer can do for us.

In this article, we'll go step-by-step in adding a non-PHP dependency to our project using Composer - as well as the helpful Composer installers extender plugin. We'll utilize Asset Packagist, a Composer repository for many popular NPM and Bower assets including things like Javascript libraries and CSS frameworks.

The general idea is that for just about any Drupal module or base theme that asks you to manually download an external library - you can use this method instead of manual steps.

Example 1: Simple, but not super-useful

Let's start with a simple example - adding the required Photoswipe module's library. The instructions for this module include some manual steps to download and place the plugin in a specific directory as well as an alternative installation using Composer. In this example, we'll accomplish the download part using Asset Packagist.

First, add the Photoswipe Drupal module using:

composer require drupal/photoswipe

Next, add Asset Packagist to the repositories section of the project's composer.json file:

{
  "type": "composer",
  "url": "https://asset-packagist.org"
}

Then, find the Photoswipe Javascript library on Asset Packagist.

Finally, require the Photoswipe Javascript library using:

composer require npm-asset/photoswipe

Supereasy, right?! Yes, but notice that the Photoswipe library wasn't installed in the proper /web/libraries/ location. Instead, Composer installed it in its default location for dependencies, the /vendor/ directory. Because the Photoswipe library doesn't have a composer.json file, and therefore doesn't have a Composer "type", there's nothing that the Composer installers plugin can do to help.

Example 2: Placement

The Composer installers extender plugin can help with this task. It allows us to extend the types of dependencies that Composer installers can handle (by default, Composer installers only handles a specific set of dependency types. First, add the Composer installers extender plugin to your project:

composer require oomphinc/composer-installers-extender

Let's back up example 1 a bit so we can not only download the Photoswipe library to our project, but also put it in the proper place.

composer remove npm-asset/photoswipe

Next, we need to let Composer installers extender that we want its help in handling Composer dependencies from the npm-asset vendor. We do this by adding a bit of configuration to our project composer.json's extras section:

"installer-types": ["npm-asset"],

This allows Composer installers extender to help Composer installers place dependencies from the npm-asset vendor in a custom directory. Let's set the custom directory by adding to the default (if you're using the drupal/recommended-project Composer template) installer-paths section of the composer.json file:

"web/libraries/{$name}": [
  "type:drupal-library",
  "npm-asset/photoswipe"
],

Finally, use Composer to re-require the Photoswipe library:

composer require npm-asset/photoswipe

Verify that the Photoswipe Javascript library has been installed in the web/libraries/ directory. 

Summary

The combination of Asset Packagist and the Composer installers extender really opens the door to allow you to manage the vast majority of all your project dependencies in a consistent manner. 

Use it to install Bootstrap, Foundation, the Chosen module's Javascript library, A11y, Babel, and other popular NPM and Bower packages. 

Jul 24 2020
Jul 24

All of your interaction data are stored in a universal visitor profile. The data are available to create segments. These, in turn, can be used to personalize interactions, across all channels. Segments are available out-of-the-box in Drupal’s page builder and Mautic’s email and marketing content builders.

The related Customer Data Platform, Unomi, is secure, scalable and is able to handle vasts quantities of data. Our AI engine is able to detect behavioural patterns from these data and is able to label visitors in real time according to its AI-defined segments. This allows for further personalization.

Data capture is easy: it only takes one tracking script on your website, comparable to a Google Analytics integration. You could be gathering relevant data within minutes of reading this page. Sounds interesting? See for yourself!

Jul 24 2020
Jul 24

Today, User experience (UX) is not just about how a user feels when interacting with your website. In this world of rapidly growing interfaces and APIs, content plays a supreme role in offering your users with exceptional UX. To keep up the pace, you need to adopt hot-selling, fast-moving front-end technologies like Angular JS, React JS, etc. that can deliver your content in an application-like speed.

Headless Drupal (or decoupled Drupal) is one such approach that is gaining much popularity because of its innovative ability to deliver outstanding digital experiences. Bigwigs like Weather.com, The Tonight Show, Great Wolf Resorts, Warner Music Group and many more, have taken the headless Drupal route offering their customers with interactive and unique front-end designs and fast-loading websites. With Drupal 8's commitment to the API-first architecture, content can be used and displayed anywhere.

What is Headless CMS?

headless drupal


To go headless or not is a rather tricky decision to make in this digital world. So what’s the whole buzz about going Headless? Simply put, in a headless CMS architecture, the front-end (consumers of content) of the CMS is detached from the back-end (provider of content). This not only enables your content to be delivered anywhere, it allows you to leverage latest Front-end technologies that offer unmatched user experiences.
 

What is Headless / Decoupled Drupal ?

Conventionally, Drupal websites are meant to multi-task. Which means, Drupal manages both - the back-end content management as well as the front-end rendering of content. There is no doubt that Drupal CMS on its own can deliver a rich user experience to the end user but when it comes down to instantaneous responses for a request, delivering content seamlessly in different interfaces, it does fall short. In a decoupled Drupal architecture, instead of the Drupal’s theme layer, a client-side framework like AngularJS, React or Backbone.JS is used. A user request does not have to be processed by the server all the time, which can drastically improve the speed and UX of your Drupal website.

Drupal 8 's API-first architecture took its first step by introducing REST API in core (Drupal 8.0). However, it came with its own set of challenges (setup and usage). Since then, many improvements have been made in providing better RESTful and non-RESTful webservices like JSON-API and GraphQL.

Technically speaking, a headless Drupal website sends out data in HTTP/JSON formats. A powerful front-end UI framework renders this data and delivers the web page.

Headless-Drupal

Categorizing Decoupled Drupal

In a traditional Drupal CMS architecture, the browser invokes a request that is processed by PHP logic which then renders the HTML and sends it back to the browser. Of course, the developer can embed Javascript for some client-side improvements but this can result in a situation where different client-side frameworks are being used for different modules. Thus making it an extremely complex system.

Progressive Decoupling

If you are looking to preserve your Drupal Theme layer and yet be able to provide immediate responses to the browser, the Progressive Decoupling approach is your best move. Here you can have your cake and eat it too! The initial application state is rendered by Drupal which can be then manipulated by client-side coding. Modules can be written in PHP or Javascript while you can avail the powerful performance benefits of Drupal.

This version of decoupled Drupal allows for contextualized interfaces, content workflow, site preview, and other features to remain usable and integrated with Drupal as a whole. While content editors and site assemblers feel at home with this decoupled Drupal version, it also allows front-end developers to pursue their own velocity while keeping site assemblers unblocked, by dedicating a portion of the page to a JavaScript framework.

In short, a progressively decoupled Drupal offers an approach that does a great job in striking the perfect balance between editorial needs like layout management and developer desires to use more JavaScript.

decoupling drupal
A graph illustrating the progressive decoupling spectrum for these examples – Source- Acquia
 

Fully Decoupled Architecture

And then there’s the Full decoupling – where Drupal’s presentation layer is completely replaced with a client-side framework. This version of the decoupled CMS allows an uninterrupted workflow as the client-side framework also acts as a server-side pre-renderer. Drupal CMS is purely used as a content repository that takes care of all the back-stage jazz. When you completely ignore Drupal’s theme functionality you are also letting go of some effective performance benefits that Drupal provides. Also a lot of rebuilding would need to be done to fully decouple the administrative interface and front-end of a Drupal website. Using Javascript on the server-side also complicates the infrastructure requirements.

While a fully decoupled Drupal architecture has gained more attention in recent years with the growth of JavaScript showing no signs of slowing down, it involves separation of concerns between your content structure and its presentation. In a nut shell, creating a fully decoupled Drupal system is like treating your web experience as a separate application that needs to be served content.

Which Decoupled Drupal Solution is Best for You?

Traditionally, Drupal CMS is meant to do both – content management and rendering the front-end for the whole website. A lot of pressure, don’t you think? Drupal experts believe that Drupal’s strengths lies in the power and flexibility of its back-end and that it needs to be service oriented first instead of HTML oriented. Decoupling Drupal means letting some other system manage the front-end while Drupal takes care of the back-end system. Why is it a good idea to decouple Drupal, you ask?

If you want to adopt cutting-edge and modern front-end technologies that Drupal cannot provide you will need a powerful front-end framework like React JS or Angular JS. With a headless Drupal approach, you can have all of this and still maintain your robust backend Drupal CMS.

  • With the Headless Drupal architecture, you can “Write once and publish everywhere”. This system allows content editors, marketers and business owners to create content once and deliver it to multiple interfaces seamlessly.
  • With a decoupled CMS, detaching the front-end from the back-end content management system will allow for more flexibility and efficiency of the Drupal content model. Just like how delegating work decreases your workload and increases productivity.
  • A layered architecture promotes a more secure system. Site admins can restrict access to different areas of the infrastructure. 
  • Headless Drupal allows front-end developers to have full control over the presentation, UI design and UX of the website. The combination of a great client-side framework and a seasoned front-end developer can get you a website with a rich, faster, application-like user-experience, and seamless interactivity.
  • Integrating with third party applications is easier and more efficient with a headless Drupal model.
  • Both the front-end and back-end developers can work independently which can lead to efficient and speedy delivery of a project.
  • If you want to redesign your website, you won’t have to re-implement your Drupal CMS. Likewise, revamping your back-end system can be accomplished without having to alter your front- end.

Is headless Drupal for everybody?

Although decoupling Drupal can help you achieve your goals of an uninterrupted and application-like user- experience, it might not be a good fit for everyone. Here’s why –

  • Websites like News sites or Blogs, that don’t really need much user interactivity, will not benefit from decoupling their Drupal website.
  • When you opt for a fully decoupled Drupal architecture for your website, you are letting go of some of the top (and free) functionalities that come with the Drupal theme layer like the block placements, layout and display management, content previews, UI localization, security features like cross-site scripting (XSS), etc. Some of them cannot be replicated by a client-side framework.
  • If budget is an issue you need to keep in mind about the price you will have to shell out for experienced front-end developers. Also the cost for rebuilding a missing (otherwise freely available) Drupal feature from scratch. 

Who uses Headless Drupal?

Many top enterprises have taken the headless Drupal approach and successfully so! Their websites are fast to load and offer interactive experiences to their users in all devices and interfaces. Some examples are –

  • The Tonight Show with Jimmy Fallon – uses Backbone.js and Node.js for the front-end
  • Weather[dot]com – uses Angular.js for the front-end
  • Great Wolf Resorts – uses CoffeeScript and Spine framework
  • EC Red Bull Salzburg – uses Angular.js for the front-end
  • Warner Music Group – uses Angular.js for the front-end

…And many more on this list here.

Jul 24 2020
Jul 24

This is part 1 of the two-part series on the power of open source in the time of COVID-19. In part 2, we will throw light on how the Drupal world, one of the largest open source communities, is tackling this pandemic.
 
As COVID-19 makes its way across the globe, we are all well aware of the extraordinary pressure to stay focused and running. There is nothing wrong to say that we are all in the midst of this miserable pandemic, which is not just limited to our family, colleagues, and friends but has reverberated through every corner of the globe. The effect of the novel coronavirus (COVID-19) has generated many new challenges for the business world.

Blue background and a guy is pushing blocks depicting Open source in the time of Covid 19 pandemic


However, just like every other thing, nothing lasts forever. In other words, the open-source community has already taken an active role in pushing forward this important initiative. Yes, you heard it right! Open source community has been actively participating in combating the issues related to COVID 19.
 
This article serves as a culmination to the questions that have surfaced the impact of open source against COVID 19. However, before we hit the crux of the matter, let’s take a step back and have a glance at the possible outcomes coronavirus pandemic may lead to.

Repercussions of COVID 19

According to the UN’s Framework for the Immediate Socio-Economic Response to the COVID 19 Crisis, “The COVID-19 pandemic is far more than a health crisis’’. In other words, COVID 19 is all set to affect societies and econ­omies at their core. Moreover, there are higher possibilities of an increase in poverty and inequalities on a global scale, thereby making the achievement of SDGs (Sustainable Development Goals) urgent than ever before.

The pandemic is aggravating and deepening the pre-existing inequalities that are present in nature. That being said, COVID 19 is constantly exposing vulnerabilities in social, political, economic, and biodiversity systems, which are in turn augmenting the impacts of the pandemic. Out of which, the most performed inequality is gender inequality.

The world we live in is currently facing serious financial hardship, despite the fact that governments and private entities have managed to have workers stay home, banned public gatherings, etc. The pandemic COVID 19 has resulted in a global slowdown, which in turn has reduced the GDP in half.

All of these aforesaid scenarios portend physical hardships for people living around the world. However, there is one bright spot called ‘’Open Source’’ that more and more organizations are turning to. In the world of the pandemic, open source has emerged as an eye to the future. Therefore, it's worth digging into open source in order to minimize the negative impacts on individuals as well as on companies throughout this time.

Open-source: The Game Changer

The inception of ‘’Open Source’’ dates back to the late ’70s and early ’80s, states Hackernoon. The open-source movement stemmed from a widespread revolution, focussing on software with source code that anyone can easily inspect, modify, and enhance. Within a short span of time, open-source methodology became the most widely used software design and development method. 

The term openness has been playing a pivotal role to the individuals as well as companies dealing with the COVID 19. Open source allows teams of developers to design software in order to administer and meet the specific needs of COVID 19 cases. Moreover, the software is designed to help research labs who are constantly working with specialized proteins that might be beneficial to treat COVID 19. 

Previous studies and experiences have shown that open-source is a brilliant option in disaster situations. According to the Health Level 7 (HL7) International, a nonprofit health data standards development organization, open source has come forward with an intent to support the cause in the form of hackathons. The organization is led by the Debian Project with a wide range of sponsors including MIT, Johns Hopkins University, Microsoft Research, and the White House. 

Fight Against COVID 19

Once you are exposed to what open source actually is, you must be intrigued to know about the open-source movement and the methodologies that are responsible to positively impact the business world and billions of people across the globe.
 
The role of open source is not limited to sharing and collaborating on software source code, rather there are various open-source projects that have been seen helping to track the pandemic, provide helpful datasets, and more. You may be experiencing some idle time while crunching the numbers against the Coronavirus, as the open-source communities are lending their methodologies to better understand this disease and potentially find a cure.

The National Health Service (NHS) in the United Kingdom has recently launched a new text message notification service for individuals who are put at home quarantine with suspected coronavirus symptoms using the open-source GOV.UK Notify application

Regional governments have also started the battle against COVID 19 by developing new open-source tools, such as the Government of Ontario Self-Assessment Tool. This step is an initiative to help members of their community to make safer and more informed decisions during this pandemic period. 

There are open source and public resources that are published by government agencies and other public sector organizations around the world on Open Government Solutions. These resources can help government agencies at all levels find solutions that have worked in other governments so that they can accelerate their digital transformation. 

Singapore’s Government Technology Agency (GovTech) has recently open sourced the contact-tracing protocol. This open source development model is used in its TraceTogether app with a view to help other authorities’ eliminate the COVID 19 outbreak. Not to mention, TraceTogether is one of the most efficient open-source projects that have emerged around the globe lately.

Recently, UCSC’s Genomics Institute (GI) has come up with a Genome Browser for SARS-CoV-2 in order to keep track of the data to ensure quick cross-reference. This new browser platform i.e SARS-CoV-2 browser provides the required amount of support for the development of therapeutics and vaccines against the virus. Furthermore, the UCSC facility is also looking forward to developing an open-source 3D browser to gamify crowdsourcing of COVID 19 data. 

The Center for Research in Open Source Software (CROSS) is collaborating with the University of Sonora on a dashboard so as to display the summaries of COVID-19 data on a daily basis.  

Mozilla, the organization behind the open source Firefox web browser, announced the open source COVID-19 Solutions Fund as part of its Open Source Support Program, which grants awards of up to $50,000 each to open source projects responding to COVID-19.

In addition to this, Mozilla is also openly supporting the Open COVID Pledge, an international coalition of scientists, technologists, and legal experts, that is calling on companies, universities and other organizations to make their intellectual property temporarily available free of charge for use in ending the pandemic and minimizing its impact.

COVID 19 pandemic has pushed Renesas engineers to take open source to another level. That being said, Renesas engineers have created a ventilator system with a view to addressing the challenges of COVID-19.  The engineers have built an easy to assemble three board ventilator designs. The main idea behind this creation is to control the tidal volume and mixture of gas that has been delivered to the patient while monitoring the patient’s status. 

The University of Pennsylvania (US) has come up with an open-source tool that estimates the impact of Covid-19 on local communities based on population size, hospitalization rates, and whether or when social distancing measures were implemented.

Summing Up

While the research and medical communities are constantly working to develop effective solutions to end the COVID 19 pandemic, open-source unlocks a whole new world of opportunities. That is to say, open-source communities have been active in the global effort to fight the COVID-19 pandemic. Not to mention, the movement has augmented the level of collaboration and speed at which data and resources are shared at an international level.

Got a question? Feel free to ping us at [email protected] and our industry experts will get in touch with you.

Jul 23 2020
Jul 23

The Entity Extra Field module for Drupal 8 lets site builders attach blocks, views, token driven content, and entity operation links as orderable pseudo-fields to any entity’s edit form or its displays. After installing the module any user with the Administer entity extra field permission can easily configure node attributes like author or publish date as orderable fields — as well as create block fields, views fields, operation link fields (like Edit and View) or a host of other custom entity fields with a simple point and click interface.

Entity Extra Field is essentially an easy-to-use UI for configuring Drupal’s pseudo-field components that are defined and exposed through hook_entity_extra_field_info(). It puts the power and flexibility of pseudo-field elements into the hands of site builders, delivering a wide variety of new field configuration possibilities without dipping into custom code.

A quickstart example: node properties as fields

Here’s a quick example of configuring node properties as fields (or technically, pseudo-fields). Let’s say you’d like your site’s Article content type to display the author at the bottom of the post, instead of the standard display just beneath the title. With the Entity Extra Field module, you’ll be done in two minutes. First make sure you have the Token module installed on your site, then download the Entity Extra Field module via composer using:

composer require drupal/entity_extra_field

You can read about using composer to download modules & dependencies on Drupal.org. With Entity Extra Field installed, you’re ready to get started.

An article node with the author and publication date displayed beneath the article title Right out of the box, an Article node type displays the authoring information just beneath the node title.
  1. Enable both the Entity Extra Field and Entity Extra Field UI modules via drush en entity_extra_field and drush en entity_extra_field_ui or the old-fashioned way on the Extend page at /admin/modules
  2. Navigate to Content types administration at /admin/structure/types and click the Manage fields button next to Article
  3. Click on the new tab, Manage extra fields, to add your pseudo-field
  4. Click the Add extra field button at the top of the page, then fill out the form to define your new "Node author" field:
    • Field Name: Node author
    • Display Type: View
    • Description: The node’s author
    • Field type: Token
    • Field type configuration: Text field
    • Token value: Another great article by [node:author] (note that you can browse through about a billion other useful tokens via Browse available tokens)
  5. Use the Field Type Conditions options at the bottom of the page to enable your new pseudo-field for just the Article content type
  6. Finally, after saving your new "Node author" pseudo-field, head to the Manage Display tab of your Article content type and order your new field — in our case, just below the body

To complete our task, we’ll probably also want to disable Display author and date information in the Display Settings section of the Article content type Edit tab. Voila! Your node author is now a field.

An article node with the node author displayed below the body text using the Entity Extra Field module. After a few quick configuration steps, an Article node displays the custom author pseudo-field just below the body.

You could easily repeat the above steps to establish a new "Post date" field — also orderable just like the new "Node author" field — and place that beneath the title or wherever you please. It’s also worth noting that the Field Type Conditions options (step 5 above) can add a whole layer of flexibility to when and how your pseudo-fields appear.

Entity Extra Field: Taking it to the next level

Creating token fields is just the beginning. With the Entity Extra Field module you can attach any block, view (with contextual arguments), token, formatted textarea with tokens, or — thanks to recent contributions from geek-merlin — entity operation links like Edit and View to any entity type edit form or display. The result isn’t limited to super configurable entity displays — there’s a whole world of possibilities using views with arguments or custom blocks as pseudo-fields.

Example graph data rendered with the help of Entity Extra Field shows uninsured statistics by race / ethnicity. An Entity Extra Field implementation for The Commonwealth Fund's Health System Data Center uses a block pseudo-field to place dynamically rendered React charts on the node page — driven by node field data.

I originally built this module, for example, to display dynamically rendered React charts as a node pseudo-field, where the data represented in the chart is driven by the values of various fields from the node context definition. The result is an easy-to-edit node form where content managers can add or edit the statistical data that drives the charts via normal node fields — and an orderable, configurable pseudo-field on the node display that renders the chart just like a regular field without complex configurations or poking around in code.

What else can you do with the Entity Extra Field module? You decide. And if you come up with anything you’d like to share, please let me know!

Jul 23 2020
Jul 23

Last week wrapped up DrupalCon Global 2020, the first virtual edition of the biggest Drupal learning and networking event in the world.

Like pretty much everything in 2020, things are different this year and will be looked on in the future with an asterisk. When sports teams win their championships this year, there will be a little footnote at the bottom of future statistics books noting that they won in 2020, the year of the pandemic. The team won, but under strange circumstances, so maybe consider it a different win than other years.

I think we'll be talking about this DrupalCon in the same way for years to come. With an asterisk. Not because it was a failure (it certainly wasn't it was a huge success), but because it will influence future DrupalCons.

If you've read any Twitter threads or other blog posts about this year's conference, you'll probably hear, "It was a great virtual conference, but it just wasn't the same as real life."

Totally agree. But I'm going to break down the different aspects of the 'Con:

Technical

This year's conference used Hopin to manage the video and chat for the stage, sessions, and exhibition hall. I had never used Hopin before, but the signup process via the Drupal Association's emails were seamless.

On the morning of July 14, before the conference got started, there was already some buzz. On the right-hand side of the screen was a chat window that everybody at the conference could see. On another tab was a list of polls people could answer, and you could see a list of all the people that were attending the conference.

Like a real-life conference, you could "walk" (i.e., click) to a different hall and see what's going on. There was a main stage, session rooms, the exhibition hall, and a Networking tab which mimics the halls of a real conference where you meet folks. The Networking tab allowed you to be matched up with a random person and chat.

Now, this isn't how networking in real life works: in reality, you get introduced by somebody else or some eye contact is made and a conversation isn't initiated. So at first glance, the Networking tab doesn't mimic how conference networking happens. But there's an advantage to this I didn't see before writing this: I might get matched up with somebody I wouldn't think to approach at an in-person conference.

And maybe that's a lesson to learn: our networking software doesn't need to mirror the real-world exactly for it to be better.

Video and Sound Quality

At 9:30 AM ET, the conference officially began and our opening speakers, Tim Lehnen and Heather Rocker took the stage... from their homes. The video and sound quality was fantastic with just the two of them on stage. I'm sure mountains of rehearsals took place, but there was never seemingly any large lag or awkward "Could you repeat that?" or "Can you see my screen?"

screenshot displaying the DrupalCon virtual streaming interface

Less than two minutes after starting, more than 800 people were watching. And it held up. So too during the sessions.

I did have issues with the video when there were lots of people sharing their video at the same time, such as in BOFs ('Birds of a Feather', essentially small groups that gather together to discuss a shared topic of interest), This was not a limitation of Hopin, but I think of my 2015 MacBook Pro laptop. Fans ran wild.

Having a bunch of people hanging out in a room adds a nice personal feeling. But maybe a recommendation for the future: when you get more than 6 people in a session, tell all but two people to turn off their video.

Chat

In brief: the chat worked well. There was an ever present chat for the entire conference which you could join, but then also a chat just for the session itself. Thumbs up.

Live Closed Captioning

A welcome addition to those with hearing difficulties, each session had live captioning provided by StreamText. Although I personally didn't have a need for it, it's fantastic that this was available and is now expected as default at conferences. The captions not only showed what was said, but also who was talking.

A series of tweets about the live closed captioning feature at DrupalCon 2020

Browser Issues

My primary browser is Safari. When visiting the Exhibition Hall, I ran into a bug where it would auto-scroll through all of the sponsors and the page became unresponsive. Not the Drupal Association's fault (they don't operate Hopin), but it's still surprising to me that web services built these days aren't built for all browsers.

I didn't try on my phone or tablet, but from what my colleagues told me, the experience on an iPhone was less than ideal.

Overall

After comparing notes with my colleague Suzanne, who was a presenter at DrupalCon and was also presenting at another online conference the same week using another tool called MaestroConference, Hopin clearly has a lot of the virtual conference experience features figured out. There's room for improvement, but this is way better than being on a series of Zoom calls all day long.

Session Experience

The meat of a DrupalCon are the sessions where you get to learn new things. How did it fare this year?

As an attendee, I actually preferred this format! The presenter showed their video and their slides, either of which I could enlarge if I clicked on them, but the user chat was the best part: in real-time the audience could provide commentary and share tips. So if the presenter mentioned a module or a project, somebody in the chat would usually link to it. If somebody asked a question in the chat that was directed generally, somebody would usually answer.

A poll where 77% of respondents said that in-session interaction has been enhanced by the virtual DrupalCon experience

As a presenter, I could see a river of comments being distracting. Also: there was no obvious feature to share a comment as a question saved for the end, which would be a big help for the presenter. Also, threaded comments would have been useful to help organize the conversation.

BOF Experience

Even as somebody who has gone to many DrupalCons, I still felt nervous about speaking up in BOFs (Birds of a Feather), especially if one of the people leading the session was somebody with notoriety in the community.

With this year's format, I felt way more comfortable joining in. You could join a BOF and just type in the chat section, or you could share your mic and video and be a "presenter" in the BOF. I did this several times and didn't feel the nervousness that I usually felt in normal conferences.

Maybe it had to do with wanting to support the person leading the BOF and if I chimed in with my video it made their job easier? Whatever it was, the intimidation did not feel so high this time around.

One of the first BOFs I attended was discussing the role of the Classy base theme in future versions of Drupal. Does it make sense to keep Classy as a Core theme when Drupal has now adopted a continuous upgrade path? In this BOF was a contributor who has been in the community for a long time, John Albin, and I've appreciated his work over the years. In a real-life conference, I may have been too shy to join in and speak up, but with Hopin, I felt comfortable to turn my mic and video on and join the conversation.

Another BOF was discussing how to do Drupal on a low budget. A lot of the web projects that get noticed are high-profile, big budget sites. But in my web developer experience, most of the projects I have done were smaller side-gig projects that can't afford $400/month hosting. More like, $100 / year hosting.

In this BOF, a small group of us talked about the limits of shared hosting and some ways we can get around them. This felt like a conversation that needs to happen more in our community: if we don't address the issues that lower-budget clients have, then we should not be shocked that Wordpress and Squarespace grab those clients.

DrupalCon as an Experience

My first DrupalCon was in Denver in 2012. I was a freelancer at the time and went to the conference alone, not knowing anybody that was going to be there, save maybe a few usernames that I recognized.

This was the biggest conference I had been to up to that date, and the Denver Convention Center still has to be the largest conference center I've visited. It's just massive, making my first few steps into DrupalCon intimidating.

But luckily, back in Denver, there was a friendly circle of people that I joined in conversation and they quickly invited me out to go for dinner and drinks. I'll never forget that (thanks Matthew Saunders!) I had a blast that evening, meeting a bunch of other new faces that the group introduced me to. And then throughout the rest of the conference there was a launching pad of people that I could wave to in-between sessions and during breaks. You felt like you belonged there.

It should be noted, mentorship programs have been put in place for people who are new to DrupalCon, who may have been just like me back 8 years ago in Denver. They also adapted for this conference so people felt welcomed virtually.

2020 as a DrupalCon Veteran

If you go to enough DrupalCons, you'll learn the lingo, inside jokes, and the traditions that carry on each year. Some of those jokes lived on in the chat in this year's conference:

  • "The Wi-Fi is holding up this year!"
  • "Please sit in the middle of the row and don't block the doors!"
  • "Please record how much coffee you drank so we can get an estimate on how much we drank in total"

These quotes will make sense to you if you've been to DrupalCons before. They're fun little things about the conference, and it's good to see them being reinvented in this new circumstance.

But for somebody that this is their first DrupalCon? This will be lost on them. Nobody's fault of course, but it'll be different for them.

2020 as a DrupalCon Novice

According to the poll put in the Hopin chat, this was a lot of people's first time coming to a DrupalCon 35% at the time I took this screenshot.

A poll showing that 35% of attendees in 2020 were DrupalCon novices

This is truly fantastic news that new people are interested and engaged! But my fear is that they won't get that same feeling of group acceptance that I felt at my first DrupalCon in 2012. Not that they aren't accepted and welcomed by the community, but the limitations of any virtual conference are that it can't deliver that same attendee experience -- and I'm not sure if it ever can.

One of the biggest things I learned from DrupalCon 2012 in Denver was how to network and meet people, and that week was a crash course. In the span of a week, I must have talked to at least 300 people and took handfuls of business cards (including one from my current employer, Evolving Web, who I didn't even know at the time!)

As mentioned, there was the networking tab in Hopin, which is great, but I'm not sure if it's a replacement for meeting people in real-life. But maybe this is the new way we'll have to network.

Future DrupalCons

At the start of this post, I said this would be the DrupalCon with the asterisk, the outlier conference that we'll talk about for years to come. Not only because it was the oddest one, but because it will affect all future DrupalCons.

At previous conferences, I had heard the idea floated around that we should do a fully virtual conference, but it never came to fruition. We only did it when our arm was twisted and we had to.

DrupalCon Barcelona is coming up in December, and at the time of this writing, it's still planned to go ahead in-person. Let's say that does happen: what if some people don't feel comfortable about going, but still want to virtually attend? Will we need to organize our conferences for the virtual crowd and the in-person crowd?

Next, the concern of travel-related climate change is real. If this DrupalCon was such a success and it led to less carbon emissions, wouldn't it be our duty to no longer do in-person conferences, despite the loss of 'oh-you-had-to-be-there' stories and experiences?

And, accessibility: this was the most accessible DrupalCon ever. In terms of travel, finances, and physical mobility, you could easily argue this was the most equitable conference we have organized yet. If we go back to 'normal', in-person-only conferences, less people will be able to join because of previous family commitments and finances. Is that a decision that we are willing to make?

A Success

With all the barriers put up on the organizers of this conference over the last months, I can say with certainty that this was a very successful DrupalCon that exceeded my expectations of what a virtual conference can look like.

I think we have some lessons learned and have some tough choices to make for the future, but the organizers should be proud.

Thank you for your work!

Jul 23 2020
Jul 23

Content authors and content editors always look out for a seamless, easy-to-use experience when it comes to page building. Drag-and-drop and WYSIWYG tools are something they expect when they want to create and design pages. Drupal Layout Builder offers this exact experience with its easy-to-use page building capability, in Drupal core. 

Drupal Layout Builder is unique and provides a powerful visual design tool to let content authors change the way content is presented. Introduced in Drupal core in its latest version, Layout Builder in Drupal 8 allows you to add/remove sections to display the content using different layouts, and customizing your pages based on the requirements. The Layout Builder Module in Drupal 8 also allows you to combine these sections and create a truly customized page. 

The Drupal 8 Layout Builder can be used in two different ways. It can be used to create a layout for each content type on the website, and also to create a layout for an individual piece of content.

Introducing the Drupal Layout Builder 

The Drupal 8 Layout Builder module allows you to customize the design of the entities such as content types, taxonomy, users etc. It provides an easy-to-use drag and drop option for site builders to place blocks, fields etc.

The layout builder module in Drupal 8 makes it easier to build your layouts by offering a preview of the changes made while building your layouts. Instead of having to save every small change made in the layout and then looking it up on the front-end, layout builder in Drupal 8 layout builder allows previews of the changes made for a seamless layout building experience. 

Installing and setting up the Drupal 8 Layout Builder module

In order to install/setup the Drupal 8 layout builder module, navigate to Extend and enable both Layout Builder and Layout Discovery module..

Installinf and setting up the layout builder

Note: Layout Builder was introduced as a stable module in Drupal 8.7 core. So, make sure you’re using the latest version. In older versions of Drupal, it was an experimental module.

1. Use Drupal Layout Builder to Customize Content-Type and Taxonomy

1. Once you have installed the module, navigate to Structure, Content types and click on “Manage display” for any content type , For now we will use the “article” content type.

layout builder module

2. Scroll to the bottom and click on Layout options and select “Use Layout Builder”, then click on Save.

Layout builder module in drupal 8

3. Once you’ve enabled Layout Builder on the view mode, you can see a “Manage layout” option instead of field formatters. You can use Layout Builder for any of the view modes present.
 

Manage Display

4. When you click on “Manage layout”, you’ll be redirected to article content type layout.

edit layout builder

2. Add Sections to the Layout

1. To add sections to the layout builder, remove the default section first. Click on the close icon (as depicted in the below screenshot). Further, you will be provided with an option to the right side of your screen to remove the default section. Click on “Remove”.

add sections to layout builder

2. Let us add a few sections to our layout by clicking on the “Add Section” option. Further, you will be provided with options to choose a layout of your choice for your section, on the right side of the screen. For now, let us select the “Two Column Section”.

edit layout

3. You will have an option to choose the width for your “Two Column Layout”. Let us select a “50%/50%” for now. Then click on “Add section”.

Two column layout

Once added, you should be able to see an “Add Block” link for each section region.

ad-block-layout-builder

3. Add Blocks to the Section Regions

After choosing your section for the layout, you can add blocks into your section. To add a block just click on “Add Block” and the “Choose a block” option will slide out from the right.

add blocks to section regions

1.Choosing a Block
 
Blocks can be chosen from the right by just clicking on them. You can even find blocks by filtering them out by their name using the “Filter by block name” text field. 
We will select “Authored on” content field for now.

choosing a block

When you click on the block you want to add, you’ll be able to adjust the field formatter. Once you’ve configured the formatter, click on “Add Block”.

configured-add-blocks

The “Authored On” content field will be placed on the left side of the block.

Authored-on-layout-buildr

After placing the “Authored On” field, you need to save your changes. Save all the changes you have made to your section by clicking on “Save Layout” option at the top of the Drupal 8 layout page

layout builder

Let us try adding some more fields into our layout to further customize our layout builder.

layout-builder

After saving this layout, if you visit an article content type page, you will be able to see a preview of the layout which you just built..

Layout-module

4.Override Default Layout

The layout which we just built will be applicable for all the articles. If you want to build a customized layout for a particular article in Drupal, we have to enable some options provided by Drupal for the same. You can do it by selecting “Allow each content item to have its layout customized.”

Override-layout

After enabling this option, if you go to an article, you should see a Layout tab button.

Layout builder

You can now modify the layout using the same interface. However, this will only change the layout on this specific piece of content.

Layout builder
Jul 22 2020
Jul 22

Why Virtual?
 

Unfortunately due to the pandemic, the planned DrupalCon for North America had to be rearranged and revised. It was originally scheduled to take place in Minneapolis from Monday 18th May – Friday 22nd May. Instead, the Drupal Association acted quickly and resourcefully to transform the event into a virtual remote conference.

At first, myself and others in the community were skeptical about how a virtual conference would compare to our vibrant in-person events; would it feel like a welcoming, inspiring, and collaborative environment?

Come for the code, stay for the people
 

Overall, I was thoroughly impressed with everything, from the organisation of the event, the diverse range of speakers, the fun social activities, and the networking opportunities. It exceeded my expectations and I think there’s a unanimous sentiment: DrupalCon Global was a huge success! 

DrupalCon

How was the experience?

Aside from a few hiccups in the beginning, the conference ran smoothly once the waves of connection issues flattened out.

There were some notable differences from an in-person conference: the line for coffee was nonexistent, and you would not be silently judged for entering or leaving a session half-way through. Instead, you could just click through to virtually jump between parallel sessions in other tracks, something that is more difficult to do in person. This allowed attendees to freely explore and find the right sessions throughout the conference.

Overall, DrupalCon Global was a fantastic alternative that really brought together the community from around the world. Since a virtual conference eliminates travel considerations, it was truly more global than the originally planned event. I was able to network with people ranging from Sydney, Australia all the way to California, United States and down to people in Johannesburg, South Africa.

I was excited to represent as a mentor to two recipients of the scholarship program. One of my mentees was based in Lagos, Nigeria and the other in Kerala, India. It was an honour to be given the opportunity to welcome new members to the Drupal community and guide them through the conference.


The Kickoff
 

We started off the conference with Vincenzo of amazee.io, cooking pasta live from his home in Catania, Italy, for over 1500 event attendees. I’m sure some of the people who tuned in may have wondered if they were attending a conference related to Drupal or to cooking, but either way, many people really enjoyed the chance to improve their “PastaOps” skills.

Vincenzo of amazee.io cooking pasta After we all worked up an appetite from admiring the culinary wonder of Pasta al amazee.io, we were ready to jump into the latest news and initiatives from the community with Dries Buytaert opening up with the Driesnote. I was awe-struck to see photos and videos of the CelebrateDrupal.org platform used as part of the keynote. I was part of the community team that designed, built, and launched the website with the sole purpose to bring people together to celebrate Drupal and we’ve been overwhelmed with the positive responses leading up to the release of Drupal 9.

Dries laid out the five initiatives to work on as part of Drupal 10’s release cycle:

  1. Drupal 10 readiness
  2. An easier out-of-the-box experience
  3. A new front-end theme (Olivero)
  4. Automated updates for security releases
  5. An official JS menu component for React and Vue

You can read more about each of those initiatives in the State of Drupal presentation (July 2020).


#DrupalConPhoto
 

With all DrupalCons, there comes a time to take the official DrupalCon Photo. However, with everything being remote, we needed something different. Tim Lehnen of the Drupal Association asked everyone to take a selfie and upload it to the CelebrateDrupal.org platform, while I spent the next day figuring out how best to display the images.

I came up with arranging the images in the shape of the new evergreen Drupal logo using CSS Grid to represent that the people, the community, are what makes Drupal great. Check out the DrupalCon Global 2020 - Photo.

#DrupalConPhoto
Exhibit Booths
 

As sponsors, both Amazee Labs and amazee.io had virtual exhibit booths. These booths allowed us to showcase our recent videos, featuring closer looks at our experience in maintenance as well as recent updates to Lagoon. We ran a few live broadcasts within our booths. During these events, a few Amazees and special guests used a virtual room to talk about life at Amazee, our day-to-day job, and technologies we’re excited about. A benefit of the online format was that we could invite attendees to join the video chat to ask or answer questions live as well as in the booth chat room. 

Exhibit Booths
It was quite interesting to be able to virtually walk into other sponsors' exhibit booths and connect with them. They were all really friendly and welcoming with some sponsors giving away prizes if you took part in their virtual quiz or competed in a game, just like at the in-person conference.


Global connection
 

No DrupalCon is complete without BoFs (Birds of a Feather), and this time was no exception. We had various BoFs such as the resurgence of the #DrupalNapping corner, as well as a BoF about the upcoming DrupalCon Europe; and of course, the #DrupalPets BoF in which everyone brought their pet to the video call to virtually meet each other.

#DrupalPets BoF

Social Events

There were quite a few planned social events such as meditation by Rahul Dewan and multiple trivia nights to quench our thirst for fun interactive comedic gold. I took part in one of the three trivia nights and it felt just as fun and competitive as the in-person event.


Sessions and Summits
 

Aside from the keynote sessions which took place on the main stage, we also had multiple session tracks covering a wide range of topics. Accompanying the session tracks, there were several different summits which took a deep-dive into specific fields such as the Government Summit or the Healthcare Summit.

I attended the Performance and Scaling Summit which had four amazing speakers:

  • Mike Herchel - Front-end performance audit
  • Janna Malikova - Load testing your Drupal website before it's too late
  • Shane Thomas - Decoupled performance
  • Michael Schmid - How to survive COVID-19 as a hosting provider

I found the summit very informative, notably learning that the GovCMS platform recorded over 100,000 page views per minute with 187,000 concurrent users. In order to reach that level of web scale, you really need a performant website that returns the time to first byte (TTFB) in less than 0.3 seconds.

Furthermore, I attended the “Volunteer-led strategies for helping the Drupal community” group session by Alanna Burke, Elli Ludwigson, Ruby Sinreich, and Tara King. They discussed why diversity, equity, & inclusion is everyone’s responsibility. They highlighted the importance of intersectional feminism, anti-racism, and how to go about taking action.

Mitchell Baker gave an inspirational keynote about what we, the open-source community, means by “open.” Mitchell shared insights from over two decades leading Mozilla and how the open-source community can contribute to a better Internet with diversity being essential to making this happen.

Jacqueline Gibson talked about Digital Inequity for the Black community. A key learning was that company culture is step one in building an inclusive and diverse team. A welcoming, safe space starts with the team members, who then hold their managers' feet to the fire to sustain and nurture that culture.

Another talk that resonated with me was Leslie Gibson’s talk on building a flexible digital brand. Leslie took us through the digital event strategy of Black Womxn For, and explained how to empower local community members.

Local communities trust the people they know and vice versa
 

The last session I attended was John Albin’s talk on “Progressively decouple Drupal 8 with GraphQL and Twig”. I found that it was very informative as it covered not only how to get started with the GraphQL Twig module but also touched on the history of Drupal with the difficulties of learning the render API with Twig for Drupal 8.

There were so many more sessions with amazing speakers, I highly advise checking out the on-demand content which will become free to the public by September 2020.

So if you're as passionate about Drupal web development and the open-source community as we are, get in touch!

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web