Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Sep 23 2020
Sep 23

Working in digital design and development, you grow accustomed to the rapid pace of technology. For example: After much anticipation, the latest version of Drupal was released this summer. Just months later, the next major version is in progress.

At July’s all-virtual DrupalCon Global, the open-source digital experience conference, platform founder Dries Buytaert announced Drupal 10 is aiming for a June 2022 release. Assuming those plans hold, Drupal 9 would have the shortest release lifetime of any recent major version.

For IT managers, platform changes generate stress and uncertainty. Considering the time-intensive migration process from Drupal 7 to 8, updating your organization’s website can be costly and complicated. Consequently, despite a longtime absence of new features, Drupal 7 still powers more websites than Drupal 8 and 9 combined. And, as technology marches on, the end of its life as a supported platform is approaching.

Fortunately, whatever version your website is running, Drupal is not running away from you. Drupal’s users and site builders may be accustomed to expending significant resources to update their website platform, but the plan for more frequent major releases alleviates the stress of the typical upgrade. And, for those whose websites are still on Drupal 7, Drupal 10 will continue offering a way forward.

The news that Drupal 10 is coming sooner rather than later might have been unexpected, but you still have no reason to panic just yet. However, your organization shouldn’t stand still, either.

Image via Dri.es

The End for Drupal 7 Is Still Coming, but Future Upgrades Will Be Easier

Considering upgrading to Drupal 8 involves the investment of building a new site and migrating its content, it’s no wonder so many organizations have been slow to update their platform. Drupal 7 is solid and has existed for nearly 10 years. And, fortunately, it’s not reaching its end of life just yet.

At the time of Drupal 9’s release, Drupal 7’s planned end of life was set to arrive late next year. This meant the community would no longer release security advisories or bug fixes for that version of the platform. Affected organizations would need to contact third-party vendors for their support needs. With the COVID-19 pandemic upending businesses and their budgets, the platform’s lifespan has been extended to November 28, 2022.

Drupal’s development team has retained its internal migration system through versions 8 and 9, and it remains part of the plan for the upcoming Drupal 10 as well. And the community continues to maintain and improve the system in an effort to make the transition easier. If your organization is still on Drupal 7 now, you can use the migration system to jump directly to version 9, or version 10 upon its release. Drupal has no plans to eliminate that system until Drupal 7 usage numbers drop significantly.

Once Drupal 10 is ready for release, Drupal 7 will finally reach its end of life. However, paid vendors will still offer support options that will allow your organization to maintain a secure website until you’re ready for an upgrade. But make a plan for that migration sooner rather than later. The longer you wait for this migration, the more new platform features you’ll have to integrate into your rebuilt website.

Initiatives for Drupal 10 Focus on Faster Updates, Third-Party Software

In delivering his opening keynote for DrupalCon Global, Dries Buytaert outlined five strategic goals for the next iteration of the platform. Like the work for Drupal 9 that began within the Drupal 8 platform, development of Drupal 10 has begun under the hood of version 9.

A Drupal 10 Readiness initiative focuses on upgrading third-party components that count as technological dependencies. One crucial component is Symfony, which is the PHP framework Drupal is based upon. Symfony operates on a major release schedule every two years, which requires that Drupal is also updated to stay current. The transition from Symfony 2 to Symfony 3 created challenges for core developers in creating the 8.4 release, which introduced changes that impacted many parts of Drupal’s software.

To avoid a repeat of those difficulties, it was determined that the breaking changes involved in a new Symfony major release warranted a new Drupal major release as well. While Drupal 9 is on Symfony 4, the Drupal team hopes to launch 10 on Symfony 6, which is a considerable technical challenge for the platform’s team of contributors. However, once complete, this initiative will extend the lifespan of Drupal 10 to as long as three or four years.

Other announced initiatives included greater ease of use through more out-of-the-box features, a new front-end theme, creating a decoupled menu component written in JavaScript, and, in accordance with its most requested feature, automated security updates that will make it as easy as possible to upgrade from 9 to 10 when the time comes. For those already on Drupal 9, these are some of the new features to anticipate in versions 9.1 through 9.4.

Less Time Between Drupal Versions Means an Easier Upgrade Path

The shift from Drupal 8 to this summer’s release of Drupal 9 was close to five years in the making. Fortunately for website managers, that update was a far cry from the full migration required from version 7. While there are challenges such as ensuring your custom code is updated to use the most recent APIs, the transition was doable with a good tech team at your side.

Still, the work that update required could generate a little anxiety given how comparatively fast another upgrade will arrive. But the shorter time frame will make the move to Drupal 10 easier for everybody. Less time between updates also translates to less deprecated code, especially if you’re already using version 9. But if you’re not there yet, the time to make a plan is now.

Jan 23 2020
Jan 23

In the Drupal support world, working on Drupal 7 sites is a necessity. But switching between Drupal 7 and Drupal 8 development can be jarring, if only for the coding style.

Fortunately, I’ve got a solution that makes working in Drupal 7 more like working in Drupal 8. Use this three-part approach to have fun with Drupal 7 development:

  • Apply Xautoload to keep your PHP skills fresh, modern, and compatible with all frameworks and make your code more reusable and maintainable between projects. 
  • Use the Drupal Libraries API to use third-party libraries. 
  • Use the Composer template to push the boundaries of your programming design patterns. 

Applying Xautoload

Xautoload is simply a module that enables PSR-0/4 autoloading. Using Xautoload is as simple as downloading and enabling it. You can then start using use and namespace statements to write object-oriented programming (OOP) code.

For example:

xautoload.info

name = Xautoload Example
description = Example of using Xautoload to build a page
core = 7.x package = Midcamp Fun

dependencies[] = xautoload:xautoload

xautoload_example.module

<?php use Drupal\xautoload_example\SimpleObject; function xautoload_example_menu() { $items['xautoload_example'] = array( 'page callback' => 'xautoload_example_page_render', 'access callback' => TRUE, ); return $items; } function xautoload_example_page_render() { $obj = new SimpleObject(); return $obj->render(); } useDrupal\xautoload_example\SimpleObject;functionxautoload_example_menu(){  $items['xautoload_example']=array(    'page callback'=>'xautoload_example_page_render',    'access callback'=>TRUE,  return$items;functionxautoload_example_page_render(){  $obj=newSimpleObject();  return$obj->render();

src/SimpleObject.php

<?php namespace Drupal\xautoload_example; class SimpleObject { public function render() { return array( '#markup' => "<p>Hello World</p>", ); } } namespaceDrupal\xautoload_example;classSimpleObject{  publicfunctionrender(){    returnarray(      '#markup'=>"<p>Hello World</p>",    );

Enabling and running this code causes the URL /xautoload_example to spit out “Hello World”. 

You’re now ready to add in your own OOP!

Using Third-Party Libraries

Natively, Drupal 7 has a hard time autoloading third-party library files. But there are contributed modules (like Guzzle) out there that wrap third-party libraries. These modules wrap object-oriented libraries to provide a functional interface. Now that you have Xautoload in your repertoire, you can use its functionality to autoload libraries as well.

I’m going to show you how to use the Drupal Libraries API module with Xautoload to load a third-party library. You can find examples of all the different ways you can add a library in xautoload.api.php. I’ll demonstrate an easy example by using the php-loremipsum library:

1. Download your library and store it in sites/all/libraries. I named the folder php-loremipsum. 

2. Add a function implementing hook_libraries_info to your module by pulling in the namespace from Composer. This way, you don’t need to set up all the namespace rules that the library might contain.

function xautoload_example_libraries_info() { return array( 'php-loremipsum' => array( 'name' => 'PHP Lorem Ipsum', 'xautoload' => function ($adapter) { $adapter->composerJson('composer.json'); } ) ); } functionxautoload_example_libraries_info(){  returnarray(    'php-loremipsum'=>array(      'name'=>'PHP Lorem Ipsum',      'xautoload'=>function($adapter){        $adapter->composerJson('composer.json');      }

3. Change the page render function to use the php-loremipsum library to build content.

use joshtronic\LoremIpsum; function xautoload_example_page_render() { $library = libraries_load('php-loremipsum'); if ($library['loaded'] === FALSE) { throw new \Exception("php-loremipsum didn't load!"); } $lipsum = new LoremIpsum(); return array( '#markup' => $lipsum->paragraph('p'), ); } usejoshtronic\LoremIpsum;functionxautoload_example_page_render(){  $library=libraries_load('php-loremipsum');  if($library['loaded']===FALSE){    thrownew\Exception("php-loremipsum didn't load!");  $lipsum=newLoremIpsum();  returnarray(    '#markup'=>$lipsum->paragraph('p'),

Note that I needed  to tell the Libraries API to load the library, but I then have access to all the namespaces within the library. Keep in mind that the dependencies of some libraries are immense. You’ll very likely need to use Composer from within the library and commit it when you first start out. In such cases, you might need to make sure to include the Composer autoload.php file.

Another tip:  Abstract your libraries_load() functionality out in such a way that if the class you want already exists, you don’t call libraries_load() again. Doing so removes libraries as a hard dependency from your module and enables you to use Composer to load the library later on with no more work on your part. For example:

function xautoload_example_load_library() { if (!class_exists('\joshtronic\LoremIpsum', TRUE)) { if (!module_exists('libraries')) { throw new \Exception('Include php-loremipsum via composer or enable libraries.'); } $library = libraries_load('php-loremipsum'); if ($library['loaded'] === FALSE) { throw new \Exception("php-loremipsum didn't load!"); } } } functionxautoload_example_load_library(){  if(!class_exists('\joshtronic\LoremIpsum',TRUE)){    if(!module_exists('libraries')){      thrownew\Exception('Include php-loremipsum via composer or enable libraries.');    $library=libraries_load('php-loremipsum');    if($library['loaded']===FALSE){      thrownew\Exception("php-loremipsum didn't load!");

And with that, you’ve conquered the challenge of using third-party libraries!

Setting up a New Site with Composer

Speaking of Composer, you can use it to simplify the setup of a new Drupal 7 site. Just follow the instructions in the Readme for the Composer Template for Drupal Project. From the command line, run the following:

composer create-project drupal-composer/drupal-project:7.x-dev <YOUR SITE DIRECTORY> --no-interaction

This code gives you a basic site with a source repository (a repo that doesn’t commit contributed modules and libraries) to push up to your Git provider. (Note that migrating an existing site to Composer involves a few additional considerations and steps, so I won’t get into that now.)

If you’re generating a Pantheon site, check out the Pantheon-specific Drupal 7 Composer project. But wait: The instructions there advise you to use Terminus to create your site, and that approach attempts to do everything for you—including setting up the actual site. Instead, you can simply use composer create-project  to test your site in something like Lando. Make sure to run composer install if you copy down a repo.

From there, you need to enable the Composer Autoload module , which is automatically required in the composer.json you pulled in earlier. Then, add all your modules to the require portion of the file or use composer require drupal/module_name just as you would in Drupal 8.

You now have full access to all the  Packagist libraries and can use them in your modules. To use the previous example, you could remove php-loremipsum from sites/all/libraries, and instead run composer require joshtronic/php-loremipsum. The code would then run the same as before.

Have fun!

From here on out, it’s up to your imagination. Code and implement with ease, using OOP design patterns and reusable code. You just might find that this new world of possibilities for integrating new technologies with your existing Drupal 7 sites increases your productivity as well.

Dec 09 2019
Dec 09

With Drupal 9 set to be released later next year, upgrading to Drupal 8 may seem like a lost cause. However, beyond the fact that Drupal 8 is superior to its predecessors, it will also make the inevitable upgrade to Drupal 9, and future releases, much easier. 

Acquia puts it best in this eBook, where they cover common hangups that may prevent migration to Drupal 8 and the numerous reasons to push past them.

The Benefits of Drupal 8

To put it plainly, Drupal 8 is better. Upon its release, the upgrade shifted the way Drupal operates and has only improved through subsequent patches and iterations, most recently with the release of Drupal 8.8.0

Some new features of Drupal 8 that surpass those of Drupal 7 include improved page building tools and content authoring, multilingual support, and the inclusion of JSON:API as part of Drupal core. We discussed some of these additions in a previous blog post

Remaining on Drupal 7 means hanging on to a less capable CMS. Drupal 8 is simply more secure with better features.

What Does Any of This Have to Do With Drupal 9?

With an anticipated release date of June 3, 2020, Drupal 9 will see the CMS pivot to an iterative release model, moving away from the incremental releases that have made upgrading necessary in the past. That means that migrating to Drupal 8 is the last major migration Drupal sites will have to undertake. As Acquia points out, one might think “Why can’t I just wait to upgrade to Drupal 9?” 

While migration from Drupal 7 or Drupal 8 to Drupal 9 would be essentially the same process, Drupal 7 goes out of support in November 2021. As that deadline approaches, upgrading will only become an increasingly pressing necessity. By migrating to Drupal 8 now, you avoid the complications that come with a hurried migration and can take on the process incrementally. 

So why wait? 

To get started with Drupal migration, be sure to check out our Drupal Development Services, and come back to our blog for more updates and other business insights. 
 

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 08 2019
Feb 08

Web monetization service is a browser API which allow creation of (micro) payments between the reader (user agent) and the content provider (website).

This is one way of getting paid for valuable content.

Today Coil is providing web monetization service using Interledger protocol (ILP).

We have built a simple module to integrate coil monetization with Drupal website.

We are proposing a new beta version with enhanced possibilities to monetized your content:

  • New fields are added to "Articles" and "Basic page" for monetization;
  • Content type can be restricted to coil subscribers;
  • Subscription alert can be customized (text and color).

The following video will give you a preview of the new options available:

Please feel free to test and recommend improvements for this new version.

As a matter of demonstration, some text is reserved below for coil subscribers. You may experiment it directly. However, don't worry content below is not fundamental to appreciate the full article.

Feb 05 2019
Feb 05
How do you start contributing to Drupal without code?nstagram iconouTube icon

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1114119085333160&amp;ev=PageView&amp;nosc...">

<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=247202&amp;fmt=gif">

Outlets for contributing to Drupal beyond code, whilst abundant, are not always evident to those having interest to do so. I want to help people become better acquainted with ways to get involved and how to start their contribution journey. Be they completely new to Drupal or simply yet to find an outlet.

At DrupalCamp London 2019 I will be speaking about non-code contributions and invite you to share your experiences and ideas. Open my eyes to the many ways individuals can create impact with their time, without knowing code at all.

Your participation will ensure attendees discover a multitude of ways to get involved well beyond my experiences alone. In doing so you are embodying the principle of contributing without code.

Therefore I have set up a Google Form to collect suggestions from the community. Please complete it with as many ideas as you have and I look forward to reading your suggestions!

 

Share your ideas

Jan 30 2019
Jan 30

Drupal Camp London is a 3-day event celebrating the users, designers, developers and advocates of Drupal and its community! Attracting 500 people from across Europe, after Drupalcon, it’s one of the biggest events in the Drupal Calendar.

CxO day, on Friday 1st March, is dedicated to businesses using Drupal, encouraging them to lead development and innovation of the Drupal platform.

The weekend (2nd & 3rd March) then packs in over 40 sessions covering seminars, Birds of a feather talks, Sprints and much more. Over the weekend there are also 3 Keynotes addressing the biggest upcoming changes to the technical platform, its place in the market, and the wider Drupal community.

 

Drupal camp 2018 Ryan SzramaRyan Szrama delivering a session at Drupal Camp 2018, Photo Cred: @pdjohnson

 

Our Weekend Sessions

Our Drupal Director, Paul Johnson, will be focussing on contributions to Drupal, but not as you know them. The session will be diving into a whole host of ways to contribute to Drupal that don’t require code. From content writing to photography, this session includes something for everyone and is guaranteed to spark some inspiration for new Drupal community initiatives.

 

Our UX specialist, James Genchi, will also be speaking at Drupal Camp London about UX and accessibility. With a background in development and a passion for user experience, James’ understanding of accessibility within design and development is vast. Following a substantial redesign for the University of West London, James will be sharing the unique design considerations he applied to achieve global accessibility within the website. In particular, he will be highlighting how accessible design is not just for people with a permanent disability, but also for those with a temporary and situational disability.

Be sure to follow us on twitter  so you don't miss either of these sessions!

Why should you attend Drupal Camp? 

[embedded content]

 

Exchange knowledge

Discover the latest in UX, design, development, business and more. There’s no limit to the types of topics that could come up...as long as they relate to Drupal that is!

Network

From C-Level and Site managers to developers and designers, over 500 people attended last year. Meet the best and brightest in the industry at talks and breakouts.

Recruit and be recruited

A wide variety of business and developers attend Drupal Camp, make the most of it by creating connections to further your own career or grow your agency team.

Reasons for attending the weekend eventImg Cred: Drupal Camp

 

 

We hope to see you there! Grab your ticket while you still can on the Drupal Camp website.

Tickets 

And be sure to follow us on your social platform of choice to find out when our sessions are!

 

Jan 28 2019
Jan 28

Begin with the end in mind—defining our goals

Our collaboration with South Dakota State University’s (SDSU) outreach arm, SDSU Extension, began by defining the user experience and branding issues that the previous site had. The visual design was in need of an update, the team wanted to make information easier for people to find, and mobile users were forced to view the desktop version of the site.

With these issues defined, we put together a series of goals that fell into two major groups—user experience and branding. For the user experience goals, we defined a user-centered approach to ensure that the work we were doing was going to help people using the site engage more with the site and more easily find what they were looking for. For the branding goals, we wanted an improved, modern look and feel that felt like a part of the larger South Dakota State University brand.

Creating a palette to work from (e.g. creating Style Tiles)

Every design project at Four Kitchens starts with a visual alignment in the form of style tiles, a design deliverable showing colors, fonts, and elements that helps create a common visual language for the project.

These are presented to everyone using InVision Freehand so that as we discuss the options we can add notes directly on the style tiles. For SDSU Extension we had two rounds of style tiles, landing quickly on one that we all agreed was the right direction.

Figuring out what we’ll need (e.g. wire-framing all the things)

Design systems are all the rage in the industry and with good reason. They allow projects to move more quickly by having a library of reusable parts that are ready to go. So at this point in the process for SDSU Extension, it was time to define what those parts needed to be.

We did this by reviewing the current site and discovery document to suss out what was going to be important for the new site. As a group—Four Kitchens and SDSU Extension—had discussions to detail what sorts of things would be vital and what would be nice-to-haves.

From there we worked up a series of wireframes that showed both a component library—a page with every possible thing on it, like cards, quotes, and video callouts—and a few samples of how the new pages could be assembled from these parts.

This process worked out the kinks for trickier components, like the many-level deep navigation on mobile while minimizing effort. The cycle of posting, review, and implementing feedback was quick leading us to a final collection of wireframes.

Making it come to life (e.g. comps)

As soon as wireframes were approved we moved into the next step—breathing life into them. We took the visual language that was defined in the style tile and applied it to the wireframes. The designs included all of the components at small, medium, and large screen sizes.

These components were then quickly assembled into mock pages to show what they would look like when the site was done. Having a wealth of work already done in the form of style tiles and wireframes, we hit on the right direction quickly. Once the first few comps were finalized there was a flood of comps as we built them out faster and faster using previously approved components.

A great collaboration

Working with SDSU Extension on this project was marvelous and we’re happy that it is live and shared with the rest of the world.

Jan 23 2019
Jan 23

Just over a year ago I decided to repurpose an internal contrib-focused meeting and make an open meeting to support contributing to Drupal, called the Contrib Half Hour. Along the way we moved its time a little later to avoid conflicting with another important community initiative and then restructured it to add focused meetings for certain topics. To make things even better, almost all meetings have been recorded and uploaded to our Youtube channel. 2019 is going to see some additional changes that I'm excited to start on.

Our Q&A have issues

Throughout the year it became apparent that there was a huge overlap between the Q&A meetings, where we'd focus on general questions and discussions from the community, and the issues lab, where we'd focus on specific drupal.org project issues. While there's definitely a case for both, the overlap became somewhat naturally as the Q&A days had us often look at Drupal issues.

As a result of this we're going to combine the Q&A and Issues Lab days into one that'll be more open ended, letting us focus on general discussions some days and specific issues other days.

The testing shall continue until code improves

We're also continuing our dedication to helping people learn how to write code tests for their modules and themes. While during 2018 we focused on functional testing for Drupal 7 and 8, I'm aiming to expand our coverage (ba-dum-dum) in 2019 to also include unit testing.

I'd also like to open an invitation for folks to join our testing lab who are starting to write tests to join our labs where we'll be able to help.

Upgrade Lab: Time to upgrade

It was announced late last year that Drupal 9 will be released in June 2020 and that Drupal 7 and 8 will reach their end-of-life in November 2021. The main driving factor behind these dates is that the various libraries Drupal 7 and 8 depend upon will all have reached their end-of-life in November 2021 and so will no longer receive security updates from their respective maintainers. To avoid needing to come up with a plan to provide security coverage for a huge number of out-of-date 3rd party libraries, the Drupal core maintainers are dropping support when the other libraries also stop being supported.

It was also revealed that the usual upgrade anxiety for major releases of Drupal (5 to 6, 6 to 7, etc) would not be the case for Drupal 9. The plan is two release Drupal 9.0.0 and the final minor release of Drupal 8 on the same day, with the only difference being that all deprecated D8 APIs are removed from D9. As a result it will be relatively easy to upgrade from Drupal 8 to 9, “just” update all contrib code and custom code to no longer use the deprecated APIs along the way, and in theory everything should just work.

With this in mind we think it's time for people running Drupal 6 and 7 sites to start looking to upgrade to Drupal 8. Towards that goal we're going to have a regular meeting where we look at the steps to upgrade a site to Drupal 8 using the bundled Migrate system. We'll look at what's involved, how it works, how to plan for it, and how to help contributed modules support Drupal 8's upgrade solution. I'm intending that we'll be able to collaborate on improving both core and contrib's upgrade functionality, and in so doing help all sites looking to upgrade. I'm also hoping that we might be able to provide some assistance to folks attempting custom upgrades using Migrate's APIs, but we'll see how it goes.

Schedule

Our schedule for the next few months looks like this:

  • January 3: Q&A
  • January 10: Turning custom code into OSS
  • January 17: Q & A & Issues
  • January 24: Testing Lab
  • January 31: Upgrade Lab
  • February 7: No meeting
  • February 14: Mirroring git repositories
  • February 21: Q & A & Issues
  • February 28: Testing Lab
  • March 7: Upgrade Lab
  • March 14: Presentation TBD
  • March 21: No meeting
  • March 28: No meeting
  • April 4: Q & A & Issues
  • April 11: Testing Lab
  • April 18: Upgrade Lab
  • April 25: Presentation TBD
  • May 2: Q & A & Issues
  • May 9: Testing Lab
  • May 16: Upgrade Lab
  • May 23: Presentation TBD
  • May 30: Q & A & Issues

Last updated on Feb 14.

Same Bat Time!

We're going to continue meetings at the same time each month, using the same video conferencing provider:

And remember, if you're not able to join us then you can always catch up later as all meetings are recorded, when I don't forget to hit the record button that is.

See you then!

Jan 03 2019
Jan 03

Context

EK application has a module that store personal documents for user. When user account is deleted, those documents may be transferred to another account.

To achieve that, we need to alter the user account cancel form when building the form, validating and submitting it.

Let's review the 3 steps.

BUILD

The form before altering it looks like this

cancel user account before hook

We need to add a field to select another user account to which the document of the canceled account will be moved to.

To achieve that we Implements hook_form_alter() in MyModule.module:

function MyModule_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
    
  if ($form_id == 'user_multiple_cancel_confirm') {
    
    $form['move_uid_documents'] = [
      '#type' => 'textfield',
      '#title' => t('Move uer documents'),
      '#autocomplete_route_name' => 'MyModule.user_autocomplete',
      '#description' => t('Select to whom to transfer personal documents'),
    ];
    $form['#validate'][] = 'MyModule_form_user_delete_validate';
    $form['#submit'][] = 'MyModule_form_user_delete_submit';
    
     return $form;
      
  }
}

What we can notice here is:

  • We alter selected form defined by form ID. In this case : "user_multiple_cancel_confirm";
  • We create the required field by returning $form['move_uid_documents'] ;
  • We add 2 new actions for validation, $form['#validate'][], and submit, $form['#submit'][],  for the next steps.

After altering the form will look like this:

cancel user account after hook

We have a new field to select user. In our case, we also have an autocomplete function that helps selecting existing user. However, we need to ensure that the value entered in the field is really an existing user. This is the part handled by the validation.

 

VALIDATE

The validation is defined in MyModule_form_alter by adding validate callback named MyModule_form_user_delete_validate. Therefore, we need to create the function with thah particular name in MyModule.module.

function MyModule_form_user_delete_validate(&$form, \Drupal\Core\Form\FormStateInterface $form_state) {   if ($form['#form_id'] == 'user_multiple_cancel_confirm') {
        if ($form_state->getValue('move_uid_documents') <> '') {
            
            $query = "SELECT uid FROM {users_field_data} WHERE name = :n";
            $data = db_query($query, [':n' => $form_state->getValue('move_uid_documents')])
                    ->fetchField();
            if ($data) {
                $form_state->setValue('move_uid_documents', $data);
            } else {
                $form_state->setErrorByName('move_uid_documents', t('Unknown user to move documents'));
            }
            
 
        }
    
     return $form;
      
  }

Here the function will check against user_field_data table that the id is valid.

If not an error message will be displayed:

cancel user account validation error

However, if valid, we store the value to be used in the next step which is the submission.

SUBMISSION

As for validation, the submission is defined in MyModule_form_alter by adding validate callback named MyModule_form_user_delete_submit.

function MyModule_form_user_delete_submit(&$form, \Drupal\Core\Form\FormStateInterface $form_state) {
    
  if ($form['#form_id'] == 'user_multiple_cancel_confirm') {
    if($form_state->getValue('move_uid_documents')){
        foreach($form_state->getValue('accounts') as $key => $id) {               \Drupal::database()->update('MyModule_table')
                      ->fields(['uid' => $form_state->getValue('move_uid_documents'), 'folder' => t('Moved from user @u', ['@u' => $id])])
                      ->condition('uid', $id)->execute();
            }
    }
     \Drupal::messenger()->addStatus(t('Documents moved to user @u', ['@u' => $form_state->getValue('move_uid_documents')]));
     return $form;
      
  }
}

In the function above, we pick the id of each user account that is canceled and change to new user id in the document table.

The function also display a message to confirm actions: both cancellation and the submit hook have been executed.

cancel user submit alert

Please feel free to comment or suggest improvements.

Thank you.

Jan 02 2019
Jan 02

With the year winding down the month was a little quiet, but we still got some good contributions going.

Client sponsored

Thanks to our awesome clients for giving us a chance to help make open source software better for everyone.

Self-directed

Mediacurrent provides some extra time during the week for folks to scratch their own itches, and sometimes people triage issue queues instead of watching football on TV :-)

Blog posts

A little light this month, but there are still two good blog posts from our team.

Contrib Half Hour

We squeezed in four Contrib Half Hour meetings into the month, despite the company being closed for Turkey Day.

Events

Lots of folks were working on their presentation proposals for DrupalCon Seattle 2019. see Tara’s blog post for details. There are also several events coming up soon that we’ll be attending, including DrupalCamp NJ and Florida DrupalCamp in February and then NERDSummit in March.

Stay warm!

That’s it for this month. Hope everyone in the Northern Hemisphere stays warm, everyone in the Southern Hemisphere enjoys their summer, and the folks in the middle don’t brag too much!

Dec 17 2018
Dec 17

Drupal is an enormously welcoming community with countless online forums and community events to learn about the platform. Its open-source knowledge sharing and peer review is arguably second-to-none, and thanks to Acquia's Drupal certifications the Drupal learning process is becoming more consolidated.

However, nothing can quite beat the quality, focus, and hard work that goes into publishing a book. We’ve quizzed our Drupal developers and members of the Manchester tech community to find out which books every Drupal developer must read.


Drupal-Specific Books

 

Drupal 8 Module Development

Drupal 8 Module Development: Build and customize Drupal 8 modules and extensions efficiently

By Daniel Sipos

This book is a great welcome to Drupal 8, introducing you to the architecture of D8 and its subsystems, for a thorough foundational understanding. It guides you through creating your first module and continues to build upon your skills with more functionalities that all modern developers need to know.

View on amazon

Drupal Development Cookbook

Drupal 8 Development Cookbook - Second Edition: Harness the power of Drupal 8 with this recipe-based practical guide

By Matt Glaman

Using a fun, easy-to-follow recipe format, this book gives you an expansive look at the basic concepts of Drupal 8, in a step-by-step fashion. While this sometimes misses out on the ‘why’ of an action, it makes building new modules approachable and unintimidating for any level of developer.

View on amazon

Ambitious, intelligent, and a great Drupal developer? Check out our careers page.

CTI Careers

Drupal 8 Explained

Drupal 8 Explained: Your Step-by-Step Guide to Drupal 8

by Stephen Burge

Written in no-nonsense plain English, this book is great for any Drupal beginner. It’s been praised as the day-to-day reference book that any new developer should keep handy on their desk.

View on amazon

Drupal 8 Blueprints

Drupal 8 Blueprints: Step along the creation of 7 professional-grade Drupal sites

By Alex Burrows

This Drupal 8 guide will take you through 7 real Drupal 8 sites to demonstrate the latest practices in action. This all-encompassing view provides a look at the reasoning and methodology behind certain practices, and context for their larger impact on the site.

View on amazon

Definative Guide To Drupal 7

The Definitive Guide to Drupal 7 (Definitive Guide Apress)

by Benjamin Melancon

While new sites are being built in Drupal 8, it’s important the remember that many of the sites you’ll work on and maintain are in Drupal 7. This comprehensive book provides the nuts and bolts of any Drupal 7 site, to build a powerful and extensible system. Some concepts are slightly dated, so we’d recommend cross-checking online occasionally.

View on amazon

Pro Drupal 7 Development

Pro Drupal 7 Development (Expert's Voice in Open Source)

by Todd Tomlinson

This book is for slightly more ambitious developers as it quickly jumps through the basic modules to the more complex. Breaking down the development of APIs and improvements to Drupal 7, this book will have any Drupal Developer producing complex modules in no time.

View on amazon

Essential Development Books

Many coding principles span development languages and frameworks. Here are our essentials for any developer seeking the ability to produce high quality, clean code.

The Clean Coder

The Clean Coder: A Code of Conduct for Professional Programmers

By Robert C. Martin

This book delves into the difference between good and bad code. Split into 3 parts, the book first discusses principles, patterns, and practices of writing clean code. Real world case studies follow, before the book finishes with the signs of bad code and problem solving skills needed to de-bug and refresh any code base.

View on amazon

CSS

CSS Secrets: Better Solutions to Everyday Web Design Problems

by Lea Verou

CSS Secrets explains how to code common 'real world' solutions with CSS. Condensing the most useful and practical examples, this book is a more exciting read than the often extensive paperbacks which try to cover absolutely everything.

View on amazon

PHP and Javascript

Learning PHP, MySQL & JavaScript 5e (Learning PHP, MYSQL, Javascript, CSS & HTML5)

By Robin Nixon

Begin expanding your language stack with this multifaceted book. PHP is essential for any Drupal developer as it forms the core language of the Drupal framework. Meanwhile, learning Javascript, CSS and HTML5 will empower you to deliver more complex solutions.

View on amazon

And lastly, an open source book about… open source

The Cathedral & the Bazaar

By Eric S. Raymond

While this piece is slightly dated, it’s underlying concepts are still highly relevant and give great insight into the origins and essence of open source. It’s also free, so definitely still worth having a skim through… if you can handle the formatting!

Read it for free

I hope you've found some great reads here, if you've got a personal favourite please let us know below. Also if you're interested in advancing your Drupal career, please check out our careers page to see if there's a position perfect for you.

Careers at CTI Digital

Dec 10 2018
Dec 10

Zivtech is happy to be offering a series of public Drupal 8 trainings at our office in downtown Philadelphia in January 2019. 

Whether you consider yourself a beginner or expert Drupal developer, our training workshops have everything you need to take your Drupal skills to the next level. 

Our experience

The Zivtech team has many years of combined expertise in training and community involvement. We have traveled all over the world conducting training sessions for a diverse range of clients including, the United States Department of Justice, the Government of Canada, CERN, Howard Hughes Medical Institute, Harvard University and more. 

We pride ourselves in educating others about open source, and attendees will leave our trainings with the knowledge to build custom Drupal sites, solve technical issues, make design changes, and perform security updates all on their own. We also offer private, onsite trainings that are tailored to your organization's specific needs. 

Our public Drupal trainings for January 2019 include:

Interested in learning more about our upcoming trainings? Click here. You can also reach out to us regarding multi-training and nonprofit discounts, or personalized trainings. 

We hope to see you in January!
 

Nov 09 2018
Nov 09

Last week, the Children’s Hospital of Philadelphia (CHOP) Vaccine Makers Project (VMP) won a PR News Digital Award in the category “Redesign/Relaunch of Site.” The awards gala honors the year’s best and brightest campaigns across a variety of media. 

PR News Award on a table.

Our CEO, Alex, and our Director of Client Engagement, Aaron, along with members of the Vaccine Makers team attended the event at the Yale Club in New York City.

Screenshot of a Tweet posted by the PR News. Source

The Vaccine Makers Project (VMP) is a subset of CHOP’s Vaccine Education Center (VEC). It’s a public education portal for students and teachers that features resources such as lesson plans, downloadable worksheets, and videos. 

The Vaccine Makers team first approached us in need of a site that aligned with the branding of CHOP’s existing site. They also wanted a better strategy for site organization and resource classification. Our team collaborated with theirs to build a new site that’s easy to navigate for all users. You can learn more about the project here.

Screenshot of a Tweet from Vaccine Makers team. Source

We’d like to thank CHOP and the Vaccine Makers team for giving us the opportunity to work on this project. We’d also like to thank PR News for recognizing our work and hosting such a wonderful event. 

Finally, we’d like to congratulate our incredible team for their endless effort and dedication to this project. 
 

Nov 06 2018
Nov 06
Jody's desk

Hardware

After a long run on MacBook Pros, I switched to an LG Gram laptop running Debian this year. It’s faster, lighter, and less expensive. 

If your development workflow now depends on Docker containers running Linux, the performance benefits you’ll get with a native Linux OS are huge. I wish I could go back in time and ditch Mac earlier.

Containers

For almost ten years I was doing local development in Linux virtual machines, but in the past year, I’ve moved to containers as these tools have matured. The change has also come with us doing less of our own hosting. My Zivtech engineering team has always held the philosophy that you need your local environment to match the production environment as closely as possible. 

But in order to work on many different projects and accomplish this in a virtual machine, we had to standardize our production environments by doing our own hosting. A project that ran on a different stack or just different versions could require us to run a separate virtual machine, slowing down our work. 

As the Drupal hosting ecosystem has matured (Pantheon, Platform.sh, Acquia, etc.), doing our own hosting began to make less sense. As we diversified our production environments more, container-based local development became more attractive, allowing us to have a more light-weight individualized stack for each project.

I’ve been happy using the Lando project, a Docker-based local web development system. It integrates well with Pantheon hosting, automatically making my local environment very close to the Pantheon environments and making it simple to refresh my local database from a Pantheon environment. 

Once I fully embraced containers and switched to a Linux host machine, I was in Docker paradise. Note: you do not need a new machine to free yourself from OSX. You can run Linux on your Mac hardware, and if you don’t want to cut the cord you could try a double boot.

Philadelphia City Hall outside Jody's office
A cool office view (like mine of Philly’s City Hall) is essential for development mojo

Editor

In terms of editors/IDEs I’m still using Sublime Text and vim, as I have for many years. I like Sublime for its performance, especially its ability to quickly search projects with 100,000 files. I search entire projects constantly. It’s an approach that has always served me well. 

I also recommend using a large font size. I’m at 14px. With a larger font size, I make fewer mistakes and read more easily. I’m not sure why most programmers use dark backgrounds and small fonts when it’s obvious that this decreases readability. I’m guessing it’s an ego thing.

Browser

In browser news, I’m back to Chrome after a time on Firefox, mainly because the LastPass plugin in Firefox didn’t let me copy passwords. But I have plenty of LastPass problems in any browser. When working on multiple projects with multiple people, a password manager is essential, but LastPass’s overall crappiness makes me miserable.

Wired: Linux, git, Docker, Lando
Tired: OSX, Virtual machines, small fonts
Undesired: LastPass, egos

Terminal

I typically only run the browser, the text editor, and the terminal, a few windows of each. In the terminal, I’m up to 16px font size. Recommend! A lot of the work I do in the terminal is running git commands. I also work in the MySQL CLI a good deal. I don’t run a lot of custom configuration in my shell – I like to keep it pretty vanilla so that when I work on various production servers I’m right at home.

Terminal screenshot

Git

I get a lot of value out of my git mastery. If you’re using git but don’t feel like a master, I recommend investing time into that. With basic git skills you can quickly uncover the history of code to better understand it, never lose any work in progress, and safely deploy exactly what you want to.

Once I mastered git I started finding all kinds of other uses for it. For example, I was recently working on a project in which I was scraping a thousand pages in order to migrate them to a new CMS. At the beginning of the project, I scraped the pages and stored them in JSON files, which I added to git.  At the end of the project, I re-scraped the pages and used git to tell me which pages had been updated and to show me which words had changed. 

On another project, I cut a daily import process from hours to seconds by using git to determine what had changed in a large inventory file. On a third, I used multiple remotes with Jenkins jobs to create a network of sites that run a shared codebase while allowing individual variations. Git is a good friend to have.

Hope you found something useful in my setup. Have any suggestions on taking it to the next level?
 

Oct 29 2018
Oct 29

At this year's BADCamp, our Senior Web Architect Nick Lewis led a session on Gatsby and the JAMstack. The JAMStack is a web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. Gatsby is one of the leading JAMstack based static page generators, and this session primarily covers how to integrate it with Drupal. 

Our team has been developing a "Gatsby Drupal Kit" over the past few months to help jump start Gatsby-Drupal integrations. This kit is designed to work with a minimal Drupal install as a jumping off point, and give a structure that can be extended to much larger, more complicated sites.

This session will leave you with: 

1. A base Drupal 8 site that is connected with Gatsby.  

2. Best practices for making Gatsby work for real sites in production.

3. Sane patterns for translating Drupal's structure into Gatsby components, templates, and pages.

This is not an advanced session for those already familiar with React and Gatsby. Recommended prerequisites are a basic knowledge of npm package management, git, CSS, Drupal, web services, and Javascript. Watch the full session below. 

[embedded content]

Oct 05 2018
Oct 05

Our back-office management solution is running on latest version of Drupal 8. An online demo is updated with the latest version that showcase the application features. It was initially developed in-house as acustom PHP application for our startup in early 2000.

We move the project to Drupal 8 when it was still under alpha stage. And there is still plenty of work to do, but it was also a move to make it available for other small businesses.

An installation code is available for those familiar with Drupal. The installation process is partially covered in this article.Thus if any of Drupalists are enthusiastic about business process solutions and would like to contribute, they are welcome.

This covers many simple but useful back office functionalities like address book, products and services database, sales documents (invoices, purchases), projects, HR, logistics documents, cost tracking, journal records and others collaborative tools. It is still a young project that will certainly need more integration provided by Drupal 8 capabilities as it grows. Some of Drupal 8 features like multilingual support and tour guide are also very useful in the business environment we operate.

The solution is adopted by small businesses and start-ups. We provide paid support, comprehensive cloud solution and management expertise service for those who do not want to manage infrastructure. It is a very good solution for small business that need to organize their back office and data management.

On one hand, it gives us tremendous information and feedback about all necessary improvements we need to implement  and fixes to apply. On the other hand, Drupal 8 has proven to be very stable and efficient in running this solution, and we are still to explore plenty of value added features that are of high value in data processing like RESTful Web Services for instance, entities or plugins developments

We encourage anyone to explore and try this solution, provide feedback, and even contribute to the project.

Oct 02 2018
Oct 02

Whilst at Drupal Europe last month, I was privileged to be invited by Drupal’s founder, Dries Buytaert, to a round table discussion, aimed at further marketing the Drupal project.

Bringing together a number of leaders from the Drupal community, we all shared the same desire to boost the marketable assets of the open source platform. One of the ways we hope to achieve this publicity is by creating a comprehensive, customer-facing "Pitch Deck".

The session began as a workshop, facilitated by Adam Goodman. He primed the group to start  identifying and explore opportunities to better convey the benefits of Drupal to the uninitiated. The ultimate objective is to encourage the adoption of the Drupal platform. Consensus was reached that we focus upon three separate initiatives.

  

We're not competing with one another, yet we’re not helping each other either. Our role as leaders is to activate the assets that already exist in the community. Bert Boerland

The initial plan it to create a marketing resource that will present Drupal’s credentials in a persuasive manner. This slide deck will also contain impressive exemplar case studies, to ease the process of convincing an organisation or client to choose Drupal.

The Team

I volunteered to take overall responsibility for the creation of the end result. Joining forces with Suzanne Dergacheva and Ricardo Amarowho bring rich, varied perspectives and skill sets, I feel confident providing the basis for this universal toolkit. But we can only be truly successful if many others contribute to our initiative. We need sales people, marketers, copywriters to join our cause.

Get Involved Today

Providing a single and persuasive resource, available for all Drupal promoters, to sell the powerful advantages of Drupal will benefit all who use it. With strong consistent messaging, and bolstered by the many Drupal success stories, the deck will position all advocates better to expand the Drupal market share across many scenarios.

With a core team of fellow Drupal professionals, we plan to cover as many topics as we can identify, from security, accessibility and performance functionality through to specific industry verticals, like Higher Education or Media. The key intention is to show how Drupal can adapt to fit projects of all shapes and sizes, across all industries.

 

The Benefits

Many of Drupal’s competitors (think Wordpress, Squarespace etc.) are widely publicised and, consequently, innately popular. In many cases, Drupal may well be the ideal platform for a project, but it risks losing out to competing CMS providers as the success and potential of Drupal is not easily demonstrated.

Our intended users are sophisticated purchasers. As they ask more and more questions, our responsibility grows to equip agencies with comprehensive information. By using the collaborative resource, agencies will be able to accurately sell the Drupal platform, whilst spending more of their energy and resources focusing on the services they deliver. Freeing up time from writing and re-writing duplicated Drupal sales, organisations will be left to promote their unique strengths.


The Plan

We plan to kick off the project by identifying the high-level requirements and the mechanism to create the slide deck. From there, we hope to crowdsource for support, and seek volunteers from the wider business community. By recruiting sales people, marketers, copywriters and subject matter experts, we hope to create a well-rounded resource, targeted at the varied stakeholders of a new Drupal development project.

Brainstorm Notes from Drupal Europe RoundtableBrainstorm Notes from Drupal Europe Roundtable - Photo by Meike Jung

By working together, embracing open source ideals, we hope to rapidly achieve the first incarnation of the slide deck, ready for it to be built upon in the future. The sooner we create a draft, the sooner we can share the potential of Drupal with a wider audience. Projects like this prove that you needn’t be a web developer to be part of the welcoming Drupal community.

Get Involved!

If you’re interested in getting involved with this innovative project, please get in touch via our web form. Any contributions, big or small, will be gratefully received, as we strive to convert this idea into a reality.

Join the cause, let’s make Drupal better together!

Get Involved Today

Drupal.org Issue: Drupal "Pitch Deck" for Presenting to (Potential) Customers 

Sep 26 2018
Sep 26

The Drupal Unconference is coming up in November and we can’t wait! Following the huge success of last year's event, we are once again proud to be Silver Sponsors of this alternative annual conference.

As active members of the Drupal community, several of our team are already preparing lightning talks to pitch on the day. To secure attendance for the majority of our large Drupal team, we have just bought a batch of tickets. To avoid disappointment, we encourage you to do the same! 

Unconference Tickets

[embedded content]Co-organiser, Eli, on what to expect

This year’s Unconference will be held on 3rd November at The Federation, Manchester. The annual unconference breaks the mould, with an informal, accessible programme. All talks are planned on the day by the attendees rather than organisers. Representing open source ideals, Unconference recognises that the best ideas can come from anyone, no matter their experience. First-time speakers and long-term contributors have equal opportunity to share their insights into the Drupal Content Management System.

For the second year in a row, we are proudly sponsoring the event and attending en mass. Our developers are preparing talks on a wide range of topics: from front-end design using Pattern Lab, to a bold career change, swapping auto body repairs for Drupal development. The unplanned structure of the Unconference enables speeches that are reactive to recent topics and events. As such, we expect some competition for the most innovative talk this year!

Not sure what to talk about?

You can reach beyond Drupal core and open source code. Unconference presentations will address a wide range of digital topics. With talks and insights expected to cover UX, databases, frameworks, security and front-end design. Web developers, devops, project managers, designers and marketers can all expect relevant and actionable takeaways from the event. Website owners and end users, no matter their technical experience, are welcomed to the inclusive conversation.

Unlike Drupal sprints, which focus on delivering working software and contributed modules, the Unconference is designed to be a rich learning environment. Offering real-world case studies and ideas, NWDUG invite anyone to share their digital experiences.

Hosted at The Federation, the 2018 event will be bigger and better than ever. With more space comes more opportunities for different speakers and discussion groups.

[embedded content]Explore the Venue

Last year’s event was a huge success, so we are optimistic for Unconference 2018 to be the best yet. We are excited to see new faces and new innovations from the open source community.

Join the welcoming Drupal community this November 3rd for a day that celebrates inclusivity, accessibility and open source software.

 

Find out more and order your tickets of the Unconference website. We'll see you there!

Unconference Tickets

Sep 25 2018
Sep 25

With phone in hand, laptop in bag and earbuds in place, the typical user quickly scans multiple sites. If your site takes too long to load, your visitor is gone. If your site isn’t mobile friendly, you’ve lost precious traffic. That’s why it’s essential to build well organized, mobile ready sites.

But how do you get good results?

  • Understand whom you’re building for
  • Employ the right frameworks
  • Organize your codebase
  • Make your life a lot easier with a CSS preprocessor

Let’s look at each of these points.

Design For Mobile

When you look at usage statistics, the trend is clear. This chart shows how mobile device usage has increased each year. 
 

Mobile device usage graphSource

A vast array of mobile devices accomplish a variety of tasks while running tons of applications. This plethora of device options means that you need to account for a wide assortment of display sizes in the design process.

As a front end developer, it’s vital to consider all possible end users when creating a web experience. Keeping so many display sizes in mind can be a challenge, and responsive design methodologies are useful to tackle that problem.

Frameworks that Work

Bootstrap, Zurb, and Jeet are among the frameworks that developers use to give websites a responsive layout. The concept of responsive web design provides for optimal viewing and interaction across many devices. Media queries are rules that developers write to adapt designs to specific screen widths or height.

Writing these from scratch can be time consuming and repetitive, so frameworks prepackage media queries using common screen size rules. They are worth a try even just as a starting point in a project.

Organizing A Large Code Base

Depending on the size of a web project, just the front end code can be difficult to organize. Creating an organizational standard that all developers on a team should follow can be a challenge. Here at Zivtech, we are moving toward the atomic design methodology pioneered by Brad Frost. Taking cues from chemistry, this design paradigm suggests that developers organize code into 5 categories:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

Basic HTML tags like inputs, labels, and buttons would be considered atoms. Styling atoms can be done in one or more appropriate files. A search form, for example, is considered a molecule composed of a label atom, input atom, and button atom. The search form is styled around its atomic components, which can be tied in as partials or includes. The search form molecule is placed in the context of the header organism, which also contains the logo atom and the primary navigation molecule.

Now Add CSS Preprocessors

Although atomic design structure is a great start to organizing code, CSS preprocessors such as Sass are useful tools to streamline the development process. One cool feature of Sass is that it allows developers to define variables so that repetitive code can be defined once and reused throughout.

Here’s an example. If a project uses a specific shade of mint blue (#37FDFC), it can be defined in a Sass file as $mint-blue = #37FDFC. When styling, instead of typing the hex code every time, you can simply use $mint-blue. It makes the code easier to read and understand for the team. 

Let’s say the client rebrands and wants that blue changed to a slightly lighter shade (#97FFFF). Instead of manually finding all the areas where $mint-blue is referenced on multiples pages of code, a developer can easily revise the variable to equal the new shade ($mint-blue = #97FFFF; ). This change now automatically reflects everywhere $mint-blue was used.

Another useful feature of Sass is the ability to nest style rules. Traditionally, with plain CSS, a developer would have to repetitively type the parent selector multiple times to target each child component. With Sass, you can confidently nest styles within a parent tag, as shown below. The two examples here are equivalent, but when you use Sass, it’s a kind of shorthand that automates the process.

Traditional CSS

Sass

Although there are a lot of challenges organizing code and designing for a wide variety of screen sizes, keep in mind that there are excellent tools available to automate the development process, gracefully solve all your front end problems and keep your site traffic healthy.

This post was originally published on July 1, 2016 and has been updated for accuracy.

Sep 21 2018
DA
Sep 21

In this post we will share our experience in installing a Drupal 8 application on an Amazon EC2 server with latest Ubuntu 18.04 LTS.

Installing Drupal with composer greatly simplify system maintenance and further update.

AWS image

First you will need to create EC2 instance with proper AMI from Amazon Web Service. You can find the AMI from the locator.

We will not cover in detail this part, as we assume this is already covered by many other blogs and tutorials.

We pick latest 18.04 LTS version of Ubuntu to comply with requirements of Drupal 8 with PHP 7.2.

Composer

Once your server is running, the next step is to install composer.

Once again, we will not go too much into details as composer installation is also widely covered.

In our case we followed similar procedure as the one described here.

Drupal

For actual installatin of Drupal with composer, there is a guide at drupal.org with 3 options. We picked the option A.

The repository is a composer template for Drupal projects with pretty good usage guide. The latest version will install Drupal 8.6.1.

We run the command:

git clone https://github.com/drupal-composer/drupal-project.git <MyAppName>

(note: the code will be copied within the folder "MyAppName" within your current folder location. For instance if you are in /var/www, the application will be in /var/www/MyAppName)

At this point we edited the composer.json file to match our desired folder configuration. You need to edit manually the installer path here before installing the application or if you prefer, keep the default paths.

"installer-paths": {
            "web/core": ["type:drupal-core"],
            "web/libraries/{$name}": ["type:drupal-library"],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/Commands/{$name}": ["type:drupal-drush"]
        },

To edit, run command:

Sudo nano MyAppName/composer.json

and edit "installer-paths". In our case we changed to:

Once your have the desired folder configuration, you can run actual installation command:

composer -vvv install

(note: -vvv option is optional)

This will install Drupal site.

Custom application

One of the purpose of using composer installation is to merge other composer files and install custom plugins and applications.

To be able to merge composer files, you need to install the composer-merge-plugin first with command:

composer require wikimedia/composer-merge-plugin

then run:

composer update --lock

You can now add additional plugins with their specific composer installer. In our case, we install our own application EK Management tools suite with the following command:

composer require arreasystem/ek:"dev-8.x-dev"

This will install custom application.

You can merge composer.json paths as "extra" option in main composer.json:

Sudo nano MyAppName/composer.json

For instance add the custom plugins paths:    

"extra": {
          "merge-plugin": {
                      "include": [
                          "modules/contrib/ek/ek_admin/composer.json"
                      ],
                      "recurse": true,
                      "replace": false,
                      "merge-extra": false
                  },

And run:

composer update --lock

This will for instance install following libraries:

You may encounter error with composer when updating with an out of memory error. This will happen with low specification EC2 instances. To solve this problem, add swap memory on Ubuntu server.

Create swap file: sudo dd if=/dev/zero of=/swapfile bs=2M count=2048 (this will create a 4M memory swap);

Enable file: sudo chmod 600 /swapfile;

Allocate: sudo mkswap /swapfile;

Start: sudo swapon /swapfile.

With this installation, you will just have to run composer update to update your installation version. This comes also with Drush and Drupal Console installed. Don't forget to run update.php after core update if necessary.

We hope this short post has been useful. Feel free to add comment or questions.

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 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 03 2018
Sep 03

...And the story of how two unlikely organisations drove innovation in the Drupal Platform.

While delivering continual support for an energy clients Drupal website, we wanted to implement a Postcode Lookup feature, with auto-complete functionality. Existing solutions were either too basic or needlessly expensive, but we couldn’t justify building a new solution from scratch. As luck would have, I discovered at our weekly Drupal 8 meeting that my colleagues working on a Not-For-Profit site required autocomplete capabilities for the address lookup on the donations page.

These two very different organisations, shared a mutual requirement. Recognising the value of a Postcode Lookup across different sectors and services warranted the investment in developing and contributing the module to the open source community.

For The Not-For-Profit, the team had used the PostCodeAnywhere PHP API (now Loqate) by writing their own JavaScript to complete the autocomplete functionality. But this was proving more and more time consuming; initially, it wasn’t even clear that the service offered a JavaScript widget.

The solution that the team built for the client was quite custom and specific, utilising the Address module’s more rigid form fields. So the end result wasn’t something we could quickly or easily contribute back to the community.

Clearly this was a feature that would benefit the Drupal experience if there was a permanent publicly available fix. When discussing how different organisations may use this feature, I came to the conclusion that it needed to be available as part of the widely adopted webform module that provided the popular drag-and-drop interface.


The Solution

The Postcode Lookup is fully responsive, has autocomplete capabilities, functions smoothly on an enterprise level, and has a comprehensive database to pull from for global addresses. All of this is available as a stand-alone widget, or as part of the existing webform module.

loqate-module_drupal8The Drupal 8 Loquate module in action


How it works

A user starts to type a postcode and the field will suggest addresses based on the text entered. Upon choosing an address from the drop-down list, a whole set of address fields are populated. This was achieved using Loqate’s (then PostCodeAnywhere) paid “Address Capture” JavaScript API, which was really quick and easy to implement.

To add Postcode Lookup to the Webform, we created the Loqate module. All you need is the Webform module and a Loqate API key and you’re up and running with a Postcode Lookup autocomplete field that you can put in any form on your site.

But that's not the end of it…

Going forward we are planning to add:

  • Integration with the Address module: This could have extensive use-cases, as this module is used heavily by the Commerce module and would make setting addresses for buying things significantly easier.
  • The ability to automatically change required fields based on a user's location, to improve international experience.
  • Toggles for manual entry vs postcode entry.
  • General code improvements, for better maintainability and more use-cases.

Co-Author: Rakesh James, Drupal Developer at CTI Digital

Cover Photo Cred: @thenomadbrodie 

Interested in working with us? Check out our vacancies here.

Careers at CTI Digital

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 11 2018
Jul 11

Someone recently asked the following question in Slack. I didn’t want it to get lost in Slack’s history, so I thought I’d post it here:

Question: I’m setting a CSS background image inside my Pattern Lab footer template which displays correctly in Pattern Lab; however, Drupal isn’t locating the image. How is sharing images between PL and Drupal supposed to work?

My Answer: I’ve been using Pattern Lab’s built-in data.json files to handle this lately. e.g. you could do something like:

footer-component.twig:

... {% footer_background_image = footer_background_image|default('/path/relative/to/drupal/root/footer-image.png') %} ... {%footer_background_image=footer_background_image|default('/path/relative/to/drupal/root/footer-image.png')%}

This makes the image load for Drupal, but fails for Pattern Lab.

At first, to fix that, we used the footer-component.yml file to set the path relative to PL. e.g.:

footer-component.yml:

footer_background_image: /path/relative/to/pattern-lab/footer-image.png footer_background_image:/path/relative/to/pattern-lab/footer-image.png

The problem with this is that on every Pattern Lab page, when we included the footer copmonent, we had to add that line to the yml file for the page. e.g:

basic-page.twig:

... {% include /whatever/footer-component.twig %} ... {%include/whatever/footer-component.twig%}

basic-page.yml:

... footer_background_image: /path/relative/to/pattern-lab/footer-image.png ... footer_background_image:/path/relative/to/pattern-lab/footer-image.png

Rinse and repeat for each example page… That’s annoying.

Then we realized we could take advantage of Pattern Labs global data files.

So with the same footer-component.twig file as above, we can skip the yml files, and just add the following to a data file.

theme/components/_data/paths.json: (* see P.S. below)

{ "footer_background_image": "/path/relative/to/pattern-lab/footer-image.png" }     "footer_background_image":"/path/relative/to/pattern-lab/footer-image.png"

Now, we can include the footer component in any example Pattern Lab pages we want, and the image is globally replaced in all of them. Also, Drupal doesn’t know about the json files, so it pulls the default value, which of course is relative to the Drupal root. So it works in both places.

We did this with our icons in Emulsify:

_icon.twig

paths.json

End of the answer to your original question… Now for a little more info that might help:

P.S. You can create as many json files as you want here. Just be careful you don’t run into name-spacing issues. We accounted for this in the header.json file by namespacing everything under the “header” array. That way the footer nav doesn’t pull our header menu items, or vise-versa.

example homepage home.twigthat pulls menu items for the header and the footer from data.json files

header.json

footer.json

Jun 06 2018
Jun 06

I recently had the privilege of helping PRI.org launch a new React Frontend for their Drupal 7 project. Although I was fairly new to using React, I was able to lean on Four Kitchens’ senior JavaScript engineering team for guidance. I thought I might take the opportunity to share some things I learned along the way in terms of organization, code structuring and packages.

Organization

As a lead maintainer of Emulsify, I’m no stranger to component-driven development and building a user interface from minimal, modular components. However, building a library of React components provided me with some new insights worth mentioning.

Component Variations

If a component’s purpose starts to diverge, it may be a good time to split the variations in your component into separate components. A perfect example of this can be found in a button component. On any project of scale, you will likely have a multitude of buttons ranging from actual <button> elements to links or inputs. While these will likely share a number of qualities (e.g., styling), they may also vary not only in the markup they use but interactions as well. For instance, here is a simple button component with a couple of variations:

const Button = props => { const { url, onClick } = props; if (url) { return ( <a href={url}> ... </a> ); } return ( <button type="button" onClick={onClick}> ... </button> ); }; constButton=props=>{  const{url,onClick}=props;  if(url){    return(      <ahref={url}>        ...      </a>    );  return(    <buttontype="button"onClick={onClick}>      ...    </button>

Even with the simplicity of this example, why not separate this into two separate components? You could even change this component to handle that fork:

function Button(props) { ... return url ? <LinkBtn {...props}/> : <ButtonBtn {...props} />; } functionButton(props){  returnurl?<LinkBtn{...props}/>:<ButtonBtn{...props}/>;

React makes this separation so easy, it really is worth a few minutes to define components that are distinct in purpose. Also, testing against each one will become a lot easier as well.

Reuse Components

While the above might help with encapsulation, one of the main goals of component-driven development is reusability. When you build/test something well once, not only is it a waste of time and resources to build something nearly identical but you have also opened yourself to new and unnecessary points of failure. A good example from our project is creating a couple different types of toggles.  For accessible, standardized dropdowns, we introduced the well-supported, external library Downshift.:

In a separate part of the UI, we needed to build an accordion menu:

Initially, this struck me as two different UI elements, and so we built it as such. But in reality, this was an opportunity that I missed to reuse the well-built and tested Downshift library (and in fact, we have a ticket in the backlog to do that very thing). This is a simple example, but as the complexity of the component (or a project) increases, you can see where reusage would become critical.

Flexibility

And speaking of dropdowns, React components lend themselves to a great deal of flexibility. We knew the “drawer” part of the dropdown would need to contain anything from an individual item to a list of items to a form element. Because of this, it made sense to make the drawer contents as flexible as possible. By using the open-ended children prop, the dropdown container could simply just concern itself with container level styling and the toggling of the drawer. See below for a simplified version of the container code (using Downshift):

export default class Dropdown extends Component { static propTypes = { children: PropTypes.node }; static defaultProps = { children: [] }; render() { const { children } = this.props; return ( <Downshift> {({ isOpen }) => ( <div className=”dropdown”> <Button className=”btn” aria-label="Open Dropdown" /> {isOpen && <div className=”drawer”>{children}</div>} </div> )} </Downshift> ); } } exportdefaultclassDropdownextendsComponent{  staticpropTypes={    children:PropTypes.node  staticdefaultProps={    children:[]  render(){    const{children}=this.props;    return(      <Downshift>        {({isOpen})=>(          <divclassName=dropdown>            <ButtonclassName=btnaria-label="Open Dropdown"/>            {isOpen&&<divclassName=drawer>{children}</div>}          </div>        )}      </Downshift>    );

This means we can put anything we want inside of the container:

<Dropdown> <ComponentOne> <ComponentTwo> <span>Whatever</span> </Dropdown> <Dropdown>  <ComponentOne>  <ComponentTwo>  <span>Whatever</span></Dropdown>

This kind of maximum flexibility with minimal code is definitely a win in situations like this.

Code

The Right Component for the Job

Even though the React documentation spells it out, it is still easy to forget that sometimes you don’t need the whole React toolbox for a component. In fact, there’s more than simplicity at stake, writing stateless components may in some instances be more performant than stateful ones. Here’s an example of a hero component that doesn’t need state following AirBnB’s React/JSX styleguide:

const Hero = ({title, imgSrc, imgAlt}) => ( <div className=”hero”> <img data-src={imgSrc} alt={imgAlt} /> <h2>{title}</h2> </div> ); export default Hero; constHero=({title,imgSrc,imgAlt})=>(  <divclassName=hero>    <imgdata-src={imgSrc}alt={imgAlt}/>    <h2>{title}</h2>  </div>exportdefaultHero;

When you actually need to use Class, there are some optimizations you can make to at least write cleaner (and less) code. Take this Header component example:

import React from 'react'; class Header extends React.Component { constructor(props) { super(props); this.state = { isMenuOpen: false }; this.toggleOpen = this.toggleOpen.bind(this); } toggleOpen() { this.setState(prevState => ({ isMenuOpen: !prevState.isMenuOpen })); } render() { // JSX } } export default Header; importReactfrom'react';classHeaderextendsReact.Component{  constructor(props){    super(props);    this.state={isMenuOpen:false};    this.toggleOpen=this.toggleOpen.bind(this);  toggleOpen(){    this.setState(prevState=>({      isMenuOpen:!prevState.isMenuOpen    }));  render(){    // JSXexportdefaultHeader;

In this snippet, we can start by simplifying the React.Component extension:

import React, { Component } from 'react'; class Header extends Component { constructor(props) { super(props); this.state = { isMenuOpen: false }; this.toggleOpen = this.toggleOpen.bind(this); } toggleOpen() { this.setState(prevState => ({ isMenuOpen: !prevState.isMenuOpen })); } render() { // JSX } } export default Header; importReact,{Component}from'react';classHeaderextendsComponent{  constructor(props){    super(props);    this.state={isMenuOpen:false};    this.toggleOpen=this.toggleOpen.bind(this);  toggleOpen(){    this.setState(prevState=>({      isMenuOpen:!prevState.isMenuOpen    }));  render(){    // JSXexportdefaultHeader;

Next, we can export the component in the same line so we don’t have to at the end:

import React, { Component } from 'react'; export default class Header extends Component { constructor(props) { super(props); this.state = { isMenuOpen: false }; this.toggleOpen = this.toggleOpen.bind(this); } toggleOpen() { this.setState(prevState => ({ isMenuOpen: !prevState.isMenuOpen })); } render() { // JSX } } importReact,{Component}from'react';exportdefaultclassHeaderextendsComponent{  constructor(props){    super(props);    this.state={isMenuOpen:false};    this.toggleOpen=this.toggleOpen.bind(this);  toggleOpen(){    this.setState(prevState=>({      isMenuOpen:!prevState.isMenuOpen    }));  render(){    // JSX

Finally, if we make the toggleOpen() function into an arrow function, we don’t need the binding in the constructor. And because our constructor was really only necessary for the binding, we can now get rid of it completely!

export default class Header extends Component { state = { isMenuOpen: false }; toggleOpen = () => { this.setState(prevState => ({ isMenuOpen: !prevState.isMenuOpen })); }; render() { // JSX } } exportdefaultclassHeaderextendsComponent{  state={isMenuOpen:false};  toggleOpen=()=>{    this.setState(prevState=>({      isMenuOpen:!prevState.isMenuOpen    }));  render(){    // JSX

Proptypes

React has some quick wins for catching bugs with built-in typechecking abilities using React.propTypes. When using a Class component, you can also move your propTypes inside the component as static propTypes. So, instead of:

export default class DropdownItem extends Component { ... } DropdownItem.propTypes = { .. propTypes }; DropdownItem.defaultProps = { .. default propTypes }; exportdefaultclassDropdownItemextendsComponent{DropdownItem.propTypes={  ..propTypesDropdownItem.defaultProps={  ..defaultpropTypes

You can instead have:

export default class DropdownItem extends Component { static propTypes = { .. propTypes }; static defaultProps = { .. default propTypes }; render() { ... } } exportdefaultclassDropdownItemextendsComponent{  staticpropTypes={    ..propTypes  staticdefaultProps={    ..defaultpropTypes  render(){    ...

Also, if you want to limit the value or objects returned in a prop, you can use PropTypes.oneOf and PropTypes.oneOfType respectively (documentation).

And finally, another place to simplify code is that you can deconstruct the props option in the function parameter definition like so. Here’s a component before this has been done:

const SvgLogo = props => { const { title, inline, height, width, version, viewBox } = props; return ( // JSX ) } constSvgLogo=props=>{  const{title,inline,height,width,version,viewBox}=props;  return(    // JSX

And here’s the same component after:

const SvgLogo = ({ title, inline, height, width, version, viewBox }) => ( // JSX ); constSvgLogo=({title,inline,height,width,version,viewBox})=>(

Packages

Finally, a word on packages. React’s popularity lends itself to a plethora of packages available. One of our senior JavaScript engineers passed on some sage advice to me that is worth mentioning here: every package you add to your project is another dependency to support. This doesn’t mean that you should never use packages, merely that it should be done judiciously, ideally with awareness of the package’s support, weight and dependencies. That said, here are a couple of packages (besides Downshift) that we found useful enough to include on this project:

Classnames

If you find yourself doing a lot of classname manipulation in your components, the classnames utility is a package that helps with readability. Here’s an example before we applied the classnames utility:

<div className={`element ${this.state.revealed === true ? revealed : ''}`} > <divclassName={`element${this.state.revealed===true?revealed:''}`}>

With classnames you can make this much more readable by separating the logic:

import classNames from 'classnames/bind'; const elementClasses = classNames({ element: true, revealed: this.state.revealed === true }); <div classname={elementClasses}> importclassNamesfrom'classnames/bind';constelementClasses=classNames({  element:true,  revealed:this.state.revealed===true<divclassname={elementClasses}>

React Intersection Observer (Lazy Loading)

IntersectionObserver is an API that provides a way for browsers to asynchronously detect changes of an element intersecting with the browser window. Support is gaining traction and a polyfill is available for fallback. This API could serve a number of purposes, not the least of which is the popular technique of lazy loading to defer loading of assets not visible to the user.  While we could have in theory written our own component using this API, we chose to use the React Intersection Observer package because it takes care of the bookkeeping and standardizes a React component that makes it simple to pass in options and detect events.

Conclusions

I hope passing on some of the knowledge I gained along the way is helpful for someone else. If nothing else, I learned that there are some great starting points out there in the community worth studying. The first is the excellent React documentation. Up to date and extensive, this documentation was my lifeline throughout the project. The next is Create React App, which is actually a great starting point for any size application and is also extremely well documented with best practices for a beginner to start writing code.

May 23 2018
May 23

On 19th May 2018, the day of the Royal Wedding and the FA-Cup final, there was a lot going on in the UK. As a Chelsea fan, I wonder if there could be a better feeling than watching the FA Cup final at Wembley against Manchester United?! But, instead, a small group of Drupal users gathered together in Edinburgh for DrupalCamp Scotland. I was invited to attend and chosen to speak about Drupal migration, rather than going to Wembley... I can confirm that it was an excellent decision and I had a great time there!

DrupalCamp ScotlandMost of the attendees at DrupalCamp Scotland

DrupalCamp Scotland kick-started with a welcome speech from Jennifer Milne, Deputy CIO of the University of Edinburgh. She spoke a bit about the history of the university, and I was amazed to learn that it is the sixth oldest university in the UK! It was very nice to see the Deputy CIO and Director of the University of Edinburgh so excited and happy to support the Open source Technology Community, including Drupal.

After that, Billy Wardrop did a quick presentation about Drupal Europe. He explained the event details and how you can get involved. More importantly, he noted how vital the event is for Drupal users in Europe. Why? Because, it is more than a technical conference; Europe's largest Drupal event in 2018 will be a festival that promotes real feeling between people who have the opportunity to meet each other and to have a great time together. Drupal Europe will introduce additional dimensions including summits for industry verticals, workshops, and a broad set of session tracks, including Back-end development, Front-end, Design/UX, Site Building, Project Management.

The first talk at DrupalCamp Scotland was given by Jeffrey A. "JAM" McGuire, from Open Strategy Partners. He was speaking about how we can do ‘Authentic Communication’ in business and how this maps to how we should can be more purposeful and generate greater impact in our Drupal contributions.

Authentic CommunicationThe essential components of authentic communication

He was also telling us how “Empathy” and “Context” have to work together in business communications:

Empathy and ContextThe importance of Empathy and Context

Finally “JAM” talked about how to plan your own Contribution narrative. He explained that your “Contribution Narrative” must encapsulate the following:

  • Goals: what do you want or need from contribution
    • more features, quality, increase adoption
    • Help others, educate people
  • Who: could help you get there
  • Vibrancy signals: how a free and open source projects appears worthy of engagement for someone: regular releases, state of issue queue, quality of docs and release notes, responsiveness in channels.
  • Why: the logical/emotional reasons someone should contribute
  • How to contribute: another vibrancy signal: you care enough to be explicit about how people should engage. Telling them your expectations is also setting their expectations.
  • Where to connect: how you prefer to communicate, where your people hang out.

Contribution NarrativePlanning your Contribution Narrative

Once you know and have mapped out all of this, you can weave it into all your comms and hopefully attract new contributors.” Jeffrey A. ‘Jam’ McGuire

The second session was from Julia Pradel and Christian Fritsch from Thunder CMS Team. They talked about the feature provided by Thunder CMS as a Drupal distribution, explaining who is using this feature globally and how useful it is for media and publishing products. Then they talked about the SharpEye theme testing tool, which they have also introduced to Drupal. SharpEye a visual regression tool that takes screenshots and compares them in automated tests. We open sourced the tool and you can download it here.

Thunder CMSJulia and Christian's talk: Photos from Thunder CMS

The third talk was given by me! I was talking about migration API in Drupal 8, specifically: How to migrate data from a csv file and what is gained by migrating everything into Drupal. I have begun writing a blog series on the same theme, if you would like to find out more.

After my speech, we had a great lunch and enjoyed the surprising beauty of the Scottish summer.

Lunchtime Sunshine at DrupalCamp ScotlandNetworking over lunch in the Scottish Sunshine

After Lunch, the fourth session of the day was taken by Audra Martin MerrickAs the former VP Strategy & Operations for The Economist, Audra was talking about Content and Community, or Content and its Audience. She explained how to use social media efficiently, to connect the right content with the right audience.


How to convene an audienceHow do we convene an audience?

The fifth talk of the session came from Alice G Herbison. She talked about challenges identified from her own experience, as well as the edge case scenarios to be mindful of when conducting User Research. Her advice: she explained how to use tree testing for user experience and why it is important.

Defining Research GoalsThe importance of User Research

We had quick coffee break and got back to the sixth session of the day, which was taken by Martin Fraser. He was talking all about css: examples of people writing bad css, advice on how they can write good css, and how css can promote user interactivity, instead of using Javascript.

Poor old CSSPoor Old CSS

The seventh and final session of the day came from Paul Linney. He was talking about Voyage to Drupal 8. As he is currently working on some sizeable government projects, he discussed the problems he faced with Drupal 7 features and custom module, and how they improved the performance when they changed custom module with object-oriented programming. To support his important projects, he is looking into Drupal 8 instead.

Looking to Drupal 8Looking to Drupal 8

The closing note was delivered by Duncan Davidson. He was one of the main organisers who made DrupalCamp Scotland possible.

I really enjoyed my time at DrupalCamp Scotland and would like to give special thanks to Billy, Duncan and all of the other organisers. Huge thanks to University of Edinburgh and Makkaru for sponsoring the event and great thanks to the attendees also. On a personal note, I thank Paul Johnson and CTI for supporting me to go there and speak.

If you would like to learn more about my insights into Drupal 8 migrations, follow my blog series.

May 18 2018
May 18

The Content Moderation core module was marked stable in Drupal 8.5. Think of it like the contributed module Workbench Moderation in Drupal 7, but without all the Workbench editor Views that never seemed to completely make sense. The Drupal.org documentation gives a good overview.

Content Moderation requires the Workflows core module, allowing you to set up custom editorial workflows. I've been doing some work with this for a new site for a large organization, and have some tips and tricks.

Less Is More

Resist increases in roles, workflows, and workflow states and make sure they are justified by a business need. Stakeholders may ask for many roles and many workflow states without knowing the increased complexity and likelihood of editorial confusion that results.

If you create an editorial workflow that is too strict and complex, editors will tend to find ways to work around the  system. A good compromise is to ask that the team tries something simple first and adds complexity down the line if needed.

Try to use the same workflow on all content types if you can. It makes a much simpler mental model for everyone.

Transitions are Key

Transitions between workflow states will be what you assign as permissions to roles. Typically, you'll want to lock down who can publish content, allowing content contributors to create new drafts only.

Transitions Image from Drupal.orgTransitions between workflow states must be thought through

You might want some paper to map out all the paths between workflow states that content might go through. The transitions should be named as verbs. If you can't think of a clear, descriptive verb that applies, you can go with 'Set state to %your_state" or "Mark as %your_state." Don't sweat the names of transitions too much though; they don't seem to ever appear in an editor-facing way anyway.

Don't forget to allow editors to undo transitions. If they can change the state from "Needs Work" to "Needs Review," make sure they can change it back to "Needs Work."

You must allow Non-Transitions

Make sure the transitions include non-transitions. The transitions represent which options will be available for the state when you edit content. In the above (default core) example, it is not possible to edit archived content and maintain the same state of archived. You'd have to change the status to published and then back to archived. In fact, it would be very easy to accidentally publish what you had archived, because editing the content will set it back to published as the default setting. Therefore, make sure that draft content can stay as draft when edited, etc. 

Transition Ordering is Crucial

Ordering of the transitions here is very important because the state options on the content editing form will appear as a select list of states ordered by the transition order, and it will default to the first available one.

If an editor misses setting this option correctly, they will simply get the first transition, so make sure that first transition is a good default. To set the right order, you have to map each state to what should be its default value when editing. You may have to add additional transitions to make this all make sense.

As for the ordering of workflow states themselves, this will only affect ordering when states are listed, for example in a Views exposed filter of workflow states or within the workflows administration.

Minimize Accidental Transitions

But why wouldn't my content's workflow state stay the same by default when editing the content (assuming the user has access to a transition that keeps it the same)? I have to set an order correctly to keep a default value from being lost?

Well, that's a bug as of 8.5.3 that will be fixed in the next 8.5 bugfix release. You can add the patch to your composer.json file if you're tired of your workflow states getting accidentally changed.

Test your Workflow

With all the states, transitions, transition ordering, roles, and permissions, there are plenty of opportunities for misconfiguration even for a total pro with great attention to detail like yourself. Make sure you run through each scenario using each role. Then document the setup in your site's editor documentation while it's all fresh and clear in your mind.

What DOES Published EVEN MEAN ANYMORE?

With Content Moderation, the term "published" now has two meanings. Both content and content revisions can be published (but only content can be unpublished).

For content, publishing status is a boolean, as it has always been. When you view published content, you will be viewing the latest revision, which is in a published workflow state.

For a content revision, "published" is a workflow state.

Therefore, when you view the content administration page, which shows you content, not content revisions, status refers to the publishing status of the content, and does not give you any information on whether there are unpublished new revisions.

Where's my Moderation Dashboard?

From the content administration page, there is a tab for "moderated content." This is where you can send your editors to see if there is content with drafts they need to review. Unfortunately, it's not a very useful report since it has neither filtering nor sorting. Luckily work has been done recently to make the Views integration for Content Moderation/Workflows decent, so I was able to replace this dashboard with a View and shared the config.

Using Views for a Moderation DashboardMy Views-based Content Moderation dashboard.

Reviewer Access

In a typical editorial workflow, content editors create draft edits and then need to solicit feedback and approval from stakeholders or even a legal team. To use content moderation, these stakeholders need to have Drupal accounts and log in to look at the "Latest Revision" tab on the content. This is an obstacle for many organizations because the stakeholders are either very busy, not very web-savvy, or both.

You may get requests for a workflow in which content creation and review takes place on a non-live environment and then require some sort of automated content deployment process. Content deployment across environments is possible using the Deploy module, but there is a lot of inherent complexity involved that you'll want to avoid if you can.

I created an Access Latest module that allows editors to share links with an access token that lets reviewers see the latest revision without logging in.

Access Latest lets reviewers see drafts without logging inAccess Latest lets reviewers see drafts without logging in

Log Messages BUG

As of 8.5.3, you may run into a bug in which users without "administer content" permission cannot add a revision log message when they edit content. There are a fewissues related to this, and the fix should be out in the next bugfix release. I had success with this patch and then re-saving all my content types.

May 14 2018
May 14

Last weekend I attended my first ever Drupal Sprint organised by NWDUG.

My background with Drupal is slightly unconventional: as a newbie to Drupal, who only became aware of its existence just under a year ago, I’ve had a fast-track journey with the software whilst working at CTI Digital. I don’t have an in-depth knowledge of the technical side of Drupal, but as I work in Marketing, exploring the history and culture around Drupal, I’m quickly becoming a bit of an expert. Therefore, attending my first sprint was a great insight into the world of Drupal.

IMG_6029

The May Sprint Team

 

The sprint was organised by NWDUG and we were happy to offer up our office space, as a large space with comfy seats and plentiful coffee is something always appreciated at a sprint. The space is actually open for anyone to use, so if you’re interested in holding a Drupal event, please get in touch any time.

 

Here’s what went on at the sprint:

9:30am

Everyone arrived, chipper and excited for the day. The first thing I noticed was how friendly and welcoming everyone was, even though I obviously wasn’t your standard Sprint attendee. Coffee and some light bites were shared out before we headed to our event space, named ‘The Garden’, for the welcome brief, given by Phil Norton.

Phil talked us through what would happen throughout the sprint and took special care to ensure first-time sprinters were set up and knew how to get involved. There were also a few non-technical activities, for newbies like me to get involved with.

Dc_GnsiWAAAKT8H-129037-edited

Phil's welcome address in 'The Garden'


10am

The Sprint begins! Those interested in doing some development discussed which issues they’d like to get involved with, then broke into teams and got to work. Again, I was delighted to see just how engaged all the first-time sprinters were; no-one was left confused or overwhelmed by the Sprint.


11am

A few of us broke off into a Case Study Workshop. Working in Marketing, I’m a big fan of a beautifully written case study, so we created a task force to review how we can encourage more members of the Drupal community to celebrate their work within the Drupal case study section. We used the AIDA model to break down the journey of writing a case study for developers and marketers. Then, we discussed the blockers and opportunities at each stage.

case study workshop

The case study workshop in full swing

 

Lunch!

Pizza and more pizza! After a busy morning everyone had a break to eat pizza, play pool, and socialise. Thank you to Access, for co-providing the pizza with us. There was also time for a quick group photo and an impromptu dance break, where a mini sprinter taught the developers how to do The Floss. Unfortunately no future ‘Britain's Got Talent’ winners were discovered, but everyone definitely enjoyed themselves!

[embedded content]The Drupal Floss

 

1pm

Back to sprinting: the developers resumed their issue teams and the second non-technical activity took place. Paul Johnson took video interviews, detailing the origin stories of how the attendees got involved with Drupal in the first place. Members of the sprint group discussed how Drupal has changed their lives, something that Rakesh recently delved into on our blog. It was inspiring to hear the developments of personal stories and journeys with Drupal.

IMG_6220

Post lunch sprinting

 

3pm

Before we knew it, the sprint was over! In summary: it was a brilliant day for technical and non-technical individuals alike. Afterwards a few of the group went for some celebratory drinks to soak up the success of the day.

What did we achieve?

There were a total of:

  • 16 patches applied
  • 5 were successfully reviewed and tested by the community (RTBC
  • 2 issues completely fixed.

Along with the open source contributions, we achieved:

  • A significant development into the accessibility of case study writing
  • The capture and documentation of the origin stories of multiple Drupal advocates

Special Thanks

Finally, I’d like to take some time to give special thanks to a few individuals on the day:

Our MVPs - Gemma Butler and Craig Perks

Gemma and Craig came down to keep the day running smoothly and it couldn’t have happened without them. From first aid to countless other essential roles, Gemma and Craig really made the day what it was and we couldn’t say thank you enough!

Rakesh James

Rakesh got the ball rolling for this sprint in the first place and was the driving force in helping it happen. Thank you Rakesh and hopefully this isn’t the last time you’ll be making something like this happen.

Phil Norton

Phil heads up the North West Drupal User Group and provided the community to form the sprint of such a welcoming and successful group of multi-talented individuals. So thank you Phil for such a great day!

And thank you to everyone else who attended;

  • Peter Jones
  • Des Fildes
  • Nigel White
  • James Davidson
  • Lesley Moreira
  • Tony Barket
  • Richard Sheppard
  • Phil Wolstenholme
  • Steve Hilton
  • Syed Huda
  • John Cook
  • Daniel Harper
  • Andrew Macpherson
  • Rachel Lawson (From The Drupal Association)
  • Craig Perks
  • Michael Trestianu
  • Paul Johnson
  • Andrew J

Interested in attending the next Drupal Sprint? Follow  and  on twitter to hear about the next one.

.

May 01 2018
May 01

When coming up with a security plan for your Drupal website, or any website for that matter, you need to take several key factors into account. These key factors include your server host, server configuration, and authorized users. Typically, the weakest link in that chain is how your authorized users access the server, so first we want to secure access to allow your admins and developers in, but keep hackers out.

Hosting Provider

Choosing your hosting provider is one of the most important decisions to make when it comes to site security. Your server is your first line of defense. Not all hosts have the options that you need to implement best practices for securing the server itself, let alone websites or other services that will be running on it too. 

At Zivtech, we use VPS servers for some hosting solutions for our clients, but we also use specialized hosting solutions such as Pantheon and Acquia when it makes sense. Taking the time to figure out which services your site(s) needs prior to moving to a host will save time later; you won’t need to move to another when you realize they don’t provide the services you really need. It’s the concept of “measure twice and cut once.”

Authorized Users

Many shared hosting solutions are set up with cPanel, which typically gives users FTP access to their web server environment by default. FTP is not encrypted like communications over SSH, so configuring sFTP is recommended if that’s all your host allows. 

The most secure way to connect to your server is through SSH, which is encrypted from end to end. Most VPS hosting companies give users access to their server through SSH by default, unless you install cPanel or other tools later. When using SSH, it’s much more secure to connect using an SSH key to authenticate with the server instead of a password. Typically, VPS hosts give you access to the root user to start with, so we need to stop authentication with that user as soon as possible.

Forcing SSH key authentication and configuring an authorized_keys file for each authorized user on the server is the best way to keep your server locked down from unauthorized access by malicious users. 

Get started by generating an SSH keypair on your local machine. I’m a security geek, so I use 4096-bit keys at this point for added security, but you can also use 2048-bit keys and still be secure at this point.

Below is an example of how you can generate an SSH key if you don’t have one already. The output files will be written to ~/.ssh. Without changing their name, they’ll be ~/.ssh/id_rsa and ~/.ssh/id_rsa.pub. Let’s go ahead and generate our key for our root user now.

ssh-keygen -t rsa -b 4096

After generating your SSH keypair, you’ll want to copy the contents of the ~/.ssh/id_rsa.pub file, as that’s the SSH public key we will be adding to that authorized user’s authorized_keys file. It’s okay to pass this key around in emails, chat programs, and other unencrypted methods of communication; it’s the public key, which can and should be seen by others. The ~/.ssh/id_rsa file, on the other hand, is the private key, which should never be shared through unencrypted methods, and typically should not be seen by anyone but the person who owns it.

Server Configuration 

File Permissions

File permissions are a huge hole for hackers to gain access if they’re not configured properly. Hosting platforms like Acquia and Pantheon typically handle all these permissions, so there isn’t much to worry about in those environments. 

Those running on their on VPS will want to ensure they have the permission for their Drupal codebase, Public Files, and Private Files directories locked down. I’m not going to get into the specifics of file permissions in this post, but there are some great resources on Drupal.org on how to lock down your site’s files.

There are also some great modules out there to help facilitate secure files on your Drupal site. The File permissions module uses Drush to handle setting your site’s permissions, which could be helpful for those not comfortable with command line. The Security Review module allows you to take a look at various security related settings on your site including file permissions, so that is something I highly recommend running every so often on your sites to make sure everything is still locked down.

Apr 06 2018
Apr 06

In my humble opinion, as a Drupal developer, contributing back to the Drupal Community is something we should love to do.

Have you ever considered a Drupal with no Views module?

Or thought about a world where there is no Drupal at all? Just think of how much extra time you would be spending writing and fixing code for each individual project. Or how much more difficult it would be for a developer (or site builder) to finish a job on time!

Lucky for us, these days I hope that we have solved the issues of time-consuming development: the answer is open-source, the answer is Drupal. Thanks to collaborative contributions, Drupal is a quality, world-leading resource. I feel excited by the opportunity to get involved and contribute back to Drupal open-source projects, don’t you? The quantity of your contribution doesn’t matter; even your digital experience or expertise isn’t important. Big or small, all that matters is whether you are able to give something back or not.

Once willing to contribute, we all face the questions: How can I start my Drupal contribution? 

The simple answer: check for the next Drupal sprint happening near you, add it to your calendar and get to the sprint! Once there, you can find mentors and, most importantly, ask questions! Some people might say: 'I am not writing code any more' or 'I am not a developer'. Yet they also ask:

But I am using Drupal, so is there a way I can contribute?

Well there is a plenty of room for you to get involved. Here are just some of the ways I am aware of:

  • Register on Drupal.org as a user
  • Confirm as a user on Drupal.org
  • Tell someone about Drupal- spread the word!
  • Join the Drupal Association
  • Attend a Drupal Association meeting
  • Improve documentation - even if that’s just correcting a spelling mistake
  • Marketing - write blog posts, articles, organise events
  • Write Case Studies - explain what Drupal can achieve
  • Follow and share Drupal's social media
  • Mentoring 
  • List someone as a mentor on your Drupal.org profile
  • Speak at Drupal events
  • Test module patches (bug fixes) and quality assurance
  • Report an issue
  • Report spam users on Drupal.org
  • Take and share Drupal-related photographs
  • Organise Drupal events, like Meetups, Sprints and Camps
  • Sponsor a venue for Drupal events
  • Host the reception desk at Drupal events
  • Help on the sessions room
  • Fund or Sponsor Drupal events

Again, it’s not a matter of how we contribute to Drupal, what’s important is to ask yourself: 'Are we/ Am I giving back to Drupal?' Over the past fifteen years, Drupal has celebrated 8 major releases and it is totally incomparable from the first to the latest version. All of this is made possible because of many of our contributions. So whatever your contribution may be, it’s very important to Drupal.

Title image by pdjohnson on Flickr

Apr 05 2018
Apr 05

Drupal 8.5 was released on the 7th of March 2018 with a host of new features, bug fixes, and improvements. There are plenty of exciting updates for developers in this blog. Or if you're a business owner, click here to find out what this means for you.

Any projects using Drupal 8.4.x can and should update to Drupal 8.5 to continue receiving bug and security fixes. We recommend using composer to manage the codebase of your Drupal 8 projects.

For anyone still on Drupal 8.3.x or earlier I recommend reading the Drupal 8.4.0 release notes as Drupal 8.4 included major version updates for Symfony, jQuery, and jQuery UI meaning it is no longer compatible with older versions of Drush.

One of the great things we noticed from the update was the sheer number of commits in the release notes.

Seeing all the different issues and contributors in the release notes is a good reminder that many small contributions add up to big results.

Dries Buytaert, Founder of Drupal

So what are the highlights of the Drupal 8.5 release?

Stable Releases Of Content Moderation And The Settings Tray Modules

One of the changes to the way Drupal is maintained is the new and improved release cycle and adoption of semantic versioning. Major releases used to only happen once every couple of years, Drupal now uses a much smaller release cycle for adding new features to core of only 6 months. New features are added as “experimental core modules” and can be tested, bug fixed and eventually become part of Drupal core.

One example of the shorter release cycle is the BigPipe module. The module provides an implementation of Facebook’s BigPipe page rendering strategy, shortening the perceived page load speed of dynamic websites with non-cacheable content. This was an experimental module when Drupal 8.1 was released and became a part of Drupal core as a stable module in 8.2.

In Drupal 8.5 the BigPipe module is now enabled by default as a part of Drupal’s standard installation profile. BigPipe is actually the first new feature of Drupal 8 to progress from experimental to stable to being a part of a standard installation profile.

There are two exciting modules now stable in the update, they are:

  • Settings Tray
  • Content Moderation

Settings Tray is a part of the “outside-in” initiative where more of the content management tasks can be done without leaving the front end of the website, managing items in context such as editing the order of the menu items in a menu block.

The Content Moderation module allows the site builder to define states in which content can be placed such as “draft”, “needs review” and to define user permissions necessary to move content between those states. This way you can have a large team of authors who can place documents into draft or needs review states, allowing only website editors with specific permissions to publish.

New Experimental Layout Builder

Sticking with experimental modules, Drupal 8.5 sees the introduction of a new experimental layout builder. This module provides the ability to edit the layouts of basic pages, articles and other entity types using the same “outside-in” user interface provided by the settings tray.

This allows site builders to edit the layout of fields on the actual page rather than having to use a separate form in the backend. Another feature is the ability to have a different layout on a per-page / item basis if you so wish with the ability to revert back to the default if it doesn’t work for you. There’s still a long way to go and is currently only a basic implementation but it should be improving significantly over the coming months and hopefully will see a stable release in Drupal 8.6.

umami-8.5-layout-builder

The experimental layout builder in action 

PHP 7.2 Is Now Supported

This is the first version of Drupal to fully support the latest version of PHP. Support is not the only aspect of this release though, site owners are now also warned if they try to install Drupal on a version of PHP less than 7.0 they will no longer be supported by Drupal as of March 7, 2019.

Drupal 8.5 now also uses Symphony Components 3.4.5 since Symfony 3.2 no longer receives security coverage. I expect Drupal 8 to remain on 3.4 releases until late 2021 or the end of Drupal 8's support lifetime (whichever comes first). Finally, PHPUnit now raises test failures on deprecated code.

Media Module In Core Improved And Now Visible To All Site Builders

Drupal 8.4 added a Media API into core which was based on all the hard work done on the contributed Media Entity Module. The media module provides “media types” (file, audio, video, and image) and allows content creators to upload and play audio and video files and list and re-use media. The core media module can be expanded by the installation of key contributed modules which add the ability to add externally hosted media types such as YouTube and Vimeo videos.

The module has been present in the codebase but was hidden from the module management interface due to user experience issues. These issues have now been taken care of and anyone who has access to the module management page can now enable the module.


New “Out of the Box” Demo Site

One of the key initiatives is the “out of the box experience”. The aim is to showcase what Drupal can do by providing a simple to install demo website (called Umami presently) with example content, configuration, and theme.

According to Drupal, the main goal of the demo site is:

To add sample content presented in a well-designed theme, presented as a food magazine. Using recipes and feature articles this example site will make Drupal look much better right from the start and help evaluators explore core Drupal concepts like content types, fields, blocks, views, taxonomy, etc.

The good news is that Drupal 8.5 now comes with the demo website available as an installation profile. The profile is “hidden” at the moment from the installation GUI but can be installed using the command line / drush.

The demo website still needs a lot of work but the groundwork is firmly in place and may become selectable as an installation profile for demonstration and evaluation purposes in a future release of Drupal 8.5.x. I recommend users not to use the Umami demo as the basis of a commercial project yet since no backward compatibility or upgrade paths are provided.

Migrate Architecture, Migrate Drupal and Migrate UI Modules are now Stable

This item almost deserves its own blog post as it’s such a major milestone for Drupal, with over 570 contributors working on closing over 1300 issues over a 4 year period. As such the Migrate system architecture is considered fully stable and developers can write migration paths without worrying about the stability of the underlying system.

The Migrate Drupal and Migrate UI modules (which are used for Drupal 6 and 7 migrations to Drupal 8) are also considered stable for upgrading sites which are not multilingual, with multilingual support still being heavily worked on.

There is also support for incremental migrations meaning that the website can be worked on while the content is still being added on the site being upgraded/migrated from.

More information can be found in the official migrations in Drupal 8.5.0 post.

Links to Drupal 8 User Guide

Now on a standard installation you are greeted with a welcome page and a link to the new and improved Drupal 8 User Guide. While only a small addition, we can see this as a major win as it will improve the evaluation experience for new users.

Future Drupal Development

There is currently a proposed change to the 6-month release cycle to reduce it to a 4-month cycle because, according to Drupal, "currently, given time for alpha, beta and rc releases, issues that narrowly miss the beta window have to wait eight months to get into a tagged release."

This will require 2 core branches to be supported at once and additional work for core committers. However, new features and bug fixes will be available sooner so it will be interesting to see what the outcome of the proposal is.

What Does This Mean For Business Owners?

You’ll need to ensure you’ve updated your site from Drupal 8.4.5 to 8.5.0 to continue receiving bug and security fixes. The next of which is scheduled to be released on April 4th, 2018. If, however, you are on Drupal 8.3.x and below we urge you to read the release notes for Drupal 8.4.0 as there were some major updates to consider. These include a jump from jQuery 2 to 3 which may have some backward compatibility issues affecting any slideshows, carousels, lightboxes, accordions and other animated components.

Drupal 8.4 also dropped support for Internet Explorer 9 and 10 where ay bugs that affect these browsers will no longer be fixed and any workarounds for them have been removed in Drupal 8.5.

If your website is still on Drupal 7 then this is a good time to consider migrating to Drupal 8 as the hard work carried out on the migrate modules mentioned above will streamline the process of adopting the new platform.

If you have any questions about migrating your Drupal 7 website to Drupal 8 please let us know and we'll ensure one of our experts are on hand to help.

Get in touch

Important Dates

See https://www.drupal.org/core/release-cycle-overview for more:

  • 8.6.0 Feature Freeze: Week of July 18, 2018
  • 8.6.0 Release: September 5, 2018
  • 8.7.0 Feature Freeze January 2019
  • 8.7.0 Release: March 19, 2019
Apr 03 2018
Apr 03

While everyone has a busy week attending Drupalcon sessions and events (be sure to check out Mediacurrent’s afterparty) , if you find some extra time, Nashville has an eclectic mix of activities and places to go. Whether you're looking for great music in none-other than "Music City" or you're looking for a nice place to relax and grab a bite to eat, take advice from a Nashville native and check out my list of Nashville's must-see spots. When you're ready to take a break from drupalin', check out these suggestions and engulf yourself in the Nashville culture. 

Music

Downtown Nashville

Image source: Wikipedia 

Whether you enjoy country music or prefer other genres, Nashville offers something for every taste.  Some nights you might need to venture outside downtown for more rock and roll. If music is at the top of your Nashville bucket list, here are nine spots you won’t want to miss:  

Food 

Nashville Chicken

Source: Monell’s

There has been a huge number of new restaurants opening but here are a couple of classics and a newish one:

  • Rotier’s Restaurant, the original Cheeseburger in Paradise? A Nashville classic and award winner, just be sure to get the burger on French bread.
  • Family style southern food at Monell's.  Dinner and breakfast are served to the table and passed around like a family holiday.
  • Hip Pinewood Social attracts visitors any time of day, breakfast and Crema coffee, co-working spot during the day, and bowling on antique lanes in the evening.
  • Need Barbecue? Martin’s, Peg Leg Porker,  Edleys, or G’z BBQ are all good choices.
  • Restaurants of award winning chefs include Sean Brock's Husk from Charleston, Tandy Wilson's City House, and the Catbird Seat. This year's James Beard semifinalists include Henrietta Red, Bastion, Josephine, and longtime East Nashville restaurant Margot Café & Bar.
  • Nashville Hot Chicken is very popular with heat level choices for anyone. But pay heed if they warn you when ordering.

Don't forget about the famous Nashville Hot Chicken. A few favorites among many great spots:

  • Princes Hot Chicken Shack. The original.
  • The Tenders Royale from Pepperfire is a nice introduction along with a couple of local drafts on tap, and blues music in the background.
  • Tenn Sixteen Great East Nashville Five Points restaurant.  The hot chicken comes in one heat level, kind of a "Nashville medium".  That is, it's usually pretty hot, unlike other restaurants that don’t specialize in hot chicken.
  • Fannie Mae's, which conveniently just opened up a new restaurant location near the convention center.
  • Another list hot chicken can be found here


Museums

George Jones Museum

Source: George Jones Museum (Also known as the home of the Mediacurrent Afterparty!)

Nashville is rich with history and musical history is at no shortage. Most of these museums are an easy walk or bus ride downtown:

  • The Frist Center -  This art deco building was originally the post office. The current exhibition is the exclusive North American venue of Rome: City and Empire from the British Museum.
  • Country Music Hall of Fame and Museum - Across the street from the convention center, you can also check out Hatch Show Prints or tacos from Bajo Sexto.
  • Musicians Hall of Fame and Museum - This museum “honors the talented musicians who actually played on the greatest recordings of all time.” Additionally The Rolling Stones first ever major exhibition, Exhibitionism, is making its last U.S stop, taking on Music City at the Musicians Hall Of Fame and Museum.
  • Lane Motor Museum - An amazing variety of the largest European collection of cars in the U.S. located a few miles from the convention center.

Exercise

Warner Park

Source: Expedia

Jogging/Walking

  • The downtown Cumberland River Greenway connects to Bicentennial mall - This route can be varied for any distance. 
  • Another popular area for walking and jogging is to cross the Shelby Street Pedestrian Bridge to Cumberland Park and Nissan stadium. 

Hiking/Trail Running 

  • Warner Parks - Large wooded parks on the western boundary of Nashville has hills with a view of the city.
  • B Cycle has bikes for rent by the hour with many locations to pick up or leave a bicycle.   


Family and Kids Activities


Miscellaneous

  • There is a free bus downtown to the Gulch or Farmer's Market and Germantown that has stops around the convention center.  Look for the Green Circuit.  This would be a good way to get to the AAA Nashville Sounds Baseball game in the evening.  
  • A couple of hints on street pronunciations beyond just a southern accent might help too:

       Demonbreun Street - Pronounced da-mun’-bree-un.
       Lafayette Street - Pronounced luh-fay’-ett. ( I know, I know) 


Hopefully everyone has a great experience in Nashville and comes back for a more leisurely visit. 

Apr 03 2018
Apr 03

In part one of this post, I went over how Drupal Security Advisories, SSL/TLS certificates, and thorough user account security help lay the foundation for keeping your Drupal site secure. In part two, we’ll take a look at user roles and permissions, input filters and text formats, and third party libraries.

User Roles and Permissions

To keep your site secure, always make sure that your user roles and permissions are configured properly. Depending on the modules installed and third party integrations, there could be additional permissions and/or roles to configure to ensure the site is still secure after installing a particular module. It’s important to read the full module README and/or module documentation to verify that all configuration options and permissions have been set up securely. In many cases, modules with very important security related permissions will either set them to a sane default configuration, or put up a notice on the modules page within the admin UI. Some will do both. Some will do neither, so that’s why you need to be aware. 

For each module you enable, there can be optional or required permissions that need to be configured. This is one of the easiest things to overlook as a Drupal beginner, so keep an eye on which modules you’re enabling, and if you have permissions set for all your roles before launching the site. 

User 1, the superadmin account, has full access to a Drupal site without needing any additional roles or permissions assigned, so testing with that user is not the best. Create some test users within each role and test how the site works logged in and logged out to be certain that your roles and permissions are configured properly. You should only grant your most trusted admins access to the User 1 account. It’s also a great idea to rename the User 1 username from admin to something custom to avoid easily guessing or enumerating the superadmin username.

Obscurity is not security, but in some cases it does help to further secure the User 1 and other admin accounts on the site when using other security best practices. Disabling the User 1 user completely through MySQL is a more heavy-handed approach to locking down the superadmin user. 

There are also contrib modules that help facilitate additional obscurity on top of your user security, such as Rename Admin Paths and Username Enumeration Prevention. These modules can help keep potential hackers, script kiddies, and bots guessing instead of providing them with easy to use information in their hacking attempts.

Input Filters and Text Formats

Input filters and text formats are a huge part of ensuring a Drupal site doesn’t get hacked. The wrong settings on an input filter or the text format for a text field, such as a comment field, can be an easy way in for potential hackers. 

Content editors should be able to add the content they need without compromising security. Certain input filters should be enabled in the text formats for every format to ensure that HTML can’t be malformed and that markup can’t be added to exploit the site. 

The most common of these exploits is a Cross Site Scripting attack, which ultimately tricks the database into allowing code submissions to the database in a malicious attack. These types of attacks can end up with a hacker taking over your whole server, or just your database, but this can be prevented with the proper text formats and WYSIWYG settings. Let’s take a look at some of the most important settings to configure to ensure your fields are sanitizing all their data properly before being submitted to the database. 

The HTML filter is probably the most important input filter provided by a text format. It allows for specific tags, and even specific attributes of a given tag, in the actual HTML. Without the HTML filter, your site is open season for hackers, script kiddies, and bots to muscle their way in through possible exploits. 

It’s important to ensure that embedded objects, such as <script> and <iframe> tags, are not allowed, or only allowed by trusted users. They can easily be used to run malicious code on a site from external locations. There’s also a newer filter available that disallows usage of <img> tag sources that are not hosted on the site by replacing them with a placeholder image. Be aware that when you create a new custom text format, no input filters are chosen by default. It is highly recommended to use the “Limit allowed HTML tags and correct faulty HTML” HTML filter as a minimum.

There are four text formats available in Drupal core out of the box; Basic HTML, Restricted HTML, Full HTML, and Plain Text. In general, you probably want to give most users Basic HTML, but you might want to give your content editors more control over the markup they can add. Adding an editor role to the Restricted HTML format with some customized settings may be a good idea for those users. 

Text formats

You want to give the least permissive text formats to untrusted users, so Plain Text is a great choice for comments on blog posts to avoid spam links and malicious markup that isn’t filtered properly. Text formats can also be associated with a WYSIWYG, so be sure to enable or disable that for roles you trust or don’t trust as much.

Note: Keep in mind that new text formats and WYSIWYG settings can create new permissions on the site, so be sure to review all roles and permissions again after getting these configured.

Third Party Libraries

One of Drupal’s strengths is how easy it is to integrate with third party JavaScript libraries through contributed themes and modules. The problem is that these third party libraries are not covered by the Drupal Security Team, so they don’t get their own security advisories like Drupal core and Drupal contrib projects do. 

There have been a few cases when very popular libraries like CKEditor have received a Public Service Announcement on the Drupal Security Advisories page. PSAs like these are not very common unless there is a major security advisory for a third party library, or possibly a major incoming security issue for Drupal core that developers should be ready for. This is something that’s often overlooked, even by seasoned Drupal developers.

The lack of a true security advisory built into Drupal for these third party libraries means that it is up to you and/or your team to ensure that any libraries you have installed are still secure. This typically means that you need to sign up for security alerts for that project, if they have them, or keep an eye on the project releases that are security releases. Again, there are times that you might get a warning from the Drupal Security Team in a PSA about a library’s upcoming security release, but don’t count on this as a reliable way to prevent an attack; it’s not the Drupal Security Team’s job to monitor every third party library out there. Luckily, many third party libraries are hosted on GitHub and have an easy to follow releases page, although some do not and require a bit more due diligence to follow the latest security releases. Wouldn’t it be great if every open source project had such an amazing security team like Drupal’s?

Conclusion

A comprehensive Drupal security plan usually requires team effort. There are plenty of options out there to ensure that every Drupal site can stay secure, so don’t leave your site out in the cold for hackers to compromise it, or, even worse, steal user information and post it publicly for other hackers to use. This has become a common trend with sites that are hacked, which creates a bad situation for both the company that was hacked as well as for the users who had their data stolen. 

If you don’t have the time or resources to keep your site secure, seek the help of a team of experts. Keep calm and stay secure out there, fellow Drupalers!
 

Mar 27 2018
Mar 27

There’s no foolproof way to get an unhackable Drupal site; there could always be an exploit that we don’t know about yet. But there are quite a few ways you can help reduce the risk of getting hacked. Let’s dive into some of the most common ways Drupal sites get hacked, and how to secure your site against these points of entry.

Drupal Security Advisories

One of the most common ways to get hacked is to fall behind on known Drupal Security Advisories. Keeping up to date on the latest advisories is ultimately your first line of defense. 

There are security advisories for both Drupal core and contributed projects with varying levels of security risk for the exploits found. You can sign up for the security email list to make things easier to keep track of. You can do this by logging into your Drupal.org account and editing your user profile. From there you can subscribe to the security newsletter on the newsletters tab. This list will email you soon after Drupal Security Advisories are released to the public, which helps quickly notify you or your team of possible exploits that need to be fixed. 

You can use the Update Status module in Drupal core to see which sites are affected by these advisories. Then add an email address to send Security Alerts to daily or weekly. The Update Status alerts have also notified us in a few cases when the email list was backed up and took longer than it normally would. 

Typically, Drupal core security advisories come out on the third Wednesday of the month unless it’s a highly critical update that needs to be patched sooner. Contrib project security advisories can come out on any given Wednesday. 

Drupal 8 has a new release schedule that schedules upcoming minor releases. It’s important to note that with a new Drupal 8 minor version release, the previous minor version becomes unsupported and no longer gets security advisories or updates. It will be important for development teams to plan for these updates moving forward with Drupal 8, as these updates are not typical to the release schedules of Drupal 6 or Drupal 7 core. 

The Drupal core release schedule for both Drupal 7.x and 8.x can be found on the Drupal core release cycle page on Drupal.org. The overview page outlines the upcoming Drupal 8 core releases and major project milestones. Get familiar with them if you don’t want to be blindsided by some updates you weren’t planning on doing that quarter.

Specialized Drupal hosting companies, such as Pantheon and Acquia, have started applying security updates upstream to your codebase, which can be merged with the click of a button in most cases, or even automatically with some additional configuration. This allows Drupal core security updates to be applied with less effort to sites that are hosted on their platforms. Drupal contrib is still up to you to support though. Other companies like Drop Guard and myDropWizard provide various service plans to keep your whole site up to date and not locked into a specific hosting platform. 

Whether you’re looking to do your Drupal security in-house, host on a specialized hosting service, or pay for a support service provider to handle it for you, Drupal Security Updates are by far the most important aspect of your Drupal site’s security. Instead of derailing this whole post about why Drupal Security Advisories are so important, Google “Drupalgeddon” if you are unfamiliar with the term, and you’ll quickly see why they’re at the top of my list.

Laptop

Use SSL/TLS for All the Things!

Unencrypted login forms are an easy way for hackers to gain access to a Drupal site. All websites, especially those that have any sort of authentication process, should be using SSL/TLS encryption by default by now. 

SSL/TLS encrypts the communications between a client browser and the server to ensure that all data being transferred back and forth is encrypted from end to end. This stops hackers and malicious users from eavesdropping on data that you’re sending or receiving from the web server. 

This encryption is extremely important for any sites that require authentication, such as Drupal or WordPress sites, as they both have administrative users that can potentially be hacked if the login form is not secured. It’s imperative that sites that handle financial information and other personal identification information always use SSL/TLS, otherwise that data should be considered compromised. You’ll know when your browser is in a secure SSL session; you’ll see various levels of validation, starting with a green lock saying “Secure” next to it and https:// at the start of the URL in your browser address bar. 

SSL cert

Sites that are not secured by SSL/TLS are vulnerable to malicious users being able to “listen in” on the unencrypted communications between the client browser and the web server through various methods. This information could be login credentials, personal identification information, or something like payment information, which should always be encrypted when sending electronically. 

Encrypting these communications with SSL/TLS stops this from happening unless you are involved in a “man-in-the-middle” attack, which involves spoofing the SSL certificate itself and posing as a real, secure site. It’s good practice to verify that the certificate in the browser is actually owned by the site by clicking the green lock and viewing the valid certificate information. 

Any site can get an SSL cert now through the Let’s Encrypt service, so cost or availability is no longer an excuse for running non-SSL websites. Pantheon’s hosting service even provides SSL certificates powered by Let’s Encrypt for all domains on your account as part of their hosting plans.

Extended Validation (EV) certificates provide additional information about the owner of the certificate directly in the address bar, such as the company name and/or the country the cert was issued for. Generally, you’ll see these Extended Validation (EV) certificates used by financial institutions or larger corporations, but they can be used by any website that fills out the information needed for the Extended Validation certificate. At the time of this writing, Let’s Encrypt does not support Extended Validation certificates or wildcard certificates, so there are still some cases that it is not fully applicable, but it’s a great, free service for non-EV and non-wildcard certs.

Drupal User Account Security

We now know that our communications between the browser and the server are encrypted through SSL/TLS, but do we know how secure our Drupal users’ passwords are? To keep your site secure, ensure that all users, especially your content editors and admins, are not your weakest link. There are multiple levels of user security we need to be aware of when setting up our Drupal website. We’ll take a look at these levels and make sure we have all our users connecting as securely as possible.

Let’s start by taking a look at our most common weakest link, the user password. While there is a nice password strength suggestion tool in Drupal core, there’s nothing in core to force users to use secure passwords out of the box. 

Secure locks

At Zivtech, we use the Password Policy contrib module on most Drupal site builds to ensure that all users have password requirements that make them more difficult to crack. We typically require several elements to the password, such as numbers, capitalization, and punctuation, to add to the complexity of each user’s password. This is important to ensure that privileged users and those with the ability to add content to the site do not have their accounts compromised by a weak password. 

Drupal does have some mechanisms built in that will throttle failed login attempts, but these reset over time and the process can be repeated unless additional steps are taken to block the IP. Ultimately, weak passwords can be an easy point of entry for skilled hackers.

Proper administrator and content editor training is also important to ensure that these users don’t unintentionally negate other steps that were taken to secure the site. This means that site administrators and content editors should be informed that sharing login credentials over insecure communications like email should never happen. Credentials shared across email and other unencrypted communications should be considered compromised as soon as you hit the send button. There are some great password managers out there (we use LastPass) that store encrypted credentials and even allow sharing of credentials securely between team members. Always use one of these tools instead. 

PSA: If you are still sending any passwords or login credentials over email, please stop before you cause a major security breach in your organization or a client’s!

Check back next week for part two! We’ll go over security for user roles and permissions, input filters and text formats, and third party libraries.
 

Mar 21 2018
Mar 21

Drupal Europe promises to be the most significant community lead conference in the history of Drupal on the continent. Redefining and reinvigorating what a major Drupal conference means to the community, business users and agency leaders Drupal Europe promises to be an exciting and rewarding experience.

drupalcamp europe

Darmstadtium, the venue for DrupalEurope. Image cred: DrupalEurope

Right now it is vital that as many people as possible show support for the event in buying a conference ticket early. Doing so will help the volunteer team focus their minds upon providing a vibrant and rich programme rather than be concerned with concerns over finances.

Please join me in buying your ticket without delay. Help the organising team by suggesting your peers to do the same at meetups, via email, on social media.

Early supporter tickets are available until March 26th (6 pm CEST). Buy your ticket now, everyone else is!

UPDATE - Early Supporter Tickets are no longer available, but you can still purchase ticket through the link below.

Get Tickets

 

 

Drupal Europe Tweet Dries

Thank you for supporting the Drupal community and see you in Darmstadt! 

Paul Johnson, Drupal Director at CTI Digital.

Mar 16 2018
Mar 16

In our first post that announced the new Mediacurrent redesign, we looked at the evolution of Mediacurrent.com over the years and talked through the over goals of the relaunch. Now let’s take a look under the hood to see some of the cool stuff we did and discuss what our development team learned along the way.

Let’s talk architecture

Now for the fun part, the technical architecture of the new website. First, the backend was upgraded from Drupal 7 to Drupal 8 - that will probably not be a huge shock to anyone. The more interesting aspect of this build is that we have now implemented a fully decoupled frontend. We accomplished this using a static generator called Jekyll which has been integrated with the Drupal backend. More on that in a bit. First let’s answer the question, “Why decoupled?â€

Why decoupled?

A decoupled architecture provides flexibility for constant evolution, opening the door to a variety of potential programming languages and design philosophies to accomplish your website goals. There are any number of articles that discuss the benefits of moving to a decoupled approach. For this post, I want to focus specifically on the points that were deciding factors for our team.

Security

While we do have full confidence in the security features that Drupal offers, we have to acknowledge that a static public site does offer some advantages that make securing the application easier. First of all, we have the option to make the backend CMS completely walled off from the public site. It’s not a hard requirement that the Drupal admin is made publicly accessible. Second, there are simply fewer vulnerabilities that a static frontend will be susceptible to in comparison to a full PHP application. For example, it’s harder to DDOS a site serving only HTML/CSS/JS and there is no server side code running that could be hijacked by an SQL injection attack.

Performance

Decoupled sites often have a performance boost over a fully Drupal-rendered site because the frontend is more custom and lightweight. This is certainly true in our case. The static frontend requires no processing at the time of request so the page is served up immediately with no server-side execution required.

Hosting

One of the things we liked about this particular solution was that it made the hosting architecture pretty simple and inexpensive. With only editors logging into the CMS and the static site being served by Gitlab, we were able to have a fast, reliable stack up and running relatively easily. Up-time is great in that you aren’t as vulnerable to a production error or traffic spike bringing the site down. That being said, all platforms are subject to downtime each year.

Eating our own dog food

As many other agencies will attest to, when you work on your own website it’s a good chance to try something different! We looked at what some competitors had done and we wanted to try an approach that would be a good fit for our needs without overcomplicating the end solution. This endeavor was a way to take some risks and learn along the way.

Dividing the work

The great thing about decoupling is that you break apart the work that needs to get done. The frontend team can focus on the frontend stuff without being tied too much to the backend work (although there will always be some overlap). Our agency spends a lot of our day delivering solutions to our clients so being able to break apart some of the work streams was an advantage. We like that in the future we don’t necessarily need to do a big redesign and Drupal upgrade at the same time. With a decoupled approach, we have the flexibility to tackle each separately.

Technical Overview

Now that you have seen the “Why†behind this approach, let’s look at the “How.†We have kept our Drupal CMS in Bitbucket, which gets deployed to a Pantheon server. That piece is still the same as its been for many years. The new wrinkle is that the public frontend is served on GitLab Pages. If you haven’t heard of Github Pages (which run on Jekyll), Github, GitLab and many other services allow you host Jekyll source files which they can auto-compile into HTML pages and host for you for free or cheap. Pretty neat huh? We ended up going with GitLab Pages because GitLab allows you to add more build customizations than Github. We have also looked at potentially using Netlify in the future as the host for our Jekyll files.

The question you might be asking is how does Drupal content make its way to GitLab? Put simply, we translate node content to markdown and push to the GitLab API on every node save. For user files, we actually still use Drupal uploads and reference the path within Markdown files. If you are familiar with Markdown files, these are the “content†files that Jekyll compiles into pages. The diagram below illustrates the basic flow.

Illustration of how Drupal content makes its way to GitLab

The concept is pretty simple: have Drupal manage your content, write to Jekyll markdown files and deploy those files to a static host.

Why not [Insert favorite Node framework here]?

You might be saying, that's all well and good but why go with a static generator over a server-rendered JavaScript framework like Next.js or Nuxt.js?

The short answer is that we reviewed several options and concluded there wasn’t a framework we felt was a fit at the time we were planning development (around mid-late 2016). Going with a JavaScript-only framework was ruled out for SEO reasons and the options for Isomorphic (server + client side js) frameworks weren’t as stable as we would have liked. Jekyll was the most popular static framework (and still is) with a variety of plugins we could utilize. After doing some POC’s we opted for Jekyll in order to keep the page rendering lean, simple and speedy. The overall complexity of the integration was also a deciding factor in choosing Jekyll over other options.

Trade-offs

One of the fun challenges with a static only site is that you need to learn how to get around the lack of server side rendering. The files are of course static, thus if you want anything dynamic looking you are limited to mostly JavaScript-based solutions. A couple quick examples are forms and the site search. For forms, we were already using Pardot hosted forms for marketing automation, so that wasn’t a big tradeoff. For site search, we went with a pretty cool solution that leverages https://lunrjs.com/ to handle searching the site. Essentially we have Drupal push an index file that Lunr.js can search against using only Javascript in the browser. For RSS, we still generate the RSS feed from Drupal and push to GitLab.

Lessons learned and looking forward

Now that we have the shiny new website up and running, it’s time to look ahead. Would we recommend taking this exact approach in 2018? I would say not exactly. While we are still intrigued by the power of static generators serving as a front end we think something like Gatsby.js (Node/React-based) might have more upside than Jekyll. Further, we aren’t sold on this type of static-only being able to scale in comparison to Node-hosted solutions. The options for server-rendered JavaScript frameworks increase by the day and many have matured over the last few years. Mediacurrent.com will continue to be our place to try new approaches and share with you everything we’ve learned along the way. Thanks for joining us in this journey and enjoy the new site!

Additional Resources
The 3 C’s and 1 D of Drupal: Why Decoupled Matters | Mediacurrent Blog
Relearning Accessibility for a Decoupled Front End | Mediacurrent Blog
4 Benefits of Decoupled Architecture for Enterprise Marketers | Mediacurrent Blog

Mar 15 2018
Mar 15

Since joining Mediacurrent in 2009, I've seen firsthand how our company has grown and evolved, and how our website has mirrored those changes. Today, I am thrilled to announce the launch of our newly redesigned website, mediacurrent.com.

We’ve come a long way since 2007!

screenshots of the Mediacurrent.com homepage from 2007 to present

2017 marked the 10 year anniversary of Mediacurrent. It’s been an amazing journey from Drupal firm to a full-service digital agency. Along with this journey, we’ve expanded and redefined our services to meet the changing needs of our clients.

Explore the site to learn more about Mediacurrent’s development, design, and strategy services.

Built on Drupal 8 with a decoupled approach, the new site reflects a clear vision of our core focus:

Open source development, design, and strategy that grows your digital ROI

Celebrating Our Success

I am incredibly proud of the Mediacurrent team for the persistence and hard work that went into building our new website. It’s this teamwork that has fueled award-winning sites for weather.com, travelport.com, careaction.org, and many others. See how we do it.

group shot of the Mediacurrent team

Some of the MC team at a recent code sprint retreat in Los Angeles

Sharing Our Resources

In our very first company blog post circa 2009, we shared an ambitious goal — we hope the Mediacurrent staff can share pertinent content, and become a trusted advisor when it comes to your web related issues —and we got there! From blog posts and tutorials to videos and podcasts, our new site makes it easier to navigate a great depth of thought leadership content by the Mediacurrent team.

Expressing Our Culture

Mediacurrent is in an exciting period of growth, and we're evolving our team to keep pace with all of the work that lies ahead.

Our culture is at the core of everything we do and one of the biggest drivers behind our redesign was to tell that story. There are lots of ways to do this on the new Mediacurrent.com: meet our team, see how we give back to the Drupal community, and explore career opportunities

Enjoy the new Mediacurrent.com site, and we welcome your feedback!

Mar 12 2018
Mar 12

Last week I was able to attend Drupalcamp London and present a session called “Drupal 101”. The session was about how everyone is welcome in the Drupal Community, irrespective of who you are.  At Drupalcamp London I met people from all walks of life whose lives had been changed by Drupal. I caught up with a friend called Ryan Szrama who is a perfect example of my message, he conducted a brilliant speech at Drupalcamp about “doing well by doing good” so I’d like to share his story with you.

Ryan Szrama

39878713524_c3f9066cd8_k

Ryan giving his talk at Drupalcamp London. Photo Cred: pdjohnson

Ryans talk kick-started Drupalcamp London on a great note. He told the story of his amazing journey with Drupal. When he began his career with Drupal 12 years ago, Ryan was short-haired and beardless. He was fresh out of Bible college where he had studied theology, a far cry from computer science. However, before and during college, Ryan maintained a hobby of hacking on MUDs and making computer games with his brother. When he wasn’t playing with computers, Ryan dreamt of helping others. With the motivation to help others he packed up all of his belongings and moved to a neighborhood known for crime and harsh living conditions. He lived there for 8 years, but for all of his hard work, he felt like he hadn’t made much difference. After leaving the neighborhood he only knew of 2 people who had been able to move away for a better future.

In 2006, having recently discovered Drupal, Ryan faced an error whilst trying to download an e-commerce module. Straight away he went to drupal.org and unaware of the CVS system, posted his first support request. Just 34 minutes later, a stranger resolved Ryan’s problem. This fast exchange of knowledge amazed him.

A day later another user asked the same question on Drupal.org. Ryan knew the answer and helped the stranger, just as he had been helped the day before. Suddenly Ryan realised that he could use the internet and help other people. By teaching them how to use this accessible software, he could give someone the tools to develop their careers and support their families. By contributing to the Drupal open source project, he finally found he was impacting others lives. That is how Ryan started his Drupal life, which eventually lead him to start working with Ubercart on Drupal 5 whilst working as a developer at osCommerce. Now, on a daily basis, he helps people to use Drupal commerce and still answers Ubercart questions.

Ryan continued by talking about Drupal Commerce. He told us about how contributing to Drupal has impacted his Family life, daily routines, dedications, even how he takes care of his employees or colleagues and clients. His final summary really touched me, particularly this sentiment;

People before computers - `Relationships are worth more than dollars

Ryan Szrama, CEO Commerce Guys

 Find Ryan on twitter here: .

My own story

26718902138_f5c2259743_k

Me giving my session on Drupal 101 at Drupalcamp London. Photo Cred: pdjohnson

That fantastic keynote set the vibe for rest of the camp. Right after the keynote I had to run to my session room. For me, it was a dream come true moment. Like Ryan, Drupal has changed my life for the better so I’d like to share my story as well.

Giving this talk was a moment that I’d been waiting for since my childhood in Kerala, India. The variety of culture there means Kerala is often known as “God's own country”. Since primary school, we had studied Indian and British history. I heard stories that “In British kingdom, there is no sunset”, which amazed me a lot in my childhood dreams so I had always wanted to move to England where I could be an expert in my field.

In 2009, still in India, I started my Drupal life. I began installing Drupal for the first time but was hit with a big error. Fortunately, I knew there was a community around Drupal so I went directly to Drupal.org asking for help.

Rakeshs first drupal question

My first ever question on Drupal.org

A few minutes later, I got a reply from the other side of the world from a developer in the United States called Steve Ringwood. This showed me how amazing Drupal could be. So since then, I’ve worked with Drupal and never looked back. I worked in India for 8 years and trained over 600 other Drupal developers. Then finally, on the 27th January 2018, one of my childhood dreams came true. I flew over to England to join CTI Digital as a Drupal developer.

Over the past few years, I have been fortunate enough to work with a lot of people in the Drupal community. Each has somehow directly or indirectly helped, guided, and inspired me to grow in my career.

Rakeshs druapl community

Some of the amazing people in Drupal who have helped to change my life

So personally, I thank God for Drupal and the people who made it possible, like Dries, every day of my life. Because if Drupal didn’t exist I may have ended up in an unfulfilling career not doing what I loved. Drupal as a technology impacts humans life every day, be that the websites it makes possible like War Child UK or the people in the community.  After hearing from Ryan Szrama from Drupalcamp London, It’s more evident Drupal is impacting more people’s lives than ever before.

If Drupal has impacted your life also, tweet me your own stories at .

 

Resources

If you'd like to know more about Drupal, here are some resources.

My Slides - Drupal 101

Image Credits

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