Apr 03 2020
Apr 03

March was a crazy month and I neglected my regular updates. Between touristing my first time in London, recording #DrupalCampLDN in person, flying back home just hours before the UK travel ban kicked in, adjusting to life in quarantine, working with my team to convert #MidCamp to an all-virtual conference, coordinating with #NERDSummit to also go virtual the same weekend as MidCamp, and then recovering from what was very likely Covid-19 myself (all the symptoms, but not bad enough to get tested), I had my hands full.

I'm better now and life is returning to its new normal. Below are links to three separate March #Drupal events, for your viewing pleasure:

Enjoy!

Apr 03 2020
Apr 03

In a traditional Drupal website, Drupal is the end to end solution for serving users with pages. It is used to create, store and display content to the end-user. In a headless approach adding and storing are still done on Drupal but displaying is not.

Definition:

Headless Drupal is an approach to building Drupal websites, in which Drupal serves as the backend content repository. The frontend is built in different technologies and communicates with Drupal via an API. 

headless Drupal


In the graph, we can see that Drupal serves as the backend system. The frontend, which the client sees, is separate from Drupal. That is where the headless name comes from - Drupal does not have the top layer anymore (the head ;), but only exposes the APIs which the frontend consumes and uses as content sources.

The frontend can be built in various frameworks and programming languages. Mostly, however, this will be one of the below:

  • Javascript - vast majority of cases - frontends are mostly built on frameworks like React, Angular or Vue, which allow for quick creation of dynamic and interactive interfaces. If there is a requirement (eg for SEO purposes) to pre-render the pages on the server, Nextjs or Gatsby can help.
  • PHP - sometimes the frontend is built on a fast PHP framework like Symfony or Laravel. This would be done mostly when pre-rendering on the server is required. An additional upside is that since Drupal is built on PHP and uses Symfony, often the same team is capable of handling the frontend.
  • Any other - a website in any other technology which can talk to an API can consume content from Drupal. 

Why chose headless Drupal

There are many reasons why companies might choose to use a headless approach to Drupal. Below I will list the most common ones.

More consumers of content

These days brands communicate with their customers not only through their websites but via multiple channels. CMS, therefore, is not used only to send content to web browsers. It pushes content to various other places. You can read more about the changing marketing landscape in a post about Digital Experience Platforms

Drupal is fantastically positioned to be the source of content for various consumers. Apart from serving content for a frontend website, decoupled Drupal can serve content via an API to be consumed by various other mediums, in which the brand wants to be present:

  • mobile applications
  • IoT
  • kiosk displays
  • etc.

Microsite manager

Sometimes a company needs to create multiple websites which are separate (eg. one for each brand, event, promotion, country), but which will share a lot of content. In such a case, it might be easier to create one content engine (Drupal) which will deliver content to all the microsites. The microsites can be quickly created and closed whenever a need arises and the content can be contained in one content hub.

Need for an elegant UI

Drupal is fantastic for content creation, data storage etc, but it is written in PHP which is a server-side rendering engine. It the particular website or app or website requires a very elaborate UI or simply is interactive it probably has to be built in javascript.

Javascript allows us to create fantastic interactions which are easy to use for visitors and are fast. Libraries like Angular, React or Vue help developers quickly create complicated frontend applications. Progressive Web Applications - a standard published by Google is also gaining momentum and it requires an application to be built in javascript.

If you want to build an interactive web application, marrying drupal with a frontend Javascript framework is a really great option. For a tutorial, you can check out our article about combining drupal and react.

Diversification of teams

Drupal experts are very hard to come by. Some companies, to move quicker, decide to build the backend in Drupal and hand frontend off to a team specialising in a different technology, in which talent is more available or which is simpler to learn.

Another benefit of inviting various teams to work on one project is sharing best practices from various sources. This may results in much better end results than relying on one team to build the backend and frontend.

Reducing technological dependency on one platform

The bigger the system one builds on Drupal, the greater the reliance on it. Abstracting Drupal from serving the frontend, allows companies to be more dynamic in changing the frontend technologies, without having to rebuild or re-architect huge Drupal backends.

Many websites, which have to maintain a fresh, modern look undergo a re-design every few years. If the frontend is separated from the backend it is much easier to rebuild. In such cases, the overall cost of the website might turn out to be lower than if the Drupal website was being rebuilt.

Drupal is great for headless

Drupal is very often chosen when a headless CMS is required. The reason for this is because Drupal out of the box has most of the required functionality. It is one of the most mature CMSes and has fantastic APIs.

Drupal community is working very heavily to allow Drupal to be a great API-driven CMS. In 2016 an “Api First”  initiative was launched. Its aim was to coordinate the development effort to allow Drupal to be a fully headless CMS.

As of writing this, enormous progress has been made in allowing Drupal to serve and receive content via APIs. 

RESTful module

Since Drupal 8.2 there is a RESTful module available in Drupal core which out of the box allows for easy interaction with all standard entities available in Drupal (nodes, users, taxonomies, comments). Accompanied by REST UI module it allows for very fine-grained control of what can be accessed via the REST API and how.

Initially, this module was the standard for building headless Drupal installations. It comes however with a few pain points, what sometimes makes it quite difficult to work with.

  1. Returned data structures are by default derived from drupal arrays, which converted into JSON are not very user-friendly and difficult for frontend developers to navigate.
  2. Getting and liftering lists of entities it a bit troublesome. For each type of list and filter, a view in Drupal with particular fields and exposed filters have to be created. Frontend developers cannot easily ask for custom lists

Despite the downsides, RESTful was a fantastic step in the right direction.

JSON:API module

JSON:API module was shipped with Drupal 8.8. It has massively improved the REST experience with Drupal, making it an incredibly versatile system far superior to practically any CMS on the market.

JSON:API module exposes all entities in Drupal allowing for easy interactions, but it does so in a very elegant fashion:

  1. It is compliant with the JSON:API standard (https://jsonapi.org/) making it easy for anyone wanting to integrate with a Drupal website easy to understand the data structures without the need for a lot of custom documentation
  2. It allows to query for lists and filter by entity properties  and fields also following the JSON:API standard

The core JSON:API functionality is further extended by JSON:API Extras module, which allows for additional configurability of the endpoints.

The above features effectively turn Drupal into a super robust backend for frontend applications, where all data structures can be created using the Drupal UI, whilst the REST endpoints are automatically working out of the box without a need for any programming work.

An in-depth comparison of the two modules can be found here: https://www.drupal.org/docs/8/modules/jsonapi/jsonapi-vs-cores-rest-module


REST in Drupal is baked deep into the system

What is worth mentioning is that in both of the above, modules the REST APIs are not added to Drupal as an afterthought. They are deeply baked into Drupal core. Drupal access control, preprocessing of values, hooks, events etc. All these are automatically taken into account when an access point is queried just as it were when a Drupal node was requested in a more traditional fashion by accessing a URL via the browser. 

This gives Drupal a massive edge over other CMSes. Using REST, you can still extend and alter default behaviour in any way you want!

Headless vs progressively decoupled

In this article, we are discussing headless Drupal, but it is also worth mentioning that it is not the only way to add interactivity to a Drupal website. Another option is to create a progressively (or partly decoupled) Drupal architecture.

Progressive decoupling is an approach closer to a typical Drupal setup, where the initial request to the server is managed by Drupal and the page send back is assembled by Drupal. On the page, however, we embed interactive elements build in javascript, which then fetches data it needs by calling a REST API also provided by Drupal. 

This approach might make sense in the following scenarios:

  • Most of the website is not interactive but there are a few highly interactive elements which require Javascript.
  • The website uses external data sources which should be presented to the user but do not come from Drupal and are not well suited for Drupal (eg. time changing stock quotes) which can be pulled directly from the source by a JS app embedded in Drupal

If you are not sure which solution to choose, there is a great post by Dries Buytaert on how to decouple Drupal in 2019.

Important considerations

Development is more complicated and more expensive

A Headless infrastructure is more complex than a traditional Drupal website. This can cause additional difficulties and can increase costs. Deciding on a headless, you should consider whether the benefits outweigh the costs. 

Managing multiple teams

In a headless Drupal, there are 2 separate components (frontend and backend) and these have to be developed (at least to some extent) in coordination. Quite often, there will be separate developers or teams (backend and frontend) working on the website. Sometimes these are 2 different companies. This requires coordination and much more communication because data models have to be agreed, endpoints created and tested. It is true that in Drupal many of these might be available out of the box, but most probably there will be requirements for some custom ones.

Higher overall development costs

Overall development time will probably be higher since we now build 2 systems, and therefore development cost will also be higher than that of a comparable standard Drupal website, especially taking into account the coordination effort.

Higher subsequent maintenance costs

Maintenance of a decoupled system is more difficult. Tests are more important when you rely on REST APIs because changes to one system might make it not compatible with the other.

Deployments might have to be more orchestrated where changes to multiple both systems are deployed all at once. Alternatively, multiple versions of an API might be maintained, but that also adds to the cost. All of this might increase maintenance costs.

Also, security releases will be required more often since there will be a need to patch not one but at least 2 systems.

SEO (and other metadata consuming engines)

Google becomes better and better in indexing javascript content but still, it is safer and much more effective to be able to provide it all the content on the first request to the main URL. If your website heavily relies on traffic from search engines, a decoupled approach might not be the best solution.

You should also take other services into account. For example for content to be nicely shareable via Facebook and Twitter, each piece of content has to have a separate URL and what is also important, must return the basic data obtainable without javascript. At least for now, Facebook and Twitter when you share a link there, prepare the preview by querying the link without enabling javascript. The title, image and description information should, therefore, be available without the need to enable javascript.

Solutions:

Shareability - returning metadata information on routes

For Facebook and Twitter, it is enough to return a small part of websites content on each route. This can be even done, and sometimes is, by a simple script in a server-side language (in PHP or python etc) which, depending on the route queried, returns different metadata. The server, instead of serving a flat HTML file with a js application, parses a script and returns identical HTML with just the meta tags varying.

SEO  - Server-side rendering

For SEO purposes the above approach can also be used, but typically another way is more efficient. Assembling a complete page with content often requires quite a lot of logic, which then has to also be available in the frontend application. Writing the same page assembling logic both in a server-side language and then in javascript for the front-end does not make sense.

The developer community-created open source javascript frameworks based on React, which allow for the creation of javascript applications which render the page on the server and then enrich it with slick UI in the frontend. There are 2 most commonly used frameworks:

Both of these offer similar functionality and allow building of super-fast websites assembled in the backend and working super smoothly in the frontend. 

From Drupal perspective, development of a headless CMS is identical for a typical single page application.

Loss of some of the Drupal functionality

Drupal out of the box provides a lot of functionality. If Drupal is kept in the backend, a lot of this is no longer available. In particular:

  • Layout management  - drupal provides a highly configurable page layout management with region definition and an ability to place elements in various parts of the page without the need to code them in (eg placing a search window in the header or a menu in the footer). 
  • Account management screens- Drupal provides register, login, password reset functionality out of the box. If we intend to allow users to register, we will have to implement all the forms and connect them to the APIs.
  • Preview - If we create content in Drupal, we as an author can preview it before it is published. In a typical headless setup especially if content is available via many channels, the preview of all is not available. Often editor adds content without seeing the end result. If needed, it has to be separately architected and created to allow editors to preview their creations.

Summary

Headless Drupal is an interesting approach to build feature-rich interactive websites or build content hubs which power various content consuming websites and media. It is however not without disadvantages and careful consideration should be made before choosing this path. Hopefully, this article gave you sufficient information to chose. If not, we are always happy to consult your Drupal project.

Give us a shout!
 

Apr 03 2020
Apr 03

We're starting another new series of interviews in 2020; in addition to our open-source community interviews, we're now introducing the Business Leaders Interviews series! This is the place to get to know more about the digital and agency business, and get exclusive insights into the unique approaches and challenges of some of the leading digital native companies. 

Our first business leader to be featured is Tiffany Farriss, CEO of the digital consultancy Palantir.net. We spoke with Tiffany about the power of the Drupal CMS and being digital native, and discussed the current global crisis and how it necessitates a shift in the way we approach remote work. 

1. Tell us a little about yourself and your company. How did you get into the agency business?

I’m Tiffany Farriss and I’m the CEO of Palantir.net. We’ve been working with web design and development since 1996, so this will be our 24th year. It’s one of those stories, like most firms of our age, it happened at that intersection between passion and curiosity. 

Because it was so nascent as a profession, people just started coming to you because you could do things, and then it took off and snowballed because we were just really curious about it.

So, George and I have been here the whole time. We were very passionate about this new medium as a tool: what its potential was for both communication and how it was both similar to and completely different from any of the other tools that existed.

2. For those who haven’t heard of it, what is the best way to describe Palantir?

We consider ourselves a consultancy rather than an agency. We’re a consultancy for complex digital systems; we focus on solving really gnarly problems, and we use technology as part of how we co-create solutions with our clients.

We bring the expertise that we have both in terms of the technology solutions, many of which are open source, as well as the process through which we problem solve in an agile manner.

Our clients bring their deep expertise in their sectors of experience. We traditionally work in institutional non-profits: universities, hospital systems or even large non-profits or large government agencies, such as the Commonwealth of Massachusetts, the state of Wisconsin, etc. 

These are the kind of institutions that have a tremendous amount of knowledge that they need to be able to communicate and share with others, who need to be able to discover that information easily, but probably don’t have a lot of time to invest in that search. So, we really want to focus on helping people get what they need quickly.

What’s interesting about the work that we do is when we’ve done our job well, no one notices it. When something is well designed, you don’t notice how intuitive and easy it is to use. I really like that aspect of what we do. I think it’s when we’ve not quite gotten it right yet, that’s when people are aware of the kind of work that we do.

It comes from this mindset of continuous improvement: there’s always something to be learned, whether it’s on the technical side or on the operational side, or how we enable our clients and partners to be able to better communicate and engage with the audiences that they serve.

Our clients do a lot of good in the world, and we want to help be that enabling tool for them to do that. Technology is one of the ways that we do that but we also help them think differently about how they leverage those tools as a communication pathway. 

3. What is the main focus of your company? What makes you stand out among the competition? What is the unique offering you are able to provide to your clients?

We are a really good fit for certain kinds of problems. The ones that we’re best suited to solve are really complex in nature, with a lot of integrations, or lots of different departments, etc.

We specialize in working with organizations at various stages of their digital transformation: including organizations that have not yet embraced their online channels as part of their strategic communications with their audiences or that have not yet embraced digital throughout their organization as a key strategic and operational pillar.

Those are the kind of organizations that benefit the most by working with us, because we drive results not only in terms of the outcomes for the web platform and the CMS, but also from our support of how they evolve their internal process, as they adapt and learn how to work in a more agile and collaborative way. Those are the kind of engagements that realize the long-term benefits from working with Palantir.

It’s not just the output of the work, which is obviously the most immediately tangible, but the outcome of the process, the ways in which we focus on improved user engagement. We help you create metrics for that, so you can measure the success of your site and then continue to iterate over time, to continue to serve those users better.

But there are also the outcomes in terms of the ways in which your internal team thinks differently and is able to engage differently with each other. As digital becomes a key platform for your organization, it becomes a very different way of working within the organization.

We’re not a transactional vendor, we are a deep partner, and we’re able to serve the full lifecycle, but our engagements take many forms: whether it’s a quick engagement where we jumpstart a conversation within your organization with a week long workshop on Federated Search, or a coaching come in and help get you started with your own implementation of it or handle the entire project from strategy and design through execution, we’re able to match our services to the need and capacities our clients have.

Ultimately, if you have a complex problem, we’re here to help you with that, whether you need us to supplement your internal team with a managed support relationship where you need to know that somebody’s got your back for the long haul, or you have a 9 to 18 month project where you need someone to step in to deliver everything from your content strategy, to your brand platform, to your style guide and your content management system. It’s not about the size, it really is about the complexity of what you’re looking to do and the partnership that you’re looking for from us.

We optimize for what we call “focus and flow”. We’re looking for those opportunities so that our team can embed into and collaborate with your team in a way that allows us to bring our deep expertise, and then help you bring your deep expertise at a place where we can really work together and create some amazing outcomes.

4. How much of your offering is in digital? What services do you provide that involve digital and which one would you highlight?

We’re digital native, and we’re open source myopic; we do the majority of our consulting work within and around Drupal and adjacent technologies, so that’s really why people come to us; they know us for working with Drupal and on Drupal. 

We already had the client base, and like most firms of our age we had our own CMS which we had written and rewritten several times by the time we discovered Drupal.

And it was really a testament to Drupal’s flexibility and its powerful community that we decided it was certainly a benefit not only to us but to our clients for us to put our mindshare behind that community. I think we’ve given a lot and we’ve certainly received a lot from that community. It’s one of the best business decisions that I’ve ever made.

5. You’ve just mentioned that you’re especially investing in and relying on the open-source Drupal CMS. What does that solution bring to the table for your clients?

In our experience, the really complex, large-scale projects that we do have multiple levels of integration, and Drupal has for many years been the dominant glue layer for a best-of-breed stack.

It does a better job of consuming and distributing data than anything else, and so we increasingly have more and more systems, whether it’s content management systems or CDNs, or e-commerce or marketing systems - there’s any number of systems that you can be asked to integrate at any given time.

Drupal just does a better job of bringing all those disparate data sources together, and then knitting it up and then spitting it out in a way that is coherent and omnichannel.

It allows you to be able to consolidate an infinite number of different systems and then be able to push it out in an infinite number of ways. I’ve never seen another product that really has that flexibility, that robusticity and that reliability.

Drupal 9 is only getting better on that front, so from that perspective the flexibility of Drupal has always been just unmatched. And what I’ve always appreciated is just that interoperability; there are things that Drupal does natively, but you’re never locked into those things. So, while Drupal does have a frontend, if you wanted to go to a React frontend, great, go ahead and do that in a decoupled way.

It’s that ability to make the best choice regardless of channel, use case, or infrastructure, that makes Drupal just such a utility player without sacrificing performance or security.

Also, from an implementation and a cost perspective, Drupal is unmatched - rarely is there a software product that just ticks the boxes all along the decision-making matrix when you’re trying to compare it.

The only aspect where we have to work a little harder on Drupal is that it doesn’t have the sales team that Adobe or other commercial products do. Nevertheless,  when the technical merits are so incredibly strong, and the flexibility to perform on the marketing side is also so strong, Drupal remains very compelling.

What I appreciate about the way Drupal does open source is its nice balance between innovation and stability. It is such an interesting project because it’s not “move fast and break things”, so you have that control, that reliability - you can trust that if you write something in Drupal, you’re going to get many years of use out of it.

But you also know that the community is continuing to innovate and to integrate new things, you can continue to innovate and to integrate new things, it feels like it’s a very future-proof choice.

6. What do you see is the biggest challenge in the industry right now? Why is that and what can be done to overcome it?

Well, there’s a high degree of uncertainty right now with the current situation. Everyone’s trying to figure out, are we headed into a global slowdown? Are we headed into a global recession, and if so, how bad will it be? 

I think that the globalization of all of our work has been a boon for so many years for all of us, whether it’s our companies or our open-source projects, that we’re all very much more interconnected than we used to be.

We’re certainly watching very closely what happens as all these technology conferences are canceled or postponed or moved online. Those are incredibly important events for a lot of us to do, including from the marketing perspective. So I think that that’s going to be a major shift, I think there’s going to be a lot of disruption this year - a lot of uncertainty, a lot of disruption.

So, that’s the number one biggest challenge I see this year, really navigating this disruption, trying to supplement online what we might’ve done in person. 

Fortunately, Palantir has been remote since 2015 when we moved everything up into the cloud and gave everyone the option to always work remotely if they wanted to. Our team has always been large and distributed, and we’re very used to working in an online way, so that’s not a big challenge for us. 

But we still do a lot of things face to face, so if over the next few months we’re not able to meet face to face with clients, for pitches or at in-person events, how might we supplement that in other ways, how might we use online channels in ways that we haven’t yet?

I think that’s a big opportunity for all of us to think about, because I know that those in-person events, those IRL events, were very energizing, particularly in and around open source, and also for marketing and new business purposes, for new clients and new potential clients.

We’ve been doing a lot of investment over the last few years in remote facilitation and how to make sure people are actually engaged, really investing in training for our team, so again I feel very well prepared in that way.

I mean, no one is prepared for this, this is not something I expected, but we’ve been really investing in our own transformation. We’ve worked in agile for many many years, as you would expect, but we’ve really been investing in becoming more agile organizationally.

There’s a system called the Core Protocols which is a way of working together that I have found in my own work and in our work here at Palantir translates really well to remote environments.

It’s just a suite of protocols that were documented to promote high performance among teams, so as our team adopted those protocols, reinforcing them has been very helpful for us, and we’ve been seeing those trickle over into our clients and have been sharing them with them. This is something that’s been really helpful.

There are a lot of things I’m watching as well. I was just reading recently that as the United States universities are starting to shut down and move their courses online, a lot of them have contracts with Zoom, so Zoom has issued a warning that we should all expect performance degradation, that they cannot handle the load if there are massive simultaneous meetings.

I think that’s going to be an interesting stress test in some of our cloud-based infrastructure, and also just our community infrastructure. My team is used to working from home, but what happens when your neighborhood which used to have a smattering of people working from home at the same time, and all are trying to be on video calls because the best practice is clearly to be on video call?

If you’ve ever tried to be on a conference call from home, they’re terrible, but a video call with your camera on is very different, it’s a different bandwidth load, so if we’re all trying to drink the milkshake from the same straw, there’s just a limited amount of what we can do. 

7. Where do you see your agency in the next three years? What is the big lofty goal you are pursuing?

There’s been such a tremendous response to not just what we do but how we do it. Right now, we’re the whole package; when you work with us, you get exposed to our agile ways of working and that’s an integrated part of the experience of working with us as consultants.

We don’t offer agile consulting as a product unto itself, nor do we really provide consulting in and around how to structure your organization to be agile. And that’s something we’ve invested a lot in ourselves, in our professional and growth opportunities and all of that.

So, I would not be surprised if we expand the consultancy beyond the digital to include some more organizational consulting as an offshoot of the work that we’ve done for ourselves and the services that are really being resonant with our clients. 

But, that remains to be seen. The organizations that we’ve worked with do so much good in the world that any way we can help them meet their mission, we’re going to want to do that. 

If anyone would like to learn more about us, you can do so through our website, or on Twitter - @farriss or @palantir.

Apr 02 2020
Apr 02

Corporate websites are often large and packed with many different functionalities. This makes building a website very time-consuming and, consequently, expensive. At Droptica, we have developed a way to build a corporate website on Drupal faster and cheaper. From this article, you will learn how we do it.

Your company's Drupal-based website does not have to be expensive

Drupal-based corporate websites are considered costly solutions. Developing high-quality Drupal websites from scratch using Drupal is labour-intensive, and the first effects of such a process are visible only after a few weeks of development works. Until now, only the largest companies could afford such an expense. 

That is why we decided to introduce ready-made Drupal-based implementation packages to our offer. An implementation package is a set of services and products selected so that they guarantee the client can build a complete high-quality website in a few weeks instead of carrying out a process lasting several months in the traditional model of building a website from scratch.

Each of our packages is based on our own Drupal distribution. We call it Droopler. Just moments after its installation, Droopler gives you powerful options and reduces the time it takes to build a website. By choosing our implementation package, you start with an extensive structure of pages, predefined visual elements and multifunctional menus. All of this is based on a professional technological structure, optimised in terms of SEO and speed of operation. 

Droopler 2.0.

Droopler's strength lies with the wealth of available (at the very start) elements 

Imagine that you can build your website just like you build toys from Lego bricks. You have ready-made parts and you just put them together. You do not have to be an HTML, CSS or PHP specialist. That is how Droopler works. Lego bricks are paragraphs. We have created a dozen or so. In addition, each one of them has several uses. So, you have over 100 different blocks to build every single subpage. These blocks fit together in any configuration and look nice whether you see them on a laptop or a phone.

For example, you can add a paragraph with a photo and a title, a paragraph with content, a paragraph with a gallery, and finally – a paragraph with a contact form. The process of creating such a subpage is very fast and intuitive. After selecting a given element, you just need to add the appropriate content, graphics or photos. 

If after some time or during the creation of the subpage you find that the order of the paragraphs used is incorrect, you can easily change their layout. Such a change requires only a few seconds of work. Droopler's capabilities mean that you can create different variants of every subpage. 

Marketers praise the ability of editing content in Droopler. The system saves them a lot of time. They can focus on effective management of corporate content, and not on solving problems with HTML or CSS.

What kind of a website will be created based on our package?

Droopler's capabilities are best seen live. The system's demo is available at https://demo.droopler.com/

This website shows that Droopler is a powerful tool for building large Drupal websites. The extensive main menu, product subpage, search engine and blog are just some of the basic functions available immediately. 

The demo shows a website of a fictitious company that needs a wide range of functionalities and modules on its website. The broad offer, news section, many types of content blocks, or extensive contact subpage, work perfectly on smartphone and laptop screens. 

Advanced features mean that even a company listed on the stock exchange will find here all the elements necessary to create its perfect website.

Droopler Demo

An implementation package is a good basis for a website's growth

Our ready-made implementation packages can be treated as non-expensive website starters, which look good right after the installation. Many small companies will be satisfied with the modern look that Droopler provides from the very first moments of operation – without changing anything in the code.

For medium- and large-sized companies, our Drupal distribution may constitute a great foundation for building unusual and non-standard solutions. 

Saving the costs at the initial stage of creating a website will be attractive for any kind of a business operation. Especially due to the fact that the money saved can be used for non-standard functionalities that are key and distinguishing for a given company.

It is this well-thought-of versatility that makes each of our packages a highest-quality open-source product. 

Droopler is flexible in terms of extension

We thought about the ability to modify Droopler from the very beginning of its development. The structure and nature of our distribution allow you to easily create non-standard and bespoke solutions. 

The developer does not create the code from scratch, but using ready-made elements, he can freely remodel, modify and adapt them to the client's needs. Such an approach saves time and – as a result – money while maintaining high quality.

[embedded content]

Drupal will make your company website the best

When you decide to build a company, website based on our experience with Drupal, you can be sure that we offer a product of the highest quality. The solutions we provide as part of our implementation packages are the work of the best world-class developers specialising in Drupal. 

Our experience gained over the years while working with large global companies is responsible for the fact that today we can provide an open-source product of similar quality, available to a wide group of clients. 

You can find the full offer of our implementation packages here.
 

Apr 01 2020
Apr 01

argument-open-source

Back in 2013, when I first joined Mobomo, we migrated NASA.gov from a proprietary content management system (CMS) to Amazon Cloud and Drupal 7. It goes without saying, but there was a lot riding on getting it right. The NASA site had to handle high traffic and page views each day, without service interruptions, and the new content management system had to accommodate a high volume of content updates each day. In addition to having no room for compromise on performance and availability, the site also had to have a high level of security. 

Maybe the biggest challenge, though, was laying the groundwork to achieve NASA’s vision for a website with greater usability and enhanced user experiences. If NASA’s audience all fell into the same demographic, that goal probably wouldn’t have seemed so intimidating, but NASA’s audience includes space fans who range from scientists to elementary school kids. 

Our mission was to create a mobile-first site that stayed true to NASA’s brand and spoke to all of the diverse members of its audience. A few years later, we relaunched a user-centric site that directed visitors from a dynamic home page to microsites designed specifically for them.

Making Space Seem Not So Far Away

NASA.gov includes data on its missions, past and present. To make this massive amount of data more user-friendly, we worked with NASA to design a site that’s easily searchable, navigable, and enhanced through audio, video, social media feeds, and calendars. Users can find updates on events via features such as the countdown clock to the International Space Station’s 20th anniversary. NASA.gov users can also easily find what they need if they want to research space technology, stream NASA TV, or explore image galleries. 

The NASA.gov site directs its younger visitors to a STEM engagement microsite where students can find activities appropriate for their grade level. The site also includes the NASA Kids’ Club where students can have some fun while they’re learning about exploration. For example, they can try their hands at virtually driving a rover on Mars, play games, and download activities. 

Older students with space-related aspirations can learn about internship and career opportunities, and teachers can access lesson plans and STEM resources.

How to Make it Happen

To successfully achieve NASA’s goals and manage a project this complex, we had to choose the right approach. Some website projects are tailor-made for a simple development plan that moves from a concept to design, construction, testing, and implementation in a structured, linear way. The NASA.gov project, however, wasn’t one of them.

For this website and the vast majority of the sites we develop, our team follows DevOps methodology. With DevOps, you don’t silo development from operations. Our DevOps culture brings together all stakeholders to collaborate throughout the process to achieve:

Faster Deployment

If we had to build the entire site then take it live, it would have taken much longer for NASA and its users to have a new resource. We built the site in stages, validating at every stage. By developing in iterations, and involving the entire team, we also have the ability to address small issues rather than waiting until they create major ones. It also gives us more agility to address changes and keep everyone informed. This prevents errors that could put the brakes on the entire project.

Optimized Design

NASA.gov has several Webby Awards, and award-winning web design takes a team that works together and collaborates with the organization to define the audience (or audiences), optimize the site’s navigation and usability, and strike a balance between the site’s primary purpose and its appeal. 

Mobile-First

Because NASA.gov users may be accessing the site from a PC, laptop, tablet, smartphone, or other device, it was also pivotal to use mobile-first design. Mobile-first starts by designing for the smallest screens first, and then work your way up to larger screens. This approach forces you to build a strong foundation first, then enhance it as screen sizes increase. It basically allows you to ensure user experiences are optimized for any size device. 

Scalability

NASA.gov wasn’t only a goliath website when we migrated it to Amazon Cloud and Drupal. We knew it would continue to grow. Designing the site with microsites that organize content, help visitors find the content that is most relevant to their interests, and enhance usability and UX informed a plan for future growth. 

Efficient Development Processes

DevOps Methodology breaks down barriers between developers and other stakeholders, automates processes, makes coding and review processes more efficient, and enables continuous testing. Even though we work in iterations, our team maintains a big-picture view of projects, such as addressing integrations, during the development process. 

Planned Post-Production

DevOps also helps us cover all the bases to prepare for launch and to build in management tools for ongoing site maintenance. 

What Your Business Can Learn from NASA

You probably never thought about it, but your business or organization has a lot in common with NASA, at least when it comes to your website. Just like NASA, you need a website that gives you the ability to handle a growing digital audience, reliably and securely. You’re probably also looking for the best CMS for your website, one that’s cost-effective and gives you the features you need.

Your website should also be designed to be usable and to provide the user experiences your audience wants. And, with the number of mobile phone users in the world topping 5 billion, you want to make sure their UX is optimized with mobile-first design. 

NASA’s project is also an illustration of how building your website in stages, getting input from all stakeholders, and validating and testing each step of the way can lead to great results. You also need a plan for launching the site with minimal disruption and tools that will make ongoing management and maintenance easier. 

You probably want to know you are doing everything you can to make your content appealing, engaging, and interactive. You may think NASA has an advantage in that department since NASA’s content is inherently exciting to its audience.

But so is yours. Create a website that showcases it. Not sure where to begin? Click here and we’ll point you in the right direction.

Apr 01 2020
Apr 01

Drupal administrator interface was never considered great in terms of catching up with modern design and standards. And if you are one of those people who always use "Seven" as Drupal administrator theme then this is the right time to switch.

Here are some of my recent favorite theme options for the Drupal 8 administrator interface for the next level admin experience.

1. Adminimal - Responsive Administration Theme

Adminimal - Responsive Administration Theme

Adminimal is my favorite and the most popular contributed administrator theme for Drupal backend. Adminimal admin theme uses seven themes as a base theme and makes it less prone to bugs.

It is highly recommended to use the “Adminimal Admin Toolbar” which provides minimalist style to Admin Toolbar in Drupal admin.

Project Page: https://www.drupal.org/project/adminimal_theme

2. Mediteran administrator

Mediteran administrator

"Mediteran administrator" is a bluish, clean and modern admin for Drupal 8. It is a responsive theme admin theme that is optimized for mobile, tablet and desktop.

You can also combine the "Mediteran administrator" theme with "Admin Toolbar Mediteran" to get the clean look on the Admin Toolbar as well.

Project Page: https://www.drupal.org/project/mediteran

3. Claro

Claro Theme

Claro is an all-new admin theme for Drupal 8 added from 8.8.0 release. Claro theme brings a modern admin design to drupal out of the box.

Claro admin theme is built in compliance with Admin UI & JavaScript Modernisation initiative to produce a re-imagined content authoring and site administration experience.

4. Material Admin

Material Admin

"Material Admin" is based on Google Material Design and modernize Drupal 8 administration UX and design.

This admin theme takes the mobile-first approach and great for people who want to use Drupal 8 backend from mobile.

Project page: https://www.drupal.org/project/material_admin

Let me know in the comment which one is your favorite or you are still not comfortable switching away from the "Seven" theme.

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 on 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 this and more:

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

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 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
  • 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 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

Drupal 9.0.0-beta2 was released this week and there are only 63 days to go for Drupal 9.0.0's release. Many product developers, distribution authors and so on are now looking at what is left to be Drupal 9 compatible and which of their dependencies are doing what where. So effectively tracking a list of drupal.org issues somewhere is on many people's minds. While you can follow issues on drupal.org that only works for your personal needs. Actually Surabhi Gokte asked me yesterday about tools for group issue tracking, and I decided to write up a quick blog post because the answers are likely useful for many people. Here are two public and two possibly private ways to track drupal.org issues. I've used each in some form throughout my years with the project and you may find some of them useful.

Public: use a drupal.org META issue

Drupal.org project developers, this is a good way to track your tasks belonging to a larger goal like Drupal 9 compatibility. Create a regular drupal.org issue for your project and use the issue link filter. [#123456] is the format to use to link to issues and get their title and even status colors represented on your issue. The only thing you need to keep an eye on is that issue summaries are cached, so as the status/title of listed issues are updated, that is not reflected on the summary. As you are likely to adjust the list as things get done and new things are discovered, the status and titles of the listed issues should get updated in the meantime. An example of this technique is [META] Requirements for tagging Drupal 9.0.0-beta1. This technique allows anyone with a drupal.org account to help maintain your list of issues.

Once you have a META issue like this for Drupal 9 compatibility, please link it from your Drupal 9 plan on your project page, see:

65 days to go until the Drupal 9 release on June 3, 2020.https://t.co/JmRQ2Cdaun project maintainers, now is a great time to indicate your Drupal 9 plans! Edit your project page and fill in the Drupal 9 plan field to help contributors help you the most effectively pic.twitter.com/QrBpZCDgiW

— The Drop is Always Moving (@DropIsMoving) March 30, 2020

Public: use Contrib Kanban

Contrib Kanban is a great service developed and ran by Matt Glaman of Centarro. You can register and create custom boards based on a list of issues, such as this kanban board for Umami's Spanish translation. Only you will be allowed to maintain your issue list but the results are shown very visually and dynamically in a kanban board style.

Public/Private: use any tool with the Drupal issue Chrome browser extension

Matthew Grasmick built the Drupal Issue Chrome browser extension which turns links to Drupal.org issues on any webpage to their colored and titled forms very much like in the META issue method. This will pull the data for issues live, but only people with the extension installed will see the titles and statuses. You can use this for private tracking or public tracking. We use it at Acquia to track some drupal.org issues through Jira tickets.

Public/Private: use a scripted spreadsheet

This method could work in any scriptable spreadsheet system. We used it extensively at Acquia with Google sheets and I believe it originates from Andrea Soper (ZenDoodles) and Jess (xjm) from several years ago. Set it up like this:

  1. Assuming an empty spreadsheet, designate a column for issue numbers. You will use this column to enter the ID of issues you want to track. Let's assume this is column E for the rest of the example. Also let's assume you use the first row for header text for the columns.
  2. Add this to F2: =IF(E2="","", regexreplace(importxml(hyperlink( concat("https://www.drupal.org/node/", E2)), "//*[@id='block-project-issue-issue-metadata']/div/div/div/div/div/text()"), "\n","")). This column will be your issue status.
  3. Add this to G2: =if(E2="","", hyperlink( concat("http://www.drupal.org/node/",E2),concat("#",E2))). This will be your issue link.
  4. Add this to H2: =if(E2="","", substitute(regexreplace(importxml(hyperlink( concat("https://www.drupal.org/node/", E2)), "//title/text()"),"\n",""), " | Drupal.org","")). This will be your issue title.

At least in Google sheets, you can hold-drag these values to fill in the rest of columns F-H with appropriate computed values. You can also apply conditional styling to status values, etc. A clear benefit of this approach is that you can assign tabular metadata to issues, like your private severity or priority information or assignments within your company as to who is planning to look into it without getting into a priority argument on the issue.

By the way it would definitely be more reliable to pull this data from the Drupal.org REST API. We used this method extensively for years at Acquia to track high priority issues leading up to Drupal core releases. However we are not currently using this method and I did not go to convert the logic from our old sheets, so improvements welcome.

These are methods I used that are still available and work fine. Do you have better ways to do issue list tracking? Let me know in the comments.

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.emote meetings may seem to represent constraints, but they can provide 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 doc at one time for meeting collaboration.

InVision

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

Prioritize & Gain Consensus

Working with the group to prioritizing items that come up during the discussion helps to gain group consensus. Act as a facilitator for the meeting and 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

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

With our clients, we are continuously experiencing a growing demand for delivering more interactive web applications and personalized content across platforms.  

We have noticed there has been a significant rise in the adoption of decoupled content management architecture or at least there is curiosity as to how the concept would make a difference to their business. 

Among other things, there is some apprehension among the marketers on how decoupled architecture would impact their work and performance. While we know that through decoupled architecture marketers can actually use the freed-up content anywhere across devices and platforms without remaining handcuffed to the front-end of your website design. There is still some haze over its impact on SEO. 

Through this blog, we attempt to answer when to consider decoupled architecture, its pros and cons, and some tips to boost SEO while going decoupled.

Advantages of Decoupled Drupal

Decoupling Drupal offers plenty of benefits. They are-

 

  1. Developers can focus on innovation

    The decoupled technique facilitates developers to use the leading frameworks and tools of their choices, such as Angular.js, Backbone.js, Meteor,js, Node.js, or Ember.js. Besides it is also possible that they might be interested in using the React library for creating user interfaces, Redux for tracking state and use Google’s AMP or Polymer tools for mobile applications.
    On the other hand, traditional CMS confine developers with the language and frameworks built into the CMS.

  2. Enables omnichannel delivery

    With content available as a separate entity in a decoupled CMS, content managers and editors can easily create and push content while developers focus on presenting content for omnichannel delivery, such as native iOS and Android apps,

    Wearable devices such as smartwatches, streaming apps, and new voice-activated virtual assistant devices, like Amazon’s Echo Alexa or Google Home, and the Internet of Things.

  3. Improves reliability and performance

    A traditional CMS compels you to be satisfied with whatever your CMS vendor provides or not. In such a scenario, it becomes difficult to repurpose your content for multiple front-end platforms.
    However,  scaling is much more effective in a decoupled CMS since it eliminates all the bottlenecks that are likely to be encountered in a traditional CMS. In fact, many CMses can automatically adjust the cloud infrastructure to match demand and improve performance significantly.

  4. Saves time

    The separation of content from the presentation layer allows developers to update and redesign the site in as little as a day, without impacting the content editors. Besides, while upgrading a decoupled CMS, it is only the back and front-end of the CMS application which is updated, and not the content and your website.
    This signifies that the content team can simultaneously work on creating and editing your site, thereby saving loads of time and money of both developers and content editors.

Disadvantages of Decoupling Drupal

SEO requires a basic understanding of how sites are indexed and crawled by search engines. This works differently for different CMSes due to the varying process of creating pages and storing data.

Proper SEO means you are following the guidelines set by search engines from both technical and on-page perspectives. This is especially crucial for Drupal due to its focus on infinite functionalities and the limitations that can quickly arise when implementing advanced features.

  1. Restricts metadata outputs 

    The foremost challenge that comes up with Decoupled Drupal systems is the data fed to default metadata editor won't be visible to search engines. For instance, Drupal 8 has a built-in meta tag module, but in the case of decoupled Drupal, the data doesn't get pushed to the front-end as it should be. 

    This makes it difficult for search engines to index the pages and content except when the developer restores the functionality of the particular module.

  2. Sitemaps & URLs with decoupled Drupal
    Typically, decoupled websites prefer using a third-party XML sitemap application because recreating such kinds of features and functionality through custom development can be exorbitant and may go out of budget.

    Irrespective, search engines don’t know how to reach your site, crawl it, and figure out what to index.

    five circles linked to each other                                                        Source: DrupalCon

  3. Increased complexity
    Re-writing the front-end of your website from the ground up indicates that you are already losing out on CMS’s presentation layer by default. Thus, you need to discover how your front-end would interact with your back-end CMS, thereby setting up a strong demand for Drupal experts to configure your CMS and front-end developers with totally different skill sets to deliver the actual end-user experience.

When to Consider Decoupling?

There is no right or wrong time to go decoupled but you must consider all these factors before implementing the solution. Should you be able to meet the requirements, then certainly it’s time to move ahead-

  • Your Team
  • Interacting with your data
  • Hosting
  • Serving content to multiple clients
  • Metadata
  • Redirects
  1. Does your team possess the right set of skills?

    Decoupled Drupal can be accomplished if the developers in your team are comfortable with splitting the project into multiple codebases which later can be naturally coalesced around their part of the tech stack. These sub-teams will have to communicate effectively with others to negotiate request/response interaction contracts.

    You’ll also have to keep a tab on developers’ skill levels like their expertise and experience levels is evenly distributed, whether project managers can handle multiple projects with separate teams, and your DevOps team can handle the extra complexity of satisfying the infrastructure needs of different applications.

  2. How do you interact with data?

    While decoupling Drupal, you should be able to decide whether Drupal should be the owner and mediator to manage your content or not. The problem does not arise when your content is in Drupal, but when other services complement your data and your front-end application wants to communicate with other services directly or through Drupal API.

    So, a decoupled approach works only when you have a strong grasp on your data needs and the roles are clearly defined for which services are responsible for each piece of data.

  3. Does your hosting partner support new architecture?

    Evaluate if your current hosting provider can support the decoupled architecture in the very first step. Dig more details on security restrictions, data migration restrictions and any existing long term contracts that may obstruct this process. 

    This separated hosting offers the ability to put the backend application behind a VPN or firewall to prevent any unlawful entry.

    So, a decoupled approach comes handy when your hosting provider can host a non-Drupal front-end, add caching between the various parts of the new architecture, and lastly, you want to restrict editorial access to users within an internal network.

  4. Do you serve content to multiple clients over multiple platforms?

    Decoupling Drupal ensures that you can create content once and publish it on multiple platforms, however, it adds to the complexity of the architecture. For instance, if there is a need to allow editorial control for a custom color scheme per client site, will content be displaying the same title, published date, etc on all the sites and the same URL alias on all sites? If yes, then how will duplicate content impact SEO, and how will canonical meta tag values be sent across sites.

    Decoupling can be thought of as an option when you need to create and manage content in a single application and disseminate it to various platforms. Or when you have an editorial process that demands a low degree of layout control and you are prepared to handle the complexity of managing canonical alias values and other metadata to meet your SEO needs.

  5. When metadata is crucial

    There are plentiful metadata used to build every web page on the website. This can consist of ad targeting values, meta tag values, and other microdata such as JSON-LD. These web issues might fall under front-end issues but if the content is supposed to be used on multiple platforms, they need to be included in back-end concerns too.

    So, decoupled architecture should be considered when content shares ad targeting data logic and other metadata across multiple consuming platforms.

  6. When no redirect control required by editorial team

    Redirect logic is an essential part of routing architecture that becomes complicated by going decoupled. This holds especially for those sites having multiple or complex redirect needs that must be managed in a single redirect or where editors demand more control over the redirects.

Therefore, the decoupling approach should be considered when there is no redirect control asked by the editorial staff with all redirects being taken care of by broad server-level rules. Besides, you should have an architecture that supports combining multiple redirect rules into a single redirect.

Tips and Tricks to boost SEO

There are a few tricks mentioned that can help you boost your SEO-

  1. Language differences

    Using different coding languages at front-end results in different interactions of web elements. Given this, SEO can have a huge impact on it - the way a site is crawled and how users interact with it.
    Per this  report, JavaScript is the most favorable among developers with 69.8% of respondents followed closely by HTML and CSS.

    Thus, it is essential to understand how JavaScript can affect SEO as search engines often fail to use JavaScript or other complex code properly. This could lead to potential loss of rankings and page value.

    Developers should focus on executing coding best practices and not simply opt for a mess of CSS styles and JavaScript implementations. 

  2. Content parsing with structured data (Schema)

    Well- structured data from schema.org’s microdata vocabulary enhances the way search engines evaluate the content of your website. Website owners need to highlight content and define its context.

    By doing so, the probability of displaying content in featured snippets (rank zero) increases extensively, thus improving user experience.

    There are two ways to implement Drupal schema. Either you can initiate the markup process manually or can implement it automatically through the installation of a module.
    By choosing a manual option, you’ll have to do HTML code tagging with schema properties alongside defining a relevant schema.org page.

    And for implementing it automatically, simply install the Schema.org  Metatag module. It will facilitate content authors to add schema values as JSON LD in the head of the web pages.

  3. Site speed is important

    Site speed should be of prime importance for websites too as the way it is for search engines. There are 3 major areas from SEO point of view that can result in quick and calculable site speed increase-

         a. On-page asset delivery
         b. Page design
         c.  Hosting infrastructure

    However, with hosting, it has become significant to have a competent system operations admin behind your infrastructure to benefit the most out of it.

    For example, caching helps in speeding up page delivery while applications like NGINX and Varnish, though tricky to configure,  help speed up asset delivery.

    Thus, you should focus on time to render and time to the activity. This will provide you the metrics that really impact the user experience.

Summing-up

Decoupling Drupal may not be the right solution for everyone because it certainly brings some challenges with it like increased development time and blown-up budget.

However, if you want to revolutionize your users’ experience through compelling personalized journeys, make your business secure, scalable, innovative, and future-proof by integrating with the latest technologies; then decoupling Drupal is worth trying, considering the challenges overshadowed by its benefits.

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 31 2020
Mar 31

Drupal 8 gives developers and site owners the flexibility of creating bespoke components that can be put together to build compelling digital experiences. Themes are Drupal’s design blocks that represent the visual appearance of a website. Drupal 8 comes with choices of core themes and third-party themes. However, if none of them cut it for you, you should probably be looking at Drupal 8 custom theme development. With Drupal 8 custom themes, you can tailor-fit your design to the exact requirements.

Drupal 8 provides Bartik as the frontend theme, but if you need a Drupal 8 custom theme then you can create your own Drupal 8 theme development, thus improving your Drupal theming skills. The easiest way to really understand Drupal 8 theme development is to practice and create one from the ground up.

Custom Drupal Theme

Getting Started with Custom Drupal 8 Theme Development

Let’s get started with creating a Drupal 8 custom theme for our Drupal website.
STEP 1 : First, we need to create a custom theme under ‘web/themes/custom’ folder. We will name the folder as custom_theme.  

Create Custom Drupal 8 Theme folder   
      Create Custom Drupal 8 Theme folder

STEP 2 :Next, we will need to create an info.yml file. We need to specify the basic keys for it. Let us specify it over here.

Create an info.yml file
       Create an info.yml file
CODE:
name: Custom Theme
type: theme
description: 'Custom Theme for My Website.'
package: Other
core: 8.x

STEP 3 : Now,let’s create alibraries.yml file to specify all the libraries we need (CSS AND JS) for our custom Drupal 8 theme.We will also create CSS and JS directory and its files to link it in here. We are going to name the library as global-styling.

Create a libraries.yml file
       Create a libraries.yml file
CODE:
global-styling:
version: 1.x
 js:
js/script.js: {}
 css:
theme:
css/style.css: {}

STEP 4 : After creating the libraries.yml file, we need to link it to our theme.For this, we are going to add it in the info.yml file which will then apply it to the whole theme. 
 

Linking the libraries.yml with the custom Drupal 8 theme
        Linking the libraries.yml with the custom Drupal 8 theme
CODE:
libraries:
- custom_theme/global-styling

So, the key will be libraries and path will be the theme name - ‘custom_theme’ / library name - ‘global-styling’.

STEP 5 : Next, we need to inherit the ‘Base Theme’.In our case, we will inherit ‘classy’ theme which is a Drupal core theme. So, the key will be base theme in info.yml. 

Inheriting the Base theme - classy
        Inheriting the Base theme - classy
CODE:
base theme: classy

STEP 6 : Now, we will define the‘regions’ for our theme. In info.yml, we have to define under the ‘regions’ key.

Defining 'regions' 
         Defining 'regions'
CODE:
regions:
branding: Branding
navigation: Main navigation
search: Search
featured: Featured
content: Content
right_sidebar: Right sidebar
footer_first: Footer First
footer_second: Footer Second
footer_third: Footer Third
footer_bottom: Footer Bottom

Under ‘regions’ key you can define your regions for the custom theme. Here,
branding: Is the id of the region which should be lowercase letter.
Branding: Is the name of the region which can be Uppercase letter.

STEP 7 : After we have defined our regions for our custom theme, we need to override page.html.twig to grab our ‘regions’instead ofthe classy theme’s. We will create templates/system directory under which we will create the page.html.twig.

Override the page.html.twig
       Override the page.html.twig
CODE:
<header aria-label="Site header" class="header" id="header" role="banner">
     {{ page.branding }}
     {{ page.navigation }}
     {{ page.search }}
</header>
<section class="featured" id="featured" role="complementary">
   {{ page.featured }}
</section>
<section class="main" id="main">
   <main aria-label="Site main content" class="content" id="content" role="main">
     {{ page.content }}
   </main>
   <aside class="right--sidebar" id="sidebar" role="complementary">
     {{ page.right_sidebar }}
   </aside>
</section>
<footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
   <div class="footer--top">
     {{ page.footer_first }}
     {{ page.footer_second }}
     {{ page.footer_third }}
   </div>
   <div class="footer--bottom">
       {{ page.footer_bottom }}
   </div>
</footer>

 In page.html.twig, we will create html structure for our regions. As you see in{{ page.branding }} –Here,

page - Is the key to render ‘regions’ in the page

branding- Is the region which we have defined in info.yml file.

So now, we have created our regions and rendered it in the page, now let’s start.

Step 8 : Go to Appearance in your Drupal site.You can see your custom theme present in the Uninstalled themes section.

Uninstalled Themes Section
        Uninstalled Themes Section

You need to click ‘Install and set as default’ option to install your theme in the site.

After it is installed,go to Structure -> Block Layout.Your Custom Theme will appear under the Block Layout.

drupal custom theme​​​​​​  

You will see a link for ‘Demonstrate block regions (Custom Theme)’.Click on the link.You can see all the regions that you had declared in theinfo.yml and added in page.html.twig
 

Regions added in info.yml and page.html.twig
       Regions added in info.yml and page.html.twig

Step 9 :Now, you need to apply styles in the CSS for each region as per your design.We will use cssin this case;You can even use SCSSif you’d like. Just inspect the branding region - you shouldsee the region class and then add the CSS to that class. 

 

Add CSS in style.css as per your requirement.
.header{
 display: flex;
 justify-content: space-between;
 padding: 10px;
}

.header.region {
 padding: 5px;
}

.header.region-branding {
 flex: 0 1 20%;
}

.header.region-navigation {
 flex: 0 1 50%;
}

.header.region-search {
 flex: 0 1 30%;
}

.region.block-region {
 padding: 15px;
}

.featured{
 padding: 40px 20px;
 background-color: indianred;
}

.main{
 padding: 50px 0;
 display: flex;
 justify-content: space-between;
}

.main.content {
 flex: 0 1 65%;
}

.main.right--sidebar {
 flex: 0 1 30%;
}

.footer--top {
 display: flex;
 justify-content: space-between;
 padding: 10px;
}

.footer--top .region {
 padding: 5px;
}

.region-footer-first, .region-footer-second, .region-footer-third {
 flex: 0 1 30%;
}

The Result:

Your Drupal 8 Custom Theme is ready!

drupal custom theme

 

If you need to write any hooks or create suggestions for your twig file, you could add the .theme file in your custom theme (shown below).

Adding the .theme file
      Adding the .theme file
 
Mar 31 2020
Mar 31

As Drupal 9 release has already become a buzzword in the Drupal community, people have been anticipating its new features since long alongside the after-effects of end of lives for Drupal 7 & 8 in 2021.

Given the circumstances, it might be possible that enterprises find it difficult to upgrade their system to the latest version of Drupal. Well, they shouldn’t! Because Drupal 9 is backward compatible.

This is what this blog is about. Read on to find out what is backward compatibility, why is it useful, and how it can help you in upgrading your system to Drupal 9, hassle-free.

What is Backward Compatibility?

A system or software is said to be backward compatible when it is capable of running the same software on the previous version of the system. 

In terms of Drupal 9, backward compatibility implies that its 9th version would be compatible with the previous version, i.e, Drupal 8. That being said, Drupal 9 (new version) will be able to use modules, configurations, and data created with an older version (Drupal 8) of the same software/ product. unlike the case with D7 and D8. 

Drupal 9 written in blue backgroundSource: Pantheon

What’s the Need for Backward Compatibility?

Backward compatibility is paramount because it will suppress the need to start over when you’ll try to upgrade from Drupal 8 to Drupal 9. 

For instance, a backward-compatible word processor will let you edit your documents created with an older version of the program. 

Backward compatibility can be easily achieved when the previous version has been designed to be extensible, with built-in features like plugins, info hooks, tagged service, or an application program interface (API) to let new features slip-in easily.


Here are a few reasons to know why it’s important to have it-

  1. Convenience and the fight against clutter

    Backward compatibility means you can bid adieu to Drupal 8 while still boasting the ability to enjoy its software library. Drupal 9 is considered to be a minor release of Drupal 8  with deprecated code removed and third-party dependencies updated, thereby allowing you to enjoy both, at least until Drupal 8 is supported!
  2. Fastens the speed of newer version
    Preserving backward compatibility in Drupal does not mean that it is going to burden itself with historical baggage, as it might hinder the performance of the system. So, the Drupal community has been focusing on breaking people’s code and not their data.
    This way, Drupal can remain fast, small, clean, and yet up-to-date technology.
  3. It shows that the Drupal community cares
    When a software developer/company proclaims about the plans to include backward compatibility with their new version/product, it indicates that they are concerned about their users. They are spending hefty amounts of money for implementing the old architecture just to keep their users at ease. 
    Drupal 8 will hardly be able to generate new user-base and ROI for them, but still, they are pumping funds into backward compatibility just to make the transition easier for its users. 

How Can It Make Your System Upgrade Easier?

Since Drupal 8 is not backward compatible with Drupal 7 or 6 and so does not D7 with D6, upgrading to Drupal 9 will be a lot easier only when you are running your website on Drupal 8! 

If you are already running Drupal 8, appreciate yourself for keeping your website up-to-date. Such websites are much safer and standardized for the up-gradation method.

Also, what’s more, exciting in regards to Drupal 9 is that developers will get an opportunity to check their code quality and build changes before the discharge to facilitate backward compatibility in Drupal 9, which was not achievable with previous versions of Drupal.

Now that Migration module has been made a part of Drupal core already and automatic updates is also going to be added soon to the core for easy updates, you can check to upgrade path to know which parts of the Drupal codebase are considered stable and reliable APIs, and which parts/modules and theme developers should rely on.

In the end

Drupal 9 contemplates for the shift to make it a case of easy handling for the core team and smooth transition for users simultaneously, as it is going to be with backward compatibility.

Thus, if you are already on Drupal 8, the leap would be nimble, however, ensure that you have updated the modules and not using deprecated codes anymore.

Want assistance in migrating your website as soon as Drupal 9 shows up? Contact us and our team will get in touch with you.

Mar 30 2020
Mar 30

As the world navigates through a public health crisis, and everyone is forced to respond to unprecedented conditions, it is a good time to evaluate how well your website is working to communicate urgent information to your stakeholders, and how it might be improved going forward. 

The designers and developers at Kalamuna have helped many organizations prepare and respond to emergency situations, and in this series of posts, we are going to share the lessons we have learned and the best practices we are now recommending to our clients.

Implement alert banners

For many organizations, it becomes imperative to communicate with your stakeholders in the event of an emergency. However, many common website components are not well-suited for presenting urgent information under adverse circumstances. Pop-ups may be blocked or dismissed accidentally, slideshows may fail to load under low-bandwidth conditions, and any text contained within images is inaccessible to screen readers used by blind and low-vision users.

Therefore, alert banners are often the best design pattern for presenting an urgent message or call to action to stakeholders who visit your website. A properly implemented alert banner can quickly and reliably catch the attention of your audience, let them know that an emergency is in progress, provide actionable instructions with the most relevant facts, and direct them to additional resources or updates as needed. 

Banner design best practices

A good alert banner is positioned in a prominent location near the top of the screen and is styled in a way that is immediately noticed upon arrival. It should appear across all the pages of your site—not just on the homepage—since many visitors arrive through direct links to internal content. Persistence is important, since if a message is dismissed or otherwise disappears, the user may find it hard to locate the urgent information again.

SFUSD is prominently displaying an alert message on all the pages of their website, featuring timely details and links to vital resources.SFUSD is prominently displaying an alert message on all the pages of their website, featuring timely details and links to vital resources.

Visually, an alert banner should stand out, but must do so in a way that is accessible to all visitors. It should be large enough to capture attention and convey a message, but shouldn't take over the browser window or block users from completing other tasks. Allow the banner to scroll along with the surrounding content, since fixed positioning on the page or screen can obstruct other elements or disorient the viewer. 

The font should be large and easy to read. Choose background, text, and link colors that have a high enough contrast ratio to meet the AA standard of the Web Content Accessibility Guidelines (WCAG), which requires a 4.5:1 contrast ratio for for normal text and 3:1 for large text, or ideally the WCAG AAA guidelines, which specify a 7:1 contrast ratio for normal text and 4.5:1 for large text. You can use this online calculator to determine if your colors meet these recommendations.

Some color combinations on this government website fail the WCAG accessibility guidelines for color contrast, even when evaluated using the more-permissive standards for large textSome color combinations on this government website fail the WCAG accessibility guidelines for color contrast, even when evaluated using the more-permissive standards for large text.

Links should be underlined or made into buttons so they can be easily identified. They should be large enough to be reliably pressed on mobile devices, have a distinct hover state to let mouse users know where they can click, and provide a focus indicator to highlight the active item as a keyboard user tabs through the page. 

If presenting multiple links, make sure they are spaced far enough apart so that users can clearly identify their options and select one without accidentally pressing another. Avoid making the entire banner a link, since users may not realize it is clickable. Links to external resources should be clearly marked, both visually with an icon and with alt text for screen readers, so the user knows they are leaving your site.

The Rocketship Public Schools banner (designed by Kalamuna) is a great example of how you can use multiple links to direct visitors to the resources that are most applicable to their needs.The Rocketship Public Schools banner (designed by Kalamuna) is a great example of how you can use multiple links to direct visitors to the resources that are most applicable to their needs.

Finally, consider how your banner may need to change over the course of a crisis. Including dates in the design can indicate when an alert has been issued, updated, or resolved, so visitors are assured they are getting the latest information. And after a crisis, you may want the banner to announce that the emergency is over, using cooler colors to indicate that the situation is now less urgent.

This water company alert banner not only alerts customers when action needs to be taken, but also announces when service has returned to normal. Test your emergency response before it is neededThis water company alert banner not only alerts customers when action needs to be taken, but also announces when service has returned to normal.

Test your emergency response before it is needed

Alert banners are functionally and visually different from any other component on your site, so it is important to test the functionality in advance of an actual emergency. You don't want to be releasing bug fixes or design changes while an emergency is underway.

When testing, use an environment that closely resembles your production platform. View the site with a variety of browsers, devices, and screen sizes in order to ensure that the banner is responsive and does not have any obvious layout issues or adverse interactions with other elements, such as popups and dropdowns which may obstruct your message. Browserstack is a handy service we use at Kalamuna to assist with this task.

Try creating multiple variations of the alert using different content. What happens to the layout when the text entered is longer or shorter than expected, or if it spans multiple paragraphs? What happens when several links are added, or if someone tries entering a full url as the text of a link? If your site is available in multiple languages, is the text being properly translated and does it display correctly for both left-to-right and right-to-left layouts?

If your banner contains images, what happens under low-bandwidth conditions when some files may not load? If a background image does not appear, is the text still legible? If a logo or decorative element doesn’t show up, does the layout appear broken? Instead of a png or jpg icon, can you include an <svg> tag in your html markup so that it loads at the same time as the content?

The entire alert banner on the NCAA website is contained in an image, including all of the text, and will not be visible at all if the file fails to load.The entire alert banner on the NCAA website is contained in an image, including all of the text, and will not be visible at all if the file fails to load.

Just like with images, javascript files may fail to load under low-bandwidth conditions, or the execution of your code may be interrupted by errors in other scripts on the page. If javascript is not available, does your alert banner still appear on the page? Can the content still be read?

Without javascript, all visitors can see is the first few words of the Smithsonian’s dynamic, side-scrolling closure announcement in the top banner. Create an activation planWithout javascript, all visitors can see is the first few words of the Smithsonian’s dynamic, side-scrolling closure announcement in the top banner.

Create an activation plan

When the time comes to deploy the emergency banner, it should be clear who has the ability  and responsibility to post the message. Designate backups for this critical role, since the primary person may be unavailable or even affected by the emergency itself. 

Like a fire extinguisher, the mechanism used to activate an alert message should be clearly marked and easy to find in the event of an emergency. Since this interface is infrequently accessed, users may not have advance knowledge of its location, or may have forgotten it over time.

And, just like with a fire extinguisher, safeguards need to be put in place to avoid accidentally creating an alert. Consider implementing the virtual equivalent of breaking glass and pulling a pin in order to activate the system, such as clear text describing what will happen and a confirmation step to ensure the user definitely intends to proceed.

In 2018, the Hawaii Emergency Management Agency accidentally sent a missile alert to thousands of cell phones, thanks to the poor design of an administrative interface.In 2018, the Hawaii Emergency Management Agency accidentally sent a missile alert to thousands of cell phones, thanks to the poor design of an administrative interface.

Hopefully these tips will help you create and deploy effective alert banners, or to improve ones you already have in place on your website. Stay tuned for additional posts in our Designing for Disaster series, covering topics such as emergency landing pages, interface roadblocks, and platform reliability.

Mar 30 2020
Mar 30

Automated testing is a process by which we rely on special software to continuously run pre-defined tests that verify the integrity of our application. To this end, automated tests are a collection of steps that cover the functionality of an application and compare triggered outcomes to expected ones.

Manual testing is a great way to ensure that a piece of written functionality works as expected. The main problem encountered by most adopters of this strategy, especially those who use it exclusively, is regression. Once a piece of functionality is tested, the only way they can guarantee regressions (or bugs) were not introduced by another piece of functionality is by retesting it. And as the application grows, this becomes impossible to handle. This is where automated tests come in.

Automated testing uses special software that has an API that allows us to automate the steps involved in testing the functionality. This means that we can rely on machines to run these tests as many times as we want, and the only thing stopping us from having a fully-working application is the lack of proper test coverage with well-defined tests.

There's a lot of different software available for performing such tests and it's usually geared toward specific types of testing. For example, Behat is a powerful PHP-based open source behavior testing framework that allows the scripting of tests that mirror quite closely what a manual tester would do—interact with the application through the browser and test its behavior. There are other testing frameworks that go much lower in the level of their testing target. For example, the PHP industry standard tool, PHPUnit, is widely used for performing unit tests. This type of testing focuses on the actual code at the lowest possible level; it tests that class methods work properly by verifying their output after providing them with different input. A strong argument in favor of this kind of testing is that it encourages better code architecture, which can be (partly) measured by the ease with which unit testing can be written for it.

We also have functional or integration tests which fall somewhere in between the two examples. These go higher than code level and enlist application subsystems in order to test more comprehensive sets of functionality, without necessarily considering browser behavior and user interaction.

It is not difficult to agree that a well-tested application features a combination of the different testing methodologies. For example, testing the individual architectural units of an application does not guarantee that the entire subsystem works, just as testing only the subsystem does not guarantee that its individual components will work properly under all circumstances. Also, the same is true for certain subsystems that depend on user interaction—these require test coverage as well.

Automated testing in Drupal 8

Like many other development aspects, automated testing has been greatly improved in Drupal 8. In the previous version, the testing framework was a custom one built specifically for testing Drupal applications—Simpletest. Its main testing capability focused on functional testing with a strong emphasis on user interaction with a pseudo-browser. However, it was quite strong and allowed a wide range of functionality to be tested.

Drupal 8 development started with Simpletest as well. However, with the adoption of PHPUnit, Drupal is moving away from it and is in the process of deprecating it. To replace it, there is a host of different types of tests—all run by PHPUnit—that can cover more testing methodologies. So let's see what these are.

Drupal 8 comes with the following types of testing:

  • Simpletest: exists for legacy reasons but no longer used to create new tests. This will be removed in Drupal 9.
  • Unit: low-level class testing with minimal dependencies (usually mocked).
  • Kernel: functional testing with the kernel bootstrapped, access to the database and only a few loaded modules.
  • Functional: functional testing with a bootstrapped Drupal instance, a few installed modules and using a Mink-based browser emulator (Goutte driver).
  • FunctionalJavaScript: functional testing like the previous, using the Selenium driver for Mink that allows for testing JavaScript powered functionality.

Apart from Simpletest, all of these test suites are built on top of PHPUnit and are, consequently, run by it. Based on the namespace the test classes reside in, as well as the directory placement, Drupal can discover these tests and know what type they are.

Drupal 8 uses PHPUnit as the testing framework for all types of tests. In this section, we will see how we can work with it to run tests.

On your development environment (or wherever you want to run the tests), make sure you have the composer dependencies installed with the --dev flag. This will include PHPUnit. Keep in mind not to ever do this on your production environment as you can compromise the security of your application.

Although Drupal has a UI for running tests, PHPUnit is not well integrated with this. So, it's recommended that we run them using the command line instead. Actually, it's very easy to do so. To run the entire test suite (of a certain type), we have to navigate to the Drupal core folder:

cd core

And run the following command:

../vendor/bin/phpunit --testsuite=unit

This command goes back a folder through the vendor directory and uses the installed phpunit executable (make sure the command finds its way to the vendor folder in your installation). As an option, in the previous example, we specified that we only want to run unit tests. Omitting that would run all types of tests. However, for most of the others, there will be some configuration needed, as we will see in the respective sections.

If we want to run a specific test, we can pass it as an argument to the phpunit command (the path to the file):

../vendor/bin/phpunit tests/Drupal/Tests/Core/Routing/UrlGeneratorTest.php

In this example, we run a Drupal core test that tests the UrlGenerator class.

Alternatively, we can run multiple tests that belong to the same group (we will see how tests are added to a group soon):

../vendor/bin/phpunit --group=Routing

This runs all the tests from the Routing group which actually contains the UrlGeneratorTest we saw earlier. We can run tests from multiple groups if we separate them by a comma.

Also, to check what the available groups are, we can run the following command:

../vendor/bin/phpunit --list-groups

This will list all the groups that have been registered with PHPUnit.

Finally, we can also run a specific method found inside a test by using the --filter argument:

../vendor/bin/phpunit --filter=testAliasGenerationUsingInterfaceConstants

This is one of the test methods from the same UrlGeneratorTest we saw before and is the only one that would run.

There are certain commonalities between the various test suite types regarding what we need to do in order for Drupal (and PHPUnit) to be able to discover and run them.

First, we have the directory placement where the test classes should go in. The pattern is this: tests/src/suite_type, where suite_type is a name of the test suite type this test should be. And it can be one of the following:

  • Unit
  • Kernel
  • Functional
  • FunctionalJavascript

So, for example, unit tests would go inside the tests/src/Unit folder of our module. Second, the test classes need to respect a namespace structure as well:

namespace Drupal\Tests\[module_name]\[suite_type]

This is also pretty straightforward to understand.

Third, there is a certain metadata that we need to have in the test class PHPDoc. Every class must have a summary line describing what the test class is for. Only classes that use the @coversDefaultClass attribute can omit the summary line. Moreover, all test classes must have the @group PHPDoc annotation indicating the group they are part of. This is how PHPUnit can run tests that belong to certain groups only.

So now that we know how to register and run tests, let's order the book and start by looking at unit tests first.

Mar 30 2020
Mar 30

Automated testing is a process by which we rely on special software to continuously run pre-defined tests that verify the integrity of our application. To this end, automated tests are a collection of steps that cover the functionality of an application and compare triggered outcomes to expected ones.

Manual testing is a great way to ensure that a piece of written functionality works as expected. The main problem encountered by most adopters of this strategy, especially those who use it exclusively, is regression. Once a piece of functionality is tested, the only way they can guarantee regressions (or bugs) were not introduced by another piece of functionality is by retesting it. And as the application grows, this becomes impossible to handle. This is where automated tests come in.

Automated testing uses special software that has an API that allows us to automate the steps involved in testing the functionality. This means that we can rely on machines to run these tests as many times as we want, and the only thing stopping us from having a fully-working application is the lack of proper test coverage with well-defined tests.

There's a lot of different software available for performing such tests and it's usually geared toward specific types of testing. For example, Behat is a powerful PHP-based open source behavior testing framework that allows the scripting of tests that mirror quite closely what a manual tester would do—interact with the application through the browser and test its behavior. There are other testing frameworks that go much lower in the level of their testing target. For example, the PHP industry standard tool, PHPUnit, is widely used for performing unit tests. This type of testing focuses on the actual code at the lowest possible level; it tests that class methods work properly by verifying their output after providing them with different input. A strong argument in favor of this kind of testing is that it encourages better code architecture, which can be (partly) measured by the ease with which unit testing can be written for it.

We also have functional or integration tests which fall somewhere in between the two examples. These go higher than code level and enlist application subsystems in order to test more comprehensive sets of functionality, without necessarily considering browser behavior and user interaction.

It is not difficult to agree that a well-tested application features a combination of the different testing methodologies. For example, testing the individual architectural units of an application does not guarantee that the entire subsystem works, just as testing only the subsystem does not guarantee that its individual components will work properly under all circumstances. Also, the same is true for certain subsystems that depend on user interaction—these require test coverage as well.

Automated testing in Drupal 8

Like many other development aspects, automated testing has been greatly improved in Drupal 8. In the previous version, the testing framework was a custom one built specifically for testing Drupal applications—Simpletest. Its main testing capability focused on functional testing with a strong emphasis on user interaction with a pseudo-browser. However, it was quite strong and allowed a wide range of functionality to be tested.

Drupal 8 development started with Simpletest as well. However, with the adoption of PHPUnit, Drupal is moving away from it and is in the process of deprecating it. To replace it, there is a host of different types of tests—all run by PHPUnit—that can cover more testing methodologies. So let's see what these are.

Drupal 8 comes with the following types of testing:

  • Simpletest: exists for legacy reasons but no longer used to create new tests. This will be removed in Drupal 9.
  • Unit: low-level class testing with minimal dependencies (usually mocked).
  • Kernel: functional testing with the kernel bootstrapped, access to the database and only a few loaded modules.
  • Functional: functional testing with a bootstrapped Drupal instance, a few installed modules and using a Mink-based browser emulator (Goutte driver).
  • FunctionalJavaScript: functional testing like the previous, using the Selenium driver for Mink that allows for testing JavaScript powered functionality.

Apart from Simpletest, all of these test suites are built on top of PHPUnit and are, consequently, run by it. Based on the namespace the test classes reside in, as well as the directory placement, Drupal can discover these tests and know what type they are.

Drupal 8 uses PHPUnit as the testing framework for all types of tests. In this section, we will see how we can work with it to run tests.

On your development environment (or wherever you want to run the tests), make sure you have the composer dependencies installed with the --dev flag. This will include PHPUnit. Keep in mind not to ever do this on your production environment as you can compromise the security of your application.

Although Drupal has a UI for running tests, PHPUnit is not well integrated with this. So, it's recommended that we run them using the command line instead. Actually, it's very easy to do so. To run the entire test suite (of a certain type), we have to navigate to the Drupal core folder:

cd core

And run the following command:

../vendor/bin/phpunit --testsuite=unit

This command goes back a folder through the vendor directory and uses the installed phpunit executable (make sure the command finds its way to the vendor folder in your installation). As an option, in the previous example, we specified that we only want to run unit tests. Omitting that would run all types of tests. However, for most of the others, there will be some configuration needed, as we will see in the respective sections.

If we want to run a specific test, we can pass it as an argument to the phpunit command (the path to the file):

../vendor/bin/phpunit tests/Drupal/Tests/Core/Routing/UrlGeneratorTest.php

In this example, we run a Drupal core test that tests the UrlGenerator class.

Alternatively, we can run multiple tests that belong to the same group (we will see how tests are added to a group soon):

../vendor/bin/phpunit --group=Routing

This runs all the tests from the Routing group which actually contains the UrlGeneratorTest we saw earlier. We can run tests from multiple groups if we separate them by a comma.

Also, to check what the available groups are, we can run the following command:

../vendor/bin/phpunit --list-groups

This will list all the groups that have been registered with PHPUnit.

Finally, we can also run a specific method found inside a test by using the --filter argument:

../vendor/bin/phpunit --filter=testAliasGenerationUsingInterfaceConstants

This is one of the test methods from the same UrlGeneratorTest we saw before and is the only one that would run.

There are certain commonalities between the various test suite types regarding what we need to do in order for Drupal (and PHPUnit) to be able to discover and run them.

First, we have the directory placement where the test classes should go in. The pattern is this: tests/src/suite_type, where suite_type is a name of the test suite type this test should be. And it can be one of the following:

  • Unit
  • Kernel
  • Functional
  • FunctionalJavascript

So, for example, unit tests would go inside the tests/src/Unit folder of our module. Second, the test classes need to respect a namespace structure as well:

namespace Drupal\Tests\[module_name]\[suite_type]

This is also pretty straightforward to understand.

Third, there is a certain metadata that we need to have in the test class PHPDoc. Every class must have a summary line describing what the test class is for. Only classes that use the @coversDefaultClass attribute can omit the summary line. Moreover, all test classes must have the @group PHPDoc annotation indicating the group they are part of. This is how PHPUnit can run tests that belong to certain groups only.

So now that we know how to register and run tests, let's order the book and start by looking at unit tests first.

Mar 30 2020
Mar 30

There are almost a million websites built on Drupal. The websites built on Drupal are growing ever bigger. In fact, Drupal is the main CMS contender if you want to build a big website and don't want to use expensive proprietary platforms. Website generators, headless CMSes and Digital Experience Platforms architected by massive corporations, all are built on Drupal.

Drupal, however, is a complex framework. Correct architecture and coding standards are a must to ensure the project’s long term success. Working with a knowledgeable partner can get you a long way compared to the situation you’d be in if you started with someone without Drupal experience. If you want to build a new system or a website or are just looking to get better service for an existing project, partnering with the best Drupal agency is the right way to ensure your project’s future success.

But how to choose a top Drupal agency

Before you start looking for a Drupal agency, there are a few things you should consider which will make your search much more effective.

Location

Where should the agency be located? Ideally, everyone prefers to work with companies located close, but despite Drupal being a popular CMS, Drupal companies do not reside around every corner. This is especially true if you want to find true experts. Luckily, technology has all but eliminated barriers for cooperation even over great distances and most agencies are really well experienced in working with remote clients.

The only 2 issues that might prove challenging when working with someone not from your immediate proximity are: time difference and language barriers.

1. Proximity

It is much easier to work when at least one hour of overlap exists between the working hours of client and agency teams. Lack of overlap requires additional planning and more explicit written communication on both sides to ensure predictable project progress. In Droptica we still manage to deliver successful projects with clients in California and Australia, but our project managers have to take the asynchronicity of communication much more into account... and sometimes also adapt working hours a bit to allow for an evening status call with a client, who just got to his office on the other side of the globe.

2. Lanuage

Language, of course, may also prove to be a barrier or at least an obstacle to overcome. If you are working with an agency from a different country, then, typically the language you will have to communicate will be English. 

Budget

It helps a lot to know what your development budget is. Most agencies are good at delivering projects of a particular size, eg: 

  • small - up to €10k, 
  • medium €10k - €100k, 
  • bigger: €100-€500k 
  • or big: over 500k€. 

It is very difficult for a small company to deliver a huge project because it lacks processes and experience to coordinate a bigger team and track progress in a longer timeframe. On the other hand, a massive agency will have a hard time fitting its process into a smaller budget.

Another reason to have a budget handy is that many agencies will ask you about it. A great drupal agency is contacted by many potential clients and will have a process in place to quickly determine if there is a fit. You do not have to give a concrete amount (you may not yet know it), but having an overall level of acceptable cost in mind helps everyone decide if the match is right. An experienced agency will ask you not to waste your and their time if there is a misalignment of expectations regarding the size of the project.

An agency of a freelancer?

You may consider choosing a freelancer instead of an agency. This might actually be a cost-efficient solution to your project, but there are a few things you should keep in mind.

A freelancer works solo - you will have placed a lot of reliance on one person. If for whatever reason your ways part, or even in the person becomes temporarily unavailable, you have to have a contingency plan in place. Realistically, the only sound plan is that you are the fallback expert, because there is no one else who knows your project. A freelancer is therefore a good option only when the project is not very important or is not yet live and timelines on delivery are not very tight.

A team of freelancers requires coordination - if you hire a group of freelancers to deliver your project, you will have to coordinate the effort. They will not know each other and will usually not have worked in the same fashion. To ensure a predictable outcome, you will have to put processes in place to ensure that what they deliver is coherent. People from various backgrounds and with various experiences may choose different technical solutions to the same problem. If every one of your freelancers works by himself without technological coordination, your project might be in jeopardy. A solid agency, on the other hand, will have processes and structures in place to ensure that the deliverables of all team members make sense. 

The interview process

When you have the basics ready, it’s time to search for the agencies and contact them. There are a plethora of lists with agencies on the internet and a quick search in google for a “Drupal agency” will result in quite a good starting list of companies to contact. I will leave you to do this piece yourself. 

I will however talk about how to vett the agencies. Below I will list topics worth covering with the agencies of choice. This is by no means a closed list, but it is a good list to start the discussion and int also contains the most important points.

Do not start from your project

You are probably super eager to get down to details of discussing your project. After all, that is why you are looking for a partner - to progress your project.

This, however, might make it difficult to learn more about the company and will make it very time consuming to choose the right one. Details are difficult and can take a lot of time and you will not really be able to go through them with 7 or even 5 companies - especially if you have to grant access to systems or designs and documentation. It is best to wait till you chose one or two final contenders.

My suggestion, would be to briefly describe the project, mentioning the size and timeline, but without going into a lot of details initially. The preview will allow the agency to decide whether your project is potentially interesting, but you will not get bogged down with detailed discussions yet. You will be able to make your evaluation much more easily.

Let talk about questions to ask:

How do they work, how do they want to go about your project

This is a very high-level open question which allows you to learn how the company operates. You will learn about the approach they take to managing project, communicating, etc. It gives you an initial sense of what to expect in terms of how your project will be handled. It is a great opening question to a more in depth discussion. Things to look for here are:

  • Does the company have a process?
  • Is the process organised and predictable?
  • Does what they propose fit into your organisation, are they willing to adapt?

Ask follow up questions if you have any. Follow up questions aim to specify the general information and are a great way to identify if the company actually walks the talk or is this just the salesman telling you what you want to hear.

Will the agency use a methodology to deliver the project? There are multiple approaches to project governance and they differ greatly. On one hand there are the agile methodologies, including SCRUM, which deliver results quickly, but require involvement from your side. On the other hand, there are all waterfall methodologies, which do not require involvement during the project, but require very detailed specifications and bring a risk of not meeting the expectations when the project is actually delivered.

Communication

Communication on a project is very important. If it is set correctly and matches the process it helps everyone keep track and move forward. Not organised formally, it will slow the project down.

Things to learn:

  • How will the communication be handled? 
  • Who will be your primary point of contact. 
  • Will you be able to  communicate with whole team or just the Project Manager?
  • What tools will you use to keep track of progress and contact each other.
  • How will requirements be gathered? Will there be an easy way for everyone to access them?

These questions are aimed at understanding how you will deliver your requirements and keep track of what is happening on your project.

In Droptica we typically have 4 main communication streams:

  • Jira (Project Management / ticketing system). Jira is the backbone of the project. All the tasks and their acceptance criteria are gathered there and progress is tracked. Using a ticketing system helps everyone understand what is to be done, what do we currently work on and what is to be delivered.
  • A documentation system - where we gather project documentation
  • Slack - a chat for the whole team and the client to quickly catch up and discuss issues, ask questions. 
  • Video-conferencing - daily status meetings, progress presentation, demo meetings etc are best done in an actual meeting. Also sometimes it might be easier to talk then to post a million messages on slack toa agree some detailed topic.

Maintenance

Building on Drupal is just the start. You have to understand how the agency will take care of you project after it is delivered. As any software solution, Drupal will require security upgrades. You also might want to develop the project further but in smaller increments. You should verify if the agency is able to provide you with such service or if you will have to look for new one once the initial development is finalised.

In Droptica, for example, we have a separate drupal support team, which takes ofer finalised projects, monitors and upgrades and performs any other maintenance tasks required. 

Examples of previous work

The best way to verify if the Drupal agency is able to deliver you project is to ask them about similar projects or projects of similar size. This is especially important if your project is not a standard website but something bigger. Many Drupal agencies have experience in building marketing websites but are not able to create and maintain a complex system with multiple users and business logic.

Of course it might be difficult to find an agency which has built something exactly similar to your project. What you want to verify here is whether the company has built things with similar or greater complexity or size of scope.

Prices, estimations and agreements

Once you have gone through the initial interview, you are ready to talk about prices. Depending on the project, its size and complexity, this might be a quick or quite a long process. It is best to narrow down the number of agencies you are talking to at this stage not get overwhelmed with questions. At this stage it also good to understand:

  • How does the agency calculate cost
  • What are the payment term the agency allows
  • How will you be able to monitor progress if there are installments or prepayments involved

When talking about costs, it is important to remember that price alone should not be the only factor you take into account. In software development, quality is almost always cheaper in the long term. If an agency delivers a solid project, you will not have to incur additional cost of fixing multiple bugs and it will be much cheaper to maintain the project over a long period of time. Choosing a cheap, but not so experienced agency, might result in a project that will eventually prove very expensive to maintain and the initial gains will quickly be consumed by upkeep costs.

Overall impression

While gathering all the information about the company, it is also good to look at the overall impression. How do you feel about the company and the people you are talking to. If you chose a drupal agency, you will most likely have to be in  a lot of contact. How does this make you feel? Is the cultural match right? Is the vibe you are getting positive? 

Good chemistry is quite important, it will make for a much nicer experience if you actually like the people you are working with on you Drupal project.

Summary

When you have all the facts, you have to make a choice. Do it wisely looking not only at the price but the overall picture. The expertise, communication, people -  all pieces of the puzzle. I hope that the above questions will make it much easier for you to choose the right Drupal agency for your project.

Good luck!

Mar 30 2020
Mar 30

Mike speaks with Avi Schwab, one of the organizers of MidCamp, on how the organizing team quickly shifted from an in-person camp to a virtual camp. In addition, Chris Weber also has three new change records for us.

URLs mentioned

DrupalEasy News

Sponsors

Subscribe

Subscribe to our podcast on iTunes, Google Play or Miro. Listen to our podcast on Stitcher.

If you'd like to leave us a voicemail, call 321-396-2340. Please keep in mind that we might play your voicemail during one of our future podcasts. Feel free to call in with suggestions, rants, questions, or corrections. If you'd rather just send us an email, please use our contact page.

Mar 27 2020
Mar 27

More and more software development companies (and not only those) start to move to a remote work setup. On one hand, it is the mark of current times, on the other - a result of recent global changes. The Covid19 pandemic is just a catalyst of the changes. It is also a test of how well the companies are prepared for the new situation. Remote work setup is something completely different to companies for which it was always part of the culture and something else for those who suddenly have to redefine all their working habits.

Remote work as part of a business continuity plan

Business continuity planning is one of the hallmarks of strong companies. If an organization has a plan, it means that the management looks into the future and prepares the company for an unforeseen crisis. Guaranteeing uninterrupted service delivery is key to successfully serving the customers, especially in tough times when they have problems of their own. Being a solid rock to lean is the best gift a company can give to its customers.

Remote work is a perfect approach to ensuring uninterrupted service. Thanks to organizing delivery processes in such a way that they can be executed from anywhere, service companies, including software development agencies, can ensure that the risk of service interruption is minimal.

In Droptica we always worked in with a remote-first philosophy in mind. Thanks to this, the current Covid19 crisis did not impact the services we provide. We could provide our clients with security. They were not exposed to any risk.

Droptica works remotely from the beginning of the company. Thanks to this, all the processes we built and all the tools we use work remotely and deliver expected results.

Moving to remote is not easy

Moving to remote work is not as easy as transporting computers to your employees’ homes. Successful remote work is only viable if the processes in the company allow for remote work. Companies moving to remote setup will have to create these and it will not always be easy. On some situations, a change in the whole company culture will be necessary. If you add to that the fact that not everyone is effective when working from home, some companies might have a tough time adjusting. A company is a complex organism and to work correctly all parts must fit together. 

In Droptica, from the very beginning, also taking this into account in recruitment, we created teams which could work remotely. All the tools we chose and processes we architected had to always be suited for a distributed team. Thanks to this, the current move to fully remote did not require any changes to our daily operations. We still use the same tools and follow the same processes which worked for us and our clients successfully for years.

Tools - software

Luckily there are multiple tools which support distributed teams. Each company, however, has to create its own mix which matches its operational model and business processes. In Droptica we mostly use Slack, Jira, AWS and Github as our basic system tools. More information about the tools we use is available in a series of blog posts on the subject (link)

Tools - Hardware

Our employees’ mobility was always important to us. Thanks to the fact that all of our employees were always equipped with powerful laptops, remote work is super easy for us. Of course, to allow our programmers to be as effective as possible, we expect them to use a set of monitors. Each of our employees receives 2 additional monitors to supplement their laptop. We make sure that everyone has a well organised, ergonomic workplace.

Training, culture, organization

For the company to be successful as a distributed organisation, it has to place a great emphasis on the culture. There is a balance to be struck between the speed of responses to questions posted on messengers and such and the time required by developers to work focused (what is very important when you create code). The companies which got used to everyone being at the reach of a voice, when you could always walk over and ask a question will have to put a lot of work to adapt to achieve fast but efficient remote communication.

In Droptica we rely on SCRUM a lot to help us communicate. Thanks to SCRUM we hold meetings for specific reasons at predefined times. Apart from that, we worked out mechanisms of asynchronous and remote communication, which everyone to keep track of what is happening. Our team members are so used to working in a remote setup that they plan automatically plan around the fact that communication is asynchronous and deliver functionality without any interruptions.

Remote agency and the client

While switching to a remote firs setup, the company cannot forget about the client. Clients are the most important part of the production process in a Drupal agency. In the case of many companies, having to work remotely, new ways of communication and cooperation with clients will have to be established. This is especially the case if previously face to face meetings were the de-facto standard.

In Droptica we cooperate with clients remotely since the beginning. Majority of our clients reside in different countries than ours. Although we see each other online often (sometimes daily), direct personal contact is not required to communicate effectively and cooperate. Our employees are trained and experienced in remote work with clients from remote locations. Thanks to this, we are able to provide the service on the same level as always.

How to choose a remote agency

If you want to choose a distributed agency  as your vendor, it is worth checking if:

  • The agency actually works remotely and for how long
  • Has processes in place which support project delivery and if these make sense
  • Supports its developers in remote work including in organisation of their workstations 

For more information about choosing the correct vendor, check out our post about choosing the best drupal team.

Remote agencies are more effective

In 2014 Harvard Business Review published findings of an experiment in which one of the call-centre companies wanted to verify “if” and “to what extent” remote work impacts employee effectiveness. For nine months half of the employees worked from home while the second half worked from the office. It turned out that 13.5% of employees working remotely did more calls to potential clients compared to the office group. It was estimated that in the 9-month period the company earned $1900 per employee and gained and an additional working day worth of work.

Summary

Working with a distributed Drupal agency makes perfect sense and can actually save you a lot of headaches, especially in turbulent times. Finding the correct one however may be a bit more challenging as working remotely successfully requires correct culture, processes and tools, things which cannot be obtained overnight.

Mar 27 2020
Mar 27

In the previous blog, “Know-How To Manage Multi-Site Configurations in Drupal 8” (link of the same), we learned about managing configurations across multiple sites and acquiring features from the common core platform. 

Today, the II part of this blog series will give you deep insights into the implementation of "Configuration Management across multiple sites".

But before moving ahead, let’s revisit the problem statement as discussed in Part 1-

The objective was to create one profile, i.e., “Core Platform” and accumulate all common features for easy distribution and sharing across multiple brands. 

Additionally, these features were made pluggable as well available for use to each brand in the future.

But there were two major challenges ahead. They were-

 

  1. There can be a massive amount of files to manage across 18 brands that may require more work upon them
  2. Moving configurations would require extensive care and testing at each step to avoid any loss of data, critical for the brands.

The Solution-

There are two approaches to solve the challenges. Each one is discussed below in detail-

A.  Separate Configuration Files for Each brand

This approach will ensure that all the configurations are kept separately for every brand, with each one having their own set of YAML configurations files. And while synching the configurations also, it can also be fetched for that specific brand only.

Although using this approach would result in:

  1. Increase in repo size as new features will be developed
  2. In case there is something that needs to be developed/deployed for multiple brands, then configuration files will have to be copied in every brand sync directory, thereby resulting in additional efforts of developers for copying files over multiple directories
  3. And, what if a new brand site is requested by the client? New directories will have to be created from scratch to manage configurations, leading to a bulkier repo.

Thus, we had to come up with a better approach that would result in maximum configuration files in common core platform directory and fewer files in brand-specific directories, besides common features across all brands).

Text and Drupal 8 logo in white backgroundSource: Medium

The new approach is-

B. Splitting Configurations for brands using Config Split Module -

In this approach, Config Split module is used to create a separate configuration sync directory for each brand where module settings let you select configurations from brand folders whenever Configuration Import is executed.

The Config Split module is used to split the configurations into a specific set required for a different environment or a different site. The aim is to fetch the configuration either from the split folder or from the core folder (it is specified in site’s

This approach will help you in moving all the common configurations to the Core sync directory.

Below mentioned are the steps that have been taken to achieve the objective-

 1. Exported all the brand-specific configurations and kept them under the brand-specific config sync directory using the config split module =>

For example, we have the site named "BPB News" and the folder for this under config directory is named as bbp. Here, we will export all our configurations and keep them under config/bbp directory. We did this for all the 18 brands.

Doing this will help us to get started with drush cex and Drush cim workflow on all brands.

 2. Using the Configuration Split module settings, as explained above, brand-specific split folders have been created:

Text written in white background

Also, the help text of the field says: "Configuration related to the "filtered" items below will be split from the main configuration and exported to this folder".

To export all the configurations to split directory we added " * " wildcard in the module configuration here :

Text and a dialog box on white backgroundSince our priority is to look for configuration items that will always be found in brand-specific folders, we can pick it up from the core as well, the main configuration folder.

You can test its working mechanism by deleting the split directory, ensuring that the configurations will be then fetched from the “Main”, the core directory.

So far, this is what we have been able to accomplish-

  • Brand-specific split folders to maintain brand-specific configurations
  • All the configurations are exported and kept in these brand-specific split folders

And this is what we aim to achieve-

  • The brand-specific folder should only contain the configurations that are specific to brands and should not contain configurations more than the "main", i.e., the "core" configurations directory.
  • Only then we will be able to get the ideal case of "Pushing all features to Core and keeping only brand-specific features in brands". This means the number of configuration files in the brand should be less than that of Core

 3. This is the testing stage, where we deploy all the changes to the Stage environment to check if configurations are now synced and no changes are displayed when we run "CIM" on any brands.

Finally, all sites were showing "No Changes in configuration" upon running the "CIM".

 4. To move forward, having all (Common configurations) configurations in Core and fewer configurations in site-specific configurations, and in brand split folders, we created and picked tasks in every sprint and performed this operation in several different tickets, such as :

  • Task 1: Moved all image style configurations in Core (Common) Directory.
  • Task 2: Moved all common view configuration files in Core (Common) Directory.
  • Task 3: Moved all common field configuration files in Core (Common) Directory.
  • Task 4: Moved all common Ad entity configuration files in Core (Common) Directory.

You can take a walkthrough of the Drupal configuration management from here-

[embedded content]

Working on a New Feature Request

When working on a new feature such as creating a new content type, all the configuration files related to "New Content-Type" creation will be picked up from the "Main" (Core) configuration directory. 

And in case if there is something that only a specific brand is requesting as explained in part I, then the configurations will be placed in the brand sync directory.

Usage of Configuration Ignore Module

We used Config ignore to add YAML configurations in ignore Settings. The idea here is to ignore synchronizing configurations that are changed regularly.

These changes might be any of the following-

  1. Changing form settings in the admin configuration forms. (In our case we call these settings, "Brand Level Configurations"). These can be custom admin forms provided by contributed modules
  2. In our case, the brand editors can change the placement of the blocks from the admin/structure/block page settings
  3. System Site Settings

These changes are made by the brand level editors and should be part of ignore module as when made to run, these changes would be reverted and lost during import.

Wrap-up

Sharing our journey and findings of configuration management might not be the best-case scenario for everyone but it resolves our problem statement and facilitates us to develop features and manage configurations successfully. 

There is no denying the fact that there can be a scope of improvement here also. You can also share your findings or provide us with your inputs in the comment section below for a more efficient approach.

Need help with revamping your enterprise platform? Drop us a line and our experts will get in touch with you.

Mar 27 2020
Mar 27

With modern software, it's easier than ever to build a website, load it with content, and maintain it. Software packages are more secure, much faster, and more user-friendly than they were just a decade ago!

However, one major drawback is that over time, the structure of the website and the sheer amount of data & content has led to an overloaded and messy site structure. Besides, older systems tend to fall behind, thereby failing to meet the demands placed on it by new features and modern technology.

Drupal is the premier CMS package for enterprises, with more installations than nearly any other package. NASA, FedEx, and countless other enterprises and governments rely on its security, ease for front-end & back-end users, and the vast support system developed over the years.

Considering the benefits that Drupal offers, you decided to migrate your content on Drupal CMS. But the question is, how would you prepare your business to perform that migration?

Planning Your Migration

There can be severe consequences if content and data doesn’t migrate between systems successfully.

  • Target systems break, rendering the website in-operational
  • Data isn't fully accessible or returns results improperly
  • You have to bear additional costs to rectify problems
  • Lost business from resources spent on the system instead of commerce

Careful planning and attention-to-detail will prevent these problems, making your migration to Drupal easier. You want to move content (pictures, charts, articles, blog) and data (website accounts, users, product information, inventory) into a new system. 

The objective is to improve the quality of the content and data while running your business without interruption.

Your plan needs to assign top priority to these goals-

  1. Maintain business continuity
  2. Improve information quality
  3. Minimize unnecessary costs

 

  1. Your Continuity MapCheck with other businesses in your market sector to see what tools or consultants they have used to migrate to Drupal. Research other Drupal websites for layout ideas and designs, themes, or functionality. Contact these companies for information on how to implement these ideas on your own site.

    Ask how they maintained the continuity of operations while performing the migration.

    1. Did they dedicate a project manager or assign it to their IT department?
    2. Did they hire an outside company or a new hosting provider  that did the work?
    3. Did they incur costs they feel that could have avoided?
    4. Looking back, is there anything they would have done differently?

      You need to be clear why you're doing this and where you want to go. Your plan should lay out performance, functionality, and appearance goals.

      Map your existing business operations into those goals. Determine project management duties, put protocols into place to avoid disruption of day-to-day operations, and provide for accountability.

  2. Consider Your Content
    Firstly, you need to evaluate the content that's on your website. Are there any functions or design elements that you can simplify or eliminate?

    Maybe you can start with a simple design and add to it once you have a basic platform. There might be features or pages on the website that visitors never use.

    On the back end, are there any complicated or ineffective processes that company staff often complains about? The simpler your requirements, the simpler the migration. In this stage, you're looking at two classes of information.

    1. Identifying content and data which are not needed anymore and anything that might be duplicated. This lets you slim down the sheer amount of information that needs to be handled
    2. Looking for information, data, and content that can be reorganized to function better or to return more relevant results.  You can redesign the way your site looks, cross-reference data that couldn't be linked before, get rid of features that nobody uses, and add new functionality provided by Drupal.
  3. Project Management and Quality Assurance
    The most expensive single proposition is managing the actual transfer from the old site to the new one. To minimize chances of data loss or disruption, you should store a complete operating copy of your existing website and associated data in the cloudBefore the actual transfer begins, it's crucial to ensure that the new network and server hardware have been serviced and upgraded. The operating system has to be installed, maintained, and fully updated. Any server software, network layers, and auxiliary office software troubleshooting should already be done before the transfer begins. This lets you take information in separate sets, clean it and slim it down, removing any duplicate content. The restructuring project will never have a chance to disturb current operations.

    Handle the overall process as smaller projects within the main project. Choose your smaller data sets first, allowing everyone to get used to working together and with the system.

    Review each stage of migration as accomplished. Evaluate the good and bad things about the process, improve them, and move on to the next larger set of data.

    The final stage of migration and quality assurance is performance testing. Your team needs to check the new website for grammatical errors, full functionality, and response time.

    You have to access every area of the site, every menu item, test every process from uploading and updating information to ordering, and account creation.

    While it may be too big of a task to check every detail for accuracy, you need to make sure a large enough portion of the site and a large number of pages and accounts are sampled randomly to ensure that everything seems to be right.

Rise to the Challenge

In the end, a successful migration to Drupal is a straightforward task. Assign clear goals and require accountability for reaching each goal step-by-step. Ensure your new system is ready for its new data load. Test and evaluate every step as you go.

Before you know it, your business and customers will be reaping the many benefits of an expandable, secure, modular CMS offering advanced functionality. You'll have mastered the challenge of migrating to Drupal.

**This post is written by our guest author Heather Redding. She's a freelance content writer.

Interested to write for us? Drop a mail at [email protected] with your awesome ideas.

Mar 26 2020
Mar 26

Working from home (aka telecommuting) can be great for productivity and employee happiness. But not everyone is used to it – or prepared to do it (and many have been forced to recently because of COVID-19). At Kalamuna, we work on a distributed team, which means that most of us already work from home – and some of us are also used to setting up temporary workstations while travelling. It’s not always easy (or ideal), but a few small adjustments can make a big difference. Here are some of our team’s top tips for working effectively from the homefront.

Health & Wellness Tips

Go for a pre-work walk

It’s easy to roll out of bed, eat breakfast, then jump on the computer and start working. But I always feel calmer, more focused, and more productive if I take some time in the morning to do something physical and grounding before work – like going for a walk. It makes me get dressed, get some fresh air and exercise, and clear my mind. (And if I can’t go outside, some kind of fun stress-relieving exercise works too: like dancing, yoga, chi gong, cleaning to music…). 

Bonus: Go for a walk after work! It signals the work day is over, gives you a chance to de-stress and connect with your body and the physical world out there.

– Patricia

Dress for success

One of the most impactful changes I made to my routine a few years ago was establishing the following rule for myself: I always get dressed for work as if I’m going into an office, and at the end of the workday, I get changed out of my work clothes to signal that mental shift back to “personal time”. This simple little routine has really helped me manage my remote working habits, and set clear signals and boundaries for myself about when I'm in "work mode" vs "off the clock". It also ensures that I always look professional when I go on video calls.


– Crispin

Create a routine

Knowing ahead of time what you’ll do the next day saves time and hampers a feeling of chaos. 
    •    You spend less time thinking: “what do I do now?”

    •    Builds life’s necessities (such as eating and drinking water) into your day

    •    Allows you to think more creatively about non-routine parts of life.


– Shannon

Keep the routine

It can be tempting, especially if you are not doing meetings on camera, to work in the comfort of your PJ’s. A shower, fresh clothes, breakfast, a cup of coffee and otherwise following the same routine you would keep as if you were going into the office will help motivate and energize you for the day. These are the things that prepare us for a normal day. When you start to slack on the morning basics you are no longer having a “normal” day and the chances of letting other areas of your work slide go up. Not to mention you’ll just feel better and that goes a long way.

– Jason

Stay hydrated & eat well

Stay hydrated - ensure you always have some water by your side. Along with water, keep your energy levels up with your favourite beverage, be it tea, coffee, or even a delicious smoothie.

Eat a healthy and nutritious lunch, away from your work environment. Keeping energy levels up is important, and having the time away from the work environment will keep you in the right mindset. While working remotely, it is possible to lose track of time, so schedule a lunch in your calendar, get away from your work environment, and go eat something delicious and nutritious. If your energy is getting low, let the team know, and take a break!

– Rob

Invest in ergonomic gear

Investing in a good chair will save your lower back. Back pain is real, and can be very distracting when trying to focus on getting things done. Standing workstations and ergonomic gear can be helpful too. Take the time to stretch, go for a walk, and ease your eyes off of the screen to reduce stress, and save your body down the line.

– Rob

Lily's ergonomic work station is built on top of a solid .stand-up deskLily's work station is built on an adjustable stand-up desk.

Discover how you thrive

We are all different, yet most of us are forced from a young age into a set way of learning and working. When we work from home, we shed the social pressure to work the way everyone else works. This can be an invaluable opportunity to discover how you thrive. For instance, I like to leave my house each morning (though not recently, of course, due to the COVID-19 pandemic) to complete focused work at a coffee shop, then take my meetings from my quiet home office in the afternoon. I also like to listen to long DJ sets on YouTube at my standing desk and dance while I work. These are ways I thrive that I may have never discovered without the freedom of working from home. 

– Lily

Tips For Staying Organized

Live Powerfully Through Your Calendar

If something is in your calendar, do it. If you need to do something that’s not in your calendar, add it in, and do it. Your calendar is your way to keep yourself accountable, and a history check of what you’ve been up to. Having it readily available at all times during the day will keep you focused and productive.

In addition, block off time when you’re heads down and working. Meetings are disruptive, so keeping them brief and action-focused will result in a more productive day.

– Rob

Become the master of your to-do list

I have a passion for personal tasking. This fervor originated when I entered agency life, and the associated constant plate spinning overwhelmed my workday. It endures as my notebook continues to be a natural extension of my brain, centering me in my days spent mostly with screens for company. I cannot imagine working without it, especially in my fully remote role. I had the opportunity to share a session on this topic titled “Piles of Post-Its – Staying Organized to Focus on What Matters” at last year’s Bay Area Drupal Camp and wholeheartedly recommend the recording. 

– Lily

Communication Tips

Rob and Sean sing a duet during a virtual team meetingRob and Sean sing a duet during a virtual team meeting

Email like a boss

I’ve found efficiency gains by focusing my email time windows to twice daily – once in the AM and again in the PM. This lets me write in a more focused and potent way that is freer from other distractions. I’m able to craft and refine messages better, perform more effective triage and feel more on top of things. The AM pass generally sees me cherry-pick the most urgent mail (from a filter I call “purest work – no projects” that hides email notifications from other PM tools)  and either respond or TODO them, and catch up on some newsletters or timely messaging. Later in the day, I do a bit more cleanup like unsubscribing, visiting less filtered lists and going back in time to emails that flew by. Most people don’t expect an email response within the hour. Phone, Slack, and meetings are more immediate forms of communication. And, if something’s urgent another member of my team will generally be cc’d and bring it to my attention via Slack. This technique may not be for everyone, but it helps me process triple digit email queues.

– Andrew

Over-communicate and track your time

I have been coworking for a while. Here are a couple of things that I learned early on that have really helped:
 
    •    Over-communicate. If you are unsure, or if you can make an opportunity to just say hi, it can work wonders.

    •    Track all of your time. Even if it is not billable. This reduces anxiety, and if you use a tool like Harvest you can run your own reports, which can be valuable info!
 

– Greg

Communicate your work schedule to your household

Apart from discussing the hours you are working from home with those you live with, it’s also important to let them know what times you will have calls at. In the past, I’ve been in awkward situations where one of my family members was shouting in another room while I was on a call. Dedicated home office spaces help avoid these situations but if you share the space you work in with others, it’s even more important to give them the heads up when you need things to be quiet. That way you can limit interruptions. But life happens and who knows, maybe your next work interruption will be a viral moment: children interrupt BBC News interview.

– Graciela

Make it clear you are working

You are home. When you’re home your family might be used to you being free – and that can mean interruptions. Communicate your work hours – and while yes you are at home, we need to treat this time as though you are at work. Don’t ignore them completely (as this could be the office chatter you need) but let them know that you cannot stop working every five minutes to help out with something. This will help you stay focused and more productive.

– Jason

Use video conference tools for meetings 

At Kalamuna we value being able to collaborate both internally and with our clients over video conferencing. It allows us to monitor non-verbal communication when something might be confusing or when a piece of functionality really wows a stakeholder. It helps create relationships and reminds us that we’re all humans. Creating a video-first culture ensures that our team is ready to face the agenda at hand and their attention is focused. Get yourself and your workplace camera ready and make sure your internet connection can handle the bandwidth. If you aren’t able to share your camera, explain to your team why: perhaps you're conserving bandwidth or not feeling well. 

– Kristin

Make your video look good

Yes, we are at home, but take some time to improve your environment for video presentations. Drag some lights over – you don't need to be Scorsese, but don't have clothes hanging in the background – make an effort!

– Greg

Use tech to stay connected

If you work in an office, odds are you have interactions with your co-workers. It is important to find ways to keep that interaction going. You don’t have to feel like you are alone on an island. Applications like Slack, Google Hangouts and other text or video applications can go a long way in feeling like you and your team are close. I have worked remotely for years now and some of my teammates and I have never met in person, but because of applications like these I’ve felt just as close to them as if we worked in an office together. You are not completely alone, reach out and keep the interactions alive.

– Jason

Environment Tips

Candice's work station includes a cat, an aquarium, and mood lightingCandice's cat awaits her return to work

Designate a work area (and careful with distractions)

The dishes need to be done, the laundry needs to be folded and there you are at home. Five minutes won't hurt right? The problem is that once you get into “cleanup mode” it can be difficult to break out. Yes we are home, but we are also at work. It’s important to create a worklike environment. If you have an office, use it, if not, designate a specific area in your home where you will work. In your “office” you are at work. This will help keep down the distractions and help you focus. 

Also, it does not happen for everyone, but it does to some, where the place you work in your home becomes associated with work. If you work from the couch that becomes the office and even when you try to relax all you can think of is work. Designating an area in your home for work, can help create a healthier work/home life balance.

– Jason

Put a veil on your workstation

When I lived with roommates, my workstation was in my bedroom. I could see my computer sitting on a desk from my bed. My computer had a “breathing” green light on it – which I had to cover with an opaque piece of tape so it wouldn’t illuminate the room in a rhythmic way. Having work associations in the bedroom was not great for sleeping, so I put a silky white piece of fabric over my workstation everyday when I was done work. Besides being a good ritual to indicate the work day was done, when I returned to my room to sleep I didn’t have to look at my computer (or the work clutter on my desk) and think about all the problems I had to solve.

– Patricia

Work together, apart

While you’re working away, if you thrive with others around, have an ongoing background video conference with the people you’re working with. Despite all working remotely, for some it’s great getting that coffee-shop vibe, while not at a coffee-shop. Make sure to mute yourself when not speaking though.

– Rob

Too quiet for you?

I am a big fan of having a video on YouTube playing on my second monitor to be extremely helpful in generating my own office buzz. Just to hear someone else's voice instead of silence goes a long way in feeling like you are not alone. If you’re not a video person, music or podcasts can be equally great in killing the silence. Just remember, don’t get too sucked in, you are still at work.

– Jason

Final tips + thoughts

By focusing on your health and well-being, staying organized, upping your communication skills, and tweaking your environment - you can work like a pro from home. To bring it all home, here’s some bonus advice:

“Try the tips we have listed here. Try other tips you find online. Make up your own tips. See what works for you and dance like nobody's watching, because they’re not.”

– Lily

“Working remotely can be a shift, and difficult to adjust to. Don’t let that stop you from being an absolute badass. Set up a legendary working environment that allows you to thrive and be the best version of yourself.”

– Rob

If you’re remotely interested and want to learn more, Lily wrote a post on how to Throw an Epic Remote Office Party.

We’d love to hear your tips too - please share them with us on Twitter

See you online :-)

Mar 26 2020
Mar 26

First, I want to thank everyone in the Drupal community for all you have done in the past to support each other and the Drupal project. I was fortunate when I started my Drupal journey back in 2011 to have been introduced to and embraced by the Drupal community right from the start. I have met so many incredible people who I now consider friends. My life wouldn’t be what it is today without so many of you. Thanks to the awesome community for that.

As one of the community-elected members of the Drupal Association Board of Directors, I am reaching out to the Drupal community for your support.

Please start by taking a few minutes to read the recent post by Dries Buytaert (founder and project lead of Drupal) and the recent post by Heather Rocker (Executive Director of the Drupal Association) regarding the uncertain times which the Drupal Association faces with DrupalCon Minneapolis due to the COVID-19 pandemic. These posts explain why it is so important for folks to step up now and help support the Drupal Association.

So how can the Drupal Community help?

What can an organization do?

What can an individual do?

What can everyone do?

  • Reach out to companies and organizations that you support that depend on Drupal and encourage them to join the Drupal Association as a Supporting Partner or to make a Donation. So many great organizations depend on Drupal for their websites and functionality, yet do not know that the Drupal Association exists or understand why supporting the DA is so important to the Drupal project.  (Template to potentially be used as a starting point for your email)
  • Reach out to those in your local Drupal communities to encourage folks to learn about how the Drupal Association supports the Drupal project and why it’s important for everyone in the Drupal Community to help the Drupal Association during these uncertain times.
  • Share this message on social media to help us reach as many folks as possible.

Thanks to all the incredible folks in the Drupal Community for your help. I look forward to seeing everyone online for now and can’t wait until we can meet in person once again. Stay safe and healthy!

Leslie Glynn
Drupal Association At-Large Board Member
Drupal.org - leslieg

Mar 26 2020
Mar 26

The Covid-19 pandemic has shaken the entire world. The future seems uncertain and things aren’t going the way as planned. Yet, businesses must hang in there and assure their users on what they should expect from them. We have helped some of our clients create banner announcements on their Drupal websites to let their customers know –

  • They are still operational 
  • Their working hours
  • How they can help better in these uncertain conditions
  • Precautionary actions that are underway
  • Restrictions on available services
     
covid-drupal  
     Great Southern Homes' Covid-19 Response Announcement

Of course, these announcement banners can be leveraged for any kind of informational messages that need to be displayed for a certain period of time. Let’s take you through this in two different ways. One is by creating a custom pop-up for announcements using Bootstrap modal in Drupal 8. This method offers more flexible customizations and detailing. The other option is a simpler one using the Drupal 8 Site Alert module.

Creating a custom pop-up for announcements using Bootstrap modal In Drupal 8

For a fully customized announcement banner with a decent theming, editable announcement based on the user’s selection, we can go with this option. Showing banners to the visitors depends on the selection made in the configuration form.

Step 1: Since we are building a custom announcement banner, we need to have a custom module as every feature in Drupal is a module. Build the custom module according to these instructions

Step 2: Also, the announcement needs to be configurable. We need to create an editable configuration form with required field. Follow these instructions to create configuration forms.  

Step 3: Create a plugin block for fetching the configuration form values in a custom module. Follow these instructions to create the custom block. All the validations and access should be handled within the plugin block. We will need to attach the configuration value to Javascript to build a modal pop-up in JS.

Step 4: Create a libraries.yml for defining the libraries for displaying the modal popup using bootstrap. Also Write a Javascript logic to render the announcement data into the modal. Follow these instructions to add JS to the Drupal 8 module. 

Step 5: Create a menu link for easy navigation in the custom module according to these instructions

Step 6: Place the created block in a region for the configurations provided in custom configuration form.

Now you should be able to see the pop-up in the region for the specified path based on the configuration selection.

Custom pop-up for announcements using Bootstrap modal In Drupal 8 
   Custom pop-up for announcements using Bootstrap modal In Drupal 8

Creating site announcement banners using the Site Alert Drupal module

This Drupal module has been around since Drupal 7. The Site Alert Drupal module is lightweight and simple which lets you create a site-wide informational message. It allows you to specify a start date and expiration date, severity of the alert message that is symbolized by the background color of the announcement and the content. 


Setup –

1.Enable the Site Alert module

Configuration->System->Manage Site Alerts in path

 2.Create the announcement/alert

admin/config/system/site-alerts

3. Place and configure the Site alert block from block layout according to your requirements

Structure -> blocks
Drupal.org
              Image source - Drupal.org drupal site alert                    
                                 Site Alert
Mar 25 2020
Mar 25
A blue heart with the Drupal icon in it

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 which scenario we are forced into.

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. Just this week, we learned that there will be no future O'Reilly conferences, including OSCON. For the many of us who attended OSCON in the past, this truly is the end of an era.

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!

March 25, 2020

2 min read time

Mar 25 2020
Mar 25

Update: Project founder Dries Buytaert has put out his call for your support, as well.

I want to thank you for your patience as the Drupal Association continues to manage the shifting landscape for nonprofits in light of COVID-19. In my last update, I explained that our ability to pivot our plans for DrupalCon depends on governmental intervention, which has not yet occurred for the time period in which DrupalCon Minneapolis is scheduled. Unfortunately this means we're still in a holding pattern as I write this.

That said, we're not spending this time idly. Many hours are being spent with our contracted providers and modeling financial outcomes for the Association and the project.  Through all of this, it has become clear that, regardless of what happens next, we have to deal with the hard reality that DrupalCon revenue is a substantial part of what keeps the Drupal Association vital.   We estimate the revenue loss to range anywhere from $400,000 to $1.1 million.

I’m now reaching out to you to help us close this gap so we may continue to support Drupal, thrive and serve you.

As an organization, join our Supporting Partner Program or join our DrupalCon sponsor pledge to commit your funds regardless of the outcome of the current crisis.

Join as a Supporter

Join the Sponsor Pledge

As an individual, join our membership program, or if you're already a member, consider making an additional donation and/or upgrading your membership level.

Join as a Member

Both individuals and organizations can also simply make a charitable donation.

Make a Donation

Well before this crisis hit, the board and our team have focused on decreasing our dependence on event-based revenue by launching new initiatives such as Drupal Steward, increasing our focus on digital partnerships, and revamping current programs including individual and organizational memberships.  In addition, the board’s strategic planning includes continued diversification of revenue with an eye toward programs requested by our community like organizational certification and more visibility of those contributing to Drupal with time, talent, and treasure.  A pipeline of products and services are in development, but they simply aren’t ready to launch yet. 

Quite frankly, I’m heartbroken because the Drupal Association was on track to achieve many of our strategic goals, leading the organization down a more solid financial path while also expanding our capacity to meet our mission and serve our community.    Only a few months ago, I found great energy and inspiration from the vision of presenting our strategic plans and reporting on our progress to you, in person, at DrupalCon. Absent the effects of COVID-19, I would have more good news to share with you about what we are accomplishing together. 

Instead, we, like most of the world around us, are facing an unprecedented challenge that will only be solved with an unprecedented community effort.

Despite the difficulty of this news and understanding that these are uncertain times for everyone, we continue to cherish our amazing community. As I ask for your support, I want to thank those organizations who have stepped up to confirm their financial commitment: Acquia, Amazee Group, Centarro, Contegix, FFW, Lullabot, Palantir, Srijan and Third and Grove

I hope that you will join them.

Heather Rocker
Executive Director, Drupal Association

Mar 25 2020
Mar 25

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

As an online store owner, you will just need to help them a little — and this will be a win-win! Flexible product management is one of the reasons to choose Drupal Commerce, an e-commerce platform for Drupal websites. Today, we will discuss one of its useful opportunities — the option to set up product attributes in your Drupal online store.

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 anything from providing the 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.

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 actually the same, but it differs by 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 easily add different product variations within the same product page by specifying their attribute values. No need to create separate products.
  • You 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 the desired attributes and add it to cart, with no need to go to a page with a different product.

Setting up product attributes in Drupal

If your e-commerce websits sells products that differ in some characteristics (or this is in your plans), 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,” give it a name (e.g. “Dress color”).

Adding product attributes in Drupal Commerce

Adding attribute values

Your online store customers will need to be choosing 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 also 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 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!

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 programing langage. and put Drupalicon in your macOS's menu bar!

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 you 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!
Mar 25 2020
Mar 25

Every digital business owner strives to provide the most engaging experiences both for desktop and mobile users. They might want to build a mobile app. However, the task of great web development companies is to offer alternatives to every idea.

One of these interesting choices here is a progressive web app (PWA). Read on to learn more about PWAs, what they are, what makes them beneficial, as well as progressive web apps and Drupal integration.

What is a progressive web app (PWA)?

A progressive web application is a web application that loads like a usual website but delivers modern experiences similar to those in native apps. They include push notifications, offline work, device hardware access, etc. PWAs unite the features provided by modern browsers and the pros of mobile experiences.

Progressive web app example

Why use PWA? The PWA benefits

  • By integrating a PWA into your Drupal website, you enrich the latter with cool technologies and provide app-like experiences. This can boost your business significantly. Let’s go into more details and list some of the PWA benefits:
  • The cost of developing a PWA is lower than with native applications.
  • A progressive web app is also faster to build than a native app.
  • PWAs work for all users regardless of their browsers thanks to the progressive enhancement approach.
  • Progressive web apps can be easily added by users to the homescreen with no need to go to an app store.
  • They are responsive so they deliver smooth experiences across desktop, tablet, and mobile devices.
  • Features like push notifications are huge attention catchers able to significantly increase your user engagement.
  • PWA can work offline or on slow networks and load fast thanks to the use of service worker scripts, which improves user experiences and expands your reach.
  • PWA is secure thanks to the use of HTTPS that prevents data manipulations.

What’s inside? The PWA components

Every progressive web application has three key components:

  1. The app shell stores the basic JavaScript, CSS, and HTML needed for your application UI and quickly serves it from the cache.
  2. The service workers are JavaScript files that run on the background of browsers and serve the response from the cache to offline users, and can be scripted to provide push notifications, etc.
  3. The web manifest is a manifest.json file that holds your app configuration (name, look, color, logos, etc.) and allows your users to add the app to their home screen.

How to add PWA functionality to Drupal

There is a module for everything in Drupal. The integration of a progressive web application with Drupal is no exception. This integration can be provided with the Progressive Web App Drupal module.

The Progressive Web App module in Drupal

The Progressive Web App Drupal module injects the PWA features into your Drupal site without any complexities. It creates the standard setup, and JS developers are able to additionally write service worker scripts to further customize the app-like behavior of the PWA.

Here are some of the module’s features for the smooth Drupal and PWA integration:

  • The module has a service worker that takes care of caching and offline work. When active, the service worker makes the pages load faster. It provides the serving of pages from the cache. Among the additional tweaks, there are fallback images showing for uncached images.
  • The Drupal module creates a configurable manifest.json file with all the needed metadata. It allows the "add to home screen" prompt in eligible browsers.
  • Site admins are able to configure the manifest from the Drupal UI.
  • Other modules on the Drupal website can add their modifications to the manifest.

The module’s configuration page is found at admin/config/pwa/settings where you can fill in the necessary data in the manifest or change the provided defaults (your app name, description, default language, start URL, theme and background color, and much more). This page also includes the settings for your PWA’s service worker that out-of-box deals with caching.

Progressive Web App module in Drupal

Progressive Web App module in Drupal

Progressive Web App module in Drupal

System requirements for the Progressive Web App module

In order to use this PWA integration module, you will need to fulfil these two key technical requirements:

The PHP version on your server should be 7.2 or higher. The module creators plan to further raise this minimum PHP requirement in line with the upcoming PHP updates.

Your server has to support secure connections using HTTPS. This is required by the W3 specification.

Let our team help you with progressive web app and Drupal integration

If you are interested in a fast, engaging, and secure PWA for your Drupal site, our Drupal development team is ready to assist you.

We will perform the smooth integration and configure your PWA to behave in accordance with all your requirements, including the creation of custom service worker scripts. In addition, we will take care of the technical requirements for the integration (update your PHP and switch your site to HTTPS if it hasn’t yet).

Let’s discuss the details of your successful progressive web app and Drupal integration. Try a progressive web app and may it help your business progress!

Mar 25 2020
Mar 25

Laravel is a PHP framework that has witnessed comparatively less attention than CMS heavyweights like Drupal and WordPress and frameworks like Symfony, but it nonetheless offers several compelling advantages for enterprise website implementations. Recently, a large organization worked with Tag1 to move legacy databases into a more modern approach that, coupled with Laravel and Vue.js, led to considerable improvements in not only developer experience but also user experience.

Moreover, Laravel is an excellent tool for architecting custom applications with complex logic, all without any complexity offloaded onto the developer experience. Thanks to the Laravel ecosystem, you can have a working PHP application with APIs and a functional single-page JavaScript application in Vue.js with minimal overhead. Instead of having to define low-level properties like in Symfony or deal with too many premade assumptions like in Drupal or WordPress, you can focus on user workflows in Laravel and benefit from a more reasonable learning curve as well.

In this Tag1 Team Talks episode, László Horváth (Senior Laravel Developer at Tag1) joins guests Fabian Franz (Senior Technical Architect and Performance Lead at Tag1), Michael Meyers (Managing Director at Tag1), and your host Preston So (Editor in Chief at Tag1 and Senior Director, Product Strategy at Oracle) for a deep dive into why Laravel should be your choice when building a mission-critical PHP architecture that encompasses a decoupled front end in JavaScript and multi-level access control and permissioning.

[embedded content]


Mar 25 2020
Mar 25

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.

Software developer Majid from 1xINTERNE contributing at DrupalCon Amsterdam 2020Majid and Yannick contributing at DrupalCon Amsterdam 2020

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.

Mar 25 2020
Mar 25

Drupal CMS offers a rich user interface and powerful content editing experience. There are a lot of contributed modules that enhance the system and its editing experience. One of the projects I was working with called for concurrent editing implementation. Concurrent editing simply means allowing multiple editors to edit the same content at the same time, without the possibility of conflicts arising due to concurrent actions.

In today’s editorial landscape, content creators can not only access a document countless times to revise and update content but also work with distributed teams. For this reason, concurrent editing has become among the most essential and commonly requested features for any content management solution.

The project (Layout Engine) involved configuring pages and blocks of a mobile application through Drupal.

A single page of a mobile application consists of multiple sections, these sections could contain data as per user’s locations or any other criteria. A page in Drupal was primarily a content type. We used paragraphs to configure blocks which we call widgets. So basically, a banner on the homepage of a mobile application is a widget.

These pages and widgets were configured by our client’s marketing team. Any page on the mobile app could consist of 'N' number of widgets. Due to a large number of widgets present, it was difficult for a single user to be familiar with all of them. Multiple members of the marketing team worked on the app simultaneously, making it difficult to edit the layouts/widgets. 

Thus the client needed a system where multiple users could simultaneously edit the layouts and their widgets independently.

Collaborative editing has long existed as a concept outside the content management system (CMS). It is a limitation of Drupal at the moment, and we don’t see any solution for it in Drupal core soon. A big thanks to the members of the community who contribute their code in the form of modules making solutions available to the world in a quick google search. 

We explored a couple of modules which fulfilled our requirements to some extent.

| Paragraph Frontend UI

This module provides quick editing of widgets on the view page itself. 

A user won’t have to go to the edit page and then search for the widget to update and then save the whole node. He can do it quickly on the view screen. We believed this would allow multiple users to quickly edit the widgets and will solve the issues. But, it turned out that the module throws a deadlock error when multiple users are updating different paragraphs of the same node. Therefore, we discarded the possibility of using the Paragraph Frontend UI  module.

The next module we explored was the Paragraph Edit module. It provides a separate page to edit the paragraphs through the contextual links. It does not break when multiple users attempt to edit different paragraphs simultaneously. But the issue with this approach was that it supported separate editing only. So if a user had to create a new paragraph/widget, he/she had to go to the edit node form. The tricky part here is, if an editor is on the node edit form while some other editor made changes through the quick link, the current form will contain the old data. In this case, when a user saves the node, it will revert those changes to the previous version. We did not want that either.

| Conflict

It does not have any additional configuration attached to it. I am adding two screenshots below to show how it works. This is what the second user will see when the first user has already saved the node and content is in the database. To know more visit - https://www.drupal.org/project/conflict

     Concurrent editing in Drupal 8           

Once the user clicks on the 'resolve conflicts' button, it shows two versions of each field, something like in the following screenshot. Users have to manually update the field accordingly and need to save the content again.

Concurrent editing in Drupal 8

This module is a good solution under the following instances:

  1. If the node form has a simple structure and the user can afford to update the content manually. In a complex architecture where we use paragraphs to provide flexibility to the editors, this will create a lot of confusion.

  2. It only works for two users as you can see in the screenshot above, it shows what is the difference in the server. If a third user is editing the content at the same time, it will override the changes of the second user.

| Content Lock (anti-concurrent editing)

As the name suggests this module locks the content for the first editor who started to edit the content. Any other editor will see the message and all the fields will be disabled for him/her.

Features of Content Lock (anti-concurrent editing): 

  1. The lock will break when the user saves the content. The other user will see the message and will know who is editing the content at the moment.

  2. If a user doesn’t save the content, it has a submodule called content_lock_timeout where we can set a time for the content to hold the lock. It breaks the lock on cron run as well as when the second user comes to the edit node.

  3. It has an option to manually break the lock as well, so a user with the permission to break the lock can also free the content from the editor.

The content lock was used until we had a proper solution for concurrent editing.

After countless discussions with the marketing team, we decided to provide a solution to overcome the concurrent editing problem. We decoupled all the widget creation as a separate node and referred those nodes into the Layouts. This way, everybody had control on their own widgets and they did not need to wait for the content lock to end.

If you happen to have a better solution for concurrent editing, we would love to hear about it! 

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.

Mar 24 2020
Mar 24

If you have studied some form of software design or are into designing, you should be familiar 
with the terms - "UI" and "UX". Yet, sometimes we tend to use both these words interchangeably. 
So, what sets UI apart from UX?
UX design is what makes an interface functional in its simplest forms and UI design is what makes an interface appealing and beautiful.

UI-UX Design

What is a UI Design? 

User Interface is something that a user uses to interact with a product or a service. As with the design of user experience, user interface design is a complex and challenging task. It is responsible for translating the creation, analysis, content, and layout of a product into an appealing, guiding, and responsive user interface.

  • User Interface design is all about how the product’s interface looks. This considers all of the interface's visual and interactive elements— including buttons, icons, spacing, typography, color schemes and responsive design.
  • The aim of UI design is to visually direct the user through the interface of a product. It's all about having a good experience that doesn't take too much thought and effort from the consumer.
  • A good UI design ensures the design is consistent and aesthetically pleasing. 

 What is a UX Design?

User Experience is an overall experience of a user when they interact with the products or services.

  • User experience design is a method of improving and enhancing the functionality of the user-interaction.
  • UX concept is NOT about visuals; it's based on the overall experience.
  • UX isn't just about making the consumer satisfied, however. It is about helping the customer to accomplish their activities in the best possible way and attain business objectives.
Dribbble                                             Image source - Dribbble

User experience design is the process of designing and enhancing the consistency of a user's engagement with all facets of a business and thereby improving the user experience.
As of the current situation within the digital globe, every business tries to make an impact on user in order to multiply its sale and to provide a happening experience for a consumer all with help of User Experience and User Interface design.

How can a CMS like Drupal 8 help enhance the UX of a website? 

A Content Management System plays a key role in the success of a website’s UX design. Drupal 8 offers flexibility in customizing content as well as design. Let’s look at how is Drupal 8 a great choice of CMS if you are looking at creating compelling UX designs.

  • Page Speed – Fast-loading websites not only enhances the performance but also the overall user experience. Drupal 8 provides performance boosting features like advanced caching options, image optimization, code optimization, database optimization and more.
  • Responsive – With Drupal 8, responsiveness runs in the blood. Which means that all Drupal 8 websites are responsive out-of-the-box! And without a responsiveness, the UX of a website is incomplete.
  • Personalization – It has been proven that websites that offers personalized experiences see more conversions than websites without it. Drupal 8 offers various modules that let you personalize your content based on the user’s demographics, device information, date and time of login and more.
  • Multi-lingual – Did you know that only 20% of the world’s population can speak / understand English? To be able to provide a personal touch through the UX of a website, it is important to speak with the user in the language they are comfortable with. Drupal 8 offers multi-lingual support out-of-the-box with over 100 languages to choose from.
  • Headless Drupal – Decoupling Drupal gives UI/UX designers a lot more control over the design elements of a website. When front-end frameworks like ReactJS and Angular JS are leveraged with Drupal 8, the user experience can be enriched. 
  • Themes – The Drupal community has built hundreds of themes that can be adapted to any business requirements. You can find Drupal core themes that come out-of-the-box with Drupal 8 as well as third-party Drupal 8 themes. If none of them suit your needs, you can also customize a theme to have them tailor fit.

How does UX differ from UI?

Here is an analogy I like to use to describe the difference between both.
If you imagine the human body to be a product. The organs reflect the UX design: measuring and optimizing to support life and UI design reflects the body's cosmetics; their appearance, their senses yet their reactions. 
The key distinction to remember is this: UX design is all about the overall feel of the user while UI design is all about how the interfaces of the product look and work.

Dribbble                         Image source - Dribbble 

For instance, User Experience (UX) is mostly emotional and is the consumer's mental actions, like how a user reacts when using a product or what emotions he feels during the usage of a product.

It mostly deals with what goals users are trying to achieve via the product, what their needs are, what feelings are they experiencing, what strategy is to be applied, and what interactions are they likely to perform in order to reach their goals.

Whereas User Interface (UI) is tangible. It mostly deals with the visual hierarchy of the product, including buttons, typography, colors etc. UI designers basically have to deal with scalable designs and have to improve the user flows by reducing the time required for a user to reach his goal while making the product aesthetically pleasing and visually beautiful for the user.

Good and Bad UI/UX Examples

Let’s talk about a few bad examples of UI/UX

Distractions create bad first impressions                    Distractions create bad first impressions

When looking at the above example at the first sight, it gets rather confusing about what the website is all about. A user is shown various ads and unwanted information and is presented with a lot of information that is difficult to be processed, hence making users bounce off the website without even reading the news posting which they were looking for in first place.

bad ui/ux experiencebad-ui-ux

These are some more bad examples of UI/UX.

When looking at the above two images, a user gets confused and is likely to be diverted from his actual goals. In 2020, responsive designs are not a trend but a necessity. The above examples show the bad and harsh usage of colors and typography leading to confusion.

But not every design is bad. Let’s also talk about some of the very good examples of UI/UX.
The above example shows how a simple micro-interaction can make a user happy and engaged, leading to some immersive experience.

good-ui-uxgood-ui-ux-experience
Mar 24 2020
Mar 24

Configuration management is one of the most prominent features of Drupal 8. You can easily import and export configurations using YAML files and also store them in the “config” table of the database. 

Given this, it has become a cakewalk now to pass commands in Drush and follow the steps required to export configurations from one environment and import it to another, thereby making it easier to manage them in code-base using the version-control system.

However, things turn out complicated when it comes to managing multiple site configurations that employ a “single” platform for streamlining common features across various brands.

For instance, there is information in the article that all brands want to use on their respective sites. The twist is that each brand wants to use different sets of fields and display pattern to showcase it on their site.

Thus,  the problem of this solution is to create one profile, “Core Platform” and place all common features for easy distribution and sharing across multiple brands. Further, these features should be pluggable as well available for each brand to use in the future.

This blog series (Part I & II) will help you understand the development process and maintenance of -

  1. common configuration across multiple sites
  2. Different configurations as per brands’ requirements
  3. Configurations as per the environment, and
  4. Usage of configuration Split Module and Configuration ignore

 

Please note that if configuration management is a new business for you, it’s highly recommended to go through the Drupal documentation first to acquaint yourself with configuration export and import commands.

 

Moving forward, let’s consider two cases to determine whether a feature should be brand specific or need to be pushed as part of a Core platform to become available for multiple brands. 

 

Case 1 :

Multiple brands have requested to introduce a new content type, “companies on the move” section, which lets anonymous users submit their entries in the same and complete the process by going through a checkout process. This will display users’ submitted profile on /company-on-the-move listing page.

So, these are the following questions that crop up, considering the case I:

 

  1. Which multiple brands have requested this new content type?
  2. Is there anything specific that brands need to be configured or displayed differently for them?
  3. Are the display items (fields) on /company-on-the-move listing page the same across all brands?

 

Now, if answers to the above questions involve “brand A, B, C, D, and Nothing”, i.e., nothing specific needs to be developed and displayed for any brand, then it is an indication for core platform features.

Besides, these features in the core can be employed by any brand, anytime in the future.

 

Case 2 :

Brand A and B want to add a specific new field for their editors to company content type, which would be accessible for them only. In this case, we’ll have the following info available across all brands:

  • Company Content type with all the required fields.

It is obvious that only Brand A & B require this feature, so it will be known as “Brand Specific”.

It can be achieved through the following steps-

  1. Create the requested fields in the "Common Core" platform and push it to all brands and write hook_form_alter() to hide that specific field for all other brands except Brand A and Brand B.
  2. Create the requested field just for Brand A and Brand B and push the configuration for these 2 brands.

 

Since our objective is to manage configurations across multiple brands, we’ll take forward the 2nd approach from here onwards.

Learn more about building a Drupal multisite from here-

Development Process 

With a clear understanding of the features’ availability and unavailability for multiple brands, developers can find it easy to jump onto the implementation part.

Colorful balls in various shelves

Case 1 :

  1. Create the new content type on our "Core platform" local site and place the configurations exported (field storage, field, view, panel page for company listing page, form display, view display) under the Core configuration sync folder.
  2. Upon successful code merge and deployment, run CIM on all brands to get the new content type across all brands.

Case 2:

  1. Create fields for just Brand A and Brand B
  2. Export and keep the field.field..... and core.entity_form_display... YAML configuration file in brand-specific configuration sync folders.
  3. On deployment, run drush cim --uri and drush cim --uri=brand_b to import the required configuration files for just these 2 brands.
  4. In this case, other brands will continue using the form display configuration file from Core (the main) configuration sync folder.

Summing up-

Thus, you can decide and develop Core/ brand-specific features hassle-free by following the above-mentioned steps. 

And to learn more about the development process and implementation methods, stay tuned for the next part of the blog, “Configuration Management in Action”.

Keep Coding!

Mar 23 2020
Mar 23

With Drupal 9 coming this summer, my team at the Eberly College of Science at Penn State felt it necessary to get all of the custom modules we have written (or are mission critical contrib modules) updated and as future-ready as possible. A happy side effect of that process is that we've taken the time to modernize the code in the Drupal 8 version of Cosign (https://www.drupal.org/project/cosign). After joining the Cosign project, I'm happy to announce that we have released an official Alpha version of the Drupal 8 version of Cosign. 

There is still room for work to be done, primarily documentation and unit tests, but the functionality is there. Cosign is now correctly using dependency injection and has had any (D9) deprecated code replaced. We're also doing our best to follow Drupal code standards across the board. 

If you are using Cosign and have some time to help with testing, writing tests, or documentation, please let me know! 

-Mike

Mar 23 2020
Mar 23

We did it!

  • 3370 Zoom sessions
  • 2086 minutes of recordings (& captions!)
  • 234 peak simultaneous participants
  • 143 new Slack members
  • 41 Discord accounts 
  • 18 first-time contributors trained
  • 3 movies watched remotely
  • 1 incredible virtual event!

MidCamp 2020 is in the bag, and what a whirlwind it was. Over the course of 10 days our volunteer organizers and speakers worked tirelessly to pivot our usual in-person format to 100% virtual, and it wouldn’t have been possible without every single one of you who joined us. 

Through the hard work of the Drupal Recording Initiative and with thanks to Bounteous, you can catch up on anything you missed on YouTube and Drupal.tv. In a few days, those videos will be supplemented with professional captions by ACS Captions, with thanks to Clarity Partners and Pantheon.

As you’re reviewing sessions, please help our speakers by providing feedback for any sessions you attended or watch via their session page on midcamp.org. Finally, please let us know what you thought of the event as a whole on our MidCamp 2020 Survey. The reviews are already coming in, and we’re happy to have had the opportunity to share these days with you.

A+++ would MidCamp again.
- Todd Ross Nienkerk, CEO, Co-Founder at Four Kitchens

MidCamp will return. Stay tuned as we will announce 2021 dates when we can.

Mar 23 2020
Mar 23

In my previous blog post about a few of my favorite Webform things, I expressed my appreciation for the fact that that "most of the code within the Webform module is reusable and extendable." Writing that blog post helped me re-organize and improve my presentation titled, Webforms for Everyone. While updating my presentation, I found explaining and showing how the Webform module’s APIs are reusable is very challenging. As the Webform module has grown and gotten more complicated, I have continually improved the examples and demos included in the module. These examples have helped developers understand how to extend the Webform module. As a result, I decided the best way to show how the Webform module's APIs - specifically form elements and behaviors - are reusable, was to create an example.

The Webform Custom (Configuration) Form example

The goal of the Webform Custom (Configuration) Form example is to show how to leverage Webform APIs outside of the Webform module. For instance, webform elements can be used within a Drupal configuration forms. A very basic reusable enhancement is attaching the Webform module’s JavaScript to warn users about unsaved changes.

A more advanced example is reusing the Webform module's multiple element widget to collect rich data. Recently, I had to create an arbitrary list of node ids stored within a configuration file. In doing so, I was able to use Drupal’s entity autocomplete element combined with the Webform module’s multiple element support.

The below example shows how to use a multiple entity autocomplete element with the unsaved changes behavior within a configuration form.

Webform Form API example

Webform Form API example

The above example was created using the below code snippet.

Using a code generator to create examples

Code generators like Drupal Console are incredibly valuable for creating boilerplate code, particularly for complex APIs or concepts. Drupal Console can also create an entire skeleton of a custom module, which inspired me add a code generator to the Webform Devel module. The Webform Devel module's code generator shows how to convert a Webform to Form API form.

The Webform Devel module, included with the Webform core module, now adds a 'Form API' tab within the configuration 'Export' tab. The 'Form API' tab includes all the boilerplate code required to take a Webform and convert it to a custom configuration form. The generated code consists of the form class definition, route definition, default configuration, and even the custom module's info file. All of the example code can be downloaded as a zipped archive, which can then be installed on any Drupal 8 website.

The below screencast recaps some of the examples discussed and illustrates the workflow and concept behind exporting and converting a Webform into a custom Drupal configuration form.

Something about this feature is pretty mind-blowing. When I included the above demo at the end of my "Webforms for Everyone" presentation at DrupalCampNJ, I managed to get every multitasking developer to look up from their laptops.

I am excited about this new feature and approach because it makes our job as developers a little easier, and people's end-user experiences a little better.

I hope you have fun building out awesome Webform and then exporting them as configuration forms into a custom module.

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.

Almost done…

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

OK

Mar 23 2020
Mar 23

Duplicating content has been a challenge of epidemic proportions on the internet since ages. In fact, it has become a child’s play for everyone to copy-paste a webpage’s online content without even realizing the intricacies of such issues.

Besides, keeping duplicate or similar copies of the same content online implies that you are competing against yourself at the loss of your search engine visibility. Google has explicitly stated that any site that uses/ keeps duplicate content will be penalized.

This blog will shed light on the reasons that cause duplicate content, it’s common reasons, and Drupal modules that can help enterprises in dealing with the same issue.

What Causes Duplicate Content?

Duplicate content is generated when multiple versions of a single page are created. In layman's terms this generally happens when two page share similar content.

However, it happens multiple times that the user unintentionally copies the content from the existing web page, yet it can happen and they have to face the consequences.

Which leaves us with two types of major categories that these sources fall into:

  1. Malicious
    This comprises those scenarios where spammers post content from your website without your permission.
  2. Non-malicious
    The non-malicious duplicate content can have different origins.
    1. Discussion forums that generate both the standard as well as stripped-down pages (targeted for mobile users)
    2. Printer-only web page versions, or
    3. Same products displayed on multiple pages of the eCommerce site

Additionally, Duplicate content can be either identical or similar as well. Given this, below are the 7 most common types of duplicate content mentioned-


1. Scraped Content

Some websites scrape content from other reputable websites thinking that an increased volume of pages on their site will be a good marketing strategy, irrespective of the relevance or creative spirit of that content. 

Rather, this action fails to add value for your users if you are not providing additional useful services or content on your site. in fact, it may also lead to copyright infringement in some cases. 

Some examples of scraping include-

  1. Sites that replicate and republish content from other sites without adding any original content or value to it.
  2. Sites that copy content from other sites, tweak it  a bit, and republish it
  3. Sites that regenerate content feeds from other sites without offering any benefit to the user 
  4. Sites aimed at embedding content such as video, images, or other media from other sites without considerable added value to the user.

 

2. WWW & non-WWW, and HTTP and HTTPs Page Versions Of Website

When both versions of the site, i.e., WWW or non-WWW, are accessible, it leads to duplication of content.

Being the oldest trick, search engines also get confused at times and get it wrong. 

Another scenario is HTTP vs HTTPS - these two versions also lead to serving out duplicate content to users.

3. Printed-Friendly Versions

If your CMS is capable of generating printer-friendly pages which you link with your article pages, Google can easily find them, unless you specifically block them. 

Now, which version would you like Google to show? The one with your ads and peripheral content, or the one that shows your article only?

4. User Session IDs 

Keeping a tab on your visitors and allowing them to store, add, and buy products from their shopping cart, you need to give them a session.

A session comprises details in brief about the visitor like what he did on your site and can also contain things like the items in their shopping cart.

To retain that session as a visitor hops from one page to another, the unique identifier for that particular session, called the Session ID needs to be stored somewhere.  The usual place to do so is cookies. However, search engines don’t usually store cookies.

During that point, few systems slip back while using Session IDs in the URL. This implies that every internal link on the website gets that Session ID added to its URL, and since that Session ID is unique to that session, it generates a new URL, and thus duplicate content.


5. URL Parameters Used For Tracking and Sorting

Another reason for duplicate content is the URL parameters that don’t update the content of a page, for example, in tracking links-

http://www.knowledge.com/book-y/

http://www.knowledge.com/book-y/?source=rss

These two above shown URLs are not the same URLs for the search engine. 

Though the latter one allows you to track the source of traffic on your site, but it might also make it harder for you to rank well, an unwanted after effect!

This is not limited to tracking parameters only but with every parameter than you can add to a URL without changing the important information. Whether the parameter being used is for” changing the sorting on a set of products or for “showing another sidebar”- all of them cause duplicate content.

Modules That Help Deal with Duplicate Content in Drupal

Following Drupal modules can prove useful in dealing with duplicate content-

  1. Global Redirect Module The issue that comes up with the alias system in Drupal is that the default URL remains there, i.e., you can still find 2 URLs pointing towards the same content on your website. However, search engine bots are also smart enough to find out duplicate content easily, thereby lowering your website rank on search engines.

    Thus, the Global redirect module checks if there is an alias already for the existing URL and if it does, then it redirects to the alias URL.

    The module is also responsible for eliminating the trailing slash in the URL, cross-checking that clean URLs are being used correctly and checking permission and access to nodes, URLs.

  2. PathAuto One of the prominent modules of Drupal, Pathauto, dedicates itself in creating the path/URL aliases automatically for the contents (nodes, taxonomy, terms, users) depending on the configurable patterns.

    For example, you configured a blog entry like /category/my-node-title, so Pathauto will instantly generate an SEO friendly URL, which uses tokens and can be altered by administrators.

  3. Intelligent Content Tools An  important tool for website designers and content editors, Intelligent Content Tools module offers three functionalities-
    1. Auto-Tagging
    2. Text Summarization, and
    3. Identifying Duplicate Content

      This smart module, based on Natural Language Processing, keeps you up-to-date on any duplicate content present on the site and then, accordingly identifies and corrects the plagiarized content.

      However, this module does not come under the security advisory policy of Drupal.

  4. Taxonomy Unique Drupal, by default, allows its users to create identical terms in the same vocabulary. To resolve this, Taxonomy unique ensures that no taxonomy term is saved when there is already one existing with the same name in the same vocabulary. Thus, it assures that the names saved are unique.White background with text over itFurther, you can configure it individually for each vocabulary alongside setting up custom error messages in case a duplicate is found.
  5. Suggest Similar Titles Suggest Similar Titles module ensures that titles are not duplicated for any type of content. Its mechanism encompasses matching the proposed titles with the node titles of the existing content type to ensure that they are not similar to the already existing ones.Module working shownThis aids admins/users to avoid replication of content at the site. Additionally, it provides settings page where you can tweak the following settings-
    1. Activate this feature for any content type(s)
    2. Enter the keywords in title comparison that you want to be ignored
    3. Choose the maximum number of titles that you want to show up as a suggestion
    4. Select whether this module should consider node permissions before showcasing node title as a suggestion
    5. You can enter the percentage of similarity between the titles. For instance, if you enter 68, then at least 68% matching titles will be considered similar.

Wrapping up

Search engines are always looking out for unique and quality content that is engaging and informative at the same time. Enterprises might find it difficult to create a 100% duplication free website but Drupal and its modules can be your silver lining for your company. Besides, your search engine rankings can improve greatly if you avoid the mistakes mentioned above.

Planning to migrate your website to Drupal? Drop us a line and our experts will be happy to assist 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