Jan 30 2019
Jan 30

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

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

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

 

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

 

Our Weekend Sessions

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

 

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

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

Why should you attend Drupal Camp? 

[embedded content]

 

Exchange knowledge

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

Network

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

Recruit and be recruited

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

Reasons for attending the weekend eventImg Cred: Drupal Camp

 

 

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

Tickets 

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

 

Jan 30 2019
Jan 30

We’re featuring some of the people in the Drupalverse! This Q&A series highlights individuals you could meet at DrupalCon.

Every year, DrupalCon is the largest gathering of people who belong to this community. To celebrate and take note of what DrupalCon means to them, we’re featuring an array of perspectives and fun facts to help you get to know your community.
 

Jan 30 2019
Jan 30

There are various ways you can add blocks to regions in pages in Drupal. You could add it in the block interface, use Panels or Context. But what if you just want to place a block directly in a Twig template?

The simplest way to place a block in a Twig template is to use the Twig Tweak module. Twig Tweak is a very handy module that gives you a range of functions to make theming with Twig easier.

Install Twig Tweak

Go ahead and install the Twig Template module. You can download it with composer and enable it with Drush:

composer require drupal/twig_tweak

And enable with Drush:

drush en twig_tweak

Find the block ID

To add the block using Twig Tweak, you need to know the ID of the block. There are a few ways to find the block ID. I find the easiest way is to use the following Drush command, which will return a list of all blocks with their respective ID’s:

drush ev "print_r(array_keys(\Drupal::service('plugin.manager.block')->getDefinitions()));" 

If you know part of the ID, you can search for it by adding grep to the end. For example, I have a block that I know has “profile” in the ID, but I don’t know the full ID. I can find it my using this command:

drush ev "print_r(array_keys(\Drupal::service('plugin.manager.block')->getDefinitions()));" | grep profile

This will return:

[28] => profile-block

So the block ID I need is profile-block.

Use the Twig Tweak drupal_block() function

Now that you have the ID for the block, the next step is to place the block in the Twig template with the drupal_block() function.

{{ drupal_block('blockid') }}

Using my example from above, I can add the Profile Block to the Twig template with:

{{ drupal_block('profile-block') }}

Alternative methods

There a few alternatives to using Twig Template, which you may consider depending on your needs:

  • Add the block in the core block interface
  • Use Panels or Context to assign the block to a region
  • Add the block to a variable in a pre-process function and add that variable to your Twig template

Wrapping up

As you’ve seen in this tutorial, using Twig Tweak makes it relatively simple to place a block in a Twig template. All it takes is one line of code!

Jan 30 2019
Jan 30

One of our OSTraining members asked how it was possible to make multiple displays for Drupal 8 slideshows.

In this tutorial, I will show you how to build a slideshow that uses your article content type to make a slideshow with a teaser.

Step #1. Installing the Slick modules and libraries

First, we need to install the modules and libraries needed for our slideshow.

Install and enable the modules listed below. I would recommend Ddrush for installation "drush -y en slick slick_views slick_extras blazy" or manually:

Now your "Extend menu" should look like this:

1 enabled modules

Next, we need to install the library for slick

2

  • Extract the folder you just downloaded.
  • Rename the folder to /slick/
  • Upload the files to the /libraries/ folder in the root of your site. This is different from Drupal 7, so be careful.
  • When you're finished, your folder structure will look like this:

3

Step #2: Create the Slideshow

Now we're going to use Views to create our slideshow:

  • Go to Structure > Views > Add new view.
  • Enter a "View name".
  • Click "Create a block".
  • For "Display format", choose "Slick carousel" of "fields".
  • Click "Save and edit".

4

In the fields section, add the other fields we want to use. In this case, we will be adding image, body and "Global: custom text".

5

For the image field, select "link image to" and set it to content. Clicking on the image will now take us back to the content.

6

For the body field, select "Formatter" and set it to Slick Text.

7

Go down to "Rewrite Results" and set the "Trim". In this example, I am going to use 300. This is how long the body text will be under the slideshow.

8

Now set the "title", "image", and "body" to be excluded from display. Because of the way Slick handles displays, we are going to use the "Global: custom text" to determine the order of our content.

9

Now set the "custom text". Add:

 {{ title }}

{{ body }}

10

Now we need to configure Slick. The red arrows point to the settings that you are most likely to update:

11

12

13

14

15

Now that we have finished configuring Slick, we need to alter the default pager options. Change the number of "items" to "0", because this is all handled by Slick.

16

Step #3. Place the Slideshow Block

Now we have a slideshow that displays 3 articles at a time with a teaser of content that links back to our full content. Let's add our block to the Block layout.

  • Go to Structure > Block layout.
  • Choose the region you want to use for your slideshow. In my example, I'll use "Content":

17

18

Now make sure to save the block layouts.

19

Step #4. Optimize the Images

Now that we have our slideshow working, let's optimize the images so it is more consistent. You could now create an image style specifically for your slideshow which is explained here in our slideshow tutorial.

Or simply apply one of the predefined styles. Since we already have it documented, I will simply select one of the predefined styles.

Open the view to edit.

Select the image field and update the "image style":

20

Now all the images should be restricted to a 220x220 display making the slideshow a lot cleaner. 

21


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.
Jan 30 2019
Jan 30

Community Together

Towards the end of last year, the Governance Task Force concluded their six-month process and developed a list of thirteen recommendations for evolving Drupal's governance. This followed almost a year of efforts that engaged many stakeholders in the community to share thoughts on Drupal's governance model. Those recommendations were published in a blog, promoted by Dries, and made available in individual issues for community feedback.

We want to thank everyone for their participation in this process.

In particular we'd like to thank David, Ela, Stella, Lyndsey, Rachel, Hussain, and Adam as the leaders of the Governance Task Force.

I would also like to thank the many other community members who have been highly engaged in this process from start to finish. More than a hundred community members  attended community governance roundtables—both virtually and in person—or participated in one-on-one interviews, from across the globe.

Still more members of our community shared their voices in the issue queues, chat rooms, or discussions on these and other blog updates.

Finally, I want to thank all of the existing community bodies who have been crucial in bringing Drupal to this point, and will continue to be a fundamental part of our evolving governance. Groups like the CWG, the Core Maintainer Team, DD&I, the mentorship and contribution team, and a number of others play a critical role in our governance.

It reflects the tremendous care that everyone involved has for this community and a strong commitment to ensuring that this project continues to be a leader, not just in open source technology but also in open source community governance.

The next step is to put those recommendations into action. The Drupal Association is only one part of the community, and only one stakeholder in this effort, but there are a number of things we feel we can do to help move these recommendations forward.

In accordance with our values and principles, when evaluating potential actions, our goal is to identify immediate feasibility and prioritize impact. A number of the task force's recommendations are topics we can tackle very quickly, whereas others, like ones that require fundraising, may have a longer time horizon. Understand, this is not a commentary on the *importance* of any individual recommendation, but rather on which items can be executed quickly and which will take a more extended effort.

Part 1 of this series will focus on the immediate next steps that the Drupal Association can take to help support these recommendations. Part 2 will address the recommendations that will be an ongoing effort over the medium and long term.

Immediate next steps

Grow the Community Working Group (CWG) to offer more support

There is already progress on the recommendation to "Grow the Community Working Group (CWG) to offer more support." Serendipitously, at the same time as the Governance Task Force recommendations were released, the Community Working Group submitted a proposal for a revised charter to Dries and the Drupal Association Board.

The revised charter included complementary changes in-line with the recommendations of the Governance Task Force. Perhaps most powerfully, the proposed changes included two key new elements:

  1. The CWG would switch from reporting to Dries himself to a subcommittee of the Drupal Association Board that consists of a three-member review panel: the two community elected board members and a third person external to the community. This leverages expertise from another open source project and offers a different perspective outside of Drupal.
  2. Providing support and resources for proactive initiatives to enable community health and support efforts. The CWG has long wanted to increase its ability to improve health and equity in our community and the DA can now support these activities.

This change also ensures that the Community Working Group has the appropriate legal and insurance support for its activities, clarifies the membership process, provides term limits for membership, and provides financial support for CWG activities.

The Board was pleased to receive this proposal from the Community Working Group, and voted to adopt the proposed changes in the Dec 5, 2018 board meeting. For more details, review the original proposal from the CWG here, as well as the official charter page which reflects the new updated charter.

Build a new community website to centralize communication and promote new opportunities

Another recommendation of the Governance Task Force that we are able to immediately act on is the recommendation to centralize communication and promote new opportunities for all aspects of the Drupal community. In particular this recommendation focuses on centralizing information about events across the globe, multilingual support, an improved home for regional groups and local associations, and community governance and support.

This recommendation aligns with one of the Drupal Association 2019 goals, which is to "Help the community follow the same path, by amplifying the voices of those who define that path." (For a little more context on our 2019 goals, check out our recent newsletter).

The task force specifically recommended a new dedicated community website, with functionality in many ways similar to an updated Groups.Drupal.org, as well as multilingual support and a strategy for coordinating community messaging and efforts. I'm pleased to report that this is an area in which the Drupal Association has already begun work. While our technical implementation will remain on Drupal.org, rather than as a separate sub-site, the proposed recommendations align closely with initiatives Association staff are working on right now.

Community Liaison Rachel Lawson has already worked with members of the community to create a new Drupal.org/Community portal. This initial change is just the first step: providing a pathway for various personas to find their way to the right part of the community to meet their interest and needs. As this is being written, we are also working on enhancements in line with the Governance Task Force recommendation: support for dedicated sections for key community bodies and providing collaboration tools similar to those that were first put in place for groups.drupal.org many years ago, but enhanced for our current needs.

Expect to hear more about these changes soon.

In the meantime, if you belong to a working group or similar, Rachel Lawson would like to speak with you about making space for your use on Drupal.org/community.

A glossary of key community terms, in clear, translatable language

The Drupal community has a long history as one of the largest and most closely knit communities in open source. On the whole, this has been tremendously positive, and is something for us to take great pride in, but the Governance Task Force rightly recognized a key concern that this creates: it does not scale. A lot of the language we use to describe our community, our leadership, and our governance is undefined or taken for granted. Even for longtime very engaged members there is no guarantee that our personal understandings of key community terms are shared.

Fortunately, we should be able to improve our collective understanding of what these critical terms mean. By assembling an engaged group of community members, DA staff, and existing project leaders we should be able to create an initial glossary of this key community language, and with the help of regional leaders in our global community, ensure that the language is clear and easily translatable.

If you would like to participate in this effort, you can do so in this issue.

Improving collaboration/understanding between the Drupal Association and community

This is another of the Governance Task Force recommendations that can both receive immediate action, but will also always be an ongoing process of iteration and improvement. The recommendation to improve the ways that the Drupal Association collaborates with the community, and in turn to improve the community's understanding of the Drupal Association's work, is a critical one. As the interim Executive Director at the Association and 13-year community member, this is also work very close to my heart.  

There are many steps we can take to move this recommendation forward, but a few of the ones we've taken in the last months or are planning to take in the new year include:

Lastly, here at the Association we can and should continue to strive toward communicating the existing ways we serve the community, many of which could help to support recommendations of the Governance Task Force. For example, when Kevin Thull recently announced the unofficial Drupal recording initiative, it had not occurred to him to consider applying for the Community Cultivation Grant program. This was eye-opening for us, because if it does not occur to even a highly engaged community member like Kevin to apply for a grant, how can we expect others to be aware of the opportunity?

By publicizing Kevin's story, and those of others who have participated in these programs, we encourage others to apply for these opportunities. The pool of funding for these programs is not unlimited, but we certainly encourage community members to apply.

Just the beginning

Acting on these first recommendations is only the beginning. In part 2 we'll address the additional recommendations of the Governance Task Force, and in particular how the Drupal Association can support these more medium and long term efforts. The work of evolving Drupal's governance will be a continuous process, and the Drupal Association is only one stakeholder in the outcome, but by working together with the community we believe we can take significant strides in this direction.

Jan 30 2019
Jan 30

Why not just use the .gitignore file?

Go to the profile of Kaleem Clarkson Photo by Tim Wright on Unsplash

As many of you know, I am a huge Pantheon hosting fanboy and can still remember the days during the beta launch of being blown away that I have three different environments out of the box, with dev, test and live. Another great service they added recently is that all sites receive SSL certificates automatically and all you have to do is redirect all traffic to use HTTPS. In Drupal 8 they suggest doing this in your settings.php file.

After adding the redirect code everything works great until you fire up your local environment (I am currently using Lando) and you are getting a blank screen. After further investigation, you notice it’s the redirect to HTTPS that is causing the issue. My first thought was to make sure my settings.local.php file was correctly being used but for the life of me, I could not get that file to override the redirect code in my settings.php file. If you are reading this and have a better idea on to how to accomplish this then let me know in the comments :)

My next thought was to simply add the settings.php file to my .gitignore file but when I went to my production website I was prompted to reinstall my Drupal site. When adding a file to .gitignore the repo pretends it doesn’t exist so therefore Drupal was telling me to reinstall. Whoooops, my production site kind of needs this file hahahah. So I thought to myself,

How can I ignore my settings.php file in my local repo but still have the original file on production?

After attending Google University for 10 minutes, I stumbled upon a medium post by Ian Gloude regarding the git update-index command. In their article “Git skip-worktree and how I used to hate config files,” there is a great explanation of the concept, but for me the lightbulb really went off when reading the Git documentation hint, “see also git-add[1] for a more user-friendly way to do some of the most common operations on the index.” Basically git update-index tells Git what to watch in your repo.

Now that we understand what git update-index does, the real magic happens with the options that you can add to the command. In this case, the option that Ian Gloude suggested is the --skip-worktreeoption. The Git documentation explains that the skip worktree bit tells the git index to assume the file is unchanged from this point on regardless if there is an actual change. So what does this mean for us? It means you can change your file on your local environment while the original file on your production server remains unchanged.

Here is the command I use prior to uncommenting out the pantheon redirect code.

git update-index --skip-worktree /sites/default/settings.php

When I need to make some changes to the production settings.php file I can tell Git to watch the file again with this command.

git update-index —-no-skip-worktree web/sites/default/settings.php

Anyway, I hope this helps you keep your local and production environments running smoothly while maintaining your settings differently.

Jan 30 2019
Jan 30

In the second chapter of the series, we wrote about the first challenge we encountered when defining our unique workflow, which was establishing a process for training newly employed developers to meet requirements needed to work as part of the client’s team. In fact, this was just one half of something more important that we had to be mindful of - building and maintaining a healthy relationship with our clients. This is what we’ll dive into in this chapter.

The Challenge

The first and foremost thing to keep in mind when providing clients with experienced and reliable personnel is actually having that experienced personnel. However, a strong and healthy relationship with clients also demands continuously ensuring this personnel’s top-notch performance and smooth communication with the clients. 

Since our developers are integrated into various projects for various agencies or simply development teams at, let’s say, a publishing company, and are managed directly from the client’s side, we had to find a way to monitor their work and eliminate any possible friction before it transformed into a major issue for the client.

Playbook

Forming and cultivating strong relationships with our clients is something we encourage from day one. All new employees receive a copy of our “playbook”, a directional document outlining our workflow, best practices and basically everything they need to know when starting their job at Agiledrop. 

This playbook includes a set of guidelines for working as a part of the Agiledrop as well as the client’s team. Before any specific instructions on time tracking, communication, tools or anything technical, though, there’s a helpful introductory principle that they’re familiarized with. We call it SHARD, which is short for:

  • Stop - Take a breath and take a moment to remember that every interaction matters.
  • Hear - Let the client tell their entire story without interrupting them. Sometimes, all we need is someone who listens.
  • Apologize - As long as it’s sincere, you can’t apologize too much. Even if it wasn’t your fault, you can still genuinely be apologetic for the way your client feels.
  • Resolve - Resolve the issue quickly and don’t be afraid to ask the client: “What can I do to make this right?”
  • Diagnose - Get to the bottom of why the mistake or issue occurred, without putting the blame on anyone. Instead, focus on fixing the problem so that it doesn’t happen again.

As you can see, we take great care to always provide top-notch services to clients, even if the fault or mistake did not occur on our side, if we are swamped with projects and deadlines, if we are tired and fed up with a specific issue…. We suck it up and put the client first! The entire team is extremely committed and driven to deliver. 

And, even though we operate as remote partners to our clients, we strive to make the relationship feel as personal as possible and to reassure the clients of our online presence. Our developers frequently and conscientiously inform the clients about when they start and get off work, and about any breaks they might have.

We're Your Remote Partners

Since our clients come from various countries, often with different time zones, we had to find a way to always be available for calls and daily standup meetings for clients, but also keep things fair for those working on open source or on projects for clients from the same time zone. 

For this reason, we’ve implemented the rule that our offices are open between 8 a.m. and 6 p.m., which altogether comprises 10 hours, while our effective working hours are between 7 and 7.5 per day. 

These flexible working hours allow for at least 2 hours of overlap even with clients with the biggest time difference, such as those from the US. The developers who work on those clients’ projects are hence able to arrive at the office later and don’t have to work overtime just to be present for a call or a standup meeting, whereas the rest of the developers are able to arrive earlier and finish work earlier, but are still available to the client when they are needed.

Such a system also ensures an excellent work-life balance, which in turn also greatly benefits the clients, since our developers working as members of their team are consequently more motivated and perform better - it’s truly a win-win arrangement! 

Motivation is crucial for a strong and successful team, and this is why we frequently organize team buildings, shared dinners and other fun events that strengthen the team, further improve the vibes in the offices and consequently make working at Agiledrop something every team member looks forward to each day.

Another major benefit for clients working with our A-team is that we operate as remote partners to the client’s team. This means that the client essentially gets a boost to their workforce without any additional costs such as recruitment, onboarding and equipment costs, health insurance, travel expenses, etc. 

Furthermore, we spare clients the need to open additional offices in different parts of the world in order to effectively scale - it’s exactly like we’re there with them (except that we’re not, at least physically)!
 

Feast or Famine? Not with Agiledrop

A considerable concern for companies and agencies when it comes to remote staffing is “feast or famine”. This is realized as the need for extra developers for a certain project, whom you cannot hire as full-time employees, since they will turn into unnecessary burdens to your finances once that project is concluded and you will no longer need such an extensive team. 

This is where we offer the perfect solution. Clients can hire our developers for the duration of the project, but, if they happen to need them for an extended period of time or again at a later time, that can be arranged as well. In this way, we can scale your team easily and efficiently, but only when it’s needed.

Usually, when hiring part-time employees or freelancers, your chances are quite limited. If your remote developer falls ill, goes on leave, or disappears in some other, unexplained manner, what can you do, really? Go through the tedious, wrought-out process of staffing a second time? Deliver a not-so-optimized product? Either way, your project and consequently likely your entire enterprise suffer because of this. 

Fortunately, this is pretty much an impossible scenario when working with the Agiledrop team. Our reliable team is led by skilled development experts whose greatest talent lies in the recognition of the talent and skills of others. As such, you can always count on them to provide the people and solutions most suitable for a specific project from about 30 to 40 experienced and proven developers.

If a developer assigned to a certain project falls ill or goes on leave? No problem - we take utmost care to immediately provide appropriate replacements, ensuring that the client’s project is never at a disadvantage because of some uncontrollable factor. With such a diverse team, we can assure we will find the people with the best possible combination of skills and experience for any given project. 

Cultural Breach - What's That?

Even though we come from a small, relatively unknown country in the European Union, our values and traditions are essentially the same as in other Western countries; hence, our developers are able to integrate completely into the client’s team. All of them are fluent in English and are extremely flexible; we can effortlessly and seamlessly adapt to different practices and cultures, and we immediately employ the client’s tools, communication channels and workflows. 

We strive to eliminate cultural breach as much as possible, continuously reassuring the client that the developers working with them are not a separate entity, but rather an equal part of their in-house team. Of course, we also pay attention to respecting specific cultural norms and/or time zone differences. You will never get pinged by one of our developers during your day off!

Your Privacy Is Safe With Us

Besides ensuring smooth project delivery, we’re also dedicated to protecting our client’s privacy and any trade secrets. A very strict NDA is signed with all our clients as well as our employees and we make sure everyone respects and follows it. 

We never reveal our clients’ identity to other clients and we never share the client’s documents outside the team assigned to their project (you probably noticed that we appropriately censored the photo above with the conversation). 

Additionally, we’re extra careful when handling our or the client’s passwords and access to services, etc. - especially when working from home. To add an extra layer of security, we handle our passwords with LastPass or similar tools.

Hire 1, Get Access to 30

What’s also greatly advantageous for our clients is that with such a large group of developers working in the same workspace, the client always benefits from the collective knowledge of the entire Agiledrop team. As we shall see in the final chapter of this series (stay tuned!), we promote and reward knowledge-sharing and support between employees. 

We already pointed out in the first chapter of this series that our workflow demands new employees are supported by their mentors and team leads, helping them with tasks that are beyond their current level of expertise; but this support is not only limited to the probation period or to less experienced developers. 

Anyone can help anyone, as we firmly believe that a unique and fresh perspective can always be beneficial, and we encourage asking for help rather than spending copious amounts of time trying to solve the problem on one’s own. We encourage communication between employees and also with the client’s management team, we peer review our code, we seek and develop solutions together, as a team. 

It’s like those really old commercials or sales offers - remember, buy one, get one free? Well, with Agiledrop, it’s more like - hire one, get access to the skills and experience of thirty!

Unsure about how to most efficiently scale your team? Need to augment your staff, but only for the duration of a certain project? Not to worry - reach out to us anytime and we’ll be happy to lend a helping hand and ensure the success of your project! 

Jan 30 2019
Jan 30

Everything was going well with your Drupal setup on local and then GIT STRICKS BACK. You are trying to do a git checkout and moving to a different branch but now you have an error of GIT not able to unlink file and a modified file.

git checkout develop                                                                                                                       
error: unable to unlink old 'docroot/sites/default/settings.php': Permission denied
Checking out files: 100% (13948/13948), done.
M       docroot/sites/default/settings.php
Switched to branch 'develop'
Your branch is behind 'upstream/develop' by 9 commits, and can be fast-forwarded.
  (use "git pull" to update your local branch)

And as recommended by our good friend GIT we try to do "git pull" but no luck. After this, we straight away go to use "sudo" and checkout the Drupal settings.php file which messes up the things even more.

So what is the solution?

The first thing we need to understand is this is not the issue with the file but with the directory itself, which most probably have permission 'w'. So the command which you should be running to fix this directory is

chmod ug+w sites/default

After this, you should be able to simply check out the settings.php to revert the changes and you are good to go with your Drupal stuff

Jan 30 2019
Jan 30

The "Imagepin" module allows you to create pins inside an image and display descriptive text when you hover over those pins.

This is useful because the image will not appear clogged with lots of descriptive text. From the other hand, since users like (unconsciously) this kind of interaction, it will help promote your content and increase the click rate of the “calls to action” of your page.

How to Pin Images in Drupal 8

Let’s start!

Step #1. - Install the Imagepin Module

If your Drupal installation is not based on Composer:

  • Download the module, uncompress it and place it in the /modules directory.

If your Drupal installation is based on Composer:

  • Open your terminal window
  • Go to the root (where the core folder is) of your Drupal installation and type

composer require drupal/imagepin

  • Click Extend, enable the module and click Install.

This module has no additional dependencies.

Step #2. - Create a Content Type

For the purpose of this tutorial, you will create a content type called Shoes. This content type has 5 fields (listed as they are displayed to the user):

  • Shoe image (image field type)
  • Body (text field type)
  • Color (list field type)
  • Price (number-decimal field type)
  • Buy link (link field type)
  • Click Structure > Content types > Add content type.

  • Click Add field in order to add the image field
  • Click Save field settings and Save settings
  • Click Add field
  • Select List (text)
  • Click Save and continue
  • Enter proper allowed values in the format key|value. The key part is intended for the machine to associate this field to the database. The value is the human-readable name when editing the node form and presenting the content
  • Click Save field settings
  • Click Save settings.

After the “color selection” field, you need to add the price field.

  • Click Add field
  • Select Number (decimal) from the dropdown
  • Click Save and continue
  • Leave the defaults (Precision 10, Scale 2)
  • Click Save field settings
  • Scroll down to the Prefix option and enter a dollar sign followed by a space ‘$ ‘ (without quotes)
  • Click Save settings.

  • Repeat the process with a Link field.

This will be the button that adds the item to the cart (in this particular example).

Your fields configuration screen should look like this:

  • Click the Manage display tab
  • Hide the labels for all fields
  • Click Save.

Step #3. - Configure Imagepin

  • Click the cogwheel on the right of the image field
  • Click the checkbox “Enable users to pin widgets on this image”
  • Click Update
  • Click Save.

Step #4.- Add Pins to Your Images

  • Click Content > Add content > Shoes
  • Enter a title, description, price, link text, and a link
  • Upload an image
  • Click the button Pin widgets on this image.

  • An overlay with the image will appear
  • Scroll down, in order to create a new widget
  • Enter a proper text
  • Click Add.

  • Repeat this procedure to create as many widgets as you need
  • Click the first widget in the AVAILABLE section
  • You will see an orange dot at the top left part of the image
  • Drag it and place it where you see the text fits
  • Repeat the process with the other widgets
  • Click Save these positions.

You go back to the node edit form by closing the overlay or by clicking the Esc key on your keyboard.

  • Click Save in order to save the node.

Take a look at the image and hover your mouse over the pins.

Well done!

The Drupal 8 "Imagepin" module allows you to place visual hints (pins) with descriptions on images. It can be applied to a countless group of use cases. Add this module to your site builder’s toolbelt.

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.
Jan 29 2019
Jan 29

We're in the deep of winter in Minneapolis, but thinking about spring and the upcoming conferences we'll be attending. Or at least later this winter.

Here's a short list of what we've got scheduled so far, and where we could meet up. Hope to see you out there!

Jan 29 2019
Jan 29

This blog has been re-posted and edited with permission from Dries Buytaert's blog.

The European Commission worked with the Drupal Security Team to set aside 89,000€ (or roughly $100,000 USD) for a Drupal bug bounty.

An image of a shield with the Drupal mascot

The European Commission made an exciting announcement; it will be awarding bug bounties to the security teams of Open Source software projects that the European Commission relies on.

If you are not familiar with the term, a bug bounty is a monetary prize awarded to people who discover and correctly report security issues.

Julia Reda — an internet activist, Member of the European Parliament (MEP) and co-founder of the Free and Open Source Software Audit (FOSSA) project — wrote the following on her blog:

Like many other organizations, institutions like the European Parliament, the Council and the Commission build upon Free Software to run their websites and many other things. But the Internet is not only crucial to our economy and our administration, it is the infrastructure that runs our everyday lives.

With more than 150 Drupal sites, the European Commission is a big Drupal user, and has a large internal Drupal community. The European Commission set aside 89,000€ (or roughly $100,000 USD) for a Drupal bug bounty. They worked closely with Drupal's Security Team to set this up. To participate in the Drupal bug bounty, read the guidelines provided by Drupal's Security Team.

Over the years I've had many meetings with the European Commission, presented keynotes at some of its events, and more. During that time, I've seen the European Commission evolve from being hesitant about Open Source, to recognizing the many benefits that Open Source provides for its key ICT services, to truly embracing Open Source.

In many ways, the European Commission followed classic Open Source adoption patterns; adoption went from being technology-led (bottom-up or grassroots) to policy-led (top-down and institutionalized), and now the EU is an active participant and contributor.

Today, the European Commission is a shining example and role model for how governments and other large organizations can contribute to Open Source (just like how the White House used to be).

The European Commission is actually investing in Drupal in a variety of ways — the bug bounty is just one example of that — but more about that in a future blog post.

 January 28, 2019

 1 min read time

 Permalink

Jan 29 2019
Jan 29

Innovation within Canadian healthcare continues to provide better care experiences for those using the system.  As the population ages and strains our facilities to care for those nearing their end-of-life, hospitals are looking at technological solutions to ease the burden on emergency rooms and give people access to accurate and timely healthcare.   Nextide partnered with uCarenet, a Toronto-based e-health company, to create an innovative health and wellness application to monitor the condition of palliative care patients for a major Canadian hospital.

The Requirements:

The hospital required an application that could gather critical patient data through forms, compile the results daily, report those results to the patient’s healthcare team and alert the team in the event the results warranted intervention.  The application had to be accessible to all participants, easy to use and mimic the existing paper-based data collection mechanism the palliative care team employed. The hospital staff required administrative logins to create users and monitor the entered data in a simple-to-use and uncluttered dashboard.  Doctors and nurses should be able to determine who has symptoms which require immediate attention, and be able to view the discrete data if required.

The Solution:

At Nextide, we look at Drupal as a platform to build applications and not purely as a feature-rich content management system for websites.  We were confident that Drupal was the right selection for the application. Through careful design, our team was able to create an interactive application that gathered patient data, compiled and weighted the results based on current and historical data, and send the palliative care team notifications when warranted.

First, the palliative care user’s experience:

User's view when ability to enter data is open or closed

The image above shows two versions of the palliative care user’s home page.  The left side is the home page when they are able to complete their daily forms.  On the right, if the user completed their forms within the last 24 hours, they’re locked out of completing a new set of forms until the 24 hour window has passed.

Once daily the palliative care users are able to fill in the three required forms.  An example of one of the forms is shown here:

Showing the Brief Pain Inventory Form

On any device the patient or caregiver has, patient data can recorded using Drupal to store all form data in custom entities.  Themed form buttons and select lists are presented in easy-to-use clickable human bodies, sliders and radio buttons.

Upon completion of the patient information forms, the results are compiled according to the hospital’s predefined requirements.  The three forms have at least 50 discrete data points in total. We take the data entered, compare it to the last three to five days of the patient’s data and determine trends within those fields which require an alert being triggered.  If a user is deemed to be “alerting”, we send a notification to the healthcare team and flag the user and the fields as alerting.

The Healthcare User’s Experience:

When a healthcare user enters the system, their homepage is comprised of a simple to use dashboard.  The dashboard presents the user with an easy-to-read listing of patients with their status plainly visible.

Healthcare Dashboard

The healthcare user is able to drill into any patient’s data, giving them a graphical breakdown of the historical patient data.  The nurse or doctor is able to see the trends in the patient data and is able to take appropriate action. Healthcare users are able to acknowledge the alerts, thereby clearing the status of the patient, and they’re able to silence alarms for any given patient so they do not receive alerts for 24, 48 or 72 hours.

Drilldown into stats

We generate on-the-fly graphs of patient data.  Healthcare professionals can also drill even further into each entity where they’re able to view each form’s entry and mute any alerting fields.

Alerts panel

Themed Drupal entities give the healthcare professional a quick breakdown of patient entered values.  If a field is alerting, it’s highlighted and gives the user the option to silence the alarm by clicking on the alerting symbol.  Users are able to scan back and forth through daily entries. The interface is easy to use, uncluttered and responsive in design.


The Outcomes:

The initial pilot phase of the project had between 15 and 20 patients entering data at any given time.  In the first 3 months of the pilot:

  • 105 critical alerts were generated by the system and sent to the patients’ circle of care.
  • 46 of the 105 critical alerting patients received follow-up intervention.
  • 7 patients who had not triggered an alert received telephone intervention after the healthcare staff noticed trends in their data.
  • Saved an estimated $62 000.  That’s right!  This single application over the course of three months saved over sixty-thousand dollars in unnecessary care in the Emergency Room!

Every time a patient receives proactive care, the likelihood that they require an Emergency Room visit is reduced, thereby reducing the load on the hospital.  When you consider the small pilot size and the number of interventions required, each intervention could have eliminated a potential Emergency Room visit. A resounding success!

When you look at Drupal as “just a content management system”, you lose sight of what it really is:  a platform to produce applications that matter. At Nextide, we have been focused on Drupal since 2009. Our experience in Drupal ensures that we utilize the most effective modules to construct sites and applications that are optimized for performance and functionality. We continue to leverage Drupal in many more ways than just content management.  Our core strengths are focused on the design and build of creative sites, and web based business applications, that mirror the way people think and work. We can custom create any business function or create the ideal work environment for people to perform at their best. The capability to deliver robust custom applications to our customers allows us to deliver solutions from healthcare, to HR, and everything in-between.

Need Help?

Do you have a Healthcare initiative we can help with?

Jan 29 2019
Jan 29

We at Evolving Web are really excited to see the progress being made on improving the Drupal admin UI. As a designer, I’m curious about the process that drives such a huge project. I talked to the designer in charge of the refreshed interface, Cristina Chumillas, and got super interesting insights into what’s behind the new design.

Claro – fresh and clear

So far, Cristina and the team developed a new theme which is called “Claro”. The main UX problems in the existing admin UI have not been addressed yet. However, the visual refresh is already a great improvement! In Spanish, “Claro” means “clear” and this seems to be the main motivation.

The old admin interface (left) and the new UI design (right).The old admin interface (left) and the new UI design (right).

I especially like the new colour palette that is a literal refresh with grey tones that are slightly bluish and a primary blue that is very lively. Compared to the old warm colour scheme, this simple step results in a much more modern look. The contrast has been increased a bit, which has several positive effects. It helps create a clear hierarchy and, of course, it helps make the interface more accessible. 

Interaction Design Challenges

I asked Cristina about the biggest challenge in the redesign. She said that complying with the latest accessibility standards was a tough one. 

“We are not designing for a private company, we are designing for Drupal and this means for anyone. The design has to be accessible for anyone.”

One example Cristina gave me was the form field designs. The initial form fields were similar to those in the Material Design system, with the label inside the input field. Once you select the field, the label floats to the top. It is an elegant technique that has become popular over the last few years. However, Cristina remarked that this kind of animated form design caused a problem with accessibility.

“We decided not to implement something that is super fancy.”

I appreciate the fact that the team behind the new Drupal design puts the user front and centre. The purpose of the redesign is not to create something original for the sake of being extraordinary. On the contrary, the goal is a clear design that prefers well-known design patterns over personality. This doesn’t mean that they kept the old form UI, which was mainly the browser default. The new form design is simple, but clear and therefore very usable.
 

Comparing Form FieldsForm field examples of the old UI (left) and of the new design system (right).

Hierarchy & Proportions

The new UI system is extensive. It includes different states of interactive elements which results in a very consistent design from page to page. Sometimes, these little details make a huge difference. Let’s compare the old and the new second-level of the toolbar. The size ratio between the font size and the icon is not very balanced in the current UI. The chevron buttons have the heaviest visual weight which makes it difficult for the active page to stand out. 
 

Comparing toolbarOld second level toolbar (left) and new toolbar (right)

The new design uses the primary blue for highlighting active states. The chevrons are simple and don’t draw too much attention. The third-level of the menu is visually separated by a light blue background which also communicates depth.

Typography – Fluid and Flexible

I asked Cristina what she enjoyed most during this project. She didn’t have to think long:

“Typography! – Something that I’m really looking forward to implementing is Fluid Typography.”

Fluid Typography is a CSS trick which adjusts the font size and line height based on screen size. Instead of jumping from one size to the next bigger size at a breakpoint, the changes are fluid. This creates a really smooth responsive web experience.

Animation of fluid text sizesImage credits: css-tricks.com/snippets/css/fluid-typography

Cristina and her team decided to use system fonts instead of a brand typeface in the new UI. She told me that it’s not about branding when you create a functional user interface. They didn’t want the typeface to take too much attention. Cristina pointed out that it is the functionality and usability of software like Drupal that counts. A smooth user experience with the application itself is more important than the branding. Besides, other elements such as the colour palette help with the recognition of the brand.

“Using system fonts feels more natural, more like working with your system and for the user it is not really important that it is Drupal or something else. It is just a tool.”

3 examples of headings and paragraphsSystem font examples (Apple, Windows Vista and KDE)

Another reason for the use of system fonts, Cristina told me, is that sometimes the font is changed to the system font anyway, for instance in other languages that are not included in the character set. Depending on the language, the range of word length is huge as well. When designing an interface like Drupal, you have to keep it flexible anyway.

“There are some languages that are short, and then there is German…” 

As a last question, I asked Cristina, if she had one ultimate tip for other designers to improve their UI design. Her advice was: “Keep in mind that when we are dealing with content management UI, it is not about advertising, not about branding. UI should not be invisible, but it should serve a purpose.” 
“It should serve the user needs?” I suggested.
“Exactly! The [admin] UI should be useful for creating content – in our case, because that’s what Drupal is for – instead of being super fancy.”
 

About Cristina and the team

Cristina Chumillas is a very experienced designer with a background in graphic design and frontend development. She has been active in the Drupal community for many years and works as Creative Director and partner at Ymbra, a Drupal web agency based in Barcelona. The other designers contributing to the Claro theme are Sascha Eggenberger, Archita Arora as well as Dennis Cohn.

Next steps

Following the work on these visual improvements, the team will continue with this user-centered approach and address functionality issues. Suzanne and I helped figure out usability problems in different CMS’s in a comparative study in November and are currently working on a follow-up study to gather more data about how editors create more complex content. Cristina told me that our findings will help guide the the user experience of the Drupal admin interface. We can’t wait to see the results of the next steps!

Jan 29 2019
Jan 29

In my 2018 Acquia retrospective, I reflect on our business momentum, the evolution of the Acquia Platform, and why the market continues to move in Acquia's direction.

Every year, I sit down to write my annual Acquia retrospective. It's a rewarding exercise, because it allows me to reflect on how much progress Acquia has made in the past 12 months.

Overall, Acquia had an excellent 2018. I believe we are a much stronger company than we were a year ago; not only because of our financial results, but because of our commitment to strengthen our product and engineering teams.

If you'd like to read my previous retrospectives, they can be found here: 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009. This year marks the publishing of my tenth retrospective. When read together, these posts provide a comprehensive overview of Acquia's growth and trajectory.

Updating our brand

Exiting 2017, we doubled down on our transition from website management to digital experience management. In 2018, we updated our product positioning and brand narrative to reflect this change. This included a new Acquia Experience Platform diagram:

An image of the Acquia Platform in 2018The Acquia Platform is divided into two key parts: the Experience Factory and the Marketing Hub. Drupal and Acquia Lightning power every side of the experience. The Acquia Platform supports our customers throughout the entire life cycle of a digital experience — from building to operating and optimizing digital experiences.

In 2018, the Acquia marketing team also worked hard to update Acquia's brand. The result is a refreshed look and updated brand positioning that better reflects our vision, culture, and the value we offer our customers. This included updating our tagline to read: Experience Digital Freedom.

[embedded content]

I think Acquia's updated brand looks great, and it's been exciting to see it come to life. From highway billboards to Acquia Engage in Austin, our updated brand has been very well received.

A photo of an Acquia billboard at the Austin airportWhen Acquia Engage attendees arrived at the Austin-Bergstrom International Airport for Acquia Engage 2018, they were greeted by an Acquia display.

Business momentum

This year, Acquia surpassed $200 million in annualized revenue. Overall new subscription bookings grew 33 percent year over year, and we ended the year with nearly 900 employees.

Mike Sullivan completed his first year as Acquia's CEO, and demonstrated a strong focus on improving Acquia's business fundamentals across operational efficiency, gross margins and cost optimization. The results have been tangible, as Acquia has realized unprecedented financial growth in 2018:

  • Channel-partner bookings grew 52 percent
  • EMEA-based bookings grew 103 percent
  • Gross profit grew 39 percent
  • Adjusted EBITDA grew 78 percent
  • Free cash flow grew 84 percent
A photo that summarizes Acquia's 2018 business results mentioned throughout this blog post2018 was a record year for Acquia. Year-over-year highlights include new subscription bookings, EMEA-based bookings, free cash flow, and more.

International growth and expansion

In 2018, Acquia also witnessed unprecedented success in Europe and Asia, as new bookings in EMEA were up more than 100 percent. This included expanding our European headquarters to a new and larger space with a ribbon-cutting ceremony with the mayor of Reading in the U.K.

Acquia also expanded its presence in Asia, and opened Tokyo-based operations in 2018. Over the past few years I visited Japan twice, and I'm excited for the opportunities that doing business in Japan offers.

We selected Pune as the location for our new India office, and we are in the process of hiring our first Pune-based engineers.

Acquia now has four offices in the Asia Pacific region serving customers like Astellas Pharmaceuticals, Muji, Mediacorp, and Brisbane City Council.

A photo of an Acquia marketing one-pager in JapaneseAcquia product information, translated into Japanese.

Acquia Engage

In 2018, we welcomed more than 650 attendees to Austin, Texas, for our annual customer conference, Acquia Engage. In June, we also held our first Acquia Engage Europe and welcomed 300 attendees.

Our Engage conferences included presentations from customers like Paychex, NBC Sports, Wendy's, West Corporation, General Electric, Charles Schwab, Pac-12 Networks, Blue Cross Blue Shield, Bayer, Virgin Sport, and more. We also featured keynote presentations from our partner network, including VMLY&R, Accenture Interactive, IBM iX and MRM//McCann.

Both customers and partners continue to be the most important driver of Acquia's product strategy, and it's always rewarding to hear about this success first hand. In fact, 2018 customer satisfaction levels remain extremely high at 94 percent.

Partner program

Finally, Acquia's partner network continues to become more sophisticated. In the second half of 2018, we right sized our partner community from 2,270 firms to 226. This was a bold move, but our goal was to place a renewed focus on the partners who were both committed to Acquia and highly capable. As a result, we saw almost 52 percent year-over-year growth in partner-sourced ACV bookings. This is meaningful because for every $1 Acquia books in collaboration with a partner, our partner makes about $5 in services revenue.

Analyst recognition

In 2018, the top industry analysts published very positive reviews about Acquia. I'm proud that Acquia was recognized by Forrester Research as the leader for strategy and vision in The Forrester Wave: Web Content Management Systems, Q4 2018. Acquia was also named a leader in the 2018 Gartner Magic Quadrant for Web Content Management, marking our placement as a leader for the fifth year in a row.

Product milestones

An image showing a timeline of Acquia's product history and evolutionAcquia's product evolution between 2008 and 2018. When Acquia was founded, our mission was to provide commercial support for Drupal and to be the "Red Hat for Drupal"; 12 years later, the Acquia Platform helps organizations build, operate and optimize Drupal-based experiences.

2018 was one of the busiest years I have experienced; it was full of non-stop action every day. My biggest focus was working with Acquia's product and engineering team. We focused on growing and improving our R&D organization, modernizing Acquia Cloud, becoming user-experience first, redesigning the Acquia Lift user experience, working on headless Drupal, making Drupal easier to use, and expanding our commerce strategy.

Hiring, hiring, hiring

In partnership with Mike, we decided to increase the capacity of our research and development team by 60 percent. At the close of 2018, we were able to increase the capacity of our research and development team by 45 percent percent. We will continue to invest in growing our our R&D team in 2019.

I spent a lot of time restructuring, improving and scaling the product organization to make sure we could handle the increased capacity and build out a world-class R&D organization.

As the year progressed, R&D capacity came online and our ability to innovate not only improved but accelerated significantly. We entered 2019 in a much better position as we now have a lot more capacity to innovate.

Acquia Cloud

Acquia Cloud and Acquia Cloud Site Factory support some of the largest and most mission-critical websites in the world. The scope and complexity that Acquia Cloud and Acquia Cloud Site Factory manages is enormous. We easily deliver more than 30 billion page views a month (excluding CDN).

Over the course of 10 years, the Acquia Cloud codebase had grown very large. Updating, testing and launching new releases took a long time because we had one large, monolithic codebase. This was something we needed to change in order to add new features faster.

Over the course of 2018, the engineering team broke the monolithic codebase down into discrete components that can be tested and released independently. We launched our component-based architecture in June. Since then, the engineering team has released changes to production 650 times, compared to our historic pace of doing one release per quarter.

A graph that shows how we moved Acquia Cloud from a monolithic codebase to a component-based code base.This graph shows how we moved Acquia Cloud from a monolithic code base to a component-based code base. Each color on the graph represents a component. The graph shows how releases of Acquia Cloud (and the individual components in particular) have accelerated in the second half of the year.

Planning and designing for all of these services took a lot of time and focus, and was a large priority for the entire engineering team (including me). The fruits of these efforts will start to become more publicly visible in 2019. I'm excited to share more with you in future blog posts.

Acquia Cloud also remains the most secure and compliant cloud for Drupal. As we were componentizing the Acquia Cloud platform, the requirements to maintain our FedRAMP compliance became much more stringent. In April, the GDPR deadline was also nearing. Executing on hundreds of FedRAMP- and GDPR-related tasks emerged as another critical priority for many of our product and engineering teams. I'm proud that the team succeeded in accomplishing this amid all the other changes we were making.

Customer experience first

Over the years, I've felt Acquia lacked a focus on user experience (UX) for both developers and marketers. As a result, increasing the capacity of our R&D team included doubling the size of the UX team.

We've stepped up our UX research to better understand the needs and challenges of those who use Acquia products. We've begun to employ design-first methodologies, such as design sprints and a lean-UX approach. We've also created roles for customer experience designers, so that we're looking at the full customer journey rather than just our product interfaces.

With the extra capacity and data-driven changes in place, we've been working hard on updating the user experience for the entire Acquia Experience Platform. For example, you can see a preview of our new Acquia Lift product in this video, which has an increased focus on UX:

[embedded content]

Drupal

In 2018, Drupal 8 adoption kept growing and Drupal also saw an increase in the number of community contributions and contributors, both from individuals and from organizations.

Acquia remains very committed to Drupal, and was the largest contributor to the project in 2018. We now have more than 15 employees who contribute to Drupal full-time, in addition to many others that contribute periodically. In 2018, the Drupal team's main areas of focus have been Layout Builder and the API-first initiative:

  • Layout Builder: Layout Builder offers content authors an easy-to-use page building experience. It's shaping up to be one of the most useful and pervasive features ever added to Drupal because it redefines the how editors control the appearance of their content without having to rely on a developer.
  • API First: This initiative has given Drupal a true best-in-class web services API for using Drupal as a headless content management system. Headless Drupal is one of the fastest growing segments of Drupal implementations.
A photo of Acquia engineers, designers and product managers at Acquia Build Week 2018Our R&D team gathered in Boston for our annual Build Week in June 2018.

Content and Commerce

Adobe's acquisition of Magento has been very positive for us; we're now the largest commerce-agnostic content management company to partner with. As a result, we decided to extend our investments in headless commerce and set up partnerships with Elastic Path and BigCommerce. The momentum we've seen from these partnerships in a short amount of time is promising for 2019.

The market continues to move in Acquia's direction

In 2019, I believe Acquia will continue to be positioned for long-term growth. Here are a few reasons why:

  • The current markets for content and digital experience management continues to grow rapidly, at approximately 20 percent per year.
  • Digital transformation is top-of-mind for all organizations, and impacts all elements of their business and value chain.
  • Open source adoption continues to grow at a furious pace and has seen tremendous business success in 2018.
  • Cloud adoption continues to grow. Unlike most of our CMS competitors, Acquia was born in the cloud.
  • Drupal and Acquia are leaders in headless and decoupled content management, which is a fast growing segment of our market.
  • Conversational interfaces and augmented reality continues to grow, and we embraced these channels a few years ago. Acquia Labs, our research and innovation lab, explored how organizations can use conversational UIs to develop beyond-the-browser experiences, like cooking with Alexa, and voice-enabled search for customers like Purina.

Although we hold a leadership position in our market, our relative market share is small. These trends mean that we should have plenty of opportunity to grow in 2019 and beyond.

Thank you

While 2018 was an incredibly busy year, it was also very rewarding. I have a strong sense of gratitude, and admire every Acquian's relentless determination and commitment to improve. As always, none of these results and milestones would be possible without the hard work of the Acquia team, our customers, partners, the Drupal community, and our many friends.

I've always been pretty transparent about our trajectory (e.g. Acquia 2009 roadmap and Acquia 2017 strategy) and will continue to do so in 2019. We have some big plans for 2019, and I'm excited to share them with you. If you want to get notified about what we have in store, you can subscribe to my blog at https://dri.es/subscribe.

Thank you for your support in 2018!

[embedded content]

January 29, 2019

7 min read time

Jan 29 2019
Jan 29

When Drupal 8 came out, it introduced the Drupal community to the concept of separating the theming layer from the logic layer through the Twig templating language. This had many advantages. For one, instead of needing to know PHP, a themer could just know Twig – an extremely stripped-down templating engine that has a few syntax elements, minimal built-in operators, and only about 50 provided functions. Additionally, the limited list of available functions makes it much harder to shoehorn heavy logic or even more dangerous things like SQL queries directly into the theming layer.

There are, of course, trade-offs. While the list of functions Twig provides is quite robust, it didn’t take long for Drupal developers to recognize snippets of code they needed to do over and over again within their templates. As such, Drupal provided a handful of custom functions and filters specific to core functionality, like the ‘without’ filter, which “Removes child elements from a copy of the original array” – i.e. lets you print the contents of a render array without certain fields.

The contrib space provides even more options for Twig themers – modules like Twig Tweak or Twig Field Value provides additional functions and filters for things themers often need to do over and over, like render a block within a template, or grab a field’s raw value.

But sometimes you still find yourself repeating the same code over and over within your templates. Maybe it’s a bit of logic specific to the project you’re working on. Or maybe it’s a piece of code that needs logic too complex to be put in a template. Or maybe it requires context not easily accessible within the template, like a setting controlled in the Drupal admin area.

In these cases you can create your own custom Twig functions.

What you’ll need:

Creating a custom Twig filter is relatively simple. You’ll just need the following things to begin:

  • A custom module you can add code to
  • A service declaration .yml file with reference to the twig.extension tag
  • A class that extends the \Twig_Extension class

If you have those things, you can create as many Twig filters or functions as you’d like from within one class file. Making the filters or functions available is just one cache clear away!

A practical example:

Note, the finished module created below is also available here.

Let’s say you want to print out a field label within a template. For example, the default Drupal 8 Article display shows the label for the Tags field:

Test Article

Let’s say we also, for some reason, wanted to put the “Tags” label somewhere else on the page, like right under the node’s “Submitted” information. Out of the box, you can use Twig to get the label’s raw value if you’re extending your node.twig.html file:

{{ content.field_tags['#title'] }}

That works!

with-tags

Now, suppose a site builder decides they don’t want to show the label on the Tags field anymore. They go into the admin area, change the field value on the label from “Above” to “Hidden”, and reload the entity.

Backend

Part Tags

If you’re using the Twig Field Value module and use this syntax:

{{ content.field_tags|field_label }}

The same thing happens. That’s because the field_label function doesn’t take into account the settings on the admin side either.

If we want to print out a label in a custom place, but still have the label respect the admin settings, we can create our own Twig function. Building on the idea of the Twig Field Value module’s filter “field_label” filter, let’s call our custom function “field_respectful_label”.

As outlined above, first you need to create a service. The quickest way to do this is using the Drupal console “generate:service” command.

Let’s assume you’ve already got a module called “custom_twig”. The command to generate this service would look like this:

$ drupal generate:service

 // Welcome to the Drupal service generator
 Enter the module name [address]:
 > custom_twig

 Enter the service name [custom_twig.default]:
 > custom_twig.my_custom_twig_items

 Enter the Class name [DefaultService]:
 > MyCustomTwigItems

 Create an interface (yes/no) [yes]:
 > no

 Do you want to load services from the container? (yes/no) [no]:
 > no

 Enter the path for the services [/modules/custom/custom_twig/src/]:
 >

 Do you want proceed with the operation? (yes/no) [yes]:
 >


 // cache:rebuild

 Rebuilding cache(s), wait a moment please.


 [OK] Done clearing cache(s).


Generated or updated files
 1 - modules/custom/custom_twig/custom_twig.services.yml
 2 - modules/custom/custom_twig/src/MyCustomTwigItems.php

This creates two files. The custom_twig.services.yml file:

services:
  custom_twig.my_custom_twig_items:
    class: Drupal\custom_twig\MyCustomTwigItems
    arguments: []

And the MyCustomTwigItems php file:

<?php

namespace Drupal\custom_twig;

/**
 * Class MyCustomTwigItems.
 */
class MyCustomTwigItems {

  /**
   * Constructs a new MyCustomTwigItems object.
   */
  public function __construct() {

  }

}

We now need to alter these files slightly. For the services.yml file, we will need to remove the “arguments” line, and add a reference to the twig extension tag:

services:
  custom_twig.my_custom_twig_items:
    class: Drupal\custom_twig\MyCustomTwigItems
    tags:
    - { name: twig.extension }

In the MyCustomTwigItems.php file, we can make a few changes as well. First, the MyCustomTwigItems class must extend the \Twig_Extension class. We can also get rid of the constructor, which leaves you with a very bare class declaration:

/**
 * Class MyCustomTwigItems.
 */
class MyCustomTwigItems extends \Twig_Extension {

}

You now have a skeleton service in place, but it’s currently not doing anything. To let Twig know about a new Twig filter, you implement the “getFilters” method on this class:

/**
   * {@inheritdoc}
   */
  public function getFilters() {
    return [
      new \Twig_SimpleFilter('field_respectful_label', [$this, 'getRespectfulFieldLabel']),
    ];
  }

The syntax above links up the string “field_respectful_label” (which will be used in our twig templates) to the method “getRespectfulFieldLabel”, a function we’ll create within our current MyCustomTwigItems class. Note that this syntax means you can call your custom filter whatever you want, although you will want to stick to the accepted coding style for Twig functions (lowercase letters and underscores, aka snake_case) and Drupal class methods (lowerCamelCase). Also notice that here we’re extending the “getFilters()” method on the parent class. There’s also a “getFunctions()” method, which is how you’d define a function. For more on the difference between Filters and Functions in Twig, refer to the Extending Twig documentation.

Then you just write your custom method! Here’s the full code for the getRespectfulFieldLabel method, which you’d place anywhere within the MyCustomTwigItems class declaration:

/**
  * Twig filter callback: Only return a field's label if not hidden.
  *
  * @param array $build
  *   Render array of a field.
  *
  * @return string
  *   The label of a field. If $build is not a render array of a field, NULL is
  *   returned.
  */
 public function getRespectfulFieldLabel(array $build) {
   // Only proceed if this is a renderable field array.
   if (isset($build['#theme']) && $build['#theme'] == 'field') {

     // Find out the label value.
     $disrespectful_label = isset($build['#title']) ? $build['#title'] : NULL;

     // Find out the visibility status of the label.
     $display_label = isset($build['#label_display']) ? ($build['#label_display'] != 'hidden') : FALSE;

     return ($disrespectful_label && $display_label) ? $disrespectful_label : NULL;
   }
   return NULL;
 }

If we now use our custom twig filter in the node.html.twig file, the label behaves as expected:

{{ content.field_tags|field_respectful_label }}

No Tags

There is now no label showing up on the front end, because we’ve hidden the label in the backend. If I went and changed the label visibility setting to “Above”, the label does show up. No code changes required:

Both Tags

And with that you have a new, custom Twig filter.

In conclusion, I hope this article demystifies the functions and filters you can use with Twig in Drupal 8. And if you’re inspired, feel free to use the example code as a starting point for your own custom functions or filters.

Get In Touch

Questions? Comments? We want to know! Drop us a line and let’s start talking.

Learn More Get In Touch
Jan 29 2019
Jan 29

Woman planting an EU flag with a security symbol in the middle into the ground.

With Europe threatening $25,000,000 fines and Facebook losing $80,000,000,000 of stock value, are you paying attention to data privacy yet? If millions and billions of dollars in news headlines never grabbed you, maybe you've noticed the dozens of e-mails from… Read more,

This goes well beyond an organization's web site, of course. Web developers may be the ones to introduce it to organizations, though, so we should be prepared. Here's the gist.

Organizations must request any personal data in clear and plain language describing the specific pieces of information and how it will be used, such that consent can be given freely and unambiguously through an affirmative action.

This means you need to be always thinking of why you are collecting information, and not collecting… Read more

Jan 29 2019
Jan 29

A woman pushing a giant rectangle with a right arrow within it.

Agaric is facilitating a full day training at DrupalCon Seattle to help you understand how to import content into your to Drupal 8 website.

This training is open for attendees with intermediate experience with Drupal- familiarity with installing a Drupal site and installing modules. We… Read more

Jan 29 2019
Jan 29

Illustration of people standing next to giant icons representing productivity.

People often ask about the free software tools Agaric uses to manage our cooperative business. In this article, we share some of the free software tools we use for office tasks and administration as well as communications. These are Agaric's chosen resources -- the tools we… Read more,

Video embed

Jan 29 2019
Jan 29

A desktop computer with social media icons above.

Being able to share an article via a social network is a common request on a project.

Fortunately for Drupal 8 there is a module for that called Social Simple. This module allows you to display a share button on a node for the most popular social… Read more

Jan 29 2019
Jan 29

The program for DrupalCon is evolving constantly. Among the changes for Nashville 2018 new tracks have been added and some have been merged. That is the case for the Symfony and PHP tracks.

Many topics clearly belong to a single track, but others could fit in more than one. When we had a dedicated Symfony track a session about Twig could be submitted to the Symfony or front end tracks. A session about Drupal Console could be… Read more

Jan 29 2019
Jan 29

Over 8 years have passed since there was a DrupalCamp in tropical Nicaragua. With the help of a diverse group of volunteers, sponsors, and university faculty staff, we held our second one. DrupalCamp Lagos y Volcanes ("Lakes & Volcanoes") was a great success with over 100 people attending in 2 days. It was a big undertaking so we followed giants' footsteps to prepare for our event. Lots of the ideas were taken from some of the organizers' experience while attending Drupal events.… Read more

Jan 29 2019
Jan 29

Once a text field has data stored, it is not very easy or obvious how to change its maximum length. In the UI there is a message warning you that the field cannot be changed, because there is existing data. Sometimes it is necessary to change these values. It seems that there are a few ways and some resources to do this in Drupal 7, but I could not find a way to do this in Drupal 8. I decided to create a small function to do it:

Caution: Any change in the database needs to be done carefully… Read more

Jan 29 2019
Jan 29

When you think of training, perhaps you remember an event that you were sent to where you had to learn something boring for your job. The word training does not usually make people smile and jump for joy, that is unless you are talking about Drupal training. These gatherings spread the Drupal knowledge and increase diversity in the community of Drupal developers.

Join us for the next Drupal Global Training Day with our online full day session on getting started with Drupal… Read more

Jan 29 2019
Jan 29

Drupal 8 has a great AJAX Form API which includes some tools to create modal dialogs using the jQuery modal library. The Examples module even demonstrates how to create a custom form and display it in a modal window. But what if what you want to do is display an already created form in a modal? How do we do that? Let's see how to do it with an example. Let's display the node add form in a modal window.

The first thing… Read more

Jan 29 2019
Jan 29

TL;DR: For PHP Hexadecimals, Decimals and Octals are all Integers, so they must be declared as @param integer

While I was working on a patch I had to write the docblock of a function which received a hexadecimal number and I wasn't sure what I was supposed to put in the @type param.

I went to Drupal's API documentation and comments standards… Read more

Jan 29 2019
Jan 29

While creating content, there are pieces of information that are only relevant when other fields have a certain value. For example, if we want to allow the user to upload either an image or a video, but not both, you can have another field for the user to select which type of media they want to upload. In these scenarios, the Javascript States API for Drupal 8 can be used to conditionally hide and show the input elements for image and video conditionally.

Note: Do not confuse the… Read more

Jan 29 2019
Jan 29

CKEditor is well-known software with a big community behind it and it already has a ton of useful plugins ready to be used. It is the WYSIWYG text editor which ships with Drupal 8 core.

Unfortunately, the many plugins provided by the CKEditor community can't be used directly in the CKEditor that comes with Drupal 8. It is necessary to let Drupal know that we are going to add a new button to the CKEditor.

Why Drupal needs to know about our plugins

Drupal allows us to… Read more

Jan 28 2019
Jan 28

Caring about Webform accessibility

Caring about Webform accessibility was a significant and unexpected personal milestone that happened last year while working towards a stable release of the Webform module for Drupal 8. It’s not that I didn’t care about accessibility, I just never paid attention to it.

Mike Gifford and Andrew Macpherson, Drupal's Accessibility Topic maintainers, helped me understand the importance of accessibility. They also gave me some direction for how to address webform related accessibility issues. This experience led me to do a presentation about Webform Accessibility @ Design4Drupal and to strive to fix accessibility issues in the Webform module. I learned to care about accessibility, but it’s not enough - I still have to ask the question…

Have I done enough to make the Webform module accessible to everyone?

Accessibility can't be neglected

Accessibility has become an important and persistent topic in Open Source communities. I've stated how impressed I am with WordPress's reimaging of its page building user experience, called 'Gutenberg'. At the same time, I was disappointed to see how the WordPress community, specifically how Automattic, addressed accessibility issues related to Gutenberg's user experience. My criticism is based on my sense of the responsibility associated with maintaining an Open Source product used by tens of thousands of websites, and in WordPress' case, is used by over 30% of all websites.

Open Source developers can't neglect or ignore accessibility.

Open Source is about sharing and collaborating on code and ideas with everyone; therefore the result of our collaboration needs to be accessible to everyone.

Drupal's commitment to accessibility

Dries Buytaert, Drupal project lead, recognized the quagmire that was created with WordPress's Gutenberg debacle and posted a call-to-action to the Drupal community titled "Drupal's commitment to accessibility."

Today, I've come to believe that accessibility is not something you do for a small group of people. Accessibility is about promoting inclusion. When the product you use daily is accessible, it means that we all get to work with a greater number and a greater variety of colleagues. Accessibility benefits everyone.

-- https://dri.es/drupal-commitment-to-accessibility

The Drupal community has defined an accessibility gate with Web Content Accessibility Guidelines (WCAG) guidelines for releasing new Drupal core features. It’s inspiring to see the Drupal community's commitment to addressing accessibility. Whenever I peek at the Drupal's Accessibility Slack channel, I continually see pings to Andrew Macpherson asking him to review new core features for accessibility issues. Asking one person or even a group of people to review new features for accessibility issues does not scale very well. I’m hesitant to distract Andrew from his Drupal core accessibility responsibilities to help me with evaluating the Webform module for accessibility issues and yet I know it needs to be addressed.

Before the New Year, I was able to chat with Andrew about Drupal's and Webform's accessibility, and I suggested that accessibility should be treated like Drupal's commitment to security. Drupal has a dedicated security team, which displays badges next to stable releases that are covered by Drupal's security advisory policy. Maybe this approach is too extreme, but we need to improve how we make accessibility part of our process when building and maintaining core and contributed projects.

It’s impossible to build a team that can monitor all of Drupal for accessibility issues. My conversation with Andrew led me to suggest that I should try to 'self-certify' and assess the Webform module's accessibility. At the very least I should review, document, and quantify the Webform module's commitment to accessibility. The challenge I faced was…

How to self assess the Webform module's accessibility?

Initially, I found this task to feel daunting until I googled "Accessibility checklists" and found Berkeley's Web Access team's accessibility self-assessment documentation.

Berkeley's Web Access accessibility self-assessment

Accessibility is Usability!!!

-- https://webaccess.berkeley.edu/home

This statement from Berkeley's Web Access homepage is brilliant because it transitions everyone's acknowledgment that usability is a key part of a website's user experience and makes us realize that accessibility is just as important. The Berkeley Web Access team has put a significant amount of thought and passion into these resources.

Berkeley's Web Access site is a comprehensive, up-to-date resource for beginners and experts. There are resources discussing what is a screenreader, what does "keyboard-only" mean? and tips and how tos. They even link to Drupal's accessibility statement. What spoke to me directly was their self-assessment section with a DIY accessibility checklist.

Berkley's DIY Accessibility for Developers Google Sheet is precisely the tool I was looking for to help me take a crack at self-assessing the Webform module's accessibility

Performing the Webform module's DIY Accessibility Audit

To properly self-assess the Webform module's accessibility, it helps to establish some goals. My accessibility self-audit goals are to…

  • Develop a process for auditing the Webform module's accessibility

  • Document and remediate any Webform or Drupal accessibility issues

  • Define a benchmark for the Webform module's accessibility

My process is to fill out the DIY Accessibility Audit spreadsheet's action items AS-IS and avoid making any changes to overall spreadsheet architecture or recommendations. I decided to use WebAIM's WCAG 2 Checklist with my favorite accessibility evaluation tool, the WAVE extension for Chrome. I also wanted to leverage Pa11y, an automated and command-line testing tools. All new accessibility issues would be documented on Drupal.org via Issue #3026393: [meta] Self-assess the Webform module for Drupal 8's accessibility. The completed spreadsheet will define a benchmark for the Webform module's accessibility.

I also think it’s important to note that all aspects of the Webform module's accessibility are being reviewed and assessed, not just the generated public-facing forms. The form builder and administrative user interfaces must also be accessible to everyone. Since the Webform module is built on top of Drupal's Form API, some accessibility issues may be coming from Drupal core. Therefore, I’m also going to track and document related Drupal core accessibility issues.

Here are results from the Webform module's DIY Accessibility Audit

When I began reviewing and filling in the DIY Accessibility for Developers spreadsheet, I had a misconception that I’d be able to share some statistical results that quantify the Webform module's accessibility. The first page of the spreadsheet does include the number of issues and their statuses. I don't feel saying X issues exist with X fixed and X remaining portrays a complete picture. The experience of filling out this spreadsheet did give me an understanding of what is required to make a user experience like the Webform module accessible.

Developers need to start reviewing their project's user experience through different perspectives. To understand accessibility, developers need to navigate the project's UX using just the keyboard and recognize that every piece of content and the visible widget will be read aloud by a screen reader.

I found that the combination of reviewing the WCAG guidelines and comparing the results from two automated tools, WAVE and Pa11y, helped me to see any immediate problems. Listing out individual WCAG guidelines with Webform and Drupal specific notes helped me apprehend the Webform module's accessibility. I did find and remedy a few accessibility issues, which were all related to the proper labeling of form inputs with appropriate contextual information, which would be read aloud via a screen reader.

The Web Content Accessibility Guidelines (WCAG) can feel overwhelming but when I approached them using WebAIM's WCAG 2 Checklist, it was easy to just read through them and determine which guidelines apply to the Webform module. Collaborating and iteratively defining an accessibility checklist with recommended accessibility testing tools for Drupal core and contribute projects would help ensure the accessibility is part of our Drupal communities process. Some of this discussion is already happening via Issue #2857808: Automating accessibility checks

Self-assessment can improve Drupal's accessibility

Self-assessment is one of many tools and approaches to improving Drupal's accessibility. We recognize security and automated testing as part of our process and visibly on every project page. Shouldn't accessibility be treated the same way?

Personally, I take a lot of pride in knowing the Webform module is one the most accessible form builders on the market. This is something I want to promote to anyone evaluating the Webform module and Drupal.

Promoting the Webform module's accessibility

To truly and publically define the Webform's accessibility benchmark, I decided to add the below callout to the Webform module's project which links to the completed spreadsheet and this blog post.

The Webform module is committed to being accessible to everyone.

The Webform module is committed to being accessible to everyone.

Contributing and funding Webform accessibility

Improving the Webform module's and Drupal's accessibility requires an ongoing effort. Every minor release of Webform and Drupal should include accessibility improvements. If you have the time and resources, please get involved in the Drupal and the Webform module's issue queue. Organizations that rely on the Webform module should consider backing or donating the Webform module's Open Collective. Backing the Webform module's Open Collective will help us improve accessibility and encourage the overall growth and support of the Webform module.

Final thoughts

I like Berkeley's Web Access statement that "Accessibility is Usability!!!" so much, I decided to play with these words and came up with…

Open Source is Accessibility!!!

This statement plays with multiple meaning of accessibility because Open Source is built on the idea that the software's source code should be accessible to everyone. It’s now time for our software to be accessible to everyone.

Everyone needs to care accessibility and your opinion matters. Asking people to self-access their code might be asking too much. At the same time, I'm proud of the accessibility bullet point I have added to my resume skills. Striving to include everyone and anyone is never a bad idea. For me, being an Open Source developer is more than just writing code, it’s about working with a diverse and inclusive community of people, and doing my level best to make sure everyone is acknowledged, heard, seen and considered. We’re all individuals but we’re also all part of the big picture.

What do you think about encouraging Drupal core and contrib developers to self-assess their code and projects?

Please post your thought below and consider backing or donating to the Webform module's Open Collective.

Almost done…

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

OKSubscriptions powered by Strikingly

Jan 28 2019
Jan 28

The European Commission worked with the Drupal Security Team to set aside 89,000€ (or roughly $100,000 USD) for a Drupal bug bounty.

An image of a shield with the Drupal mascot

The European Commission made an exciting announcement; it will be awarding bug bounties to the security teams of Open Source software projects that the European Commission relies on.

If you are not familiar with the term, a bug bounty is a monetary prize awarded to people who discover and correctly report security issues.

Julia Reda — an internet activist, Member of the European Parliament (MEP) and co-founder of the Free and Open Source Software Audit (FOSSA) project — wrote the following on her blog:

Like many other organizations, institutions like the European Parliament, the Council and the Commission build upon Free Software to run their websites and many other things. But the Internet is not only crucial to our economy and our administration, it is the infrastructure that runs our everyday lives.

With over 150 Drupal sites, the European Commission is a big Drupal user, and has a large internal Drupal community. The European Commission set aside 89,000€ (or roughly $100,000 USD) for a Drupal bug bounty. They worked closely with Drupal's Security Team to set this up. To participate in the Drupal bug bounty, read the guidelines provided by Drupal's Security Team.

Over the years I've had many meetings with the European Commission, presented keynotes at some of its events, and more. During that time, I've seen the European Commission evolve from being hesitant about Open Source to recognizing the many benefits that Open Source provides for its key ICT services, to truly embracing Open Source.

In many ways, the European Commission followed classic Open Source adoption patterns; adoption went from being technology-led (bottom-up or grassroots) to policy-led (top-down and institutionalized), and now the EU is an active participant and contributor.

Today, the European Commission is a shining example and role model for how governments and other large organizations can contribute to Open Source (just like how the White House used to be).

The European Commission is actually investing in Drupal in a variety of ways — the bug bounty is just one example of that — but more about that in a future blog post.

January 28, 2019

1 min read time

db db
Jan 28 2019
Jan 28

From time to time, I have the need to take a Twig template and a set of variables, render the template, replacing all the variables within, and then get the output as a string. For example, if I want to have a really simple email template in a custom module which has a variable for first_name, so I can customize the email before sending it via Drupal or PHP, I could do the following in Drupal 7:

<?php
$body
= theme_render_template(drupal_get_path('module', 'my_module') . '/templates/email-body.tpl.php', array(
'first_name' => 'Jane',
));
send_email($from, $to, $subject, $body);
?>

In Drupal 8, there is no theme_render_template() function, since the template engine was switched to Twig in this issue. And until today, there was no change record indicating the fact that the handy theme_render_template() had been replaced by a new, equally-handy twig_render_template() function! Thanks to some help from Tim Plunkett, I was able to find this new function, and after he pushed me to do it, I created a new change record to help future-me next time I go looking for theme_render_template() in Drupal 8: theme_render_template changed to twig_render_template.

In Drupal 8, it's extremely similar to Drupal 7, although there are two additions I made to make it functionally equivalent:

<?php
$markup
= twig_render_template(drupal_get_path('module', 'my_module') . '/templates/email-body.html.twig', array(
'my-variable' => 'value',
// Needed to prevent notices when Twig debugging is enabled.
'theme_hook_original' => 'not-applicable',
));
// Cast to string since twig_render_template returns a Markup object.
$body = (string) $markup;
send_email($from, $to, $subject, $body);
?>

If you are rendering a template outside of a normal page request (e.g. in a cron job, queue worker, Drush command, etc.) the Twig theme engine might not be loaded. If that's the case, you'll need to manually load the Twig engine using:

<?php
// Load the Twig theme engine so we can use twig_render_template().
include_once \Drupal::root() . '/core/themes/engines/twig/twig.engine';
?>

I shall go forth templating ALL THE THINGS now!

Jan 28 2019
Jan 28
Go to the profile of Deirdre Habershaw

Oct 19, 2018

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

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

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

Check out some of our current postings here:

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

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

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

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

Jan 28 2019
Jan 28
In this second installment in our series on conversational usability, we dive into a relatively overlooked area of conversational interfaces that can have an outsized impact on the eventual user experience that results: information architecture.
Jan 28 2019
Jan 28
Eldum réttCompleted Drupal site or project URL: https://www.eldumrett.is/

Eldum Rétt is an Icelandic subscription service that delivers food boxes complete with recipes and meal plans for home cooking to private households. The idea is to provide extremely flexible and varied offerings for customers of all family sizes that can be ordered and managed completely online, through a website and mobile apps. Eldum Rétt is the market leader in Iceland with thousands of customers and an annual turnover of close to 7 million US dollars.

As a customer centric company, Eldum Rétt has very complex requirements for its online services. Customers need to be able to for example to

  • individually configure their food boxes with recipes from a selected list
  • adjust the number of portions that they want to cook
  • select the days of the week they want food delivered for
  • manage their delivery times and places
  • change their subscription settings, e.g. to pause deliveries during absences

The original website was built in 2014 on Drupal 7 with Drupal Commerce and wasn’t flexible enough to sustainably accomodate all these requirements. So the decision was made to move the site to Drupal 8 and Drupal Commerce 2 and also add a React Native based mobile app that would communicate with the main Drupal driven website. This project went live in November 2018.

Jan 28 2019
Jan 28

Visualise yourself getting involved in a social experiment (and you are oblivious of your involvement). You are walking down the street and find cash on the sidewalk. You get drowned in different thoughts as to whether casually pick it up and slip it inside your pocket or just plod away as if you haven’t seen anything or just take it and give it to someone needy. Supposing you have chosen the second option, you, then, realise that it was a social experiment as some guys come towards you appreciating your character.

Illustration showing a human brain with eyes on right and several small white boxes consisting of small icons representing house, car, cup, bowl, emoticon, piechart on left


Sometimes life gives you such opportunities without even giving you some sort of prompt where you are automatically tested for your behaviour. Speaking of an automatic test, there is a different sort of automated test involved in the digital scene but has a lot of significance. Adding test coverage to your website and application can be very fruitful. For instance, you can ensure that requirements are met and avoid regressions from happening. One of the many approaches for testing is Behaviour Driven Development (BDD). As one of the leading open source content management systems, Drupal enables you to imbibe automated testing through tools like Behat in your website.

Diving into Automated testing

Automated testing is a process that involves pre-scripted tests which are run automatically. Their function is to compare actual results with expected results that help in determining if the application works as expected. It can help in executing iterative tasks and regression tests to verify if an application works correctly after the newly implemented alterations.

Automated testing is a process that involves pre-scripted tests which are run automatically.

On the contrary, manually testing involves quality assurance specialists who need to verify that the applications are working properly by following conditions written in test cases. In spite of its primitive nature, it is still very significant in cases like wearables and mobile devices that may need field testing in a physical environment.

Infographics showing different icons inside several yellow-coloured circles with each icons representing clock, spider, tick mark, desktop, curved arrow sign to explain benefits of automated testingSource: Gear Inc

Automated testing saves a lot of time by reducing the time to run repetitive tests which, in turn, saves money. It vastly enhances your test coverage. Lengthy tests that are, most often than not, avoided in manual testing can be run unattended. It also improves precision by performing the same steps precisely whenever they are executed and never misses from recording detailed results. It can simulate tens and thousands of virtual users interacting with a network, software and web applications. Moreover, shared automated tests can be leveraged by developers to detect problems quickly before sending to QA.

Automated testing in Drupal

Drupal 8 core testing framework comes with numerous automated testing options. To ensure the quality and reaction of code on edge cases, testing can be performed in different layers:

  • To test class methods, you can write Unit tests which constitute the process of testing the discrete parts or units of a software project. PHPUnit can be leveraged in this case.
  • For testing module APIs, you can write Kernel tests which are basically unit tests on steroids.
  • You can also adopt functional testing where software testing is performed for detecting the actual performance of an application’s functional requirements. Functional testing is great for accuracy, interoperability, compliance, security and suitability.
  • There is also the possibility of utilising an external framework like Behat with scenarios in gherkin syntax.

Power of Behat

Logo of Behat with the word 'behat' written in black colour and an icon representing number 8


Behat is an open source Behaviour-driven Development (BDD) framework, as stated in the official site of Behat, and helps in supporting the process of delivering software that matters via perpetual communication, deliberate discovery and test automation. BDD is a way of building software through continuous interaction with stakeholders in the form of examples like what help would a particular software be offering to them and you for attaining your goals.

Behat is an open source Behaviour-driven Development framework.

Behat was created for PHP and is a spectacular PHP library to the core with its codebase leveraging a superabundance of Symfony components, strictly adhering to coding standards, and comes out on top in major static analysis tools. Moreover, Behat has superb extensibility as almost all of its functionality could be enhanced or replaced via a magnificent extension system.  

Behat for Drupal

There is a provision for a Drupal extension that offers an integration layer between Behat, Mink Extension and Drupal. For the starters, this Drupal extension can be enabled using Composer followed by the creation of behat.yml file in the projectdir. You also get to add your features files to the features directory of your repository that contains human-readable steps to test something.

By describing the behaviour of a site in plain but stylised language followed by the process of turning that description into an automated test, Behat and Mink come in very handy. These functional tests enable the site builders to ensure that the added value that is created while building a Drupal website keeps on behaving as per the expectations even after alterations are done to the website like security updates, changes to custom code among others.

This Drupal extension helps in setting up test data using Drush or the Drupal API in addition to defining theme regions and test data that appear within them. It also assists in clearing cache, logging out and other such significant steps. Moreover, it is an astronomical solution for detecting and discovering steps offered by contributed modules and themes.

Case study

Global Canopy Programme wanted to retrieve the news syndicated from a plethora of public sources, govern it through an internal application followed by resyndicating it to numerous public-facing sites. For this, it leveraged the power of Drupal with the help of a digital agency to build this application called Forest Desk. They followed the paradigm of BDD that was beneficial for each piece of functionality and could be embedded in the Scrum process.

Behat was meritorious for testing whether the functionality has been built correctly. It turned out to be an essential tool for testing comprehensible action on a website like clicking links or hitting submit buttons. Behat’s knowledge could further be extended using custom PHP code thereby leveraging it to understand RSS which is the format for syndicating content on the web.

Behat’s knowledge could further be extended using custom PHP code thereby leveraging it to understand RSS which is the format for syndicating content on the web.

The RSS standard was utilised for syndicating data and Drupal’s Feeds module was very beneficial in consuming this standard from remote websites and modules like Views helped in repackaging it for consumption by other sites. Furthermore, the Adminimal theme offered an immaculate administrative design.

For developing each feature, once its scenario was specified in Gherkin syntax, Features module was leveraged. This helped in altering the configuration and save the changes and return to the previous state of configuration in case any BDD test no longer works.

Conclusion

Behat is a great tool for enabling superfast and efficacious automated testing in Drupal development.

Offering stupendous digital experience with our suite of services to our partners has been our supreme goal.

Contact us at [email protected] to get the best out of automated testing through this wonderful tool - Behat.

Jan 27 2019
Jan 27

Girish Mathrubootham launched his startup Freshdesk, a software-as-a-service (SaaS) venture, with Shan Krishnasamy in a small conference room of his friend’s office. Its staggering growth in a short span of time coerced them to move to a suburb and convert a warehouse into an office. Subsequently, they went on to have a proper office. With a humongous rise in stature, they had to literally break the walls to expand its workplace. ‘Breaking the walls’ represents the swift growth of this SaaS-based firm.

Top view of workplace showing people sitting in front of computers


Such is the significance of the SaaS model that it can enable the enterprises to emphasise on business outcomes rather than working around technical limitations. SaaS clients relish the quicker and flexible deployment and frequent automatic updates to increase the pace of innovation. SaaS standardisation simplifies Research and Development and uncloaks new collaboration and sharing potential. SaaS-based business applications promise faster time-to-deploy and an agile, incremental approach for attaining business goals. Drupal, as an open source content management framework, can be very beneficial for building SaaS. Before exploring Drupal’s power in building SaaS, let’s traverse the origins of SaaS briefly.

Origins of SaaS

Infographics showing the timeline of SaaS with a line at the centre, greyish background and cloud icons on the rightSource: Process Street

An interesting compilation by Process Street delineates the history of SaaS and takes us back to mid-twentieth century. It states that IBM was the 1960s SaaS company and IBM 360 Model 67 provided processing power to many organisations. Computers were not as powerful as we have today but this allowed them to have the data and power hosted in a different physical location to the one they are being used in.

The ‘70s and the ‘80s are touted to be the time period when pre-SaaS architecture grew. This was the time when first ever CRM (Customer Relationship Management) called ACT! was developed. This was also the time when Great Plains Software emerged in the market which was later acquired by Microsoft and turned into Microsoft Dynamics.

SaaS-based firms like Salesforce, NetSuite, and Intacct established themselves in the 1990s. Moreover, inefficacies in Application Service Providers (ASP) gave further push to the growth of SaaS. As a matter of fact, Salesforce was the gamechanger in the SaaS business. Eventually, SaaS has gone on to become a proven business model and it is one of the most sought after solutions among the enterprises today.

A quick look at SaaS

flowchart with different icons representing laptop, desktop, smartphone, houselock, certificate to explain SaaS, PaaS, and IaaSSource: Microsoft

Gartner defines software as a service (SaaS) as software that is owned, delivered and managed remotely by one or more providers. The provider delivers software based on one set of common code and data definitions that are consumed in a one-to-many model by all contracted customers any time on a pay-for-use basis or as a subscription based on use metrics. Biggest SaaS organisations today include the likes of Salesforce, Microsoft, Google, Adobe, Amazon, etc.

Software as a service is a software that is owned, delivered and managed remotely by one or more providers.

SaaS helps you in gaining access to intricate applications. You do not have to buy, install, update or govern any hardware, middleware or software for offering SaaS apps to the users. Complex enterprise applications like ERP (Enterprise Resource Planning) and CRM are made cost-effective by SaaS. This is advantageous for the organisations that have the dearth of resources to purchase, deploy and handle the required infrastructure and software themselves.

By paying for only what you use, you wind up saving superabundance of money. Furthermore, you can run most SaaS apps directly from the web browser without having to download and install any software albeit few apps that require plugins. It streamlines the process mobilising your workforce and with the data stored in the cloud, you can access the information from any internet-connected computer or handheld device.

Drupal for SaaS

Suppose you already have a SaaS product, you can use Drupal to build the website and market your product. Drupal’s tremendous features for content governance and e-commerce can be an astounding solution to take your product to an unprecedented reach. 

Can I use Drupal to build a SaaS? Yes, you can also build a SaaS solution utilising the powerful capabilities of Drupal. Governments are required to confront a plethora of social determinants that affect healthcare outcomes and overall spending. An agency talked about building a Drupal SaaS solution in a session hosted by Drupal 4 Gov for connecting citizens with services.

[embedded content]


The State of Idaho innovatively compiled both government and community services through a single platform and simplified the process of assisting citizens to avail the right sort of services through its ‘Live Better Idaho’ program. Drupal turned out to be an astounding choice for building this platform because of its immaculate content workflow, extensibility and interoperability. Amazon Web Services was also leveraged for its great scalability.

Drupal turned out to be an astounding choice because of its immaculate content workflow, extensibility and interoperability. 

Civiserv, a Drupal-based citizen portal which is focussed specifically on powering the delivery of social and health services by state and local agencies, came in very handy for building ‘Live Better Idaho’ program. Offered as a SaaS product, it comes as a configurable virtual assistant that helps to bridge the gap between target audiences and the services that they need the most.

A lot of developmental effort was put into creating means testing. To improve personalisation factor, user accounts were integrated that allowed users to set up accounts and preserve their searches and favourites within the site. In addition to this, email signups and text alert functionalities were added so that notification was sent to the user whenever new content is published or any new event is added. For efficacious tracking, reports could be seen to find out the number of referrals that were being generated or the most popular service among users.

The session also presented a demonstration which showed the platform having simple navigation of services under different categories like financial, healthcare, food and nutrition among others. In addition to this, a conventional search box could also be utilised for finding the relevant services. The means testing was demonstrated through the ‘Tell us about yourself’ option where you need to enter particulars like your age and monthly income and the results pop up showing relevant services. The results could be further narrowed down by choosing particulars like ‘within 5 miles’ or ‘Teen: 13-17 yrs’. 

What lies ahead for SaaS?

graphical representation with pink background and a black line with white dots on it to represent usage of SaaSSource: FinancesOnline

SaaS will be powering almost 80 percent of the business workflows by 2022 as can be seen in the graphical representation below.

Moreover, Wikibon’s 2018 Cloud Markets and Trends report states that the largest segment of the cloud industry is SaaS and will grow to $346 billion at a CAGR (Compound Annual Growth Rate) of 25.9%.

A report on Transparency Market Research states that CRM is registering the highest demand for SaaS solutions. ERP and the collaborative solutions segments will pick up the pace by 2022. The increasing trend of e-commerce, infrastructural growth and increasing customer support services will accelerate the use of SaaS solutions. HCM (Human Capital Management) is slated to be registering quickest growth in the demand for SaaS solutions at 32.90% CAGR in the forecast period of 2015 to 2022. The rise in the need for smart and talented workforce in organisations across the world is the reason behind this growth.

Conclusion

SaaS is great for digital businesses as it fosters a quicker, more agile approach to application deployment and is an integral component of any digital transformation project that is prevalent in a plethora of application portfolios.

Drupal can be a quintessential solution for delivering a SaaS offering with its fantastic content workflow capabilities.

We are perpetually committed to delivering an amazing digital experience to our partners through our suite of services.

Ping us at [email protected] and let us know how can we help you achieve your digital transformation goals.

Jan 27 2019
Jan 27

When you check out a branch or commit with git, two things happen: git changes the files in the repository folder, and changes the file that tells it what is currently checked out. In git terms, it changes what HEAD points to. In practical terms, it updates the .git/HEAD text file to contain a different reference.

But these two operations can be done separate from one another, so that while the files correspond to one commit, git thinks that the HEAD commit is another one.

This of course puts your git repository in an unstable, even unnatural state. But there are useful reasons for doing this, and one of these comes up in the operation of dorgflow, my tool for working with git and drupal.org patches.

Dorgflow creates a local branch for a drupal.org issue, and creates a commit for each patch, so you end up with a nice sequential representation of the work that's been done so far.

But every patch that's uploaded to an issue is a patch against the master branch, so we can't just apply the patches one by one and make commits: the first patch will apply, and all the subsequent ones will fail.

What we need is for the files be in the same state as the master branch, so that the patch applies, but when we make a commit, it needs to be a new commit on the feature branch:

 * [Feature branch] Patch 1 <- Make patch 2 commit on top of this commit.
/
* [master branch] Latest master commit. <- Apply patch 2 to these files.

In git terms, we want the current files (the working tree, as git calls it) to be on the master branch, while git's HEAD is on the feature branch.

For my first attempt at getting this to work, I did the following:

  1. Put git on the feature branch.
  2. Check out the master branch's files, with git checkout master -- .

When you use git checkout command with a file or files specified, it doesn't move HEAD, but instead changes just those files to the given commit or branch. If you give '.' as the file to check out, then it does that for all of the repository's files. In effect, you get the files to look like the given commit, in our case the master branch.

This is what we want, but it has one crucial flaw. Suppose patch 1 added a new file, foo.php. When we check out master's files, foo.php is not changed, because it's not on master. There's nothing on master to overwrite it. The 'git checkout master -- .' doesn't actually say 'make all the files look like master', it says 'check out all the files from master'. foo.php isn't on master, and so it's simply left alone.

Suppose now that patch 2 also adds the foo.php file, which it most likely will, since in most cases, a newer patch incorporates all the work of the previous one.

Applying patch 2 to the files in their current state will fail, because patch 2 tries to create the file foo.php, but it's already there.

So this approach is no good. I was stuck with this problem with dorgflow for months, until I had a brainwave: instead of staying on the feature branch and changing the files to look like master, why not check out the master branch, but tell git that the HEAD is the feature branch?

That solves the problem of the foo.php file: when you check out master, the foo.php that's at the patch 1 commit vanishes, because it doesn't exist on master. So applying patch 2 will be fine.

The only remaining question was how to you tell git it's on a different branch without doing a checkout of files? Turns out this is a simple plumbing command: git symbolic-ref HEAD refs/heads/BRANCH. This is just telling git to change the reference that HEAD points to, and that's how git stores the fact that a particular branch is the current one.

This was a simple change to make in dorgflow (it was actually more work to update the tests so the mocks had the correct method call expectations!).

This means that dorgflow accordingly now handles applying a sequence of issue patches that add files now works in the latest release.

Jan 27 2019
Jan 27

As children, we have all come across chapters which were all about Human Rights. Right to express your own opinions, right to educate, right to equality and right on not to be mistreated. 

To deny people their human rights is to challenge their very humanity. 
-Nelson Mandela

The way these rights have been allowing everyone to live in dignity, freedom, equality, justice, and peace can easily be correlated to the four rights of open source and web that is following the similar responsibility. 

When I talk about open source or open web I am precisely talking about freedom to use, study, share and improve. In short the ability to use the internet to build and make something. 

Image of different letters with open in it


Open Source and Open web might have the same rights, but these terms as a whole have a very different meaning. 

Past of the Open Source and Open web

Open source and Open web have played a vital job in the IT business. From frameworks to the biggest supercomputer, and from the handset in your pocket to the product working the sites, both these things have made a mark in the lives of its users.
 
The saga started during the 1950s when an eager figuring master and corporate research fabricated and imparted the product to its source code which was simply tuned in to the general thought of information trade.
 
Though the web was initially figured and delivered to draw in the interest for computerized data sharing between the researchers in colleges and foundations around the globe. There are fields in which it has made its stamp. New methodologies in fields as various as data (Open Data), legislative issues (Open Government), logical research (Open Access), training, and culture (Free Culture). 
 
In the late 1970s – mid-1980s, the main programming licenses showed up. That is when programming items ended up secured by copyrights and trademarks.
 
In 1983, Richard Stallman started the GNU project to make a working framework with its source code which was accessible and open. The free software foundation was built up. 
 
In the late 1990s, Linux started the enthusiasm of various organizations and government associations. A great deal of site-based new businesses was built up in those days which drove up interest with the expectation of complimentary web servers, in the primary line the Apache HTTP Server.
 
As the product business has developed, working frameworks developed into increasingly unpredictable and present-day applications. 

Open source and Open web Presently and Ways in Which they are different

  Open Source Open Web  Definition  The original source code is made freely available. Parts of the web that are public and viewable by everyone  Constitutes of Source Code, Derived Works, Integrity of the source code etc
Ability to publish, code, access 
  Why is it important? It promotes the development of powerful software tools. Presents with a more informed public, civic participation, opportunities to learn

Definition 

Open Source 

The term "open source" refers to something that people can modify and share because of the fact that its design is publicly accessible. It allows its users to copy, modify, or delete parts of the code under their own choice. The user is able to work functions of the open source on their own program where there is no consequence. "Source code" is the part of the software that most of the computer users don't ever see; it's the code computer programmers can manipulate to change how a piece of software—a "program" or "application"—works. 

Open Web 

Open web refers to the public side of the web. That can be easily accessible to people.
The public side of the Web. There are parts of the Web that are public and viewable by everyone and others that are private. The countries that do not restrict their citizens from viewing content on the Web. For me the Open Web is about the ability to openly do three kinds of things:

Constitutes of

Open Source 

Open source doesn't just involve the accessing of the source code. The distribution terms of open-source include the following criteria:

  • Source Code: The program must include the source code, and must allow distribution in the source code in a compiled form. Where some form of a product is not shared with source code, there must be well-publicized source code for no more than a reasonable reproduction cost, preferably downloading via the Internet without charge
     
  • Distributed Works: Different licenses enable ps the programmers to change the software with several conditions attached. When you modify the source code, open source needs the inclusion of what you should alter.
     
  • Distributed revision control systems: When many developers in different geographical locations change the data and files, these systems let the different versions and updates.
     
  • Bug trackers and task lists: Open source allows large-scale projects to control the issues and keep a track of their fixes.
     
  • Testing and debugging tools: Open source automates testing during system integration and debugs other programs.

Open Web 

Open Web is all about the experience and the ability to do three types of things:
Publish: The content and the applications on the web in open standards allow the users to declare and publish the data online. 

  • Code and Implement: The web standards depends totally on the content and the applications which depend on it.
     
  • Access and Use: The content, code, web applications, and the implementations can be accessed and used easily.

Why is it important?

Open Source 

Open source is great because it promotes the development of powerful software which is increasingly reliant on. It has encourages things around. Things like: 

  • GitHub and Open Source 

Adding to the open source can be a rewarding way to learn, teach, and build experience in just about any skill you can imagine. GitHub has been providing open source software to its users to use and explore. This helps in successful delivering of the projects. Developers have the power to create and control open source software with the help of Github. They can create a project that interests them to see its progress as it happens. They don’t have to build everything from scratch or make copies of their favorite projects, an experiment in private repositories, and tailor tools and features to meet the needs.

Image of a black cat beside which GitHub is written


Drupal is an open source content management system (CMS) that powers an estimated 2% of all websites. One of the greatest benefits of using Drupal CMS is the fact that it is open source. That means according to the Drupal websites anyone can download, use, work on, and share it with others. Drupal allows continuous digital innovation at leading organizations like weather.com and NBCUniversal. With Drupal, marketers, and web developers can build and maintain great web, mobile and social experiences. 

Drupal as an open source software has long-term viability. Selecting technologies means committing to solutions that will support an active, growing business over the long term, so it demands careful consideration and foresight.

Image of 8 yellow circle defining open source practices


Open Web 

An open web is a movement which goes up against some of the largest platform companies of the world that have control over our data, in short, it means positive progress of things like:

  • A more informed public 
  • More civic Participation 
  • More opportunities to learn and connect with each other 

The open web is decentralized 

The decentralized web or Dweb could be an opening to take charge of our data back from the big tech firms that have been spying and beholding on it from quite some time now. A big example of it is Facebook which recently got under the radar of security issues.

Determining the best type of software depends on the business needs and objectives. The best way to compare is to look at some of the biggest differences between the two types.

Are open source and open web at risk?

Open source and open web are losing in its genre. Open source does have restrictions and risks that comes under the drama. Social issues such as data protection and privacy, political issues such as net neutrality and copyrights have been compromised through things like automation of fake news, the use of CMS to take out a step in future and the idea where there is no information of the people who are being interacted. 

  • Open Source Software Security Risks

Open source security vulnerabilities are really lucrative opportunity for the hackers. Once discovered by the security research community, open source vulnerabilities and the details on how to carry out the exploit are made public to everyone. This provides hackers with all the information that they need in order to carry out an attack. 

  • Open Source Software Licensing Compliance Risks

Every open source software component, along with its dependencies, comes with a license. When we use an open source component in our project, we are agreeing to a set of terms and conditions that we must comply with. This can become murky territory for anyone who is not well versed in the ins and outs of open source licensing.  

  • Open Source Software Quality Risks

While an organization invests many resources in the quality assurance of its proprietary code, it appears many development teams marginalize or overlook checking an open source component’s quality. Obviously, we all want our final product to be stable and consistent under pressure.

So now the question is- how to solve it?

Google is presenting all of the company's open source projects under one roof. Any company considering releasing some of its code under open source licenses might want to take a gander at Google's new website, Google Open Source. It's not a repository, for source code you'll still have to go to GitHub or the company's own Git service, but more of a catalog of Google's open source projects, with each listing including information such as how the company uses the software, its license and so on.

Google is no newcomer to open source. In its early days, it built its infrastructure on the back of freely available software, like Linux, and has been a major contributor to the open source canon ever since. Kubernetes would be an example of a project it 

Future of Open Source: How can it win?

Today, open source is the default. Every major technology starts there, whether that’s a cloud, AI, mobile or containers. To win the Open source you can follow three methods:

  • Start blogging 
  • Increase in the User experience 
  • Define 

As the Internet continues to expand in new ways, so do innovations and revolutions. Anyone can contribute to open source projects. And, today we're seeing open hardware, the Internet of Things, and the Maker movement takes hold and changes the way we are solving problems and shaping the world.

Google Amp Project and Open Web

The AMP Project is an open-source initiative that is aiming to make the web a better place for all. The project enables the creation of websites and the ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. Moreover, the sites that have adopted AMP have seen encouraging gains in site performance and conversions (which presumes a correlating better site user experience). These and other noted benefits have led Google to begin with the working toward the technologies utilized by AMP and folding them into open web standards.

A blue background with a mobile phone where a meter is drawn on the screen and google amp is written on its side


Business Eco-System and Open Source 

We have seen open source growth and changes in different approach on how to build a business model. Technology has changed a lot, thus the innovation has been taking place in open source projects to an extent. Overall, the world of software would be much different without open source software. 

Wrapping Up 

Open Source has become dominant on the web over time. Today over 90% of the CMS market is open source. In fact, it’s nearly the de-facto license model for the all-things web. To say that the internet is an open source would not be an exaggeration, it’s that dominant. 

At Opensense Labs, building a successful service model is no task and we are always ready for the challenge. We bring features and capabilities into a new direction with all the abilities of open source. Ping us on [email protected] to build an open source project that would form a building block for your futuristic applications. 

Jan 25 2019
Jan 25

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

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

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

And so on...

For, let's admit it now:

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

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

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

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

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

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

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

Areas such as:
 

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

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


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

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

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

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


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

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

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

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

What metrics do they use?

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

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

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

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

6. A Few Quality Indicators and Suggested Tools

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

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

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

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

All those powerful tools to help you:
 

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

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

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

How do you currently determine your contributed projects' value?

Jan 25 2019
Jan 25

This blog has been re-posted and edited with permission from Dries Buytaert's blog.

Do I build my website with Drupal's built-in templating layer or do I use Drupal's decoupled or headless capabilities in combination with a JavaScript framework?

The pace of innovation in content management has been accelerating — driven by both the number of channels that content management systems need to support (web, mobile, social, chat) as well as the need to support JavaScript frameworks in the traditional web channel. As a result, we've seen headless or decoupled architectures emerge.

Decoupled Drupal has seen adoption from all corners of the Drupal community. In response to the trend towards decoupled architectures, I wrote blog posts in 2016 and 2018 for architects and developers about how and when to decouple Drupal. In the time since my last post, the surrounding landscape has evolved, Drupal's web services have only gotten better, and new paradigms such as static site generators and the JAMstack are emerging.

Time to update my recommendations for 2019! As we did a year ago, let's start with the 2019 version of the flowchart in full. (At the end of this post, there is also an accessible version of this flowchart described in words.)

A flowchart of how to decouple Drupal in 2019

Different ways to decouple Drupal

I want to revisit some of the established ways to decouple Drupal as well as discuss new paradigms that are seeing growing adoption. As I've written previously, the three most common approaches to Drupal architecture from a decoupled standpoint are traditional (or coupled), progressively decoupled, and fully decoupled. The different flavors of decoupling Drupal exist due to varying preferences and requirements.

In traditional Drupal, all of Drupal's usual responsibilities stay intact, as Drupal is a monolithic system and therefore maintains complete control over the presentation and data layers. Traditional Drupal remains an excellent choice for editors who need full control over the visual elements on the page, with access to features such as in-place editing and layout management. This is Drupal as we have known it all along. Because the benefits are real, this is still how most new content management projects are built.

Sometimes, JavaScript is required to deliver a highly interactive end-user experience. In this case, a decoupled approach becomes required. In progressively decoupled Drupal, a JavaScript framework is layered on top of the existing Drupal front end. This JavaScript might be responsible for nothing more than rendering a single block or component on a page, or it may render everything within the page body. The progressive decoupling paradigm lies on a spectrum; the less of the page dedicated to JavaScript, the more editors can control the page through Drupal's administrative capabilities.

Up until this year, fully decoupled Drupal was a single category of decoupled Drupal architecture that reflects a full separation of concerns between the presentation layer and all other aspects of the CMS. In this scenario, the CMS becomes a data provider, and a JavaScript application with server-side rendering becomes responsible for all rendering and markup, communicating with Drupal via web service APIs. Though key functionality like in-place editing and layout management are unavailable, fully decoupled Drupal is appealing for developers who want greater control over the front end and who are already experienced with building applications in frameworks like Angular, React, Vue.js, etc.

Over the last year, fully decoupled Drupal has branched into two separate paradigms due to the increasing complexity of JavaScript development. The so-called JAMstack (JavaScript, APIs, Markup) introduces a new approach: fully decoupled static sites. The primary reason for static sites is improved performance, security, and reduced complexity for developers. A static site generator like Gatsby will retrieve content from Drupal, generate a static website, and deploy that static site to a CDN, usually through a specialized cloud provider such as Netlify.

What do you intend to build?

The top section of the flowchart showing how to decouple Drupal in 2019

The essential question, as always, is what you're trying to build. Here is updated advice for architects exploring decoupled Drupal in 2019:

  1. If your intention is to build a single standalone website or web application, choosing decoupled Drupal may or may not be the right choice, depending on the features your developers and editors see as must-haves.
  2. If your intention is to build multiple web experiences (websites or web applications), you can use a decoupled Drupal instance either as a) a content repository without its own public-facing front end or b) a traditional website that acts simultaneously as a content repository. Depending on how dynamic your application needs to be, you can choose a JavaScript framework for highly interactive applications or a static site generator for mostly static websites.
  3. If your intention is to build multiple non-web experiences (native mobile or IoT applications), you can leverage decoupled Drupal to expose web service APIs and consume that Drupal site as a content repository without its own public-facing front end.

What makes Drupal so powerful is that it supports all of these use cases. Drupal makes it simple to build decoupled Drupal thanks to widely recognized standards such as JSON:APIGraphQLOpenAPI, and CouchDB. In the end, it is your technical requirements that will decide whether decoupled Drupal should be your next architecture.

In addition to technical requirements, organizational factors often come into play as well. For instance, if it is proving difficult to find talented front-end Drupal developers with Twig knowledge, it may make more sense to hire more affordable JavaScript developers instead and build a fully decoupled implementation.

Are there things you can't live without?

The middle section of the flowchart showing how to decouple Drupal in 2019

As I wrote last year, the most important aspect of any decision when it comes to decoupling Drupal is the list of features your project requires; the needs of editors and developers have to be carefully considered. It is a critical step in your evaluation process to weigh the different advantages and disadvantages. Every project should embark on a clear-eyed assessment of its organization-wide needs.

Many editorial and marketing teams select a particular CMS because of its layout capabilities and rich editing functionality. Drupal, for example, gives editors the ability to build layouts in the browser and drop-and-drag components into it, all without needing a developer to do it for them. Although it is possible to rebuild many of the features available in a CMS on a consumer application, this can be a time-consuming and expensive process.

In recent years, the developer experience has also become an important consideration, but not in the ways that we might expect. While the many changes in the JavaScript landscape are one of the motivations for developers to prefer decoupled Drupal, the fact that there are now multiple ways to write front ends for Drupal makes it easier to find people to work on decoupled Drupal projects. As an example, many organizations are finding it difficult to find affordable front-end Drupal developers experienced in Twig. Moving to a JavaScript-driven front end can resolve some of these resourcing challenges.

This balancing act between the requirements that developers prioritize and those that editors prioritize will guide you to the correct approach for your needs. If you are part of an organization that is mostly editorial, decoupled Drupal could be problematic, because it reduces the amount of control editors have over the presentation of their content. By the same token, if you are part of an organization with more developer resources, fully decoupled Drupal could potentially accelerate progress, with the warning that many mission-critical editorial features disappear.

Current and future trends to consider

A diagram showing a spectrum of site building solution; low-code solutions on the left and high-code solutions on the right

Over the past year, JavaScript frameworks have become more complex, while static site generators have become less complex.

One of the common complaints I have heard about the JavaScript landscape is that it shows fragmentation and a lack of cohesion due to increasing complexity. This has been a driving force for static site generators. Whereas two years ago, most JavaScript developers would have chosen a fully functional framework like Angular or Ember to create even simple websites, today they might choose a static site generator instead. A static site generator still allows them to use JavaScript, but it is simpler because performance considerations and build processes are offloaded to hosted services rather than the responsibility of developers.

I predict that static site generators will gain momentum in the coming year due to the positive developer experience they provide. Static site generators are also attracting a middle ground of both more experienced and less experienced developers.

Conclusion

Drupal continues to be an ideal choice for decoupled CMS architectures, and it is only getting better. The API-first initiative is making good progress on preparing the JSON:API module for inclusion in Drupal core, and the Admin UI and JavaScript Modernization initiative is working to dogfood Drupal's web services with a reinvented administrative interface. Drupal's support for GraphQL continues to improve, and now there is even a book on the subject of decoupled Drupal. It's clear that developers today have a wide range of ways to work with the rich features Drupal has to offer for decoupled architectures.

With the introduction of fully decoupled static sites as an another architectural paradigm that developers can select, there is an even wider variety of architectural possibilities than before. It means that the spectrum of decoupled Drupal approaches I defined last year has become even more extensive. This flexibility continues to define Drupal as an excellent CMS for both traditional and decoupled approaches, with features that go well beyond Drupal's competitors, including WordPress, Sitecore and Adobe. Regardless of the makeup of your team or the needs of your organization, Drupal has a solution for you.

Special thanks to Preston So for co-authoring this blog post and to Angie ByronChris HamperGabe SulliceLauri EskolaTed Bowman, and Wim Leers for their feedback during the writing process.

Accessible version of flowchart

This is an accessible and described version of the flowchart images earlier in this blog post. First, let us list the available architectural choices:

  • Coupled. Use Drupal as is without additional JavaScript (and as a content repository for other consumers).
  • Progressively decoupled. Use Drupal for initial rendering with JavaScript on top (and as a content repository for other consumers).
  • Fully decoupled static site. Use Drupal as a data source for a static site generator and, if needed, deploy to a JAMstack hosting platform.
  • Fully decoupled app. Use Drupal as a content repository accessed by other consumers (if JavaScript, use Node.js for server-side rendering).

Second, ask the question "What do you intend to build?" and choose among the answers "One experience" or "Multiple experiences".

If you are building one experience, ask the question "Is it a website or web application?" and choose among the answers "Yes, a single website or web application" or "No, Drupal as a repository for non-web applications only".

If you are building multiple experiences instead, ask the question "Is it a website or web application?" with the answers "Yes, Drupal as website and repository" or "No, Drupal as a repository for non-web applications only".

If your answer to the previous question was "No", then you should build a fully decoupled application, and your decision is complete. If your answer to the previous question was "Yes", then ask the question "Are there things the project cannot live without?"

Both editorial and developer needs are things that projects cannot live without, and here are the questions you need to ask about your project:

Editorial needs

  • Do editors need to manipulate page content and layout without a developer?
  • Do editors need in-context tools like in-place editing, contextual links, and toolbar?
  • Do editors need to preview unpublished content without custom development?
  • Do editors need content to be accessible by default like in Drupal's HTML?

Developer needs

  • Do developers need to have control over visual presentation instead of editors?
  • Do developers need server-side rendering or Node.js build features?
  • Do developers need JSON from APIs and to write JavaScript for the front end?
  • Do developers need data security driven by a publicly inaccessible CMS?

If, after asking all of these questions about things your project cannot live without, your answers show that your requirements reflect a mix of both editorial and developer needs, you should consider a progressively decoupled implementation, and your decision is complete.

If your answers to the questions about things your project cannot live without show that your requirements reflect purely developer needs, then ask the question "Is it a static website or a dynamic web application?" and choose among the answers "Static" or "Dynamic." If your answer to the previous question was "Static", you should build a fully decoupled static site, and your decision is complete. If your answer to the previous question was "Dynamic", you should build a fully decoupled app, and your decision is complete.

If your answers to the questions about things your project cannot live without show that your requirements reflect purely editorial needs, then ask two questions. Ask the first question, "Are there parts of the page that need JavaScript-driven interactions?" and choose among the answers "Yes" or "No." If your answer to the first question was "Yes", then you should consider a progressively decoupled implementation, and your decision is complete. If your answer to the first question was "No", then you should build a coupledDrupal site, and your decision is complete.

Then, ask the second question, "Do you need to access multiple data sources via API?" and choose among the answers "Yes" or "No." If your answer to the second question was "Yes", then you should consider a progressively decoupled implementation, and your decision is complete. If your answer to the second question was "No", then you should build a coupled Drupal site, and your decision is complete.

 Permalink

Jan 25 2019
Jan 25

by on Jan 25, 2019 in CMS, Drupal, Web Development

As an open source project, Drupal depends on thousands of people who contribute in many forms, including documentation, code, translation, promotion, mentoring, and donations. Contributing to Drupal is a great way to learn, make connections, and showcase your expertise. If you are new to the world of open source software, this blog post will share three reasons to contribute and two ways to get started.

blog-image

3 Reasons to Contribute

When we thought about contribution, our first question was: Why do we need to give back? It turns out, the reasons are several.

1. Develop Your Programming Skills

By contributing, your developers can gain programming experience and learn to write more stable code which adheres to standards. Drupal 8 follows the PSR-4 standard. A developer must have a fair acquaintance of it before he or she can be a regular contributor.

A novice programmer can also be a part of the community. Each submission has to be approved by the module or association owner before it gets accepted.

2. Boost Your Company’s Brand

Encouraging the developers on your payroll to contribute to an open source project is a surefire way to show off your skills as an organization. It builds your profile and can potentially get you more work. Here is Grazitti’s Drupal contributor profile:

https://www.drupal.org/grazitti-interactive.

Our contributions include:

  • Module building
  • Theme design
  • Patch and issue fixes

3. Encourage Open Source Culture

Knowledge should spread freely and its growth should come from developing, altering or enriching already existing works on the basis of sharing and collaboration. Contributing to Drupal promotes this culture of openness.

2 Ways to Contribute

You can write documentation, maintain old versions, fix patches, and create new modules and themes. Patches and modules are two quick ways to get your feet wet.

1. Patch

A patch is a file that contains code differences between two sets of files.
By using patches, the development cycle becomes easy. Instead of replacing an entire file that may contain many lines of code, a patch will only change those lines in the file which have been updated.

How to create a patch?

Before you can create a patch, you must have a:

  • Valid/activated Drupal account
  • Basic knowledge of Git

For other details, follow the instructions on this link

2. Module or Theme

Create your project using Drupal Console and add your functionalities within the project folder.

After you complete working on a project, there are two ways in which you can contribute to Drupal.org.

  • Full Projects: Users can download and use these programs.
  • Sandbox Projects: Experimental pieces of codes which have not been vetted.

Conclusion

Companies using Drupal as free open source project should certainly give back to showcase their expertise and contribute to the culture of openness. It also makes business sense because contributions can potentially open the doors to new business.

Power your digital presence with Drupal

Drupal powers the digital presence of a number of businesses. It’s time you leveraged its features and future initiatives of Drupal to make it more engaging and effective down the road. Get in touch with our experts who have helped many of our clients, including Fortune 500 companies, fulfill their web development needs.

Tags:

Related Articles

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