Jun 13 2019
Jun 13

This is actually quite a common question from our students. They start building their Drupal site. Then they go to work with their blocks or menus.

Then they accidentally disable the "Log in" menu link. There is no "Log in" link displayed on the site anymore. Neither for them nor for their visitors.

In this short tip, you will learn how to login to your Drupal admin page in such situation. 

The image below shows the normal Drupal login link. When you first install Drupal it usually appears in the top right-hand corner of your site.

login link displayed

For example, you may accidentally disable it in your Drupal admin dashboard:

login menu link disabled

Then, the "Log in" link disappears.

login link gone

How can you now log in back to your site and get the "Log in" link back to its place?

So here's what you do. Use one of these URLs:

Visit one of those URLs and you should see a login screen like the one below:

login block

Once you are back to your admin panel, simply enable the menu link, and you are all set.

\
Jun 13 2019
Jun 13

To Perform an HTTP request in Drupal 7 we can use "drupal_http_request" function. This is a flexible and powerful HTTP client implementation. Correctly handles GET, POST, PUT or any other HTTP requests. Handles redirects.

Parameters

$url: A string containing a fully qualified URI.

array $options: (optional) An array that can have one or more of the following elements:

  • headers: An array containing request headers to send as name/value pairs.
  • method: A string containing the request method. Defaults to 'GET'.
  • data: An array or object containing the values for the request body or a string containing the request body, formatted as 'param=value&param=value&...'; to generate this, use http_build_query(). Defaults to NULL.
  • max_redirects: An integer representing how many times a redirect may be followed. Defaults to 3.
  • timeout: A float representing the maximum number of seconds the function call may take. The default is 30 seconds. If a timeout occurs, the error code is set to the HTTP_REQUEST_TIMEOUT constant.
  • context: A context resource created with stream_context_create().

Return value

object: An object that can have one or more of the following components:

  • request: A string containing the request body that was sent.
  • code: An integer containing the response status code, or the error code if an error occurred.
  • protocol: The response protocol (e.g. HTTP/1.1 or HTTP/1.0).
  • status_message: The status message from the response, if a response was received.
  • redirect_code: If redirected, an integer containing the initial response status code.
  • redirect_url: If redirected, a string containing the URL of the redirect target.
  • error: If an error occurred, the error message. Otherwise not set.
  • headers: An array containing the response headers as name/value pairs. HTTP header names are case-insensitive (RFC 2616, section 4.2), so for easy access the array keys are returned in lower case.
  • data: A string containing the response body that was received.

Examples

<?php

function create($data) {
    try {
        $response = drupal_http_request(FULLY_QUALIFIED_URL, [
            "headers" => [
                "Authorization" => "Basic " . authorization(),
                "Content-Type" => "application/json",
            ],
            "method" => "POST",
            "data" => json_encode(array(
                'id' => $data['id'],
                'values' => array(
                    'name' => $data['name'],
                    'email' => $data['email'],
                ),
            ))
        ]);
        if ($response->code == 201) {
            return json_decode($response->data);
        }
        else {
            watchdog('error', t($response->code . ' Error, while creating.'), (array) $response, WATCHDOG_ERROR);
            return NULL;
        }
    }
    catch (Exception $exception) {
        watchdog('exception', t('Exception - while creating.'), (array) $exception, WATCHDOG_ERROR);
    }
}

function get_all($filters) {
    try {
        $query = '';
        $build_query = http_build_query($filters);
        if(isset($build_query) && !empty($build_query)){
            $query = '?' . $build_query;
        }
        $response = drupal_http_request(FULLY_QUALIFIED_URL . $query, [
            "method" => "GET",
            "headers" => [
                "Authorization" => "Basic " . authorization(),
                "Content-Type" => "application/json",
            ],
        ]);
        if ($response->code == 200) {
            return json_decode($response->data);
        }
        else {
            watchdog('error', t($response->code . ' Error, while getting all.'), (array) $response, WATCHDOG_ERROR);
            return NULL;
        }
    }
    catch (Exception $exception) {
        watchdog('exception', t('Exception - while getting all.'), (array) $exception, WATCHDOG_ERROR);
    }
}

function get($id) {
    try {
        $response = drupal_http_request(FULLY_QUALIFIED_URL . '/' . $id, [
            "method" => "GET",
            "headers" => [
                "Authorization" => "Basic " . authorization(),
                "Content-Type" => "application/json",
            ],
        ]);
        if ($response->code == 200) {
            return json_decode($response->data);
        }
        else {
            watchdog('error', t($response->code . ' Error, while getting.'), (array) $response, WATCHDOG_ERROR);
            return NULL;
        }
    }
    catch (Exception $exception) {
        watchdog('exception', t('Exception - while getting.'), (array) $exception, WATCHDOG_ERROR);
    }
}

function update($id, $data) {
    try {
        $response = get($id);
        $result = $response->values;
        $response = drupal_http_request(FULLY_QUALIFIED_URL . '/' . $id, [
            "headers" => [
                "Authorization" => "Basic " . authorization(),
                "Content-Type" => "application/json",
            ],
            "method" => "PUT",
            "data" => json_encode(array(
                'values' => array(
                    'name' => isset($data['name']) ? $data['name'] : $result->name,
                    'email' => isset($data['email']) ? $data['email'] : $result->email,
                ),
            ))
        ]);
        if ($response->code == 200) {
            return json_decode($response->data);
        }
        else {
            watchdog('error', t($response->code . ' Error, while updating.'), (array) $response, WATCHDOG_ERROR);
            return NULL;
        }
    }
    catch (Exception $exception) {
        watchdog('exception', t('Exception - while updating.'), (array) $exception, WATCHDOG_ERROR);
    }
}

function delete($id) {
    try {
        $response = drupal_http_request(FULLY_QUALIFIED_URL . '/' . $id, [
            "method" => "DELETE",
            "headers" => [
                "Authorization" => "Basic " . authorization(),
                "Content-Type" => "application/json",
            ],
        ]);
        if ($response->code == 204) {
            return TRUE;
        }
        else {
            watchdog('error', t($response->code . ' Error, while deleting'), (array) $response, WATCHDOG_ERROR);
            return FALSE;
        }
    }
    catch (Exception $exception) {
        watchdog('exception', t('Exception - while deleting'), (array) $exception, WATCHDOG_ERROR);
    }
}

By using the above examples one can make the POST, GET, PUT & DELETE operations via drupal_http_request.

Cheers :)

Jun 13 2019
Jun 13

Today marked the kick-off of Drupal North 2019, and Evolving Web is excited to be a part of it for the 4th year in a row. Day 1 was packed with trainings, summits (for the 1st time!), and networking opportunities. Here were the key takeaways we saw:

Drupal is for everyone

In the "What is Drupal?" and "Qu'est-ce que c'est Drupal?" trainings by Evolving Web's own Trevor Kjorlien and Adrian Cid Almaguer, everyone from developers, to project managers, to graphic designers and more, took part in a hands-on demonstration on how to build a site with Drupal.

Nobody wants a website

A website is just a tool for you to achieve your larger goals. Whether that be building a community, selling a product, getting donations, providing information, or anything else, your website has to be designed with your goals in mind. That being said:

Focus on what your audience wants, not what you want

Your website should always be making your audience's life easier and give them what they are looking for as quickly as possible. It's important to step out of your own shoes and into theirs in order to have a good understanding of want they want so you can cater to those needs.

Students really love chocolate

While sharing her experiences in getting students to participate in UX/UI studies, Joyce Peralta from McGill University explained that sometimes it's the small incentives that can be the most effective. Through many attempts, she found that students could be easily swayed by a simple table full of chocolate bars situated in a prime location in the library. Simple but effective!

Drupal North started off on a great foot and we're looking forward to the next two days of sessions. If you're attending, make sure to check out presentations from our team:

Jun 12 2019
Jun 12

In my post, Drupal is frustrating, I stated that enterprise websites need, want, and are willing to pay for better support options when using Open Source software. Organizations have reached out to me as a Webform module subject matter expert (SME) seeking to start a 1-to-1 support relationship. Occasionally, these relationships result in a sponsored feature request. Sometimes organizations want to ask me a simple question or at least know that I am available to answer questions. In the past, I shied away from the idea of setting up regular office hours because it would be an unpaid commitment of my time during business hours. Fortunately, with the existing funds collected by the Webform module's Open Collective, I feel that now is a good time to experiment and set up some initial office hours for the Webform module.

About office hours

The goal of office hours is to make it easier for me to help people and organizations with questions and issues related to the Webform module for Drupal 8 as well as to assist current and future Webform module contributors.

Sponsor office hours

Sponsor office hours are intended to help backers of the Webform module's Open Collective with any Webform related questions or challenges. These office hours will be strictly for monthly sponsors and backers of the Webform module's Open Collective.

Add-ons office hours

Add-ons office hours are for anyone in the Drupal community building Webform add-ons and extensions that are being contributed back to the open source community. The goal of these hours is to help support and improve the quality of the projects and community around the Webform module.

Office hour guidelines

I've been...Read More

Jun 12 2019
Jun 12

Palantir recently partnered with a patient engagement solutions company that specializes in delivering patient and physician education to deliver improved health outcomes and an enhanced patient experience. They have an extensive library of patient education content that they use to build education playlists which are delivered to more than 51,000 physician offices, 1,000 hospitals, and 140,000 healthcare providers - and they are still growing.

The company is in the process of completely overhauling their technical stack so that they can rapidly scale up the number of products they use to deliver their patient education library. Currently, every piece of content needs to be entered separately for each product it can be delivered on, which forces the content teams to work in silos. In addition, because they use a dozen different taxonomies and doing so correctly requires a high level of context and nuance, any tagging of content can only be done at the manager level or above. The company partnered with Palantir.net to remove these bottlenecks and plan for future scalability.

Jun 12 2019
Jun 12

The World is Moving Towards Open Source Software

Open source software has been around for some time now. When it first came out, open source software was perceived as risky and immature. However, with the passage of time, more and more companies started developing and building upon open source. A couple of great open source examples that have been pioneering the industry for a while now are Drupal CMS and Linux OS.

What is Open Source Software?

So, what exactly is open source software? Well, open source describes the type of software that has no proprietary license attached to it. Instead, it's published with a license that guarantees the software will forever be free to download, distribute, and use. This also means that unlike proprietary software, the code can be inspected by anybody. On top of that, if somebody wants to customize the code to their needs by changing it, they are free to do it.

Proprietary software is often the exact opposite. The code of proprietary software cannot be copied and distributed freely, modifications to the code are also prohibited, in case there are issues arising, you cannot fix them by yourself. You have to rely on the software vendor to fix the problem for you.

Open source has its set of advantages as well as its disadvantages. 

Advantages of Open Source Software

So, you might wonder what are the specific advantages of open source as opposed to software with a proprietary license. Here are some advantages:

  • Flexibility: Open source software is known for having great flexibility. The great flexibility is granted by the fact that the code is open. Thus, people are able to customize it to their needs.

  • Speed: Competition in the digital era is fiercer than ever before. One of the defining factors that are dictating the success of a company over its competition is the speed of innovation. Luckily, the companies that are using open source software know that open source facilitates speed. By not having to deal with the bureaucracy that comes when dealing with proprietary software, everything can be set-up to be working in a fast and reliable way.

  • Cost efficiency: Another trump card in the arsenal of open source software is the cost efficiency provided. Open source can be used by anyone free of charge because it is registered under the GNU General Public License which basically ensures that if somebody is using open source software, then they also have to make the code available for other people to be able to use it. Successful open source communities leverage the power of the community by providing good infrastructure for the community to share and review software extensions and improvements.

  • Security: Proprietary software has had a reputation of being more secure than the open source counterpart. Part of this was due to the popular belief that if the source code is hidden from the public, then hackers will have a harder time cracking it. However, this is far from the truth. The code for open source software is available for everybody to see, which, in turn, could make it more vulnerable. However, because of the fact that everyone has access to it, it is easier to peer review the code. In this way, people will be able to spot vulnerabilities way easier than with proprietary code, making it easier for developers to fix said vulnerabilities.

Disadvantages of Open Source Software

Now that we’ve talked about the advantages of open source, we should also discuss its shortcomings.

  • Not user-friendly: A common problem with open source projects is a lack of focus on design and user-friendliness. People might have a harder time being able to adapt to the interface of an open source software compared to competing proprietary platforms. Of course, this is not true for all open source projects, but it is common to see that well-funded companies are better able to attract and afford the best designers.

  • Hidden costs: Although open source software is hailed to be free to use, it actually is not. When adopting new software for a business, a decision maker also has to take into account different factors. For example, it is easy to overlook the cost of setting up and customizing the software for the company, paying for the training of the employees or hiring skilled personnel that is able to actually operate the software. Even if the adoption is not for business use, a time investment still has to be made in order to properly be able to use the software to its full potential.

  • Lackluster support:  When it comes to proprietary software, there are often dedicated departments that are ready to help a struggling user with their issues. In contrast, most open source software does not enjoy the same level of support. However, open source tends to gather dedicated communities around it that can be helpful in solving some issues. However, it’s good to keep in mind that these people are not paid for their service and might not be able to solve all the issues that are arising.

  • Orphan Software: Proprietary software can enjoy a longer lifespan than their open source counterparts. One of the risks of using OSS is that the community or developers or both lose interest in the project or move on to another project. What this means is that the software will stop being developed supported. The users of the software will be left high and dry and will have to migrate to another platform. Of course, there are also plenty of commercial software projects that go out of business, but strong commercial backing does increase confidence in the continuity of the software. Some open source projects have loosely associated commercial backing. Like Redhat backing Linux and Acquia backing Drupal.

Tech Giants buy Open Source Software Companies

Open Source Software Giant Hand

Lately, more and more tech giants are willing to start having some presence on the open source market. A couple of these examples are IBM, AT&T and Microsoft.

IBM acquires Red Hat

On 28 October 2018, IBM acquired Red Hat for $34 billion, a gargantuan amount of money. The aim of this acquisition is for IBM to shape the cloud and open source market for the years to come. IBM is betting a lot of money on this acquisition, in order to secure a lead on the market. However, there are some skeptics of this acquisition. They claim that IBM is going to ruin the Red Hat culture, as it was proven by their track record until now, kind of like some sort of corporate colonization. Only time will tell how this acquisition is going to shape the future of open source software. Nevertheless, the willingness of IBM to dish out so much money proves that open source software is seriously a path of the future.

AT&T acquires AlienVault

AlienVault is a developer of an open source solution that manages cyber attacks. It includes the Open Threat Exchange which is the world's largest crowd-sourced computer security platform. It was acquired by AT&T on August 22 in 2018. Since then it was renamed from AlienVault to AT&T Cybersecurity. With the high reach and resources of AT&T, former AlienVault is sure to have a bigger impact on the cyber safety of the world. However, this acquisition sparked a lot of controversies, mainly with some supporters of AlienVault claiming that this is the end for the brand. Well, this is true since the company was renamed to AT&T Cybersecurity. However, time will tell if there are going to be more radical changes to their business model under the ownership of AT&T.

Acquia acquires Mautic

With the acquisition of the open source marketing automation tool Mautic on 8 May 2019, Acquia is aiming to strengthen its presence on the open source software scene. Together with Mautic, Acquia is going to deliver the only open source solution to proprietary alternatives, expanding on Acquia's vision to deliver the industry's first Open Digital Experience Platform.  On top of that, unlike the other two companies, Acquia has a strong open source culture, making the acquisition of Mautic a well-thought business decision.

Apps, Plug-ins, and Services: When Open Source  Mingles With Closed Source Software

Android, Google, and Huawei

Android is an open source operating system for mobile phones. Formally, it is known as the AOSP (Android Open Source Project). It is a project developed by Google. The OS is based on a modified version of the Linux kernel and is designed primarily for touchscreen mobile devices. It is licensed under Apache 2.0 which makes it possible for users to modify and distribute modifications if they choose to. Even so, in the recent case of the U.S. ban of Huawei, Google announced the new trade embargo forced them to retract Huawei's Android license. Now, since Android is open source, the OS itself is still free to use. However, practically all Android devices outside of China come with Google services and apps pre-installed. These Google apps play an important role in any Android device. Google can do this since apps like Google Maps, Youtube, Gmail and Play Store, etc. are not open source and companies need a license agreement in order to have them on their device. The Google play store is also a paid service, it provides security checks and code validation for app updates. This forms a very important security layer on the Android platform.

To add insult to injury, losing the partnership with Google means Huawei will not get timely security updates to the AOSP Android Platform. When Google fixes vulnerabilities, they will first send out their fix to partners, and after partners have had time to publish the update to their devices the patch will become public. This means Huawei's devices will have increased exposure to hackers and viruses before the security patch is published and pushed to Huawei devices.  

Sooperthemes: Providing and Supporting Paid Drupal Extensions

Here at Sooperthemes, we are passionate about the Drupal project. We want to see Drupal thrive and become better than its competitors. In order to do that, we had to find out what are the areas in which Drupal can be improved. As it turns out, there was a strong need for Drupal to be easier to navigate and to use in site-building for users who are in a marketing or communication department and do not have deep technical knowledge. That's why Sooperthemes has developed Glazed Builder. Glazed Builder is a powerful visual page-builder that anyone can use, without needing to write, or see any code. With Glazed Builder, Sooperthemes wants to give accessibility to the power of Drupal to a wider audience and to make it easy for them to build, maintain, and grow a Drupal-based website. 

Although other open source platforms like Android, WordPress, and even Linux OS have had a thriving ecosystem of paid applications and plugins for many years, the same cannot be said for Drupal. Fortunately, with our 13+ years of experience in the Drupal community, we were able to create a combination of product and service that thrives in the Drupal community.  

Conclusion

As it can be seen by the latest trends, open source seems to be here to stay and to become the staple of software in the near future. This prediction is based not only on the benefits that open source software is bringing but also by the amount of interest that major companies in the tech world are showing towards open source software. The most successful recipe seems to be a mix of open source platform and paid-for applications. The paid-for applications are especially handy for components that require more involvement from marketing and UX design experts, who are not typical contributors in open source software communities.

Jun 12 2019
Jun 12

There are many beautiful words you can use to tell your customers that your website is trustworthy, reliable, and transparent. But one small widget can say it better that a thousand words.

So let us introduce the UpTime Widget Drupal module. See how it could help you always stay aware of your website uptime, build customer trust, and stand out from competitors.

Module maintained by our developers

Before we move on, we are especially happy to mention that the UpTime Widget Drupal module is maintained by our guys.

Knyshuk.vova is the owner of the module. Its creator Lolandese transferred the ownership to him in accordance with Open Ownership Pledge. Vladimirrem and ApacheEx are maintainers of the module who also make important commits.

These are Drupal developers from Drudesk and Drudesk’s parent company — InternetDevels, which is also listed as supporting organization on the module’s page.

What UpTime Widget Drupal module does

The UpTime Widget module connects your website to the popular free uptime monitoring service — UpTimeRobot.com.

It shows your website uptime (the percentage of time that your website is available to visitors online). Ideally, it should be 100%, although this figure may be a little bit lower in reality.

Your website uptime figure appears in the form of a handy widget to be placed anywhere on your website as a Drupal block. It can also optionally show a configurable copyright notice.

Uptime widget for Drupal website

Uptime widget for Drupal website

The UpTimeRobot service is able to monitor your website uptime every 5 minutes or at an interval you choose. You can get notifications about it by:

  • email
  • SMS
  • Twitter
  • RSS
  • push notifications for iPhone or iPad.

How the UpTime Widget module works in more detail

Getting your keys on the UptimeRobot service

First, we will need to register our website from the UptimeRobot.com service and get the API key and the monitor ID. We need to make a few easy steps:

  • sign up, activate your account, and log in at UptimeRobot.com
  • add a new monitor of the HTTP(s) type, give our website a name, and submit its URL

Register website at UpTime Robot service

The UptimeRobot service has plenty of interesting things like informative dashboards or detailed notification settings. We can come back here any time, but now let’s grab the API key and monitor ID and move on to our Drupal 8 website.

Installing and configuring the UpTime Widget module

The UpTime Widget module can be installed on the Drupal 8 website in any way you prefer. Although it is using a third-party service, installation with Composer is not obligatory.

When the module is installed and enabled, its settings appear at admin/config/system/uptime_widget. Let’s run through some of them.

  • There are two key required fields where we need to enter the previously received API key and monitor ID.
  • The “decimal separator” and “scale” fields have nice defaults, but we can play with the ways our website uptime digits are displayed.
  • The monitoring interval and the refresh interval fields also have sensible defaults. But we can choose how often the website uptime should be checked and how often Drupal should receive this information.

Configuring UpTime Widget Drupal module

Configuring the copyright notice

The website uptime widget by default comes with the copyright widget, which can optionally be disabled. Hiding or showing the copyright is also available in the block configuration, which will be described in the “Configuring the Uptime block” part.

The module’s settings page at admin/config/system/uptime_widget lets us configure how the copyright will look. It offers:

  • several options for the copyright notice
  • the option to specify the year that our domain was first online
  • the option to write a custom “Prepend text” instead of “All rights reserved.”

Configuring copyright notice of Drupal uptime widget

Placing and configuring the Uptime block on the website

It’s now time to place the uptime widget block on our Drupal website. In Structure — Block Layout, we choose the theme region (for example, Footer first), click on it, find the Uptime block in the list of blocks, place block, and save the blocks.

Placing UpTime Widget as block on Drupal website

We can configure the block to our liking — either on the Block Layout page or by clicking the “quick edit” pencil near the block on the website.

We can leave or hide its title by checking or unchecking “Display title,” configure visibility for specific roles, specific pages or content types, and so on.

Configuring UpTime Widget as Drupal block

We can also choose to show both the uptime and copyright widgets, or only one of them.

UpTime and copyright widgets Drupal

More features to come in the future

Our guys have many plans about the module’s improvements in version 8.2. Here are at least some of them:

  • Uptime check notifications should be configurable directly from the Drupal website, which is for now only possible on the UpTimeRobot service.
  • The Uptime information should be included into the “Reports” page on the Drupal dashboard.
  • Public Status Pages, or detailed boards about uptime information, should be integrated into Drupal.

UpTime Robot service dashboard

Get yourself a website uptime widget

Show your visitors they can rely on you all the time! And you can always rely on our Drupal support team if you need any help in:

  • installing and configuring the UpTime Widget Drupal module
  • customizing its look on your website
  • creating another custom Drupal module in accordance with the customer’s requirements

Stay reliable and build your customer trust!

Jun 12 2019
Jun 12

Tour and travel business has started to catch up in the digital realm. In fact, it’s growing faster than the total travel market. It is predicted that by 2020, the overall tours and activities segment will grow to $183 billion.

A clear opportunity for businesses in the travel industry.

Despite your services being authentic, not choosing the right technology to back up your digital transformation can make the entire game plan chaotic, tedious, and not to mention a loss in revenue. Drupal is the leading choice in the travel industry (we have some case studies lined up).

Here’s why it can be the right option for yours too.

What Difference Does it Make?

Travel marketers know and as business owners, you too need to understand that in order to deliver value to the customers they need to be invested in the user experience beyond the first click. It’s all about ‘what they want’.

Here’s where the right CMS technology needs to focus on:

Need for speed: More than half of the users will leave a site if it takes more than 3 seconds to load. Your CMS needs to provide you with the ability to track the site speed performance. Further, for mobile sites, the technology needs to be AMP friendly.

Going ga-ga over mobile: Today, 48% of mobile users in the U.S are comfortable researching, planning, and booking an entire trip to a new travel destination using only their smartphone. The CMS should help in making the mobile site an assistive and delightful experience, exactly what customers are looking for

Travel blogging is popular: Consumption of digital travel content sees double-digit growth year-over-year. Not just this, when planning trips, 49% of people look at travel content sites.

Videos on the same hand provide an authentic outlook on the experience and travel vlogging is gaining traction. The CMS should be scalable and help you leverage the power of content.

Layout matters: Travellers’ basic needs have remained the same - they want to experience. A clear and easy-to-navigate layout will help the user get most out of it. Your CMS can help you avoid irrelevant navigation links and nontransactional elements that can be distracting to the user.

They ‘Book’ right now: Any action you want a user to take must be obvious. Use of contrasting colours and fonts for high-visibility should come easy with your themes. Also, most hotel bookings turn out to be last minute, rather than pre-planned which shows how critical is your CTA.

travel-image-srijan-technologies1

Drupal for your Travel and Hospitality Website

Anything travellers expect to accomplish online should be just as easy to achieve. Here’s what Drupal can do.

1.Content Friendly and Scalable

‘Content’ and ‘more content’ has been gaining traction lately in the business shelf space. As consumer expectations grow for more personalized and relevant experiences, travel businesses too are running in for more content.

For travel visitors, a website which offers them a lot of engaging content without encountering many blockers always wins the hearts.

Nearly 9 out of 10 customers tend to walk over to a competitor’s website when your website goes down.


Drupal scales to support the most content-rich sites and experiences. It lets you create every kind of content you want. And it can help you handle it - and ensure your site always runs in turbo mode. As holiday planners throng the internet with their booking during the holiday season, you must be equipped to avoid any unfortunate downtimes.

Besides, it is highly flexible, capable of accommodating and organizing your information into structured blocks for better visibility. It’s WYSIWYG editor is best for easy content adding.

2.Multilingual capabilities

While building content is a good way to start, it needs to reach out to the right audience too. Acting on consumer intent and preference is one of the keys to unlocking growth.

Do you know that your most likely customers can be found in non-English speaking countries - like China, Germany and Hong Kong with a maximum number of international departures? This factor, however, should not be the reason why any person should walk away from your website. .

Drupal 8 multilingual initiative helps you rebuild language support to target an international audience. Providing content translation in an additional 94 languages, the four core modules (Language, interface translation, content translation, configuration translation) make it easy and efficient for a multilingual travel business.

3.SEO friendly features

Once you got your content up on your site, it is important to ensure people can find you on search. Search is, after all, the number 1 channel high-value travellers turn to.

When travellers search with the intent to book, they browse through one to five sites.

srijan-google

You can rock your SEO with Drupal. With more than 20 SEO modules and core features, it can optimize your site without breaking any best practices. Modules like - Path alias, meta tags, Alternate Hreflang Module, SEO Checklist Module, XML Sitemap, Google Analytics, Linkit are easy to get started with.

4.Layout and Navigation

Labyrinths and twisted lanes appeal to tourists and travellers, but the same on your website will not. Navigation must always be easy and intuitive. The whole point of successful UX is to let the visitor easily get the information they want without driving them mad.

Taxonomy in Drupal can help you define tags, tabs and call-to-action buttons helping you highlight the key terms.

Layout builder can help you with your page building capability without restrictions. It is unique in offering a single, powerful visual design tool. Layouts for templated content, customizations in it, and creation of custom pages which are not tied to a content type or

2019-06-12-srijan

Having the ability to customize blocks without the need to code, you can highlight your services, recommendations and offers with different campaigns.

The search functionality is an easy addition for navigation. For travel, it is important that they can look up for their exact needs.

In addition to providing you with an incredible SEO, Drupal has search APIs like Federated Solr and Solr Search. Not only do they provide the user with the easy search but it helps index the content, too.

5. Mobile friendly

People who have negative experiences on mobile are 62% less likely to purchase from that brand in the future than if they have a positive experience. It’s critical to remember that mobile is one big part of the user experience.

percentage-of-smartphone-srijan-technologies

Your mobile version should be responsive without cutting out important information, easy to navigate and demonstrate how you deliver benefit to the visitor.

Drupal 8’s very essence is accessibility because it was made with mobile-first usability. Drupal supports responsive design, best practices, and ensures your users get a seamless content experience every time, on every device.

travel-image-site-srijan

6. Secure payment gateway 

Nothing is more troubling to a visitor than the thought of making a payment which is conned. This can be an absolute deal breaker. Security is therefore very important for your reputation.

Drupal Commerce, supports the core payment API, for a smooth payment collection procedure, through the check out form. It offers you feature-rich payment access, integration with Paypal, Brain tree, Amazon Pay and 106 other additional gateways.

2019-06-12-payment-srijan

Improving Digital Experience and Commerce Platform for TUI India


TUI Group is a multinational travel and tourism company, headquartered in Germany, with presence in 180 countries. TUI India is part of the TUI Group.

We built a new architecture for the website to strengthen multiple functionalities, like integrating the site with Salesforce, PayU, Zomato, and other APIs.

It helped improve user experience with additional features. 

Read the complete case study here.

tui-srija

7. Improve your Marketing

For businesses, it is important to track, analyze the user behaviour and provide them with personalized services. Third party tools such as CRM, Google Analytics, Feedback tools (like hotjar) help get the 'bigger picture' on how to improve user experience and increase conversion rates.

2019-06-12-improve-marketing-srijan

Drupal offers easy integration with enterprise-level CRM modules, ERP systems, social networks, real-time analytics, payment gateways to enhance the versatility of your website.

This ensures that your website visitors can find a solution at each step of their travel planning.

Enabling Cleartrip’s Marketing Teams to Quickly Serve New, Relevant Offers

Cleartrip.com is a travel portal that offers travel bookings for flights, hotels, trains and buses. The company primarily functions in India and the Middle-East geography.

Srijan developed a new marketing portal for them which simplified their process of presenting deals to their customers. We helped them:

*Build ready-to-use templates that help team deployed offers and packages quickly

*Ability to replicate deals across different country domains easily.

Read the complete case study here.

clear-trip-casestudy-srijan

8. Easy website setup with travel utilities

For quick assistance, to develop a travel website, Drupal has BAT.

The Booking and Availabiliy Management Tool (BAT) comes in handy when you want to
provide your customers with facilities for booking and reservation while helping you manage the availability at the accommodation concerned.

An incredible result of the collaboration between BAT and Drupal is Roomify for Accommodation,  which is, in essence, an all-in-one solution for vacation rentals, hotels and agencies with multiple properties.

Besides this, you can use BEE. Yes, the Drupal module BEE - Bookable Entities Everywhere grants the booking and availability features to all node types. And it is built on BAT.

Bon Voyage!

With the capability to build you a website which can be used to plan and execute a vacation, Drupal is a powerful, secure and highly reliable platform. It not only helps you retain customers but also win over new travellers.

With stability and versatility, your website can support a large volume of content, personalize what you offer, and smoothen the workflow reducing any extra work.

Contact our experts for a bon voyage!

Jun 12 2019
Jun 12

Decoupled Days 2019 is almost here and Amazee Labs has been busy gathering the most valuable practices we’ve discovered since last year to share with the community.

Amazee Labs is proud to sponsor Decoupled Days, a conference for architects, developers, and business people involved in implementing decoupled CMS architectures. Since successfully debuting in 2017, its mission of sharing the experiences with both back-end CMS development as a content service and front-end development of non-CMS applications consuming CMS content (especially those in JavaScript) has been a success for everyone who’s chosen to be involved.

See what we’re sharing at this year’s conference:

Wednesday, 17 July

Jamie Hollern will be presenting a session called Storybook and Drupal: Seamless frontend integration for decoupled sites. This session will explain how to use Twig with Storybook and Drupal to bring all the advantages of UI component libraries into a decoupled Drupal project, and how to build a component library for decoupled Drupal sites. 

13:45 pm in Room 2 
 

Learn how to Decouple your teams using GraphQL with Bryan Gruneberg. In this lighting talk, he will present strategies to decouple your team by putting GraphQL at the centre.

16:30 pm in Room 3 


Pascal Kappeler and Stephanie Lüpold take on Shaping the future of decoupled Drupal: An unusual case study. This session they’ll show how an SME can drive technical innovation at scale, but that it is made possible with the help of a corporate partnership. If you are interested in getting a first-hand account of how two very different companies work together, in order to push technical boundaries, this is the right session for you.

15:45 pm in Room 2 
 

Join Fran Garcia-Linares who will delve into the question GraphQL V4: what's next? In this session, Fran will outline all the exciting new features that are (or will be) included in the 4th version of GraphQL module for Drupal and the new possibilities they open up for us/for those in the know -- like support for SDL based schemas!

16:00 pm in Room 2 
 

Thursday, 18 July

John Albin Wilkins will discuss Gatsby and GraphQL Schema Stitching with Drupal, the benefits of a universal GraphQL graph over traditional web services like REST and JSON:API, configuring Gatsby’s gatsby-source-graphql plugin and more. A demo website, including full Git repository, will be provided for attendees to try out.

11:15 am in Room 1 

Decoupled Drupal is the future, but learning an entirely new stack can be daunting. Stew West presents GraphQL and Twig, a beginner’s guide and demo on how to use GraphQL and demonstrate the advantages of changing the Drupal push model to a pull model by letting the template define its data requirements.  

16:15 pm in Room 1

You should also check out these sessions from amazee.io and Michael Schmid

In this session, Michael will demonstrate how Caching decoupled websites is hard, but freaking fast if done right and share his best practices around caching of decouple websites, things that work, things that didn't work and how we are running websites today.

18th Jul at 09:00 am in Room 1

Michael Schmid presents 3 Years Decoupled Website Building and Hosting - Our Learnings. In this session, he shares what we’ve learned as a business so far and what we envision for the future. Attendees will walk away with insights into how decoupled projects can affect everything from hiring and client relationships to profits, processes, maintenance and more. 

18 July at 11:15 am in Room 2

Catch up on a year’s worth of Amazee Labs’ best practices in just two days at Decoupled Days 2019.

Jun 12 2019
Jun 12

It’s exciting to see how once unimaginable things become popular digital practices! A vivid example is artificial intelligence. We have shared with you an article about artificial intelligence coming to your apps thanks to cognitive services. What about Drupal websites — are they ready for AI? The answer is a definite yes! Let’s see how artificial intelligence and Drupal 8 come together.

Benefits of artificial intelligence for Drupal 8 websites

Smart machine thinking is meant to create a new level of user experiences. By leveraging the huge potential of artificial intelligence on your Drupal website, you will be able to:

  • offer smarter, more engaging, and more advanced features to your users
  • better analyse your users’ behavior
  • create more personalized experiences for them
  • raise e-commerce conversions through more targeted offers
  • streamline and automate many workflows and take the load off your staff
  • raise your company’s image as customers see you using advanced technologies

and much more.

Useful Drupal modules for artificial intelligence & their capabilities

The Drupal community is highly interested in innovative trends. The AI has been a hot topic at the biggest Drupal meetups including DrupalCon Baltimore and Drupal Europe Darmstadt. And, of course, useful Drupal modules have been created that bring artificial intelligence to websites. Let’s review a few of them.

Azure Cognitive Services API 

We have mentioned Microsoft Azure Cognitive Services at the beginning, and here is a module that connects them to Drupal websites. 

The Azure Cognitive Services API Drupal module allows developers to enrich Drupal websites with features like speech, vision, and facial recognition, emotion detection, and much more. There is a pack of 4 submodules.

  • Azure Face API

The Azure Face API module integrates with Microsoft Face API service. It is meant to detect and recognize human faces. The tool is able to compare similar faces and group their pictures together, as well as identifies people who were previously tagged. Face API can detect age, gender, hair color, and more.

Azure Face API

The current capability of the module is detecting up to 64 human faces with a high level of precision. The detection result is specified in a file.

Azure Face API

  • Azure Emotion API

The Azure Emotion API connects the Microsoft Face API to your website. It recognizes the emotions of one or more persons on the picture (happiness, sadness, surprise, anger, neutral, and so on). The tool puts a bounding box on a person’s face and returns the result in a JSON file.

Azure Emotion API

Azure Emotion API

  • Azure Computer Vision API

The Azure Computer Vision API module analyzes the content on images and returns information about them. It uses tags and descriptions, identifies image types and color schemes, and can be your helpful assistant in content moderation. For example, you can configure it to apply restrictions on adult or abusive content.

Azure Computer Vision API

  • Azure Text Analytics API

The Azure Text Analytics API module is meant for natural language processing. Its key features are:

  • Sentiment analysis. It detects negative or positive sentiments and gives them a score.
  • Key phrase extraction. It extracts the key points in the text. 
  • Language detection. It detects the text language. (The module supports almost 20 languages for now).

Azure Text Analytics API

Azure Text Analytics API

Automatic Alternative Text

Adding ALT text to images is a rule of thumb in today’s web. It is vital for web accessibility and SEO. The Automatic Alternative Text module provides ALT text automatically by using Microsoft Cognitive Services — namely, Computer Vision API.

It detects the content of images and describes it in human-readable text while specifying the level of confidence. The tool can generate more than one ALT tag, create thumbnails, and much more. 

Automatic Alternative Text

Cloudwords for Multilingual Drupal

It’s a fact that Drupal 8 is a great choice for multilingual websites, but everything is even greater with this module. The Cloudwords for Multilingual Drupal module uses AI to help you create high-quality multilingual campaigns. 

The module lets you manage your content localization quickly and efficiently. It also has strong workflow automation and project management capabilities. 

Drupal Chatbot

The era of chatbots is already here! The Drupal Chatbot module allows you to create a basic voice or text-based chat bot. The module uses Dialogflow as natural language processing agent, but you can also extend it with Alexa. 

The Drupal Chatbot can be enabled as a block and extended with various functionalities. For example, it supports Latest Pages, Top Rated Pages, Latest Article Search, and so on. The module is actively being developed.

Drupal Chatbot

Drupal Chatbot

Chatbot API

The Chatbot API module facilitates the integration of various chatbots and personal assistants with your Drupal website. It creates a layer to serve Drupal data to these services.

For now, the module supports Alexa and Dialogflow, for which it uses submodules, and works together with the corresponding modules (Alexa and Dialogflow Webhook). However, it’s just the beginning, and more integrations are expected.

Acquia Lift Connector

The Acquia Lift Connector module integrates your website with the Acquia Lift personalization tool. It enables you to create highly personalized offers based on user’s behavior. The module offers real-time audience segmentation, behavioral targeting, A/B testing, and more.

It has a unified drag-and-drop user interface with all the customer information where you can create personalizations. Acquia Lift uses machine learning to automatically recommend content to users.

Acquia Lift Connector

Acquia Lift Connector

Embrace artificial intelligence on your Drupal 8 website

Just imagine, all this and much more could come to your website today! Our Drupal team is ready to help you with building AI integrations based on these and other modules. And if there is no module yet for your idea, we will create a custom one. Enjoy artificial intelligence and Drupal 8!

Jun 12 2019
Jun 12

Telegram is an easy to use free chat application that is rapidly winning fans all over the world. 

There is a Telegram plugin for WordPress but there is not yet a Telegram module for Drupal.

In this tutorial, you will learn how to integrate the Telegram app with your Drupal 8 site using JavaScript from Re:plain.

Step #1. Create a Telegram Account

If you don’t have a Telegram account yet, you’ll have to create one. The process is pretty straightforward. Download the Telegram app to your smartphone and activate an account with your mobile phone number.

Download the Telegram app to your smartphone and activate an account with your mobile phone number

  • Allow Telegram to receive and make phone calls and send SMS messages.
  • Enter your phone number and the code provided by Telegram.

Enter your phone number and the code provided by Telegram

  • Allow Telegram to access pictures and contacts and you’re good to go.

Step #2. Get the JavaScript Code

  • Open your web browser and web.telegram.org in the address bar.
  • Choose your country, type your phone number.
  • Click Next.

Click Next

Click OPEN IN WEB

  • Click Start.
  • Follow the instructions.

Follow the instructions

  1. Click Menu.
  2. Click Connect the site ("Connectar el sitio" on my screenshot below).

Click Connect the site

  • Create a name for your chat room, for example, “Customer Support”.
  • Enter a description and a welcome message for your “Customers”.
  • Choose the default widget language in the site (i.e. English).
  • Your chat room is created.
  • Copy the JavaScript for later use.

Copy the JavaScript snippet

Step #3. Add the Javascript to Your Site

The code has to be inserted into a page before the closing </body> tag. That means the JS code has to be inserted into the html.html.twig template.

The theme I’m using is the default Bartik. For demonstration purposes, I’m going to use the default core template. However, this is not a best practice.

The right way of doing this is creating a Bartik subtheme, copying the template inside the new theme and modifying it there.

You can read more about creating a subtheme here.

  • Locate the core/themes/classy/templates/layout/html.html.twig file.
  • As you can see, Classy is the base theme for Bartik.
  • Open the file in your text editor and paste the script right before the closing </body> tag.

Open the file in your text editor

  • Save the file.
  • Clear the site cache. You’ll see the Telegram icon at the bottom right corner of your screen.

Good job! We haven’t installed any Drupal module, that’s the reason why you’re seeing the Telegram icon even in your administrative pages. These make use of the html.html.twig template as well.

  • Open another browser and test the chat as an anonymous user.
  • The system will prompt you to introduce your contact data - this is a Telegram answering template. You can configure your templates in the Telegram web application or in your phone.
  • I can read and answer to the message in my cell phone.

I can read and answer to the message in my cell phone

Step #4 - Change the Logo of the Chat Window

  • In your web/mobile Telegram application click Menu > Customer Support (or whatever you named your channel). You have a bunch of options here. They’re pretty self-explanatory.
  • Tap/Click Edit logo.
  • Click the Camera icon in order to upload a picture.
  • Refresh your Drupal site.
  • There’s the logo.

Logo

Feel free to explore the different configuration options available.

Telegram has an extensive documentation about how to customize and enhance the functionality of your chats with the help of bots, that perform different tasks.

As you already noticed, this method is useful for any type of site, not just Drupal sites.

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling "Drupal 8 Explained" book!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Jun 12 2019
Jun 12

Some years ago, a frontend developer colleague mentioned that we should introduce SASS, as it requires almost no preparation to start using it. Then as we progress, we could use more and more of it. He proved to be right. A couple of months ago, our CTO, Amitai made a similar move. He suggested to use ddev as part of rebuilding our starter kit for a Drupal 8 project. I had the same feeling, even though I did not know all the details about the tool. But it felt right introducing it and it was quickly evident that it would be beneficial.

Here’s the story of our affair with it.

For You

After the installation, a friendly command-line wizard (ddev config) asks you a few questions:

The configuration wizard holds your hand

It gives you an almost a perfect configuration, and in the .ddev directory, you can overview the YAML files. In .ddev/config.yaml, pay attention to router_http_port and router_https_port, these ports should be free, but the default port numbers are almost certainly occupied by local Nginx or Apache on your development system already.

After the configuration, ddev start creates the Docker containers you need, nicely pre-configured according to the selection. Even if your site was installed previously, you’ll be faced with the installation process when you try to access the URL as the database inside the container is empty, so you can install there (again) by hand.

You have a site inside ddev, congratulations!

For All of Your Coworkers

So now ddev serves the full stack under your site, but is it ready for teamwork? Not yet.

You probably have your own automation that bootstraps the local development environment (site installation, specific configurations, theme compilation, just to name a few), now it’s time to integrate that into ddev.

The config.yaml provides various directives to hook into the key processes.

A basic Drupal 8 example in our case looks like this:

hooks:
  pre-start:
    - exec-host: "composer install"
  post-start:
    # Install Drupal after start
    - exec: "drush site-install custom_profile -y --db-url=mysql://db:[email protected]/db --account-pass=admin --existing-config"
    - exec: "composer global require drupal/coder:^8.3.1"
    - exec: "composer global require dealerdirect/phpcodesniffer-composer-installer"
  post-import-db:
    # Sanitize email addresses
    - exec: "drush sqlq \"UPDATE users_field_data SET mail = concat(mail, '.test') WHERE uid > 0\""
    # Enable the environment indicator module
    - exec: "drush en -y environment_indicator"
    # Clear the cache, revert the config
    - exec: "drush cr"
    - exec: "drush cim -y"
    - exec: "drush entup -y"
    - exec: "drush cr"
    # Index content
    - exec: "drush search-api:clear"
    - exec: "drush search-api:index"

After the container is up and running, you might like to automate the installation. In some projects, that’s just the dependencies and the site installation, but sometimes you need additional steps, like theme compilation.

In a development team, you will probably have a dev, stage and a live environment that you would like to routinely sync to local to debug and more. In this case, there are integrations with hosting providers, so all you need to do is a ddev pull and a short configuration in .ddev/import.yaml:

provider: pantheon
site: client-project
environment: test

After the files and database are in sync, everything in post-import-db will be applied, so we can drop the existing scripts we had for this purpose.

We still prefer to have a shell script wrapper in front of ddev, so we have even more freedom to tweak the things and keep it automated. Most notably, ./install does a regular ddev start, which results in a fresh installation, but ./install -p saves the time of a full install if you would like to get a copy on a Pantheon environment.

For the Automated Testing

Now that the team is happy with the new tool, they might be faced with some issues, but for us it wasn’t a blocker. The next step is to make sure that the CI also uses the same environment. Before doing that, you should think about whether it’s more important to try to match the production environment or to make Travis really easily debuggable. If you execute realistic, browser-based tests, you might want to go with the first option and leave ddev out of the testing flow; but for us, it was a desirable to spin an identical site on local to what’s inside Travis. And unlike our old custom Docker image, the maintenance of the image is solved.

Here’s our shell script that spins up a Drupal site in Travis:

#!/usr/bin/env bash
set -e

# Load helper functionality.
source ci-scripts/helper_functions.sh

# -------------------------------------------------- #
# Installing ddev dependencies.
# -------------------------------------------------- #
print_message "Install Docker Compose."
sudo rm /usr/local/bin/docker-compose
curl -s -L "https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m)" > docker-compose
chmod +x docker-compose
sudo mv docker-compose /usr/local/bin

print_message "Upgrade Docker."
sudo apt -q update -y
sudo apt -q install --only-upgrade docker-ce -y

# -------------------------------------------------- #
# Installing ddev.
# -------------------------------------------------- #
print_message "Install ddev."
curl -s -L https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh | bash

# -------------------------------------------------- #
# Configuring ddev.
# -------------------------------------------------- #
print_message "Configuring ddev."
mkdir ~/.ddev
cp "$ROOT_DIR/ci-scripts/global_config.yaml" ~/.ddev/

# -------------------------------------------------- #
# Installing Profile.
# -------------------------------------------------- #
print_message "Install Drupal."
ddev auth-pantheon "$PANTHEON_KEY"

cd "$ROOT_DIR"/drupal || exit 1
if [[ -n "$TEST_WEBDRIVERIO" ]];
then
  # As we pull the DB always for WDIO, here we make sure we do not do a fresh
  # install on Travis.
  cp "$ROOT_DIR"/ci-scripts/ddev.config.travis.yaml "$ROOT_DIR"/drupal/.ddev/config.travis.yaml
  # Configures the ddev pull with Pantheon environment data.
  cp "$ROOT_DIR"/ci-scripts/ddev_import.yaml "$ROOT_DIR"/drupal/.ddev/import.yaml
fi
ddev start
check_last_command
if [[ -n "$TEST_WEBDRIVERIO" ]];
then
  ddev pull -y
fi
check_last_command

As you see, we even rely on the hosting provider integration, but of course that’s optional. All you need to do after setting up the dependencies and the configuration is to ddev start, then you can launch the tests of any kind.

All the custom bash functions above are adapted from https://github.com/Gizra/drupal-elm-starter/blob/master/ci-scripts/helper_functions.sh, and we are in the process of having an ironed out starter kit from Drupal 8, needless to say, with ddev.

One key step is to make ddev non-interactive, see global_config.yaml that the script copies:

APIVersion: v1.7.1
omit_containers: []
instrumentation_opt_in: false
last_used_version: v1.7.1

So it does not ask about data collection opt-in, as it would break the non-interactive Travis session. If you are interested in using the ddev pull as well, use encrypted environment variables to pass the machine token securely to Travis.

The Icing on the Cake

ddev has a welcoming developer community. We got a quick and meaningful reaction to our first issue, and by the time of writing this blog post, we have an already merged PR to make ddev play nicely with Drupal-based webservices out of the box. Contributing to this project is definitely rewarding – there are 48 contributors and it’s growing.

The Scene of the Local Development Environments

Why ddev? Why not the most popular choice, Lando or Drupal VM? For us, the main reasons were the Pantheon integration and the pace of development. It definitely has the momentum. In 2018, it was the 13th choice for local development environment amongst Drupal developers; in 2019, it’s at the 9th place according to the 2019 Drupal Local Development survey. This is what you sense when you try to contribute: the open and the active state of the project. What’s for sure, based on the survey, is that nowadays the Docker-based environments are the most popular. And with a frontend that hides all the pain of working with pure Docker/docker-compose commands, it’s clear why. Try it (again), these days - you can really forget the hassle and enjoy the benefits!

Jun 12 2019
Jun 12

Glitzy websites are all the rage these days. Everybody seems to be looking for easy ways to create multimedia-rich pages with ease. Yet there is a big downside to the current trend of page builders -- if you're not careful, you might end up making your long term content management far harder than it should be.

WordPress 5 made its Gutenberg "Block editor" the standard for all WordPress sites going forward. Drupal 8.7 added a new "Layout Builder" in its core, adding sophisticated layout capabilities. Both of these are playing catchup to Software-as-a-Service (SaaS) offerings like Squarespace and Weebly -- and a whole bunch of 3rd party modules and plugins that have been filling the gap so far.

The goal for all of these is to make it easy to interleave text with photography, video, galleries, and animations using something approaching a drag-and-drop interface. Yet how they go about doing this varies drastically under the hood. In broad strokes, you can group all of these layout builders into one of 3 categories:

Broad categories of layout builders

  Field-Oriented Repeating Templates Embedded Layouts Module or Plugin

Drupal "Layout Builder"

Drupal Panels, Panelizer

Display Suite

Custom themes, page-type templates

Drupal "Paragraphs"

Field Collections

Entity References/Inline Entity Form

Commerce Variations

WordPress Gutenberg

Drupal Entity Embed

Vast majority of WP layout plugins

Where items are stored Individual fields are in individual database tables/columns `Multiple entities are linked together to build up a page Everything is dropped into a huge text field Best for Managing huge numbers of similar items Keeping content and presentation separate, to allow re-skinning down the road, while still making rich authoring relatively easy Very easy authoring Drawbacks Slightly less flexible -- harder to change up the sequence of rich elements Not as organized as field-based layouts, harder to extract, search, and aggregate information Very poor at reusing information on other pages, inconsistent look across the site, hard to update overall look and feel, finicky to use and get "just right", often has accessibility issues

That's the summary. Now let's take a look under the hood...

How do layout builders store their data, and why should I care?

Which is the best tool -- Excel or Word? Entirely depends on the job you're trying to do, of course. Yet these layout builders are as different as Word and Excel -- some are excellent at creating long documents with lots of variation, while others are far better at preserving data so you can show it in a chart, do math, and more. You wouldn't pick Excel to write an essay, for example, and you shouldn't pick Word to track your finances.

If you are creating a rich landing page for a campaign, a layout builder that takes the Embedded approach can get you there quickly. Lots of support for drag-and-drop, lots of ways to quickly get a result. You can build 5 more while you're at it -- but now try to compare things across 50 of these one-off pages -- now suddenly not having a template and simple fields to fill in makes the job much harder. You create pages for a bunch of products, and then you go to create a product comparison chart, and you're building that table by hand, cut-and-paste.

Or say for example you are a research institution, publishing research papers from dozens of contributors. You can make a nice landing page for each paper, with sections for the author's biography, the category, methodology, supporting organizations, and various other items -- but if you don't put each of these in its own field, it gets a lot trickier to build a nice search interface that will help your visitors find what they are looking for.

What is Content Management?

There are plenty of definitions of Content Management out there, mostly by vendors looking to sell you on a specific system, or pedantic descriptions of how big companies (Enterprises) need all this sophisticated stuff. While we are a vendor trying to sell you on something, let's take a moment to clear away all the B.S.

Website Content Management is about creating, maintaining, curating, and cultivating on your website for the entire life of the website. The problem with this focus on Layout Builders is that all the focus is on that very first step -- Creating. It ignores the rest of the lifecycle of your content.

At Freelock, we believe the longer you keep good content on your website, the more valuable it becomes. And keeping old content maintained and relatively fresh is a big part of that job. A Content Management System can help you keep your old content fresh -- keeping it looking consistent with rest of your site, bringing in new traffic, guiding people down your sales funnel to become customers, providing reputation and longevity that assure your customers you're not just another fly-by-night operation.

Embedding all of your rich content into one-off pages hampers this very process, especially when you want to change the look-and-feel of your website -- or find, re-use, or change the overall experience of your oldest content. Let's drill down into these different types of builders to see how they compare, for the longer term.

Field Oriented Layout Builders -- the Excel approach

Drupal Layout Builder Adding a custom block to a page using Layout Builder

Drupal excels at information architecture, and so the layout builder Drupal chose to include in its core supports this way of thinking about content. With the ability to easily create fields on different content types, and aggregate content using the powerful "Views" module, Drupal is all about information reusability.

There are dozens of different kinds of fields out there, and an even larger number of ways to use each one. For example, if you add a date field for an event, you can show it on a list of upcoming (or past) events automatically. You can show it on a calendar view. You can show it in a list, or a set of cards.

Add a geolocation field, and now you can show it on a map -- and you can filter that for upcoming events near me. Add a price and now you can create a "facet" that lets you see items between certain price ranges. All of this power builds on all of the other kinds of information stored in fields, and makes it easy to manage hundreds, thousands of similar items.

The new Drupal Layout Builder lets you easily create a template for showing each of these fields in a particular spot on the page, create multiple columns, drag-and-drop items around. In addition, you can create one-off blocks to highlight certain items, and reuse that on other items -- change up the layout entirely on a single item, if you wish.

Managing field layouts in the future

Down the road, if a product is no longer a special snowflake, hit a button and it reverts to the same layout as all the rest of your products -- the layout is stored in "just" another field on the item.

If you want to show a Google Map or a thumbnail linked to a file, you would have a field for the location to show and another field for the media. Then when you place the location field on the layout template, you would pick the "map" renderer to show a map for the field, and when you want to show the downloadable file, you could specify the size to generate the thumbnail and place it where you want it -- and it will look consistent across all the items in your site.

Want to change your design? Swap out the Google Map renderer for OpenStreetmaps, and all of the maps on your site use the new service immediately. Change the thumbnail size for the document, and move it to the left sidebar, and it's done across your site.

Embedded Layouts - the Word approach

Gutenberg in action Gutenberg editor in action

The new WordPress Gutenberg editor is the poster child for the opposite way of creating rich layouts. Instead of having a field for each kind of data, you start with a blank page and a collection of blocks you can drop into it.

Honestly, I like using Gutenberg -- once you figure out the basics, it's mostly fun to use. Its killer feature is management of "Reusable Blocks" -- create a chunk of boilerplate, save it as a reusable block, and then you can reuse it on any other Gutenberg page. You can keep it in your page as a "reusable block" or you can convert it to a regular block and edit it.

You can create entire templates this way.

This... this is awesome for creating proposals! Or reports, or anything you need to do once, and don't care much about how it will look in 5 years.

It's very rapid for creating pages, and if you are constantly editing some key landing pages, Gutenberg seems like a fine way to go.

However, for content that's going to stick around for years, especially through a site redesign, it's going to be a bit of a nightmare. And right from the start it stops being useful for a huge number of scenarios modern sites are trying to support.

Very little design control

One thing a CMS attempts to do is make your site look consistent. One challenge with Gutenberg and other approaches that largely dump styles as well as content into a big text area is that it makes it much easier to violate your site's design, leading to ugly, confusing, jarring sites. Having spent several years as a professional writer, seeing garish colors and inconsistent fonts and font sizes makes me shudder. I don't want to have to think about what it looks like -- I just want to write it and trust the designer to make it look good.

Useful data is embedded, hard to reuse

I see blocks for "Product Comparisons" for Gutenberg. Wow, drop these in and you get some boxes where you can enter stuff -- cool!

But... you have to enter that stuff. And it already exists, on the product pages. Wait a second -- I thought this was supposed to make my job easier? And... hey, I have a new product that just varies in two of these areas. Which page did I put that product comparison on?

Managing changes in the future

Back to the earlier scenarios, now I want to switch from Google Maps to OpenStreetmap. To make this change, I need to do a search and replace -- find every map on my site, and generate a new widget from the new map provider. Lots of manual work. Maybe I can find or create a script, but even so, it feels a little brittle -- if I chose a different map style on one page, I might not find that one. And change my document thumbnail to move it to the other side of the page and shrink the thumbnail? Geez, I have dozens of those to do now.

This is the big "mistake" of embedded layouts -- managing content down the road.

And this is not new to Gutenberg -- the vast majority of page builders for WordPress essentially work the same way, embedding "short codes" into the body, and the only way to find them is search.

This is part of why I've heard many shops say you just need to start over and redo your website from scratch every few years.

If you've kept your content separate from the design, that is entirely not true -- having to rebuild your site is entirely the result of having your design too entwined with your content.

Repeating Templates -- a Hybrid

Nested Paragraphs Nested Paragraphs

In between these two extremes, there is a third way. The best current example of this approach is the Paragraphs module for Drupal.

Compared to field-based layouts, you can easily make pages with a bunch of varied layouts, changing the layout as desired, one row at a time. If you do this very much with a field-based layout, you end up with a bunch of blocks hanging out that can clutter other parts of your CMS, and you end up constantly tweaking the design to get a result that looks good.

Compared to Embedded layouts, your content is still entirely separate from the design, making it easy to re-skin down the road. And you can still use fields that can be extracted and compared/searched/reused, although doing that effectively takes a fair amount of upfront planning.

We typically create a set of paragraph types, such as:

  • Plain text
  • Pull quote
  • Image and text (image to the left or right)
  • Photo Gallery
  • Large media (video or image)
  • Columns, cards
  • Tab set, Accordion set
  • Slide carousel
  • Embed a view

When creating your content, you can add these in any order you like. We can provide particular classes for color variations, locked down to your brand's style guide.

The design remains very tightly controlled. Data is not necessarily easily reused -- but you can have a section of Paragraphs on content that still uses fields for all of the data management scenarios you like.

Because everything is templated, a re-skin of the site can make changes to one of these templates and it instantly applies everywhere it is used.

So which layout type should I use?

Should you use Excel or Word? Well, of course, you should use both, if you need them. There are very compelling reasons to use fields -- they are essential to Content Management, and many, many ways they make your work much easier. But there are times when dashing out a quick document, or web page, is needed right now.

By making Gutenberg its default editor, WordPress has gone entirely to the right side of that table -- they are trying to focus on being a good page builder, potentially at the expense of content management. Do you need content management? Depends on how much content you have to manage! If you're only talking about having a nice brochure site, and a steady stream of blog or news posts, this is all fine. But the more sophisticated your needs, the more you're starting to go against the grain. You can add fields to WordPress, and create views of content -- but this involves either creating some code or finding plugins that will help you do this -- many of which are not free/open source (a discussion for another post).

With Drupal, on the other hand, you can choose all three. You can even have all 3 on the same website! We are already using Gutenberg in Drupal on some sites, and we're using Paragraphs almost everywhere. Meanwhile we are very impressed with the new Layout Builder, and find it just the thing for making attractive layouts for certain types of content. You can have your Word, and your Excel too!

Jun 11 2019
Jun 11

Our lead community developer, Alona Oneill, has been sitting in on the latest Drupal Core Initiative meetings and putting together meeting recaps outlining key talking points from each discussion. This article breaks down highlights from meetings this past May. You'll find that the meetings, while also providing updates of completed tasks, are also conversations looking for community member involvement. There are many moving pieces as things are getting ramped up for Drupal 9, so if you see something you think you can provide insights on, we encourage you to get involved.

Drupal 9 Readiness

Meetings are for core and contributed project developers as well as people who have integrations and services related to core. Site developers who want to stay in the know to keep up-to-date for the easiest Drupal 9 upgrade of their sites are also welcome.

  • Usually happens every other Monday at 18:00 UTC.
  • Is done over chat.
  • Happens in threads, which you can follow to be notified of new replies even if you don’t comment in the thread. You may also join the meeting later and participate asynchronously!
  • Has a public agenda anyone can add to at https://www.drupal.org/project/drupal/issues/3054328
  • Transcript will be exported and posted to the agenda issue.

Meeting Highlights From 05/13/2019

Update on Drupal 9 dependency targets (CKEditor, Symfony, PHP)

  • The plan is to release Drupal 9 with CKEditor 4 support, add optional CKEditor 5 support during D9's active support, and deprecate CKE4 before D10
  • D9 will probably be EOL in Dec. 2023 and CKE 4 can have security coverage through then
  • Policy issue

Documentation Updates for Drupal 9

Drupal.org tasks for Drupal 9

Opened an issue today to track these and currently working on Drupal 9 plan summary via https://www.drupal.org/project/drupalorg/issues/3046058.

Deprecations

Upgrading to Drupal 9 version of Classy and Stable could be hard given the number of unknowns. We are proposing to provide the current versions of Classy and Stable in contrib space. This would allow pre-existing themes to add a dependency to the contrib version of the themes and have the exact same behavior in Drupal 9 as they had in Drupal 8.

To avoid this problem in Drupal 10, we are proposing to not ship Classy as part of Drupal 9. The feature gap would be replaced with a new starter kit theme.

Risks for June 2020 Target Date

  1. Biggest worries right now are: D7 to D8 migration support, including finishing multilingual support and UX improvements.
  2. Filtering fails that are not actionable.
  3. Roadmap for Simpletest moving forward. Currently Simpletest isn't formally deprecated, we're welcoming any thoughts and suggestions here https://www.drupal.org/project/drupal/issues/2866082.

Meeting Highlights From 05/27/2019

New Drupal 9 Readiness Features & New Contrib Readiness Data

  1. https://twitter.com/DropIsMoving/status/1130868996771844096 is now live on drupal.org.

  2. Also Dwayne McDaniel figured out a new way to run his contrib analysis scripts and published a fresh set of data at https://github.com/mcdwayne/d9-drupal-check-allthemodules.

  3. Gábor Hojtsy took that and analyzed the top ones up to 50 uses and created this summary doc with docs pulled from api.d.o with a script: http://hojtsy.hu/blog/2019-may-24/analysis-top-uses-deprecated-code-drupal-contributed-projects-may-2019.

  4. Also the coder rules got fixed to conform better to the core trigger_error()/@deprecated formats and a new coder release is out now, so core can update to that https://www.drupal.org/project/drupal/issues/3049433.

Documentation Updates for Drupal 9

An extensive review was completed of the Drupal 9 docs. The review yielded grammatical improvements to improve English formatting.

New Critical for the D9 Roadmap

There's some discussion already in the other meta https://www.drupal.org/project/drupal/issues/2866082.

Sprint plans for DrupalDevDays Transylvania?

  • WebTestBase is officially deprecated, "Convert contrib test suites to BTB" might be a good sprint topic.
  • Alex Pott has a good start on getting the conversion docs a little more up to date and we're trying to continue to add to it, https://www.drupal.org/node/2166895.

Release schedules (branch opening, alpha, beta, rc) for Drupal 8.9 and 9.0

  • Beta1 would be tagged the first week of April 2020 if we are ready for 9.0.0 in June.
    • If we're not ready for 9.0.0 in June by say March, then we switch 8.9 back to a normal minor with a normal minor schedule (and announce the December release date).
    • Also with regards to documenting on the releases page we should probably inform the rest of the committers first. The email should outline the alphas, March as a go/no go decision, deadline for June vs. Dec. 3. as well as the beta and RC dates.

Freezing entity schema updates between 8.9 and 9.0

  • With 8.7 especially, but not only, entity schema updates are causing a lot of trouble for sites trying to update. Sometimes it is a bug in the update, just as often it is corrupted data or custom code on sites trying to update. Given 9.0.0 will have a lot of other changes, we should consider not committing any big entity schema updates to 8.9/9.0.

  • Opened an issue, freeze entity schemas in 8.9.x and 9.0.x to work on solving this.

Out of the Box Initiative Meeting 05/28/2019

  • We want to create a roadmap for Drupal 8.8 release. You can find the details here: https://www.drupal.org/project/drupal/issues/3047414
  • Talking about SimplyTest.me Umami Demo.
    • Trying to shave off all installation time and figure out where it goes.
    • Adding an option with and without multilingual.
  • Talking about creating help pages about all new features and things in 8.8 release.
  • Add a floating tour button on pages that have an explanation (need to create an issue).
  • Implement Layout Builder on every page, recipe, and article.
  • Working on Umami’s Language-switcher as a drop-down menu.

Layout Initiative Meeting 05/29/19

Currently, when using Layout Builder, the already added sections give no indication of their layout or its configuration. This isn't a big deal for sighted users who are only using the default Layout Builder layouts, because the only configuration is the widths of the columns, which they'll be able to see visually.

However, for non-sighted users, or if a layout has more complex configuration (for example, using different proportions for different view port sizes, or adding class names, or anything since layout plugins have full control over their settings and rendering), then there is no indication given of the section's layout or its configuration.

An issue was created to document this concern.

graphic with drupal logo next to phrase community of support

That's A Wrap

Check back for frequent meeting recaps to gather insights on the latest Drupal Core developments and find ways to get involved. Our community thrives when we all come together!

Jun 11 2019
Jun 11

Every once in a while you have those special pages that require a little extra something. Some special functionality, just for that page. It could be custom styling for a marketing landing page, or a third party form integration using JavaScript. Whatever the use case, you need to somehow sustainably manage JavaScript or CSS for those pages.

Our client has some of these special pages. These are pages that live outside of the standard workflow and component library and require their own JS and CSS to pull them together.  Content authors want to be able to manage these bits of JavaScript and CSS on a page-by-page basis. Ideally, these pages would go through the standard development and QA workflow before code makes it out to production. Or perhaps you need to work in the opposite direction, giving the content team the ability to create in Production, but then capture and pull them back into the development pipeline in future deployments?

This is where Drupal 8’s Configuration Entities become interesting. To tackle this problem, we created a custom config entity to capture these code “snippets”. This entity gives you the ability to enter JavaScript or CSS into a text area or to paste in the URL to an externally hosted resource. It then gives you a few choices on how to handle the resulting Snippet. Is this JavaScript, or CSS? Do you want to scope the JavaScript to the Footer or the Header? Should we wrap the JavaScript in a Drupal Behavior?

Once the developer makes her selections and hits submit, the system looks at the submitted configuration and if it’s not an external resource, it writes a file to the filesystem of the Drupal site.

Now that you’ve created your library of Snippets, you can then make use of them on your content. From either your Content Type, Paragraph, or other Content Entity – simply create a new reference field. Choose “Other”, then on the next page scroll through the entity type list till you get to the configuration section and select JSnippet. Your content creators will then have access to the Snippets when creating content.

By providing our own custom Field Formatter for Entity Reference fields, we’re then able to alter how that snippet is rendered on the final page. During the rendering process, when the Snippet reference field is rendered, the custom field formatter loads the referenced configuration entity and uses its data and our dynamically generated library info to attach the relevant JavaScript or CSS library to the render array. During final rendering, this will result in the JavaScript or CSS library being added to the page, within its proper scope.

Because these snippets are configuration entities, they can be captured and exported with the site’s configuration. This allows them to be versioned and deployed through your standard deployment process. When the deployed configuration is integrated, the library is built up and any JS or CSS is written to the file system.

Want to try it out? Head on over to Drupal.org and download the JSnippet module. If you have any questions or run into any issues just let us know in the issue queue.

Jun 11 2019
Jun 11

Virtual. Remote. Distributed. Pick your label. This style of organization is becoming wildly more in demand and popular among many agencies and organizations. It saves the cost of office space, allows for hiring the best talent possible regardless of location, can be a huge bonus to employees who require flexibility in their schedules, and saves everyone time in commuting assuming they don’t go to a shared work space. You can even wear what you want (being mindful of video chats, of course).

The flipside? While many folks have gone remote, some people find the experience quite isolating and disconnected. Does remote work make people happier? Does it make them more productive? From my experience running a remote-only agency, the answer is not really. Going for days not seeing another human in person can be extremely isolating and demotivating. And while it seems as though you’d have more time at your computer, and therefore would be more productive, often the opposite is true: it can often be harder to have focused time to work on tasks if you are at home with multiple screens. And even worse if you are distracted by anything at home (deliveries at your door, that laundry in the corner, etc).

It can also be physically damaging: the human body is not designed to sit at a desk for long periods of time, and there’s less incentive to get up and move if you don’t have to move more than a few feet to your computer.

I know I’ve experienced all those issues. So I feel everyone’s pain. Literally.

The main reason Kanopi Studios exists is to support humans in every way.

We support our clients by giving them great work so they can be successful online, but additionally Kanopi serves to support its employees so they are successful in both their work and home lives. We want our people to always be happy, fulfilled, and constantly evolving in a positive way. So it’s critical that we create an environment and culture that fosters practices that provide meaning, collaboration, and happiness regardless of location. It’s also critical that employees feel empowered to speak up if they are feeling the negative repercussions of remote work.

As CEO, it’s my job to give my staff the right tools and systems so that they are as happy and healthy as possible, and to create connectivity in Kanopi’s culture. Building and sustaining strong relationships requires a unique approach that makes use of a variety of tools to create the right work culture to combat the isolation.

There’s a session I give on this very topic, and the DrupalCon video is linked below. I cover how to be the best remote employee, as well as how to support your team if you are a leader of a remote team. I give key tactics to keep you (and all other staff) inspired, creative, productive and most importantly, happy! I hope you find it helpful in making your own work environment as connected and collaborative as possible, no matter where you are.

[embedded content]
Jun 11 2019
Jun 11

Recently I was interviewed on RTL Z, the Dutch business news television network. In the interview, I talk about the growth and success of Drupal, and what is to come for the future of the web. Beware, the interview is in Dutch. If you speak Dutch and are subscribed to my blog (hi mom!), feel free to check it out!

June 11, 2019

15 sec read time

db db
Jun 11 2019
Jun 11

Websites need to look pretty and be blazing fast. That often means lots of beautiful high-quality images, but they can be pretty enormous to download, making the page slow to load. Images are often one of the 'heaviest' parts of a website, dragging a visitor's experience down instead of brightening it up as intended. If a website feels even a tiny bit unresponsive, that tarnishes your message or brand. Most of us have sat waiting frustratedly for a website to work (especially on mobile), and given up to go elsewhere. Drupal can be configured to deliver appropriately-resized versions, but what's even better than that?

Lazy image loading

Don't send images to be downloaded at all until they're actually going to be seen! Browsers usually download everything for a page, even if it's out of sight 'below the fold'. We know we can do better than that on a modern website, with this technique called lazy image loading.

Lazily loading an image means only sending it for a user to download once they are scrolling it into view. Modern web browsers make this surprisingly simple to achieve for most images, although there are often a few that need special attention. When combined with optimisation from Kraken.io, and other responsive design tricks, performance can sky-rocket again. Check out our case study of NiquesaTravel.com for a great example using this.

Niquesa is a luxury brand for busy people, so the website experience needs to be smooth, even when used on the go over a mobile network. Perhaps more than that, SEO (search engine optimisation) is critical. Their bespoke packages need to show up well in Google searches. Google promotes websites that perform well on mobile devices - so if your site is slow, it needs to be sped up. It's not just that you'll lose out on competitive advantage and tarnish your brand: people simply won't find you.

You can see what Google thinks of your website performance by using their PageSpeed Insights tool. That gives you an overall score and lists specific improvements you can make. Niquesa asked us to boost their score, especially for mobile devices. So we looked to speed up anything slow, and to reduce the amount of things there are to download in the first place. Any website can use that approach too. Lazy image loading speeds up the initial page load, and reduces the amount to download.

This stuff should be standard on most websites nowadays. But many web projects began well before browsers supported this kind of functionality so still need it adding in. As an ever-improving platform, the internet allows you to continually improve your site. There's no need to feel locked in to a slow site! Get in touch with us if you're interested in improving your website with lazy loaded imagery. Who wouldn't want beautiful high-quality media and great performance on any device?

Can you teach me to be lazy?

Sure! Rather than using the normal src attribute to hold the image file location, use a data-src attribute. Browsers ignore that, so nothing gets downloaded. We then use the browser's Intersection Observer API to observe when the image is being scrolled up into view. Our javascript can jump in at this point to turn that data-src attribute into a real src attribute, which means the browser will download the real image.

On its own, that wouldn't take very long to set up on most websites. But on top of this, we often go the extra mile to add some extra optimisations. These can take up the majority of the time when applying lazy loading to a website, as they are a great improvement for the user experience, but usually need crafting specifically for each individual project:

  • Images defined via style or srcset attributes (rather than a src attribute) and background images in CSS files, need similar handling. For example, use a data-style or data-srcset attribute.
  • Images that we expect to be immediately in view are excluded from any lazy loading, as it is right to show them immediately.
  • It may be important to keep a placeholder in place of the real image, perhaps either to keep a layout in place or in case javascript is not running. Styling may even need to be tweaked for those cases. Sadly it's not unusual for third-party javascript out of your control to break functionality on a page!
  • Dimensions may need some special handling, as Drupal will often output fixed widths & heights, but responsive design usually dictates that images may need to scale with browser widths. If the real image is not being shown, its aspect ratio may still need to be applied to avoid breaking some layouts.
  • Some design elements, like carousels, hide some images even when they are within the viewport. These can get their own lazy magic. One of our favourite carousel libraries, Slick, supports this with almost no extra work, but many designs or systems will need more careful bespoke attention.

Here is a basic example javascript implementation for Drupal:

(function($) {
  // Set up an intersection observer.
  Drupal.lazy_load_observer = new window.IntersectionObserver(function(entries) {
    for (var i in entries) {
      if (entries.hasOwnProperty(i) && entries[i].isIntersecting) {
        var $element = $(entries[i].target);
        // Take the src value from data-src.
        $element.attr('src', $element.attr('data-src'));
        // Stop observing this image now that it is sorted.
        Drupal.lazy_load_observer.unobserve(entries[i].target);
      }
    }
  },
  {
    // Specify a decent margin around the visible viewport.
    rootMargin: "50% 200%"
  });

  // Get that intersection observer acting on images.
  Drupal.behaviors.lazy_load = {
    attach: function (context, settings) {
      $('img[data-src]', context).once('lazy-load').each(function() {
        Drupal.lazy_load_observer.observe(this);
      });
    }
  };
})(jQuery);

(This does not include a fallback for older browsers. The rootMargin property, which defines how close an element should be to the edge of the viewport before being acted on, might want tweaking for your design.)

Drupal constructs most image HTML tags via its image template, so a hook_preprocess_image can be added to a theme to hook in and change the src attribute to be a data-src attribute. If required, a placeholder image can be used in the src attribute there too. We tend to use a single highly-cacheable transparent 1x1 pixel lightweight image, but sometimes a scaled down version of the 'real' image is more useful.

The lazy loading idea can be applied to any page element, not just images. Videos are a good candidate - and I've even seen ordinary text loaded in on some webpages as you scroll further through long articles. Enjoy being lazier AND faster!

Image: Private beach by Thomas

Jun 11 2019
Jun 11

Advanced Encryption Standard, where we use “AES-256” to encrypt the data with Cipher. Encrypt & Decrypt approach taken is “Cipher Block Chaining” method “AES-256-CBC”.

AES Encrypt

  • We would have the “Secret” stored in a file which is other than the web root.
$key = hash('sha256', $secret, true);
  • Hash the “Secret” with sha256, this gives you the “Key” which will be used to openssl encrypt.
  • And Generate the pseudo random bytes as “IV”, so that it would be used during encryption and also be attached to the encrypted data.
$iv = openssl_random_pseudo_bytes(16);
  • Now encrypt the “String” with openssl encrypt by passing the “AES-256-CBC” method, “Key” and “IV”
$ciphertext = openssl_encrypt($plaintext, $method, $key, OPENSSL_RAW_DATA, $iv);
  • “openssl_encrypt” will Encrypt given data with given method and key, returns a raw or base64 encoded string.
  • “Hash” the returned “Cipher” text with sha256 hmac method
$hash = hash_hmac('sha256', $ciphertext, $key, true);
  • Now concatenate the “IV” & “Hash” & “Cipher” and store in the DB as the encrypted value.

AES Decrypt

  • Hash the “Secret” with sha256, this gives you the “Key” which will be used to openssl encrypt.
$key = hash('sha256', $password, true);
  • Explode the concatenated string to “IV” & “Hash” & “Cipher”
$iv = substr($ivHashCiphertext, 0, 16);

$hash = substr($ivHashCiphertext, 16, 32);

$ciphertext = substr($ivHashCiphertext, 48);
  • “openssl_decrypt” will take a raw or base64 encoded string and decrypts it using a given method and key.
  • Now decrypt the “Cipher” with “AES-256-CBC” method, “Key” and “IV”
openssl_decrypt($ciphertext, $method, $key, OPENSSL_RAW_DATA, $iv);
  • Return the decrypted “String”.it is ok, or do i need to change it to excel.

Cheers :)

Jun 11 2019
Jun 11

Change is the only constant and yet what one fears the most is change. But it is rightly said about change - “Don’t be afraid of change. You may lose something good, but you may gain something better.” We’ll like to say the same about the fear you hold for changing the current version of your Drupal 6/7 site to Drupal 8. Well, we also know that its more of a confusion than the fear of change, since you’re stuck between the two thoughts - whether to upgrade now to Drupal 8 or wait for Drupal 9. What if we say, we offer you a solution that will hit both the birds with one stone?

An Easy, Inexpensive & Drupal 9 Compatible Migration!

We have been an active Drupal community member since the past 6+ years, 7+ Drupal projects supported, 5000+ successfully delivered international projects and 500+ international Drupal projects - out of which 100+ projects are of Drupal Migration. And hence, we can help you in migrating your current Drupal 6/7 site to Drupal 8 and that too in a way that you will not have to spend a single penny for migrating to Drupal 9 in future. There’s a bunch of rational reasons to back this statement and offer of ours, which we’ll like to share with you:
 

  • Change in Drupal Philosophy
    Previously, every Drupal upgrade was considered to be tedious and more of a technical task as compared to its counterpart CMS platforms. This is because Drupal 8 was created with a philosophy of bridging the gap between the technical developer and a layman-like admin. And taking this philosophy of positive change, Drupal 9 is going to bridge the gap of upgrade issue by introducing compatibility between its older and newer version - making the entire process effortless and inexpensive.
     

  • Upgrade-based Modules
    The compatibility between the older and newer version of Drupal majorly depended upon the modules and themes used while building the older version. Until and unless these modules and themes aren’t upgraded, the migration was a time-taking task and tedious task that required technical assistance. This has been changed with the change in the upgrade path of the content, which makes the migration easier if prepared.
     

  • Drupal Core Deprecating Policy
    Drupal 8 capable of introducing new APIs and features against the old ones. And once these new ones are launched, the old ones automatically get deprecated. Though these old APIs cannot be removed in the minor release of  Drupal 8, it will be removed in the next major version of Drupal 9. Hence, if you migrate to Drupal 8 now, the migration to Drupal 9 can easily be done with just a handful of changes to make it compatible.
     

Looking at the above three major reasons, it must be clear to you that migrating to Drupal 9 from Drupal 8 is far easier as compared to the migration from Drupal 6/7 to Drupal 9. Dries Buytaert, the founder of Drupal, has also shared similar information about planning to be done for Drupal 9. According to him, Drupal 9 is basically built in Drupal 8 instead of a different codebase, altogether. This implies that the new features are added as backward-compatible code and experimental features, which means once the code is stable the old functionality will be deprecated.
 

Dries, in his blog on ‘Plan for Drupal 9’, has quoted contributed module authors as one of the core reasons behind the easy migration from Drupal 8 to Drupal 9. On this, he says that these are the module authors are already well-equipped with the upcoming technologies of Drupal 9 and hence they can priorly work in a manner that is Drupal 9 compatible. AddWeb, being one of these contributing members of the community, can assure you of the easy and inexpensive migration to Drupal 9 as and when it arrives.
 

Why Vouch for Drupal 9?
Now, after grasping all the above information regarding the upcoming major release of Drupal 9, you must be wondering what’s in Drupal 9 to vouch for. Let us throw some light on the same, to be able to bring some clarity for you. Drupal 9 is all about eliminating the use of deprecated modules and APIs. Drupal 8, which runs on the dependency of Symfony 3, will run out from the market by November 2021. And hence, it is highly advisable to upgrade and avail the benefits of all that’s latest!
 

Concluding Words:
As an expert #Drupal-er and active community member, AddWeb is all set to offer you with this amazing opportunity to migrate from your current Drupal 6/7 site to Drupal 8, in a way that the future migration to Drupal 9 will be super easy and inexpensive. Share your details with us in here and let our Drupal Migration Experts get back to you. In case, of any queries or suggestions feel free to get in touch with us!

Jun 10 2019
Jun 10

Why?

Because instead of building a radically new version of Drupal in a separate codebase, Drupal 9 is being built in Drupal 8.

You might be thinking… “Huh?!”

Well, what this means is that the upgrade experience will be as smooth as a babies bottom.

Drupal 9 will essentially be just like another minor core update in Drupal 8. 

What is a minor core update? Quite simply, it’s the middle number in the version of Drupal you are running.

Core updates come out roughly every 6 months and keeping your site up-to-date with these is critical in making sure it’s well maintained.

Drupal Patch MeaningPhoto credit: From Acquia webinar

Drupal 9 release date

So when is Drupal 9 expected to be released?

From the information we have so far, it's scheduled for the second quarter of 2020.

So why was this date chosen in the first place?

Simple. A little thing called Symfony 3.

Drupal 8’s biggest dependency is Symfony 3, which has an end-of-life date of November 2021.

This means that after November 2021, developers will not resolve any security bugs in Symfony 3, and Drupal will be in the same situation.

Drupal 9 will be using Symfony 4 or 5 and won’t have to worry about this issue.

Drupal 9 release datePhoto credit: From Acquia webinar

What does this mean for Drupal 6 or 7 sites?

Well, it means you’re missing out on a helluva lot of great new features, you have potential security risks and are flat our hindering yourself from being able to deliver amazing user experiences that will help your business grow.

If you’re on Drupal 6, support ended as far back as February 2016 and you’ve got serious unmitigated security risks.

You’re on Drupal 7, support ends in 2021 and we all know how fast time goes.

If you haven’t started planning or budgeting for this, its time to start now.

The migration from either 6 or 7 to 8/9 is going to be painful and cost-intensive but it will be the last great migration Drupal will need to incur.

Does this resonate with you? Let's chat!
 

Clutch reviews
Jun 10 2019
Jun 10

This post was written by Adam Bergstein with input and feedback from Aimee Degnan and Ryan Bateman.

Hook 42 recently had a project that required the use of Kubernetes. Kubernetes is an orchestration tool that helps solve many enterprise problems when using multiple containers. People often want redundancy and scale across a series of containers or the same set of containers across multiple machines. Kubernetes helps solve this. It also can help perform orchestration tasks during failures or to distribute load between containers. Managing containers at scale can be a challenge and the goal of Kubernetes is to help.

We have long been tracking the efforts of Lagoon, a promising open source continuous integration and continuous delivery (CI/CD) hosting platform that is developed with Kubernetes. CI/CD is built around the concept of rapid deployments of ongoing, frequent changes. This lowers the risk presented by larger, fixed deployments by promoting smaller, more routine deployments. Lagoon not only offers hosting-related tools, but the platform is able to run locally as well. The CI/CD capabilities helped create testable environments as we pushed changes through our development workflow. We want to share our experience. 

Understanding Considerations

There are some key concepts to understand how Lagoon works before diving in.

Persistence

Drupal applications require a “source of truth” for persistent content, which includes a Drupal application’s managed files and database. Production environments (or pre-production before a system is launched) conventionally serve as the source of truth environment within a development workflow. Content is subsequently pulled from the source of truth and it is only managed by changes made directly on the production system. Where code can be pushed through environments, content should always get pulled from production. 

Repositories

Code repositories are critical for managing code and deployments. Each change is one or more commits that can be staged within specific branches. Changes can be merged into other branches, rolled back if there is an issue, and audited as a series of changes. 

Hosting providers offer varying conventions and integrations tied to code repositories. As a simple example: both Pantheon and Acquia offer their own Git repositories commonly synchronized with a Github or Gitlab repository. The Github/Gitlab repositories offer development tools like pull requests or integrations to help support team-based workflows. 

Hooks/Events

Both repositories and hosting platforms expose relevant hooks that are useful for performing actions during DevOps events. This is how automation can be built into specific changes. Automation is critical for any CI/CD infrastructure, as it’s not manageable or practical to manually rebuild environments as each frequent change occurs. 

Creating and maintaining branches, tags, and pull requests tied to repositories create opportunities for automation that are commonly leveraged repository events in our DevOps infrastructure. Even synchronizing between two repositories can be a useful DevOps trigger, as this signifies code is ready for some degree of deployment or testing. 

Any sort of deployment found in CI/CD workflows often require rebuilding containers. This is common for all environments. Persistent aspects may be left untouched, while the containers for a given environment are rebuilt as new changes are deployed.

On-demand Environments

Cloud infrastructures changed the traditional way of understanding environments. On-demand environments are a result of rapid change and are transient. This is in contrast to an environment traditionally configured on a bare metal server. On-demand environments are commonly provisioned with new branches, tags, or pull requests and destroyed when the changes are deployed. They are not intended to persist.

In a CI/CD workflow, incremental changes are verified before the production deployment. Development-specific branches and pull requests can build new environments known as on-demand environments. Persistent contents from the “source of truth” are copied with changes pushed to a branch on a new environment. This helps to verify and mimic production behavior with the new change. And, the environment subsequently goes away when the change is deployed.

Fixed Environments

Hosting providers still commonly offer “fixed” environments as people are not often comfortable merging an on-demand environment right into production. But, fixed environments exist for an intended purpose. As an example, a production environment is intended to be what end-users access. Other environments are commonly used to vet changes before a production launch. Vetting may include any of the following purposes: proper deployment, stakeholder approval, automated tests, and verified with the most recent code (changes pushed while the code was developed and/or staged). The same fixed environments can be uniquely configured and used in those capacities in a more permanent capacity.

Exploring Lagoon

Every hosting platform has a set of best practices tied to their platform that drives intended use. While any platform, like Lagoon, can seem opinionated, our focus is to connect the aforementioned concepts to their specific Lagoon equivalent. 

Repositories, Hooks, and Events

Lagoon, at this point, attaches to a remote repository, like Github or Gitlab. Lagoon integrates through the repository platform, via a webhook or continuous integration system. The hook is intended to be invoked during specific events like branch creation and/or pull request to help create the CI/CD on-demand environments. This approach shaped our development and release workflow to the Lagoon platform, which we elaborate more on below. 

Fixed Environments

The first thing our team did was set up fixed environments tied to specific branches. This met the need of having changes go through a conventional development, staging, and production release cycle. Within Github, there are subsequent branches for each fixed environment. As a best practice, each branch was locked within Github. This is to ensure a branch was not accidentally removed, which may remove a fixed environment entirely. 

Github repositories often leverage “master” as the default branch. We’ve selected that as our branch for our development server. This is useful for pull requests, as “master” is selected by default and our team didn’t need to worry about selecting the wrong branch. Doing so may trigger a code deployment to another, unintended environment.

On-demand Environments

Lagoon maintains two events for provisioning on-demand environments. The first is pull requests. Pull requests seem to be useful if you are operating in a pure CI/CD environment where changes can be tested as an environment tied to the change. But, pull requests often are not created until a potential change is ready to be reviewed and possibly merged. This would be ideal for an environment to do smoke testing. But, we desired to have environments for work-in-progress as well, where anyone could push a commit to a branch, demonstrate some work, or get help on something. We opted not to use pull requests for that reason.

The second provisioning event is through a branch pattern. This leverages a naming convention to create on-demand environments. Lagoon monitors the creation of any branch that matches the pattern and creates an environment. This is helpful for the initial testing of changes.

Release Workflow 

Our release workflow is based on staggered branches. Changes are pushed to the on-demand branches and prepared for initial review. A pull request is made for the code review and smoke testing occurs on the on-demand environment. Once the pull request is merged into master, our development server is rebuilt (any commits pushed to master trigger a rebuild of the development server). We close all on-demand branches at this point, which subsequently removes the environment on Lagoon. 

Once the merge is complete, additional quality assurance, client review, and automated testing occurs through development and staging environments. This happens by making a pull request from the master to staging branches, creating a release candidate. 

With all of the verification passing, we are able to initiate the release. This is done via a pull request from the staging to production branches. Once the pull request is accepted, the production release occurs. All of this is automated thanks to the hooks and events tied to the Lagoon platform.

Persistence

Lagoon rebuilds environments on every push to a branch. In our workflow, accepted pull requests push vetted code to branches. Persistence becomes a major factor when environments can be rebuilt in this fluid manner. 

Lagoon also provides the ability to configure what environment is deemed the production environment. This is subsequently protected within Lagoon and persistent. The “production” branch, and its subsequent environment, represent the source of truth for database and files. Rebuilding the database and files on a production release is risky, so this mechanism needs to exist to differentiate from the other more fluid environments that get rebuilt more routinely. These protection mechanisms helped avoid production data being overwritten through the API or any unintended impact by a production deployment and subsequent rebuild. Not only that, but this helps identify what data needs to be routinely backed-up and maintain high fidelity.

DevOps

All non-production environments should automatically load a copy of the production database and files when new changes are pushed to the subsequent branch. Verifying changes before being released to production was a critical DevOps automation for us.  We leverage hooks in Lagoon (defined in the .lagoon.yml file) with Drush commands and aliases to identify the environments that synchronize the database and files from production every time an environment is rebuilt.  

Code artifacts were also a vital part of our DevOps automation. We leveraged Composer to build the Drupal codebase (using the great Composer template for Drupal projects - drupal-composer/drupal-project) and Gulp to build the theme. Custom code was committed to the repository. This allowed us to easily and routinely evaluate changes to core and contrib.

Once our code was built, we executed Drush commands to import the configuration, run database updates, and clear caches to ensure changes were properly deployed. While this does not catch every possible nuance in deploying code (e.g. rebuilding entities), we automated a significant portion of this that should minimize the need for running manual commands. 

Observations

Lagoon is doing some innovative work, especially for Drupal teams looking for a CI/CD platform adopting rapid releases. Their “infrastructure as code” implementation, through their Docker images and .lagoon.yml configuration, enable rapid, effective change at the heart of DevOps that can help continuous learning and the subsequent predictability of automation. 

As expected, coming from the perspective of using other hosting platforms like Acquia and Pantheon, there was some learning to adapt to the fluid CI/CD nature of the platform. Lagoon’s local implementation replaced our standard MAMP, DDEV, and Lando setups. Being able to add in restrictions, like branch locking, was beneficial to our teams transition when configuring the infrastructure. Also, there were some different conventions, like leveraging drush aliases through Lagoon’s CLI container and not through a local Drush, that were unique. But, many of our existing knowledge and concepts were the same or could easily be mapped to their Lagoon equivalent.

After some trial and error, we were able to share some feedback with the Amazee team on improvements to their documentation and relevant code samples we felt could help others. Hopefully shaping the path forward for others being onboarded can make it easier to digest for those new to the platform.

Overall, Lagoon shows a lot of promise for modern workflows. While different than other hosting platforms, Lagoon enabled our team to work effectively and efficiently from start to finish. We’re excited to see how the platform evolves and continues to provide solutions capable of rapidly changing to our customer’s needs. 

Jun 10 2019
Jun 10

The audience revels in the magnificent performances of the actors, picturesque visuals, breathtaking action sequences, alluring background score, thoughtful dialogues, and emotions attached to the narrative. To bring them all out in the best possible way on to the screen, there goes an exceptional direction and screenplay behind-the-scenes in addition to a massive swathe of people who are involved in different parts of the film. Apparently, a film works wonders when both the onscreen elements and the off-screen elements strike the right chord.

Interior of cinema hall with red chairs


A similar theory is of paramount significance in the case of web development. The rapid evolution of diverse end-user clients and applications have resulted in a plethora of digital channels to support. Monolithic architecture-powered websites leverage web content management solutions for disseminating content via a templating solution tightly coupled with the content management system on the backend. Propelled by the need to distribute content-rich digital interactions, application development and delivery (AD&D) professionals, who are supporting content management systems (CMS), are showing an inclination towards an API-first approach.
 
Headless CMSes have been leading the way forward to provide a spectacular digital experience and Drupal, being API-first, is a quintessential solution to implement a headless architecture. Before we move forward, let’s briefly look at how significant is content for your online presence and how the headless CMS is fulfilling the needs of organisations.

Content: Linchpin of ambitious digital experience

It is difficult to envisage a digital screen without content as every single moment that we spend on a smartphone, laptop, tablet, or a smartwatch is enriched with digital content like images, text, video, product reviews and so on. Even when we talk to a voice assistant and inquire about something, its answers constitute words, links, pictures, maps etc. (again, it’s all content). The relevance quotient of that content should be top-of-the-line as it is the medium that enables users to experience their digital interactions. This makes content the linchpin of ambitious digital experiences.

The relevance quotient of content should be top-of-the-line as it is the medium that enables users to experience their digital interactions

Several content repositories are struggling to meet today’s digital requirements. When the world was just web and email, governance of dynamic content dissemination worked perfectly fine using a web CMS. A web CMS has been an astronomical solution for offering unique designs, WYSIWYG authoring, a workflow for approvals and translation, fantastic marketing capabilities and internet-scale delivery.

Forrester’s The rise of the headless content management system report states that web CMSes has led to a cluster of content with markup and metadata. Moreover, if you optimise your content repository for HTML templates, it would require you to undo all the optimisations in order to use the content elsewhere in a non-HTML format. Also, tightly coupled approaches did not need APIs (Application Programming Interfaces) connecting the repository to the delivery tier or the content editing and workflow tools. And, selling the content repository and delivery environment together is great for web-only scenarios but reusing the content on the mobile application or in email marketing would still require you to run the entire web CMS stack.

There is where the need for headless CMS kicks in. It uses modern storage, stateless interfaces and cloud infrastructure for the efficacious delivery of Internet-scale content experiences on any device.

Uncloaking headless CMS

Illustration having traingles and rhombus consisting of icons representing shopping cart, Source: Forrester

Headless CMS is a content component in a digital experience architecture that interacts with other components comprising of authoring, delivery front ends, analytics tools through loosely coupled APIs. It does not do any rendering of content and the rendering is decoupled from the management interface which is why terms ‘headless’ and ‘decoupled’ are used interchangeably.

Headless CMS stores the content, offers a user interface for the creation and management of content, and provides a mechanism for accessing the content through REST APIs as JSON

While ‘head’ refers to the frontend rendering or the presentation of the content, the ‘body’ refers to the backend storage and the governance of the content.

Headless CMS stores the content and offers a user interface for the creation and management of content. It provides a mechanism for accessing the content through REST APIs as JSON. So, it is also referred to as API-first CMS.

Content can be delivered to and integrated with the third party system like e-commerce tool. Or, it can be delivered to and exhibited using front end technology in the browser, mobile app or syndication service. Headless CMS is a wonderful content-as-a-service solution.

Flowchart containing rectangles to explain headless CMS and Traditional CMSSource: Contentstack

A traditional CMS confronts with the processes of creation of content, its dissemination and its display. It has a backend where the users can enter content which is stored in a database, retrieved, rendered into HTML on the server which is then delivered as fully rendered pages to the browser.

In contrast, headless CMS decouples the rendering and presentation system thereby enabling you to replace it with frontend or other technologies of your choice. The CMS will be a content store and web application for the content producers and the content is delivered to the frontend or another system through an API.

With the stupendous rise of headless architectures, a portion of the web is turning server-centric for data and client-centric for the presentation. This has given momentum to the ascension of JavaScript frameworks and on the server side it has led to the growth of JSON:API and GraphQL for better serving the JavaScript applications with content and data. Among the different web services implementations like REST, JSON:API and GraphQL, when we consider request efficiency, JSON:API is the better option as a single request is usually sufficient for most needs. JSON:API also is great in operational simplicity and is perfect while writing data.

Headless CMS decouples the rendering and presentation system thereby enabling you to replace it with frontend or other technologies of your choice

Headless CMS is advantageous for the following reasons:

  • You can instantly start with headless with no hurdles.
  • It does not require you to alter your existing delivery tier as it seamlessly fits into the existing architecture
  • It is perfect for building web and mobile applications as it allows practically any application- be it web, mobile, IoT(Internet of Things), smart TV or touchscreens- to pull and push content.
  • Frontend developers, backend developers, marketing and content editors can get started quickly and work autonomously.
  • You can give more power to the front-end developers as they simply work content APIs and do not have to learn inner functionalities of CMS or its templating system.
  • It follows the approach of ‘Create Once, Publish Everywhere’ thereby allowing you to reuse content for different channels.
  • It works tremendously well in a microservices environment and enables cross-functional teams to work via agile processes and get tasks done swiftly.

Going the Drupal way

Call it headless or decoupled, leveraging Drupal, as the central content service, is a magnificent solution to power your complete application and device ecosystem. Decoupled Drupal has the provision for omnichannel delivery of content that is quintessential for marketers and publishers.

Decoupled Drupal has the provision for omnichannel delivery of content that is quintessential for marketers and publishers

It enables the developer to leverage any technology for rendering the frontend experience instead of theming and presentation layers in Drupal. The Drupal backend exposes content to native applications, JavaScript application, IoT devices and other such systems. In addition to the modules for web service implementations like REST, GraphQL and JSON:API, Decoupled Drupal ecosystem also offers several other alternative modules that can be of huge help.

Flowchart consisting of rectangular boxes and arrows to explain types of decoupled Drupal Source: Dries Buytaert’s blog

There are different approaches to decouple Drupal:

Coupled Drupal

In traditional Drupal, also referred to as coupled Drupal, monolithic implementation is done in which Drupal has the authority over all frontend and backend side of your web application setup. Coupled Drupal is fantastic for content creators, especially when you are in dire need of achieving fast time to market without relying too much on front-end developers. Developers, who love Drupal 8 and want it to own the entire stack, still find it a great way of building a web application.

Progressively decoupled Drupal

Another way to utilise the power of Drupal is the progressively decoupled approach. It is a compelling approach for developing Drupal’s frontend where the governance of contiguous experiences is handled by content editors, site assemblers and the front-end developers. While content authors and the site assemblers get the benefits of contextualised interfaces, content workflow, site preview etc. to remain usable and incorporated with Drupal as a whole, a portion of the page to a JavaScript framework is dedicated for front-end developers to let them work autonomously. Progressive decoupling helps in utilising Drupal’s rendering system while simultaneously using a JavaScript framework for powering the client-side interactivity.

Fully decoupled Drupal

In fully decoupled Drupal, there is a complete separation between Drupal’s frontend and the backend. The Twig theme layer is replaced with a different frontend entirely. Native mobile or desktop applications, JavaScript single-page applications or IoT applications are some of the examples. RESTful API is leveraged by these applications to communicate with Drupal. RESTful API, which acts as a middle layer between frontend and backend, exposes resources as JSON or XML that can be queried or modified with the help of HTTP methods like GET, POST etc. Even though integral features like in-place editing and layout management are not available, the fully decoupled approach is preferred by developers as it offers ultimate authority over the frontend and is superb for those who are already experienced with the development of applications in frameworks like React, Vue etc.

Increasing intricacy of JavaScript development has given birth to JAMstack (JavaScript, APIs, Markup) which has, in turn, resulted in another very much favoured approach called fully decoupled static sites. Enhanced performance, security and reduced complication for developers have made static sites a favourite option among many developers. For instance, Gatsby, a static site generator, can retrieve content from Drupal, generate a static site, and deploy it to a content delivery network (CDN) via specialised cloud provider like Netlify.

Meritorious features of decoupled Drupal

Following are some of the major benefits of decoupled Drupal:

  • Syndication of content: Whether it is a coupled approach or a decoupled approach, Drupal remains the hub while developing experience ecosystems with all of them ingesting content from one source of truth.
  • Full separation: Even though monolithic and progressively decoupled approaches in Drupal has implicit separation of concerns and mostly couldn’t be seen by the user, fully decoupled architecture gives you an explicit separation between structured content that is governed by Drupal and its presentation which is managed by consumer applications.
  • User experience: Decoupled architecture offers an amazing user-centred experience. For instance, a JavaScript framework can be more suited to the task when it comes to an interactive application which is in dire need of frequent re-renderings of content.
  • Work in parallel: Decoupling also brings efficacy to a pipelined development process which involves teams working in parallel. A team of front-end developers can develop applications against a dummy web service API that is utilised only for the purpose of testing but not actually completed whereas the team of backend developers can administer the backend that exposes the API and the underlying processes yielding it.

Challenges of Decoupled Drupal

Some of the major hurdles while decoupling Drupal are mentioned below:

  • Editing and governance: Drupal 8’s wonderful features like in-place editing, configuration menus constituting certain page components, and some modules that include contextualised tools for Drupal governance won’t be available.
  • Security: Although JavaScript and application frameworks have the provision for defending cross-site scripting attacks, fully decoupled and progressively decoupled approaches put the obligation of carefully scrutinising the security implications.
  • Point of failure: Fully decoupled architecture require the use of stacks like MERN (MongoDB, Express, React, NodeJS) or MEAN (Angular instead of React) or other solutions that may imperative for native mobile or IoT applications. That means, it can be challenging to introduce an additional hosting stack into your firm’s infrastructure and can lead to an additional point of failure.
  • Layout management: Having to remove modules like Panels and Display Suite can be an issue for the developers causing obstacles to the marketing teams who do not have the access to developers who can help in implementing layout changes.
  • Previews: It can be challenging if your editorial team wants a previewable content workflow as it is used to working with coupled CMS.
  • Notifications: In a fully decoupled architecture, Drupal system messages, that are frequently highlighted at the top of rendered pages, are not accessible. Moreover, providing these messages in a progressively decoupled setup is not much of an issue.
  • Performance: BigPipe module works tremendously well in enhancing the web performance in Drupal that can match the page load performance of JavaScript applications. Fully decoupled architecture is devoid of this feature but progressively decoupled setup can give you the option of leveraging the feature.
  • Accessibility: Drupal won’t be providing the readymade frontend code or a roster of core interface components and interaction that can be relied upon which calls for front-end developers to build a suitable UX and ensure accessibility without the assistance of Drupal.

Strategies employed while choosing decoupled Drupal

Assessment of the organisational needs is instrumental to the decision-making process. Being abreast of the business requirements pertaining to building a robust digital presence helps you in forming an immaculate strategy while choosing decoupled Drupal.

For instance, selecting decoupled Drupal might or might not be an astounding option for developing a single standalone website. It depends upon the functionalities that are deemed as “really necessary” by your developers and content editors. In case, you are developing multiple web experiences, decoupled Drupal instance can either be leveraged as a content repository which is devoid of its public-facing frontend or simply as a traditional site that can act concurrently as a content repository. It, again, depends upon how dynamic you want your web application to be that would ultimately help in deciding a JavaScript of choice or even a static site generator.

Developing native mobile or IoT applications may require you to adopt a decoupled approach where you can expose web service APIs and consume that Drupal site as a central content service which is bereft of its own public-facing frontend.

The significant thing to take a note here is the stupendous capabilities of Drupal for supporting almost any given use case as it streamlines the process of developing decoupled Drupal. 

Case studies

Some of the biggest names in different industries have chosen decoupled Drupal to power their digital presence.

The Economist

Established in 1843, The Economist, which set out to take part in “a severe contest between intelligence, which presses forward, and an unworthy, timid ignorance obstructing our progress”, has seen staggering growth over the years and has earned great recognition in the world of media. It chose decoupled architecture for building a Drupal backend for the native iOS and Android Espresso applications with the help of a digital agency.

Screengrab of The Economist Espresso application showing the logo in red and black strips on top left corner


Drupal turned out to be an astronomical solution for the Economist editorial team. They could iteratively design and had a spectacular content creation and publishing workflow that met their requirements. It helped in incorporating features like automatic issue creation, approval of content, the look and feel of interfaces among others.

The customisation of Drupal content creation interface was done in a way that would avoid errors while formatting and enables content authors to emphasise on content. Editorial teams had the provision for a dashboard that could help in swiftly and efficaciously creating and publishing new issues. It also offered visual indicators of approval status, countdown timers for each region and quick links for all the articles.

Produce Market Guide

The website of Produce Market Guide (PMG), a resource for produce commodity information, fresh trends and data analysis, was rebuilt by OpenSense Labs. It involved interpolation of a JavaScript framework into the Drupal frontend using progressively decoupled Drupal that helped in creating a balance between the workflows of developers and content editors. The rebuilding process comprised of majorly progressively decoupled approach, React, Elasticsearch Connector module among others.

Homepage of Produce Market Guide with red strip on top and images showing people on right


The process of mapping and indexing on Elastic Server required ElasticSearch Connector and Search API modules. Elastic backend architecture building process was followed by the development of faceted search application with React and the integration of the app in Drupal as block or template page. The project structure for the search was designed and built in the sandbox with modern tools like Babel and Webpack and third-party libraries like Searchkit.
 
Moreover, Logstash and Kibana, that are based on Elasticsearch, were incorporated on the Elastic Server thereby helping in collecting, parsing, storing and visualising the data. The app in the Sandbox was developed for the production and all the CSS/JS was incorporated inside Drupal as a block to make it a progressively decoupled feature. Following the principles of Agile and Scrum helped in building a user-friendly site for PMG with a search application that could load the search results rapidly.

Princess Cruises

As one of the premiere cruise lines in the world, Princess Cruises innovatively metamorphosed their marketing landscape with the integration of decoupled Drupal. They went on to fundamentally change the way their guest accessed information while onboard their ships.

Princess Cruises webpage showing a mobile phone over a bluish background


The guests on their ships relied upon their smartphones to swiftly access information, purchase items and inform the management about anything. This led to the development of [email protected] with the objective of transforming Princess experience. It is a mobile application that is specifically designed for allowing guests to plan their day, assess the ship’s itinerary, scan through restaurant menus and book shore excursions on-the-go.

When the ships are sailing different parts of the world, the digital experience had to be reliable which called for a centralised way of administering content across several channels and touchpoints. This would enable them to offer a uniform experience on mobile and digital signage onboard the ship. Decoupled Drupal was chosen to serve content across multiple touchpoints and channels. Princess Cruises could create content once and publish everywhere thereby connecting every passenger to [email protected], hence Drupal.

NASA

NASA, an independent agency of the executive branch of the federal government of the United States, went for the decoupled setup for the redressal of their site with the help of an agency. Drupal and Amazon Web Services (AWS) turned out to be a wonderful match for meeting the content needs of both NASA and the public with user-driven APIs, dynamic host provisioning, scalability and security.

Homepage of NASA showing images of planets in space


The deployment of NASA’s website is done in numerous AWS availability zones and manages almost 500 content editors updating over 2000 content every day. On an average, it receives nearly a million page views a day and has even gone onto handle peak load of approximately 40,000,000 page views in a single day with groundbreaking feat of 2,000,000+ simultaneous users during NASA’s 2017 Total Solar Eclipse coverage.

Conclusion

Application development and delivery teams have already started exploring headless CMS tools along with numerous other sets of API-first microservices for building innovative solutions. These digital natives are adopting a do-it-yourself approach to digital experience architectures and dragging their organisations into the digital-first age.

Headless throws open interesting possibilities and challenges traditional ways of doing things. For a lot of organisations, it is no longer a question of whether they should go for headless or not but more of a contemplation of headless to assess where does the headless fit in their organisational setup. Moreover, the growth of microservices architecture will continue to give that extra push to headless or decoupled approaches.

Decoupled Drupal is an outstanding solution for implementing headless architecture. It acts as a central hub, processing and curating content and data from other tools and services while simultaneously sharing its own content and data via APIs. With the stupendous flexibility, scalability and content authoring capabilities of headless approaches, digital firms can enjoy seamless creativity and innovation as they build their digital architectures.

We have been perpetually working towards the provision for great digital experiences with our suite of services.

Contact us at [email protected] to get the best out of decoupled Drupal and ingrain your digital presence with its superb capabilities.

Jun 10 2019
Jun 10

Hussain began working with PHP in 2001, and at that time, wouldn't touch any CMS or framework and preferred to write his own. He grew tired of issues with PHP and was about to switch to another language when he came across a volunteer project that needed Drupal's capabilities, so in 2010 he tried Drupal 6.

Jun 10 2019
Jun 10

Smart business decisions tend to be equated with cutting costs and saving money.
 
Over the past decade or so, “Better! Faster! Cheaper!” has become the rallying cry for business process reengineering and new initiatives within every sector. As a developer and former business owner, I get this. Efficiency is essential.
 
I tend to look favorably on the fastest, most streamlined solution, and as such, I have a lot of empathy for clients who are seeking fast fixes to ensure that their websites and all of their digital assets get into compliance with WCAG 2.1 for ADA accessibility.
 
But as a developer, my focus is, first and foremost, on solving problems, and I can state unequivocally that overlays can't be counted on to solve the challenges associated with digital accessibility.
 
A recent web accessibility legal case, Haynes vs. Hooters set the precedent that organizations are required to remediate their actual code and not rely on band-aid dashboards or overlay solutions that appear to represent a quick fix that requires seemingly little hands-on maintenance.

Here are 4 key challenges inherent to overlays:

  1. Visually impaired users don't typically use them. They tend to have their own tools with their own voice and reader settings with which they are comfortable and proficient based on their experience and ability level. Your goal is to make your code available to whatever tools and devices they prefer using, not force them to use your overlay tool that has pre-selected settings and options.
  2. Visually impaired users typically have their own stylesheets and ways to access the web. They don’t tend to use presets from widgets because widgets complicate the experience for them and the inability to disable or override them can be frustrating.
  3. Overlays simply don't work well with mobile devices unless a significant expenditure is invested in customizing them to the individual site.
  4. Overlays basically amount to putting a line of Javascript code that pulls preloaded information onto your site. So even if the overlay has been customized as part of your package, to make it fully compliant it's nearly impossible to keep it that way, because accessibility issues can re-emerge with any subsequent change to your site.

 

Sustainable Website Compliance Solutions

Promet Source serves as an accessibility partner, committed to real and lasting accessibility solutions.
 
We conduct both automated and manual testing holistically, from the perspective of the entire spectrum of disabled users and available Assistive Technology -- recognizing that there is no one-size-fits-all fix. This list of automated testing tools, recognized by the World Wide Web Consortium (W3C), demonstrates the wide range of testing options and the need for focused expertise. 
 
Our clients interact closely with both accessibility and developer certified experts throughout engagement and have the opportunity to ask questions and seek clarification every step along the way.
 
After guiding clients through the remediation process of actually fixing code to conform to WCAG 2.1 standards, we provide tools and resources to ensure that your development team has the training and knowledge to maintain your sites conformance.
 
We look forward to consulting with you about your specific accessibility objectives and working toward a solution that best addresses your needs.
 

Jun 08 2019
Jun 08

If you use the Drupal Composer Drupal Project template for managing your Drupal 8 site’s codebase, and you commit dependencies to your Git repository, then you’ve probably run into issues involving cloned dependencies. Sometimes when requiring a dependency via Composer, you end up with a cloned version (which includes a .git directory) instead of a release version. 

If you’re committing dependencies to your repository, then the .git directories associated with cloned dependencies cause an issue when you try to commit. A common resolution is to remove the .git directory from the dependency’s directory.

While this solves the immediate issue, the next time you go to update Drupal core, you’ll likely see an error message along the lines of, “The .git directory is missing from /var/www/html/vendor/some/dependency, see https://getcomposer.org/commit-deps for more information”. How can we get past this?

Here’s my workflow:

  1. Delete the entire /vendor/ directory.
  2. Run “composer install” to reinstall all dependencies. 
  3. Update Drupal core (normally with “composer update drupal/core webflo/drupal-core-require-dev "symfony/*" --with-dependencies”
  4. Re-remove any .git directories for cloned dependencies.
  5. Commit the update.

Ultimately the "proper" solution will be to not commit dependencies to the project repository. I agree that this is the best solution, but not everyone’s workflow currently supports this.

There's also a great discussion in the Drupal Composer Drupal Project issue queue about alternate methods to deal with this issue. 

Have a different workflow to deal with cloned dependencies? Share it in a comment below!

Just getting started with managing your Drupal 8 project with Composer? Jeff Geerling has some super-helpful blog posts.

Jun 08 2019
Jun 08

One of Drupal’s big advantages is its possibility to structure content with the use of fields. However, from time to time you will want to link a file to your content without the need of adding a field to the database for that purpose.

The D8 Editor File Upload module provides this functionality by adding a button to the toolbar of the rich text editor (in this case CKEditor). This way it is possible to upload a file and present it within the content as a link. This tutorial will expĺain the usage of this module.

Let’s start!

Step #1. - Install the Required Module

  • Open your terminal window
  • In the root of your Drupal installation type:

composer require drupal/editor_file

type the composer command

No further modules are required.

  • Click Extend
  • Scroll down to the D8 Editor File Upload module and enable it
  • Click Install:

Click Extend

Step #2. - Configure the Text Format

  • Click Configuration > Text formats and editors:

Click Configuration

You can configure and add text formats to be used by different user roles on your site. By default, there are four formats.

  • Click Configure beside the Full HTML format
  • Scroll down to the Toolbar configuration area and click Show group names
  • Click the Add group button in order to create a new group and call it File:

Click Add group

  • Drag the paper clip button to the newly created group:

Drag the Paper clip button to the newly created group

  • Scroll down to the vertical tabs and add more file extensions to the Allowed file extensions (by default only txt):

add more file extensions to the Allowed file extensions

  • Click Save configuration.

Step #3. Adding a File Link to the Content

  • Click Content > Add content > Basic page
  • Make sure the text format is set to Full HTML, otherwise you will not be able to see the paper clip button
  • Add some dummy text and click the paper clip button
  • Click the Select/Browse File button and upload a file:

Click the Select/Browse File button

  • After uploading the file click Save:

Click Save

The link to the file will be shown in blue.

  • Click Save in order to save the node:

Click Save

Now you have a link to the file inserted into your content and you didn’t have to create an extra field for that. The link will open the file in the browser or it will download the file to your computer.

The link will open the file in the browser

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Jun 07 2019
Jun 07

I'd like to briefly share a new handy Chrome Extension that I recently created: Drupal Issue Chrome

chrome. noun. features added to something to make it nicer, but which don't affect the core functionality.

This extension will render links to Drupal.org issues in order to clearly indicate node id, title, and issue status. It closely mimics Drupal.org's own rendering of links to issues, bringing the same formatting to ANY website.

For example, an anchor link with the href and text content "https://www.drupal.org/project/drupal/issues/1308152" would become "#1308152: Add stream wrappers to access extension files" and would be colored appropriately. You may also hover over the issue to see the exact issue status, provided via the anchor title attribute. Take a gander:

Extension Screenshot

If the anchor text and href do not match, the extension will style the link without altering the content:

Google Search Screenshot

Simple, but very handy!

You can install the Drupal Issue Chrome extension here or contribute on GitHub!

Why?

I frequently reference Drupal.org issues in my daily routine, especially in JIRA. It's tiresome and inefficient to keep the title and status of those Drupal.org links up-to-date in JIRA.

I wanted to automate the process, but I wasn't interested in writing a JIRA plugin in Java. It occurred to me that it would be both easier to implement and more universally applicable if I could just create a solution as a Chrome extension via Javascript.

Jun 07 2019
Jun 07

Business is hopping. You’re hiring Drupal developers with varied backgrounds and skill sets. 

When working in Drupal, there are often many ways to achieve the same outcome, and quite often, Drupal developers find themselves on different pages. How do you determine whose way is the 'best' way and proceed with optimal efficiency?

There are two perspectives to consider:

  • A team executing best practices, and
  • The process(es) needed to get best practices into place.

 

Best Practices

When defining the best practices that your Drupal development team will follow, you need to consider the following areas of development:

  • Foundational Strategies
  • Common Feature Configuration Options
  • Standard Methods for Selecting Contributed Modules
  • Custom Coding Standards
  • Development Environment
  • Workflow Methodologies
  • Testing and Quality Assurance

Foundational Strategies

All Drupal sites have a set of features that are the same. For instance, most, if not all, sites: 

  • Use content types to create content pages
  • Have a search functionality
  • Need a custom theme
  • Must meet WCAG 2.1
  • Should be usable

Before the discovery phase of a project, where requirements are confirmed and refined, create a set of configuration and coding defaults that allow you to deliver a quality product, and enable non-developers to easily use the site.
 

Common Feature Options

There are multiple ways to develop features in Drupal; some good and some not so good. Although there might be exceptions to this rule, choosing one way to develop a feature across your projects will help ensure your product is the best it can be.

Start with consistent configuration strategies and contributed modules. Consider the following:

  • Low maintenance is key to sustaining a site and continued services.
  • End user processes and skills take precedence over what’s easy for a developer to do.
  • Security can be in jeopardy with custom solutions. 

When collecting requirements, compare what’s needed with the one or more strategies you have placed in your company toolbox. Use only an approved strategy unless the requirements can’t be met.

Standard Methods for Selecting Contributed Modules

When a requirement can’t be met with a feature configuration option already in your toolbox, it’s time to go looking for options within the many contributed modules. This is a time when your sought-after best practices can go out the window if you aren’t careful.

Evaluating contributed modules in an effort to meet requirements should be a consistent process. It should be a process that not only helps configure the appropriate solution, it should also yield a configuration option for future projects.

New “best practices” should consider the following:

  • The common features considerations suggested above
  • Pros and cons of each module that meets your needs, maturity, flexibility, and coding standards
  • The history of the contributed module developer(s) and their ability to maintain the module
  • Whether your team is ready to take up the mantle of maintenance if needed
  • The interaction the module(s) could have with other features on the site

Custom Coding Standards

You have exhausted options using Drupal’s core and contributed modules and still have requirements that need to be met. This is where custom code comes in. 

The Drupal community has shared numerous standards for code development for Drupal. You don’t have to reinvent this wheel. However, you do need to establish a process that ensures:

  • Decisions to use custom code are appropriate
  • Drupal coding standards are being followed

Establish a set of criteria that must be met before custom code is cut. Asking questions such as the following can kick off your evaluation process:

  • Which modules (core and contributed) have been assessed as a means of meeting the requirement?
  • Why won’t existing modules work?
  • Can existing modules be modified to meet the need?
  • Does the client want this specific custom solution or do they want to adjust the requirement?
  • What are the potential security and maintenance issues associated with the custom code that can surface during the life-cycle of the website?

Development Environment

Before you can use the above best practices, you need a development environment. 

Drupal can run in many different web server configurations, but there are server settings that maximize Drupal’s performance. Invent your own server or use a service designed specifically for Drupal, that’s your choice.

In order to develop a website that can be hosted by your client, you need to know what their server environment will look like. If it varies from the solution you have selected, you will need a process that allows for:

  • Best practice configuration and coding that can be executed
  • The solution to be tested on the client’s server environment
  • Multiple developers to participate in development without creating issues

Workflow Methodologies

None of the above will matter if you don’t have a workflow that supports the best practices you have set forth for your team. If your developers don’t have time to evaluate their options, consult with each other, or document their solutions, they will do what they can in isolation.

Workflow is about establishing a consistent way of working, while taking into consideration tested and tried software development methodologies. You don’t have to use what others are promoting. You can mix it up, or adjust to meet your needs.

Whatever the workflow you define, consider allowing time to:

  • Identify and create best practices
  • Test new practices for coding standards
  • Verify requirements have been met
  • Provide quality foundation configurations, those your client assume you will deliver

Testing and Quality Assurance

Testing and QA are part of a defined workflow. However, they are worth mentioning separately as each process can overlook issues if not done incorrectly. Therefore, when creating a workflow, ensure you have best practices in place, particularly those accepted by the software industry.

Such testing and QA processes should consider:

  • Automated and manual testing of accessibility
  • User acceptance testing
  • Common software testing such as unit, integration, system, sanity, smoke, interface testing, and regression

 

Getting Best Practices into Place

Are you sold? Do you see the logic in the above best practice categories? Great. The next question you might have is how to implement it. 

There is no one way. However, there are basic steps you can take to get started. Remember, change isn’t going to happen over night. Incremental change is an option, unless radical improvement is needed now. If this is the case, re-engineering is your best option.

One way to kick off the process of change is to perform the following tasks:

  1. Get your developers into one room
  2. Make a list of the most common feature requirements
  3. Identify strategies for meeting the common features
  4. Rank the strategies by the requirements met
  5. Document the strategies 
  6. Train your staff
  7. Meet regularly to learn from each other, to add new options, and improve existing strategies
     

Conclusion

This idea of consistent process improvement to help ensure a quality standard that has its rooms in the Capability Maturity Model Integration (CMMI), which dates back to 1987.  CMMI is a process level improvement training and appraisal program and might be of assistance as you set goals for your organization.

Whatever you choose to do, change for the sake of quality improvement can only lead to:

  • Continued business growth
  • Happy customers
  • Employee job satisfaction

Promet Source offers a depth and breadth of Drupal development expertise. Contact us today to schedule a workshop or for information and insights to ensure that the agility and reach of Drupal is being fully leveraged.

Jun 07 2019
Jun 07

From exciting projects delivered to a growing team of Acquia Certified Developers; 2018 was a busy year for us that was capped off with recognition of our hard work and passion.

Now, Vardot is proud to announce that we have been named a top Drupal and PHP developer by Clutch yet again for the year 2019.

Projects Completed by Vardot in 2018

Projects undertaken in 2018.

Clutch is a B2B ratings and reviews site that ranks companies on a number of criteria, including market presence, service focus, and reviews from past clients. We are also featured on their list of the best Drupal developers in the world.

We provide cutting-edge enterprise web solutions, with an optimized digital experience and a powerful cross-platform content management system. Our solutions are open-source, built using our own Drupal distributions, which means a lower total cost of ownership and faster time to market for you. Vardot covers the whole project lifecycle, from consultation, design, development, implementation, to enablement, with robust project management and post-launch maintenance, support and growth to guarantee success.

Drupal Clutch Reviews

Clutch takes its reviews seriously, conducting phone interviews with a company’s past clients and getting honest feedback on the quality of their work. These reviews can all be found on our Clutch page, but we wanted to include some of the nice things our clients have said about us here:

“The comments we got from users were positive, and people were happy with the website. We saw improvements in numbers because traffic was up for the new website.” – Web Editor, Humanitarian Nonprofit

 and...

“In the two months since the launch, we've seen between a 50 percent to 60 percent increase in the total number of visitors to the site.” – Communications Officer, Multilingual Nonprofit

and...

“They try harder than other companies. They've been so good about listening to us and actually doing the things we ask.” – Founders, The Life Writer, Ltd.

In addition to being recognized by Clutch, we are proud to announce that we were featured on Visual Objects, a site showcasing businesses with outstanding creative design services, such as branding agencies or web development companies.

Vardot was also ranked as one of the best Drupal development companies by Clutch’s sister site, The Manifest. We were featured for a project we did with a company producing as SaaS product, creating their website and creating content for it.

We are honoured to have been recognized as the best Drupal and PHP developer by Clutch.

We do everything we can to help our clients succeed, and knowing that they appreciate our work so much is incredible. We will continue to improve and innovate, always keeping our clients ahead of the curve.

Al Bawaba News Amman Stock Exchange ProEquest

Stay tuned for more exciting news and launches in the upcoming year.

Click here to read about our client's experience with us.

Jun 07 2019
Jun 07

I created and shared an open source set of editable slides with plenty speaker notes titled "State of Drupal 9" early in May, based on my webinar with Dries and then the Drupal 9 parts of the DrupalCon Seattle Driesnote. I hope that we can bring this know-how to a lot of conferences, meetups and to companies so people are more aware of what is coming, what happens to Drupal 8 and 7, what's so great about Drupal 9 and what are the key tools involved.

Before I even presented the slideshow first, I already got improvement suggestions from people presenting it elsewhere. So the first time I got to present this session in Minsk, Belarus at the kind invitation of DrupalCamp Belarus organizers, it was already improved from when I first published it. I will keep updating the slides and present where I can in the coming months. Please, do it yourself too! Translate, shorten, lengthen, etc. to match your audience and timing needs, as long as the key messages get through. Be an important contributor to Drupal 9 this way!

Here is the recording from DrupalCamp Belarus:

Jun 07 2019
Jun 07

May marked another important month for the Drupal community, with a new minor version of Drupal being released on May 1st and Acquia acquiring the open source marketing platform Mautic. In case you missed any of these important pieces of news, here’s an overview of the top Drupal blog posts from May.

Drupal 8.7.0 is available

Let’s start with the most salient piece of news - the release of Drupal 8.7.0. On the same day as it was released, Gábor Hojtsy already published a blog post presenting the new features of version 8.7.0 which also contained helpful information on what the release means for sites running on older versions. 

One of the most notable novelties in this release is a stable Layout Builder, but the now stable support for JSON:API should also be mentioned, since it’s a key milestone towards making Drupal API-first. Other features include improvements in the experimental Media Library, revisionable menus and taxonomy terms, and a more accessible Umami demo showcasing a greater number of features out of the box.

Read more

API-First Drupal: what's new in 8.7?

This next post is very similar to the previous one in that it presents some of what’s new in the newly released 8.7 version of Drupal. This one, though, written by Wim Leers, focuses more on the improvements in the context of API-first Drupal (as the title already makes clear). 

So, Drupal 8.7.0 has introduced improvements to both the REST and JSON APIs, with the latter receiving more and bigger improvements. One of the things that was fixed in both of these modules were the datetime and daterange fields, which now respect standards. While the REST module is still maintained on drupal.org, new releases of Drupal will only see new features for JSON:API.

Read more

Static searches with Drupal and Lunr

Moving on, we have a post from Samuel Mortenson’s blog on static search in Drupal with the JavaScript-based search engine Lunr. In this post, Samuel describes how he tackled the integration of Lunr with Drupal and what kinds of problems he encountered, one of the major ones being performance issues with large indexes. 

Another usability problem were facets, since Lunr lacks the ability to search by complex conditions and condition groups. Samuel’s solution was to make two separate queries, one for the search terms and one for all the fields, then finding the intersection of both results. The Drupal Lunr integration is now ready to be tested and put to use, and Samuel encourages everyone to try it out.

Read more

Sponsor a Feature

The fourth post on this month’s list is Jacob Rockowitz’s Sponsor a Feature, in which he describes the process of sponsoring features of open-source projects. He starts with the four vital steps: communication, documentation, agreement and payment, and explains each of them in further detail. 

The common understanding of open source as being free doesn’t mean that developers contributing code shouldn’t receive any payment. Sponsoring their work enables a greater number of people to start contributing while also making their work more sustainable. 

Since companies also benefit from open-source software contributed by volunteer developers, it makes sense to sponsor the work of these volunteers. This in turn also strengthens and diversifies the entire community.

Read more

Drupal 8 Configuration

Next on our list, we have a five-part series of posts by Jay Friendly of Morpht exploring the Drupal 8 Configuration API. The posts in the series cover the basics of the API, how it works and how to use it, how to extend it with contributed modules, and how developers can manage, declare and debug configuration in custom modules. 

Because Drupal is much more complex today than it used to be, with Drupal projects now running on multiple environments, consistent code should be used for all the site copies. Jay Friendly’s series gives helpful information on the Configuration API, making this effort easier. (Each post contains links to all the other parts, so we won't link all of them here.)

Read part 1

Why we no longer use Display Suite on new Drupal 8 projects

With Layout Builder becoming stable in Drupal 8.7.0, some previously useful modules have lost some of this usefulness and become a bit redundant. Saul Willers of PreviousNext gives the example of Display Suite, which is mainly used to position fields into layouts. Layout Builder now provides the alternative of using blocks to create layouts.  

As for the use case of Display Suite to control field markup, a good alternative is the Element Class Formatter module used in combination with Twig templates. As such, when starting a Drupal Project from scratch, it makes sense to use Layout Builder together with other solutions instead of Display Suite.

Read more

Acquia acquires Mautic to create the Open Digital Experience Platform

Acquia’s acquisition of Mautic was great news for both Drupal and the broader open-source community. For anyone not familiar with Mautic - it is an open-source alternative to proprietary marketing automation platforms such as Adobe’s Marketo

In this post, Dries stresses the importance of organizations having Digital Experience Platforms rather than simple websites and gives three main reasons why Acquia and Mautic are such a great match. 

Namely, the two platforms share the same technology stack and business model. And, thanks to this acquisition, Acquia can now disrupt the marketing automation market as the only open-source solution. Additionally, since Mautic is loved by both marketers and developers, it’s more open to innovations via integrations, which makes for a better customer experience.

Read more

The Giving Tree Called DrupalCon

The last post from May that we wanted to include is Kalamuna’s The Giving Tree Called DrupalCon. For this year’s DrupalCon in Seattle, they decided to put the money that’s typically used for swag to better use and do something good for the environment instead.

To this end, they partnered up with One Tree Planted and sponsored the planting of 450 trees in parts of California that were damaged by forest fires. They got the Drupal community involved by inviting them to plant stickers on the wall of their DrupalCon booth, and every sticker then turned into an actual tree planted. 

We love seeing examples of how we can make the world a better place by coming together. We wanted to round off this month’s list with one such example. Here’s to hoping that Kalamuna’s efforts inspire more people and businesses!

Read more

This was our selection of the most interesting Drupal blog posts and pieces of news from May. If you enjoy these recaps, make sure to check back early next month for a list of June’s posts. Till then - enjoy!
 

Jun 06 2019
Jun 06

One of the chartered responsibilities of the Drupal Community Working Group (CWG) is to work to develop and support community initiatives that promote the health of the Drupal community and help to prevent conflict and burnout. One of the ways that we do this is by organizing workshops designed to provide community leaders with the knowledge, tools, and resources they need to help keep our community a friendly and welcoming place.

Following feedback from last year’s Teamwork and Leadership workshop at DrupalCon Nashville, we decided to narrow the focus and audience for our next workshop. One of the things we’ve observed over the last year in the Drupal community is that many of the issues we’ve seen have had to do with communication breakdowns between various individuals and groups. Following internal discussion in late 2018, we decided that one way to begin addressing this issue was by bringing together leaders in the community representing different groups and interests for a workshop focused on communication skills at DrupalCon Seattle.

In early 2019, we interviewed a number of potential facilitators suggested by Drupal Association board chair Adam Goodman and selected Megan Bernard, a professor of communication studies who specializes in promoting meaningful and inclusive learning and collaboration. Based on Prof. Bernard’s recommendation, we decided to spread this year’s workshop out over two days (April 10-11) in a dedicated meeting room provided by the Drupal Association, who generously covered all fees and expenses.

After finalizing the logistics, we then reached out to those who had attended last year’s workshop, as well as additional community members involved with community governance, camp organizing, core and contrib maintainers, the Drupal Security Team, Drupal Diversity & Inclusion, and the Drupal Association. The workshop facilitator suggested that we keep the size of the workshop to around 20 people, focusing on individuals who are well-connected in the community in hopes that they can help distribute the lessons learned in the workshop. 17 people attended some or all of the first day of the workshop, and 18 attended some or all of the second. In total, community members from 10 different countries spread across 4 different continents were represented.

Day one of the workshop included introductions, a discussion of needs, assets, and challenges faced by various groups within the Drupal community, and a discussion of shared context and perspective. We talked about different ways that other online communities help communicate context about their users, such as identifying the primary language, pronouns, and location in comment threads. During our discussion, Neil Drumm pointed out there was already an active issue led by justafish and others to allow users to display this kind of information, and one of the first action items we agreed on was helping it get implemented on Drupal.org as quickly as possible.

Another topic of discussion centered around creating pre-written template responses that maintainers and/or other privileged users could use in issue threads to “nudge” users in the right direction and realign communication when conversations start trending away from our community standards. We discussed badges and other ways to promote positive communication in our issues threads and other community spaces. In addition, we also talked about better ways to on-board new members into the project and foster an ongoing sense of community. One insight was that small cohorts of 6-8 people are far more effective than 1:1 mentoring at building community engagement.

In our second day, we dug more deeply into the concepts of emotional intelligence, de-escalation practices, and different forms of conflict. One of our exercises was a case study challenge, where different groups were tasked with finding different ways to resolve typical kinds of conflicts often seen in Drupal and other open source communities.

We also spent time talking about different ways to apply some of the things we had learned to our own community, and next steps. We agreed as a group to focus on three main areas:

  1. Setting context in issue queues. This work had already been mostly completed in https://www.drupal.org/node/2961229 so it was really just a matter of working with DA staff to get it implemented on Drupal.org.

  2. Nudges. A group of us decided to do more research into pre-written templates to use in issue queues, forums, and Slack to gently steer things back in the right direction when conversations were starting to go in a negative direction.

  3. Improving Drupal.org user on-boarding and cohorts. In addition to better identifying new users on the site, we agreed to look into various ways to help community members join small cohorts, organized by industry, technology, geography, or other criteria. We felt it was important that this be an opportunity that’s open to existing community members as well as new ones.

The folks assigned to each area agreed to find a time to meet in the coming weeks and to involve other interested community members as well. The CWG also identified several opportunities to improve and streamline its internal processes and communication practices.

By developing and communicating best practices that can be shared across the community, the hope is that we can help build structures for self-guided conflict resolution among community members and support more effective communication overall.

Jun 06 2019
Jun 06

Enterprises can find their websites attracting visitors and clients from different geographies, speaking different languages. The market is so huge (and international) that targeting only English speaker based users means deliberately missing out on an effective way to grow audience, ROI, customer trust, and rank on Google.

Language can be an enormous barrier, or an effective tool.

With an intent to create a great digital experience, enterprises often find themselves in a tough spot having to use and experiment with tools wrapped in an unfamiliar language.

Only it doesn’t have to be so.

In order to take advantage of the international and multilingual market with your Drupal 8 website, you need to make sure you have set your SEO just right (along with the language, of course).

But is it really that easy?

Why Opt for a Multilingual Website?

The world wide web makes it easy for the online businesses to be looked around from across any part of the world. While, the right SEO strategy will give you a place on the first page of Google, making it exclusive to one language is actually not a good idea (even for your SERP).

Smart marketers don't keep all eggs in one basket because it is bad for business. So is keeping all content in one language.


Here’s why a multilingual website will help:

Increases Your Possible Customer Base

Contrary to the common belief, not many people speak or use English outside certain geography.

Interestingly, the statistics collected by Internet World Stats reflect why your content shouldn’t solely be in English. While it dominates the scenario, English represents only 25% for internet searches.

horizontal graph with ten blue bars on a white background
source: Statista

Not a small number, however, English’s relative share of cyberspace has shrunk to around 30%, while French, German, Spanish and Chinese have all pushed into the top 10 languages online since 2008.

Language profoundly affects the user experience on the internet. In a pan-EU survey (2011) 44% of respondents feel they are missing interesting information because web pages are not in a language that they understand.

Availability of content in different languages can also affect the user’s understanding and succeeding action.

In an interesting case study of the Tel Aviv, Israel, searching for “restaurant” locally in Hebrew, Arabic and English brought back different results for each language. 

three blocks with a map image and text written on top

Gets Loyal Customers

According to Gartner, 89% of companies expect to compete mostly on the basis of customer experience. And language is the secret trailblazer.

“The web doesn’t just connect machines it connects people”


Native language helps companies connect, forge more trust and increase customer satisfaction. In fact, 74% of consumers are more likely to repurchase if after-sales care is offered in their native language.

In fact, there is an undeniably strong link between in-language content and a consumer’s likelihood of making a purchase.

Improves Your SERP

Search engines value quality content and user engagement. By providing your website in different languages, traffic coming from either version will improve the search engine ranking for the whole site, given you are using the right hreflang tags.

It also helps search engines understand your site, as it’s clear which languages you’re providing the content in.

Google doesn’t view the content in different languages as a duplicate, because it has multiple version of itself too.

Drupal 8 Multilingual Initiative

The multilingual initiative (started with D8) aimed to rebuild language support from the ground up so that everything in Drupal understood the language from the start.

Drupal 8 offers much more out of the box for building multilingual sites. More powerful than Drupal 7, it has greater flexibility, all without the need for any contrib module.

Providing content translation in an additional 94 languages, the number of modules have reduced from 22 (as in Drupal 7) to 4.

  1. Language: This is the base module needed to allow Drupal to add and choose the language of choice. Natively, it is available in 94 languages.
  2. Locale (Interface Translation): It helps to translate the interface, from both core and contributed modules and themes. It also provides built-in translation UI for easier editing.
  3. Content Translation: This module translates all the content types and content entities including site content, pages, taxonomy terms, blocks, etc., possible with its inbuilt API. Providing the language selector, you can choose your preferred language by selecting the checkbox.
  4. Configuration Translation: Allows you to translate configuration interface, such as of field labels, views, field settings, blocks, panels, etc. It also has a built-in responsive translation interface.

“Drupal 8 is easy and efficient for multilingual businesses.”


Other than the core modules, developers can also take hreflang into consideration. While the core Content Translation module adds hreflang tags only to translated entity pages hreflang module, on the other hand, adds hreflang tags to all pages.

An example of a Drupal 8 multilingual website: 

 Drupal-North-en-Srijan

The Drupal North Website in English

Drupal-North-fr-Srijan

The Drupal North Website in French

Drupal Multilingual SEO Challenges

Multilingual SEO can be intimidating. In fact, it is the elephant in the room, if not addressed, can potentially deflect your overall SEO efforts.

Language and cultural differences, website architecture, content duplicacy are amongst some of the challenges. Understanding these challenges can help marketers come up with better strategies to tackle the problem.

Here’re some of the multilingual SEO challenges and how Drupal helps you fight them off.

Multilingual and Multi-Geo are Different


A multilingual site must not be confused with multi-regional website. A multilingual site can create a ripple effect in the sense that a mistake in the original site will be replicated in all the duplicate sites.

A multilingual website is any website that offers content in more than one language. For example, a Canadian business with English and French versions of its site. Google Search tries to find pages that match the language of the searcher.

A multi-regional website is one that explicitly targets users in different countries. For example, a product manufacturer that ships to both Canada and the United States. Google Search tries to find the right locale page for the searcher.

Some sites are both multi-regional and multilingual: for example, a site might have different versions for the USA and for Canada, and both French and English versions of the Canadian content.


  • Site Structure, Navigation and Menu

    Navigation isn’t just for the viewers. If the navigation structure prevents visitors from easily finding the information it might also be blocking the search engines from indexing the content.

    It’s difficult to determine geo-targeting on a page-by-page basis, so it makes sense to consider using a URL structure that makes it easy to segment parts of the website for geotargeting.

    In Drupal, Entity translation solves the issues related to site structure, navigation and menu by default.

    Each variant has a language assigned and is called an entity translation. It allows (fieldable) entities to be translated into different languages, by introducing entity/field translation.

    It synchronizes taxonomy and fields across translations of the same content. Translation fallback for menus is not configurable by default

  • Content revision and publication workflow

    Content revisioning, proofreading, and approval are part of the critical content editing process.

    The Workflow module allows to create arbitrary Workflows, and assign them to Entities. Transitions between states can be allowed as per the role. For example, a workflow with states of Draft, Review, and Published could be assigned to the story node type. Only users with the role of 'chief editor' can set Stories to the published state.

    You can set up the Workflow to alter states from form, page, comment, a special block, and workflow tab.

    However, the module follows a linear approach. It would need revision if it is not one way.

    Another module, the Workbench moderation suite is modular, allowing site builders to build the workflow that best suits the content administrators on their site. The Workbench suite provides authors, editors, and publishers with a unified interface for managing content relevant to them.

  • User permission and role for different editorial teamsSince a number of users (read editors) are involved with the content editing a multilingual website, chances of accidents on the website are high. Editors can be clubbed together with set access limits.

    The Group module allows you to create arbitrary collections of your content and users on your site and grant access control permissions on those collections.

    All of the functionality this module has to offer is based on custom entities, opening up the door to various extensions or alterations that the user sees fit. The relationship between a group and its content or users is also an entity, allowing you to easily add metadata to that relationship.

  • Dealing with Duplicate content

    Drupal 8 provides schema out of the box. It is semantic markup text that provides search engines with a basic blueprint to categorically divide and simplify the information by breaking it into simpler blocks for easy description and discovery.

    Schema, in multilingual and multiregional SEO provides each and every language content with same content id letting the search engine know that variations of same content, thus, cancelling out the content duplicacy issues.

    While this feature was part of Drupal 7, it was in the form of separate entity translation plugin, which wasn’t part of the core.

    The main challenge, however, remains how to concatenate content so search engines don’t think it’s duplicate.

    This can be solved with the Entity Translation module which allows entities (such as nodes) to be translated into different languages. It provides field-level translation, so that site builders can select which fields should be translatable. It provides a UI for users to translate these fields into other languages.

  • Path alias

    As a foundational element of the global SEO, URLs need to be determined your multilingual URL structure strategy early on in the process.

    While pathauto module automatically generates URL/path aliases for various kinds of content (nodes, taxonomy terms, users) without requiring the user to manually specify the path alias.

    By default, Drupal doesn’t allow the same URL over translated pages. It can be done by applying the patch and it will run.

  • Content Relevance Building unique vocabularyit is vital that you get the translations right. Seldom content relevance can get lost during translation, like the adventure in mistranslation costed HSBC $10 million for rebranding.  

    While the above instance is hilarious, it can be avoided for your digital property. You can build your custom vocabulary with Taxonomy. It is a core module in Drupal 8 and gives your sites use of the organizational keywords known in other systems as categories, tags, or metadata. It allows you to connect, relate and classify your website’s content. In Drupal, these terms are gathered within "vocabularies".

    The Taxonomy module allows you to create, manage and apply those vocabularies. translation module allows translation of taxonomy vocabularies and terms. 

funny-translationExito in Spanish means success, not exit

A word of caution, translate only when the logic prevails. Use separate vocabularies, translated vs untranslated, for different languages to begin with.

Building Multilingual LMS for Estee Lauder

Estee Lauder is a global leader in prestige beauty — delighting its consumers with its transformative products and experiences. It takes pride in focusing solely on prestige makeup and beauty care with a diverse portfolio of 25+ brands distributed globally through eCommerce channels and retail outlets sold in 150 countries. 

We built an open-source, multilingual, decoupled learning platform where beauty advisors could consume a vast set of learning resources.

The Multilingual Challenge

To ensure an effective product training and delivering the information fast knowledge exchange needs to be user-friendly, structured, and in their own language. With more than -- languages, the LMS needed to provide complete translation of the entire system.

The lack of direct connection between the LMS user and the language demanded that each language be provided for different geography.  

Discover the La Mer Connection LEVELS CONTENT CHS La Mer Learning Experience

A video quiz in Japanese

learning level content La Mer Learning ExperienceA video quiz in English

When designing the solution, we created a relation between market and language, and this worked as a bridge between available language for user selection. With a language and market segmentation/ filter, we could now access information about user activity based on their preference. 

We also helped Estee Lauder reduce 30% cost in classroom training and provided them with solution to track ROI from the learning and training initiatives.

Other Drupal Modules You Can Use

  • SEO Checklist: It uses best practices to check your website for proper search engine optimization. It eliminates guesswork by creating a functional to-do list of modules and tasks that remain. 
  • Real-time for SEO: This module helps you optimize content around keywords in a fast, natural, non-spam way.
  • Taxonomy title: It update the heading tag at the top of the taxonomy term page
  • Menu Attributes: It allows you to specify some additional attributes for menu items such as id, name, class, style, and rel.
  • Search 404:  For pages that do not exist (404), it performs a search based on the keywords in the URL, and shows the relevant result instead of the 404 page. It also includes search engine keywords detections as well as regular expression based term filtering from the URL.
Best Multilingual Practices to Consider from Google 

  • Use different URLs for different language versions
  • Make sure the page language is obvious
  • Let the user switch the page language
  • Use language-specific URLs
  • Targeting site content to a specific country (geo-targeting)
  • Using locale-specific URLs (.in for India)

Conclusion

Multilingual SEO is one of the most complicated and ignored fragments of web marketing. The good news is that it’s easier than ever to provide broader language support. With their adroit skills, our experts save you from the stress and build the best and provide you with innovative multilingual services.

Contact us today, if you are looking to build or modernize your multilingual website without losing the SEO prowess. Drop a mail at [email protected].

Jun 06 2019
Jun 06

Sometimes when working with Drupal’s exposed forms, you might get stuck with a field type that you don’t want. Often times you can find a module to help improve the style or functionality of these forms. However, in some cases using a module will not be available and you will have to make modifications directly to the code.

If you are just getting started with Drupal, and come from a JavaScript background, this will clearly be the easiest method for you. If you are familiar with PHP and want to better understand Drupal, I encourage you to try a preprocess function!

JavaScript Method (jQuery):

For the JavaScript we’ll start with a simple select field with three options (my favorite web technologies). I like to use jQuery because it’s a bit easier to read and write than Vanilla JavaScript. A quick overview, we’ll target the select field, loop through the options, and map them each to their own <a> tags in separate divs. This allows for each link to be styled individually, auto submit the form, append URL parameters, and more.

First, we’ll start with a Select Field inside of a Form Element each with a respective ID.


Now that we’re on the same page, let’s get started initializing Drupal behaviors and jQuery. In your theme folder, you’ll need a .js file for this code to live. I called mine script.js. You can read more about Drupal behaviors here.

(function(Drupal, $) {
  Drupal.behaviors.HOOK = {
    attach: function(context, settings) {
    }
  };
})(Drupal, jQuery);

// First lets get the form by ID so we have a place to append our newly created links
  $("#TheForm").append(() => {
    // Next we will hide the original select field
    $("#SelectField").hide();
    // and create a new container div for our links to live in
    const customLinks = $('<div id="CustomLinks"></div>');

// Here we target the options on the select field
    const selectOptions = $(this).find("#SelectField option");
    // Now we can loop through each option and get the properties we want
    // IMPORTANT: Use the function declaration to scope the "this" keyword, not an arrow function
    selectOptions.each(function() {
      // Initialize variables for the properties we want on our new links
      let optionText = $(this).text();
      et optionVal = $(this).val();
      // Create each link with assigned properties and append to our newly created container div
      let customLink = $(
        `<div class="${optionVal}"><a href="#${optionVal}">${optionText}</a></div>`
      );
      customLinks.append(customLink);
    });
    // And last but not least return our variable
    return customLinks;
  });

That’s it! You’ve now mastered jQuery, and can begin styling. A real use case of this method is on a site of ours that is currently in development where we have a Location “Content Type” using the List(Text) field to determine the location’s type and are outputting the locations in a view. These links append the option’s value to the URL query and submit the form on click.

Using a Preprocess Function (PHP)

Using a Drupal preprocess function in your THEME.theme file might be a little more straight forward, but in this case we’ll turn a number input field into a select field with custom build options. This will allow us to go from a non-user-friendly keyboard input to a nice, clickable option set.

Drupal has many preprocess functions for you to use depending on your specific use case. You can learn more here. For this case, I am again outputting the form in a view, exposed to the user, so I will use “THEME_form_views_exposed_form_alter”

You’ll first need to create the optionset, which can be done through a simple function that returns an associative array, replacing THEME with the name of your theme.

function THEME_build_distance_options() {
  return [
    '5' => '5 miles',
    '10' => '10 miles',
    '15' => '15 miles',
    '20' => '20 miles',
    '25' => '25 miles',
    '50' => '50 miles',
  ];
}

With our optionset ready to go, let’s modify the input field. Within your preprocess function, you might want to start by logging or printing your form so you can track down exactly where your element’s type value is. To do so, simply uncomment the first line in the function.

function THEME_form_views_exposed_form_alter(&$form, $form_state, $form_id) {
  //ksm($form);
  // Turn distance text input to Dropdown selector
  $form['distance']['value']['#type'] = 'select';
  $form['distance']['value']['#multiple'] = FALSE;
  $form['distance']['value']['#empty_option'] = t('Distance');
  // Call your build options function and assign it to the new select element
  $form['distance']['value']['#options'] = txc_base_build_distance_options();
  // And use unset to remove fields not needed for our new element type
  unset($form['distance']['value']['#size']);
  unset($form['distance']['value']['#min']);
  unset($form['distance']['value']['#step']);
}

Hopefully now you understand the power of using jQuery and/or Drupal preprocess functions to modify any element to your exact needs, and continue building awesome websites! To see more helpful tutorials on using Drupal visit some more of our blogs here.

Jun 06 2019
Jun 06

“Can I use Drupal for project management?” Definitely. 

Given all its content-oriented baked-in capabilities — file management, version control, easy content creation, and editing — Drupal makes the perfect software for:
 

  • managing your projects the easy and the... smart way
  • streamlining communication among your team members and with your contractors
     

In this respect, Drupal provides its own feature-rich distributions to help you put together your robust setup in no time. “Distributions” that come already packed with a set of useful sub-modules and themes, that all support the core functionality: project management (and smooth collaboration).

And without further ado, here the 2 most popular Drupal distributions for project management and team collaboration for you to evaluate first: RedHen and Open Atrium.
 

Loaded with robust and modern features, this Drupal-native CRM is designed with flexibility in mind. Meaning that it integrates seamlessly with the enterprise solution that you're using (Blackboud, Salesforce) and it supports a wide range of use cases...

And speaking of its functionalities:
 

  • engagement tracking and monitoring
  • data mangement: information about your contacts, the relationships among them and with your own company (e.g. memberships)
  • event registration integration
  • one-page donation forms to custom-tune to your liking
     

As for those many use cases that this Drupal distribution's built to accommodate, let's pick just a few real-world examples:

  • It's the best choice if smoothly integrating your CRM with your other enterprise solutions is critical for you
     
  • It streamlines tracking interactions with your contacts and organizations. Furthermore, since you can easily integrate it with your website, you get to leverage the provided data in order to adjutst the user experience accordingly...
     
  • It allows you to customize it and thus to give it a Drupal-like look and feel: to integrate it with modules like Rules or Views, to go for the same field creation UI etc.
     
  • Is your contacts list a huge one? This CRM comes to your rescue with some powerful baked-in tools: an efficient find-and-dedupe interface, an automated filter built in the UI, that you can use to filter your contacts by specific fields etc.
     
  • It automatically syncronizes data in your Contacts list with any newly updated data on your Drupal Users list
     


In short: RedHen CRM makes one of the top choices when you consider using Drupal for project management purposes. It's a lightwright, self-contained framework, more of a “cluster” of multiple specialized modules:
 

  • Organization
  • Activity
  • Fields
  • Organization Group
  • Dedupe
  • Registration
  • and a few more...
     

Looking for a Drupal-native distribution built around the team collaboration functionality?

One that should be:
 

  • convenientyly extensible
  • “loaded” with robust collaboration and information sharing features?
     

Then Open Atrium fits the profile in the slightest detail.

Built on top of the Organic Groups and Panopoly modules, it's a framewrok flexible enough to support discussion configurations by key criteria like team, project, organization...

And here are some more powerful features worth considering when you're still thinking whether you should use Drupal for project management:
 

  • an access control system, that grants granular control to certain sections of your project
  • a drag and drop layout with plenty of widgets to select from for customizing your landing pages and dashboard
  • file storing and sharing features
  • built-in Events, Files, Discussions, Issue Tracking, Document Wiki
  • an easy to customise, responsive theme
     

The END!

These are but 2 viable answers to your “Can I use Drupal for project management and team collaboration?” type of question. 2 of the options available that best meet some of your main requirements when looking for a project management software:
 

  • to be easy to use
  • to ship with an entire collection of file management and communication features
  • to be flexible enough and allow quick customization and seamless integrations
     

Have you tried other Drupal modules/distributions built around this functionality so far? 

Image by jessica45 from Pixabay

Jun 06 2019
Jun 06

Drupal keeps moving ahead. In June 2020, we hope to see the release of Drupal 9. Innovation often has a “flip side” — cumbersome upgrades. But not this time! Upgrades from Drupal 8 to Drupal 9 will be quick and easy, and this is one of Drupal 8 benefits. However, there is a condition all websites should meet — and there is a wonderful Upgrade Status module that will help them with that. 

Deprecated code removal = easy upgrades to Drupal 9

All Drupal 8 websites will have silky smooth upgrades to Drupal 9, if their core, modules, and themes are up-to-date and not using deprecated code. A very lucrative reason to migrate to Drupal 8 now if you have not yet ;)

Deprecated code is one that is no longer in use and has more modern alternatives. The functions and APIs that are marked as deprecated continue to exist alongside with these alternatives — until they are removed. The release of Drupal 9 will see a major cleanup from deprecations.

Modules and themes without deprecated code will be immediately ready for Drupal 9. Those with deprecated code should have it replaced before Drupal 9 arrives.

Dries about deprecated code and preparing for Drupal 9

Drupal creator Dries Buytaert encourages everyone to update their code to the latest and greatest APIs today — without waiting for Drupal 9. And here is where the Upgrade Status module comes in.

Upgrade Status module to check your site for deprecated code

The Upgrade Status module was developed on the basis of the powerful command-line tool called drupal-check, which scans your codebase for deprecations. 

But the Upgrade Status module makes the process handy for everyone thanks to its graphical user interface. It is easy to run the checks directly from the admin dashboard and get informative results.

There is even a chance we may see Upgrade Status module in Drupal core some day. A fresh issue about it has been created in mid May 2019. 

More details about Upgrade Status module’s work & features

Installation notes 

The Upgrade Status module uses third-party PHP dependencies, so it is highly recommended to install it via Composer package manager. The Update Manager and Git Deploy modules will also need to be enabled. When installed and enabled, the Upgrade Status module’s UI is available at /admin/reports/upgrade.

Checks for deprecated code

The module will scan your core, contributed, and custom modules and themes and tell you which ones have deprecated code. 

It tells the “status” of each project, which is either “No known errors” or “Errors found” (with their amount). When you click “View errors,” you are taken to the page with the information about the particular deprecated function or API.
 

Upgrade Status module to prepare for Drupal 9

Checks for available updates

It also shows you the available updates for contributed projects. These updates are highly recommended to perform, because Drupal projects’ maintainers resolve deprecation issues with time. 

Drupal developers who find deprecated code in a contributed project can also create an issue on drupal.org (if it does not exist yet) or help with patches.

Checking the whole site or particular projects

In addition to the full check, the module also allows you to check individual projects. You can also rerun the report on specific projects that you are currently working at. So you can avoid spending a long time to run the full check. This was mentioned among the module’s benefits in the blog post by one of its main creators — Gábor Hojtsy.

Handy reporting

The Upgrade Status module allows you to export the full report about the check or individual reports for projects.

Continuous integration opportunities

The module cannot be integrated with your continuous integration processes for now. However, the tool behind it, drupal-check, is suitable for this purpose. So the status check can be part of your automated workflows. 

Prepare for Drupal 9 with the help of our team!

So what will be the upgrade status of your website? It’s time to find out!

If you need any help with using Upgrade Status module or with cleaning up your website from deprecated code, our team of Drupal experts is there for you. 

Jun 06 2019
Jun 06

Our Director of Engineering, Matt Davis, sat down with two decoupled leaders on the Acquia team, Sam Nagle (Senior Solutions Architect) and Ron Northcutt (Principal Solutions Architect), to break down decoupled drupal.

We had our friends with the It's A Look podcast help us break this subject down in a fun and easy to understand way -- they did not disappoint! We go over:

  • The future of digital experiences
  • What is decoupled drupal (7:30)
  • When does it make sense to decouple (13:15)
  • When does it not make sense to decouple (14:55)
  • An intro to Decoupled Blocks (16:10)
  • Comparing traditional, decoupled and hybrid approaches (17:10)
  • Two specific examples of decoupled experiences (22:15)
Jun 05 2019
Jun 05

The latest version of Drupal is version 8.7.2. You’re familiar of course. In fact, you’ve been on pins and needles ever since version 8.7.1(a). I’m sure you’ve been instasnaptweeting ever since it was issued.

OK, back to reality: You’re definitely more concerned with getting the data you need, driving great brand interactions, and maintaining costs (and keeping your InfoSec or IT teams happy)—than the latest CMS version.

However, what if I told you that your outdated Drupal 6 or 7 instance could actually hinder you from innovating, drain your budget, and potentially cause unnecessary security risks? And that once you get to Drupal 8, migration costs, security updates, and best-of-breed functionality (like content management and media libraries) from core Drupal contributions will help you deliver the audience experiences that grow your business.

So, should you migrate to Drupal 8 immediately? Yes.

Here’s why:

  • More languages? Not a problem: multilingual capabilities - It doesn’t take an engineering background to know that creating a multilingual site is not an easy task. Taking a step back, there are so many questions to consider:

    • Should content be displayed in a single native language?

    • What percentage of your site traffic is in English vs. other languages?

    • How should you handle media files?

    • Is there a risk if changes are incurred by translations?

    • Will the translations be handled properly? Who will handle translations?

The good news is that creating a multilingual site became a lot easier with Drupal 8 with benefits for both site admins and end users. Drupal 8 is now part of “core” (the basic features). In previous versions of Drupal, you needed to install extra modules (collection of files that contain some functionality)  just to support multilingual, which meant a lot more work, added costs and additional maintenance. Drupal 8 brings multilingual support to core with 4 modules, localized content (which makes usability and translations easier so that content translation can be possible for all types, including taxonomies, field types et al) and there are 100+ default languages included.

  • Ease of content editing - Building layouts has never been more intuitive than with Layout Builder! The tl;dr for Layout Builder allows fielded content on the back-end, but a true drag and drop front-end editing experience. There are even more added benefits including a flexible, admin interface, use of contextual links while keeping structured data. And you can now create layouts for templated content with Layout Builder. Many of Drupal’s competitors don’t allow such a templated approach to be done in browser.  (P.S. Learn more on this fantastic page-editing experience from my colleague, Caroline Casals here.)

  • Responsiveness for all - Responsive behavior is no longer a nice-to-have, but de rigueur.  This was an add-on in Drupal 7, but a built-in feature with Drupal core includes built-in themes that are mobile responsive. Additional web services now allow for content to be accessible from Alexa, Siri, and other virtual assistants.

  • Speed matters! - Drupal 8 has features that will make your websites faster without the need for a lot of technical experience. “Cache tags” are used making caching more efficient and also page loads faster.

  • More robust security - Drupal 8 is the stable version of Drupal; functionalities and major modules have been ported over and are now supported by the Drupal open-source community.

  • Integration friendly - Drupal 8 is set-up so that site administrators can easily use APIs to connect to a number of digital tools. Think: your deep integrations, like web analytic platforms, customer relationship management (CRM), email campaigns, social networks and marketing automation systems; you can rest easier that they’ll perform and communicate in concert.

So why else should you invest now? Drupal 7 is currently on life support.  As of November 2021, Drupal 7 will reach it’s “end of life” (EOL) which means that the version will no longer be supported by core maintainers.  

“No longer being supported” also means the following:

Drupal 9 is scheduled to be released next year (2020) which gives companies about a year to upgrade to Drupal 8. Don’t panic, but develop a reasonable plan for when you'll stop investing in your Drupal 7 platform, keep your site as up-to-date as you can (this will help security), and get on Drupal 8 as fast as you can. Still have questions? Give me a shout.

Jun 05 2019
Jun 05

On Twitter, in Slack, on Discord, in IRC, or wherever you hang out with other developers on the internet, you may have heard some formulation of the following statements:

  • React doesn't support accessibility
  • React makes websites inaccessible
  • People should write accessible HTML instead of React
  • React is ruining the internet

There's a somewhat common misperception that JavaScript frameworks and web accessibility don't mix. React, being one of the largest JavaScript libraries, is often the target. 

In my career, however, I have had the interesting experience of being introduced to accessibility and ReactJS at around the same time. I found tooling in React that helped me learn a lot about accessibility that I never would have encountered otherwise.

And while I don't disagree that there are plenty of libraries, websites, apps, etc. written in React that are inaccessible, I do disagree there is something inherent in ReactJS that makes developers build inaccessible sites. In fact, I love the accessibility tooling available in the React ecosystem, so this post is really about how React can help you make more accessible websites than you've ever made before.

I'll outline how you can combine React linting tools, DOM auditing, and Storybook (a component library tool) to provide a really supportive accessibility environment for developers -- whether they are accessibility pros or just getting started. By the end of this post, you'll have the following configured for your Gatsby project (or other React project):

  • in-editor reporting of accessibility errors
  • a pre-commit hook for preventing accessibility errors from getting into the repository
  • browser console reporting of accessibility errors during development, with links to info on how to resolve the errors
  • a component library with built-in accessibility testing so all project stakeholders can hold the team accountable for accessibility issues

Want to get started right away? I created a Gatsby starter with all these accessibility tools built in. Checkout the gatsby-starter-accessibility repo that has all these features available out of the box.

Tools and Setup

eslint-plugin-jsx-a11y

If you've written JavaScript over the past few years, you've probably used or at least heard of ESLint. If not, now is a great time to get started with it!

ESLint is a linting utility for JavaScript that helps you catch formatting and syntax errors while you are writing code. Most editors have some sort of linting configuration built in, which lets you see errors in your editor while you code.

This is really helpful for keeping code consistent, especially when there's a lot of people working on a project.

ESLint also has a really healthy plugin ecosystem. You can include rules specific to the JavaScript framework you are working with (i.e., React, Angular, Vue, etc), among others. For React, I typically use the eslint-plugin-react and the really helpful eslint-plugin-jsx-a11y. This plugin lints your code for known accessibility violations, using these rules.

Having these automated tests run while you are writing code can prevent so many errors. Even though automated accessibility testing catches only about 20-30% of all accessibility errors, catching these errors before they make it into a codebase can save time, budget, and energy for doing more manual testing once the code is in the browser.

Usage

Here's how you can get started with accessibility linting in your React project.

First, we'll need to install the necessary eslint packages:

npm install eslint eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

In your package.json, add the following configuration:

"eslintConfig": {
    "parserOptions": {
      "sourceType": "module"
    },
    "env": {
      "node": true,
      "browser": true,
      "es6": true
    },
    "plugins": [
      "react",
      "jsx-a11y"
    ],
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:jsx-a11y/recommended"
    ]
}

With this added to your package.json, ESLint will use the rules recommended by ESLint, React, and the jsx-a11y plugin while you are working. 

You'll want to make sure your editor is set up to display linting errors in the editor for this to be really useful.

Add a pre-commit hook for preventing inaccessible code in the codebase using lint:staged

Now we've got some accessibility linting set up, and hopefully everyone working on the project has linting turned on in their editor so they can see any errors while they work.

But you can't be 100% sure that everyone will be paying attention to the linter. And even if they are, it's easy to make a quick change, switch files, and any errors will be out of sight, out of mind.

What we can do as an extra check to prevent inaccessible code from entering the codebase is to add a pre-commit hook that runs the linting we set up above every time a developer tries to commit code. If an accessibility error is found, an error message will display with the relevant linting error and location of the error, and the commit will be prevented until the developer resolves the issue.

lint-staged will run a pre-commit hook that will catch any accessibility errors raised by eslint-plugin-jsx-a11y

lint-staged will run a pre-commit hook that will catch any accessibility errors raised by eslint-plugin-jsx-a11y

Usage

The easiest way to set up pre-commit linting hooks is using the lint-staged package. After you've got all your eslint configuration set up (from our first step), run the following command in your project directory:

npx mrm lint-staged

This command will install the husky package for managing the pre-commit hooks and look in your package.json to automatically setup a pre-commit hook based on your linting configuration.

A simple configuration that lints all JS files based on the existing eslint configuration in the repo will look like this (from package.json):

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.js": [
      "eslint"
    ]
}

You can adjust this as you see fit. For example, sometimes you want to limit linting to certain directories. To run the pre-commit hook only on JS files in the src directory, you would update the lint-staged configuration like this:

"lint-staged": {
    "src/*.js": [
      "eslint"
    ]
}

The great thing about lint-staged is that it only lints the files that are part of the current commit. If for some reason there is some pre-existing errors in another part of the codebase, the commit won't be prevented--it only prevents new errors from being introduced.

react-axe

The great thing about the linting setup we have now is that it will prevent a lot of errors from being introduced into the codebase. It won't prevent all errors, however. Some errors only exist when several components are used together, or from certain content, and can only be caught in the browser.

Luckily, we have a solution for this, too. Axe is an open source engine for automated accessibility testing, supported by Deque. I first became familiar with axe by using their really useful browser extension for testing individual pages in the browser.

The problem with browser-extension accessibility testing is that they are typically only run after development is complete. Using the react-axe library, you can have automated accessibility testing run on every page during development, so developers can get real-time feedback on accessibility issues. This helps make sure that accessibility issues never make it to production, and it also educates developers who may not be accessibility experts on potential pitfalls.

The react-axe library is an easy to use implementation of the axe engine, specifically for React.

Usage

Here's how to get started using react-axe with Gatsby (someone made a Gatsby plugin for it!):

npm install --save gatsby-plugin-react-axe

Add gatsby-plugin-react-axe to your plugins array in gatsby-config.js

module.exports = {
 siteMetadata: {
        title: 'Gatsby Default Starter',
    description:
      'Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.',
    author: '@gatsbyjs',
  },
  plugins: [
    'gatsby-plugin-react-axe',
    // other plugins go here
  ],
};

Now, when the page renders, the plugin will print any accessibility errors to the browser console. Here's an example, where I've put an <h5> directly underneath an <h1>:

React aXe will show accessibility errors in the console while you are developing.

React aXe will show accessibility errors in the console while you are developing.

You can see that in the axe message in the console that it has identified my heading issue: "Heading issues should only increase by one" as a moderate issue. It also includes a link to learn more about why this is an issue and how to resolve it: https://dequeuniversity.com/rules/axe/3.2/heading-order. And lastly, it displays the specific element that is causing the issue for easy identification.

This kind of instant feedback is so important, whether you are an accessibility beginner or even a seasoned pro. Catching the automated issues instantaneously can give you more bandwidth to focus on other more involved tasks.

Storybook and Accessibility

The last piece of our accessibility workflow has to do with our component-driven workflow. For React projects, I have really enjoyed using Storybook to build and document our front end components. 

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

storybook.js.org

Besides having a nice workflow and UI, Storybook has an awesome accessibility add-on that adds a panel to each component in your component library highlighting accessibility issues.

Our storybook configuration has built-in axe tests for each component and a color blindness simulator, provided by the storybook accessibility add-on.

Behind the scenes, the add-on actually also uses aXe for testing. This is really nice, because it means that the testing we are using in development is the same as what we are using in the component library. Having the errors highlighted in the component library also helps everyone on our project teams catch accessibility issues as they are browsing the library, either for QA purposes or design inspiration.

Setup

The setup for Storybook is a bit more involved, so if you haven't used Storybook before, you can checkout the Storybook for React documentation for a generic React setup.

If you want to get Storybook running with Gatsby, see Visual Testing with Storybook in the Gatsby docs.

Once you have Storybook setup, adding the accessibility add-on is pretty straightforward.

First, install the add-on:

npm install @storybook/addon-a11y --save-dev

Then add this line to your addons.js file in your storybook config directory:

import '@storybook/addon-a11y/register';

And lastly, add this line in your Storybook config.js file to automatically add the accessibility panel to all components:

addDecorator(withA11y);

When you run Storybook now, you should now see the accessibility panel (see a live version here):

Our storybook configuration has built-in axe tests for each component and a color blindness simulator, provided by the storybook accessibility add-on.

Our storybook configuration has built-in axe tests for each component and a color blindness simulator, provided by the storybook accessibility add-on.

As a side note - you can control the order of the tabs in your add-ons panel based on the order that you import add-ons into your addons.js file, if you want to have the accessibility panel display by default, make sure it is the first line in your addons.js.

Wrap up

If you didn't follow along with the setup or just want to get a new project setup quickly with this workflow, checkout the gatsby-starter-accessibility Gatsby starter!

You can create a new Gatsby site with all the configuration I described above out-of-the box with this single line in your terminal:

npx gatsby new my-accessible-project https://github.com/benjamingrobertson/gatsby-starter-accessibility

Or you can checkout the specific configuration in the repo.

Whether you ran through all the steps above or use with the starter, you'll have the following features set up in your Gatsby / React project:

  • in-editor reporting of accessibility errors
  • a pre-commit hook for preventing accessibility errors from getting into the repository
  • browser console reporting of accessibility errors during development, with links to info on how to resolve the errors
  • a component library with built-in accessibility testing so all project stakeholders can hold the team accountable for accessibility issues
     

On a complex project with many team members and moving parts, automating accessibility testing will help save time to make sure you can pay more attention to the accessibility tasks that can't be caught by automated tests. 

Beyond that, tools like this can really help developers level up their accessibility knowledge.

I know it's helped me--I hope it helps your team too!

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