Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough

Mediacurrent: Supporting the Drupal Association in Uncertain Times

Apr 09 2020
Apr 09
Apr 08 2020
Apr 08

COVID-19 has fueled, among many things, a hefty appetite for data and analytics.

Having witnessed a rapid-fire evolution from a few, isolated cases in another corner of the world, to a pandemic that has the globe in its grips, data visualizations are now helping to tell the story and reveal the kinds of big data insights that are now possible. 

Near the top of the list of data visualizations that are providing an updated perspective on the Coronavirus is the Johns Hopkins University interactive global map, which offers a global view of the pandemic, along with the ability to drill down for a closer look at the spread of the virus within specific countries and regions. 

Johns Hopkins University COVID-19 Map

A screen shot of the Johns Hopkins University Covid-19 MapThe above screen from the the Johns Hopkins University interactive COVID-19 map is from April 8, 2020, and is among the interactive graphics on the site that depicts the global spread of the pandemic.  

 

Tracking Movement Via Cell Phone Data 

An April 2, 2020 article in an online edition of the New York Times, offered another angle from which to view the response to the Coronavirus in the United States. Using mobile phone GPS data, a color-coded map of every county in the United States, depicted miles traveled for the week of March 23, as an indicator of the degree to which people were adhering to shelter-in-place recommendations or orders.
 

A screen shot from a New York Times online article of a county-by-county map of the U.S. and movement over a weekend based on cell phone data.GPS data provided insight on a county-by-county basis into the degree to which mobility and travel had been impacted by the recommendations to stay home. 

Modeling Steps to Curtail the Spread

This third example is from a March 14, 2020 article in an online edition of the Washington Post, designed to demonstrate the impact of various degrees of social distancing. The article entitled, “Why outbreaks like coronavirus spread exponentially, and how to ‘flatten the curve,’” included animations of dots that demonstrated the impact of various levels of human contact on the spread of a hypothetical virus.

Screen shot from a Washington Post article that shows 4 models of the spread of a disease resulting from varying levels of social distancing. The four interactive graphics above represent the outcome of the different degrees of response designed to mitigate against a rapid spike in the spread of the virus.

Untapped Potential

While big data is fueling insights, that would have been difficult to fathom as recently as a decade ago, a depth and breadth of analytics and actionable data are within closer reach than many realize.  

Potentially rich data sources that too often go underutilized include:

  • Google analytics,
  • A/B testing,
  • Sales tracking, 
  • Live chat,
  • Customer surveys,
  • Heat mapping of visitors’ website activity,  
  • Competitor assessments,
  • Usability testing, and
  • User interviews. 

At Promet Source, we are passionate about helping clients to uncover and unlock the full potential of their data and analytics. We are also experts at creative visualization strategies that help clients and constituents to clarify complexities and understand information from new angles. 

Interested in igniting new data- and analytics-driven possibilities? Contact us today.

Apr 08 2020
Apr 08

The team of editors who populate content on Newspaper, Inc. has asked the development team to add another image field on the articles they write, one that caters to Pinterest sharing. The project manager writes up the ticket, and the development team gets to work. They add the field to the Article content type. They demo it later that week, and everyone seems happy.

Then some complaints start coming in. A few of the editors can't find the field on the articles they are writing. The development team checks to make sure the field is still there and that everyone has the right permissions, but everything checks out. They ask for a demo of the problem.

One editor attempts to create content of the type, News Item. The field, of course, is not there. "That's not an article," the development team explains. 

"What? Of course, this is an article!" says the editor, a little frustrated. The development team can't detect the lack of an uppercase letter in the word "article." So, they go on to pedantically explain what Drupal content types are, what a real Article is in terms of development, and all the while, the editor just gets more and more frustrated. This organization could benefit from a shared, ubiquitous language.

What is a ubiquitous language?

The term "ubiquitous language" comes from the world of Domain-Driven Design (DDD), specifically from the book by Eric Evans. Still, you don't have to fully commit to DDD to benefit from some of its recommendations.

A ubiquitous language is a vocabulary shared by everyone involved in a project, from domain experts to stakeholders, to project managers, to developers. This language should be used in all documentation, tickets, conversations, meeting invites, post-it notes on your computer, chalkboards that only appear in your dreams — everywhere. The goal is to reduce the ambiguity of communication.

Ideally, each term that surfaces corresponds to something concrete in the code. When people talk about an event, there is a content type named Event in your Drupal installation, for example. 

But don't stop at just content types. The name of a View should also reflect how people actually talk about it. Or a block. If your marketing team consistently calls the email capture block a "lead generation form," think twice before naming it "newsletter sign up" in your code. Your module names should also reflect the vocabulary used by the organization and not just the whims of the development team.

Driven by stakeholders or domain experts

The development of a ubiquitous language is an ongoing conversation, but the terms used should be driven by stakeholders and domain experts, and not developers. If your editors think of everything they post on the website as an Article, then there should probably just be a single content type named Article. Taxonomy fields can handle permutations to handle the different contexts, the terms themselves controlled by a subset of the ubiquitous language, such a News Item, Press Release, or Announcement. (Or, leverage some of the techniques listed below to unify the concept in code). But this depends on the organization.

In some places, editors and teams might be used to referring to different types of content by different names, even though they might be similar. In that case, it might make sense to have different content types for News Item and announcement. It might not make the most sense from a technical perspective, but if it eases communication and reduces ambiguity, it makes sense.

When you have a true ubiquitous language, stakeholders and end-users can talk about things in the code with developers, and with some confidence. Conversations can delve deeper. Problems, needs, and solutions will surface with greater clarity.

Benefits of having a ubiquitous language

First, clearer communication. Less ambiguity. It makes it less likely to have misunderstanding and mismatched expectations.

Second, a useful shorthand can develop. Once the ubiquitous language becomes more ingrained, and good habits are established, an enormous amount of information and context is communicated when someone uses the word "article."

Third, people involved become more aware of potential issues when they come up, creating a beneficial feedback loop. Developers can push back against terms that are ambiguous or inconsistent. Stakeholders have an extra leg to stand on to insist that developers use terms that they can understand or ask questions about words that seem too awkward to use in everyday conversation. This leads to more back and forth communication that strengthens the shared language and makes it more relevant for everyone. 

Naming things is one of the hardest problems in programming. It lets developers offload some of that cognitive effort.

If your editors are continually using the word Lede to refer to the initial summary of an article that appears in lists of articles, it surfaces an opportunity to have a specific field for this concept. In turn, this leads to greater clarity in code and is an opportunity to make the whole system better and more robust. 

We didn't name things right. Or the names evolved. What now?

Things are rarely right the first time, and in today's development world, iteration is king. So what can you do if the code doesn't reflect the language you are using, and you're afraid the concrete has been drying for too long?

  1. Change the label. While machine names in Drupal can be harder to change, labels are easy. This isn't ideal, because machine names can be used throughout custom code, but at least there will be something concrete on the website, and in the code, that conforms to the ubiquitous language. 
  2. Use Decorator functions and classes. If you have several content types that should map to a single concept in your ubiquitous language, like in the example that opened up the Article, consider using a wrapper class. A wrapper class called Article can encapsulate various content types and add additional functions for specific business logic. It is this wrapper class that is used throughout your code and what maps to the vocabulary used in the ubiquitous language.
  3. A mapping document in your documentation that everyone understands. This helps translate concepts from the ubiquitous language to the code. In practice, this could become just another document that seldom gets updated (the threat hanging over all documentation), and so should be used as a last resort. But it could be helpful in certain situations. Always try to map directly to the code, if possible.
  4. Migration. In some cases, migrating several content types into a single type, so your Drupal installation better matches the ubiquitous language might be worth the time and effort. If you are preparing to make a big development push and need better foundations, or you're migrating from another CMS or to a newer Drupal version, the opportunity might present itself.

Conclusion

A ubiquitous language used everywhere throughout your organization, with discipline and intention, has the power to help make your communication easier and your code more maintainable. By mapping the shared language directly to concepts in the code, and in this specific case, Drupal content types, requirements can be made more explicit, and discussions between stakeholders and developers can be more profitable.

Beyond Domain-Driven Design by Eric Evans, referenced above, you can also checkout Domain-Driven Design Distilled by Vaughn Vernon, which is exactly what its title suggests. It contains a good summary of ubiquitous languages.

Contribution Drupal 8 module: Google reCAPTCHA V3

Apr 07 2020
Apr 07
Apr 07 2020
Apr 07

Last year we started a discussion about contributing to Drupal. In a blog article called Contributing to Open Source, what's your math? we layed out out how much and how we contribute. The goal was to bring the importance of contribution to attention, because Drupal heavily depends on it.

Dries and many companies participated in the discussion with own blogposts:

As a result a lot of companies focused more on contribution, then on other activities in last year's European DrupalCon in Amsterdam. 

We were one of those companies and sponsored the contribution area and invited everybody to contribute with us. For every person who participated we committed to contributing time work on the Drupal project. You can read about this here.

Almost our full team attended DrupalCon Amsterdam and besides attending sessions we spent a lot of time in the contribution room.

Majid and Yannick contributing at DrupalCon Amsterdam 2019

One of our developers Majid Ali who had not contributed much source code before, selected to port the Drupal module reCAPTCHA v3 to Drupal 8.

We have spent a significant amount of time on development and testing, two weeks ago the module is feature complete, covered by the Drupal Security Team, and we have started adding it to all our projects.

The benefit of the new version of reCAPTCHA over previous versions is that an interaction window (I am not a robot) only appears, if the observed interaction with the website containing the test, does not fullfill a configurable security score. Only if the score is too low, different tests (e.g. reCAPTCHA v2) are shown.

The module creates several tests, defines required scores for each, and add fallback tests if the scores are too low. As fallback tests reCaptcha and captcha can be used.

Since we have integrated the Drupal module reCAPTCHA v3 in our internal Drupal distribution 1xDx it will be installed in all future projects and we will continue to support it.

Apr 07 2020
Apr 07

At Third & Grove, we believe that Drupal is the best technology for most projects (here are 15 things Drupal can do to beat or achieve parity with AEM), but there are three use cases where AEM is likely a better fit:

  1. Institutional investment in the Java programming language. If your organization has decided that Java is the only programming language you’ll use, then AEM is likely a better fit for you. Standardizing the programming language has many drawbacks, but just as many benefits. By focusing on one language, you have an elastic resource pool within your organization that will allow you to move engineers between projects as needed, a single hiring pipeline of Java talent to draw from, and, likely, Java contractors who are ready to be mercenaries no matter the theater of war.

  2. Campaign management. While Drupal can be used successfully in any campaign effort, AEM has superior support for robust, large-scale, complex campaigns. If your organization operates campaigns at high levels of complexity, AEM is likely a better choice than Drupal.

  3. Integration with other Adobe tools. If your organization has already invested in other Adobe technologies, you may find institutional approval for deploying AEM is easier than Drupal, despite Drupal’s established compatibility with Adobe’s toolset. As an example, Adobe has a great stock photo management tool that is part of their Creative Cloud. Not only does Adobe Stock integrate well with Creative Cloud, but as an Adobe product, it also integrates seamlessly with Adobe Experience Manager, a completely different product set than Creative Cloud.

Conversely, if time to market, cost, the value of open source, and security are priority concerns at your organization, Drupal is likely to be more successful than AEM.

Drupal’s robust open source ecosystem of free system extensions and generally less-complex technical footprint result in lower levels of effort, which decreases cost, improves time to market, and reduces overall risk. A combination of more people, with fewer conflicts of interest, working to improve the core Drupal software in a culture of security prioritization generally means Drupal is the more secure, better-supported platform.

Budget and ROI

The primary total cost of implementation between AEM and Drupal is largely impacted by three factors:

  1. Licensing fees

  2. General platform technical complexity

  3. The extension ecosystem

A typical enterprise Acquia Drupal project would usually have an implementation budget of $250,000-$350,000, while an AEM budget would start north of $500,000 (and that isn’t including the licensing fee you need to pay Adobe). When you add hosting, the first year total spend for an organization to redesign, build, and host an enterprise Acquia Drupal site is likely around $500,000 while in AEM you are looking at $750,000-$1 million.

AEM often describes Drupal’s open source status as free like a puppy—meaning Drupal is free, but it takes a terrific amount of work to build into a compelling digital platform. This is partly true, in that Drupal is more a content management framework (as opposed to a content management system), and can thus be adapted to address many use cases. But so is AEM.

Savings for picking Drupal over AEM come not just from a lack of licensing fees but also from Drupal’s open source community, which has promoted a far more extensive network of free extensions that add functionality to Drupal. AEM’s extension ecosystem is far smaller, and thus less impactful when it comes to accelerating website build efforts.

While AEM and Drupal have robust internal technical architectures that can scale to meet the digital demands of most organizations, the general consensus is that the “technical weight” of AEM is heavier, and thus builds are slower. At Third & Grove, we have seen this first-hand when working with a publicly-traded client with billions in revenue. We created a stir by migrating one of this company’s brand sites to Drupal in less than two months. The internal mandate from the global CTO was to use AEM, but the AEM team needed nine months for the migration we achieved in just six weeks.

Return on investment (ROI) is a different matter. Drupal’s generally smaller implementation budgets mean more value has to be derived from a comparable AEM site to achieve the same ROI. Out of the gate, Drupal has an unfair advantage. Still, the reality of digital technology investment is that when you are choosing between the two or three top platforms in any problem space (in this case, the digital experience space) the value you derive has little to do with the platform you choose and everything to do with how effective it is in helping achieve institutional goals. The reality of IT—that it is simultaneously as critical to the business’s success as it is irrelevant to the business strategy—is just as true for digital investments.

What Your Team Will Think

Your team’s opinion will depend largely on which platform you choose and, often most critically, their past experiences with the platform. One would hope that your team would embrace the platform that best serves the myriad needs of your organization, the overall strategy, IT goals, and marketing goals. However, the reality is that your team’s acceptance of the editorial experience of both platforms by is going to be driven mostly by factors unrelated to the platforms themselves. Instead, it’s more driven by past experiences, job frustrations, and a culture of blame (should one exist).

We’ve worked with many enterprise teams that leverage Acquia Drupal. Here’s what we’ve noticed from working with them:

  • Engineering. Your engineering team may complain about having to write PHP, which they may view as an inferior programming language. (See our article on misconceptions on Drupal for more information on why this assessment is based on years-old information.) If your engineering team already embraces open source solutions, they will be excited by all the open source components that make Drupal great. Moreover, an engineering team with a culture of learning will thrive in the developer-centric ecosystem that uniquely defines Drupal in the CMS space.

  • Marketing. Your marketing team might be anxious about the page-building experience. Older versions of Drupal offered an inferior page-building experience to AEM, which may be the source of this platform anxiety. We have watched many marketers become excited to use a platform with high developer velocity, because that, in turn, allows them to become agile marketers.

And here’s what you might expect if you adopt AEM:

  • Engineering. Your engineering team will probably be excited to use Java, an enterprise-grade programming language with a reputation for scale and stability that is used widely among large companies. But there are drawbacks that will hurt any engineer. The AEM platform requires technical debt to achieve scale and develop integrations. Not least, there is no AEM equivalent of Drupal’s open-source modules, which can elevate a digital experience—or at least remove the pain of resolving problems that have already been solved.

  • Marketing. If we had to guess, your marketing team would likely be impressed by AEM’s slick page-building experience and seamless integration with Adobe tools like Analytics. Even though they will have better resources they might be concerned about the reduced developer velocity in adding new features and making site changes. Agile marketing is the goal of every cutting-edge marketing team, and often a point of frustration as teams try to grow.

Organizations can reduce resistance by working to align the true needs of individual marketing team members to the goals of the marketing organization and the business overall. Both AEM and Drupal can be implemented to make your team feel like they are being set up for success—or failure; the deciding factor is effort.

Evaluation Chart for AEM vs. Drupal

To us, there are four main considerations in choosing AEM vs. Drupal: cost, time to market, cloud platform, and campaign management. We’ve outlined all considerations that we go through with our clients, which help identify an objective decision.

Consideration

Adobe Experience Manager

Acquia Drupal

Cost

-1

AEM requires a licensing fee and often higher implementation budgets than Drupal

+1

Drupal is free to use and implementation budgets are generally lower

Time to market

-1

+1

Since implementation budgets are generally lower than AEM, time to market is generally faster

Fully managed outsourced cloud platform

+/- 0

Adobe now has a cloud platform for AEM, but the platform is just over a year old

+1

Acquia is the enterprise cloud platform for Drupal and is more than ten years old, so their platform is mature, battle-tested, and feature rich

Campaign management

+1

AEM leads for complex, robust campaign management needs

+/- 0

Drupal can power complex customer journeys, but support is not as seamless as it is for AEM. Acquia’s new Journey software is likely to improve support dramatically

Institutional investment in Java resources and the desire to stay within Java

+1

+/- 0

Institutional investment in PHP resources and the desire to stay within PHP

+/- 0

+1

Open source solutions are valued for their scalability, security, transparency, and community value

+/- 0

AEM is closed source and only Adobe employees can enhance the software

+1

Drupal is open source, and benefits from thousands of developers in the community making the product better every day

Large, complex site with many integrations

+1

AEM runs large, complex sites for major organizations like Delta.com and Salesforce.com

+1

Drupal runs large, complex sites for major organizations like Wendy's.com, Weather.com, and FEMA

Integration with Adobe products like Creative Cloud, Adobe Analytics, Test & Target

+1

AEM integrates well with its own marketing cloud products

-1

Acquia Drupal can integrate with many of the Adobe tools, but nothing beats native integration

Asset management

+1

AEM has slick support for asset management

+/- 0

Acquia Drupal has strong support for asset management, but AEM tends to be better executed out-of-the-box

Running multiple websites, large and small

+1

AEM has strong support for running multiple websites

+1

Acquia Drupal, especially using Acquia Site Factory, has strong support for running multiple websites

Custom reporting capabilities

+1

AEM has many good reports available out-of-the-box

+1

Acquia Drupal provides the powerful Views module (built into Drupal core) that allows non-technical users to use an intuitive GUI to make powerful custom reports for all kinds of data in the system

At the end of the day, it’s not about the best platform—it’s about the right tool for the job. Just make sure that the tool you pick will still be relevant for years to come, otherwise, you’re going to be kicking yourself down the road.

#DrupalCares - Sustaining the DA through the COVID-19 crisis

Apr 06 2020
Apr 06
Apr 06 2020
Apr 06

Today we officially launch the #DrupalCares campaign on Drupal.org to organize the fundraising effort across our Drupal Community.

Our goal is to raise $500,000 to secure the future of the Drupal Association.

As the leadership team over here at the Drupal Association, we've decided to rotate the opportunity to provide these regular updates to our community. As the longest serving member of the leadership team at the Drupal Association, I wanted to take on this update in particular.

How did we get here?

As we've written in our previous updates, the COVID-19 crisis is having wide-reaching impacts all over the world, in our personal lives, and also here at home for the Drupal community. I have a very dear friend in Seattle who was exposed to COVID-19 very early on, and she, her wife, and their young daughter all contracted the disease. Thankfully they are all recovering. But I've heard stories from many of you who are also experiencing the pain of this crisis, both in your personal and professional spaces.

As an association - we're facing a significant financial shortfall of at least $500,000 because it simply would not be safe to host DrupalCon as planned in May.

To be abjectly and painfully honest, this is not where I want to be. As an individual, I don't want to be in fear for my family. As a member of the DA staff, it wounds me deeply to see all of our hard work at risk, only a few short years after recovering from a financial retrenchment. And as a member of our community, I worry about the impact this will have on all of the wonderful people who make this project what it is.

And yet here we are. And despite the gravity of our situation, what stands out to me the most is not the fear of this crisis.

What stands out to me is the hope. You as a community stepped up to support us in a variety of ways, even before we created this #DrupalCares campaign.

You have once again reminded me that we're stronger together.

Why is this important?

Many of you reading this already understand the value of the Drupal Association, so bear with me for a moment. Understand that this message is mostly for those who haven't yet engaged deeply; those who use Drupal as a tool but have yet to come to know Drupal as a community.

Drupal is used to build the best, most ambitious digital experiences on the web. And even now, Drupal is being used in the fight against COVID-19 by organizations like the NIH, the CDC NPIN, Unicef, and many, many more.

The Drupal Association is responsible for three key program areas which accelerate the Drupal project: 

  • Drupal.org - which not only hosts the code and collaboration tools for our community, but is also a key service for Drupal, providing updates, security advisories, localization and more. 

  • DrupalCon - which brings the community together, onboards new users and contributors (with an average of 30+% new attendees each year!) and provides both business and professional development opportunities to keep the ecosystem thriving.

  • The Drupal Community - which we foster with grants and scholarships, open-source promotional materials, and diversity, equity, and inclusion programs, all of which serve to grow the Drupal contributor-base and make the project stronger. 

Without the Drupal Association and these programs Drupal itself would survive, of that I am certain, but it would not thrive.

How can you help?

DrupalCon Sponsors…

… can commit to pledging your full sponsorship to the Association, regardless of what shape DrupalCon takes this year.

Drupal Businesses…

… Can join the supporting partner program, or increase your partner level. Organizations can also make tax deductible donations above and beyond their partnership tier.

Individuals…

… Can join or renew the Drupal Association membership program, or make tax deductible individual donations.

Everyone…

… can help us get the word out! The Drupal Association has deep, deep roots within the community, and tight relationships with those of you who build your livelihoods on Drupal. Unfortunately, there are 10 times as many end-users of Drupal out there who may not even know that the Association exists. Would you leverage your networks to help us reach them?

Snapshot of Supporters

The list of organizational and individual contributors below is a snapshot from April 6, 2020. You can find the latest progress of the campaign as well as our up to the minute list of supporting organizations and individuals on the campaign landing page

View the Campaign

Thank you for your support

#DrupalCaresThis is why we're launching the #DrupalCares campaign, to mobilize and empower the Drupal community to help sustain the work of our beloved non-profit association.

There are so many who have reached out to us in recent weeks. We want to thank all of the organizations and individuals who went above and beyond “business-as-usual” to provide critical additional support in this time. Each of these organizations and individuals is being recognized with the #DrupalCares badge. As of today, we are at 4% of our fundraising goal.  Will you join the growing list of supporters?

The following list of organizational and individual supporters is just a snapshot as of time of writing. For the latest list, please check our campaign landing page.

Thank you to organizational partners

In order of pledge size

Pantheon

Phase2 logo

Mediacurrent

Tag1 Consulting

FFW Black Logo

amazee.io

Palantir.net

Contegix

four-kitchens-logo

Last Call Media logo

Centarro, formerly Commerce Guys, creators of Drupal Commerce.

The Digital Experience Company

GatsbyJS Logo

Chromatic logo

Third and Grove logo

logo for digital echidna

Lemberg Solutions Limited Logo

PreviousNext

Evolving Web Logo

Acro Media, Drupal Commerce Experts

Electric Citizen logo, with a lightning bolt icon

Karhu Helsinki Inc – A Drupal agency in Finland

Open Social logo Drupal.org

Redfin Solutions, LLC

Zivtech Logo

Code Enigma

Brooks Digital

Thank you to our individual donors

We’ve raised $17,345.00 and €2,400.00 from 76 donors

Manning Peterson (manningpete)’s picture $250.00 from Manning Peterson (manningpete)

Jacob Rockowitz (jrockowitz)’s picture $4,000.00 from Jacob Rockowitz (jrockowitz)

Aaron Manire (amanire)’s picture $50.00 from Aaron Manire (amanire)

extrem94’s picture $100.00 from extrem94

Rajab Natshah (RajabNatshah)’s picture $50.00 from Rajab Natshah (RajabNatshah)

David Rodríguez Vicente  (davidjguru)’s picture €30.00 from David Rodríguez Vicente (davidjguru)

Duran Goodyear (alphex)’s picture $500.00 from Duran Goodyear (alphex)

AmyJune Hineline (volkswagenchick)’s picture $100.00 from AmyJune Hineline (volkswagenchick)

Erwin van den Berg (ecvandenberg)’s picture €200.00 from Erwin van den Berg (ecvandenberg)

Saul Willers (fenstrat)’s picture $100.00 from Saul Willers (fenstrat)

Chris O'Donnell (chrisodva)’s picture $40.00 from Chris O'Donnell (chrisodva)

Ho Ling Poon (holingpoon)’s picture $100.00 from Ho Ling Poon (holingpoon)

Saurabh Singh (Saurabh_sgh)’s picture $10.00 from Saurabh Singh (Saurabh_sgh)

Preethi  (prethiee)’s picture $20.00 from Preethi (prethiee)

Hikaru Maruyama’s picture $50.00 from Hikaru Maruyama

Aaron  (AaronMcHale)’s picture €100.00 from Aaron (AaronMcHale)

Adam Bergstein (nerdstein)’s picture $100.00 from Adam Bergstein (nerdstein)

Kazu Hodota (hodota)’s picture $25.00 from Kazu Hodota (hodota)

Jeremy Andrews (Jeremy)’s picture $500.00 from Jeremy Andrews (Jeremy)

Stella Power (stella)’s picture €250.00 from Stella Power (stella)

Yuriy Gerasimov (ygerasimov)’s picture $500.00 from Yuriy Gerasimov (ygerasimov)

Aaron Ellison (aellison)’s picture $100.00 from Aaron Ellison (aellison)

Jose Mario Moreira de Oliveira (jmoreira)’s picture $100.00 from Jose Mario Moreira de Oliveira (jmoreira)

John Taylor (johndtaylor)’s picture $100.00 from John Taylor (johndtaylor)

David Overturf (mtdaveo)’s picture $100.00 from David Overturf (mtdaveo)

Tobias Bähr (tobiasb)’s picture €25.00 from Tobias Bähr (tobiasb)

Adam Hermsdorfer (AdamHermsdorfer)’s picture $500.00 from Adam Hermsdorfer (AdamHermsdorfer)

Keith Bremner (kmbremner)’s picture €50.00 from Keith Bremner (kmbremner)

Florent Torregrosa (Grimreaper)’s picture €50.00 from Florent Torregrosa (Grimreaper)

Philipp "Phil" Schrenk (dercheffe)’s picture €25.00 from Philipp "Phil" Schrenk (dercheffe)

Alex Moreno-Lopez (alexmoreno)’s picture €150.00 from Alex Moreno-Lopez (alexmoreno)

Vesna G (vesnag)’s picture €100.00 from Vesna G (vesnag)

Jim Smith (JimSmith)’s picture $25.00 from Jim Smith (JimSmith)

Daniel Cothran (andileco)’s picture $100.00 from Daniel Cothran (andileco)

Only local images are allowed. $250.00 from Michael Lutz (mikelutz)

Oliver Davies (opdavies)’s picture $100.00 from Oliver Davies (opdavies)

beejeebus  (beejeebus)’s picture $200.00 from beejeebus (beejeebus)

Only local images are allowed. €900.00 from Gábor Hojtsy

Kristen Pol’s picture $250.00 from Kristen Pol

Chris Weber (cosmicdreams)’s picture $250.00 from Chris Weber (cosmicdreams)

Michael Anello (ultimike)’s picture $300.00 from Michael Anello (ultimike)

Ted Bowman (tedbow)’s picture $200.00 from Ted Bowman (tedbow)

Alex Pott (alexpott)’s picture $100.00 from Alex Pott (alexpott)

Dragos Dumitrescu (dragos-dumi)’s picture €80.00 from Dragos Dumitrescu (dragos-dumi)

Suzanne Dergacheva (pixelite)’s picture $5,000.00 from Suzanne Dergacheva (pixelite)

David Stinemetze (WidgetsBurritos)’s picture $100.00 from David Stinemetze (WidgetsBurritos)

Andrea Racco (Ralkeon)’s picture €20.00 from Andrea Racco (Ralkeon)

Tara King (sparklingrobots)’s picture $50.00 from Tara King (sparklingrobots)

George Matthes (watsonerror)’s picture $1,000.00 from George Matthes (watsonerror)

ct2641’s picture $50.00 from ct2641

Chris O'Donnell (chrisodva)’s picture $50.00 from Chris O'Donnell (chrisodva)

Mike Herchel (mherchel)’s picture $200.00 from Mike Herchel (mherchel)

Jeremy Caldwell (eternalistic)’s picture $100.00 from Jeremy Caldwell (eternalistic)

Jeff Geerling (geerlingguy)’s picture $500.00 from Jeff Geerling (geerlingguy)

Andy Olson (andrewozone)’s picture $50.00 from Andy Olson (andrewozone)

Alessandro Maestri (umpire274)’s picture €25.00 from Alessandro Maestri (umpire274)

Nick Gernert (nickgernert)’s picture $50.00 from Nick Gernert (nickgernert)

Adam Bergstein (nerdstein)’s picture $250.00 from Adam Bergstein (nerdstein)

John Ouellet (labboy0276)’s picture $25.00 from John Ouellet (labboy0276)

Aljoša Furlanič (joco_sp)’s picture €20.00 from Aljoša Furlanič (joco_sp)

Petr Illek’s picture €150.00 from Petr Illek

J  (Jaynike)’s picture €20.00 from J (Jaynike)

Ryan Miller (millerrs)’s picture $25.00 from Ryan Miller (millerrs)

Jaideep Singh Kandari (JayKandari)’s picture $10.00 from Jaideep Singh Kandari (JayKandari)

Miro Michalicka (mirom)’s picture €50.00 from Miro Michalicka (mirom)

Donna Benjamin (kattekrab)’s picture $105.00 from Donna Benjamin (kattekrab)

John Taylor (johndtaylor)’s picture $100.00 from John Taylor (johndtaylor)

jabberwooki’s picture €10.00 from jabberwooki

Vijaya Chandran Mani (vijaycs85)’s picture €100.00 from Vijaya Chandran Mani (vijaycs85)

Jess  (xjm)’s picture $100.00 from Jess (xjm)

Scott Weston’s picture $50.00 from Scott Weston

Matt Glaman (mglaman)’s picture $250.00 from Matt Glaman (mglaman)

Adam Bergstein (nerdstein)’s picture $50.00 from Adam Bergstein (nerdstein)

1x2020 Digital Trends

Apr 06 2020
Apr 06

Headless applications with Drupal and React in 2020

Apr 06 2020
Apr 06
Apr 06 2020
Apr 06

Last year we launched more than 20 new webprojects based on Drupal 8 and/or React. Most of the projects have one thing in common: they combine standard Drupal server-side rendering with client side React applications. This is what is sometimes referred to as progressive decoupling. Only a few applications we have built in 2019 are completely headless.

The reason is that in most cases the optimal choice of technologies was

  • to use React, where the UI experience could not be achieved equally well with Drupal only,
  • and to use standard Drupal, where there was little benefit of using a decoupled solution.

For us the main advantage of using React is that we can build far more engaging user interfaces. The most obvious reason is that you do not have full page reloads, which gives end users a much better perceived performance. We like to call this UI snappyness or app feeling.

If you compare standard server side rendering using a CMS system with a headless application you can observe the following things:

  • Building a website with a CMS is relatively easy, because the technology is so mature (Drupal was first launched in the year 2000!), and most of the functionality you could ever want is already included.
  • Building a completely headless website is more complex, because you have to implement many things yourself, or assemble them from an extremely fast growing and changing ecosystem (checkout the NPM packages for React and the number of weekly installs!).

Therefore we believe the sweet spot of decoupling somewhere between going fully headless and using standard CMS technology. The following image illustrates this sweet-spot.

Building a website with CMS technology has limited complexity, but does not provide the best possible user interface (UI). Building a fully headless website (also referred to a single page application - SPA) provides the best UI experience but comes at high cost.

For us the sweet spot is using client side apps for some parts of the website, and to leave the rest to the server based application.

This approach provides almost the same UI experience, but at a much lower cost.

Please note, that we distinguish between user experience (UX) and user interface (UI) experience. The experience for a user can also be great with a server side application and become clunky with a client side application. But nonetheless you can build better user interfaces with client side applications.

Let's look at a couple of solutions we built last year:

We built a fully headless commerce solution with React that uses SAP Commerce Cloud (formerly known as SAP Hybris or hybris) as backend and integrates with Drupal for content management. In this project we chose to built the application fully headless, because the application driver is Commerce Cloud. Commerce Cloud does not come with a frontent that was meeting the requirements of the client. The content in this application is provided by Drupal. As soon as the project is out of private beta we will publish a case study about it.

Another exciting application from last year is the solution for Eldum Rétt built with Drupal Commerce. This project is a nice example of using both standard server-side rendering in combination with client side apps for parts of the website. Examples of such parts are the user interfaces for the shopping cart or for complex order customisations. As part of the project we also built a React Native app to bring recurring and interactive functionality to the users' Android and IOs devices. You can read the case study here. With this website we won the International Splash Awards for the best commerce solution with Drupal in 2019.

Another project that we are very proud of is Senec, that won the International Splash Awards 2019 in the category corporate websites. The project was chosen because of the optimal selection of technologies for the purpose of the website. Parts of the websites were built as React apps to create the best possible user experience. The most noticeable is a complex application process, that could not have been easily built with Drupal only. Here you can read the the case study about this project.

In other projects we have built decoupled searches with ReactiveSearch, integrated with third-party solutions using React, and replaced user facing Drupal views with client side React applications. A good example for this is Bodensee Schiffsbetriebe. On this page you find a number of React apps: the ticket search, the full page search, and the tour search. The tour search could have also been built with Drupal views, but since we had the other searches in place it was a small step to also replace views with React apps.

Building websites like this has worked out really well for us at 1xINTERNET, and we will continue using this approach in 2020.

If you need help with deciding which approach to use, or wants a second opinion, just reach out.

Apr 06 2020
Apr 06

Learn how to implement lazy loading images to improve the performance of your website.

Recently, I've been spending some time making performance improvements to my site. In my previous blog post on this topic, I described my progress optimizing the JavaScript and CSS usage on my site, and concluded that image optimization was the next step.

Last summer I published a blog post about my vacation in Acadia National Park. Included in that post are 13 photos with a combined size of about 4 MB.

When I benchmarked that post with https://webpagetest.org, it showed that it took 7.275 seconds (blue vertical line) to render the page.

The graph shows that the browser downloaded all 13 images to render the page. Why would a browser download all images if most of them are below the fold and not shown until a user starts scrolling? It makes very little sense.

As you can see from the graph, downloading all 13 images take a very long time (purple horizontal bars). No matter how much you optimize your CSS and JavaScript, this particular blog post would have remained slow until you optimize how images are loaded.

Webpagetest images february before

"Lazy loading" images is one solution to this problem. Lazy loading means that the images aren't loaded until the user scrolls and the images come into the browser's viewport.

You might have seen lazy loading in action on websites like Facebook, Pinterest or Medium. It usually goes like this:

  • You visit a page as you normally would, scrolling through the content.
  • Instead of the actual image, you see a blurry placeholder image.
  • Then, the placeholder image gets swapped out with the final image as quickly as possible.
An animated GIF of a user scrolling a webpage and a placeholder images being replaced by the final image

To support lazy loading images on my blog I do three things:

  1. Automatically generate lightweight yet useful placeholder images.
  2. Embed the placeholder images directly in the HTML to speed up performance.
  3. Replace the placeholder images with the real images when they become visible.

Generating lightweight placeholder images

To generate lightweight placeholder images, I implemented a technique used by Facebook: create a tiny image that is a downscaled version of the original image, strip out the image's metadata to optimize its size, and let the browser scale the image back up.

To create lightweight placeholder images, I resized the original images to be 5 pixels wide. Because I have about 10,000 images on my blog, my Drupal-based site automates this for me, but here is how you create one from the command line using ImageMagick's convert tool:

$ convert -resize 5x -strip original.jpg placeholder.jpg
  • -resize 5x resizes the image to be 5 pixels wide while maintaining its aspect ratio.
  • -strip removes all comments and redundant headers in the image. This helps make the image's file size as small as possible.

The resulting placeholder images are tiny — often shy of 400 bytes.

Large metal pots with wooden lids in which lobsters are boiledThe original image that we need to generate a placeholder for. An example placeholder image shows brown and black tonesThe generated placeholder, scaled up by a browser from a tiny image that is 5 pixels wide. The size of this placeholder image is only 395 bytes.

Here is another example to illustrate how the colors in the placeholders nicely match the original image:

A sunrise with beautiful reds and black silhouettesAn example placeholder image that shows red and black tones

Even though the placeholder image should only be shown for a fraction of a second, making them relevant is a nice touch as they suggest what is coming. It's also an important touch, as users are very impatient with load times on the web.

Embedding placeholder images directly in HTML

One not-so-well-known feature of the <img> element is that you can embed an image directly into the HTML document using the data URL scheme:

<img src="https://dri.es/optimizing-site-performance-by-lazy-loading-images/data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA8ADwAAD/2wB
  DAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAQECAQEB
  AgICAgICAgICAQICAgICAgICAgL/2wBDAQEBAQEBAQEBAQECAQEBAgICAgICA
  gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgL/wA
  ARCAADAAUDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAACf/EAB8QAAM
  AAQMFAAAAAAAAAAAAAAECAwcEBQYACAkTMf/EABUBAQEAAAAAAAAAAAAAAAAA
  AAIG/8QAJBEAAQIFAgcAAAAAAAAAAAAAAQURAAIDBDEGFBIVQUVRcYH/2gAMA
  wEAAhEDEQA/AAeyb5HO8o8lSLZd01Jz2nbKoK4yxDVvZqYl7uaV4CWdmZQSSS
  ST86FJBsafEJK15KD05ioNk4G6Yeg0V9bVCmZpXt08sB2hJ8DJ2Tn7H/2Q==" />

Data URLs are composed of four parts: the data: prefix, a media type indicating the type of data (image/jpg), an optional base64 token to indicate that the data is base64 encoded, and the base64 encoded image data itself.

data:[<media type>][;base64],<data>

To base64 encode an image from the command line, use:

$ base64 placeholder.jpg

To base64 encode an image in PHP, use:

$data =  base64_encode(file_get_contents('placeholder.jpg'));

What is the advantage of embedding a base64 encoded image using a data URL? It eliminates HTTP requests as the browser doesn't have to set up new HTTP connections to download the images. Fewer HTTP requests usually means faster page load times.

Replacing placeholder images with real images

Next, I used JavaScript's IntersectionObserver to replace the placeholder image with the actual image when it comes into the browser's viewport. I followed Jeremy Wagner's approach shared on Google Web Fundamentals Guide on lazy loading images — with some adjustments.

It starts with the following HTML markup:

<img class="lazy" src="https://dri.es/optimizing-site-performance-by-lazy-loading-images/placeholder.jpg" data-src="https://dri.es/optimizing-site-performance-by-lazy-loading-images/original.jpg" />

The three relevant pieces are:

  1. The class="lazy" attribute, which is what you'll select the element with in JavaScript.
  2. The src attribute, which references the placeholder image that will appear when the page first loads. Instead of linking to placeholder.jpg I embed the image data using the data URL technique explained above.
  3. The data-src attribute, which contains the URL to the original image that will replace the placeholder when it comes in focus.

Next, we use JavaScript's IntersectionObserver to replace the placeholder images with the actual images:

document.addEventListener('DOMContentLoaded', function() {
  var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));

  if ('IntersectionObserver' in window) {
    let lazyImageObserver = new IntersectionObserver(
      function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImageObserver.unobserve(lazyImage);
          }
        });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
  else {
    // For browsers that don't support IntersectionObserver yet,
    // load all the images now:
    lazyImages.forEach(function(lazyImage) {
      lazyImage.src = lazyImage.dataset.src;
    });
  }
});

This JavaScript code queries the DOM for all <img> elements with the lazy class. The IntersectionObserver is used to replace the placeholder image with the original image when the img.lazy elements enter the viewport. When IntersectionObserver is not supported, the images are replaced on the DOMContentLoaded event.

By default, the IntersectionObserver's callback is triggered the moment a single pixel of the image enters the browser's viewport. However, using the rootMargin property, you can trigger the image swap before the image enters the viewport. This reduces or eliminates the visual or perceived lag time when swapping a placeholder image for the actual image.

I implemented that on my site as follows:

const config = {
    // If the image gets within 250px of the browser's viewport, 
    // start the download:
    rootMargin: '250px 0px',
  };

let lazyImageObserver = new IntersectionObserver(..., config);

Lazy loading images drastically improves performance

After making these changes to my site, I did a new https://webpagetest.org benchmark run:

A diagram that shows page load times for dri.es before making performance improvements

You can clearly see that the page became a lot faster to render:

  • The document is complete after 0.35 seconds (blue vertical line) instead of the original 7.275 seconds.
  • No images are loaded before the document is complete, compared to 13 images being loaded before.
  • After the document is complete, one image (purple horizontal bar) is downloaded. This is triggered by the JavaScript code as the result of one image being above the fold.

Lazy loading images improves web page performance by reducing the number of HTTP requests, and consequently reduces the amount of data that needs to be downloaded to render the initial page.

Is base64 encoding images bad for SEO?

Faster sites have a SEO advantage as page speed is a ranking factor for search engines. But, lazy loading might also be bad for SEO, as search engines have to be able to discover the original images.

To find out, I headed to Google Search Console. Google Search Console has a "URL inspection" feature that allows you to look at a webpage through the eyes of Googlebot.

I tested it out with my Acadia National Park blog post. As you can see in the screenshot, the first photo in the blog post was not loaded. Googlebot doesn't seem to support data URLs for images.

A screenshot that shows Googlebot doesn't render placeholder images that are embedded using data URLs

Is IntersectionObserver bad for SEO?

The fact that Googlebot doesn't appear to support data URLs does not have to be a problem. The real question is whether Googlebot will scroll the page, execute the JavaScript, replace the placeholders with the actual images, and index those. If it does, it doesn't matter that Googlebot doesn't understand data URLs.

To find out, I decided to conduct an experiment. Yesterday, I published a blog post about Matt Mullenweg and me visiting a museum together. The images in that blog post are lazy loaded and can only be discovered by Google if its crawler executes the JavaScript and scrolls the page. If those images show up in Google's index, we know there is no SEO impact.

I'm not sure how long it takes for Google to make new posts and images available in its index, but I'll keep an eye out for it.

If the images don't show up in Google's index, lazy loading might impact your SEO. My solution would be to selectively disable lazy loading for the most important images only. (Note: even if Google finds the images, there is no guarantee that it will decide to index them — short blog posts and images are often excluded from Google's index.)

Conclusions

Lazy loading images improves web page performance by reducing the number of HTTP requests and data needed to render the initial page.

Ideally, over time, browsers will support lazy loading images natively, and some of the SEO challenges will no longer be an issue. Until then, consider adding support for lazy loading yourself. For my own site, it took about 40 lines of JavaScript code and 20 lines of additional PHP/Drupal code.

I hope that by sharing my experience, more people are encouraged to run their own sites and to optimize their sites' performance.

February 21, 2019

6 min read time

We are Makers!

Apr 06 2020
Apr 06

1xINTERNET wins two Splash Awards

Apr 06 2020
Apr 06

1xINTERNET with three nominations for the Splash Awards

Apr 06 2020
Apr 06

We encourage you to contribute with us

Apr 06 2020
Apr 06
Apr 06 2020
Apr 06

This is Part 3 of a three part series about choices you can make with the news of Drupal 9’s release. Part 1 is an overview. Part 2 is what to do if you choose to stay on Drupal 7. Part 3 is what to do it you choose to upgrade to Drupal 8. 

If you’re following along in our series about the release of Drupal 9, you understand that there are options for upgrading, each with its pros and cons. At Kanopi, we know it’s not a one size fits all decision. We want to provide you with as much information as possible to help you decide what’s right for your site.

To recap, we shared an overview of all the options in part one, and a deep dive for our clients who plan to stick with Drupal 7 in part two. Here in part three, we share a bit of wisdom for those who are considering moving to Drupal 8.

At Kanopi we support more than 100 Drupal 7 sites. Many of them are well optimized and built to last, which can make it difficult to pull the trigger on a rebuild.  

When we talk to our Drupal 7 clients about migrating to Drupal 8, we typically hear one of three things:

  1. We don’t have the budget.
  2. We don’t have the capacity.
  3. The site looks and works perfectly fine.

Below, I’ll dig a bit deeper into each of these objections.

Budget

An average website lasts 3-5 years. However, many stakeholders aren’t aware that they need to budget for a new site that often, so they are caught off guard when the time comes. There are a few ways to bridge this gap:

Build the business case. A business case compares the challenges of sticking with your current site with the new opportunity and ROI that could be gained by making a change.

To get started, we recommend a site audit and creative strategy session to help identify what’s not working and what might be needed to get back on target. You should also take a look at your organic search performance (SEO), accessibility, speed, and overall usability. All of these factors can reveal where your site may be missing the mark and help to justify an upgrade.

When building your case, make sure that you think through the total cost of ownership for your site so that you can reserve enough budget to get the work done right. For example, if you spent $25,000 on your website in 2013, then made incremental updates over the last five years at $10,000 per year, the cost of your site is $75,000. If you want to preserve all features in your rebuild, you should ask for at least $75,000. While you’re at it, it’s a good idea to ask for 25 percent more than the amount it would take to preserve existing features. The redesign process will inevitably generate new ideas and site improvements that will require additional budget to implement. In this example, we would recommend asking for $100,000 and justifying the cost with a breakdown that takes your total cost of ownership into account.

Here’s another example: if you built your Drupal 7 site in house and worked on it for 24 months using a resource who makes $75,000 per year, the site cost your organization $75,000. Knowing this can help you build a rationale that hiring an agency to build your Drupal 8 site at $75-100,000 within six months is a great deal since the work will have similar costs and take far less time to complete.

Demonstrating where and how a new website could show direct ROI can make all the difference when convincing stakeholders to approve the budget for an updated site.

Consider the costs of doing nothing. It’s also helpful to think bigger than the cost of an upgrade and consider the costs of not improving your website. Lost customers, damaged reputation and missed opportunities can be hard to quantify, but should be considered.

For example, if your website’s contact form currently gets completed an average of 10 times a month and 10 percent of those who complete the form convert to a sale, that means each deal is worth $10,000. What if, through a smart redesign and upgrade, you were able to increase form completions to 15 per month and add content and features that support the sales team, resulting in 20 percent sales conversions?

As you can see, there are many ways to frame your case to support budget requests. Use the approach that will work best to help your stakeholders understand the value of your website project and it’s potential to make a meaningful impact on your organization’s bottom line. Once they see the value, the budget will come much more easily.

Capacity

Today’s working world moves at lightning speed. Most of us end up doing far more than what’s included in our job descriptions, and those full plates can make a website rebuild feel impossible to tackle.

If your stakeholders are concerned about your team’s capacity to handle a rebuild, talk to them about approaching the work in smaller phases. Many of our clients tackle rebuilds one phase at a time, often signing on for smaller, more digestible bites that make up a larger endeavor. This can help make the process feel more approachable and easier for stakeholders to wrap their heads around. Try getting started with a bit of user research. Then tackle design. You can continue from there in small steps until the work is complete.  

Alternatively, this is where an agency like Kanopi Studios comes in. Rebuilding your site on Drupal 8 or WordPress is a lot of work, but an experienced agency can take much of that work off your plate by making the process as smooth and straightforward as possible and keeping the project’s momentum at full swing. That keeps your team concentrating on their day to day work while the rebuild happens simultaneously.

The site looks and works fine

The most common objection we hear from our clients is that their stakeholders don’t see a need to change or understand the point of doing things differently through a rebuild.  

Maybe you already have a beautiful website that is driving strong results. If so, that’s wonderful! However, as time goes on, you’ll find you need to mix things up a bit to keep up with the pace of change and stay competitive. Trends shift, customer behavior changes, and Google likes to keep us guessing with their algorithm updates. Change is constant in all things, and even more so online.

Most websites have room for improvement, even if they are doing well. To ensure your site stays current, keeping your CMS up to date should be part of your roadmap. If you’re planning to make any updates this year, consider upgrading to Drupal 8 as part of your solution.

Remember, the safety zone may feel warm and comforting, but it will never give you the insight and growth that exploring the unknown can provide. Who knows what wonderful things could be in your future?

Need help?

We can help you strategize and build your case for an upgrade to Drupal 8, 9, or even WordPress. When in doubt, get in touch! We can work out the best approach together.

Drupal Recording Initiative: #DrupalCampLDN, #MidCamp, #NERDSummit

Apr 03 2020
Apr 03
Apr 03 2020
Apr 03

The value that the community brings to the development of Drupal

Drupal is known for the community that it has amassed as an open source software. But what is the value that the community brings to the development of Drupal?

First off, drupal is an open source CMS. What that means is that everybody can download and mingle with it. Because of this, Drupal has gathered a community of supportive members. Soon, the community has started to actively contribute with code and ways to further developed and improve Drupal. Drupal has more than 42,000 modules that were developed by the community. On top of that, regular security issues are discovered and fixed by the members in their own free time. Also, users are taking their time to answer questions posted on forums by new members to guide them in the Drupal world. This has led Drupal to be known as one of the most active, helpful, dedicated and loyal communities in the world.

DrupalCon Nashville 2018 Copyright Amazee Labs

Photo's DrupalCon Nashville 2018 copyright Amazee Labs

We all come together at DrupalCon

So where do the members of the community spend their time when not sitting in front a of a screen coding?

Well, the biggest event of the year is the DrupalCon. Every year it takes place in another location. With two conventions scheduled for 2019, one in sleepless Seattle and the other in incredible Amsterdam, DrupalCon is sure to gather a big crowd this year. Activities which are scheduled include keynotes with inspiring figures from inside and outside the community, trainings, summits, birds of a feather meetings and diverse social events.

DrupalCon is a great opportunity to meet and connect with new people, while acquiring more knowledge about Drupal and the direction it's heading in. On top of that, there is a chance of engaging into conversation with highly skilled people with expert knowledge in their domain, which can guide you and give you tips and tricks on what to do. So, if you’re a Drupal enthusiast, be sure to grab a ticket, pack your luggage and join the biggest Drupal social event of the year.

DrupalCon Nashville 2018 Copyright Amazee Labs

Photo's Drupal Camp Vienna 2015 copyright Amazee Labs

Cosy get-togethers in Drupal Camps

Now that we talked about the biggest social event of the year, Drupalcon, we can take a look at what the Drupal community is doing for the rest of the year. The community also organises smaller events, throughout the year, for regional groups of people. These meetings are more frequent than the DrupalCons. The activities which are undertaken in those camps are usually talks held by speakers on different subjects of interest to the community. The camps also offer training talks for beginners. The main focus of these type of events is to find out more about Drupal, share your Drupal experience and also to meet the local Drupal community.

List upcoming Drupal camps:

Name of the Camp Date Location Nerd Summit 2019 16-17.03.2019 United States, Amherst MidCamp 2019 20-23.03.2019 United States, Chicago Frone End Accesibility Summit 08.04.2019 United States, Seattle DrupalCamp Spain 6-12.05.2019 Spain, Conil de la Frontera Drupaldelphia 10.05.2019 United States, Philadelphia Secure Open Source Day - Haarlem Edition 11.05.2019 Netherlands, Haarlem Stanford DrupalCamp 17-18.05.2019 United States, Stanford Frontend United 17-18.05.2019 Netherlands, Utrecht DrupalCamp Belarus 17-18.05.2019 Belarus, Minsk DrupalCamp Kyiv 25-26.05.2019 Ukraine, Kyiv Flyover Camp 31-02.06.2019 United States, Kansas City DrupalCamp Poland 31-02.06.2019 Poland, Wrocław Drupal Developer Days 10-14.06.2019 Romania, Cluj-Napoca Save the Date - Design 4 Drupal Boston 26-28.06.2019 United States, Cambridge DrupalCamp Asheville 2019 12-14.07.2019 United States, Asheville DrupalCamp Colorado 02-04.08.2019 United States, Denver Cornell DrupalCamp 26-27.09.2019 United States, Ithaca DrupalSouth Hobart 27-29.11.2019 Australia, Hobart

How are new Drupal users integrated?

Now that we know how the Drupal community likes to spend its time, we can have a look at how the newcomers are being integrated in the community. First, the newbies can attend training sessions which are held on multiple occasions over the course of the year, with different locations. So, if you’re getting an interest in Drupal but don’t know where to start, you can search for the nearest Drupal beginner onboarding camp to find more about Drupal and the Drupal community. On top of that, you can also rely on the Drupal community forums by posting questions there and letting a more experienced user answer your question.

DrupalCon Nashville 2018 Copyright Amazee Labs

Community spotlight photo collection, indidual images' rights belong to their respectful owners. Collage created by Sooperthemes and licensed under a Creative Commons Attribution 4.0 International license.

Drupal community spotlight

Drupals open source means that everybody can get involved, making the community vibrant and full of inspirational stories. The community has the spotlight section where there are numerous articles about different members of the community and their journey from being a beginner to a well respected member and contributor.

Ildephonse Bikino

Another inspiring story is that of Ildephonse Bikino. He discovered Drupal through his job. He had the opportunity to attend the DrupalCon from 2016 held in New Orleans via a scholarship provided by the Drupal Association. There, he saw the opportunities that the open source software can bring. This led him to host his first Drupal Global Training Day in Rwanda, where he was expecting a number of 50 atendees. However, to his surprise, this number quickly grew and he had a list of 388 participants. Not wanting to turn his back on the Drupal enthusiasts he rose to the challenge and transformed a one day training into eight sessions spread across multiple weekends. This way, he made sure that every Drupal enthusiast received a proprer training. His dedication to the cause is what makes him a trully inspiring person and gives us a reason to tell his story.

Kevin Thull

Another great spotlight is the one about Kevin Thull. He got involved into Drupal through freelancing and started really getting involved with the community by the time the book Using Drupal 6 came out. He is known for being the mastermind behind the recording of the different Drupal events. He started recording drupal camps back in 2013. At first, everybody questioned his decision, however, he stayed true to his belief, that it is important to record those events. To date, he is personally responsible for recording over 800 sessions and giving up countless of hours of his time to achieve this feat. He was awarded with the Aaron Winborn Award in 2018 for his contribution to the Drupal community.

Rachel Olivero

For example, we have the case of Rachel Olivero which has recently passed away. She first started getting involved with the community at the DrupalCon 2017 in her hometown of Baltimore, where she participated for the first time in a code sprint and also reported her first bug. She was engaging constantly with the community on social platforms. As a blind person, she led an accesibility breakthrough at DrupalCon Nashville. She was always sharing her knowledge and expertise regarding this topic. Her aim was to make life easier for the users with disabilities. She understood the importance of diversity and so she was also engaged with the Drupal Diversity and Inclusion Team. Although she was part of the community for a short period of time, she left her mark through her actions and her contributions.

Aaron Winborn and the award named after him

The Aaron Winborn Award, also known as the “Academy Award” of the Drupal Association is an honor given to the members of the Drupal community that show personal integrity, kindness and an above-and-beyond commitment to the community. It was named in the honor of Aaron Winborn, a big community contributor which passed away after losing a battle with Amyotrophic Lateral Sclerosis. A specific disease which causes the death of the neurons that are controlling voluntary muscles. In order to remember the contribution which Aaron Winbord has brought to the Drupal community, the award was named after him after his death in 2015. To date, the award was given to 4 people which had a big contribution to the community and namely Cathy Theys, Gábor Hojtsy, Nikki Stevens and Kevin Thull. Right now, the nominations for the next awarding are open, so be sure to nominate your favourite member of the Drupal community.

Conclusion

In conclusion, the community is of utmost importance to the development of Drupal. The community is what keeps the CMS alive, while also in a costant state of evolution. Drupal has made it possible for people of different cultural backgrounds to cooperate and stand united for the same cause.  This reflects well on the unofficial motto ,"Come for the code, stay for the community".

Interview with Tiffany Farriss, CEO of Palantir: The advantage of being digital native in times of crisis

Apr 03 2020
Apr 03
Apr 02 2020
Apr 02

Drupal 8 has allowed and fostered the use of new design patterns through both Drupal core itself and through some well-known contributed modules. Those patterns are generally oriented to dealing with Drupal the framework, as expected. But, what about your business logic?

Sticking to using just core APIs and concepts is enough to get past the coding standards stage in a codebase. Still, you can take it a bit further and have cleaner business logic that better reflects what's going on in your application. That should also help to avoid what is known as the Big Ball of Mud.

With that goal in mind, a few artifacts from Domain-Driven Design (DDD) were introduced to the Drupal projects. Those artifacts are Application Services and Request/Response Objects. 

Anatomy of an Application Service (AS)

For the sake of simplicity, application services are defined as the classes responsible for controlling the execution flow of our application. They coordinate entities, repositories, other services of your domain, and other infrastructure services.

Another, more intuitive way, is to say that an AS is essentially a use case of the application. If there's a piece of logic that takes some input that is not coming from your domain (e.g., a UUID), does some processing, and persists some data in the database, in one or more entities, that's a candidate to be an Application Service.

DISCLAIMER: Note that in DDD, there's the concept of Domain Services, which are similar to but not quite the same as AS. To keep this post simple and actionable as a single, small step to simplify a Drupal codebase, know that they exist, and are worth reading about as well.

For example, Drupal's BanIpManager class has the following methods:

  • isBanned
  • findAll
  • banIp
  • unbanIp
  • findById

If this were to modeled as custom logic instead of as framework logic, you'd end up creating two different Application Services:

  • BanIpService
  • UnbanIpService

And they both would probably use, via Dependency Injection, a BannedIpRepository. 

So how do you create an AS? Generally speaking, an AS is a normal class with only the constructor and one single public method. Other methods can be added for internal logic, but the public API will only be one method, like this:

class CreateNewClientWithSubgroups {
  
  public function __construct(Dep1Interface $dep1) {
    $this->dep1 = $dep1;
  }
  public function execute(CreateNewClientWithSubgroupsRequest $request): CreateNewClientWithSubgroupsResponse {
    // do necessary checks before attempting any db changes.
    // throw exceptions as needed.
    // Perform changes and return a response object.
    return new CreateNewClientWithSubgroupsResponse($data1, $data2, $data3);
  }

}

The constructor method doesn't need an explanation and is used to pass the dependencies of our service. The execute one gets a bit more interesting. Notice that it has only one argument, a CreateNewClientWithSubgroupsRequest object, and it returns a CreateNewClientWithSubgroupsResponse object. These will be covered shortly, but first, look at the benefits of this simple change:

  • For starters, we're way closer to the "S" (Single responsibility) of SOLID than if we had placed this service as a method in a larger class.
  • As a consequence, our service is likely to have fewer dependencies, making it simpler to test.
  • With the logic encapsulated, it's easier to understand what's going on during that specific operation that takes place in our domain.
  • From a structural point of view, and specifically for maintaining codebases over a long period, this makes the codebase more expressive: A developer can open a Orders/ApplicationServices/ directory and see at a glance all the different use cases that can happen in the system for orders.
  • It's easier to reuse logic from other clients. Imagine a feature that comes up out of an editorial requirement. In most Drupal projects, you'll see the logic for the operation, mixed into the Form class, as part of the submit handler. Next week, a CI job happens to need that feature too, so another developer has to create a Drush command for it. Chances are that code will be copied and pasted in the command file, instead of reused. But if the logic is modeled as an AS in first place, the same service, already in place and tested, can be called from the command because it's no longer coupled with the web UI (Form API).

Request and Response Objects

Back in the AS, as mentioned, there's only one public method called execute. One significant benefit of that is consistency. Every service or utility (or developer!) making use of AS knows it has the same entry point and is more aware of where to find details regarding what the AS is doing and how it's doing it. Such consistency is particularly useful to make the service work with a Command Bus.*

A more important part of the execute method signature is its arguments. Generally speaking, you want this method only to accept a request object, and return a response object. That object is essentially an immutable Data-Transfer Object (DTO), which by definition, is only used to pass data around. They're generally named after the service itself, with a Request or Response suffix for each one, respectively. A request object would look like this (doc-blocks omitted):

class CreateNewClientWithSubgroupsRequest
{

    private $clientName;
    private $groupName;

    public function __construct(string $clientName, string $groupName)
    {
        $this->clientName = $clientName;
        $this->groupName = $groupName;
    }

    public function getClientName(): string
    {
        return $this->clientName;
    }

    // Other getters...
}

Similarly, the response object would contain the data relevant to the service. Following the example, in this case, it could return the IDs of the subgroups created. Here are a few of the immediate benefits of this:

  • No more array madness. If you've been around long enough in the Drupal world, you might fancy this. If you need to expand your service to use a new parameter, update the DTO signature.
  • For complex scenarios where the request parameters are many or the instantiation changes depending on the context, you get encapsulated logic for those scenarios. With objects, you can resort to having multiple static factory methods on the class, and even declare the constructor as private to make sure developers using it look for the appropriate method. For even more complex cases, a factory class to instantiate request objects can be a good choice as well.

The most powerful property of using this approach comes not only with the clarity provided for purpose-specific artifacts but also with the impact it can have on the overall system. Since these DTOs are typed, they can be easily serialized and stored in a database. This makes for a consistent way to track requests for actions that need to happen within your application but are not required to run in the exact moment they're requested. The class MenuTreeParameters in Drupal 8 core, for example, makes for a good example of a DTO.

It's worth noting that, generally, it might not be a good idea to have static factory methods to instantiate your classes. However, in this scenario, that is perfectly fine because, as mentioned above, we're just dealing with a DTO, which is purely for storage, retrieval, serialization, and deserialization. In short, we'd be using a Named Constructor, not to be confused with service instantiation via static factory methods.

Closing and Trying Things Out

Two of the main tactical artifacts of DDD, Application Services and Request/Response objects, have been covered. With these tools, you can start to simplify the code of our Drupal projects, and shape them in a way that will not only bring about a more expressive codebase but also scalability and performance improvements, if you choose to go that way. 

Architecturally, modeling logic this way is one step forward to decouple it from the Drupal framework. While it might seem of little value if Drupal is the only framework you've worked with, it has a lot of potential benefits as you can eventually get parts of the application that could be placed better in a completely separate application that communicates with the main one via an API, message queues, etc. That allows you to experiment with new frameworks in low-risk areas of your business, or segregate certain logic into separate services that will be maintained by different teams without having to tear the whole thing apart or start from scratch.

If you're curious about how this would look like in your project, try it! Find some business logic that meets any of the following criteria (bonus points if it meets all four):

  • Is in the submit handler of a Form API class
  • Is in one of the ever-present Entity API hooks
  • Is left alone in a Drush command file
  • Is in a .module file, as a standalone function

After you find that piece of logic, create a separate Service class for it. Remember to make it with only one public method, which receives and returns a Request/Response object. That's it. You're done!

DDD consists of a broader range of concepts and artifacts, which can and should be combined following certain rules. Only a few of them are mentioned in this article, but hopefully, they have sparked some interest in you. If that's the case, you might enjoy some of the existing literature around this topic, with books like Domain-Driven Design in PHP (recommended if you're just starting), Domain-Driven Design DistilledDomain-Driven Design, or Implementing Domain-Driven Design

If you're unfamiliar with this pattern, a Command Bus is a way to separate infrastructure actions that are meant to happen alongside the changes the service is performing on the application but are not really part of the domain in which the service is interested. Such actions can be logging of certain events, shutdown processes, opening, and closing database transactions, etc.

Acknowledgments

Links

Apr 02 2020
Apr 02

Each year, there’s a plethora of various tech and business events all over the world, even if we disregard the numerous Drupal events. In fact, there are so many of these conferences dispersed throughout Europe, the Americas and the Asia Pacific region that you can never even dream of attending all of them (in some cases, you’d actually need some kind of time machine!). But how do you find the ones that you or your agency would really profit from attending?

At Agiledrop, we’ve been asking ourselves the same question. Even though some of the biggest tech conferences of 2019 have already taken place (e.g. January’s CES which took place in Las Vegas), this doesn’t mean that you or your agency have to miss out on great networking and business opportunities at such gatherings. With spring already begun, there’s a huge number of relevant events you can (and should!) check out. 

For this reason, we’ve done some research and have attempted to make a more narrow list of the absolutely-don’t-miss tech and business events from March until the end of 2019. This narrowing down is also the reason why we decided to exclude all the Drupal events - we believe the community is already pretty well informed on these, but perhaps not so much on non-Drupal ones.

We hope you’ll be able to make a more informed decision after reading our list. Best case scenario - you won’t have to convince your boss as vehemently after telling them about all the benefits of specific events and all the amazing speakers you would miss.

So, without further ado, here’s a list of events for agencies to attend in 2019 that stood out to our team the most. 

1. OutBound (April 23-26, Atlanta, Georgia, USA)

With over 1200 yearly attendees from all over the globe and a lineup of renowned professional speakers, OutBound is one of the hottest Sales conferences you can attend. 

Such a high number of prestigious speakers coupled with the huge focus on catering to the audience make OutBound the perfect event for sales executives or even entire sales teams to attend. 

Among this year’s speakers are Bob Burg, with the sales total for his books on sales, marketing and influence well exceeding 1.5 million copies; Meridith Elliott Powell, featured sales expert for the LinkedIn Learning Platform and award-winning author, keynote speaker and business strategist; Anthony Iannarino, another acclaimed international speaker and bestselling author; and many others.

For the full list of speakers and information on tickets and accommodation, see the event’s website

2. Gartner Marketing Symposium/Xpo 2019 (April 29-May 1, San Diego, California, USA)

Gartner’s Marketing Symposium/Xpo is an event dedicated mostly to marketers, particularly CMOs and other marketing leaders. You’ll get a chance to network and exchange ideas with over 1,500 like-minded attendees, as well as expand your professional experience. 

Marketing is a field where trends are constantly shifting and evolving, and one must remain vigilant and keep track of the latest technologies and practices. The 2019 symposium aims to help with exactly that; with the sessions covering a whole range of marketing topics, attendees will have a greater insight into the different trends and consequently will be better equipped to tackle change when it comes (and it will come!).

Perhaps the most appealing thing about Gartner’s event are the exhibitors. Next to major players such as Adobe and Salesforce you’ll also find the leading Drupal company, Acquia

Check out the event’s website for a full list of exhibitors, speakers, schedules for each day and pretty much anything else you might want to know about.  

3. The Next Web Conference (May 9-10, Amsterdam, The Netherlands)

TNW Conference is one of the leading events in Europe celebrating technological innovation. This year will mark the 15th consecutive edition of the conference; over the past 15 years, the event has grown from only about 200 to over 17,500 attendees for each day, making it one of the biggest European tech conferences.

The topics and sessions of TNW Conference are quite broad; anyone working in any kind of tech industry will surely find something for themselves. Topics range from marketing, business, digital product development, emerging technologies, women in tech, commerce, and many more. 

This year’s speakers include: Gordon Willoughby, CEO of WeTransfer; Gillian Tans, CEO of Booking; Chris Slowe, CTO of Reddit; … you know what? There are too many awesome ones to list them all - check them out for yourself here!  

4. Mirren Live New York (May 14-15, New York City, New York, USA)

Also dubbed the “agency growth conference”, Mirren Live New York is the perfect event for agencies to attend. It is a chance to meet representatives from numerous globally-recognized names and learn the latest agency trends. 

Their website claims that this year’s lineup is “killer” - and that’s a pretty appropriate description. Just quickly going through the list, we don’t even know where to start - we might as well just list them all. So, go ahead and see the whole list for yourself. 

In case you really do want to catch all the sessions, or prefer leveraging your presence there to make new business connections, it’s also possible to purchase access to the broadcast of most of the sessions. This is also ideal for anyone who won’t be able to make it but also won’t want to miss the speakers.

5. Adobe Summit EMEA (15-16 May, London, UK)

This is the EMEA version of the Adobe Summit, with the North American equivalent taking place this weekend. The focus of the event is on experience marketing - an area that’s becoming more and more relevant, with customers’ and users’ increasing demand for (unforgettable) experiences.

Still, it is an event that will inspire anyone working in marketing. You can personalize your weekend by choosing between more than 120 sessions by fascinating speakers, among whom are Senior Vice President at Magento and Adobe, Mark Lavelle; Digital Project Manager at Capgemini, Kelly Derickx; Vice President EMEA at Twitter, Bruce Daisley; and countless more. 

If you or your company use Adobe products, attending is almost a must, as you’ll get first-hand insights into Adobe’s latest technologies and practices in experience marketing. Here you can check the reasons for attending, with a bonus email template for more easily convincing your boss.  

6. AA-ISP Digital Sales World (different dates and locations)

AA-ISP (The American Association of Inside Sales Professionals) is a global association focusing on Inside Sales. Each year, they organize their one-day Digital Sales World event with four different dates and locations. This is great news for everyone wanting to attend - you have four options to pick from, which ensures that you won’t miss out.

The dates are the following:

  • May 14, London, UK
  • June 13, Dallas, Texas, USA
  • September 12, Norwood, Massachusetts, USA
  • December 3, Dublin, Ireland

It is a digital sales world conference where sales leaders and other industry experts come together for a day packed with learning, networking and getting to know new sales tools and technologies. 

A lot of the speakers are already known; judging from these lineups, it’ll be hard to decide on a single instance to attend. You can check out the main page of the event to get more information and make a more informed choice.

7. SaaStr Europa (June 12-13, Paris, France)

Even though SaaStr Annual in San Francisco already took place in February, you still have plenty of time to plan for and attend the European variant of the event. 2018 was the inaugural year for SaaStr Europa, and it returns to Paris in 2019 with double the content and almost double the number of attendees compared with last year.

SaaStr Europa is thus the perfect opportunity to learn from and network with a wide range of SaaS experts from all over the world. The impressive lineup of speakers includes Christina Bechhold Russ, Principal at Samsung NEXT; Jane Kim, VP of Revenue at CircleCI; the co-founder of Saastr, Jason Lemkin; and many others. 

For a full list of speakers, sponsors and more information on tickets, visit the event site itself.

8. MozCon (July 15-17, Seattle, Washington, USA)

MozCon is a conference organized by the SEO-centric company Moz. As a consequence, the event puts great emphasis on SEO; but, more broadly, it’s an event for any kind of marketer, exploring topics such as branding, user and customer experience, analytics, and content marketing.

The 2019 speakers list features a number of Moz employees, such as CEO Sarah Bird, and other industry experts, such as Head of PR & Content at Aira, Shannon McGuirk. You can check out the full list here.

So - you definitely won’t want to miss MozCon. No matter where in the digital sphere you’re positioned, SEO is a field you’ll always have to keep up-to-date with. Add to that the impressive lineup of speakers and the unique opportunity to connect with leading industry experts and agencies, and you know where you’ll be going this July.

9. INBOUND (September 3-6, Boston, Massachusetts, USA)

INBOUND is HubSpot’s annual conference for sales and marketing enthusiasts. It is an event that puts emphasis on human interaction, where attendees view each other as peers rather than competition, and consequently help each other learn and improve.

The speakers at INBOUND’s sessions are perhaps the highlight of the conference. While speakers for 2019 have not yet been announced, previous years’ speakers include names such as Michelle Obama, Deepak Chopra and Gary Vaynerchuk

Besides all the educational sessions, INBOUND also offers attendees non-business entertainment with performers such as Judd Apatow and Amy Schumer. The agenda for this year has yet to be announced; we’ll make sure to update this post with fresh information. Meanwhile, you can find out more about INBOUND here

10. Dreamforce (November 19-22, San Francisco, California, USA)

Dreamforce is the annual event of the American cloud-based software company Salesforce. Its roots going back as far as 2003, Dreamforce was one of the early B2B conferences - and a relatively small one, at that, with just over 1000 attendees. 

Fast forward a little more than 15 years and Dreamforce is one of the largest B2B events in the world, boasting almost 200,000 attendees and over 2,000 sessions in 2018. 

Even if you don’t use Salesforce or any other cloud products, with such an abundance of options, you’ll definitely find something for you. At the very least, you’ll have the one-of-a-kind opportunity to connect with some of the biggest names in the digital industry and forge new business relationships.

You’ve definitely heard of companies such as IBM, Deloitte Digital and Accenture. Well, these are just the tip of the iceberg of Dreamforce’s sponsors. Additionally, going through the list of last year’s speakers, you’ll stumble upon names such as Arianna Huffington, founder of the Huffington Post and Thrive GlobalOscar Munoz, CEO at United Airlines; and even Al Gore, former US vice president and known environmentalist. 

If you’re still not convinced, check out Dreamforce’s official site for any additional information. You can even calculate the ROI of attending to make a better case to your boss!

11. The Drum Awards

The Drum is Europe’s largest marketing platform, so their annual awards are definitely the place to meet the cream of leading industry professionals. It is a chance for outstanding businesses to get their deserved recognition, which also helps them attract new talented employees.

What’s really great about The Drum’s awards is that they showcase success in all areas of digital and marketing, enabling you to cherry-pick the ones you want to attend and/or the ones most relevant to your position and interest. 

You can view a full list of the awards here. So far, only the dates for the Marketing Awards ceremonies are known:

  • Europe: April 3, London, UK
  • USA: April 11, New York City, New York 

We’ll make sure to update the list as soon as the dates and locations are announced. Meanwhile, you can get a better feel of The Drum Awards by checking out the highlights from last year’s marketing award ceremony.  

Honorable mentions

Some of the don’t-miss events of 2019 have already taken place, such as the already mentioned CES. We also refrained from including events that are happening this weekend, as it would be pretty much impossible to book tickets and/or flights at this point. Nonetheless, we wanted to at least mention them, so you know which ones to be on the lookout for next year:

These were the non-Drupal-related events and conferences in 2019 that we found to be the most appealing. We hope this blog post sheds some light on which of these events you would benefit from attending so that you’ll be able to plan accordingly. We’ll update any lacking parts when more information is released. 

Apr 01 2020
Apr 01

Platform.sh, like any good PaaS, exposes a lot of useful information to applications via environment variables. The obvious parts, of course, are database credentials, but there's far more that we make available to allow an application to introspect its environment.

Sometimes those environment variables aren't as obvious to use as we'd like. Environment variables have their limits, such as only being able to store strings. For that reason, many of the most important environment variables are offered as JSON values, which are then base64-encoded so they fit nicely into environment variables. Those are not always the easiest to read.

That's why we're happy to announce all new, completely revamped client libraries for PHP, Python, and Node.js to make inspecting the environment as dead-simple as possible.

Installation

All of the libraries are available through their respective language package managers:

PHP:

composer install platformsh/config-reader

Python:

pip install platformshconfig

Node.js:

npm install platformsh-config --save

That's it, you're done.

Usage

All three libraries work the same way, but are flavored for their own language. All of them start by instantiating a "config" object. That object then offers methods to introspect the environment in intelligent ways.

For instance, it's easy to tell if a project is running on Platform.sh, in the build hook or not, or if it's in a Platform.sh Enterprise environment. In PHP:

$config = new \Platformsh\ConfigReader\Config();

$config->inValidPlatform(); // True if env vars are available at all.
$config->inBuild();
$config->inRuntime();
$config->onEnterprise();
$config->onProduction();

// Individual Platform.sh environment variables are available as their own properties, too.
$config->applicationName;
$config->port;
$config->project;
// ...

The onProduction() method already takes care of the differences between Platform.sh Professional and Platform.sh Enterprise and will return true in either case.

What about the common case of accessing relationships to get credentials for connecting to a database? Currently, that requires deserializing and introspecting the environment blob yourself. But with the new libraries, it's reduced to a single method call. In Python:

config = platformshconfig.Config()

creds = config.credentials('database')

This will return the access credentials to connect to the database relationship. Any relationship listed in .platform.app.yaml is valid there.

What if you need the credentials formatted a particular way for a third-party library? Fortunately, the new clients are extensible. They support "credential formatters", which are simply functions (or callables, or lambdas, or whatever the language of your choice calls them) that take a relationship definition and format it for a particular service library.

For example, one of the most popular Node.js libraries for connecting to Apache Solr, solr-node wants the name of a collection as its own string. The Platform.sh relationship provides a path, since there are other libraries that use a path to connect. Rather than reformat that string inline, the Node.js library includes a formatter specifically for solr-node:

const solr = require('solr-node');
const config = require("platformsh-config").config();

let client = new solr(config.formattedCredentials('solr-relationship-name', 'solr-node'));

Et voila. client is now a solr-node client and is ready to be used. It's entirely possible to register your own formatters, too, and third-party libraries can include them as well:

config.registerFormatter('my-client-library', (creds) => {
  // Do something here to return a string, struct, dictionary, array, or whatever.
});

We've included a few common formatters in each library to cover some common libraries. We'll be adding more as time goes by, and, of course, PRs are always extremely welcome to add more!

But what about my language?

We wanted to get these three client libraries out the door and into your hands as soon as possible. But don't worry; Go and Ruby versions are already in the works and will be released soon.

We'll continue to evolve these new libraries, keeping the API roughly in sync between all languages, but allowing each to feel as natural as possible for each language.

Apr 01 2020
Apr 01

Real estate & property management businesses can reap huge profits from having a well-built website — and many of them actually do!

However, sites in this area are not built in one click. They require reliable and smooth third-party integration, excellent property categorization, advanced search, and more. This makes the choice of the CMS a responsible task. In this post, we take a tour of the features and opportunities that prove it’s a great idea to build a real estate website on Drupal.

Benefits of creating a real estate website

Having your own real estate website, built in accordance with the best practices and the right tools, can give you:

  • a wider client base
  • a more powerful business brand
  • availability with no geographical boundaries
  • endless opportunities for digital marketing
  • increased transactions

and more!

Drupal for the real-estate websites

As a Drupal development & support team, we know how well Drupal performs in the real estate and property management industry. This is also proved by numerous Drupal real estate website examples.

Drupal real estate website examples

All this inspired us to dedicate a blog post to the key Drupal benefits for real estate websites, among which are:

  • advanced integration opportunities with third-party systems thanks to Drupal 8’s API-first approach
  • the possibility to share the site’s data to a mobile app in order to provide better experiences for your users and expand your audience
  • multi-level categories for real-estate objects thanks to Drupal’s taxonomy system
  • convenient real estate filtering and sorting options by various criteria
  • smart search opportunities (including faceted search, location-based search, autocomplete, and much more)
  • image optimization options that allow you to keep the quality of real estate images while scaling and cropping them for different listings
  • enhanced multilingual capabilities that will allow you include overseas customers
  • flexible roles and permissions, as well as content moderation opportunities, that provide good control to your property management
  • a mobile-first approach in Drupal 8 that makes it easy to provide smooth viewing experiences for your mobile audience
  • plenty of helpful modules that enrich real estate & property management website functionality
Drupal real estate website examples

What functionality you’ll need for your real estate website

Among the key features to make a real estate website, there are:

  • property listings
  • appealing visuals
  • registration
  • CTAs
  • contact forms
  • search
  • filtering
  • testimonials

and many more.

In the wealth of opportunities for real estate & property management websites in Drupal, we have gathered a few of the most requested real estate website features that many of our customers have been asking for recently:

Real estate APIs and third-party integration

APIs are vital for today’s data exchange, especially on the rapidly growing real estate market. Real estate websites rely on APIs to get relevant property data for their real estate listings. Real estate APIs provide functionalities like MLS (multi-listing service) feeds, mortgage data, rental estimates, and many more.

A real estate website can also share its data with third-party websites and applications. The API-first principle of Drupal 8 makes it especially smooth and easy thanks to a built-in REST API and data serialization and preparation to be shared in the JSON or XML formats.

When talking about third-party integration, any other third-party software can be brought to work with your real estate website. This can be software for accounting, real estate transaction management, lease management, real estate CRM, and much more.

  • Example: integration with Quickbooks

An example is this kind of integration with the Quickbooks accounting software. It can help you track income and expenses per property, calculate the management fee collected from the customer, and much more. To speed up the integration, there are some useful Drupal modules such as the Quickbooks Online API, the Drupal QuickBooks Integration, and more.

Payment processing

Some customers need payment processing functionality on a real estate website. It is vital to provide customers with convenient payment methods and a good choice of preferred payment gateways. Drupal Commerce 2 provides secure and smooth payment functionality integration by supporting 70+ payment gateways, for which there are contributed modules. Whatever other gateways you wish to integrate your real estate website with, can be added via customizations. Flexible payment options for on-site, off-site, “manual” gateway payments, and many more are possible.

User management features

It’s vital for a real estate website's security and efficient workflows that only the right people have access to the right tasks. Real estate owners, buyers, renters, developers, renovators, brokers, and many other participants of the process need different permissions. Those who decide to create a real estate website with Drupal, appreciate its system of roles and permissions that can be very granular. In addition, there are contributed Drupal 8 modules for user access and many more to provide smooth user management.

  • Special case: real estate data aggregator

Among the real estate & property management websites created by our team, there is a special project that is an example of how complex, advanced, and interesting it can be. Gridics is a platform that aggregates real estate data from various sources in the right format. Among the cool features are a zoning code management tool, an interactive 3D Map that helps customers better evaluate the real property objects, a Gridics API to filter data by various criteria, and much more.

Gridics real estate aggregator

Build a real estate Drupal website with us!

The choice of features for your real estate website is unlimited. Drupal is an enterprise-class CMS that allows developers to implement ideas of any complexity. If you are inspired to create a real estate website with Drupal, contact our Drupal experts and let’s discuss what your future site could do for you.

Apr 01 2020
Apr 01

Recently I was preparing some events to intercept requests in Symfony and sharing some approaches with my colleagues. Then I discovered that in my environment the topic of Event Management in Drupal (dispatching events, subscribing events) was not very known, so I prepared some snippets to share and from there I thought to write some introductory article. Undoubtedly, in the latest versions of Drupal, certain components of Symfony have not only made their appearance, but also have been gaining importance and surely this will extend further in time, given its elasticity and fully integrated OOP approach. One of these components is the HttpKernel, a very valuable subsystem for building request-response relationships in a technology (Silex, Symfony, Drupal).

Picture from Unsplash, user Noiseporn, @noiseporn

Table of Contents

1- Introduction
2- Concepts of Event and Event Subscriber
3- Building the Event Dispatcher
4- Building the Event Subscriber
5- Read More
6- :wq!

1- Introduction

As we said, HttpKernel very flexible that allows us to structure relationships requests - response. Let’s see what it says about itself in its Symfony documentation:

The HttpKernel component provides a structured process for converting a Request into a Response by making use of the EventDispatcher component. It’s flexible enough to create a full-stack framework (Symfony), a micro-framework (Silex) or an advanced CMS system (Drupal).

In this context where I wanted to practice a little bit with the concepts of “Event” and “Event Subscription”. Let’s see.

2- Event and Event Subscriber

Concept of Event: Event systems are ways to allow extensions in many applications. Generally there are some similar topics and concepts, wich usually include common elements:

  1. Event Registry: Just a place where event subscribers will be grouped.
  2. Event Subscribers / Event Listeners: Callable functions or methods that react to an event.
  3. Event Dispatcher: The way the event is triggered.
  4. Event Context: Some information shared for the subscribers of an event.

Getting information about services and events: Services? Events? but&mldr;how do I know how many I have available at my Drupal installation? Well you can use Drupal Console with a pair of commands to get the info:

drupal debug:container #Get list of available services in a Drupal site.
drupal debug:event #Get a list of available events in your Drupal site.

Events in Drupal: From Drupal 8, the Symfony Event Dispatcher is one the most important components in a Drupal installation. This component is responsible for launching notifications from your applications. You can be listening these notifications and returning some responses executing your custom code.
In Drupal 8, events are defined in a class and declared in a YML file, then dispatched using a function call on the core Drupal event_dispatcher service.

What is an Event Subscriber: A very common task in the Drupal development it’s intercept some request from the browser to your Drupal, getting something interesting on it, and then redirect the user to another location in the site.

Well, in Drupal 7 we were using a combination of hook_init() with a weird function called drupal_goto(), but now in Drupal >= 8 we’re doing this using with the symfony model for subscribing us to the kernel.request event.

We can launch a redirect from a Controller, but in this case we want to test the topic of Event-Subscribers in Drupal.

3- Building the Event Dispatcher

Note: The example requires that you have previously created a new custom module with its custom_module.info.yml in your Drupal installation.

Note II: This example is from Drupal 8 Module Development (second edition) by Daniel Sipos, the Holy Bible of the Drupal Development.
Pag 65: “We will create an event to be dispatched whenever our HelloWorldSalutation::getSalutation() method is called. The purpose is to inform other modules that this happened and potentially allow them to alter the message."

3.1- Creating an event class

File: SalutationEvent.php
Location: /custom_module/

<?php
namespace Drupal\custom_module;

use Symfony\Component\EventDispatcher\Event;

/**
 *Event class to be dispatched from the HelloWorldSalutation service.
 */
class SalutationEvent extends Event {

const EVENT = 'hello_world.salutation_event';

/**
 * The salutation message.
 *
 * @var string
 */
protected $message;

/**
 * @return mixed
 */
public function getValue() {
    return $this->message;
}

/**
 * @param mixed $message 
 */
public function setValue($message) {
    $this->message = $message;
 } 
}


3.2- Injecting the Event Dispatcher service

services:
  hello_world.salutation:
    class: 'Drupal\hello_world\HelloWorldSalutation'
    arguments: ['@config.factory', '@event_dispatcher']
    tags:
      - { name: salutation }

4- Building the Event Subscriber

Given an internal path in Drupal, we’re going to define a new event subscriber to catch the request, review certain conditions of the current user of Drupal and if there’s a matching, then we’ll set a new redirect to another route in your system bypassing the process.

We know that the system allows subscribers to change data before the business logic uses it for something. So in order to register the new event subscriber, you have to create a new service related with the former class (that implements the interface) and tagged with the event_subscriber key.

In this example, when a user request our custom route, we’ll check if the current user has assigned a “non_grata” role and if the result is positive, then we’ll redirect him to the home page of the web portal, without allowing him to access our route. In order to execute this, we’ll need two injected services: the AccountProxyInterface for get the user related data and CurrentRouteMatch to test the requested route.

Required parts:

  1. A declared internal route (file custom_module.routing.yml in custom_module/)
  2. A new declared service (file custom_module.services.yml in custom_module/)
  3. A new class CustomModuleRedirectSubscriber implementing the EventsSubscriberInterface (file in custom_module/src/EventSubscriber/)

Note: The example requires that you have previously created a new custom module with its custom_module.info.yml to register in your Drupal.

4.1- The route

custom_module.hello:
  path: '/hello'
  defaults:
    _controller: '\Drupal\custom_module\Controller\CustomModuleController::helloWorld'
    _title: 'Our Testing Route'
  requirements:
    _permission: 'access content'

4.2- The Service

 custom_module.redirect_subscriber:
    class: '\Drupal\custom_module\EventSubscriber\CustomModuleRedirectSubscriber'
    arguments: ['@current_user', '@current_route_match']
    tags:
      - { name: event_subscriber }

4.3- The Class CustomModuleRedirectSubscriber.php

<?php


namespace Drupal\custom_module\EventSubscriber;


use Drupal\Core\Routing\CurrentRouteMatch;
use Drupal\Core\Routing\LocalRedirectResponse;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Drupal\Core\Session\AccountProxyInterface;
use Symfony\Component\HttpKernel\Event\GetResponseEvent;
use Symfony\Component\HttpKernel\KernelEvents;

/**
 * Class CustomModuleRedirectSubscriber Subscribes to the Kernel Request events.
 */
class CustomModuleRedirectSubscriber implements EventSubscriberInterface {

  /**
   * @var \Drupal\Core\Session\AccountProxyInterface
   */
  protected $currentUser;

  /**
   * @var \Drupal\Core\Routing\CurrentRouteMatch
   */
  protected $currentRouteMatch;

  /**
   * HelloWorldRedirectSubscriber constructor.
   *
   * @param \Drupal\Core\Session\AccountProxyInterface $currentUser
   * @param CurrentRouteMatch $currentRouteMatch
   */
  public function __construct(AccountProxyInterface $currentUser, 
                              CurrentRouteMatch $currentRouteMatch) {
    $this->currentUser = $currentUser;
    $this->currentRouteMatch = $currentRouteMatch;
  }



  /**
   * {@inheritdoc}
   */
  public static function getSubscribedEvents() {
    $events[KernelEvents::REQUEST][] = ['onRequest', 0];
    return $events;
    }

  /**
   * Handler for the kernel request event.
   *
   * @param \Symfony\Component\HttpKernel\Event\GetResponseEvent $event
   *
   */
  public function onRequest(GetResponseEvent $event){
    $route_name = $this->currentRouteMatch->getRouteName();
    if ($route_name !== 'custom_module.hello') {
      return;
    }

    $roles = $this->currentUser->getRoles();
    if(in_array('non_grata', $roles)) {
      $url = Url::fromUri('internal:/');
      $event->setResponse(new LocalRedirectResponse($url->toString()));
   }
  }
}

5- Read More

Here you can find much more information about the concepts previously exposed and consult a multitude of use cases and examples:

6- :wq!

[embedded content]

Mar 31 2020
Mar 31

Recent challenges sparked by widespread work-at-home mandates are revealing an essential need to ensure productivity and engagement for remote meetings.

Many of us are familiar with the internet meme video, A Conference Call in Real Life.  It may resonate as all too real (but still very funny!). 

With the right approach, however, remote meetings can be productive, engaging, and spark creativity. 

                  Register for a Free Webinar: Design Thinking for Optimal Online Collaboration

Since distributed teams and remote work environments are how we’re already accustomed to working here at Promet Source, we’ve been able to adapt many onsite Design Thinking meeting techniques, using Human-Centered Design activities and adjust them to a virtual format. We often accommodate remote teams who have attendees in varying areas throughout the globe that find it impossible to all get together for an onsite meeting, but still need to put their heads together to define an organization’s priorities or innovate together toward common goals.

On many levels the uncertainty and upheaval of our recent change in workplace environments represents limitation, but one of the main principles of design thinking is that creativity thrives in an environment of time constraints and limitations, which provides the opportunity for innovation and creativity when a few key guidelines are followed. 

Planning and Facilitation

A productive meeting has an agenda. Create a written agenda and share it with participants prior to the remote meeting, as well as at the beginning of the meeting itself. Be sure to include time slots for each discussion item, even if it is only 10 minutes.

Follow the agenda items closely and assign someone the “time keeper” function to give a 2-5 minute warning before the planned agenda item is due to time out and stick to it! 
 

Use Interactive Tools for Alignment

Oftentimes, the loudest voices in the meeting or those of upper management are the only opinions that get heard. Utilize online tools to facilitate discussions and to ensure every voice and opinion can be shared, regardless of hierarchy and position.   

Interactive tools can also help document what is being discussed in real-time without “note taking” so attendees can see what is being discussed and agreed upon. 

Creating an interactive forum also allows open discussion, presentation of ideas, and collecting maximum input from participants. If the users can contribute anonymously to the meeting, it allows for critical evaluation of ideas as a neutral and anonymous format.

Interactive tools we like to use during online meetings include:

FunRetro

  • Originally a Sprint Retrospective board we have co-opted for interactive meetings.

Google Sheets & Docs

  • Allows multiple users in a document at the same time for meeting collaboration.

InVision

  • In addition to a good design and prototyping tool, InVision also has a great virtual whiteboard that allows multiple people to draw on the whiteboard at the same time.

Prioritize & Gain Consensus

Working with the group to prioritize items that come up during the discussion helps to gain group consensus. Act as a facilitator for the meeting, listen to what is being said, and put your opinion aside in order to encourage participation and optimize input. Create follow-up activities for what the group sees as most important and assign next steps assigned to team members. Let them come up with a solution and present it back to the group in this or a future meeting.

Remember, online meetings can be productive and innovative when we allow the space for people’s ideas to be heard and thrive. Leveraging the right tools along with an intentional focus on connection and engagement sets the stage for memorable meetings that get participants to perk up and be on their A Game.

Design Thinking offers a whole new perspective on running a meeting. Engagement and connection are a particular imperative in the current environment and never has there been a better time to put design thinking to work. 

               Register for a Free Webinar: Design Thinking for Optimal Online Collaboration

[embedded content]

Design Thinking for Optimal Online Collaboration

When:

Tuesday, April 14, 2020    12 p.m. CST

In this webinar you will learn to:

  • Leverage interactive, online tools for meeting facilitation
  • Adapt design thinking techniques for the virtual meeting environment
  • Facilitate team activities that enhance online engagement
  • Understand the core of design thinking to facilitate more successful ideas
  • Implement a meeting format that sparks creativity and accelerates the evolution of ideas from good to great
  • Develop a process for creating joint ownership of ideas
  • Apply key steps for ensuring follow up and accountability

Interested in starting the conversation now? Contact us today to learn more about how you and your team could benefit from a Human-Centered Design / Design Thinking Workshop facilitated by Promet.
 

Mar 31 2020
Mar 31

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

Blue heart

Today, I'm asking for your financial support for the Drupal Association. As we all know, we are living in unprecedented times, and the Drupal Association needs our help. With DrupalCon being postponed or potentially canceled, there will be a significant financial impact on our beloved non-profit.

Over the past twenty years, the Drupal project has weathered many storms, including financial crises. Every time, Drupal has come out stronger. As I wrote last week, I'm confident that Drupal and Open Source will weather the current storm as well.

While the future for Drupal and Open Source is in no doubt, the picture is not as clear for the Drupal Association.

Thirteen years ago, six years after I started Drupal, the Drupal Association was formed. As an Open Source non-profit, the Drupal Association's mission was to help grow and sustain the Drupal community. It still has that same mission today. The Drupal Association plays a critical role in Drupal's success: it manages Drupal.org, hosts Open Source collaboration tools, and brings the community together at events around the world.

The Drupal Association's biggest challenge in the current crisis is to figure out what to do about DrupalCon Minneapolis. The Coronavirus pandemic has caused the Drupal Association to postpone or perhaps even cancel DrupalCon Minneapolis.

With over 3,000 attendees, DrupalCon is not only the Drupal community's main event — it's also the most important financial lever to support the Drupal Association and the staff, services, and infrastructure they provide to the Drupal project. Despite efforts to diversify its revenue model, the Drupal Association remains highly dependent on DrupalCon.

No matter what happens with DrupalCon, there will be a significant financial impact to the Drupal Association. The Drupal Association is now in a position where it needs to find between $400,000 and $1.1 million USD depending on if we postpone or cancel the event.

In these trying times, the best of Drupal's worldwide community is already shining through. Some organizations and individuals proactively informed the Drupal Association that they could keep their sponsorship dollars or ticket price whether or not DrupalCon North America happens this year: Lullabot, Centarro, FFW, Palantir.net, Amazee Group and Contegix have come forward to pledge that they will not request a refund of their DrupalCon Minneapolis sponsorship, even if it will be cancelled. Acquia, my company, has joined in this campaign as well, and will not request a refund of its DrupalCon sponsorship either.

These are great examples of forward-thinking leadership and action, and is what makes our community so special. Not only do these long-time Drupal Association sponsors understand that the entire Drupal project benefits from the resources the Drupal Association provides for us — they also anticipated the financial needs the Drupal Association is working hard to understand, model and mitigate.

In order to preserve the Drupal Association, not just DrupalCon, more financial help is needed:

  • Consider making a donation to the Drupal Association.
  • Other DrupalCon sponsors can consider this year's sponsorship as a donation and not seek a refund should the event be cancelled, postponed or changed.
  • Individuals can consider becoming a member, increasing their membership level, or submitting an additional donation.

I encourage everyone in the Drupal community, including our large enterprise users, to come together and find creative ways to help the Drupal Association and each other. All contributions are highly valued.

The Drupal Association is not alone. This pandemic has wreaked havoc not only on other technology conferences, but on many organizations' fundamental ability to host conferences at all moving forward.

I want to thank all donors, contributors, volunteers, the Drupal Association staff, and the Drupal Association Board of Directors for helping us work through this. It takes commitment, leadership and courage to weather any storm, especially a storm of the current magnitude. Thank you!

Mar 31 2020
Mar 31

The global COVID-19 pandemic has affected each of us in profoundly personal, and yet somehow deeply shared, ways. Facts on the ground have changed so quickly, and so dramatically, that we find ourselves overcome with a huge range of emotions and needs: caring for immediate families, worrying about loved ones, reaching out to neighbors, and obsessing over news from every corner of the globe. And while our personal concerns may remain focused on community-based ways to get through this crisis together, our ability to serve our clients is paramount — if you’re reading this, we’re likely talking about your organization.

The time we are living through has only served to amplify how essential your work is, and we know first hand how much your teams are stepping up in the face of this crisis to move it forward. You deserve partners that can rise to meet the challenge alongside your team.

Our Response

As a B Corp committed to supporting mission driven organizations, ThinkShout has always strived to live the values that you fight for day in and day out, and those values are most essential during times of duress, to ensure that we don’t lose our way when navigating a crisis. Rather than just assuming business as usual, we surveyed our team to understand their needs in this new era, and made necessary adjustments to ensure that we can find our new balance between work and life, and continue to operate at full capacity to serve your needs. We are also adjusting to our new shared virtual reality by creating free webinars, blog posts, and best practices for anyone in our community to learn from, including a new series on Equitable Digital Connections. We want you to know that we are thinking about your evolving needs every day. It is our job to stay ahead of emerging best practices, to learn from the efforts of similar organizations, and ensure that you have the digital tools and support to continue your work.

Tangible Ways to Deepen Digital Engagement

This is a moment where innovation and creativity are required from each of us as we respond to today’s crisis in a way that not only meets the challenge, but also helps shape the future to be more just and equitable for the communities you serve.

Our current situation presents two clear new opportunities:

  • Deepen engagement with audiences by exploring new ways to use current platforms to leverage existing offerings.
  • Expand engagement with audiences by exploring new-to-your-organization platforms and engagement tactics.

This applies to everything from strategic communications and campaigns, to how knowledge products are distributed.

Our immediate recommendation is to lean into exactly what makes your organization unique — your core product offering — and then consider how every digital tool at your disposal can better communicate its relevance and importance. Now is the time to embrace concepting, creating, and implementing equitable and accessible digital platforms and engagement tools. In this hopefully short era where all communication is virtual, it is our responsibility to bridge the digital divide both between organizations that have the capacity to engage with their core audiences and those that don’t, as well as within organizations as they work to best leverage digital systems to support all programs, partnerships, and mission-critical efforts. For organizations focused on social good, this is even more essential.

We are actively engaged with all current ThinkShout clients to discuss how the systems and strategies you’re already using can flex to meet this moment. Partnering with your organization as strategic, creative, and technical experts is our very reason for existence.

Where To Focus: Stabilizing Your Digital Platform

ThinkShout is investing deeply across four critical areas that all of our partners should prioritize at this time. As more services become digital-only (and perhaps in ways that are more permanent than initially thought), we need to be extra vigilant to ensure that content is accessible and designed for all audiences. If you don’t currently have a direct contact at ThinkShout, please reach out to learn more about how we’re expanding core offerings in:

  • Accessibility: Now is a great time to ensure that your digital products are accessible to everyone. Auditing top content, analyzing your options, and building a phased roadmap are steps you can take today.
  • Audiences: How are your products and content informed by human insights? New approaches to developing behavior-based personas can result in better outcomes organizationally and for the individuals you serve.
  • Ecosystems: How do your digital platforms—audience-facing and administrative alike—serve your organization? Where are redundancies and otherwise inefficient systems hindering streamlined experiences for your users or efficient processes for your team? Are you considering new tools and need to evaluate how they fit into the full ecosystem?
  • Full-Stack Content Strategy: When it comes to a platform that’s optimized for search and social, the little things are the big things. If you haven’t already, now is the time to audit and update your platform’s URL structures, metadata, keywords, and page titles for social and search.

Social distancing does not imply a lack of social connection. To the contrary, it makes the latter more essential than ever. People crave connection. A sense of belonging — and purpose. You can provide that to all of us as we sit, isolated, searching for meaning in the chaos and, most of all, a way to help. Let us know if we can help you make those connections that our society so urgently needs.

Get In Touch

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

Learn More Get In Touch
Mar 31 2020
Mar 31

There are many factors that make up a good agency partnership. But there’s one without which such a partnership would essentially be impossible, and which all the other factors issue from: communication.

In this post, we’ll further break down how and why good communication with your partner agency is so vital to a successful partnership. We’ll also provide some concrete examples of good vs. poor communication, then finish with some tips on how to communicate more effectively internally within your team and externally with partners and/or clients.

Why is good communication important?

Well, the first and foremost reason why good communication is so important to an agency partnership is that it’s actually vitally important in any kind of relationship, be it personal or professional. 

And the aim with agency partnerships is, or at least should be most of the time, to be both personal and professional. As we pointed out in an earlier post, you should strive to be a true partner, not just a contractor that executes whatever happens to be needed.

This transforms the partnership from a mere business relationship into a deeper, more personal one, from which both sides can benefit significantly. At the heart of such a relationship, however, lies good communication. 

By frequently communicating with your partner and their team, you ensure everyone working on the project is on the same page and thus greatly reduce risks of errors or failure. 

This is especially important since the partnership is typically a remote one, quite possibly with a significant time difference, so a well established feedback loop is extremely important, as are other forms of preparation; e.g. setting a meeting agenda rather than wasting the time of all meeting participants with real-time problem solving. 

Keeping your partners updated on the progress of projects with transparent and timely communication is a clear indicator of your commitment to the respective relationship and helps you to establish yourself as a trustworthy and reliable partner, often helping you secure a long-term relationship.

Good vs. poor communication

Let’s now take a look at a couple examples of what (not) to say and how (not) to act to be the best partner agency you can be. We’ll also accompany each example with some possible results or outcomes of the respective approach. 

Let’s start with an example of positive communication. The following is a screenshot of our developer Kristina’s conversation with a member of a client’s team from a different timezone:

As you can see, she informs the client when she’s ready to start working on her daily tasks, as well as nearing the end of the day, when she also provides an update on her work for the day and makes sure that she is able to work on new tasks the next day without needing major synchronization with the client’s team again. 

This is a general practice of developers of Agiledrop. We strive to be reliable partners to our clients, and the trust we so establish releases them from having to micromanage everything while still retaining complete control of the course of the project. 

The fact that we prioritize clear and frequent communication from our very first interaction with a potential client plays an important part here. The way we work requires us to always secure documentation and other necessary materials for optimal work as early as possible, so that we don’t have to make constant re-requests to the client’s project management. 

If you’d like to learn more about the ways we strive to cultivate strong client relationships, check out the third chapter in the story of Agiledrop.

Let’s now take a look at an example of a situation where communication could have been better handled. Some time ago, our client adviser Aleš was on a late afternoon call with a client, which was supposed to only last about 15 minutes. 

But, since the client’s project manager wasn’t adequately prepared for the call and was trying to find answers to our developer’s questions on the spot, that timeframe quickly stretched out into 45 minutes, essentially rendering the meeting useless. 

This is why we pointed out earlier how important it is to set a clear agenda to have meetings be as efficient as possible. You can learn more about the situation described above, as well as get some useful time management tips, in Aleš’s blog post

How to foster quality communication

We’ll leave you with some tips and best practices of fostering quality communication which have especially proven vital in working with agile methodologies and as remote teammates. 

  • Good English skills are a must. Since English is the lingua franca, you’ll be doing most of your client communications in English, so a good written and spoken English will be essential to a strong relationship.
  • Your internal communication needs to be on point. You can’t communicate well with a client’s team if you can’t communicate and collaborate effectively within your in-house team. Ideally, you would have daily, weekly and monthly team meetings to keep everyone up-to-date. 
  • You need a good feedback loop. The regular internal meetings under the previous point are a vital element of this, and you also need a similar approach for client communication. The above Slack conversation of Kristina’s daily client update is a great example. Of course, you also need a good strategy for collecting feedback and relaying it to your own and to the partner team without excessive back-and-forths. Check out this post to see how we approach this. 
  • Good preparation is essential. As stated already, being well prepared indicates professionalism and saves a lot of time and effort for everyone. Don’t forget - weeks of programming can save you hours of planning, so don’t fall into this trap, and think before you start making.
  • Acts of kindness and thoughtfulness are never unappreciated. You might think that acts of thoughtfulness would be too personal, maybe even to the point of being intrusive, but the point is, after all, to build a strong, personal relationship. You can add a really nice touch with in-person partner visits, birthday greetings, or by sending and/or bringing small, symbolic gifts.
  • Follow the true - kind - necessary rule. This is a golden rule of communication, attributed originally to Persian poet and scholar Rumi, and employed throughout history by several other authors: anything you say needs to satisfy these three criteria - truthfulness, kindness and necessity. 


Conclusion

The revelation that communication is the most important thing in an agency partnership may seem like a no-brainer, and thus not really a revelation at all. But it is exactly because it is a no-brainer that we decided to write this up - its importance can often go overlooked, clouded by all the other elements that issue from it, but not getting to the root of it.

But, seeing how all the other elements are so closely tied to communication, we decided to write this up to really highlight the idea that communication is at the core of it all. 

And we speak from experience, of course - having worked with numerous clients from different cultures across nearly a decade, we’ve always seen relationships flourish the most when there is good and transparent communication on both sides. These were then typically the partnerships that ended up lasting, and many of them still do to this day. 

If you’re interested in establishing a partnership with a reliable and proficient development agency, give us a shout out or read more about how we help agencies scale.
 

Mar 30 2020
Mar 30

Problem

How do you migrate webforms and submissions from previous versions of Drupal and other form builders?

The answer is Drupal's Migrate API, which is incredibly powerful but can feel overwhelming. When I migrated MSKCC.org from Drupal 6 to Drupal 8, the Migrate API was just being introduced into Drupal 8 core, and I felt more comfortable writing a custom migration script instead of using code that was still under development. Migrate API is now stable and if you are an experienced Drupal developer, you should use it.

Certain aspects of Drupal require some expertise.

The level of expertise required to build and maintain a Drupal 8 website has changed from Drupal 7, mainly because we are creating more ambitious digital experiences. The Drupal community struggles to simplify our flexible and sometimes complex product. My approach is to make the Webform module as flexible and robust as possible, while not forgetting that people need a simple way to start building a form. This is exactly why I include an introduction video on the Webform module's main page. Besides making the Webform module an awesome tool for experienced Drupal site builders, the Webform module needs to be welcoming to new users and make it easy for them to move their existing forms to Drupal.

Either an organization is starting from scratch and building a new Drupal site, or more commonly an organization has decided they need to provide a more ambitious digital experience and they have chosen to switch to Drupal. In both situations, we need to make it easy for someone to switch from other form builders to Webform.

The problem that needs to be addressed is…

How can we make it easy for an organization to migrate existing forms with submissions to the Webform module?

Solution

The simplest way to migrate to the Webform module is to rebuild an external form and then import the existing data. Building a webform is fun and easy, forms are a critical aspect to most websites; it is worth taking the time needed to rebuild an existing form, and take full advantage of all the cool elements and features available in the Webform module. The only missing feature from the Webform module is an easy and fast way to import existing submission data.

The Webform module already makes it easy to export submissions. There is a 'Download' tab under the Results section that generates a CSV (comma separated values) which can be opened in Excel or Google Sheets.

The solution is to make it extremely easy for anyone to import submissions using a CSV.

Importing a CSV containing submission data should be a simple process where a site builder uploads a CSV, which is prepared, reviewed, validated, and submitted to a webform.

Below are the steps which one might take to import CSV data:

  • Build a webform
  • Populate webform with some test submissions
  • Download the test submissions using the CSV export
  • Examine the CSV export
  • Populate the CSV export with external data
  • Upload and import the CSV export
  • Review imported data

Being able to export and import submission data as needed has the added bonus that site builders can download all the existing submissions, bulk edit them using Excel or Google Sheets, and then upload them back into the database. Submissions can now be migrated from one server to another. There is only one caveat, and it is not required, but it helps to make sure all exported and imported CSV records have a UUID (universally unique identifier).

Notes

The below notes are pulled directly for the Webform module's CSV upload form:

  • All submission properties and data is optional.
  • If UUIDs are included, existing submissions will always be updated.
  • If UUIDs are not included, already imported and unchanged records will not create duplication submissions.
  • File uploads must use publicly access URLs which begin with http:// or https://.
  • Entity references can use UUIDs or entity IDs.
  • Composite (single) values are annotated using double underscores. (e.g. ELEMENT_KEY__SUB_ELEMENT_KEY)
  • Multiple values are comma delimited with any nested commas URI escaped (%2E).
  • Multiple composite values are formatted using inline YAML.
  • Import maximum execution time limit is 6 hours.

For those hardcore developers out there, the answer is…

Yes!!! There is even a drush:webform:import command.

Demo

To make sure no one feels overwhelmed, I created the below video to help people feel more comfortable with this new functionality.

Supporting organization

This awesome new feature was sponsored by Kennesaw State University. Kaleem Clarkson (kclarkson), Operations Manager @ Center for Excellence in Teaching & Learning at Kennesaw State University, and I scoped out this ticket on Drupal.org via Issue #2902977: Provide a straight forward tool for importing submissions from a CSV document.

I previously talked about Coming to an agreement within the Drupal community and sponsoring a Webform feature, and it is challenging working out the process for a paid feature. I have discovered that scoping out all paid Webform feature requests on the Drupal.org has worked out to be the most transparent process. Even when a potentially sponsored feature agreement falls through, the scoped out work remains in the Webform issues queue. I feel better knowing the research and work I did for the feature request is not a complete loss. I have even seen a feature request sit in the queue for a few months and then someone like Michael Feranda (mferanda) appears out of nowhere and helps complete a feature like Issue #2888862: Provide a mechanism to lock a webform submission.

Getting Involved

Kaleem Clarkson (kclarkson) and Michael Feranda (mferanda) contributions show there are multiple ways to get involved in helping to support the Webform module and Drupal. Michael found a task in the Webform issue queue and started contributing code back to the Drupal community. Kaleem is not a coder, he is more of a 'master' site builder and community leader, so he found a requirement from his project, convinced Kennesaw State University about the value of contributing back to the Drupal, and they sponsored a pretty awesome improvement, which helps everyone who is adopting the Webform module and Drupal.

Sponsor a Feature

Sponsored a feature is a challenging but needed enhancement to the process of building and maintaining the Webform module. I have had some success implementing a few paid features.

Open Collective provides a transparent platform that might make 'Sponsor a feature' more natural and accessible for the Drupal community. Paying for a feature using Open Collective's payment system which provides standardized invoices could make it easier and justifiable for large organizations to financially contribute to Webform, Drupal, and Open Source.

At the same time, I still feel it is also okay to not pay Open Collective's 13-14% overhead and execute a paid feature request via a direct transaction. Either way, I am absolutely committed to scoping out all feature requests transparently on Drupal.org.

If you have a features request, please create a ticket in the Webform module's issue queue.

Backing the Webform module

Open Collective is providing us, Drupal and Open Source, with a platform to experiment and improve Open Source sustainability. If you appreciate and value what you are getting from the Webform module, please consider becoming a backer of the Webform module's Open Collective.

Become a Backer

Almost done…

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

OKSubscriptions powered by Strikingly

How to find and hire the best Drupal agency

Mar 30 2020
Mar 30
Mar 30 2020
Mar 30


Here is a pretty simple way to maintain the hook_help() of a Drupal project, straight from the readme file.

Markdown is preferred here to .txt so it can be reused on a GitHub, GitLab, ... repository as well.
The downsides of this approach are that we are losing several capabilities like:

  • the Drupal translation and routing system
  • conditional help, e.g. when another related module is installed

Anyway, in most cases, it can be used as a good fallback.

Require the Parsedown library in your composer.json

"require": {
  "erusev/parsedown": "^2.0"
}

Create the README.md file at the root directory of the module.

Then, in the hook_help()

use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\Component\Utility\Xss;

/**
 * Implements hook_help().
 */
function my_module_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.my_module':
      $parsedown = new Parsedown();
      $readme = file_get_contents(drupal_get_path('module', 'my_module') . '/README.md');
      // Stay permissive here, with filterAdmin.
      $output = Xss::filterAdmin($parsedown->parse($readme));
      return $output;
  }
}


Resources

Drupal Agency Working Remotely

Mar 27 2020
Mar 27
Mar 26 2020
Mar 26

Drupal 9.0.0-beta2 has been released, and we are expanding the scope of our beta testing program for minor releases of Drupal core, to include this major release as well.

We need help testing the following upgrade paths:

Agencies and other organizations who are supporting ambitious Drupal 8 sites are invited to be part of the beta testing program. By participating, you can help core maintainers by following the guidelines of the Beta Testing Program to install the beta core release on real-world examples of Drupal websites, in their staging environments. Beta testers can then provide feedback to the core maintainers about any issues they see running the beta core release in a structured way.

Being part of the Beta Testing Program is a key contribution to the Drupal project and also helps organizations to be very aware of any changes relevant to their supported websites.

Would your organization, and the Drupal project, benefit from participating in the Beta Testing Program? We'd like to get as many organizations involved as possible, so we can have a robust test of Drupal 9 before the release date. 

You can apply to join here:

Apply to participate in the program

Who should apply?

Agencies and site owners who maintain large and complex Drupal 8 production sites. In particular, sites that use a wide range of contributed and custom modules or have large volumes of content.

How can I get ready? 

To prepare for testing these upgrade paths, the best thing to do is to install and run the Upgrade Status module. This module will tell you which of your installed modules are already ready for Drupal 9. You can also check your custom code using the Drupal Check command line tool, and even generate fixes for common incompatibilities using Drupal Rector

How will participants benefit from contributing in this way?

  • All organizations and individuals taking part in the testing will receive contribution credit for both testing the update and fixing any issues that arise.
  • Updating early helps find issues beforehand, rather than after the release is out.
  • Reporting issues encountered lets you tap the wealth of experience of the Drupal core contributors that you'd not have the same level of access to if you update on your own after the release.
  • You'll have satisfaction in the knowledge that you helped shape the next major release of Drupal core.

Drupal Association Statement re: Financial Effects of COVID-19

Mar 25 2020
Mar 25
Mar 25 2020
Mar 25

The joy of e-commerce is that there are myriads of different products so every customer can find what suits them perfectly.

As an online store owner, you will just need to help them a little — which will be a win-win! In this post, you will learn how to do this by setting up product attributes in your Drupal online store. Flexible product management is one of the reasons to choose Drupal Commerce — an e-commerce platform for Drupal websites. Let’s take a closer look at its product attribute system.

A glimpse at how to increase online sales

In the ocean of recommendations to boost onlines sales on your e-commerce website, you will find everything from providing a smooth and simple checkout process to using cross-selling techniques or offering a choice of payment options. However, every recommendation is focused on usability and engagement.

That’s why one of the useful ways to increase sales is to provide your customers with a convenient choice between your product variations. Read on to find out how it works on Drupal Commerce websites.

What are product attributes?

Products in online store often come in more than one option. They may differ in size, color, fabric, shape, volume, or whatever other characteristics that customers might need to select when shopping.

Products that differ by color attribute

These characteristics are called product attributes. Their unique combination makes a product variation in Drupal (e.g. “I love Drudesk” T-shirt of size M and white color). The product is basically the same, but it differs in attributes.

The benefits of using product attributes

Here is what makes the use of product attributes so convenient — especially in the updated and improved system of Drupal Commerce 2.

  • You can easily add different product variations within the same product page by specifying their attribute values. No need to create separate products.
  • You can easily track items in stock and otherwise manage your products thanks to the fact that every combination of attributes (product variation) is assigned a separate SKU — a machine-readable ID.
  • Your online store customers can easily pick the right product variation according to their desired attributes and add it to the cart, with no need to go to another page with a different product.

Setting up product attributes in Drupal

If your e-commerce websits sells products that differ in some characteristics (or you plan to offer this), read on. Here is how the process of setting up the Drupal product attributes looks.

Adding a new product attribute

Find the Product Attributes link on your Drupal Commerce store dashboard. Then you click “Add product attribute,” and give it a name (e.g. “Dress color”).

Adding product attributes in Drupal Commerce

Adding attribute values

Your online store customers will need to choose between some color options (“White,” “Blue,” “Green,” etc.). As soon as you save the form, you will be able to add these as your attribute values. Add them one by one, clicking “Add value” every time. You can reorder them by dragging. If your store is a multilingual Drupal website, don’t forget to check “Enable attribute value translation.”

Adding attribute values in Drupal Commerce

Configuring how the attributes will look

On the same form, configure how it will look on the add-to-cart form (“Select list,” “Radio buttons,” or “Rendered attribute”). For the standard setup, the “Select list” or “Radio buttons” will be ok. Be sure to save the whole thing.

If you want to give your e-commerce website admins and customers a fuller view — for example, with the actual color swatch instead of color names — you should choose the “Rendered attribute” instead and install an additional contrib module such as the Color Field. It will allow you to set the color name and its HEX value when editing the attribute.

Drupal Color Field module

You can add fields to your attribute on the Product Attributes page by clicking “Manage fields” on the attribute editing menu. In this case, it will be the “Color” field.

Managing product attribute fields in Drupal Commerce

When the field is added, you can configure how it should look to your online store admins and your customers on the “Manage form display” and the “Manage display” tabs respectively. You can set the display as “Color swatch” and brush up the shape and size of the colors that will appear on your website.

Attaching the attribute to the product variation type

Attributes need to be added to a particular product variation type that requires them. Product variation types are another important Drupal Commerce concept. You can create or edit them on the Product Variation Type page and add your attributes to them. Or you can use the “Default” variation type. After that, you will be able to add product variations by specifying their color.

Adding product attributes to product variation types in Drupal Commerce

Let our team help you with the Drupal Commerce setup

The above is just the basic setup. We know from our experience that Drupal Commerce is a powerful platform with plenty of capabilities and plenty of possible settings for your online store. They are able to facilitate the e-commerce website management and boost online sales.

You can make your product selection work exactly as you need. For example, the image and price can update dynamically without a page reload every time a user clicks on a new attribute — using the decoupled Drupal Commerce approach or a decoupled shopping cart and benefiting from the capabilities of JavaScript frameworks to boost online sales.

Let our Drupal support and maintenance team guide you through the options and help you create the smooth setup depending on your requirements. What cannot be configured by built-in features, we will cover by the use of contributed modules or write custom ones specifically for you. Of course, we can also build an online store from scratch.

Use the best CMS features to boost online sales!

macOS menu bar -- The Drupal way

Mar 25 2020
Mar 25
Mar 25 2020
Mar 25

Pre-requisites

  • Dozer -- Hide status bar icons on macOS

  • Bitbar -- Put anything in your Mac OS X menu bar

Problem/Motivation

Can't get (real-time) notifications without checking mailbox or logging into drupal.org when

  1. An issue having a new comment,
  2. A documentation page gets updated
  3. A new post is published to Planet Drupal
  4. A new Change Record is published

The 4 cases can be classified into two types:

  • Login required: 1.2, 3 is available on user's dashboard page, logging in drupal.org is required
  • Login optional: 4 do not have to login drupal.org, anonymous ussers is able to access Change Record list pages.

Proposed resolution

Using Bitbar, which can put anything in the menu bar by using any programming language. and put Drupalicon in your macOS's menu bar! And the code which outputs the menu items can be executed by a certain interval. Just like a cron job. The executable file's name indicates that. For example.

  • foo.1m.php, executes per 1 min
  • bar.2h.sh, executes at every 2 hours

So that the menu items are generated dynamically. To get update notifications is possible.

See the demo: https://github.com/jungleran/macos-menu-bar-the-drupal-way/blob/master/macos-menu-bar-the-drupal-way.gif or https://github.com/jungleran/macos-menu-bar-the-drupal-way/blob/master/macos-menu-bar-the-drupal-way.mp4

Login required

Using a HTTP client to visit the target page which contains information we care, further more, the HTTP client handles over the page content to a DOM parser to extract information we want, The last stop is to output them to a proper format following Bitbar's documentation. and display icon(s) in the menu bar.

An example: https://github.com/jungleran/macos-menu-bar-the-drupal-way/blob/master/do.5m.py

By changing your drupal.org credentials in the code, you should be able to see issue/documentation links of "My posts" and posts of "Planet Drupal" from your drupal.org dashboard page as menu items on your macOs menu bar.


  1. # Change your drupal.org credentials here

  2. username = 'YOUR_DRUAP.ORG_ACCOUNT'

  3. password = "YOUR_PASSWORD"

Read the documentation https://github.com/matryer/bitbar to get the example working for you.

Login optional

The process is similar to the above, just do not have to handle logging in.

See example: https://github.com/jungleran/macos-menu-bar-the-drupal-way/blob/master/do.cr.15m.py

This example pulls Change Records(CR) from https://www.drupal.org/list-changes/drupal, all three types of CR are pulled and display each item as menu item. The three types of CR are:

  • Published
  • Reviews
  • Draft

Also see the README.md in the repo of the examples. https://github.com/jungleran/macos-menu-bar-the-drupal-way

Enhancement

As more menus are putting into the menu bar, it's going to get crowded soon. So Here comes Dozer to hide some of them when necessary.

Dozer is a free and open-source project, an alternative of Bartender which is a payware.

PS: Python3 is used to write the examples.

Remaining tasks

Get ready your own Drupal menu bar.

User interface changes

Drupalicon conquers your menu bar.

Release notes snippet

  • Target OS: macOS
  • Target readers : Drupal contributors/Core contributors.
  • Target goal: Happy Drupaling!

Drupal 8: Remove all nodes from the site programmatically

Mar 25 2020
Mar 25
Mar 24 2020
Mar 24

ADA web accessibility compliance ultimately requires that developers get into the weeds of the 78 guidelines that make up WCAG 2.1. Visual checks and quick scans provide a solid starting point, however, and serve as key indicators of underlying accessibility violations. 

Here’s an overview of the essential factors to consider with developing or auditing a website for accessibility.

  • Contrast
  • Non-text content
  • Link purpose
  • Labels and instructions
  • Information and relationships
  • Keyboard navigation

Contrast

Contrast ratio refers to the luminance of the foreground text against its background. This guideline states that text and images with text need to have to have a contrast ratio of 4.5:1 for small text (less than 18 points, if not bold, and less than 14 points, if bold), and 3:1 for large text. For the highest level of compliance (AAA), which is not required in most instances, the contrast ratio for small text needs to be 7:1.

Tools for checking color contrast ratios include contrast checker and WEBAIM’s Color checker.

Sample Contrast Checker Output

Sample output from a color contrast checker tool

Content that does not consist of a sequence of characters, such as images and form controls,  is covered by non-text content guidelines. Non-text content needs to have a text alternative that serves verbally describes the image, otherwise known as “alt-text.”  If the image is decorative or only used for visual formatting, then it can have a null alt (alt=””) or implemented in a way that it can be ignored by assistive technologies, such as a screen reader.

Sample code for the following image:

<img src=”location/of/image.jpg” alt="Illustration of man sitting in wheel chair and woman standing against background projecting a checklist diagram.">

Illustration of a man in a wheelchair and a woman reaching out with website wireframes in the background

Link Purpose

Screen readers users should be able to determine the purpose of a link based on the text alone.

For this reason, generic link text such as “read more,” “learn more,” or “click here” is not WCAG compliant. To avoid confusing those who use screen readers, content editors also need to keep in mind that if the same link text is used more than one time on a page, the destination for those links needs to be the same.
 

Labels and Instructions

Clear instructions and labels need to be in place for controls that require user input. Instructions also need to provide specific formats, that indicate exactly how information such as dates, phone numbers, and email addresses need to be entered. 

Important points to keep in mind:

  • Labels should be properly associated to their specific fields
  • Related form elements should be contained in a fieldset and should have labels properly associated with them.
  • When input fields are compulsory they should be coded properly as required. Error messages should also be clear to users and contain instructions and sample formats on how to fill in the field properly.

Information and Relationships

The focus here is the semantic structure of the page as it appears to users of assistive technologies. 

Headings

Screen reader users rely on headings to navigate and scan content to understand the flow of information on a page. As such, headings should be logically structured within the H1 to H6 HTML hierarchy. There should only be one H1 heading on a page, and there should not be any skipping of the descending order of headings within that hierarchy. An H1 followed by an H3 might confuse a screen reader user into thinking that they skipped an important part of the content.

Tables

When a page contains a table or multiple tables, it is important that these tables be identified based on the data they contain. Tables should have captions that serve as the general description. It is sometimes an option to use  <summary> to supplement table descriptions, but this option is not widely supported by assistive technologies.

Keep the following points in mind concerning tables on a webpage: 

  • Layout tables should be avoided. When tables are used to format content, they might cause some confusion to screen reader users. Instead of using tables to format your content, use CSS.
  • Designate row and column headers to data tables using the <th> element. 
  • Associate data cells with the headers using the <scope> attribute.
  • Avoid nested tables. The more complicated the table, the more inaccessible it becomes.

Semantic Markups

Formatting is important for the look and feel of the page but the underlying code should contain the same information as the visual presentation of content. Headings should have proper heading markups. Lists should be marked with <ul>, <ol>, or <dl>. For emphasized texts use <strong>, <em>, <blockquote>, <code>, etc.

Landmarks

Landmarks provide another way for screen reader users to navigate a page. It has previously been recommended to use HTML5 and WAI-ARIA landmark roles together (e.g. WAI-ARIA role="navigation" on HTML5 'nav' elements) but with the widespread adoption of HTML5 this is no longer needed. There should be only one main landmark on the page, and all page content should be included in landmarks. 

The focus here is the semantic structure of the page as it appears to users of assistive technologies. 

 

Keyboard Navigation

Landmarks provide another way for screen reader users to navigate a page. It has previously been recommended to use HTML5 and WAI-ARIA landmark roles together (e.g. WAI-ARIA role="navigation" on HTML5 'nav' elements) but with the widespread adoption of HTML5 this is no longer needed. There should be only one main landmark on the page, and all page content should be included in landmarks. 
 

There's Much More to Learn!

Promet Source is passionate about ensuring the accessibility of online experiences for people of all abilities, while helping clients to avoid ADA Accessibility legal action. We’re available to help in ways that include training, development, consultation, support, and workshops.  

Contact us today to let us know what we can do for you.

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