Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Mar 12 2020
Mar 12

This post was created jointly by Michael Hess of the Security Working Group, and Tim Lehnen, Executive Director of the Drupal Association.

Last year, with the security release of SA-CORE-2018-002, the most significant security vulnerability since 2014, we heard the pain of site owners and development teams around the world staying up at all hours waiting for the complex security release process to complete and the patch to drop. We heard the pain of agencies and end-user organizations required to put teams on late shifts and overtime. We heard from some users who simply couldn't respond to patch their sites on the day of release, because of lack of resources or entrenched change management policies.

We've heard calls from the community for rotating the timezones for security advisories from release to release, or for having more on-call support from security team members across the globe, or simply for a longer horizon between the release of PSA and SA.

Yet at the same time, we're cognizant that these solutions would put increased burden on a security team composed of dedicated volunteers and contributors. There are a number of generous organizations who sponsor many of the members of the security team, but relying on their altruism alone is not a sustainable long-term solution—especially if we consider expanding the role of the security team to address the larger pain points above.

Last week, with the release of SA-CORE-2019-003, we heard these concerns for site owners and the sustainability of the security team echoed again.

The Security Team and the Drupal Association have been developing solutions for this issue for well over a year.

The goals are simple:

  • Provide a new service to the Drupal community, from small site owners to enterprise-scale end users, to protect their sites in the gap from security release to the time it takes them to patch.
  • Create a new model for sustainability for the Security Team, generating funding that 1) covers the operating costs of the program 2) can support security team operations and 3) can support additional Drupal Association programs.

Although the execution will take care and careful partnership, we are happy to announce that we've found a solution.

We're tentatively calling this: Drupal Steward. It is a service to be provided by the Drupal Association, the Security team, and carefully vetted hosting partners.

Drupal Steward will offer sites a form of mitigation through the implementation of web application firewall rules to prevent mass exploitation of some highly critical vulnerabilities (not all highly critical vulnerabilities can be protected in this fashion, but a good many can be - this method would have worked for SA-CORE-2018-002 for example).

It will come in three versions:

  • Community version - for small sites, low-budget organizations, and non-profits, we will offer a community tier, sold directly by the DA. This will be effectively at cost.
  • Self hosted version - for sites that are too large for the community tier but not hosted by our vendor partners.
  • Partner version - For sites that are hosted on vetted Drupal platform providers, who have demonstrated a commitment of contribution to the project in general and the security team in particular, protection will be available directly through these partners.

Next Steps

The Drupal Association and Security Team are excited to bring this opportunity to the Drupal Community.

We believe that the program outlined above will make this additional peace of mind accessible to the broadest base of our community possible, given the inherent costs, and are hopeful that success will only continue to strengthen Drupal's reputation both for one of the most robust security teams in open source, and for innovating to find new ways to fund the efforts of open source contributors.

We will announce more details of the program over the coming weeks and months as we get it up and running.

If you are a hosting company and are interested in providing this service to your customers, please reach out to us at [email protected].

Please also join us at DrupalCon for any questions about this program.

If you are a site owner and have questions you can join us in slack #drupalsteward.

For press inquiries, please contact us at: [email protected]

Feb 25 2020
Feb 25

With the announcement of Drupal 9 we want to talk about how this affects our customers, what to expect when new versions come out and to let you know what we do at Amazee Labs to ensure the transition will be painless.

“The big deal about Drupal 9 is … that it should not be a big deal.”

- Dries Buytaert, Drupal Founder
 

Background

The changes to Drupal between versions 7 and 8 were, quite frankly, enormous. Drupal previously had a justified reputation for doing its own thing and ignoring burgeoning standards and practices utilised elsewhere in the PHP community. So, when Drupal 8 was announced, one of the main goals of the release was to get off the Drupal island and start to utilise some of the millions of lines of open source code and documentation available elsewhere.

There were many great sides to this upgrade. The code was being built on a more solid and tested foundation, principally being based on the Symfony framework and leveraging numerous other systems and libraries. This helped Drupal become more enterprise focussed whilst opening the development field to engineers of other systems who were already familiar with the standards and practices now utilised in Drupal.

Unfortunately, the major technical upgrade to Drupal also introduced some headaches. Migrating between Drupal 7 and Drupal 8 can be time consuming and expensive. As a result of this, businesses who undertook such a migration can be forgiven for worrying about Drupal 9 being released just 5 years after Drupal 8. Some clients have expressed concern about using Drupal 8 when another expensive upgrade seems to be just around the corner.

Why Drupal 9 is different

In short, if you keep your Drupal 8 website up-to-date, there will be no major upgrade worries. The core maintainers of Drupal want to make Drupal upgrades easy forever from now on. The Drupal team has a plan to ensure that Drupal 9 will essentially be a minor process. This is possible because Drupal 9 will be built in the same manner as Drupal 8, with the same practices and core libraries. Unlike Drupal 7 to Drupal 8, there will be no major architectural or structural changes to the codebase. 

The main changes, other than bug fixes, improvements and new features will be the upgrades to Drupal’s core libraries. For example, Symfony 3 (the library upon which Drupal is built) comes to its end-of-life in 2021, so it makes sense to have Drupal 9 running on Symfony 4 at that point.

End of support flow chart

How is this easy upgrade achievable? Well, the Drupal team will continue its 6-month release cycle until Drupal 9 is released. In these releases, the code will be deprecated and upgraded to bring it closer to the components and libraries that will be used by Drupal 9, ensuring that when the time does come to upgrade everything will be in place for an easy transition.

Maintenance is key 

Keeping up with new releases and updates ensures that your website stays relevant and secure, and also means that switching from Drupal 8 to 9 will be much more routine. By partnering with us even after your website is created, we can take proactive steps such as making sure there’s no deprecated code in your site before the newest release.

Aug 01 2019
Aug 01

Adam stood in the middle of the garden, enveloped in exquisite beauty. The world was there to delight him, succulent fruit, dignified trees, green meadows, sprinkling pool and species of all kinds. Yet he stood contemplating the nature, he felt certain loneliness and thus the Lord said 

It is not good that man is alone. I shall make him a compatible helper.

With the creation of other species, both male and female sprang up the same time. If the beginning of the entire universe was chosen to be this way, how can business be any good without clients and a strong relationship with them, Right? 

 Image of two hands where the upper one is offering an apple to the lower one


The productivity and enduring relationship not only provides value to clients that are consistent but also constructs a healthy connection in every business venture. 

Though there are times when you get stuck in a rut with clients and the relationship starts to rot. 

So, how do you change it? 

Maybe with some strategies or maybe with the help of some plan. Well, whatever it may be here are some of the approaches which you can adapt to sweet up that sour relationship and add more productivity to a particular project.  

But how can perfect client relationship get ruined?

Under perfect circumstances, organizations and big enterprises treat their clients right. However, there might be times when they are under pressure to sell more or retain those paying customers, chances are that they might deviate from their standards. Resulting in sorrowful client satisfaction. 

With this context here are some of the actions which can kill a perfect build client relationship:

Saying yes to a client when you should not 

There is no shame in accepting the fact that your organization can meet only a level of expectations and not beyond it. Taking up those clients who are not a good match is foolishness.  If a particular organization knows that they going to hate dealing with a client or they might fail to meet their quality standards, the money is not worth the inevitable breakdown.  

Overpromising 

When there is a wide gap between expectations and reality - it results in disappointment. If you are selling software or a product for that matter, don’t promise the integration which will take a week or so and won’t work perfectly. Give those commitments that you know are humanly and technically feasible. Overpromising results in fears. 

Not addressing the key details 

When you are serving a client, it is necessary to include each and every detail about the project. You leaving details out by omission is one thing. If you leave out details intentionally, you will screw up relationships. Thus, address to each and every key detail. 

Being unauthentic 

If you are focusing only on yourself, what works for you and whatever you do then spending your time considering what's best for your team, company, or business partnership is a waste. Adopt an all-or-nothing attitude, acting however is needed to win favor, seal a deal, or make a sale, even if it means lying or misrepresenting your position is a call for a sour relationship. 

Image showing a handset in red color with text as “The Customer”. There are arrows that are connected to it and many doodles depicting important factors

Taking These Few Important Steps for an Enduring Relationship 

We all know that a huge amount of time and effort is employed on acquiring clients, yet very few businesses spend the same energy nurturing the relationship. Here are some of the tips that would help you endure your client relationship.  

Communication is the key 

Clients depend on you to keep them informed. Having constant communication with them should be the top priorities. This includes updating them on various projects, as well as making them understand about any kind of bumps that you may encounter in the product delivering journey.

Information distribution

Don’t delay to share knowledge that might be useful to the clients, whether or not it benefits your organization in a way. The more value you present, the more a client attains to depend on you. There should not be a hesitation to share important and crucial data. 

Integrity 

If you are not honest to your client and vice-versa, no long term relationship survives. In addition to producing a product or service, your client requires you to show a chief responsibility towards all the dealings. Nowadays clients are really intelligent, they understand when they are being deceived or misled. Speaking a “ white lie” about why you failed can ruin your reputation. And without a reputation in terms of integrity, you can fail to cultivate the kind of long-term relationships that your business stands on.

Encourage multi-player team involvement 

The success of any project depends on the contribution of every member of the team.  Encouraging multi-player team with the involvement of the dev team can bring laurels to your project. This way the team members have a sense of ownership in a group project and they believe that their contributions are valued. They feel motivated to share their best work.

Goals 

There might be times when you would feel that you and your client are not on the same page. You have your own objective and your client has there's.  The solution to this common issue is to set mutual goals. 

And as soon as you start your new project and get engaged and committed to the deadlines, you help the client with vital product or services that might not be available in time to meet his or her needs. Set mutual goals from the very beginning to avoid any kind of friction later in the future.

Work for a strong partnership 

If you are building a relationship in all the appropriate ways and of course providing the products and services to your client needs, you can operate on developing a partnership with the client, something that is ahead of the project development. 

A client who determines that the organization that is serving them is in it for the long haul and that it motivates to help them succeed soon starts to view them as more than just a vendor or supplier. You become a partner in their enterprise and someone they grow to value today, tomorrow and in the years to come

Looking into the performance 

Re-examine the cost 

If you have been working with a particular customer for a long time, re-examine what it really costs you to do so. It would not be feasible to cut your price if it becomes cheaper to serve them.

Perceiving the Product 

Instead of thinking about what it is or what it does, you should infuse how it makes them feel. Even if you sell software, your software may relieve the stressful feeling of trying to get work done in a limited amount of time. It may make them feel confident in doing the job right.

Modify the strategy of budget 

Modify what you sell from a capital cost into an expense if your customer’s CEO won’t approve your product. Often, capital spending is prohibited but monthly expenses continue to be budgeted.

Finding an efficient distributor 

Sell your wares through a distributor if customers start to need smaller quantities or more service. Perhaps your service has declined as you pursued larger customers. If so, get a third party to sell and service your customer properly. You sure don’t need to make as much if you are doing less.

Selling your Service 

If they won’t buy your service by the unit, sell it by the hour or the result. So many times buyers are told to cut costs by cutting inventory.

Grant with a warranty if your product is at fault 

If your product or service was deficient, offer some kind of insurance to assure your customer it won’t be a problem next time.

Managing the departments 

The reasons customers buy your from you can change over time. A purchasing department can make decisions until its company has legal or customer problems, at which time their finance or marketing departments may now have the final say.

Managing projects with the help of various methods 

  • Waterfall: One of the more traditional project management methodologies, Waterfall is a linear, sequential design approach where progress flows downwards in one direction like a waterfall.
     
  • Agile development:  Agile is best suited for projects that are iterative and incremental. It’s a type of process where demands and solutions evolve through the collaborative effort of self-organizing and cross-functional teams and their customers
     
  • Scrum: Scrum is comprised of five values: commitment, courage, focus, openness, and respect. Its goal is to develop, deliver, and sustain complex products through collaboration, accountability, and iterative progress. 
     
  • Kanban: Kanban is another popular Agile framework that, similar to Scrum, focuses on early releases with collaborative and self-managing teams.
     
  • Six Sigma: It aims to improve quality by reducing the number of errors in a process by identifying what is not working and then removing it from the process.

Case Studies 

Ivey Business Journal 

A three-year cross-industry study by Ivey business journal explained how poor business strategy, inappropriate communication or damaged working relationships between partners account for 94 percent of all broken and failed alliances. On their own, poor or damaged working relationships account for 52 percent of all broken alliances. 

There are several reasons due to which an alliance is broken. Issues like impersonal problems, failure of team members communicating, high attrition rates, and most importantly the failure to reach a milestone.

When an alliance is recognized as broken, there are many critical tasks to perform and many separate decisions to be made. Partners require to diagnose why the alliance has broken down, examine and interpret the existing obstacles, disputes or tensions, and create a specific procedure to master these problems. They must furnish themselves to uphold a long-term relationship.

To relaunch your relationship with your client a three-step process can be followed:

  • Audit the relationship diagnosing the root causes
  • The partnership can succeed only if both organizations are fully persuaded that the alliance is the most effective means to meet their goals.
  • Conduct relationship planning build a joint contract and deal understanding
Image of a pie chart where 52% is red in color, 37% is blue in color and 11% is green in color. The pie chart shows the causes of partnership failure


OEM Profitability and Supplier Relations 

OEM Profitability and Supplier Relations - which is based in part on data gathered over the past 13 years from the annual Working Relations Index Study published by consultancy Planning Perspectives - found the better the relationship an automotive manufacturer has with its suppliers, the greater its profits are.

It explained the relationship “quantifies the economic value of suppliers’. This includes a supplier sharing new technology, providing the best team to support to the manufacturer, and providing support that goes beyond the supplier's contractual obligation.
 
The report added the research “establishes the fact that the economic value of the suppliers’ non-price benefits can greatly exceed the economic benefit realized from suppliers’ price concessions”. On average, this can be up to four to five times greater, according to the research.

Conclusion 

To get customer loyalty in today’s rapidly changing competitive world, companies need to rethink.

  • How do they engage customers?
  • Do they have the appetite required to build loyal relationships?
  • Is it even the right strategy for them in the first place?

Determine what your business and shareholders need first. If it’s short-term financial gains, then customer loyalty should not be a stated goal. Client seeks relationships, with their vendor. They want a place to be heard, a place to be appreciated and a place to connect. 

At Opensense Labs, we use social technologies and services that allow us to take relationships with customers to higher levels. Connecting with customers’ personal values helps in placing ahead of the competition in winning the hearts and minds of your customers.

Ping us now at [email protected] now. 

Queue email

Jul 15 2019
Jul 15
Apr 30 2019
Apr 30

The opening talk as DrupalCamp Paris 2019 was a presentation given by Thomas Jolliet (FranceTV) and yours truly about how we rebuilt FranceTV Sport to a Symfony 4 / headless Drupal 8 combo.

The most salient points of the talk are probably the "defense in depth" mechanisms we built for scalability and fault tolerance, and the business results, like -85% full page load time or +50 iOS users.

Mar 13 2019
Mar 13

Note: This post refers to Drupal 8, but is very applicable to Drupal 7 sites as well

Most Drupal developers are experienced building sitewide search with Search API and Views. But it’s easy to learn and harder to master. These are the most common mistakes I see made when doing this task:

Not reviewing Analytics

Before you start, make sure you have access to analytics if relevant. You want to get an idea of how much sitewide search is being used and what the top searches are. On many sites, sitewide search usage is extremely low and you may need to explain this statistic to stakeholders asking for any time-consuming search features (and yourself before you start going down rabbit holes of refinements).

Take a look for yourself at how the sitewide search is currently performing for the top keywords users are giving it. Do the relevant pages come up first? You’ll take this into account when configuring boosts.

Using Solr for small sites

Drupal 8 Search API comes with database search included. Search API DB has come a long way over the years and is likely to have the features you need for smaller sites. Using a Solr backend is going to add complexity that may not be worth it for the amount of value your sitewide search is giving. Remember, if you use a Solr backend you have to have Solr running on all environments used in the project and you’ll have to reindex when you sync databases.

Not configuring all environments for working Solr

Which takes us to this one. If you do use Solr (or another server-side index) you need to also make sure your team has Solr running on their local environments and has an index for the site. 

Your settings.php needs to be configured to connect to the right index on each environment. We use Probo for review sandboxes so we need to configure our Probo builds to use the right search index and to index it on build.

Missing fields in index or wrong type

Always included the ‘Rendered HTML’ field in your search index rather than trying to capture every text field on all your content types and then having to come back to add more every time you add a field. Include the title field as well, but don’t forget to use ‘Fulltext’ as its field type. Only ‘Fulltext’ text fields are searchable by word.

Not configuring boosts

In your Processor settings, use Type-specific boosting and Tag-boosting via HTML filter. Tag boosting is straightforward: boost headers. For type-specific boosting you’re not necessarily just boosting the most important content types, but also thinking about what’s in the index and what people are likely looking for. Go back to your analytics for this. 

For example, when someone searches for a person’s name, are they likely wanting the top result to be the bio and contact info, a news posting mentioning that person, or a white paper authored by the person? So, even if staff bios are not the most important content on the site, perhaps they will need to be boosted high in search, where they are very relevant.

Not ordering by relevance

Whoops. This is a very common and devastating mistake. All your boost work be damned if you forget this. The View you make for search results needs to order results by Relevance: Descending.

Using AJAX

Don’t use the setting to ‘Use AJAX’ on your search results View. Doing so would mean that search results don’t have unique URLs, which is bad for user experience and analytics. It’s all about the URLs not about the whizzbang.

Not customizing the query string

Any time you configure a View with an exposed filter, take the extra second to customize the query string it is going to use. ‘search’ is a better query string than ‘search_api_fulltext’ for the search filter. URLs are part of your user interface.

No empty text

Similarly, when you add an exposed filter to a search you should also almost always be adding empty text. “No results match your search” is usually appropriate.

Facets that don’t speak to the audience

Facets can be useful for large search indexes and certain types of sites. But too many or too complex facets just create confusion. ‘Content-type’ is a very common facet, but if you use it, make sure you only include in its options the names of content types that are likely to make sense to visitors. For example, I don’t expect my visitors to understand the technical distinction between a ‘page’ and a ‘landing page’ so I don’t include facet links for these.

A screen shot of facets in DrupalYou can exclude confusing facet options 

Making search results page a node

I tell my team to make just about every page a visitor sees a node. This simplifies things for both editors and developers. It also ensures every page is in the search index: If you make key landing pages like ‘Events Calendar’ as Views pages or as custom routes these key pages will not be found in your search results. 

One important exception is the Search Results page itself. You don’t want your search results page in the search index: this can actually make an infinite loop when you search. Let this one be a Views page, not a Views block you embed into a node.

Important page content not in the ‘content’

Speaking of blocks and nodes, the way you architect your site will determine how well your search works. If you build your pages by placing blocks via core Block Layout, these blocks are not part of the page ‘content’ that gets indexed in the ‘Rendered HTML.’ Anything you want to be searchable needs to be part of the content. 

You can embed blocks in node templates with Twig Tweak, or you can reference blocks as part of the content (I use Paragraphs and Block Field.)

Not focusing on accessibility

The most accessible way to handle facets is to use ‘List of Links’ widget. You can also add some visually hidden help text just above your facet links. A common mistake is to hide the ‘Search’ label on the form. Instead of display: none, use the ‘visually-hidden’ class.

Feb 01 2019
Feb 01

Just imagine it: Drupal 8's robust features as a CMS, the flexible e-commerce functionality of the Drupal Commerce ecosystem and a JavaScript framework for the front-end! All in the same native mobile app! You can easily achieve this “combo” — a reliable content repository & a JS-based front-end providing a fantastic shopping cart experience — if you just... decouple Drupal Commerce.

For why should you trade Drupal's battle-tested content authoring and administration tools for a more interactive user experience? 

And why should you give up on your goal to deliver richer cart experiences just because Drupal 8 can't rival the JavaScript in terms of advanced native mobile app functionality?
 

  • push notifications
  • complex shopping options
  • enabling users to manage their own delivery times and places
  • ... to configure various aspects of their orders and so on
     

Just leverage a decoupled Drupal Commerce strategy in your shopping app project and you can have both:
 

  • Drupal as your secure content service 
  • the front-end framework of your choice “in charge” with the user experience 
     

In this respect, these are the most useful Drupal tools at hand for implementing an API-based headless architecture:
 

1. Headless Commerce Comes Down to...

… separating your commerce stack (back-end content handling area, data store etc.) from the user interface.

Or the “head”, if you wish.

The presentation layer would “retrieve” content from the back-end content storage area and is the one fully “responsible” with delivering fantastic user experience.

This way, you're free to choose your own front-end tools.

Now, why would you consider choosing a decoupled architecture for your e-commerce solution? The benefits are quite obvious and not at all negligible:
 

  • higher flexibility and scalability (that JS frameworks are “famous” for)
  • freedom to customize your app to your liking (for every platform or/and device)
  • richer, more interactive shopping experiences 
     

2. Decoupled Drupal Commerce... Out of the Box? The Commerce Demo 

Narrowing our focus down to... Drupal, to Drupal Commerce, more specifically, the question's still there:

“How do I decouple Drupal Commerce?”

Considering that:
 

  • there are specific challenges that such a decoupled front-end architecture poses
  • Drupal solutions like Forms API and Views won't fit your specific (probably quite complex) design implementation requirements
     

Luckily, the Commerce Guys team has already faced and solved these challenges.

First of all, they've put together the Commerce Demo project, a store providing default content to be “injected” into Drupal.

Secondly, their attempt at integrating a design meant to support advanced functionality, for richer shopping cart experiences, resulted in 2 new modules:
 

  • Commerce Cart API
  • Commerce Cart Flyout
     

More about them, here below...
 

3. Useful Modules to Decouple Drupal Commerce 

Here's a collection of the most... relevant modules that you could use in your headless Drupal Commerce project:
 

3.1. The Commerce Cart API Module

It's no less than a handy Drupal tool that enables you to custom build your shopping cart widget. 
 

3.2. The Cart Flayout Module

The go-to module when you need to ajaxify the “Add to cart” form in your shopping app.

Basically, what it does is:

Provide a sidebar that “flies out” once the user clicks the “Add to cart” button or the cart block.

If I were to dive into details a bit, I'd add that the flyout enables users to:
 

  • view the products in their shopping carts
  • remove all the items there
  • update the quantity of a specific item
     

Should I add also that Cart Layout comes with no less than 9 different Twig templates, for various parts of the module? By leveraging Drupal's library management feature you can easily override these JS segments of the module.

And not only that you get to customize it to suit your needs entirely, but:
 

  • it comes with a well structured JS logic
  • it's built on top of Backbone
     

… which translates into an efficient models-views separation.
 

3.3. Commerce 2

Use Drupal Commerce 2 as the core structure of your e-commerce project.

Being an ecosystem of Drupal 8 modules and “spoiling” you with unmatched extensibility via its APIs, Drupal Commerce empowers you to implement all kinds of headless commerce scenarios.

It enables you to use Drupal as your content/data (user and order-related info) repository and to easily serve this content to your mobile app. To your end-users.
 

3.4. The Commerce Recurring Framework Module

Some of its handy charging & billing features include:
 

  • configurable billing cycles
  • configurable retries in case of payment declines
  • both prepaid and postpaid billing systems
     

3.5 The JSON API & JSON API Extras Modules   

Need to decouple Drupal Commerce, to enable a full REST API in JSON format? 

It's as easy as... enabling a module (or 2 at most): the JSON API module.

What it does is:
 

Expose the API so you can vizualize the data in JSON format.

And Drupal's built and perfectly adapted to support JSON API, which turns it into the go-to option when you need a back-end content repository for your headless shopping app.

In addition to this module, feel free to enable JSON API Extras, as well. It comes particularly handy if you need to customize the generated API. 

It allows you to:
 

  • override the name of your resources
  • change their path...
     

You'll then have a specific place in your app's user interface where you can visualize your content paths.

Once you have your data in JSON format, safely stored in your back-end content creation & moderation Drupal area, you're free to... serve it to your mobile shopping app!
 

The END!

And these are some of the already tested tools and techniques to decouple Drupal Commerce so that you can deliver richer, more interactive cart experiences.

Have you tried other modules/methods? Writing custom JavaScript code... maybe?

Jan 30 2019
Jan 30

If you were an early Drupal 8 adopter you've might have downloaded and installed your Drupal 8 sites by downloading a tarball or using Drush. We did as well, but the benefits of using Composer are so great that it's time to convert those in to being Composer-managed.

Luckily, grasmash has built a great Composer plugin called Composerize Drupal which does all the heavy-lifting for us.

Here's how we did it:

Before you even begin, make sure you branch out $ git checkout -b chore/composerize-drupal

And then we installed the Composer plugin globally:

composer global require grasmash/composerize-drupal

Consider the plugin options available:

  • Use the --exact-versions option if the site is big and complex. Especially if you don't have any good test coverage to ensure your site doesn't break. The option sets the constraints of your composer.json to the exact versions of your currently downloaded modules.

Now we run the command:

composer composerize-drupal --composer-root=. --drupal-root=. --exact-versions

Next:

  • Update your .gitignore and ignore the vendor/, core/ and modules/contrib folders. If the files were already commited you also need to remove them: Ignore files that have already been committed to a Git repository
  • Re-apply your patches! Since all the core code and contrib. modules are managed by Composer you'll need to add those patches to your composer.json:
    Something like this:
    "extra": {
        "enable-patching": true,
        "patches": {
            "drupal/core": {
                "2492171 - Adds transliteration to uploaded file and images": "_kodamera/patches/use_new_transliteration-2492171-72.patch"
           }
       }
       ...

When you run composer install they are automatically applied for you. No more manually work here. Yay!

Do some regression testing and if everything looks fine, you're done! Commit and deploy :)

Jan 25 2019
Jan 25

Let's say you've been working on this contributed project for a few months now. It has gone from Beta 1 to Beta 2 to Beta... Now, how long till its final release? How do you know when it's ready for the Drupal community to see and use? And this is precisely why the Drupal quality initiative was launched in the first place.

So that can we finally have some sort of a checklist at hand to use whenever we need to assess our code's level of quality:
 

  • the standards that we should evaluate our contributed projects by 
  • the specific elements that go into the quality of our projects, such as contributed Drupal modules
  • a certain hierarchy of quality that we could rate our own projects by
     

And so on...

For, let's admit it now:

Except for our own personal methodologies for self-assessment, there's no standardized benchmark that could help us evaluate our contributed Drupal projects. There's no way of knowing for sure when our projects are 100% ready to go from beta to... full release.

Now, here are the legitimate questions that this initiative brings forward, along with some of the suggested paths to take:
 

1. What Drupal-Specific Quality Metrics Should We Use to Evaluate Our Code?

How do you know when your contributed project is efficient enough to... be used by other members of the Drupal community?

You need some sort of criteria for measuring its level of quality, right? 
 

2. The Drupal Quality Initiative: A Checklist for Project Quality Assessment

And this is how the “Big Checklist” for Drupal modules has been put together. One outlining all those areas of a contributed Drupal project that you should carefully evaluate when assessing its quality.

Areas such as:
 

  • team management
  • documentation
  • testing
  • code
  • design
  • requirements
  • DevOps
     

All those factors and Drupal-specific elements that go into the quality of a contributed project.


3. Introducing the Idea of a Multi-Leveled Quality Hierarchy

What if we had multiple levels of quality to rate our Drupal projects?

Imagine some sort of hierarchy of quality that would challenge us to keep improving the way we write code for Drupal. To keep growing as teams working with Drupal.

Your project might be rated “level 1”, from a quality standpoint, on its first release. But it would still stand stand the chance to get a higher score for if you strove to meet all the other criteria on the checklist.


4. You'll Be Particularly Interested in The Drupal Quality Initiative If You're A...
 

  1. Site builder, scanning through the pile of contributed Drupal modules in search of the ones that perfectly suit your project's specific needs
  2. Drupal contributor in need of some sort of checklist that would include all those standards of quality and best practices to help you assess your own code's value
     

5. What About Non-Drupal Software Projects? How Is Their Quality Assessed?

In other words: how do other communities assess their projects' levels of quality?

What metrics do they use?

And here, the Drupal quality initiative's... initiator gives the “The Capability Maturity Level”, set up by the Software Engineering Institute, as an example.

The process model highlights 5 levels of “maturity” that a project can reach throughout its different development phases.They range from:
 

  • the“initial chaos”
  • to planning and collecting project requirements
  • … all the way to continuous process improvement
     

Now, just imagine a similar multi-level evolutionary benchmark that we could use to assess our own Drupal projects' levels of... maturity.
 

6. A Few Quality Indicators and Suggested Tools

And the whole Drupal Quality Initiative comes down to identifying the key endpoints for assessing a project's quality, right?

Here are just some of the suggested questions to use during this evaluation process:
 

  • Is it easy to use?
  • Does it perform the intended functions?
  • Is it efficient enough?
  • How many detected bugs are there per 1000 lines of code
  • How secure is it?
     

Now, for giving the most accurate answers to these quality assessing questions, you'll need the right toolbox, right?

All those powerful tools to help you:
 

  • check whether your code is spell checked
  • monitor the status of specific operations
  • check whether all strings use translation
  • see whether your code has been properly formatted
     

The END! And this is just a brief overview of the Drupal Quality Initiative.

What do you think now, does the suggested checklist stand the chance to turn into a standardized Drupal benchmark for assessing quality?

How do you currently determine your contributed projects' value?

Jan 23 2019
Jan 23

Progressively decoupled Drupal has gone from concept to buzzword. Until recently, when we've started to witness sustained efforts being made to set up a standard workflow for implementing this architecture.

New dedicated modules have been developed to fit those use cases where just a few particular blocks, affecting the website's overall performance, need to be decoupled. All while preserving Drupal's standard robust features.

Features too famous among content editors and site builders to be sacrificed in the name of high speed and rich UX. 

We've gradually shifted focus from “Why would I choose progressive decoupling over a headless CMS?” to:

“How precisely do I implement the progressive approach into my own decoupled Drupal project? Is there a standardized process, based on a set of dedicated modules, that I can leverage?”

And this is what I'll be focusing on in this post here.

More precisely, on the efforts for standardizing the whole workflow: see Decoupled Blocks and the SPALP module!
 

1. Progressively Decoupled Drupal: Compromise or Viable Alternative to an All-In Transition?

Is this approach nothing but a compromise between:
 

  • content editors — and all Drupal users working in the site assembly —  who depend on key features like content workflow, layout management, site preview, seamless administrative experience
  • and front-end developers, who're “dying” to “inject” application-like interactivity and high-speed front-end technologies into certain portions of the Drupal web pages?
     

Progressively decoupling blocks in Drupal is, indeed, the best compromise you could get between:
 

  1. your editorial team's “fear” of losing familiar Drupal features critical for their workflow
  2. front-end developers willing to experiment with new technologies promising top speed and richer user experiences
     

Developers get to leverage the JavaScript framework of their choice without interfering with the site assemblers' workflow. Flexibility at its best!

But does being a viable compromise makes it also a worthy alternative to the fully decoupling option?

It does.

Specifically because:
 

  1. it caters to all those who haven't been won over by the “headless CM movement” 
  2. it removes the risk of trading vital Drupal functionality for the benefits of a powerful front-end framework
     

In other words:

For all those Drupal projects requiring that only certain components should be decoupled, an all-in transition would be simply... redundant and unnecessarily risky.

For all those projects there's the progressively decoupled Drupal alternative.
 

2. Why Has this Approach to Decoupling Drupal Been So Unpopular?

How come the progressively decoupled Drupal strategy gained so little traction?

It seems that despite its drawbacks — the need to reinvent some of the lost “Drupal wheels” and its higher costs — the fully decoupled approach has been more popular.

And there are 3 main causes for this, that Dries Buytaert identified and exposed in his blog post on “How to Decouple Drupal in 2018”:
 

  1. progressive decoupling doesn't leverage server-side rendering via Node.js
  2. modern JavaScript cohabits with old-school PHP
  3. JavaScript's ascension is not going to stop any time soon; therefore, the risk of sacrificing some of Drupal's popular capabilities might still seem insignificant compared to the JS advantages at a front-end level
     

3. The SPALP Module: Towards a Standard Workflow for Implementing Progressive Decoupling

Now, back to this blog post's main topic:

Clear pieces of evidence that we're finally heading towards a standardized process for implementing this type of decoupled system.  

And one such evidence is the SPALP module: Single Page Application Landing Page. 

Here's a specific use case, so you can get an idea of its role in the entire workflow of a progressively decoupled Drupal project:

Let's say that you need to integrate a couple of JavaScript-based one-page apps into your Drupal website. The CMS will continue to be “in charge” of the page rendering, access control routing and navigation, while the JS apps would be developed independently, outside of Drupal. How would you configure these JS apps as Drupal web pages?

You'd use the SPALP module to configure each one of them so that:
 

  1. you stay consistent and “joggle with” the same configuration every time you need to add a new app to your Drupal website
  2. you make its easy for your content team to manage this entire ecosystem of single-page JavaScript apps
     

“And how does this module work?”

Here's the whole “back-stage” mechanism:
 

  1. the SPALP module helps you to set up a new “app landing page" content type, the one providing the URL for the app about to be integrated
  2. each one of these applications must have its own module that would declare a dependency on SPALP, include its JSON configuration and define its library
  3. once a module meeting all these requirements is enabled, SPALP will create a landing page node for it, which will store the initial configuration
  4. the SPALP module will add the pre-defined library and a link to an endpoint serving JSON each time that node is viewed
     

Note: speaking of the efforts made to create a “Drupal way” of implementing this decoupled architecture, you might want to check out Decoupled Blocks, as well. It's designed to empower front-end developers to use the JS framework of their choice to develop individual custom blocks that would be later on integrated into Drupal. No Drupal API knowledge required!


The END!

What do you think: will the community continue their efforts to build a standard workflow for the progressively decoupled Drupal approach? Or will it remain a conceptual alternative to headless Drupal?

Jan 22 2019
Jan 22

[embedded content]

Over the years I’ve written a fair bit about Drupal and its modules, but all the videos and tutorials focused on a single module or topic.

So I decided to try something different and record a video where I build a whole website in a single go. I recorded the video in one night and only stopped recording to get a drink.

In this video, which is over 3 hours long, I’ll teach you how to build a basic directory website. We’ll start right at the beginning by setting up a local Drupal site for this we’ll use DDEV-Local. Then we create content types, create a sub-theme, create a few custom views, a search page, media management functionality and so much more.

I’ve broken out the video into sections below with timecodes and extra resources. For the content below to make any sense you should follow along by watching the video.

Enrollments are now open for the Drupal 8 Site Building Bootcamp: 7-week program, 2 live lectures per-week. Enroll NOW!

1. Set up Local Drupal Site

Time: 00:01:33 – 00:09:49

Download Drupal

We first need to download the Drupal codebase, run the following Composer command:

composer create-project drupal-composer/drupal-project:8.x-dev SITE_NAME --stability dev --no-interaction

Replace SITE_NAME with the name of the folder.

Tip: If you want to speed up Composer then install the prestissimo plugin. This is a Composer plugin and has nothing to do with Drupal.

Configure DDEV-Local

We’ll use DDEV-Local to run our local Drupal 8 site. It requires Docker to run, and you can get the install instructions from their documentation site.

Once you’ve installed DDEV-Local go to your Drupal site within the terminal and run:

ddev config

You’ll be prompted with a few options, and it’ll configure the environment.

MacOS Users: If you’re using macOS make sure you set webcache_enabled to true in the ddev config.yml.

Go to your Drupal codebase and open .ddev/config.yml and change:

# From:
webcache_enabled: false
# To:
webcache_enabled: true

Time: 00:06:58

Links:

2. Create Content types and Taxonomy Vocabularies

Time: 00:09:50 – 00:29:08

Just like on any Drupal site we need to build the data model: content types and taxonomy vocabularies.

Content Types

Listing:

  • Body
  • Email
  • Listing categories
  • Logo
  • Website

Blog:

  • Body
  • Comments
  • Featured image
  • Tags
  • Blog categories

Taxonomy Vocabularies

  • Listing categories
  • Blog categories

Links:

3. Modify Content types

Time: 00:29:08 – 00:41:20

Once the content types have been created we’ll need to modify them. For this, we’ll use Display Suite.

To install Display Suite, run the following command:

composer require drupal/ds

If you’re keen to learn more about Display Suite check out our following tutorial series:

  1. How to Customize Content Pages
  2. How to Use Display Suite Fields
  3. How to Use Switch View Mode Sub-module
  4. Webinar: Customize Content Pages using Display Suite in Drupal 8

4. Create Bootstrap Sub-theme

Time: 00:41:22 – 01:01:40

We’ll use the Bootstrap theme on the site, and we’ll create a basic CDN sub-theme.

If you need step-by-step instructions on creating a Bootstrap theme, then read our “Getting Started with Bootstrap in Drupal 8“.

Install the theme using this command:

composer require drupal/bootstrap

Please note: The Bootstrap theme (as of this writing), only supports Bootstrap 3, not 4. If you need a Bootstrap 4 theme look at Barrio or Radix.

We have a tutorial on Barrio called “Getting Started with Bootstrap 4 using Barrio in Drupal 8“.

Bootstrap Layouts

The Bootstrap Layouts module ships a bunch of prebuilt layouts for Drupal 8. We’ll use these layouts in Display Suite.

composer require drupal/bootstrap_layouts

If you want to learn more about Bootstrap Layouts, then check out our tutorial “How to Implement Layouts using Bootstrap Layouts in Drupal 8“.

Links:

5. Block and Menu System

Time: 01:01:42 – 01:15:03

Once we’ve created our sub-theme, we’ll create four new footer regions.

Add the following into your theme’s .info.yml:

regions:
  footer_one: 'Footer one'
  footer_two: 'Footer two'
  footer_three: 'Footer three'
  footer_four: 'Footer four'

Add the following into page.html.twig (make sure you override the Twig file):

<div class="footer footer-grid {{ container }}">
    <div class="row">
        <div class="col-sm-3">
            {{ page.footer_one }}
        </div>
        <div class="col-sm-3">
            {{ page.footer_two }}
        </div>
        <div class="col-sm-3">
            {{ page.footer_three }}
        </div>
        <div class="col-sm-3">
            {{ page.footer_four }}
        </div>
    </div>
</div>

6. Views

Time: 01:15:03 – 01:38:10

We need to create a few custom Views for our website. The first one, which lists blog content is fairly simple.

The second, which is “My listing” is complicated because you have to deal with contextual filters.

Read our tutorial “Add Custom Tab to User Profile Page with Views in Drupal 8” for a step-by-step tutorial on implementing this type of View.

7. Build Search page using Search API

Time: 01:38:10 – 02:10:32

We’ll use the Search API and Facets module to build our custom listing search page.

Download the required modules using the following command:

composer require drupal/search_api drupal/facets

Watch our webinar “How to Build Custom Search Pages in Drupal 8” which covers the core Search module and Search API.

Links:

8. Media Management

Time: 02:10:55 – 02:30:54

We now need to add media handling functionality to the directory site.

Run the following Composer command to download the required modules:

composer require drupal/entity_embed drupal/ctools drupal/entity_browser drupal/inline_entity_form

For a detailed tutorial on configuring all this stuff and more go to “Managing Media Assets using Core Media in Drupal 8“. And there’s a video: “Live Training: Managing Media Assets using Core Media in Drupal 8“.

9. Roles and Permissions

Time: 02:30:56 – 02:51:10

Now we need to create a role called “Contributor” and configure its permissions.

To allow users to publish/unpublish listings, you’ll need to use Override Node Options.

Install it using the command below:

composer require drupal/override_node_options

The “Contributor” role needs the following permissions:

  • Use the Contributor HTML text format
  • Image: Create new media
  • Image: Delete own media
  • Image: Edit own media
  • Listing: Create new content
  • Listing: Delete own content
  • Listing: Edit own content
  • View own unpublished content
  • Override Listing published option

Create Registration Page

To create a registration page, we’ll use Multiple Registration.

Run this command to install it:

composer require drupal/multiple_registration

Read our “Create Individual Registration Forms using Multiple Registration in Drupal 8” for a detailed tutorial on the module.

Links:

10. Paragraphs

Time: 02:51:10 – 03:06:45

We’ll use the Paragraphs module to allow an editor to add a Bootstrap Jumbotron to a page.

Install the module by running:

composer require drupal/paragraphs

If you want to learn more about Paragraphs, then check out our free course, “Build Edge-to-edge Sites using Paragraphs in Drupal 8“.

Links:

11. Webform

Time: 03:06:47 – END

We’ll use the Webform module to build functionality which sends an email to the owner of the listing.

You can install Webform by running:

composer require drupal/webform

Below is the token which is used:

[webform_submission:submitted-to:author:mail]

Links:

Summary

I don’t expect many people to make it to the end of the video but if you did, congratulations! I hope you learnt something new by seeing how a Drupal site is built.

We can often learn a lot just by watching a developer build something.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Jan 16 2019
Jan 16

Accidentally creating duplicate content in Drupal is like... a cold: 

Catching it is as easy as falling off a log.

All it takes is to:
 

  • further submit your valuable content on other websites, as well, and thus challenging Google with 2 or more identical pieces of content
  • move your website from HTTP to HTTPs, but skip some key steps in the process, so that the HTTP version of your Drupal is still there, “lurking in the dark”
  • have printer-friendly versions of your Drupal site and thus dare Google to face another duplicate content “dilemma”
     

So, what are the “lifebelts” or prevention tools that Drupal “arms” you with for handling this thorny issue?

Here are the 4 modules to use for boosting your site's immunity system against duplicate content.

And for getting it fixed, once the harm has already been made:
 

1. But How Does It Crawl into Your Website? Main Sources of Duplicate Content 

Let's get down to the nitty-gritty of how Drupal 8 duplicate content “infiltrates” into your website.

But first, here are the 2 major categories that these sources fall into:
 

  • malicious
  • non-malicious
     

The first ones include all those scenarios where spammers post content from your website without your consent.

The non-malicious duplicate content can come from:
 

  • discussion forums that create both standard and stripped-down pages (for mobile devices)
  • printer-only web page versions, as already mentioned
  • items displayed on multiple pages of the same e-commerce site
     

Also, duplicate content in Drupal can be either:
 

  • identical
  • or similar

And since it comes in “many stripes and colors”, here are the 7 most common types of duplicate content:
 

1.1. Scraped Content

Has someone copied content from your website and further published it? Do not expect Google to distinguish the copy from its source.

That said, it's your job and yours only to stay diligent and protect the content on your Drupal site from scrapers.
 

1.2. WWW and non-WWW Versions of Your Website

Are there 2 identical version of your Drupal website available? A www and a non-www one?

Now, that's enough to ring Google's “duplicate content in Drupal” alarm.
 

1.3. Widely Syndicated Content 

So, you've painstakingly put together a list of article submission sites to give your valuable content (blog post, video, article etc.) more exposure.

And now what? Should you just cancel promoting it?

Not at all! Widely syndicated content risks to get on Google's “Drupal 8 duplicate content” radar only if you set no guidelines for those third-party websites.

That is when these publishers don't place any canonical tags in your submitted content pointing out to its original source.

What happens when you overlook such a content syndication agreement? You leave it entirely to Google to track down the source. To scan through all those websites and blogs that your piece of content gets republished on.

And often times it fails to tell the original from its copy.
 

1.4. Printed-Friendly Versions

This is probably one of the sources of duplicate content in Drupal that seems most... harmless to you, right?

And yet, for search engines multiple printer-friendly versions of the same content translates as: duplicate pages.
 

1.5. HTTP and HTTPs Pages

Have you made the switch from HTTP to HTTPs?

Entirely?

Or are there:
 

  • backlinks from other websites still leading to the HTTP version of your website?
  • internal links on your current HTTPs website still carrying the old protocol?
     

Make sure you detect all these less obvious sources of identical URLs on your Drupal website.
 

1.6. Appreciably Similar Content 

Your site's vulnerable to this type of duplicate content “threat” particularly if it's an e-commerce one.

Just think of all those too common scenarios where you display highly similar product descriptions on several different pages on your eStore. 
 

1.7. User Session IDs 

Users themselves can non-deliberately generate duplicate content on your Drupal site. 
How? They might have different session IDs that generate new and new URLs.


2. 4 Modules at Hand to Identify and Fix Duplicate Content in Drupal

What are the tools that Drupal puts at your disposal to detect and eliminate all duplicate content?
 

2.1. Redirect Module

Imagine all the functionality of the former Global Redirect module (Drupal 7) “injected” into this Drupal 8 module!

In fact, you can still define your Global Redirect features by just:
 

  1. accessing the Redirect module's configuration page
  2. clicking on “URL redirects” 
     

How to Deal with Duplicate Content in Drupal: Global Redirect features
Image Source: WEBWASH.net

What this SEO-friendly module does is provide you with a user-friendly interface for managing your URL path redirects:
 

  • create new redirects
  • identify broken URL paths (you'll need to enable the “Redirect 4040” sub-module for that)
  • set up domain level redirects (use the “Redirect Domain” sub-module)
  • import redirects
     

Summing up: when it comes to handling duplicate content in Drupal, this module helps you redirect all your URLs to the new paths that you will have set up.

This way, you avoid the risk of having the very same content displayed on multiple URL paths.
 

2.2. Taxonomy Unique Module  

How about “fighting” duplicate content on your website at a vocabulary level?

In this respect, this Drupal 8 module:
 

  • prevents you from saving a taxonomy term that already exists in that vocabulary
  • is configurable for every vocabulary on your Drupal site
  • allows you to set custom error messages that would pop up whenever a duplicate taxonomy term is detected in the same vocabulary
     

2.3. PathAuto Module  

Just admit it now:

How much do you hate the /node125 type of URL path aliases?

They're anything but user-friendly.

And this is precisely the role that Pathauto's been invested with:

To automatically generate content friendly path aliases (e.g. /blog/my-node-title) for a whole variety of content.

Let's say that you want to modify the current “path scheme” on your website with no impact on the URLs (you don't want the change to affect user's bookmarks or to “intrigue” the search engines).

The Pathauto module will automatically redirect those URLs to the new paths using any HTTP redirect status.
 

2.4. Intelligent Content Tools      

Personalization is key when you strive to prevent duplicate content in Drupal, right? 

And this is precisely what this module here does: it helps you personalize content on your website.

How? Through its 3 main functionalities delivered to you as sub-modules:
 

  • auto tagging
  • text summarizing 
  • detecting plagiarized content 
     

Leveraging Natural Language Processing, this last sub-module scans content on your website and alerts you of any signs of duplicity detected.

Word of caution: keep in mind that the module is not yet covered by Drupal's security advisory policy!
 

3. To Sum Up

Setting a goal to ensure 100% unique content on your website is as realistic as... learning a new language in a week. 

Instead, you should consider setting up a solid strategy ”fueled” by (at least) these 4 modules “exposed” here. One that would help you avoid specific scenarios where entire pages or clusters of pages get duplicated.

Now, that's a far less utopian goal to set, don't you think?

Dec 10 2018
Dec 10

It's a fact: “the next generation” of web apps aren't just extremely fast, they're highly scalable, as well. Which brings us to the next question: “How do you scale a web application in Drupal?”

What tools, best practices, and latest techniques do you use for leveraging Drupal 8's scalability capabilities?

For ensuring that your custom web app will keep on scaling to:
 

  • handle sudden spikes in traffic
  • avoid downtime 
  • withstand “surprise” content overloads
     

Well, here they come:
 

1. But Is Drupal Scalable? How Scalable? 

Let's just say that:

Drupal's built with scalability in mind and that Drupal 8 is... extremely scalable.

It's powering some of the world's most trafficked and content-rich websites (Weather, Grammy, Princess Cruises...). Therefore, it's designed to cope with heavy infrastructures of thousand content contributors, Drupal users and site/app visitors...

And when gauging Drupal 8's scalability you need to go beyond Drupal's unmatched modularity: +30,000 free modules.

Instead, just think of:
 

  • Drupal turned into a central API 
  • all the improvements brought to Drupal 8's scalability till this day
  • Drupal 8 enabling you, right out of the box, to integrate it with a wide range of third-party apps, software, and systems
  • RESTful API now in core!!!
     

… and how all that empowers you, the Drupal web app developer, to easily serve JSON or HTML code.

And Drupal 8's unparalleled scalability comes down to this:

Empowering developers to create content and send it to any third-party app via JSON.

Of course, its out-of-the-box scalability can get further optimized via:
 

  • an established set of best practices
  • additional support from various tools and technologies
     

2. How to Scale a Web Application in Drupal: Server Scaling Techniques

Let's say that... “it's time”:

You've applied all the optimization techniques on your web application so that it should seamlessly “accommodate” the increasing influxes of traffic and content load. And still, its server hardware has started to show its limitations.

So, it's time to scale your server hardware. And you have 2 options at hand:
 

2.1. You scale up your server vertically 

This is the handiest method, so to say. That “emergency” technique to go for when:
 

  1. you don't have time to install a caching module
  2. there's no one in your team with the needed expertise for adding more servers
     

So, what do you do? You increase your existing server size. 

You boost its performance by adding more resources.

This way, it could keep up with all those new traffic challenges calling for more memory, more CPU cores...

Word of caution: there' no such thing as “sky is the limit” here; you'll still reach the limit of the hardware at some point when you scale up a web app in Drupal using this method.
 

2.2. You scale up your server horizontally

The second best practice for scaling up your server is a bit more complex.

And it involves 2 approaches, actually:
 

a. You separate your database from your Drupal web app

Basically, your database will have its own server and thus you get to split the load in 2. Then, you can vertically scale each one of the 2 servers.
 

b. You add multiple servers and distribute the load between them.

This is the most complex way to scale a web app in Drupal. 

Just think about it:

How will the servers included in this whole “ecosystem” “know” which users to take over?

It goes without saying that you'll need a load balancer for properly “splitting up” the traffic load. And a database server, as well.

See? It already gets more complex compared to the other 2 above-mentioned server scaling techniques.

Nevertheless, this is the method which, when done properly, will reduce dramatically the load that each server must handle.
 

3. “Juggling with” Multiple App Servers for Drupal

Let's say that you've opted for the last method of scaling up your server, so:

Now you find yourself facing the challenge of handling multiple app servers.

How will you deploy code to each of them simultaneously? That is the biggest question when you scale a web app in Drupal.

The best practice is to keep all your servers on the same local network. 

Having one single data center will speed up the data transfer compared to having it traveling through the internet.
 

The END! This how you can leverage Drupal 8's scalability capabilities and easily “adjust” your web app to withstand unexpected surges of traffic.

Have you tried other techniques and best practices? 

Nov 14 2018
Nov 14

"A Drupal 8 initiative to improve Drupal's content workflow", this is how Dries Buytaert first defined the Workflow Initiative, back in 2016. Now, coming back to 2018, you must be asking yourself a legitimate question: “How do I set up a content workflow in Drupal 8?”

“How do I manage, extend and customize an editorial workflow to fit my Drupal 8 website's publishing needs? One including multiple users, with different permissions, that manages the workflow status of... different content types.”

Which are the (not so) new content management features and functionality implemented to Drupal core by now? Those aimed at improving the user experience (editors, content authors...)?
 
Let's get you some answers:
 

1. Introducing: The Content Moderation Drupal 8 Module

Content Moderation has reached stable version in Drupal 8.5. 

Why should you care? What makes this core module of critical importance for creating your content publication workflow?
 

  • because otherwise, you'd have only two built-in states to “juggle with”: published and unpublished
  • because it enables you to build a simple workflow for drafts, too
  • … to set up new custom editorial workflows, as well, in addition to the default one
     

In short, what this module does is that it enables you to create a flexible content workflow process where:
 

  • one of the editors in your team stags a “Draft” content
  • and another user on your Drupal 8 website, with a different permission, reviews/updates it
     

It comes as a powerful tool for you to leverage when your workflow needs are more complex than “ON/OFF”.
 

2. How to Set Up a Simple Content Workflow in Drupal 8

You'll only need 2 modules for putting together the workflow for a basic content publishing scenario:
 

  • Workflows, that will provide just the framework needed for managing the states and transitions included in the process
  • Content Moderation, which will add the “Draft” state, a “Draft to Published” content workflow, and an admin view for handling all the drafts
     

And here's setting up a basic content publishing workflow in 4 simple steps:
 

  1. Enable the “Content Moderation” core module
  2. Go to “Configuration” and click the “Workflow” tab; it's the last one in the unfolding drop-down menu
  3. Open the “Workflows” page
  4. Tada! You've just turned on your default “Editorial workflow”
     

For now, you should be having 3 major states in your workflow:
 

  • draft
  • published
  • archived
     

Note: use permissions to grant content contributors the right to edit/create drafts, editors the “Transition drafts to published” permission, admins the right to “restore to draft transitions” and so on...

And voila! Your default editorial workflow, with the Content Moderation module ON, should suit your basic state tracking needs. It should fit any standard use case.

Now, if your workflow needs are a bit more complex and website-specific... keep on reading:
 

3. Content Revisions in Drupal 8

One of the most powerful features that Content Moderation will “turbocharge” your editorial workflow with is: 

Saving each change as a content revision in the database. 

It stores all revisions in the system.

But let's take a common scenario, shall we?

Let's say that a second editor decides to make an update to a piece of content (either a content type or a custom block type). He/she updates it, then saves it as a “Draft”. You'll then still have the published version of the content, that's live, on your Drupal website, as well as this Draft (or several of them), stored, as a revision, in your database.

A crucial functionality for any complex content publishing workflow:
 

  • with content revisions, you get to keep track of who's updated what and when
  • … to trigger log messages regarding those changes, informing other content authors that a given content has been edited
  • and you can also revert to the oldest revisions if needed
     

4. How to Extend and Customize Your Content Publishing Workflow 

Rest assured: there's no need for custom code writing, even if your content publishing needs are a bit more complex.

Here's what it takes to extend and to custom-tune your default content workflow in Drupal 8:
 

  1. While on your “Workflow” page, just click the “Add a new state” button and add more workflow states: “Needs Review” or “Second Review” etc.
  2. Next, make sure you adjust your transitions to support your newly added state(s). For instance, a “Second Review” state would require a “Move to Second Review” transition. 
  3. Then, apply your extended workflow to either a specific content type or to a custom block type
  4. You can also create new separate content publishing workflows to have a different one for your press releases, a separate publishing workflow, an editorial workflow for your blog posts, a warehouse workflow etc.
     

Defining multiple workflows in Drupal 8, each one with its specific “ecosystem” of states and transitions, is now possible.

How to Create and Manage a Content Workflow in Drupal 8: Set Up a Custom Content Workflow

Notes:

  • the transitions in your workflow will stand for the permissions that you'll assign to different Drupal roles in your team
  • use clear, descriptive verbs to name them
  • remember to grant editors the permission to undo transitions, as well (they might need to revert a piece of content to “Needs Work” once they've reviewed it, for instance)

In short:

By defining multiple states for your piece of content (Published, Pending Review, Ready for Review, Ready for Second Review, Unpublished, Draft etc.) and managing the permissions corresponding to the state transitions you can build a content workflow in Drupal 8 capable to support even the most complex publishing scenarios.

Now, another common scenario where a custom content workflow in Drupal 8 is needed is when you have a website publishing content to multiple platforms. 

You have a Drupal 8 website, a native application and an internal portal, let's say...

Your publishing workflow would look something like this:
 

  • first, content gets moderated to be published on the front-facing Drupal website
  • then, it gets put in the queue for review before it gets published (or declined) on each one of the other 2 platforms
     

Note: if you need to further extend your editorial workflow and to apply it to a custom entity, for example, you can always write a WorkflowType plugin that meets your specific needs.

Then, you can apply your custom workflow to... steps in ordering in a resto app, steps in a manufacturing process and to pretty much any entity (think beyond content) that needs to change its workflow states...
 

5. How Do You Know If You Really Need an Editorial Workflow?

Do you really need to use content moderation? To set up a whole workflow for your publishing scenario?

You do, if and only if:
 

  • there are multiple content authors uploading content on your website, content that needs to be reviewed before it gets published
  • you're managing a team of multiple admins, with different user roles
  • each moderator knows his/her role in the publishing chain
     

But if the content authors in your team have the very same type of permission as the admins and they just push content through, a content moderation workflow is useless.

It would only slow down the publishing process.

So, just because you have the option to set up a content workflow in Drupal 8, doesn't mean that you should rush to implement it on your own website, too... Maybe you just don't need a workflow.

The END! 

What do you think about these content management capabilities in Drupal 8? Are they powerful and diverse enough to suit your workflow needs? 

Nov 08 2018
Nov 08

What do you get when you put together: Drupal 8 + AI + UX? Drupal8's content management features and integration capabilities, AI, for storing and interpreting data and building a predictive model and UX for anticipating user behavior while adding a “human touch” to the equation? You get predictive UX in Drupal!

Is it possible? Can we implement predictive UX in Drupal and thus create anticipated user experiences that:
 

  • help you deliver meaningful content only    
  • simplify user choice
  • simplify users'... lives?
     

But how does machine learning actually power these predictive user experiences? What's the whole mechanism behind?

And how is predictive analytics UX any different from... personalization? 

Are there any “traps” to be avoided when using the same event data to make informed decisions on the customer's behalf? 

And last but not least: what makes Drupal 8 the best fit for predictively serving content?
 

1. What Is Predictive UX More Precisely?

“Less choice, more automation.”

Or: Anticipating users' needs and delivering them precisely and exclusively the content they need (when they need it). In other words: creating those predictive user experiences that anticipate and meet your customers' needs...

Which one of these 2 possible definitions do you prefer?

Or maybe you'd like a more “elaborate” one:

Predictive UX means leveraging machine learning and statistical analysis to make informed decisions for the customer.

And if we are to turn this definition into a mathematical equation, it would go something like this:

machine learning (predicting) + UX design (anticipating)= predictive UX (based on a predictive or anticipatory design)
 

2. But Isn't This Just Another Word for “Personalization”?

As compared to personalization, predictive UX goes beyond tailoring content to users' past choices:

It actually makes decisions on their behalf.

It's not limited to leveraging data in order to deliver dynamic content. Which would automatically call for heavy manual work.

Instead, predictive UX is AI-driven, thus automating decision making on the user's behalf.
 

3. How Does Predictive Analytics Benefit You and Your Customers?

Here's an empathy exercise for you:

You're a mobile app user who's being constantly “flooded” by heavy streams of disruptive information through push notification, by text or by email. Or you're an online customer faced with a discouragingly “beefy” set of options as you're about to order food for lunch. There are so, so many irrelevant options that you're striving to make your way through till you find the dish that really suits your preferences... that you just feel like closing the app and hitting the closest resto instead...

So, what if:

  • your app could... tell what you want to have for lunch and display the most relevant options only?
  • you would receive app alerts or push notifications in precisely the most appropriate moments (time of the day, of the month)?

It would:

  1. make your life so much easier
  2. improve your overall user experience 

As a company, by leveraging predictive analytics to deliver relevant user experiences only, you're winning your customers' loyalty.

You're simplifying their lives, after all...
 

4. Leveraging Machine Learning to Create Predictive User Experiences

What's the whole mechanism behind the creation of predictive user experiences?

How is the machine learning technology/tool leveraged to predict user behavior?

It's no more than a 3-step sequence:
 

  1. you first define the problem (using machine learning terms)
  2. gather data in a suitable format
  3. put together a model 
     

For instance, here's a machine-learning-based recommendation system deconstructed:
 

  • content-based recommendation: recommending items based on similar characteristics
  • collaborative filtering: recommending items/services based on other customers' preferences (customers with similar past choices)
     

Note: more often than not it's a mix of these 2 types of recommendation systems that you'll find.
 

5. Predictive UX: 4 Common Sense Principles to Consider
 

5.1. Simplify the UI: keep the most relevant design elements and meaningful content only.

Instead of forcing customers to make too many choices, to scan through chunks of content, go for a minimal interface! Trim down the “irrelevant fat” and keep the essential.

Leveraging machine learning and statistical techniques, you should know by then what's essential and meaningful in terms of information and functionality for your users.
 

5.2. Disrupt the all-too-familiar patterns now and then.

In other words: don't get trapped in the “experience bubble”, where you keep recommending the same familiar options and encourage the user to make the very same choices over and over again.

Consider adding disruptive layers, now and then, “tempting” them to try something new.
 

5.3. Avoid forcing those most relevant options on the user.

OK, so you have the data at hand, you're leveraging that machine learning algorithm that anticipates:
 

  • what the user needs
  • what the user wants
  • what the user's going to do next
     

That doesn't mean you should overlook that:

It's always the customer who makes the final choice!

So give them enough options to choose from! Put him/her in full control of the final decision-making process!
 

5.4. Create predictive user experiences that are helpful, not annoying

In other words: when it comes to push notifications, choose the most appropriate time (if you're a retailer, you can't possibly anticipate that anyone would read about your promotion during work hours).
 

6. Predictive UX in Drupal: What Makes Drupal 8 the Perfect Fit?

There are some particular characteristics that make Drupal the perfect “teammate” for a machine learning tool:
 

  • its content management features and (huge amounts of) data storing and maintaining capabilities
  • its API-first approach, which makes third-party integrations conveniently easy; you can integrate Drupal with any system providing an API and an interface 
  • the “decoupled architecture” approach, which enables Drupal to serve content in various ways
     

Now, just think about it:

Analyzing that huge volume of data, stored on your Drupal website, and leveraging it, using a machine learning tool, to create anticipated user experiences! Think of all the emerging possibilities of implementing predictive UX in Drupal!
 

7. And How Do You Implement Predictive UX in Drupal?

First of all: choose your machine learning tool.

Let's say you will have chosen to go with Apache PredictionIO for obvious reasons:
 

  • it's open source
  • it “spoils” you with a set of customizable templates
  • a full machine learning stack
  • the tool's also conveniently easy to deploy as a web service
     

Now, let's have a close look at the Drupal & machine learning tool interaction:

The Event Server collects data from your Drupal app/website — provides it to the Engine —this one reads it — it uses it to put together a predictive model, by leveraging machine learning​​​​ — one that it then sends over to your Drupal app/website — upon a query via REST

Et voila! A predictive result is sent to your Drupal website or application, one that will power a predictive user experience.

Now, since we've been talking about the event data that's being sent from Drupal to the machine learning tool and further “exploited” for building that predictive model, you should know that it comes in “2 flavors”:
 

  1. explicit: the user will have already rated or bought an item, so you have explicit information about his/her preferences 
  2. implicit: the already available information is being leveraged, since there's no past choice or user feedback to analyze for anticipating his/her needs
     

The END! What do you... predict:

Will we be witnessing more and more Drupal 8 websites leveraging predictive UX and, implicitly, machine learning technology, to create anticipated user experiences?
 

Photo by David Travis on Unsplash.

Nov 02 2018
Nov 02

What's your favorite tool for creating content layouts in Drupal? Paragraphs, Display Suite, Panelizer or maybe Panels? Or CKEditor styles & templates? How about the much talked about and yet still experimental Drupal 8 Layout Builder module?

Have you "played” with it yet?

As Drupal site builders, we all agree that a good page layout builder should be:
 

  1. flexible; it should empower you to easily and fully customize every single node/content item on your website (not just blocks)
  2. intuitive, super easy to use (unlike "Paragraphs", for instance, where building a complex "layout", then attempting to move something within it, turns into a major challenge)
     

And it's precisely these 2 features that stand for the key goals of the Layout Initiative for Drupal

To turn the resulting module into that user-friendly, powerful and empowering page builder that all Drupal site builders had been expecting.

Now, let's see how the module manages to “check” these must-have strengths off the list. And why it revolutionizes the way we put together pages, how we create, customize and further edit layouts.

How we build websites in Drupal...
 

1. The Context: A Good Page Builder Was (Desperately) Needed in Drupal

It had been a shared opinion in the open source community:

A good page builder was needed in Drupal.

For, even if we had a toolbox full of content layout creation tools, none of them was “the One”. That flexible, easy to use, “all-features-in-one” website builder that would enable us to:
 

  • build complex pages, carrying a lot of mixed content, quick and easy (with no coding expertise)
  • fully customize every little content item on our websites and not just entire blocks of content site-wide
  • easily edit each content layout by dragging and dropping images, video content, multiple columns of text and so on, the way we want to
     

Therefore, the Drupal 8 Layout Builder module was launched! And it's been moved to core upon the release of Drupal 8.6.

Although it still wears its “experimental, do no use on production sites!” type of “warning tag”, the module has already leveled up from an “alpha” to a more “beta” phase.

With a more stable architecture now, in Drupal 8.6, significant improvements and a highly intuitive UI (combined with Drupal's well-known content management features) it stands all the chances to turn into a powerful website builder.

That great page builder that the whole Drupal community had been “craving” for.
 

2. The Drupal 8 Layout Builder Module: Quick Overview

First of all, we should get one thing straight:

The Drupal 8.6. Layout Builder module is Panelizer in core!

What does it do?

It enables you, the Drupal site builder, to configure layouts on different sections on your website.

From selecting a predefined layout to adding new blocks, managing the display, swapping the content elements and so on, creating content layouts in Drupal is as (fun and) intuitive as putting Lego pieces together.

Also, the “content hierarchy” is more than logical:
 

  • you have multiple content sections
  • you get to choose a predefined layout or a custom-design one for each section
  • you can place your blocks of choice (field blocks, custom blocks) within that selected layout
     

Note: moving blocks from one section to another is unexpectedly easy when using Layout Builder!
 

3. Configuring the Layout of a Content Type on Your Website

Now, let's imagine the Drupal 8 Layout Module “in action”.

But first, I should point out that there are 2 ways that you could use it:
 

  1. to create and edit a layout for every content type on your Drupal website
  2. to create and edit a layout for specific, individual nodes/ pieces of content
     

It's the first use case of the module that we'll focus on for the moment.

So, first things first: in order to use it, there are some modules that you should enable — Layout Builder and Layout Discovery. Also, remember to install the Layout Library, as well!

Next, let's delve into the steps required for configuring your content type's (“Article”, let's say) display:
 

  • go to Admin > Structure > Content types > Article > Manage Display
  • hit the “Manage layout” button
     

… and you'll instantly access the layout page for the content type in question (in our case, “Article”).

It's there that you can configure your content type's layout, which is made of:
 

  • sections of content (display in 1,2, 3... columns and other content elements)
  • display blocks: tabs, page title...
  • fields: tags, body, title
     

While you're on that screen... get as creative as you want:
 

  • choose a predefined layout for your section —  “Add section” —  from the Settings tab opening up on the right side of the screen
  • add some blocks —  “Add block”; you'll then notice the “Configure” and “Remove” options “neighboring” each block
  • drag and drop the layout elements, arranging them to your liking; then you can click on either “Save Layout” or “Cancel Layout” to save or cancel your layout configuration
     

And since we're highly visual creatures, here, you may want to have a look at this Drupal 8 Layout Builder tutorial made by Lee Rowlands, one of the core contributors.

In short: this page builder tool enables you to customize the layout of your content to your liking. Put together multiple sections — each one with its own different layout —  and build website pages, carrying mixed content and multiple layouts, that fit your design requirements exactly.
 

4. Configuring and Fully Customizing the Layout of a Specific Node...

This second use case of the Drupal 8 Layout Builder module makes it perfect for building landing pages.

Now, here's how you use it for customizing a single content type:
 

  • go to Structure>Content types (choose a specific content type)
  • click “Manage display” on the drop-down menu 
  • then click the “Allow each content item to have its layout customized” checkbox
  • and hit “Save”
     

Next, just:
 

  • click the “Content” tab in your admin panel
  • choose that particular article that you'd like to customize
  • click the “Layout” tab
     

… and you'll then access the very same layout builder UI.

The only difference is that now you're about to customize the display of one particular article only.

Note: basically, each piece of content has its own “Layout” tab that allows you to add sections, to choose layouts. 

Each content item becomes fully customizable when using Drupal 8 Layout Builder.
 

5. The Drupal 8.6. Layout Builder vs Paragraphs

“Why not do everything in Paragraphs?" has been the shared opinion in the Drupal community for a long time.

And yet, since the Layout Builder tool was launched, the Paragraphs “supremacy” has started to lose ground. Here's why:
 

  • the Layout builder enables you to customize every fieldable entity's layout
  • it makes combining multiple sections of content on a page and moving blocks around as easy as... moving around Lego pieces 
     

By comparison, just try to move... anything within a complex layout using Paragraphs:
 

  • you'll either need to keep your fingers crossed so that everything lands in the right place once you've dragged and dropped your blocks
  • or... rebuild the whole page layout from scratch
     

The END!

What do you think:
 

Does Drupal 8 Layout Builder stand the chance to compete with WordPress' popular page builders?


To “dethrone” Paragraphs and become THAT page layout builder that we've all been expected for? Or do you think there's still plenty of work ahead to turn it into that content layout builder we've all been looking forward to?

Oct 16 2018
Oct 16

[embedded content]

Video sections

Bootstrap is a powerful front-end framework which helps you build sites and web applications faster by offering prebuilt CSS and JavaScript components.

Some of the CSS components it offers are a grid system, buttons, navigation, jumbotron and so much more. On the JavaScript side, it comes with a few useful items such as a modal, collapsible divs, carousel to name a few. Read the Bootstrap documentation to find out more.

Bootstrap in Drupal

If you search for “drupal bootstrap” in Google, the first result will likely be the Bootstrap theme. This theme is the most popular on drupal.org with over 150,000 reported installs. But as of this writing, the theme only supports Bootstrap 3, not version 4 which is the latest.

So if you want to use Bootstrap 4 you’ll need to use another theme until the Bootstrap theme supports version 4.

In this tutorial, you’ll learn how to configure and use the Drupal 8 version of the Barrio theme which uses Bootstrap 4.

Getting Started

Before we can begin, go download the Barrio theme.

Using Composer:

composer require drupal/bootstrap_barrio

Create Sub-theme

The recommended way of using a theme in Drupal is to first create a sub-theme. You’ll never want to use Barrio directly. If you need to customize how things look, i.e., change CSS and override templates, then do it in the sub-theme and not Barrio itself, this way you can keep Barrio up-to-date.

If you want to learn more about sub-themes in general. Check out the Creating a Drupal 8 sub-theme, or sub-theme of sub-theme documentation page.

Let’s now look at creating a sub-theme which pulls Bootstrap via a CDN, this is the quickest and easiest way to get started.

Create CDN Sub-theme

1. Go to the bootstrap_barrio directory and copy the subtheme directory into /themes.

2. Change the subtheme directory name to anything you want, I’ll change it to barrio_custom (everywhere you see barrio_custom, use your actual sub-theme name).

Now we need to go through the sub-theme and replace bootstrap_barrio_subtheme to barrio_custom.

3. Rename the following files:

  • _bootstrap_barrio_subtheme.theme -> barrio_custom.theme
  • bootstrap_barrio_subtheme.info.yml -> barrio_custom.info.yml
  • bootstrap_barrio_subtheme.libraries.yml -> barrio_custom.libraries.yml
  • config/install/bootstrap_barrio_subtheme.settings.yml -> config/install/barrio_custom.settings.yml
  • config/schema/bootstrap_barrio_subtheme.schema.yml -> config/schema/barrio_custom.schema.yml

4. Open  barrio_custom.info.yml change the name of the sub-theme and rename the libraries section from bootstrap_barrio_subtheme to barrio_custom.

From this:

To this:

5. Open barrio_custom.theme (formerly_bootstrap_barrio_subtheme.theme) and change the function name:

// From:
bootstrap_barrio_subtheme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)
// To:
barrio_custom_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)

6. Open config/schema/barrio_custom.schema.yml (formerly config/schema/bootstrap_barrio_subtheme.schema.yml) and change the following:

# from:
bootstrap_barrio_subtheme.settings:
# to:
barrio_custom.settings:

7. Open color/color.inc file and change the following:

// From:
'preview_library' => 'bootstrap_barrio_subtheme/color.preview',
// To:
'preview_library' => 'barrio_custom/color.preview',

8. Last but not least, open js/global.js and change the following:

// Change this:
Drupal.behaviors.bootstrap_barrio_subtheme = {
// To this:
Drupal.behaviors.barrio_custom = {

Now that you’ve created a sub-theme go to the Appearance page in your Drupal site and install your sub-theme by clicking on “Install and set as default”.

The front-end of your Drupal site should look something like the image below:

The actual Bootstrap 4 library is being loaded via a CDN which is the default behavior in the Barrio sub-theme and that’s why everything works without downloading the library locally. Of course, this can be changed and we’ll look at how to do that next.

Download Local Version of Bootstrap

In the sub-theme we created above, we’re pulling in Bootstrap through the CDN. Let’s configure it now to use a local version of Bootstrap.

1. Go to the Download page and click on Download in the “Compiled CSS and JS” section.

2. Extract the zipped file into /libraries directory in your Drupal site and rename the folder to bootstrap. 

The path to the css and js folder should be /libraries/bootstrap/css and /libraries/bootstrap/js.

3. Open up *.libraries.yml in your sub-theme, mine is called barrio_custom.libraries.yml and change the bootstrap section like so:

From this:

bootstrap:
  js:
    /libraries/popper/popper.min.js: {}
    /libraries/bootstrap/dist/js/bootstrap.min.js: {}
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}

To this:

bootstrap:
  js:
    /libraries/bootstrap/js/bootstrap.bundle.min.js: {}
  css:
    component:
      /libraries/bootstrap/css/bootstrap.min.css: {}

Bootstrap 4 has two dependencies Popper and jQuery. Drupal comes with jQuery already and to save a bit of effort will use the bootstrap.bundle.min.js which comes with Popper whereas, bootstrap.min.js doesn’t.

4. Open the *.info.yml file in your sub-theme and change barrio_custom/bootstrap_cdn under libraries to barrio_custom/bootstrap.

From this:

libraries:
  - barrio_custom/bootstrap_cdn
  - barrio_custom/global-styling

To this:

libraries:
  - barrio_custom/bootstrap
  - barrio_custom/global-styling

5. Rebuild the site cache by running drush cr or drupal cache:rebuild or by going to /admin/config/development/performance and clicking on “Clear all caches”.

If the JavaScript or CSS file isn’t loading or the site looks broken. Make sure the paths in the *.libraries.yml file is correct and that the Bootstrap library is correctly in the /libraries directory.

Theme Settings

The Barrio theme allows you to configure a lot through the Settings page, which you can access by clicking on the Settings link after you’ve activated the theme. I won’t go through absolutely everything, however, I’ll mention some important settings.

To access the settings page, click on Appearance in the toolbar and Settings next to the installed theme.

Layout Settings

From the Layout tab, you can configure aspects of the layout such as the type of container, i.e., fluid or non-fluid and how wide the sidebar columns should be.

If you select “Fluid container”, then your website will be full-width with gutters on each side.

The “Sidebar first layout” and “Sidebar second layout” let you configure the width of each sidebar.

Components Settings

From the Components tab, you can configure the buttons and the navbar.

The most important section in this tab is the navbar. It lets you configure it without having to modify any CSS or SASS files.

Affix Settings

In this section, you can configure components like the navbar or sidebar to be affixed to the top when scrolling.

If you check “Affix navbar”, it’ll stick the navbar to the top as you scroll down the page.

Here’s an example:

Scroll Spy

In this area, you can configure the Scrollspy functionality in your Drupal Bootstrap site.

Fonts Settings

From the Fonts tab, you can configure what fonts will be used and icon set.

Colors

And finally, from the Colors tab, you can configure the color of the messages and how tables are displayed.

Color Scheme

One thing I do like about Barrio which is different to the Bootstrap theme is the ability to change the color scheme directly in the theme.

Now, this isn’t groundbreaking and Drupal’s had this ability for a long time, but being able to easily change colors without modifying CSS or compiling SASS is a nice touch.

However, there is a limitation on which colors can be changed. You can’t change Bootstrap colors: primary, secondary, success, danger, warning or info from the color scheme section.

So that is a quick overview of the settings page. My guess is you’ll spend most of your time configuring the navigation bar and grid layout. But do spend some time familiarizing yourself with the options available.

Bootstrap Library

Another way to load Bootstrap is by using the Bootstrap Library module. One of its benefits is the ability to change which version of the CDN library you want to use without modifying the *.libraries.yml file in your sub-theme.

1. Start things off by first downloading the module and then installing it.

composer require drupal/bootstrap_library

2. Go to the Settings page of your sub-theme and scroll to the bottom and from “Load library” choose how you want the library to be loaded.

  • CDN: This will load Bootstrap through a CDN.
  • Local non minimized (development): This will use the non minified version stored in the /libraries directory
  • Local minimized (production): This will use the minified version stored in the /libraries directory.

As long as you’ve downloaded Bootstrap and added it into the /libraries directory as explained early, the “Local non minimized” and “Local minimized” should work.

Bootstrap Library Settings

The Bootstrap Library module comes with a configuration page, just go to Configuration and click on Bootstrap Library.

If you choose None from “Load library” on the theme settings page, then whichever way Bootstrap is configured to load from this page is what will be implemented.

From this “Load Boostrap from CDN” section, you can choose if a CDN is used and which version. If you prefer to load Bootstrap locally, then select “Load locally”.

Then from “Minimized, Non-minimized, or Composer version” select which local version you want to use.

Form “Theme visibility” select which themes will have Bootstrap loaded.

Make sure you select your theme from the multi-select or the library will not load and your site will be broken.

From the “Activate on specific URLs” section, you can include or exclude the library on specific paths.

From the “Files settings” you can choose if you want CSS and/or JavaScript files loaded.

If you decide to use Bootstrap Library to load the library then make sure your sub-theme isn’t loading the library itself because you’ll end up loading the library twice.

Remove any library declarations from the *.info.yml file in your sub-theme. This will stop your sub-theme from loading the library.

Rebuild the site cache and you’re good to go.

Summary

The current state of Bootstrap in Drupal 8 is this. If you need to use Bootstrap 3, then use the Bootstrap theme. If, however, you want to use Bootstrap 4 then look at Barrio, Bootstrap4BootBase or Radix.

If you know of any good Bootstrap 4 base themes then please leave a comment.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Oct 02 2018
Oct 02

[embedded content]

Watch other videos on our YouTube channel. Click here to subscribe.

I was recently looking at all the default views that come with Drupal 8. For people who don’t know, the Views module is part of Drupal 8 core. In Drupal 7 and below it’s the most installed module so during Drupal 8’s development it was decided to move Views into core.

During my exploration into all of the default Views, I noticed that in the People (User) view there was a filter called “Combine fields filter”.

Want to learn about Views? Read Build a Blog in Drupal 8: Using Views or watch it as part of our FREE Drupal 8 Site Building course.

Now just a quick side note, if you’re new to Drupal and Views I’d highly recommend you spend time walking through all of the default views and see how they were configured. You can learn a lot just by seeing how things are set up.

The “Combine fields filter” does a pretty cool thing. It allows you to search across multiple fields or put another way, it allows you to combine fields and then filter by their combined value.

How to use “Combine Fields Filter”

Using this filter is relatively straightforward. Just click on Add in the Filter criteria field-set. Search for the filter by name or select Global from the Category drop-down.

When configuring the filter, you can select which fields you want to search from the “Choose fields to combine for filtering” drop-down.

If you want to see what the actual query looks like, turn on “Show the SQL query” from the Settings page (admin/structure/views/settings).

Then in the preview area, you should see the query that gets generated.

The above example is from the “People (User)” view.

Summary

If you want to add basic filtering across fields to your views, then this is the way to go. It’s useful for those custom admin pages which we create to help editors manage content. If you’re looking for something more advanced such as keyword searching, then look at using Search API.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Sep 28 2018
Sep 28

Just imagine... automatic updates in Drupal core.

Such a feature would put an end to all those never-ending debates and ongoing discussions taking place in the Drupal community about the expectations and concerns with implementing such an auto-update system.

Moreover, it would be a much-awaited upgrade for all those users who've been looking for (not to say “longing for") ways to automate Drupal core and modules for... years now. Who've been legitimately asking themselves:

“Why doesn't Drupal offer an auto-update feature like WordPress?”

And how did we get this far? From idea to a steady-growing initiative?
 

  1. first, it was the need to automate Drupal module and security updates
  2. then, the issues queues filled with opinions grounded in skepticism, valid concerns and high hopes started to “pile up” on Drupal.org,
  3. then, there was Dries' keynote presentation at Drupalcon Vienna in 2017, raising awareness around the need to re-structure Drupal core in order to support a secure auto-update system
  4. … which grew into the current Auto Update Initiative
  5. that echoed, recently, at Drupal Europe 2018, during the “Hackers Automate, but the Drupal Community still Downloads Modules from Drupal.org” session
     

Many concerns and issues have been pointed out. Many questions have been added to the long list.

Yet, one thing's for sure:

There still is a pressing, ever-growing need for an auto-update feature in Drupal...

So, let me try to answer my best to some of your questions regarding this much-awaited addition to Drupal core:
 

  • What's in it for you precisely? How will an auto-update pre-built feature benefit you? 
  • Does the user persona profile suit you, too? Is it exclusively low-end websites that such a feature would benefit? Or are enterprise-level, company websites targeted, as well?
  • What are the main concerns about this implementation?
     

1. The Automatic Updates Initiative: Goal & Main Challenges 

Let's shift focus instead and pass in review the inconveniences of manually installing updates in Drupal:
 

  • it's time-consuming
  • it's can get risky if you don't know what you're doing
  • it can be an intimidatingly complex process if you have no dedicated Drupal support & maintenance team to rely on
  • it can get quite expensive, especially for a small site or blog owner
     

See where I'm heading at?

This initiative's main objective is to spare Drupal users of all these... inconveniences when it comes to updating and maintaining their websites. Inconveniences that can easily grow into reasons why some might get too discouraged to adopt Drupal in the first place.

The goal is to develop an auto-update mechanism for Drupal core conceptually similar to those already implemented on other platforms (e.g. WordPress).

And now, let's dig up and expose the key challenges in meeting this goal:
 

  • enabling update automation in Drupal core demands a complete re-engineering of the codebase; it calls for a reconstructing of its architecture and code layout in order to support a perfectly secure auto-update system 
  • such an implementation will have a major impact on the development cycle itself, causing unwanted disruption
  • such a built-in auto-update feature could get exploited for distributing and injecting malware into a whole mass of Drupal websites
     

2. Automatic Updates in Drupal: Basic Implementation Requirements 

What would be the ideal context for implementing such a perfectly secure auto-update system? 

Well, its implementation would call for:
 

  • multiple (up to date) environments
  • released updates to be detected automatically and instantly
  • an update pipeline for quality assurance
  • existing automate tests with full coverage
  • a development team to review any changes applied during the update process 
     

3. How Would These Auto-Updates Benefit You, the Drupal User?

Let's see, maybe answering these key questions would help you identify the benefits that you'd reap (if any):
 

  • is your Drupal website currently maintained by a professional team?
  • has it been a... breeze for you so far to cope with Drupal 8's release cycle (one new patch each month and a new minor release every 6 months sure claim for a lot of your time)?
  • have you ever got tangled up in Composer's complexities and a whole load of third-party libraries when trying to update your Drupal 8 website?
  • did you run the Drupalgeddon update fast enough?
  • have you been secretly “fancying” about a functionality that would just update Drupal core and modules, by default, right on the live server?
     

To sum up: having automatic updates in Drupal core would keep your website secured and properly maintained without you having to invest time or money for this.
 

4. Drupal Updating Itself: Main Concerns

And concerns increase exponentially as the need for an update automation in Drupal rises (along with the expectations).

Now, let's outline some of the most frequently expressed ones:
 

  • there is no control over the update process, no quality assurance pipeline; basically, there's no time schedule system enabling you to test any given update, in a development environment, before pushing it live
  • there's no clearly defined policy on what updates (security updates only, all updates, highly critical updates etc.) should be pushed
  • with Drupal updating itself, rolling back changes wouldn't be possible anymore (or discouragingly difficult) with no GIT for version control
  • again: automatic updates in Drupal could turn into a vulnerability for hackers to exploit for a mass malware attack 
  • there's no clear policy regarding NodeJS, PHP and all the JS libraries in Drupal 8, all carrying their own vulnerabilities, too
  • it's too risky with all those core and module conflicts and bugs that could break through
  • such a feature should be disabled by default; thus, it would be every site owner's decision whether to turn it on or not
  • could this auto-update system cater to all the possible update workflows and specific behaviors out there? Could it meet all the different security requirements?
     

So, you get the point: no control over the update pipeline and no policy for handling updates are the aspects that concern developers the most.
 

6. Does It Cater for Both Small & Enterprise-Level Websites' Needs? 

There is this shared consensus that implementing automatic updates in Drupal core would:
 

  1. not meet large company websites' security requirements; that it would not fit their specific update workflows
  2. benefit exclusively small, low-end websites that don't benefit from professional maintenance services
     

Even the team behind the automatic updates initiative have prioritized low-end websites in their roadmap.

But, is that really the case?

Should this initiative target small websites, with simple needs and writable systems, that rarely update and to overlook enterprise-level websites by default?

Or should this much-wanted functionality be adjusted so that it meets the latter's needs, as well? 

In this case, the first step would be building an update pipeline that would ensure quality.

What do you think?
 

7. How About Now?"What Are My Options for Automating Updates in Drupal?"

In other words: what are the currently available solutions if you want to automate the Drupal module and security updates? 
 

7.1. You Can Use Custom Scripts to Automate Updates

… one that's executed by Jerkins or another CI platform. 

Note: do bear in mind that properly maintaining a heavy load of scrips and keeping up with all the new libraries, tools, and DevOp changes won't be precisely a “child's play”. Also, with no workflow and no integrated tools, ensuring quality's going to be a challenge to consider.
 

7.2. You Can Opt for a Drupal Hosting Provider's Built-In Solution

“Teaming up” with a Drupal hosting provider that offers you automated updates services, too, is another option at hand.

In this respect, solutions for auto-updating, such as those provided by Pantheon or Acquia, could fit your specific requirements. 

Note: again, you'll need to consider that these built-in solutions do not integrate with your specific DevOps workflows and tools.
 

And my monologue on automatic updates in Drupal ends here, but I do hope that it will grow into a discussion/debate in the comments here below:

Would you turn it on, if such a feature already existed in Drupal core?

  1. Definitely yes
  2. No way
  3. It depends on whether...
Sep 21 2018
Sep 21

The media management experience had been one of the well-known sources of frustration for Drupal content editors for a long time. For, let's face it: Drupal's out-of-the-box media support was just... basic. But not anymore: there are new exciting features for media handling in Drupal 8.6.0 that will dramatically change the way you manage your media assets on your Drupal website!

Now, let's take a sneak peek at these most-anticipated media handling features that Drupal 8.6.0 comes equipped with:
 

  • adding media from a remote source
  • adding various types of media
  • embedding Youtube and Vimeo videos in the content (via URL)
  • easily accessing and reusing the existing media
  • uploading new media types right out of the box
     

And this is almost... overwhelming:

From almost no built-in media support in Drupal, for so many years, to a whole set of modern, powerful media management options now in Drupal 8.6.0.

But let's not ramble about this topic anymore and dive right in! Into the pile of new features meant to enhance the whole media management experience in Drupal:
 

But First: An Update on The Progress of the Media in Drupal 8 Initiative

The main goal of this media initiative was to:

Add a rich media support to Drupal 8.

One that would empower the content editors to easily reuse existing media assets, add new media entities and to overall gain more control (and meta information) over their media.

And there are 3 core milestones that we can trace while tracking the progress of this initiative for Drupal 8:
 

  1. adding the experimental Media module to Drupal 8.4 in late 2017
  2. leveling up this module from experimental to stable phase in Drupal 8.5.0
  3. turning it into the standard way of storing media in Drupal 
     

Moreover, starting with Drupal 8.6.0 a new key module for handling media has been added to core — Media Library — along with a few more exciting options:
 

  • quick access to the existing media assets
  • oEmbed support
  • a new media type: remote video content
     

Quite a “leap” forward, to a great media management experience in Drupal, I would say...
 

2. Welcome a New Media Type in Drupal 8: Remote Video

Let us list the 4 media types that you could add to your site's content up to Drupal 8.6.0:
 

  1. file
  2. image
  3. video
  4. audio
     

OK, now it's time you welcomed a new media type to the group: remote video!

Basically, as a content editor you're now able to add videos from remote sources, as well — Vimeo and Youtube — via their URLs.

Handling Media in Drupal 8.6.0- New Media Type: Remote Video

In short: you're no longer constrained to settle for the default media types in Drupal 8. No sir, now you get to create new custom ones mentioning their media sources.

Summing up: embedding new media to your website content is nothing but a two-step process: Content-Add Media.

Handling Media in Drupal 8.6.0- Add New Media Type


3. Reusing Media Is Now Possible: Media Library

One of the much-awaited features for media handling in Drupal 8.6.0 had been reusable media.

Well, here it is now: Media Library! It's where you can save and store all your media assets to be further reused whenever needed.

Note: do keep in mind that this an experimental module and that you'll also need to enable the Media module first things first.

“And how does it work more precisely?”
 

  1. while in your content edit screen
  2. just browse through all the media assets stored in your Media Library
  3. select the one you need
  4. and simply “inject” it into your page
     

Note: it's the “Media library” widget, added to the Media field, that enables you to scan through all your media entities straight from the content edit screen.

Handling Media in Drupal 8.6.0- Media Library Widget


4. The New “Media” Field: A Quick Way to Embed Media in Your Content

Handling media in Drupal 8.6.0 is as simple as... adding a new field — “Media” —  to the content type in question (be it news, blog post, article and so on).

Handling Media in Drupal 8.6.0- Add a New Media Field

Once the new field is added on, just go through the 5 media types available in Drupal 8.6.0 and select the one you need to embed.

Next, you can simply integrate it into your content, while in your edit screen, positioning it to your liking.
 

5. New Media Handling in Drupal 8.6.0: Youtube & Vimeo Embeds

A new media management tool that significantly improves the whole content editing experience in Drupal.

You're able to embed remote videos from Youtube and Vimeo via URL, thanks to the now added oEmbed media support.

“How precisely?” Basically, you simply:
 

  1. add that new “Media” field to your content type, as previously stated
  2. select the “Remote Video” option from the “Media Type” drop-down menu
  3. enter your video's URL in the “Video URL” field, while in your “Add Remote Video” screen
  4. and click “Save”
     

And voila: you'll have your remote video integrated into your content!

The END!

As Steve Burge from OSTraining would say:

“Finally we're getting somewhere with media in Drupal!”  

What do you think about the new features for media handling in Drupal 8.6.0? What other options and tools are there on your wishlist?

To be able to embed remote videos right from the node create page, maybe? Or to have other video platforms, as well, supported in Drupal?

Sep 18 2018
Sep 18

A slick new feature was recently added to Drupal 8 starting with the 8.5 release  — out of the box off-canvas dialog support.

Off-canvas dialogs are those which slide out from off page. They push over existing content in order to make space for themselves while keeping the existing content unobstructed, unlike a traditional dialog popup. These dialogs are often used for menus on smaller screens. Most Drupal 8 users are familiar with Admin Toolbar's use of an off-canvas style menu tray, which is automatically enabled on smaller screens.

Admin toolbar off-canvas

Drupal founder Dries posted a tutorial and I finally got a chance to try it myself.

In my case, I was creating a form for reviewers to submit reviews of long and complicated application submissions. Reviewers needed to be able to easily access the entire application while entering their review. A form at the bottom of the screen would have meant too much scrolling, and a traditional popup would have blocked much of the content they needed to see. Therefore, an off-canvas style dialog was the perfect solution. 

Build your own

With the latest updates to Drupal core, you can now easily add your own off-canvas dialogs.

Create a page for Your off-canvas content 

The built in off-canvas integration is designed to load Drupal pages into the dialog window (and only pages as far as I can tell). So you will need either an existing page, such as a node edit form, or you'll need to create your custom own page through Drupal's routing system, which will contain your custom form or other content. In my case, I created a custom page with a custom form.

Create a Link

Once you have a page that you would like to render inside the dialog, you'll need to create a link to that page. This will function as the triggering element to load the dialog.

In my case, I wanted to render the review form dialog from the application full node display itself. I created an "extra field" using hook_entity_extra_field_info(), built the link in hook_ENTITY_TYPE_view(), and then configured the new link field using the Manage Display tab for my application entity. 

/*
 * Implements hook_entity_extra_field_info().
 */
function custom_entity_extra_field_info() {
  $extra['node']['application']['display']['review_form_link'] = array(
    'label' => t('Review Application'),
    'description' => t('Displays a link to the review form.'),
    'weight' => 0,
  );
  return $extra;
}

/**
 * Implements hook_ENTITY_TYPE_view().
 */
function custom_node_view(array &$build, Drupal\Core\Entity\EntityInterface $entity, Drupal\Core\Entity\Display\EntityViewDisplayInterface $display, $view_mode) {
  if ($display->getComponent('review_form_link')) {
    $build['review_link'] = array(
      '#title' => t('Review Application'),
      '#type' => 'link',
      '#url' => Url::fromRoute('custom.review_form', ['application' => $entity->id()]),
    );
  }
}

Add off-canvas to the link

Next you just need to set the link to open using off-canvas instead of as a new page.

There are four attributes to add to your link array in order to do this:

      '#attributes' => array(
        'class' => 'use-ajax',
        'data-dialog-renderer' => 'off_canvas',
        'data-dialog-type' => 'dialog',
        'data-dialog-options' => '{"width":"30%"}'
      ),
      '#attached' => [
        'library' => [
          'core/drupal.dialog.ajax',
        ],
      ],

The first three attributes are required to get your dialog working and the last is recommended, as it will let you control the size of the dialog.

Additionally, you'll need to attach the Drupal ajax dialog library. Before I added the library to my implementation, I was running into an issue where some user roles could access the dialog and others could not. It turned out this was because the library was being loaded for roles with access to the Admin Toolbar.

The rendered link will end up looking like:

<a href="https://www.zivtech.com/review-form/12345" class="use-ajax" data-dialog-options="{"width":"30%"}" data-dialog-renderer="off_canvas" data-dialog-type="dialog">Review Application</a>

And that's it! Off-canvas dialog is done and ready for action.

off-canvas-demo-gif
Sep 13 2018
Sep 13

The marketing landscape is vastly different than it was when Drupal 7 was released in 2011. Since then, there has been a shift, placing the marketing team in the driver’s seat more often and almost always involved in the CMS decision. In this post, we’ll outline some of the ways you can up your SEO game with Drupal 8.

Traditional SEO is dead.

No longer will well-placed keywords alone get you to the top of the SERP ranks. Content is still King in the world of marketing and it’s what helps you improve your SEO.

Every algorithm change Google has made has one thing in common: it aims to provide the best content based on what it "thinks" the user is trying to find. In other words, - what is the users intent. If you want your rankings to stick past the next update, don't try to cheat the system. Attract your prospects with informative, entertaining pieces that they can use to take action. And avoid no value posts that are keyword stuffed with your industry and the word "best" 100 times. Google can see through it and so can all of your users.

That said, there are a few other factors that are critical to keeping your rankings high that can’t be ignored including quick load times and mobile-friendliness. Drupal 8 is built with several of these factors in mind to help us make needed improvements quickly and effectively.

Mobile First Mentality

Drupal 8 is created with responsive design capabilities built in, so you can begin to address any problems immediately. That’s not to say all of your responsive problems will be solved. Content editors will still need to think through their content and imagery, themers will still need to do configuration to establish things like breakpoints, etc. but Drupal 8 will set you on the right path, giving you and your team many of the tools you need.

You’ll also have the option to choose different images and content for desktop and mobile versions right from the WYSIWYG editor, making it easier to see the differences for every piece of content when you add it and before you publish. This means a solid visual of both versions in real-time for faster publishing and peace of mind knowing exactly what your users experience on any device. 

The Need for Speed

Another big factor that could affect your rankings is speed on both desktop and mobile. Google places such high importance that they’ve given you a PageSpeed Insights test to show where and how your website is slowing visitors down. Drupal 8 is “smart” in that it caches all entities and doesn’t load JavaScript unless it has to. This means the same content won’t be reloaded over and over and instead can be loaded quickly from the cache.

Drupal 8 also uses industry-leading caching technology to allow updated content to be served fresh to a client, while preserving the cache on content that hasn’t changed. So, after your visitors come to your website once, they won’t have to wait for all content to load each time, making load times much faster.
Another way Drupal 8 improves speed is through feature velocity. Because so much new functionality is built into Drupal 8 core, creating and publishing new dynamic content experiences is significantly faster than in Drupal 7. A blog post that features dynamically updated data, relevant to and powered by your content can be built in the UI in Drupal 8, something that in Drupal 7 would have taken custom development and several modules.

Responsive design is a must-have in today’s digital landscape and speeding up your website on both desktop and mobile is a surprisingly effective way to contribute to your SEO efforts. In short, if you’re marketing team is focused (as you should be) on top rankings, Drupal 8 provides many of the tools to make that happen. 

Accessibility = Key for Search

The release of D8 marked a big push toward improving web accessibility, including: 

  • Overall community commitment to accessibility 
  • Technical features for improved accessibility like controlled tab order and aural alerts 
  • All features conform with the World Wide Web Consortium (W3C) guidelines

This is important because, as we know, the relationship between web accessibility and SEO is closely intertwined.

Drupal 8 SEO Modules

Here are some top Drupal 8 SEO Modules to use when optimizing your site. 

  1. Pathauto - helps save you time from manually having to create URL path/aliases.
  2. Metatag - allows you to automatically provide structured metadata, aka "meta tags", about a website.
  3. Sitemap - provides a site map that gives visitors an overview of your site. It can also display the RSS feeds for all blogs and categories.
  4. Redirect - Almost every new site needs to incorporate 301 redirects for old page URLs. This gives site admins an easy interface for creating those redirects in Drupal.
  5. Google Analytics - This simple module allows site admins the ability to easily configure Google Analytics in Drupal.
  6. Easy Breadcrumbs - uses the current URL (path alias) and the current page's title to automatically extract the breadcrumb's segments and its respective links. 
  7. SEO Checklist - 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. 

Conclusion

Drupal’s content management system is perfectly structured for search optimization and its core features support many of the critical SEO elements. But, SEO is only part of the story. In the next post, we’ll explore some of the do’s and don’ts and things to keep in mind once you’re on Drupal 8. 

Sep 12 2018
Sep 12

This week, thousands of members of the Drupal community have come together to share insights and to celebrate the power of open source. Embracing knowledge transfer, the Digital Transformation and Enterprise track stands out as accessible for developers, marketers and business owners alike. 

From ambition, through innovation and implementation, the Digital Transformation track is not strictly technology-focused; rather it looks to the real-world impact of Drupal and how its adoption can transform the nature of a business.

These presentations are accessible for ‘Beginners’ yet affecting the top-level of international organisations from across industries; here's a detailed overview of our top talks: 

  1. The Digital Revolution at Chatham House
  2. BASF: Fostering a Contribution Culture Against a Backdrop of Secrecy
  3. Future of the Open Web and Open Source

Chatham House is a not-for-profit, non-governmental organisation with a mission to help governments and societies build a sustainably secure, prosperous and just world.

Founded in 1920, as a discussion group to prevent future wars, Chatham House has vastly transformed to its current world-leading position as a global independent policy institute. But its digital presence has struggled to evolve quite so prosperously...


Building Evidence for Change:

An audience survey in 2005 revealed that the Chatham House website was inaccessible and uninspiring. People were unable to access key reports and information in the “dull and academic” website.

Between 2004-2009, Josie Tree, Head of Digital Strategy and Development, built a case for the digital transformation at Chatham House. Providing evidence of success, building positive relationships and harnessing the power of healthy competition all proved vital. Working towards a clearer strategy, the plan was to ‘stop fire-fighting and refocus on priorities’.

Fear of change, cultural barriers and the ongoing battle for budget all hold back innovation; but Josie recognises that crisis can be an opportunity.

 Former Chatham House Website 2004The Chatham House Website in 2004

 

Why Drupal?

The Chatham House website is content-heavy, with a set of complex requirements.

Drupal offers the editorial flexibility they need, along with an open source ethos that reflects the Chatham House commitment to knowledge transfer.

With a flexible platform and determined digital champions, the possibilities of Drupal are infinite. 
-Paul Johnson, Drupal Director

What’s more, as the Drupal Europe conference demonstrates, Drupal is well-supported, widely used and comes from an inumerable choice of development partners.

Drupal acts as an ideal springboard for success, with endless possibilities.

Just the Beginning:

Moving to Drupal was just the beginning for the long-term digital transformation of Chatham House. The question remained:

How could digital better support the Chatham House mission?

A new strategy focused on improving the reputation of Chatham House, prioritising outputs, investing in marketing efforts and utilising insights from feedback. As with any strategy, this was all to be underpinned by measuring success KPIs and reporting.

The next steps for Chatham House involve a full website redevelopment project, with a user-centric design. 

With plans to upgrade to Drupal 8 and implement a new CRM system, the digital transformation of Chatham House has been ongoing for many years and is still only just beginning

Collaboration is Key:

The clear takeaway from Josie’s speech was the vital importance of working together. Combining strategic partnerships with strong internal relationships has seen positive results for Chatham House (with website growth climbing from 40k to 260k monthly visits).

Digital champions throughout the organisation are placed to provide training in necessary skills and to break down the barriers of communication.

Finding the right external support is important, but the core digital team remain at the heart of the project. This team has grown from just a single person to a group of 12 over the last seven years. 

With growing collaboration between the research and digital outputs, Chatham House hope to enhance their international reach for a wider and more diverse range of audiences.

BASF are the world’s leading chemical company, combining economic success with social responsibility and environmental protection.

With over 115,000 employees and sales upwards of €64,000 million, BASF have always been sure to maintain their position at the cutting edge by carefully protecting their intellectual property.

 

The Translation Dilemma

As the global leader in their industry, it is vital that the entire BASF digital platform is accessible in over 50 local languages.

Unfortunately, to allow for this level of functionality, it became clear that each string of code needed to be crawled and translated individually.

Operating across multiple sites, in multiple languages, for multiple brands, the obstacle grew exponentially. With a collection of 146,880 strings, translation presented an unsustainable issue, in terms of time and budget.


The Solution:

As with most seemingly impossible scenarios, the solution is beautifully simple: BASF required a mechanism to flag and filter relevant strings. By focusing on those strings most urgently requiring translation, the overwhelming workload becomes manageable.

With the right connections we were led to the right solution, utilising the collective power of the Drupal community. 
- Paul Johnson, Drupal Director

 

From there, untranslated strings can be arranged by order of the most viewed, to ensure a priority system for the inevitable translation of any multilingual site. 

As any translations need to be maintained continually, this new interface streamlines the system for all future development. 

String Translation SolutionDrupal 8 String Translation Solution

 

Lessons learnt:

Despite concerns during the project, Drupal 8 was presented as the right choice once again. The flexible extensibility of the platform has enabled BASF to maintain competitive advantage.

Most importantly, BASF learnt that open source is not about saving money. The principles of open source enabled the shared problem to result in a mutual solution. The contribution made as part of the BASF project has dramatically increased Drupal’s core capabilities, for all.

The digital transformation here resulted in a tangible, code-based output, but also in a noticeable shift for the company’s mindset. Sometimes intellectual property can increase in value once it is shared.  

On Thursday morning, the Digital Transformation track will look to the future. The founder of Drupal, Dries Buytaert, alongside key players from Google, Mautic and the Drupal Association, will discuss life at the forefront of the digital industry.

This keynote session will address the opportunities, as well as the responsibility, that come with leading one of the largest open source communities in the world.

 

You can catch the Drupal Europe speeches live streamed on Youtube

Or, to find out how you can undertake your own digital transformation with Drupal, speak to one of our Digital Strategy and Consultancy experts. 

Speak to an expert

 

Sep 05 2018
Sep 05

[embedded content]

Drupal has got new media management functionality in 8.6. In the above video, I’ll demonstrate what new media functionality we have in Drupal 8.6.

Thanks to the Media in Drupal 8 Initiative, media handling in Drupal has improved with every new release. In 8.4 we got the experimental core Media module. Then in 8.5, the module moved from experimental to stable and now it’s the recommended way for storing media assets. Now in Drupal 8.6 we get a few extra goodies such as oEmbed support, a Remote video media type and a media library.

Grab our FREE course on using core Media in Drupal 8.
(While you’re at it check out our list of free courses)

New Remote Video Media Type

When you install the Media module you get four media types by default: Audio, File, Image and Video. Now you get Remote video which can be used to embed YouTube and Vimeo videos.

Currently only YouTube and Vimeo are supported. If you need to support other video platforms look at using Video Embed Field.

Learn how to configure Video Embed Field with core Media module.

oEmbed Support

To handle the new Remote video media type, Drupal 8.6 also got oEmbed support (Drupal change record).

Media Library

The new Media library module is by far the most exciting new functionality. You’ll need to install the experimental module called Media library. Don’t forget this is experimental for now; use at your own risk.

The first change you’ll notice is that the Media page looks different. You get to switch between a Grid and Table view.

The module also comes with a new widget for the Media field called “Media library”. This will allow you to browse media assets from the edit screen.

To use this widget make sure “Media library” is selected as the widget on the “Manage form display” page.

Here it is in action and watch how you can bulk upload images.

Can this module replace Entity browser? At this point I’d say no. Entity browser gives you more flexibility in how you build these types of browse pages. But I hope in the future Media library will be the standard way of creating these browse pages.

Want to learn how to use Entity browser? Check out “How to Browse Media Assets using Entity Browser“.

Summary

Slowly and steadily media handling in Drupal core is improving and becoming more powerful. It’s good to see this continued momentum. But if you need to create bespoke media functionality I still think the combination of Entity embed/Entity browser is the winner for now.

Check out our epic “Managing Media Assets using Core Media in Drupal 8” tutorial where you’ll learn how to use Entity embed, Entity browser, DropzoneJS and more.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Aug 30 2018
Aug 30


We all love Drupal's granular permission and access control system! And yet: its life-saving hierarchy of user roles and permission levels is strictly for creating/editing content. Since Drupal wrongly assumes that all site visitors should be able to visualize all published content, right? But what if this default assumption doesn't suit your specific use case? What if you need to restrict access to content in Drupal 8?

… to limit users' access to certain content on your website? So that not all visitors should be able to see all published nodes.

In this case, Drupal's typical access control system for creating and editing content is not precisely the functionality that you need.

But there's hope!

And it comes in the form of 6 Drupal 8 access control modules that enable you to give content access of different levels, ranging from “average” to “more refined”.
 

But First: An Overview of Drupal's Typical Access Control System 

Now, we can't just jump straight to the “more sophisticated” content access solutions in Drupal 8, not until we've understood how its basic access control system works, right?

As you can see, in the screenshot here below, the logic behind it is pretty straightforward:

Restrict Access to Content in Drupal 8- Typical Access Control in Drupal

  • while in your admin panel, you need to access the People menu > Permissions
  • and there, you just assign different user types (authenticated, admin or anonymous) with specific sets of permissions (to administer blocks, to post/edit comments, to modify menus on your Drupal site etc.)

As you can see, Drupal's typical access control system is not configured so as to enable you to restrict visitors' access to specific content on your website.

Or to limit user access to a more granular level other than the standard “logged in/not logged in user”.
 

If you're not looking for anything “too fancy”, just a straightforward functionality for controlling access to view/edit/delete content entities, then this module's THE one.

And here are 2 of its most common use cases:
 

  • you define some access-restricted premium content areas on your Drupal site, for “privileged” user roles only
  • you grant publish/edit permissions to certain groups on your website, having specific predefined user roles
     

Definitely a go-to module when you need to restrict access to content — to specific content types — in Drupal 8.

It enables you to:
 

  • set up specific access control roles
  • define custom granular restrictions based on different user permissions (you could, for instance, limit access to certain content on your website for non-authenticated users only...)
  • set up content types with restricted access 
     

Note: do bear in mind that, once you've enabled Content Access, you'll need to rebuild your entire “collection” of access content permissions. The module is going to alter the way they work, that's why.

Restrict Access to Content in Drupal 8- Rebuild Permissions when Using Content Access module

Tip: if you need to control access to content nodes on your Drupal 8 site, this module's built to help you “refine” your restriction; for that you'll just need to define some more detailed permissions in People menu >  Permissions tab.
 

A lightweight solution to restrict access to content in Drupal 8. One that enables you to set up access-restricted content sections on your website.

Now, what makes it stand out from the other 5 modules in my list here is:

The refined, taxonomy term-based restrictions that it allows you to create for specific nodes on your Drupal site.

You can limit access to these nodes for:
 

  • specific user roles
  • certain individual user accounts
     

Restrict Access to Content in Drupal 8- Permission by Term module

How do you set everything up?
 

  1. first, you enable the module
  2. then, on the term edit page, you define a specific role access for each taxonomy term 


And there's more to look forward to! 

Unlike Organic Groups and Group, the Permissions by Term module comes with very little overhead, in the form of light contributed code.

In other words: for the taxonomy terms-based access control that it enables you to set up, it adds a new field to your current content types. That's all!
 

When it comes to Drupal role-based access control (to content types or nodes) this module's simple, straightforward approach is exactly what you need.

Not as “sophisticated” as Content Acess, yet conveniently easy to configure and to maintain.

And also, the perfect choice if it's just a basic kind of content type access restriction that you need to set up.

Summing up its functionality now, what you should know is that Node View Permissions enables you to define 2 types of... permissions:
 

  • “View any content”
  • “View own content”
     

… for every content type listed on your Drupal site's Permissions page. 
 

5. Group         

It enables you, as the site admin, to structure content into... groups.

Different group types, with their own hierarchies of group roles:
 

  • anonymous
  • member
  • outsider (a logged in user, but not a group member)
  • other group roles that, as an administrator, you'll need to create
     

Needless to add that with Group you'll restrict access to content in Drupal 8 based precisely on these group roles that you'll set up.

Furthermore, it allows you to define:
 

  • the most suitable permissions (view/edit/delete) for specific content types
  • the most appropriate group roles
     

… per group type. 

And the best is yet to come:

All group types, group roles, group/content relationships are set up as entities. Meaning that they're fully fieldable, exportable, extendable!
 

It's a restricted access to nodes, based on taxonomy terms, users and roles, that you get to define using this module:

A user role-based access control...

Note: mind you don't forget that, in order to restrict access to viewing/editing nodes on your Drupal website, you'll first need to reconfigure the existing user permissions.


The END! 

A bit curious now: which one of these solutions, ranging from straightforwardly simple to most refined, would you go for to restrict access to content in Drupal 8?

Aug 27 2018
Aug 27

You've put so much effort into crafting and polishing the content on your Drupal website and it just won't... rank? Why is it that search engines' web crawlers won't index its “juicy” content? Why they won't give your site a big push right to first-position rankings? As it clearly deserves... Could it be because you're making these 10 Drupal SEO mistakes? 

Knowingly or just recklessly...

And with the first 5 of them already exposed in the first part of this blog post, I'm keeping my promise and here I am now, with 5 more SEO mistakes that you don't want to make on your Drupal website, ranging from:
 

  • embarrassing gaffes
  • to faux pas
  • to catastrophes...
     

1. Underrating Meta Tags: One of (Too) Common, Yet Costly Drupal SEO Mistakes 

And let me just say it: forgetting (or choosing not to) to check those 3 on-page ranking factors:
 

  1. description
  2. page title
  3. tags
     

... is one rookie SEO mistake. 

And one costly neglect, too...

Why? Because by simply checking your meta tags, making sure that the content entered there:
 

  • contains all the relevant keywords
  • is user-friendly and engaging
     

you hit 2 birds with just one stone:
 

  1. search engines' crawlers will just know whether specific web pages on your site are relevant for specific search queries or not; whether the keywords that you will have added to your meta elements are precisely those that online visitors use
  2. users will get a “teaser” of what the page is about, helping them decide whether it matches their searches and expectations or not
     

Note: Drupal's got your back with a dedicated Metatag module that you should install even before you “release your website out into the wild".
 

2. Ignoring the Slow Page Loading Speed 

If it takes more than 2 seconds to load... then you'll lose them. Visitors on your Drupal site will lose all interest in accessing that given page.

And could you blame them? 

Instead, you'd better:
 

  • blame yourself for accepting this status quo and refusing (or just postponing or not putting enough effort into it) to optimize your site for high speed
  • rush to address this major UX issue risking to grow into a critical SEO issue
     

How? By:
 

  • compressing all JS and CSS files using a dedicated tool of your choice (and thank God there are plenty of those to choose from!)
  • compressing all overly large pages
  • reducing images, graphics, and videos to reasonable sizes
  • disabling all those Drupal modules that you haven't used in ages (or maybe never...)
  • enabling caching (and luckily there are Drupal cache modules — like Memcache, for instance — that can help you with that)
  • upgrading your server or even moving to a new hosting company
  • optimizing your site's current theme

See? Improving your Drupal site's load time is no rocket science and it doesn't require overly complex measures, either. They're no more than... “common sense” techniques.

Assess the resources that implementing them would require and... just do it:
 

  • the user experience on your Drupal website will improve significantly
  • search engines will “detect” this increase in user satisfaction
  • … which will translate into a higher ranking 
     

3. Overlooking to Redirect From Its HTTP to Its Secure HTTPs Version

Migrating your Drupal site to HTTPS is a must these days. Just face it and deal with it or... be ready to face the consequences!

Yet, if you overlook to redirect your site to its new HTTPS version, thus sending its visitors out to... nowhere — to error pages — then... it's all but wasted effort and resources.

One of those SEO Drupal mistakes with long-term consequences on your website's ranking.
 

4. Broken Internal Images

Leaving broken internal images and missing ALT attributes behind is a clear sign of SEO sloppiness...

And now, here's what we would call a “broken image”:
 

  • an image that has an invalid file path
  • an image with a misspelled URL
     

The result(s)?
 

  1. first, a broken image has an impact on the overall user experience; your site visitor gets discouraged and quits the page in question
  2. next, search engines rate your site's content as “of poor quality”
  3. and finally, all these lead to an inevitable drop in Google search rankings
     

5. Underestimating (or Just Ignoring) the Importance of an XML Sitemap for SEO

Not generating an XML sitemap of your Drupal site is more than just one of those Drupal SEO mistakes that you should avoid: it's a missed opportunity! A huge one!

Here's why:
 

  • an XML sitemap would include all the URLs on your website
  • … as well as information (via heading tags) about your site's infrastructure of web pages, for search engine crawlers to use
  • … “alerts” about which pages they should be indexing first
  • an XML sitemap provides an early index of your website
  • all the pages on your website get submitted to the search engine database even before they get indexed in their own database
     

Note: the sitemap.xml file not only that communicates with and informs search engines about the current content ecosystem on your Drupal site, but will “keep them posted” on any updates of your site's content, as well.

So, what an XML sitemap provides is a prioritized, conveniently detailed and easily crawlable map of your Drupal website meant to ease web crawlers' indexing job.

And the easier it gets for them to crawl through your site's content, the faster your site's indexing process will be.

In short: if the robots.txt file alerts search engines about those pages that they shouldn't crawl into, the sitemap.xml file lets them know what pages they should index first!

Tip: discouraged by the thought of manually building your site's sitemap? Well, why should you, when there are Drupal modules built especially for this?
 

From taxonomy terms, menu links, nodes, useful entities, to custom links, these modules will automatically generate all the entities that you'd need to include in a detailed sitemap of your Drupal site.

The END! 

Just face it now: you'll inevitably continue to make gaffes influencing your site's SEO, no matter how many precautions you might take...

Yet, these10 Drupal SEO mistakes here, ranked from least to most damaging, are the ones that you should strive to avoid at all costs...

Aug 24 2018
Aug 24

With the Drupalgeddon2 "trauma" still “haunting” us all — both Drupal developers and Drupal end-users — we've convinced ourselves that prevention is, indeed, (way) better than recovery. And, after we've put together, here on this blog, a basic security checklist for Drupal websites and revealed to you the 10 post-hack “emergency” steps to take, we've decided to dig a bit deeper. To answer a legitimate question: “What are some good ways to write secure Drupal code?”

For, in vain you:
 

  • build a “shield” of the best Drupal security modules and plugins around your website
  • enforce a rigid workplace security policy 
     

… if you leave its code vulnerable to various types of cyber attacks, right?

  • But how do I know how unsecured code looks like, to begin with?
  • What are the site configuration gotchas that I should pay attention to?
  • What are the most common vulnerabilities that I risk exposing my Drupal site to?
  • And how can I test it for security issues that might be lurking in its code?

But most of all: What top secure coding practices should I and my Drupal development team follow?

Now, let's get you some answers:
 

1. SQL Injection Vulnerabilities: How You Can Fix & Prevent Them 

SQL injections sure make one of the most “banal”, nonetheless dreadful types of attacks. Once such vulnerabilities are exploited, the attacker gets access to sensitive data on your Drupal site.
 

1.1. Prevent SQL Injection Attacks Using The Database Abstraction Layer

In other words: the proper use of a database layer makes the best shield against any SQL injection exploit attempts.

Now, let's talk... code.

For instance, linking together data right into the SQL queries does not stand for a secure coding practice:

db_query('SELECT foo FROM {table} t WHERE t.name = '. $_GET['user']);

In this case here, this is how you write secure Drupal code:

db_query("SELECT foo FROM {table} t WHERE t.name = :name", [':name' => $_GET['user']]);

Notice the usage of the proper argument substitution with db_query. The database abstraction layer uses a whole range of named placeholders and works on top of the PHP PDO.

Now, as for a scenario requesting a variable number of arguments, you can use either db_select() or an array of arguments:

$users = ['joe', 'poe', $_GET['user']];
db_query("SELECT t.s FROM {table} t WHERE t.field IN (:users)",  [':users' => $users]);
$users = ['joe', 'poe', $_GET['user']];
$result = db_select('table', 't')
  ->fields('t', ['s'])
  ->condition('t.field', $users, 'IN')
  ->execute();

1.2. Have You Detected an SQL Injection Vulnerability? Here's How You Can Fix It

There are some key Drupal security best practices to follow for addressing SQL injection issues:
 

  • always stick to the well-known Drupal database API
  • always filter the parameters that you get (be twice as vigilant and cautious about those who can type anything on your Drupal site)
  • always use placeholders: db_query with :placeholder
  • always check the queries in the code: db_like()
     

Tip: remember to follow these coding practices for addressing and preventing SQL injections on your contrib modules, as well.
 

2. How to Protect Your Drupal Site Against Cross-Site Scripting (XSS) Attacks

We could easily say that XSS attacks “rival” SQL injection attacks in “popularity”:

Drupal's highly vulnerable to cross-site scripting.

All it takes is some wrong settings — input, comment, full HTML — as you configure your website, to make it vulnerable to this type of attacks:

They make a convenient gateway into your website for remote attackers to use to inject HTML or arbitrary web.
 

2.1. Check Functions to Rely on for Sanitizing the User Input (in Drupal 7)

Securing your Drupal 7 site against cross-site scripting attacks always starts with:

Identifying the very “source” of that submitted data/text.

Now, if the “culprit” is a user-submitted piece of content, depending on its type you have several check functions at hand to use for sanitizing it:
 

  • check_url
  • check_plain (for plain text)
  • filter_xss (when dealing with pure HTML)
  • filter_xss_admin (if it's an admin user that entered the “trouble-making” text)
  • check_markup
     

Note: always remember never to enter the user input as-is into HTML!

Tip: a good way to write secure Drupal code is to use t() with % or @ placeholders for putting together translatable, safe strings.
 

2.3. Cross-Site Scripting In Drupal 8: Twig & 3 Useful Sanitization Methods

In Drupal 8, handling cross-site scripting attacks gets significantly easier.

Here's why:
 

  • you have TWIG, with its autoescaping and “sanitize all” HTML mechanism!!!
  • no SQL queries
  • no access to Drupal APIs
     

Now, besides Twig, you have 3 more sanitizing methods at hand for fixing cross-site scripting issues in Drupal 8:
 

  1. HTML: :escape(), for plain text
  2. Xss: :filterAdmin(), for admin-submitted content
  3. Xss: :filter(), where HTML can be used
     

2.4. Testing Your Code Against XSS

In order to check whether certain user inputs are vulnerable, all you need to do is:
 

  • take the “suspicious” user input as a field, as an input HTML
  • enter them both (or just one of them) in your test
     

Note: feel free to user Behat or another framework of choice to automate the whole process.

2 clear signs that you've detected an XSS vulnerability are:
 

  1. you get this pop up alert: <script>altert ('xss') </script>
  2. or this error message close to the IMG tag: img src="https://www.optasy.com/blog/what-are-some-good-ways-write-secure-drupal-..." onerror="alert ('title')"
     

3. Use Twig Templates: They Sanitize All Output...  Automatically 

Did you know that a lot of the Drupal security issues on your website occur precisely because you've skipped sanitizing the user-submitted content before displaying it?

And someone's neglect quickly turns into another one's opportunity...

By skipping to clean up that text beforehand, you lend the attacker a “helping hand” with exploiting your own Drupal site.

Now, getting back to why using Twig templates is one of the best ways to write secure Drupal code:
 

  • they sanitize the user input and output (all HTML, basically) by default; you can write your custom code without worrying about it risking to break up your website
  • you won't run the risk of having safe markup escaped


In short: securing your Drupal 8 website is also about having all HTML outputted from Twig templates.
 

4. How to Write Secure Drupal Code for Finding & Fixing Access Bypass Issues

One of Drupal's strongest “selling points” is precisely its granular permission system. Its whole infrastructure of user roles with different levels of permissions assigned to them.

Furthermore, there are all kinds of access controls that you can “juggle with”:
 

  • Node access system
  • field access
  • Views access control
  • Entity access
     

In short: you're free to empower users to access different sections/carry out different operations on your Drupal site.
 

4.1. How You Can Check for Access Bypass Issues

How do you know whether there are access bypass flaws on your website, that could be easily exploited?

It's easy:
 

  • you simply visit some nid/node and other URL on your site 
  • and just run your Behat automated tests
     

4.2. And How You Can Fix the Identified Access Bypass Issues

Do keep in mind that there are quite a few access callbacks to consider:
 

  • entity_access
  • user_access for  permissions
  • Squery – addTag ('node_access')
  • Menu definitions (make sure you set those correctly)
  • node_access

All you need to do is write automated tests to address any detected problems related to access bypass.
 

5. 3 Ways Deal With Cross-Site Request Forgery (CSRF) in Drupal 

What does it take to write secure Drupal code? 

Writing it... strategically, so that it should prevent any possible cross-site request forgery attack...

Now, here are 3 ways to safeguard it from such exploits:
 

  1. sending and properly validating the token
  2. using Form API
  3. using the built-in csrf_token in Drupal 8
     

In conclusion: a trio of good practices keeps the CSRF attacks away...
 

6. 7 Best Contrib Security Modules to Back Up Your Coding With

Now, after we've gone through some of the best ways to write secure Drupal code, let's see which are the most reliable contrib security modules to strengthen your site's shield with:

  1. Hacked!      
  2. Permission report  
  3. Encrypt      
  4. Composer Security Checker        
  5. Security Review          
  6. Paranoia      
  7. Text Formats Report
     

The END! This is how your solid Drupal security “battle plan” could look like. It includes:
 

  • some of the most frequent types of attacks and security issues to pay attention to
  • most effective preventive measures
  • vulnerability detecting methods
  • post-attack emergency actions and sanitization mechanisms
     

What ways to write secure Drupal code would you have added or removed from this list?

Aug 23 2018
Aug 23

[embedded content]

Drupal Console and Drush are two command line (CLI) tools built for Drupal. For a long time Drush was the only CLI tool and it was very useful for managing Drupal sites. Common tasks you’d do with Drush are rebuild caching, installing sites, import/export configuration and so much more.

Then Drupal Console came onto the scene and offered other goodies such as the ability to generate boilerplate code, which Drush 9 can now do as well. People often ask “Can you run Drush and Drupal Console together” and the answer is yes, I personally use both. If you install Drupal using drupal-composer/drupal-project then you get both Drush and Drupal

In the video above, you’ll learn how to use Drush and Drupal Console.

Drupal Console

Drupal Console is a CLI tool for Drupal built using the Symfony Console library. One of its many strengths is the ability to generate boilerplate code. With a few simple commands you can create a module or a custom entity type.

How to Install Drupal Console

Drupal Console can be installed into your Drupal site using Composer, follow the instructions over on the Drupal Console documentation page.

Use the links below to jump to a section of the video:

  • Drupal Console intro: 02:31
  • How to install Drupal Console: 04:29
  • Using Drupal Console launcher: 06:27
  • Overview of Drupal Console commands: 07:41
  • How to use debug commands: 08:33
  • Using debug:router command: 10:11
  • Using debug:container command: 11:49
  • Using debug:cron command: 15:08
  • Using debug:user command: 15:08
  • How to use generate commands: 17:15
  • Using generate:module command: 18:07
  • View module code generated by Drupal Console: 20:42
  • Using generate:entity:content command: 20:59
  • View code generated by generate:entity:content command: 24:43
  • Install module generated by Drupal Console: 27:21
  • How to download modules using Drupal Console: 31:10
  • Viewer question: What’s composer?: 34:45

Drush

Drush is the original CLI tool for Drupal. You can use it to interact with a Drupal site and generate boilerplate code.

How to Install Drush

Drush is just a PHP library and can be installed using Composer. For details read the Drush install documentation page.

Use the links below to jump to a section of the video:

  • Drush intro: 37:22
  • How to install Drush: 40:56
  • Using Drush: 42:11
  • Overview of Drush Commands: 43:00
  • Using Drush generate command: 44:11
  • Using generate module-content-entity command: 45:12
  • View module code generated by Drush: 46:23
  • Install module generated by Drush: 47:13
  • Overview of common Drush commands: 52:00
Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Aug 21 2018
Aug 21

Let me guess: you're a Drupal developer (temporarily) turned into a... Drupal project manager! Or maybe a PM new to Drupal, facing the challenge of your first Drupal project management assignment?

Have I guessed it?

Now the questions roaming in your head right now must be:
 

  • What Drupal project-specific challenges should I expect?
  • How should I address them?
  • How should I approach the Drupal developers, site builders and themers involved?
  • What questions should I ask them at each phase of the project?
  • And which are the stages of a Drupal project management process more precisely?
  • How do I collect accurate and explicit requirements for my Drupal project?
     

“Spoiler alert”: managing a Drupal project the right way isn't so much about using the right project management modules and “heavy-lifting” tools. It's about:
 

  • understanding the specific challenges that Drupal projects pose
  • understanding the specific phases of the process
  • empowering the people in your team to capitalize on their Drupal expertise within the given time frames and according to your client's objectives
     

Now, here's an insight into the process of managing a Drupal project. One shaped as a list of predictable challenges and their most suitable solutions:
 

1. Proper Planning: Get The Whole Team Involved

In other words: defining objectives and setting up a final time frame with the client without getting your team, too, involved in the process is like:

Throwing spaghetti at a wall and hoping that it would just... stick somehow.

They're the Drupal experts, you know...

Therefore, getting the Drupal developers, themers and site builders engaged at this stage of the project is no more than... common sense.

They're the (only) ones able to:
 

  • give you an accurate time estimate for developing and implementing each functionality/feature
  • tell if certain of the requested features can't be delivered
  • identify interdependencies and conditions
  • provide you vital information about the Drupal-specific architecture and the project-specific development process
  • … information on what components to take, whether new contrib modules need to be developed to support certain functionalities etc.
     

Get your Drupal team involved in the planning and preparation process and strike a balance between their valuable input, the client's objectives, and time frames.
 

2. Tempted to... Micromanage? Empower Your Team Instead

Yet, resisting temptation won't be easy. Especially if you're a former Drupal developer now turned into a Drupal project manager.

You'd just die to get your hands dirty with code, wouldn't you? To supervise, closely, how every single line of code is being written.

Refrain yourself from that...

Instead, do keep your focus on the bigger picture! And, moreover, empower each member of your team to... shine. To excel at what he/she's doing. 

That instead of obsessing over details, getting everyone on their nerves and making them doubt their own skills:

By focusing on each one of the small steering wheels, you'd just lose sight of the larger mechanism that's a Drupal project.
 

3. To Tell or Not to Tell: Do Encourage Your Team Members to... Tell

Hiding the dirt under the carpet, from the stakeholders' eyes/ears and having members of your team remain silent over certain bottlenecks in the project will only act as 2 “Trojan horses”.

They'll lead your Drupal project to... failure.

Instead:
 

  • dare be honest with the client and inform him/her if you run the risk of a delay 
  • encourage your team to be open with you and with their teammates when they hit sudden challenges, unexpected issues
     

By:
 

  • hiding
  • ignoring
  • “genuinely” underrating
     

... issues detected in the development process — instead of getting them “exposed” and dealt with —  you're only sabotaging the Drupal project.

And now speaking of encouraging good communication within your team, how about creating a dedicated open forum for them to use? This could be the “place” where they'd share any issues that they will have detected in the project.

Or challenges that they face and can't address by themselves.
 

4. Juggling with Resources, Timeline, and Unforeseen Events

I'm not going to lie to you about this one: keeping the balance between staying flexible and being capable to assess risks is not going to be easy...

Unplanned issues will strike, new requirements will come to “jeopardize” this balance, unexpected changes will need to be accommodated under the same time frame...

Should you keep yourself rigid and inflexible to all changes, sticking to the initial plan?

Or should you “assimilate” all the incoming requirements and additions to scope with the risk of a project delay?

And that of overburdening your team with unscheduled tasks...

Can't help you with a universal answer here, one that would apply to all Drupal project management scenarios. It's you, together with your Drupal team, who should be able to estimate:
 

  • the changes' level of complexity
  • the project delay (if it's the case)
  • the chances for these additional tweaks to turn into contractual changes
     

5. Drupal Project Management Is 90% Good Time Management

And it all comes down to:

Breaking your Drupal project down into small, manageable tasks. 

Tasks that can be easily turned into goals and objectives:
 

  • daily objectives
  • weekly objectives
  • and so on...
     

Efficient Drupal project management, even if we're talking about truly complex ones, is all about making it... manageable.

About ensuring that the lists of tasks are logically structured and (most of all) time framed!

Needless to add that this strategy acts as a motivation-booster for your team: 

Just think about it: with every ticked off task, each team member can visualize the project's progress in... real-time. A progress that he/she, too, will have contributed to.

The END! These are the Drupal project-specific challenges that any project manager dealing with this CMS faces, accompanied by their life (reputation)-saving solutions.
 

Aug 17 2018
Aug 17

It's a robust, flexible and admin feature-packed CMS, there's no point in denying it. And yet: Drupal (still) lacks a modern UI that would make building rich web content —  such as landing pages — a breeze. But there is hope: the Gutenberg editor has been ported over, promising a better editing experience in Drupal 8.

The team behind this daring project? Frontkom, a Norwegian digital services agency that:
 

  • refused to just sit and wait (for a year or two) for the in-progress initiative of modernizing Drupal's admin UI to grow into a core solution
  • decided to capitalize on their experience in working with the Gutenberg page builder 
  • … and on this content editor's open source nature, too
  • … to bring it over to Drupal 8
     

Now, if you're determined to improve the editorial UX on your Drupal site, to “spoil” your editors with a modern, intuitive and flexible admin UI, keep on reading...
 

1. The Drupal Gutenberg Project: Aiming for a Modern Admin UI in Drupal 8

And by “modern” I do mean the opposite of the Panels & Paragraphs & Layout combo solutions currently available for editing text in Drupal.

Solutions which only manage to make the entire workflow... discouragingly complex.

Especially if it's rich web content that editors need to create via the Drupal admin UI.

And this is precisely the context where the Drupal Gutenberg project was born: Drupal desperately needed/needs a modern, JavaScript-based admin UI.

With WordPress 5 users already enjoying this fancy content editor and the Frontkom team's having gained experience in using it, the idea of porting it to Drupal started to form:

"Why wouldn't we make it possible for Drupal users, too, to benefit from this content editor?" 

And here are some of the original Gutenberg project's features that lead them into thinking that, once ported, the editor would significantly improve the editing experience in Drupal 8:
 

  • it's (highly) decoupled
  • it's open source
  • it's React.js-based 
  • it provides a simplified, smooth and cool functionality-packed admin UI
  • it's Medium and Squarespace's inspired
  • it turns the creation of complex landing pages into a breeze
     

Page editing in Drupal 8 wasn't going to be the same again!

Their initiative turned into a Drupal 8 module —  Gutenberg Editor —  currently still an experimental one. 

Curious enough?

The first step to satisfy your curiosity is to take a look at their live demo: an interactive glimpse into the Gutenberg text editor implemented in Drupal 8.
 

2. The New Gutenberg for Drupal: Top Features Improving the Editing Experience in Drupal 8
 

2.1. All the Page Elements Are... Content Blocks

That's right, the team behind this project capitalized on the “everything is a block” Drupal 8 concept when adapting the Gutenberg UI to Drupal.

The result?

Both the Drupal core blocks and 20+ Gutenberg blocks are available in the resulting admin UI.

Basically, a Drupal 8 editor can insert into the web page that he/she's creating any of the core Drupal blocks and of the Gutenberg blocks of choice.

Speaking of which, let me point out just a few:
 

  • Heading
  • Image gallery
  • Auto embedded social posts
  • Buttons
  • Custom Drupal blocks
  • Layout blocks
     

Needless to add that you're free to enrich this list with your own custom blocks, too.
 

2.2. Easy Switch from Visual to Code Editor

That's right, the Gutenberg UI enables you/your editors to quickly switch to code editor —  opening up a neat markup —  and to apply any needed tweaks on the output.
 

2.3. Positioning Content Is Straightforwardly Intuitive

Editors get to select precisely where they want to position different types of content on a page.

And the very same results that they generate while in the Gutenberg admin UI get instantly reflected on the live web page, as well.

And there's more! More great admin features improving editing experience in Drupal. For instance:

Full control over font sizes and colors; tweaking them becomes a breeze with the new editor.
 

2.4. There's a Blocks Search Box

And not only that:
 

  1. using this search box you can track down precisely those content blocks that you need to add to your page
  2. but you can access them inline, as well, using “/”.
     

2.5. Full Control of the Layout

Another great thing about the content blocks available in the Gutenberg UI is that: they can have child blocks, too!

This way, it'll get unexpectedly easy for your editors to split their used blocks into columns on a grid.
 

2.6. Auto Embedded Social Posts/Videos

And all it takes is pasting their URL.
 

The Story of a Real Challenge: Making Gutenberg CMS-Agnostic

Open source, but not fully CMS-agnostic... 

The team behind the Drupal Gutenberg project had to come up with a suitable solution for this challenge. And they did come up with a multi-step solution to make the fancy text editor work in Drupal 8, as well:
 

  • first, they created a fork and removed the WordPress specific features
  • they used the Gutenberg editor as a dependency 
  • next, they set up a standalone NPM package
  • then they built the Gutenberg Editor module
     

In short: a fork of the initial Gutenberg project is still maintained while being used as a dependency of the new Drupal 8 module. Therefore, each time Gutenberg gets an update, the corresponding Drupal module, too, gets a new release.

Now, digging deeper into the project's architectural design, we discover 2 elements that the team had to re-write for Drupal:
 

  1. the URL defining the editor routes (edit page route, new page route, preview page route)
  2. the api-request, now configured to “talk to” Drupal (instead of the WordPress API)
     

How does the new module work?
 

  • as a text editor, which can be easily enabled for each content type
  • all it takes is a long text field for it to work: it replaces the node edit UI for that specific content type
     

Note: the Frontkom team also “promises” us to re-use many of the Drupal-specific styling for the editor's UI elements in order to add a familiar Drupal feeling to it.
 

What Next? What's The Project Roadmap

Ok, so what we know for sure now, regarding this ambitious initiative turned into a Drupal module is that:
 

  1. the Drupal Gutenberg module is downloadable, yet still experimental (for developer use only)
  2. the team's still working on the project, implementing new features and functionalities aimed at making it feel more... Drupal native
  3. the final version will be presented to the eager/intrigued/curious/skeptical Drupal users and developers in the coming months
     

The END! Can't hide that I'm more than curious what you think about this contrib solution for improving the editing experience in Drupal 8:
 

  1. Are you looking forward to using it, hoping that this editor would make up for the inconveniences of working with Drupal's current admin UI?
  2. Are you skeptical about the perspective of being tied up to a WordPress page builder?
Aug 15 2018
Aug 15

As marketers, we understand the importance of having a system that promotes ease and efficiency when it comes to implementing marketing processes. You want to create content once and use it over and over in different ways to create contextual user experiences. 

Drupal provides you with a variety of powerful, integrated tools to not only help you understand who your visitors are and what they want to accomplish, but to also dig deeper into their interactions, engagements, and habits with your site. 

Here are just a few reasons why enterprise marketers adopt Drupal. 

1. Enormously scalable - you can’t outgrow Drupal!

Some of the biggest, most visible, and highest-trafficked sites in the world run on Drupal, including, The NBA, Johnson & Johnson, and The Weather Channel. Drupal has proven itself on enterprise websites with over 1M pages and over 20,000 requests per second. In short, you can’t “outgrow” Drupal but can continually add new content and features to your enterprise website.

2. Easily execute your content marketing strategy

A big part of a marketing strategy is content creation, so it is important that marketers are easily able to add new pieces to their website. Drupal allows marketers to quickly add blog posts, videos, and landing pages to their website by filling out a “form” with all of the relevant information and then publishing it. For example, if I want to add a post to the Mediacurrent blog, I can be in and out in less than 7 clicks. In-page editing with Drupal 8 makes the publishing process even faster.  

3. Integrate with Marketing Automation 

Every major marketing automation platform has a custom module created for easy integration into a Drupal website. How do I know? Mediacurrent developed most of them - including the Hubspot, Pardot & Silverpop module!

4. Establish an efficient workflow

A planned workflow is the underpinning of every efficient business process. Whether a business is processing leads, updating a web page, evaluating a capital purchase, or approving new hires, certain actions must take place in order for the function to be completed. Workflow involves the passing of content between people in a chain that abide by a predefined set of rules.  Drupal allows you to easily create a workflow that is customized to your company's processes and team.

5. Create dynamic digital experiences….easily

Drupal fully integrates content, community, and commerce in a single platform. If you’re staying competitive, you’ve likely made a significant investment in creating a dynamic website that really tells the story of your brand and what you have to offer. With Drupal as the backbone for your digital strategy, the options for creating personalized web experiences are endless. Drupal’s architecture makes it the ideal platform for creating and delivering segmented content. 

6. Don’t waste your marketing budget on licensing fees

As open source software, the Drupal package has no license fees, it’s free for you to download, modify, etc. Which means your marketing budget goes towards the things that make your site unique, not towards fees for a large software company.

7. Bridge the gap between IT And marketing

When building a Drupal site, the amount of coding required to maintain or build the site is up to you. A full-featured site can be built fulfilling many business requirements with point and click ease. For us “non-coding” marketers, Drupal allows us to go into each page and easily edit the content while still maintaining the consistency of our branding—without the need to know HTML or CSS.   

8. Benefit from the thriving development community

When a business chooses Drupal, a vast community of support becomes available. Whether it be Drupal’s extensive project issue queues, thousands of nationwide meet-ups and Drupalcamps, or IRC channels, the chances are the problem encountered has been faced before, documented, and has a community willing to help you solve it.

9. You’ll have search engine optimization nirvana 

Drupal gives you control over everything you need to optimize your website for search engines. That includes custom page titles, meta descriptions, URLs, copy, and it plays well with Google Analytics.

10. Security - it’s good enough for over 1 MILLION websites

When deciding on a software solution for your company's digital needs, security is often one of the top concerns. Open source software, like Drupal, has the added bonus of having thousands of talented individuals work on a particular problem. With entire teams and methodology devoted to ensuring its steadfast reputation as a secure CMS. Drupal also have an official “SWAT team” that is well-versed in online software best practices and serves as a resource for all custom module maintainers and code contributors to utilize when submitting custom projects. What passes today as secure code may not stay the same tomorrow when new vulnerabilities surface. There's peace of mind in knowing not only is your online software secure, but that it's also in an active state of safeguarding against security attacks, both past and present.

Because Drupal is not tied to a proprietary vendor’s roadmap, it’s advancing based on the work of thousands of developers around the world. Drupal organically evolves at the speed of the web, offers the cost savings and agility of the open source model, and gives you the ability to integrate content across a range of channels and campaigns.  

In the next blog of the series - we’ll hear from the Chief Marketing Officer at Acquia, about how she is leveraging Drupal 8 to achieve her business goals. 

Aug 13 2018
Aug 13

Just imagine: putting together the powerful UI creation tools of a static site generator — more of a modern front-end framework rather —  built for high speed, like Gatsby.js, with Drupal 8's content modeling and access system! Putting their powers together into a blazing-fast website! But how to get Gatsby to work with Drupal?

How do you build a plugin that fetches data from API-first Drupal? In short: a static, conveniently simple, yet robust Gatsby site powered by a powerful, decoupled Drupal back-end?

You've got the questions, we've got the answers...

And we've grouped all our answers to your questions regarding “API-first and decoupled Drupal in connection with Gatsby” in a straightforward 4-step tutorial. One on building a high-speed Gatsby website backed by a versatile headless Drupal CMS.

Shall we dig in?
 

1. But What Is Gatsby.js More Precisely?

The standard, rather rigid definition would be:

“It is a GraphQL-fueled, React-based static site generator.”

Now if the words “static site generator” just make you... cringe, here's a more nuanced definition for you:

“Gatsby's more of a modern front-end framework —  one pulling together the best parts of GraphQL, React, webpack, react-router — built with the developer experience in mind.”

In short: it's a static site that this “more than just a static site generator” helps you build, leveraging its out-of-the-box front-end tools. A website geared to reach fast page loads while pulling data from a decoupled Drupal CMS.

And there are 2 basic steps for getting started with Gatsby. You simply write your site's code structure and let Gatsby handle the rest:
 

  1. turn it into a directory with a single HTML file
  2. … along with all your static assets


2. 3 Reasons Why You'd Want to Use Gatsby

… instead of Jekyll, your webpack config or create-react-app.
 

a. Because of the richness of the Gatsby ecosystem

With rich documentation at hand and backed by an already large community of starters, you'll get your Gatsby site up and running in no time.
 

b. Because it leverages GraphQL' power to build its data layer.

And this is one of those heavy-weighting reasons for using Gatsby over other competing alternatives:

Gatbsy's built to fetch data from... pretty much anywhere — your CMS of choice, Markdown, third-party APIs, Markdown — using “source” plugins. When creating its data layer, it relies on GraphQL, which builds an internal server of all this pulled data.

In short: when questioning yourself “how to get Gatsby to work with Drupal”, do keep in mind that in your future Gatsby & decoupled Drupal setup data gets queried from the same place, in the same way, via GraphQL.
 

c. Because it's built for high speed.

And this is one of Gatsby's hardest-to-resist-to advantage:

It's just... fast.

And that gets reflected in your final Gatsby & decoupled Drupal site while bubbling up to the user experience, as well.

Summing up, these are the 3 strongest reasons why you would be tempted to use Gatsby with Drupal CMS. 

I'm not going to engage in dynamic sites vs static sites debate now. The internet's already overcrowded with such comparisons.

I'll just end this “pledge” on using Gatsby with a non-debatable statement:

Since a static site generator pre-generates the pages of your website, scales of performance vs maintenance costs gets unbalanced. And guess which one's going up and which one down!
 

3. And Why Would Pair Gatsby with Drupal?

If there are strong reasons why you should be getting started with Gatsby, why is there any need to consider decoupled Drupal CMS for its back-end?

Because static site generators don't “care” much for the authoring experience. Content editors have to get themselves tangled up in Markdown for creating content.

True story!

And this is where powerful CMSs, such as Drupal, step in, “luring” you with their:

  • WYSIWYG editors
  • content types 
  • content modeling capabilities
  • access workflow capabilities

… to make your content team's lives easier!

And now your “How to get Gatsby to work with Drupal” dilemma turns into a new legitimate one:

How to make your Gatsby website cope with a decoupled Drupal setup without adding the “dread” of a database and web server to the equation? 2 elements that “pave the path” for performance and security issues...

Well, this is precisely what this “decoupling Drupal with Gatsby scenario means to avoid:

  • you'll get to host your Drupal CMS in-house
  • … and thus take full advantage of the robustness and versatility of a decoupled Drupal CMS back-end
  • your Gatsby website will fetch data from its Drupal back-end and generate content “the static way” (which translates into “incredibility fast page loads”)
     

4. How to Get Gatsby to Work with Drupal More Precisely

Or simply put: how to pull data/content from Drupal into your Gatsby website?

Here's a straightforward tutorial in 4 steps on how to integrate Drupal with Gatsby:
 

4.1. First, Build Your Drupal Server 

Assuming that you have a Drupal 8 website installed, the very first step to take is to:
 

a. Create a new content type 

For this exercise, it's a blog — including all its blog posts — that we'll try to transfer from Drupal to Gatsby. So, we'll name our content type: “Blog”.

It will include 3 basic fields:

  • title
  • body
  • image

Just navigate to Home>Administration>Structure>Content Types.
 

b. Turn Drupal into an API Server 

And there are 2 key modules that you'll need to install:
 

  1. jsonapi_extras: for gaining more control over the API (to disable resources, to change the default endpoint, to enhance field output etc.)
  2.  jsonapi, which will turn your Drupal website into an API server (one having a default endpoint)
     

c. Grant Anonymous User Permission to Access the JSON API resource list

If you overlook this step, you'll end up with an “Error 406” message, which will just sabotage your whole “decoupling Drupal with Gatsby” mission.
 

d. Check How Your Drupal API Server Works 

You can do this by navigating to http://[your-site]/jsonapi logged in as an Anonymous user.

If the page that you'll get displays all the information regarding your API server, then you'll know you're on the right track.
 

4.2. Then, Create a New Gatsby Site

But before you jump to building your new static website, check whether you have npm and node installed on your PC. 

How? By entering “npm  -v” and “node  -v” into your terminal.

Next, you'll need to install Gatsby's CLI:
 

npm install --global gatsby-cli 

Then, just build and get your Gatsby site up and running.

Note: by default, it will be accessible at localhost:8000.

How to Get Gatsby to Work with Drupal: building a new Gatsby site

4.3. Decouple Drupal with Gatsby: Pulling Data from the API Server
 

a. Set up the (/blog) page

Solving your “How to get Gatsby to work with Drupal”  type of dilemma starts with... the creation of a new page on your Gatsby website.

And is as simple as... setting up a new JS file.

Note: all your Gatsby pages will get stored under /src/pages.

Now here are the basic steps to take:
 

  1. create the blog.js in /src/pages
  2. then add this code: import React from "react" const BlogPage = () => ( <div> <h1>Latest from our bog</h1> </div> ) export default BlogPage 
     

Voila! You've just created a new page at /blog.
 

b. Pull Content from the Drupal 8 site using GraphQL

The “gatsby-source-drupal” plugin, to be more specific.

It's this source plugin that will be “in charge” with all the data (images here included) pulling from decoupled Drupal back-end and pushing into your Gatsby site.

Note: do keep in mind that, in this case, the JSON API module plays a crucial role.

And here's how you install your “power” plugin:
 

// in your blog.gatsby folder npm install --save gatsby-source-drupal 

Next, just configure your newly installed plugin:
 

// In gatsby-config.js plugins: [ ... { resolve: 'gatsby-source-drupal', options: { baseUrl: 'https://goo.gl/Cc5Jd3 apiBase: 'jsonapi', // endpoint of Drupal server }, } ], 


Tada! Now your site should be functioning properly.

If... not quite, here are the causes of the 2 most common error messages that you could get:
 

  • “405 error”, check whether the jsonapi_extras module is enabled
  • “ 406 error”, have a closer look at the permission on your Drupal site
     

c. Configure GraphQL to Pull Specific Pieces of Content from Drupal

In other words: to query all the “blog” nodes from Drupal and request specific data from the API server.

Another strong reason for using Drupal CMS with Gatsby is that the latter provides an in-browser tool for testing GraphQL queries names, for writing and validating them. You can access it at localhost:[port]/___graphql, whereas in our particular case here at: localhost:8000/___graphql.

Now, as you're solving this “How to get Gatsby to work with Drupal” type of puzzle, just try to query all the blog nodes.

Next, navigate back to your blog.js file and run this query:
 

export const query = graphql` query allNodeBlog { allNodeBlog { edges { node { id title body { value format processed summary } } } } } ` 


Then, update your const BlogPage so that it should display the body, content, and title:

const BlogPage = ({data}) => ( <div> <h1>Latest from our blog</h1> { data.allNodeBlog.edges.map(({ node }) => ( <div> <h3>{ node.title }</h3> <div dangerouslySetInnerHTML={{ __html: node.body.value }} /> </div> ))} </div> ) 


Next, save your file and... “jump for joy” at the sight of the result:

All your blog posts, nicely displayed, pulled from Drupal and published on your Gatsby site!
 

4.3. Finally, Just Go Ahead and Publish Your New Gatsby Site

And here you are now, ready to carry out the last task of your “How to get Gatsby to work with Drupal” kind of “mission”. 

This final task is no more than a command that will get your Gatsby website running:

gatsby build 

Next, just run through your /public folder to see the “fruits of your work”.

At this point, all there's left for you to do is to copy/push content in /public to the server and... deploy your new website using Gatsby with Drupal CMS.

The END! This is how you do it: how you use Gatsby.js in a decoupled Drupal setup so you can benefit both from:

  1. a modern static site generator's robustness and high performance, built with developer experience in mind 
  2. a powerful CMS's content managing capabilities, built with the editorial experience in mind 
Jul 31 2018
Jul 31

The Superfish module allows you to create multi-level dropdown menus in Drupal 8. The module uses the JavaScript Superfish library to create and display a Superfish menu block for each menu available on your site.

With a few configuration options, you can control how it’ll behavior on mobile, turn multi-column menus, change the styling and more.

The module does come with a few styling options but you’ll have to style it yourself to match your theme. When you configure Superfish the first time the dropdown functionality will, however, it may not look good.

In this tutorial, you’ll learn how to install the module and how to configure it.

Let’s start!

Getting Started

It’s recommended that you install the module using Composer. This way Composer will automatically download the required library.

composer require drupal/superfish

Installing the Superfish module

If you don’t want to use Composer then you’ll need to manually download the library and extract it into the libraries directory in your Drupal site. View the Installation section on the project page for more details.

After downloading, enable the module either by clicking the module’s checkbox in the Extend Page or using Drush.

drush en superfish -y

Enabling the moduel with drush

Create Menu

As an example, let’s create a site with a 4 level menu. Superfish is capable of handling unlimited menu levels.

1. Click Structure, Menus and click the “Edit menu” button besides the “Main Navigation” menu.

2. Click the “Add link” button to add a menu item and make sure you mark the “Show as expanded” checkbox, if the menu item will contain children.

Creating the menu

3. Click the Save button each time you create a menu item and repeat the process for the whole menu structure. At the end you should have something like this:

Menu structure

Configure Superfish Menu Block

It’s time to get rid of the default menu block and place the Superfish menu block in one of Drupal’s regions.

1. Click Structure, “Block layout”. Look for the “Primary menu” region, click the dropdown button by the “Main Navigation” block and choose Remove. Confirm by clicking the blue Remove button.

Removing the main menu block

2. Now click “Place block” in the “Highlighted” region, type the word main in the search box and click “Place block” by the Superfish “Main navigation” block.

Inserting the Supefish block

Let’s review the settings one by one.

  • Uncheck the “Display title” option. This is Drupal’s default block configuration.
  • “Menu levels” option lets you configure the display of the menu and the number of levels permitted. Leave these options untouched.
  • “Block settings” area contains configuration about the menu appearance and its basic behavior.
  • “Menu Type” “Horizontal (double row)” shows the first and second level menu items in a horizontal display.
  • “Vertical (stack)” option is the right choice if you want to place the menu in one of the sidebars for example.
  • The style option lets you choose a menu with some predefined styles.
  • The “Slide in” effect option is there to configure the dropdown functionality of all submenus. You can install the jQuery Easing library (read the module’s documentation) if you want to have more options here.

Superfish settings

  • The “Superfish plugins” area deals with the display of the dropdown menus in the browser and on small screens, take a look at the possibilities, but generally speaking you won’t need to change this options, leave the default options. Pay attention to the Supersubs area, you can define here the width of your submenus.

Supefish plugins area

  • In the “Advanced Settings” area, you can control the animation speed of the Superfish menu, some hyperlink properties and you can also add custom CSS classes to the menu components.

Superfish advanced settings

Create Multi-column Menus

It is possible to create multi-column menus with the Superfish module, however you have to have a specific menu structure to achieve this.

Wrong menu structure

Right menu structure

Just check “Enable multi-column sub-menus” in order to use them.

Multi-column menus setting

Summary

The Superfish module allows you to build dropdown and multi-column menus and place them in your Drupal site in an easy way. But you’ll still need to spend some time styling the menus to match your theme.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia.

Jul 26 2018
Jul 26

Intro

In this post, I’m going to run through how I set up visual regression testing on sites. Visual regression testing is essentially the act of taking a screenshot of a web page (whether the whole page or just a specific element) and comparing that against an existing screenshot of the same page to see if there are any differences.

There’s nothing worse than adding a new component, tweaking styles, or pushing a config update, only to have the client tell you two months later that some other part of the site is now broken, and you discover it’s because of the change that you pushed… now it’s been two months, and reverting that change has significant implications.

That’s the worst. Literally the worst.

All kinds of testing can help improve the stability and integrity of a site. There’s Functional, Unit, Integration, Stress, Performance, Usability, and Regression, just to name a few. What’s most important to you will change depending on the project requirements, but in my experience, Functional and Regression are the most common, and in my opinion are a good baseline if you don’t have the capacity to write all the tests.

If you’re reading this, you probably fall into one of two categories:

  1. You’re already familiar with Visual Regression testing, and just want to know how to do it
  2. You’re just trying to get info on why Visual Regression testing is important, and how it can help your project.

In either case, it makes the most sense to dive right in, so let’s do it.

Tools

I’m going to be using WebdriverIO to do the heavy lifting. According to the website:

WebdriverIO is an open source testing utility for nodejs. It makes it possible to write super easy selenium tests with Javascript in your favorite BDD or TDD test framework.

It basically sends requests to a Selenium server via the WebDriver Protocol and handles its response. These requests are wrapped in useful commands and can be used to test several aspects of your site in an automated way.

I’m also going to run my tests on Browserstack so that I can test IE/Edge without having to install a VM or anything like that on my mac.

Process

Let’s get everything setup. I’m going to start with a Drupal 8 site that I have running locally. I’ve already installed that, and a custom theme with Pattern Lab integration based on Emulsify.

We’re going to install the visual regression tools with npm.

If you already have a project running that uses npm, you can skip this step. But, since this is a brand new project, I don’t have anything using npm, so I’ll create an initial package.json file using npm init.

  • npm init -y
    • Update the name, description, etc. and remove anything you don’t need.
    • My updated file looks like this:
{ "name": "visreg", "version": "1.0.0", "description": "Website with visual regression testing", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" } }   "name":"visreg",  "version":"1.0.0",  "description":"Website with visual regression testing",  "scripts":{    "test":"echo \"Error: no test specified\" && exit 1"

Now, we’ll install the npm packages we’ll use for visual regression testing.

  • npm install --save-dev webdriverio chai wdio-mocha-framework wdio-browserstack-service wdio-visual-regression-service node-notifier
    • This will install:
      • WebdriverIO: The main tool we’ll use
      • Chai syntax support: “Chai is an assertion library, similar to Node’s built-in assert. It makes testing much easier by giving you lots of assertions you can run against your code.”
      • Mocha syntax support “Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.”
      • The Browserstack wdio package So that we can run our tests against Browserstack, instead of locally (where browser/OS differences across developers can cause false-negative failures)
      • Visual regression service This is what provides the screenshot capturing and comparison functionality
      • Node notifier This is totally optional but supports native notifications for Mac, Linux, and Windows. We’ll use these to be notified when a test fails.

Now that all of the tools are in place, we need to configure our visual regression preferences.

You can run the configuration wizard by typing ./node_modules/webdriverio/bin/wdio, but I’ve created a git repository with not only the webdriver config file but an entire set of files that scaffold a complete project. You can get them here.

Follow the instructions in the README of that repo to install them in your project.

These files will get you set up with a fairly sophisticated, but completely manageable visual regression testing configuration. There are some tweaks you’ll need to make to fit your project that are outlined in the README and the individual markdown files, but I’ll run through what each of the files does at a high level to acquaint you with each.

  • .gitignore
    • The lines in this file should be added to your existing .gitignore file. It’ll make sure your diffs and latest images are not committed to the repo, but allow your baselines to be committed so that everyone is comparing against the same baseline images.
  • VISREG-README.md
    • This is an example readme you can include to instruct other/future developers on how to run visual regression tests once you have it set up
  • package.json
    • This just has the example test scripts. One for running the full suite of tests, and one for running a quick test, handy for active development. Add these to your existing package.json
  • wdio.conf.js
    • This is the main configuration file for WebdriverIO and your visual regression tests.
    • You must update this file based on the documentation in wdio.conf.md
  • wdio.conf.quick.js
    • This is a file you can use to run a quick test (e.g. against a single browser instead of the full suite defined in the main config file). It’s useful when you’re doing something like refactoring an existing component, and/or want to make sure changes in one place don’t affect other sections of the site.
  • tests/config/globalHides.js
    • This file defines elements that should be hidden in ALL screenshots by default. Individual tests can use this, or define their own set of elements to hide. Update these to fit your actual needs.
  • tests/config/viewports.js
    • This file defines what viewports your tests should run against by default. Individual tests can use these, or define their own set of viewports to test against. Update these to the screen sizes you want to check.

Running the Test Suite

I’ll copy the example homepage test from the example-tests.md file into a new file /web/themes/custom/visual_regression_testing/components/_patterns/05-pages/home/home.test.js. (I’m putting it here because my wdio.conf.js file is looking for test files in the _patterns directory, and I like to keep test files next to the file they’re testing.)

The only thing you’ll need to update in this file is the relative path to the globalHides.js file. It should be relative from the current file. So, mine will be:

const visreg = require('../../../../../../../../tests/config/globalHides.js'); constvisreg=require('../../../../../../../../tests/config/globalHides.js');

With that done, I can simply run npm test and the tests will run on BrowserStack against the three OS/Browser configurations I’ve specified. While they’re running, we can head over to https://automate.browserstack.com/ we can see the tests being run against Chrome, Firefox, and IE 11.

Once tests are complete, we can view the screenshots in the /tests/screenshots directory. Right now, the baseline shots and the latest shots will be identical because we’ve only run the test once, and the first time you run a test, it creates the baseline from whatever it sees. Future tests will compare the most recent “latest” shot to the existing baseline, and will only update/create images in the latest directory.

At this point, I’ll commit the baselines to the git repo so that they can be shared around the team, and used as baselines by everyone running visual regression tests.

If I run npm test again, the tests will all pass because I haven’t changed anything. I’ll make a small change to the button background color which might not be picked up by a human eye but will cause a regression that our tests will pick up with no problem.

In the _buttons.scss file, I’m going to change the default button background color from $black (#000) to $gray-darker (#333). I’ll run the style script to update the compiled css and then clear the site cache to make sure the change is implemented. (When actively developing, I suggest disabling cache and keeping the watch task running. It just makes things easier and more efficient.)

This time all the tests fail, and if we look at the images in the diff folder, we can clearly see that the “search” button is different as indicated by the bright pink/purple coloring.

If I open up one of the “baseline” images, and the associated “latest” image, I can view them side-by-side, or toggle back and forth. The change is so subtle that a human eye might not have noticed the difference, but the computer easily identifies a regression. This shows how useful visual regression testing can be!

Let’s pretend this is actually a desired change. The original component was created before the color was finalized, black was used as a temporary color, and now we want to capture the update as the official baseline. Simply Move the “latest” image into the “baselines” folder, replacing the old baseline, and commit that to your repo. Easy peasy.

Running an Individual Test

If you’re creating a new component and just want to run a single test instead of the entire suite, or you run a test and find a regression in one image, it is useful to be able to just run a single test instead of the entire suite. This is especially true once you have a large suite of test files that cover dozens of aspects of your site. Let’s take a look at how this is done.

I’ll create a new test in the organisms folder of my theme at /search/search.test.js. There’s an example of an element test in the example-tests.md file, but I’m going to do a much more basic test, so I’ll actually start out by copying the homepage test and then modify that.

The first thing I’ll change is the describe section. This is used to group and name the screenshots, so I’ll update it to make sense for this test. I’ll just replace “Home Page” with “Search Block”.

Then, the only other thing I’m going to change is what is to be captured. I don’t want the entire page, in this case. I just want the search block. So, I’ll update checkDocument (used for full-page screenshots) to checkElement (used for single element shots). Then, I need to tell it what element to capture. This can be any css selector, like an id or a class. I’ll just inspect the element I want to capture, and I know that this is the only element with the search-block-form class, so I’ll just use that.

I’ll also remove the timeout since we’re just taking a screenshot of a single element, we don’t need to worry about the page taking longer to load than the default of 60 seconds. This really wasn’t necessary on the page either, but whatever.

My final test file looks like this:

const visreg = require('../../../../../../../../tests/config/globalHides.js'); describe('Search Block', function () { it('should look good', function () { browser .url('./') .checkElement('.search-block-form', {hide: visreg.hide, remove: visreg.remove}) .forEach((item) => { expect(item.isWithinMisMatchTolerance).to.be.true; }); }); }); constvisreg=require('../../../../../../../../tests/config/globalHides.js');describe('Search Block',function(){  it('should look good',function(){    browser      .url('./')      .checkElement('.search-block-form',{hide:visreg.hide,remove:visreg.remove})      .forEach((item)=>{        expect(item.isWithinMisMatchTolerance).to.be.true;      });

With that in place, this test will run when I use npm test because it’s globbing, and running every file that ends in .test.js anywhere in the _patterns directory. The problem is this also runs the homepage test. If I just want to update the baselines of a single test, or I’m actively developing a component and don’t want to run the entire suite every time I make a locally scoped change, I want to be able to just run the relevant test so that I don’t waste time waiting for all of the irrelevant tests to pass.

We can do that by passing the --spec flag.

I’ll commit the new test file and baselines before I continue.

Now I’ll re-run just the search test, without the homepage test.

npm test -- --spec web/themes/custom/visual_regression_testing/components/_patterns/03-organisms/search/search.test.js

We have to add the first set of -- because we’re using custom npm scripts to make this work. Basically, it passes anything that follows directly to the custom script (in our case test is a custom script that calls ./node_modules/webdriverio/bin/wdio). More info on the run-script documentation page.

If I scroll up a bit, you’ll see that when I ran npm test there were six passing tests. That is one test for each browser for each test. We have two test, and we’re checking against three browsers, so that’s a total of six tests that were run.

This time, we have three passing tests because we’re only running one test against three browsers. That cut our test run time by more than half (from 106 seconds to 46 seconds). If you’re actively developing or refactoring something that already has test coverage, even that can seem like an eternity if you’re running it every few minutes. So let’s take this one step further and run a single test against a single browser. That’s where the wdio.conf.quick.js file comes into play.

Running Test Against a Subset of Browsers

The wdio.conf.quick.js file will, by default, run test(s) against only Chrome. You can, of course, change this to whatever you want (for example if you’re only having an issue in a specific version of IE, you could set that here), but I’m just going to leave it alone and show you how to use it.

You can use this to run the entire suite of tests or just a single test. First, I’ll show you how to run the entire suite against only the browser defined here, then I’ll show you how to run a single test against this browser.

In the package.json file, you’ll see the test:quick script. You could pass the config file directly to the first script by typing npm test -- wdio.conf.quick.js, but that’s a lot more typing than npm run test:quick and you (as well as the rest of your team) have to remember the file name. Capturing the file name in a second custom script simplifies things.

When I run npm run test:quick You’ll see that two tests were run. We have two tests, and they’re run against one browser, so that simplifies things quite a bit. And you can see it ran in only 31 seconds. That’s definitely better than the 100 seconds the full test suite takes.

Let’s go ahead and combine this with the technique for running a single test to cut that time down even further.

npm run test:quick -- --spec web/themes/custom/visual_regression_testing/components/_patterns/03-organisms/search/search.test.js

This time you’ll see that it only ran one test against one browser and took 28 seconds. There’s actually not a huge difference between this and the last run because we can run three tests in parallel. And since we only have two tests, we’re not hitting the queue which would add significantly to the entire test suite run time. If we had two dozen tests, and each ran against three browsers, that’s a lot of queue time, whereas even running the entire suite against one browser would be a significant savings. And obviously, one test against one browser will be faster than the full suite of tests and browsers.

So this is super useful for active development of a specific component or element that has issues in one browser as well as when you’re refactoring code to make it more performant, and want to make sure your changes don’t break anything significant (or if they do, alert you sooner than later). Once you’re done with your work, I’d still recommend running the full suite to make sure your changes didn’t inadvertently affect another random part of the site.

So, those are the basics of how to set up and run visual regression tests. In the next post, I’ll dive into our philosophy of what we test, when we test, and how it fits into our everyday development workflow.

Jul 20 2018
Jul 20

So, you've installed your version of Drupal and you're now ready to actually start building your website. What essential tools should you keep close at hand, as a site builder? Which are those both flexible and powerful must-have modules to start building your Drupal site from scratch?

The ones guaranteeing you a website that:
 

  1. integrates easily with all the most popular third-party services and apps
  2. is interactive and visually-appealing, irrespective of the user's device
  3. is a safe place for users to hang on, interact with, shop on, network on...
  4. is conveniently easy for content managers and admins to handle
     

Luckily, there are plenty of modules, themes and plugins to overload your toolbox with:

Long gone are the code-centric webmaster's “glory days”! Nowadays, as a Drupal site builder, you have a whole array of tools at your disposal to just start building and getting a Drupal site up and running in no time.

Sometimes without the need to write a single line of code!

But, let's not beat around the bush any longer and have a close look at these 10 essential modules that you'll need for your “Drupal 8 site building” project:
 

Definitely a must-have module:

Just consider that Drupal accepts ANY user password, be it a... one-letter password!

So, in order to set up your own stricter and safer password policy, you need to install this module here.

Then, you can easily define:
 

  • the minimal (and maximal) no. of characters that any user password on your Drupal site should include
  • the no. of special characters that it has to include
  • specific restrictions Like: "one can't use his/her email address as his/her password"
     

Why should this module, too, be in your essential toolkit of modules to start building your Drupal site with?

Because it implements the functionality to get notified — you, the admin or content manager —  as soon as a user posts a comment on the website.

Note: you can get “alerts” about both the logged in and the anonymous visitors' comments.
 

3. Breakpoints, One of the Must-Have Modules to Start Building Your Drupal Site 

It goes without saying that one of the Drupal site building best practices is providing it with a responsive web design.

And this is precisely what this module here facilitates:

Setting the proper media queries, once you've defined your own breakpoints.
 

A module whose functionality bubbles up to the content manager's experience.

Whenever he/she will have to make a selection involving both categories and subcategories, this hierarchical type of selection will prove to be more than useful:

Practically, once you/they select the “main” option, a new drop-down menu/widget including the subcategories to select from, pops up, as well. Like in the image here below:

Essential Modules to Start Building Your Drupal Site With: Simple Hierarchical Select

And complying with this EU notification is mandatory. 

So, this is why EU Cookie Compliance is another one of the essential modules to start building your Drupal site with:

It displays the given notification — providing visitors with the option to agree or/and to read more information about your cookie policy —  in the footer of your website.
 

6. Shield              

Any Drupal site building guide would advise you to install a module that shields your website from anonymous users and search engines when running your test environments.

And this is what Shield is built for:

To screen your site from the rest of the world —  except for you and the logged in users — when you deploy it in a test environment.

A more than convenient method, as compared to manually setting up a .htpasswd and then integrating it with .htaccess.
 

If you're not just another Drupal site builder, but a user experience-centric one, you must consider also those modules to build your Drupal site with that boost the level of user interactivity.

Like Beauty Tips here.

It displays balloon-help style tooltips whenever a user hovers over a certain text or page element on your website.

Pretty much like Bootstrap tooltip does.
 

Another one of the Drupal site building best practices is to turn it into a safe place for your users to be. 

In short: to protect their privacy.

And if you're building a website that's available on both HTTP and HTTPS, the Secure Login module comes in handy as it makes sure that:
 

  1. the user login form
  2. all the other fill-in forms that you'll configure for extra security
     

… get submitted via HTTPS.

It locks them down, enforcing secure authenticated session cookies, so that user passwords and other critical user data don't get exposed all over the internet.
 

It's another one of those essential modules to start building your Drupal site with if you're determined to provide the best user experience there.

What does it do?

It enables particular visitors on your site — those granted permission to edit and to add new menu items — to choose whether they open menu items in new windows or in the current ones.
 

A module that makes up for the “Remember me” feature that's missing from the user login screen in Drupal:

It comes to implement this missing option, one independent from the PHP session settings.

So, we're not talking about the conventional, too long “PHP session time” here, but about a more secure and user-friendly “Remember me” feature added to the login form.

Furthermore, the module enables you to define some extra security policies, too:
 

  • the no. of persistent sessions that a Drupal user can enjoy at the same time
  • specific pages where users still have to log in again
  • after how long the logged-in users will need to re-enter their credentials once again
     

And 2 “Extra” Modules to Consider When Building Your Drupal Site

By “extra” I mean that they're not really essential modules to start building your Drupal site with. Yet, they're the first 2 ones to consider right after you've put together your “survival” toolkit as a site builder:
 

1. Site Settings & Labels    

Take this common scenario:

You need to display a social network URL on multiples pages on your Drupal site. 

What do you do?
 

  1. you hard coding this single setting in the source
  2. you start building a custom Drupal module for handling this variable
  3. you install the Site Settings & Labels module and thus display a checkbox to render page elements through a template conditional
     

The “c” variant's undoubtedly the winner here. 

A win-win for you, in fact:
 

  1. you save the time you'd otherwise have spent coding
  2. you improve the user experience on your Drupal site
     

2. Slick/Slick Views/Slick Media          

It's actually a suite of modules to start building your Drupal site with. One “injecting” the needed functionality so that you can easily set up:
 

  • carousels
  • slideshows
     

… on your freshly built website.

Note!

I won't lie to you: setting up the library dependencies is not exactly a child's play. Yet, once you've succeeded it, configuring the modules in this suite, right in your Drupal admin, is piece of cake.

The END! These are the 10 must-have modules to start building your Drupal site from scratch with. Would you have added some more? 

Or maybe you wouldn't have included some of the modules listed here, as you don't consider them “essential”?

A penny for your thoughts!

Jul 18 2018
Jul 18

Let's say that it's a WhatsApp-like, a decoupled, Drupal 8-backed, real-time chat platform that you're building. One using Node.js. In this case, implementing field autocomplete functionality becomes a must, doesn't it? But how do you add autocomplete to text fields in Drupal 8?

Needless to add that such otherwise "basic" functionality — implemented on fields like node reference and user/tags — would instantly:
 

  1. improve the user experience 
  2. increase the level of user interactivity and engagement
     

Users would group around different "channels" and be able to easily add new members. The auto-complete text fields will make the whole “new member coopting” process conveniently easy:

Users would only need to start typing and an array of name suggestions (of the already existing team members) would spring up.

But let's see, specifically, what are the steps to take to implement autocomplete functionality in Drupal 8:
 

1. The Drupal Autocomplete Form Element: Adding Properties to the Text Field

The first basic step to take is to define your form element. The one that will enable your app's users, on the front-end, to select from the suggested team members' names. For this:
 

  1. navigate to “Form” (you'll find it under “Entity”)
  2. scroll the menu down to ”NewChannelForm.php”
     

Note: using “#autocomplete_route_name element”, when defining your form element, will let Drupal know that it should ignore it on the front-end.

And now, let's go ahead and assign specific properties to your form's text field! For this:
 

  1. define “#autocomplete_route_name”, so that the autocomplete JavaScript library uses the route name of callback URL
  2. define “#autocomplete_route_parameters”, so that an array of arguments gets passed to autocomplete handler
     
$form['name'] = array(
    '#type' => 'textfield',
    '#autocomplete_route_name' => 'my_module.autocomplete',
    '#autocomplete_route_parameters' => array('field_name' => 'name', 'count' => 5),
);


And this is how you add #autocomplete callback to your fill-in form's text field in Drupal 8!

Note: in certain cases — where you have additional data or different response in JSON —  the core-provided routes might just not be enough. Then, you'll need to write an autocomplete callback using the “my_module. autocomplete“ route and the proper arguments (“name” for the field name and “5” as count, let's say).

And here's specifically how you write a custom route:
 

2. Add Autocomplete to Text Fields in Drupal 8: Define a Custom Route

How? By simply adding the reference to the route — where data will get retrieved from — to your “my_module.routing.yml file”:
 

my_module.autocomplete: path: '/my-module-autocomplete/{field_name}/{count}' defaults: _controller: '\Drupal\my_module\Controller\AutocompleteController::handleAutocomplete' _format: json requirements: _access: 'TRUE' 


Note: remember to use the same names in the curly braces (those that you inserted when you defined your “autocomplete_route_parameters”) when you pass parameters to the controller!
 

3. Add Controller with Custom Query Parameters

In the custom route that you will have defined, you'll have a custom controller AutocompleteController, with the handleAutocomplete method.

Well, it's precisely this method that makes sure that the proper data gets collected and properly formatted once served.

But let's delve deeper into details and see how precisely we can generate the specific JSON response for our text field element.

For this, we'll need to:
 

  • set up a AutoCompleteController class file under “my_module>src>Controller > AutocompleteController.php"
     
  • then, extend the ControllerBase class and set up our handle method (the one “responsible” for displaying the proper results)
     
  • it's the Request object and those arguments already defined in your routing.yml.file (“name” for the field name and “5” for the count, remember?) that will pass for your handler's parameters
     
  • the Request object will be the one returning the typed string from URL, whereas the “field_name” and the “count” route parameters will be the ones providing the results array.
     

Note: once you get to this step here, as you add autocomplete to text fields in Drupal 8, remember that you should be having data in “value” and “label” key-value, as well:

Next, you'll set up a new JsonResponse object and pass $results, thus generating a return JsonResponse.
 

Summing Up

That's pretty much all the “hocus pocus” that you need to do to add autocomplete to text fields in Drupal 8. Now the proper data results should be generated.

Just reload your app's form page and run a quick test:

Try to create a brand new channel in your app and to add some of the already existing team members.

Does the text field have autocomplete functionality added to?

Jul 17 2018
Jul 17

[embedded content]

In the video above, you’ll learn how to build powerful media management functionality using Drupal 8.5. I start the webinar with a review of what’s new in Drupal 8 and then jump right into a live demo.

If you prefer text, then read our tutorial on “Managing Media Assets using Core Media in Drupal 8“.

Modules

In the video we use the following modules:

Below is a time coded list of all the sections in the video. Just click on the time code and it’ll jump to that part of the video.

Video Sections

  • Agenda: (00:41)
  • What’s new in Drupal 8: (01:35)
  • Required Modules: (09:53)
  • Demo time: (11:02)
  • Install Media module: (11:49)
  • How to Upload and view assets: (12:34)
  • Overview of Media types: (14:42)
  • Create remote video media type: (15:34)
  • Field mapping in media types: (17:45)
  • Create remote video asset: (18:52)
  • Customize remote video formatters: (19:48)

Media Field

  • Attach media field to Article content type: (20:24)
  • Using Inline Entity Form on media field: (22:53)
  • Install Inline Entity Form: (23:27)
  • Configure IEF on media field widget: (24:46)

Entity Embed

  • Install Entity Embed: (27:44)
  • Create embed button: (28:37)
  • Configure text format for embed button: (29:40)
  • Testing embed button: (32:27)

Entity Browser

  • Install Entity Browser: (35:50)
  • Create entity browser: (38:21)
  • Integrating entity browser and entity embed: (39:45)
  • Create view for entity browser: (41:02)
  • Add IEF to entity browser: (47:35)

Entity Browser and DropzoneJS

  • Add dropzonejs to entity browser: (51:59)
  • Customize fields on media types using form modes: (54:26)

Drupal 8.6

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Jul 10 2018
Jul 10

Let's say that you need to spin up a new Drupal environment in... minutes. To quickly test a new patch to Drupal core, maybe, or to switch between 2 or more clients on the same day and thus to run multiple copies on several websites... In this case, how about taking the quick and easy way and set up a local Drupal site with Lando?

"What is Lando?" you might legitimately ask yourself.

A DevOps tool and Docker container-based technology enabling you to spin up all the services and tools that you need to develop a new Drupal project in no time.

"Why would I choose Lando as a method to set up a local Drupal site?"

Let me list here some of the strongest reasons:
 

  • it makes setting up a local Drupal site unexpectedly easy (and I'm talking about "minutes" here)
  • it makes getting started with Docker container technology a whole lot easier
  • it enables you to share your Drupal site's configuration within your team right on your Git repository (taking the form of a YAML file)
  • it puts several development environments (LEMP, MEAN, LAMP) at your disposal
     

Are these reasons strong enough for you?

If so, here's a quick step-by-step guide on how precisely to set up a Drupal site with Lando:
 

Step 1: First, Make Sure You Meet the System Requirements

If, as a web developer, you're not efficient with using the command line... well... then there are high chances that you find this tutorial here a bit discouraging.

And if being more than just familiar with the command line is not a strict requirement, then the following system requirements () are:
 

  • macOS 10.10+
  • Linux (with kernel version 4.x or higher)
  • Windows 10 Pro+ (or equivalent) with Hyper-V running
     

These are the 3 operating systems that Lando's currently compatible with. Now, let's move on...
 

Step 2: Download and Install Lando and Docker 

Go to Lando releases on Github and download the latest version for your OS. Just run the installer and let it "do the job" for you:
 

  • install Docker for Windows, Docker for Mac, Docker CE
  • install Lando: for Mac run brew cask install Lando and for other OS download the .rpm, .dmg, .exe or .deb
     

Step 3: Create a New Drupal Project

Luckily for you, there are several ways to get a Drupal codebase. Pick the one that you're most comfortable with as you set up a local Drupal site with Lando:
 

  1. install Drupal 8 the standard way (the first step there being "Get the Code"); next, grab the latest version of Drupal 8 navigating to "Download & Extend"
  2. or use Composer to create your new Drupal project: drupal-composer/drupal-project:8.x-dev my_drupal_project --stability dev –no-interaction
  3. or just navigate somewhere on your PC and use GIT to clone it: git clone --branch 8.6.x https://goo.gl/Q3MoVu lando-d8
     

Step 4: Set Up a Local Drupal Site with Lando: Extract Drupal

To extract Drupal just:

  1. open up your terminal window
  2. enter the commands here below:
cd Sites
tar xzf /tmp/drupal-8.5.1.tar.gz
mv drupal-8.5.1 drupal-lando
cd drupal-lando

And thus set up the Sites/drupal-lando/ directory inside your home directory


Step 5: Set Up Lando   

Now's time to initialize Lando and enable it to create a basic configuration file for you.

And, again, you have more than just one option at hand:
 

  1. while still in your terminal window, run the following command and specify the Drupal 8 recipe and your web root as web, next name it "drupal-lando": lando init --recipe drupal8 --webroot=. --name="drupal-lando"
  2. or just launch the interactive session: run "lando init" interactively
     

Next, it's the following YAML file/ ".lando.yml", that it will create:

name: drupal-lando
recipe: drupal8
config:
  webroot: .

Note: feel free to ignore the "lando init" step and to jump straight to copying and pasting this file here.
 

Step 6: Start Your Environment & Wait for Your Docker Containers to Get Set Up

And here you are now, at that step from the whole process where you set up a local Drupal site with Lando where you start your Docker engine.

For this, just run the following command in your terminal window:

lando start 

If everything goes according to plan, this is where Lando starts Docker and sets up 2 containers.

Next, feel free to run:

lando composter install

It's going to use PHP/Composer inside the newly created Docker container for building Drupal's Composer dependencies.
 

Step 7: Browse to Your Site's URL and Walk Through the Drupal Installation Process

Time to install your new clean Drupal 8 site now.

Just visit your local site in the web browser and walk through the Drupal wizard install process (since your new site starts with an empty database, you will be automatically directed to the Install page)

Set Up a Local Drupal Site with Lando- Drupal Installation

Once you reach the step where you need to configure your database, enter these options here:
 

  • Database host: database
  • Database name, username, password: drupal 8
     

Next, unfold the "Advanced Options" drop-down menu and:
 

  1. replace "localhost", currently showing up in the "Host" field, with "database"
  2. hit the "Save and continue" button and let the Drupal installation process carry out
     

You'll set up a local Drupal site with Lando in... minutes! A brand new website that you can then easily:
 

  • test
  • debug
  • manage with Composer
     

Optionally, you can add a new service of your liking (e.g. MailHog, for catching outbound mails) and custom tune your setup right from your .lando.yml.file.

Set Up a Local Drupal Site with Lando- Welcome to Drupal Lando

The END! And this is how you do it... Told you it was just a matter of a few easy steps! 

Jul 04 2018
Jul 04

I'm a woman of my word, as you can see: here I am now, as promised in my previous post on the most effective ways to secure a Drupal website, ready to run a “magnifying glass” over the best Drupal security modules. To pinpoint their main characteristics and most powerful features and thus to reveal why they've made it to this list.

And why you should put them at the top of your own Drupal security checklist.

So, shall we dig in?
 

It's only but predictable that since the login page/form is the entry to your Drupal site, it is also the most vulnerable page there, as well.

Therefore, secure it!

In this respect, what this module enables site admins to do is :

  • define a certain number of login attempts; too many invalid authentication attempts will automatically block that account
  • block/limit access for specific IPs
     

Moreover, you get notified by email or via Nagios notifications when someone is just username/password guessing or using other kinds of brute force techniques to log into your Drupal site.

In short: the Login Security module, through its variety of options that it “spoils” you with, empowers you to set up a custom login policy on your site. To define your own restrictions and exceptions.

As already mentioned here, on this blog, when we've tackled the topic of Drupal security:

Keeping your Drupal core updated is that easily underrated, yet most powerful security measure that you could implement!

Now what this module here does is assisting you in keeping your Drupal codebase up to date: safely patched and having all the crucial upgrades.

And I don't need to remind you the security risk(s) that all those site owners ignoring the latest patches to Drupal core expose their websites to, right? 
 

Captcha is one of the best Drupal security modules since it's one of the most used ones.

And no wonder: could you imagine submission forms on your website with no Captcha? The age-old system is one of the handiest ways to keep spammers and spambots away.

So, having this module “plugged in”, providing you with the needed captcha support, becomes wisely convenient.
 

The module enables you, as your Drupal site's admin, to define specific rules for “wannabe users” to follow when they set up their account passwords.

From constraints related to:
 

  • special symbols that those passwords should include, to ramp up both the given account's and your own site's security
  • to uppercase letters
  • to numbers...
     

… once you plug in this Drupal security module in, it's you who gets to set up the policy for creating account passwords.
 

5. Security Review, One of the Best Drupal Security Modules

The Security Review module is that “Swiss knife” that you need for hardening your site's shield.

Meaning that it's an all-in-one tool. One that comes with its own Drupal security checklist that it regularly goes through and sets against your website, detecting any missing or improperly implemented security measures.

Moreover, it automates a whole series of tests for tracking down any signs of exploits and brute-force attacks:
 

  • arbitrary PHP execution
  • XSS exploits
  • SQL injection
  • suspicious PHP or JavaScript activity in content nodes
     

Once it identifies the vulnerabilities, it “alerts” you and gives you the best recommendations for mitigating those security risks. All you need to do is follow the suggestions.
 

Another module that “empowers” you to take full control over the security strategy on your Drupal site. To set up specific options for minimizing the chances of exploitable “cracks” showing up in its security shield:

For instance, it could recommend you to set up HTTP headers on your Drupal site.
 

Here's another one of those best Drupal security modules that's also one of the widely used ones.

Why is it a must-have on your own Drupal site? Because it enables you to set a limit to the number of simultaneous sessions per user, per role.

This way, you trim down the chances of suspicious activity being carried out on your site and eventually leading to brute-force attacks.
 

Another module that's a must on your Drupal site:

It basically enables you, the site admin, to define a policy that would log out users after a specified time period of inactivity. 
 

LinkedIn, Google, Twitter, Instagram, Facebook are just some of the big names that have adopted this user authentication method for security reasons. So, why shouldn't you, too?

Especially when you have a dedicated module at hand, Two Factor Authentication, to:
 

  • provide you with various methods to select from: pre-generated codes, time-based one-time PINS or passwords, codes sent via SMS etc.
  • give you full freedom in defining that two-factor authentication strategy that suits your site best
     

The principle is as simple for the user, as it is effective for your website, from a security standpoint:

The user gets a security code that he/she'll then need to use for logging into your Drupal site.
 

A command-line tool, with IDE support, that gives your codebase a deep scan and detects any drift from the coding standards and best practices.

Why has it made it to this exclusive list of 15 best Drupal security modules? Cause vulnerabilities might be lurking right in your Drupal code, not necessarily in your users' weak passwords or unpatched core modules.

Having a tool at hand that would identify and notify you of all those weak links in your code, where the best practices aren't being followed, is just... convenience at its best.
 

Another key module to add to your Drupal security checklist. 

For you do agree that email addresses are some of hackers' easiest ways to infiltrate into your website, don't you? 

Now what this module here does is obfuscate email addresses so that spambots can't collect them.

Note: a key strength of SpamSpan is that it uses JavaScript for this process, which enhances accessibility.
 

12. ACL      

“A set of APIs” This is how we could define this module here, which doesn't come with its own UI.

Its key role? To enable other Drupal modules on your website to set up a list of users that would get selective access to specific nodes on your site.
 

Why is Paranoia one of the best Drupal security modules?

Because it will end your “paranoia” — as its name suggests — that an ill-intentioned user might evaluate arbitrary code on your site.

The module practically identifies all those vulnerable areas where a potential attacker could exploit your site's code and blocks them.
 

Limiting or blocking access to key content types on your site is no more than a common-sense security measure to take, don't you agree?

Therefore, this module here's designed to assist you throughout this process:
 

  • as you define detailed permissions on your site: to view/edit/ delete specific content types
  • … by user role and by author 
     

Word of caution: do keep in mind that, since Content Access uses Drupal's node API, you shouldn't enable other modules using the same endpoints on your website!
 

A module that ramps up not just your site's security, but also its accessibility.

Just think about it:

Nowadays anyone has at least one Google account. Therefore, “anyone” can easily log into your website using his/her own Google account credentials.

Once, of course, you will have installed and turned this Drupal module on.

END of list! These are the 15 best Drupal security modules worth installing on your site. 

Scan them through, weigh their key features, set them against your site's specific security needs and make your selection!

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