Oct 19 2018
Oct 19

The magnetic power of beautifully arranged content is really huge. Using it is one of the surest ways to keep your visitors on your website, spike their interest, bring your message across, and create the best impression of your business. There are plenty of attractive ways to display content on your Drupal 8 website. Let’s consider a few of them right now, as well as nice Drupal modules that are helpful.

Interesting ways to display content on your Drupal 8 website

Content presented in views

First of all, when it comes to content presentation in Drupal 8, we cannot help but mention Views — the powerful tool that is now built-in and that lets you display your data in absolutely any way you wish. A grid, a table, a list, and other formats are ready to hold your articles, news, photos, and so on. The results can be filtered and sorted by various criteria, and these filters can be exposed to website users.

There are plenty of additional modules that enhance content presentation in Views. For example, creating a simple photo gallery with Drupal 8 Views is a very nice option, but you could use a special responsive grid provided by the Views Photo Grid module. It arranges the photos so that each row height remains the same, while photos fill in the available width.

Photos presented by Views Photo Grid module in Drupal

Content in a stylish overlay

One of the popular and creative ways to display content on your Drupal 8 website is to make it open in a stylish overlay above the current page. This can be done with modules like the Colorbox, which is great for images, as well as iframed or inline content. Colorbox works like the image field formatter in Drupal 8.

Photos in a stylish overlay by Colorbox modules

Slideshows and carousels of your content

Various slideshows and carousels are incredibly engaging for users. They show content items one at a time — not only images, but also texts, videos, social media posts, or a combination of elements, including nested sliders. Various options for animation, touch-enabled or keyboard navigation, transition effects, and many more features are available to you.

All this is possible with Drupal 8 modules like Views Slideshow, Owl Carousel, Slick Paragraphs, Slick Media, Slick Carousel, Imagefield Slideshow, jCarousel, Flex Slider, BxSlider, Juicebox HTML5 Responsive Image Galleries, Views FractionSlider, Jssor Slider, and many more.

carousels of your contentin Drupal 8carousels of your contentin DrupalSlideshows of your content in Drupal 8Slideshows of your content in Drupal

Data presented as charts

Charts are great for data visualization. They look informative, professional, and convincing. Drupal 8 offers some nice modules for creating charts like the Charts, the Easychart, and others. They support charting libraries like the Google Charts and the Highcharts, and so on. You can present your data as a pie, column, or bar chart, and more.

Data presented as charts in Drupal

Special effects for your website’s images

Please your users’ eyes with interesting image effects. They can be added with special Drupal 8 modules, for example, the Image Effects module. It enriches Drupal image styles with great choices of of additional effects — Watermark, Text overlay, Set transparent color, Gaussian blur, Interlace, Mirror, Aspect switcher, ImageMagick arguments, Color shift, and so on.

Special effects for your website%E2%80%99s images in Drupal 8

Videos or other media embedded into content

A great idea to make your content will look much richer and more attractive is to embed media into it. As of Drupal 8.6.0, media opportunities let you embed videos, audios, images, files, as well as remote videos from YouTube and Vimeo with just a URL.

There are no extra modules to install — the built-in Drupal 8.6’s Media and the Media Library modules just need to be enabled. Then add the Media field to your content type (e.g. blog) and you will be able to fetch the media, previously saved to your media library.

Videos or other media embedded into content in Drupal

Content put into an accordion

Accordions are one of the handiest structures to display your content in Drupal 8. Your users can click on the menu items and extend them to reveal the content inside. A great way to implement it is the Views Accordion module, which presents the results of the views as a JQuery accordion.

Content put into a views accordion in Drupal 8

To recap

We have shown you a few nice examples of ways to present content on your Drupal 8 website. Drupal’s capabilities in this sphere are like an endless sea — even a million articles will not be enough to describe them.

And we have just touched on what contributed modules can do. However, in the hands of expert Drupal developers, absolutely any amazing results are possible with custom coding.

So the attractive, convenient, and engaging ways to display content on your Drupal 8 website are unlimited. For implementing any of them on your website, contact our Drupal help desk!

Oct 18 2018
Oct 18

A web page in Drupal is made up of several parts. For instance, you have the header and navigation that appears on each page. You have the main content region that holds your articles or the details associated with your events. On either side on the content, you might have sidebars with blocks suggesting related content or a call to action. 

Typically, each part of the page is created or managed by different members of your website team. The developers that originally created your site will have set up your header and menu, for example. You might have a trained IT member of your team tasked to create and place blocks in the sidebars as needed. Then, when a content author publishes an article, those blocks appear as planned on the article.

A setup like this taxes your IT guy and limits your content authors. Let’s explore how content types, fields, and views can empower your authors to influence the block that appear in the sidebars from article to article.

Planning Your Blocks

A simple exercise in the planning process is to ask the question, when X-type of content is published, what blocks should also appear? Traditionally, this would mean a fixed set of blocks configured to be visible on that content type or based on the URL alias.

But, what if you need a more granular approach to creating and enabling blocks. What if you wanted your content author to create and enable blocks without having to train them to be a Drupal builder?

Let’s explore an example scenario where you list all the blocks you might need from one article post to another.

  • More like this
  • Related training
  • Call to action
  • Archive
  • Guest speakers

A few of these blocks can be set up during development to activate automatically. For example, if the article is tagged as container garden, then other articles tagged as such will appear in a the block More Like This. But what about Calls to Action? Let’s take a closer look at those blocks that can’t be predicted with ease.

Related Training

You could design a Related Training block much like the More Like This block where training events would be listed in the block just because they have been tagged with the same term. 

What if the content is a How-to piece giving a sneak preview to one of the more simpler tasks that will be taught in a series of training events? In this scenario, the author wants to control which event to advertise, but she doesn’t want to include that advertisement in her narrative.

So, in the narrative content type you add a field that allows the author to reference the training event nodes that are directly associated with the content of the how-to lesson. Following the same concept as in the previous example, you hide the event reference field and print it via a Views block. The block appears in a predestined spot on the page.

With this approach, with some planning, the block can be configured to include a thumbnail image taken from the events in question along with date and time information, making it more than a list of the titles that appears in the reference field.

Call to Action

Your content author has created an article about a new technology that will be presented at the conference. You are not presenting a session but you will be hosting a networking event for attendees who want to extend their conference experience and meeting others in the field. The article is not the event. There’s an event node in another section of the site.

You want a Call to Action block to appear with this article, giving site visitors a link to sign up for the networking session. The common practice would be to create an advertising block and then placing that block to be visible for this specific article.

Another strategy would be to add a field set to the content type you use for your narratives such as blogs, news, and how-to lessons. You would add an image field, a text field, a link field, and on/off field. They would not be set to show. Instead, a contextual view block would be created, one on the lookout for someone to fill in the call-to-action fields and turn it on.

The Call to Action block will show up at the author’s discretion in a place on the page decided by the User Experience designer during the planning phase of your website development project.

Archive

Drupal 8 ships with a predefined View called Archive. It provides a block that lists months and includes a number representing how many nodes were published in that month. By default, all nodes are included but that doesn’t mean you can’t add filters to limit what gets included in the count.

Not all narrative content will be enhanced by including an Archive block, therefore having it enabled by default, could take up screen space needed for other more useful blocks. So, how does a content author turn this block on and off as needed? 

First, identify the scenarios where your users would benefit from being able to find previous narratives in common with the one they are viewing.  Then, using the same strategy applied for the Call to Action block, add an on/off field for the Archive block. Edit the Archive View to look for this field to be set to on.

This scenario, and the previous one, depend on your trust in the author to know when to turn on Call to Action and/or Archive. That’s where business rules come into play and ensuring all know how to follow them. 

Guest Speakers

This time, your content author is creating an event with multiple guest speakers. You have decided that creating a speaker page for every guest could amount to many nodes that aren’t worth maintaining. Instead, you want to link to the speaker’s own website.

Of course, you could make this information available is a list of links as part of the event, but given all the data you already including, it’s been decided that highlighting the speakers in their own blocks is a better option.

Using the same strategy enabled in the Call to Action scenario, you create a set of fields: image, text, link, on/off. This time however, you need the ability to have multiple speakers so you need this set of fields to repeat. There is a module called Paragraphs that will be your friend in this example.

Paragraphs allows you to create a set of fields that can be repeated on the page. Instead of including them in the display, you use a View to show the information in a block.

Performance

You might be starting to wonder about the performance of your site with all these queries on the database. And, you would be right to be concerned if you had no caching plan in place. Outside of Drupal, you have caching tools such as Varnish that can help deliver your pages quickly.

Have a Plan

When it comes to Drupal, using your imagination is key to empowering your content authors. Start by mapping your processes. Ask yourself what has to be available in order to execute the process differently.

Remember, you don’t have to teach your content authors how to create and place blocks. You can plan ahead and give them simple options within the environment they will already be working. Assuming default processes are your only option can frustrate your users.

Need Help?

Promet offers best practice Training to help give your team the know-how to be prepared for these scenarios. Want to run scenarios like this by our experts to get advice on pages, or even plan a new website from the ground up ? Promet is happy to create small and large planning exercises for you and your team to get the most out of your Drupal site.

Oct 18 2018
Oct 18
Over the last few years, I have had the privilege of sharing insights and tutorials on decoupled Drupal, which was originally unknown territory with shifting sands but today is a widely adopted approach, including by some of Acquia's most influential customers. Nonetheless, the relative unavailability of developer-focused resources that are both authoritative and current has hindered architects' and developers' ability to evaluate and explore decoupled Drupal for themselves.
Oct 18 2018
Oct 18

You run, you fall and you rise again with your ambitious endeavours of attaining supreme fitness. With so much going around in your own life, when you have to take care of your grandmother and monitor whether her insulin intake is right on track or not, it can prove to be a formidable task. Healthcare technologies have advanced to a whole new level and something like a smart wearable equipped to perform automated monitoring of diabetes can be of immense help.

A man tying shoelaces at the side of the road


As the pace of change accelerates, how can the healthcare industry move ahead and stay relevant with the changing demands? No matter what their size is, healthcare organisations find it a strategic imperative to answer this question. The velocity and scope of technological advancements are blurring the lines between healthcare and technology thereby redefining traditional MedTech and fundamentally altering business models.

With more healthcare technologies offering a new perspective for the organisations, Drupal’s stupendous web content management and its flexibility in integrating with healthcare technologies make it a remarkably meritorious choice for your digital innovation plans. So, what are some of the healthcare technologies doing rounds in recent times?

Healthcare technology trends

Technological innovation is giving different dimensions to what healthcare organisations can achieve

Whether it is the business and administrative side of things or the direct patient care, technological innovation is giving different dimensions to what healthcare organisations can achieve. Here are some of the trends in the healthcare industry that are making a humungous impact:

IT security

Healthcare enterprises are often the targets of sophisticated, well-coordinated cyber attacks because of the depth of information stored by healthcare providers. A study by Beazley Group states that 45% of the ransomware attacks in 2017 targeted healthcare organisations.

A graphical representation showing the number of reported breaches in healthcare industry


This has created a pressing need for better IT security. Healthcare enterprises are responding by investing in advanced security technologies like advanced data encryption, better data backups, and real-time security platforms leveraging Artificial Intelligence (AI) to detect and curb threats before they start posing serious issues.

Advanced Training Tools

Advanced healthcare training supplies are fast spreading in the marketplace to prepare students, residents and other inexperienced healthcare professionals with safe and efficacious environments to learn. These comprise of things like ECG simulators, live AED units, and bleeding control training kits.

Telehealth

Telehealth and telemedicine are becoming a significant part of the digital health transformation. For instance, Digital health lets the elderly to age and live in their own homes using technology like fall-detection monitors. Tele-mental and Tele-behavioural health services are another healthcare technology innovations that are blooming.

Artificial Intelligence

AI has the ability to completely metamorphose the healthcare industry in the coming years. It can streamline tasks like scheduling, timesheet entry, paperwork, Electronic Health Records (EHR), accounting and the diagnosis of patients.
 
For instance, chatbots can prove to be a great application point. These AI-powered software mechanisms can assist healthcare providers to cut down on the time-intensive nature of patient communication and simplify any tasks that do not require direct human intervention. Advanced chatbots, which are also referred to as conversational chatbots, can discuss in-depth health issues with patients to offer the best possible treatments that are available. For example, IBM Watson is helping doctors in providing advanced treatments.

[embedded content]


Internet of things

A study by Rock Health states that a staggering amount of $3.5 billion was invested into 188 digital health enterprises in the first quarter of 2017 and the number of smart wearables is going to reach 34 million by 2022.

Medical wearable devices are one of the most promising IoT devices that have the potential of offering healthcare teams with valuable data around the clock no matter if the patient is at home or outside of the practitioner’s direct care. Some of the exciting application constitutes cardiac monitoring, infant monitoring, fitness tracking, and pain management.

Big data and EHR

One of the most vital things in recent times is an Electronic Health Record which leverages the merits of Big Data. EHR stores all the health information of the patients electronically in the digital format that can be used by other information systems. It provides an option to the customer and the physician to have a permanent access to client data like cardiac waveforms, chronic diseases, diagnostic and previous prescriptions.
 
An EHR can improve the interaction between doctor and patient for more productive delivery of care. EHR minimises the number of papers that would be needed when visiting physicians.

Augmented reality and Virtual reality

The arrival of virtual reality and augmented reality solutions have also benefitted the healthcare technologies. From educating new students to planning procedures, the field of AR and VR has a lot to offer.
 
For instance, AR can allow medical students to interact in a really intuitive way with a 3D representation of the body. Another example is the AR app which was developed by Pixelbug that gave a better understanding of medical devices and their mechanisms for the physicians.
 

[embedded content]

 

Also, Maplewood Senior Living in Connecticut has utilised VR headsets to work with individuals to address concerns ranging from dementia to cognitive impairments.

[embedded content]


Coming together of Drupal and Healthcare technologies

Drupal, being an open source CMS, powers healthcare organisations in controlling costs and provides deeper patient and consumer engagement with information thereby improving people’s lives.

Drupal helps in safeguarding patient data with its security-focused framework

Drupal gives the extensibility to healthcare organisations by enabling them to integrate platforms and also help in the addition of new functionality with third-party technology. It helps in safeguarding patient data with its security-focused framework. You can customise the user experience to deepen patient engagement and alleviate provider satisfaction.

Some of the applications that show the capabilities of Drupal integration with healthcare technologies are given below:

Smart Wearables

DrupalCon Nashville 2018: Driesnote had a conversational session between Rebecca Pilcher / RyeBurd (Director of Marketing at Drupal Association) and Dries Buytaert (Project lead of Drupal). Rebecca shared an interesting story that threw light on how a smart wearable powered by Drupal helped to control Diabetes and track the intake of insulin levels.

[embedded content]


When Rebecca was being diagnosed with Type 1 Diabetes, an Omnipod insulin pump and a CGM (Continuous Glucose Monitor) helped her handling diabetes. A CGM tracks blood sugar patterns and an Omnipod insulin pump gives more flexibility in her insulin intake routine.

So how does Drupal come into play here? Dexcom, which is the brand of CGM, has one of its platforms powered by Drupal and Omnipod’s website is built on Drupal as well.

Five arrows forming a circle to explain how Drupal platform powers Omnipod and DexcomSource: Rebecca Pilcher's Blog | Medium

Drupal and EHR Integration

Integration of Drupal with the EHR system can help in creating an excellent system with an astounding web content management capabilities coupled with the innate strength of EHR for patients’ documents management.

A digital agency showed that Drupal has the capabilities to layer on top of several EHR systems within a medical group and compile the data into one physician portal. Drupal’s extensibility enables it to take on sophisticated integrations through numerous feeds from API calls, XML or JSON feeds and RESTful APIs.

Most current EHRs output data in HL7 (Health Level 7) delimited text files. HL7 has upgraded to a new protocol Fast Healthcare Interoperability Resources (FHIR) which leverages RESTful APIs and can make clinical modelling and system integrations less intricate.

Through integration between Drupal data-layer and an EHR via RESTful API connection, interoperability can be improved thereby empowering your staff to make use of critical data. Breaking down the data silos lets the healthcare delivery systems to evolve from a reactive diagnostic model to a proactive preventative model.

With the help of secure access management, Drupal can be configured at granular levels to data security and simultaneously access can be provided to a user based on role. Leveraging role-based provisioning, Drupal can surface a focussed view of critical data that dwells behind a firewall in a HIPAA secure environment.

Using specific EHR authorisation requirement, Drupal can be configured to tap into the database through web services integration and at the same following strict user access permission controls. Thus, this helps in protecting the data at all the times.

Genetic Information Management

Flowchart showing icons representing physicians shows the working of Genetic Information Management SuiteSource: bio.logis

Bio.logis offers Genetic Information Management Suite (GIMS) which helps in managing human genetics information for making genetic code accessible and usable. It gives genetic data to allow decision making with a medical value. GIMS comprises of a web-based authoring and content management system based on Drupal which is globally connecting expert knowledge in addition to genetic reports engine.

GIMS is based on Drupal and is globally connecting expert knowledge in addition to genetic reports engine

A multilingual portal and mobile applications offer access to medial-ready knowledge for physicians, patients and healthy clients for supporting distribution and scaling of genetics advice. The ‘pharma.sensor’ online application offers notions about adjusting drug therapies to individual genetic makeup.

Conclusion

With technological advances, healthcare technologies have had a massive makeover. Digital health services are leveraging emerging technologies and this has benefitted healthcare industries. Drupal has been pioneering digital innovation strategies in the healthcare with its enormous capabilities to integrate with disrupting technologies.

Providing ambitious digital experiences to the partners has always been the objective of the Drupal experts at Opensense Labs and we have been doing that through a suite of services that we offer.

Ping us at [email protected] to build great digital solutions through the integration of Drupal and the healthcare technologies.

Oct 18 2018
Oct 18

We love to say your Drupal website capabilities are unlimited, but even more than that we love to provide examples. One of them is the Drupal Rules module. It can be compared to a whole team of smart and tireless robot assistants that do necessary things at right moment on your website. They welcome your guests in, deliver important messages, remind you of events, and much more — from the simple to the most complicated scenarios. So let’s take a closer look at how the Drupal Rules module works to make Drupal’s strengths even greater.

The fundamentals of the Drupal Rules module

The Rules contributed module lets you set up automated workflows on your website based on so-called reactive rules, aka ECA rules. ECA stands for “event-condition-action.” So, you can create your reaction rules, each of which consists of:

  • an event
  • a condition
  • an action

The principle is: when some event takes place, and a certain condition is met, then a particular action is automatically triggered. For example:

  • Event: content is viewed by a user
  • Condition: the user role is Anonymous
  • Action: a message is shown on the site asking the user to log in to post comments

First, an event is created, and then the conditions and actions are added. In many cases, just an action is enough and the condition can be skipped — for example, users have logged in, irrespective of conditions, they can be shown a “welcome” message.

drupal rules module
 
drupal rules module
 
drupal rules module

The Rules module provides impressive lists of default events, conditions, and actions to select from. The lists depend on other modules that you also have installed. In addition, custom ones can be created by coding and added to your Drupal website.

Rules components are reusable, which means they can be added to other rules and even used by other modules.

To categorize your rules, you can use tags, which is very helpful when you have plenty of them on your website.

A few use cases of the Drupal Rules module

With the Drupal Rules, you can, for example:

  • remind a user to fill in the required fields before saving a node
  • thank a user for posting content
  • tell a user that the content is pending the moderator’s approval
  • notify the moderator about the newly posted content or comments
  • notify a user when someone comments on their content
  • notify a user when someone adds their content to bookmarks
  • remind a user about calendar events a certain time in advance
  • notify the administrators about emergency log entries
  • block a user for spamming or other bad behaviour
  • notify a user that a desired product is in stock
  • apply a discount on a product when it is applicable

and much more — as stated above, the sky is the limit to the possible workflows!

Cooperation with other Drupal modules

The Rules work closely with Drupal Commerce, Ubercart, Content Access, Flag, Organic Groups, Features, Token, Rules Link, Rules list conditions, Views Rules, Rules Forms, Conditional Rules, and many other modules, so the most interesting scenarios are provided.

The Rules module in Drupal 7 and Drupal 8

In Drupal 7, the Rules module requires the Entity API contributed module, while in Drupal 8, it needs the Typed Data to work with.

Its UI has also changed considerably. One of the main changes is that in Drupal 8 you do not see the traditional Drupal 7’s “Replacement patterns” link when specifying the Condition and Action values. You can put the values in either by data selection mode (which shows hints upon clicks on the field) or by direct input mode.

The Rules module in Drupal 7 and Drupal 8

The Rules in Drupal 8 is still in its alpha state, so it is not 100% ready for production sites. This is a complex module, so porting it to Drupal 8 is a cumbersome task.

To recap

The Rules module requires careful use and experience, especially when it comes to complex cases. That’s why it is better to entrust the Rules creation to a solid Drupal team.

They can also advise you what kinds of workflows can be created for your particular business goals. Whatever you need that might be missing in the default Rules features can be added by custom code.

For all this, you are welcome to contact our expert Drupal support firm!

Oct 18 2018
Oct 18

Various media, like videos, audios, or images, make your website really engaging. They fill it with colors, music, vivid impressions, and exciting experiences. And Drupal 8 offers new great options for media handling, which make it a leading CMS in 2018. The latest version, Drupal 8.6.0, brings especially interesting media features. We will start exploring the new media opportunities in Drupal 8 right now.

New Drupal 8.6.0 media handling features

Thanks to the Drupal Media Initiative, Drupal 8 now has new modules in core — the Media and the Media Library, which have inherited the best capabilities from a number of contributed modules. They introduce new and awesome concepts like media types, media fields, reusable media, and more.

So what can you do with them? First of all, you can:

  • add media of various types to your site
  • save and reuse media in your Media Library
  • place media inside your content
  • embed remote YouTube and Vimeo videos via an URL

and much more. Let’s consider these options in more detail.

Adding media of various media types to your site

To add media to your website, you can use the ready media types provided by Drupal. In Drupal 8.5.x, there were four media types — Image, File, Video, and Audio.

But Drupal 8.6.0 has prepared a new one — Remote Video, which lets you add third-party videos from YouTube and Vimeo. We will discuss it in more detail later in this post.

remote video media type

In addition to the default media types, you can create custom ones, and specify their media source.

Thanks to the media types, adding media is as easy as adding content, and can be done in Content — Add Media.

add media

Saving and reusing media in the Media Library

As of Drupal 8.6.0, all media can be conveniently stored in your Media Library for further reuse. You can easily access, publish, unpublish, save or delete all the media items in Content — Media.

For your convenience, media can be filtered by media type, publishing status, and name, as well as sorted by newest or oldest and descending or ascending alphabetical order.

One of the greatest things is that you can fetch media from the Media Library while creating your content — for example, to place video inside your blog post. We are moving on to this topic right now.

media library

Placing media inside your content via media fields

Media can be embedded into your content in the most natural way for Drupal — via fields. There is now a special new field type called Media that you can add to your content type (article, blog post, news etc.). When adding this field, you need to specify whether it will be Audio, Video, Remote Video, File, or Image.

the media field

the media field type

After that, on the content creation form, you will see the media embed option. The “Browse” button brings your Media Library to choose your media from.

adding media to content

Embedding remote YouTube and Vimeo videos with oEmbed

Here is one of the most exciting new options for media management in Drupal 8.6.0. It lets you embed remote videos from YouTube or Vimeo with just a URL.

Just add the Media field to your content type, specify it as “Remote Video,” arrange the fields to your liking — and remote videos will be ready to jump inside your content! Just as we described in the previous example, the videos can be fetched from the Media Library during content creation.

add remote video

add remote video to article

remote video embedded into article

Final thoughts

This is just a glimpse at media handling opportunities in Drupal 8 — particularly, Drupal 8.6.0. There are more additional settings for formatting your media, creating custom fields to pull more special data from the source, and many more.

The sky is the limit on your options, and the Media features are hot off the press and constantly developing.

To enjoy all these new features, you need to update your website to the innovative Drupal 8.6.0. For this, as well as for creating the perfect media setup, feel free to contact our Drupal support firm!

Oct 18 2018
Oct 18

Having a map integrated into a website is a huge advantage for business owners, especially for those with brick-and-mortar locations. This helps your customers to find you easily. Google Maps is probably the most popular mapping service and having it embedded into your website will definitely be an advantage for your business.

Drupal has amazing possibilities to help you solve this issue. Whether you do this by using Drupal 8 modules or find other alternative technique, the process is going to be simple and easy. We’ve prepared a guide for you on how to implement Google Maps Data into your Drupal 8 website in different ways.

Methods to integrate Google maps into your Drupal 8 site

Embed Maps

The first way to include Google Maps on your website is to embed them. It is maybe the easiest and the least time consuming way to have Google Map Data shown on your website.

How to embed Google Maps to your Drupal 8 website

The first step is to choose a location you want to show on your website. To do this, you should visit Google maps and find a place you’d like to provide.

How to embed Google Maps to your Drupal 8 website

After a searched location appears, press the Share button. In the opened window choose “Embed Map” and copy the whole <iframe> code.

How to embed Google Maps to your Drupal 8 website

Then you should create a basic page and give it a title.

How to embed Google Maps to your Drupal 8 website

The next thing to do is to insert a copied code into a created page. Note that it will work properly only if you choose Full HTML in the drop down Text format. After that, don’t forget to save changes.

How to embed Google Maps to your Drupal 8 website

The Map will be shown on your website as soon as the page is published.

How to embed Google Maps to your Drupal 8 website

Simple Google Maps Module

Simple Google Maps module is really easy to manage. The main advantage is that you only need to give the address of a place and a map will appear on your website. The module may be installed in different ways. Let’s look at how to downlaod and install it.

How to integrate Google Maps to your Drupal 8 website with Google Maps Module

Log in into your Drupal website as an admin. Go to Modules and click on Install new module.

integrate Google Maps to your Drupal 8 website with Google Maps Module

Find Simple Google Maps module on Drupal.org and copy the link for download tar.gz for Drupal 8.

integrate Google Maps to your Drupal 8 website with Google Maps Module

Go to Install new module page and enter the copied link to Install from URL field and press the Install button.

integrate Google Maps to your Drupal 8 website with Google Maps Module

After module installation, find this one, enable it and save changes.

integrate Google Maps to your Drupal 8 website with Google Maps Module

The module is enabled and the next step is to create a new field to show a map. Go to Structure → Content type. After that, add a new content type, and give it a name.

integrate Google Maps to your Drupal 8 website with Google Maps Module

As soon as a content type is created, go to Manage fields and add a new field with type Text (plain). Then save changes.

integrate Google Maps to your Drupal 8 website with Google Maps Module

After the settings are saved, go to Manage fields, click Manage display and check whether it is displayed on your page. Select Google Map on the one-line format from a drop-down.

integrate Google Maps to your Drupal 8 website with Google Maps Module

To manage the sizes of the map and addresses shown on your page by default, go to the config area (press the button on the right).

integrate Google Maps to your Drupal 8 website with Google Maps Module

The next step is to add a node. Click on Content → Add content and choose the content type you’ve added. Insert the title for your page. After that, in the newly created field enter an address you’d like to show on your map and save changes.

integrate Google Maps to your Drupal 8 website with Google Maps Module

After the page is created, Google Maps will be displayed on it.

integrate Google Maps to your Drupal 8 website with Google Maps Module

Geolocation Field module

Geolocation Field module is probably the most frequently used module when we talk about Google Maps integration. In short, it brings special field types for storing information about geolocation. Moreover, it has extended possibilities and enables mapping, connecting it with the desired content types.

How to integrate Google Maps to your Drupal 8 website with Geolocation Field module

The first step is to install a module. You can use the method described above.

After installing it, all you need to do is to add the Geolocation field to the content type. For this, go to Manage fields while creating a new content type and choose the Geolocation field type.

integrate Google Maps to your Drupal 8 website with Geolocation Field module

The next thing to manage is how the map will be viewed. Go to Manage from display page and choose the Geolocation Google Geocoder from the drop-down menu.

integrate Google Maps to your Drupal 8 website with Geolocation Field module

After that, go to Manage display and choose Geolocation Google Maps API - Map from a drop-down in address field. Then a map will be displayed on your page.

integrate Google Maps to your Drupal 8 website with Geolocation Field module

After a node is created, the map will be shown.

We’ve described 3 ways to integrate Google Maps Data into your Drupal 8 website. Thanks to the simplicity and flexibility of Drupal CMF, it is quite easy to perform. In case you don’t want to do it on your own or have troubles with Google Map Data integration into your Drupal 8 website, let us know and our Drupal maintenance company will assist you.

Oct 18 2018
Oct 18

As a CMS, Drupal has always been basking in compliments. It is the most powerful, the most secure, the most flexible — the list of Drupal strengths could go on. However, all this is not enough to stay current. After all, time moves fast. So what makes a truly cool CMS in 2018, loved by customers, site admins, and developers? Does Drupal fulfil this, and how? It’s time for a little investigation!

What lets Drupal remain a major CMS in 2018?

“The reason Drupal has been successful is because we always made big, forward-looking changes.” This quote is from Drupal founder Dries Buytaert.

The future-oriented changes in Drupal’s latest version, Drupal 8, really left everyone speechless ‑ so much that, when discussing them, you simply do not know where to start.

The particular quote by Dries was part of his article about Drupal’s new architecture, so let’s start with that.

Brand-new architecture and modern concepts

A successful CMS in 2018 must be in line with the most modern programming concepts, have a highly consistent, clean, and reusable code.

To achieve all this and more, Drupal adopts OOP (object-oriented programming), Symphony components, and Twig template engine, as well as polished its APIs, rebuilt its core, and more. Developers applaud, and customers enjoy more efficient processes!

Mobile perfection

According to Statista, the share of mobile phone website traffic jumped from 0.7% in 2009 to 52.2% in 2018. The mobile audience is key already! Modern CMSs cannot ignore that.

Dries Buytaert said that if he built Drupal from scratch again, he would build it for mobile experiences first. “Mobile-first” — that’s the philosophy of Drupal 8.

Responsive core themes, responsive admin interfaces, awesome built-in modules for responsive development are just some points of Drupal 8’s mobile perfection. Your users will enjoy their mobile experiences on any device.

The era of dynamic features and JavaScript

In 2018 and beyond, websites with rich, dynamic, and real-time features are ahead of others. And anywhere you find all these features together, you will also find some representatives of the JavaScript “family.”

React, Vue, Angular, Node, Ember, and other tools are more and more often mentioned in connection with Drupal. It cooperates perfectly with them, and it even planning to adopt of them in the near future. We are likely to see ReactJS as part of the Drupal family!

Beyond the shape of a website

In 2018 and beyond, you can have more than just a website. You can output your content to any imaginable applications, so your users stay with you in their natural environments.

Drupal 8 has an awesome ecosystem of third-party integration modules that provides the data exchange of your Drupal website with any other system. They also magically convert the data to the right format.

High speed with modern caching

For making websites fast enough to fly towards the future, Drupal 8 has excellent caching tools. Users will enjoy the flight!

The novel tool BigPipe uses an especially interesting approach to quick content delivery. The static elements come first, the dynamic ones come second, and the perceived loading speed is awesome.

Usability for editors

Drupal’s reputation as a developer-oriented CMS used to scare customer away a little. It was the other side of the “most powerful CMS” medal.

But now it’s time for editors to enjoy it as well!  Drupal 8’s new level of editor usability impressed even the most sceptical critics.

It is now very easy to apply quick edits right on the page, change block layout, enjoy handy content previews, drag and drop images, shape your toolbar to your liking, embed multimedia from various sources, and so much more.

Truly international

2018 is high time to overcome geographical boundaries! Millions of customers in different countries will be closer to you if your website speaks their language.

Drupal 8 offers a hundred languages, and a very smooth procedure for adding them to websites. Their interface translations are ready for you. And you can also translate every inch of your website — absolutely anything from configuration to content.

High level security

In 2018, cybercriminals have become more ingenious, so CMSs have to be stronger. Drupal is considered the most secure CMS.

This is achieved by continuous security updates that quickly catch any vulnerabilities, the “collective intelligence” of a watchful community, an especially vigilant Security Team, strict standards for submitting contributed code, refined user roles and permissions, great possibilities for data encryption, strong security modules, and more.

Accessibility for everyone

In 2018, it’s a must to provide a smooth experiences for users with visual or other impairments. There are important WCAG 2.0 and ATAG 2.0 accessibility guidelines, and Drupal 8 adheres to them. In particular, the website structure and content are more understandable to screen readers and other assistive technologies.

Semantic HTML5 with WAL-ARIA properties, useful alerts, more convenient forms, compulsory ALT tags that describe images, high contrasts, and other techniques enhance web accessibility.

To recap

That said, 2018 has a CMS that follows all the trends. And, knowing Drupal, we understand it’s just the beginning. Many groundbreaking changes are very close.

Would you like to enjoy all awesome novelties with Drupal? Contact our web development team!

Oct 18 2018
Oct 18

If you've got a Drupal site, which you need to update quickly (for example, to address last night's security advisory!), here's a tip. Run this from the command line:

curl 'https://github.com/drupal/drupal/compare/7.59..7.60.patch' | patch -p1

This assumes your codebase was on Drupal 7.59 and you're currently in Drupal's root directory. If you're currently on a different version, adjust the numbers in the patch URL accordingly.

Don't forget to still run database updates via /update.php or drush updatedb !

The Drupal repo on github is a verbatim mirror of the official Drupal repo from git.drupal.org. Github supports comparing arbitrary git references, with the /ORGANIZATION/REPO/compare/GITREF..GITREF URL, where the reference can be a tag, branch or revision. Adding '.patch' to the end of a github URL formats the page as a patch. So I've made use of these three things to give me an exact patch of the changes needed to update Drupal core's code.

We normally use Composer (especially for Drupal 8) or Drush make to manage our codebases, including core, which is definitely the ideal, but sometimes projects aren't organised this way for whatever reason. A simple patch like this avoids the need for drush, or even potential mistakes that can be made when running drush pm-updatecode (such as removing any customisations within core directories).

This method is even compatible with any core patches you already have in place, which normally have to be to re-applied when upgrading core by other methods. If you have any existing changes to core that are incompatible, you'll get errors about not being able to apply anyway, which you can then resolve manually.
(Any patches/hacks you make to core should be documented clearly somewhere, so drush make or composer-patches would be better in that scenario though!)

You can use this method to patch from github even if your core codebase is not in version control. But if it is... always check your diffs before committing! :-)

Oct 18 2018
Oct 18

by David Snopek on October 17, 2018 - 11:55pm

As you may know, Drupal 6 has reached End-of-Life (EOL) which means the Drupal Security Team is no longer doing Security Advisories or working on security patches for Drupal 6 core or contrib modules - but the Drupal 6 LTS vendors are and we're one of them!

Today, there is a Moderately Critical security release for the Search Autocomplete module to fix a Cross Site Scripting (XSS) vulnerability.

This Search Autocomplete module enables you to autocomplete textfield using data from your website.

The module doesn't sufficiently filter user-entered text among the autocompletion items leading to an XSS vulnerability.

See the security advisory for Drupal 7 for more information.

Here you can download the Drupal 6 patch.

Note: We only support the 6.x-2.x branch (we don't have any customers on the 6.x-4.x branch), so that's the only one we're going to do.

If you have a Drupal 6 site using the Search Autocomplete module, we recommend you update immediately! We have already deployed the patch for all of our Drupal 6 Long-Term Support clients. :-)

If you'd like all your Drupal 6 modules to receive security updates and have the fixes deployed the same day they're released, please check out our D6LTS plans.

Note: if you use the myDropWizard module (totally free!), you'll be alerted to these and any future security updates, and will be able to use drush to install them (even though they won't necessarily have a release on Drupal.org).

Oct 17 2018
Oct 17

by David Snopek on October 17, 2018 - 6:17pm

As you may know, Drupal 6 has reached End-of-Life (EOL) which means the Drupal Security Team is no longer doing Security Advisories or working on security patches for Drupal 6 core or contrib modules - but the Drupal 6 LTS vendors are and we're one of them!

Today, there is a Critical security release for Drupal core to fix multiple vulnerabilities. You can learn more in the security advisory:

Drupal core - Critical - Multiple Vulnerabilities - SA-CORE-2018-006

The following vulnerabilities mentioned in the security advisory also affect Drupal 6:

The first vulnerability is in Drupal 6 core, however, the 2nd is only present in the contrib modules: htmlmail, and mimemail. If you don't use those modules, you're not affected by the 2nd vulnerability.

If you have a Drupal 6 site, we recommend you update immediately! We have already deployed the patch for all of our Drupal 6 Long-Term Support clients. :-)

If you'd like all your Drupal 6 modules to receive security updates and have the fixes deployed the same day they're released, please check out our D6LTS plans.

Note: if you use the myDropWizard module (totally free!), you'll be alerted to these and any future security updates, and will be able to use drush to install them (even though they won't necessarily have a release on Drupal.org).

Oct 17 2018
Oct 17

In my last blog post, I explained, "Why I am one of the top contributors to Drupal?" and examined my ongoing contribution to the Webform module for Drupal 8. My post was inspired by Dries Buytaert's annual who sponsors Drupal development post. Now I want to dig into that list of who’s and acknowledge other individuals contributing to Drupal.

Let's explore some of the top contributors to Drupal.

I am deliberately limiting the discussed contributors to people that I have had minimal or no direct interaction with online or in-person. I want to explore their contributions based on their online presence versus directly interviewing them.

Every contributor's online presences tell a story

The Drunken Monkey

I genuinely value Drunken Monkey's contribution to Drupal's Search API module.

This module provides a framework for easily creating searches on any entity known to Drupal, using any kind of search engine.

We rarely appreciate an API module until we have to start using them and diving into the code. The Search API module for Drupal 8 is a magnificent example of great code which conquers one of the hardest challenges in programming: naming things.

For a recent project, I was diving into Search API's code, and Drunkey Monkey helped me out when I discovered Issue #2907518: Breakup tracking of content entities into smaller chunks to prevent memory limit issue. For the developers out there, if you read through the issue to the final patch, you will notice that Drunken Monkey manages to even improve some APIs while fixing the problem.

The Search API Guy

The first place to understand who is who in the Drupal community is people's user profiles. The most immediate thing that stands out about Drunkey Monkey is that he is…

The Search API Guy

This statement is something I can relate to because I have also promoted myself as "The Webform Guy for Drupal 8". I learned from maintainers like Drunken Monkey that becoming the person behind a Drupal project is a valued role in the Drupal community. On a related note, Thomas and I have both been members of Drupal community for 10+ years and this fact indicates that it can take time to find one's niche in the Drupal community.

Drunken Monkey is Thomas Seidl

Thomat Seidle (drunken monkey)

Thomat Seidle (drunken monkey)

Thomas Seidl is a developer from Vienna, Austria, and has been involved in Drupal and search since 2007.

-- https://drunkenmonkey.at

Thomas is the man behind the code and his personal website promotes his contribution to Search API and offers his paid support services. His promotion of paid support directly contributed to his sponsored work porting Search API to Drupal 8.

Acquia generously agreed to fund all available time for both Joris Vercammen (borisson_) and me in December and January to work on this port and related modules

-- https://Drunken Monkey.at/blog/search_api_d8_alpha_12

Thomas was a student who became a mentor

Thomas' code and ability to maintain something as complex and important as Search API hints that he has professional training. Thomas has a Master's degree in Computer Science and a Bachelor in Engineering Physics.

Being mentored and mentoring is the not so secret sauce to Open Source. Thomas has some experience doing both because he participated as a student in four Google Summers of Code and twice as a mentor.

Not surprising, Google Summer of Code has helped many other people begin their Drupal careers /experience.

What was Thomas's first foray into the world of Drupal?

Thomas' first post and patch to Drupal

Looking at someone's very first post on Drupal.org can lead to many conclusions or thoughts. Some people test the Drupal community's waters by asking a simple question. Others post an issue and then disappear. Then there is someone like Thomas who hits the ground running. His very first post on Drupal.org from 2007 is…

Issue #176124: Fatal error when running all tests
https://www.drupal.org/project/simpletest/issues/176124

I started to smile when I read this issue because first off, Thomas found an existing ticket that was impacting him and then proceeded to provide a patch. It’s also worth noting that he was fortunate to have two active Drupal contributors, Rok Žlender and Peter Wolanin, in his sphere.

Finally, and definitely worth noting, Thomas, the Search API guy, had many individuals and organizations helping him. He highlights and acknowledges them on the Search API project page. Giving props to the collaborating irons in the fire, both big and small, demonstrates a wholly appreciative understanding of what this is all about.

“Our thanks goes to Acquia, MD Systems, Intracto and a few smaller donors and clients for financial support. Thanks as well to the large number of people who helped with development tasks and patches.”

-- Thomas Seidl

Who is volkswagenchick?

AnyJune Hineline (volkswagenchick)

AnyJune Hineline (volkswagenchick)

Let's immediately acknowledge that 'volkswagenchick' is a pretty identifiable username. Appending the word 'chick' to one's username allows one to stand out in the sea of geeky names like 'optimusprime' and 'frodo'. I am not sure if AmyJune Hineline is German, but I was able to learn that she like Volkswagens and lives in the US.

Volkswagenchick is AmyJune Hineline

AmyJune's profile on Drupal.org is fairly simple but links to a wealth of resources. Immediately three things stand out on AmyJune's Drupal.org profile - she is the Community Lead and a Drupal Site builder with Hook 42 and has been a member of Drupal.org for less than three years.

Wow, three years into her Drupal career and AmyJune is one of the top contributors to Drupal.

Hook 42 contributes to Drupal

After reading and learning about Hook 42, I am tempted to do a dedicated follow-up post exploring the organizations that contribute to Drupal but for the moment, I think Hook 42 deserves credit and gratitude for their employee’s role and contribution to the Drupal community. And I’m not the only one who seems to think so - Hook 42 is making a major contribution to Drupal and does appear in Dries blog post.

Our organization is not only using Drupal, but also contributes back to the community and to the project by writing modules and themes, participating in forums, presenting at conferences, organizing Drupal events, and more.

-- https://www.hook42.com/team

AmyJune has a mentor

Besides having a great employer, AmyJune found one of the best instructors/mentors in the Drupal Community: Mike Anello (ultimike). AmyJune credits Mike’s Drupal Career Online for helping to get her started with her career in the Drupal community. A while back, I talked about Mike's Drupal Career Online.

I’m specifically intrigued by his Drupal Career Online for individuals; It's a 12-week, instructor-led online course that goes deep and broad into the technology, community engagement, and hands-on exercises to give you a rock-solid foundation for a successful Drupal career. Mike's helping Drupal newbies become Drupal rockstars. He’s helping to grow the Drupal community by inspiring and helping individual developers to join our community. "He is helping the little guy in our community."

-- https://www.jrockowitz.com/blog/little-guy

AmyJune just proved that Mike is helping Drupal newbies become Drupal rockstars.

AmyJune has an amazing story

AmyJune is a prolific blogger who has chronicled her journey.

Drupal was the feel good adventure I needed to move on. Being open-source and free, it allows more organizations, like nonprofits and higher-eds to have custom websites built to their specific needs while maintaining smaller budgets.

-- From Nurse to Drupal Programmer: an Intern's Journey

Reading AmyJune's blog posts and understanding her journey makes it clear to me that some of the top contributors to Drupal are not just coders but people who are an integral part of the Drupal community.

AmyJune's first issue on Drupal.org

Right out of the gate, AmyJune posted a very simple constructive comment:

Issue #2450191: Be more specific when listing dependencies so that `drush en office_hours` can work
https://www.drupal.org/project/office_hours/issues/2450191

AmyJune received a perfect response from John Voskuilen (johnv) the Office Hours maintainer.

Thanks for the feedback. Hope you enjoy this module.

Little did John know that he was also helping AmyJune on her journey to becoming a leader in the Drupal Community. Ironically and related to this first issue, AmyJune went on contribute many patches which improved the README.txt files for dozens of contributed modules.

What does IMCE stand for?

IMCE is an image/file uploader and browser that supports personal directories and quota.

IMCE

IMCE

Nowhere on the IMCE project page does it state what the heck does IMCE stands for. I am not even sure it is an acronym. Even with Drupal's amazing improvements to media and file handling, IMCE has continued to be one of Drupal's most installed modules.

Besides the module's name, the even bigger mystery is the project's maintainer, ufku. I would like to thank them for saving my butt on numerous occasions where the IMCE provided the exact functionality needed to fulfill a project's requirement. Ufku does not seem interested in racking up commit credits, but I’m intrigued to explore who they are and say thanks

Who is Ufku? The Unknown Drupaler

ufku

ufku

Ufku has been maintaining IMCE for over 12 years. They have been a member of the Drupal community for 14 years. Ufku's user profile is sparse and their personal website just includes an IMCE demo with README files. I even desperately checked ufku.com in the whois database and there is no identifying information

Ufku has made an awesome contribution to Drupal for many years and does not seek any acknowledgment.

Let's just say thanks to Ufku

Clearly, Ufku's commitment to IMCE shows that they value Drupal. I hope that Ufku's tremendous and continuous work on IMCE is on their resume because it demonstrates a fantastic commitment and contribution to Drupal and Open Source.

Ufku whoever you are, I want to say thanks.

Ufku first post on Drupal.org

I am hesitant to pry through Ufku posts on Drupal.org because clearly, they want to remain somewhat anonymous.

Ufhu's first forum post, one-click language switch without a module (drp-4.5), shows that from day one they wanted to share some code with the Drupal community.

There are so many more contributor stories out there

Every contributor to Drupal has a story and there are many ways to explore them. Personally, I always start with people's Drupal.org profile and if I get curious enough, I start hunting for videos and podcasts.

Hear more about AmyJune and Thomas

Below are some links to learn more about AmyJune and Thomas.

AmyJune Hineline (volkswagenchick):

Thomas Seidl (drunken monkey):

For now, ufku can be called 'The Unknown Drupaler'.

Learn more about Drupal contributors

Below are some blogs and podcasts where you can learn more about the people who contribute to Drupal:

Saying Thanks

I hope the biggest lesson you can take away from this blog post is…

Behind every line of Open Source code is a person or organization. Since the code and its history is Open Source, you can find out who that person is and thank them.

Almost done…

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

OKSubscriptions powered by Strikingly

Oct 17 2018
Oct 17

The Drupal Security team has a core and contrib release window on the 3rd Wednesday of the month. This window normally ends at 5pm Eastern (9PM UTC).

Due to unforeseen circumstances, we are extending the current window we are in by 3 hours until Oct 17th, 2018 at 8pm Eastern (11:59PM UTC).

Oct 17 2018
Oct 17
  • Advisory ID: DRUPAL-SA-CONTRIB-2018-006
  • Project: Drupal core
  • Version: 7.x, 8.x
  • Date: 2018-October-17

Description

Content moderation - Moderately critical - Access bypass - Drupal 8

In some conditions, content moderation fails to check a users access to use certain transitions, leading to an access bypass.

In order to fix this issue, the following changes have been made to content moderation which may have implications for backwards compatibility:

ModerationStateConstraintValidator Two additional services have been injected into this service. Anyone subclassing this service must ensure these additional dependencies are passed to the constructor, if the constructor has been overridden. StateTransitionValidationInterface An additional method has been added to this interface. Implementations of this interface which do not extend the StateTransitionValidation should implement this method.

Implementations which do extend from the StateTransitionValidation should ensure any behavioural changes they have made are also reflected in this new method.

User permissions Previously users who didn't have access to use any content moderation transitions were granted implicit access to update content provided the state of the content did not change. Now access to an associated transition will be validated for all users in scenarios where the state of content does not change between revisions.

Reported by

Fixed by

External URL injection through URL aliases - Moderately Critical - Open Redirect - Drupal 7 and Drupal 8

The path module allows users with the 'administer paths' to create pretty URLs for content.

In certain circumstances the user can enter a particular path that triggers an open redirect to a malicious url.

The issue is mitigated by the fact that the user needs the administer paths permission to exploit.

Reported by

Fixed by

Anonymous Open Redirect - Moderately Critical - Open Redirect - Drupal 8

Drupal core and contributed modules frequently use a "destination" query string parameter in URLs to redirect users to a new destination after completing an action on the current page. Under certain circumstances, malicious users can use this parameter to construct a URL that will trick users into being redirected to a 3rd party website, thereby exposing the users to potential social engineering attacks.

This vulnerability has been publicly documented.

RedirectResponseSubscriber event handler removal

As part of the fix, \Drupal\Core\EventSubscriber\RedirectResponseSubscriber::sanitizeDestination has been removed, although this is a public function, it is not considered an API as per our API policy for event subscribers.
If you have extended that class or are calling that method, you should review your implementation in line with the changes in the patch. The existing function has been removed to prevent a false sense of security.

Reported by

Fixed by

Injection in DefaultMailSystem::mail() - Critical - Remote Code Execution - Drupal 7 and Drupal 8

When sending email some variables were not being sanitized for shell arguments, which could lead to remote code execution.

Reported by

Fixed by

Contextual Links validation - Critical - Remote Code Execution - Drupal 8

The Contextual Links module doesn't sufficiently validate the requested contextual links.
This vulnerability is mitigated by the fact that an attacker must have a role with the permission "access contextual links".

Reported by

Fixed by

Solution

Upgrade to the most recent version of Drupal 7 or 8 core.

Minor versions of Drupal 8 prior to 8.5.x are not supported and do not receive security coverage, so sites running older versions should update to the above 8.5.x release immediately. 8.5.x will receive security coverage until May 2019.

Oct 17 2018
Oct 17

Your browser does not support the audio element. TEN7-Podcast-Ep-041-Steve-Persche.mp3

It is our pleasure to welcome to the TEN7 podcast Steve Persch, lead developer advocate at Pantheon.

Here's what we're discussing in this podcast:

  • Steve's background
  • Celebrating a Drupal birthday
  • Theater background and blogging
  • WordPress experience
  • Improv comedy and Comedy Sports gaining self confidence
  • Experience at Palantir in Chicago
  • Contributing to Workbench
  • Discovering Git
  • Teaching WordPress' Gutenberg editor
  • What the WordPress & Drupal communities can learn from each other
  • The 2018 Twin Cities Open Source CMS Unconference
  • WordPress, Drupal & Joomla
  • Supporting Backdrop
  • Alexander Hamilton
  • Steve Vector (alias)

TRANSCRIPT

IVAN STEGIC: Hey Everyone! You’re listening to the TEN7 Podcast, where we get together every fortnight, and sometimes more often, to talk about technology, business and the humans in it. I am your host Ivan Stegic. In this episode of the Podcast, Steve Persch, lead developer advocate at Pantheon. Steve has been on Drupal.org for at least 11 years, and before Pantheon he was at Palantir in Chicago. Steve! It’s my pleasure to welcome you to the Podcast.

STEVE PERSCH: Well, thanks for having me on! I guess I just missed my Drupal birthday again. The last one I remembered was 10 years. (laughing)

IVAN: Yea, it looks like more than 11 years. That’s a long time!

STEVE: Yea! That makes sense for what I was doing 11 years ago.

IVAN: How many versions ago is that?

STEVE: Well, I got into Drupal with 5. I think 5.0 was the current version when I started working with Drupal.

IVAN: I think that’s when I started too. Let’s see, 11 years ago would be 2007, so that’s when TEN7 was founded, so that would’ve been Drupal 5 for us, as well, I think.

STEVE: Yea. I’ve worked with WordPress a little bit before that, and, the first time I remember distinctly hearing the word Drupal was at an Arts & Business council of Chicago event. I was on a panel speaking about some WordPress sites I had made for a theater company, and one of the questions from the audience was basically, “WordPress seems to work with these blogs that you’ve talked about, what would be used for something more complex?” And, someone else on the panel said, “well, obviously, Drupal is the thing for that.” I made a mental note, started looking into Drupal because I knew I wanted to be building more complex sites.

IVAN: So, tell me more about those WordPress sites that you’d been involved in, prior to that. How did you get introduced to WordPress?

STEVE: I got introduced to WordPress because, well I wasn’t asked, I volunteered myself to build some blogs for a theater company when I was in college, between my junior and senior year I had a summer internship with the Looking Glass Theater Company in Chicago. It’s a prominent theater company that came out of the college that I was going to. I was super into what they were producing, very happy to have an artistic department internship, which mainly meant things like filing headshots, and running auditions, things like that. About three weeks into the summer internship I heard one of the artistic directors just kind of, muse aloud that they really should have a blog, because that was the thing to have back then. In the nineties they had produced a physical 'zine, and this artistic director, I think, was missing that kind of creativity and wanted a blog, and I had just taken a class on web development, so I volunteered myself, and basically, that summer changed from regular artistic department internship to Steve figures out how to build WordPress sites by the end of the summer.

IVAN: And that was WordPress early on, I would imagine, with version 2 maybe?

STEVE: Yea, 2 something.

IVAN: 2 something, wow! So, you’re obviously studying some sort of art degree then?

STEVE: Yea. I was a theater major at the time.

IVAN: Wow! A theater major. And now you are a lead developer advocate. That’s almost as crazy an arc as Drew's.

STEVE:  I know. Well, I think there are a lot of people in the Drupal community with a similar arc of basically being the person at some kind of organization, who somehow became responsible for the website, or volunteered themselves to be responsible for the website, and then just kept going from there. I think for, certainly myself, and I think a lot of people in the Drupal community, the web development career path looked more appealing then whatever was the other career path.

IVAN: So, let’s actually take a step back. I want to find out where you were born, and where you grew up. So, prior to landing in the WordPress development business in liberal arts college, where did you grow up?

STEVE: Yea, so, I spent almost all my life very close to Lake Michigan. So, I was born in Milwaukee, Wisconsin, same home all the way from birth through graduating high school, and then to Northwestern University in Evanston, just North of Chicago, then moved to Chicago for seven years or so, back to Milwaukee for four years, and now Minneapolis.

IVAN: So, tried and tested Midwesterner.

STEVE: Exactly. Yea. Love the midwest.

IVAN: That’s awesome. I love it too! So, you went to high school in Milwaukee, made a move to Northwestern, and studied liberal arts. And, you did an internship at a theater company, and somehow this led to Comedy Sports, right? I saw that in your bio as well.

STEVE: Yea. Comedy sports was even earlier. So, Comedy Sports is an improv company that started in Milwaukee, there are branches all over the country, though. The way I like to explain Comedy Sports for people who aren’t familiar with it, is by referencing Whose Line is it Anyway, pretty much everyone has seen that at some point in time. And, on that show they say everything’s made up and the points don’t matter, but in Comedy Sports, the points do matter. It’s the same kind of short form improv but it’s done as a faux competition. Basically, there are three people on two different teams, the red team and the blue team, and they’re competing for audience laughs and points, and things like that.

IVAN: And this was in high school?

STEVE: It started in high school, yea. I first saw it when I was in grade school and the high school Comedy Sports team came to visit my grade school, and do a show, and I thought that looks amazing, I want to do that. It further confirmed my choice of high school. I decided to go to the same Catholic high school that my parents had gone to. My brothers decided to go to a different Catholic high school in the area, but I wanted to go to the one that had a much stronger arts program. It was also coed, that was a factor in the decision.

IVAN: So, unlike me, you saw them do improv, and you thought, cool  ! I totally want to do that! (laughing) I look at that and I’m like, “Wow, that’s really scary. I don’t know how I could do that. I should probably do that to put myself outside of my own comfort zone.” What was attractive about it?

STEVE: I think what was attractive about it for me was, knowing that it was outside of my comfort zone. That it would push me to do something that wasn’t very natural. There are a lot of people in improv who are, natural, extroverts in doing improv, and it’s just kind of a natural extension of their normal personality. For me, it was more of an effort. It took me outside of my comfort zone, but it was something that could be practiced, it was at least in Comedy Sports, something very structured, so it is, of course, loose and comedic, and you’re making things up, but, especially with short form improv, there is a lot of structure there that I could hang on to and feel like I knew what was going on.

IVAN: The structure to me sounds really interesting to be put around something that’s supposed to be unstructured.

STEVE: Yea. One thing I’ve noticed. I did improv starting in high school, age 15 or something. I was heavily involved in improv really all the way through my time in Chicago, which ended in 2014, and then coming back to Milwaukee in 2014. I did start performing at Comedy Sports again for about a year and trailed off as I started the job at Pantheon and had a baby, basically, other things became more important. And, all through that time I found that people not doing improv assumed that there must be some trick to it, that we must be planning something out in advance. But, it’s not the content that gets planned out in advance. You don’t meet backstage and say “alright, we’re going to do a scene about a baker. And, the baker’s going to go on a journey, or something like that.” You might talk about the pace at which you want to play, you might talk about the styles or techniques, the improv techniques that you want to use, but the content is always made up on the spot.

IVAN: How do you think it’s helped you with your professional career? I’ve seen you give very many talks, and I’m always impressed by how eloquent you are. I’ve seen you on panels before. They must be related to the training you’ve had in improv, at Comedy Sports.

STEVE: Absolutely! The improv training gives me confidence to get on stage without a full plan. And, maybe that’s not always a good thing. Maybe I should be stepping on stage at a conference or something with more of a plan. But, it does help just reduce that anxiety, that I know I would be feeling, and do still feel, speaking at a conference or speaking at different work events. I still feel that anxiety to some degree but knowing that I have that improv background gives me more confidence to just start, then just do it.

IVAN: So, spending time in the theater, you started getting involved in WordPress. How long were you in WordPress before that panel discussion and someone mentioned Drupal, did Drupal become something serious to you?

STEVE: About a year. So, it was the summer of 2006 where I was starting with that WordPress site launched by Fall of 2006. Maintained those sites for a little while, and basically that senior year of college was a transition for me. I finished all my graduation requirements in fall, and just kind of pretended to be an undergrad through June, continued with my improv group, produced and directed a play, did all the undergrad activities, just didn’t go to any classes other than my acting class. That then gave me more free time, to take on web work on the side. So, during that year I maintained a static HTML site, which gave me a great appreciation for server-side languages. Hearing Drew mention maintaining 5,000 static pages, I thought, “oh yea, that was formative for me too, having to maintain  the static HTML website for the theater company, that was however many hundreds of pages, and seeing there are menus that are kind of the same, but inconsistent, presumably because no one was paying too close of attention, and now it’s my job to pay attention to such things, and I’ll put it in PHP includes and eventually just switch it over to Drupal.” So, it was about a year, I guess, of thinking WordPress is the thing to switching to Drupal, as the thing that’s going to help me build what I need to build.

IVAN: And, was that about the same time that you started at Palantir? Or, was there something in between there?

STEVE: Four years in between. So, I was a freelancer for a number of years. I did some subcontracting, started with a company called Mighty Bytes, got to have those pun names. Started there in 2009 and worked on, what for me then, was the biggest website that I had ever worked on. It was a music startup. I don’t think it’s around anymore called Music Dealers. Basically, the idea was if you are an independent music producer, or band or singer, or whatever, you could upload your MP3’s to this site, Music Dealers will then try to sell that to McDonalds, or film producers, basically, anyone making commercials, televisions, movies, and they’ll just give you a direct 50/50 cut of the royalties. That was an education in complex websites, kind of, trial by fire.

IVAN: Yea. So, then you started at Palantir in Chicago.

STEVE: Two years later.

IVAN: Two years later. Ok. And, had you ever contributed to Drupal.org before starting at Palantir? How soon did you start?

STEVE: In bits and pieces. So, in that time at Mighty Bytes, I was “the Drupal guy” and I would go to Drupal meetups, and I spoke at Drupal Camp Chicago in 2008, so I did have some community role and a few minor patches, but I kind of felt intimidated knowing that there were companies out there like Palantir, who had developers who, at least by appearance, were much deeper, and Drupal knew much more than me, and looking back there were things I was working on at Mighty Bytes that I could have, should have contributed back to Drupal.org, but for whatever reason I thought, well maybe this isn’t good enough, I need to work on it more, and would never get contributed. But, at San Francisco, DrupalCon in 2010, that was the first time I distinctly remember getting that really positive, contributor feel. Someone from the White House was there and they showed a list of modules that the White House was using, and one of those modules was a module that I had a patch in, and that feeling of, “oh wow,” I mean, it was a tiny patch in rules module, but just knowing that I had contributed to a piece of something that was inside of the White House was very satisfying, and basically gave me the Drupal bug even stronger than I had it then.

IVAN: Yea, there’s something about being able to contribute code, and it actually being used in production and affecting people’s lives that really makes you stop and think about the real power of open source, and what we’ve created in this ecosystem. And so, you’re at Palantir and Workbench is this thing you start working on. Was that a problem that Palantir was trying to fix, by introducing Workbench? What’s the genesis of that idea?

STEVE: So, I joined Palantir the month before DrupalCon Chicago, where Workbench launched. I started in February 2011, Workbench was basically getting polished up internally. Essentially, it’s a suite of modules that helps with content, workflow and governance. So, it basically provided a better landing page dashboard for people who are signing into the site to work on the content. Basically, an improvement over that admin/content view that you get by default. In addition to that base module of Workbench that was basically just that, landing page set of views, and a grid sort of thing. There was Workbench Moderation which was meant for publishing workflows, a draft needs review, published sort of workflow. and then Workbench Access which allowed for different content editors to have permission to different sections of the site. It was made because there were, I think, three major projects running simultaneously at Palantir before I joined, a university, a museum, maybe two universities, I’m not quite sure. But a couple of large institutions that needed those things, needed the ability to section off different parts of the site, so that only the appropriate people could edit pages, and they needed an approval process, by which people could move from draft, to needs review, to published, and possibly additional custom states. So, when I joined Palantir, pretty much everything was written. There was some testing to do, some clean up to do, and I was basically able to spend my first month on the job leading up to DrupalCon Chicago, finishing off a couple patches, adding some documentation, I think, and starting to think ahead towards what additional functionality might go into these modules.

IVAN: It’s quite an exciting time to be joining a company when it’s releasing a new site or releasing a new module, and DrupalCon is in the same city as where you’re based.

STEVE: Yea, it went from DrupalCon San Francisco feeling like, “I’m not quite fully in this community.” I kind of felt like a bit of an outsider at DrupalCon San Francisco in 2010, to then being hired at the company that, the owners of Palantir, were the co-chairs of DrupalCon Chicago. Of course, Palantir at the time had a ton of people who were top contributors and had a bunch of sessions going on at DrupalCon Chicago, so it felt like a fast track to the inside. Ken Rickard, the author of Domain Access, was one of the main authors of Workbench Access, so, yea, for my first week on the job, he flew into Chicago from Georgia, and, basically, started mentoring me, getting me ready to contribute to those modules. I had never used Git before, so that was something I had to learn quickly.

IVAN: That’s a major thing. (laughing)

STEVE:  Yea. That’s my advice for learning Git, just start, and don’t go back. I sometimes reference Git as an easy thing to learn, when I talk with other developers, and they look at me funny, and I think, well, ok, I guess it was easier for me because it was just a hard transition from SVN at my old job to all Git at the new job, and I could always lean over the cubicle wall and ask somebody for help if I needed it.

IVAN: I remember the days of SVN and CVS even, before that, and boy, those were tough days. I was so glad when we discovered Git and decided to just standardize on that.

STEVE: Yea, everything got faster and easier.

IVAN: Yea. Absolutely.

STEVE: My first version control was just Dream Weaver, check in, check out.

IVAN: (laughing) I think that still exists, doesn’t it? It must exist.

STEVE: It must! Yea. I think so.

IVAN: Cool. So, fast forward to Minneapolis, with a stop in Milwaukee in between, and you’re now at Pantheon, and you’re not just exercising your Drupal skills, you’re actually bringing back all of the WordPress things you learned long ago, as well, right?

STEVE: I am, yes. So, at Pantheon we’re a platform for both Drupal and WordPress development, so, it’s nice to play in both worlds. In fact, at the past couple DrupalCons I’ve done WordPress focus sessions. At DrupalCon 2016 I did Lessons from WordPress Core with Andrew Taylor, one of my co-workers, and then this year we did, Andrew and I did another session on the Gutenberg editor that’s coming to WordPress core.

IVAN: Do you spend any time at WordPress conferences talking about Drupal?

STEVE: I try to. I don’t think I’ve gotten any of those sessions accepted myself, but plenty of my co-workers have done that.

IVAN: So, it always feel like we’re up against each other as CMSs, right? WordPress does this better, and Drupal does that better, and we really have genuinely, passionate people in both communities. Are we really that different as communities?

STEVE: No! Definitely not. Well, I go back and forth on that question. In my time at Pantheon, so I’ve been here three years, and the first few WordPress conferences I went to, I thought to myself, wow, these differences are so completely exaggerated. I’ve been deep in Drupal for years, and I’ve been hearing that WordPress is totally different, and they’re still on PHP 5.2, they have different spacing rules. How could we ever work together?” As I went to, I think it was WordCamp US, basically, the DrupalCon equivalent in 2015, I went to some contributor like days, before the main event, and just thought to myself, “oh, yea, these are developers working in a GPL, Land Stack, CMS, trying to solve pretty much the same problems for pretty much the same sets of clients, and we need to break down these walls that don’t need to separate us.” In those three years, I’ve gone back and forth, like I said, a little bit, thinking, there are some differences. WordPress, I think, has done a much better job of keeping the end user in the community. There aren’t many decisions made in Drupal core, made by people whose job it is to use Drupal, like, purely through the UI most of Drupal is driven by people who interact primarily with the code, and that just changes the priorities changes what gets built. I guess one of the main reasons that WordPress has just continued to grow in its adoption wall, Drupal is at a similar spot to where it was years ago.

IVAN: What do you think the top things are that we can learn from each other as a community?

STEVE: I think the main thing I’d like to see Drupal focus on, as far as a lesson from WordPress, is to keep that focus on the main end user, as I look at, say the, the initiatives that are currently happening in Drupal 8 core. A lot of them are, sort of, two sides of the same coin. So, there’ll be an initiative that is developer focused, and then a separate initiative that’s basically what that will mean for the end user, and in WordPress those would just be one in the same. And, actually, in WordPress right now, there’s pretty much just the one core initiative of getting this new Gutenberg WYSIWYG editor finished, and merged into core, whereas, Drupal is, I think, working on literally 11 or 12 different initiatives at once. And as far as what WordPress could learn from Drupal, the modernization that’s happened in Drupal’s PHP code base, has been beneficial, and the fact that the WordPress is still on PHP 5.2, holds some things back.

IVAN: Yea, it certainly seems to. Have you heard of the Twin Cities Open Source CMS Unconference that Tim Ericson and Wilbur Ince are putting on?

STEVE: Yea, Tim was telling me about that a couple weeks ago. I think that’s a Saturday in October.

IVAN: Yea, I just found out about it last week, and we have an email out to Tim and Wilbur. I’m hoping to get them on the Podcast so that we can record something about that. It seems to be the natural evolution of these two or more open source communities living together, trying to talk to each other. Right? It seems like this is a way to get ourselves off of our respective islands.

STEVE: Yea. In Drupal we’ve talked about getting off the island so much, and that was, basically, the metaphor we wove through that DrupalCon presentation at New Orleans, that Drupal has a twin island essentially in WordPress. WordPress also has the same kind of getting off the island conversations, because they know that they’re about just as isolated from the wider PHP community. Perhaps even more so, because there’s not the composer bridge in the same way that there is from the Drupal community to the rest of the PHP mainland, as it were.

IVAN: Yea. And it’s not just WordPress and Drupal. Joomla still has a presence in the market.

STEVE: Yea, Joomla’s still around with a pretty decent market share. But, it must just be my filter bubble that I, sort of, very rarely encounter people using Joomla. I mean, of course, my job is to work with developers who use Drupal and WordPress, but for the market share Joomla, has, I’m surprised I don’t see it.

IVAN: I’m surprised too. When we first started working for clients, when I first started TEN7, we built a WordPress site, a Drupal site, and a Joomla site, and I kind of did that to see what the major differences were, and where we would hitch our bandwagon, so to speak, and Joomla I remember being…it felt like it was solving all the problems in all the right ways, and I guess I just lost touch with it.

STEVE: Yea, Joomla never really clicked for me. It must’ve been Joomla 1.5 at the time? In 2007. So, after hearing that person on that Arts & Business council panel say, “Drupal is what you need.” I did some more research and I came across Joomla, and kind of did the same thing of trying to figure out can I build the same basic functionality in WordPress, Drupal and Joomla. And, it seemed like I could, but Drupal just clicked for me in a way that Joomla never did. I never felt the same level of comfort in the admin UI, the way information architecture got built in Joomla just didn’t click for me the same way it did in Drupal.

IVAN: So, Pantheon is not supporting Joomla just yet?

STEVE: Correct. I suppose because we are basically providing PHP, we’re providing a database.

IVAN: That's the way to do it, right?

STEVE: We added WordPress years ago partially because this was before I joined Pantheon. But, as I understand the story, one of the major agencies using Pantheon basically, figured out how to make it work, and told the people at Pantheon at the time, “hey, we got WordPress running. Are we allowed to do this?” (laughing) And Pantheon basically figured out, “well, if you got it working already, we should make our real support for WordPress more mature.” There are people who run Symphony, Pure Symphony applications on Pantheon, and we don’t support it in the same way we support Drupal or WordPress. Like, you can open support tickets with Drupal and WordPress, and we’ll be able to help you to some degree, but if you got Joomla running, or you got a Pure Symphony app running on Pantheon, we simply wouldn’t be able to help you if it suddenly broke.

IVAN: And you also support Backdrop, don’t you?

STEVE: That’s a little muddier, in that it’s something that runs on Pantheon, because its code base is so similar to Drupal 7. It runs, but it’s not something that our support team is capable of answering questions on, the same way they’re capable of answering questions on Drupal and WordPress. So, it is in kind of a gray area, and that’s probably something that we should clarify.

IVAN: You should talk to Drew and see what he says. (laughing)

STEVE: Exactly. I’ll see if we can prioritize getting more Backdrop clarity, because there are some Backdrop sites running on Pantheon, but we don’t have it documented the same way we have Drupal and WordPress documented.

IVAN: What are you excited about in Pantheon right now? What’s coming up that you may be can tell me about, or can’t tell me about, that is really kind of making you itch?

STEVE: One thing that excited me relatively recently was hearing about the Drupal 9 announcement, that there’s suddenly much more concrete information that’ll inform how people migrate away from Drupal 7 eventually. I released a blog post about that last week with kind of an edu focus. I think the Drupal 9 timing announcement will encourage some people to stay put, basically, take it as a green light to just stick with Drupal 7 until Drupal 9 comes out. And, some people will take the timing announcement, but perhaps, more so, the release of 8.6 with a lot of front-end public facing, or end user facing features, that I think will prompt a lot of Drupal 7 site owners to reconsider.

IVAN: I think you’re right. I think you’ve hit the nail right on the head there. I’m excited for it as well. It’s a really interesting decision to sunset support with two versions at the same time.

STEVE: It’s supposed to be the case that moving from 8 to 9 will be the same level of complexity, as moving between 8.5 and 8.6, but we’ll only know when that actually happens.

IVAN:  Do you have any recommendation for a book that you’re reading right now, or a book that I should be reading, that you’re absolutely enthralled with?

STEVE: Sure. So, the Alexander Hamilton book comes to mind, because the Hamilton musical is in Minneapolis right now. I was lucky enough to see it with the original cast. It was the best birthday present ever. The play opened on Broadway in October of 2015, so it was the same month as my birthday, I started listening to the soundtrack, thought it was great, mentioned it to my wife Paige, and she, while I was at BADCamp that year, just decided, “oh, I’ll just get tickets.” There was a tiny window of time after it opened on Broadway, where you could, just get tickets, and we had to buy them for the next Spring, but, yea, we were able to see it in March with the original cast. The reason I bring it up as a book, is because, I feel like the book, of course, is longer and covers more detail, and the part that I like about the book that you get to some degree in the musical is, that these are just real people. They get mythologized in so many ways, in popular culture, but the depth of the book for me was one of the best ways of seeing the regular humanity of the Founding Fathers.

IVAN: Yea, I agree. I’m a big fan of Hamilton and I was able to see it in Chicago last year, with my daughter, who basically memorized the whole album, the whole book, and also has the book you’re referring to. So, I never really thought about actually picking the book up and reading it. So, now I think I’m going to do that.

STEVE: Yea, it’s pretty good.

IVAN: Well, thanks for the advice. And, thanks for the suggestion, and really appreciate having you join us on the Podcast. Thanks so much for spending your precious time with me.

STEVE: Thanks for having me, Ivan.

IVAN: So, you’re @stevector on Twitter and on Drupal.org. So, maybe before we sign off, tell me about Steve Vector. I should’ve asked about that before. How did that come about?

STEVE: Yea, you know. Calculus class, senior year of high school, there was a website we were supposed to sign into, basically a forum, and make conversation about Calculus, so I thought, “well, the username that I should have for this Calculus website is obviously Steve Vector,” and, I should’ve left it there, and just made Steve Persch my username in other places, but I did not. So, I’m Steve Vector, I guess, for the foreseeable future.

IVAN: That’s awesome. So, @stevector on Twitter and on Drupal.org, and on GitHub.

STEVE: Wordpress.org. Pretty much everywhere.

IVAN: And, I would assume you have stevector.com as well?

STEVE: Oh, I do. Yes.

IVAN: We’ll link to all of that in the show notes. You’ve been listening to the TEN7 Podcast. Find us online at ten7.com/podcast. And if you have a second, do send us a message. We love hearing from you. Our email address is [email protected]. Until next time, this is Ivan Stegic. Thank you for listening.

Oct 17 2018
Oct 17

Keyboard accessibility is vital, as many assistive devices emulate the keyboard. Using semantic HTML one can achieve an accessible User Interface (UI) with less code than non-semantic markup.

By managing and guiding focus with semantic HTML, developing an accessible UI is rather easy. Semantic HTML plays an important role in not only accessibility but SEO (Search Engine Optimization) as well. Although we are aware of it, it's often overlooked.

In September’s accessibility talk, Sarbbottam Bandyopadhyay shared the trade-offs of using semantic vs non-semantic markup with an everyday example. He also shared how to manage and guide focus. It was a brief presentation emphasizing the various aspects of keyboard accessibility. He concluded with a brief introduction to WAI-ARIA.

Sarbbottam is a frontend engineer, with more than 14 years experience. He currently works at LinkedIn. He is part of LinkedIn's core accessibility team, focusing primarily on web accessibility. He’s been involved with web accessibility since his Yahoo days.

Takeaways:

Keyboard Accessibility is addressed in the “Operable” principle of the WCAG: Web Content Accessibility Guidelines.

Many users with motor disabilities rely on keyboard navigation. Using a mouse or trackpad can be difficult because it takes a lot of fine motor skills.

WCAG: Web Content Accessibility Guidelines 2.0 - P-O-U-R:

P - Perceivable: Information and user interface components must be presentable to users in ways they can perceive.

O - Operable: User interface components and navigation must be operable.

U - Understandable: Information and the operation of user interface must be understandable.

R - Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

The WCAG 2 Quick reference guide has done an excellent job organizing and categorizing the POUR guidelines.

Many assistive devices emulate the keyboard

To be keyboard accessible, the website’s user interface must be navigable and operable via the keyboard. Arrows are used for widgets and groups; for example, radio groups or dropdowns.

Tab and arrow keys are used primarily to navigate. 

Enter and space are the primary keys used to operate.

Most common issues:

Mouse only interaction:

This an interaction that can only be accessed using a mouse or pointing device. There is no way a keyboard user can access this functionality.

No focus indicator:

Focus indicators visually identify the current active element on the screen. The focus indicator is often suppressed using CSS. As a result, keyboard-only users are not being able to access content or know where they are on the screen.

Sarbottom has developed a Chrome extension, called Focus Indicator, which forces focus on active highlighted elements.

Focus indicator is the equivalent to mouse pointer, so, 'focus outline: none' is equivalent to 'cursor: none'. We wouldn’t use 'cursor: none', so we shouldn’t use 'focus outline: none'.

Non-deterministic navigation:

It is expected that a tab press will focus on the next visible element in a logical order. The tab order must be in sync with the visual order. When the tab order does not match a user’s expectations, it creates a cognitive overhead.

To have deterministic tab order, avoid using positive tab indexes and CSS to change the visual order. Rely on the DOM (Document Object Model) order for for visual and tab order.

Efficient navigation:

A keyboard user expects the actionable elements in a dynamic apps UI to be navigated by a subsequent tab press.

We can avoid these common issues and pitfalls

Use Semantic HTML

  • It is not only important for accessibility, it is important for SEO
  • Semantic HTML allows the markup to be system, software, or machine interpretable.
  • Using semantic HTML results in less code.

WAI-ARIA

ARIA or WAI+ARIA (Accessible Rich Internet Application) is a set of additional HTML elements that enhance the accessibility of web content by providing extra information.

There are three areas of ARIA attributes:

  • Role - defines what an element is or what it does.
  • State - conveys the current state of the element.
  • Property - adds additional information to an element, like relationship.

Note: The semantic information provided by ARIA attributes supersedes the native HTML semantics.

The first rule of ARIA is to not use ARIA.

Focus management:

By managing focus, we can ensure that the dynamic interaction and UI transitions are accessible. On UI updates, focus the corresponding HTML node programmatically. An HTML element can be focused by JavaScript invoking the focus method upon it. Focusing a container programmatically serves as a guided context switch.

Any subsequent tab press will focus the next focusable element, which enhances the keyboard user’s experience.

Guided Focus Management:

Guided focus management enhances the keyboard user’s experience. It allows the screen reader to read out the textual content of the focused container letting a visually challenged user be aware of UI updates. There are situations when the focus cannot be shifted from the context.

WAI-ARIA can be used to provide spoken feedback.

To wrap it up...

Get romantic with semantic and focus on focusing.

YouTube Video

Accessibility Talks September 2018 - Sarbbottam Bandyopadhyay - Love Thy Keyboard

Links mentioned in the talk:

Drupal Accessibility Group

Join the Accessibility group on Drupal.org for hints, tips, discussions, and patch proposals to help make Drupal more inclusive.

A11yTalks on Twitter

Follow us on Twitter and use the hashtag #a11ytalks to follow the conversation.

Oct 16 2018
Oct 16

After more than half a year silence, this is now my third blog post within two days :)

This time I'm showing you, how you can automatically add another order item after a product has been added to the cart in Drupal Commerce 2.x. The most important info here is, how you can pass the pitfall of possible transient data problems here.

Prologue

Our use case was that our customer wanted to optionally sell warranty extensions with their products. The plan was to extend the add to cart form on the product page with a checkbox, which allows to add the warranty extension. Because this counts as an insurance and insurances are taxed especially in Austria and therefore VAT free, simply adding the amount to the product's order item was not a valid choice. We had to add extra order items for that. That would still have been possible to solve within a custom form submit callback. However, we prefer OOP based approaches, and so we just stored the info of checking the selection temporarliy and decided to react on this in an event subscriber later on. Commerce offers the CartEvents::CART_ENTITY_ADD event to react on the add to cart event.

Implement the event subscriber

I won't describe the basics of how to write an event subscriber in general here. The event we'll want to subscribe to is the \Drupal\commerce_cart\Event\CartEvents::CART_Entity_ADD and you'll receive an event of type \Drupal\commerce_cart\Event\CartEntityAddEvent. Let's assume we register a callback named addWarrantyExtension(). This would look like that:


  /**
   * Adds an warranty extension order item on add to cart event, if requested.
   *
   * @param \Drupal\commerce_cart\Event\CartEntityAddEvent $event
   *   The add to cart event.
   */
  public function addWarrantyExtension(CartEntityAddEvent $event) {
    $add_warranty_extension = doAnyCustomCheckWeNeedHere();
    if (!$add_warranty_extension) {
      return;
    }

    $my_custom_purchasable_entity = createTheWarrantyExtensionOrWhatever();

    // Don't do it like that. This can cause problems - explained below in the post!
    //$cart = $order_item->getOrder();
    // This is the right way!
    $cart = $event->getCart();

    $my_order_item = $this->orderItemStorage->createFromPurchasableEntity($my_custom_purchasable_entity );
    $my_order_item->set('order_id', $cart->id());
    $my_order_item->save();
    $cart->addItem($my_order_item);
  }

This is a shortened outline about we have done. But the most interesting thing is already mentioned in the code's comments above:

Beware of transient data problems

The original version of our code didn't fetched the cart by using $event->getCart() - I've simply overseen that this getter exists, neverminded and used $order_item->getOrder() instead. At first glance, everything seems to work nicely, but literally the last tests before going live with this features showed us some problems.

What happened? Upon adding a product with checking the warranty extension, the cart showed the product only. On a closer look, I saw the order item with the warranty extension existed, but the order's order items field only contained the product. A few tries later I saw that this issue can be reproduced every time the order entity was created before within the same request. If the cart existed before the requested, no problem occured. I've took another close look and saw that the order within our event subscriber already had an ID though, but no order items were set at all - so the originally added product was missing. Upon save at last, the product was in the cart, but our warranty item was missing.

However, as soon as I have started to correctly use the getCart() function of the event to fetch the order entity, I was no more having any problem. The product was present within the event subscriber, and the additionally added warranty extension was still part of the cart upon visiting the cart page :)

Oct 16 2018
Oct 16

Commerce ships with a default success message after adding a product to the shopping cart. This is done via an event subscriber, in order to be easy customizable. However, removing, replacing or extending existing services in Drupal 8 is a thing, not every developer is used to do. I'll show you, how easy this is.

I've seen the need for this requirement a couple of times during the last few days - once I needed it myself for muting the add to cart message on my ajaxified add to cart links. The same time I saw what Commerce Cart Flyout module is doing regarding this. And today someone asked for this in the Commerce Slack Channel.

I'll show you two use cases here: the one is completely removing the original cart event subscriber, the second one is extending and replacing the existing one, in order to stay silent on Ajax requests and keep the existing logic on static calls.

Setup

In both cases, we need to implement a custom module. I'm assuming that you're already familiar with creating custom modules, if not here's the official documentation on doing this. Let's assume that we call our module 'my_module'.

As we're modifying an existing service, we do not need to define a service within the module's service.yml file. Instead we need to implement a service provider. Defining a service provider is done with some little magic. We don't define it as a service (as it is providing services, it's one level above them), but we have to follow a strict naming policy in order to get it discovered. We have to place it in your module's top level namespace (Drupal\my_module in our case) and therefore directly in the "src" directory of our module. Additionally the name of this class is required to be a CamelCase version of your module's machine name followed by ServiceProvider, so in our case this is MyModuleServiceProvider. And we'll extend the ServiceProviderBase class. If you're interested in this topic, read more about service providers in Drupal 8 here.

Completely remove the original cart event subsriber

This approach is e.g. done by Commerce Cart Flyout module until version 1.4:


namespace Drupal\my_module;

use Drupal\Core\DependencyInjection\ContainerBuilder;
use Drupal\Core\DependencyInjection\ServiceProviderBase;

/**
 * Removes the add to cart message.
 */
class MyModuleServiceProvider extends ServiceProviderBase {

  /**
   * {@inheritdoc}
   */
  public function alter(ContainerBuilder $container) {
    // Remove the server side add to cart messaging.
    if ($container->hasDefinition('commerce_cart.cart_subscriber')) {
      $container->removeDefinition('commerce_cart.cart_subscriber');
    }
  }

}

It implements the alter() function and checks, if the container has a service definition called 'commerce_cart.cart_subscriber'. If so, it will be removed completely.

Extend and replace the existing service

This approach is less radical. We want to silent the message only on Ajax calls. So our plan is to replace the service instead of removing it. This is how our service provider will look like:


namespace Drupal\my_module;

use Drupal\Core\DependencyInjection\ContainerBuilder;
use Drupal\Core\DependencyInjection\ServiceProviderBase;
use Symfony\Component\DependencyInjection\Reference;

/**
 * Replaces the add to cart message.
 */
class MyModuleServiceProvider extends ServiceProviderBase {

  /**
   * {@inheritdoc}
   */
  public function alter(ContainerBuilder $container) {
    // Replace the server side add to cart messaging.
    if ($container->hasDefinition('commerce_cart.cart_subscriber')) {
      $definition = $container->getDefinition('commerce_cart.cart_subscriber');
      $definition->setClass('Drupal\my_module\EventSubscriber\CartEventSubscriber')
        ->addArgument(new Reference('request_stack'));
    }
  }

}

As you can see, we are not removing the definition, but setting a different class instead. And because we will need the request stack in order to distinct between Ajax and static calls, we will add an additional constructor argument and inject the request_stack service.

Next, we'll create the CartEventSubscriber class and place it into the directory src/EventSubscriber within our module's directory:


<?php

namespace Drupal\my_module\EventSubscriber;

use Drupal\commerce_cart\Event\CartEntityAddEvent;
use Drupal\commerce_cart\EventSubscriber\CartEventSubscriber as CommerceCartEventSubscriber;
use Drupal\Core\Messenger\MessengerInterface;
use Drupal\Core\StringTranslation\TranslationInterface;
use Symfony\Component\HttpFoundation\RequestStack;

/**
 * Replaces the original CartEventSubscriber from commerce_cart module.
 */
class CartEventSubscriber extends CommerceCartEventSubscriber {

  /**
   * The current request.
   *
   * @var \Symfony\Component\HttpFoundation\Request
   */
  protected $currentRequest;

  /**
   * Constructs a new CartEventSubscriber object.
   *
   * @param \Drupal\Core\Messenger\MessengerInterface $messenger
   *   The messenger.
   * @param \Drupal\Core\StringTranslation\TranslationInterface $string_translation
   *   The string translation.
   */
  public function __construct(MessengerInterface $messenger, TranslationInterface $string_translation, RequestStack $request_stack) {
    parent::__construct($messenger, $string_translation);

    $this->currentRequest = $request_stack->getCurrentRequest();
  }

  /**
   * {@inheritdoc}
   */
  public function displayAddToCartMessage(CartEntityAddEvent $event) {
    $is_ajax = $this->currentRequest->isXmlHttpRequest();
    if (!$is_ajax) {
      parent::displayAddToCartMessage($event);
    }
  }

}

We are extending the \Drupal\commerce_cart\EventSubscriber\CartEventSubscriber class and override its displayAddToCartMessage() function. Inside we first check, if the current request is an Ajax request. If it is, we do nothing. If it's a static call instead, we simply call the parent displayAddToCartMessage() function. That's it :)

Alternative solution

There's another way to extend existing services. You may also implement a decorator instead.

Oct 16 2018
Oct 16

Drupal Modules: The One Percent — User Password Reset Link Timeout (video tutorial)

[embedded content]

Episode 48

Here is where we bring awareness to Drupal modules running on less than 1% of reporting sites. Today we'll consider User Password Reset Link Timeout, a module which permits you to set the duration of password reset links.

Oct 16 2018
Oct 16

FinTech and the disruption it can cause to the traditional banking systems is now a hot topic of debate in the banking conferences. Global venture capital funds are super-bullish on this front and are accentuating investments in the FinTech companies. Thanks to the burgeoning demand of FinTech in recent times, more crowdsourcing platforms are letting artists or fledgling entrepreneurs to crowd-source capital from a large constituency of online donors or investors.

A sheet of paper with Finance written in bold letters alongside relevant icons and laptop, notebooks, pen, and plant pot placed around it


For instance, peer to peer (P2P) lending, the high-tech equivalent of borrowing money from friends, helps in raising a loan from an online community at a mutually negotiated interest rate. Also, digital wallet providers allow people to zip money across borders even without any bank accounts using handheld devices.

Amalgamation of these technologies, which goes under the umbrella term FinTech, is expected to metamorphose the way all of us use banking and financial services. And Drupal can act as the perfect content management framework for building a great FinTech platform.

A portmanteau of financial technology

[embedded content]


Financial technology, which is referred to as FinTech, illustrates the evolving intersection of financial services and technology. FinTech allows people to innovate while transacting business ranging from digital money to double-entry bookkeeping.

The lines between technology and the financial services are blurring

Since the advent of the internet revolution and later the mobile internet revolution, financial technology has grown multifold. Originally referred to   technology applied to the back office of banks or trading firms, FinTech now caters to a broad variety of technological interventions into personal and commercial finance.

According to EY’s FinTech Adoption Index, one-third of consumers leverage at least two or more FinTech services and more and more of these consumers are also aware of FinTech being a part of their daily lives.

FinTech encompasses the startups, technology companies or even legacy providers. Startups use technology to offer existing financial services at affordable costs and to provide new tech-driven solutions. Incumbent financial enterprises look to acquire or work with startups to drive digital innovation. Technology companies offer payment tools. All these can be seen as FinTech. Surely, the lines between technology and the financial services are blurring.

Origins of FinTech

infographics showing the history of FinTech with relevant icons against each yearSource: 16Best

In broad lines, the financial industry has seen a gargantuan shift over the years with the way it is leveraged in the times of rapid technological advancements. 16Best has compiled a brief history of FinTech which shows how the gap between financial services and the technology has got bridged over the years.

The gap between financial services and the technology has got bridged over the years.

In 1918, the Fedwire Funds service began offering electronic funds transfer. And while the Great Depression was ravaging the world’s economies, IBM provided some solace with its 801 Bank Proof Cach Machine that offered the means for faster cheque processing. Subsequently, credit cards and ATMs came into existence in the ‘50s and ‘60s.

In 1971, first all-electronic trading emerged in the form of NASDAQ. And in 1973, the SWIFT (Society for Worldwide Interbank Financial Telecommunications) built a unified messaging framework between banks for handling money movement.

1997 was the year which saw the emergence of mobile payment through Coca-Cola Vending Machine. Fast forward to 2000s and the present decade, a slew of innovations crashed into the finance sector with the introduction of digital wallets, contactless payments and cryptocurrencies.

FinTech is definitely re-inventing a quicker and more durable wheel as the world continues to witness a superabundance of new ventures refining financial services with technology.

Merits of FinTech

Bar graph showing statistics on different areas of FinTech


Financial technology has taken the financial services to a whole new level with a cluster of merits that it offers. Here are some of the major benefits of FinTech:

  • Robo Advisors: They are one of the biggest areas of FinTech. These online investment services put users through a slew of questions and then relies on algorithms to come up with an investment plan for them.
  • Online Lending: It encompasses all aspects of borrowing from personal loans to refinancing student loans which improves money lending.
  • Mobile payments: There is a growing demand for mobile payment options with the stupendous rise of mobile devices over the years.
Bar graph showing statistics on global mobile payment marketTotal revenue of global mobile payment market from 2015 to 2019 (in billion U.S. dollars) | Statista

Personal Finance and Savings: A plethora of FinTech organisations in the micro saving department have been helping people to save their change for rainy days and a whole lot of them rewarding customers for doing so. For instance, Digit allows you to automate the process of saving extra cash.

Bar graph showing statistics on personal financeSource: Statista

Online Banking and Budgeting: Online banks like Simple reward users for using their ‘automatic savings’ service and also offer a cost-effective option over a traditional bank. Leveraging online tools, they assist users to plan budgets and handle their money smartly from their mobile devices with minimal effort to meet their savings goals.

Insurance: New insurance models have been strengthening the FinTech space. Metromile, an insurance model, sells pay per mile car insurance.

Bar graph showing statistics on Insurtech industrySource: Statista

Regtech: Regulation Technology, which utilises IT to enhance regulatory processes, is one of the significant sectors where numerous FinTech app ideas have come into light around this domain. Regtech is useful for trading in financial markets, monitoring payment transactions and identification of clients among others. For instance, PassFort helps in standardising the online compliance processes.

How is Drupal powering FinTech?

Organisations offering FinTech solutions need to maintain a robust online presence. Drupal has been powering the landscape of FinTech with its enormous capabilities.

The launch of TPG Capital

Homepage of TPG Capital with a timelapse image of running cars on the road and trees in the background


TPG Capital is one of the major enterprise-level FinTech companies which has leveraged the power of Drupal 8.

One of the primary objectives for TPG’s marketing circuit was to harness the Drupal’s flexibility as a digital empowerment platform. They wanted the ability to make alterations to content on the fly and try out new messaging approaches. Simultaneously, the financial industry’s stringent legal and regulatory requirements called for a flexible TPG platform that would meet the specific needs of the sector thereby offering top-notch security.

Drupal came out as the right choice when it came to the CMS that would facilitate the TPG’s goal for mirroring their cutting-edge business practices and incorporate modern website design and branding.

A digital agency built a responsive, mobile-first site. It featured newer CSS features like Flexbox and CSS animations and minimised the site’s dependence on Compass by introducing auto prefixer. Moreover, Drupal 8 version of Swifttype was built for the search component and contributed back to the Drupal Community.

The launch of Tech Coast Angels

Homepage of Tech Coast Angels with two people working on their laptop


Tech Coast Angels are one of the biggest angel investment organisation in the US. 

Tech Coast Angels selected Drupal as their CMS of choice for its excellent features vis-à-vis user authentication, account management, roles and access control, custom dashboards, intricate web forms for membership and funding application, workflow management and email notifications.

Performance improvements were made by a digital agency to both the Drupal application and the server environments which brought down the costs to a huge extent by minimising the hardware requirements necessary to run the Drupal codebase in both staging and production environments.

With Drupal being one of the most security focussed CMSs, it helped a great deal in making amendments related to security of the site. Views caching were enabled and unnecessary modules were turned off on the production server.

Market trends

Bar graph showing global investments activity in FinTech companies


The Pulse of FinTech 2018 by KPMG shows that global investments activity in FinTech companies has been steadily rising with 2018 turning out as the most profitable year. It is only going to grow more in the coming years.

Infographics showing bubbles inside a box on the left and description on the right about the size of bubbles with respect to FinTech companies

In the coming years, the main trends in the asset and wealth management, banking, insurance and transactions and payments services industries can be seen in the illustration above.

Conclusion

FinTech is a great alternative to traditional banks. FinTech excels where traditional banks lag behind. In addition to offering robust financial services leveraging technological advancements, organisations offering FinTech solutions need to have a superb digital presence to offer a great digital experience. Drupal can be an awesome content store for an enterprise-level FinTech platform.

Drupal experts at Opensense Labs have been powering digital transformation pursuits of organisations offering a suite of services.

Contact us at [email protected] to build a FinTech web application for your business using Drupal.

Oct 16 2018
Oct 16

[embedded content]

Video sections

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

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

Bootstrap in Drupal

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

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

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

Getting Started

Before we can begin, go download the Barrio theme.

Using Composer:

composer require drupal/bootstrap_barrio

Create Sub-theme

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

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

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

Create CDN Sub-theme

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

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

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

3. Rename the following files:

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

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

From this:

To this:

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

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

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

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

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

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

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

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

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

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

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

Download Local Version of Bootstrap

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

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

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

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

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

From this:

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

To this:

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

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

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

From this:

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

To this:

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

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

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

Theme Settings

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

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

Layout Settings

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

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

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

Components Settings

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

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

Affix Settings

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

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

Here’s an example:

Scroll Spy

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

Fonts Settings

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

Colors

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

Color Scheme

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

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

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

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

Bootstrap Library

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

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

composer require drupal/bootstrap_library

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

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

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

Bootstrap Library Settings

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

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

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

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

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

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

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

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

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

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

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

Summary

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

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

Ivan Zugec

About Ivan Zugec

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

Oct 16 2018
Oct 16

You have already seen what Drupal blogs were trending in previous months, and now it is time to look at all the blog posts we’ve written. Here are the blog topics we covered in September 2018.

The first blog post was How to Backup a Drupal 8 Site. There are two easy and straightforward methods currently available for you to make backups of your Drupal 8 site. One involves the use of a Command Line Interface, while the other can be achieved through Drupal’s own GUI. We have looked through both methods in this post.

The second was a Michel van Velde in the shoes of one of Deloitte's Fast 50 companies. Read about what his company has achieved during one of the worst economic crisis in decades, what are his biggest contributions to the Drupal community, and what is his next personal project (a hint: it will involve drones).

We continued with a Recollections from Drupal Europe by a non-developer. Drupal Europe was my first larger Drupal event. Learn, how was Drupal Europe for a first-time to a non-developer person like me.

The fourth blog post was an Interview with Mike Gifford, Drupal 8 Core Accessibility maintainer. Read about what his company is striving to achieve, where he thinks has been a lot of movement in the last 2 years regarding Drupal, and on what contribution to open source is he proud of. 

And the last one was a Happy 5th birthday, Agiledrop!. Agiledrop was celebrating its 5th birthday, and for that occasion, we wanted to look at the past and tell the story about how it all started.

Those were our blog posts from September 2018. Looking forward to continuing having you as a reader!   

Oct 16 2018
Oct 16

CKEditor is the WYSIWYG editor that you'll see in Drupal 8.

The default installation of CKEditor has a lot of options, but you can also add more features. CKEditor is an open source editor and has a wide range of extra plugins.

One of our customers asked how they could add 'color",  "text" and "font family" buttons to their CKEditor. This tutorial will explain how to add these buttons to the editor.

Step #1. Install the Required Modules and Libraries

You will need three modules to follow along with this tutorial:

  1. CKEditor Font Size and Family
  2. CKEditor Panel Button
  3. CKEditor Color Button

Next, you'll need to install the CKEditor plugins from the official CKEditor site:

  • Create a folder called libraries inside the root of your Drupal installation.
  • Download the plugin files from the CKEditor site to the libraries folder.
  • Uncompress the files.

You can find the three libraries at these links:

  1. Color Button
  2. Panel Button 
  3. Font Size and Family

How to Install CKEditor Plugins in Drupal 8

The folder structure in your Drupal installation should look like this:

  • Log in to your Drupal site and click Extend.
  • Scroll down to the CKEDITOR section of your modules’ page.
  • Enable the 3 downloaded modules.
  • Click Install.

Step #2. Add Plugins to the Editor

In this part of the tutorial, we'll link our new plugins to our version of CKEditor.

  • Click Configuration > Text formats and editors.
  • Click configure next to the Full HTML format.

  • Scroll down and click Show group names, in order to add a group of buttons to the editor top button bar or second level button bar.

  • Create a new group called Font.
  • Click Apply.

  • Drag and drop the “Font” buttons to the group you created.

  • Add another button group and give it the name Color.
  • Drag the two color-related buttons to the newly created group.

  • Scroll down to the end of the page and click Save configuration.

Step #3. Test the Editor

Now we'll see if everything is installed correctly.

  • Click Content > Add content > Article.
  • Add some text and test the newly added buttons.
  • Make sure that the text format is Full HTML.

  • Click Save when you’re done editing and head over to the published article.

Summary

The CKEditor WYSIWYG core module in Drupal 8 can be enhanced with some additional plugins. They will greatly increase your efficiency as you work on your Drupal 8 content.

Thanks for reading!


About the author

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

There are a couple of modules out there to ajaxify the add to cart form of Drupal Commerce, but I'll introduce to one that on top offers a real decoupled solution. Additionally I'll show how you can achieve a simpler version of that with only a few lines of custom JS code.

Commerce Cart Flyout

The Commerce Cart Flyout module is my clear recommendation when it comes to what of the existing Drupal contrib modules to use, when you want to have an ajaxified add to cart form. It provides a sidebar which will "flyout", when either the cart block is clicked or the add to cart button was pressed. The flyout allows to view the cart's contents, change quantities or remove order items entirely. The block includes an item counter as well.

The module is based on Commerce Cart API and provides a progressively decoupled cart experience. Both modules are maintained by Commerce co-maintainer Matt Glaman, who works for Commerce Guys - the company responsible for developing and maintaining Drupal Commerce, which is another pro argument in choosing this approach. Another plus is that Cart Flyout is highly customizable, offering nine different Twig templatetes for the output of different parts of the module. The JS logic is cleanly structured and built on top of Backbone to offer a wonderful separation between models and views. Thanks to Drupal's library management, you could even override single JS parts of this module with ease.

Custom coding

I really like Cart Flyout very much and also use it in certain projects. But these days I've decided to rather use custom coding to achieve an ajaxified add to cart experience. And here I'm showing you how and why.

Why I haven't used Cart Flyout in that project

Well, in the end, it was the sum of a couple of small factors that led me into this direction. First one was that the project was built entirely without an ajaxified add to cart logic. The site wasn't live at that moment, but development work was already finished by about 99.9%. So we already had a custom block showing cart and wishlist icons with item counters inside. Cart Flyout needs its own cart block, so I'd have to entirely swap my block, fully customize the Twig template of the new block and find a way to include the wishlist icon as well. I'd have to swap out one JS model of the Flyout module as well, including a quite small change. And the main driver behind the decision was that we are using Commerce Wishlist as well. As the flyout module entirely swaps the add to cart form, we would have had to hook into that one and re-add the wishlist functionality. Not a huge impact, but also requiring some changes, was the fact that we are currently using Commerce Add To Cart Link module for all product teaser views (overview pages, search results, etc)

So the sum of all these factors and the curiosity about playing around by myself with the Cart API were the reason, why I've decided in favour of a custom solution in that project. And that shouldn't be a very tough task to achieve. Given the fact, that this is developed for a specific project, where you know your existing markup, CSS selectors and the new markup you want to create, you can leave the overhead of making everything customizable via config and templates behind you and ease the path.

I also didn't need the flyout sidebar containing the full cart info. Instead I just wanted a simple modal overlay showing the information that product XY was added to cart. As we are using Zurb Foundation as our frontend framework, we wanted to use Foundation's Reveal component for showing this modal.

Of course I was also building up on the great Commerce Cart API module, as well as I've created the wishlist counterpart Commerce Wishlist API to achieve all my goals.

First, I've defined the MYTHEME/ajax_add_to_cart JS library in my theme, which looks like this (and despite the name handles both the add links and forms for both cart and wishlist). Please note that this code also involves updating of a item counter that is part of the navigation bar (updateCart and updateWishlist) - this could also be skipped for even more minimal solutions.


(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.ajaxAddToCart = {
    getCsrfToken: function(callback) {
      $.get(Drupal.url('rest/session/token'))
          .done(function (data) {
            callback(data);
          });
    },

    addToCart: function (csrfToken, purchasedEntityType, purchasedEntityId, qty) {
      $('body').append('<div class="add-to-cart-ajax-throbber ajax-progress ajax-progress-fullscreen"></div>');
      $.ajax({
        url: Drupal.url('cart/add?_format=json'),
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrfToken
        },
        data: JSON.stringify([{
          purchased_entity_type: purchasedEntityType,
          purchased_entity_id: purchasedEntityId,
          quantity: qty
        }]),
        success: function(data) {
          var orderItem = data[0];
          var $overlay = $('#add-to-cart-overlay');
          $overlay.find('.purchased-entity').text(orderItem.title);
          $overlay.foundation('open');
          Drupal.behaviors.ajaxAddToCart.updateCart();
          $('.add-to-cart-ajax-throbber').remove();
        }
      });
    },

    updateCart: function() {
      var $cartCount = $('.store-action--cart .store-action__link__count');
      if ($cartCount.length) {
        $.ajax({
          url: Drupal.url('cart?_format=json'),
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
          success: function(data) {
            var cart = data[0];
            var count = cart.order_items.reduce(function (previousValue, currentValue) {
              return previousValue + parseInt(currentValue.quantity);
            }, 0);
            $cartCount.text(count);
          }
        });
      }
    },

    addToWishlist: function (csrfToken, purchasableEntityType, purchasableEntityId, qty) {
      $('body').append('<div class="add-to-cart-ajax-throbber ajax-progress ajax-progress-fullscreen"></div>');
      $.ajax({
        url: Drupal.url('wishlist/add?_format=json'),
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrfToken
        },
        data: JSON.stringify([{
          purchasable_entity_type: purchasableEntityType,
          purchasable_entity_id: purchasableEntityId,
          quantity: qty
        }]),
        success: function(data) {
          var wishlistItem = data[0];
          var $overlay = $('#add-to-wishlist-overlay');
          $overlay.find('.purchasable-entity').text(wishlistItem.title);
          $overlay.foundation('open');
          Drupal.behaviors.ajaxAddToCart.updateWishlist();
          $('.add-to-wishlist-ajax-throbber').remove();
        }
      });
    },

    updateWishlist: function() {
      var $wishlistCount = $('.store-action--wishlist .store-action__link__count');
      if ($wishlistCount.length) {
        $.ajax({
          url: Drupal.url('wishlist?_format=json'),
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
          success: function(data) {
            var wishlist = data[0];
            var count = wishlist.wishlist_items.reduce(function (previousValue, currentValue) {
              return previousValue + parseInt(currentValue.quantity);
            }, 0);
            $wishlistCount.text(count);
          }
        });
      }
    },

    attach: function attach(context) {
      $(context).find('.add-to-cart-link').once('add-to-cart-link-init').each(function () {
        $(this).on('click', function (e) {
          e.preventDefault();
          var variationId = $(this).data('variation');
          Drupal.behaviors.ajaxAddToCart.getCsrfToken(function (csrfToken) {
            Drupal.behaviors.ajaxAddToCart.addToCart(csrfToken, 'commerce_product_variation', variationId, 1);
          });
        });
      });

      $(context).find('form.add-to-cart-form').once('add-to-cart-form-init').each(function () {
        $(this).on('click', '.form-submit', function(e) {
          var isWishlistButton = $(this).hasClass('add-to-wishlist-button');
          $(this).parents('form').data('button-clicked', isWishlistButton ? 'wishlist' : 'cart');
        });
        $(this).on('submit', function (e) {
          e.preventDefault();
          var buttonClicked = $(this).data('button-clicked');
          var purchasedEntityType = $(this).data('purchased-entity-type');
          var purchasedEntityId = $(this).data('purchased-entity-id');
          var qty = $(this).find('input[name="quantity[0][value]"]').val();
          Drupal.behaviors.ajaxAddToCart.getCsrfToken(function (csrfToken) {
            if (buttonClicked === 'wishlist') {
              Drupal.behaviors.ajaxAddToCart.addToWishlist(csrfToken, purchasedEntityType, purchasedEntityId, qty);
            }
            else {
              Drupal.behaviors.ajaxAddToCart.addToCart(csrfToken, purchasedEntityType, purchasedEntityId, qty);
            }
          });
        });
      });

      $(context).find('.add-to-wishlist-link').once('add-to-wishlist-link-init').each(function () {
        $(this).on('click', function (e) {
          e.preventDefault();
          var variationId = $(this).data('variation');
          Drupal.behaviors.ajaxAddToCart.getCsrfToken(function (csrfToken) {
            Drupal.behaviors.ajaxAddToCart.addToWishlist(csrfToken, 'commerce_product_variation', variationId, 1);
          });
        });
      });
    }
  };

})(jQuery, Drupal, drupalSettings);

Then I've added this library to the add to cart form, as well as to the add to cart links. Also I've added a class to the <form> tag for easier targeting and set the data-purchased-entity-type and data-purchased-entity-id attributes.

/**
 * Implements hook_form_BASE_FORM_ID_alter() for commerce_order_item_add_to_cart_form.
 */
function MYTHEME_form_commerce_order_item_add_to_cart_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  $form['#attached']['library'][] = 'MYTHEME/ajax_add_to_cart';
  // Add custom class to form.
  $form['#attributes']['class'][] = 'add-to-cart-form';
  /** @var \Drupal\commerce_cart\Form\AddToCartForm $form_object */
  $form_object = $form_state->getFormObject();
  /** @var \Drupal\commerce_order\Entity\OrderItemInterface $order_item */
  $order_item = $form_object->getEntity();
  $purchased_entity = $order_item->getPurchasedEntity();
  $form['#attributes']['data-purchased-entity-type'] = $purchased_entity->getEntityTypeId();
  // The order item's purchased entity reference won't be up to date, when a
  // different product variation was selected and updated via Ajax. The form
  // state stores it to 'selected_variation' then. Our product set entity on the
  // other side, does not store such a value, but is the purchasable entity on
  // its own. So we can safely take the one from the order item.
  $purchased_entity_id = $purchased_entity instanceof ProductVariationInterface ? $form_state->get('selected_variation') : $purchased_entity->id();
  $form['#attributes']['data-purchased-entity-id'] = $purchased_entity_id;
}

/**
 * Implements template_preprocess_commerce_add_to_cart_link().
 */
function MYTHEME_preprocess_commerce_add_to_cart_link(array &$variables) {
  $variables['#attached']['library'][] = 'MYTHEME/ajax_add_to_cart';
}

And finally, I've simply added the add to cart and add to wishlist to the page template, which will be hidden, until it get's the command to show up via JS. So I've added these lines to the very end of the page.html.twig (of course I've could also have chosen the html.html.twig file) (sorry that this code example is looking bad in the blog post - it got distracted somehow by CKEditor - you can also view it on a Gist, I'll mentioning in the end of the post):


<div id="add-to-cart-overlay" class="reveal" data-reveal data-close-on-click="false">
  <p><span class="purchased-entity"></span> wurde Ihrem Warenkorb hinzugefügt.</p>
  <div>
    <a class="button" href="https://www.agoradesign.at/blog/two-ways-ajaxify-and-decouple-drupal-commerce-add-cart-and-wishlist-actions/{{ path('commerce_cart.page') }}">zum Warenkorb</a><br/>
    <a href="#" data-close>Weiter einkaufen</a>
  </div>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div id="add-to-wishlist-overlay" class="reveal" data-reveal data-close-on-click="false">
  <p><span class="purchasable-entity"></span> wurde Ihrer Merkliste hinzugefügt.</p>
  <div>
    <a class="button" href="https://www.agoradesign.at/blog/two-ways-ajaxify-and-decouple-drupal-commerce-add-cart-and-wishlist-actions/{{ path('commerce_wishlist.page') }}">zur Merkliste</a><br/>
    <a href="#" data-close>Weiter einkaufen</a>
  </div>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

That's it :) I've summarized the above code in a Github Gist snippet for easier viewing.

Oct 15 2018
Oct 15

BACKGROUND

The USC Viterbi School of Engineering is innovative, elite and internationally recognized for creating models of education, research and commercialization. The Graduate and Professional Programs Office provides services for prospective and current students at the Viterbi School of Engineering and through the School’s Distance Education Network.

THE
CHALLENGE

Incoming USC Viterbi students are truly digital natives. They have never known a world without the Internet, and have had access to smartphones and social media apps since the 4rd grade. How can USC Viterbi introduce the School to these students in on the platforms students are using? Additionally, printed brochures, while effective, typically are printed in an annual cycle, missing the important innovation, research, and events that occur each month at Viterbi.

THE
SOLUTION

USC Viterbi and Urban Insight created iOS and Android apps that offer a look inside the University of Southern California Viterbi School of Engineering’s graduate program; explore academic departments and directly link to their list of programs offered; take a tour of the USC campus; and connect with the admissions office. A content management system enables the Programs Office to quickly and affordably update the Viewbook weekly with new recruitment events and research.

Oct 15 2018
Oct 15

USC Viterbi and Urban Insight developed an intuitive mobile web experience and iOS native app that enables students to discover social, research, and career opportunities, encourages networking with fellow students, and incentivizes participation in events and career activities. The app uses gamification techniques and nudge theory to leverage technology to make students feel welcome and part of the USC Viterbi community.

Oct 15 2018
Oct 15

If someone sues you because your website has accessibility issues, it usually means they need you to fix said issues. Sadly, there will be those lawsuits where the complaint is trigger more by the desire of monetary compensation from a settlement than the present accessibility issues, but in either scenario, there has to be grounds for the complaint which means something needs remediation on your site. 

Why are we stating the obvious? Because it's not obvious to all who find themselves with a letter or lawsuit claiming that their website is inaccessible and therefore discriminates against individuals with vision, hearing, and/or physical disabilities under ADA Title III.

Defenses against inaccessibility claims that have been seen in the news include:

  • Websites aren’t included under ADA Title III
  • Even if they are, it’s moot in this case

ADA Title III Defense?

On October 31, 2017, a letter was sent to The Honorable Jeff Sessions, Attorney General, United States Department of Justice, and signed by sixty-one Members of Congress, urging the DOJ “to restart the process of issuing regulatory guidance regarding the Internet under Title III of the ADA.”1

Restart? Yes. 

In this same letter, the sixty-one Members of Congress reminds the Attorney General that the DOJ, in their 2010 ANPR, states “Although [DOJ] has been clear that the ADA applies to websites of private entities that meet the definition of ‘public accommodations,’ inconsistent court decisions, differing standards for determining Web accessibility, and repeated calls for [DOJ] action indicate remaining uncertainty regarding the applicability of the ADA to websites of entities” included in Title III. 

Unfortunately, the 2010 Advance Notice of Proposed Rulemaking2 where “the Department encourages small entities to provide cost data on the potential economic impact of adopting a specific requirement for website accessibility and recommendations on less burdensome alternatives, with cost information,” has been given a status of inactive under Trump’s Unified Regulatory Agenda released in July 2017.3 

On July 19, 2018, another letter was sent to the The Honorable Jefferson B. Sessions, III by the Attorneys General of 18 states and the District of Columbia on the same topic sent by the Members of Congress.4

If the DOJ recognizes that Title III is unclear, is it no wonder that site owners still try to claim that websites aren't included in Title III? No. 

However, as you read about website accessibility cases in the news, it’s clear that the courts have decided that it does. Whether it was the Winn Dixie case in June of 20175 that set the precedence or that the plaintiff in this case has brought other similar suits since then, it doesn’t matter. Compliance with the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG), level AA is here to stay. Whether its WCAG version 2.0 or the recent 2.1, courts are ruling that these guidelines must be met.

So, what other defense can a business make to stop a website accessibility lawsuit? Other than remediating the problem?

Moot Defense?

If you aren’t a lawyer, you might be scratching your head right now. Moot? Don’t worry, you’re not the only one. Let’s start with a simple example.

Carroll v. New People's Bank, Inc.6

Filed in November, 2017 and terminated in April, 2018. First, please note the length of time required to adjudicate this case, only to have it dismissed. Here is a brief look at what transpired.

  • “NPB's website contains accessibility barriers, which Carroll alleges prevent him from using screen reading software to freely navigate the site.”
  • “NPB informed Carroll of its intent to develop a new website by letter in November 2017, prior to the filing of his lawsuit. In this letter, NPB stated that they had "voluntarily made a number of improvements" to the website and had "retained a third-party to develop a new website for the bank which [would] further improve [the website's] accessibility and client service feature-set."”
  • “Carroll argues that this new website does not render his claim moot because there is no guarantee that NPB will not revert to its former inaccessible website in the future.” 
  • “NPB has moved to dismiss the Complaint for lack of standing.”
  • “NPB contends that, in any event, Carroll's claim is now moot based on its voluntary upgrades made to the website after this action was filed, which upgrades Carroll does not dispute.”

Obviously, there’s more to this case than the snippets provided here. In fact, the case is interesting reading. Bottomline, NPB responded to Carrol’s letter, fixed the site, and the case was dismissed.

Haynes v. Hooters of America, LLC7

This next case isn’t as straightforward as Carroll’s claim being moot. This one is about getting sued twice for the same issue. Here is brief look at the ruling.

  • “On April 4, 2017, Haynes sued Hooters in the United States District Court for the Southern District of Florida …” In short, Haynes wanted Hooters to fix the accessibility issues on their site.
  • “Prior to the initiation of Haynes’ suit, on August 22, 2016, a different plaintiff filed a separate and nearly identical website-inaccessibility lawsuit against Hooters. Less than three weeks after the filing of that suit, the parties reached an agreement and settled their dispute (“Gomez Settlement Agreement”) ...”
  • “Hooters moved to dismiss Haynes’ suit, arguing that, because Hooters was in the process of actively implementing a remediation plan for its website, pursuant to the Gomez Settlement Agreement, there was no live case or controversy and Haynes’ claim must be dismissed on the mootness grounds.” They had until September 2018 to fix their site.
  • The district court agreed with Hooters and dismissed the case.
  • But, Haynes didn’t agree, and neither did the Eleventh Circuit in their June, 2018 ruling that “the case is not moot.” 

Again, there is more to this case that is briefly summarized here. In short, Haynes had no way to know or to ensure that the remedies being planned would resolve the issues he was having with the site. Therefore, his claim was valid. Yes, you can get sued twice for the same thing if the issue is still present on your site. 

Lessons Learned

There are four lessons worth mentioning. 

Audit Your Site Before You Get Sued

There is no argument that it’s going to cost you money to have your site audited appropriately for accessibility issues and ultimately remediated if problems exist. You could wait to see if you get caught but at that point, your costs include legal fees plus the audit and remediation.

Other costs include the negative publicity that can ensue. Web accessibility cases are hot topics and will remain so due to the lack of specific ADA regulations from the DOJ. People want to know how courts are ruling and that means numerous blog posts and speculation where your business’ name is spattered over the Internet.

Website Accessibility Insurance

Insure your site. You heard right. Insurance. You have a site right now. You think all is well. You have processes in place that audit content as it goes live to ensure there aren’t any issues. You have run an automated tool on sample pages and everything looks okay.

However, as a person that drives a car or owns a home knows, you can never predict when something is going to go wrong. That’s why you have insurance.

Don’t believe that such insurance exists? Think again. Beazley Insurance is working with Promet Source to offer insurance against ADA website compliance claims. Said policy includes up to $25,000 coverage for an accessibility audit and remediation if someone files a claim against you.

“In 2017, 7,663 ADA Title III lawsuits were filed in federal court — 1,062 more than in 2016.”8 “If ADA Title III federal lawsuit numbers continue to be filed at the current pace, 2018’s total will exceed 2017 by 30%, fueled largely by website accessibility lawsuit continued growth.”9 Add to these numbers the cases brought in state courts and it’s not hard to believe that you could get sued in the near future.

Move Quickly

If you get a letter, move quickly to remediate those items specifically noted. In the case of Carroll v. New People’s Bank, even if Carroll could prove standing, in the long run, NPB responded quickly and fixed the issues in the letter. 

Has Hooters moved quickly? How much money do you think Hooters could have saved in legal fees by taking down their inaccessible website and quickly replacing it with a simple, accessible website until their new site could be designed, developed, and launched? You decide.

Quick Might Not Be Fast Enough

It’s clear that people with disabilities are no longer hesitating to file suit for an inaccessible website. Whether they have standing or not, you could be faced with one lawsuit after another until you can audit your site and remediate it accordingly. And, given the findings in Haynes v. Hooters of America, LLC, the courts might let each lawsuit stand. So, circling back to the first lesson, have your site audited using automated and manual testing, get it fixed if issues are found.

Conclusion

Until the DOJ responds to the pleas of lawmakers across the nation to create specific regulations regarding website accessibility, courts will continue to review other cases to determine what’s moot or not. Don’t wait to find out. Get audited. Fix the issues.

If you don’t know what to do, Promet’s Accessibility Audit, Remediation, and Training Roadmap will help you end a current lawsuit and prevent any future lawsuits.
 

Footnotes

1. https://www.cuna.org/uploadedFiles/Advocacy/Priorities/Removing_Barriers_Blog/ADA%20DOJ%20ES-RD%20Letter%20-%20FINAL.pdf
2. https://www.ada.gov/anprm2010/equipment_anprm_2010.htm
3. https://www.reginfo.gov/public/do/eAgendaMain
4. https://www.cuna.org/uploadedFiles/Advocacy/ADAAGLetter71918.pdf
5. https://www.adatitleiii.com/tag/winn-dixie/
6. https://casetext.com/case/carroll-v-new-peoples-bank-inc
7. https://law.justia.com/cases/federal/appellate-courts/ca11/17-13170/17-13170-2018-06-19.html
8. https://www.adatitleiii.com/2018/02/ada-title-iii-lawsuits-increase-by-14-percent-in-2017-due-largely-to-website-access-lawsuits-physical-accessibility-legislative-reform-efforts-continue/
9. https://www.adatitleiii.com/2018/07/website-access-and-other-ada-title-iii-lawsuits-hit-record-numbers/
Oct 15 2018
Oct 15

A Drupal event is one such destination that I long to visit, each year. Plus, this one happening in Germany was a special one. Yes, you got it right, I’m talking about the Drupal Europe that took place last month at the Darmstadt, Germany. And to answer what apparently made this one a special Drupal event for me is that it was a community-driven event, the scale of which matches with that of a DrupalCon. Such enthusiasm and such efforts! Applauds and appreciation to the entire Drupal community of Europe and worldwide for having shown such a withstanding support for Drupal and making #DrupalEU such a massively successful event.

 

We Volunteer! 
Yes, did volunteer and contribute in order to do our share in supporting this massive and enthusiastic community-driven event called the Drupal Europe 2018. Isn’t that what is expected out of a hardcore Drupaler like us, who’s been a working aggressively for the community ever since 2012. We’re involved with the website part of the event and came up with a few bug fixes too. We intended to contribute on a way larger scale, but alas the time constraint and the work commitment. While not trying to redeem ourselves, but isn’t working on a Drupal project for a client is too a form of contribution done for the community?! Did just heard a yes from you!

Drupal Email

The Enthusiastic Event & Visually-Stunning Venue! 
Drupal Europe is said to be the biggest European Drupal event, by far. The event was organized at the Darmstadtium - a beautiful structure of modern architecture with a mark of history living in it. Yes, amidst the exceptionally designed modern Darmstadtium stands an old wall from history. 

Drupal Europe, 2018

The five-day event at this exceptional structure had almost 1000 Drupalers from across the world. The event was divided into three major areas; one, where the booths were set up by different Drupal sponsors, two, where the sessions were being conducted by the Drupal experts, and third, where the Bird Of Feather(BOF) sessions were organized.

 

Entire CMS Community Under One Roof! 
Drupal Europe spoke for and promoted Drupal extensively and dedicatedly. But that does also not mean shunning away from the entire open source community. Hence, a concept of ‘Open Web Lounge’ was also implemented at  Drupal Europe, like other open source community events. Here people from the entire open source community come under one roof to brainstorm and discuss relevant topics of the community. It’s an informal gathering where a bunch of like-minded people tries and contribute to the community with their solutions & suggestions. This is one of the healthiest things happening across all the community-based events.

 

Sessions, Booths & BOFs
A Drupal event is always about a host of things to do and programs to attend. So much so that one always misses out on several such things. So did I! But thankfully I also got to attend a series of sessions, which I completed cherished. Like the one on the ‘Autosave and concurrent editing in Drupal 8’ by Hristo Chonov,  ‘Drupal Diversity & Inclusion’ by Tara King & Elli Ludwigson, ‘The Way We Work’ by Kevin Bridges and Elli Ludwigson, and many more! Apart from this I also attended a couple of BOFs and walked through different stalls and connected with different people from the Drupal community.

Drupal Europe, 2018

A Perfectly Creative Prenote!
Yes, this time I’ll prefer sharing details about the prenote prior to that of the Driesnote. The prenote topped the list of fun events at Drupal Europe, 2018. Jeffrey A. McGuire, along with Campbell Vertesi, Adam Juran and others came up with the most creative and innovative Prenote ever. And the part that stole my heart was the recreation of ‘Imagine’ with a touch of Drupal in it. Just Phenomenal!

Drupal Europe, 2018

The Driesnote
One of the most awaited parts of any Drupal event has to be the #Driesnote, by the founder of Drupal - Dries Buytaert. He started with a goal to build a Drupal that people love, and shared the roadmap he has structured to reach this goal. He went ahead sharing the updates regarding the initiatives taken so far with the community members present at Drupal Europe. He also spoke about the marriage of React UI and Drupal, in order to improve the overall administration experience of the site. Like always, Driesnote was an insightful session to attend. Here’s the link to the entire Driesnote, for those who missed out on it.

 

The #DrupalCEO Dinner!
Last but certainly not the least! It was a night to remember with the senior level executives of the companies actively working for the Drupal community and the founder of Drupal himself - Dries Buytaert. And we feel privileged to be a part of this exclusive and prestigious dinner night. It’s a new initiative, initially started by a handful of CEOs of Drupal companies, which later got widely popular. Though an informal event, the DrupalCEO dinner is an event that brings out the best of suggestions and surveys from the leading Drupal-ers around the world.

The #DrupalCEO Dinner, Drupal Europe, 2018

This one was my first Drupal community-driven event and believe me, it was a phenomenal experience in itself. The enthusiasm and efforts of the community were soaring aloud of the strength of the Drupal community at large, which apparently translated into such a progressive vibe at the event!

Oct 15 2018
Oct 15
How to Create a Search Box with a Sliding Effect in Drupal 8

One of OSTrainings members asked how to create a search box with a sliding out effect. Their goal was to arrive at the search box similar to the one you can find at the top of Drupal's own website.

In this tutorial, you will learn how to create a search box that expands once you clicked on its icon. Also, while it stays expanded until you close it, it will keep blurring out your main menu.

We’re going to use a Bootstrap subtheme for this demonstration.

Let’s start!

Step #1 - Create a Bootstrap Subtheme

This tutorial assumes that you have already downloaded the Bootstrap theme and created a subtheme as explained in the "How to Create a Drupal 8 Bootstrap Subtheme" lesson.

Let's move on to the next step.

  • Configure the libraries file to point to the css/style.css and js/script.js files:

Configure the libraries file

  • Create an empty style.css file inside the css folder of your theme.
  • Create an empty script.js file inside the js folder of your theme.

Create an empty script.js file

Step #2 - Rearrange the Block Layout

  • Click Structure > Block layout.
  • Drag and drop the blocks until they match the ones in the image:

Drag and drop the block

Step #3 - the CSS

The first thing you need to do is to identify the CSS selector of the input element:

Identify the CSS selector

  • Once you’ve found it, add in there the following CSS code:
.input-group input[type=search] {width: 150px;  float: right;  -webkit-transition: width 0.4s ease-in-out;  transition: width 0.4s ease-in-out;}

This code will resize the search box and move it to the right of the site.

It will also prepare the transition of the element, that will be triggered by the focus event.

  • Target the same element, this time add the :focus pseudo-class:
.input-group input[type=search]:focus {width: 100%;}

This code will resize the search box when it receives the focus:

This code will resize the search box

Search box resized

  • Target two more classes to dim the header and move the search box upwards:
.dimmed {filter: blur(3px);  opacity: .2;  transition: all .3s;}

.sbox {  transform: translate(0, -4em);  -webkit-transition: transform 1s ease-in-out;  -moz-transition: transform 1s ease-in-out;  -o-transition: transform 1s ease-in-out;  transition: transform 1s ease-in-out;}

These two CSS classes will be injected with the help of jQuery when the search box get the focus.

Step #4 - The jQuery

  • Add the following code to your script.js file:
jQuery(".input-group input[type=search]").focus(function(event){jQuery("#navbar").addClass("dimmed");});

jQuery(".input-group input[type=search]").blur(function(event){jQuery("#navbar").removeClass("dimmed");});

The first statement adds the dimmed class to the element with the id=”navbar” when the input[type=search] selector gets the focus.

The second statement removes the class when the input[type=search] selector loses the focus.

Please, take notice that you have to use the word jQuery instead of the $ symbol.

  • Save the file.
  • Refresh the site.

Refresh the site

  • To add the sbox CSS class to the element with id=”search-block-form” when the input field gets the focus, add another line to each one of your jQuery statements:

Add the sbox CSS class

This is a very basic example of what’s possible to achieve in your site with CSS and JS.

There are many ways to do this. If you think there’s a better way, please leave us your comments below.

Final result

What's Next?

Would you like to learn how to build great websites with Drupal? Sign up to OSTraining.com now and right away download our bestselling "Drupal 8 Explained" book.


About the author

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

First came the physical servers which were followed by the virtual machines and now the developer ecosystem is rapidly adopting container and serverless computing. One of the biggest challenges that physical servers pose is their management which virtualisation resolves by emulating the real system thereby streamlining the governance of different functions. Now, container and serverless computing are extrapolating the benefits to a whole new level for the developers. And this is where Kubernetes comes into play.

black and white picture of cables over a machine


Google’s Cloud Next 2018 summit held in San Francisco emphasised upon the company’s active involvement in over thousands of open source projects including Kubernetes. By the time Kubernetes was introduced in Google Cloud, it had more than 20,000 contributors which made it one of the fastest moving projects in the open source history. Kubernetes can be a huge asset in the deployment of projects based on another open source framework - Drupal. But before we plunge into that, let’s traverse along the short timeline of Kubernetes’ formation.

Timeline of Kubernetes formation

Kubernetes was originally developed by a team at Google which has been open-sourced since its launch and is managed by a large community of contributors. RisingStack has compiled an interesting timeline which traces the history of Kubernetes with the birth of the Borg system. 

Around 2003-2004, Google introduced the Borg system, a large-scale internal cluster management system, which was followed by the introduction of Omega cluster management system in 2013.

In the mid-2014, Google introduced the open source version of Borg in the form of Kubernetes. In the mid-2015, Kubernetes v1.0 was officially released.

2016 was the year when Kubernetes went mainstream

2016 was the year when Kubernetes went mainstream with more advanced releases, case studies, conferences, and the support for Windows Server and OpenAPI.

In 2017, big enterprises started adopting and supporting Kubernetes with Microsoft, Oracle, Google, IBM, and Amazon coming up with more container orchestration methods using Kubernetes.

A Closer Look at Kubernetes

A blue septagon with a white sailor wheel inside it and kuberneter written


An open source system, Kubernetes is used for handling containerized application across numerous hosts offering basic mechanisms for deployment, maintenance, and scaling of applications. It is hosted by the Cloud Native Computing Foundation (CNCF). CNCF was formed through the partnership of Google and Linux Foundation. It aims to develop sustainable ecosystems CNCF helps in fostering a community of top-notch projects that orchestrate containers as part of a microservices architecture.

Kubernetes is a portable, extensible open-source platform for managing containerized workloads and services, that facilitates both declarative configuration and automation - Kubernetes documentation

Kubernetes enables you to deploy containerised application swiftly and predictably and can scale containerised applications on the fly. It seamlessly rolls out new features to your containerised applications and optimises your hardware.

The significant features of Kubernetes include:

Deployment of containers and management of rollout control: With Kubernetes, you can describe your containers and define how many you want in a single deployment. It can govern the running of those containers (even across multiple hosts) and also manage changes like updating images, changing variables etc. to your containers.

  • Resource Bin packing: This lets you declare minimum and maximum computer resources (CPU and memory) for all the containers.
     
  • Service delivery: It has the provision of built-in service delivery for the automatic exposure of containers to the internet or other containers in the Kubernetes cluster.
     
  • Autoscaling: It automatically performs load balancing of traffic across matching containers.
     
  • Heterogenous clusters: It helps in developing a cluster with a mixture of virtual machines, on-premises servers, or bare metal in the company data centre.
     
  • Storage support: It has the provision for persistent storage support with support for Amazon Web Services EBS, Google Cloud Platform persistent disks, and many more. Vendors like Red Hat, Dell, NetApp and EMC offer persistent storage for Kubernetes.
     
  • High availability: It has very high availability such as multi-master and cluster federation enabling the linking of clusters together for load balancing.

Docker vs Kubernetes

Note that Kubernetes is not a replacement for Docker but it is for some of the top-of-the-line technologies that have emerged around Docker.
 
One of those technologies is Docker Swarm which is an orchestrator bundled with Docker. It is possible to leverage Swarm instead of Kubernetes but Docker Inc. has chosen to make Kubernetes a part of the Docker Community and Docker Enterprise editions moving forward.

Kubernetes is significantly more intricate than Docker Swarm

Kubernetes is not a drop-in replacement for Swarm. Kubernetes is significantly more intricate than Swarm and needs more work to deploy. But again, the work involved with the container orchestration using Kubernetes would provide a big payoff in the long run - a more governable, resilient application infrastructure. Docker Swarm is a good choice for the development work and smaller container clusters.

Deploying Drupal using Kubernetes

Bay Area Drupal Camp 2017 had a presentation that exhibited the deployment of Drupal leveraging Kubernetes. A digital agency built a Lagoon platform that builds cloud web hosting solutions for decoupled Drupal with Node.js features. It showed that for scaling Drupal to a plethora of annual page views, decoupled CMS architecture enables the deployment of Docker, Kubernetes and OpenStack solutions together in data centres.

[embedded content]


Lagoon platform was created for optimising hosting for Decoupled Drupal sites on the public cloud using OpenStack. With Lagoon, Drupal admins can build containers for PHP with NGINX, run the MYSQL or MariaDB installation in another container with Node.js configured on a third set.

Containers for Redis, Varnish Cache and Solr complete the install with the management of load balancing, page caching and auto-scaling web server nodes to match traffic rates. Lagoon relies upon Red Hat Enterprise Linux and the OpenShift platform in addition to the Original Community Kubernetes Distribution (OKD). System admins would have to use Jenkins, Ansible, Vagrant, TravisCI, Puppet, Docker, and CircleCI for configuration.

Programmers and developers would have to be adept with GraphQL, React, Apollo, Next.js and Prometheus. Lagoon leverages Alpine Linux for container installs from Docker images. Content Delivery Network (CDN) integration completes a different production route for anonymous traffic by geolocation thereby optimising datacentre hardware.

Workflow process with Lagoon involves reading the docker-compose.yml and creating disk images which set up the OS for web servers in containers. Then, disk images are pushed to an OS registry like GitHub or BitBicket. Using Ansible, the disk image is pushed to a git repository and commits are made to Node.js for testing. Lagoon deploys disk images from the git repository for Drupal web hosting requirement s in Kubernetes clusters.

Minishift can be leveraged to run OpenShift server administration on the desktop. Lagoon comprises of server-side rendering for Node.js and React on NGINX, running Drupal on NGINX in isolated containers individually. Then, Varnish Cache is used to handle HTML file transfers to users and CDNs.

Market trends

Two rectangular boxes divided by lines with each block showing percentages on the implementation of the Kubernetes solutionSource: 451 Research

A study conducted by technology research and advisory company 451 Research investigated containers adoptions by enterprises across the wide array of industries. It revealed that enterprises of all sizes are rapidly using containers and man are even deploying and governing their containerised workloads with orchestration software. 52% of the organisations gestured that they are running container management and orchestration software in production today and 71% of the respondents were using Kubernetes.
 
Another survey by Portworx Annual Container Adoption in 2017 included insights from 491 IT pros across a variety of industries and company sizes. It delineated that Kubernetes was the preferred option when it comes to container orchestration(shown in the graph below).

A bar graph with different coloured boxes to illustrate the adoption rate of different container orchestration toolsSource: Portworx

Moreover, a report on Transparency Market Research stated that “key drivers of the Kubernetes solutions market are the rapid growth of container orchestration, increase in investment by vendors, more focus on hybrid cloud and multi-cloud, an increase in adoption of Kubernetes by major players offering cloud computing”.

This report also stated that while North America accounts for the largest share of Kubernetes solutions market, Europe trails behind the second largest. Also, Amazon Web Services, Google Inc., Microsoft Corporation, Red Hat, Inc., Apprenda Inc., UnitedHealth Group, IBM Bluemix, Cisco Systems, Inc., Target, Oracle Corporation, Huawei Technologies Co., Ltd, CenturyLink, Inc. Kismatic, Inc., Heptio, Core OS, Datera, and NavOps are the major vendors.

Conclusion

Drupal as a great content store has grown exponentially due to the presence of its large and active community which is committed towards the perpetual improvement of Drupal to powering digital innovation. Kubernetes, also being an open source software, can of huge help in the Drupal deployment and has made rapid strides with colossal adoption rate among the big enterprises in recent times.

At Opensense Labs, we have been offering a suite of services to provide amazing digital experience to our partners.

Ping us at [email protected] to develop and deploy Drupal-based web applications leveraging the power of Kubernetes.

Oct 13 2018
Oct 13

In 1999, I decided to start dri.es (formally buytaert.net) as a place to blog, write, and deepen my thinking. While I ran other websites before dri.es, my blog is one of my longest running projects.

Working on my site helps me relax, so it's not unusual for me to spend a few hours now and then making tweaks. This could include updating my photo galleries, working on more POSSE features, fixing broken links, or upgrading to the latest version of Drupal.

The past month, a collection of smaller updates have resulted in a new visual design for my site. If you are reading this post through an RSS aggregator or through my mailing list, consider checking out the new design on dri.es.

2018 dri.es redesignBefore (left) and after (right).

The new dri.es may not win design awards, but will hopefully make it easier to consume the content. My design goals were the following:

  • Improve the readability of the content
  • Improve the discoverability of the content
  • Optimize the performance of my site
  • Give me more creative freedom

Improve readability of the content

To improve the readability of the content, I implemented various usability best practices for spacing text and images.

I also adjusted the width of the main content area. For optimal readability, you should have between 45 and 75 characters on each line. No more, no less. The old design had about 95 characters on each line, while the new design is closer to 70.

Both the line width and the spacing changes should improve the readability.

Improve the discoverability of content

I also wanted to improve the discoverability of my content. I cover a lot of different topics on my blog — from Drupal to Open Source, startups, business, investing, travel, photography and the Open Web. To help visitors understand what my site is about, I created a new navigation. The new Archive page shows visitors a list of the main topics I write about. It's a small change, but it should help new visitors figure out what my site is about.

Optimize the performance of my site

Less noticeable is that the underlying HTML and CSS code is now entirely different. I'm still using Drupal, of course, but I decided to rewrite my Drupal theme from scratch.

The new design's CSS code is more than three times smaller: the previous design had almost 52K of theme-specific CSS while the new design has only 16K of theme-specific CSS.

The new design also results in fewer HTTP requests as I replaced all stand-alone icons with inline SVGs. Serving the page you are reading right now only takes 16 HTTP requests compared to 33 HTTP requests with the previous design.

All this results in faster site performance. This is especially important for people visiting my site from a mobile device, and even more important for people visiting my site from areas in the world with slow internet. A lighter theme with fewer HTTP requests makes my site more accessible. It is something I plan to work more on in the future.

Website bloat is a growing problem and impacts the user experience. I wanted to lead by example, and made my site simpler and faster to load.

The new design also uses Flexbox and CSS Grid Layout — both are more modern CSS standards. The new design is fully supported in all main browsers: Chrome, Firefox, Safari and Edge. It is, however, not fully supported on Internet Explorer, which accounts for 3% of all my visitors. Internet Explorer users should still be able to read all content though.

Give me more creative freedom

Last but not least, the new design provides me with a better foundation to build upon in subsequent updates. I wanted more flexibility for how to lay out images in my blog posts, highlight important snippets, and add a table of content on long posts. You can see all three in action in this post, assuming you're looking at this blog post on a larger screen.

October 13, 2018

2 min read time

Oct 12 2018
Oct 12

When I began using Drupal, I was a site builder. I could find a combination of contrib modules to do just about anything without writing a line of code. I made Views that did the seemingly impossible with crazy combinations of filters and field formatters. I built Contexts that placed my blocks exactly where I wanted them, no matter how complex the requirements.

This all changed when I began writing modules and became a developer.

You have a problem? I’ll have a custom hook, a class override, and an event listener created shortly. Custom code to the rescue.

However, owning custom code, which is what having custom code in your repo really is, is much like owning anything else that is custom. It offers the incredible freedom of building exactly what you need, but it comes at a cost.

Take a car for example. A custom car can be built exactly to your specifications with no compromises. However when it comes time for maintenance, there will be no readily available parts. No one else is trained in repairs of your car, so the local auto shop can’t help when it breaks down. Diagnosing and fixing the car is all on you. All of a sudden that generic car that doesn’t meet all your needs, but will suffice with a few modifications isn’t looking so bad.

Enough with the car analogy. Let’s examine the costs specifically related to owning custom code.

  • Upfront cost to write, revise, and review the code.
  • Regression tests must be written to cover the custom functionality.
  • New developers are not familiar with it and take longer to ramp up.
  • Documentation needs to be written, updated, and maintained.
  • Security issues must be monitored and fixed quickly.
  • Code must be updated when the site is migrated to a new platform.
  • Compatibility must be maintained with other libraries as they are updated.

Despite these costs, custom code may still be the right answer depending on your needs. When evaluating the best approach, asking the following questions will often help.

  • Are the downsides of an existing solution that doesn’t exactly meet your needs less substantial than the costs of a custom solution?
  • Can functionality from an existing library or framework be extended or overridden to provide a small targeted change that limits the scope of custom code needed?
  • Would a contribution to an existing module/library solve the issue and allow future development to be done with assistance by a open source community?

If after a review of all of the options, a custom solution is truly needed, adhering to the following will help minimize the custom costs.

  • Strictly adhere to community code standards to make collaboration easier.
  • When extending functionality, only override the methods needed to make your change. Leverage the parent class as much as possible.
  • Architect code to allow for loose couplings, and leverage loose couplings when integrating with others’ code.

None of this is to say that custom code is wrong. It is often needed based upon a project’s requirements. This is simply an appeal to stop and analyze the needs at hand, instead of defaulting to a custom solution that may provide a quick fix, but come with many hidden long-term costs.

So perhaps I was on to something during my site building days by avoiding code. As a developer’s goal is not to write more code, it is to solve problems, build out functionality, and if necessary—write code. Ultimately it’s about delivering value, whether that is using existing tools, writing custom code, or a happy medium somewhere in between.

Oct 12 2018
Oct 12

Each month, we revisit out top Drupal blog posts of the month, giving you the chance to check out some of our favourites. Let’s look at the top blog posts from September 2018.

First one on the list is We made Drupal a lot easier to evaluate by Dries. Matthew Grasmick wrote a blog post about how hard it is to install Drupal, comparing to other platforms. As a result, Dries encouraged the community to improve the evaluator experience. In this blog post, he shows the results until now. 

We continue our list with a blog post Drupal Business Survey 2018 results are in! by One shoe. One shoe and Exove have been working closely with the Drupal Association on the global Drupal business survey, which showed the trends in the Drupal industry, especially among Drupal agencies. See the results. 

The third spot is reserved for a blog post 5 New Features You'll See in Drupal 8.6 by Steve Burge from OSTraining. Major Drupal updates are released twice per year, the second release of the year 2018 was in September, and this blog post looks up the new features of the Drupal 8.6.

Let’s continue with Indiana University Libraries: Upgrading to Drupal 8, Improving Search, and More by Lauren Seaton from Blue Spark. This is a case study. Lauren introduces us to their project goals and their approach to achieve them. 

Our fifth choice is Server-side Rendering Best Practices: How We Run Decoupled Websites with 110 Million Hits per Month by Michael Schmid from Amazee Labs. Michael guides us through the process of coding and infrastructure of Lagoon, an Open Source: build and development system. He shares a presentation from Decoupled Drupal Days, which shows how they set up a complex project, and in this blog post he sums it up.

The sixth blog post we would like to highlight is Drupal vs WordPress - A Lego Analogy by Rob McBryde from Mediacurrent. Before you build your website, you need to choose a platform to do it on. There is a long list of CMSs you can choose from. Before you do that, you have to ask yourself, which one is the right one for you. In this blog post, you will see the difference between WordPress and Drupal. 

The next one is Future-Proofing Your Content with Drupal 8 by Tim Cruse from Duo Consulting. Tim explains that after talking to companies, many of them hesitate to upgrade to Drupal 8 because of its cost. He believes there are a lot of reasons to upgrade that overweights the cost, but the most important is that allows you to future-proof your content. In this blog post, he explains what he means by that. 

Eight one is a Drupal 8 Migration with Multiple Paragraph References by Joel Steidl from Aten Design Group. He explains that he ran into an issue migrating Paragraph Entities (Entity Reference Revisions) with a few open core bugs and ended up being really simple to solve within preparing  Rowin the source plugin. He shows us how he solved it.  

And the last but not least one is a blog post Drupal 7, 8 and 9 by Dries. Dries provides us with some further details about Drupal 9 release. We are excited! 

These are our top blogs from September… We will be collecting best Drupal blog posts in October too. Stay tuned.    

Oct 11 2018
Oct 11

In some cases, it can be extremely interesting to be able to override a configuration dynamically. One of the first use cases immediately noticeable is in the case of a site factory with a set of shared and deployed features, and therefore identical configurations shared. And this on a website factory that is based on the native multi-site architecture of Drupal 8, or based on modules like Domain or Micro site that can host multiple sites from a single instance Drupal 8.

The immediate benefit is to be able to dynamically use and configure the contributed Drupal modules in the context of an instance deployed on a site factory, and thus to benefit from all the work already done, while modifying only certain configuration elements of the module to adapt it to the context where it is used.

Let's move on to practice, on a concrete example. Imagine in the context of a site factory, a galaxy of sites with a set of shared taxonomy vocabularies. From a maintenance point of view, the advantage is to be able to maintain and modify any configuration related to these vocabularies on all the sites that use it. From the point of view of each site, the major issue is that the vocabulary name (and therefore its possible uses in field labels, automatically generated aliases, etc.) can and must differ.

We have several methods to overload the vocabulary name for each site. The simplest method, in the case of a multi-site architecture is to override it from the settings.php file of each instance.

$config['taxonomy.vocabulary.VOCABULARY_ID']['name'] = 'NEW_VOCABULATY_LABEL';

And it's over. But this method requires access to the server, and is therefore not administrable from a site instance itself by an administrator or a webmaster. In addition, this method can only be used in the context of a website factory based on Drupal's multi-site architecture, and not in the context of a Domain or Micro site based website factory, since both architectures actually use one and the same Drupal 8 instance.

A second method is to provide a configuration form that will be responsible for changing the vocabulary labels for each site instance.

For example

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    foreach ($this->vocabularies as $id => $label) {
      $original_label = $this->configFactory->get('taxonomy.vocabulary.' . $id)->getOriginal('name', FALSE);
      $form[$id] = [
        '#type' => 'fieldset',
        '#title' => $label . ' (original : ' . $original_label . ')',
      ];
     
      $form[$id][$id . '_label'] = [
        '#type' => 'textfield',
        '#title' => $this->t('Label'),
        '#maxlength' => 64,
        '#size' => 64,
        '#default_value' => ($this->settings->get('vocabularies.' . $id . '.label')) ?: $label,
      ];

      $options_widget = [
        '' => $this->t('Default'),
        'entity_reference_autocomplete' => $this->t('Autocompletion (with automatic creation)'),
        'options_buttons' => $this->t('Checkboxes (without automatic creation)'),
        'options_select' => $this->t('Select list (without automatic creation)'),
      ];
      $form[$id][$id . '_widget'] = [
        '#type' => 'select',
        '#title' => $this->t('Widget'),
        '#options' => $options_widget,
        '#default_value' => ($this->settings->get('vocabularies.' . $id . '.widget')) ?: '',
      ];
      
    }

    return parent::buildForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, FormStateInterface $form_state) {
    parent::validateForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    parent::submitForm($form, $form_state);

    foreach ($this->vocabularies as $id => $label) {
      $this->settings->set('vocabularies.' . $id . '.label', $form_state->getValue($id . '_label'));
      $this->settings->set('vocabularies.' . $id . '.widget', $form_state->getValue($id . '_widget'));
    }

    // We need to store here the node types and vocabularies because we can not
    // call the entity type manager in the TaxonomyConfigOverrides service
    // because of a circular reference.
    $this->settings->set('node', $this->getNodeTypeIds(FALSE));
    $this->settings->set('taxonomy_vocabulary', $this->getVocabularyIds(FALSE));

    $this->settings->save();
    drupal_flush_all_caches();
  }

}

As you can see, we can override a lot more than the simple label of a vocabulary. For example the widget used in content editing forms. And many other things.

Then once this form in place and its configuration elements saved, we just need to create a service that will implement the service config.factory.override.

services:

  MY_MODULE.taxonomy_overrider:
    class: \Drupal\MY_MODULE\TaxonomyConfigOverrides
    tags:
      - {name: config.factory.override, priority: 300}
    arguments: ['@config.factory']

And we create the class TaxonomyConfigOverrides

<?php

namespace Drupal\MY_MODULE;

use Drupal\Core\Cache\CacheableMetadata;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Config\ConfigFactoryOverrideInterface;
use Drupal\Core\Config\StorageInterface;

/**
 * Override Taxonomy configuration per micro site.
 *
 * @package Drupal\MY_MODULE
 */
class TaxonomyConfigOverrides implements ConfigFactoryOverrideInterface {

  /**
   * The config factory.
   *
   * @var \Drupal\Core\Config\ConfigFactoryInterface
   */
  protected $configFactory;
  
  /**
   * An array of all the vocabulary ids.
   *
   * @var array
   */
  protected $vocabularies;

  /**
   * An array of all the node type ids.
   *
   * @var array
   */
  protected $nodeTypes;

  /**
   * The settings of the factory taxonomy configuration.
   *
   * @var \Drupal\Core\Config\Config
   */
  protected $taxonomySettings;

  /**
   * Constructs the object.
   *
   * @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
   *   The config factory.
   */
  public function __construct(ConfigFactoryInterface $config_factory) {
    $this->configFactory = $config_factory;
    $this->taxonomySettings = $this->configFactory->get('MY_MODULE.taxonomy_settings');
    $this->vocabularies = $this->getVocabularyIds();
  }

  /**
   * {@inheritdoc}
   */
  public function loadOverrides($names) {
    $overrides = [];

    foreach ($this->vocabularies as $vocabularyId) {
      $label = $this->taxonomySettings->get('vocabularies.' . $vocabularyId . '.label');
      if (empty($label)) {
        continue;
      }

      $vocabulary_config_id = $this->getVocabularyConfigName($vocabularyId);
      if (in_array($vocabulary_config_id, $names)) {
        $overrides[$vocabulary_config_id]['name'] = $label;
      }

    }

    return $overrides;
  }

  /**
   * @param $vocabularyId
   * @return string
   */
  protected function getVocabularyConfigName($vocabularyId) {
    return "taxonomy.vocabulary.{$vocabularyId}";
  }

  /**
   * Get an array of vocabulary id.
   *
   * @return array
   *   An array of vocabulary id.
   */
  protected function getVocabularyIds() {
    return $this->taxonomySettings->get('taxonomy_vocabulary') ?: [];
  }

  /**
   * {@inheritdoc}
   */
  public function getCacheSuffix() {
    return 'config_taxonomy_label';
  }

  /**
   * {@inheritdoc}
   */
  public function getCacheableMetadata($name) {
    $meta = new CacheableMetadata();
    $meta->addCacheableDependency($this->taxonomySettings);
    return $meta;
  }

  /**
   * {@inheritdoc}
   */
  public function createConfigObject($name, $collection = StorageInterface::DEFAULT_COLLECTION) {
    return NULL;
  }

}

And so you can now share a common shared configuration on a multitude of sites, while allowing everyone to customize at will different configuration elements according to their needs.

Override vocabulary settings

Of course, this method must be used according to the needs and architecture of the site factory. Using such a method in the context of a multi-site architecture for anything and everything is not necessarily the best way. Neither the most optimum. When it can be enough simply to provide initial configuration elements, for this or that module, by the code and then let him live his life within the instance of the website factory.

Do not hesitate to seek advice from a Drupal 8 developer who can define with you the best strategy to ensure that your site factory has all the assets to evolve with confidence, and to gain maturity in the long term. 

Oct 11 2018
Oct 11

Authors are eager to learn, and a content-focused community is forming. But there’s still work to do.

Video showing highlights of speakers, presenters, and attendees interacting at ConCon 2018.

When you spend most of your time focused on how to serve constituents on digital channels, it can be good to simply get some face time with peers. It’s an interesting paradox of the work we do alongside our partners at organizations across the state. Getting in a room and discussing content strategy is always productive.

That was one of the main reasons behind organizing the first ever Massachusetts Content Conference (ConCon). More than 100 attendees from 35 organizations came together for a day of learning and networking at District Hall in Boston. There were 15 sessions on everything from how to use Mayflower — the Commonwealth’s design system — to what it takes to create an awesome service.

Graphic showing more than 100 attendees from 50 organizations attended 15 sessions from 14 presenters at ConCon 2018.

ConCon is and will always be about our authors, and we’re encouraged by the feedback we’ve received from them so far. Of the attendees who responded to a survey, 93% said they learned about new tools or techniques to help them create better content. More so, 96% said they would return to the next ConCon. The average grade attendees gave to the first ever ConCon on a scale of 1 to 10 — with 1 being the worst and 10 the best — was 8.3.

Our authors were engaged and ready to share their experiences, which made for an educational environment, for their peers as well as our own team at Digital Services. In fact, it was an eye opening experience, and we took a lot away from the event. Here are some of our team’s reflections on what they learned about our authors and our content needs moving forward.

We’re starting to embrace data and feedback

“The way we show feedback and scores per page is great but it doesn’t help authors prioritize their efforts to get the biggest gain for their constituents. We’re working hard to increase visibility of this data in Drupal.”

— Joe Galluccio

Katie Rahhal, Content Strategist
“I learned we’re moving in the right direction with our analysis and Mass.gov feedback tools. In the breakout sessions, I heard over and over that our content authors really like the ones we have and they want more. More ways to review their feedback, more tools to improve their content quality, and they’re open to learning new ways to improve their content.”

Christine Bath, Designer
“It was so interesting and helpful to see how our authors use and respond to user feedback on Mass.gov. It gives us a lot of ideas for how we can make it easier to get user feedback to our authors in more actionable ways. We want to make it easy to share constituent feedback within agencies to power changes on Mass.gov.”

Embedded tweet from @MassGovDigital highlighting a lesson on good design practices from ConCon 2018.

Joe Galluccio, Product Manager
“I learned how important it is for our authors to get performance data integrated into the Drupal authoring experience. The way we show feedback and scores per page is great but it doesn’t help authors prioritize their efforts to get the biggest gain for their constituents. We’re working hard to increase visibility of this data in Drupal.”

Our keynote speaker gave a great use case for improving user journeys

Bryan Hirsch, Deputy Chief Digital Officer
“Having Dana Chisnell, co-founder of the Center for Civic Design, present her work on mapping and improving the journey of American voters was the perfect lesson at the perfect time. The page-level analytics dashboards are a good foundation we want to build on. In the next year, we’re going to research, test, and build Mass.gov journey analytics dashboards. We’re also spending this year working with partner organizations on mapping end-to-end user journeys for different services. Dana’s experience on how to map a journey, identify challenges, and then improve the process was relevant to everyone in the room. It was eye-opening, enlightening, and exciting. There are a lot of opportunities to improve the lives of our constituents.”

Want to know how we created our page-level data dashboards? Read Custom dashboards: Surfacing data where Mass.gov authors need it

Embedded tweet from @epubpupil highlighting her positive thoughts on Dana Chisnell’s keynote presentation on mapping and improving the journey of American voters.

The Mayflower Design System is a work in progress

“It’s great to see there’s a Mayflower community forming among stakeholders in different roles across state government. ”

— Minghua Sun

Sienna Svob, Developer and Data Analyst
“We need to work harder to build a Mayflower community that will support the diversity of print, web, and applications across the Commonwealth. Agencies are willing and excited to use Mayflower and we need to harness this and involve them more to make it a better product.”

Minghua Sun, Mayflower Product Owner
“I’m super excited to see that so many of the content authors came to the Mayflower breakout session. They were not only interested in using the Mayflower Design System to create a single face of government but also raised constructive questions and were willing to collaborate on making it better! After the conference we followed up with more information and invited them to the Mayflower public Slack channel. It’s great to see there’s a Mayflower community forming among stakeholders in different roles across state government. ”

All digital channels support content strategy

Sam Mathius, Digital Communications Strategist
“It was great to see how many of our authors rely on digital newsletters to connect with constituents, which came up during a breakout session on the topic. Most of them feel like they need some help integrating them into their overall content strategy, and they were particularly excited about using tools and software to help them collect better data. In fact, attendees from some organizations mentioned how they’ve used newsletter data to uncover seasonal trends that help them inform the rest of their content strategy. I think that use case got the analytics gears turning for a lot of folks, which is exciting.”

Authors are eager and excited to learn and share

“I’d like to see us create more opportunities for authors to get together in informal sessions. They’re such a diverse group, but they share a desire to get it right.”

— Fiona Molloy

Shannon Desmond, Content Strategist
“I learned that the Mass.gov authors are energetic about the new content types that have been implemented over the past 8 months and are even more eager to learn about the new enhancements to the content management system (CMS) that continue to roll out. Furthermore, as a lifelong Massachusetts resident and a dedicated member of the Mass.gov team, it was enlightening to see how passionate the authors are about translating government language and regulations for constituents in a way that can be easily and quickly understood by the constituents of the State.”

Fiona Molloy, Content Strategist
“Talking to people who came to ConCon and sitting in on various sessions, it really struck me how eager our content authors are to learn — whether from us here at Digital Services or from each other. I’d like to see us create more opportunities for authors to get together in informal sessions. They’re such a diverse group, but they share a desire to get it right and that’s really encouraging as we work together to build a better Mass.gov.”

Embedded tweet from @MassGovDigital highlighting a session from ConCon 2018 in which content authors offered tips for using authoring tools on Mass.gov.

Improving content and author support is a continual process

Adam Cogbill, Content Strategist
“I was reminded that one of the biggest challenges that government content authors face is communicating lots of complex information. We need to make sure we understand our audience’s relationships to our content, both through data about their online behavior and through user testing.”

Greg Derosiers, Content Strategist
“I learned we need to do a better job of offering help and support. There were a number of authors in attendance that didn’t know about readily-available resources that we had assumed people just weren’t interested in. We need to re-evaluate how we’re marketing these services and make sure everyone knows what’s available.”

Embedded tweet from @MassGovDigital highlighting the start of ConCon 2018.

Thinking about hosting your own content conference? Reach out to us! We’d love to share lessons and collaborate with others in the civic tech community.

Oct 11 2018
Oct 11
Mike and Matt interview members of the Drupal 8 JavaScript modernization initiative to find out what's going on, and the current status.
Oct 11 2018
Oct 11
Perhaps the most critical component of any decoupled Drupal architecture is a robust authentication mechanism that protects data transmitted between a Drupal site and API consumers like JavaScript applications and native mobile applications. While Drupal core makes available HTTP Basic Authentication and cookie-based authentication, both easy to use, neither of these approaches is sufficiently secure when it comes to best practices.
Oct 11 2018
Oct 11

The second Amazee Labs webinar took place last Friday, 28th September 2018. Philipp Melab gave a stunning presentation on “Atomic Design in Drupal with GraphQL & Twig”. Here's a short recap of what we learned together. You can watch the entire webinar online here

We kick-started the webinar with a summary of what we learned in the first webinar, in case you missed that you can read up on it here. This time our focus was to build a real-world example website for a fictional web agency called Amazing Apps.

Amazing Apps design

Philipp wanted to pack as much information as possible into the webinar, so he set up a Github repository with everything you need to get started. We were shown a brief design of the end goal then jumped straight into the meat of the presentation by dissecting the git history of each commit in the repository together.

Clean, concise, & a well-structured frontend.

Fractal is a tool to help you build and document web component libraries and then integrate them into your projects. We were led through the basics of what Fractal provides as a starting point. Then we jumped through the repository to a point where we had a couple of components built, along with colours defined using CSS variables along with demo text content.

As part of atomic design, we explored and learned the use of atoms, molecules, and organisms. Atoms demonstrate all your base styles at a glance, such as a logo or a button. Molecules are UI elements containing two or more atoms functioning together as a unit, such as a menu. Organisms are relatively complex UI components containing multiple molecules, atoms, or other organisms, such as the header or footer.


fragment Menu on Menu {
  links {
    label
    url {
      path
    }
  }
}

Once we got to the menu component, we were treated with the first GraphQL fragment, from here we could navigate up the templates from molecule to the header organism, and then to the page layout template which called the twig block named header. We can then override these blocks with the use of the twig tag extends to inject our Fractal based templates as necessary along with our GraphQL fragment.

GraphQL Twig should be used to decouple things where it makes sense, building a fully decoupled solution still costs a lot regarding development; therefore GraphQL Twig is the right solution to enhance and modernise a site in a feature based manner.

Learnings as a webinar host

It was our second webinar, so we had a few learnings from our first edition which we incorporated into the new session. We made sure to start earlier with the marketing campaign to ensure a good turn out, and ideally a larger audience; we ended up with over 40% increase in the total audience!

Check out the Github repository and accompanying videos:

Amazee Labs would like to thank everyone who attended the live session, we enjoyed being able to share this with you, and we look forward to hosting another Amazee Labs webinar in the future.

Oct 10 2018
Oct 10

Variety of content and the need for empathy drive our effort to simplify language across Mass.gov

Nearly 7 million people live in Massachusetts, and millions more visit the state each year. These people come from different backgrounds and interact with the Commonwealth for various reasons.

Graphic showing more than 3 million visitors go to Mass.gov each month.

We need to write for everyone while empathizing with each individual. That’s why we write at a 6th grade reading level. Let’s dig into the reasons why.

Education isn’t the main factor

The Commonwealth has a high literacy rate and a world-renowned education network. From elementary school to college and beyond, you can get a great education here.

We’re proud of our education environment, but it doesn’t affect our readability standards. Navigating the Women, Infants, and Children (WIC) Nutrition Program might be challenging for everyone.

Complexity demands simplicity

People searching for nutrition services are doing so out of necessity. They’re probably frustrated, worried, and scared. That affects how people read and retain information.

Learn about our content strategy. Read the 2017 content team review.

This is the case for many other scenarios. Government services can be complicated to navigate. Our job is to simplify language. We get rid of the white noise and focus on essential details.

Time is not on our side

You don’t browse Mass.gov in your free time. It’s a resource you use when you have to. Think of it as a speedboat, not a cruise ship. They’ll both get you across the water, just at different speeds.

Graphic showing desktop visitors to Mass.gov look at more pages and have longer sessions than mobile and tablet visitors.

Mass.gov visitors on mobile devices spend less time on the site and read fewer pages. The 44% share of mobile and tablet traffic will only increase over time. These visitors need information boiled down to essential details. Simplifying language is key here.

Exception to the rule

A 6th-grade reading level doesn’t work all the time. We noticed this when we conducted power-user testing. Lawyers, accountants, and other groups who frequently use Mass.gov were involved in the tests.

These groups want jargon and industry language. It taught us that readability is relative.

Where we are today

We use the Flesch-Kincaid model to determine reading level in our dashboards. It accounts for factors like sentence length and the number of syllables in words.

This is a good foundation to ensure we consistently hit the mark. However, time is the most important tool we have. The more content we write, the better we’ll get.

Writing is a skill refined over time, and adjusting writing styles isn’t simple. Even so, we’re making progress. In fact, this post is written at a 6th grade reading level.

Oct 10 2018
Oct 10

image of team working to put pieces of a puzzle together The reality is that running a business is such a diverse and complex endeavor that managing complex and rapidly evolving software solutions needed to execute the mission can be an overwhelming component. It already takes enough energy and expertise to be proficient in managing people, knowing your vertical, regulating cash flow, envisioning new products, evaluating old products, and on and on and on. The problem, however, is that if you don’t leverage complex and rapidly evolving software solutions to handle processes, you end up drowning in inefficiency and inconsistency. So therein lies a significant and difficult problem because you likely didn’t get into business to become an informal senior software architect. And that’s where leveraging something like a robust CMS comes into play. 

Let’s look at some of the ways leveraging a modern CMS, like Drupal, for example, can significantly streamline your business and free you to, well, run your business.

CMS is more than a CMS 

So in simplest terms, a CMS is a Content Management System. Historically, that basically meant providing standard functionality for perhaps managing blog content for a public website. The truth is, however, today it’s far more than that. There’s a whole range of CMS options that vary from that ultimately simple blog scenario to enterprise level development frameworks upon which you can build nearly any kind of web-based software solution. So in its infancy, it may have been largely all about getting a simple “brochure” site up with some basic management, but today it’s being used to provide some of the most sophisticated enterprise web solutions that are critical to modern business strategy. And in many cases, it’s leveraged internally to empower the management of the business in a highly effective and efficient manner. We’ll cover some more tangible examples in a minute, but first we need to get an important question out of the way. 

Which CMS? 

A CMS is a broad-ranging category of systems, and there is still a ton of flexibility in choosing a CMS. In fact, we’ve written articles on this topic and built a little tool to help you figure that out. The different management systems cover a wide range of use cases, so it can be difficult to determine which is right for a given situation at times. There are a number of extremely simple CMS setups that can work great on a low budget, with very flexible requirements, and without needs for complex solutions like custom integrations. On the other end are systems like Drupal (our CMS framework of choice) that allows you do virtually anything you want as well as continue to leverage a whole lot of components included in the core system or built by those extending the system in powerful ways. It’s this latter category of enterprise-level customizable CMS that we will focus on here because that’s where the exciting power lies.

 Which CMS is best for your website?  Take our CMS Quiz and find out!

Real world scenarios

Let’s look at some specific examples of just what these systems can do. And this isn’t hypothetical. These are exactly the types of solutions we’ve built for our clients with an extensible CMS platform like Drupal as our starting point.

Employee collaboration

Email. Chat. Documents. Meetings. There is a lot of internal chatter and management that goes on within a corporation, and the magnitude of the management of that cannot be overstated. Who hasn’t found themselves almost daily wanting to just disconnect from the internet for 20 minutes to take a breather from all the chaos swirling around? Well, the right CMS can mitigate a lot of that. You can use a whole host of building blocks to build an employee portal where coworkers can chat, send notifications, collaborate on policy documents, receive corporate notifications, see a team calendar, reserve a conference room, assign tasks, etc - all with deep tracking and revisioning and all within one ecosystem that is accessible from the desktop, the laptop, and mobile devices. With this strategy, you find yourself having a whole different experience. No more depending on how different people like to store and organize their local copy of largely outdated documents. No more relying on email history to track a decision that was made or find a digital asset. No more walking around the hall looking for an empty conference room. No more being stuck solving an accounting problem because that person is on vacation and has a local spreadsheet on their laptop. Best of all - everyone uses the same tools and those tools are managed from a single infrastructure. Sounds great, doesn’t it?

Client management

Let’s be honest - managing clients is often more difficult than managing your own workforce because your clients aren’t in your building, on your schedule, or under your control. There are countless phone calls, emails, shared documents, meeting decisions, deadlines, and other elements that can make it easy to lose sight of the forest for the trees. And it can be overwhelming to manage and well, frankly, quite embarrassing when something slips through the cracks or someone who needs to know isn’t in the know.

A CMS based solution can provide a platform to minimize and consolidate client management needs into a system that depends far less on individual availability and manual process and allows for a much more robust client relationship. Using a CMS as a platform, you can build systems that allow sending an invoice in a few clicks, with automated reminders and tracking of unpaid invoices. That same system can allow clients to track progress on major requests, and send or request updates. It can also run reports on product subscriptions that are set to expire, or highlight clients that are typically late paying their bills, or prioritize requests that haven’t been responded to in the past x days. It can also allow clients to pay their invoices online, engage live chat support, access help documentation, or receive alerts about upcoming products - again, all tracked in a single ecosystem and in full view of everyone in your business who needs visibility of some or all of the client engagement. It can literally transform how things are done and has huge ROI potential because it literally may save you from losing clients and make the ones that stay happier.

Content or product management

So what about managing the products or services your company actually provides? A CMS can do that too. It might mean allowing those who manage the warehouse to manage inventory, which is immediately reflected on the public-facing ecommerce site. Or it might mean serving, tracking and reporting online ads. Or it may mean providing a robust content management workflow for new stories and white papers that you offer your customers. And it all can leverage the same building blocks for tracking, notifications, document management, user roles, and permissions, etc., that a modern CMS can provide. Better yet, multiple CMS systems can even be built to talk to each other so that perhaps your Client Management system can get info about products your client has purchased from your Product Management or your Employee Collaboration system can be told to set follow-up reminders for your employees based on the activity of their clients. Or maybe all of these systems are really just one system that gives appropriate access to all who need it. The possibilities are endless.

So where do we go next?

So we’re only scratching the surface here, but if you have a heavy dependence on manual processes, or a lot of duplication of effort, or a difficulty tracking all the moving requirements, conversations or documentation - then a robust software solution built upon a CMS could be a key opportunity to making your processes more efficient and effective and allow you to focus on building your business, not running your business. The web today is not the web it even was 5 years ago so taking the time to see what’s possible can really change your whole perspective on how your business can function. Exciting times!

image with text offering access to our free CMS Selection quiz.

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