Apr 17 2019
Apr 17

By Diego SaboloFull Stack Developer | April 17, 2019

By Diego SaboloFull Stack Developer | April 17, 2019

DrupalCon Seattle 2019 was my second Drupal Conference. Everybody enjoys travel, and everybody should enjoy learning while at it! This year I had the opportunity to do both, taking benefit of the Professional Development Program that weKnow offers as well as taking my family on vacation.

Seattle Convention Center The Washington State Convention Center

In my first hours in Seattle, I joined my teammates, got my credentials and the full information about the event... I was surprised by the variety of sessions available! One difference compared to Nashville 2018, this year there were only 2 days for room conferences, but the quantity looks similar. In fact, I did attend more sessions this year than in 2018.

Seattle View from the Space Needle Seattle View from the Space Needle

Tuesday, Dries opened officially the event with an interesting Keynote about the current state of Drupal,  the importance to update the current D7 sites to D8, and the upcoming improvements in the Drupal UI. Also, he focused on the importance of the accessibility and inclusion in the Drupal Community.

Drupalcon Seattle Program The sessions menu had a lot of interesting offers...not easy to decide where to go!

On Wednesday the sessions begun in full…The selection of tracks was not an easy job, most of them were really interesting, so I focused on those that I believe can add more value to my current role (working in growth & support). So I focused on sessions related to Custom Development and Testing. But there were sessions for all topics, from how to improve estimations to tips for remote work. There were also exotics topics such as "Installing Drupal in a homemade raspberry Pi cloud", and Alexa & Drupal integration.

My picks for Wednesday were: 

On Thursday I attended:

  • Advanced Webforms, by @jrockowitz:  A full review of the webforms module potential, handlers and Webform APIS

  • Building a Slack ChatBot, by @jmolivas: Jesus gives us an awesome example for creating chatbots , integrating them with external API’s, and several tips to make interactions between computers and humans.

  • Custom Compound Fields in Drupal 8, by @thagler: an excellent review for multiple elements fields  in D8 and focus on how to create, theme and test our custom compound fields.

  • Advanced Automated Visual Testing, by @shwetasharma84:  Interesting demo for VRT and how to including it in our automated deployment process.

  • Design a decoupled application,  by @justafish, @alwaysworking and @da_wehner: an architecture guide based upon the Drupal admin UI.

The overall balance was an awesome experience for reviewing ideas, learning new things and making new friends. I’m leaving Seattle with a sweet taste, renewed energies and the desire to put into practice the new concepts I learned. 

Big or Complex Project,
Not Enough Devs?

We help development teams meet their deadlines by seamlessly integrating our highly skilled developers.

Apr 17 2019
Apr 17

One of the challenges front-end developers face is adding new components to entity templates that exist outside of what is defined in the Field API; or in other words, adding dynamic components that aren’t really fields. Often this can be easily done by throwing the custom markup in a .html.twig file and calling it a day. But if you’re working on something that needs to be reusable, or if you’re collaborating with a site builder who doesn’t write code, the custom template route can be limiting.

Enter hook_entity_extra_field_info().

Content Moderation: A “Pseudo-Field” in Core

Drupal’s documentation says this hook “exposes ‘pseudo-field’ components on content entities.” You can see this hook in action with the Content Moderation module in core. All moderation-enabled entities can have an option box, placed via that entity’s Manage Display page, that contains a widget to update an entity’s moderation state in place rather than clicking through to the edit page.

Drupal's extra fields interface

The moderation option isn’t a real field. Rather, it’s what Drupal calls a “Pseudo Field.” But by using hook_entity_extra_field_info(), you wouldn’t know the difference. The moderation option can be moved around and configured for various display modes, just like “real” fields.

Using hook_entity_extra_field_info in a Custom Module

On a recent project, we needed to integrate a newer commenting service called Coral Talk. After searching, we learned that no module existed to integrate this service in Drupal. This presented a perfect use case for an Extra Field, and only needed two hooks for the bulk of the work:

/**
 * Implements hook_entity_extra_field_info().
 */
function coral_talk_entity_extra_field_info() {
  // Load commenting configuration.
  $config = \Drupal::config(coral_talk.settings');
  $extra = [];
 
  // Loop over the content types configured to have comments
  // and get their bundle name.
  foreach ($config->get('content_types') as $bundle) {
    if ($bundle) {
      // Add info for Extra Field to nodes only, specific to configured
      // content types. This determines what shows on Manage Display.
      $extra['node'][$bundle]['display'][‘coral_talk_comments'] = [
        'label' => t(‘Coral Talk Comments'),
        'description' => t('Place commenting on the page.'),
        'weight' => 100,
        'visible' => TRUE,
      ];
    }
  }
 
  // Return our new extra field.
  return $extra;
}

After a cache clear, this new field will appear on the configured content types’ Manage Display page and can be placed on the content type along with the other fields for that content type. Now that the field is defined, it needs some info for what should be rendered to the page. This is handled by Drupal’s hook_ENTITY_TYPE_view() hook.

/**
 * Implements hook_ENTITY_TYPE_view().
 */
function coral_talk_node_view(
  array &$build,
  \Drupal\Core\Entity\EntityInterface $entity,
  \Drupal\Core\Entity\Display\EntityViewDisplayInterface $display,
  $view_mode
) {
  // 1. Check to see if our new field should be rendered on the entity display.
  // 2. Determine whether the user has permission to add comments.
  $condition = (
    $display->getComponent(‘coral_talk_comments') &&
    \Drupal::currentUser()->hasPermission('create coral comment')
  );
 
  if ($condition) {
    $config = \Drupal::config(coral_talk.settings');
 
    // Add the new field to the $build array with a call to a custom theme
    // hook to render the comments. Pass necessary config into comment
    // settings.
    $build[‘coral_talk_comments'] = [
      '#theme' => 'coral_talk_comments',
      '#domain' => $config->get('domain') ?? '',
    ];
  }
}

After another cache clear, we’ll now see our comments being rendered to our content types in whichever view mode they’re enabled on. The moves setup of comments outside of code and into a place that’s more accessible and flexible for various users.

This approach is great for simple scenarios. One drawback, however, is that it’s not possible to define any custom configuration options for these pseudo fields. Each extra field is identical, and any configuration has to be hard coded in these hooks. This presents challenges for site builders, who might want to configure comments differently per content type however. Fortunately, there is a solution in contrib that changes how Extra Fields are defined and allows for developers to add configuration to each field. In the next post, we’ll explore the Extra Field Settings Provider module.

Apr 17 2019
Apr 17

DrupalCon 2019 was a bit different for me. I have attended previous DrupalCons, usually sitting in the back of the room just taking in all that I could from experts around the world. This year, however, I had the opportunity to be a speaker. Not only was I afforded the opportunity to speak, but I had two separate sessions accepted.

Talking the Talk

Being my first DrupalCon as a speaker, I might have had a few butterflies in my stomach when I arrived. Those quickly faded, and overall, my sessions on Stanford Cantor Arts Center Redesign and A Survey of Emerging Technology were very well received. I had an absolute blast presenting! Special shout-out to my partners in crime, Kristen Pol and Adam Bergstein, for making the transition from attendee to speaker fairly painless.

Stanford Cantor Arts Center Redesign

This talk was a broad review of our work with Stanford Cantor Arts Center that takes a deeper look at a few problems we faced during the build. There were complexities within the content structure and architecture that we needed to be able to accommodate. Flexibility was the most important part of this website. We walked through the solution to leverage UI Patterns module that allowed component based design, making the build process more practical while allowing content editors the ability to adjust as they see fit on certain areas of the site. 

Listen to the full talk on YouTube.

A Survey of Emerging Technology

Together, Adam Bergstein and I highlighted a set of tools that we know integrate well with Drupal and are used to tackle common roadblocks within the environment. I specifically spoke to the value of GraphQL and Gatsby.JS.

GraphQL provides a common interface for API queries. It is specifically notable for the ability to get information in a sole request, versus JSON requests that require multiple attempts before getting all the data. As far as its ability to play nice with Drupal, there is currrently a GraphQL module that is updated and supported by our community. The biggest benefit of using it within Drupal is for standardizing those onboarding into Drupal. Where they may hit roadblocks coming from the outside in, GraphQL makes the Drupal transition easier.

Gatsby.JS is a static site generator that uses static markup, but can still display dynamic information. What is great is you can bring your own backend into Gatsby.JS. Benefit, getting rid of a lot of vulnerabilities by not having any server-side code running. The vulnerability of a CMS is no longer a worry.

Other technologies covered were Hubspot, ElasticSearch, Pattern Lab, and Cypress.io.

You can watch the full video on YouTube.

More Than Presenting

Group of Hook 42 Team Members Working in Sprint Room

Beyond speaking, I had a fantastic time hanging out with the team, as usual. Every time we’re in the same location together I’m reminded of how talented, intelligent, and funny everyone is. It was especially awesome to get a chance to greet our three newest members of the team (Michael, Emanuel, and Lindsey) in person.

We spent a sizable chunk of pre-conference time sprinting on our company website, which was an amazing team-building exercise and really showed how much we can accomplish when we work together. So hopefully you’re reading this on the flashy, fancy new-and-improved hook42.com!

Overall, DrupalCon never ceases to provide an endless amount of opportunity. From spending time with colleagues, to working hard on new efforts, and even having new experiences like being a first-time speaker, I always look forward to what DrupalCon has to offer.

When I began my career at Hook 42, I made it a goal of mine to one day speak at DrupalCon. A long-term goal, but one that I worked very tirelessly to achieve. Getting the opportunity to share my expertise with others on the stage in Seattle felt like the perfect culmination of two years of hard work to get there. It felt amazing to check off my list.

Apr 17 2019
Apr 17

Agiledrop is highlighting active Drupal community members through a series of interviews. Now you get a chance to learn more about the people behind Drupal projects.

For our latest Drupal Community interview, we had a really great talk with Ruben Teijeiro of Youpal and 1xINTERNET. Ruben revealed to us the meaning and responsibilities of a Drupal hero, a role which has enabled him to spread Drupal awareness all over the world and meet diverse Drupal communities. Read on to find out more about his journey with Drupal and what he's most excited about going forward.

1. Please tell us a little about yourself. How do you participate in the Drupal community and what do you do professionally?

In the Drupal community I am participating as a speaker, organizing conferences, for example organizing DrupalCamp Spain at the moment, also collaborating with companies and other communities in other countries. The purpose of this is to make the community bigger and try to identify issues within the project itself, not only technically, but also human issues - basically just trying to be, like, not an evangelist, but an advocate of open source and Drupal specifically. 

That is exactly the definition of a Drupal hero: someone that really takes open source seriously and wants to bring Drupal to every corner of the world. It’s this kind of “sharing is caring” mentality; as I started in open source, a lot of people helped me to get started. So, for me, I need to give something back, because I’m here at the moment because a lot of people helped me during my career. So I guess it’s our duty to help other people during the next stage of our careers. 

So, at the moment I’m working as a Drupal hero for 1xINTERNET, which is a Drupal agency in Frankfurt. I’m actually doing everything that’s needed: helping our development team, helping our project managers, doing sales pitches, attending conferences, you know, this kind of thing. Apart from that I also have my own digital agency, Youpal, in Stockholm, Sweden; as a co-founder I’m responsible for let’s say the company management things. 

2. When did you first come across Drupal? What convinced you to stay, the software or the community, and why?

My first installation of Drupal was 4.6, and then actively working since version 5, it was something like 8 to 10 years ago. I can tell you that before Drupal I was testing 10 or 12 different CMSs and different technologies, such as Java, Python and PHP, and I was really upset about all of them. One of the latest that I used was Joomla!, I was actually working at a company for 3 years. For me it was things such as the code quality, community engagement, these kinds of things that I was missing. 

Then I found Drupal and I started to feel that this was my CMS; proper code quality, code reviews, not anyone can contribute any module unless they follow some programming practices, this kind of thing. 

Apart from that, I attended my first community event and that’s when my mind was blown. Because it’s when you meet the community that you realize that this is bigger than you expected.

3. What impact has Drupal made on you? Is there a particular moment you remember?

Actually I have a special moment, which is when Drupal brought me to Sweden. It was during the financial crisis in Spain, there was no good work stability, and then suddenly because I was collaborating in the mobile initiative for Drupal 8, my name came up in Ericsson, in the company, so they needed a front-end developer. I was not a front-end developer actually, I was working in the mobile initiative to strengthen my front-end skills, but then I was assigned to the intranet project in Ericsson, and then I worked there for 3 years. That completely changed my mindset, my career, my life, everything.

The project itself is based in Drupal 7, integrated with several internal services, using REST and SOAP. They have Apache Solr for indexing the content, really strict single sign-on internally with their computers ... More or less that’s all, it’s just an intranet, so it’s regarding the employee information, documentation, processing and this stuff.

4. How do you explain what Drupal is to other, non-Drupal people?

When I try to explain this to my parents, or with let’s say people that are more into politics or government, or not technical people in general, what I try to use is samples that everyone knows, like, for example, “Do you know what is NASA? Do you know what is the European Commission? So, their websites are running on Drupal, that means there’s this secure infrastructure where you can just have your websites.” So, more or less, that's how I pitch Drupal in the beginning.

Then if you want to go to younger people, how do you explain it to them? So, if they want to use Drupal, I just try to tell them: “Oh, you want to have your own website, to sell your own stuff, this kind of thing? Then with Drupal you can just do it yourself, it’s a matter of clicks.” More or less I try to tell people, if you are able to use Facebook, you are able to build your own website with Drupal. 

With the new generations, such as with teenagers that will get started into technologies pretty soon, it’s best to use examples that they know on a daily basis; those are really easy to link to, what is this and what is the solution that you get, the outcome of it, you know. For instance, the main or the major universities worldwide, they use Drupal, so, Oxford, Stanford, those are good examples, not for teenagers, but for people who are going to university.

5. How did you see Drupal evolving over the years? What do you think the future will bring?

At the moment I guess it’s not only Drupal, it’s just PHP, the PHP ecosystem must evolve, like the Java ecosystem. So in this case I guess Drupal will become more decoupled, meaning that internally in their core they’re going to have more loosely coupled components, and in the end Drupal is going to be an API-first CMS or even framework. 

Because I guess that with a lot of good things that we are doing in Drupal, all the PHP projects could benefit from them. Like, I don’t fully understand why we have for example a user login component in Drupal, but then Magento use their own user login component, Symfony and Laravel, they use their own, which makes it really difficult to maintain because of multiple components that are doing exactly the same task. 

So, for me, unifying this component in one single one for all the PHP projects should be beneficial, and I think that it isn’t that difficult to make it so loosely coupled that we can use it even as an API.

6. What are some of the contributions to open source code or to the community that you are most proud of?

My contributions … My case is, I guess one of the biggest ones is the Drupal Heroes stickers, because I guess they are now all around the world; I have seen them in Saudi Arabia, I have seen them in Africa, I have seen them in India, you know, Russia, United States, South America, so they are going everywhere. So that’s one of the things, it’s just let’s say a pet project that I started with a friend who did the design of the stickers and then I just printed and handed over all of them.

It’s easy to identify through these stickers, because people maybe don’t know me by Ruben, but they know “Ah, this is the guy with the superhero stickers!”, you know, that’s all - an easy way to get spotted and to create brand awareness in Drupal.

That’s one thing, and the other is I guess all the traveling I’ve been doing around Europe, speaking about Drupal, meeting all the communities, I guess I’m pretty proud about having met almost 20 to 25 different communities in different countries. 

7. Is there an initiative or a project in Drupal space that you would like to promote or highlight?

At the moment I’m pretty happy about what we are doing with the JavaScript modernization, since everybody says that Drupal sucks because the UX is terrible, and I guess we all agree that the user experience is really bad; the developer experience is getting better and better, but the end user is where we should work the most. 

Apart from that, it’s as usual a lack of new talent, like, in every not only company, but open source project, you really want to attract new talent to your projects, or you do things differently and you also improve it. So for me the Javascript Modernization initiative is a good one because it’s bringing React developers or JavaScript developers into Drupal in a really easy way. So I guess it’s not my contribution, but it’s a contribution or an initiative that I think is super beneficial, not only technically, but from the human perspective.

The most beneficial thing about this is that everything is going to be API-driven, so all the API features are going to be available for every framework. But the thing is, we should work more actively in the content creation, because at the moment it’s not only the interface that’s important, but actually the content creation process that’s the most important - the editorial experience. That’s the session I’ve been giving at Drupal conferences for the past couple of years. 

So, it’s about the editorial experience, when you create content, why people really hate Drupal, like editors when they create content. Because then in the admin interface you go to the user and permissions page and, probably, you do it twice during the development of the project and then you don’t do it again. So we don’t really need to invest a lot of time improving the user experience of that page. So that’s my thing - we should focus our energy and time into the editorial experience, more than into the admin interface.

8. Is there anything else that excites you beyond Drupal? Either a new technology or a personal endeavorment. 

As I said, I’m really happy to have the React community come into Drupal, at least we are attracting part of it. I guess JavaScript modernization will improve a lot, because in the last JavaScript framework that we included in Drupal, it was Backbone and Underscore during the development of Drupal 8; Ember was considered as well, but there’s a long journey to go to have a proper JavaScript framework in Drupal core. 
 

Apr 17 2019
Apr 17

What makes Drupal a great choice from a UX standpoint? What features are responsible for the enhanced end-user experience in Drupal 8? Those features that enable you to easily create an intuitive and enjoyable visitor experience on your own Drupal-based website/application.

And to constantly improve it...

Is it all those performance enhancements that it ships with? Or maybe its “responsive out-of-the-box” nature? Or rather its multilingual capabilities?
 

1. But First: 7 Evergreen Ways to Improve Your Website's UX

It goes without saying that, in order to create an enjoyable, rich user experience on your Drupal 8 website, you'll need to:
 

  • put together a solid UX strategy
  • run extensive user research and map the user's journey
  • come up with an effective, well-planned UX design, paying attention to all the latest design trends (and now decoupled Drupal empowers you to tap into a whole range of new possibilities...)
     

And while carrying out all these phases of the UX design process, make sure to apply the following evergreen techniques for enhancing the visitor's experience:
 

1.1. Optimize the page loading time

For speed will always be the factor with the biggest influence on the user's experience on your Drupal site.

In this respect, there are tons of performance enhancements that you can implement, ranging from aggregating your JS and CSS files to properly configuring your cache to opting for a CDN, to...
 

2.2. Use bullets to structure your text

Bulleted lists are the “holy grail” of neatly structured, easy to read content.

For, in vain you invest time and effort in providing content that delivers real value to your website's visitors if you display it as an... “impenetrable” block of text.

In this respect, bullets help you break down the information. The result: users will see the key product or service benefits/will go through all of the presented features a lot quicker.
 

2.3. Use white space strategically

Speaking of easy to read content: there's no better way to enhance readability and to draw attention to specific elements on a page than... by using the white space itself.

It will automatically direct their attention to the text/image emphasized by all the white space surrounding it.
 

2.4. UX design is consistent Design

From color palette to button styles, from the size of the headings in your text to the chosen font, from the used photos to various design elements... keep consistency across all the pages on your Drupal website.

Otherwise, you risk to confuse and eventually... tire its visitors.
 

2.5. Go for visible, attractive CTAs

Always use action words for your calls to action and make sure they're easily recognizable. CTAs play a crucial role in setting up an intuitive, efficient navigation structure on your website...
 

2.6. Use images wisely

As images are always well-deserved “breaks” for the eye, especially when it's a long text that it's challenged to go through.

And yet, if you fail in using the relevant images, those that perfectly team up with your text... the user experience that you'll deliver will be anything but compelling...
 

2.7. Make your headings a high priority 

Remember to write your headings around some of the main keywords.

Also, strategically design them so that they're highly visible and help users to quickly scan through the content.
 

2. 4 Features Responsible for the Superior End-User Experience in Drupal 8

Gluing together all the design best practices that make a great user experience does call for a flexible and dynamic web platform.

Drupal 8 is that platform. It comes packed with some powerful features that make it easy for you to create the best visitor experience on your website.

Here are the ones with a huge influence on your website's UX:
 

2.1. Drupal 8 is responsive right out-of-the-box

And responsiveness, along with top page loading speed, still is one of those factors with a great influence on visitors' experience with your Drupal website.

With:
 

  • all the available base themes now being responsive
  • the convenience of adapting your images to various screen sizes right from their display properties
     

… creating a compelling end-user experience in Drupal 8 is dead-simple.


2.2. Enhanced performance

From a performance standpoint, Dries Buytaert's post on Drupal 8's performance optimizations is still one of the most relevant sources.

If Drupal was already built to “inject” enterprise-level performance into static pages, Drupal 8, with all its caching enhancements, is designed to speed up dynamic web pages, as well...


2.3. Multilingual capabilities

Remember the user experience's main facets, ranging from useful to findable, to valuable, to credible to... accessible?

Well, Drupal 8 provides you with multilingual capabilities right out of the box. You get to translate your website's UI, content, configuration, etc.

Meaning that, with this multilingual system at hand, you can easily create an accessible user experience on your website.


2.4. Content personalization (by segment, login time, device, language...)

In this respect, the Aqua Lift Connector module is your most reliable tool.

What it does is bring together customer data and content, so that you can deliver targeted content experiences across multiple channels and devices.
 

The END!

And these are those robust features that stand behind the superior end-user experience in Drupal 8. The very reasons why this platform, and particularly this version of Drupal, makes your best ally in creating the most compelling UX on your website.

Photo by Lucian Novosel on Unsplash

Apr 16 2019
Apr 16

I was so excited about going to DrupalCon Seattle, I started packing one week in advance. Granted, I decided to travel light, so my carry-on suitcase quickly showed the task wouldn’t take long.

Every DrupalCon I have been lucky enough to attend has been special in their own way. This was my first time going back to the States after moving out almost two years ago, so after an airport hiccup (protip: make sure to apply for a new ESTA if you happen to renew your passport after you felt very accomplished getting it ready so much time in advance) I was happy to set my regular-sized foot onto its northwest corner.  

Looking up to Columbia Center, the tallest building in Seattle and the state of Washington.

The week started very nicely, with some time to explore the city and enjoy a selection of its fine food. As there weren’t any sessions on until Wednesday, Tuesday was mostly hanging out with teammates and other friendly faces in the contribution room.

Bathroom doors Anyone else noticed how in the US bathroom stall’s doors never quite make it to the edge?

After a delicious and fun dinner where all Amazees gathered, it was party time. One of the highlights of the week was getting to attend the Museum of Pop Culture at Pantheon’s party, which featured some awesome exhibits. My favourite part was a sound lab where one could learn how to play real instruments (Louie Louie anyone?).

Pantheon Party“Next DrupalCon we need a setlist."

Wednesday and Thursday were packed with brain-revving sessions. Gatsby, data-fetching strategies, and front-end performance were a few of the topics that got a lot of circulation on the printed schedule. But it was diversity and inclusion that rightfully took the main stage at the keynotes. Dries Buytaert began his speech acknowledging that Open Source is not a meritocracy, and Marcy Sutton and Nythia Ruff closed with essential insights on how to use our collective power to build inclusive communities and products.

All in all, there were many moments that made this past week remarkable. Many involved spending time with the team, others meeting new people. Some were expected, like the Women in Drupal luncheon. Others were not, like the Movement BoF that got me walking as if I was auditioning for the Ministry of Silly Walks.

Maria's Session

One remarkable moment was definitely getting to give my (first ever) presentation at a DrupalCon (I can confirm, the Speakers-only room has special catering!). All of these moments made me once more very grateful for being able to be a part of this. I’m looking forward next time I get to play suitcase Tetris and find out what will make the next DrupalCon a one-of-a-kind experience.

Apr 16 2019
Apr 16

Our normally scheduled call to chat about all things Drupal and nonprofits will happen Thursday, April 18 at 1pm ET / 10am PT. (Convert to your local time zone.)

On the agenda this month is a report-back from DrupalCon Seattle -- including the Nonprofit Summit -- and anything else related to Drupal and nonprofits that's on our minds.

Feel free to share your thoughts and discussion points ahead of time in our collaborative Google doc: https://nten.org/drupal/notes

We have an hour to chat so bring your best Drupal topics and let's do this thing!

Some examples to get your mind firing: how do I recreate [feature] on my Drupal 7 site in Drupal 8? I need to explain [complicated thing] to a non-technical stakeholder -- any advice? How can I get Drupal and my CRM to play nicely?

This free call is sponsored by NTEN.org but open to everyone.

View notes of previous months' calls.

Apr 16 2019
Apr 16

An OSTraining member asked us if it was possible to connect Webforms to their content.

I can imagine a lot of use-cases for this. For example, if you have an "Events" content type, you might want a form so visitors can contact the event organizer. Or if you have a "Business" content type, it might be useful for people to contact the business.

This can be done thanks to a module called "Webform Extra Field" and in this tutorial I'll show you how.

Step #1. Install the modules

You'll need to install and enabled 3 modules to follow this tutorial:

Step #2. Create your webform

Go to Structure > Webforms. The Webform module will provide a default "Contact" form but you can also create your own webform here.

created webforms

Step #3. Add the field

  • Go to Structure > Content types.
  • Click "Manage fields" for the content type you want to connect to your Webform. For example, choose the "Article" content type.
  • Choose the "Webform" field type:

add webform field

  • After clicking to the second page of settings, choose your Webform from the dropdown list:

webform field settings

  • You can also configure the default settings for the form. If you have the Token module installed, you can prepopulate the fields in the Webform:

webform settings

Step #4. Create the content

Once you have created your field, go to Content > Add content. You can create the content as you normally would, but there will now be a contact form automatically attached to your published content.

webform node


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.
Apr 16 2019
Apr 16

By the end of 20018 TYPO3 had a market share of 1.5%, making it the 8th most used CMS at this time. This means that out of all websites in the world, 1.5% of them were built using TYPO3. Drupal on the other hand, had a market share of 4.6%, making it the third most popular CMS to date. Despite the fact that Drupal is slightly younger, it still managed to capture a larger audience compared to TYPO3. But why is that?

Open Source CMS

Drupal and TYPO3 are both open source. What this means is that the code is available to the general public. This results in developers being able to add different pieces of code by themselves, constantly improving the software. Both have dedicated communities which aim to further improve the performance of the CMS’s.

Performance

When it comes to the performance, both of these platforms have a wide range of modules and extensions. The modules and extensions are basically improvements on the core of both. Thus resulting in a high performance and flexibility on both sides. When it comes to extensions, TYPO3 has 60.000+ of them available, making sure that there is something specific to fulfill any users needs. Drupal also boasts a wide variety of modules, which gives the CMS the ability to cater to the needs of every user. Unlike Drupal, TYPO3 also runs an internal language called TypoScript. Users can leverage it to build additional elements including dynamic content.

Drupal allows the creation and management of different types of content such as text, blogs, videos, podcasts, images etc.

TYPO3 is also able to handle forms, tables, images and different pieces of multimedia. It also allows a lot of control over the layout of the page.

Language support

Globe of planet EarthTYPO3 is famed for its massive availability in over 50 languages. However, Drupal is available in over 100 languages. This makes it even more impressive when it comes to the high degree at which Drupal is able to help with the needs of its users.

Scalability

Scalability is defined by the desirable property of a website to be able to handle a growing amount of work in a timely and elegant manner. Both were engineered to be able to handle large amounts of data and traffic. This makes them both desirable for large enterprise websites.

Security

Security is one of the areas that both systems are putting a lot of effort in. Given the fact that they have to protect the costly data of large universities, enterprises and businesses, both are taking this matter seriously. Drupal and TYPO3 both have security teams that are constantly searching for vulnerabilities to report to the communities, while also working on fixing the issues. These are the reasons why both Drupal and TYPO3 are both trusted by enterprises and business when it comes to security issues.

Cost Of Implementation

Compared to CMS that are not Enterprise-grade, Drupal and TYPO3 are both more difficult to be installed and be properly customized. Both systems are offering plenty of options for developers to be able to specifically customize the website to meet the user specific needs. This comes at a price however. The price to be paid for such high customizability comes in the form of a steep learning curve. This makes it hard for beginners to fully maximize the potential of both CMS’s. On top of that, learning TYPO3 seems to be more complicated than to learn Drupal. Because of the simple fact that TYPO3 uses also TypoScript. It is the internal language of the system which has to be learned in order to master the CMS.  

One advantage with Drupal is that you can install our visual page editor module and provide a state-of-the-art design and editing experience to your client or your communication department

Conclusion

In conclusion, both CMS’s are legit options when it comes to developing huge scale websites for businesses or enterprises. However, choosing one of them rests entirely on each user’s specific needs. Also, Drupal still has a larger market than TYPO3. Even though it is the younger of them both. This means that Drupal is able to better cater to the specific needs of its users, compared to its competition.

Apr 16 2019
Apr 16

Drupal Modules: The One Percent — Required by role (video tutorial)

[embedded content]

Episode 53

Here is where we bring awareness to Drupal modules running on less than 1% of reporting sites. Today we'll investigate Required by role, a module which allows a field to be required for some roles but not others.

NOTE: Tutorial beings at 2:27

Comments

Permalink

These posts are likely a great means of providing exposure to lesser known modules, but dedicating half of the total video length to unrelated drupal events and organizations is pretty poor form.

Apr 16 2019
Apr 16

Last week Drupalcon North America was held in Seattle, where Dries opened the conference with the traditional "Driesnote". In the presentation, Dries talked about automated updates for Drupal, a thing I am very passionate about myself. He then went on to say:

I hope that in Drupalcon Amsterdam...in six months… I will be able to stand on stage and actually give some sort of demo. That would be my goal. So obviously… I would need your help with that… but that would be fantastic.

This triggered a thought: with the tools we have today, and as composer support is fairly decent, we can actually demo this somewhat utopic goal now. Which is why I made a video of just that. So without further ado: here is the demo!

[embedded content]

Automatic updates and the future

This demo demonstrates tools that are available now. Instead of only focusing on those tools (and promoting violinist.io), I want to expand on the subject of automated updates in Drupal, and its future.

Like for Dries, automatic updates is an important issue to me. Not only because I promote running automated composer updates with violinist.io, but because having these features will make Drupal more viable for hobbyists and beginners. Which in turn is something that can help us reach more users, and increase our diversity. Consequently, having automated updates is important for the “non-professional” group of Drupal users.

In the presentation, Dries also points out some important positive effects of having automated updates. First, it will help securing your site (or your client's site) when time-critical security updates are released. Second, it will make it easier for organizations and agencies to maintain websites. This means that having automated updates is important for the “professional” group of Drupal users as well.

This brings us to the next segment, which mostly applies to agencies and organizations using Drupal professionally. Two issues are often raised about having automated updates. First, that moving and/or overwriting the files of your codebase is a security risk. Second, that updating files on your live server can be a no-go. Maybe you have a version control system in place. Or perhaps you have a continuous integration/deployment pipeline. Or, you have setups that deploy their codebase to multiple front-servers. The two issues are valid concerns, but usually they are less of a concern to "non-professional" users. This implies that having automated updates is important for the “professional” AND “non-professional”, but the preferred implementation for these two groups might conflict.

In my personal opinion, we can support both. Let me explain how.

My suggestion is that we can have a system in place that is pluggable in all parts. This means that the "non-professional" can use plugins that are useful for updating via the file system, and hopefully set-and-forget the automatic updates for their site. It also means that the "professional", the one with the pipeline and version control, could have entirely different plugins for updates. To get back to the video above, a pre-flight check (which is how we determine if we can update) can mean checking for pull requests for the available update, and checking that the tests pass. The plugin for updating could simply merge the pull request, since automated deploys are run for the master branch. Now, different teams have different requirements, but this means that you could use a Pantheon or Platform.sh plugin for automated updates. Or, maybe you have a custom plugin for your team that you use across projects.

I believe this feature can help automation for "professional" teams of all sizes, and make the very same system usable for "non-professionals" that want to set-and-forget. This is also why I believe having automated updates in core, is in no way in conflict with doing automated updates like in the video above. It will only complement the toolbox we currently have!

If you want to read more about the Automatic Updates initiative, there is more info here. It is an exciting future, and we can all help out in making the future more user-friendly and secure. I know I will!

Apr 16 2019
Apr 16

Success with Drupal development often depends as much on knowing what NOT to do as much as what to do.

If you are not “Thinking in Drupal," you are likely to develop a Drupal site using strategies that are not conducive to a:

  • Drupal-friendly site that allows changes to be made to configuration without writing code;
  • Site that is as accessible as it could be; and/or
  • A low-maintenance coding strategy.

Let’s take a look at common Drupal development practices that do not reflect “Thinking in Drupal.”

Data Structures

The first category of “Don’ts” we want to share has to do with data structures. Content is the foundation of your site. 

Don’t use the body field to create the webpage vs. regions and blocks.

In order to create a content page in Drupal, you fill out a form called a Content Type. By default, the form includes a title field and body field. If this feature is all you use, technically, you could use traditional HTML strategies and the body field to create the page you need.

For example, copying the code from an HTML page and pasting it into the body field. If that code includes structural elements and supplemental content, that practice is defeating the purpose of using Drupal and limits content reuse.

Don’t forget to use fields to structure content.

This next example overlaps a little with the example above. Assume for a moment that you are using content blocks to place various bits of content in the page sidebars on your content page. Congratulations. You’re “Thinking in Drupal.”

However, if you don’t take the next step and structure your content into more than just the title and body field, you are not setting up your site for easy content reuse. An easy way to explain this issue is with an event content page.

You can use the body field to enter the event description, date, time, location, audience, price, etc. Or, you can add fields to the content type for each bit of content. This strategy helps you create a consistent presentation of data and sets you up for the next issue.

When you split your content into bits of data, you take the next step towards “Thinking in Drupal” and are able to take advantage of the database query and display feature called Views.

Don’t forget to use Views to create dynamic lists of content.

The next step in “Thinking in Drupal” is querying the database to reuse the bits of content you have placed in fields. 

It is true that you can type a list into the body field of a page and make the list a set of links, just as you would do on hand-made HTML pages. However, that defeats the purpose of using a content management system. Enter it once, reuse it many times over. 

Views is the tool that lets you grab data from fields and display them in blocks and pages. Then, in the event the data source is updated, every instance of that data display is also updated automatically.

Don’t miss out on the power of Views.

Styling 

Your data has been stored and queried using Drupal-friendly strategies. Now’s the time to apply your look and feel to your content.

There is no getting around the fact that presentation of content is important to every site owner. Drupal ships with features that allow you to layout both content fields and supplemental blocks of data. It also includes what we call a theme that helps manage the look and feel of the site.

Although it is likely that you will use a theme that is customized to your branding, one needs to be careful not to prevent configuration settings from being overwritten. 

Don’t forget to use semantic HTML and WAI-ARIA.

With the arrival of HTML5, meaningful elements such as <article> and <header> came into play, among others. That doesn’t mean there haven’t been other meaningful elements. The <p> element tells the reader the content is a paragraph. The <h1> through <6>, <blockquote>, <code> and <em> elements also carry meaning.

The most common non-semantic HTML element is <div>. Used to create sections on web pages, it often includes an ID that describes the sections: main, header, nav, and footer. Unfortunately, human ID’s aren’t recognized by assistive technology because, for example, “main” could also be written as “main content” or “content”. Then there are the various formats for “nav” such as “navigation”, “menu”, or “main menu.”

If you want to describe the semantic element, consider using ARIA rules. For example, <header role=”banner”> indicates that this instance of <header> is the banner on the page and not the header for some content.

How does this apply to Drupal? The theme templates and content entered by content authors. Although Drupal 8 uses HTML5, theme developers don’t always use it when customizing the look and feel of the site. When creating templates and content, think beyond Drupal and include strategies that make your pages accessible. 

Don’t avoid using Drupal build features to manage the page layout.

When you were creating your blocks of content, be it manually or with Views, you placed them in regions defined by the theme. 

It is possible to create theme templates that manually render fields and blocks via the same strategies used by other content management frameworks. However, in doing so, you prevent the use of Drupal’s configuration interface from having any influence on that template.

Imagine you have five fields for a content type. By default, you can configure Drupal to display all five using the default templating strategies. Assume you add a field at a later time, or want to hide one of the existing fields, you can do so via the configuration interface.

However, if you deviate from the default and manually render the five fields, changes in configuration will not be realized on the page until the code is updated in the template.

This practice, unfortunately, is one that creates problems for site owners who believe they are receiving the flexibility that Drupal promises. Confusion and frustration ensue. If you are a site owner, insist on a configuration-based page/field layout strategy versus a hard-coded approach.
 

Customization

You can create complex sites without one line of custom code outside the appropriately coded custom theme you may need. However, when you have exhausted all configuration options, including using pre-existing features contributed by the Drupal community, you might have to write some custom code.

Adding or editing features in a Drupal site require developers to follow Drupal coding standards and practices. This means, a coder might not be able to follow the same practices used in other frameworks. Unfortunately, this is sometimes not understood.

Here are just a couple of examples of coding for Drupal.

Don’t forget to use patches to track code changes.

Given the numerous contributed modules available on Drupal.org, it’s likely your site will use one or more. There might be times when a contributed module offers, for instance, 95% of what you need, with a minor tweak of the code and it will do the job nicely.

The best practice is to create your own custom module with code that hooks into the contributed module in question. Your custom module makes the change the Drupal way and will be executed with calls to the site.

Unfortunately, not all contributed modules are coded with hook options. Although “hacking” contributed modules is not a recommended practice, sometimes it’s the best course of action for minor changes. However, this introduces a maintenance problem if not done correctly via patching. 

What is a patch? Simply put, a fix to the code. As issues are reported to the module project lead, recommended coding fixes are often shared as well for the next version of that module. Meanwhile, your site might need that patch so you take the new code and “fix” the module versus waiting for the next module release.

This same practice of patching can be used to keep track of minor code tweaks you need to make in the contributed module. Again, all efforts should be made to use existing code. If not possible, create your own custom module. Then, if tweaking the functionality of a contributed module is what you choose, track the changes you made with a patch.

Lastly, store all your patches (fixes and tweaks) in a file on the server. For example, here sites/all/patches/PATCHES.txt.

Don’t forget the admin interface for your custom module.

If you need a custom module to complete your site’s functionality, does the custom module need variables with values assigned? For example, you create a custom module that allows you to integrate an external service with your site. In order to access the external service, you need to pass a key to the service to gain access.

For some, the first thought might be to put that key into the code, with the assumption that the key will never change. This is a “hard coding” practice and hard coding is never recommended. 

The better approach is to separate the key from the code. Store the key in the database, separate from the code. How? Via an administrative interface. In Drupal 8, entities are stronger than ever. A unique admin interface isn’t necessarily required. In some instances, you can create a content type to collect the data needed to store the key and other configuration options.

Be sure to provide clients with the means to manage custom features versus relying on code edits.


Conclusion

The above are just the basics when it comes to “Thinking in Drupal” and avoiding long-term issues in development and maintenance on your site.

If you are a developer, don’t assume that the coding practices that work in other frameworks are the best approach to developing in Drupal. If you are a site owner, don’t assume your development team will choose strategies that will allow you to easily change and maintain your site without making that request specifically. Make it a point to "Think in Drupal."

Contact us today to continue the conversation about Drupal best practices that achieve distinct goals and create new possibilities.

Apr 15 2019
Apr 15

This was a 90 minute session from DrupalCon Seattle 2019. The room was not recorded ( BUT, we recorded locally from Mike’s laptop! Enjoy! Our slides are also attached in the links below. The room was overflowing and we got great feedback on it so I hope you enjoy it too

Seems that it was pretty well received given this tweet of me floating around jumping up and down :)

Amazing and entertaining session about web components @btopro thumb: pic. twitter.com/kvzyl7SANw

– Abdelrahman Ibrahim (@IAboEyad) April 11, 2019
Apr 12 2019
Apr 12

DrupalCon been a very productive conference so far. The first two days of pre-conference sprinting resulted in fixing the testing pipeline of the webpack module, a prototype for using Drupal as a datasource for Gatsby using GraphQL instead of JSON:API and even solved an unexpected issue for the devel module to provide a way to load dump an entity with all its references embedded inside. You can read more about these solutions here.

After a good Wednesday afternoon, breathing in the calming air of Seattle, Thursday came and it started for me with a breakfast with Victor. He ordered his favourite meal - the Fresh French Croissant and after a short meal, we headed to the venue.

I decided to start the day with the Web components BoF led by Salem Ghoweri. Pega systems use web components a lot and it was interesting to learn about the advantages and pitfalls. IE 11 seems to be the biggest obstacle, especially when it comes to the shadow dom. Polyfilling it is very expensive computationally, so what they did is to actually ditch the shadow dow in browsers that don’t support it natively. In general, looks like web components are getting traction and IE is the main problem, so same as 5 years ago.

The next spot was the GraphQL 101: What, Why, How session by my friend Maria Comas. It started with a brief history of the query language followed by its definition.

Maria Comas

I learned that the reason to build the GraphQL spec at Facebook was because of the need to find a tool that is powerful enough to handle everything Facebook does while staying simple enough so that it’s easy to comprehend by the product developers. The thing Maria likes most about GraphQL is that it is a tool that changes human behaviour.

The session finished on time and there were hardly any questions so we had time to get the best seats for the next Amazee session:  CSS-in-JS and Drupal sitting in a tree... by John Albin Wilkins. On our way there Victor, grave as always decided to make use of his hipster camera and take this photo of me. No comment.

Blazej

John is a natural so his sessions are always entertaining and packed with great content. In this one, he compared 3 different ways of doing CSS-in-js which are:

John Albin

The session summarized the two years of our adventures with the topic while doing both fully and progressively decoupled projects. TLDR; John recommends CSS modules, mostly because it’s the only tool that makes it possible to share the styles between javascript and Drupal. If you’re interested in this topic I would encourage you to check out the recording for the reasoning and lots of interesting details.

After that, I headed to the Considerations of Federated Search and Drupal session by Adam Bergstein. The ability to find content that originates from many different websites is a hard topic which is required by the enterprise clients quite often, so I thought it might be interesting.

Nerdstein started with a high level, generic overview of the system. The structure is similar to what we have in Drupal migrations. He recommended using scrapy. It’s a tool from the python ecosystem which is great because there are many great data manipulation and natural language processing packages. Scrapy also has many destination plugins, e.g. for elastic search, so it’s easy to insert data directly into the search index.

Next, there was lunch and an unexpected booth on the way there - a box with cute, fluffy creatures.

Bunny

I’m not really sure how they ended up there but they definitely made lots of people happy. Here are some photos. Hopefully, they will make you happy as well.

Bunny

Apr 12 2019
Apr 12

Helloooooooo #DrupalCon!

If you're looking for something to work on at the contribution sprints tomorrow, come to the Drupal 9 readiness sprint! :D

We'll be spending the day removing deprecated code from Drupal 8 contributed modules to get them ready for Drupal 9.

For a great overview about how to prepare for Drupal 9, along with helpful tutorial videos, see Dries's blog.

Here's how you can participate! (Whether in-person or remotely!)

If you're a module developer who would like to "opt in" to having your module reviewed / patched by a new contributor at the sprint, please create (or find an existing) issue with the Drupal 9 compatibility + Seattle2019 tags!

Want to see the progress? Here's a contrib kanban overview!

Tags: drupalconSeattle2019drupal 8drupal 9drupal
Apr 12 2019
Apr 12

For us, the Paragraphs module is the holy grail of structured content creation.

With Paragraphs it is relatively uncomplicated to define prefabricated content elements that define the structure of the corresponding content. These can then simply be placed in the desired content by editors.

Paragraphs default display

This allows editors to create clearly structured content without a lot of effort and to fall back on recurring content structures. The editors simply select the desired element from the list of available content elements, fill in the corresponding fields and the content is output in the specified structure. This is extremely helpful when creating more complicated page layouts where you want to use the same structures over and over again.

Is there a better way?

We have asked ourselves and our clients' editors how to further simplify and improve the input using Paragraphs, or what might interfere with the editorial process when using Paragraphs.

It has often been mentioned here that it is quite annoying to have to drag the content elements to the desired position after adding them. This is especially cumbersome for content with many content elements. It would be much better to be able to insert the element right at the corresponding position.

Paragraphs with add_in_between

Fortunately, there is the Paragraphs Features module from the Thunder Core team. This module extends Paragraphs by inserting a button between each content element to open the modal dialog for adding more elements. 

Using these buttons, editors can insert the elements in the correct position as desired and do not have to move them first.

 

Beautiful. But is there an even better way?

Editors always add the same elements to certain content. The question arose whether these content elements could not be inserted preferentially, i.e. without first having to open the dialog.

In addition, some editors were disturbed by the large number of buttons: after each single content element a button for adding further elements appears. *sigh*

So we thought about how to make the buttons less annoying. 

Buttons you don't see don't interfere. Accordingly, with our new module Paragraphs Editor Enhancements, we have simply hidden the buttons. 

With some applications and tools (e.g. Apple Mail or Slack) the buttons for certain actions only become visible when you point the mouse over a certain area. Exactly this function has also been implemented for the buttons: only when you point the mouse over an existing content element, the buttons for adding become visible above and below the element.

new styling for Paragraphs add_in_between

In addition, the most important content elements should also be able to be inserted directly with a click. 

So we had to add two new buttons for the most important content elements to the button to open the dialog.

Editors are no longer disturbed by the large number of buttons and can simultaneously insert the most important content elements with just one click.

Great! But can you make it even much better?

Another often mentioned improvement suggestion concerned the dialog for adding content elements themselves.

Paragraphs dialog

If you have many elements to choose from, the dialog quickly becomes confusing. In addition, editors often find it difficult to find the right elements. On the basis of the title of a content element one cannot always immediately conclude on the actual purpose of the element and cannot imagine how the element is represented in the content.

With Paragraphs Editor Enhancements we have completely redesigned the dialog. We've added the ability to filter the list of content elements so editors can quickly find the desired elements through the title and description of the element.

redesigned Paragraphs dialog

In addition, the representation of the elements in the dialog has been revised. Each element shows the title and the description as well as an image (if uploaded in the element's configuration).
As an alternative to displaying the elements as tiles, you can also display the elements as a list.

As a bonus, you can create categories for content elements and assign the individual elements to one or more categories. 

This gives editors a faster and better overview of the available content elements and allows them to find the desired element more quickly and easily.

Whew. Do you have any more?

We wouldn't be undpaul if that was all.

Some time ago, one of our clients was faced with the problem of having to add the same elements in the same order over and over again. 

As a simple example, one can imagine this as follows: an introductory text followed by an image, then a two-column text and finally a text with an image.

For the editors, this meant that the corresponding content elements had to be inserted in the correct order for each individual content item. 

Wouldn't it be great if you could add the desired elements with just one click, so that the editorial staff could concentrate on entering the actual content?

redesigned Paragraphs dialog with Paragraphs Sets

The solution to this problem was the Paragraphs Sets module.

Paragraphs Sets are used to define groups of content elements. These groups can be added to the content just like the usual elements.

This saves editorial members the hassle of searching out and inserting individual elements and allows them to start entering the corresponding content directly.

Of course, Paragraphs Editor Enhancements and Paragraphs Sets also work together. The element groups of Paragraphs Sets are displayed in a separate category in the dialog and can also be found using the filter function. 

Apr 11 2019
Apr 11

With the Twig templates replacing the old PHP templates, Drupal has been brought to a whole new “era”. We can now leverage the advantages of a component-based development in Drupal 8. But what does that mean, more precisely?

How does this (not so) new approach in software development benefit you? Your own team of developers...

And everyone's talking about tones of flexibility being unlocked and about the Twig templates' extensibility. About how front-end developers, even those with little knowledge of Drupal, specialized in various languages, can now... “come right on board”. Since they're already familiar with the Twig engine...

Also, we can't ignore all the hype around the advantage of the streamlined development cycles in Drupal and of the consistent user experience across a whole portfolio of Drupal apps/websites.

But let's take all these tempting advantages of component-based UI development in Drupal 8 and point out how they benefit your team precisely.
 

1. But First: What Is a Component?

It's a standalone piece of software that can appear in multiple places across your Drupal website/application.

One of the most relevant examples is that of a content hub. One displaying teasers of the latest blog posts, events... You could set up a component that would determine how each item in that content hub should look like.

In short:
 

  • one single component can be used by several types of content
  • any update to its template/style would automatically reflect on all those content types, as well
     

Accessible via an API, this independent piece of software explicitly defines all its application dependencies.|

Your team could then easily architect a new interface by just scanning through and selecting from the library of components.
 

2. What Is Component-Driven Development? What Problems Does It Solve?

A succinct definition of component-based software engineering would be:

A software development technique where you'd select off-the-shelf, reusable components and put them together according to a pre-defined software architecture.

“And what challenges does it address?”

It streamlines and lowers the level of complexity of otherwise intricate, time-consuming development and design processes. As the author of given components, your role is to get it implemented.

No need to worry about how they'll get “assembled”; this is what the well-defined external structure is there for.

Word of caution: mind you don't get too... engrossed in putting together the right components, in architecting the best component-based structure for you then risk investing too little time in... building them properly.
 

3. Component-Based Development in Drupal 8

Now, if we are to focus our attention on the component-based UI approach in relation to Drupal 8 software development, here are the key aspects worth outlining:

  • with the Twig engine in Drupal 8, you're free to “joggle with” extensible templates; once you've defined a Twig template in one place, we get to reuse it across the whole Drupal website/app
     
  • the Component Libraries module allows you to set up template files (storing all their needed JS and CS), assign a namespace for them and place them pretty much anywhere on your Drupal filespace (not just in your themes' “templates” directory)
     
  • you then get to use the KSS Node library and define a living style guide; it's where you'll store all the component templates built for your Drupal website (styles, markup, JS behaviors, etc.)

By filling in your toolboxes with all these tools — the results of a joint effort of the Drupal and the front-end communities  —  you're empowered to design themes that are more modular. And, therefore, more efficient...


4. The Top 6 Benefits of the Component-Based UI Approach
 

4.1. It Ensures UX Consistency Across All Your Drupal 8 Websites

Take your library of components as the “headquarters” for all the teams involved in your Drupal project: QA, business, development, design teams...

It's there that they can find the pre-defined standards they need to keep the consistency of the features they implement or of other tasks they carry out across multiple projects.

A consistency that will bubble up to the user experience itself, across your whole portfolio of Drupal 8 websites/applications...
 

4.2. It Accelerates the Process of Turning Your Visual Design into a UI 

Embracing the component-based development in Drupal 8 you'd avoid those unwanted, yet so frequent scenarios where the front-end developer gets tangled up in the wireframe he receives and:
 

  • he/she translates parts of it the... wrong way
  • he digs up all types of “surprise” issues  
     

By using a component-driven UI approach translating a visual design into a user interface gets much more... event-less. 

With:
 

  • a pre-defined component architecture to rely on
  • well-established standards to follow
  • a whole library of component templates at hand
     

… there are fewer chances of discrepancies between the UX defined in the visual design and the one delivered via the resulting user interface.

Not to mention the reduced delivery timelines...
 

4.3. It Streamlines the Whole Development Process 

“Sustainability” is the best word to define this approach to Drupal software development.

Just think about it:

  • whether it's a particular grid, navigation or layout that your front-end developer needs when working on a new project, he/she can pull it right from the component library at hand
     
  • … and “inject” it into the app/website he's working on
     
  • in case that element needs further updating, the developer will already have the baseline to start with
     
  • … there's no need for new components to be designed, from the ground up, with every single project: the already existing ones can always get further extended

And that can only translate into significant savings of both time and money.
 

4.4. It Reduces the Time Spent on Setting Up the Functionality & Defining the UX

And this is one of the key benefits of using component-based development in Drupal 8. Your various teams would no longer need to define the UX requirements and the functionality every single time during the design process.

With an easily accessible library of components, they can always pull a component standing for a specific requirement (display of complex data, filtering, pagination in grids, etc.) and just define its extensions. And the business logic, as well.
 

4.5. It Enables You to Systematically Reuse Your Components

And “reusability” goes hand in hand with “sustainability”. I would even say that it's a synonym for “future-proofing”, as well...

Just think about it: having a Drupal 8 website in a component-based format you can always rearrange components as technologies grow outdated and new ones emerge...

In short, embracing a component-based development in Drupal 8 enables you to remove the need of rebuilding your website every time its underlying technologies “grow out of fashion”.

With your component library at hand, you'll be able to swap your guidelines, design patterns and various content templates in and out, keeping your Drupal app or website up to date.
 

4.6. It Integrates Seamlessly into the Development Process 

By leveraging a component-based development in Drupal 8, you'd also gain better control over the whole development cycle. The update process here included...

Since you'd then build your components and manage your production quality user interface code in a repository like GitHub, every update that you'd make will be displayed in there. And be easily accessible to everyone in your team.

In short, your developers get to pull pieces of code from the repository to further extend them, then re-submit them to GitHub (or to another source code repository) for review.

With the ability to version your component library, your team can keep a close track of all your Drupal applications with their corresponding versions of the approved UX.
 

The END!

This how the component-based development in Drupal 8 would benefit you and your team. Have we left out other key advantages of using this approach?

Image by Arek Socha from Pixabay

Apr 11 2019
Apr 11

When conversations began a few months back about DrupalCon Seattle, I was so thrilled about the prospect of heading west and being fully indoctrinated with all things Drupal for the first time! As a newcomer to the field, I have been eager to simply be surrounded by, and learn from, so many in this community. Additionally, DrupalCon is providing the perfect opportunity to hang out with some incredible colleagues.

The Day Begins: People

The feel of day three was noticeably more vibrant as the surge of conference attendees began to fill the halls of the Washington State Convention Center. It’s been great to see representation from all over the country and be surrounded by an association with such rich diversity.

I learned quickly that there is no lack of learning opportunities at DrupalCon. The number of sessions to choose from felt like a buffet for your mind -- where you could pick and choose, and tailor your experience to be as uniquely tailored to you as you want.

I chose sessions that I knew would provide helpful reminders to me on practices and processes I already have in place, as well as topics in which I simply want to increase my awareness or hear a different perspective.

IO Booth

Wednesday Learnings

Much of the late morning to the afternoon was spent in periodic spurts of catching up on work, popping into sessions and dropping by our booth. Here are a few of the sessions I went to, with three key learnings from each:

Getting an Angry Wet Cat to Purr: Turning an Unhealthy Client Relationship Into a Productive One (Donna Bungard, Project Strategist at Tandem)

  • Communication: Everything comes down to having an open, honest, direct conversation. This is the key manner in which you build trust with your team.

  • Hearing is good. Understanding is better.

  • There are always the next steps to be taken. You simply need to identify them.

Lead, Follow or Get out of the Way: Managing Global Teams Harmoniously (Yuriy Gerasimov, Organizer at Drupal Ukraine Community and Clyde Boyer)

  • Active Trust is foundational to team success.

  • A common mistake on distributed teams is not recognizing isolation in your team members. Take notice if the communication style of a team member changes (this may point to something not being well in their world).

  • You don’t talk your way to trust. You have to earn it, mostly with time.

Design Strategies: Our Process for Building User-centered Websites (Valerie Neumark Mickela, Board Member at Full Circle Funds and Andrew Goldsworthy, Co-Founder at Rootid)

(I actually sat down in this session by mistake, but by the time I realized, it was too late to leave without causing disruption . . . it wouldn’t be a full conference experience without a mishap along the way, right?!)

  • Design and development communications can be challenging: You absolutely cannot rely on assumptions.

  • In design, you are most often thinking through a psychological lens, versus a creative one.

  • When considering a feature, don’t ask “Is it possible?” (all things are possible with time and money!) Ask “Is it hard?” (this will provide a more realistic barometer for time and cost)

Finding Your Way: Practical Strategies for Navigating Your Career (Gus Childs, Senior Software Engineer at Mondo Robot)

  • Be selfish with your career - you should be doing work that’s fulfilling.

  • You should be excited about these three things when it comes to your career: People, Projects and Money.

  • Never burn bridges.

Seattle

The Day Ends: Splash Awards and Ping Pong Party

The awards ceremony was held at a beautiful location, inside a music venue called The Triple Door, just a couple blocks from the Pike Place Market. After being at the conference for a few days, meeting new friends and getting to know my colleagues better, Splash Awards was a perfect opportunity to catch up and talk about work and life with everyone who attended. While Amazee did not walk away with any awards, it was really fun to celebrate with others, and celebrate the incredible Amazee work that was nominated:

Splash Awards

From the Splash Awards, we walked over to Spin Seattle for one of the evening parties. Spin was packed from wall-to-wall with conference attendees and was a really fun way to end the day.

In closing, I will just say that I have been really encouraged by how warm the Drupal community is, and am so grateful for the opportunity to be at DrupalCon Seattle 2019.

Apr 11 2019
Apr 11

The benefits of backwards compatibility (BC) are clear: no users are left behind. Which leads to higher adoption rates because you’re often getting new features and you always have the latest security fixes.

Of course, that’s easy when you have a small API surface (as Nate Haug once said: “the WordPress API has like 11 functions!” — which is surprisingly close to the truth). But Drupal has an enormous API surface. In fact, it seems there’s APIs hiding in every crevice!

In my job at Acquia, I’ve been working almost exclusively on Drupal 8 core. In 2012–2013 I worked on authoring experience (in-place editing, CKEditor, and more). In 2014–2015, I worked on performance, cacheability, rendering and generally the stabilizing of Drupal 8. Drupal 8.0.0 shipped on November 19, 2015. And since then, I’ve spent most of my time on making Drupal 8 be truly API-first: improving the RESTful Web Services support that Drupal 8 ships with, and in the process also strengthening the JSON API & GraphQL contributed modules.

I’ve learned a lot about the impact of past decisions (by myself and others) on backwards compatibility. The benefit of backwards compatibility (BC). But the burden of ensuring BC can increase exponentially due to certain architectural decisions. I’ve been experiencing that first-hand, since I’m tasked with making Drupal 8’s REST support rock-solid, where I am seeing time and time again that “fixing bugs + improving DX” requires BC breaks. Tough decisions.

In Drupal 8, we have experience with some extremes:

  1. the BigPipe & Dynamic Page Cache modules have no API, but build on top of other APIs: they provide functionality only, not APIs
  2. the REST module has an API, and its functionality can be modified not just via that API, but also via other APIs

The first cannot break BC. The second requires scrutiny for every line of code modified to ensure we don’t break BC. For the second, the burden can easily outweigh the benefit, because how many sites actually are using this obscure edge case of the API?

We’ll look at:

  • How can we make our modules more evolvable in the future? (Contrib & core, D8 & D9.)
  • Ideas to improve this, and root cause hypotheses (for example, the fact that we have API cascades and not orthogonal APIs)

We should be thinking more actively about how feature X, configuration Y or API Z might get in the way of BC. I analyzed the architectural patterns in Drupal 8, and have some thoughts about how to do better. I don’t have all the answers. But what matters most is not answers, but a critical mindset going forward that is consciously considering BC implications for every patch that goes into Drupal 8! This session is only a starting point; we should continue discussing in the hallways, during dinner and of course: in the issue queues!

Preview:

Conference: 

DrupalCon Seattle

Location: 

Seattle, WA, United States

Date: 

Apr 11 2019 - 09:00

Duration: 

30 minutes

Apr 11 2019
Apr 11

I am proud to announce that the 2nd edition of my book, Drupal 8 module development, was recently published. I’ve been working on this in the past few months and it has kept me quite busy.

The purpose of this update is to bring all the code and practices covered in the first version up to date with the newest version of Drupal 8. That is 8.7. I know. It’s not even released yet but everything you find in the new book should work with 8.7 already. I’ve been following the change records quite closely during this cycle. If, however, you do discover any issues or that I'm peddling some deprecated code, I’d appreciate an errata report.

Since 8.2 (the focus of the first version), there were quite a few changes in Drupal. There were some new things pertinent to this book, but also quite a lot of changes in practices that resulted in deprecated classes and functions. It’s important to keep up to date with these things. Why? Because Drupal 9 will basically be the latest version of Drupal 8 without all the deprecated code. So if you keep up to date, you won’t have such a big problem upgrading to Drupal 9. Read this blog post from Dries Buytaert on the plans for Drupal 9 to get more details on what I mean. Ah, and did I mention that he was kind enough to write the foreword for my book? So make sure you check that out as well.

Enjoy the book and a million thanks for the support! As usual, you can buy it from lots of places.

Apr 11 2019
Apr 11

Same as every month, we wanted to share with you our favorite Drupal blog posts from the previous month. So, here's a list of 8 Drupal-related posts from March that we found the most interesting. Enjoy!

#DrupalOriginStories

The first blog post we’d like to point out is a Drupal origin story by Angie Byron, perhaps better known as webchick. The inspiration for her writing this post is a talk she’ll be giving at an upcoming DrupalCamp in Belarus; she wanted to gather stories of people from different backgrounds about how they got into Drupal, and she figured the best way to motivate people to share theirs would be to share hers first.

It was very awesome to learn how Angie discovered Drupal through viewing the source code of the websites she visited. This really shows how starting small out of sheer curiosity can turn into a completely new lifestyle - it seems it certainly was this way for Angie, now employed full-time at Acquia, who has gained numerous invaluable friendships and experiences through Drupal.

Read more

Drupal's Angela Byron On Building A Diverse Community

In line with the previous post, this one is not exactly written by webchick - but it is about her, or more specifically about her role of promoting diversity and inclusion within the Drupal community. 

The article lists 3 of Angie’s core principles for building a more diverse community: the importance of a community-wide code of conduct, the promotion of a more diverse leadership, and the accessibility of a project to diverse groups of users. It concludes with a note on how companies can - and should - contribute to open source by sponsoring their employees’ work on OSS.

Read more

JSON:API lands in Drupal core

Next up, we have a post by Dries together with another one by Wim Leers. We decided to include both of them, since they work in tandem (Wim’s post even advises its readers to go read the one by Dries first - we couldn’t just ignore that suggestion!). In these two posts, an important piece of news for Drupal was announced - the next major release of Drupal, 8.7., will be shipped with JSON:API as a stable module!

This implementation of JSON:API into Drupal core is a huge milestone toward making Drupal API-first, the significance of which Dries already outlined almost 2 years ago. Major thanks to Wim Leers, Gabe Sullice, Mateu A. B. and of course all the other contributors for all their hard work on this module!

Read more

Additional info in Wim Leers’ post

Webform module now supports importing submissions

The purpose of this next blog post, written by Jacob Rockowitz, is to make importing submissions to the Webform module as simple as exporting submissions. The key question that Jacob asks here is how to make it as easy as possible for organizations to make a switch to the Webform module from other form builders. 

His solution is to rebuild an external form, then import the existing data to the form. The best way to import submissions is with a CSV. Don’t worry - Jacob also includes a helpful demo video that will make the entire process even easier. Finally, he gives a shout out to 2 contributors to the module: Kaleem Clarkson, who made this new feature possible, and Michael Feranda, who found a task in the module’s issue queue and simply started working on it.

Read more

Florida Drupal Camp: Sunglasses, Alligators, Community, and Connection

Adam Bergstein aka n3rdstein’s recap of DrupalCamp Florida was an immensely enjoyable read. Three members of Hook42’s team attended the ‘Camp, and the post relates both the impressions from their two sessions, one on Gatsby.JS training and one on emerging technologies, as well as more general impressions from the event of each team member.

As with other DrupalCamps, DrupalCamp Florida 2019 seems like a great event to have attended - especially considering it took place in February, when Florida was likely much warmer than other Camps at that time (Adam even mentions the warmer weather as a big plus, so, there’s that!). 

Read more

Headless Drupal, decoupling Drupal

Another excellent post was one by Josef Dabernig on decoupling Drupal. He provides a short explanation of what “decoupled” means and what the difference between fully and progressively decoupled is. 

The main capability of a decoupled or headless architecture is building more complex web solutions, such as PWAs (progressive web applications) and integrated e-commerce applications.

Of coursing, decoupling is not the ideal solution for each and every possible use case. Josef also lists some key advantages and disadvantages of going headless, as well as some situations where a decoupled architecture makes the most sense. For those wishing to learn more about decoupling, he recommends Preston So’s “Decoupled Drupal in Practice”.

Read more

The Big, Bad Layout Builder Explainer

Even though Drupal’s Layout Builder is currently still an experimental module, it has already proved to be extremely useful, and is to be included in the next major release of Drupal next month

Caroline Casals of Phase2 dives into the ins and outs of Layout Builder and its capabilities in this blog post. According to her, one of the key advantages of this module is that it improves the experience of content editors and developers alike, as it is very intuitive to use (although probably not as much for someone not used to working with blocks).

The post concludes with some thoughts on the potential impact of Layout Builder on Drupal site building, as well as some areas that could still benefit from improvements, such as the module’s UI.

Read more

Saving temporarily values of a form with Private Tempstore in Drupal 8

In the last post on this month’s list, Karim Boudjema tackles the problem of temporarily saving values from a form and retrieving or processing them later in a controller. To do that, he uses Drupal’s Form API and Private TempStore API

The goal of the post is to build a simple RSS reader where a user can introduce an RSS file URL along with the number of items to retrieve from that file. Since the information belongs to a specific user (anonymous or authenticated) and only needs to be stored for a certain period of time, the ideal way to go about it is by using Drupal’s Private TempStore.

Read more

These were some of our favorite Drupal articles from March. This month's list features a healthy balance between community-oriented posts and those that focus on Drupal's open source code. Check back next month for an overview of April's posts!

Apr 11 2019
Apr 11

The generation of an automatic summary for relatively long articles is a recurring need for content publishing. A summary provides better visibility for the reader, and an effective way to navigate within an article as soon as it is a little dense. And as for the editor, this saves him from having to manually manage a summary that will have to be updated as an article is modified. In other words, it eliminates a source of potential and multiple input errors. Let's discover the Toc.js module which allows us to easily generate a summary in a modular way whatever the page of a Drupal 8 site.

The Toc.js module offers full integration with the content types of a Drupal project. To use it, simply activate it in the configuration page of a content type.

Toc.js settings

The proposed options allow to precisely adapt the table of contents to be generated according to the type of content, these fields etc. To understand the configuration options, let's go back to the module's operating principle.

This module uses the jQuery TOC.js library, and as such the generation of the summary is done once the page is rendered, which allows a great flexibility on the coverage of the desired content, unlike for example a solution based on a text format. This approach allows you to target any part of a page from a CSS selector (the Container in the configuration options), whether this page is generated from simple fields, or less simple ones like paragraphs for example.

The other configuration options allow you to specify the behavior of the generated summary, including

  • the CSS selectors to target to generate the summary titles
  • The minimum number of titles to generate an automatic summary. It is not necessarily appropriate to generate a summary when an article has only two unfortunate sections.
  • The type of HTML list to generate
  • The possibility of inserting a Return to Summary link on each content title that has been the target of the automatic summary
  • Enabling soft scrolling to the content part by clicking on a title in the summary
  • The ability to highlight the summary titles if their corresponding section in the article arrives in the visible area when scrolling the page
  • The ability to make the summary stick to the page scrolling (useful if you want the summary, placed in a sidebar, to always be visible when scrolling a page)

And finally, if you activate the included Toc.js per node submodule, you also have the possibility to enable / disable the automatic summary in a granular way, content by content.

Once configured, the positioning of the automatic summary can be easily configured in the display modes of the content type.
 

Toc display settings

You can then use the Core Layout Builder module, or via a Twig template, to customize the positioning of the summary that will be generated.

However, if we can generate an automatic summary here in a few clicks for Drupal 8 content types, this is not (yet) true for any page type (other content entities, custom pages, views, etc.).

To meet this need, rather than a specific integration (for each possible content entity) that could be laborious, the Toc.js module provides a new type of Block that allows us to place and generate a summary this time on any type of page (including also content types), whether it is a taxonomy term page, another content entity, a view, etc. 

Toc.js block

Its configuration options are similar to those available on content types.

Toc.js block settings

And we can obtain, after a few magic CSS rules, a summary of our customized content, depending on the nature of the pages of a project.

Toc.js summary example

Note that the uses of the Toc.js module can be extended to other needs than the generation of an automatic summary or a table of contents. For example, you can easily generate a contextual sub-menu based on the page allowing smooth scrolling navigation. Or generate an automatic menu of a One page site managed on a Drupal website factory for example.

Toc.js menu example

Another way of seeing and finally formatting a summary, simply by extending its scope to all the elements that make up a page and not just those of a content.

Apr 10 2019
Apr 10

Lots of people in the Drupal community are eager to learn React these days, following Dries's announcement that React is coming to Drupal.

At NEDCamp in 2018 I presented on how to dip your toe into embedding a react application into a Drupal framework (video on drupal.tv).

This is the long-delayed blog post to follow up to the presentation.

Our approach was fundamentally this:

  • we wanted to possibly embed multiple React apps on the site eventually, so we wanted to treat our base React libraries as common across the site.
  • we needed to marry React routing and Drupal routing so that we could occupy a whole "namespace" of the site
  • we wanted Drupal to store all the entities managed by the front-end, so we had to settle on storage and an API

React Libraries

We wrote a small react_libraries module to expose the libraries for React that we thought we would use everywhere and wanted consistent on every site.

Besides the .info.yml file for the module, the only other thing in the module is the libraries' definitions.

# react_libraries.libraries.yml react: js: https://unpkg.com/[email protected]/umd/react.production.min.js: external: true https://unpkg.com/[email protected]/umd/react-dom.production.min.js: external: true react-dev: js: https://unpkg.com/[email protected]/umd/react.development.js: external: true https://unpkg.com/[email protected]/umd/react-dom.development.js: external: true

All this does is suck in the libraries from CDN, including a prod (react) version and a dev (react-dev) version.

Our smaller apps just depend on this module and then attach the react_libraries/react(-dev) libraries as needed (you'll see that next).

One lesson learned is that we started with create-react-app, so to make this work we had to eject from that and remove the libraries that are normally in the build app bundle. Next time, we will build our app up from scratch rather than using the scaffolding.

Routing

The way React apps work is that they handle the routing by changing the URL with JavaScript and allow the app to deal with what to do given that route. But, as the page isn't refreshing, it's all just one path to Drupal. The problem comes in when a user bookmarks a URL and expects it to work (and it should). To handle this scenario, we assumed a 'namespace' in the routing by declaring /my-react-app/* to belong to our React app. In Drupal 7, this would've "just worked," as any path registered auto-assumes that anything appearing on the URL after that are just arguments to the route. In Drupal 8, this is no longer true, so we have to sort of fake that old behavior.

To do that, we need a custom module. As part of that module, we can define routing--and we tell our route that there is a single argument passed ({react_route}), and we set the default value of that parameter to "" if it is not passed at all (i.e., you navigate to /my-react-app by itself).

# my_react_app.routing.yml my_react_app.overview: path: /my-react-app/{react_route} defaults: _controller: \Drupal\my_react_app\Controller\MyReactAppController::overview _title: 'My React App' react_route: ''

But, alas - this does not match the path /my-react-app/pathpart1/pathpart2 - so this is not complete yet.

Next, we need to create an Inbound Path Processor, by dropping a new class in our module's src/PathProcessor/ folder.

namespace Drupal\my_react_app\PathProcessor; use Drupal\Core\PathProcessor\InboundPathProcessorInterface; use Symfony\Component\HttpFoundation\Request; class MyReactAppPathProcessor implements InboundPathProcessorInterface { public function processInbound($path, Request $request) { if (strpos($path, '/my-react-app/') === 0) { $names = preg_replace('|^\/my-react-app\/|', '', $path); $names = str_replace('/',':', $names); return "/savant-tools/$names"; } return $path; } }

What the above code does is strip out the "namespace" part of our route, and then replace all the forward-slashes with colons so that it appears as a single route parameter. Essentially, PHP is just throwing this out anyway, since it's the front-end that will be using this route information in JavaScript.

The Controller

The final missing piece is - well, what DOES Drupal actually serve up for markup when we hit anything at my-react-app/*? That's defined by the Controller that your routing.yml file refers to. Your routing class gets dropped in your module's src/Controller folder.

<?php namespace Drupal\savant_tools\Controller; use Drupal\Core\Controller\ControllerBase; /** * Controller for My React App. */ class MyReactAppController extends ControllerBase { /** * Renders the react app. * * @return array * The render array. */ public function overview() { $build = []; // @TODO - do dev / prod here. (/react or /react-dev) // Ideally, make this configurable somehow. $build['#attached']['library'][] = 'react_libraries/react-dev'; // This is where you attach the additional library from your // module that contains the non-React-libraries code $build['#attached']['library'][] = 'my_react_app/actualapp'; // Finally, drop your main mount point for React. // This ID can be whatever you use in your app. $build['#markup'] = '<div id="root"></div>'; return $build; } }

Fin!

At this point, you're now free to write that whole slick frontend!

One last thing to mention, another alternative to this is to mount a React application onto a node. Using JD Flynn's module React Mount Node you can simply specify a node, the div ID, and the library you've registered with your React App in it. You will need React fully bundled, or you'll need to attach your react_libraries on every page or through some other mechanism, and the routing isn't handled with as much elegance - but if you have simpler needs, this is a great way to go!

Apr 10 2019
Apr 10

Normally I would invest my time in writing about attending sessions and/or how talks went from our speakers or BoFs and other social events. But since I spent the better half of Monday on a plane somewhere over the Atlantic, I will be taking this opportunity to compare this weeks experience to the one I had from four years ago. 

Besides the summits and the different ways you can buy the ticket nowadays, not much has really changed. DrupalCon remains the biggest Drupal event in the world, and you will meet an overabundance of incredibly friendly people there.

Part 1: The journey to Seattle

Like all DrupalCons for me, this one also began with an elongated trip through several airports, first a 1h 5min hop from Zurich to Amsterdam, followed by a roughly ten-hour flight to touch down at Seattle Tacoma International Airport.

Zurich to Seattle

Italy vs. France

The flights went smooth and apart from the occasional shakedown, I didn’t notice much uneasiness. That is until I was served lunch. There were several intriguing options, I had to make a comprehensive decision between Caesar salad, a vegetarian mozzarella pizza or a turkey and cheese croissant. Naturally given my never-ending love for Italian cuisine I opted for the pizza but it seemed that by the time the food cart reached my row, they were out.

"Fresh Croissant"

Instead, I received a box that read “Fresh Croissant“ in big, classy letters printed on a reasonably attractive shell showcasing a map of Paris. Trading Italy for France couldn't be that bad, surely. But upon opening my small box of doom I was treated to what must have been the remains of a gutter rat, shipped directly from the catacombs of Paris onto my food tray. It‘s hard to describe the shape, consistency, and scent of the box innards without using chemical compositions or comparison to what floats around in a sewer. The temperature also seemed to vary quite a bit from top to bottom, further confirming my theory of it being alive at one point.

Whatever this was, it wasn't a “Parmesan Cheese, Mature Cheddar Cheese & Turkey” croissant.

Order at the border

Once landed I was keen to leave the rat behind and make my way through the checkpoints. I last visited the US in 2015 and have an ESTA, so I was sure I would be able to get through quickly and effortlessly. 

There were only 2 lines, US/Canadian citizens and ESTA/VISA holders, the latter was full of the majority of the passengers from my flight. Because of my seating arrangements, I exited the air tube quite late. The wait was long enough that every so often a disgruntled passenger reached terminal annoyance and broke down before attempting to bargain with the officer who was making his rounds or one of the airport staff members. Results of these interactions varied between total denial and instant gratification. I didn't bother trying to negotiate, I wasn't in a particular hurry, but after thirty minutes of barely any movement, my knees were getting unhappy.

At some point, one of the staffers approached me and asked if I had visited the US since 2008. When I answered positively he immediately pointed me towards line 1. Now, I’m no UX expert but perhaps that information could have been included on the signs. When others within my vicinity heard about my redirection, they promptly followed suit. Soon I was racing most of line two as they migrated like a flock of seagulls to line 1. We waited again.

But that wasn't the end of it. After I checked through the automated migration ATM I had to stand in line again for the final stamp of approval. There were 6 border control officers working that day. Some faster than others and some nicer than others, one, in particular, was having a rough start to the week. To say the least, officer McNasty wasn't exactly welcoming, in contrary, in German there is a word for people like that, we call them “Arschloch”.

He must have smelled the gutter rat on me because he wasn't exactly thrilled when I approached. Our interaction went something like this:

Officer McNasty: “You here for business or pleasure?”
Me: “Both.”
Officer McNasty: “There is no both, there is either business or pleasure. Are you here for business or pleasure?”
Me: “One week business, one week holiday.”

He responded with a frown that would have put my math teacher to shame, but a few minor questions later I finally received the approving stamp as he silently pointed me towards the escalator down to the baggage claim. I was free. Sort of.

Baggage Claim

The first one to spot both me and my suitcase gets a drink at DC Seattle. 

At last, I made it to Seattle, riding into the city I was treated with tall, striking buildings and a glimpse of the Harbour.

Hello Seattle!

Part 2: The venue and playing “Guess who?”

The fortress of not so solitude

This year, DrupalCon is being held at the Washington State Convention Center. Built in 1988, this large 415’000 sqft complex is humongous compared to the European counterparts. It’s also located in what I would call “Downtown” Seattle. Take that with a grain of salt though as I base this on the six hours I’ve been in the city.

The building also sits on top of a freeway, which you can spot and overlook while you’re inside of it, neat!

Seattle

When I first arrived, it took me some time to find the entrance. The building, depending on where you approach it from, is rather defensive and resembles a fortress more than a convention centre (think of the freeway as the moat). Even after finding the entrance, if you come in from the west you’ll have to use 4-6 escalators before you see any rooms. 

After collecting my badge from the friendly volunteers I made my way through the halls and started to look for familiar faces. DrupalCons are always tricky, you end up meeting a lot of people who seem to know you (or not) and I often have trouble remembering if I’ve met them. 

During times like these, I’d like to play the good old “Guess who?” game. The goal is to keep the conversation going until you can figure out who you’re talking to before your cover gets blown. 

Game

Admittedly I've never successfully finished a session, but the strategy I’d recommend is starting the conversation with “Oh wow, it's been quite a while hasn’t it? What have you been up to since we last met?”. Hopefully make your opponent reveal some crucial information about their job, location, and where you met previously. If you're lucky one of these things will tip you off and trigger a spark to put that name on that face.

If you find yourself on the receiving end of my blank stare, I apologize. it's not you, it's me.

The booth, the booth, the booth is unattended

This is one of the first years Amazee Labs doesn't have a physical booth, but our sister company amazee.io does. I was giddy with my freedom to wander and check out the exhibition hall and while it was still under construction. 

If you’re around the exhibit hall you can find some Amazees, of both the io and Labs variety hanging out at the io booth. Come and say hello!

Giving back

While the booth was being constructed several of our peeps dug themselves into the contribution hall on the 6th floor.

John Albin Wilkins

Blazej

Maria

You can easily spot John from about 600 miles away as he overlooks the kingdom of room 6A with his standing desk contraption. It’s a great conversation starter really, for the time I sat there I witnessed several hundred people approaching him and asking about every little detail of his mobile turret unit. 

So if the makers of this product are reading this post I think they should consider making John the official global ambassador of this mobile standup desk unit solution that fits into a backpack and gets a pass from the TSA.

Part 3: Extracurricular activities and the endless consumption of beverages

Monday evening presented itself with several social offerings, amongst which was a pub crawl that was attended by a few of the fellowship.

Walking to dinner

– Image courtesy of Josef Dabernig (@dasjo)

Since I began to fall asleep while walking (I was still running on Zurich time so technically it was around 3 am) I decided to skip the crawl as that would have ended up in a different kind of pizza.

But before that, I realized that for the first time ever, I forgot to pack a toothbrush and some paste. So after taking a nap for about an hour, I was forced to venture out again, this time to find the holy brush.

City

It’s a restaurant

Tuesday evening also saw the Amazee dinner, were we collectively gathered and feasted on quality beverages in a place called “Outlier”. The food was indeed fantastic, some people even dropped phrases such as “this is the best _________ I ever had in a restaurant”. 

Everyone seemed equally amazed about the quality of the provided liquid but not the selection. Which is why several of us left afterwards in search of alternatives to quench one's thirst.

In the end, it was a great, cosy dinner, filled with friends and family alike.

Team Dinner

Part 4: Conclusion and final thoughts

Should you go or should you stay?

So, then you wonder, what's this all about, what is the meaning of this stretched out the first impression? To be honest, I’m not sure. You probably noticed that I didn't compare it all that much to L.A., the reason for it is very simple, there is not much comparing needed.

While the venue and sessions may change, and the outside activities like the pub crawls are fun and inviting, there’s not really a wrong way to do DrupalCon. You can find your own way, roam around freely in town and every now and then you might run into some Drupal people that couldn’t be more different but somehow share the same passion.

Apr 10 2019
Apr 10

When it comes to creating websites quickly and easily, there’s hardly anything that compares to Drupal distributions. These are ready Drupal builds with core, theme, set of modules, libraries, and configuration ready for a particular industry, website type, or use. One of the hottest uses today is decoupled Drupal architecture. Of course, Drupal has got distributions for it that give you decoupled Drupal out-of-box. They include Reservoir, Headless Lightning, and the hero of our article — Contenta CMS.

Decoupled Drupal as the trend of the day

One of the main creators of Contenta CMS distribution, Mateu Aguiló Bosch aka e0ipso, in his speech mentioned the following. He noticed “the explosion of devices and places where people want to consume content.”

Projects are no longer about websites, said the developer. They are also about having an iOS and an Android application, putting something on a Roku, an Apple watch… or even at a smart oven!

Here is where decoupled Drupal comes in. This is an architecture that allows you to entrust front-end experiences to other technologies, while Drupal serves as a data source.

This results in expanding your digital reach and, in many cases, using the best characteristics of these front-end technologies. The popular choices for Drupal today are JavaScript frameworks like Vue, React, Angular, Gatsby (built with React), and more. They are primarily characterized by blazing fast performance and interactive features.

Thanks to the API-first Initiative, Drupal is well-suited to this kind of interaction. Great helpers for developers are RESTful web services in Drupal 8 core, and now — JSON:API in Drupal 8.7 core as of May 2019. This is enhanced by useful contributed modules like GraphQL, Subrequests, Relaxed web services, and so on.

Contenta CMS distribution for decoupled Drupal out-of-box

Despite the wealth of decoupling tools in Drupal, distributions offer the easiest approaches to the setup. The idea about a decoupled distribution emerged at DrupalCon Baltimore, and then the Contenta CMS distribution was created.

Contenta works on an “API-First” basis and uses JSON:API. Its main aim is to make decoupled Drupal setup easy even for Drupal novice. It also allows front-end developers get a powerful Drupal backend without having to know “drupalisms.”

In addition to the decoupled Drupal CMS (Contenta JSON:API), there are demos for the most popular front-end technologies — Contenta React, Contenta Vue Nuxt, Contenta Angular, Contenta Gatsby, and so on.

The benefits of Contenta CMS distribution

  • decoupled Drupal out-of-box from first second
  • collection of the most needed modules
  • friendliness to non-Drupal developers
  • demo content
  • detailed documentation
  • demo front-end applications

Key modules included into Contenta CMS

  • JSON:API is a zero-configuration module that automatically creates API endpoints to expose your Drupal entities in the JSON format.
  • JSON:API Extras helps you make settings for the JSON:API module (enabling or disabling the resources, overwriting their names, and much more).
  • JSON-RPC implements a remote procedure call (RPC) protocol. It lets you execute remote actions, for example, clear caches or put the site in maintenance mode.
  • ContentaJS improves performance even in case of frequent requests. This is achieved by creating configuration endpoints that Node Server reads for automatic bootstrapping.
  • GraphQL helps you expose data based on a GraphQL schema. The main benefits are exact queries and improved performance with no round-trips to the server.
  • Decoupled Router helps you manage page routes on the front-end by providing an endpoint for exact path aliases.
  • Consumers registers your Drupal data consumers and helps you create variations based on which consumers is requesting the data.
  • Consumer Image Styles integrates with JSON:API and allows application developers to specify the image styles they need.

Let your decoupled Drupal setup be the smoothest!

If you want to try decoupled Drupal, be it Contenta CMS distribution or “classic” Drupal installation, you can always entrust this to our Drupal team. We offer development and support services, so you can reach out to us at whatever step you are in. Maybe decoupled Drupal is the luckiest choice for your website!

Apr 10 2019
Apr 10

Editor’s Note -- This article was formerly listed as the Top 10 Websites Built with Drupal, and based on TopDrops.org. That site has since stopped updating, so we decided to pivot towards a new kind of value for our readers: the most surprising examples of Drupal-run sites.

Some of the world’s most influential businesses and organizations run their websites using Drupal: General Electric, eBay, The Economist, etc.

A good number of groups using the CMS might come as a surprise, however, and they prove its reliability for creating powerful and noteworthy sites. We checked the web to bring you our list of the top Drupal websites. For a list of Drupal’s 10 best sites, read on.

Entertainment Weekly Drupal Website

Entertainment Weekly (a.k.a. EW) is an American publication, owned by Time Inc., that covers film, television, music, theater, books and pop culture.

It’s renowned for covering all things Hollywood, from the latest films and trends to the high-octane lives of its celebrities. EW reports on television ratings, movie grosses, production costs, and even concert ticket sales. Their in-depth articles are among the top resources for the world’s favorite shows, producers, showrunners, and more.

In addition to being a top Drupal site, ew.com is also ranked by Alexa as the 902nd most popular website globally over the last three months.

Tesla Drupal Website

Tesla is one of the world’s most talked-about companies, known for making waves in the markets for automobiles and clean energy. You’ve probably heard about their fleet of self-driving, electric cars or the Tesla Wall: a giant battery providing homes with storage options for clean energy.

Their site is neat, clean, and highly effective at showcasing their products. We’re big fans of their homepage in particular, and we recommend you check it out. It’s exactly what a future tech company’s website should look like!

NCAA Drupal Website

College sports in the United States is big business. The National Collegiate Athletic Association (NCAA) is a non-profit association which regulates athletic competitions for 1,281 institutions, hosts conferences, and manages related organizations across the United States.

In 2014, the NCAA generated nearly a billion dollars in revenue—80 to 90% of which was thanks to the Men's Division I Basketball Tournament.

Their website is a functional mix of sports journalism and sales. Not only do they post schedules, analysis, and video coverage, but they also market their team merchandise hosted on the secondary site, shopncaasports.com.

 

Mint Drupal Website

Mint.com is a free web-based personal financial management service that caters to over 16,000 US and Canadian financial institutions and self-reports having 10 million users. Mint's primary service allows users to track bank, credit card, investment, and loan transactions and balances them all through a single user interface --as well as create personal budgets and goals.

In 2009, it was acquired by Intuit, the makers of Quicken and TurboTax. Judging by the look and feel of their site, that merger came with a bump in digital marketing expertise; Mint.com is simple, clean, and makes user acquisition easy.

Australian Government Drupal Website

The state of Australia leans on Drupal to power their website: a sprawling information resource for citizens, visitors, and entrepreneurs. The site hosts over 3,000 distinct pages covering topics from healthcare and culture to career opportunities and travel suggestions. The website even goes the extra mile by linking to local news and social media channels.

Australia.gov.au is a great example of Drupal’s ability to organize and present information. The site is designed like an inverted funnel, with the homepage offering a selection of categories that branch into more specific topics the deeper you dive.

Le Figaro Drupal Website

Founded in 1826, Le Figaro is the oldest national newspaper in France. It is the second-largest national newspaper in France after Le Parisien and before Le Monde and is part of Le Figaro Group, whose publications include TV Magazine and Evene.

The site delivers a variety of features that naturally belong on the website of a leading periodical. Page load speed is stellar despite being packed with feeds, media, and a live video pop-up on the bottom corner of the screen.

The Emmys Drupal Website

The Emmy Awards are a group of American awards dedicated to recognizing the best of U.S. television --from its actors and directors to its engineers and humanitarian impact. Their website covers featurettes on notable happenings and personalities surrounding television around the world (though naturally centered on America), as well as event schedules and videos of events and commentary.

Their site is dense in terms of content but smooth in presentation --just what you might expect from a showbiz powerhouse like the Television Academy.

While there are many options to choose from regarding themes for your website's content, here's our list of recommended Drupal themes that enable an effective and engaging digital experience.

Keap Drupal Website

Keap offers a client management service and automation platform (Infusionsoft) for small businesses. Their products are aimed at streamlining the customer lifecycle, facilitating customer relationship management, marketing automation, lead capture, and e-commerce.

Based in Chandler, Arizona, USA, Keap is one of the fastest growing private companies in the region, adding 240 jobs between 2012 and 2013, and also receiving $54 million in venture capital from Goldman Sachs in early 2013.

ABS-CBN News Drupal Website

ABS-CBN News and Current Affairs is the news division of the ABS-CBN Corporation, a Philippine media conglomerate. It’s headquartered in the Philippines, and has news bureaus in North America, Europe, Asia Pacific, and the Middle East, making it the largest and the most comprehensive news outlet when it comes to local and international newsgathering in the island nation.

Their website is powered by Drupal, which allows them to deliver news in real time, connect across various social media platforms, and encourage community discussion through a login system for news readers to set up profiles and engage in discussions.

NASA Drupal Website

NASA is the American government’s flagship agency for its civilian space program, aeronautics research, and aerospace research. They stand at the forefront of many of the world’s latest discoveries in physics, astronomy, and engineering --and their website is a haven for the world’s science enthusiasts.

Their site hosts information about past and present space missions, ultra-high definition photos and videos of the cosmos, and download links to a nearly endless amount of apps and learning resources for those looking to learn more about the universe we inhabit. It’s a shining example of Drupal CMS used to present stunning information, and elevate the user’s experience.

Honorable Mentions

As of 2019; the following 2 major platforms were revamped and enhanced as digital experiences with Drupal 8:

Amman Stock Exchange

Amman Stock Exchange Drupal Website

and

Al-Bawaba News (BETA)

Al Bawaba News Drupal Website

New Drupal sites are always being uploaded, updated, and refined as the world’s site designers and marketers find more ways to work with the system. Drupal’s large community of developers and companies like Vardot are always at work innovating the craft of designing with Drupal; it’s only a matter of time before new sites earn a spot on our list.

Do you agree with our list of top 10 Drupal websites in the world? If you don't or see better websites out there worth mentioning... let us know in the comments!

Apr 10 2019
Apr 10

This is rather simple, in my views template (list.twig I call it, as I am using PatternLab), I created the following:

Now, in my corresponding views template in Drupal - views-view--search.html.twig - I just use that template and set the header_after_exposed variable to true.

Apr 10 2019
Apr 10

One of our clients had a request where he wanted to track and filter changes on some entities per field level so he can filter them and check new and old values and react only if they had some value that was interested to him.

Now if we're talking about revisions then we track everything and client wanted to track only changes on some fields and not on whole entity in general. This led us thinking and we created a module for tracking changes on entities. The module is called Entity log and you can find it on this link below:

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

When you install the module you can go to /admin/config/entity-log and setup which fields you want to track in log and select where you want to log changes (watchdog or Entity log entity).

It is simple enough for user (admin or moderator) to select fields he wants to track. (Check the image below)

selected fields

After checking what you want you can create view that will be your log viewer. So lets do that below:

log view

We select fields we want in our view like below and we have new entity log tracker.

entity log tracker

Since this is a drupal entity you can create any kind of view that suits your needs for logging and with fields you want to be included. Hope you enjoy the module.

Apr 10 2019
Apr 10

Who is choosing Drupal as a CMS?

Picking the right type of CMS for any website is no easy task. However, when it comes to complex websites that have to be shown on a wide variety of displays and in 10 different languages, the choice is even harder. In this article, I am going to tell you the reason why universities such as Harvard, Oxford, MIT, Stanford etc. are choosing Drupal as their default Content Management System.

Apr 09 2019
Apr 09
[embedded content]

Here is a recording of a presentation I did at a local JamStack Boston meetup. This provides a good high level overview of how to use Gatsby with Drupal as a backend content source.

Some resources from the presentation:

Apr 09 2019
Apr 09

CMI 2.0 at Drupalcon Seattle 2019

Fabian Bircher

9 Apr 2019

0 Comments

Fabian Bircher

9 Apr 2019

0 Comments

Fabian Bircher, 9 Apr 2019 - 0 Comments

Help us answer difficult questions about configuration management for Drupal core.

Tomorrow Wednesday at 13:45 (Pacific Daylight Time) in room 6C we have the CMI 2.0 updates session at the Drupalcon.

Together with Mike Potter, we will briefly present the work that has been done so far and lay out the road map for what is to come. The session will be recorded and the slides are attached to this post (subject to change).

I will not go more into details of the session in this post but I would like to mention a challenge for which we need to find a solution and I would like everyone to invite to join the discussion on drupal.org #3046903 or here in the comments.

The challenge is how to deal with update hooks that change configuration which run only in certain environments and thus make the configuration deployment more difficult.

CMI 2.0 DC Seattle 2019.pdf (1.28 MB)Download
Apr 09 2019
Apr 09

DrupalCon Seattle includes are a number of core conversations where you can learn about current topics in Drupal core development, and a week of sprints where you can participate in shaping Drupal's future.

In addition to the core conversations, we have a few meetings on specific topics for future core development. These meetings will be very focused, so contact the listed organizer for each if you are interested in participating. There are also birds-of-a-feather (BoF) sessions, which are open to all attendees without notice.

Also be sure to watch Dries' keynote for ideas about Drupal's future! Check out the extended Dries Q&A session on Thursday as well to get even more questions answered.

All meetings will be in Room 507-508 in convention center, except for the retrospective on Thursday which is in Room 401 at the Convention Center, very close to lunch.

Time Topic Organizer Monday, April 8th 1pm Automatic updates David Strauss Monday, April 8th 4pm Symfony 4/5 meeting Alex Pott Tuesday, April 9th 4pm Core compatibility, d.o, contrib semantic versioning discussion XJM Wednesday, April 10th 11am Autosave in core discussion Cristina Chumillas Wednesday, April 10th 3:30pm Media path to stable Adam Hoenich Wednesday, April 10th 5pm CMI boundaries Fabian Bircher Thursday, April 11th 9:45am Frontend deprecation, theme policies Lauri Eskola Thursday, April 11th 12pm Initiative leads retrospective discussion Gabor Friday, April 12th 10am Drupal strategy, how to do less, how to gracefully remove things Alex Pott Friday, April 12th 11am Layout translations discussion Ted Bowman Friday, April 12th 1pm Claro path to core Cristina Chumillas
Apr 09 2019
Apr 09

The last weekend of March, our team in Ljubljana finally made the long-anticipated transition into our brand new offices. 

In this short blog post, we’ll give you a glimpse into the teambuilding-like moving process, as well as explain why we made the decision to move and what this means for Agiledrop.

We knew a move was on the horizon since about the middle of last year. In 2018, we saw our team grow way more than any previous year. This meant that we were able to start working on even more projects for even more diverse clients.

What it also meant, however, was that we would soon outgrow the office we were in at the time. We were recruiting new developers at a lightning-fast pace, and our office’s capacity was quickly becoming insufficient for so many people, with only a few empty desks remaining. 

Furthermore, we also saw a growing interest in our free Drupal courses. If we wanted to accommodate everyone who signed up, we would either need to run these courses more frequently or increase the size of the groups. 

Since the first option would unload even more work on our already busy CTO and everyone involved in the organization of the courses, the second one was much more appealing. And, thanks to our extremely roomy new offices, also much more feasible - we can now host almost twice as many course participants as in the old ones! 

Right, so - we knew we’d be moving soon, but we didn’t yet know when or where. Because of this, it was all still in the air, something intangible and by consequence far away. The cliché expression “out of sight, out of mind” definitely held true here. 

So, when things finally started to move, they moved fast; we only found out about the definitive new location in the beginning of March. And, we were to be completely moved by April 1st! This didn’t exactly give us a lot of time to move.

Conveniently, we had a teambuilding planned for the Thursday preceding the move. We decided to combine business with pleasure, postpone the teambuilding till the weekend and get our exercise in a less conventional way. 

When we started to move, we moved fast. We took some after work hours on Friday to get everything ready and make it easier for ourselves during the actual move. The next morning, we said goodbye to our old offices, loaded our things onto the moving truck, and were off to our new location.

Of course, staying true to our company culture, we also took this as an opportunity to bond and forge new friendships among teammates. We washed down Friday’s recreation with a beer or two, then on Saturday enjoyed our first meal in the new offices after getting everything set.

Now, just over a week later, we’re well on our way to being completely settled in. Having almost a whole floor of the building to ourselves gives us a lot of flexibility. Our new offices thus boast 2 booths for calls with clients, 5 meeting rooms and enough desks for 50 developers, with the bonus of much better parking spaces than in the old ones. 

At the moment, though, the new offices are so much more spacious compared to the old ones that one’s always a bit surprised at how empty they seem; however, we’re still actively looking for new teammates, so that’s bound to change soon.

On top of that, we’re already looking forward to having our first free Drupal course in the new office less than three weeks from now - and then another one soon after!

So, we’re keeping up with the change happening all around us, staying true to our vision and opening ourselves up to new opportunities. 

We can already feel this move has been the start of a new chapter for our company; we can’t 
wait to see what else this year has in store for us.

Apr 08 2019
Apr 08
Acro Media teams up with BigCommerce


Acro Media has teamed up with BigCommerce, a leading SaaS ecommerce platform, to create the BigCommerce for Drupal module, a headless commerce module integrating both platforms together.

What does this mean? It means that companies can now utilize the quick-to-market and feature-rich backend benefits of BigCommerce SaaS while enjoying the content-rich and extensible frontend experience of Drupal, the open-source CMS. It’s a melding of systems that results in a best-of-both-worlds solution for today's digital experience driven ecommerce needs.

Discover BigCommerce for Drupal

Read the full press release below.

April 8, 2019 11:00 am EDT

BigCommerce for Drupal Brings Customized Shopping Experiences to Drupal Community

SEATTLE – April 8, 2019 – BigCommerce, the leading SaaS ecommerce platform for fast-growing and established brands, today announced BigCommerce for Drupal, a headless commerce module built specifically for the open-source content management system (CMS), at DrupalCon Seattle. Developed in partnership with Acro Media, a world-renowned digital commerce agency, BigCommerce for Drupal gives brands the ability to embed flexible, enterprise-level ecommerce functionality into revolutionary customer experiences created within Drupal’s highly-extensible and secure CMS.

Available now in the Drupal module library, BigCommerce for Drupal facilitates an agile headless commerce architecture for merchants by decoupling Drupal’s powerful front-end CMS and BigCommerce’s scalable commerce engine. Knitted together by fast, open-source APIs, the module allows the two platforms to operate simultaneously and more efficiently within a single interface. Additionally, BigCommerce for Drupal is built directly into Drupal Commerce, making it compatible with the many existing themes and modules available within Drupal Commerce.

“Shopping experiences should not be limited by any single content management or ecommerce platform’s native capabilities, and BigCommerce for Drupal embodies that philosophy. We want pioneering brands to continue driving retail innovation forward and help redefine how customers buy products, whether it be through augmented reality, social selling or any disruptive technology that lies ahead,” said Russell Klein, chief development officer at BigCommerce. “Furthermore, announcing BigCommerce’s headless implementation at DrupalCon, an event that brings together one of the strongest and most engaged online communities, signals the value we place on open-source technology that can be made better through collaboration.”

Key features of BigCommerce for Drupal include:

  • Drupal Commerce Core: BigCommerce for Drupal is built atop the Drupal Commerce module, developed in part by Acro Media, tapping into years of iterative improvements and enhancements.
  • Data Sync: With BigCommerce for Drupal, retailers can synchronize product and metadata directly from BigCommerce into Drupal, and then augment and manage data directly within the Drupal CMS.
  • Cached Commerce: The connected BigCommerce store will sync at merchant-determined intervals, saving a cached version of the catalog inside Drupal rather than pinging BigCommerce APIs for information.

“As two open, API-driven platforms, there is a natural alignment between BigCommerce and Drupal, and this module bridges the gap to unify their respective functionalities into one intuitive interface,” said Shae Inglis, chief executive officer at Acro Media. “The future of ecommerce is open architecture, and headless integrations lets even enterprise-level brands be nimble and capitalize on the explosion of new, innovative consumer touchpoints.”

To learn more about BigCommerce for Drupal visit www.bigcommerce.com/drupal. To download the BigCommerce for Drupal Module visit www.drupal.org/project/bigcommerce. DrupalCon attendees can also get more information by visiting the Acro Media booth (#802).

Is BigCommerce and Drupal right for you?

Quickly find out using Acro Media's Ideal Commerce Architecture Analysis.

Complete Your Ideal Architecture Analysis

Apr 08 2019
Apr 08
Go to the profile of Deirdre Habershaw

Oct 19, 2018

Today, more than 80% of people’s interactions with government take place online. Whether it’s starting a business or filing for unemployment, too many of these experiences are slow, confusing, or frustrating. That’s why, one year ago, the Commonwealth of Massachusetts created Digital Services in the Executive Office of Technology and Security Services. Digital Services is at the forefront of the state’s digital transformation. Its mission is to leverage the best technology and information available to make people’s interactions with state government fast, easy, and wicked awesome. There’s a lot of work to do, but we’re making quick progress.

In 2017, Digital Services launched the new Mass.gov. In 2018, the team rolled out the first-ever statewide web analytics platform to use data and verbatim user feedback to guide ongoing product development. Now our researchers and designers are hard at work creating a modern design system that can be reused across the state’s websites and conducting the end-to-end research projects to create user journey maps to improve service design.

If you want to work in a fast-paced agile environment, with a good work life balance, solving hard problems, working with cutting-edge technology, and making a difference in people’s lives, you should join Massachusetts Digital Services.

Check out some of our current postings here:

Creative Director (posting coming soon, submit your resume here)

Director of Technology (posting coming soon, submit your resume here)

Senior Drupal Developer (posting coming soon, submit your resume here)

Didn’t see a good fit for you? Check out more about hiring at the Executive Office of Technology and Security Services and submit your resume in order to be informed on roles as they become available.

Apr 08 2019
Apr 08
border_clear

April 08, 2019

Christina

Drupal 8 ships with a custom CKEditor build. This build is configured with a build-config.js file. We recently ran into a situation in which we wanted to override this configuration in order to disable a plugin. There is some information in this build-config.js file about replacing it with a non-minified build for development purposes, but nothing about overriding it. Here is how we did it.

The plugin we wanted to disable was the Show Table Borders plugin. This is the feature that provides default dotted borders around all table cells while you're editing a table in CKEditor. We wanted to disable that and, instead, just show the table borders as they would be styled on the front-end. Upon inspection of the build-config.js file that Drupal uses, which is located at core/assets/vendor/ckeditor, we found that the plugins key contained showborders: 1. To disable it, we needed to rebuild CKEditor with this line removed.

To do that, we saved a copy of build-config.js to our theme in a similar location: assets/vendor/ckeditor. We removed the line which enables showborders. Then, we went to CKEditor's online Builder and used the Upload build-config.js feature to download a newly generated copy of CKEditor that would exclude the Show Table Borders plugin. We placed the downloaded files in our theme's assets/vendor/ckeditor directory.

The last step is to override Drupal's core CKEditor build from within the theme's info.yml file. Add the following lines (modified for your theme):

libraries-override: core/ckeditor: js: assets/vendor/ckeditor/ckeditor.js: /themes/custom/YOUR_THEME_NAME/assets/vendor/ckeditor/ckeditor.js

Flush the caches and the plugin should be gone!

Apr 08 2019
Apr 08

Response to request

After posting my request for a Webform logo, Jeff Masigan (jeffmasigan) the owner of Pixel Architect Web Design Inc. reached out via Drupal Slack, offering to design the Webform module's logo and even have it printed on tee-shirts for DrupalCon Seattle. It is hard to turn down the prospect of giving out Webform tee-shirts at the Advanced Webform session. Lili, my 10-year-old daughter, is very excited to have Webform tee-shirt added to her growing Drupal tee-shirt collection.

Two other awesome members of the Drupal community, Christian Okpada (ojchris37) and Jürgen Appel, responded with proposals and ideas. While thinking about Jeff's Webform logo tee-shirt offer, I also realized that Jeff and I had met in the Webform issue queue via Issue #3032244: Webform - Route Not Found Exception. This issue was one of those frustrating 'gotcha' problems that we were able to work through and fix. Seeing that Jeff had a history in the Webform issue queue and even earned an issue commit credit, this finalized my decision to work with Jeff and Pixel Architect.

Drupal Seattle was only a few weeks away, so Jeff and I came up with a tight timeline and got to work.

First designs

Webform Logos

Webform Logos

Pixel Architect's designer came up with a bunch of icon and color variations. I initially thought the Webform logo might use a checkbox icon but when I saw the miniaturized contact form; I was sold. First off, a contact form is the only out-of-the-box form installed by the Webform module. Second, this default contact form is used in most Webform related presentations and screencasts. Finally, including a form in the logo captures the mission of the Webform, which is to build awesome forms.

So my vote is for mini contact form logo but Youri van Koppen (MegaChriz) and Christian Okpada (ojchris37) weighed in preferring the WF logo. Four people's opinions only represent a tiny sampling of the close to 500,000 installations of the Webform module, so Jeff and I decided to let people vote on the Webform module's logo at DrupalCon Seattle.

The two Webform logo finalists

The two Webform logo finalists

The two Webform logo finalists

Jeff and I are splitting the cost of hand-out cards encouraging people to vote on the Webform module's logo. Since these cards are somewhat self-promoting, the Webform module's Open Collective's fund won't be used to pay for these. I am still trying to figure out how to reasonably and adequately spend Open Collective funds.

The Webform logo and tee-shirts, which are a great use of collect funds, would not be possible without the organizations and individuals who are backing Webform module's Open Collective.

Tee-shirts

Who wants a tee-shirt?

At DrupalCon Seattle, I will have a dozen or so Webform tee-shirts to give away after my Advanced Webform session on April 11th at 9:00 AM.

Outside of my presentation, I am going to prioritize giving these tee-shirts out by:

  • Webform maintainers
  • Backers of the Webform module's Open Collective
  • Someone who will wear this tee-shirt at DrupalCon.
Attend Advanced Webforms presentation to win a Webform t-shirt

Attend Advanced Webforms presentation to win a Webform t-shirt

Vote on your favorite Webform logo

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly

Apr 08 2019
Apr 08

For the longest time, web content had one purpose - to get pushed on a web page. But everyone today wants content to be available across the board - on mobile devices, native apps, digital signage, and show up on third-party sites and social networks - if it is to garner the right audience.

However, making this happen is easier said than done. Some of the persistent challenges faced by large editorial teams involve:

  • Coordinating and approving content that’s ready to go live

  • Ensuring authors and contributors can access a central system to create/submit content

  • Publishing a number of content pieces on different websites/subdomains.

Introducing Content Staging, Synchronization, and Syndication

Between 2010 and 2016, the media consumption grew at a 2% rate. It makes one thing clear that people love to consume content and they will in the future as well.

This, in turn, puts a lot of pressure on content creators and marketers to create and push new pieces of content.

Here’s how you can ensure quality and quantity production:

Staging

Creating quality content involves a lot of work, checks, and approval. Big publishing websites might come across several challenges in the process, such as:

  • Publishing a number of articles at the same time, and doing it across different websites/ sub-domains

  • Getting approval in a centralized system

Intricate publishing workflow is a critical part of the content strategy for any organization that employs distributed management.  Editing the content on the live site can result in accidental publishing. To avoid that, a separate staging environment is needed in a robust workflow.

Staging and publishing without requiring the editor to log into the target site is what content staging would help with.

Synchronization

Once the content is approved on the different environments, it must be automatically updated for other website environments. Synchronization helps you keep your environments in perfect sync by automating the secure provisioning of content, code, templates and digital assets between them.

Source: content Sync

Administrators can create and schedule multiple synchronization tasks to automatically occur in the future. It will target different destination servers and websites, or manually execute synchronization tasks through the user interface.

Developers can leverage the API and event handlers to automatically synchronize any type of staging tasks according to custom requirements.

Syndication

The web is big and noisy. So much so that even though you are targeting a niche audience, chances of them landing on your blog depletes with each day. Syndication gets your content in front of a different audience who might not be aware of your website otherwise.

“Syndication is important because it generates brand awareness and more traffic.”

content_syndication_staging_and_sychronization_with_drupal_srijan technologies                                          Drupal websites often syndicate content from Drupal planet

In simple terms, content syndication is republishing the content on a third-party website. Syndication works great for national and international media and publishing websites. There is no restriction on the kind of content that can be syndicated. The list can include blog posts, articles, infographics, videos and more.

It is a low-cost strategy which media and publishing websites like Huffington Post, CNN,  and NYTimes often use to garner a new audience. Syndication brings free exposure, backlinks, and greater organic traffic.

the_syndicate_image_srijan technologies

However, syndicated content is ultimately duplicate content. And duplicate content can create havoc with your SEO because Google loves unique content.  

While ranking the content it will only index the version that is original and larger, high-traffic website. You can make your syndicated content SEO-friendly by ensuring it is indexed correctly, on your site and on your syndication partner’s site.

Drupal Solutions for Content Staging, Synchronization, and Syndication

Drupal’s digital experience platform knows that your content must reach more than just websites. So yes, of course, it has modules for staging, syncing and syndication.

1. Workflow

Workflow, as the name suggests creates arbitrary workflows. Creating different workflows for the content saved as ‘draft’, ‘review’ and ‘published’, it can be assigned to the story node type.

  • Only users with role 'chief editor' can set stories to the published state. It also allows to set up workflow to alter states from form, page, comment, a special block, and a special workflow tab.

This module is available for Drupal 8.

2. Deploy

The Deploy module lets users to easily stage and preview content. It can manage the dependencies between different entities, like node references, automatically.

Designed to have a rich API which can be easily extended in a variety of content staging situations, Deploy can be used for both single and cross-site staging.

It should be noted that the Deploy module doesn't provide any settings or configuration pages, and the user must ensure that the target workspaces and/or remotes are configured correctly (workspaces configuration pages are provided by Workspace module).

For UI, Deploy provides just a link to run a deployment between current active workspace and its target.

This module is available for Drupal 8.

3. CMS Content Sync

CMS Content Sync provides content synchronization features between Drupal sites using a Node.js based Sync Core. It is built to support the synchronization of a huge amount of data, including content and media assets between many Drupal sites that can't be handled by Drupal itself.

Source: DrupalEurope

The three use cases for the CMS content sync are:

Content Staging: Content Sync allows you to test code updates with your content and publish code and content simultaneously. It further allows editorial review processes to ensure consistent quality of content.

Content Syndication:  For distributed teams, it allows the content to be updated and deleted centrally. It pushes content and media items at any of your sites to publish them on any targeted remote site automatically.

Content Pool: This feature lets you update and delete these items from the source site or allows you to completely customize it on the remote site. Further, you can connect the remote sites. Each content item comes with a preview and link to the source site that makes it easy to identify and select.

If your enterprise manages a large volume of content over a multi-site architecture, staging, syndication, and sync are crucial. Srijan’s expert teams can help you optimize these processes and follow industry best practices. Just drop us a line and our team will be in touch.

Apr 07 2019
Apr 07

I couldn’t be more excited about the fact that DrupalCon is in my town this year. I’ve lived in Seattle for more than 25 years and during that time, I’ve discovered some amazing places. 

So if you are looking to avoid the typical, touristy hot spots that cater to conventioneers (and I know that you are) and fast track your knowledge of where the in-the-know locals go, this list is for you. 

 

Drinking and Dining

Knee High Stocking Company

There’s a reason why the Knee High Stocking Co., is at the top of my list. Patterned after a Prohibition-era speakeasy Knee High stirs up some superior libations. Among my faves is the Cup of Awesome. One of these offers some insight into why the crazies, back in the day, thought that they needed to make liquor illegal. I’ve also been known to enjoy the Love and Violets--not currently on the cocktail menu, but if you ask nicely, I’m sure they’d be happy to mix one up for you. The full menu with a Filipino flair has has proven to be a perfect sidekick to some of the best cocktails in town.
Reservations are recommended. Call ahead to “get on the list.” In true speakeasy style, you’ll need to ring a doorbell for someone to invite you in.
1356 East Olive Way
206-979-7049

The Pink Door

Fabulous, fresh, classic, seasonal Italian fare is just the beginning. With a burlesque, cabaret vibe, the Pink Door has basically reinvented the restaurant experience. Delighting all five senses, and then some--the artwork, the lighting, the view of Elliot Bay, the element of surprise, entertainment that includes trapeze, cabaret, music and tarot--the Pink Door is a world unto itself that doesn’t take itself too seriously. What’s even more amazing to: it’s located right along the quaint Post Alley at Pike Place Market.
1919 Post Alley
306-443-3241  Reservations recommended

Dahlia Lounge

Another one of my favorites, Dahlia Lounge is viewed by many as a quintessential Seattle restaurant experience, and I couldn’t agree more. A pioneer of Seattle’s local, sustainable, and organic food movement, Dahlia features world-class wine and fresh-daily  Seafood. The menu feels completely original. The atmosphere is comfortable and casual. In other words, Dahlia Lounge is combines everything there is to love about Seattle in one delightful experience that's only a half mile from the convention center. My team was thrilled to discover that this was my pick for our DrupalCon kickoff dinner.
2001 4th Ave
202-682-4142 

Marrakesh Seattle

IMHO, Moroccan deserves a seat at the table of the world’s finest cuisines. Marrakesh Seattle promises a “True Moroccan Experience” and that includes extreme hospitality, a Sultan’s tent atmosphere, belly dancing Thursday through Sunday, a Hookah Lounge open from 9 p.m. to Midnight, AND dishes that combine a perfect mix of the most fabulous spices--cinnamon, turmeric, ginger, coriander, and cumin--along with culinary ingenuity that dates back many centuries. 
2334 2nd Ave.
206-956-0500 

Queen City Seattle

Located where many claim to be the site of the oldest bar in Seattle, Queen City is a first-class neighborhood bar and restaurant that’s just about a mile from the convention center. The classic black leather and dark wood interior has the feel of a storied spot where ordering a martini just seems like the right thing to do.
2001 First Avenue
206-402-5095

IL Bistro  

In the heart of the Pike Place Market, IL Bistro is authentic, Northern Italian, and there’s nothing not to love about that. While you are there, check out Pike Place Flowers, where you can pick up a phenomenal bouquet for a mere $10--not a bad idea to stop in on your way out of town.
93A Pike Street
206-682-3049

Lowell’s Restaurant

With a tagline of “Almost Classy Since 1957,” Lowell’s is a Seattle institution whose loyal customers (myself among them) are perfectly happy with things staying just the way they always have been. Seafood is delivered fresh daily and incorporated into hearty and delicious breakfast, lunch and dinner menus. What else? Five unique bloody mary creations, a “market mule” that takes the Moscow mule to a new level, three floors of seating with each one offering views of the Olympic Mountains, Puget Sound, and the Port of Seattle. Never will there be a need to change a thing at Lowell’s. 
1519 Pike Place
206-622-2036

Beecher’s Handmade Cheese

The world needs more institutions that use words like Dedication, Passion, Commitment, and Ardent Skill, in reference to their Cheese-Making Mission. Beecher’s Handmade Cheese is a cheese shop and a cheese-focused cafe where you can witness the miracle of cheese making, learn about cheese, taste cheese, buy cheese, and order dishes with cheese as the star ingredient.
1600 Pike Place
206-956-1964

 

Coffee

The Original Starbucks

It all started in Seattle--the elevation of coffee from something you percolated at home to an experience with a vibe that of course included WIFI. The first Starbucks opened in Seattle in 1971. Five years later it moved to this First and Pike Street location in Pike Place. While Starbucks is a few decades away from being considered off the beaten path, a visit to this location is recommended--if for no other reason than to get a glimpse of what LEED® gold certification is all about. Practically the entire interior is constructed from recycled or upcycled materials.  
1002 Pike Street

Caffe Ladro

Seattle takes its coffee very seriously. We are all required to have a favorite coffee place and to have strong opinions about it. For me, it’s Caffe Ladro. No question. With 15 distinct locations throughout Seattle, I am luckily never too far from a Caffe Ladro. The closest one to the convention center is to at
801 Pine St.
206-405-1950

Beyond Food and Drink

UPS Garden Waterfall Park

Hardly among the “secrets” but definitely worth seeing, Waterfall Park is just a little over a mile South of the convention center. Built to commemorate James Casey, the founder of UPS, Waterfall Park features a 22-ft. artificial waterfall--amazing--and a monument to Postal Service workers.   
219 2nd Ave. S
206-624-6096

Freeway Park

Nowhere in the world is there anything like Seattle’s Freeway Park and the excellent news for us at DrupalCon is that it connects to the Convention Center. The 5.2 acre Freeway Park bridges over Interstate 5 and a city-owned parking lot. Brilliant and right in the heart of Seattle.
700 Seneca St.
206-684-4075

Gum Wall

From the sublime to the ridiculous ... Seattle’s Gum Wall is a brick wall covered in used chewing gum. It’s A local landmark, in an alleyway under Pike Place Market, and a popular spot among both non-germaphobe tourists and locals to get their picture taken. 
1428 Post Alley

Apr 07 2019
Apr 07

April 07, 2019

Accessibility tests can be automated to a degree, but not completely; to succeed at accessibility, it needs to be a mindset shared by developers, UX and front-end folks, business people and other stakeholders. In this article, we will attempt to run tests and produce meaningful metrics which can help teams who are already committed to produce more accessible websites.

Premise

Say your team is developing a Drupal 8 site and you have decided that you want to reduce its accessibility issues by 50% over the course of six months.

In this article, we will look at a subset of accessibility issues which can be automatically checked – color contrast, placement of tags and HTML attributes, for example. Furthermore, we will only test the code itself with some dummy data, not actual live data or environment. Therefore, if you use the approach outlined in this article, it is best to do so within a global approach which includes stakeholder training; and automated and manual monitoring of live environments, all of which are outside the scope of this article.

Approach

Your team is probably perpetually “too busy” to fix accessibility issues; and therefore too busy to read and process reports with dozens, perhaps hundreds, of accessibility problems on thousands of pages.

Instead of expecting teams to process accessibility reports, we will use a threshold approach:

First, determine a standard towards which you’d like to work, for example WCAG 2.0 AA is more stringent than WCAG 2.0 A (but if you’re working on a U.S. Government website, WCAG 2 AA is mandated by the Americans with Disabilities Act). Be realistic as to the level of effort your team is ready to deploy.

Next (we’ll see how to do this later), figure out which pages you’d like to test against: perhaps one article, one event page, the home page, perhaps an internal page for logged in users.

In this article, to keep things simple, we’ll test for:

  • the home page;
  • an public-facing internal page, /node/1;
  • the /user page for users who are logged in;
  • the node editing form at /node/1/edit (for users who are logged in, obviously).

Running accessibility checks on each of the above pages, we will end up with our baseline threshold, the current number of errors, for example this might be:

  • 6 for the home page
  • 6 for /node/1
  • 10 for /user
  • 10 for /node/1/edit

We will then make our tests fail if there are more errors on a given page than we allow for. The test should pass at first, and this approach meets several objectives:

  • First, have an idea of the state of your site: are there 10 accessibility errors on the home page, or 1000?
  • Fail immediately if a developer opens a pull request where the number of accessibility errors increases past the threshold for any given page. For example, if a widget is added to the /user page which makes the number of accessibility errors jump to 12 (in this example), we should see a failure in our continuous integration infrastructure because 12 >= 10.
  • Provide your team with the tools to reduce the threshold over time. Concretely, a discussion with all stakeholders can be had once the initial metrics are in place; a decision might be made that we want to reduce thresholds for each page by 50% within 6 months. This allows your technical team to justify the prioritization of time spent on accessibility fixes vs. other tasks seen by able-bodied stakeholders as having a more direct business value.

Principles

Principle #1: Docker for everything

Because we want to run tests on a continuous integration server, we want to avoid dependencies. Specifically, we want a system which does not require us to install specific versions of MySQL, PHP, headless browsers, accessibility checkers, etc. All our dependencies will be embedded into our project using Docker and Docker Compose. That way, all you need to install in order to run your project and test for accessibility (and indeed other tests) is Docker, which in most cases includes Docker Compose.

Principle #2: A starter database

In our continous integration setup, will will be testing our code on every commit. Although it can be useful to test, or monitor, a remote environment such as the live or staging site, this is not what this article is about. This means we need some way to include dummy data into our codebase. We will do this by adding dummy data into a “starter database” committed to version control. (Be careful not to rely on this starter database to move configuration to the production site – use configuration management for that – we only want to store dummy data in our starter database; all configuration should be in code.) In our example, our starter database will contain node/1 with some realistic dummy data. This is required because as part of our test we want to run accessibility checks agains /node/1 and /node/1/edit.

A good practice during development would be that for new data types, say a new content type “sandwich”, a new version of the starter database be created with, say, node/2 of type “sandwich”, with realistic data in all its fields. This will allow us to add an accessibility test for /node/2, and /node/2/edit if we wish.

Don’t forget, as per principle #1, above, you will never need to install anything other than Docker on your computer or CI server, so don’t attempt to install these tools locally, they will run on Docker containers which will be built automatically for you.

  • Pa11y: There are dozens of tools to check for accessibility; in this article we’ve settled on Pa11y because it provides clear error reports; and allows the concept of a threshold above which the script fails.
  • Chromium: In order to check a page for accessibility issues without actually having a browser open, a so-called headless browser is needed. Chromium is a fully functional browser which works on the command line and can be scripted. This works under the hood and you will have no need to install it or interact with it directly, it’s just good to know it’s there.
  • Puppeteer: most accessibility tools, including Pa11y, are good at testing one page. Say, if you point Pa11y to /node/1 or the home page, it will generate nice reports with thresholds. However if you point Pa11y to /user or /node/1/edit it will see those pages anonymously, which is not what we want to test. This is where Puppeteer, a browser scripting tool, comes into play. We will use Puppeteer later on to log into our site and save the markup of /user and /node/1/edit as /dom-captures/user.html and /dom-captures/node-1-edit.html, respectively, which will then allow Pa11y to access and test those paths anonymously.
  • And of course, Drupal 8, although you could apply the technique in this article to any web technology, because our accessibility checks are run against the web pages just like an end user would see them; there is no interaction with Drupal.

Setup

To follow along, you can install and start Docker Desktop and download the Dcycle Drupal 8 starterkit.

git clone https://github.com/dcycle/starterkit-drupal8site.git
cd starterkit-drupal8site
./scripts/deploy.sh

You are also welcome to fork the project and link it to a free CircleCI account, in which case continuous integration tests should start running immediately on every commit.

A few minutes after running ./scripts/deploy.sh, you should see a login link to a full Drupal installation on a random local port (for example http://0.0.0.0:32769) with some dummy data (/node/1). Deploying this site locally or on a CI server such as Circle CI is a one-step, one-dependency process.

In the rest of this article we will refer to this local environment as http://0.0.0.0:YOUR_PORT; always substitute your own port number (in our example 32769) for YOUR_PORT.

Introducing Pa11y

We will use a Dockerized version of Pa11y, dcycle/pa11y, here is how it works against, say, amazon.com:

docker run --rm dcycle/pa11y:1 https://amazon.com

No site that I know of has zero accessibility issues; so you’ll see a bunch of issues in this format:

• Error: This element's role is "presentation" but contains child elements with semantic meaning.
  ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.F92,ARIA4
  ├── #navFooter > div:nth-child(2)
  └── <div class="navFooterVerticalColumn navAccessibility" role="presentation"><div class="navFooterVerticalRo...</div>

Running Pa11y against a local site

Developers and continuous integration servers will need to run Pa11y against a local site. We would be tempted to run Pa11y on 0.0.0.0:YOUR_PORT, but that won’t work because Pa11y is being run inside its own container and will not have access to the host machine. You could give it access, but that raises another issue: the port is not guaranteed to be the same at every run, which requires ugly logic to figure out the port. Ugh! Instead, we will attach Pa11y to the Docker network used by our Starter site, in this case called starterkit_drupal8site_default (you can use docker network ls to list networks). Because our docker-compose.yml file defines the Drupal container as having the name drupal and port 80 (the default port), we can now run:

docker run --network starterkit_drupal8site_default \
  --rm dcycle/pa11y:1 http://drupal

This has some errors, just as we expected. Before doing anything else, type echo $?; this will give a non-zero code, meaning running this will make your continuous integration script fail. However, because we decided earlier that we will tolerate, for now, 6 errors on the home page, let’s set a threshold of 6 (or however many errors you get – there are 6 at the time of this writing) instead of the default zero:

docker run --network starterkit_drupal8site_default \
  --rm dcycle/pa11y:1 http://drupal --threshold 6

If you run echo $? right after, you should get the “passing” exit code of zero. There, we’ve met our threshold, so we will not have a failure!

How about pages where you need to be logged in?

The above solution breaks down, though, when you want to test http://drupal/node/1/edit. Although it will produce results, what we are actually checking against here is the “Access denied” page, not /node/1/edit when we are logged in. We will approach this in the following way:

  • Set a random password for user 1;
  • Use Puppeteer (see “Tools”, above) to click around your local site with its dummy data, do whatever you want to, and, every step of the way, save the DOM (the document object model, or the current markup after it has been processed by Javascript) as a temporary flat file, named, say, http://drupal/dom-captures/user.html;
  • Use Pa11y to test the temporary file we just created.

Putting it all together

In our Drupal 8 Starterkit, we can test the entire process. Start by running the Puppeteer script:

./scripts/end-to-end-tests.sh

What does this look like?

Astute readers have realized that using Puppeteer to click through the site to create our dom captures has the added benefit of confirming that our site functionality works as expected, which is why I called the script end-to-end-tests.sh.

To confirm this actually worked, you can visit, in an incognito window:

Yes it looks like you’re logged in, but you are not: these are anonymous webpages which Pa11y can check.

So if this worked correctly (and it should, because we hav it under continuous integration), we can run our Pa11y tests agains all these pages:

./scripts/a11y-tests.sh
echo $?

You will see the errors, but because the number of errors is below our threshold, the exit code will be zero, allowing our Continuous integration tests to pass.

Conclusion

Making a site accessible is, in my opinion, akin to making a site secure: it is not something to add to a to-do list, but rather an approach including all site stakeholders. Neither is accessibility something which can be automated; it really is a team culture. However, approaches like the one outlined in this article, or whatever works in your organization, will give teams metrics to facilitate the integration of accessibility into their day-to-day operations.

Please enable JavaScript to view the comments powered by Disqus.

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